/* =====================================================================
   Iron & Aura — Root Cause Intake Form
   Brand system extracted from the client's own document:
   brass gold #C9A84C · charcoal #0D0D0D/#111 · cream #FFFBF0 · grey #888
   ===================================================================== */

:root{
  --ink:        #111111;
  --ink-soft:   #3a3a3a;
  --charcoal:   #0D0D0D;
  --gold:       #C9A84C;
  --gold-deep:  #A6832F;
  --gold-ink:   #7A5C00;
  --cream:      #FFFBF0;
  --cream-2:    #F9F6EF;
  --paper:      #FBFAF7;
  --surface:    #FFFFFF;
  --line:       #E7E2D6;
  --line-soft:  #EFEBE1;
  --grey:       #7c7873;
  --grey-2:     #a49f97;
  --alert:      #C0392B;
  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(17,17,17,.04), 0 12px 40px -24px rgba(17,17,17,.25);
  --maxw:       660px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* subtle grain-free warm vignette behind the card */
.ia-bg{
  min-height:100dvh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(201,168,76,.08), transparent 60%),
    var(--paper);
  padding: 28px 18px 64px;
}

/* ---------- Header ---------- */
.ia-header{ max-width:var(--maxw); margin:0 auto 20px; text-align:center; }
.ia-logo-wrap{
  background:var(--charcoal); border-radius:var(--radius);
  padding:26px 24px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
}
.ia-logo-wrap img{ width:min(320px,72%); height:auto; display:block; }
.ia-tagline{
  margin:16px 4px 0; color:var(--grey); font-size:13.5px; letter-spacing:.02em;
}
.ia-tagline b{ color:var(--gold-ink); font-weight:600; }

/* ---------- Card shell ---------- */
.ia-card{
  max-width:var(--maxw); margin:0 auto; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:18px; box-shadow:var(--shadow);
  overflow:clip;
}

/* ---------- Intro / how-to (Step 1 · Welcome) ---------- */
.ia-step.ia-step-intro{ padding:30px 30px 8px; }
.ia-step-intro .ia-kicker{ margin:0 0 12px; }
.ia-intro-h1{
  font-family:var(--serif); font-weight:560; font-size:30px; line-height:1.12;
  letter-spacing:-.01em; margin:0 0 14px;
}
.ia-lede{ color:var(--ink-soft); font-size:16.5px; margin:0 0 22px; }
.ia-howto{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin:0 0 6px;
}
.ia-howto h2{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em;
  font-size:12px; color:var(--gold-ink); margin:0 0 12px; font-weight:700;
}
.ia-howto ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.ia-howto li{ position:relative; padding-left:26px; font-size:14.5px; color:var(--ink-soft); }
.ia-howto li::before{ content:"✦"; position:absolute; left:0; top:0; color:var(--gold); }
.ia-howto .fineprint{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);
  font-size:13px; color:var(--grey); padding-left:0; }
.ia-howto .fineprint::before{ content:none; }
.ia-time{ display:inline-flex; align-items:center; gap:7px; margin:16px 2px 4px;
  font-size:13px; color:var(--grey); }
.ia-time svg{ width:15px; height:15px; stroke:var(--gold-deep); }

/* ---------- Progress ---------- */
.ia-progress{ position:sticky; top:0; z-index:5; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.1) blur(6px); border-bottom:1px solid var(--line-soft);
  padding:14px 30px; display:none; }
.ia-progress.is-on{ display:block; }
.ia-progress-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px; }
.ia-progress-step{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); font-weight:600; }
.ia-progress-pct{ font-size:12px; color:var(--gold-ink); font-weight:700; font-variant-numeric:tabular-nums; }
.ia-rail{ height:4px; background:var(--line-soft); border-radius:99px; overflow:hidden; }
.ia-rail-fill{ height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold));
  transition:width .45s cubic-bezier(.22,.61,.36,1); }

/* ---------- Steps ----------
   FAIL-OPEN, and this is deliberate. Every step is visible by DEFAULT, so with
   no working JavaScript the page is simply one long, ordinary, fully usable
   form that posts normally. Only once iron-aura.js has successfully started
   does <body> gain .ia-wizard and the seven-step experience take over.

   The previous behaviour was the reverse (.ia-step{display:none} + a <noscript>
   rescue). That failed hard inside in-app browsers: <noscript> does NOT apply
   when JavaScript is enabled but merely blocked, throttled or throwing — so a
   visitor got a blank card with no fields and no submit button, which is what
   TikTok traffic was reporting. Do not re-invert these rules. */
