/* ==========================================================================
   Nexora — Restaurant Operating Platform
   One stylesheet behind every page on the site.

   Structure
     1. Tokens          brand palette, type, spacing, elevation
     2. Base            reset, typography, links
     3. Motion          reveal system, keyframes, reduced-motion opt-out
     4. Shell           header, nav, footer
     5. Hero            the dark flagship band
     6. Components      buttons, cards, stats, media, tables, accordions
     7. Content         classes used by the article, tool and comparison pages
     8. Utilities

   Palette is sampled from the Nexora mark itself: deep red #8E120F through
   #CA251A to #F04A16 and the gold #FFB300. Nothing here invents a colour.
   ========================================================================== */

/* ------------------------------------------------------------------ 1 */
:root{
  /* brand — identical in both themes, these are the logo's own colours */
  --brand:#CA251A;
  --brand-deep:#8E120F;
  --brand-orange:#F04A16;
  --brand-amber:#FFB300;
  --brand-grad:linear-gradient(118deg,#8E120F 0%,#CA251A 34%,#F04A16 68%,#FFB300 100%);
  --brand-grad-soft:linear-gradient(118deg,rgba(202,37,26,.12),rgba(240,74,22,.10) 60%,rgba(255,179,0,.12));

  /* light surfaces */
  --bg:#FBF9F7;
  --bg-alt:#F5F1EC;
  --surface:#FFFFFF;
  --surface-2:#F4F0EB;
  --surface-3:#EAE4DC;
  --rule:rgba(20,16,15,.12);
  --rule-soft:rgba(20,16,15,.065);
  --text:#14100F;
  --muted:rgba(20,16,15,.66);
  --faint:rgba(20,16,15,.44);

  --accent:#B81F14;          /* passes AA on --bg */
  --accent-bright:#F04A16;
  --accent-soft:rgba(202,37,26,.09);
  --accent-line:rgba(202,37,26,.22);

  --good:#1B6F4C;
  --good-soft:rgba(27,111,76,.10);
  --warn:#8A5D08;
  --warn-soft:rgba(255,179,0,.14);
  --bad:#B3300B;
  --bad-soft:rgba(179,48,11,.09);

  /* the hero band is dark in both themes — these never flip */
  --ink:#0A0807;
  --ink-2:#141010;
  --on-ink:#FBF7F4;
  --on-ink-muted:rgba(251,247,244,.68);
  --on-ink-faint:rgba(251,247,244,.42);
  --on-ink-rule:rgba(251,247,244,.14);

  --shadow-xs:0 1px 2px rgba(20,16,15,.05);
  --shadow-sm:0 1px 3px rgba(20,16,15,.06),0 6px 16px -10px rgba(20,16,15,.14);
  --shadow:0 2px 6px rgba(20,16,15,.05),0 16px 40px -18px rgba(20,16,15,.20);
  --shadow-lg:0 4px 12px rgba(20,16,15,.06),0 40px 80px -28px rgba(20,16,15,.28);
  --shadow-brand:0 18px 50px -22px rgba(202,37,26,.55);

  --display:"Bricolage Grotesque","Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --maxw:1280px;
  --measure:68ch;
  --pad:clamp(20px,4.2vw,64px);
  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --header-h:82px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0908;
    --bg-alt:#100C0B;
    --surface:#151110;
    --surface-2:#1C1716;
    --surface-3:#251E1C;
    --rule:rgba(250,244,240,.13);
    --rule-soft:rgba(250,244,240,.07);
    --text:#F8F4F1;
    --muted:rgba(248,244,241,.66);
    --faint:rgba(248,244,241,.42);
    --accent:#FF7A5C;
    --accent-bright:#F04A16;
    --accent-soft:rgba(255,122,92,.13);
    --accent-line:rgba(255,122,92,.26);
    --good:#4FC08D;
    --good-soft:rgba(79,192,141,.13);
    --warn:#FFC93C;
    --warn-soft:rgba(255,201,60,.14);
    --bad:#FF7A52;
    --bad-soft:rgba(255,122,82,.13);
    --shadow-xs:0 1px 2px rgba(0,0,0,.5);
    --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 6px 18px -10px rgba(0,0,0,.8);
    --shadow:0 2px 6px rgba(0,0,0,.5),0 18px 44px -20px rgba(0,0,0,.9);
    --shadow-lg:0 4px 14px rgba(0,0,0,.55),0 44px 90px -30px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
  --bg:#0B0908; --bg-alt:#100C0B; --surface:#151110; --surface-2:#1C1716; --surface-3:#251E1C;
  --rule:rgba(250,244,240,.13); --rule-soft:rgba(250,244,240,.07);
  --text:#F8F4F1; --muted:rgba(248,244,241,.66); --faint:rgba(248,244,241,.42);
  --accent:#FF7A5C; --accent-bright:#F04A16; --accent-soft:rgba(255,122,92,.13);
  --accent-line:rgba(255,122,92,.26);
  --good:#4FC08D; --good-soft:rgba(79,192,141,.13);
  --warn:#FFC93C; --warn-soft:rgba(255,201,60,.14);
  --bad:#FF7A52; --bad-soft:rgba(255,122,82,.13);
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 6px 18px -10px rgba(0,0,0,.8);
  --shadow:0 2px 6px rgba(0,0,0,.5),0 18px 44px -20px rgba(0,0,0,.9);
  --shadow-lg:0 4px 14px rgba(0,0,0,.55),0 44px 90px -30px rgba(0,0,0,.95);
}

/* ------------------------------------------------------------------ 2 */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.62;
  font-feature-settings:"cv05" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-bright)}
:focus-visible{outline:2.5px solid var(--accent-bright);outline-offset:3px;border-radius:4px}
::selection{background:rgba(240,74,22,.22)}
hr{border:0;border-top:1px solid var(--rule-soft);margin:44px 0}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.028em;
  line-height:1.06;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,78px);font-weight:800;letter-spacing:-.036em}
h2{font-size:clamp(29px,3.9vw,50px);line-height:1.08}
h3{font-size:clamp(21px,2.3vw,28px);line-height:1.18;letter-spacing:-.02em}
h4{font-size:clamp(17px,1.6vw,20px);line-height:1.28;letter-spacing:-.012em}
p{margin:0 0 18px;max-width:var(--measure)}
ul,ol{max-width:var(--measure);padding-left:22px;margin:0 0 18px}
li{margin:0 0 9px}
strong,b{font-weight:650}
small{font-size:14px}
blockquote{margin:28px 0;padding:4px 0 4px 26px;border-left:3px solid var(--accent-line);
  font-size:clamp(19px,2.1vw,24px);line-height:1.42;font-family:var(--display);
  font-weight:500;letter-spacing:-.018em;color:var(--text);max-width:56ch}
