/* v2 design system, shared by every v2 page (views/common/v2/shell). This is brand.css of the landing pages
without the tokens (tokens.css), the app marks (marks.css) and the nav and footer (chrome.css), which the Shards
pages that show the v2 header load too. Only v2 pages load this file, the Shards pages never see these classes */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;margin:0;color:var(--ink);letter-spacing:-.02em}
h1{font-size:64px;line-height:1.05;letter-spacing:-.03em}
h2{font-size:40px;line-height:1.1}
h3{font-size:30px;line-height:1.15}
h4{font-size:20px;line-height:1.3;letter-spacing:-.01em;font-weight:700}
p{margin:0}
.lead{font-size:17px;line-height:1.6}
.text-2{color:var(--ink-2)}
.muted{color:var(--muted)}
.blue{color:var(--blue)}
.orange{color:var(--orange)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
.center{text-align:center}
[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) var(--gutter)}
.section.tight{padding-top:0}
.section-header{max-width:780px;margin:0 auto 64px;text-align:center}
.section-header h2,.section-header h3{margin:14px 0 14px}
.section-header .lead{color:var(--ink-2)}
.band{background:var(--bg-soft);border-radius:var(--r-lg);padding:72px 48px}
/* ---------- Buttons ----------
One shape, one border width, no shadows, no jumping on hover.
BLUE = free / sign-up / product actions
YELLOW = You Exec Pro (paid)
Everything else is a quiet secondary: outline, white, or ghost. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:600;font-size:15px;line-height:1.4;padding:10px 21px;border-radius:var(--pill);border:1px solid transparent;background:none;color:inherit;cursor:pointer;white-space:nowrap;text-decoration:none;box-shadow:none;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.btn-lg{font-size:17px;padding:13px 27px}
.btn-sm{font-size:14px;padding:7px 15px}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Blue — free */
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
/* Yellow — Pro */
/* the yellow fill and its hover are the bloom of bloom.css */
.btn-pro,.btn-pro:hover{color:var(--ink)}
.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-dark:hover{background:#000;border-color:#000;color:#fff}
/* Secondary on light backgrounds */
.btn-outline{background:transparent;border-color:var(--blue);color:var(--blue)}
.btn-outline:hover{background:var(--blue-10);color:var(--blue-dark)}
.btn-white{background:#fff;border-color:var(--border);color:var(--ink)}
.btn-white:hover{background:var(--bg-soft);border-color:var(--border-2);color:var(--ink)}
/* Secondary on dark/blue backgrounds */
.btn-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-light:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.btn-ghost{background:transparent;border-color:transparent;color:var(--blue);padding:8px 4px;font-weight:600;font-size:14px}
.btn-ghost:hover{color:var(--blue-dark)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* ---------- Email capture ---------- */
.capture{display:flex;align-items:center;gap:6px;max-width:460px;width:100%;padding:6px 6px 6px 22px;background:#fff;border-radius:var(--pill);box-shadow:inset 0 0 0 1px var(--border);transition:box-shadow .2s}
.capture:focus-within{box-shadow:inset 0 0 0 2px var(--blue)}
.capture input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:8px 0}
.capture input::placeholder{color:var(--muted)}
.capture-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.or{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.06em}
.fine{font-size:13px;color:var(--muted)}
.section-header--after .lot{margin-inline:auto}
.beta{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:var(--blue-10);padding:3px 8px;border-radius:var(--pill)}
/* ---------- App belt (home) — borderless, hover-only highlight ---------- */
.belt{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:0 var(--gutter)}
.belt a{display:flex;flex-direction:column;align-items:center;gap:10px;width:118px;padding:18px 10px 14px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--ink-2);transition:background-color .2s var(--ease),transform .25s var(--ease),color .2s;position:relative}
.belt a:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.belt a.active{color:var(--ink)}
.belt .lot{width:40px;height:40px;transition:transform .3s var(--ease)}
.belt .mark{width:40px;height:40px;transition:transform .3s var(--ease)}
.belt a:hover .mark,.belt a:hover .lot{transform:scale(1.06)}
.belt .tag{position:absolute;z-index:2;top:8px;right:10px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-dark);background:var(--orange-10);padding:2px 7px;border-radius:var(--pill)}
/* ---------- Hero ---------- */
.hero{padding:72px var(--gutter) 0;text-align:center;position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-140px 0 auto 0;height:620px;z-index:-1;pointer-events:none;background:
radial-gradient(600px 320px at 30% 10%,var(--sky-20),transparent 70%),
radial-gradient(520px 300px at 72% 0%,var(--orange-10),transparent 70%),
radial-gradient(700px 360px at 50% 30%,var(--blue-10),transparent 70%);
opacity:.9;mask-image:linear-gradient(#000 40%,transparent);-webkit-mask-image:linear-gradient(#000 40%,transparent)}
.hero h1{max-width:1040px;margin:0 auto 22px}
.hero .lead{max-width:680px;margin:0 auto 34px;font-size:19px;color:var(--ink-2)}
.hero .capture{margin:0 auto 14px}
.hero .fine{margin-bottom:0}
/* the hero sign-up, lifted off the page */
.hero-join{justify-content:center;margin-top:6px;gap:14px}
.hero-join .capture{margin:0}
.hero-join{position:relative}
/* "OR" and the note under the row: translucent black so they take on the glow's tint
(.56 keeps them above WCAG AA 4.5:1 on white) */
.hero-join .or,.hero .hero-join__note{color:rgba(0,0,0,.56)}
.hero-join > form,.hero-join > .or,.hero-join > .btn-white{position:relative;z-index:1}
/* the glow lives on its own layer: it drifts on a long loop, and leans
toward the pointer. --gx/--gy are set by script, so the drift keyframes
keep `transform` to themselves. */
.hero-join__glow{position:absolute;left:0;right:0;top:50%;margin:-84px auto 0;
width:min(832px,100%);height:168px;border-radius:99em;pointer-events:none;z-index:0;
background:radial-gradient(58% 66% at 50% 50%,rgba(0,110,219,.36),
rgba(0,110,219,.14) 46%,rgba(0,110,219,0) 72%);
filter:blur(26px);will-change:transform,translate;
translate:var(--gx,0px) var(--gy,0px);
animation:heroGlowDrift 13s ease-in-out infinite alternate}
@keyframes heroGlowDrift{
0%{transform:translate3d(-12px,-5px,0) scale(.96);opacity:.82}
50%{transform:translate3d(5px,4px,0) scale(1.05);opacity:1}
100%{transform:translate3d(13px,-3px,0) scale(.99);opacity:.88}}
@media (prefers-reduced-motion:reduce){
.hero-join__glow{animation:none;translate:none}}
/* hero field: at rest a faint translucent grey stroke 2px outside its edge and a soft
shadow. While typing it stays put (the shared .capture lifts 1px, which reads as a jump),
the shadow and grey stroke fade, and a blue stroke blurs in: at rest it is already
there as a wide, invisible blue haze, and focus tightens it to a crisp 2px line
(shadow lists match layer for layer so every value tweens). */
.hero-join .capture,.hero-join .capture:focus-within{transform:none}
.hero-join .capture{box-shadow:inset 0 0 0 1px rgba(226,226,229,0),0 0 16px 3px rgba(0,110,219,0),
0 0 0 2px rgba(18,22,26,.06),0 14px 34px -24px rgba(18,22,26,.5);
transition:box-shadow .4s cubic-bezier(.2,.7,.2,1)}
.hero-join .capture:focus-within{box-shadow:inset 0 0 0 1px rgba(226,226,229,0),
0 0 0 2px var(--blue),0 0 0 2px rgba(18,22,26,0),0 14px 34px -24px rgba(18,22,26,0)}
/* the Google button wears the email field's resting look: white fill, faint grey
outer stroke and shadow */
.hero-join .btn-white{border:0;min-height:55px;background:#fff;
box-shadow:0 0 0 2px rgba(18,22,26,.06),0 14px 34px -24px rgba(18,22,26,.5)}
@media (max-width:620px){.hero-join{flex-direction:column;gap:12px}
.hero-join .capture,.hero-join .btn-white{width:100%;justify-content:center}}
/* ---------- Cards (borderless, soft surfaces) ---------- */
.grid-2,.grid-3,.grid-4,.stats,.steps{display:grid;gap:20px;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr))}
.grid-2{--cols:2}.grid-3,.steps{--cols:3}.grid-4,.stats{--cols:4}
.card{background:var(--bg-soft);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;gap:14px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s}
.card:hover{transform:translateY(-2px);box-shadow:var(--lift);background:#fff}
.card.white{background:#fff;box-shadow:var(--shadow-sm)}
.card p{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:80ch}
.card .mt-auto{margin-top:auto}
.card > img,.card > .btn,.card .body > img,.tool > .btn,.step > .btn{align-self:flex-start}
.icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--ink)}
.icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon.b{background:var(--blue);color:#fff}
.icon.s{background:var(--sky-20);color:var(--blue)}
.icon.o{background:var(--orange-10);color:var(--orange-dark)}
.icon.n{background:var(--ink);color:#fff}
/* Placeholder panels — brand tints only */
.ph{border-radius:var(--r);display:grid;place-items:center;min-height:200px;position:relative;overflow:hidden;isolation:isolate}
.ph::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(18,18,18,.06) 1px,transparent 1px);background-size:14px 14px;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%)}
.ph-label{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--pill);background:rgba(255,255,255,.85);backdrop-filter:blur(6px);font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.ph-blue{background:linear-gradient(135deg,var(--blue-10),var(--blue-20))}
.ph-sky{background:linear-gradient(135deg,var(--sky-10),var(--sky-20))}
.ph-orange{background:linear-gradient(135deg,var(--orange-10),var(--orange-20))}
.ph-mix{background:radial-gradient(circle at 20% 20%,var(--orange-20),transparent 55%),radial-gradient(circle at 85% 80%,var(--blue-20),transparent 55%),var(--sky-10)}
.ph-deep{background:radial-gradient(circle at 85% 15%,var(--sky) 0,transparent 55%),radial-gradient(circle at 10% 95%,var(--blue-dark) 0,transparent 60%),var(--blue)}
.ph-deep::after{background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px)}
.ph-deep .ph-label{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.ph-dark{background:radial-gradient(circle at 80% 10%,#2a2a2a 0,transparent 55%),var(--ink)}
.ph-dark .ph-label{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.ph.bar-b,.ph.bar-o,.ph.bar-s{border-top:0}
/* Solid brand tiles (category cards) */
.tile{border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column;justify-content:flex-end;min-height:160px;color:#fff;transition:transform .3s var(--ease),box-shadow .3s var(--ease);position:relative;overflow:hidden}
.tile::after{content:"";position:absolute;inset:auto -30% -50% auto;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14);transition:transform .4s var(--ease)}
.tile:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.tile:hover::after{transform:scale(1.25)}
.tile h4{color:inherit;font-size:22px;font-weight:700;position:relative}
.tile span{opacity:.9;font-size:14px;position:relative}
.tile.b{background:var(--blue)}
.tile.s{background:var(--sky)}
.tile.o{background:var(--orange);color:var(--ink)}
.tile.n{background:var(--ink)}
/* Template cards */
.tcard{display:flex;flex-direction:column;gap:10px;transition:transform .3s var(--ease)}
.tcard:hover{transform:translateY(-3px)}
.tcard .thumb{aspect-ratio:16/9;border-radius:var(--r-sm);position:relative;overflow:hidden;background:var(--bg-soft)}
.tcard .thumb .slide{position:absolute;inset:10% 8%;border-radius:8px;background:#fff;box-shadow:0 8px 24px -16px rgba(18,18,18,.35);padding:10px;display:flex;flex-direction:column;gap:6px}
.tcard .thumb .slide i{display:block;height:6px;border-radius:3px;background:var(--border)}
.tcard .thumb .slide i.t{width:55%;height:8px;background:var(--ink)}
.tcard .thumb .slide .blocks{display:flex;gap:6px;margin-top:auto}
.tcard .thumb .slide .blocks b{flex:1;height:26px;border-radius:5px}
.tcard .meta{font-size:12px;color:var(--muted)}
.tcard .name{font-weight:600;font-size:14px}
/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split .eyebrow{margin-bottom:14px}
.split h2{margin-bottom:16px}
.split .lead{color:var(--ink-2);max-width:68ch}
.split h2{max-width:20ch}
.front{border-radius:var(--r-lg);min-height:400px}
/* ---------- Steps ---------- */
.step{padding:32px;border-radius:var(--r-lg);background:var(--bg-soft);color:inherit;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s}
.step:hover{transform:translateY(-2px);box-shadow:var(--lift);background:#fff}
.step-num{font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--blue);margin-bottom:22px;display:inline-flex;align-items:center;gap:10px}
.step-num::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--orange)}
.step h4{margin-bottom:8px}
.step-head{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.step-head .mark,.step-head .lot{width:28px;height:28px;flex:none}
.step-head .step-num{margin:0}
.step-head .step-num::before{display:none}
.step-link{margin-top:auto;padding-top:20px;font-size:14px;font-weight:600;color:var(--blue);transition:color .2s}
.step:hover .step-link{color:var(--blue-dark)}
.step p{color:var(--ink-2);font-size:15px;line-height:1.6;max-width:72ch}
/* ---------- Stats ---------- */
.stat{padding:28px 20px;border-radius:var(--r);background:var(--bg-soft);text-align:center}
.stat b{display:block;font-family:var(--font-head);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.03em;color:var(--blue);margin-bottom:8px}
.stat span{color:var(--ink-2);font-size:14px}
/* ---------- Logos strip ---------- */
.trusted{padding:calc(var(--section-y) * .7) var(--gutter) 0;text-align:center}
.trusted + .cta{padding-top:var(--section-y)}
.trusted .eyebrow{color:var(--ink-2);font-size:13px;letter-spacing:.11em;margin-bottom:28px}
.trusted .eyebrow::before{display:none}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px clamp(26px,3.2vw,46px)}
.logos span{font-family:var(--font-head);font-weight:600;font-size:clamp(14.5px,1.15vw,17.5px);
letter-spacing:-.005em;color:#9BA1AB}
/* ---------- FAQ — no boxes, just hairline rules ---------- */
.faq{max-width:900px;margin:0 auto;border-top:1px solid var(--border)}
.faq details{background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:0}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 2px;font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink);transition:color .2s}
.faq summary:hover{color:var(--blue)}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:8px;height:8px;flex:none;margin-top:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .38s var(--spring),border-color .2s}
.faq summary:hover::after{border-color:var(--blue)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:11px;border-color:var(--ink)}
.faq details p{padding:0 40px 24px 2px;color:var(--ink-2);font-size:15px;line-height:1.7}
/* ---------- Tabs ---------- */
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--bg-soft);border-radius:var(--pill)}
.tabs button{border:0;background:transparent;padding:9px 20px;border-radius:var(--pill);font-weight:600;font-size:14px;color:var(--ink-2);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.tabs button.active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(18,18,18,.08)}
.tabpanel{display:none}
.tabpanel.active{display:block}
/* ---------- CTA band ---------- */
.cta{padding:0 var(--gutter) var(--section-y)}
.cta-inner{max-width:none;margin:0 auto;text-align:center;padding:88px 32px;border-radius:var(--r-lg);position:relative;overflow:hidden;background:
radial-gradient(520px 300px at 0% 0%,var(--sky-20),transparent 70%),
radial-gradient(520px 300px at 100% 100%,var(--orange-20),transparent 70%),
radial-gradient(600px 300px at 100% 0%,var(--blue-10),transparent 70%),
var(--bg-soft)}
.cta h2{margin-bottom:16px}
.cta .lead{color:var(--ink-2);max-width:640px;margin:0 auto 32px}
.cta .fine{margin-top:16px}
/* Dark CTA band: the brand gradient photograph, with a navy scrim so the
white copy always sits on a dark field. The image drifts slowly on hover. */
/* Dark CTA band: the brand gradient photograph, uncovered — no scrim.
The crop is chosen so the copy sits on deep navy and the warm bloom
stays out in the top-right corner. */
.cta.dark .cta-inner{background:var(--blue);isolation:isolate}
.cta.dark .cta-inner::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:url("../../images/v2/cta-bg.jpg") 34% 50%/cover no-repeat;transform:scale(1.04)}
.cta.dark .cta-inner > *{position:relative;z-index:2}
.cta.dark h2,.cta.dark .lead,.cta.dark .fine{color:#fff}
.cta.dark .lead{opacity:.9}
.cta.dark .fine{opacity:.7}
.cta.dark .or{color:rgba(255,255,255,.7)}
/* ---------- Misc ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:560px}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.list li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--blue);margin-top:1px;background-image:url("data:image/svg+xml;utf8,");background-size:11px;background-repeat:no-repeat;background-position:center}
.list li b{color:var(--ink);font-weight:600}
.list.light li{color:rgba(255,255,255,.9)}
.list.light li b{color:#fff}
.list.light li::before{background-color:#fff;background-image:url("data:image/svg+xml;utf8,")}
.pill-note{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--pill);background:var(--orange-10);color:var(--ink);font-size:13px;font-weight:600}
.pill-note i{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.window{margin:64px auto 0;max-width:1040px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--border);overflow:hidden;text-align:left}
.window-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-light)}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%}
.dots i:nth-child(1){background:var(--orange)}
.dots i:nth-child(2){background:var(--sky)}
.dots i:nth-child(3){background:var(--blue)}
.urlbar{flex:1;max-width:420px;margin:0 auto;height:26px;border-radius:var(--pill);background:#fff;border:1px solid var(--border);display:flex;align-items:center;padding:0 12px;font-size:12px;color:var(--muted)}
.window-body{display:grid;grid-template-columns:1fr 300px;min-height:400px}
.window-body .ph{margin:16px;border-radius:var(--r-sm)}
.panel{border-left:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:12px}
.panel-title{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.skel{border-radius:var(--r-sm);background:var(--bg-soft);padding:12px;display:flex;gap:10px}
.skel .av{width:28px;height:28px;border-radius:50%;flex:none}
.skel .lines{flex:1;display:flex;flex-direction:column;gap:6px;padding-top:4px}
.skel .lines i{display:block;height:8px;border-radius:4px;background:#fff}
.skel .lines i:first-child{width:45%;background:var(--border)}
.skel .lines i:last-child{width:70%}
/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.06s}.reveal:nth-child(3){transition-delay:.12s}.reveal:nth-child(4){transition-delay:.18s}
/* ---------- Responsive ---------- */
@media (max-width:960px){
h1{font-size:48px} h2{font-size:32px} h3{font-size:26px}
.split{grid-template-columns:1fr;gap:36px}
.split.reverse .front{order:-1}
.steps,.grid-3{--cols:1}
.grid-4,.stats{--cols:2}
.window-body{grid-template-columns:1fr}
.panel{border-left:0;border-top:1px solid var(--border)}
.band{padding:48px 28px}
}
@media (max-width:760px){
:root{--section-y:72px;--nav-h:64px}
h1{font-size:38px}
.grid-2{--cols:1}
.capture{flex-direction:column;padding:6px;border-radius:var(--r)}
.capture input{width:100%;padding:10px 14px}
.capture .btn{width:100%}
.capture-row{flex-direction:column}
.capture-row .btn-white{width:100%;max-width:460px}
.card{padding:24px}
.belt a{width:calc(50% - 3px)}
.cta-inner{padding:56px 22px;border-radius:var(--r)}
.br-desk{display:none}
}
/* =====================================================================
Microinteractions
Hover on buttons is still colour-only; movement lives on press,
on arrows, and on things that are already surfaces (cards, panels).
All of it is switched off by prefers-reduced-motion at the bottom.
===================================================================== */
/* Buttons: hover changes colour, nothing else (see 02-design-system.md). */
.tcard:active,.card:active{transform:translateY(-1px)}
/* Card and tile surfaces breathe a little more */
.appgrid .card .ph{transition:transform .55s var(--ease)}
.appgrid .card:hover .ph{transform:scale(1.045)}
.tcard .thumb .slide{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tcard:hover .thumb .slide{transform:scale(1.035)}
.logos span{transition:color .25s var(--ease)}
.logos span:hover{color:var(--ink-2)}
.faq summary:hover::after{transform:rotate(45deg) translateY(2px)}
.faq details[open] summary:hover::after{transform:rotate(-135deg) translateY(2px)}
/* Trailing arrows nudge along (site.js wraps them in ) */
.arw{display:inline-block;transition:transform .28s var(--spring)}
a:hover .arw,button:hover .arw,.card:hover .arw,.step:hover .arw{transform:translateX(5px)}
/* FAQ answers slide in under the question */
.faq details[open] > p{animation:faq-open .34s var(--ease) both}
@keyframes faq-open{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
/* Icon tiles tip over slightly when their card is hovered */
.icon{transition:transform .38s var(--spring)}
.card:hover .icon,.step:hover .icon,.tool:hover .icon{transform:rotate(-5deg) scale(1.06)}
/* The eyebrow dot breathes */
@keyframes dot-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
.eyebrow::before{animation:dot-pulse 2.8s var(--ease) infinite}
/* Nav lockup and the email pill react to attention */
.capture{transition:box-shadow .2s var(--ease),transform .25s var(--ease)}
.capture:focus-within{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}