/* =========================================================================
   Assistant, self-hosted (not linked from Google Fonts — the privacy policy
   promises no third-party requests, and self-hosting is faster besides).
   Assistant is the standard Helvetica/Arial-equivalent grotesque for Hebrew:
   plain and neutral rather than distinctive. Two files cover the whole page
   — it's a variable font, so one file per script range spans its full
   weight range (200–800) rather than needing a separate download per weight.
   ========================================================================= */
@font-face{
  font-family:"Assistant";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/assets/fonts/assistant-hebrew.woff2") format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:"Assistant";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/assets/fonts/assistant-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;
}

/* =========================================================================
   Palette: the South African flag, reorganised into a working system.
   Green carries the brand, gold carries every call to action, chilli red is
   held back for urgency alone, and Reflex blue grounds the footer.
   ========================================================================= */
:root{
  --ink:#0A0F1C;
  --ink-2:#39414F;
  --ink-3:#69717F;
  --brand:#0F6BE0;
  --brand-lift:#1877F2;
  --brand-wash:#EBEEF2;
  --brand-wash-2:#F1F4F7;
  --amber:#FFB612;
  --amber-ink:#5E3F00;
  --amber-wash:#FFEFC9;
  --blue:#001489;
  --blue-deep:#000E5E;
  --navy:#0B0B0D;
  --red:#E03C31;
  --paper:#F4F6F9;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --line:#DDE2EA;
  --line-strong:#BFC7D4;
  --ring:#1877F2;
  --shadow:0 1px 1px rgba(10,15,28,.04), 0 3px 6px -2px rgba(10,15,28,.06), 0 12px 28px -14px rgba(10,15,28,.16);
  --shadow-lg:0 1px 1px rgba(10,15,28,.04), 0 6px 14px -4px rgba(10,15,28,.08), 0 32px 64px -28px rgba(10,15,28,.26);
  --ok:#0F6BE0;
  --warn:#C0392B;

  --t1:#0F6BE0; --t2:#E03C31; --t3:#001489;
  --t4:#FFB612; --t5:#0B0B0D; --t6:#0E7490;
  --on1:#fff; --on2:#fff; --on3:#fff; --on4:#3A2700; --on5:#fff; --on6:#fff;
  --gold-deep:#8A5E00; --band-bg:#E8A200; --band-ink:#2A1D00;

  --f-latin:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Roboto,Arial,sans-serif;
  --f-hebrew:"Assistant",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Hebrew","Arial Hebrew",Arial,sans-serif;
  --f-sans:var(--f-latin);
  --f-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --r-sm:8px; --r:12px; --r-lg:20px;
  --gap:clamp(1rem,2.5vw,1.75rem);
  --wrap:1120px;
}
:root[lang^="he"]{ --f-sans:var(--f-hebrew) }

*,*::before,*::after{box-sizing:border-box}
html{font-size:112.5%;scroll-behavior:smooth;scroll-padding-top:5.9rem}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:clamp(1rem,.97rem + .18vw,1.06rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:root[lang^="he"] body{line-height:1.65}
img,svg{max-width:100%}
a{color:var(--brand);text-underline-offset:3px}
:focus-visible{outline:2.5px solid var(--ring);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{margin:0;line-height:1.13;text-wrap:balance;letter-spacing:-.022em;font-weight:800}
h1{font-size:clamp(2.1rem,1.3rem + 3.4vw,3.85rem);letter-spacing:-.038em;line-height:1.04}
h2{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.55rem);letter-spacing:-.032em}
h3{font-size:clamp(1.06rem,1rem + .3vw,1.22rem);letter-spacing:-.018em}
:root[lang^="he"] h1{letter-spacing:-.03em}
:root[lang^="he"] h2{letter-spacing:-.025em}
p{margin:0}

.wrap{width:min(100% - 2.2rem,var(--wrap));margin-inline:auto}
.stack{display:flex;flex-direction:column;gap:var(--gap)}

.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--f-mono);font-size:.7rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--brand);
  display:flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:1.9rem;height:4px;border-radius:2px;flex:none;background:currentColor}
:root[lang^="he"] .eyebrow{letter-spacing:.11em}

.lede{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:var(--ink-2);max-width:54ch;line-height:1.62}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--brand);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--r) var(--r)}
.skip:focus{inset-inline-start:1rem}


