/* ═══════════════════════════════════════════════════════════════════════════
   KASCADE HEALTH™ · THE INTAKE FLOW, ON THE CURRENT SYSTEM
   ───────────────────────────────────────────────────────────────────────────
   Scope: `.form-page` (pick, step0, step1, step2, step3, step4, step4b, step5)
   and `#thanks`. NOTHING here touches `#report`, which is a PORT of an
   approved design source and is guarded by qa-design-freeze.py.

   WHY IT IS AN OVERRIDE LAYER RATHER THAN AN EDIT IN PLACE.
   report.html is 1.7 MB and its intake styling is three stacked layers ending
   in a block of late overrides: 564 `!important` declarations across the
   ranges this file re-skins, plus inline `style=` on the step 5 column. Editing
   that in place means touching thousands of lines inside the same file that
   renders the paid report. An additive layer loaded last is reviewable,
   revertible in one line, and cannot reach the report renderer.

   THAT IS ALSO WHY THIS FILE USES `!important` FREELY. It is not laziness and
   it is not a specificity war for its own sake: every property below has an
   `!important` competitor already in the page. Where the existing rule is
   ordinary, so is the rule here.

   WHAT CHANGED, AND WHY EACH ONE IS NOT COSMETIC
     · Cormorant Garamond italic display  →  Newsreader roman, opsz pinned 18.
       Italic display was the previous era's signature. The current system uses
       italic for exactly one thing, the tagline.
     · Boxed inputs  →  a rule under the value. Step 4 drew twenty outlined
       rectangles on a near-white ground and the containers read louder than
       the numbers she typed.
     · Pill buttons with a 26px shadow  →  square, flat, rust.
     · Cream #FBF7EE + film grain  →  ivory and parchment rooms, no grain.
     · A 620px column centred on a 1440px screen  →  a real measure per step.
       Step 4 is a data-entry screen and was the worst of it: four lab fields
       sharing 440px, so each input was about 100px wide and the unit selects
       wrapped under their own inputs and broke the row baseline.
     · The teal section label  →  ink. Sage is the status vocabulary's
       "at target". Using it for furniture spends the one colour that has to
       mean something on the report.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══ 1 · THE ROOM ═════════════════════════════════════════════════════════ */
.form-page,
.form-page .sshell,
#thanks{
  background:var(--kh-ivory) !important;
  color:var(--kh-ink);
}
/* the previous era dithered its dark gradients with a film grain, and it sat
   over the form as a fixed overlay. There is no gradient here to dither. */
.form-page .e-wash,
.form-page .e-bdr{ display:none !important }

.form-page .sc{
  max-width:760px !important;
  margin:0 auto !important;
  padding:var(--kh-s7) var(--kh-gutter) var(--kh-s8) !important;
}
/* STEP 4 IS A DATA TABLE WEARING A FORM. It gets the wide measure. */
#step4 .sc,
#step4b .sc{ max-width:1080px !important }


/* ══ 2 · THE PROGRESS HEADER ══════════════════════════════════════════════
   It stays sticky, because knowing how much is left is the single most
   useful thing on a multi-step form. What it loses is the italic serif
   "Step 3 of 4" set as if it were a pull quote. */
.form-page .prog-bar{
  height:2px !important;
  background:rgba(31,24,16,.10) !important;
}
.form-page .prog-fill{
  background:var(--kh-rust) !important;
  transition:width .5s var(--kh-ease) !important;
}
.form-page .prog-row{
  background:var(--kh-parch) !important;
  border-bottom:0 !important;
  padding:0 var(--kh-gutter) !important;
  min-height:60px !important;
}
.form-page .prog-back{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:13px !important; font-weight:450 !important;
  color:var(--kh-ink-3) !important; background:none !important;
  border:0 !important; cursor:pointer;
  display:inline-flex !important; align-items:center; min-height:44px;
  transition:color .18s ease;
}
.form-page .prog-back:hover{ color:var(--kh-ink) !important }
.form-page .prog-label-block{
  display:flex !important; align-items:baseline; gap:12px; text-align:right;
}
.form-page .prog-step,
.form-page .prog-name{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:11px !important; font-weight:540 !important;
  letter-spacing:.165em !important; text-transform:uppercase !important;
  line-height:1.2 !important;
}
.form-page .prog-step{ color:var(--kh-ink-3) !important }
.form-page .prog-name{ color:var(--kh-ink) !important }
@media (max-width:640px){
  .form-page .prog-label-block{ flex-direction:column; gap:2px }
  .form-page .prog-name{ font-size:10.5px !important }
}


/* ══ 3 · TYPE INSIDE THE FLOW ═════════════════════════════════════════════ */
.form-page .s-title,
.form-page .step0-h,
.form-page .ksp-checkout-h{
  font-family:var(--kh-serif) !important;
  font-style:normal !important;
  font-weight:430 !important;
  font-optical-sizing:none;
  font-variation-settings:"opsz" 18,"wght" 430;
  letter-spacing:-.032em !important;
  line-height:1.06 !important;
  color:var(--kh-ink) !important;
  text-wrap:balance;
}
.form-page .s-title{
  font-size:clamp(30px,3.4vw,44px) !important;
  margin:0 0 var(--kh-s4) !important;
  max-width:20ch;
}
/* the accent half of a display line is COLOUR, not italic */
.form-page .s-title em,
.form-page .step0-h em,
.form-page .ksp-checkout-h em{
  font-style:normal !important;
  color:var(--kh-rust) !important;
}

.form-page .s-desc{
  font-family:var(--kh-serif) !important;
  font-size:17.5px !important; font-weight:390 !important;
  line-height:1.5 !important; letter-spacing:-.008em !important;
  color:var(--kh-ink-2) !important;
  font-optical-sizing:none;
  font-variation-settings:"opsz" 18,"wght" 390;
  border-bottom:0 !important;
  margin:0 0 var(--kh-s7) !important;
  padding-bottom:0 !important;
  max-width:52ch;
  text-wrap:pretty;
}

/* THE SECTION LABEL. Ink, not teal. See the header note. */
.form-page .sec-lbl{
  font-family:var(--kh-sans) !important;
  font-size:11px !important; font-weight:540 !important;
  letter-spacing:.165em !important; text-transform:uppercase !important;
  color:var(--kh-ink-3) !important;
  margin:0 0 var(--kh-s4) !important;
  font-style:normal !important;
}
/* a section divider is a hairline, not a shaded block */
.form-page .hdiv{
  height:1px !important; background:var(--kh-rule) !important;
  border:0 !important; margin:var(--kh-s6) 0 !important; opacity:1 !important;
}


/* ══ 4 · FIELDS · A LINE, NOT A BOX ═══════════════════════════════════════
   `.fsub` carries the unit, and it had a fixed 16px height whether or not a
   field had one, which is what kept the rows of step 4 from sharing a
   baseline once some fields grew a helper note and others did not. The label
   and the unit now sit on one line above the rule, so every field in a row is
   the same height regardless of what is written under it. */
.form-page .fld{
  display:flex !important; flex-direction:column !important;
  gap:0 !important; min-width:0 !important;
}
.form-page .flbl{
  font-family:var(--kh-sans) !important;
  font-size:11px !important; font-weight:540 !important;
  letter-spacing:.13em !important; text-transform:uppercase !important;
  color:var(--kh-ink-2) !important;
  line-height:1.3 !important;
  margin:0 0 3px !important;
}
.form-page .flbl .req{ color:var(--kh-rust) !important; font-weight:540 }
.form-page .fsub{
  font-family:var(--kh-sans) !important;
  font-size:11px !important; font-weight:450 !important;
  letter-spacing:.02em !important; text-transform:none !important;
  color:var(--kh-ink-3) !important;
  height:auto !important; min-height:15px !important;
  line-height:1.3 !important; margin:0 0 4px !important;
}
.form-page .fin,
.form-page input[type=text].fin,
.form-page input[type=number].fin,
.form-page input[type=email].fin,
.form-page select.fin,
.form-page .unit-sel,
.form-page select.unit-sel{
  appearance:none !important; -webkit-appearance:none !important;
  height:48px !important; min-height:48px !important;
  padding:8px 2px !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid rgba(31,24,16,.24) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-family:var(--kh-sans) !important;
  font-size:17px !important; font-weight:420 !important;
  color:var(--kh-ink) !important;
  width:100% !important;
  transition:border-color .16s ease !important;
  font-variant-numeric:tabular-nums lining-nums;
}
.form-page .fin::placeholder{ color:var(--kh-ink-3) !important; opacity:.6 }
.form-page .fin:focus,
.form-page .unit-sel:focus{
  outline:0 !important;
  border-bottom-color:var(--kh-rust) !important;
  border-bottom-width:2px !important;
  padding-bottom:7px !important;
}
.form-page .fin:disabled,
.form-page .fin[readonly]{
  color:var(--kh-ink-3) !important;
  border-bottom-style:dashed !important;
  background:transparent !important;
}
/* a <select> needs its own caret once the native one is gone */
.form-page select.fin,
.form-page select.unit-sel{
  cursor:pointer;
  padding-right:20px !important;
  background-image:linear-gradient(45deg,transparent 50%,var(--kh-ink-3) 50%),
                   linear-gradient(135deg,var(--kh-ink-3) 50%,transparent 50%) !important;
  background-position:calc(100% - 9px) calc(50% + 1px),
                      calc(100% - 4px) calc(50% + 1px) !important;
  background-size:5px 5px,5px 5px !important;
  background-repeat:no-repeat !important;
}
/* the helper note under a field: real reading size, and it no longer shoves
   its neighbours out of alignment because the row aligns on the rule above */
.form-page .fnote{
  font-family:var(--kh-sans) !important;
  font-size:12px !important; font-weight:400 !important;
  line-height:1.5 !important; color:var(--kh-ink-3) !important;
  margin:8px 0 0 !important; font-style:normal !important;
}
.form-page .fnote b,.form-page .fnote strong{
  color:var(--kh-ink-2) !important; font-weight:540 !important }

/* THE ROW. Four fields at the wide measure, and they align on the RULE,
   which is the one line every field in the row shares. */
.form-page .fg4{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:var(--kh-s5) clamp(20px,2.4vw,36px) !important;
  align-items:start !important;
  margin:0 !important;
}
/* `.fld-row` is a VALUE PLUS ITS UNIT (weight/lbs, height/in), not two equal
   fields. As an even 2-column grid the unit select took half the width of the
   number it modifies. */
.form-page .fld-row{
  display:flex !important;
  gap:10px !important;
  align-items:flex-end !important;
}
.form-page .fld-row > .fin{ flex:1 1 auto !important; min-width:0 !important }
.form-page .fld-row > .unit-sel{
  flex:0 0 auto !important; width:auto !important; min-width:78px !important;
  font-size:14px !important; color:var(--kh-ink-2) !important;
}
@media (max-width:900px){
  .form-page .fg4{ grid-template-columns:repeat(2,minmax(0,1fr)) !important }
}
@media (max-width:560px){
  .form-page .fg4,
  .form-page .fld-row{ grid-template-columns:minmax(0,1fr) !important }
}

/* the unit control sits BESIDE its value, not stacked under it */
.form-page .kh-unit{
  display:flex !important; align-items:flex-end; gap:10px;
}
.form-page .kh-unit .fin{ flex:1 1 auto; min-width:0 }
.form-page .kh-unit .unit-sel{ flex:0 0 auto; width:auto !important;
  min-width:86px; font-size:14px !important; color:var(--kh-ink-2) !important }


/* ══ 5 · CHECKBOXES AND CHOICE ROWS ═══════════════════════════════════════ */
/* .cck is the check GLYPH inside .cbox, not a row (Pass 4, audit F1031): listing it here made
   it always render, with a row border, and an unchecked box announced a check mark. */
