/* Every option on this page is rendered in the site's own tokens — the same
   seven colours, the same Assistant, the same 10px radius. Nothing here is a
   wireframe; what you see is what the element will be. */
:root{
  --paper:#f2f1ec; --panel:#eae9e5; --ink:#2e2a24; --ink-2:#3d3831;
  --muted:#6e675d; --olive-ink:#55503e; --line:#dfdad1;
  --r:10px; --font:Assistant,"Segoe UI",system-ui,sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;
  --curve:cubic-bezier(.23,1,.32,1);
}
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; overflow-x:hidden }
body{ background:var(--paper); color:var(--ink); font-family:var(--font);
      font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased }
h1,h2,h3,h4{ margin:0; font-weight:300; line-height:1.22 }
p{ margin:0 }
a{ color:inherit; text-decoration:none }
strong{ font-weight:700 }
.hl strong{ font-weight:700 }

.ch-wrap{ max-width:1280px; margin-inline:auto; padding-inline:32px }
@media (max-width:640px){ .ch-wrap{ padding-inline:20px } }

.ch-top{ padding-block:56px 40px; border-block-end:1px solid var(--line);
         margin-block-end:56px }
.ch-top h1{ font-size:44px; letter-spacing:-.025em }
.ch-top p{ color:var(--muted); max-width:60ch; margin-block-start:12px }
.ch-count{ margin-block-start:20px; font-size:13px; letter-spacing:.16em;
           color:var(--muted) }
.ch-count b{ color:var(--ink); font-weight:700 }

.ch-block{ margin-block-end:72px }
.ch-head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
          padding-block-end:16px; border-block-end:1px solid var(--line);
          margin-block-end:28px }
.ch-num{ font-size:13px; letter-spacing:.16em; color:var(--muted) }
.ch-head h2{ font-size:28px }
.ch-head p{ color:var(--muted); font-size:15px; flex:1 1 100% }

.ch-grid{ display:grid; gap:20px }
.ch-grid--3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:980px){ .ch-grid--3{ grid-template-columns:1fr } }

/* one option */
.ch-opt{ display:block; cursor:pointer }
.ch-opt input{ position:absolute; opacity:0; pointer-events:none }
.ch-render{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 24px; min-height:150px;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  transition:border-color .25s var(--curve), box-shadow .25s var(--curve);
}
.ch-render--tall{ min-height:260px; justify-content:flex-start }
.ch-opt:hover .ch-render{ border-color:var(--muted) }
.ch-opt.is-on .ch-render{ border-color:var(--ink); box-shadow:0 0 0 2px var(--ink) }
.ch-label{ padding:12px 4px 0; display:flex; flex-direction:column; gap:2px }
.ch-label b{ font-weight:700; font-size:15px }
.ch-label span{ color:var(--muted); font-size:14px; line-height:1.5 }
.ch-opt.is-on .ch-label b::after{ content:" ✓"; color:var(--olive-ink) }

/* ---- the real elements ---------------------------------------------- */
.eyebrow{ font-size:13px; letter-spacing:.16em; color:var(--muted) }
.eyebrow.light{ color:rgba(242,241,236,.7) }
.row{ display:flex; align-items:stretch; gap:16px; flex-wrap:wrap }

.b{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font:700 13px/1.4 var(--font); letter-spacing:.02em; border-radius:var(--r);
    cursor:pointer; transition:background-color .3s var(--curve), color .3s var(--curve) }
.arw{ width:17px; height:10px; flex:none; fill:none; stroke:currentColor;
      stroke-width:1.6; stroke-linecap:round;
      transition:transform .3s var(--curve) }
.b:hover .arw{ transform:translateX(-4px) }
.b-fill{ background:var(--ink); color:var(--paper); border:2px solid var(--ink);
         padding:10px 28px }
.b-line{ background:transparent; color:var(--ink); border:2px solid var(--ink);
         padding:10px 18px }
.b-under{ background:none; border:0; border-block-end:2px solid var(--ink);
          border-radius:0; padding:10px 2px; color:var(--ink) }
.b-pill{ background:var(--ink); color:var(--paper); border:2px solid var(--ink);
         padding:10px 28px; border-radius:999px }
.b-pill-line{ background:transparent; color:var(--ink); border:2px solid var(--ink);
              padding:10px 18px; border-radius:999px }
.b-invert{ background:var(--paper); color:var(--ink); border:2px solid var(--paper);
           padding:10px 28px; align-self:flex-start }

h3.hl,h4.hl{ font-size:24px }
.hr-row{ display:flex; align-items:baseline; justify-content:space-between;
         gap:20px; padding-block-end:14px; border-block-end:1px solid var(--line) }
.meta{ font-size:13px; letter-spacing:.16em; color:var(--muted); white-space:nowrap }
.hr-num{ display:flex; align-items:baseline; gap:18px }
.ch-bignum{ font-size:44px; font-weight:200; color:var(--line); line-height:1 }

/* treatment list */
.lA{ display:grid; grid-template-columns:34px 1fr 1.4fr; gap:14px;
     align-items:baseline; padding-block:14px; border-block-end:1px solid var(--line) }
