/* ==========================================================================
   EFAETO . com  -  Eclipse UI v2 "Efaeto Warm"  -  production stylesheet
   --------------------------------------------------------------------------
   Brand anchors are copied verbatim from client/tailwind.config.cjs so the
   marketing site and the POS render the same colours on the same screen.
   Fonts are SELF-HOSTED (no CDN): the same Inter latin+greek subsets the app
   ships. Plus Jakarta Sans, used before, has NO greek glyphs at all, so every
   greek word on this site used to fall back to a random system font.
   ========================================================================== */

/* --------------------------------------------------------------- 1. FONTS */
@font-face {
  font-family: 'Inter Var';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Var';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-greek.woff2') format('woff2-variations');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* The wordmark face. The brand art in /icon sets 'efaeto' in a rounded
   geometric sans, so the site now matches its own logo instead of using a
   serif that appears nowhere in the identity. Comfortaa is one of the very
   few rounded geometric faces that ships a real greek subset. */
@font-face {
  font-family: 'Efaeto Brand';
  font-style: normal;
  font-display: swap;
  font-weight: 600 700;
  src: url('fonts/comfortaa-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Efaeto Brand';
  font-style: normal;
  font-display: swap;
  font-weight: 600 700;
  src: url('fonts/comfortaa-greek.woff2') format('woff2-variations');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* -------------------------------------------------------------- 2. TOKENS */
:root {
  /* ---------------------------------------------------------------------
     THE SITE IS CREAM. THE PRODUCT IS DARK. THAT CONTRAST IS THE POINT.
     Palette sampled directly from the brand art in /icon: the cream ground
     is 55% of that image, with black type and gold detail. Every value below
     was contrast-checked against the cream ground; the ratios are in the
     comments and none of the text colours ship below WCAG AA.
     The dark values the POS actually runs on live in the .device block, so
     the embedded simulator looks like the real screen and not like the page.
     --------------------------------------------------------------------- */

  /* Surfaces */
  --bg-page: #FCF0E4;        /* brand cream, straight off the logo art */
  --bg-soft: #F6E7D3;        /* alternating band */
  --bg-card: #FFFCF6;        /* raised card */
  --bg-card-hover: #FFF8EC;
  --bg-inner: #F4E6D2;       /* inset wells */
  --bg-elevated: #F0DCC2;
  --ink: #100D0C;

  /* Brand action.
     #D9A93E is only ever a BACKGROUND or a rule: as text on cream it is
     1.93:1 and fails outright. --gold-text is its accessible sibling. */
  --gold: #D9A93E;           /* fills, rules, decoration */
  --gold-light: #F2CE6B;
  --gold-deep: #B4822C;      /* 3.03:1, large text and borders only */
  --gold-text: #855420;      /* 5.70:1 on cream, safe for body copy */
  --caramel: #96622A;        /* 4.59:1 */
  --caramel-light: #C98A52;  /* decoration only */
  --copper: #8A4B1E;         /* 6.03:1 */
  --on-gold: #2A1F12;        /* 7.44:1 on the gold fill */

  /* Status, darkened until each one passes on cream */
  --st-pending: #9A6206;     /* 4.54:1 */
  --st-preparing: #96622A;   /* 4.59:1 */
  --st-ready: #0A7B58;       /* 4.70:1 */
  --st-danger: #C0271F;      /* 5.27:1 */
  --st-treat: #9A6206;
  --st-info: #1D5FA8;

  /* Text */
  --text: #100D0C;           /* 17.26:1 */
  --text-cream: #241C15;     /* headings on cards */
  --text-body: #4A3B2E;      /* 9.57:1 */
  --text-muted: #7A6553;     /* 4.91:1, the lightest body colour allowed */
  --text-dim: #93826E;       /* 3.31:1: LARGE or decorative only, never body */

  /* Lines */
  --border: #EADBC5;
  --border-mid: #DCC7A9;
  --border-strong: #C4A981;

  /* Geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 9999px;
  --tap: 44px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 0.18s var(--ease);
  --slow: 0.45s var(--ease);

  /* Rhythm. Shadows are warm and soft: black shadow on cream reads as dirt. */
  --sec-y: 104px;
  --shadow-card: 0 1px 2px rgba(74,59,46,.06), 0 14px 40px -20px rgba(74,59,46,.28);
  --shadow-gold: 0 10px 30px -14px rgba(180,130,44,.55);

  /* Chrome that has to sit over content */
  --nav-bg: rgba(252,240,228,.86);
  --nav-bg-solid: rgba(252,240,228,.97);
  --hover-tint: rgba(74,59,46,.05);
}

/* The embedded product simulator keeps the palette the POS really runs, so a
   visitor sees the actual screen their staff will use at eleven at night. */
.device {
  --bg-page: #100D0C;
  --bg-soft: #16110E;
  --bg-card: #211A16;
  --bg-card-hover: #2A221D;
  --bg-inner: #2B231E;
  --bg-elevated: #362D27;

  --gold: #D9A93E;
  --gold-light: #F2CE6B;
  --gold-deep: #B4822C;
  --gold-text: #E0B354;
  --caramel: #C98A52;
  --caramel-light: #E5A96E;
  --copper: #B0713A;
  --on-gold: #2A1F12;

  --st-pending: #F59E0B;
  --st-preparing: #C98A52;
  --st-ready: #10B981;
  --st-danger: #EF4444;
  --st-treat: #FBBF24;
  --st-info: #60A5FA;

  --text: #FFFFFF;
  --text-cream: #F0E8D6;
  --text-body: #D3C6B0;
  --text-muted: #A08A73;
  /* was #7C6A55, which measured 3.3:1 on the card surface and failed AA */
  --text-dim: #93826E;

  --border: #2F2721;
  --border-mid: #453931;
  --border-strong: #5B4B36;

  --hover-tint: rgba(255,255,255,.045);
  color: var(--text-body);
}

/* --------------------------------------------------------------- 3. RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: 'Inter Var', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  background: var(--bg-page);
  color: var(--text-body);
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  font-feature-settings: "cv02","cv03","cv04","ss01";
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 640px at 50% -300px, rgba(217,169,62,.20), transparent 64%),
    radial-gradient(760px 480px at 90% 4%, rgba(201,138,82,.10), transparent 62%),
    var(--bg-page);
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }
strong, b { font-weight: 700; color: var(--text-cream); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(217,169,62,.42); color: var(--ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-inner); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid var(--bg-inner); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

.skip-link {
  position: absolute; left: 12px; top: -70px; z-index: 999;
  background: var(--gold); color: var(--on-gold);
  padding: 12px 20px; border-radius: var(--r-md); font-weight: 800;
  transition: top var(--fast);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------- 4. LANGUAGE SWITCHING */
/* CSS-driven so there is never a flash of both languages before JS boots.
   boot.js stamps data-lang on <html> before first paint. */
html[data-lang="el"] [lang-en] { display: none !important; }
html[data-lang="en"] [lang-el] { display: none !important; }

/* ---------------------------------------------------------- 5. TYPOGRAPHY */
h1, h2, h3, h4 { color: var(--text); line-height: 1.14; letter-spacing: -0.022em; font-weight: 800; }

.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 880px; }

section { padding: var(--sec-y) 0; position: relative; }
section.tight { padding: 68px 0; }
.band { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.sec-head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.sec-head.left { margin-left: 0; text-align: left; }

.sec-tag {
  /* gold-text, not gold: the brand gold is 1.93:1 here */
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: 16px;
}
.sec-tag::before { content: ""; width: 22px; height: 2px; background: var(--gold-deep); border-radius: 2px; }
.sec-head.left .sec-tag { justify-content: flex-start; }

.sec-title { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; margin-bottom: 16px; }
.sec-desc { font-size: clamp(15.5px, 1.6vw, 18px); color: var(--text-muted); line-height: 1.68; }

.hl { color: var(--gold-text); }

/* ------------------------------------------------------------ 6. BRANDING */
.brand-logo {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: 'Efaeto Brand', 'Inter Var', system-ui, sans-serif;
  font-size: 25px; font-weight: 700; letter-spacing: -.005em;
  color: var(--text);
}
.brand-logo .dot { color: var(--gold-deep); }
.brand-logo:hover { color: var(--gold-text); }

/* --------------------------------------------------------- 7. NAVIGATION */
.site-nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--nav-bg);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast), background var(--fast);
}
.site-nav.scrolled { border-bottom-color: var(--border); background: var(--nav-bg-solid); box-shadow: 0 1px 20px -8px rgba(74,59,46,.28); }

