/* ==========================================================================
   KIT4  -  the shared v4 component kit (REQUIREMENTS.md section M, SSF parity).
   Five reusable pieces, each on navy and on a light section in _kit4-lab.html:

     M1  .k4-grad               gradient accent text (deep crimson -> crimson -> coral -> rose)
     M2  .k4-btn                primary / secondary / ghost / text link buttons
     M3  .k4-iso                isometric scene primitives (plate, glass block, glowing marker, drop line)
     M4  .k4-card[data-k4-draw] card illustrations drawn from data (kit4.js builds the SVG)
     M5  .k4-explain            isometric zone picker: clickable zones, a popover with a real photo + facts

   Tokens: this file derives its own --k4-* custom properties from the site's
   fable.css tokens (navy ground, crimson, glass, ease curves) with literal
   fallbacks matching REQUIREMENTS palette, so it still renders sanely if
   fable.css is not present. Load order on a real page: fable.css, THEN
   motion-kit.css (the one-shot heading arrival sweep already lives there),
   THEN this file.

   Box rule: a .k4-card or .k4-explain__panel answers hover and keyboard focus
   with a 1.5px crimson ring on its own edge and nothing else (motion-kit.css
   section 6 draws it). The card itself never lifts, glows or washes. What is
   INSIDE the card reacts (R10 restore, Dev Q8): the drawing recolours and its
   accent lights, the eyebrow and the stat brighten, the link draws its
   underline and its arrow nudges. The hover host is the .k4-card, or any
   element carrying data-k4-host (a plain big-number block with a drawing).

   Motion-kit note (M1): the slow gradient drift here is this file's own.
   The ONE-TIME arrival shine on scroll is NOT duplicated here  -  motion-kit.js
   already gives every `h1`/`h2`/`.js-reveal-title` inside `<main>` one arrival
   sweep the first time it scrolls into view (hero once per page view, each
   section heading once). Put `.k4-grad` on a real heading and it is picked
   up automatically; do not add a second shine mechanism on top of it.

   ------------------------------------------------------------------------
   COPY-PASTE MARKUP
   ------------------------------------------------------------------------

   M1 GRADIENT TEXT
   -----------------
   <h2 class="h-2">Turning heart failure into <em class="k4-grad">heart success</em>.</h2>
   <!-- on a light/paper section, swap the modifier so the gradient never washes out: -->
   <h2 class="h-2">Turning heart failure into <em class="k4-grad k4-grad--light">heart success</em>.</h2>

   M2 BUTTONS
   -----------------
   <a class="k4-btn k4-btn--primary" href="#">
     <span class="k4-btn__glow" aria-hidden="true"></span>
     <span class="k4-btn__glint" aria-hidden="true"></span>
     <span class="k4-btn__label">Start a conversation</span>
     <span class="arr" aria-hidden="true">&#8594;</span>
   </a>
   <a class="k4-btn k4-btn--secondary" href="#"><span class="k4-btn__label">Google Scholar</span><span class="arr" aria-hidden="true">&#8594;</span></a>
   <button class="k4-btn k4-btn--ghost" type="button"><span class="k4-btn__label">Read the research</span></button>
   <a class="k4-btn k4-btn--text" href="#"><span class="k4-btn__label">All 100 plus on Google Scholar</span><span class="arr" aria-hidden="true">&#8594;</span></a>

   M3 ISOMETRIC SCENE PRIMITIVES
   -----------------
   <div class="k4-iso">
     <svg class="k4-iso__svg" viewBox="-370 -240 740 440" aria-hidden="true">
       <defs>
         <linearGradient id="k4PlateGrad" x1="0" y1="0" x2="0" y2="1">
           <stop offset="0" stop-color="#1B2E57"/><stop offset="1" stop-color="#0C1833"/>
         </linearGradient>
         <linearGradient id="k4GlassTop" x1="0" y1="0" x2="1" y2="1">
           <stop offset="0" stop-color="#E23A46" stop-opacity=".55"/><stop offset="1" stop-color="#9C1B27" stop-opacity=".35"/>
         </linearGradient>
       </defs>
       <polygon class="k4-iso__plate" points="-64,-170 320,34 64,170 -320,-34"/>
       <!-- one block: top / left / right faces, darkest to lightest -->
       <polygon class="k4-iso__face k4-iso__face--right" points="…"/>
       <polygon class="k4-iso__face k4-iso__face--left"  points="…"/>
       <polygon class="k4-iso__face k4-iso__face--top"   points="…"/>
     </svg>
     <!-- the marker sits directly ON the object its fact belongs to (its --x/--y
          match a point on the object itself); REQUIREMENTS J4/L1 ban a dot
          floating apart from the object and joined to it by a connector line
          (HUB/PATH), so there is no drop-line element here at all. -->
     <button class="k4-iso__marker" type="button" aria-label="One real fact, read straight off the page copy" aria-describedby="k4lbl-1" style="--x:50%;--y:30%">
       <span class="k4-iso__marker-dot" aria-hidden="true"></span>
     </button>
     <span class="k4-iso__label" id="k4lbl-1" role="status">One real fact, read straight off the page copy</span>
   </div>

   M4 CARD DRAWINGS (kit4.js reads data-k4-draw + the data-* params and builds the SVG)
   -----------------
   <article class="k4-card" data-rise="1">
     <!-- hover and focus on the card = its 1.5px border ring, nothing else (the
          box rule, motion-kit.css section 6): no top bar, no lift, no glow -->
     <span class="k4-card__num k4-grad">01</span>
     <div class="k4-card__art" data-k4-draw="grid" data-n="11" data-k="1" aria-hidden="true"></div>
   <!-- data-k counts lit cells FROM THE END of the n cells (here: the 11th of 11) -->
   <!-- full data-* reference per draw type:
        grid     data-n (total cells) data-k (how many lit, counted from the end)
        dots     data-dots (how many of the fixed dot field read as "accent")
        docs     data-docs (how many sheets in the stack, 3-6)
        pin      data-px data-py (0-200 x 0-92 SVG units where the pin settles,
                 drawn over a small crossing street grid, never a ring/oval);
                 for an actual map location, never reused for an institution
        hub      no params; draws a hospital building (a main block, two
                 lower wings, a window grid, an entrance, one crimson medical
                 cross) -- the institution itself, never a map+pin
        timeline data-years="1999,2020" (two real cited years)
        roles    no params; draws four individual objects (a lectern, rising
                 blocks, a flask, a shield) side by side, never nodes on lines
        ecg      no params; draws a heartbeat waveform -->
     <span class="k4-card__eyebrow">National leadership</span>
     <p class="k4-card__stat">OPTN / UNOS Region 11</p>
     <p class="k4-card__note">National Heart Committee and organ allocation policy.</p>
   </article>
   <!-- data-k4-draw values: grid | dots | docs | pin | timeline | roles | ecg -->

   M5 INTERACTIVE EXPLAINER
   -----------------
   <div class="k4-explain">
     <div class="k4-explain__plan">
       <svg class="k4-iso__svg" viewBox="-370 -240 740 440" aria-hidden="true">…plate + 6 bay blocks…</svg>
       <div class="k4-explain__zones" role="group" aria-label="Choose a program">
         <button class="k4-explain__zone" type="button" data-zone="01" aria-pressed="true" style="--x:28%;--y:27%">
           <span class="k4-explain__zone-n">01</span>
         </button>
         <!-- …zones 02-06… -->
       </div>
     </div>
     <div class="k4-explain__panel" data-zone-panel>
       <img class="k4-explain__photo" src="assets/images/real/team-candid.webp" alt="" width="640" height="480">
       <span class="k4-explain__ord k4-grad">01</span>
       <h3 class="k4-explain__title">Advanced Heart Failure Programs</h3>
       <p class="k4-explain__note">The team, the pathways, and the standards a real heart failure service runs on.</p>
       <a class="k4-btn k4-btn--secondary" href="speaking.html#engagements"><span class="k4-btn__label">See the speaking program</span><span class="arr" aria-hidden="true">&#8594;</span></a>
     </div>
   </div>
   ========================================================================== */

