/* ═══════════════════════════════════════════════════════════════════════════
   KASCADE HEALTH™ · THE BRAND LAYER, IN PRODUCTION
   ───────────────────────────────────────────────────────────────────────────
   Ported 2026-09-22 from _refine/_site (system.css + page.css), which is the
   current website uplift and therefore the source of truth for the visual and
   verbal system. This file carries that system to the surfaces the website
   round did not cover: the intake flow, the free guide page, the social
   landing page.

   WHAT THIS FILE IS
     Tokens, the two faces and how they are asked to render, the grounds, the
     status vocabulary, the chapter mark, controls, fields, and the footer.
     NO page composition. Each surface owns its own layout in its own file.

   WHY IT REPLACES THE PREVIOUS ERA
     The live surfaces were set in Cormorant Garamond italic over Poppins on a
     cream ground, with rounded cards, drop shadows, pill buttons and a film
     grain. The uplift moved to Newsreader with the optical-size axis pinned at
     18 (the TEXT cut rendered at display size: thicker stems, lower contrast)
     over Geist, on espresso / parchment / ivory rooms, square, with the rule
     count cut from forty-three to five. Those are not two palettes of one
     system, they are two systems, and a customer moving from the homepage to
     the intake could see both.

   THE FACES ARE ALREADY SELF-HOSTED. assets/fonts.css registers Newsreader
   (200-800, roman + italic) and Geist (100-900) as variable fonts. No webfont
   request leaves the device, which is the standing rule for a PCOS site.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══ 1 · TOKENS ═══════════════════════════════════════════════════════════
   One hue can need two tokens: the sage measures 4.29:1 on ivory, which
   carries a fill or a display size and not a 12px label, so a darker
   derivative of the same hue exists for small text. */
:root{
  --kh-esp:#16110A;    --kh-esp-2:#1F1810;
  --kh-ivory:#FCFAF4;  --kh-parch:#F6F1E4;
  --kh-rust:#AE4F2A;   --kh-rust-lift:#DD8A62;  --kh-rust-deep:#933E1E;
  --kh-ink:#1F1810;    --kh-ink-2:#4C4030;      --kh-ink-3:#7A6B55;
  --kh-on-dark:#F7F2E6;--kh-on-dark-2:#CFC4AE;  --kh-on-dark-3:#948873;

  --kh-target:#3F7C68; --kh-target-t:#36705C;
  --kh-track:#8A6A1C;
  --kh-out:var(--kh-rust);

  --kh-rule:rgba(31,24,16,.13);
  --kh-rule-d:rgba(243,237,227,.15);

  --kh-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --kh-sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* the eight steps, same jobs, same names as the website round */
  --kh-s1:8px;  --kh-s2:12px;  --kh-s3:16px;  --kh-s4:24px;
  --kh-s5:40px; --kh-s6:64px;  --kh-s7:104px; --kh-s8:168px;

  --kh-gutter:88px;
  --kh-frame:calc(1240px + 2 * var(--kh-gutter));
  --kh-ease:cubic-bezier(.16,1,.3,1);
}

@media (max-width:1100px){ :root{ --kh-gutter:48px; --kh-s7:80px; --kh-s8:112px } }
@media (max-width:640px){  :root{ --kh-gutter:22px; --kh-s7:56px; --kh-s8:80px;
                                  --kh-s6:44px; --kh-s5:30px } }


/* ══ 2 · THE GROUNDS ══════════════════════════════════════════════════════
   A room sets its own foreground tokens so everything inside it inherits the
   right contrast without being told twice. The base chain in the design lab
   once keyed grounds on a direction NAME, and a rename silently drew nothing;
   these are bare attributes for that reason. */
.kh-room{ background:var(--kh-bg,var(--kh-ivory)); color:var(--kh-fg-1,var(--kh-ink)) }

