/* ==========================================================================
   HAND IN HAND CONSULTING — Instagram funnel design system
   One stylesheet for every page in the funnel. No CDN, no framework,
   self-hosted variable fonts, one paint of colour per band.

   MOBILE FIRST, ON PURPOSE.
   Every base rule below is the PHONE rule. Desktop is added in two
   min-width bands at the bottom. This is the structural answer to the
   desktop-first scaling failure recorded in brain/how-to/mobile-layout-rules.md:
   there is no desktop value to forget to override, because the small screen
   is what the cascade starts from.

   Four rules that must survive any edit:
     1. No max-width in `ch` on a heading. Measures are set in rem, and only
        inside a min-width band where the screen is wider than the measure.
     2. Inputs never drop below 1rem. iOS Safari zooms the page below 16px.
     3. Tap targets stay at 48px or more.
     4. Motion is JS-gated and reduced-motion-gated. Nothing animates in
        that a visitor without JavaScript would never see.
   ========================================================================== */

/* ---------- Fonts. Self-hosted, variable, subset-free. ---------- */
@font-face{
  font-family:'HIHC Serif';
  src:url('../brand/fonts/literata-variable.woff2') format('woff2-variations');
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'HIHC Sans';
  src:url('../brand/fonts/hanken-grotesk-variable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Ink and ground */
  --ink:#171713;
  --ink-soft:#4a473f;
  --ink-faint:#6f6d64;
  --muted:#6f6d64;

  /* Forest, the brand's structural dark */
  --forest:#173b31;
  --forest-deep:#0e2a22;
  --forest-lift:#1e4a3d;

  /* Warm grounds */
  --cream:#f3ecdc;
  --cream-deep:#ece2ce;
  --paper:#fffaf0;

  /* Accents. Clay carries every call to action. Gold is reserved for
     achievement — the score dial and the matched rung — and appears
     nowhere else, so it still means something when it does. */
  --clay:#9f573e;
  --clay-deep:#8b4a33;
  --clay-soft:#e8ae90;
  --sage:#b7c6ad;
  --sage-wash:rgba(183,198,173,.32);
  --gold:#d6a62e;
  --gold-soft:#e7c366;

  /* Hairlines */
  --line:rgba(23,23,19,.14);
  --line-strong:rgba(23,23,19,.24);
  --line-soft:rgba(23,23,19,.07);
  --line-light:rgba(255,250,240,.18);
  --line-light-strong:rgba(255,250,240,.32);

  --display:'HIHC Serif',Georgia,'Times New Roman',serif;
  --body:'HIHC Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* One spacing scale. Nothing in this system uses a number that is not
     on it, which is what stops a page becoming a stack of loose blocks. */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:2.75rem; --s8:3.5rem; --s9:5rem;

  --radius-s:.75rem;
  --radius-m:1.25rem;
  --radius-l:1.75rem;

  /* Elevation. Long, low, warm — never a grey box shadow. */
  --e1:0 1px 2px rgba(23,23,19,.05);
  --e2:0 14px 30px -20px rgba(23,59,49,.42);
  --e3:0 28px 60px -34px rgba(14,42,34,.5);
  --e4:0 48px 96px -50px rgba(14,42,34,.62);

  /* Motion. One easing curve for movement, one for entrances. */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.16s;
  --t-mid:.28s;
  --t-slow:.55s;

  /* Phone rhythm. Desktop multiplies these in the bands below. */
  --gutter:1.25rem;
  --section-y:3rem;
  --stack:1.5rem;
  --bar:3.25rem;          /* 52px sticky bar, per the mobile rules table */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* The sticky header is `--bar` tall PLUS its 3px progress track. Leaving the
   track out of the scroll padding parks every anchored heading three pixels
   under the bar. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 3px + 1rem)}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;          /* 17px */
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:700}
ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin:0 0 .5em}
a{color:var(--clay);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--clay-deep)}
.on-dark a{color:var(--clay-soft)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0}
table{border-collapse:collapse}

/* Focus. One crisp ring, warm, never the browser default blue. */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
  border-radius:6px;
}
.on-dark :focus-visible,.band-forest :focus-visible,.hero :focus-visible{outline-color:var(--clay-soft)}

/* Keyboard entry to the content, before the sticky header. */
.skip{
  position:absolute;left:var(--s4);top:var(--s2);z-index:90;
  transform:translateY(-200%);
  background:var(--forest);color:var(--paper);
  padding:.7rem 1rem;border-radius:var(--radius-s);
  font-size:.875rem;font-weight:700;text-decoration:none;
  transition:transform var(--t-fast) var(--ease);
}
.skip:focus-visible{transform:translateY(0);color:var(--paper)}