:root{
  --k4-navy:       var(--navy-ground, #0C1833);
  --k4-navy-rgb:   var(--navy-ground-rgb, 12 24 51);
  --k4-crimson:    var(--crimson-vivid, #E23A46);
  --k4-crimson-rgb:var(--crimson-bright-rgb, 226 58 70);
  --k4-coral:      var(--crimson-glow, #FF6B75);
  --k4-rose:       #FF8F6B;
  --k4-deep:       var(--crimson-deep, #9C1B27);
  --k4-ink:        var(--ink-on-dark, #F4F7FB);
  --k4-ink-light:  var(--ink, #0B1B33);
  --k4-ease:       var(--ease-snap, cubic-bezier(.16,1,.3,1));
  --k4-ease-soft:  var(--ease-soft, cubic-bezier(.4,0,.15,1));

  --k4-grad-text:      var(--grad-shine-dark,  linear-gradient(100deg,#9C1B27 0%,#E23A46 30%,#FF6B75 55%,#FF8F6B 72%,#E23A46 88%,#9C1B27 100%));
  --k4-grad-text-light:var(--grad-shine-light, linear-gradient(100deg,#6B0F14 0%,#9C1B27 32%,#C0343C 55%,#9C1B27 78%,#6B0F14 100%));
  --k4-grad-btn:       linear-gradient(120deg,#E23A46 0%,#C0343C 60%,#A5202A 100%);
  --k4-grad-btn-hot:   linear-gradient(120deg,#E23A46 0%,#FF5C6A 55%,#FF6B75 100%);
  --k4-glow:           var(--glow-crimson, 0 0 26px -8px rgb(226 58 70 / .55), 0 0 84px -26px rgb(226 58 70 / .38));
  --k4-glass-bg:       var(--glass-2-bg, linear-gradient(rgb(255 255 255 / .09),rgb(255 255 255 / .09)), rgb(12 24 51 / .62));
  --k4-glass-filter:   var(--glass-2-filter, blur(24px) saturate(160%));
  --k4-glass-shadow:   var(--glass-2-shadow, 0 30px 70px -35px rgb(0 0 0 / .6));

  /* focus ring colour: coral reads fine on navy (about 6.4:1) but drops to
     about 2.6:1 on the light sections, below the WCAG 1.4.11 3:1 minimum
     for a UI indicator, so .k4-sec--light repoints this to the deep crimson. */
  --k4-focus: var(--k4-coral);
}
.k4-sec--light{ --k4-focus: var(--k4-deep); }

/* ---------------------------------------------------------------------- */
/* LAB CHROME (scoped to _kit4-lab.html only)                              */
/* ---------------------------------------------------------------------- */
.k4lab{ background:var(--k4-navy); }
.k4lab__head{
  padding:clamp(2.2rem,6vw,4rem) clamp(1.25rem,5vw,4.5rem) clamp(1.5rem,4vw,2.5rem);
  max-width:1400px; margin-inline:auto;
}
.k4lab__tag{ display:inline-block; font:700 .72rem/1 var(--label,'Space Grotesk',sans-serif); letter-spacing:.16em; text-transform:uppercase; color:var(--k4-coral); margin:0 0 .9rem; }
.k4lab__h{ font:800 clamp(2rem,4.4vw,3.2rem)/1.04 var(--display,'Cabinet Grotesk',sans-serif); color:var(--k4-ink); letter-spacing:-.02em; margin:0 0 .6rem; }
.k4lab__p{ font:400 1.05rem/1.6 var(--body,'Satoshi',sans-serif); color:rgb(244 247 251 / .66); max-width:62ch; margin:0; }

.k4-sec{ padding:clamp(3rem,8vw,5.5rem) clamp(1.25rem,5vw,4.5rem); }
.k4-sec--dark{ background:var(--k4-navy); color:var(--k4-ink); }
.k4-sec--light{ background:#F4F7FB; color:#0B1B33; }
.k4-sec__inner{ max-width:1400px; margin-inline:auto; }
.k4-sec__label{ display:inline-flex; align-items:center; gap:.6rem; font:700 .72rem/1 var(--label,'Space Grotesk',sans-serif); letter-spacing:.16em; text-transform:uppercase; color:var(--k4-coral); margin:0 0 1rem; }
.k4-sec--light .k4-sec__label{ color:var(--k4-deep); }
.k4-sec__h{ font:800 clamp(1.6rem,3vw,2.3rem)/1.08 var(--display,'Cabinet Grotesk',sans-serif); letter-spacing:-.015em; margin:0 0 .5rem; }
.k4-sec__p{ font:400 1rem/1.6 var(--body,'Satoshi',sans-serif); max-width:60ch; opacity:.78; margin:0 0 2.2rem; }

.k4-row{ display:flex; flex-wrap:wrap; gap:1.1rem 1.4rem; align-items:center; margin-bottom:2.4rem; }
.k4-row:last-child{ margin-bottom:0; }
.k4-grid{ display:grid; gap:1.4rem; }
.k4-grid--cards{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

.k4-code{
  margin:1.6rem 0 0; padding:1.1rem 1.3rem; border-radius:var(--r-md,10px);
  background:rgb(0 0 0 / .28); border:1px solid rgb(255 255 255 / .1);
  font:400 .78rem/1.6 ui-monospace,Consolas,monospace; color:rgb(244 247 251 / .72);
  overflow-x:auto; white-space:pre;
}
.k4-sec--light .k4-code{ background:rgb(11 27 51 / .05); border-color:rgb(11 27 51 / .12); color:rgb(11 27 51 / .76); }

/* ========================================================================
   M1  -  GRADIENT TEXT
   ======================================================================== */
.k4-grad{
  background-image:var(--k4-grad-text);
  background-size:230% 100%;
  background-position:18% 50%;
  -webkit-background-clip:text; background-clip:text;
  color:var(--k4-crimson); -webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  font-style:normal;
  /* background-position is a paint-triggering property, not a compositor
     one, so this only actually runs while kit4.js confirms the element is
     on screen AND the tab is visible (.k4-grad--run); paused otherwise so
     an off-screen or backgrounded instance never keeps repainting. With no
     JS at all the gradient still renders, just static at its start frame. */
  animation:k4GradDrift 11s ease-in-out infinite;
  animation-play-state:paused;
}
.k4-grad--run{ animation-play-state:running; }
.k4-grad--light{
  background-image:var(--k4-grad-text-light);
  color:var(--k4-deep);
}
@keyframes k4GradDrift{
  0%,100%{ background-position:10% 50%; }
  50%{ background-position:90% 50%; }
}
@media (prefers-reduced-motion:reduce){
  .k4-grad{ animation:none; background-position:30% 50%; }
}

/* ========================================================================
   M2  -  BUTTONS
   ======================================================================== */
.k4-btn{
  --k4h:44px;
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:var(--k4h); min-width:var(--k4h);
  padding:.95rem 1.65rem;
  border:0; border-radius:999px; cursor:pointer;
  font:600 .95rem/1 var(--body,'Satoshi',sans-serif); letter-spacing:.005em;
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  color:var(--k4-ink);
  background:var(--k4-grad-btn);
  box-shadow:0 16px 34px -20px rgb(0 0 0 / .5);
  transition:transform .32s var(--k4-ease), box-shadow .32s var(--k4-ease), background .4s var(--k4-ease);
}
.k4-btn .arr{ transition:transform .3s var(--k4-ease); line-height:1; }
.k4-btn__glow{
  position:absolute; left:10%; right:10%; bottom:-30%; height:70%; z-index:-2;
  border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%, rgb(var(--k4-crimson-rgb) / .65), transparent 72%);
  filter:blur(13px);
  transition:opacity .35s var(--k4-ease-soft);
}
.k4-btn__glint{
  position:absolute; inset:0; z-index:1; border-radius:inherit; overflow:hidden; pointer-events:none;
}
.k4-btn__glint::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 32%, rgb(255 255 255 / .6) 48%, transparent 64%);
  background-size:260% 100%; background-position:160% 0; background-repeat:no-repeat;
  mix-blend-mode:screen;
}

@media (hover:hover) and (pointer:fine){
  .k4-btn--primary:hover{
    background:var(--k4-grad-btn-hot);
    transform:translateY(-2px);
    box-shadow:var(--k4-glow);
  }
  .k4-btn--primary:hover .k4-btn__label{ text-shadow:0 1px 2px rgb(0 0 0 / .25); }
  .k4-btn--primary:hover .k4-btn__glow{ opacity:1; }
  .k4-btn--primary:hover .k4-btn__glint::after{ animation:k4Glint .85s var(--k4-ease) 1; }
  .k4-btn--primary:hover .arr{ transform:translateX(4px); }
}
.k4-btn--primary:focus-visible{
  background:var(--k4-grad-btn-hot);
  box-shadow:var(--k4-glow);
}
.k4-btn--primary:focus-visible .k4-btn__label{ text-shadow:0 1px 2px rgb(0 0 0 / .25); }
.k4-btn--primary:focus-visible .k4-btn__glow{ opacity:1; }
@keyframes k4Glint{ to{ background-position:-60% 0; } }

.k4-btn:active{ transform:translateY(0) scale(.97); }
.k4-btn:focus-visible{ outline:2px solid var(--k4-focus); outline-offset:3px; }

/* the glass pill is for a navy ground only; on a photograph use .k4-btn--onphoto */
.k4-btn--secondary{
  background:var(--k4-glass-bg); -webkit-backdrop-filter:var(--k4-glass-filter); backdrop-filter:var(--k4-glass-filter);
  border:1px solid rgb(var(--k4-crimson-rgb) / .34);
  box-shadow:var(--k4-glass-shadow);
  color:var(--k4-ink);
}
.k4-sec--light .k4-btn--secondary{
  background:rgb(255 255 255 / .75); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  color:var(--k4-ink-light); border-color:rgb(var(--k4-crimson-rgb) / .3); box-shadow:0 20px 40px -28px rgb(11 27 51 / .25);
}
@media (hover:hover) and (pointer:fine){
  .k4-btn--secondary:hover{
    border-color:rgb(var(--k4-crimson-rgb) / .72);
    box-shadow:var(--k4-glass-shadow), 0 0 0 1px rgb(var(--k4-crimson-rgb) / .4) inset, 0 0 30px -10px rgb(var(--k4-crimson-rgb) / .5);
    transform:translateY(-1px);
  }
}
.k4-btn--secondary:focus-visible{ border-color:rgb(var(--k4-crimson-rgb) / .8); }

/* a secondary action on a dark photograph: no fill, no blur, no shadow. Its ink follows the ground when the photo
   ink runtime has measured the pixels under it (var(--ink-c)); with no runtime it is the light ink. */
.k4-btn--onphoto,.k4-btn--secondary.k4-btn--onphoto{
  background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
  border:1.5px solid var(--ink-c,#F4F7FB); color:var(--ink-c,#F4F7FB);
  transition:border-color .25s var(--k4-ease-soft), box-shadow .25s var(--k4-ease-soft);
}
@media (hover:hover) and (pointer:fine){
  .k4-btn--onphoto:hover,.k4-btn--secondary.k4-btn--onphoto:hover{
    border-color:#FF6B75; box-shadow:0 0 22px -6px rgb(255 255 255 / .45); transform:none;
  }
  [data-ink="dark"].k4-btn--onphoto:hover{ border-color:#9C1B27; box-shadow:0 0 22px -6px rgb(156 27 39 / .35); }
}
.k4-btn--onphoto:focus-visible{ border-color:#FF6B75; box-shadow:0 0 22px -6px rgb(255 255 255 / .45); }
[data-ink="dark"].k4-btn--onphoto:focus-visible{ border-color:#9C1B27; box-shadow:0 0 22px -6px rgb(156 27 39 / .35); }
.k4-btn--ghost{
  background:transparent; color:var(--k4-ink);
  border:1px solid rgb(244 247 251 / .34);
  box-shadow:none;
}
.k4-sec--light .k4-btn--ghost{ color:var(--k4-ink-light); border-color:rgb(11 27 51 / .22); }
@media (hover:hover) and (pointer:fine){
  .k4-btn--ghost:hover{ background:rgb(var(--k4-crimson-rgb) / .1); border-color:rgb(var(--k4-crimson-rgb) / .55); transform:translateY(-1px); }
}

.k4-btn--text{
  min-height:auto; min-width:0; padding:.3rem 0 .35rem; border-radius:0;
  background:none; color:var(--k4-crimson); box-shadow:none; gap:.45rem;
}
.k4-sec--light .k4-btn--text{ color:var(--k4-deep); }
.k4-btn--text::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--k4-grad-text); border-radius:2px;
  transition:right .35s var(--k4-ease);
}
@media (hover:hover) and (pointer:fine){
  .k4-btn--text:hover::after{ right:0; }
  .k4-btn--text:hover .arr{ transform:translateX(3px); }
}
.k4-btn--text:focus-visible{ outline-offset:4px; }

@media (prefers-reduced-motion:reduce){
  .k4-btn, .k4-btn .arr, .k4-btn__glow, .k4-btn--text::after{ transition-duration:.01ms; }
  .k4-btn--primary:hover .k4-btn__glint::after{ animation:none; }
}

/* ========================================================================
   M3  -  ISOMETRIC SCENE PRIMITIVES
   ======================================================================== */
.k4-iso{ position:relative; width:100%; aspect-ratio:740/440; }
.k4-iso__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

.k4-iso__plate{ fill:url(#k4PlateGrad); stroke:rgb(255 255 255 / .08); stroke-width:1.5; }

.k4-iso__face{ stroke:rgb(255 255 255 / .16); stroke-width:1.25; }
.k4-iso__face--top{ fill:#FF8891; fill-opacity:.62; }
.k4-iso__face--left{ fill:var(--k4-crimson); fill-opacity:.55; }
.k4-iso__face--right{ fill:var(--k4-deep); fill-opacity:.78; }
.k4-iso__face--glass{ fill-opacity:.62; }

/* M3 showpiece objects: three genuinely different silhouettes (a stepped
   journal stack, a monitor on a stand, a banded globe), not one glass block
   repeated and relabelled. .k4-iso__part shares the plate/face fade-in. */
.k4-iso__page-line{ stroke:rgb(255 255 255 / .4); stroke-width:1.1; stroke-linecap:round; }

.k4-iso__screen{ fill:rgb(var(--k4-navy-rgb) / .86); stroke:rgb(255 255 255 / .22); stroke-width:1.25; }
.k4-iso__screen-edge{ fill:var(--k4-deep); fill-opacity:.85; stroke:rgb(255 255 255 / .16); stroke-width:1.1; }
.k4-iso__stand{ stroke:rgb(255 255 255 / .55); stroke-width:3; stroke-linecap:round; }
.k4-iso__foot{ fill:var(--k4-deep); fill-opacity:.85; stroke:rgb(255 255 255 / .16); stroke-width:1; }
.k4-iso__wave{ fill:none; stroke:var(--k4-coral); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgb(255 107 117 / .65)); }

.k4-iso__globe{ fill:url(#k4GlobeGrad); }
.k4-iso__globe-rim{ fill:none; stroke:rgb(255 255 255 / .3); stroke-width:1.25; }
.k4-iso__globe-shadow{ fill:rgb(0 0 0 / .32); }
.k4-iso__globe-band{ fill:none; stroke:rgb(255 255 255 / .45); stroke-width:1.1; }
.k4-iso__globe-band--accent{ stroke:var(--k4-coral); stroke-width:1.4; }
.k4-iso__globe-node{ fill:var(--k4-ink); filter:drop-shadow(0 0 4px rgb(255 107 117 / .8)); }

.k4-iso__marker{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:30px; height:30px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; -webkit-tap-highlight-color:transparent;
}
.k4-iso__marker-dot{
  position:relative; width:11px; height:11px; border-radius:3px;
  background:var(--k4-coral);
  box-shadow:0 0 0 3px rgb(var(--k4-crimson-rgb) / .22), 0 0 16px 2px rgb(255 107 117 / .65);
}
.k4-iso__marker-dot::after{
  content:''; position:absolute; inset:-9px; border-radius:6px;
  border:1.5px solid rgb(255 107 117 / .5);
  animation:k4Pulse 2.6s var(--k4-ease-soft) infinite;
}
.k4-iso__marker:nth-of-type(2n) .k4-iso__marker-dot::after{ animation-delay:-1.3s; }
@keyframes k4Pulse{
  0%{ transform:scale(.6); opacity:.9; }
  80%,100%{ transform:scale(1.9); opacity:0; }
}
.k4-iso__marker:hover .k4-iso__marker-dot,
.k4-iso__marker:focus-visible .k4-iso__marker-dot{
  background:var(--k4-ink); box-shadow:0 0 0 3px rgb(var(--k4-crimson-rgb) / .35), 0 0 22px 4px rgb(255 107 117 / .85);
}
.k4-iso__marker:focus-visible{ outline:2px solid var(--k4-focus); outline-offset:3px; border-radius:50%; }

.k4-iso__label{
  position:absolute; left:var(--x); top:calc(var(--y) - 7%); transform:translate(-50%,-100%);
  max-width:188px; padding:.55rem .8rem; border-radius:var(--r-md,10px);
  background:rgb(var(--k4-navy-rgb) / .94); border:1px solid rgb(var(--k4-crimson-rgb) / .45);
  color:var(--k4-ink); font:600 .76rem/1.35 var(--body,'Satoshi',sans-serif);
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
  box-shadow:0 14px 30px -14px rgb(0 0 0 / .6);
}
.k4-iso__marker:hover + .k4-iso__label,
.k4-iso__marker:focus-visible + .k4-iso__label{
  opacity:1; transform:translate(-50%,calc(-100% - 6px));
}

.k4-iso--enter .k4-iso__face,.k4-iso--enter .k4-iso__plate,.k4-iso--enter .k4-iso__part{
  opacity:0; transform:translateY(10px); transition:opacity .6s var(--k4-ease-soft), transform .6s var(--k4-ease-soft);
}
.k4-iso--enter.is-in .k4-iso__face,.k4-iso--enter.is-in .k4-iso__plate,.k4-iso--enter.is-in .k4-iso__part{ opacity:1; transform:translateY(0); }
.k4-iso--enter .k4-iso__marker{ opacity:0; transition:opacity .5s var(--k4-ease-soft); }
.k4-iso--enter.is-in .k4-iso__marker{ opacity:1; }

/* nothing may render blank if JS fails (hard rule): kit4.js is the only
   thing that ever adds .is-in, so if html still carries .no-js (fable.js's
   feature check never removed it, meaning real JS did not run), force the
   finished, fully visible state instead of staying armed-and-hidden. */
html.no-js .k4-iso--enter .k4-iso__face,
html.no-js .k4-iso--enter .k4-iso__plate,
html.no-js .k4-iso--enter .k4-iso__part{ opacity:1; transform:none; transition:none; }
html.no-js .k4-iso--enter .k4-iso__marker{ opacity:1; transition:none; }
.k4-iso--enter.is-in .k4-iso__marker:nth-of-type(1){ transition-delay:.15s; }
.k4-iso--enter.is-in .k4-iso__marker:nth-of-type(2){ transition-delay:.3s; }
.k4-iso--enter.is-in .k4-iso__marker:nth-of-type(3){ transition-delay:.45s; }
.k4-iso--enter.is-in .k4-iso__marker:nth-of-type(4){ transition-delay:.6s; }
.k4-iso--enter.is-in .k4-iso__marker:nth-of-type(5){ transition-delay:.75s; }
.k4-iso--enter.is-in .k4-iso__marker:nth-of-type(6){ transition-delay:.9s; }

@media (prefers-reduced-motion:reduce){
  .k4-iso__marker-dot::after{ animation:none; display:none; }
  .k4-iso--enter .k4-iso__face,.k4-iso--enter .k4-iso__plate,.k4-iso--enter .k4-iso__marker{ opacity:1; transform:none; transition:none; }
  .k4-iso__label{ transition:none; }
}

/* ========================================================================
   M4  -  CARD DRAWINGS (card shell; SVG content built by kit4.js)
   ======================================================================== */
.k4-card{
  position:relative; display:flex; flex-direction:column; gap:.65rem;
  padding:1.6rem 1.5rem 1.7rem;
  border-radius:var(--r-lg,14px);
  background:var(--k4-glass-bg); -webkit-backdrop-filter:var(--k4-glass-filter); backdrop-filter:var(--k4-glass-filter);
  border:1px solid rgb(255 255 255 / .12);
  box-shadow:var(--k4-glass-shadow);
  overflow:hidden;
}
.k4-sec--light .k4-card{
  background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
  border-color:rgb(11 27 51 / .1); box-shadow:0 30px 60px -40px rgb(11 27 51 / .3);
}
/* legacy markup still carries this top-bar span: it is a decorative line, so it never paints */
.k4-card__bar{ display:none; }
.k4-card__num{ font:800 1.5rem/1 var(--display,'Cabinet Grotesk',sans-serif); letter-spacing:-.02em; }
.k4-card__art{ position:relative; height:118px; margin:.3rem 0 .2rem; }
.k4-card__art svg{ width:100%; height:100%; overflow:visible; }
/* the host is empty until kit4.js builds its SVG; with no JS at all it takes no room (no dashed placeholder frame) */
html:not(.js) .k4-card__art:empty{ display:none; }
.k4-card__eyebrow{ font:700 .68rem/1 var(--label,'Space Grotesk',sans-serif); letter-spacing:.14em; text-transform:uppercase; opacity:.62; transition:opacity .35s var(--k4-ease); }
.k4-card__stat{ font:800 1.3rem/1.2 var(--display,'Cabinet Grotesk',sans-serif); margin:0; letter-spacing:-.01em; transition:text-shadow .35s var(--k4-ease), color .35s var(--k4-ease); }
.k4-card__note{ font:400 .92rem/1.5 var(--body,'Satoshi',sans-serif); opacity:.74; margin:0; }
.k4-card__list{ list-style:none; margin:0; padding:0; font:400 .86rem/1.45 var(--body,'Satoshi',sans-serif); opacity:.74; display:flex; flex-direction:column; gap:.2rem; }

/* optional per-card action link: <a class="k4-card__link" href="..."><span>Label</span>
   <span class="arr" aria-hidden="true">&#8594;</span></a>. The card carries the border ring;
   inside it the link draws its underline and the arrow nudges (parts of the box, not the box). */
.k4-card__link{
  position:relative; display:inline-flex; align-items:center; gap:.4rem; margin-top:.2rem;
  font:600 .88rem/1 var(--body,'Satoshi',sans-serif); color:var(--k4-crimson); text-decoration:none;
}
.k4-sec--light .k4-card__link{ color:var(--k4-deep); }
.k4-card__link::after{
  content:''; position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background:var(--k4-grad-text); border-radius:2px; transition:right .35s var(--k4-ease);
}
.k4-card__link .arr{ transition:transform .3s var(--k4-ease); line-height:1; }
.k4-card__link:focus-visible{ outline:2px solid var(--k4-focus); outline-offset:4px; }
.k4-card__link:focus-visible::after,
:is(.k4-card,[data-k4-host]):focus-within .k4-card__link::after{ right:0; }
@media (hover:hover) and (pointer:fine){
  :is(.k4-card,[data-k4-host]):hover .k4-card__link::after{ right:0; }
  :is(.k4-card,[data-k4-host]):hover .k4-card__link .arr{ transform:translateX(3px); }
}

/* inside the card: eyebrow brightens, the stat gets a soft light (text only, never the box) */
:is(.k4-card,[data-k4-host]):focus-within .k4-card__eyebrow{ opacity:.9; }
:is(.k4-card,[data-k4-host]):focus-within .k4-card__stat{ text-shadow:0 0 22px rgb(255 107 117 / .45); }
.k4-sec--light :is(.k4-card,[data-k4-host]):focus-within .k4-card__stat{ color:var(--k4-deep); text-shadow:none; }
@media (hover:hover) and (pointer:fine){
  :is(.k4-card,[data-k4-host]):hover .k4-card__eyebrow{ opacity:.9; }
  :is(.k4-card,[data-k4-host]):hover .k4-card__stat{ text-shadow:0 0 22px rgb(255 107 117 / .45); }
  .k4-sec--light :is(.k4-card,[data-k4-host]):hover .k4-card__stat{ color:var(--k4-deep); text-shadow:none; }
}

/* draw-path shared styling: kit4.js sets stroke-dasharray/offset inline and
   toggles [data-drawn] to animate the offset to 0 via this transition. */
.k4-draw{
  fill:none; stroke:rgb(244 247 251 / .4); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke-dashoffset 1.15s var(--k4-ease), stroke .35s ease, stroke-width .35s ease;
}
.k4-sec--light .k4-draw{ stroke:rgb(11 27 51 / .32); }
.k4-draw--accent{ stroke:var(--k4-coral); }
.k4-fill--accent{ fill:var(--k4-coral); }
.k4-fill--dim{ fill:rgb(244 247 251 / .22); }
.k4-sec--light .k4-fill--dim{ fill:rgb(11 27 51 / .16); }

/* the drawing answers its card: strokes lift to a brighter ink and the accent lights up */
:is(.k4-card,[data-k4-host]):focus-within .k4-draw{ stroke:rgb(244 247 251 / .68); }
.k4-sec--light :is(.k4-card,[data-k4-host]):focus-within .k4-draw{ stroke:rgb(11 27 51 / .5); }
:is(.k4-card,[data-k4-host]):focus-within .k4-draw--accent{ stroke:var(--k4-ink); filter:drop-shadow(0 0 5px rgb(255 107 117 / .7)); }
.k4-sec--light :is(.k4-card,[data-k4-host]):focus-within .k4-draw--accent{ filter:none; stroke:var(--k4-deep); }
:is(.k4-card,[data-k4-host]):focus-within .k4-fill--accent{ filter:drop-shadow(0 0 5px rgb(255 107 117 / .6)); }
@media (hover:hover) and (pointer:fine){
  :is(.k4-card,[data-k4-host]):hover .k4-draw{ stroke:rgb(244 247 251 / .68); }
  .k4-sec--light :is(.k4-card,[data-k4-host]):hover .k4-draw{ stroke:rgb(11 27 51 / .5); }
  :is(.k4-card,[data-k4-host]):hover .k4-draw--accent{ stroke:var(--k4-ink); filter:drop-shadow(0 0 5px rgb(255 107 117 / .7)); }
  .k4-sec--light :is(.k4-card,[data-k4-host]):hover .k4-draw--accent{ filter:none; stroke:var(--k4-deep); }
  :is(.k4-card,[data-k4-host]):hover .k4-fill--accent{ filter:drop-shadow(0 0 5px rgb(255 107 117 / .6)); }
}

/* filled shapes (dots, document text lines, pin head, the roles badges) fade and
   rise in; kit4.js adds .is-in to the .k4-card__art host once it has
   scrolled into view. Stroke paths in the same art use .k4-draw above
   (stroke-dashoffset, animated directly by kit4.js, no class needed). */
.k4-fade{ opacity:0; transform:translateY(4px); transition:opacity .5s var(--k4-ease-soft), transform .5s var(--k4-ease-soft); transform-box:fill-box; transform-origin:center; }
.k4-card__art.is-in .k4-fade{ opacity:1; transform:translateY(0); }
.k4-card__art.is-in .k4-fade:nth-child(1){ transition-delay:.05s; }
.k4-card__art.is-in .k4-fade:nth-child(2){ transition-delay:.1s; }
.k4-card__art.is-in .k4-fade:nth-child(3){ transition-delay:.15s; }
.k4-card__art.is-in .k4-fade:nth-child(4){ transition-delay:.2s; }
.k4-card__art.is-in .k4-fade:nth-child(5){ transition-delay:.25s; }

.k4-pin--settle{ animation:k4PinSettle .6s var(--k4-ease) .3s both; }
@keyframes k4PinSettle{
  0%{ transform:translateY(-14px) scale(.7); opacity:0; }
  60%{ transform:translateY(2px) scale(1.05); opacity:1; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  .k4-draw{ transition:none; }
  .k4-fade{ transition:none; }
  .k4-pin--settle{ animation:none; }
}

/* ========================================================================
   M5  -  INTERACTIVE EXPLAINER
   ======================================================================== */
.k4-explain{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
@media (max-width:860px){ .k4-explain{ grid-template-columns:1fr; } }

.k4-explain__plan{ position:relative; }
.k4-explain__zones{ position:absolute; inset:0; }
.k4-explain__zone{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:40px; height:40px; min-width:44px; min-height:44px;
  margin:-2px; display:grid; place-items:center;
  border-radius:10px; border:1.5px solid rgb(255 255 255 / .4); background:rgb(var(--k4-navy-rgb) / .55);
  color:var(--k4-ink); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--k4-ease), border-color .3s var(--k4-ease), transform .3s var(--k4-ease), box-shadow .3s var(--k4-ease);
}
.k4-explain__zone-n{ font:700 .78rem/1 var(--label,'Space Grotesk',sans-serif); }
@media (hover:hover) and (pointer:fine){
  /* a hotspot is a button on the photo, not a box: it keeps its small scale-up */
  .k4-explain__zone:hover{ transform:translate(-50%,-50%) scale(1.08); border-color:var(--k4-coral); }
}
.k4-explain__zone:focus-visible{ outline:2px solid var(--k4-focus); outline-offset:3px; }
.k4-explain__zone[aria-pressed="true"]{
  background:var(--k4-grad-btn); border-color:var(--k4-coral);
  box-shadow:0 0 0 5px rgb(var(--k4-crimson-rgb) / .22), 0 0 24px -4px rgb(255 107 117 / .7);
}

.k4-explain__panel{
  position:relative; padding:1.7rem 1.7rem 1.9rem; border-radius:var(--r-lg,14px);
  background:var(--k4-glass-bg); -webkit-backdrop-filter:var(--k4-glass-filter); backdrop-filter:var(--k4-glass-filter);
  border:1px solid rgb(255 255 255 / .12); box-shadow:var(--k4-glass-shadow);
}
.k4-sec--light .k4-explain__panel{ background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; border-color:rgb(11 27 51 / .1); box-shadow:0 30px 60px -40px rgb(11 27 51 / .3); }
.k4-explain__photo{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-md,10px);
  margin-bottom:1rem; filter:saturate(1.04) contrast(1.02);
}
.k4-explain__ord{ font:800 1.2rem/1 var(--display,'Cabinet Grotesk',sans-serif); display:block; margin-bottom:.3rem; }
.k4-explain__title{ font:800 1.3rem/1.2 var(--display,'Cabinet Grotesk',sans-serif); margin:0 0 .5rem; letter-spacing:-.01em; }
.k4-explain__note{ font:400 .96rem/1.55 var(--body,'Satoshi',sans-serif); opacity:.78; margin:0 0 1.2rem; }

.k4-explain__panel[data-swapping] .k4-explain__photo,
.k4-explain__panel[data-swapping] .k4-explain__ord,
.k4-explain__panel[data-swapping] .k4-explain__title,
.k4-explain__panel[data-swapping] .k4-explain__note{ opacity:0; transform:translateY(4px); }
.k4-explain__photo,.k4-explain__ord,.k4-explain__title,.k4-explain__note{
  transition:opacity .25s var(--k4-ease-soft), transform .25s var(--k4-ease-soft);
}
@media (prefers-reduced-motion:reduce){
  .k4-explain__zone{ transition:none; }
  .k4-explain__photo,.k4-explain__ord,.k4-explain__title,.k4-explain__note{ transition:none; }
}

@media (pointer:coarse){
  .k4-iso__marker{ width:38px; height:38px; }
}

/* The six --x/--y percentages are set for the plan at its full, one-column
   width. Above 860px .k4-explain becomes a two-column grid (plan ~55% of
   the container), which squeezes the plan element down to roughly 490px at
   a 1024px viewport, well under the width the fan-out spacing assumes: the
   fixed-size zone chips measured only ~3px apart there, the active chip's
   glow visibly bleeding into its neighbour. A plain 560px cutover missed
   this whole squeezed two-column range (measured safe again by 1200, once
   the plan column itself is wide enough). Below 1100px (comfortably past
   1024, the mandated check width) the picker drops the diagonal isometric
   placement and becomes a plain wrapping row under the plan instead,
   spaced by a real flex gap regardless of the plan's rendered width, still
   full touch-target size. */
@media (max-width:1100px){
  .k4-explain__zones{
    position:static; inset:auto;
    display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
    margin-top:1rem;
  }
  .k4-explain__zone{ position:static; left:auto; top:auto; transform:none; margin:0; }
}
@media (max-width:1100px) and (hover:hover) and (pointer:fine){
  .k4-explain__zone:hover{ transform:scale(1.08); border-color:var(--k4-coral); }
}