/* Hallmark · shape: kept · genre: modern-minimal · theme: brand · redesign: restyle · copy: verbatim
 * paper: #050506 dark room, #f5f5f7 daylight · accent: #0071e3 on light, #2997ff on dark · display: Inter Tight · body: Inter Tight (Assistant for Hebrew) · hero: kept · nav: kept · footer: kept · signature: kept (the 3D door), the Radiant-opening lockup in the header
 * axes: dark-room+daylight/neutral-grotesque/blue-accent · posture: restrained · contrast: pass · fold: kept (layout gates are notes at restyle) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, the layout is the owner's and stays; variety is a full-depth question */
/* Hallmark · waive 29 · backdrop-filter on the .into-light panels over a >= 86% white ground · Liquid Glass is the brand (iOS 26 line), and text contrast never depends on what is behind */
/* Hallmark · answered F19 · weights 400/600/700 kept from the owner's hierarchy */
@import url("./tokens.css");
/* Wide Open Digital: preview v5 (v4 + one persistent 3D scene behind the whole page) (v3 base + inner pages, objects, menu, forms). Greyscale system with one accent (blue, on primary buttons, links and the widget only; no red), two surfaces:
   a dark room for the hero (the 3D door), then daylight for the reading sections. */
/* Type (self-hosted, SIL OFL 1.1): Inter Tight for Latin display and text, Assistant for Hebrew (Hallmark restyle). */
@font-face { font-family: "Inter Tight"; src: url(../fonts/inter-tight-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Assistant"; src: url(../fonts/assistant-hebrew-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; src: url(../fonts/assistant-latin-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-display: swap; 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; }

:root {
  /* dark room / daylight / accent: values live in tokens.css (brand) */
  --accent: var(--accent-link);
  --font: var(--font-body);
  --display: var(--font-display);
  --measure: 46rem; --wide: 1200px; --gutter: clamp(20px, 5vw, 48px);
  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: clamp(5rem, 10vw, 8.5rem);
}
:lang(he) { --font: var(--font-he-body); --display: var(--font-he-display); }
[lang="en"] { font-family: var(--font-body); }
:is(h1,h2,h3)[lang="en"], :is(h1,h2,h3) [lang="en"] { font-family: var(--font-display); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--space-2xl); scrollbar-color: var(--grey-48) var(--night); background: var(--night); }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.5; color: var(--on-night); background: var(--night);
  -webkit-font-smoothing: antialiased; font-optical-sizing: auto; caret-color: var(--accent-night); }
:lang(he) body, body:lang(he) { font-size: 1.125rem; }
::selection { background: color-mix(in srgb, var(--accent-night) 32%, transparent); color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--accent-night); text-decoration-thickness: .06em; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: .1em; }
:focus-visible { outline: 2px solid var(--accent-night); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; font-family: var(--display); font-optical-sizing: auto; }
/* small UI headings stay in the body sans for legibility */
.footer-grid h2, .error-summary h2, .steps h3, .addon-card h3, .promise-card h3, .guarantee h3, .wa-panel h2, .wa-panel h3 { font-family: var(--font); }
:lang(he) h1, :lang(he) h2, :lang(he) h3 { font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.container { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }

.skip-link { position: absolute; inset-inline-start: 12px; top: 12px; transform: translateY(calc(-100% - 24px)); z-index: 50; padding: var(--space-xs) var(--space-md); border-radius: 10px; background: var(--on-night); color: var(--night); font-weight: 600; }
.skip-link:focus { transform: none; }

/* 3D layer */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.stage.is-ready { opacity: 1; }
.stage canvas { width: 100%; height: 100%; }
.stage.is-static { position: absolute; transition: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--night) 18%, var(--night) 82%, transparent), linear-gradient(to right, transparent, var(--night) 14%, var(--night) 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, var(--night) 18%, var(--night) 82%, transparent), linear-gradient(to right, transparent, var(--night) 14%, var(--night) 86%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
main, .site-footer { position: relative; z-index: 1; }

/* header: a quiet, solid bar */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--night); border-bottom: 1px solid color-mix(in srgb, var(--white) 8%, transparent); }
.header-inner { height: 52px; display: flex; align-items: center; gap: var(--s-3); }
.brand { display: inline-flex; min-height: 44px; min-width: 0; align-items: center; gap: var(--space-xs); color: var(--on-night); text-decoration: none; font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; }
.brand-mark { color: var(--on-night); }
.main-nav { margin-inline-start: auto; }
.main-nav ul { display: flex; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.main-nav a, .lang-switch { color: var(--on-night-2); text-decoration: none; font-size: .8125rem; }
.main-nav a:hover, .lang-switch:hover { color: var(--on-night); }
.header-actions { display: flex; align-items: center; gap: var(--s-3); }

/* buttons: one filled accent pill, everything else is a link */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-xs) var(--space-lg); border-radius: 980px;
  background: var(--accent-fill); color: var(--white); font-weight: 500; font-size: 1.0625rem; text-decoration: none; transition: background-color .2s; }
.btn:hover { background: var(--accent-fill-hover); }
.btn-small { min-height: 32px; padding: var(--space-2xs) var(--space-md); font-size: .8125rem; }
.link-more span { margin-inline-start: .3em; }
.link-more { font-size: 1.0625rem; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.link-more:hover { text-decoration: underline; }

/* hero */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; text-align: center; padding-top: clamp(3.5rem, 9vh, 6.5rem); }
.hero h1 { font-size: clamp(2.5rem, 1.1rem + 4.3vw, 4.75rem); line-height: 1.04; letter-spacing: -.032em; margin-inline: auto; max-width: 15ch; }
.hero .lede { margin: var(--s-3) auto 0; max-width: 34rem; font-size: clamp(1.1875rem, 1rem + .5vw, 1.4375rem); line-height: 1.38; color: var(--rule); letter-spacing: -.005em; }
.cta-row { margin-top: var(--s-4); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xs) var(--s-4); }
.hero-points { list-style: none; padding: 0; margin: var(--s-3) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) 0; color: var(--rule); font-size: .875rem; }
.hero-points li + li::before { content: "·"; padding-inline: .7em; color: var(--on-night-2); }
.door-slot { flex: 1 1 auto; min-height: 44svh; }
:lang(he) .hero h1 { letter-spacing: 0; line-height: 1.08; font-weight: 600; }

/* the threshold: the room fades into daylight as you scroll through the door */
.threshold { height: 70svh; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--white) 55%, transparent) 60%, var(--day)); }

/* daylight sections */
.into-light { background: var(--day); color: var(--ink); caret-color: var(--accent); }
.into-light a { color: var(--accent); }
.into-light a.btn, a.btn { color: var(--white); }
.into-light :focus-visible { outline-color: var(--accent); }
.into-light ::selection { background: color-mix(in srgb, var(--accent-link) 18%, transparent); }
.section { padding-block: var(--s-6); }
.section-alt { background: var(--day-2); }
.section h2 { font-size: clamp(2rem, 1.2rem + 2.7vw, 3.5rem); line-height: 1.07; letter-spacing: -.028em; max-width: 22ch; }
.section h2 .ib { display: inline-block; }
:lang(he) .section h2 { letter-spacing: 0; font-weight: 600; line-height: 1.12; }
.section-lede { margin-top: var(--s-3); max-width: var(--measure); font-size: 1.1875rem; line-height: 1.5; color: var(--ink-2); }
.fact { margin-top: var(--s-5); max-width: 28ch; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem); line-height: 1.3; font-weight: 500; letter-spacing: -.018em; }
:lang(he) .fact { letter-spacing: 0; max-width: 30ch; }
.fact-src { display: block; margin-top: var(--space-sm); font-size: .875rem; font-weight: 400; letter-spacing: 0; }
.list-title { margin-top: var(--s-6); padding-bottom: var(--s-2); font-size: 1.0625rem; color: var(--ink-2); font-weight: 500; }
.who { margin: 0; border-top: 1px solid var(--rule); }
.who-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s-2) var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
.who dt { font-weight: 600; font-size: 1.1875rem; letter-spacing: -.01em; }
.who dd { margin: 0; color: var(--ink-2); max-width: 36rem; }

.compare { margin-top: var(--s-5); width: 100%; border-collapse: collapse; text-align: start; }
.compare th, .compare td { padding: var(--s-3) var(--s-2) var(--s-3) 0; vertical-align: top; text-align: start; border-bottom: 1px solid var(--rule); }
:dir(rtl) .compare th, :dir(rtl) .compare td { padding: var(--s-3) 0 var(--s-3) var(--s-2); }
.compare thead th { font-size: 1.1875rem; font-weight: 600; color: var(--ink-2); border-bottom-color: var(--ink); }
.compare thead th.ours { color: var(--ink); }
.compare thead td { border-bottom-color: var(--ink); }
.compare tbody th { width: 26%; font-weight: 600; }
.compare tbody td { width: 37%; color: var(--ink-2); }
.compare tbody td:last-child { color: var(--ink); }
.note { margin-top: var(--s-5); max-width: var(--measure); font-size: .9375rem; color: var(--ink-2); }
.preview-end { padding-block: var(--s-5); border-top: 1px solid var(--rule); }
.preview-note { font-size: .9375rem; color: var(--ink-2); }

