/* ============================================================================
   DR SOPHIA AI · HOME v2  (home-v2.css · PAGE LAYER, loads LAST)
   ----------------------------------------------------------------------------
   The enterprise/premium merge. Loads after:
     tokens -> brand -> components.css -> styleguide.css -> home-v3.css
   This file is the FIX + POLISH layer. It styles the custom sections using ONLY
   --ds-* tokens and the DS visual language (elevation, hairline borders, the
   .cn-* flat constellation classes, copper-ink labels, Livvic display / Nunito
   body), and it applies every named client defect fix:
     1. Card visibility on dark (eight-problems grid)
     2. Complete cards, no dead space (drop the Source line, fit-to-content)
     3. Industries: 3 complete cards, each with a constellation
     4. Typography normalised to the DS type scale
     5. Alignment + spacing rhythm
     6. Hero on the approved flat-vector lab-anim
   Brand rules hold: no em dashes, UK English, Oxford comma ON, copper never
   body text, calm-authority register.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0 · PAGE-SCOPED ALIASES + TYPE CUT
   home-v3.css scopes everything to .home-v3; this page also carries .home-v2
   so we can re-pin a few values without disturbing other v3 pages. Mirror the
   local elevation aliases so this file is self-sufficient.
--------------------------------------------------------------------------- */
.home-v2{
  --ease: var(--ds-ease-authority);
  --hair: 1px solid var(--ds-border-subtle);
  --rule: 1px solid var(--ds-border-strong);
  --elev-1: 0 1px 2px var(--ds-color-ink-a04), 0 8px 24px var(--ds-color-ink-a06);
  --elev-2: 0 1px 2px var(--ds-color-ink-a04), 0 2px 8px var(--ds-color-ink-a06), 0 22px 56px var(--ds-color-ink-a10);
  --elev-3: 0 2px 4px var(--ds-color-ink-a06), 0 10px 24px var(--ds-color-ink-a06), 0 40px 90px var(--ds-color-ink-a12);
  /* shared dark-surface card tokens (defect #1 values, reused across acts) */
  --on-dark-card-bg:       rgba(255,245,233,.07);
  --on-dark-card-border:   rgba(255,245,233,.20);
  --on-dark-card-shadow:   0 1px 2px rgba(0,0,0,.18);
  --on-dark-card-bg-hover: rgba(255,245,233,.11);
  --on-dark-card-bd-hover: rgba(233,166,107,.45);
}

/* (client fix #1 — the ~15% display cut — is baked into tokens.css now) */

/* Skip-link: visually hidden until focused. */
.home-v2 .skip-link{ position:absolute; left:8px; top:-48px; z-index:200;
  background:var(--ds-color-green-deep); color:var(--ds-color-bone);
  padding:10px 16px; border-radius:0 0 var(--ds-radius-sm) var(--ds-radius-sm);
  font:700 var(--ds-text-body-sm) var(--ds-font-ui); text-decoration:none;
  transition:top var(--ds-dur-fast) var(--ease); }
.home-v2 .skip-link:focus{ top:0; outline:2px solid var(--ds-color-copper-light); }

/* ---------------------------------------------------------------------------
   1 · NAV  - REMOVED. The old .nav_* family was replaced by the live DS .nav
   component (styled in components.css). No nav rules live in this page layer.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   2 · HERO  (approved flat-vector lab-anim, two-column editorial)
   Defect #6: drop WebGL/particle hero, use #lab-anim + caption. Variant A
   layout only (art beside, right) for the enterprise read.
--------------------------------------------------------------------------- */
.home-v2 .hf-hero-section .hero_title{ font-family:var(--ds-font-display); font-weight:600;
  font-size:var(--ds-text-h1); line-height:1.04; letter-spacing:-.022em;
  color:var(--ds-color-green-deep); margin:0; max-width:19ch; text-align:left; }
.home-v2 .hf-hero-section .hero_title .accent{ font-style:italic; font-weight:500; color:var(--ds-color-copper); }
/* hero kick pill (DS .hero_kick) shield icon sizing */
.home-v2 .hf-hero-section .hero_kick svg{ width:15px; height:15px; flex:none; }
/* hero lead = DS hero subhead scale (body-lg x .85), not the larger full body-lg that read as "too huge" */
.home-v2 .hero_lead{ font-size:var(--ds-text-hero-lead); line-height:1.6; color:var(--ds-text-secondary);
  margin:clamp(32px,3.6vw,50px) 0 0; max-width:52ch; }   /* bigger title -> description gap (was condensed) */
.home-v2 .hero_actions{ display:flex; flex-wrap:wrap; gap:var(--ds-space-4); align-items:center; justify-content:flex-start; margin-top:clamp(26px,2.8vw,36px); }
/* hero value-prop labels: real labels with DS duotone icons, NO status dots (Vlad hard rule) */
.home-v2 .hero_props{ list-style:none; margin:clamp(30px,3.2vw,44px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:14px 26px; }   /* bigger description -> content gap */
.home-v2 .hero_prop{ display:inline-flex; align-items:center; gap:10px;
  font:600 var(--ds-text-body-sm) var(--ds-font-ui); color:var(--ds-color-green-deep); }
.home-v2 .hero_prop .duo-ico{ width:28px; height:28px; flex:none; }
/* value props now sit BELOW the buttons as a separate component, divided by a hairline rule */
.home-v2 .hero_props.hero_props--below{ margin-top:clamp(26px,3vw,38px); padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--ds-color-ink-a10); gap:14px 24px; }

/* DS-scale hero: widen toward the DS .hero_grid proportion (1.55fr/.9fr) and
   stretch the columns so the signature animation grows to FILL THE FULL HEIGHT
   of its cell, driven by the left column's content height, at every breakpoint. */
.home-v2 .hf-heroA-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
/* ambient edge layer sits behind the hero content (AI-voice edge glows + faint corner dots) */
.home-v2 .hf-hero-section{ position:relative; }
.home-v2 .hf-hero-section > .padding-global{ position:relative; z-index:1; }
.home-v2 .hero-ambient{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.home-v2 .hf-heroA-copy{ min-width:0; }

/* the approved lab-anim mount + its caption (constellation-hero-v2.js hydrates it).
   The field is a flex column that fills the cell: the canvas area takes the slack
   (centering the square mark) and the caption stays pinned directly below it. */
.home-v2 .hf-hero-field{ position:relative; width:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center; }
/* override the DS .lab-anim cap (styleguide.css max-width:340px): here the hero mark is a large
   centred square, bigger than the DS 540 cap, sized by its column; the JS fits the canvas to it. */
.home-v2 .lab-anim{ width:100%; max-width:600px; aspect-ratio:1; margin:0 auto;
  position:relative; display:flex; align-items:center; justify-content:center; }
.home-v2 .lab-anim canvas{ display:block; width:auto; height:auto; }
.home-v2 .lab-cap{ font-family:var(--ds-font-ui); text-align:center; margin:14px 0 0; flex:none;
  display:flex; flex-direction:column; align-items:center; gap:5px; }
.home-v2 .lab-cap__lead{ font-size:var(--ds-text-micro); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ds-text-secondary); }
.home-v2 .lab-cap__state{ font-family:var(--ds-font-display); font-size:var(--ds-text-h3); font-weight:600;
  letter-spacing:-.01em; color:var(--ds-color-copper); line-height:1.05;
  transition:filter .24s ease, opacity .24s ease; will-change:filter, opacity; }
.home-v2 .lab-cap__state.is-swapping{ filter:blur(7px); opacity:0; }
@media(max-width:880px){
  .home-v2 .hf-heroA-grid{ grid-template-columns:1fr; gap:28px; align-items:start; }
  /* stacked: return the mark to a centred square with a sensible cap */
  .home-v2 .hf-hero-field{ order:2; height:auto; max-width:380px; margin-inline:auto; }
  .home-v2 .lab-anim{ flex:none; width:100%; aspect-ratio:1; }
  .home-v2 .hf-heroA-copy{ order:1; }
}
@media(max-width:680px){ .home-v2 .hero_actions .button{ width:100%; justify-content:center; } }

