/* ═══════════════════════════════════════════════════════════════════════
   TACOPS — marketing site
   Dark, restrained, sectioned. The palette is built around the real brand
   mark: #528b39, the olive sampled from the app icon — not a neon green.
   All spacing/direction uses logical properties so RTL and LTR share one
   stylesheet with no mirrored overrides.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Ground — layered, never flat black */
  --bg:        #080a0e;
  --bg-alt:    #0c1016;
  --panel:     #11161e;
  --panel-2:   #151c26;

  /* Brand — #528b39 is the logo olive; --accent is it lifted for AA on dark */
  --brand:     #528b39;
  --accent:    #8fc866;
  --accent-dim:#6f9e4d;
  --glow:      rgb(var(--accent-rgb) / .14);

  /* Signal colors, borrowed from the app's own semantics */
  --fab:       #2b3b25;   /* floating controls - accent at 26% over the page */
  --fab-line:  rgb(var(--accent-rgb) / .38);
  --sun:       #f2b230;   /* day/night toggle, shown on the dark bar */
  --moon:      #a9bde0;
  --alert:     #e5273a;   /* SOS / incident — same red as the bullseye center */
  --train:     #3fb6ff;   /* dry-fire blue, --train-blue in the app */

  --text:      #eef2f7;
  --text-2:    #b9c4d2;
  --dim:       #7d8899;
  --line:      rgba(255,255,255,.075);
  --line-2:    rgba(255,255,255,.13);

  --brand-rgb:  82 139 57;
  --accent-rgb: 143 200 102;
  --alert-rgb:  229 39 58;
  --train-rgb:  63 182 255;
  /* A filled button is a surface judged against its own label, not against
     the page — so it can be the exact logo green in both themes. #528b39
     with dark text clears AA (4.64:1); with white text it would not (4.11). */
  --btn:       #528b39;
  --btn-hi:    #5a9840;
  --on-btn:    #0a1206;
  --on-accent: #0a1206;     /* text on a filled accent button */
  --accent-hi: #a9d98a;     /* accent, hovered */
  --header-bg: rgba(8,10,14,.82);
  --h1-grad:   linear-gradient(178deg,#fff 30%,#c7d2df 100%);
  --frame-1:#2a3340; --frame-2:#12171f; --frame-3:#0a0d12;

  --r:         14px;
  --r-lg:      22px;
  --wrap:      1180px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

/* `*` alone does not match pseudo-elements, so every ::before with a border
   was quietly content-box: a 19px circle rendered 21px wide while the glyph
   masked inside it stayed 19px, leaving the two anchored at the same edge
   but never concentric. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Heebo,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:1rem; line-height:1.7; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

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

/* ── Header ─────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:60;
  background:var(--header-bg);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-block-end:1px solid var(--line);
}
/* The bar is left-to-right in both languages: mark and wordmark read as one
   lockup wherever they appear, and the menu button keeps one corner. Only the
   link list follows the page direction. */
.nav{display:flex;align-items:center;gap:26px;height:70px;direction:ltr}
[dir=rtl] .nav ul{direction:rtl}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);flex-shrink:0}
.brand img{width:40px;height:40px}
.brand span{font-weight:900;font-size:1.1875rem;letter-spacing:.01em}
.nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;
  margin-left:auto;flex-wrap:wrap}
.nav ul a{
  color:var(--text-2);font-size:0.9062rem;font-weight:600;
  padding:8px 13px;border-radius:9px;display:block;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.nav ul a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav ul a.on{color:var(--accent)}
.nav ul a.lang{
  border:1px solid var(--line-2);color:var(--text);
  margin-inline-start:8px;font-size:0.8438rem;
}
.nav ul a.lang:hover{border-color:var(--accent-dim);background:transparent}

/* ── Section rhythm — alternating tone is what creates the "zones" ──── */
section{padding-block:96px;position:relative}
section.tinted{background:var(--bg-alt);border-block:1px solid var(--line)}
section.tight{padding-block:64px}

/* Eyebrow: numbered label above a section heading */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:0.7812rem;font-weight:800;letter-spacing:.16em;
  color:var(--accent);text-transform:uppercase;margin-block-end:16px;
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--accent-dim);flex-shrink:0;
}
.eyebrow .num{
  font-variant-numeric:tabular-nums;color:var(--dim);
  border:1px solid var(--line-2);border-radius:5px;padding:1px 7px;font-size:0.7188rem;
}

