/* The website design system (assets/css/styles.css) loads BEFORE this file and
   owns the palette, type scale, header, drawer, footer and button base. The
   --rc-* names below are kept as aliases onto those tokens so the pre-consultation's
   own components keep working, without maintaining a second set of values that
   can drift out of sync with the site. See INTEGRATION.md. */
  :root{
    --rc-bg:var(--cream); --rc-bg-alt:var(--cream-3); --rc-card:var(--cream-2);
    --rc-ink:var(--ink); --rc-ink-soft:var(--muted);
    --rc-primary:var(--forest); --rc-primary-light:var(--forest-2);
    --rc-accent:var(--clay); --rc-accent-soft:var(--peach);
    --rc-sage:#6B7A4F; --rc-danger:#A6503F; --rc-danger-soft:#F3E2DD;
    --rc-line:var(--line); --rc-white:var(--white);

    /* Reading column. Narrower than the site's 1200px --maxw because a form is
       read one question at a time, but wide enough to stop feeling boxed in. */
    /* 860px keeps the card's inner text wrapping at roughly the same measure the
       marketing pages use (~700px of running text), so a paragraph here is the same
       length as a paragraph anywhere else on the site. Callouts and grids all share
       this one edge rather than each capping at its own width, which reads ragged. */
    --rc-col:860px;
    --rc-measure:68ch;

    /* Left progress rail. rail + gap must stay under 284px: the site's .wrap caps
       content at 1144px (1200 - 2x28 padding), so 860 of card leaves exactly that
       much for the rail beside it. At 284 the card still gets its full reading
       width on a 1200px-or-wider viewport; go over and the card is what shrinks.
       Below the 1120px breakpoint the panel goes back above the card and the
       column narrows to --rc-col, so the card never pays for the rail. */
    --rc-rail:240px;
    --rc-rail-gap:44px;
  }

  /* ---------- Page shell ----------
     Vertical rhythm matches the site's section padding rather than the tighter
     spacing the pre-consultation used when it was a standalone page. */
  .pre-consultation-main{ padding:clamp(24px,4vw,48px) 0 clamp(48px,7vw,88px); }
  .pre-consultation-col{ max-width:var(--rc-col); margin:0 auto; }
  /* Pills need a real gap; the whitespace between inline buttons is not enough
     once they have borders. */
  #saveProgressRow{ display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:var(--space-sm); }

  /* ---------- Page heading ----------
     Persistent page title above the form, in the site's page-hero idiom. Compact
     while answering questions; full hero scale on the welcome screen, where it is
     the page's own headline and the content below it is not boxed at all. */
  .pre-consultation-hero{ margin:0 0 var(--space-lg); }
  .pre-consultation-hero h1{ font-family:'Newsreader',Georgia,serif; font-optical-sizing:auto; font-weight:500; font-size:clamp(1.45rem,2vw,1.75rem); line-height:1.15; letter-spacing:-.01em; color:var(--rc-ink); margin:0; }
  .pre-consultation-hero .sub{ font-size:1.18rem; color:var(--rc-ink-soft); line-height:1.55; max-width:54ch; margin:18px 0 0; }
  body[data-step="welcome"] .pre-consultation-hero{ margin-bottom:var(--space-xl); }
  body[data-step="welcome"] .pre-consultation-hero h1{ font-size:clamp(2.2rem,4.4vw,3.4rem); max-width:22ch; }
  /* Welcome is a page, not a card: the same content, unboxed, sitting on the page
     surface like any other Root Cause landing page. */
  body[data-step="welcome"] #card{ background:none; border:none; box-shadow:none; padding:0; animation:none; border-radius:0; }

  /* ---------- Chrome modes ----------
     Full site navigation on the welcome and closing screens, where the patient
     is deciding whether to start or has finished. Slimmed to logo + drawer while
     they are answering questions, so the site's own booking CTA does not compete
     with the pre-consultation's booking flow mid-form. renderRootProgress sets the
     attribute; see ui/shell.js. */
  body[data-chrome="form"] .nav-links,
  body[data-chrome="form"] .nav-actions .btn,
  body[data-chrome="form"] .site-footer,
  body[data-chrome="form"] rc-footer,
  body[data-chrome="form"] .float-pay{ display:none; }
  body[data-chrome="form"] .hamburger{ display:flex; }

  .root-progress{ margin-bottom:var(--space-lg); background:rgba(255,253,249,.72); border:1px solid var(--rc-line); border-radius:16px; padding:var(--space-md) var(--space-md) var(--space-sm); }
  .progress-heading{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:13px; }
  .root-label{ display:flex; justify-content:space-between; font-size:.85rem; color:var(--rc-ink-soft); margin-top:2px; font-weight:500; flex-wrap:wrap; gap:4px; }
  .root-label b{ color:var(--rc-primary); font-weight:600; }
  .savings-meter{ display:grid; grid-template-columns:auto auto; column-gap:5px; align-items:baseline; text-align:right; flex:none; color:var(--rc-ink-soft); }
  .savings-label{ grid-column:1 / -1; font-size:10.5px; font-weight:700; letter-spacing:.03em; }
  .savings-meter strong{ color:var(--rc-primary); font-family:'Newsreader',Georgia,serif; font-size:24px; line-height:1; }
  .savings-meter #savingsText{ font-size:11px; }
  .milestones{ display:grid; grid-template-columns:repeat(6,1fr); gap:5px; position:relative; }
  .milestone{ min-width:0; border:0; border-radius:10px; background:transparent; color:var(--rc-ink-soft); padding:6px 4px; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:10px; line-height:1.2; }
  .milestone:disabled{ cursor:default; opacity:1; }
  .milestone-number{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--rc-line); background:var(--rc-card); font-weight:700; }
  .milestone.is-reached .milestone-number{ border-color:var(--rc-accent); color:var(--rc-accent); }
  .milestone.is-current{ background:#F2F6F3; color:var(--rc-primary); font-weight:700; }
  .milestone.is-current .milestone-number{ background:var(--rc-primary); border-color:var(--rc-primary); color:#fff; }
  .milestone:not(:disabled):hover{ background:var(--rc-bg-alt); }

  /* ---------- Left progress rail (wide screens only) ----------
     Everything above is the narrow-screen layout: progress panel above the card,
     milestones in a 6-across row. From 1120px the same markup becomes a sticky
     vertical stepper to the left of the card. Scoped to min-width so there is no
     second set of rules to unwind on mobile. 1120 is the floor at which the card
     still clears ~780px beside a 284px rail; below it the stacked layout reads
     better than a squeezed two-column one. */
  @media (min-width:1120px){
    /* .has-rail, not .pre-consultation-col on its own: submission-confirm.html and
       thank-you.html share the column class but have no rail, and widening them just
       stretched their cards past the 860px reading measure. The extra width is opt-in
       for the one page that has something to put in it. */
    .pre-consultation-col.has-rail{ max-width:calc(var(--rc-col) + var(--rc-rail) + var(--rc-rail-gap)); }
    .pre-consultation-body{ display:grid; grid-template-columns:var(--rc-rail) minmax(0,1fr); gap:var(--rc-rail-gap); align-items:start; }
    /* .site-header is sticky at 84px (.nav has a fixed height in both chrome
       modes), so the rail parks just below it rather than under it. Generous
       vertical padding, but sides stay at --space-md so the extra rail width goes
       to the milestone labels rather than back into the gutter. */
    .root-progress{ position:sticky; top:calc(84px + var(--space-lg)); margin-bottom:0; padding:var(--space-lg) var(--space-md); }

    /* The heading stacks instead of splitting left/right: step counter, then the
       savings meter below its own rule, both left-aligned to the milestone list. */
    .progress-heading{ display:block; margin-bottom:var(--space-lg); }
    .root-label{ display:block; margin-top:0; }
    .root-label > span:last-child{ display:block; margin-top:3px; }
    /* Flow layout, not the heading's 2-column grid: .savings-label spans both
       columns, so at rail width its own length sizes them and leaves a gap
       between "$0" and "of $100". Inline children give the amount and its total
       a single tight baseline instead. */
    .savings-meter{ display:block; text-align:left; margin-top:var(--space-md); padding-top:var(--space-md); border-top:1px solid var(--rc-line); }
    .savings-label{ display:block; letter-spacing:.04em; margin-bottom:3px; }
    .savings-meter #savingsText{ margin-left:5px; }

    /* One milestone per row: number and label side by side, labels always shown
       (174px of label room fits every SECTIONS label unwrapped, the longest being
       "History & goals"). */
    .milestones{ grid-template-columns:1fr; gap:4px; }
    .milestone{ flex-direction:row; align-items:center; justify-content:flex-start; gap:11px; text-align:left; padding:9px 10px; font-size:13px; }
    .milestone-number{ flex:none; width:26px; height:26px; }
    .milestone-label{ min-width:0; }

    /* Welcome is a full-width page hero with no progress panel at all, so it keeps
       the narrow single column. renderRootProgress sets [hidden] on the panel. */
    body[data-step="welcome"] .pre-consultation-col.has-rail{ max-width:var(--rc-col); }
    body[data-step="welcome"] .pre-consultation-body{ display:block; }
  }

  .card{ background:var(--rc-card); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(24px,3.4vw,44px) clamp(20px,3vw,40px); border:1px solid var(--rc-line); animation:rise .28s ease; }
  @keyframes rise{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

  /* .eyebrow is inherited from the site stylesheet unchanged (.78rem, .22em
     tracking, clay) so section labels here read identically to every other page. */
  .step-title{ font-family:'Newsreader',Georgia,serif; font-optical-sizing:auto; font-weight:500; font-size:clamp(1.6rem,2.5vw,2.05rem); line-height:1.14; letter-spacing:-.01em; margin:0 0 var(--space-sm); color:var(--rc-primary); }
  .step-sub{ color:var(--rc-ink-soft); font-size:1.04rem; line-height:1.65; margin:0 0 var(--space-lg); }
  /* Only the two longest running-text blocks take a measure cap. Callouts, grids
     and tables fill the column so every element shares the same left and right edge. */
  .step-sub, .welcome-points{ max-width:var(--rc-measure); }

  fieldset{ border:none; padding:0; margin:0 0 var(--space-xl); }
  legend{ font-weight:600; font-size:1.02rem; line-height:1.45; margin-bottom:var(--space-sm); color:var(--rc-ink); }
  .req{ color:var(--rc-danger); font-weight:700; }
  details.why{ margin:-2px 0 12px; }
  details.why summary{ font-size:.88rem; color:var(--rc-sage); cursor:pointer; font-weight:600; list-style:none; }
  details.why summary::-webkit-details-marker{ display:none; }
  details.why summary::before{ content:"Why we ask "; }
  details.why p{ font-size:.88rem; color:var(--rc-ink-soft); margin:6px 0 0; line-height:1.5; }

  /* Concierge first/second call preference. Two stacked day+time chip grids run
     to about two phone screens, so each collapses; the summary carries the
     current pick, which is what makes a shut panel readable at a glance. */
  .pref-acc{ border:1.5px solid var(--rc-line); border-radius:var(--radius-sm); background:var(--rc-white); margin:0 0 var(--space-sm); }
  .pref-acc summary{ display:flex; align-items:center; gap:var(--space-sm); padding:15px 17px; min-height:56px; cursor:pointer; list-style:none; font-weight:600; color:var(--rc-ink); }
  .pref-acc summary::-webkit-details-marker{ display:none; }
  .pref-acc summary:focus-visible{ outline:2px solid var(--rc-primary-light); outline-offset:2px; border-radius:var(--radius-sm); }
  .pref-acc-v{ margin-left:auto; font-weight:500; font-size:.92rem; color:var(--rc-primary); text-align:right; }
  .pref-acc-v.empty{ color:var(--rc-ink-soft); font-style:italic; }
  .pref-acc-chev{ width:18px; height:18px; flex:none; color:var(--rc-ink-soft); transition:transform .15s; }
  .pref-acc[open] .pref-acc-chev{ transform:rotate(180deg); }
  .pref-acc[open] summary{ border-bottom:1px solid var(--rc-line); }
  .pref-acc-body{ padding:16px 17px 18px; }
  .pref-acc-body .step-sub{ margin-bottom:var(--space-md); font-size:.95rem; }

  .option-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-sm); }
  .opt{ position:relative; border:1.5px solid var(--rc-line); border-radius:var(--radius-sm); padding:15px 17px; min-height:56px; cursor:pointer; font-size:1rem; line-height:1.45; font-weight:500; transition:border-color .15s, background .15s; background:var(--rc-white); display:flex; align-items:center; gap:var(--space-sm); }
  .opt:hover{ border-color:var(--rc-primary-light); }
  .opt input{ position:absolute; opacity:0; width:0; height:0; }
  .opt .dot{ width:18px;height:18px;border-radius:6px;border:1.5px solid var(--rc-line); flex:none; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s; }
  .opt.radio .dot{ border-radius:50%; }
  .opt input:checked ~ .dot{ background:var(--rc-primary); border-color:var(--rc-primary); }
  .opt input:checked ~ .dot::after{ content:''; width:6px;height:6px;border-radius:2px;background:var(--rc-white); }
  .opt.radio input:checked ~ .dot::after{ border-radius:50%; }
  .opt.selected{ border-color:var(--rc-primary); background:#F2F6F3; }
  .opt.danger-opt.selected{ border-color:var(--rc-danger); background:var(--rc-danger-soft); }
  .opt input:focus-visible ~ .dot, .opt:focus-within{ outline:2px solid var(--rc-primary-light); outline-offset:2px; }

  .chip-row{ display:flex; flex-wrap:wrap; gap:var(--space-xs); }
  .chip{ border:1.5px solid var(--rc-line); border-radius:999px; padding:11px 19px; min-height:44px; font-size:.95rem; font-weight:500; cursor:pointer; background:var(--rc-white); transition:all .15s; display:inline-flex; align-items:center; gap:6px; }
  .chip.selected{ background:var(--rc-primary); color:var(--rc-white); border-color:var(--rc-primary); }
  .chip:focus-visible{ outline:2px solid var(--rc-primary-light); outline-offset:2px; }

  textarea, input[type=text], input[type=email], input[type=tel], input[type=file], select{
    width:100%; border:1.5px solid var(--rc-line); border-radius:11px; padding:13px 15px;
    font-family:'Barlow',system-ui,sans-serif; font-size:1rem; background:var(--rc-white); color:var(--rc-ink);
  }
  textarea:focus, input:focus, select:focus, button:focus-visible, a:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--rc-primary-light); outline-offset:2px; }
  /* Step headings receive focus on navigation so screen readers announce the new
     screen (see focusStepHeading in ui/shell.js). They are not interactive, so
     they take the focus quietly rather than drawing a ring around the title. */
  h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus,
  h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible, h3[tabindex="-1"]:focus-visible{ outline:none; }
  /* Not label-only: the concierge day/time radiogroups need the same caption
     styling on a <p>, since their control is a chip row, not a form field. */
  .field-label{ display:block; font-size:.88rem; font-weight:600; margin-bottom:7px; color:var(--rc-ink); }
  .field{ margin-bottom:var(--space-md); }
  .field-error{ color:var(--rc-danger); font-size:.85rem; margin-top:var(--space-2xs); font-weight:600; }
  .two-col{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-md); }

  .slider-wrap{ margin-top:6px; }
  input[type=range]{ width:100%; accent-color:var(--rc-primary); }
  .slider-scale{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--rc-ink-soft); margin-top:2px; }
  .slider-readout{ text-align:center; font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:32px; color:var(--rc-primary); margin:4px 0 2px; }

  /* Buttons match the site's .btn spec (1rem, 15px 26px, pill) so a Continue
     button here is the same object as a Book a Consultation button on any other
     page. The pre-consultation's own rules only add the states the site lacks:
     disabled, and the quieter outline treatment used for secondary actions
     inside a card. */
  .nav-row{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-md); flex-wrap:wrap; gap:var(--space-sm); }
  button{ font-family:'Barlow',system-ui,sans-serif; cursor:pointer; }
  /* Hover and active come from the site stylesheet's shared button gesture — the
     rules there match a bare .btn-primary / .btn-outline too, so the buttons in
     the form lift and tint exactly like the ones on a marketing page. Only the
     box model and the disabled state are stated here. */
  .btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--rc-primary); color:var(--rc-white); border:1.5px solid transparent; border-radius:999px; padding:15px 26px; font-size:1rem; font-weight:600; line-height:1; transition:.25s var(--ease); }
  /* The old disabled state was white on #C9C4B5 — 1.74:1, effectively unreadable.
     Sage with dark ink is 4.67:1, so a patient can still read which action is
     waiting on them. */
  .btn-primary:disabled{ background:var(--sage-2); color:var(--rc-ink-soft); cursor:not-allowed; }
  .btn-ghost{ background:none; border:none; color:var(--rc-ink-soft); font-size:.97rem; font-weight:600; padding:12px 6px; }
  .btn-ghost:hover{ color:var(--rc-ink); }
  /* Step navigation reads as a control, not a text link: Back is the same shape
     as Continue so the two sit as a matched pair. Scoped to .nav-row on purpose —
     the ghosts outside it ("Expand all", the FAQ link, "click here" mid-sentence)
     are genuinely inline links and must stay unboxed.
     Neutral --rc-line border rather than .btn-outline's --rc-primary: back is a
     tertiary action, and a second forest-green control beside Continue would
     read as an equal choice when it is not. */
  .nav-row .btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1.5px solid var(--rc-line); border-radius:999px; padding:13px 22px; font-size:.95rem; line-height:1; transition:.25s var(--ease); }
  .nav-row .btn-ghost:hover{ border-color:var(--rc-ink-soft); background:var(--rc-bg-alt); }
  .btn-outline{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:none; border:1.5px solid var(--rc-primary); color:var(--rc-primary); border-radius:999px; padding:13px 22px; font-size:.95rem; font-weight:600; line-height:1; transition:.25s var(--ease); }
  .btn-outline:disabled{ opacity:.5; cursor:not-allowed; }
  /* Size modifier, not a new button. Composes with any of the three variants
     above (.btn-outline.btn-sm, .btn-ghost.btn-sm) for secondary rows like the
     save/concierge utilities, where a full-size pill would out-weigh Continue.
     Colour, radius and hover all still come from the base variant. */
  .btn-sm{ padding:8px 16px; font-size:.82rem; gap:6px; }

  .warn-banner{ background:var(--rc-danger-soft); border:1.4px solid var(--rc-danger); border-radius:var(--radius-sm); padding:var(--space-md) 18px; margin-bottom:var(--space-lg); font-size:.95rem; color:var(--rc-danger); line-height:1.6; }
  .warn-banner b{ display:block; margin-bottom:3px; }
  .success-banner{ background:var(--rc-sage); border:1px solid var(--rc-line); border-radius:var(--radius-sm); padding:var(--space-md) 18px; font-size:.95rem; color:var(--rc-primary); line-height:1.6; }
  .success-banner b{ display:block; margin-bottom:3px; }
  .info-banner{ background:var(--rc-bg-alt); border:1px solid var(--rc-line); border-radius:var(--radius-sm); padding:var(--space-md) 18px; margin-bottom:var(--space-lg); font-size:.95rem; color:var(--rc-ink-soft); line-height:1.6; }
  .reinforcement{ background:#F2F6F3; border:1px solid #CBD9D0; border-radius:var(--radius-sm); padding:18px 20px; margin:0 0 var(--space-lg); display:flex; gap:var(--space-md); align-items:flex-start; color:var(--rc-primary); }
  .reinforcement strong{ display:block; font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:1.2rem; line-height:1.3; margin-bottom:var(--space-2xs); }
  .reinforcement p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--rc-ink-soft); }
  .savings-chip{ flex:none; border-radius:999px; background:var(--rc-primary); color:#fff; padding:5px 9px; font-size:11px; font-weight:700; }
  .reference-details{ border:1px solid var(--rc-line); border-radius:12px; background:var(--rc-white); margin:10px 0; padding:0 16px; }
  .reference-details summary{ cursor:pointer; font-weight:700; color:var(--rc-primary); padding:14px 0; }
  .reference-details > div{ padding:0 0 14px; }
  .tax-note{ font-size:.88rem; color:var(--rc-sage); font-weight:600; margin:6px 0 0; }

  .rec-banner{ background:linear-gradient(135deg, var(--rc-primary), var(--rc-primary-light)); color:var(--rc-white); border-radius:var(--radius-sm); padding:22px 24px; margin-bottom:20px; }
  .rec-banner .eyebrow{ color:var(--rc-accent-soft); }
  /* color:inherit is load-bearing: the website stylesheet sets a dark colour on all
     h1-h4, which beats the white this heading used to inherit from .rec-banner and
     would leave the price unreadable on the forest background. */
  .rec-banner h3{ font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:1.5rem; line-height:1.2; margin:var(--space-2xs) 0 var(--space-xs); color:inherit; }
  .rec-banner p{ margin:0; font-size:.95rem; opacity:.92; line-height:1.5; }
  .urgent-badge{ display:inline-flex; align-items:center; gap:6px; background:var(--rc-danger); color:#fff; font-size:.85rem; font-weight:600; padding:5px 12px; border-radius:999px; margin-bottom:14px; }

  /* The patient's personalised narrative is the most important prose in the whole
     pre-consultation, so it is set as a pull quote in the display serif rather than
     tagged with an accent stripe. */
  .narrative-box{ background:var(--rc-bg-alt); border:1px solid var(--rc-line); border-radius:var(--radius-sm); padding:clamp(20px,2.6vw,30px); margin-bottom:var(--space-lg); font-family:'Newsreader',Georgia,serif; font-size:1.14rem; line-height:1.62; color:var(--rc-ink); }

  .diag-list{ list-style:none; padding:0; margin:0 0 var(--space-lg); display:flex; flex-direction:column; gap:var(--space-xs); }
  .diag-list li{ display:flex; gap:var(--space-sm); align-items:flex-start; font-size:.97rem; line-height:1.55; color:var(--rc-ink); background:var(--rc-bg-alt); border-radius:10px; padding:13px 15px; }
  .diag-list li .mark{ color:var(--rc-sage); font-weight:700; flex:none; }
  .diag-list li .sub{ display:block; color:var(--rc-ink-soft); font-size:.88rem; margin-top:var(--space-2xs); font-weight:400; line-height:1.55; }

  .timeline{ display:flex; flex-direction:column; gap:0; margin:0 0 22px; }
  .tl-item{ display:flex; gap:14px; }
  .tl-marker{ display:flex; flex-direction:column; align-items:center; }
  .tl-dot{ width:10px; height:10px; border-radius:50%; background:var(--rc-accent); flex:none; margin-top:4px; }
  .tl-line{ width:2px; flex:1; background:var(--rc-line); margin:2px 0; }
  .tl-content{ padding-bottom:18px; }
  .tl-content .tl-time{ font-size:11.5px; color:var(--rc-accent); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
  .tl-content .tl-name{ font-weight:600; font-size:1rem; margin:2px 0 2px; }
  .tl-content .tl-desc{ font-size:.92rem; color:var(--rc-ink-soft); line-height:1.5; }

  .prep-list{ list-style:none; padding:0; margin:0 0 8px; }
  .prep-list li{ display:flex; gap:10px; font-size:.97rem; padding:8px 0; border-bottom:1px dashed var(--rc-line); }
  .prep-list li:last-child{ border-bottom:none; }
  .prep-list li .box{ width:16px;height:16px;border:1.5px solid var(--rc-line); border-radius:4px; flex:none; margin-top:2px; }

  .day-group{ margin-bottom:16px; }
  /* styles.css sets h1-h4 to Newsreader; these micro-labels are UI type, so they
     opt back into Barlow the same way .foot-col h4 does. */
  .day-group h4{ font-family:'Barlow',system-ui,sans-serif; font-size:.92rem; text-transform:uppercase; letter-spacing:.04em; color:var(--rc-ink-soft); margin:0 0 8px; font-weight:600; }
  .slot-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .slot{ border:1.5px solid var(--rc-line); border-radius:10px; padding:9px 14px; font-size:.95rem; font-weight:500; background:var(--rc-white); cursor:pointer; }
  .slot.selected{ background:var(--rc-accent); border-color:var(--rc-accent); color:#fff; }
  .slot.disabled{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }
  .slot.star::after{ content:" ★"; }
  .selection-count{ font-size:.92rem; color:var(--rc-ink-soft); margin:14px 0 4px; }

  .confirm-icon{ width:56px;height:56px;border-radius:50%;background:var(--rc-sage); display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
  .confirm-icon svg{ width:26px;height:26px; }
  .summary-box{ background:var(--rc-bg-alt); border-radius:var(--radius-sm); padding:18px 20px; margin:18px 0; font-size:.97rem; line-height:1.7; }
  .summary-box b{ color:var(--rc-primary); }

  .welcome-points{ list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:12px; }
  .welcome-points li{ display:flex; gap:12px; align-items:flex-start; font-size:1rem; line-height:1.5; }
  .welcome-points .num{ font-family:'Newsreader',Georgia,serif; font-weight:600; color:var(--rc-accent); font-size:.97rem; flex:none; width:22px;height:22px;border:1.3px solid var(--rc-accent-soft);border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .privacy-note{ font-size:.85rem; color:var(--rc-ink-soft); display:flex; gap:6px; align-items:flex-start; margin-top:6px; }

  .review-section{ margin-bottom:18px; }
  .review-section h4{ font-family:'Barlow',system-ui,sans-serif; font-size:.92rem; text-transform:uppercase; letter-spacing:.04em; color:var(--rc-accent); margin:0 0 8px; font-weight:700; display:flex; justify-content:space-between; align-items:center; }
  .review-section h4 button{ background:none; border:none; color:var(--rc-primary); font-size:.85rem; font-weight:600; text-decoration:underline; }
  .review-row{ font-size:.95rem; color:var(--rc-ink); padding:3px 0; }
  .review-row span.k{ color:var(--rc-ink-soft); }
  .empty-note{ font-size:.92rem; color:var(--rc-ink-soft); font-style:italic; }

  .service-card{ border:1.5px solid var(--rc-line); border-radius:var(--radius-sm); padding:20px 22px; margin-bottom:14px; cursor:pointer; background:var(--rc-white); transition:border-color .15s, transform .12s; }
  .service-card:hover{ border-color:var(--rc-primary-light); transform:translateY(-2px); }
  .service-card h3{ font-family:'Newsreader',Georgia,serif; font-weight:500; color:var(--rc-primary); margin:0 0 var(--space-xs); font-size:1.3rem; line-height:1.25; }
  .service-card p{ margin:0 0 12px; font-size:.95rem; color:var(--rc-ink-soft); line-height:1.5; }
  .service-card .tag{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--rc-accent); margin-bottom:8px; }

  .check-row{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--rc-line); font-size:.95rem; line-height:1.5; }
  .check-row:last-child{ border-bottom:none; }
  .check-row input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--rc-primary); }

  .dev-note{ background:#FBF0E4; border:1.4px dashed var(--rc-accent); border-radius:var(--radius-sm); padding:12px 14px; font-size:.85rem; color:#7A5323; margin-bottom:16px; line-height:1.55; }
  .dev-note b{ display:block; margin-bottom:2px; }
  .upload-box{ border:1.5px dashed var(--rc-line); border-radius:var(--radius-sm); padding:18px; text-align:center; font-size:.95rem; color:var(--rc-ink-soft); }
  .upload-box.has-file{ border-color:var(--rc-sage); background:#F2F6F3; color:var(--rc-ink); }

  .codes-table{ width:100%; border-collapse:collapse; font-size:.92rem; margin-bottom:6px; }
  .codes-table th, .codes-table td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--rc-line); }
  .codes-table th{ font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--rc-ink-soft); }
  .codes-table td.num, .codes-table th.num{ text-align:right; }
  .codes-table tfoot td{ font-weight:700; border-bottom:none; border-top:1.5px solid var(--rc-ink); }

  .print-only{ display:none; }
  @media print{
    body{ background:#fff; }
    .root-progress, .nav-row, .btn-outline, .btn-ghost, #saveProgressRow, .no-print, .tip-trigger{ display:none !important; }
    /* The rail is hidden, so collapse the two-column grid or it prints an empty
       224px gutter down the left of every page. */
    .pre-consultation-body{ display:block !important; }
    .print-only{ display:block !important; }
    .card{ box-shadow:none; border:none; padding:0; }
  }

  .tip-trigger{
    display:inline-flex; align-items:center; justify-content:center;
    width:17px; height:17px; border-radius:50%; flex:none;
    background:var(--rc-bg-alt); border:1.3px solid var(--rc-line); color:var(--rc-ink-soft);
    font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:700; font-size:11px; line-height:1;
    cursor:pointer; margin-left:2px; padding:0;
  }
  .tip-trigger:hover, .tip-trigger[aria-expanded="true"]{ background:var(--rc-primary); border-color:var(--rc-primary); color:#fff; }
  .tip-trigger:focus-visible{ outline:2px solid var(--rc-primary-light); outline-offset:2px; }
  .tip-popover{
    position:absolute; z-index:200; max-width:280px; background:var(--rc-card);
    border:1.4px solid var(--rc-line); border-radius:12px; box-shadow:var(--shadow); padding:12px 14px;
  }
  .tip-popover[hidden]{ display:none; }
  @media (max-width:520px){ .tip-popover{ max-width:calc(100vw - 32px); } }
  @media (max-width:700px){
    .progress-heading{ align-items:center; }
    .milestone-label{ display:none; }
    .milestone{ padding:5px 2px; }
    .root-label{ display:block; }
    .root-label > span:last-child{ display:block; margin-top:2px; }
  }
  @media (max-width:520px){
    .root-progress{ padding:12px 10px 10px; }
    .savings-label{ max-width:112px; }
    .card{ border-radius:16px; }
    .nav-row{ align-items:stretch; }
    .nav-row .btn-primary{ margin-left:auto; }
    .btn-primary,.btn-outline{ min-height:44px; }
    .btn-ghost{ min-height:44px; }
    .opt{ min-height:48px; }
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  }