/* ========================================================================== GHOST — website design system Tokens copied verbatim from the app's own source of truth: ghost_flutter/lib/core/theme/ghost_colors.dart (= handoff v6 DESIGN_TOKENS.md) No web-only colours. Purple/violet is forbidden anywhere. Red is reserved: alertRed for the one danger word, signRed for the limit sign. ========================================================================== */ /* ----- Fonts ------------------------------------------------------------ */ /* Clash Display comes from Fontshare's own API (link in ): its EULA §02 forbids serving the font file ourselves. Inter is OFL and self-hosted. */ @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* ----- Tokens ----------------------------------------------------------- */ :root { /* Brand */ --green: #22E06A; --green-deep: #0C9647; --green-glow: #2BEA75; /* Alert semantics — never decorative */ --amber: #FFC24B; --alert-red: #FF4D5E; --sign-red: #E4322B; /* Surface */ --bg-base: #0A0B10; --bg-screen: #08090C; --bg-green-tint: #08120C; --surface-card: rgba(255, 255, 255, .055); --surface-stroke: rgba(255, 255, 255, .11); --surface-stroke-strong: rgba(255, 255, 255, .18); /* Text */ --text-primary: #EDEFF6; --text-secondary: #8A90A6; --text-tertiary: #5A6070; /* Tracks */ --track-base: #23262E; --ui-blue: #0A84FF; /* Type */ --font-display: 'Clash Display', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Spacing — base unit 4 */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; /* Radii — from the app: card 15, sheet 20, button 12 */ --r-card: 15px; --r-sheet: 20px; --r-button: 12px; --maxw: 1200px; --ease: cubic-bezier(.22, .7, .36, 1); } /* ----- Reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Nothing may scroll sideways at any width. */ overflow-x: hidden; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--text-primary); background: var(--bg-base); overflow-x: hidden; min-height: 100vh; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } ul { list-style: none; } :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; } ::selection { background: rgba(34, 224, 106, .3); color: #fff; } /* ----- Layout ----------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); } .section { padding: var(--s20) 0; position: relative; } .section--tight { padding: var(--s16) 0; } .skip-link { position: absolute; left: -9999px; top: var(--s2); background: var(--green); color: #04150B; padding: var(--s3) var(--s5); border-radius: var(--r-button); font-weight: 600; z-index: 200; } .skip-link:focus { left: var(--s5); } /* ----- Type ------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; } h1 { font-size: clamp(38px, 7vw, 76px); } h2 { font-size: clamp(29px, 4.6vw, 50px); } h3 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.2; } .eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--green); } .lede { color: var(--text-secondary); font-size: clamp(17px, 1.9vw, 20px); line-height: 1.6; /* Never let a line exceed ~70 characters. */ max-width: 62ch; } .section-head { max-width: 46rem; margin: 0 auto var(--s12); text-align: center; } .section-head h2 { margin-top: var(--s3); } .section-head .lede { margin: var(--s4) auto 0; } /* The one red on the page. */ .danger-word { color: var(--alert-red); } /* ----- Buttons ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: var(--s3) var(--s6); border-radius: var(--r-button); font-weight: 600; font-size: 17px; transition: transform .15s var(--ease), background .2s, border-color .2s; } .btn--primary { background: var(--green); color: #04150B; } .btn--primary:hover { background: var(--green-glow); transform: translateY(-1px); } .btn--quiet { border: 1px solid var(--surface-stroke-strong); color: var(--text-primary); background: var(--surface-card); } .btn--quiet:hover { border-color: var(--green); } .btn:active { transform: translateY(1px); } /* ----- Header ----------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(10, 11, 16, .82); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; padding-top: env(safe-area-inset-top); } .site-header.is-scrolled { border-bottom-color: var(--surface-stroke); } .nav { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: var(--s4); } /* The logo is a link, so it needs a real touch target — 35px was under the 44px minimum. Inline links inside a sentence are exempt from that rule and are deliberately left alone. */ .brand { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; } .nav-links { display: flex; align-items: center; gap: var(--s6); } .nav-links a { color: var(--text-secondary); font-size: 16px; display: inline-flex; align-items: center; min-height: 44px; } .nav-links a:hover { color: var(--text-primary); } /* ----- Hero ------------------------------------------------------------- */ .hero { padding: var(--s12) 0 var(--s16); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: -30% -10% auto; height: 70%; background: radial-gradient(closest-side, rgba(34, 224, 106, .13), transparent 70%); pointer-events: none; } .hero-grid { display: grid; gap: var(--s12); align-items: center; position: relative; } .hero h1 { margin: var(--s5) 0 0; } .hero .lede { margin-top: var(--s5); } .hero-cta { margin-top: var(--s8); } .cta-note { color: var(--text-secondary); font-size: 14px; margin-top: var(--s3); } /* ----- Ghost mark + hero animation -------------------------------------- */ .ghost-mark { display: block; } .hero-mark { display: flex; flex-direction: column; align-items: center; gap: var(--s4); } .hero-wordmark { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5vw, 44px); line-height: 1; color: #fff; } .hero-wordmark small { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-top: var(--s2); } .hero-badge { width: clamp(160px, 34vw, 232px); aspect-ratio: 1; border-radius: 26%; background: radial-gradient(120% 90% at 50% 35%, var(--green-glow), #12B355 60%, var(--green-deep)); display: grid; place-items: center; box-shadow: 0 24px 70px rgba(12, 150, 71, .38); } /* 1.5s launch choreography, then only the life-bob loops. */ @keyframes gm-rise { 0% { transform: translateY(120%) scale(.86); opacity: 0; } 8% { opacity: 1; } 30% { transform: translateY(-6%) scale(1.04); } 44% { transform: translateY(2%) scale(.99); } 56% { transform: translateY(-1%) scale(1.01); } 60%, 100% { transform: translateY(0) scale(1); } } @keyframes gm-squash { 0% { transform: scaleY(.74) scaleX(1.12); } 30% { transform: scaleY(1.1) scaleX(.92); } 44% { transform: scaleY(.97) scaleX(1.03); } 60%, 100% { transform: scaleY(1) scaleX(1); } } @keyframes gm-scan { 0%, 58% { transform: rotate(0) translateX(0); } 68% { transform: rotate(-8deg) translateX(-5px); } 80% { transform: rotate(8deg) translateX(5px); } 90%, 100%{ transform: rotate(0) translateX(0); } } @keyframes gm-pupil { 0%, 58% { transform: translateX(0); } 68% { transform: translateX(-3px); } 80% { transform: translateX(3px); } 90%, 100% { transform: translateX(0); } } @keyframes gm-sparkle { 0%, 90% { opacity: 0; transform: scale(0); } 94% { opacity: 1; transform: scale(1.3); } 97% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } } @keyframes gm-zap { 0%, 90% { opacity: .9; transform: translate(0, 0); } 95% { opacity: 1; transform: translate(3px, -3px); } 100% { opacity: .9; transform: translate(0, 0); } } @keyframes gm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5%); } } .hero-badge .gm-rise { animation: gm-rise 1.5s var(--ease) both; transform-origin: bottom center; } .hero-badge .gm-squash { animation: gm-squash 1.5s var(--ease) both; transform-origin: bottom center; } .hero-badge .gm-look { animation: gm-scan 1.5s ease-in-out both; transform-origin: center bottom; } .hero-badge .gm-pupil { animation: gm-pupil 1.5s ease-in-out both; } .hero-badge .gm-sparkle{ animation: gm-sparkle 1.5s ease both; transform-origin: center; transform-box: fill-box; } .hero-badge .gm-streaks{ animation: gm-zap 1.5s ease both; transform-origin: center; transform-box: fill-box; } /* The life-bob starts after the sequence and is the only thing that loops. */ .hero-badge .gm-bob { animation: gm-bob 4s ease-in-out 1.5s infinite; } /* ----- Device frame ----------------------------------------------------- */ .device { width: 100%; max-width: 300px; margin-inline: auto; border-radius: 44px; background: #000; padding: 10px; border: 1px solid var(--surface-stroke-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .device img { border-radius: 34px; width: 100%; } .device--sm { max-width: 232px; border-radius: 36px; padding: 8px; } .device--sm img { border-radius: 29px; } /* ----- Problem section -------------------------------------------------- */ .consequences { display: grid; gap: var(--s4); margin-top: var(--s10); } .consequence { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s5); align-items: start; background: var(--surface-card); border: 1px solid var(--surface-stroke); border-radius: var(--r-card); padding: var(--s6); } .consequence dt { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2.1vw, 24px); line-height: 1.15; } /* Below the iPad breakpoint the two columns leave the explanation about 150px, which reads as a column of single words. Stack instead. */ .consequence dd { color: var(--text-secondary); font-size: 16px; } /* ----- Steps ------------------------------------------------------------ */ /* Four fixed rows so the number, the heading, the copy and the phone each start on the same line across all three columns. Previously the copy set its own height and the phones sat at three different heights. */ .steps { display: grid; gap: var(--s12); counter-reset: step; } .step { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; } .step figure { margin-top: var(--s6); align-self: end; } .step .device { margin-inline: auto; } .step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(34, 224, 106, .14); color: var(--green); font-weight: 600; font-size: 15px; margin-bottom: var(--s4); } .step h3 { margin-bottom: var(--s3); } .step p { color: var(--text-secondary); font-size: 16px; } .step figure { margin-top: var(--s6); } .step figcaption { color: var(--text-secondary); font-size: 13px; text-align: center; margin-top: var(--s3); } /* ----- Family band ------------------------------------------------------ */ .family { border-radius: var(--r-sheet); background: radial-gradient(120% 140% at 12% 0%, rgba(34, 224, 106, .16), transparent 62%), linear-gradient(180deg, var(--bg-green-tint), var(--bg-screen)); border: 1px solid rgba(34, 224, 106, .26); padding: clamp(var(--s10), 6vw, var(--s20)) clamp(var(--s5), 5vw, var(--s16)); } .family h2 { max-width: 18ch; } .family .lede { margin-top: var(--s5); } .family-people { display: flex; gap: var(--s2); margin-top: var(--s8); flex-wrap: wrap; } .family-people span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(34, 224, 106, .12); border: 1px solid rgba(34, 224, 106, .3); } /* ----- Not-doing list --------------------------------------------------- */ .nots { display: grid; gap: var(--s3); max-width: 44rem; margin: 0 auto; } .not { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s5) var(--s6); border: 1px solid var(--surface-stroke); border-radius: var(--r-card); background: var(--surface-card); font-size: 17px; } .not svg { flex: 0 0 auto; margin-top: 3px; color: var(--text-tertiary); } /* ----- Feature grid ----------------------------------------------------- */ .features { display: grid; gap: var(--s4); } .feature { border: 1px solid var(--surface-stroke); border-radius: var(--r-card); background: var(--surface-card); padding: var(--s6); } .feature .ico { width: 40px; height: 40px; border-radius: var(--r-button); display: grid; place-items: center; background: rgba(34, 224, 106, .12); color: var(--green); margin-bottom: var(--s4); } .feature h3 { font-family: var(--font-body); font-size: 17px; font-weight: 600; letter-spacing: 0; } .feature p { color: var(--text-secondary); font-size: 15px; margin-top: var(--s2); } /* ----- Comparison table ------------------------------------------------- */ /* The table is wider than a phone by design. It scrolls inside this box — the page itself never scrolls sideways — and the right edge fades so it is obvious there is more to see. */ .table-wrap { position: relative; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.compare { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; } table.compare caption { caption-side: bottom; color: var(--text-secondary); font-size: 13px; text-align: left; padding-top: var(--s4); } table.compare th, table.compare td { padding: var(--s4) var(--s3); border-bottom: 1px solid var(--surface-stroke); text-align: center; } table.compare th[scope='row'] { text-align: left; font-weight: 400; color: var(--text-secondary); white-space: nowrap; padding-inline-end: var(--s5); } table.compare thead th { font-weight: 600; font-size: 14px; } table.compare thead th.is-ghost { color: var(--green); } table.compare td.is-ghost { background: rgba(34, 224, 106, .07); } table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: none; } .cell-yes { color: var(--green); } .cell-no { color: var(--text-secondary); } .cell-unknown { color: var(--text-secondary); } /* ----- Pricing ---------------------------------------------------------- */ .plans { display: grid; gap: var(--s4); max-width: 40rem; margin: 0 auto; } .plan { border: 1px solid var(--surface-stroke); border-radius: var(--r-card); padding: var(--s6); display: flex; align-items: center; justify-content: space-between; gap: var(--s5); background: var(--surface-card); } .plan--best { border-color: rgba(34, 224, 106, .45); background: rgba(34, 224, 106, .06); } .plan-name { font-weight: 600; font-size: 17px; } .plan-sub { color: var(--text-secondary); font-size: 14px; margin-top: 2px; } .plan-price { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 30px); white-space: nowrap; } .save-badge { display: inline-block; margin-top: var(--s2); background: var(--green); color: #04150B; font-size: 12px; font-weight: 600; padding: 3px var(--s2); border-radius: 6px; } .price-points { display: grid; gap: var(--s3); max-width: 40rem; margin: var(--s8) auto 0; } .price-points li { display: flex; gap: var(--s3); color: var(--text-secondary); font-size: 16px; } .price-points svg { flex: 0 0 auto; margin-top: 4px; color: var(--green); } /* ----- Waitlist form ---------------------------------------------------- */ .waitlist { max-width: 30rem; } .waitlist-row { display: flex; gap: var(--s2); flex-wrap: wrap; } .waitlist input[type='email'] { flex: 1 1 15rem; min-width: 0; min-height: 48px; padding: var(--s3) var(--s4); background: #0E1016; border: 1px solid var(--surface-stroke-strong); border-radius: var(--r-button); color: var(--text-primary); font: inherit; font-size: 16px; } .waitlist input::placeholder { color: var(--text-secondary); } .waitlist input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(34, 224, 106, .2); } .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-msg { margin-top: var(--s3); font-size: 15px; } .form-msg:empty { display: none; } .form-msg.is-ok { color: var(--green); } .form-msg.is-err { color: #FF8A95; } .turnstile-holder { margin-top: var(--s3); min-height: 65px; } .turnstile-holder:empty { min-height: 0; } /* Store badges — built, hidden until the apps are live (see config.js). */ .store-badges { display: none; gap: var(--s3); flex-wrap: wrap; } .store-badges.is-live { display: flex; } .store-badge { display: inline-flex; align-items: center; gap: var(--s3); background: #fff; color: #000; border-radius: var(--r-button); padding: 10px var(--s5) 10px var(--s4); min-height: 48px; } .store-badge .sb-small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .72; } .store-badge .sb-big { display: block; font-size: 17px; font-weight: 600; margin-top: 1px; } /* ----- Sticky mobile CTA ------------------------------------------------ */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom)); background: rgba(10, 11, 16, .93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--surface-stroke); transform: translateY(110%); transition: transform .28s var(--ease); } .sticky-cta.is-visible { transform: translateY(0); } .sticky-cta .btn { width: 100%; } /* ----- Footer ----------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--surface-stroke); padding: var(--s16) 0 var(--s10); margin-top: var(--s16); } .footer-top { display: flex; flex-wrap: wrap; gap: var(--s8); justify-content: space-between; } .footer-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); } .footer-links a { color: var(--text-secondary); font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; } .footer-links a:hover { color: var(--text-primary); } .footer-legal { margin-top: var(--s10); padding-top: var(--s6); border-top: 1px solid var(--surface-stroke); color: var(--text-secondary); font-size: 13.5px; display: grid; gap: var(--s2); } /* ----- Long-form / legal pages ------------------------------------------ */ .doc { max-width: 46rem; margin: 0 auto; padding: var(--s12) 0 var(--s8); } .doc h1 { font-size: clamp(32px, 5vw, 48px); } .doc-meta { color: var(--text-secondary); font-size: 13.5px; margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); } .doc-body { margin-top: var(--s10); } .doc-body h2 { font-size: clamp(21px, 2.8vw, 27px); margin: var(--s10) 0 var(--s3); scroll-margin-top: 88px; } .doc-body h3 { font-size: 18px; margin: var(--s6) 0 var(--s2); } .doc-body p, .doc-body li { color: #C7CBD8; font-size: 16.5px; } .doc-body p { margin-bottom: var(--s3); } .doc-body ul, .doc-body ol { margin: 0 0 var(--s4); padding-inline-start: var(--s6); } .doc-body ul li { list-style: disc; margin-bottom: var(--s2); } .doc-body ol li { list-style: decimal; margin-bottom: var(--s2); } .doc-body strong { color: var(--text-primary); } .doc-body a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } .note-box { border: 1px solid var(--surface-stroke); border-inline-start: 3px solid var(--green); background: rgba(34, 224, 106, .05); border-radius: var(--r-card); padding: var(--s5); margin: var(--s5) 0; color: #C7CBD8; font-size: 15.5px; } .toc { background: var(--surface-card); border: 1px solid var(--surface-stroke); border-radius: var(--r-card); padding: var(--s6); margin-top: var(--s8); } .toc h2 { font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 var(--s3); } .toc ol { display: grid; gap: var(--s2); padding-inline-start: var(--s5); } .toc li { list-style: decimal; } .toc a { color: var(--text-secondary); font-size: 15px; } .toc a:hover { color: var(--text-primary); } /* ----- FAQ -------------------------------------------------------------- */ .faq { border: 1px solid var(--surface-stroke); border-radius: var(--r-card); overflow: hidden; margin-top: var(--s6); } .faq details { border-bottom: 1px solid var(--surface-stroke); } .faq details:last-child { border-bottom: none; } .faq summary { padding: var(--s5) var(--s6); font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); list-style: none; min-height: 44px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--green); font-size: 24px; font-weight: 400; line-height: 1; } .faq details[open] summary::after { content: '−'; } .faq .answer { padding: 0 var(--s6) var(--s5); color: var(--text-secondary); font-size: 16px; } /* ----- 404 -------------------------------------------------------------- */ .err { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: var(--s20) var(--s5); } .err-code { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 15vw, 130px); line-height: 1; color: var(--green); } /* ----- Reveal ----------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ========================================================================== BREAKPOINTS — all three genuinely designed, not scaled ========================================================================== */ /* --- iPad: 768–1279 ----------------------------------------------------- */ /* iPad portrait specifically — two columns for the hero would crush it. */ /* --- Desktop: ≥1280 ----------------------------------------------------- */ /* --- Landscape phones: the hero must not break -------------------------- */ /* ----- Capability strip -------------------------------------------------- */ .capstrip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s3); margin-top: var(--s16); padding-top: var(--s8); border-top: 1px solid var(--surface-stroke); } .capstrip li { font-size: 13.5px; color: var(--text-secondary); border: 1px solid var(--surface-stroke); border-radius: 999px; padding: 7px var(--s4); background: var(--surface-card); } /* ----- Stakes (the problem, with the photograph) ------------------------- */ .stakes { display: grid; gap: var(--s10); align-items: center; } .stakes > * { min-width: 0; } .stakes-photo { position: relative; border-radius: var(--r-sheet); overflow: hidden; } .stakes-photo img { width: 100%; height: auto; display: block; } /* Fades the photograph into the page instead of letting it sit as a bright rectangle on a dark background. */ .stakes-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,11,16,.35) 0%, transparent 28%, transparent 62%, rgba(10,11,16,.92) 100%), linear-gradient(90deg, rgba(10,11,16,.55) 0%, transparent 34%); } .eyebrow--warn { color: var(--amber); } .consequences { display: grid; gap: var(--s3); margin-top: var(--s8); } .consequence--danger { border-color: rgba(255, 77, 94, .34); background: rgba(255, 77, 94, .05); } /* ----- Family ------------------------------------------------------------ */ .family-math { margin-top: var(--s6); } .family-math-num { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.15; } .family-math-sub { display: block; color: var(--text-secondary); font-size: 16px; margin-top: var(--s2); } .family-math-sub strong { color: var(--green); } .family-visual { display: grid; justify-items: center; gap: var(--s4); } /* The note is a third grid child so the avatars can sit above it on mobile and beside the copy on wider screens. */ /* An overlapping stack, not a wrapping row: six chips in a narrow column wrapped as 5 + 1, which reads as a layout fault rather than a family. */ .people { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; } .person { width: clamp(44px, 7.5vw, 60px); aspect-ratio: 1; display: block; flex: 0 0 auto; margin-inline-start: -12px; border-radius: 50%; /* A ring in the page background separates the overlapping chips. */ box-shadow: 0 0 0 3px var(--bg-screen); } .person:first-child { margin-inline-start: 0; } .people-cap { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); } /* ----- Restraint list ---------------------------------------------------- */ .not b { font-weight: 600; } .not-x { position: relative; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--surface-stroke-strong); } .not-x::before, .not-x::after { content: ''; position: absolute; left: 5px; top: 10px; width: 10px; height: 1.5px; background: var(--text-secondary); border-radius: 2px; } .not-x::before { transform: rotate(45deg); } .not-x::after { transform: rotate(-45deg); } /* ----- Plans (rebuilt: stacked, so the price is the loudest thing) ------- */ .plan { display: block; text-align: left; } .plan-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .plan-price { margin-top: var(--s2); font-size: clamp(34px, 5vw, 46px); line-height: 1; } .plan-sub { margin-top: var(--s2); } .save-badge { margin-top: 0; } /* ----- Closer ------------------------------------------------------------ */ .closer { border-radius: var(--r-sheet); text-align: center; padding: clamp(var(--s12), 7vw, var(--s24)) var(--s6); background: radial-gradient(120% 150% at 50% 0%, rgba(34, 224, 106, .17), transparent 62%), linear-gradient(180deg, var(--bg-green-tint), var(--bg-screen)); border: 1px solid rgba(34, 224, 106, .26); } .closer .lede { margin: var(--s5) auto var(--s8); } .closer .cta-note { margin-top: var(--s4); } .hero-badge--sm { margin: 0 auto var(--s6); } .btn--lg { padding: var(--s4) var(--s10); font-size: 18px; min-height: 56px; } .btn--sm { min-height: 44px; padding: 10px 18px; font-size: 15px; } /* ----- Mobile corrections ------------------------------------------------ */ /* ----- Comparison additions ---------------------------------------------- */ table.compare td { font-size: 15px; } table.compare th[scope='row'] { white-space: normal; } /* ----- Feature: the headline number -------------------------------------- */ .big-number { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 40px); line-height: 1; color: var(--green); letter-spacing: -.02em; margin-bottom: var(--s1); } /* The camera-count card spans the row, so the remaining nine features divide evenly instead of leaving one card stranded on its own line. */ .feature--wide { border-color: rgba(34, 224, 106, .3); background: radial-gradient(120% 200% at 8% 0%, rgba(34, 224, 106, .12), transparent 60%), rgba(34, 224, 106, .04); grid-column: 1 / -1; display: grid; gap: var(--s2) var(--s6); align-items: center; } /* ----- Faces ------------------------------------------------------------- */ :root { --face: clamp(46px, 8vw, 62px); } .person { align-self: flex-end; } /* ----- Store badges: not-yet-live state ---------------------------------- */ .store-badge.is-soon { background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--surface-stroke-strong); cursor: default; } .store-badge.is-soon svg { opacity: .75; } .store-badges { justify-content: flex-start; } /* ----- Hero kicker: says what this is, above the headline ---------------- */ .chip-early { display: inline-block; margin-right: var(--s3); padding: 3px 9px; border-radius: 999px; background: rgba(34, 224, 106, .13); border: 1px solid rgba(34, 224, 106, .4); color: var(--green); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; vertical-align: 2px; } .hero-kicker { margin-top: var(--s5); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green); } /* ----- Real faces -------------------------------------------------------- */ .person img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } /* ----- Reviews slider ---------------------------------------------------- */ .reviews { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .reviews-track { display: flex; gap: var(--s4); padding-bottom: var(--s3); } .review { flex: 0 0 min(84vw, 340px); scroll-snap-align: start; border: 1px solid var(--surface-stroke); border-radius: var(--r-card); background: var(--surface-card); padding: var(--s6); display: grid; gap: var(--s4); align-content: start; } .review blockquote { color: var(--text-primary); font-size: 16px; line-height: 1.55; } .review figcaption { color: var(--text-secondary); font-size: 14px; } .stars { color: var(--amber); display: inline-flex; gap: 2px; } /* ----- Mobile: the chip gets its own line -------------------------------- */ /* Must sit at the end of the file: the "Mobile corrections" block above is followed by later base rules, so an override placed there loses on source order to the base .chip-early rule despite equal specificity. */ /* ========================================================================== RESPONSIVE — every media query lives here, after all base rules. This ordering is load-bearing. Media rules and base rules have equal specificity, so a base rule written LOWER in the file silently wins inside the breakpoint. Sections used to be appended below the mobile block, which is how .hero-kicker and .stakes lost their mobile sizing without any error. New component styles go ABOVE this marker. Never below it. Order: max-width descending, then min-width ascending, then landscape, then reduced-motion. ========================================================================== */ @media (max-width: 767px) { .nav-links { display: none; } } @media (max-width: 767px) { /* Two columns leave the explanation about 150px, which reads as a stack of single words. One column below the tablet breakpoint. */ .consequence { grid-template-columns: 1fr; gap: var(--s2); } } @media (max-width: 767px) { /* Three full-width phones stacked made the steps section about 2,300px tall on a 390px screen. Capped so the sequence reads as three steps rather than three posters. */ .step .device { max-width: 232px; } .hero .device { max-width: 268px; } /* A half-width button under a full-width field looks unfinished, and a full-width target is easier to hit on a phone. */ /* In a column flex container `flex-basis` sizes the HEIGHT, so the field's `flex: 1 1 15rem` made it 240px tall. Reset it when stacking. */ .waitlist-row { flex-direction: column; align-items: stretch; } .waitlist-row input[type='email'] { flex: 0 0 auto; width: 100%; } .waitlist-row .btn { width: 100%; } /* The hero has to earn its height on a phone: badge, kicker, headline, paragraph and form all compete for one screen. */ .hero { padding-top: var(--s6); } .hero-badge { width: clamp(104px, 30vw, 148px); } .hero-kicker { margin-top: var(--s4); font-size: 12.5px; letter-spacing: .09em; } .hero h1 { margin-top: var(--s3); } .hero .lede { margin-top: var(--s4); font-size: 16.5px; } .hero-cta { margin-top: var(--s6); } /* Half-width badges stacked under a full-width button read as unfinished. Two columns keeps them tidy and matches the button's edges. */ .store-badges { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); width: 100%; } .store-badge { padding: 8px var(--s3); gap: var(--s2); } .store-badge .sb-small { font-size: 11px; } .store-badge .sb-big { font-size: 15px; } /* The stakes photo is the emotional anchor; give it the full column. */ .stakes-photo { max-width: 420px; margin-inline: auto; } } @media (max-width: 767px) { .table-scroll { overflow-x: visible; } table.compare { min-width: 0; display: block; } table.compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } table.compare tbody, table.compare tr, table.compare th, table.compare td { display: block; width: auto; } table.compare tr { background: var(--surface-card); border: 1px solid var(--surface-stroke); border-radius: var(--r-card); padding: var(--s5); margin-bottom: var(--s3); } table.compare th[scope='row'] { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; color: var(--text-primary); padding: 0 0 var(--s3); border-bottom: 1px solid var(--surface-stroke); text-align: left; } table.compare td { border: none; padding: var(--s3) 0 0; text-align: left; font-size: 15.5px; } table.compare td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-secondary); } table.compare td.is-ghost { background: none; } table.compare td.is-ghost::before { color: var(--green); } table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: none; } table.compare tbody tr:last-child th[scope='row'] { border-bottom: 1px solid var(--surface-stroke); } .chip-early { display: block; width: fit-content; margin: 0 0 var(--s3); } } @media (min-width: 768px) { .sticky-cta { display: none; } } /* --- Tablet: more room, but still ONE column ----------------------------- */ /* The layout has exactly two states: single column below 901px, two columns above it. It used to go two-column at 768 and then get forced back to one column between 768 and 900, so dragging a window across that band flipped the hero twice and moved the phone above the text and back. */ @media (min-width: 768px) { body { font-size: 17px; } .section { padding: var(--s24) 0; } .wrap { padding: 0 var(--s8); } .hero { padding: var(--s16) 0 var(--s20); } .hero-visual { display: grid; justify-items: center; gap: var(--s8); } .consequences { grid-template-columns: 1fr; } .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } .features { grid-template-columns: repeat(2, 1fr); } .nots { grid-template-columns: repeat(2, 1fr); max-width: none; } .plans { grid-template-columns: repeat(2, 1fr); max-width: none; } .feature--wide { grid-template-columns: auto auto 1fr; } .feature--wide .ico { margin-bottom: 0; } .feature--wide p { margin-top: 0; max-width: 44ch; } } /* A square photo in a full-width column becomes absurdly tall, so it keeps a cap and centres itself for as long as it has the row to itself. */ @media (max-width: 900px) { .stakes-photo { max-width: 460px; margin-inline: auto; } .family-visual { margin-top: var(--s8); } } /* --- Desktop: the single switch to two columns --------------------------- */ @media (min-width: 901px) { .hero-grid { grid-template-columns: 1fr 1fr; align-items: center; } .stakes { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--s12); } .family { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s12); align-items: center; } } @media (min-width: 1280px) { .features { grid-template-columns: repeat(3, 1fr); } .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s16); } } @media (max-height: 520px) and (orientation: landscape) { .hero { padding: var(--s8) 0 var(--s10); } .hero-badge { width: clamp(96px, 18vw, 140px); } .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; } .sticky-cta { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } @media (prefers-reduced-motion: reduce) { .hero-badge .gm-rise, .hero-badge .gm-squash, .hero-badge .gm-look, .hero-badge .gm-pupil, .hero-badge .gm-streaks, .hero-badge .gm-bob { animation: none !important; transform: none !important; } /* The wink is the resting frame, so it stays visible. */ .hero-badge .gm-sparkle { animation: none !important; opacity: 0 !important; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }