/* =========================================================================
   DS v4 — HOMEPAGE v3 (template_redesigns/Guvnor Homepage v3.dc.html)
   The olive brand-card hero (madlib slots in gold), tinted sector chips,
   triage tiles, gold Ask Guv band and olive "What's changing" panel.
   Olive palette from the prototype's paletteVars:
     --gv-dk #333926 · --gv-btn #4b5334 / #3c4327 · --gv-hl #e3b563 ·
     --gv-tick #d9a94f · chip tint #f1ead8 · panel #eee9da · tile #eae5d3
   The hero card is a BRAND surface: constant olive in both modes.
   ========================================================================= */

.gvh-wrap { max-width: 1160px; margin: 0 auto; padding: 8px 24px 0; }
.gvh-section { max-width: 1160px; margin: 0 auto; padding: 48px 24px 0; }
.gvh-section > h2 { margin: 0 0 20px; }
.gvh-section:last-of-type, .gvh-section--last { padding-bottom: 56px; }

/* ---- hero brand card ------------------------------------------------------- */
.gvh-hero { position: relative; background: var(--color-ink-deep, #333926); border-radius: var(--radius-brand, 24px); overflow: hidden; display: flex; min-height: 440px; color: #fff; }
.gvh-hero-copy { flex: 1 1 620px; min-width: 0; padding: 56px 56px 48px; position: relative; z-index: 2; }

/* ---- hero background stack (T-284) ----------------------------------------
   Per-trade artwork behind the brand card: a still per chip (CSS background on
   .gvh-hero-bg-frame) with an optional low-motion loop stacked over it. Only
   the active frame is opaque, so a chip tap or a carousel tick is a pure
   opacity crossfade — no layout, no repaint of the copy. The whole stack sits
   at z-index 0 under the z-index 2 .gvh-hero-copy and is pointer-events:none so
   it can never eat a click meant for a slot or the CTA.
   The card keeps its olive ground: the artwork is authored with gradient
   transparency over that olive, and .gvh-hero-scrim is the belt-and-braces
   contrast floor for the copy column on top of it. -------------------------- */
.gvh-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.gvh-hero-bg-frame {
  position: absolute; inset: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: 0; transition: opacity 900ms ease;
}
.gvh-hero-bg-frame[data-bg-active] { opacity: 1; }
/* The loop fades in over its own still once it is buffered and playing, so a
   slow connection (or a codec the browser refuses) simply stays on the still. */
.gvh-hero-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 700ms ease;
}
.gvh-hero-bg-video[data-bg-playing] { opacity: 1; }
/* Contrast floor. Heaviest under the copy column, clearing to nothing on the
   right where the art is meant to read. */
.gvh-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(30,34,22,.45) 0%, rgba(30,34,22,0) 46%),
    linear-gradient(96deg, rgba(51,57,38,.93) 0%, rgba(51,57,38,.84) 26%, rgba(51,57,38,.52) 50%, rgba(51,57,38,.14) 76%, rgba(51,57,38,0) 100%);
}

/* Pause/stop for EVERY moving layer — the carousel and the background loop
   (WCAG 2.2.2). Parked in the card's bottom right, clear of the copy column and
   of the art's focal point. */