.site-footer { background: var(--day-2); color: var(--ink-2); font-size: .8125rem; padding-block: var(--s-3); border-top: 1px solid var(--rule); }
.site-footer a { color: var(--ink-2); }
.site-footer :focus-visible { outline-color: var(--accent); }

/* mobile: same composition, tightened */

@media (max-width: 600px) {
  .hero { padding-top: 2.75rem; }
  .cta-row { gap: var(--space-2xs) var(--s-3); }
  .hero-points { flex-direction: column; gap: .2rem; }
  .hero-points li + li::before { content: none; }
  .door-slot { min-height: 40svh; }
  .who-row { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto !important; }
  .compare tr { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
  .compare th, .compare td, :dir(rtl) .compare th, :dir(rtl) .compare td { border: 0; padding: 0; }
  .compare tbody th { font-size: 1.1875rem; margin-bottom: var(--space-xs); }
  .compare td { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s-2); padding-block: var(--space-2xs); }
  .compare td::before { content: attr(data-label); font-size: .875rem; font-weight: 600; color: var(--ink-2); }
}
@media (forced-colors: active) { .stage { display: none; } .threshold { background: none; } .btn { border: 1px solid ButtonText; } }
@media (prefers-reduced-motion: reduce) { .stage { transition: none; } }

/* ================= v4 ================= */
/* header: nav + language + CTA; on narrow screens the nav becomes a disclosure panel */
.main-nav a[aria-current="page"] { color: var(--on-night); }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.lang-switch { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-2xs); }
.nav-toggle { display: none; min-height: 44px; min-width: 44px; padding: 0 var(--space-sm); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--white) 22%, transparent); background: transparent; color: var(--on-night); font: inherit; font-size: .875rem; cursor: pointer; align-items: center; gap: var(--space-xs); }
.nav-toggle:hover { background: color-mix(in srgb, var(--white) 8%, transparent); }
@media (max-width: 1020px) {
  .header-inner { flex-wrap: wrap; height: auto; min-height: 56px; column-gap: var(--s-2); }
  .nav-toggle { display: inline-flex; order: 3; }
  .header-actions { margin-inline-start: auto; order: 2; gap: var(--s-2); }
  .main-nav { order: 4; flex-basis: 100%; margin: 0; }
  .main-nav:not(.is-open) { display: none; }
  .main-nav ul { flex-direction: column; gap: 0; padding-block: var(--space-2xs) var(--space-sm); }
  .main-nav a { font-size: 1.0625rem; width: 100%; border-top: 1px solid color-mix(in srgb, var(--white) 8%, transparent); }
}
@media (max-width: 420px) { .header-actions .btn-small { display: none; } }

/* inner pages: a short dark band instead of the 3D room */
.page-hero { padding-block: clamp(var(--space-2xl), 8vw, var(--space-3xl)) clamp(var(--space-xl), 6vw, var(--space-2xl)); }
.page-hero h1 { font-size: clamp(2.375rem, 1.3rem + 3.4vw, 4.25rem); line-height: 1.05; letter-spacing: -.03em; max-width: 18ch; }
:lang(he) .page-hero h1 { letter-spacing: 0; font-weight: 600; line-height: 1.1; }
.page-hero .lede { margin-top: var(--s-3); max-width: 40rem; font-size: clamp(1.1875rem, 1rem + .5vw, 1.4375rem); line-height: 1.42; color: var(--on-night-2); }
.page-hero .meta { margin-top: var(--s-3); color: var(--on-night-2); font-size: .9375rem; }

/* light sections: two columns on desktop (copy + one object) */
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-5) clamp(var(--space-xl), 6vw, var(--space-3xl)); align-items: center; }
.split.flip > .model-slot { order: -1; }
.split > .copy { min-width: 0; }
.split.top { align-items: start; }
.split.top > .model-slot { position: sticky; top: 96px; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .split.flip > .model-slot { order: 0; }
  .split > .model-slot { order: -1; width: min(100%, 360px); margin-inline: auto; }
  .split.top > .model-slot { position: relative; top: auto; }   /* not static: the still image is absolutely positioned inside */
}

/* the objects: Cycles still first, live WebGL fades in over it when motion is allowed */
.model-slot { position: relative; margin: 0; aspect-ratio: 1; width: 100%; max-width: 540px; justify-self: center; }
.model-slot > img, .model-slot > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.model-slot > canvas { opacity: 0; transition: opacity .6s ease; }
.model-slot.is-live > canvas { opacity: 1; }
.model-slot.is-live > img { opacity: 0; transition: opacity .6s ease .1s; }

/* home: short blocks with a "learn more" */
.section h2 + .section-lede, .copy > .section-lede { margin-top: var(--s-3); }
.more { margin-top: var(--s-3); }
.points { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); max-width: var(--measure); }
.points li { padding-inline-start: var(--space-lg); position: relative; color: var(--ink); }
.points li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent-fill); }
.points li strong { font-weight: 600; }
.pair { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); max-width: 52rem; }
.pair h3 { font-size: 1.3125rem; letter-spacing: -.012em; }
:lang(he) .pair h3 { letter-spacing: 0; font-weight: 600; }
.pair p { margin-top: var(--space-xs); color: var(--ink-2); }
@media (max-width: 700px) { .pair { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }
.steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); counter-reset: step; }
.steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: var(--s-2); }
.steps li::before { content: counter(step); display: block; font-size: .9375rem; font-weight: 600; color: var(--ink-2); margin-bottom: .4rem; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 1.3125rem; letter-spacing: -.012em; }
:lang(he) .steps h3 { letter-spacing: 0; font-weight: 600; }
.steps p { margin-top: var(--space-xs); color: var(--ink-2); }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }
.cta-band { text-align: center; }
.cta-band h2 { margin-inline: auto; }
.cta-band .section-lede { margin-inline: auto; }
.cta-band .cta-row { margin-top: var(--s-4); }
.small-print { margin-top: var(--s-3); font-size: .9375rem; color: var(--ink-2); max-width: var(--measure); }

/* long-form reading pages */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.12; letter-spacing: -.022em; margin-top: 0; max-width: 26ch; }
:lang(he) .prose h2 { letter-spacing: 0; font-weight: 600; line-height: 1.18; }
.prose h3 { font-size: 1.3125rem; line-height: 1.3; letter-spacing: -.01em; margin-top: 1.9em; }
:lang(he) .prose h3 { letter-spacing: 0; font-weight: 600; }
.prose p, .prose li { line-height: 1.62; }
.prose ul, .prose ol { padding-inline-start: var(--space-lg); }
.prose li + li { margin-top: .45em; }
.prose .lead { font-size: 1.1875rem; color: var(--ink-2); }
.src { font-size: .875rem; color: var(--ink-2); }
.src a { color: var(--accent); }
.callout { padding: .2rem 0; color: var(--ink); }
:dir(rtl) .callout { padding: .2rem var(--s-3) .2rem 0; }
.page-sections > .section + .section { border-top: 1px solid var(--rule); }
.page-sections > .section-alt + .section, .page-sections > .section + .section-alt { border-top: 0; }
.facts { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s-4); border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.facts p { font-size: 1.0625rem; }
.facts strong { display: block; font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.375rem); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; margin-bottom: .35rem; }
:lang(he) .facts strong { letter-spacing: 0; font-weight: 700; }
.options { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.options > div { padding: var(--s-3) var(--s-3) var(--s-3) 0; }
.options > div + div { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s-3); }
:dir(rtl) .options > div { padding: var(--s-3) 0 var(--s-3) var(--s-3); }
:dir(rtl) .options > div + div { padding-inline-start: var(--s-3); }
.options h3 { margin-top: 0; }
.options ul { margin-top: var(--space-sm); }
@media (max-width: 760px) { .options { grid-template-columns: minmax(0, 1fr); } .options > div + div { border-inline-start: 0; border-top: 1px solid var(--rule); padding-inline-start: 0; } :dir(rtl) .options > div + div { padding-inline-start: 0; } }
.flow { list-style: none; padding: 0 !important; margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.flow li { margin: 0 !important; padding: .35rem var(--space-sm); border: 1px solid var(--rule); border-radius: 980px; font-size: .9375rem; background: var(--card); }
.flow li + li::before { content: none; }

/* FAQ: native disclosure, grouped */
.faq-group + .faq-group { margin-top: var(--s-5); }
.faq-group > h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; margin-bottom: var(--s-2); }
:lang(he) .faq-group > h2 { letter-spacing: 0; font-weight: 600; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 56px; padding-block: var(--space-sm); font-weight: 600; font-size: 1.125rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .6rem; height: .6rem; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-inline-end: var(--space-2xs); transition: transform .2s; }
.faq details[open] > summary::after { transform: rotate(-135deg); }
.faq .answer { padding-bottom: var(--s-3); max-width: var(--measure); color: var(--ink); }
.faq .answer > * + * { margin-top: .8em; }
.faq .answer p, .faq .answer li { line-height: 1.6; }
.faq .answer ul { padding-inline-start: var(--space-lg); }

