/* ═══════════════════════════════════════════════════════════════════════════
   hiw-showcase.css — "How it works" rotating screenshot showcase.

   Production port of
   design_handoff_hiw_showcase/How It Works - {Light,Dark}.dc.html.
   Every value is transcribed from the comps' inline styles. Colours are
   literal hex/rgba held in component-scoped custom properties declared on
   .hiw[data-variant=...] — that keeps ONE structural rule set for both
   variants. landing.css's token system is deliberately not used (comp-hex
   doctrine: the comp is the palette source).

   Tiers:
     >= 1192px  the comp, verbatim.
     961–1191px comp layout with the right column allowed to squeeze — a
                web-lane addition; the comp's 640px column min would push a
                horizontal page scrollbar at these widths.
     <= 960px   stacked single column — web-lane addition (the comp is
                desktop-only).
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted display serif (home-page integration, 2026-08-12) ────────
   The comp (and the review harness) load Playfair Display 700 from Google
   Fonts; the home page self-hosts every font file (index-v3.css precedent —
   latin static instance pulled once from the css2 endpoint, served from this
   origin, no Google Fonts request at runtime). Same face, same rendering. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/playfair-display-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Self-hosted Caveat for the hand-drawn shot labels — same face and file the
   home page already carries (index-v3.css founder-letter margin notes); the
   harness doesn't load index-v3.css, so the face is declared here too. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Variant palettes ─────────────────────────────────────────────────── */
/* A11y-forced deviations from the comp (WCAG AA, same precedent as the v3
   home's step kickers, 2026-08-06), re-tuned 2026-08-13 against the R1
   after-hero review (reviews/hiw-after-hero-r1-2026-08-13.md). Every ratio
   below is measured against the SHIPPED ground, not the comp's:
     light ground  #F2F2F0 → #F6F2EB — the story section's rendered cream
                   (#faf8f4 + 0.35 grain, sampled). R1 23: the HIW→story seam
                   was a 1.03:1 cool-grey/warm-cream misregistration; the two
                   grounds now merge and the scene panel does the separating.
     light accent  #B85A3E → #9B4530 @ 5.72 ground / 5.08 active band
                   (R1 6: #AE553B was 4.09:1 on the band — AA fail at 11px)
     light num-off #9AA5B1 → #58616E @ 5.62   (R1 8)
     light desc-off#8A93A0 → #58616E @ 5.62   (R1 8)
     light row-on  α .07  → α .10 — reads as a band on cream (R1 13)
     light track   α .12  → α .20 — the inter-step rule survives cream (R1 27)
     light fill    α .75  → α .90 @ 3.16 vs row field (WCAG 1.4.11)
     dark  ground  #363A4A → #333F4E — steel-blue family, not a second
                   palette (R1 2); every dark ink below is re-derived from it
     dark  accent  #F2A05B → #F6B27A @ 4.62 on the α.14 active band (the
                   α.09→.14 warmth bump lightened the band; accent + fill
                   re-derived for it — R4 gate)
     dark  fill    α .75  → α .85 @ 3.33 vs the α.14 band (WCAG 1.4.11)
     dark  title-off#97A1B2 → #C9D0DA (R2 hierarchy step)
     dark  num-off  #6E7788 → #B4BBC6 @ 5.54  (R1 8/28)
     dark  desc-off #7E8798 → #B4BBC6 @ 5.54  (R1 8/28)
   Everything else is the comp verbatim.
   2026-08-12 trial (Skip): the four shots now sit in ONE uniform frame
   (.hiw__frame, cover-cropped with a per-shot zoom into the app) instead of
   the comp's four free-floating sizes, so --hiw-shot-shadow is a box-shadow
   on the opaque frame rather than the old filter: drop-shadow(). */
.hiw,
.hiw[data-variant="light"] {
  --hiw-ground: #F6F2EB;
  --hiw-accent: #9B4530;
  --hiw-ink: #0b0b0b;
  --hiw-body: #3C4A59;
  --hiw-num-off: #58616E;
  /* R2: C8's contrast bump flattened title vs description on inactive rows —
     the title takes one step more ink so it still leads. */
  --hiw-title-off: #444E5A;
  --hiw-desc-on: #4A5561;
  --hiw-desc-off: #58616E;
  --hiw-row-on: rgba(184, 90, 62, 0.10);
  --hiw-track: rgba(184, 90, 62, 0.20);
  --hiw-fill: rgba(184, 90, 62, 0.9);
  --hiw-panel-border: #E5E7EB;
  --hiw-panel-shadow: 0 24px 48px -16px rgba(36, 50, 63, 0.20);
  --hiw-shot-shadow: 0 22px 26px rgba(36, 50, 63, 0.30);
}