h1{
  font-size:clamp(2.125rem,5.6vw,3.75rem);line-height:1.1;font-weight:900;
  letter-spacing:-.02em;margin:0 0 20px;
  background:var(--h1-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
h2{font-size:clamp(1.5625rem,3.4vw,2.25rem);line-height:1.22;font-weight:900;
  letter-spacing:-.015em;margin:0 0 14px}
h3{font-size:1.0938rem;font-weight:800;margin:0 0 8px;letter-spacing:-.005em}
p{margin:0 0 15px;color:var(--text-2)}
.lede{font-size:clamp(1.0312rem,2vw,1.1875rem);color:var(--dim);max-width:62ch;margin-block-end:44px}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{
  position:relative;padding-block:clamp(64px,9vw,110px) 0;overflow:hidden;
}
.hero::before{ /* soft brand glow behind the headline */
  content:"";position:absolute;inset-block-start:-260px;inset-inline-start:50%;
  transform:translateX(-50%);
  width:1000px;height:640px;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow),transparent 72%);
}
.hero::after{ /* faint technical grid — texture, not decoration */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 76% 58% at 50% 0%,#000 12%,transparent 76%);
          mask-image:radial-gradient(ellipse 76% 58% at 50% 0%,#000 12%,transparent 76%);
}
.hero .wrap{position:relative;z-index:1}
.herogrid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
/* Grid items default to min-width:auto, so the phone mockups - which do not
   shrink - sized the single mobile column wider than the viewport, and every
   block child inherited that width: the buttons ran off the left edge. */
.herogrid>*{min-width:0}
.herotext p{font-size:clamp(1rem,2vw,1.1562rem);max-width:56ch}

.cta{
  display:inline-block;padding:13px 27px;border-radius:11px;
  background:var(--btn);color:var(--on-btn);font-weight:800;font-size:0.9688rem;
  margin-inline-end:11px;margin-block-start:12px;
  border:1px solid transparent;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 28px -12px var(--btn);
}
.cta:hover{background:var(--btn-hi);color:var(--on-btn);transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 16px 34px -12px var(--btn)}
.cta.ghost{
  background:transparent;color:var(--text);border-color:var(--line-2);box-shadow:none;
}
.cta.ghost:hover{background:rgba(255,255,255,.05);border-color:var(--accent-dim);color:var(--text)}

/* The way out of the home page's selection and into the full set. */
.more{margin-block-start:26px;text-align:center}
.more .cta{margin-inline-end:0}

/* ── Download badges ────────────────────────────────────────────────── */
.dl{margin-block-start:38px}
.dl>span{
  display:block;font-size:0.75rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-block-end:12px;
}
.badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.badges a{display:block;transition:opacity .18s var(--ease)}
.badges a:hover{opacity:.82}
/* Apple ships ~0 padding; Google bakes ~41px of transparent margin into its
   badge. Scaling Google up and clipping the slack makes the two read as the
   same size without altering either official asset. */
.badges img.apple{height:52px;width:auto}
.badges img.play{height:75px;width:auto;margin:-12px -11px}

/* ── Phone mockup ───────────────────────────────────────────────────── */
.phones{display:flex;gap:26px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
.phone{
  position:relative;flex:0 0 auto;width:min(258px,72vw);
  border-radius:34px;padding:9px;
  background:linear-gradient(165deg,var(--frame-1),var(--frame-2) 44%,var(--frame-3));
  border:1px solid var(--line-2);
  box-shadow:0 44px 78px -34px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.55),
             0 1px 0 rgba(255,255,255,.07) inset;
  transition:transform .4s var(--ease);
}
.phone img{border-radius:26px;width:100%;display:block}
.phone::after{ /* speaker slit — enough to read as a device, no skeuomorphism */
  content:"";position:absolute;inset-block-start:19px;inset-inline-start:50%;
  transform:translateX(-50%);
  width:56px;height:4px;border-radius:3px;background:rgba(255,255,255,.16);
}
.phone.lift{transform:translateY(-26px)}
.phone.tilt-a{transform:rotate(-2.4deg)}
.phone.tilt-b{transform:rotate(2.4deg)}
.phones:hover .phone{transform:none}
.phone figcaption{
  position:absolute;inset-block-end:-34px;inset-inline:0;text-align:center;
  font-size:0.7812rem;color:var(--dim);
}
.hero .phones{justify-content:flex-end}

/* ── Capability zones ───────────────────────────────────────────────── */
.zone{
  display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:46px;
  padding-block:44px;border-block-start:1px solid var(--line);
}
.zone:first-of-type{border-block-start:0}
.zone-hd h2{
  font-size:1.4375rem;font-weight:900;letter-spacing:-.015em;margin-block-end:10px;
}
.zone-hd p{font-size:0.9062rem;color:var(--dim);margin:0}
.zone-hd .num{
  display:inline-block;font-size:0.75rem;font-weight:800;letter-spacing:.14em;
  color:var(--accent);margin-block-end:9px;font-variant-numeric:tabular-nums;
}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px}
.card{
  background:linear-gradient(168deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);
  padding:22px 22px 24px;position:relative;overflow:hidden;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.card::before{ /* hairline highlight along the top edge */
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent);
}
.card:hover{border-color:rgb(var(--accent-rgb) / .32);transform:translateY(-3px)}
.card h2,.card h3{display:flex;align-items:center;gap:11px;margin-block-end:9px;
  font-size:1.0938rem;font-weight:800;letter-spacing:-.005em;margin-block-start:0}
.card p{font-size:0.8938rem;color:var(--dim);margin:0;line-height:1.66}

/* Icon chip — houses the app's own SVG icons at a consistent size */
.ico{
  width:36px;height:36px;flex-shrink:0;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgb(var(--accent-rgb) / .09);border:1px solid rgb(var(--accent-rgb) / .2);
  color:var(--accent);
}
.ico svg{width:19px;height:19px;display:block}
.ico img{width:20px;height:auto;display:block}
/* Icons carried over from the app keep their own semantics */
.ico.is-weapon{background:rgb(var(--train-rgb) / .1);border-color:rgb(var(--train-rgb) / .24);color:var(--train)}
.ico.is-alert {background:rgb(var(--alert-rgb) / .1); border-color:rgb(var(--alert-rgb) / .26); color:var(--alert)}
.ico.is-plain {background:rgba(255,255,255,.05);border-color:var(--line-2);color:var(--text-2)}

/* ── Stat / trust band ──────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));grid-template-rows:auto auto;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
/* Each cell is a 2-row subgrid: the title row is shared across the strip, so a title that wraps
   to two lines no longer pushes ITS subtitle below the neighbours' (Or, 22/09/2026). Titles sit at
   the bottom of their row, next to the subtitle; the font is sized so all four fit one line on
   a desktop. Browsers without subgrid simply fall back to independent cells. */
.stat{background:var(--bg-alt);padding:24px 20px;text-align:center;display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:6px}
.stat b{display:block;font-size:clamp(1.25rem,1.6vw,1.375rem);font-weight:900;letter-spacing:-.02em;color:var(--text);align-self:end}
.stat span{font-size:0.8438rem;color:var(--dim);align-self:start}

/* ── Prose / notes / gallery ────────────────────────────────────────── */
.prose{max-width:74ch}
.prose h2{font-size:1.375rem;margin-block:34px 12px}
.prose ul{padding-inline-start:20px;color:var(--text-2)}
.prose li{margin-block-end:8px}
.note{
  border:1px solid var(--line);border-inline-start:3px solid var(--accent-dim);
  background:var(--panel);border-radius:var(--r);padding:16px 20px;
  color:var(--dim);font-size:0.9062rem;margin-block-start:26px;
}
.notice{
  border:1px solid var(--line);border-inline-start:3px solid var(--accent);
  background:var(--panel);border-radius:var(--r);padding:15px 20px;
  margin-block:20px 30px;font-size:0.9062rem;line-height:1.65;color:var(--text-2);
}
.notice strong{color:var(--text)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;margin-block-start:14px}
.shotfig{margin:0}
.shotfig img{border-radius:var(--r);border:1px solid var(--line-2);
  box-shadow:0 26px 52px -26px rgba(0,0,0,.85)}
.shotfig figcaption{font-size:0.8125rem;color:var(--dim);margin-block-start:11px;text-align:center}

/* ── Platform strip ─────────────────────────────────────────────────── */
.plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px}
.plat{
  border:1px solid var(--line);border-radius:var(--r);padding:22px;
  background:var(--panel);
}
.plat b{display:block;font-size:1rem;margin-block-end:5px}
.plat span{font-size:0.8625rem;color:var(--dim);line-height:1.6}

