/* ═══════════════════════════════════════════════════════════════════════
   MENEW — SHARED SITE CHROME
   Loaded by every marketing page (home, guests, waiters, reception,
   restaurant, faq, contact). Design tokens, header/nav, mobile menu,
   buttons, footer, reveal-on-scroll, language toggle, floating contact
   bubble, role-switcher, chilli cursor. Page-specific content (hero copy,
   phone mockups, charts, feature grids) stays in each page's own <style>.
   ═══════════════════════════════════════════════════════════════════════ */

/* ===================== TOKENS ===================== */
:root{
  --bg:#112140;
  --bg-2:#16294a;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.08);
  --cream:#EEF2F9;
  --muted:#A4B5D0;
  --muted-dim:#7488AB;
  --gold:#F0AE43;
  --gold-2:#F8CC72;
  --terra:#E0654A;
  --herb:#84BF8E;
  --blue:#568ED6;
  --line:rgba(238,242,249,.11);
  --line-2:rgba(238,242,249,.20);
  --shadow:0 30px 80px -22px rgba(4,10,26,.75);
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:#112140}
body{
  background:linear-gradient(165deg,#112140 0%,#16294a 45%,#193151 100%) fixed;
  min-height:100vh;
  color:var(--cream);
  font-family:'Hanken Grotesk',sans-serif;
  font-size:17px;line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:#1a1109}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:600;line-height:1.04;letter-spacing:-.01em}
.serif{font-family:'Fraunces',serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.gold{color:var(--gold)}
.terra{color:var(--terra)}
section{position:relative;z-index:2}
/* ---- all section top/bottom padding (desktop) — edit here */ .pad{padding:70px 0}
/* ── First-section clearance ────────────────────────────────────────────────
   `.section` was used on two pages and defined in no stylesheet, so it applied
   no padding at all — and on the pricing page that put the "PRICING" eyebrow
   and the headline underneath the fixed header, cut in half. It had been that
   way since the page shipped.

   Every other page opens with `.hero`, which carries its own top spacing, so
   nothing else was affected and nothing flagged it: the markup was valid, the
   CSS parsed, and the only symptom was a heading you could not read. */
.section{padding:132px 0 70px}
@media(max-width:640px){.section{padding:104px 0 56px}}
@media(max-width:640px){ body{font-size:16px} .wrap{padding:0 18px} .pad{padding:50px 0} }

/* grain + ambient glow (behind every page) */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow{position:fixed;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0;opacity:.5}
.glow.g1{width:600px;height:600px;background:radial-gradient(circle,rgba(233,165,60,.30),transparent 70%);top:-180px;right:-120px}
.glow.g2{width:540px;height:540px;background:radial-gradient(circle,rgba(86,142,214,.30),transparent 70%);top:680px;left:-180px}

/* ===================== HERO ===================== */
.hero{padding:190px 0 90px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold);border:1px solid var(--line-2);padding:8px 16px;border-radius:50px;background:rgba(233,165,60,.06);margin-bottom:30px}
.eyebrow .live{width:7px;height:7px;border-radius:50%;background:var(--herb);box-shadow:0 0 0 0 rgba(132,168,95,.7);animation:beat 1.8s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(132,168,95,.6)}70%{box-shadow:0 0 0 8px rgba(132,168,95,0)}100%{box-shadow:0 0 0 0 rgba(132,168,95,0)}}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.1rem);font-weight:600;max-width:15ch;margin:0 auto}
.hero h1 .tw-line{display:block;color:var(--gold);font-style:italic;font-weight:500;height:2.3em;overflow:hidden}
.cursor-bar{display:inline-block;width:3px;height:.86em;background:var(--gold);margin-left:4px;vertical-align:-.05em;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.hero p.lead{font-size:1.22rem;color:var(--muted);max-width:54ch;margin:30px auto 0;line-height:1.65}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.hero-note{margin-top:22px;font-size:.9rem;color:var(--muted-dim);display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.hero-note span{display:inline-flex;align-items:center;gap:7px}
.hero-note svg{width:15px;height:15px;color:var(--herb)}
@media(max-width:640px){ .hero{padding:140px 0 52px} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{width:100%;justify-content:center} }


/* floating food chips in hero (opt-in: pages that want them add #floaters + the small JS snippet) */
.floaters{position:absolute;inset:0;pointer-events:none;z-index:1}
.floaters .chip{position:absolute;font-size:2.2rem;opacity:.0;animation:floatIn 1s var(--ease) forwards,bob 6s ease-in-out infinite}
@keyframes floatIn{to{opacity:.9}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-18px) rotate(var(--r,0deg))}}
@media(max-width:640px){.floaters{display:none}}