.hiw[data-variant="dark"] {
  --hiw-ground: #333F4E;
  --hiw-accent: #F6B27A;
  --hiw-ink: #F5F2EC;
  --hiw-body: #C3CBD8;
  --hiw-num-off: #B4BBC6;
  --hiw-title-off: #C9D0DA;
  --hiw-desc-on: #C3CBD8;
  --hiw-desc-off: #B4BBC6;
  /* R2: at .09 the amber overlay composites to a neutral gray lift; .14 keeps
     the active row reading warm like light's terracotta band. */
  --hiw-row-on: rgba(242, 160, 91, 0.14);
  --hiw-track: rgba(242, 160, 91, 0.14);
  --hiw-fill: rgba(242, 160, 91, 0.85);
  --hiw-panel-border: rgba(255, 255, 255, 0.08);
  --hiw-panel-shadow: 0 30px 60px -16px rgba(0, 0, 0, 0.5);
  /* R1 3/25: the terminal frame's lower-left dissolved into the night scene.
     A 1px light ring holds the window edge; the drop shadow carries more. */
  --hiw-shot-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 26px 34px rgba(0, 0, 0, 0.55);
}

/* ── Section shell ────────────────────────────────────────────────────── */
.hiw,
.hiw *,
.hiw *::before,
.hiw *::after { box-sizing: border-box; }

.hiw {
  width: 100%;
  /* Comp behaviour: the section grows to its own min-content width so its
     ground still paints edge-to-edge behind any horizontal overflow. */
  min-width: fit-content;
  padding: 76px 72px 84px;
  background: var(--hiw-ground);
  font-family: Inter, system-ui, sans-serif;
  /* The comp inherited 1.6 from its host page; baking it in keeps the rows
     and the eyebrow at the comp's heights on any host. */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* R1 1/22: on the dark variant the hero→HIW seam was a ~1.0–1.6:1 dark-on-dark
   value step whose character changed three times across a 1440 viewport — it
   read as an image crop, not a section break. Two moves make the boundary
   deliberate at every x: an amber hairline keyed to the variant accent (a hue
   contrast the hero's teal floor cannot swallow), and a 64px wash that steps
   the ground down toward the hero's own darkest value before it opens out.
   The bottom hairline does the same job for the HIW→proof seam at mobile.
   Both are scoped to data-variant="dark" — inert on production (light). */
.hiw[data-variant="dark"] {
  /* Inset shadows, not borders: borders added 2px of layout height and threw
     the two variants out of pixel parity below the section (VRT diff noise). */
  box-shadow: inset 0 1px 0 rgba(242, 160, 91, 0.35), inset 0 -1px 0 rgba(242, 160, 91, 0.35);
  background-image: linear-gradient(to bottom, rgba(16, 27, 38, 0.35), rgba(16, 27, 38, 0) 64px);
}

.hiw__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px minmax(640px, 1fr);
  gap: 48px;
  align-items: stretch;
}

/* ── Left column ──────────────────────────────────────────────────────── */
.hiw__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hiw__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hiw-accent);
}

.hiw__title {
  margin: 14px 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--hiw-ink);
  text-wrap: pretty;
}

.hiw__lede {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--hiw-body);
  text-wrap: pretty;
}

.hiw__lede + .hiw__lede { margin-top: 10px; }

/* Pinned to the bottom of the column (comp: margin-top auto). */
.hiw__steps {
  margin: auto 0 0;
  padding: 32px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Step rows ────────────────────────────────────────────────────────── */
.hiw__step {
  display: block;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 1.5s ease;
}

.hiw__step.is-active { background: var(--hiw-row-on); }
.hiw__step:focus-visible { outline: 2px solid var(--hiw-accent); outline-offset: 2px; }

.hiw__step-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.hiw__step-num {
  flex: none;
  width: 20px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--hiw-num-off);
  transition: color 1.5s ease;
}

.hiw__step-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--hiw-title-off);
  transition: color 1.5s ease;
}