/* ── CTA band ───────────────────────────────────────────────────────── */
.band{
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgb(var(--brand-rgb) / .15),var(--panel) 52%);
  padding:clamp(32px,5vw,54px);text-align:center;position:relative;overflow:hidden;
}
.band::before{
  content:"";position:absolute;inset-block-start:-140px;inset-inline-start:50%;
  transform:translateX(-50%);width:620px;height:320px;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow),transparent 70%);
}
.band>*{position:relative}
.band h2{margin-block-end:10px}
.band .lede{margin-inline:auto;margin-block-end:26px}

/* ── Contact form ───────────────────────────────────────────────────── */
form{max-width:560px;margin-block-start:30px}
form div{margin-block-end:15px}
label{display:block;font-size:0.8438rem;font-weight:700;color:var(--text-2);margin-block-end:6px}
input,textarea{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--text);
  font:inherit;font-size:0.9375rem;transition:border-color .18s var(--ease);
}
input:focus,textarea:focus{outline:none;border-color:var(--accent-dim)}
textarea{min-height:132px;resize:vertical}
button[type=submit]{
  padding:13px 30px;border-radius:11px;border:0;background:var(--btn);
  color:var(--on-btn);font-weight:800;font-size:0.9688rem;cursor:pointer;font-family:inherit;
  transition:background .18s var(--ease)}
button[type=submit]:hover{background:var(--btn-hi)}

/* ── Legal document ─────────────────────────────────────────────────── */
.toc{
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:22px 26px;margin-block-end:38px;
}
.toctitle{font-weight:900;font-size:0.9375rem;margin-block-end:12px}
.toc ul{columns:2;column-gap:36px;list-style:none;margin:0;padding:0}
.toc li{break-inside:avoid;margin-block-end:5px}
.toc a{font-size:0.85rem;color:var(--text-2)}
.toc a:hover{color:var(--accent)}
.toc .l2{font-weight:800;margin-block-start:9px}
.toc .l3{padding-inline-start:13px}
.legal{max-width:84ch}
.legal h2{font-size:1.3125rem;margin-block:38px 12px;padding-block-end:9px;
  border-block-end:1px solid var(--line)}
.legal h3{font-size:1.0312rem;margin-block:24px 8px;color:var(--text)}
.legal p{font-size:0.9125rem;line-height:1.85;color:var(--text-2)}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer{border-block-start:1px solid var(--line);padding-block:36px;
  background:var(--bg-alt);margin-block-start:0}
.fgrid{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  font-size:0.85rem;color:var(--dim)}
.fgrid a{color:var(--text-2)}
.fgrid a:hover{color:var(--accent)}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:980px){
  .herogrid{grid-template-columns:1fr;gap:44px}
  .hero .phones{justify-content:center}
  .zone{grid-template-columns:1fr;gap:22px;padding-block:34px}
  .phone.lift,.phone.tilt-a,.phone.tilt-b{transform:none}
}
/* ── Mobile navigation ──────────────────────────────────────────────────
   Wrapping the same row of links onto three lines cost 155px of header on a
   phone - the hero started below the fold. Under 720px the links collapse
   behind a button and the bar is one 62px row again. The button is hidden
   above that width, so the desktop nav is untouched. */
.navtoggle{display:none;margin-inline-start:auto;width:42px;height:42px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:transparent;border:1px solid var(--line-2);border-radius:10px;cursor:pointer}
.navtoggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--text-2);
  transition:transform .22s var(--ease),opacity .16s var(--ease)}
.navtoggle:hover{border-color:var(--accent-dim)}
.navtoggle:hover span{background:var(--text)}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:720px){
  .nav{height:auto;padding-block:10px;flex-wrap:wrap;gap:0}
  .navtoggle{display:flex}
  /* One wrapping row rather than a column: every link claims a full line, and
     the language switch and the day/night toggle - the two controls, not
     destinations - share the last one. */
  .nav ul{width:100%;margin-left:0;flex-flow:row wrap;align-items:center;
    gap:2px;overflow:hidden;max-height:0;transition:max-height .26s var(--ease)}
  .nav ul[data-open="1"]{max-height:30rem;padding-block:10px 4px}
  .nav ul li{width:100%}
  .nav ul a{display:block;padding:12px 14px;font-size:0.9375rem;border-radius:10px}
  /* One height for both controls, so the row reads as a pair rather than two
     things that happened to land on the same line. */
  .nav ul li:nth-last-child(2),.nav ul li:last-child{height:46px;margin-block-start:8px}
  .nav ul li:nth-last-child(2){flex:1;width:auto}
  .nav ul li:last-child{width:auto;margin-inline-start:8px}
  .nav ul a.lang{display:flex;align-items:center;justify-content:center;height:100%;
    margin-inline-start:0;padding-block:0}
  /* The same held-back green the circles carry on a wide screen - in the menu
     the two controls should read as controls, not as two more links. */
  .nav ul a.lang,.nav ul li:last-child .theme-btn{
    background:var(--fab);border-color:var(--fab-line);color:var(--text)}
  .nav ul li:last-child .theme-btn{width:46px;height:46px}
}

