/* ============================================================
   NetBreezer marketing site — 2026 redesign.

   Palette, type weights and components come from the "HOW IT WORKS"
   ad video: cool light-grey ground with corner dot-fields, near-black
   poster headlines, one orange gradient CTA with a glint, green
   reserved for product state (score ring, checks, live badge), soft
   blue for tool icons. Ad and site read as one campaign.

   The page commits to the ad's single light world, so every colour is
   painted explicitly rather than inherited — there is deliberately no
   dark-mode block here. css/style.css (the previous warm-neutral
   system, which does have one) is still live for terms.html and the
   translated directories until those are ported.
   ============================================================ */
:root{
  --ground:#e9eef2;        /* grey biased cool, toward the blue icon chips */
  --ground-2:#dfe6ec;
  --card:#ffffff;
  --ink:#14181c;
  --ink-2:#4b555f;
  --ink-3:#78838d;
  --line:#d3dbe2;
  --orange:#f96300;
  --orange-hi:#ff8a2b;
  --orange-lo:#ee4b00;
  --green:#16955a;
  --green-soft:#e4f4ec;
  --blue:#2f6fed;
  --blue-soft:#e8effd;

  --r-card:22px;
  --r-inner:14px;
  --shadow:0 22px 48px -24px rgba(14,32,48,.42), 0 2px 6px rgba(14,32,48,.05);
  --shadow-lift:0 34px 70px -28px rgba(14,32,48,.50);
  --glow:0 14px 30px -8px rgba(249,99,0,.50);

  --sans:system-ui,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
  /* The poster weight, as a token rather than a literal, so the Hebrew page can
     lower it in one place -- see the html[lang="he"] block at the foot of this
     file for why it has to. */
  --w-heavy:800;

  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  position:relative;
  overflow-x:hidden;
}
/* the ad's dot texture: two square fields in the corners, faded with a mask */
body::before,body::after{
  content:"";position:absolute;width:230px;height:230px;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(20,24,28,.20) 1.1px,transparent 1.1px);
  background-size:15px 15px;
}
body::before{top:0;inset-inline-start:0;-webkit-mask-image:linear-gradient(135deg,#000,transparent 72%);mask-image:linear-gradient(135deg,#000,transparent 72%);}
body::after{top:760px;inset-inline-end:0;-webkit-mask-image:linear-gradient(-135deg,#000,transparent 72%);mask-image:linear-gradient(-135deg,#000,transparent 72%);}

img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px;position:relative;z-index:1;}

/* ---------- type scale ---------- */
.poster{
  font-weight:var(--w-heavy);letter-spacing:-.022em;line-height:1.02;
  font-size:clamp(35px,4.5vw,58px);margin:0;text-wrap:balance;
}
.poster-sm{
  font-weight:var(--w-heavy);letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(28px,3.9vw,44px);margin:0;text-wrap:balance;
}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px;
}
.lede{font-size:clamp(17px,1.55vw,20px);line-height:1.62;color:var(--ink-2);max-width:62ch;margin:0;}
.muted{color:var(--ink-2);}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

section{padding:78px 0;position:relative;}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;max-width:64ch;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;padding:15px 30px;font-size:16px;font-weight:700;
  text-decoration:none;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.btn-cta{
  position:relative;border:0;color:#fff;letter-spacing:.02em;text-transform:uppercase;
  font-size:15.5px;font-weight:var(--w-heavy);padding:16px 30px;
  background:linear-gradient(100deg,var(--orange-lo),var(--orange) 45%,var(--orange-hi));
  box-shadow:var(--glow);
}
.btn-cta:hover{box-shadow:0 18px 38px -8px rgba(249,99,0,.62);}
/* the four-point glint riding the trailing edge of the ad's button */
.btn-cta .glint{position:absolute;inset-inline-end:-9px;top:50%;translate:0 -50%;width:30px;height:30px;opacity:.95;}
.btn-sm{padding:11px 20px;font-size:14.5px;}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover{transform:none;}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(233,238,242,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(211,219,226,.9);}
.nav-inner{position:relative;display:flex;align-items:center;gap:20px;padding:13px 22px;max-width:var(--wrap);margin:0 auto;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;}
.brand-mark{width:34px;height:34px;border-radius:10px;flex:none;}
.brand-name{font-size:20px;font-weight:var(--w-heavy);letter-spacing:-.02em;color:var(--ink);}
.nav-links{display:flex;gap:18px;margin-inline-start:auto;}
/* nowrap plus an early collapse: the translated labels are much longer than
   the English ones ("Pourquoi c'est important" against "Why it matters"), and
   letting them wrap turned the bar into two ragged lines on /fr/ and /de/. */
.nav-links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2);white-space:nowrap;}
.nav-links a:hover{color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:10px;margin-inline-start:auto;}
.nav-links + .nav-right{margin-inline-start:0;}

/* language menu: same "summary carries every code, CSS reveals the one
   matching <html lang>" trick as the previous stylesheet, so a generated
   page needs no build-step logic to show the right label. */
.lang-menu{position:relative;}
.lang-menu > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;
  padding:9px 13px;border:1.5px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink-2);font-size:13.5px;font-weight:700;
}
.lang-menu > summary::-webkit-details-marker{display:none;}
.lang-menu > summary::after{content:"\25BE";color:var(--ink-3);font-size:10px;}
.lang-menu > summary:hover,.lang-menu[open] > summary{color:var(--ink);border-color:var(--ink-3);}
.lang-code{display:none;letter-spacing:.06em;}
html[lang="en"] .lang-current .lang-code[data-lang="en"],
html[lang="fr"] .lang-current .lang-code[data-lang="fr"],
html[lang="de"] .lang-current .lang-code[data-lang="de"],
html[lang="es"] .lang-current .lang-code[data-lang="es"],
html[lang="he"] .lang-current .lang-code[data-lang="he"],
html[lang="ru"] .lang-current .lang-code[data-lang="ru"]{display:inline-block;}
.lang-menu ul{
  position:absolute;z-index:50;margin:8px 0 0;padding:6px;list-style:none;
  inset-inline-end:0;min-width:78px;
  background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);
}
.lang-menu li a{
  display:block;padding:7px 11px;border-radius:8px;
  font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--ink-2);text-decoration:none;
}
.lang-menu li a:hover,.lang-menu li a:focus-visible{background:var(--ground);color:var(--ink);}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:40px;height:40px;padding:0;border:1.5px solid var(--line);border-radius:12px;
  background:var(--card);cursor:pointer;
}
.nav-toggle span{display:block;width:17px;height:2px;margin:0 auto;background:var(--ink);transition:transform .18s ease,opacity .18s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:1180px){
  .nav-toggle{display:flex;}
  .nav-links{
    display:none;
    position:absolute;top:100%;inset-inline-start:22px;inset-inline-end:22px;
    flex-direction:column;gap:0;margin:0;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-inner);
    box-shadow:var(--shadow);padding:6px 18px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;}
  .nav-links a:last-child{border-bottom:none;}
  .nav-right{margin-inline-start:auto;}
}
@media (max-width:520px){
  .nav-cta{display:none;}
}

/* ---------- hero ---------- */
.hero{padding-top:56px;padding-bottom:64px;}
.hero-grid{display:grid;grid-template-columns:1.16fr .84fr;gap:44px;align-items:center;}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:40px;}}
.tagpill{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px 7px 8px;font-size:12.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);box-shadow:0 1px 2px rgba(14,32,48,.05);
}
.tagpill b{display:inline-flex;align-items:center;background:var(--orange);color:#fff;border-radius:999px;padding:3px 10px;font-weight:var(--w-heavy);letter-spacing:.09em;}
.hero-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start;}
/* the one place the accent touches the headline: a marker under the noun
   we want people to leave with */
.hero h1 .hl{
  background:linear-gradient(transparent 62%,rgba(249,99,0,.26) 62%);
  padding:0 .06em;
}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14.5px;color:var(--ink-2);font-weight:600;}
.hero-facts span{display:inline-flex;align-items:center;gap:8px;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;}
.engines{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px;}
.engine{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:13.5px;font-weight:600;color:var(--ink-2);
}