.hiw__step-desc {
  display: block;
  margin: 5px 0 0 32px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--hiw-desc-off);
  transition: color 1.5s ease;
  text-wrap: pretty;
}

.hiw__step.is-active .hiw__step-num { color: var(--hiw-accent); }
.hiw__step.is-active .hiw__step-title { color: var(--hiw-ink); }
.hiw__step.is-active .hiw__step-desc { color: var(--hiw-desc-on); }

/* The track doubles as the rule between steps: on an inactive row it reads as
   a divider, on the active row the fill runs across it. R1 11/12/24: drop the
   rule where it is drawn as a divider and shouldn't be — inside the active
   row's tinted card, and trailing off the bottom of the last row. The fill is
   a child of the track, so it still animates in both cases. */
.hiw__track {
  display: block;
  margin: 9px 0 1px 32px;
  height: 2px;
  border-radius: 999px;
  background: var(--hiw-track);
  overflow: hidden;
}

.hiw__step.is-active .hiw__track,
.hiw__steps > li:last-child .hiw__track { background: transparent; }

.hiw__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--hiw-fill);
  transform: scaleX(0);
  transform-origin: left;
}

/* Started (and restarted) by the script, which sets the shorthand with the
   configured duration. */
@keyframes hiw-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ── Right column — scene panel ───────────────────────────────────────── */
.hiw__scene {
  position: relative;
  min-height: 640px;
  border: 1px solid var(--hiw-panel-border);
  border-radius: 16px;
  box-shadow: var(--hiw-panel-shadow);
  overflow: hidden;
}

.hiw__backdrop {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Uniform shot frame (2026-08-12 trial). Every screenshot presents at the
   same size; object-position + a per-shot scale zoom the app's key region
   into the frame. The frame owns the entrance (opacity/translate) so the
   zoom transform on the img inside never fights the transition. */
.hiw__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(680px, 84%);
  aspect-ratio: 34 / 23;
  margin: 0;
  transform: translate(-50%, -50%) translateY(8px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--hiw-shot-shadow);
  opacity: 0;
  transition: opacity 1.5s ease, transform 1.5s ease;
  pointer-events: none;
}

.hiw__frame.is-active {
  opacity: 0.92; /* the comp's deliberate slight transparency */
  transform: translate(-50%, -50%) translateY(0);
}

.hiw__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Per-shot crop anchors: each frames the app's proof region.
   01 terminal: full prompt-to-running transcript, window dots kept.
   02 agent panel (portrait): checklist + "Validation complete 28/28".
   03 portal: zoom past the nav sidebar onto the success card.
   04 report (portrait): headline, success badge, stats row. */
.hiw__frame--1 .hiw__shot { object-position: 12% 50%; }
.hiw__frame--2 .hiw__shot { object-position: 50% 72%; }
.hiw__frame--3 .hiw__shot { object-position: 100% 28%; transform: scale(1.13); transform-origin: 100% 28%; }
/* 30% starts the band just below the report letterhead (a 10% crop sliced
   through its text) so it runs badge → headline → stats row cleanly. */
.hiw__frame--4 .hiw__shot { object-position: 50% 30%; }

/* ── Hand-drawn labels ────────────────────────────────────────────────────
   Each shot's step title, hand-written over the scene's sky band with an
   inked arrow to the frame. One color per variant — the palette ink — which
   is dark pen on the light scene's pale sky and chalk on the dark scene's
   night sky. Decorative duplicates of the step titles: aria-hidden. */
.hiw__note {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--hiw-ink);
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
}

.hiw__note.is-active { opacity: 1; }

.hiw__note-text {
  font-family: Caveat, cursive;
  font-weight: 700;
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.05;
  white-space: nowrap;
}

.hiw__note-arrow { flex: none; margin-top: 14px; }

/* Right-side notes read text-first, arrow diving down-left after it. */
.hiw__note--2 .hiw__note-arrow,
.hiw__note--4 .hiw__note-arrow { order: -1; }

.hiw__note--1 { left: 5%; top: 20px; transform: rotate(-2.5deg); }
.hiw__note--2 { right: 6%; top: 16px; transform: rotate(1.8deg); }
.hiw__note--3 { left: 9%; top: 26px; transform: rotate(-1.2deg); }
.hiw__note--4 { right: 9%; top: 22px; transform: rotate(2.2deg); }

