/* Close sections (owner: close builder): governance (#enterprise), the trial close (#trial), and the adjustments the
   live use-cases section (#teams, landing.css and landing-precision.css) needs to sit between the Paper 3D stage and
   the Forest governance band.
   Port: 7 · Governance and 8 · Trial close of public/prototypes/homepage/weave/style.css (with their responsive and
   reduced-motion rules) and the governance and finale parts of cinematic/lower.css.
   Scope: prototype rules that were unscoped stay single-class (.wv-…); rules scoped with .proto-cinematic / .proto-weave
   become .marketing-page--record. Tokens, bands, type and the thread come from home-base.css.
   Audit fixes here: RESP-04 (headings balance again), RESP-07 (bar labels wrap instead of truncating), A11Y-09 (the
   decision bar's label reaches 4.5:1), CT-15 (no synthesised italic), rail clearance for the CTA and the use-case links
   (RESP-10, major 4), and the band rhythm around #teams.
   Markup: templates/index/home/_governance_frames.html.twig, _trial_close.html.twig. Contract: home-port/CONTRACT.md. */

/* ---------- Headings (RESP-04) ----------
   .marketing-page--precision h2 { text-wrap: pretty } (0,1,1) outranks .wv-heading / .wv-display (0,1,0), so these
   headings fell back to pretty and left single words on their last line. Balance keeps the line count and evens it. */

.marketing-page--record :is(.wv-governance, .wv-trial) :is(.wv-heading, .wv-display),
.marketing-page--record .wv-governance__close span,
.marketing-page--record .marketing-teams h2 { text-wrap: balance; }

/* ---------- 7 · Governance ---------- */

