@font-face{font-family:Aeonik;src:url("/font/aeonik-300.woff2")format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Aeonik;src:url("/font/aeonik-400.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Aeonik;src:url("/font/aeonik-500.woff2")format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
color-scheme:light;
--ink:#181818;--ink-muted:#5a5f5c;--ink-faint:#6b706d;
--surface:#fff;--surface-warm:#f7f6ef;--paper:#f7f6ef;
--evergreen:#0b3a2b;--mint:#6fc59b;--gold:#b88320;
--green:#126b4e;--green-hover:#0e5a41;--green-tint:#e9f0ec;--green-stroke:#57ab92;
--line:#e4e4e4;--line-strong:#c9ccc8;--line-input:#8f948f;
--warn:#fbefe0;--warn-ink:#8a4f14;
--error:#a32f1f;--error-tint:#fdf6f5;
--font:Aeonik,Arial,sans-serif;
--t-display:clamp(2.4rem,1.1rem + 3vw,4rem);--t-h2:clamp(1.5rem,1.2rem + .9vw,1.875rem);
--t-body:1.125rem;--t-small:1rem;--t-caption:.875rem;--t-label:.75rem;
--lh-heading:1.15;--lh-lede:1.5;--lh-body:1.55;
--ls-display:-.03em;--ls-heading:-.02em;--ls-body:-.006em;--ls-label:.14em;
--w-light:300;--w-regular:400;--w-medium:500;--w-semi:600;
--s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:2.5rem;--s-8:3rem;--s-9:4rem;--s-10:5rem;
--r-card:.625rem;--r-sheet:1rem;--r-section:1.25rem;--r-pill:2.5rem;
--shadow-lift:0 20px 44px -26px rgba(15,33,27,.42);
--gutter:clamp(1rem,4vw,2.5rem);
--ease:.2s ease}

*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--t-body);font-weight:var(--w-regular);line-height:var(--lh-body);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background var(--ease)}
/* A control does NOT inherit the body tracking. The design was drawn where a
   button keeps the UA default, and letting -0.006em through walks every label
   a fraction narrow. Anything that sets its own still wins. */
:is(button,input,select,textarea){letter-spacing:normal}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
a{color:var(--green)}a:hover{color:var(--green-hover)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The waterline map behind the page, lighter under the copy on the left. The
   green one on paper, the white one on the evergreen fee check. */
.bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.map{position:absolute;right:-18rem;top:-2.5rem;width:94rem;max-width:none;opacity:.6;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.45) 45%,#000 75%);mask-image:linear-gradient(90deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.45) 45%,#000 75%)}
.map-d,.home .mark-d{display:none}

/* ── The pill nav ─────────────────────────────────────────────────────── */
.top{position:relative;z-index:2;padding:1.25rem var(--gutter) 0}
.pill{max-width:80rem;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);padding:.625rem .625rem .625rem 1.5rem;border-radius:100px;background:rgba(252,251,247,.94);border:1px solid var(--line);box-shadow:0 12px 34px -20px rgba(15,33,27,.32)}
.home{display:flex}.home img{width:8.5rem;height:auto;display:block}
.meter{display:flex;align-items:center;gap:.625rem;margin:0;font-size:var(--t-caption);color:var(--ink-muted)}
.meter[hidden]{display:none}
.meter-bar{width:7.5rem;height:4px;border-radius:4px;background:var(--line);position:relative;overflow:hidden;display:block}
#meter-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--green);border-radius:4px;transition:width var(--ease)}
.book{display:inline-flex;align-items:center;gap:.625rem;min-height:2.75rem;padding:0 1rem 0 .375rem;border-radius:var(--r-pill);border:1px solid var(--line-strong);color:var(--ink);font-size:.9375rem;font-weight:var(--w-medium);text-decoration:none;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.book:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.book img{width:2rem;height:2rem;border-radius:50%;object-fit:cover;display:block}

/* ── Two columns, stacked below ~950px ───────────────────────────────── */
.stage{position:relative;z-index:1;flex:1;width:100%;max-width:calc(80rem + 2 * var(--gutter));margin:0 auto;padding:var(--s-9) var(--gutter) 7.5rem;display:flex;flex-wrap:wrap;gap:var(--s-9);align-items:flex-start}
.intro{flex:.86 1 26rem;min-width:0;display:flex;flex-direction:column;gap:var(--s-5)}
/* NO WIDOWS (spec 1.2): headings, questions and option labels balance their
   lines; body copy and hints avoid a lone last word. */
legend,.ctext,.card h3{text-wrap:balance}
.card p,.chint,.desc,.hero p,.ask p{text-wrap:pretty}
/* NO JUMP BETWEEN STEPS (spec 1.3): the sheet keeps one floor height, so a
   short step does not pull the footer up and a long one push it back. */
.sheet{min-height:34rem}
body.ended .sheet{min-height:0}
.sheet{flex:1.14 1 30rem;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sheet);box-shadow:var(--shadow-lift);padding:var(--s-7)}

