/* Signed-out landing page, plus the three-line calculator directory it shares with calculators.html.
   Loaded after mix-theme.css. Everything here is scoped to the landing's own classes, so the app is untouched. */

/* The holiday band is 100vw wide, which counts the scrollbar where one takes up space; it must not scroll the page sideways. */
html:has(>body.site-landing:not(.signed-in)){overflow-x:clip}

/* Hero */
.landing-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding:30px 0 26px}
.landing .landing-copy h1{font-size:clamp(32px,3.3vw,46px);font-weight:650;letter-spacing:-1.2px;line-height:1.1;margin:0 0 16px}
.landing .landing-copy h1 span{display:block}
.landing-copy .landing-lede{font-size:18px;line-height:1.5;margin:0 0 24px;max-width:520px;color:var(--muted)}
.landing-copy .landing-note{margin:10px 0 0;color:var(--muted)}
.landing-textlink{margin:16px 0 0;font-size:15px}
.landing-textlink a{color:color-mix(in srgb,var(--gold) 85%,var(--text));text-underline-offset:3px}

/* Hero visual: the accounts card replay. Its numbers stay in the dark theme on both site themes, so light mode gives it a navy box (mix-theme.css). */
.lr-card{--lr-text:#eafbf2;--lr-muted:#94a3b8;--lr-gold:#d8bd88;--lr-line:rgba(216,189,136,.28);position:relative;margin:0;padding:26px 28px 22px;display:grid;gap:20px;border:1px solid var(--border);color:var(--lr-text);font-variant-numeric:tabular-nums}
.lr-card small{display:block;font:500 11px var(--mix-cond);letter-spacing:.16em;text-transform:uppercase;color:var(--lr-muted)}
.lr-tag{position:absolute;top:10px;right:12px;font:500 10px var(--mix-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--lr-gold);border:1px solid var(--lr-line);border-radius:4px;padding:2px 7px}
.lr-values{display:grid;gap:14px;text-align:center;opacity:var(--lr-fade,1)}
.lr-nw strong{display:block;margin-top:6px;font:300 clamp(40px,4.6vw,62px)/1 var(--mix-mono);letter-spacing:-.04em;white-space:nowrap;text-shadow:0 1px 0 #6fae97,0 0 2px rgba(191,247,220,.6),0 0 30px rgba(95,214,184,.32)}
.lr-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lr-period{display:block;margin-top:4px;font:400 12px var(--mix-sans);color:var(--lr-muted)}
.lr-pair strong{display:block;margin-top:6px;font:300 clamp(22px,2.2vw,30px)/1.1 var(--mix-mono);letter-spacing:-.03em;white-space:nowrap}
.lr-stress{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:22px;align-items:center;padding-top:16px;border-top:1px solid var(--lr-line);opacity:var(--lr-fade,1)}
.lr-gauge{position:relative;text-align:center}
.lr-gauge svg{display:block;width:100%;max-width:190px;height:auto;margin:0 auto}
.lr-gauge strong{display:block;margin-top:-2px;font:300 25px/1.1 var(--mix-mono);letter-spacing:-.03em}
.lr-gauge small{margin-top:4px}
.lr-crash{min-width:0}
.lr-crash svg{display:block;width:100%;height:auto;margin:6px 0 8px;overflow:visible}
.lr-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lr-row b{font:400 13px var(--mix-mono);color:var(--lr-text)}

/* Free tools: the demo on the left, the calculators on the right */
.landing-freetools{margin:40px 0 0}
.landing-freetools-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.landing-freetool-demo h3{margin:0 0 6px;font-size:20px;font-weight:500;letter-spacing:-.01em}
.landing-freetool-demo p{margin:0 0 16px;font-size:16px;line-height:1.5;color:var(--muted)}

/* The directory: three plain lines, each a link. calculators.html marks the open calculator's line. */
.calc-directory{display:grid}
.calc-directory a{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:13px 2px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border)}
.calc-directory a:first-child{border-top:1px solid var(--border)}
.calc-directory strong{font-size:16px;font-weight:600}
.calc-directory span{font-size:14px;line-height:1.4;color:var(--muted)}
.calc-directory i{font-style:normal;color:var(--gold);transition:transform .15s}
.calc-directory a:hover strong,.calc-directory a:focus-visible strong{color:color-mix(in srgb,var(--gold) 85%,var(--text))}
.calc-directory a:hover i,.calc-directory a:focus-visible i{transform:translateX(3px)}
.public-main>.calc-directory{max-width:760px;margin:6px 0 26px}
:is(body:has([data-calc=budget]:not([hidden])) .calc-directory a[href="/budget-calculator"],body:has([data-calc=wealth]:not([hidden])) .calc-directory a[href="/wealth-calculator"],body:has([data-calc=loan]:not([hidden])) .calc-directory a[href="/loan-calculator"]) strong{color:color-mix(in srgb,var(--gold) 85%,var(--text))}

/* The problem: one short block under the free tools */
.landing-problem{margin:48px 0 0}
.landing-problem p{margin:0;max-width:780px;font-size:clamp(20px,2vw,24px);font-weight:500;line-height:1.4;letter-spacing:-.01em;color:var(--text)}

/* By the numbers: the server writes the tiles from landing-stats.json. An article is already a site card (mix-theme.css). */
.landing-numbers{margin:40px 0 0}
.landing-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}
.landing-stat{display:flex;flex-direction:column;gap:10px;margin:0;padding:22px 24px 18px;border:1px solid var(--border)}
.landing-stat strong{font:300 clamp(34px,3.2vw,42px)/1.05 var(--mix-mono);letter-spacing:-.03em;color:color-mix(in srgb,var(--gold) 85%,var(--text))}
.landing-stat p{margin:0;font-size:15px;line-height:1.45}
.landing-stat a{margin-top:auto;padding-top:6px;font-size:13px;line-height:1.4;color:var(--muted);text-underline-offset:3px}
body.light .landing-stat{border-top:2px solid var(--gold-line)!important;box-shadow:0 1px 0 rgba(20,40,75,.05),0 18px 36px -24px rgba(20,40,75,.45)}

