/* Theme: "AI Wait List Hero Screen", light version (Figma community file tN91O2BdZfCAMAUsgEeHlu, the sky screens).
   A blue daytime sky behind a centred uppercase headline with one handwritten phrase; the rest of the page is pale sky
   with white liquid-glass cards and navy text. The hero image is the file's sky with its baked-in headline removed.
   White text on the sky is held at 4.5:1 with a navy wash and a tinted glass form card. Exo 2 and Gaegu stand in for the
   file's fonts. Loaded last: overrides sneak.css and lab.css. */
:root {
  --navy: #0b1b33; --navy-2: #16315c; --soft: #3d5578; --paper: #eef5fc; --white: #fff; --sky-line: rgba(30, 80, 160, .16);
  --blue: #bfe3ff; --blue-ink: #0b1b33;
  --font-display: "Exo 2", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-body: var(--font-display); --font-mono: var(--font-display); --font-hand: Gaegu, "Segoe Print", "Bradley Hand", cursive;
  --ink: var(--navy); --bone: var(--paper); --graphite: var(--soft); --lichen: var(--sky-line); --tissue: #e3eefa; --lime: var(--blue);
  --charcoal: var(--navy); --concrete: var(--sky-line); --smoke: var(--soft); --ink-2: var(--soft); --ink-3: var(--soft); --r: 6px; --shadow: none;
}
html { color-scheme: light; }
body { color: var(--navy); font: 300 17px/1.55 var(--font-body); letter-spacing: 0;
  background:
    radial-gradient(42vw 38vw at 6% 40%, rgba(120, 170, 255, .28), transparent 70%),
    radial-gradient(38vw 34vw at 96% 62%, rgba(170, 200, 255, .3), transparent 70%),
    radial-gradient(40vw 30vw at 20% 94%, rgba(130, 200, 240, .25), transparent 70%), var(--paper); background-attachment: fixed; }