/* ---------------------------------------------------------------------------
   3 · CHAPTER MARKER + SECTION HEAD  (defect #4 typography on every section)
   Eyebrow / chapter = label scale uppercase + tracking. H2 = .heading-style-h2.
--------------------------------------------------------------------------- */
.home-v2 .v3-chapter{ display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; }
.home-v2 .v3-chapter::before{ content:""; display:inline-block; width:22px; height:6px;
  background:
    radial-gradient(circle 2.5px at 3px 3px,  var(--ds-color-green) 99%, transparent),
    radial-gradient(circle 2.5px at 11px 3px, var(--ds-color-copper) 99%, transparent),
    radial-gradient(circle 2.5px at 19px 3px, var(--ds-color-green) 99%, transparent);
  background-repeat:no-repeat; vertical-align:middle; opacity:.9; }
.home-v2 .v3-chapter__no{ font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:var(--ds-text-micro); font-weight:600; letter-spacing:var(--ds-tracking-label); color:var(--ds-color-copper-ink);
  border:1px solid var(--ds-color-ink-a12); border-radius:var(--ds-radius-sm); padding:4px 9px; }
.home-v2 .v3-chapter__no.on-dark{ color:var(--ds-color-copper-light); border-color:rgba(255,245,233,.24); }
.home-v2 .v3-chapter__t{ font-family:var(--ds-font-ui); font-size:var(--ds-text-micro); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ds-text-secondary); }
.home-v2 .v3-chapter__t.on-dark{ color:rgba(255,245,233,.7); }