/* ---------- Type. Floors are phone floors. ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-.026em;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
  /* Never cap a heading narrower than the screen it is on. */
  max-width:none;
}
h1{font-size:clamp(2rem,7.6vw,4.5rem);line-height:1.06;letter-spacing:-.032em}
h2{font-size:clamp(1.65rem,5.8vw,3.05rem);line-height:1.09;letter-spacing:-.028em}
h3{font-size:clamp(1.22rem,4vw,1.65rem);line-height:1.18}
h4{font-size:1.0625rem;line-height:1.3}
em{font-style:italic;color:var(--clay)}
.on-dark em,.band-forest em,.hero em{color:var(--clay-soft)}

/* The eyebrow carries a short rule, so a section opens with a mark rather
   than another line of text. It is the one repeated ornament in the system. */
.eyebrow{
  display:flex;align-items:center;gap:.55rem;
  margin:0 0 var(--s3);
  color:var(--clay);
  font-size:.6875rem;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  line-height:1.4;
}
.eyebrow::before{
  content:"";flex:none;width:1.4rem;height:1px;
  background:currentColor;opacity:.55;
}
.on-dark .eyebrow,.eyebrow.light,.band-forest .eyebrow,.hero .eyebrow{color:var(--clay-soft)}
.eyebrow.center{justify-content:center}

.lede{font-size:1.125rem;line-height:1.55;color:#3c3a33}
.on-dark .lede,.band-forest .lede,.hero .lede{color:rgba(255,250,240,.86)}
.small{font-size:.8125rem;line-height:1.5;color:var(--muted)}
.on-dark .small,.band-forest .small,.hero .small{color:rgba(255,250,240,.6)}
.center{text-align:center}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Rhythm utilities. Every vertical gap in the markup comes from this set,
   so nothing is spaced by an invented number. */
.mt-1{margin-top:var(--s1)}
.mt-2{margin-top:var(--s2)}
.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}
.mt-6{margin-top:var(--s6)}
.mt-7{margin-top:var(--s7)}
.mb-4{margin-bottom:var(--s4)}
.mb-5{margin-bottom:var(--s5)}
.mb-6{margin-bottom:var(--s6)}

/* A section opening: eyebrow, heading, lede, on a fixed rhythm. */
.band-head>h2,.band-head>h1{margin:0}
.band-head>.lede,.band-head>p{margin-top:var(--s4)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:74rem;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{width:100%;max-width:44rem;margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--section-y)}
.band-paper{background:var(--paper)}
.band-cream{background:var(--cream)}
.band-sage{background:var(--sage)}
.band-forest{background:var(--forest);color:var(--paper);position:relative;isolation:isolate;overflow:hidden}
.band-forest h1,.band-forest h2,.band-forest h3,.band-forest h4{color:var(--paper)}

/* A hairline where two light bands meet, so the page reads as a sequence
   of surfaces rather than one long scroll of beige. */
.band-paper+.band-paper,.band-cream+.band-cream,
.band-paper+.band-cream,.band-cream+.band-paper{border-top:1px solid var(--line-soft)}

/* Forest bands carry a faint ledger ruling and a single warm bloom. It is
   the difference between a coloured rectangle and a surface. */
.band-forest::before,.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(rgba(255,250,240,.028) 1px,transparent 1px) 0 0/100% 2.25rem,
    radial-gradient(120% 90% at 82% -12%, rgba(214,166,46,.14), transparent 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(183,198,173,.09), transparent 60%);
}
/* A gradient hairline closes every forest band. */
.band-forest::after,.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(232,174,144,.5),transparent);
}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- Hero. One component, every page. ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--forest);color:var(--paper);
  padding-block:var(--s6) var(--s7);
}
.hero-deep{background:var(--forest-deep)}
.hero h1{color:var(--paper);margin-top:var(--s2)}
.hero .lede{margin-top:var(--s4)}
.hero .btn{margin-top:var(--s5)}
.hero-meta{margin:var(--s4) 0 0;font-size:.8125rem;line-height:1.5;color:rgba(255,250,240,.62)}
.hero-portrait img,.hero .portrait{border-radius:var(--radius-m);box-shadow:var(--e4)}

/* ---------- Images ----------
   `.crop` is the only way an image is cropped in this system: a figure with a
   declared aspect ratio, the image covering it, and an optional zoom for the
   shots where the subject is not in the middle of the frame. `object-position`
   alone cannot do that job — it only moves an image that already overflows on
   that axis, which is why the Paris portrait used to render as a photograph of
   the Eiffel Tower with Foluke cropped off the bottom.                        */
.crop{position:relative;overflow:hidden;border-radius:var(--radius-m);box-shadow:var(--e3);background:var(--forest-deep)}
.crop img{width:100%;height:100%;object-fit:cover;display:block}
.crop-portrait{aspect-ratio:4/5}
.crop-square{aspect-ratio:1/1}
.crop-wide{aspect-ratio:5/4}
.crop-zoom-low img{transform:scale(1.9);transform-origin:50% 100%}

/* The studio headshot is shot on white. On a warm band a white rectangle reads
   as a mistake, so it is multiplied into the band and becomes a cutout. Only
   ever on a light band — multiply against forest would erase her. */
.cutout{mix-blend-mode:multiply;background:transparent}

/* Same trick, inverted: a white-ground studio shot on a DARK band is dropped
   onto a cream card and multiplied, so it reads as a warm printed portrait
   rather than a white rectangle punched into the forest. */
.crop-card{background:var(--cream)}
.crop-card img{mix-blend-mode:multiply}
.crop-pos-right img{object-position:58% 10%}

/* ---------- Sticky bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(243,236,220,.92);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-in{
  height:var(--bar);min-width:0;
  max-width:74rem;margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
}
.brandmark{
  display:flex;align-items:center;gap:.5rem;min-width:0;min-height:2.75rem;
  font-family:var(--display);font-size:.95rem;line-height:1.1;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:opacity var(--t-fast) var(--ease);
}
.brandmark:hover{color:var(--ink);opacity:.72}
.brandmark img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none;background:var(--paper)}
.brandmark i{font-style:italic;color:var(--clay);font-size:.86em}
/* The page label is decorative on the offer pages, and at 375px it pushed the
   sticky bar 30px past the viewport, squeezing the brand lockup. Hidden on a
   narrow phone; the quiz progress counter is not decorative, so it is exempt
   by name and stays. */
.topbar-meta{
  font-size:.625rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--forest);white-space:nowrap;flex:none;display:none;
}
.topbar-meta[data-progress-label]{display:inline}
@media (min-width:26rem){.topbar-meta{display:inline}}
/* The quiz counter stays on every width. Tighten both labels on a narrow
   phone so the full Aunty lockup remains visible without overlapping it. */
@media (max-width:25.999rem){
  .topbar-in:has(.topbar-meta[data-progress-label]) .brandmark{font-size:.82rem;gap:.38rem}
  .topbar-in:has(.topbar-meta[data-progress-label]) .brandmark i{display:inline;font-size:.76em}
  .topbar-meta[data-progress-label]{font-size:.56rem;letter-spacing:.09em}
}
.progress-track{height:3px;background:rgba(23,23,19,.07)}
.progress-fill{
  height:100%;width:0;border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,var(--clay),var(--gold));
  transition:width var(--t-slow) var(--ease-out);
}

/* ---------- Buttons. 48px floor everywhere. ---------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3.25rem;padding:.8rem 1.5rem;
  background:var(--forest);color:var(--paper);
  border:1px solid var(--forest);border-radius:999px;
  font-family:var(--body);font-size:.875rem;font-weight:800;
  letter-spacing:.045em;text-transform:uppercase;text-align:center;
  text-decoration:none;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,250,240,.14) inset,var(--e2);
  transition:transform var(--t-mid) var(--ease),background var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),color var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease);
}
.btn:hover{background:var(--forest-deep);color:var(--paper);transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,250,240,.14) inset,var(--e3)}
.btn:active{transform:translateY(0) scale(.99);box-shadow:var(--e1)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:var(--e1)}
.btn-clay{background:var(--clay);border-color:var(--clay);box-shadow:0 1px 0 rgba(255,250,240,.18) inset,0 16px 34px -20px rgba(159,87,62,.85)}
.btn-clay:hover{background:var(--clay-deep);border-color:var(--clay-deep);box-shadow:0 1px 0 rgba(255,250,240,.18) inset,0 22px 44px -20px rgba(159,87,62,.9)}
.btn-ghost{background:transparent;color:var(--forest);border-color:var(--line-strong);box-shadow:none}
.btn-ghost:hover{background:rgba(23,59,49,.06);color:var(--forest);border-color:var(--forest);box-shadow:none}
.on-dark .btn-ghost,.band-forest .btn-ghost,.hero .btn-ghost{color:var(--paper);border-color:var(--line-light-strong)}
.on-dark .btn-ghost:hover,.band-forest .btn-ghost:hover,.hero .btn-ghost:hover{background:rgba(255,250,240,.1);color:var(--paper);border-color:var(--clay-soft)}
.btn-block{display:flex;width:100%}
/* The second call to action on a quiz result. Present, but plainly the
   quieter of the two, so the offer stays the loud one. */
