/* ============================================================================
   irua.app marketing home page — v2.
   Ported from the owner's Claude Design handoff ("irua Landing v2.dc.html",
   2026-09-05) by measuring its frames, not by importing its markup.

   This styles ALL 34 marketing pages — the two home pages and the sixteen
   solution pages in both locales — plus the three shared chrome partials
   (_nav, _drawer, _footer). landing.css is no longer referenced by anything.

   ⚠️ THE COLOURS ARE THE OWNER'S AND ARE NOT TO BE SUBSTITUTED (2026-09-05).
   Two "accessibility" substitutions were made here and both were reverted on
   his explicit instruction: a darkened coral for small text, and ink copy on
   the gradient surfaces. His palette ships as drawn — #E1586F everywhere the
   accent appears, and WHITE type on the coral→amber gradient.

   The known consequence, recorded so nobody re-discovers it and "fixes" it
   again: white on the amber stop of the gradient is 1.8:1, and #E1586F on
   white is 3.6:1, so the closing band's copy and the small coral labels are
   below WCAG AA. That is a decision he has made twice. Do not change it back.
   ========================================================================== */

:root {
  --ink: #14161B;
  --body: #5E6470;
  --nav-ink: #3C4250;
  --line: #E8E4DE;
  --line-strong: #D9D4CC;
  --surface: #FAF8F5;
  --white: #FFFFFF;

  --coral: #E1586F;          /* gradients, borders, large display text */
  --amber: #EDB57B;
  --amber-ink: #C98A3E;      /* icon glyph on --amber-tint */
  --coral-tint: #FDF1F2;
  --amber-tint: #FDF4E8;
  --green: #1DA955;
  --green-tint: #E9F9EF;
  --wa: #25D366;
  --dark-muted: #B8BEC8;

  --grad: linear-gradient(90deg, var(--coral), var(--amber));
  --grad-135: linear-gradient(135deg, var(--coral), var(--amber));

  --r-sm: 6px;    /* nav buttons */
  --r-md: 8px;    /* inputs, CTAs */
  --r-icon: 11px; /* 44px icon squares */
  --r-icon-lg: 12px;
  --r-card: 14px;
  --r-panel: 18px;

  --sh-card: 0 24px 50px -30px rgba(20, 22, 27, .3);
  --sh-flow: 0 20px 50px -30px rgba(20, 22, 27, .2);
  --sh-cta: 0 14px 40px -14px rgba(225, 88, 111, .7);
  --sh-panel: 0 30px 70px -40px rgba(20, 22, 27, .3);

  --wrap: 1280px;
  --pad: 40px;
  --py: 120px;

  --font-h: 'Rubik', 'Assistant', system-ui, sans-serif;
  --font-b: 'Assistant', 'Rubik', system-ui, sans-serif;
  /* ⚠️ 'Assistant' sits in the mono stack ON PURPOSE. JetBrains Mono carries no
     Hebrew glyphs, so every Hebrew run styled with --font-m (the numbered
     eyebrows, the hero microcopy, the calculator notes) was falling through to
     whatever the OS happened to pick. Browsers fall back PER GLYPH, so this
     keeps the mono look on the digits and Latin while Hebrew renders in the
     site's own face. */
  --font-m: 'JetBrains Mono', 'Assistant', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ⚠️ clip, never hidden. overflow-x:hidden turns the root into a scroll
   container, which silently kills position:sticky on .nav — the nav then
   scrolls away with the page and the CSS still *looks* right. */
html, body { margin: 0; padding: 0; overflow-x: clip; }
/* The design is light only, so say so: without it a dark-mode browser is free
   to repaint the calculator's number inputs dark inside a white card. */
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-h); margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Every dark surface on the page needs the ring flipped, or it lands at 1.1:1
   and the keyboard user has no visible indicator (SC 2.4.7 / 1.4.11). */
.sec-ent :focus-visible,
.nav-drawer :focus-visible,
.btn-ink:focus-visible,
.calc-cta:focus-visible { outline-color: #fff; }

.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;
}
/* .calc-field is display:flex, which outranks the hidden attribute's UA rule —
   without this the heads input shows even when its toggle is off. */
[hidden] { display: none !important; }

