/* ============================================================================
NextDose.AI - marketing site. Original build. Premium, airy, teal-tinted.
Structure/motion modeled on a modern app landing page; all content + code original.
Token-driven: edit the :root block to restyle. Light palette only (no dark-mode block yet).
============================================================================ */
:root{
--teal:#00B487; --teal-2:#00A079; --teal-ink:#053a2c; --teal-soft:rgba(0,180,135,.10);
--blue:#4C8DFF; --violet:#8B7BFF; --pink:#FF8FB3;
--ink:#0A0A0A; --ink-2:#48566B; --ink-3:#5C6880; --ink-4:#AEB6C4;
--bg:#FFFFFF; --card:#FFFFFF; --card-2:#FBFCFE;
--line:rgba(12,16,23,.08); --line-2:rgba(12,16,23,.14);
--ok:#12B76A; --no:#D0D5DD; --warn:#F79009;
--r-lg:30px; --r:22px; --r-sm:14px; --pill:999px;
--shadow-sm:0 4px 18px rgba(24,38,66,.06);
--shadow:0 22px 60px rgba(24,38,66,.10);
--shadow-lg:0 40px 90px rgba(24,38,66,.16);
--sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,sans-serif;
--mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
--ease:cubic-bezier(.22,.61,.36,1);
--maxw:1120px;
/* the reference's dark band, resolved from its lab() value: neutral #0F0F0F,
no blue cast. #closer and #compare are adjacent, so both read from this. */
--band-dark:#0F0F0F;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55;
-webkit-font-smoothing:antialiased;letter-spacing:-.011em;overflow-x:hidden;
}
/* atmospheric pastel mesh, teal-leaning (NextDose) */
body::before{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(circle at 0% 0%, rgba(104,229,243,.42) 3%, rgba(0,0,0,0) 40%),
radial-gradient(circle at 20% 0%, rgba(92,196,245,.42) 3%, rgba(0,0,0,0) 40%),
radial-gradient(circle at 40% 0%, rgba(100,164,247,.42) 3%, rgba(0,0,0,0) 40%),
radial-gradient(circle at 60% 0%, rgba(122,139,245,.40) 3%, rgba(0,0,0,0) 40%),
radial-gradient(circle at 80% 0%, rgba(157,136,242,.38) 3%, rgba(0,0,0,0) 40%),
radial-gradient(circle at 100% 0%, rgba(214,142,224,.36) 3%, rgba(0,0,0,0) 40%),
#FFFFFF;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:14px;font-weight:500;line-height:1.43;color:#0a7259}
.teal{color:var(--teal-2)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:-9999px;top:8px;z-index:100;background:#0a0e14;color:#fff;padding:11px 18px;border-radius:10px;font-weight:650}
.skip:focus{left:16px}
a:focus-visible,button:focus-visible,.nav-link:focus-visible,.nav-cta:focus-visible,.badge:focus-visible,.cn-btn:focus-visible,.faq-q:focus-visible,.replay:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal-2);outline-offset:3px;border-radius:8px}
.faq-q:focus-visible{outline-offset:-3px}
h1,h2,h3{letter-spacing:-.035em;line-height:1.05;font-weight:600;color:#0A0A0A}
section{position:relative}
/* .feature-hand deliberately bleeds past its column; clip at the section so the
bleed never becomes a page-level horizontal scrollbar. */
.sec-pad{padding:104px 0;overflow-x:clip}
/* 56, not 72. A boundary costs BOTH sides, so 72 made every seam 144px of nothing on
a screen 844px tall, and seven consecutive sections sit on the same white mesh with
no rule and no colour change between them. That is a large part of why the page
reads as a failed load. pep pays 64px a side but draws a border-t on nearly every
section; nachoz pays on one side only. We were paying double for an invisible seam. */
@media(max-width:720px){
.sec-pad{padding:56px 0}
.sec-pad + .sec-pad{border-top:1px solid var(--line)}
#closer{border-top:0} /* dark band: the colour change is the seam */
#compare{border-top:1px solid rgba(255,255,255,.08)} /* closer and compare are both black */
/* head margins that were never given a mobile value and ran their desktop number */
#compare .compare-head{margin-bottom:32px}
.privacy-head{margin-bottom:30px}
.faq-head{margin-bottom:26px}
.cta-box p{margin:12px auto 22px}
}
/* ---------- Mobile section menu ----------
Below 720px .nav-links is hidden, which left the four section links with no
route on a phone. The burger reveals them in a panel under the pill. */
.nav-burger{display:none}
.nav-menu{display:none}
@media(max-width:900px){
.nav-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
width:34px;height:34px;border-radius:10px;flex:0 0 auto;padding:0;cursor:pointer;margin-left:5px;
background:linear-gradient(180deg,#141b24,#0b0f15);border:1px solid transparent;
box-shadow:0 3px 9px rgba(10,14,20,.24)}
.nav-burger span{display:block;width:15px;height:1.6px;border-radius:2px;background:#fff;
transition:transform .2s var(--ease)}
.nav-burger[aria-expanded="true"] span:first-child{transform:translateY(2.8px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-2.8px) rotate(-45deg)}
/* A measured step away from the wordmark, NOT margin-left:auto - auto dumps
every spare pixel of a fixed-width pill into this one gap. */
.nav-ig{margin-left:6px}
.nav-menu{display:grid;gap:2px;pointer-events:auto;margin-top:8px;padding:8px;
width:min(calc(100vw - 24px),420px);border-radius:22px;
background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:var(--shadow);
backdrop-filter:blur(16px) saturate(1.4);animation:navMenuIn .18s var(--ease) both}
.nav-menu[hidden]{display:none}
.nav-menu a{display:block;padding:12px 14px;border-radius:13px;font-size:15px;font-weight:600;color:var(--ink)}
.nav-menu a:hover,.nav-menu a:active{background:rgba(12,16,23,.05)}
}
@keyframes navMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nav-menu{animation:none}}
/* ---------- Nav (floating pill) ---------- */
.nav{position:fixed;top:16px;left:0;right:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;pointer-events:none}
.nav-inner{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-radius:var(--pill);
background:rgba(255,255,255,.72);border:1px solid var(--line);box-shadow:var(--shadow-sm);backdrop-filter:blur(16px) saturate(1.4);
transition:box-shadow .3s var(--ease),background .3s}
.nav.scrolled .nav-inner{box-shadow:var(--shadow);background:rgba(255,255,255,.86)}
.nav-logo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:15px;padding-right:8px}
.nav-logo .wm{white-space:nowrap}
.nav-logo .wm .teal{margin-left:0}
.nav-logo .mark{width:30px;height:30px;border-radius:8px;overflow:hidden;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.logo-img{display:block;width:100%;height:100%;object-fit:cover}
.nav-links{display:flex;gap:2px}
.nav-link{padding:9px 14px;border-radius:var(--pill);font-size:14px;font-weight:550;color:var(--ink-2);transition:.16s}
.nav-link:hover{color:var(--ink);background:rgba(12,16,23,.05)}
/* Instagram carries its own brand gradient rather than a flat icon; the
magenta-to-violet run picks up the page's pastel mesh.
SIZE CONTRACT: this matches .nav-logo .mark exactly - 30px box, 8px radius
(28px / 7px below 720px, see the media query). Those three squares must stay
in lockstep. They deliberately do NOT match .nav-cta, which is a taller
36.9px pill on a 999px radius. */
.nav-ig{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;flex:0 0 auto;
color:#fff;
background:radial-gradient(circle at 30% 107%,
#FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
box-shadow:0 3px 9px rgba(190,42,140,.26);
transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.nav-ig svg{width:16px;height:16px;display:block}
.nav-ig:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(190,42,140,.36)}
.nav-ig:focus-visible{outline:2px solid var(--teal-2);outline-offset:3px}
/* TikTok: same 30px / 8px box as .nav-ig and .nav-logo .mark above,
carrying its own black-with-chromatic-offset brand mark. */
.nav-tt{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;flex:0 0 auto;
background:#010101;box-shadow:0 3px 9px rgba(10,14,20,.24);
transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.nav-tt svg{width:15px;height:15px;display:block;overflow:visible}
.nav-tt:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(254,44,85,.30)}
.nav-tt:focus-visible{outline:2px solid var(--teal-2);outline-offset:3px}
.nav-cta{padding:8px 16px;border-radius:var(--pill);font-size:13.5px;font-weight:600;color:#fff;
background:linear-gradient(180deg,#141b24,#0b0f15);box-shadow:0 4px 12px rgba(10,14,20,.24);transition:transform .16s var(--ease)}
.nav-cta:hover{transform:translateY(-1px)}
@media(max-width:360px){.nav-logo .wm{display:none}}
@media(max-width:900px){
.nav-links{display:none}
.nav-inner{gap:5px;padding:7px 9px 7px 12px}
.nav-logo{gap:7px;font-size:13.5px;padding-right:0}
.nav-logo .mark{width:28px;height:28px;border-radius:8px}
.nav-ig,.nav-tt{width:28px;height:28px;border-radius:8px}
.nav-ig svg{width:15px;height:15px} .nav-tt svg{width:14px;height:14px}
.nav-cta{padding:7px 11px;font-size:13px;white-space:nowrap}
}
/* ---------- Hero ---------- */
.hero{padding:150px 0 40px;text-align:center;position:relative;overflow-x:clip}
.hero-icon{width:96px;height:96px;margin:0 auto 30px;border-radius:24px;overflow:hidden;position:relative;
box-shadow:0 20px 44px rgba(6,20,16,.34), inset 0 1px 0 rgba(255,255,255,.06)}
.hero-icon::after{content:"";position:absolute;inset:0;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hero-title{font-size:clamp(36px,7.4vw,64px);font-weight:600;letter-spacing:-.035em;color:#0A0A0A}
.hero-title .w{display:inline-block}
.hero-title .w:nth-child(1){color:var(--ink)}
.hero-title .w:nth-child(2){color:#0A0A0A}
.hero-title .w:nth-child(3){color:var(--ink)}
.hero-sub{max-width:560px;margin:22px auto 0;font-size:clamp(16px,2.4vw,19px);color:var(--ink-2);font-weight:450}
.hero-actions{display:flex;flex-direction:column;align-items:center;gap:10px}
.badge{display:inline-flex;align-items:center;gap:11px;padding:12px 20px;border-radius:16px;color:#fff;
background:linear-gradient(180deg,#141b24,#0b0f15);box-shadow:0 12px 30px rgba(10,14,20,.3);transition:transform .18s var(--ease)}
.badge:hover{transform:translateY(-2px)}
.badge .ap{width:26px;height:26px}
.badge .bx{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.badge .bx small{font-size:10px;opacity:.8;letter-spacing:.02em}
.badge .bx b{font-size:17px;font-weight:650;letter-spacing:-.01em}
.hero-phone{margin:50px auto 0;position:relative;width:min(320px,78vw);animation:floaty 6s ease-in-out infinite}
.hero-phone .phone{position:relative;z-index:1}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.oneliner{max-width:640px;margin:44px auto 0;text-align:center;font-size:clamp(19px,3vw,25px);font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.oneliner span{color:var(--ink-3)}
/* ---------- CSS iPhone frame + screenshot placeholder ---------- */
.phone{position:relative;aspect-ratio:9/19.3;border-radius:44px;padding:11px;
background:linear-gradient(160deg,#1b2029,#0c0f14);box-shadow:var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.05);}
.phone::before{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);width:34%;height:22px;border-radius:99px;background:#05070a;z-index:3}
/* A real screenshot already contains the Dynamic Island, so drop the drawn one. */
.phone.has-shot::before{display:none}
.phone-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#0A0E14}
.screen-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
background:
radial-gradient(70% 40% at 50% 0%, rgba(0,229,160,.14), transparent 60%),
linear-gradient(180deg,#0d141d,#0A0E14);color:#5f6b7a;text-align:center;padding:24px}
.screen-ph .ico{width:38px;height:38px;opacity:.5}
.screen-ph b{font-size:13px;color:#8b97a7;font-weight:600}
.screen-ph small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#556}
.screen-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ---------- Trust strip ---------- */
.trust{padding-top:22px;padding-bottom:8px}
.trust .kicker{text-align:center;display:block;margin-bottom:20px;color:var(--ink-2)}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.trust-badge{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;gap:13px;
padding:22px 14px 20px;border-radius:var(--r);
background:rgba(255,255,255,.6);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.trust-badge .tb-badge{display:flex;align-items:center;justify-content:center;height:78px;line-height:0}
.trust-badge .tb-badge img{max-height:100%;max-width:100%;width:auto;height:auto;display:block}
/* a round seal reads smaller than a wide lockup at equal height, so give it more */
.trust-badge.is-round .tb-badge img{max-height:78px}
.trust-badge:not(.is-round) .tb-badge img{max-height:56px}
.trust-badge span{font-size:12px;color:var(--ink-2)}
@media(max-width:720px){
.trust-row{grid-template-columns:1fr;gap:10px}
.trust-badge{flex-direction:row;justify-content:flex-start;gap:14px;text-align:left;padding:14px 16px}
.trust-badge .tb-badge{height:46px;flex:0 0 auto}
.trust-badge.is-round .tb-badge img{max-height:46px}
.trust-badge:not(.is-round) .tb-badge img{max-height:38px}
}
/* ---------- Feature section (text + phone) ---------- */
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.feature.rev{direction:rtl}.feature.rev>*{direction:ltr}
.feature-title{font-size:clamp(32px,5vw,64px);letter-spacing:-.035em;line-height:1.05;margin:18px 0 20px}
.feature-body{color:var(--ink-2);font-size:18px;line-height:1.625;letter-spacing:normal;max-width:490px}
.feature-list{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feature-list li{list-style:none;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:550;color:var(--ink)}
.feature-list li::before{content:"";width:20px;height:20px;flex-shrink:0;border-radius:7px;background:var(--teal-soft);
background-image:url("data:image/svg+xml;utf8,");background-size:13px;background-repeat:no-repeat;background-position:center}
.feature-media{display:flex;justify-content:center}
.feature-media .phone{width:min(300px,72vw)}
@media(max-width:860px){.feature{grid-template-columns:1fr;gap:36px}.feature.rev{direction:ltr}.feature-list{max-width:460px}}
@media(max-width:520px){.feature-list{grid-template-columns:1fr}}
/* ---------- Closer look carousel ----------
Matched to the reference's dark band: near-black section, cards at
rgba(255,255,255,.06) / 32px radius holding title -> phone + replay ->
caption, and circular arrows floated over the rail edges. */
#closer{--c-ink:#fff; --c-ink-2:rgba(255,255,255,.55); --c-teal:#00E5A0;
background:var(--band-dark);color:var(--c-ink);padding:56px 0 96px;isolation:isolate}
#closer .kicker{color:var(--c-teal)}
.closer-head{text-align:center;max-width:760px;margin:0 auto 52px}
.closer-head h2{font-size:clamp(38px,6.2vw,74px);line-height:1.05;letter-spacing:-.035em;
font-weight:600;color:var(--c-ink);margin:20px 0 22px;text-wrap:balance}
.closer-head p{color:rgba(255,255,255,.6);font-size:clamp(17px,1.6vw,20px);line-height:1.625;
letter-spacing:normal;max-width:600px;margin:0 auto}
.carousel{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px clamp(24px,10vw,150px) 16px;
margin:0;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.carousel::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:center;flex:0 0 auto;width:448px;margin:0;padding:20px;
display:flex;flex-direction:column;align-items:center;text-align:center;
border-radius:32px;background:rgba(255,255,255,.06)}
.slide-title{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.2;
color:#fff;padding:12px 12px 20px;margin:0}
.slide-media{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.slide .phone{width:250px}
.slide-cap{padding:20px 12px 8px;margin:0}
.slide-cap p{font-size:16px;line-height:1.625;color:var(--c-ink-2);margin:0}
.replay{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--pill);
font-size:12px;font-weight:500;color:#fff;background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.15);transition:background .16s var(--ease)}
.replay:hover{background:rgba(255,255,255,.18)}
.replay svg{width:13px;height:13px}
.carousel-wrap{position:relative}
.cn-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
background:rgba(26,26,26,.8);border:1px solid rgba(255,255,255,.14);color:#fff;
backdrop-filter:blur(10px);transition:background .16s var(--ease),border-color .16s var(--ease)}
.cn-prev{left:24px} .cn-next{right:24px}
.cn-btn:hover{background:rgba(46,46,46,.92);border-color:var(--c-teal)}
@media(max-width:720px){
#closer{padding:40px 0 36px}
.closer-head{margin-bottom:28px}
.carousel{gap:14px;padding:6px 16px 14px}
.slide{width:min(320px,86vw);padding:16px}
.slide-title{font-size:20px;padding:8px 8px 16px}
.slide .phone{width:200px}
.slide-cap{padding:16px 6px 4px}
.slide-cap p{font-size:14.5px}
.cn-btn{width:44px;height:44px}
.cn-prev{left:6px} .cn-next{right:6px}
}
.cn-btn svg{width:18px;height:18px}
.slide.pulse .phone{animation:pulse .6s var(--ease)}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
/* ---------- Comparison matrix ---------- */
.compare-head{text-align:center;max-width:640px;margin:0 auto 40px}
.compare-head h2{font-size:clamp(30px,5vw,50px);margin:12px 0 14px}
.compare-head p{color:var(--ink-2);font-size:17px}
/* overflow-x:auto silently computes overflow-y to auto as well, which raised a
phantom vertical scrollbar next to the sticky thead. Only the horizontal axis
ever scrolls here, so pin the block axis shut. */
.ctable-wrap{overflow-x:auto;overflow-y:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);margin:0 -4px}
/* 560, down from 680. That floor was sized for four columns; with three it just
forced a wider sideways drag on phones than the table actually needs. */
.ctable{width:100%;border-collapse:collapse;min-width:560px}
.ctable thead th{position:sticky;top:0;background:var(--card);z-index:2}
.ctable th,.ctable td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--line);font-size:14px}
.ctable th:first-child,.ctable td:first-child{text-align:left;font-weight:600;color:var(--ink);width:34%;min-width:220px}
.ctable thead th{padding:22px 18px 20px;font-weight:700;letter-spacing:-.01em;color:var(--ink-2);font-size:14px;vertical-align:bottom}
.ctable .col-hl{color:var(--ink)}
.ctable thead .col-hl{position:relative}
.ctable .hl-brand{display:inline-flex;flex-direction:column;align-items:center;gap:9px;
padding:13px 20px 12px;border-radius:20px;
background:linear-gradient(180deg,#0f1620,#0a0e14);color:#fff;box-shadow:0 8px 20px rgba(10,14,20,.3)}
.ctable .hl-brand .hl-logo{width:38px;height:38px;border-radius:9px;display:block;flex:0 0 auto}
.ctable .hl-brand .hl-word{font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.ctable td.col-hl{background:linear-gradient(180deg, rgba(0,180,135,.06), rgba(0,180,135,.03))}
.ctable tbody tr:last-child td{border-bottom:0}
.ctable tbody tr:hover td{background:rgba(12,16,23,.02)}
.ctable tbody tr:hover td.col-hl{background:rgba(0,180,135,.09)}
.ck{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;font-weight:800;font-size:14px;line-height:1}
.ck.yes{color:#fff;background:#0E9D5A}
.ck.yes::after{content:"✓"}
.ck.partial{color:#B45309;background:rgba(247,144,9,.18)}
.ck.partial::after{content:"–";font-size:17px}
.ck.no{color:#6B7480}
.ck.no::after{content:"×";font-size:16px}
.price-line{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:26px;padding:22px 26px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.pl-main{display:flex;align-items:baseline;gap:4px}
.pl-amt{font-size:30px;font-weight:800;letter-spacing:-.03em}
.pl-per{color:var(--ink-3);font-weight:600}
.pl-alt{color:var(--ink-2);font-size:14px}
.pl-cta{margin-left:auto;padding:12px 22px;border-radius:var(--pill);color:#fff;font-weight:650;background:linear-gradient(180deg,#141b24,#0b0f15);box-shadow:0 8px 20px rgba(10,14,20,.25);transition:transform .16s var(--ease)}
.pl-cta:hover{transform:translateY(-1px)}
@media(max-width:560px){.price-line{justify-content:center;text-align:center}.pl-cta{margin-left:0;width:100%;text-align:center}}
.compare-foot{text-align:center;margin-top:18px;font-size:13px;color:var(--ink-2)}
.compare-foot a{color:#0a7259;font-weight:600}
/* ---------- Comparison matrix: dark treatment (matches the reference's dark band) ---------- */
/* --teal (#00B487) is tuned for the light sections. On dark, use the app's own
accent so this band matches nextdose.ai and the iOS app exactly. */
#compare{--d-ink:#fff; --d-ink-2:rgba(255,255,255,.60); --d-ink-3:rgba(255,255,255,.42);
--d-line:rgba(255,255,255,.085); --d-surface:rgba(255,255,255,.055); --d-teal:#00E5A0;
background:var(--band-dark);color:var(--d-ink);padding:128px 0 108px;position:relative;isolation:isolate}
/* Typography matched to the reference band: Inter 14/500 at .14em for the kicker
(the site default is SF Mono 12/600), 600 weight + -.035em + 1.05 for the
headline, and 20px/1.625 with NO negative tracking for the deck. Scoped to
#compare so the other sections keep the site's existing mono kicker. */
#compare .kicker{color:var(--d-teal)}
#compare .compare-head{max-width:760px;margin:0 auto 46px}
#compare .compare-head h2{font-size:clamp(38px,6.2vw,74px);line-height:1.05;letter-spacing:-.035em;
font-weight:600;color:var(--d-ink);margin:20px 0 22px;text-wrap:balance}
#compare .compare-head p{color:var(--d-ink-2);font-size:clamp(17px,1.6vw,20px);line-height:1.625;
letter-spacing:normal;max-width:620px;margin:0 auto}
#compare .ctable-wrap{background:var(--d-surface);border:1px solid var(--d-line);border-radius:32px;
box-shadow:0 40px 90px rgba(0,0,0,.45)}
#compare .ctable thead th{background:#12181F;color:var(--d-ink-2)}
#compare .ctable th,#compare .ctable td{border-bottom:1px solid var(--d-line)}
#compare .ctable th:first-child,#compare .ctable td:first-child{color:var(--d-ink)}
#compare .ctable .col-hl{color:var(--d-ink)}
#compare .ctable .hl-brand{background:rgba(255,255,255,.085);border:1px solid rgba(0,229,160,.34);
color:#fff;box-shadow:0 0 26px rgba(0,229,160,.16)}
#compare .ctable .hl-brand .hl-logo{box-shadow:0 0 0 1px rgba(255,255,255,.16)}
#compare .ctable thead .col-hl{vertical-align:middle;padding-top:18px;padding-bottom:16px}
#compare .ctable td.col-hl{background:linear-gradient(180deg, rgba(0,229,160,.12), rgba(0,229,160,.05))}
#compare .ctable tbody tr:hover td{background:rgba(255,255,255,.035)}
#compare .ctable tbody tr:hover td.col-hl{background:rgba(0,229,160,.17)}
#compare .ck.yes{background:#00C88B;color:#06231A}
#compare .ck.partial{color:#FFC98A;background:rgba(247,144,9,.22)}
#compare .ck.no{color:rgba(255,255,255,.34)}
/* ---------- Plan cards (design lifted from the live nextdose.ai pricing block
so the two sites read as one product: same #161B22/.6 glass, 24px radius,
teal #00E5A0 ring on the featured card, gradient CTA) ---------- */
/* Two equal columns, centred content, equal height. The earlier flex version
let the annual card grow wider than its content, which left a large dead
zone on its right and made the pair read as unbalanced. Everything else on
this page is centre-aligned, so the cards are too. */
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:700px;margin:52px auto 0}
.plan{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:34px 26px;border-radius:26px;
background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
box-shadow:0 10px 34px rgba(0,0,0,.24)}
/* --- Monthly: same footprint, deliberately quieter --- */
.plan:not(.is-best) h3{color:var(--d-ink-2)}
.plan:not(.is-best) .plan-amt{color:var(--d-ink-2)}
/* --- Annual: tinted, ringed, with a soft breathing halo (no hard neon ring) --- */
.plan.is-best{background:rgba(0,229,160,.045);border-color:rgba(0,229,160,.5)}
/* The halo lives on a pseudo-element: .plan already carries the scroll-driven
reveal animation, and a second `animation` on the element itself would
clobber its animation-name and timeline. */
.plan.is-best::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
animation:planHalo 4s ease-in-out infinite}
@keyframes planHalo{
0%,100%{box-shadow:0 0 26px rgba(0,229,160,.10)}
50% {box-shadow:0 0 54px rgba(0,229,160,.22)}
}
.plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
padding:5px 14px;border-radius:var(--pill);white-space:nowrap;
background:linear-gradient(135deg,#00E5A0,#00C488);color:#062A1F;
font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
box-shadow:0 5px 14px rgba(0,229,160,.28)}
.plan h3{font-size:20px;font-weight:800;letter-spacing:-.015em;color:#F0F6FC;margin:0 0 4px}
.plan-sub,.plan-compare{font-size:13.5px;color:var(--d-ink-2);margin:0}
/* the paywall strikes this through in red, but red appears nowhere else on this
site; muted grey reads as "not the price you pay" without breaking the palette */
.plan-compare s{color:var(--d-ink-3);text-decoration-color:rgba(255,255,255,.4);font-weight:600;margin-right:2px}
.plan-amt{margin-top:16px;font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#F0F6FC}
.plan-amt span{font-size:15px;font-weight:500;letter-spacing:normal;color:#8B949E}
.plan-amt.is-hero{color:var(--d-teal)}
.plan-amt.is-hero span{color:rgba(0,229,160,.75)}
.plan-note{font-size:13px;color:#8B949E;margin:10px 0 0}
.plan-note.is-bright{color:#C9D1D9}
.plan-free{display:inline-block;margin-top:16px;padding:6px 15px;border-radius:var(--pill);
border:1px solid rgba(0,229,160,.35);background:rgba(0,229,160,.09);
color:var(--d-teal);font-size:12.5px;font-weight:700;white-space:nowrap}
.plan-cta{max-width:700px;margin:20px auto 0}
.plan-btn{display:block;width:100%;padding:16px;border-radius:12px;text-align:center;
background:linear-gradient(135deg,#00E5A0,#00C488);color:#0D1117;font-size:16px;font-weight:800;
box-shadow:0 6px 24px rgba(0,229,160,.2);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.plan-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,229,160,.3)}
.plan-fine{text-align:center;font-size:12.5px;color:#8B949E;margin-top:11px}
@media(max-width:640px){
/* annual first on mobile: it is the offer we lead with */
.plan-grid{grid-template-columns:1fr;gap:22px;margin-top:44px}
.plan.is-best{order:-1}
.plan{padding:30px 22px}
.plan-amt{font-size:38px}
}
#compare .compare-foot{color:var(--d-ink-3);margin-top:22px}
#compare .compare-foot a{color:var(--d-teal)}
#compare .ctable-wrap:focus-visible{outline-color:var(--d-teal)}
@media(max-width:720px){
#compare{padding:40px 0 56px}
#compare .ctable th:first-child,#compare .ctable td:first-child{background:#12181F;box-shadow:1px 0 0 var(--d-line)}
}
/* ---------- Home screen section ---------- */
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.home-text h2{font-size:clamp(32px,5vw,64px);letter-spacing:-.035em;line-height:1.05;margin:18px 0 20px}
.home-text p{color:var(--ink-2);font-size:18px;line-height:1.7;letter-spacing:normal;max-width:470px;margin-bottom:14px}
.home-lede{font-weight:600;color:var(--ink)}
.home-list{margin-top:22px;display:grid;grid-template-columns:1fr;gap:11px}
/* ---- Home-screen trio: three real screenshots, fanned like the reference's
phone pairs (flex row, ~20px gap, the lead phone larger and forward).
Each drifts at its own rate on a view() timeline, with the ranges staggered
the way the reference staggers its word reveals. ---- */
.hs-phones{display:flex;align-items:center;justify-content:center;gap:0;
/* the trio bleeds right past its column; the vw term is the real room between
the group's left edge (~50vw) and the viewport, so nothing gets cut */
width:min(766px,152%,calc(50vw - 28px));max-width:none;margin-left:-6%}
.hs-phone{flex:0 0 auto;position:relative}
.hs-phone img{width:100%;height:auto;display:block}
.hs-side{width:34%;z-index:1;filter:drop-shadow(0 22px 34px rgba(23,26,58,.20))}
.hs-side:first-child{margin-right:-4%}
.hs-side:last-child{margin-left:-4%}
.hs-lead{width:40%;z-index:2;filter:drop-shadow(0 34px 52px rgba(23,26,58,.28))}
/* No per-phone animation. Animating transform:scale() on these forces the
browser to re-rasterise each screenshot at fractional sizes every frame,
which visibly softens the fine UI text inside them. Section-level reveals
elsewhere are fine; these render sharp and static. */
/* Below 860 the fan becomes one phone at a time in a snap scroller, which is pep's
own mobile pattern: a fixed "aspect-[1/2] w-[260px]" card in a rail, never three
desktop-proportioned phones shrunk to fit.
The fan sized itself from calc(50vw - 28px), the room beside a centred desktop
column, which means nothing once .home-grid collapses to one column. It rendered
the flagship blood-level chart 145px wide from a 900px file, a 6.2x downscale,
with every label inside it 3 to 5px tall.
justify-content:flex-start is load-bearing. The centre inherited from the base rule
puts half the overflow LEFT of the scroll origin where no gesture reaches it. */
@media(max-width:860px){
.hs-phones{display:flex;justify-content:flex-start;align-items:flex-start;
width:auto;max-width:none;margin:0 calc(50% - 50vw);
overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
scroll-padding-inline-start:24px;scrollbar-width:none;
gap:14px;padding:6px 24px 10px}
.hs-phones::-webkit-scrollbar{display:none}
.hs-phone{flex:0 0 auto;width:250px;scroll-snap-align:start}
/* the -4% overlaps that make the fan read as a fan are (0,2,0), so they have to be
named by hand to be cleared */
.hs-side,.hs-lead,.hs-side:first-child,.hs-side:last-child{width:250px;margin:0}
}
.widget{border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);padding:18px;align-self:center;width:210px}
.widget .wk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.widget .wv{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-top:8px}
.widget .wsub{font-size:12.5px;color:var(--ink-2);margin-top:4px}
.widget .bar{height:8px;border-radius:99px;background:var(--teal-soft);margin-top:14px;overflow:hidden}
.widget .bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--teal-2),var(--teal));border-radius:99px}
@media(max-width:860px){.home-grid{grid-template-columns:1fr;gap:34px}.home-media{flex-direction:column;align-items:center}}
/* ---------- Privacy ---------- */
.privacy-head{text-align:center;max-width:600px;margin:0 auto 44px}
.privacy-head h2{font-size:clamp(30px,5vw,50px);margin:12px 0 14px}
.privacy-head p{color:var(--ink-2);font-size:17px}
.privacy-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcard{border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);padding:26px}
.pcard .pc-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-2);margin-bottom:18px}
.pcard .pc-ic svg{width:22px;height:22px}
.pcard .kicker{font-size:11px;margin-bottom:8px}
.pcard h3{font-size:19px;font-weight:750;letter-spacing:-.02em;margin-bottom:8px}
.pcard p{font-size:14px;color:var(--ink-2)}
@media(max-width:860px){.privacy-cards{grid-template-columns:1fr}}
/* ---------- CTA ---------- */
.cta{text-align:center}
.cta-box{border-radius:var(--r-lg);padding:64px 32px;position:relative;overflow:hidden;
background:linear-gradient(160deg,#0f1620,#0a0e14);box-shadow:var(--shadow-lg)}
.cta-box::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 60% at 20% 0%, rgba(0,229,160,.20), transparent 60%),radial-gradient(50% 60% at 100% 100%, rgba(76,141,255,.16), transparent 60%)}
.cta-box h2{position:relative;font-size:clamp(30px,5vw,52px);color:#fff}
.cta-box p{position:relative;color:rgba(255,255,255,.72);font-size:17px;margin:16px auto 30px;max-width:460px}
.cta-box .badge{position:relative}
/* ---------- FAQ ---------- */
.faq-head{text-align:center;margin:0 auto 40px}
.faq-head h2{font-size:clamp(30px,5vw,50px);margin-top:12px}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;text-align:left;font-size:16.5px;font-weight:650;letter-spacing:-.01em}
.faq-q .pm{flex-shrink:0;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-2);transition:transform .28s var(--ease);font-size:18px;font-weight:400}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .34s var(--ease),visibility 0s linear .34s}
.faq-item.open .faq-a{visibility:visible;transition:max-height .34s var(--ease),visibility 0s}
.faq-a p{padding:0 22px 22px;color:var(--ink-2);font-size:15px}
main:focus{outline:none}
.slide{scroll-margin-top:88px}
.ctable-wrap:focus-visible{outline:2px solid var(--teal-2);outline-offset:2px}
/* ---------- Reviews marquee ----------
Deliberately has NO background: body::before is a fixed pastel mesh, so an
unpainted section shows the same gradient as the hero. That keeps the page to
one light run and one dark run instead of alternating slabs.
Cards reuse the light card recipe (--card / --line / --shadow-sm) so they read
as the same family as .faq-item and .trust-badge. */
#reviews{padding:96px 0 88px;overflow-x:clip}
/* .closer-head is a DARK-band component - its
is white and its font-size is
clamped for that band. Reusing the layout here is fine, but the colours have to
be re-stated for a light background, and they must win on specificity. Scoped
to #reviews so the dark sections that depend on the shared rule are untouched. */
#reviews .closer-head p{color:var(--ink-2)}
#reviews .closer-head .rv-proof{margin-top:20px;font-size:15px;color:var(--ink-2)}
#reviews .closer-head .rv-proof b{color:var(--ink);font-weight:650}
.rv-marquee{margin-top:8px}
/* Finger-driven, not a marquee. Both references hand their mobile card rail to the
thumb and neither animates one. pepaiapp.com: "flex snap-x snap-mandatory gap-5
overflow-x-auto" around "w-[240px] shrink-0 snap-start". nachoz.app: "snap-x
snap-mandatory ... overflow-x-auto px-5" around "w-[78vw] max-w-sm shrink-0
snap-center".
The old rail was a CSS marquee inside overflow:hidden. Measured at 390px: 2636px
of track in a 390px window, so 2246px of it could not be reached by any gesture,
drifting at 27.5px/s, which left a whole card on screen for only 78px of every
332px of travel while the longest quote runs 304 characters. A quote sliced at
both edges that you cannot grab, stop or scroll back to is what "reviews are not
loading properly" actually looks like. */
.rv-row{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;scroll-padding-inline-start:24px;scrollbar-width:none}
.rv-row::-webkit-scrollbar{display:none}
/* The 24px inline gutter lives on the TRACK, not the scrollport, and width:max-content
makes it part of the scrollable width, so the last card keeps a real end gutter.
24px is .wrap's own padding, so card one lines up with the heading above it.
align-items:flex-start stops a short quote being stretched to the tallest card. */
.rv-track{display:flex;gap:16px;width:max-content;align-items:flex-start;
padding:4px 24px 18px}
/* 78vw is nachoz's own mobile card width. 390 x .78 = 304px, so the next card peeks
46px past it and the swipe is self-evident. The 320px cap keeps that peek on a
430px phone. */
.rv-slide{flex:0 0 auto;width:78vw;max-width:320px;margin:0;scroll-snap-align:start;
display:flex;flex-direction:column;gap:11px;padding:22px 24px 20px;
border-radius:var(--r);background:var(--card);border:1px solid var(--line);
box-shadow:var(--shadow-sm)}
.rv-stars{color:var(--teal-2);font-size:14px;letter-spacing:.15em;line-height:1}
.rv-head{font-size:16px;font-weight:650;letter-spacing:-.015em;color:var(--ink);margin:0}
.rv-quote{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);letter-spacing:normal}
.rv-who{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:6px}
.rv-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:var(--teal-soft);color:var(--teal-2);font-size:14px;font-weight:700}
.rv-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.rv-meta b{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.rv-meta small{font-size:12.5px;color:var(--ink-3,var(--ink-2))}
@media(max-width:720px){
/* 44 at the bottom, not 60: .rv-track already carries 18px of its own, so 62px
sits under the last card. */
#reviews{padding:56px 0 44px}
.rv-slide{padding:20px 20px 18px}
}
/* ---------- Footer ---------- */
/* footer styles live in the Legal/Footer block at the end of this file */
/* ---------- mobile refinements ---------- */
@media(max-width:720px){
.hero{padding-top:122px}
/* comparison: keep the feature column pinned while the 4 columns scroll horizontally */
.ctable th:first-child,.ctable td:first-child{position:sticky;left:0;z-index:1;background:var(--card);min-width:152px;width:auto;box-shadow:1px 0 0 var(--line)}
.ctable thead th:first-child{z-index:3}
.ctable th,.ctable td{padding:14px 12px}
.cta-box{padding:48px 22px}
}
/* ---------- Scroll reveal ---------- */
/* ---------- scroll-reveal system (fade-up, 3D tilt, scale, slide) ---------- */
.reveal,.rv-tilt,.rv-scale,.rv-left,.rv-right,.rv-pop{
transition:opacity .85s var(--ease), transform .85s var(--ease);
transition-delay:var(--d,0ms); will-change:transform,opacity}
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none}
/* images tilt up into place, like the reference */
.rv-tilt{opacity:0;transform:perspective(1400px) rotateX(26deg) translateY(46px) scale(.97);transform-origin:50% 100%}
.rv-tilt.in{opacity:1;transform:perspective(1400px) rotateX(0deg) translateY(0) scale(1)}
.rv-scale{opacity:0;transform:scale(.88)}
.rv-scale.in{opacity:1;transform:none}
.rv-pop{opacity:0;transform:scale(1.16)}
.rv-pop.in{opacity:1;transform:none}
.rv-left{opacity:0;transform:translateX(-52px) scale(.96)}
.rv-right{opacity:0;transform:translateX(52px) scale(.96)}
.rv-left.in,.rv-right.in{opacity:1;transform:none}
@media(max-width:720px){
.rv-left,.rv-right{transform:translateY(26px) scale(.98)}
.rv-tilt{transform:perspective(1200px) rotateX(18deg) translateY(30px)}
}
/* ---------- scroll-DRIVEN mode ----------
The class-gated fallback above fires once and latches. When the browser has
scroll-driven animations, `html.sdrive` swaps every reveal onto a view()
timeline instead: progress is bound to the element's position in the
viewport, so it tracks the scrollbar in both directions and never latches.
Staggering moves from transition-delay (ignored by scroll timelines) to a
per-item shift of the animation range via --rs. */
html.sdrive .reveal:not(.no-sd),
html.sdrive .rv-tilt:not(.no-sd),
html.sdrive .rv-scale:not(.no-sd),
html.sdrive .rv-left:not(.no-sd),
html.sdrive .rv-right:not(.no-sd),
html.sdrive .rv-pop:not(.no-sd){
transition:none;
animation-duration:1ms; /* required for the range to resolve; timeline drives it */
animation-timing-function:var(--ease);
animation-fill-mode:both;
animation-timeline:view();
/* `cover` (not `entry`) so the travel scales with the VIEWPORT, not the
element. Entry ranges make a 60px card finish in ~35px of scroll, which
reads as a pop; cover gives every element the same unhurried distance. */
animation-range:cover calc(2% + var(--rs,0%)) cover calc(34% + var(--rs,0%));
}
html.sdrive .reveal:not(.no-sd) {animation-name:rvUp}
html.sdrive .rv-tilt:not(.no-sd) {animation-name:rvTilt}
html.sdrive .rv-scale:not(.no-sd){animation-name:rvScale}
html.sdrive .rv-pop:not(.no-sd) {animation-name:rvPop}
html.sdrive .rv-left:not(.no-sd) {animation-name:rvLeft}
html.sdrive .rv-right:not(.no-sd){animation-name:rvRight}
/* a full-screen block's cover phase is long, so tighten it or it lags the scroll */
html.sdrive .rv-tall{animation-range:cover 1% cover 20%}
@keyframes rvUp {from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none}}
@keyframes rvScale{from{opacity:0;transform:scale(.88)} to{opacity:1;transform:none}}
@keyframes rvPop {from{opacity:0;transform:scale(1.16)} to{opacity:1;transform:none}}
@keyframes rvLeft {from{opacity:0;transform:translateX(-52px) scale(.96)} to{opacity:1;transform:none}}
@keyframes rvRight{from{opacity:0;transform:translateX(52px) scale(.96)} to{opacity:1;transform:none}}
@keyframes rvTilt {
from{opacity:0;transform:perspective(1400px) rotateX(26deg) translateY(46px) scale(.97)}
to {opacity:1;transform:perspective(1400px) rotateX(0deg) translateY(0) scale(1)}
}
@media(max-width:720px){
@keyframes rvLeft {from{opacity:0;transform:translateY(26px) scale(.98)} to{opacity:1;transform:none}}
@keyframes rvRight{from{opacity:0;transform:translateY(26px) scale(.98)} to{opacity:1;transform:none}}
@keyframes rvTilt {
from{opacity:0;transform:perspective(1200px) rotateX(18deg) translateY(30px)}
to {opacity:1;transform:perspective(1200px) rotateX(0deg) translateY(0)}
}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.reveal,.rv-tilt,.rv-scale,.rv-left,.rv-right,.rv-pop{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
.hero-phone{animation:none}
.slide.pulse .phone{animation:none}
/* keep the annual card's ring, drop its pulse */
.plan.is-best::before{animation:none;box-shadow:0 0 30px rgba(0,229,160,.14)}
}
/* ---------- Hero hands image ---------- */
.hero-hands{margin:44px auto 0;width:min(430px,86vw);position:relative}
.hero-hands img{width:100%;height:auto;border-radius:20px;display:block;
filter:drop-shadow(0 34px 60px rgba(20,30,50,.20))}
@media(max-width:720px){.hero-hands{margin-top:34px;width:min(340px,84vw)}}
/* ---------- Hero: licensed hand + phone, app screen baked in (pixel-aligned) ---------- */
/* Composite is cropped symmetrically about the phone, so centring the image
centres the PHONE (not the hand) under the App Store button. Uses flex rather
than margin:auto, which collapses to zero once the image is wider than the
column, and left the phone off-centre on phones. */
.hero-hand{width:100%;margin:30px 0 0;display:flex;justify-content:center}
.hero-hand>picture{width:min(700px,132vw);max-width:none;flex:0 0 auto}
.hero-hand img{width:100%;height:auto;display:block;filter:drop-shadow(0 34px 46px rgba(23,26,58,.18))}
@media(max-width:720px){.hero-hand{margin-top:22px}}
/* ---------- Feature section: licensed angled-hand mockup ---------- */
.feature{align-items:center}
.feature-media{position:relative;overflow:visible}
.feature-media picture{display:block}
/* The composite is ~2:1, so it needs more width than the old 1.68:1 one to
carry the same visual weight. It bleeds right past its column on purpose;
the vw cap stops that bleed reaching the viewport edge on narrow desktops,
and .sec-pad's overflow-x:clip catches whatever is left. */
.feature-media .feature-hand{display:block;height:auto;
/* calc(50vw - 100px) is the exact room between the image's left edge and the
viewport: the wrap is centred and capped at 1120, so the media column always
starts at about 50vw + 59px. This lets the image bleed right as far as it
can without any of the hand actually being cut off. */
width:min(880px,178%,calc(50vw - 68px));max-width:none;margin-left:-3%;
filter:drop-shadow(0 34px 50px rgba(23,26,58,.20))}
/* Mobile scales the product shot UP, the way both references do. nachoz.app runs its
equivalent in-hand shot at "w-[160%] max-w-none object-contain object-right-bottom
sm:w-[130%] lg:w-full", biggest on the phone. We had it backwards: 178% on desktop,
134% on tablet, then 100vw on a phone, so the 2280x1137 composite landed 382x190
and neither the dose slider nor the injection site its own alt text promises was
legible.
124vw puts the phone itself at 94.2vw, and pinning the image 8px inside the left
edge runs the hand off the right where sec-pad's overflow-x:clip catches it.
Height goes 190px to 241px.
filter:none because a 50px-blur drop-shadow on a 484x241 CSS surface is a 1452x723
offscreen buffer on a 3x iPhone. nachoz uses zero drop-shadows, pep uses one, we
use six and they sit on our biggest bitmaps. */
@media(max-width:860px){
.feature-media .feature-hand{width:124vw;max-width:none;
margin-left:calc(50% - 50vw + 8px);margin-right:0;filter:none}
}
/* images delivered as (webp with png fallback) */
.feature-media picture{display:block;width:100%}
.hero-hand picture{display:block}
.hero-hand picture img{width:100%;height:auto;display:block;filter:drop-shadow(0 34px 46px rgba(23,26,58,.18))}
/* ============================================================================
Legal pages (privacy.html / terms.html)
Type scale measured off the reference's own policy page, not eyeballed:
column 704 · h1 60/600/-.035em · kicker 12/600/.2em · section h2 18/600/-.025em
section number 14/500 · body 14/400/1.625 · back + meta 12
The prose itself is the live nextdose.ai text, moved across verbatim.
============================================================================ */
body.legal-page::before{background:#FCFCFD} /* drop the mesh; long-form reads better on flat */
.legal-wrap{max-width:704px;margin:0 auto;padding:56px 24px 40px;outline:none}
.lg-home{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;
font-size:15px;color:var(--ink);margin-bottom:30px}
.lg-home .mark{width:27px;height:27px;border-radius:8px;overflow:hidden;flex-shrink:0;
box-shadow:0 3px 10px rgba(0,0,0,.22)}
.lg-home .wm{white-space:nowrap}
.lg-back{display:block;font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:34px;
transition:color .16s var(--ease)}
.lg-back:hover{color:var(--ink)}
.lg-kicker{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;line-height:1.34;
color:var(--teal-2);text-transform:uppercase;margin-bottom:16px}
.lg-title{font-size:clamp(36px,3.4vw,60px);line-height:1.05;letter-spacing:-.035em;font-weight:600;
color:var(--ink);margin:0 0 24px;text-wrap:balance}
.lg-lede p{font-size:16px;line-height:1.625;letter-spacing:normal;color:var(--ink-2);margin:0 0 13px}
.lg-lede strong{color:var(--ink);font-weight:600}
.lg-meta{font-size:12px;color:var(--ink-3);margin:20px 0 0}
.lg-rule{border:0;border-top:1px solid var(--line);margin:36px 0 4px}
.lg-sec{padding:40px 0 0}
.lg-h2{display:flex;align-items:baseline;gap:14px;font-size:18px;font-weight:600;
letter-spacing:-.025em;line-height:1.55;color:var(--ink);margin:0 0 14px;scroll-margin-top:24px}
.lg-num{flex:0 0 auto;font-size:14px;font-weight:500;letter-spacing:-.032em;line-height:1.43;color:var(--teal-2);
font-variant-numeric:tabular-nums}
.lg-name{flex:1 1 auto}
.lg-sec h3{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:22px 0 8px}
.lg-sec p{font-size:14px;line-height:1.625;letter-spacing:normal;color:var(--ink-2);margin:0 0 13px}
.lg-sec strong{color:var(--ink);font-weight:600}
.lg-sec ul{margin:0 0 14px;padding-left:20px}
.lg-sec li{font-size:14px;line-height:1.625;letter-spacing:normal;color:var(--ink-2);margin-bottom:7px}
.lg-sec li::marker{color:var(--ink-4)}
.lg-sec a{font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.lg-sec a:hover{color:var(--teal-2)}
.lg-sec hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.legal-page .footer{margin-top:56px}
@media(max-width:640px){
.legal-wrap{padding:40px 20px 32px}
.lg-back{margin-bottom:26px}
.lg-sec{padding-top:32px}
.lg-h2{gap:11px;font-size:17px}
}
/* ---------- Footer: centred stack on a light band, like the reference ---------- */
.footer{padding:40px 0 44px;border-top:1px solid #E5E5E5;background:#F4F4F5;margin-top:40px;text-align:center}
.footer .wrap{display:flex;flex-direction:column;align-items:center;gap:0}
/* Footer lockup keeps its own scale - no social buttons sit beside it. */
.footer .f-logo .mark{width:27px;height:27px;border-radius:8px}
/* .f-logo also carries .nav-logo, whose padding-right:8px is nav-only spacing.
Left in place it shifts the lockup 4px left of the centred footer column. */
.footer .f-logo{padding-right:0;display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:800;
letter-spacing:-.02em;color:var(--ink)}
.footer .f-tag{color:var(--ink-3);font-size:13px;margin:10px 0 0;max-width:420px}
.footer .f-links{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:22px;
font-size:13.5px;color:var(--ink-2)}
.footer .f-links a:hover{color:var(--ink)}
/* the CTA -> FAQ seam stacked 104px + 104px; trim both sides */
.sec-pad.cta{padding-bottom:64px}
#faq{padding-top:48px}
@media(max-width:720px){.sec-pad.cta{padding-bottom:48px}#faq{padding-top:36px}}
.f-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:14px;
font-size:12px;color:var(--ink-2)}
.f-legal a{transition:color .16s var(--ease)}
.f-legal a:hover{color:var(--ink)}
.foot-legal{max-width:760px;margin:20px auto 0;font-size:12px;line-height:1.6;color:var(--ink-4);text-align:center}
@media(max-width:640px){
.footer .f-links{gap:18px}
.f-legal{gap:18px}
}
/* The pill is fixed, so anchored sections need room above them. */
#features,#closer,#reviews,#compare,#faq{scroll-margin-top:96px}
/* Pricing jumps to the plan cards, not the top of the comparison table. */
#pricing{scroll-margin-top:112px}
/* ---------- Support page ----------
NOTE: this block must stay AFTER the legal-page rules. .lg-sec p/h3/a/li
share specificity with these selectors, so source order decides the winner.
Sits on the same .legal-wrap shell as privacy/terms. Cards reuse the light
card recipe (--card / --line / --shadow-sm) so they read as the same family
as .faq-item and .trust-badge on the home page. The FAQ is rather
than the JS accordion, so this page needs no script of its own. */
.sup-contact{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;
padding:22px 24px;border-radius:var(--r);background:var(--card);
border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.sup-contact dl{margin:0;display:grid;gap:12px}
.sup-contact dl>div{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.sup-contact dt{min-width:118px;font-size:12px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-3,var(--ink-2))}
.sup-contact dd{margin:0;font-size:14px;line-height:1.625;letter-spacing:normal;color:var(--ink)}
.sup-contact dd a{font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.sup-contact dd a:hover{color:var(--teal-2)}
/* .lg-sec a is (0,1,1) and beats a bare .sup-btn (0,1,0) whatever the source
order, so it was painting this pill's label ink-dark and underlining it.
Qualify the selector to outrank it. */
.lg-sec a.sup-btn,.sup-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;
border-radius:var(--pill);font-size:14px;font-weight:600;color:#fff;white-space:nowrap;text-decoration:none;
background:linear-gradient(180deg,#141b24,#0b0f15);box-shadow:0 4px 12px rgba(10,14,20,.24);
transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.sup-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(10,14,20,.28)}
.sup-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sup-card{padding:18px 20px;border-radius:var(--r);background:var(--card);
border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.sup-card h3{margin:0 0 6px;font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.sup-card p{margin:0;font-size:14px;line-height:1.625;letter-spacing:normal;color:var(--ink-2)}
.sup-faqs{display:grid;gap:10px}
.sup-faq{border-radius:var(--r);background:var(--card);border:1px solid var(--line);
box-shadow:var(--shadow-sm);overflow:hidden}
.sup-q{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:20px 22px;cursor:pointer;list-style:none;
font-size:16.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.sup-q::-webkit-details-marker{display:none}
.sup-q .pm{flex-shrink:0;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
background:var(--teal-soft);color:var(--teal-2);font-size:18px;font-weight:400;
transition:transform .28s var(--ease)}
.sup-faq[open] .sup-q .pm{transform:rotate(45deg)}
.sup-q:focus-visible{outline:2px solid var(--teal-2);outline-offset:-3px;border-radius:8px}
.sup-a p{margin:0;padding:0 22px 22px;font-size:15px;line-height:1.625;color:var(--ink-2)}
.sup-a strong{color:var(--ink);font-weight:600}
@media(max-width:640px){
.sup-grid{grid-template-columns:1fr}
.sup-contact{flex-direction:column;align-items:stretch}
.sup-btn{width:100%}
}
/* ---- Category picker (deflection layer) ----
Tiles are real