/* Homepage (November 2, 2026). Phone first: on a phone each part fits one screen, the debt clock and the app itself
   sit above the fold, and a sticky row of section pills moves between topics. Colours follow the app: warm ground,
   ink, gold, and its topic colours for the benefit bands. Dark mode follows the reader's system (tokens in styles.css). */
.home{--debt:#1d3a7a;--prices:#8f3f0a;--spend:#54307f;--policy:#0c5c4a;--askband:#121110;--on-topic-muted:rgba(255,255,255,.82);--status:#1a7345;--pulse:#c8901a;--pulse-faint:rgba(200,144,26,.26);--frame:#121110;--frame-edge:rgba(0,0,0,0);--glow:rgba(240,196,106,.5)}
@media (prefers-color-scheme:dark){.home{--askband:#1b1b1e;--status:#3fbf7f;--pulse:#f0c46a;--pulse-faint:rgba(240,196,106,.22);--frame:#050506;--frame-edge:rgba(255,255,255,.16);--glow:rgba(240,196,106,.22)}}
.home main{display:block}
.home h1,.home h2,.home h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.home [id]{scroll-margin-top:64px}

/* The app in a phone: a dark bezel ring, plus a light edge on dark grounds so the device never melts into the page. */
.shot{display:block;height:auto;border-radius:44px;box-shadow:0 0 0 8px var(--frame),0 0 0 9px var(--frame-edge),0 34px 70px rgba(20,14,4,.3)}

/* Hero */
.hero{max-width:var(--max);margin:0 auto;padding:36px 28px 80px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"head phone" "clock phone" "more phone";column-gap:56px;row-gap:0;min-height:0;align-items:start;overflow-x:clip}
.hero-head{grid-area:head}
.hero h1{font-size:clamp(48px,6.2vw,90px);line-height:.98;margin:0 0 36px;max-width:13ch}
.hero-more{grid-area:more;margin-top:34px}
.hero-lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--muted);max-width:50ch;margin:0 0 26px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.store-pill{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-weight:600;font-size:16px}
.text-link{font-weight:600;color:var(--ink)}

/* The hero phone shows the app in the opposite theme to the page, so it always stands out; the toggle flips it. */
.hero-phone{grid-area:phone;justify-self:center;position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:8px}
.hero-phone::before{content:"";position:absolute;inset:6% -28% 18%;background:radial-gradient(closest-side,var(--glow),transparent);z-index:-1;pointer-events:none}
.shot-stack{position:relative;width:340px;max-width:100%;aspect-ratio:750/1630;border-radius:44px}
.shot-stack .shot{position:absolute;inset:0;width:100%;transition:opacity .45s ease}
.shot-stack .shot-light{opacity:0}
@media (prefers-color-scheme:dark){.shot-stack .shot-light{opacity:1}.shot-stack .shot-dark{opacity:0}}
.hero-phone[data-shot=light] .shot-light,.hero-phone[data-shot=dark] .shot-dark{opacity:1}
.hero-phone[data-shot=light] .shot-dark,.hero-phone[data-shot=dark] .shot-light{opacity:0}
.shot-toggle{display:none;padding:4px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--border)}
.js .shot-toggle{display:inline-flex}
.shot-toggle button{border:0;background:none;color:var(--muted);font-weight:600;font-size:14px;min-height:36px;padding:0 16px;border-radius:999px;cursor:pointer}
.shot-toggle button[aria-pressed=true]{background:var(--ink);color:var(--on-ink)}

/* The clock, with the app's heartbeat: a faint trace and a gold stretch that sweeps across once a second (60 bpm). */
.clock{grid-area:clock;margin:0}
.clock-caption{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink)}
.clock-caption::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--status);animation:dot 2.4s ease-in-out infinite}
.clock-figure{font-family:var(--serif);font-size:clamp(40px,6.4vw,94px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:12px 0 0;white-space:nowrap}
.clock-note{margin:0;font-size:15px;color:var(--muted);max-width:60ch}
.pulse{display:block;width:100%;height:auto;margin:8px 0 12px;overflow:visible}
.pulse path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pulse-base{stroke:var(--pulse-faint)}
.pulse-trace{stroke:var(--pulse);stroke-dasharray:300 876;stroke-dashoffset:300;animation:beat 1s linear infinite}
@keyframes beat{from{stroke-dashoffset:300}to{stroke-dashoffset:-876}}
@keyframes dot{0%,100%{opacity:1}50%{opacity:.35}}

/* Sticky section pills, each in its topic's colour; home.js marks the one in view. */
.section-nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ground) 88%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--border)}
.section-nav ul{max-width:var(--max);margin:0 auto;padding:10px 28px;list-style:none;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.section-nav ul::-webkit-scrollbar{display:none}
.section-nav a{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.section-nav a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.section-nav a.is-active{background:var(--c);border-color:var(--c);color:var(--on,#fff)}
.section-nav a.is-active::before{background:currentColor}

/* Sources */
.sources{max-width:var(--max);margin:0 auto;padding:28px 28px 56px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 34px}
.sources p{margin:0;font-weight:600}
.sources ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 26px;font-family:var(--serif);font-size:22px;color:var(--muted)}

/* Benefit bands, in the app's topic colours, each with a row of real screens. */
.band{color:#fff;padding:88px max(28px,calc((100vw - var(--max))/2 + 28px));display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.band:nth-child(even) .band-copy{order:2}
.band h2{font-size:clamp(38px,4.4vw,62px);line-height:1.02;margin:0 0 20px;max-width:16ch}
.band p{font-size:19px;line-height:1.6;color:var(--on-topic-muted);max-width:44ch;margin:0}
.band-debt{background:var(--debt)}
.band-prices{background:var(--prices)}
.band-spend{background:var(--spend)}
.band-policy{background:var(--policy)}
.band-ask{background:var(--askband)}
.band .shot{--frame:rgba(0,0,0,.6);--frame-edge:rgba(255,255,255,.14);box-shadow:0 0 0 8px var(--frame),0 0 0 9px var(--frame-edge),0 34px 80px rgba(0,0,0,.35)}
.shots{display:flex;justify-content:center;gap:28px;margin:0;padding:10px;list-style:none}
.shots li{flex:none;display:flex;flex-direction:column;align-items:center;gap:16px}
.shots img{height:min(560px,72vh);width:auto}
.shots span{font-size:13px;font-weight:600;color:var(--on-topic-muted);letter-spacing:.02em}

/* Pricing */
.pricing{max-width:var(--max);margin:0 auto;padding:96px 28px 40px}
.pricing h2{font-size:clamp(38px,4.6vw,62px);line-height:1.02;margin:0 0 40px;max-width:20ch}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:30px 28px 32px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"name name" "price price" "desc desc";align-content:start}
.plan h3{grid-area:name;font-size:26px;margin:0 0 6px}
.plan-price{grid-area:price;font-family:var(--serif);font-size:54px;line-height:1.05;margin:0 0 14px}
.plan-price span{font-family:var(--sans);font-size:16px;color:var(--muted)}
.plan>p:last-child{grid-area:desc;margin:0;color:var(--muted);line-height:1.55}
.plan-featured{border:2px solid var(--ink);position:relative}
.plan-featured::before{content:"7 days free";position:absolute;top:-14px;left:26px;background:var(--gold-fill);color:#5c3e00;font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px}
.pricing-note{margin:22px 0 0;color:var(--muted);font-size:15px}

/* Guides and closing */
.guides-teaser{max-width:var(--max);margin:0 auto;padding:72px 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;row-gap:12px;border-top:1px solid var(--border)}
.guides-teaser h2{font-size:clamp(32px,3.4vw,46px);line-height:1.05;margin:0;grid-column:1}
.guides-teaser>p{margin:0;color:var(--muted);font-size:18px;grid-column:1}
.guides-teaser ul{grid-column:2;grid-row:1/span 3;list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.guides-teaser li{border-bottom:1px solid var(--border)}
.guides-teaser li a{display:block;padding:18px 0;font-family:var(--serif);font-size:24px;text-decoration:none}
.guides-teaser li a:hover{text-decoration:underline}
.guides-teaser>.text-link{grid-column:1;align-self:start;margin-top:8px}
.closing{background:var(--gold-fill);color:#121110;padding:72px 28px 80px;text-align:center;--pulse:#121110;--pulse-faint:rgba(18,17,16,.18)}
.closing .brand-mark{width:72px;height:72px;margin:0 auto 6px}
.closing .pulse{max-width:520px;margin:0 auto 18px}
.closing h2{font-size:clamp(40px,5vw,72px);line-height:1;margin:0 0 16px}
.closing p{margin:0;font-size:18px}

@media (prefers-reduced-motion:reduce){.clock-caption::before{animation:none}.pulse-trace{animation:none;stroke-dasharray:none}.shot-stack .shot{transition:none}}

@media (max-width:900px){
  /* Phone order: headline, the live clock, then the app, all above the fold; the explanation follows. */
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "clock" "phone" "more";padding:12px 20px 48px}
  .hero h1{font-size:clamp(34px,10vw,56px);line-height:1.02;margin:0 0 22px;max-width:15ch}
  .clock-caption{font-size:14px}
  .clock-figure{font-size:clamp(34px,11.4vw,64px)}
  .pulse{margin:6px 0 8px}
  .clock-note{font-size:13px;line-height:1.45}
  .hero-phone{margin-top:26px;padding-top:0}
  .shot-stack{width:min(262px,70vw)}
  .hero-more{margin-top:32px}
  .hero-lede{font-size:17px}
  .section-nav ul{padding:9px 20px}
  .sources{padding:22px 20px 30px;gap:8px 20px}
  .sources p{font-size:14px}
  .sources ul{font-size:18px;gap:2px 18px}
  /* Each band fits one phone screen: short copy, then swipeable screens sized to what is left. */
  .band{grid-template-columns:minmax(0,1fr);gap:22px;padding:44px 20px 40px;min-height:0}
  .band:nth-child(even) .band-copy{order:0}
  .band h2{font-size:clamp(30px,8.4vw,48px);margin:0 0 12px}
  .band p{font-size:16px;line-height:1.5}
  .shots{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:10px 20px 12px;gap:22px;scrollbar-width:none}
  .shots::-webkit-scrollbar{display:none}
  .shots li{scroll-snap-align:center}
  .shots li:only-child{margin:0 auto}
  .shots img{height:50vh;height:50svh;max-height:460px;border-radius:34px}
  .shots span{font-size:12px}
  /* Pricing on one screen: name and price on a line, one line of detail. */
  .pricing{padding:44px 20px 36px}
  .pricing h2{font-size:clamp(30px,8.4vw,48px);margin:0 0 26px}
  .plans{grid-template-columns:1fr;gap:12px}
  .plan{padding:16px 20px 18px;border-radius:22px;grid-template-areas:"name price" "desc desc";align-items:baseline;column-gap:12px}
  .plan h3{font-size:21px;margin:0}
  .plan-price{font-size:34px;margin:0 0 4px;text-align:right}
  .plan-price span{font-size:13px}
  .plan>p:last-child{font-size:15px;line-height:1.45}
  .plan-featured{margin-top:8px}
  .plan-featured::before{top:-12px;left:18px;font-size:12px;padding:3px 10px}
  .pricing-note{font-size:13px;margin-top:16px}
  .guides-teaser{grid-template-columns:1fr;padding:48px 20px}
  .guides-teaser ul{grid-column:1;grid-row:auto;margin-top:16px}
  .guides-teaser li a{font-size:21px;padding:14px 0}
  .closing{padding:52px 20px 60px}
  .closing .brand-mark{width:60px;height:60px}
}
@media (max-width:480px){.home .site-header{height:68px}.home .site-header nav{gap:14px}.home .site-header nav a:not(.nav-cta):not([href="/guides/"]){display:none}.brand{font-size:17px}}
@media (max-width:360px){.home .site-header nav a[href="/guides/"]{display:none}}