.eyebrow{font-size:var(--t-label);line-height:1.4;letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:var(--w-medium);color:var(--green);margin:0}
.eyebrow:empty{display:none}
.display{margin:0;font-size:var(--t-display);line-height:1.04;font-weight:var(--w-light);letter-spacing:var(--ls-display);text-wrap:balance}
.display[hidden]{display:none}
.display b{font-weight:var(--w-semi)}
.sq{position:relative;display:inline-block;color:inherit}
.squiggle{position:absolute;left:0;right:0;bottom:-.6rem;width:100%;height:.875rem;color:var(--gold);overflow:visible}
.lede{margin:var(--s-2) 0 0;max-width:46ch;font-size:1.25rem;line-height:var(--lh-lede);color:var(--ink-muted);background:rgba(247,246,239,.92);box-shadow:0 0 3px 3px rgba(247,246,239,.92);border-radius:6px}
.lede[hidden]{display:none}
.lede a{color:var(--green);text-decoration:underline;text-underline-offset:2px}

/* The trail: done is a filled green check, current a gold ring with a dot,
   upcoming hollow. */
.progress{list-style:none;margin:var(--s-5) 0 0;padding:0;display:flex;flex-direction:column}
.progress[hidden]{display:none}
.progress li{display:flex;gap:var(--s-4);align-items:center;min-height:3rem}
.progress .dot{width:1.75rem;height:1.75rem;flex:none;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper);display:flex;align-items:center;justify-content:center;color:#fff}
.progress .dot svg{display:none}
.progress .step{font-size:var(--t-body);color:var(--ink-muted)}
.progress .note{font-size:var(--t-caption);color:var(--ink-faint)}
.progress li.done .dot{background:var(--green);border-color:var(--green)}
.progress li.done .dot svg{display:block}
.progress li.done .step{color:var(--ink)}
.progress li.now .dot{border:2px solid var(--gold);background:#fff}
.progress li.now .dot::after{content:"";width:.625rem;height:.625rem;border-radius:50%;background:var(--gold)}
.progress li.now .step{color:var(--ink);font-weight:var(--w-semi)}
.progress-now{display:none}

/* ── The card ─────────────────────────────────────────────────────────── */
.card{display:flex;flex-direction:column}
.card[hidden]{display:none}
.card h2{font-size:var(--t-h2);font-weight:var(--w-medium);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);margin:0 0 var(--s-2);text-wrap:balance}
.cdesc{color:var(--ink-muted);margin:0 0 var(--s-5);font-size:var(--t-small);line-height:var(--lh-lede)}
.cdesc a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.card h2+.q,.cdesc+.q{margin-top:var(--s-5)}

.q{margin:0 0 var(--s-5);border:0;padding:0;min-inline-size:0}
.q:last-child{margin-bottom:0}
.q[hidden]{display:none}
legend,label{font-size:var(--t-small);font-weight:var(--w-medium);display:block;margin-bottom:var(--s-2);padding:0}
/* The card heading already carries a single question's title, so repeating it
   on the field reads as a stutter. Kept in the markup, and moved off-screen
   rather than removed, so a screen reader still announces the group. */
.card[data-single] legend{position:absolute;left:-9999px}
.hint{color:var(--ink-faint);font-size:var(--t-caption);line-height:1.45;margin:calc(var(--s-1) * -1) 0 var(--s-3)}
.statement{background:var(--green-tint);border-radius:var(--r-card);padding:1.375rem 1.5rem}
.statement .stitle{font-weight:var(--w-medium);margin:0 0 var(--s-2)}
.statement .hint{color:var(--ink);font-size:var(--t-small);line-height:var(--lh-body);margin:0;white-space:pre-line}
.checks{list-style:none;margin:var(--s-2) 0 0;padding:0;display:flex;flex-direction:column;gap:.625rem}
.checks li{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--t-small);line-height:1.5}
.checks .ck{flex:none;margin-top:.2rem;color:var(--green)}

/* Inputs: 56px, 10px radius, 17px text. The border is darker than the
   handoff's line-strong, which is 1.5:1 on white where a control's edge wants
   3:1. */
input[type=text],input[type=email],input[type=tel],textarea{display:block;width:100%;min-height:3.5rem;font:inherit;font-size:1.0625rem;padding:.875rem 1rem;background:var(--surface);color:var(--ink);border:1px solid var(--line-input);border-radius:var(--r-card);transition:border-color var(--ease)}
input[type=text]:hover,input[type=email]:hover,input[type=tel]:hover,textarea:hover{border-color:var(--ink-faint)}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,textarea:focus{outline:2px solid var(--green);outline-offset:3px;border-color:var(--green)}
textarea{resize:vertical;line-height:1.5;min-height:6rem}