/* dark-act chapter dots so the two green dots don't vanish on green-deep */
.home-v2 .section_problem .v3-chapter::before,
.home-v2 .section_govern  .v3-chapter::before,
.home-v2 .section_cta     .v3-chapter::before{
  background:
    radial-gradient(circle 2.5px at 3px 3px,  #A9C3B6 99%, transparent),
    radial-gradient(circle 2.5px at 11px 3px, var(--ds-color-copper-light) 99%, transparent),
    radial-gradient(circle 2.5px at 19px 3px, #A9C3B6 99%, transparent);
  background-repeat:no-repeat; }

/* head/standfirst column pair: consistent measures, single block read */
.home-v2 .section-head{ max-width:64ch; }
.home-v2 .section-head > p{ max-width:56ch; }
.home-v2 .section-head .heading-style-h2{ margin-bottom:0; }

/* ---------------------------------------------------------------------------
   4 · DARK-ACT CARD VISIBILITY  (DEFECT #1)
   The eight-problems grid sits on the dark green act. Make the cards read as
   clearly-defined panels on the green: lift bg/border/shadow, brighten hover.
--------------------------------------------------------------------------- */
.home-v2 .section_problem .v3-pcard{
  /* OPAQUE so the corner bgfield never bleeds through: a green-deep base with a
     bone-tint overlay that lifts the card a clear step above the section green. */
  background:linear-gradient(180deg, rgba(255,245,233,.10), rgba(255,245,233,.055)), var(--ds-color-green-deep);
  border:1px solid rgba(255,245,233,.22);
  box-shadow:0 1px 2px rgba(0,0,0,.22), 0 12px 30px rgba(0,0,0,.16);
}
.home-v2 .section_problem .v3-pcard:hover{
  background:linear-gradient(180deg, rgba(255,245,233,.14), rgba(255,245,233,.085)), var(--ds-color-green-deep);
  border-color:rgba(233,166,107,.5);
  transform:translateY(-3px);
}

/* ---------------------------------------------------------------------------
   5 · COMPLETE, FIT-TO-CONTENT PROBLEM CARDS  (DEFECT #2)
   (a) The "Source [placeholder]" line is removed from the markup entirely.
       Belt-and-braces: hide any stray .v3-pcard__cite so no dead row remains.
   (b) Size cards to content: align the grid to the top so a shorter card does
       not stretch to a taller sibling, and let the card height fit its content
       (severity pill + title + body) snugly. Keep the severity dot/label only.
--------------------------------------------------------------------------- */
.home-v2 .section_problem .v3-pcard__cite{ display:none; }
.home-v2 .v3-problem-grid{ align-items:start; }
.home-v2 .v3-pcard{ gap:11px; }
.home-v2 .v3-pcard__sev{ margin-bottom:1px; }
/* card title to the spec'd ~1.12rem display 600 (defect #4) */
.home-v2 .v3-pcard h3{ font-family:var(--ds-font-display); font-size:var(--ds-text-card-title); font-weight:600;
  line-height:1.2; letter-spacing:-.01em; color:var(--ds-color-bone); margin:0; }
.home-v2 .v3-pcard p{ font-size:var(--ds-text-body-sm); line-height:1.55; color:rgba(255,245,233,.74); margin:0; }

/* ELITE uplift: catalogue index + drawing copper accent break the eight-card
   monotony and give each pressure a governed, indexed read (no markup change). */
.home-v2 .v3-problem-grid{ counter-reset:pc; }
.home-v2 .section_problem .v3-pcard{ counter-increment:pc; padding-top:clamp(22px,2.2vw,28px); }
.home-v2 .section_problem .v3-pcard::after{ content:counter(pc,decimal-leading-zero);
  position:absolute; top:clamp(22px,2.2vw,28px); right:clamp(18px,1.8vw,22px);
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:var(--ds-text-meta); font-weight:600;
  letter-spacing:var(--ds-tracking-label); color:rgba(233,166,107,.62); pointer-events:none; }
.home-v2 .section_problem .v3-pcard::before{ content:""; position:absolute; left:0; top:0;
  height:2px; width:30px; background:var(--ds-color-copper); opacity:.5; border-radius:0 2px 2px 0;
  transition:width .45s cubic-bezier(.16,1,.3,1), opacity .3s; pointer-events:none; }
.home-v2 .section_problem .v3-pcard:hover::before{ width:100%; opacity:.9; }

/* reassurance band: keep it tidy below the now-snug grid */
/* (closing pull-quote removed: the eight cards make the section content-complete) */

/* ============================================================
   H2 PROBLEM PANEL v2 - ONE line-divided panel on the dark act.
   Cells share the section ground (no separate, individually
   emerging cards); divided only by hairlines, like site/index.
   Each cell: severity label (left) + logo-derived mark (right),
   title, a negative-OUTCOME line, then a divider and a one-line
   mitigation (how Dr Sophia answers it). Description sized to
   13.5px to sit clearly below the title (index.html proportion).
   ============================================================ */
.home-v2 .prob_panel{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:clamp(30px,3.6vw,52px);
  border-top:var(--hair); border-left:var(--hair);
  position:relative; z-index:1;   /* sharp corners per the design system (no radius) */
}
@media(max-width:980px){ .home-v2 .prob_panel{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .home-v2 .prob_panel{ grid-template-columns:1fr; } }

.home-v2 .prob_cell{
  --pad:clamp(28px,2.6vw,38px);
  display:flex; flex-direction:column; min-width:0;
  padding:var(--pad) var(--pad) 0;       /* the solution footer supplies the bottom padding */
  background:var(--ds-surface-raised);   /* bright cards on the green act (reference fill) */
  border-right:var(--hair); border-bottom:var(--hair);
  transition:background .35s cubic-bezier(.16,1,.3,1);
}
.home-v2 .prob_cell:hover{ background:var(--ds-color-green-50); }

/* icon = DS duotone mark at the cred scale, no background, separated from the title so cards breathe */
.home-v2 .prob_ico{ width:42px; height:42px; flex:none; display:block; margin-bottom:var(--ds-space-5);
  transition:transform .4s cubic-bezier(.16,1,.3,1); }
.home-v2 .prob_cell:hover .prob_ico{ transform:scale(1.05); }

.home-v2 .prob_cell h3{ font-family:var(--ds-font-display); font-size:var(--ds-text-feature-title); font-weight:600;
  line-height:1.22; letter-spacing:-.01em; color:var(--ds-color-green-deep); margin:0 0 var(--ds-space-3); }
.home-v2 .prob_out{ font-size:var(--ds-text-feature-body); line-height:1.55; color:var(--ds-text-secondary); margin:0 0 var(--ds-space-5); }
/* solution = a prominent sage footer band (full card width); body content stays top-aligned and the
   footer is pinned to the bottom so footers line up across a row (cells share the grid row height) */
.home-v2 .prob_fix{ margin:auto calc(-1 * var(--pad)) 0; padding:clamp(15px,1.5vw,20px) var(--pad);
  background:var(--ds-color-sage);
  display:flex; gap:var(--ds-space-2); align-items:flex-start;
  font-size:var(--ds-text-feature-body); line-height:1.5; color:var(--ds-color-green-deep); }
.home-v2 .prob_fix__mk{ width:16px; height:16px; flex:none; color:var(--ds-color-copper); margin-top:3px; }

/* H2 animated background constellation (counter-rotating rings, pulsing
   matrix-digit dots). Sits behind the content, clipped to the section. */
/* premium volumetric ground: a 4-stop green depth gradient anchored at the top-right light source
   (the animation core), with a faint warm bloom near it, so the act reads dark with atmospheric depth */
.home-v2 .section_problem{ position:relative; overflow:hidden;
  background:
    radial-gradient(72% 80% at 100% 0%, rgba(216,108,30,0.14) 0%, rgba(216,108,30,0) 46%),
    radial-gradient(140% 132% at 100% 1%, #0d5a3b 0%, #084d33 30%, #043e29 60%, #022a1c 100%); }
.home-v2 .section_problem .padding-global{ position:relative; z-index:1; }
.home-v2 .prob_bg{ position:absolute; z-index:0; pointer-events:none;
  top:clamp(-180px,-10vw,-60px); right:clamp(-240px,-12vw,-110px);
  width:clamp(440px,54vw,940px); height:clamp(440px,54vw,940px);
  opacity:.85; }
@media(max-width:880px){ .home-v2 .prob_bg{ opacity:.5; width:clamp(320px,80vw,520px); height:clamp(320px,80vw,520px); right:-120px; top:-90px; } }

/* ---------------------------------------------------------------------------
   6 · PLATFORM · 4 PER-PRODUCT ANIMATED CARDS  (KEEP loved, polish to standard)
   Each card holds: an in-card constellation, role kicker, name, body, status
   pill, link. Equal width, equal rhythm. Card title ~1.28rem display 600.
--------------------------------------------------------------------------- */
.home-v2 .v3-modules{ align-items:stretch; }
.home-v2 .v3-module{ position:relative; }
.home-v2 .v3-module__role{ font-family:var(--ds-font-ui); font-size:var(--ds-text-micro); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ds-color-copper-ink); }
.home-v2 .v3-module h3{ font-family:var(--ds-font-display); font-size:var(--ds-text-h4); font-weight:600;
  color:var(--ds-color-green-deep); letter-spacing:-.012em; margin:0; line-height:1.15; }
.home-v2 .v3-module p{ font-size:var(--ds-text-body-sm); line-height:1.55; color:var(--ds-text-secondary); margin:0; flex:1; }

/* the in-card constellation slot (home-constellations.js injects the SVG) */
/* the in-card animation: ~80% of the column width, square, growing in height (was ~50%, height-capped) */
.home-v2 .v3-module .hf-mod-anim{ width:95%; max-width:300px; aspect-ratio:1; margin:2px auto 10px;
  display:grid; place-items:center; border-bottom:var(--hair); padding-bottom:18px; }
.home-v2 .v3-module .hf-mod-anim svg{ width:100%; height:100%; }
.home-v2 .v3-module .hf-mod-pill{ align-self:flex-start; }
.home-v2 .v3-module .v3-module__lk{ margin-top:2px; }

/* the "Live" inline tag on Sophia Decision */
.home-v2 .v3-module h3 .v3-live{ display:inline-flex; align-items:center; gap:6px; margin-left:var(--ds-space-2);
  font-family:var(--ds-font-ui); font-size:var(--ds-text-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ds-color-green-deep); background:var(--ds-color-green-50); border:1px solid var(--ds-color-green-100);
  border-radius:var(--ds-radius-pill); padding:3px 8px; vertical-align:middle; }
.home-v2 .v3-module h3 .v3-live .d{ width:6px; height:6px; border-radius:50%; background:var(--ds-color-green); }

/* hover: subtle lift + a GREEN border that DRAWS around the card (stroke-path outline),
   replacing the old copper top-gradient. Two pseudo-edges meet at opposite corners. */
.home-v2 .v3-module:hover,
.home-v2 .v3-seg:hover{ transform:translateY(-3px); box-shadow:var(--elev-2); }
.home-v2 .v3-module::before, .home-v2 .v3-module::after,
.home-v2 .v3-seg::before, .home-v2 .v3-seg::after{ content:""; position:absolute; width:0; height:0; pointer-events:none; z-index:2; }
.home-v2 .v3-module::before, .home-v2 .v3-seg::before{ top:0; left:0;
  border-top:2px solid var(--ds-color-green); border-left:2px solid var(--ds-color-green);
  transition:width .26s ease, height .26s ease .26s; }
.home-v2 .v3-module::after, .home-v2 .v3-seg::after{ right:0; bottom:0;
  border-bottom:2px solid var(--ds-color-green); border-right:2px solid var(--ds-color-green);
  transition:width .26s ease, height .26s ease .26s; }
.home-v2 .v3-module:hover::before, .home-v2 .v3-module:hover::after,
.home-v2 .v3-seg:hover::before, .home-v2 .v3-seg:hover::after{ width:100%; height:100%; }
/* the outline-draw pseudo-edges are hidden until hover — a 2px border on the
   default 0×0 pseudo-element was painting a green dot at each anchored corner.
   Global across every card that reuses this hover (v3-module / v3-seg / grp-card
   / v3-cta__meta), and the fade rides the existing draw transition. */
.home-v2 :is(.v3-module,.v3-seg,.grp-card,.v3-cta__meta)::before,
.home-v2 :is(.v3-module,.v3-seg,.grp-card,.v3-cta__meta)::after{
  opacity:0; transition:width .26s ease, height .26s ease .26s, opacity .18s ease;
}
.home-v2 :is(.v3-module,.v3-seg,.grp-card,.v3-cta__meta):hover::before,
.home-v2 :is(.v3-module,.v3-seg,.grp-card,.v3-cta__meta):hover::after{ opacity:1; }

/* ---- platform header: editorial title (left) + three asymmetric circular image orbs (top-right) ---- */
.home-v2 .plat-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:clamp(24px,4vw,68px); }
.home-v2 .plat-head .section-head{ margin:0; }
.home-v2 .plat-orbs{ position:relative; width:clamp(220px,24vw,340px); height:clamp(190px,20vw,280px); flex:none; }
.home-v2 .plat-orb{ position:absolute; border-radius:50%; box-shadow:var(--elev-1);
  background-size:cover; background-position:center; }   /* photo-ready slots; brand-gradient placeholder until client imagery */
.home-v2 .plat-orb::after{ content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,245,233,.20), inset 0 -18px 34px rgba(3,69,44,.20); }
.home-v2 .plat-orb--a{ width:clamp(112px,12.5vw,168px); aspect-ratio:1; left:0; top:18%;
  background-image:radial-gradient(125% 125% at 32% 26%, #0f6b45, #053f2a 80%); }
.home-v2 .plat-orb--b{ width:clamp(74px,8vw,108px); aspect-ratio:1; left:46%; top:0;
  background-image:radial-gradient(125% 125% at 34% 30%, #d4e3d8, #9fb3a6 88%); }
.home-v2 .plat-orb--c{ width:clamp(96px,10.5vw,138px); aspect-ratio:1; right:0; bottom:0;
  background-image:radial-gradient(125% 125% at 30% 28%, #eaa86e, #c06a22 90%); }
@media(max-width:920px){
  .home-v2 .plat-head{ grid-template-columns:1fr; }
  .home-v2 .plat-orbs{ width:100%; height:clamp(108px,24vw,150px); margin-top:10px; }
  .home-v2 .plat-orb--a{ left:1%; top:50%; transform:translateY(-50%); }
  .home-v2 .plat-orb--b{ left:31%; top:8%; }
  .home-v2 .plat-orb--c{ left:auto; right:2%; bottom:6%; }
}
@media(max-width:560px){ .home-v2 .plat-orbs{ display:none; } }

/* ---- platform footer: one clean roadmap band (replaces the two cramped lines) ---- */
.home-v2 .plat-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:clamp(12px,2vw,30px);
  margin-top:clamp(30px,3.4vw,50px); padding:clamp(18px,2vw,24px) clamp(20px,2.4vw,32px);
  background:var(--ds-color-sage); border:1px solid var(--ds-color-green-100); border-radius:var(--ds-radius-base); }
.home-v2 .plat-foot__note{ margin:0; font-size:var(--ds-text-body-sm); line-height:1.55; color:var(--ds-color-green-deep); max-width:64ch; }
.home-v2 .plat-foot__lk{ flex:none; }

/* future line + share takeaway: pin to baseline, normalise sizes */
.home-v2 .v3-future{ align-items:baseline; font-size:var(--ds-text-body-sm); }
.home-v2 .v3-takeaway p{ font-size:var(--ds-text-body-sm); line-height:1.6; }

/* pill ladder (canon): certified = deep green; ok/ready = sage; progress/road = grey */
.home-v2 .pill.is-ok{ background:var(--ds-color-sage); color:var(--ds-color-green-deep); border-color:var(--ds-color-ink-a10); }
.home-v2 .pill.is-progress,
.home-v2 .pill.is-road{ background:var(--ds-color-ink-a06); color:var(--ds-text-secondary); border-color:var(--ds-color-ink-a10); }
.home-v2 .pill.pill--cert{ background:var(--ds-color-green-deep); color:var(--ds-color-bone); border-color:transparent; }
.home-v2 .pill svg{ width:13px; height:13px; }

/* ---------------------------------------------------------------------------
   7 · GOVERNANCE · audit-window mock (ALL FOUR steps) + evidence checklist
   Elevated to an elite dark "act": the same premium 4-stop green ground as the
   problem act (volumetric depth, top-right light source + warm bloom), and the
   audit-pack reskinned to read as a real, verifiable product artefact.
--------------------------------------------------------------------------- */
/* 7a · premium volumetric ground (reuse of the .section_problem treatment):
   a 4-stop green depth gradient anchored at the top-right light source, with a
   faint warm copper bloom near it, so the act reads dark with atmospheric depth.
   Overrides the flat green-deep fill set in home-v3.css. */
.home-v2 .section_govern{ position:relative; overflow:hidden;
  background:
    radial-gradient(72% 80% at 100% 0%, rgba(216,108,30,0.14) 0%, rgba(216,108,30,0) 46%),
    radial-gradient(140% 132% at 100% 1%, #0d5a3b 0%, #084d33 30%, #043e29 60%, #022a1c 100%); }
/* anchor the signature constellation field to the top-right light source so the
   bloom and the constellation share one origin (the established dark-act read).
   The markup's static SVG keeps class v3-bgfield--bl; we re-place it here. */
.home-v2 .section_govern .v3-bgfield{ inset:auto; top:clamp(-200px,-11vw,-70px); right:clamp(-260px,-13vw,-120px);
  bottom:auto; left:auto; width:clamp(440px,52vw,900px); height:clamp(440px,52vw,900px); }
.home-v2 .section_govern .v3-bgfield--bl{ top:0; right:0; bottom:auto; left:auto; opacity:.5; }
.home-v2 .section_govern .v3-bgfield svg{ position:absolute; inset:0; width:100%; height:100%; }
@media(max-width:880px){
  .home-v2 .section_govern .v3-bgfield{ width:clamp(320px,80vw,520px); height:clamp(320px,80vw,520px); right:-120px; top:-90px; }
}

/* 7b · grid + heads */
.home-v2 .v3-govern-grid{ align-items:stretch; }
.home-v2 .section_govern .v3-takeaway{ border-top:none; padding-top:0; margin-top:clamp(26px,3vw,36px); }
.home-v2 .v3-evidence .e b{ font-size:var(--ds-text-card); }
.home-v2 .v3-evidence .e span{ font-size:var(--ds-text-body-sm); line-height:1.5; }

/* 7c · the audit-pack artefact: from a flat panel to a premium product surface.
   A faint inner top-light + a warm anchored rim, and a hairline ledger texture
   on the body so it reads as a real, recorded document rather than a UI sketch. */
/* FIX: the v3 base pins .v3-audit to aspect-ratio:16/9, which clipped the
   Consensus + Sign-off steps and the entire anchor/export footer (the record's
   most important proof). Drop the fixed ratio for a min-height window so the full
   artefact, input through anchored sign-off, always reads. */
.home-v2 .v3-audit{ box-shadow:var(--elev-3), inset 0 1px 0 rgba(255,255,255,.6);
  border-color:rgba(255,245,233,.22);
  aspect-ratio:auto; min-height:clamp(420px,30vw,520px); }
.home-v2 .v3-audit__body{ position:relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ds-color-copper) 4%, var(--ds-surface-raised)) 0%, var(--ds-surface-raised) 22%); }
/* faint ruled-ledger ground behind the trail, very low contrast, sharp-system */
.home-v2 .v3-audit__steps{ overflow:visible; position:relative; }
.home-v2 .v3-audit__steps::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(180deg, transparent 0, transparent 33px, var(--ds-color-ink-a04) 33px, var(--ds-color-ink-a04) 34px);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 100%); opacity:.7; }
.home-v2 .v3-audit__steps .v3-step{ position:relative; z-index:1; }
.home-v2 .v3-audit__rec{ font-size:clamp(.95rem,.85rem+.4vw,1.18rem); }
/* FIX: the source-guideline pill's icon shipped uncapped (rendered ~78px),
   blowing the pill into a large block. Cap it to a small inline glyph so the
   citation reads as a tidy source chip, the DS pill language. */
.home-v2 .v3-audit__src{ align-self:flex-start; }
.home-v2 .v3-audit__src svg{ width:12px; height:12px; flex:none; }

/* the "current" sign-off step gets a soft copper halo so the artefact has one
   clear focal beat (the clinician's accept), the way the live pages read. */
.home-v2 .v3-step.is-now .v3-step__node{ box-shadow:0 0 0 4px rgba(213,105,27,.14); }
.home-v2 .v3-step.is-now .v3-step__k{ color:var(--ds-color-copper-ink); }

/* the title-bar id chip: render REC-4821 as a monospaced record handle so the
   chrome reads like a real provenance viewer, not a mock label. */
.home-v2 .v3-audit__bar .v3-audit__title{ display:inline-flex; align-items:center; gap:8px; }
.home-v2 .v3-audit__bar .v3-audit__title .rec{ font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:9px; letter-spacing:.06em; color:var(--ds-color-copper-light);
  border:1px solid rgba(233,166,107,.4); border-radius:var(--ds-radius-sm); padding:2px 6px; }

/* anchor row: lift it to a verifiable footer. Keep the sage sub-surface, add a
   hairline copper top-rule so the anchor reads as the seal at the foot of a record. */
.home-v2 .v3-audit__anchor{ position:relative; }
.home-v2 .v3-audit__anchor::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--ds-color-copper) 0%, rgba(213,105,27,0) 62%); opacity:.55; }
.home-v2 .v3-audit__anchor code{ background:var(--ds-color-bone); border:1px solid var(--ds-color-ink-a10);
  border-radius:var(--ds-radius-sm); padding:1px 6px; }
/* export control: a confident, well-weighted primary affordance on the record */
.home-v2 .v3-audit__export{ box-shadow:0 1px 2px var(--ds-color-ink-a06); }
.home-v2 .v3-audit__export:hover{ box-shadow:0 2px 8px rgba(0,99,60,.22); }
/* C3: keep the default copper focus ring on the light SAGE export sub-surface */
.home-v2 .v3-audit__anchor :focus-visible{ outline-color:var(--ds-focus-ring); }

/* evidence checklist beside the mock: give each row a calm hover so the column
   feels alive without animation overuse (no transform, just a hairline warm-up). */
.home-v2 .v3-evidence .e{ transition:border-color var(--ds-dur-fast) var(--ease); }
.home-v2 .v3-evidence .e:hover{ border-top-color:rgba(233,166,107,.4); }

/* ---------------------------------------------------------------------------
   8 · INDUSTRIES · 3 COMPLETE, COHERENT CARDS
   Brought fully in line with the platform / problem feature-card language:
   a 42px DS duotone .duo-* mark (NO background box), the title at the feature
   scale, body at the feature scale, generous padding, and the shared green
   outline-draw hover (defined once above for .v3-module + .v3-seg). The earlier
   per-card constellations are retired in favour of the canonical icon language,
   so the three segments read as one family with the modules above them.
--------------------------------------------------------------------------- */
.home-v2 .v3-segments{ align-items:stretch; }
.home-v2 .v3-seg{ position:relative; padding:clamp(28px,2.8vw,40px); gap:var(--ds-space-3); }
.home-v2 .v3-seg__role{ font-family:var(--ds-font-ui); font-size:var(--ds-text-micro); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ds-color-copper-ink); position:relative; }
.home-v2 .v3-seg h3{ font-family:var(--ds-font-display); font-size:var(--ds-text-feature-title); font-weight:600;
  color:var(--ds-color-green-deep); letter-spacing:-.01em; line-height:1.22; margin:0; position:relative; }