.btn-quiet{background:transparent;color:var(--forest);border:1px solid rgba(31,79,64,.35);box-shadow:none}
.btn-quiet:hover{background:rgba(31,79,64,.06);border-color:rgba(31,79,64,.55)}
.btn-row{display:flex;flex-direction:column;gap:.65rem}
.btn-row .btn{margin-top:0}

/* The busy state lives on the button, not in a paragraph underneath it. */
.btn .spin{
  width:1rem;height:1rem;flex:none;border-radius:50%;
  border:2px solid rgba(255,250,240,.35);border-top-color:currentColor;
  animation:spin .7s linear infinite;display:none;
}
.btn[aria-busy="true"] .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.link-cta{display:inline-flex;align-items:center;gap:.35rem;min-height:2.75rem;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;transition:gap var(--t-fast) var(--ease)}
.link-cta:hover{gap:.6rem}
.cta-note{margin:var(--s3) 0 0;font-size:.8125rem;line-height:1.45;color:var(--muted)}
/* A link inside a note is still a control. Vertical padding on an INLINE
   element is painted and hit-tested but does not change the line box, so the
   tap target reaches 44px without inline-block breaking the sentence's
   ability to wrap. */
.cta-note a,.small a,.promise a{padding-block:.92rem;font-weight:700}
.on-dark .cta-note,.band-forest .cta-note,.hero .cta-note{color:rgba(255,250,240,.62)}

/* A repeated "come back to the offer" block */
.section-cta{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.on-dark .section-cta,.band-forest .section-cta,.hero .section-cta{border-top-color:var(--line-light)}

/* ---------- Cards ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:var(--s5);
  box-shadow:var(--e1);
}
.card-forest{background:var(--forest-lift);color:var(--paper);border-color:var(--line-light);box-shadow:var(--e3)}
.card-forest h2,.card-forest h3{color:var(--paper)}
.grid{display:grid;gap:var(--s4)}
.grid-2,.grid-3{display:grid;gap:var(--s4)}

/* Feature rows: label + text. Single column on a phone so text never
   wraps one word per line inside a narrow gutter column. */
.feature{display:grid;grid-template-columns:1fr;gap:.35rem;padding:var(--s4) 0;border-top:1px solid var(--line)}
.feature:first-child{border-top:0;padding-top:0}
.feature strong{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.012em}
.feature p{margin:0;color:var(--ink-soft);font-size:.96rem}
.on-dark .feature{border-top-color:var(--line-light)}
.on-dark .feature p{color:rgba(255,250,240,.76)}

/* ---------- Price. Confident, tabular, never apologetic. ---------- */
.price{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.4rem,10.5vw,3.5rem);line-height:.98;
  letter-spacing:-.038em;margin:0;
  font-variant-numeric:tabular-nums;
}
.price small{
  font-family:var(--body);font-size:.875rem;font-weight:700;
  letter-spacing:.03em;color:var(--muted);
  display:block;margin-top:.45rem;text-transform:none;
}
.on-dark .price small,.band-forest .price small,.hero .price small{color:rgba(255,250,240,.68)}
.price-alt{margin:var(--s2) 0 0;font-size:.95rem;color:var(--muted);font-variant-numeric:tabular-nums}
.on-dark .price-alt,.band-forest .price-alt,.hero .price-alt{color:rgba(255,250,240,.68)}

/* The dark price panel. Used wherever a page asks for money, so the ask
   looks the same on all four offer surfaces. */
.pricebox{
  background:var(--forest-deep);color:var(--paper);
  border:1px solid var(--forest-deep);border-radius:var(--radius-m);
  padding:var(--s5);box-shadow:var(--e3);
  position:relative;isolation:isolate;overflow:hidden;
}
.pricebox::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(110% 80% at 88% -10%,rgba(214,166,46,.16),transparent 60%);
}
.pricebox .price{color:var(--paper)}
.pricebox .cta-note{color:rgba(255,250,240,.62)}
.pricebox .btn{margin-top:var(--s5);width:100%}
.pricebox .btn-row{margin-top:var(--s5)}
.pricebox .btn-row .btn{margin-top:0}