/* forms */
.form { max-width: 40rem; display: grid; gap: var(--s-3); }
.field { display: grid; gap: .35rem; }
.field label, .field .label { font-weight: 600; }
.req { font-weight: 400; color: var(--ink-2); }
.hint { font-size: .9375rem; color: var(--ink-2); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="tel"], .field textarea {
  font: inherit; font-size: 1.0625rem; color: var(--ink); background: var(--card); border: 1px solid var(--grey-86); border-radius: 10px; padding: var(--space-sm) var(--space-sm); min-height: 48px; width: 100%; }
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--ink); border-width: 2px; }
.error-msg { color: var(--ink); font-weight: 600; font-size: .9375rem; display: flex; gap: .4rem; align-items: baseline; }
.error-msg[hidden] { display: none !important; }
.error-msg::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ink); color: var(--white); font-size: .75rem; font-weight: 700; }
.check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs); align-items: start; }
.check input { width: 24px; height: 24px; margin: .1rem 0 0; accent-color: var(--accent-fill); }
.check label { font-weight: 400; }
.error-summary { border: 2px solid var(--ink); border-radius: 12px; padding: var(--s-2) var(--s-3); }
.error-summary h2 { font-size: 1.125rem; letter-spacing: 0; }
.error-summary ul { margin: var(--space-xs) 0 0; padding-inline-start: var(--space-md); }
.form-status { border-radius: 12px; padding: var(--s-2) var(--s-3); background: var(--card); border: 1px solid var(--rule); }
.form-status:empty { display: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
button.btn { border: 0; font: inherit; font-size: 1.0625rem; font-weight: 500; cursor: pointer; }
.contact-ways { list-style: none; padding: 0 !important; display: grid; gap: var(--space-xs); }
.contact-ways li { margin: 0 !important; }
.scan-form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: end; max-width: 44rem; }
.scan-form .field { flex: 1 1 18rem; }
.sample { margin-top: var(--s-4); border: 1px solid var(--rule); border-radius: 18px; padding: var(--s-3); max-width: 44rem; background: var(--card); }
.sample-tag { display: inline-block; font-size: .8125rem; font-weight: 600; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 980px; padding: var(--space-3xs) var(--space-xs); }
.sample-count { margin-top: var(--s-2); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sample dl { margin: var(--s-3) 0 0; display: grid; grid-template-columns: 1fr auto; gap: var(--space-xs) var(--s-3); }
.sample dt { color: var(--ink-2); }
.sample dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* footer: full navigation */
.site-footer { padding-block: var(--s-5) var(--s-3); font-size: .9375rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s-4); }
.footer-grid h2 { font-size: .9375rem; font-weight: 600; color: var(--ink); letter-spacing: 0; margin-bottom: .4rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li a { display: inline-flex; align-items: center; min-height: 32px; }
.footer-grid p + p { margin-top: .4rem; }
.footer-base { margin-top: var(--s-4); padding-top: var(--s-2); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .4rem var(--s-3); justify-content: space-between; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid > :first-child { grid-column: 1 / -1; } }


@media (prefers-reduced-motion: reduce) { .model-slot > canvas, .model-slot > img { transition: none; } .faq summary::after { transition: none; } }
@media (forced-colors: active) {
  .model-slot { display: none; }
  
  .steps li, .options { border-color: CanvasText; }
  .points li::before { background: CanvasText; }
}
@media print { .stage, .wa-host, .model-slot, .threshold { display: none !important; } .into-light, .site-footer { background: var(--white); } }
.cta-row.cta-start { justify-content: flex-start; }


/* ---------- v4 detail-page components ---------- */
.options > section { padding: var(--s-3) var(--s-3) var(--s-3) 0; }
.options > section + section { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s-3); }
.options > section h3 { margin-top: 0; }
.opt-sum { font-weight: 600; color: var(--ink-2); margin-top: var(--space-2xs); }
@media (max-width: 760px) { .options > section { padding-inline-end: 0; } .options > section + section { border-inline-start: 0; border-top: 1px solid var(--rule); padding-inline-start: 0; } }
.drivers { margin: var(--s-3) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s-3) var(--s-4); }
.drivers > div { border-top: 1px solid var(--rule); padding-top: var(--s-2); }
.drivers dt { font-weight: 600; font-size: 1.0625rem; }
.drivers dd { margin: .35rem 0 0; color: var(--ink-2); line-height: 1.55; }
.prose .drivers { max-width: none; }
.addon-card { border: 1px solid var(--rule); border-radius: 18px; padding: var(--s-3); background: var(--card); max-width: 40rem; }
.section-alt .addon-card { background: var(--card); }
.addon-card h3 { margin-top: 0; }
.addon-prices { list-style: none; padding: 0 !important; margin: var(--s-2) 0 0; display: grid; gap: var(--space-xs); }
.addon-prices li { font-size: 1.1875rem; font-variant-numeric: tabular-nums; }
.addon-prices li + li { margin-top: 0 !important; }
.addon-alt { margin-top: var(--s-2); font-size: .9375rem; color: var(--ink-2); }
.contact-list { list-style: none; padding: 0 !important; display: grid; gap: .4rem; }
.contact-list li + li { margin-top: 0 !important; }
.facts-list .src { display: block; margin-top: var(--space-2xs); }
.quote-form { display: grid; gap: var(--s-3); max-width: 40rem; margin-top: var(--s-3); }
.form-note { font-size: .9375rem; color: var(--ink-2); }
.sample figcaption { font-size: .9375rem; color: var(--ink-2); }
.sample-body { margin-top: var(--s-2); }
.sample-site { font-weight: 600; overflow-wrap: anywhere; }
.sample-count strong { font-weight: 600; }
.sample-count { font-size: 1.0625rem; letter-spacing: 0; font-weight: 400; line-height: 1.3; }
.sample-count strong { display: block; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
@media (forced-colors: active) { .addon-card, .drivers > div, .options > section { border-color: CanvasText; } }

/* ---- positioning (Steering 7) ---- */
.hero .tagline { margin: var(--s-2) auto 0; font-size: clamp(1.125rem, .95rem + .7vw, 1.5rem); font-weight: 600; letter-spacing: -.01em; color: var(--on-night); max-width: 34ch; }
.fix-list { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--s-3); max-width: var(--measure); }
.fix-list li { position: relative; padding-inline-start: var(--space-lg); }
.fix-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent-fill); }
@media (max-width: 560px) { .fix-list { grid-template-columns: minmax(0, 1fr); } }
.promise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.promise-card { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: var(--s-3); }
.section:not(.section-alt) .promise-card { background: var(--card-2); border-color: var(--rule); }
.promise-card h3 { font-size: 1.3125rem; letter-spacing: -.012em; }
.promise-card p { margin-top: var(--space-xs); }
.promise-card .small-print { margin-top: var(--s-2); }
.promise-wide { grid-column: 1 / -1; }
.guarantee-text { font-size: 1.1875rem; font-weight: 600; line-height: 1.45; max-width: 52rem; }
.guarantee-other { color: var(--ink-2); }
.guarantee-scope-h { margin-top: var(--s-2); }
.guarantee-scope { margin: .4rem 0 0; padding-inline-start: var(--space-md); max-width: 52rem; }
.guarantee-scope li + li { margin-top: var(--space-2xs); }
.answer .guarantee, .prose .guarantee { padding-inline-start: 0; }
@media (max-width: 760px) { .promise { grid-template-columns: minmax(0, 1fr); } .promise-wide { grid-column: auto; } }
@media (forced-colors: active) { .promise-card { border: 1px solid CanvasText; } .fix-list li::before { background: CanvasText; } }
/* long words (email addresses) must wrap at large text sizes */
body { overflow-wrap: break-word; }
a[href^="mailto:"], .contact-list li, .contact-list a { overflow-wrap: anywhere; min-width: 0; }
.fix-intro { margin-top: var(--s-3); font-weight: 600; }
.scan-price { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; margin: 0 0 var(--s-2); font-size: 1.125rem; }
.scan-price strong { font-variant-numeric: tabular-nums; font-size: 2rem; letter-spacing: -.02em; }
.email-free { margin-top: var(--s-2); }
/* ================= v5: one persistent 3D scene behind the whole page ================= */
/* The canvas (.stage) is fixed behind everything on every page. While the scene is live (html.scene-live, set by
   scene3d.js) the light sections are see-through: the bright room continues behind them, and the copy sits on calm
   frosted panels so text contrast never depends on the moving picture. "Stop animations" (menu) or reduced motion:
   no scene-live, opaque var(--day) sections, still images. */