blockquote p{margin:0;max-width:none}

/* ------------------------------------------------------------------ 3 */
@keyframes rise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes scalein{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3%,-4%,0) scale(1.10)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes sheen{from{background-position:0% 50%}to{background-position:200% 50%}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulsedot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* Elements marked data-reveal start hidden and animate once, when scrolled to.
   The .ready class is added by JS after the observer is wired, so a page with
   JS disabled simply shows everything. */
.js [data-reveal]{opacity:0}
.js [data-reveal].in{animation:rise .82s var(--ease-out) both}
.js [data-reveal="fade"].in{animation:fade 1s var(--ease) both}
.js [data-reveal="scale"].in{animation:scalein .9s var(--ease-out) both}
.js [data-reveal].in{animation-delay:var(--d,0ms)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1}
}

/* ------------------------------------------------------------------ 4 */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 var(--pad)}

.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--text);
  padding:12px 20px;border-radius:var(--r-sm);z-index:200;box-shadow:var(--shadow)}
.skip:focus{left:16px;top:16px}

.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.stuck{border-bottom-color:var(--rule-soft);box-shadow:var(--shadow-xs)}
/* over the dark hero the header inverts, so the lockup stays legible */
.site-header.on-ink{background:transparent;border-bottom-color:transparent;box-shadow:none}
.site-header.on-ink .brand-lockup{color:var(--on-ink)}
.site-header.on-ink .nav a{color:var(--on-ink-muted)}
.site-header.on-ink .nav a:hover,.site-header.on-ink .nav a[aria-current]{color:var(--on-ink)}
.site-header.on-ink .nav a[aria-current]::after{background:var(--brand-amber)}
.site-header.on-ink .icon-btn{color:var(--on-ink-muted);border-color:var(--on-ink-rule)}
.site-header.on-ink .icon-btn:hover{color:var(--on-ink);background:rgba(255,255,255,.08)}

.header-in{display:flex;align-items:center;gap:14px;height:var(--header-h)}
.brand-lockup{display:inline-flex;align-items:center;color:var(--text);text-decoration:none;
  flex:0 0 auto;transition:color .3s var(--ease),transform .35s var(--ease-out)}
.brand-lockup svg{height:30px;width:auto;display:block}
.brand-lockup:hover{transform:translateY(-1px)}
.brand-lockup:hover svg{filter:drop-shadow(0 4px 12px rgba(202,37,26,.28))}

.nav{display:none;margin-left:auto;align-items:center;gap:2px}
.nav a{
  position:relative;color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:9px 13px;border-radius:9px;white-space:nowrap;
  transition:color .22s var(--ease),background .22s var(--ease);
}
.nav a:hover{color:var(--text);background:var(--surface-2)}
.nav a[aria-current]{color:var(--text);font-weight:600}
.nav a[aria-current]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;border-radius:2px;
  background:var(--brand-grad);
}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav + .header-actions{margin-left:12px}

.icon-btn{
  display:inline-grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border:1px solid var(--rule);border-radius:10px;background:transparent;color:var(--muted);
  cursor:pointer;transition:.22s var(--ease);
}
.icon-btn:hover{color:var(--text);background:var(--surface-2);border-color:var(--rule)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.icon-btn .moon{display:none}
:root[data-theme="dark"] .icon-btn .moon{display:block}
:root[data-theme="dark"] .icon-btn .sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .icon-btn .moon{display:block}
  :root:not([data-theme="light"]) .icon-btn .sun{display:none}
}

.menu-btn{display:inline-grid}
.mobile-nav{
  position:fixed;inset:var(--header-h) 0 0;z-index:99;
  background:var(--bg);padding:24px var(--pad) 40px;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.mobile-nav.open{opacity:1;visibility:visible;transform:none}
.mobile-nav a{
  font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em;
  color:var(--text);text-decoration:none;padding:13px 0;border-bottom:1px solid var(--rule-soft);
}
.mobile-nav a:hover,.mobile-nav a[aria-current]{color:var(--accent)}
.mobile-nav .btn{margin-top:26px;font-size:17px}
body.nav-open{overflow:hidden}

@media (max-width:639px){
  .header-actions [data-theme-toggle]{display:none}   /* lives in the menu instead */
  .brand-lockup svg{height:26px}
  .header-actions .btn{padding:11px 15px;font-size:14.5px;border-radius:10px}
  .header-in{gap:10px}
}
@media (min-width:1000px){
  .nav{display:flex}
  .menu-btn{display:none}
  .mobile-nav{display:none}
}
.mobile-nav .menu-theme{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 0 0;border-bottom:0;font-family:var(--body);font-size:15px;
  font-weight:500;color:var(--muted);
}
.mobile-nav .menu-theme .icon-btn{width:42px;height:42px}

/* ---- footer ---- */
.site-footer{
  background:var(--ink);color:var(--on-ink);margin-top:clamp(72px,10vw,140px);
  position:relative;overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:70%;
  background:radial-gradient(60% 100% at 22% 0%,rgba(202,37,26,.30),transparent 70%),
             radial-gradient(50% 100% at 80% 10%,rgba(255,179,0,.14),transparent 72%);
  pointer-events:none;
}
.footer-top{position:relative;padding-top:clamp(56px,7vw,96px);padding-bottom:48px;
  display:grid;gap:clamp(36px,5vw,56px);grid-template-columns:1fr}
@media (min-width:660px){.footer-top{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.footer-top{grid-template-columns:1.45fr 1fr 1fr .95fr 1.2fr}}
.footer-brand .brand-lockup{color:var(--on-ink)}
.footer-brand .brand-lockup svg{height:34px}
.footer-tagline{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--brand-amber);margin:18px 0 12px}
.footer-brand p{color:var(--on-ink-muted);font-size:15px;max-width:34ch;margin:0}
.footer-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ink-faint);margin:0 0 16px;font-weight:500}
.footer-col ul{list-style:none;padding:0;margin:0;max-width:none}
.footer-col li{margin:0 0 11px}
.footer-col a{color:var(--on-ink-muted);text-decoration:none;font-size:15px;
  transition:color .2s var(--ease)}