.promise{
  margin:var(--s4) 0 0;padding:var(--s4);
  background:var(--sage-wash);border-left:3px solid var(--forest);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-size:.95rem;line-height:1.5;color:#2c3a30;
}
.on-dark .promise,.pricebox .promise{background:rgba(183,198,173,.14);border-left-color:var(--sage);color:rgba(255,250,240,.88)}

/* Ladder rungs */
.rung{
  position:relative;
  border:1px solid var(--line);border-radius:var(--radius-m);
  padding:var(--s5);background:var(--paper);
  box-shadow:var(--e1);
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease);
}
.rung:hover{transform:translateY(-3px);box-shadow:var(--e3);border-color:var(--line-strong)}
.rung.is-yours{border-color:var(--gold);border-width:2px;padding:calc(var(--s5) - 1px);box-shadow:var(--e3)}
/* [hidden] loses to an explicit display, so restore it by name. Without this
   every rung shows the "Your match" tag at once. */
[hidden]{display:none!important}
.rung-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  margin:0 0 var(--s3);padding:.3rem .75rem;border-radius:999px;
  background:var(--gold);color:var(--forest-deep);
  font-size:.625rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  box-shadow:0 8px 20px -12px rgba(214,166,46,.9);
}
.rung h3{margin:0 0 .2rem}
.rung ul{list-style:none;padding:0;margin:var(--s4) 0 0}
.rung li{position:relative;padding-left:1.4rem;font-size:.95rem;color:var(--ink-soft)}
.rung li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--sage)}
.rung .btn{margin-top:var(--s5)}

/* Bulleted lists that carry a sage dot instead of a marker. */
.dotlist{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:.55rem}
.dotlist li{margin:0;position:relative;padding-left:1.4rem;font-size:.96rem}
.dotlist li::before{content:"";position:absolute;left:0;top:.58em;width:.45rem;height:.45rem;border-radius:50%;background:var(--sage)}
.on-dark .dotlist li::before{background:var(--clay-soft)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:var(--s4) 3rem var(--s4) 0;position:relative;
  font-family:var(--display);font-size:1.05rem;font-weight:600;line-height:1.3;
  min-height:3.25rem;display:flex;align-items:center;
  transition:color var(--t-fast) var(--ease);
}
.faq summary:hover{color:var(--clay)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:0;top:50%;
  width:1.75rem;height:1.75rem;margin-top:-.875rem;
  border:1px solid var(--line-strong);border-radius:50%;
  background:
    linear-gradient(currentColor,currentColor) center/.65rem 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px .65rem no-repeat;
  color:var(--clay);
  transition:transform var(--t-mid) var(--ease),background-color var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease),color var(--t-mid) var(--ease);
}
.faq details[open] summary::after{
  transform:rotate(135deg);
  border-color:var(--forest);
}
.faq .answer{padding:0 0 var(--s5);color:var(--ink-soft);font-size:.98rem;max-width:42rem}
.faq details[open] .answer{animation:fade-rise var(--t-mid) var(--ease-out) both}
.on-dark .faq,.on-dark .faq details{border-color:var(--line-light)}
.on-dark .faq summary::after{border-color:var(--line-light-strong);color:var(--clay-soft)}
.on-dark .faq .answer{color:rgba(255,250,240,.78)}

/* ---------- Forms ---------- */
.field{margin:0 0 var(--s4)}
.field label{
  display:block;margin:0 0 .35rem;
  font-size:.6875rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);
  transition:color var(--t-fast) var(--ease);
}
.field:focus-within label{color:var(--forest)}
.field input{
  width:100%;
  font-family:var(--body);
  font-size:1rem;                 /* NEVER lower. iOS zooms below 16px. */
  line-height:1.4;
  min-height:3rem;
  padding:.75rem .9rem;           /* cut padding, not font-size */
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-s);
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.field input::placeholder{color:rgba(23,23,19,.32)}
.field input:hover{border-color:var(--forest-lift)}
.field input:focus,.field input:focus-visible{
  outline:none;
  border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(23,59,49,.16);
}
.field input[aria-invalid="true"]{border-color:var(--clay);background:rgba(159,87,62,.045)}
.field input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(159,87,62,.18)}
.field .why{display:block;margin-top:.4rem;font-size:.75rem;line-height:1.45;color:var(--muted)}
.consent{margin:var(--s3) 0 0;font-size:.72rem;line-height:1.5;color:var(--muted)}

