/* ═══════════════════════════════════════════════════════════════
   EventKal / GLASS (shared stylesheet for every page of the site)
   The product is layers (a WhatsApp message over a guest page over a
   live count), so the page is built from frosted layers over one
   fixed field of early-evening light.

   Color tokens (all on :root below)
     --base        #f5f0ea  pale warm ground
     field         apricot 247 178 124 · rose quartz 238 170 186 · sea teal 108 188 184
     --ink         #0f2b2a  deep teal-ink, all headings and body
     --ink-soft    #35504e  secondary text (>= 6.5:1 on glass over the brightest field)
     --accent      #0b5e59  the ONE accent: primary pill + links (7:1 under --accent-ink)
     status ink    --ok #0b6b5f · --wait #8a4b12 · --no #9b3550 (illustrations only)
     glass         white at .52 (panels) / .64 (strong), 1px light border,
                   inset top highlight, shadow tinted from the field (rgb 128 70 62)

   Radius system
     --r-panel  28px   every glass panel (bar, tiles, rail, slab, FAQ, contact)
     --r-inner  16px   anything inside a panel (icons, segments, WA bubble, chips)
     --r-pill   999px  buttons, pills, the live-count chip
     --r-device 46px   the phone illustration only (screen 36px, mock UI 12px)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --base: #f5f0ea;
  --ink: #0f2b2a;
  --ink-soft: #35504e;
  --accent: #0b5e59;
  --accent-hover: #084844;
  --accent-ink: #f7fbfa;
  --link: #0b5e59;
  --wa: #11634a;

  --glass: rgb(255 255 255 / .52);
  --glass-strong: rgb(255 255 255 / .64);
  --glass-line: rgb(255 255 255 / .72);
  --hairline: rgb(15 43 42 / .12);
  --hi: inset 0 1px 0 rgb(255 255 255 / .7);
  --shadow: 0 1px 2px rgb(128 70 62 / .06), 0 26px 60px -28px rgb(128 70 62 / .34);
  --blur: blur(24px) saturate(160%);

  --tint-apricot: rgb(253 224 199 / .58);
  --tint-teal: rgb(186 232 226 / .64);
  --tint-rose: rgb(250 220 227 / .58);
  --wa-glass: rgb(236 250 244 / .56);
  --screen: rgb(255 252 248 / .82);
  --screen-line: rgb(15 43 42 / .1);
  --ic-bg: rgb(255 255 255 / .62);

  --ok: #0b6b5f; --wait: #8a4b12; --no: #9b3550;
  --bar-ok: #2f8f86; --bar-wait: #e2a066; --bar-no: #d88a9b;

  --r-panel: 28px; --r-inner: 16px; --r-pill: 999px; --r-device: 46px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: light;
  accent-color: var(--accent);
  scrollbar-color: #5f9792 var(--base);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--base); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Noto Sans Hebrew', system-ui, sans-serif;
  font-size: 17px; line-height: 1.65; font-weight: 400;
  color: var(--ink);
  caret-color: var(--accent);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* The ground: one fixed layer, never repainted on scroll. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62vmax 48vmax at 92% 2%, rgb(247 178 124 / .72), rgb(247 178 124 / 0) 64%),
    radial-gradient(54vmax 46vmax at 4% 34%, rgb(238 170 186 / .6), rgb(238 170 186 / 0) 62%),
    radial-gradient(72vmax 56vmax at 34% 108%, rgb(108 188 184 / .55), rgb(108 188 184 / 0) 64%),
    radial-gradient(40vmax 34vmax at 100% 78%, rgb(250 210 168 / .5), rgb(250 210 168 / 0) 62%),
    var(--base);
  transform: translateZ(0);
}
::selection { background: rgb(11 94 89 / .22); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .22em; }
h1, h2, h3 { text-wrap: balance; color: var(--ink); }
p { text-wrap: pretty; }
.num, .n, .r-num b { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ─── Glass surface ─── */
.glass {
  background-color: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--hi), var(--shadow);
  border-radius: var(--r-panel);
}

/* ─── Header ─── */
.site-header { position: sticky; top: 0; z-index: 50; padding: 12px 16px 0; }
.bar {
  max-width: 1176px; margin: 0 auto; min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 0; padding-inline-start: 18px; padding-inline-end: 10px;
  background-color: var(--glass-strong);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; border-radius: 10px; }
