/* Vision Movie — proposed polish layer.
   Loads AFTER base.css / site.css / app.css and only overrides type, spacing and small accents.
   Nothing here touches backgrounds, images, colours, layout structure or copy.
   Fonts: the site already loads Cormorant Garamond 300 and Jost 300 for the logo. This layer adds
   Cormorant 600 (+ italics) and Jost 400/500/700 to the same Google Fonts request. */

:root{
  --serif:"Times New Roman",Times,serif;   /* headings in Times New Roman (Mal, 2026-09-30); the logo lockup keeps Cormorant in base.css */
  --label:Jost,Futura,"Century Gothic",sans-serif;
  --fs-display:clamp(42px,6.6vw,78px);
  --fs-h1:clamp(36px,5vw,56px);
  --fs-h2:clamp(28px,3.2vw,40px);
}

/* 1 · Headlines in Times New Roman. Regular for the statement, bold for the emphasis (Times has no light weight). */
h1,h2,.display{font-family:var(--serif);font-weight:300;letter-spacing:0;line-height:1.06}
.display b,h1 b,h2 b{font-weight:600}
.hero .display b{color:var(--gold)}   /* "Your cells grow younger" in the gold (Mal, 2026-09-30) */
.hero .display{margin-bottom:.4em}
.hero .display .hgap{height:.32em}
h3{font-family:var(--serif);font-weight:600;font-size:25px;letter-spacing:0;line-height:1.15}

/* 2 · Eyebrows in the tagline's face, tracked wide, in gold. */
.caps{font-family:var(--label);font-weight:400;font-size:12.5px;letter-spacing:.34em;color:var(--gold)}

/* 3 · Buttons: Jost, a touch of tracking, a soft gold glow under the primary. */
.btn{font-family:var(--label);font-weight:700;letter-spacing:.03em}
.btn-primary{box-shadow:0 12px 30px -14px rgba(232,181,103,.55)}
.btn-lg{padding:17px 34px;font-size:19px}
.btn.btn-price{font-family:var(--sans);font-weight:600;letter-spacing:0}   /* buttons that show a price keep the original button face (Mal, 2026-09-30) */

/* 4 · Nav links: the same label face, slightly smaller and tracked. */
.nav a.link{font-family:var(--label);font-weight:400;font-size:15.5px;letter-spacing:.04em}

/* 5 · Hero reading rhythm: one large opening line, body-size paragraphs after it, and the thesis as a pull quote. */
.hero .lede{font-size:18.5px;line-height:1.68;max-width:58ch;margin-bottom:1.15em}
.hero .lede:first-of-type{font-size:clamp(20px,2.2vw,23px);line-height:1.5;color:var(--txt);margin-bottom:1.3em}
.hero .thesis{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(25px,2.5vw,32px);line-height:1.28;color:var(--gold);max-width:30ch;margin:1.7em 0 1.6em;padding-top:1em;position:relative}
.hero .thesis::before{content:"";position:absolute;top:0;left:0;width:56px;height:1px;background:var(--gold);opacity:.7}
.hero .thesis b{font-weight:600}
.hero .cta{margin-top:36px}

/* 6 · Sections: more air between bands, a soft-edged divider, a short gold rule under each heading. */
.band{padding:clamp(60px,9vw,108px) 0;border-top:0;background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent) top/100% 1px no-repeat}
.sec-rule{width:56px;height:1px;background:var(--gold);opacity:.7;margin:20px 0 36px}
.band h2{max-width:34ch}

/* 7 · Step cards: the number sits on the clip's edge, a little more padding, a quiet lift on hover. */
.steps{gap:22px;margin-top:0}
.step{padding:26px;transition:border-color .2s,transform .2s,box-shadow .2s}
.step:hover{border-color:var(--gold-dim);transform:translateY(-2px);box-shadow:var(--shadow)}
.step .clipwrap{margin:-26px -26px 0}
.step .n{position:relative;width:34px;height:34px;margin:-17px 0 14px;background:var(--ink-2);border-color:var(--gold-dim);font-family:var(--serif);font-weight:600;font-size:18px}
.step h3{margin:0 0 8px}
.step p{line-height:1.62}

/* 8 · Price: a hairline over the list, gold ticks instead of green dots. The price itself keeps its current font (Mal, 2026-09-30). */
.price-card{padding:34px 32px 32px}
.price-list{margin:26px 0;padding-top:22px;border-top:1px solid var(--line);gap:11px}
.price-list li::before{display:none}
.price-list li svg{display:block;width:16px;height:16px;flex:none;margin-top:4px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 9 · App pages: serif page titles, gold eyebrows, question cards that blur the portrait behind them softly. */
.page-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5vw,54px);margin-bottom:.35em}
.page-head .caps{margin-bottom:12px}
.q{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:20px}
.q .qt{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:0;line-height:1.2}
.q .qk{font-family:var(--label);font-weight:400;letter-spacing:.3em;color:var(--gold);opacity:.85;margin-top:5px}
.q .qb{line-height:1.66}
.navbar .step-label{font-family:var(--label);font-size:12.5px;letter-spacing:.14em;color:var(--txt-2)}