.kh-room[data-ground="dark"]{
  --kh-bg:var(--kh-esp);   --kh-fg-1:var(--kh-on-dark);
  --kh-fg-2:var(--kh-on-dark-2); --kh-fg-3:var(--kh-on-dark-3);
  --kh-accent:var(--kh-rust-lift); --kh-line:var(--kh-rule-d);
  --kh-target:#7FA48C; --kh-track:#C9A24A; --kh-out:var(--kh-rust-lift);
}
.kh-room[data-ground="dark2"]{
  --kh-bg:var(--kh-esp-2); --kh-fg-1:var(--kh-on-dark);
  --kh-fg-2:var(--kh-on-dark-2); --kh-fg-3:var(--kh-on-dark-3);
  --kh-accent:var(--kh-rust-lift); --kh-line:var(--kh-rule-d);
  --kh-target:#7FA48C; --kh-track:#C9A24A; --kh-out:var(--kh-rust-lift);
}
.kh-room[data-ground="parch"]{
  --kh-bg:var(--kh-parch); --kh-fg-1:var(--kh-ink);
  --kh-fg-2:var(--kh-ink-2); --kh-fg-3:var(--kh-ink-3);
  --kh-accent:var(--kh-rust); --kh-line:var(--kh-rule);
}
.kh-room[data-ground="ivory"]{
  --kh-bg:var(--kh-ivory); --kh-fg-1:var(--kh-ink);
  --kh-fg-2:var(--kh-ink-2); --kh-fg-3:var(--kh-ink-3);
  --kh-accent:var(--kh-rust); --kh-line:var(--kh-rule);
}

.kh-wide{ max-width:var(--kh-frame); margin-inline:auto;
          padding-inline:var(--kh-gutter) }


/* ══ 3 · TYPE ═════════════════════════════════════════════════════════════
   Newsreader's opsz axis pinned at 18 renders the TEXT cut at display size.
   Those letterforms then want the tight tracking below. The three go
   together; changing one without the others is what makes it look wrong. */
.kh-h1{
  font-family:var(--kh-serif); font-size:clamp(38px,5.1vw,72px);
  font-weight:430; line-height:1.0; letter-spacing:-.038em;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 430;
  color:var(--kh-fg-1,var(--kh-ink)); margin:0; text-wrap:balance;
}
.kh-h2{
  font-family:var(--kh-serif); font-size:clamp(28px,3.4vw,46px);
  font-weight:430; line-height:1.08; letter-spacing:-.028em;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 430;
  color:var(--kh-fg-1,var(--kh-ink)); margin:0; text-wrap:balance;
}
.kh-h3{
  font-family:var(--kh-serif); font-size:clamp(20px,1.9vw,26px);
  font-weight:440; line-height:1.24; letter-spacing:-.016em;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 440;
  color:var(--kh-fg-1,var(--kh-ink)); margin:0;
}

/* THE ACCENT INSIDE A DISPLAY LINE IS COLOUR ONLY, never italic and never
   another weight. It is the only coloured phrase on the screen, so half of it
   stranded on its own row is the most visible typographic fault the page can
   have: it does not break. */
.kh-h1 .kh-ac,.kh-h2 .kh-ac{ color:var(--kh-accent,var(--kh-rust));
  font-weight:inherit; font-style:normal }
.kh-h1 .kh-ac{ white-space:nowrap }
@media (max-width:640px){ .kh-h1 .kh-ac{ white-space:normal } }

/* THE DECK IS SERIF. It is the single thing that made the site and the report
   read as one era rather than two, so it is not a sans "for legibility". */
.kh-lede{
  font-family:var(--kh-serif); font-size:clamp(16.5px,1.35vw,18.5px);
  font-weight:390; line-height:1.5; letter-spacing:-.008em;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 390;
  color:var(--kh-fg-2,var(--kh-ink-2)); margin:0; text-wrap:pretty;
}
.kh-lede em,.kh-lede i{ font-style:italic }

.kh-body{
  font-family:var(--kh-sans); font-size:16px; font-weight:400;
  line-height:1.62; color:var(--kh-fg-2,var(--kh-ink-2));
  margin:0; text-wrap:pretty;
}
.kh-body + .kh-body{ margin-top:var(--kh-s4) }

/* the eyebrow */
.kh-eyebrow{
  font-family:var(--kh-sans); font-size:11px; font-weight:540;
  letter-spacing:.165em; text-transform:uppercase;
  color:var(--kh-fg-3,var(--kh-ink-3)); margin:0; display:block;
}