.gvh-hero-motion-toggle {
  position: absolute; right: 20px; bottom: 20px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(255,255,255,.32); border-radius: 50%;
  background: rgba(24,28,18,.42); color: rgba(255,255,255,.85);
  cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
/* The control ships hidden and madlib-hero.js reveals it only while something
   can actually move, hiding it again once nothing does (reduced-motion,
   Save-Data, or a still-only card whose reel the visitor has consumed). The
   display above would beat a bare [hidden], so restate it. */
.gvh-hero-motion-toggle[hidden] { display: none; }
.gvh-hero-motion-toggle:hover { background: rgba(24,28,18,.66); border-color: rgba(255,255,255,.55); color: #fff; }
.gvh-hero-motion-toggle:focus-visible { outline: 3px solid #d9a94f; outline-offset: 2px; }
.gvh-hero-motion-toggle svg { width: 17px; height: 17px; }
/* aria-pressed is the single source of truth for which glyph shows:
   pressed = paused = offer "play". */
.gvh-hero-motion-toggle .gvh-ico-play { display: none; }
.gvh-hero-motion-toggle[aria-pressed="true"] .gvh-ico-play { display: block; }
.gvh-hero-motion-toggle[aria-pressed="true"] .gvh-ico-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* Snap instead of crossfading. The carousel and the loops are switched off in
     JS as well — this only covers a chip-tap swap, which is user-initiated. */
  .gvh-hero-bg-frame, .gvh-hero-bg-video { transition: none; }
}

.gvh-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--border-radius-pill, 100px); padding: 7px 16px; margin-bottom: 28px; font-size: var(--type-overline, 12px); line-height: var(--lead-overline, 16px); font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-gold, #e3b563); }
.gvh-badge svg { width: 14px; height: 14px; flex: none; }

/* max-width invites the sentence to break — "I'm running a cafe / business in
   Brighton." — instead of sprawling one line across the whole card when the
   trade is short; text-wrap: balance then evens the lines. Em-based so it
   tracks the responsive font; long trades take a third line gracefully. */
.gvh-hero h1 { font-family: var(--font-heading); font-weight: 650; font-size: var(--type-display-sm, 52px); line-height: var(--lead-display-sm, 56px); letter-spacing: var(--tracking-display, -0.035em); color: #fff; margin: 0 0 20px; text-wrap: balance; max-width: 14em; }
.gvh-hero .gvh-lede { font-size: 17px; line-height: 28px; color: rgba(255,255,255,.82); margin: 0 0 28px; max-width: 26em; text-wrap: pretty; }

/* madlib slots — gold ems on the olive ground (verb select / trade / place) */
.gvh-hero select[data-madlib-verb],
.gvh-hero textarea[data-madlib-trade],
.gvh-hero input[data-madlib-place] {
  background: transparent; color: var(--color-gold, #e3b563);
  font: inherit; font-weight: 650;
  border: 0; border-bottom: 2px solid color-mix(in srgb, var(--color-gold, #e3b563) 45%, transparent);
}
.gvh-hero select[data-madlib-verb] { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 20px; }
.gvh-hero select[data-madlib-verb] option { color: var(--official-ink, #1c2430); background: #fff; font-size: 17px; letter-spacing: 0; }
.gvh-hero textarea[data-madlib-trade]::placeholder,
.gvh-hero input[data-madlib-place]::placeholder { color: color-mix(in srgb, var(--color-gold, #e3b563) 45%, transparent); font-weight: 650; }
/* Example register (T-284): a trade the carousel is demonstrating, not one the
   visitor set. Deliberately the placeholder's own faded gold — the ink the
   empty sentence already uses for words it is only suggesting — so it never
   reads as the solid "you set this" gold. Keep it in step with the
   ::placeholder rule above. */
.gvh-hero textarea[data-madlib-trade].gvh-demo { color: color-mix(in srgb, var(--color-gold, #e3b563) 45%, transparent); }
.gvh-hero select[data-madlib-verb]:focus-visible,
.gvh-hero textarea[data-madlib-trade]:focus-visible,
.gvh-hero input[data-madlib-place]:focus-visible,
.gvh-hero [data-madlib-cta]:focus-visible,
.gvh-hero [data-madlib-chip]:focus-visible { outline: 3px solid #d9a94f; outline-offset: 2px; }
.gvh-hero .gvh-slot-caret { color: var(--color-gold, #e3b563); }

/* ---- verb picker (Chromium customizable select) ---------------------------
   The CLOSED control was always ours (appearance:none + the .gvh-slot-caret
   overlay); the OPEN popup was the OS's, a white system menu dropping out of an
   olive card. `appearance: base-select` hands us the popup too — but only in
   browsers that have it, so the whole block is behind @supports and Safari and
   Firefox keep the native popup with the white-option fallback at the top of
   this file untouched. @supports adds no specificity, so these option rules
   must stay AFTER that fallback or it would win here too.
   The markup is deliberately unchanged: Chromium synthesises the button and
   <selectedcontent> for a plain <select>, so nothing below depends on new
   elements and a browser that ignores the query loses only the styling. Select
   semantics are unchanged as well — arrow keys and Enter still work. ------- */
@supports selector(::picker(select)) {
  .gvh-hero select[data-madlib-verb],
  .gvh-hero select[data-madlib-verb]::picker(select) { appearance: base-select; }
  /* base-select re-inherits the UA button styling, so restate the slot's own
     look; everything else it leaves alone (verified in Chromium). */
  .gvh-hero select[data-madlib-verb] { padding: 0 20px 0 0; }
  /* One caret, ours: base-select adds a ::picker-icon inside the button and the
     template already overlays .gvh-slot-caret in the hero's gold. */
  .gvh-hero select[data-madlib-verb]::picker-icon { display: none; }
  .gvh-hero select[data-madlib-verb]::picker(select) {
    background: var(--color-ink-deep, #333926);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--border-radius-lg, 16px);
    box-shadow: 0 12px 32px rgba(18,21,12,.5);
    padding: 6px; margin-block-start: 8px;
  }
  .gvh-hero select[data-madlib-verb] option {
    color: rgba(255,255,255,.86); background: transparent;
    font: inherit; font-weight: 600; font-size: 17px; letter-spacing: 0;
    padding: 8px 14px; border-radius: var(--border-radius-sm, 8px);
  }
  .gvh-hero select[data-madlib-verb] option:hover { background: rgba(255,255,255,.09); }
  /* Gold is what "chosen" means everywhere else in this card, so it carries the
     checked state on its own and the UA's tick column can go — it indents every
     other label to make room for a mark only one option ever shows. */
  .gvh-hero select[data-madlib-verb] option:checked { color: var(--color-gold, #e3b563); }
  .gvh-hero select[data-madlib-verb] option::checkmark { display: none; }
}

/* TRY chips — translucent pills; selected flips to gold with dark ink.
   (madlib-hero.js also toggles legacy utility classes; these attribute rules
   load later and win.) */
.gvh-hero [data-madlib-chip] {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.28);
  color: #fff; border-radius: var(--border-radius-pill, 100px);
  font-weight: 600; transition: border-color var(--transition-base), background var(--transition-base);
}
.gvh-hero [data-madlib-chip]:hover { border-color: rgba(255,255,255,.55); }
.gvh-hero [data-madlib-chip][aria-pressed="true"] { background: var(--color-gold, #e3b563); border-color: var(--color-gold, #e3b563); color: #22271a; }
/* The chip the T-284 carousel is demonstrating: an OUTLINE, never the filled
   pressed style above, because a demo chip is not a selected chip (aria-pressed
   stays "false" for the same reason). Ties on specificity with the :hover and
   [aria-pressed] rules, so it has to stay after both. */
.gvh-hero [data-madlib-chip].gvh-chip-demo { border-color: var(--color-gold, #e3b563); color: var(--color-gold, #e3b563); }
.gvh-hero .gvh-try-label { color: rgba(255,255,255,.65); }

/* CTA — the olive-mid pill (goes gold in dark via --color-accent-fill) */
.gvh-hero [data-madlib-cta] {
  display: flex; width: 100%; max-width: 440px; align-items: center; justify-content: center; gap: 10px;
  background: var(--color-accent-fill, #4b5334); color: var(--color-accent-fill-ink, #fff);
  font-weight: 600; font-size: 17px; line-height: 24px;
  padding: 14px 28px; border: 0; border-radius: var(--border-radius-pill, 100px);
  cursor: pointer; transition: background var(--transition-base);
}
.gvh-hero [data-madlib-cta]:hover { background: var(--color-accent-fill-hover, #3c4327); }
.gvh-hero [data-madlib-cta]:disabled { opacity: .7; cursor: wait; }

.gvh-hero .gvh-lock { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 13px; line-height: 20px; color: rgba(255,255,255,.6); }
.gvh-hero .gvh-lock svg { width: 13px; height: 13px; }
.gvh-hero [data-madlib-place-echo] { color: rgba(255,255,255,.65); }
/* T-324: the refused-trade line. Gold, not red — the hero card is deep olive,
   where --color-error fails contrast, and gold is already this card's colour
   for "look here" (the demo chip, the CH shortcut, the place corrections). The
   message asks for a second attempt; it is not an error state. */
.gvh-hero [data-madlib-trade-error] { color: var(--color-gold, #e3b563); font-weight: 600; max-width: 32em; }
.gvh-hero [data-madlib-trade-error][hidden] { display: none; }
/* clickable "Did you mean" corrections (ISS-579) */
.madlib-echo-pick { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.madlib-echo-pick:hover { color: var(--color-link-hover); }
.gvh-hero .madlib-echo-pick { color: var(--color-gold, #e3b563); }
.gvh-hero .madlib-echo-pick:hover { color: #d9a94f; }

/* CH shortcut on the olive ground */
.gvh-hero [data-ch-toggle] { color: var(--color-gold, #e3b563); background: none; border: 0; font: 600 13px/20px var(--font-stack); cursor: pointer; }
.gvh-hero [data-ch-toggle]:hover { text-decoration: underline; }
.gvh-hero [data-ch-panel] label { color: rgba(255,255,255,.75); }
.gvh-hero [data-ch-input] { background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.4); color: #fff; }
.gvh-hero [data-ch-input]::placeholder { color: rgba(255,255,255,.45); }
.gvh-hero [data-ch-lookup] { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: var(--border-radius-pill, 100px); font-weight: 650; cursor: pointer; }
.gvh-hero [data-ch-lookup]:hover { background: rgba(255,255,255,.24); }
.gvh-hero [data-ch-status] { color: rgba(255,255,255,.75); }

/* the typeahead listbox stays a light surface floated over the card */
.gvh-hero [data-madlib-suggest] { color: var(--official-ink, #1c2430); }
/* Sector hint under each suggestion: where the pick ROUTES ("Sports
   insurance" is a financial-services business). Secondary by design — the
   label is the choice, the hint is the consequence. */
.gvh-hero [data-madlib-suggest] .gvh-suggest-hint { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: rgba(28,36,48,.62); margin-top: 2px; }

/* ---- sector chips — pastel tinted pills (constant hue, dark ink) ----------- */
.gvh-schips { display: flex; gap: 12px; flex-wrap: wrap; }
.gvh-schip { display: inline-flex; align-items: center; gap: 10px; border-radius: var(--border-radius-pill, 100px); padding: 12px 22px; text-decoration: none; font: 600 16px/24px var(--font-stack); transition: box-shadow var(--transition-base); background: #f1ead8; color: var(--official-ink, #1c2430); }
.gvh-schip:hover { box-shadow: 0 2px 10px rgba(76,60,32,.18); }
.gvh-schip .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.gvh-schip--all { background: var(--color-bg-white, #fff); border: 1px solid #e0d7c6; color: var(--color-text-primary); }
.gvh-schip--all svg { width: 15px; height: 15px; color: var(--color-text-muted); }
/* per-sector tint/ink pairs from the prototype */
.gvh-schip.sc-agriculture   { background: #e8f1cf; color: #3f6212; }
.gvh-schip.sc-construction  { background: #fbe5d3; color: #9a3412; }
.gvh-schip.sc-hospitality   { background: #fbe0e6; color: #9f1239; }
.gvh-schip.sc-retail        { background: #dcebf7; color: #1d5a8a; }
.gvh-schip.sc-tech          { background: #ebe3fa; color: #5b21b6; }
.gvh-schip.sc-finance       { background: #d7f0ea; color: #0f766e; }
.gvh-schip.sc-manufacturing { background: #f8ead0; color: #92500e; }
.gvh-schip.sc-health        { background: #fae1ec; color: #be185d; }

/* ---- task hierarchy (T-347) --------------------------------------------
   Replaced the uniform .gvh-triage grid of six equal tiles. Weight is carried
   by SURFACE, and the ladder runs by ink: the loudest card is the one furthest
   from the page ground, so it inverts between modes — olive on cream, cream on
   olive — while the two quieter tiers step toward the ground. Tier comes from
   get_homepage_situations, never from position. ---------------------------- */
.gvh-section-lede { font-size: 17px; line-height: 28px; color: var(--color-text-secondary); margin: -8px 0 24px; max-width: var(--measure); text-wrap: pretty; }

.gvh-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gvh-tasks-primary { display: flex; flex-direction: column; gap: 16px; }
/* Fill the row height so the pair squares off against the feature card;
   the cards centre their own content, so the extra height splits evenly. */
.gvh-tasks-primary > .gvh-task { flex: 1; }
.gvh-tasks-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }

/* The row cards centre their content group rather than pinning it to the top:
   equal-height siblings whose copy runs to different line counts otherwise
   pool all their slack under the shorter one, and the arrow reads as floating
   on a different centre line from the text. */
.gvh-task {
  display: flex; align-items: center; gap: 18px;
  background: #eae5d3; border-radius: var(--border-radius-lg, 16px); padding: 24px;
  text-decoration: none; color: var(--official-ink, #1c2430);
  transition: box-shadow var(--transition-base);
}
.gvh-task:hover { box-shadow: 0 4px 16px rgba(76,60,32,.14); }
.gvh-task > svg { width: 24px; height: 24px; flex: none; align-self: flex-start; margin-top: 2px; color: var(--color-accent-fill, #4b5334); }
.gvh-task .copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gvh-task h3 { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: var(--type-h5, 18px); line-height: 24px; color: inherit; }
.gvh-task p { margin: 0; font-size: 15px; line-height: 23px; color: #5b6470; text-wrap: pretty; }
.gvh-task .arrow { width: 18px; height: 18px; flex: none; color: #6f6a5c; }

/* The icon anchors to the TITLE, so it needs its own group; without the
   wrapper, align-items:center would drag it to the middle of the copy. */
.gvh-task > svg, .gvh-task .copy { align-self: center; }
.gvh-task .copy h3 + p { margin-top: 0; }

/* Tier 1 — the job most visitors arrive with. Spans both rows of the pair
   beside it. */
.gvh-task--feature {
  flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 32px; background: var(--color-ink-deep, #333926); color: #fff;
}
.gvh-task--feature > svg { width: 30px; height: 30px; align-self: flex-start; margin-top: 0; color: var(--color-gold, #e3b563); }
.gvh-task--feature h3 { font-weight: 650; font-size: var(--type-h3, 24px); line-height: 32px; letter-spacing: var(--tracking-h3, -0.015em); color: #fff; margin: 6px 0 0; }
.gvh-task--feature p { font-size: 16px; line-height: 26px; color: rgba(255,255,255,.82); }
.gvh-task--feature .cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-size: 16px; font-weight: 600; color: var(--color-gold, #e3b563); }
.gvh-task--feature .cta svg { width: 16px; height: 16px; }
.gvh-task--feature:hover { box-shadow: 0 6px 22px rgba(30,34,22,.28); }

/* Tier 3 — the quietest step. On cream it needs a hairline to read as a card
   at all; on the olive ground the fill alone carries it. */
.gvh-task--quiet { background: var(--color-bg-white, #fff); border: 1px solid var(--color-border-light, #e6ddcf); }

.gvh-browse-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 16px; font-weight: 600; color: var(--color-accent-fill, #4b5334); text-decoration: none; }
.gvh-browse-all:hover { text-decoration: underline; }
.gvh-browse-all svg { width: 16px; height: 16px; }

.dark .gvh-task { background: #3a412a; color: var(--color-text-primary); }
.dark .gvh-task > svg { color: var(--color-gold, #e3b563); }
.dark .gvh-task p { color: var(--color-text-secondary); }
.dark .gvh-task .arrow { color: rgba(244,242,233,.62); }
.dark .gvh-task--quiet { background: var(--color-ink-deep, #333926); border: 0; }
/* The feature card inverts: it is the surface furthest from the dark ground. */
.dark .gvh-task--feature { background: #f4f1e8; color: var(--official-ink, #1c2430); }
.dark .gvh-task--feature > svg { color: #4b5334; }
.dark .gvh-task--feature h3 { color: var(--official-ink, #1c2430); }
.dark .gvh-task--feature p { color: #5b6470; }
.dark .gvh-task--feature .cta { color: #4b5334; }
.dark .gvh-browse-all { color: var(--color-gold, #e3b563); }

/* ---- gold Ask Guv band ------------------------------------------------------
   Now a real GET form to /ask-guv/?q=, not a link. The roundel centres against
   the heading PAIR it belongs to (56px against ~58px) rather than floating in
   the whole stack, and the input spans the band from the roundel's own left
   edge — two aligned edges instead of three. */
.gvh-band-gold { display: flex; flex-direction: column; gap: 20px; background: var(--color-gold, #e3b563); border-radius: var(--radius-brand, 24px); padding: 36px 44px; }
.gvh-band-head { display: flex; align-items: center; gap: 20px; }
.gvh-band-head .roundel { width: 56px; height: 56px; border-radius: 50%; background: var(--color-ink-deep, #333926); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gvh-band-head .roundel svg { width: 26px; height: 26px; color: var(--color-gold, #e3b563); }
.gvh-band-head .copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gvh-band-head .ttl { font-family: var(--font-heading); font-weight: 650; font-size: var(--type-h3, 24px); line-height: var(--lead-h3, 28px); letter-spacing: var(--tracking-h3, -0.015em); color: #1c2430; }
.gvh-band-head .sub { font-size: 17px; line-height: 28px; color: #4a4330; text-wrap: pretty; }

.gvh-band-input { display: flex; align-items: center; gap: 12px; background: #22271a; border-radius: var(--border-radius-pill, 100px); padding: 8px 8px 8px 28px; }
.gvh-band-input input {
  flex: 1; min-width: 0; background: transparent; border: 0; padding: 0;
  font: 400 17px/28px var(--font-stack); color: #f4f2e9;
}
.gvh-band-input input::placeholder { color: rgba(244,242,233,.55); }
.gvh-band-input input:focus { outline: none; }
/* The ring goes on the pill, not the bare input, so it traces the control the
   visitor actually sees. */
.gvh-band-input:focus-within { box-shadow: 0 0 0 3px var(--color-ink-deep, #333926); }
.gvh-band-input button {
  width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--color-gold, #e3b563); color: #22271a;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-base);
}
.gvh-band-input button:hover { background: #f0c67c; }
.gvh-band-input button svg { width: 19px; height: 19px; }

/* ---- "Rules change" panel (T-347) -------------------------------------------
   Was .gvh-chg-panel, an olive block of bare dated headlines. Now a mint panel
   whose rows carry what the change MEANS, per the alert formula in the voice
   guide. Mint is the accent family, so it takes the pale member on cream and
   the deep member on the olive ground — reusing the pale one in dark mode put
   a third large light block on a page that already had two. ----------------- */
.gvh-watch { display: flex; gap: 48px; background: #dfe4d0; border-radius: var(--radius-brand, 24px); padding: 44px 48px; }
.gvh-watch-intro { flex: 0 0 322px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.gvh-watch-intro h2 { margin: 0; font-weight: 650; font-size: 40px; line-height: 44px; letter-spacing: -0.03em; color: #22271a; text-wrap: balance; }
.gvh-watch-intro p { margin: 0; font-size: 17px; line-height: 28px; color: #4a5140; text-wrap: pretty; }
.gvh-watch-cta { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(34,39,26,.45); border-radius: var(--border-radius-pill, 100px); padding: 12px 24px; font-size: 15px; font-weight: 600; color: #22271a; text-decoration: none; margin-top: 4px; transition: background var(--transition-base); }
.gvh-watch-cta:hover { background: rgba(34,39,26,.07); }
.gvh-watch-cta svg { width: 16px; height: 16px; }

.gvh-watch-list { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0 0 0 48px; border-left: 1px solid rgba(34,39,26,.16); }
.gvh-watch-list li + li { border-top: 1px solid rgba(34,39,26,.16); }
.gvh-watch-list a { display: flex; align-items: center; gap: 24px; padding: 22px 0; text-decoration: none; color: inherit; }
.gvh-watch-list li:first-child a { padding-top: 0; }
.gvh-watch-list li:last-child a { padding-bottom: 0; }
.gvh-watch-list .copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gvh-watch-list .meta { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps-sm, 0.08em); text-transform: uppercase; color: #5b6249; }
.gvh-watch-list .date { font-variant-numeric: tabular-nums; }
.gvh-watch-list .ttl { font-family: var(--font-heading); font-weight: 650; font-size: 20px; line-height: 26px; letter-spacing: -0.015em; color: #22271a; }
.gvh-watch-list .means { font-size: 15px; line-height: 23px; color: #4a5140; text-wrap: pretty; }
.gvh-watch-list .go { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid rgba(34,39,26,.35); color: #22271a; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition-base); }
.gvh-watch-list .go svg { width: 16px; height: 16px; }
.gvh-watch-list a:hover .go { background: rgba(34,39,26,.09); }
.gvh-watch-list a:hover .ttl { text-decoration: underline; text-underline-offset: 3px; }

.dark .gvh-watch { background: #26402f; border: 1px solid #35513f; }
.dark .gvh-watch-intro h2 { color: var(--color-text-primary); }
.dark .gvh-watch-intro p { color: #b9cbc0; }
.dark .gvh-watch-cta { border-color: rgba(244,242,233,.5); color: var(--color-text-primary); }
.dark .gvh-watch-cta:hover { background: rgba(244,242,233,.1); }
.dark .gvh-watch-list { border-left-color: rgba(255,255,255,.14); }
.dark .gvh-watch-list li + li { border-top-color: rgba(255,255,255,.14); }
.dark .gvh-watch-list .meta { color: #8fb09e; }
.dark .gvh-watch-list .ttl { color: var(--color-text-primary); }
.dark .gvh-watch-list .means { color: #b9cbc0; }
.dark .gvh-watch-list .go { border-color: rgba(244,242,233,.4); color: var(--color-text-primary); }
.dark .gvh-watch-list a:hover .go { background: rgba(244,242,233,.12); }

/* ---- trust strip (T-347) -----------------------------------------------------
   Provenance, privacy and personalisation in one line. "Official sources",
   never "official guidance": Guvnor is independent, and the footer disclaims
   affiliation two blocks below. A brand surface, so it holds in both modes. */
.gvh-trust { display: flex; align-items: center; gap: 40px; background: var(--color-ink-deep, #333926); border-radius: var(--radius-brand, 24px); padding: 28px 40px; }
.gvh-trust-lead { flex: 0 0 330px; display: flex; align-items: center; gap: 18px; margin: 0; font-family: var(--font-heading); font-weight: 650; font-size: 20px; line-height: 26px; letter-spacing: -0.015em; color: #f4f2e9; }
.gvh-trust-lead svg { width: 30px; height: 30px; flex: none; color: var(--color-gold, #e3b563); }
.gvh-trust-list { flex: 1; display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.gvh-trust-list li { flex: 1; display: flex; align-items: center; gap: 14px; padding: 4px 28px; font-size: 15px; line-height: 21px; color: #c6c6b4; }
.gvh-trust-list li + li { border-left: 1px solid rgba(255,255,255,.14); }
.gvh-trust-list svg { width: 22px; height: 22px; flex: none; color: var(--color-gold, #e3b563); }
.dark .gvh-trust, .dark .gvh-hero { border: 1px solid var(--color-border-light); }

/* ---- responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  /* One column each: the hierarchy is carried by surface and order, both of
     which survive the stack — nothing depends on the two-column pairing. */
  .gvh-tasks, .gvh-tasks-secondary { grid-template-columns: 1fr; }
  .gvh-watch { flex-direction: column; gap: 28px; }
  .gvh-watch-intro { flex: none; }
  .gvh-watch-list { padding: 4px 0 0; border-left: 0; border-top: 1px solid rgba(34,39,26,.16); }
  .dark .gvh-watch-list { border-left: 0; border-top-color: rgba(255,255,255,.14); }
  .gvh-watch-list li:first-child a { padding-top: 22px; }
  .gvh-trust { flex-direction: column; align-items: flex-start; gap: 22px; }
  .gvh-trust-lead { flex: none; }
  .gvh-trust-list { flex-direction: column; align-items: stretch; width: 100%; }
  .gvh-trust-list li { padding: 10px 0; }
  .gvh-trust-list li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 700px) {
  .gvh-hero-copy { padding: 36px 24px; }
  /* The copy spans the full card width on narrow screens, so the left-weighted
     gradient is no longer enough — flatten it to an even veil. */
  .gvh-hero-scrim {
    background:
      linear-gradient(0deg, rgba(30,34,22,.5) 0%, rgba(30,34,22,.1) 60%),
      linear-gradient(180deg, rgba(51,57,38,.9) 0%, rgba(51,57,38,.78) 100%);
  }
  .gvh-hero-motion-toggle { right: 14px; bottom: 14px; }
  .gvh-hero h1 { font-size: 36px; line-height: 40px; }
  .gvh-hero [data-madlib-cta] { max-width: none; }
  .gvh-task--feature { padding: 24px; }
  .gvh-task--feature h3 { font-size: 22px; line-height: 28px; }
  .gvh-band-gold { padding: 28px 24px; }
  .gvh-band-input { padding-left: 20px; }
  .gvh-watch { padding: 32px 24px; }
  .gvh-watch-intro h2 { font-size: 32px; line-height: 36px; }
  .gvh-band-head .ttl { text-wrap: balance; }
  .gvh-trust { padding: 24px; }
  .gvh-trust-lead { font-size: 18px; line-height: 24px; }
}
@media print { .gvh-hero, .gvh-watch, .gvh-trust { break-inside: avoid; } }