.stage.is-off { display: none; }
.page-hero { position: relative; background: var(--night); }
.into-light { transition: background-color .6s ease; }
html.scene-live { --ink-2: var(--grey-5c); }
html.scene-live .threshold { height: 100svh; background: none; }
html.scene-live .into-light, html.scene-live .into-light .section-alt { background: transparent; }
:root .into-light .section { padding-block: clamp(2rem, 5vw, var(--space-2xl)); }
:root .into-light .split > .copy,
:root .into-light .section > .container:not(:has(.split)) {
  background: color-mix(in srgb, var(--day) 94%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.15); backdrop-filter: blur(24px) saturate(1.15);
  border-radius: 28px; padding: clamp(var(--space-lg), 3.5vw, var(--space-xl));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 70%, transparent), 0 24px 60px -36px color-mix(in srgb, var(--night) 22%, transparent); }
html.scene-live .page-sections > .section + .section { border-top: 0; }
:root .site-footer { background: color-mix(in srgb, var(--day) 94%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
@media (prefers-reduced-transparency: reduce) {
  :root .into-light .split > .copy, :root .into-light .section > .container:not(:has(.split)), :root .site-footer { background: var(--day); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) { :root .into-light .split > .copy, :root .into-light .section > .container:not(:has(.split)) { border: 1px solid CanvasText; } }
@media print { :root .into-light .split > .copy, :root .into-light .section > .container { background: var(--white); box-shadow: none; backdrop-filter: none; } }


/* ================= v6: the apple.com editorial line ================= */
/* One sans family per script; hierarchy by size, weight and tracking. Blue only for links and the primary button.
   No decorative coloured borders or rules; surfaces separated by tone and space, not outlines. */
h1, h2, h3 { font-family: var(--font); font-weight: 600; font-optical-sizing: auto; }
.hero h1 { font-size: clamp(2.75rem, 1.2rem + 5vw, 5rem); line-height: 1.05; letter-spacing: -.025em; font-weight: 700; }
.page-hero h1 { font-size: clamp(2.5rem, 1.3rem + 3.8vw, 4.5rem); line-height: 1.06; letter-spacing: -.024em; font-weight: 700; }
.section h2 { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem); line-height: 1.08; letter-spacing: -.022em; }
.prose h2 { font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.625rem); line-height: 1.1; letter-spacing: -.02em; }
.faq-group > h2 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); letter-spacing: -.018em; }
.prose h3, .pair h3, .steps h3, .promise-card h3, .addon-card h3, .options h3 { font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem); line-height: 1.25; letter-spacing: -.012em; font-weight: 600; }
.hero .tagline { font-weight: 600; letter-spacing: -.012em; }
.hero .lede, .page-hero .lede, .section-lede, .prose .lead { letter-spacing: -.009em; }
body { letter-spacing: -.003em; }
/* Hebrew (Heebo): bold, a touch tighter for headings; no negative tracking on running text */
:lang(he) body { letter-spacing: 0; }
:lang(he) :is(.hero, .page-hero) h1 { letter-spacing: -.012em; line-height: 1.08; font-weight: 700; }
:lang(he) :is(.section, .prose, .faq-group) h2 { letter-spacing: -.01em; line-height: 1.12; font-weight: 700; }
:lang(he) :is(h3) { letter-spacing: -.004em; font-weight: 600; }
:lang(he) :is(.hero .lede, .page-hero .lede, .section-lede, .prose .lead, .hero .tagline) { letter-spacing: 0; }

/* lists: quiet neutral markers instead of blue dots */
.points li::before, .fix-list li::before { width: .3rem; height: .3rem; top: .7em; background: var(--grey-86); }
.fix-list li, .points li { padding-inline-start: var(--space-md); }
.fix-intro { font-weight: 600; font-size: 1.0625rem; }

/* rules: hairlines only, never heavy or coloured */
.steps li { border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.steps li::before { font-weight: 500; color: var(--ink-2); }
.options { border-top: 1px solid var(--rule); }
.compare thead th, .compare thead td { border-bottom-color: var(--rule); }
.callout, :dir(rtl) .callout { border: 0; padding: 0; color: var(--ink-2); font-size: .9375rem; }
.answer .guarantee, .prose .guarantee { border: 0; padding: 0; }

/* cards: white surfaces on var(--day), no outlines */
.promise { gap: clamp(var(--space-sm), 1.6vw, var(--space-md)); margin-top: var(--s-5); }
.promise-card, .section:not(.section-alt) .promise-card, .addon-card, .sample, .form-status { border: 0; background: var(--card); border-radius: 22px; }
.promise-card { padding: clamp(var(--space-lg), 3vw, var(--space-xl)); }
.promise-card p { color: var(--ink-2); }
.promise-card .small-print { font-size: .875rem; }
.flow li { border: 0; background: var(--card); color: var(--ink); }
.sample-tag { border: 0; background: var(--day); }

/* the guarantee: one large clean heading, a statement, then the conditions as quiet small print */
.promise-wide { border-top: 0; padding: clamp(2rem, 5vw, var(--space-2xl)); }
.guarantee > h3, .guarantee > h2, .guarantee-h { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.1; letter-spacing: -.022em; font-weight: 600; max-width: 22ch; }
.guarantee-h strong { font-weight: inherit; }
:lang(he) .guarantee > h3, :lang(he) .guarantee > h2, :lang(he) .guarantee-h { letter-spacing: -.01em; font-weight: 700; line-height: 1.15; }
.guarantee-text, .promise-card .guarantee-text { margin-top: clamp(var(--space-md), 2vw, var(--space-lg)); font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem); font-weight: 500; line-height: 1.42; letter-spacing: -.012em; color: var(--ink); max-width: 40ch; }
:lang(he) .guarantee-text { letter-spacing: 0; max-width: 44ch; }
.guarantee-other, .promise-card .guarantee-other { margin-top: var(--space-md); font-size: 1rem; color: var(--ink-2); max-width: 52ch; }
.guarantee-scope-h, .promise-card .guarantee-scope-h { margin-top: clamp(2rem, 4vw, var(--space-xl)); font-size: .9375rem; color: var(--ink); }
.guarantee-scope-h strong { font-weight: 600; }
.guarantee-scope { list-style: none; margin: var(--space-sm) 0 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) clamp(var(--space-lg), 4vw, var(--space-xl)); }
.guarantee-scope li, .guarantee-scope li + li { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--ink-2); }
.prose .guarantee-scope, .answer .guarantee-scope { padding: 0; }
@media (max-width: 700px) { .guarantee-scope { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); } }
/* inside an FAQ answer or a terms page the guarantee is part of the text: smaller heading scale */
.answer .guarantee-text, .prose .guarantee-text { font-size: 1.1875rem; }

/* the frosted reading panels over the living room: calmer, flatter */
:root .into-light .split > .copy,
:root .into-light .section > .container:not(:has(.split)) { box-shadow: 0 30px 80px -50px color-mix(in srgb, var(--night) 18%, transparent); border-radius: 30px; padding: clamp(var(--space-lg), 4.5vw, var(--space-2xl)); }
:root .into-light .section { padding-block: clamp(var(--space-lg), 4vw, var(--space-2xl)); }
/* a section without an object is one calm full-width column */
.split:not(:has(> .model-slot)) { grid-template-columns: minmax(0, 1fr); }

/* the veil that carries the walk through the doorway into the daylight (scene3d.js sets its opacity) */
.stage-veil { position: absolute; inset: 0; background: var(--day); opacity: 0; pointer-events: none; }
.stage.is-static .stage-veil { display: none; }

/* phone */
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(2.375rem, 1rem + 7.2vw, 3rem); }
  .section h2 { font-size: clamp(1.875rem, 1.1rem + 4vw, 2.25rem); }
  .page-hero h1 { font-size: clamp(2.25rem, 1rem + 6.4vw, 2.75rem); }
  .hero .lede, .page-hero .lede { font-size: 1.1875rem; }
  :root .into-light .split > .copy,
  :root .into-light .section > .container:not(:has(.split)) { border-radius: 24px; padding: var(--space-lg) var(--space-md); }
  :root .into-light .section > .container { width: min(100% - 24px, var(--wide)); }
  .promise-card { padding: var(--space-lg) var(--space-md); }
  .promise-wide { padding: var(--space-lg) var(--space-md); }
  .steps { gap: var(--s-3); }
  .options > div, .options > section, :dir(rtl) .options > div { padding-inline: 0; }
}
html, body { overflow-x: clip; }

