/* Governance: the page's own rules (2026-10-13). Loaded after editorial.css, only by governance/index.html.
   Replaces governance-advisory.css and governance-uplift.css (2 October), whose medallion, lane and spine
   rules are retired. The site kit (type, buttons, greens, cards, the 52px tile) is in site.css.

   1  Hero: the centred copy above the governance cycle, a ring with the four stages on it and the firm + Hurdle
      at its centre. The ring uses a 720 x 424 viewport cropped from its 720 x 520 drawing; the stations and hub are HTML laid
      over it in container units, so the whole figure scales like a picture and the text stays text.
   2  Four stages: a row of four tabs (the kit's tile, number and title; the chosen one in pine) above
      one stage card, the copy beside an illustration of the stage's three bullets. The tabs are the
      home page's capability explorer, generalised in site.js: hidden until JavaScript runs, so without
      it the four cards simply stack; a link to a card's id (the hero's stations) selects its tab.
   3  The illustrations (.gs-*): three small cards per stage, one per bullet, joined left to right.
      Every label is taken from the stage's own bullets. Stage 04 carries a return arc back to the
      first card, the loop the hero's ring draws.
   4  Lower page on the kit (2026-10-16): the checkpoint scene ("Policy becomes practice"), Prepare /
      Review / Record, the controls band, the Security seal, the closing arcs. Their layout rules moved
      here from editorial.css (Governance is their only user) and were merged with the kit's changes.
   5  Responsive.   6  Motion and print.

   Colours: the kit's tokens, plus the illustration palette declared on .editorial-page below: the
   two-tone icon greens (as in the Capabilities icons), the connector green the site's illustrations
   already use, and amber, which keeps its one meaning on this site, a human decision (the stage 03
   "Human review" card; the checkpoint scene's exception, Hold and held note). The amber tokens are the
   kit's (site.css), shared with the AI Command Center's approval card. The opening copy sits on the
   kit's dark pine; the cycle sits on ivory below it. Every svg this file styles is aria-hidden decoration, except the hub's text.

   Motion: the pulse on the ring runs only while html[data-motion="running"], the page state site.js
   keeps for the visual's bottom-right Pause control and for reduced motion. Without JavaScript nothing moves. The
   checkpoint scene's three lights are the evidence-* loop in editorial.css, which stops when paused. */

.editorial-page {
  --art-green: #5b8d72;      /* two-tone icon mid green; also the meter and dot marks */
  --art-tint: #c3d6c7;       /* two-tone icon tint; the empty meter segments */
  --art-line: #c3d3c6;       /* connector green, as in the editorial illustrations */
  --art-track: #bcd2c2;      /* the ring's strand and the line behind the stage tabs (the hero lanes' strand) */
}