/* ── Option cards ─────────────────────────────────────────────────────── */
.choices{display:grid;gap:var(--s-3)}
.choice{position:relative;display:flex;gap:var(--s-4);align-items:center;font-size:1.0625rem;font-weight:var(--w-medium);letter-spacing:-.012em;margin:0;padding:1.25rem 1.375rem;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.choice:hover{background:var(--surface-warm);border-color:var(--line-strong)}
/* The radio stays a real radio, hidden from sight and not from anything else. */
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choice:has(input:focus-visible){outline:2px solid var(--green);outline-offset:3px}
.choice:has(input:checked){border:2px solid var(--green);padding:calc(1.25rem - 1px) calc(1.375rem - 1px);background:var(--surface)}
.ctext{display:block;flex:1;min-width:0;line-height:1.4}
.chint{display:block;color:var(--ink-muted);font-size:var(--t-small);font-weight:var(--w-regular);letter-spacing:var(--ls-body);line-height:1.55;margin-top:var(--s-1)}
.tick{width:2rem;height:2rem;flex:none;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:transparent;transition:background var(--ease),border-color var(--ease)}
.choice:has(input:checked) .tick{background:var(--green);border-color:var(--green);color:#fff}
.glyph{width:3.5rem;height:3.5rem;flex:none;border-radius:.75rem;background:var(--green-tint);color:var(--green);display:flex;align-items:center;justify-content:center;align-self:flex-start}
.glyph-photo img{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;display:block}
.choice.rich{align-items:flex-start;gap:1.25rem;font-size:1.375rem;letter-spacing:-.018em}
.choice.rich .tick{align-self:center}
/* The "talk to us" portfolio choice is a way out rather than a portfolio. */
.choice.rich:has(.glyph-photo){align-items:center;border-style:dashed;border-color:var(--line-strong);font-size:1.0625rem;letter-spacing:var(--ls-body)}
.choice.rich:has(.glyph-photo) .glyph{width:2.5rem;height:2.5rem;background:none;align-self:center}

/* The risk scale: four tiles, a bar in each that grows Low to High. */
.choices.scale{grid-template-columns:repeat(4,minmax(0,1fr));gap:.625rem}
.choice.tile{flex-direction:column;align-items:center;justify-content:flex-start;gap:.625rem;padding:1rem .5rem .875rem;text-align:center;font-size:var(--t-small);border-radius:.75rem}
.choice.tile:has(input:checked){padding:calc(1rem - 1px) calc(.5rem - 1px) calc(.875rem - 1px)}
.choice.tile .bar{width:4.5rem;height:5rem;color:var(--ink);fill:var(--line-strong);display:block}
.choice.tile:has(input:checked) .bar{fill:var(--green)}
.choice.tile:has(input:checked) .ctext{color:var(--green);font-weight:var(--w-semi)}
.choice.tile .ctext{flex:none}
.choice.tile .tick{display:none}
/* The two ends of the scale, each under its half of the row: short lines in
   the caption size, one at each edge. */
.ends{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-3);font-size:var(--t-caption);color:var(--ink-muted);line-height:1.4}
.ends>span{max-width:22ch;text-wrap:balance}.ends>span:last-child{justify-self:end;text-align:right}
.fine{font-size:.8125rem}
.fine{margin:var(--s-4) 0 0;line-height:1.6;color:var(--ink-faint)}

/* The portfolio breakdown under an allocation question. One panel shows at a
   time: the checked choice's, or on a hover-capable screen the hovered one's.
   Eight pairs, more than any menu has. */
.bds{margin-top:var(--s-4)}
.bd{display:none;grid-template-columns:8.5rem 1fr;gap:var(--s-4);align-items:center;margin:0;padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface-warm)}
.bd figcaption{grid-column:1 / -1;font-size:var(--t-small);font-weight:var(--w-medium)}
.bd svg[role=img]{width:100%;height:auto;transform:rotate(0deg)}
.bd circle{transition:stroke-width var(--ease)}
.bd circle:hover{stroke-width:7.5}
.bd ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:var(--t-caption)}
.bd li{display:flex;align-items:center;gap:.5rem}
.bd li b{margin-left:auto;font-weight:var(--w-medium)}
.bd .sw{width:.75rem;height:.75rem;flex:none}
.bds .bd.bd-none{display:none !important}
.bd-empty{color:var(--ink-faint);font-size:var(--t-caption);margin:0}
.q:has(.choice input:checked) .bd-empty{display:none}
/* Always a breakdown: with nothing chosen and nothing hovered, the suggested
   portfolio's. A hover or a choice replaces it; never two at once. */