.form-page .ck{
  display:flex !important; align-items:flex-start !important; gap:14px !important;
  padding:15px 0 !important;
  border-bottom:1px solid var(--kh-rule) !important;
  cursor:pointer;
  transition:padding-left .18s var(--kh-ease);
}
.form-page .ck:hover{ padding-left:5px !important }
.form-page .cbox{
  width:20px !important; height:20px !important;
  border:1.5px solid var(--kh-ink-3) !important;
  border-radius:0 !important;
  background:transparent !important;
  flex-shrink:0; margin-top:1px !important;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease,background .15s ease !important;
  box-shadow:none !important;
}
.form-page .ck:hover .cbox{ border-color:var(--kh-rust) !important }
.form-page .ck.on .cbox,
.form-page .ck[aria-checked="true"] .cbox,
.form-page input:checked + .cbox{
  background:var(--kh-rust) !important;
  border-color:var(--kh-rust) !important;
  color:#FFF !important;
}
.form-page .ck-txt{
  font-family:var(--kh-sans) !important;
  font-size:15px !important; font-weight:400 !important;
  line-height:1.5 !important; color:var(--kh-ink) !important;
}


/* .ksp-step4-continue is the WRAPPER around the continue button and its note, not a button,
   so it is not in the primary-button list (Pass 4, audit F1032: the note read 2.48:1 on rust). */
/* ══ 6 · BUTTONS ══════════════════════════════════════════════════════════
   Square, rust, one primary per screen. The espresso full-bleed bar and the
   shadowed pill both go. */
.form-page .cont-btn,
.form-page .step0-cta,
.form-page .ksp-continue-btn,
.form-page .ksp-checkout-btn,
#thanks .cont-btn{
  display:inline-flex !important; align-items:center !important;
  justify-content:center !important; gap:14px !important;
  width:auto !important; min-width:min(100%,320px);
  height:auto !important; min-height:56px !important;
  padding:16px 38px !important;
  background:var(--kh-rust) !important; color:#FFF !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  font-family:var(--kh-sans) !important;
  font-size:15px !important; font-weight:500 !important;
  letter-spacing:.01em !important; text-transform:none !important;
  cursor:pointer;
  transform:none !important;
  transition:background .18s ease !important;
}
.form-page .cont-btn:hover,
.form-page .step0-cta:hover,
.form-page .ksp-continue-btn:hover,
.form-page .ksp-checkout-btn:hover{
  background:#933E1E !important; transform:none !important }
.form-page .cont-btn:disabled,
.form-page .ksp-checkout-btn:disabled{
  background:var(--kh-ink-3) !important; cursor:not-allowed }
.form-page .step0-cta-arrow,
.form-page .ksp-continue-arrow,
.form-page .ksp-checkout-btn-arrow{
  transition:transform .2s var(--kh-ease) !important }
.form-page .cont-btn:hover .ksp-continue-arrow,
.form-page .step0-cta:hover .step0-cta-arrow,
.form-page .ksp-checkout-btn:hover .ksp-checkout-btn-arrow{
  transform:translateX(4px) !important }

.form-page .step-nav{
  background:transparent !important; border-top:0 !important;
  padding:var(--kh-s6) 0 0 !important; position:static !important;
  box-shadow:none !important;
}
.form-page .step-nav .nav-in{
  max-width:none !important; padding:0 !important; margin:0 !important;
  display:flex !important; justify-content:flex-start !important;
}
@media (max-width:560px){
  .form-page .cont-btn,
  .form-page .step0-cta,
  .form-page .ksp-checkout-btn,
  .form-page .ksp-continue-btn{ width:100% !important }
}

/* the secondary route out of a screen is a rule under a word */
.form-page .step0-decoder,
.form-page .kh-rev-back{
  font-family:var(--kh-sans) !important; font-size:14px !important;
  font-weight:450 !important; color:var(--kh-ink-2) !important;
  background:none !important; border:0 !important;
  text-decoration:underline !important; text-underline-offset:3px !important;
  text-decoration-thickness:1px !important;
  display:inline-flex !important; align-items:center; min-height:44px;
  cursor:pointer;
}
.form-page .step0-decoder:hover,
.form-page .kh-rev-back:hover{ color:var(--kh-rust) !important }


/* ══ 7 · STEP 0 · THE OPENER ══════════════════════════════════════════════ */
/* THE PHOTOGRAPH STAYS OFF. `.step0-photo{display:none}` at report.html:4504
   is a deliberate decision, not an accident: the build's own note says the
   landing photograph carries the drama and the intake is "one continuous
   surface" behind it. So step 0 is a single editorial column, not a two-up
   with a revived image. */
#step0 .step0-eyebrow{
  font-family:var(--kh-sans) !important; font-size:11px !important;
  font-weight:540 !important; letter-spacing:.165em !important;
  text-transform:uppercase !important; color:var(--kh-ink-3) !important;
  font-style:normal !important; margin:0 0 var(--kh-s4) !important;
}
#step0 .step0-h{
  font-size:clamp(36px,4.2vw,58px) !important;
  margin:0 0 var(--kh-s5) !important; max-width:16ch;
}
#step0 .step0-sub{
  font-family:var(--kh-serif) !important; font-size:17.5px !important;
  font-weight:390 !important; line-height:1.5 !important;
  letter-spacing:-.008em !important; color:var(--kh-ink-2) !important;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 390;
  max-width:46ch; margin:0 0 var(--kh-s6) !important;
}
/* "What you'll need" is a CHECKLIST, so it is set as one: no card, no border
   radius, no shadow. A hairline above it and the items hanging off a mark. */
#step0 .step0-need{
  background:transparent !important; border:0 !important;
  border-top:1px solid var(--kh-rule) !important;
  border-radius:0 !important; box-shadow:none !important;
  padding:var(--kh-s5) 0 0 !important; margin:0 0 var(--kh-s6) !important;
}
#step0 .step0-need-h{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:11px !important; font-weight:540 !important;
  letter-spacing:.165em !important; text-transform:uppercase !important;
  color:var(--kh-ink-3) !important; margin:0 0 var(--kh-s4) !important;
}
#step0 .step0-need-list{ list-style:none; margin:0; padding:0 }
#step0 .step0-need-list li{
  display:grid !important; grid-template-columns:22px minmax(0,1fr) !important;
  gap:12px; align-items:start;
  font-family:var(--kh-sans) !important; font-size:15px !important;
  line-height:1.55 !important; color:var(--kh-ink-2) !important;
  padding:0 0 var(--kh-s3) !important; border:0 !important;
}
#step0 .step0-need-list li strong{ color:var(--kh-ink) !important;
  font-weight:540 !important }
#step0 .step0-tick{
  width:auto !important; height:auto !important; background:none !important;
  border:0 !important; border-radius:0 !important;
  color:var(--kh-target-t) !important; font-size:14px !important;
  line-height:1.6 !important;
}
/* the "no results yet" route. It was a card with a teal left bar, which made
   it read as an alert. It is an alternative path, so it is a quiet block. */
#step0 .step0-noresults{
  background:var(--kh-parch) !important;
  border:0 !important; border-left:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  padding:var(--kh-s5) !important; margin:0 0 var(--kh-s6) !important;
}
#step0 .step0-noresults-h{
  font-family:var(--kh-serif) !important; font-style:normal !important;
  font-size:20px !important; font-weight:440 !important;
  letter-spacing:-.016em !important; color:var(--kh-ink) !important;
  margin:0 0 var(--kh-s3) !important;
}
#step0 .step0-noresults-row{
  display:flex !important; flex-wrap:wrap; align-items:center;
  gap:var(--kh-s3) var(--kh-s5) !important;
}
#step0 .step0-ulta-btn{
  display:inline-flex !important; align-items:center; min-height:48px;
  padding:12px 22px !important;
  background:transparent !important; color:var(--kh-ink) !important;
  border:1px solid rgba(31,24,16,.3) !important; border-radius:0 !important;
  box-shadow:none !important;
  font-family:var(--kh-sans) !important; font-size:14px !important;
  font-weight:450 !important; letter-spacing:0 !important;
  text-transform:none !important; text-decoration:none !important;
  transition:border-color .18s ease,color .18s ease !important;
}
#step0 .step0-ulta-btn:hover{
  border-color:var(--kh-rust) !important; color:var(--kh-rust) !important }
/* THE FTC AFFILIATE DISCLOSURE. It sits immediately adjacent to the affiliate
   link, at a real reading size, in the same face as the body. It was set in
   italic serif at 11px, which is how fine print looks when it is hoping not
   to be read. CLAUDE.md §2.7 item 7. */
#step0 .step0-aff{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:12.5px !important; font-weight:400 !important;
  line-height:1.6 !important; color:var(--kh-ink-3) !important;
  margin:var(--kh-s4) 0 0 !important; max-width:62ch;
}
#step0 .step0-photo{ margin:0 }
#step0 .step0-photo img{
  display:block; width:100%; height:auto; aspect-ratio:.86;
  object-fit:cover; object-position:54% 12%;
  border-radius:0 !important; box-shadow:none !important;
}
#step0 .step0-mark{ display:none !important }
@media (max-width:900px){
  #step0 .step0-wrap{ grid-template-columns:minmax(0,1fr) !important;
    gap:var(--kh-s6) !important }
  #step0 .step0-photo{ order:-1 }
  #step0 .step0-photo img{ aspect-ratio:1.5 }
}


/* ══ 8 · THE LAB-ENTRY ACKNOWLEDGEMENT AND THE TIMING NOTE ════════════════
   Two stacked panels used to open step 4, before she could type anything.
   Both stay, because one is required (CLAUDE.md §13, lab entry screen) and
   the other is genuinely useful. What changes is their weight: the required
   acknowledgement is set as readable fine print on the ivory ground rather
   than as a second filled card, and the timing note keeps the parchment fill
   because it is the one piece of teaching on the screen. */
.form-page .kh-bub{
  background:var(--kh-parch) !important;
  border:0 !important; border-left:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  padding:var(--kh-s5) !important;
  margin:0 0 var(--kh-s6) !important;
  font-family:var(--kh-sans) !important; font-size:14px !important;
  line-height:1.62 !important; color:var(--kh-ink-2) !important;
}
.form-page .kh-bub b,.form-page .kh-bub strong{
  color:var(--kh-ink) !important; font-weight:540 !important }
/* the acknowledgement: no fill, a hairline, body contrast */
.form-page .kh-bub.kh-ack,
.form-page .kh-bub + .kh-bub{
  background:transparent !important;
  border-top:1px solid var(--kh-rule) !important;
  padding:var(--kh-s4) 0 0 !important;
  font-size:12.5px !important;
  color:var(--kh-ink-3) !important;
}


/* ══ 9 · STEP 5 · CHECKOUT ════════════════════════════════════════════════
   The decision screen. It opened on a 64px display headline and a six-line
   deck, which pushed the price, the fields and the button below the fold on a
   laptop. She has already decided to buy by the time she reaches step 5; what
   she needs here is to see what she is paying for, check her values, and
   find the button. The headline steps down and the deck tightens. */
#step5 .sc{ max-width:820px !important;
  padding:var(--kh-s6) var(--kh-gutter) var(--kh-s8) !important }
