/* ═══════════════════════════════════════════════════════════
   HAPPY MEAL PREP — DESIGN SYSTEM v3 "Control Room"
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#070C16;
  --ink-2:#0D1424;
  --navy:#293855;
  --navy-2:#1B2740;
  --teal:#7FCED2;
  --teal-deep:#2E9AA0;
  --teal-pale:#E9F6F6;
  --mint:#8FDE9E;
  --grad: linear-gradient(100deg, #5FC7BE 0%, #8FDE9E 100%);

  --paper:#FFFFFF;
  --soft:#F6F8F9;
  --soft-2:#EEF2F4;
  --line:#E7EBEE;
  --line-2:#DCE2E6;
  --text:#0F1621;
  --text-2:#4A5666;
  --text-3:#8793A3;

  --amber:#E8A33D;
  --coral:#E0674F;

  --sh-1: 0 1px 2px rgba(7,12,22,.04), 0 4px 12px -4px rgba(7,12,22,.08);
  --sh-2: 0 2px 4px rgba(7,12,22,.04), 0 16px 32px -12px rgba(7,12,22,.12);
  --sh-3: 0 8px 16px rgba(7,12,22,.06), 0 40px 80px -24px rgba(7,12,22,.22);
  --sh-glow: 0 40px 120px -40px rgba(95,199,190,.45);

  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px;
  --container:1240px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Instrument Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--paper);color:var(--text);
  font-size:17px;line-height:1.6;letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit}
::selection{background:var(--teal);color:var(--ink)}

h1,h2,h3,h4,h5{font-weight:700;color:var(--ink);line-height:1.04;letter-spacing:-0.032em}
h1{font-size:clamp(44px,5.4vw,76px);line-height:.98;letter-spacing:-0.04em}
h2{font-size:clamp(32px,3.9vw,54px);letter-spacing:-0.036em}
h3{font-size:clamp(24px,2.5vw,34px);letter-spacing:-0.03em}
h4{font-size:19px;letter-spacing:-0.022em}
p{color:var(--text-2)}
.lede{font-size:clamp(18px,1.35vw,21px);line-height:1.55;color:var(--text-2);letter-spacing:-0.012em}

.wrap{max-width:var(--container);margin:0 auto;padding:0 40px}
.wrap-mid{max-width:960px;margin:0 auto;padding:0 40px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 40px}

.section{padding:140px 0}
.section-sm{padding:88px 0}
.section-xs{padding:56px 0}
.soft{background:var(--soft)}
.dark{background:var(--ink);color:#fff}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark p{color:#96A3B4}

/* ── Buttons ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;font-size:16px;font-weight:600;letter-spacing:-0.014em;
  border-radius:100px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.btn-p{background:var(--grad);color:#0B2A24;box-shadow:0 2px 8px rgba(95,199,190,.3)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 28px -6px rgba(95,199,190,.55)}
.btn-d{background:var(--ink);color:#fff}
.btn-d:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-w{background:#fff;color:var(--ink)}
.btn-w:hover{transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(0,0,0,.35)}
.btn-o{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-o:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-go{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-go:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.btn-sm{padding:11px 20px;font-size:14.5px}
.btn-block{width:100%}
.tlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:16px;color:var(--teal-deep);transition:gap .2s var(--ease)}
.tlink:hover{gap:11px}

/* ── Nav ─────────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border-bottom:1px solid var(--line)}
header.site.on-dark{background:var(--ink);border-bottom-color:rgba(255,255,255,.08)}
.nav{max-width:var(--container);margin:0 auto;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.nav .brand img{height:30px}
.on-dark .brand img{filter:brightness(0) invert(1)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{font-size:15px;font-weight:500;color:var(--text-2);padding:9px 15px;border-radius:100px;transition:color .18s,background .18s}
.nav-links a:hover{color:var(--ink);background:var(--soft)}
.nav-links a.on{color:var(--ink);font-weight:600}
.on-dark .nav-links a{color:#9AA6B6}
.on-dark .nav-links a:hover{color:#fff;background:rgba(255,255,255,.09)}
.on-dark .nav-links a.on{color:#fff}
.nav-r{display:flex;align-items:center;gap:16px}
.nav-r .lg{font-size:15px;font-weight:500;color:var(--text-2)}
.nav-r .lg:hover{color:var(--ink)}
.on-dark .nav-r .lg{color:#9AA6B6}
.on-dark .nav-r .lg:hover{color:#fff}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:20px;height:1.8px;background:var(--ink);margin:4.5px 0;border-radius:2px}
.on-dark .burger span{background:#fff}

/* ── Cinematic hero ──────────────────────────────────── */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:104px 0 0}
.hero::before{content:"";position:absolute;top:-30%;right:-8%;width:70%;height:120%;
  background:radial-gradient(ellipse at center,rgba(95,199,190,.20),rgba(95,199,190,0) 62%);pointer-events:none}