.footer-col a:hover{color:var(--on-ink)}
.contact-block{margin:0 0 20px}
.contact-block:last-child{margin-bottom:0}
.contact-block .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-ink-faint);display:block;margin-bottom:6px}
.contact-block .v{font-size:15px;line-height:1.55;color:var(--on-ink);font-style:normal}
.contact-block .v a{color:var(--on-ink);text-decoration:none;border-bottom:1px solid var(--on-ink-rule)}
.contact-block .v a:hover{border-bottom-color:var(--brand-amber);color:var(--brand-amber)}
.footer-bottom{
  position:relative;border-top:1px solid var(--on-ink-rule);padding-top:24px;padding-bottom:34px;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-size:13.5px;color:var(--on-ink-faint);
}
.footer-bottom a{color:var(--on-ink-faint);text-decoration:none}
.footer-bottom a:hover{color:var(--on-ink)}
.footer-bottom .spacer{margin-left:auto}

/* ------------------------------------------------------------------ 5 */
.hero{
  position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;
  margin-top:calc(var(--header-h) * -1);padding:calc(var(--header-h) + clamp(60px,8vw,104px)) 0 clamp(56px,7vw,96px);
  isolation:isolate;
}
.hero-glow{position:absolute;inset:-30% -20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 22%,rgba(202,37,26,.55),transparent 68%),
    radial-gradient(34% 40% at 78% 12%,rgba(240,74,22,.40),transparent 70%),
    radial-gradient(30% 38% at 62% 78%,rgba(255,179,0,.20),transparent 72%);
  filter:blur(18px);
  animation:drift 26s ease-in-out infinite;
}
.hero-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
.hero-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.30;
  background-image:linear-gradient(var(--on-ink-rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--on-ink-rule) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(70% 60% at 50% 34%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 34%,#000 20%,transparent 78%);
}
.hero h1{color:var(--on-ink);max-width:16ch}
.hero .lede{color:var(--on-ink-muted);font-size:clamp(17.5px,2vw,21.5px);max-width:54ch;margin-top:22px}
.hero-inner{display:grid;gap:clamp(38px,5vw,60px);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:1060px){.hero-inner{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}}
.hero-lead{max-width:min(880px,100%)}
@media (min-width:1100px){.hero h1{font-size:clamp(56px,6vw,86px)}}

/* ---- hero showcase: a wide live product stage with floating tiles ---- */
.hero-showcase{margin-top:clamp(40px,6vw,74px);position:relative;z-index:2}
.hero-stage{position:relative;max-width:1160px;margin:0 auto;
  padding:clamp(20px,4vw,52px) clamp(0px,3vw,40px) clamp(28px,5vw,60px)}
.hero-stage-glow{position:absolute;inset:6% 8% 2%;z-index:0;pointer-events:none;filter:blur(30px);
  background:radial-gradient(60% 60% at 30% 20%,rgba(240,74,22,.5),transparent 70%),
            radial-gradient(50% 50% at 82% 90%,rgba(255,179,0,.28),transparent 72%)}
.hero-stage .device{position:relative;z-index:1;max-width:940px;margin:0 auto}
@media (min-width:900px){.hero-stage .device{margin:0 auto}}

.hero-float{position:relative;z-index:3;margin:14px auto 0;max-width:380px;opacity:0;
  background:rgba(20,16,15,.66);backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px 18px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  translate:var(--px,0) var(--py,0);transition:translate .45s var(--ease-out)}
.hero-stage.in .hero-float{animation:hf-in .7s var(--ease-out) both}
.hero-stage.in .hero-float.hf-a{animation-delay:.35s}
.hero-stage.in .hero-float.hf-b{animation-delay:.5s}
@keyframes hf-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.js .hero-stage:not(.in) .hero-float{opacity:0}
:root:not(.js) .hero-float{opacity:1;animation:none}
.hero-float .hf-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-ink-faint)}
.hero-float .hf-v{display:flex;align-items:baseline;gap:10px;margin-top:5px;
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:30px;color:var(--on-ink)}
.hero-float .hf-v.sm{font-size:23px}
.hero-float .hf-d{font-family:var(--body);font-size:11px;font-weight:700;font-style:normal;
  padding:3px 8px;border-radius:20px;white-space:nowrap;flex:0 0 auto}