@media (max-width:640px){
  section{padding-block:64px}
  .wrap{padding-inline:20px}
  .toc ul{columns:1}
  .cta{display:block;text-align:center;margin-inline-end:0}
  .phones{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ── Hero device stack ──────────────────────────────────────────────────
   Two phones side by side need ~540px; the hero column is narrower than
   that, so they wrapped and the hero grew a screen taller. Overlapping
   them reads as a device family and fits the column. */
.phones.stack{flex-wrap:nowrap;gap:0;justify-content:flex-end;align-items:center}
.phones.stack .phone{width:min(206px,42vw)}
.phones.stack .phone+.phone{margin-inline-start:-62px}
.phones.stack .phone:first-child{z-index:1}
.phones.stack .phone:last-child{z-index:2}
.hero{padding-block:clamp(48px,6vw,84px) clamp(40px,5vw,72px)}
/* Keep the headline off orphan words like a lone "אמת" on its own line. */
h1,h2{text-wrap:balance}
@media (max-width:980px){
  .phones.stack{justify-content:center}
  .phones.stack .phone{width:min(200px,40vw)}
}

/* Three cards per zone should sit on one row: the zone header takes 300px of
   the 1128px wrap, so the cards' min-width has to clear (1128-346-2*18)/3. */
.zone .grid{grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:16px}
.zone .card{padding:20px 19px 21px}
.zone .card h2,.zone .card h3{font-size:1.0312rem;gap:10px}
.zone .card p{font-size:0.8625rem}
.zone .ico{width:33px;height:33px;border-radius:9px}

/* "iOS · Android · דפדפן" was breaking after the last separator. */
.stat b{text-wrap:balance}

/* ── Footer ─────────────────────────────────────────────────────────────
   Four columns, then a rule and a bottom bar. Legal moved here out of the
   primary nav, alongside the addresses people actually need. */
.fcols{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:40px;
  padding-block-end:34px}
.fbrand .brand{margin-block-end:14px}
.fbrand .brand img{width:36px;height:36px}
.fbrand p{font-size:0.875rem;color:var(--dim);max-width:34ch;margin-block-end:18px}
.fbrand .badges img.apple{height:40px}
.fbrand .badges img.play{height:58px;margin:-9px -9px}
.fcol h4{font-size:0.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-2);margin:0 0 14px}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fcol ul a{font-size:0.875rem;color:var(--dim)}
.fcol ul a:hover{color:var(--accent)}
.fbottom{border-block-start:1px solid var(--line);padding-block-start:22px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:0.8375rem;color:var(--dim)}
.flang{margin-inline-start:auto;border:1px solid var(--line-2);border-radius:8px;
  padding:5px 13px;color:var(--text-2);font-size:0.8125rem;font-weight:600}
.flang:hover{border-color:var(--accent-dim);color:var(--text)}

/* ── About ──────────────────────────────────────────────────────────────
   The "what it is not" list is a legal statement, so it gets its own
   treatment rather than sitting as a plain bulleted list in prose. */
.subhd{font-size:0.9375rem;font-weight:800;letter-spacing:.03em;color:var(--text-2);
  margin:34px 0 14px}
.notlist{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:10px;max-width:78ch}
.notlist li{position:relative;padding-block:14px;padding-inline:52px 20px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  font-size:0.9125rem;color:var(--text-2);line-height:1.65}
.notlist li::before{
  content:"";position:absolute;inset-inline-start:18px;inset-block-start:17px;
  width:19px;height:19px;border-radius:50%;
  background:rgb(var(--alert-rgb) / .12);border:1px solid rgb(var(--alert-rgb) / .34);
}
.notlist li::after{
  content:"";position:absolute;inset-inline-start:24px;inset-block-start:23px;
  width:7px;height:7px;
  background:
    linear-gradient(45deg,transparent 44%,var(--alert) 44% 56%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,var(--alert) 44% 56%,transparent 56%);
}

/* ── Contact address cards ──────────────────────────────────────────── */
.mailgrid{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.mailcard{display:block;color:inherit}
.mailcard p{margin-block-end:14px}
.mailcard b{font-size:0.85rem;color:var(--accent);font-weight:700;
  word-break:break-all;letter-spacing:.01em}
.mailcard:hover b{color:var(--accent-hi)}

@media (max-width:900px){
  .fcols{grid-template-columns:repeat(3,1fr);gap:30px}
  .fbrand{grid-column:1/-1}
}
/* Even on a phone the three link columns stay side by side — the lists are
   short, and stacking them buries the legal links under a long scroll. */
@media (max-width:560px){
  .fcols{grid-template-columns:repeat(3,1fr);gap:22px}
  .fcol h4{font-size:0.6875rem;letter-spacing:.1em;margin-block-end:11px}
  .fcol ul{gap:8px}
  .fcol ul a{font-size:0.7875rem;word-break:break-word}
  .flang{margin-inline-start:0}
}

/* The form alone left half the section empty. The side panel earns that space:
   telling people what to include is the difference between a useful first
   message and three rounds of clarifying questions. */
.formgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:52px;align-items:start;margin-block-start:30px}
.formgrid form{margin-block-start:0;max-width:none}
.formside{border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);padding:24px 26px}
.formside h4{font-size:0.7812rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.formside ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.formside li{font-size:0.8938rem;color:var(--text-2);line-height:1.6;
  padding-inline-start:20px;position:relative}
.formside li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:9px;
  width:6px;height:6px;border-radius:50%;background:var(--accent-dim)}
.sidecontact{margin-block-start:24px;padding-block-start:20px;
  border-block-start:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.sidecontact span{font-size:0.75rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.sidecontact a{font-size:0.9375rem;font-weight:700}
@media (max-width:860px){ .formgrid{grid-template-columns:1fr;gap:32px} }

/* ── Contact form ───────────────────────────────────────────────────────
   Two columns for the short answers, full width for the one that needs
   room. The fields replaced a "what to include" hint panel — a hint can be
   skipped, a field gets answered. */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.fields .full{grid-column:1/-1}
form{max-width:none;margin-block-start:30px}
form .fields div{margin-block-end:0}
.req{color:var(--alert);font-weight:700}
select{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--text);
  font:inherit;font-size:0.9375rem;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%237d8899' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
  background-size:11px 7px;
  background-position:calc(100% - 15px) 53%;
  background-repeat:no-repeat;
  padding-inline-end:38px;
}
[dir=rtl] select{background-position:15px 53%}
select:focus{outline:none;border-color:var(--accent-dim)}
textarea::placeholder,input::placeholder{color:var(--dim);opacity:.75}
textarea{min-height:118px}
.formfoot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-block-start:22px}
.formfoot span{font-size:0.8625rem;color:var(--dim)}
@media (max-width:620px){ .fields{grid-template-columns:1fr} }

/* ── Accessibility ──────────────────────────────────────────────────────
   Every page carries exactly one h1. Only the home hero gets the display
   treatment; elsewhere the h1 is the section heading and reads at h2 size. */
h1{font-size:clamp(1.5625rem,3.4vw,2.25rem);line-height:1.22;font-weight:900;
  letter-spacing:-.015em;margin:0 0 14px;background:none;color:var(--text);
  -webkit-text-fill-color:currentColor}