.q:has(.rec:not([hidden])) .bd-empty{display:none}
.q:not(:has(.choice input:checked)):not(:has(.choice:hover)):has(.choice:nth-child(1) .rec:not([hidden])) .bd:nth-child(1){display:grid}.q:not(:has(.choice input:checked)):not(:has(.choice:hover)):has(.choice:nth-child(2) .rec:not([hidden])) .bd:nth-child(2){display:grid}.q:not(:has(.choice input:checked)):not(:has(.choice:hover)):has(.choice:nth-child(3) .rec:not([hidden])) .bd:nth-child(3){display:grid}.q:not(:has(.choice input:checked)):not(:has(.choice:hover)):has(.choice:nth-child(4) .rec:not([hidden])) .bd:nth-child(4){display:grid}.q:not(:has(.choice input:checked)):not(:has(.choice:hover)):has(.choice:nth-child(5) .rec:not([hidden])) .bd:nth-child(5){display:grid}.q:not(:has(.choice input:checked)):not(:has(.choice:hover)):has(.choice:nth-child(6) .rec:not([hidden])) .bd:nth-child(6){display:grid}.q:not(:has(.choice input:checked)):not(:has(.choice:hover)):has(.choice:nth-child(7) .rec:not([hidden])) .bd:nth-child(7){display:grid}.q:not(:has(.choice input:checked)):not(:has(.choice:hover)):has(.choice:nth-child(8) .rec:not([hidden])) .bd:nth-child(8){display:grid}
.q:has(.choice:nth-child(1) input:checked) .bd:nth-child(1){display:grid}.q:has(.choice:nth-child(2) input:checked) .bd:nth-child(2){display:grid}.q:has(.choice:nth-child(3) input:checked) .bd:nth-child(3){display:grid}.q:has(.choice:nth-child(4) input:checked) .bd:nth-child(4){display:grid}.q:has(.choice:nth-child(5) input:checked) .bd:nth-child(5){display:grid}.q:has(.choice:nth-child(6) input:checked) .bd:nth-child(6){display:grid}.q:has(.choice:nth-child(7) input:checked) .bd:nth-child(7){display:grid}.q:has(.choice:nth-child(8) input:checked) .bd:nth-child(8){display:grid}
@media (hover:hover){/* The .bds in the hide rules outranks the checked rules above, so a hovered choice's panel replaces the checked one's rather than joining it. */.q:has(.choice:hover) .bd-empty{display:none}.q:has(.choice:nth-child(1):hover) .bd:nth-child(1){display:grid}.q:has(.choice:nth-child(2):hover) .bd:nth-child(2){display:grid}.q:has(.choice:nth-child(3):hover) .bd:nth-child(3){display:grid}.q:has(.choice:nth-child(4):hover) .bd:nth-child(4){display:grid}.q:has(.choice:nth-child(5):hover) .bd:nth-child(5){display:grid}.q:has(.choice:nth-child(6):hover) .bd:nth-child(6){display:grid}.q:has(.choice:nth-child(7):hover) .bd:nth-child(7){display:grid}.q:has(.choice:nth-child(8):hover) .bd:nth-child(8){display:grid}.q:has(.choice:hover:nth-child(1)) .bds .bd:not(:nth-child(1)){display:none}.q:has(.choice:hover:nth-child(2)) .bds .bd:not(:nth-child(2)){display:none}.q:has(.choice:hover:nth-child(3)) .bds .bd:not(:nth-child(3)){display:none}.q:has(.choice:hover:nth-child(4)) .bds .bd:not(:nth-child(4)){display:none}.q:has(.choice:hover:nth-child(5)) .bds .bd:not(:nth-child(5)){display:none}.q:has(.choice:hover:nth-child(6)) .bds .bd:not(:nth-child(6)){display:none}.q:has(.choice:hover:nth-child(7)) .bds .bd:not(:nth-child(7)){display:none}.q:has(.choice:hover:nth-child(8)) .bds .bd:not(:nth-child(8)){display:none}}
@media (max-width:30rem){.bd{grid-template-columns:6.5rem 1fr}}
/* Right-aligned and bottom-aligned, each scaled to one width, so the
   mountains' different heights read as the scale they are. */
.cicon{flex:none;margin-left:auto;width:3.25rem;align-self:center;line-height:0}
.cicon svg{width:100%;height:auto;display:block}
.rec{display:inline-block;margin-left:var(--s-2);padding:.15rem .6rem;border-radius:100px;background:var(--green-tint);color:var(--green);font-size:var(--t-label);font-weight:var(--w-medium);letter-spacing:var(--ls-label);text-transform:uppercase;vertical-align:3px}
.rec[hidden]{display:none}
.sug{font-variant-numeric:tabular-nums}