.home-v2 .v3-seg p{ font-size:var(--ds-text-feature-body); line-height:1.55; color:var(--ds-text-secondary);
  margin:0; flex:1; position:relative; }
.home-v2 .v3-seg__vocab{ font-family:var(--ds-font-ui); font-size:var(--ds-text-meta); font-weight:700;
  color:var(--ds-color-green-deep); border-top:var(--hair); padding-top:14px; position:relative; line-height:1.5; }

/* the card mark: DS duotone at the feature-card (cred) scale, no background box,
   separated from the role kicker so the card breathes. Matches .prob_ico exactly,
   including the calm scale-up micro-interaction shared across the act's cards. */
.home-v2 .v3-seg__ico{ width:42px; height:42px; flex:none; display:block; position:relative;
  margin-bottom:var(--ds-space-3); transition:transform .4s cubic-bezier(.16,1,.3,1); }
.home-v2 .v3-seg:hover .v3-seg__ico{ transform:scale(1.05); }

/* the residual doorway line below the three cards */
.home-v2 .section_industries .v3-future{ align-items:baseline; }

/* ---------------------------------------------------------------------------
   9 · PROOF · deployment card + DS stat band + honesty panel  (KEEP loved)
   The four count-up figures are reskinned from boxed tiles into the canonical
   DS stat-band language (components.html .stats_band / .stat_item): a copper
   left-rule, a Livvic tabular figure, a copper-ink uppercase micro label. The
   band reads as ONE clean, framed instrument panel, sharp, not four chips.
   The 4th figure (named deployments = 1) is added in markup; grid is 4-up.
--------------------------------------------------------------------------- */
.home-v2 .v3-proof-grid{ align-items:stretch; }