/* the tagline. The ONE place italic Newsreader is the right answer. */
.kh-tagline{
  font-family:var(--kh-serif); font-style:italic; font-weight:400;
  font-size:17px; line-height:1.35; letter-spacing:-.012em;
  color:var(--kh-fg-2,var(--kh-ink-2)); margin:0;
}

/* every figure is tabular and lining, tracked the way the report tracks them */
.kh-num,.kh-price,.kh-field input,.kh-field select{
  font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.03em }

/* AN EDITORIAL STATISTIC IS NOT A LAB VALUE. One is a claim the page argues,
   the other a measurement the product reads, so they are set in different
   faces: the serif for the argument, Geist for the instrument. */
.kh-stat{
  font-family:var(--kh-serif); font-weight:420; letter-spacing:-.034em;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 420;
  font-variant-numeric:lining-nums tabular-nums; line-height:1;
  color:var(--kh-fg-1,var(--kh-ink));
}
.kh-stat i{ font-size:.34em; vertical-align:.66em; font-weight:500;
  font-family:var(--kh-sans); letter-spacing:.02em; font-style:normal }

/* a source is metadata, not an afterthought in italic grey */
.kh-cite{
  font-style:normal; font-family:var(--kh-sans); font-size:10.5px;
  font-weight:540; letter-spacing:.14em; text-transform:uppercase;
  color:var(--kh-fg-3,var(--kh-ink-3));
}


/* ══ 4 · THE CHAPTER MARK ═════════════════════════════════════════════════
   The report's descending cascade glyph. Teal leads at full weight, then
   terracotta at falling weight. Each surface decides where it appears; the
   drawing is the same everywhere. */
.kh-mark{ display:inline-flex; flex-direction:column; gap:3px; width:21px;
  flex:none }
.kh-mark i{ height:2px; border-radius:2px; display:block;
  background:var(--kh-accent,var(--kh-rust)) }
.kh-mark i:nth-child(1){ width:100%; background:var(--kh-target) }
.kh-mark i:nth-child(2){ width:66% }
.kh-mark i:nth-child(3){ width:38%; opacity:.55 }


/* ══ 5 · THE STATUS VOCABULARY ════════════════════════════════════════════
   The band word: uppercase, tracked, a 6px dot, with the hollow-versus-filled
   distinction kept because it carries the status when colour is unavailable
   (print, forced colours, colour vision deficiency). */
.kh-dot{
  font-family:var(--kh-sans); font-size:10.5px; font-weight:540;
  letter-spacing:.17em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.62em;
}
.kh-dot::before{ content:""; width:6px; height:6px; border-radius:50%;
  border:1.4px solid currentColor; flex:none }
.kh-dot[data-st="target"]{ color:var(--kh-target-t) }
.kh-dot[data-st="target"]::before{ background:currentColor }
.kh-dot[data-st="track"]{ color:var(--kh-track) }
.kh-dot[data-st="out"]{ color:var(--kh-out) }
.kh-dot[data-st="out"]::before{ background:currentColor }


/* ══ 6 · CONTROLS ═════════════════════════════════════════════════════════
   SQUARE. The report has no pills and no drop shadows in it, and the rounded
   capsule with a 26px shadow was the most template-looking object on every
   screen it appeared on. 44px minimum target on everything. */
.kh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:52px; padding:16px 34px; border:0; border-radius:0; cursor:pointer;
  background:var(--kh-rust); color:#FFF;
  font-family:var(--kh-sans); font-size:14.5px; font-weight:500;
  letter-spacing:.02em; line-height:1.2; text-decoration:none;
  transition:background .18s ease;
  box-shadow:none;
}
.kh-btn:hover{ background:var(--kh-rust-deep) }
.kh-btn[disabled],.kh-btn[aria-disabled="true"]{
  background:var(--kh-ink-3); cursor:not-allowed }
.kh-btn .kh-arw{ transition:transform .2s var(--kh-ease) }
.kh-btn:hover .kh-arw{ transform:translateX(4px) }

/* the secondary control is a rule under a word, not a second filled block:
   two filled buttons on one screen is two primary actions. */