/* ── The fee check ───────────────────────────────────────────────────── */
.fig{margin:0 0 var(--s-3);font-size:4rem;line-height:.95;font-weight:var(--w-medium);letter-spacing:-.04em;color:var(--green);font-variant-numeric:tabular-nums}
.card[data-card=rollover-fees] .choices{display:flex;flex-wrap:wrap;gap:.625rem}
.card[data-card=rollover-fees] .choice{border-radius:var(--r-pill);padding:.875rem 1.5rem;min-height:3.25rem}
.card[data-card=rollover-fees] .choice:has(input:checked){padding:calc(.875rem - 1px) calc(1.5rem - 1px)}
.card[data-card=rollover-fees] .tick{display:none}
.card[data-card=rollover-warning] h2{background:var(--warn);color:var(--warn-ink);border-radius:var(--r-card) var(--r-card) 0 0;padding:1.375rem 1.5rem .5rem;margin:0;font-size:1.125rem;font-weight:var(--w-semi);line-height:1.4;letter-spacing:-.01em}
.card[data-card=rollover-warning] h2+.cdesc,.card[data-card=rollover-warning] .q{background:var(--warn);margin:0;padding:.5rem 1.5rem 1.375rem;border-radius:0 0 var(--r-card) var(--r-card)}
.card[data-card=rollover-warning] .cdesc{border-radius:0;padding-bottom:.5rem}
.card[data-card=rollover-warning] .reqnote{display:none}

/* ── Address suggestions ─────────────────────────────────────────────── */
.combo{position:relative}
.sugs{position:absolute;z-index:5;left:0;right:0;top:calc(100% + var(--s-1));margin:0;padding:var(--s-1);list-style:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-card);box-shadow:0 16px 40px -16px rgba(11,58,43,.45);max-height:15rem;overflow:auto}
.sugs[hidden]{display:none}
.sugs li{padding:var(--s-2) var(--s-3);border-radius:var(--s-1);cursor:pointer;font-size:var(--t-small)}
.sugs li[aria-selected=true],.sugs li:hover{background:var(--green-tint);color:var(--green)}

/* The required marker is red and the message is red, and NOTHING ELSE IS until
   we have actually refused to move past a field. See the long note on the
   submit handler in the script: the boxes used to go red on arrival. */
.req{color:var(--error);margin-left:.15em;font-weight:var(--w-medium)}
.reqnote{color:var(--ink-faint);font-size:var(--t-caption);margin:0 0 var(--s-4)}
.ferr{display:flex;gap:.5rem;align-items:center;margin:var(--s-2) 0 0;font-size:var(--t-caption);color:var(--error);line-height:1.4}
.ferr::before{content:"!";flex:none;width:1rem;height:1rem;border-radius:50%;border:1.6px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:var(--w-semi);line-height:1}
.ferr[hidden]{display:none}
.q.is-bad :is(input[type=text],input[type=email],input[type=tel],textarea){border:2px solid var(--error);background:var(--error-tint)}
.q.is-bad :is(input[type=text],input[type=email],input[type=tel],textarea):focus{outline-color:var(--error);border-color:var(--error)}
/* DIRECT CHILDREN ONLY. A .choice is a <label> too, so the descendant form of
   this turned all five options red to say "pick one of these" -- the same
   over-alarming the .drop rule below is written to avoid. The question's own
   label goes red; the answers on offer are not the thing that is wrong. */
.q.is-bad > :is(legend,label,.flabel){color:var(--error)}
/* The DROP ZONE goes red, the choices do not. A radio group's complaint is
   about the group, and outlining five options in red to say "pick one of
   these" is five times the alarm for one piece of news. The legend and the
   message carry it. */
.q.is-bad .drop{border-color:var(--error)}