.hero h1{
  font-size:clamp(2.125rem,5.6vw,3.75rem);line-height:1.1;margin:0 0 20px;letter-spacing:-.02em;
  background:var(--h1-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* Skip link: the first thing a keyboard reaches, visible only when focused. */
.skip{
  position:absolute;inset-block-start:-100px;inset-inline-start:16px;z-index:200;
  background:var(--btn);color:var(--on-btn);font-weight:800;font-size:0.9375rem;
  padding:12px 20px;border-radius:0 0 11px 11px;
  transition:inset-block-start .18s var(--ease);
}
.skip:focus{inset-block-start:0;color:var(--on-btn)}
#main:focus{outline:none}
/* Footer column headings are h2 for document structure, not for size. */
.fhd{font-size:0.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-2);margin:0 0 14px;line-height:1.4}

/* ── Accessibility statement ────────────────────────────────────────── */
.a11ylist{list-style:none;margin:0;padding:0;display:grid;gap:11px;max-width:84ch;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.a11ylist li{position:relative;padding-block:15px;padding-inline:50px 20px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  font-size:0.9rem;color:var(--text-2);line-height:1.62}
.a11ylist li::before{content:"";position:absolute;inset-inline-start:18px;inset-block-start:18px;
  width:19px;height:19px;border-radius:50%;
  background:rgb(var(--accent-rgb) / .13);border:1px solid rgb(var(--accent-rgb) / .34)}
.a11ylist li::after{content:"";position:absolute;inset-inline-start:23.5px;inset-block-start:23px;
  width:8px;height:4.5px;border:1.9px solid var(--accent);border-block-start:0;border-inline-end:0;
  transform:rotate(-45deg)}

.a11ycontact{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;max-width:900px}
.a11ycontact>div{background:var(--panel);padding:20px 22px;display:flex;
  flex-direction:column;gap:5px}
.a11ycontact span{font-size:0.7188rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.a11ycontact b{font-size:0.9688rem;font-weight:700;color:var(--text)}

/* ── Accessibility menu ─────────────────────────────────────────────────
   An aid layered on an already-accessible page. It must never be the only
   route to any of this, and it must itself be keyboard-operable. */
/* The stack sits on the side the text runs away from - left in Hebrew, right
   in English - so it covers margin rather than words. */
.a11y-wrap{position:fixed;inset-block-end:18px;inset-inline-end:18px;z-index:150;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.a11y-btn{
  width:50px;height:50px;border-radius:50%;cursor:pointer;
  background:var(--btn);border:1px solid rgba(0,0,0,.25);
  display:grid;place-items:center;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.85);
  transition:transform .18s var(--ease);
}
.a11y-btn:hover{transform:scale(1.06)}

/* ── Floating controls (desktop) ────────────────────────────────────────
   On a wide screen the language switch and the day/night toggle leave the bar
   and join the accessibility button as a small stack in the corner. The bar
   goes back to being only navigation, and the two controls stop competing
   with the wordmark for the same row. On a phone they stay in the menu, where
   there is no corner to spare. */
.fabctl,.a11y-wrap .theme-btn.fabctl{
  /* Exactly the accessibility button's box, so the three read as one column
     rather than three sizes that happen to be stacked. */
  width:50px;height:50px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
  /* A held-back version of the same green: present enough to find at a glance
     in both themes, quiet enough that the solid green button stays primary.
     Fill measured against the page - 1.66:1 on dark, 1.29:1 on light. */
  background:var(--fab);border:1px solid var(--fab-line);color:var(--text);
  font:inherit;font-size:0.8125rem;font-weight:800;letter-spacing:.02em;
  text-decoration:none;line-height:1;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.85);margin:0;
  transition:transform .18s var(--ease),border-color .18s var(--ease);
}
.fabctl:hover,.a11y-wrap .theme-btn.fabctl:hover{
  transform:scale(1.06);border-color:var(--accent);color:var(--text)}
.a11y-wrap .theme-btn.fabctl svg{width:20px;height:20px}
.l-abbr{display:none}
.fabctl .l-abbr{display:block}
.fabctl .l-full{display:none}
.a11y-btn svg{width:25px;height:25px;fill:none;stroke:var(--on-btn);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.a11y-btn svg circle{fill:var(--on-btn);stroke:none}

/* [hidden] is display:none in the UA sheet — any author display rule beats it.
   Without this the panel stays visible after every close. */
.a11y-panel[hidden]{display:none}
.a11y-panel{
  position:absolute;inset-block-end:60px;inset-inline-end:0;width:262px;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:16px;box-shadow:0 26px 60px -22px rgba(0,0,0,.9);
  display:flex;flex-direction:column;gap:8px;
}
.a11y-hd{display:flex;align-items:center;margin-block-end:4px}
.a11y-hd h2{font-size:0.9375rem;font-weight:800;margin:0;letter-spacing:0}
.a11y-x{margin-inline-start:auto;background:none;border:0;color:var(--dim);
  font-size:0.9375rem;cursor:pointer;padding:4px 6px;border-radius:6px;line-height:1}
.a11y-x:hover{color:var(--text);background:rgba(255,255,255,.06)}
.a11y-row{display:flex;align-items:center;gap:10px;font-size:0.85rem;color:var(--text-2)}
.a11y-size{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.a11y-size button{width:28px;height:28px;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--text);
  font-size:0.9375rem;line-height:1;font-family:inherit}
.a11y-size button:hover{border-color:var(--accent-dim)}
.a11y-val{font-size:0.7812rem;color:var(--dim);min-width:38px;text-align:center;
  font-variant-numeric:tabular-nums}
.a11y-tg,.a11y-reset{
  text-align:start;font:inherit;font-size:0.8625rem;cursor:pointer;
  padding:9px 12px;border-radius:9px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);color:var(--text-2);
}
.a11y-tg:hover,.a11y-reset:hover{border-color:var(--accent-dim);color:var(--text)}
.a11y-tg[aria-pressed="true"]{background:rgb(var(--accent-rgb) / .14);
  border-color:var(--accent-dim);color:var(--accent);font-weight:700}
.a11y-reset{margin-block-start:4px;color:var(--dim)}
.a11y-stmt{font-size:0.7875rem;color:var(--dim);text-align:center;margin-block-start:4px}

/* Viewer preferences set from the menu */
.a11y-links a{text-decoration:underline!important;text-underline-offset:3px}
.a11y-motion *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
.a11y-contrast{
  --bg:#000;--bg-alt:#000;--panel:#0b0b0b;--panel-2:#101010;
  --text:#fff;--text-2:#fff;--dim:#e6e6e6;
  --accent:#a5e07a;--accent-dim:#a5e07a;
  --line:rgba(255,255,255,.34);--line-2:rgba(255,255,255,.5);
}
.a11y-contrast .hero::before,.a11y-contrast .hero::after,.a11y-contrast .band::before{display:none}
.a11y-contrast h1,.a11y-contrast .hero h1{background:none;color:#fff;-webkit-text-fill-color:#fff}
.a11y-contrast .card,.a11y-contrast .notlist li,.a11y-contrast .a11ylist li{background:#0b0b0b}

@media (max-width:560px){
  .a11y-wrap{inset-block-end:14px;inset-inline-end:14px}
  .a11y-btn{width:46px;height:46px}
  .a11y-panel{width:min(262px,calc(100vw - 28px))}
}

/* ── Accessibility menu — added modes ───────────────────────────────────
   Filters go on <html>, which makes it the containing block for fixed
   elements; the menu is counter-filtered so it stays readable and usable
   while a mode is on. */
.a11y-grp{display:flex;flex-direction:column;gap:0.4375rem;
  padding-block-end:0.6875rem;margin-block-end:0.1875rem;border-block-end:1px solid var(--line)}
.a11y-grp:last-of-type{border-block-end:0}
.a11y-links2{display:flex;flex-direction:column;gap:0.3125rem;margin-block-start:0.375rem}
.a11y-panel{max-height:calc(100vh - 6rem);overflow-y:auto}

/* Reading aids */
.a11y-font,.a11y-font body{
  font-family:Verdana,Tahoma,"Segoe UI",Arial,sans-serif!important;
  letter-spacing:.02em;word-spacing:.08em;
}
.a11y-font *{font-family:inherit!important}
.a11y-titles h1,.a11y-titles h2,.a11y-titles h3{
  background:rgb(var(--accent-rgb) / .14)!important;
  outline:2px solid var(--accent-dim);outline-offset:4px;border-radius:3px;
  color:var(--text)!important;-webkit-text-fill-color:currentColor!important;
}
/* Vision modes */
.a11y-mono{filter:grayscale(1)}
.a11y-invert{filter:invert(1) hue-rotate(180deg)}
.a11y-invert.a11y-mono{filter:grayscale(1) invert(1)}
.a11y-invert .a11y-wrap{filter:invert(1) hue-rotate(180deg)}
.a11y-invert.a11y-mono .a11y-wrap{filter:grayscale(1) invert(1)}
.a11y-cursor,.a11y-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 2 32 20 20 22 15 35Z' fill='%23fff' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,auto!important;
}
.a11y-cursor a,.a11y-cursor button,.a11y-cursor select,.a11y-cursor [role=button]{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M15 3v16M15 11h4v8M19 13h4v6M23 15h4v6c0 6-4 11-9 11h-3c-4 0-6-5-6-9v-8' fill='%23fff' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 12 2,pointer!important;
}

/* Icons inside the accessibility menu */
.a11y-ic{width:1.0625rem;height:1.0625rem;flex-shrink:0}
.a11y-tg,.a11y-reset{display:flex;align-items:center;gap:0.625rem}
.a11y-tg .a11y-ic{color:var(--dim)}
.a11y-tg[aria-pressed="true"] .a11y-ic{color:var(--accent)}
.a11y-reset .a11y-ic{color:var(--dim)}
.a11y-row{gap:0.625rem}
.a11y-row .a11y-ic{color:var(--dim)}
.a11y-row>span{flex:1}

/* Work in progress, not failure — a forward arrow rather than the red cross
   used for the "what the system is not" statements. */
.proclist{list-style:none;margin:0 0 0.5rem;padding:0;display:grid;gap:0.625rem;max-width:82ch}
.proclist li{position:relative;padding-block:0.875rem;padding-inline:3.25rem 1.25rem;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  font-size:0.9125rem;color:var(--text-2);line-height:1.65}
.proclist li::before{content:"";position:absolute;inset-inline-start:1.125rem;inset-block-start:1.0625rem;
  width:1.1875rem;height:1.1875rem;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2)}
.proclist li::after{content:"";position:absolute;inset-inline-start:1.4rem;inset-block-start:1.34rem;
  width:0.4rem;height:0.4rem;border:1.7px solid var(--dim);
  border-block-end:0;border-inline-start:0;transform:rotate(-135deg)}

/* Address cards carry different amounts of text, so the email addresses landed
   at different heights across the row. Push them to a common baseline. */
.mailcard{display:flex;flex-direction:column;height:100%}
.mailcard p{flex:1}
.mailcard b{margin-block-start:auto;padding-block-start:0.25rem}
.mailgrid{align-items:stretch}

/* The lead phrase reads as one unit; keep it on its own line. Below the
   breakpoint it is allowed to wrap again rather than overflow a narrow screen. */
.hero h1 .nb{white-space:nowrap}
/* The gradient text-fill paints only inside the h1's own box, so a no-wrap lead phrase that is
   wider than its column is silently CUT, not overflowed ("Tactical command & c"). Size the
   headline from the column it sits in (container units), per language: the English phrase is
   ~12.2em wide, the Hebrew ~9.5em. max() keeps today's 34px floor wherever it fits; a11y.js
   carries a measuring safety net for phrases edited later in the back office. */
.herotext{container-type:inline-size}
@supports (font-size:1cqi){
  @media (min-width:431px){
    .hero h1{font-size:clamp(1.75rem, min(max(5.6vw, 2.125rem), 10.2cqi), 3.75rem)}
    :lang(en) .hero h1{font-size:clamp(1.75rem, min(max(5.6vw, 2.125rem), 8cqi), 3.75rem)}
  }
}
@media (max-width:430px){ .hero h1 .nb{white-space:normal} }
.hero h1{text-wrap:initial}

/* ═══════════════════════════════════════════════════════════════════════
   Light theme
   The site is dark-first by design, so the bare :root above is the dark
   palette and this block is the deliberate alternative — not an inversion.
   The ground is an off-white with a faint olive cast so it stays in the
   brand's family, and the accent is darkened until it clears 4.5:1 on it.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"]{
  --sun:#c98207;--moon:#3f5480;   /* the same two, measured on the light bar */
  --fab:#d2dfcb;--fab-line:rgb(var(--brand-rgb) / .42);
  --bg:        #f6f7f4;
  --bg-alt:    #ecefe8;
  --panel:     #ffffff;
  --panel-2:   #fbfcfa;

  --brand:     #528b39;
  --accent:    #3d6a29;
  --accent-dim:#4d7d36;
  --accent-hi: #2f5320;
  --brand-rgb:  82 139 57;
  --accent-rgb: 61 106 41;
  --alert-rgb: 192 17 31;
  --train-rgb:  10 99 149;
  --alert:     #c0111f;
  --train:     #0a6395;
  --on-accent: #ffffff;
  --glow:      rgb(var(--brand-rgb) / .12);

  --text:      #111614;
  --text-2:    #39433d;
  --dim:       #5b6660;
  --line:      rgba(12,24,18,.10);
  --line-2:    rgba(12,24,18,.17);

  --header-bg: rgba(246,247,244,.85);
  --h1-grad:   linear-gradient(178deg,#0d1210 30%,#33403a 100%);
  /* The device bezel stays dark in both themes — it is a photograph of an
     object, not a surface of the page. */
}
:root[data-theme="light"] .card{box-shadow:0 1px 2px rgba(12,24,18,.05)}
:root[data-theme="light"] .phone{box-shadow:0 34px 64px -30px rgba(12,24,18,.42),
  0 0 0 1px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.12) inset}
:root[data-theme="light"] .shotfig img{box-shadow:0 20px 44px -24px rgba(12,24,18,.35)}
:root[data-theme="light"] .stat{background:var(--panel)}
:root[data-theme="light"] .hero::after{opacity:.75}

/* Theme toggle in the header — mirrors the sun/moon control in the app. */
.theme-btn{
  width:36px;height:36px;flex-shrink:0;border-radius:10px;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);color:var(--text-2);
  display:inline-grid;place-items:center;margin-inline-start:8px;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.theme-btn:hover{border-color:var(--accent-dim);color:var(--text)}
/* The two states are a sun and a moon, not two glyphs of UI chrome - colour
   says which one you are looking at before the shape does. */
.theme-btn .sun{stroke:var(--sun)}
.theme-btn .moon{stroke:var(--moon)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .moon{display:none}
:root[data-theme="light"] .theme-btn .moon{display:block}
:root[data-theme="light"] .theme-btn .sun{display:none}

/* ── High contrast must outrank the theme ───────────────────────────────
   .a11y-contrast is (0,1,0); :root[data-theme="light"] is (0,2,0), so the
   theme was silently winning and the accessibility mode did nothing on a
   light page. This block is (0,3,0) and last, so it wins from either theme.
   An accessibility override must always beat a preference. */
:root[data-theme].a11y-contrast,
:root[data-theme].a11y-contrast:root{
  --bg:#000;--bg-alt:#000;--panel:#0b0b0b;--panel-2:#101010;
  --text:#fff;--text-2:#fff;--dim:#e6e6e6;
  --accent:#a5e07a;--accent-dim:#a5e07a;--accent-hi:#c9f0a8;
  --accent-rgb:165 224 122;--brand-rgb:165 224 122;
  --on-accent:#000;--btn:#a5e07a;--btn-hi:#c9f0a8;--on-btn:#000;
  --line:rgba(255,255,255,.34);--line-2:rgba(255,255,255,.5);
  --header-bg:#000;
  --h1-grad:none;
}
:root[data-theme].a11y-contrast h1,
:root[data-theme].a11y-contrast .hero h1{
  background:none;color:#fff;-webkit-text-fill-color:#fff}
:root[data-theme].a11y-contrast .hero::before,
:root[data-theme].a11y-contrast .hero::after,
:root[data-theme].a11y-contrast .band::before{display:none}
:root[data-theme].a11y-contrast .card,
:root[data-theme].a11y-contrast .notlist li,
:root[data-theme].a11y-contrast .proclist li,
:root[data-theme].a11y-contrast .a11ylist li{background:#0b0b0b;box-shadow:none}

/* Honeypot: present in the DOM for bots, unreachable for people. Not
   display:none — some bots skip those; this is off-screen and untabbable. */
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{margin-block-start:14px;font-size:0.9062rem;min-height:1.4em}
.formmsg.ok{color:var(--accent);font-weight:700}
.formmsg.bad{color:var(--alert);font-weight:700}
form.sending button[type=submit]{opacity:.6;pointer-events:none}

/* ── Content section ────────────────────────────────────────────────────
   Article cards are links, so the whole card is the target — not a "read
   more" the reader has to aim at. */
.artgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.125rem}
.artcard{
  display:flex;flex-direction:column;gap:0.5rem;
  background:linear-gradient(168deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);
  padding:1.375rem 1.375rem 1.5rem;color:inherit;position:relative;overflow:hidden;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.artcard::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent)}
.artcard:hover{border-color:rgb(var(--accent-rgb) / .32);transform:translateY(-3px)}
.artmeta{font-size:0.7188rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);font-variant-numeric:tabular-nums}
.artcard h2{font-size:1.1875rem;line-height:1.32;margin:0;letter-spacing:-.01em}
.artcard p{font-size:0.875rem;color:var(--dim);margin:0;line-height:1.62;flex:1}
.artmore{font-size:0.8438rem;font-weight:800;color:var(--accent);margin-block-start:0.375rem}

/* Article body — measured for reading, not for filling the width. */
.article{max-width:70ch}
.article h2{font-size:1.375rem;margin-block:2.25rem 0.75rem;letter-spacing:-.01em}
.article h3{font-size:1.0938rem;margin-block:1.75rem 0.5rem;color:var(--text)}
.article p{font-size:1.0312rem;line-height:1.85;color:var(--text-2);margin-block-end:1.0625rem}
.article ul,.article ol{padding-inline-start:1.375rem;margin-block-end:1.0625rem;color:var(--text-2)}
.article li{margin-block-end:0.5rem;line-height:1.8;font-size:1.0312rem}
.article strong{color:var(--text)}
.article code{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;
  padding:.1em .38em;font-size:.9em}
.article blockquote{margin:1.5rem 0;padding:1rem 1.25rem;border:1px solid var(--line);
  border-inline-start:3px solid var(--accent-dim);border-radius:var(--r);
  background:var(--panel);color:var(--dim);font-size:0.9688rem}
.article blockquote p{margin:0;font-size:inherit;color:inherit}
.article hr{border:0;border-block-start:1px solid var(--line);margin-block:2.25rem}
.artfoot{display:flex;gap:0.75rem;flex-wrap:wrap;margin-block-start:3rem;
  padding-block-start:2rem;border-block-start:1px solid var(--line)}

/* ── FAQ ────────────────────────────────────────────────────────────────
   <details> so it works with no JavaScript and is keyboard-operable and
   screen-reader-announced for free. */
.faqlist{display:flex;flex-direction:column;gap:0.625rem;max-width:82ch}
.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  overflow:hidden;transition:border-color .18s var(--ease)}
.faq[open]{border-color:var(--line-2)}
.faq summary{
  cursor:pointer;list-style:none;padding:1rem 1.25rem;display:flex;align-items:center;gap:0.875rem;
  font-size:1rem;font-weight:800;color:var(--text);letter-spacing:-.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";inline-size:0.5rem;block-size:0.5rem;flex-shrink:0;margin-inline-start:auto;
  border:2px solid var(--dim);border-block-start:0;border-inline-start:0;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
.faq[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq summary:hover{color:var(--accent)}
.faq summary:hover::after{border-color:var(--accent)}
.faq p{margin:0;padding:0 1.25rem 1.125rem;font-size:0.9688rem;line-height:1.8;color:var(--text-2)}
.faq p a{font-weight:700}

/* ── Sector profiles ───────────────────────────────────────────────────── */
.secgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.125rem}
.sector{position:relative;background:linear-gradient(168deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.5rem 1.625rem;
  transition:border-color .22s var(--ease),transform .22s var(--ease)}
.sector:hover{border-color:rgb(var(--accent-rgb) / .32);transform:translateY(-3px)}
.secno{display:block;font-size:0.6875rem;font-weight:800;letter-spacing:.16em;
  color:var(--accent);margin-block-end:0.625rem;font-variant-numeric:tabular-nums}
.sector h3{font-size:1.1875rem;margin:0 0 0.625rem;letter-spacing:-.01em}
.sector p{font-size:0.9062rem;color:var(--dim);margin:0;line-height:1.7}

/* ── Trust band ─────────────────────────────────────────────────────────
   Two columns of checkable claims. Deliberately plainer than the capability
   cards: this section earns credibility by being specific, not by styling. */
.trustgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.trust{display:flex;gap:0.875rem;align-items:flex-start;background:var(--panel);padding:1.25rem 1.375rem}
.trust .ico{width:2rem;height:2rem;border-radius:9px}
.trust .ico svg{width:1rem;height:1rem}
.trust b{display:block;font-size:0.9375rem;font-weight:800;margin-block-end:0.25rem;
  letter-spacing:-.005em;color:var(--text)}
.trust span:last-child{font-size:0.8438rem;color:var(--dim);line-height:1.62;display:block}

/* ── Marker glyphs, redrawn ─────────────────────────────────────────────
   The check and arrow were assembled from border fragments using logical
   properties, so in RTL the shapes mirrored into off-centre chevrons - and
   the "in progress" mark pointed down, which reads as an expander on cards
   that do not expand. Redrawn as masked glyphs centred in the same circle;
   the ellipsis says "in progress" without promising interaction. */
.a11ylist li::after{
  content:"";position:absolute;inset-inline-start:18px;inset-block-start:18px;
  width:19px;height:19px;border:0;transform:none;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2 4.6 8.3 10.5 1.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.625rem auto no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2 4.6 8.3 10.5 1.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.625rem auto no-repeat;
}
.proclist li::after{
  content:"";position:absolute;inset-inline-start:1.125rem;inset-block-start:1.0625rem;
  width:1.1875rem;height:1.1875rem;border:0;transform:none;background:var(--dim);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 4'%3E%3Ccircle cx='2' cy='2' r='1.55'/%3E%3Ccircle cx='7' cy='2' r='1.55'/%3E%3Ccircle cx='12' cy='2' r='1.55'/%3E%3C/svg%3E") center / 0.6875rem auto no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 4'%3E%3Ccircle cx='2' cy='2' r='1.55'/%3E%3Ccircle cx='7' cy='2' r='1.55'/%3E%3Ccircle cx='12' cy='2' r='1.55'/%3E%3C/svg%3E") center / 0.6875rem auto no-repeat;
}

/* Same root cause on the FAQ chevron - and that one really does expand, so
   it keeps a chevron, just direction-proof: rotate the whole glyph 180° when
   open instead of re-assembling borders. */
.faq summary::after{
  border:0;width:0.75rem;height:0.75rem;transform:none;background:var(--dim);
  transition:transform .2s var(--ease),background .18s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.4 6 6.6 11 1.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.6875rem auto no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.4 6 6.6 11 1.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.6875rem auto no-repeat;
}
.faq[open] summary::after{transform:rotate(180deg)}
.faq summary:hover::after{background:var(--accent)}

/* Same family as the check/arrow fix: the ✕ was two gradients at hand-tuned
   offsets. Masked glyph in the exact box of the circle - centring is inherent,
   not arithmetic. */
.notlist li::after{
  content:"";position:absolute;inset-inline-start:18px;inset-block-start:17px;
  width:19px;height:19px;border:0;transform:none;background:var(--alert);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.6 1.6 8.4 8.4M8.4 1.6 1.6 8.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.5625rem auto no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.6 1.6 8.4 8.4M8.4 1.6 1.6 8.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.5625rem auto no-repeat;
}

/* ---- device family, closing the capabilities section --------------------- */
.devband{margin-block-start:34px}
.devband img{display:block;width:100%;max-width:880px;margin-inline:auto;height:auto}
@media (max-width:720px){
  /* Inset past the page margin. The cards and the button are solid shapes, but
     this artwork carries detail to its very edge, so matching their width still
     reads as touching the sides. */
  .devband{margin-block-start:26px}
  .devband img{max-width:86%}
}

/* ---- per-zone captures --------------------------------------------------- */
/* .zone is a two-column grid (heading | cards), so a third child lands in the
   300px heading column. Span both, and the capture gets the zone's full width. */
.zoneshots{grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:clamp(18px,2.4vw,30px);margin-block-start:clamp(22px,3vw,34px)}
.zoneshot{margin:0}
.zoneshot img{display:block;width:100%;height:auto;border-radius:var(--r)}
.zoneshot figcaption{font-size:0.8125rem;color:var(--dim);text-align:center;
  margin-block-start:10px;line-height:1.5}

/* ---- cookie consent ------------------------------------------------------ */
/* A band, not a modal. Nothing is set before the choice is made, so there is
   no reason to trap the page - and a band keeps the site readable while the
   visitor decides. */
.cookiebar{position:fixed;inset-inline:0;inset-block-end:0;z-index:60;
  background:var(--panel);border-block-start:1px solid var(--line-2);
  box-shadow:0 -10px 30px rgb(0 0 0 / .28)}
.cookiebar[hidden]{display:none}
.cookiebar-in{max-width:var(--wrap);margin-inline:auto;padding:18px 26px;
  display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.cookiebar-txt{flex:1 1 380px;min-width:0}
.cookiebar-txt strong{display:block;font-size:0.9375rem;font-weight:800;margin-block-end:4px}
.cookiebar-txt p{margin:0;font-size:0.8438rem;color:var(--dim);line-height:1.6}
.cookiebar-txt a{color:var(--accent)}
.cookiebar-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookiebar-btns .cta{margin:0;font-size:0.875rem;padding:10px 20px}
/* the way back to the choice, in the bottom bar */
.fcookie{background:none;border:0;padding:0;font:inherit;color:var(--dim);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fcookie:hover{color:var(--text)}
@media (max-width:640px){
  .cookiebar-in{padding:16px 20px;gap:14px}
  .cookiebar-btns{width:100%}
  .cookiebar-btns .cta{flex:1 1 auto;text-align:center}
}