.ia-steps{ padding:8px 0 0; }
.ia-step{ display:block; padding:22px 30px 6px; }
.ia-wizard .ia-step{ display:none; }
.ia-wizard .ia-step.is-active{ display:block; animation:iaIn .38s cubic-bezier(.22,.61,.36,1) both; }
@keyframes iaIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

/* Fallback mode only: reveal everything the wizard would have progressively
   disclosed, so no question is unreachable. The server re-checks conditional
   logic on POST, so showing extra sections here is safe. */
body:not(.ia-wizard) .ia-sec[data-show-if],
body:not(.ia-wizard) .ia-field[data-show-when],
body:not(.ia-wizard) .ia-specify[data-specify-for]{ display:block; }

/* Nav belongs to the wizard; the plain submit button belongs to fallback mode. */
body:not(.ia-wizard) #ia-nav{ display:none; }
.ia-wizard #ia-noscript-submit{ display:none; }
body:not(.ia-wizard) #ia-progress{ display:none; }

/* Section header — the signature device: large gold numeral + title */
.ia-sec-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:8px; }
.ia-sec-num{
  font-family:var(--serif); font-weight:340; font-size:46px; line-height:.82;
  color:var(--gold); font-feature-settings:"lnum" 1; letter-spacing:-.02em;
  min-width:64px;
}
.ia-sec-titles{ padding-top:4px; }
.ia-kicker{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey-2); font-weight:700; margin:0 0 4px; }
.ia-sec-title{ font-family:var(--serif); font-weight:540; font-size:24px; line-height:1.12;
  letter-spacing:-.01em; margin:0; }
.ia-badge{ display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  background:var(--cream); border:1px solid var(--gold); color:var(--gold-ink);
  padding:5px 11px; border-radius:99px; font-size:11.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; }
.ia-badge svg{ width:13px; height:13px; }
.ia-sec-intro{ background:var(--cream-2); border-left:3px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:14px 16px; margin:16px 0 4px;
  font-size:14.5px; color:var(--ink-soft); }

/* Multiple sections share one page — separate them clearly */
.ia-sec + .ia-sec{ margin-top:36px; padding-top:32px; border-top:1px solid var(--line); }
.ia-sec[hidden]{ display:none; }

/* Deep-dive page: explains why the sections below appeared */
.ia-deepdive-intro{ display:flex; gap:12px; align-items:flex-start;
  background:var(--cream); border:1px solid var(--gold); color:var(--gold-ink);
  border-radius:var(--radius); padding:15px 17px; margin:0 0 26px; font-size:14px; line-height:1.5; }
.ia-deepdive-intro svg{ width:18px; height:18px; flex:0 0 auto; margin-top:1px; stroke:var(--gold-deep); }
.ia-deepdive-intro b{ color:var(--ink); font-weight:700; }

/* Consent (Step 7) */
.ia-consent{ margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }
.ia-consent .ia-choice{ background:var(--cream); border-color:var(--gold-deep); align-items:center; }
.ia-consent .ia-choice-text{ font-size:14px; color:var(--ink); }
.ia-consent.has-error .ia-choice{ border-color:var(--alert); box-shadow:0 0 0 3px rgba(192,57,43,.10); }

/* ---------- Fields ---------- */
.ia-field{ padding:20px 0; border-top:1px solid var(--line-soft); }
.ia-field:first-of-type{ border-top:0; }
.ia-q{ display:block; font-size:16.5px; font-weight:600; color:var(--ink); margin:0 0 3px; letter-spacing:-.005em; }
.ia-req{ color:var(--alert); font-weight:700; }
.ia-help{ margin:2px 0 12px; font-size:13.5px; color:var(--grey); font-style:italic; }
.ia-note{ margin:20px 0 2px; padding:12px 15px; background:var(--cream); border:1px dashed var(--gold-deep);
  border-radius:var(--radius-sm); font-size:13.5px; color:var(--gold-ink); font-style:italic; }

/* Text inputs */
.ia-input{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 14px; transition:border-color .15s, box-shadow .15s, background .15s;
}
.ia-input::placeholder{ color:var(--grey-2); }
.ia-input:hover{ border-color:#d9d2c3; }
.ia-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,168,76,.16); background:#fffefb; }
.ia-textarea{ resize:vertical; min-height:104px; line-height:1.5; }
.ia-specify{ margin-top:10px; }