.flabel{font-size:var(--t-small);font-weight:var(--w-medium);margin:0 0 var(--s-2)}
.drop{display:block;border:1.5px dashed var(--line-strong);border-radius:var(--r-card);padding:var(--s-6) var(--s-4);text-align:center;font-size:var(--t-small);font-weight:var(--w-regular);cursor:pointer;margin:0;background:var(--surface-warm);transition:border-color var(--ease),background var(--ease)}
.drop:hover,.drop:focus-within{border-color:var(--green)}
.drop[data-over]{border-color:var(--green);background:var(--green-tint)}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dprompt{display:block}
.dprompt strong{color:var(--green);font-weight:var(--w-medium)}
.dtypes{display:block;color:var(--ink-faint);font-size:var(--t-caption);margin-top:var(--s-1)}
.dpicked{display:flex;gap:var(--s-3);align-items:center;justify-content:center;margin-top:var(--s-3)}
.dpicked[hidden]{display:none}
.dname{font-weight:var(--w-medium);word-break:break-all}
button.dclear{min-height:0;padding:.35rem .9rem;font-size:var(--t-caption);background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
button.dclear:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.drop[data-picked] .dprompt,.drop[data-picked] .dtypes{display:none}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Buttons: Back is the quiet pill, Continue the green one ─────────── */
.nav{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between;margin-top:var(--s-6)}
button{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:3.25rem;font:inherit;font-size:var(--t-small);font-weight:var(--w-medium);line-height:1;padding:0 1.625rem;border:1px solid transparent;border-radius:var(--r-pill);background:var(--green);color:#fff;cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
button:hover{background:var(--green-hover)}
#go{margin-left:auto}
#go::after{content:"→";font-size:1.05em}
#back{background:transparent;color:var(--ink);border-color:var(--line-strong)}
#back:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
button[hidden]{display:none}
button[disabled]{opacity:.45;cursor:not-allowed}
button[disabled]:hover{background:var(--green)}

/* The review screen. */
.review[hidden]{display:none}
.rv{display:flex;gap:var(--s-4);justify-content:space-between;align-items:flex-start;padding:var(--s-4) 0;border-top:1px solid var(--line)}
.rv:first-child{border-top:0;padding-top:0}
.rv dl{margin:0;min-width:0}
.rv dt{font-size:var(--t-caption);color:var(--ink-muted);margin-top:var(--s-2)}
.rv dt:first-child{margin-top:0}
.rv dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.rv dd.rv-err{color:var(--error);font-size:var(--t-caption);margin-top:var(--s-1)}
button.rv-edit{flex:none;min-height:2.5rem;padding:0 var(--s-4);font-size:var(--t-caption);background:transparent;color:var(--green);border-color:var(--line-strong)}
button.rv-edit:hover{background:var(--green-tint);color:var(--green)}

#msg{min-height:1.4rem;margin:var(--s-4) 0 0;font-size:var(--t-small)}
#msg:empty{min-height:0}
#msg.err{color:var(--error)}
#msg.ok{color:var(--green)}

/* ── Endings ─────────────────────────────────────────────────────────── */
.ending h2{margin-bottom:var(--s-3)}
.ending p{margin:0;color:var(--ink-muted)}
.ctas{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-top:var(--s-5) !important}
.cta{display:inline-flex;align-items:center;gap:.5rem;min-height:3.25rem;padding:0 1.625rem;border:1px solid transparent;border-radius:var(--r-pill);background:var(--green);color:#fff;font-size:var(--t-small);font-weight:var(--w-medium);line-height:1;text-decoration:none;transition:background var(--ease),color var(--ease)}
.cta:hover{background:var(--green-hover);color:#fff}
.cta-outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.cta-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Finished: the trail is done with, so the card takes the page, and the main
   ending is the evergreen hero. */
body.ended .intro{display:none}
body.ended .sheet{flex-basis:100%;max-width:56rem;margin:0 auto}
body.ended .sheet:has(.ending-main:not([hidden])){background:var(--evergreen);border-color:var(--evergreen);color:#fff;padding:var(--s-9) var(--s-8)}
.ending-main h2{font-size:var(--t-display);font-weight:var(--w-light);line-height:1.04;letter-spacing:var(--ls-display)}
.ending-main:not(.ending-full) p,.hero p{color:rgba(255,255,255,.82);font-size:1.25rem;line-height:var(--lh-lede);max-width:46ch}
.ending-main:not(.ending-full) .cta,.hero .cta{background:#fff;color:var(--evergreen)}
.ending-main:not(.ending-full) .cta:hover,.hero .cta:hover{background:var(--green-tint);color:var(--evergreen)}
.ending-main:not(.ending-full) .cta-outline,.hero .cta-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.ending-main:not(.ending-full) .cta-outline:hover,.hero .cta-outline:hover{background:#fff;color:var(--evergreen)}
.sheet:has(.ending-main:not([hidden])) #msg.err{color:#ffd9d2}
/* The full submitted page: no white sheet around it, the hero is the evergreen
   panel and the rest are cards on the paper. */
body.ended .sheet:has(.ending-full:not([hidden])){background:transparent;border:0;box-shadow:none;padding:0;color:var(--ink);max-width:72rem}
.ending-full{gap:var(--s-5)}
.ending-full .hero{position:relative;overflow:hidden;background:var(--evergreen);color:#fff;border-radius:var(--r-section);padding:var(--s-9) var(--s-8);display:flex;flex-direction:column;gap:var(--s-4)}
.ending-full .hero .eyebrow{color:var(--green-tint)}
.ending-full .hero h2{margin:0;color:#fff}
.ending-full .hero h2 b{font-weight:var(--w-semi)}
.ending-full .hero p{margin:0}
.ending-full .hero .ctas{margin-top:var(--s-2) !important}
/* The timeline (spec 8): three steps across the hero, joined by a line
   through large filled gold markers; stacked, with the line running down,
   on a phone. */
.next-h{margin:var(--s-5) 0 0;color:#fff;font-size:1.25rem;font-weight:var(--w-medium);letter-spacing:var(--ls-heading);text-wrap:balance}
.next{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.next li{position:relative;display:flex;flex-direction:column;gap:var(--s-3)}
.next li:not(:last-child)::after{content:"";position:absolute;top:1.375rem;left:3.25rem;right:calc(var(--s-5) * -1 + .5rem);height:2px;background:rgba(232,180,80,.45)}
.next .num{position:relative;z-index:1;width:2.75rem;height:2.75rem;border-radius:50%;background:#e8b450;color:var(--evergreen);display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:var(--w-semi);flex:none}
.next h3{margin:0;color:#fff;font-size:1.25rem;font-weight:var(--w-medium);letter-spacing:var(--ls-heading);line-height:1.25;text-wrap:balance}
.next p{margin:var(--s-1) 0 0 !important;color:rgba(255,255,255,.78) !important;font-size:var(--t-small) !important;text-wrap:pretty}
.next .tag{display:inline-block;margin-top:var(--s-2);padding:.25rem .75rem;border-radius:100px;background:#e8b450;color:var(--evergreen);font-size:var(--t-caption);font-weight:var(--w-semi)}
.ending-full .hero .another-link{color:#fff;text-decoration:underline;text-underline-offset:.2em;font-weight:var(--w-medium)}
.ending-full .hero .another-link:hover{color:var(--green-tint)}
.ending-full .hero .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5)}
.ask{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sheet);padding:var(--s-5)}
.ask img{width:3.5rem;height:3.5rem;border-radius:50%;object-fit:cover;flex:none}
.ask p{flex:1 1 20rem;margin:0;font-size:var(--t-small);color:var(--ink-muted)}
.ask p b{display:block;color:var(--ink);font-weight:var(--w-medium)}
.ask .cta{color:var(--ink)}

/* ── The footer: evergreen, overlapping the page by its radius ───────── */
.foot{position:relative;z-index:2;margin-top:-1.25rem;background:var(--evergreen);color:#fff;border-radius:var(--r-section) var(--r-section) 0 0;padding:var(--s-8) var(--gutter) var(--s-7)}
.foot-in{max-width:80rem;margin:0 auto;display:flex;flex-direction:column;gap:1.75rem}
.trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s-6)}
.trust li{display:flex;flex-direction:column;gap:var(--s-2)}
.trust .eyebrow{color:var(--green-tint)}
.trust p:not(.eyebrow){margin:0;font-size:var(--t-small);line-height:var(--lh-body);color:rgba(255,255,255,.78)}
.legal{margin:0;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.18);font-size:var(--t-caption);line-height:1.6;color:rgba(255,255,255,.66);max-width:48rem}
/* The trust row is for the welcome screen; past it the footer is the
   disclosure alone. */
body.past-start .trust{display:none}
body.past-start .legal{border-top:0;padding-top:0}

/* ── The fee check turns the page evergreen; green never follows green, so
   the footer goes paper ────────────────────────────────────────────── */
body.tone-dark,html:has(body.tone-dark){background:var(--evergreen)}
body.tone-dark .map-l,body.tone-dark .home .mark-l{display:none}
body.tone-dark .map-d,body.tone-dark .home .mark-d{display:block}
body.tone-dark .map{opacity:.35}
body.tone-dark .pill{background:rgba(11,58,43,.9);border-color:rgba(255,255,255,.18)}
body.tone-dark .meter{color:rgba(255,255,255,.78)}
body.tone-dark .meter-bar{background:rgba(255,255,255,.18)}
body.tone-dark #meter-fill{background:var(--mint)}
body.tone-dark .book{color:#fff;border-color:rgba(255,255,255,.35)}
body.tone-dark .book:hover{background:#fff;color:var(--evergreen)}
body.tone-dark .intro{color:#fff}
body.tone-dark .eyebrow{color:var(--green-tint)}
body.tone-dark .lede{color:rgba(255,255,255,.78);background:none;box-shadow:none}
body.tone-dark .progress .dot{background:transparent;border-color:rgba(255,255,255,.3)}
body.tone-dark .progress .step,body.tone-dark .progress .note{color:rgba(255,255,255,.66)}
body.tone-dark .progress li.done .dot{background:var(--mint);border-color:var(--mint);color:var(--evergreen)}
body.tone-dark .progress li.done .step,body.tone-dark .progress li.now .step{color:#fff}
body.tone-dark .progress li.now .dot{background:var(--evergreen);border-color:var(--gold)}
body.tone-dark .sheet{border-color:transparent;box-shadow:0 32px 80px -24px rgba(0,0,0,.5)}
body.tone-dark :focus-visible{outline-color:var(--mint)}
body.tone-dark .sheet :focus-visible{outline-color:var(--green)}
body.tone-dark .foot{background:var(--paper);color:var(--ink)}
body.tone-dark .legal{color:var(--ink-muted);border-color:var(--line)}

/* ── Stacked: below ~950px ───────────────────────────────────────────── */
@media (max-width:59.375rem){
  .stage{padding-top:var(--s-6);gap:var(--s-6)}
  .intro,.sheet{flex-basis:100%}
  .progress li{min-height:2.5rem}
}

/* ── Phone ───────────────────────────────────────────────────────────── */
@media (max-width:37.5rem){
  .top{padding:.75rem 1rem 0}
  .pill{padding:.5rem .5rem .5rem 1.125rem;flex-wrap:nowrap}
  .home img{width:7rem}
  .meter{display:none}
  .book{width:2.75rem;height:2.75rem;padding:0;justify-content:center;border-radius:50%}
  .book img{width:2.125rem;height:2.125rem}
  .book-t{display:none}
  .stage{padding:var(--s-5) 1rem 0;gap:var(--s-5)}
  .intro{gap:var(--s-4)}
  .display{font-size:2.5rem}
  .display br{display:none}
  .lede{font-size:1.0625rem}
  /* The trail becomes a five-part bar above the eyebrow. */
  .progress{order:-1;flex-direction:row;gap:6px;margin:0}
  .progress li{flex:1;min-height:0;display:block}
  .progress li::before{content:"";display:block;height:4px;border-radius:4px;background:var(--line)}
  .progress li.done::before{background:var(--green)}
  .progress li.now::before{background:var(--gold)}
  .progress .dot,.progress .step,.progress .note{display:none}
  body.tone-dark .progress li::before{background:rgba(255,255,255,.18)}
  body.tone-dark .progress li.done::before{background:var(--mint)}
  body.tone-dark .progress li.now::before{background:var(--gold)}
  .sheet{padding:var(--s-5) 1.125rem;border-radius:.75rem;margin:0 -.25rem}
  .choice{padding:1.125rem}
  .sheet{min-height:0}
  .choice:has(input:checked){padding:calc(1.125rem - 1px)}
  .choice.rich{font-size:1.25rem;gap:.875rem}
  .glyph{width:2.75rem;height:2.75rem;border-radius:.625rem}
  .glyph svg{width:1.625rem;height:1.625rem}
  .choices.scale{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig{font-size:3rem}
  /* A sticky bar with Back and a full-width Continue. */
  .nav{position:sticky;bottom:0;z-index:3;flex-wrap:nowrap;gap:.625rem;margin:var(--s-5) -1.125rem calc(var(--s-5) * -1);padding:.875rem 1.125rem 1.25rem;background:rgba(252,251,247,.96);border-top:1px solid var(--line);border-radius:0 0 .75rem .75rem}
  #back{width:3.25rem;padding:0;font-size:0;gap:0}
  #back span{font-size:1.125rem}
  #go{flex:1}
  .foot{margin-top:var(--s-6)}
  body.ended .sheet:has(.ending-main:not([hidden])){padding:var(--s-7) var(--s-5)}
  body.ended .sheet:has(.ending-full:not([hidden])){padding:0}
  .ending-full .hero{padding:var(--s-7) var(--s-5)}
  .next{grid-template-columns:1fr;gap:var(--s-5)}
  .next li{flex-direction:row;gap:var(--s-4)}
  .next li:not(:last-child)::after{top:2.75rem;bottom:calc(var(--s-5) * -1);left:1.3125rem;right:auto;width:2px;height:auto}
}

/* ── Book a time, in a modal over the step (spec 6.2) ──────────────── */
.booking{padding:0;border:0;border-radius:var(--r-sheet);width:min(46rem,calc(100vw - 2rem));max-width:none;height:min(52rem,calc(100vh - 2rem));max-height:none;background:var(--surface);box-shadow:0 32px 80px -24px rgba(0,0,0,.5)}
.booking::backdrop{background:rgba(11,58,43,.55)}
.booking-in{display:flex;flex-direction:column;height:100%}
.booking-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line)}
.booking-head h2{margin:0;font-size:1.25rem;font-weight:var(--w-medium);letter-spacing:var(--ls-heading)}
button.booking-x{min-height:2.75rem;width:2.75rem;padding:0;background:transparent;color:var(--ink);border:1px solid var(--line-strong);font-size:1.5rem;line-height:1}
button.booking-x:hover{background:var(--ink);color:#fff}
#booking-frame{flex:1;width:100%;border:0;display:block;background:var(--paper)}
.booking-foot{margin:0;padding:var(--s-3) var(--s-5);border-top:1px solid var(--line);text-align:center}
button.booking-later{min-height:2.5rem;background:transparent;color:var(--green);text-decoration:underline;text-underline-offset:2px;padding:0 var(--s-3)}
button.booking-later:hover{background:transparent;color:var(--green-hover)}
.booked{margin:0 0 var(--s-5);padding:var(--s-3) var(--s-4);border-radius:var(--r-card);background:var(--green-tint);color:var(--green);font-size:var(--t-small);font-weight:var(--w-medium)}
.booked[hidden]{display:none}
@media (max-width:39.9375rem){.booking{width:100vw;height:100dvh;max-height:none;border-radius:0;margin:0}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important}}