#step5 .ksp-checkout-bg{ display:none !important }
#step5 .ksp-checkout,
#step5 .ksp-checkout-frame{
  background:transparent !important; border:0 !important;
  border-radius:0 !important; box-shadow:none !important; padding:0 !important;
}
#step5 .ksp-checkout-eyebrow{
  font-family:var(--kh-sans) !important; font-size:11px !important;
  font-weight:540 !important; letter-spacing:.165em !important;
  text-transform:uppercase !important; color:var(--kh-ink-3) !important;
  margin:0 0 var(--kh-s4) !important;
}
#step5 .ksp-checkout-h{
  font-size:clamp(30px,3.2vw,42px) !important;
  margin:0 0 var(--kh-s4) !important; max-width:18ch;
}
#step5 .ksp-checkout-sub{
  font-family:var(--kh-serif) !important; font-size:17px !important;
  font-weight:390 !important; line-height:1.5 !important;
  letter-spacing:-.008em !important; color:var(--kh-ink-2) !important;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 390;
  max-width:52ch; margin:0 0 var(--kh-s6) !important;
}
#step5 .ksp-checkout-fields{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:var(--kh-s5) clamp(20px,2.4vw,36px) !important;
  margin:var(--kh-s6) 0 var(--kh-s5) !important;
}
#step5 .ksp-checkout-field{ display:flex; flex-direction:column; min-width:0 }
#step5 .ksp-checkout-field label{
  font-family:var(--kh-sans) !important; font-size:11px !important;
  font-weight:540 !important; letter-spacing:.13em !important;
  text-transform:uppercase !important; color:var(--kh-ink-2) !important;
  margin:0 0 4px !important;
}
#step5 .ksp-checkout-field input{
  appearance:none !important; -webkit-appearance:none !important;
  width:100% !important; height:48px !important;
  padding:8px 2px !important;
  background:transparent !important; border:0 !important;
  border-bottom:1px solid rgba(31,24,16,.24) !important;
  border-radius:0 !important; box-shadow:none !important;
  font-family:var(--kh-sans) !important; font-size:17px !important;
  font-weight:420 !important; color:var(--kh-ink) !important;
  font-style:normal !important;
}
#step5 .ksp-checkout-field input::placeholder{
  color:var(--kh-ink-3) !important; opacity:.6; font-style:normal !important }
#step5 .ksp-checkout-field input:focus{
  outline:0 !important; border-bottom-color:var(--kh-rust) !important;
  border-bottom-width:2px !important; padding-bottom:7px !important }
@media (max-width:560px){
  #step5 .ksp-checkout-fields{ grid-template-columns:minmax(0,1fr) !important }
}

/* THE ORDER LINE. It was an inline-styled panel with a teal left bar and a
   Cormorant price. A price is an instrument reading, so it is set in the data
   face, and the block is a ruled row rather than a coloured card. */
#step5 [data-kh-price]{
  font-family:var(--kh-serif) !important; font-style:normal !important;
  font-weight:420 !important; font-size:34px !important;
  letter-spacing:-.034em !important; color:var(--kh-ink) !important;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 420;
  font-variant-numeric:tabular-nums lining-nums;
}
#step5 [data-kh-product-name]{
  font-family:var(--kh-sans) !important; font-size:15px !important;
  font-weight:540 !important; color:var(--kh-ink) !important;
}

/* THE REVIEW BLOCK. Her one chance to catch a typo before sales are final,
   so it keeps a fill and reads as a distinct object. */
#step5 .kh-rev{
  background:var(--kh-parch) !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:var(--kh-s5) !important; margin:0 0 var(--kh-s6) !important;
}
#step5 .kh-rev-h{
  font-family:var(--kh-serif) !important; font-style:normal !important;
  font-size:22px !important; font-weight:440 !important;
  letter-spacing:-.018em !important; color:var(--kh-ink) !important;
  margin:0 0 var(--kh-s2) !important;
}
#step5 .kh-rev-s{
  font-family:var(--kh-sans) !important; font-size:13.5px !important;
  line-height:1.6 !important; color:var(--kh-ink-2) !important;
  margin:0 0 var(--kh-s4) !important;
}

/* THE FINE PRINT AT THE POINT OF SALE.
   Three obligations live here: the delivery and no-refund term, the AI
   disclosure, and the affirmative consent. They were three grey paragraphs of
   identical weight, which is how required disclosure gets skimmed. They are
   now one ruled block, with the consent given a fill and a real checkbox so
   it reads as an ACT rather than as more small print. Not one word changed. */
#step5 .ksp-checkout-finepr{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:12.5px !important; font-weight:400 !important;
  line-height:1.66 !important; color:var(--kh-ink-3) !important;
  margin:0 0 var(--kh-s3) !important; max-width:70ch;
}
#step5 .ksp-checkout-finepr a{
  color:var(--kh-ink-2) !important; text-decoration:underline !important;
  text-underline-offset:2px }
#step5 .ksp-checkout-finepr a:hover{ color:var(--kh-rust) !important }

#step5 .ksp-checkout-consent{
  display:flex !important; align-items:flex-start !important; gap:14px !important;
  background:var(--kh-parch) !important;
  border:0 !important; border-left:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  padding:var(--kh-s5) !important;
  margin:var(--kh-s5) 0 var(--kh-s4) !important;
  cursor:pointer;
}
#step5 .ksp-checkout-consent input[type=checkbox],
#step5 .ksp-keep-opt input[type=checkbox]{
  appearance:none !important; -webkit-appearance:none !important;
  flex:none !important; width:20px !important; height:20px !important;
  margin:1px 0 0 !important;
  border:1.5px solid var(--kh-ink-3) !important; border-radius:0 !important;
  background:transparent !important; cursor:pointer;
  transition:border-color .15s ease,background .15s ease !important;
}
#step5 .ksp-checkout-consent input[type=checkbox]:checked,
#step5 .ksp-keep-opt input[type=checkbox]:checked{
  background:var(--kh-rust) !important; border-color:var(--kh-rust) !important;
  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") !important;
  background-size:16px !important; background-position:center !important;
  background-repeat:no-repeat !important;
}
#step5 .ksp-checkout-consent:hover input[type=checkbox]{
  border-color:var(--kh-rust) !important }
/* the three sentences of the attestation are three paragraphs, not one wall */
#step5 .kh-c-p{
  display:block !important;
  font-family:var(--kh-sans) !important; font-size:13px !important;
  line-height:1.62 !important; color:var(--kh-ink-2) !important;
}
#step5 .kh-c-p + .kh-c-p{ margin-top:var(--kh-s3) !important }
#step5 .kh-c-p a{ color:var(--kh-ink) !important;
  text-decoration:underline !important; text-underline-offset:2px }

/* OPTIONAL, AND STYLED TO LOOK IT. No fill, so it cannot be mistaken for the
   second half of the required attestation above. */
#step5 .ksp-keep-opt{
  display:flex !important; align-items:flex-start !important; gap:14px !important;
  background:transparent !important; border:0 !important; padding:0 !important;
  margin:0 0 var(--kh-s6) !important; cursor:pointer;
  font-family:var(--kh-sans) !important; font-size:12.5px !important;
  line-height:1.62 !important; color:var(--kh-ink-3) !important;
}
#step5 .ksp-keep-opt b{ color:var(--kh-ink-2) !important; font-weight:540 !important }
#step5 .ksp-checkout-err{
  font-family:var(--kh-sans) !important; font-size:13.5px !important;
  color:var(--kh-rust) !important; margin:0 0 var(--kh-s3) !important }


/* ══ 10 · THE POST-PAYMENT STATE ═════════════════════════════════════════
   The ten seconds after she pays. One room, one column, three facts in the
   order she needs them: it worked, here is when it arrives, here is what to
   look for. No card, no shadow, nothing centred. */
#thanks{ background:var(--kh-ivory) !important }
#thanks .thx{
  background:var(--kh-ivory); min-height:min(100vh,760px);
  display:flex; align-items:center;
  padding:var(--kh-s8) 0;
}
#thanks .thx-in{
  max-width:var(--kh-frame); width:100%;
  margin-inline:auto; padding-inline:var(--kh-gutter);
}
#thanks .thx-eye{ color:var(--kh-target-t) !important }
#thanks .thx-h{
  font-family:var(--kh-serif); font-style:normal; font-weight:430;
  font-size:clamp(34px,4.2vw,58px); line-height:1.02; letter-spacing:-.036em;
  color:var(--kh-ink); margin:var(--kh-s4) 0 0; max-width:16ch;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 430;
}
#thanks .thx-lede{
  font-family:var(--kh-serif); font-weight:390; font-size:18px;
  line-height:1.5; letter-spacing:-.008em; color:var(--kh-ink-2);
  margin:var(--kh-s5) 0 0; max-width:44ch;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 390;
}
#thanks .thx-lede b{ color:var(--kh-ink); font-weight:540 }
/* the subject line is a thing to RECOGNISE in an inbox, so it is shown as a
   specimen on the system's panel rather than as another sentence */
#thanks .thx-panel{
  background:var(--kh-parch); padding:var(--kh-s5);
  margin:var(--kh-s6) 0 0; max-width:52ch;
}
#thanks .thx-subject{
  font-family:var(--kh-sans); font-size:16px; font-weight:450;
  line-height:1.45; color:var(--kh-ink); margin:var(--kh-s3) 0 0;
}
#thanks .thx-fine{
  font-family:var(--kh-sans); font-size:12.5px; font-weight:400;
  line-height:1.66; color:var(--kh-ink-3);
  margin:var(--kh-s5) 0 0; max-width:60ch;
}
#thanks .thx-fine a{ color:var(--kh-ink-2); text-decoration:underline;
  text-underline-offset:2px }
#thanks .thx-fine a:hover{ color:var(--kh-rust) }


/* ══ 11 · WHAT THE FLOW NO LONGER DRAWS ═══════════════════════════════════
   The previous era's decoration, removed everywhere inside the flow at once
   so a single missed instance cannot reintroduce the old look. */
.form-page [class*="card"],
.form-page .sshell,
.form-page .sc{ box-shadow:none !important }
.form-page::before,.form-page::after{ background-image:none !important }


/* ══ 12 · THE UNIT SELECTOR, ON THE SAME ROW AS ITS VALUE ═════════════════
   Three step-4 fields carry an inline unit control (testosterone, hsCRP,
   vitamin D). Its markup is a bare `select.fin.kh-unit` SIBLING of the input
   inside `.fld`, with an inline `height:34px;margin-top:6px`, so in a column
   flex it stacked UNDER the number. Those three fields were then ~60px taller
   than their neighbours and the row lost its shared baseline, which is the
   most visible fault on the screen where she does the actual work.

   `.fld` becomes a grid ONLY when it contains one, so the other seventeen
   fields are untouched. The inline height needs !important to beat. */
.form-page .fld:has(> select.kh-unit){
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:"lbl lbl" "sub sub" "def def" "val unit" "note note" !important;
  /* ZERO, so the value's rule and the unit's rule meet and read as ONE line under
     the pair. At 8px they were two underlines with a notch between them, which is
     what made the unit look like a second field parked beside the first. */
  column-gap:0 !important;
  align-items:end !important;
}
.form-page .fld:has(> select.kh-unit) > .flbl{ grid-area:lbl }
/* THE LABEL WAS BEING SQUEEZED INTO THE VALUE COLUMN. Found 2026-09-23.
   Only a BARE `.flbl` was given an area. Two of these three fields do not have one:
   hsCRP and vitamin D wrap their label in `<span class="flbl-row">` so the "what is
   this" button can sit next to it. With no area, that span auto-placed into column
   one, which is the 108px VALUE column, while `.fsub` beneath it spanned the full
   200px. So "hsCRP" and its button were pushed apart to the column edge, and
   "VITAMIN D 25-OH" ran into the edge and wrapped. Those two are exactly the fields
   that looked broken, and the third (testosterone, a bare .flbl) did not.

   `.fdef-b` is the definition paragraph those buttons open. It had no area either,
   so opening one would have auto-placed it on top of the row beneath. It gets its
   own band, which is why the template above gained a fifth row. */
