/* copied from APPROVED/home/src/css/approved.css by contact-template/tools/sync.mjs (Y4, 2026-10-23) */
/* APPROVED homepage: page-level css (R3-A, 2026-10-23). Loads LAST, after A.css, B.css and C.css (each pruned to its picks).
   Every selector stays scoped to a [data-variant] (the module contract), no @keyframes, no animation declarations.
   1. the gallery hybrid  2. ground rhythm re-balance  3. cross-variant seams. Each change is listed in ../DESIGN-SPEC.md. */

/* ---------- 1. the gallery hybrid: C at 768 px and up, A below ----------
   Only one half is live (approved.js parks the other in a <template>). Guard: if both halves are ever live at once (e.g. a
   script failed half-way), the inactive one is display:none, so it is out of the accessibility tree and never a second H2. */
[data-variant="C+A"].rv-gallery-hybrid { display: block; position: relative; margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
@media (max-width: 767.98px) {
  [data-variant="C+A"]:has(> [data-gallery-half="A"]:not(template)) > [data-gallery-half="C"] { display: none; }
}
@media (min-width: 768px) {
  [data-variant="C+A"]:has(> [data-gallery-half="C"]:not(template)) > [data-gallery-half="A"] { display: none; }
}

/* ---------- 2. ground rhythm re-balance (background token only, plus what that ground needs) ----------
   As mixed: paper · stone · INK · paper · INK · paper · paper · stone · paper · paper · paper · stone · paper · INK (footer stone).
   No two ink bands touch. One run of three identical light grounds: process (A, paper) · paying (B, paper) · gallery (C/A,
   paper). G1: Paying for care (B) moves to stone; its text is --fg / --fg-muted (4.9:1 on stone, AA), the ink ticker ribbon
   is unchanged. Result: paper · stone · INK · paper · INK · paper · paper · stone · paper · STONE · paper · stone · paper · INK. */
[data-variant="B"].v1b-pay { background: var(--bg-2); --rings-gap: var(--bg-2); }

/* ---------- 3. cross-variant seams (token level only; every section keeps its idea and its signature move) ----------
   S1. One eyebrow idiom: A's micro-pill (9 of 14 slots are A). B's kicker keeps its open-ring glyph + accent dot but takes the
       pill shell, full-strength text and the shared --utility-track (.14em; B set .16em, muted).
   S2. C's margin note heading the gallery band (>=768 px) takes the same pill; its hairline lead-in is dropped inside the pill.
   S3. C's gallery H2 follows the page H2 scale (--h2-size, 40 to 80 px; C set its own 38 to 66 px). */
[data-variant="B"] .v1b-kicker,
[data-variant="C"] .v1c-room-head > .v1c-mnote {
  padding: 9px 16px 9px 12px; border-radius: var(--r-pill); letter-spacing: var(--utility-track); line-height: 1.2;
  color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 9%, transparent);
  margin-bottom: 28px;
}
[data-variant="B"].v1b-ink .v1b-kicker { color: var(--fg-on-ink); background: rgba(237, 236, 236, .06); box-shadow: inset 0 0 0 1px rgba(237, 236, 236, .1); }
[data-variant="C"] .v1c-room-head > .v1c-mnote { display: inline-flex; justify-self: start; padding-left: 16px; }
[data-variant="C"] .v1c-room-head > .v1c-mnote::before { display: none; }
[data-variant="C"][data-gallery-half="C"] { --v1c-h2: var(--h2-size); }

/* ---------- 4. X1 2026-10-23: owner review changes ----------
   R1. "Individual experiences vary." under the reviews (home-proof-wall, A, ink): the section's utility style (the quote-note
       caps: Manrope 600, 12 px, .14em), muted on ink (#BDBAB0 on #191919), inside the section, always visible (no reveal). */
[data-variant="A"] .v1-proof-fine { margin: 32px 0 0; max-width: none; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-on-ink-muted); }