/* ── Tablet landscape: keep the comp layout, drop the scrollbar ───────── */
@media (max-width: 1191px) and (min-width: 961px) {
  .hiw {
    min-width: 0;
    padding-left: 40px;
    padding-right: 40px;
  }
  .hiw__inner { grid-template-columns: 360px minmax(0, 1fr); }
}

/* ── Stacked: copy, steps, scene ──────────────────────────────────────── */
@media (max-width: 960px) {
  .hiw {
    min-width: 0;
    padding: 64px 40px 72px;
  }
  .hiw__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  /* R1 9: the single column runs the lede out to ~90ch. */
  .hiw__lede { max-width: 62ch; }
  .hiw__steps { padding-top: 24px; }
  /* R1 10: the rule sat inset 46px from the active row's band edges. The
     row's own 14px padding is cancelled so it runs the full band width. */
  .hiw__track { margin-left: -14px; margin-right: -14px; }
  /* R1 4: stacked, the scene leaves only ~46px of sky above the shot frame, so
     note 01's arrowhead landed inside the terminal's near-black chrome at
     ~1.5:1. R1's captures froze on step 01; clicking through 02–04 at 768 shows
     all four notes dipping into frame chrome, so the fix is on .hiw__note, not
     just --1: raise every note to the scene's top edge and shorten the arrow
     so each arrowhead terminates on scene ground above the frame. */
  .hiw__note { top: 0; }
  .hiw__note-arrow { width: 34px; height: 31px; margin-top: 6px; }
  .hiw__scene { min-height: 480px; }
  /* The 3:2 scene crops to a narrow band at phone aspect; bias right so the
     sun/moon disc (upper-right in both scenes) stays in frame. */
  .hiw__backdrop { object-position: 75% 50%; }
}

@media (max-width: 640px) {
  /* R1 14: was 56 top / 64 bottom — the block read lopsided at phone. */
  .hiw { padding: 64px 20px; }
  .hiw__title { font-size: 30px; }
  .hiw__scene { min-height: 380px; }
  .hiw__note-arrow { width: 38px; height: 35px; margin-top: 10px; }
}

/* ── Reduced motion: instant swaps, rows still clickable ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .hiw__step,
  .hiw__step-num,
  .hiw__step-title,
  .hiw__step-desc,
  .hiw__frame,
  .hiw__note { transition: none; }
  .hiw__fill { animation: none !important; }
}

/* ── Roadmap line (home integration, 2026-08-21) ──────────────────────
   One sentence under the copy/scene grid, set between two full-width
   1px rules (no label) — single line ≥961px (vw-scaled so it always
   fits), wrapping and 17px below. Links open the #rm-lb lightbox
   (index-v3.css/.js); each href is the real page for no-JS visitors.
   Colours ride the variant palette; the rules are ink-tint literals that
   only ship on the light variant. */
.hiw__roadmap {
  max-width: 1300px; margin: 64px auto 0; padding: 26px 0;
  border-top: 1px solid rgba(11, 11, 11, 0.16);
  border-bottom: 1px solid rgba(11, 11, 11, 0.16);
}

/* Type mirrors the home page's .quote-strip divider (Skip 8/21): same serif
   italic voice, same 17px cap and #22303D ink, so the two bands read as one
   family. Links take the quote's bold dark ink + the terracotta underline;
   15px floor (vs the quote's 13px) keeps the phone tap targets honest. */
.hiw__rm-line {
  margin: 0; text-align: center;
  font-family: 'Source Serif 4', Georgia, serif; font-style: italic;
  font-size: clamp(15px, 1.28vw, 17px); line-height: 1.55;
  color: #22303D; text-wrap: pretty;
}
@media (min-width: 961px) { .hiw__rm-line { white-space: nowrap; } }

.hiw__rm-line a {
  color: #0b0b0b; font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: rgba(155, 69, 48, 0.45); text-underline-offset: 4px;
  transition: color 0.25s ease, text-decoration-color 0.25s ease, background-color 0.25s ease;
  padding: 1px 2px; margin: -1px -2px; border-radius: 4px;
  -webkit-tap-highlight-color: rgba(184, 90, 62, 0.18);
}
.hiw__rm-line a:hover,
.hiw__rm-line a:focus-visible { color: var(--hiw-accent); text-decoration-color: var(--hiw-accent); background: var(--hiw-row-on); }
.hiw__rm-line a:focus-visible { outline: 2px solid var(--hiw-accent); outline-offset: 3px; }