/* First focusable element on the page (SC 2.4.1). */
.skip-link {
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-md);
  font-family: var(--font-h); font-weight: 600; font-size: 15px; transition: top .18s;
}
.skip-link:focus-visible { top: 16px; outline-color: #fff; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

/* ── reveal on scroll ───────────────────────────────────────────────────────
   The page's existing IntersectionObserver adds .in; nothing here needs new JS. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal].in { opacity: 1; transform: none; }

[data-stagger] > *:nth-child(2) { transition-delay: 90ms; }
[data-stagger] > *:nth-child(3) { transition-delay: 180ms; }
[data-stagger] > *:nth-child(4) { transition-delay: 270ms; }
[data-stagger] > *:nth-child(5) { transition-delay: 360ms; }
[data-stagger] > *:nth-child(6) { transition-delay: 450ms; }

[data-px] { will-change: transform; }

/* ============================ KEYFRAMES ================================== */
@keyframes rise      { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: none } }
@keyframes lineUp    { from { opacity: 0; transform: translateY(110%) skewY(4deg) } to { opacity: 1; transform: none } }
@keyframes shimmer   { 0% { background-position: 0% 50% } 100% { background-position: 200% 50% } }
@keyframes floatY    { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes blob      { 0%, 100% { transform: translate(0, 0) scale(1) } 33% { transform: translate(-4%, 6%) scale(1.08) } 66% { transform: translate(5%, -4%) scale(.95) } }
/* The glow and the pulse are drawn once on a pseudo-element and then only
   FADED. Animating box-shadow itself, as the reference does, repaints an
   8px-spread halo around four 245px cards on every frame, forever. */
@keyframes pulseDot  { 0% { opacity: .55; transform: scale(.55) } 70%, 100% { opacity: 0; transform: scale(1) } }
@keyframes marquee   { from { transform: translateX(0) } to { transform: translateX(50%) } }
@keyframes langroll  { 0% { transform: translateY(0) } 100% { transform: translateY(-50%) } }
@keyframes node1 { 0%, 100% { opacity: 0 } 5%, 20%  { opacity: 1 } }
@keyframes node2 { 0%, 100% { opacity: 0 } 30%, 45% { opacity: 1 } }
@keyframes node3 { 0%, 100% { opacity: 0 } 55%, 70% { opacity: 1 } }
@keyframes node4 { 0%, 100% { opacity: 0 } 80%, 95% { opacity: 1 } }
@keyframes wire1 { 0%, 20% { transform: scaleX(0) } 30%, 100% { transform: scaleX(1) } }
@keyframes wire2 { 0%, 45% { transform: scaleX(0) } 55%, 100% { transform: scaleX(1) } }
@keyframes wire3 { 0%, 70% { transform: scaleX(0) } 80%, 100% { transform: scaleX(1) } }

/* ============================ BUTTONS ==================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-h); font-weight: 700; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r-md);
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ⚠️ .btn-brand and .btn-ghost-dark are landing.css's names, and the three SHARED
   chrome partials are written in them. They MUST be aliased here or the nav's two
   buttons render as bare bold text — measured: transparent background, transparent
   border, 0 padding, 18px tall. Any new button class used by a partial belongs in
   these selector lists too. */
.btn-ink, .btn-brand { background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--r-sm); font-size: 14px; }
.btn-ink:hover, .btn-brand:hover { background: var(--coral); color: #fff; }

.btn-outline, .btn-ghost-dark { border-color: var(--line); color: var(--ink); padding: 8px 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; background: #fff; }
.btn-outline:hover, .btn-ghost-dark:hover { border-color: var(--coral); color: var(--coral); }

.btn-grad {
  background: var(--grad); color: #fff;
  font-size: 17px; padding: 16px 30px; box-shadow: var(--sh-cta);
}
.btn-grad:hover { box-shadow: 0 20px 50px -14px rgba(225, 88, 111, .85); color: #fff; }

.btn-line {
  background: #fff; border-color: var(--line-strong); color: var(--ink);
  font-weight: 500; font-size: 16px; padding: 16px 22px;
}
.btn-line:hover { border-color: var(--coral); color: var(--coral); }

.btn-lg { font-size: 17px; padding: 16px 32px; }

/* ============================ NAV ======================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid var(--line);
  height: 68px;
}
.nav.scrolled { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 68px; position: relative;
}
.nav .logo img { height: 28px; width: auto; display: block; }
.nav .logo { display: flex; align-items: center; flex: 0 0 auto; }

/* Driven by scaleX from the motion layer, so the bar never touches layout.
   transform-origin cannot take its side from dir, so it is spelled per
   direction. */
.nav-progress {
  position: absolute; top: 0; inset-inline-start: 0; height: 3px; width: 100%;
  background: var(--grad); z-index: 2; pointer-events: none;
  transform: scaleX(0); transform-origin: left;
}
html[dir="rtl"] .nav-progress { transform-origin: right; }

.nav-links { display: flex; gap: 28px; font-family: var(--font-h); font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--nav-ink); }
.nav-links a:hover { color: var(--coral); }

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

/* Language picker. The handoff simplified this to a bare "EN" link; the real
   partial carries a flag dropdown because the two locale directions are NOT
   symmetric (HE→EN is /en/<slug>, EN→HE goes through /lang/he?to=). Keeping
   the control, restyled. */
.lang-dd { position: relative; }
/* The site font, not the mono one: this label is Hebrew on the Hebrew page and
   JetBrains Mono has no Hebrew glyphs. Matches the nav links beside it. */
.lang-dd > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-h); font-size: 14px; font-weight: 500; color: var(--nav-ink);
  padding: 7px 10px; border: 1px solid transparent; border-radius: var(--r-sm);
}
.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-dd > summary:hover { border-color: var(--line); color: var(--ink); }
.lang-dd .flag { border-radius: 2px; display: block; flex: 0 0 auto; }
.lang-dd-caret { transition: transform .18s; }
.lang-dd[open] .lang-dd-caret { transform: rotate(180deg); }
.lang-dd-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
  min-width: 168px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 6px; box-shadow: var(--sh-card);
  display: flex; flex-direction: column; gap: 2px;
}
.lang-dd-menu a {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border-radius: var(--r-sm); font-family: var(--font-h); font-size: 14px;
  font-weight: 500; color: var(--ink);
}
.lang-dd-menu a:hover { background: var(--surface); }
.lang-dd-check { margin-inline-start: auto; color: var(--coral); }

.nav-burger {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px; cursor: pointer; color: var(--ink);
}
.nav-burger svg { width: 22px; height: 22px; display: block; }

/* Five tap targets sit side by side in the phone bar, so kill the 300ms
   double-tap-zoom wait and the default grey flash — on controls this small both
   read as "the button didn't work". Inert for a mouse. */