.hf-d.down{color:#FF8B6B;background:rgba(255,139,107,.14)}
.hf-d.up{color:#7BD3A6;background:rgba(123,211,166,.14)}
.hf-d.flat{color:var(--on-ink-muted);background:rgba(255,255,255,.09)}
.hero-float .hf-track{height:7px;border-radius:4px;background:rgba(255,255,255,.1);margin-top:8px;overflow:hidden}
.hero-float .hf-track i{display:block;height:100%;border-radius:4px;background:var(--brand-grad)}
.hero-float .hf-track i.ink{background:linear-gradient(90deg,#F8E3B8,#F0913F)}
.hero-float .hf-note{display:block;margin-top:10px;font-size:11px;color:var(--on-ink-muted)}

/* ---- events-nearby float: a mini radar + opportunity list ------------- */
.hf-events .hf-eh{display:flex;align-items:center;gap:8px}
.hf-events .hf-eh .hf-k{white-space:nowrap}
.hf-events .hf-chip{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.04em;
  color:#2A160B;font-weight:700;background:var(--brand-grad);padding:3px 8px;border-radius:20px;
  white-space:nowrap;flex:0 0 auto}
.hf-events .hf-radar{position:relative;width:100%;aspect-ratio:1.7/1;margin-top:10px;
  border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(120% 150% at 50% 58%,rgba(240,74,22,.16),rgba(10,8,7,.45) 62%)}
.hf-events .rr{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.14);border-radius:50%}
.hf-events .rr:nth-child(1){width:26%;aspect-ratio:1}
.hf-events .rr:nth-child(2){width:56%;aspect-ratio:1}
.hf-events .rr:nth-child(3){width:92%;aspect-ratio:1}
.hf-events .hf-scan{position:absolute;left:50%;top:58%;width:48%;height:48%;
  transform-origin:top left;pointer-events:none;border-radius:0 0 100% 0;
  background:conic-gradient(from 0deg,rgba(240,74,22,.5),rgba(240,74,22,0) 58deg)}
.hf-events .hf-me{position:absolute;left:50%;top:58%;width:7px;height:7px;margin:-3.5px;
  border-radius:50%;background:var(--brand-grad);box-shadow:0 0 0 0 rgba(240,74,22,.5)}
.hf-events .hf-pin{position:absolute;width:9px;height:9px;border-radius:50% 50% 50% 0;
  transform:translate(-50%,-100%) rotate(45deg)}
.hf-events .hf-pin.p1{left:68%;top:31%;background:#F0913F;box-shadow:0 0 0 3px rgba(240,145,63,.25)}
.hf-events .hf-pin.p2{left:33%;top:62%;background:#FF7A5C;box-shadow:0 0 0 3px rgba(255,122,92,.25)}
.hf-events .hf-pin.p3{left:72%;top:72%;background:#7BD3A6;box-shadow:0 0 0 3px rgba(123,211,166,.25)}
.hf-ev{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:7px}
.hf-ev li{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--on-ink);
  white-space:nowrap}
.hf-ev li i{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.hf-ev li i.d1{background:#F0913F}.hf-ev li i.d2{background:#FF7A5C}.hf-ev li i.d3{background:#7BD3A6}
.hf-ev li em{margin-left:auto;font-style:normal;font-size:10px;color:var(--on-ink-faint)}

@media (min-width:900px){
  .hero-float{max-width:300px}
  .hero-stage{display:flex;flex-direction:column;align-items:center;gap:16px}
}
@media (min-width:1120px){
  .hero-stage{display:block}
  .hero-float{position:absolute;margin:0;max-width:250px}
  .hero-float.hf-a{left:0;top:15%}
  .hero-float.hf-b{right:0;bottom:6%;max-width:236px}
}
@media (min-width:1320px){
  .hero-float.hf-a{left:-2%}
  .hero-float.hf-b{right:-2%}
}
@media (prefers-reduced-motion:no-preference){
  .hero-stage.in .hero-float.hf-a{animation:hf-in .7s var(--ease-out) .35s both,
    hf-bob 7s ease-in-out 2.2s infinite}
  .hero-stage.in .hero-float.hf-b{animation:hf-in .7s var(--ease-out) .5s both,
    hf-bob 8s ease-in-out 2.8s infinite reverse}
  .hero-stage.in .hf-events .hf-scan{animation:hf-spin 3.6s linear infinite}
  .hero-stage.in .hf-events .hf-me{animation:hf-mepulse 2.6s ease-out infinite}
  .hero-stage.in .hf-events .hf-pin{animation:hf-pindrop .5s var(--ease-out) both}
  .hero-stage.in .hf-events .hf-pin.p1{animation-delay:.7s}
  .hero-stage.in .hf-events .hf-pin.p2{animation-delay:.9s}
  .hero-stage.in .hf-events .hf-pin.p3{animation-delay:1.1s}
}
.js .hf-events .hf-pin{opacity:0}
@media (prefers-reduced-motion:reduce){.js .hf-events .hf-pin{opacity:1}}
@keyframes hf-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes hf-spin{to{transform:rotate(360deg)}}
@keyframes hf-mepulse{0%{box-shadow:0 0 0 0 rgba(240,74,22,.5)}
  70%,100%{box-shadow:0 0 0 10px rgba(240,74,22,0)}}
@keyframes hf-pindrop{from{opacity:0;transform:translate(-50%,-140%) rotate(45deg)}
  60%{opacity:1;transform:translate(-50%,-90%) rotate(45deg)}
  to{opacity:1;transform:translate(-50%,-100%) rotate(45deg)}}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);margin:0 0 20px;
}
.hero .eyebrow{color:var(--brand-amber)}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;border-radius:2px;flex:0 0 auto}
.eyebrow.dot::before{width:7px;height:7px;border-radius:50%;animation:pulsedot 2.6s ease-in-out infinite}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-proof{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  margin-top:clamp(40px,5vw,60px);background:var(--on-ink-rule);
  border:1px solid var(--on-ink-rule);border-radius:var(--r);overflow:hidden;
}
.hero-proof .cell{background:var(--ink);padding:22px 20px}
.hero-proof .v{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(30px,3.6vw,42px);line-height:1;
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:sheen 9s linear infinite}
.hero-proof .k{display:block;margin-top:10px;font-size:12.5px;line-height:1.42;color:var(--on-ink-muted)}

/* device frame that holds the product clips */
.device{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);
  border:1px solid var(--rule);box-shadow:var(--shadow-lg);
}
.hero .device{border-color:var(--on-ink-rule);box-shadow:0 40px 90px -30px rgba(0,0,0,.85),
  0 0 0 1px rgba(255,255,255,.05),var(--shadow-brand)}
.device video,.device img{width:100%;display:block;background:var(--surface-2)}
.device-bar{
  display:flex;align-items:center;gap:7px;padding:11px 15px;background:var(--surface);
  border-bottom:1px solid var(--rule-soft);
}
.hero .device-bar{background:#1B1615;border-bottom-color:rgba(255,255,255,.07)}
.device-bar i{width:9px;height:9px;border-radius:50%;background:var(--rule);display:block}
.hero .device-bar i{background:rgba(255,255,255,.16)}
.device-bar .url{
  margin-left:10px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;
  color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero .device-bar .url{color:var(--on-ink-faint)}
.device-cap{
  padding:14px 18px;font-size:13.5px;line-height:1.5;color:var(--muted);
  background:var(--surface);border-top:1px solid var(--rule-soft);
}
.hero .device-cap{background:#141010;color:var(--on-ink-muted);border-top-color:rgba(255,255,255,.07)}

/* ---- hero showcase: the real product clip, animated ------------------- */
.device-bar{position:relative}
.device-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  white-space:nowrap;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-ink-muted)}
.device-live b{width:6px;height:6px;border-radius:50%;background:#7BD3A6;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(123,211,166,.55)}
@media (max-width:560px){.device-hero .device-bar .url{display:none}}
@media (prefers-reduced-motion:no-preference){
  .device-live b{animation:live-ping 2.4s ease-out infinite}
}
.device-view{position:relative;overflow:hidden;line-height:0}
.device-view video{width:100%;display:block;transform-origin:50% 30%}
@media (prefers-reduced-motion:no-preference){
  .device-hero.in .device-view video{animation:kenburns 26s ease-in-out 1s infinite alternate}
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.045)}}
.device-sweep{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%)}
@media (prefers-reduced-motion:no-preference){
  .device-hero.in .device-sweep{animation:dev-sweep 1.5s ease-in-out .55s both,
    dev-sweep 2s ease-in-out 9s infinite}
}
@keyframes dev-sweep{0%{opacity:0;transform:translateX(-60%)}
  18%,72%{opacity:1}100%{opacity:0;transform:translateX(60%)}}
.hero-stage .device-hero{max-width:920px}
@media (min-width:1120px){.hero-stage .device-hero{max-width:900px}}

/* ------------------------------------------------------------------ 6 */
section{padding:clamp(64px,8vw,120px) 0;position:relative}
section.tight{padding:clamp(44px,5vw,72px) 0}
section.alt{background:var(--bg-alt)}
section.ink{background:var(--ink);color:var(--on-ink)}
section.ink h2,section.ink h3{color:var(--on-ink)}
section.ink p{color:var(--on-ink-muted)}
section.ink .eyebrow{color:var(--brand-amber)}
.section-head{max-width:64ch;margin-bottom:clamp(34px,4vw,54px)}
.section-head .lede{margin-top:18px}
.lede{font-size:clamp(17px,1.9vw,20.5px);line-height:1.55;color:var(--muted);max-width:62ch}

.btn{
  --btn-bg:var(--surface); --btn-fg:var(--text); --btn-bd:var(--rule);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:11px;border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--body);font-size:15.5px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .24s var(--ease-out),box-shadow .24s var(--ease),
             background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);color:var(--btn-fg)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex:0 0 auto;transition:transform .28s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{
  --btn-bg:var(--brand-grad); --btn-fg:#FFF8F2; --btn-bd:transparent;
  background-size:180% 100%;background-position:0% 50%;
  box-shadow:var(--shadow-brand);
}
.btn-primary:hover{background-position:100% 50%;box-shadow:0 22px 56px -20px rgba(202,37,26,.7)}
.btn-ghost{--btn-bg:transparent}
.hero .btn-ghost{--btn-fg:var(--on-ink);--btn-bd:var(--on-ink-rule)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.07)}
.btn-lg{padding:17px 30px;font-size:16.5px;border-radius:13px}
.btn-block{display:flex;width:100%}