.wv-boundaries { margin-top: clamp(72px, 8vw, 112px); align-items: center; }
.wv-frames { grid-column: 1 / span 6; aspect-ratio: 1; max-width: 620px; }
.wv-frame { position: relative; display: grid; height: 100%; padding: 11%; border: 1px solid rgb(247 245 240 / 0.3); border-radius: 22px; transition: border-color 0.6s var(--ease-out); }
.wv-frame.is-reached { border-color: rgb(217 174 78 / 0.7); }
.wv-frame > em { position: absolute; top: -9px; left: 22px; padding: 0 8px; background: var(--forest); font-style: normal; font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; line-height: 18px; text-transform: uppercase; color: rgb(247 245 240 / 0.72); }
.wv-frame__gate, .wv-frame::after { position: absolute; left: 50%; width: 34px; height: 5px; background: var(--forest); translate: -50% 0; }
.wv-frame__gate { top: -3px; }
.wv-frame::after { content: ""; bottom: -3px; }
.wv-frame__gate .wv-anchor { left: 50%; top: 50%; }
.wv-frame__core { position: relative; display: grid; place-content: center; justify-items: center; gap: 12px; border-radius: 12px; background: rgb(247 245 240 / 0.06); }
.wv-frame__core .wv-anchor { left: 50%; top: 50%; }
.wv-frame__core img, .wv-frame__core code { position: relative; z-index: 4; }
.wv-frame__core code { padding: 4px 8px; border-radius: 4px; background: var(--forest); color: var(--signal); font-size: 13px; }
.wv-controls { grid-column: 8 / span 5; }
.wv-controls li { display: grid; gap: 10px; padding: 24px 0; border-top: 1px solid rgb(247 245 240 / 0.16); }
.wv-controls li:last-child { border-bottom: 1px solid rgb(247 245 240 / 0.16); }
.wv-controls h3 { font: 600 1.3rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.wv-controls p { font-size: 15.5px; line-height: 1.55; color: rgb(247 245 240 / 0.72); }
.wv-controls b { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: rgb(247 245 240 / 0.6); transition: color 0.4s ease; }
.wv-controls b i { width: 10px; height: 10px; border: 1.5px solid rgb(247 245 240 / 0.4); border-radius: 50%; transition: background-color 0.4s ease, border-color 0.4s ease; }
.wv-controls .is-enforced b { color: var(--signal); }
.wv-controls .is-enforced b i { border-color: var(--signal); background: var(--signal); }
.wv-governance__close { margin-top: clamp(72px, 7vw, 104px); }
.wv-governance__close span { grid-column: 1 / span 9; font: 600 clamp(1.4rem, 1rem + 1.3vw, 2.1rem)/1.3 var(--font-display); letter-spacing: -0.02em; color: var(--paper); }

/* Route points (no node): the thread comes along the rail, turns into the outer gate above the frames, leaves through
   the bottom gates and returns to the rail before the controls, so it never crosses text. */
.marketing-page--record .wv-frames { position: relative; }
.marketing-page--record .wv-frames__in { left: calc(var(--rail-x) - var(--rail)); top: -64px; }
.marketing-page--record .wv-frames__out { left: 50%; bottom: -16px; }
.marketing-page--record .wv-frames__rail { left: calc(var(--rail-x) - var(--rail)); bottom: -36px; }

/* Without scripts nothing walks the thread through the gates: show every boundary enforced, as reduced motion does. */
html:not(.home-js) .marketing-page--record .wv-frame { border-color: rgb(217 174 78 / 0.7); }
html:not(.home-js) .marketing-page--record .wv-controls b { color: var(--signal); }
html:not(.home-js) .marketing-page--record .wv-controls b i { border-color: var(--signal); background: var(--signal); }

/* ---------- 8 · Trial close ---------- */

.wv-trial__head { row-gap: 32px; align-items: end; }
.wv-trial__head h2 { grid-column: 1 / span 11; }
.wv-trial__head .wv-lead { grid-column: 1 / span 6; }
.wv-trial__terms { grid-column: 8 / span 5; display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.wv-trial__terms div { padding-top: 14px; border-top: 2px solid var(--forest); }
.wv-trial__terms dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.wv-trial__terms dd { margin-top: 6px; font: 700 1.6rem/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--forest); }

.wv-days { margin-top: clamp(80px, 8vw, 120px); padding-left: var(--rail); }
.wv-ruler { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); }
.wv-ruler li { position: relative; padding-top: 18px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.wv-ruler li::before { content: ""; position: absolute; top: -5px; left: 0; width: 1px; height: 10px; background: rgb(14 59 42 / 0.3); }
.wv-ruler li:first-child .wv-anchor { left: 0; top: 0; }
.wv-ruler li:last-child .wv-anchor { left: 100%; top: 0; }
.wv-ruler li:last-child::after { content: ""; position: absolute; top: -5px; right: 0; width: 1px; height: 10px; background: rgb(14 59 42 / 0.3); }
.wv-plan { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 8px; margin-top: 26px; }
.wv-plan li { display: contents; }

/* A bar spans from the day before its first day to its last day: is-from-N starts at column N + 1 and is-to-M ends
   at line M + 1 (the prototype's inline --from / --to, which the CSP does not allow). close.js places longer plans. */
.wv-plan__bar { --fill: 1; position: relative; display: flex; align-items: center; min-height: 34px; padding: 7px 12px; overflow: hidden; border-radius: 6px; background: rgb(14 59 42 / 0.08); font-style: normal; }
.wv-plan .is-from-0 { grid-column-start: 1; }
.wv-plan .is-from-1 { grid-column-start: 2; }
.wv-plan .is-from-2 { grid-column-start: 3; }
.wv-plan .is-from-3 { grid-column-start: 4; }
.wv-plan .is-from-4 { grid-column-start: 5; }
.wv-plan .is-from-5 { grid-column-start: 6; }
.wv-plan .is-from-6 { grid-column-start: 7; }
.wv-plan .is-to-1 { grid-column-end: 2; }
.wv-plan .is-to-2 { grid-column-end: 3; }
.wv-plan .is-to-3 { grid-column-end: 4; }
.wv-plan .is-to-4 { grid-column-end: 5; }
.wv-plan .is-to-5 { grid-column-end: 6; }
.wv-plan .is-to-6 { grid-column-end: 7; }
.wv-plan .is-to-7 { grid-column-end: 8; }
.wv-plan__bar::before { content: ""; position: absolute; inset: 0; background: var(--forest); transform-origin: left; transform: scaleX(var(--fill, 1)); }
/* A11Y-09: small text on Nexus gold (#B8862B) measures 3.1:1 with Forest and 3.2:1 with white. The decision bar takes
   the accessible gold (--gold-text) with Paper text, 5.0:1, and its key below matches it. */
.wv-plan li:last-child .wv-plan__bar::before { background: var(--gold-text); }
/* RESP-07: a label that does not fit its bar wraps to a second line instead of being cut to "Secure ide…". */
.wv-plan span { position: relative; min-width: 0; font-size: 12.5px; font-weight: 500; line-height: 1.25; overflow-wrap: break-word; color: var(--paper); }
.wv-plan-text { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); margin-top: 44px; padding-left: var(--rail); }
.wv-plan-text article { padding-top: 18px; border-top: 1px solid rgb(14 59 42 / 0.16); }
.wv-plan-text p { font-size: 15px; line-height: 1.55; color: var(--slate); }