.form-page .fld:has(> select.kh-unit) > .flbl-row{ grid-area:lbl }
.form-page .fld:has(> select.kh-unit) > .fsub{ grid-area:sub }
.form-page .fld:has(> select.kh-unit) > .fdef-b{ grid-area:def }
.form-page .fld:has(> select.kh-unit) > input.fin{ grid-area:val }
.form-page .fld:has(> select.kh-unit) > .fnote{ grid-area:note }
/* A UNIT IS A SUFFIX TO THE NUMBER, NOT A SECOND FIELD. At 82px minimum next to a
   108px value it was reading as the louder of the two, and in ink-2 it sat darker
   than the number it modifies. It recedes: sized to its own content, a step down in
   size, and in the tertiary ink, so the eye lands on the box she has to type in. */
.form-page .fld:has(> select.kh-unit) > select.kh-unit{
  grid-area:unit;
  height:48px !important; min-height:48px !important;
  margin-top:0 !important;
  width:auto !important; min-width:0 !important;
  padding-left:7px !important; padding-right:16px !important;
  font-size:13px !important; color:var(--kh-ink-3) !important;
  /* NO background-position here. The chevron is TWO 5x5 gradient triangles at
     calc(100% - 9px) and calc(100% - 4px); a single-value override collapses both
     layers onto one point and draws a stray mark in the corner instead of an arrow. */
}
.form-page .fld:has(> select.kh-unit) > select.kh-unit:focus{
  color:var(--kh-ink) !important;
}
/* Browsers without :has() keep the stacked layout, which is the CURRENT
   behaviour rather than a broken one. This only tidies it there. */
@supports not selector(:has(*)){
  .form-page select.kh-unit{ margin-top:8px !important; height:40px !important }
}


/* ══ 13 · THE TWO NOTICES THAT OPEN STEP 4 ════════════════════════════════
   Both are inline-styled divs with a 3px teal left bar on a teal wash, so the
   screen opened with two near-identical alert-shaped blocks before she could
   type anything. They do different jobs and now look it:

     · the timing note is the one piece of TEACHING on the screen, so it keeps
       a fill (parchment, the system's panel) and a real reading size.
     · the lab-entry acknowledgement is REQUIRED DISCLOSURE (CLAUDE.md §13,
       "Lab Entry Screen"). Every word is unchanged. It loses the fill and the
       bar and becomes quiet ruled fine print, which is where disclosure
       belongs: present, legible, not competing with the task.

   Teal is spent deliberately here. In the report sage means "at target"; two
   teal-barred panels at the top of the intake dilute that before she ever
   sees a band. */
#step4 .sc > div[style*="var(--teal)"]:not(.lab-entry-disclaimer){
  background:var(--kh-parch) !important;
  border:0 !important; border-left:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  padding:var(--kh-s5) !important;
  margin:0 0 var(--kh-s4) !important;
  font-family:var(--kh-sans) !important;
  font-size:14px !important; line-height:1.62 !important;
  color:var(--kh-ink-2) !important;
}
#step4 .sc > div[style*="var(--teal)"]:not(.lab-entry-disclaimer) strong{
  color:var(--kh-ink) !important; font-weight:540 !important }

#step4 .lab-entry-disclaimer{
  background:transparent !important;
  border:0 !important; border-left:0 !important; border-radius:0 !important;
  border-top:1px solid var(--kh-rule) !important;
  padding:var(--kh-s4) 0 0 !important;
  margin:0 0 var(--kh-s7) !important;
  font-family:var(--kh-sans) !important;
  font-size:12.5px !important; line-height:1.66 !important;
  color:var(--kh-ink-3) !important;
  max-width:74ch;
}

/* the derivation line under the glucose row: metadata, not a footnote in
   italic serif */
.form-page .api-note{
  display:block !important;
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:12px !important; font-weight:400 !important;
  line-height:1.5 !important; color:var(--kh-ink-3) !important;
  margin:var(--kh-s2) 0 0 !important;
}


/* ══ 14 · "ADD THE REST OF THE PANEL" ═════════════════════════════════════
   An optional disclosure control, so it reads as one: a ruled row, not a
   rounded card competing with the fields above it. */
.form-page .kh-more-toggle{
  display:block !important; width:100% !important; text-align:left !important;
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--kh-rule) !important;
  border-bottom:1px solid var(--kh-rule) !important;
  border-radius:0 !important; box-shadow:none !important;
  padding:var(--kh-s4) 0 !important; margin:var(--kh-s6) 0 0 !important;
  cursor:pointer;
  font-family:var(--kh-sans) !important; font-size:15px !important;
  font-weight:540 !important; color:var(--kh-ink) !important;
  transition:color .18s ease !important;
}
.form-page .kh-more-toggle:hover{ color:var(--kh-rust) !important }
.form-page .kh-more-toggle .kh-later-n,
.form-page .kh-more-toggle small,
.form-page .kh-more-toggle span{
  font-weight:400 !important; color:var(--kh-ink-3) !important }
.form-page .kh-more{ padding-top:var(--kh-s6) !important }


/* ══ 15 · THE FOOTER INSIDE THE FLOW ══════════════════════════════════════
   report.html carries its own `#kh-legal-foot` markup, which kept the
   previous era's centred Cormorant lockup. Same footer as every other
   customer-facing page now: left-aligned, two columns, one espresso. */
#kh-legal-foot{
  background:var(--kh-esp) !important;
  border-top:0 !important;
  text-align:left !important;
  padding:var(--kh-s7) var(--kh-gutter) var(--kh-s6) !important;
  color:var(--kh-on-dark-2) !important;
}
#kh-legal-foot > *{ max-width:var(--kh-frame); margin-inline:auto !important }
#kh-legal-foot .brand{
  display:inline-block !important;
  font-family:var(--kh-serif) !important; font-style:normal !important;
  font-size:19px !important; font-weight:480 !important;
  letter-spacing:-.014em !important; color:var(--kh-on-dark) !important;
  text-decoration:none !important; margin:0 0 var(--kh-s3) !important;
  font-variation-settings:"opsz" 18,"wght" 480;
}
#kh-legal-foot .foot-tag{
  font-family:var(--kh-serif) !important; font-style:italic !important;
  font-size:17px !important; font-weight:400 !important;
  letter-spacing:-.012em !important; color:var(--kh-on-dark-2) !important;
  margin:0 0 var(--kh-s5) !important;
}
#kh-legal-foot .foot-links{
  display:flex !important; flex-wrap:wrap !important;
  justify-content:flex-start !important; gap:6px 22px !important;
  margin:0 0 var(--kh-s5) !important;
}
#kh-legal-foot .foot-links a{
  font-family:var(--kh-sans) !important; font-size:12px !important;
  font-weight:450 !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--kh-on-dark-3) !important;
  text-decoration:none !important;
  display:inline-flex !important; align-items:center; min-height:34px;
}
#kh-legal-foot .foot-links a:hover{ color:var(--kh-on-dark) !important }
#kh-legal-foot .foot-copy,
#kh-legal-foot .foot-disc{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:12.5px !important; line-height:1.7 !important;
  color:var(--kh-on-dark-3) !important;
  margin:0 0 var(--kh-s3) !important; max-width:72ch;
}


/* ══ 16 · THE FIELD SURFACE, DECIDED ══════════════════════════════════════
   The intake's own late layer carries `.sc input[type=text].fin, .sc
   select.fin, .sc .fld-row .unit-sel { background:#fff; border-radius:6px }`,
   which ties on specificity with the `.form-page`-scoped rule in section 4 and
   therefore kept winning on some properties. Rather than trade `!important`
   at equal weight, this block states the field surface once at a specificity
   nothing in the page reaches. It is the LAST word on the subject: a value on
   the ivory ground with one rule under it, and no container. */
html body .form-page .sc .fin,
html body .form-page .sc input.fin,
html body .form-page .sc select.fin,
html body .form-page .sc .unit-sel,
html body .form-page .sc select.unit-sel,
html body #step5 .ksp-checkout-field input{
  background:#FFF0 !important;
  background-color:transparent !important;
  border:0 !important;
  border-bottom:1px solid rgba(31,24,16,.24) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
html body .form-page .sc .fin:focus,
html body .form-page .sc select.fin:focus,
html body .form-page .sc .unit-sel:focus,
html body #step5 .ksp-checkout-field input:focus{
  border-bottom-color:var(--kh-rust) !important;
  border-bottom-width:2px !important;
}
/* the caret has to be re-declared here or the background shorthand above
   wipes the one section 4 drew */
html body .form-page .sc select.fin,
html body .form-page .sc select.unit-sel{
  background-image:linear-gradient(45deg,transparent 50%,var(--kh-ink-3) 50%),
                   linear-gradient(135deg,var(--kh-ink-3) 50%,transparent 50%) !important;
  background-position:calc(100% - 9px) calc(50% + 1px),
                      calc(100% - 4px) calc(50% + 1px) !important;
  background-size:5px 5px,5px 5px !important;
  background-repeat:no-repeat !important;
}
/* the auto-calculated field is READ-ONLY, and a dashed rule says so without
   the 40% opacity that made its own label unreadable */
html body .form-page .sc .fin:disabled,
html body .form-page .sc .fin[readonly]{
  border-bottom-style:dashed !important;
  opacity:1 !important;
  color:var(--kh-ink-3) !important;
}
html body #step4 .fld:has(> .fin[readonly]) .flbl,
html body #step4 .fld:has(> .fin:disabled) .flbl{
  opacity:1 !important; color:var(--kh-ink-3) !important }


/* ══ 17 · AFTER THE LINK TAG ══════════════════════════════════════════════
   report.html does not keep all of its CSS in the head. There are further
   <style> blocks in the BODY, after the <link> that loads this file, so those
   rules are later in source order and win every tie on specificity. Anything
   this layer has to take from them is therefore restated here with an extra
   `html body`, which nothing in the page reaches.

   This is the same class of trap as the `nav` element and the `.kh-form`
   wrapper: the rule looked like it should win, and the only way to know it
   did not was to read the computed style on the rendered page. */

/* the required lab-entry acknowledgement: quiet ruled fine print, no fill,
   no 8px card radius. Wording untouched (CLAUDE.md §13). */
html body #step4 .lab-entry-disclaimer{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--kh-rule) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:var(--kh-s4) 0 0 !important;
  margin:0 0 var(--kh-s7) !important;
  font-size:12.5px !important;
  line-height:1.66 !important;
  color:var(--kh-ink-3) !important;
  max-width:74ch !important;
}
/* the timing note: the one piece of teaching on the screen, so it keeps the
   system's panel fill, square */
html body #step4 .sc > div[style*="var(--teal)"]:not(.lab-entry-disclaimer){
  background:var(--kh-parch) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:var(--kh-s5) !important;
  margin:0 0 var(--kh-s4) !important;
}
/* the same two objects on step 0 and elsewhere in the flow */
html body .form-page .step0-noresults,
html body .form-page .guide-note,
html body .form-page .gate-card{
  background:var(--kh-parch) !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
}

/* SECTION SPACING. `.hdiv` is display:none in the page's own late layer, so
   the horizontal rules between "Glucose & Insulin", "Androgens" and
   "Inflammation & Other" have never actually drawn and the section labels
   were left sitting on top of the previous row. The label carries the
   separation itself rather than reviving a divider the page chose to hide. */
html body .form-page .sc .sec-lbl{
  display:block !important; width:100% !important;
  margin:var(--kh-s6) 0 var(--kh-s4) !important;
  padding-top:var(--kh-s4) !important;
  border-top:1px solid var(--kh-rule) !important;
}
html body .form-page .sc .sec-lbl:first-of-type{
  margin-top:0 !important; padding-top:0 !important; border-top:0 !important }