.nav-burger, .nav-right .btn, .lang-dd > summary, .lang-dd-menu a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ============================ DRAWER ===================================== */
.nav-scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(20, 22, 27, .45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s, visibility 0s .25s;
}
/* A visible element at opacity 0 still eats every click, so pointer-events and
   visibility are part of the fade, not decoration. */
.drawer-open .nav-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s; }

.nav-drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 100;
  width: min(340px, 88vw);
  background: var(--ink); color: #fff;
  display: flex; flex-direction: column;
  transform: translateX(calc(var(--drw-sign, 1) * 110%));
  /* visibility, not the transform alone: a panel parked off-screen is still in
     the tab order and still read out. Delaying the transition to the END of the
     slide is what lets the close animation play. */
  visibility: hidden; pointer-events: none;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .28s;
  /* Spelled out, not left to `auto`: overflow-y:auto alone computes the other
     axis to auto too, and the staggered entrance can raise a scrollbar inside
     the links box. `contain` stops a flick past the end of the panel from
     scrolling the page underneath it. */
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
html[dir="rtl"] .nav-drawer { --drw-sign: -1; }
.drawer-open .nav-drawer {
  transform: translateX(0); visibility: visible; pointer-events: auto;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}

.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
/* Not filtered white: the wordmark IS the coral→amber gradient this whole page
   is built on, and it clears 5.1:1 on the panel unaided. */
.nav-drawer-head img { height: 26px; width: auto; }
.nav-drawer-x { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; }
.nav-drawer-x svg { width: 22px; height: 22px; display: block; }

.nav-drawer-links { display: flex; flex-direction: column; padding: 12px 0; }
.nav-drawer-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; font-family: var(--font-h); font-size: 17px; font-weight: 500;
  color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.nav-drawer-links a:hover { background: rgba(255, 255, 255, .06); }
.nav-drawer-links svg { width: 16px; height: 16px; color: var(--amber); }
html[dir="rtl"] .nav-drawer-links svg { transform: scaleX(-1); }

.nav-drawer-cta { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.nav-drawer-cta .btn { width: 100%; padding: 14px 18px; font-size: 16px; border-radius: var(--r-md); }
/* White on the gradient, matching the closing band — the drawer sits on the
   dark panel, so an ink button here would be two dark masses touching. */
.nav-drawer-cta .btn-brand, .nav-drawer-cta .btn-ink { background: var(--grad); color: #fff; }
.nav-drawer-cta .btn-brand:hover, .nav-drawer-cta .btn-ink:hover { background: var(--grad); color: #fff; }
.nav-drawer-cta .btn-ghost-dark, .nav-drawer-cta .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }

.nav-drawer-foot {
  margin-top: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--font-m); font-size: 12.5px; color: var(--dark-muted);
}

/* ============================ HERO ======================================= */
.hero { position: relative; z-index: 1; padding: 96px var(--pad) 80px; overflow: hidden; }
.hero-blob, .hero-grid-bg { position: absolute; pointer-events: none; }
.hero-blob { border-radius: 50%; }
.hero-blob-a {
  top: -200px; inset-inline-start: -120px; width: 640px; height: 640px;
  background: radial-gradient(closest-side, rgba(237, 181, 123, .45), transparent 70%);
  filter: blur(40px);
}
.hero-blob-a > i { display: block; width: 100%; height: 100%; border-radius: 50%; animation: blob 14s ease-in-out infinite; }
.hero-blob-b {
  bottom: -260px; inset-inline-end: -160px; width: 720px; height: 720px;
  background: radial-gradient(closest-side, rgba(225, 88, 111, .28), transparent 70%);
  filter: blur(50px);
}
.hero-grid-bg {
  inset: 0;
  background-image:
    linear-gradient(rgba(20, 22, 27, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 27, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}
.hero-copy { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; text-align: center; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-m); font-size: 12px; letter-spacing: .08em; color: var(--ink);
  background: #fff; border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px;
  margin-bottom: 32px; box-shadow: 0 4px 20px -8px rgba(20, 22, 27, .15);
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-badge i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--wa); flex: 0 0 auto; }
.hero-badge i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(37, 211, 102, .5);
  animation: pulseDot 1.8s ease-out infinite;
}

.hero h1 {
  font-weight: 900; font-size: clamp(48px, 6.4vw, 96px); line-height: 1.02;
  letter-spacing: -.025em; margin: 0 auto 28px; max-width: 1000px; text-wrap: balance;
}
.hero h1 > span { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 > span > span { display: block; animation: lineUp .9s cubic-bezier(.2, .8, .2, 1) both; }
.hero h1 > span:nth-child(1) > span { animation-delay: .1s; }
.hero h1 > span:nth-child(2) > span { animation-delay: .25s; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--coral), var(--amber), var(--coral));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 5s linear infinite;
}