.nav-inner { display: flex; align-items: center; gap: 18px; height: 72px; max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.nav-menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.nav-link {
  position: relative; padding: 9px 13px; border-radius: var(--r-full);
  font-size: 14.5px; font-weight: 600; color: var(--text-muted);
  transition: color var(--fast), background var(--fast); white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: var(--hover-tint); }
.nav-link.active { color: var(--gold-text); }
.nav-link.active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; background: var(--gold-deep); border-radius: 2px;
}

.nav-actions { display: flex; align-items: center; gap: 10px; }

.lang-toggle {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-full);
}
.lang-btn {
  min-width: 38px; padding: 5px 9px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  color: var(--text-muted); transition: var(--fast);
}
.lang-btn:hover { color: var(--text-cream); }
.lang-btn.active { background: var(--gold); color: var(--on-gold); }

.nav-burger {
  display: none; width: 42px; height: 42px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-card);
  align-items: center; justify-content: center;
}
.nav-burger span { display: block; width: 17px; height: 2px; background: var(--text-cream); border-radius: 2px; position: relative; transition: var(--fast); }
.nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 2px;
  background: var(--text-cream); border-radius: 2px; transition: var(--fast);
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
body.menu-open .nav-burger span { background: transparent; }
body.menu-open .nav-burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-burger span::after { top: 0; transform: rotate(-45deg); }

/* ------------------------------------------------------------ 8. BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 12px 22px; border-radius: var(--r-full);
  font-size: 14.5px; font-weight: 800; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-align: center;
  transition: transform var(--fast), filter var(--fast), background var(--fast),
              border-color var(--fast), box-shadow var(--fast), color var(--fast);
}
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-gold { background: var(--gold); color: var(--on-gold); box-shadow: var(--shadow-gold); }
.btn-gold:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 14px 40px -12px rgba(217,169,62,.7); }

.btn-ghost { background: transparent; color: var(--text-cream); border-color: var(--border-mid); }
.btn-ghost:hover:not(:disabled) { border-color: var(--gold-deep); color: var(--gold-text); background: rgba(217,169,62,.16); }

.btn-solid { background: var(--bg-elevated); color: var(--text-cream); border-color: var(--border-mid); }
.btn-solid:hover:not(:disabled) { background: var(--bg-card-hover); border-color: var(--border-strong); }

.btn-green { background: var(--st-ready); color: #FFFFFF; }
/* Inside the device the ready-green is the bright app value, where white text
   measures 2.54:1. Dark ink on that same green is 7.3:1. */
.device .btn-green { color: #04241A; }
.btn-green:hover:not(:disabled) { filter: brightness(1.08); }

.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 13px; }
.btn-lg { min-height: 54px; padding: 15px 30px; font-size: 16px; }
.btn-full { width: 100%; }

/* ---------------------------------------------------------- 9. PILL/BADGE */
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 12px;
  background: rgba(217,169,62,.20); border: 1px solid rgba(180,130,44,.45);
  border-radius: var(--r-full); font-size: 12.5px; font-weight: 700; color: var(--gold-text);
}
.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--st-ready);
  box-shadow: 0 0 0 0 rgba(16,185,129,.7); animation: pulseRing 2.2s infinite; flex-shrink: 0;
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.65); }
  70%  { box-shadow: 0 0 0 9px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.badge-live { background: rgba(10,123,88,.14); color: #06603F; border: 1px solid rgba(10,123,88,.34); }
.badge-beta { background: rgba(154,98,6,.14); color: #7A4D05; border: 1px solid rgba(154,98,6,.34); }
.badge-soon { background: rgba(122,101,83,.10); color: var(--text-muted); border: 1px solid var(--border-mid); }
.badge-gold { background: rgba(217,169,62,.22); color: var(--gold-text); border: 1px solid rgba(180,130,44,.4); }

/* --------------------------------------------------------- 10. REVEAL FX */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

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

/* ============================================================== 11. HERO */
.hero { padding: 76px 0 40px; text-align: center; position: relative; }

.hero-title {
  font-size: clamp(32px, 5.1vw, 57px); font-weight: 800; line-height: 1.07;
  letter-spacing: -.03em; margin: 22px auto 20px; max-width: 1020px;
  text-wrap: balance;
}
.hero-sub { font-size: clamp(16px, 1.8vw, 19.5px); color: var(--text-muted); max-width: 720px; margin: 0 auto 30px; line-height: 1.66; }

.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }

.hero-guarantees {
  display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap;
  font-size: 13.5px; color: var(--text-muted); margin-bottom: 46px;
}
.hero-guarantees span { display: inline-flex; align-items: center; gap: 7px; }
.check { color: var(--st-ready); font-weight: 900; }

/* Trust strip */
.trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; margin-top: 8px;
}
.trust-cell { background: var(--bg-soft); padding: 22px 16px; text-align: center; }
.trust-num { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: var(--gold-text); letter-spacing: -.03em; }
.trust-lbl { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 600; }

/* ================================================= 12. DEVICE SIMULATOR */
.sim-shell {
  margin-top: 42px; background: var(--bg-card); border: 1px solid var(--border-mid);
  border-radius: var(--r-xl); box-shadow: 0 40px 110px -50px rgba(0,0,0,1), 0 0 0 1px rgba(217,169,62,.06);
  overflow: hidden; text-align: left;
}

.sim-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
.sim-dots { display: flex; gap: 6px; }
.sim-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.sim-dots i:nth-child(1) { background: #F45A4E; }
.sim-dots i:nth-child(2) { background: #E5A93C; }
.sim-dots i:nth-child(3) { background: #48C463; }

.sim-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  padding: 5px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-full);
}
.sim-status.offline { color: var(--st-pending); border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.08); }
.sim-status.offline .pulse { background: var(--st-pending); animation: none; box-shadow: none; }

.sim-tabs { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.sim-tabs::-webkit-scrollbar { display: none; }
.sim-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-full); border: 1px solid transparent;
  font-size: 12.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap;
  transition: var(--fast);
}
.sim-tab:hover { color: var(--text-cream); background: rgba(255,255,255,.04); }
.sim-tab.active { background: var(--gold); color: var(--on-gold); }
.sim-tab .tab-ico { font-size: 14px; }
.sim-tab .tab-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: #B01B14; color: #fff; font-size: 10px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
}
.sim-tab.active .tab-badge { background: var(--on-gold); color: var(--gold-light); }