/* the band header: editorial eyebrow (left) + a quiet provenance note (right) */
.home-v2 .v3-statband__hd{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--ds-space-4); flex-wrap:wrap; margin-bottom:var(--ds-space-4); }
.home-v2 .v3-statband__hd .v3-statband__note{ font:600 var(--ds-text-meta)/1.4 var(--ds-font-ui);
  color:var(--ds-text-secondary); letter-spacing:.02em; }
.home-v2 .v3-statband__hd .v3-statband__note sup{ color:var(--ds-color-copper-ink); font-weight:700; }

/* the band shell: one framed instrument on the faint raised surface, sharp corners,
   carries the signature GREEN outline-draw on hover (the platform-card language). */
.home-v2 .v3-statband{ position:relative; grid-template-columns:repeat(4,1fr); gap:0;
  background:var(--ds-surface-raised); border:var(--hair); border-radius:var(--ds-radius-sm);
  box-shadow:var(--elev-1); overflow:hidden; transition:box-shadow var(--ds-dur) var(--ease); }
.home-v2 .v3-statband:hover{ box-shadow:var(--elev-2); }
.home-v2 .v3-statband::before, .home-v2 .v3-statband::after{ content:""; position:absolute;
  width:0; height:0; pointer-events:none; z-index:2; }
.home-v2 .v3-statband::before{ top:0; left:0;
  border-top:2px solid var(--ds-color-green); border-left:2px solid var(--ds-color-green);
  transition:width .26s ease, height .26s ease .26s; }
.home-v2 .v3-statband::after{ right:0; bottom:0;
  border-bottom:2px solid var(--ds-color-green); border-right:2px solid var(--ds-color-green);
  transition:width .26s ease, height .26s ease .26s; }
.home-v2 .v3-statband:hover::before, .home-v2 .v3-statband:hover::after{ width:100%; height:100%; }

/* each figure: a borderless stat cell with a copper left-rule (the DS .stat_item mark).
   The first cell drops its rule so the band opens clean against its own frame. */
.home-v2 .v3-statband .v3-tile{ position:relative; z-index:1; background:none; border:none;
  border-radius:0; box-shadow:none; padding:clamp(18px,2vw,26px) clamp(16px,1.6vw,22px);
  border-left:1.5px solid color-mix(in srgb, var(--ds-color-copper) 50%, transparent);
  transition:background-color var(--ds-dur) var(--ease); }
.home-v2 .v3-statband .v3-tile:first-child{ border-left:none; }
.home-v2 .v3-statband .v3-tile:hover{ background:var(--ds-color-green-50); }

/* the figure: Livvic, green, tabular, copper suffix (display size, contract-safe) */
.home-v2 .v3-statband .v3-tile .n{ display:flex; align-items:baseline; gap:1px;
  font-family:var(--ds-font-display); font-weight:700; line-height:1;
  font-size:clamp(2rem, 1.5rem + 1.6vw, 2.7rem); color:var(--ds-color-green);
  font-variant-numeric:tabular-nums; letter-spacing:-.012em; }
.home-v2 .v3-statband .v3-tile .n .suf{ font-size:.5em; font-weight:700; color:var(--ds-color-copper);
  letter-spacing:0; }
/* the label: copper-ink uppercase micro (the DS .stat_l mark), tokenised */
.home-v2 .v3-statband .v3-tile .l{ font:700 var(--ds-text-micro)/1.4 var(--ds-font-ui);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ds-color-copper-ink);
  margin-top:var(--ds-space-3); max-width:18ch; }
.home-v2 .v3-statband .v3-tile .l sup{ color:var(--ds-color-copper-ink); font-weight:700; }

/* responsive: 4 -> 2 -> 1, with hairline dividers re-drawn so the grid stays a band */
@media(max-width:900px){
  .home-v2 .v3-statband{ grid-template-columns:repeat(2,1fr); }
  .home-v2 .v3-statband .v3-tile:nth-child(odd){ border-left:none; }
  .home-v2 .v3-statband .v3-tile:nth-child(even){
    border-left:1.5px solid color-mix(in srgb, var(--ds-color-copper) 50%, transparent); }
  .home-v2 .v3-statband .v3-tile:nth-child(n+3){ border-top:var(--hair); }
}
@media(max-width:480px){
  .home-v2 .v3-statband{ grid-template-columns:1fr; }
  .home-v2 .v3-statband .v3-tile{ border-left:none!important; }
  .home-v2 .v3-statband .v3-tile + .v3-tile{ border-top:var(--hair); }
}

/* the deployment card: premium dark-act treatment. Sharp corners (the v2 contract,
   the loved v3 shipped 20px round), the signature 4-stop green radial with a faint
   warm copper bloom top-right for depth, and a calm settle on hover. */
.home-v2 .v3-case{ border-radius:var(--ds-radius-sm); box-shadow:var(--elev-2);
  background:
    radial-gradient(120% 90% at 88% -10%, color-mix(in srgb, var(--ds-color-copper) 16%, transparent), transparent 46%),
    radial-gradient(130% 120% at 100% 0%, var(--ds-color-green-bright), transparent 52%),
    radial-gradient(160% 140% at 0% 100%, var(--ds-color-green-700), transparent 60%),
    var(--ds-color-green-deep);
  transition:transform var(--ds-dur) var(--ease), box-shadow var(--ds-dur) var(--ease); }
.home-v2 .v3-case:hover{ transform:translateY(-3px); box-shadow:var(--elev-3); }

/* badge: copper-light micro label sitting on a faint copper wash, sharp pill-free chip */
.home-v2 .v3-case__badge{ letter-spacing:.14em; }

/* meta row: three figures, each a Livvic display number with a copper-light accent and a
   bone-muted micro caption. Add a hair top-rule per cell so they read as one tidy band. */
.home-v2 .v3-case__meta{ gap:0; }
.home-v2 .v3-case__meta .m{ flex:1; min-width:0; padding:var(--ds-space-1) var(--ds-space-4) var(--ds-space-1) 0; }
.home-v2 .v3-case__meta .m + .m{ padding-left:var(--ds-space-4);
  border-left:1px solid rgba(255,245,233,.16); }
.home-v2 .v3-case__meta .m b{ font-size:1.35rem; letter-spacing:-.01em; }
.home-v2 .v3-case__meta .m span{ font-size:var(--ds-text-micro); }
/* mobile: first figure takes a full row; the other two share a 2-col second
   row (client 2026-07-06 — the 3-across band squashed on small screens) */