.hero-inner{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:56px;align-items:center;padding-bottom:104px}
.hero h1{color:#fff;max-width:13ch;margin-bottom:26px;text-wrap:balance}
.hero .lede{color:#A8B4C4;max-width:44ch;margin-bottom:38px}
.hero-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero-cta .tlink{color:#fff}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 9px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);font-size:13.5px;font-weight:500;color:#C3CEDC;margin-bottom:30px}
.pill b{display:inline-flex;align-items:center;padding:3px 9px;border-radius:100px;background:var(--grad);color:#0B2A24;font-size:11.5px;font-weight:700}
.hero-sig{display:flex;gap:30px;flex-wrap:wrap;margin-top:40px;padding-top:30px;border-top:1px solid rgba(255,255,255,.1)}
.hero-sig div{font-size:13.5px;color:#8593A6;display:flex;align-items:center;gap:8px}
.hero-sig svg{color:var(--teal);flex-shrink:0}

/* ── Product UI mockup ───────────────────────────────── */
.ui{background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-3);color:var(--text)}
.ui-glow{box-shadow:var(--sh-3),var(--sh-glow)}
.ui-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--soft);border-bottom:1px solid var(--line)}
.ui-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block}
.ui-bar .u-title{margin-left:10px;font-size:12px;font-weight:600;color:var(--text-3)}
.ui-body{display:grid;grid-template-columns:172px minmax(0,1fr)}
.ui-side{background:var(--soft);border-right:1px solid var(--line);padding:16px 12px}
.ui-side .s-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-xs);font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:2px}
.ui-side .s-item.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.ui-side .s-item i{width:15px;height:15px;border-radius:4px;background:var(--line-2);flex-shrink:0;display:block}
.ui-side .s-item.on i{background:var(--teal-deep)}
.ui-main{padding:20px 22px}
.ui-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}
.ui-h h5{font-size:16px;font-weight:700;letter-spacing:-.024em}
.ui-h .sub{font-size:12.5px;color:var(--text-3);margin-top:2px}
.tag{padding:5px 11px;border-radius:100px;font-size:11.5px;font-weight:600;white-space:nowrap}
.tag-live{background:var(--teal-pale);color:var(--teal-deep)}
.tag-amber{background:#FDF3E4;color:#B8781F}
.tag-coral{background:#FCEDEA;color:#C24E38}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .l{display:flex;align-items:center;gap:11px;min-width:0}
.row .sw{width:8px;height:26px;border-radius:3px;flex-shrink:0}
.row .nm{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .mt{font-size:11.5px;color:var(--text-3);margin-top:1px}
.row .n{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0;letter-spacing:-.02em}
.bars{display:flex;align-items:flex-end;gap:6px;height:74px;margin:6px 0 4px}
.bars i{flex:1;border-radius:4px 4px 0 0;background:var(--teal-pale);display:block}
.bars i.hi{background:var(--teal-deep)}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.mini div{background:var(--soft);border-radius:var(--r-sm);padding:11px 12px}
.mini .k{font-size:11px;color:var(--text-3);font-weight:500}
.mini .v{font-size:19px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:2px}

.phone{width:250px;max-width:100%;border:9px solid var(--ink);border-radius:38px;background:#fff;overflow:hidden;box-shadow:var(--sh-3);flex-shrink:0}
.phone-in{padding:16px 15px 20px}
.phone-st{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-3);margin-bottom:14px;font-weight:500}

/* ── Logos ───────────────────────────────────────────── */
.proof-bar{padding:34px 0;border-bottom:1px solid var(--line)}
.proof-bar .cap{text-align:center;font-size:13px;color:var(--text-3);font-weight:500;margin-bottom:22px}
.logos{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.logos span{font-size:16px;font-weight:700;color:#AEB8C4;letter-spacing:-.02em;white-space:nowrap}

/* ── Section heads ───────────────────────────────────── */
.shead{max-width:660px;margin-bottom:64px}
.shead.mid{margin-left:auto;margin-right:auto;text-align:center}
.shead h2{margin-bottom:18px}
.shead p{font-size:19px;line-height:1.55}
.kick{display:inline-block;font-size:14px;font-weight:600;color:var(--teal-deep);margin-bottom:14px}

/* ── Problem → solution ──────────────────────────────── */
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:36px;align-items:center}
.vs-card{border-radius:var(--r-lg);padding:38px 34px}
.vs-bad{background:var(--soft);border:1px solid var(--line)}
.vs-good{background:var(--ink);color:#fff;box-shadow:var(--sh-3)}
.vs-card h4{margin-bottom:20px;font-size:17px}
.vs-good h4{color:#fff}
.vs-card li{display:flex;gap:12px;padding:12px 0;font-size:15.5px;line-height:1.45;border-top:1px solid var(--line)}
.vs-good li{border-top-color:rgba(255,255,255,.1);color:#C7D1DD}
.vs-card li:first-of-type{border-top:0}
.vs-card li svg{flex-shrink:0;margin-top:2px}
.vs-bad li svg{color:var(--coral)}
.vs-good li svg{color:var(--mint)}
.vs-arrow{width:46px;height:46px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#0B2A24;flex-shrink:0}

/* ── Feature rows ────────────────────────────────────── */
.frow{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:80px;align-items:center;padding:96px 0;border-top:1px solid var(--line)}
.frow.first{border-top:0;padding-top:0}
.frow.flip .fviz{order:-1}
.frow.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.frow h3{margin-bottom:18px;max-width:16ch}
.frow p{font-size:17.5px;line-height:1.6;margin-bottom:26px;max-width:46ch}
.fchecks li{display:flex;gap:12px;padding:11px 0;font-size:15.5px;color:var(--text);align-items:flex-start}
.fchecks svg{color:var(--teal-deep);flex-shrink:0;margin-top:3px}
.fchecks{margin-bottom:30px}

/* ── Stats ───────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.stat{padding:44px 38px;border-right:1px solid var(--line);background:var(--paper)}
.stat:last-child{border-right:0}
.stat .n{font-size:clamp(44px,4.6vw,60px);font-weight:700;letter-spacing:-.045em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.stat .l{font-size:15.5px;color:var(--text-2);margin-top:14px;line-height:1.45}

/* ── Bento ───────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bx{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px;transition:box-shadow .28s var(--ease),transform .28s var(--ease),border-color .28s var(--ease)}
.bx:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:var(--line-2)}
.bx-2{grid-column:span 2}
.bx-dark{background:var(--ink);color:#fff;border-color:transparent}
.bx-dark h4{color:#fff}.bx-dark p{color:#96A3B4}
.bic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.bx-dark .bic{background:rgba(127,206,210,.16);color:var(--teal)}
.bx h4{margin-bottom:9px}
.bx p{font-size:15px;line-height:1.55}

/* ── Testimonial ─────────────────────────────────────── */
.quote-hero{text-align:center;max-width:900px;margin:0 auto}
.quote-hero blockquote{font-size:clamp(24px,2.9vw,38px);font-weight:600;line-height:1.28;letter-spacing:-.032em;color:#fff;margin-bottom:32px}
.stars{display:flex;gap:3px;justify-content:center;margin-bottom:26px}
.stars svg{width:17px;height:17px;fill:var(--amber)}
.who{display:flex;align-items:center;gap:13px;justify-content:center}
.av{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);flex-shrink:0}
.av-sm{width:38px;height:38px;border-radius:50%;background:var(--soft-2);border:1px solid var(--line);flex-shrink:0}
.who .nm{font-weight:600;font-size:15.5px;color:#fff;text-align:left}
.who .rl{font-size:13.5px;color:#8593A6;text-align:left}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px}
.tcard .stars{justify-content:flex-start;margin-bottom:16px}
.tcard p{font-size:15.5px;color:var(--text);line-height:1.55;margin-bottom:20px}
.tcard .who{justify-content:flex-start}
.tcard .who .nm{color:var(--ink)}
.tcard .who .rl{color:var(--text-3)}

/* ── Steps ───────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{padding-top:26px;border-top:2px solid var(--line);position:relative}
.step::before{content:"";position:absolute;top:-2px;left:0;width:44px;height:2px;background:var(--grad)}
.step .sn{font-size:13px;font-weight:700;color:var(--teal-deep);font-variant-numeric:tabular-nums;margin-bottom:10px;display:block}
.step h4{margin-bottom:9px}
.step p{font-size:15px;line-height:1.55}

/* ── CTA ─────────────────────────────────────────────── */
.cta{background:var(--grad);border-radius:var(--r-xl);padding:80px 64px;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-c{max-width:560px;position:relative;z-index:2}
.cta h2{color:#0B2A24;margin-bottom:14px}
.cta p{color:#164039;opacity:.86;font-size:17.5px}
.cta .btns{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:2}
.strip{background:var(--grad);padding:28px 0}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.strip p{color:#0B2A24;font-size:19px;font-weight:600;letter-spacing:-.022em;margin:0}

/* ── Footer ──────────────────────────────────────────── */
footer.site{background:var(--ink);color:#8593A6;padding:80px 0 36px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:44px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:28px}
.flogo{font-size:22px;font-weight:700;letter-spacing:-.03em;display:inline-block;margin-bottom:16px}
.flogo .a{color:var(--teal)}.flogo .b{color:#fff}
.fgrid>div>p{font-size:14.5px;color:#71809A;max-width:30ch;line-height:1.6}
.fcol h5{font-size:13.5px;color:#fff;margin-bottom:16px;font-weight:600}
.fcol a{display:block;font-size:14.5px;padding:6px 0;color:#8593A6;transition:color .18s}
.fcol a:hover{color:var(--teal)}
.fbot{display:flex;justify-content:space-between;font-size:13.5px;color:#5B6980;flex-wrap:wrap;gap:12px}

/* ── Page hero ───────────────────────────────────────── */
.phero{padding:96px 0 64px;border-bottom:1px solid var(--line)}
.phero h1{max-width:17ch;margin-bottom:20px}
.phero .lede{max-width:56ch}

/* ── Sticky sub-nav ──────────────────────────────────── */
.subnav{position:sticky;top:79px;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{padding:16px 4px;margin-right:26px;font-size:15px;font-weight:500;color:var(--text-2);border-bottom:2px solid transparent;white-space:nowrap;transition:color .18s,border-color .18s}
.subnav a:hover{color:var(--ink)}

/* ── FAQ ─────────────────────────────────────────────── */
.faq-g{max-width:820px;margin:0 auto}
.faq-cat{margin-bottom:52px}
.faq-cat h3{font-size:20px;margin-bottom:6px;letter-spacing:-.024em}
.faq-cat .cd{font-size:14.5px;color:var(--text-3);margin-bottom:20px}
details.q{border-top:1px solid var(--line)}
details.q:last-of-type{border-bottom:1px solid var(--line)}
details.q summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:17px;font-weight:600;color:var(--ink);position:relative;letter-spacing:-.02em;transition:color .18s}
details.q summary::-webkit-details-marker{display:none}
details.q summary:hover{color:var(--teal-deep)}
details.q summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-8px;
  border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(45deg);transition:transform .24s var(--ease)}
details.q[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
details.q .a{padding:0 40px 24px 0;font-size:16px;line-height:1.65;color:var(--text-2)}
details.q .a p+p{margin-top:12px}

/* ── Blog ────────────────────────────────────────────── */
.feat-post{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:52px;align-items:center;padding-bottom:72px;margin-bottom:72px;border-bottom:1px solid var(--line)}
.pmeta{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-3);margin-bottom:16px;flex-wrap:wrap}
.pcat{padding:5px 12px;border-radius:100px;background:var(--teal-pale);color:var(--teal-deep);font-size:12.5px;font-weight:600}
.feat-post h2{font-size:clamp(28px,3vw,40px);margin-bottom:16px}
.feat-post p{font-size:17.5px;line-height:1.6;margin-bottom:24px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 26px}
.pcard{display:block;transition:transform .28s var(--ease)}
.pcard:hover{transform:translateY(-4px)}
.pthumb{aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;margin-bottom:18px;background:var(--soft-2);border:1px solid var(--line)}
.pcard h4{font-size:19px;line-height:1.28;margin-bottom:9px;letter-spacing:-.026em;transition:color .18s}
.pcard:hover h4{color:var(--teal-deep)}
.pcard p{font-size:15px;line-height:1.55}

.ph{background:repeating-linear-gradient(135deg,#EDF1F3,#EDF1F3 11px,#E5EAEE 11px,#E5EAEE 22px);
  display:flex;align-items:center;justify-content:center;color:#94A1AF;text-align:center;height:100%}
.ph .pin{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px}
.ph .pl{font-size:12.5px;font-weight:500;max-width:26ch;line-height:1.4}
.ph .pd{font-size:11px;opacity:.72}

/* ── Forms ───────────────────────────────────────────── */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:38px;box-shadow:var(--sh-1)}
.fld{margin-bottom:18px}
.fld label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);font-family:inherit;font-size:15.5px;color:var(--text);background:#fff;transition:border-color .18s,box-shadow .18s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--teal-deep);box-shadow:0 0 0 3px rgba(46,154,160,.13)}
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Pricing ─────────────────────────────────────────── */
.pgrid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.pcard-p{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:38px 32px;display:flex;flex-direction:column}
.pcard-p.hot{border-color:var(--ink);box-shadow:var(--sh-2)}
.pcard-p .tg{font-size:13.5px;font-weight:600;color:var(--teal-deep);margin-bottom:10px}
.pcard-p h3{font-size:23px;margin-bottom:10px}
.pcard-p .pd{font-size:15px;color:var(--text-2);margin-bottom:26px;min-height:46px;line-height:1.5}
.pcard-p ul{margin-bottom:30px;flex-grow:1}
.pcard-p li{font-size:15px;padding:10px 0;border-top:1px solid var(--line);color:var(--text);display:flex;gap:10px;align-items:flex-start}
.pcard-p li:first-child{border-top:0}
.pcard-p li svg{color:var(--teal-deep);flex-shrink:0;margin-top:3px}

/* ── Motion ──────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:52px;padding-bottom:88px}
  .hero h1{max-width:18ch}
  .frow,.frow.flip,.frow.even{grid-template-columns:minmax(0,1fr);gap:44px;padding:72px 0}
  .frow.flip .fviz{order:0}
  .feat-post{grid-template-columns:minmax(0,1fr);gap:32px}
  .fgrid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-r .lg{display:none}
  .wrap,.wrap-mid,.wrap-narrow{padding:0 24px}
  .nav{padding:16px 24px}
  .section{padding:88px 0}
  .section-sm{padding:64px 0}
  .vs{grid-template-columns:minmax(0,1fr);gap:20px}
  .vs-arrow{transform:rotate(90deg);margin:0 auto}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bx-2{grid-column:span 1}
  .tgrid,.steps,.pgrid,.pgrid-3{grid-template-columns:minmax(0,1fr)}
  .cta{padding:52px 32px;flex-direction:column;text-align:center}
  .cta-c{max-width:none}
  .cta .btns{justify-content:center}
  .strip .wrap{flex-direction:column;text-align:center}
  .ui-body{grid-template-columns:minmax(0,1fr)}
  .ui-side{display:none}
  .fld-2{grid-template-columns:minmax(0,1fr)}
  .logos{justify-content:center;gap:22px}
  .logos span{font-size:14px}
  .subnav{top:79px}
}
@media (max-width:560px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  h1{font-size:38px}
  .hero{padding-top:72px}
  .cta{padding:44px 24px}
  .mini{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
}

/* ── A11y ────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--teal-deep);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:999}
.skip:focus{left:0}

/* demo page split */
.demo-split{gap:64px;align-items:start;padding-bottom:0}
@media(max-width:1080px){.demo-split{gap:40px}}

/* ═══════════════════════════════════════════════════════════
   v3.1 — SIGNATURE MOMENTS
   ═══════════════════════════════════════════════════════════ */

/* ── Scroll progress ─────────────────────────────────── */
.sprog{position:fixed;top:0;left:0;height:2px;width:0;z-index:400;background:var(--grad);
  box-shadow:0 0 12px rgba(95,199,190,.7);transition:width .1s linear}

/* ── Aurora + grain for dark sections ────────────────── */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora b{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5;
  animation:drift 22s ease-in-out infinite}
.aurora b:nth-child(1){width:620px;height:620px;top:-22%;right:-6%;
  background:radial-gradient(circle,rgba(95,199,190,.55),transparent 68%)}
.aurora b:nth-child(2){width:540px;height:540px;bottom:-28%;left:6%;
  background:radial-gradient(circle,rgba(143,222,158,.34),transparent 68%);animation-delay:-8s}
.aurora b:nth-child(3){width:420px;height:420px;top:34%;left:44%;
  background:radial-gradient(circle,rgba(59,91,224,.26),transparent 68%);animation-delay:-15s}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(4%,-6%) scale(1.12)}
  66%{transform:translate(-5%,5%) scale(.92)}
}
.grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.grid-lines{position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 32% 42%,#000,transparent);
  mask-image:radial-gradient(ellipse 78% 62% at 32% 42%,#000,transparent)}

/* ── Live dashboard bits ─────────────────────────────── */
.pdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal-deep);
  margin-right:6px;position:relative;vertical-align:middle}
.pdot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--teal-deep);
  animation:ping 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.8}75%,100%{transform:scale(3);opacity:0}}

.prog-track{height:5px;border-radius:99px;background:var(--soft-2);overflow:hidden;margin-top:3px}
.prog-fill{height:100%;border-radius:99px;background:var(--grad);width:0;transition:width 1.4s var(--ease)}
.in .prog-fill,.ui-live .prog-fill{width:var(--w,70%)}

.row.flash{animation:flash 2.4s var(--ease)}
@keyframes flash{0%{background:rgba(95,199,190,.16)}100%{background:transparent}}

/* ── Floating notification cards ─────────────────────── */
.floatwrap{position:relative}
.fcard{position:absolute;z-index:5;background:rgba(255,255,255,.97);border-radius:14px;
  padding:12px 15px;box-shadow:0 18px 44px -14px rgba(7,12,22,.45);display:flex;align-items:center;gap:11px;
  border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(14px) scale(.96);animation:pop .7s var(--ease) forwards}
.fcard .fi{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fcard .ft{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:-.018em;white-space:nowrap}
.fcard .fs{font-size:11px;color:var(--text-3);margin-top:1px;white-space:nowrap}
@keyframes pop{to{opacity:1;transform:translateY(0) scale(1)}}
.fcard.f1{top:2%;left:-15%;animation-delay:.7s}
.fcard.f2{bottom:12%;left:-16%;animation-delay:1.5s}
.fcard.f3{top:58%;right:-12%;animation-delay:2.2s}

/* ── Marquee ─────────────────────────────────────────── */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-t{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee-t{animation-play-state:paused}
.marquee-t span{font-size:19px;font-weight:700;color:#AEB8C4;letter-spacing:-.024em;
  padding:0 34px;white-space:nowrap;transition:color .25s}
.marquee-t span:hover{color:var(--navy)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Signature: production pipeline ──────────────────── */
.pipe{position:relative;padding:60px 0 20px}
.pipe-track{position:absolute;top:98px;left:6%;right:6%;height:2px;background:rgba(255,255,255,.13);border-radius:2px}
.pipe-fill{position:absolute;inset:0;width:0;border-radius:2px;background:var(--grad);
  box-shadow:0 0 18px rgba(95,199,190,.8);transition:width 2.6s var(--ease)}
.in .pipe-fill{width:100%}
.pipe-steps{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pnode{text-align:center;padding:0 6px}
.pnode .pk{width:56px;height:56px;margin:0 auto 18px;border-radius:17px;display:flex;align-items:center;justify-content:center;
  background:#0F1726;border:1px solid rgba(255,255,255,.13);color:#5D6B80;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.in .pnode.lit .pk{background:var(--grad);color:#08221C;border-color:transparent;transform:translateY(-4px);
  box-shadow:0 14px 34px -10px rgba(95,199,190,.75)}
.pnode h4{font-size:15.5px;color:#fff;margin-bottom:6px;letter-spacing:-.02em}
.pnode p{font-size:13px;color:#7C8A9E;line-height:1.45;max-width:19ch;margin:0 auto}
.pnode .pt{display:block;font-size:11.5px;font-weight:700;color:var(--teal);margin-top:9px;
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .5s var(--ease)}
.in .pnode.lit .pt{opacity:1}

/* ── Interactive product tabs ────────────────────────── */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.tab{padding:11px 20px;border-radius:100px;border:1.5px solid var(--line);background:#fff;
  font-family:inherit;font-size:14.5px;font-weight:600;color:var(--text-2);cursor:pointer;
  transition:all .2s var(--ease);letter-spacing:-.014em}
.tab:hover{border-color:var(--text-3);color:var(--ink)}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tpanel{display:none}
.tpanel.on{display:block;animation:fadein .45s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Bento upgrades ──────────────────────────────────── */
.bx{position:relative;overflow:hidden}
.bx-glow::before{content:"";position:absolute;top:-60%;right:-30%;width:70%;height:180%;
  background:radial-gradient(ellipse,rgba(95,199,190,.16),transparent 66%);pointer-events:none}
.spark{display:flex;align-items:flex-end;gap:4px;height:44px;margin-top:18px}
.spark i{flex:1;border-radius:3px 3px 0 0;background:var(--teal-pale);display:block;height:20%;
  transition:height .9s var(--ease)}
.bx-dark .spark i{background:rgba(127,206,210,.22)}
.in .spark i{height:var(--h,50%)}
.in .spark i.hi{background:var(--teal-deep)}
.in .bx-dark .spark i.hi{background:var(--teal)}
.ring{width:72px;height:72px;position:relative;margin-bottom:18px}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring .bg{stroke:var(--soft-2)}
.bx-dark .ring .bg{stroke:rgba(255,255,255,.13)}
.ring .fg{stroke:url(#rg);stroke-dasharray:201;stroke-dashoffset:201;transition:stroke-dashoffset 1.6s var(--ease)}
.in .ring .fg{stroke-dashoffset:var(--off,60)}
.ring .rv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chip{padding:5px 11px;border-radius:100px;background:var(--soft);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--text-2)}
.bx-dark .chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#B6C2D2}

/* ── Gradient-border card ────────────────────────────── */
.gcard{position:relative;border-radius:var(--r-lg);padding:1.5px;background:linear-gradient(140deg,rgba(95,199,190,.75),rgba(143,222,158,.28) 42%,var(--line) 76%)}
.gcard>div{background:#fff;border-radius:calc(var(--r-lg) - 1.5px);height:100%}

/* ── Stat upgrades ───────────────────────────────────── */
.stat{position:relative;overflow:hidden;transition:background .3s var(--ease)}
.stat:hover{background:var(--soft)}
.stat .n{display:flex;align-items:baseline;gap:2px}

/* ── Hover lift on UI mockups ────────────────────────── */
.ui{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.fviz .ui:hover{transform:translateY(-6px);box-shadow:0 14px 24px rgba(7,12,22,.08),0 52px 96px -28px rgba(7,12,22,.28)}

/* ── Section eyebrow rule ────────────────────────────── */
.kick{display:inline-flex;align-items:center;gap:9px}
.kick::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad);display:block}

/* ── Responsive for new bits ─────────────────────────── */
@media (max-width:900px){
  .fcard{display:none}
  .pipe-steps{grid-template-columns:1fr;gap:30px}
  .pipe-track{display:none}
  .pnode p{max-width:32ch}
  .pipe{padding:20px 0}
  .marquee-t span{font-size:16px;padding:0 22px}
  .tabs{gap:6px}
  .tab{padding:9px 15px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .aurora b{animation:none}
  .marquee-t{animation:none}
  .pdot::after{animation:none}
  .fcard{opacity:1;transform:none;animation:none}
  .pipe-fill{transition:none;width:100%}
  .sprog{display:none}
  .tpanel.on{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   v3.2 — VISUAL SPLASH
   ═══════════════════════════════════════════════════════════ */

/* ── 3D perspective device ───────────────────────────── */
.tilt{perspective:2200px;perspective-origin:60% 50%}
.tilt>*{transform:rotateY(-11deg) rotateX(4deg) rotateZ(.6deg);
  transition:transform 1s var(--ease);transform-style:preserve-3d}
.tilt:hover>*{transform:rotateY(-4deg) rotateX(1.5deg) rotateZ(0)}
.tilt-r{perspective-origin:40% 50%}
.tilt-r>*{transform:rotateY(11deg) rotateX(4deg) rotateZ(-.6deg)}
.tilt-r:hover>*{transform:rotateY(4deg) rotateX(1.5deg) rotateZ(0)}

/* ── SIGNATURE: meal container grid ──────────────────── */
.mealgrid-wrap{position:relative;padding:8px 0}
.mealgrid{display:grid;grid-template-columns:repeat(48,1fr);gap:5px}
.mealgrid i{aspect-ratio:1;border-radius:2.5px;background:rgba(255,255,255,.07);display:block;
  transform:scale(.55);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease),background .5s var(--ease)}
.in .mealgrid i{transform:scale(1);opacity:1}
.mealgrid i.a{background:#2E9AA0}
.mealgrid i.b{background:#8FDE9E}
.mealgrid i.c{background:#E8A33D}
.mealgrid i.d{background:#E0674F}
.mealgrid-legend{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px}
.mealgrid-legend div{display:flex;align-items:center;gap:9px;font-size:14px;color:#93A1B4}
.mealgrid-legend b{width:11px;height:11px;border-radius:3px;display:block}
.mealgrid-legend span{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}

/* ── Oversized statement ─────────────────────────────── */
.dark .statement,.statement{text-align:center;max-width:20ch;margin:0 auto;
  font-size:clamp(40px,7.2vw,104px);font-weight:700;line-height:.96;letter-spacing:-.048em;color:#fff}
.statement em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dark .statement-sub,.statement-sub{text-align:center;max-width:52ch;margin:32px auto 0;font-size:19px;line-height:1.55;color:#93A1B4}

/* ── Big stat blocks ─────────────────────────────────── */
.bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.12)}
.bigstat{padding:52px 34px;border-right:1px solid rgba(255,255,255,.12);position:relative}
.bigstat:last-child{border-right:0}
.bigstat .bn{font-size:clamp(52px,6vw,84px);font-weight:700;letter-spacing:-.05em;line-height:.94;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.bigstat .bl{font-size:16px;color:#93A1B4;margin-top:16px;line-height:1.45;max-width:24ch}

/* ── Area chart ──────────────────────────────────────── */
.areachart{width:100%;height:auto;display:block}
.areachart .ln{fill:none;stroke:url(#ag);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2.2s var(--ease)}
.in .areachart .ln{stroke-dashoffset:0}
.areachart .ar{fill:url(#af);opacity:0;transition:opacity 1.2s var(--ease) .6s}
.in .areachart .ar{opacity:1}
.areachart .dt{fill:#fff;stroke:#2E9AA0;stroke-width:2.5;opacity:0;transition:opacity .4s var(--ease) 1.8s}
.in .areachart .dt{opacity:1}

/* ── Fanned phones ───────────────────────────────────── */
.phones{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px;perspective:1800px}
.phones .phone{position:absolute;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.phones .ph-l{transform:translateX(-82%) rotateY(22deg) rotateZ(-6deg) scale(.83);z-index:1;opacity:.96}
.phones .ph-c{transform:translateY(-14px) scale(1.02);z-index:3}
.phones .ph-r{transform:translateX(82%) rotateY(-22deg) rotateZ(6deg) scale(.83);z-index:1;opacity:.96}
.phones:hover .ph-l{transform:translateX(-90%) rotateY(17deg) rotateZ(-4deg) scale(.86)}
.phones:hover .ph-r{transform:translateX(90%) rotateY(-17deg) rotateZ(4deg) scale(.86)}

/* ── Color-blocked panels ────────────────────────────── */
.tint{background:linear-gradient(165deg,#EEF7F6 0%,#F5FAF6 52%,#FFFFFF 100%)}
.tint-2{background:linear-gradient(165deg,#F3F6FA 0%,#FAFBFC 100%)}
.panel-dark{background:var(--ink);border-radius:var(--r-xl);padding:64px 56px;color:#fff;position:relative;overflow:hidden}
.panel-dark h2,.panel-dark h3,.panel-dark h4{color:#fff}
.panel-dark p{color:#93A1B4}

/* ── Glow orb accent ─────────────────────────────────── */
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.orb-teal{background:radial-gradient(circle,rgba(95,199,190,.42),transparent 68%)}
.orb-mint{background:radial-gradient(circle,rgba(143,222,158,.34),transparent 68%)}

/* ── Ticket edge texture ─────────────────────────────── */
.ticket-edge{position:relative}
.ticket-edge::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:10px;
  background:radial-gradient(circle 6px at 6px 10px,transparent 6px,#fff 6.5px) 0 0/12px 10px repeat-x}

/* ── Feature icon tiles, upgraded ────────────────────── */
.bic{position:relative;overflow:hidden}
.bic::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.55),transparent 62%);pointer-events:none}

/* ── Split highlight rows ────────────────────────────── */
.hl-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.hl-row>div{background:#fff;padding:30px 26px;transition:background .3s var(--ease)}
.hl-row>div:hover{background:var(--soft)}
.hl-row .hn{font-size:30px;font-weight:700;letter-spacing:-.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums}
.hl-row .hl{font-size:14.5px;color:var(--text-2);margin-top:9px;line-height:1.45}

@media (max-width:1080px){
  .tilt>*,.tilt-r>*{transform:none}
  .phones{min-height:480px}
  .phones .ph-l{transform:translateX(-70%) rotateY(22deg) scale(.68);opacity:.9}
  .phones .ph-r{transform:translateX(70%) rotateY(-22deg) scale(.68);opacity:.9}
  .bigstats{grid-template-columns:1fr}
  .bigstat{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .bigstat:last-child{border-bottom:0}
  .hl-row{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .mealgrid{grid-template-columns:repeat(24,1fr);gap:4px}
  .phones{min-height:400px}
  .phones .ph-l,.phones .ph-r{display:none}
  .phones .ph-c{transform:none}
  .hl-row{grid-template-columns:1fr}
  .panel-dark{padding:40px 26px}
  .statement{font-size:38px}
}
@media (prefers-reduced-motion:reduce){
  .tilt>*,.tilt-r>*{transform:none}
  .mealgrid i{transform:none;opacity:1}
  .areachart .ln{stroke-dashoffset:0}
  .areachart .ar,.areachart .dt{opacity:1}
}

/* ═══════════════════════════════════════════════════════════
   v4 — BRIGHT. Food is colorful. Dark is now the accent,
   used exactly once, so it actually lands.
   ═══════════════════════════════════════════════════════════ */
:root{
  --cream:#FFF6E9;
  --butter:#FFD98E;
  --peach:#FFE3D0;
  --coral:#F2764F;
  --sky:#DFEFF9;
  --lilac:#E8E4FB;
}

/* ── Light gradient-mesh hero ────────────────────────── */
.hero-lite{position:relative;overflow:hidden;padding:96px 0 0;
  background:
    radial-gradient(60% 62% at 88% 6%,  rgba(255,217,142,.62), transparent 62%),
    radial-gradient(52% 58% at 6% 14%,  rgba(127,206,210,.60), transparent 62%),
    radial-gradient(58% 60% at 74% 82%, rgba(143,222,158,.58), transparent 62%),
    radial-gradient(46% 52% at 22% 92%, rgba(255,227,208,.80), transparent 62%),
    linear-gradient(180deg,#FFFDF9 0%,#FFFFFF 78%);
}
.hero-lite::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(15,22,33,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(15,22,33,.028) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 40% 40%,#000,transparent);
  mask-image:radial-gradient(ellipse 70% 60% at 40% 40%,#000,transparent)}
.hero-lite .wrap{position:relative;z-index:3}
.hero-lite h1{color:var(--ink);max-width:13ch;margin-bottom:24px;text-wrap:balance}
.hero-lite .lede{color:#3D4A5C;max-width:45ch;margin-bottom:36px}
.hero-lite .hero-sig{border-top:1px solid rgba(15,22,33,.11)}
.hero-lite .hero-sig div{color:#54627A}
.hero-lite .hero-sig svg{color:var(--teal-deep)}
.pill-lite{display:inline-flex;align-items:center;gap:9px;padding:6px 15px 6px 6px;border-radius:100px;
  background:rgba(255,255,255,.86);border:1px solid rgba(15,22,33,.09);font-size:13.5px;font-weight:600;
  color:#3D4A5C;margin-bottom:26px;box-shadow:0 3px 12px -4px rgba(15,22,33,.14);backdrop-filter:blur(8px)}
.pill-lite b{display:inline-flex;padding:4px 10px;border-radius:100px;background:var(--ink);color:#fff;font-size:11px;font-weight:700}

/* soft floating blobs for depth */
.blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:1;opacity:.55;
  animation:bob 19s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-4%) scale(1.09)}}

/* ── Bright pipeline ─────────────────────────────────── */
.pipe-lite .pipe-track{background:rgba(15,22,33,.10)}
.pipe-lite .pnode .pk{background:#fff;border:1px solid rgba(15,22,33,.09);color:#93A1B4;
  box-shadow:0 3px 12px -5px rgba(15,22,33,.2)}
.in .pipe-lite .pnode.lit .pk{background:var(--grad);color:#08221C;border-color:transparent;
  box-shadow:0 16px 34px -12px rgba(95,199,190,.6)}
.pipe-lite .pnode h4{color:var(--ink)}
.pipe-lite .pnode p{color:var(--text-2)}
.pipe-lite .pnode .pt{color:var(--teal-deep)}

/* ── Meal grid on light ──────────────────────────────── */
.mealgrid-lite i{background:rgba(15,22,33,.055)}
.mealgrid-lite.mealgrid i.a{background:#2E9AA0}
.mealgrid-lite.mealgrid i.b{background:#5FBF7A}
.mealgrid-lite.mealgrid i.c{background:#F0A93C}
.mealgrid-lite.mealgrid i.d{background:#EE6C4D}
.mealgrid-legend-lite div{color:var(--text-2)}
.mealgrid-legend-lite span{color:var(--ink)}

/* ── Warm / colour panels ────────────────────────────── */
.warm{background:linear-gradient(165deg,#FFF7EC 0%,#FFFCF6 60%,#FFFFFF 100%)}
.mint{background:linear-gradient(165deg,#EDF9F3 0%,#F6FCF8 62%,#FFFFFF 100%)}
.sky-bg{background:linear-gradient(165deg,#EFF6FB 0%,#F9FCFE 62%,#FFFFFF 100%)}

/* colourful icon tiles */
.bic-teal{background:#E4F5F5;color:#227E84}
.bic-mint{background:#E6F7EA;color:#2F8B4E}
.bic-amber{background:#FFF2DC;color:#B87A16}
.bic-coral{background:#FFEAE2;color:#C9512F}
.bic-sky{background:#E6F1FA;color:#2C6EA0}
.bic-lilac{background:#EFEBFD;color:#5B47C4}

/* ── Colour-blocked vs cards ─────────────────────────── */
.vs-bad{background:#FFF3EE;border:1px solid #FBDCCF}
.vs-bad li{border-top-color:#FBDCCF}
.vs-bad li svg{color:var(--coral)}
.vs-good{background:linear-gradient(160deg,#0E1A2B,#0A1220);color:#fff}

/* ── Big stats on light ──────────────────────────────── */
.bigstats-lite{border-top:1px solid var(--line)}
.bigstats-lite .bigstat{border-right:1px solid var(--line)}
.bigstats-lite .bigstat:last-child{border-right:0}
.bigstats-lite .bl{color:var(--text-2)}

/* ── Chunky rounded mega-panel ───────────────────────── */
.mega{border-radius:40px;padding:64px 56px;position:relative;overflow:hidden}
.mega-cream{background:linear-gradient(150deg,#FFF3DF 0%,#FFE9CC 100%)}
.mega-mint{background:linear-gradient(150deg,#E4F7EC 0%,#D6F0E2 100%)}

/* ── Step cards, colourful ───────────────────────────── */
.step{border-top:3px solid var(--line)}
.step::before{height:3px;width:58px}
.step-1{border-top-color:#BFE7E8}
.step-2{border-top-color:#C6EBCF}
.step-3{border-top-color:#FFDFA8}

@media (max-width:1080px){
  .hero-lite{padding-top:64px}
  .bigstats-lite .bigstat{border-right:0;border-bottom:1px solid var(--line)}
  .bigstats-lite .bigstat:last-child{border-bottom:0}
}
@media (max-width:900px){ .mega{padding:44px 28px;border-radius:28px} }
@media (prefers-reduced-motion:reduce){ .blob{animation:none} }

/* fix: light hero inherits dark-hero link colour */
.hero-lite .hero-cta .tlink{color:var(--teal-deep)}
.hero-lite .hero-cta .tlink:hover{color:var(--ink)}
/* floating cards need a touch more definition on light */
.hero-lite .fcard{box-shadow:0 16px 40px -12px rgba(15,22,33,.28);border:1px solid rgba(15,22,33,.07)}

/* ═══════════════════════════════════════════════════════════
   v4.1 — SPACING & ALIGNMENT SWEEP
   Vertical rhythm: sections 140 / 88 / 28. Heading→content 64.
   ═══════════════════════════════════════════════════════════ */

/* Statement section back onto the 140 rhythm */
.section.dark.statement-sec{padding:140px 0}

/* Pipeline: shead(24) + pipe pad(40) = 64 optical gap */
.pipe{padding:40px 0 20px}

/* Phones: centre phone back in flow so the container hugs its content
   (all-absolute children left a 520px empty box → 140px dead gap) */
.phones{min-height:0;padding:4px 0}
.phones .ph-c{position:relative}

/* Large panels share one padding scale */
.cta{padding:64px 56px}

/* Gap scale: 8 / 16 / 20 / 24 / 32 */
.vs{gap:32px}

/* Heading→content: one value everywhere */
.shead{margin-bottom:64px}
.shead-tight{margin-bottom:24px}   /* used where the next block has its own top padding */
.shead-snug{margin-bottom:56px}    /* used where the next block has ~8px of its own */

/* Optical: centred sheads keep their lede centred too */
.shead.mid p{margin-left:auto;margin-right:auto}

/* Bento/step/card internal rhythm */
.bx h4{margin-bottom:10px}
.step{padding-top:24px}

@media (max-width:900px){
  .section.dark.statement-sec{padding:88px 0}
  .cta{padding:52px 28px}
}
/* centre phone carries a -14px lift; pad to keep the optical gap at ~64 */
.phones{padding:20px 0 4px}
/* one page-hero rhythm across every inner page */
.phero{padding:88px 0 76px}
@media (max-width:900px){ .phero{padding:60px 0 52px} }
@media (max-width:900px){
  /* large panels match each other on mobile too */
  .cta{padding:44px 28px}
  /* reclaim width on narrow screens */
  .bx{padding:28px 24px}
  .vs-card{padding:30px 26px}
  .panel{padding:30px 24px}
}

/* ═══════════════════════════════════════════════════════════
   v4.2 — a11y: heading levels corrected in markup.
   These class-scoped sizes keep the visual scale identical.
   ═══════════════════════════════════════════════════════════ */
.ui-t{font-size:16px;font-weight:700;letter-spacing:-.024em;color:var(--ink);line-height:1.04}
.bx h3,.step h3,.pnode h3,.app-point h3,.vs-card h3,.pcard h3{
  font-size:19px;letter-spacing:-.022em;line-height:1.04}
.pcard h3{font-size:19px;line-height:1.28;margin-bottom:9px}
.pcard:hover h3{color:var(--teal-deep)}
.vs-card h3{font-size:17px;margin-bottom:20px}
.vs-good h3{color:#fff}
.step h3{margin-bottom:9px}
.bx h3{margin-bottom:10px}
.pnode h3{font-size:15.5px;color:var(--ink);margin-bottom:6px}
.dark .pnode h3{color:#fff}
.faq-cat h2{font-size:20px;letter-spacing:-.024em;margin-bottom:6px}
.pcard-p h2{font-size:23px;letter-spacing:-.03em;margin-bottom:10px}
.panel h2{font-size:20px;letter-spacing:-.024em}
.frow h2{font-size:clamp(24px,2.5vw,34px);letter-spacing:-.03em;margin-bottom:18px;max-width:16ch}
.demo-step h3{font-size:19px;letter-spacing:-.022em;margin-bottom:5px}
/* footer column labels are nav chrome, not document headings */
.fcol-h{font-size:13.5px;color:#fff;margin-bottom:16px;font-weight:600}
/* visually hidden but available to screen readers */
.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}

/* ═══════════════════════════════════════════════════════════
   v5 — ON-BRAND PALETTE. Yellow/amber removed entirely.
   Navy · teal · mint only, per the logo.
   ═══════════════════════════════════════════════════════════ */
:root{
  --sea:#1F6B70;      /* deep teal */
  --leaf:#4FA97B;     /* mid green */
  --sprout:#8FDE9E;   /* mint */
  --slate:#5B7089;    /* muted navy-grey */
  --mist:#EAF4F6;
  --shell:#F2F8F7;
}

/* Hero mesh: teal / mint / soft sky — no butter */
.hero.hero-lite,.hero-lite{
  background:
    radial-gradient(58% 60% at 88% 6%,  rgba(127,206,210,.55), transparent 62%),
    radial-gradient(52% 58% at 6% 14%,  rgba(143,222,158,.50), transparent 62%),
    radial-gradient(56% 58% at 74% 84%, rgba(95,199,190,.42), transparent 62%),
    radial-gradient(46% 52% at 20% 92%, rgba(223,239,249,.85), transparent 62%),
    linear-gradient(180deg,#FBFEFE 0%,#FFFFFF 78%);
}

/* Warm/cream panels -> brand tints */
.warm{background:linear-gradient(165deg,#EDF7F8 0%,#F7FCFC 60%,#FFFFFF 100%)}
.mega-cream{background:linear-gradient(150deg,#E7F4F5 0%,#DCEFEE 100%)}

/* Stars in brand teal, not gold */
.stars svg{fill:var(--teal-deep)}

/* Meal grid: brand-family four-colour set */
.mealgrid-lite.mealgrid i.a{background:#1F6B70}
.mealgrid-lite.mealgrid i.b{background:#4FA97B}
.mealgrid-lite.mealgrid i.c{background:#8FDE9E}
.mealgrid-lite.mealgrid i.d{background:#5B7089}

/* Data accents inside product UI */
.tag-amber{background:var(--mist);color:var(--sea)}
.tag-coral{background:#EDF0F4;color:var(--slate)}

/* Icon tiles — brand family */
.bic-amber{background:#E4F3F4;color:#1F6B70}
.bic-coral{background:#E9F5EE;color:#2F8B4E}
.bic-lilac{background:#EAEFF5;color:#42586F}

.vs-bad{background:#F3F6F8;border:1px solid #DFE6EC}
.vs-bad li{border-top-color:#DFE6EC}
.vs-bad li svg{color:var(--slate)}

.step-1{border-top-color:#BFE7E8}
.step-2{border-top-color:#C6EBCF}
.step-3{border-top-color:#CFDCE6}

/* ── Circled word — hugs the text, hand-drawn double pass ── */
.circled{position:relative;display:inline-block;white-space:nowrap;isolation:isolate}
.circled svg{position:absolute;left:-4.5%;top:-14%;width:109%;height:128%;
  overflow:visible;pointer-events:none;z-index:-1}
.circled svg path{fill:none;stroke:var(--teal-deep);stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.circled svg .p1{stroke-width:2.6;stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.15s cubic-bezier(.5,0,.2,1) .25s}
.circled svg .p2{stroke-width:1.9;opacity:.5;stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.15s cubic-bezier(.5,0,.2,1) .42s}
.in .circled svg .p1,.circled.in svg .p1,
.in .circled svg .p2,.circled.in svg .p2{stroke-dashoffset:0}
.dark .circled svg path,.launch .circled svg path{stroke:var(--sprout)}
/* underline variant, for shorter phrases */
.underlined{position:relative;display:inline-block;white-space:nowrap}
.underlined svg{position:absolute;left:-2%;bottom:-.20em;width:104%;height:.34em;
  overflow:visible;pointer-events:none}
.underlined svg path{fill:none;stroke:var(--teal-deep);stroke-width:5;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:600;stroke-dashoffset:600;
  transition:stroke-dashoffset .95s cubic-bezier(.5,0,.2,1) .3s}
.in .underlined svg path,.underlined.in svg path{stroke-dashoffset:0}
.dark .underlined svg path{stroke:var(--sprout)}

/* ── Testimonial cards (photo · stars · quote · name) ── */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px;
  display:flex;flex-direction:column;transition:box-shadow .28s var(--ease),transform .28s var(--ease)}
.tc:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.tc .stars{justify-content:flex-start;margin-bottom:18px}
.tc blockquote{font-size:16.5px;line-height:1.55;color:var(--text);margin-bottom:26px;flex-grow:1;
  letter-spacing:-.012em;font-weight:400}
.tc-who{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--line)}
.tc-ph{width:52px;height:52px;border-radius:50%;flex-shrink:0;object-fit:cover;
  background:repeating-linear-gradient(135deg,#EDF1F3,#EDF1F3 6px,#E4EAEE 6px,#E4EAEE 12px);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#9BAAB8}
.tc-n{font-weight:700;font-size:15.5px;color:var(--ink);letter-spacing:-.018em}
.tc-c{font-size:13.5px;color:var(--text-3);margin-top:2px}

/* ── POS integrations ────────────────────────────────── */
.pos-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.pos-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);height:84px;
  display:flex;align-items:center;justify-content:center;padding:14px;
  font-weight:700;font-size:15px;color:var(--slate);letter-spacing:-.02em;text-align:center;
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
.pos-tile:hover{border-color:var(--teal-deep);transform:translateY(-2px);box-shadow:var(--sh-1)}
.pos-note{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:28px;
  font-size:15px;color:var(--text-2)}
.pos-note svg{color:var(--teal-deep);flex-shrink:0}

/* ── As Seen In logo grid ────────────────────────────── */
.seen{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--shell)}
.seen .cap{text-align:center;font-size:13.5px;color:var(--text-3);font-weight:600;margin-bottom:28px;
  letter-spacing:.01em}
.seen-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:16px;align-items:center}
.seen-grid a,.seen-grid span{display:flex;align-items:center;justify-content:center;height:58px;padding:6px}
.seen-grid img{max-height:38px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .25s var(--ease),opacity .25s var(--ease)}
.seen-grid img:hover{filter:grayscale(0);opacity:1}
/* graceful fallback: alt text reads as a wordmark if the file is absent */
.seen-grid img{font-size:13px;font-weight:700;color:var(--slate);text-align:center;line-height:1.2}

@media (max-width:1080px){
  .tcards{grid-template-columns:1fr}
  .pos-grid{grid-template-columns:repeat(3,1fr)}
  .seen-grid{grid-template-columns:repeat(4,1fr);gap:12px}
}
@media (max-width:560px){
  .pos-grid{grid-template-columns:repeat(2,1fr)}
  .seen-grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){ .circled svg path{stroke-dashoffset:0;transition:none} }
/* logo imgs must not exceed their grid track (width attr is only an aspect hint) */
.seen-grid img{max-width:100%;height:auto}
/* headshot degrades to a neutral circle when the file isn't present yet */
.tc-ph{background-size:cover;background-position:center;background-repeat:no-repeat}
.seen-fallback{font-size:14.5px;font-weight:700;color:var(--slate);opacity:.6;text-align:center;
  letter-spacing:-.02em;line-height:1.25;transition:opacity .25s var(--ease)}
.seen-fallback:hover{opacity:1}

/* ═══════════════════════════════════════════════════════════
   v5.1 — Scrolling "As Seen In" bar with real logos
   ═══════════════════════════════════════════════════════════ */
.seen{padding:52px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--shell);overflow:hidden}
.seen .cap{text-align:center;font-size:13.5px;color:var(--text-3);font-weight:600;
  margin-bottom:30px;letter-spacing:.01em}
.seen-marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.seen-track{display:flex;align-items:center;width:max-content;animation:seenslide 46s linear infinite}
.seen-marquee:hover .seen-track{animation-play-state:paused}
@keyframes seenslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.seen-track .lg{display:flex;align-items:center;justify-content:center;
  padding:0 44px;flex-shrink:0;height:56px}
.seen-track img{width:auto;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.55;transition:filter .3s var(--ease),opacity .3s var(--ease)}
.seen-track .lg:hover img{filter:grayscale(0);opacity:1}
/* optical sizing — wide wordmarks sit shorter than square roundels */
.seen-track img.l-nypost{max-height:44px}
.seen-track img.l-nyt{max-height:27px}
.seen-track img.l-fox{max-height:42px}
.seen-track img.l-bloomberg{max-height:33px}
.seen-track img.l-tribune{max-height:26px}
.seen-track img.l-nbc{max-height:44px}
.seen-track img.l-dailynews{max-height:23px}
.seen-track img.l-abc{max-height:42px}
@media (max-width:900px){
  .seen{padding:38px 0}
  .seen-track .lg{padding:0 26px;height:46px}
  .seen-track img{max-height:34px !important}
  .seen-track img.l-nyt,.seen-track img.l-tribune{max-height:22px !important}
  .seen-track img.l-dailynews{max-height:19px !important}
  .seen-track img.l-bloomberg{max-height:27px !important}
}
@media (prefers-reduced-motion:reduce){ .seen-track{animation:none} }

/* ═══════════════════════════════════════════════════════════
   v6 — Logo navy everywhere · food accents · marketing proof
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#293855;          /* EXACT logo navy */
  --ink-2:#1F2C45;        /* deeper navy for footer */
  --text:#293855;
  --navy:#293855;
  /* food accents — used only on food/kitchen elements */
  --tomato:#D9563C;
  --paprika:#E07A3F;
  --herb:#4FA97B;
  --basil:#2F7D52;
  --cream-f:#F6EFE2;
}
h1,h2,h3,h4,h5{color:var(--ink)}
.dark,.section.dark{background:var(--ink)}
footer.site{background:var(--ink-2)}
header.site.on-dark{background:var(--ink)}
.btn-d{background:var(--ink)}
.btn-d:hover{background:var(--ink-2)}
.vs-good{background:linear-gradient(160deg,#2F4062,#243350)}
.bx-dark{background:var(--ink)}
.phone{border-color:var(--ink)}
.tab.on{background:var(--ink);border-color:var(--ink)}
.pcard-p.hot{border-color:var(--ink)}
.pp.sel{border-color:var(--ink);box-shadow:0 0 0 3px rgba(41,56,85,.09)}
.crumbs .n{background:var(--ink)}
.pnode .pk{background:#2F4062}
.ui-t{color:var(--ink)}

/* trust logos in FULL COLOUR */
.seen-track img{filter:none;opacity:1}
.seen-track .lg:hover img{filter:none;opacity:1;transform:scale(1.05)}
.seen-track img{transition:transform .3s var(--ease)}

/* ── Marketing proof banner ──────────────────────────── */
.proof{background:linear-gradient(150deg,#EAF6F6 0%,#F2FAF7 55%,#FFFFFF 100%);
  border-radius:var(--r-xl);padding:56px 48px;text-align:center;position:relative;overflow:hidden}
.proof .bigstars{display:flex;gap:6px;justify-content:center;margin-bottom:20px}
.proof .bigstars svg{width:30px;height:30px;fill:#F5A623}
.proof .rank{font-size:clamp(30px,3.6vw,46px);font-weight:700;letter-spacing:-.036em;
  color:var(--ink);margin-bottom:12px;line-height:1.05}
.proof .rank em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.proof .sub{font-size:17.5px;color:var(--text-2);max-width:56ch;margin:0 auto}
.proof-meta{display:flex;gap:36px;justify-content:center;flex-wrap:wrap;margin-top:30px;
  padding-top:28px;border-top:1px solid rgba(41,56,85,.12)}
.proof-meta div{text-align:center}
.proof-meta .pm-n{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.proof-meta .pm-l{font-size:13.5px;color:var(--text-3);margin-top:3px}

/* testimonial card stars go gold in the marketing block */
.tc .stars svg{fill:#F5A623}

/* ── Food / menu cards ───────────────────────────────── */
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.mcard:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.mcard-img{aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center}
.mcard-img .plate{width:62%;aspect-ratio:1;border-radius:50%;position:relative;
  box-shadow:inset 0 -8px 22px rgba(0,0,0,.07)}
.mcard-img .plate::after{content:"";position:absolute;inset:16%;border-radius:50%;
  background:rgba(255,255,255,.28)}
.mcard-body{padding:20px 20px 22px}
.mcard h3{font-size:16.5px;margin-bottom:4px;letter-spacing:-.022em}
.mcard .mmeta{font-size:13px;color:var(--text-3);margin-bottom:14px}
.mcard .mrow{display:flex;justify-content:space-between;align-items:center;
  padding-top:13px;border-top:1px solid var(--line)}
.mcard .mcount{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.mcard .mlab{font-size:12.5px;color:var(--text-3)}
.mtag{display:inline-flex;padding:4px 10px;border-radius:100px;font-size:11.5px;font-weight:700;
  letter-spacing:.01em}

/* ── Food accent icon tiles ──────────────────────────── */
.bic-tomato{background:#FBEAE5;color:#B8412A}
.bic-herb{background:#E7F5EC;color:#2F7D52}
.bic-paprika{background:#FCEFE3;color:#B4622A}

@media (max-width:1080px){ .menu-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .menu-grid{grid-template-columns:1fr} .proof{padding:40px 24px} }

/* ═══════════════════════════════════════════════════════════
   v7 — gradient scroll bar · comparison · big-photo testimonials
   ═══════════════════════════════════════════════════════════ */

/* Scroll progress: full-width HMP gradient revealed by scaleX,
   so the gradient never compresses as the bar grows */
.sprog{position:fixed;top:0;left:0;height:4px;width:100%;z-index:400;
  background:linear-gradient(90deg,#5FC7BE 0%,#8FDE9E 35%,#7FCED2 65%,#5FC7BE 100%);
  transform:scaleX(0);transform-origin:0 50%;
  box-shadow:0 0 14px rgba(95,199,190,.75);will-change:transform}

/* ── Comparison table ────────────────────────────────── */
.cmp{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.cmp-row{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr 1fr;align-items:stretch}
.cmp-row+.cmp-row{border-top:1px solid var(--line)}
.cmp-row>div{padding:18px 20px;display:flex;align-items:center;gap:10px;font-size:15px}
.cmp-row>div+div{border-left:1px solid var(--line);justify-content:center;text-align:center}
.cmp-head>div{padding:22px 20px;font-weight:700;font-size:14.5px;letter-spacing:-.015em;
  background:var(--soft);color:var(--ink);align-items:flex-end}
.cmp-row.cmp-head .us{background:var(--ink);color:#fff;position:relative;flex-direction:column;gap:6px;
  justify-content:center;align-items:center}
.cmp-row.cmp-head .us .badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;
  background:var(--grad);color:#0B2A24;letter-spacing:.01em}
.cmp-row .us{background:rgba(95,199,190,.07)}
.cmp-row:last-child .us{border-bottom-right-radius:0}
.cmp-feat{font-weight:600;color:var(--ink)}
.cmp-y{color:#2F8B4E}
.cmp-n{color:#B8412A;opacity:.75}
.cmp-p{color:var(--text-3);font-size:13.5px}
.cmp-note{text-align:center;font-size:14px;color:var(--text-3);margin-top:20px}

/* ── Big-photo scrolling testimonials ────────────────── */
.treel{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 0 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.treel::-webkit-scrollbar{display:none}
.tbig{flex:0 0 clamp(300px,31.5%,420px);scroll-snap-align:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tbig:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.tbig-ph{aspect-ratio:4/3;background-size:cover;background-position:center;
  background-color:var(--soft-2);position:relative}
.tbig-ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(41,56,85,.55))}
.tbig-ph .who{position:absolute;left:22px;right:22px;bottom:18px;z-index:2;
  display:block;text-align:left}
.tbig-ph .nm{color:#fff;font-weight:700;font-size:17px;letter-spacing:-.02em;
  text-shadow:0 1px 8px rgba(0,0,0,.35)}
.tbig-ph .co{color:rgba(255,255,255,.88);font-size:13.5px;margin-top:2px;
  text-shadow:0 1px 8px rgba(0,0,0,.35)}
.tbig-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex-grow:1}
.tbig .stars{justify-content:flex-start;margin-bottom:14px}
.tbig .stars svg{fill:#F5A623}
.tbig blockquote{font-size:16px;line-height:1.55;color:var(--text);letter-spacing:-.01em;flex-grow:1}
.treel-nav{display:flex;gap:10px;justify-content:center;margin-top:6px}
.treel-nav button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--ink);transition:all .2s var(--ease)}
.treel-nav button:hover{border-color:var(--ink);transform:translateY(-2px)}
.treel-nav button:disabled{opacity:.35;cursor:default;transform:none;border-color:var(--line)}

/* ── Contact page ────────────────────────────────────── */
.city{aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:linear-gradient(170deg,#2F4062 0%,#293855 55%,#1F2C45 100%)}
.city svg{position:absolute;inset:0;width:100%;height:100%}
.love{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:100px;
  background:#fff;border:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--ink);
  box-shadow:var(--sh-1)}
.love svg{color:var(--tomato)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.cways{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.cway{border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.cway .ci{width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.cway h3{font-size:16px;margin-bottom:5px}
.cway p{font-size:14px;line-height:1.5}

@media (max-width:1080px){
  .cmp-row{grid-template-columns:1.35fr 1fr 1fr 1fr 1fr}
  .cmp-row>div{padding:14px 12px;font-size:14px}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .tbig{flex-basis:78%}
}
@media (max-width:760px){
  .cmp{border:0;border-radius:0}
  .cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp-scroll .cmp{min-width:780px;border:1px solid var(--line);border-radius:var(--r-lg)}
  .cways{grid-template-columns:1fr}
  .tbig{flex-basis:86%}
}
@media (prefers-reduced-motion:reduce){ .sprog{display:none} }
/* name/company must stack inside the photo overlay */
.tbig-ph .who .nm,.tbig-ph .who .co{display:block}

/* ═══════════════════════════════════════════════════════════
   v7.1 — people / kitchen photography band
   ═══════════════════════════════════════════════════════════ */
.people-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:20px}
.pframe{position:relative;border-radius:var(--r-lg);overflow:hidden;background-size:cover;
  background-position:center;background-color:var(--soft-2);min-height:300px;
  display:flex;align-items:flex-end;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pframe:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.pframe.tall{grid-row:span 2;min-height:100%}
.pframe .ph-fill{position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,#EDF1F3,#EDF1F3 12px,#E4EAEE 12px,#E4EAEE 24px);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;
  color:#93A2B0;text-align:center;padding:22px}
.pframe .ph-fill .pl{font-size:13px;font-weight:600;max-width:24ch;line-height:1.4}
.pframe .ph-fill .pd{font-size:11.5px;opacity:.7}
.pframe .cap{position:relative;z-index:2;width:100%;padding:22px;
  background:linear-gradient(180deg,transparent,rgba(41,56,85,.72));color:#fff}
.pframe .cap b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em}
.pframe .cap span{display:block;font-size:13px;color:rgba(255,255,255,.85);margin-top:2px}
@media (max-width:900px){
  .people-grid{grid-template-columns:1fr}
  .pframe.tall{grid-row:auto}
  .pframe{min-height:240px}
}
.people-grid{grid-auto-rows:minmax(220px,1fr)}
.pframe.tall{grid-row:span 2;min-height:0}

/* ═══════════════════════════════════════════════════════════
   v7.2 — rotating feature pill
   ═══════════════════════════════════════════════════════════ */
.pill-lite{overflow:hidden}
.pill-rot{position:relative;display:inline-block;vertical-align:middle;
  height:1.35em;overflow:hidden}
.pill-rot .track{display:block;transition:transform .58s cubic-bezier(.65,0,.35,1)}
.pill-rot .item{display:block;height:1.35em;line-height:1.35em;white-space:nowrap}
/* width animates so the pill breathes rather than jumping */
.pill-lite{transition:width .58s cubic-bezier(.65,0,.35,1)}
.pill-lite b{flex-shrink:0}
@media (prefers-reduced-motion:reduce){
  .pill-rot .track{transition:none}
  .pill-lite{transition:none}
}
/* each item must measure its own natural width, not the container's */
.pill-rot .item{width:max-content}

/* ═══════════════════════════════════════════════════════════
   v7.3 — features subnav: sit under the real header height,
   and close the void it left above the first category
   ═══════════════════════════════════════════════════════════ */
.subnav{top:79px}
.subnav .wrap{gap:0}
.subnav a{padding:15px 2px;margin-right:30px;font-size:14.5px;font-weight:600;color:var(--text-2)}
.subnav a:hover{color:var(--ink);border-color:var(--line-2)}
.subnav a.on{color:var(--ink);border-color:var(--teal-deep)}
/* first section after the subnav doesn't need a full 140 */
.subnav + .section,
.subnav + section.section{padding-top:76px}
.phero + .subnav{margin-top:0}
@media (max-width:900px){
  .subnav{top:103px}
  .subnav a{margin-right:22px;font-size:14px;padding:13px 2px}
  .subnav + .section,.subnav + section.section{padding-top:52px}
}
/* header must never wrap — a 2-line header broke the sticky subnav offset */
.nav{flex-wrap:nowrap}
@media (max-width:560px){
  .nav{gap:10px;padding:15px 20px}
  .nav .brand img{height:26px}
  .nav-r{gap:8px}
  .nav-r .btn-sm{padding:9px 14px;font-size:13px}
  .burger{padding:6px}
}
@media (max-width:400px){
  .nav .brand img{height:23px}
  .nav-r .btn-sm{padding:8px 12px;font-size:12.5px}
}
/* one offset now works at every width */
.subnav,.subnav{top:79px}
@media (max-width:900px){ .subnav{top:79px} }
/* driven by --hdr-h (set in JS from the real header height) */
.subnav{top:var(--hdr-h,79px)}
@media (max-width:900px){ .subnav{top:var(--hdr-h,79px)} }

/* ═══════════════════════════════════════════════════════════
   v7.4 — food & cooking iconography
   ═══════════════════════════════════════════════════════════ */
.food-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:8px}
.fchip{display:flex;flex-direction:column;align-items:center;gap:11px;padding:22px 12px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);text-align:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.fchip:hover{transform:translateY(-3px);box-shadow:var(--sh-1);border-color:var(--line-2)}
.fchip .fi{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.fchip > span:not([class]){font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.015em;line-height:1.3}
@media (max-width:900px){ .food-strip{grid-template-columns:repeat(3,1fr)} }
@media (max-width:480px){ .food-strip{grid-template-columns:repeat(2,1fr)} }
.bic-teal{background:#E4F3F4;color:#1F6B70}
.bic-mint{background:#E7F7EC;color:#2F8B4E}

/* ═══════════════════════════════════════════════════════════
   v8 — HAPPY MEAL PREP 2.0 LAUNCH
   ═══════════════════════════════════════════════════════════ */

/* Slim announcement bar above the header */
.annobar{position:relative;z-index:250;background:var(--grad);overflow:hidden}
.annobar .wrap{display:flex;align-items:center;justify-content:center;gap:14px;
  padding:11px 40px;flex-wrap:wrap}
.annobar p{margin:0;color:#0B2A24;font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.annobar .tagnew{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;
  background:var(--ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.03em;margin-right:9px}
.annobar a{color:#0B2A24;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.annobar .x{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:0;
  cursor:pointer;color:#0B2A24;opacity:.55;padding:6px;line-height:0}
.annobar .x:hover{opacity:1}
@media (max-width:640px){ .annobar .wrap{padding:10px 44px 10px 20px;font-size:13px} .annobar p{font-size:13px} }

/* Launch section */
.launch{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:140px 0}
.launch h2,.launch h3{color:#fff}
.launch p{color:#A8B6C8}
.launch .wrap{position:relative;z-index:5}
.launch-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:100px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  font-size:13.5px;font-weight:600;color:#DCE7F0;margin-bottom:24px}
.launch-badge .dot2{width:8px;height:8px;border-radius:50%;background:var(--sprout);position:relative}
.launch-badge .dot2::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--sprout);animation:ping 2s cubic-bezier(0,0,.2,1) infinite}
.launch h2{font-size:clamp(40px,6vw,84px);letter-spacing:-.045em;line-height:.98;margin-bottom:22px}
.launch h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.launch .lead{font-size:19.5px;line-height:1.55;max-width:56ch;margin:0 auto 40px;color:#B4C2D2}
.launch-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:64px}

.whatsnew{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left}
.wn{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:26px 24px;transition:transform .3s var(--ease),background .3s var(--ease)}
.wn:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
.wn .wi{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.wn h3{font-size:16.5px;letter-spacing:-.02em;margin-bottom:7px}
.wn p{font-size:14px;line-height:1.55;margin:0}
.wn .ver{font-size:11.5px;font-weight:700;color:var(--sprout);letter-spacing:.04em;display:block;margin-bottom:9px}

/* Confetti */
.confetti{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-24px;display:block;border-radius:1.5px;opacity:0;
  animation:fall linear infinite}
@keyframes fall{
  0%{transform:translateY(-30px) rotate(0deg);opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateY(760px) rotate(680deg);opacity:0}
}

/* Balloons */
.balloons{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.balloon{position:absolute;bottom:-260px;animation:rise linear infinite}
.balloon svg{display:block}
@keyframes rise{
  0%{transform:translateY(0) translateX(0)}
  50%{transform:translateY(-52vh) translateX(22px)}
  100%{transform:translateY(-108vh) translateX(-14px)}
}

@media (max-width:1080px){ .whatsnew{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  .whatsnew{grid-template-columns:1fr}
  .launch{padding:80px 0}
}
@media (prefers-reduced-motion:reduce){
  .confetti,.balloons{display:none}
  .launch-badge .dot2::after{animation:none}
}
/* keep card copy legible when balloons/confetti pass behind */
.wn{background:rgba(20,30,50,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.wn:hover{background:rgba(28,40,64,.72)}
/* real alt logo in the footer */
.flogo-img{height:34px;width:auto;display:block;margin-bottom:18px}

/* ── App store badges + review proof ─────────────────── */
.stores{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.stores a{display:block;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.stores a:hover{transform:translateY(-3px);box-shadow:0 12px 28px -10px rgba(16,21,31,.4)}
.stores img{height:52px;width:auto;display:block;border-radius:9px}
.appproof{display:inline-flex;align-items:center;gap:14px;padding:13px 22px;border-radius:100px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);margin-top:28px;flex-wrap:wrap;
  justify-content:center}
.appproof .stars{margin:0}
.appproof .stars svg{width:17px;height:17px;fill:#F5A623}
.appproof .tx{font-size:15px;color:var(--ink);font-weight:600;letter-spacing:-.014em}
.appproof .tx b{font-weight:800}
@media (max-width:560px){ .stores img{height:46px} .appproof{padding:12px 18px;gap:10px} }

/* ═══════════════════════════════════════════════════════════
   v9 — headline metric block
   ═══════════════════════════════════════════════════════════ */
.metric{position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(150deg,#22314E 0%,#293855 46%,#1D2942 100%);
  padding:72px 64px;color:#fff;box-shadow:var(--sh-3)}
.metric::before{content:"";position:absolute;top:-45%;right:-12%;width:62%;height:190%;
  background:radial-gradient(ellipse,rgba(95,199,190,.30),transparent 62%);pointer-events:none}
.metric::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 20% 40%,#000,transparent);
  mask-image:radial-gradient(ellipse 70% 70% at 20% 40%,#000,transparent)}
.metric-in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.metric .kick{color:var(--sprout)}
.metric .big{font-size:clamp(60px,9vw,132px);font-weight:700;letter-spacing:-.055em;line-height:.92;
  background:linear-gradient(100deg,#7FCED2 0%,#8FDE9E 60%,#BFF0C9 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;display:block}
.metric .big-sub{font-size:clamp(19px,2vw,26px);font-weight:600;color:#fff;letter-spacing:-.025em;
  margin-top:6px;display:block}
.metric p.note{color:#A3B3C7;font-size:17px;line-height:1.55;max-width:44ch;margin-top:20px}
.metric-side{display:grid;gap:14px}
.mside{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-md);padding:20px 22px;backdrop-filter:blur(6px);
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  transition:background .28s var(--ease),transform .28s var(--ease)}
.mside:hover{background:rgba(255,255,255,.1);transform:translateX(3px)}
.mside .mv{font-size:27px;font-weight:700;letter-spacing:-.035em;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1}
.mside .ml{font-size:14px;color:#A3B3C7;text-align:right;max-width:17ch;line-height:1.35}
@media (max-width:1080px){
  .metric{padding:52px 32px}
  .metric-in{grid-template-columns:minmax(0,1fr);gap:36px}
  .metric p.note{max-width:none}
}
@media (max-width:560px){ .metric{padding:40px 22px;border-radius:26px} }

/* ═══════════════════════════════════════════════════════════
   v9.1 — floating book-a-demo bubble
   ═══════════════════════════════════════════════════════════ */
.fab{position:fixed;right:24px;bottom:24px;z-index:300;display:flex;align-items:center;gap:11px;
  padding:14px 22px 14px 16px;border-radius:100px;background:var(--grad);color:#0B2A24;
  font-size:15.5px;font-weight:700;letter-spacing:-.015em;text-decoration:none;
  box-shadow:0 10px 30px -8px rgba(41,56,85,.42),0 0 0 6px rgba(95,199,190,.14);
  opacity:0;transform:translateY(18px) scale(.94);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),box-shadow .25s var(--ease)}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab:hover{box-shadow:0 16px 40px -10px rgba(41,56,85,.5),0 0 0 8px rgba(95,199,190,.2)}
.fab .fi{width:30px;height:30px;border-radius:50%;background:rgba(11,42,36,.12);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fab .pulse{position:absolute;right:16px;top:12px;width:9px;height:9px;border-radius:50%;
  background:var(--tomato);box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.fab .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--tomato);
  animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}
.fab-close{position:fixed;right:20px;bottom:74px;z-index:301;width:24px;height:24px;border-radius:50%;
  border:0;background:var(--ink);color:#fff;cursor:pointer;display:none;
  align-items:center;justify-content:center;line-height:0;opacity:.75}
.fab.show ~ .fab-close{display:flex}
.fab-close:hover{opacity:1}
@media (max-width:560px){
  .fab{right:14px;bottom:14px;padding:12px 18px 12px 13px;font-size:14.5px}
  .fab .fi{width:26px;height:26px}
  .fab-close{right:11px;bottom:60px}
}
@media (prefers-reduced-motion:reduce){
  .fab{transition:none}
  .fab .pulse::after{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   v10 — nav demo CTA · bigger metric numbers · more icons
   ═══════════════════════════════════════════════════════════ */

/* Nav "Book a demo": calendar icon, white text, live dot */
.btn-demo{position:relative;display:inline-flex;align-items:center;gap:9px;
  background:var(--grad);color:#fff !important;font-weight:700;
  padding:11px 22px 11px 16px;border-radius:100px;font-size:14.5px;letter-spacing:-.014em;
  border:1.5px solid transparent;box-shadow:0 2px 10px rgba(41,56,85,.18);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn-demo:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(41,56,85,.42)}
.btn-demo svg{color:#fff;flex-shrink:0}
.btn-demo .live{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;
  background:var(--tomato);border:2px solid #fff;box-shadow:0 0 0 1px rgba(41,56,85,.12)}
.btn-demo .live::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  background:var(--tomato);opacity:.55;animation:blip 1.9s cubic-bezier(0,0,.2,1) infinite}
@keyframes blip{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(2.1);opacity:0}}
.on-dark .btn-demo .live{border-color:var(--ink)}

/* Metric side cards: bigger figures, vertically centred */
.metric-side{align-content:center}
.mside{align-items:center;padding:22px 24px;min-height:86px}
.mside .mv{font-size:clamp(30px,3vw,40px);letter-spacing:-.04em;line-height:1}
.mside .ml{font-size:14.5px;max-width:16ch}

/* Section-head icons */
.hicon{width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;
  justify-content:center;margin-bottom:18px}
.shead.mid .hicon{margin-left:auto;margin-right:auto;display:flex}
.faq-cat .hicon{width:38px;height:38px;border-radius:11px;margin-bottom:12px}
.pcard-p .hicon{width:40px;height:40px;border-radius:12px;margin-bottom:16px}
.dark .hicon,.launch .hicon{background:rgba(143,222,158,.16);color:var(--sprout)}

/* Blog category icon chips */
.pcat{display:inline-flex;align-items:center;gap:6px}
.pcat svg{width:13px;height:13px}

/* Comparison row icons */
.cmp-feat{gap:12px}
.cmp-feat .ri{width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media (max-width:1080px){ .cmp-feat .ri{display:none} }

/* ── Calendly embed ──────────────────────────────────── */
.cal-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:#fff;box-shadow:var(--sh-1);min-height:680px;position:relative}
.calendly-inline-widget{min-width:320px;height:680px}
.cal-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;text-align:center;padding:40px;background:var(--soft)}
.cal-fallback .hicon{margin-bottom:0}
.cal-fallback p{font-size:15px;max-width:38ch}
@media (max-width:560px){ .cal-wrap,.calendly-inline-widget{min-height:600px;height:600px} }

/* ═══════════════════════════════════════════════════════════
   v11 — social proof chip · FOMO · rocket launch · callout
   ═══════════════════════════════════════════════════════════ */

/* "N demos booked today" */
.booked{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  color:var(--text-2);letter-spacing:-.012em;white-space:nowrap}
.booked .bdot{width:8px;height:8px;border-radius:50%;background:#2FA05C;position:relative;flex-shrink:0}
.booked .bdot::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:#2FA05C;
  opacity:.4;animation:blip 2.1s cubic-bezier(0,0,.2,1) infinite}
.booked b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.dark .booked,.launch .booked{color:#9FB0C4}
.dark .booked b,.launch .booked b{color:#fff}
.cta .booked{color:#164039}
.cta .booked b{color:#0B2A24}
.hero-cta-row{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.cta .booked,.launch .booked{justify-content:center}

/* ── FOMO band ───────────────────────────────────────── */
.fomo{position:relative;overflow:hidden;background:linear-gradient(160deg,#2C1F1C 0%,#3A2622 52%,#241A18 100%);
  color:#fff;padding:140px 0}
.fomo h2,.fomo h3{color:#fff}
.fomo::before{content:"";position:absolute;top:-40%;left:-10%;width:60%;height:180%;
  background:radial-gradient(ellipse,rgba(217,86,60,.30),transparent 62%);pointer-events:none}
.fomo .wrap{position:relative;z-index:2}
.fomo .kick{color:#F0A184}
.gapgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.gapcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:30px 28px;backdrop-filter:blur(6px)}
.gapcard .gi{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.gapcard h3{font-size:17.5px;margin-bottom:8px;letter-spacing:-.022em}
.gapcard p{color:#C3B2AC;font-size:15px;line-height:1.55;margin:0}
.gapbar{margin-top:20px;height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.gapbar i{display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,#D9563C,#E8875F);transition:width 1.5s var(--ease) .3s}
.in .gapbar i{width:var(--w,70%)}
.gapnote{font-size:13px;color:#A8938C;margin-top:9px;display:flex;justify-content:space-between}

/* ── Rocket launch ───────────────────────────────────── */
.rocket-sec{position:relative;overflow:hidden;background:linear-gradient(170deg,#1B2740 0%,#293855 55%,#22304C 100%);
  color:#fff;padding:140px 0}
.rocket-sec h2,.rocket-sec h3{color:#fff}
.rocket-sec p{color:#A3B3C7}
.rocket-sec .kick{color:var(--sprout)}
.rocket-stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.rocket-stars i{position:absolute;background:#fff;border-radius:50%;opacity:.45;
  animation:twinkle 3.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.18;transform:scale(.8)}50%{opacity:.7;transform:scale(1)}}
.rocket-sec .wrap{position:relative;z-index:3}
.rocket-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:64px;align-items:center}
.rocket-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:400px}
.rocket-art .rk{animation:hover 4.5s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.rocket-art .flame{transform-origin:50% 0;animation:flicker .28s ease-in-out infinite alternate}
@keyframes flicker{from{transform:scaleY(.86) scaleX(.94);opacity:.85}to{transform:scaleY(1.12);opacity:1}}
.rk-steps{display:grid;gap:16px;margin-top:34px}
.rk-step{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-md);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  transition:background .28s var(--ease),transform .28s var(--ease)}
.rk-step:hover{background:rgba(255,255,255,.09);transform:translateX(4px)}
.rk-step .rn{width:32px;height:32px;border-radius:50%;background:var(--grad);color:#0B2A24;
  font-size:13.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rk-step h3{font-size:16.5px;margin-bottom:4px;letter-spacing:-.02em}
.rk-step p{font-size:14.5px;margin:0;line-height:1.5}
.rk-day{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--sprout);white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-top:5px}

/* ── Feature callout (devices right) ─────────────────── */
.callout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:64px;align-items:center}
.co-list{display:grid;gap:6px;margin-top:26px}
.co-item{display:flex;gap:15px;padding:16px 0;border-top:1px solid var(--line)}
.co-item:first-child{border-top:0}
.co-item .ci2{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.co-item h3{font-size:16.5px;margin-bottom:4px;letter-spacing:-.02em}
.co-item p{font-size:14.5px;line-height:1.5;margin:0}
.devices{position:relative;padding:10px 0 70px}
.devices .lap{position:relative;z-index:1}
.devices .ph{position:absolute;right:-12px;bottom:0;width:29%;z-index:3;
  border:7px solid var(--ink);border-radius:26px;background:#fff;overflow:hidden;
  box-shadow:0 26px 50px -18px rgba(16,21,31,.42)}
@media (max-width:1080px){
  .rocket-grid,.callout{grid-template-columns:1fr;gap:44px}
  .gapgrid{grid-template-columns:1fr}
  .rocket-art{min-height:300px;order:-1}
  .devices .ph{width:34%;right:0}
}
@media (max-width:560px){
  .fomo,.rocket-sec{padding:80px 0}
  .devices .ph{width:40%}
}
@media (prefers-reduced-motion:reduce){
  .rocket-art .rk,.rocket-art .flame,.rocket-stars i,.booked .bdot::after{animation:none}
}
/* callout device stack */
.devices .lap{box-shadow:var(--sh-3)}
.devices .ph{right:-18px;bottom:6px}
@media (max-width:1080px){ .devices .ph{right:0;bottom:0} }
/* rocket section inherits the dark-surface chip colours */
.rocket-sec .booked{color:#9FB0C4}
.rocket-sec .booked b{color:#fff}
.fomo .booked{color:#C3B2AC}
.fomo .booked b{color:#fff}
/* a circled span is inline-block, so trailing punctuation can orphan — keep them together */
.nowrap{white-space:nowrap}

/* ═══════════════════════════════════════════════════════════
   v12 — consistent demo CTA treatment
   ═══════════════════════════════════════════════════════════ */
/* every demo button: white text + white icon on the gradient */
.fab{color:#fff !important}
.fab .fi{background:rgba(255,255,255,.22);color:#fff}
.fab .fi svg{color:#fff}
/* one live-dot treatment everywhere */
.btn-demo .live,.fab .live{position:absolute;top:-4px;right:-4px;width:12px;height:12px;
  border-radius:50%;background:var(--tomato);border:2.5px solid #fff;
  box-shadow:0 0 0 1px rgba(41,56,85,.14)}
.btn-demo .live::after,.fab .live::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  background:var(--tomato);opacity:.55;animation:blip 1.9s cubic-bezier(0,0,.2,1) infinite}
.fab .pulse{display:none}
.on-dark .btn-demo .live{border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .btn-demo .live::after,.fab .live::after{animation:none}
}

/* demo page layout */
.demo-hero{padding:76px 0 56px}
.cal-panel{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:var(--sh-2);min-height:720px;position:relative}
.cal-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;text-align:center;padding:48px;
  background:repeating-linear-gradient(135deg,#F3F7F8,#F3F7F8 14px,#ECF2F4 14px,#ECF2F4 28px)}
.cal-ph code{font-size:13px;background:var(--ink);color:#8FDE9E;padding:9px 14px;border-radius:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;display:inline-block;max-width:100%;
  overflow-wrap:anywhere}
.demo-side{display:grid;gap:16px;align-content:start}
.dside{border:1px solid var(--line);border-radius:var(--r-md);padding:22px;background:#fff}
.dside .di{width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.dside h3{font-size:16px;margin-bottom:5px}
.dside p{font-size:14px;line-height:1.5;margin:0}
.demo-layout2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:44px;align-items:start}
@media (max-width:1080px){ .demo-layout2{grid-template-columns:1fr} }
@media (max-width:560px){ .cal-panel{min-height:600px} .cal-ph{padding:32px 22px} }

/* fab wrapper: close sits on the opposite corner from the live dot */
.fab-wrap{position:fixed;right:24px;bottom:24px;z-index:300}
.fab{position:relative;right:auto;bottom:auto}
.fab-close{position:absolute;top:-9px;left:-9px;right:auto;bottom:auto;
  width:24px;height:24px;border-radius:50%;border:0;background:var(--ink);color:#fff;
  cursor:pointer;display:none;align-items:center;justify-content:center;line-height:0;
  opacity:.75;box-shadow:0 2px 8px rgba(16,21,31,.3)}
.fab.show ~ .fab-close{display:flex}
.fab-close:hover{opacity:1}
@media (max-width:560px){ .fab-wrap{right:14px;bottom:14px} }

/* ═══════════════════════════════════════════════════════════
   v13 — statement section: crisp, near-black, no blur filters
   (blur(80px) orbs were rasterising soft; radial-gradients are
    resolution-independent and stay sharp at any DPI)
   ═══════════════════════════════════════════════════════════ */
.section.dark.statement-sec,.statement-sec{
  background:
    radial-gradient(58% 52% at 50% 8%,  rgba(95,199,190,.26), transparent 62%),
    radial-gradient(46% 44% at 12% 92%, rgba(143,222,158,.16), transparent 62%),
    radial-gradient(42% 40% at 88% 84%, rgba(46,154,160,.16), transparent 62%),
    linear-gradient(168deg,#070C16 0%,#0B1322 52%,#060A12 100%);
  position:relative;overflow:hidden}
.statement-sec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 42%,#000,transparent);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 42%,#000,transparent)}
/* a crisp hairline rule top and bottom to separate it from the navy rocket below */
.statement-sec::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(95,199,190,.5),transparent)}
.statement-sec .wrap{position:relative;z-index:3}
.statement{text-shadow:0 1px 30px rgba(0,0,0,.35)}

/* ── Social links ────────────────────────────────────── */
.social{display:flex;gap:10px;margin-top:20px}
.social a{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:#C4CAD6;transition:all .22s var(--ease)}
.social a:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-2px)}
.social-light a{background:var(--soft);border-color:var(--line);color:var(--text-2)}
.social-light a:hover{background:var(--grad);color:#fff;border-color:transparent}

/* ── Anything on the brand gradient is white ─────────── */
.btn-p,.btn-p:hover,
.strip .btn-d,
.cta .btn-d,
.fab,
.btn-demo{color:#fff !important}
.btn-p svg,.btn-demo svg,.fab svg,.cta .btn-d svg{color:#fff !important}
.vs-arrow{color:#fff}
.vs-arrow svg{color:#fff}
.rk-step .rn{color:#fff}
.pnode .pk{color:#fff}
.in .pipe-lite .pnode.lit .pk{color:#fff}
.in .pnode.lit .pk{color:#fff}
.launch-badge .dot2,.booked .bdot{color:#fff}
.mtag{color:#fff}

/* ═══════════════════════════════════════════════════════════
   v13.1 — richer scroll motion
   ═══════════════════════════════════════════════════════════ */
.rise{opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise-l{opacity:0;transform:translateX(-26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise-l.in{opacity:1;transform:none}
.rise-r{opacity:0;transform:translateX(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise-r.in{opacity:1;transform:none}
.rise-s{opacity:0;transform:translateY(18px) scale(.975);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise-s.in{opacity:1;transform:none}

/* children stagger in after their parent */
.stagger > *{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.05s}
.stagger.in > *:nth-child(2){transition-delay:.13s}
.stagger.in > *:nth-child(3){transition-delay:.21s}
.stagger.in > *:nth-child(4){transition-delay:.29s}
.stagger.in > *:nth-child(5){transition-delay:.37s}
.stagger.in > *:nth-child(6){transition-delay:.45s}
.stagger.in > *:nth-child(7){transition-delay:.53s}
.stagger.in > *:nth-child(8){transition-delay:.61s}

/* headline words lift in */
.wordfade span{display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.wordfade.in span{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rise,.rise-l,.rise-r,.rise-s,.stagger > *,.wordfade span{
    opacity:1 !important;transform:none !important;transition:none !important}
}
/* keep the new sections on the same mobile rhythm as everything else */
@media (max-width:900px){
  .launch,.fomo,.rocket-sec{padding:88px 0}
  .seen{padding:38px 0}
}

/* ═══════════════════════════════════════════════════════════
   v14 — button edge fix · gold stars · multicolour icon tiles
   ═══════════════════════════════════════════════════════════ */

/* transparent border was painting a seam over the gradient edge */
.btn-demo{border:0;padding:12.5px 23px 12.5px 17px;background-clip:padding-box}

/* every 5-star group is gold */
.stars svg,.bigstars svg,.tc .stars svg,.tbig .stars svg,.appproof .stars svg{fill:#F5A623}

/* ── Apple-ish multicolour accents ───────────────────── */
:root{
  --c-coral:#FF6B5A; --c-peach:#FF9F45; --c-lemon:#FFD166;
  --c-leaf:#4FC98A;  --c-sky:#3FA9E0;   --c-violet:#8B7BF0;
  --c-pink:#FF7BAC;
}
.tint-coral {background:#FFEDEA;color:#C8412D}
.tint-peach {background:#FFF1E2;color:#B76A22}
.tint-lemon {background:#FFF6DE;color:#9C7415}
.tint-leaf  {background:#E6F8EE;color:#207D51}
.tint-sky   {background:#E7F3FC;color:#1F6FA8}
.tint-violet{background:#EFECFD;color:#5647B8}
.tint-pink  {background:#FFECF3;color:#C0426F}
.tint-teal  {background:#E4F3F4;color:#1F6B70}

/* ── Divider band between the two dark sections ──────── */
.split-band{background:var(--paper);padding:64px 0;position:relative;overflow:hidden}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bandcard{text-align:center;padding:30px 22px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:#fff;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.bandcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.bandcard .bi{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;
  justify-content:center;margin:0 auto 16px}
.bandcard h3{font-size:16.5px;margin-bottom:6px;letter-spacing:-.02em}
.bandcard p{font-size:14px;line-height:1.5;margin:0}
@media (max-width:900px){ .band-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .band-grid{grid-template-columns:1fr} }

/* ── Legal pages ─────────────────────────────────────── */
.legal{max-width:780px;margin:0 auto;padding:0 40px}
.legal h2{font-size:24px;margin:44px 0 12px;letter-spacing:-.026em}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:18px;margin:26px 0 8px;letter-spacing:-.02em}
.legal p{font-size:16.5px;line-height:1.7;margin-bottom:14px}
.legal ul{margin:0 0 16px 0}
.legal li{font-size:16.5px;line-height:1.7;padding-left:24px;position:relative;margin-bottom:8px}
.legal li::before{content:"";position:absolute;left:6px;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--teal-deep)}
.legal .meta{font-size:14.5px;color:var(--text-3);padding-bottom:22px;margin-bottom:34px;
  border-bottom:1px solid var(--line)}
.legal-toc{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 28px;margin-bottom:44px}
.legal-toc h2{font-size:15px;margin:0 0 14px}
.legal-toc a{display:block;padding:6px 0;font-size:15px;color:var(--text-2)}
.legal-toc a:hover{color:var(--teal-deep)}
.legal-note{background:#FFF6DE;border:1px solid #F3E3B4;border-radius:var(--r-md);
  padding:20px 22px;margin-bottom:36px;font-size:15px;line-height:1.6;color:#7A5B12}
.legal-note b{color:#5E4408}

/* ── Every icon tile picks up a colour ───────────────── */
.hicon,.bic,.fi,.ri,.di,.wi,.gi,.bi,.ci,.ci2,.cway .ci{transition:transform .25s var(--ease)}
.bandcard:hover .bi,.bx:hover .bic,.fchip:hover .fi,.dside:hover .di,
.cway:hover .ci,.gapcard:hover .gi,.wn:hover .wi{transform:scale(1.08) rotate(-3deg)}

/* colour cycle applied by position so no tile is ever the same as its neighbour */
.tint-c1{background:#FFEDEA;color:#C8412D}
.tint-c2{background:#FFF1E2;color:#B76A22}
.tint-c3{background:#FFF6DE;color:#9C7415}
.tint-c4{background:#E6F8EE;color:#207D51}
.tint-c5{background:#E7F3FC;color:#1F6FA8}
.tint-c6{background:#EFECFD;color:#5647B8}
.tint-c7{background:#FFECF3;color:#C0426F}
.tint-c8{background:#E4F3F4;color:#1F6B70}
/* dark surfaces keep the hue but lift the contrast */
.dark .tint-c1,.launch .tint-c1,.rocket-sec .tint-c1{background:rgba(255,107,90,.17);color:#FF9E8E}
.dark .tint-c2,.launch .tint-c2,.rocket-sec .tint-c2{background:rgba(255,159,69,.17);color:#FFC08A}
.dark .tint-c3,.launch .tint-c3,.rocket-sec .tint-c3{background:rgba(255,209,102,.17);color:#FFDF9B}
.dark .tint-c4,.launch .tint-c4,.rocket-sec .tint-c4{background:rgba(79,201,138,.17);color:#8BE2B4}
.dark .tint-c5,.launch .tint-c5,.rocket-sec .tint-c5{background:rgba(63,169,224,.17);color:#8FCFF0}
.dark .tint-c6,.launch .tint-c6,.rocket-sec .tint-c6{background:rgba(139,123,240,.17);color:#B7ADF7}
.dark .tint-c7,.launch .tint-c7,.rocket-sec .tint-c7{background:rgba(255,123,172,.17);color:#FFAECB}
.dark .tint-c8,.launch .tint-c8,.rocket-sec .tint-c8{background:rgba(127,206,210,.17);color:#9FE0E3}
.fomo .tint-c1,.fomo .tint-c2,.fomo .tint-c3,.fomo .tint-c4,
.fomo .tint-c5,.fomo .tint-c6,.fomo .tint-c7,.fomo .tint-c8{
  background:rgba(240,161,132,.16);color:#F0A184}

/* ═══════════════════════════════════════════════════════════
   v15 — remaining icons multicolour · tighter trust bar
   ═══════════════════════════════════════════════════════════ */

/* geometry only — colour comes from the .tint-c* class on each tile */

/* pipeline nodes take the colour cycle instead of one flat gradient */
.pnode .pk.tint-c1,.pipe-lite .pnode .pk.tint-c1{background:#FFEDEA;color:#C8412D;border-color:#FBD9D2}
.pnode .pk.tint-c2,.pipe-lite .pnode .pk.tint-c2{background:#FFF1E2;color:#B76A22;border-color:#FAE2C9}
.pnode .pk.tint-c3,.pipe-lite .pnode .pk.tint-c3{background:#FFF6DE;color:#9C7415;border-color:#F6E6BB}
.pnode .pk.tint-c4,.pipe-lite .pnode .pk.tint-c4{background:#E6F8EE;color:#207D51;border-color:#CBEDDA}
.pnode .pk.tint-c5,.pipe-lite .pnode .pk.tint-c5{background:#E7F3FC;color:#1F6FA8;border-color:#CBE3F6}
.pnode .pk.tint-c6,.pipe-lite .pnode .pk.tint-c6{background:#EFECFD;color:#5647B8;border-color:#DCD6FA}
.in .pipe-lite .pnode.lit .pk{transform:translateY(-4px);box-shadow:0 12px 26px -10px rgba(41,56,85,.28)}

/* FOMO cards: keep the warm surface but let each icon differ */
.fomo .gi.tint-c1{background:rgba(255,107,90,.20);color:#FFB3A6}
.fomo .gi.tint-c2{background:rgba(255,159,69,.20);color:#FFC894}
.fomo .gi.tint-c3{background:rgba(255,209,102,.20);color:#FFE3A8}
.fomo .gi.tint-c4{background:rgba(120,201,160,.20);color:#A6E3C4}
.fomo .gi.tint-c5{background:rgba(120,180,224,.20);color:#A9D4F2}
.fomo .gi.tint-c6{background:rgba(170,150,240,.20);color:#C6BAF9}

/* ── Trust bar: tighter ──────────────────────────────── */
.seen{padding:34px 0}
.seen .cap{margin-bottom:20px;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.seen-track .lg{padding:0 30px;height:48px}
.seen-track img{max-height:34px}
.seen-track img.l-nyt,.seen-track img.l-tribune{max-height:23px}
.seen-track img.l-dailynews{max-height:20px}
.seen-track img.l-bloomberg{max-height:28px}
.seen-track img.l-nypost,.seen-track img.l-nbc,
.seen-track img.l-fox,.seen-track img.l-abc{max-height:38px}
@media (max-width:900px){
  .seen{padding:26px 0}
  .seen-track .lg{padding:0 20px;height:40px}
  .seen-track img{max-height:28px !important}
  .seen-track img.l-nyt,.seen-track img.l-tribune{max-height:19px !important}
  .seen-track img.l-dailynews{max-height:16px !important}
}

/* ── Rocket flame was clipping at the SVG viewport ───── */
.rocket-art svg{overflow:visible}
.rocket-art{padding-bottom:60px}

/* ── Features sub-nav with icons ─────────────────────── */
.subnav a{display:inline-flex;align-items:center;gap:9px;padding:14px 2px;margin-right:26px}
.subnav a .si{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;transition:transform .22s var(--ease)}
.subnav a:hover .si{transform:scale(1.1) rotate(-4deg)}
@media (max-width:900px){
  .subnav a{margin-right:18px;font-size:13.5px;gap:7px}
  .subnav a .si{width:23px;height:23px;border-radius:7px}
}

/* ── Features category heads: icon beside the eyebrow ── */
.fhead{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.fhead .hicon{margin-bottom:0;width:52px;height:52px;border-radius:16px;flex-shrink:0}
.fhead .kick{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════
   v16 — gradient CTA band: white content, correct spacing
   ═══════════════════════════════════════════════════════════ */
.cta{align-items:center;gap:48px;padding:64px 60px}
.cta h2,.cta p,.cta .booked,.cta .booked b{color:#fff}
.cta h2{margin-bottom:12px}
.cta p{opacity:.92;font-size:17.5px;max-width:52ch}
.cta .btns{flex-direction:column;align-items:stretch;gap:14px;min-width:220px}
.cta .btns .btn{width:100%}
.cta .booked{justify-content:center;color:rgba(255,255,255,.92);order:3;margin-top:2px}
.cta .booked b{color:#fff}
.cta .booked .bdot{background:#fff}
.cta .booked .bdot::after{background:#fff}
/* the strip band matches */
.strip p{color:#fff}
@media (max-width:900px){
  .cta{padding:48px 28px;gap:30px}
  .cta .btns{width:100%;min-width:0}
  .cta p{max-width:none}
}
/* legal: clearer separation between articles and clauses */
.legal h2{font-size:23px;margin:56px 0 6px;padding-top:32px;border-top:1px solid var(--line);
  letter-spacing:-.026em;line-height:1.2}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:16.5px;margin:28px 0 6px;letter-spacing:-.018em;color:var(--teal-deep)}
.legal p{font-size:16px;line-height:1.72;margin-bottom:14px;color:var(--text-2)}
.legal .legal-intro{font-size:17px;line-height:1.7;color:var(--text);
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 26px;margin-bottom:12px}
.legal .meta{font-size:14.5px;color:var(--text-3);padding-bottom:22px;margin-bottom:30px;
  border-bottom:1px solid var(--line)}
.legal-toc{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 30px;margin-bottom:40px;columns:2;column-gap:34px}
.legal-toc h2{font-size:13px;margin:0 0 14px;padding:0;border:0;column-span:all;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.legal-toc a{display:block;padding:6px 0;font-size:14.5px;color:var(--text-2);
  break-inside:avoid;line-height:1.4}
.legal-toc a:hover{color:var(--teal-deep)}
.legal a{color:var(--teal-deep);font-weight:600}
@media (max-width:760px){ .legal-toc{columns:1} .legal{padding:0 24px} .legal h2{font-size:20px} }
.legal .legal-intro{padding:26px 28px}
.legal .legal-intro p{font-size:15.5px;line-height:1.68;margin-bottom:12px;color:var(--text-2)}
.legal .legal-intro p:last-child{margin-bottom:0}
.legal .legal-intro p:first-child{color:var(--text);font-weight:500}

/* ═══════════════════════════════════════════════════════════
   v17 — text-first blog index (scales to hundreds of posts)
   ═══════════════════════════════════════════════════════════ */

/* category filter */
.blog-filters{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:28px;
  border-bottom:1px solid var(--line);margin-bottom:8px}
.bfilter{padding:9px 17px;border-radius:100px;border:1.5px solid var(--line);background:#fff;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--text-2);cursor:pointer;
  letter-spacing:-.012em;transition:all .2s var(--ease)}
.bfilter:hover{border-color:var(--text-3);color:var(--ink)}
.bfilter.on{background:var(--ink);border-color:var(--ink);color:#fff}
.bfilter .n{opacity:.55;margin-left:6px;font-variant-numeric:tabular-nums}

/* lead post — text only, larger type */
.blead{padding:34px 0 36px;border-bottom:1px solid var(--line)}
.blead .pmeta{margin-bottom:14px}
.blead h2{font-size:clamp(27px,3.1vw,40px);line-height:1.12;letter-spacing:-.032em;margin-bottom:14px}
.blead h2 a:hover{color:var(--teal-deep)}
.blead p{font-size:17.5px;line-height:1.65;max-width:74ch;margin-bottom:18px}

/* the list */
.blist{display:grid}
.bpost{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:28px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line);
  transition:background .2s var(--ease)}
.bpost:hover{background:var(--soft)}
.bpost:hover h3{color:var(--teal-deep)}
.bpost .bdate{font-size:13.5px;color:var(--text-3);font-variant-numeric:tabular-nums;
  padding-top:3px;white-space:nowrap}
.bpost h3{font-size:19.5px;line-height:1.3;letter-spacing:-.024em;margin-bottom:6px;
  transition:color .2s var(--ease)}
.bpost p{font-size:15.5px;line-height:1.55;margin:0;max-width:78ch}
.bpost .bread{font-size:13px;color:var(--text-3);white-space:nowrap;padding-top:4px;
  font-variant-numeric:tabular-nums}
.bcat{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:100px;
  font-size:12px;font-weight:700;letter-spacing:.01em}
.bpost .bcat{margin-bottom:9px}
.bpost.hide{display:none}

/* pagination */
.bpager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:44px;flex-wrap:wrap}
.bpager a,.bpager span{min-width:40px;height:40px;padding:0 13px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:600;
  border:1.5px solid var(--line);color:var(--text-2);background:#fff;transition:all .2s var(--ease)}
.bpager a:hover{border-color:var(--ink);color:var(--ink)}
.bpager .cur{background:var(--ink);border-color:var(--ink);color:#fff}
.bpager .gap{border:0;background:none;color:var(--text-3)}

.bempty{padding:60px 0;text-align:center;color:var(--text-3);font-size:15.5px;display:none}
.bempty.on{display:block}

@media (max-width:900px){
  .bpost{grid-template-columns:minmax(0,1fr);gap:8px;padding:22px 0}
  .bpost .bdate{padding-top:0;font-size:13px}
  .bpost .bread{padding-top:0}
  .bpost h3{font-size:18px}
}

/* ── Blog post pages ─────────────────────────────────── */
.post-hero{padding:70px 0 56px}
.post-hero h1{font-size:clamp(32px,4.2vw,54px);line-height:1.08;max-width:19ch;margin-bottom:18px}
.post-hero .lede{max-width:64ch}
.post-hero .pmeta{margin-bottom:18px}
.postbody{max-width:760px;margin:0 auto;padding:0 40px}
.postbody h2{font-size:clamp(22px,2.3vw,29px);letter-spacing:-.026em;line-height:1.22;
  margin:46px 0 14px}
.postbody h2:first-child{margin-top:0}
.postbody p{font-size:17.5px;line-height:1.78;color:var(--text-2);margin-bottom:18px}
.postbody ul{margin:0 0 22px}
.postbody li{font-size:17px;line-height:1.7;color:var(--text-2);padding-left:26px;
  position:relative;margin-bottom:11px}
.postbody li::before{content:"";position:absolute;left:6px;top:.72em;width:7px;height:7px;
  border-radius:50%;background:var(--teal-deep)}
.postbody li b{color:var(--ink)}
.post-cta{margin:56px 0 40px;padding:34px 36px;border-radius:var(--r-lg);background:var(--grad);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.post-cta h2{margin:0 0 8px;font-size:23px;color:#fff}
.post-cta p{margin:0;font-size:16px;color:#fff;opacity:.94;max-width:46ch}
.post-cta .btn{flex-shrink:0}
.postnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:32px;
  border-top:1px solid var(--line)}
.pn{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.pn:hover{border-color:var(--ink);transform:translateY(-2px)}
.pn span{display:block;font-size:12.5px;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.pn b{font-size:15.5px;line-height:1.35;color:var(--ink);letter-spacing:-.018em}
.pn.next{text-align:right}
@media (max-width:760px){
  .postbody{padding:0 24px}
  .postnav{grid-template-columns:1fr}
  .pn.next{text-align:left}
  .post-cta{padding:28px 24px}
}
.post-hero h1{max-width:24ch}
.post-hero .pmeta{gap:12px;align-items:center}

/* ═══════════════════════════════════════════════════════════
   v18 — compact blog hero so posts land above the fold
   ═══════════════════════════════════════════════════════════ */
.phero.blog-hero{padding:44px 0 34px}
.blog-hero h1{font-size:clamp(30px,3.4vw,44px);max-width:28ch;margin-bottom:12px;line-height:1.06}
.blog-hero .lede{font-size:17px;max-width:66ch}
.blog-hero .kick{margin-bottom:10px}
.blog-hero .blob{opacity:.7}
.blog-main{padding-top:26px !important}
.blog-filters{padding-bottom:20px;margin-bottom:0}
.blead{padding:26px 0 28px}
.blead h2{font-size:clamp(24px,2.6vw,33px)}
.blead p{font-size:16.5px;margin-bottom:14px}
@media (max-width:900px){
  .phero.blog-hero{padding:32px 0 26px}
  .blog-main{padding-top:20px !important}
}
/* tighter still, and filters scroll horizontally on small screens */
.phero.blog-hero{padding:38px 0 28px}
.blead{padding:22px 0 24px}
@media (max-width:900px){
  .phero.blog-hero{padding:26px 0 20px}
  .blog-hero h1{font-size:26px;margin-bottom:8px}
  .blog-hero .lede{font-size:15.5px}
  .blog-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:16px;margin-right:-24px;padding-right:24px}
  .blog-filters::-webkit-scrollbar{display:none}
  .bfilter{flex-shrink:0;padding:8px 14px;font-size:13.5px}
  .blead{padding:18px 0 20px}
  .blead h2{font-size:22px}
  .blead p{font-size:15.5px}
}

/* ═══════════════════════════════════════════════════════════
   v19 — support centre
   ═══════════════════════════════════════════════════════════ */
.sup-search{position:relative;max-width:620px;margin-top:26px}
.sup-search input{width:100%;padding:16px 18px 16px 50px;border:1.5px solid var(--line-2);
  border-radius:100px;font-family:inherit;font-size:16px;color:var(--text);background:#fff;
  box-shadow:var(--sh-1);transition:border-color .18s,box-shadow .18s}
.sup-search input:focus{outline:none;border-color:var(--teal-deep);
  box-shadow:0 0 0 3px rgba(46,154,160,.13)}
.sup-search .si2{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  color:var(--text-3);pointer-events:none}

.sup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.supcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;background:#fff;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.supcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.supcard .sic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;margin-bottom:18px}
.supcard h3{font-size:17.5px;margin-bottom:8px;letter-spacing:-.022em}
.supcard p{font-size:15px;line-height:1.55;margin-bottom:14px}
.supcard ul{margin:0}
.supcard li{font-size:14.5px;padding:7px 0;border-top:1px solid var(--line)}
.supcard li a{color:var(--text-2);display:flex;align-items:center;justify-content:space-between;gap:10px}
.supcard li a:hover{color:var(--teal-deep)}
.supcard li a svg{flex-shrink:0;opacity:.5}

.sup-status{display:flex;align-items:center;gap:14px;padding:20px 24px;border-radius:var(--r-md);
  background:#E6F8EE;border:1px solid #CBEDDA;color:#1B6B44;font-size:15.5px;font-weight:600;
  flex-wrap:wrap}
.sup-status .dot{width:10px;height:10px;border-radius:50%;background:#2FA05C;position:relative;flex-shrink:0}
.sup-status .dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  background:#2FA05C;opacity:.4;animation:blip 2.1s cubic-bezier(0,0,.2,1) infinite}
.sup-status span.m{font-weight:400;color:#2C7A55}

.sup-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.supc{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;text-align:center;background:#fff}
.supc .sic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.supc h3{font-size:17px;margin-bottom:6px}
.supc p{font-size:14.5px;line-height:1.55;margin-bottom:14px}

@media (max-width:900px){ .sup-grid,.sup-contact{grid-template-columns:1fr} }

@media (min-width:1081px){#marketing .frow{grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);gap:64px}#marketing .fviz{margin-left:-6%}}

.tbig blockquote{font-size:15px}