.hero-sub {
  font-size: 21px; line-height: 1.5; color: var(--body);
  max-width: 640px; margin: 0 auto 40px; text-wrap: pretty;
  animation: rise .9s .1s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-cta {
  display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap;
  animation: rise .9s .15s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-micro {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 22px;
  font-family: var(--font-m); font-size: 12px; color: var(--body);
  animation: rise .9s .2s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-micro i { color: var(--line-strong); font-style: normal; }

/* ── flow diagram ───────────────────────────────────────────────────────── */
.flow-wrap { perspective: 1400px; margin: 72px auto 0; max-width: 1100px; animation: rise 1s .3s cubic-bezier(.2, .7, .2, 1) both; }
.flow {
  display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
  align-items: stretch; transform-style: preserve-3d; transition: transform .15s ease-out;
}
.flow-card {
  position: relative; background: #fff; border: 2px solid var(--line);
  border-radius: var(--r-card); padding: 26px 22px; text-align: start;
  display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sh-flow);
}
/* The lit state is a ring that sits exactly over the card's own 2px border and
   fades in on its turn — so the card itself never repaints. */
.flow-card::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  border: 2px solid var(--coral); border-radius: calc(var(--r-card) + 2px);
  box-shadow: 0 0 0 8px rgba(225, 88, 111, .15);
  opacity: 0;
}
.flow-card:nth-of-type(1)::after { animation: node1 12s ease-in-out infinite; }
.flow-card:nth-of-type(2)::after { animation: node2 12s ease-in-out infinite; }
.flow-card:nth-of-type(3)::after { animation: node3 12s ease-in-out infinite; }
.flow-card:nth-of-type(4)::after { animation: node4 12s ease-in-out infinite; }
.flow-card .ic {
  width: 48px; height: 48px; border-radius: var(--r-icon-lg); background: var(--grad-135);
  color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.flow-card .ic svg { width: 22px; height: 22px; }
.flow-num {
  position: absolute; top: 16px; inset-inline-end: 18px;
  font-family: var(--font-m); font-size: 12px; color: var(--body);
}
.flow-card h3 { font-weight: 700; font-size: 19px; line-height: 1.25; }
.flow-card p { font-size: 15px; color: var(--body); line-height: 1.5; }

.flow-wire { position: relative; align-self: center; height: 2px; background: var(--line); }
.flow-wire > i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--amber), var(--coral)); transform-origin: right; transform: scaleX(0); }
.flow-wire:nth-of-type(1) > i { animation: wire1 12s ease-in-out infinite; }
.flow-wire:nth-of-type(2) > i { animation: wire2 12s ease-in-out infinite; }
.flow-wire:nth-of-type(3) > i { animation: wire3 12s ease-in-out infinite; }

/* ============================ SOLUTION-PAGE HERO ========================= */
/* The 16 SEO pages share the home page's chrome, tokens and cards, but their
   hero is start-aligned, one column, and carries no flow diagram — the diagram
   is the home page's argument, not theirs. */
.hero-silo { padding: 88px var(--pad) 72px; text-align: start; }
.hero-silo .hero-copy { text-align: start; max-width: var(--wrap); }
.hero-silo h1 { font-size: clamp(38px, 5.2vw, 72px); margin-inline: 0; max-width: 900px; }
.hero-silo .hero-sub { margin-inline: 0; max-width: 620px; }
.hero-silo .hero-cta { justify-content: flex-start; }
/* The home badge is a mono, letter-spaced Latin credential line. These carry a
   Hebrew category name, which mono spacing mangles. */
.hero-silo .hero-badge {
  font-family: var(--font-h); font-size: 13px; font-weight: 600; letter-spacing: 0;
}
.hero-silo .hero-badge i { background: var(--coral); animation: none; }
.hero-silo .hero-badge i::after { display: none; }

/* Related-topics row. Flex, not the 3-up grid: these come in fives, and five
   items in a 3-column grid leaves a visible hole on the second row. Flex lets
   the last row grow to fill instead. */
.rel-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.rel-grid > * { flex: 1 1 260px; max-width: 460px; }

/* ============================ FAQ ======================================== */
/* Each page's FAQ is its long-tail SEO asset, so it stays plain, readable text
   in a card — no accordion, nothing that hides the answer from a crawler. */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.faq {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 26px; text-align: start; display: flex; flex-direction: column; gap: 10px;
}
.sec-surface .faq { background: #fff; }
.faq h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.faq p { font-size: 15px; color: var(--body); line-height: 1.6; }

/* ============================ TICKER ===================================== */
.ticker {
  position: relative; z-index: 1; overflow: hidden; padding: 16px 0;
  background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ticker-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.ticker-run {
  display: flex; align-items: center; white-space: nowrap;
  font-family: var(--font-h); font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--body);
}
.ticker-run span { padding: 0 26px; }
.ticker-run i { color: var(--coral); font-style: normal; }

/* ============================ SECTION SHELL ============================== */
.sec { position: relative; z-index: 1; padding: var(--py) 0; }
.sec-surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { max-width: 720px; margin-bottom: 56px; }
.eyebrow {
  font-family: var(--font-m); font-size: 12px; color: var(--coral);
  letter-spacing: .14em; margin-bottom: 14px;
}
.h2 { font-weight: 800; font-size: 56px; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance; }
.h2 span { color: var(--body); }
.h3 { font-weight: 800; font-size: 44px; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 18px; text-wrap: balance; }
.lead { font-size: 18px; color: var(--body); line-height: 1.55; max-width: 560px; }

.group-label {
  font-family: var(--font-h); font-size: 13px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.group-label::before { content: ""; width: 28px; height: 2px; background: var(--grad); flex: 0 0 auto; }

.more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-h); font-weight: 600; font-size: 15px; color: var(--coral);
}
.more svg { width: 18px; height: 18px; }
/* The arrow is drawn pointing the way Hebrew reads. Mirror it — and only it —
   on the English page, wherever it appears. */