@media(max-width:640px){
  .home-v2 .v3-case__meta{ display:grid; grid-template-columns:1fr 1fr; row-gap:16px; }
  .home-v2 .v3-case__meta .m:first-child{ grid-column:1 / -1; padding-right:0; }
  .home-v2 .v3-case__meta .m:nth-child(2){ border-left:none; padding-left:0; }
}

/* ---------------------------------------------------------------------------
   10 · POSTURE · qualifier legend + posture table  (KEEP loved, normalise)
--------------------------------------------------------------------------- */
.home-v2 .v3-qual b{ font-size:var(--ds-text-micro); }
.home-v2 .v3-qual span{ font-size:var(--ds-text-body-sm); line-height:1.5; }
.home-v2 .v3-posture{ font-size:var(--ds-text-card); }
.home-v2 .v3-posture td .note{ font-size:var(--ds-text-meta); line-height:1.45; }

/* ---- POSTURE · consensus-flow diagram (compact, DS-styled, animated) -------
   A self-contained flow card: INPUT -> 42 GOVERNED AGENTS -> CONSENSUS ->
   HUMAN IN THE LOOP -> SIGN-OFF, with a clinician-decision band beneath the
   checkpoint (accept / override-with-reason / flag). Travelling-light spark is
   injected by posture-flow.js. Built on OUR tokens: greens + copper, sharp
   radius, Livvic/Nunito type. Fully fluid; reflows on tablet and stacks on
   mobile. */
.home-v2 .pf-head{ margin:clamp(36px,4vw,56px) 0 clamp(16px,1.8vw,24px); max-width:64ch; }
.home-v2 .pf-head .eyebrow{ margin-bottom:var(--ds-space-3); }
.home-v2 .pf-head__h{ font-family:var(--ds-font-display); font-weight:600; font-size:var(--ds-text-h4);
  line-height:1.18; letter-spacing:-.012em; color:var(--ds-color-green-deep); margin:0; }
.home-v2 .pf-head__p{ font-size:var(--ds-text-body-sm); line-height:1.6; color:var(--ds-text-secondary);
  margin:var(--ds-space-3) 0 0; }

.home-v2 .pf-flow{ margin:clamp(18px,2vw,26px) 0 0; padding:clamp(16px,2vw,28px);
  background:var(--ds-surface-raised); border:var(--hair); border-radius:var(--ds-radius-sm);
  box-shadow:var(--elev-1); overflow:hidden; }
.home-v2 .pf-flow__svg{ width:100%; height:auto; display:block; overflow:visible; }

/* rails + arrowheads (green, calm) */
.home-v2 .pf-rails line{ stroke:var(--ds-color-green); stroke-width:2; opacity:.5; }
.home-v2 .pf-arrowhead{ fill:var(--ds-color-green); opacity:.7; }

/* stage boxes */
.home-v2 .pf-box{ fill:var(--ds-surface-raised); stroke:var(--ds-border-strong); stroke-width:1.4; }
.home-v2 .pf-box.is-strong{ fill:var(--ds-color-green-50); stroke:var(--ds-color-green-100); }

/* the agent cluster zone + dots: dim agents, green quorum, copper dissent */
.home-v2 .pf-zone{ fill:var(--ds-color-sage); stroke:var(--ds-border-subtle); stroke-width:1.4; }
.home-v2 .pf-agents circle{ fill:var(--ds-color-green-deep); opacity:.4; }
.home-v2 .pf-agents circle.pf-quorum{ fill:var(--ds-color-green); opacity:1; }
.home-v2 .pf-agents circle.pf-dissent{ fill:var(--ds-color-copper); opacity:.7; }

