/* DinerMagnet site — shared styles (v2)
   Layout: ivory canvas, centered heavy-grotesk heroes, floating icon tiles with converging lines,
   framed product shots with a warm gradient glow, pastel bento cards, dark rounded feature blocks.
   Deliberately single-theme (ivory), per brand direction. */
:root{
  color-scheme:light;
  --bg:#fcfbf8; --bg-2:#f5f3ee; --fg:#1c1c1c; --fg-muted:#5f5e5a; --fg-soft:#8a8882;
  --line:#e9e6df; --card:#ffffff; --dark:#2A1125; --dark-2:#3A1A33; --on-dark:#f6f4ef; --muted-on-dark:#a9a69e;
  --g1:#FA9A1F; --g2:#E2557A; --g3:#4A1E3D; --grad:linear-gradient(90deg,var(--g1),var(--g2) 50%,var(--g3));
  --peach:#ffe8d9; --pink:#fde3ee; --lav:#ebe6ff; --sky:#e1eeff; --mint:#e0f4e8; --butter:#fff3cc;
  --good:#16865a; --bad:#d4462f; --ph:#f3f1ec; --ph-line:#d8d4ca;
  --display:"Geist", "Helvetica Neue", Arial, sans-serif;
  --body:"Geist", "Helvetica Neue", Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, monospace;
  --r:20px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;color:var(--fg)}
h1{font-size:clamp(2.7rem,7vw,5.6rem);font-weight:700;line-height:.98;letter-spacing:-.055em}
h2{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:700;line-height:1.02;letter-spacing:-.045em}
h3{font-size:1.32rem;font-weight:600;line-height:1.2;letter-spacing:-.025em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--g3);outline-offset:3px;border-radius:8px}