/* 10 · Header lockup 30% larger (Mal, 2026-09-30). Every breakpoint from site.css / app.css is restated here ×1.3,
   because this file loads last and a plain rule would otherwise beat their media queries. */
.nav .wrap{height:98px}
.nav .brand{font-size:41.6px;gap:21px;flex:none;white-space:nowrap}   /* never squeezed: the links give way instead */
.nav .brand .mark{height:54.6px}
.nav .brand .brand-rule{height:57px}
.nav .brand .brand-words{gap:6.5px}
.nav .brand .brand-tag{font-size:14.3px}
.nav a.link{white-space:nowrap}
/* mid-size lockup from 1160px down (site.css used 1100): the full-size lockup + five links need 1115px (measured) */
@media(max-width:1160px){.nav .wrap{height:90px;gap:12px}.nav a.link{font-size:14.5px;letter-spacing:.02em}.nav .brand{font-size:35px;gap:18px}.nav .brand .mark{height:48px}.nav .brand .brand-rule{height:52px}.nav .brand .brand-tag{font-size:12.5px}}
@media(max-width:980px){.nav a.link{display:none}}   /* site.css hides them at 960; the larger lockup needs 967 (measured) */
@media(max-width:700px){.nav .brand .brand-words{gap:0}}
/* the mark alone now starts at 570px, not 520: the larger name + Start button need 565px (measured) */
@media(max-width:570px){.nav .wrap{height:84px}.nav .brand{font-size:34px;gap:16px}.nav .brand .mark{height:49.4px}.nav .brand .brand-words{display:none}}
.help-main h2{scroll-margin-top:116px}   /* was 96px for the 78px bar */
/* the app bar: wide screens only. Its phone layout is tuned to the pixel around three buttons and stays as it is. */
@media(min-width:861px){.appbar .wrap{height:78px}.appbar .brand{font-size:37.7px}.appbar .brand .mark{height:49.4px}}

/* 11 · App bar logo 30% larger on phones and tablets too (Mal, 2026-09-30). Mark 38 → 49.4px (561–860px) and
   32 → 41.6px (356–560px). The row is fitted around its buttons, so each rule below was measured in the browser,
   signed in (Save for later + Account + Sign out) and signed out (Save for later + Sign in). */
@media(max-width:860px){.appbar .wrap{height:74px}.appbar .brand{font-size:37.7px}.appbar .brand .mark{height:49.4px}}
@media(max-width:560px){.appbar .brand .mark{height:41.6px}}
@media(max-width:520px){.appbar .wrap{height:66px}}
/* the larger name needs 653px beside two buttons and 772px beside three, so the mark alone stands for the brand
   up to 670px signed out (app.css: 450) and 790px signed in (app.css: 700) */
@media(max-width:670px){.appbar .brand,.appbar .brand span{font-size:0;gap:0}}
@media(max-width:790px){.appbar .wrap:has(#acctLink) .brand{font-size:0;gap:0}}
/* signed in on phones: the tighter row app.css starts at 400px now starts at 430, with 4px less side padding */
@media(max-width:430px){.appbar .wrap:has(#acctLink){gap:6px;padding-left:12px;padding-right:12px}.appbar .wrap:has(#acctLink) .btn-sm{padding:7px 7px;font-size:13px}}
@media(max-width:374px){.appbar .wrap:has(#acctLink){gap:4px}}
/* very narrow phones (under 356px): three buttons leave no room for the larger mark, so it keeps its 32px */
@media(max-width:355px){.appbar .brand .mark{height:32px}}

/* 12 · Every heading in Times New Roman (Mal, 2026-10-01). FONT ONLY: each rule below sets font-family and nothing
   else, so sizes, weights and spacing stay exactly as the page already has them. The logo lockup, the gold
   eyebrow labels and bold words inside sentences are deliberately not headings and keep their own faces. */
h4,h5,h6{font-family:var(--serif)}
.gen-head h3,.ae-step h4{font-family:var(--serif)}   /* app.css forced font-family:inherit on the first; the second had no rule */
/* card titles that are a bold first line rather than a heading tag */
.flow .node b,.hcard b,.ms-head b,.p9-tile>b,.round-head b{font-family:var(--serif)}