/* ===================== STATS STRIP ===================== */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:46px 0;margin-top:40px;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-family:'Fraunces',serif;font-size:clamp(2rem,4vw,2.9rem);font-weight:600;color:var(--cream);line-height:1}
.stat .num em{font-style:normal;color:var(--gold)}
.stat .lbl{font-size:.86rem;color:var(--muted);margin-top:10px;letter-spacing:.02em}
@media(max-width:640px){.stats-grid{grid-template-columns:1fr 1fr}}

/* ===================== SECTION HEADERS ===================== */
.sec-head{text-align:center;max-width:62ch;margin:0 auto 60px}
.sec-tag{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:16px}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.3rem)}
.sec-head p{color:var(--muted);margin-top:18px;font-size:1.1rem}

/* ===================== REVEAL ON SCROLL ===================== */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ===================== HEADER / NAV ===================== */
header{position:fixed;top:18px;left:0;right:0;z-index:1000;display:flex;justify-content:center;transition:top .4s var(--ease)}
.nav{
  width:min(var(--maxw),calc(100% - 36px));
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:8px 20px 8px 20px;border-radius:100px;overflow:visible;
  background:rgba(18,32,58,.55);
  border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:all .45s var(--ease);
}
/* Scrolled state: the bar was only changing colour, which read as nothing
   happening. It now also tightens — less padding, a smaller logo, closer to
   the top edge — so the page feels like it has moved under a fixed object
   rather than merely tinting it. All of it rides the .nav `transition:all`
   already declared above, so there is no new timing to keep in sync. */
header.scrolled{top:10px}
header.scrolled .nav{
  background:rgba(14,25,46,.88);box-shadow:0 16px 40px -18px rgba(0,0,0,.6);
  border-color:var(--line-2);padding:4px 16px;
}
header.scrolled .brand-logo-img{height:44px}
/* The CTA keeps its size when the header condenses: shrinking it took it to
   31px against the language toggle's fixed 36px, which is the misalignment
   this was meant to fix. The bar tightens through its own padding and the
   logo instead. */
.brand-logo-img{transition:height .45s var(--ease)}

/* The tracking underline — a sauce drop that slides to whatever link the
   pointer is on and settles back on the current page when it leaves. Driven
   from site.js, which writes --ink-x/--ink-w; it stays invisible (scaleX(0))
   until the script measures a target, so a page with no active link or with
   JS disabled shows nothing rather than a stray dot at the origin. */
.nav-links{position:relative}
.nav-ink{
  position:absolute;bottom:1px;left:0;height:2px;
  width:var(--ink-w,0px);transform:translateX(var(--ink-x,0px));
  border-radius:2px;background:var(--gold);
  transition:transform .38s var(--ease),width .38s var(--ease),opacity .3s var(--ease);
  opacity:var(--ink-o,0);pointer-events:none;
}
/* Width, not scaleX: the drop below is a child, so a scaled bar would stretch
   it into a smear at the same factor. */
