/* Grace Guides — written to the values measured off the original on 4 Sep 2026.
   Class names follow the original so the markup is comparable line for line. */
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Roboto:wght@300;400;500;700&display=swap");

*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:rgb(16,16,16);
  --muted:rgba(16,16,16,.5);
  --hair:rgba(16,16,16,.1);
  --accent:#d6266f;              /* their #eb2a9f, moved */
  --cta:#e07a2f;                 /* their #FF8B21, moved */
  --danger:#cf0216;
  --serif:"Libre Baskerville",ui-serif,Georgia,"Times New Roman",Times,serif;
  --sans:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--serif);
     -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

#app{max-width:450px;margin:0 auto;background:#fff;min-height:100dvh;
     display:flex;flex-direction:column}

/* ---------------------------------------------------------------- top bar */
.slide_top_bar{min-height:60px;padding:12px 0 0;display:grid;
  grid-template-columns:44px 1fr 44px;align-items:center;position:relative}
/* 44px is the smallest reliable touch target on iOS, and most of this traffic
   is a phone. The original ships this at 32px. */
.main_back_button{grid-column:1;width:44px;height:44px;border:0;background:none;
  padding:0 0 0 14px;color:var(--ink);cursor:pointer;display:flex;align-items:center}
.main_back_button svg{width:20px;height:20px}
.slide_top_bar__text{grid-column:2;text-align:center;font-size:16px;line-height:20px;
  letter-spacing:.02em}
.main_progress_bar{grid-column:1/-1;margin:8px 24px 0;height:4px;background:var(--hair)}
.main_progress_bar i{display:block;height:100%;background:var(--ink);transition:width .3s}

/* ---------------------------------------------------------------- layout */
.main_container{flex:1;display:flex;flex-direction:column}
.main_container__body{flex:1;display:flex;flex-direction:column}
.main_container__content{display:flex;flex-direction:column;gap:16px;padding-bottom:28px}
.main_container__element{margin:12px 0 0;padding:0 24px}
.main_container__element--flush{padding:0}

.maintitle{font-size:24px;line-height:36px;font-weight:400;margin:16px 0 0;color:var(--ink)}
.maintitle em,.maintitle i{font-style:italic}
.text_component{font-size:18px;line-height:27px;margin:0;color:var(--muted)}
.text-align--center{text-align:center}
.text-tone--accent{color:var(--accent)}
.subtitle_component{font-size:14px;line-height:21px;color:var(--muted);margin:0}
.image_component{width:100%}