.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:999px;border:1px solid var(--rule);
  background:var(--surface);font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.10em;text-transform:uppercase;color:var(--muted);
}
.pill.accent{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.pill.good{border-color:transparent;background:var(--good-soft);color:var(--good)}
.pill.warn{border-color:transparent;background:var(--warn-soft);color:var(--warn)}

.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g2,.g3{grid-template-columns:minmax(0,1fr)}
.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.g2,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card{
  position:relative;background:var(--surface);border:1px solid var(--rule-soft);
  border-radius:var(--r-lg);padding:clamp(24px,2.6vw,32px);
  transition:transform .38s var(--ease-out),box-shadow .38s var(--ease),border-color .38s var(--ease);
  overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:var(--brand-grad-soft);transition:opacity .38s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--rule)}
.card:hover::after{opacity:1}
.card > *{position:relative;z-index:1}
.card h3{margin-bottom:12px}
.card p:last-child{margin-bottom:0}
.card .num{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--accent);
  display:block;margin-bottom:14px;font-weight:500;
}
.card-icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
}
.card-icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
section.ink .card,section.ink .step{background:rgba(255,255,255,.035);border-color:var(--on-ink-rule)}
section.ink .card h3,section.ink .step h3{color:var(--on-ink)}
section.ink .card p,section.ink .step p{color:var(--on-ink-muted)}
section.ink .card::after{background:linear-gradient(118deg,rgba(202,37,26,.16),rgba(255,179,0,.10))}
section.ink .feature-list li{color:var(--on-ink-muted)}
section.ink .stat{background:var(--ink-2)}
section.ink .stat .s{color:var(--on-ink-muted)}
section.ink .stat .k{color:var(--on-ink-faint)}

/* ---- stats ---- */
.stats{display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);
  border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));margin:30px 0}
.stat{background:var(--bg);padding:22px 20px}
.stat .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.stat .v{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,3vw,34px);line-height:1;font-variant-numeric:tabular-nums}
.stat .s{display:block;margin-top:9px;font-size:13px;line-height:1.45;color:var(--muted)}
.stat.hi .v{color:var(--accent)}

/* ---- client band ---- */
.clients{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.clients{grid-template-columns:repeat(3,minmax(0,1fr))}}
.client{
  background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--r-lg);
  padding:30px 26px;text-align:center;
  transition:transform .38s var(--ease-out),box-shadow .38s var(--ease),border-color .38s var(--ease);
}
.client:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--rule)}
.client .plate{
  height:96px;display:grid;place-items:center;background:#FFFFFF;border-radius:var(--r);
  border:1px solid rgba(20,16,15,.07);padding:16px 22px;margin-bottom:20px;
}
.client .plate img{max-height:56px;max-width:100%;width:auto;object-fit:contain}
/* the three marks are a tall badge, a very wide wordmark and a circle, so each
   gets its own cap — otherwise one optically dwarfs the other two */
.client .plate img[alt="Savvy Sliders"]{max-height:68px}
.client .plate img[alt="BurgerFi"]{max-height:38px}
.client .plate img.round{border-radius:50%;max-height:66px}
.client .name{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;
  display:block;margin-bottom:5px}
.client .role{font-size:14px;color:var(--muted);display:block}

/* ---- feature rows: clip + copy, alternating ---- */
.feature{display:grid;gap:clamp(28px,4vw,60px);align-items:center;grid-template-columns:minmax(0,1fr);
  padding:clamp(34px,4.5vw,58px) 0;border-top:1px solid var(--rule-soft)}
.feature:first-of-type{border-top:0}
@media (min-width:960px){
  .feature{grid-template-columns:minmax(0,1fr) minmax(0,1.22fr)}
  .feature.flip .feature-copy{order:2}
  .feature.flip .feature-media{order:1}
}
.feature-copy h3{margin-bottom:14px}
.feature-copy p{color:var(--muted)}
.feature-list{list-style:none;padding:0;margin:20px 0 0}
.feature-list li{position:relative;padding-left:26px;margin-bottom:10px;font-size:15.5px;color:var(--muted)}
.feature-list li::before{
  content:"";position:absolute;left:0;top:9px;width:12px;height:12px;border-radius:4px;
  background:var(--brand-grad);
}