.kh-btn-q{
  position:relative; display:inline-flex; align-items:center;
  min-height:44px; padding-block:calc((44px - 1.45em) / 2);
  background:none; border:0; border-radius:0; cursor:pointer;
  font-family:var(--kh-sans); font-size:13.5px; font-weight:450;
  color:var(--kh-fg-1,var(--kh-ink)); text-decoration:none;
}
.kh-btn-q::after{ content:""; position:absolute; left:0; right:0;
  bottom:calc((44px - 1.45em) / 2 - 2px); height:1px; background:currentColor;
  opacity:.5; transition:opacity .18s ease }
.kh-btn-q:hover::after{ opacity:1 }

/* ── fields. A LINE, NOT A BOX. ───────────────────────────────────────────
   The previous era drew a 1px rounded box around every input on a near-white
   ground, so a lab panel read as twenty outlined rectangles. A rule under the
   value is how a form is set on paper, and it puts the emphasis on what she
   typed instead of on the container. */
.kh-field{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.kh-field > label,.kh-label{
  font-family:var(--kh-sans); font-size:11px; font-weight:540;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--kh-fg-3,var(--kh-ink-3));
}
.kh-hint{
  font-family:var(--kh-sans); font-size:12px; font-weight:400; line-height:1.5;
  color:var(--kh-fg-3,var(--kh-ink-3)); margin:0;
}
.kh-field input[type=text],.kh-field input[type=email],
.kh-field input[type=number],.kh-field input[type=tel],
.kh-field select,.kh-field textarea,
.kh-input{
  appearance:none; -webkit-appearance:none;
  width:100%; min-height:48px; padding:10px 2px; margin:0;
  background:transparent; color:var(--kh-fg-1,var(--kh-ink));
  border:0; border-bottom:1px solid var(--kh-line,var(--kh-rule));
  border-radius:0; box-shadow:none;
  font-family:var(--kh-sans); font-size:17px; font-weight:420;
  line-height:1.4; transition:border-color .18s ease;
}
.kh-field select,.kh-input[data-select]{
  padding-right:22px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 9px) calc(50% + 1px),
                      calc(100% - 4px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.kh-field input::placeholder,.kh-input::placeholder{
  color:var(--kh-fg-3,var(--kh-ink-3)); opacity:.62 }
.kh-field input:focus,.kh-field select:focus,.kh-input:focus{
  outline:0; border-bottom-color:var(--kh-accent,var(--kh-rust));
  border-bottom-width:2px; padding-bottom:9px }
.kh-field[data-invalid] input,.kh-input[aria-invalid="true"]{
  border-bottom-color:var(--kh-out) }
.kh-err{
  font-family:var(--kh-sans); font-size:12.5px; font-weight:450;
  color:var(--kh-out); margin:0 }

/* ── the checkbox. A REAL box, because a legal attestation must look like an
   act. 20px, square, and the label is the target. ───────────────────────── */
.kh-check{ display:flex; gap:14px; align-items:flex-start; cursor:pointer }
.kh-check input[type=checkbox]{
  appearance:none; -webkit-appearance:none; flex:none; margin:2px 0 0;
  width:20px; height:20px; border-radius:0; background:transparent;
  border:1.5px solid var(--kh-fg-3,var(--kh-ink-3)); cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.kh-check input[type=checkbox]:checked{
  background:var(--kh-accent,var(--kh-rust));
  border-color:var(--kh-accent,var(--kh-rust));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size:16px; background-position:center; background-repeat:no-repeat;
}
.kh-check:hover input[type=checkbox]{ border-color:var(--kh-accent,var(--kh-rust)) }

/* ── focus. One ring, everywhere. ───────────────────────────────────────── */
.kh-room a:focus-visible,.kh-room button:focus-visible,
.kh-room input:focus-visible,.kh-room select:focus-visible,
.kh-room [tabindex]:focus-visible{
  outline:2px solid var(--kh-accent,var(--kh-rust)); outline-offset:4px;
  border-radius:2px }


/* ══ 7 · FINE PRINT ═══════════════════════════════════════════════════════
   LEGAL COPY IS QUIET, NOT HIDDEN. It keeps a real reading size (12.5px, not
   10px), full contrast against its ground for the text that carries an
   obligation, and it sits next to the thing it governs rather than being
   swept into a footer. What it does not get is display type, a coloured
   panel, or an icon: a disclosure that decorates itself reads as marketing. */
.kh-fine{
  font-family:var(--kh-sans); font-size:12.5px; font-weight:400;
  line-height:1.66; color:var(--kh-fg-3,var(--kh-ink-3)); margin:0;
}
.kh-fine + .kh-fine{ margin-top:var(--kh-s3) }
.kh-fine a{ color:inherit; text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1px }
.kh-fine a:hover{ color:var(--kh-accent,var(--kh-rust)) }

/* a disclosure that must be READ, not merely present: the point-of-sale
   attestation and the lab-entry acknowledgement. Body-text contrast. */
.kh-fine--read{ color:var(--kh-fg-2,var(--kh-ink-2)); font-size:13px }


/* ══ 8 · THE FOOTER ═══════════════════════════════════════════════════════
   Left-aligned, on espresso, two columns: the mark and the tagline on the
   left, the standing medical disclaimer on the right. It was centred, which
   is what a newsletter does.

   IT DEFENDS ITSELF. kascade.css styles the `footer` ELEMENT with
   text-align:center, a top border and its own horizontal padding. This block
   is a class, so it wins the cascade on the properties it names, but it has
   to name them: an inherited text-align:center is invisible in the CSS and
   very visible on the page. */
.kh-foot{ background:var(--kh-esp); color:var(--kh-on-dark-2);
  padding:var(--kh-s7) 0 var(--kh-s6); border-top:0; text-align:left }
.kh-foot-g{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--kh-s6) var(--kh-s5); align-items:start }
.kh-foot-mark{ display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--kh-serif);
  font-style:normal; font-size:19px; font-weight:480; letter-spacing:-.014em;
  color:var(--kh-on-dark); text-decoration:none; margin:0;
  font-variation-settings:"opsz" 18,"wght" 480 }