/* the field surface, restated above the body blocks */
html body .form-page .sc input.fin,
html body .form-page .sc select.fin,
html body .form-page .sc .unit-sel{
  background-color:transparent !important;
  border:0 !important;
  border-bottom:1px solid rgba(31,24,16,.24) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
html body .form-page .sc input.fin[readonly],
html body .form-page .sc input.fin:disabled{
  border-bottom-style:dashed !important; opacity:1 !important }


/* ══ 18 · STEP 5, RESTATED ABOVE THE BODY BLOCKS ══════════════════════════
   THE TEAL LEFT BAR GOES. Two objects on the checkout screen carried an
   inline `border-left:3px solid var(--teal)`: the order line and the required
   consent block. In the report, sage is the status vocabulary's "at target".
   Spending it on furniture at the point of sale dilutes the one colour that
   has to carry meaning on the document she is buying. Both objects keep the
   system's parchment panel instead, which is what separates them from the
   ground here. */
html body #step5 .ksp-checkout-consent,
html body #step5 .sc div[style*="var(--teal)"],
html body #step5 .sc div[style*="border-left"]{
  border-left:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:var(--kh-parch) !important;
}
html body #step5 .ksp-checkout-consent{
  padding:var(--kh-s5) !important;
  margin:var(--kh-s5) 0 var(--kh-s4) !important;
}
/* the order line: a ruled row, the price set as an instrument reading */
html body #step5 .sc div[style*="var(--teal)"]{
  padding:var(--kh-s4) var(--kh-s5) !important;
  margin:0 0 var(--kh-s5) !important;
}

/* THE INPUTS ARE NOT ITALIC. The page sets a serif italic placeholder, which
   made "you@example.com" read as a quotation rather than as an example of
   what to type. */
html body #step5 .ksp-checkout-field input,
html body #step5 .ksp-checkout-field input::placeholder{
  font-family:var(--kh-sans) !important;
  font-style:normal !important;
}
html body #step5 .ksp-checkout-field input::placeholder{
  color:var(--kh-ink-3) !important; opacity:.62 !important }

/* the review block keeps its fill but loses the card radius */
html body #step5 .kh-rev{
  background:var(--kh-parch) !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
}


/* ══ 19 · STEP 0, RESTATED ABOVE THE BODY BLOCKS ══════════════════════════ */
html body #step0{ background:var(--kh-ivory) !important }
html body #step0 .step0-wrap{
  display:block !important;
  max-width:var(--kh-frame) !important;
  margin:0 auto !important;
  padding:var(--kh-s7) var(--kh-gutter) var(--kh-s8) !important;
}
html body #step0 .step0-content{
  max-width:none !important; margin:0 !important; padding:0 !important }
/* THE DISPLAY LINE IS ROMAN. The second half was Cormorant italic in the old
   terracotta, which is the previous era's signature move. In the current
   system an accent inside a display line is COLOUR ONLY. */
html body #step0 .step0-h{
  font-family:var(--kh-serif) !important; font-style:normal !important;
  font-weight:430 !important; font-size:clamp(36px,4.4vw,60px) !important;
  line-height:1.02 !important; letter-spacing:-.036em !important;
  color:var(--kh-ink) !important; max-width:17ch !important;
  margin:0 0 var(--kh-s5) !important;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 430;
}
html body #step0 .step0-h em{
  font-style:normal !important; font-weight:inherit !important;
  color:var(--kh-rust) !important;
}
html body #step0 .step0-sub{
  font-family:var(--kh-serif) !important; font-style:normal !important;
  font-weight:390 !important; font-size:18px !important;
  line-height:1.5 !important; letter-spacing:-.008em !important;
  color:var(--kh-ink-2) !important; max-width:50ch !important;
  margin:0 0 var(--kh-s7) !important;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 390;
}
/* "What you'll need" and the resume note: ruled blocks on the ground */
html body #step0 .step0-need{
  background:transparent !important; border:0 !important;
  border-top:1px solid var(--kh-rule) !important; border-radius:0 !important;
  box-shadow:none !important; max-width:none !important;
  padding:var(--kh-s5) 0 0 !important; margin:0 0 var(--kh-s7) !important;
}
html body #step0 .kh-resume{
  font-family:var(--kh-sans) !important; font-size:14px !important;
  line-height:1.6 !important; color:var(--kh-ink-2) !important;
  max-width:56ch !important; margin:0 0 var(--kh-s5) !important;
}
/* the alternative route. No teal bar, no card border, no radius: it is an
   option, not an alert. */
html body #step0 .step0-noresults{
  background:var(--kh-parch) !important;
  border:0 !important; border-left:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  padding:var(--kh-s5) !important; margin:0 0 var(--kh-s7) !important;
  max-width:none !important;
}
html body #step0 .step0-ulta-btn{
  background:transparent !important; color:var(--kh-ink) !important;
  border:1px solid rgba(31,24,16,.3) !important; border-radius:0 !important;
  box-shadow:none !important;
}
html body #step0 .step0-ulta-btn:hover{
  border-color:var(--kh-rust) !important; color:var(--kh-rust) !important }
/* the affiliate disclosure sits with the link it governs, at reading size */
html body #step0 .step0-aff{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:12.5px !important; line-height:1.6 !important;
  color:var(--kh-ink-3) !important; max-width:66ch !important;
  margin:var(--kh-s4) 0 0 !important;
}
/* the reminder field on step 0 uses the flow's own line-under treatment */
html body #step0 input[type=email]{
  background:transparent !important; border:0 !important;
  border-bottom:1px solid rgba(31,24,16,.24) !important;
  border-radius:0 !important; box-shadow:none !important;
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:16px !important; color:var(--kh-ink) !important;
  height:48px !important; padding:8px 2px !important;
}

/* the "Remind me" control beside the email field. It was an italic serif
   terracotta word, which in this system reads as a pull quote rather than as
   something to press. Same quiet secondary control as everywhere else. */
html body #step0 .kh-later-btn{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:14px !important; font-weight:500 !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:var(--kh-ink) !important;
  background:transparent !important; border:0 !important;
  border-bottom:1px solid currentColor !important; border-radius:0 !important;
  box-shadow:none !important;
  padding:0 0 3px !important; margin-left:var(--kh-s4) !important;
  min-height:44px !important; cursor:pointer;
  transition:color .18s ease !important;
}
html body #step0 .kh-later-btn:hover{ color:var(--kh-rust) !important }
html body #step0 .kh-later-n{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:12.5px !important; line-height:1.6 !important;
  color:var(--kh-ink-3) !important;
}


/* ══ 20 · CHOICE CONTROLS, RESTATED ABOVE THE BODY BLOCKS ═════════════════
   Three objects on step 1 and step 2 were still drawing the previous era:
   `.fld-row` (a white 6px-radius box wrapped around a value and its unit),
   `.ck` (a medication row as a white 8px-radius outlined pill) and `.mc` (a
   diagnosis option as a white 8px-radius card). Eight outlined pills stacked
   in a column is a list pretending to be eight buttons.

   A CHECKLIST IS A LIST. `.ck` becomes a ruled row: the box is the control,
   the rule is the separator, and nothing else is drawn.
   A CHOICE BETWEEN FOUR DESCRIBED OPTIONS IS A CARD, so `.mc` stays a block,
   but square, on a hairline, and it fills with parchment when chosen rather
   than glowing. */
html body .form-page .fld-row{
  background:transparent !important; border:0 !important;
  border-radius:0 !important; box-shadow:none !important; padding:0 !important;
}

html body .form-page .ck{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--kh-rule) !important;
  border-radius:0 !important; box-shadow:none !important;
  padding:15px 0 !important; margin:0 !important;
}
html body .form-page .ck-list .ck:first-child{
  border-top:1px solid var(--kh-rule) !important }
html body .form-page .ck-txt{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:15px !important; font-weight:400 !important;
  line-height:1.5 !important; color:var(--kh-ink) !important;
}

html body .form-page .mc{
  background:transparent !important;
  border:1px solid var(--kh-rule) !important;
  border-radius:0 !important; box-shadow:none !important;
  padding:var(--kh-s4) !important;
  text-align:left !important; cursor:pointer;
  transition:border-color .18s ease,background .18s ease !important;
}
html body .form-page .mc:hover{ border-color:var(--kh-ink-3) !important }
html body .form-page .mc.on,
html body .form-page .mc[aria-pressed="true"],
html body .form-page .mc[aria-checked="true"]{
  background:var(--kh-parch) !important;
  border-color:var(--kh-rust) !important;
}
html body .form-page .mc-t{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:15px !important; font-weight:540 !important;
  color:var(--kh-ink) !important; line-height:1.35 !important;
}
html body .form-page .mc-d{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:13px !important; font-weight:400 !important;
  line-height:1.5 !important; color:var(--kh-ink-3) !important;
  margin-top:5px !important;
}
html body .form-page .mc-r{
  border-color:var(--kh-ink-3) !important; border-radius:50% !important;
  box-shadow:none !important }
html body .form-page .mc.on .mc-r,
html body .form-page .mc[aria-checked="true"] .mc-r{
  border-color:var(--kh-rust) !important; background:var(--kh-rust) !important }

/* the primary action sits on the text margin, not on the centre line: it is
   the end of a column of left-aligned fields, not a standalone banner */
html body .form-page .step-nav,
html body .form-page .step-nav .nav-in{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  text-align:left !important; justify-content:flex-start !important;
  padding-left:0 !important; padding-right:0 !important;
}
html body .form-page .cont-btn,
html body .form-page .ksp-continue-btn,
html body .form-page .ksp-checkout-btn,
html body .form-page .step0-cta{
  margin-left:0 !important; margin-right:auto !important;
}


/* ══ 21 · THREE ALIGNMENT DEFECTS ═════════════════════════════════════════

   (a) THE CONTINUE BUTTON WAS NOT IN THE COLUMN. `.step-nav` is a SIBLING of
   `.sshell`, so it spans the full width and knows nothing about the 760px
   measure `.sc` sets. Left-aligning the button therefore pinned it to the
   viewport edge, ~270px left of the fields it belongs to. It now shares the
   same measure as the column above it. (step-nav appears on steps 1, 2 and 3,
   all of which use the 760 measure; step 4 and step 5 carry their own button
   inside `.sc` and are unaffected.) */
html body .form-page .step-nav .nav-in{
  max-width:760px !important;
  margin:0 auto !important;
  padding:0 var(--kh-gutter) !important;
  display:flex !important; justify-content:flex-start !important;
}

/* (b) `.mc-s` IS THE OPTION SUBTITLE, and it was the element actually set in
   italic serif. Section 20 restyled `.mc-d`, which is a different element. */
html body .form-page .mc-s,
html body .form-page .mc-d{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:13px !important; font-weight:400 !important;
  line-height:1.5 !important; color:var(--kh-ink-3) !important;
  margin-top:5px !important;
}

/* (c) THE UNIT SELECT SAT BELOW THE VALUE'S BASELINE. `.fld-row` aligns on
   flex-end, so a select shorter than its input hangs its own rule lower and
   the row shows two underlines at two heights. One height for both. */
html body .form-page .fld-row > .fin,
html body .form-page .fld-row > .unit-sel,
html body .form-page .fld-row > select{
  height:48px !important; min-height:48px !important; margin:0 !important;
  align-self:stretch !important;
}


/* ══ 22 · THE SEAM AT THE PAGE EDGE ═══════════════════════════════════════
   `.page` is capped at 1120px while `<body>` paints #FDFCFA, so every intake
   screen showed two faint vertical bands where the page's ivory stopped and
   the body's near-white carried on. It reads as a rendering fault rather than
   as a design, and it is the kind of thing that only shows up in a full-width
   capture.

   Two changes: the body takes the same ivory, so there is no seam to see even
   if a page is narrower than the viewport; and the intake screens take the
   full width, so their grounds bleed properly and the 760/1080 measures
   centre on the VIEWPORT rather than on a 1120px box inside it. */
html body{ background:var(--kh-ivory) !important }
html body .form-page,
html body #thanks{
  width:100% !important; max-width:none !important;
  margin-inline:0 !important;
}