.lA:last-child{ border-block-end:0 }
.lA .n{ font-size:12px; letter-spacing:.16em; color:var(--muted) }
.lA h4{ font-size:17px }
.lA p{ font-size:14px; color:var(--ink-2) }
.lB{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.lB .c h4{ font-size:16px; margin-block:10px 4px }
.lB .c p{ font-size:13px; color:var(--muted) }
.lC-hero h4{ font-size:18px; margin-block:10px 4px }
.lC-hero p{ font-size:14px; color:var(--ink-2) }
.lC-idx{ display:flex; flex-wrap:wrap; gap:8px; margin-block-start:14px }
.lC-idx span{ font-size:13px; color:var(--muted); border:1px solid var(--line);
              border-radius:var(--r); padding:5px 11px }
.ph{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
     aspect-ratio:4/5 }
.ph-w{ aspect-ratio:16/9 }
.ph-sq{ aspect-ratio:1/1; width:96px; flex:none }

/* faq */
.fA{ border-block-end:1px solid var(--line); padding-block:10px }
.fA:last-child{ border-block-end:0 }
.fA button{ width:100%; background:none; border:0; padding:6px 0; cursor:pointer;
            font:300 17px/1.3 var(--font); color:var(--ink); text-align:start;
            display:flex; justify-content:space-between; align-items:center; gap:12px }
.fA p{ font-size:14px; color:var(--ink-2); padding-block-end:8px }
.chev{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6 }
.fA.open .chev{ transform:rotate(180deg) }
.fB{ padding-block:12px; border-block-end:1px solid var(--line) }
.fB:last-child{ border-block-end:0 }
.fB h4{ font-size:16px; font-weight:700; margin-block-end:4px }
.fB p{ font-size:14px; color:var(--ink-2) }
.fC{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px }
.fC h4{ font-size:15px; font-weight:700; margin-block-end:2px }
.fC p{ font-size:13px; color:var(--muted) }

/* cta */
.ctaA{ background:var(--ink); border-radius:var(--r); padding:26px;
       display:flex; flex-direction:column; gap:12px }
.ctaA h4{ color:var(--paper) }
.ctaA .hl strong{ color:var(--paper) }
.ctaB{ display:flex; align-items:center; justify-content:space-between; gap:20px;
       flex-wrap:wrap; padding-block:22px;
       border-block:1px solid var(--line) }
.ctaC{ display:flex; gap:18px; align-items:center }
.ctaC > div{ display:flex; flex-direction:column; gap:10px; align-items:flex-start }

/* phone previews */
.ch-phone{ align-items:center }
.ph-panel{ width:190px; aspect-ratio:373.71/587.95; position:relative;
           border-radius:var(--r); overflow:hidden;
           background:linear-gradient(to bottom,#f2f1ec,#d7d0cb);
           display:flex; flex-direction:column }
.ph-copy{ padding:16px 14px 0; text-align:center; display:flex;
          flex-direction:column; gap:6px; align-items:center }
.ph-copy span{ font-size:6px; letter-spacing:.14em; color:var(--muted) }
.ph-copy b{ font-size:13px; font-weight:300; line-height:1.15 }
.ph-copy i{ font-style:normal; font-size:7px; color:var(--ink-2); line-height:1.5 }
.ph-btns{ display:flex; gap:6px; margin-block-start:6px }
.ph-btns u{ text-decoration:none; font-size:6px; font-weight:700;
            background:var(--ink); color:var(--paper); padding:4px 8px;
            border-radius:4px; border:1px solid var(--ink) }
.ph-btns u.o{ background:transparent; color:var(--ink) }
.ph-fig{ position:absolute; inset-block-end:0; inset-inline:0; margin-inline:auto;
         aspect-ratio:398/657; background:var(--ink); opacity:.16;
         border-start-start-radius:40% 12%; border-start-end-radius:40% 12% }
.ph-fig.f47{ width:46.68% }
.ph-fig.f62{ width:62% }
.ph-fig.f80{ position:relative; width:80%; margin-block-start:0 }
.ph-fig.top{ inset-block-end:auto }
.ph-copy.bot{ margin-block-start:auto; padding-block-end:16px }

/* footer */
.ch-foot{ border-block-start:1px solid var(--line); padding-block:44px 72px;
          margin-block-start:24px }
.ch-foot h3{ font-size:22px; margin-block-end:14px }
#out{ font:400 15px/1.9 var(--font); background:var(--panel);
      border:1px solid var(--line); border-radius:var(--r);
      padding:18px 20px; white-space:pre-wrap; margin-block-end:16px }
.note{ color:var(--muted); font-size:14px; margin-block-start:12px }


/* ---- a note on every decision ---------------------------------------- */
.ch-note{ margin-block-start:22px; display:flex; flex-direction:column; gap:8px }
.ch-note label{ font-size:13px; letter-spacing:.16em; color:var(--muted) }
.ch-note textarea{
  font:400 15px/1.6 var(--font); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; width:100%; resize:vertical; min-height:64px;
  transition:border-color .25s var(--curve);
}
.ch-note textarea::placeholder{ color:var(--muted); opacity:.75 }
.ch-note textarea:focus-visible{ outline:2px solid var(--olive-ink); outline-offset:2px }
.ch-note textarea:not(:placeholder-shown){ border-color:var(--muted) }