/* concept_merge.css: reconciliation layer for the concept_rl design on top of round5 (loaded last).
   Only rules that make the two layers work together; design tokens come from tokens.css/concept.css. */

/* header tone: the concept shortened the light/dark crossfade to --dur-micro (grey-on-grey for ~0.5 s otherwise);
   round5's lockup images follow the same timing */
.site-header.tone-ready .r2-logo img { transition-duration: var(--dur-micro, .2s); }

/* ---------- blue night look = the HOME HERO ONLY (Yoav + Itai 30.10 16:56; supersedes the 15:22 approval for the
   rest of the site). Everywhere else the site is the uniform black/white/grey Liquid Glass of main 595952c: the dark
   panels (promise, peace, closing band and the other is-night sections) and the footer are main's light sections again
   (is-night / dark header marks removed from the markup), and the concept's decorative light on the sub-page heroes
   (beams, glow core, stage glow, symbol halo, point markers) is white / grey light. CSS + markup only; scene3d.js and
   the door are untouched. ---------- */
:root {
  --beam-hi: color-mix(in srgb, var(--white) 50%, var(--night));
  --beam-lo: color-mix(in srgb, var(--white) 24%, var(--night));
  --beam-white: color-mix(in srgb, var(--white) 78%, var(--night)); }
.glow-core { background: radial-gradient(closest-side, color-mix(in srgb, var(--white) 30%, transparent), transparent); }
.stage-card { box-shadow: inset 0 0 0 1px var(--night-rim), inset 0 1px 0 var(--night-rim-hi), 0 0 120px -30px color-mix(in srgb, var(--white) 22%, transparent), 0 40px 90px -50px color-mix(in srgb, var(--night) 90%, transparent); }
.stage-card::after { background: radial-gradient(42% 60% at 50% 52%, color-mix(in srgb, var(--white) 16%, transparent), transparent 70%); }
.symbol-halo { background: radial-gradient(closest-side, color-mix(in srgb, var(--white) 24%, transparent), color-mix(in srgb, var(--white) 6%, transparent) 55%, transparent); }
.hero-more .hero-points li::after { border-color: var(--on-night-2); }
/* the home hero keeps the blue: the concept's blue beams (tokens.css values) and the navy tokens, scoped to .hero */
.hero {
  --beam-hi: color-mix(in srgb, var(--accent-night) 88%, var(--night));
  --beam-lo: color-mix(in srgb, var(--accent-fill) 55%, var(--night));
  --beam-white: color-mix(in srgb, var(--white) 70%, var(--accent-night));
  --navy: #04111f; --navy-2: #0a2138; }
/* no card is ever blue (Yoav 17:47): the hero keeps the blue only as its BACKGROUND (the field below); card / panel
   surfaces (--night-glass, --night-glass-2, --night-panel) keep tokens.css's neutral values inside the hero too */
/* the hero: a deep navy field with the blue radial glow behind the headline (static: no autonomous motion) */
.hero > .hero-copy::after { content: ""; position: absolute; z-index: -2; pointer-events: none; inset: -40% -60% -10%;
  background:
    radial-gradient(38% 30% at 50% 38%, color-mix(in srgb, var(--accent-fill) 42%, transparent), transparent 72%),
    repeating-linear-gradient(118deg, transparent 0 8%, color-mix(in srgb, var(--beam-lo) 55%, transparent) 11%, color-mix(in srgb, var(--beam-hi) 40%, transparent) 13.5%, color-mix(in srgb, var(--beam-lo) 55%, transparent) 16%, transparent 20% 28%),
    radial-gradient(70% 55% at 50% 40%, var(--navy-2), var(--navy) 60%, transparent 100%);
  filter: blur(18px);
  -webkit-mask-image: radial-gradient(60% 52% at 50% 42%, #000 45%, transparent 100%); mask-image: radial-gradient(60% 52% at 50% 42%, #000 45%, transparent 100%); }
:dir(rtl) .hero > .hero-copy::after { transform: scaleX(-1); }
@media (forced-colors: active) { .hero > .hero-copy::after { display: none; } }
@media print { .hero > .hero-copy::after { display: none; } }

/* phone: round5 docks the widget trigger in the header row on the brand side (round2.css .brand margin 48px);
   concept.css's `.site-header a.brand { margin-inline: -8px }` is more specific and pulled the logo under the trigger. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1020px) {
  .site-header a.brand { margin-inline-start: 46px; }
  html.r2-nowidget .site-header a.brand { margin-inline-start: calc(-1 * var(--space-xs)); }
}


/* (Yoav 17:47) cards = main 595952c exactly: the 30.10 (c) hairline outline + contact-shadow stack on the light cards is removed
   (git show this commit's parent to restore it). */

/* ---------- WCAG 2.2.2 without a pause button (חזי 13:20): no endless autonomous loop. Each decorative loop plays
   once, within 5 s of the page load, and then rests (the scroll-driven animations are unchanged; reduced motion and
   the widget's Stop animations already turn these off in concept.css). The typing dots of the FAQ demo and the chat
   only show while an answer is pending (status indicator) and are not decoration. ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.wa-still) .glow-beam, html:not(.wa-still) .glow-beam--2 { animation-duration: 2.5s; animation-iteration-count: 2; }
  html:not(.wa-still) .symbol-halo { animation-duration: 2.5s; animation-iteration-count: 2; }
  html:not(.wa-still) .symbol-depth .symbol { animation: none; }
}


/* phone only: the HE home h1 stays on at most 2 lines at 360-412 px for the current and the upcoming text
   (measured in WebKit: 2-line limit 44/46/48/51 px at 360/375/390/412; this sits ~10% under it) */
@media (max-width: 600px) {
  :lang(he) .hero h1#hero-title { font-size: clamp(2.25rem, -0.344rem + 12.5vw, 2.875rem); }
}

/* ---------- Yoav 30.10 (14:46) phone header: one row inside the pill at every phone width (it ran out of the pill at
   360-412 HE / 360-390 EN: the menu button cut at the left edge at 390 HE and gone at 360). Rule: one line, the full
   lockup (120 px, the brand README minimum) from 360 px, the symbol alone below 360 (round5 block in round2.css).
   Phone only (<=480 px inside the phone query); desktop and tablet untouched. Room: the pill sits 6 px from the
   sides (was 8), 6 px inner padding (was 16), 4 px gaps, the docked trigger 12 px from the edge (round2_widget.css),
   a tighter scan button. 360-389 px: the lockup + 4 x 44 px targets + the scan button do not fit in one row, so the
   header scan button gives way there (it is the last item of the menu, and the home hero has its own first-screen
   CTA); below 360 the symbol frees the room and it is back. All targets stay 44 x 44. ---------- */
@media (max-width: 480px) {
  :root .site-header { width: calc(100% - 12px); }
  :root .site-header .header-inner { padding-inline: 6px; column-gap: 4px; }
  :root .site-header .header-actions { gap: 4px; }
  :root .site-header a.brand { padding-inline: 4px; margin-inline: 47px 0; }
  html.r2-nowidget .site-header a.brand { margin-inline-start: -4px; }
  :root .site-header .header-actions .btn-small { padding-inline: .55rem; }
}
/* header = main's hotfix 1cf2c2a (חזי 15:26, supersedes 26b19e2 and the 25px idea): 384-399 px (iPhone 390/393) keeps
   the FULL lockup at the 120 px brand minimum (29 px high); below 384 px the symbol alone (main: was below 360).
   Scan button padding .45rem and 6 px gaps as in 1cf2c2a (our pill already has the 12 px trigger and tight padding,
   480 px block above). Phone only (<400 px); >=400 px and desktop unchanged. Targets stay 44 x 44. */
@media (max-width: 399.98px) {
  :root .site-header .header-actions .btn-small { padding-inline: .45rem; }
}
@media (min-width: 384px) and (max-width: 399.98px) {
  :root .site-header .r2-logo { height: 29px; }
}
@media (max-width: 383.98px) {
  :root .site-header .r2-logo { aspect-ratio: 1 / 1; height: 30px; overflow: hidden; }
  :root .site-header .r2-logo img { inset: 0 auto 0 0; width: auto; height: 100%; aspect-ratio: 496.3 / 120; max-width: none; }
}

/* ---------- 4) phone: the chat launcher sat over the last hero points on the first screen (360 / 390). On phone it is
   a 48 px round icon button in the bottom inline-end corner (the visible label stays its accessible name), and the
   hero points keep that corner free (their ragged line ends move in by the button's width). The accessibility
   trigger is docked in the header on phone, so the two never meet (the data-lift stacking is unchanged). ---------- */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1020px) {
  .wodc .wodc-launch:not([aria-expanded="true"]) { inline-size: 48px; block-size: 48px; min-block-size: 48px; padding: 0; justify-content: center; gap: 0; }
  .wodc .wodc-launch:not([aria-expanded="true"]) > span { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero .hero-copy > .hero-points { padding-inline-end: 56px; }   /* + the container's own padding >= 16 + 48 + 8 px from the edge */
}

/* blue night look, contrast: the blue top light lifts the panel ground, so the secondary grey on dark sections goes
   from #a1a1a6 to #bcbcc1 (worst pixel >= 4.5:1 on the lightest blue measured; desktop and phone). */
.hero { --on-night-2: #bcbcc1; }

/* Live bug B (Yoav's iPhone video 30.10 19:22) + icons v3 (מעצב 19:41): the hero list's tick (a rotated 2px border
   "L") read as an OS check-mark emoji. It is now מעצב's vector check (emblem_sets/v3/check-list.svg: #f5f5f7 for dark grounds,
   check-list-ink.svg #1d1d1f for light ones; copied to assets/emblems/ by build_concept.sh EMBLEM_SET=v3), round caps,
   sharp at every DPR. Decorative pseudo-element (not read out); the text is unchanged.
   Under .hero-more it keeps the --on-night-2 tint via a mask; forced colours: CanvasText through the same mask. */
.hero-points li::after {
  border: 0; transform: none;
  width: .95em; height: .95em; top: .22em; inset-inline-start: 0;
  background: url(../emblems/check-list.svg) center / contain no-repeat;
}
[data-header="light"] .hero-points li::after { background-image: url(../emblems/check-list-ink.svg); }
.hero-more .hero-points li::after {
  background: var(--on-night-2);
  -webkit-mask: url(../emblems/check-list.svg) center / contain no-repeat; mask: url(../emblems/check-list.svg) center / contain no-repeat;
}
@media (forced-colors: active) {
  .hero-points li::after { forced-color-adjust: none; background: CanvasText; -webkit-mask: url(../emblems/check-list.svg) center / contain no-repeat; mask: url(../emblems/check-list.svg) center / contain no-repeat; }
}

/* Live bug D (Yoav's iPhone video 19:22, 00:03): a header-high solid black band under the sticky header on a fast
   swipe up. Cause: the 3D canvas (.stage, position: fixed) is composited asynchronously on iOS during momentum
   scrolling and when the URL bar expands; for a frame it lags the scroll and the page ground behind it shows. That
   ground was black (html/body var(--night)) even while the bright room fills the screen. Fix (scene3d.js untouched):
   while the line under the header is in a light section (ui.js sets html.tone-light, the same signal as the light
   header), the ground behind the canvas is the room's own edge grey, so a lagging frame shows no visible band. */
html.scene-live.tone-light, html.scene-live.tone-light body { background-color: #a1a1a6; }
@media (forced-colors: active) { html.scene-live.tone-light, html.scene-live.tone-light body { background-color: Canvas; } }

/* EMBLEM SET 'v3': appended to concept_merge.css by build_concept.sh (EMBLEM_SET=v3).
   v3 = the live 'main' icons, same art/colours/names, made sharp (text as paths, no SVG filters on plate or glyph,
   ~15% heavier strokes, visible emboss). Sizes as Yoav asked 30.10: 108px desktop / 72px phone (plaques 196/148).
   Still static in the card (no float / tilt: glass.css). */
:root .emblem { width: 108px; top: 16px; inset-inline-end: 16px; }
:root .emblem.emblem-wide { width: 196px; }
: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: calc(108px + 1rem); }
:is(.copy, .container, .guarantee):has(> .emblem-wide) > :is(h2, h3):first-of-type { padding-inline-end: calc(196px + 1rem); }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  :root .emblem, :root .emblem.emblem-wide { width: 72px; margin: 0 0 var(--space-xs); margin-inline-start: auto; }
  :root .emblem.emblem-wide { width: 148px; }
  :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; }
}

/* ===== hazefix (חזי, 30.10.2026 ~20:20) =====
   Footer: Bug 1 (transparent footer) REVERTED 30.10 ~20:35 (Yoav 20:31: bring back the white glass behind the footer);
   the footer is the 013f7e0b white Liquid-Glass surface again (glass.css/style.css, untouched). */
/* Bug 2, Yoav 19:56 "קו שחור/כחול בראש האתר": the page ground (html/body) and theme-color were black #050506 while the
   home hero behind the header is night-blue (top edge ~#062341), so wherever the ground shows at the top (the 12px
   strip above the floating header during iOS/macOS overscroll bounce, a lagging frame of the fixed 3D canvas on a fast
   scroll, Safari's bar tint from theme-color) a thin black line sat above the blue. ui.js now marks html.tone-hero while
   the hero is under the header and sets theme-color to the same navy; the ground follows it. */
html.scene-live.tone-hero, html.scene-live.tone-hero body { background-color: #062341; }
@media (forced-colors: active) { html.scene-live.tone-hero, html.scene-live.tone-hero body { background-color: Canvas; } }
/* ===== end hazefix ===== */

/* ===== hazefix cards (חזי, 30.10.2026, Yoav 20:05: "the cards open badly when they appear on scroll") =====
   No scroll-reveal / opening animation on any card: ui.js (CARD_REVEAL = false) no longer adds .rv/.in, round2.js
   (CARD_OPEN_ON_SCROLL = false) no longer shuts/opens cards with clip-path; these rules also neutralise the CSS-only
   scroll-driven rises (concept.css 'rise', glass.css 'g-rise', concept.css 'stage-rise') so cards and their text are
   static, opaque and in place from the first frame. Hover states and the tap-to-open (#27, round4.js) are untouched. */
html .rv, html.js.reveal-on .rv, html.r2-open .rv, html.r2-open .rv.r2-shut, html.r2-open .rv.r2-anim {
  opacity: 1 !important; transform: none !important; clip-path: none !important; scale: none !important; transition: none !important; }
html.r2-open .rv :is(.promise > .promise-card, .pair > *, .peace-list > li, .steps > li) { translate: none !important; transition: none !important; }
html .into-light .section > .container,
html .into-light :is(.split > .copy, .section > .container:not(:has(.split))) > :is(h2, h3, p, ul, ol),
html .stage-card { animation: none !important; }

/* ===== hero centre (חזי, 30.10.2026 ~20:40, Yoav 20:33 Android 412 screenshot) =====
   Phone (<=600px): concept.js's chat-launcher lane put 44-52px padding on ONE side (inline-end = left in HE, right in EN)
   of every hero text block as an inline style, so the hero copy sat off-centre, the HE h1 wrapped to 3 lines and the
   tagline to 2. Here: the hero copy from the h1 down to the CTA row has symmetric padding (only the container gutter)
   and is centred; the HE h1 is two nowrap lines ('האתר שלכם נגיש?' / 'החוק כבר שואל.', spans in he/index.html) sized
   to the width (fits 360-430); the HE tagline is one nowrap line (>=14px, ~18px at 360+). EN: centred, balanced wrap
   (2 lines would need ~27px at 360, so EN keeps 3 lines). The launcher (bottom corner) stays clear of the hero copy
   on the first screen; .hero-points keep their lane. Desktop (>600px) untouched. */
@media (max-width: 600px) {
  html .hero .hero-copy > :is(h1, p, .cta-row) { padding-inline: 0 !important; margin-inline: auto; text-align: center; }
  html .hero .hero-copy > .cta-row { justify-content: center; }
  /* the launcher sits in a bottom corner (left in HE, right in EN) and the CTA row can end near the first screen's bottom;
     an equal 56px inset on both sides keeps the row centred and wraps the link under the button, clear of the launcher */
  html .hero .hero-copy > .cta-row { padding-inline: 56px !important; row-gap: 12px; }
  html .hero .hero-copy > :is(h1, p) { text-wrap: balance; }
  html:lang(he) .hero h1#hero-title { font-size: clamp(2.25rem, calc((100vw - 40px) / 7.9), 3rem); }
  html:lang(he) .hero h1#hero-title > .h1-l { display: block; white-space: nowrap; }
  html:lang(he) .hero .hero-copy > .tagline { white-space: nowrap; font-size: clamp(14px, calc((100vw - 40px) / 17.8), 18px); }
}
/* follow-up 21:15 (EN 360x640: a lede line ran under the chat launcher): the hero's running text keeps the
   site's chat-launcher lane, but on BOTH sides so it stays centred (launcher 16 + 48px from the edge; 48px inside the
   ~20px container = 68px). The h1 and the HE one-line tagline keep the full width (2 lines / 1 line). */
@media (max-width: 600px) {
  html .hero .hero-copy > p.lede, html:not(:lang(he)) .hero .hero-copy > p.tagline { padding-inline: 48px !important; }
}
/* hero text (Yoav 22:19, HE phone only): the three running paragraphs under the bold first lede ("פעם בתביעות…" to
   "…ועושים את כל העבודה.") fit in 5 lines (2+1+2) instead of 7-8. Font shrinks with the viewport (>= 14px, the
   middle line "חוק שוויון…" is ~17.5em wide, so text width / 18), line-height 1.5. Side padding stays 48px (chat
   lane) wherever 14px already fits; only below ~392px it narrows so 14px still fits (min 24px). Desktop/EN untouched. */
@media (max-width: 600px) {
  html:lang(he) .hero .hero-copy > p.lede.cont { font-size: clamp(14px, calc((100vw - 136px) / 18), 16px); line-height: 1.5; padding-inline: clamp(24px, calc((100vw - 292px) / 2), 48px) !important; }
}
/* ===== end hero centre ===== */

/* ===== top gap (חזי, 30.10.2026 ~20:45, Yoav 20:38 /he/widget desktop) =====
   Inner pages: the sticky header pill takes 12px top margin (8px on phone) + its height in the flow, so the first
   section (.page-hero, opaque #050506) starts ~66px down and the fixed 3D room canvas (light grey ceiling) showed
   through as a light band above/around the pill. The page-hero now paints its own ground up to y=0 (a same-colour
   shadow cast 160px upward, under the header, z-order unchanged); layout, header and the home hero are untouched. */
html body main#main > .page-hero:first-child { box-shadow: 0 -160px 0 0 rgb(5 5 6); }
/* follow-up 21:15 (Yoav: the hero's grey glow must bleed to y=0, no band at all): the first .page-hero is pulled up
   under the sticky header pill by the pill's own slot (12px margin + 54px on desktop, 8px + 58px on phone = 66px) and
   gets the same 66px back as top padding, so the text does not move and the glow (overflow: clip) now starts at y=0
   behind the floating pill. The shadow above stays only as a fallback (e.g. a taller header with large a11y text). */
html body main#main > .page-hero:first-child { --wod-hdr-slot: 66px; margin-top: calc(-1 * var(--wod-hdr-slot)); padding-top: calc(clamp(var(--space-2xl), 8vw, var(--space-3xl)) + var(--wod-hdr-slot)); }
@media (forced-colors: active) { html body main#main > .page-hero:first-child { box-shadow: none; } }
/* ===== end top gap ===== */

/* ===== ux 30.10 (חזי, ~20:50, Yoav 20:42): brand cursor, soft pill scrollbar, smooth icon press ===== */
/* 1) cursor: the logo's blue sunburst (12 rays, white outline for dark + light grounds), CSS cursor:url() only, hotspot
   at the centre; a bolder 'pointer' variant for links/buttons; always a keyword fallback. Desktop fine pointers only;
   touch and forced colours keep the system cursor (the whole block is behind the media query). Text fields keep 'text'. The a11y widget's big cursor (html.wa-cursor) wins. */
/* cursor3d 31.10 (Yoav chose A3d-2 'domed glass pillow'): PNG 32px + 64px @2x via image-set (no SVG filter, see
   review_door/cursor3d/BUG_REPORT.md). Absolute paths so the same values work inside the a11y widget's shadow root through
   --wa-cur-arrow / --wa-cur-hand (custom properties inherit through :host { all: initial }). any-hover/any-pointer so a
   touch-screen laptop or pen tablet keeps the brand cursor for its mouse. Fallback order: url() -> -webkit-image-set -> image-set. */
@media (any-hover: hover) and (any-pointer: fine) and (forced-colors: none) {
  html:not(.wa-cursor) {
    --wa-cur-arrow: image-set(url("/assets/brand/cursor/wod_a3d2_arrow.png") 1x, url("/assets/brand/cursor/wod_a3d2_arrow@2x.png") 2x) 4 3, auto;
    --wa-cur-hand: image-set(url("/assets/brand/cursor/wod_a3d2_hand.png") 1x, url("/assets/brand/cursor/wod_a3d2_hand@2x.png") 2x) 11 2, pointer;
    cursor: url("/assets/brand/cursor/wod_a3d2_arrow.png") 4 3, auto;
    cursor: -webkit-image-set(url("/assets/brand/cursor/wod_a3d2_arrow.png") 1x, url("/assets/brand/cursor/wod_a3d2_arrow@2x.png") 2x) 4 3, auto;
    cursor: image-set(url("/assets/brand/cursor/wod_a3d2_arrow.png") 1x, url("/assets/brand/cursor/wod_a3d2_arrow@2x.png") 2x) 4 3, auto; }
  html:not(.wa-cursor) :is(a[href], button, [role="button"], [role="link"], [role="tab"], summary, label, select, .r27-tile, .r27-hd,
      input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"], [type="color"])):not(:disabled) {
    cursor: url("/assets/brand/cursor/wod_a3d2_hand.png") 11 2, pointer;
    cursor: -webkit-image-set(url("/assets/brand/cursor/wod_a3d2_hand.png") 1x, url("/assets/brand/cursor/wod_a3d2_hand@2x.png") 2x) 11 2, pointer;
    cursor: image-set(url("/assets/brand/cursor/wod_a3d2_hand.png") 1x, url("/assets/brand/cursor/wod_a3d2_hand@2x.png") 2x) 11 2, pointer; }
  html:not(.wa-cursor) :is(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="range"]), textarea, [contenteditable="true"]) { cursor: text; }
  html:not(.wa-cursor) :disabled { cursor: not-allowed; }
}
/* 2) scrollbar: a thin soft pill (999px radius, transparent border = inset), dark-glass grey on a transparent track.
   Chromium/WebKit use ::-webkit-scrollbar (scrollbar-color would switch Chromium to the plain standard bar), Firefox
   and others the standard properties. */
html::-webkit-scrollbar, html ::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
html::-webkit-scrollbar-track, html ::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb, html ::-webkit-scrollbar-thumb { background-color: rgb(118 122 134 / .62); background-clip: padding-box;
  border: 3px solid transparent; border-radius: 999px; min-height: 48px; }
html::-webkit-scrollbar-thumb:hover, html ::-webkit-scrollbar-thumb:hover { background-color: rgb(41 151 255 / .72); }
html::-webkit-scrollbar-thumb:active, html ::-webkit-scrollbar-thumb:active { background-color: rgb(41 151 255 / .9); }
html::-webkit-scrollbar-corner, html ::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: rgb(118 122 134 / .62) transparent; } }
/* 21:25: style.css sets scrollbar-color on html, which makes Chromium ignore ::-webkit-scrollbar; reset it where the
   pseudo-element exists so the pill applies (Firefox keeps the standard thin bar above). */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) { @supports selector(::-webkit-scrollbar) { html { scrollbar-color: auto; scrollbar-width: auto; } } }