/* Day and phase follow each step's title as a meta line, keyed to its bar in the chart above. */
.marketing-page--record .wv-plan-text h3 { margin: 0 0 8px; font: 600 1.2rem/1.25 var(--font-display); color: var(--forest); }
.marketing-page--record .wv-plan-text span { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gold-text); }
.marketing-page--record .wv-plan-text span::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--forest); }
.marketing-page--record .wv-plan-text article:last-child span::before { background: var(--gold-text); }

.wv-close { margin-top: clamp(88px, 9vw, 136px); align-items: center; }
.wv-close__includes { grid-column: 1 / span 6; }
.wv-close__includes h3 { font: 700 clamp(1.5rem, 1rem + 1.2vw, 2.1rem)/1.15 var(--font-display); letter-spacing: -0.025em; color: var(--forest); }
.wv-close__includes ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin-top: 24px; }
.wv-close__includes li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.wv-close__includes li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; border: 2px solid var(--gold); border-radius: 50%; }
.wv-close__action { grid-column: 8 / span 5; display: grid; gap: 16px; justify-items: start; }
.wv-close__action p { font-size: 14px; color: var(--slate); }
.wv-cta {
    position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
    width: 100%; min-height: 88px; padding: 0 16px 0 52px; overflow: hidden; border-radius: 14px;
    background: var(--forest); color: var(--paper); text-decoration: none;
    font: 700 clamp(1.3rem, 1rem + 0.8vw, 1.65rem)/1 var(--font-display); letter-spacing: -0.015em;
    box-shadow: 0 30px 60px -34px rgb(14 59 42 / 0.8);
    transition: box-shadow 0.45s var(--ease-out);
}
.wv-cta::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform 0.55s var(--ease-out); }
.wv-cta > * { position: relative; }
.wv-cta__node { position: absolute !important; left: 26px; top: 50%; }
.wv-cta b { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: var(--signal); color: var(--forest); transition: translate 0.5s var(--ease-out); }
.wv-cta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wv-cta:hover::before, .wv-cta:focus-visible::before { transform: translateY(0); }
.wv-cta:hover b, .wv-cta:focus-visible b { translate: 4px 0; }
.wv-cta:active b { scale: 0.95; }
.wv-cta.is-connected { box-shadow: 0 30px 60px -34px rgb(14 59 42 / 0.8), 0 0 0 4px rgb(184 134 43 / 0.28); }

/* Finale scale (cinematic). */
.marketing-page--record .wv-trial .wv-display { font-size: clamp(3rem, 1rem + 5.6vw, 6.75rem); line-height: 0.95; }
.marketing-page--record .wv-cta, .marketing-page--record .wv-cta:hover { color: var(--paper); }
.marketing-page--record .wv-cta { min-height: 112px; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.3rem); border-radius: 16px; }
/* The arrow is the site icon partial: landing-precision's :is(b, em):has(> .marketing-icon) makes the box inline-flex
   and its .marketing-icon rule sizes the arrow to 1em, so both are restated for the CTA. */
.marketing-page--record .wv-cta > b { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 12px; vertical-align: baseline; }
.marketing-page--record .wv-cta .marketing-icon { width: 22px; height: 22px; }
/* The band focus ring (home-base.css) rounds to 6px; the CTA keeps its own corners so the ring follows them. */
.marketing-page--record .wv-trial .wv-cta:focus-visible { border-radius: 16px; }
.marketing-page--record .wv-close__action { grid-column: 7 / span 6; }
/* The thread drops from Day 7 down the column's right edge and lands on the CTA above its arrow. */
.marketing-page--record .wv-ruler li:last-child .wv-anchor { left: calc(100% + 16px); }
.marketing-page--record .wv-cta__node { left: auto; right: 52px; top: 0; }

/* ---------- Clearance from the chapter rail (major 4, RESP-10) ----------
   The rail (home-record.css) sits 18px from the right edge with 34px links wherever it shows (wider than 1100px). Where
   the shell's right margin is narrower than rail + 24px, interactive rows ending at the shell edge keep 24px clear. */

@media (min-width: 1101px) {
    .marketing-page--record {
        --close-rail-clear: max(0px, 76px - max(var(--gutter), (100vw - 1360px) / 2));
    }
    .marketing-page--record .wv-close__action { padding-right: var(--close-rail-clear); }
}