/* ---- story ---- */
.story{position:relative;padding-left:0}
.story-step{position:relative;padding:0 0 clamp(34px,4vw,48px) 40px;border-left:2px solid var(--rule)}
.story-step:last-child{border-left-color:transparent;padding-bottom:0}
.story-step::before{
  content:"";position:absolute;left:-9px;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--brand-grad);box-shadow:0 0 0 5px var(--bg);
}
.story-step .when{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:10px;
}
.story-step h3{margin-bottom:12px}
.story-step p:last-child{margin-bottom:0}
.story-pull{
  font-family:var(--display);font-weight:600;font-size:clamp(21px,2.6vw,30px);line-height:1.28;
  letter-spacing:-.024em;color:var(--text);max-width:22ch;margin:0;
}
.story-pull em{font-style:normal;background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- steps ---- */
.steps{counter-reset:s;display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{position:relative;padding:30px 26px;border:1px solid var(--rule-soft);border-radius:var(--r-lg);
  background:var(--surface);counter-increment:s}
.step::before{
  content:counter(s,decimal-leading-zero);position:absolute;top:22px;right:24px;
  font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.04em;
  color:transparent;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;
  opacity:.30;line-height:1;
}
.step h3{font-size:20px;margin:0 0 10px;padding-right:56px}
.step p{margin:0;font-size:15.5px;color:var(--muted)}

/* ---- tables ---- */
.scroll{overflow-x:auto;margin:26px 0;border:1px solid var(--rule-soft);border-radius:var(--r);
  -webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
caption{caption-side:top;text-align:left;padding:16px 18px 12px;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--rule-soft);vertical-align:top}
thead th{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--rule);white-space:nowrap;
  background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .2s var(--ease)}
tbody tr:hover{background:var(--surface-2)}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.c,th.c{text-align:center}
tbody th{font-weight:600}
tr.total td,tr.total th{border-top:1px solid var(--rule);font-weight:700;background:var(--surface-2)}
.yes,.no{display:inline-block;width:19px;height:19px;border-radius:5px;position:relative;vertical-align:-4px}
.yes{background:var(--brand-grad)}
.yes::after{content:"";position:absolute;left:5.5px;top:3.5px;width:5px;height:9px;
  border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(42deg)}
.no{border:2px solid var(--faint);opacity:.55}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--rule-soft)}
details{border-bottom:1px solid var(--rule-soft);padding:0}
details summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(17px,1.8vw,20px);
  letter-spacing:-.016em;line-height:1.34;transition:color .22s var(--ease);
}
details summary::-webkit-details-marker{display:none}
details summary:hover{color:var(--accent)}
details summary::after{
  content:"";position:absolute;right:8px;top:31px;width:11px;height:11px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg);transition:transform .3s var(--ease),border-color .22s var(--ease);
}
details[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
details[open] summary{color:var(--accent)}
.faq-body{padding:0 0 24px;max-width:70ch;animation:fade .4s var(--ease) both}
.faq-body p:last-child{margin-bottom:0}

/* ---- CTA band ---- */
.cta-band{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;
  border-radius:var(--r-xl);padding:clamp(44px,6vw,84px) clamp(28px,5vw,72px);isolation:isolate}
.cta-band::before{
  content:"";position:absolute;inset:-50% -10%;z-index:-1;
  background:radial-gradient(42% 60% at 20% 30%,rgba(202,37,26,.55),transparent 68%),
             radial-gradient(38% 56% at 82% 66%,rgba(255,179,0,.24),transparent 70%);
  animation:drift 30s ease-in-out infinite;
}
.cta-band h2{color:var(--on-ink);max-width:18ch}
.cta-band p{color:var(--on-ink-muted);max-width:52ch;margin-top:18px}
.cta-band .btn-ghost{--btn-fg:var(--on-ink);--btn-bd:var(--on-ink-rule)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.08)}

/* ---- misc content blocks ---- */
.note,.goodbox,.warnbox{
  border-radius:var(--r);padding:20px 24px;margin:26px 0;font-size:15.5px;
  border:1px solid var(--rule-soft);background:var(--surface-2);
}
.note p:last-child,.goodbox p:last-child,.warnbox p:last-child{margin-bottom:0}
.goodbox{background:var(--good-soft);border-color:transparent}
.warnbox{background:var(--warn-soft);border-color:transparent}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.narrow{max-width:760px}
.band{padding:clamp(44px,5vw,72px) 0;border-top:1px solid var(--rule-soft)}
.meta{display:flex;flex-wrap:wrap;gap:8px 26px;padding:16px 0;margin:0 0 30px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.meta b{color:var(--text);font-weight:500}
.tagline{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent)}
.brandbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.brandbar svg{height:34px;width:auto}
.lock{display:inline-flex;align-items:center;gap:8px}
.hero.plain{background:none;color:inherit;padding:clamp(40px,6vw,80px) 0 0;margin-top:0}
.hero.plain h1{color:var(--text)}
.hero.plain .lede{color:var(--muted)}
.heroactions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.field{display:block;margin-bottom:20px}
.field > span{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:11px;border:1px solid var(--rule);
  background:var(--surface);color:var(--text);font:inherit;font-size:15.5px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hint{font-size:13.5px;color:var(--faint);margin-top:7px}
.result,.bigresult{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.result{font-size:clamp(26px,3vw,34px)}
.bigresult{font-size:clamp(36px,5vw,56px);background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.part{margin:0 0 40px}
.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--good)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:pulsedot 2.4s ease-in-out infinite}

/* ------------------------------------------------------------------ 8 */
.center{text-align:center}
.center .lede,.center p{margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.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}

/* ---- social row + full footer lockup ------------------------------------ */
.socials{display:flex;flex-wrap:wrap;gap:9px;margin-top:2px}
.soc{
  display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--on-ink-rule);color:var(--on-ink-muted);
  transition:color .22s var(--ease),background .22s var(--ease),
             border-color .22s var(--ease),transform .22s var(--ease-out);
}
.soc svg{width:17px;height:17px;fill:currentColor}
a.soc:hover{color:var(--ink);background:var(--brand-amber);border-color:transparent;
  transform:translateY(-2px)}
.soc-off{opacity:.34;cursor:default}
/* the footer lockup carries the descriptor rule, so it is sized by width —
   at 56px tall the RESTAURANT OPERATING PLATFORM line would be 5px high */
.footer-brand .lockup-full{display:block;max-width:300px}
.footer-brand .lockup-full svg{width:100%;height:auto}
@media (min-width:940px) and (max-width:1180px){.footer-brand .lockup-full{max-width:250px}}

