/* ============================================================================
   Meezan ERP POS — website design system
   Brand palette carried over from the app (frontend/tailwind.config.js):
     paper #f3f0e7 · ink #1d2a24 · meezan-500 #3f6b54
   Single stylesheet, no build step, no external requests.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --paper:        #f3f0e7;
  --paper-2:      #ece7da;
  --ink:          #1d2a24;

  --brand-50:     #eef4f0;
  --brand-100:    #d6e6dc;
  --brand-200:    #adcdb9;
  --brand-300:    #84b496;
  --brand-400:    #5c9b74;
  --brand-500:    #3f6b54;
  --brand-600:    #345945;
  --brand-700:    #294636;
  --brand-800:    #1f3428;
  --brand-900:    #142219;

  --gold:         #c8a34a;
  --gold-soft:    #e6d3a3;
  --danger:       #b4453c;
  --info:         #3d6b8e;

  /* semantic — light theme */
  --bg:           #ffffff;
  --bg-alt:       var(--paper);
  --bg-sunken:    var(--paper-2);
  --surface:      #ffffff;
  --surface-2:    #faf8f3;
  --text:         var(--ink);
  --text-soft:    #5a6b62;
  --text-faint:   #647169;
  --line:         #e0dccf;
  --line-strong:  #cdc7b6;
  --accent:       var(--brand-500);
  --accent-hover: var(--brand-600);
  --on-accent:    #ffffff;
  --ring:         color-mix(in srgb, var(--brand-500) 35%, transparent);

  /* Layered, brand-tinted shadows — a flat grey drop shadow is the fastest way
     to make an interface look cheap, so every level stacks a tight contact
     shadow under a wide ambient one. */
  --shadow-sm:  0 1px 1px rgba(20, 34, 25, .05), 0 2px 4px -1px rgba(20, 34, 25, .06);
  --shadow-md:  0 1px 2px rgba(20, 34, 25, .05), 0 6px 16px -4px rgba(20, 34, 25, .09),
                0 2px 6px -2px rgba(20, 34, 25, .05);
  --shadow-lg:  0 1px 2px rgba(20, 34, 25, .05), 0 12px 28px -8px rgba(20, 34, 25, .14),
                0 28px 56px -20px rgba(31, 52, 40, .2);
  --shadow-xl:  0 2px 4px rgba(20, 34, 25, .06), 0 24px 48px -16px rgba(20, 34, 25, .2),
                0 56px 96px -32px rgba(31, 52, 40, .3);
  --glow:       0 0 0 1px color-mix(in srgb, var(--brand-400) 22%, transparent),
                0 12px 40px -12px color-mix(in srgb, var(--brand-500) 45%, transparent);
  --glow-gold:  0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent),
                0 12px 40px -12px color-mix(in srgb, var(--gold) 40%, transparent);

  --r-xs: 6px;  --r-sm: 10px;  --r-md: 15px;  --r-lg: 22px;  --r-xl: 32px;  --r-full: 999px;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", "Noto Sans Arabic", "Segoe UI Arabic", Arial, sans-serif;
  /* An editorial serif for display headings. Ledgers, statements and balance
     sheets are set in serif; it reads as established rather than start-up. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
          Georgia, ui-serif, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas,
          "Liberation Mono", monospace;

  /* Fine film grain — the single strongest cue that a dark surface is a
     designed material rather than a flat hex value. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");

  --wrap: 1200px;
  --wrap-narrow: 780px;
  --header-h: 68px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .16s var(--ease);
  --t: .3s var(--ease);
  --t-slow: .6s var(--ease);
}

:root[data-theme="dark"] {
  --bg:           #101a15;
  --bg-alt:       #0c1410;
  --bg-sunken:    #0a110d;
  --surface:      #16231c;
  --surface-2:    #1b2b22;
  --text:         #e8eee9;
  --text-soft:    #a3b3aa;
  --text-faint:   #7f9187;
  --line:         #24382c;
  --line-strong:  #33513f;
  --accent:       var(--brand-300);
  --accent-hover: var(--brand-200);
  --on-accent:    #0d1712;
  --ring:         color-mix(in srgb, var(--brand-300) 35%, transparent);

  /* The light-theme --danger and --info are tuned against white and drop to
     ~3:1 on these backgrounds — under the 4.5:1 that error text needs. They are
     lifted here rather than left to inherit, because the demo gate's failure
     messages ("this code is not valid for that email address") are exactly the
     text a stuck customer has to be able to read. --gold already passes at
     6.8:1 and is left alone. */
  --danger:       #e0776c;   /* 5.4:1 on --surface, 6.0:1 on --bg */
  --info:         #7fb3d9;   /* 7.2:1 on --surface, 7.9:1 on --bg */

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:  0 4px 14px rgba(0, 0, 0, .45);
  --shadow-lg:  0 18px 44px -12px rgba(0, 0, 0, .6);
  --shadow-xl:  0 40px 80px -24px rgba(0, 0, 0, .7);
}

/* ---------- 2. Reset / base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Do NOT add `overflow-x` to <html> to chase a sideways-scroll reading: the
   `overflow-x: hidden` on body above already propagates to the viewport and
   blocks the drag (verified with a wheel event, not just scrollTo, which moves
   a `hidden` viewport programmatically and reads as a false positive). Setting
   it on <html> makes the header stop sticking. A wide table inside
   .table-scroll inflates documentElement.scrollWidth without being reachable —
   that number is a measurement artefact, not a bug to fix. */

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5 {
  line-height: 1.15;
  letter-spacing: -.022em;
  font-weight: 700;
  text-wrap: balance;
}
/* Display headings are set in the serif; h3/h4 stay in the sans so component
   labels read as interface, not as editorial. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
}
h1 { font-size: clamp(2.5rem, 1.35rem + 4.1vw, 4.4rem); letter-spacing: -.028em; }
h2 { font-size: clamp(1.95rem, 1.25rem + 2.5vw, 3.1rem); letter-spacing: -.024em; }
h3 { font-size: clamp(1.18rem, 1.04rem + .58vw, 1.44rem); letter-spacing: -.018em; }
h4 { font-size: 1.06rem; letter-spacing: -.014em; }
p  { text-wrap: pretty; }

/* The serif needs a touch more optical weight on dark grounds */
.hero h1, .page-hero h1, .section-ink h2, .cta-band h2 { font-weight: 600; }

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-hover); }