/* ---------- 1. Hero: centred headline and introduction above the governance cycle ---------- */
.advisory-hero-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark);
  color: var(--ivory);
}
.advisory-hero-band :focus-visible { outline-color: var(--ivory); }
/* The Firm partnership card's quiet curved-line motif, mirrored at the banner's edges. */
.advisory-hero-lines { position: absolute; z-index: -1; right: 0; bottom: 0; width: clamp(360px, 44vw, 700px); height: auto; color: var(--ivory); opacity: .18; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.advisory-hero-lines.is-left { right: auto; left: 0; transform: scaleX(-1); }
.editorial-page .advisory-hero { padding-top: 52px; padding-bottom: 24px; }
.advisory-visual { padding-top: 0; padding-bottom: 32px; }
.advisory-visual .motion-toggle { margin: 0 -8px 0 auto; color: var(--muted); font-size: 13px; }
.advisory-visual .pause-icon { width: 24px; height: 24px; border-color: var(--line); color: var(--forest); }
.advisory-visual .motion-toggle:hover:not(:disabled) { color: var(--ink); }
.advisory-hero > * { min-width: 0; }
.editorial-page .advisory-hero h1 { font-size: clamp(46px, 4.8vw, 68px); text-wrap: balance; }
.advisory-hero-copy { text-align: center; }
.advisory-hero-copy > p { margin: 24px auto 0; max-width: 760px; color: var(--soft); font-size: 17px; line-height: 1.7; }
.advisory-hero-copy .text-link { margin-top: 16px; color: var(--ivory); border-color: var(--tile-line); }

/* Crop 48 units of empty canvas above and below the original drawing without changing its paths.
   In the 720 x 424 viewport the ring centre is (360, 212); station centres are (240, 92), (480, 92),
   (480, 332), (240, 332). 1cqw is still 1/720 of the design width. Frame padding contains the labels
   that extend beyond the canvas and leaves room for their keyboard focus outlines. */
.advisory-cycle-frame { width: 100%; max-width: 818px; margin: 0 auto; padding: 16px clamp(28px, 4vw, 48px); }
.advisory-cycle { position: relative; width: 100%; max-width: 720px; margin: 0 auto; aspect-ratio: 720 / 424; container-type: inline-size; }
.cycle-ring { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.cycle-lane { fill: none; stroke: var(--forest); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cycle-track { fill: none; stroke: var(--art-track); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.cycle-pulse { fill: none; stroke: var(--forest); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 4 96; opacity: 0; }

.cycle-hub {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 27.78cqw;
  height: 27.78cqw;
  padding: 0 2.4cqw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(165deg, var(--pine-lift) 0%, var(--pine) 46%, var(--pine-deep) 100%);
  color: var(--ivory);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 0 0 .83cqw rgba(196, 218, 190, .6), 0 2px 4px rgba(18, 43, 34, .2),
    0 22px 32px -18px rgba(18, 43, 34, .45), 0 50px 72px -36px rgba(18, 43, 34, .6);
}
.cycle-hub svg { width: 5cqw; height: 5cqw; margin-bottom: 1.1cqw; }
.cycle-hub-copy { display: flex; flex-direction: column; align-items: center; }
.cycle-hub-kicker { color: #bcd5c1; font-size: clamp(10px, 1.53cqw, 13.75px); font-weight: 500; line-height: 1.4; letter-spacing: .16em; white-space: nowrap; }
.cycle-hub-name { margin-top: .7cqw; font-family: var(--brand); font-size: clamp(14px, 2.5cqw, 22.5px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }

.cycle-stations { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; }
/* Each station is 36% of the box plus half a tile, so its tile centre lands on the ring at 33.33% or
   66.67%; the left pair starts 2.67% outside the box, inside the hero's gutter. */
.cycle-station { position: absolute; width: calc(36% + 3.611cqw); transform: translateY(-50%); }
.cycle-station.is-1 { left: -2.667%; top: 21.698%; }
.cycle-station.is-2 { left: calc(66.667% - 3.611cqw); top: 21.698%; }
.cycle-station.is-3 { left: calc(66.667% - 3.611cqw); top: 78.302%; }
.cycle-station.is-4 { left: -2.667%; top: 78.302%; }
.cycle-station a { display: flex; align-items: center; gap: 1.94cqw; color: var(--ink); }
.cycle-station.is-1 a, .cycle-station.is-4 a { flex-direction: row-reverse; text-align: right; }
.cycle-station .stage-tile { --size: 7.222cqw; --icon: 3.889cqw; }
.cycle-station-copy { display: flex; flex-direction: column; gap: .4cqw; min-width: 0; }
.cycle-station.is-1 .cycle-station-copy, .cycle-station.is-4 .cycle-station-copy { align-items: flex-end; }
.cycle-station-head { display: flex; align-items: baseline; gap: 7px; }
.cycle-station-head .advisory-path-index { color: var(--forest); font-size: clamp(11px, 1.67cqw, 15.625px); letter-spacing: .08em; }
.cycle-station-title { font-family: var(--brand); font-size: clamp(14px, 2.29cqw, 20.625px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.cycle-station-desc { color: var(--prose); font-size: clamp(12px, 1.94cqw, 17.5px); line-height: 1.4; }
.cycle-station a:hover .cycle-station-title, .cycle-station a:focus-visible .cycle-station-title { color: var(--forest); text-decoration: underline; text-underline-offset: 4px; }
.cycle-station a:hover .stage-tile, .cycle-station a:focus-visible .stage-tile { border-color: var(--pine); }
.cycle-station a:focus-visible { outline-offset: 8px; border-radius: 6px; }

/* ---------- The tile: the kit's 52px rounded tile, as on Capabilities' four parts ---------- */
.stage-tile {
  --size: 52px;
  --icon: 28px;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border: 1px solid var(--tile-line);
  border-radius: 14px;
  background: var(--tile);
  color: var(--pine);
  transition: border-color .2s;
}
.stage-tile svg { width: var(--icon); height: var(--icon); }

/* ---------- 2. Four stages: a row of tabs, one stage card ---------- */
.advisory-section .editorial-section-heading { margin-bottom: 34px; }
.advisory-section .editorial-section-heading > p { text-wrap: pretty; }
.gov-explorer { position: relative; }
/* The tabs. A line runs behind them, one lane of the hero's ring; it shows in the gaps. */
.gov-tabs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 22px; }
.gov-tabs::before { content: ""; position: absolute; z-index: 0; left: 12%; right: 12%; top: 50%; height: 2px; margin-top: -1px; background: var(--art-track); }
.gov-tabs button { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 10px 18px 10px 10px; border: 1px solid var(--card-line); border-radius: 16px; background: var(--card); color: var(--ink); text-align: left; box-shadow: var(--card-shadow); transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s; }
.gov-tabs button .stage-tile { --size: 50px; --icon: 27px; }
.gov-tab-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.advisory-number { color: var(--forest); font-size: 12.5px; letter-spacing: .1em; }
.gov-tab-title { font-family: var(--brand); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.gov-tabs button:hover { border-color: var(--pine); }
.gov-tabs button:hover .stage-tile { border-color: var(--pine); }
.gov-tabs button:hover .gov-tab-title { color: var(--forest); }
/* The chosen stage is pine, as the kit's button; its tile keeps the tile ground so the icon reads. */
.gov-tabs button[aria-selected="true"], .gov-tabs button[aria-selected="true"]:hover { border-color: var(--pine); background: var(--pine); color: var(--ivory); box-shadow: 0 16px 28px -16px rgba(18, 43, 34, .55); }
.gov-tabs button[aria-selected="true"] .advisory-number { color: #bcd5c1; }
.gov-tabs button[aria-selected="true"] .gov-tab-title, .gov-tabs button[aria-selected="true"]:hover .gov-tab-title { color: var(--ivory); }
.gov-tabs button[aria-selected="true"] .stage-tile { border-color: rgba(250, 249, 245, .4); }
/* The stage card: the kit's card with the Command Center panels' pine edge; copy beside the
   illustration. Without JavaScript all four stack, 22px apart. */
.advisory-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px 44px; align-items: center; overflow: hidden; padding: 38px 36px 40px 41px; border: 1px solid var(--card-line); border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); scroll-margin-top: 120px; }
.advisory-stage::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--pine); }
.advisory-stage + .advisory-stage { margin-top: 22px; }
.advisory-stage > * { min-width: 0; }
.advisory-stage:focus-visible { outline-offset: -6px; }
.advisory-stage-copy > .advisory-number { display: block; margin-bottom: 12px; letter-spacing: .2em; }
.editorial-page .advisory-stage-title { margin: 0; color: var(--ink); font-size: 30px; line-height: 1.15; }
.advisory-stage-copy .advisory-stage-description { margin-top: 8px; color: var(--prose); font-size: 17px; line-height: 1.5; }
.advisory-stage-copy > p, .advisory-stage-copy li { font-size: 15.5px; line-height: 1.7; }
.advisory-stage-copy > p { color: var(--prose); }
.advisory-stage-copy .advisory-stage-description + p { margin-top: 20px; }
.advisory-stage-copy ul { margin: 16px 0 20px; padding-left: 18px; color: var(--ink); }
.advisory-stage-copy li + li { margin-top: 8px; }
.advisory-stage-copy li::marker { color: var(--forest); }
.advisory-stage-copy .advisory-outcome { padding: 14px 16px 15px; border-radius: 10px; background: var(--soft); color: var(--forest); font-size: 14px; line-height: 1.5; }
.advisory-outcome strong { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.advisory-stage-copy .text-link { margin-top: 18px; font-size: 14px; }
/* The working relationship closes the section: the 2 October rule, now under the stages. */
.advisory-principle { max-width: 640px; margin: 44px auto 0; text-align: center; }
.advisory-principle > span { color: var(--forest); font-size: 11.5px; font-weight: 500; letter-spacing: .2em; }
.advisory-principle p { margin-top: 12px; color: var(--ink); font-family: var(--brand); font-size: 22px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }

/* ---------- 3. The illustrations: three cards, one per bullet ---------- */
.gs-art { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; align-items: stretch; padding: 26px 22px; border: 1px solid var(--card-line); border-radius: 14px; background: var(--tile); }
.gs-art.has-return { padding-bottom: 56px; }
.gs-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 15px 15px 16px; border: 1px solid var(--card-line); border-radius: 13px; background: var(--card); box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(18, 43, 34, .05), 0 16px 24px -16px rgba(18, 43, 34, .32); }
/* a line and a chevron to the next card */
/* joined to the next card only (stage 04's return arc is the last child, not a card) */
.gs-card:has(+ .gs-card)::after { content: ""; position: absolute; left: 100%; top: 34px; width: 24px; height: 2px; background: var(--art-line); }
.gs-card:has(+ .gs-card)::before { content: ""; position: absolute; z-index: 1; left: calc(100% + 14px); top: 31.5px; width: 7px; height: 7px; border-top: 2px solid var(--forest); border-right: 2px solid var(--forest); transform: rotate(45deg); }
.gs-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gs-tile { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid var(--tile-line); border-radius: 11px; background: var(--tile); }
.gs-tile svg { width: 23px; height: 23px; }
.gs-card-title { color: var(--ink); font-size: 14.5px; font-weight: 500; line-height: 1.3; letter-spacing: -.005em; }
.gs-rows { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.gs-row { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.gs-row::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--art-green); }
.gs-row.is-check::before { content: none; }
.gs-row.is-check svg { width: 15px; height: 15px; margin-top: 1px; color: var(--forest); }
.gs-row.has-meter { flex-direction: column; align-items: flex-start; gap: 5px; }
.gs-row.has-meter::before { content: none; }
.gs-meter { display: flex; flex: none; gap: 3px; }
.gs-meter i { width: 11px; height: 5px; border-radius: 2px; background: var(--art-tint); }
.gs-meter i.on { background: var(--art-green); }
.gs-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gs-chip { padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--forest); font-size: 12px; font-weight: 500; line-height: 1.5; }
/* stage 01's "proposed, then reviewed": two pills down the card, the arrow between them */
.gs-flow { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.gs-flow svg { width: 14px; height: 14px; margin-left: 10px; color: var(--forest); transform: rotate(90deg); }
.gs-tag { align-self: flex-start; padding: 3px 10px; border: 1px solid var(--amber-line); border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); font-size: 11.5px; font-weight: 500; line-height: 1.5; }
/* a human decision: amber, as the Command Center's approval card */
.gs-card.is-human { border-color: var(--amber-line); background: var(--amber-soft); box-shadow: 0 14px 22px -16px rgba(111, 78, 16, .45); }
.gs-card.is-human .gs-tile { border-color: var(--amber-line); background: #fdfdfb; }
.gs-card.is-human .gs-row { color: var(--amber-ink); }
.gs-card.is-human .gs-row::before { background: var(--amber-line); }
/* stage 04: back to the first card */
/* from the third card's centre back to the first's: an SVG needs an explicit width, left and right alone do not stretch it */
.gs-return { position: absolute; left: calc(16.667% + 3.5px); bottom: 12px; width: calc(66.667% - 7px); height: 44px; overflow: visible; }
.gs-return path { fill: none; stroke: var(--art-line); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.gs-art.has-return::after { content: ""; position: absolute; left: calc(16.667% + 0px); bottom: 47px; width: 7px; height: 7px; border-top: 2px solid var(--forest); border-left: 2px solid var(--forest); transform: rotate(45deg); }

/* ---------- 4. Lower page on the kit (2026-10-16) ----------
   Policy becomes practice, Prepare / Review / Record, the controls band and the Security seal, brought
   to the standard the top of the page set: cards on --card with --card-line and the kit shadows, icon
   holders as the tile (rounded, --tile, --tile-line) with two-tone icons, labels on the eyebrow and
   second-tier specs, titles in Familjen, amber from the kit tokens. The compositions are the
   22 September and 2 October ones. Their layout rules lived in editorial.css until 2026-10-16; they
   moved here, Governance being their only user, and were merged with the kit's changes so each property
   is set once. What the checkpoint scene still borrows from editorial.css is the evidence-* family:
   .evidence-figure and its caption, the .evidence-gate base, the .link-flow / .badge-ring lights and
   their keyframes (an open decision, 2026-10-16). */
.practice-example-note { margin-top: 18px; max-width: 42ch; font-size: 16px; line-height: 1.7; }
.policy-in-practice .text-link { margin-top: 24px; }

.band-lanes { position: relative; overflow: hidden; isolation: isolate; }
.bend-lanes { position: absolute; z-index: -1; pointer-events: none; width: min(68vw, 980px); height: 760px; }
.bend-lanes.at-bottom-left { left: 0; bottom: 0; -webkit-mask-image: radial-gradient(circle at 0 100%, #000 0, #000 30%, transparent 56%); mask-image: radial-gradient(circle at 0 100%, #000 0, #000 30%, transparent 56%); }
.bend-lanes.at-top-right { right: 0; top: 0; }
.bend-lanes.at-bottom-right { right: 0; bottom: 0; -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0, #000 32%, transparent 60%); mask-image: radial-gradient(circle at 100% 100%, #000 0, #000 32%, transparent 60%); }
.bend-lanes.at-bottom-center { left: 50%; bottom: 0; width: 980px; transform: translateX(-50%); -webkit-mask-image: linear-gradient(0deg, #000 0, #000 18%, transparent 52%); mask-image: linear-gradient(0deg, #000 0, #000 18%, transparent 52%); }

/* 4a. The checkpoint scene. Cards are real text; the three connectors are decorative, and the one to
   the CRM stops at the hold badge (the badge and the lights are coloured in the inline SVGs, with the
   kit's hexes). Four cards on the kit; the tile for every icon holder; the eyebrow on the second-tier
   spec; the title in Familjen; Approve and Hold as state pills (the stage illustrations' tags), not
   buttons; amber from the tokens for the exception row, the Hold and the held note. */
.checkpoint-scene { --lead: 150px; --tail: 134px; position: relative; background: var(--soft); border-radius: 16px; padding: var(--lead) 0 var(--tail); }
.checkpoint-source, .checkpoint-card, .checkpoint-log, .checkpoint-crm { box-sizing: border-box; background: var(--card); border: 1px solid var(--card-line); }
.checkpoint-source, .checkpoint-log, .checkpoint-crm { border-radius: 13px; box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(18, 43, 34, .05), 0 14px 22px -16px rgba(18, 43, 34, .3); }
.checkpoint-source, .checkpoint-log, .checkpoint-crm, .checkpoint-paper, .checkpoint-link { position: absolute; }
.checkpoint-paper, .checkpoint-link { display: block; height: auto; }
.checkpoint-paper { left: 46%; top: 6px; width: 21%; aspect-ratio: 220 / 250; z-index: 0; }
.checkpoint-link { z-index: 1; }
.checkpoint-link-in { left: 6%; top: calc(var(--lead) - 36px); width: 14%; aspect-ratio: 120 / 112; }
.checkpoint-link-log { left: 13%; bottom: calc(var(--tail) - 30px); width: 14%; aspect-ratio: 90 / 120; }
.checkpoint-link-crm { left: 54%; bottom: calc(var(--tail) - 46px); width: 15%; aspect-ratio: 96 / 130; }
.checkpoint-source { left: 4%; top: 16px; width: 54%; padding: 14px 16px; z-index: 2; }
.checkpoint-card { position: relative; margin: 0 4% 0 20%; width: 76%; padding: 20px 22px 18px; border-radius: 16px; box-shadow: var(--card-shadow); z-index: 3; }
.checkpoint-log { left: 4%; bottom: 16px; width: 46%; padding: 13px 15px; z-index: 2; }
.checkpoint-crm { right: 4%; bottom: 16px; width: 44%; padding: 13px 15px; display: flex; align-items: center; gap: 10px; margin: 0; z-index: 2; }
.checkpoint-head { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; }
.checkpoint-head strong, .checkpoint-crm strong { font-weight: 500; letter-spacing: -.01em; }
.checkpoint-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--tile-line); border-radius: 10px; background: var(--tile); color: var(--forest); }
.checkpoint-icon svg { width: 21px; height: 21px; }
.checkpoint-crm strong { display: block; font-size: 15px; }
.checkpoint-crm small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.checkpoint-diff { display: flex; align-items: center; gap: 9px; margin: 13px 0; }
.checkpoint-diff span { display: block; height: 8px; border-radius: 4px; background: var(--soft); flex: 1; }
.checkpoint-diff .is-after { background: var(--art-tint); }
.checkpoint-diff small { color: var(--muted); font-size: 13px; }
.checkpoint-foot { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13px; color: var(--prose); border-top: 1px solid var(--card-line); padding-top: 11px; }
.checkpoint-foot svg { width: 18px; height: 18px; flex: none; color: var(--forest); }
.checkpoint-log .checkpoint-head { font-size: 14px; }
.checkpoint-log .checkpoint-foot { margin-top: 10px; }
.checkpoint-card .eyebrow { font-size: 11.5px; letter-spacing: .2em; margin-bottom: 14px; }
.checkpoint-title { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--ink); font-family: var(--brand); font-size: clamp(20px, 1.9vw, 24px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.checkpoint-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1px solid var(--tile-line); border-radius: 12px; background: var(--tile); color: var(--forest); }
.checkpoint-avatar svg { width: 25px; height: 25px; }
.checkpoint-rows { margin: 0; }
.checkpoint-rows > div { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--card-line); font-size: 14px; }
.checkpoint-rows dt { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.checkpoint-rows dt svg { width: 19px; height: 19px; flex: none; color: var(--forest); }
.checkpoint-rows dd { margin: 0; color: var(--muted); font-size: 13px; }
/* the exception: a soft amber fill, no ring; its alert icon is the one icon drawn in amber (inline fills) */
.checkpoint-rows .is-exception { background: var(--amber-soft); border-top-color: transparent; border-radius: 9px; padding: 11px 10px; margin: 2px -10px; }
.checkpoint-rows .is-exception dt, .checkpoint-rows .is-exception dd, .checkpoint-rows .is-exception svg { color: var(--amber-ink); }
.checkpoint-decisions { display: flex; gap: 10px; margin: 16px 0 0; }
.checkpoint-choice { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1; font-size: 13px; padding: 8px 12px; border: 1px solid var(--card-line); border-radius: 999px; color: var(--muted); }
.checkpoint-choice svg { width: 15px; height: 15px; }
.checkpoint-choice.is-taken { border-color: var(--amber-line); background: var(--amber-soft); color: var(--amber-ink); font-weight: 500; }
/* the held note: the .evidence-gate base (editorial.css) on --soft, inside the card */
.checkpoint-card .evidence-gate { align-items: center; border-radius: 10px; margin-top: 14px; padding: 13px 15px; }
.checkpoint-held { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--amber-soft); color: var(--amber-ink); box-shadow: inset 0 0 0 1px var(--amber-line); }
.checkpoint-held svg { width: 18px; height: 18px; }
.governance-opening .motion-poster { height: 88px; }

/* 4b. Prepare / Review / Record mirrors the Command Center benefits: a full-width sage strip,
   52px icon tiles beside title and description, with dividers between equal groups. */
.decision-sequence-band { border-top: 1px solid #d5dfd0; background: var(--soft); }
.decision-sequence { display: flex; padding-top: 28px; padding-bottom: 32px; list-style: none; }
.decision-sequence li { flex: 1 1 0; display: flex; align-items: center; gap: 20px; min-width: 0; padding: 2px 32px; }
.decision-sequence li:first-child { padding-left: 0; }
.decision-sequence li:last-child { padding-right: 0; }
.decision-sequence li + li { border-left: 1px solid #c3d2c0; }
.decision-sequence li > div { min-width: 0; }
.decision-sequence h3 { margin-bottom: 3px; color: var(--ink); font-family: var(--brand); font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.decision-sequence p { color: var(--prose); font-size: 16px; line-height: 1.5; }
.decision-sequence .seq-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid var(--tile-line); border-radius: 14px; background: var(--tile); color: var(--pine); }
.decision-sequence .seq-icon svg { width: 28px; height: 28px; }

/* 4c. The controls band: the tile in the band's own tones, two-tone icons in ivory, the group label as
   the tabs' numeral beside the eyebrow (the " / " is gone). The eyebrow is a flex row, so the real space
   after </b> in the markup is for readers and the 12px gap is drawn here. */
.governance-controls { position: relative; overflow: hidden; isolation: isolate; background: var(--dark); color: var(--ivory); }
.governance-controls .editorial-section-heading > p { color: var(--line); }
.governance-controls .control-group { display: grid; grid-template-columns: .8fr 2fr; gap: 58px; border-top: 1px solid rgba(250, 249, 245, .16); padding: 32px 0; }
.control-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border: 1px solid rgba(250, 249, 245, .18); border-radius: 12px; background: rgba(250, 249, 245, .06); color: var(--ivory); }
.control-icon svg { width: 26px; height: 26px; }
.control-group-heading .eyebrow { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; color: #bcd5c1; font-size: 12.5px; letter-spacing: .24em; }
.control-number { color: var(--ivory); font-weight: 500; letter-spacing: .1em; }
.control-group-heading h3 { font-size: 25px; line-height: 1.25; max-width: 240px; }
.control-group-items { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; }
.control-group-items h4 { margin-top: 0; font-weight: 500; font-size: 19px; line-height: 1.35; margin-bottom: 12px; }
.control-group-items p { font-size: 16px; line-height: 1.7; color: var(--line); }
.governance-controls .text-link { margin-top: 8px; }
.governance-controls :focus-visible { outline-color: var(--ivory); }

/* 4d. Security: the paragraph's promises as a seal. The firm's data at the centre, the tenant as a
   sealed double ring, the three controls standing on that boundary, and a key beside it. The core and
   stations are tiles on the ring, as the cycle's stations are. */
.security-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.security-section p { font-size: 17px; line-height: 1.7; }
.security-section .text-link { margin-top: 18px; }
.security-copy > p { margin-top: 26px; max-width: 46ch; }
.security-art { padding: 40px; border-radius: 18px; background: var(--soft); container-type: inline-size; }
.seal-layout { display: grid; grid-template-columns: minmax(0, 256px) minmax(0, 1fr); align-items: center; gap: 32px; }
.seal { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.seal-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 27cqw; height: 27cqw; border: 1px solid var(--tile-line); border-radius: 26%; background: var(--tile); color: var(--pine); box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(18, 43, 34, .05), 0 16px 26px -16px rgba(18, 43, 34, .34); }
.seal-core svg { width: 13.5cqw; height: 13.5cqw; }
.seal-pill { position: absolute; left: 50%; transform: translate(-50%, -50%); padding: .2em .8em; border-radius: 99px; background: var(--soft); color: var(--muted); font-size: clamp(11px, 4.6cqw, 13px); line-height: 1.5; white-space: nowrap; }
.seal-pill-tenant { top: 8.67%; color: var(--forest); }
.seal-pill-data { top: 71%; }
.seal-station { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--tile-line); border-radius: 11px; background: var(--tile); color: var(--pine); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(18, 43, 34, .05), 0 10px 16px -12px rgba(18, 43, 34, .3); }
.seal-station svg { width: 22px; height: 22px; }
.seal > .seal-station { position: absolute; width: 15cqw; height: 15cqw; border-radius: 26%; transform: translate(-50%, -50%); }
.seal > .seal-station svg { width: 8cqw; height: 8cqw; }
.seal > .is-left { left: 8.67%; top: 50%; }
.seal > .is-right { left: 91.33%; top: 50%; }
.seal > .is-bottom { left: 50%; top: 91.33%; }
.seal-legend { list-style: none; margin: 0; padding: 0; }
.seal-legend li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--card-line); color: var(--ink); font-size: 15px; line-height: 1.4; text-wrap: balance; }
.seal-legend li:first-child { border-top: 0; padding-top: 0; }
.seal-legend li:last-child { padding-bottom: 0; }
@container (max-width: 500px) {
  .seal-layout { grid-template-columns: 1fr; justify-items: center; gap: 26px; }
  .seal { width: min(100%, 264px); }
  .seal-legend { width: min(100%, 320px); }
}

.closing-cta.band-lanes > div { position: relative; }

/* 4e. The lower page's responsive steps. Prepare / Review / Record uses the same 1000px stacking
   breakpoint as the Command Center benefits; section 5 holds the rest of the page's rules. */
@media (max-width: 1100px) {
  .security-section { gap: 42px; }
  .governance-controls .control-group { grid-template-columns: .75fr 2fr; gap: 35px; }
  .control-group-items { gap: 28px; }
}
@media (max-width: 850px) {
  .governance-controls .control-group { grid-template-columns: 1fr; gap: 25px; }
  .control-group-heading h3 { max-width: none; }
}
@media (max-width: 1000px) {
  .decision-sequence { flex-direction: column; padding-top: 10px; padding-bottom: 14px; }
  .decision-sequence li, .decision-sequence li:first-child, .decision-sequence li:last-child { padding: 18px 0; }
  .decision-sequence li + li { border-left: 0; border-top: 1px solid #c3d2c0; }
}
@media (max-width: 600px) {
  .checkpoint-card .eyebrow { font-size: 10.5px; letter-spacing: .16em; }
  .decision-sequence li { gap: 16px; }
  .decision-sequence h3 { font-size: 19px; }
  .decision-sequence p { font-size: 15.5px; }
  .control-group-items { grid-template-columns: 1fr; gap: 25px; }
  .control-group-items article + article { border-top: 1px solid var(--muted); padding-top: 24px; }
  .control-group-items h4 { margin-top: 0; font-weight: 500; font-size: 20px; }
  .security-section { grid-template-columns: 1fr; gap: 25px; }
}
@media (max-width: 520px) {
  /* too narrow to compose: the same cards stack and the connectors drop out */
  .checkpoint-scene { padding: 14px; display: grid; gap: 12px; }
  .checkpoint-paper, .checkpoint-link { display: none; }
  .checkpoint-source, .checkpoint-log, .checkpoint-crm { position: static; width: 100%; }
  .checkpoint-card { margin: 0; width: 100%; }
  .checkpoint-decisions { flex-wrap: wrap; }
}

/* ---------- 5. Responsive ---------- */
@media (min-width: 1100px) {
  /* Give the centred cycle more presence; its container units scale the artwork and labels together. */
  .advisory-cycle-frame { max-width: 1000px; }
  .advisory-cycle { max-width: 900px; }
}
@media (max-width: 1099px) {
  /* the illustration sits under the copy */
  .advisory-stage { grid-template-columns: 1fr; gap: 26px; padding: 32px 30px 34px 35px; }
  .advisory-stage-art { max-width: 620px; }
  /* Give the labels room before four columns become too narrow. */
  .gov-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .gov-tabs::before { display: none; }
}
@media (max-width: 899px) {
  .security-section.has-art { grid-template-columns: 1fr; gap: 32px; }
  .bend-lanes.at-bottom-center { -webkit-mask-image: linear-gradient(0deg, #000 0, transparent 30%); mask-image: linear-gradient(0deg, #000 0, transparent 30%); }
}
@media (max-width: 600px) {
  .editorial-page .advisory-hero h1 { font-size: clamp(38px, 10.5vw, 54px); }
  .advisory-hero-copy > p { margin-top: 18px; font-size: 16px; }
  /* The cycle becomes a list: the hub as a card, then the four stages down a spine. */
  .advisory-cycle-frame { padding: 20px 16px; }
  .advisory-cycle { max-width: none; aspect-ratio: auto; container-type: normal; }
  .cycle-ring { display: none; }
  .cycle-hub { position: static; flex-direction: row; justify-content: flex-start; gap: 14px; width: auto; height: auto; padding: 14px 18px; margin: 0 0 22px; transform: none; border-radius: 16px; text-align: left; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 4px rgba(196, 218, 190, .6), 0 18px 28px -18px rgba(18, 43, 34, .5); }
  .cycle-hub svg { width: 34px; height: 34px; margin: 0; }
  .cycle-hub-copy { display: flex; flex-direction: column; }
  .cycle-hub-kicker { font-size: 10.5px; }
  .cycle-hub-name { margin-top: 2px; font-size: 17px; }
  .cycle-stations { position: static; }
  .cycle-station, .cycle-station.is-1, .cycle-station.is-2, .cycle-station.is-3, .cycle-station.is-4 { position: relative; left: auto; top: auto; width: auto; transform: none; }
  .cycle-station + .cycle-station { margin-top: 14px; }
  .cycle-station:not(:last-child)::after { content: ""; position: absolute; z-index: 0; left: 21.5px; top: 22px; height: calc(100% + 14px); width: 1px; background: var(--art-line); }
  .cycle-station .stage-tile { position: relative; z-index: 1; }
  .cycle-station a, .cycle-station.is-1 a, .cycle-station.is-4 a { flex-direction: row; gap: 14px; text-align: left; }
  .cycle-station .stage-tile { --size: 44px; --icon: 24px; border-radius: 12px; }
  .cycle-station-copy, .cycle-station.is-1 .cycle-station-copy, .cycle-station.is-4 .cycle-station-copy { align-items: flex-start; gap: 2px; }
  .cycle-station-title { font-size: 17px; }
  .cycle-station-desc { font-size: 14px; }

  .advisory-section .editorial-section-heading { margin-bottom: 26px; }
  .gov-tabs { gap: 10px; margin-bottom: 16px; }
  .gov-tabs button { flex-direction: column; align-items: flex-start; min-height: 62px; gap: 10px; padding: 10px; border-radius: 12px; }
  .gov-tabs button .stage-tile { --size: 42px; --icon: 23px; border-radius: 12px; }
  .gov-tabs .advisory-number { font-size: 11px; }
  .gov-tab-title { font-size: 15px; }
  .advisory-stage { gap: 22px; padding: 24px 18px 26px 23px; }
  .advisory-stage + .advisory-stage { margin-top: 16px; }
  .editorial-page .advisory-stage-title { font-size: 25px; }
  .advisory-stage-copy .advisory-stage-description { font-size: 15.5px; }
  .advisory-stage-copy > p, .advisory-stage-copy li { font-size: 15px; }
  .advisory-principle { margin-top: 34px; }
  .advisory-principle p { font-size: 19px; }
  /* the cards stack, joined top to bottom; the return arc gives way to the list */
  .gs-art { grid-template-columns: 1fr; gap: 22px 0; padding: 18px 16px; }
  .gs-art.has-return { padding-bottom: 18px; }
  .gs-card:has(+ .gs-card)::after { left: 50%; top: 100%; width: 2px; height: 22px; margin-left: -1px; }
  .gs-card:has(+ .gs-card)::before { left: calc(50% - 3.5px); top: calc(100% + 10px); transform: rotate(135deg); }
  .gs-return, .gs-art.has-return::after { display: none; }
  .security-art { padding: 28px 18px; }
}
@media (max-width: 360px) {
  /* a smaller floor, so "An advisory partner" stays on one line on a 320px phone (as the deal-intake H1 got in
     stage 1). 34px left it 0.5px too wide for the 272px line; at 320px this gives 33.6px, 269px of text. */
  .editorial-page .advisory-hero h1 { font-size: clamp(33px, 10.5vw, 54px); }
}

/* ---------- 6. Motion and print ---------- */
@keyframes cycle-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
html[data-motion="running"] .cycle-pulse { opacity: 1; animation: cycle-run 9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .cycle-pulse { opacity: 0; animation: none; }
}
@media print {
  /* site.js shows every stage card for printing (beforeprint); the tabs are controls and do not print */
  .cycle-ring .cycle-pulse, .bend-lanes, .advisory-hero-lines, .gov-tabs, .advisory-visual .motion-toggle { display: none; }
  .advisory-stage { break-inside: avoid; box-shadow: none; }
}