/* touch phones keep style.css's standard thin bar: the reset re-enabled WebKit's 12px custom bar there and shifted fixed UI (the docked a11y trigger) 12px inwards */
@media (forced-colors: active) { html { scrollbar-color: auto; } }
/* 3) icon press: one soft curve for every clickable icon (card emblems via their tap tile, the chat launcher, the
   language switch, the menu button): the individual 'scale' property only (+ opacity), 260ms ease-out
   cubic-bezier(.22,1,.36,1), press to .96 and back with the same curve: compositor-only, no layout shift, no
   transition:all, no permanent will-change. Reduced motion / 'stop animations': no movement. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.wa-still) .wodc .wodc-launch { transition: scale 260ms cubic-bezier(.22,1,.36,1), opacity 260ms cubic-bezier(.22,1,.36,1); }
  html:not(.wa-still) .wodc .wodc-launch:active { transform: none; scale: .96; }
  html:not(.wa-still) .site-header.tone-ready :is(.lang-switch, .nav-toggle) {
    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,
      scale 260ms cubic-bezier(.22,1,.36,1), opacity 260ms cubic-bezier(.22,1,.36,1); }
  html:not(.wa-still) .site-header :is(.lang-switch, .nav-toggle):active { scale: .96; opacity: .86; }
  html:not(.wa-still):root .emblem {
    transition: scale 260ms cubic-bezier(.22,1,.36,1), opacity 260ms cubic-bezier(.22,1,.36,1) !important; }
  html:not(.wa-still):root :has(> .r27-tile:active) > .emblem { scale: .96; opacity: .9; }
}
html.wa-still .wodc .wodc-launch:active, html.wa-still .site-header :is(.lang-switch, .nav-toggle):active { scale: none; }
/* ===== end ux 30.10 ===== */