code, kbd, pre, .mono { font-family: var(--mono); font-size: .875em; }
code:not(pre code) {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: .12em .42em;
  color: var(--accent);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* A SHA-256 is 64 unbroken characters. Let it wrap anywhere and set it a
   little smaller so a checksum cell stays a cell rather than a column. */
.hash { font-size: .78em; letter-spacing: .01em; line-height: 1.5; word-break: break-all; }
kbd {
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-bottom-width: 2px; border-radius: var(--r-xs);
  padding: .1em .45em; font-size: .82em; color: var(--text);
}
pre {
  background: var(--brand-900);
  color: #d9e6dd;
  border: 1px solid var(--brand-800);
  border-radius: var(--r-md);
  padding: 18px 20px;
  max-width: 100%;
  overflow-x: auto;
  font-size: .86rem;
  line-height: 1.7;
  box-shadow: var(--shadow-sm);
}
pre code { background: none; border: 0; padding: 0; color: inherit; white-space: pre; }
pre .c { color: #7f9c8a; }        /* comment */
pre .k { color: var(--brand-300); }/* keyword */
pre .s { color: var(--gold-soft); }/* string */

hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding: clamp(64px, 8vw, 112px) 0; }
.section-sm { padding: clamp(44px, 5vw, 68px) 0; }
.section-alt { background: var(--bg-alt); }
.section-sunken { background: var(--bg-sunken); }
.section-ink { background: var(--brand-900); color: #dfe9e3; }
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4 { color: #fff; }
.section-ink .lead, .section-ink p { color: #b9cbc0; }
.section-line { border-top: 1px solid var(--line); }

.grid { display: grid; gap: 24px; }
/* A grid item keeps min-width:auto by default, so a card holding a <pre> or a
   long path lays out at its min-content width and spills out of its track no
   matter how the track is sized. Constrain the items, not only the tracks. */
.grid > *, .split > *, .split-wide > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split-wide { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.wrapflex { flex-wrap: wrap; }

@media (max-width: 900px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .wrap { padding-inline: 18px; }
}

/* ---------- 4. Typography helpers --------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .55;
}
.eyebrow.no-rule::before { display: none; }

.lead { font-size: clamp(1.03rem, .98rem + .3vw, 1.19rem); color: var(--text-soft); line-height: 1.72; }
.small { font-size: .875rem; }
.tiny  { font-size: .78rem; }
.muted { color: var(--text-soft); }
.faint { color: var(--text-faint); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-40{margin-bottom:40px}
.maxw-60 { max-width: 60ch; } .maxw-70 { max-width: 70ch; }

.section-head { max-width: 62ch; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head.center { margin-inline: auto; }

.grad-text {
  background: linear-gradient(115deg, var(--brand-400), var(--brand-300) 45%, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 25px;
  font-size: .95rem; font-weight: 600; letter-spacing: -.006em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-full);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap; text-align: center;
}
/* A light sweep that crosses the face on hover — reads as a physical surface
   catching the light rather than a rectangle changing colour. */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .62s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover {
  --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn:active { transform: translateY(0) scale(.988); box-shadow: var(--shadow-sm); }
.btn svg { width: 18px; height: 18px; flex: none; }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); box-shadow: none; }
.btn-ghost:hover { --btn-bg: var(--surface-2); --btn-fg: var(--text); --btn-bd: var(--accent); }

.btn-light { --btn-bg: #fff; --btn-fg: var(--brand-700); --btn-bd: #fff; }
.btn-light:hover { --btn-bg: var(--brand-50); --btn-fg: var(--brand-800); --btn-bd: var(--brand-50); }

.btn-outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.3); box-shadow: none; }
.btn-outline-light:hover { --btn-bg: rgba(255,255,255,.1); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); }

.btn-gold { --btn-bg: var(--gold); --btn-fg: #241d08; --btn-bd: var(--gold); }
.btn-gold:hover { --btn-bg: #d9b45c; --btn-fg: #241d08; --btn-bd: #d9b45c; }

.btn-lg { padding: 16px 32px; font-size: 1.02rem; }
.btn-sm { padding: 9px 17px; font-size: .855rem; }
.btn-block { display: flex; width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .93rem; }
.link-arrow::after { content: "→"; transition: transform var(--t-fast); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 6. Badges / pills ------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand-600);
  border: 1px solid var(--brand-100);
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
}
:root[data-theme="dark"] .badge { background: rgba(132,180,150,.1); color: var(--brand-200); border-color: rgba(132,180,150,.2); }
.badge-gold { background: color-mix(in srgb, var(--gold) 14%, transparent); color: #7a5f16; border-color: color-mix(in srgb, var(--gold) 32%, transparent); }
:root[data-theme="dark"] .badge-gold { color: var(--gold-soft); }
.badge-glass { background: rgba(255,255,255,.09); color: #dcece3; border-color: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.badge-dot::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .74rem; font-weight: 600; color: var(--text-soft);
}

/* ---------- 7. Cards ----------------------------------------------------- */
.card {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 60%, var(--surface)), var(--surface) 42%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px;
  color: var(--text);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
:root[data-theme="dark"] .card { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .045); }
/* Anchor cards: the arrow link is the affordance, so hovering the card must not
   recolour its text the way a bare <a> would. */
a.card:hover { color: var(--text); }
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), var(--glow);
  border-color: transparent;
}
.card-flat { box-shadow: none; }
.card-pad-sm { padding: 20px; }
.card-glass {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #dfe9e3;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-soft); font-size: .945rem; }

.icon-box {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 20px;
  background: linear-gradient(150deg, var(--brand-400), var(--brand-600) 55%, var(--brand-700));
  color: #fff;
  box-shadow:
    0 8px 18px -8px color-mix(in srgb, var(--brand-500) 70%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.icon-box svg { width: 22px; height: 22px; stroke-width: 1.9; }
.icon-box-soft { background: var(--brand-50); color: var(--brand-600); box-shadow: none; border: 1px solid var(--brand-100); }
:root[data-theme="dark"] .icon-box-soft { background: rgba(132,180,150,.12); color: var(--brand-200); border-color: rgba(132,180,150,.2); }
.icon-box-gold { background: linear-gradient(150deg, var(--gold), #a5822f); }
.icon-box-lg { width: 56px; height: 56px; }
.icon-box-lg svg { width: 27px; height: 27px; }

/* Feature list card with a top accent line */
.card-accent { position: relative; overflow: hidden; }
.card-accent::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-400), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.card-accent:hover::before { transform: scaleX(1); }

/* ---------- 8. Stats ----------------------------------------------------- */
.stat { text-align: center; padding: 8px 4px; }
.stat-num {
  font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.7rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.section-ink .stat-num { color: var(--brand-300); }
.stat-label { font-size: .81rem; color: var(--text-soft); margin-top: 6px; font-weight: 500; }
.section-ink .stat-label { color: #9db3a6; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px; }

/* ---------- 9. Lists ----------------------------------------------------- */
.checklist { list-style: none; padding: 0; display: grid; gap: 13px; }
.checklist li { position: relative; padding-left: 32px; color: var(--text-soft); line-height: 1.6; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .32em;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f6b54' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
  border: 1px solid var(--brand-100);
}
.checklist strong { color: var(--text); font-weight: 600; }
.section-ink .checklist li { color: #b9cbc0; }
.section-ink .checklist strong { color: #fff; }
/* The default tick is dark green — invisible on a dark ground, so redraw it in
   the light brand tint. */
.section-ink .checklist li::before,
.hero .checklist li::before,
.cta-band .checklist li::before {
  background-color: rgba(132, 180, 150, .18);
  border-color: rgba(132, 180, 150, .34);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe7d9' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .checklist li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adcdb9' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-color: rgba(132, 180, 150, .14);
  border-color: rgba(132, 180, 150, .28);
}

.crosslist { list-style: none; padding: 0; display: grid; gap: 13px; }
.crosslist li { position: relative; padding-left: 32px; color: var(--text-soft); }
.crosslist li::before {
  content: ""; position: absolute; left: 0; top: .32em;
  width: 19px; height: 19px; border-radius: 50%;
  background: color-mix(in srgb, var(--danger) 12%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4453c' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/10px no-repeat;
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}

.numlist { list-style: none; padding: 0; counter-reset: n; display: grid; gap: 26px; }
.numlist li { position: relative; padding-left: 56px; counter-increment: n; }
.numlist li::before {
  content: counter(n); position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  font-weight: 700; font-size: .95rem; color: var(--accent);
}
.numlist h4, .numlist h3 { margin-bottom: 5px; font-size: 1.06rem; letter-spacing: -.014em; }
.numlist p { color: var(--text-soft); font-size: .94rem; }

/* ---------- 10. Tables --------------------------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
table.tbl th, table.tbl td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
table.tbl thead th {
  background: var(--surface-2); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-soft); font-weight: 700;
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .86rem; }
.yes { color: var(--brand-500); font-weight: 700; }
.no  { color: var(--text-faint); }

/* ---------- 10b. Trial bar ------------------------------------------------
   Sits above the sticky header and scrolls away with the page, so the header
   still pins to the top edge. Ships visible: without JS there is simply no
   dismiss button, never a bar that cannot be read. */
.promo-bar {
  background: linear-gradient(90deg, var(--brand-800), var(--brand-700) 55%, var(--brand-800));
  color: #e7f0ea;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-size: .875rem;
}
.promo-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 8px 18px; flex-wrap: wrap;
  min-height: 44px; padding-block: 7px;
  text-align: center;
}
.promo-text { margin: 0; color: #cfe0d5; }
.promo-text strong { color: #fff; font-weight: 600; }
.promo-tag {
  display: inline-block; margin-inline-end: 10px;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  color: var(--gold-soft);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  white-space: nowrap;
}
.promo-link {
  color: #fff; font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  padding-bottom: 1px;
}
.promo-link:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }
.promo-close {
  position: absolute; inset-inline-end: 10px;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-xs);
  background: none; border: 0; color: #9db3a6;
}
.promo-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.promo-close svg { width: 15px; height: 15px; }
.promo-inner { position: relative; }
html:not(.js) .promo-close { display: none; }
@media (max-width: 620px) {
  .promo-bar { font-size: .82rem; }
  .promo-inner { padding-inline-end: 40px; }
  .promo-tag { margin-inline-end: 8px; }
  /* Three stacked lines above the header is a wall, not an offer. The offer
     itself and the link survive; the delivery detail waits for the page. */
  .promo-more { display: none; }
}
@media print { .promo-bar { display: none !important; } }

/* ---------- 11. Header / nav --------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); font-weight: 700; letter-spacing: -.02em; font-size: 1.06rem; }
.brand:hover { color: var(--text); }
.brand-mark { width: 34px; height: 34px; flex: none; border-radius: 10px; box-shadow: var(--shadow-sm); }
.brand-sub { font-size: .62rem; font-weight: 700; letter-spacing: .16em; color: var(--text-faint); text-transform: uppercase; display: block; line-height: 1; margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 14px; border-radius: var(--r-full);
  font-size: .915rem; font-weight: 500; color: var(--text-soft);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a.active { color: var(--accent); font-weight: 600; }
/* The nav carries its own CTA for the mobile drawer; on desktop the one in
   .header-actions is the visible copy, so hide this one to avoid a duplicate. */
.nav > .btn { display: none; }

.nav-item { position: relative; }
.nav-dropdown-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border: none; border-radius: var(--r-full);
  background: none; font: inherit;
  font-size: .915rem; font-weight: 500; color: var(--text-soft);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-dropdown-toggle:hover, .nav-item.open .nav-dropdown-toggle { color: var(--text); background: var(--surface-2); }
.nav-caret { width: 13px; height: 13px; transition: transform var(--t-fast); }
.nav-item.open .nav-caret { transform: rotate(180deg); }

.nav-dropdown-panel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 240px; padding: 8px; border-radius: var(--r-md);
  background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  z-index: 60;
}
.nav-item.open .nav-dropdown-panel { display: block; animation: slideDown .16s var(--ease); }
.nav-dropdown-panel a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: .89rem; font-weight: 500; color: var(--text-soft);
}
.nav-dropdown-panel a:hover { color: var(--text); background: var(--surface-2); }

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

.theme-toggle {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: transparent; color: var(--text-soft);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-2); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .i-sun  { display: none; }

.burger {
  display: none; width: 40px; height: 40px; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: transparent; color: var(--text);
}
.burger svg { width: 19px; height: 19px; }

@media (max-width: 1000px) {
  /* Hide the nav only when JS is there to run the drawer; without JS the
     plain link row stays reachable and the dead burger disappears. */
  .js .nav, .header-actions .btn { display: none; }
  .burger { display: grid; }
  html:not(.js) .burger { display: none; }
  /* Comfortable 44px touch targets for the two icon buttons */
  .theme-toggle, .burger { width: 44px; height: 44px; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 14px 18px 22px; box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    animation: slideDown .22s var(--ease);
  }
  .nav.open a { padding: 12px 14px; font-size: 1rem; border-radius: var(--r-sm); }
  .nav.open .btn { display: flex; margin-top: 12px; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 12px 14px; font-size: 1rem; border-radius: var(--r-sm); }
  .nav-dropdown-panel {
    position: static; display: none; min-width: 0; margin-top: 2px; padding: 0 0 4px 14px;
    background: transparent; border: none; box-shadow: none;
  }
  .nav-item.open .nav-dropdown-panel { display: block; animation: none; }
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- 12. Hero ----------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, var(--brand-900) 0%, #17281e 45%, var(--brand-800) 100%);
  color: #e6efe9;
  padding: clamp(64px, 8vw, 108px) 0 clamp(72px, 9vw, 128px);
}
.hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 130%;
  background:
    radial-gradient(42% 48% at 18% 8%, rgba(92, 155, 116, .40), transparent 66%),
    radial-gradient(38% 42% at 84% 2%, rgba(200, 163, 74, .20), transparent 64%),
    radial-gradient(52% 40% at 62% 68%, rgba(64, 120, 90, .26), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(75% 60% at 50% 30%, #000 20%, transparent 78%);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero .lead { color: #b6cabe; max-width: 56ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: .855rem; color: #92a99b; }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 15px; height: 15px; color: var(--brand-300); }

/* Page hero (interior pages) */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--brand-900), var(--brand-800));
  color: #e6efe9; padding: clamp(56px, 7vw, 88px) 0 clamp(52px, 6vw, 76px);
  text-align: center;
}
.page-hero::before {
  content: ""; position: absolute; inset: -50% -20% auto -20%; height: 150%;
  background:
    radial-gradient(38% 46% at 50% 0%, rgba(92, 155, 116, .38), transparent 68%),
    radial-gradient(30% 34% at 82% 14%, rgba(200, 163, 74, .13), transparent 66%);
  pointer-events: none;
}
/* A hairline that catches the light where a dark band meets the page.
   NOTE: .hero::after is already the grid overlay, so the hero is excluded. */
.page-hero::after,
.section-ink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 163, 74, .45), rgba(132, 180, 150, .35), transparent);
  pointer-events: none; z-index: 2;
}
.section-ink { position: relative; }
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: #b6cabe; max-width: 62ch; margin-inline: auto; margin-top: 18px; }
.page-hero .eyebrow { color: var(--brand-300); }

.breadcrumbs { font-size: .82rem; color: #8fa89a; margin-bottom: 14px; }
.breadcrumbs a { color: #b9cfc2; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs span { opacity: .5; margin: 0 7px; }

/* ---------- 13. App mockup (pure CSS/SVG UI illustration) ---------------- */
.mock {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .1);
  overflow: hidden;
  transform: perspective(1600px) rotateY(-1.6deg) rotateX(.8deg);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.mock:hover { transform: perspective(1600px) rotateY(0) rotateX(0) translateY(-4px); }
/* A soft screen reflection across the top-left corner */
.mock::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(128deg, rgba(255, 255, 255, .11) 0%, transparent 34%);
}
@media (prefers-reduced-motion: reduce) {
  .mock, .mock:hover { transform: none; }
}
@media (max-width: 900px) { .mock { transform: none; } }
.mock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; background: var(--brand-900); border-bottom: 1px solid rgba(255,255,255,.07);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.mock-dot:nth-child(1) { background: #e0655d; }
.mock-dot:nth-child(2) { background: #e0b45d; }
.mock-dot:nth-child(3) { background: #5fbf7f; }
.mock-title { margin-left: 12px; font-size: .76rem; color: #8fa89a; font-weight: 500; letter-spacing: .01em; }
.mock-body { display: grid; grid-template-columns: 176px 1fr; min-height: 300px; background: var(--bg-alt); }
.mock-side { background: var(--brand-800); padding: 14px 10px; display: grid; gap: 3px; align-content: start; }
.mock-side .mg { font-size: .58rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.34); padding: 10px 10px 4px; font-weight: 700; }
.mock-side .mi {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--r-sm);
  font-size: .74rem; color: rgba(255,255,255,.62);
}
.mock-side .mi i { width: 13px; height: 13px; border-radius: 3px; background: rgba(255,255,255,.2); flex: none; }
.mock-side .mi.on { background: rgba(255,255,255,.1); color: #fff; }
.mock-side .mi.on i { background: var(--brand-300); }
.mock-main { padding: 18px; display: grid; gap: 14px; align-content: start; }
.mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mock-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; }
.mock-kpi b { display: block; font-size: .95rem; color: var(--text); font-variant-numeric: tabular-nums; }
.mock-kpi span { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-weight: 700; }
.mock-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px; }
.mock-chart { display: flex; align-items: flex-end; gap: 7px; height: 92px; }
.mock-chart i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--brand-400), var(--brand-600)); opacity: .9; }
.mock-rows { display: grid; gap: 7px; }
.mock-row { display: grid; grid-template-columns: 1fr 62px 52px; gap: 10px; align-items: center; }
.mock-row i { height: 8px; border-radius: 4px; background: var(--line); display: block; }
.mock-row i:nth-child(2) { background: var(--line-strong); }
@media (max-width: 620px) {
  .mock-body { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .mock-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Floor-plan mockup (restaurant tables) */
.floor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.floor .t {
  aspect-ratio: 1; border-radius: var(--r-md); display: grid; place-content: center; gap: 3px;
  border: 1px solid var(--line); background: var(--surface); text-align: center;
  font-size: .72rem; font-weight: 600; color: var(--text-soft);
}
.floor .t b { font-size: .9rem; color: var(--text); }
.floor .t.busy { background: color-mix(in srgb, var(--brand-500) 12%, var(--surface)); border-color: var(--brand-300); color: var(--brand-600); }
.floor .t.busy b { color: var(--brand-600); }
.floor .t.bill { background: color-mix(in srgb, var(--gold) 15%, var(--surface)); border-color: var(--gold); color: #8a6d1e; }
.floor .t.bill b { color: #8a6d1e; }
/* The status colours above are picked for the light surface; on the dark
   surface they sink below readability, so re-light them like the badges. */
:root[data-theme="dark"] .floor .t.busy,
:root[data-theme="dark"] .floor .t.busy b { color: var(--brand-200); }
:root[data-theme="dark"] .floor .t.bill,
:root[data-theme="dark"] .floor .t.bill b { color: var(--gold-soft); }
@media (max-width: 620px) { .floor { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 14. Accordion (FAQ) ------------------------------------------ */
.acc { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.acc + .acc { margin-top: 12px; }
.acc summary {
  list-style: none; cursor: pointer; padding: 19px 54px 19px 22px; position: relative;
  font-weight: 600; font-size: 1rem; color: var(--text);
  transition: background var(--t-fast), color var(--t-fast);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--surface-2); color: var(--accent); }
.acc summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg); transition: transform var(--t), border-color var(--t-fast);
}
.acc[open] summary::after { transform: rotate(-135deg); border-color: var(--accent); }
.acc[open] summary { color: var(--accent); }
.acc-body { padding: 0 22px 22px; color: var(--text-soft); font-size: .95rem; line-height: 1.72; }
.acc-body p + p { margin-top: 12px; }
.acc-body ul { margin: 10px 0 0; padding-left: 20px; }
.acc-body li { margin-bottom: 6px; }

/* ---------- 15. Pricing -------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 980px) { .price-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.price-card {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 65%, var(--surface)), var(--surface) 40%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 34px 30px; position: relative;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), var(--glow); border-color: transparent; }
/* The featured tier gets a true gradient hairline, drawn as a masked ring so
   the card keeps its own background. */
.price-card.featured {
  border-color: transparent;
  box-shadow: var(--shadow-lg), 0 24px 60px -24px color-mix(in srgb, var(--brand-500) 45%, transparent);
}
.price-card.featured::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(160deg, var(--gold), var(--brand-400) 42%, var(--brand-600) 78%, var(--gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1;
}
.price-card.featured::before {
  content: "Most popular"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--on-accent); font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: 5px 16px; border-radius: var(--r-full);
  white-space: nowrap; box-shadow: var(--shadow-md);
  /* Must sit above .featured::after, the gradient ring, which is drawn at the
     card's top edge and would otherwise strike straight through this label. */
  z-index: 2;
}
.price-name { font-size: 1.12rem; font-weight: 700; }
.price-desc { font-size: .88rem; color: var(--text-soft); margin-top: 5px; min-height: 42px; }
.price-amt { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 4px; }
.price-amt .cur { font-size: 1.05rem; font-weight: 600; color: var(--text-soft); }
.price-amt .val { font-size: 2.6rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.price-amt .per { font-size: .85rem; color: var(--text-faint); }
.price-note { font-size: .78rem; color: var(--text-faint); }
.price-card .checklist { margin: 24px 0 28px; font-size: .9rem; }
.price-card .checklist li { padding-left: 29px; }
.price-card .btn { margin-top: auto; }

/* ---------- 16. Forms ---------------------------------------------------- */
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: .855rem; font-weight: 600; color: var(--text); }
.field label .req { color: var(--danger); }
.field .hint { font-size: .78rem; color: var(--text-faint); }
.input, .textarea, .select {
  width: 100%; padding: 12px 15px;
  background: var(--surface); color: var(--text);
  /* Not --line-strong: the border is the field's only boundary, so it needs
     the 3:1 non-text contrast the hairline tokens don't reach. */
  border: 1px solid #8a978f; border-radius: var(--r-sm);
  font-size: .95rem; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .textarea,
:root[data-theme="dark"] .select { border-color: #627569; }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a978f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px; padding-right: 40px;
}
[dir="rtl"] .select { background-position: left 13px center; padding-right: 15px; padding-left: 40px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: .8rem; color: var(--text-faint); margin-top: 14px; line-height: 1.6; }
.form-status { display: none; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); font-size: .9rem; }
.form-status.ok { display: block; background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); }
.form-status.err { display: block; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); }

/* ---------- 17. CTA band ------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(140deg, var(--brand-700), var(--brand-900));
  color: #fff; border-radius: var(--r-xl);
  padding: clamp(44px, 6vw, 72px) clamp(24px, 5vw, 64px);
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%;
  background: radial-gradient(50% 50% at 50% 100%, rgba(200,163,74,.22), transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #bcd0c4; max-width: 58ch; margin: 16px auto 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* ---------- 18. Footer --------------------------------------------------- */
.site-footer { background: var(--brand-900); color: #a9bfb2; padding: 64px 0 32px; font-size: .9rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px 28px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }
.site-footer .brand { color: #fff; }
.site-footer .brand:hover { color: #fff; }
.footer-about { color: #8ea79a; font-size: .875rem; margin-top: 14px; max-width: 34ch; line-height: 1.7; }
.footer-col h5, .footer-col h2 { font-family: var(--font); color: #fff; font-size: .78rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 16px; font-weight: 700; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: #a9bfb2; font-size: .885rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.09);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center;
  color: #7e9589; font-size: .82rem;
}
.footer-bottom a { color: #7e9589; }
.footer-bottom a:hover { color: #fff; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ---------- 19. Misc components ----------------------------------------- */
.note {
  border-left: 3px solid var(--accent); background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 16px 20px;
  font-size: .92rem; color: var(--text-soft); line-height: 1.7;
}
.note strong { color: var(--text); }
.note-warn { border-left-color: var(--gold); }
.note-danger { border-left-color: var(--danger); }

.kbdrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.kbdrow:last-child { border-bottom: 0; }

.logo-strip { display: flex; flex-wrap: wrap; gap: 12px 34px; align-items: center; justify-content: center; opacity: .85; }
.logo-strip span { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--text-faint); text-transform: uppercase; }

.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding-bottom: 30px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -30px; top: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--surface); border: 3px solid var(--accent);
}
.timeline-item h4, .timeline-item h3 { margin-bottom: 4px; font-size: 1.06rem; letter-spacing: -.014em; }
.timeline-item p { color: var(--text-soft); font-size: .93rem; }

.dl { display: grid; gap: 0; }
.dl-row { display: grid; grid-template-columns: 230px 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.dl-row:last-child { border-bottom: 0; }
.dl-row dt { font-weight: 600; font-size: .93rem; }
.dl-row dd { margin: 0; color: var(--text-soft); font-size: .93rem; }
@media (max-width: 620px) { .dl-row { grid-template-columns: 1fr; gap: 4px; } }

.toc { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 24px; }
.toc h4, .toc .toc-title { font-family: var(--font); font-size: .78rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); margin-bottom: 14px; }
.toc ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.toc a { font-size: .9rem; color: var(--text-soft); font-weight: 500; }
.toc a:hover { color: var(--accent); }

.legal h2 { font-size: 1.45rem; margin: 44px 0 14px; }
.legal h3 { font-size: 1.1rem; margin: 28px 0 10px; }
.legal p, .legal li { color: var(--text-soft); font-size: .96rem; line-height: 1.78; }
.legal p { margin-bottom: 14px; }
.legal ul, .legal ol { padding-left: 24px; margin-bottom: 16px; display: grid; gap: 8px; }
.legal > *:first-child { margin-top: 0; }

/* Docs layout — minmax(0, …) so the content column can shrink below its
   min-content width; the .table-scroll wrappers then scroll internally. */
.docs-layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 940px) { .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.docs-nav { position: sticky; top: calc(var(--header-h) + 24px); }
.docs-nav h5, .docs-nav .docs-nav-title { font-family: var(--font); font-size: .72rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); margin: 22px 0 10px; font-weight: 700; }
.docs-nav h5:first-child, .docs-nav .docs-nav-title:first-child,
details.docs-nav-details > summary + h5,
details.docs-nav-details > summary + .docs-nav-title { margin-top: 0; }
/* Mobile docs-TOC disclosure. The sidebar ships as
   <details class="docs-nav-details" open>: on phones the summary is a tappable
   row that collapses the long link list; from 941px up the summary disappears
   and, because the element ships open, the list is simply always visible. */
details.docs-nav-details > summary {
  list-style: none; cursor: pointer;
  padding: 12px 16px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
  font-weight: 600; font-size: .92rem; color: var(--text);
}
details.docs-nav-details > summary::-webkit-details-marker { display: none; }
@media (min-width: 941px) {
  details.docs-nav-details { display: block; }
  details.docs-nav-details > summary { display: none; }
}
.docs-nav ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.docs-nav a { display: block; padding: 6px 12px; border-radius: var(--r-xs); font-size: .885rem; color: var(--text-soft); border-left: 2px solid transparent; }
.docs-nav a:hover { color: var(--accent); background: var(--surface-2); }
.docs-nav a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; background: var(--surface-2); }
@media (max-width: 940px) { .docs-nav { position: static; } }
.docs-body h2 { font-size: 1.6rem; margin: 52px 0 16px; scroll-margin-top: calc(var(--header-h) + 20px); }
.docs-body h2:first-child { margin-top: 0; }
.docs-body h3 { font-size: 1.12rem; margin: 30px 0 10px; }
.docs-body p { color: var(--text-soft); margin-bottom: 14px; line-height: 1.78; }
.docs-body ul, .docs-body ol { color: var(--text-soft); padding-left: 24px; margin-bottom: 16px; display: grid; gap: 8px; line-height: 1.7; }
.docs-body pre { margin-bottom: 18px; }
.docs-body .note { margin-bottom: 18px; }

/* ---------- 20. Reveal on scroll ---------------------------------------- */
/* Scoped to .js (set by the pre-paint snippet in each <head>) so that with
   JavaScript disabled or broken the content is simply visible, never blank. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .07s; }
.reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; }
.reveal-d4 { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- 21. Utility -------------------------------------------------- */
.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;
}
.skip-link {
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 18px; border-radius: var(--r-sm); font-weight: 600; font-size: .9rem;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; color: var(--on-accent); }
.no-scroll { overflow: hidden; }

/* ---------- 22. RTL / Arabic -------------------------------------------- */
[dir="rtl"] { text-align: right; }
/* The Latin display serif has no Arabic coverage, so an RTL heading would fall
   back glyph-by-glyph to whatever the OS happens to offer. Name the good Arabic
   faces explicitly and end at the body sans, so it is the same everywhere.
   .stat-num and .price-amt keep the Latin serif — those are always digits. */
[dir="rtl"] h1,
[dir="rtl"] h2 {
  font-family: "Sakkal Majalla", "Noto Naskh Arabic", "Traditional Arabic",
               "Geeza Pro", "Segoe UI", var(--font);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}
[dir="rtl"] .eyebrow::before { transform: scaleX(-1); }
[dir="rtl"] .checklist li, [dir="rtl"] .crosslist li { padding-left: 0; padding-right: 32px; }
[dir="rtl"] .checklist li::before, [dir="rtl"] .crosslist li::before { left: auto; right: 0; }
[dir="rtl"] .numlist li { padding-left: 0; padding-right: 56px; }
[dir="rtl"] .numlist li::before { left: auto; right: 0; }
[dir="rtl"] .link-arrow::after { content: "←"; }
[dir="rtl"] .link-arrow:hover::after { transform: translateX(-4px); }
[dir="rtl"] table.tbl th, [dir="rtl"] table.tbl td { text-align: right; }
[dir="rtl"] table.tbl td.num { text-align: left; }
[dir="rtl"] .acc summary { padding: 19px 22px 19px 54px; }
[dir="rtl"] .acc summary::after { right: auto; left: 22px; }
[dir="rtl"] .note { border-left: 0; border-right: 3px solid var(--accent); border-radius: var(--r-sm) 0 0 var(--r-sm); }
[dir="rtl"] .note-warn { border-right-color: var(--gold); }
[dir="rtl"] .note-danger { border-right-color: var(--danger); }
[dir="rtl"] .timeline { padding-left: 0; padding-right: 30px; }
[dir="rtl"] .timeline::before { left: auto; right: 7px; }
[dir="rtl"] .timeline-item::before { left: auto; right: -30px; }
[dir="rtl"] .docs-nav a { border-left: 0; border-right: 2px solid transparent; }
[dir="rtl"] .docs-nav a.active { border-right-color: var(--accent); }
[dir="rtl"] .legal ul, [dir="rtl"] .legal ol,
[dir="rtl"] .docs-body ul, [dir="rtl"] .docs-body ol { padding-left: 0; padding-right: 24px; }
/* Code and paths are Latin: isolate them LTR so bidi-neutral edges
   (%, ~, ., /, \) don't detach to the wrong visual end of the snippet. */
[dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .mono { direction: ltr; unicode-bidi: isolate; }

/* ---------- 23. Dark-band overrides -------------------------------------
   Anything placed inside .section-ink (or .hero / .cta-band) sits on a very
   dark background. Component defaults resolve to --text-soft, which is a dark
   grey in the light theme — unreadable there. These rules re-light the parts
   that would otherwise disappear, so pages can drop any component into a dark
   band without adding CSS of their own.
   ------------------------------------------------------------------------ */
/* A plain .card keeps its light --surface, which would strand the light text
   below on a white panel. Give any card on a dark band the glass surface. */
.section-ink .card:not(.card-glass),
.section-ink .price-card {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.section-ink .card:not(.card-glass):hover,
.section-ink .price-card:hover { border-color: rgba(255, 255, 255, .24); }
.section-ink .icon-box-soft {
  background: rgba(132, 180, 150, .14);
  border-color: rgba(132, 180, 150, .24);
  color: var(--brand-200);
}

.section-ink .card p,
.section-ink .card li,
.section-ink .card-glass p,
.section-ink .card-glass li,
.section-ink .dl-row dd,
.section-ink .acc-body,
.section-ink .timeline-item p,
.section-ink .numlist p,
.hero .card-glass p,
.hero .card-glass li,
.cta-band .card-glass p { color: #b9cbc0; }

.section-ink .card-glass h3,
.section-ink .card-glass h4,
.section-ink .dl-row dt,
.section-ink .timeline-item h4,
.section-ink .timeline-item h3,
.section-ink .numlist h4,
.section-ink .numlist h3 { color: #fff; }

.section-ink .small,
.section-ink .tiny,
.section-ink .muted,
.section-ink .faint,
.section-ink .price-note { color: #9db3a6; }

.section-ink code:not(pre code) {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: var(--brand-200);
}

.section-ink .tag {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #cfe0d5;
}

.section-ink .dl-row,
.section-ink .kbdrow,
.section-ink .timeline::before { border-color: rgba(255, 255, 255, .12); }

.section-ink .numlist li::before,
.section-ink .timeline-item::before {
  background: rgba(255, 255, 255, .08);
  border-color: var(--brand-300);
  color: var(--brand-200);
}

.section-ink .note {
  background: rgba(255, 255, 255, .06);
  border-left-color: var(--brand-300);
  color: #b9cbc0;
}
.section-ink .note strong { color: #fff; }
.section-ink .note-warn { border-left-color: var(--gold); }
[dir="rtl"] .section-ink .note { border-left: 0; border-right-color: var(--brand-300); }

.section-ink .eyebrow { color: var(--brand-300); }
.section-ink a:not(.btn):not(.brand) { color: var(--brand-200); }
.section-ink a:not(.btn):not(.brand):hover { color: #fff; }

/* Tables and accordions read on the dark band too */
.section-ink .table-scroll,
.section-ink .acc { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .13); }
.section-ink table.tbl th,
.section-ink table.tbl td { border-bottom-color: rgba(255, 255, 255, .1); color: #cfe0d5; }
.section-ink table.tbl thead th { background: rgba(255, 255, 255, .06); color: #9db3a6; }
.section-ink table.tbl tbody tr:hover { background: rgba(255, 255, 255, .05); }
.section-ink .acc summary { color: #fff; }
.section-ink .acc summary:hover { background: rgba(255, 255, 255, .06); color: var(--brand-200); }
.section-ink .no { color: #7e9589; }
.section-ink .yes { color: var(--brand-300); }

/* ---------- 24. Premium finish ------------------------------------------
   The details that separate "clean" from "considered": film grain on dark
   grounds, a branded scrollbar, softer focus rings, optical type refinements
   and entrance motion on the hero.
   ------------------------------------------------------------------------ */

/* --- Film grain on every dark surface ---
   The grain must be composited *with* each surface's existing paint, so every
   rule below restates that surface's gradient as a second background layer.
   Replacing background-image alone would silently delete the gradient. */
.hero {
  background-image:
    var(--grain),
    linear-gradient(168deg, var(--brand-900) 0%, #17281e 45%, var(--brand-800) 100%);
  background-size: 140px 140px, auto;
  background-blend-mode: overlay, normal;
}
.page-hero {
  background-image:
    var(--grain),
    linear-gradient(160deg, var(--brand-900), var(--brand-800));
  background-size: 140px 140px, auto;
  background-blend-mode: overlay, normal;
}
.cta-band {
  background-image:
    var(--grain),
    linear-gradient(140deg, var(--brand-700), var(--brand-900));
  background-size: 140px 140px, auto;
  background-blend-mode: overlay, normal;
}
/* These two paint a flat colour, so the grain can simply sit on top of it. */
.section-ink, .site-footer {
  background-image: var(--grain);
  background-size: 140px 140px;
  background-blend-mode: overlay;
}
/* Deliberately no grain on glass panels — at this size the noise reads as a
   rendering fault rather than a material, and it greys out the tint. */
.card-glass {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035));
}
/* Keep content above the grain and the ambient gradients */
.section-ink > .wrap, .site-footer > .wrap { position: relative; z-index: 1; }

/* --- Branded scrollbar --- */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: var(--r-full);
  border: 3px solid var(--bg); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-400); background-clip: padding-box; }

/* --- Softer, branded focus --- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
  box-shadow: 0 0 0 6px var(--ring);
}

/* --- Optical type refinements --- */
.stat-num, .price-amt .val, .mock-kpi b, table.tbl td.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.stat-num, .price-amt .val { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; }
.lead { letter-spacing: -.004em; }
.eyebrow { font-size: .72rem; letter-spacing: .16em; }
.eyebrow::before { width: 26px; background: linear-gradient(90deg, var(--gold), currentColor); opacity: .9; }

/* Drop cap-ish emphasis for the opening lead of a page hero */
.page-hero .lead, .hero .lead { font-size: clamp(1.06rem, .98rem + .42vw, 1.28rem); }

/* --- Badges and tags get a little more material --- */
.badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
:root[data-theme="dark"] .badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.badge-glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }

/* --- Section head gets a hairline rule under the eyebrow on dark bands --- */
.cta-band {
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* --- Header refinement --- */
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(20, 34, 25, .35);
}
.brand-mark { transition: transform var(--t); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }
.nav a { position: relative; }
.nav a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--accent));
}

/* --- Table polish --- */
table.tbl tbody tr { transition: background var(--t-fast); }
.table-scroll { box-shadow: var(--shadow-sm); }

/* --- Accordion polish --- */
.acc { box-shadow: var(--shadow-sm); transition: box-shadow var(--t), border-color var(--t); }
.acc[open] { box-shadow: var(--shadow-md); border-color: var(--line-strong); }

/* --- Hero entrance ---
   The two heroes differ in structure (index nests its text column inside a
   .split; the Arabic hero puts the text straight into the .wrap), so the
   pieces are targeted by name rather than by position. Longhand, so the
   per-element delays below cascade regardless of selector weight. */
@keyframes riseIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.js .hero .wrap :is(.eyebrow, .badge, h1, .lead, .hero-cta, .hero-meta) {
  animation-name: riseIn;
  animation-duration: .78s;
  animation-timing-function: var(--ease);
  animation-fill-mode: both;
}
.js .hero .wrap h1 { animation-delay: .06s; }
.js .hero .wrap .lead { animation-delay: .12s; }
.js .hero .wrap .hero-cta { animation-delay: .18s; }
.js .hero .wrap .hero-meta { animation-delay: .24s; }
.js .page-hero > .wrap > * { animation: riseIn .78s var(--ease) both; }
.js .page-hero > .wrap > *:nth-child(2) { animation-delay: .06s; }
.js .page-hero > .wrap > *:nth-child(3) { animation-delay: .12s; }
.js .page-hero > .wrap > *:nth-child(4) { animation-delay: .18s; }
.js .page-hero > .wrap > *:nth-child(5) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .js .hero .wrap :is(.eyebrow, .badge, h1, .lead, .hero-cta, .hero-meta),
  .js .page-hero > .wrap > * { animation: none; }
}

/* --- Footer polish --- */
.site-footer { border-top: 1px solid rgba(200, 163, 74, .18); }
.footer-col a { transition: color var(--t-fast), padding-left var(--t-fast); }
.footer-col a:hover { padding-left: 4px; }
[dir="rtl"] .footer-col a:hover { padding-left: 0; padding-right: 4px; }

/* --- Selection --- */
::selection { background: color-mix(in srgb, var(--gold) 40%, transparent); color: inherit; }

/* Promo bar dismissed on an earlier page. Hidden before first paint by the
   inline snippet in <head>, so it cannot render and then be yanked out by
   deferred JS — which showed as a flash and a jump of the whole page. main.js
   removes the class again if this page is advertising a different offer. */
.promo-hidden .promo-bar { display: none; }

/* ---------- 24b. Live demo gate (demo.html) ------------------------------ */
/* The panel on demo.html that shows one of: start form, running countdown,
   blocked, licensed. Built from the existing tokens so it inherits both
   themes and needs no dark-mode duplication beyond the two rules below. */

.gate-split { align-items: start; }
.gate-col { position: sticky; top: 96px; }

.gate-card { padding: 30px 30px 26px; scroll-margin-top: 100px; }
.gate-card .field:last-of-type { margin-bottom: 20px; }

@keyframes gate-flash {
  0%, 100% { box-shadow: var(--shadow-md); }
  35%      { box-shadow: var(--shadow-md), 0 0 0 4px color-mix(in srgb, var(--danger) 30%, transparent); }
}
.gate-flash { animation: gate-flash 1.6s ease-in-out; }

.gate-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.gate-head h2 { font-size: 1.28rem; letter-spacing: -.02em; margin: 0; }
.gate-sub { font-size: .875rem; color: var(--text-soft); margin: 4px 0 0; overflow-wrap: anywhere; }

.gate-mark {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-700); color: var(--gold); font-size: 24px; line-height: 1;
}
.gate-mark-live { position: relative; }
.gate-mark-live::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-400); border: 2.5px solid var(--surface);
}
.gate-mark-stop { background: var(--danger); color: #fff; }
.gate-mark-ok   { background: var(--gold); color: #241d08; }

/* --- the running countdown --- */
.gate-count {
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px; margin-bottom: 20px; text-align: center;
}
.gate-count-val {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums;
}
.gate-count-label { font-size: .8rem; color: var(--text-faint); margin-top: 5px; }
.gate-count-warn .gate-count-val { color: var(--danger); }

.gate-bar {
  height: 6px; border-radius: var(--r-full); background: var(--line);
  margin-top: 14px; overflow: hidden;
}
.gate-bar > i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--accent); transition: width var(--t-slow);
}
.gate-bar-warn > i { background: var(--danger); }

.gate-blurb { font-size: .93rem; color: var(--text-soft); margin-bottom: 22px; }
.gate-blurb strong { color: var(--text); }
.gate-foot-note { font-size: .8rem; color: var(--text-faint); margin-top: 14px; line-height: 1.6; }
.gate-buy { display: grid; gap: 10px; }

/* --- consent checkbox --- */
.gate-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .855rem; color: var(--text-soft); margin: 0 0 20px; cursor: pointer;
}
.gate-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

/* --- disclosure for the activation form --- */
.gate-toggle {
  display: block; width: 100%; margin-top: 18px; padding-top: 16px;
  border: none; border-top: 1px solid var(--line); background: none;
  color: var(--text-soft); font: inherit; font-size: .855rem; font-weight: 600;
  text-align: center; cursor: pointer; transition: color var(--t-fast);
}
.gate-toggle:hover { color: var(--accent); }

.gate-activate { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.gate-activate h3 { font-size: 1.02rem; margin-bottom: 4px; }
.gate-activate .gate-sub { margin-bottom: 18px; }
.code-input {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Consolas, monospace);
  font-size: .82rem; line-height: 1.5; resize: vertical;
}

.gate-legal { font-size: .8rem; color: var(--text-faint); margin-top: 16px; line-height: 1.65; }

/* --- loading skeleton --- */
.gate-skeleton { display: grid; gap: 11px; }
.gate-skeleton i {
  display: block; height: 13px; border-radius: var(--r-xs); background: var(--bg-sunken);
  animation: gate-pulse 1.3s ease-in-out infinite;
}
.gate-skeleton i:nth-child(2) { width: 82%; animation-delay: .12s; }
.gate-skeleton i:nth-child(3) { width: 58%; animation-delay: .24s; }
@keyframes gate-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

:root[data-theme="dark"] .gate-mark { background: var(--brand-800); }
/* .gate-mark-ok's own text color is tuned for its light-theme gold background
   (3.3:1, clears the 3:1 floor for this 24px glyph). The dark-theme override
   above swaps that background for a dark green, which drops the same text to
   ~1.3:1 — effectively invisible. Give it its own dark-theme color instead of
   inheriting the light-theme one. */
:root[data-theme="dark"] .gate-mark-ok { color: #fff; }
:root[data-theme="dark"] .gate-count { background: rgba(255,255,255,.03); }

@media (prefers-reduced-motion: reduce) {
  .gate-flash, .gate-skeleton i { animation: none; }
  .gate-bar > i { transition: none; }
}

@media (max-width: 900px) {
  .gate-col { position: static; }
  .gate-card { padding: 24px 22px 22px; }
}

/* ---------- 25. Print ---------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .theme-toggle, .burger,
  .docs-nav, .toc, .breadcrumbs, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .page-hero, .section-ink { background: #fff !important; color: #000 !important; }
  /* Backgrounds are not printed by default, so every colour tuned for a dark
     band prints as white-on-white. Reset the descendants, not just the h1. */
  .hero *, .page-hero *, .section-ink *, .card-glass * { color: #000 !important; }
  .grad-text {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: #000 !important;
  }
  a { color: #000; text-decoration: underline; }
  .reveal { opacity: 1 !important; transform: none !important; }
}