/* ────────────────────────────────────────────────────────────────────────────
   PRONTO - design system (see DESIGN.md)
   Light, warm, product-as-hero: Pronto's own palette. A soft blue-white ground,
   white cards, Pronto blue, the app's graphite buttons. Depth comes from real
   CSS 3D scenes and soft blue-tinted shadows. Tokens below are the source of
   truth for the page.
   ──────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Manrope';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/manrope-600.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/manrope-700.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:800;font-style:normal;font-display:swap;src:url(fonts/manrope-800.woff2) format('woff2')}
@font-face{font-family:'InterP';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'InterP';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'InterP';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}
/* The "Pronto" wordmark - Satisfy (Apache 2.0, licence alongside), as in the app and on the business card. */
@font-face{font-family:'Satisfy';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Satisfy-Regular.ttf) format('truetype')}

:root{
  color-scheme:light;
  /* canvas */
  --bg:#f5f7fb; --bg-2:#ffffff; --bg-3:#eef2f9; --bg-4:#e4eaf5;
  /* text */
  --fg:#12151d; --fg-2:#4b5565; --fg-3:#687285;
  /* brand: one accent */
  --blue:#3459c7; --blue-fill:#4b73c9; --blue-fill-2:#3a5ea8; --blue-app:#4b73c9; --ink:#14171f;
  --glow:rgba(75,115,201,.3); --glow-soft:rgba(75,115,201,.12);
  /* lines + surfaces */
  --line:rgba(18,21,29,.08); --line-2:rgba(18,21,29,.14);
  --glass:#ffffff; --glass-2:#ffffff;
  --ring:0 0 0 1px rgba(52,89,199,.1);
  --edge:0 1px 2px rgba(18,21,29,.04),0 22px 44px -28px rgba(52,89,199,.3);
  --sh-float:0 30px 70px -30px rgba(38,58,110,.4);
  --green:#1f8f5f; --red:#c9463d; --amber:#c9791a;
  /* type */
  --disp:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --sans:'InterP',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-display:clamp(2.6rem,5.3vw,4.35rem);
  --fs-h2:clamp(2rem,4vw,3.25rem);
  --fs-h3:1.35rem;
  --fs-body:1.05rem;
  --fs-small:.9rem;
  --fs-eyebrow:.74rem;
  /* space (8-pt) */
  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem; --s-5:2rem; --s-6:2.5rem; --s-7:3rem; --s-8:4rem; --s-10:5rem; --s-12:6rem;
  --sec:clamp(5.5rem,11vw,9.5rem);
  /* radius: pills for anything you press, 20 for cards, 12 for inner UI */
  --r-1:12px; --r-2:16px; --r-3:20px; --r-4:28px; --pill:999px;
  /* motion */
  --ease:cubic-bezier(.16,1,.3,1); --t-fast:.18s; --t:.3s; --t-slow:.6s;
  /* layout */
  --wrap:1240px; --gutter:clamp(1.25rem,5vw,3rem);
}
/* The real app is light. Anything that mirrors it keeps the app's own tokens. */
.lightui{
  color-scheme:light;
  --ink-950:#0f1216; --ink-900:#171b21; --ink-700:#2f3540; --ink-500:#5c6572; --ink-300:#9aa3ae;
  --paper:#faf9f6; --paper-2:#f3f1ec; --white:#ffffff;
  --blue-600:#3459c7; --blue-500:#4b73c9; --blue-100:#e8eefb; --blue-50:#f2f6fd;
  --l-line:#e8e6e0; --l-line-2:#dbd8d0;
  color:#171b21;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Vertical movement only. Nothing may widen the page: on a phone, content that spills sideways makes the
   browser lay the whole page out wider and lets it be dragged left and right. Every section clips its own
   sideways overflow (the 3D scenes spill on purpose), and the page itself clips as the backstop. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg);overflow-x:clip;overscroll-behavior-x:none}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
section,footer{overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);font-size:var(--fs-body);background:var(--bg);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;overscroll-behavior-x:none;touch-action:pan-y pinch-zoom;font-feature-settings:"cv05","cv11","ss03"}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
::selection{background:rgba(75,115,201,.24);color:#12151d}

h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.02;letter-spacing:-.04em;text-wrap:balance;color:var(--fg)}
h1{font-size:var(--fs-display);letter-spacing:-.05em;line-height:.98}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.025em;line-height:1.15}
h4{font-size:1.08rem;letter-spacing:-.015em;line-height:1.2}
p{color:var(--fg-2)}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--fg-2);max-width:56ch;line-height:1.6}
.lede.center{margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:600;font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.sec{position:relative;padding-block:var(--sec)}
.sec.alt{background:var(--bg-2);border-block:1px solid var(--line)}
.head{max-width:720px;margin-bottom:var(--s-8)}
.head h2{margin:0 0 18px}
.head .eyebrow{margin-bottom:18px}
.head.center{margin-inline:auto;text-align:center}
.head.center .lede{margin-inline:auto}
.center{text-align:center}

/* icons (inline SVG sprite) */
.ico{width:1.1em;height:1.1em;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* buttons: pills, everywhere */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--sans);font-weight:600;font-size:.98rem;padding:.9em 1.5em;border-radius:var(--pill);border:1px solid transparent;transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t),color var(--t),border-color var(--t);white-space:nowrap;min-height:46px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .ico{transition:transform var(--t) var(--ease)}
.btn:hover .ico{transform:translateX(3px)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 12px 28px -14px rgba(18,21,29,.6)}
.btn-primary:hover{background:#232836;box-shadow:0 16px 34px -14px rgba(18,21,29,.65)}
.btn-lite,.btn-ghost{background:var(--glass-2);color:var(--fg);border-color:var(--line-2);box-shadow:var(--edge)}
.btn-lite:hover,.btn-ghost:hover{background:#fff;border-color:rgba(18,21,29,.3)}
.btn-ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--fg-2)}
.btn-ghost:hover{color:var(--fg)}
.btn-blue{background:var(--blue-fill);color:#fff}
.btn-blue:hover{background:var(--blue-fill-2)}
.tlink{display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--blue);transition:gap var(--t-fast)}
.tlink:hover{gap:.65em}

/* shared surface: ring + top-edge highlight (the Framer move) */
.surface{background:linear-gradient(180deg,var(--glass-2),var(--glass));border-radius:var(--r-3);box-shadow:var(--ring),var(--edge)}