/* ══ 23 · RESPONSIVE AND TARGET-SIZE FIXES ════════════════════════════════
   From the 1440/1024/768/390 sweep. Everything here is a real defect; the
   sweep's other findings were the system's own 11px tracked labels, the 6px
   ™, and inline links inside sentences, all of which are exempt by design or
   by WCAG 2.5.8's inline exception.

   (a) iOS ZOOMS THE WHOLE PAGE when a focused control is under 16px. Three
   unit selects on step 4 and two on step 1 were 13.5px, so tapping the unit
   beside a lab value jumped the viewport mid-form. 16px on phones. */
@media (max-width:430px){
  html body .form-page select.unit-sel,
  html body .form-page select.kh-unit,
  html body .form-page .fld select,
  html body #step5 .ksp-checkout-field input{
    font-size:16px !important;
  }
  html body .form-page .fld:has(> select.kh-unit) > select.kh-unit{
    min-width:92px !important }
}

/* (b) the marker-definition info button was 17x17 (20x20 on a phone), under
   the 24px floor. The GLYPH stays the same size; the target grows around it. */
html body .form-page .fdef-i{
  min-width:32px !important; min-height:32px !important;
  display:inline-flex !important; align-items:center !important;
  justify-content:center !important;
  margin:-6px 0 -6px -6px !important;   /* grow the target, not the layout */
  padding:0 !important;
  background:transparent !important; border:0 !important;
  color:var(--kh-ink-3) !important; cursor:pointer;
  font-family:var(--kh-sans) !important; font-size:12.5px !important;
  font-style:normal !important; font-weight:540 !important; line-height:1 !important;
}
/* IT NEEDED A RING BACK. Found 2026-09-23.
   Growing the target to 32px also dropped the border, and the border was the only
   thing saying "button". What was left was a bare lowercase i floating in the middle
   of a 32px box, so it read as a stray character sitting a long way after "hsCRP"
   rather than as something to press. The ring is drawn at the GLYPH's size on a
   pseudo-element, so the 32px target the accessibility pass won is untouched. */
html body .form-page .fdef-i{ position:relative !important }
html body .form-page .fdef-i::before{
  content:'' !important; position:absolute !important;
  top:50% !important; left:50% !important;
  width:18px !important; height:18px !important;
  margin:-9px 0 0 -9px !important;
  border:1px solid currentColor !important; border-radius:50% !important;
  opacity:.42 !important; pointer-events:none !important;
}
html body .form-page .fdef-i:hover{ color:var(--kh-rust) !important }
html body .form-page .fdef-i:hover::before,
html body .form-page .fdef-i:focus-visible::before{ opacity:1 !important }
html body .form-page .fdef-i[aria-expanded="true"]{ color:var(--kh-rust) !important }
html body .form-page .fdef-i[aria-expanded="true"]::before{
  opacity:1 !important; background:rgba(174,79,42,.1) !important }

/* (c) the step-2 "skip" control was a 21px-tall text button */
html body .form-page .skip-btn{
  display:inline-flex !important; align-items:center !important;
  min-height:44px !important;
  background:transparent !important; border:0 !important;
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:14px !important; font-weight:450 !important;
  color:var(--kh-ink-2) !important;
  text-decoration:underline !important; text-underline-offset:3px !important;
  cursor:pointer;
}
html body .form-page .skip-btn:hover{ color:var(--kh-rust) !important }

/* (d) the footer's links and wordmark were 34px and 19px tall */
html body #kh-legal-foot .foot-links a{ min-height:44px !important }
html body #kh-legal-foot .brand{
  display:inline-flex !important; align-items:center !important;
  min-height:44px !important }


/* ══ 24 · UNITS ARE SAFETY-RELEVANT TYPE ══════════════════════════════════
   `.fsub` carries the UNIT for every lab field, and it was 11px. On the one
   screen where entering a number against the wrong unit produces a confident
   report built on a value she never had, the unit is not incidental type. The
   intake gate already normalises the three markers whose alternate unit lands
   inside the plausibility band; this is the human half of the same problem.
   12.5px, and the same colour as the rest of the field's supporting text. */
html body .form-page .fsub{
  font-size:12.5px !important;
  line-height:1.35 !important;
  color:var(--kh-ink-3) !important;
}

/* the billing term at the point of sale was an inline-styled 11.5px */
html body #step5 .sc [style*="11.5px"]{ font-size:12.5px !important }

/* THE iOS ZOOM FIX, RESTATED AT THE SPECIFICITY IT HAS TO BEAT. Section 23
   put this in a media query, but a media query adds no specificity, and the
   `:has()` rule in section 12 that sets 13.5px is more specific than the
   plain selector there. Same selector, inside the query. */
@media (max-width:430px){
  html body .form-page .fld:has(> select.kh-unit) > select.kh-unit,
  html body .form-page .fld-row > .unit-sel,
  html body .form-page .fld-row > select,
  html body .form-page select.unit-sel{
    font-size:16px !important;
  }
}


/* ══ 25 · THE ORDER LINE ON A PHONE ═══════════════════════════════════════
   The order row is an inline-styled flex with space-between, which at 390
   left "The Lab Interpretation" and "One-time charge, no recurring billing"
   wrapping to five lines inside half the column while the price sat opposite.
   A price and what it buys stack on a phone. */
@media (max-width:560px){
  html body #step5 .sc div[style*="var(--teal)"]{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:var(--kh-s2) !important;
  }
  html body #step5 [data-kh-price]{ font-size:30px !important }
}


/* ══ 26 · THE CONSENT MEASURE ON A PHONE ══════════════════════════════════
   At 390 the required attestation was setting to a 156px measure: four or
   five words a line, over three paragraphs. A mandatory disclosure that is
   physically tiring to read is a disclosure that gets scrolled past, which
   defeats the point of requiring it.

   Three things were eating the width: a mobile rule padding the checkout
   frame, the panel's own 30px inset on both sides, and the 14px gap. The
   frame's padding goes, the panel's inset halves, and the measure roughly
   doubles. */
@media (max-width:560px){
  html body #step5 .ksp-checkout,
  html body #step5 .ksp-checkout-frame{
    padding-left:0 !important; padding-right:0 !important;
  }
  html body #step5 .ksp-checkout-consent{
    padding:var(--kh-s4) !important;
    gap:12px !important;
  }
  html body #step5 .kh-rev{ padding:var(--kh-s4) !important }
  html body #step5 .sc{ padding-inline:var(--kh-gutter) !important }
}


/* ═══════════════════════════════════════════════════════════════════════════
   27 · THE TWO SCREENS BEFORE THE FORM  ·  #landing and #pick
   ───────────────────────────────────────────────────────────────────────────
   These were missed in the first pass. Both carry `.form-page`, so the room
   and the footer were already right, but every element inside them is named
   `.lp-*` or `.kh-opt-*`, so none of the type rules reached them. The result
   was the worst possible split: the FIRST screen a customer sees at /report
   was still Cormorant italic over a pill button, and the system only appeared
   once she was three steps in.

   WRITTEN AGAINST THE PREMIUM-SITE STUDY in _refine/_website-v2/README.md,
   which is measurements rather than a moodboard. The five rules that decide
   everything below:

     · ONE HEADING RULE. Nishe holds 400 / 1.10 / -0.020 at every level and
       lets SIZE do the hierarchy. So: one weight, one tracking policy, and an
       accent inside a display line is COLOUR, never italic and never a second
       weight.
     · THE NUMBER IS THE HEADLINE. Sofi sets a metric at 100px against a 15px
       caption, 6.7x, in no container at all. So a price is name, then value at
       display scale, then unit subordinate — not "$147" tucked beside body.
     · REPEATED MODULES ARE COLUMNS, NOT TILES. JÜV's four modules share a
       width and a hierarchy and never a height. Equal height is exactly what
       makes content look componentised, which is what the two pricing cards
       on #pick were doing.
     · CONTAINMENT NEEDS AN INFORMATIONAL JOB. There is no generic card. The
       only two containers the grammar allows are a comparison table and an
       input field — and #pick IS a comparison, so it becomes one.
     · COLOUR HOLDS, and a dark moment is earned and clustered. #landing keeps
       its one dark bar and its one photograph; nothing else flips.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the spent gap. Limina uses exactly one 192px pause on a whole homepage, so
   this token appears ONCE per screen and nowhere else. */
html body #landing,html body #pick{ --kh-pause:200px }
@media (max-width:860px){ html body #landing,html body #pick{ --kh-pause:120px } }


/* ══ 27.1 · #landing ══════════════════════════════════════════════════════
   RETIRED. The `.lp-*` markup this section patched was replaced outright on
   2026-09-22; the screen is now composed in `.lpx-*` in section 28 below
   rather than re-skinned. Overriding someone else's composition is what kept
   the page reading as the previous era with new type on it.
   ═══════════════════════════════════════════════════════════════════════ */


/* ══ 27.2 · #pick · A COMPARISON, NOT TWO CARDS ═══════════════════════════
   Two white 8px-radius cards of equal height, side by side, on a near-white
   ground. That is the componentised look the study names outright, and the
   containers were doing no informational work: nothing is being separated,
   because the whole point of the screen is to read the two against each
   other. So it becomes the one container the grammar does allow — a
   comparison — and the rows are free to differ in height. */
html body #pick .kh-pk-h{
  font-family:var(--kh-serif) !important; font-style:normal !important;
  font-weight:430 !important; font-size:clamp(32px,3.6vw,50px) !important;
  line-height:1.04 !important; letter-spacing:-.034em !important;
  color:var(--kh-ink) !important; max-width:18ch !important;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 430;
}
html body #pick .kh-pk-h em{
  font-style:normal !important; color:var(--kh-rust) !important }
html body #pick .kh-pk-sub{
  font-family:var(--kh-serif) !important; font-style:normal !important;
  font-weight:390 !important; font-size:17.5px !important;
  line-height:1.5 !important; letter-spacing:-.008em !important;
  color:var(--kh-ink-2) !important; max-width:44ch !important;
  margin:var(--kh-s4) 0 var(--kh-pause) !important;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 390;
}
html body #pick .kh-pk-menu{
  display:block !important; border-top:1px solid var(--kh-rule) !important }
html body #pick .kh-opt{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  column-gap:clamp(24px,4vw,64px) !important;
  align-items:start !important;
  background:transparent !important;
  border:0 !important; border-bottom:1px solid var(--kh-rule) !important;
  border-radius:0 !important; box-shadow:none !important;
  padding:var(--kh-s6) 0 !important; margin:0 !important;
  width:100% !important; text-align:left !important;
  cursor:pointer; transition:background .18s ease !important;
}
html body #pick .kh-opt:hover{ background:var(--kh-parch) !important }
/* the answer in her words is the eyebrow that labels the row */
html body #pick .kh-opt-ans{
  display:block !important; grid-column:1 !important;
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:11px !important; font-weight:540 !important;
  letter-spacing:.165em !important; text-transform:uppercase !important;
  color:var(--kh-rust) !important; margin:0 0 var(--kh-s3) !important;
}
html body #pick .kh-opt-nm{
  display:block !important; grid-column:1 !important;
  font-family:var(--kh-serif) !important; font-style:normal !important;
  font-weight:430 !important; font-size:clamp(24px,2.5vw,34px) !important;
  line-height:1.14 !important; letter-spacing:-.026em !important;
  color:var(--kh-ink) !important; max-width:22ch !important;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 430;
}
html body #pick .kh-opt-nm em{
  font-style:normal !important; color:var(--kh-ink) !important }
