/* Skills applied (ui-skills.com): Landing Page (MengTo) and Landing Page Design (elayadesign) for the conversion path:
   message match to the comment keyword, one offer (the link) and one primary action, proof beside the claim, objections as a section,
   identical final CTA. Frontend Design and Compact Landing for the look; UI/UX Pro Max for forms (visible label, inline error, 44px targets).
   Fingerprint: offset rail · 560px measure · dark charcoal on true black · Manrope + Geist Mono for the address only ·
   machined radii (6px controls, 12px frame) · flat dividers · no motif · one orchestrated moment (tagline reveal).
   Layout: a single left-aligned rail; the first screen holds the promise, the proof and the one primary action. */
:root {
  color-scheme: dark;
  --black: #000000; --charcoal: #181818; --raised: #1F1F1F; --rule: #272727; --edge: #313131;
  --ink: #FFFFFF; --soft: #B4B4B4; --quiet: #8A8A8A;
  --action: #0078FC;            /* primary action only (logo blue) */
  --sponsor: #7B02BC;           /* sponsored content only (logo purple) */
  --sponsor-text: #C38BFF;      /* purple that reads on black */
  --ok: #4ADE80; --err: #FF8A8A;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--black); color: var(--ink); font: 400 16px/24px var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: 16px; top: -48px; z-index: 20; padding: 8px 12px; border-radius: 6px; background: var(--ink); color: var(--black); font-weight: 600; text-decoration: none; transition: transform 300ms var(--ease); }
.skip-link:focus-visible { transform: translateY(64px); }

/* Offset rail: one column, left aligned, pushed off-centre on wide screens */
.rail { width: 100%; max-width: 560px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 1024px) { .rail { margin-left: max(64px, calc(50% - 400px)); margin-right: auto; } }
.band { padding-block: 48px; border-top: 1px solid var(--rule); }
.band:first-of-type { border-top: 0; }

/* Top bar */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px; }
.mark { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 16px; }
.mark img { display: block; height: 28px; width: auto; }
.bar small { font-size: 14px; line-height: 20px; color: var(--quiet); }

/* Hero */
.hero { display: grid; gap: 24px; padding-block: 24px 48px; }
.context { font-size: 14px; line-height: 20px; color: var(--soft); }
.context strong { color: var(--ink); font-weight: 600; }
.hero h1 { font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; max-width: 680px;
  background: linear-gradient(180deg, #FFFFFF 30%, #9B9B9B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 640px) { .hero h1 { font-size: 48px; line-height: 1; } }
.hero .lede { font-size: 18px; line-height: 28px; color: var(--soft); max-width: 680px; }
.proof { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--soft); }
.proof b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.proof svg { width: 16px; height: 16px; color: #FFC83D; flex: none; }

/* Email form (primary action) */
.signup { display: grid; gap: 12px; }
.signup label { font-size: 14px; line-height: 20px; font-weight: 600; }
.row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 480px) { .row { grid-template-columns: minmax(0, 1fr) auto; } }
.field { width: 100%; height: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--edge); background: var(--charcoal); color: var(--ink); font: 500 16px var(--sans); transition: border-color 300ms var(--ease); }
.field::placeholder { color: var(--quiet); }
.field:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 2px rgba(0,120,252,.45); }
.field[aria-invalid="true"] { border-color: var(--err); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; font: 600 14px/20px var(--sans);
  transition-property: transform, opacity; transition-duration: 300ms; transition-timing-function: var(--ease); }
.btn:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .btn:hover { opacity: 0.88; } .text-link:hover { color: var(--ink); } }
.btn-action { background: var(--action); color: #FFFFFF; }
.btn-light { background: var(--ink); color: var(--black); }
.btn-sponsor { background: var(--sponsor); color: #FFFFFF; }
.btn svg { width: 20px; height: 20px; flex: none; }
.assure { font-size: 14px; line-height: 20px; color: var(--quiet); }
.error { font-size: 14px; line-height: 20px; color: var(--err); }
.done { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--ok); }
.done svg { width: 20px; height: 20px; flex: none; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--soft); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; transition: color 300ms var(--ease); }
.text-link svg { width: 16px; height: 16px; }

/* Signature artifact: the real app, in the same glowing frame as the videos */
.frame { padding: 8px; border-radius: 12px; background: var(--charcoal); box-shadow: 0 0 0 1px var(--rule); }
.frame img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 625; border-radius: 4px; outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }
.frame figcaption { padding: 8px 4px 0; font-size: 12px; line-height: 16px; color: var(--quiet); }

/* Section heads */
.band h2 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.band .intro { margin-top: 8px; color: var(--soft); }