/* the compact header lockup is wider than the old one, so it needs its own cap */
.brand-lockup svg{height:28px}
@media (min-width:1000px){.brand-lockup svg{height:30px}}

/* An inline arrow inside body copy has no .btn sizing to inherit, so it would
   render at the SVG's own intrinsic size. Bound it to the text it sits in. */
:where(p,li,address,td,th) a svg{
  width:1em;height:1em;display:inline-block;vertical-align:-.12em;flex:0 0 auto;
}

/* ---- the supplied logo artwork ------------------------------------------
   Shipped as two inks. The wordmark is near-black, so it is invisible on the
   dark hero and the dark footer; a light-ink copy sits behind it and CSS shows
   whichever the background calls for. Only one is ever visible, and both are
   the same file dimensions, so nothing shifts when they swap. */
.brand-lockup .brand-img{height:38px;width:auto;max-width:none}
@media (min-width:1000px){.brand-lockup .brand-img{height:44px}}
.brand-ink-light{display:none}

/* dark theme, the dark hero, and the always-dark footer all want light ink */
:root[data-theme="dark"] .brand-ink-dark,
.site-header.on-ink .brand-ink-dark,
.site-footer .brand-ink-dark{display:none}
:root[data-theme="dark"] .brand-ink-light,
.site-header.on-ink .brand-ink-light,
.site-footer .brand-ink-light{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-ink-dark{display:none}
  :root:not([data-theme="light"]) .brand-ink-light{display:block}
}
/* ...but the footer is dark in every theme, so light ink always wins there */
.site-footer .brand-ink-light{display:block}
.site-footer .brand-ink-dark{display:none}

.footer-brand .lockup-full .brand-img{width:100%;max-width:320px;height:auto}
.footer-brand .lockup-full{max-width:320px}

/* ---- illustration frames (original graphics, not screenshots) ----------- */
.illus{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--rule);box-shadow:var(--shadow-lg);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.illus svg{width:100%;height:auto;display:block}
.illus .device-cap{font-style:italic}
/* a gentle pointer-tracked tilt — desktop, fine pointers, motion allowed only */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .illus:hover,.feature-media .device:hover{transform:translateY(-4px) scale(1.012)}
  .illus:hover{box-shadow:var(--shadow-lg),0 40px 90px -40px rgba(202,37,26,.4)}
}

/* ---- kinetic diagram animation -----------------------------------------
   The SVGs carry class hooks (a-grow / a-rise / a-draw / a-pop / a-pulse /
   a-fade / a-sheen). They stay in their end state unless JS is present; when
   the figure scrolls into view the reveal system adds .in and they play once.
   prefers-reduced-motion collapses all of it (global rule + the guard below). */
.js .illus svg .a-grow{transform:scaleX(0);transform-box:fill-box;transform-origin:left center}
.js .illus svg .a-rise{opacity:0}
.js .illus svg .a-pop{opacity:0}
.js .illus svg .a-fade{opacity:0}
.js .illus svg .a-draw{stroke-dasharray:640;stroke-dashoffset:640}
.js .illus svg .a-sheen{opacity:0}

.illus.in svg .a-grow{animation:i-grow .9s var(--ease-out) both;animation-delay:var(--d,0ms)}
.illus.in svg .a-rise{animation:i-rise .7s var(--ease-out) both;animation-delay:var(--d,0ms)}
.illus.in svg .a-pop{animation:i-pop .55s var(--ease-out) both;animation-delay:var(--d,0ms)}
.illus.in svg .a-fade{animation:fade .9s var(--ease) both;animation-delay:var(--d,0ms)}
.illus.in svg .a-draw{animation:i-draw 1s var(--ease-out) both;animation-delay:var(--d,0ms)}
.illus.in svg .a-pulse{animation:i-pulse 2.6s var(--ease-out) infinite;transform-box:fill-box;
  transform-origin:center}