html[dir="ltr"] .ic-arrow { transform: scaleX(-1); }
.more:hover { color: var(--coral); text-decoration: underline; text-underline-offset: 4px; }

/* ============================ CAPABILITY CARDS =========================== */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cap {
  display: flex; flex-direction: column; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 26px; min-height: 200px; color: var(--ink);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
a.cap:hover { transform: translateY(-4px); box-shadow: var(--sh-card); border-color: var(--amber); }
.cap .ic {
  width: 44px; height: 44px; border-radius: var(--r-icon);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: var(--coral-tint); color: var(--coral);
}
.cap .ic svg { width: 22px; height: 22px; }
.cap-b .ic { background: var(--amber-tint); color: var(--amber-ink); }
.cap h3 { font-size: 19px; font-weight: 700; line-height: 1.25; }
.cap p { font-size: 15px; color: var(--body); line-height: 1.5; }
.cap-more {
  margin-top: auto; font-family: var(--font-h); font-size: 13px; font-weight: 500;
  color: var(--coral); display: flex; align-items: center; gap: 6px;
}
.cap-more svg { width: 16px; height: 16px; }

.caps-a { margin-bottom: 48px; }

/* ============================ DEEP DIVES ================================= */
.dives { display: flex; flex-direction: column; gap: 110px; }
.dive { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
/* Class, not `.dive-copy p` — a descendant-of-class rule outranks .eyebrow and
   silently renders the 12px mono eyebrow at 17px. Measured, not guessed. */
.dive-p { font-size: 17px; color: var(--body); line-height: 1.6; margin: 0 0 24px; max-width: 500px; }
.dive-bullets { display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.dive-bullets li { display: flex; gap: 12px; align-items: center; }
.dive-bullets svg { width: 18px; height: 18px; color: var(--coral); flex: 0 0 auto; }
/* The visual takes column 1 on the flipped row. Set with order, never grid
   auto-placement: auto-placement is sparse, so the second child asking for
   column 1 wraps to a new row and the mockup lands under the text. */
.dive-flip .dive-copy { order: 2; }
.dive-flip .dive-visual { order: 1; }

.mini-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 22px; display: flex; flex-direction: column; gap: 12px;
}
.mini .ic {
  width: 40px; height: 40px; border-radius: 10px; background: var(--grad-135); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  animation: floatY 4s ease-in-out infinite;
}
.mini:nth-child(2) .ic { animation-delay: .5s; }
.mini:nth-child(3) .ic { animation-delay: 1s; }
.mini:nth-child(4) .ic { animation-delay: 1.5s; }
.mini .ic svg { width: 20px; height: 20px; }
.mini-num { position: absolute; top: 14px; inset-inline-end: 16px; font-family: var(--font-m); font-size: 11px; color: var(--body); }
.mini h4 { font-weight: 700; font-size: 17px; }
.mini p { font-size: 14px; color: var(--body); line-height: 1.5; }

/* seating tiles reuse .mini but with tinted (not gradient) icon plates */
.mini-tint { padding: 24px; }
.mini-tint .ic { width: 44px; height: 44px; border-radius: var(--r-icon); animation: none; background: var(--coral-tint); color: var(--coral); }
.mini-tint:nth-child(even) .ic { background: var(--amber-tint); color: var(--amber-ink); }

.kiosk-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kiosk {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 24px 18px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px;
}
.kiosk .ic {
  width: 56px; height: 56px; border-radius: 50%; background: var(--green-tint); color: var(--green);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.kiosk .ic svg { width: 26px; height: 26px; }
.kiosk h4 { font-weight: 700; font-size: 16px; line-height: 1.3; }
.kiosk p { font-size: 13.5px; color: var(--body); line-height: 1.5; margin-top: 4px; }

/* the three tall cards: multi-day / multilingual / wallet */
.tall {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 14px;
}
.tall .ic { width: 48px; height: 48px; border-radius: var(--r-icon-lg); background: var(--grad-135); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tall .ic svg { width: 22px; height: 22px; }
.tall .eyebrow { font-size: 11px; margin: 0; color: var(--body); }
.tall h3 { font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.tall p { font-size: 15px; color: var(--body); line-height: 1.55; }
.tall .more { margin-top: auto; font-size: 13px; }

.langroll { height: 96px; overflow: hidden; position: relative; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.langroll ul { display: flex; flex-direction: column; animation: langroll 9s linear infinite; }
.langroll li { padding: 8px 14px; font-size: 15px; font-weight: 600; }
.langroll::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--surface), transparent 35%, transparent 65%, var(--surface));
}

.wallet-badges { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.wallet-badges img { height: 40px; width: auto; display: block; }

/* ============================ AUDIENCE =================================== */
.aud-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 48px; }
.aud-head .h2 { margin: 0; }
.aud-head > p { font-size: 17px; color: var(--body); line-height: 1.55; max-width: 400px; }
.aud {
  display: flex; align-items: center; gap: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 22px 24px; color: var(--ink);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
a.aud:hover { transform: translateY(-3px); box-shadow: var(--sh-card); border-color: var(--amber); }
.aud .ic {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--r-card);
  background: var(--grad-135); color: #fff; display: flex; align-items: center; justify-content: center;
}
.aud .ic svg { width: 22px; height: 22px; }
.aud h3 { font-size: 18px; font-weight: 700; }
.aud p { font-size: 14px; color: var(--body); margin-top: 3px; }

/* ============================ ENTERPRISE (dark) ========================== */
.sec-ent { background: var(--ink); color: #fff; overflow: hidden; }
.sec-ent .eyebrow { color: var(--amber); }
.sec-ent .lead, .sec-ent p { color: var(--dark-muted); }
.sec-ent .more { color: var(--amber); }
.ent-glow {
  position: absolute; top: -300px; inset-inline-end: -200px; width: 800px; height: 800px;
  border-radius: 50%; pointer-events: none; filter: blur(60px);
  background: radial-gradient(closest-side, rgba(225, 88, 111, .35), transparent 70%);
}
.ent-grid { position: relative; display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; }
.ent-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ent-card {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-card); padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.ent-card .ic {
  width: 44px; height: 44px; border-radius: var(--r-icon);
  background: rgba(255, 255, 255, .08); color: var(--amber);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.ent-card .ic svg { width: 22px; height: 22px; }
.ent-card h3 { font-size: 19px; font-weight: 700; }
.ent-card p { font-size: 14.5px; line-height: 1.5; }

/* ============================ HOW IT WORKS =============================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step {
  position: relative; background: var(--surface); border-radius: var(--r-card);
  padding: 28px 24px; display: flex; flex-direction: column; gap: 16px;
}
.step .ic {
  width: 48px; height: 48px; border-radius: var(--r-icon-lg); background: #fff;
  border: 1px solid var(--line); color: var(--coral);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.step .ic svg { width: 22px; height: 22px; }
.step-num { position: absolute; top: 16px; inset-inline-end: 18px; font-family: var(--font-m); font-size: 12px; color: var(--body); }
.step h3 { font-size: 20px; font-weight: 700; }
.step p { font-size: 15px; color: var(--body); line-height: 1.5; }

/* ============================ PRICING ==================================== */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.price-lead { font-size: 17px; color: var(--body); line-height: 1.55; margin: 0 0 32px; max-width: 480px; }
.price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
/* Single-price mode: one card, so it takes the full width rather than leaving
   half the row empty. The '/' route strips whichever block does not apply. */
.price-cards.one { grid-template-columns: 1fr; }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; min-width: 0; text-align: center; }
.price-card .num {
  display: block; font-family: var(--font-h); font-weight: 700;
  font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.price-card.accent .num { color: var(--coral); }
.price-card .per { display: block; font-size: 14px; color: var(--body); margin-top: 8px; line-height: 1.4; }
.price-fine { font-size: 13px; color: var(--body); line-height: 1.55; margin: 0 0 28px; }
.price-free-label { font-family: var(--font-h); font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
  padding: 7px 12px; background: #fff; border: 1px solid var(--line); border-radius: 999px;
}
.chips svg { width: 16px; height: 16px; color: var(--green); flex: 0 0 auto; }

/* ── calculator ─────────────────────────────────────────────────────────── */
.calc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 32px; box-shadow: var(--sh-panel); min-width: 0;
}
.calc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.calc-head .ic { width: 44px; height: 44px; border-radius: var(--r-icon); background: var(--grad-135); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.calc-head .ic svg { width: 22px; height: 22px; }
.calc-head h3 { font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -.01em; }

.calc-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.calc-preset {
  font-size: 13px; font-weight: 600; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.calc-preset:hover { border-color: var(--coral); color: var(--coral); }

.calc-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.calc-field { display: flex; flex-direction: column; gap: 8px; }
.calc-field > label { font-size: 14px; font-weight: 600; }
.calc-field input {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; font-size: 20px; font-family: var(--font-m);
  width: 100%; max-width: 160px; text-align: center;
}
.calc-field input:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: var(--coral); }
.calc-hint { font-size: 12px; color: var(--body); }

.calc-checks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
/* The handoff draws these as <button> pill toggles. They stay real checkboxes —
   same 38×22 pill, but announced, focusable and keyboard-operable for free. */
.calc-check {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; text-align: start; font-size: 14.5px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer;
  transition: border-color .2s;
}
.calc-check:hover { border-color: var(--line-strong); }
.calc-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.calc-check .sw {
  width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong);
  position: relative; flex: 0 0 auto; transition: background .2s;
}
.calc-check .sw::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: inset-inline-start .2s;
}
.calc-check input:checked ~ .sw { background: var(--grad); }
.calc-check input:checked ~ .sw::after { inset-inline-start: 19px; }
.calc-check input:focus-visible ~ .sw { outline: 2px solid var(--ink); outline-offset: 3px; }
.calc-check .ck-ic { display: none; }

#calcHeadsWrap { margin: 8px 0 0; padding-inline-start: 14px; }
#calcHeadsWrap input { max-width: 140px; font-size: 17px; }

.calc-lines { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--body); border-top: 1px solid var(--line); padding-top: 16px; }
.calc-lines li { display: flex; align-items: center; gap: 10px; }
.calc-lines .li-ic { display: flex; color: var(--body); flex: 0 0 auto; }
.calc-lines .li-ic svg { width: 15px; height: 15px; }
.calc-lines .li-tx { display: flex; flex-direction: column; }
.calc-lines .li-tx i { font-style: normal; font-family: var(--font-m); font-size: 11.5px; opacity: .85; }
.calc-lines b { margin-inline-start: auto; font-family: var(--font-m); color: var(--ink); font-weight: 400; }
.calc-lines b.free { color: var(--green); font-family: var(--font-b); font-weight: 600; }
.calc-lines .empty { color: var(--body); }

.calc-total {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px;
}
.calc-total > span { font-size: 14px; font-weight: 600; }
.calc-total b {
  font-family: var(--font-h); font-weight: 700; font-size: clamp(30px, 4vw, 44px);
  line-height: 1; letter-spacing: -.02em; color: var(--coral); font-variant-numeric: tabular-nums;
}
.calc-note { font-family: var(--font-m); font-size: 11px; color: var(--body); margin-top: 6px; }
.calc-cta {
  display: flex; justify-content: center; margin-top: 24px; background: var(--ink); color: #fff;
  font-family: var(--font-h); font-weight: 700; font-size: 16px; padding: 16px; border-radius: 10px;
  transition: background .2s;
}
.calc-cta:hover { background: var(--coral); color: #fff; }
.calc-cta-note { display: block; text-align: center; font-family: var(--font-m); font-size: 11px; color: var(--body); margin-top: 10px; }

/* ============================ CLOSING CTA ================================ */
/* The owner's band, exactly as drawn: the brand gradient, white type, the ink
   button. See the divergence note at the top of this file before touching any
   colour in here. */
.sec-cta { background: var(--grad-135); color: #fff; text-align: center; padding: 140px var(--pad); overflow: hidden; }
.cta-inner { position: relative; max-width: 820px; margin: 0 auto; }
.sec-cta h2 { font-weight: 900; font-size: clamp(44px, 6vw, 88px); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 20px; text-wrap: balance; }
.sec-cta .cta-inner p { font-size: 19px; margin: 0 0 36px; opacity: .95; }
.sec-cta .btn-ink { background: var(--ink); color: #fff; font-size: 17px; padding: 16px 32px; border-radius: var(--r-md); }
.sec-cta .btn-ink:hover { transform: translateY(-2px); background: var(--ink); color: #fff; }
.sec-cta .btn-on-grad {
  border-color: rgba(255, 255, 255, .6); color: #fff; font-weight: 600; font-size: 16px; padding: 16px 22px;
}
.sec-cta .btn-on-grad:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.sec-cta :focus-visible { outline-color: #fff; }

/* ============================ FOOTER ===================================== */
footer { position: relative; z-index: 1; background: #fff; padding: 64px 0 32px; border-top: 1px solid var(--line); }
.foot { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; }
.foot-brand { display: flex; flex-direction: column; gap: 20px; }
.foot-brand .logo img { height: 28px; width: auto; display: block; }
.foot-brand > p { font-size: 15px; color: var(--body); line-height: 1.55; max-width: 300px; }
.foot-meta {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); align-self: flex-start;
  font-family: var(--font-m); font-size: 11px; letter-spacing: .06em; color: var(--body);
}
.foot-meta p { margin: 0; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col h2 { font-family: var(--font-h); font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.foot-col a { font-size: 14.5px; color: var(--body); }
.foot-col a:hover { color: var(--ink); }
.foot-lang { display: inline-flex; align-items: center; gap: 7px; }
.foot-lang .flag { border-radius: 2px; flex: 0 0 auto; }
.foot-legal {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--body);
}
.foot-legal a { color: var(--body); }
.foot-legal a:hover { color: var(--ink); }
.foot-legal .sep { margin: 0 8px; color: var(--line-strong); }

/* ============================ RESPONSIVE ================================= */
@media (max-width: 1024px) {
  :root { --py: 88px; }
  .h2 { font-size: clamp(34px, 5vw, 48px); }
  .h3 { font-size: clamp(30px, 4.4vw, 40px); }
  .dive, .ent-grid, .price-grid { grid-template-columns: 1fr; gap: 40px; }
  .dive-flip .dive-copy, .dive-flip .dive-visual { order: 0; }
  /* 3-up drops to 2 here, not at 720: three 26px-padded cards inside a 944px
     container leave ~260px each, and both groups hold six, so 2-up still fills
     every row. Same threshold landing.css uses on the solution pages. */
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  /* Both card groups hold six, so 2-up fills every row. These two hold THREE:
     2-up would orphan the last one, which is the rule the owner has caught
     before — they keep 3 columns and go straight to a single column later. */
  .cards-3.tall-3, .kiosk-3 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .aud-head { flex-direction: column; align-items: flex-start; }
  .faq-grid { grid-template-columns: 1fr; }
  /* Some solution pages carry a group of THREE. In a 2-up grid the last one
     would sit alone on its own row, so it spans instead. Declared here, not
     only at 720, because 2-up starts here. */
  .cards-3 > *:nth-child(odd):last-child { grid-column: 1 / -1; }
  .foot { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --pad: 20px; --py: 64px; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }

  /* ⚠️ NOTHING IN THE BAR MAY SHRINK, and the burger least of all. It shipped
     18px wide at x:-1 — half off the screen — because two full-size CTAs and a
     117px wordmark do not fit in 390px and flex took the difference out of the
     only item with no intrinsic width. The menu was reachable in theory and
     untappable in practice. The flex lock is what makes a future overflow
     visible instead of silent.
     (The rule that used to sit here, `.nav-right .btn-outline { display:none }`,
     never matched anything: the partial writes .btn-ghost-dark. Note the two
     selector families below — any new button class a partial uses belongs in
     both, or it will quietly reappear in the phone bar.) */
  .nav-inner { gap: 10px; }
  .nav .logo, .nav-right, .nav-burger { flex: 0 0 auto; }

  /* Both CTAs come OUT of the phone bar (owner, 2026-09-07) — the drawer carries
     them full-width, one tap away, so repeating them here only crowded the row.
     What stays is identity, locale and the way in: wordmark, language, menu. */
  .nav-right .btn-ink, .nav-right .btn-brand,
  .nav-right .btn-outline, .nav-right .btn-ghost-dark { display: none; }

  /* The language switcher stays in the bar: the locale is a first-screen
     decision and the drawer carries no language control at all. With the CTAs
     gone it keeps its written label down to 340px, so it is the same control it
     is on desktop rather than a mobile-only variant. */
  .lang-dd { display: block; }
  /* Identity at one end, controls at the other. Left to space-between the
     switcher floats mid-bar between two unequal gaps, which reads as a stray
     element rather than a control; pushed against the burger it reads as the
     pair it is. */
  .nav .logo { margin-inline-end: auto; }
  /* ⚠️ The menu keeps its DEFAULT end-anchoring, and that is load-bearing rather
     than incidental: an end-anchored panel opens inward from the bar's end, so
     it only stays on screen while the switcher IS near that end. Parked mid-row
     it ran 23px past the viewport at 360px, and start-anchored from here it runs
     off the other side at 320px — both measured. Move this control and re-measure
     the open panel at 320 in BOTH directions. */

  .hero { padding: 64px var(--pad) 56px; }
  .hero h1 { font-size: clamp(40px, 11vw, 64px); line-height: 1.05; }
  .hero-sub { font-size: 18px; }
  .flow { grid-template-columns: 1fr; gap: 12px; }
  .flow-wire { display: none; }
  .flow-wrap { perspective: none; margin-top: 48px; }
  .flow { transform: none !important; }
  .dives { gap: 72px; }
  /* Text-heavy cards get a line each rather than three cramped columns. */
  .cards-3.tall-3 { grid-template-columns: 1fr; }
  .sec-cta { padding: 88px var(--pad); }
  .foot { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* Card grids stay 2-up on phones — density is deliberate, don't collapse to
     one tall column. */
  .cards-3, .kiosk-3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cap, .kiosk, .aud, .mini, .step {
    padding: 18px 14px; min-height: 0; border-radius: 12px;
    text-align: center; align-items: center; flex-direction: column;
  }
  .cap h3, .aud h3, .step h3 { font-size: 15px; }
  .cap p, .aud p, .kiosk p, .mini p, .step p { font-size: 13px; }
  .cap-more { justify-content: center; }
  .aud > div { text-align: center; }

  /* Text-heavy cards get a line to themselves rather than being squeezed. */
  .tall-3, .dive-visual .kiosk-3 { grid-template-columns: 1fr; }
  .tall { padding: 26px 22px; }
  .tall h3 { font-size: 24px; }
  .tall p { font-size: 15px; }
  .kiosk-3 { grid-template-columns: 1fr; }
  .kiosk { flex-direction: row; align-items: center; text-align: start; gap: 16px; padding: 16px 18px; }
  .kiosk .ic { width: 48px; height: 48px; }
  .kiosk > div { text-align: start; }

  /* A lone last card in an odd grid spans the row instead of orphaning. */
  .cards-3 > *:nth-child(odd):last-child { grid-column: 1 / -1; }

  .sec-head, .dive-copy, .price-copy, .aud-head { text-align: center; }
  .sec-head, .lead, .dive-copy p, .price-copy > p { margin-inline: auto; }
  .group-label, .dive-bullets li, .chips, .calc-head, .calc-presets { justify-content: center; }
  .dive-bullets li { text-align: start; }
  .aud-head > p { max-width: none; }

  .calc { padding: 24px 18px; text-align: center; }
  .calc-nums { grid-template-columns: 1fr 1fr; gap: 12px; }
  .calc-field { align-items: center; }
  .calc-field input { max-width: 120px; font-size: 18px; }
  .calc-check { text-align: start; }
  .calc-lines li { text-align: start; }

  .hero-cta, .cta-btns { flex-direction: column; align-items: stretch; }
  .hero-cta .btn, .cta-btns .btn { width: 100%; }

  /* Centered and compact, not a long left-aligned column stack. */
  .foot { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .foot-brand, .foot-col { align-items: center; text-align: center; }
  .foot-brand > p { max-width: none; }
  .foot-brand .logo, .foot-meta { align-self: center; }
  .foot-col { gap: 8px; }
  .foot-col a { font-size: 13.5px; }
  .foot-lang { justify-content: center; }
  .foot-legal { justify-content: center; text-align: center; margin-top: 36px; }
}

/* Three controls fit at every phone width the wordmark itself fits at, so there
   is no per-width stepping any more — only the last 20px, where the switcher
   falls back to its flag and caret. 360px stays well above this line: it is one
   of the most common Android widths, not an edge case. */
@media (max-width: 340px) {
  .nav-inner { gap: 6px; padding-inline: 14px; }
  .lang-dd > summary { padding: 6px 6px; gap: 5px; }
  .lang-dd > summary .lang-dd-name { display: none; }
  /* A 168px panel technically fits a 320px screen, but only by hugging the
     viewport edge. Content-sized it lands under the control it belongs to. */
  .lang-dd-menu { min-width: 0; }
}

/* ============================ REDUCED MOTION ============================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    /* Clamp the DELAY too, not only the duration: a transition that is instant
       but still waits 450ms reads as a broken page. */
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero h1 em { background: none; -webkit-text-fill-color: currentColor; color: var(--coral); }
  .flow { transform: none !important; }
  .flow-wire > i { transform: scaleX(1); }
}