/* ==========================================================================
   Lumela — lumela.tours design system
   One stylesheet for the whole marketing site. Light + dark, LTR + RTL.
   ========================================================================== */

/* ---------- Fonts (self-hosted, subset) ---------------------------------- */
@font-face{
  font-family:'Figtree';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Heebo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/heebo-hebrew.woff2) format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

/* ---------- Tokens ------------------------------------------------------- */
:root{
  --brand:#F0502E;
  --brand-2:#FF6A4A;
  --brand-ink:#B8391D;          /* AA-contrast brand for text/links on light */
  --brand-soft:#FFF1ED;
  --teal:#00857A;
  --teal-soft:#E4F5F3;
  --amber:#B26A00;
  --amber-soft:#FFF4E0;
  --violet:#5B4BC4;
  --violet-soft:#EFEDFF;

  --bg:#FBF7F4;
  --bg-2:#F5EFEA;
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --ink:#17110E;
  --txt:#2A221E;
  --mut:#6E625B;
  --line:#EAE0DA;
  --line-2:#DED2CA;

  /* --grad carries WHITE TEXT (buttons, CTA bands) so every stop is dark enough for
     WCAG AA at normal weight (>=4.5:1). --grad-accent stays brand-vivid and is only
     used to fill LARGE headings, where AA needs 3:1. */
  --grad:linear-gradient(135deg,#D34118 0%,#C63A16 50%,#AE2F0E 100%);
  --grad-accent:linear-gradient(135deg,#F0502E 0%,#D23C18 100%);
  --grad-soft:linear-gradient(135deg,#FFF4F0,#FFEAE3);

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(23,17,14,.05), 0 4px 14px rgba(23,17,14,.045);
  --sh-2:0 2px 6px rgba(23,17,14,.06), 0 18px 44px rgba(23,17,14,.08);
  --sh-brand:0 8px 24px rgba(174,47,14,.30);

  --maxw:1140px;
  --nav-h:66px;
  --pad:clamp(18px,4vw,26px);

  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}

html[data-theme="dark"]{
  --brand:#FF7A57;
  --brand-2:#FF9670;
  --brand-ink:#FF9273;
  --brand-soft:#3A211A;
  --teal:#4FD1C2; --teal-soft:#16302E;
  --amber:#F0B24A; --amber-soft:#332616;
  --violet:#A99BFF; --violet-soft:#231F3D;

  --bg:#141010;
  --bg-2:#1A1513;
  --surface:#1E1815;
  --surface-2:#241D19;
  --ink:#FAF5F1;
  --txt:#EFE7E1;
  --mut:#A99B92;
  --line:#332A26;
  --line-2:#413631;

  --grad:linear-gradient(135deg,#C7401D 0%,#B63616 50%,#9E2B0D 100%);
  --grad-accent:linear-gradient(135deg,#FF8C66 0%,#FF6A45 100%);
  --grad-soft:linear-gradient(135deg,#2A1D18,#241714);

  --sh-1:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.42);
  --sh-brand:0 10px 30px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Figtree','Heebo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;line-height:1.65;
  color:var(--txt);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
}
html[lang="he"] body{font-family:'Heebo','Figtree',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
h1,h2,h3,h4{color:var(--ink);line-height:1.14;letter-spacing:-.022em;margin:0 0 .5em;font-weight:800}
html[lang="he"] h1,html[lang="he"] h2,html[lang="he"] h3,html[lang="he"] h4{letter-spacing:0}
h1{font-size:clamp(34px,5.4vw,58px);font-weight:900;letter-spacing:-.032em}
h2{font-size:clamp(26px,3.4vw,38px);font-weight:900;letter-spacing:-.026em}
h3{font-size:clamp(19px,2vw,23px)}
h4{font-size:17px}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-inline-start:1.35em}
li{margin:.32em 0}
hr{border:0;border-top:1px solid var(--line);margin:38px 0}
::selection{background:rgba(240,80,46,.22)}

:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
.skip{
  position:absolute;inset-inline-start:12px;top:-70px;z-index:200;
  background:var(--surface);color:var(--ink);padding:12px 18px;border-radius:12px;
  border:1px solid var(--line);box-shadow:var(--sh-2);font-weight:700;transition:top .18s var(--ease);
}
.skip:focus{top:12px}

/* ---------- Layout ------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:760px}
.section{padding:clamp(56px,8vw,104px) 0}
.section--tight{padding:clamp(40px,5vw,64px) 0}
.section--alt{background:var(--bg-2);border-block:1px solid var(--line)}
.center{text-align:center}
.stack-sm > * + *{margin-top:10px}

.sec-head{max-width:680px;margin:0 auto clamp(32px,5vw,54px)}
.sec-head.center{text-align:center}
.sec-head p{font-size:clamp(17px,1.6vw,19px);color:var(--mut);margin:0}
.sec-head h2{margin-bottom:.42em}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);color:var(--brand-ink);
  font-weight:800;font-size:13.5px;letter-spacing:.01em;
  padding:7px 15px;border-radius:99px;margin-bottom:18px;box-shadow:var(--sh-1);
}
.eyebrow--plain{background:var(--brand-soft);border-color:transparent;box-shadow:none}

/* ---------- Buttons ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:13px;padding:14px 24px;font-weight:800;font-size:16px;
  cursor:pointer;border:1px solid transparent;text-decoration:none;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .14s var(--ease);
  white-space:nowrap;
}
.btn{max-width:100%}
/* Some buttons carry a full article title ("Read the guide to…"). Nowrap keeps short
   CTAs tidy on desktop, but on a phone a long label has to be allowed to wrap. */
@media(max-width:620px){ .btn{white-space:normal;text-align:center} }
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--sh-brand)}
.btn-primary:hover{box-shadow:0 12px 32px rgba(174,47,14,.38)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-sm{padding:10px 18px;font-size:15px;border-radius:11px}
.btn-lg{padding:16px 30px;font-size:17.5px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.center .btn-row,.btn-row.center{justify-content:center}

/* store badges */
.stores{display:flex;gap:12px;flex-wrap:wrap}
.center .stores{justify-content:center}
.badge{
  display:inline-flex;align-items:center;gap:11px;background:#000;color:#fff;
  border-radius:13px;padding:11px 19px;text-decoration:none;border:1px solid #000;
  transition:transform .14s var(--ease),opacity .14s var(--ease);
}
.badge:hover{transform:translateY(-2px);text-decoration:none;opacity:.92}
.badge .t{display:flex;flex-direction:column;line-height:1.15;text-align:start}
.badge .t small{font-size:10.5px;opacity:.85;letter-spacing:.02em}
.badge .t b{font-size:17px;font-weight:600}
.badge svg{flex:0 0 auto}
.badge--light{background:#fff;color:#111;border-color:var(--line-2)}
html[data-theme="dark"] .badge{background:#0B0908;border-color:#3A302B}
.badge--soon{opacity:.6;cursor:default;position:relative}
.badge--soon .ribbon{
  position:absolute;inset-inline-start:12px;top:-9px;background:var(--surface);color:var(--brand-ink);
  font-size:10px;font-weight:900;padding:2px 9px;border-radius:20px;border:1px solid var(--line);
}

/* ---------- Header ------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(23,17,14,.05)}
.nav-row{display:flex;align-items:center;gap:14px;height:var(--nav-h)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:20.5px;letter-spacing:-.03em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:34px;height:34px;border-radius:9px;box-shadow:0 5px 14px rgba(240,80,46,.3)}
.nav-links{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav-links a{
  color:var(--mut);font-weight:650;font-size:15.5px;padding:9px 13px;border-radius:10px;
  transition:color .14s var(--ease),background .14s var(--ease);
}
.nav-links a:hover{color:var(--ink);background:var(--bg-2);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-tools{display:flex;align-items:center;gap:8px;margin-inline-start:8px}
.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  background:transparent;border:1px solid var(--line);color:var(--mut);cursor:pointer;
  transition:color .14s var(--ease),border-color .14s var(--ease),background .14s var(--ease);
}
.icon-btn:hover{color:var(--ink);border-color:var(--line-2);background:var(--surface)}
/* Language menu — a <details> so it works with no JS (site.js only adds
   click-outside/Escape dismissal). Replaced the binary "other language" toggle when
   Spanish made a third language, 2026-09-01. */
.lang-menu{position:relative}
.lang-menu > summary{
  display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:750;
  padding:8px 12px;border-radius:11px;border:1px solid var(--line);color:var(--mut);
  cursor:pointer;list-style:none;user-select:none;
  transition:color .14s var(--ease),border-color .14s var(--ease),background .14s var(--ease);
}
.lang-menu > summary::-webkit-details-marker{display:none}
.lang-menu > summary:hover{color:var(--ink);border-color:var(--line-2);background:var(--surface)}
.lang-menu > summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.lang-menu[open] > summary{color:var(--ink);border-color:var(--line-2);background:var(--surface)}
.lm-list{
  position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:90;
  min-width:158px;margin:0;padding:6px;list-style:none;
  background:var(--bg);border:1px solid var(--line);border-radius:13px;box-shadow:var(--sh-2);
}
.lm-item{
  display:block;padding:9px 12px;border-radius:9px;font-size:14.5px;font-weight:650;
  color:var(--mut);white-space:nowrap;text-align:start;
}
a.lm-item:hover{background:var(--surface);color:var(--ink);text-decoration:none}
.lm-item.is-current{color:var(--ink);font-weight:800;background:var(--surface);cursor:default}
/* This page has no version in that language — the link goes to its home page instead. */
.lm-item--home small{display:block;font-size:11.5px;font-weight:600;opacity:.62;margin-top:1px}
/* In the mobile drawer the menu is a full-width block that opens downward in flow. */
.lang-menu--block{width:100%}
.lang-menu--block > summary{width:100%;justify-content:center;padding:12px}
.lang-menu--block .lm-list{position:static;min-width:0;margin-top:6px;box-shadow:none}
.nav-toggle{display:none}

@media(max-width:960px){
  .nav-links{display:none}
  .nav-toggle{display:grid}
  .nav-tools{margin-inline-start:auto}
}
/* Narrow phones: the header only has room for the brand, one icon and the menu.
   The download CTA and the language switch both live inside the drawer, so drop
   their header copies rather than letting the row overflow (Hebrew's CTA label is
   long enough to push the row past the viewport). */
@media(max-width:620px){
  .nav-tools > .btn-primary{display:none}
  /* Header copy shrinks to the globe alone; the drawer's copy keeps its label. */
  .nav-tools .lang-menu > summary{padding:9px 10px;gap:0}
  .nav-tools .lang-menu > summary .lm-cur{display:none}
  .nav-tools .lang-menu > summary svg{width:17px;height:17px}
}
@media(max-width:400px){
  .brand{font-size:19px}
  .brand img{width:30px;height:30px}
  .nav-tools{gap:6px}
}
/* mobile drawer */
.mobile-nav{
  position:fixed;inset:0;z-index:80;background:var(--bg);
  display:flex;flex-direction:column;padding:0;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  overflow-y:auto;
}
.mobile-nav[data-open="true"]{opacity:1;visibility:visible;transform:none}
.mobile-nav .mn-top{display:flex;align-items:center;height:var(--nav-h);gap:14px}
.mobile-nav .mn-links{display:flex;flex-direction:column;gap:2px;padding:14px 0 8px}
.mobile-nav .mn-links a{
  font-size:20px;font-weight:750;color:var(--ink);padding:14px 4px;border-bottom:1px solid var(--line);
}
.mobile-nav .mn-links a:hover{text-decoration:none;color:var(--brand-ink)}
.mobile-nav .mn-foot{padding:20px 0 40px;display:flex;flex-direction:column;gap:12px}
body.nav-open{overflow:hidden}

/* ---------- Hero --------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:clamp(44px,6vw,80px) 0 clamp(46px,6vw,78px)}
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:760px;z-index:0;pointer-events:none;
  background:
    radial-gradient(620px 380px at 18% 12%, rgba(255,122,78,.20), transparent 68%),
    radial-gradient(560px 360px at 82% 4%, rgba(0,133,122,.13), transparent 66%);
}
html[data-theme="dark"] .hero::before{
  background:
    radial-gradient(620px 380px at 18% 12%, rgba(255,122,78,.16), transparent 68%),
    radial-gradient(560px 360px at 82% 4%, rgba(79,209,194,.10), transparent 66%);
}
.hero > *{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,5vw,56px);align-items:center}
.hero-copy h1{margin-bottom:.34em}
.hero-copy .accent{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(17.5px,1.9vw,20px);color:var(--mut);max-width:540px;margin:0 0 28px}
.hero-note{margin-top:16px;font-size:14.5px;color:var(--mut);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note span{display:inline-flex;align-items:center;gap:6px}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .lede{margin-inline:auto}
  .hero-copy .btn-row,.hero-copy .stores,.hero-note{justify-content:center}
}

/* phone frames */
.phone-stage{display:flex;justify-content:center;align-items:flex-end;gap:18px;position:relative}
.phone{
  width:min(272px,74vw);aspect-ratio:600/1303;background:#12100F;border-radius:38px;padding:7px;
  box-shadow:var(--sh-2),0 30px 70px rgba(240,80,46,.16);flex:0 0 auto;position:relative;
  border:1px solid rgba(255,255,255,.06);
}
.phone img{width:100%;height:100%;border-radius:32px;object-fit:cover;background:var(--bg-2)}
.phone--side{width:min(206px,54vw);opacity:.94;transform:translateY(26px) scale(.96);display:none}
@media(min-width:1080px){.phone--side{display:block}}

/* floating proof chips around the hero phone */
.float-chip{
  position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:10px 14px;box-shadow:var(--sh-2);font-size:13.5px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:9px;white-space:nowrap;
}
.float-chip small{display:block;font-weight:600;color:var(--mut);font-size:11.5px}
.float-chip .fc-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:15px}
.float-chip--a{inset-block-start:14%;inset-inline-start:-6%}
.float-chip--b{inset-block-end:18%;inset-inline-end:-4%}
@media(max-width:1080px){.float-chip{display:none}}

/* ---------- Trust strip -------------------------------------------------- */
.strip{background:var(--surface);border-block:1px solid var(--line);padding:16px 0}
.strip-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.pill{
  background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:8px 16px;
  font-size:14.5px;font-weight:650;color:var(--mut);display:inline-flex;align-items:center;gap:7px;
}

/* ---------- Cards / grids ------------------------------------------------ */
.grid{display:grid;gap:18px}
.grid > *{min-width:0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--sh-1);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.card--link:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--mut);font-size:15.5px}
.card p + p{margin-top:.8em}
.ic{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;margin-bottom:15px;
  background:var(--brand-soft);
}
.ic--teal{background:var(--teal-soft)}
.ic--amber{background:var(--amber-soft)}
.ic--violet{background:var(--violet-soft)}
.ic--brand{background:var(--brand-soft)}

/* feature rows (alternating) */
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(30px,5vw,54px) 0}
.frow + .frow{border-top:1px solid var(--line)}
.frow--flip .frow-media{order:-1}
.frow h3{font-size:clamp(23px,2.6vw,30px);letter-spacing:-.025em;margin-bottom:.45em}
.frow p{color:var(--mut);font-size:16.5px}
.frow-media{display:flex;justify-content:center}
.frow ul.checks{list-style:none;padding:0;margin:18px 0 0}
.frow ul.checks li{display:flex;gap:10px;align-items:flex-start;margin:9px 0;font-size:15.5px;color:var(--txt)}
.frow ul.checks li::before{
  content:"";flex:0 0 auto;width:20px;height:20px;margin-top:2px;border-radius:6px;background:var(--brand-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0502E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}
@media(max-width:860px){
  .frow{grid-template-columns:1fr;gap:26px}
  .frow--flip .frow-media{order:0}
}

/* steps */
.steps{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;position:relative;box-shadow:var(--sh-1)}
.step::before{
  counter-increment:s;content:counter(s);
  display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:var(--grad);color:#fff;font-weight:900;font-size:17px;margin-bottom:15px;
}
.step h3{font-size:19px}
.step p{color:var(--mut);font-size:15.5px;margin:0}

/* stat / value row */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:center}
.stat b{display:block;font-size:clamp(24px,3vw,30px);font-weight:900;color:var(--ink);letter-spacing:-.03em;line-height:1.2}
.stat span{font-size:14px;color:var(--mut);font-weight:600}

/* quote / callout */
.callout{
  background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--brand);
  border-radius:var(--r);padding:20px 22px;margin:26px 0;box-shadow:var(--sh-1);
}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}

/* comparison table */
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:520px}
th,td{padding:14px 18px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--bg-2);font-weight:800;color:var(--ink);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td strong{color:var(--ink)}