.illus.in svg .a-sheen{animation:i-sheen 1.2s ease-in .35s both}
/* continuous "live dashboard" motion */
.illus.in svg .a-live{animation:i-live 2s ease-in-out infinite}
.illus.in svg .a-sweep2{animation:i-sweep2 4.5s ease-in-out 1s infinite}
.illus.in svg .a-tick{animation:i-tick 3s steps(1) infinite}
@keyframes i-live{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes i-sweep2{0%{opacity:0;transform:translateX(0)}
  10%,85%{opacity:.6}100%{opacity:0;transform:translateX(var(--sweep,300px))}}
@keyframes i-tick{0%,49%{opacity:1}50%,100%{opacity:.35}}

@keyframes i-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes i-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes i-pop{from{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@keyframes i-draw{from{stroke-dashoffset:640}to{stroke-dashoffset:0}}
@keyframes i-pulse{0%{opacity:.9;transform:scale(.85)}70%{opacity:0;transform:scale(1.7)}100%{opacity:0;transform:scale(1.7)}}
@keyframes i-sheen{0%{opacity:0;transform:translateX(0)}25%{opacity:.55}100%{opacity:0;transform:translateX(680px)}}

@media (prefers-reduced-motion:reduce){
  .js .illus svg .a-grow{transform:none}
  .js .illus svg .a-rise,.js .illus svg .a-pop,.js .illus svg .a-fade,
  .js .illus svg .a-sheen{opacity:1}
  .js .illus svg .a-draw{stroke-dasharray:none;stroke-dashoffset:0}
  .illus.in svg .a-pulse,.illus.in svg .a-live,.illus.in svg .a-sweep2,
  .illus.in svg .a-tick{animation:none}
  .js .illus svg .a-sweep2{opacity:0}
}

/* ---- kinetic typography band: two lanes, opposing drift --------------- */
.kinetic-band{position:relative;overflow:hidden;padding:clamp(20px,3.5vw,40px) 0;
  border-block:1px solid var(--rule-soft);background:var(--bg-alt);
  display:grid;gap:clamp(4px,1vw,12px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.k-lane{overflow:hidden;display:flex}
.k-row{display:flex;align-items:center;gap:clamp(16px,2vw,34px);width:max-content;
  padding-right:clamp(16px,2vw,34px);will-change:transform}
.k-row-1{animation:marquee 42s linear infinite}
.k-row-2{animation:marquee 38s linear infinite reverse}
.kinetic-band:hover .k-row{animation-play-state:paused}
.k-item{display:inline-flex;align-items:center;gap:.32em;white-space:nowrap;
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;text-transform:uppercase;
  font-size:clamp(24px,4.6vw,52px);line-height:1}
.k-ic{width:.62em;height:.62em;flex:0 0 auto;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.k-fill{color:transparent;background:var(--brand-grad);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;animation:sheen 7s linear infinite}
.k-fill .k-ic{stroke:var(--accent-bright)}
.k-line{color:transparent;-webkit-text-stroke:1.4px var(--faint)}
.k-line .k-ic{stroke:var(--faint)}
.k-star{flex:0 0 auto;color:var(--brand-orange);font-size:clamp(13px,1.7vw,22px);
  animation:spin 7s linear infinite;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .kinetic-band{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 22px}
  .k-lane{overflow:visible}
  .k-row{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:14px 22px}
  .k-row-2{display:none}
  .k-star{animation:none}
}

/* ---- reveal direction + blur variants (pure CSS, driven by .in) ------ */
@keyframes rise-l{from{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:none}}
@keyframes rise-r{from{opacity:0;transform:translate3d(30px,0,0)}to{opacity:1;transform:none}}
@keyframes blur-in{from{opacity:0;filter:blur(10px);transform:translateY(14px)}
  to{opacity:1;filter:blur(0);transform:none}}
.js [data-reveal="left"].in{animation:rise-l .8s var(--ease-out) both}
.js [data-reveal="right"].in{animation:rise-r .8s var(--ease-out) both}
.js [data-reveal="blur"].in{animation:blur-in .9s var(--ease) both}
.js [data-reveal="left"].in,.js [data-reveal="right"].in,
.js [data-reveal="blur"].in{animation-delay:var(--d,0ms)}

/* ---- micro-interactions --------------------------------------------- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,
  transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%)}
@media (prefers-reduced-motion:no-preference){
  .btn-primary:hover::before{animation:btn-shine .7s var(--ease-out)}
}
@keyframes btn-shine{to{transform:translateX(120%)}}
@media (prefers-reduced-motion:no-preference){
  .section-head .eyebrow::before,.feature-copy .eyebrow::before{transition:width .5s var(--ease-out)}
  [data-reveal].in .eyebrow::before{animation:eb-sweep .8s var(--ease-out) both}
}
@keyframes eb-sweep{from{width:0;opacity:0}to{width:22px;opacity:1}}
.statband .v{background-size:220% 100%}
@media (prefers-reduced-motion:no-preference){
  .statband [data-reveal].in .v,.statband.in .v{animation:sheen 6s linear infinite}
}
.quote-band::before,.cta-band::before{background-size:180% 180%}
@media (prefers-reduced-motion:no-preference){
  .quote-band::before,.cta-band::before{animation:drift 24s ease-in-out infinite}
}

/* ==========================================================================
   8b. Structural components added for the module / persona / proof layout
   Additive only — every value below resolves to an existing token.
   ========================================================================== */

/* trust strip — a slim text credential under a hero (not a logo row) */
.trust-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:32px;
  font-size:14px}
.trust-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.hero .trust-live{color:var(--on-ink-muted)}
.trust-live i{width:7px;height:7px;border-radius:50%;background:var(--good);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(27,111,76,.5)}
.hero .trust-live i{background:#7BD3A6}
@media (prefers-reduced-motion:no-preference){.trust-live i{animation:live-ping 2.6s ease-out infinite}}
@keyframes live-ping{0%{box-shadow:0 0 0 0 rgba(123,211,166,.5)}70%,100%{box-shadow:0 0 0 9px rgba(123,211,166,0)}}
.trust-names{color:var(--muted)}
.hero .trust-names{color:var(--on-ink-muted)}
.trust-names b{color:var(--text);font-weight:600}
.hero .trust-names b{color:var(--on-ink)}
.trust-names b:not(:last-child)::after{content:" · ";color:var(--faint);font-weight:400}
.hero .trust-names b:not(:last-child)::after{color:var(--on-ink-faint)}

/* stat band — the quantified-outcome row, bolder than .hero-proof */
.statband{display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);
  border-radius:var(--r-lg);overflow:hidden;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.statband{grid-template-columns:repeat(3,minmax(0,1fr))}}
.statband .cell{background:var(--bg);padding:clamp(26px,3.4vw,40px) clamp(22px,2.6vw,32px)}
.statband .v{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  line-height:1;font-size:clamp(40px,5.6vw,60px);
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.statband .k{display:block;margin-top:14px;font-size:14.5px;line-height:1.45;color:var(--muted);
  max-width:32ch}

/* module rows — a .feature with a named-module header and an icon */
.module-label{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.module-label .mi{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--accent-soft);border:1px solid var(--accent-line);flex:0 0 auto}
.module-label .mi svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* persona grid — who-we-serve tiles */
.persona-grid{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.persona-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.persona{display:block;padding:20px 20px 18px;border:1px solid var(--rule-soft);
  border-radius:var(--r);background:var(--surface);text-decoration:none;color:inherit;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s}
.persona:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--rule)}
.persona h3{font-size:17px;margin:0 0 6px}
.persona p{margin:0;font-size:13.5px;color:var(--muted)}
.persona .arrow{margin-top:12px;display:inline-flex;color:var(--accent);font-size:13px;font-weight:600}

/* quote band — a testimonial pulled onto the dark ink */
.quote-band{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;
  border-radius:var(--r-xl);padding:clamp(38px,5.5vw,72px) clamp(26px,5vw,72px)}
.quote-band::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background:radial-gradient(60% 120% at 12% 0%,rgba(240,74,22,.18),transparent 70%)}
.quote-band > *{position:relative;z-index:1}
.quote-band blockquote{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(21px,2.8vw,30px);line-height:1.3;color:var(--on-ink);max-width:24ch}
.quote-band .who{margin-top:22px;font-size:14px;color:var(--on-ink-muted)}
.quote-band .who b{color:var(--on-ink);font-weight:600}

/* metric callout — a 3-up figure strip under a client card */
.metric-callout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule-soft);border:1px solid var(--rule-soft);border-radius:var(--r);
  overflow:hidden;margin-top:16px}
.metric-callout div{background:var(--bg);padding:14px 12px;text-align:center}
.metric-callout .mv{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:20px;color:var(--accent)}
.metric-callout .mk{display:block;margin-top:5px;font-size:11px;line-height:1.35;color:var(--muted)}