/* File upload (blood-test results) */
.ia-file-input{
  width:100%; font-family:var(--sans); font-size:14.5px; color:var(--ink);
  background:var(--surface); border:1.5px dashed var(--gold-deep); border-radius:var(--radius-sm);
  padding:11px 12px; cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s;
}
.ia-file-input:hover{ border-color:var(--gold); background:#fffefb; }
.ia-file-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,168,76,.16); }
.ia-file-input::file-selector-button{
  font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--gold); background:var(--charcoal); border:0; border-radius:8px;
  padding:9px 15px; margin-right:14px; cursor:pointer; transition:background .15s, transform .05s;
}
.ia-file-input::file-selector-button:hover{ background:#000; }
.ia-file-input::file-selector-button:active{ transform:translateY(1px); }
/* Legacy WebKit fallback for the button pseudo-element */
.ia-file-input::-webkit-file-upload-button{
  font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--gold); background:var(--charcoal); border:0; border-radius:8px;
  padding:9px 15px; margin-right:14px; cursor:pointer;
}
.ia-file-msg{ margin:10px 0 0; font-size:13px; font-weight:600; }
.ia-file-msg.is-ok{ color:var(--gold-ink); }
.ia-file-msg.is-bad{ color:#C0392B; }

/* Choice cards (radio + checkbox) */
.ia-options{ display:grid; gap:9px; }
.ia-choice{
  position:relative; display:flex; align-items:flex-start; gap:13px;
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px; cursor:pointer; background:var(--surface);
  transition:border-color .14s, background .14s, box-shadow .14s, transform .04s;
}
.ia-choice:hover{ border-color:var(--gold-deep); background:#fffdf7; }
.ia-choice:active{ transform:translateY(.5px); }
.ia-choice input{ position:absolute; opacity:0; width:1px; height:1px; }
.ia-choice-mark{
  flex:0 0 auto; width:22px; height:22px; margin-top:1px; border:2px solid #cfc8b7;
  background:var(--surface); transition:all .14s; position:relative;
}
.ia-choice input[type=radio] ~ .ia-choice-mark{ border-radius:50%; }
.ia-choice input[type=checkbox] ~ .ia-choice-mark{ border-radius:6px; }
.ia-choice-text{ font-size:15px; color:var(--ink-soft); line-height:1.4; padding-top:1px; }
/* checked state */
.ia-choice input:checked ~ .ia-choice-mark{ border-color:var(--gold-deep); background:var(--gold); }
.ia-choice input[type=radio]:checked ~ .ia-choice-mark::after{
  content:""; position:absolute; inset:0; margin:auto; width:8px; height:8px; border-radius:50%; background:var(--charcoal);
}
.ia-choice input[type=checkbox]:checked ~ .ia-choice-mark::after{
  content:""; position:absolute; left:6px; top:2px; width:6px; height:11px;
  border:solid var(--charcoal); border-width:0 2.5px 2.5px 0; transform:rotate(42deg);
}
.ia-choice:has(input:checked){ border-color:var(--gold); background:var(--cream); box-shadow:0 0 0 3px rgba(201,168,76,.12); }
.ia-choice:has(input:checked) .ia-choice-text{ color:var(--ink); font-weight:500; }
/* keyboard focus */
.ia-choice input:focus-visible ~ .ia-choice-mark{ box-shadow:0 0 0 4px rgba(201,168,76,.28); }

/* Scale 1–10 */
.ia-scale{ display:grid; grid-template-columns:repeat(10,1fr); gap:7px; }
.ia-scale-btn{ position:relative; }
.ia-scale-btn input{ position:absolute; opacity:0; width:1px; height:1px; }
.ia-scale-btn span{
  display:flex; align-items:center; justify-content:center; height:46px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:10px; font-weight:600; font-size:15px;
  color:var(--ink-soft); background:var(--surface); transition:all .13s; font-variant-numeric:tabular-nums;
}
.ia-scale-btn:hover span{ border-color:var(--gold-deep); background:#fffdf7; }
.ia-scale-btn input:checked ~ span{ background:var(--charcoal); color:var(--gold); border-color:var(--charcoal); }
.ia-scale-btn input:focus-visible ~ span{ box-shadow:0 0 0 4px rgba(201,168,76,.28); }
.ia-scale-anchors{ display:flex; justify-content:space-between; gap:16px; margin-top:9px; }
.ia-scale-anchors span{ font-size:12px; color:var(--grey); font-style:italic; max-width:46%; }
.ia-scale-anchors span:last-child{ text-align:right; }

/* Error */
.ia-error{ margin:9px 0 0; font-size:13px; color:var(--alert); font-weight:600; }
.ia-field.has-error .ia-input{ border-color:var(--alert); box-shadow:0 0 0 4px rgba(192,57,43,.10); }
.ia-field.has-error .ia-options .ia-choice{ border-color:#e6b6b0; }
.ia-field.has-error .ia-scale-btn span{ border-color:#e6b6b0; }

/* ---------- Nav ---------- */
.ia-nav{ display:flex; align-items:center; gap:12px; padding:16px 30px 26px; }
.ia-btn{
  font-family:var(--sans); font-weight:650; font-size:15.5px; letter-spacing:.01em;
  border-radius:12px; padding:14px 22px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .05s, box-shadow .16s, background .16s, border-color .16s; white-space:nowrap;
}
.ia-btn:active{ transform:translateY(1px); }
.ia-btn-primary{ background:var(--charcoal); color:var(--gold); margin-left:auto;
  box-shadow:0 10px 24px -12px rgba(17,17,17,.6); }
.ia-btn-primary:hover{ background:#000; box-shadow:0 12px 28px -12px rgba(17,17,17,.7); }
.ia-btn-primary .arrow{ display:inline-block; margin-left:8px; transition:transform .16s; }
.ia-btn-primary:hover .arrow{ transform:translateX(3px); }
.ia-btn-ghost{ background:transparent; color:var(--ink-soft); border-color:var(--line); }
.ia-btn-ghost:hover{ border-color:var(--gold-deep); color:var(--ink); background:#fffdf7; }
.ia-btn-ghost[hidden]{ display:none; }
.ia-btn-submit{ background:var(--gold); color:var(--charcoal); margin-left:auto;
  box-shadow:0 12px 28px -12px rgba(201,168,76,.9); }
.ia-btn-submit:hover{ background:var(--gold-deep); color:#fff; }
.ia-btn:disabled{ opacity:.6; cursor:progress; }

/* ---------- Footer / legal ---------- */
.ia-foot{ max-width:var(--maxw); margin:22px auto 0; text-align:center;
  font-size:12px; color:var(--grey-2); line-height:1.6; padding:0 8px; }
.ia-foot b{ color:var(--grey); font-weight:600; }

/* ---------- Thank you ---------- */
.ia-thanks{ text-align:center; padding:56px 30px 60px; animation:iaIn .5s ease both; }
.ia-thanks .seal{ width:66px; height:66px; margin:0 auto 20px; border-radius:50%;
  background:var(--charcoal); display:flex; align-items:center; justify-content:center; }
.ia-thanks .seal svg{ width:32px; height:32px; stroke:var(--gold); }
.ia-thanks h2{ font-family:var(--serif); font-weight:560; font-size:28px; margin:0 0 12px; letter-spacing:-.01em; }
.ia-thanks p{ color:var(--ink-soft); font-size:16px; max-width:46ch; margin:0 auto 10px; }
.ia-thanks .sig{ margin-top:22px; font-family:var(--serif); font-size:18px; color:var(--gold-ink); }
.ia-thanks .loc{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-2); margin-top:2px; }

/* ---------- Validation summary toast ---------- */
.ia-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--charcoal); color:#fff; padding:13px 20px; border-radius:12px; font-size:14px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:.3s; z-index:50;
  border:1px solid rgba(201,168,76,.4); max-width:calc(100vw - 32px); text-align:center; }
.ia-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }
.ia-toast b{ color:var(--gold); }

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .ia-bg{ padding:16px 12px 48px; }
  .ia-step,.ia-progress,.ia-nav{ padding-left:20px; padding-right:20px; }
  .ia-step-intro{ padding-left:20px; padding-right:20px; }
  .ia-intro-h1{ font-size:26px; }
  .ia-sec-num{ font-size:38px; min-width:52px; }
  .ia-sec-title{ font-size:21px; }
  .ia-scale{ grid-template-columns:repeat(5,1fr); }
  .ia-nav{ position:sticky; bottom:0; background:linear-gradient(to top, var(--surface) 72%, transparent);
    padding-top:14px; }
  .ia-btn{ padding:13px 18px; font-size:15px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}