/* ---------- Use cases (#teams, live section) in the record page's rhythm ----------
   The live markup and its motion (landing.js) stay as they are. On this page the section takes the shell, grid, rail
   inset, heading type and band padding the Paper and Forest bands around it use, so its headings line up with theirs. */

.marketing-page--record .marketing-teams { padding-block: var(--band-pad); border-top: 0; background: var(--paper); }
.marketing-page--record .marketing-teams > .marketing-shell { width: min(1360px, 100% - 2 * var(--gutter)); }
.marketing-page--record .marketing-teams__heading {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px;
    align-items: end; padding-left: var(--rail);
}
.marketing-page--record .marketing-teams__heading > div { grid-column: 1 / span 7; }
/* No kicker above the heading on this page (brand): the rail and the navigation already name the chapter. */
.marketing-page--record .marketing-teams .marketing-eyebrow { display: none; }
.marketing-page--record .marketing-teams h2 { max-width: none; margin: 0; font: var(--heading); letter-spacing: -0.035em; color: var(--forest); }
.marketing-page--record .marketing-teams__intro {
    grid-column: 9 / span 4; max-width: 56ch; padding-bottom: 0.4em;
    font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.22rem); line-height: 1.62; color: var(--slate);
}
.marketing-page--record .marketing-teams__matrix { margin-top: clamp(64px, 7vw, 104px); margin-left: var(--rail); }

@media (min-width: 1101px) {
    .marketing-page--record .marketing-teams__matrix { margin-right: var(--close-rail-clear); }
    /* The inset matrix is narrower than the live one: the link column takes its content's width so a destination
       ("Telemetry and sustainability") and its arrow stay on one line. */
    .marketing-page--record .marketing-team-stories article { grid-template-columns: minmax(112px, 0.3fr) minmax(0, 1fr) auto; }
    .marketing-page--record .marketing-team-stories a { white-space: nowrap; }
}

@media (max-width: 1100px) {
    .marketing-page--record .marketing-teams__heading > div { grid-column: 1 / span 12; }
    .marketing-page--record .marketing-teams__intro { grid-column: 1 / span 10; }
}

/* ---------- Tablet and phone ---------- */

@media (max-width: 1100px) {
    .wv-controls { grid-column: 7 / span 6; }
}

@media (max-width: 1023px) {
    .wv-frames { max-width: 520px; margin-bottom: 48px; }
    .wv-trial__terms { margin-top: 8px; }
    .wv-close__action { margin-top: 48px; }
    .wv-ruler li:last-child .wv-anchor { display: none; }
    /* The ruler anchors sit on the text column's edge here: the thread runs down the rail to the CTA instead. */
    .marketing-page--record .wv-ruler .wv-anchor { display: none; }
    .marketing-page--record .wv-cta__node { left: 26px; right: auto; top: 50%; }
    .marketing-page--record .marketing-teams__heading { grid-template-columns: minmax(0, 1fr); }
    .marketing-page--record .marketing-teams__heading > div,
    .marketing-page--record .marketing-teams__intro { grid-column: 1; }
}

@media (max-width: 760px) {
    .wv-trial__terms, .wv-close__includes ul { grid-template-columns: 1fr; }
    .wv-plan-text { grid-template-columns: 1fr; }
    .wv-ruler li { font-size: 10px; letter-spacing: 0.02em; }
    .wv-cta { padding-left: 44px; }
    .wv-cta__node { left: 20px; }
    .marketing-page--record .wv-cta__node { left: 20px; }

    /* Labels stay clear of the gates the thread passes through. */
    .marketing-page--record .wv-frame { padding: 8%; }
    .marketing-page--record .wv-frame > em { left: 8px; padding: 0 5px; font-size: 10px; letter-spacing: 0.06em; }

    /* The evaluation chart becomes a thin timeline; the four steps below carry the words. */
    .marketing-page--record .wv-plan { row-gap: 6px; }
    .marketing-page--record .wv-plan__bar { min-height: 0; height: 10px; padding: 0; border-radius: 5px; }
    .marketing-page--record .wv-plan span { display: none; }

    /* The live section's own phone layout keeps its record card; only the rail inset goes. */
    .marketing-page--record .marketing-teams__matrix { margin-left: 0; }
    .marketing-page--record .marketing-teams__heading { padding-left: 0; }
}