/* Error and success states, both visible without colour alone. */
.form-msg{
  display:none;align-items:flex-start;gap:.5rem;
  margin:var(--s3) 0 0;padding:.75rem .9rem;
  background:rgba(159,87,62,.08);border-left:3px solid var(--clay);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-size:.875rem;line-height:1.45;font-weight:600;color:var(--clay-deep);
}
.form-msg.on{display:flex;animation:fade-rise var(--t-mid) var(--ease-out) both}
.form-msg::before{content:"!";flex:none;width:1.1rem;height:1.1rem;margin-top:.1rem;border-radius:50%;background:var(--clay);color:var(--paper);font-size:.7rem;font-weight:800;display:grid;place-items:center}

/* ---------- Quiz. Built to feel like an app, not a form. ---------- */
/* .screen is a <section>, so it would inherit section padding and stack a
   dead band above every hero. It is a container, not a band. */
.screen{display:none;padding-block:0}
.screen.on{display:block}
.js .screen.on{animation:fade-rise .34s var(--ease-out) both}
@keyframes fade-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

.quiz{
  background:var(--paper);
  min-height:calc(100svh - var(--bar) - 3px);
  display:flex;align-items:flex-start;
  padding-block:var(--s5) var(--s8);
  position:relative;isolation:isolate;overflow:hidden;
}
.quiz::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(100% 60% at 50% 0%,rgba(183,198,173,.22),transparent 62%);
}
.quiz-in{width:100%}

/* A dot rail. Twelve marks, so the length of the thing is visible at a
   glance and answering one of them visibly moves you along it. */
.qrail{display:flex;align-items:center;gap:.4rem;margin:0 0 var(--s5);padding:0;list-style:none}
.qrail li{
  flex:1;height:4px;margin:0;border-radius:999px;
  background:rgba(23,23,19,.1);
  transition:background var(--t-mid) var(--ease),transform var(--t-mid) var(--ease);
}
.qrail li.done{background:var(--sage)}
.qrail li.now{background:var(--clay);transform:scaleY(1.75)}