html body #pick .kh-opt-sub{
  display:block !important; grid-column:1 !important;
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:15px !important; font-weight:400 !important;
  line-height:1.6 !important; color:var(--kh-ink-2) !important;
  max-width:46ch !important; margin:var(--kh-s3) 0 0 !important;
}
/* the price takes the second column and the display scale */
html body #pick .kh-opt-price{
  grid-column:2 !important; grid-row:1 / span 3 !important;
  align-self:start !important; text-align:right !important; white-space:nowrap;
  font-family:var(--kh-serif) !important; font-style:normal !important;
  font-weight:420 !important; font-size:clamp(40px,4.4vw,62px) !important;
  line-height:.9 !important; letter-spacing:-.04em !important;
  color:var(--kh-ink) !important;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 420;
  font-variant-numeric:lining-nums tabular-nums;
}
/* "one time" is the unit, so it is subordinate and in the data face */
html body #pick .kh-opt-price small,
html body #pick .kh-opt-price span{
  display:block !important; margin-top:var(--kh-s2) !important;
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:10.5px !important; font-weight:540 !important;
  letter-spacing:.165em !important; text-transform:uppercase !important;
  color:var(--kh-ink-3) !important;
}
html body #pick .kh-inc,
html body #pick .kh-inc-lead{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:15px !important; font-weight:400 !important;
  line-height:1.6 !important; color:var(--kh-ink-2) !important;
}
html body #pick .kh-pk-legal{
  font-family:var(--kh-sans) !important; font-style:normal !important;
  font-size:12.5px !important; line-height:1.66 !important;
  color:var(--kh-ink-3) !important; max-width:64ch !important;
  border-top:1px solid var(--kh-rule) !important;
  padding-top:var(--kh-s4) !important; margin-top:var(--kh-s7) !important;
}
@media (max-width:640px){
  html body #pick .kh-opt{
    grid-template-columns:minmax(0,1fr) !important; row-gap:var(--kh-s4) !important }
  html body #pick .kh-opt-price{
    grid-column:1 !important; grid-row:auto !important; text-align:left !important }
}


/* ══ 27.3 · TWO CORRECTIONS FROM THE RENDER ═══════════════════════════════

   (a) `.kh-opt` has exactly TWO children — one unnamed <span> holding the
   eyebrow, name and blurb, and `.kh-opt-price`. So it is a two-column,
   ONE-ROW grid. Spanning the price across three rows invented two empty
   tracks and left ~115px of dead ground under every option. The `grid-column`
   declarations on the eyebrow/name/blurb were also inert, since those sit
   inside the span rather than being grid children. */
html body #pick .kh-opt{
  grid-template-rows:auto !important;
  row-gap:0 !important;
  align-items:start !important;
  padding:var(--kh-s6) 0 !important;
}
html body #pick .kh-opt-price{ grid-row:1 !important; grid-column:2 !important }
html body #pick .kh-opt-ans,
html body #pick .kh-opt-nm,
html body #pick .kh-opt-sub{ grid-column:auto !important }

/* (b) THE ITALIC IS AN `<i>`, NOT AN `<em>`. Same correction as `.mc-s`
   earlier: the rule named the element the markup does not use, so a
   previous-era italic serif in a bronze that exists nowhere in the palette
   survived the pass. Both elements, everywhere in the flow. */
html body .form-page .kh-opt-nm i,
html body .form-page .kh-opt-nm em,
html body .form-page .lp-h i,
html body .form-page .lp-t i,
html body .form-page .kh-pk-h i,
html body .form-page .s-title i,
html body .form-page .step0-h i,
html body .form-page .ksp-checkout-h i{
  font-style:normal !important;
  font-weight:inherit !important;
  font-family:inherit !important;
}
html body .form-page .kh-opt-nm i,
html body .form-page .kh-opt-nm em{ color:var(--kh-ink) !important }
html body .form-page .lp-h i,
html body .form-page .kh-pk-h i,
html body .form-page .s-title i,
html body .form-page .step0-h i,
html body .form-page .ksp-checkout-h i{ color:var(--kh-rust) !important }





/* ═══════════════════════════════════════════════════════════════════════════
   28 · THE SCREEN BEFORE THE FORM  ·  `.lpx-*`
   ───────────────────────────────────────────────────────────────────────────
   Composed, not overridden. Written against kascadehealth.com's own homepage,
   which is the brand: a rust tracked eyebrow, a two-tone ROMAN headline where
   the second clause carries the colour, a serif deck, a filled rust square
   beside an underlined text link, and a wide serif statement line between
   rooms. Italic Newsreader appears in exactly one role on that site — HER
   voice, the questions she actually types — so it is used here for the
   headline's second clause, which is her question, and nowhere else.
   ═══════════════════════════════════════════════════════════════════════════ */

html body #landing{ background:var(--kh-esp) !important }

/* ── the bar. One quiet way back, and no wordmark. ────────────────────── */
html body .lpx-bar{
  max-width:var(--kh-frame); margin-inline:auto;
  padding:var(--kh-s5) var(--kh-gutter) 0;
}
html body .lpx-back{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--kh-sans); font-size:13px; font-weight:450;
  letter-spacing:0; color:var(--kh-on-dark-3); text-decoration:none;
  transition:color .18s ease;
}
html body .lpx-back:hover{ color:var(--kh-on-dark) }

/* ── the hero. Espresso, with the photograph bleeding off the right trim. ── */
html body .lpx{ background:var(--kh-esp); color:var(--kh-on-dark);
  padding-bottom:var(--kh-s7) }
html body .lpx-hero{
  max-width:var(--kh-frame); margin-inline:auto;
  padding-inline:var(--kh-gutter);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  column-gap:clamp(40px,6vw,104px); align-items:center;
  padding-top:var(--kh-s7);
}
html body .lpx-eye{
  display:block; font-family:var(--kh-sans); font-size:11px; font-weight:540;
  letter-spacing:.165em; text-transform:uppercase; color:var(--kh-rust-lift);
  margin:0 0 var(--kh-s4);
}
html body .lpx-eye--ink{ color:var(--kh-rust) }
html body .lpx-h{
  margin:0; font-family:var(--kh-serif); font-style:normal; font-weight:430;
  font-size:clamp(38px,4.4vw,62px); line-height:1.02; letter-spacing:-.038em;
  color:var(--kh-on-dark); max-width:15ch; text-wrap:balance;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 430;
}
/* HER QUESTION, in the one role the brand gives italic. */
html body .lpx-h em{
  font-style:italic; font-weight:400; color:var(--kh-rust-lift);
  font-variation-settings:"opsz" 18,"wght" 400;
}
html body .lpx-deck{
  margin:var(--kh-s5) 0 0; max-width:42ch;
  font-family:var(--kh-serif); font-weight:390; font-size:18px;
  line-height:1.5; letter-spacing:-.008em; color:var(--kh-on-dark-2);
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 390;
}

/* THE NUMBER IS THE HEADLINE — Sofi's rule. The price takes display scale on
   its own baseline and the terms sit beside it at caption size. */
html body .lpx-buy{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(20px,2.4vw,34px); align-items:start;
  margin:var(--kh-s7) 0 0;
  padding-top:var(--kh-s5); border-top:1px solid var(--kh-rule-d);
}
html body .lpx-amt{
  font-family:var(--kh-serif); font-weight:420;
  font-size:clamp(52px,5.2vw,74px); line-height:.86; letter-spacing:-.042em;
  color:var(--kh-on-dark); font-optical-sizing:none;
  font-variation-settings:"opsz" 18,"wght" 420;
  font-variant-numeric:lining-nums tabular-nums;
}
html body .lpx-terms{
  font-family:var(--kh-sans); font-size:13.5px; font-weight:400;
  line-height:1.62; color:var(--kh-on-dark-3); max-width:38ch;
}
html body .lpx-terms b{ color:var(--kh-on-dark-2); font-weight:540 }

/* the control pair the homepage uses: one filled square, one underlined word */
html body .lpx-act{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--kh-s3) var(--kh-s6); margin:var(--kh-s6) 0 0;
}
html body .lpx-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:56px; padding:16px 38px;
  background:var(--kh-rust); color:#FFF; border:0; border-radius:0;
  box-shadow:none; cursor:pointer;
  font-family:var(--kh-sans); font-size:15px; font-weight:500;
  letter-spacing:.01em; transition:background .18s ease;
}
html body .lpx-cta:hover{ background:var(--kh-rust-deep) }
html body .lpx-cta:hover .kh-arw{ transform:translateX(4px) }
html body .lpx-alt{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--kh-sans); font-size:14px; font-weight:450;
  color:var(--kh-on-dark); text-decoration:underline;
  text-underline-offset:4px; text-decoration-thickness:1px;
}
html body .lpx-alt:hover{ color:var(--kh-rust-lift) }
html body .lpx-note{
  margin:var(--kh-s5) 0 0; font-family:var(--kh-sans); font-size:12.5px;
  line-height:1.66; color:var(--kh-on-dark-3);
}

/* the photograph. ONE grade, in CSS, as the study requires, and it bleeds
   past the trim so the room does not read as a boxed column. */
html body .lpx-ph{
  margin:0;
  margin-right:calc(-1 * (max(0px,(100vw - var(--kh-frame)) / 2) + var(--kh-gutter)));
}
html body .lpx-ph img{
  display:block; width:100%; height:auto; aspect-ratio:1.04;
  object-fit:cover; object-position:52% 46%;
  filter:saturate(.94) brightness(.92); border-radius:0;
}

/* ── what comes back. Parchment, three columns, never a shared height. ─── */
html body .lpx-gets{ background:var(--kh-parch); color:var(--kh-ink);
  padding-block:var(--kh-s8) }
html body .lpx-gets-in{
  max-width:var(--kh-frame); margin-inline:auto; padding-inline:var(--kh-gutter) }
html body .lpx-cols{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(28px,4vw,72px); align-items:start;
  margin-top:var(--kh-s6);
}
html body .lpx-c{ align-self:start }
html body .lpx-cn{
  display:block; font-family:var(--kh-sans); font-size:11px; font-weight:540;
  letter-spacing:.165em; text-transform:uppercase; color:var(--kh-rust);
  margin:0 0 var(--kh-s4);
}
html body .lpx-ct{
  margin:0 0 var(--kh-s3); font-family:var(--kh-serif); font-weight:430;
  font-size:clamp(20px,1.9vw,26px); line-height:1.2; letter-spacing:-.02em;
  color:var(--kh-ink); max-width:18ch;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 430;
}
html body .lpx-cb{
  margin:0; font-family:var(--kh-sans); font-size:15px; line-height:1.6;
  color:var(--kh-ink-2);
}

/* ── the wide statement line. The homepage's own device between rooms. ─── */
html body .lpx-say{ background:var(--kh-ivory); padding-block:var(--kh-s7) }
html body .lpx-say p{
  max-width:var(--kh-frame); margin-inline:auto; padding-inline:var(--kh-gutter);
  font-family:var(--kh-serif); font-weight:430;
  font-size:clamp(24px,2.7vw,38px); line-height:1.16; letter-spacing:-.028em;
  color:var(--kh-ink); text-wrap:balance;
  font-optical-sizing:none; font-variation-settings:"opsz" 18,"wght" 430;
}
html body .lpx-say em{ font-style:normal; color:var(--kh-rust) }

/* `.lpx-disc` is gone from the markup: the footer already carries the same
   disclaimer, and this copy painted an ivory band only as wide as the text
   frame, which left two espresso strips down the page. */

@media (max-width:980px){
  html body .lpx-hero{ grid-template-columns:minmax(0,1fr); row-gap:var(--kh-s6) }
  html body .lpx-ph{ margin-right:calc(-1 * var(--kh-gutter));
    margin-left:calc(-1 * var(--kh-gutter)) }
  html body .lpx-ph img{ aspect-ratio:1.7 }
  html body .lpx-cols{ grid-template-columns:minmax(0,1fr); row-gap:var(--kh-s6) }
  html body .lpx-ct{ max-width:none }
}
@media (max-width:560px){
  html body .lpx-buy{ grid-template-columns:minmax(0,1fr); row-gap:var(--kh-s3) }
  html body .lpx-cta{ width:100% }
}