a { color: var(--navy); border-bottom: 1px solid rgba(11, 27, 51, .3); }
a:hover { border-color: var(--navy); }
h1, h2, h3, h4, .faq-q, .brand, .pos { font-family: var(--font-display); font-weight: 300; color: var(--navy); letter-spacing: .01em; line-height: 1.1; }
.sec-head h2, .h2, .cta h2 { font-size: clamp(30px, 4.4vw, 56px); text-transform: uppercase; }
h3 { font-size: 22px; font-weight: 400; }
.sec-head p, .lede, .demo-note, .micro, .check { color: var(--soft); font-size: 16px; }
.sec { padding-block: clamp(56px, 8vw, 96px); }
.eyebrow, .label, .mono, .chip, .demo-status, .kbd, .step h3 span { font: 400 13px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.hand { font-family: var(--font-hand); text-transform: none; font-weight: 400; letter-spacing: 0; font-size: 1.08em; }

/* nav: frosted white over the sky */
.nav-wrap { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid rgba(255, 255, 255, .7); }
.brand { font-size: 22px; letter-spacing: .04em; }
.brand svg path { fill: var(--navy); stroke: #fff; }
.nav-links a { font: 400 14px/1 var(--font-body); letter-spacing: .04em; text-transform: none; color: var(--navy); border: 0; border-radius: 8px; padding: 10px 14px; }
.nav-links a:hover { background: rgba(255, 255, 255, .7); }

/* inputs, links, tabs */
.input { background: transparent; border: 0; border-radius: 6px; color: var(--navy); font: 300 16px/1.2 var(--font-body); padding-inline: 12px; }
.input::placeholder { color: var(--soft); }
.input:focus-visible, :focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
.check input { accent-color: var(--navy-2); }
.linkish { color: var(--soft); border-bottom: 1px solid rgba(11, 27, 51, .25); }
.wl-msg { color: #a3261a; }
.tabs.glass { border-radius: 14px; padding: 4px; }
.tab { font: 400 15px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--navy); border-radius: 10px; }

/* ---------- hero: the file's sky, everything centred ---------- */
.hero2 { display: flex; flex-direction: column; justify-content: center; min-height: max(680px, calc(100svh - 62px)); padding: clamp(56px, 10vh, 120px) 16px;
  background: linear-gradient(180deg, #3876ba, #8cbfe8); overflow: hidden; isolation: isolate; position: relative; }
.hero2-panel { position: relative; z-index: 1; inset: auto; width: 100%; max-width: 640px; margin: 0 auto; padding: 0; gap: 16px; align-items: center; text-align: center; background: transparent !important; border: 0 !important; border-radius: 0; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.badge-red { display: inline-flex; align-self: center; padding: 5px 12px; background: rgba(12, 36, 78, .38); border: 1px solid rgba(255, 255, 255, .45); border-radius: 8px; color: #fff; font: 400 13px/1.2 var(--font-body); letter-spacing: 0; text-transform: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero2-panel h1 { font-size: clamp(32px, 5vw, 66px); line-height: 1.08; text-transform: uppercase; letter-spacing: .01em; color: #fff; text-shadow: 0 2px 28px rgba(10, 40, 90, .45); }
.hero2-panel .lede { color: #fff; font-size: 17px; max-width: 460px; text-shadow: 0 1px 14px rgba(10, 40, 90, .7); }
.hero2-panel .wl { max-width: 500px; width: 100%; padding: 12px; text-align: left; overflow: visible; border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(14, 42, 90, .5), rgba(14, 42, 90, .32)) !important; border: 1px solid rgba(255, 255, 255, .4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 24px 50px -24px rgba(10, 40, 90, .6); }
.hero2-panel .wl-form { gap: 10px; }
.hero2-panel .wl-row { gap: 6px; padding: 5px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); border-radius: 10px; }
.hero2-panel .wl-row .input { flex: 1; min-width: 0; color: #fff; }
.hero2-panel .wl-row .input::placeholder { color: rgba(255, 255, 255, .85); }
.hero2-panel .wl-row .btn { flex: none; width: auto; min-height: 40px; }
.hero2-panel .check, .hero2-panel .micro, .hero2-panel .linkish { color: #fff; text-align: center; justify-content: center; }
.hero2-panel .linkish { border-bottom-color: rgba(255, 255, 255, .5); }
.hero2-panel .check input { accent-color: #fff; }
.hero2-panel .micro { font-size: 13px; }
.hero2-panel .wl-msg { color: #ffd2cb; }
.hero2-panel .trust { display: none; }
.hero2-panel :focus-visible { outline-color: #fff; }
.hero2-panel .wl-done { background: var(--blue); color: var(--blue-ink); border-radius: 10px; padding: 18px; text-align: center; }
.hero2-panel .wl-done h3, .hero2-panel .wl-done p, .hero2-panel .wl-done .micro, .hero2-panel .wl-done .pos { color: var(--blue-ink); }
@media (max-width: 520px) { .hero2-panel .wl-row { flex-direction: column; } .hero2-panel .wl-row .btn { width: 100%; } .hero2-panel .wl-row .input { min-height: 44px; } }

/* sections */
.faq-q { font-size: 20px; font-weight: 400; color: var(--navy); }
.faq-q::after { border-color: var(--navy); }
.cta.glass { text-align: center; }
.cta .wl { max-width: 500px; margin-inline: auto; text-align: left; }
.cta .wl-row { padding: 5px; gap: 6px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(30, 80, 160, .22); border-radius: 10px; }
.cta .wl-row .input { flex: 1; min-width: 0; }
.cta .wl, .cta .wl-done { background: transparent !important; border: 0; }
.foot { background: var(--navy); color: #c8d6ee; border: 0; }
.foot a { color: #fff; border-color: rgba(255, 255, 255, .3); font: 400 14px/1.4 var(--font-body); }
.foot small { color: #c8d6ee; }
.prose { background: transparent; color: var(--navy); }
.prose code { background: rgba(255, 255, 255, .7); }
.skip { background: var(--navy); color: #fff; }

/* demos: marks white with a dark edge so they read on dark and light app screens */
.demo { border-radius: 12px; }
.demo-svg path { stroke: #fff; filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1px #000); }
.demo-ripple { border-color: #fff; }
.demo-label { background: var(--navy); color: #fff; border: 1px solid #fff; border-radius: 6px; font-family: var(--font-body); }
.demo-status, .demo-status.ok, .chip.ok { background: var(--navy); color: #fff; border-radius: 6px; }
.mac-lid { box-shadow: inset 0 0 0 1px #3a3a42, inset 0 0 0 2.5px #08080a; }

/* ---------- liquid glass cards: frosted white, a bright rim, a pointer-following sheen ---------- */
.glass:not(.hero2-panel):not(.nav), .faq-item, .cta.glass, .lesson-card {
  position: relative; isolation: isolate;
  background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .38)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important; backdrop-filter: blur(22px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 20px;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(120, 160, 220, .25), 0 0 0 1px rgba(40, 90, 170, .1), 0 24px 56px -26px rgba(40, 90, 170, .45) !important;
}
.glass:not(.hero2-panel):not(.nav)::before, .faq-item::before, .cta.glass::before, .lesson-card::before {
  display: block !important; content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, .75), transparent 60%);
}
.glass:not(.hero2-panel):not(.nav)::after, .faq-item::after, .cta.glass::after, .lesson-card::after {
  display: block !important; content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.cta.glass { background: linear-gradient(145deg, rgba(14, 42, 90, .78), rgba(14, 42, 90, .6)) !important; border-color: rgba(255, 255, 255, .4); }
.cta.glass::before { background: radial-gradient(380px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, .18), transparent 60%); }
.cta h2, .cta .pos, .cta .wl-done, .cta .wl-done h3 { color: #fff; }
.cta p, .cta .check, .cta .micro, .cta .linkish { color: #e4edfb; }
.cta .linkish { border-bottom-color: rgba(255, 255, 255, .45); }
.cta :focus-visible { outline-color: #fff; }
@media (prefers-reduced-transparency: reduce) { .glass:not(.hero2-panel):not(.nav), .faq-item, .lesson-card { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .cta.glass { background: var(--navy-2) !important; } }

/* ---------- liquid glass buttons ---------- */
.btn, .hero2-panel .btn, .cta .btn, .nav .btn {
  position: relative; isolation: isolate; overflow: hidden; will-change: transform; border-radius: 10px; min-height: 44px; padding-inline: 18px; font: 500 15px/1 var(--font-body); letter-spacing: 0; text-transform: none;
  background:
    radial-gradient(90px circle at var(--bx, 50%) var(--by, 0%), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(214, 230, 255, .66)) !important;
  color: var(--navy); border: 1px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 6px rgba(110, 150, 215, .35), 0 10px 26px -10px rgba(30, 80, 170, .55);
}
.btn::before { content: ""; position: absolute; inset: 1px 1px 52% 1px; z-index: -1; border-radius: 9px 9px 40% 40% / 9px 9px 14px 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); pointer-events: none; }
.btn:hover:not(:disabled), .hero2-panel .btn:hover:not(:disabled), .cta .btn:hover:not(:disabled), .nav .btn:hover:not(:disabled) {
  background:
    radial-gradient(110px circle at var(--bx, 50%) var(--by, 0%), #fff, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, rgba(210, 232, 255, .98), rgba(150, 195, 255, .8)) !important;
  color: var(--navy); border-color: #fff; box-shadow: inset 0 1px 0 #fff, inset 0 -2px 6px rgba(70, 120, 220, .45), 0 14px 32px -10px rgba(30, 90, 200, .7);
}
.btn:disabled { background: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .26)) !important; color: #2c4670; border-color: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.btn:disabled::before { opacity: .4; }
/* secondary: navy liquid glass, white label */
.btn--glass, .btn--glass:hover:not(:disabled) {
  background: radial-gradient(100px circle at var(--bx, 50%) var(--by, 0%), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, rgba(22, 49, 92, .92), rgba(22, 49, 92, .78)) !important;
  color: #fff; border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 6px rgba(0, 0, 0, .25), 0 10px 24px -10px rgba(22, 49, 92, .7);
}
.btn--glass::before { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); }
.tab[aria-selected="true"] { background: linear-gradient(160deg, #1d4a8f, #16315c); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px -8px rgba(22, 49, 92, .7); }
@media (prefers-reduced-transparency: reduce) { .btn { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- GSAP hooks ---------- */
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js:not(.gsap) .hero2-panel > :not(h1) { animation: heroIn .7s .9s both; }
.js.gsap .hero2-panel > :not(h1) { animation: none; }
.js.gsap .rv, .js.gsap .rv.in { transition: none; }

/* ---------- transparent nav: floats over the sky; links turn navy once the hero has scrolled away ---------- */
.nav-wrap { position: fixed; inset: 0 0 auto 0; background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; }
.nav.glass { background: transparent !important; border: 0; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.nav.glass::before, .nav.glass::after { display: none !important; }
.hero2 { min-height: max(700px, 100svh); padding-top: clamp(104px, 14vh, 150px); }
.nav-wrap:not(.on-light) .brand, .nav-wrap:not(.on-light) .nav-links a { color: #fff; text-shadow: 0 1px 12px rgba(10, 40, 90, .6); }
.nav-wrap:not(.on-light) .brand svg path { fill: #fff; stroke: rgba(10, 40, 90, .5); }
.nav-wrap:not(.on-light) .nav-links a:hover { background: rgba(255, 255, 255, .2); }
html { scroll-padding-top: 72px; }

/* WebGL cloud sky (public/js/clouds.js). The CSS gradient is the first-paint and no-WebGL fallback; a navy wash above the
   canvas keeps the white headline, description and form text readable when a cloud drifts behind them. */
.cloud-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
.hero2::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 40, 90, .38), rgba(10, 40, 90, .3) 55%, rgba(10, 40, 90, .12)); }
.hero2-panel { z-index: 1; }

/* ---------- minimal buttons: flat fills, hairline, no gloss or glow; Lucide arrow-right (icon connector) on primary ---------- */
.btn, .hero2-panel .btn, .cta .btn, .nav .btn { background: #fff !important; color: var(--navy); border: 1px solid #fff; border-radius: 8px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; gap: 8px; transition: background .2s, color .2s, border-color .2s; }
.btn::before { display: none; }
.btn:not(.btn--glass)::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; transition: transform .25s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn:hover:not(:disabled)::after { transform: translateX(3px); }
.btn:hover:not(:disabled), .hero2-panel .btn:hover:not(:disabled), .cta .btn:hover:not(:disabled), .nav .btn:hover:not(:disabled) { background: var(--navy) !important; color: #fff; border-color: var(--navy); box-shadow: none; }
.btn:disabled { background: rgba(255, 255, 255, .35) !important; color: #fff; border-color: transparent; box-shadow: none; }
.btn--glass, .btn--glass:hover:not(:disabled) { background: transparent !important; color: var(--navy); border: 1px solid var(--navy); box-shadow: none; }
.btn--glass:hover:not(:disabled) { background: var(--navy) !important; color: #fff; }
.tab[aria-selected="true"] { background: var(--navy); box-shadow: none; }
.btn:disabled { background: rgba(255, 255, 255, .55) !important; color: #16315c; }

/* ---------- super minimal: one hero action, no decoration ---------- */
body { background: var(--paper); }
.nav .brand { margin-right: auto; }
.hero2-panel .wl-more, .hero2-panel .wl-int, .hero2-panel .micro { display: none; }
.hero2-panel .wl { padding: 8px; }
.hero2-panel { gap: 20px; }
.sec-head { margin-bottom: 28px; }
.sec { padding-block: clamp(48px, 7vw, 84px); }
.foot small { display: none; }

/* ---------- buttons from the shadcn Button spec ----------
   rounded-lg, text-sm font-medium, h-9 px-4, transition-colors, 2px focus ring with 2px offset, disabled at 50% opacity, tiny shadow.
   default = solid primary (navy; white on the dark hero and CTA cards), outline = Replay, ghost = tabs, with the demo's
   Lucide arrow-left (60% opacity) that nudges left on hover. */
.btn, .hero2-panel .btn, .cta .btn, .nav .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; height: 36px; min-height: 0; padding: 0 16px; border-radius: 8px;
  font: 500 14px/1 var(--font-body); letter-spacing: 0; transition: background-color .15s, color .15s, border-color .15s;
  background: var(--navy) !important; color: #fff; border: 1px solid var(--navy); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); overflow: visible; will-change: auto;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hero2-panel .btn, .cta .btn, .nav .btn { background: #fff !important; color: var(--navy); border-color: #fff; }
.hero2-panel .wl-row .btn, .cta .wl-row .btn { height: 40px; padding: 0 24px; }
.btn:hover:not(:disabled), .hero2-panel .btn:hover:not(:disabled), .cta .btn:hover:not(:disabled), .nav .btn:hover:not(:disabled) { background: var(--navy) !important; color: #fff; border-color: var(--navy); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); opacity: .9; }
.hero2-panel .btn:hover:not(:disabled), .cta .btn:hover:not(:disabled), .nav .btn:hover:not(:disabled) { background: #fff !important; color: var(--navy); border-color: #fff; }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn:focus-visible { outline: 2px solid rgba(11, 27, 51, .7); outline-offset: 2px; }
.hero2-panel .btn:focus-visible, .cta .btn:focus-visible { outline-color: #fff; }
.btn::before { display: block; content: ""; position: static; inset: auto; width: 16px; height: 16px; flex: none; margin-left: -4px; background: currentColor; opacity: .6; border-radius: 0; transition: transform .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn:hover:not(:disabled)::before { transform: translateX(-2px); }
.btn::after, .btn:not(.btn--glass)::after { content: none; display: none; }
/* outline variant */
.btn--glass, .btn--glass:hover:not(:disabled) { background: #fff !important; color: var(--navy); border: 1px solid rgba(11, 27, 51, .22); }
.btn--glass:hover:not(:disabled) { background: #e3eefa !important; }
.btn--glass::before { display: none; }
/* ghost tabs; the selected tab is the default variant */
.tab { height: 36px; padding: 0 14px; font: 500 14px/1 var(--font-body); border-radius: 8px; background: transparent; transition: background-color .15s, color .15s; }
.tab:hover:not([aria-selected="true"]) { background: #e3eefa; }
.tab[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }

/* ---------- transparent buttons: no fill, a hairline border, a faint wash on hover ---------- */
.btn, .btn--glass { background: transparent !important; color: var(--navy); border: 1px solid rgba(11, 27, 51, .4); box-shadow: none; }
.btn:hover:not(:disabled), .btn--glass:hover:not(:disabled) { background: rgba(11, 27, 51, .08) !important; color: var(--navy); border-color: var(--navy); opacity: 1; }
.hero2-panel .btn, .cta .btn, .nav-wrap:not(.on-light) .btn { background: transparent !important; color: #fff; border: 1px solid rgba(255, 255, 255, .85); }
.hero2-panel .btn:hover:not(:disabled), .cta .btn:hover:not(:disabled), .nav-wrap:not(.on-light) .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .18) !important; color: #fff; border-color: #fff; }
.btn:focus-visible { outline-color: var(--navy); }
.hero2-panel .btn:focus-visible, .cta .btn:focus-visible, .nav-wrap:not(.on-light) .btn:focus-visible { outline-color: #fff; }

/* ---------- borderless buttons: label and icon only, a faint wash on hover ---------- */
.btn, .btn--glass, .btn:hover:not(:disabled), .btn--glass:hover:not(:disabled), .hero2-panel .btn, .cta .btn, .nav-wrap:not(.on-light) .btn,
.hero2-panel .btn:hover:not(:disabled), .cta .btn:hover:not(:disabled), .nav-wrap:not(.on-light) .btn:hover:not(:disabled) { border-color: transparent; }

/* ---------- demo section: task list on the left, the screen on the right, a ticker of more things below ---------- */
.demo-shell { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); column-gap: 32px; row-gap: 16px; align-items: start; max-width: 1180px; margin-inline: auto; }
.demo-shell .tabs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px; padding: 0; background: transparent !important; border: 0; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0; }
.demo-shell .tabs::before, .demo-shell .tabs::after { display: none !important; }
.demo-shell .tab { display: grid; gap: 4px; height: auto; padding: 14px 16px; text-align: left; white-space: normal; border-radius: 12px; border: 1px solid rgba(30, 80, 160, .14); background: rgba(255, 255, 255, .55); }
.demo-shell .tab:hover:not([aria-selected="true"]) { background: rgba(255, 255, 255, .9); }
.t-name { font: 500 16px/1.2 var(--font-body); } .t-ask { font: 300 14px/1.35 var(--font-body); color: var(--soft); }
.demo-shell .tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); } .demo-shell .tab[aria-selected="true"] .t-ask { color: #d7e3f7; }
.demo-shell .demo-panel { grid-column: 2; grid-row: 1 / span 2; }
.demo-shell .demo-actions { grid-column: 1; grid-row: 2; display: flex; margin: 0; }
@media (max-width: 900px) { .demo-shell { grid-template-columns: minmax(0, 1fr); } .demo-shell .tabs, .demo-shell .demo-panel, .demo-shell .demo-actions { grid-column: 1; grid-row: auto; } }

.more { max-width: 1180px; margin: clamp(36px, 5vw, 64px) auto 0; text-align: center; }
.more-track { display: flex; gap: 10px; width: max-content; margin: 0 0 22px; padding: 0; list-style: none; animation: ticker 48s linear infinite;
  -webkit-mask: linear-gradient(90deg, transparent, #000 0); }
.more { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.more-track { -webkit-mask: none; }
.more-track li { padding: 8px 16px; white-space: nowrap; font: 300 15px/1.2 var(--font-body); color: var(--navy); background: rgba(255, 255, 255, .7); border: 1px solid rgba(30, 80, 160, .14); border-radius: 999px; }
.more-end { font: 300 clamp(22px, 3vw, 34px)/1.2 var(--font-display); color: var(--navy); padding-inline: 16px; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .more-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; } .more { -webkit-mask: none; mask: none; } }

/* ---------- minimal hero form: no card, one light transparent row, a quiet checkbox line ---------- */
.hero2-panel .wl { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; max-width: 460px; }
.hero2-panel .wl-form { gap: 14px; }
.hero2-panel .wl-row { padding: 4px; gap: 4px; background: rgba(255, 255, 255, .18); border: 0; border-radius: 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; }
.hero2-panel .wl-row .input { padding-inline: 14px; text-shadow: 0 1px 8px rgba(10, 40, 90, .5); }
.hero2-panel .wl-row .btn:disabled { opacity: .75; }
.hero2-panel .check { font-size: 14px; gap: 10px; align-items: center; text-shadow: 0 1px 10px rgba(10, 40, 90, .7); }
.hero2-panel .check input { width: 16px; height: 16px; flex: none; }

/* ---------- minimal FAQ: a plain list with hairlines, no cards ---------- */
.faq { max-width: 720px; margin-inline: auto; display: block; }
.faq .faq-item, .faq .faq-item.glass { background: transparent !important; border: 0; border-bottom: 1px solid rgba(11, 27, 51, .14); border-radius: 0; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0; margin: 0; }
.faq .faq-item::before, .faq .faq-item::after { display: none !important; }
.faq .faq-item:first-child { border-top: 1px solid rgba(11, 27, 51, .14); }
.faq .faq-q { padding: 20px 4px; font: 300 20px/1.3 var(--font-display); }
.faq .faq-a p { padding: 0 4px 22px; color: var(--soft); font-size: 16px; max-width: 62ch; }

/* ================= pure minimalism: no cards, borders, shadows or glows; type, space and soft tints only ================= */
body { background: var(--paper); }
.glass, .glass--text, .glass--sm, .lesson-card, .cta.glass, .faq .faq-item, .tabs.glass {
  background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.glass::before, .glass::after, .lesson-card::before, .lesson-card::after, .cta.glass::before, .cta.glass::after, .faq-item::before, .faq-item::after { display: none !important; }
/* demo: the screen alone, no laptop frame */
.demo-panel .mac, .demo-panel .mac-lid { filter: none; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.demo-panel .mac-base { display: none; }
.demo-panel .mac-screen.demo { border-radius: 14px; border: 0; box-shadow: none; overflow: hidden; }
/* task list: plain, the current one gets a faint tint */
.demo-shell .tab { border: 0; background: transparent; }
.demo-shell .tab:hover:not([aria-selected="true"]) { background: rgba(11, 27, 51, .04); }
.demo-shell .tab[aria-selected="true"] { background: rgba(11, 27, 51, .07); color: var(--navy); box-shadow: none; }
.demo-shell .tab[aria-selected="true"] .t-ask { color: var(--soft); }
.more-track li { border: 0; background: rgba(11, 27, 51, .05); }
/* FAQ: spacing instead of lines */
.faq .faq-item, .faq .faq-item:first-child { border: 0 !important; }
.faq .faq-q { padding: 18px 4px; }
/* hero badge */
.badge-red { border: 0; background: rgba(255, 255, 255, .18); }
/* closing signup: open text on the page */
.cta .wl-row { background: rgba(11, 27, 51, .05); border: 0; }
.cta h2, .cta .pos, .cta .wl-done, .cta .wl-done h3 { color: var(--navy); }
.cta p, .cta .check, .cta .micro, .cta .linkish { color: var(--soft); }
.cta .btn { color: var(--navy); border-color: transparent; background: transparent !important; }
.cta .btn:hover:not(:disabled) { background: rgba(11, 27, 51, .08) !important; color: var(--navy); }
.cta .linkish { border-bottom-color: transparent; }
.cta :focus-visible { outline-color: var(--navy); }
/* footer */
.foot { background: transparent; color: var(--soft); border: 0; }
.foot a { color: var(--soft); border-color: transparent; }
.foot small { color: var(--soft); }

/* ---------- closing signup on a coastal photo (public/img/coast.webp), with a navy wash so the white text stays readable ---------- */
.cta-sec { background: linear-gradient(180deg, rgba(10, 35, 70, .5), rgba(10, 35, 70, .55)), url(/img/coast.webp) center / cover no-repeat; padding-block: clamp(80px, 12vw, 160px); }
.cta-sec h2, .cta-sec .pos, .cta-sec .wl-done, .cta-sec .wl-done h3 { color: #fff; text-shadow: 0 2px 24px rgba(5, 20, 45, .5); }
.cta-sec p, .cta-sec .check, .cta-sec .micro, .cta-sec .linkish { color: #fff; text-shadow: 0 1px 12px rgba(5, 20, 45, .7); }
.cta-sec .wl-row { background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cta-sec .wl-row .input { color: #fff; } .cta-sec .wl-row .input::placeholder { color: rgba(255, 255, 255, .9); }
.cta-sec .btn { color: #fff; } .cta-sec .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .2) !important; color: #fff; }
.cta-sec .btn:disabled { opacity: .75; }
.cta-sec .check input { accent-color: #fff; }
.cta-sec :focus-visible { outline-color: #fff; }

/* the liquid-glass rules above are more specific than the minimalism block, so repeat them at the same specificity */
.glass:not(.hero2-panel):not(.nav), .faq-item, .cta.glass, .lesson-card { background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.glass:not(.hero2-panel):not(.nav)::before, .glass:not(.hero2-panel):not(.nav)::after, .faq-item::before, .faq-item::after, .cta.glass::before, .cta.glass::after, .lesson-card::before, .lesson-card::after { display: none !important; }
.refract-ok .glass:not(.hero2-panel):not(.nav):not(.faq-item):not(.cta) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.cta-sec .wl, .cta-sec .wl.glass { padding: 0; }
.cta-sec .wl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cta-sec .wl-form { gap: 14px; }
.cta-sec .check, .cta-sec .micro, .cta-sec .linkish { text-align: center; justify-content: center; }

/* ---------- FAQ: a soft gradient with fine film grain (inline SVG noise, no extra request) ---------- */
#faq { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .12 0 0 0 0 .25 .13 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px,
  radial-gradient(60% 55% at 15% 35%, rgba(150, 195, 245, .28), transparent 70%),
  radial-gradient(55% 55% at 88% 55%, rgba(190, 210, 250, .32), transparent 70%),
  linear-gradient(180deg, var(--paper), #e2edfa 55%, var(--paper)); }

/* ---------- minimal footer: one small centred line ---------- */
.foot { padding: 40px 0 44px; background: transparent; }
.foot .wrap { justify-content: center; gap: 8px 28px; }
.foot p, .foot a { font: 300 13px/1 var(--font-body); letter-spacing: .02em; color: var(--soft); margin: 0; border: 0; min-height: 0; }
.foot nav { gap: 28px; }
.foot a:hover { color: var(--navy); }

/* ================= one sky behind the whole page (public/js/clouds.js, fixed to the viewport) =================
   Everything now sits on the hero's sky, so text turns white and tints turn white; a fixed navy wash keeps it readable. */
:root { --navy: #fff; --soft: rgba(255, 255, 255, .84); --paper: #3f78b8; }
html { background: linear-gradient(180deg, #3876ba, #8cbfe8) fixed; }
body { background: transparent; color: #fff; }
.cloud-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; pointer-events: none; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 40, 90, .42), rgba(10, 40, 90, .46)); }
.hero2 { background: none; }
.hero2::after { display: none; }
#faq { background: none; }
.nav-wrap, .nav-wrap.on-light { background: transparent !important; }
.nav-wrap .brand, .nav-wrap .nav-links a, .nav-wrap.on-light .brand, .nav-wrap.on-light .nav-links a { color: #fff; text-shadow: 0 1px 12px rgba(10, 40, 90, .6); }
.nav-wrap .brand svg path, .nav-wrap.on-light .brand svg path { fill: #fff; stroke: rgba(10, 40, 90, .5); }
.nav-wrap .btn, .nav-wrap.on-light .btn { color: #fff; }
.btn, .btn--glass { color: #fff; }
.btn:hover:not(:disabled), .btn--glass:hover:not(:disabled) { background: rgba(255, 255, 255, .16) !important; color: #fff; }
.btn:focus-visible, .btn--glass:focus-visible { outline-color: #fff; }
:focus-visible { outline-color: #fff; }
.demo-shell .tab:hover:not([aria-selected="true"]) { background: rgba(255, 255, 255, .1); }
.demo-shell .tab[aria-selected="true"] { background: rgba(255, 255, 255, .18); color: #fff; }
.demo-shell .tab[aria-selected="true"] .t-ask { color: rgba(255, 255, 255, .9); }
.more-track li { background: rgba(255, 255, 255, .14); color: #fff; }
.faq .faq-a p, .sec-head p { color: rgba(255, 255, 255, .86); }
.foot p, .foot a { color: rgba(255, 255, 255, .85); } .foot a:hover { color: #fff; }
h1, h2, h3, h4, .sec-head h2, .more-end, .faq-q { text-shadow: 0 2px 24px rgba(10, 40, 90, .35); }
.nav-wrap .btn, .nav-wrap.on-light .btn, .nav .btn { background: transparent !important; color: #fff; border-color: transparent; }
.nav-wrap .btn:hover:not(:disabled), .nav .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .16) !important; color: #fff; }

/* The page-wide --navy token is now white, so Buddy's on-screen label and step chip need their own fixed dark colours. */
.demo-label { background: #0b1b33; color: #fff; text-shadow: none; }
.demo-label span { color: #fff; }
.demo-status, .demo-status.ok, .chip.ok { background: #0b1b33; color: #fff; text-shadow: none; }
.demo-status.ok { background: #1a7f55; }
.demo-cap { color: #fff; text-shadow: none; }

/* ---------- scroll animation helpers (public/js/motion.js) ---------- */
.sw { display: inline-block; will-change: transform, opacity; }
.cloud-bg { transform-origin: 50% 40%; will-change: transform; }
.demo-panel { will-change: transform; }
.more { will-change: transform; }
.foot p { display: inline-block; font-size: 15px; letter-spacing: .04em; }

/* ---------- minimal success state: no card, white type straight on the sky ---------- */
.hero2-panel .wl-done { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0; border-radius: 0; color: #fff; text-align: center; text-shadow: 0 1px 14px rgba(10, 40, 90, .55); display: grid; gap: 14px; justify-items: center; }
.hero2-panel .wl-done[hidden] { display: none; }
.hero2-panel .wl-done .eyebrow, .hero2-panel .wl-done .micro { display: none; }
.hero2-panel .wl-done h3 { color: #fff; font: 300 22px/1.2 var(--font-display); text-transform: none; }
.hero2-panel .wl-done .pos { color: #fff; font: 300 clamp(72px, 14vw, 120px)/1 var(--font-display); background: none; }
.hero2-panel .wl-done .rule, .hero2-panel .wl-done p { color: #fff; font-size: 15px; }
.hero2-panel .wl-done .rule strong { font-weight: 400; }
.hero2-panel .wl-done .ref-row { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 420px; padding: 4px; background: rgba(255, 255, 255, .16); border: 0; border-radius: 10px; }
.hero2-panel .wl-done .ref-row .input { flex: 1; min-width: 0; color: #fff; font-size: 14px; }
.hero2-panel .wl-done .share { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.hero2-panel .wl-done .share .btn { color: #fff; }
.hero2-panel .wl-done .linkish { color: rgba(255, 255, 255, .85); border-bottom-color: transparent; }

/* ---------- hero background: four faint, real Buddy demos (same engine as the demo section) drifting behind the signup ----------
   Decorative (aria-hidden, no pointer events), low opacity, two under 1100px, none under 900px so they never crowd the form. */
.hero2-cards { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hd { position: absolute; width: 300px; opacity: .3; border-radius: 12px; overflow: hidden; --r: 0deg; animation: hcfloat 14s ease-in-out infinite alternate; }
.hd .mac-screen.demo { border-radius: 12px; }
.hero2 .hd .demo-stage { aspect-ratio: 16 / 10; }
.hd1 { left: 3%; top: 13%; width: 310px; --r: -4deg; } .hd2 { right: 9%; top: 7%; width: 270px; --r: 3deg; animation-delay: -5s; animation-duration: 16s; }
.hd3 { left: 12%; top: 63%; width: 260px; --r: 3.5deg; animation-delay: -9s; animation-duration: 12s; } .hd4 { right: 3%; top: 52%; width: 300px; --r: -3deg; animation-delay: -3s; animation-duration: 15s; }
@keyframes hcfloat { from { transform: translate3d(0, -10px, 0) rotate(calc(var(--r) - 1.2deg)); } to { transform: translate3d(6px, 12px, 0) rotate(calc(var(--r) + 1.2deg)); } }
@media (max-width: 1299px) { .hd { width: 240px !important; } }
@media (max-width: 1099px) { .hd3, .hd4 { display: none; } }
@media (max-width: 899px) { .hero2-cards { display: none; } }
@media (prefers-reduced-motion: reduce) { .hd { animation: none; } }

/* ---------- demo section layout: a row of task pills on top, one big screen below, the question under it ---------- */
.demo-shell { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 1060px; }
.demo-shell .tabs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; overflow: visible; }
.demo-shell .tab { display: block; padding: 10px 18px; border-radius: 999px; text-align: center; background: rgba(255, 255, 255, .1); color: #fff; }
.demo-shell .tab:hover:not([aria-selected="true"]) { background: rgba(255, 255, 255, .22); }
.demo-shell .tab[aria-selected="true"] { background: #fff; color: #0b1b33; }
.demo-shell .t-name { font: 500 15px/1.2 var(--font-body); white-space: nowrap; }
.demo-shell .demo-panel { grid-column: auto; grid-row: auto; width: 100%; order: 2; }
.demo-ask { order: 3; margin: 0; max-width: 46ch; text-align: center; color: #fff; font: 300 20px/1.45 var(--font-body); text-wrap: balance; }
.demo-shell .demo-actions { grid-column: auto; grid-row: auto; order: 4; justify-content: center; }
@media (max-width: 600px) { .demo-shell .tabs { gap: 6px; } .demo-shell .tab { padding: 8px 14px; } .demo-ask { font-size: 17px; } }