/* ============ buttons ============ */
.btn{
  --btn-bg:var(--brand); --btn-fg:#fff; --btn-line:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.35rem;border-radius:var(--r);border:1.5px solid var(--btn-line);
  background:var(--btn-bg);color:var(--btn-fg);
  font:inherit;font-weight:650;font-size:.96rem;letter-spacing:-.012em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn-amber{--btn-bg:linear-gradient(180deg,#FFC63F,var(--amber));--btn-fg:#2B1E00;box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 6px 16px -8px rgba(255,182,18,.9)}
.btn-amber:hover{--btn-bg:linear-gradient(180deg,#FFD264,#FFBE29)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-line:var(--line-strong)}
.btn-ghost:hover{--btn-bg:var(--surface)}
.btn-sm{padding:.5rem .85rem;font-size:.86rem}
@media (prefers-reduced-motion:reduce){ .btn:hover{transform:none} }

/* ============ header ============ */
.hdr{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;min-height:4rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);flex:none}
.logo{display:block;width:auto;height:clamp(48px,6.4vw,72px)}
.wordmark{font-size:1.55rem;font-weight:800;letter-spacing:-.035em;color:#fff;line-height:1.1}
.brand-sub{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-top:.35rem;
}
:root[lang^="he"] .brand-sub{font-family:var(--f-hebrew);letter-spacing:0;font-size:.72rem;text-transform:none}
.ftr .brand-sub{color:color-mix(in srgb,#D6DEF2 66%,transparent)}
.nav{display:flex;gap:.15rem;margin-inline-start:auto}
.nav a{padding:.45rem .55rem;border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2);font-weight:600;font-size:.85rem;letter-spacing:-.01em}
.nav a:hover{color:var(--ink);background:var(--surface)}
.hdr-cta{display:flex;align-items:center;gap:.5rem;flex:none}

/* language switch */
.lang{display:flex;border:1.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;flex:none}
.lang button{
  font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.02em;
  padding:.42rem .6rem;border:0;background:transparent;color:var(--ink-3);cursor:pointer;
  min-width:2.5rem;transition:background-color .12s ease,color .12s ease;
}
.lang button:hover{color:var(--ink);background:var(--surface)}
.lang button[aria-pressed="true"]{background:var(--brand);color:#fff}
@media (max-width:980px){ .nav{display:none} }
@media (max-width:560px){ .brand-sub{display:none} .hdr-cta .btn{display:none} }

/* ============ hero ============ */
.hero{padding:clamp(2.5rem,5.5vw,4.25rem) 0 clamp(1.5rem,3vw,2.5rem);position:relative;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 5%,var(--paper)) 0%,var(--paper) 62%);}
.hero h1 .hl{color:var(--brand)}
.hero-art{position:relative}
.hero-art::before{
  content:"";position:absolute;inset:-8% -4%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 15%,transparent),transparent 78%);
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} }
.hero-copy{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.hero h1 .hl{color:var(--brand)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.trustrow{display:flex;flex-wrap:wrap;column-gap:1.3rem;row-gap:.5rem;padding-top:.5rem}
.chip{
  /* Informational only, never clickable — deliberately flat, not a pill
     button: no border, no fill, just a bullet and text. */
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;color:var(--ink-2);
}
:root[lang^="he"] .chip{font-family:var(--f-hebrew);font-size:.76rem}
.chip .dot{width:.42rem;height:.42rem;border-radius:50%;background:var(--ok);flex:none}

.ticket{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.ticket-top{
  display:flex;align-items:center;gap:.6rem;padding:.7rem .95rem;
  border-bottom:1px solid var(--line);background:var(--surface-2);
  font-family:var(--f-mono);font-size:.71rem;color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase;
}
:root[lang^="he"] .ticket-top{font-family:var(--f-hebrew);letter-spacing:0;text-transform:none;font-size:.75rem}
.ticket-top .live{width:.5rem;height:.5rem;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.ticket-body{padding:1.15rem;display:flex;flex-direction:column;gap:.1rem}
.trow{display:flex;align-items:baseline;gap:.8rem;padding:.52rem 0;border-bottom:1px dashed var(--line)}
.trow:last-child{border-bottom:0}
.tkey{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);flex:none;width:5.9rem}
:root[lang^="he"] .tkey{font-family:var(--f-hebrew);letter-spacing:0;text-transform:none;font-size:.74rem;width:5rem}
.tval{font-weight:600;font-size:.93rem;color:var(--ink);line-height:1.45}
.tval.acc{color:var(--brand)}
.ticket-foot{padding:.85rem 1.15rem;border-top:1px solid var(--line);background:var(--brand-wash-2);display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.ticket-foot .price{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
:root[lang^="he"] .ticket-foot .price{font-family:var(--f-hebrew);letter-spacing:0;text-transform:none;font-size:.8rem}
.ticket-foot .price b{font-size:.95rem;color:var(--ink);font-weight:700;letter-spacing:0}

/* ============ sections ============ */
.sec{padding:clamp(3rem,6.5vw,5.5rem) 0}
.sec-alt{background:var(--surface);border-block:1px solid var(--line)}
/* the saturated blue block, now carried by the process section */
#how{background:linear-gradient(155deg,color-mix(in srgb,var(--blue) 88%,#3B6BFF) 0%,var(--blue) 45%,var(--blue-deep) 100%);border-block:0;color:#fff;position:relative;overflow:hidden}
#how h2{color:#fff}
#how .eyebrow{color:var(--amber)}
#how .lede{color:rgba(255,255,255,.85)}
#how .step{background:#fff;border-color:transparent;box-shadow:0 2px 4px rgba(0,0,0,.08), 0 22px 48px -26px rgba(0,0,0,.6)}
#how .step h3{color:var(--ink)}
#how .step p{color:var(--ink-2)}
.sec-head{display:flex;flex-direction:column;gap:.85rem;margin-bottom:clamp(1.75rem,4vw,2.9rem)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }
.step{position:relative;padding:1.55rem 1.45rem;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;gap:.55rem}
.sec-alt .step{background:var(--paper)}
.step .num{font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.step p{color:var(--ink-2);font-size:.95rem}

.cat-note{
  display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 1rem;border-radius:var(--r);
  background:var(--amber-wash);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);
  color:var(--amber-ink);font-size:.92rem;font-weight:600;max-width:62ch;
}
.cat-note svg{width:1.15rem;height:1.15rem;flex:none;margin-top:.15rem}

.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:var(--gap);margin-top:1.5rem}
.cat{
  --tint:var(--brand);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
@media (prefers-reduced-motion:reduce){ .cat:hover{transform:none} }
.sec-alt .cat{background:var(--surface-2)}
.cat[data-tint="1"]{--tint:var(--t1);--on:var(--on1)} .cat[data-tint="2"]{--tint:var(--t2);--on:var(--on2)}
.cat[data-tint="3"]{--tint:var(--t3);--on:var(--on3)} .cat[data-tint="4"]{--tint:var(--t4);--on:var(--on4)}
.cat[data-tint="5"]{--tint:var(--t5);--on:var(--on5)} .cat[data-tint="6"]{--tint:var(--t6);--on:var(--on6)}
.cat:has(input:checked){border-color:var(--tint);box-shadow:0 0 0 2px var(--tint)}
.cat-hd{display:flex;align-items:center;gap:.75rem;padding:1.05rem 1.15rem .85rem;border-bottom:1px solid var(--line)}
.cat-ico{
  width:2.35rem;height:2.35rem;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--tint);color:var(--on,#fff);
}
.cat-ico svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cat-hd .cnt{margin-inline-start:auto;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);flex:none}
.cat ul{list-style:none;margin:0;padding:.5rem .65rem .8rem;display:flex;flex-direction:column;gap:1px}
.opt{display:block}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt label{
  display:flex;align-items:flex-start;gap:.6rem;padding:.42rem .5rem;border-radius:var(--r-sm);
  cursor:pointer;font-size:.92rem;color:var(--ink-2);line-height:1.45;
  transition:background-color .12s ease,color .12s ease;
}
.opt label:hover{background:var(--brand-wash-2);color:var(--ink)}
.box{
  width:1.05rem;height:1.05rem;border-radius:5px;flex:none;margin-top:.23rem;
  border:1.5px solid var(--line-strong);background:var(--surface);
  display:grid;place-items:center;transition:all .12s ease;
}
.sec-alt .box{background:var(--paper)}
.box svg{width:.7rem;height:.7rem;fill:none;stroke:var(--on,#fff);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:all .12s ease}
.opt input:checked + label{color:var(--ink);font-weight:600}
.opt input:checked + label .box{background:var(--tint,var(--brand));border-color:var(--tint,var(--brand))}
.opt input:checked + label .box svg{opacity:1;transform:scale(1)}
.opt input:focus-visible + label{outline:2.5px solid var(--ring);outline-offset:1px}

/* ============ family band ============ */
.band{border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(150deg,color-mix(in srgb,var(--band-bg) 82%,#FFD25E) 0%,var(--band-bg) 52%,color-mix(in srgb,var(--band-bg) 84%,#7A4A00) 100%);color:var(--band-ink);display:grid;grid-template-columns:1.05fr .95fr;position:relative;isolation:isolate}
@media (max-width:820px){ .band{grid-template-columns:1fr} }
.band-copy,.band-list{position:relative;z-index:1}
.band-copy{padding:clamp(1.6rem,4vw,2.75rem);display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.band-copy .eyebrow{color:#6B4A00}
.band-copy h2{color:inherit}
.band-copy p{color:inherit;opacity:.88;max-width:46ch}
.band-list{
  --tint:var(--band-ink);--on:#FFE9AE;
  padding:clamp(1.4rem,3.5vw,2.25rem);background:color-mix(in srgb,#000 11%,transparent);
  display:flex;flex-direction:column;gap:.05rem;
}
.band-list .opt label{color:inherit;opacity:.9}
.band-list .opt label:hover{background:color-mix(in srgb,#fff 26%,transparent);opacity:1}
.band-list .box{background:color-mix(in srgb,#fff 34%,transparent);border-color:color-mix(in srgb,#000 28%,transparent)}
.band-list .opt input:checked + label{opacity:1}
.band-list .opt input:checked + label .box{background:var(--band-ink);border-color:var(--band-ink)}
.band-ripple{position:absolute;z-index:0;pointer-events:none;inset-block-start:-14%;inset-inline-start:-9%;width:min(62%,430px);opacity:.14}
.band-ripple svg{display:block;width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:2}

/* ============ promises ============ */
.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap)}
.promise{display:flex;flex-direction:column;gap:.45rem;padding-top:1rem;border-top:5px solid var(--brand)}
.promises .promise:nth-child(1){border-top-color:var(--t1)}
.promises .promise:nth-child(2){border-top-color:var(--t4)}
.promises .promise:nth-child(3){border-top-color:var(--t2)}
.promises .promise:nth-child(4){border-top-color:var(--t3)}
.promise h3{font-size:1.04rem}
.promise p{color:var(--ink-2);font-size:.93rem}

/* ============ quote ============ */
#quote{background:var(--surface-2);border-top:5px solid var(--brand);border-bottom:1px solid var(--line)}
.quote-grid{display:grid;grid-template-columns:1fr 380px;gap:clamp(1.5rem,3.5vw,2.5rem);align-items:start}
@media (max-width:960px){ .quote-grid{grid-template-columns:1fr} }
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--shadow)}
.sec-alt .form-card{background:var(--surface-2)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
@media (max-width:600px){ .fgrid{grid-template-columns:1fr} }
.field{display:flex;flex-direction:column;gap:.35rem}
.field.wide{grid-column:1/-1}
.field label,.leg{font-size:.78rem;font-weight:700;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:.35rem}
:root[lang^="he"] .field label,:root[lang^="he"] .leg{letter-spacing:0;text-transform:none;font-size:.85rem}
.field .opt-tag{font-weight:500;color:var(--ink-3);text-transform:none;letter-spacing:0}
.field .req{color:var(--warn);font-family:var(--f-mono)}
.field input,.field textarea{
  font:inherit;font-size:.97rem;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r);padding:.75rem .9rem;width:100%;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.field input:hover,.field textarea:hover{border-color:var(--line-strong)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.field textarea{resize:vertical;min-height:6.5rem;line-height:1.58}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.85}
.field .err{font-size:.79rem;color:var(--warn);font-weight:600;min-height:1rem;text-transform:none;letter-spacing:0}
.field[data-bad="1"] input{border-color:var(--warn)}
.field input[type="tel"],.field input[type="email"]{direction:ltr}
:root[dir="rtl"] .field input[type="tel"],:root[dir="rtl"] .field input[type="email"]{text-align:right}

fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.segs{display:flex;flex-wrap:wrap;gap:.45rem}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;padding:.5rem .85rem;border-radius:999px;
  border:1.5px solid var(--line);background:var(--paper);font-size:.87rem;font-weight:600;color:var(--ink-2);
  transition:all .12s ease;
}
.seg label:hover{border-color:var(--line-strong);color:var(--ink)}
.seg input:checked + label{background:var(--brand);border-color:var(--brand);color:#fff}
.seg input:focus-visible + label{outline:2.5px solid var(--ring);outline-offset:2px}
/* urgency is the one place chilli red is allowed to speak */
#ur1:checked + label{background:var(--red);border-color:var(--red);color:#fff}

.form-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.35rem;padding-top:1.35rem;border-top:1px solid var(--line)}
.formnote{font-size:.8rem;color:var(--ink-3);margin-top:.9rem;line-height:1.55;max-width:62ch}

.rail{position:sticky;top:5.9rem;display:flex;flex-direction:column;gap:1rem}
@media (max-width:960px){ .rail{position:static} }
.sum{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.sum-hd{padding:.85rem 1.05rem;border-bottom:1px solid var(--line);background:var(--brand-wash-2);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.sum-hd strong{font-size:.83rem;text-transform:uppercase;letter-spacing:.07em}
:root[lang^="he"] .sum-hd strong{text-transform:none;letter-spacing:0;font-size:.95rem}
.sum-hd .n{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3)}
.sum-body{padding:.85rem 1.05rem;max-height:20rem;overflow-y:auto}
.sum-body ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.sum-body li{display:flex;align-items:flex-start;gap:.5rem;font-size:.87rem;color:var(--ink-2);line-height:1.45}
.sum-body li::before{content:"—";color:var(--brand);flex:none;font-family:var(--f-mono)}
.sum-empty{font-size:.87rem;color:var(--ink-3);line-height:1.55}
.sum-foot{padding:.85rem 1.05rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-3);line-height:1.55}
.sum-foot b{color:var(--ink)}

.faq{display:flex;flex-direction:column;gap:.55rem;max-width:78ch}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.15rem .25rem}
.sec-alt details{background:var(--surface-2)}
summary{cursor:pointer;list-style:none;padding:.85rem 1rem;font-weight:700;font-size:1rem;letter-spacing:-.018em;display:flex;align-items:center;gap:.75rem;border-radius:var(--r-sm)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-inline-start:auto;flex:none;width:.6rem;height:.6rem;border-inline-end:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:transform .18s ease}
:root[dir="rtl"] summary::after{border-inline-end:0;border-inline-start:2px solid var(--brand);transform:rotate(-45deg)}
details[open] summary::after{transform:rotate(225deg)}
:root[dir="rtl"] details[open] summary::after{transform:rotate(135deg)}
details p{padding:0 1rem 1rem;color:var(--ink-2);font-size:.94rem;max-width:68ch}

.contact{display:grid;gap:var(--gap)}
.cbox{display:flex;flex-direction:column;gap:.3rem}
.cbox .k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
:root[lang^="he"] .cbox .k{font-family:var(--f-hebrew);letter-spacing:.02em;text-transform:none;font-size:.78rem}
.cbox .v{font-weight:700;font-size:1.03rem}
.cbox .v a{text-decoration:none}
.cbox .v a:hover{text-decoration:underline}
.cbox small{color:var(--ink-2);font-size:.85rem;line-height:1.5}

/* ============ footer: Reflex blue, the last of the flag ============ */
.ftr{background:var(--navy);color:#D6DEF2;padding:2.5rem 0 6rem;position:relative;overflow:hidden}
.ftr .wrap{position:relative;z-index:1}
.ftr-in{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.ftr .brand{color:inherit}
.ftr .brand-sub{color:color-mix(in srgb,#D6DEF2 60%,transparent)}
.ftr-links{display:flex;flex-wrap:wrap;gap:1rem;font-size:.89rem}
.ftr-links a{color:inherit;opacity:.82;text-decoration:none}
.ftr-links a:hover{opacity:1;text-decoration:underline}
.ftr small{display:block;width:100%;font-size:.77rem;opacity:.6;line-height:1.65;border-top:1px solid color-mix(in srgb,#fff 14%,transparent);padding-top:1.25rem;margin-top:.5rem}

/* ============ floating bar / toast ============ */
.floatbar{
  position:fixed;inset-inline:0;bottom:0;z-index:70;transform:translateY(110%);
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
  background:var(--surface);border-top:1px solid var(--line-strong);
  box-shadow:0 -8px 32px -16px rgba(0,0,0,.35);padding:.7rem 0;
}
.floatbar[data-on="1"]{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){ .floatbar{transition:none} }
.floatbar-in{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.floatbar .txt{font-size:.91rem;font-weight:650}
.floatbar .txt b{font-family:var(--f-mono);color:var(--brand)}
.floatbar .float-tbd{font-weight:500;color:var(--ink-3);font-size:.85em}
.floatbar .btn{margin-inline-start:auto}
.linkbtn{background:none;border:0;font:inherit;font-size:.84rem;color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:.3rem}
.linkbtn:hover{color:var(--ink)}
.toast{
  position:fixed;bottom:5.5rem;left:50%;transform:translate(-50%,1rem);z-index:90;
  background:var(--ink);color:var(--paper);padding:.7rem 1.15rem;border-radius:999px;
  font-size:.89rem;font-weight:650;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;box-shadow:var(--shadow-lg);max-width:min(90vw,32rem);text-align:center;
}
.toast[data-on="1"]{opacity:1;transform:translate(-50%,0)}

.hero-col{display:flex;flex-direction:column}
.hero-art{display:grid;place-items:center;padding:0 0 clamp(.75rem,2vw,1.25rem)}
.logo-hero{display:block;width:100%;max-width:520px;height:auto;position:relative;z-index:1}
.ticket-float{margin-top:1.25rem}

.strip{width:100%;line-height:0;color:var(--brand);margin-top:clamp(1.5rem,4vw,2.5rem)}
.strip svg{display:block;width:100%;height:auto;opacity:.26}
.strip .amb{stroke:var(--amber);opacity:.85}

.step-ico{
  width:2.9rem;height:2.9rem;border-radius:11px;display:grid;place-items:center;
  background:var(--tint,var(--brand));color:var(--on,#fff);margin-bottom:.15rem;
}
.step-ico svg{width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.steps .step:nth-child(1){--tint:var(--t1);--on:var(--on1)}
.steps .step:nth-child(2){--tint:var(--t4);--on:var(--on4)}
.steps .step:nth-child(3){--tint:var(--t3);--on:var(--on3)}
.steps .step:nth-child(1) .num{color:var(--t1)}
.steps .step:nth-child(2) .num{color:var(--gold-deep)}
.steps .step:nth-child(3) .num{color:var(--t3)}

/* ============ priced catalogue rows ============ */
.opt label{justify-content:space-between}
.opt label .nm{flex:1 1 auto;min-width:0}
.opt label .pz{
  flex:none;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-weight:700;font-size:.88rem;color:var(--ink);white-space:nowrap;
  display:flex;align-items:baseline;gap:.35rem;
}
.opt label .pz .nt{font-style:normal;font-size:.7rem;font-weight:600;color:var(--ink-3)}
.band-list .opt label .pz{color:inherit}
.band-list .opt label .pz .nt{color:inherit;opacity:.7}

.sum-body li{justify-content:space-between;gap:.85rem}
.sum-body li::before{content:none}
.sum-body li b{flex:none;color:var(--ink);font-weight:700}
.sum-total{
  display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  padding:.9rem 1.05rem;border-top:2px solid var(--brand);background:var(--brand-wash-2);
  font-weight:800;font-size:1.02rem;
}
.sum-total b{margin-inline-start:auto;font-size:1.35rem;letter-spacing:-.02em;color:var(--brand)}
.sum-total small{flex-basis:100%;font-size:.76rem;font-weight:600;color:var(--ink-3)}
.fb-total{font-family:var(--f-mono);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--brand)}

/* ============ audience switch ============ */
:root[data-mode="home"] [data-only="biz"]{display:none !important}
:root[data-mode="biz"] [data-only="home"]{display:none !important}
.audience{background:var(--surface);border-bottom:1px solid var(--line)}
.audience-in{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;padding:.85rem 0;justify-content:center}
.audience .q{font-size:.86rem;font-weight:700;color:var(--ink-3)}
.aud{display:flex;gap:.4rem;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.28rem}
.aud button{
  display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-size:.92rem;font-weight:700;
  padding:.5rem 1.1rem;border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}
.aud button:hover{color:var(--ink)}
.aud button svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.aud button[aria-pressed="true"]{background:var(--brand);color:#fff;box-shadow:var(--shadow)}

/* ============ pricing ============ */
.promo{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:linear-gradient(150deg,#FFD25E 0%,var(--amber) 55%,#E8A200 100%);
  color:#2A1D00;border-radius:var(--r-lg);padding:1.1rem 1.4rem;margin-bottom:1.5rem;
  box-shadow:0 12px 32px -16px rgba(232,162,0,.85);
}
.promo .tag{font-family:var(--f-mono);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:#2A1D00;color:var(--amber);padding:.3rem .6rem;border-radius:6px;flex:none}
:root[lang^="he"] .promo .tag{font-family:var(--f-hebrew);letter-spacing:.02em;text-transform:none;font-size:.78rem}
.promo .txt{font-weight:800;font-size:1.06rem;line-height:1.35}
.promo .amt{font-family:var(--f-mono);font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.promo .was{opacity:.62;text-decoration:line-through;font-family:var(--f-mono);font-size:.92rem;font-weight:600}

.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:var(--gap)}
.pc{background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--tint,var(--brand));
  border-radius:var(--r-lg);padding:1.35rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.pc:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.prices .pc:nth-child(1){--tint:var(--t1)} .prices .pc:nth-child(2){--tint:var(--t6)}
.prices .pc:nth-child(3){--tint:var(--t4)} .prices .pc:nth-child(4){--tint:var(--t3)}
.pc .ico{width:2.5rem;height:2.5rem;border-radius:10px;display:grid;place-items:center;
  background:var(--tint);color:#fff;margin-bottom:.15rem}
.prices .pc:nth-child(3) .ico{color:#3A2700}
.pc .ico svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pc h3{font-size:1.05rem}
.pc .amt{font-family:var(--f-mono);font-size:2rem;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.pc .amt small{font-size:.46em;font-weight:600;color:var(--ink-3);letter-spacing:0;margin-inline-start:.25em}
.pc .amt .pre{font-size:.5em;font-weight:600;color:var(--ink-3);margin-inline-end:.2em}
.pc p{font-size:.9rem;color:var(--ink-2);line-height:1.5}
.pc .quoted{font-family:var(--f-mono);font-size:1.02rem;font-weight:700;color:var(--brand);line-height:1.3}

.fine{margin-top:1.25rem}
.fine summary{cursor:pointer;list-style:none;font-weight:700;font-size:.94rem;color:var(--brand);
  padding:.6rem 0;display:inline-flex;align-items:center;gap:.5rem}
.fine summary::-webkit-details-marker{display:none}
.fine summary::after{content:"";width:.5rem;height:.5rem;border-inline-end:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease}
.fine[open] summary::after{transform:rotate(225deg)}
.ratelist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 2.25rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:.6rem 1.25rem 1rem;margin-top:.4rem}
.ratelist .r{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.ratelist .r b{font-family:var(--f-mono);font-weight:700;white-space:nowrap;color:var(--ink)}
.ratelist .r span{color:var(--ink-2)}

/* ============ business ============ */
#business{background:linear-gradient(160deg,#0B2A9E 0%,var(--blue) 44%,var(--blue-deep) 100%);color:#fff;position:relative;overflow:hidden}
#business .wrap{position:relative;z-index:1}
#business h2{color:#fff;max-width:20ch}
#business .eyebrow{color:var(--amber)}
#business .lede{color:rgba(255,255,255,.86)}
.biz-en{display:inline-flex;align-items:center;gap:.5rem;margin-top:.25rem;
  font-family:var(--f-mono);font-size:.78rem;font-weight:600;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  padding:.42rem .8rem;border-radius:999px}
:root[lang^="he"] .biz-en{font-family:var(--f-hebrew);font-size:.85rem}
.checkup{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-lg);padding:1.25rem 1.4rem;margin:1.5rem 0}
.checkup .amt{font-family:var(--f-mono);font-size:2.2rem;font-weight:800;letter-spacing:-.035em;color:var(--amber);line-height:1;flex:none}
.checkup .body{flex:1 1 18rem}
.checkup h3{color:#fff;margin-bottom:.3rem}
.checkup p{font-size:.92rem;color:rgba(255,255,255,.82);line-height:1.55}
.checkup .credit{display:block;margin-top:.4rem;font-weight:700;color:var(--amber)}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:var(--gap)}
.plan{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:1.4rem 1.35rem;
  display:flex;flex-direction:column;gap:.6rem;box-shadow:0 2px 4px rgba(0,0,0,.1), 0 26px 54px -28px rgba(0,0,0,.65);
  position:relative}
.plan.hot{outline:3px solid var(--amber);outline-offset:0}
.plan .badge{position:absolute;inset-block-start:-.7rem;inset-inline-start:1.2rem;
  background:var(--amber);color:#2A1D00;font-family:var(--f-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:.25rem .6rem;border-radius:6px}
:root[lang^="he"] .plan .badge{font-family:var(--f-hebrew);letter-spacing:.02em;text-transform:none;font-size:.74rem}
.plan .name{font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
:root[lang^="he"] .plan .name{font-family:var(--f-hebrew);letter-spacing:.03em;text-transform:none;font-size:.85rem}
.plan .amt{font-family:var(--f-mono);font-size:2rem;font-weight:800;letter-spacing:-.035em;line-height:1}
.plan .amt small{font-size:.44em;font-weight:600;color:var(--ink-3);letter-spacing:0}
.plan .users{font-size:.86rem;color:var(--ink-3);font-weight:600}
.plan ul{list-style:none;margin:.35rem 0 0;padding:0;display:flex;flex-direction:column;gap:.42rem}
.plan li{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2);line-height:1.45}
.plan li svg{width:.95rem;height:.95rem;flex:none;margin-top:.25rem;stroke:var(--brand);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.biz-note{margin-top:1.25rem;font-size:.85rem;color:rgba(255,255,255,.7);line-height:1.6;max-width:62ch}
#business .fine summary{color:var(--amber)}
#business .ratelist{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
#business .ratelist .r{border-bottom-color:rgba(255,255,255,.16)}
#business .ratelist .r span{color:rgba(255,255,255,.8)}
#business .ratelist .r b{color:#fff}

/* ============ ambient motion ============
   Two devices only: soft drifting light in the hero, and travelling pulses
   along circuit traces — the same motif that flanks the wordmark in the logo. */
.ambient{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(58px);will-change:transform}
.orb-1{width:min(40vw,440px);aspect-ratio:1;background:var(--blue);opacity:.20;
  inset-block-start:-16%;inset-inline-start:-9%;animation:drift-a 19s ease-in-out infinite}
.orb-2{width:min(30vw,340px);aspect-ratio:1;background:var(--t6);opacity:.16;
  inset-block-start:30%;inset-inline-end:-7%;animation:drift-b 24s ease-in-out infinite}
.orb-3{width:min(22vw,250px);aspect-ratio:1;background:var(--amber);opacity:.16;
  inset-block-end:-6%;inset-inline-start:34%;animation:drift-c 28s ease-in-out infinite}
@keyframes drift-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,6%) scale(1.06)}}
@keyframes drift-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,-4%) scale(1.08)}}
@keyframes drift-c{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-5%) scale(.94)}}

.logo-hero{animation:bob 7.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.traces{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.traces .t{fill:none;stroke:#fff;stroke-width:1.5;stroke-opacity:.28}
.traces .n{fill:#fff;fill-opacity:.4}
.traces .p{fill:none;stroke:var(--amber);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:7 2400;filter:drop-shadow(0 0 5px var(--amber));animation:flow 7s linear infinite}
.traces .p2{animation-duration:9s;animation-delay:-3s;stroke:#7FD4FF;filter:drop-shadow(0 0 5px #7FD4FF)}
@keyframes flow{from{stroke-dashoffset:2407}to{stroke-dashoffset:0}}
#how .wrap{position:relative;z-index:1}

/* always-there call button */
.fab{
  position:fixed;z-index:75;inset-block-end:1.4rem;inset-inline-end:1.4rem;
  width:3.6rem;height:3.6rem;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;text-decoration:none;
  box-shadow:0 10px 28px -8px color-mix(in srgb,var(--brand) 75%,transparent), 0 2px 6px rgba(0,0,0,.18);
  transition:transform .2s ease, bottom .28s cubic-bezier(.2,.8,.3,1);
}
.fab:hover{transform:scale(1.07)}
.fab svg{width:1.75rem;height:1.75rem;position:relative;z-index:1}
.fab::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--brand);animation:ring 2.8s ease-out infinite;
}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.65);opacity:0}}
.floatbar[data-on="1"] ~ .fab{inset-block-end:5.5rem}
@media (max-width:560px){ .fab{width:3.2rem;height:3.2rem} .fab svg{width:1.55rem;height:1.55rem} }

@media (prefers-reduced-motion:reduce){
  .orb,.logo-hero,.traces .p,.fab::after{animation:none}
  .fab{transition:none}
}

/* ============ reveal ============ */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
.rv[data-in="1"]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} }

/* =============================================================================
   Components added by the static rebuild. Loaded after base.css.
   The original design language is kept; these rules cover the new semantic
   markup (real lists, real nav, breadcrumbs, footer, <details> FAQ).
   ========================================================================== */

/* `hidden` must beat any display rule we set below. */
[hidden] { display: none !important; }

/* Lists used as layout containers keep their semantics but lose their markers. */
.nav ul, .steps, .prices, .plans, .promises, .trustrow, .cat-items,
.rel-grid, .city-list, .contact-cards, .plan-f, .mini-prices,
.ftr-nav ul, .ftr-contact ul, .crumbs ol {
  list-style: none; margin: 0; padding: 0;
}

/* ---------- header ---------- */
/* nowrap by default — measured with the current (post size-increase) content
   at 1120px (the header's max width) and it fits with zero overflow. Wrap is
   only re-enabled below the hamburger breakpoint, where the opened nav needs
   to drop onto its own row; unconditional wrap here was letting a transient
   pre-font-load width (system-font fallback is wider than Assistant) force a
   real, user-visible wrap of the CTA button before the swap completed. */
.hdr-in { flex-wrap: nowrap; }
.nav ul { display: flex; gap: .15rem; flex-wrap: wrap; }
.nav a[aria-current="page"] { color: var(--brand); background: var(--brand-wash); }

.lang-switch {
  font-weight: 700; font-size: .85rem; text-decoration: none;
  padding: .42rem .7rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); color: var(--ink-2);
}
.lang-switch:hover { color: var(--ink); border-color: var(--ink-3); background: var(--surface); }

.nav-toggle {
  display: none; align-items: center; gap: .45rem;
  margin-inline-start: auto; padding: .5rem .8rem;
  font: inherit; font-weight: 700; font-size: .9rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer;
}
.nav-toggle svg { width: 1.15rem; height: 1.15rem; }

/* The header row is brand + menu + language + CTA. Below ~620px those four
   together exceed the viewport and push the whole page into horizontal scroll,
   so the logo shrinks and the menu button drops to icon-only. */
@media (max-width: 620px) {
  .hdr-in { gap: .45rem; }
  .hdr .logo { height: 38px; }
  .nav-toggle { padding: .5rem .58rem; }
  .nav-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hdr-cta { gap: .35rem; }
  .hdr-cta .btn { padding-inline: .8rem; font-size: .85rem; }
  .lang-switch { padding: .4rem .55rem; font-size: .8rem; }
}

/* Raised from 900px (originally to 1050px, then further to 1200px): the
   sitewide font-size increase made every header item render ~12.5% wider.
   1200px was measured empirically as the point where all six nav links and
   the CTA button genuinely share one row with zero wrapping — anything
   narrower left a dead zone where a single link would wrap on its own. */
@media (max-width: 1200px) {
  .hdr-in { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .nav { flex-basis: 100%; margin: 0; display: none; }
  .nav ul { flex-direction: column; gap: .1rem; padding-block: .5rem; }
  .nav a { display: block; padding: .6rem .7rem; }
  .hdr-in.open .nav { display: block; }
  .hdr-cta { margin-inline-start: auto; }
}

/* ---------- breadcrumbs ---------- */
.crumbs { background: var(--surface); border-bottom: 1px solid var(--line); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 0; font-size: .86rem; }
.crumbs li { color: var(--ink-3); }
.crumbs li + li::before { content: "›"; margin-inline-end: .4rem; color: var(--line-strong); }
:root[dir="rtl"] .crumbs li + li::before { content: "‹"; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- hero variants ---------- */
.hero-sm { padding-block: clamp(2rem, 4vw, 3.25rem); }
.hero-grid.one { grid-template-columns: 1fr; }
.hero-grid.one .hero-copy { max-width: 62ch; }
.trustrow li.chip { list-style: none; }

/* ---------- generic section helpers ---------- */
.wrap.narrow { width: min(100% - 2.2rem, 820px); }
.sec-head h2 { max-width: 24ch; }
.sec-foot { margin-top: clamp(1.25rem, 3vw, 2rem); font-weight: 600; }
.sec-foot.small { font-weight: 400; font-size: .9rem; color: var(--ink-3); max-width: 76ch; }
.sec-head .cat-note { margin-top: .35rem; }

/* ---------- steps ---------- */
.steps { counter-reset: step; }
.step h3 { margin-top: .1rem; }

/* ---------- headline prices ---------- */
.promo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem 1rem;
  margin-bottom: var(--gap);
}
.promo-tag {
  font-family: var(--f-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--amber); color: var(--amber-ink);
  padding: .3rem .6rem; border-radius: 999px;
}
.promo-txt { font-weight: 800; font-size: 1.06rem; }
.promo-amt { font-size: 1.5rem; font-weight: 900; color: var(--brand); }
.promo-was { color: var(--ink-3); font-size: .95rem; }

.price-card {
  padding: 1.5rem 1.35rem; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .5rem;
}
.price-card .amt { font-size: 1.9rem; font-weight: 900; line-height: 1.1; color: var(--brand); }
.price-card .amt .pre,
.price-card .amt .unit { font-size: .85rem; font-weight: 600; color: var(--ink-3); }
.price-card .amt .quoted { font-size: 1.05rem; color: var(--ink); }
.price-card .sub { color: var(--ink-2); font-size: .93rem; }

.mini-prices { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.5rem; }
.mini-prices li {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .8rem 1rem; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.mini-prices .unit { font-size: .8rem; color: var(--ink-3); font-weight: 600; margin-inline-start: .3rem; }
.wrap.narrow p + p { margin-top: .9rem; }

/* ---------- promises ---------- */
.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--gap); }
.promises li {
  padding: 1.45rem 1.35rem; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.promises h3 { margin-bottom: .5rem; }
.promises p { color: var(--ink-2); font-size: .95rem; }

/* ---------- catalogue ---------- */
.cat h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.cat-ico { width: 1.3rem; height: 1.3rem; flex: none; }
.cat-items { display: flex; flex-direction: column; gap: .3rem; }
.opt-t { flex: 1; }
.opt-p { flex: none; font-weight: 800; }
.qual { color: var(--ink-3); font-weight: 400; font-size: .85em; }

/* ---------- plans ---------- */
.plan {
  position: relative; padding: 1.6rem 1.4rem; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .6rem;
}
.plan.hot { border-color: var(--amber); box-shadow: var(--shadow); }
.plan-pop {
  position: absolute; inset-block-start: -.75rem; inset-inline-start: 1.2rem;
  background: var(--amber); color: var(--amber-ink);
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px;
}
.plan-u { color: var(--ink-3); font-size: .88rem; }
.plan .amt { font-size: 1.85rem; font-weight: 900; color: var(--brand); line-height: 1.1; }
.plan .amt .unit { font-size: .82rem; font-weight: 600; color: var(--ink-3); }
.plan-f { display: flex; flex-direction: column; gap: .4rem; margin: .4rem 0 1rem; }
.plan-f li { position: relative; padding-inline-start: 1.35rem; font-size: .92rem; color: var(--ink-2); }
.plan-f li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .52em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand);
}
.plan .btn { margin-top: auto; justify-content: center; }

/* ---------- check-up ---------- */
.checkup .credit {
  margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--r);
  background: var(--amber-wash); color: var(--amber-ink); font-weight: 600;
}
.checkup .btn { margin-top: 1.35rem; }

/* ---------- FAQ as <details> ---------- */
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 1rem 1.15rem; list-style: none;
  display: flex; align-items: center; gap: .7rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1.02rem; font-weight: 700; flex: 1; }
.faq summary::after {
  content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--ink-3); flex: none;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { background: var(--surface-2); }
.faq .faq-a { padding: 0 1.15rem 1.15rem; }
.faq .faq-a p { color: var(--ink-2); max-width: 72ch; }

/* ---------- contact ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.contact-cards li {
  padding: 1.45rem 1.35rem; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.cc-ico { width: 1.6rem; height: 1.6rem; color: var(--brand); margin-bottom: .6rem; }
.contact-cards h3 { margin-bottom: .3rem; }
.contact-cards h3 a { text-decoration: none; color: inherit; }
.contact-cards h3 a:hover { color: var(--brand); }
.contact-cards .big { font-size: 1.1rem; font-weight: 800; color: var(--brand); margin-bottom: .5rem; }
.contact-cards p { color: var(--ink-2); font-size: .92rem; }
.wa-line { margin-top: var(--gap); }

/* ---------- "choose your city, continue to order" ---------- */
.start-order .wrap { text-align: center; }
.start-order h2 { max-width: 26ch; margin-inline: auto; }
.start-order .lede { max-width: 50ch; margin-inline: auto; }
.start-order-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: .7rem; margin-top: 1.4rem;
}
.start-order-row .select-wrap { flex: 1 1 260px; max-width: 340px; text-align: start; }
.start-order-row select { height: 100%; }
.start-order-row .btn { flex: 0 0 auto; }
.start-order-row .btn svg { width: 1.05rem; height: 1.05rem; }
:root[dir="rtl"] .start-order-row .btn svg { transform: scaleX(-1); }
.start-order .field-note { margin-top: .8rem; }

/* ---------- quote form ---------- */
.quote-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--gap); align-items: start; }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }
.form-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-card .row { grid-template-columns: 1fr; } }
.form-card .field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; border: 0; padding: 0; }
.form-card label, .form-card legend { font-weight: 700; font-size: .9rem; }
.form-card .opt-note { font-weight: 400; color: var(--ink-3); }
.form-card input, .form-card textarea {
  font: inherit; font-size: .96rem; padding: .65rem .8rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); width: 100%;
}
.form-card input:focus-visible, .form-card textarea:focus-visible { border-color: var(--ring); }
.form-card textarea { resize: vertical; min-height: 7rem; }
.form-card .segs { display: flex; flex-wrap: wrap; gap: .4rem; }
.form-card .seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.form-card .seg label {
  display: inline-block; padding: .45rem .8rem; font-weight: 600; font-size: .88rem;
  border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
}
.form-card .seg input:checked + label { background: var(--brand); border-color: var(--brand); color: #fff; }
.form-card .seg input:focus-visible + label { outline: 2.5px solid var(--ring); outline-offset: 2px; }
.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.form-note { margin-top: 1rem; font-size: .87rem; color: var(--ink-3); }
.field.bad input, .field.bad textarea, .field.bad select { border-color: var(--warn); }
.err { color: var(--warn); font-size: .84rem; font-weight: 600; }
.field-note { font-size: .84rem; color: var(--ink-3); }

/* ---- styled <select>: same chrome as inputs, plus a custom chevron so the
   control itself matches the design system even though the OS-native popup
   list (which no browser lets you restyle) does not. ---- */
.select-wrap { position: relative; }
.select-wrap select {
  font: inherit; font-size: .96rem; padding: .65rem 2.4rem .65rem .8rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); width: 100%;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
:root[dir="rtl"] .select-wrap select { padding: .65rem .8rem .65rem 2.4rem; }
.select-wrap select:invalid { color: var(--ink-3); }
.select-wrap select:focus-visible { border-color: var(--ring); }
.select-wrap::after {
  content: ""; position: absolute; inset-inline-end: .95rem; top: 50%;
  width: .6rem; height: .6rem; pointer-events: none;
  border-inline-end: 2px solid var(--ink-3); border-block-end: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
}

/* ---- privacy consent gate ---- */
.consent-field { margin-bottom: 1.3rem; }
.consent-check { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; font-size: .9rem; color: var(--ink-2); font-weight: 400; }
.consent-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent-box {
  width: 1.05rem; height: 1.05rem; border-radius: 5px; flex: none; margin-top: .15rem;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; transition: all .12s ease;
}
.consent-box svg { width: .7rem; height: .7rem; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: all .12s ease; }
.consent-check input:checked + .consent-box { background: var(--brand); border-color: var(--brand); }
.consent-check input:checked + .consent-box svg { opacity: 1; transform: scale(1); }
.consent-check input:focus-visible + .consent-box { outline: 2.5px solid var(--ring); outline-offset: 2px; }
.consent-check a { color: var(--brand); }
.consent-field.bad .consent-box { border-color: var(--warn); }
.consent-field .err { margin-top: .4rem; margin-inline-start: 1.7rem; }

/* ---- honeypot: present for bots that fill every field, invisible and
   unreachable for real visitors (off-screen, not display:none, so screen
   readers that ignore that property still skip it via aria-hidden). ---- */
.hp-field { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- primary order CTA ---- */
.order-cta {
  margin-top: 1.4rem; padding: 1.35rem 1.25rem; border-radius: var(--r-lg);
  background: var(--brand-wash); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
  text-align: center;
}
.order-cta h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.order-cta p { color: var(--ink-2); font-size: .9rem; max-width: 46ch; margin-inline: auto; }
.btn-lg { margin-top: 1rem; font-size: 1.02rem; padding: .9rem 1.8rem; width: 100%; justify-content: center; }
.btn-lg[data-busy] { opacity: .75; pointer-events: none; }
.btn-lg[data-busy] .btn-label::after { content: "…"; }

.order-status { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--r); font-size: .9rem; text-align: start; }
.order-status[data-state="sent"] { background: var(--surface); border: 1px solid var(--brand); color: var(--ink); }
.order-status[data-state="error"] { background: var(--amber-wash); border: 1px solid var(--warn); color: var(--ink); }
.order-status b { display: block; margin-bottom: .25rem; }
.order-status .btn { margin-top: .7rem; }

.form-divider { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0; color: var(--ink-3); font-size: .8rem; font-weight: 600; }
.form-divider::before, .form-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---- travel line in the summary sidebar ---- */
.sum-travel { display: flex; justify-content: space-between; gap: .8rem; font-size: .9rem; padding-top: .6rem; margin-top: .6rem; border-top: 1px dashed var(--line); }
.sum-travel b { font-weight: 700; }

.sum-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.35rem 1.25rem;
  position: sticky; top: 6rem;
}
.sum-card h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.sum-card .n {
  background: var(--brand); color: #fff; border-radius: 999px;
  padding: .1rem .55rem; font-size: .8rem; font-weight: 800;
}
.sum-empty { color: var(--ink-3); font-size: .9rem; margin-bottom: .9rem; }
.sum-empty-cta { width: 100%; justify-content: center; text-align: center; font-size: .92rem; padding: .75rem 1.1rem; }
.sum-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.sum-body li { display: flex; justify-content: space-between; gap: .8rem; font-size: .9rem; }
.sum-total {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line);
  font-weight: 800;
}
.sum-foot, .sum-link { margin-top: .9rem; font-size: .84rem; color: var(--ink-3); }

/* ---------- service area ---------- */
.city-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.city-list li {
  /* Flat fill, no border — a tag, not a ghost button. Outlined pills read as
     clickable; a solid wash reads as a label. */
  padding: .4rem .85rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
  background: var(--brand-wash); color: var(--brand);
}

/* ---------- related ---------- */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.rel-card { padding: 1.25rem 1.2rem; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
.rel-card h3 { margin-bottom: .45rem; }
.rel-card h3 a { text-decoration: none; }
.rel-card h3 a:hover { text-decoration: underline; }
.rel-card p { color: var(--ink-2); font-size: .92rem; }

/* ---------- footer ---------- */
.ftr { background: var(--blue-deep); color: #fff; padding-block: clamp(2.5rem, 5vw, 4rem) 0; margin-top: 0; }
.ftr-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--gap); }
@media (max-width: 900px) { .ftr-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr-in { grid-template-columns: 1fr; } }
.ftr-brand .logo { height: 54px; background: #fff; padding: .4rem .6rem; border-radius: var(--r-sm); }
.ftr-brand p { margin-top: 1rem; color: rgba(255,255,255,.72); font-size: .92rem; max-width: 42ch; }
.ftr .ftr-h { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-family: var(--f-mono); color: var(--amber); margin-bottom: .9rem; }
.ftr-nav ul, .ftr-contact ul { display: flex; flex-direction: column; gap: .5rem; }
.ftr a { color: rgba(255,255,255,.86); text-decoration: none; font-size: .93rem; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr-contact li { display: flex; align-items: flex-start; gap: .55rem; color: rgba(255,255,255,.86); font-size: .93rem; }
.ftr-contact svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .18rem; color: var(--amber); }
.ftr-lang { margin-top: 1rem; }
.ftr-lang a { font-weight: 700; }
.ftr-base { border-top: 1px solid rgba(255,255,255,.14); margin-top: clamp(2rem, 4vw, 3rem); padding-block: 1.25rem; }
.ftr-base p { color: rgba(255,255,255,.6); font-size: .86rem; }
.ftr :focus-visible { outline-color: var(--amber); }

/* ---------- misc ---------- */
.hero-actions .btn svg { width: 1.1rem; height: 1.1rem; }
.toast {
  position: fixed; inset-block-end: 1.25rem; inset-inline-start: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: var(--ink); color: #fff; padding: .7rem 1.15rem;
  border-radius: 999px; font-size: .9rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 120;
}
.toast[data-on] { opacity: 1; transform: translateX(-50%); }

/* =============================================================================
   Legal pages, cookie consent and the accessibility menu.
   Loaded after components.css.
   ========================================================================== */

/* ---------- legal pages ---------- */
.hero-legal { padding-block: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem); }
.hero-legal h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); max-width: 20ch; }
.legal-updated { margin-top: .9rem; color: var(--ink-3); font-size: .9rem; font-family: var(--f-mono); }

.legal-grid { display: grid; grid-template-columns: 250px 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
/* Grid items default to min-width:auto, which lets the wide cookie table push
   past the viewport instead of scrolling inside its own wrapper. */
.legal-grid > * { min-width: 0; }
@media (max-width: 900px) { .legal-grid { grid-template-columns: 1fr; } }

.legal-toc { position: sticky; top: 6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.15rem 1.1rem; }
@media (max-width: 900px) { .legal-toc { position: static; } }
.legal-toc h2 { font-size: .74rem; font-family: var(--f-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .8rem; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: flex; flex-direction: column; gap: .3rem; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: block; font-size: .89rem; text-decoration: none; color: var(--ink-2); padding: .28rem .4rem; border-radius: var(--r-sm); line-height: 1.4; }
.legal-toc a::before { content: counter(toc) ". "; color: var(--ink-3); font-family: var(--f-mono); font-size: .82em; }
.legal-toc a:hover { background: var(--brand-wash); color: var(--brand); }

.legal-body { max-width: 74ch; }
.legal-sec { scroll-margin-top: 6.5rem; }
.legal-sec + .legal-sec { margin-top: clamp(2rem, 4vw, 3rem); }
.legal-sec h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); margin-bottom: .9rem; }
.legal-sec p { color: var(--ink-2); }
.legal-sec p + p, .legal-sec p + .legal-list, .legal-sec .legal-list + p { margin-top: .9rem; }
.legal-list { margin: 0; padding-inline-start: 1.3rem; display: flex; flex-direction: column; gap: .45rem; color: var(--ink-2); }
.legal-list li { padding-inline-start: .2rem; }
.legal-disclaimer { margin-top: clamp(2rem, 4vw, 3rem); padding: 1rem 1.15rem; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); font-size: .89rem; }

.legal-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.legal-table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .88rem; }
.legal-table th, .legal-table td { text-align: start; padding: .65rem .8rem; border: 1px solid var(--line); vertical-align: top; }
.legal-table thead th { background: var(--surface-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.legal-table tbody th { font-weight: 600; white-space: nowrap; }
.legal-table code { font-family: var(--f-mono); font-size: .92em; background: var(--brand-wash); padding: .12rem .35rem; border-radius: 4px; }

.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--brand-lift); }
.ftr-prefs { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.ftr .ftr-prefs .linkish { color: rgba(255,255,255,.86); font-size: .93rem; }
.ftr .ftr-prefs .linkish:hover { color: #fff; }

/* ---------- cookie consent ---------- */
.tk-consent {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 130;
  background: var(--surface); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -8px 32px -12px rgba(10,15,28,.22);
  transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.8,.3,1);
}
.tk-consent[data-on] { transform: none; }
.tk-consent-in {
  width: min(100% - 2.2rem, var(--wrap)); margin-inline: auto;
  padding: 1.1rem 0; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center;
}
.tk-consent-copy { flex: 1 1 26rem; }
.tk-consent-copy h2 { font-size: 1.02rem; margin-bottom: .35rem; }
.tk-consent-copy p { font-size: .89rem; color: var(--ink-2); max-width: 74ch; }
.tk-consent-btns { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
@media (max-width: 560px) { .tk-consent-btns .btn { flex: 1 1 auto; justify-content: center; } }

.tk-modal { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; opacity: 0; transition: opacity .22s; }
.tk-modal[data-on] { opacity: 1; }
.tk-modal-back { position: absolute; inset: 0; background: rgba(10,15,28,.55); }
.tk-modal-box {
  position: relative; width: min(100% - 2rem, 560px); max-height: 86vh; overflow: auto;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  transform: translateY(10px); transition: transform .22s;
}
.tk-modal[data-on] .tk-modal-box { transform: none; }
.tk-modal-hd { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.tk-modal-hd h2 { font-size: 1.1rem; flex: 1; }
.tk-x, .a11y-x { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--ink-3); cursor: pointer; padding: .1rem .35rem; border-radius: var(--r-sm); }
.tk-x:hover, .a11y-x:hover { color: var(--ink); background: var(--surface-2); }
.tk-modal-bd { padding: 1.1rem 1.25rem; }
.tk-modal-ft { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1.1rem 1.25rem; border-top: 1px solid var(--line); }
.tk-more { margin-top: 1rem; font-size: .88rem; }

.tk-row + .tk-row { margin-top: .9rem; }
.tk-sw { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; }
.tk-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.tk-sw-track { position: relative; flex: none; width: 2.5rem; height: 1.45rem; border-radius: 999px; background: var(--line-strong); transition: background .16s; margin-top: .12rem; }
.tk-sw-track::after { content: ""; position: absolute; top: .17rem; inset-inline-start: .17rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; transition: transform .16s; }
.tk-sw input:checked + .tk-sw-track { background: var(--brand); }
.tk-sw input:checked + .tk-sw-track::after { transform: translateX(1.05rem); }
:root[dir="rtl"] .tk-sw input:checked + .tk-sw-track::after { transform: translateX(-1.05rem); }
.tk-sw input:disabled + .tk-sw-track { background: var(--brand); opacity: .45; }
.tk-sw input:focus-visible + .tk-sw-track { outline: 2.5px solid var(--ring); outline-offset: 2px; }
.tk-sw-txt { display: flex; flex-direction: column; gap: .15rem; font-size: .89rem; }
.tk-sw-txt span { color: var(--ink-3); }
body.tk-locked { overflow: hidden; }

/* ---------- accessibility menu ---------- */
.a11y-btn {
  position: fixed; inset-block-end: 1.15rem; inset-inline-start: 1.15rem; z-index: 125;
  width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--blue); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-lg); transition: transform .16s;
}
.a11y-btn:hover { transform: scale(1.07); }
.a11y-btn svg { width: 1.7rem; height: 1.7rem; }

.a11y-panel {
  position: fixed; inset-block-end: 5.2rem; inset-inline-start: 1.15rem; z-index: 126;
  width: min(calc(100vw - 2.3rem), 340px); max-height: min(75vh, 620px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s;
}
.a11y-panel[data-on] { opacity: 1; transform: none; }
.a11y-hd { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.a11y-hd h2 { font-size: 1rem; flex: 1; }
.a11y-bd { padding: .9rem 1rem 1rem; }
.a11y-grp + .a11y-grp { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.a11y-lbl { display: block; font-size: .76rem; font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem; }
.a11y-step { display: flex; align-items: center; gap: .5rem; }
.a11y-step button { flex: none; width: 2.4rem; height: 2.2rem; font: inherit; font-weight: 800; font-size: .9rem; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; color: var(--ink); }
.a11y-step button:hover { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); }
.a11y-step output { flex: 1; text-align: center; font-family: var(--f-mono); font-size: .9rem; font-weight: 700; }
.a11y-seg { display: flex; flex-wrap: wrap; gap: .35rem; }
.a11y-seg button { font: inherit; font-size: .83rem; font-weight: 600; padding: .38rem .7rem; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; color: var(--ink-2); }
.a11y-seg button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.a11y-sw { display: flex; align-items: center; gap: .65rem; cursor: pointer; font-size: .9rem; padding: .3rem 0; }
.a11y-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.a11y-sw-t { position: relative; flex: none; width: 2.3rem; height: 1.35rem; border-radius: 999px; background: var(--line-strong); transition: background .16s; }
.a11y-sw-t::after { content: ""; position: absolute; top: .16rem; inset-inline-start: .16rem; width: 1.03rem; height: 1.03rem; border-radius: 50%; background: #fff; transition: transform .16s; }
.a11y-sw input:checked + .a11y-sw-t { background: var(--brand); }
.a11y-sw input:checked + .a11y-sw-t::after { transform: translateX(.95rem); }
:root[dir="rtl"] .a11y-sw input:checked + .a11y-sw-t::after { transform: translateX(-.95rem); }
.a11y-sw input:focus-visible + .a11y-sw-t { outline: 2.5px solid var(--ring); outline-offset: 2px; }
.a11y-ft { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.a11y-ft a { font-size: .86rem; }

.a11y-guide { position: fixed; inset-inline: 0; height: 2.6rem; z-index: 124; pointer-events: none; transform: translateY(-50%); background: rgba(15,107,224,.14); border-block: 2px solid var(--brand); }

/* ---------- the display modes ---------- */
:root { --a11y-scale: 1; }
:root[data-a11y-active] body { font-size: calc(clamp(1rem, .97rem + .18vw, 1.06rem) * var(--a11y-scale)); }
:root[data-a11y-active] h1 { font-size: calc(2.3rem * var(--a11y-scale)); }
:root[data-a11y-active] h2 { font-size: calc(1.7rem * var(--a11y-scale)); }
:root[data-a11y-active] h3 { font-size: calc(1.12rem * var(--a11y-scale)); }
:root[data-a11y-active] .lede { font-size: calc(1.08rem * var(--a11y-scale)); }

:root[data-a11y-contrast="grey"] body { filter: grayscale(1); }
:root[data-a11y-contrast="high"] {
  --ink: #000; --ink-2: #111; --ink-3: #222;
  --paper: #fff; --surface: #fff; --surface-2: #fff;
  --line: #000; --line-strong: #000;
  --brand: #0033CC; --brand-lift: #0033CC; --brand-wash: #E6EDFF; --brand-wash-2: #E6EDFF;
}
:root[data-a11y-contrast="high"] body { background: #fff; }
:root[data-a11y-contrast="high"] .sec-alt,
:root[data-a11y-contrast="high"] .hero { background: #fff; }
:root[data-a11y-contrast="high"] .ambient,
:root[data-a11y-contrast="high"] .traces,
:root[data-a11y-contrast="high"] .strip { display: none; }
:root[data-a11y-contrast="high"] .ftr { background: #000; }
:root[data-a11y-contrast="high"] .step,
:root[data-a11y-contrast="high"] .price-card,
:root[data-a11y-contrast="high"] .plan,
:root[data-a11y-contrast="high"] .cat,
:root[data-a11y-contrast="high"] .promises li,
:root[data-a11y-contrast="high"] .rel-card { border: 2px solid #000; }
:root[data-a11y-contrast="high"] a { color: #0033CC; text-decoration: underline; }

/* #how is an ID selector in the base sheet, so it needs matching specificity
   to be flattened here. Same for the two floating buttons, whose own white
   would otherwise lose to the high-contrast link colour and vanish. */
:root[data-a11y-contrast="high"] #how {
  background: #fff; color: #000; border-block: 2px solid #000;
}
:root[data-a11y-contrast="high"] #how h2,
:root[data-a11y-contrast="high"] #how h3,
:root[data-a11y-contrast="high"] #how .lede,
:root[data-a11y-contrast="high"] #how p { color: #000; }
:root[data-a11y-contrast="high"] #how .eyebrow { color: #0033CC; }
:root[data-a11y-contrast="high"] #how .step { border: 2px solid #000; box-shadow: none; }

:root[data-a11y-contrast="high"] a.fab,
:root[data-a11y-contrast="high"] a.fab:hover { background: #000; color: #fff; }
:root[data-a11y-contrast="high"] .fab::after { border-color: #000; }
:root[data-a11y-contrast="high"] .a11y-btn { background: #000; color: #fff; }
:root[data-a11y-contrast="high"] .ftr a { color: #fff; }
:root[data-a11y-contrast="high"] .ftr .ftr-h { color: #FFD84D; }

/* The highlight must not swallow the floating buttons either. */
:root[data-a11y-links] a.fab { background: var(--brand); color: #fff; box-shadow: none; }

:root[data-a11y-links] a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
:root[data-a11y-links] a:not(.btn):not(.brand):not(.fab) { background: #FFF3B0; color: #1A1200; box-shadow: 0 0 0 2px #FFF3B0; border-radius: 2px; }

:root[data-a11y-font] body { font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif; }
:root[data-a11y-font] body * { font-family: inherit; letter-spacing: normal; }

:root[data-a11y-spacing] body { line-height: 2; letter-spacing: .045em; word-spacing: .13em; }
:root[data-a11y-spacing] p, :root[data-a11y-spacing] li { margin-bottom: .55rem; }

:root[data-a11y-motion] *, :root[data-a11y-motion] *::before, :root[data-a11y-motion] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
:root[data-a11y-cursor] body, :root[data-a11y-cursor] body * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6.2 1.4L15 20l-3 1-2.4-7.2L5 18z' fill='%23000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto;
}