/* Benefits: one line and one small cropped screenshot each */
.landing-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:48px 0 0}
.landing-benefit{margin:0;display:grid;gap:10px;align-content:start}
.landing-benefit figcaption{order:-1;font-size:17px;font-weight:600;line-height:1.3}
.landing-benefit img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:2px}
body.light .landing-benefit img{border-top:2px solid var(--gold-line);box-shadow:0 1px 0 rgba(20,40,75,.05),0 18px 36px -24px rgba(20,40,75,.45)}

/* Proof */
.landing-proof{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:40px 0 0;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.landing-proof li{font-size:15px;line-height:1.45;font-weight:500}

/* Security and transparency: plain lines, like the calculator directory */
.landing-security{margin:40px 0 0}
.landing-security dl{display:grid;margin:0}
.landing-security dl>div{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:13px 2px;border-bottom:1px solid var(--border)}
.landing-security dl>div:first-child{border-top:1px solid var(--border)}
.landing-security dt{font-size:16px;font-weight:600}
.landing-security dd{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.landing-security-links{margin:12px 0 0;font-size:14px;color:var(--muted)}
.landing-security-links a{color:color-mix(in srgb,var(--gold) 85%,var(--text));text-underline-offset:3px}

/* The invite box, on the site's card (mix-theme.css). */
body:not(.light) .landing-cta-final .waitlist-closed{color:var(--text)}
.landing-cta-final .public-badge{border-radius:4px}

/* The closing button */
.landing-final{display:grid;justify-items:center;margin:36px 0 0}

@media(max-width:1000px){.landing-hero{grid-template-columns:minmax(0,1fr);gap:30px}.landing-freetools-row{grid-template-columns:minmax(0,1fr);gap:26px}.landing-copy .landing-lede{max-width:none}}
@media(max-width:640px){
 .landing-hero{padding:14px 0 14px}
 /* Each sentence of the headline keeps its own line on any phone. */
 .landing .landing-copy h1{font-size:min(32px,calc((100vw - 20px)/12.2))}
 .landing-copy .landing-lede{font-size:16px;margin-bottom:18px}
 .lr-card{padding:34px 16px 16px;gap:16px}
 .lr-pair{gap:8px}
 .lr-pair small{font-size:10px;letter-spacing:.07em;white-space:nowrap}
 .lr-stress{gap:14px}
 .lr-gauge strong{font-size:21px}
 .landing-benefits,.landing-proof,.landing-security dl>div{grid-template-columns:1fr}
 .landing-proof{gap:10px}
 .calc-directory a{grid-template-columns:minmax(0,1fr) auto}
 .calc-directory strong,.calc-directory span{grid-column:1}
 .calc-directory i{grid-column:2;grid-row:1/3;align-self:center}
 /* Tighter on the calculators page, so each ▶ Quick tour stays in the top half of a phone. */
 .public-main>.calc-directory{margin:0 0 14px}
 .public-main>.calc-directory a{padding:7px 2px;gap:0 12px}
 .public-main>.calc-directory strong{font-size:15px}
 .public-main>.calc-directory span{font-size:13px}
 .landing-final .landing-btn{width:100%;box-sizing:border-box}
}
@media(prefers-reduced-motion:reduce){.calc-directory i{transition:none}}