.kh-foot .kh-tagline{ color:var(--kh-on-dark-2); margin-top:var(--kh-s3) }
.kh-foot-links{ display:flex; flex-wrap:wrap; gap:6px 22px;
  margin-top:var(--kh-s5); list-style:none; padding:0 }
.kh-foot-links a{
  font-family:var(--kh-sans); font-size:12px; font-weight:450;
  color:var(--kh-on-dark-3); text-decoration:none;
  /* 44px, not 34: these are the policy links, and on a phone they are the
     smallest things anyone is ever asked to hit deliberately. */
  display:inline-flex; align-items:center; min-height:44px;
  transition:color .18s ease }
.kh-foot-links a:hover{ color:var(--kh-on-dark) }
.kh-foot-legal{ font-family:var(--kh-sans); font-size:12.5px; font-weight:400;
  line-height:1.7; color:var(--kh-on-dark-3); margin:0; max-width:56ch }
.kh-foot-legal + .kh-foot-legal{ margin-top:var(--kh-s3) }
@media (max-width:860px){
  .kh-foot-g{ grid-template-columns:1fr }
  .kh-foot-legal{ max-width:none }
}


/* ══ 9 · MOTION ═══════════════════════════════════════════════════════════ */
.kh-in{ opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--kh-ease),transform .7s var(--kh-ease) }
.kh-in.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .kh-in,.kh-in.is-in{ opacity:1 !important; transform:none !important;
    transition:none !important }
  .kh-btn,.kh-btn .kh-arw{ transition:none !important }
}
/* the still capture used by the QA harness */
html.still .kh-in{ opacity:1 !important; transform:none !important;
  transition:none !important }


/* ══ 10 · FORCED COLOURS ══════════════════════════════════════════════════
   The status dot's fill carries meaning, so it needs a shape that survives
   when the system replaces every colour. */
@media (forced-colors:active){
  .kh-btn{ border:1px solid currentColor }
  .kh-check input[type=checkbox]{ border:1px solid currentColor }
  .kh-dot::before{ border:1px solid currentColor }
}