.sim-stage { position: relative; min-height: 520px; background: var(--bg-page); }
.sim-view { display: none; }
.sim-view.active { display: block; animation: viewIn .32s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sim-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--bg-soft); border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-dim);
}
.sim-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sim-mini-btn {
  padding: 6px 12px; border-radius: var(--r-full); border: 1px solid var(--border-mid);
  font-size: 11.5px; font-weight: 700; color: var(--text-muted); transition: var(--fast);
}
.sim-mini-btn:hover { color: var(--gold); border-color: var(--gold); }
.sim-mini-btn.on { background: rgba(245,158,11,.12); color: var(--st-pending); border-color: rgba(245,158,11,.4); }

/* ---- POS view ---- */
.pos-layout { display: grid; grid-template-columns: 1fr 328px; min-height: 520px; }
.pos-main { padding: 14px; border-right: 1px solid var(--border); min-width: 0; }

.pos-cats { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.pos-cats::-webkit-scrollbar { display: none; }
.pos-cat {
  padding: 9px 16px; border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--bg-card); font-size: 12.5px; font-weight: 700; color: var(--text-muted);
  white-space: nowrap; transition: var(--fast);
}
.pos-cat:hover { border-color: var(--border-strong); color: var(--text-cream); }
.pos-cat.active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }

.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 9px; }

.pos-item {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  min-height: 92px; padding: 12px; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: var(--fast); position: relative; overflow: hidden;
}
.pos-item:hover:not(.out) { background: var(--bg-card-hover); border-color: var(--gold); transform: translateY(-2px); }
.pos-item:active:not(.out) { transform: scale(.97); }
.pos-item.out { opacity: .42; cursor: not-allowed; }
.pos-item-name { font-size: 13px; font-weight: 700; color: var(--text-cream); line-height: 1.3; }
.pos-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pos-item-price { font-size: 14.5px; font-weight: 800; color: var(--gold); }
.pos-item-stock { font-size: 10.5px; font-weight: 700; color: var(--text-dim); }
.pos-item-stock.low { color: var(--st-pending); }
.pos-item-stock.zero { color: var(--st-danger); }
.pos-item-flag {
  position: absolute; top: 0; right: 0; padding: 3px 8px; border-bottom-left-radius: 8px;
  font-size: 10px; font-weight: 900; letter-spacing: .04em;
  /* #EF4444 with white is 3.76:1 and fails at this size; this red is 5.9:1 */
  background: #B01B14; color: #fff;
}