/* ================= v7: room for the objects ================= */
/* phone: each object gets its own band above its section's reading panel, with air around it; the gaps between
   panels are wide enough for the small decorative pieces */
@media (max-width: 760px) {
  :root .into-light .section { padding-block: var(--space-xl); }
  .split > .model-slot { width: min(74vw, 320px); margin-block: var(--space-xs) var(--space-lg); }
  html.scene-live .split > .model-slot { margin-block: var(--space-xl) var(--space-xl); }
}
@media (max-width: 760px) { .split > .model-slot, .split.flip > .model-slot { order: -1; } }
@media (min-width: 761px) { .split.flip:has(> .model-slot) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

/* ================= v8 type system ================= */
/* Headings: strong, bold display face. Body: the lighter text face. Small UI labels stay in the body face, bolder. */
h1, h2, h3 { font-family: var(--display); font-optical-sizing: auto; }
.hero h1, .page-hero h1 { font-weight: 800; letter-spacing: -.035em; }
:is(.section, .prose, .faq-group) h2, .guarantee > h3, .guarantee > h2, .guarantee-h { font-weight: 800; letter-spacing: -.028em; }
.prose h3, .pair h3, .steps h3, .promise-card h3, .addon-card h3, .options h3, .points h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; }
.footer-grid h2, .error-summary h2, .wa-panel h2, .wa-panel h3 { font-family: var(--font); font-weight: 700; letter-spacing: 0; }
.hero .tagline, .guarantee-text, .facts strong, .sample-count { font-family: var(--display); font-weight: 700; }
.facts strong, .sample-count { font-weight: 800; }
:lang(he) :is(.hero, .page-hero) h1 { font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
:lang(he) :is(.section, .prose, .faq-group) h2, :lang(he) .guarantee > h3, :lang(he) .guarantee-h { font-weight: 700; letter-spacing: -.005em; line-height: 1.16; }
:lang(he) h3, :lang(he) :is(.prose, .pair, .steps, .promise-card, .addon-card, .options) h3 { font-weight: 600; letter-spacing: 0; }
:lang(he) .hero .tagline, :lang(he) .guarantee-text { font-weight: 600; letter-spacing: 0; }
:lang(he) .facts strong { font-weight: 700; }
/* Assistant has a small x-height: set Hebrew running text a step larger so it reads at the same size as the English. */
:lang(he) body { font-size: 1.125rem; line-height: 1.6; }
body { font-weight: 400; }
.faq summary, .field label, .field .label, .fix-intro, .opt-sum, .drivers dt, .brand { font-weight: 700; }
:lang(he) .faq summary { font-weight: 700; }

/* ================= v8 components ================= */
/* Hero points: eight short promises in a tidy two-column checklist under the CTA. */
.hero-points { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: .55rem 2rem; margin-top: var(--s-4); font-size: .9375rem; color: var(--rule); text-align: start; max-width: 52rem; margin-inline: auto; }
.hero-points li { position: relative; padding-inline-start: var(--space-lg); }
.hero-points li + li::before { content: none; }
.hero-points li::after { content: ""; position: absolute; inset-inline-start: .1rem; top: .38em; width: .62rem; height: .36rem; border-left: 2px solid var(--day); border-bottom: 2px solid var(--day); transform: rotate(-45deg); }
@media (max-width: 760px) { .hero-points { grid-template-columns: minmax(0, 1fr); gap: .45rem; max-width: 22rem; font-size: .9375rem; } }
@media (forced-colors: active) { .hero-points li::after { border-color: CanvasText; } }
/* Peace-of-mind reasons and widget features: a quiet grid of short cards. */
.peace-list { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-3); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.peace-list li { background: var(--paper, var(--white)); border-radius: 18px; padding: var(--space-lg) var(--space-lg) var(--space-lg); }
.section-alt .peace-list li { background: var(--white); }
.section:not(.section-alt) .peace-list li { background: var(--day); }
.peace-list h3 { font-family: var(--display); font-size: 1.1875rem; font-weight: 700; letter-spacing: -.012em; line-height: 1.25; }
:lang(he) .peace-list h3 { font-weight: 600; letter-spacing: 0; }
.peace-list p { margin-top: var(--space-xs); color: var(--ink-2); }
@media (max-width: 960px) { .peace-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .peace-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); } }
@media (forced-colors: active) { .peace-list li { border: 1px solid CanvasText; } }
/* Pricing: what one price covers */
.covers { list-style: none; padding: 0; margin: var(--s-2) 0 var(--s-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--s-3); max-width: var(--measure); }
.covers li { position: relative; padding-inline-start: var(--space-lg); }
.covers li::before { content: ""; position: absolute; inset-inline-start: .15rem; top: .42em; width: .62rem; height: .36rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
@media (max-width: 600px) { .covers { grid-template-columns: minmax(0, 1fr); } }
/* "See how it works" link to the widget page */
.see-how { white-space: nowrap; font-weight: 600; }
/* Widget page demo video */
.demo-video { margin: var(--s-3) 0 var(--s-2); }
.demo-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--grey-11); box-shadow: 0 20px 60px -30px color-mix(in srgb, var(--night) 45%, transparent); }
.demo-video figcaption { margin-top: var(--space-xs); font-size: .9375rem; color: var(--ink-2); }
.transcript { margin-top: var(--s-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.transcript summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 700; }
.transcript ol { margin: 0 0 var(--space-md); padding-inline-start: var(--space-lg); }
.transcript li + li { margin-top: var(--space-2xs); }
.hero .tagline { max-width: 44ch; text-wrap: balance; }
h1, h2, h3, .section-lede { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ================= v8.2: the header follows the section behind it ================= */
/* Over the dark hero it stays the solid night bar; over the light sections it becomes an Apple-style frosted
   off-white bar with dark text (ui.js toggles .is-light from data-header="dark|light" sections). Neutral only:
   no blue borders. Colour changes ease over 600ms (a colour fade, kept with reduced motion); instant only with "Stop animations". */
.threshold { position: relative; }
.threshold-mark { position: absolute; inset: 45% 0 0; pointer-events: none; }   /* the static fade is light from about here */
.site-header { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.site-header.tone-ready, .site-header.tone-ready :is(.brand, .brand-mark, .lang-switch, .nav-toggle, .main-nav a) {
  transition: background-color .6s cubic-bezier(.4,0,.2,1), border-color .6s cubic-bezier(.4,0,.2,1), color .6s cubic-bezier(.4,0,.2,1), fill .6s cubic-bezier(.4,0,.2,1), box-shadow .6s cubic-bezier(.4,0,.2,1); }
.site-header.is-light { background: color-mix(in srgb, var(--day) 80%, transparent); border-bottom-color: color-mix(in srgb, var(--night) 10%, transparent); color: var(--ink); caret-color: var(--accent); }
.site-header.is-light :is(.brand, .brand-mark) { color: var(--ink); }
.site-header.is-light :is(.lang-switch, .main-nav a) { color: var(--grey-42); }   /* 9.6:1 on var(--day) */
.site-header.is-light :is(.lang-switch, .main-nav a):hover, .site-header.is-light .main-nav a[aria-current="page"] { color: var(--ink); }
.site-header.is-light .nav-toggle { color: var(--ink); background: color-mix(in srgb, var(--white) 72%, transparent); border-color: color-mix(in srgb, var(--night) 14%, transparent); }
.site-header.is-light .nav-toggle:hover { background: var(--white); border-color: color-mix(in srgb, var(--night) 22%, transparent); }
.site-header.is-light :focus-visible { outline-color: var(--accent); }     /* var(--accent-link): 5.6:1 on the light bar */
.site-header.is-light ::selection { background: color-mix(in srgb, var(--accent-link) 18%, transparent); }
/* the open mobile menu: a near-opaque panel in either tone so the links never sit on the moving scene */
.site-header:has(.main-nav.is-open) { background: var(--night); }
.site-header.is-light:has(.main-nav.is-open) { background: color-mix(in srgb, var(--day) 97%, transparent); }
@media (max-width: 1020px) { .site-header.is-light .main-nav a { border-top-color: color-mix(in srgb, var(--night) 8%, transparent); font-weight: 500; color: var(--ink); } }
html.wa-still .site-header.tone-ready, html.wa-still .site-header.tone-ready :is(.brand, .brand-mark, .lang-switch, .nav-toggle, .main-nav a) { transition: none; }
@media (prefers-reduced-transparency: reduce) { .site-header.is-light { background: var(--day); } }
@media (forced-colors: active) { .site-header.is-light { background: Canvas; color: CanvasText; } .site-header.is-light .nav-toggle { border-color: ButtonText; } }

/* quote/scan hand-off: alternatives to mailto: (big enough to tap) */
.form-alt { margin: var(--space-sm) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); }
.form-alt a, .form-alt .linklike { display: inline-flex; align-items: center; min-height: 44px; }
.linklike { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* v8.3: the risk section right after the door */
.risk-kicker { font-size: .9375rem; font-weight: 700; letter-spacing: .02em; color: var(--ink); text-transform: uppercase; margin: 0 0 var(--space-xs); }
.risk .facts strong { color: var(--night); }
.risk .facts p { color: var(--ink); }
.risk-close { margin-top: var(--s-4); font-size: 1.125rem; font-weight: 600; max-width: var(--measure); }

/* performance on phones and tablets: no live backdrop blur over the animated canvas (iOS re-blurs every panel on
   every frame). Panels become near-opaque instead, which reads the same and costs nothing. */
@media (max-width: 900px), (hover: none) {
  :root .into-light .split > .copy,
  :root .into-light .section > .container:not(:has(.split)),
  :root .site-footer { background: color-mix(in srgb, var(--day) 97%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--night) 20%, transparent); }
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.is-light { background: color-mix(in srgb, var(--day) 97%, transparent); }
}

/* v8.4: soft reveal on scroll (ui.js adds .rv / .in) */
html.js.reveal-on .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
html.js.reveal-on .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js.reveal-on .rv { transform: none; transition-property: opacity; } }
html.wa-still .rv, html.wa-noimg .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
@media print { html.js.reveal-on .rv { opacity: 1 !important; transform: none !important; } }

/* Chunked copy: long paragraphs split into short ones (class .cont = continuation) */
p.cont { margin-top: .6em !important; }
.hero p.lede.cont, .page-hero p.lede.cont { margin-top: .5em !important; }

/* v8.5 Liquid Glass panels (iOS 26 style). The 3D canvas is position:fixed behind .into-light, so the floating
   objects show through. Blur is only applied to panels near the viewport (ui.js adds .gv), lighter on phones.
   Secondary text is darkened inside glass so it stays >= 4.5:1 over whatever is behind it. */
:root .into-light .split > .copy,
:root .into-light .section > .container:not(:has(.split)),
:root .site-footer {
  --ink-2: var(--ink-glass); --accent: var(--accent-glass);
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--white) 72%, transparent) 0%, color-mix(in srgb, var(--white) 56%, transparent) 38%, color-mix(in srgb, var(--white) 52%, transparent) 100%);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 95%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--white) 55%, transparent), 0 1px 0 color-mix(in srgb, var(--night) 4%, transparent), 0 30px 70px -40px color-mix(in srgb, var(--night) 28%, transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root .site-footer { border-radius: 28px 28px 0 0; }
:root .into-light .split > .copy.gv,
:root .into-light .section > .container.gv:not(:has(.split)),
:root .site-footer.gv { -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
/* not yet near the viewport: same look, no blur, a bit more opaque */
/* v9.0: removed the opaque 'not near the viewport' background; only backdrop-filter depends on .gv */
/* inner cards: frosted, no extra blur (nested backdrop filters are expensive) */
:root .into-light :is(.promise-card, .peace-list li, .addon-card) {
  background: color-mix(in srgb, var(--white) 55%, transparent); border: 1px solid color-mix(in srgb, var(--white) 80%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 90%, transparent), 0 10px 30px -22px color-mix(in srgb, var(--night) 25%, transparent); border-radius: 22px;
}
:root .into-light .section:not(.section-alt) .promise-card { background: color-mix(in srgb, var(--white) 55%, transparent); border-color: color-mix(in srgb, var(--white) 80%, transparent); }
@media (max-width: 900px), (hover: none) {
  :root .into-light .split > .copy.gv,
  :root .into-light .section > .container.gv:not(:has(.split)),
  :root .site-footer.gv { -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--white) 84%, transparent) 0%, color-mix(in srgb, var(--white) 74%, transparent) 40%, color-mix(in srgb, var(--white) 72%, transparent) 100%); }
  :root .into-light .split > .copy, :root .into-light .section > .container:not(:has(.split)) { border-radius: 24px; }
}
/* fallbacks: no backdrop-filter, reduced transparency, widget high contrast / no-images, forced colours, print */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root .into-light .split > .copy, :root .into-light .section > .container:not(:has(.split)), :root .site-footer { background: var(--white) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root .into-light .split > .copy, :root .into-light .section > .container:not(:has(.split)), :root .site-footer,
  :root .into-light :is(.promise-card, .peace-list li, .addon-card) { background: var(--white) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; --ink-2: var(--ink-2); }
}
html.wa-hc.scene-live :is(.into-light .split > .copy, .into-light .section > .container, .site-footer, .promise-card, .peace-list li, .addon-card),
html.wa-noimg :is(.into-light .split > .copy, .into-light .section > .container, .site-footer) { background: var(--white) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (forced-colors: active) { html.scene-live :is(.into-light .split > .copy, .into-light .section > .container, .site-footer) { background: Canvas !important; backdrop-filter: none !important; } }
@media print { html.scene-live :is(.into-light .split > .copy, .into-light .section > .container, .site-footer) { background: var(--white) !important; backdrop-filter: none !important; box-shadow: none !important; } }

/* v8.6: longer door sequence (slower, gradual swing); reduced motion keeps the short one */
html.scene-live .threshold { height: 160svh; }
@media (prefers-reduced-motion: reduce) { html.scene-live .threshold { height: 100svh; } }

/* v8.7 cursor light (ui.js; desktop fine pointer only, never under reduced motion / widget stop / high contrast) */
.cursor-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(520px circle at var(--cx, -999px) var(--cy, -999px), color-mix(in srgb, var(--smoke) 16%, transparent), color-mix(in srgb, var(--smoke) 6%, transparent) 45%, transparent 70%); }
html.cursor-on .cursor-glow { opacity: 1; }
html.scene-live :is(.into-light .split > .copy, .into-light .section > .container:not(:has(.split)), .site-footer)::before,
html.scene-live :is(.into-light .split > .copy, .into-light .section > .container:not(:has(.split)), .site-footer)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity .45s ease; }
/* soft sheen at the pointer, under the text */
html.scene-live :is(.into-light .split > .copy, .into-light .section > .container:not(:has(.split)), .site-footer)::before {
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 0), color-mix(in srgb, var(--white) 50%, transparent), transparent 65%); }
/* specular edge: a 1.5px rim lit where the pointer is */
html.scene-live :is(.into-light .split > .copy, .into-light .section > .container:not(:has(.split)), .site-footer)::after {
  padding: 1.5px; background: radial-gradient(240px circle at var(--px, 50%) var(--py, 0), var(--white), color-mix(in srgb, var(--white) 35%, transparent) 45%, transparent 75%);
  -webkit-mask: linear-gradient(var(--night) 0 0) content-box, linear-gradient(var(--night) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--night) 0 0) content-box exclude, linear-gradient(var(--night) 0 0); }