.qcount{margin:0 0 var(--s3);font-size:.6875rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-variant-numeric:tabular-nums}
.qtext{margin:0 0 var(--s5);font-size:clamp(1.5rem,5.8vw,2.4rem);line-height:1.13;letter-spacing:-.028em;text-wrap:balance}
.qopts{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.qopts li{margin:0}
.qopt{
  position:relative;
  display:flex;align-items:center;gap:.85rem;width:100%;
  min-height:3.5rem;padding:.9rem 2.6rem .9rem 1rem;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--radius-s);
  font-family:var(--body);font-size:1rem;line-height:1.35;font-weight:500;
  text-align:left;cursor:pointer;
  box-shadow:var(--e1);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.qopt:hover{border-color:var(--forest);transform:translateY(-2px);box-shadow:var(--e2)}
.qopt:active{transform:translateY(0) scale(.995)}
.qopt .k{
  flex:none;width:1.75rem;height:1.75rem;border-radius:.5rem;
  display:grid;place-items:center;
  background:rgba(23,59,49,.07);color:var(--forest);
  font-size:.7rem;font-weight:800;letter-spacing:.04em;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.qopt:hover .k{background:rgba(23,59,49,.13)}
/* The tick only exists once an option is chosen. */
.qopt::after{
  content:"";position:absolute;right:1rem;top:50%;
  width:1.1rem;height:1.1rem;margin-top:-.55rem;border-radius:50%;
  background:var(--forest);
  opacity:0;transform:scale(.5);
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.qopt[aria-pressed="true"]{border-color:var(--forest);background:var(--sage-wash);box-shadow:var(--e2)}
.qopt[aria-pressed="true"] .k{background:var(--forest);color:var(--paper)}
.qopt[aria-pressed="true"]::after{opacity:1;transform:scale(1)}
.qopt.is-picked{border-color:var(--forest);background:var(--sage-wash)}

.qnav{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:var(--s5);min-height:3rem}
.qback{
  display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:0;padding:.75rem .25rem;min-height:3rem;
  color:var(--muted);font-family:var(--body);font-size:.8125rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
  transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.qback:hover{color:var(--forest);transform:translateX(-2px)}
.qhint{font-size:.75rem;color:var(--muted);letter-spacing:.02em;display:none}
.qsaved{
  font-size:.6875rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--forest);opacity:0;transition:opacity var(--t-mid) var(--ease);
}
.qsaved.on{opacity:1}

/* Directional transition between questions. */
.js .qstage{animation:q-in .3s var(--ease-out) both}
.js .qstage.back{animation-name:q-in-back}
@keyframes q-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes q-in-back{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* ---------- Result ---------- */
.score-dial{display:flex;align-items:center;gap:var(--s4)}
.score-num{
  font-family:var(--display);font-size:3.75rem;line-height:.88;font-weight:600;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--paper),var(--gold-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.score-meta strong{display:block;font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.2}
.score-bar{margin-top:var(--s4);height:6px;border-radius:999px;background:rgba(255,250,240,.16);overflow:hidden}
.score-bar i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--clay-soft),var(--gold));
  transition:width 1.1s var(--ease-out);
}
.plan-day{display:grid;grid-template-columns:1fr;gap:.25rem;padding:var(--s4) 0;border-top:1px solid var(--line)}
.plan-day:first-child{border-top:0;padding-top:0}
.plan-day b{font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.plan-day p{margin:0;font-size:.98rem;color:#3c3a33}

/* ---------- Proof ---------- */
.quote{margin:0;padding:0;font-family:var(--display);font-size:1.18rem;line-height:1.42;font-style:italic}
.quote-who{display:block;margin-top:var(--s3);font-family:var(--body);font-size:.72rem;font-style:normal;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.on-dark .quote-who{color:rgba(255,250,240,.6)}
.proof-face{width:3.5rem;height:3.5rem;border-radius:50%;object-fit:cover;margin-bottom:var(--s3);box-shadow:0 0 0 1px var(--line-light),var(--e2)}

/* ---------- Sticky call to action ---------- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:rgba(14,42,34,.94);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-top:1px solid var(--line-light);
  box-shadow:0 -18px 40px -30px rgba(0,0,0,.9);
  transform:translateY(110%);
  /* Parked off-screen is not the same as unreachable. `pointer-events` stops
     the mouse; the tab order is handled by `inert`, set alongside `.on` in
     hihc-funnel.js — a `visibility` transition was tried here first and does
     not reliably land, which would leave a focusable button below the fold. */
  pointer-events:none;
  transition:transform var(--t-slow) var(--ease);
}
.stickybar.on{transform:translateY(0);pointer-events:auto}
/* Only JavaScript can ever raise this bar, so without JavaScript it is not a
   hidden control — it is a tab stop that leads nowhere. */
html:not(.js) .stickybar{display:none}
/* A hairline of warmth along the top edge, the same gradient that closes a
   forest band, so the bar reads as part of the page and not a browser chrome. */
.stickybar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,174,144,.55),transparent);
}
.stickybar-in{
  max-width:74rem;margin-inline:auto;padding:.6rem var(--gutter);
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
}
.stickybar-txt{min-width:0;color:var(--paper);font-size:.8125rem;line-height:1.3;font-weight:600}
.stickybar-txt b{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--paper);font-variant-numeric:tabular-nums}
.stickybar-txt span{color:rgba(255,250,240,.6);font-weight:500}
.stickybar .btn{flex:none;min-height:2.85rem;padding:.6rem 1.15rem;font-size:.75rem;margin-top:0}
/* The reserve belongs INSIDE the footer, not under it.
   `body:has(.stickybar.on){padding-bottom}` added 72px below the footer — which
   covers nothing, because padding on the body sits after its last child — and
   grew the document by 72px every time the bar appeared, so the scrollbar
   jumped on every toggle. A constant reserve in the footer costs nothing
   visually, since the footer is a solid dark band. */
body:has(.stickybar) .site-foot{padding-bottom:calc(var(--s7) + 4.5rem)}
/* The quiz parks its bar inside a screen that goes display:none once the
   questions start. `:has()` matches the DOM, not the render tree, so without
   this the result screen reserves room for a bar that can never appear. */
body:has(.screen:not(.on) .stickybar) .site-foot{padding-bottom:var(--s7)}