.pos-side { display: flex; flex-direction: column; background: var(--bg-soft); min-width: 0; }
.pos-side-pad { padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-full); }
.seg button {
  padding: 8px 6px; border-radius: var(--r-full); font-size: 11.5px; font-weight: 700;
  color: var(--text-muted); transition: var(--fast); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg button:hover { color: var(--text-cream); }
.seg button.active { background: var(--gold); color: var(--on-gold); }

.cart-scroll { flex: 1; min-height: 128px; max-height: 220px; overflow-y: auto; padding-right: 3px; }
.cart-empty { padding: 32px 14px; text-align: center; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }

.cart-line {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; margin-bottom: 6px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  animation: lineIn .25s var(--ease);
}
@keyframes lineIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.cart-line-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cart-line-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-line-sub { display: block; font-size: 11px; color: var(--gold); font-weight: 700; }
.cart-line-note { display: block; font-size: 10.5px; color: var(--st-info); margin-top: 2px; font-style: italic; line-height: 1.4; }

.stepper { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.step-btn {
  width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--bg-elevated);
  border: 1px solid var(--border-mid); font-size: 14px; font-weight: 900; color: var(--text-cream);
  display: inline-flex; align-items: center; justify-content: center; transition: var(--fast);
}
.step-btn:hover { border-color: var(--gold); color: var(--gold); }
.step-qty { min-width: 20px; text-align: center; font-size: 13px; font-weight: 900; color: #fff; }

.total-box { padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: var(--r-md); }
.total-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--text-muted); }
.total-row + .total-row { margin-top: 3px; }
.total-main { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-mid); }
.total-lbl { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.total-amt { font-size: 27px; font-weight: 800; color: var(--gold); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pay-btn {
  padding: 9px 4px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--bg-card); font-size: 11px; font-weight: 700; color: var(--text-muted);
  transition: var(--fast); display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pay-btn .pay-ico { font-size: 15px; }
.pay-btn:hover { border-color: var(--border-strong); color: var(--text-cream); }
.pay-btn.active { border-color: var(--gold); background: rgba(217,169,62,.1); color: var(--gold-light); }
.pay-btn.treat.active { border-color: var(--st-treat); background: rgba(251,191,36,.12); color: var(--st-treat); }

/* ---- KDS view ---- */
.kds-wrap { padding: 14px; }
.kds-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kds-stations { display: flex; gap: 6px; flex-wrap: wrap; }
.kds-station {
  padding: 7px 13px; border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--bg-card); font-size: 11.5px; font-weight: 700; color: var(--text-muted); transition: var(--fast);
}
.kds-station:hover { color: var(--text-cream); border-color: var(--border-strong); }
.kds-station.active { background: var(--caramel); color: #21150a; border-color: var(--caramel); }

.kds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 10px; align-items: start; }
.kds-empty { grid-column: 1/-1; padding: 70px 20px; text-align: center; color: var(--text-dim); font-size: 13.5px; }
.kds-empty .big { font-size: 38px; display: block; margin-bottom: 12px; opacity: .5; }

.kds-card {
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 4px solid var(--st-pending); border-radius: var(--r-md);
  animation: cardIn .35s var(--ease);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
.kds-card.preparing { border-left-color: var(--st-preparing); }
.kds-card.ready { border-left-color: var(--st-ready); }
.kds-card.late { border-left-color: var(--st-danger); animation: cardIn .35s var(--ease), lateBlink 2s infinite; }
@keyframes lateBlink { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 0 3px rgba(239,68,68,.16); } }

.kds-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kds-num { font-size: 15.5px; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.kds-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.kds-tag { padding: 2px 8px; border-radius: var(--r-full); background: var(--bg-inner); border: 1px solid var(--border-mid); font-size: 10px; font-weight: 700; color: var(--text-muted); }
.kds-tag.table { color: var(--st-info); border-color: rgba(96,165,250,.3); }
.kds-tag.take { color: #FB923C; border-color: rgba(251,146,60,.3); }
.kds-tag.deliv { color: var(--caramel-light); border-color: rgba(229,169,110,.3); }
.kds-timer { font-size: 12px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kds-timer.warn { color: var(--st-pending); }
.kds-timer.late { color: var(--st-danger); }

.kds-items { display: flex; flex-direction: column; gap: 2px; }
.kds-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px;
  border-radius: var(--r-sm); font-size: 12.5px; color: var(--text-cream); font-weight: 600;
  transition: var(--fast); text-align: left; width: 100%;
}
.kds-item:hover { background: rgba(255,255,255,.04); }
.kds-item .tick {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong);
  flex-shrink: 0; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: transparent; transition: var(--fast);
}
.kds-item.done { color: var(--text-dim); }
.kds-item.done .tick { background: var(--st-ready); border-color: var(--st-ready); color: #04241a; }
.kds-item.done .kds-item-txt { text-decoration: line-through; }
.kds-item-txt { flex: 1; }
.kds-item-mods { display: block; font-size: 10.5px; font-weight: 600; margin-top: 2px; }
.kds-item-mods .add { color: var(--st-ready); }
.kds-item-mods .rem { color: var(--st-danger); }

.kds-note {
  padding: 6px 9px; border-radius: var(--r-sm); background: rgba(96,165,250,.09);
  border: 1px dashed rgba(96,165,250,.3); font-size: 11px; color: #93C5FD;
}
.kds-progress { height: 4px; border-radius: 99px; background: var(--bg-inner); overflow: hidden; }
.kds-progress i { display: block; height: 100%; background: var(--st-ready); border-radius: 99px; transition: width .35s var(--ease); }
.kds-bump {
  padding: 10px; border-radius: var(--r-md); background: var(--bg-elevated);
  border: 1px solid var(--border-mid); font-size: 12px; font-weight: 800; color: var(--text-cream); transition: var(--fast);
}
.kds-bump:hover { background: var(--st-ready); border-color: var(--st-ready); color: #04241a; }
.kds-bump.armed { background: var(--st-ready); border-color: var(--st-ready); color: #04241a; }

/* ---- Waiter / tables view ---- */
.tables-wrap { padding: 18px; }
.tables-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 11.5px; color: var(--text-muted); }
.tables-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tables-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }

.floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.table-card {
  padding: 14px 10px; border-radius: var(--r-md); text-align: center;
  background: var(--bg-card); border: 1.5px solid var(--border); transition: var(--fast);
  display: flex; flex-direction: column; gap: 5px; align-items: center; min-height: 104px; justify-content: center;
}
.table-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.table-card.free { border-style: dashed; color: var(--text-dim); }
.table-card.busy { border-color: var(--st-preparing); background: rgba(201,138,82,.08); }
.table-card.ready { border-color: var(--st-ready); background: rgba(16,185,129,.09); }
.table-card.selected { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,169,62,.16); }
.table-no { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -.03em; }
.table-card.free .table-no { color: var(--text-dim); }
.table-amt { font-size: 13px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.table-info { font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
.table-dot { width: 7px; height: 7px; border-radius: 50%; }

.table-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ---- Admin view ---- */
.admin-wrap { padding: 18px; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi {
  padding: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
}
.kpi-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.kpi-val { font-size: 25px; font-weight: 800; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi-val.gold { color: var(--gold); }
.kpi-val.green { color: var(--st-ready); }
.kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.admin-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.panel { padding: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); }
.panel-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }

.chart { display: flex; align-items: flex-end; gap: 5px; height: 148px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.chart-bar {
  width: 100%; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  transition: height .6s var(--ease); min-height: 3px;
}
.chart-col.peak .chart-bar { background: linear-gradient(180deg, var(--gold-light), var(--gold)); box-shadow: 0 0 18px -4px rgba(217,169,62,.6); }
.chart-x { font-size: 9.5px; color: var(--text-dim); font-weight: 700; }

.rank-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.rank-row:last-child { border-bottom: 0; }
.rank-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 900; color: var(--on-gold); background: var(--gold);
}
.rank-av.c2 { background: var(--caramel); color: #21150a; }
.rank-av.c3 { background: var(--copper); color: #fff; }
.rank-av.c4 { background: var(--bg-elevated); color: var(--text-muted); }
.rank-name { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--text-cream); }
.rank-role { font-size: 10.5px; color: var(--text-dim); font-weight: 600; }
.rank-val { font-size: 13px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---- Inventory view ---- */
.inv-wrap { padding: 18px; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.inv-table th {
  text-align: left; padding: 9px 10px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim);
  border-bottom: 1px solid var(--border-mid);
}
.inv-table td { padding: 10px; border-bottom: 1px solid var(--border); color: var(--text-cream); }
.inv-table tr:last-child td { border-bottom: 0; }
.inv-name { font-weight: 700; }
.inv-bar { height: 6px; border-radius: 99px; background: var(--bg-inner); overflow: hidden; min-width: 74px; }
.inv-bar i { display: block; height: 100%; border-radius: 99px; background: var(--st-ready); transition: width .5s var(--ease); }
.inv-bar i.low { background: var(--st-pending); }
.inv-bar i.zero { background: var(--st-danger); }
.inv-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.inv-hint { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(217,169,62,.06); border: 1px dashed rgba(217,169,62,.28); font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* ---- Receipt view ---- */
.receipt-wrap { padding: 24px; display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
.receipt {
  background: #FFFEFA; color: #201a14; border-radius: 6px; padding: 20px 18px;
  font-family: 'Courier New', ui-monospace, monospace; font-size: 12px; line-height: 1.5;
  box-shadow: 0 26px 60px -28px rgba(0,0,0,.9);
  position: relative;
}
.receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px;
  background: repeating-linear-gradient(135deg, #FFFEFA 0 9px, transparent 9px 18px);
}
.receipt-center { text-align: center; }
.receipt-hr { border-top: 1px dashed #9a8d78; margin: 9px 0; }
.receipt-line { display: flex; justify-content: space-between; gap: 10px; }
.receipt-brand { font-size: 17px; font-weight: 700; letter-spacing: .1em; }
.receipt-qr { width: 74px; height: 74px; margin: 8px auto 0; }

/* ============================================================ 13. CARDS */
.grid-3, .grid-2, .grid-4, .price-grid, .role-grid, .feat-grid, .stack-grid, .kpi-row { min-width: 0; }
.grid-3 > *, .grid-2 > *, .grid-4 > *, .price-grid > *, .steps > * { min-width: 0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.card {
  padding: 28px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); transition: var(--fast); position: relative; overflow: hidden;
}
.card { box-shadow: 0 1px 2px rgba(74,59,46,.04); }
.card:hover { border-color: var(--gold-deep); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.card h3 { font-size: 19px; margin-bottom: 10px; }
.card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.68; }

.card-ico {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
  background: rgba(217,169,62,.18); border: 1px solid rgba(180,130,44,.32); margin-bottom: 16px;
}
.card-stat {
  display: inline-block; margin-top: 16px; padding: 5px 12px; border-radius: var(--r-full);
  background: rgba(217,169,62,.18); border: 1px solid rgba(180,130,44,.3);
  font-size: 11.5px; font-weight: 800; color: var(--gold-text);
}

.card-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.card-list li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }
.card-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--st-ready); font-weight: 900; font-size: 12px;
}

.venue-tag {
  display: inline-block; padding: 4px 11px; border-radius: var(--r-full);
  background: rgba(201,138,82,.20); border: 1px solid rgba(150,98,42,.34);
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 14px;
}

/* ================================================== 14. FEATURE CATALOG */
.feat-nav {
  position: sticky; top: 72px; z-index: 90;
  display: flex; gap: 6px; overflow-x: auto; padding: 12px 0;
  background: var(--nav-bg-solid); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border); scrollbar-width: none;
}
.feat-nav::-webkit-scrollbar { display: none; }
/* Fade the right edge so it is obvious the strip scrolls past the fold. */
.feat-nav-wrap { position: relative; }
.feat-nav-wrap::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 56px;
  pointer-events: none; background: linear-gradient(90deg, rgba(252,240,228,0), var(--bg-page));
}
.feat-nav a.active { color: var(--gold-text); border-color: var(--gold-deep); background: rgba(217,169,62,.2); }
.feat-nav a {
  padding: 8px 15px; border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--bg-card); font-size: 12.5px; font-weight: 700; color: var(--text-muted);
  white-space: nowrap; transition: var(--fast);
}
.feat-nav a:hover { color: var(--gold-text); border-color: var(--gold-deep); }

.feat-block { padding: 60px 0; border-bottom: 1px solid var(--border); }
.feat-block:last-child { border-bottom: 0; }
.feat-block-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 34px; flex-wrap: wrap; }
.feat-block-ico {
  width: 54px; height: 54px; border-radius: var(--r-lg); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 25px;
  background: rgba(217,169,62,.1); border: 1px solid rgba(217,169,62,.24);
}
.feat-block-titles { flex: 1; min-width: 260px; }
.feat-block-titles h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 8px; }
.feat-block-titles p { font-size: 15px; color: var(--text-muted); line-height: 1.66; max-width: 720px; }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.feat {
  padding: 18px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); transition: var(--fast);
}
.feat:hover { border-color: var(--gold-deep); background: var(--bg-card-hover); }
.feat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.feat h3 { font-size: 15px; font-weight: 700; line-height: 1.35; }
.feat p { font-size: 13.2px; color: var(--text-muted); line-height: 1.62; }
.feat.roadmap { opacity: .82; border-style: dashed; }