html.cursor-on.scene-live :is(.into-light .split > .copy, .into-light .section > .container:not(:has(.split)), .site-footer)[style*="--spec"]::before { opacity: 1; }
html.cursor-on.scene-live :is(.into-light .split > .copy, .into-light .section > .container:not(:has(.split)), .site-footer)[style*="--spec"]::after { opacity: .9; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }
html:is(.wa-still, .wa-hc, .wa-noimg) .cursor-glow { display: none; }
@media (forced-colors: active), print { .cursor-glow { display: none; } }

/* v8.7 emblems: a few greyscale accessibility symbols set into a card corner (max one per section; decorative,
   alt="" + aria-hidden). Gentle float; on desktop they lean toward the pointer (--tx/--ty from ui.js). */
:is(.copy, .container, .guarantee):has(> .emblem) { position: relative; }
.emblem { position: absolute; top: 18px; inset-inline-end: 18px; width: 84px; height: auto; z-index: 1;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  transform: perspective(520px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .3s cubic-bezier(.2,.7,.2,1);
  animation: emb-float 7s ease-in-out infinite alternate; }
.emblem.emblem-wide { width: 150px; }
@keyframes emb-float { from { translate: 0 0; } to { translate: 0 -5px; } }
:is(.copy, .container, .guarantee):has(> .emblem) > :is(h2, h3, .risk-kicker):first-of-type { padding-inline-end: 96px; }
:is(.copy, .container, .guarantee):has(> .emblem-wide) > :is(h2, h3):first-of-type { padding-inline-end: 164px; }
:is(.copy, .container):has(> .emblem) > .risk-kicker + h2 { padding-inline-end: 96px; }
@media (max-width: 600px) {
  .emblem { width: 54px; top: 14px; inset-inline-end: 14px; }
  .emblem.emblem-wide { width: 96px; }
  :is(.copy, .container, .guarantee):has(> .emblem) > :is(h2, h3, .risk-kicker):first-of-type,
  :is(.copy, .container):has(> .emblem) > .risk-kicker + h2 { padding-inline-end: 64px; }
  :is(.copy, .container, .guarantee):has(> .emblem-wide) > :is(h2, h3):first-of-type { padding-inline-end: 104px; }
}
@media (prefers-reduced-motion: reduce) { .emblem { animation: none; transition: none; } }
html.wa-still .emblem { animation: none !important; transition: none !important; transform: none !important; }
html.wa-noimg .emblem { display: none; }
@media (forced-colors: active), print { .emblem { display: none; } }

/* v8.7 Apple-style rhythm: claim lists as compact frosted rows, tighter mobile spacing */
.fix-list { gap: var(--space-xs); }
.fix-list li { padding-block: var(--space-xs); padding-inline: 2rem var(--space-sm); border-radius: 14px; background: color-mix(in srgb, var(--white) 60%, transparent); border: 1px solid color-mix(in srgb, var(--night) 6%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 90%, transparent); line-height: 1.3; font-size: .97em; }
.fix-list li::before { inset-inline-start: .85rem; top: 50%; translate: 0 -50%; width: .5rem; height: .5rem; }
html:is(.wa-hc) .fix-list li { background: var(--white); border-color: var(--night); }
@media (forced-colors: active) { .fix-list li { border: 1px solid CanvasText; } }
@media (max-width: 600px) {
  .fix-list { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .fix-list li { font-size: .95em; padding-block: var(--space-xs); }
  :root .into-light .section { padding-block: var(--space-md); }
  .section .section-lede, .section .copy > p, .section .container > p { margin-top: .7em; }
  .section h2 + :is(p, .section-lede) { margin-top: var(--space-sm); }
}

/* v8.8 header tone is back (HEADER_ALWAYS_DARK=false): dark night bar over dark sections, light Liquid Glass bar
   (translucent white, dark text/icons, blue CTA unchanged) over the white sections. 400ms ease in both directions. */
.site-header.tone-ready, .site-header.tone-ready :is(.brand, .brand-mark, .lang-switch, .nav-toggle, .main-nav a, .main-nav) {
  transition: background-color 1.1s cubic-bezier(.45,0,.25,1), border-color 1.1s ease, color 1.1s cubic-bezier(.45,0,.25,1), fill 1.1s ease, box-shadow 1.1s ease; }   /* v9.3: a slow tone change, so the bar never flips in one step at the doorway */
.site-header.is-light { background: color-mix(in srgb, var(--white) 66%, transparent); border-bottom-color: color-mix(in srgb, var(--night) 8%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--white) 70%, transparent), 0 8px 24px -18px color-mix(in srgb, var(--night) 25%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.site-header.is-light:has(.main-nav.is-open) { background: color-mix(in srgb, var(--day-2) 97%, transparent); }
@media (max-width: 900px), (hover: none) {
  .site-header.is-light { background: color-mix(in srgb, var(--white) 80%, transparent); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); }
  .site-header.is-light:has(.main-nav.is-open) { background: color-mix(in srgb, var(--day-2) 98%, transparent); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header.is-light { background: var(--day); } }
@media (prefers-reduced-transparency: reduce) { .site-header.is-light { background: var(--day) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } }
html.wa-hc .site-header.is-light { background: var(--white) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.wa-still .site-header.tone-ready, html.wa-still .site-header.tone-ready * { transition: none !important; }

/* v8.9 phones: icon tiles get their own row above the heading (never over text), smaller, at the card's
   inline-end edge (left in Hebrew, right in English). Desktop placement is unchanged. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .emblem, .emblem.emblem-wide { position: static; display: block; width: 46px; margin: 0 0 .6rem; margin-inline-start: auto; translate: none; animation: none; transform: none; }
  .emblem.emblem-wide { width: 84px; }
  :is(.copy, .container, .guarantee):has(> .emblem) > :is(h2, h3, .risk-kicker):first-of-type,
  :is(.copy, .container):has(> .emblem) > .risk-kicker + h2,
  :is(.copy, .container, .guarantee):has(> .emblem-wide) > :is(h2, h3):first-of-type { padding-inline-end: 0; }
}

/* v9.0 (staging review fixes) */
/* crisp icon tiles: no always-on 3D transform / infinite float (WebKit rasterised the tile as a 1x layer, so it
   looked soft); the pointer tilt only on fine-pointer desktops, and only while the pointer is near (ui.js sets --tx) */
.emblem { transform: none; animation: none; will-change: auto; image-rendering: auto; }
/* real glass: the 3D room stays visible through the panels (lighter fill, less blur); text keeps >= 4.5:1 */
:root .into-light .split > .copy,
:root .into-light .section > .container:not(:has(.split)) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--white) 66%, transparent) 0%, color-mix(in srgb, var(--white) 54%, transparent) 45%, color-mix(in srgb, var(--white) 50%, transparent) 100%); }
:root .into-light .split > .copy.gv,
:root .into-light .section > .container.gv:not(:has(.split)) { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
:root .into-light :is(.promise-card, .peace-list li, .addon-card),
:root .into-light .section:not(.section-alt) .promise-card { background: color-mix(in srgb, var(--white) 42%, transparent); }
@media (max-width: 900px), (hover: none) {
  :root .into-light .split > .copy, :root .into-light .section > .container:not(:has(.split)),
  :root .into-light .split > .copy.gv, :root .into-light .section > .container.gv:not(:has(.split)) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--white) 70%, transparent) 0%, color-mix(in srgb, var(--white) 60%, transparent) 45%, color-mix(in srgb, var(--white) 58%, transparent) 100%); }
  :root .into-light .split > .copy.gv, :root .into-light .section > .container.gv:not(:has(.split)) {
    -webkit-backdrop-filter: blur(8px) saturate(150%); backdrop-filter: blur(8px) saturate(150%); }
}
/* less empty white after the door: the walk spacer is shorter */
/* v9.0: one walk-spacer height from the first paint (it used to jump 70svh -> 160svh when the scene went live,
   shifting every card down 3-4s after load); a bit shorter than 160svh so there is less empty white after the door */
