@charset "UTF-8";
/* ============================================================================
   RavencoreX — Home Premium: Proof of Value + Control Harness (shared)
   Spec: .superpowers/sdd/2026-08-08-home-premium-proof-harness/task-2-brief.md
   Approved spec refs (kept from origin, EN and ES were selector-identical):
     - Section 4 (Proof of Value): docs/superpowers/specs/2026-08-05-home-seccion-4-prueba-de-valor.md
     - Section 5 (Why us / Control Harness): Canvas spec, fuses former "edge"
       wedge with the 5-pillar harness list + BigQuery proof point.
   Extracted verbatim (Task 2 — pure refactor, no visual changes) from the
   duplicated inline <style> blocks in public/index.html and public/es/index.html.
   Loaded by both EN and ES homes via the deferred stylesheet pattern; do NOT
   duplicate these rules back into either page's inline <style> block.
   ============================================================================ */

    /* --------------------------------------------------------------------
       SECTION 4 — Proof of Value + embedded form
       Canvas spec docs/superpowers/specs/2026-08-05-home-seccion-4-prueba-de-valor.md
       Materials: exactly ONE box in the whole section, the form. Everything
       else is organised with hairlines, 2px top rules and air, so the white
       panel is the only figure on the azure-50 field and cannot be missed
       even though it sits at the bottom.
       -------------------------------------------------------------------- */
    .home-method{position:relative;overflow:hidden;background:var(--color-azure-50)}
    .home-method::before{content:"";position:absolute;inset:-5%;background:radial-gradient(circle at 55% 32%,rgba(12,130,245,.13),transparent 34%),linear-gradient(rgba(12,130,245,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(12,130,245,.045) 1px,transparent 1px);background-size:auto,44px 44px,44px 44px;pointer-events:none}
    .home-method>.rcx-container{position:relative}
    .home-method__header{max-width:780px}
    .home-method__h2{max-width:15ch;margin-top:var(--space-sm)}
    .home-method__intro{max-width:68ch;margin-top:var(--space-md)}

    /* B. Journey: 3 stations, the central one carries the human image ---- */
    .home-method__journey{list-style:none;margin:var(--space-2xl) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--space-md)}
    .home-method__station{position:relative;min-width:0;padding:var(--space-lg);background:rgba(255,255,255,.70);border:1px solid rgba(12,130,245,.16);box-shadow:0 22px 55px rgba(3,39,73,.08)}
    .home-method__station--human{padding:0;overflow:hidden;background:var(--color-neutral-950);color:var(--color-neutral-0)}
    .home-method__media{display:block;aspect-ratio:16/10;overflow:hidden}
    .home-method__media img{width:100%;height:100%;object-fit:cover}
    .home-method__station--human .home-method__station-copy{padding:var(--space-lg)}
    .home-method__station--human .home-method__seg-title{color:var(--color-neutral-0)}
    .home-method__station--human .home-method__seg-body,
    .home-method__station--human .home-method__seg-label{color:var(--color-neutral-200)}
    .home-method__station--human .home-method__seg-range{color:var(--color-azure-300)}
    .home-method__station--decision{border-color:rgba(233,138,92,.55)}

    /* B2/C. The promise: "what you leave with" + "on what terms", framed as
       ONE unit. Round 2 (owner: "no se entiende") solved fragmentation with
       a single shared top/bottom rule. Round 3 (owner: "no se lee") is a
       legibility problem, not a grouping problem: on the section's own
       azure-50 field, a caption-sized mono kicker and body-sized deliverables
       washed out next to the much larger headline above and "Tell us which
       workflow…" below. Fix: give the whole promise unit its own white
       surface (--radius:0, no shadow — brand rule for cards in this light
       section) so both halves get full-contrast ground, AND make the three
       deliverables the typographic protagonist (was body/14px, now h5/mono
       numerals at real weight) instead of a footnote under the journey. */
    .home-method__promise{margin-top:var(--space-2xl);padding:var(--space-lg);background:var(--color-neutral-0);border:1px solid rgba(12,130,245,.20)}
    @media(min-width:768px){.home-method__promise{padding:var(--space-xl) var(--space-xl) var(--space-2xl)}}
    .home-method__outputs-title{font:700 var(--text-body-sm)/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-azure-700)}
    /* The scope toggle chip was white-on-azure-50 (an intentional "white =
       actionable" signal shared with the journey cards and form panel). Now
       that .home-method__promise itself is white, the chip needs its own
       tint to stay legible as a distinct affordance instead of disappearing
       into the card it sits on. */
    .home-method__promise .home-method__doc-toggle{background:var(--color-azure-50)}
    .home-method__promise .home-method__doc-toggle:hover,
    .home-method__promise .home-method__doc[open] .home-method__doc-toggle{background:var(--color-azure-100)}
    @media(min-width:768px){.home-method__journey{grid-template-columns:1fr 1.35fr 1fr;align-items:stretch}}

    /* --------------------------------------------------------------------
       EVIDENCE RAIL — "what you leave with" as three cards on one causal
       wire (baseline -> comparison -> recommendation), replacing the flat
       01/02/03 list. Original spec: docs/chatgpt/2026-08-10-prueba-valor-
       flujo-evidencia.md. Rebuilt into cards with bigger, legible icons per
       owner brief (2026-08-11: "esta sección hagámoslo con cards y
       mejoremos los iconos") — the previous icons (a pin-like baseline
       mark, an ambiguous comparison glyph, a small coral diamond) were
       both too small and too abstract to read on their own.

       THE WIRE, RESOLVED AGAINST CARDS: rather than float a decorative
       line above three plain text columns (its old relationship to the
       content), the rail now threads literally THROUGH the three cards.
       Each icon sits in a small tile that straddles its card's own top
       border — the same motif .home-who__avatar uses, which since
       2026-08-11 lives at /about (about-leadership.css) rather than two
       sections down this page. The tile is painted
       --color-neutral-0, the same white as .home-method__promise around
       it: it reads as no background at all, while still interrupting the
       1px rail that runs behind it so the wire never crosses a glyph.
       The rail's track + travelling signal live in a zero-height grid row
       (row 1 of a `grid-template-rows:0 auto` track) directly above the
       cards' row (row 2), so the rail's own top edge lands, with no extra
       offset math, exactly on the line the three chips straddle: one wire
       touching all three chips, cards included in the read, not floating
       apart from them.

       ICON LANGUAGE (owner brief 2026-08-11: "fondos negros en los iconos
       no va"): Phosphor Icons, regular weight — chart-line (baseline),
       chart-bar (before/after) and seal-check (the human decision gate).
       MIT licensed, © 2023 Phosphor Icons; the paths are inlined, so the
       set adds no dependency and no extra request. SF Symbols was the
       owner's first reference and is NOT usable here: Apple licenses it
       for apps on Apple platforms only, never for a web surface.
       Colour crossfade stays opacity only, never color/background-color/
       filter (kept from the original rail): the tile itself never
       animates, only the glyph inside it dims (unlit) or brightens (lit)
       as the travelling signal passes.

       CONTRAST, RESOLVED WITHOUT THE DARK TILE: removing the tile puts
       every glyph back on white, where two of the three failed the 3:1
       floor WCAG 1.4.11 sets for graphical objects — --color-data-light
       (#9adffc, a pale accent meant for DARK surfaces) at 1.3:1 and
       --color-human-signal (#E98A5C) at 2.3:1. Neither colour was wrong,
       both were simply being used against the surface they were never
       scaled for. Fixed by moving each to the value of its own family
       that is scaled for light: comparison to --color-azure-700 (4.9:1)
       and the decision gate to --color-warm-500 (4.6:1). Agent blue
       already passed (3.4:1) and is untouched. Both brand tokens keep
       their exact hex and their meaning on dark surfaces elsewhere —
       Human Signal still marks the human moment, only in the shade of
       coral that survives a white background.
       -------------------------------------------------------------------- */
    .home-method__outcome-flow{
      margin-top:var(--space-md);
      --outcome-mark-size:40px;
      --outcome-gap:calc(var(--space-lg) + var(--outcome-mark-size) / 2);
    }
    @media(min-width:768px){.home-method__outcome-flow{--outcome-mark-size:48px}}

    .home-method__outcome-list{list-style:none;margin:var(--outcome-gap) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--outcome-gap)}
    @media(min-width:768px){
      .home-method__outcome-list{position:relative;grid-template-columns:repeat(3,1fr);grid-template-rows:0 auto;column-gap:var(--space-xl);row-gap:0}
    }

    /* Rail: row 1 of the grid above, height 0 by definition, so its
       absolutely-positioned children land with `top:0` exactly on row 2's
       top edge — the cards' shared top border, the same y the three chips
       straddle. Left/right insets are the exact centres of the outer two
       grid columns for THIS column-gap (not the flat 16.666% the pre-card
       rail used, which ignored the gap entirely): for 3 equal columns with
       gap G, the outer column centres sit at 16.666% - G/3 and
       83.333% + G/3 of the row's own width, regardless of that width —
       exact, not eyeballed. */
    .home-method__outcome-rail{display:none}
    @media(min-width:768px){
      .home-method__outcome-rail{display:block;grid-column:1/-1;grid-row:1;position:relative;height:0}
    }
    .home-method__outcome-track,.home-method__outcome-signal{position:absolute;top:calc(-1 * (var(--space-sm) + var(--outcome-mark-size) / 2));left:calc(16.666% - (var(--space-xl) / 3));right:calc(16.666% - (var(--space-xl) / 3));height:1px}
    .home-method__outcome-track{background:var(--color-agent-blue);opacity:.42}
    .home-method__outcome-signal{opacity:0;pointer-events:none}
    .home-method__outcome-signal::before{content:"";position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--color-agent-blue);box-shadow:0 0 0 4px rgba(12,130,245,.18)}

    /* Mobile has no wire (rail stays display:none below 768px, same as the
       original) but stacked cards still need to read as one sequence, not
       three unrelated boxes: a static 1px stem drops from each card's
       bottom edge through the full gap into the next card's chip. No
       travelling dot here — matches the original's mobile behaviour,
       static only, nothing JS-driven below 768px. */
    @media(max-width:767px){
      .home-method__outcome:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:calc(-1 * var(--outcome-gap));width:1px;height:var(--outcome-gap);background:var(--color-agent-blue);opacity:.3}
    }

    /* Card. Esquinas vivas (--radius:0) and no shadow, per brand rule — the
       card reads as a surface + edge, exactly like .home-who__person two
       sections down (same background/border pair, same radius token). */
    .home-method__outcome{position:relative;isolation:isolate;min-width:0;background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-lg) var(--space-md) var(--space-md);text-align:center}
    @media(min-width:768px){.home-method__outcome{grid-row:2}}
    .home-method__outcome--decision{border-color:rgba(233,138,92,.35)}

    /* Chip: the icon's tile, straddling the card's top border (half above,
       half inside — the .home-who__avatar motif, square instead of round
       so the two read as a distinct family: circular photo, square glyph).
       Background never animates (brand rule); only the glyph inside does. */
    .home-method__outcome-mark{position:absolute;top:calc(-1 * var(--space-sm));left:50%;z-index:2;width:var(--outcome-mark-size);height:var(--outcome-mark-size);transform:translate(-50%,-100%);background:var(--color-neutral-0);border-radius:var(--radius)}
    .home-method__outcome-mark svg{position:absolute;inset:0;margin:auto;width:76%;height:76%;fill:currentColor;stroke:none}
    .home-method__outcome-mark-base{color:var(--color-neutral-300)}
    .home-method__outcome-mark-active{opacity:1}
    .home-method__outcome-mark-active--baseline{color:var(--color-agent-blue)}
    .home-method__outcome-mark-active--comparison{color:var(--color-azure-700)}
    .home-method__outcome-mark-active--decision{color:var(--color-warm-500)}
    .home-method__outcome-halo{position:absolute;inset:0;margin:auto;width:var(--outcome-mark-size);height:var(--outcome-mark-size);background:var(--color-warm-500);opacity:0;transform:scale(1)}

    .home-method__outcome-title{margin:var(--space-sm) 0 0;font-size:var(--text-h5);line-height:var(--leading-h5);font-weight:var(--weight-semibold);color:var(--color-neutral-950)}
    .home-method__outcome-body{margin:var(--space-2xs) auto 0;max-width:28ch;font-size:var(--text-body-sm);line-height:var(--leading-body-sm);color:var(--color-neutral-700)}

    /* Final state by default (no JS / reduced motion): active layers already
       "lit". JS primes with .is-flow-ready (hides them) right before running
       the single-pass sequence via .is-flowing; .is-flow-complete locks the
       lit end-state explicitly once the class that drove the animation is
       removed (an animation's forwards fill does not survive its own class
       being removed from the element). */
    .home-method__outcome-flow.is-flow-ready .home-method__outcome-mark-active,
    .home-method__outcome-flow.is-flow-ready .home-method__outcome-signal{opacity:0}
    .home-method__outcome-flow.is-flow-ready .home-method__outcome-track{opacity:.18}

    @media(prefers-reduced-motion:no-preference){
      .home-method__outcome-flow.is-flowing .home-method__outcome-track{animation:rcx-outcome-track-in 200ms var(--easing-out) forwards}
      .home-method__outcome-flow.is-flowing .home-method__outcome-signal{animation:rcx-outcome-signal-travel 1600ms var(--easing-in-out) forwards}
      .home-method__outcome-flow.is-flowing [data-outcome="baseline"] .home-method__outcome-mark-active{animation:rcx-outcome-fade-in 200ms var(--easing-out) 0ms forwards}
      .home-method__outcome-flow.is-flowing [data-outcome="comparison"] .home-method__outcome-mark-active{animation:rcx-outcome-fade-in 200ms var(--easing-out) 700ms forwards}
      .home-method__outcome-flow.is-flowing [data-outcome="decision"] .home-method__outcome-mark-active{animation:rcx-outcome-fade-in 200ms var(--easing-out) 1280ms forwards}
      .home-method__outcome-flow.is-flowing [data-outcome="decision"] .home-method__outcome-halo{animation:rcx-outcome-halo 320ms var(--easing-out) 1280ms forwards}
    }
    .home-method__outcome-flow.is-flow-complete .home-method__outcome-mark-active{opacity:1}
    .home-method__outcome-flow.is-flow-complete .home-method__outcome-track{opacity:.42}
    .home-method__outcome-flow.is-flow-complete .home-method__outcome-signal,
    .home-method__outcome-flow.is-flow-complete .home-method__outcome-halo{opacity:0}

    @keyframes rcx-outcome-track-in{from{opacity:.18}to{opacity:.42}}
    @keyframes rcx-outcome-fade-in{from{opacity:0}to{opacity:1}}
    @keyframes rcx-outcome-halo{
      0%{opacity:0;transform:scale(.7)}
      35%{opacity:.55;transform:scale(1)}
      100%{opacity:0;transform:scale(1.5)}
    }
    /* Single moving element: the wrapper spans the full rail (inset:0), so a
       percentage translate3d on it is relative to the rail's own width — the
       dot itself (::before) never moves, only its wrapper does. 3 equally
       spaced nodes -> 0% / 50% / 100%. */
    @keyframes rcx-outcome-signal-travel{
      0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}
      12.5%{opacity:1;transform:translate3d(0,0,0) scale(1)}
      43.75%{opacity:1;transform:translate3d(50%,0,0) scale(1)}
      48.75%{opacity:1;transform:translate3d(50%,0,0) scale(1)}
      80%{opacity:1;transform:translate3d(100%,0,0) scale(1)}
      100%{opacity:0;transform:translate3d(100%,0,0) scale(1.3)}
    }
    /* Belt-and-suspenders: rcx-method-flow.js already skips adding any class
       when it detects prefers-reduced-motion, so .is-flow-ready never gets
       applied in practice — but if JS's matchMedia check and this @media
       query ever disagreed, this still forces the honest final state. */
    @media(prefers-reduced-motion:reduce){
      .home-method__outcome-mark-active{opacity:1!important}
      .home-method__outcome-track{opacity:.42!important}
      .home-method__outcome-signal,.home-method__outcome-halo{opacity:0!important}
    }

    /* Scope footer — promise + scope control on one row from 768px. Sparse
       grid auto-placement (default, no `dense`) pushes the open <details>
       into a fresh full-width row on its own once it asks for
       grid-column:1/-1, because row 1 / col 1 is already claimed by
       .home-method__doc-lead — no grid-template-areas, no subgrid, no
       display:contents (inconsistent support on <details>) needed. */
    .home-method__scope-footer{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid rgba(12,130,245,.20)}
    @media(min-width:768px){
      .home-method__scope-footer{display:grid;grid-template-columns:1fr auto;column-gap:var(--space-xl);align-items:center}
      .home-method__scope-footer .home-method__doc{justify-self:end}
      .home-method__scope-footer .home-method__doc[open]{grid-column:1 / -1;justify-self:stretch;margin-top:var(--space-lg)}
    }
    @keyframes rcx-method-atmosphere{from{transform:translate3d(-1%,0,0) scale(1.01)}to{transform:translate3d(1%,1%,0) scale(1.03)}}
    @media(prefers-reduced-motion:no-preference){.home-method::before{animation:rcx-method-atmosphere 18s ease-in-out infinite alternate}}
    @media(prefers-reduced-motion:reduce){.home-method::before{animation:none}.home-method__station{transform:none!important;transition:none!important}}

    .home-method__seg-range {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 0.8125rem; /* 13px — owner 2026-08-12: 11px no se leía */
      /* Owner 2026-08-13: mono a 13px con tracking ancho se diluye aunque el
         fondo sea claro — el espaciado entre letras adelgaza la palabra. */
      font-weight: var(--weight-bold);
      line-height: 1.4;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-azure-700);
    }
    .home-method__station--decision .home-method__seg-range { color: var(--color-warm-700); }
    .home-method__seg-label {
      margin: 2px 0 0;
      font-family: var(--font-mono);
      font-size: var(--text-caption);
      font-weight: var(--weight-medium);
      line-height: 1.4;
      color: var(--color-neutral-700);
      max-width: 26ch;
    }
    .home-method__seg-title {
      margin: var(--space-sm) 0 0;
      font-size: var(--text-h5);
      line-height: var(--leading-h5);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-normal);
      color: var(--color-neutral-950);
    }
    .home-method__seg-body {
      margin: var(--space-2xs) 0 0;
      font-size: var(--text-body);
      line-height: var(--leading-body);
      color: var(--color-neutral-700);
      max-width: 42ch;
    }

    /* C. Fixed scope. .home-method__scope-footer (margin-top + border-top)
       is defined above, alongside the evidence rail — it owns the divider
       that separates the rail from the contractual promise + scope control. */
    .home-method__doc-lead {
      margin: 0;
      font-size: var(--text-body-lg);
      line-height: var(--leading-body);
      color: var(--color-neutral-800);
      max-width: 58ch;
    }
    .home-method__doc { margin-top: var(--space-sm); }
    /* The toggle as a small solid chip (not a bare text link): it needs to
       read as an affordance tied to the scope sentence above it, not an
       orphaned caption. White fill breaks from the section's azure-50 field
       the same way the journey cards and form panel already do, so "white =
       something you can act on" stays consistent across the section. */
    .home-method__doc-toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      padding: var(--space-2xs) var(--space-sm);
      min-height: 44px; /* keeps the tap target >= 44px tall (Task 6 verification finding) */
      background: var(--color-neutral-0);
      border: 1px solid rgba(12,130,245,.25);
      font-family: var(--font-mono);
      font-size: var(--text-caption);
      /* Ladder mono 400/500/700 — la familia no trae 600 (ver el <link> de
         Google Fonts y la nota larga en es/index.html). Es la etiqueta de un
         control, no un rótulo decorativo: si no se lee, no se hace clic. */
      font-weight: var(--weight-bold);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-azure-700);
      cursor: pointer;
      list-style: none;
      transition: background var(--duration-hover) var(--easing-out), border-color var(--duration-hover) var(--easing-out), color var(--duration-hover) var(--easing-out);
    }
    .home-method__doc-toggle::-webkit-details-marker { display: none; }
    .home-method__doc-toggle:hover {
      background: var(--color-azure-100);
      border-color: rgba(12,130,245,.4);
      color: var(--color-azure-900);
    }
    .home-method__doc-toggle:focus-visible {
      outline: 2px solid var(--color-azure-500);
      outline-offset: 3px;
    }
    .home-method__doc[open] .home-method__doc-toggle {
      background: var(--color-azure-100);
      border-color: rgba(12,130,245,.4);
    }
    .home-method__doc-chevron {
      width: 14px;
      height: 14px;
      transition: transform var(--duration-hover) var(--easing-out);
    }
    @media (prefers-reduced-motion: reduce) {
      .home-method__doc-toggle { transition: none; }
    }
    .home-method__doc[open] .home-method__doc-chevron { transform: rotate(180deg); }
    .home-method__doc[open] .home-method__doc-when-closed { display: none; }
    .home-method__doc:not([open]) .home-method__doc-when-open { display: none; }
    .home-method__doc-body {
      margin-top: var(--space-md);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
    @media (min-width: 768px) {
      .home-method__doc-body {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 0;
      }
      .home-method__doc-col--in  { padding-right: var(--space-xl); }
      .home-method__doc-col--out {
        padding-left: var(--space-xl);
        border-left: 1px solid var(--color-border);
      }
    }
    .home-method__doc-col-title {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 0.8125rem; /* 13px — owner 2026-08-12: 11px no se leía */
      /* 2026-08-15: subir el tamaño no alcanzó. El tracking de 0.1em es el más
         ancho de la home y a 400 el trazo no sostiene la separación. */
      font-weight: var(--weight-bold);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .home-method__doc-col--in  .home-method__doc-col-title { color: var(--color-azure-700); }
    .home-method__doc-col--out .home-method__doc-col-title { color: var(--color-neutral-700); }
    .home-method__doc-list {
      list-style: none;
      margin: var(--space-sm) 0 0;
      padding: 0;
      display: grid;
      gap: var(--space-xs);
    }
    .home-method__doc-list li {
      position: relative;
      padding-left: var(--space-md);
      font-size: var(--text-body);
      line-height: var(--leading-body);
      color: var(--color-neutral-800);
    }
    /* A 10px rule as a bullet, not a check mark: the tick/cross pair is the
       grammar of a plan comparison table, and there is no second plan to buy. */
    .home-method__doc-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.7em;
      width: 10px;
      height: 1px;
      background: var(--color-azure-500);
    }
    .home-method__doc-list--out li {
      padding-left: 0;
      font-size: var(--text-body-sm);
      line-height: var(--leading-body-sm);
      color: var(--color-neutral-700);
    }
    .home-method__doc-list--out li::before { content: none; }

    /* E. Form: the only box of the section ----------------------------- */
    /* Dark-to-fog conversion boundary, take 2. The first pass (a full-bleed,
       high-alpha blurred band floating above the form) read as a render
       artifact — reviewer + owner both called it out as a smear cutting the
       page in two, and it visually bled into "Tell us which workflow you
       want to fix." instead of announcing it. This version replaces the
       floating band with two small, CONTAINED marks that sit fully inside
       form-wrap's own box (top: 0, no negative inset), so the fixed
       space-3xl margin above always keeps them clear of the scope summary —
       in either language, at any summary line-wrap — by construction, not
       by tuned offsets:
         1. A capped-width azure signal-line: the section's existing
            hairline/2px-rule grammar (see doc-wrap's border-top above),
            given a single accent that echoes the form panel's own
            azure-500 top edge below it.
         2. A tight low-alpha wash of Core Black directly behind the line —
            the "dark preview" of the Harness section that follows the
            form — capped short of padding-top so it never reaches the
            form-head text.
       The form panel itself stays solid white; no form markup is touched. */
    .home-method__form-wrap {
      position: relative;
      margin-top: var(--space-3xl);
      padding-top: var(--space-2xl);
    }
    .home-method__form-wrap::before {
      content: "";
      position: absolute;
      z-index: 0;
      top: 0;
      left: 50%;
      /* Owner (round 3): "hacelo más ancho, bastante más" — was min(280px,70%).
         720px is not an arbitrary widen: it is the exact max-width of
         .home-method__form-panel below, so the signal-line now spans the
         full width of the panel it announces instead of reading as a short
         accent mark floating above it. The 22%/78% fade stops (unchanged)
         scale with the box, so the visible bright segment grows to roughly
         match the ::after wash's own width — same taper, just proportionally
         bigger, not a different shape. */
      width: min(720px, 90%);
      height: 2px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, var(--color-azure-500) 22%, var(--color-azure-500) 78%, transparent);
      pointer-events: none;
    }
    .home-method__form-wrap::after {
      content: "";
      position: absolute;
      z-index: 0;
      top: 0;
      left: 50%;
      width: min(420px, 85%);
      height: 56px; /* < padding-top (space-2xl, 64px): stays clear of the h3 below */
      transform: translateX(-50%);
      /* Owner feedback (round 2): "se ve cortado, no parece natural" — the
         previous `ellipse 100% 100%` sizing only reaches its own transparent
         end-stop (85%) at 100% of the gradient's radius, but 100% of the
         radius on the horizontal axis lands at the box's OWN edge only when
         the box is square; here the box is 420x56 (7.5:1), so the ellipse's
         horizontal radius (100% of width) is far larger than the distance
         from center to the box's left/right edge (only 50% of width) — the
         fade never finishes before the box's own hard rectangle clips it,
         leaving visible straight left/right cantos. Sized down so BOTH axes
         reach fully transparent (radius fraction > 1, past the 85% color
         stop) before they ever reach the box boundary: horizontal 40% of
         width means the edge sits at (50%/40% =) 125% of the radius, vertical
         90% of height means the bottom sits at (100%/90% =) 111% — both
         already flat transparent, so the box's own edges never clip visible
         colour and no canto is perceivable in any direction. */
      background: radial-gradient(40% 90% at 50% 0%, rgba(1, 7, 12, 0.09), rgba(1, 7, 12, 0.04) 45%, transparent 85%);
      pointer-events: none;
    }
    .home-method__form-head,
    .home-method__form-panel { position: relative; z-index: 1; }
    .home-method__form-panel {
      background: var(--color-neutral-0);
      border: var(--icon-stroke) solid var(--color-border);
      border-top: 2px solid var(--color-azure-500);
      padding: var(--space-xl);
      max-width: 720px;
      margin-inline: auto;
    }
    @media (prefers-reduced-transparency: reduce) {
      /* The line's own tapered ends and the wash are both alpha-blended
         effects; reduced-transparency asks us to avoid those, not just the
         darkest ones. Flatten the line to a solid, hard-edged bar and drop
         the wash entirely rather than approximating it as an opaque block —
         a solid rule is the honest opaque equivalent of a signal-line,
         a solid rectangle is not the honest equivalent of a soft wash. */
      .home-method__form-wrap::before { background: var(--color-azure-500); }
      .home-method__form-wrap::after { content: none; }
    }
    .home-method__form-head { max-width: 56ch; margin-inline: auto; text-align: center; }
    .home-method__form-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-md);
    }
    @media (min-width: 560px) { .home-method__form-row { grid-template-columns: 1fr 1fr; } }
    .home-method__field-error {
      font-size: var(--text-body-sm);
      color: var(--color-error);
      display: none;
    }
    .home-method__field-error.is-visible { display: block; }
    .home-method .rcx-input[aria-invalid="true"],
    .home-method .rcx-textarea[aria-invalid="true"],
    .home-method .rcx-select[aria-invalid="true"] {
      border-color: var(--color-error);
      box-shadow: inset 0 0 0 1px var(--color-error);
    }
    /* Contrast fix: the global placeholder is neutral-300 (#b2b4b6), about
       2.2:1 on white, well under AA. Labels sit above every input here, so
       the placeholder is an example and not a label: darkening it does not
       create the "looks like a filled value" confusion. */
    .home-method .rcx-input::placeholder,
    .home-method .rcx-textarea::placeholder { color: var(--color-neutral-700); }
    .home-method__submit-row { margin-top: var(--space-md); }
    .home-method__form-reassure {
      margin: 0 0 var(--space-sm);
      font-size: var(--text-body);
      line-height: var(--leading-body-sm);
      color: var(--color-neutral-700);
      max-width: 56ch;
    }
    .home-method__form-msg { margin-top: var(--space-md); }
    /* Contrast fix: --color-text-muted is neutral-500 (#808385), 3.82:1 on
       white. neutral-700 is 8.01:1. */
    .home-method__privacy {
      font-size: var(--text-body);
      color: var(--color-neutral-700);
      margin-top: var(--space-md);
      text-align: center;
    }


    @media (prefers-reduced-motion: reduce) {
      .home-method__doc-chevron { transition: none; }
    }

    /* --------------------------------------------------------------------
       SECTION 5 — Why us · The Control Harness
       Rebuilt around the approved prerendered 3D core: a glass panel with
       five explicit layers (deterministic code, human approval, trace,
       boundaries, verification). Static/semantic baseline — Task 5 adds
       tab/panel interactivity on top without changing this contract.
       Spec: .superpowers/sdd/2026-08-08-home-premium-proof-harness/task-4-brief.md
       -------------------------------------------------------------------- */
    .home-harness{position:relative;overflow:hidden;background:#01070c;color:var(--color-neutral-0)}
    .home-harness::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 48%,rgba(12,130,245,.18),transparent 34%),linear-gradient(rgba(154,223,252,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(154,223,252,.04) 1px,transparent 1px);background-size:auto,44px 44px,44px 44px;pointer-events:none}
    .home-harness>.rcx-container{position:relative}
    .home-harness__header{max-width:720px}
    .home-harness__header h2{max-width:13ch;margin-top:var(--space-sm)}
    .home-harness__h2{text-wrap:balance}
    .home-harness__sub{max-width:46ch;line-height:var(--leading-body);color:var(--color-neutral-200)}
    .home-harness__stage{display:grid;grid-template-columns:1fr;gap:var(--space-lg);align-items:center;margin-top:var(--space-xl)}
    .home-harness__visual{margin:0;transform:translate3d(var(--harness-x,0),var(--harness-y,0),0);transition:transform 220ms var(--easing-out)}
    /* Stack reserves the shared 1440x901 encuadre up front (CLS-safe) whether or
       not JS ever runs; the no-JS baseline is a single static picture inside it. */
    .home-harness__visual-stack{position:relative;aspect-ratio:1440/901;overflow:hidden}
    .home-harness__visual-stack picture{display:block;width:100%;height:100%}
    .home-harness__visual-stack img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.04)}
    /* Layer crossfade only activates once rcx-harness.js marks the group
       .is-enhanced. Without JS the stack keeps exactly the one static picture
       from the markup baseline, in normal flow, at full opacity. */
    .home-harness.is-enhanced .home-harness__visual-layer{position:absolute;inset:0;opacity:0;transition:opacity 320ms var(--easing-out)}
    .home-harness.is-enhanced .home-harness__visual-layer.is-active{opacity:1}
    @media(prefers-reduced-motion:reduce){.home-harness.is-enhanced .home-harness__visual-layer{transition:none}}
    .home-harness__glass{padding:var(--space-lg);background:rgba(4,19,28,.88);border:1px solid rgba(154,223,252,.24);box-shadow:0 24px 70px rgba(0,0,0,.34)}
    @supports(backdrop-filter:blur(1px)){.home-harness__glass{background:rgba(4,19,28,.62);backdrop-filter:blur(22px) saturate(1.1)}}
    .home-harness__tabs{display:grid;gap:6px}
    .home-harness__tabs a{display:grid;grid-template-columns:28px 1fr;gap:var(--space-xs);padding:10px;color:var(--color-neutral-300);border:1px solid rgba(154,223,252,.12)}
    .home-harness__tabs a[aria-selected="true"],.home-harness__tabs a.is-active{color:var(--color-neutral-0);border-color:rgba(12,130,245,.60);background:rgba(12,130,245,.10)}
    .home-harness__tabs a[data-harness-tab="human-approval"][aria-selected="true"],.home-harness__tabs a[data-harness-tab="human-approval"].is-active{border-color:rgba(233,138,92,.70);background:rgba(233,138,92,.10)}
    .home-harness__panel{padding-top:var(--space-lg)}
    .home-harness__panel-kicker{font:700 var(--text-caption)/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-malibu-300)}
    .home-harness__panel[data-harness-panel="human-approval"] .home-harness__panel-kicker{color:#e98a5c}
    .home-harness__example{margin-top:var(--space-md);padding:var(--space-sm);border-left:2px solid var(--color-azure-500);background:rgba(1,7,12,.42)}
    .home-harness__panel[data-harness-panel="human-approval"] .home-harness__example{border-left-color:#e98a5c}
    .home-harness__evidence{display:grid;gap:var(--space-sm);margin-top:var(--space-lg);padding:var(--space-md) 0;border-block:1px solid rgba(154,223,252,.18)}
    @media(min-width:1024px){.home-harness__stage{grid-template-columns:minmax(0,3fr) minmax(360px,2fr)}.home-harness__glass{margin-left:-8%;z-index:2}.home-harness__evidence{grid-template-columns:auto 1fr auto;align-items:center}}
    @media(prefers-reduced-transparency:reduce){.home-harness__glass{background:#071923;backdrop-filter:none}}
    @media(prefers-reduced-motion:reduce){.home-harness__visual{transform:none!important;transition:none!important}}

    /* No-JS baseline (mandatory): every panel below is visible by default.
       CSS never hides a .home-harness__panel on its own — hiding only ever
       happens once rcx-harness.js (Task 5) marks the group .is-enhanced AND
       sets the native [hidden] attribute on the inactive panel. Without JS,
       .is-enhanced never applies, so every panel and the tab-link href jump
       both keep working exactly as they do today. The actual display:none
       for a hidden panel comes from the global `[hidden]{display:none!important}`
       rule (reset.css:100, mirrored in both home pages' inline critical
       <style>), not from a rule in this file — there is nothing to declare
       here beyond the .is-enhanced contract itself. */
    .home-harness.is-enhanced .home-harness__tabs a{cursor:pointer}

    /* Evidence claim (BigQuery 30–60%): copy/link text and URL are unchanged
       from Task 2/3 in both languages. Only the metric's typography changed
       here — reduced to --text-h4 so it supports the layer instead of
       competing with it as a second hero metric. */
    .home-harness__proof-metric {
      font-family: var(--font-display);
      font-weight: var(--weight-bold);
      font-size: var(--text-h4);
      line-height: 1.05;
      color: var(--color-azure-300);
      margin: 0 0 var(--space-2xs);
    }
    .home-harness__proof-sep { font-size: var(--text-body); color: var(--color-neutral-300); font-weight: var(--weight-regular); }
    .home-harness__proof-copy { font-size: var(--text-body); color: var(--color-neutral-200); max-width: 52ch; margin: 0; }
    /* min-height keeps the tap target >= 44px tall (Task 6 verification finding);
       inline-flex + align-items center avoids shifting the visible text baseline. */
    .home-harness__proof-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-azure-300); }
    .home-harness__proof-link:hover,
    .home-harness__proof-link:focus-visible { color: var(--color-malibu-300); }

    .home-harness__close {
      margin: var(--space-lg) 0 0;
      color: var(--color-neutral-200);
      font-size: var(--text-body);
      line-height: var(--leading-body);
      max-width: 62ch;
    }
    .home-harness__it {
      margin: var(--space-md) 0 0;
      padding-top: var(--space-md);
      border-top: 1px solid rgba(255, 255, 255, 0.14);
      color: var(--color-neutral-300);
      font-size: var(--text-body);
      line-height: var(--leading-body-sm);
      max-width: 56ch;
    }

    /* --------------------------------------------------------------------
       BRIDGE TO /about — replaces the founders díptico on the home
       (owner brief 2026-08-11). The home now answers "what problem do we
       solve, how do we start, how do we control risk"; who we are, what
       experience backs it and why we can be trusted all live at /about,
       in one destination. Everything the díptico carried — portraits,
       mandates, Upwork figures — moved to about-leadership.css.
       Deliberately small: one line of position, one of invitation, one
       text CTA. It is a doorway, not a section.
       -------------------------------------------------------------------- */
    .home-bridge__inner {
      max-width: 62ch;
      margin-inline: auto;
      text-align: center;
    }
    .home-bridge__title {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--text-h4);
      font-weight: var(--weight-semibold);
      line-height: 1.25;
      color: var(--color-neutral-950);
      text-wrap: balance;
    }
    .home-bridge__body {
      margin: var(--space-sm) 0 0;
      font-size: var(--text-body);
      line-height: var(--leading-body);
      /* 500: este puente es ahora la banda del medio de la corriente
         (.rcx-surface--flow-light) y es la única línea de cuerpo de toda la
         sección — tres líneas centradas sobre textura, sin nada alrededor que
         las sostenga. */
      font-weight: var(--weight-medium);
      color: var(--color-neutral-700);
    }
    .home-bridge__cta { margin: var(--space-md) 0 0; }

    /* --------------------------------------------------------------------
       SELECTOR DE ESCENARIOS — transición al cambiar de área
       (Operational Cinema §7.2 · pedido del owner 2026-08-12)

       El <style> inline de ambas homes resuelve el toggle con
       display:none / display:block, que no admite transición y hace saltar
       el alto del bloque al cambiar de pestaña. Acá se sustituye por un
       crossfade apilado en grid: los cuatro paneles ocupan la misma celda,
       el alto lo fija el más alto y nada se mueve debajo del componente.

       Estas reglas llevan un `.home-problem__scenarios` de prefijo a
       propósito: el bloque inline se carga DESPUÉS de esta hoja, así que
       necesitan una especificidad mayor para ganarle. No es un descuido.

       Sale rápido, entra con calma: el panel saliente se va en 140ms sin
       desplazarse, y el entrante espera ese hueco antes de aparecer, para
       que los dos textos nunca se lean superpuestos.

       Solo opacity y transform — ningún elemento con backdrop-filter entra
       en la transición (regla del rector §16).
       -------------------------------------------------------------------- */
    .home-problem__scenarios .home-problem__panels.has-js-tabs {
      display: grid;
      align-items: start;
    }
    .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel {
      display: block;
      grid-area: 1 / 1;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity 140ms var(--easing-in),
        visibility 0s linear 140ms;
    }
    .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition:
        opacity var(--duration-page) var(--easing-out) 140ms,
        visibility 0s linear 140ms;
    }

    /* Escalonado: primero el estado de hoy, después la contrapropuesta.
       El desplazamiento es corto (10px) — a esta escala la diferencia entre
       premium y aparatoso es la amplitud, no la duración. */
    .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel .home-problem__scenario {
      transform: translateY(10px);
      transition: transform 0s linear 140ms;
    }
    .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel.is-active .home-problem__scenario {
      transform: none;
      transition: transform 480ms var(--easing-out) 140ms;
    }
    .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel.is-active .home-problem__scenario--after {
      transition-delay: 220ms;
    }

    /* El filete izquierdo del bloque "con RavencoreX" toma color al final
       del movimiento: es el acento de la sección, y llega después de que el
       texto ya se puede leer. */
    .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel .home-problem__scenario--after {
      border-left-color: var(--color-azure-100);
      transition:
        transform 0s linear 140ms,
        border-left-color 0s linear 140ms;
    }
    .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel.is-active .home-problem__scenario--after {
      border-left-color: var(--color-azure-500);
      transition:
        transform 480ms var(--easing-out) 220ms,
        border-left-color var(--duration-stroke) var(--easing-out) 220ms;
    }

    /* El tab elegido cierra el gesto con un realce corto del borde, para
       que el clic tenga una respuesta propia y no solo la del panel. */
    .home-problem__scenarios .home-problem__tab.is-active {
      transition:
        border-color var(--duration-hover) var(--easing-out),
        color var(--duration-hover) var(--easing-out),
        background-color var(--duration-page) var(--easing-out);
    }

    @media (prefers-reduced-motion: reduce) {
      .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel,
      .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel.is-active,
      .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel .home-problem__scenario,
      .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel.is-active .home-problem__scenario,
      .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel .home-problem__scenario--after,
      .home-problem__scenarios .home-problem__panels.has-js-tabs .home-problem__panel.is-active .home-problem__scenario--after {
        transform: none;
        transition: none;
      }
    }


    /* --------------------------------------------------------------------
       CTA DE CIERRE DE PRUEBA DE VALOR (owner 2026-08-13)
       El formulario se mudó a la página de contacto y acá queda la invitación
       a ir hasta él. Conserva la caja blanca que tenía el formulario —era la
       única de toda la sección, para que fuera imposible perderla— así que el
       cierre sigue leyéndose como el punto de acción, no como un párrafo más.
       -------------------------------------------------------------------- */
    .home-method__cta-wrap {
      margin-top: var(--space-2xl);
      padding: var(--space-xl);
      background: var(--color-neutral-0);
      border: var(--icon-stroke) solid var(--color-border);
      border-radius: var(--radius);
      box-shadow: 0 18px 40px -28px rgba(1, 7, 12, 0.45);
    }
    .home-method__cta { max-width: 60ch; }
    .home-method__cta h3 {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--text-h3);
      line-height: var(--leading-h3, 1.15);
      font-weight: var(--weight-semibold);
      color: var(--color-neutral-950);
      text-wrap: balance;
    }
    @media (max-width: 767px) {
      .home-method__cta-wrap { padding: var(--space-lg); }
      .home-method__cta h3 { font-size: var(--text-h4); }
    }

    /* --------------------------------------------------------------------
       SALIDAS POR SECCIÓN (owner 2026-08-13: "todas las secciones tienen que
       tener CTA para que el cliente agarre")
       El selector de escenarios no ofrecía ninguna, y el recorrido de diez
       días dejaba al lector sin nada a mano hasta el final de la sección.
       Se suman dos, deliberadamente distintas en peso: la de escenarios es un
       botón secundario —el visitante acaba de reconocerse en un caso— y la
       del recorrido es un enlace de texto, para no competir con el CTA
       primario que cierra la sección. Cinco botones iguales no son cinco
       oportunidades: son ruido.
       -------------------------------------------------------------------- */
    .home-problem__cta { margin: var(--space-lg) 0 0; }
    .home-method__journey-cta { margin: var(--space-md) 0 0; }
    @media (min-width: 768px) {
      .home-method__journey-cta { text-align: right; }
    }

    /* --------------------------------------------------------------------
       PESO DEL CUERPO SOBRE SUPERFICIES OSCURAS
       Owner 2026-08-13: "las fonts en weight light subiles el weight porque
       no se van a leer".

       La auditoría no encontró texto en 300 o menos: el problema es óptico,
       no de valor. El mismo weight 400 se percibe más fino en claro sobre
       oscuro que en negro sobre blanco —la irradiación hace que el fondo
       "invada" el trazo— y a 12-16px eso se lee como texto desvaído.

       La corrección va por superficie y no clase por clase: cualquier texto
       que caiga dentro de un bloque oscuro sube a 500. Los títulos y los
       elementos que ya declaran su peso no se tocan: la regla apunta al
       cuerpo, que es donde se pierde.
       -------------------------------------------------------------------- */
    .home-hero--v2 p,
    .home-hero--v2 li,
    .home-hero--v2 span:not([class*="node"]):not([class*="mark"]),
    .home-harness p,
    .home-harness li,
    .home-harness span,
    .home-close li {
      font-weight: var(--weight-medium);
    }

    /* Los que ya pesan más que medium mandan ellos.
       2026-08-15 — ESTE BLOQUE NO ESTABA FUNCIONANDO y hay que decir por qué,
       porque el error es fácil de repetir: `.home-harness__panel-kicker` tiene
       especificidad (0,1,0) y arriba está `.home-harness span` con (0,1,1). El
       kicker es un <span> dentro de .home-harness, así que la regla de arriba
       le ganaba y el 700 que el propio componente declara en su shorthand
       `font:` quedaba pisado a 500. Medido en el navegador: computaba 500, no
       600 ni 700. Se sube la especificidad de la excepción para que la
       intención escrita en el comentario sea la que efectivamente se pinta. */
    .home-hero--v2 .home-hero__workflow-label,
    .home-harness .home-harness__panel-kicker,
    .home-harness .home-harness__example strong,
    .home-close h2 {
      font-weight: var(--weight-semibold);
    }

    /* --------------------------------------------------------------------
       DOS EXCEPCIONES QUE SUBEN UN ESCALÓN MÁS, y no por gusto.
       Owner 2026-08-15: "no uses tan fino que no se lee con claridad".

       .rcx-logo-strip__context — es mono, en mayúsculas, 13px y con tracking:
       la combinación que adelgaza ópticamente. Encima va gris claro sobre
       carbón, o sea que le suma la irradiación descrita arriba. Salía del
       grupo de 500 sin ninguna razón propia; ahora usa el escalón real que
       tiene la familia mono, que es 700 (no hay cara de 600 cargada).

       .home-close p — el cierre pasa a llevar la banda diagonal oscura
       (.rcx-surface--flow-dark), así que este párrafo deja de estar sobre un
       carbón plano y pasa a estar sobre una textura. Sobre fondo con material
       el 500 pierde definición de borde antes que el contraste: 600 (que en la
       familia sans SÍ existe) lo devuelve a la nitidez que tenía en plano.
       -------------------------------------------------------------------- */
    .rcx-logo-strip__context { font-weight: var(--weight-bold); }
    .home-close p { font-weight: var(--weight-semibold); }