.nav-ink::after{
  content:"";position:absolute;left:50%;top:-3px;width:5px;height:5px;
  margin-left:-2.5px;border-radius:0 50% 50% 50%;transform:rotate(45deg);
  background:var(--gold);
}
@media(prefers-reduced-motion:reduce){.nav-ink{transition:none}}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;white-space:nowrap;font-family:'Fraunces',serif;font-size:1.34rem;font-weight:600;letter-spacing:.01em;position:relative;z-index:1}
.brand-logo-img{height:56px;width:auto;display:block}
@media(max-width:640px){.brand-logo-img{height:44px}}
.nav-links{display:flex;align-items:center;gap:0;flex:1 1 0;min-width:0}
.nav-links a{font-size:.88rem;font-weight:500;color:var(--muted);padding:8px 11px;border-radius:50px;transition:.25s var(--ease);white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--cream);background:rgba(255,255,255,.06)}
/* Sized to sit with the language toggle beside it, not to shout over it. It
   was inheriting the page's 17px body size and 11px/22px padding, which made
   it 197x49 against the toggle's 67x36 — a 13px height difference that read
   as the header being badly aligned rather than the button being emphatic. */
.nav-cta{display:flex;align-items:center;gap:6px;white-space:nowrap;flex:0 0 auto;flex-shrink:0;background:var(--cream);color:#17100b !important;font-size:.84rem;line-height:1.25;padding:9px 17px !important;border-radius:50px;font-weight:700 !important;transition:.3s var(--ease);box-shadow:0 0 0 2px rgba(238,242,249,.15)}
.nav-cta svg{width:15px;height:15px;flex:0 0 15px}
.nav-cta:hover{background:var(--gold);transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(233,165,60,.7)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px;position:relative;z-index:2}
.burger span{width:22px;height:2px;background:var(--cream);border-radius:2px;transition:.3s}
.lang-switch{display:flex;align-items:center;gap:5px;flex:0 0 auto;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);font-family:'Hanken Grotesk',sans-serif;font-size:.78rem;font-weight:700;padding:9px 13px;border-radius:50px;cursor:pointer;transition:.25s var(--ease);letter-spacing:.02em}
.lang-switch:hover{color:var(--cream);border-color:var(--line-2)}
.lang-switch .ls-sep{opacity:.4}
.lang-switch .ls-en,.lang-switch .ls-ar{transition:.25s var(--ease)}
html[dir="rtl"] .lang-switch .ls-en{opacity:.5}
html:not([dir="rtl"]) .lang-switch .ls-ar{opacity:.5}
.lang-switch-mobile{margin:0 0 18px}
@media(max-width:640px){.lang-switch{padding:8px 11px;font-size:.72rem}}

/* JS adds .nav-collapsed when links don't all fit */
.nav-collapsed .nav-links{display:none !important}
.nav-collapsed .nav-cta{display:none !important}
.nav-collapsed .burger{display:flex !important}
.nav-collapsed{position:relative}
.nav-collapsed .brand{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;z-index:1}
.nav-collapsed .brand-logo-img{height:38px;pointer-events:auto}

.mobile-menu{position:fixed;inset:0;z-index:999;background:rgba(13,22,42,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:0;visibility:hidden;transition:.4s var(--ease)}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a:not(.mobile-menu-cta){font-family:'Fraunces',serif;font-size:1.9rem;color:var(--cream)}
.mobile-menu a[aria-current="page"]{color:var(--gold)}
.mobile-menu-cta{margin-top:32px;font-size:1rem !important;padding:16px 36px !important;width:auto}
.mobile-menu-close{position:absolute;top:28px;right:28px;background:none;border:0;color:var(--cream);font-size:1.6rem;cursor:pointer;line-height:1;padding:8px}

/* ===================== ARABIC / RTL SUPPORT ===================== */
html[dir="rtl"] body{font-family:'Noto Kufi Arabic',sans-serif}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .brand small{font-family:'Noto Kufi Arabic',sans-serif}
html[dir="rtl"] .nav-links{gap:0}

/* ===================== BUTTONS ===================== */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;padding:16px 28px;border-radius:60px;cursor:pointer;border:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease);overflow:hidden;font-family:inherit}
.btn svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1109}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(233,165,60,.75)}
.btn-primary:hover::after{left:130%}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn-wa{background:#25D366;color:#06351a}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(37,211,102,.6)}
.btn-sm{padding:11px 20px;font-size:.86rem}

/* ===================== BACK TO TOP ===================== */
.to-top{
  position:fixed;right:26px;bottom:26px;z-index:900;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1109;
  display:grid;place-items:center;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.85);
  transition:opacity .4s var(--ease),transform .4s var(--ease),box-shadow .3s var(--ease);
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-3px);box-shadow:0 20px 44px -12px rgba(240,174,67,.7)}
.to-top svg{width:22px;height:22px}
@media(max-width:640px){.to-top{right:16px;bottom:16px;width:46px;height:46px}}