/* ==================================================== 15. ROI CALCULATOR */
.roi-card {
  display: grid; grid-template-columns: 1fr 400px; gap: 34px; align-items: center;
  padding: 34px; background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: var(--r-xl);
}
.roi-card > * { min-width: 0; }
.roi-slider-group { margin-bottom: 26px; }
.roi-slider-group:last-child { margin-bottom: 0; }
.roi-slider-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 11px; font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.roi-slider-label .val { font-size: 15.5px; font-weight: 800; color: var(--gold-text); font-variant-numeric: tabular-nums; }

.roi-slider { -webkit-appearance: none; appearance: none; width: 100%; max-width: 100%; min-width: 0; height: 6px; border-radius: 99px; background: var(--bg-inner); outline: none; }
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--bg-card); cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,.5); transition: transform var(--fast);
}
.roi-slider::-webkit-slider-thumb:hover { transform: scale(1.14); }
.roi-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--gold);
  border: 3px solid var(--bg-card); cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.5);
}

.roi-result {
  padding: 26px; border-radius: var(--r-lg); text-align: center;
  background: linear-gradient(160deg, rgba(217,169,62,.26), rgba(201,138,82,.10));
  border: 1px solid rgba(180,130,44,.4);
}
.roi-saved-title { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 8px; }
.roi-saved-number { font-size: clamp(36px, 5vw, 50px); font-weight: 800; color: var(--text); letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.roi-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; padding: 16px 0; border-top: 1px solid rgba(180,130,44,.3); border-bottom: 1px solid rgba(180,130,44,.3); }
.roi-stat-col .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.roi-stat-col .num { font-size: 17px; font-weight: 800; color: var(--text-cream); font-variant-numeric: tabular-nums; }

/* ==================================================== 16. TIMELINE/STEPS */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: step; }
.step {
  position: relative; padding: 26px 20px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.step::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 14px;
  background: var(--gold); color: var(--on-gold); font-size: 15px; font-weight: 900;
}
.step h3 { font-size: 16px; margin-bottom: 7px; }
.step p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--gold), transparent); }
.tl-item { position: relative; padding-bottom: 30px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -30px; top: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--bg-page); border: 3px solid var(--gold);
}
.tl-item.future::before { border-color: var(--border-strong); }
.tl-date { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 5px; }
.tl-item.future .tl-date { color: var(--text-muted); }
.tl-item h3 { font-size: 17px; margin-bottom: 6px; }
.tl-item p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }

/* ===================================================== 17. COMPARE TABLE */
.cmp-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.cmp { width: 100%; border-collapse: collapse; min-width: 660px; font-size: 14px; }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--border); }
.cmp thead th { background: var(--bg-soft); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.cmp thead th.us { color: var(--gold-text); }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td.us { background: rgba(217,169,62,.05); color: var(--text-cream); font-weight: 700; }
.cmp td.them { color: var(--text-muted); }
.cmp .yes { color: var(--st-ready); font-weight: 900; }
.cmp .no { color: var(--st-danger); font-weight: 900; }
.cmp tbody td:first-child { font-weight: 700; color: var(--text-cream); }

/* ========================================================== 18. PRICING */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.price-card {
  position: relative; padding: 30px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-xl); transition: var(--fast);
  display: flex; flex-direction: column; height: 100%;
}
.price-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.price-card.featured { border-color: var(--gold-deep); box-shadow: 0 0 0 1px rgba(180,130,44,.35), 0 26px 60px -32px rgba(150,98,42,.45); }
.price-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 5px 16px; border-radius: var(--r-full); background: var(--gold); color: var(--on-gold);
  font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.price-name { font-size: 19px; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.price-for { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; min-height: 38px; line-height: 1.5; }
.price-amount { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; }
.price-num { font-size: 42px; font-weight: 800; color: var(--gold-text); letter-spacing: -.035em; }
.price-unit { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.price-note { font-size: 12px; color: var(--text-muted); margin-bottom: 22px; min-height: 32px; line-height: 1.5; }
.price-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; flex: 1; }
.price-features li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--text-body); line-height: 1.5; }
.price-features li::before { content: "✓"; position: absolute; left: 0; color: var(--st-ready); font-weight: 900; }
.price-features li.off { color: var(--text-muted); }
.price-features li.off::before { content: "—"; color: var(--text-muted); }