/* ---------- Scroll reveal. JS-gated, so no-JS sees everything. ---------- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
.js .rv-2{transition-delay:.08s}
.js .rv-3{transition-delay:.16s}
.js .rv-4{transition-delay:.24s}

/* ---------- Footer ---------- */
.site-foot{background:var(--forest-deep);color:rgba(255,250,240,.72);padding-block:var(--s7)}
.site-foot a{color:rgba(255,250,240,.9)}
.site-foot a:hover{color:var(--clay-soft)}
.site-foot .brandmark{color:var(--paper)}
.site-foot .brandmark:hover{color:var(--paper)}
.site-foot .brandmark i{color:var(--clay-soft)}
.site-foot .small{color:rgba(255,250,240,.6);max-width:34rem;margin-top:var(--s3)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 1.25rem;margin:var(--s4) 0 0;padding:0;list-style:none;font-size:.8125rem}
.foot-links li{margin:0}
.foot-links a{display:inline-flex;align-items:center;min-height:2.75rem}
.foot-legal{margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px solid var(--line-light);font-size:.75rem;line-height:1.55;color:rgba(255,250,240,.5)}

/* ---------- Reduced motion. Last word on every animation above. ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js .rv{opacity:1;transform:none}
  .btn:hover,.qopt:hover,.rung:hover{transform:none}
}

/* Print: the seven-day plan has to survive Save as PDF. */
@media print{
  .topbar,.site-foot,.btn,.stickybar,.no-print,.skip{display:none!important}
  body{background:#fff;color:#000;font-size:11pt;padding-bottom:0!important}
  .band-forest,.card-forest,.hero,.pricebox{background:#fff!important;color:#000!important;border:1px solid #000}
  .band-forest::before,.band-forest::after,.hero::before,.hero::after,.pricebox::before,.quiz::before{display:none!important}
  .band-forest h1,.band-forest h2,.band-forest h3,.card-forest h2,.card-forest h3,.hero h1{color:#000!important}
  .js .rv{opacity:1!important;transform:none!important}
  section{padding-block:.75rem}
}

/* ==========================================================================
   TABLET AND UP — 48rem / 768px
   Everything above this line is the phone. Nothing below it may reduce a
   font-size or reintroduce a measure narrower than the viewport it applies to.
   ========================================================================== */
@media (min-width:48rem){
  :root{
    --gutter:2rem;
    --section-y:4.5rem;
    --stack:2rem;
    --bar:4.25rem;
  }
  body{font-size:1.125rem}
  .lede{font-size:1.28rem;line-height:1.5}
  .brandmark{font-size:1.1rem}
  .brandmark img{width:2rem;height:2rem}
  .topbar-meta{font-size:.7rem;letter-spacing:.15em}
  .eyebrow{font-size:.72rem;margin-bottom:var(--s4)}
  .eyebrow::before{width:2rem}
  .hero{padding-block:var(--s8) var(--s9)}
  .card{padding:var(--s6)}
  .pricebox{padding:var(--s6)}
  .grid-2{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .btn-row{flex-direction:row}
  .btn-row .btn{flex:1}
  .feature{grid-template-columns:auto;gap:.3rem;padding:1.15rem 0}
  .quiz{padding-block:var(--s7) var(--s9)}
  .qrail{gap:.5rem;margin-bottom:var(--s6)}
  .qopt{min-height:3.85rem;font-size:1.05rem;padding-block:1rem}
  .qtext{margin-bottom:var(--s6)}
  .qhint{display:block}
  .rung{padding:var(--s6)}
  .rung.is-yours{padding:calc(var(--s6) - 1px)}
  .plan-day{grid-template-columns:7.5rem 1fr;gap:var(--s4);align-items:baseline}
  .score-num{font-size:4.75rem}
  .quote{font-size:1.38rem}
  .proof-face{width:4.25rem;height:4.25rem}
  .section-cta{margin-top:var(--s7);padding-top:var(--s6)}
  .faq summary{font-size:1.18rem;padding-block:1.2rem}
  .stickybar-in{padding-block:.75rem}
  .stickybar-txt{font-size:.9rem}
  .stickybar .btn{min-height:3rem;padding:.7rem 1.5rem;font-size:.8125rem}
  body:has(.stickybar) .site-foot{padding-bottom:calc(var(--s7) + 5rem)}
  .dotlist{gap:.65rem}
}

/* ==========================================================================
   DESKTOP — 72rem / 1152px
   ========================================================================== */
@media (min-width:72rem){
  :root{--section-y:5.75rem}
  .grid-3{grid-template-columns:repeat(3,1fr);gap:var(--s6)}
  /* Reading measures only become legal here: 34rem is comfortably narrower
     than the 72rem viewport that switched them on. */
  .measure{max-width:34rem}
  .measure-wide{max-width:44rem}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
  .split-lead{grid-template-columns:1.15fr .85fr}
  .split-trail{grid-template-columns:.85fr 1.15fr}
  .qtext{font-size:2.5rem}
}