/* ===================== FLOATING CONTACT BUBBLE ===================== */
/* A circle at rest, a pill on hover. It was neither before: padding:14px on a
   24px icon gives 52px of height, but the flex `gap:10px` was still counted
   next to the zero-width label, making it 62px wide — a 10px oval that read
   as a not-quite-round button. Size is now explicit rather than emergent, and
   the gap only opens when there is something to sit in it. */
.contact-bubble{
  position:fixed;left:26px;bottom:26px;z-index:900;
  display:flex;align-items:center;justify-content:center;gap:0;
  width:56px;height:56px;padding:0;
  background:#25D366;color:#06351a;border:none;cursor:pointer;
  border-radius:50%;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.55);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             width .35s var(--ease),gap .35s var(--ease),
             padding .35s var(--ease),border-radius .35s var(--ease);
}
.contact-bubble svg{width:24px;height:24px;flex:0 0 24px}
.contact-bubble .cb-label{max-width:0;overflow:hidden;white-space:nowrap;font-weight:700;font-size:.86rem;transition:max-width .35s var(--ease)}
.contact-bubble:hover{
  transform:translateY(-3px);box-shadow:0 20px 44px -12px rgba(37,211,102,.7);
  width:186px;gap:10px;padding:0 18px;border-radius:50px;justify-content:flex-start;
}
.contact-bubble:hover .cb-label{max-width:160px}
/* Touch has no hover, so the pill state is unreachable — stay a clean circle
   and drop the label from the accessibility tree rather than leave it
   permanently clipped to zero width. */
@media(hover:none){
  .contact-bubble .cb-label{display:none}
  .contact-bubble:hover{width:56px;gap:0;padding:0;border-radius:50%;justify-content:center}
}
@media(max-width:640px){.contact-bubble{left:16px;bottom:16px;width:52px;height:52px}}

/* ===================== ROLE SWITCHER ===================== */
/* small pill row so a visitor on one role page can jump straight to another */
.role-switch{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto}
.role-switch a{
  display:flex;align-items:center;gap:7px;font-size:.84rem;font-weight:600;color:var(--muted);
  padding:9px 16px;border-radius:50px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:.3s var(--ease);
}
.role-switch a:hover{color:var(--cream);border-color:var(--line-2)}
.role-switch a[aria-current="page"]{color:#17100b;background:var(--cream);border-color:var(--cream)}
@media(max-width:640px){.role-switch{gap:6px}.role-switch a{padding:8px 13px;font-size:.78rem}}

/* ===================== FEATURE CARDS ===================== */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:dense;gap:20px}
.feat{padding:32px;border-radius:22px;border:1px solid var(--line);background:var(--surface);transition:.45s var(--ease);position:relative;overflow:hidden}
.feat:hover{transform:translateY(-6px);border-color:var(--line-2);background:var(--surface-2);box-shadow:var(--shadow)}
.feat-ic{width:54px;height:54px;border-radius:15px;background:rgba(233,165,60,.1);display:grid;place-items:center;margin-bottom:22px;transition:.4s}
.feat:hover .feat-ic{background:linear-gradient(135deg,var(--gold),var(--terra))}
.feat-ic svg{width:26px;height:26px;color:var(--gold);transition:.4s}
.feat:hover .feat-ic svg{color:#1a1109}
.feat-ic-new{flex:0 0 54px;width:54px;height:54px;border-radius:17px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);display:grid;place-items:center;color:var(--gold);margin-bottom:22px}
.feat-ic-new svg{width:26px;height:26px}
.feat h3{font-size:1.32rem;margin-bottom:10px}
.feat p{color:var(--muted);font-size:.98rem}
.feat.span2{grid-column:span 2;display:flex;align-items:center;gap:30px;background:linear-gradient(120deg,var(--surface-2),var(--surface))}
.feat.span2 .feat-ic,.feat.span2 .feat-ic-new{margin-bottom:0}
@media(max-width:960px){
  .feat-grid{grid-template-columns:1fr 1fr}
  .feat.span2{grid-column:span 2;display:block;text-align:left}
  .feat.span2 .feat-ic,.feat.span2 .feat-ic-new{margin-bottom:22px}
}
@media(max-width:640px){
  .feat-grid{grid-template-columns:1fr}
  .feat.span2{grid-column:span 1;display:block;text-align:left}
}