/* ---------------------------------------------------------------- options */
.options_container{display:grid;gap:8px;margin:0}
.options_has_columns{grid-template-columns:repeat(var(--options-columns,2),minmax(0,1fr))}
.options_container .container{display:block;cursor:pointer;border:1px solid var(--hair)}
.options_container .ncard{background:#fff;color:var(--ink);border:0;height:100%}
.options_container .n-card__content{height:100%}
.options_container .label{display:flex;align-items:center;height:100%}
.options_container .n-card__content_inner{width:100%}
.options_container .text{font-size:16px;line-height:20px}

/* list */
.options_list .container{border:1px solid var(--hair)}
.options_list .ncard{display:flex;align-items:center;min-height:70px;padding:0 16px}
.options_list .label{gap:6px;width:100%}
.options_list .text{text-align:left}
.options_list .container[aria-pressed="true"]{border-color:var(--ink)}

/* tiles */
.options_tiles .container{border:1px solid var(--hair);overflow:hidden}
.options_tiles .ncard:not(.ncardimage){justify-content:center;text-align:center;
  padding:12px 8px;min-height:44px}
.options_tiles .ncard:not(.ncardimage) .label{justify-content:center}
.options_tiles .ncardimage .label{flex-direction:column;align-items:stretch;gap:0}
.options_tiles .ncardimage img.image{width:100%;aspect-ratio:var(--options-tile-image-aspect-ratio,1);
  object-fit:var(--options-image-fit,cover);display:block}
.options_tiles .ncardimage .n-card__content_inner{padding:var(--options-tile-label-padding,10px 6px);
  text-align:center}
.options_tiles .container[aria-pressed="true"]{border-color:var(--ink)}
.options_tiles .container[aria-pressed="true"] .ncard:not(.ncardimage){background:#fff}

/* horizontal scale */
.options_horizontal{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.options_horizontal .container{border:1px solid var(--hair)}
.options_horizontal .ncard{justify-content:center;padding:16px 0;text-align:center}
.options_horizontal .container[aria-pressed="true"]{border-color:var(--ink);background:var(--ink)}
.options_horizontal .container[aria-pressed="true"] .text{color:#fff}
.scale_ends{display:flex;justify-content:space-between;font-family:var(--sans);
  font-size:13px;color:var(--muted);margin-top:8px}

/* multi-select check */
.options_container .chk{width:22px;height:22px;flex:0 0 22px;margin-left:auto;
  border:1.8px solid var(--hair);position:relative}
.container[aria-pressed="true"] .chk{border-color:var(--ink)}
.container[aria-pressed="true"] .chk::after{content:"";position:absolute;left:7px;top:3px;
  width:5px;height:11px;border:solid var(--ink);border-width:0 1.8px 1.8px 0;transform:rotate(43deg)}

/* ---------------------------------------------------------------- buttons */
.app-button{display:block;width:100%;border:1px solid transparent;background:var(--ink);
  color:#fff;font-family:var(--serif);font-size:16px;line-height:20.8px;padding:12px;
  text-align:center;cursor:pointer;text-decoration:none}
.app-button--colored{background:var(--app-button-color,var(--cta));border-color:transparent}
.app-button--ghost{background:none;color:var(--ink);border-color:var(--ink)}
.app-button--text{background:none;color:var(--muted);border:0;text-decoration:underline;
  font-size:15px;padding:10px}
.app-button[disabled],.app-button--disabled{opacity:.5;pointer-events:none}
.main_bottom_dock{position:sticky;bottom:0;background:#fff;padding:12px 24px
  calc(16px + env(safe-area-inset-bottom));z-index:5;
  box-shadow:0 -8px 20px rgba(255,255,255,.9)}

/* ---------------------------------------------------------------- inputs */
.inputnumber-container,.inputstring-container{display:flex;gap:12px}
.n_input_number,.n_input_string{position:relative;flex:1}
.n_input_number input,.n_input_string input{width:100%;height:56px;border:1px solid var(--ink);
  border-radius:0;background:#fff;color:var(--ink);padding:.625rem 44px .625rem .625rem;
  font-family:var(--serif);font-size:18px}
.n_input_number input:focus,.n_input_string input:focus{outline:0;border-color:var(--ink)}
.n-input-number-suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);text-transform:uppercase;font-family:var(--sans);font-size:13px}
.field_error{color:var(--danger);font-family:var(--sans);font-size:13px;margin-top:6px;display:none}
.is-bad input{border-color:var(--danger)}
.is-bad .field_error{display:block}

/* ---------------------------------------------------------------- pieces */
.glg-timer-bar{background:var(--ink);color:#fff;font-family:var(--sans);font-size:14px;
  padding:10px 24px;display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:6}
.glg-timer-bar b{font-variant-numeric:tabular-nums}
.plan_card{border:1px solid var(--hair);padding:16px;display:flex;align-items:center;gap:14px;
  cursor:pointer;background:#fff;width:100%;text-align:left;font-family:var(--serif)}
.plan_card[aria-pressed="true"]{border-color:var(--ink)}
.plan_card .plan_price{margin-left:auto;text-align:right;white-space:nowrap}
.plan_card .plan_price b{font-size:20px}
.checkout_ul{list-style:none;padding:0;margin:0}
.checkout_ul li{padding:11px 0 11px 30px;position:relative;border-bottom:1px solid var(--hair);
  font-size:16px;line-height:23px}
.checkout_ul li:last-child{border-bottom:0}
.checkout_ul li::before{content:"";position:absolute;left:5px;top:17px;width:6px;height:11px;
  border:solid var(--ink);border-width:0 1.7px 1.7px 0;transform:rotate(43deg)}
.faq_item{border-bottom:1px solid var(--hair)}
.faq_item summary{padding:15px 0;cursor:pointer;font-size:17px;list-style:none;
  display:flex;align-items:center;gap:10px}
.faq_item summary::-webkit-details-marker{display:none}
.faq_item summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--muted)}
.faq_item[open] summary::after{content:"–"}
.faq_item p{margin:0 0 15px;font-family:var(--sans);font-size:15px;line-height:23px;color:var(--muted)}
.review_card{border:1px solid var(--hair);padding:15px;margin-bottom:8px}
.review_card .stars{color:var(--cta);letter-spacing:2px;font-size:14px}
.review_card .who{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:8px}
.timeline{display:flex;gap:6px;padding:0 24px;margin:14px 0 0}
.timeline span{flex:1;height:3px;background:var(--hair)}
.timeline span.on{background:var(--ink)}
.brandbar{padding:16px 24px 0;text-align:center}
.brandbar .wordmark{font-size:19px;letter-spacing:.26em;text-transform:uppercase}
.swatch_grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.swatch_grid i{aspect-ratio:1;display:block}
.swatch_row{display:flex;gap:6px;flex-wrap:wrap}
.swatch_row i{width:40px;height:40px;display:block}
.board{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.board figure{margin:0}
.board img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#f4f2ef}
.board figcaption{font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:5px}
.kv{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.kv .k{color:var(--muted);font-family:var(--sans);font-size:13px;flex:0 0 42%}
.kv .v{flex:1}
.note_box{border-left:3px solid var(--ink);padding:12px 16px;background:#fafafa;
  font-family:var(--sans);font-size:14px;line-height:21px}
table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--hair);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tabbar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--hair);display:flex;
  padding-bottom:env(safe-area-inset-bottom);z-index:6}
.tabbar a{flex:1;text-align:center;padding:9px 2px 11px;font-family:var(--sans);font-size:11px;
  color:var(--muted);text-decoration:none}
.tabbar a.on{color:var(--ink)}
.tabbar a i{display:block;font-style:normal;font-size:17px;line-height:1.4}
.week_strip{display:flex;gap:4px}
.week_strip div{flex:1;text-align:center;font-family:var(--sans);font-size:11px;color:var(--muted)}
.week_strip div b{display:block;margin:4px auto 0;width:30px;height:30px;line-height:30px;
  font-size:13px;font-weight:400;color:var(--ink)}
.week_strip div.on b{background:var(--ink);color:#fff}
.spinner{width:34px;height:34px;border:3px solid var(--hair);border-top-color:var(--ink);
  border-radius:50%;animation:sp .9s linear infinite;margin:0 auto}
@keyframes sp{to{transform:rotate(360deg)}}
.steps{list-style:none;padding:0;margin:0;font-family:var(--sans);font-size:15px}
.steps li{padding:7px 0;color:var(--muted)}
.steps li.on{color:var(--ink)}
.steps li.done{color:var(--ink);opacity:.7}
.small{font-family:var(--sans);font-size:13px;line-height:20px;color:var(--muted)}
.center{text-align:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}