/* human-in-the-loop checkpoint: copper ring, deep-green disc, bone clinician */
.home-v2 .pf-hitl-ring{ stroke:var(--ds-color-copper); stroke-width:2.4; }
.home-v2 .pf-hitl-disc{ fill:var(--ds-color-green-deep); }
.home-v2 .pf-hitl-icon circle,
.home-v2 .pf-hitl-icon path{ stroke:var(--ds-color-bone); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* sign-off check */
.home-v2 .pf-check{ stroke:var(--ds-color-green); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }

/* the extra "what the clinician does" band */
.home-v2 .pf-decide-stem{ stroke:var(--ds-color-copper); stroke-width:1.6; stroke-dasharray:3 5; opacity:.55; }
.home-v2 .pf-choice-box{ fill:var(--ds-surface-raised); stroke:var(--ds-border-strong); stroke-width:1.3; }
.home-v2 .pf-choice-box.is-mid{ fill:var(--ds-color-copper-50); stroke:color-mix(in srgb, var(--ds-color-copper) 32%, transparent); }
.home-v2 .pf-choice-mk{ stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.home-v2 .pf-choice-mk.is-accept{ stroke:var(--ds-color-green); }
.home-v2 .pf-choice-mk.is-override{ stroke:var(--ds-color-copper); }
.home-v2 .pf-choice-mk.is-flag{ stroke:var(--ds-color-copper); }

/* labels (SVG text, tokenised; px values are SVG user-units, fixed by design) */
.home-v2 .pf-k{ font-family:var(--ds-font-ui); font-size:13px; font-weight:700; letter-spacing:.1em;
  fill:var(--ds-text-secondary); text-anchor:middle; }
.home-v2 .pf-k.is-on{ fill:var(--ds-color-green-deep); }
.home-v2 .pf-l{ font-family:var(--ds-font-ui); font-size:12px; fill:var(--ds-text-secondary); text-anchor:middle; }
.home-v2 .pf-l.is-on{ fill:var(--ds-text-secondary); }
.home-v2 .pf-n{ font-family:var(--ds-font-display); font-size:28px; font-weight:700; fill:var(--ds-color-green); text-anchor:middle; }
.home-v2 .pf-zone-k{ font-family:var(--ds-font-ui); font-size:14px; font-weight:700; letter-spacing:.1em;
  fill:var(--ds-color-green-deep); text-anchor:middle; }
.home-v2 .pf-zone-sub{ font-family:var(--ds-font-ui); font-size:12px; fill:var(--ds-text-secondary); text-anchor:middle; }
.home-v2 .pf-hitl-k{ font-family:var(--ds-font-ui); font-size:11.5px; font-weight:700; letter-spacing:.1em;
  fill:var(--ds-color-copper-ink); text-anchor:middle; }
.home-v2 .pf-choice-k{ font-family:var(--ds-font-ui); font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; fill:var(--ds-color-green-deep); text-anchor:middle; }

/* RESPONSIVE: the SVG scales fluidly down to tablet. On small viewports the
   16:9-ish diagram would shrink text below legibility, so let it keep its
   intrinsic aspect and allow a gentle horizontal scroll inside the framed card
   rather than crushing the labels. The flow reads left-to-right either way. */
@media(max-width:760px){
  .home-v2 .pf-flow{ padding:var(--ds-space-4); overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .home-v2 .pf-flow__svg{ min-width:600px; }
  .home-v2 .pf-head__p{ font-size:var(--ds-text-card); }
}

/* ---------------------------------------------------------------------------
   11 · THE GROUP · light editorial heritage act
   A two-column narrative: a CHAPTER timeline (copper trace spine, monospace
   folios, the three locked sentences) beside the trust spine rebuilt on the DS
   .cred credential card (duotone icons, honest-status chips, green outline-draw
   hover reused from .v3-module). A faint sage ground + a static constellation
   accent give the light act depth without a heavy dark treatment. Calm, sharp,
   fully tokenised. No animation beyond the page reveal.
--------------------------------------------------------------------------- */
/* light ground: a faint sage radial + warm bloom anchored top-right (the accent
   light source), echoing the dark acts' volumetric depth on a bone surface.
   Overrides the flat sage fill set in home-v3.css. */
.home-v2 .section_group{ position:relative; overflow:hidden;
  background:
    radial-gradient(64% 70% at 100% 0%, color-mix(in srgb, var(--ds-color-copper) 7%, transparent) 0%, transparent 50%),
    radial-gradient(120% 120% at 100% 0%, var(--ds-color-sage) 0%, color-mix(in srgb, var(--ds-color-sage) 55%, var(--ds-color-bone)) 60%, var(--ds-color-bone) 100%); }
.home-v2 .section_group .padding-global{ position:relative; z-index:1; }

/* static constellation accent (no JS): green ring + nodes around a copper core */
.home-v2 .grp-accent{ position:absolute; z-index:0; pointer-events:none;
  top:clamp(-150px,-9vw,-50px); right:clamp(-170px,-9vw,-70px);
  width:clamp(320px,40vw,620px); height:clamp(320px,40vw,620px); opacity:.5; }
.home-v2 .grp-accent__ring circle{ fill:none; stroke:var(--ds-color-green); stroke-width:1; opacity:.28; }
.home-v2 .grp-accent__node circle{ fill:var(--ds-color-green); opacity:.4; }
.home-v2 .grp-accent__core{ fill:var(--ds-color-copper); opacity:.85; }
@media(max-width:880px){ .home-v2 .grp-accent{ opacity:.32; width:clamp(260px,70vw,420px); height:clamp(260px,70vw,420px); right:-110px; top:-80px; } }

/* the two-column grid: timeline (left) | trust spine (right) */
.home-v2 .grp-grid{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(32px,4.5vw,72px);
  align-items:start; margin-top:clamp(32px,3.6vw,52px); }
@media(max-width:980px){ .home-v2 .grp-grid{ grid-template-columns:1fr; gap:clamp(34px,5vw,48px); } }

/* --- LEFT · chapter timeline ------------------------------------------------ */
.home-v2 .grp-arc{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.home-v2 .grp-arc__step{ position:relative; padding:0 0 clamp(26px,2.8vw,38px) clamp(30px,3vw,40px); }
.home-v2 .grp-arc__step:last-child{ padding-bottom:0; }
/* the trace spine: a vertical copper line running through the chapter dots */
.home-v2 .grp-arc__step::before{ content:""; position:absolute; left:5px; top:9px; bottom:0; width:2px;
  background:linear-gradient(var(--ds-color-copper), color-mix(in srgb, var(--ds-color-copper) 30%, transparent));
  opacity:.4; }
.home-v2 .grp-arc__step:last-child::before{ display:none; }
.home-v2 .grp-arc__dot{ position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%;
  background:var(--ds-color-bone); border:2px solid var(--ds-color-green); box-sizing:border-box; }
.home-v2 .grp-arc__step.is-now .grp-arc__dot{ background:var(--ds-color-copper); border-color:var(--ds-color-copper);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ds-color-copper) 18%, transparent); }
.home-v2 .grp-arc__folio{ display:inline-flex; align-items:center; gap:var(--ds-space-2);
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:var(--ds-text-micro); font-weight:600;
  letter-spacing:var(--ds-tracking-label); text-transform:uppercase; color:var(--ds-color-copper-ink); margin-bottom:var(--ds-space-2); }
.home-v2 .grp-arc__now{ font-family:var(--ds-font-ui); font-size:var(--ds-text-micro); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ds-color-bone); background:var(--ds-color-copper);
  border-radius:var(--ds-radius-pill); padding:2px 8px; }
.home-v2 .grp-arc__h{ font-family:var(--ds-font-display); font-size:var(--ds-text-feature-title); font-weight:600;
  line-height:1.2; letter-spacing:-.012em; color:var(--ds-color-green-deep); margin:0 0 var(--ds-space-2); }
.home-v2 .grp-arc__p{ font-size:var(--ds-text-feature-body); line-height:1.55; color:var(--ds-text-secondary);
  margin:0; max-width:42ch; }

/* --- RIGHT · trust spine as DS credential cards ----------------------------- */
.home-v2 .grp-spine__k{ display:block; font-family:var(--ds-font-ui); font-size:var(--ds-text-micro); font-weight:700;
  letter-spacing:var(--ds-tracking-label); text-transform:uppercase; color:var(--ds-text-secondary); margin-bottom:var(--ds-space-4); }
.home-v2 .grp-creds{ gap:clamp(14px,1.4vw,18px); }
/* reskin the DS .cred to the established home card pattern: drop the icon box,
   42px duotone mark, sharp radius, hairline card, feature title/body scale */
.home-v2 .grp-card{ border:var(--hair); border-radius:var(--ds-radius-sm); box-shadow:var(--elev-1);
  padding:clamp(20px,2vw,26px); position:relative; transition:transform var(--ds-dur) var(--ease), box-shadow var(--ds-dur) var(--ease); }
.home-v2 .grp-card .cred__ico{ width:42px; height:42px; background:none; border-radius:0; margin-bottom:var(--ds-space-4); }
.home-v2 .grp-card .cred__ico svg{ width:42px; height:42px; transition:transform .4s var(--ease); }
.home-v2 .grp-card:hover .cred__ico svg{ transform:scale(1.05); }
.home-v2 .grp-card .cred__nm{ font-size:var(--ds-text-feature-title); margin-bottom:var(--ds-space-1); }
.home-v2 .grp-card .cred__desc{ font-size:var(--ds-text-feature-body); margin-bottom:var(--ds-space-4); }
.home-v2 .grp-card .cred__st{ font-size:var(--ds-text-meta); letter-spacing:.08em; }
.home-v2 .grp-card .cred__st svg{ width:13px; height:13px; }

/* green outline-draw hover (reuse of the .v3-module language) on the cred cards */
.home-v2 .grp-card::before, .home-v2 .grp-card::after{ content:""; position:absolute; width:0; height:0; pointer-events:none; z-index:2; }
.home-v2 .grp-card::before{ top:0; left:0; border-top:2px solid var(--ds-color-green); border-left:2px solid var(--ds-color-green);
  transition:width .26s ease, height .26s ease .26s; }
.home-v2 .grp-card::after{ right:0; bottom:0; border-bottom:2px solid var(--ds-color-green); border-right:2px solid var(--ds-color-green);
  transition:width .26s ease, height .26s ease .26s; }
.home-v2 .grp-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-2); }
.home-v2 .grp-card:hover::before, .home-v2 .grp-card:hover::after{ width:100%; height:100%; }

/* card reveal stagger (mirrors the .v3-seg pattern so the grid eases in in step) */
.home-v2 .grp-creds.reveal .grp-card{ opacity:0; transform:translateY(16px); }
.home-v2 .grp-creds.reveal.in .grp-card{ opacity:1; transform:none;
  transition:opacity var(--ds-dur-slow) var(--ease), transform var(--ds-dur-slow) var(--ease); }
.home-v2 .grp-creds.reveal.in .grp-card:nth-child(1){ transition-delay:.04s; }
.home-v2 .grp-creds.reveal.in .grp-card:nth-child(2){ transition-delay:.10s; }
.home-v2 .grp-creds.reveal.in .grp-card:nth-child(3){ transition-delay:.16s; }
.home-v2 .grp-creds.reveal.in .grp-card:nth-child(4){ transition-delay:.22s; }
@media(prefers-reduced-motion:reduce){
  .home-v2 .grp-creds.reveal .grp-card{ opacity:1!important; transform:none!important; }
}

/* ---------------------------------------------------------------------------
   12 · CTA  (closing dark act · single-CTA discipline, elevated to the act bar)
   Same premium 4-stop green ground as the problem / govern acts (volumetric
   depth, top-right light source + faint warm copper bloom), a barely-there
   ambient canvas behind the content, and the booking-detail card reskinned to
   the established home card language with the green outline-draw hover.
--------------------------------------------------------------------------- */
/* 12a · premium volumetric ground (reuse of the .section_problem treatment),
   overriding the flat green gradient + copper top-border set in home-v3.css */