.threshold, html.scene-live .threshold { height: 125svh; }
@media (prefers-reduced-motion: reduce) { .threshold, html.scene-live .threshold { height: 100svh; } }
/* reveals: quicker, and they replay when a panel comes back up from below */
html.js.reveal-on .rv { transform: translate3d(0, 20px, 0); transition-duration: .55s, .55s; }
/* v9.0: secondary text inside the lighter glass stays >= 4.5:1 even where the dark door frame is behind a panel */
:root .into-light .split > .copy, :root .into-light .section > .container:not(:has(.split)) { --ink-2: var(--grey-2f); }
/* v9.1: clearer Liquid Glass: the room, the receding door and the 3D emblems read through the panels
   (text contrast verified >= 4.5:1 by pixel sampling over the live scene, desktop + phone) */
:root .into-light .split > .copy,
:root .into-light .section > .container:not(:has(.split)) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--white) 52%, transparent) 0%, color-mix(in srgb, var(--white) 42%, transparent) 45%, color-mix(in srgb, var(--white) 38%, transparent) 100%); }
:root .into-light .split > .copy.gv,
:root .into-light .section > .container.gv:not(:has(.split)) { -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); }
:root .into-light :is(.promise-card, .peace-list li, .addon-card),
:root .into-light .section:not(.section-alt) .promise-card { background: color-mix(in srgb, var(--white) 34%, transparent); }
@media (max-width: 900px), (hover: none) {
  :root .into-light .split > .copy, :root .into-light .section > .container:not(:has(.split)),
  :root .into-light .split > .copy.gv, :root .into-light .section > .container.gv:not(:has(.split)) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--white) 56%, transparent) 0%, color-mix(in srgb, var(--white) 47%, transparent) 45%, color-mix(in srgb, var(--white) 44%, transparent) 100%); }
  :root .into-light .split > .copy.gv, :root .into-light .section > .container.gv:not(:has(.split)) {
    -webkit-backdrop-filter: blur(7px) saturate(160%); backdrop-filter: blur(7px) saturate(160%); }
}
/* v9.1b: text over the see-through glass: a deeper blue for links inside the panels (still the one blue accent) and a
   slightly firmer fill, so every line keeps >= 4.5:1 wherever the door or an emblem passes behind it */