/* ═══════════════════════════════════════════════════════════════════════════
   29 · THE CHOOSE SCREEN, AND THE FORM, AS ONE ROOM
   ───────────────────────────────────────────────────────────────────────────
   The remaining reason the flow read as a different product from the website
   is that the website's rooms are DARK where the argument is emotional and
   light where the information is dense, and the flow was uniformly pale from
   the moment the hero ended. So the choose screen opens on the same espresso
   the landing hero closes on — colour HOLDS across the seam rather than
   flipping back — and the form itself stays light, because that is where the
   dense information is.

   The other borrowed device is the homepage's marker panel: an ivory plate
   carrying rust micro-labels at 9.5px. That grammar — a tracked rust label
   over two lines of explanation — is what makes the site's data sections read
   as one system, and it is exactly what the intake's own explanatory blocks
   needed instead of grey paragraphs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE CHOOSE SCREEN IS LIGHT, AND THAT IS THE SECOND ANSWER ─────────
   It was briefly espresso, to carry the landing hero's room across the seam.
   Seen in the flow it was wrong, for the reason the grammar already states:
   a dark moment is EARNED AND CLUSTERED, not repeated. The landing hero is
   the one dark moment in this journey — it is where the argument is
   emotional. From the moment she is choosing what to buy and then typing
   twenty lab values, every screen is dense information, and dense
   information belongs on paper. One dark room at the top, then light all the
   way to the report.

   What survives from the dark pass is the part that was actually doing work:
   the comparison structure, and the hover arrow below. */

/* an option row gains an arrow on hover so it reads as a destination, not a
   line of text that happens to be clickable */
html body #pick .kh-opt{ position:relative }
html body #pick .kh-opt::after{
  content:"\2192"; position:absolute; right:0; top:var(--kh-s6);
  font-size:19px; color:var(--kh-rust-lift);
  opacity:0; transform:translateX(-6px);
  transition:opacity .2s var(--kh-ease),transform .2s var(--kh-ease);
}
html body #pick .kh-opt:hover::after{ opacity:1; transform:none }
@media (max-width:640px){ html body #pick .kh-opt::after{ display:none } }


/* ══ 29.1 · THE MARKER-PANEL GRAMMAR, INSIDE THE FORM ═════════════════════
   The homepage explains a signal with an ivory plate carrying rust
   micro-labels. The intake's two explanatory blocks — the cycle-timing note
   on step 4 and the review block on step 5 — are doing the same job and now
   use the same grammar: a plate, a hairline under its title, and tracked rust
   labels rather than bold grey lead-ins. */
html body #step4 .sc > div[style*="var(--teal)"]:not(.lab-entry-disclaimer){
  background:var(--kh-ivory) !important;
  border:1px solid var(--kh-rule) !important;
  padding:var(--kh-s5) !important;
}
html body #step4 .sc > div[style*="var(--teal)"]:not(.lab-entry-disclaimer) strong{
  display:block !important;
  font-family:var(--kh-sans) !important;
  font-size:9.5px !important; font-weight:540 !important;
  letter-spacing:.17em !important; text-transform:uppercase !important;
  color:var(--kh-rust) !important;
  margin:0 0 var(--kh-s3) !important;
  padding-bottom:var(--kh-s3) !important;
  border-bottom:1px solid var(--kh-rule) !important;
}
html body #step5 .kh-rev{
  background:var(--kh-ivory) !important;
  border:1px solid var(--kh-rule) !important;
}
html body #step5 .kh-rev-h{
  font-size:19px !important;
  padding-bottom:var(--kh-s3) !important;
  border-bottom:1px solid var(--kh-rule) !important;
  margin-bottom:var(--kh-s3) !important;
}
/* the consent plate is the one place a FILL still reads better than a
   border: it is an attestation, and it should sit apart from the page */
html body #step5 .ksp-checkout-consent{
  background:var(--kh-parch) !important;
  border:0 !important;
}

/* ══ 29.2 · THE PAPER GRAIN COMES OFF ═════════════════════════════════════
   `.sshell::after` paints a noise texture at opacity .035 with
   mix-blend-mode:multiply on every step. On the previous era's cream it gave
   a printed feel. On the current system it does two things wrong: the
   grammar has no grain in it at all, and on the espresso choose screen the
   multiply left a visible seam where `.sshell` stops and the room carries
   on — two shades of espresso, 2/255 apart, which reads as a rendering fault
   rather than as texture. */
html body .form-page .sshell::after{
  content:none !important; display:none !important; background-image:none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   INTAKE LANDING · THE CANVAS COMES IN · 2026-09-22
   ──────────────────────────────────────────────────────────────────────────
   MEASURED FIRST, at 1440, before any of this:

     .lpx       0 -> 1059   hero, 871px of it, holding 767px of text
     .lpx-gets  1059 -> 1661  = 602px of section around 266px of content:
                168 top + 168 bottom, 56% of the band spent on nothing
     .lpx-say   1661 -> 1958  thesis, set LEFT at x=93 across the full frame

   Nothing here shrinks type, changes a measure, or moves a field. It reduces
   the canvas around content that was already the right size. The steps used
   are the system's own (s5 40 / s6 64 / s7 104), never a new number.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the hero. Three gaps were a step too wide for what they separate. ──── */
html body .lpx{ padding-bottom:var(--kh-s6) }              /* was s7 */
html body .lpx-buy{ margin-top:var(--kh-s6) }              /* was s7 */
html body .lpx-act{ margin-top:var(--kh-s5) }              /* was s6 */

/* ── WHAT COMES BACK. The worst of it: an editorial feature strip should
      read as a band, not as three short blocks adrift in a field. ──────── */
html body .lpx-gets{ padding-block:var(--kh-s6) }          /* was s8, twice */
html body .lpx-cols{ margin-top:var(--kh-s5) }             /* was s6 */

/* ── THE THESIS. It was a full-frame paragraph set flush left at x=93, so it
      read as another body block rather than as the pause between two
      sections. Centred as one text object, on a measure that keeps each
      sentence on its own line, it becomes the reset it was written to be.
      No card, no rule, no decoration: just the sentence, alone. ────────── */
html body .lpx-say p{ max-width:min(880px,100%); text-align:center;
  margin-inline:auto; padding-inline:var(--kh-gutter) }
html body .lpx-say em{ display:block; font-style:normal; color:var(--kh-rust) }

/* ══════════════════════════════════════════════════════════════════════════
   THE TWO OFFERS · 2026-09-22
   ──────────────────────────────────────────────────────────────────────────
   What was actually computing on the row, measured rather than assumed:
     ::after  content "→"  display block     a floating arrow, still live
     ::before width 3px, background #BF6040  a terracotta rail that scaled in
     :hover   background parchment + padding-left shift
   The card itself was already neutral (no radius, no shadow, transparent),
   so what read as cheap was the arrow, the rail and the row sliding sideways
   under the cursor. All three are gone.

   What replaces them is the page's own language. The row is two editorial
   offers separated by hairlines, with the price at display scale in the
   second column. Hover is one thing only: the rule beneath the row takes the
   accent and the offer name goes with it. Nothing moves, nothing lifts,
   nothing fades in.

   SEMANTICS ARE UNTOUCHED. These stay <button>s that call pickProduct(); no
   radio group, no form value, no change to the payload or the flow. The
   current-choice mark is driven by aria-current, which is an ARIA state and
   not data, and it is set from the product the app has already decided.
   ══════════════════════════════════════════════════════════════════════════ */
html body #pick .kh-opt::after,
html body #pick .kh-opt::before{ content:none !important; display:none !important }

html body #pick .kh-opt{
  position:relative !important; background:none !important;
  border:0 !important; border-bottom:1px solid var(--kh-rule) !important;
  border-radius:0 !important; box-shadow:none !important;
  transform:none !important; padding:var(--kh-s6) 0 !important;
  transition:border-color .2s ease !important; cursor:pointer }

/* hover and focus: a rule that answers, and a name that answers with it */
html body #pick .kh-opt:hover{ background:none !important;
  padding-left:0 !important; transform:none !important;
  border-bottom-color:rgba(174,79,42,.55) !important }
html body #pick .kh-opt .kh-opt-nm{ transition:color .2s ease !important }
html body #pick .kh-opt:hover .kh-opt-nm{ color:var(--kh-rust) !important }
html body #pick .kh-opt:focus-visible{
  outline:2px solid var(--kh-rust) !important; outline-offset:8px !important }

/* THE CURRENT CHOICE. Not colour alone: a mark appears in the left margin
   that is simply absent on the option that is not current, and the row's
   rule goes solid accent. Both are legible with colour off. */
html body #pick .kh-opt[aria-current="true"]{
  border-bottom-color:var(--kh-rust) !important }
html body #pick .kh-opt[aria-current="true"] .kh-opt-ans{
  position:relative !important; color:var(--kh-rust) !important }
html body #pick .kh-opt[aria-current="true"] .kh-opt-ans::before{
  content:"" !important; display:block !important; position:absolute !important;
  left:-22px !important; top:.42em !important; width:7px !important;
  height:7px !important; background:var(--kh-rust) !important }
html body #pick .kh-opt[aria-current="true"] .kh-opt-nm{
  color:var(--kh-ink) !important }

/* the opener sat a full 180px above the first offer */
html body #pick .kh-pk-top{ margin-bottom:var(--kh-s6) !important }

/* --kh-pause was 200px, one full major-pause step, sitting between the
   question and the two answers to it. On the homepage that step separates
   whole narrative movements and is spent once a page; here it separates a
   question from its own answers, which is the one place it should not be. s7
   is the section step and is what this actually is. */
html body #landing,html body #pick{ --kh-pause:var(--kh-s7) }
@media (max-width:860px){ html body #landing,html body #pick{ --kh-pause:var(--kh-s6) } }

/* The offer name contains an <i>/<em> that an earlier layer pins to ink with
   !important, so on hover only the first half of the name was changing
   colour. The whole name moves together or it reads as a typo. */
html body #pick .kh-opt:hover .kh-opt-nm i,
html body #pick .kh-opt:hover .kh-opt-nm em{ color:var(--kh-rust) !important }
html body #pick .kh-opt-nm i,html body #pick .kh-opt-nm em{
  transition:color .2s ease !important }

/* The diagnosis group was a bordered box containing four separately bordered
   cells, so every interior line was drawn twice and the group read as a
   table rather than as four choices. The cells keep their own hairline,
   because that hairline is what says "this is a target you can press"; the
   box around them says nothing and is the only outright container left in
   the intake. */
html body .form-page .med-grid{ border:0 !important; overflow:visible !important;
  gap:var(--kh-s2) !important }

/* THE SELECTED CHOICE HAD ONLY ITS RADIO DOT. Measured with transitions off:
   a chosen cell and an unchosen one computed the same background and the same
   border, and the entire difference was a 16px dot. That is too quiet for the
   answer she has to be sure of, and several older layers were fighting over
   this selector. One statement, at a specificity nothing else in the file
   reaches, and it gives the state three cues rather than one: the ground
   lifts to parchment, the rule takes the accent, and the label goes to full
   ink. Colour is never the only signal. */
html body .form-page .med-grid .mc.on,
html body .form-page .med-grid .mc[aria-checked="true"]{
  background:var(--kh-parch) !important;
  border-color:var(--kh-rust) !important;
  box-shadow:none !important }
html body .form-page .med-grid .mc.on .mc-t,
html body .form-page .med-grid .mc.on .mc-h{ color:var(--kh-ink) !important }
html body .form-page .med-grid .mc:focus-visible{
  outline:2px solid var(--kh-rust) !important; outline-offset:3px !important }