.home-v2 .section_cta{ position:relative; overflow:hidden; border-top:2px solid var(--ds-color-copper);
  background:
    radial-gradient(72% 80% at 100% 0%, rgba(216,108,30,0.14) 0%, rgba(216,108,30,0) 46%),
    radial-gradient(140% 132% at 100% 1%, #0d5a3b 0%, #084d33 30%, #043e29 60%, #022a1c 100%); }

/* 12b · ambient canvas layer: full-bleed behind the content, anchored to the
   top-right light source the ground blooms from (cta-bg.js mounts the canvas) */
.home-v2 .cta_bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.9; }
.home-v2 .section_cta .padding-global{ position:relative; z-index:1; }
@media(max-width:880px){ .home-v2 .cta_bg{ opacity:.55; } }

/* 12c · copy column */
.home-v2 .v3-cta__sub{ font-size:var(--ds-text-body-lg); line-height:1.55; }
@media(max-width:680px){ .home-v2 .v3-cta__actions .button{ width:100%; justify-content:center; } }

/* 12d · booking-detail card: lift it to a clearly-defined panel on the dark
   ground (same opaque-on-dark recipe as the problem cards), sharp radius, a
   kicker, and the GREEN outline-draw hover reused from .v3-module / .v3-seg. */
.home-v2 .v3-cta__meta{ position:relative; gap:var(--ds-space-4);
  background:linear-gradient(180deg, rgba(255,245,233,.10), rgba(255,245,233,.05)), var(--ds-color-green-deep);
  border:1px solid rgba(255,245,233,.22); border-radius:var(--ds-radius-sm);
  box-shadow:0 1px 2px rgba(0,0,0,.22), 0 12px 30px rgba(0,0,0,.16);
  padding:clamp(22px,2.4vw,30px);
  transition:transform var(--ds-dur) var(--ease), box-shadow var(--ds-dur) var(--ease), border-color var(--ds-dur) var(--ease); }
.home-v2 .cta_meta__k{ display:block; font-family:var(--ds-font-ui); font-size:var(--ds-text-micro); font-weight:700;
  letter-spacing:var(--ds-tracking-label); text-transform:uppercase; color:var(--ds-color-copper-light);
  padding-bottom:var(--ds-space-3); border-bottom:1px solid rgba(255,245,233,.16); margin-bottom:var(--ds-space-1); }
.home-v2 .v3-cta__meta .row b{ font-size:var(--ds-text-card); }
.home-v2 .v3-cta__meta .row svg{ transition:transform .4s var(--ease); }
.home-v2 .v3-cta__meta:hover{ transform:translateY(-3px); border-color:rgba(233,166,107,.5);
  box-shadow:0 1px 2px rgba(0,0,0,.24), 0 22px 50px rgba(0,0,0,.22); }
.home-v2 .v3-cta__meta:hover .row svg{ transform:scale(1.06); }
/* green outline-draw hover (reuse of the .v3-module language): two pseudo-edges
   meet at opposite corners as the card is hovered */
.home-v2 .v3-cta__meta::before, .home-v2 .v3-cta__meta::after{ content:""; position:absolute; width:0; height:0; pointer-events:none; z-index:2; }
.home-v2 .v3-cta__meta::before{ top:0; left:0; border-top:2px solid var(--ds-color-green); border-left:2px solid var(--ds-color-green);
  transition:width .26s ease, height .26s ease .26s; }
.home-v2 .v3-cta__meta::after{ right:0; bottom:0; border-bottom:2px solid var(--ds-color-green); border-right:2px solid var(--ds-color-green);
  transition:width .26s ease, height .26s ease .26s; }
.home-v2 .v3-cta__meta:hover::before, .home-v2 .v3-cta__meta:hover::after{ width:100%; height:100%; }
@media(prefers-reduced-motion:reduce){
  .home-v2 .v3-cta__meta, .home-v2 .v3-cta__meta:hover{ transform:none; }
}

/* ---------------------------------------------------------------------------
   13 · DARK-SURFACE FOCUS RINGS + GHOST BUTTON (accessibility, from the canon)
--------------------------------------------------------------------------- */
.home-v2 .section_problem :focus-visible,
.home-v2 .section_govern  :focus-visible,
.home-v2 .section_cta     :focus-visible,
.home-v2 [data-theme="dark"] :focus-visible{ outline-color:var(--ds-color-copper-light); }
.home-v2 .button.is-ghost{ border-color:rgba(255,245,233,.6); }

/* tone the dark-act corner bgfield constellations down (busy behind cards).
   (The closing CTA no longer uses a static .v3-bgfield SVG; it carries the
   live cta-bg.js ambient instead, so it is intentionally not listed here.) */
.home-v2 .section_problem .v3-bgfield svg,
.home-v2 .section_govern  .v3-bgfield svg{ width:min(70%,860px); opacity:.16; }

/* ---------------------------------------------------------------------------
   14 · COARSE-POINTER TAP TARGETS (>=44px on inline CTAs)
--------------------------------------------------------------------------- */
@media(pointer:coarse){
  .home-v2 .link-arrow,
  .home-v2 .v3-module__lk,
  .home-v2 .v3-seg__lk{ min-height:44px; display:inline-flex; align-items:center; }
  .home-v2 .v3-audit__export{ min-height:44px; }
}

/* ---------------------------------------------------------------------------
   15 · SEAM DIVIDER ON BONE (the mark sits on the page ground between acts)
--------------------------------------------------------------------------- */
.home-v2 .v3-seam__mark{ background:var(--ds-color-bone); }

/* ---------------------------------------------------------------------------
   16 · FOOTER  - uses the live DS .site-foot__* component (styled in brand.css).
   The DS __top grid is brand + 2 columns (1.3fr 1fr 1fr); this page carries FOUR
   link columns (Platform / Segments / Governance / Company), so widen the grid to
   brand + 4 columns in one clean row, with sensible wrap below.
--------------------------------------------------------------------------- */
.home-v2 .site-foot__top{ grid-template-columns:1.6fr repeat(4, minmax(0,1fr)); gap:clamp(20px,2.4vw,40px); }
@media(max-width:1100px){
  .home-v2 .site-foot__top{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .home-v2 .site-foot__top > div:first-child{ grid-column:1 / -1; }   /* brand spans the row */
}
@media(max-width:680px){ .home-v2 .site-foot__top{ grid-template-columns:1fr 1fr; } }
@media(max-width:460px){ .home-v2 .site-foot__top{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   17 · REVEAL stagger parity (mirror home-v3 under .home-v2 so the page works
   even when scoped selectors in home-v3.css target only .home-v3).
--------------------------------------------------------------------------- */
.home-v2 .reveal.is-deep{ transform:translateY(34px); }
.home-v2 .reveal.is-deep.in{ transform:none; }
.home-v2 .v3-problem-grid.reveal .v3-pcard,
.home-v2 .v3-modules.reveal .v3-module,
.home-v2 .v3-segments.reveal .v3-seg,
.home-v2 .v3-tiles.reveal .v3-tile{ opacity:0; transform:translateY(16px); }
.home-v2 .v3-problem-grid.reveal.in .v3-pcard,
.home-v2 .v3-modules.reveal.in .v3-module,
.home-v2 .v3-segments.reveal.in .v3-seg,
.home-v2 .v3-tiles.reveal.in .v3-tile{ opacity:1; transform:none;
  transition:opacity var(--ds-dur-slow) var(--ease),transform var(--ds-dur-slow) var(--ease); }
.home-v2 .reveal.in .v3-pcard:nth-child(1),.home-v2 .reveal.in .v3-module:nth-child(1),
.home-v2 .reveal.in .v3-seg:nth-child(1),.home-v2 .reveal.in .v3-tile:nth-child(1){ transition-delay:.04s; }
.home-v2 .reveal.in .v3-pcard:nth-child(2),.home-v2 .reveal.in .v3-module:nth-child(2),
.home-v2 .reveal.in .v3-seg:nth-child(2),.home-v2 .reveal.in .v3-tile:nth-child(2){ transition-delay:.10s; }
.home-v2 .reveal.in .v3-pcard:nth-child(3),.home-v2 .reveal.in .v3-module:nth-child(3),
.home-v2 .reveal.in .v3-seg:nth-child(3),.home-v2 .reveal.in .v3-tile:nth-child(3){ transition-delay:.16s; }
.home-v2 .reveal.in .v3-pcard:nth-child(4),.home-v2 .reveal.in .v3-module:nth-child(4),
.home-v2 .reveal.in .v3-tile:nth-child(4){ transition-delay:.22s; }
.home-v2 .reveal.in .v3-pcard:nth-child(5){ transition-delay:.28s; }
.home-v2 .reveal.in .v3-pcard:nth-child(6){ transition-delay:.34s; }
.home-v2 .reveal.in .v3-pcard:nth-child(7){ transition-delay:.40s; }
.home-v2 .reveal.in .v3-pcard:nth-child(8){ transition-delay:.46s; }
@media(prefers-reduced-motion:reduce){
  .home-v2 .reveal.is-deep{ transform:none!important; }
  .home-v2 .v3-problem-grid.reveal .v3-pcard,.home-v2 .v3-modules.reveal .v3-module,
  .home-v2 .v3-segments.reveal .v3-seg,.home-v2 .v3-tiles.reveal .v3-tile{ opacity:1!important; transform:none!important; }
}