/* =============================================================== 19. FAQ */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: var(--fast); }
.faq-item.open { border-color: var(--border-strong); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 19px 22px; text-align: left; font-size: 15.5px; font-weight: 700; color: var(--text-cream);
}
.faq-q:hover { color: var(--gold-text); }
.faq-q .chev { flex-shrink: 0; color: var(--gold-text); font-size: 20px; transition: transform var(--fast); line-height: 1; }
.faq-item.open .chev { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-item.open .faq-a { max-height: 640px; }
.faq-a-inner { padding: 0 22px 20px; font-size: 14.2px; color: var(--text-muted); line-height: 1.72; }

/* ============================================================ 20. PEOPLE */
.person-hero { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; }
/* Real photograph, not an illustration. Square, generous radius, warm rim so
   the studio grey sits on the cream ground without a hard edge. */
.portrait {
  position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden;
  background: var(--bg-inner);
  box-shadow: 0 1px 2px rgba(74,59,46,.08), 0 26px 60px -30px rgba(74,59,46,.42);
}
.portrait img { width: 100%; height: auto; display: block; }
/* A hairline of brand gold instead of a border, so it reads as a frame. */
.portrait::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(180,130,44,.34); pointer-events: none;
}

.person-role { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 10px; }
.person-name { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 12px; }
.person-bio { font-size: 15.5px; color: var(--text-muted); line-height: 1.72; margin-bottom: 18px; }
.person-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.person-tag {
  padding: 5px 13px; border-radius: var(--r-full); background: var(--bg-card);
  border: 1px solid var(--border-mid); font-size: 12px; font-weight: 700; color: var(--text-muted);
}

.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.role-card { padding: 22px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); transition: var(--fast); }
.role-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.role-av {
  width: 52px; height: 52px; border-radius: var(--r-md); margin-bottom: 14px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 24px;
  background: var(--bg-inner); border: 1px solid var(--border-mid);
}
.role-card h3 { font-size: 16px; margin-bottom: 4px; }
.role-card .who { font-size: 12px; font-weight: 700; color: var(--gold-text); margin-bottom: 9px; }
.role-card p { font-size: 13.2px; color: var(--text-muted); line-height: 1.6; }

.value-row { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.value-row:last-child { border-bottom: 0; }
.value-num { font-size: 34px; font-weight: 800; color: var(--gold-deep); opacity: .6; line-height: 1; flex-shrink: 0; letter-spacing: -.04em; }
.value-body h3 { font-size: 18px; margin-bottom: 7px; }
.value-body p { font-size: 14.2px; color: var(--text-muted); line-height: 1.7; }

.quote {
  padding: 34px; border-radius: var(--r-xl);
  background: linear-gradient(150deg, rgba(217,169,62,.20), rgba(252,240,228,.4));
  border: 1px solid rgba(180,130,44,.34); position: relative;
}
.quote::before {
  content: '"'; position: absolute; top: 4px; left: 20px;
  font-family: 'Efaeto Brand', Georgia, serif; font-size: 78px; color: rgba(180,130,44,.30); line-height: 1;
}
.quote p { position: relative; font-size: clamp(17px, 2.2vw, 22px); line-height: 1.6; color: var(--text-cream); font-weight: 600; }
.quote cite { display: block; margin-top: 16px; font-size: 13px; font-style: normal; color: var(--gold-text); font-weight: 700; }

/* =============================================================== 21. CTA */
.cta-box {
  padding: 52px 40px; border-radius: var(--r-xl); text-align: center;
  background: linear-gradient(160deg, rgba(217,169,62,.24), rgba(201,138,82,.09));
  border: 1px solid rgba(180,130,44,.38);
}
.cta-box h2 { font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 14px; }
.cta-box p { font-size: 16px; color: var(--text-muted); max-width: 600px; margin: 0 auto 28px; line-height: 1.66; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================ 22. FOOTER */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--border); padding: 62px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(5, 1fr); gap: 30px; margin-bottom: 44px; }
.footer-grid > * { min-width: 0; }
.footer-col h4 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-cream); margin-bottom: 15px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 13.5px; color: var(--text-muted); transition: var(--fast); }
.footer-links a:hover { color: var(--gold-text); }
.footer-blurb { font-size: 13.5px; color: var(--text-muted); line-height: 1.66; margin: 12px 0 16px; max-width: 330px; }
.footer-mail { font-size: 13.5px; font-weight: 700; color: var(--gold-text); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted);
}
.footer-bottom .meta { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================================= 23. MODAL */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 500; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(36,28,21,.58); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.modal-backdrop.active { display: flex; animation: fadeIn .22s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  padding: 32px; background: var(--bg-card); border: 1px solid var(--border-mid);
  border-radius: var(--r-xl); box-shadow: 0 44px 110px -40px rgba(0,0,0,1);
  animation: modalIn .3s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

.modal-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-inner); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: var(--fast);
}
.modal-close:hover { color: var(--st-danger); border-color: var(--st-danger); }
.modal-card h3 { font-size: 23px; margin-bottom: 8px; }
.modal-lead { font-size: 14px; color: var(--text-muted); margin-bottom: 22px; line-height: 1.6; }

.form-group { margin-bottom: 15px; }
.form-label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; }
.form-input, .form-select, .form-textarea {
  width: 100%; min-height: var(--tap); padding: 12px 15px;
  background: var(--bg-soft); border: 1px solid var(--border-mid); border-radius: var(--r-md);
  color: var(--text-cream); font-size: 14.5px; transition: var(--fast);
}
.form-textarea { min-height: 78px; resize: vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,169,62,.14); }
.form-input::placeholder, .form-textarea::placeholder { color: #8A7660; }
.form-select option { background: var(--bg-card); color: var(--text-cream); }
.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 14px; line-height: 1.55; text-align: center; }
.form-hint a { color: var(--gold-text); text-decoration: underline; }

.form-ok {
  padding: 18px; border-radius: var(--r-md); text-align: center;
  background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.32);
  color: #6EE7B7; font-size: 14px; line-height: 1.6; margin-top: 8px;
}

/* ============================================================= 24. PROSE */
.prose h2 { font-size: 24px; margin: 38px 0 14px; }
.prose h3 { font-size: 18px; margin: 26px 0 10px; }
.prose p { font-size: 15px; color: var(--text-muted); line-height: 1.78; margin-bottom: 14px; }
.prose ul { margin: 0 0 16px 0; display: flex; flex-direction: column; gap: 8px; }
.prose li { position: relative; padding-left: 20px; font-size: 15px; color: var(--text-muted); line-height: 1.7; }
.prose li::before { content: "·"; position: absolute; left: 6px; color: var(--gold-deep); font-weight: 900; }
.prose a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text-cream); }
.prose .updated { font-size: 12.5px; color: var(--text-muted); margin-bottom: 26px; }

/* ============================================================ 25. ARCH FX */
.arch-diagram { padding: 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); overflow-x: auto; }
.arch-diagram svg { min-width: 620px; margin: 0 auto; }

.stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.stack-item { padding: 15px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); }
.stack-name { font-size: 14px; font-weight: 800; color: var(--text-cream); margin-bottom: 3px; }
.stack-why { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.code-note {
  padding: 16px 18px; border-radius: var(--r-md); background: var(--bg-soft);
  border: 1px solid var(--border); border-left: 3px solid var(--gold-deep);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px;
  color: var(--text-body); line-height: 1.7; overflow-x: auto;
}
.code-note b { color: var(--gold-text); font-weight: 700; }

/* ============================================================= 26. 404 */
.err-wrap { min-height: 68vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; }
.err-code { font-size: clamp(80px, 16vw, 160px); font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--gold-deep); opacity: .4; }

/* ======================================================= 27. RESPONSIVE */
@media (max-width: 1100px) {
  .roi-card { grid-template-columns: 1fr; gap: 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
  .footer-col:first-child { grid-column: 1/-1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .admin-cols { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  :root { --sec-y: 76px; }
  .nav-menu {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 14px 18px 22px; margin: 0;
    background: var(--nav-bg-solid); border-bottom: 1px solid var(--border); box-shadow: 0 18px 40px -22px rgba(74,59,46,.4);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity var(--fast), transform var(--fast);
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  body.menu-open .nav-menu { transform: none; opacity: 1; pointer-events: auto; }
  .nav-link { padding: 14px 16px; font-size: 16px; border-radius: var(--r-md); }
  .nav-link.active::after { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-actions .btn { display: none; }
  .lang-btn { min-width: 32px; padding: 5px 7px; font-size: 11px; }
  .brand-logo { font-size: 26px; }
  .nav-inner { gap: 12px; }
  .nav-actions { margin-left: auto; }

  .grid-3, .grid-2, .grid-4, .price-grid { grid-template-columns: 1fr; }
  .pos-layout { grid-template-columns: 1fr; }
  .pos-main { border-right: 0; border-bottom: 1px solid var(--border); max-height: 320px; overflow-y: auto; }
  .cart-scroll { max-height: 170px; }
  .person-hero { grid-template-columns: 1fr; gap: 26px; }
  .portrait { max-width: 280px; margin: 0 auto; }
  .receipt-wrap { grid-template-columns: 1fr; }
  .receipt { max-width: 330px; margin: 0 auto; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --sec-y: 62px; }
  .wrap { padding: 0 18px; }
  .hero { padding: 46px 0 26px; }
  .hero-ctas .btn { width: 100%; }
  .sim-stage { min-height: 460px; }
  .sim-bar { gap: 10px; padding: 10px 12px; }
  .sim-tabs { width: 100%; margin-left: 0; }
  .pos-grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
  .kds-grid { grid-template-columns: 1fr; }
  .floor { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .steps { grid-template-columns: 1fr; }
  .card, .price-card, .cta-box { padding: 22px; }
  .roi-card { padding: 22px; }
  .modal-card { padding: 24px 20px; }
  .feat-block-head { gap: 14px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .quote { padding: 24px; }
  .arch-diagram { padding: 14px; }
}

@media print {
  .site-nav, .site-footer, .sim-shell, .modal-backdrop, .hero-ctas { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==================================================== 28. SIM EXTRAS */
.sim-flash {
  max-height: 0; overflow: hidden; opacity: 0;
  padding: 0 16px; font-size: 12.5px; font-weight: 700;
  background: var(--bg-inner); border-bottom: 1px solid transparent;
  transition: max-height .3s var(--ease), opacity .3s var(--ease), padding .3s var(--ease);
  color: var(--text-cream);
}
.sim-flash.show { max-height: 70px; opacity: 1; padding: 10px 16px; border-bottom-color: var(--border); }
.sim-flash.ok { color: #6EE7B7; background: rgba(16,185,129,.09); }
.sim-flash.warn { color: #FCD34D; background: rgba(245,158,11,.09); }

.sim-outbox {
  padding: 9px 16px; font-size: 12px; font-weight: 700; color: var(--st-pending);
  background: rgba(245,158,11,.08); border-bottom: 1px solid rgba(245,158,11,.24);
}

.sim-cap {
  margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--text-muted); line-height: 1.6;
}
.sim-cap b { color: var(--text-muted); font-weight: 700; }

/* ================================================== 29. OFFLINE TIERS */
/* The section that does the competitive work: three honest levels of what
   "works without internet" means, plus our own stated limit. */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }

.tier {
  display: flex; flex-direction: column; padding: 26px 24px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: var(--fast);
}
.tier:hover { border-color: var(--border-strong); }
.tier.featured {
  border-color: var(--gold-deep);
  background: linear-gradient(165deg, rgba(217,169,62,.20), var(--bg-card) 62%);
  box-shadow: 0 0 0 1px rgba(180,130,44,.3), 0 24px 56px -30px rgba(150,98,42,.42);
}

.tier-badge {
  align-self: flex-start; padding: 4px 12px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: 14px;
}
.tier-badge.no   { background: rgba(192,39,31,.12); color: #93150F; border: 1px solid rgba(192,39,31,.32); }
.tier-badge.half { background: rgba(154,98,6,.13); color: #7A4D05; border: 1px solid rgba(154,98,6,.32); }
.tier-badge.yes  { background: var(--gold); color: var(--on-gold); border: 1px solid var(--gold); text-transform: none; letter-spacing: .01em; font-size: 12px; }

.tier h3 { font-size: 17.5px; line-height: 1.3; margin-bottom: 9px; }
.tier-what { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }

.tier-list { display: flex; flex-direction: column; gap: 9px; margin-top: auto; }
.tier-list li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.55; }
.tier-list li::before {
  position: absolute; left: 0; top: 0; font-weight: 900; font-size: 13px;
}
.tier-list li.ok  { color: var(--text-body); }
.tier-list li.ok::before  { content: "✓"; color: var(--st-ready); }
.tier-list li.bad { color: var(--text-muted); }
.tier-list li.bad::before { content: "✕"; color: var(--st-danger); }

/* Stating our own weakness in public is the most persuasive block on the page,
   so it is styled to be read, not buried. */
.honest-note {
  display: flex; gap: 18px; margin-top: 22px; padding: 24px 26px;
  background: var(--bg-card); border: 1px solid var(--border-mid);
  border-left: 3px solid var(--st-pending); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(74,59,46,.04);
}
.honest-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  background: rgba(154,98,6,.14); color: var(--st-pending); border: 1px solid rgba(154,98,6,.32);
}
.honest-note h3 { font-size: 16px; margin-bottom: 7px; }
.honest-note p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

@media (max-width: 980px) {
  .tiers { grid-template-columns: 1fr; }
  .honest-note { flex-direction: column; gap: 12px; padding: 20px; }
}

/* Price slots now carry words instead of a figure, so they need their own size. */
.price-num.words {
  font-size: 25px; font-weight: 800; color: var(--gold-text);
  letter-spacing: -.02em; line-height: 1.2;
}

/* ============================================ 30. BRAND: THE MEANDER */
/* The logo art is a gold meander ring. It is the one shape that is unmistakably
   this brand and unmistakably greek, so it earns a place on the page rather
   than living only inside the mark. Drawn in CSS: no request, scales freely. */
.meander {
  height: 16px;
  background-color: var(--gold-deep);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2216%22%20viewBox%3D%220%200%2032%2016%22%3E%3Cpath%20d%3D%22M1%2015%20V1%20H25%20V11%20H9%20V5%20H19%20V9%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22square%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2216%22%20viewBox%3D%220%200%2032%2016%22%3E%3Cpath%20d%3D%22M1%2015%20V1%20H25%20V11%20H9%20V5%20H19%20V9%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22square%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 32px 16px;
  mask-size: 32px 16px;
  opacity: .65;
}
.meander-rule .meander { -webkit-mask-position: center; mask-position: center; }

.meander-rule {
  display: flex; align-items: center; gap: 18px;
  margin: 0 auto 14px; max-width: 520px;
  position: relative; overflow: hidden;
}
/* Soften both ends into the page so the rule reads as ornament, not a border. */
.meander-rule::before, .meander-rule::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 54px; pointer-events: none; z-index: 1;
}
.meander-rule::before { left: 0; background: linear-gradient(90deg, var(--bg-page), transparent); }
.meander-rule::after  { right: 0; background: linear-gradient(270deg, var(--bg-page), transparent); }
/* Inside a .band the ornament sits on the alternate surface. */
.band .meander-rule::before { background: linear-gradient(90deg, var(--bg-soft), transparent); }
.band .meander-rule::after  { background: linear-gradient(270deg, var(--bg-soft), transparent); }
.meander-rule .meander { flex: 1; }
.meander-rule .knot {
  width: 9px; height: 9px; flex-shrink: 0; transform: rotate(45deg);
  background: var(--gold-deep); opacity: .75;
}

/* The device frame reads as hardware sitting on the page, not as a section. */
.sim-shell {
  box-shadow:
    0 2px 4px rgba(74,59,46,.12),
    0 30px 70px -34px rgba(43,32,22,.55),
    0 0 0 1px rgba(43,32,22,.10);
  border-color: #2F2721;
}

/* Section rhythm: the cream ground needs stronger separation than black did,
   because low-contrast surfaces stop reading as separate planes. */
.band { box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }

/* Cream ground makes hairline borders disappear; tables need real lines. */
.cmp-scroll { background: var(--bg-card); }
.cmp thead th { background: var(--bg-soft); }
.inv-table th { color: var(--text-muted); }

/* Print: the site is already light, so print needs almost nothing. */
@media print {
  body { background: #fff; }
  .meander, .sim-shell { display: none !important; }
}

/* ================================================ 31. ICON SYSTEM */
/* One 24x24 grid, one 1.6 stroke, currentColor. Replaces 91 emoji, which
   rendered differently on every OS and read as clip art. */
.ico { width: 24px; height: 24px; display: block; flex-shrink: 0; }

.card-ico .ico { width: 22px; height: 22px; }
.feat-block-ico .ico { width: 26px; height: 26px; }
.role-av .ico { width: 24px; height: 24px; }
.honest-ico .ico { width: 19px; height: 19px; }
.tab-ico { display: inline-flex; }
.tab-ico .ico { width: 16px; height: 16px; }
.pay-ico { display: inline-flex; }
.pay-ico .ico { width: 17px; height: 17px; }
.feat-nav a .ico { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; margin-right: 2px; }

/* Icon holders: the icon carries the accent, the plate stays quiet. */
.card-ico, .feat-block-ico { color: var(--gold-text); }
.role-av { color: var(--gold-text); }
.honest-ico { color: var(--st-pending); }
.device .tab-ico { color: currentColor; }
.pay-btn .ico { opacity: .85; }
.pay-btn.active .ico { opacity: 1; }

/* The tabs put label and icon on one baseline. */
.sim-tab { align-items: center; }

/* ============================================== 32. MOTION SYSTEM */
/* Only transform and opacity are animated, so nothing here touches layout. */

.rise {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .72s var(--ease), transform .72s var(--ease);
  transition-delay: var(--delay, 0ms);
  will-change: transform, opacity;
}
.rise.in { opacity: 1; transform: none; }
.rise.in { will-change: auto; }

/* The hero and device transforms are written from JS; these keep them smooth
   and stop the browser promoting them forever. */
.hero-title, .hero-sub, .hero-ctas { will-change: transform, opacity; }
.sim-shell { transform-origin: 50% 100%; transition: box-shadow .5s var(--ease); }

/* Pointer sheen: a warm highlight that tracks the cursor. */
.sheen { position: relative; }
.sheen::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(217,169,62,.16), transparent 62%);
}
.sheen:hover::before { opacity: 1; }

/* Buttons get a physical press rather than a colour swap. */
.btn { will-change: transform; }
.btn-gold:active:not(:disabled) { transform: scale(.972); }

/* Reading progress, hairline, top of viewport. */
#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform; pointer-events: none;
}

/* -------------------------------------------- STICKY PRODUCT WALKTHROUGH */
.walkthrough { position: relative; }
.walk-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: start; }
/* Grid children default to min-width:auto and refuse to shrink below their
   content, which pushed the page 319px wide on a phone. */
.walk-grid > *, .walk-steps > * { min-width: 0; }

.walk-steps { display: flex; flex-direction: column; }
.walk-step {
  padding: 30px 0 30px 26px; border-left: 2px solid var(--border);
  opacity: .42; transition: opacity .45s var(--ease), border-color .45s var(--ease);
}
.walk-step.active { opacity: 1; border-left-color: var(--gold-deep); }
.walk-step h3 { font-size: clamp(21px, 2.3vw, 28px); margin-bottom: 10px; letter-spacing: -.02em; }
.walk-step p { font-size: 15.5px; color: var(--text-muted); line-height: 1.7; }
.walk-step .step-no {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: 9px;
}

.walk-sticky { position: sticky; top: 96px; }

/* The device inside the walkthrough should not re-run the entry lift. */
.walk-sticky .sim-shell { transform: none !important; }

@media (max-width: 980px) {
  .walk-grid { grid-template-columns: 1fr; gap: 26px; }
  /* Stacking a sticky device above scrolling captions traps the reader, so on
     narrow screens the device leads once and the steps simply follow. */
  .walk-sticky { position: static; }
  .walk-step { padding: 20px 0 20px 20px; opacity: 1; }
  .walk-step.active { border-left-color: var(--gold-deep); }
}

/* prefers-reduced-motion: content still arrives, it just stops moving. */
.reduced-motion .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
.reduced-motion .hero-title,
.reduced-motion .hero-sub,
.reduced-motion .hero-ctas,
.reduced-motion .sim-shell { transform: none !important; opacity: 1 !important; }
.reduced-motion .sheen::before { display: none; }
.reduced-motion #scroll-progress { display: none; }

/* The sticky column needs its own quiet label above the device. */
.walk-note {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted); margin-bottom: 12px; text-align: center;
}
.walk-sticky .sim-cap { margin-top: 12px; }

/* Counting numbers must not reflow as digits land. */
.trust-num { font-variant-numeric: tabular-nums; }