/* R2. Audience images in "Built for people who refuse to slow down." (home-condition-router, A).
   Default (JS off, reduced motion, touch / coarse pointer, or below 1024 px): a small double-bezel 4:5 thumbnail in every row,
   in the warm-grey grade of the site's stills. Hover devices at >=1024 px with motion armed (`rv-motion`, set in the head before
   first paint, so no layout shift): the thumbnails are not rendered and A.js builds ONE framed peek that follows the pointer
   inside a section-sized clip box (it can never paint over another section) and cross-fades between the three images. */
[data-variant="A"].v1-who { position: relative; }
[data-variant="A"] .v1-who-row { grid-template-columns: 104px minmax(0, 5fr) minmax(0, 6fr) 56px; }
[data-variant="A"] .v1-who-thumb { grid-column: 1; grid-row: 1; display: block; width: 104px; padding: 5px; border-radius: 20px; background: color-mix(in srgb, var(--fg) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent); }
[data-variant="A"] .v1-who-thumb-core { display: block; aspect-ratio: 4 / 5; border-radius: 15px; overflow: hidden; background: var(--surface); }
[data-variant="A"] .v1-who-thumb img,
[data-variant="A"] .v1-who-peek img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) sepia(.14) contrast(1.03); }
[data-variant="A"] .v1-who-row > .v1-who-k { grid-column: 2; grid-row: 1; }
[data-variant="A"] .v1-who-row > .v1-who-v { grid-column: 3; grid-row: 1; }
[data-variant="A"] .v1-who-row > .v1-who-go { grid-column: 4; grid-row: 1; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  [data-variant="A"]:is(.rv-motion *) .v1-who-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 56px; }
  [data-variant="A"]:is(.rv-motion *) .v1-who-thumb { display: none; }
  [data-variant="A"]:is(.rv-motion *) .v1-who-row > .v1-who-k { grid-column: 1; }
  [data-variant="A"]:is(.rv-motion *) .v1-who-row > .v1-who-v { grid-column: 2; }
  [data-variant="A"]:is(.rv-motion *) .v1-who-row > .v1-who-go { grid-column: 3; }
}
@media (max-width: 767.98px) {
  [data-variant="A"] .v1-who-row { grid-template-columns: 76px minmax(0, 1fr) 48px; gap: 16px 16px; }
  [data-variant="A"] .v1-who-thumb { width: 76px; padding: 4px; border-radius: 16px; }
  [data-variant="A"] .v1-who-thumb-core { border-radius: 12px; }
  [data-variant="A"] .v1-who-row > .v1-who-k { grid-column: 2 / -1; grid-row: 1; align-self: center; }
  [data-variant="A"] .v1-who-row > .v1-who-v { grid-column: 1 / 3; grid-row: 2; }
  [data-variant="A"] .v1-who-row > .v1-who-go { grid-column: 3; grid-row: 2; }
}
/* the peek (built by A.js only in the hover branch; aria-hidden, pointer-events none) */
[data-variant="A"] .v1-who-peek-clip { position: absolute; inset: 0; z-index: 3; overflow: hidden; overflow: clip; pointer-events: none; }
[data-variant="A"] .v1-who-peek { position: absolute; left: 0; top: 0; width: clamp(220px, 18vw, 272px); padding: var(--bezel-pad); border-radius: var(--r-xl); background: color-mix(in srgb, var(--fg) 6%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 9%, transparent), 0 40px 70px -34px rgba(70, 64, 52, .45), 0 12px 28px -16px rgba(70, 64, 52, .25); opacity: 0; visibility: hidden; will-change: transform, opacity; }
[data-variant="A"] .v1-who-peek-core { position: relative; aspect-ratio: 4 / 5; border-radius: calc(var(--r-xl) - var(--bezel-pad)); overflow: hidden; background: var(--surface); }
[data-variant="A"] .v1-who-peek-pic { position: absolute; inset: 0; opacity: 0; visibility: hidden; }