/* Benefits: bold benefit, then detail */
.benefits { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 16px; }
.benefits li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; color: var(--soft); }
.benefits li svg { width: 20px; height: 20px; margin-top: 2px; color: var(--ok); }
.benefits b { display: block; color: var(--ink); font-weight: 600; }

/* Tagline reveal (the one orchestrated moment) */
.reveal { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; max-width: 680px; }
@media (min-width: 640px) { .reveal { font-size: 36px; line-height: 40px; } }
.reveal span { opacity: 0.3; transition: opacity 500ms var(--ease); }
.reveal span.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .reveal span { opacity: 1; transition: none; } }

/* Ads and sponsor */
.ad { display: grid; gap: 8px; }
.ad p { font-size: 12px; line-height: 16px; color: var(--quiet); }
.ad .slot { min-height: 250px; border-radius: 6px; background: var(--charcoal); display: grid; place-items: center; padding: 16px; text-align: center; font-size: 14px; line-height: 20px; color: var(--quiet); }
.ad .slot b { display: block; color: var(--soft); font-weight: 600; }
.sponsored { display: grid; gap: 12px; }
.sponsored .tag { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--sponsor-text); }
.sponsored p { color: var(--soft); }
.sponsored .note { font-size: 12px; line-height: 16px; color: var(--quiet); }

/* Download */
.download { display: grid; gap: 16px; scroll-margin-top: 16px; }
.download .addr { font: 400 14px/20px var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.download .facts { font-size: 14px; line-height: 20px; color: var(--quiet); }

/* FAQ */
.faq { margin-top: 24px; display: grid; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding-block: 12px; cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 16px; height: 16px; flex: none; color: var(--quiet); transition: transform 300ms var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq dd, .faq p { padding-bottom: 16px; color: var(--soft); }

/* Footer */
.foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-block: 32px 48px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 20px; }
.foot a { display: inline-flex; align-items: center; min-height: 40px; color: var(--quiet); }

/* The offer: a locked link card. The one place with colour weight on the page. */
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); font-size: 13px; line-height: 20px; font-weight: 600; }
.unlock { display: grid; gap: 16px; padding: 16px; border-radius: 12px; background: var(--charcoal); box-shadow: 0 0 0 1px rgba(0,120,252,.55), 0 16px 48px -16px rgba(0,120,252,.45); }
.unlock-title { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.linkrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: var(--black); box-shadow: inset 0 0 0 1px var(--edge); }
.lk { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; background: var(--raised); color: var(--soft); }
.lk svg { width: 20px; height: 20px; }
.lt { display: grid; min-width: 0; }
.lt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt small { font-size: 13px; line-height: 18px; color: var(--quiet); }
.pill { padding: 2px 8px; border-radius: 999px; background: rgba(0,120,252,.16); color: #6FB2FF; font-size: 12px; line-height: 18px; font-weight: 600; }
.unlock.is-open .pill { background: rgba(74,222,128,.14); color: var(--ok); }
.unlock.is-open .lk { color: var(--ok); }
.opened { display: grid; gap: 12px; }
.opened .btn { width: 100%; }
.ok { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; color: var(--ok); }
.ok svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.btn-action { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset; }
.unlock .btn-action { width: 100%; }
.unlock .row { grid-template-columns: minmax(0, 1fr); }
.lede b { color: var(--ink); font-weight: 600; }
.countdown { font: 500 14px/20px var(--mono); color: var(--soft); font-variant-numeric: tabular-nums; }
.download h2 { font-size: 18px; line-height: 28px; color: var(--soft); }

/* Locked: the video hasn't gone out yet. The page still collects emails; the link unlocks at release. */
.soon-inline { display: none !important; }
body.locked .soon-inline { display: revert !important; }
body.locked p.soon-inline, body.locked .ok.soon-inline { display: flex !important; }
body.locked small.soon-inline { display: block !important; }
body.locked .after { display: none !important; }
/* Home list */
.tools { list-style: none; padding: 0; margin-top: 24px; }
.tools li { border-top: 1px solid var(--rule); }
.tools li:last-child { border-bottom: 1px solid var(--rule); }
.tools a { display: grid; gap: 4px; padding-block: 16px; color: var(--ink); text-decoration: none; }
.tools a b { font-size: 18px; line-height: 28px; font-weight: 600; }
.tools a span { color: var(--soft); }
.tools a small { color: var(--quiet); font-size: 14px; line-height: 20px; }
@media (hover: hover) and (pointer: fine) { .tools a:hover b { color: var(--action); } }
.prose { display: grid; gap: 16px; padding-block: 24px 48px; }
.prose h1 { font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
.prose p { color: var(--soft); }
.prose a { color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }