/* === round2 YOAV_REQUIREMENTS (builder, 29.10.2026) ===
   Separate file, loaded after round1cd.css. Does not touch door / threshold / scene / glass backdrop / veil / depth,
   and does not change panel opacity or backdrop-filter (#3/#5 locked by חזי, see GLASS_PROPOSAL.md).
   PHONE query used below = (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1020px)
   Desktop (>=1021px, or fine pointer above 760px) is never matched by the phone blocks.
   #13 R9 header one row · #2 widget button docked in the header on phone · #44 R1 consent error · #27/#28/#25 cards open from icon */

/* ---------- #13 / R9: short language label (markup from apply_round2.py) ---------- */
.ls-short { display: none; }

@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1020px) {
  /* one header row while the menu is closed (the open menu still drops below as before) */
  .header-inner:has(.main-nav:not(.is-open)) { flex-wrap: nowrap; }
  .header-inner > * { flex-shrink: 0; }
  /* menu button: icon only on phone; "תפריט" / "Menu" stays as the accessible name */
  .nav-toggle { padding: 0; justify-content: center; }
  .nav-toggle > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* #2: the widget trigger sits in the header row on the brand side (round2_widget.css), so it never lies over text */
  .site-header .brand { margin-inline-start: 48px; }
  html.r2-nowidget .site-header .brand { margin-inline-start: 0; }
  /* #14 / R10 on phone: remaining text under 16px -> 16px (the wordmark is a logotype; the F3 "before" sample is a
     deliberate bad-page demo and keeps its small text) */
  .lang-switch, .footer-grid h2, .guarantee-scope li, .guarantee-scope-h strong, .src, .src a, .flow li, .small-print, .small-print a,
  .hint, .sim-opt span, .risk-kicker, .form-note, .page-hero .meta, .cmp-tag, .sim-small, .sim-flabel,
  .promise-card .small-print, .guarantee-scope li, .guarantee-scope li + li { font-size: 1rem; }
  /* #14 / R11 on phone: stand-alone targets >= 44px (links inside a sentence are exempt, WCAG 2.5.8) */
  .link-more, .cta-row .btn, .sim-btn, .sim-link { min-height: 44px; }
  .lang-switch { min-width: 44px; justify-content: center; }
  .site-footer li > a { min-width: 44px; }
  /* #44 / R1: consent error gets its own full-width row instead of squeezing the label */
  .site-footer a[href^="mailto:"], .site-footer a[href^="tel:"], .contact-list li > a { display: inline-flex; align-items: center; min-height: 44px; }
  .cmp-tag { border-radius: .9rem; padding: .3rem .65rem; }   /* multi-line pill: corners no longer clip text */
  .check .error-msg { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .header-actions .btn-small { display: none; }         /* was <=420px; 421-480px wrapped the header */
}
@media (max-width: 379px) {
  .lang-switch .ls-full { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lang-switch .ls-short { display: inline; }
  .header-inner { column-gap: .5rem; }
}
@media (max-width: 339px) {
  .site-header .brand { margin-inline-start: 38px; gap: .4rem; }
  .header-inner { column-gap: .25rem; }
  .site-header .brand-word { font-size: .8125rem; }   /* logotype; only below 340px so the row fits with 44px targets */
}

/* ---------- #27 / #28 / #25: cards open from their icon (clip-path), present from the first frame ---------- */
/* round2.js adds html.r2-open and takes over from the fade-up of ui.js (.rv/.in): a card is never transparent.
   A card that is fully off screen is shut back to an icon-sized disc, so the opening replays both ways. */
html.r2-open .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
html.r2-open .rv.r2-shut { clip-path: circle(var(--r2-r0, 46px) at var(--r2-x, 40px) var(--r2-y, 40px)); scale: .97; }
/* fix-round (30 Oct): .72s felt stuck; .45s, cards that open together follow each other 60ms apart (--r2-d, round2.js),
   and the compositor hint only while a card is opening */
html.r2-open .rv.r2-anim { transition: clip-path .45s cubic-bezier(.2, .75, .25, 1) var(--r2-d, 0ms), scale .45s cubic-bezier(.2, .75, .25, 1) var(--r2-d, 0ms) !important; will-change: clip-path, scale;
  clip-path: circle(var(--r2-r1, 150%) at var(--r2-x, 40px) var(--r2-y, 40px)); scale: 1; transform-origin: var(--r2-x, 40px) var(--r2-y, 40px); }
/* fix-round: the columns inside an opening card rise into place one after another (individual `translate`, so the
   r1 tilt `transform` is untouched; never opacity, a column is never see-through). Ends within the card's .45s. */
html.r2-open .rv.r2-shut :is(.promise > .promise-card, .pair > *, .peace-list > li, .steps > li) { translate: 0 14px; }
html.r2-open .rv.r2-anim :is(.promise > .promise-card, .pair > *, .peace-list > li, .steps > li) { translate: none; will-change: translate;
  transition: translate .3s cubic-bezier(.2, .75, .25, 1) calc(var(--r2-d, 0ms) + var(--r2-i, 0) * 50ms); }
html.r2-open .rv :is(.promise, .pair, .peace-list, .steps) > :nth-child(2) { --r2-i: 1; }
html.r2-open .rv :is(.promise, .pair, .peace-list, .steps) > :nth-child(n+3) { --r2-i: 2; }
html.r2-open .rv :is(.peace-list, .steps) > :nth-child(n+4) { --r2-i: 3; }
@media (prefers-reduced-motion: reduce) { html.r2-open .rv.r2-shut, html.r2-open .rv.r2-anim { clip-path: none; scale: none; transition: none !important; }
  html.r2-open .rv :is(.promise > .promise-card, .pair > *, .peace-list > li, .steps > li) { translate: none !important; transition: none !important; } }
html.wa-still .rv { clip-path: none !important; scale: none !important; }
html.wa-still .rv :is(.promise > .promise-card, .pair > *, .peace-list > li, .steps > li) { translate: none !important; transition: none !important; }
@media print { html.r2-open .rv { clip-path: none !important; scale: none !important; } }

/* ---------- round2 logo v2 ('Radiant opening', /workspace/brand/final) ----------
   Dark lockup on the dark bar (#050506), light lockup when ui.js sets .site-header.is-light (light glass over white
   sections). Both images are in the DOM from the first paint (no fetch on switch). The crossfade follows the bar's
   own 1.1s tone transition so the logo never sits light-on-dark; instant in reduced motion / still mode. */
.r2-logo { position: relative; display: block; flex: none; height: 34px; aspect-ratio: 496.3 / 120; }
.r2-logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.r2-logo-light { opacity: 0; }
.site-header.is-light .r2-logo-dark { opacity: 0; }
.site-header.is-light .r2-logo-light { opacity: 1; }
.site-header.tone-ready .r2-logo img { transition: opacity 1.1s cubic-bezier(.45,0,.25,1); }
html.wa-still .r2-logo img { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .r2-logo img { transition: none !important; } }
.r2-footer-logo { margin: 0 0 .5rem; line-height: 0; }
.r2-footer-logo img { display: block; height: 36px; width: auto; max-width: 100%; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1020px) {
  .r2-logo { height: 30px; }                     /* 124px wide: above the 120px lockup minimum */
}
@media (max-width: 339px) { .r2-logo { height: 29px; } }   /* 120px wide = README minimum */
@media print { .r2-logo-dark { display: none; } .r2-logo-light { opacity: 1; } }


/* ===== round3 (reviewer verdict on 3a191a47) — builder, 29.10.2026 ===== */
/* #2: the phone/tablet drop-down menu ends with the scan button (markup: apply_round3.py; label = the header's own) */
.main-nav li.r3-nav-cta { display: none; }
@media (max-width: 1020px) {
  .site-header .main-nav li.r3-nav-cta { display: block; padding-block: .75rem .25rem; border-top: 1px solid rgb(255 255 255 / .08); }
  .site-header .main-nav li.r3-nav-cta > a.btn { width: 100%; border-top: 0; color: #fff; background: var(--accent-fill, #0071e3); font-size: 1.0625rem; font-weight: 600; }
  .site-header.is-light .main-nav li.r3-nav-cta { border-top-color: rgb(0 0 0 / .08); }
  .site-header.is-light .main-nav li.r3-nav-cta > a.btn { color: #fff; }
}
/* #3: header button on phone and touch tablets (iPhone landscape 734px): 16px text, 44px target */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1020px) {
  .header-actions .btn-small { font-size: 1rem; min-height: 44px; padding: .35rem .95rem; white-space: nowrap; }
}
/* #2: a first-screen primary CTA on every phone page: the header scan button is back at all widths (was hidden <=480px);
   room is made with the short language label and, below 370px, the symbol alone (the accessible name of the
   home link is unchanged: sr-only text). The header stays one row down to 320px. */
@media (max-width: 480px) {
  .header-actions .btn-small { display: inline-flex; padding: .35rem .8rem; }
  .lang-switch .ls-full { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lang-switch .ls-short { display: inline; }
  .header-inner { column-gap: .5rem; }
  .header-actions { gap: .5rem; }
}
@media (max-width: 409px) {
  .r2-logo { aspect-ratio: 1 / 1; height: 34px; overflow: hidden; }
  .r2-logo img { inset: 0 auto 0 0; width: auto; height: 100%; aspect-ratio: 496.3 / 120; max-width: none; }   /* the lockup's first 120x120 units are the symbol */
}
@media (max-width: 339px) {
  .r2-logo { height: 32px; }
  .header-actions .btn-small { padding: .35rem .65rem; }
  .header-inner, .header-actions { column-gap: .3rem; gap: .3rem; }
}
/* ===== end round3 ===== */
/* ===== round3 #2b: open phone menu must stay reachable on short (landscape) viewports ===== */
@media (max-width: 1020px) {
  .site-header .main-nav.is-open { max-height: calc(100dvh - 4.5rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
/* ===== end round3 #2b ===== */

/* ---------- round5 (30.10.2026): the full lockup (symbol + 'Wide Open Digital') in the header on every width >= 360px.
   Dark lockup on the dark bar, light lockup when the bar turns light (.site-header.is-light, ui.js), as before.
   Height 30px desktop / 29px phone = 120px wide, the brand README minimum for the lockup (24px would be 99px wide);
   width from the 496.3:120 ratio, set by CSS; the img width/height attributes keep CLS 0.
   Below 360px the symbol alone (the link's accessible name is the sr-only text either way). Always LTR. ---------- */
.r2-logo { direction: ltr; height: 30px; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1020px) {
  .r2-logo { height: 29px; }
}
@media (max-width: 409px) {
  .r2-logo { aspect-ratio: 496.3 / 120; height: 29px; overflow: visible; }
  .r2-logo img { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}
@media (max-width: 359px) {
  .r2-logo { aspect-ratio: 1 / 1; height: 30px; overflow: hidden; }
  .r2-logo img { inset: 0 auto 0 0; width: auto; height: 100%; aspect-ratio: 496.3 / 120; max-width: none; }
}