.brand svg { height: 38px; width: auto; }
.brand svg text { direction: ltr; unicode-bidi: isolate; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a:not(.btn) {
  color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--r-pill); min-height: 44px; display: inline-flex; align-items: center;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.nav .btn { margin-inline-start: 10px; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border-radius: var(--r-pill);
  font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-lg { min-height: 54px; padding: 14px 30px; font-size: 17px; }
.btn-primary {
  background-color: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 10px 24px -12px rgb(11 94 89 / .6);
}
.btn-ghost {
  background-color: var(--glass); color: var(--ink); border-color: var(--glass-line);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--hi), 0 10px 24px -16px rgb(128 70 62 / .4);
}

@media (hover: hover) and (pointer: fine) {
  .nav a:not(.btn):hover { background-color: rgb(255 255 255 / .6); color: var(--ink); }
  .btn-primary:hover { background-color: var(--accent-hover); }
  .btn-ghost:hover { background-color: var(--glass-strong); }
  .footer-links a:hover { color: var(--ink); }
}

/* ─── Hero ─── */
.hero { padding: 56px 0 24px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: 48px; align-items: center;
}
.hero h1 {
  font-size: clamp(42px, 5vw, 72px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em;
}
.lead { margin-top: 26px; font-size: 20px; line-height: 1.6; color: var(--ink-soft); max-width: 30em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* the layered stack */
.stage { position: relative; width: 100%; max-width: 540px; height: 600px; margin-inline: auto; }
.layer { position: absolute; animation: settle 600ms var(--ease-out) both; }
.device { animation-delay: 0ms; }
.wa { animation-delay: 80ms; }
.count { animation-delay: 160ms; }
@keyframes settle {
  from { opacity: 0; translate: 0 12px; filter: blur(6px); }
}

.device {
  top: 64px; left: 92px; width: 300px; padding: 10px; border-radius: var(--r-device);
  background-color: rgb(255 255 255 / .34);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid rgb(255 255 255 / .78);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .85), inset 0 0 0 1px rgb(255 255 255 / .25),
              0 2px 4px rgb(128 70 62 / .06), 0 44px 80px -36px rgb(128 70 62 / .45);
}
.screen { background-color: var(--screen); border-radius: 36px; overflow: hidden; color: var(--ink); }
.notch { width: 84px; height: 18px; background: rgb(15 43 42 / .62); border-radius: 0 0 14px 14px; margin: 0 auto; }
.m-head {
  text-align: center; padding: 14px 16px; border-bottom: 1px solid var(--screen-line);
  background: linear-gradient(160deg, rgb(247 178 124 / .18), rgb(238 170 186 / .16));
}
.m-sub { font-size: 10px; letter-spacing: 2px; color: var(--ink-soft); }
.m-names { font-size: 24px; font-weight: 600; margin-top: 2px; line-height: 1.3; }
.m-names .amp { font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: var(--accent); margin: 0 5px; }
.m-date { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }
.m-body { padding: 14px; }
.m-hello { text-align: center; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.m-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.m-status span {
  border: 1.5px solid var(--screen-line); border-radius: 12px; background-color: rgb(255 255 255 / .7);
  text-align: center; font-size: 10.5px; padding: 8px 2px; color: var(--ink-soft); line-height: 1.3;
}
.m-status span b { display: block; font-size: 16px; font-weight: 400; margin-bottom: 2px; }
.m-status .on { border-color: var(--accent); background-color: rgb(11 94 89 / .08); color: var(--accent); font-weight: 600; }
.m-comp {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding: 9px 12px; border: 1px solid var(--screen-line); border-radius: 12px;
  background-color: rgb(255 255 255 / .7); font-size: 12px;
}
.m-step { display: inline-flex; align-items: center; gap: 8px; }
.m-step i { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 14px; }
.m-step b { direction: ltr; unicode-bidi: isolate; min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.m-submit { margin-top: 12px; background-color: var(--accent); color: var(--accent-ink); text-align: center; border-radius: 12px; padding: 10px; font-size: 13px; font-weight: 600; }
.m-foot { text-align: center; font-size: 9px; color: var(--ink-soft); padding: 4px 0 14px; }

.wa {
  top: 12px; right: 0; width: 244px; padding: 14px 16px 12px;
  border-radius: var(--r-inner); border-top-right-radius: 4px;
  background-color: var(--wa-glass);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgb(255 255 255 / .8);
  box-shadow: var(--hi), 0 2px 4px rgb(128 70 62 / .05), 0 24px 48px -22px rgb(128 70 62 / .42);
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.wa-tag { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--wa); margin-bottom: 4px; }
.wa-tag svg { width: 15px; height: 15px; }
.wa-link { display: inline-block; margin-top: 2px; color: var(--link); direction: ltr; unicode-bidi: isolate; font-size: 13px; text-decoration: underline; text-underline-offset: .2em; }

.count {
  bottom: 40px; left: 0; display: flex; align-items: center; gap: 14px;
  padding: 12px 0; padding-inline-start: 14px; padding-inline-end: 26px;
  border-radius: var(--r-pill);
  background-color: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid rgb(255 255 255 / .8);
  box-shadow: var(--hi), 0 2px 4px rgb(128 70 62 / .05), 0 24px 48px -22px rgb(128 70 62 / .42);
}
.count .num { font-size: 32px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.count .lbl { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
.ring { width: 46px; height: 46px; flex: none; }
.ring-track { stroke: rgb(15 43 42 / .1); }
.ring-fill { stroke: var(--accent); }

/* ─── Sections ─── */
section { scroll-margin-top: 92px; }
.section { padding: 64px 0; }
.section-last { padding-bottom: 80px; }
.head { margin-bottom: 48px; }
.head h2, .faq-head h2 {
  font-size: clamp(32px, 3.9vw, 52px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em;
}
.head p, .faq-head p { color: var(--ink-soft); font-size: 18px; max-width: 36em; }
.head-split { display: grid; gap: 14px; }
.head-center { text-align: center; max-width: 760px; margin-inline: auto; }
.head-center p { margin: 14px auto 0; }

/* ─── Features: bento ─── */
.bento { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tile { padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.tile h3 { font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.tile p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.t-lg { grid-column: span 7; grid-row: span 2; padding: 40px; gap: 14px; }
.t-lg h3 { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; max-width: 16em; }
.t-lg > p { font-size: 17px; max-width: 34em; }
.t-md { grid-column: span 5; }
.t-sm { grid-column: span 4; }
.tint-apricot { background-color: var(--tint-apricot); }
.tint-teal { background-color: var(--tint-teal); }
.tint-rose { background-color: var(--tint-rose); }

.ic {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-inner);
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--ic-bg); color: var(--accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8);
}
.ic svg { width: 24px; height: 24px; }
.ic-row { display: flex; gap: 8px; margin-bottom: 8px; }
.sm-head { display: flex; align-items: center; gap: 14px; }
.t-md .ic { margin-bottom: 6px; }

/* large-tile illustration: the guest choice + the hosts' live count */
.live { margin-top: auto; padding-top: 28px; }
.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border-radius: var(--r-inner); background-color: rgb(255 255 255 / .5); box-shadow: inset 0 0 0 1px var(--hairline); max-width: 420px; }
.choice span { text-align: center; font-size: 14px; font-weight: 500; color: var(--ink-soft); padding: 9px 4px; border-radius: 12px; }
.choice .on { background-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.live-cap { margin-top: 26px; font-size: 13px; color: var(--ink-soft); }
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; border-top: 1px solid var(--hairline); }
.counts > div { display: flex; flex-direction: column; padding: 14px 0 0; padding-inline-end: 12px; }
.counts > div + div { border-inline-start: 1px solid var(--hairline); padding-inline-start: 16px; }
.counts .n { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.counts .l { font-size: 13px; color: var(--ink-soft); }
.c-ok .n { color: var(--ok); } .c-wait .n { color: var(--wait); } .c-no .n { color: var(--no); }
.bar-split { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; margin-top: 18px; background: var(--hairline); }
.bar-split span:nth-child(1) { width: 66%; background: var(--bar-ok); }
.bar-split span:nth-child(2) { width: 22%; background: var(--bar-wait); }
.bar-split span:nth-child(3) { width: 12%; background: var(--bar-no); }
.live-note { margin-top: 16px; font-size: 15px !important; }
.live-note b { color: var(--ink); font-weight: 600; }

/* medium-tile illustrations */
.tables { width: 100%; max-width: 300px; height: auto; margin-top: auto; padding-top: 18px; align-self: flex-start; }
.tables .tb { fill: rgb(255 255 255 / .72); stroke: rgb(15 43 42 / .28); stroke-width: 1.2; }
.tables .st { fill: rgb(11 94 89 / .5); }
.tables .fam { fill: #b85a6e; }
.remind {
  margin-top: auto; padding-top: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.r-num { font-size: 15px; color: var(--ink-soft); display: inline-flex; align-items: baseline; gap: 8px; }
.r-num b { font-size: 30px; line-height: 1.1; color: var(--wait); font-weight: 700; letter-spacing: -0.02em; }
.r-btn { font-size: 14px; font-weight: 600; color: var(--accent-ink); background-color: var(--accent); border-radius: var(--r-pill); padding: 8px 18px; }

/* ─── How: one glass rail ─── */
.rail { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 44px 44px 46px; }
.station { position: relative; padding-top: 46px; padding-inline-end: 32px; }
.station .node {
  position: absolute; top: 0; inset-inline-start: 0; width: 22px; height: 22px; border-radius: 50%;
  background-color: var(--accent); border: 2px solid var(--accent); z-index: 2;
  box-shadow: 0 0 0 6px rgb(11 94 89 / .12);
}
/* connector: a pale track (::after) and an accent fill (::before) that draws along it */
.station:not(:last-child)::after, .station:not(:last-child)::before {
  content: ""; position: absolute; top: 10px; height: 2px;
  inset-inline-start: 22px; inset-inline-end: 0;
}
.station:not(:last-child)::after { background-color: rgb(11 94 89 / .22); }
.station:not(:last-child)::before { background-color: var(--accent); z-index: 1; transform-origin: right center; }
[dir="ltr"] .station:not(:last-child)::before { transform-origin: left center; }

/* The route plays once when the rail scrolls into view (assets/route.js adds
   .rail-ready, then .play). Without JS or with reduced motion it simply shows lit. */
.station:nth-child(1) { --i: 0; } .station:nth-child(2) { --i: 1; }
.station:nth-child(3) { --i: 2; } .station:nth-child(4) { --i: 3; }
.rail-ready .station .node {
  transition: background-color 240ms var(--ease-out), transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
  transition-delay: calc(var(--i) * 460ms);
}
.rail-ready .station:not(:last-child)::before {
  transition: transform 420ms var(--ease-in-out);
  transition-delay: calc(var(--i) * 460ms + 160ms);
}
.rail-ready .station h3, .rail-ready .station p {
  transition: opacity 320ms var(--ease-out);
  transition-delay: calc(var(--i) * 460ms);
}
.rail-ready:not(.play) .station .node { background-color: rgb(255 255 255 / .9); box-shadow: 0 0 0 0 rgb(11 94 89 / 0); transform: scale(0.86); }
.rail-ready:not(.play) .station:not(:last-child)::before { transform: scaleX(0); }
.rail-ready:not(.play) .station h3, .rail-ready:not(.play) .station p { opacity: .4; }
.station h3 { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.station p { color: var(--ink-soft); font-size: 16px; max-width: 24em; }
.types { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.types li {
  font-size: 15px; font-weight: 500; padding: 8px 18px; border-radius: var(--r-pill);
  background-color: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--hi);
}

/* ─── Privacy: one wide slab ─── */
.slab {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px;
  padding: 60px 56px; background-color: var(--tint-teal);
}
.slab h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.slab-copy p { margin-top: 18px; color: var(--ink-soft); font-size: 17px; }
.plist { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-content: start; }
.plist li { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--hairline); }
.plist svg { width: 22px; height: 22px; flex: none; color: var(--accent); margin-top: 3px; }
.plist b { display: block; font-weight: 600; font-size: 17px; line-height: 1.4; }
.plist span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* ─── FAQ ─── */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.faq-head { position: sticky; top: 112px; padding-top: 12px; }
.faq-head p { margin-top: 14px; }
.faq { padding: 6px 36px; }
.faq details + details { border-top: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 0; font-weight: 600; font-size: 18px; line-height: 1.45; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: 10px;
  transition: transform 160ms var(--ease-out);
}
.faq summary:active { transform: scale(0.97); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 400; line-height: 1; color: var(--accent);
  background-color: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform 220ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; padding-inline-end: 48px; color: var(--ink-soft); max-width: 62ch; }

/* ─── Contact: the one big centered card ─── */
.final {
  max-width: 900px; margin: 0 auto; text-align: center; padding: 80px 48px 72px;
  background-color: var(--glass);
  background-image: linear-gradient(150deg, rgb(253 224 199 / .5), rgb(250 220 227 / .45) 55%, rgb(208 238 234 / .4));
}
.final h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.final p { color: var(--ink-soft); font-size: 18px; max-width: 30em; margin: 18px auto 34px; }
.final .mail { display: block; margin-top: 18px; font-size: 15px; color: var(--ink-soft); }
.final .mail a { font-weight: 600; }

/* ─── Footer ─── */
.site-footer { padding: 32px 0 44px; }
.site-footer .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  border-top: 1px solid var(--hairline); padding-top: 28px;
}
.site-footer .brand svg { height: 32px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; }
.footer-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; color: var(--ink-soft);
  font-size: 14px; border-radius: 8px; transition: color 200ms var(--ease-out);
}
.copy { font-size: 13px; color: var(--ink-soft); width: 100%; }

/* ─── Glass fallbacks ─── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass: rgb(253 250 247 / .95); --glass-strong: rgb(254 252 250 / .97);
    --tint-apricot: #fbeadb; --tint-teal: #e5f3f1; --tint-rose: #faeaee; --wa-glass: #eef9f4;
  }
  .device { background-color: rgb(253 250 247 / .92); }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: #fcf9f6; --glass-strong: #fdfbf9; --glass-line: rgb(15 43 42 / .1);
    --tint-apricot: #fbeadb; --tint-teal: #e5f3f1; --tint-rose: #faeaee; --wa-glass: #eef9f4; --screen: #fffdfa;
  }
  .glass, .btn-ghost, .types li, .device, .wa, .count { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .device { background-color: #f3eee8; }
  .count { background-color: var(--glass-strong); }
}

/* ─── Responsive ─── */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 32px; }
  .stage { transform-origin: top center; }
  .t-lg { grid-column: span 12; grid-row: auto; }
  .t-md { grid-column: span 6; }
  .slab { grid-template-columns: 1fr; gap: 32px; }
  .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .faq-head { position: static; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .rail { grid-template-columns: 1fr; padding: 36px 28px 12px; }
  .station { padding-top: 0; padding-inline-start: 44px; padding-inline-end: 0; padding-bottom: 28px; }
  .station .node { top: 3px; }
  .station:not(:last-child)::after, .station:not(:last-child)::before {
    top: 25px; bottom: -3px; height: auto; width: 2px;
    inset-inline-start: 10px; inset-inline-end: auto;
  }
  .station:not(:last-child)::before, [dir="ltr"] .station:not(:last-child)::before { transform-origin: center top; }
  .rail-ready:not(.play) .station:not(:last-child)::before { transform: scaleY(0); }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .site-header { padding: 10px 10px 0; }
  .bar { min-height: 60px; padding-inline-start: 14px; padding-inline-end: 8px; }
  .brand svg { height: 32px; }
  .nav a:not(.btn) { display: none; }
  .nav .btn { margin: 0; }
  .hero { padding: 36px 0 8px; }
  .hero h1 { font-size: clamp(38px, 11vw, 48px); }
  .lead { font-size: 18px; margin-top: 18px; }
  .cta-row { margin-top: 28px; }
  .cta-row .btn { flex: 1 1 auto; }
  .stage { height: 520px; max-width: 354px; }
  .device { top: 72px; left: 50%; margin-left: -125px; width: 250px; padding: 8px; border-radius: 40px; }
  .screen { border-radius: 32px; }
  .m-names { font-size: 21px; }
  .m-body { padding: 12px; }
  .m-status span { font-size: 10px; }
  .wa { top: 0; right: 0; width: 210px; font-size: 13px; padding: 12px 14px 10px; }
  .count { bottom: 0; left: 0; padding-block: 10px; padding-inline-start: 12px; padding-inline-end: 20px; }
  .count .num { font-size: 28px; }
  .ring { width: 40px; height: 40px; }
  .section { padding: 44px 0; }
  .section-last { padding-bottom: 48px; }
  .head { margin-bottom: 32px; }
  .head-split { grid-template-columns: 1fr; }
  .head p, .faq-head p { font-size: 17px; }
  .bento { gap: 12px; }
  .t-lg, .t-md, .t-sm { grid-column: span 12; }
  .tile { padding: 24px; }
  .t-lg { padding: 28px 22px; }
  .t-lg h3 { font-size: 26px; }
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counts > div + div { border-inline-start: 0; padding-inline-start: 0; }
  .counts > div:nth-child(even) { border-inline-start: 1px solid var(--hairline); padding-inline-start: 16px; }
  .counts > div:nth-child(n+3) { border-top: 1px solid var(--hairline); margin-top: 14px; }
  .counts .n { font-size: 30px; }
  .rail { padding: 30px 22px 6px; }
  .slab { padding: 36px 22px 18px; }
  .plist { grid-template-columns: 1fr; }
  .faq { padding: 2px 22px; }
  .faq summary { font-size: 17px; padding: 18px 0; }
  .faq details p { padding-inline-end: 0; }
  .final { padding: 52px 22px 48px; }
  .final .btn { width: 100%; }
  .types { justify-content: flex-start; }
}

/* ─── Legal pages (privacy, terms, accessibility) ─── */
.legal-page { padding: 40px 0 24px; }
.legal-page .wrap { max-width: 860px; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  font-weight: 600; text-decoration: none; color: var(--ink-soft); transition: color 200ms var(--ease-out);
}
.legal-doc {
  /* long reading: a denser pane of the same glass so body text sits on a calm surface */
  --glass: rgb(255 255 255 / .74);
  margin-top: 12px; padding: 56px 64px 60px;
}
.legal-doc h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.legal-doc h2 {
  font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em;
  margin: 44px 0 12px; padding-top: 28px; border-top: 1px solid var(--hairline);
}
.legal-doc h3 { font-size: 18px; line-height: 1.4; font-weight: 700; margin: 26px 0 8px; }
.legal-doc p { margin-bottom: 14px; max-width: 70ch; }
.legal-doc ul, .legal-doc ol { padding-inline-start: 22px; margin-bottom: 16px; max-width: 70ch; }
.legal-doc li { margin-bottom: 9px; }
.legal-doc li::marker { color: var(--accent); }
.legal-doc strong { font-weight: 700; }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 15.5px; }
.legal-doc th, .legal-doc td { text-align: start; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.legal-doc th { font-weight: 700; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; list-style: none; }
.legal-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill);
  text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink);
  background-color: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--hi);
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out);
}
.legal-nav a:active { transform: scale(0.97); }
.legal-nav a[aria-current="page"] { background-color: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .back-link:hover { color: var(--ink); }
  .legal-nav a:not([aria-current="page"]):hover { background-color: var(--glass-strong); }
}
@media (max-width: 767px) {
  .legal-page { padding-top: 24px; }
  .legal-doc { padding: 32px 20px 36px; }
  .legal-doc h2 { margin-top: 34px; padding-top: 22px; font-size: 20px; }
  .legal-doc table { display: block; overflow-x: auto; }
}
body.a11y-high-contrast .legal-nav a { background: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; }
body.a11y-high-contrast .legal-nav a[aria-current="page"] { background: #000000 !important; color: #ffffff !important; }
body.a11y-dark .legal-doc { --glass: rgb(18 36 36 / .82); }

/* ═══════════════════════════════════════════════
   ACCESSIBILITY: same widget + modes as the app (index.html),
   so the shared accessibility statement stays accurate here.
   ═══════════════════════════════════════════════ */
.a11y-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
*:focus { outline: none; }
*:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #0a4a46 !important; outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(255,255,255,0.92), 0 0 0 8px #0a4a46 !important; border-radius: 6px;
}
body.a11y-high-contrast *:focus-visible { outline: 4px solid #ffff00 !important; box-shadow: 0 0 0 6px #000000, 0 0 0 10px #ffff00 !important; }

.skip-link {
  position: fixed; top: -100px; right: 0; background: #0b5e59; color: #f7fbfa; padding: 14px 28px;
  border-radius: 0 0 0 12px; font-size: 16px; font-weight: 700; z-index: 10000; text-decoration: none; transition: top 200ms var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { top: 0; outline: 3px solid #ffff00 !important; outline-offset: -3px !important; }

.a11y-widget { position: fixed; bottom: 20px; left: 20px; z-index: 9998; }
.a11y-toggle {
  width: 56px; height: 56px; border-radius: 50%; background: #1a5fa3; color: #ffffff; border: 3px solid #ffffff;
  font-size: 28px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.35); display: flex; align-items: center;
  justify-content: center; transition: transform 160ms var(--ease-out); font-family: 'Noto Sans Hebrew', sans-serif; line-height: 1;
}
.a11y-toggle:focus-visible { transform: scale(1.08); }
@media (hover: hover) and (pointer: fine) { .a11y-toggle:hover { transform: scale(1.08); } }
.a11y-toggle:active { transform: scale(0.97); }
.a11y-panel-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999;
  align-items: flex-end; justify-content: flex-start; padding: 0;
}
.a11y-panel-overlay.a11y-open { display: flex; }
.a11y-panel {
  background: #ffffff; color: #000000; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
  padding: 0; width: 100%; max-width: 380px; max-height: 90vh; overflow-y: auto; margin: 0 0 0 20px;
  display: flex; flex-direction: column;
}
@media (min-width: 600px) {
  .a11y-panel-overlay { align-items: flex-end; padding: 0 0 90px 20px; }
  .a11y-panel { border-radius: 16px; max-height: 80vh; }
}
@media (max-width: 599px) { .a11y-panel { margin: 0; max-width: none; } }
.a11y-panel-header {
  display: flex; align-items: center; justify-content: space-between; padding: 18px 20px;
  border-bottom: 2px solid #d0d0d0; background: #f4f4f4; border-radius: 16px 16px 0 0; position: sticky; top: 0; z-index: 2;
}
.a11y-panel-header h2 { font-size: 19px; font-weight: 700; color: #000000; margin: 0; }
.a11y-panel-close {
  background: #ffffff; border: 2px solid #000000; width: 44px; height: 44px; border-radius: 50%; font-size: 18px;
  cursor: pointer; color: #000000; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.a11y-panel-body { padding: 8px 16px 20px; }
.a11y-section { margin-top: 14px; }
.a11y-section-title { font-size: 13px; font-weight: 700; color: #333333; letter-spacing: 0.5px; padding: 0 4px 6px; }
.a11y-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px;
  border-bottom: 1px solid #e0e0e0; font-size: 15px; color: #000000;
}
.a11y-option:last-child { border-bottom: none; }
.a11y-option-label { flex: 1; font-weight: 500; color: #000000; }
.a11y-btn {
  padding: 10px 16px; min-width: 80px; min-height: 44px; border-radius: 10px; border: 2px solid #555555;
  background: #ffffff; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; color: #000000;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.a11y-btn:active, .a11y-reset-btn:active, .a11y-panel-close:active { transform: scale(0.97); }
.a11y-reset-btn, .a11y-panel-close { transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .a11y-btn:hover { background: #f4f4f4; }
  }
.a11y-btn[aria-pressed="true"], .a11y-btn.a11y-active { background: #1a5fa3; color: #ffffff; border-color: #1a5fa3; }
.a11y-text-group { display: flex; gap: 6px; }
.a11y-text-group .a11y-btn { min-width: 48px; padding: 10px 8px; }
.a11y-reset-btn {
  width: 100%; margin-top: 16px; padding: 14px; background: #c0392b; color: #ffffff; border: none; border-radius: 10px;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 48px;
}
.a11y-legal-link {
  display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 10px; padding: 10px; min-height: 44px;
  border: 1px solid #888888; border-radius: 8px; font-size: 13px; color: #1a5fa3; text-decoration: underline;
}

/* text size */
body.a11y-text-110 { zoom: 1.10; }
body.a11y-text-125 { zoom: 1.25; }
body.a11y-text-150 { zoom: 1.50; }

/* high contrast: glass becomes solid white on black hairlines, no field, no blur */
body.a11y-high-contrast {
  --ink: #000000; --ink-soft: #000000; --accent: #000000; --accent-hover: #000000; --accent-ink: #ffffff; --link: #000000; --wa: #000000;
  --glass: #ffffff; --glass-strong: #ffffff; --glass-line: #000000; --hairline: #000000; --ic-bg: #ffffff;
  --tint-apricot: #ffffff; --tint-teal: #ffffff; --tint-rose: #ffffff; --wa-glass: #ffffff; --screen: #ffffff; --screen-line: #000000;
  --ok: #00553f; --wait: #663300; --no: #8b0000; --bar-ok: #00553f; --bar-wait: #663300; --bar-no: #8b0000;
  --hi: 0 0 0 transparent; --shadow: 0 0 0 transparent;
  background: #ffffff !important; color: #000000 !important;
}
body.a11y-high-contrast::before { display: none; }
body.a11y-high-contrast * {
  background-image: none !important; text-shadow: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body.a11y-high-contrast a, body.a11y-high-contrast button { text-decoration: underline !important; }
body.a11y-high-contrast .glass, body.a11y-high-contrast .device, body.a11y-high-contrast .wa,
body.a11y-high-contrast .count, body.a11y-high-contrast .types li { background-color: #ffffff !important; border: 2px solid #000000 !important; }
body.a11y-high-contrast .btn, body.a11y-high-contrast .nav .btn { background: #000000 !important; color: #ffffff !important; border: 2px solid #000000 !important; }
body.a11y-high-contrast .btn-ghost { background: #ffffff !important; color: #000000 !important; }
body.a11y-high-contrast .choice .on, body.a11y-high-contrast .r-btn, body.a11y-high-contrast .m-submit { background: #000000 !important; color: #ffffff !important; }
body.a11y-high-contrast .station .node { border-color: #000000; }
body.a11y-high-contrast .station .node, body.a11y-high-contrast .station::after, body.a11y-high-contrast .station::before { background: #000000 !important; }
body.a11y-high-contrast .tables .tb { fill: #ffffff; stroke: #000000; }
body.a11y-high-contrast .tables .st { fill: #000000; }
body.a11y-high-contrast .tables .fam { fill: #8b0000; }
body.a11y-high-contrast .notch { background: #000000; }
body.a11y-high-contrast .ek-lockup-word, body.a11y-high-contrast .ek-lockup-accent { fill: #000000; }
body.a11y-high-contrast .a11y-panel button { background: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; }
body.a11y-high-contrast .a11y-panel .a11y-btn[aria-pressed="true"] { background: #ffff00 !important; }
body.a11y-high-contrast .a11y-toggle { background: #000000 !important; color: #ffff00 !important; border: 3px solid #ffff00 !important; }

/* dark: the same glass at dusk */
html:has(body.a11y-dark) { background: #0e1919; }
body.a11y-dark {
  --base: #0e1919;
  --ink: #eef6f4; --ink-soft: #c2d6d2; --accent: #86d8cd; --accent-hover: #a6e5dc; --accent-ink: #082220; --link: #9fe3d9; --wa: #8fe0bd;
  --glass: rgb(18 36 36 / .58); --glass-strong: rgb(20 40 40 / .72); --glass-line: rgb(255 255 255 / .14);
  --hairline: rgb(255 255 255 / .16); --hi: inset 0 1px 0 rgb(255 255 255 / .1);
  --shadow: 0 26px 60px -28px rgb(0 0 0 / .6); --ic-bg: rgb(255 255 255 / .08);
  --tint-apricot: rgb(72 46 30 / .55); --tint-teal: rgb(18 58 56 / .6); --tint-rose: rgb(70 36 48 / .55);
  --wa-glass: rgb(20 52 44 / .66); --screen: rgb(16 30 30 / .9); --screen-line: rgb(255 255 255 / .14);
  --ok: #7fd8c4; --wait: #f3bf86; --no: #f2a6b7;
  color: var(--ink);
}
body.a11y-dark::before {
  background:
    radial-gradient(62vmax 48vmax at 92% 2%, rgb(170 90 44 / .42), rgb(170 90 44 / 0) 64%),
    radial-gradient(54vmax 46vmax at 4% 34%, rgb(140 62 90 / .38), rgb(140 62 90 / 0) 62%),
    radial-gradient(72vmax 56vmax at 34% 108%, rgb(24 110 106 / .5), rgb(24 110 106 / 0) 64%),
    #0e1919;
}
body.a11y-dark ::selection { background: rgb(134 216 205 / .3); color: #ffffff; }
body.a11y-dark .device { background-color: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .18); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 44px 80px -36px rgb(0 0 0 / .7); }
body.a11y-dark .wa, body.a11y-dark .count { border-color: rgb(255 255 255 / .16); }
body.a11y-dark .m-status span, body.a11y-dark .m-comp, body.a11y-dark .choice { background-color: rgb(255 255 255 / .06); }
body.a11y-dark .m-status .on { background-color: rgb(134 216 205 / .14); }
body.a11y-dark .notch { background: #050c0c; }
body.a11y-dark .ring-track { stroke: rgb(255 255 255 / .16); }
body.a11y-dark .faq summary::after { background-color: #142828; }
body.a11y-dark .rail-ready:not(.play) .station .node { background-color: #142828; }
body.a11y-dark .station::before { background-color: var(--accent); }
body.a11y-dark .station::after { background-color: rgb(134 216 205 / .4); }
body.a11y-dark .tables .tb { fill: rgb(255 255 255 / .1); stroke: rgb(255 255 255 / .4); }
body.a11y-dark .tables .st { fill: rgb(134 216 205 / .7); }
body.a11y-dark .tables .fam { fill: #f2a6b7; }
body.a11y-dark .final { background-image: linear-gradient(150deg, rgb(110 60 34 / .4), rgb(100 46 66 / .35) 55%, rgb(18 70 66 / .4)); }
body.a11y-dark .btn-primary { box-shadow: none; }
body.a11y-dark .ek-lockup-word { fill: #eef6f4; }
body.a11y-dark .ek-lockup-accent { fill: #86d8cd; }
body.a11y-dark .a11y-panel, body.a11y-dark .a11y-panel-body, body.a11y-dark .a11y-panel-header { background: #1c2b2b !important; color: #f5f5f5 !important; }
body.a11y-dark .a11y-panel-header { border-bottom-color: #555555 !important; }
body.a11y-dark .a11y-panel-header h2, body.a11y-dark .a11y-section-title,
body.a11y-dark .a11y-option, body.a11y-dark .a11y-option-label { color: #f5f5f5 !important; }
body.a11y-dark .a11y-btn { background: #1c2b2b; color: #f5f5f5; border-color: #888888; }
body.a11y-dark .a11y-btn[aria-pressed="true"] { background: #1a5fa3; color: #ffffff; }
body.a11y-dark .a11y-panel-close { background: #555555 !important; color: #ffffff !important; border-color: #f5f5f5 !important; }
body.a11y-dark .a11y-legal-link { color: #99c2ff; }

/* reduced motion */
body.a11y-no-motion *, body.a11y-no-motion *::before, body.a11y-no-motion *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}
body.a11y-no-motion .layer { animation: none !important; }
body.a11y-no-motion .btn:active, body.a11y-no-motion summary:active, body.a11y-no-motion button:active { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .layer { animation: none !important; }
  .btn:active, summary:active, button:active { transform: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* dyslexia-friendly font */
body.a11y-dyslexic, body.a11y-dyslexic * {
  font-family: 'Verdana', 'Tahoma', 'Arial', sans-serif !important; letter-spacing: 0.05em !important; word-spacing: 0.15em !important;
}

/* highlight links & buttons */
body.a11y-highlight a, body.a11y-highlight button, body.a11y-highlight summary, body.a11y-highlight [role="button"] {
  outline: 2px solid #ff6600 !important; outline-offset: 2px !important; border-radius: 4px;
}
body.a11y-highlight a { background: #fff3e0 !important; color: #000000 !important; }

/* wider line spacing */
body.a11y-spacing, body.a11y-spacing p, body.a11y-spacing li, body.a11y-spacing div, body.a11y-spacing span,
body.a11y-spacing h1, body.a11y-spacing h2, body.a11y-spacing h3, body.a11y-spacing summary {
  line-height: 2.2 !important; letter-spacing: 0.08em !important;
}
body.a11y-spacing p { margin-bottom: 14px !important; }

/* big cursor */
body.a11y-big-cursor, body.a11y-big-cursor * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M4 4 L4 36 L14 28 L20 44 L26 42 L20 26 L34 26 Z" fill="black" stroke="white" stroke-width="2"/></svg>') 4 4, auto !important;
}
body.a11y-big-cursor button, body.a11y-big-cursor a, body.a11y-big-cursor summary, body.a11y-big-cursor [role="button"] {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M16 4 L16 32 L24 32 L24 44 L32 44 L32 32 L40 32 Z" fill="black" stroke="white" stroke-width="2"/></svg>') 24 4, pointer !important;
}

/* hide emojis / decorative visuals */
body.a11y-no-emoji .a11y-decorative-emoji, body.a11y-no-emoji .stage, body.a11y-no-emoji .ic,
body.a11y-no-emoji .ic-row, body.a11y-no-emoji .tables, body.a11y-no-emoji::before { display: none !important; }
body.a11y-no-emoji .hero-grid { grid-template-columns: 1fr; }

@media (max-width: 320px) { .a11y-widget { bottom: 10px; left: 10px; } }