/* Awaken Within review site, v4: light Fletcher pages like the approved Justin Phillips build,
   Awaken brand (DESIGN.md): Zilla Slab over Inter, ink, purple. The CTA colour is one variable (--cta). */

@font-face { font-family: 'Zilla Slab'; src: url('/assets/fonts/zilla-slab-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Zilla Slab'; src: url('/assets/fonts/zilla-slab-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #212327;
  --black: #17181B;
  --text: #3A3C42;
  --muted: #5E6066;
  --line: #E1E1E5;
  --soft: #F4F4F6;
  --bone: #F8F8F8;
  --ash: #9A9CA3;
  --mist: #C9CACF;
  --lavender: #E4B3FF;
  --purple: #653399;
  --purple-deep: #561699;
  --gradient: linear-gradient(180deg, #E35AF9 0%, #841DBC 45%, #561699 100%);
  --gradient-x: linear-gradient(90deg, #E35AF9 0%, #841DBC 100%);
  /* CTA: the green Fletcher runs on his live funnel (go.fletchermethod.com, measured rgb(0,182,122), 2026-10-10).
     Action colour only; Awaken purple stays on headlines, accents and steps. */
  --cta-bg: #008555;   /* Fletcher's #00B67A hue, darkened to 4.68:1 with white text */
  --cta-hover: #007A4E;
  --cta-ink: #fff;
  --cta-shadow: rgba(0, 133, 85, .45);
  --slab: 'Zilla Slab', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(18px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: #fff; color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--slab); font-weight: 600; line-height: 1.06; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--ink); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.small { font-size: 14px; color: var(--muted); margin-top: 12px; }
.lede { font-size: 20px; line-height: 1.55; color: var(--text); max-width: 36em; }
.hero-kicker { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); margin-bottom: 14px; }
.demo-note { font-size: 13px; color: var(--muted); }
.text-link { color: var(--purple); }

/* ---------------- chrome: black bars like the approved reference */
.draftbar { background: #0E0F11; color: var(--ash); font-size: 12.5px; }
.draftbar .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 6px; padding-bottom: 6px; }
.draftbar a { color: var(--lavender); text-underline-offset: 3px; }
.site-header { background: var(--black); }
.site-header .wrap { display: flex; align-items: center; justify-content: center; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; }
.brand img { width: 108px; }
.brand span { font-family: var(--slab); font-weight: 500; font-size: 20px; padding-left: 14px; border-left: 1px solid #3A3C42; }
.stepbar { background: var(--black); color: #fff; font-size: 15px; border-top: 1px solid #2A2C31; }
.stepbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 10px; padding-bottom: 10px; }
.stepbar p { margin: 0; }
.stepbar .warn { color: var(--lavender); font-weight: 600; }
.progress { width: 240px; height: 8px; border-radius: 99px; background: #3A3C42; overflow: hidden; flex: none; }
.progress .fill { display: block; height: 100%; background: var(--gradient-x); border-radius: 99px; }
.fill-67 { width: 67%; } .fill-100 { width: 100%; }

.site-footer { background: #fff; color: var(--muted); font-size: 14px; padding: 40px 0 36px; text-align: center; border-top: 1px solid var(--line); }
.site-footer .wrap { max-width: 900px; }
.site-footer p { margin: 0 0 12px; }
.site-footer nav { display: flex; justify-content: center; gap: 12px; margin: 18px 0 12px; }
.site-footer nav a { color: var(--text); text-underline-offset: 3px; }

/* ---------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 999px; border: 0; font: 700 16px/1.15 var(--sans); text-align: center; text-decoration: none; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.btn-primary { color: var(--cta-ink); background: var(--cta-bg); box-shadow: 0 12px 28px -12px var(--cta-shadow), inset 0 -3px 0 rgba(0,0,0,.15); }
.btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-1px); background: var(--cta-hover); box-shadow: 0 16px 34px -12px var(--cta-shadow), inset 0 -3px 0 rgba(0,0,0,.15); }
.btn-dark { color: #fff; background: var(--black); box-shadow: 0 12px 28px -14px rgba(0,0,0,.6); }
.btn-dark:hover { transform: translateY(-1px); }
.btn-ghost-dark { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.btn-ghost-dark:hover { box-shadow: inset 0 0 0 2px var(--purple); color: var(--purple); }
.btn-step { color: #fff; background: var(--cta-bg); min-height: 52px; width: 100%; margin-top: 22px; }
.btn-back { background: none; border: 0; color: var(--text); font: 600 15px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------------- step 1: opt-in, one screen */
.optin-hero { padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 64px); text-align: center; }
.optin-hero .wrap { display: flex; flex-direction: column; }
.fb-eyebrow { font: 700 clamp(14px, 1.4vw, 17px)/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.fb-eyebrow strong { color: var(--purple); }
.fb-head { font-size: clamp(2rem, 3.4vw, 3.15rem); line-height: 1.05; max-width: 30ch; margin: 0 auto 18px; letter-spacing: -0.015em; text-wrap: balance; }
.fb-head .u { background-image: var(--gradient-x); background-size: 100% .11em; background-repeat: no-repeat; background-position: 0 98%; padding-bottom: .05em; }
.fb-sub { font-size: clamp(17px, 1.6vw, 20px); color: var(--text); max-width: 48ch; margin: 0 auto 24px; }
.fb-sub strong { color: var(--ink); }
.fb-asset { margin: 0 auto 26px; width: 100%; max-width: 920px; height: 262px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; background: var(--soft); border: 1px solid var(--line); border-radius: 18px; padding: 22px 30px; text-align: left; }
.asset-sheet { transform: rotate(-2.2deg); margin-top: 4px; }
.asset-sheet .sheet.mini { zoom: .46; }
.asset-stack { background: var(--ink); color: #fff; border-radius: 14px; padding: 18px 24px; }
.asset-label { color: var(--lavender); font-size: 14px; margin-bottom: 8px; }
.asset-stack .stack { font-size: clamp(1.05rem, 1.45vw, 1.3rem); margin: 0; }
.fb-cta { width: 100%; max-width: 760px; margin: 0 auto; }
.fb-cta .btn { width: 100%; min-height: 80px; font: 700 clamp(21px, 2.3vw, 28px)/1 var(--sans); letter-spacing: .01em; }
.lock { font-size: 14px; color: var(--muted); margin: 14px 0 0; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.lock a { color: var(--text); }

/* Opt-in hero on DESIGN.md's dark ground (#212327), so a click from the dark ads lands on the same look.
   White Zilla Slab headline, lavender eyebrow and underline, the same green pill as the ads. */
.optin-hero { background: var(--ink); color: #fff; border-top: 1px solid #34363C; }
.optin-hero .fb-eyebrow { color: #fff; }
.optin-hero .fb-eyebrow strong { color: var(--lavender); }
.optin-hero .fb-head { color: #fff; }
.optin-hero .fb-head .u { background-image: linear-gradient(90deg, var(--lavender), var(--lavender)); }
.optin-hero .fb-sub { color: #D5D6DA; }
.optin-hero .fb-sub strong { color: #fff; }
.optin-hero .fb-asset { background: #2A2C31; border-color: #393B42; }
.optin-hero .asset-stack { background: #17181B; }
.optin-hero .fb-cta .btn { box-shadow: 0 16px 36px -12px rgba(0,133,85,.7), inset 0 -3px 0 rgba(0,0,0,.18); }
.optin-hero .lock { color: #A9ABB2; }
.optin-hero .lock a { color: #fff; }

/* the stack (shared by hero panel, PDF cover and ads) */
.stack { font-family: var(--slab); display: flex; flex-direction: column; font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; }
.stack .line { position: relative; align-self: flex-start; color: var(--ash); padding-bottom: .04em; white-space: nowrap; }
.stack .line.plain { color: var(--mist); }
.stack .strike { position: absolute; left: -0.06em; right: -0.08em; top: 54%; height: .085em; background: var(--gradient-x); border-radius: 99px; transform-origin: left center; }
.stack .verdict { color: #fff; font-weight: 600; margin-top: .14em; font-size: 1.32em; letter-spacing: -0.025em; }

/* the audit sheet */
.sheet { text-align: left; background: #fff; color: var(--ink); border-radius: 6px; padding: clamp(24px, 3.2vw, 44px); box-shadow: 0 1px 0 var(--line), 0 24px 50px -28px rgba(33, 35, 39, .45); font-size: 15px; position: relative; }
.sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--gradient-x); border-radius: 6px 6px 0 0; }
.sheet-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.sheet-head img { width: 26px; }
.sheet-kicker { font-size: 13px; color: var(--muted); margin: 0 0 2px; }
.sheet h3 { font-size: 28px; }
.sheet-intro { color: var(--text); margin-bottom: 22px; }
.sheet-part { border-top: 1.5px solid var(--ink); padding: 16px 0 6px; }
.sheet-part h4 { font-size: 19px; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.part-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gradient); color: #fff; font: 700 13px/1 var(--sans); }
.sheet-q { color: var(--text); margin: 8px 0 6px; font-size: 14px; }
.sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: 8px; }
.sheet th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 0 8px 6px 0; }
.sheet td { border-bottom: 1px solid var(--line); height: 34px; padding: 4px 8px 2px 0; vertical-align: bottom; }
.ink { color: var(--purple); font-weight: 500; font-size: 14px; line-height: 1.3; display: inline-block; }
.leaks { list-style: none; padding: 0; margin: 6px 0 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.leaks li { padding: 6px 13px; border: 1px solid var(--line); border-radius: 99px; font-size: 14px; }
.leaks li.circled { border: 2px solid var(--purple); color: var(--purple); font-weight: 600; padding: 5px 12px; }
.sheet .line { border-bottom: 1px solid var(--line); min-height: 30px; margin: 0 0 6px; }
.sheet-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.sig { white-space: nowrap; font-family: var(--slab); font-weight: 600; font-size: 18px; color: var(--purple-deep); }
.sheet.mini { zoom: .62; }

/* ---------------- dialog (opt-in) */
dialog { width: min(480px, calc(100vw - 28px)); border: 0; border-radius: 18px; padding: 32px 30px 24px; color: var(--ink); background: #fff; }
dialog::backdrop { background: rgba(14, 15, 17, .78); }
dialog h2 { font-size: 28px; margin-bottom: 6px; padding-right: 30px; }
.dialog-close { position: absolute; right: 14px; top: 10px; border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--muted); padding: 6px; }
dialog .btn { width: 100%; margin-top: 18px; }
.consent-fine { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin: 6px 0 0; }
.optin-note { font-size: 13px; color: var(--muted); text-align: center; margin: 10px 0 0; }

/* ---------------- forms */
label, legend { display: block; font-weight: 600; font-size: 15px; margin: 16px 0 6px; color: var(--ink); }
input, select, textarea { width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink); background: #fff; border: 1.5px solid #C5C6CB; border-radius: 10px; padding: 12px 14px; }
input:focus, select:focus, textarea:focus { border-color: var(--purple); outline: 3px solid rgba(101, 51, 153, .2); outline-offset: 0; }
textarea { resize: vertical; }
small { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check { display: flex; gap: 10px; font-weight: 600; font-size: 14px; color: var(--ink); margin-top: 16px; }
.check input, .app-commit input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--purple); }
.card-form { background: #fff; color: var(--ink); border-radius: 18px; padding: clamp(24px, 3.4vw, 40px); border: 1px solid var(--line); }
.card-form h1 { font-size: clamp(1.9rem, 3vw, 2.4rem); margin-bottom: 18px; }
.card-form .btn { width: 100%; margin-top: 22px; }
.pay-slot { margin-top: 18px; border: 1.5px dashed #B9BAC0; border-radius: 10px; padding: 18px; background: var(--soft); }
.pay-slot p { margin: 0; font-weight: 600; }
.decline, .decline-inline { color: var(--muted); }
.decline a, .decline-inline a { color: var(--purple); text-underline-offset: 4px; }

/* ---------------- step 2: authority amplifier */
.aa-band { background: linear-gradient(160deg, #653399 0%, #561699 60%, #3E1170 100%); color: #fff; padding: clamp(26px, 3.5vw, 46px) 0 clamp(44px, 5vw, 64px); text-align: center; }
.important { font-size: 17px; color: #F3E6FF; margin-bottom: 14px; }
.important span { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.aa-band h1 { font-size: clamp(1.9rem, 3.6vw, 3.3rem); max-width: 24ch; margin: 0 auto 12px; text-wrap: balance; }
.aa-sub { font-size: 18px; color: #F3E6FF; margin-bottom: 16px; }
.part { font: 800 18px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 16px; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--black); }
.aa-band .video { max-width: 860px; margin: 0 auto; border: 4px solid #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video .v-nick { left: auto; right: 0; width: 46%; object-position: 50% 18%; filter: grayscale(1) brightness(.8); }
.video .v-sheet { position: absolute; left: 6%; top: 9%; width: 48%; transform: rotate(-3deg); }
.video .v-sheet .sheet.mini { zoom: .46; }
.video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,15,17,.75) 0%, rgba(14,15,17,0) 30%); pointer-events: none; }
.play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; border: 0; background: var(--cta-bg); cursor: pointer; box-shadow: 0 0 0 10px rgba(255,255,255,.18); z-index: 1; transition: transform .2s ease; }
.play:hover { transform: scale(1.05); }
.play span { position: absolute; left: 36px; top: 27px; border-left: 26px solid var(--cta-ink); border-top: 17px solid transparent; border-bottom: 17px solid transparent; }
.video-cap { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; color: #fff; font: 800 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; z-index: 1; }
.pending { position: absolute; left: 14px; top: 12px; font-size: 12px; background: rgba(14, 15, 17, .85); color: #fff; padding: 5px 11px; border-radius: 99px; z-index: 1; }
.transcript { margin: 16px auto 0; max-width: 860px; text-align: left; border-top: 1px solid rgba(255,255,255,.25); padding-top: 14px; }
.transcript summary { cursor: pointer; color: #fff; font-weight: 600; }
.transcript div { margin-top: 16px; color: #F3E6FF; }
.transcript .demo-note { color: #E4D2F5; }
.aa-cta { max-width: 860px; margin: 24px auto 0; }
.aa-cta .btn { color: #fff; background: var(--cta-bg); box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); width: 100%; min-height: 72px; font: 800 clamp(18px, 2vw, 24px)/1 var(--sans); }
.aa-cta p { color: #F3E6FF; font-size: 15px; margin-top: 10px; }

.next-steps { padding: clamp(48px, 6vw, 80px) 0; background: #fff; }
.next-steps h2 { font: 700 clamp(30px, 3.4vw, 40px)/1.1 var(--slab); color: var(--ink); margin-bottom: 28px; }
.steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); }
.step-head { display: flex; gap: 16px; align-items: flex-start; font-size: 17px; color: var(--text); min-height: 5.2em; }
.step-head strong { color: var(--ink); }
.num { flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--gradient); color: #fff; display: grid; place-items: center; font: 800 22px/1 var(--sans); }
.step { display: flex; flex-direction: column; }
.step-media { height: 320px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--line); margin: 6px 0 16px; display: grid; place-items: center; box-shadow: 0 10px 24px -18px rgba(0,0,0,.4); }
.step-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.sheet-media { background: linear-gradient(160deg, #F7F0FC, #EDE3F5); }
.sheet-media .sheet.mini { width: 760px; zoom: .29; transform: rotate(-2deg); box-shadow: 0 30px 60px -20px rgba(66, 22, 102, .45); }
.btn-ghost { display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 999px; border: 2px solid var(--purple); color: var(--purple); font: 700 17px/1 var(--sans); text-decoration: none; }
.btn-ghost:hover { background: #F7F0FC; }
.btn-ghost:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.step .btn { width: 100%; }

/* ---------------- proof + authority */
.stats { background: var(--black); color: #fff; padding: 34px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stats strong { display: block; font: 600 clamp(28px, 3.4vw, 42px)/1.05 var(--slab); background: var(--gradient-x); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { display: block; font-size: 14px; color: var(--mist); margin-top: 6px; }
.proof { background: var(--soft); padding: clamp(48px, 6vw, 80px) 0; text-align: center; }
.proof h2 { font: 800 clamp(26px, 3vw, 36px)/1.1 var(--sans); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 26px; }
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 920px; margin: 0 auto; text-align: left; }
.story-slot { margin: 0; background: #fff; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.slot-media { aspect-ratio: 16 / 9; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #ECECEF 0 12px, #F4F4F6 12px 24px); color: var(--muted); font-weight: 700; }
.story-slot figcaption { padding: 16px 18px; font-size: 14px; color: var(--text); }
.story-slot strong { color: #B4231F; display: block; margin-bottom: 4px; }
.field-story { background: var(--black); color: #fff; padding: clamp(48px, 6vw, 84px) 0; }
.field-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.field-photo { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; }
.field-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.field-story h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin-bottom: 22px; }
.field-story blockquote { margin: 0 0 22px; padding-left: 20px; border-left: 4px solid; border-image: var(--gradient) 1; }
.field-story blockquote p { font: 500 clamp(1.3rem, 2vw, 1.65rem)/1.35 var(--slab); color: #fff; margin-bottom: 8px; }
.field-story blockquote footer { font-size: 14px; color: var(--ash); }
.field-story .small-quote p { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--mist); }
.field-story > .wrap p { color: var(--mist); }
.signoff { font-family: var(--slab); font-weight: 600; font-size: 28px; color: var(--purple); margin: 22px 0 0; }
.field-story .signoff { color: var(--lavender); }

/* ---------------- landing-page sections on the amplifier page */
.badge { display: inline-block; font: 800 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--purple); background: #F1E6FB; border-radius: 99px; padding: 8px 14px; margin-bottom: 16px; }
.badge.light { color: #fff; background: rgba(255,255,255,.14); }
.problem { padding: clamp(48px, 6vw, 84px) 0; text-align: center; }
.problem h2, .shift h2, .faq h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); max-width: 24ch; margin: 0 auto 30px; text-wrap: balance; }
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.pain-grid div { border: 1px solid var(--line); border-top: 4px solid #B4231F; border-radius: 14px; padding: 22px 22px 8px; background: #fff; }
.pain-grid h3 { font-size: 22px; margin-bottom: 8px; }
.pain-grid p { color: var(--text); }
.shift { background: var(--soft); padding: clamp(48px, 6vw, 84px) 0; text-align: center; }
.shift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; max-width: 960px; margin: 0 auto; }
.shift-grid > div { border-radius: 14px; padding: 24px 26px; }
.before { background: #fff; border: 1px solid var(--line); }
.after { background: var(--black); color: #fff; }
.shift-label { font: 800 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; color: #B4231F; }
.after .shift-label { color: #5BE3A9; }
.shift ul { list-style: none; padding: 0; margin: 0; }
.shift li { padding: 10px 0 10px 30px; position: relative; border-top: 1px solid var(--line); }
.after li { border-color: #2E3035; color: var(--mist); }
.before li::before { content: '×'; position: absolute; left: 4px; top: 7px; color: #B4231F; font-weight: 800; font-size: 18px; }
.after li::before { content: '✓'; position: absolute; left: 4px; top: 8px; color: #5BE3A9; font-weight: 800; }
.faq { padding: clamp(48px, 6vw, 84px) 0; }
.faq h2 { text-align: center; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font: 700 18px/1.3 var(--sans); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: '+'; color: var(--purple); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--text); margin: 10px 0 0; }
.final-cta { background: linear-gradient(160deg, #653399 0%, #561699 60%, #3E1170 100%); color: #fff; text-align: center; padding: clamp(52px, 7vw, 96px) 0; }
.final-cta h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); margin-bottom: 14px; text-wrap: balance; }
.final-cta p { color: #F3E6FF; font-size: 18px; }
.final-cta .btn { width: 100%; max-width: 620px; min-height: 72px; font-size: clamp(18px, 2vw, 23px); margin-top: 10px; }
.friction { font-size: 14px !important; margin-top: 12px; }
.preview-note { font-size: 12px; color: var(--ash); }
@media (max-width: 900px) { .pain-grid, .shift-grid { grid-template-columns: 1fr; } }

/* ---------------- step 3: booking card (application beside calendar) */
.book { background: var(--soft); padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 80px); }
.book-head { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.book-head h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); margin-bottom: 10px; text-wrap: balance; }
.book-head .lede { margin: 0 auto; }
.book-card { display: grid; grid-template-columns: 1.08fr 1fr; background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(0,0,0,.35); }
.book-left { padding: clamp(22px, 3.2vw, 40px); }
.book-right { padding: clamp(22px, 3.2vw, 40px); background: #FAFAFB; border-left: 1px solid var(--line); }
.intake-progress { list-style: none; display: flex; gap: 18px; padding: 0; margin: 0 0 18px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.intake-progress li { display: flex; align-items: center; gap: 7px; }
.intake-progress span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: var(--ink); font: 700 12px/1 var(--sans); }
.intake-progress li[aria-current] { color: var(--ink); font-weight: 700; }
.intake-progress li[aria-current] span, .intake-progress li.done span { background: var(--gradient); color: #fff; }
.intake-step { border: 0; padding: 0; margin: 0; }
.intake-step > legend, .review-step h2 { font: 600 clamp(24px, 2.4vw, 30px)/1.1 var(--slab); margin: 0 0 4px; }
.intake-note { color: var(--muted); font-size: 15px; margin: 0 0 4px; }
.intake-fine { font-size: 13px; color: var(--muted); text-align: center; margin-top: 10px; }
.app-q { border: 0; padding: 0; margin: 0; }
.app-q > legend { margin-top: 18px; }
.app-choices { display: grid; gap: 8px; }
.app-choice { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; font-size: 15px; border: 1.5px solid #C5C6CB; border-radius: 10px; padding: 11px 14px; cursor: pointer; }
.app-choice input { width: 18px; height: 18px; flex: none; accent-color: var(--purple); }
.app-choice:has(input:checked) { border-color: var(--purple); background: #F6EEFC; }
.step-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.step-actions .btn-step { width: auto; flex: 1; }
#intake-summary { margin: 18px 0; }
#intake-summary dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
#intake-summary dd { margin: 4px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.host { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.host img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.host p { margin: 0; }
.host-with { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.host-title { font-family: var(--slab); font-weight: 600; font-size: 24px; line-height: 1.15; }
.host-meta { font-size: 14px; color: var(--text); }
.cal-embed { margin: 14px 0 0; }
.cal-embed iframe { display: block; width: 100%; height: 720px; border: 0; border-radius: 10px; background: #fff; }
.cal-locked { margin: 0; padding: 28px 20px; text-align: center; font-size: 15px; color: var(--text); background: #F1E6FB; border: 1.5px dashed var(--purple); border-radius: 10px; }
fieldset.cal { border: 0; padding: 0; margin: 12px 0 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.dow { font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 0; }
.day { position: relative; display: grid; place-items: center; height: 40px; font-size: 14px; color: #A3A4AA; border-radius: 8px; margin: 0; font-weight: 400; }
.day.open { color: var(--purple); font-weight: 800; background: #F1E6FB; cursor: pointer; }
.day.open input, .time input { position: absolute; opacity: 0; pointer-events: none; }
.day.open:has(input:checked) { background: var(--purple); color: #fff; }
.day.open:has(input:focus-visible), .time:has(input:focus-visible) { outline: 3px solid var(--purple); outline-offset: 2px; }
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.times legend { grid-column: 1 / -1; }
.time { position: relative; margin: 0; text-align: center; border: 1.5px solid var(--purple); color: var(--purple); border-radius: 10px; padding: 12px; cursor: pointer; font-weight: 700; }
.time:has(input:checked) { background: var(--purple); color: #fff; }
.app-commit { display: flex; gap: 10px; font-weight: 400; font-size: 14px; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 16px; }
.app-commit b { color: var(--ink); }
.book-right .btn { width: 100%; margin-top: 14px; }

/* ---------------- proof page */
.confirmed { padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 72px); }
.confirmed h1 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); margin-bottom: 24px; }
.confirmed h2 { font-size: 28px; margin: 40px 0 16px; }
.when { border-left: 6px solid; border-image: var(--gradient) 1; background: var(--soft); padding: 20px 24px; }
.when p { margin: 0; }
.part-label { font: 800 15px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; margin: 36px 0 12px; }
.small-video { margin: 0 0 8px; }
.small-video .v-nick { width: 100%; }
.phases, .prep { list-style: none; padding: 0; margin: 20px 0 0; counter-reset: n; }
.phases li, .prep li { counter-increment: n; position: relative; padding: 14px 0 14px 50px; border-top: 1px solid var(--line); color: var(--text); }
.phases li::before, .prep li::before { content: counter(n); position: absolute; left: 0; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--gradient); color: #fff; font: 700 14px/32px var(--sans); text-align: center; }
.phases strong, .prep strong { color: var(--ink); }

/* ---------------- community + 2-step membership */
.community { padding: clamp(40px, 6vw, 88px) 0; }
.community-head { max-width: 760px; }
.community h1 { font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: 20px; }
.group-steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: gs; }
.group-steps li { counter-increment: gs; background: var(--soft); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; }
.group-steps li::before { content: counter(gs); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gradient); color: #fff; font: 700 17px/1 var(--sans); margin-bottom: 16px; }
.group-steps h2 { font-size: 24px; margin-bottom: 10px; }
.group-steps p { color: var(--text); }
.community .decline { margin-top: 32px; }
.signoff.big { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1; margin-top: 48px; }
.checkout { background: var(--soft); padding: clamp(40px, 6vw, 88px) 0; }
.checkout-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.summary { background: var(--black); color: #fff; border-radius: 18px; padding: clamp(24px, 3.4vw, 40px); position: relative; overflow: hidden; }
.summary::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--gradient); }
.summary-name { font-family: var(--slab); font-size: 24px; font-weight: 600; }
.price { font-family: var(--slab); font-size: 22px; margin: 18px 0 22px; color: var(--mist); }
.price span { font-size: 64px; font-weight: 600; color: #fff; line-height: 1; margin-right: 6px; }
.inside { list-style: none; padding: 0; margin: 0; }
.inside li { padding: 14px 0 14px 32px; border-top: 1px solid #36383E; position: relative; color: var(--mist); }
.inside li::before { content: ''; position: absolute; left: 0; top: 23px; width: 18px; height: 3px; border-radius: 3px; background: var(--gradient-x); }

/* ---------------- downloads, review, legal */
.get { background: var(--soft); padding: clamp(40px, 6vw, 88px) 0; }
.audit-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.audit-copy h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); margin-bottom: 22px; }
.get .btn { min-width: 300px; }
.review, .legal { padding: clamp(36px, 5vw, 72px) 0; }
.review h1, .legal h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin-bottom: 24px; }
.review h2 { font-size: 28px; margin: 40px 0 14px; }
.review li { margin-bottom: 10px; color: var(--text); }
.route-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 30px 0 12px; }
.route-grid a { display: block; text-decoration: none; padding: 16px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.route-grid a:hover { border-color: var(--purple); }
.route-grid strong { display: block; font-family: var(--slab); font-size: 20px; }
.route-grid span { font-size: 14px; color: var(--muted); }
.ad-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ad-thumb img { width: 100%; border-radius: 10px; margin-top: 12px; }

/* ---------------- responsive */
@media (max-width: 900px) {
  .fb-asset, .steps-grid, .book-card, .checkout-grid, .audit-grid, .group-steps, .field-grid, .proof-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .book-right { border-left: 0; border-top: 1px solid var(--line); }
  .field-photo { max-width: 420px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .draftbar .wrap { font-size: 12px; }
  .brand img { width: 90px; }
  .brand span { font-size: 17px; padding-left: 12px; }
  .stepbar { font-size: 13px; }
  .progress { width: 70px; }
  .optin-hero .fb-eyebrow, .optin-hero .fb-head, .optin-hero .fb-sub { order: -2; }
  .fb-cta { order: -1; margin-bottom: 24px; }
  .fb-cta .btn { min-height: 66px; }
  .fb-asset { padding: 14px; gap: 14px; height: auto; max-height: 520px; }
  .asset-stack .stack { font-size: 1.2rem; }
  .sheet.mini { zoom: .5; }
  .video .v-sheet .sheet.mini { zoom: .26; }
  .play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .play span { left: 26px; top: 19px; border-left-width: 18px; border-top-width: 13px; border-bottom-width: 13px; }
  .video-cap { font-size: 11px; bottom: 9px; }
  .step-head { min-height: 0; }
  .step-media { height: 260px; }
  .sheet-media .sheet.mini { zoom: .24; }
  .row { grid-template-columns: 1fr; }
  .lede { font-size: 18px; }
  .get .btn { min-width: 0; width: 100%; }
  .sheet { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------------- print documents (/audit/, /audit-one-page/) */
.page-print-doc { background: #E7EBEF; color: var(--ink); }
.print-bar { display: flex; gap: 16px; align-items: center; justify-content: space-between; max-width: 816px; margin: 24px auto; padding: 0 16px; }
.print-bar a { color: var(--purple); }
.print-bar .btn { min-height: 44px; }
.pdf-page { width: 8.5in; height: 11in; margin: 0 auto 24px; background: #fff; position: relative; padding: .6in .65in .9in; overflow: hidden; }
.pdf-foot { position: absolute; left: .65in; right: .65in; bottom: .4in; display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
.pdf-cover { background: var(--ink); color: var(--bone); margin: -.6in -.65in -.9in; height: 11in; padding: .7in .75in; display: flex; flex-direction: column; justify-content: space-between; }
.pdf-cover > img { width: 150px; }
.pdf-cover .small-stack { font-size: 46px; }
.pdf-cover h2 { font-size: 40px; margin-bottom: 10px; }
.pdf-cover p { color: var(--mist); font-size: 16px; }
.pdf-page:has(.pdf-cover) .pdf-foot { color: var(--ash); border-color: #3A3C42; }
.pdf-letter { font-size: 16.5px; line-height: 1.65; max-width: 6.4in; padding-top: .3in; }
.pdf-letter h2 { font-size: 50px; margin-bottom: 34px; }
.pdf-letter h3 { font-size: 22px; margin: 26px 0 10px; }
.pdf-letter ol { padding-left: 1.2em; }
.pdf-letter li { margin-bottom: 8px; }
.pdf-note { font-size: 11px; color: var(--muted); }
.pdf-link { font-weight: 600; color: var(--purple); }
.print-sheet { box-shadow: none; padding: 0; font-size: 14px; }
.print-sheet::before { display: none; }
.print-sheet td { height: 33px; }
.print-sheet .line { min-height: 30px; }
.print-sheet .sheet-intro { margin-bottom: 12px; }
.print-sheet .sheet-part { padding-top: 12px; }
.print-sheet .leaks li { padding: 5px 12px; }
@media screen and (max-width: 860px) { .pdf-page { zoom: .44; } .print-bar { margin: 16px; } }
@page { size: letter; margin: 0; }
@media print {
  .page-print-doc { background: #fff; }
  .print-bar { display: none; }
  .pdf-page { margin: 0; page-break-after: always; break-after: page; }
}

/* ---------------- ads (/creative/*) */
.page-ad-doc { background: var(--ink); }
.ad { width: 1080px; height: 1350px; padding: 92px 88px 80px; display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); }
.ad-kicker { font-size: 34px; color: var(--lavender); margin: 0; }
.ad-stack { font-size: 84px; margin: 0; }
.ad .stack .verdict { font-size: .9em; line-height: 1.08; margin-top: .3em; }
.ad-foot { display: flex; justify-content: space-between; align-items: end; border-top: 2px solid #3A3C42; padding-top: 36px; }
.ad-foot p { font-size: 32px; color: var(--mist); margin: 0; line-height: 1.35; }
.ad-foot strong { font-family: var(--slab); font-size: 46px; color: #fff; }
.ad-foot img { width: 63px; }
.ad-sheet-wrap { transform: rotate(-2deg); margin: 0 34px; }
.ad-sheet-wrap .sheet { zoom: 1.04; }
.ad-big { font-size: 112px; line-height: 1; margin: 0 0 54px; color: #fff; }
.ad-leaks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.ad-leaks li { font-size: 34px; color: var(--mist); border: 2px solid #4A4C52; border-radius: 99px; padding: 12px 28px; }
.ad-leaks li.circled { color: #fff; border: 4px solid transparent; background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--gradient-x) border-box; font-weight: 600; }

/* ================================================================ v4 site-wide (2026-10-30, Acesa approved the v4 direction)
   Same language as the opt-in: brand gradient on every action, no all-caps labels, no off-brand red/green,
   rules instead of bordered boxes, one dark footer. */
:root {
  --cta-bg: var(--gradient);
  --cta-hover: var(--gradient);
  --cta-shadow: rgba(132, 29, 188, .5);
}
.btn-primary:hover, .btn-primary:focus-visible, .btn-step:hover { filter: brightness(1.08); }
.btn-primary, .btn-step { box-shadow: 0 14px 30px -14px var(--cta-shadow), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.16); }
/* on the purple bands a purple pill disappears: white pill, deep purple label */
.aa-cta .btn, .final-cta .btn { background: #fff; color: var(--purple-deep); box-shadow: 0 18px 36px -16px rgba(20, 6, 40, .7); }
.aa-cta .btn:hover, .final-cta .btn:hover { transform: translateY(-2px); background: var(--bone); }
.play { background: #fff; box-shadow: 0 0 0 10px rgba(255,255,255,.18), 0 18px 40px -12px rgba(0,0,0,.6); }
.play span { border-left-color: var(--purple-deep); }

/* sentence case everywhere; labels carry weight and colour instead */
.hero-kicker, .important span, .part, .video-cap, .badge, .shift-label, .part-label, #intake-summary dt, .host-with { text-transform: none; letter-spacing: 0; }
.hero-kicker { font-size: 16px; font-weight: 600; }
.important span { text-decoration: none; font-weight: 700; }
.part { font: 600 17px/1.2 var(--sans); color: #F3E6FF; }
.video-cap { font: 600 14px/1 var(--sans); }
.badge { font: 600 14px/1 var(--sans); }
.part-label { font: 600 17px/1.3 var(--sans); }
#intake-summary dt { font-size: 13px; }
.host-with { font-size: 13px; font-weight: 600; }
.proof h2 { font: 600 clamp(1.9rem, 3.4vw, 2.9rem)/1.06 var(--slab); text-transform: none; letter-spacing: -0.01em; }

/* pain points: three columns under a gradient rule, no cards */
.pain-grid { gap: clamp(22px, 3.5vw, 44px); }
.pain-grid div { border: 0; border-top: 3px solid; border-image: var(--gradient-x) 1; border-radius: 0; padding: 20px 0 0; background: none; }
/* before / after: brand colours only */
.shift-label { font: 700 15px/1.2 var(--sans); color: var(--muted); }
.after .shift-label { color: var(--lavender); }
.before li::before { color: var(--ash); }
.after li::before { color: var(--lavender); }
.before { border-color: transparent; }
/* community steps: rules, not boxes */
.group-steps li { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 22px 0 0; }

/* headings the booking steps focus by script (tabindex -1) are not controls, so no focus ring */
[tabindex="-1"]:focus { outline: none; }

/* one dark footer on every page */
.site-footer { background: #212121; color: #9A9CA3; border-top: 1px solid #34363C; }
.site-footer nav a { color: #C9CACF; }
.site-footer .preview-note { color: #9A9CA3; }

/* ================================================================ v4 opt-in (sample, 2026-10-30)
   One idea: the audit is a real sheet of paper on a dark desk, lit by the droplet's own purple,
   with everything he has already tried written beside it and struck out. No boxes around either.
   Scoped to .page-home (/, /founders/, /over-40/) so no other page changes until the direction is approved.
   CTA is the DESIGN.md gradient pill; --cta-* stays the single switch if the Fletcher green comes back. */
.page-home { background: var(--ink); --cta-shadow: rgba(132, 29, 188, .55); }
.page-home .site-header { background: transparent; }
.page-home .site-header .wrap { padding-top: clamp(12px, 2.2vh, 22px); padding-bottom: 4px; }
.page-home .brand span { border-left-color: #3E4047; }

.page-home .optin-hero {
  /* heights key off the viewport so the button stays on the first screen down to 1366x768 (Fletcher one-screen rule) */
  border-top: 0; padding: clamp(14px, 3vh, 44px) 0 clamp(48px, 6vw, 88px);
  /* the lamp: a low purple light pooled under the sheet, nothing else on the ground */
  background:
    radial-gradient(60% 46% at 50% 70%, rgba(132, 29, 188, .26) 0%, rgba(132, 29, 188, 0) 70%),
    var(--ink);
}
.page-home .fb-eyebrow { text-transform: none; letter-spacing: 0; font: 500 clamp(15px, 1.3vw, 17px)/1.4 var(--sans); color: #C9CACF; margin-bottom: 16px; text-wrap: balance; }
.page-home .fb-eyebrow strong { color: var(--lavender); font-weight: 600; }
.page-home .fb-head { font-size: clamp(2.1rem, min(3.5vw, 6vh), 3.4rem); line-height: 1.03; letter-spacing: -0.022em; max-width: 28ch; margin-bottom: clamp(10px, 2vh, 18px); }
.page-home .fb-head .u { background-image: var(--gradient-x); background-size: 100% .085em; background-position: 0 96%; }
.page-home .fb-sub { color: #C9CACF; font-size: clamp(17px, 1.5vw, 19.5px); margin-bottom: clamp(18px, 3vh, 36px); }

/* the desk: sheet left, stack right, no container */
.page-home .fb-asset {
  height: auto; max-width: 1000px; overflow: visible; background: none; border: 0; border-radius: 0; padding: 0;
  grid-template-columns: 1.12fr .88fr; gap: clamp(28px, 4.5vw, 64px); align-items: center; margin-bottom: clamp(18px, 3vh, 36px);
}
.page-home .asset-sheet {
  transform: rotate(-3deg); margin: 0; height: clamp(190px, min(22vw, 29vh), 300px); overflow: hidden;
  /* the crop is deliberate: the sheet runs off into shadow instead of hitting a box edge */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.page-home .asset-sheet .sheet {
  background: var(--bone); border-radius: 3px;
  box-shadow: 0 2px 0 rgba(255,255,255,.04), 0 46px 80px -34px rgba(0,0,0,.85), 0 18px 40px -24px rgba(86,22,153,.6);
}
.page-home .asset-sheet .sheet.mini { zoom: .58; }
.page-home .asset-stack { background: none; border-radius: 0; padding: 0; }
.page-home .asset-label { color: var(--lavender); font-size: 15px; margin-bottom: 14px; }
.page-home .asset-stack .stack { font-size: clamp(1.2rem, min(1.8vw, 3.1vh), 1.75rem); line-height: 1.12; }
.page-home .stack .line { color: #8E9097; }
.page-home .stack .strike { height: .08em; }
.page-home .stack .verdict { color: var(--bone); font-size: 1.42em; margin-top: .3em; }

.page-home .fb-cta { max-width: 640px; }
.page-home .fb-cta .btn,
.page-home dialog .btn-primary { background: var(--gradient); }
.page-home .fb-cta .btn {
  min-height: clamp(62px, 8.4vh, 76px); font: 700 clamp(20px, 2vw, 25px)/1 var(--sans); letter-spacing: 0;
  box-shadow: 0 22px 46px -18px var(--cta-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.18);
}
.page-home .fb-cta .btn:hover, .page-home .fb-cta .btn:focus-visible { background: var(--gradient); filter: brightness(1.08); transform: translateY(-2px); }
.page-home .fb-cta .btn:focus-visible { outline-color: var(--lavender); }
.page-home .lock { color: #9A9CA3; }

/* the page stays one dark surface to the bottom */
.page-home .site-footer { background: #212121; color: #9A9CA3; border-top: 1px solid #34363C; }
.page-home .site-footer nav a { color: #C9CACF; }
.page-home .site-footer .preview-note { color: #9A9CA3; }

@media (max-width: 900px) {
  .page-home .fb-asset { grid-template-columns: 1fr; }
  .page-home .asset-stack { order: -1; justify-self: center; }
  .page-home .asset-sheet { max-width: 560px; justify-self: center; width: 100%; }
}
@media (max-width: 600px) {
  .page-home .fb-head { font-size: clamp(2rem, 9vw, 2.5rem); }
  .page-home .fb-asset { max-height: none; gap: 26px; padding: 0; }
  .page-home .asset-stack { justify-self: start; padding-left: 4px; }
  .page-home .asset-stack .stack { font-size: 1.4rem; }
  .page-home .asset-sheet { height: 300px; }
  .page-home .asset-sheet .sheet.mini { zoom: .5; }
  .page-home .fb-cta .btn { min-height: 66px; }
}