/* ── nav: a floating frosted pill ────────────────────────────────────────── */
#topSentinel{position:absolute;top:0;left:0;width:1px;height:24px;pointer-events:none}
.nav{position:fixed;inset:14px 0 auto;z-index:60;pointer-events:none}
.nav-in{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:60px;padding:0 10px 0 16px;border-radius:var(--pill);border:1px solid transparent;transition:background var(--t),border-color var(--t),box-shadow var(--t),backdrop-filter var(--t)}
.nav.scrolled .nav-in,.nav.menu-open .nav-in{background:rgba(255,255,255,.8);border-color:var(--line-2);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 1px 2px rgba(18,21,29,.04),0 18px 40px -24px rgba(38,58,110,.35)}
.nav .brand-word,.nav-links a,.nav .btn,.burger,.burger span{transition:color var(--t),background var(--t),border-color var(--t),box-shadow var(--t)}
.nav:not(.scrolled):not(.menu-open) .brand-word{color:#fff}
.nav:not(.scrolled):not(.menu-open) .brand-mark{box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.nav:not(.scrolled):not(.menu-open) .nav-links a{color:rgba(255,255,255,.76)}
.nav:not(.scrolled):not(.menu-open) .nav-links a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav:not(.scrolled):not(.menu-open) .btn-ghost{color:rgba(255,255,255,.8)}
.nav:not(.scrolled):not(.menu-open) .btn-ghost:hover{color:#fff;background:transparent;border-color:transparent}
.nav:not(.scrolled):not(.menu-open) .btn-primary{background:#fff;color:#0a0c11;box-shadow:none}
.nav:not(.scrolled):not(.menu-open) .burger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.nav:not(.scrolled):not(.menu-open) .burger span{background:#fff;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;border-radius:10px;overflow:hidden;background:#000;display:grid;place-items:center;box-shadow:0 6px 14px -8px rgba(18,21,29,.5)}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand-word{font-family:'Satisfy',var(--disp);font-weight:400;letter-spacing:0;font-size:1.8rem;line-height:1;font-synthesis:none;color:var(--fg);position:relative;top:.06em}
.wordmark{font-family:'Satisfy',var(--disp);font-weight:400;letter-spacing:0;text-transform:none;font-synthesis:none}
.nav-links{display:flex;gap:2px}
.nav-links a{font-weight:500;font-size:.93rem;color:var(--fg-2);padding:.5em .9em;border-radius:var(--pill);transition:background var(--t-fast),color var(--t-fast)}
.nav-links a:hover{background:var(--glass-2);color:var(--fg)}
.nav-cta{display:flex;align-items:center;gap:6px}
.nav-cta .btn{min-height:40px;padding:.6em 1.15em;font-size:.92rem}
.burger{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:#fff;place-items:center}
.burger span{display:block;width:16px;height:2px;background:var(--fg);border-radius:2px;box-shadow:0 -5px 0 var(--fg),0 5px 0 var(--fg)}
.mobile-menu{display:none;pointer-events:auto;position:fixed;inset:0;z-index:-1;background:rgba(245,247,251,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:104px var(--gutter) var(--s-6);flex-direction:column;gap:2px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:var(--disp);font-weight:700;font-size:1.7rem;letter-spacing:-.03em;padding:.5em 0;border-bottom:1px solid var(--line);color:var(--fg)}
.mm-cta{margin-top:var(--s-4);display:flex;gap:10px;flex-wrap:wrap}
.mm-cta a{border-bottom:0;font-family:var(--sans);font-size:.98rem;letter-spacing:0;padding:.9em 1.5em}
@media (max-width:1020px){.nav-links,.nav-cta .hide-sm{display:none}.burger{display:grid}}

/* ── hero: the one black band on the page. Clear type in front, the phone floating
   in 3D behind it and dipping out of the band into the light site below. ── */
.hero{position:relative;z-index:2;min-height:100dvh;padding:calc(74px + clamp(1.5rem,5vh,4rem)) 0 clamp(2.5rem,6vh,4.5rem);display:grid;align-items:center;isolation:isolate;background:#0a0c11;
  --fg:#f6f8fc; --fg-2:#b6bfce; --fg-3:#8a94a6; --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.2)}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-aura{position:absolute;inset:0;background:
  radial-gradient(46% 56% at 76% 52%,rgba(75,115,201,.5),transparent 68%),
  radial-gradient(30% 36% at 92% 10%,rgba(123,152,221,.22),transparent 70%),
  radial-gradient(36% 40% at 0 100%,rgba(75,115,201,.14),transparent 70%)}
.floor{position:absolute;left:50%;bottom:0;width:240vw;height:62vh;transform:translateX(-50%) perspective(820px) rotateX(76deg);transform-origin:50% 100%;overflow:hidden;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 46% 92% at 50% 100%,#000 8%,transparent 72%);mask-image:radial-gradient(ellipse 46% 92% at 50% 100%,#000 8%,transparent 72%)}
.floor i{position:absolute;inset:-80px 0 0;display:block;background-image:linear-gradient(var(--grid,rgba(123,152,221,.3)) 1px,transparent 1px),linear-gradient(90deg,var(--grid,rgba(123,152,221,.3)) 1px,transparent 1px);background-size:80px 80px;animation:floor 5s linear infinite}
@keyframes floor{to{transform:translate3d(0,80px,0)}}
.hero-in{display:grid;grid-template-columns:1.18fr .82fr;gap:var(--s-6);align-items:center}
.hero h1{font-size:clamp(2.7rem,5.4vw,4.8rem);text-wrap:normal}
.hero h1 .ln{display:block;white-space:nowrap}
.hero .lede{margin:var(--s-5) 0 var(--s-6);max-width:42ch;font-size:clamp(1.08rem,1.5vw,1.25rem)}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:var(--pill);background:#fff;border:1px solid var(--line);font-size:.84rem;font-weight:500;color:var(--fg-2);box-shadow:var(--edge);margin-bottom:var(--s-5)}
.hero-kicker b{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--pill);background:var(--blue-fill);color:#fff;font-weight:600;font-size:.74rem;letter-spacing:.02em}
.hero .hero-kicker{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:none;color:#c6cedb}
.hero .btn-primary{background:#fff;color:#0a0c11;box-shadow:0 14px 40px -14px rgba(75,115,201,.9)}
.hero .btn-primary:hover{background:#e9effb}
.hero .btn-lite{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.24);box-shadow:none}
.hero .btn-lite:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.hero .rig-shadow{display:none}
.hero .ext.last{box-shadow:0 70px 100px -34px rgba(0,0,0,.8),0 0 130px 8px rgba(75,115,201,.42)}
.hero .orbit::after{border-color:rgba(123,152,221,.22)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-copy>*{animation:rise .9s var(--ease) both}
.hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}.hero-copy>*:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translate3d(0,22px,0)}}

.scene{position:relative;height:min(660px,76vh);min-height:520px;perspective:1500px;perspective-origin:50% 42%;transform:translateY(clamp(60px,11vh,120px))}
.rig-scroll,.rig-float,.rig{position:absolute;inset:0;transform-style:preserve-3d}
.rig-float{animation:floaty 7s ease-in-out infinite alternate}
@keyframes floaty{from{transform:translate3d(0,-10px,0)}to{transform:translate3d(0,12px,0)}}
.rig{transform:rotateX(calc(9deg + var(--py,0)*-6deg)) rotateY(calc(-24deg + var(--px,0)*10deg));animation:rigIn 1.6s var(--ease) both}
@keyframes rigIn{from{opacity:0;transform:rotateX(26deg) rotateY(-58deg) translate3d(0,60px,-260px)}}
.rig>*{position:absolute;left:50%;top:50%}
.rig-shadow{position:absolute;left:50%;bottom:2%;width:70%;height:70px;transform:translateX(-46%);background:radial-gradient(closest-side,rgba(38,58,110,.4),transparent);filter:blur(14px);pointer-events:none}
.orbit{width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;transform:rotateX(78deg) translateZ(-40px);transform-style:preserve-3d;pointer-events:none}
.orbit::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;background:conic-gradient(from 0deg,transparent 0 58%,rgba(75,115,201,.9) 84%,#9db4ea 90%,transparent 93%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 9s linear infinite}
.orbit::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(75,115,201,.18)}
@keyframes spin{to{transform:rotate(360deg)}}

/* the device: real thickness, built from stacked layers (see extrude() in the script) */
.phone,.demo-phone{width:290px;aspect-ratio:9/19;border-radius:46px;padding:11px;background:linear-gradient(145deg,#2b313d,#0c0f15 42%,#1b2029);transform-style:preserve-3d;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 0 0 3px #05070b}
.phone{margin:-306px 0 0 -145px}
.ext{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#3a4150,#141821 30%,#0a0d13 70%,#465064);transform:translateZ(calc(var(--i)*-1.6px));pointer-events:none}
.ext.last{background:#0a0d13;box-shadow:0 60px 90px -24px rgba(38,58,110,.6),0 0 110px 6px rgba(75,115,201,.22)}
.phone::before,.demo-phone::before{content:"";position:absolute;top:21px;left:50%;transform:translateX(-50%) translateZ(1px);width:92px;height:26px;border-radius:14px;background:#05070b;z-index:3}
.screen,.demo-screen{position:relative;width:100%;height:100%;border-radius:36px;background:#faf9f6;overflow:hidden;transform:translateZ(.5px)}
.glare{position:absolute;inset:11px;border-radius:36px;pointer-events:none;z-index:4;transform:translateZ(1.5px);background:linear-gradient(115deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.05) 22%,transparent 38%,transparent 72%,rgba(255,255,255,.08) 100%);background-size:220% 100%;background-position:calc(50% + var(--px,0)*-40%) 0;mix-blend-mode:screen}
.scr{position:absolute;inset:0;padding:60px 18px 20px;display:flex;flex-direction:column;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.scr.on{opacity:1;transform:none}

/* floating pieces around the phone. No backdrop-filter in here: inside a preserve-3d rig it blanks the page in Chromium. */
.notif{width:292px;margin:56px 0 0 -384px;background:#fff;border-radius:22px;padding:14px 16px 15px;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 50px 80px -30px rgba(0,0,0,.75),0 0 0 1px rgba(18,21,29,.06);color:#12151d;opacity:0;transform:translate3d(0,-14px,170px) scale(.95);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.notif.on{opacity:1;transform:translate3d(0,0,170px)}
.nt-head{display:flex;align-items:center;gap:8px;margin-bottom:11px;font-size:.74rem;color:#687285}
.nt-head img{width:20px;height:20px;border-radius:6px;flex:none}
.nt-head b{font-weight:600;color:#12151d}
.nt-head span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}
.notif .nm{font-family:var(--disp);font-weight:700;font-size:1.06rem;letter-spacing:-.025em;color:#12151d;line-height:1.2}
.notif .ns{font-size:.9rem;color:#4b5565;margin-top:3px}
.nt-foot{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(18,21,29,.08)}
.nt-act{margin-left:auto;font-size:.78rem;font-weight:700;padding:8px 16px;border-radius:var(--pill);background:#14171f;color:#fff;transition:background var(--t),color var(--t)}
.notif.done .nt-act{background:#e4f4ec;color:#1f8f5f}
.badge{font-size:.74rem;font-weight:700;padding:5px 11px;border-radius:var(--pill);background:#fdf1e0;color:#a2610f;transition:background var(--t),color var(--t)}
.notif.done .badge{background:#e4f4ec;color:#1f8f5f}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .rig-scroll{animation:heroScroll linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    @keyframes heroScroll{to{transform:translate3d(0,90px,-220px) rotateX(16deg)}}
  }
}
@media (max-width:1100px){.hero-in{grid-template-columns:1.15fr .85fr}.notif{margin-left:-300px}}
@media (max-width:900px){
  .hero{min-height:0;padding-top:calc(74px + var(--s-7))}
  .hero h1{max-width:none}
  .hero-in{grid-template-columns:1fr;gap:0}
  .scene{height:600px;margin-top:var(--s-4)}
  .rig{transform:rotateX(8deg) rotateY(-16deg) scale(.92)}
  .notif{margin:120px 0 0 -236px;width:244px}
  .orbit{width:440px;height:440px;margin:-220px 0 0 -220px}
}

@media (max-width:520px){.hero h1{font-size:clamp(2rem,10.4vw,2.6rem)}.nav-in{padding:0 6px 0 10px;gap:8px}.nav-cta .btn{padding:.55em .95em;font-size:.86rem}.scene{height:540px;min-height:0}.rig{transform:rotateX(8deg) rotateY(-16deg) scale(.8)}.hero-cta .btn{flex:1}}
/* anything looping stops while its section is off screen (see the script) */
.offscreen *,.offscreen *::before,.offscreen *::after{animation-play-state:paused!important}

/* ── inner pages: the same black band, shorter, under the same nav ─────────── */
.page-hero{min-height:0;display:block;padding:calc(74px + clamp(2.5rem,7vh,5rem)) 0 clamp(3rem,7vh,5rem)}
.page-hero h1{font-size:clamp(2.4rem,5vw,4.2rem);max-width:16ch}
.page-hero .lede{max-width:56ch;margin:var(--s-4) 0 var(--s-6)}
.nav-links a.on{color:var(--fg);background:var(--bg-3)}
.nav:not(.scrolled):not(.menu-open) .nav-links a.on{color:#fff;background:rgba(255,255,255,.12)}
.mobile-menu a.on{color:var(--blue)}
.bmeta .tlink{flex:none;font-size:.92rem}
.b-camp{grid-column:span 12}
@media (max-width:900px){.b-camp{grid-column:span 2}}

/* ── marquee strip (the one marquee on the page) ─────────────────────────── */
.strip{position:relative;z-index:1;padding:calc(var(--s-6) + clamp(60px,11vh,120px)) 0 var(--s-6);border-bottom:1px solid var(--line);background:var(--bg-2)}
.strip .lbl{text-align:center;font-size:var(--fs-small);color:var(--fg-3);margin-bottom:var(--s-4)}
.marquee{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;gap:0;animation:marquee 36s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:var(--s-7);padding-right:var(--s-7);list-style:none}
.marquee-group li{display:inline-flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:700;font-size:1.25rem;letter-spacing:-.03em;color:var(--fg-2);white-space:nowrap}
.marquee-group li .ico{color:var(--blue)}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.marquee{mask-image:none;-webkit-mask-image:none}.marquee-group[aria-hidden]{display:none}}

/* ── problem / fix: the lines light up as you reach them ─────────────────── */
.prob-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-8);align-items:end}
.prob-grid h2{margin-bottom:var(--s-6)}
.prob-list li{list-style:none;font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,2.5vw,2rem);letter-spacing:-.035em;padding:18px 0;border-bottom:1px solid var(--line-2);color:var(--fg);line-height:1.2;opacity:.28;transition:opacity .7s var(--ease),transform .7s var(--ease);transform:translate3d(-10px,0,0)}
.prob-list li.lit{opacity:1;transform:none}
.prob-list li span{color:var(--blue)}
.prob-card{position:relative;overflow:hidden;border-radius:var(--r-4);padding:var(--s-6);background:linear-gradient(160deg,#6288dc,#4268c6 55%,#3459c7);box-shadow:0 0 0 1px rgba(52,89,199,.2),0 40px 80px -40px rgba(52,89,199,.7)}
.prob-card::after{content:"";position:absolute;width:320px;height:320px;right:-110px;bottom:-150px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.34),transparent 65%)}
.card-label{display:inline-block;font-size:.84rem;font-weight:600;color:rgba(255,255,255,.8);margin-bottom:14px}
.prob-card h3{color:#fff;margin:0 0 14px;font-size:1.8rem;position:relative}
.prob-card p{color:rgba(255,255,255,.9);position:relative}
@media (max-width:900px){.prob-grid{grid-template-columns:1fr;align-items:start}}

/* ── steps ───────────────────────────────────────────────────────────────── */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.steps .prog{display:none}
.step{position:relative;border-radius:var(--r-3);padding:14px 14px 22px;background:#fff;box-shadow:var(--ring),var(--edge);transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.step:hover{transform:translateY(-6px);box-shadow:var(--ring),0 1px 2px rgba(18,21,29,.04),0 34px 60px -30px rgba(52,89,199,.5)}
.step:nth-child(odd){margin-top:34px}
.step:not(:last-child)::after{content:"";position:absolute;right:-13px;top:96px;z-index:2;width:10px;height:10px;border-top:2px solid var(--blue-fill);border-right:2px solid var(--blue-fill);transform:rotate(45deg);opacity:.55}
.step-vis{position:relative;height:150px;border-radius:var(--r-2);margin-bottom:18px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 90% at 50% 0,#fff,transparent 70%),linear-gradient(160deg,#eaf0fb,#dde7f8)}
.step-head{display:flex;align-items:center;gap:12px;margin:0 6px 8px}
.step .num{width:38px;height:38px;flex:none;border-radius:12px;background:var(--bg-3);display:grid;place-items:center;color:var(--fg-3);font-size:1.05rem;transition:background var(--t-slow),color var(--t-slow),box-shadow var(--t-slow)}
.step.lit .num{background:var(--blue-fill);color:#fff;box-shadow:0 10px 22px -10px var(--glow)}
.step h4{font-size:1.2rem}
.step p{color:var(--fg-2);font-size:.96rem;margin:0 6px}
.sv-qr{width:96px;padding:9px 8px 7px;border-radius:14px;background:#fff;text-align:center;box-shadow:0 0 0 2.5px var(--blue-app),0 18px 30px -14px rgba(38,58,110,.5);transform:rotate(-5deg);transition:transform var(--t-slow) var(--ease)}
.step:hover .sv-qr{transform:rotate(0) scale(1.05)}
.sv-qr svg{width:100%;height:auto;display:block}
.sv-qr b{display:block;font-family:var(--disp);font-weight:800;font-size:.66rem;margin-top:5px;color:#12151d}
.sv-row{display:flex;align-items:center;gap:8px;width:88%;padding:9px 10px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(75,115,201,.18),0 14px 26px -14px rgba(38,58,110,.45);font-size:.78rem;font-weight:700;color:#12151d;text-align:left}
.sv-row>span{white-space:nowrap}
.sv-row .tn{font-family:var(--disp);font-weight:800;font-size:.68rem;padding:6px 7px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.sv-row small{display:block;font-weight:500;font-size:.66rem;color:#687285}
.sv-row .ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:#eaf0fb;color:var(--blue-app)}
.sv-row .go{margin-left:auto;font-size:.6rem;font-weight:800;letter-spacing:.06em;padding:6px 9px;border-radius:var(--pill);background:var(--blue-fill);color:#fff}
.sv-row.tap{box-shadow:0 0 0 2px var(--blue-app),0 0 0 8px rgba(75,115,201,.16),0 14px 26px -14px rgba(38,58,110,.45)}
.sv-row.ok{background:#ecf9f0;box-shadow:0 0 0 1px #bfe6cd,0 14px 26px -14px rgba(38,58,110,.4)}
.sv-stack{display:grid;gap:8px;width:100%;justify-items:center}
.step-vis .mini-bars{width:78%;height:96px;margin:0}
@media (max-width:1000px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(odd){margin-top:0}.step::after{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ── bento: 5 cells, 5 things. A cursor spotlight lights the ring. ───────── */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.bcard{position:relative;overflow:hidden;border-radius:var(--r-3);padding:var(--s-5);display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,var(--glass-2),var(--glass));box-shadow:var(--ring),var(--edge);transition:transform var(--t) var(--ease)}
.bcard::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(340px circle at var(--mx,50%) var(--my,-40%),rgba(75,115,201,.85),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity var(--t);pointer-events:none}
.bcard::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(75,115,201,.09),transparent 60%);opacity:0;transition:opacity var(--t);pointer-events:none}
.bcard:hover::before,.bcard:hover::after{opacity:1}
.bcard>*{position:relative;z-index:1}
.b-req{grid-column:span 7;grid-row:span 2;background:radial-gradient(90% 70% at 80% 100%,rgba(75,115,201,.2),transparent 70%),#fff}
.b-spec,.b-feed{grid-column:span 5}
.b-ins{grid-column:span 5}
.b-ord{grid-column:span 7}
.bhead{display:flex;align-items:center;gap:12px}
.bicon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eaf0fb;color:var(--blue);font-size:1.15rem}
.bstatus{font-size:.84rem;font-weight:600;color:var(--fg-3)}
.bcard h3{font-size:1.4rem}
.b-req h3{font-size:clamp(1.6rem,2.6vw,2.2rem);max-width:16ch}
.bcard p{color:var(--fg-2);font-size:.98rem;max-width:52ch}
.bmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tagpill{font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:var(--pill);background:var(--bg-3);color:var(--fg-2)}
.tagpill.blue{background:#e4ecfb;color:var(--blue)}
.mini-stars{color:var(--amber);letter-spacing:.12em;font-size:1rem}
.bento-ui{margin-top:8px;border-radius:var(--r-2);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);padding:12px;display:grid;gap:8px}
.b-req .bento-ui{margin-top:auto;transform:perspective(900px) rotateX(10deg);transform-origin:50% 100%;transition:transform var(--t-slow) var(--ease)}
.b-req:hover .bento-ui{transform:perspective(900px) rotateX(0)}
.bento-ui .row{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500;background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 18px -12px rgba(38,58,110,.3);border-radius:var(--r-1);padding:10px 12px;color:var(--fg)}
.bento-ui .row .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#eaf0fb;color:var(--blue)}
.bento-ui .row.sp{padding:8px 10px}.bento-ui .row.sp .ph{width:44px;height:44px;border-radius:10px;overflow:hidden;flex:none}.bento-ui .row.sp img{width:100%;height:100%;object-fit:cover}.bento-ui .row.sp b{display:block;font-family:var(--disp);font-size:.9rem;color:var(--fg);letter-spacing:-.01em}.bento-ui .row.sp small{color:var(--fg-3);font-size:.78rem}
.bento-ui .row.acc{background:#ecf9f0;box-shadow:0 0 0 1px #bfe6cd;color:var(--green);justify-content:center;font-weight:600}
.bento-ui .row .stepper{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.86rem;padding:5px 10px;border-radius:var(--pill);background:var(--blue-fill);color:#fff}
.mini-bars{display:flex;align-items:flex-end;gap:5px;height:74px;margin-top:6px}
.mini-bars i{flex:1;display:block;height:var(--h);border-radius:4px 4px 1px 1px;background:rgba(75,115,201,.22);transform-origin:50% 100%}
.mini-bars i.pk{background:linear-gradient(180deg,#7b98dd,#4b73c9)}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.b-req{grid-column:span 2;grid-row:auto}.b-spec,.b-feed,.b-ins{grid-column:span 1}.b-ord{grid-column:span 2}}
@media (max-width:600px){.bento{grid-template-columns:1fr}.bcard{grid-column:auto!important}}

/* ── guest demo: the phone turns to face each step ───────────────────────── */
.demo-sec{overflow:clip}
.demo-sec::before{content:"";position:absolute;inset:10% auto auto -14%;width:62vw;height:62vw;border-radius:50%;background:radial-gradient(circle,rgba(75,115,201,.2),transparent 62%);pointer-events:none}
.demo-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-8);align-items:center;position:relative}
.demo-phone-col{display:grid;place-items:center;perspective:1400px;min-height:660px}
.demo-tilt{transform-style:preserve-3d;transform:rotateX(calc(5deg + var(--py,0)*-5deg)) rotateY(calc(var(--ry,18deg) + var(--px,0)*8deg));transition:transform 1s var(--ease)}
.demo-tilt.tilting{transition:transform .25s linear}
.demo-phone{position:relative}
.demo-screen{color:#171b21}
.dscr{position:absolute;inset:0;padding:42px 18px 20px;display:flex;flex-direction:column;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.dscr.on{opacity:1;transform:none}
.captions{display:grid;gap:6px}
.caption{position:relative;overflow:hidden;padding:18px 22px;border-radius:var(--r-2);border:1px solid transparent;cursor:pointer;opacity:.8;transition:background var(--t),border-color var(--t),opacity var(--t),box-shadow var(--t),transform var(--t) var(--ease)}
.caption:hover{opacity:1;background:rgba(255,255,255,.7)}
.caption.act{opacity:1;background:#fff;border-color:var(--line);box-shadow:var(--edge);transform:translateX(6px)}
.caption::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--blue-fill),var(--blue));transform:scaleX(0);transform-origin:0 50%}
.caption.act.run::after{animation:capbar 2.8s linear forwards}
@keyframes capbar{to{transform:scaleX(1)}}
.caption h3{color:var(--fg);font-size:1.22rem;margin-bottom:0}
.caption.act h3{color:var(--blue)}
.caption p{color:var(--fg-2);font-size:.97rem;margin-top:6px}
.caption p>span{display:block}
.caption.act p{color:var(--fg-2)}
@media (max-width:900px){.demo-grid{grid-template-columns:1fr}.demo-phone-col{min-height:640px}.demo-tilt{--ry:10deg!important}}

/* ── ordering: the whole menu on the phone, the order landing on a staff ticket ── */
.ord-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
.ord-grid h2{margin:0 0 18px}
.ticks{list-style:none;display:grid;gap:14px;margin-top:var(--s-5)}
.ticks li{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;color:var(--fg-2)}
.ticks li b{display:block;color:var(--fg);font-family:var(--disp);font-weight:700;letter-spacing:-.015em}
.ticks .tk{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#e4ecfb;color:var(--blue)}
.ticks .tk .ico{width:15px;height:15px;stroke-width:2.6}
.ord-scene{position:relative;display:grid;place-items:center;min-height:680px;perspective:1500px}
.ord-scene::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(75,115,201,.26),transparent 66%);pointer-events:none}
.ord-rig{position:relative;transform-style:preserve-3d;transform:rotateX(calc(7deg + var(--py,0)*-6deg)) rotateY(calc(-20deg + var(--px,0)*10deg))}
.ord-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;transform:translateZ(.5px);background:linear-gradient(180deg,#f5f6f8,#eef2f7);font-family:var(--sans);color:#1a1d24}
.od-app{position:absolute;inset:0;padding:48px 11px 0;display:flex;flex-direction:column}
.od-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.od-head b{display:block;font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:-.01em}.od-head small{display:block;font-size:9.5px;color:#7a828e}
.od-chips{display:flex;gap:5px;margin-bottom:8px}
.od-chips span{font-size:9px;font-weight:700;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid #e2e8f0;color:#4a5361}
.od-chips span.on{background:#17191c;border-color:#17191c;color:#fff}
.od-cat{font-family:var(--disp);font-weight:800;font-size:11.5px;margin:6px 2px 6px;color:#1a1d24}
.od-item{position:relative;display:flex;align-items:center;gap:9px;padding:7px;border-radius:14px;background:#fff;border:1px solid #e7ebf1;margin-bottom:7px;box-shadow:0 4px 16px -8px rgba(23,25,28,.14);transition:border-color var(--t),box-shadow var(--t)}
.od-item img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none}
.od-item>span:nth-of-type(1){flex:1;min-width:0}
.od-item b{display:block;font-size:10.5px;font-weight:700;line-height:1.2}
.od-item small{display:block;font-size:8.5px;color:#7a828e;line-height:1.3;margin-top:1px}
.od-item em{display:block;font-style:normal;font-size:10px;font-weight:800;margin-top:2px}
.od-add,.od-step{flex:none;font-size:8.5px;font-weight:800;padding:6px 9px;border-radius:999px;background:#17191c;color:#fff;white-space:nowrap}
.od-step{display:none;background:#4b73c9;letter-spacing:.12em}
.od-item.in{border-color:#4b73c9;box-shadow:0 0 0 3px rgba(75,115,201,.14)}
.od-item.in .od-add{display:none}.od-item.in .od-step{display:inline-block}
.tapping::after{content:"";position:absolute;right:6px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:rgba(75,115,201,.3);animation:tapring .5s var(--ease) both;pointer-events:none}
@keyframes tapring{from{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:0}}
.od-bar{position:absolute;left:11px;right:11px;bottom:12px;padding:11px;border-radius:14px;background:linear-gradient(135deg,#23262d,#17191c);color:#fff;font-size:10.5px;font-weight:800;text-align:center;box-shadow:0 10px 24px -8px rgba(23,25,28,.6);transform:translateY(160%);transition:transform .5s var(--ease)}
.has-cart .od-bar{transform:none}
.od-sheet{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 14px;border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -20px 50px rgba(15,23,42,.25);transform:translateY(105%);transition:transform .6s var(--ease)}
.show-sheet .od-sheet{transform:none}
.show-sheet .od-app{filter:brightness(.72)}
.od-app{transition:filter .4s}
.od-sh-t{display:block;font-family:var(--disp);font-weight:800;font-size:14px;margin-bottom:8px}
.od-line,.od-total{display:flex;justify-content:space-between;gap:8px;font-size:10px;padding:6px 0;border-bottom:1px solid #eef1f5;color:#39404b}
.od-total{border:0;font-size:12px;font-weight:800;color:#1a1d24;padding-top:9px}
.od-ways{display:flex;gap:6px;margin:10px 0 2px}
.od-ways span{flex:1;text-align:center;font-size:9.5px;font-weight:800;padding:8px 4px;border-radius:11px;border:2px solid #e7ebf1;background:#fff}
.od-ways span.on{border-color:#4b73c9;background:#eaf0fb;color:#2f4f8f}
.od-send{position:relative;display:block;margin-top:8px;padding:11px;border-radius:13px;background:linear-gradient(135deg,#23262d,#17191c);color:#fff;font-size:11px;font-weight:800;text-align:center}
.od-note{display:block;text-align:center;font-size:8.5px;color:#7a828e;margin-top:7px}
.od-status{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;padding:20px;text-align:center;background:linear-gradient(180deg,#f5f6f8,#eef2f7);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.show-status .od-status{opacity:1}
.od-status .okc{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.25);color:#166534;margin-bottom:4px}
.od-status .okc .ico{width:24px;height:24px;stroke-width:2.6}
.od-status h5{font-family:var(--disp);font-size:16px;font-weight:800;letter-spacing:-.01em}
.od-status p{font-size:10px;color:#7a828e;max-width:24ch;line-height:1.5}
.od-pill{margin-top:6px;font-size:10px;font-weight:800;padding:6px 13px;border-radius:999px;background:#eaf0fb;color:#3a5ea8;transition:background var(--t),color var(--t)}
.od-pill.go{background:#e4f4ec;color:#1f8f5f}
/* the staff ticket, floating in front of the phone (no backdrop-filter inside a 3D rig) */
.od-ticket{position:absolute;left:-150px;bottom:70px;width:236px;padding:14px;border-radius:18px;background:#fff;border:1.5px solid #4b73c9;box-shadow:0 0 0 5px rgba(75,115,201,.12),0 40px 70px -26px rgba(38,58,110,.6);color:#1a1d24;opacity:0;transform:translate3d(-24px,10px,150px) scale(.94);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.od-ticket.on{opacity:1;transform:translate3d(0,0,150px)}
.odt-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.odt-top b{font-family:var(--disp);font-weight:800;font-size:1rem;letter-spacing:-.02em}
.odt-way{font-size:.66rem;font-weight:700;padding:3px 8px;border-radius:999px;background:#eaf0fb;color:#3a5ea8}
.odt-timer{margin-left:auto;font-family:var(--disp);font-weight:800;font-size:.9rem;color:#3a5ea8;font-variant-numeric:tabular-nums}
.odt-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:11px;border:1px solid #e7ebf1;background:#fbfcfd;font-size:.78rem;font-weight:600;margin-bottom:6px;transition:opacity var(--t)}
.odt-item i{width:17px;height:17px;flex:none;border-radius:6px;border:1.5px solid #dfe4ea;display:grid;place-items:center;transition:background var(--t),border-color var(--t)}
.odt-item.done{opacity:.55;text-decoration:line-through}
.odt-item.done i{background:#1f8f5f;border-color:#1f8f5f}
.odt-item.done i::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.odt-actions{display:flex;gap:6px;margin-top:8px}
.odt-btn{flex:1;text-align:center;font-size:.72rem;font-weight:800;padding:9px 6px;border-radius:999px;background:#fbe9e7;color:#c0453c;transition:background var(--t),color var(--t)}
.odt-btn.ok{flex:2;background:#1f8f5f;color:#fff}
.od-ticket.accepted .odt-btn:not(.ok){display:none}
@media (max-width:1100px){.od-ticket{left:-110px;width:214px}}
@media (max-width:900px){.ord-grid{grid-template-columns:1fr}.ord-scene{min-height:660px}.ord-rig{transform:rotateX(6deg) rotateY(-12deg)}.od-ticket{left:-64px;bottom:40px}}
@media (max-width:520px){.ord-rig{transform:rotateX(6deg) rotateY(-10deg) scale(.88)}.od-ticket{left:-40px;width:200px}}

/* ── campaigns: the real campaign card (ported from src/campaigns/styles/card.css).
   It turns over, a stamp lands, and the claim panel beside it confirms. ── */
.camp-sec{overflow:clip}
.camp-sec::before{content:"";position:absolute;left:50%;top:34%;width:70vw;height:70vw;max-width:980px;max-height:980px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(75,115,201,.16),transparent 62%);pointer-events:none}
.camp-grid{position:relative;display:grid;grid-template-columns:.95fr 1.25fr .95fr;gap:var(--s-6);align-items:center}
.camp-types{list-style:none;display:grid;gap:10px}
.camp-types li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding:14px;border-radius:var(--r-2);background:#fff;box-shadow:var(--ring),var(--edge);transition:transform var(--t-slow) var(--ease)}
.camp-types li:hover{transform:translateX(6px)}
.camp-types .ct{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#e4ecfb;color:var(--blue);font-size:1.1rem}
.camp-types b{display:block;font-family:var(--disp);font-weight:700;letter-spacing:-.015em;color:var(--fg)}
.camp-types small{display:block;font-size:.88rem;color:var(--fg-2);line-height:1.45;margin-top:2px}
.camp-stage{display:grid;justify-items:center;gap:var(--s-5);perspective:1400px}
.camp-tilt{width:100%;max-width:440px;transform-style:preserve-3d;transform:rotateX(calc(10deg + var(--py,0)*-12deg)) rotateY(calc(-14deg + var(--px,0)*16deg))}
.cm-ccard{position:relative;width:100%;aspect-ratio:85.6/53.98;perspective:1400px}
.cm-ccard-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.cm-ccard.is-back .cm-ccard-inner{transform:rotateY(180deg)}
.cm-ccard.is-boom{animation:cmCardThud .4s ease .08s}
@keyframes cmCardThud{0%,100%{transform:none}40%{transform:translateY(4px) scale(.985)}}
.cm-ccard-face{position:absolute;inset:0;overflow:hidden;container-type:size;border-radius:4.4%/7%;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 50px 80px -34px rgba(38,58,110,.75),0 2px 6px rgba(18,21,29,.18);display:grid;grid-template-rows:auto 1fr auto;padding:4.4% 6.5%;color:#fff}
.cm-ccard-front{transform:rotateY(0deg);background:radial-gradient(120% 90% at 100% 0%,rgba(122,162,255,.45),transparent 55%),linear-gradient(135deg,#2f4f8f 0%,#1b2440 55%,#0f1320 100%)}
.cm-ccard-back{transform:rotateY(180deg);background:radial-gradient(110% 80% at 0% 100%,rgba(245,185,66,.18),transparent 55%),linear-gradient(135deg,#1b2440 0%,#121726 60%,#0c0f18 100%)}
.cm-ccard-face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.38) 48%,transparent 61%) no-repeat;background-size:260% 100%;animation:cmCardShine 3.4s ease-in-out infinite}
@keyframes cmCardShine{0%{background-position:120% 0}55%,100%{background-position:-20% 0}}
.cm-ccard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:3cqw;min-width:0}
.cm-ccard-sponsor{min-width:0;overflow:hidden;font-size:4.6cqw;font-weight:800;letter-spacing:.06em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.cm-ccard-kind{flex:0 0 auto;padding:.6cqw 2.2cqw;border:1px solid rgba(255,255,255,.35);border-color:color-mix(in srgb,currentColor 38%,transparent);border-radius:999px;font-size:3cqw;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.cm-ccard-middle{display:grid;align-content:center;min-width:0}
.cm-ccard-name{font-family:var(--disp);font-size:7cqw;font-weight:800;line-height:1.05;text-transform:uppercase}
.cm-ccard-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:3cqw;font-size:3.4cqw;opacity:.85}
.cm-ccard-mark{font-family:'Satisfy',cursive;font-size:6.2cqw;font-weight:400;font-synthesis:none;letter-spacing:0;line-height:1}
.cm-stamps{--s:min(calc((86cqw - (var(--cols) - 1)*2.4cqw)/var(--cols)),calc((54cqh - (var(--rows) - 1)*3.5cqh)/var(--rows)));display:grid;grid-template-columns:repeat(var(--cols),var(--s));gap:3.5cqh 2.4cqw;align-self:center;justify-self:center;margin:0;padding:0;list-style:none}
.cm-stamp{position:relative;display:grid;place-items:center;width:var(--s);height:var(--s);border:max(1px,.35cqw) dashed rgba(255,255,255,.34);border-radius:50%;color:rgba(255,255,255,.45);font-size:calc(var(--s)*.36);font-weight:800}
.cm-stamp.is-on{border:0;background:radial-gradient(circle at 35% 30%,#ffe9a8,#f5b942 55%,#c98a1c);color:#3a2400;font-size:calc(var(--s)*.5);transform:rotate(var(--r));box-shadow:0 .6cqw 1.4cqw rgba(0,0,0,.35),inset 0 0 0 max(1px,.5cqw) rgba(255,255,255,.35)}
.cm-stamp.is-fresh{animation:cmStampBoom .6s cubic-bezier(.2,1.5,.4,1) both}
.cm-stamp.is-fresh::after{content:"";position:absolute;inset:-12%;border:max(2px,.6cqw) solid #f5d06f;border-radius:50%;animation:cmStampRing .7s ease-out both}
@keyframes cmStampBoom{0%{opacity:0;transform:scale(2.8) rotate(-30deg)}55%{opacity:1}100%{opacity:1;transform:scale(1) rotate(var(--r))}}
@keyframes cmStampRing{from{opacity:.95;transform:scale(.6)}to{opacity:0;transform:scale(2.3)}}
.cm-ccard-reward{margin:0;font-size:3.6cqw;font-weight:700;text-align:center;opacity:.88}
.cm-ccard.is-themed .cm-ccard-face{background:var(--cc-surface)}
.cm-ccard.is-theme-midnight{--cc-surface:radial-gradient(120% 90% at 100% 0%,rgba(129,140,248,.35),transparent 55%),linear-gradient(135deg,#312e81 0%,#1e1b4b 50%,#0b0a1f 100%)}
.cm-ccard.is-theme-sunset{--cc-surface:radial-gradient(120% 90% at 100% 0%,rgba(255,236,179,.45),transparent 55%),linear-gradient(135deg,#ff9a3c 0%,#ff4e6a 55%,#8e2de2 100%)}
.cm-ccard.is-theme-gold{--cc-surface:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.6),transparent 55%),linear-gradient(135deg,#fbe7ad 0%,#f2c14e 50%,#c9922b 100%)}
.cm-ccard.is-theme-emerald{--cc-surface:radial-gradient(120% 90% at 100% 0%,rgba(110,231,183,.35),transparent 55%),linear-gradient(135deg,#10926a 0%,#065f46 55%,#022c22 100%)}
.cm-ccard.is-theme-black{--cc-surface:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.14),transparent 55%),linear-gradient(135deg,#2a2a2e 0%,#121214 55%,#000 100%)}
.cm-ccard.is-ink-dark .cm-ccard-face{color:#1a1d24}
.cm-ccard.is-ink-dark .cm-stamp:not(.is-on){border-color:rgba(26,29,36,.3);color:rgba(26,29,36,.5)}
.camp-swatches{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--pill);background:#fff;box-shadow:var(--ring),var(--edge)}
.camp-swatches span{font-size:.8rem;font-weight:600;color:var(--fg-3);margin-right:2px}
.camp-swatches button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2);background:var(--sw);transition:transform var(--t-fast),box-shadow var(--t-fast)}
.camp-swatches button:hover{transform:scale(1.15)}
.camp-swatches button.on{box-shadow:0 0 0 2px var(--blue-fill)}
.camp-panel{position:relative;border-radius:var(--r-3);padding:var(--s-4);background:#fff;box-shadow:var(--ring),var(--edge);color:#1a1d24;min-height:270px;display:grid}
.camp-panel>div{grid-area:1/1;display:grid;align-content:center;gap:10px;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.camp-panel .cp-done,.camp-panel.done .cp-claim{opacity:0;transform:translateY(10px);pointer-events:none}
.camp-panel.done .cp-done{opacity:1;transform:none}
.cp-label{font-size:.78rem;font-weight:600;color:#687285}
.camp-panel h3{font-size:1.3rem;color:#12151d}
.cp-btn{position:relative;overflow:hidden;display:block;text-align:center;padding:14px;border-radius:14px;background:linear-gradient(135deg,#23262d,#17191c);color:#fff;font-weight:800;font-size:1rem;box-shadow:0 12px 26px -12px rgba(23,25,28,.7);transition:transform var(--t-fast)}
.cp-btn.press{transform:scale(.97)}
.cp-btn.press::after{content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px;border-radius:50%;background:rgba(255,255,255,.3);animation:tapring .5s var(--ease) both}
.cp-count{justify-self:center;font-size:.8rem;font-weight:700;padding:5px 12px;border-radius:999px;background:#eaf0fb;color:#3a5ea8;font-variant-numeric:tabular-nums}
.cp-sub{font-size:.8rem;color:#687285;text-decoration:underline;text-underline-offset:3px;justify-self:center}
.cp-bar{height:8px;border-radius:8px;background:#eef1f5;overflow:hidden}
.cp-bar i{display:block;height:100%;width:var(--p,37.5%);border-radius:8px;background:linear-gradient(90deg,#f5b942,#e09a1f);transition:width .9s var(--ease)}
.cp-prog{font-size:.9rem;color:#475569}.cp-prog strong{color:#12151d}
.cp-ref{font-size:.76rem;color:#687285}
@media (max-width:1000px){.camp-grid{grid-template-columns:1fr 1fr}.camp-stage{grid-column:1/-1;order:-1}}
@media (max-width:640px){.camp-grid{grid-template-columns:1fr}.camp-tilt{transform:rotateX(8deg) rotateY(-8deg)}}

/* ── staff queue: a tilted panel, the rows float off it ──────────────────── */
.staff-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
.staff-grid h2{margin:18px 0}
.qr-mini-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-5)}
.qr-mini-list span{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;padding:8px 14px;border-radius:var(--pill);background:#fff;border:1px solid var(--line);box-shadow:0 8px 18px -14px rgba(38,58,110,.4);color:var(--fg-2)}
.qr-mini-list span .ico{color:var(--blue);width:14px;height:14px;stroke-width:2.5}
.queue-stage{perspective:1400px}
.queue{transform-style:preserve-3d;transform:rotateX(calc(12deg + var(--py,0)*-6deg)) rotateY(calc(-18deg + var(--px,0)*8deg));border-radius:var(--r-4);padding:var(--s-4);background:linear-gradient(170deg,#fff,#f3f6fc);box-shadow:0 0 0 1px rgba(52,89,199,.12),-40px 60px 100px -46px rgba(38,58,110,.6);color:var(--fg)}
.queue-top{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 16px;transform:translateZ(20px)}
.queue-top b{font-family:var(--disp);font-weight:700;letter-spacing:-.02em}
.queue .live{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--fg-2)}
.queue .live i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(62,207,142,.2);animation:dot 1.6s infinite}
@keyframes dot{0%,100%{opacity:.35}50%{opacity:1}}
.qitem{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:#ecf9f0;box-shadow:0 0 0 1px #bfe6cd,0 18px 30px -20px rgba(38,58,110,.5);border-radius:16px;padding:12px;margin-bottom:10px;transform:translateZ(calc(34px + var(--z,0px)));transition:transform var(--t-slow) var(--ease),opacity var(--t-slow),background var(--t)}
.qitem:nth-child(2){--z:26px}.qitem:nth-child(3){--z:13px}
.qitem:hover{transform:translateZ(80px)}
.qitem.gone{opacity:0;transform:translate3d(60px,0,60px)}
.qitem .tno{font-family:var(--disp);font-weight:800;font-size:.82rem;background:#fff;box-shadow:0 0 0 1px var(--line);border-radius:10px;padding:10px;min-width:52px;text-align:center}
.qmeta b{display:block;font-family:var(--disp);font-weight:700;font-size:.97rem;letter-spacing:-.015em}.qmeta small{color:var(--fg-3);font-size:.78rem}
.qbtn{font-weight:700;font-size:.72rem;letter-spacing:.08em;padding:10px 14px;border-radius:var(--pill);border:0;transition:transform var(--t-fast),background var(--t)}
.qbtn:active{transform:scale(.95)}
.qbtn.accept{background:var(--blue-fill);color:#fff}
.qbtn.done{background:var(--green);color:#fff}
@media (max-width:900px){.staff-grid{grid-template-columns:1fr}.queue{transform:rotateX(8deg) rotateY(-8deg)}}

/* ── management board: a slab that lies down flat as you reach it ────────── */
.slab-stage{perspective:1700px;perspective-origin:50% 0}
.slab{transform-origin:50% 0;border-radius:var(--r-4);padding:14px;background:#fff;box-shadow:0 0 0 1px rgba(52,89,199,.12),0 2px 6px rgba(18,21,29,.04),0 80px 140px -70px rgba(52,89,199,.7);transform:rotateX(34deg) scale(.9);opacity:.5;transition:transform 1.4s var(--ease),opacity 1.4s var(--ease)}
.slab.in{transform:none;opacity:1}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .slab,.slab.in{transition:none;animation:slabIn linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    @keyframes slabIn{from{transform:rotateX(38deg) scale(.86);opacity:.35}to{transform:none;opacity:1}}
  }
}
.slab-bar{display:flex;align-items:center;gap:7px;padding:4px 8px 14px}
.slab-bar i{width:9px;height:9px;border-radius:50%;background:rgba(18,21,29,.14);display:block}
.slab-bar span{margin-left:10px;font-size:.78rem;color:var(--fg-3)}
.slab-bar em{margin-left:auto;font-style:normal;font-size:.74rem;font-weight:600;color:var(--fg-3);padding:3px 10px;border-radius:var(--pill);box-shadow:inset 0 0 0 1px var(--line-2)}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:10px}
.kpi,.panel{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-2)}
.kpi{padding:18px 18px 16px}
.kpi .kl{font-size:.8rem;font-weight:600;color:var(--fg-3)}
.kpi .kv{font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.3rem);letter-spacing:-.045em;margin-top:8px;font-variant-numeric:tabular-nums;color:var(--fg)}
.kpi .kd{font-size:.78rem;font-weight:600;color:var(--green);margin-top:6px}
.board{display:grid;grid-template-columns:1.2fr .8fr;gap:10px}
.panel{padding:var(--s-4)}
.panel h4{margin-bottom:2px}
.psub{font-size:.86rem;color:var(--fg-3);margin-bottom:18px}
.bars{display:flex;align-items:flex-end;gap:6px;height:160px}
.bar{flex:1;background:rgba(75,115,201,.2);border-radius:6px 6px 2px 2px;height:var(--h);transform:scaleY(0);transform-origin:50% 100%;transition:transform 1.1s var(--ease);transition-delay:calc(var(--n,0)*45ms)}
.bars.in .bar{transform:none}
.bar.peak{background:linear-gradient(180deg,#7b98dd,#4b73c9)}
.bx{display:flex;justify-content:space-between;margin-top:8px;font-size:.74rem;color:var(--fg-3)}
.types{list-style:none;display:grid;gap:16px}
.types li{display:grid;grid-template-columns:110px 1fr 44px;align-items:center;gap:10px;font-size:.9rem;color:var(--fg-2)}
.types .track{height:6px;display:block}
.types .fill{display:block;height:100%;width:var(--w);border-radius:3px;background:linear-gradient(90deg,#7b98dd,#4b73c9)}
.types .fill.alt{opacity:.55}
.types .pct{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg)}
@media (max-width:1000px){.kpis{grid-template-columns:repeat(3,1fr)}.board{grid-template-columns:1fr}}
@media (max-width:600px){.kpis{grid-template-columns:1fr 1fr}.kpi:last-child{grid-column:span 2}}

/* ── intel: no boxes, a ruled grid ───────────────────────────────────────── */
.intel{overflow:clip}
.intel::before{content:"";position:absolute;inset:auto -10% -50% auto;width:56vw;height:56vw;border-radius:50%;background:radial-gradient(circle,rgba(75,115,201,.16),transparent 62%);pointer-events:none}
.intel-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.icard{border-radius:var(--r-3);padding:var(--s-5);background:#fff;box-shadow:var(--ring),var(--edge);transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.icard:hover{transform:translateY(-5px);box-shadow:var(--ring),0 1px 2px rgba(18,21,29,.04),0 34px 60px -30px rgba(52,89,199,.5)}
.icard{position:relative;overflow:hidden}
.icard::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#7b98dd,#4b73c9);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-slow) var(--ease)}
.icard:hover::after{transform:scaleX(1)}
.icard .ii{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--blue);background:#e4ecfb;margin-bottom:20px;font-size:1.2rem;transition:transform var(--t-slow) var(--ease),background var(--t),color var(--t)}
.icard:hover .ii{background:var(--blue-fill);color:#fff}
.icard:hover .ii{transform:translateY(-3px) rotate(-6deg)}
.icard h4{margin-bottom:8px;font-size:1.2rem}
.icard p{color:var(--fg-2);font-size:.97rem;max-width:32ch}
@media (max-width:900px){.intel-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.intel-grid{grid-template-columns:1fr}}

/* ── solutions tabs ──────────────────────────────────────────────────────── */
.vtabs{display:inline-flex;flex-wrap:wrap;gap:4px;margin-bottom:var(--s-5);padding:5px;border-radius:var(--r-4);background:var(--bg-3)}
.vtab{font-family:var(--sans);font-weight:600;font-size:.92rem;padding:.65em 1.2em;border-radius:var(--pill);border:0;background:transparent;color:var(--fg-2);transition:background var(--t-fast),color var(--t-fast)}
.vtab:hover{color:var(--fg)}
.vtab.on{background:var(--ink);color:#fff;box-shadow:0 10px 20px -12px rgba(18,21,29,.6)}
.vpanel{display:none;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:center;border-radius:var(--r-4);padding:clamp(1.5rem,4vw,3.5rem);background:radial-gradient(70% 120% at 100% 0,rgba(75,115,201,.16),transparent 60%),#fff;box-shadow:var(--ring),var(--edge)}
.vpanel.on{display:grid;animation:rise .6s var(--ease) both}
.vpanel h3{margin:0 0 14px;font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.04em}
.vpanel p{color:var(--fg-2)}
.vname{display:block;font-size:.9rem;font-weight:600;color:var(--blue);margin-bottom:12px}
.vfeat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vfeat>span{display:inline-flex;align-items:center;gap:10px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-2);padding:14px;font-weight:600;font-size:.9rem;color:var(--fg)}
.vfeat .vk{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#e4ecfb;color:var(--blue)}
@media (max-width:900px){.vpanel{grid-template-columns:1fr}}
@media (max-width:480px){.vfeat{grid-template-columns:1fr}}

/* ── qr card: a real card you can turn ───────────────────────────────────── */
.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
.qr-grid h2{margin:0 0 18px}
.qr-stage{position:relative;display:grid;place-items:center;min-height:520px;perspective:1300px}
.qr-stage::before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(75,115,201,.28),transparent 66%);pointer-events:none}
.qr-rig{position:relative;transform-style:preserve-3d;transform:rotateX(calc(12deg + var(--py,0)*-12deg)) rotateY(calc(-20deg + var(--px,0)*18deg))}
.qr-render{position:relative;width:min(280px,76vw);background:linear-gradient(160deg,#fff,#e4ecfb);border-radius:28px;padding:26px 22px;text-align:center;transform-style:preserve-3d;box-shadow:inset 0 0 0 3px var(--blue-app)}
.qr-render .ext{background:linear-gradient(90deg,#9db4e6,#4b73c9 50%,#c4d3f2)}
.qr-render .ext.last{background:#33539c;box-shadow:0 60px 90px -28px rgba(38,58,110,.6)}
.qr-render::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;transform:translateZ(1px);background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 48%,rgba(160,190,255,.35) 54%,transparent 70%);background-size:260% 100%;background-position:calc(50% + var(--px,0)*-60%) 0;mix-blend-mode:soft-light}
.qr-render .qh{font-family:var(--disp);font-weight:800;letter-spacing:.14em;font-size:.72rem;color:#5c6572;margin-bottom:16px}
.qbig{border-radius:14px;background:#fff;border:1px solid #e1e6ef;padding:12px}
.qrsvg{width:100%;height:auto;display:block}
.qtb{font-family:var(--disp);font-weight:800;font-size:1.35rem;margin-top:16px;color:#0f1216;letter-spacing:-.03em}
.qr-tag{position:absolute;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:var(--pill);padding:9px 15px;font-size:.84rem;font-weight:600;box-shadow:0 24px 40px -18px rgba(38,58,110,.5);color:var(--fg)}
.qr-tag .ico{color:var(--green);width:14px;height:14px;stroke-width:3}
.qr-tag.t1{left:-18%;top:8%;transform:translateZ(110px)}.qr-tag.t2{right:-34%;top:40%;transform:translateZ(160px)}.qr-tag.t3{left:-12%;bottom:8%;transform:translateZ(70px)}
@media (max-width:900px){.qr-grid{grid-template-columns:1fr}.qr-stage{min-height:460px}.qr-tag.t1{left:-10%}.qr-tag.t2{right:-12%}.qr-tag.t3{left:-6%}}
@media (max-width:520px){.qr-tag{display:none}}

/* ── statement: the sentence arrives a word at a time ────────────────────── */
.statement{text-align:center;overflow:clip}
.statement .big{font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.05em;max-width:17ch;margin:0 auto var(--s-6);color:var(--fg)}
.statement .big em{font-style:normal;color:var(--blue)}
.statement .big .w{display:inline-block}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .statement .big .w{animation:word linear both;animation-timeline:view();animation-range:entry calc(40% + var(--i)*5%) entry calc(90% + var(--i)*5%)}
    @keyframes word{from{opacity:.12;transform:translate3d(0,.2em,0)}to{opacity:1;transform:none}}
  }
}

/* ── why: the same moment, two ways ──────────────────────────────────────── */
.why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:14px;align-items:stretch}
.wcol{border-radius:var(--r-4);padding:var(--s-6)}
.wcol h3{margin-bottom:24px;font-size:1.15rem}
.wcol ul{list-style:none;display:grid;gap:14px}
.wcol li{display:flex;gap:14px;align-items:center;font-weight:500}
.wcol .mk{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.wcol.old{background:#fff;box-shadow:var(--ring),var(--edge)}
.wcol.old h3{color:var(--fg-3)}.wcol.old li{color:var(--fg-3)}
.wcol.old .mk{box-shadow:inset 0 0 0 1px var(--line-2)}.wcol.old .mk::after{content:"";width:8px;height:2px;border-radius:2px;background:var(--fg-3)}
.wcol.new{position:relative;overflow:hidden;background:linear-gradient(160deg,#6288dc,#4268c6 55%,#3459c7);box-shadow:0 0 0 1px rgba(52,89,199,.2),0 40px 80px -40px rgba(52,89,199,.7);font-size:1.12rem}
.wcol.new h3{color:rgba(255,255,255,.82)}.wcol.new li{color:#fff}.wcol.new .mk{background:#fff;color:#3459c7}
@media (max-width:760px){.why-grid{grid-template-columns:1fr}}

/* ── owners: a sticky heading, a ruled list ──────────────────────────────── */
.own-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-8);align-items:start}
.own-wrap .head{position:sticky;top:110px;margin-bottom:0}
.own-grid{display:grid;border-top:1px solid var(--line-2)}
.own{display:grid;grid-template-columns:44px 1fr;column-gap:var(--s-4);align-items:start;padding:var(--s-4) 0;border-bottom:1px solid var(--line);transition:padding-left var(--t-slow) var(--ease)}
.own:hover{padding-left:10px}
.own .oi{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#e4ecfb;color:var(--blue);grid-row:span 2;font-size:1.15rem}
.own h4{margin-bottom:4px;font-size:1.2rem}
.own p{font-size:.97rem;color:var(--fg-2)}
@media (max-width:900px){.own-wrap{grid-template-columns:1fr;gap:var(--s-6)}.own-wrap .head{position:static}}

/* ── about ───────────────────────────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-8);align-items:center}
.about-grid h2{margin:0 0 20px}
.mission{position:relative;overflow:hidden;border-radius:var(--r-4);padding:var(--s-6);background:linear-gradient(160deg,#6288dc,#4268c6 55%,#3459c7);box-shadow:0 0 0 1px rgba(52,89,199,.2),0 40px 80px -40px rgba(52,89,199,.7)}
.mission::after{content:"";position:absolute;width:340px;height:340px;right:-130px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.3),transparent 65%)}
.mission .mt{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.04em;line-height:1.05;margin:0 0 18px;position:relative;color:#fff}
.mission p{color:rgba(255,255,255,.9);position:relative}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}

/* ── get started ─────────────────────────────────────────────────────────── */
.cta-band{overflow:clip;background:var(--bg-2);border-block:1px solid var(--line)}
.cta-band::before{content:"";position:absolute;inset:-30% auto auto -12%;width:56vw;height:56vw;border-radius:50%;background:radial-gradient(circle,rgba(75,115,201,.18),transparent 62%);pointer-events:none}
.cta-band h2{margin:18px 0}
.form-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-8);align-items:start;position:relative}
.form-card{border-radius:var(--r-4);padding:var(--s-6);background:#fff;box-shadow:0 0 0 1px rgba(52,89,199,.12),0 2px 6px rgba(18,21,29,.04),0 60px 110px -60px rgba(52,89,199,.7)}
.fprog{display:flex;align-items:center;gap:14px;margin-bottom:var(--s-5)}
.fprog .cnt{font-size:.78rem;font-weight:600;color:var(--fg-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.fprog .track{flex:1;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden}
.fprog .fillp{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--blue-fill),var(--blue));border-radius:3px;transition:width var(--t-slow) var(--ease)}
.fstep{display:none}.fstep.on{display:block;animation:rise .5s var(--ease) both}
.fstep h4{font-size:1.4rem;margin-bottom:var(--s-4);letter-spacing:-.03em}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.field label{font-size:.84rem;font-weight:600;color:var(--fg-2)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:.98rem;padding:.85em .95em;border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--bg);color:var(--fg);transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);width:100%;min-height:46px}
.field input::placeholder,.field textarea::placeholder{color:#687285}
.field select option{background:#fff;color:var(--fg)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--blue-fill);box-shadow:0 0 0 4px rgba(75,115,201,.18)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:var(--s-4)}
.chk{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--r-1);font-weight:500;cursor:pointer;background:var(--bg);color:var(--fg);transition:border-color var(--t-fast),background var(--t-fast)}
.chk.on{border-color:var(--blue-fill);background:#e9effb}
.chk input{width:18px;height:18px;accent-color:var(--blue-fill)}
.fnav{display:flex;justify-content:flex-end;gap:10px;margin-top:var(--s-3)}
.fsuccess{display:none;text-align:center;padding:var(--s-6) 0}
.fsuccess.on{display:block;animation:rise .6s var(--ease) both}
.tick{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#e4f4ec;color:var(--green)}
.tick svg{width:28px;height:28px}
.fsuccess .tick{margin:0 auto 18px}
.fsuccess h4{font-size:1.5rem;margin-bottom:12px}
.fsuccess p{color:var(--fg-2);max-width:40ch;margin-inline:auto}
.cta-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-5)}
.cta-pills span{font-size:.84rem;font-weight:600;padding:8px 14px;border-radius:var(--pill);border:1px solid var(--line);background:#fff;color:var(--fg-2)}
@media (max-width:900px){.form-wrap{grid-template-columns:1fr}}
@media (max-width:520px){.frow,.checks{grid-template-columns:1fr}.form-card{padding:var(--s-4)}}

/* ── faq / final / footer ────────────────────────────────────────────────── */
.faq-wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:var(--s-8);align-items:start}
.faq-wrap .head{position:sticky;top:110px;margin:0}
.faq{border-top:1px solid var(--line-2)}
details.qa{border-bottom:1px solid var(--line)}
details.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 2px;font-family:var(--disp);font-weight:700;font-size:1.15rem;letter-spacing:-.025em;color:var(--fg);transition:color var(--t-fast)}
details.qa summary:hover{color:var(--blue)}
details.qa summary::-webkit-details-marker{display:none}
details.qa .pm{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;flex:none;position:relative;transition:transform var(--t) var(--ease),background var(--t)}
details.qa .pm::before,details.qa .pm::after{content:"";position:absolute;background:var(--fg);border-radius:1px}
details.qa .pm::before{width:12px;height:2px}details.qa .pm::after{width:2px;height:12px;transition:transform var(--t)}
details[open].qa .pm{background:var(--blue-fill);box-shadow:none;transform:rotate(180deg)}details[open].qa .pm::before{background:#fff}details[open].qa .pm::after{transform:scaleY(0)}
details.qa .ans{padding:0 2px 24px;color:var(--fg-2);max-width:62ch}
details[open].qa .ans{animation:rise .5s var(--ease) both}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr;gap:var(--s-6)}.faq-wrap .head{position:static}}
.final{text-align:center;overflow:clip;isolation:isolate;padding-block:clamp(7rem,16vw,13rem)}
.final{--grid:rgba(75,115,201,.34)}
.final::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(50% 70% at 50% 100%,rgba(75,115,201,.34),transparent 70%),linear-gradient(180deg,var(--bg),#e9effb)}
.final h2{font-size:clamp(2.4rem,6vw,5rem);letter-spacing:-.055em;position:relative}
.final .sub{font-family:var(--disp);font-weight:600;color:var(--blue);font-size:clamp(1.15rem,2.2vw,1.6rem);letter-spacing:-.03em;margin-top:16px;position:relative}
.fbtns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:var(--s-7);position:relative}
footer{background:var(--bg);border-top:1px solid var(--line);padding:var(--s-8) 0 var(--s-5)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s-6)}
.foot-brand p{color:var(--fg-3);margin-top:14px;font-size:.95rem}
.fcol h5{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--fg);margin-bottom:14px}
.fcol a{display:block;padding:5px 0;color:var(--fg-3);font-size:.95rem;transition:color var(--t-fast)}
.fcol a:hover{color:var(--fg)}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--line);font-size:.84rem;color:var(--fg-3)}
.foot-bottom .legal{display:inline-flex;gap:var(--s-4)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ── demo fab + modal ────────────────────────────────────────────────────── */
.try-fab{position:fixed;right:22px;bottom:22px;z-index:70;background:var(--ink);color:#fff;border:0;border-radius:var(--pill);padding:.85em 1.3em;font-family:var(--sans);font-weight:600;font-size:.92rem;box-shadow:0 20px 44px -18px rgba(18,21,29,.7);display:flex;align-items:center;gap:9px;transition:transform var(--t-fast),background var(--t)}
.try-fab:hover{transform:translateY(-2px);background:#232836}
.try-fab .ico{color:#9db8ff}
.modal{position:fixed;inset:0;z-index:80;background:rgba(18,21,29,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;place-items:center;padding:var(--s-4)}
.modal.open{display:grid}
.modal.open .modal-card{animation:pop .5s var(--ease) both}
@keyframes pop{from{opacity:0;transform:perspective(900px) rotateX(14deg) translate3d(0,30px,0) scale(.94)}}
.modal-card{width:min(360px,100%);background:#faf9f6;border-radius:var(--r-4);padding:var(--s-5);position:relative;box-shadow:0 60px 120px -30px rgba(18,21,29,.6)}
.mclose{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid #dbd8d0;background:#fff;color:#171b21;display:grid;place-items:center}
.mtop{display:flex;align-items:center;gap:10px}
.scr-mark{width:34px;height:34px;border-radius:10px;overflow:hidden;background:#0f1216;flex:none}.scr-mark img{width:100%;height:100%;object-fit:cover}
.modal-card .mv{font-family:var(--disp);font-weight:700;color:#0f1216}.modal-card .msub{font-size:.8rem;color:#5c6572}
.modal-card h4{font-size:1.15rem;margin:16px 0 12px;color:#0f1216;letter-spacing:-.02em}
.modal-card .btn-lite{background:#fff;color:#0f1216;border-color:#dbd8d0;box-shadow:none}
.mopt{cursor:pointer;transition:border-color var(--t-fast),transform var(--t-fast)}
.mopt:hover{border-color:var(--blue-app)!important;transform:translateY(-1px)}
.mresult{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:var(--s-4) 0}

/* ── phone mock-ups: mirrors the real patron page (src/App.css), so they stay light ── */
.app{position:absolute;inset:0;padding:40px 10px 12px;background:radial-gradient(circle at top,rgba(75,115,201,.07),transparent 30%),linear-gradient(180deg,#f5f6f8,#eef2f7);font-family:var(--sans);color:#1a1d24;overflow:hidden;display:block}
.scr.app{padding-top:54px}
.app>.app-card{min-height:100%;display:flex;flex-direction:column}
.app>.app-card .app-specials-link{margin-top:auto}
.app-free{margin-top:4px;padding-top:10px;border-top:1px solid #eef1f5}
.app-free b{display:block;font-size:11px;font-weight:700;margin-bottom:6px;color:#1a1d24}
.app-free span{display:block;padding:10px 11px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;font-size:10px;color:#9aa2ad}
.app-status>.app-brand+*{margin-top:auto}
.app-status>.app-primary{margin-top:auto}
.app-status .app-feedback{margin-top:10px}
.app-card{background:#fff;border:1px solid rgba(75,115,201,.18);border-radius:20px;padding:14px;box-shadow:0 8px 40px rgba(0,0,0,.08)}
.app-brand{display:flex;align-items:center;gap:9px;margin-bottom:14px;text-align:left}
.app-logo{width:32px;height:32px;border-radius:10px;overflow:hidden;background:#17191c;flex:none;box-shadow:0 6px 18px -8px rgba(23,25,28,.4)}.app-logo img{width:100%;height:100%;object-fit:cover;display:block}
.app-brand b{display:block;font-family:'Satisfy',var(--disp);font-weight:400;font-size:23px;letter-spacing:0;line-height:1.05;font-synthesis:none;color:#1a1d24}
.app-brand small{display:block;font-size:9.5px;color:#7a828e;margin-top:2px}
.app-venue{background:rgba(75,115,201,.05);border:1px solid rgba(75,115,201,.14);border-radius:14px;padding:10px 12px;margin-bottom:12px;text-align:center}
.app-venue b{display:block;font-family:var(--disp);font-size:15px;font-weight:800;color:#1a1d24;letter-spacing:-.01em}
.app-table{display:inline-flex;margin-top:6px;padding:4px 11px;border-radius:999px;background:#fff;color:#17191c;font-weight:700;font-size:9.5px;border:1px solid #e2e8f0;box-shadow:0 2px 8px -3px rgba(23,25,28,.18)}
.app-title{font-weight:700;font-size:11.5px;margin-bottom:2px;color:#1a1d24}
.app-hint{font-size:9.5px;color:#7a828e;font-weight:500;margin-bottom:9px}
.rq{position:relative;display:flex;align-items:center;gap:9px;width:100%;min-height:46px;padding:7px 26px 7px 8px;border:1px solid #e7ebf1;border-radius:12px;background:#fff;margin-bottom:8px;box-shadow:0 4px 16px -6px rgba(23,25,28,.12);text-align:left;color:#1a1d24;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.rq::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;border-right:2px solid #4b73c9;border-bottom:2px solid #4b73c9;transform:translateY(-50%) rotate(-45deg)}
.rq .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#eaf0fb;color:#4b73c9;flex:none}
.pi{width:17px;height:17px;fill:currentColor;stroke:none;flex:none}
.rq b{display:block;font-size:11px;font-weight:700;line-height:1.2;color:#1a1d24}.rq small{display:block;font-size:8.5px;color:#7a828e;font-weight:500;line-height:1.25;margin-top:1px}
.rq.selected,.tap .rq-waiter{border-color:#4b73c9;background:#eaf0fb;box-shadow:0 4px 16px rgba(75,115,201,.18)}.rq.selected .ic,.tap .rq-waiter .ic{background:#fff}
.app-specials-link{display:flex;justify-content:center;width:fit-content;margin:8px auto 0;padding:7px 16px;border-radius:999px;background:#4b73c9;color:#fff;font-weight:700;font-size:9.5px}
.app-overlay{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;transition:opacity var(--t) var(--ease)}
.app-overlay.wait{opacity:0}.tap .app-overlay.wait{opacity:1}
.app-confirm{position:relative;width:100%;background:#fff;border:1.5px solid rgba(75,115,201,.4);border-radius:18px;padding:30px 16px 18px;display:flex;flex-direction:column;align-items:center;gap:9px;box-shadow:0 0 50px rgba(75,115,201,.1),0 24px 50px rgba(0,0,0,.12)}
.app-confirm .x{position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.1);color:#dc2626;font-size:9px;font-weight:700;display:grid;place-items:center}
.app-eyebrow{font-size:7.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4b73c9}
.app-selection{font-family:var(--disp);font-size:18px;font-weight:800;color:#1a1d24;letter-spacing:-.3px;text-align:center;line-height:1.2}
.app-divider{width:100%;height:1px;background:rgba(75,115,201,.14)}
.app-primary{display:block;width:100%;border-radius:12px;padding:10px;color:#fff;background:linear-gradient(135deg,#23262d,#17191c);font-weight:800;font-size:11.5px;text-align:center;box-shadow:0 8px 22px rgba(75,115,201,.32)}
.app-status{text-align:center}
.app-status h5{font-family:var(--disp);font-size:18px;font-weight:800;margin:0 0 6px;color:#1a1d24;letter-spacing:-.01em;line-height:1.15}
.app-muted{font-size:11px;color:#7a828e;line-height:1.5;margin-bottom:12px}
.app-pending{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px auto 14px}
.app-spinner{width:18px;height:18px;border-radius:50%;border:2px dotted #4b73c9;animation:prontoSpin 2.4s linear infinite;flex:none}
@keyframes prontoSpin{to{transform:rotate(360deg)}}
.app-pending span:last-child{font-size:10.5px;font-weight:700;color:#3a5ea8;letter-spacing:.02em}
.app-success{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:rgba(22,163,74,.1);color:#166534;font-size:26px;border:1px solid rgba(22,163,74,.25)}
.app-feedback{margin-top:12px;padding:12px;border-radius:12px;background:#f5f6f8;border:1px solid rgba(0,0,0,.08);text-align:center}
.app-feedback h6{margin:0 0 3px;font-size:11px;font-weight:700;color:#1a1d24;font-family:var(--sans)}.app-feedback p{margin:0 0 9px;font-size:9px;color:#7a828e}
.app-fb-row{display:flex;gap:6px}.app-fb{flex:1;padding:8px 6px;border-radius:9px;border:1px solid rgba(0,0,0,.1);background:#eef2f7;color:#334155;font-size:9.5px;font-weight:600;text-align:center}
.app-fb.pos{background:rgba(75,115,201,.07);border-color:rgba(75,115,201,.2);color:#345691}
.app-popup{background:#fff;border:1px solid rgba(75,115,201,.2);border-radius:20px;padding:14px;box-shadow:0 16px 60px rgba(0,0,0,.18);text-align:left}
.app-label{color:#7a828e;font-size:8.5px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:3px}
.app-popup h5{font-family:var(--disp);font-size:17px;font-weight:800;margin:0 0 10px;color:#1a1d24}
.app-special{border-radius:14px;background:#f5f6f8;border:1px solid rgba(0,0,0,.07);padding:9px;display:flex;flex-direction:column;gap:7px;margin-bottom:8px}
.app-special .row{display:flex;gap:8px;align-items:flex-start}.app-special img{width:50px;height:50px;border-radius:9px;object-fit:cover;flex:none}
.app-special b{display:block;font-size:12px;font-weight:700;line-height:1.25;color:#1a1d24}.app-special small{display:block;font-size:9px;color:#7a828e;margin-top:2px;line-height:1.35}
.app-special .go{align-self:flex-start;padding:5px 12px;border-radius:999px;background:#17191c;color:#fff;font-weight:700;font-size:9px}
.modal-card .mopts,.modal-card .mresult{zoom:1.3}
.modal-card .mresult{display:block!important;text-align:center}
.modal-card .mresult .btn{zoom:.77;margin-top:10px}
.mopt{padding:0;margin:0;background:none;border:0}
.modal-card .mopt.rq{padding:7px 26px 7px 8px;margin-bottom:8px;background:#fff;border:1px solid #e7ebf1}

/* ── reveal ──────────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.in>.stag,.stag-host.in>*{animation:rise .8s var(--ease) both;animation-delay:calc(var(--n,0)*70ms)}
@media (prefers-reduced-transparency:reduce){
  .nav.scrolled .nav-in{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.prob-list li{opacity:1;transform:none}
  .slab{transform:none;opacity:1}
  .bar{transform:none}
  .caption p{grid-template-rows:1fr;margin-top:6px}
  .notif{opacity:1;transform:translate3d(0,0,170px)}
  .od-ticket{opacity:1;transform:translate3d(0,0,150px)}
}