/* FAQ */
.faq{display:grid;gap:10px}
details.qa{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:0 20px;box-shadow:var(--sh-1);transition:border-color .16s var(--ease);
}
details.qa[open]{border-color:var(--line-2)}
details.qa summary{
  cursor:pointer;font-weight:750;font-size:16.5px;color:var(--ink);
  padding:17px 0;list-style:none;display:flex;align-items:center;gap:14px;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{
  content:"";margin-inline-start:auto;flex:0 0 auto;width:20px;height:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0502E' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;transition:transform .18s var(--ease);
}
details.qa[open] summary::after{transform:rotate(45deg)}
details.qa .qa-body{padding:0 0 18px;color:var(--mut);font-size:16px}
details.qa .qa-body p:last-child{margin-bottom:0}

/* ---------- CTA band ----------------------------------------------------- */
.band{padding:clamp(46px,6vw,80px) 0}
.band-inner{
  background:var(--grad);border-radius:var(--r-xl);padding:clamp(36px,6vw,64px) clamp(24px,5vw,48px);
  text-align:center;color:#fff;box-shadow:0 22px 52px rgba(174,47,14,.30);position:relative;overflow:hidden;
}
.band-inner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 260px at 20% 0%, rgba(255,255,255,.22), transparent 70%);
}
.band-inner > *{position:relative}
.band-inner h2{color:#fff;margin-bottom:.4em}
.band-inner p{font-size:clamp(16.5px,1.7vw,18.5px);opacity:1;color:rgba(255,255,255,.96);max-width:600px;margin:0 auto 26px}
.band-inner .btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.34);box-shadow:none;backdrop-filter:blur(8px)}
.band-inner .btn-ghost:hover{background:rgba(255,255,255,.22);color:#fff}
/* Specificity note: html[data-theme="dark"] .badge is (0,2,1), so the band's white
   badges need an html prefix to win in dark mode — otherwise they render dark-on-orange. */
html .band-inner .badge{background:#fff;color:#111;border-color:#fff}
html .band-inner .badge svg path[fill="currentColor"]{fill:#111}
html .band-inner .badge--soon{opacity:.72}
html .band-inner .badge--soon .ribbon{background:#111;color:#fff;border-color:#111}

/* ---------- Blog --------------------------------------------------------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:940px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.post-grid{grid-template-columns:1fr}}
.post-card{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
  color:inherit;height:100%;
}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2);text-decoration:none}
.post-card .thumb{aspect-ratio:16/9;background:var(--grad-soft);display:grid;place-items:center;font-size:44px;position:relative;border-bottom:1px solid var(--line)}
.post-card .pc-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:19.5px;margin:0 0 8px;letter-spacing:-.02em}
.post-card p{color:var(--mut);font-size:15px;margin:0 0 16px}
.post-meta{margin-top:auto;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--mut);font-weight:600}
.tag{
  display:inline-flex;align-items:center;background:var(--brand-soft);color:var(--brand-ink);
  font-size:12px;font-weight:800;padding:4px 11px;border-radius:99px;letter-spacing:.02em;
}
.tag--teal{background:var(--teal-soft);color:var(--teal)}
.tag--amber{background:var(--amber-soft);color:var(--amber)}
.tag--violet{background:var(--violet-soft);color:var(--violet)}
/* "English" marker on a card whose article has no version in the page's language.
   Deliberately quiet: it is a note about availability, not a second topic. */
.tag--muted{background:transparent;border:1px solid var(--line-2);color:var(--mut);font-weight:700}
/* Topic tag + optional availability marker, on one line above the card title. */
.pc-tags{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:12px}

.post-featured{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-1);margin-bottom:26px;color:inherit;
}
.post-featured:hover{text-decoration:none;box-shadow:var(--sh-2)}
.post-featured .pf-art{background:var(--grad-soft);display:grid;place-items:center;font-size:74px;min-height:250px;order:2;border-inline-start:1px solid var(--line)}
.post-featured .pf-body{padding:clamp(26px,4vw,42px);display:flex;flex-direction:column;justify-content:center}
.post-featured h2{font-size:clamp(23px,2.8vw,32px);margin:12px 0 10px}
/* The featured card's own h2 already supplies the gap under the tag row. */
.post-featured .pc-tags{margin-bottom:0}
.post-featured p{color:var(--mut);margin:0 0 18px}
@media(max-width:820px){
  .post-featured{grid-template-columns:1fr}
  .post-featured .pf-art{order:0;min-height:170px;font-size:56px;border-inline-start:0;border-bottom:1px solid var(--line)}
}

.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.chip{
  background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:8px 16px;
  font-size:14.5px;font-weight:700;color:var(--mut);cursor:pointer;text-decoration:none;
  transition:all .14s var(--ease);
}
.chip:hover{color:var(--ink);border-color:var(--line-2);text-decoration:none}
.chip[aria-pressed="true"],.chip.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------- Article ------------------------------------------------------ */
.article-head{padding:clamp(30px,5vw,54px) 0 8px;text-align:center}
.article-head h1{max-width:860px;margin-inline:auto;margin-bottom:18px}
.article-head .lede{margin-inline:auto;font-size:clamp(17px,1.8vw,19.5px);max-width:660px}
.byline{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--mut);font-size:14.5px;font-weight:600;flex-wrap:wrap}
.byline .avatar{width:32px;height:32px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:900;font-size:14px}
.byline .dot{opacity:.5}

/* minmax(0,…) on every track: a plain 1fr has min-width:auto, so one wide child
   (a 520px comparison table inside its own scroll container) would otherwise stretch
   the column and push the whole article past the viewport on a phone. */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:52px;align-items:start;padding-bottom:40px}
.article-layout > *{min-width:0}
@media(max-width:1000px){.article-layout{grid-template-columns:minmax(0,1fr);gap:0}.toc-rail{display:none}}
.toc-rail{position:sticky;top:calc(var(--nav-h) + 24px)}
.toc-rail .toc-title{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.toc-rail ol{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--line)}
.toc-rail li{margin:0}
.toc-rail a{
  display:block;padding:7px 0 7px 14px;margin-inline-start:-2px;border-inline-start:2px solid transparent;
  color:var(--mut);font-size:14.5px;font-weight:600;line-height:1.4;
}
html[dir="rtl"] .toc-rail a{padding:7px 14px 7px 0}
.toc-rail a:hover{color:var(--ink);text-decoration:none}
.toc-rail a.is-active{color:var(--brand-ink);border-inline-start-color:var(--brand)}

.prose{font-size:17.5px;line-height:1.78;max-width:none}
.prose h2{font-size:clamp(24px,2.7vw,31px);margin:1.9em 0 .55em;scroll-margin-top:calc(var(--nav-h) + 20px)}
.prose h3{font-size:clamp(19px,2vw,22px);margin:1.7em 0 .5em;scroll-margin-top:calc(var(--nav-h) + 20px)}
.prose > h2:first-child,.prose > h3:first-child{margin-top:0}
.prose p{margin:0 0 1.2em}
.prose ul,.prose ol{margin:0 0 1.4em;padding-inline-start:1.4em}
.prose li{margin:.5em 0}
.prose li::marker{color:var(--brand)}
.prose strong{color:var(--ink);font-weight:750}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.prose a:hover{text-decoration-color:var(--brand)}
.prose blockquote{
  margin:1.8em 0;padding:20px 24px;background:var(--surface);border:1px solid var(--line);
  border-inline-start:4px solid var(--brand);border-radius:var(--r);color:var(--ink);font-size:18px;font-weight:600;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prose img{border-radius:var(--r-lg);border:1px solid var(--line);margin:1.6em 0}
.prose figure{margin:1.8em 0}
.prose figcaption{font-size:14px;color:var(--mut);text-align:center;margin-top:10px}
.prose hr{margin:2.4em 0}
.prose .table-scroll{margin:1.8em 0}

.h-anchor{
  opacity:0;margin-inline-start:8px;color:var(--brand);font-weight:700;text-decoration:none;font-size:.72em;
  transition:opacity .14s var(--ease);
}
.prose h2:hover .h-anchor,.prose h3:hover .h-anchor,.h-anchor:focus{opacity:1;text-decoration:none}

.article-cta{
  background:var(--grad-soft);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,4vw,38px);margin:44px 0 10px;text-align:center;
}
.article-cta h3{font-size:clamp(21px,2.4vw,26px);margin-bottom:10px}
.article-cta p{color:var(--mut);max-width:520px;margin:0 auto 22px}

.share-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:30px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.share-row span{font-size:14.5px;font-weight:700;color:var(--mut)}

.reading-bar{position:fixed;top:0;inset-inline-start:0;height:3px;width:0;background:var(--grad);z-index:90;transition:width .1s linear}

/* related */
.related{border-top:1px solid var(--line);padding-top:clamp(34px,5vw,54px);margin-top:clamp(34px,5vw,54px)}

/* ---------- Footer ------------------------------------------------------- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(44px,6vw,68px) 0 32px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-brand p{color:var(--mut);font-size:15px;max-width:300px;margin:14px 0 18px}
.foot-col h2.foot-h{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:14px;font-weight:800}
html[lang="he"] .foot-col h2.foot-h{letter-spacing:.02em}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:0}
.foot-col a{display:inline-block;padding:7px 0}
.foot-col a{color:var(--txt);font-size:15px;font-weight:600;min-height:32px}
.foot-col a:hover{color:var(--brand-ink)}
.foot-bottom{
  margin-top:38px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--mut);font-size:14px;
}
.foot-bottom .fb-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-bottom a{color:var(--mut)}
.foot-bottom a:hover{color:var(--ink)}

/* ---------- Misc --------------------------------------------------------- */
.breadcrumbs{font-size:14px;color:var(--mut);padding:18px 0 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.breadcrumbs a{color:var(--mut);font-weight:600}
.breadcrumbs a:hover{color:var(--ink)}
.breadcrumbs .sep{opacity:.55}

.to-top{
  position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:70;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2);color:var(--ink);
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.to-top[data-show="true"]{opacity:1;visibility:visible;transform:none}

/* Reveal-on-scroll is a progressive enhancement: the hidden state is only applied
   once JS has marked the document, so a failed/blocked script can never leave the
   page blank. The .is-in class (and a JS timeout fallback) brings content in. */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .reveal.is-in{opacity:1;transform:none}

.notfound{text-align:center;padding:clamp(60px,10vw,120px) 0}
.notfound .code{font-size:clamp(70px,14vw,130px);font-weight:900;letter-spacing:-.05em;background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}

.legal .prose h2{margin-top:1.7em}
.legal .prose{font-size:16.5px}
.updated{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--mut);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:6px 14px;margin-bottom:20px}

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

@media print{
  html.js .reveal{opacity:1 !important;transform:none !important}
  .site-header,.site-footer,.to-top,.reading-bar,.article-cta,.share-row,.toc-rail{display:none !important}
  body{background:#fff}
  .article-layout{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Analytics consent bar ------------------------------------------ */
.consent-bar{position:fixed;inset-inline:12px;bottom:12px;z-index:90;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;max-width:560px;margin-inline:auto;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 10px 34px rgba(0,0,0,.14)}
.consent-bar[hidden]{display:none}
.consent-bar p{margin:0;font-size:.9rem}
.consent-bar a{text-decoration:underline}
.cb-actions{display:flex;gap:8px;margin-inline-start:auto}