:root .into-light :is(.split > .copy, .section > .container) a:not(.btn), :root .site-footer a:not(.btn) { color: var(--accent-deep); }
:root .into-light .split > .copy,
:root .into-light .section > .container:not(:has(.split)) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--white) 60%, transparent) 0%, color-mix(in srgb, var(--white) 52%, transparent) 45%, color-mix(in srgb, var(--white) 48%, transparent) 100%); }
@media (max-width: 900px), (hover: none) {
  :root .into-light .split > .copy, :root .into-light .section > .container:not(:has(.split)),
  :root .into-light .split > .copy.gv, :root .into-light .section > .container.gv:not(:has(.split)) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--white) 64%, transparent) 0%, color-mix(in srgb, var(--white) 56%, transparent) 45%, color-mix(in srgb, var(--white) 54%, transparent) 100%); }
}
@media (max-width: 900px), (hover: none) {
  :root .into-light .split > .copy.gv, :root .into-light .section > .container.gv:not(:has(.split)) {
    -webkit-backdrop-filter: blur(11px) saturate(160%); backdrop-filter: blur(11px) saturate(160%); }
}
:root .into-light .split > .copy.gv,
:root .into-light .section > .container.gv:not(:has(.split)) { -webkit-backdrop-filter: blur(13px) saturate(170%); backdrop-filter: blur(13px) saturate(170%); }
@media (max-width: 900px), (hover: none) {
  :root .into-light .split > .copy.gv, :root .into-light .section > .container.gv:not(:has(.split)) {
    -webkit-backdrop-filter: blur(11px) saturate(160%); backdrop-filter: blur(11px) saturate(160%); }
}

/* v9.2: a section whose emblem is shown in 3D (in clear room space beside its card) hides its 2D emblem, so there
   is never more than one per section; everywhere else (and without the live scene) the 2D emblem stays */
.has-deco3d .emblem { visibility: hidden; }

/* v9.4 (owner): the 3D emblems sit behind the glass cards and must read through it, so the phone glass is a little
   thinner and less blurred (it was the most opaque); every text line over an emblem is still measured >= 4.5:1 */
@media (max-width: 900px), (hover: none) {
  :root .into-light .split > .copy, :root .into-light .section > .container:not(:has(.split)),
  :root .into-light .split > .copy.gv, :root .into-light .section > .container.gv:not(:has(.split)) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--white) 58%, transparent) 0%, color-mix(in srgb, var(--white) 50%, transparent) 45%, color-mix(in srgb, var(--white) 48%, transparent) 100%); }
  :root .into-light .split > .copy.gv, :root .into-light .section > .container.gv:not(:has(.split)) {
    -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); }
}

/* v9.5: phones keep a clear band under the footer for the corner accessibility button */
@media (max-width: 760px) { .site-footer { padding-bottom: calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px)); } .site-footer > .container { padding-inline: max(var(--space-lg), env(safe-area-inset-left, 0px)) max(var(--space-lg), env(safe-area-inset-right, 0px)); } }

/* v9.6: the footer is the same see-through glass as the cards (it was the old, more opaque and twice-as-blurred
   pane, so the 3D room seemed to vanish behind it near the end of the page). Its text is ink var(--ink-glass) and links
   var(--accent-deep) on >= 48% white over the grey room: measured >= 4.5:1. Phones: the docked accessibility tab sits in the
   side margin, so the tall clear band under the footer is no longer needed. */
:root .site-footer { background: linear-gradient(180deg, color-mix(in srgb, var(--white) 60%, transparent) 0%, color-mix(in srgb, var(--white) 52%, transparent) 45%, color-mix(in srgb, var(--white) 48%, transparent) 100%); }
:root .site-footer.gv { -webkit-backdrop-filter: blur(13px) saturate(170%); backdrop-filter: blur(13px) saturate(170%); }
@media (max-width: 900px), (hover: none) {
  :root .site-footer, :root .site-footer.gv { background: linear-gradient(180deg, color-mix(in srgb, var(--white) 58%, transparent) 0%, color-mix(in srgb, var(--white) 50%, transparent) 45%, color-mix(in srgb, var(--white) 48%, transparent) 100%); }
  :root .site-footer.gv { -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); }
}
@media (max-width: 760px) { .site-footer { padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); } }
/* v9.6: desktop: the footer's text column reached the screen edge strip where the round accessibility button sits
   (1024-1366px), so its first and last lines ran under the button at the end of the page; inset it past the button */
@media (min-width: 761px) { .site-footer > .container { padding-inline: var(--space-xl); } }
/* v9.6: a shorter reveal (was .55s): a card that is still fading after a fast flick is blank for at most a moment */
html.js.reveal-on .rv { transform: translate3d(0, 14px, 0); transition-duration: .25s, .25s; }


/* ===================================================================================================
   Hallmark restyle layer (redesign: restyle · "keep the layout"). The system changes, the layout and
   every word stay. Brand: Apple line, iOS 26 Liquid Glass, black/white/greys, blue as accent only.
   =================================================================================================== */

/* Floor 4: clip, never hidden, on both html and body */
html, body { overflow-x: clip; }

/* Type: one Latin family (Inter Tight), Hebrew in Assistant, a step larger to match the Latin x-height */
body { font-family: var(--font); font-feature-settings: "ss01" 0; letter-spacing: -.003em; }
:lang(he) body, body:lang(he) { letter-spacing: 0; }
h1, h2, h3 { letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; font-weight: 600; }
.section h2, .page-hero h1 { font-weight: 700; }
:lang(he) :is(h1, h2, h3) { letter-spacing: 0; font-weight: 700; }
.facts strong, .scan-price strong, .stat strong, .price strong, .num { font-variant-numeric: tabular-nums; }

/* Header: the Radiant-opening lockup, dark lockup on the dark room, light lockup on daylight */
.brand { gap: 0; }
.brand-lockup { height: 32px; width: auto; }
.brand-lockup--light { display: none; }
.site-header.is-light .brand-lockup--dark { display: none; }
.site-header.is-light .brand-lockup--light { display: block; }
@media (forced-colors: active) { .brand-lockup { forced-color-adjust: none; } }
.site-header { background: color-mix(in srgb, var(--night) 72%, transparent); border-bottom-color: color-mix(in srgb, var(--white) 8%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--night); } }
@media (prefers-reduced-transparency: reduce) { .site-header { background: var(--night); } }

/* Labels: body face, sentence case, untracked (Floor 9) */
.risk-kicker { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 1rem; color: var(--ink-glass); }
.risk .facts strong { color: var(--ink); }

/* Liquid Glass (iOS 26): a bright, near-opaque ground (>= 86% white) so text contrast never depends on the 3D room
   behind it; the blur, the specular rim and the soft shadow carry the material. */
:root .into-light .split > .copy,
:root .into-light .section > .container:not(:has(.split)),
:root .site-footer {
  background: linear-gradient(180deg, var(--glass-hi) 0%, var(--glass-lo) 100%);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px var(--glass-edge), 0 1px 0 color-mix(in srgb, var(--night) 4%, transparent), 0 40px 80px -48px var(--glass-shadow);
  border-radius: 32px;
}
@media (max-width: 900px), (hover: none) {
  :root .into-light .split > .copy.gv,
  :root .into-light .section > .container.gv:not(:has(.split)),
  :root .site-footer.gv { background: linear-gradient(180deg, var(--glass-hi) 0%, var(--glass-lo) 100%); }
  :root .into-light .split > .copy, :root .into-light .section > .container:not(:has(.split)) { border-radius: 26px; }
}
:root .site-footer { border-radius: 32px 32px 0 0; }
:root .into-light :is(.promise-card, .peace-list li, .addon-card),
:root .into-light .section:not(.section-alt) .promise-card {
  background: color-mix(in srgb, var(--white) 78%, transparent); border: 1px solid color-mix(in srgb, var(--white) 90%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-rim), 0 12px 32px -24px var(--glass-shadow); border-radius: 20px;
}

/* Buttons: one filled pill in the accent; press, disabled and focus states (eight states) */
.btn { background: var(--accent-fill); color: var(--white); font-weight: 600; letter-spacing: -.005em;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 22%, transparent); transition: background-color .2s var(--ease-out), transform .12s var(--ease-out); }
.btn:hover { background: var(--accent-fill-hover); }
.btn:active { background: var(--accent-fill-press); transform: scale(.98); }
:is(.btn, button, input, select, textarea):disabled, [aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
a:active { opacity: .72; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:active { transition: background-color .2s; transform: none; } }

/* Links: #2997ff on the dark room, #0066cc on daylight (AA on white and on the glass); #0071e3 fills controls */
.into-light a:not(.btn), .site-footer a:not(.btn) { color: var(--accent-link); }
:root .into-light :is(.split > .copy, .section > .container) a:not(.btn) { color: var(--accent-glass); }

/* Focus: instant, 2px ring plus a halo that holds 3:1 on either band */
:focus-visible { outline: 2px solid var(--focus-dark); outline-offset: 3px; }
:is(.into-light, .site-footer, .site-header.is-light) :focus-visible { outline-color: var(--accent-deep); }
@media (forced-colors: active) { :focus-visible { outline-color: Highlight; } }

/* the dark page heroes set their own text colour */
.page-hero { color: var(--on-night); }

/* Hairlines and the daylight ground */
.into-light { background: var(--day); }
hr, .rule { border-color: var(--rule); }