/* ========================================================================= NeuroPath - marketing site Tokens are a direct port of lib/core/theme/np_palette.dart. Keep them in sync: the site's whole job is to feel like the app, and drift shows up first as a green that is almost but not quite #3FA87E. ========================================================================= */ /* ---------- Fonts ------------------------------------------------------ */ /* Self-hosted on purpose. The page asserts "no third parties" a few hundred pixels below the fold; a CDN font request would contradict it. */ @font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap} /* ---------- Tokens ----------------------------------------------------- */ :root{ --bg:#F4F5F4; --bg-outer:#FFFFFF; --surface:#FFFFFF; --surface-2:#EAF4EE; --hero-a:#EAF4EE; --hero-b:#FFFFFF; --glow:217,228,186; --line:#E3E7E4; --line-hover:#C8D1CC; --ink:#121815; --muted:#58635C; --faint:#8E968F; --accent:#3FA87E; --accent-deep:#2A7959; --accent-rgb:63,168,126; --teal:#5CC2E4; --amber:#E2832B; --coral:#E55242; --gold:#AD8620; --violet:#8C6FE6; --shadow-card:0 4px 14px rgba(0,0,0,.02); --shadow-float:0 12px 28px rgba(0,0,0,.05); --shadow-accent:0 8px 20px rgba(var(--accent-rgb),.25); --shadow-device:0 40px 80px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.06); --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-xxl:24px; --r-full:999px; --page:1180px; --gut:24px; --nav-h:68px; --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } /* The dark palette's actual values, defined once and inert until mapped. Change a dark colour here and nowhere else. */ :root{ --dk-bg:#0F1110; --dk-bg-outer:#0B0C0B; --dk-surface:#1A1D1B; --dk-surface-2:#232725; --dk-hero-a:#16241D; --dk-hero-b:#1A1D1B; --dk-glow:23,37,28; --dk-line:#2A2E2B; --dk-line-hover:#3C423E; --dk-ink:#ECEFEC; --dk-muted:#9BA39C; --dk-faint:#6C736D; --dk-accent:#4EB276; --dk-accent-deep:#3A9E63; --dk-accent-rgb:78,178,118; --dk-amber:#F2A65A; --dk-coral:#F07575; --dk-gold:#E8C468; --dk-violet:#9B84F0; --dk-shadow-card:0 4px 14px rgba(0,0,0,.25); --dk-shadow-float:0 12px 28px rgba(0,0,0,.4); } /* Theme has three states, not two. An explicit choice stamps data-theme on ; the default ("system") stamps nothing, and only the media query separates light from dark. So the media rule must yield to an explicit light choice, and the explicit dark rule must win regardless of the OS — otherwise the toggle only works in one direction. The two blocks below are deliberately identical mappings; the colours themselves live above. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:var(--dk-bg); --bg-outer:var(--dk-bg-outer); --surface:var(--dk-surface); --surface-2:var(--dk-surface-2); --hero-a:var(--dk-hero-a); --hero-b:var(--dk-hero-b); --glow:var(--dk-glow); --line:var(--dk-line); --line-hover:var(--dk-line-hover); --ink:var(--dk-ink); --muted:var(--dk-muted); --faint:var(--dk-faint); --accent:var(--dk-accent); --accent-deep:var(--dk-accent-deep); --accent-rgb:var(--dk-accent-rgb); --amber:var(--dk-amber); --coral:var(--dk-coral); --gold:var(--dk-gold); --violet:var(--dk-violet); --shadow-card:var(--dk-shadow-card); --shadow-float:var(--dk-shadow-float); } } :root[data-theme="dark"]{ --bg:var(--dk-bg); --bg-outer:var(--dk-bg-outer); --surface:var(--dk-surface); --surface-2:var(--dk-surface-2); --hero-a:var(--dk-hero-a); --hero-b:var(--dk-hero-b); --glow:var(--dk-glow); --line:var(--dk-line); --line-hover:var(--dk-line-hover); --ink:var(--dk-ink); --muted:var(--dk-muted); --faint:var(--dk-faint); --accent:var(--dk-accent); --accent-deep:var(--dk-accent-deep); --accent-rgb:var(--dk-accent-rgb); --amber:var(--dk-amber); --coral:var(--dk-coral); --gold:var(--dk-gold); --violet:var(--dk-violet); --shadow-card:var(--dk-shadow-card); --shadow-float:var(--dk-shadow-float); } /* ---------- Theme toggle ------------------------------------------------ */ .theme-btn{width:38px;height:38px;flex:none;display:inline-flex;align-items:center; justify-content:center;border-radius:var(--r-full);cursor:pointer; background:var(--surface);border:1px solid var(--line);color:var(--muted); padding:0;transition:color .14s ease,border-color .14s ease} .theme-btn:hover{color:var(--ink);border-color:var(--line-hover)} .theme-btn svg{width:18px;height:18px} /* Two icons, one shown. Which one depends on the resolved theme, so it has to follow the same three-state logic as the palette. */ .theme-btn .moon{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-btn .sun{display:none} :root:not([data-theme="light"]) .theme-btn .moon{display:block} } :root[data-theme="dark"] .theme-btn .sun{display:none} :root[data-theme="dark"] .theme-btn .moon{display:block} :root[data-theme="light"] .theme-btn .sun{display:block} :root[data-theme="light"] .theme-btn .moon{display:none} /* ---------- Reset / base ---------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:calc(var(--nav-h) + 16px)} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font);font-size:16px;line-height:1.6;font-weight:400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg{max-width:100%;height:auto;display:block} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--ink)} p{margin:0} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} ::selection{background:rgba(var(--accent-rgb),.2)} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff; padding:12px 18px;border-radius:0 0 var(--r-md) 0;font-weight:700} .skip:focus{left:0} /* ---------- Layout ----------------------------------------------------- */ .wrap{width:100%;max-width:var(--page);margin:0 auto;padding:0 var(--gut);position:relative;z-index:1} .wrap-narrow{max-width:760px} section{position:relative} .sec{padding:104px 0} .sec-tight{padding:72px 0} @media (max-width:760px){.sec{padding:72px 0}.sec-tight{padding:56px 0}} /* The sage ambient glow. The single most recognisable thing about the app: a soft radial bloom sitting behind the content on a near-white canvas. */ /* Capped at 100vw, not 140vw: a wider-than-viewport absolute element still counts toward documentElement.scrollWidth even with the body clipping it, which shows up as a phantom horizontal scroll on phones. */ .glow{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;z-index:0; width:min(1100px,100vw);height:760px; background:radial-gradient(circle,rgba(var(--glow),.55) 0%,rgba(var(--glow),0) 70%)} .glow-top{top:-260px} .glow-mid{top:-320px;opacity:.55} /* ---------- Type ------------------------------------------------------- */ .eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 18px} .label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .h-display{font-size:clamp(38px,6.2vw,68px);letter-spacing:-.035em;line-height:1.05} .h-section{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em} .h-card{font-size:20px;letter-spacing:-.01em;line-height:1.3} .lede{font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:var(--muted)} .body{font-size:15px;line-height:1.65;color:var(--muted)} .small{font-size:13px;line-height:1.6;color:var(--faint)} .accent{color:var(--accent)} .sec-head{max-width:660px;margin:0 0 52px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-head .lede{margin-top:18px} /* ---------- Wordmark --------------------------------------------------- */ .wordmark{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.045em; font-size:19px;color:var(--ink);text-decoration:none} .wordmark:hover{text-decoration:none} .wordmark img{width:30px;height:30px} .wordmark b{font-weight:800;color:var(--accent)} /* ---------- Buttons ---------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.01em; padding:14px 26px;border-radius:var(--r-full);border:1px solid transparent; cursor:pointer;text-decoration:none;transition:transform .14s ease,box-shadow .14s ease,background .14s ease} .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn:active{transform:translateY(0) scale(.985)} .btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-accent)} .btn-primary:hover{background:var(--accent-deep);box-shadow:0 10px 26px rgba(var(--accent-rgb),.32)} .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);border-radius:var(--r-lg)} .btn-ghost:hover{border-color:var(--line-hover)} .btn-sm{padding:10px 20px;font-size:14px} .link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--accent)} .link-arrow svg{width:16px;height:16px;transition:transform .16s ease} .link-arrow:hover{text-decoration:none} .link-arrow:hover svg{transform:translateX(3px)} /* ---------- Store badges ----------------------------------------------- */ .stores{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .store{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:var(--bg); padding:11px 20px 11px 17px;border-radius:var(--r-md);text-decoration:none; transition:transform .14s ease;min-height:54px} .store:hover{text-decoration:none;transform:translateY(-1px)} .store svg{width:24px;height:24px;flex:none;fill:currentColor} .store .txt{display:block} .store .txt span{display:block;font-size:10px;font-weight:600;opacity:.72;letter-spacing:.04em;line-height:1.3} .store strong{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:inherit} /* Android is not published yet. Remove data-status="soon" the moment the listing goes live - that one attribute is the whole switch. */ .store[data-status="soon"]{background:transparent;color:var(--muted);border:1px dashed var(--line-hover); cursor:default;pointer-events:none} .store[data-status="soon"]:hover{transform:none} .trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-size:13px;color:var(--faint);font-weight:500} .trust li{display:flex;align-items:center;gap:7px} .trust svg{width:14px;height:14px;color:var(--accent);flex:none} /* ---------- Nav -------------------------------------------------------- */ .nav{position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center; border-bottom:1px solid transparent;transition:background .2s ease,border-color .2s ease} .nav.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom-color:var(--line); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{font-size:14px;font-weight:600;color:var(--muted)} .nav-links a:hover{color:var(--ink);text-decoration:none} .nav-cta{display:flex;align-items:center;gap:14px} @media (max-width:900px){.nav-links{display:none}} @media (max-width:520px){.nav-cta .btn{padding:10px 18px;font-size:14px}} /* ---------- Hero ------------------------------------------------------- */ .hero{padding:clamp(48px,7vw,88px) 0 clamp(72px,9vw,112px)} .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:64px;align-items:center} .hero h1{margin-bottom:26px} .hero h1 .beat1{display:block;font-weight:400;color:var(--muted);letter-spacing:-.02em; font-size:clamp(19px,2.3vw,26px);line-height:1.35;margin-bottom:12px} .hero .lede{max-width:520px} .hero .stores{margin-top:36px} @media (max-width:980px){ .hero-grid{grid-template-columns:1fr;gap:56px} .hero-art{order:2} } /* ---------- Cards ------------------------------------------------------ */ /* The app's card: near-zero elevation, depth carried by a 1.5px hairline. */ .card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-xl); padding:24px;box-shadow:var(--shadow-card)} .card-hero{background:linear-gradient(135deg,var(--hero-a) 0%,var(--hero-b) 70%); border-color:rgba(var(--accent-rgb),.25)} .grid{display:grid;gap:20px} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:900px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){.grid-2,.grid-3{grid-template-columns:1fr}} .icon-tile{width:42px;height:42px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center; background:var(--surface-2);border:1px solid var(--line);margin-bottom:16px;flex:none} .icon-tile svg{width:20px;height:20px;color:var(--accent)} .icon-tile.amber{background:rgba(226,131,43,.12);border-color:rgba(226,131,43,.28)} .icon-tile.amber svg{color:var(--amber)} .icon-tile.teal{background:rgba(92,194,228,.12);border-color:rgba(92,194,228,.3)} .icon-tile.teal svg{color:var(--teal)} .icon-tile.gold{background:rgba(173,134,32,.12);border-color:rgba(173,134,32,.28)} .icon-tile.gold svg{color:var(--gold)} .icon-tile.coral{background:rgba(229,82,66,.1);border-color:rgba(229,82,66,.26)} .icon-tile.coral svg{color:var(--coral)} .card h3{margin-bottom:9px} /* ---------- Recognition ------------------------------------------------ */ .recog{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:760px){.recog{grid-template-columns:1fr}} /* No leading marker. A small dash pseudo-element read as a stray hyphen rather than a bullet — the card edge is enough separation. */ .recog li{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-xl); padding:26px 28px;font-size:17px;line-height:1.55;font-weight:600;color:var(--ink); box-shadow:var(--shadow-card)} /* ---------- The turn (pull statement) ---------------------------------- */ .turn{text-align:center;max-width:820px;margin:0 auto} .turn .big{font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.3;color:var(--ink)} .turn .big em{font-style:normal;color:var(--accent)} .turn .lede{margin-top:24px} .turn .link-arrow{margin-top:28px} /* ---------- Feature rows ----------------------------------------------- */ .feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;align-items:center;margin-bottom:112px} .feat:last-child{margin-bottom:0} .feat-copy h2{margin-bottom:20px} .feat-copy .lede{margin-bottom:24px} .feat-points li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:12px} .feat-points svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:4px} .feat-points b{color:var(--ink);font-weight:700} .feat.reverse .feat-copy{order:2} @media (max-width:900px){ .feat,.feat.reverse{grid-template-columns:1fr;gap:44px;margin-bottom:80px} .feat.reverse .feat-copy{order:0} } /* ========================================================================= Vignettes - the app's own components, rebuilt in HTML. Not screenshots: they stay crisp at any resolution, follow the site's dark mode, and let each section show the one element that matters instead of a whole busy screen. ========================================================================= */ .vig{max-width:420px;width:100%;margin:0 auto} .vig-row{display:flex;align-items:center;justify-content:space-between;gap:12px} .chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-full); font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap; background:var(--surface-2);color:var(--muted);border:1px solid var(--line)} .chip-on{background:rgba(var(--accent-rgb),.16);color:var(--accent-deep);border-color:rgba(var(--accent-rgb),.4)} .chip-teal{background:rgba(92,194,228,.12);color:var(--teal);border-color:rgba(92,194,228,.3)} .chip svg{width:12px;height:12px} @media (prefers-color-scheme:dark){.chip-on{color:var(--accent)}} .info-dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--faint);color:var(--faint); font-size:9px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none} /* Balance card */ .bal-value{display:flex;align-items:baseline;gap:10px;margin:18px 0 4px} .bal-value strong{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--accent);line-height:1} .bal-value span{font-size:13px;font-weight:600;color:var(--muted)} .seg{display:inline-flex;background:var(--bg);border-radius:var(--r-full);padding:3px;gap:2px} .seg span{font-size:11px;font-weight:700;padding:5px 15px;border-radius:var(--r-full);color:var(--muted)} .seg span.on{background:var(--surface);color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.05)} .bars{display:flex;align-items:flex-end;gap:8px;height:96px;margin-top:20px} .bars li{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:9px; cursor:pointer;border-radius:8px;padding:4px 0 0;background:none;border:none} .bars li:hover i{filter:brightness(1.08)} .bars li:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px} .bars li.active i{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent-deep)} .bars li.active b{color:var(--ink)} .bars i{display:block;border-radius:6px;background:var(--accent);height:var(--h); transition:height .7s cubic-bezier(.22,1,.36,1),filter .15s ease} .bars li.neg i{background:var(--coral)} .bars li.flat i{background:var(--faint)} .bars b{font-size:11px;font-weight:700;color:var(--muted);text-align:center;line-height:1} .bars li.today b{color:var(--violet)} .reveal .bars i{height:0} .reveal.in .bars i{height:var(--h)} .vig-divider{height:1px;background:var(--line);margin:20px 0 14px} .vig-link{display:flex;align-items:center;justify-content:space-between;width:100%;font:inherit; font-size:14px;font-weight:700;color:var(--accent);background:none;border:none;padding:0;cursor:pointer; text-align:left} .vig-link svg{width:15px;height:15px;transition:transform .2s ease;flex:none} .vig-link[aria-expanded="true"] svg{transform:rotate(90deg)} .vig-detail{font-size:13px;line-height:1.5;color:var(--muted);margin-top:12px;display:none} .vig-detail.open{display:block} /* Small stat cards */ .stat-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px} .stat{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-xl); padding:20px 16px;text-align:center;box-shadow:var(--shadow-card)} .stat .ring{margin:0 auto 12px} .stat-num{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1; font-variant-numeric:tabular-nums} .stat .label{margin-top:8px;font-size:10px;letter-spacing:.09em;display:block} .flame{width:40px;height:40px;border-radius:50%;background:rgba(173,134,32,.14);margin:0 auto 12px; display:flex;align-items:center;justify-content:center} .flame svg{width:20px;height:20px;color:var(--gold)} /* Progress ring */ .ring{position:relative;width:88px;height:88px} .ring svg{transform:rotate(-90deg);width:100%;height:100%} .ring circle{fill:none;stroke-width:10;stroke-linecap:round} .ring .track{stroke:var(--bg)} .ring .fill{stroke:var(--accent);stroke-dasharray:var(--dash);stroke-dashoffset:var(--off); transition:stroke-dashoffset .9s cubic-bezier(.22,1,.36,1)} .reveal .ring .fill{stroke-dashoffset:var(--dash)} .reveal.in .ring .fill{stroke-dashoffset:var(--off)} .ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums} /* Streak card */ .streak{text-align:center} .streak .shield{width:32px;height:32px;margin:0 auto 12px;color:var(--accent-deep)} .streak .label{color:var(--accent-deep);justify-content:center;display:flex;align-items:center;gap:6px} .streak-num{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink); margin:12px 0 6px;font-variant-numeric:tabular-nums} .streak-sub{font-size:13px;font-weight:600;color:var(--muted)} .streak-sub b{color:var(--ink);font-weight:700} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:10px} .cal li{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:700;background:var(--surface-2);color:var(--accent-deep); border:1px solid rgba(var(--accent-rgb),.18);font-variant-numeric:tabular-nums} .cal li.unknown{background:var(--bg);color:var(--faint);border-color:var(--line)} .cal li.today{background:var(--ink);color:var(--bg);border-color:var(--ink)} @media (prefers-color-scheme:dark){.cal li{color:var(--accent)}} .legend{display:flex;gap:16px;justify-content:center;margin-top:14px;font-size:11px;font-weight:600;color:var(--faint)} .legend li{display:flex;align-items:center;gap:6px} .legend i{width:9px;height:9px;border-radius:3px;background:var(--surface-2);border:1px solid rgba(var(--accent-rgb),.3)} .legend li:nth-child(2) i{background:var(--ink);border-color:var(--ink)} .legend li:nth-child(3) i{background:var(--bg);border-color:var(--line)} /* Habit rows */ .habits{display:flex;flex-direction:column;gap:10px} .habit{display:flex;align-items:center;gap:14px;background:var(--surface);border:1.5px solid var(--line); border-radius:var(--r-xl);padding:15px 16px;box-shadow:var(--shadow-card)} .check{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-hover);flex:none; display:flex;align-items:center;justify-content:center;background:var(--surface);padding:0; cursor:pointer;transition:background .15s ease,border-color .15s ease} .check:hover{border-color:var(--accent)} .check:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px} .check.done{background:var(--accent);border-color:var(--accent)} .check svg{width:14px;height:14px;color:#fff;display:none} .check.done svg{display:block} .habit-txt{flex:1;min-width:0} .habit-txt b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35} .habit-txt span{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px} /* Pattern insight card */ .insight{border-color:rgba(226,131,43,.3)} .insight .icon-tile{margin-bottom:0} .insight-head{display:flex;gap:14px;align-items:center;margin-bottom:18px} .insight-head b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em} .insight-head span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px} .insight .txt{font-size:14px;line-height:1.65;color:var(--muted)} .insight .txt b{color:var(--ink);font-weight:700} /* No device-frame section, deliberately. A 1080px screenshot shrunk into a ~300px bezel is illegible, and it duplicated — badly — what the vignettes above already show crisply at full size. The product is presented, not re-rendered. */ /* ---------- Anti-feature grid ------------------------------------------ */ .anti li{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-xl); padding:24px;box-shadow:var(--shadow-card)} .anti b{display:block;font-size:16px;font-weight:800;letter-spacing:-.015em;color:var(--ink);margin-bottom:8px} .anti p{font-size:14px;line-height:1.6;color:var(--muted)} /* ---------- Green band (final CTA) ------------------------------------- */ .band{background:linear-gradient(135deg,var(--accent-deep) 0%,var(--accent) 100%); border-radius:var(--r-xxl);padding:clamp(44px,6vw,72px);color:#fff; box-shadow:0 20px 50px rgba(var(--accent-rgb),.22);text-align:center} .band h2{color:#fff;margin-bottom:18px} .band .band-body{color:rgba(255,255,255,.86);font-size:17px;line-height:1.6;max-width:560px;margin:0 auto} .band .stores{justify-content:center;margin-top:36px} /* Hardcoded, not var(--ink): the band is always green and the badge is always white, in both themes. Following --ink painted near-white text on a white badge in dark mode and the label all but vanished. */ .band .store{background:#fff;color:#121815} .band .store .txt span{opacity:.66} .band .store[data-status="soon"]{background:rgba(255,255,255,.18);color:#fff; border-color:rgba(255,255,255,.65)} .band .store[data-status="soon"] .txt span{opacity:.85} .band-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);border-radius:var(--r-full);padding:6px 15px; font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:22px} /* ---------- Academy band ------------------------------------------------ */ .academy{background:linear-gradient(135deg,rgba(173,134,32,.1),rgba(173,134,32,.02)); border:1.5px solid rgba(173,134,32,.28);border-radius:var(--r-xxl);padding:clamp(36px,5vw,60px)} .academy .grid{margin-top:36px} /* ---------- Pricing ---------------------------------------------------- */ /* Stretch, not start: the two plans never have the same number of bullets and the Premium description wraps to two lines below ~1000px, so aligning to the top left them 40-85px out of step. Equal-height cards with the footnote pinned to the bottom absorbs that difference instead of showing it. */ .price{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch} @media (max-width:760px){.price{grid-template-columns:1fr}} .plan{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-xl); padding:32px;box-shadow:var(--shadow-card);display:flex;flex-direction:column} .plan.featured{border-color:rgba(var(--accent-rgb),.4); background:linear-gradient(135deg,var(--hero-a) 0%,var(--hero-b) 70%)} .plan h3{font-size:22px;margin-bottom:6px} .plan .amount{font-size:15px;font-weight:700;color:var(--muted);margin:14px 0 6px} .plan .amount b{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink)} .plan .price-alt{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600; color:var(--muted);margin:0 0 24px} .plan .price-alt b{color:var(--ink);font-weight:700} .plan ul li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.6; color:var(--muted);margin-bottom:11px} .plan ul svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:4px} .plan h3+.body{min-height:2.9em} /* margin-top:auto is what pins the footnote to the card floor once the cards are equal height — without it the shorter card ends in a void. */ .plan .note{margin-top:auto;padding-top:20px;border-top:1px solid var(--line); font-size:13px;color:var(--faint)} .plan ul{margin-bottom:22px} /* ---------- FAQ -------------------------------------------------------- */ .faq{max-width:820px;margin:0 auto} .faq details{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-lg); margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-card)} .faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-size:16px;font-weight:700; color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'';width:9px;height:9px;flex:none;border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease} .faq details[open] summary::after{transform:rotate(-135deg) translateY(2px)} .faq details[open] summary{color:var(--accent)} .faq .ans{padding:0 24px 22px;font-size:15px;line-height:1.7;color:var(--muted)} .faq .ans p+p{margin-top:12px} /* ---------- Footer ----------------------------------------------------- */ .foot{border-top:1px solid var(--line);background:var(--bg-outer);padding:64px 0 40px;margin-top:40px} .foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:44px} @media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}} @media (max-width:520px){.foot-grid{grid-template-columns:1fr}} .foot-brand .body{margin-top:16px;max-width:290px;font-size:14px} .foot h3{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:16px} .foot li{margin-bottom:11px} .foot li a{font-size:14px;font-weight:500;color:var(--muted)} .foot li a:hover{color:var(--ink);text-decoration:none} .foot-base{margin-top:52px;padding-top:28px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:flex-start} .foot-base p{font-size:13px;color:var(--faint);line-height:1.65;max-width:640px} /* ---------- Legal / long-form document pages --------------------------- */ .doc{max-width:760px;margin:0 auto;padding:64px 0 24px} .doc h1{font-size:clamp(30px,4vw,40px);letter-spacing:-.03em;margin-bottom:10px} .doc .meta{color:var(--muted);font-size:14px;margin:0 0 36px;padding-bottom:28px;border-bottom:1px solid var(--line)} .doc h2{font-size:21px;margin:44px 0 12px;letter-spacing:-.02em} .doc h3{font-size:16.5px;margin:28px 0 8px;font-weight:700} .doc p{margin:0 0 14px;color:var(--muted);line-height:1.75} .doc strong{color:var(--ink);font-weight:700} .doc ul{padding-left:0;margin:0 0 16px} .doc ul li{position:relative;padding-left:22px;margin:8px 0;color:var(--muted);line-height:1.7} .doc ul li::before{content:'';position:absolute;left:4px;top:12px;width:5px;height:5px; border-radius:50%;background:var(--accent)} .doc ol{padding-left:22px;margin:0 0 16px;color:var(--muted)} .doc ol li{margin:8px 0;line-height:1.7;padding-left:4px} .doc .callout{background:var(--surface);border:1.5px solid var(--line);border-left:3px solid var(--accent); border-radius:0 var(--r-lg) var(--r-lg) 0;padding:20px 24px;margin:22px 0;box-shadow:var(--shadow-card)} .doc .callout p{margin:0;color:var(--muted)} .doc .callout p+p{margin-top:10px} .doc table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px;display:block;overflow-x:auto} .doc th,.doc td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)} .doc th{font-weight:700;color:var(--ink);font-size:13px;letter-spacing:.02em} .doc a{font-weight:600} /* ---------- Reading column (science page) ------------------------------ */ .read{max-width:760px;margin:0 auto} .read h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.03em;margin:0 0 18px} .read p{font-size:16.5px;line-height:1.8;color:var(--muted);margin:0 0 18px} .read p strong{color:var(--ink);font-weight:700} .read .block{margin-bottom:72px} .read .block:last-child{margin-bottom:0} .read .pull{background:var(--surface);border:1.5px solid var(--line);border-left:3px solid var(--accent); border-radius:0 var(--r-lg) var(--r-lg) 0;padding:22px 26px;margin:26px 0;box-shadow:var(--shadow-card)} .read .pull p{margin:0;font-size:16px;color:var(--ink);font-weight:600;line-height:1.65} .read ul{margin:0 0 18px} .read ul li{position:relative;padding-left:24px;margin:10px 0;color:var(--muted);line-height:1.75;font-size:16px} .read ul li::before{content:'';position:absolute;left:5px;top:13px;width:5px;height:5px; border-radius:50%;background:var(--accent)} .read ul li strong{color:var(--ink);font-weight:700} /* ---------- 404 -------------------------------------------------------- */ .oops{text-align:center;padding:clamp(80px,14vw,150px) 0} .oops .code{font-size:clamp(64px,12vw,120px);font-weight:800;letter-spacing:-.05em;color:var(--accent);line-height:1} .oops h1{margin:20px 0 16px} .oops .btn{margin-top:32px} /* ---------- Motion ----------------------------------------------------- */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.07s} .reveal[data-d="2"]{transition-delay:.14s} .reveal[data-d="3"]{transition-delay:.21s} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} .reveal .bars i{height:var(--h)} .reveal .ring .fill{stroke-dashoffset:var(--off)} .btn:hover,.store:hover{transform:none} }