/* AutoTraction landing: white page, tight grotesk, one accent.
   Cache: served with max-age=0 via public/_headers so a deploy is never
   half-applied; see that file. */
:root{
  --ink:#121111;--ink2:#16151A;--body:#45454A;--muted:#6B6B70;--label:#9A9AA0;
  --hair:#E9E9EC;--hair2:#F2F2F4;--panel:#F7F7F8;--page:#FFFFFF;
  --accent:#2F6BFF;--accent-dk:#2558D6;--accent-glow:rgba(47,107,255,.32);--accent-soft:#EAF1FE;--accent-text:#2F5BC4;
  --green:#1E7A55;--green-soft:#E7F3EC;
  --sans:'Geist','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono','IBM Plex Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.wrap{max-width:1132px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto}
.center{text-align:center}
.band{padding:112px 0}
.band-tight{padding:72px 0}

/* Type */
.h1{font:500 clamp(44px,7.4vw,92px)/1 var(--sans);letter-spacing:-.045em;color:var(--ink)}
.h1 em,.h2 em{font-style:italic;font-synthesis:style}
.h2{font:500 clamp(34px,5vw,62px)/1.02 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.h3{font:500 clamp(24px,3vw,40px)/1.1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.lede{font:400 clamp(17px,1.5vw,20px)/1.5 var(--sans);color:var(--muted);max-width:560px;margin:20px auto 0}
.lede b{font-weight:600;color:var(--ink)}
.sub{font:400 16px/1.55 var(--sans);color:var(--muted)}
.mono{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* Buttons and pills */
.btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;font:500 15px/1 var(--sans);letter-spacing:-.01em;padding:16px 24px;border-radius:12px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 30px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-accent:hover{background:var(--accent-dk)}
.btn-dark{background:var(--ink2);color:#fff;box-shadow:0 8px 24px rgba(18,17,17,.18)}
.btn-dark .arrow{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;font-size:13px;margin-right:-6px}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--hair);box-shadow:0 2px 8px rgba(18,17,17,.05)}
.btn-block{display:flex;justify-content:center;width:100%}
.pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--hair);border-radius:999px;padding:9px 16px 9px 10px;font:500 13.5px/1 var(--sans);color:var(--body);box-shadow:0 6px 20px rgba(18,17,17,.07)}
.pill.mono{padding:11px 16px;color:var(--ink)}
.badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.badge{display:flex;align-items:center;gap:12px;border:1px solid #BFD3FF;border-radius:10px;padding:10px 16px 10px 12px;background:#fff;text-align:left}
.badge .ico{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--sans)}
.badge .k{font:600 9.5px/1 var(--sans);letter-spacing:.08em;color:#5A86E6;text-transform:uppercase}
.badge .v{font:600 15px/1.2 var(--sans);color:#2558D6;margin-top:4px;letter-spacing:-.01em}

/* Nav: plain row at the top, floating pill once the page scrolls. */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1132px;margin:0 auto;padding:20px 24px;transition:background .25s ease,box-shadow .25s ease}
.nav .brand{display:flex;align-items:center;gap:8px;font:600 15px/1 var(--sans);letter-spacing:-.02em}
.nav .links{display:flex;gap:26px;font:400 15px/1 var(--sans);color:var(--body)}
.nav .links a:hover{color:var(--ink)}
.nav .btn{padding:12px 16px 12px 18px;font-size:14px}
.nav.stuck{top:12px;left:50%;right:auto;transform:translateX(-50%);max-width:none;width:auto;gap:24px;padding:8px 8px 8px 20px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;box-shadow:0 10px 36px rgba(18,17,17,.12),0 0 0 1px rgba(18,17,17,.04)}
.nav.stuck .links{gap:20px;font-size:14px}
.nav.stuck .brand span{font-size:13.5px}
.nav-spacer{height:96px}

/* Hero */
/* overflow-x:clip, not hidden: the wash below is 1600px wide and would otherwise let phones pan sideways (body overflow-x:hidden does not stop that on iOS); clip keeps the tour shadow below unclipped. */
.hero{position:relative;padding:64px 0 0;overflow-x:clip}
.hero .wash{position:absolute;left:50%;top:-420px;transform:translateX(-50%);width:1600px;height:1100px;background:radial-gradient(50% 50% at 50% 50%,rgba(47,107,255,.20) 0%,rgba(47,107,255,.09) 38%,rgba(47,107,255,0) 68%);pointer-events:none}
.hero .wrap{position:relative}
.hero .h1{margin:8px auto 0;max-width:900px}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.hero-note{margin:18px 0 0;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--label)}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}
.plan{position:relative;background:#fff;border:1px solid var(--hair);border-radius:18px;padding:clamp(18px,2vw,26px)}
.plan.hot{border-color:transparent;box-shadow:0 0 0 1.5px #4C7DFF,0 20px 50px rgba(47,107,255,.14)}
.plan.hot::before{content:"";position:absolute;inset:-1.5px;border-radius:19px;padding:1.5px;background:linear-gradient(135deg,#7FA6FF,#2F6BFF 50%,#7C4DFF);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.plan h3{font:500 clamp(18px,1.9vw,21px)/1.2 var(--sans);letter-spacing:-.02em}
.plan .price{display:flex;align-items:baseline;gap:8px;margin-top:22px}
.plan .price b{font:500 clamp(32px,3.6vw,48px)/1 var(--sans);letter-spacing:-.045em}
.plan .price span{font:400 14px/1 var(--sans);color:var(--muted)}
.plan .credits{font:400 13.5px/1.4 var(--sans);color:var(--muted);margin-top:8px}
.plan .btn{margin-top:22px}
.plan ul{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:10px;font:400 clamp(13px,1.4vw,14.5px)/1.4 var(--sans);color:var(--body)}
.plan li::before{content:"\2713";font-size:12px;color:var(--ink);margin-top:2px}
.plan-note{margin-top:28px;font:400 13.5px/1.5 var(--sans);color:var(--label)}

/* FAQ */
.faqs{display:flex;flex-direction:column;gap:12px;margin-top:44px}
.faq{border:1px solid var(--hair);border-radius:16px;background:#fff;box-shadow:0 6px 20px rgba(18,17,17,.04)}
.faq summary{cursor:pointer;list-style:none;padding:22px 24px;display:flex;justify-content:space-between;gap:16px;align-items:center;font:500 17px/1.35 var(--sans);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 24px/1 var(--sans);color:var(--label);flex:none}
.faq[open] summary::after{content:"\2013"}
.faq p{padding:0 24px 22px;font:400 15px/1.55 var(--sans);color:var(--muted)}

/* Closing CTA on dark */
.closing{position:relative;background:#0A0A0B;color:#fff;padding:170px 0 120px;overflow:hidden;border-radius:50% 50% 0 0/120px 120px 0 0;margin-top:-60px}
.closing .aurora{position:absolute;left:50%;top:-380px;transform:translateX(-50%);width:1600px;height:560px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(120,170,255,.95) 0%,rgba(47,107,255,.7) 45%,rgba(60,0,160,.35) 70%,rgba(0,0,0,0) 100%);filter:blur(34px);pointer-events:none}
.closing .h2{color:#fff;position:relative}
.closing .lede{color:#B9B9C0;position:relative}
.signup{margin:36px auto 0;position:relative}
.micro{margin:14px 0 0;font:400 12.5px/1.4 var(--sans);color:#8A8A92}

/* Footer */
footer{background:#0A0A0B;color:#fff;padding:56px 0 40px;border-top:1px solid rgba(255,255,255,.08)}
.footgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px}
.footgrid .k{font:500 13px/1 var(--sans);color:#fff;margin-bottom:16px}
.footgrid .col{display:flex;flex-direction:column;gap:11px;font:400 14px/1.3 var(--sans);color:#8A8A92}
.footgrid .col a:hover{color:#fff}
.footbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font:400 12.5px/1 var(--sans);color:#6A6A72}



/* The hero settles in on load, one element at a time. */
.hero .wrap > *{animation:settle .7s cubic-bezier(.22,.61,.36,1) both}
.hero .wrap > *:nth-child(1){animation-delay:.05s}
.hero .wrap > *:nth-child(2){animation-delay:.14s}
.hero .wrap > *:nth-child(3){animation-delay:.23s}
.hero .wrap > *:nth-child(4){animation-delay:.32s}
.hero .wrap > *:nth-child(5){animation-delay:.41s}
.hero .wrap > *:nth-child(6){animation-delay:.50s}
/* Movement only: no opacity or blur, so the hero is painted (and counted for LCP) on the first frame. */
@keyframes settle{from{transform:translateY(14px)}to{transform:none}}

/* Motion: runs of cards arrive one after another once the block scrolls in. */
.stagger > *{opacity:0;transform:translateY(12px);filter:blur(4px);transition:opacity .5s ease,transform .5s ease,filter .5s ease}
.reveal.in .stagger > *{opacity:1;transform:none;filter:none}
.stagger > *:nth-child(1){transition-delay:.06s}
.stagger > *:nth-child(2){transition-delay:.14s}
.stagger > *:nth-child(3){transition-delay:.22s}
.stagger > *:nth-child(4){transition-delay:.30s}
.stagger > *:nth-child(5){transition-delay:.38s}
.stagger > *:nth-child(6){transition-delay:.46s}
.stagger > *:nth-child(7){transition-delay:.54s}
.stagger > *:nth-child(8){transition-delay:.62s}

/* Step 01 types the address in before the checks land. */
.typed{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:1.5px solid var(--accent)}
.reveal.in .typed{animation:type 1s steps(16,end) .15s forwards,caret .7s step-end 5}
@keyframes type{to{max-width:230px}}
@keyframes caret{0%,100%{border-color:var(--accent)}50%{border-color:transparent}}


/* ---------------------------------------------------------------------------
   Home page: one phone of real posts, three steps, a week, what else it does.
   Every motion is opacity/transform only, so it stays on the compositor.
   --------------------------------------------------------------------------- */
 /* The home page sets its italics in a serif, as in the brand mockup. */
.home .h1 em,.home .h2 em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.01em}
.band.tight-top{padding-top:0}
:root{--spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,.61,.36,1)}

/* Hero: copy left, a phone of real posts right. */
.hero-split{padding:24px 0 40px}
.hero-split .wrap > *{animation:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-copy > *{animation:settle .7s var(--ease) both}
.hero-copy > *:nth-child(2){animation-delay:.1s}
.hero-copy > *:nth-child(3){animation-delay:.2s}
.hero-copy > *:nth-child(4){animation-delay:.3s}
.hero-split .h1{margin:0;max-width:none;font-size:clamp(44px,6.4vw,84px)}
.hero-split .h1 em{white-space:nowrap}
.hero-split .ctas{justify-content:flex-start}
.hero-split .hero-note{margin-top:16px}

.stage{position:relative;display:flex;justify-content:center;padding:24px 0;animation:settle .9s var(--ease) .25s both}
.device{position:relative;width:290px;aspect-ratio:9/19.5;background:#0E0E10;border-radius:46px;padding:10px;box-shadow:0 50px 90px -30px rgba(18,17,17,.45),0 0 0 1px rgba(255,255,255,.06) inset;animation:float 7s ease-in-out 1.2s infinite}
.device-screen{position:relative;width:100%;height:100%;border-radius:37px;overflow:hidden;background:#111;transform:translateZ(0)}
.device-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:14px;background:#000;z-index:3}
/* Slides are 9:16 and the screen is taller: show the whole slide, letterboxed like TikTok. */
.deck img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation:deck 16s linear infinite}
.deck img:nth-child(2){animation-delay:4s}
.deck img:nth-child(3){animation-delay:8s}
.deck img:nth-child(4){animation-delay:12s}
/* Story-style progress: one segment per post, filling in step with the deck. */
.story-bar{position:absolute;top:44px;left:14px;right:14px;display:flex;gap:4px;z-index:2}
.story-bar i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.story-bar i::after{content:"";display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left;animation:story 16s linear infinite}
.story-bar i:nth-child(2)::after{animation-delay:4s}
.story-bar i:nth-child(3)::after{animation-delay:8s}
.story-bar i:nth-child(4)::after{animation-delay:12s}
.device-rail{position:absolute;right:12px;bottom:96px;display:flex;flex-direction:column;gap:16px;z-index:2}
.device-rail span{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22)}
.device-handle{position:absolute;left:16px;bottom:28px;z-index:2;text-align:left;color:#fff;font:600 13.5px/1.2 var(--sans);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.device-handle small{display:block;font-weight:400;opacity:.85;margin-top:3px}

.posted{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:rgba(255,255,255,.96);border:1px solid var(--hair);box-shadow:0 16px 36px -14px rgba(18,17,17,.3);font:500 14px/1 var(--sans);color:var(--ink);white-space:nowrap;animation:pop .6s var(--spring) both,bob 6s ease-in-out infinite}
.posted .logo{width:26px;height:26px;border-radius:7px;background:center/cover no-repeat;flex:none}
.posted .ok{color:var(--green);font-weight:600}
.li-mark{display:grid;place-items:center;color:#fff;font:700 14px/1 var(--sans)}
/* After the logo rules, whose background shorthand would clear the blue. */
.posted .li-mark,.chan-row > .li-mark,.day p .li-mark{background-color:#0A66C2}
.p1{left:2%;top:16%;animation-delay:.9s,1.5s}
.p2{right:0;top:58%;animation-delay:1.3s,2.3s}
.p3{left:5%;top:76%;animation-delay:1.7s,3.1s}

/* Three steps, each a small picture that plays once it scrolls in. */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.step-card{background:var(--panel);border-radius:24px;padding:28px}
.step-art{height:220px;display:grid;place-items:center;margin-bottom:24px}
.step-art{grid-template-columns:minmax(0,1fr)}
.step-art > *{max-width:100%}
.step-card h3{font:500 21px/1.2 var(--sans);letter-spacing:-.02em}
.step-card h3 b{color:var(--accent);font-weight:600;margin-right:8px}
.urlbox{display:flex;align-items:center;gap:10px;width:260px;max-width:100%;background:#fff;border:1px solid var(--hair);border-radius:14px;padding:14px 16px;font:400 16px/1 var(--sans);box-shadow:0 12px 30px -14px rgba(18,17,17,.25)}
.urlbox i{width:10px;height:10px;border-radius:50%;background:var(--green);flex:none}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.chips span{font:500 13px/1 var(--sans);padding:7px 11px;border-radius:999px;background:var(--green-soft);color:var(--green);opacity:0;transform:scale(.7);transition:opacity .35s ease,transform .5s var(--spring)}
.reveal.in .chips span{opacity:1;transform:none}
.reveal.in .chips span:nth-child(1){transition-delay:1.2s}
.reveal.in .chips span:nth-child(2){transition-delay:1.4s}
.reveal.in .chips span:nth-child(3){transition-delay:1.6s}
.fan{position:relative;width:240px;height:210px}
.fan img{position:absolute;top:6px;left:64px;width:112px;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:12px;box-shadow:0 16px 32px -12px rgba(18,17,17,.45);transition:transform .9s var(--spring) .35s}
.fan img:nth-child(2){z-index:2}
.reveal.in .fan img:nth-child(1){transform:rotate(-12deg) translateX(-62px)}
.reveal.in .fan img:nth-child(3){transform:rotate(12deg) translateX(62px)}
.chan-row{display:flex;gap:10px;justify-content:center;margin-bottom:22px}
.chan-row > span{width:40px;height:40px;border-radius:11px;background:center/cover no-repeat;opacity:0;transform:translateY(10px) scale(.8);transition:opacity .35s ease,transform .5s var(--spring)}
.chan-row .li-mark{font-size:19px}
.reveal.in .chan-row > span{opacity:1;transform:none}
.reveal.in .chan-row > span:nth-child(2){transition-delay:.08s}
.reveal.in .chan-row > span:nth-child(3){transition-delay:.16s}
.reveal.in .chan-row > span:nth-child(4){transition-delay:.24s}
.reveal.in .chan-row > span:nth-child(5){transition-delay:.32s}
.mini-chart{width:240px;max-width:100%;background:#fff;border:1px solid var(--hair);border-radius:14px;padding:14px 16px}
.mini-chart b{font:500 13px/1 var(--sans);color:var(--muted)}
.mini-chart svg{display:block;width:100%;height:64px;margin-top:8px}
.mini-chart .line{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.4s var(--ease) .6s}
.mini-chart .area{opacity:0;transition:opacity .8s ease 1.4s}
.reveal.in .mini-chart .line{stroke-dashoffset:0}
.reveal.in .mini-chart .area{opacity:.12}

/* A week of real posts, Monday to Saturday. */
.week{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:56px}
.day img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:16px;background:var(--panel);box-shadow:0 18px 40px -24px rgba(18,17,17,.45);transition:transform .25s ease}
.day:hover img{transform:translateY(-6px)}
.day p{display:flex;align-items:center;gap:7px;margin-top:10px;font:400 14px/1 var(--sans);color:var(--muted)}
.day p span{width:16px;height:16px;border-radius:4px;background:center/cover no-repeat}
.day p .li-mark{font-size:10px}

/* What else it does: four pictures. */
.more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:56px}
.more-tile{background:var(--panel);border-radius:22px;padding:22px}
.more-vis{height:190px;display:flex;flex-direction:column;justify-content:center;gap:8px;margin-bottom:18px}
.more-tile h3{font:500 18px/1.25 var(--sans);letter-spacing:-.02em}
.more-tile p{margin-top:4px;font:400 14px/1.45 var(--sans);color:var(--muted)}
.msg{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:12px 14px;font:400 13px/1.4 var(--sans);color:var(--ink);box-shadow:0 10px 24px -16px rgba(18,17,17,.3)}
.msg .meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;color:var(--muted)}
.msg .meta span{width:18px;height:18px;border-radius:5px;background:center/cover no-repeat}
.msg b{display:block;font-weight:600}
.msg.reply{margin-left:22px;border-color:#BFD3FF;background:var(--accent-soft);opacity:0;transform:translateY(12px);transition:opacity .5s ease .7s,transform .6s var(--spring) .7s}
.reveal.in .msg.reply{opacity:1;transform:none}
.copy-link{display:block;margin-top:8px;font-size:12px;font-weight:600;color:var(--accent)}
.sent{align-self:flex-start;font:500 12px/1 var(--sans);padding:7px 11px;border-radius:999px;background:var(--green-soft);color:var(--green);opacity:0;transform:scale(.7);transition:opacity .35s ease .8s,transform .5s var(--spring) .8s}
.reveal.in .sent{opacity:1;transform:none}
.outlets{display:flex;gap:6px;flex-wrap:wrap}
.outlets span{font:500 12px/1 var(--sans);padding:7px 10px;border-radius:8px;background:#fff;border:1px solid var(--hair)}
.ring{position:relative;width:130px;height:130px;margin:0 auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .arc{stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 1.6s var(--ease) .4s}
.reveal.in .ring .arc{stroke-dashoffset:57}
.ring > div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:600 34px/1 var(--sans);letter-spacing:-.03em}
.ring small{display:block;margin-top:4px;font:400 12px/1 var(--sans);letter-spacing:0;color:var(--muted)}

/* Pricing on the home page: bullets lead with what gets made. */
.plan li.hl{color:var(--ink);font-weight:500}

@keyframes deck{0%{opacity:0;transform:scale(1.06)}3%{opacity:1}25%{opacity:1}28%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes story{0%{transform:scaleX(0)}25%{transform:scaleX(1)}25.01%,100%{transform:scaleX(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.85)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* Cards lift a little under the cursor so the page feels handled. */
.plan{transition:transform .2s ease,box-shadow .2s ease}
.plan:hover{transform:translateY(-3px)}

.reveal{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .6s ease,transform .6s ease,filter .6s ease}
.reveal.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none;filter:none}
  .stagger > *{opacity:1;transform:none;filter:none}
  .typed{max-width:none;border-right:0}
  .deck img:first-child{opacity:1}
  .story-bar i:first-child::after{transform:none}
}

/* Responsive */
@media (max-width:1023px){
  .band{padding:80px 0}
  .nav .links{display:none}
  .nav.stuck{gap:14px}
  .hero-grid{grid-template-columns:1fr;gap:24px;text-align:center}
  .hero-split .ctas{justify-content:center}
  .stage{width:100%;max-width:520px;margin:0 auto}
  .more{grid-template-columns:repeat(2,minmax(0,1fr))}
  .week{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:56px -24px 0;padding:0 24px 12px;scroll-padding:0 24px}
  .week::-webkit-scrollbar{display:none}
  .day{flex:0 0 30%;scroll-snap-align:start}
  .footgrid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:859px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps3{grid-template-columns:minmax(0,1fr);max-width:460px;margin-left:auto;margin-right:auto}
}
@media (max-width:639px){
  .wrap{padding:0 18px}
  .nav{padding:14px 18px}
  .nav .btn{padding:11px 14px;font-size:13.5px}
  .hero{padding-top:22px}
  .hero-split{padding-bottom:16px}
  .ctas .btn{width:100%;justify-content:center}
  .device{width:250px;border-radius:40px}
  .device-screen{border-radius:31px}
  .posted{font-size:12.5px;padding:8px 11px 8px 8px;gap:8px}
  .posted .logo{width:22px;height:22px}
  .p1{left:0;top:14%}
  .p2{right:0}
  .p3{left:0}
  .week{margin:44px -18px 0;padding:0 18px 12px;scroll-padding:0 18px}
  .day{flex-basis:58%}
  .more{grid-template-columns:1fr}
  .more-vis{height:auto;min-height:150px}
  .plans{grid-template-columns:1fr}
  .closing{padding:120px 0 80px;border-radius:50% 50% 0 0/60px 60px 0 0;margin-top:-30px}
  .hero-note{letter-spacing:.05em;font-size:10px}
  .footbar{flex-direction:column;align-items:flex-start;gap:12px}
}