/* Signed-out homepage (Dustin, 2026-11-08): the hub hero ("bring it all together"), the problem band, How it works (three
   steps), Explore (four questions, each with a crop of the real screen, fictional Sandbox/calculator data), Who FolioVIP is
   for (three cards), then Ready to explore (Sandbox first, Request Beta Access opens the invite form in a small window) and the
   footer from home.css. Dark mode stays black. Light mode is cream from top to bottom (Dustin, 2026-11-09: the full-width navy bands were hard on the
   eyes on big screens). Navy only in the top bar and the footer, plus small accents (the hub's Demo data tag); thin gold lines
   separate the sections.
   No network calls, no inline styles; pictures are webp in /home-shots/. */
#login.home{--hv-gold:#d8bd88;--hv-gold-hi:#e6c57e;--hv-ink:#ece6d8;--hv-mute:#b9b6c4;--hv-line:rgba(216,189,136,.16);--hv-card:#0b0b13}
body.light #login.home{--hv-card:#fff;--hv-line:rgba(18,22,40,.12);--hv-ink:#121628;--hv-mute:#4f566c;--hv-gold:#7d5c1c;--hv-gold-hi:#7d5c1c}
body.site-landing{overflow-x:clip}
/* Light mode: one flat cream behind the whole homepage on computers too (the site's daytime sky fades blue-grey to cream). */
body.light.site-landing:not(.signed-in).ambient-ready:before{--mix-day:linear-gradient(#efe6d4,#efe6d4)}
.hv-defs{position:absolute;width:0;height:0;overflow:hidden}
.hv-l{display:none!important}
body.light .hv-d{display:none!important}
body.light .hv-l{display:block!important}

/* Full-width bands: the section keeps the page's 1200px column, a ::before paints edge to edge behind it. */
.hv-hero,.hv-who,.hv-problem,.hv-how,.hv-explore{position:relative;isolation:isolate}
.hv-hero::before,.hv-who::before,.hv-problem::before,.hv-how::before,.hv-explore::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none}
.hv-problem::before,.hv-how::before,.hv-explore::before,.hv-who::before{border-top:1px solid rgba(216,189,136,.14)}
body.light .hv-problem::before,body.light .hv-how::before,body.light .hv-explore::before,body.light .hv-who::before{border-top:1px solid;border-image:linear-gradient(90deg,transparent,rgba(154,116,48,.55) 20%,rgba(154,116,48,.55) 80%,transparent) 1}
/* Light: a matching gold line above Ready to explore. */
body.light #login.home .hp-close{position:relative}
body.light #login.home .hp-close::before{content:"";position:absolute;top:0;left:50%;width:100vw;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(154,116,48,.55) 20%,rgba(154,116,48,.55) 80%,transparent);pointer-events:none}
/* The problem band stands apart with a faint gold wash. */
.hv-problem::before{background:linear-gradient(90deg,rgba(216,189,136,.02),rgba(216,189,136,.075) 50%,rgba(216,189,136,.02))}
body.light .hv-problem::before{background:linear-gradient(90deg,rgba(125,92,28,.03),rgba(125,92,28,.08) 50%,rgba(125,92,28,.03))}

/* 1 Hero: what it is, who it's for, the two buttons, then the hub: six areas wired into one laptop. */
.hv-hero{padding:clamp(34px,4vw,56px) 0 64px;text-align:center;color:var(--hv-ink)}
.hv-hero::before{top:-12px;background:radial-gradient(560px 240px at 50% 76%,rgba(216,189,136,.16),transparent 70%),radial-gradient(1200px 300px at 50% 120%,rgba(60,90,170,.18),transparent 70%),#05060c}
/* Light: cream with a warm glow under the laptop. */
body.light .hv-hero::before{background:radial-gradient(620px 260px at 50% 74%,rgba(216,189,136,.34),transparent 70%)}
.hv-hero .hp-eyebrow{letter-spacing:.34em;color:var(--hv-gold)!important}
#login.home .hv-hero h1{margin:0 auto;font:600 clamp(38px,3.6vw,52px)/1.12 var(--hp-sans);letter-spacing:-.02em;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--hv-ink)}
#login.home .hv-hero h1 em{font-style:normal;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--hv-gold-hi)}
.hv-lead{max-width:56ch;margin:16px auto 0;font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--hv-mute)!important}
.hv-category{max-width:64ch;margin:12px auto 0;font-size:14px;line-height:1.5;color:var(--hv-mute)!important;opacity:.85}
.hv-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
body.light .home .hv-hero .hp-btn-gold{background:linear-gradient(180deg,#e2c27e,#c29a4c);color:#13213d;box-shadow:0 10px 30px -12px rgba(125,92,28,.55)}
body.light .home .hv-hero .hp-btn-ghost{color:#13213d;border-color:rgba(19,33,61,.35)}
.hv-hub{position:relative;width:1100px;height:430px;margin:18px auto 0}
.hv-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hv-flow path{stroke-dasharray:4 150;animation:hv-flow 3.4s linear infinite;opacity:.9}
.hv-flow path:nth-child(2n){animation-delay:-1.2s}.hv-flow path:nth-child(3n){animation-delay:-2.3s}
@keyframes hv-flow{from{stroke-dashoffset:154}to{stroke-dashoffset:0}}
body.light .hv-lines stop{stop-color:#b08a3e}
body.light .hv-flow{stroke:#8a6a2a}
.hv-chip{position:absolute;width:250px;height:68px;box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:0 20px;font:500 17px/1.2 var(--hp-sans);color:var(--hv-ink)!important;text-decoration:none;text-align:left;border-radius:14px;border:1px solid rgba(216,189,136,.38);background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:0 0 28px rgba(216,189,136,.07),inset 0 1px rgba(255,255,255,.08);transform:perspective(900px) rotateY(12deg);transition:border-color .2s}
.hv-chip:hover,.hv-chip:focus-visible{border-color:var(--hv-gold)}
body.light .hv-chip{border-color:rgba(125,92,28,.32);background:linear-gradient(135deg,#fff,#fbf7ee);box-shadow:0 8px 22px rgba(20,24,40,.08),inset 0 1px #fff}
.hv-chip svg{flex:0 0 auto;width:30px;height:30px;fill:none;stroke:var(--hv-gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hv-l1,.hv-l2,.hv-l3{left:40px}.hv-r1,.hv-r2,.hv-r3{left:810px;transform:perspective(900px) rotateY(-12deg)}
.hv-l1,.hv-r1{top:38px}.hv-l2,.hv-r2{top:171px}.hv-l3,.hv-r3{top:304px}
.hv-logo{position:absolute;left:0;right:0;top:40px;display:flex;align-items:center;justify-content:center;gap:10px;font:600 24px/1 var(--hp-num);letter-spacing:.06em;text-transform:uppercase;color:#f3ead6;text-shadow:0 0 22px rgba(216,189,136,.35)}
.hv-logo img{filter:drop-shadow(0 0 10px rgba(216,189,136,.45))}
.hv-logo b{font-weight:500;color:var(--hv-gold)}
body.light .hv-logo{color:#13213d;text-shadow:none}
body.light .hv-logo img{filter:none}
.hv-device{position:absolute;left:418px;top:108px;width:264px}
.hv-tag{position:absolute;z-index:2;right:-6px;top:-12px;padding:4px 8px;border-radius:4px;font:500 11px/1 var(--hp-num);letter-spacing:.12em;text-transform:uppercase;color:#d8bd88;background:#0b1020;border:1px solid rgba(216,189,136,.5)}
.hv-screen{overflow:hidden;border:8px solid #1a1a22;border-bottom-width:10px;border-radius:12px;background:#000;box-shadow:0 0 0 1px rgba(216,189,136,.35),0 0 60px rgba(216,189,136,.28),0 20px 50px rgba(0,0,0,.6)}
.hv-screen img{display:block;width:100%;height:auto}
.hv-base{height:10px;margin:0 -22px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#9a9aa6,#4a4a55)}
.hv-pedestal{height:34px;margin:6px -70px 0;border-radius:50%;background:radial-gradient(closest-side,rgba(243,223,178,.55),rgba(216,189,136,.18) 55%,transparent 100%)}
.hv-checks{display:flex;justify-content:center;width:max-content;max-width:100%;box-sizing:border-box;margin:8px auto 0;padding:14px 10px;list-style:none;border:1px solid rgba(216,189,136,.25);border-radius:999px;background:rgba(255,255,255,.03)}
.hv-checks li{padding:0 26px;font-size:16px;font-weight:500;color:var(--hv-ink)}
.hv-checks li+li{border-left:1px solid rgba(236,230,216,.15)}
body.light .hv-checks{border-color:rgba(125,92,28,.3);background:#fff}
body.light .hv-checks li+li{border-left-color:rgba(18,22,40,.12)}
.hv-checks li::before{content:"✓";margin-right:10px;font-weight:600;color:var(--hv-gold)}

/* 2 The problem: a centred two-line headline (white or navy, then gold), a short gold line, then the body in a narrower measure (Dustin, 2026-11-09). Same 64px padding as Who, so the gaps match. */
.hv-problem{padding:64px 0;text-align:center}
#login.home .hv-problem h2{max-width:none;margin:0 auto;font-size:clamp(28px,2.8vw,38px)!important;line-height:1.2!important;letter-spacing:-.01em!important;color:var(--hv-ink)!important;text-wrap:balance}
#login.home .hv-problem h2 span{display:block;color:var(--hv-gold-hi)}
body.light #login.home .hv-problem h2 span{color:var(--hp-gold)}
#login.home .hv-problem h2::after{content:"";display:block;width:64px;height:2px;margin:22px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--hp-gold) 20%,var(--hp-gold) 80%,transparent)}
.hv-problem p{max-width:54ch;margin:20px auto 0;font-size:16.5px;font-weight:400;line-height:1.6;color:var(--hp-muted)!important;text-wrap:balance}

/* 2b How it works: three steps in one row, icon + words, compact (PMM round 2, 2026-11-08). */
.hv-how{padding:64px 0 44px;text-align:center}
#login.home .hv-how h2{font-size:clamp(24px,2.3vw,30px)!important;line-height:1.2!important}
.hv-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:26px 0 0;padding:0;list-style:none;counter-reset:none;text-align:left}
.hv-steps li{position:relative;display:flex;gap:14px;align-items:flex-start}
.hv-steps li+li::before{content:"";position:absolute;left:-22px;top:22px;width:16px;height:1px;background:var(--hp-gold);opacity:.6}
.hv-step-icon{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--hp-gold) 55%,transparent);background:color-mix(in srgb,var(--hp-gold) 8%,transparent)}
.hv-step-icon svg{width:24px;height:24px;fill:none;stroke:var(--hp-gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#login.home .hv-steps h3{margin:2px 0 4px;font:600 17px/1.3 var(--hp-sans);color:var(--hp-text)}
.hv-step-n{margin-right:8px;font:500 13px/1 var(--hp-num);color:var(--hp-gold)}
.hv-steps p{margin:0;font-size:15px;line-height:1.5;color:var(--hp-muted)!important}

/* 3 Explore: four questions in a 2x2 (PMM, 2026-11-08). Gold label, the question, one line, and a crop of the real screen
   that answers it (fictional Sandbox/calculator data, light and dark). Each card links to its free page. */
.hv-explore{padding:56px 0 64px;text-align:center}
.hv-explore .hp-eyebrow,.hv-who .hp-eyebrow{letter-spacing:.34em}
#login.home .hv-explore h2,#login.home .hv-who h2{max-width:34ch;margin:0 auto;font-size:clamp(28px,2.8vw,38px)!important;line-height:1.2!important;letter-spacing:-.01em!important;text-wrap:balance}
#login.home .hv-explore h2 em,#login.home .hv-who h2 em{font-style:normal;color:var(--hv-gold-hi)}
body.light #login.home .hv-explore h2 em{color:var(--hp-gold)}
.hv-sub{max-width:72ch;margin:12px auto 0;font-size:17px;line-height:1.55;color:var(--hp-muted)!important}
.hv-qs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;text-align:left}
.hv-q{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44%;gap:22px;align-items:center;padding:26px 24px 26px 28px;overflow:hidden;isolation:isolate;text-decoration:none;color:inherit;border-radius:16px;border:1px solid rgba(216,189,136,.3);background:radial-gradient(320px 160px at 78% 100%,rgba(216,189,136,.16),transparent 70%),linear-gradient(160deg,#0f0f18,#08080e);box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .15s,border-color .15s}
body.light .hv-q{border-color:rgba(125,92,28,.22);background:radial-gradient(320px 160px at 78% 100%,rgba(216,189,136,.22),transparent 70%),#fff;box-shadow:0 12px 30px rgba(20,24,40,.08)}
.hv-q:hover,.hv-q:focus-visible{transform:translateY(-2px);border-color:rgba(216,189,136,.65)}
.hv-q-tag{margin:0 0 10px;font:500 11.5px/1.2 var(--hp-num);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--hv-gold) 75%,var(--hp-muted))}
body.light .hv-q-tag{color:color-mix(in srgb,var(--hp-gold) 70%,var(--hp-muted))}
/* Card headlines are gold (Dustin, 2026-11-08: "make the headers in the new boxes gold"); the small label above stays a softer, lighter gold. */
#login.home .hv-q h3{margin:0 0 12px;font:600 clamp(22px,1.9vw,27px)/1.18 var(--hp-sans);letter-spacing:-.01em;color:var(--hv-gold-hi);text-wrap:balance}
body.light #login.home .hv-q h3{color:var(--hp-gold)}
.hv-q-txt p:last-child{margin:0;font-size:16px;line-height:1.5;color:var(--hp-muted)!important}
.hv-q-vis{margin:0;overflow:hidden;border-radius:12px;border:1px solid rgba(216,189,136,.28);background:#08080f;box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 34px rgba(216,189,136,.1)}
body.light .hv-q-vis{border-color:rgba(125,92,28,.2);background:#fbf8f1;box-shadow:0 10px 26px rgba(20,24,40,.12)}
.hv-q-vis img{display:block;width:100%;height:auto}

/* 4 Who FolioVIP is for: three cards, each a crop of the real screen on top, a gold icon, title, one line and two checks.
   Light mode uses light crops on white cards. */
.hv-who{padding:64px 0;text-align:center;color:var(--hv-ink)}
.hv-who::before{background:#05060c}
body.light .hv-who::before{background:none}
#login.home .hv-who h2{color:var(--hv-ink)}
.hv-fors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;text-align:left}
.hv-for{display:flex;flex-direction:column;overflow:hidden;padding:0 26px 26px;border-radius:16px;border:1px solid rgba(216,189,136,.26);background:linear-gradient(170deg,#11111a,#08080e);box-shadow:0 18px 40px rgba(0,0,0,.35)}
/* Light: white cards with a gold outline, like Explore (no dark blocks). */
body.light .hv-for{border-color:rgba(125,92,28,.3);background:#fff;box-shadow:0 12px 30px rgba(20,24,40,.08)}
.hv-for-vis{display:grid;place-items:center;height:206px;margin:0 -26px 22px;padding:16px 18px;box-sizing:border-box;overflow:hidden;background:radial-gradient(300px 120px at 50% 100%,rgba(216,189,136,.18),transparent 70%),#07070d}
body.light .hv-for-vis{background:radial-gradient(300px 120px at 50% 100%,rgba(216,189,136,.3),transparent 70%),#f7f1e4;border-bottom:1px solid rgba(125,92,28,.16)}
body.light .hv-for-vis img{border-color:rgba(125,92,28,.22);box-shadow:0 10px 24px rgba(20,24,40,.12)}
body.light .hv-for p{border-bottom-color:rgba(18,22,40,.1)}
.hv-for-vis img{display:block;max-width:100%;max-height:174px;object-fit:contain;border-radius:8px;border:1px solid rgba(216,189,136,.22);box-shadow:0 12px 28px rgba(0,0,0,.55),0 0 30px rgba(216,189,136,.1)}
#login.home .hv-for h3{margin:0 0 8px;font:600 21px/1.25 var(--hp-sans);color:var(--hv-gold-hi)}
.hv-for p{margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid rgba(236,230,216,.12);font-size:15.5px;line-height:1.5;color:var(--hv-mute)!important}
.hv-for ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.hv-for li{position:relative;padding-left:26px;font-size:15px;line-height:1.45;color:var(--hv-ink)}
.hv-for li::before{content:"✓";position:absolute;left:0;top:0;font-weight:600;color:var(--hv-gold-hi)}

/* 5 Ready to explore: two next steps (Sandbox first), a trust line to the Privacy page, and the invite form in a small
   window that Request Beta Access opens (waitlist.js). The form is the same /api/waitlist POST. */
.hv-close-sub{max-width:52ch;margin:12px auto 0;font-size:17px;color:var(--hp-muted)!important}
.hv-paths{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:30px auto 0}
.hv-path{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 24px;border-radius:16px;border:1px solid var(--hv-line);background:color-mix(in srgb,var(--hp-text) 3%,transparent)}
.hv-path-main{border-color:color-mix(in srgb,var(--hp-gold) 55%,transparent);background:color-mix(in srgb,var(--hp-gold) 7%,transparent)}
#login.home .hv-path h3{margin:0;font:600 20px/1.25 var(--hp-sans);color:var(--hp-text)}
.hv-path p{flex:1;margin:0 0 6px;max-width:34ch;font-size:15.5px;line-height:1.5;color:var(--hp-muted)!important}
.home .hv-path .waitlist-closed{flex:0;margin:0;font-size:15px}
#get-started[data-waitlist="closed"] .hv-path-invite{display:none}
#login.home .hp-close h2{max-width:28ch;text-wrap:balance}
/* The Sandbox button stays gold in light mode too (the site's light rule makes .hp-btn-gold navy elsewhere). */
body.light .home .hp-close .hp-btn-gold{background:linear-gradient(180deg,#e2c27e,#c29a4c);color:#13213d;box-shadow:0 10px 30px -12px rgba(125,92,28,.55)}
.hv-trust{display:flex;justify-content:center;align-items:center;gap:8px;margin:20px auto 0;font-size:14px;color:var(--hp-muted)!important}
.hv-trust svg{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:var(--hp-gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.home .hv-trust a{color:var(--hp-text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--hp-gold) 60%,transparent);text-underline-offset:3px}
.hv-invite{width:min(520px,calc(100vw - 32px));max-width:none;box-sizing:border-box;padding:0;border:1px solid color-mix(in srgb,var(--hp-gold) 45%,transparent);border-radius:16px;background:#0b0b13;color:var(--hp-text);box-shadow:0 30px 80px rgba(0,0,0,.6)}
body.light .hv-invite{background:#fff}
.hv-invite::backdrop{background:rgba(3,4,10,.72)}
.hp-close .hv-invite .waitlist-form{position:relative;max-width:none;margin:0;padding:28px 26px 22px;text-align:left}
#login.home .hv-invite h3{margin:0 32px 6px 0;font:600 22px/1.25 var(--hp-sans);color:var(--hp-text)}
.hv-invite-sub{margin:0 0 18px;font-size:15px;color:var(--hp-muted)}
.home .hv-invite-close{position:absolute;top:10px;right:10px;width:36px;height:36px;min-height:0;padding:0;border:0;border-radius:50%!important;background:transparent;color:var(--hp-muted);font:400 24px/36px var(--hp-sans);cursor:pointer}
.home .hv-invite-close:hover{color:var(--hp-text);background:color-mix(in srgb,var(--hp-text) 8%,transparent)}
.hp-close .hv-invite .hp-next{margin:12px 0 0;font-size:15px}
.hp-close .hv-invite .waitlist-status{margin:0 0 14px;max-width:none;color:var(--hp-red)}

/* Footer: navy in light mode (Dustin, 2026-11-09), edge to edge and down to the bottom of the page. */
body.light.site-landing:not(.signed-in) .hp-foot{--hp-text:#ece6d8;--hp-muted:#b9b6c4;--hp-gold:#d8bd88;background:#132648;box-shadow:0 0 0 100vmax #132648;clip-path:inset(0 -100vmax -100vmax);padding-top:30px}
body.light.site-landing:not(.signed-in) .hp-foot::before{left:50%;right:auto;width:100vw;transform:translateX(-50%);background:rgba(214,179,108,.55)}

@media (prefers-reduced-motion:reduce){.hv-flow{display:none}.hv-q{transition:none}}

/* Between computer and phone the hub shrinks to fit; Explore and Who go to one column. */
@media (max-width:1180px) and (min-width:761px){.hv-hub{zoom:.82}}
@media (max-width:1080px) and (min-width:761px){.hv-qs{grid-template-columns:1fr}.hv-q{max-width:680px;width:100%;margin:0 auto;box-sizing:border-box}}
@media (max-width:960px) and (min-width:761px){.hv-hub{zoom:.62}.hv-fors{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}

/* Phones */
@media (max-width:760px){
 .hv-hero{padding:30px 0 48px}
 .hv-hero .hp-eyebrow,.hv-explore .hp-eyebrow,.hv-who .hp-eyebrow{letter-spacing:.16em;font-size:11px}
 #login.home .hv-hero h1{font-size:34px}
 .hv-hero h1 br{display:none}
 .hv-lead{font-size:16px}
 .hv-ctas{flex-direction:column}.hv-ctas .hp-btn{width:100%;box-sizing:border-box}
 .hv-hub{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:auto;height:auto;margin:30px 0 0}
 .hv-lines{display:none}
 .hv-logo{position:static;grid-column:1/-1;order:-2;margin-bottom:4px;font-size:20px}
 .hv-logo img{width:32px;height:32px}
 .hv-device{position:relative;left:auto;top:auto;grid-column:1/-1;order:-1;width:72%;margin:8px auto 14px}
 .hv-tag{right:-8px}
 .hv-base{margin:0 -16px}.hv-pedestal{height:24px;margin:4px -40px 0}
 .hv-chip,.hv-r1,.hv-r2,.hv-r3{position:static;width:auto;height:54px;gap:10px;padding:0 12px;font-size:14px;border-radius:12px;transform:none}
 .hv-chip svg{width:22px;height:22px}
 .hv-checks{flex-direction:column;align-items:flex-start;gap:8px;width:auto;margin-top:22px;padding:14px 18px;border-radius:16px}
 .hv-checks li{padding:0;font-size:15px}.hv-checks li+li{border-left:0}
 .hv-problem{padding:48px 0}
 #login.home .hv-problem h2{font-size:26px!important}
 #login.home .hv-problem h2::after{margin-top:18px}
 .hv-problem p{margin-top:16px;font-size:16px}
 .hv-category{font-size:13px}
 .hv-how{padding:48px 0 32px}
 #login.home .hv-how h2{font-size:22px!important}
 .hv-steps{grid-template-columns:1fr;gap:14px;margin-top:18px}
 .hv-steps li+li::before{display:none}
 .hv-step-icon{width:38px;height:38px}.hv-step-icon svg{width:20px;height:20px}
 #login.home .hv-steps h3{font-size:16px;margin:0 0 2px}
 .hv-steps p{font-size:14.5px}
 .hv-paths{grid-template-columns:1fr;gap:12px;margin-top:22px}
 .hv-path{padding:20px 18px}
 .hv-path .hp-btn{width:100%;box-sizing:border-box}
 .hv-trust{align-items:flex-start;text-align:left}
 .hp-close .hv-invite .waitlist-form{padding:24px 18px 18px}
 .hp-close .hv-invite .waitlist-row{flex-direction:column;align-items:stretch}
 .hv-explore{padding:44px 0 48px}
 #login.home .hv-explore h2,#login.home .hv-who h2{font-size:26px!important}
 .hv-sub{font-size:16px}
 .hv-qs{grid-template-columns:1fr;gap:16px;margin-top:24px}
 .hv-q{grid-template-columns:1fr;gap:18px;padding:22px 20px}
 #login.home .hv-q h3{font-size:22px;margin-bottom:8px}
 .hv-q-txt p:last-child{font-size:15.5px}
 .hv-q-vis{width:66%;justify-self:center}
 .hv-who{padding:48px 0}
 .hv-fors{grid-template-columns:1fr;gap:16px;margin-top:24px}
 .hv-for{padding:0 20px 22px}
 .hv-for-vis{height:176px;margin:0 -20px 18px;padding:14px 16px}
 .hv-for-vis img{max-height:148px}
}