/* Signed-out homepage, "Don't be Panicked Peter" (Dustin approved option 4D, round 7, 2026-11-07). Loaded after mix-theme.css.
   Every rule is scoped to #login.home (or the landing's header), so the signed-in app is untouched. No boxes or cards:
   space, type, colour and thin lines. The two evening scenes stay dark in both themes. Script: home-story.js. */
.home{--hp-text:#eee9df;--hp-muted:#a9a6b8;--hp-line:rgba(238,233,223,.12);--hp-gold:#d8bd88;--hp-gold-ink:#1a1204;--hp-red:#ff6b7d;--hp-menu:#12131d;--hp-bg:#05060c;
 --hp-label:'IBM Plex Sans Condensed','IBM Plex Sans',system-ui,sans-serif;--hp-num:'IBM Plex Mono',ui-monospace,monospace;--hp-sans:'IBM Plex Sans',system-ui,sans-serif;
 --drop:0;--dip-pos:.333;--lvl:0;color:var(--hp-text);font-family:var(--hp-sans);margin:0 auto;max-width:1200px}
body.light .home{--hp-text:#121628;--hp-muted:#4f566c;--hp-line:rgba(18,22,40,.13);--hp-gold:#7d5c1c;--hp-gold-ink:#fffaf0;--hp-red:#c62f45;--hp-menu:#fff;--hp-bg:#eef0f6}
#login.home{max-width:1200px;margin-top:0}
html:has(>body.site-landing:not(.signed-in)){overflow-x:clip}
.home p{color:inherit}
.home .hp-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The top bar is sticky on computers, so links to these sections stop below it. */
.home :is(#how,#get-started){scroll-margin-top:100px}
/* Pricing is the price line under Request an invite; the link stops with the closing line and form in view. */
.home #pricing{scroll-margin-top:clamp(220px,32vh,320px)}

/* Buttons */
.home .hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px!important;font:600 16px/1 var(--hp-sans)!important;letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .15s,background-color .2s,color .2s}
.home .hp-btn:hover{transform:translateY(-1px)}
.home .hp-btn-gold{background:var(--hp-gold);color:var(--hp-gold-ink);box-shadow:0 10px 40px -10px color-mix(in srgb,var(--hp-gold) 70%,transparent)}
body.light .home .hp-btn-gold{background:#121628;color:#f3f1ec}
.home .hp-btn-ghost{background:transparent;color:var(--hp-text);border-color:color-mix(in srgb,var(--hp-text) 30%,transparent)}
.home :focus-visible{outline:2px solid var(--hp-gold);outline-offset:3px}

/* Hero */
.hp-hero{position:relative;padding:clamp(2px,.4vw,6px) 0 clamp(24px,4vw,56px);text-align:center}
.hp-eyebrow{margin:0 0 10px;font:500 13px/1 var(--hp-label);letter-spacing:.24em;text-transform:uppercase;color:var(--hp-gold)!important}
.home h1{margin:0;font:500 clamp(40px,calc((100vw - 110px)/10.8),100px)/1 var(--hp-sans);letter-spacing:-.04em;
 background:linear-gradient(180deg,var(--hp-text) 30%,color-mix(in srgb,var(--hp-gold) 80%,var(--hp-text)));-webkit-background-clip:text;background-clip:text;color:transparent}
.home h1 em{font-style:normal;background:linear-gradient(180deg,color-mix(in srgb,var(--hp-red) 70%,var(--hp-text)),var(--hp-red));-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-sub{margin:10px auto 0;max-width:58ch;text-wrap:balance;font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--hp-muted)!important}

/* The split scene: two evening stills, one market. They dissolve into the page on every edge. */
.hp-scene{position:relative;margin:clamp(4px,.6vw,10px) 0 0;display:grid;grid-template-columns:1fr 1fr;--text:#eee9df}
/* The scene and the How it works area run to the screen edges and clip there (margin and padding cancel, so the content stays put):
   the pictures' soft edges and the hub never stick out past the screen, which some phones and tablets would let you pan to. */
.hp-scene,.hp-flow{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);overflow-x:clip}
/* The pictures are back at their first size (Dustin, 2026-11-07: "return the pictures to the size they were before"); the slider sits one short scroll down on laptops. */
.hp-side{position:relative;height:clamp(360px,35vw,490px);min-width:0;color:#eee9df}
.hp-who{position:absolute;left:clamp(12px,2vw,28px);top:9%;margin:0;z-index:3;font:500 12px/1 var(--hp-label);letter-spacing:.24em;text-transform:uppercase;color:var(--hp-gold)!important;text-shadow:0 1px 12px #000}
.hp-panic .hp-who{color:var(--hp-red)!important}
/* Each label sits on its picture, not over the dark page around it (Dustin, 2026-11-07): VIP Peter's at the lit window's left edge,
   Panicked Peter's mirrored just inside his picture's top left. */
@media (min-width:761px){.hp-side .hp-who{top:16%}.hp-panic .hp-who{left:9%}.hp-calm .hp-who{left:22%}.hp-side .hp-thought{top:24%}}
.hp-art{position:absolute;inset:0 -6%;z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side at 50% 52%,#000 58%,transparent);mask-image:radial-gradient(closest-side at 50% 52%,#000 58%,transparent)}
.hp-panic .hp-art{inset:0 -2% 0 -6%;-webkit-mask-image:radial-gradient(closest-side at 46% 56%,#000 68%,transparent);mask-image:radial-gradient(closest-side at 46% 56%,#000 68%,transparent)}
.hp-calm .hp-art{inset:0 -6% 0 -2%}
.hp-stage{position:absolute;inset:0;overflow:hidden}
.hp-cam{position:absolute;inset:0;animation:hp-push 26s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes hp-push{from{transform:scale(1.01)}to{transform:scale(1.07)}}
.hp-img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.hp-panic .hp-img{filter:contrast(1.12)}
.hp-worry{transition:filter .6s}
/* Panicked Peter reads clearly at 0% (his shirt and face, not a near-black shape) and his red glow builds as the market falls. */
.hp-panic .hp-worry{filter:brightness(calc(1.5 - var(--drop)*.5)) saturate(calc(.62 + var(--drop)*1.3)) contrast(1.04)}
.hp-smash{opacity:0;transition:opacity .25s}
:is([data-panic="2"],[data-panic="3"]) .hp-smash{opacity:1}
.hp-buy{opacity:0;transition:opacity .5s}
[data-alert="on"] .hp-buy{opacity:1}
.hp-red,.hp-flash{position:absolute;inset:0;pointer-events:none}
.hp-red{background:radial-gradient(50% 50% at 36% 74%,rgba(255,40,70,.5),transparent 70%);mix-blend-mode:screen;opacity:calc(var(--drop)*1.1);transition:opacity .4s}
.hp-flash{background:radial-gradient(36% 36% at 28% 80%,#ff9aa6,transparent 70%);opacity:0}
[data-panic="3"] .hp-flash{animation:hp-flash 2.6s ease-out infinite}
[data-panic="3"] .hp-panic .hp-stage{animation:hp-shake .32s steps(2) infinite}
@keyframes hp-flash{0%{opacity:.35}12%,100%{opacity:0}}
@keyframes hp-shake{0%{transform:translate(0,0)}50%{transform:translate(-3px,2px)}100%{transform:translate(2px,-2px)}}
.hp-ping{fill:#ffd27a;opacity:0;transition:opacity .3s;filter:drop-shadow(0 0 8px #ffc06a)}
[data-alert="on"] .hp-ping{opacity:1;animation:hp-ping 1.6s ease-in-out infinite}
@keyframes hp-ping{50%{opacity:.35}}
@keyframes hp-jitter{50%{translate:1.5px -1px}}

/* Panicked Peter's thought: floating words, louder as the market falls. */
.hp-thought{position:absolute;z-index:4;left:6%;top:18%;max-width:60%;margin:0;color:#eee9df!important;text-align:left;
 font:500 italic clamp(18px,1.8vw,24px)/1.2 var(--hp-sans);letter-spacing:-.01em;text-shadow:0 2px 18px #000,0 0 2px #000;transform-origin:0 100%;transform:scale(calc(1 + var(--lvl)*.09));transition:transform .25s,color .25s}
:is([data-panic="2"],[data-panic="3"]) .hp-thought{color:#ff8a98!important;font-style:normal;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 18px rgba(255,40,70,.85),0 2px 18px #000}
[data-panic="3"] .hp-thought{animation:hp-jitter .18s steps(2) infinite}

/* VIP Peter's alert: a line of light, no card. */
.hp-notify{position:absolute;z-index:4;right:6%;top:15%;width:min(60%,300px);display:grid;text-align:right}
.hp-notify>p{grid-area:1/1;margin:0;color:#eee9df!important;font-size:16px;line-height:1.35;text-shadow:0 2px 16px #000,0 0 2px #000;transition:opacity .35s,transform .35s}
.hp-app{display:block;margin-bottom:3px;font:500 10px/1 var(--hp-label);letter-spacing:.22em;text-transform:uppercase;color:#d8bd88}
.hp-wait{color:rgba(238,233,223,.75)!important}
.hp-alert{opacity:0;transform:translateY(8px) scale(.96);pointer-events:none}
.hp-alert b{display:block;font:500 clamp(19px,1.9vw,24px)/1.2 var(--hp-sans);color:#ffe2a8;text-shadow:0 0 22px rgba(255,190,90,.55),0 2px 16px #000}
[data-alert="on"] .hp-wait{opacity:0;transform:scale(.9)}
[data-alert="on"] .hp-alert{opacity:1;transform:none}

/* Light mode keeps the original dark evening band behind the scene (Dustin, 2026-11-07: "go back to the original"), without its grey fog:
   the band is fully dark from just above the labels, so the tops of the pictures stay clear, and it fades out above the plan sentence.
   The labels inside it use the dark theme's red and gold. */
body.light .hp-scene{isolation:isolate}
body.light .hp-scene::before{content:"";position:absolute;top:-6px;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;pointer-events:none;background:linear-gradient(transparent,#05060c 22px,#05060c calc(100% - 56px),transparent)}
body.light .hp-side{--hp-red:#ff6b7d;--hp-gold:#d8bd88}

/* Plan sentence, slider, buttons */
.hp-controls{display:grid;justify-items:center;gap:clamp(12px,1.4vw,18px);margin-top:clamp(4px,.8vw,12px)}
.hp-plan{max-width:30ch;font:400 clamp(24px,3vw,38px)/1.3 var(--hp-sans);letter-spacing:-.015em}
.hp-pick-wrap{position:relative;display:inline-block}
.home .hp-pick{background:none;border:0;border-bottom:1px solid color-mix(in srgb,var(--hp-gold) 50%,transparent);border-radius:0!important;padding:0 .08em;margin:0;font:inherit;letter-spacing:inherit;color:var(--hp-gold);cursor:pointer;line-height:1.15;min-height:0}
.hp-pick::after{content:"";display:inline-block;width:.28em;height:.28em;margin:0 0 .16em .22em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);vertical-align:middle}
.hp-pick-list{position:absolute;z-index:30;left:50%;top:calc(100% + 10px);transform:translateX(-50%);min-width:max(100%,140px);padding:8px;background:var(--hp-menu);border-radius:14px;box-shadow:0 18px 50px -12px rgba(0,0,0,.5);text-align:left;font:500 16px/1.2 var(--hp-sans);letter-spacing:0;white-space:nowrap;color:var(--hp-text)}
.hp-pick-list[hidden]{display:none}
.hp-pick-list [role=option]{display:block;padding:10px 14px 10px 30px;border-radius:8px;cursor:pointer;position:relative}
.hp-pick-list [role=option]:hover,.hp-pick-list [role=option]:focus{background:color-mix(in srgb,var(--hp-text) 9%,transparent);outline:none}
.hp-pick-list [aria-selected=true]::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:4px;border-left:2px solid var(--hp-gold);border-bottom:2px solid var(--hp-gold);transform:translateY(-70%) rotate(-45deg)}

.hp-market{width:min(100%,620px);--track-h:2px;--thumb:20px}
.hp-market-name{display:inline-flex;align-items:baseline;gap:2px}
.hp-market-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.home .hp-market-head label{display:block;font:500 12px/1 var(--hp-label);letter-spacing:.18em;text-transform:uppercase;color:var(--hp-muted)}
.hp-market-head output{font:400 22px/1 var(--hp-num);color:var(--hp-text);min-width:4ch;text-align:right}
[data-alert="on"] .hp-market-head output{color:var(--hp-red)}
.hp-track{position:relative;height:var(--thumb);display:flex;align-items:center}
.home .hp-track input{position:relative;z-index:2;width:100%;height:var(--thumb);margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.hp-track input::-webkit-slider-runnable-track{height:var(--track-h);border-radius:99px;background:linear-gradient(90deg,var(--hp-red) calc(var(--drop)*100%),var(--hp-line) 0)}
.hp-track input::-moz-range-track{height:var(--track-h);border-radius:99px;background:linear-gradient(90deg,var(--hp-red) calc(var(--drop)*100%),var(--hp-line) 0)}
.hp-track input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb);height:var(--thumb);margin-top:calc((var(--track-h) - var(--thumb))/2);border-radius:50%;background:var(--hp-text);border:0;box-shadow:0 0 0 6px color-mix(in srgb,var(--hp-text) 10%,transparent),0 0 24px color-mix(in srgb,var(--hp-gold) 50%,transparent)}
.hp-track input::-moz-range-thumb{width:var(--thumb);height:var(--thumb);border-radius:50%;background:var(--hp-text);border:0;box-shadow:0 0 0 6px color-mix(in srgb,var(--hp-text) 10%,transparent),0 0 24px color-mix(in srgb,var(--hp-gold) 50%,transparent)}
.hp-track input:focus-visible{outline:none}
.hp-track input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--hp-gold);outline-offset:3px}
.hp-track input:focus-visible::-moz-range-thumb{outline:2px solid var(--hp-gold);outline-offset:3px}
.hp-dip-mark{position:absolute;z-index:1;top:50%;left:calc(var(--thumb)/2 + var(--dip-pos)*(100% - var(--thumb)));width:2px;height:18px;background:var(--hp-gold);transform:translate(-50%,-50%);border-radius:2px;box-shadow:0 0 12px var(--hp-gold)}
.hp-dip-mark>span{position:absolute;top:16px;left:50%;transform:translateX(-50%);white-space:nowrap;font:500 11px/1 var(--hp-label);letter-spacing:.12em;text-transform:uppercase;color:var(--hp-gold)}
.hp-ticks{display:flex;justify-content:space-between;margin-top:26px;font:400 12px/1 var(--hp-num);color:var(--hp-muted)}
.hp-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* Section headings */
/* The old landing's section-title style (small capitals after a gold rule) is undone here. */
#login.home h2{margin:0;padding:0!important;font:500 clamp(30px,4vw,52px)/1.1 var(--hp-sans)!important;letter-spacing:-.03em!important;text-transform:none!important;text-align:center;background:none!important;color:var(--hp-text)!important}
.hp-how,.hp-close{padding:clamp(40px,5.6vw,84px) 0 0}

/* How it works: one line flowing down through 1, 2, 3, over a faint hub of everything FolioVIP covers. */
/* Computers: a little more room under the heading (2026-11-07) so the raised hub clears it; phones keep the old gap. */
.hp-flow{position:relative;margin-top:76px;padding-top:clamp(70px,7.5vw,100px)}
.hp-flow-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.hp-flow-line path{fill:none;stroke:var(--hp-gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--hp-gold) 60%,transparent))}
.hp-steps{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;gap:clamp(36px,5vw,70px)}
.hp-step{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px;max-width:520px;text-align:left;transition:opacity .8s,transform .8s}
.hp-step>div{justify-self:start}
.hp-step:nth-child(2){margin-left:auto}
.hp-step:nth-child(3){margin-left:12%}
.home.hp-js .hp-step:not(.lit){opacity:.18;transform:translateY(16px)}
.hp-num{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--hp-bg);border:1.5px solid var(--hp-gold);color:var(--hp-gold);font:500 22px/1 var(--hp-sans);box-shadow:0 0 24px -4px color-mix(in srgb,var(--hp-gold) 60%,transparent)}
.lit .hp-num{background:color-mix(in srgb,var(--hp-gold) 14%,var(--hp-bg))}
.home .hp-step h3{margin:0 0 4px;font:600 21px/1.2 var(--hp-sans);letter-spacing:0;color:var(--hp-text)}
.home .hp-step p{margin:0;color:var(--hp-muted)}
/* Computers: the hub sits higher and about 12% smaller (Dustin, 2026-11-07, option A), so the gold line passes under "Your strategy"
   instead of through it and the oval stays below the heading. Phones keep their own size and place (below). */
.hp-hub{position:absolute;left:50%;top:50%;width:min(76%,800px);height:auto;aspect-ratio:1000/560;transform:translate(-50%,calc(-50% - clamp(54px,5.2vw,76px)));z-index:0;pointer-events:none;overflow:visible}
/* The hub's lines and dots stay faint; its six words stay steady and readable (Dustin, 2026-11-07: they seemed to vanish). */
.hp-hub>:not(.hp-hub-labels){opacity:.2;transition:opacity 1.2s}
.hp-flow:has(.hp-step.lit) .hp-hub>:not(.hp-hub-labels){opacity:.55}
.hp-hub-labels{opacity:.45;transition:opacity 1.2s}
.hp-flow:has(.hp-step.lit) .hp-hub-labels{opacity:1}
.hp-hub-ring,.hp-hub-orbit{fill:none;stroke:color-mix(in srgb,var(--hp-gold) 14%,transparent);stroke-width:1}
.hp-hub-orbit{stroke-dasharray:2 7;animation:hp-spin 40s linear infinite}
@keyframes hp-spin{to{stroke-dashoffset:-360}}
.hp-hub-spokes line{stroke:color-mix(in srgb,var(--hp-gold) 20%,transparent);stroke-width:1}
.hp-hub-nodes circle{fill:color-mix(in srgb,var(--hp-gold) 45%,transparent)}
.hp-hub-core{fill:color-mix(in srgb,var(--hp-gold) 5%,transparent);stroke:color-mix(in srgb,var(--hp-gold) 32%,transparent);stroke-width:1}
/* The FolioVIP mark as a ring around the core: a thin circle with a heavier right half, echoing the half-filled logo. */
.hp-hub-mark circle{fill:none;stroke:color-mix(in srgb,var(--hp-gold) 26%,transparent);stroke-width:1}
.hp-hub-mark path{fill:none;stroke:color-mix(in srgb,var(--hp-gold) 42%,transparent);stroke-width:3.5;stroke-linecap:round}
/* A slow, faint twinkle: tiny stars around and inside the oval and the six nodes fade in and out at staggered times. */
.hp-hub-stars circle{fill:#f3e3bd;opacity:.25;animation:hp-twinkle 5.2s ease-in-out infinite}
body.light .hp-hub-stars circle{fill:var(--hp-gold)}
.hp-hub-stars circle:nth-child(3n+1){animation-duration:6.4s;animation-delay:-1.3s}
.hp-hub-stars circle:nth-child(3n+2){animation-duration:4.6s;animation-delay:-3.1s}
.hp-hub-stars circle:nth-child(4n){animation-delay:-2.2s}
.hp-hub-stars circle:nth-child(5n){animation-duration:7.2s;animation-delay:-4.4s}
.hp-hub-nodes circle{animation:hp-node 18s ease-in-out infinite}
.hp-hub-nodes circle:nth-child(2){animation-delay:-9s}.hp-hub-nodes circle:nth-child(3){animation-delay:-3s}
.hp-hub-nodes circle:nth-child(4){animation-delay:-12s}.hp-hub-nodes circle:nth-child(5){animation-delay:-6s}.hp-hub-nodes circle:nth-child(6){animation-delay:-15s}
@keyframes hp-twinkle{0%,100%{opacity:.12}50%{opacity:.85}}
/* Each spoke's dot sparkles for about 2.5s of an 18s cycle, 3s apart in a scattered order: one, sometimes two, at a time. */
@keyframes hp-node{0%,14%,100%{opacity:.55;filter:none}7%{opacity:1;filter:drop-shadow(0 0 5px var(--hp-gold))}}
.hp-hub-core-t{font:500 13px/1 var(--hp-label);letter-spacing:.18em;text-transform:uppercase;fill:color-mix(in srgb,var(--hp-gold) 55%,transparent)}
.hp-hub-labels text{font:500 12px/1 var(--hp-label);letter-spacing:.16em;text-transform:uppercase;fill:color-mix(in srgb,var(--hp-text) 62%,transparent)}

/* Closing line in gold, with the invite form (a plain POST to /api/waitlist; waitlist.js shows the result). */
.hp-close{text-align:center}
#login.home .hp-close h2{max-width:22ch;margin:0 auto;font-size:clamp(32px,4.4vw,60px)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--hp-gold) 70%,var(--hp-text)),var(--hp-gold))!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.hp-close .waitlist-form{max-width:520px;margin:clamp(18px,2.4vw,28px) auto 0;text-align:left}
.home .hp-close .waitlist-label{display:block;margin-bottom:8px;font:500 12px/1 var(--hp-label);letter-spacing:.18em;text-transform:uppercase;color:var(--hp-muted)}
.hp-close .waitlist-row{display:flex;gap:10px;align-items:center}
.home .hp-close input[type=email]{flex:1;min-width:0;height:52px;padding:0 4px;background:transparent;border:0;border-bottom:1.5px solid var(--hp-line);border-radius:0!important;font-size:18px;color:var(--hp-text)}
.home .hp-close input[type=email]:focus{outline:none;border-bottom-color:var(--hp-gold)}
.hp-close input::placeholder{color:var(--hp-muted);opacity:.8}
.hp-close .waitlist-note{margin:12px 0 0;font-size:14px;color:var(--hp-muted)}
.hp-close .waitlist-note a,.hp-close .waitlist-closed a{color:inherit}
.hp-close .waitlist-check{margin-top:12px}
.hp-close .waitlist-closed{margin:clamp(18px,2.4vw,28px) auto 0;color:var(--hp-muted);font-size:17px}
.hp-close .waitlist-status{max-width:520px;margin:16px auto 0;font-size:15px;color:var(--hp-text)}
.hp-close .waitlist-status:focus{outline:none}

/* Price and what happens next, right under Request an invite */
.hp-close .hp-price-line{position:relative;margin:20px 0 0;padding-top:16px;font-size:16px;color:var(--hp-muted)}
.hp-close .hp-price-line::before{content:"";position:absolute;left:0;top:0;width:48px;height:1px;background:var(--hp-gold)}
.hp-close .hp-price-line b{margin-right:.35em;font:500 clamp(24px,2.4vw,30px)/1 var(--hp-sans);letter-spacing:-.02em;background:linear-gradient(180deg,color-mix(in srgb,var(--hp-gold) 70%,var(--hp-text)),var(--hp-gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-close .hp-next{margin:6px 0 0;font-size:16px;color:var(--hp-text)}


/* Trust, unboxed, at the bottom */
.hp-foot{position:relative;margin:clamp(44px,6vw,88px) 0 0;padding:22px 0 30px;text-align:center;font-size:14px;color:var(--hp-muted)}
.hp-foot::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--hp-line),transparent)}
.hp-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0}
.hp-trust li+li::before{content:"·";margin:0 12px;color:var(--hp-gold)}
.hp-operator{margin:12px 0 0}
.hp-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:16px 0 0}
.home .hp-legal a{color:var(--hp-text)}
.hp-fine{margin:10px 0 0}

/* Narrow computer windows: the steps take most of the width, so the hub's labels hide as on phones (the dots and lines stay). */
@media (max-width:880px){.hp-hub-labels{display:none}}

/* Phones */
@media (max-width:760px){
 .hp-scene{grid-template-columns:1fr;gap:0;margin-top:clamp(12px,3vw,22px)}
 .hp-side{height:clamp(280px,78vw,340px)}
 .hp-art,.hp-panic .hp-art,.hp-calm .hp-art{inset:-6% -14%}
 .hp-thought{left:5%;top:17%;max-width:90%;font-size:19px;white-space:nowrap}
 .hp-notify{right:5%;top:15%;width:86%}
 .hp-alert{text-wrap:balance}
 .hp-market-head output{font-size:20px}
 .hp-step,.hp-step:nth-child(2),.hp-step:nth-child(3){margin-left:0;align-items:start}
 .hp-num{width:44px;height:44px;font-size:18px}
 .hp-hub{width:130%;transform:translate(-44%,-46%)}
 .hp-flow{margin-top:clamp(8px,1.4vw,18px)}
 .hp-hub-labels,.hp-hub-core-t{display:none}
 .hp-flow:has(.hp-step.lit) .hp-hub>:not(.hp-hub-labels){opacity:.7}
}
@media (max-width:520px){.hp-close .waitlist-row{flex-direction:column;align-items:stretch}.hp-close .hp-btn{width:100%}}

/* Reduced motion: the story still reads, nothing moves. */
@media (prefers-reduced-motion:reduce){
 .home *,.home *::before,.home *::after{animation:none!important;transition:none!important}
 .home.hp-js .hp-step:not(.lit){opacity:1;transform:none}
}