/* ===================== MINI CHART CARDS ===================== */
.impact-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.impact-cards.mini-charts{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.impact-cards.mini-charts{grid-template-columns:1fr}}
@media(max-width:640px){.impact-cards{grid-template-columns:1fr}}
.chart-card{padding:26px;border-radius:20px;border:1px solid var(--line);background:var(--surface)}
.chart-card .ch-lbl{font-size:.84rem;color:var(--muted);margin-bottom:4px}
.chart-card .ch-val{font-family:'Fraunces',serif;font-size:2rem;font-weight:600}
.chart-card .ch-val .up{font-size:.85rem;color:var(--herb);font-weight:700;font-family:'Hanken Grotesk'}
.bars{display:flex;align-items:flex-end;gap:9px;height:90px;margin-top:18px}
.bars .bar{position:relative;flex:1;border-radius:7px 7px 0 0;height:0;background:rgba(255,255,255,.06);overflow:hidden;transition:height .65s var(--ease)}
.bars .bar i{position:absolute;left:0;bottom:0;width:100%;height:0;border-radius:inherit;background:linear-gradient(180deg,var(--gold),rgba(233,165,60,.32));transition:height .85s var(--ease)}
.bars .bar.alt i{background:linear-gradient(180deg,var(--terra),rgba(224,101,74,.32))}
.bars .bar.flood i{height:100%}
.spark{margin-top:18px}
.spark svg{width:100%;height:80px;overflow:visible}
.spark path.line{fill:none;stroke:var(--herb);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.donut{display:flex;align-items:center;gap:18px;margin-top:18px}
.donut-ring{position:relative;flex-shrink:0;width:92px;height:92px}
.donut svg{width:92px;height:92px;transform:rotate(-90deg);transition:filter .4s var(--ease);flex-shrink:0}
.donut.flood .donut-ring svg,.donut.flood svg{filter:drop-shadow(0 0 8px rgba(233,165,60,.55))}
.donut circle.track{fill:none;stroke:var(--line);stroke-width:11}
.donut circle.val{fill:none;stroke:var(--gold);stroke-width:11;stroke-linecap:round;stroke-dasharray:251.3;stroke-dashoffset:251.3;transition:stroke-dashoffset 1.3s var(--ease)}
.donut-figure{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:1.3rem;font-weight:800;opacity:0;transform:scale(.5);transition:.5s var(--ease) .9s}
.donut.flood .donut-figure{opacity:1;transform:scale(1)}
.donut-note{font-size:.86rem;color:var(--muted);line-height:1.4}

/* ===== condiment FX (ketchup + mustard) — tours each chart-card, pours in its fill ===== */
.cfx{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:visible}
/* One easing for every bottle move, with a touch of overshoot so a bottle
   settles onto its target instead of stopping dead on it. The travel is
   deliberately longer than the old .62s: the tour waits for it before
   squeezing, and at .62s the squeeze began while the bottle was still
   sliding, which is what made the sequence feel jumpy. */
.cfx{--cfx-travel:.92s;--cfx-ease:cubic-bezier(.34,.08,.2,1.04)}
.cfx-bottle{position:absolute;top:0;left:0;width:48px;opacity:0;
  transform:translate(var(--x,40px),var(--y,-60px));
  transition:transform var(--cfx-travel) var(--cfx-ease),opacity .55s var(--ease);
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.4))}
.cfx-bottle.show{opacity:1}
.cfx-bottle .tilt{transform:rotate(var(--tilt));transform-origin:50% 22%}
.cfx-bottle .bsvg{width:100%;height:auto;display:block}
.cfx-bottle.mustard{--tilt:15deg}
.cfx-bottle.ketchup{--tilt:-15deg}
.cfx-bottle.squeeze .tilt{animation:squeeze .9s var(--ease)}
@keyframes squeeze{
  0%,100%{transform:rotate(var(--tilt)) scale(1)}
  28%{transform:rotate(var(--tilt)) scale(1.09,.92)}
  52%{transform:rotate(var(--tilt)) scale(.96,1.05)}
  74%{transform:rotate(var(--tilt)) scale(1.04,.98)}
}
.cfx-drop{position:absolute;left:50%;bottom:2px;margin-left:-5px;width:10px;height:10px;border-radius:0 50% 50% 50%;transform:rotate(45deg) scale(0);opacity:0}
.mustard .cfx-drop{background:linear-gradient(135deg,#F6CC5E,#E0991F)}
.ketchup .cfx-drop{background:linear-gradient(135deg,#E8584A,#C0241C)}
.cfx-bottle.squeeze .cfx-drop{animation:dropFall .8s var(--ease)}
.cfx-bottle.squeeze .cfx-drop:nth-of-type(2){animation-delay:.22s}
.cfx-bottle.squeeze .cfx-drop:nth-of-type(3){animation-delay:.44s}
@keyframes dropFall{
  0%{opacity:0;transform:translateY(0) rotate(45deg) scale(.2)}
  25%{opacity:1;transform:translateY(12px) rotate(45deg) scale(1)}
  100%{opacity:0;transform:translateY(50px) rotate(45deg) scale(.6)}
}
@media(max-width:640px){.cfx-bottle{width:38px}}

/* Olive oil behaves differently from the two squeeze bottles on purpose:
   glass does not deform, so it tips instead of pulsing, and the drops fall
   in a slower, tighter cadence — a drizzle, not a squirt. The bottle is also
   drawn narrower, so it reads as a third object rather than a recoloured
   ketchup. */
.cfx-bottle.olive{--tilt:10deg;width:50px}
.olive .cfx-drop{background:linear-gradient(135deg,#A8C86A,#6E9636);width:7px;height:9px;margin-left:-3.5px}
.cfx-bottle.olive.squeeze .tilt{animation:tipPour 1.25s var(--ease)}
.cfx-bottle.olive.squeeze .cfx-drop{animation:dropFall 1.15s var(--ease)}
.cfx-bottle.olive.squeeze .cfx-drop:nth-of-type(2){animation-delay:.34s}
.cfx-bottle.olive.squeeze .cfx-drop:nth-of-type(3){animation-delay:.68s}
@keyframes tipPour{
  0%,100%{transform:rotate(var(--tilt))}
  38%{transform:rotate(calc(var(--tilt) + 13deg))}
  62%{transform:rotate(calc(var(--tilt) + 10deg))}
}
@media(max-width:640px){.cfx-bottle.olive{width:40px}}

/* ── Lemon: pours the 100% ring ───────────────────────────────────────────
   It squeezes twice rather than pulsing once, because the ring it is filling
   takes 1.3s to draw and a single press was over long before the number
   arrived — the two looked like separate events happening to coincide. Two
   presses inside the same window the engine holds `.squeeze` (1050ms) keep
   the hand and the number moving together, and the drops are staggered across
   both so juice is still falling while the ring closes.
   No tilt: a bottle is held at an angle, a lemon half is pressed flat. */
.cfx-bottle.lemon{--tilt:0deg;width:62px}
.cfx-bottle.lemon .tilt{transform-origin:50% 78%}
.cfx-bottle.lemon.squeeze .tilt{animation:lemonPress 1s var(--ease)}
@keyframes lemonPress{
  0%,100%{transform:scale(1)}
  20%{transform:scale(1.15,.83)}
  42%{transform:scale(.98,1.05)}
  64%{transform:scale(1.1,.88)}
  84%{transform:scale(.99,1.02)}
}
.lemon .cfx-drop{background:linear-gradient(135deg,#FBEFA8,#E9C63F);width:8px;height:10px;margin-left:-4px}
.cfx-bottle.lemon.squeeze .cfx-drop{animation:dropFall .78s var(--ease)}
.cfx-bottle.lemon.squeeze .cfx-drop:nth-of-type(2){animation-delay:.26s}
.cfx-bottle.lemon.squeeze .cfx-drop:nth-of-type(3){animation-delay:.52s}
@media(max-width:640px){.cfx-bottle.lemon{width:50px}}

/* Sauce left on the lip after a bottle pours — see dripUnder() in charts.js.
   Its own layer beneath the bottles so a tongue can hang past the chart's box
   without the bottles ever being clipped by it. Revealed by clip-path so the
   sauce appears to run downward out of the bar rather than fade into place;
   the negative inset lets the tip clear its own viewBox. */
.cfx-drips{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:visible}
.sauce{position:absolute;overflow:visible;pointer-events:none;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.42,0,.4,1)}
.sauce.run{clip-path:inset(0 0 -25% 0)}
@media(prefers-reduced-motion:reduce){.sauce{transition:none}}

.chart-card{position:relative}

/* Currency-merge mini visual — replaces a meaningless "% complete" donut for a
   currency-reconciliation stat: two currency chips slide together into a checkmark. */
/* Two currencies becoming one settled amount. The chips used to fade up and
   stop, which showed the ingredients but never the operation — and the
   operation is the differentiated part: reception takes a payment split across
   USD and LBP and works out the change across both.
   So they now physically converge. The `+` between them fades as they close
   the gap it was holding, then the arrow and the check land. All of it hangs
   off the single `go` class the chart tour already adds, sequenced with
   transition delays rather than another timer to keep in step. */
.cc-merge{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.cc-chip{padding:9px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);font-weight:700;font-size:.84rem;opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cc-merge.go .cc-chip{opacity:1;transform:translateY(0)}
.cc-merge.go .cc-chip.cc-lbp{transition-delay:.1s}
/* the convergence: each chip closes half the gap the `+` occupied */
.cc-merge.go .cc-chip.cc-usd{transition:opacity .5s var(--ease),transform .55s var(--ease) .95s;transform:translateX(22px) scale(.97)}
.cc-merge.go .cc-chip.cc-lbp{transition:opacity .5s var(--ease) .1s,transform .55s var(--ease) .95s;transform:translateX(-22px) scale(.97)}
.cc-plus{color:var(--muted-dim);font-size:1.1rem;opacity:0;transition:opacity .4s var(--ease) .2s}
.cc-merge.go .cc-plus{opacity:1;animation:ccPlusOut .5s var(--ease) .95s forwards}
@keyframes ccPlusOut{to{opacity:0;transform:scale(.6)}}
.cc-arrow{color:var(--muted-dim);font-size:1.1rem;opacity:0;transition:.4s var(--ease) 1.45s}
.cc-merge.go .cc-arrow{opacity:1}
/* Lands last: the chips converge at .95s and the arrow follows at 1.45s, so a
   check at .75s was confirming a settlement that had not happened yet. */
.cc-check{width:32px;height:32px;border-radius:50%;background:var(--herb);color:#0d1a12;display:grid;place-items:center;font-weight:800;flex-shrink:0;opacity:0;transform:scale(.4);transition:.5s var(--ease) 1.65s}
.cc-merge.go .cc-check{opacity:1;transform:scale(1)}

/* Share bars — a small labelled horizontal-bar breakdown (e.g. order-type split).
   Each row is directly labelled so identity is never color-alone. */
.share-bars{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.share-row{display:flex;align-items:center;gap:12px}
.share-label{flex:0 0 118px;font-size:.84rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.share-label i{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.share-track{flex:1;height:10px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.share-fill{display:block;height:100%;width:0;border-radius:6px;transition:width 1.1s var(--ease)}
.share-pct{flex:0 0 42px;text-align:right;font-family:'Fraunces',serif;font-weight:600;color:var(--cream)}
@media(max-width:480px){.share-label{flex-basis:96px;font-size:.78rem}}

/* ===================== MINI CTA BAND ===================== */
.cta-mini{background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);border-radius:32px;padding:56px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
.cta-mini::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(233,165,60,.22),transparent 70%);top:-120px;right:-80px;filter:blur(30px)}
.cta-mini h2{font-size:clamp(1.9rem,4vw,2.6rem);max-width:24ch;margin:0 auto}
.cta-mini p{color:var(--muted);margin:16px auto 30px;font-size:1.06rem;max-width:48ch}
.cta-mini-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){.cta-mini{padding:32px 22px}.cta-mini-actions{flex-direction:column}.cta-mini-actions .btn{width:100%;justify-content:center}}

/* ===================== FOOTER ===================== */
footer{border-top:1px solid var(--line);padding:40px 0 30px;margin-top:10px}
/* Four link columns now, not three — Legal joined Product, Company and Get in
   touch. The template said `1.6fr 1fr 1fr 1fr`, so the fifth child wrapped
   onto a second row and sat alone under the brand blurb, which read as a
   mistake rather than a column.

   The brand's share drops from 1.6 to 1.3 because it only holds a logo and two
   lines of text, and the link columns need a floor: 130px is "Terms of
   Service" on one line, and a legal link that wraps mid-phrase looks careless
   on exactly the pages where care is the point. */
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(4, minmax(130px, 1fr));gap:36px;margin-bottom:40px}
.foot-brand p{color:var(--muted);font-size:.95rem;margin-top:16px;max-width:34ch}
.foot-col h5{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dim);margin-bottom:16px;font-family:'Hanken Grotesk';font-weight:700}
/* The footer link list was 24px tall per row with the gap living in
   margin-bottom, so the tappable box was 24px and the 11px between rows was
   dead space — on a phone that is a miss waiting to happen, and eight of them
   on every marketing page. Padding instead of margin turns the same gap into
   part of the target: 24 + 2x6 = 36px, and the rows look identical. */
.foot-col a{display:block;color:var(--muted);font-size:.95rem;padding:6px 0;transition:.25s}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;color:var(--muted-dim);font-size:.86rem}
/* Five columns need a wider road than four did. Below ~1080px the link
   columns hit their 130px floor and start pushing the page sideways, so the
   brand takes the full width and the four link columns share the row. */
@media(max-width:1080px){
  .foot-grid{grid-template-columns:repeat(4, minmax(120px, 1fr));gap:28px 24px}
  .foot-brand{grid-column:1 / -1}
}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ===================== CUSTOM CHILLI CURSOR (desktop only) ===================== */
#chilli-cursor{ display:none; }
@media (pointer:fine){
  body{ cursor:none !important; }
  a, button, [role="button"], label, select, input, textarea { cursor:none !important; }
  #chilli-cursor{
    display:block;position:fixed;top:0;left:0;pointer-events:none;z-index:99999;
    font-size:1.5rem;line-height:1;transform:translate(-50%,-50%) rotate(-45deg);
    transition:transform .12s cubic-bezier(.22,1,.36,1), opacity .2s;
    will-change:transform;user-select:none;opacity:0;
  }
  #chilli-cursor.pressed{transform:translate(-50%,-50%) rotate(-45deg) scale(.82)}
}