/* photo + floating card, the ad's core composition */
.shot{position:relative;margin-bottom:52px;}
.shot-photo{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-lift);background:var(--ground-2);}
.shot-photo img{width:100%;height:100%;object-fit:cover;}
.float-card{
  position:absolute;inset-inline:6%;bottom:-38px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-radius:var(--r-inner);padding:18px 20px;box-shadow:var(--shadow-lift);
  display:flex;flex-direction:column;gap:11px;
}
.fc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.fc-title{font-weight:var(--w-heavy);font-size:17px;letter-spacing:-.01em;}
.live{
  display:inline-flex;align-items:center;gap:7px;background:var(--green-soft);color:#0d6b41;
  border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;
}
.live .dot{background:var(--green);box-shadow:0 0 0 3px rgba(22,149,90,.18);}
.fc-line{height:8px;border-radius:4px;background:var(--ground-2);}
.fc-line.s{width:62%;}
.fc-url{font-family:var(--mono);font-size:13px;color:var(--ink-2);}

/* ---------- panels & cards ---------- */
.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);padding:28px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:960px){.grid-2{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.grid-2{grid-template-columns:1fr;}}

/* ---------- definition: human column / machine column ---------- */
.define{background:var(--card);}
.define-statement{
  font-size:clamp(24px,3.1vw,38px);font-weight:var(--w-heavy);letter-spacing:-.02em;line-height:1.22;
  margin:0 0 14px;text-wrap:balance;
}
.define-statement em{font-style:normal;color:var(--orange);}
.two-audiences{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px;}
@media (max-width:860px){.two-audiences{grid-template-columns:1fr;}}
.aud{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--card);display:flex;flex-direction:column;}
.aud-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;}
.aud-head .badge{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;}
.aud-head .badge.person{background:var(--blue-soft);}
.aud-head .badge.machine{background:var(--green-soft);}
.aud-head b{font-size:15px;font-weight:var(--w-heavy);letter-spacing:-.01em;}
.aud-head span{font-size:13px;color:var(--ink-3);margin-inline-start:auto;}
.aud-body{padding:22px;flex:1;}
/* left: what a person reads */
.page-mock{display:flex;flex-direction:column;gap:12px;}
.page-mock h4{margin:0;font-size:20px;font-weight:var(--w-heavy);letter-spacing:-.015em;}
.page-mock .tagline{margin:0;color:var(--ink-2);font-size:15px;}
.mock-row{border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:14.5px;background:#fbfcfd;}
.mock-row b{font-weight:700;}
.mock-label{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:4px;}
/* right: what a machine reads */
.code{
  font-family:var(--mono);font-size:12.6px;line-height:1.72;color:#cfd8e3;
  background:#141a20;border-radius:12px;padding:18px;overflow-x:auto;margin:0;
  direction:ltr;text-align:left;
}
.code .k{color:#8fb8ff;}
.code .s{color:#8fe3b0;}
.code .c{color:#6f7f8f;}
.filepills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.filepill{font-family:var(--mono);font-size:12.5px;background:var(--blue-soft);color:#1c4fbd;border-radius:8px;padding:6px 11px;font-weight:600;}

.anatomy{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;}
@media (max-width:860px){.anatomy{grid-template-columns:1fr;}}
.anat{display:flex;gap:14px;align-items:flex-start;}
.check{width:28px;height:28px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none;box-shadow:0 0 0 4px var(--green-soft);}
.anat b{display:block;font-size:16px;font-weight:var(--w-heavy);letter-spacing:-.01em;margin-bottom:3px;}
.anat p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55;}

/* ---------- the difference: two AI answers ---------- */
.chat{border-radius:var(--r-card);padding:22px;display:flex;flex-direction:column;gap:14px;height:100%;}
.chat.bad{background:var(--ground-2);border:1px dashed #b9c4cd;}
.chat.good{background:var(--card);box-shadow:var(--shadow);border-top:4px solid var(--green);}
.chat-label{font-size:12px;font-weight:var(--w-heavy);letter-spacing:.13em;text-transform:uppercase;}
.chat.bad .chat-label{color:#7b8792;}
.chat.good .chat-label{color:var(--green);}
.ask{background:#141a20;color:#e8eef4;border-radius:14px 14px 14px 4px;padding:13px 16px;font-size:15px;font-weight:600;align-self:flex-start;max-width:92%;}
.reply{background:#f6f8fa;border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:15px 17px;font-size:15px;line-height:1.6;color:var(--ink-2);}
.chat.good .reply{background:#fff;}
.reply strong{color:var(--ink);}
.cite{display:inline-flex;align-items:center;gap:7px;margin-top:12px;background:var(--green-soft);color:#0d6b41;border-radius:8px;padding:6px 11px;font-family:var(--mono);font-size:12.5px;font-weight:600;}
.chat-foot{font-size:14px;color:var(--ink-2);margin:auto 0 0;padding-top:4px;}

/* ---------- what you get ---------- */
.get{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 34px;}
@media (max-width:760px){.get{grid-template-columns:1fr;}}
.get-item{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);}
.get-item b{font-weight:700;}
.get-item p{margin:2px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.5;}
.tick{width:22px;height:22px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;flex:none;margin-top:3px;}

/* ---------- comparison ---------- */
.tablewrap{overflow-x:auto;border-radius:var(--r-card);box-shadow:var(--shadow);background:var(--card);}
.tablewrap table{border-collapse:collapse;width:100%;min-width:660px;font-size:15px;}
.tablewrap th,.tablewrap td{padding:16px 20px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top;}
.tablewrap thead th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700;background:#f7f9fb;}
.tablewrap thead th.us{color:var(--orange);}
.tablewrap tbody th{font-weight:600;color:var(--ink-2);width:26%;}
.tablewrap td.us{background:rgba(249,99,0,.045);font-weight:700;}
.tablewrap tbody tr:last-child th,.tablewrap tbody tr:last-child td{border-bottom:0;}

/* ---------- steps ---------- */
.steps{display:flex;flex-direction:column;gap:26px;}
.step{
  display:grid;grid-template-columns:56px 1.05fr .95fr;gap:26px;align-items:center;
  background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);padding:24px;
}
@media (max-width:860px){.step{grid-template-columns:44px 1fr;}.step-photo{grid-column:1 / -1;}}
.step-rail{display:flex;flex-direction:column;align-items:center;gap:8px;align-self:stretch;}
.step-rail .check{width:34px;height:34px;}
.step-rail .line{flex:1;width:2px;background:var(--green-soft);border-radius:1px;min-height:18px;}
.step-copy .n{font-size:12.5px;font-weight:var(--w-heavy);letter-spacing:.13em;text-transform:uppercase;color:var(--green);margin-bottom:6px;}
.step-copy h3{margin:0 0 8px;font-size:23px;font-weight:var(--w-heavy);letter-spacing:-.018em;}
.step-copy p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.58;}
.step-photo{border-radius:var(--r-inner);overflow:hidden;position:relative;box-shadow:var(--shadow);}
.step-photo img{width:100%;height:200px;object-fit:cover;}
.step-chip{
  position:absolute;inset-inline-start:14px;bottom:14px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-radius:10px;padding:9px 13px;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:9px;
  box-shadow:0 8px 20px -8px rgba(14,32,48,.5);
}

/* score ring, lifted from step 2 of the ad */
.ring{position:relative;width:112px;height:112px;flex:none;}
.ring svg{transform:rotate(-90deg);}
.ring .track{stroke:var(--ground-2);}
.ring .fill{stroke:var(--green);stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;animation:ringfill 1.5s cubic-bezier(.22,.8,.28,1) forwards;}
@keyframes ringfill{to{stroke-dashoffset:66;}}
@media (prefers-reduced-motion:reduce){.ring .fill{animation:none;stroke-dashoffset:66;}}
.ring-val{position:absolute;inset:0;display:grid;place-items:center;text-align:center;}
.ring-val b{display:block;font-size:27px;font-weight:var(--w-heavy);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;}
.ring-val span{font-size:11.5px;color:var(--ink-3);font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.score-box{display:flex;align-items:center;gap:18px;margin-top:18px;}
.score-bars{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0;}
.bar{height:8px;border-radius:4px;background:var(--ground-2);overflow:hidden;}
.bar i{display:block;height:100%;background:var(--green);border-radius:4px;}
.bar-label{font-size:13px;color:var(--ink-2);display:flex;justify-content:space-between;gap:10px;}

/* tool tiles from step 4 */
.tiles{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:92px;}
.tile .ic{width:38px;height:38px;border-radius:50%;background:var(--blue-soft);display:grid;place-items:center;}
.tile.g .ic{background:var(--green-soft);}
.tile b{font-size:13.5px;font-weight:700;}

/* ---------- after you publish ---------- */
.after{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media (max-width:860px){.after{grid-template-columns:1fr;}}
.after-tag{display:inline-flex;align-self:flex-start;border-radius:999px;padding:5px 13px;font-size:12px;font-weight:var(--w-heavy);letter-spacing:.1em;text-transform:uppercase;}
.after-tag.auto{background:var(--green-soft);color:#0d6b41;}
.after-tag.yours{background:rgba(249,99,0,.12);color:#b53f00;}
.after .card{display:flex;flex-direction:column;gap:14px;}
.after h3{margin:0;font-size:20px;font-weight:var(--w-heavy);letter-spacing:-.015em;}
.after ul,.after ol{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:11px;color:var(--ink-2);font-size:15px;}
.after ol b{color:var(--ink);}
.after-note{margin-top:22px;background:var(--ground-2);border-radius:var(--r-inner);padding:18px 22px;font-size:15px;color:var(--ink-2);}
.after-note b{color:var(--ink);}

/* ---------- pricing ---------- */
.price{max-width:460px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center;}
.price .amount{font-size:64px;font-weight:var(--w-heavy);letter-spacing:-.035em;line-height:1;}
.price .amount span{font-size:19px;font-weight:600;color:var(--ink-3);letter-spacing:0;}
/* The headline is the monthly figure; the annual charge sits directly under
   it, close enough to read as one price and not as a second one. The negative
   margin cancels the column's 18px gap so the pair stays a unit. */
.price .note{margin:-12px 0 0;font-size:14px;color:var(--ink-3);}
.price ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;text-align:start;width:100%;font-size:15px;color:var(--ink-2);}
.price li{display:flex;gap:11px;align-items:flex-start;}
.price .btn-cta{width:100%;}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:10px;}
.faq-item{background:var(--card);border-radius:var(--r-inner);box-shadow:0 1px 2px rgba(14,32,48,.06);overflow:hidden;}
.faq-item > summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ink-3);line-height:1;flex:none;}
.faq-item[open] > summary::after{content:"\2212";}
.faq-item p{margin:0;padding:0 22px 20px;color:var(--ink-2);font-size:15.5px;line-height:1.62;max-width:70ch;}

/* ---------- footer ---------- */
footer{background:#141a20;color:#aeb9c4;padding:44px 0 34px;margin-top:20px;}
footer .brand-name{color:#fff;}
.foot-in{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;}
.foot-links{display:flex;flex-wrap:wrap;gap:20px;font-size:14.5px;}
.foot-links a{text-decoration:none;color:#aeb9c4;}
.foot-links a:hover{color:#fff;}
.copyright{margin-top:26px;font-size:13.5px;color:#7c8894;
  display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;align-items:baseline;}
.copyright a{color:#aeb9c4;text-decoration:none;}
.copyright a:hover{color:#fff;}

/* ---------- Hebrew ----------
   Two faults in the Latin stack that only show up on /he/, both invisible
   until the glyph advances are measured:

   1. Segoe UI has no Hebrew above weight 700. At 800 the browser resolves to
      Segoe UI Black, which carries no Hebrew at all, so the Hebrew silently
      falls out to an unrelated default face -- every heading and the CTA
      rendered in a different typeface from the body text beside them.
      Hebrew advance at 40px: 400=257.3, 500/600=262.7, 700=269.9, 800=211.6.
      A width that SHRINKS as weight rises is the tell; that is the fallback
      face, not a bolder Segoe.
   2. "Segoe UI Variable Display", second in --sans, has no Hebrew either (its
      Hebrew measures the same as a deliberately missing family). It still
      served the Latin, so "ChatGPT" and the Hebrew around it were two
      different faces on one line.

   Dropping the Variable Display entry and capping the poster weight at 700
   fixes both, using only what is already on the machine. Bold is the ceiling,
   so Hebrew headlines carry slightly less punch than the English ones -- that
   is the trade for not shipping a webfont. Rubik at 800 was the alternative.

   Everything else -- sizes, tracking, uppercase -- is deliberately left alone
   here; this block changes the face and the weight, nothing else. */
html[lang="he"] {
  --sans:"Segoe UI",system-ui,Arial,"Arial Hebrew",sans-serif;
  --w-heavy:700;
}