.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section{padding-block:96px}
.eyebrow{font:500 .8rem var(--mono);letter-spacing:.04em;color:var(--fg-soft)}
.lead{font-size:1.2rem;color:var(--fg-muted);max-width:58ch;letter-spacing:-.01em}
.sec-head{display:grid;gap:16px;max-width:780px;margin:0 auto 56px;text-align:center;justify-items:center}
.sec-head.left{margin-left:0;text-align:left;justify-items:start}
.soft{background:var(--bg-2)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 1rem var(--body);letter-spacing:-.01em;padding:13px 22px;border-radius:10px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--dark);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 6px 16px -8px rgba(0,0,0,.5)}
.btn-primary:hover{background:#000}
.btn-ghost{background:var(--card);color:var(--fg);border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.btn-ghost:hover{border-color:#cfcbc2}
.btn-warm,.btn-on{background:#fff;color:var(--fg)}
.btn-line{border-color:rgba(255,255,255,.3);color:#fff;background:transparent}
.btn-line:hover{border-color:#fff}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.center .ctas,.ctas.center{justify-content:center}
.textlink{font-weight:500;color:var(--fg);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;text-decoration-thickness:2px}
.textlink:hover{text-decoration-color:var(--g2)}
.note{color:var(--fg-soft);font-size:.9rem}
.fine{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--fg-soft);font-size:.92rem;justify-content:center}
.fine span::before{content:"✓ ";color:var(--good)}

/* nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.promo{display:none}
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.nav .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.logo{display:flex;align-items:center;gap:9px;font:700 1.3rem var(--display);letter-spacing:-.05em;text-decoration:none;color:var(--fg)}
.logo-mark{width:28px;height:28px;border-radius:8px;background:var(--grad);display:grid;place-items:center}
.logo-mark svg{width:16px;height:16px}
.nav-links{display:flex;gap:2px;align-items:center;font-size:.95rem}
.nav-links > a,.dd > button{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--fg-muted);background:none;border:0;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.nav-links > a:hover,.dd > button:hover,.dd:focus-within > button{color:var(--fg);background:rgba(0,0,0,.04)}
.nav-links a[aria-current="page"],.dd.current > button{color:var(--fg);font-weight:600}
.dd{position:relative}
.dd > button svg{width:12px;height:12px;transition:transform .15s}
.dd-menu{position:absolute;top:calc(100% + 10px);left:-12px;width:560px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.3);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{opacity:1;visibility:visible;transform:none}
.dd:hover > button svg,.dd.open > button svg{transform:rotate(180deg)}
.dd-menu a{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;padding:12px;border-radius:12px;text-decoration:none}
.dd-menu a:hover,.dd-menu a[aria-current="page"]{background:var(--bg)}
.dd-menu .mi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--fg)}
.dd-menu .mi{background:var(--bg);border:1px solid var(--line)}
.dd-menu .mi svg{width:18px;height:18px}
.dd-menu b{display:block;color:var(--fg);font-weight:600;font-size:.95rem;letter-spacing:-.01em}
.dd-menu small{color:var(--fg-muted);font-size:.84rem;line-height:1.35;display:block}
.nav-cta{display:flex;gap:8px;align-items:center}
.nav-cta .btn{padding:9px 16px;font-size:.93rem}
.menu-btn{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;place-items:center}
.menu-btn svg{width:20px;height:20px}
.mobile-menu{border-top:1px solid var(--line);padding-block:8px 20px}
.mobile-menu a{display:block;padding:12px 4px;text-decoration:none;font-weight:500;border-bottom:1px solid var(--line)}
.mobile-menu a[aria-current="page"]{color:var(--g2)}
.mobile-menu .group{font:500 .74rem var(--mono);color:var(--fg-soft);padding:18px 4px 4px}
.mobile-menu .ctas{margin-top:16px}
@media (max-width:1000px){.nav-links,.nav-cta .btn-ghost{display:none}.menu-btn{display:grid}}
@media (max-width:420px){.nav-cta .btn-primary{display:none}}
@media (min-width:1001px){.mobile-menu{display:none!important}}

/* glow */
.glow{position:relative;isolation:isolate}
.glow::before{content:"";position:absolute;inset:8% 6% -6%;z-index:-1;border-radius:50%;
  background:radial-gradient(40% 55% at 22% 60%,rgba(255,122,47,.55),transparent 70%),radial-gradient(40% 55% at 52% 45%,rgba(240,70,143,.5),transparent 70%),radial-gradient(40% 55% at 80% 60%,rgba(123,92,255,.5),transparent 70%);
  filter:blur(48px);opacity:.75}

/* home hero */
.hero{position:relative;padding-block:120px 72px;overflow:hidden}
.hero-copy{position:relative;z-index:2;display:grid;gap:26px;justify-items:center;text-align:center}
.hero-copy .lead{font-size:clamp(1.1rem,1.8vw,1.35rem);color:var(--fg);font-weight:500;max-width:46ch;letter-spacing:-.02em}
.pill{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid var(--line);background:var(--card);border-radius:999px;font-size:.88rem;color:var(--fg-muted);text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pill b{background:var(--dark);color:#fff;font-weight:500;padding:3px 10px;border-radius:999px;font-size:.78rem}
.pill:hover{color:var(--fg)}
.hero-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-lines path{fill:none;vector-effect:non-scaling-stroke}
.hero-lines .base{stroke:#e4e0d7;stroke-width:1.2}
.hero-lines .run{stroke:url(#lg);stroke-width:1.6;stroke-dasharray:60 900;stroke-dashoffset:960;animation:run 6s linear infinite}
.hero-lines .run:nth-of-type(2n){animation-delay:-2s}.hero-lines .run:nth-of-type(3n){animation-delay:-4s}
@keyframes run{to{stroke-dashoffset:0}}
.tile{position:absolute;left:var(--x);top:var(--y);z-index:1;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.04);display:grid;place-items:center;transform:rotate(var(--r));animation:float 7s ease-in-out infinite;animation-delay:var(--d)}
.tile svg{width:38px;height:38px}
.tile small{position:absolute;bottom:-26px;font:500 .72rem var(--mono);color:var(--fg-soft);white-space:nowrap;transform:rotate(calc(var(--r) * -1))}
@keyframes float{50%{translate:0 -8px}}
@media (max-width:1000px){.tile,.hero-lines{display:none}.hero{padding-block:72px 48px}}

/* showcase frame */
.showcase{padding-block:0 80px}
.frame{position:relative;max-width:1080px;margin:0 auto}
.browser{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 80px -40px rgba(0,0,0,.35);overflow:hidden}
.browser-bar{display:flex;gap:6px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#e2ded5}
.browser-bar span{margin:0 auto;font:500 .75rem var(--mono);color:var(--fg-soft);background:var(--card);border:1px solid var(--line);padding:4px 18px;border-radius:8px}
.browser .ph{aspect-ratio:16/9;margin:14px;min-height:0}
.frame .phone{position:absolute;right:-28px;bottom:-40px;width:210px}
.frame .ticket{position:absolute;left:-28px;bottom:48px}
@media (max-width:1180px){.frame .phone{right:8px}.frame .ticket{left:8px}}
@media (max-width:700px){.frame .phone{width:120px;bottom:-24px;padding:6px;border-radius:22px}.frame .phone .phone-screen{border-radius:17px}.frame .ticket{display:none}.browser .ph{aspect-ratio:4/3}}

.phone{width:230px;aspect-ratio:9/19;max-width:100%;background:var(--dark);border-radius:38px;padding:9px;box-shadow:0 30px 60px -24px rgba(0,0,0,.5)}
.phone-screen{width:100%;height:100%;border-radius:30px;overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.phone .ph{flex:1;border-radius:24px;min-height:0;border:0}
.ticket{width:230px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;font:500 .78rem/1.6 var(--mono);box-shadow:0 24px 44px -24px rgba(0,0,0,.4)}
.ticket .row{display:flex;justify-content:space-between;gap:8px}
.ticket .tag{display:inline-block;background:var(--peach);color:#b4471a;padding:2px 9px;border-radius:999px;font-size:.7rem;margin-bottom:8px}
.ticket .total{border-top:1px dashed var(--line);margin-top:6px;padding-top:6px;font-weight:600}
.ticket .zero{color:var(--good)}

/* channel strip */
.strip{padding-block:56px;border-block:1px solid var(--line)}
.strip p{text-align:center;color:var(--fg-soft);font-size:.92rem;margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font:600 1.15rem var(--display);letter-spacing:-.03em;color:#9a978f}

/* placeholders */
.ph{background:var(--ph);border:1px dashed var(--ph-line);border-radius:14px;display:grid;place-items:center;text-align:center;color:var(--fg-soft);font:500 .78rem/1.45 var(--mono);padding:14px;min-height:120px}
.ph b{display:block;color:var(--fg);font-family:var(--body);font-size:.92rem;font-weight:600;margin-bottom:2px}
.ph.wide{aspect-ratio:16/10;max-width:100%}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bento > *{min-width:0}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:12px 12px 28px;display:grid;gap:12px;align-content:start;text-decoration:none;color:var(--fg);transition:transform .2s,box-shadow .2s}
.tcard > :not(.viz){padding-inline:16px}
a.tcard:hover{box-shadow:0 24px 48px -28px rgba(0,0,0,.3)}
a.tcard:hover{transform:translateY(-3px)}
.tcard p{color:var(--fg-muted)}
.tcard ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;color:var(--fg-muted);font-size:.97rem}
.tcard li::before{content:"→ ";color:var(--fg)}
.tcard .ph{background:rgba(255,255,255,.6);border-color:rgba(0,0,0,.12);aspect-ratio:16/10;margin-top:8px}
.tcard .more{font-weight:500;margin-top:4px}
.span2{grid-column:span 2}.span3{grid-column:span 3}.span4{grid-column:span 4}.span6{grid-column:span 6}
.c-peach{background:var(--peach)}.c-pink{background:var(--pink)}.c-lav{background:var(--lav)}.c-sky{background:var(--sky)}.c-mint{background:var(--mint)}.c-butter{background:var(--butter)}
@media (max-width:900px){.span2,.span3,.span4{grid-column:span 6}}
.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.outcome{border-radius:24px;padding:32px;display:grid;gap:12px;align-content:start}
.outcome{background:var(--card);border:1px solid var(--line)}
.outcome ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px;color:var(--fg-muted);font-size:.97rem}
.outcome li::before{content:"→ ";color:var(--fg)}
@media (max-width:860px){.outcomes{grid-template-columns:1fr}}
.ico{width:46px;height:46px;border-radius:12px;background:var(--card);display:grid;place-items:center;color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ico svg{width:22px;height:22px}

/* grids + cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:960px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:10px;align-content:start}
.card .ico{background:var(--bg-2);box-shadow:none}
.card p{color:var(--fg-muted);font-size:.98rem}
a.card{text-decoration:none;transition:transform .15s,box-shadow .15s}
a.card:hover{transform:translateY(-2px);box-shadow:0 20px 40px -24px rgba(0,0,0,.25)}


/* dark block (math) */
.band{padding-block:40px}
.dark{background:var(--dark);color:var(--on-dark);border-radius:32px;padding:72px 56px;position:relative;overflow:hidden;isolation:isolate}
.dark::before{content:"";position:absolute;width:620px;height:620px;right:-180px;top:-260px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(240,70,143,.45),rgba(123,92,255,.25) 45%,transparent 70%);filter:blur(30px)}
.dark h2,.dark h3{color:#fff}
.dark .lead{color:var(--muted-on-dark)}
.dark .eyebrow{color:var(--muted-on-dark)}
.dark .sec-head{margin-left:0;text-align:left;justify-items:start}
.math{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:stretch}
.math > *{min-width:0}
.receipt{background:#fffdf8;color:#1d1a14;border-radius:6px;padding:24px 22px 30px;font:500 .9rem/1.7 var(--mono);
  -webkit-mask:radial-gradient(circle 7px at 50% 100%,#0000 98%,#000) 50% 100%/18px 14px repeat-x,linear-gradient(#000,#000) 0 0/100% calc(100% - 13px) no-repeat;
  mask:radial-gradient(circle 7px at 50% 100%,#0000 98%,#000) 50% 100%/18px 14px repeat-x,linear-gradient(#000,#000) 0 0/100% calc(100% - 13px) no-repeat}
.receipt h4{margin:0 0 10px;font:600 .78rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.receipt .row{display:flex;justify-content:space-between;gap:12px}
.receipt hr{border:0;border-top:1.5px dashed #c9c2b2;margin:10px 0}
.receipt .keep{font-weight:700;font-size:1.05rem}
.receipt .minus{color:#c0392b}
.receipt .plus{color:#127a4b}
.math-copy{display:grid;gap:18px;align-content:center}
.bignum{font:700 clamp(3rem,7vw,4.8rem)/1 var(--display);letter-spacing:-.05em;background:linear-gradient(90deg,#FFC46B,#FA9A1F);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.footnote{font-size:.82rem;color:var(--muted-on-dark)}
@media (max-width:900px){.math{grid-template-columns:1fr}.dark{padding:48px 22px;border-radius:24px}}

/* feature rows */
.features{display:grid;gap:24px}
.feat{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:48px}
.feat.flip .feat-media{order:-1}
.feat-copy{display:grid;gap:18px;min-width:0}
.checks{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--fg-muted)}
.checks li svg{width:20px;height:20px;color:var(--g2);margin-top:3px}
.checks li b{color:var(--fg);font-weight:600}
.feat-media{border-radius:20px;padding:28px;min-width:0;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center}
.feat-media .ph{aspect-ratio:16/10;width:100%;max-width:100%;background:var(--card)}
.feat-media.tall .ph{aspect-ratio:9/16;max-width:260px;margin:0 auto}
.chip{display:inline-block;font:500 .78rem var(--mono);background:var(--bg-2);color:var(--fg-muted);padding:5px 11px;border-radius:999px;justify-self:start;border:1px solid var(--line)}
@media (max-width:860px){.feat{grid-template-columns:1fr;gap:28px;padding:24px}.feat.flip .feat-media{order:0}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:grid;gap:10px;align-content:start}
.step .n{font:600 2.6rem/1 var(--display);letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;justify-self:start}
.step p{color:var(--fg-muted)}
.step .when{font:500 .78rem var(--mono);color:var(--fg-soft);border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* timeline */
.timeline{display:grid;border-left:2px solid var(--line);margin-left:8px}
.tl{position:relative;padding:0 0 34px 30px;display:grid;gap:6px}
.tl::before{content:"";position:absolute;left:-8px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--grad)}
.tl .when{font:500 .78rem var(--mono);color:var(--fg-soft)}
.tl p{color:var(--fg-muted);max-width:62ch}

/* split / phones */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split > *{min-width:0}
.phones{display:flex;gap:18px;justify-content:center}
.phones .phone{position:relative;width:210px}
.phones .phone:nth-child(2){margin-top:56px}
.stack{display:grid;gap:20px;align-content:start}
.stores{display:flex;flex-wrap:wrap;gap:10px}
.center .stores{justify-content:center}
.store{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:12px;background:var(--dark);color:#fff;text-decoration:none;line-height:1.15}
.store small{display:block;font-size:.68rem;opacity:.7}
.store strong{font-size:1rem;font-weight:600}
.store svg{width:22px;height:22px;flex:none}
@media (max-width:860px){.split{grid-template-columns:1fr}.phones .phone{width:46%}}

/* page hero (subpages) */
.page-hero{position:relative;padding-block:88px 40px;text-align:center;overflow:hidden}
.page-hero .wrap{display:grid;gap:48px}
.page-hero .copy{display:grid;gap:22px;justify-items:center;max-width:900px;margin:0 auto;min-width:0}
.page-hero .copy .ctas,.page-hero .copy .stores{justify-content:center}
.page-hero h1{font-size:clamp(2.5rem,6vw,4.8rem)}
.page-hero .media{max-width:1000px;width:100%;margin:0 auto}
.page-hero .media .feat-media{padding:28px;background:transparent}
.page-hero .media .feat-media .ph{aspect-ratio:16/9;background:var(--card);border-color:var(--ph-line)}
.page-hero.solo{padding-bottom:56px}
.crumbs{font:500 .78rem var(--mono);color:var(--fg-soft);display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--fg)}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 auto 28px;justify-content:center;background:var(--card);border:1px solid var(--line);padding:6px;border-radius:14px;width:fit-content;max-width:100%}
.tab{font:500 .95rem var(--body);padding:9px 16px;border-radius:9px;border:0;background:transparent;color:var(--fg-muted);cursor:pointer}
.tab[aria-selected="true"]{background:var(--dark);color:#fff}
.panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:44px;box-shadow:0 30px 60px -48px rgba(0,0,0,.35)}
.panel > *{min-width:0}
.panel ul{margin:0;padding-left:20px;color:var(--fg-muted);display:grid;gap:8px}
.panel .ph{aspect-ratio:16/10;background:var(--card)}
@media (max-width:860px){.panel{grid-template-columns:1fr;padding:24px}}

/* pricing */
.pricing{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:stretch}
.pricing > *{min-width:0}
.plan{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:40px;display:grid;gap:22px;align-content:start;position:relative;box-shadow:0 30px 60px -40px rgba(0,0,0,.3)}
.plan::before{content:"";position:absolute;inset:-1px;border-radius:28px;padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.price{display:flex;align-items:baseline;gap:8px}
.price strong{font:700 3.8rem/1 var(--display);letter-spacing:-.05em}
.price .blank{display:inline-block;min-width:2.2ch;border-bottom:3px solid var(--g2)}
.price span{color:var(--fg-muted)}
.incl{columns:2;column-gap:28px;margin:0;padding:0;list-style:none}
.incl li{break-inside:avoid;padding:5px 0 5px 26px;position:relative;font-size:.97rem}
.incl li::before{content:"";position:absolute;left:2px;top:11px;width:13px;height:7px;border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg)}
.vs{background:var(--bg-2);border-radius:28px;padding:40px;display:grid;gap:16px;align-content:start}
.tablewrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:.95rem;background:transparent}
table.t th,table.t td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{font:500 .74rem var(--mono);color:var(--fg-soft)}
table.t td.y{color:var(--good);font-weight:600}
table.t td.n{color:var(--bad)}
.tablewrap.boxed{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:8px 16px}
.tablewrap.boxed tr:last-child td{border-bottom:0}
@media (max-width:900px){.pricing{grid-template-columns:1fr}.incl{columns:1}.plan,.vs{padding:26px}}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:16px}
.calc > *{min-width:0}
.calc > .stack{padding:24px}
.field{display:grid;gap:10px}
.field label{font-weight:500;font-size:.98rem;display:flex;justify-content:space-between;gap:12px}
.field output{font:500 .95rem var(--mono);font-variant-numeric:tabular-nums;background:var(--bg-2);padding:2px 10px;border-radius:8px}
.field input[type=range]{width:100%;accent-color:var(--dark)}
.calc-out{background:var(--dark);color:var(--on-dark);border-radius:20px;padding:36px;display:grid;gap:12px;align-content:center;position:relative;overflow:hidden;isolation:isolate}
.calc-out::before{content:"";position:absolute;width:360px;height:360px;right:-120px;bottom:-160px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(255,122,47,.45),transparent 70%);filter:blur(20px)}
.calc-out .eyebrow{color:var(--muted-on-dark)}
.calc-out p{color:var(--muted-on-dark)}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.faq > *{min-width:0}
.faq .sec-head{margin:0;text-align:left;justify-items:start}
details{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:10px}
summary{cursor:pointer;font:600 1.05rem var(--body);letter-spacing:-.015em;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 1.4rem/1 var(--body);color:var(--fg-soft)}
details[open] summary::after{content:"–"}
details p{color:var(--fg-muted);margin-top:10px;max-width:62ch}
.faq-group + .faq-group{margin-top:48px}
.faq-group h3{margin-bottom:14px}
@media (max-width:860px){.faq{grid-template-columns:1fr;gap:24px}}

/* url list */
.urls{background:var(--dark);border-radius:20px;padding:28px;font:500 .88rem/2 var(--mono);color:var(--muted-on-dark);overflow-x:auto}
.urls b{color:#fff;font-weight:500}
.urls .new{color:#7be0ad}

/* forms */
.form{display:grid;gap:14px;background:var(--card);color:var(--fg);padding:32px;border-radius:24px;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(0,0,0,.3)}
.form label{font-size:.88rem;font-weight:500;display:block;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;font:400 1rem var(--body);padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.form textarea{min-height:96px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--fg);background:#fff}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .btn{width:100%}
.form .msg{font-size:.9rem;font-weight:500;color:var(--good)}
.form .msg.err{color:var(--bad)}
@media (max-width:560px){.form .row2{grid-template-columns:1fr}.form{padding:22px}}

/* final cta */
.final{background:var(--dark);color:#fff;border-radius:32px;padding:88px 32px;display:grid;gap:22px;justify-items:center;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.final::before{content:"";position:absolute;left:50%;bottom:-340px;width:900px;height:520px;translate:-50% 0;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,122,47,.7),rgba(240,70,143,.5) 45%,rgba(123,92,255,.35) 70%,transparent);filter:blur(30px)}
.final h2{color:#fff;max-width:18ch}
.final .lead{color:var(--muted-on-dark)}
@media (max-width:860px){.final{padding:56px 22px;border-radius:24px}}

/* people */
.person{display:grid;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 24px}
.person .ph{aspect-ratio:1;min-height:0}
.person h3,.person small,.person p{padding-inline:6px}
.person small{color:var(--fg-muted)}

/* footer */
footer{padding-block:72px 40px;color:var(--fg-muted);font-size:.93rem;border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.foot h5{margin:0 0 14px;font:500 .8rem var(--body);color:var(--fg)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--fg)}
footer .big{font:700 clamp(3rem,12vw,9rem)/.9 var(--display);letter-spacing:-.07em;color:#ece9e2;margin-top:48px;user-select:none}
.legal{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.85rem;color:var(--fg-soft)}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}.foot > :first-child{grid-column:1/-1}}

/* ---------- v3: mock UI illustrations ---------- */
.viz{background:var(--bg);border:1px solid var(--line);border-radius:16px;min-height:240px;display:grid;place-items:center;padding:28px 20px;overflow:hidden;position:relative;margin-bottom:8px}
.viz::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(252,251,248,.0));pointer-events:none}
.mock{width:100%;max-width:440px;font-size:.88rem;line-height:1.4}
.m-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 24px -16px rgba(0,0,0,.25)}
.m-search .bar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 16px;color:var(--fg-muted);box-shadow:0 6px 16px -12px rgba(0,0,0,.3)}
.m-search .bar svg{width:16px;height:16px;flex:none}
.m-search .res{padding:14px 16px;margin-top:10px;display:grid;gap:3px}
.m-search .res.top{border-color:#1c1c1c;box-shadow:0 14px 30px -18px rgba(0,0,0,.45)}
.m-search .res .u{font:500 .72rem var(--mono);color:var(--fg-soft)}
.m-search .res b{font-weight:600;font-size:.98rem}
.m-search .res .meta{display:flex;gap:10px;align-items:center;color:var(--fg-muted);font-size:.8rem}
.m-search .res .stars{color:#e8a500;letter-spacing:1px}
.m-search .res .go{margin-left:auto;background:var(--dark);color:#fff;border-radius:8px;padding:4px 10px;font-size:.75rem}
.m-search .res.dim{opacity:.55}
.rank{position:absolute;top:-9px;right:12px;font:600 .68rem var(--mono);background:var(--grad);color:#fff;border-radius:999px;padding:2px 8px}
.m-push{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:14px;border-radius:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
.m-push + .m-push{margin-top:10px;transform:scale(.95);opacity:.6}
.m-push .ai{width:38px;height:38px;border-radius:10px;background:var(--grad);display:grid;place-items:center}
.m-push .ai svg{width:18px;height:18px}
.m-push .h{display:flex;justify-content:space-between;font-weight:600;font-size:.84rem}
.m-push .h span{font-weight:400;color:var(--fg-soft);font-size:.75rem}
.m-push p{color:var(--fg-muted);font-size:.84rem}
.m-rewards{padding:18px;display:grid;gap:12px}
.m-rewards .top{display:flex;justify-content:space-between;align-items:baseline}
.m-rewards .pts{font:700 1.8rem/1 var(--display);letter-spacing:-.04em}
.m-rewards .pts small{font:500 .8rem var(--body);color:var(--fg-soft);letter-spacing:0}
.meter{height:10px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.meter i{display:block;height:100%;width:80%;background:var(--grad);border-radius:999px}
.m-rewards .goal{display:flex;justify-content:space-between;font-size:.8rem;color:var(--fg-muted)}
.punch{display:flex;gap:6px}
.punch i{width:22px;height:22px;border-radius:50%;border:1.5px dashed var(--ph-line)}
.punch i.on{border:0;background:var(--dark)}
.m-sales{padding:18px;display:grid;gap:14px}
.m-sales .k{display:flex;justify-content:space-between;align-items:end}
.m-sales .k b{font:700 1.9rem/1 var(--display);letter-spacing:-.045em}
.m-sales .k small{color:var(--fg-soft);font-size:.78rem;display:block;margin-bottom:4px}
.m-sales .k .up{font:500 .75rem var(--mono);color:var(--good);background:#e6f5ec;border-radius:6px;padding:2px 7px}
.bars{display:flex;align-items:end;gap:6px;height:90px}
.bars i{flex:1;background:var(--bg-2);border-radius:5px 5px 2px 2px}
.bars i.hi{background:var(--dark)}
.bars i.now{background:var(--grad)}
.m-hours{display:flex;justify-content:space-between;font:500 .66rem var(--mono);color:var(--fg-soft)}
.m-camp{padding:6px 0}
.m-camp .r{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);font-size:.84rem}
.m-camp .r:last-child{border-bottom:0}
.m-camp .r b{font-weight:600}
.m-camp .r small{display:block;color:var(--fg-soft);font-size:.74rem}
.m-camp .on{width:30px;height:18px;border-radius:999px;background:var(--dark);position:relative}
.m-camp .on::after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.m-camp .tag{font:500 .7rem var(--mono);color:var(--fg-muted);background:var(--bg-2);border-radius:6px;padding:2px 7px}
.sample{position:absolute;left:14px;bottom:10px;font:500 .64rem var(--mono);color:var(--fg-soft)}

/* feature tabs (home) */
.ftabs .tabs{margin-bottom:24px}
.ftabs .panel .ph{aspect-ratio:16/10}
.ftabs .browser .ph{margin:0;border:0;border-radius:0;aspect-ratio:16/10}

/* logo-style trust row */
.strip .chips span{display:inline-flex;align-items:center;gap:8px}
.strip .chips svg{width:18px;height:18px}

/* testimonial-style quote */
.quote{max-width:900px;margin:0 auto;text-align:center;display:grid;gap:22px;justify-items:center}
.quote blockquote{margin:0;font:600 clamp(1.5rem,3vw,2.2rem)/1.25 var(--display);letter-spacing:-.035em}
.quote .who{display:flex;gap:12px;align-items:center;color:var(--fg-muted);font-size:.95rem}
.quote .who .ph{width:44px;height:44px;min-height:0;border-radius:50%;padding:0}

/* DinerMagnet: logo + product screenshots */
.logo-img{height:30px;width:auto;display:block}
footer .logo-img{height:34px}
img.shot{display:block;width:100%;height:auto;max-width:100%}
.browser img.shot{border-radius:0}
.phone-screen img.shot{flex:1;width:100%;height:100%;min-height:0;object-fit:cover;object-position:top;border-radius:24px}
.feat-media > img.shot,.media .feat-media > img.shot,.panel > img.shot{border-radius:14px;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(42,17,37,.45);background:var(--card)}
.panel .phones{justify-content:center}
.ai-band{background:linear-gradient(135deg,#2A1125,#4A1E3D);color:#fff;border-radius:32px;padding:64px 56px;position:relative;overflow:hidden;isolation:isolate}
.ai-band:before{content:"";position:absolute;inset:auto -10% -40% 40%;height:80%;background:radial-gradient(closest-side,rgba(250,154,31,.35),transparent);z-index:-1}
.ai-band .eyebrow{color:#FFC46B}
.ai-band h2{color:#fff}.ai-band .lead{color:rgba(255,255,255,.75)}
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:32px 0}
.ai-item{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px}
.ai-item b{display:block;margin-bottom:4px;color:#fff}.ai-item span{color:rgba(255,255,255,.7);font-size:.92rem}
.ai-item i{font-style:normal;color:#FA9A1F;font-size:1.1rem;margin-right:6px}
.ai-shots{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ai-shots img{border-radius:14px;border:1px solid rgba(255,255,255,.15);width:100%;display:block}
@media (max-width:860px){.ai-band{padding:40px 22px}.ai-grid{grid-template-columns:1fr}.ai-shots{grid-template-columns:1fr}}
.demo-frame{width:100%;height:min(88vh,920px);border:1px solid var(--line);border-radius:20px;box-shadow:0 40px 80px -40px rgba(42,17,37,.45);background:#fff;display:block}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
@media (max-width:760px){.roles{grid-template-columns:1fr}}
.shot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.shot-grid figure{margin:0}.shot-grid figcaption{font-size:.9rem;color:var(--fg-muted);margin-top:10px}
.shot-grid img{border-radius:14px;border:1px solid var(--line);width:100%;display:block;box-shadow:0 20px 40px -24px rgba(42,17,37,.35)}
@media (max-width:760px){.shot-grid{grid-template-columns:1fr}}
.ai-shots img,.shot-grid img{height:auto}

/* ===== v3: dark hub hero ===== */
.hero2{position:relative;background:radial-gradient(1200px 600px at 50% 105%,rgba(250,154,31,.22),transparent 60%),radial-gradient(900px 500px at 50% 40%,#3A1A33,transparent 70%),#170812;color:#fff;padding:96px 0 40px;overflow:hidden;isolation:isolate}
.hero2-copy{text-align:center;display:grid;justify-items:center;gap:22px;max-width:860px}
.hero2 h1{font:700 clamp(2.6rem,6.4vw,4.9rem)/1.02 var(--display);letter-spacing:-.05em;color:#fff;margin:0}
.hero2 .mango{background:linear-gradient(90deg,#FFC46B,#FA9A1F);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2 .lead{color:rgba(255,255,255,.72);max-width:680px}
.pill.dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.8);box-shadow:none}
.pill.dark b{background:#FA9A1F;color:#2A1125}
.pill.dark:hover{color:#fff}
.btn-mango{background:#FA9A1F;color:#2A1125;font-weight:600;box-shadow:0 10px 30px -10px rgba(250,154,31,.7)}
.btn-mango:hover{background:#FFB04A}
.fine.on-dark{color:rgba(255,255,255,.6)}
.hub{position:relative;height:600px;margin-top:56px}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;fill:none}
.hub-lines path{stroke:url(#hl);stroke-width:1.6}
.hub-lines path.run{stroke:#FFC46B;stroke-width:2.2;stroke-dasharray:6 220;animation:hubrun 3.2s linear infinite}
@keyframes hubrun{to{stroke-dashoffset:-226}}
@media (prefers-reduced-motion:reduce){.hub-lines path.run{animation:none;display:none}}
.src{position:absolute;top:0;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-weight:500;font-size:.95rem;white-space:nowrap;backdrop-filter:blur(6px)}
.src .si{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:rgba(250,154,31,.18);color:#FFC46B;font-weight:700;font-size:.8rem}
.s1{left:21.5%}.s2{left:50%}.s3{left:78.5%}
.core{position:absolute;left:50%;top:250px;transform:translate(-50%,-10%);width:118px;height:118px;border-radius:30px;background:linear-gradient(145deg,#FFB04A,#FA9A1F 45%,#E2557A);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(250,154,31,.08),0 30px 70px -10px rgba(250,154,31,.6);z-index:2}
.core img{width:62px;height:auto}
.hc{position:absolute;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:18px 20px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);backdrop-filter:blur(10px);z-index:3}
.hc h4{margin:0 0 4px;font:600 .98rem var(--body);color:#fff;display:flex;align-items:center;gap:8px}
.hc p{margin:0;color:rgba(255,255,255,.6);font-size:.88rem}
.donut{left:2%;top:120px;width:300px}
.dn{display:flex;gap:18px;align-items:center;margin-top:12px}
.dn svg{width:110px;height:110px;transform:rotate(-90deg)}
.leg{display:grid;gap:0}.leg span{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.65);font-size:.8rem}
.leg i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3)}
.leg b{font:600 1.5rem/1.1 var(--display);color:#fff}.leg small{color:rgba(255,255,255,.4);font-size:.75rem;margin-bottom:6px}
.regulars{left:50%;top:390px;transform:translateX(-50%);width:330px}
.regulars svg{width:100%;height:80px;display:block;margin:10px 0 6px}
.kpi{display:flex;align-items:baseline;justify-content:space-between}.kpi b{font:700 2.2rem/1 var(--display);color:#fff}
.up{color:#5FD3A0;font-size:.82rem}
.google{right:2%;top:110px;width:300px}
.gdot{width:22px;height:22px;border-radius:50%;background:#fff;color:#FA9A1F;display:grid;place-items:center;font-size:.75rem}
.gg{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.12);border-radius:12px;margin-top:12px}
.gg>div{padding:12px;text-align:center;display:grid;gap:2px}.gg>div+div{border-left:1px solid rgba(255,255,255,.12)}
.gg small{font:500 .68rem var(--mono);color:rgba(255,255,255,.5);letter-spacing:.06em}.gg b{font:700 1.8rem/1.1 var(--display);color:#fff}
.stars{color:#FFC46B;font-size:.8rem;letter-spacing:1px}
.rr{margin-top:12px;text-align:center;color:#5FD3A0;font-size:.82rem}
.reply{left:4%;top:350px;width:330px}
.ai-chip{display:inline-block;font-size:.8rem;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid rgba(250,154,31,.5);color:#FFC46B;background:rgba(250,154,31,.1);margin-bottom:10px}
.reply p{color:rgba(255,255,255,.82);line-height:1.5;font-size:.9rem}
.rbtn{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.rbtn span{font-size:.8rem;padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8)}.rbtn .go{background:#FA9A1F;border-color:#FA9A1F;color:#2A1125;font-weight:600}
.vip{right:2%;top:430px;width:360px;display:flex;align-items:center;gap:14px;border-radius:18px;padding:14px 18px}
.rk{width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,#FFD38A,#E9A23B);color:#3A1A33;font-weight:700;display:grid;place-items:center}
.av{width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,#E2557A,#4A1E3D);display:grid;place-items:center;font-weight:600;font-size:.85rem;color:#fff;border:2px solid rgba(255,255,255,.25)}
.nm{font:600 1.1rem var(--display);color:#fff;flex:1}.sp{font:700 1.1rem var(--display);color:#fff}.vv{color:rgba(255,255,255,.45);font-size:.88rem}
.vip .tag{border:1.5px solid #FFC46B;color:#FFC46B;border-radius:999px;padding:3px 12px;font-weight:700;font-size:.82rem}
@media (max-width:1080px){.donut,.google{width:260px}.reply{width:290px}.vip{width:330px}}
@media (max-width:900px){
  .hub{height:auto;display:grid;grid-template-columns:1fr;gap:14px;margin-top:40px;max-width:460px;margin-inline:auto}
  .hub-lines{display:none}
  .src,.core,.hc{position:static;transform:none;width:auto}
  .src{justify-self:start}
  .core{justify-self:center;margin:8px 0;width:96px;height:96px;border-radius:26px}.core img{width:52px}
  .vip{gap:10px}.vv{display:none}
}

/* cute product menu icons */
.dd-menu .mi{border:0;width:40px;height:40px;border-radius:13px;transition:transform .15s}
.dd-menu a:hover .mi{transform:rotate(-6deg) scale(1.06)}
.dd-menu .mi svg{width:22px;height:22px}
.mi-website{background:#FFF1DC!important;color:#F08A00}
.mi-ordering{background:#F5E6F0!important;color:#4A1E3D}
.mi-app{background:#FDE5EC!important;color:#D9466F}
.mi-marketing{background:#E3F5EA!important;color:#2E9460}
.mi-ai{background:linear-gradient(145deg,#FFB04A,#FA9A1F 45%,#E2557A)!important;color:#fff}

/* store badges */
.stores .badge{display:inline-block;line-height:0;border-radius:9px;transition:transform .15s}
.stores .badge:hover{transform:translateY(-1px)}
.stores .badge img{height:48px;width:auto}

/* why grid, founding */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why-i{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px}
.why-i h3{margin:14px 0 6px;font-size:1.12rem}.why-i p{margin:0;color:var(--fg-muted)}
.wn{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 10px;border-radius:14px;background:#FFF1DC;color:#B85F00;font:700 1rem var(--display)}
.founding{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.facts>div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:6px}
.facts b{font:700 2rem/1 var(--display);letter-spacing:-.04em;color:#4A1E3D}.facts span{color:var(--fg-muted);font-size:.92rem}
@media (max-width:900px){.why{grid-template-columns:1fr}.founding{grid-template-columns:1fr}}
.ai-shot img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid rgba(255,255,255,.15)}
.cap{margin:0;color:var(--fg)}
.split2{display:flex;gap:18px;flex-wrap:wrap}.split2 b{color:#fff}
.vs .t td:nth-child(2){font-weight:600}
.pricing{grid-template-columns:1fr}.pricing .plan .incl{columns:3}@media(max-width:760px){.pricing .plan .incl{columns:1}}
@media (max-width:900px){.hub .reply,.hub .s3{display:none}.hub .src{font-size:.88rem;padding:8px 12px}.pill.dark{font-size:.8rem;padding:5px 12px 5px 5px;max-width:100%}}

/* ===== v4 ===== */
.btn-primary{background:#FA9A1F;color:#2A1125;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 20px -10px rgba(250,154,31,.8)}
.btn-primary:hover{background:#FFAB3F}
/* AI + live demo (light) */
.ai2{background:linear-gradient(180deg,#FFF8EE,#FBF7F1)}
.ai2-head{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start;margin-bottom:36px}
.ai-eb{color:#C26A00}
.ai2-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.ai2-list li{display:grid;grid-template-columns:28px 1fr;column-gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.ai2-list i{grid-row:span 2;font-style:normal;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,#FFB04A,#FA9A1F 50%,#E2557A);color:#fff;font-size:.8rem}
.ai2-list b{font-weight:600}.ai2-list span{color:var(--fg-muted);font-size:.9rem}
.live{border-radius:22px;border:1px solid var(--line);background:#fff;overflow:hidden;box-shadow:0 50px 90px -50px rgba(74,30,61,.45)}
.live-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);background:#FBF8F3;font-size:.86rem;color:var(--fg-muted)}
.live-bar i{width:10px;height:10px;border-radius:50%;background:#e2ded5}
.live-bar span{margin-left:10px;flex:1}.live-bar a{color:var(--fg);font-weight:600;text-decoration:none}
.live iframe{display:block;width:100%;height:760px;border:0;background:#fff}
.live-mobile{display:none;text-align:center}
.ai2-more{text-align:center;margin-top:22px}
@media (max-width:900px){.ai2-head{grid-template-columns:1fr;gap:24px}.ai2-list{grid-template-columns:1fr}}
@media (max-width:760px){.live{display:none}.live-mobile{display:block}}
/* why bento */
.bx{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bx-c{background:#fff;border:1px solid var(--line);border-radius:26px;padding:22px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(0,0,0,.03);transition:transform .2s,box-shadow .2s}
.bx-c:hover{transform:translateY(-2px);box-shadow:0 24px 40px -28px rgba(74,30,61,.35)}
.bx-2{grid-column:span 2}.bx-3{grid-column:span 3}.bx-4{grid-column:span 4}
.bx-c h3{margin:18px 0 4px;font-size:1.15rem;letter-spacing:-.02em}.bx-c p{margin:0;color:var(--fg-muted);font-size:.95rem}
.bx-v{border-radius:18px;background:#FBF7F1;padding:18px;flex:1;min-height:170px;display:grid;align-content:center}
.big0{font:800 4.2rem/1 var(--display);letter-spacing:-.06em;background:linear-gradient(90deg,#FA9A1F,#E2557A);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:12px}
.bars3{display:grid;gap:8px}.bars3>div{display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:8px;font-size:.8rem;color:var(--fg-muted)}
.bars3 i{height:8px;border-radius:99px;display:block}.bars3 .r{background:#E8B4B4}.bars3 .g{background:#D9D4CB}.bars3 .m{background:#FA9A1F;min-width:6px}.bars3 b{text-align:right;color:var(--fg)}
.tpls{grid-template-columns:repeat(4,1fr);gap:12px}
.tp{border-radius:12px;padding:10px;display:grid;gap:6px;aspect-ratio:3/4;box-shadow:0 10px 20px -14px rgba(0,0,0,.4)}
.tp i{height:44%;border-radius:8px;display:block}.tp b{height:8px;width:70%;border-radius:4px;display:block}.tp span{height:6px;border-radius:3px;display:block;opacity:.5}
.t1{background:#1E0F18}.t1 i{background:radial-gradient(circle at 60% 50%,#F2C14E 0 22%,#3A2230 23%)}.t1 b{background:#FA9A1F}.t1 span{background:#fff}
.t2{background:#FFF6EA}.t2 i{background:#F4D7B0}.t2 b{background:#4A1E3D}.t2 span{background:#4A1E3D}
.t3{background:#11201A}.t3 i{background:linear-gradient(135deg,#3C6E57,#9BD3B0)}.t3 b{background:#E9F4EC}.t3 span{background:#9BD3B0}
.t4{background:#fff;border:1px solid var(--line)}.t4 i{background:linear-gradient(135deg,#FDE2E8,#F7A6B9)}.t4 b{background:#D9466F}.t4 span{background:#999}
.t1{transform:rotate(-3deg)}.t3{transform:rotate(2deg)}
.chat{gap:10px}.chat .me{justify-self:end;background:#2A1125;color:#fff;padding:10px 14px;border-radius:16px 16px 4px 16px;font-size:.88rem;max-width:85%}
.chat .bot{background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 14px;display:grid;gap:2px;max-width:88%}
.chat .bot small{color:#C26A00;font-weight:600}.chat .bot span{color:var(--fg-muted);font-size:.85rem}.chat .bot em{font-style:normal;justify-self:start;margin-top:6px;background:#FA9A1F;color:#2A1125;font-weight:600;font-size:.8rem;padding:5px 10px;border-radius:8px}
.srch{gap:10px}.srch .q{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:.88rem;color:var(--fg-muted)}
.srch .ans{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px}.srch small{color:#C26A00;font-weight:600}.srch p{font-size:.88rem;color:var(--fg);margin:4px 0 8px}
.srch .cta{display:inline-block;font-size:.8rem;font-weight:600;border:1px solid var(--line);border-radius:8px;padding:4px 10px}
.pos{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.dev{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:2px;text-align:center;min-height:96px;align-content:center}
.dev span{font-weight:600}.dev small{color:var(--fg-muted)}.dev.dm{border:2px solid #FA9A1F;background:#FFF6EA}
.plus{font:700 1.6rem var(--display);color:#C26A00}
.guests{gap:8px}.guests>div{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.guests .a{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:700;color:#fff;background:#4A1E3D}.guests .b2{background:#E2557A}.guests .b3{background:#FA9A1F}
.guests b{flex:1;font-weight:600;font-size:.9rem}.guests small{color:var(--fg-muted)}
.guests em{justify-self:end;font-style:normal;font-size:.8rem;font-weight:600;border:1px solid var(--line);border-radius:8px;padding:4px 10px;background:#fff}
@media (max-width:900px){.bx{grid-template-columns:1fr}.bx-2,.bx-3,.bx-4{grid-column:auto}}
/* boba builder */
.boba{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;display:grid;gap:14px;box-shadow:0 30px 60px -36px rgba(74,30,61,.4);max-width:440px;justify-self:center;width:100%}
.bb-h{display:flex;gap:14px;align-items:center}.bb-h small{font:600 .7rem var(--mono);color:#C26A00;letter-spacing:.08em}.bb-h b{display:block;font-size:1.1rem}.bb-h em{font-style:normal;color:var(--fg-muted)}
.cup{width:56px;height:72px;position:relative;border-radius:6px 6px 14px 14px;background:linear-gradient(180deg,#F3E2CC 0 55%,#C88B54 100%);border:2px solid #E7D6C2;overflow:hidden;flex:none}
.cup i{position:absolute;left:24px;top:-8px;width:6px;height:40px;background:#E2557A;border-radius:3px;transform:rotate(8deg)}
.cup span{position:absolute;width:9px;height:9px;border-radius:50%;background:#3A1A10;bottom:6px}
.cup span:nth-of-type(1){left:6px}.cup span:nth-of-type(2){left:17px;bottom:10px}.cup span:nth-of-type(3){left:28px}.cup span:nth-of-type(4){left:38px;bottom:11px}.cup span:nth-of-type(5){left:12px;bottom:16px}
.bb-g small{display:block;font-weight:600;font-size:.82rem;margin-bottom:6px}
.bb-g div{display:flex;flex-wrap:wrap;gap:6px}.bb-g span{font-size:.82rem;border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--fg-muted)}
.bb-g span.on{background:#2A1125;border-color:#2A1125;color:#fff}
.bb-add{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:14px;font-size:.88rem}
.bb-add b{background:#FA9A1F;color:#2A1125;padding:10px 14px;border-radius:12px}
/* pricing tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.tier{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:14px}
.tier.pop{border:2px solid #FA9A1F;box-shadow:0 30px 60px -36px rgba(250,154,31,.6);background:linear-gradient(180deg,#FFF8EE,#fff 40%)}
.t-badge{position:absolute;top:-13px;left:28px;background:#FA9A1F;color:#2A1125;font-weight:600;font-size:.8rem;padding:4px 12px;border-radius:999px}
.t-top h3{margin:0;font-size:1.3rem}.t-top p{margin:2px 0 0;color:var(--fg-muted)}
.t-price{display:flex;align-items:baseline;gap:6px}.t-price strong{font:700 3.2rem/1 var(--display);letter-spacing:-.05em}.t-price span{color:var(--fg-muted)}
.t-sub{margin:0;color:var(--fg-muted);font-size:.92rem;min-height:3em}
.tier .btn{justify-content:center}
.incl1{list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:9px}
.incl1 li{position:relative;padding-left:24px;font-size:.95rem}
.incl1 li::before{content:"";position:absolute;left:2px;top:6px;width:12px;height:6px;border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg)}
.t-multi{margin-top:16px;background:#FBF7F1;border:1px solid var(--line);border-radius:18px;padding:18px 22px;display:grid;gap:10px}
.t-notes{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--fg-muted);font-size:.9rem}
.cmp td:nth-child(2){font-weight:600}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}
/* live demo stage */
.live-stage{position:relative;padding:28px;border-radius:32px;background:linear-gradient(180deg,#F3ECF0,#EFE6EC);border:1px solid #E6DAE2}
.live-stage::before{content:"";position:absolute;inset:auto 10% -30px 10%;height:120px;background:radial-gradient(closest-side,rgba(250,154,31,.25),transparent);z-index:-1;filter:blur(10px)}
.live-stage .live{box-shadow:0 40px 80px -40px rgba(74,30,61,.5)}
.live-bar{background:#FFF7EB;border-bottom:1px solid #F3E2C8}
.live-msg{display:flex;align-items:center;gap:12px;margin-left:10px;flex:1;min-width:0}
.live-pill{display:inline-flex;align-items:center;gap:7px;font:600 .72rem var(--mono);letter-spacing:.08em;color:#fff;background:#4A1E3D;padding:5px 10px;border-radius:999px;font-style:normal;white-space:nowrap}
.live-pill u{width:7px;height:7px;border-radius:50%;background:#5FD3A0;box-shadow:0 0 0 0 rgba(95,211,160,.7);animation:livepulse 1.6s infinite}
@keyframes livepulse{70%{box-shadow:0 0 0 7px rgba(95,211,160,0)}100%{box-shadow:0 0 0 0 rgba(95,211,160,0)}}
@media (prefers-reduced-motion:reduce){.live-pill u{animation:none}}
.live-msg strong{font-weight:600;color:var(--fg);font-size:.95rem}
.live-msg mark{background:linear-gradient(90deg,#FA9A1F,#E2557A);color:#fff;padding:2px 8px;border-radius:7px;font-weight:600}
@media (max-width:760px){.live-stage{padding:0;background:none;border:0}}
/* pricing compare */
.cmp th,.cmp td{text-align:center}.cmp th:first-child,.cmp td:first-child{text-align:left}
.cmp .grp th{border-bottom:0;padding-bottom:4px}
.cmp .dmh{background:#4A1E3D;color:#fff;border-radius:12px 12px 0 0;font:600 .8rem var(--mono);letter-spacing:.06em}
.cmp td.dm,.cmp th.dm{background:#FBF4F8}
.cmp .pop{background:#FFF1DC!important}
.cmp td.dm{color:#2A1125;font-weight:600}
.cmp td.no{color:#B9B2AA;font-weight:400}
.cmp .oth{vertical-align:bottom;color:var(--fg-muted)}
.cmp th.dm{font-weight:700;color:#2A1125}
.t.cmp{table-layout:fixed;width:100%;min-width:820px}
.t.cmp th,.t.cmp td{text-align:center;vertical-align:middle}
.t.cmp th:first-child,.t.cmp td:first-child{text-align:left;width:24%}
.t.cmp td small{display:block;font-weight:400;color:var(--fg-muted);font-size:.78rem}
.t.cmp .oth{width:15%}
/* billing toggle, plan facts, keep, add-ons */
.billing{display:flex;justify-content:center;gap:4px;margin:0 auto 34px;padding:5px;border:1px solid var(--line);border-radius:999px;background:#fff;width:max-content}
.bill{border:0;background:transparent;font:500 .95rem var(--body);padding:9px 18px;border-radius:999px;color:var(--fg-muted);cursor:pointer;display:flex;align-items:center;gap:8px}
.bill em{font-style:normal;font-size:.75rem;font-weight:600;background:#E3F5EC;color:#137A4A;padding:3px 8px;border-radius:999px}
.bill[aria-pressed="true"]{background:#2A1125;color:#fff}
.bill[aria-pressed="true"] em{background:#FA9A1F;color:#2A1125}
.incl1 li.plus{padding-left:0;font-weight:600;color:var(--fg)}.incl1 li.plus::before{display:none}
.t-facts{margin:auto 0 0;padding-top:16px;border-top:1px dashed var(--line);display:grid;gap:10px}
.t-facts div{display:grid;grid-template-columns:96px 1fr;gap:8px;font-size:.88rem}
.t-facts dt{color:var(--fg-muted)}.t-facts dd{margin:0;font-weight:500}
.keep{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.keep-i{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px}
.keep-i h3{margin:14px 0 6px;font-size:1.1rem}.keep-i p{margin:0;color:var(--fg-muted)}
.k-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#FFF1DC;color:#B85F00;font-size:1.1rem}
.addons td small{display:block;color:var(--fg-muted);font-size:.85rem;margin-top:2px}
.addons td{vertical-align:middle}
@media (max-width:900px){.keep{grid-template-columns:1fr}}