/* ===== first paint (חזי, 30.10.2026 ~21:00, Yoav 20:47/20:49: "the background and elements load late") =====
   Every page already paints #050506 on html/body from the first byte (inline <style id="crit"> in <head>) and the
   a11y widget applies saved settings with a blocking <head> script, so there is never a light flash.
   Home: a static poster of the 3D stage's own first frame (stage_poster_d/m.webp, ~2.5 KB, preloaded with
   fetchpriority=high) sits behind the canvas from the first paint; the canvas fades in over it (opacity only, as
   style.css), then the poster is dropped (opacity) once the canvas is in. Hidden for forced colours / Hide images / print. */
.stage-poster { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #050506 url(../brand/stage_poster_d.webp) center / cover no-repeat; }
@media (max-width: 760px) { .stage-poster { background-image: url(../brand/stage_poster_m.webp); } }
body:has(> .stage.is-ready) > .stage-poster { opacity: 0; transition: opacity .4s linear 1s; }
html.no-webgl .stage-poster { opacity: 1; }
@media (prefers-reduced-motion: reduce) { body:has(> .stage.is-ready) > .stage-poster { transition: none; } }
html.wa-still body:has(> .stage.is-ready) > .stage-poster { transition: none; }
html.wa-noimg .stage-poster { background-image: none; }
@media (forced-colors: active), print { .stage-poster { display: none; } }
.stage { transition: opacity .8s cubic-bezier(.22,1,.36,1); }
/* ===== end first paint ===== */

/* ===== no decorative motion (חזי, 30.10.2026 ~21:08, Yoav 21:00: nothing floating/drifting) =====
   The inner-page light beam drift, the hero symbol's slow turn / halo breathing / scroll parallax and the card
   emblems' float are stopped (static, in place: no empty gaps). The door (scene3d.js) is untouched. */
html .glow-beam, html .symbol-depth, html .symbol-depth .symbol, html .symbol-halo, html .emblem { animation: none !important; }
/* ===== end no decorative motion ===== */

/* ===== follow-up 21:15 (siteqa_first_run + Yoav) ===== */
/* (2) first paint = final paint: metric-matched fallbacks, so the text has the same width and line height before the
   web font arrives (font-display: swap stays; measured on the hero text: Assistant ~83.5% of Arial/Liberation width,
   Inter Tight ~96.4%; ascent/descent from the fonts' own hhea, divided by the size-adjust). */
@font-face { font-family: "Assistant Fallback"; src: local("Arial Hebrew"), local("ArialHebrew"), local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 83.5%; ascent-override: 122.3%; descent-override: 34.4%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"), local("Helvetica Neue");
  size-adjust: 96.4%; ascent-override: 100.5%; descent-override: 25%; line-gap-override: 0%; }
:root {
  --font-he-display: "Assistant", "Assistant Fallback", "Heebo", "Arial Hebrew", ui-sans-serif, system-ui, sans-serif;
  --font-he-body: "Assistant", "Assistant Fallback", "Heebo", "Arial Hebrew", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter Tight", "Inter Tight Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter Tight", "Inter Tight Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* (3) the header logo swaps between its dark/light versions instantly (no opacity fade) */
html .site-header .r2-logo img, html .site-header.tone-ready .r2-logo img { transition: none !important; }
/* (1) no band above the header at any scroll position: the pill keeps its 12px (8px phone) margin at the top of the
   page, but sticks flush to y=0 once the page scrolls (top: 0 instead of 12px/8px), so nothing shows above it; its
   top corners square off there so no content peeks through the corners. */
html body .site-header { top: 0; }
html body .site-header.is-scrolled { border-start-start-radius: 0; border-start-end-radius: 0; }
/* (4) footer paragraphs: full-strength ink on the white glass (was a mid grey on part of the frosted surface) */
:root:root .site-footer:not(.is-night) p { color: rgb(31 31 34); }
:root:root .site-footer.is-night p { color: rgb(235 235 240); }
/* ===== end follow-up 21:15 ===== */
/* (2b) home first paint (siteqa: "black, then blue"): the night-blue under the hero came only when the 3D went live
   (html.scene-live.tone-hero, ~1s+ on a slow phone), so the first frames were #050506. The home page now paints the
   same navy from the first frame (CSS is render-blocking), with or without the 3D; the canvas fades in over it. The
   earlier static stage poster is dropped (it was darker than the live scene and covered the navy). */
html:not(.scene-live):has(#hero-title), html:not(.scene-live):has(#hero-title) body { background-color: #062341; }
@media (forced-colors: active) { html:not(.scene-live):has(#hero-title), html:not(.scene-live):has(#hero-title) body { background-color: Canvas; } }

/* ===== follow-up 21:35 (חזי): the header is flush (top 0, 58px row) once scrolled, so the a11y trigger docked in it
   (round2_widget.css, inside the widget's shadow root; custom properties inherit through it) re-centres on the row:
   (58 - 44) / 2 = 7px instead of 18px, so it never pokes 4px below the header over page text. ===== */
html:has(.site-header.is-scrolled) { --wod-trig-top: 7px; }
@media (min-width: 761px) { html:has(.site-header.is-scrolled) { --wod-trig-top: 5px; } }

/* ===== siteqa 22:20 (חזי): phone a11y trigger moves from the header row to the chat button's corner, above it
   (round2_widget.css). HE: the chat button is bottom-left (inline-end in RTL); EN: bottom-right. The logo no longer
   reserves the trigger's 46px in the header. Header: no light rim on its top edge (it is flush with the screen top,
   siteqa "top 4px row"). The H1 lines are inline with a forced break (same 2 lines; one line box per line). ===== */
html[dir="rtl"] { --wod-trig-left: 16px; --wod-trig-right: auto; }
html[dir="ltr"], html:not([dir]) { --wod-trig-left: auto; --wod-trig-right: 16px; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1020px) {
  :root:root .site-header a.brand { margin-inline-start: calc(-1 * var(--space-xs)); }
}
:root:root .site-header { border-top-color: transparent !important; box-shadow: 0 18px 40px -24px rgb(5 5 6 / .7) !important; }
:root:root .site-header.is-light { box-shadow: 0 18px 40px -26px rgb(5 5 6 / .3) !important; }
html:lang(he) .hero h1#hero-title > .h1-l { display: inline !important; white-space: nowrap; }
html:lang(he) .hero h1#hero-title > .h1-l:first-child::after { content: "\A"; white-space: pre; }

/* clip 23:16 (Yoav 22:09 rule): each card's design stays inside its own card; the footer's .glow streaks are clipped to
   the footer's rounded box, nothing reaches the gap or the CTA card. Everything else above is the 467f70cb code verbatim. */
:root:root .site-footer { overflow: clip; isolation: isolate; }

/* copy audit 9b0d084 dev note (כותב/מבקר #34): no single word on the last line of headings and FAQ questions.
   Wrapping only, no size/colour change. */
h1, h2, h3, details > summary { text-wrap: balance; }

/* round-next 00:50 (Yoav): phone, closing card #start: shadow without the two deep outer layers (dark band above the footer) */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
:root:root .into-light > #start.section:last-child > .container:not(:has(.split)) {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .95), inset 0 2px 1px -1px rgb(255 255 255 / .75),
    inset 0 -1px 0 rgb(0 0 0 / .1), inset 0 -3px 2px -2px rgb(0 0 0 / .07),
    inset 0 16px 22px -18px rgb(255 255 255 / .9),
    inset 0 -18px 24px -20px rgb(0 0 0 / .14),
    inset 12px 0 18px -18px rgb(255 255 255 / .5), inset -12px 0 18px -18px rgb(255 255 255 / .35),
    0 1px 1px rgb(0 0 0 / .08), 0 3px 6px -2px rgb(0 0 0 / .09); } }
/* round-next 00:50 (Yoav): header logo fades with the bar (same timing token), logo images only */
html .site-header.tone-ready .r2-logo img { transition: opacity var(--dur-micro, 120ms) linear !important; }

/* ===== hero copy (Yoav 31.10.2026 14:20/14:29/14:39, HE home only): "פעם בתביעות. פעם בלקוחות." in bold, then a
   two-sentence explanation with no amounts, then the law line and the code line. Sizes are multiples of the other
   running ledes' size (desktop 23px, phone 14.28px at 393): the bold line x1.12; the explanation, the law line and the
   code line x1.22 (--hc-why-k; the largest that keeps the explanation's desktop line count). Phone only: those three
   paragraphs drop the 48px chat-lane padding and use the full container width (20px from each screen edge at 375/393,
   22px at 430), so the stretch takes 4 lines (2+1+1) instead of 5. Desktop widths, EN and inner pages untouched. */
html:lang(he) .hero .hero-copy > p.lede.hc-twice { --hc-k: 1.12; }
html:lang(he) .hero .hero-copy > p.lede:is(.hc-why, .hc-law, .hc-code) { --hc-k: var(--hc-why-k, 1.22); line-height: 1.5; text-wrap: pretty; }
html:lang(he) .hero .hero-copy > p.lede:is(.hc-twice, .hc-why, .hc-law, .hc-code) { font-size: calc(var(--hc-k) * clamp(1.1875rem, 1rem + .5vw, 1.4375rem)); }
@media (max-width: 600px) {
  html:lang(he) .hero .hero-copy > p.lede:is(.hc-twice, .hc-why, .hc-law, .hc-code) { font-size: calc(var(--hc-k) * clamp(14px, calc((100vw - 136px) / 18), 16px)); }
  html:lang(he) .hero .hero-copy > p.lede:is(.hc-why, .hc-law, .hc-code) { padding-inline: 0 !important; max-width: none; }
}

/* ===== Safari 26 toolbar tint (Yoav 31.10.2026 15:19): ui.js adds <div class="wod-tint"> and sets its colour to what is
   behind the bottom edge (navy hero / light room). iOS 26 Safari paints the bottom toolbar from the background-color of
   a fixed box at the bottom edge (> 10px tall, >= 90% wide); the mask keeps the strip itself invisible on the page and
   pointer-events: none keeps taps going to the page. */
.wod-tint { position: fixed; left: 0; right: 0; bottom: 0; height: 12px; z-index: 2147483647; pointer-events: none;
  background-color: #062341; -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent); }
/* themecolor2: same fade as the header's own background (.site-header.tone-ready: background-color .12s linear), so the
   top bar and the bottom toolbar change together; none when the header's transitions are off (html.wa-still). */
.wod-tint.tone-ready { transition: background-color .12s linear; }
html.wa-still .wod-tint { transition: none; }
@media print { .wod-tint { display: none; } }

/* ===== uifix1 (Yoav 31.10.2026, desktop video): no typing caret on plain text =====
   With Chrome's caret browsing on (F7) a click on any text placed a blinking caret there, and the site painted it in
   the accent blue (style.css: caret-color on body / .into-light / the light header), so it looked like a text field.
   Plain text now has a transparent caret; real fields (inputs, textareas, contenteditable) keep the same blue caret
   as before. Focus outlines are unchanged. */
/* --wod-caret keeps each field's old caret colour: resolved where style.css set caret-color, then inherited */
:root body { --wod-caret: var(--accent-night); caret-color: transparent; }
:root .into-light, :root .site-header.is-light { --wod-caret: var(--accent); caret-color: transparent; }
:root :is(input, textarea, [contenteditable]:not([contenteditable="false"])) { caret-color: var(--wod-caret, auto); }
/* fix2110 (Yoav 31.10 21:03): footer "Open accessibility menu" / "פתיחת תפריט הנגישות". A real <button data-wod-a11y-open>
   (wod-a11y.js shows the hidden trigger again and opens the panel); drawn exactly like the footer links beside it. */
:root .site-footer .footer-grid li > .wa-reopen { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; -webkit-appearance: none; appearance: none; font: inherit; line-height: inherit; letter-spacing: inherit;
  text-align: start; color: #001f45; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .22em; cursor: pointer; }
:root .site-footer .footer-grid li > .wa-reopen:hover { text-decoration-thickness: .1em; }
:root .site-footer.is-night .footer-grid li > .wa-reopen { color: var(--on-night); }