/* ============================================================
   Unizo marketing site — layout layer.
   Depends on the design system (styles.css). Tokens only, no raw hex.
   Prefix: uw-*  (unizo web) to avoid collision with uz-* system classes.
   ============================================================ */

/* ---------- shell ---------- */
.uw {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-8);
}


.uw-band {
  padding: var(--space-24) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.uw-band--tight { padding: var(--space-16) 0; }


.uw-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.uw-h1 {
  font-size: clamp(34px, 5vw, 60px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  margin: var(--space-6) 0 var(--space-5);
  max-width: 16em;
}
.uw-h2 {
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: var(--ls-tighter);
  margin: var(--space-4) 0 0;
  max-width: 19em;
}
.uw-lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  max-width: 42em;
  margin-top: var(--space-4);
}
.uw-body { color: var(--text-secondary); font-size: var(--text-md); line-height: var(--lh-relaxed); }
.uw-center { text-align: center; }
.uw-center .uw-h2, .uw-center .uw-lead { margin-left: auto; margin-right: auto; }

/* ---------- nav ---------- */
.uw-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg-canvas) 84%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.uw-nav__in { display: flex; align-items: center; gap: var(--space-7, 28px); height: 64px; }
.uw-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 20px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tighter); color: var(--text-primary);
  text-decoration: none;
}
/* Wordmark: single-colour mask painted with currentColor, so it themes
   automatically (ink on light, light on dark) from .uw-brand's color.
   Mask URL resolves relative to this stylesheet, so one path serves every page. */
.uw-brand__mark {
  display: block;
  width: 79px; height: 22px;               /* 447:124 ratio, cap-height matched to old 20px text */
  background: currentColor;
  -webkit-mask: url("../img/unizo-wordmark.svg") no-repeat center / contain;
          mask: url("../img/unizo-wordmark.svg") no-repeat center / contain;
}
/* footer lockup runs slightly smaller (was font-size:17px) */
.uw-foot .uw-brand__mark { width: 67px; height: 19px; }
.uw-navlinks { display: flex; gap: 22px; font-size: var(--text-sm); }
.uw-navlinks a { color: var(--text-secondary); text-decoration: none; transition: var(--transition-colors); }
.uw-navlinks a:hover { color: var(--text-primary); }
.uw-nav__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2-5); }
.uw-themebtn {
  width: var(--control-md); height: var(--control-md);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-default);
  background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: var(--transition-colors);
}
.uw-themebtn:hover { color: var(--text-primary); border-color: var(--border-strong); }


/* ---------- hero ---------- */
.uw-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-subtle); }
.uw-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 82% 72% at 68% 28%, #000 28%, transparent 78%);
}
.uw-hero__in { position: relative; padding: var(--space-20) 0 var(--space-24); }
.uw-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--accent-muted);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}
.uw-cta { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }
.uw-center .uw-cta { justify-content: center; }

/* ---------- cards ---------- */
.uw-grid { display: grid; gap: var(--space-4); margin-top: var(--space-11, 44px); }
.uw-grid--2 { grid-template-columns: repeat(2, 1fr); }




.uw-card { padding: var(--space-6); }
.uw-card h3 { font-size: var(--text-lg); letter-spacing: var(--ls-tight); }
.uw-card p { color: var(--text-secondary); font-size: var(--text-md); line-height: var(--lh-relaxed); margin-top: var(--space-2); }

/* ---------- the record device (evidence panel) ---------- */
.uw-record {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.95;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
}
.uw-record__ln { color: var(--text-disabled); margin-right: var(--space-2-5); user-select: none; }
.uw-record__ok { color: var(--status-verified); }
.uw-record__arrow { color: var(--text-tertiary); margin: 0 4px; }

/* ---------- split ---------- */
.uw-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }


.uw-list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.uw-list__it { display: flex; gap: var(--space-3); }
.uw-list__it i { color: var(--status-verified); flex: none; margin-top: 2px; }
.uw-list__it b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.uw-list__it span { color: var(--text-secondary); }



/* ---------- trust strip ---------- */
.uw-trust {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-wide); color: var(--text-tertiary);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  justify-content: center; text-transform: uppercase;
}
.uw-trust span::after { content: " ·"; color: var(--text-disabled); margin-left: var(--space-4); }
.uw-trust span:last-child::after { content: ""; }

/* ---------- footer ---------- */
.uw-foot { padding: var(--space-12) 0; }
.uw-foot__in { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); flex-wrap: wrap; }
.uw-foot__links { display: flex; gap: var(--space-6); font-size: var(--text-sm); flex-wrap: wrap; }
.uw-foot__links a { color: var(--text-secondary); text-decoration: none; }
.uw-foot__links a:hover { color: var(--text-primary); }
.uw-foot__pos { color: var(--text-tertiary); font-size: var(--text-sm); margin-top: var(--space-3); max-width: 34em; }
.uw-foot__legal { color: var(--text-tertiary); font-size: var(--text-xs); }

/* ---------- motion ---------- */
.js .uw-reveal { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: no-preference) {
  .js .uw-reveal { transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out); }
}
.js .uw-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .uw-reveal { opacity: 1; transform: none; } }

/* live pulse — the one looping element the system allows */
.uw-pulse { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--status-verified); }
@media (prefers-reduced-motion: no-preference) {
  .uw-pulse::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--status-verified); animation: uw-ping 2.4s var(--ease-out) infinite;
  }
}
@keyframes uw-ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* skip link */
.uw-skip {
  position: absolute; left: -9999px;
  background: var(--bg-raised); color: var(--text-primary);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); z-index: 100;
}
.uw-skip:focus { left: var(--space-4); top: var(--space-4); }

/* ============================================================
   VISUAL ARGUMENTS — section-specific figures.
   Each of these proves something the prose otherwise asserts.
   ============================================================ */

/* ---------- full-bleed dark band ---------- */
.uw-band--feature {
  background: var(--bg-canvas);
  /* Set colour, not just background. A section that forces data-theme
     swaps its tokens but still inherits `color` from <body> unless we
     bind it here. That is how five of the six stage titles rendered
     black on black at 1.05:1 when the page was light. */
  color: var(--text-primary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.uw-band--feature::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 82%);
}
.uw-band--feature > * { position: relative; }

/* ---------- statement band: one sentence, nothing else ---------- */
.uw-statement { padding: var(--space-32) 0; text-align: center; border-bottom: 1px solid var(--border-subtle); }
.uw-statement p {
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.18; letter-spacing: var(--ls-tighter);
  color: var(--text-primary); max-width: 20em; margin: 0 auto;
  font-weight: var(--fw-regular);
}
.uw-statement em { font-style: normal; color: var(--accent); }



/* ---------- attack path figure ---------- */
.uw-fig {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  overflow: hidden;
}
.uw-fig__bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2-5) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-tertiary);
}
.uw-fig__bar .uz-badge { margin-left: auto; }
.uw-fig__body { padding: var(--space-4) var(--space-3); }

/* the graph itself */
.uw-ap { width: 100%; display: block; }
.uw-ap .e  { stroke: var(--graph-line); stroke-width: 1.5; fill: none; }
.uw-ap .e--hot { stroke: var(--risk-critical); stroke-width: 2.2; stroke-dasharray: 5 3; }
.uw-ap .e--ok  { stroke: var(--status-verified); stroke-width: 2.2; }
.uw-ap .e--dead { stroke: var(--border-default); stroke-width: 1.2; stroke-dasharray: 2 4; }
.uw-ap .n  { fill: var(--bg-raised); stroke: var(--border-strong); stroke-width: 1.4; }
.uw-ap .n--risk { stroke: var(--risk-critical); stroke-width: 2; }
.uw-ap .n--ok   { stroke: var(--status-verified); stroke-width: 2; }
.uw-ap .n--entry { fill: var(--graph-node); stroke: none; }
.uw-ap .lbl { font-family: var(--font-mono); font-size: 10px; fill: var(--text-tertiary); }
.uw-ap .lbl--hot { fill: var(--risk-critical); }
.uw-ap .lbl--ok  { fill: var(--status-verified); }

@media (prefers-reduced-motion: no-preference) {
  .uw-ap .e--hot { stroke-dasharray: 240; stroke-dashoffset: 240; animation: uw-draw 4.6s var(--ease-inout) infinite; }
  .uw-ap .n--risk { animation: uw-riskpulse 2.6s var(--ease-inout) infinite; }
}
@keyframes uw-draw { 0% { stroke-dashoffset: 240; } 34%, 66% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -240; } }
@keyframes uw-riskpulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }




/* ============================================================
   USE-CASE CARD VARIANTS — exploration
   ============================================================ */

/* A · evidence record per card */
.uw-uc-rec {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 2;
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-3-5, 14px);
  margin-bottom: var(--space-5); overflow-x: auto; white-space: nowrap;
}
.uw-uc-rec .a { color: var(--text-tertiary); margin: 0 5px; }
.uw-uc-rec .h { color: var(--risk-critical); }
.uw-uc-rec .v { color: var(--status-verified); }
.uw-uc-rec .d { color: var(--text-tertiary); }
.uw-uc-rec .c { color: var(--accent); }

/* B · numbered shape label */
.uw-uc-shape {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.uw-uc-shape__n {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--text-disabled); letter-spacing: var(--ls-wider);
}
.uw-uc-shape__t {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--accent);
}





/* D · closed ticket, path still open */
.uw-ticket { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-default); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-surface); }
.uw-ticket__side { padding: var(--space-6); }
.uw-ticket__side + .uw-ticket__side { border-left: 1px solid var(--border-default); }
.uw-ticket__hd { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-2); }
.uw-ticket__card { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); background: var(--bg-inset); font-family: var(--font-mono); font-size: var(--text-xs); }
.uw-ticket__card .id { color: var(--text-tertiary); }
.uw-ticket__card .st { color: var(--status-verified); }
.uw-ticket__meta { color: var(--text-secondary); font-size: var(--text-xs); margin-top: var(--space-3); font-family: var(--font-mono); }


@keyframes uw-type { to { width: 100%; } }

/* ---------- funnel (no numbers) ---------- */
.uw-funnel3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-default); border-radius: var(--radius-card);
  overflow: hidden; background: var(--bg-surface); position: relative;
}
.uw-funnel3__c { padding: var(--space-10) var(--space-6); text-align: center; position: relative; }
.uw-funnel3__c + .uw-funnel3__c { border-left: 1px solid var(--border-default); }
.uw-funnel3__step { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-secondary); }
.uw-funnel3__h { font-size: clamp(19px, 2.2vw, 26px); letter-spacing: var(--ls-tight); margin-top: var(--space-5); color: var(--text-primary); line-height: 1.2; }
.uw-funnel3__h--void { color: var(--risk-critical); }
.uw-funnel3__sub { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-3); }
.uw-funnel3__note { grid-column: 1/-1; border-top: 1px solid var(--border-default); background: var(--bg-inset); padding: var(--space-4) var(--space-5); font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; }


/* pull quote under the funnel */
.uw-quote { margin-top: var(--space-6); padding-left: var(--space-6); border-left: 2px solid var(--accent); max-width: 46em; }
.uw-quote p { font-size: var(--text-lg); color: var(--text-primary); line-height: var(--lh-normal); margin: 0; }
.uw-quote cite { display: block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); font-style: normal; letter-spacing: var(--ls-wide); }

/* ---------- three failures: numbered, no cards ---------- */
.uw-fails { margin-top: var(--space-12); display: grid; gap: 0; border-top: 1px solid var(--border-default); }
.uw-fail { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-6); padding: var(--space-7) 0; border-bottom: 1px solid var(--border-default); align-items: baseline; }
.uw-fail__n { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--risk-critical); letter-spacing: var(--ls-wider); }
.uw-fail h3 { font-size: var(--text-xl); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); }
.uw-fail p { color: var(--text-secondary); font-size: var(--text-md); margin-top: var(--space-2); max-width: 52em; line-height: var(--lh-relaxed); }


/* ---------- the loop ---------- */
.uw-loop { margin-top: var(--space-12); }
.uw-loop__track { width: 100%; display: block; }
.uw-loop__track .rail { stroke: var(--border-strong); stroke-width: 1.6; fill: none; }
.uw-loop__track .rail--back { stroke: var(--status-verified); stroke-width: 1.6; stroke-dasharray: 5 4; fill: none; }
.uw-loop__track .stop { fill: var(--bg-surface); stroke: var(--border-strong); stroke-width: 1.6; }
.uw-loop__track .stop--live { stroke: var(--accent); stroke-width: 2; }
.uw-loop__track .stop--ok { stroke: var(--status-verified); stroke-width: 2; }
.uw-loop__track .num { font-family: var(--font-mono); font-size: 11px; fill: var(--text-tertiary); }
.uw-loop__track .cap { font-family: var(--font-mono); font-size: 10px; fill: var(--status-verified); letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) {
  .uw-loop__track .pip { display: none; }
}

.uw-loop__steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); margin-top: var(--space-6); }


.uw-loop__step h3 { font-size: var(--text-base); letter-spacing: var(--ls-tight); }
.uw-loop__step p { font-size: var(--text-base); color: var(--text-secondary); line-height: var(--lh-normal); margin-top: var(--space-1-5); }
.uw-loop__step .n { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--accent); display: block; margin-bottom: var(--space-2); }

/* ---------- five stages, inline band ---------- */
.uw-stages { margin-top: var(--space-12); border-top: 1px solid var(--border-default); }
.uw-stage { display: grid; grid-template-columns: 30px 210px 1fr; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-default); align-items: baseline; }
.uw-stage__n { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-disabled); }
.uw-stage__t { font-weight: var(--fw-semibold); font-size: var(--text-md); letter-spacing: var(--ls-tight); }
.uw-stage__d { color: var(--text-secondary); font-size: var(--text-md); line-height: var(--lh-normal); }
/* The lit row is marked by its ordinal and a rule, not by tinting the
   title. var(--accent) is brand-600 on the light canvas and measures
   2.67:1 there, so a coloured title would be unreadable in light theme. */
.uw-stage--lit .uw-stage__n { color: var(--accent); }
.uw-stage--lit .uw-stage__t { color: var(--text-primary); }
.uw-stage--lit { border-left: 2px solid var(--accent); padding-left: var(--space-4); margin-left: calc(-1 * var(--space-4) - 2px); }




/* ---------- black hat event block ---------- */
.uw-bh { position: relative; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--border-strong); background: var(--bg-canvas); padding: var(--space-16) var(--space-12); }
.uw-bh::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 90% at 88% 20%, #000 20%, transparent 76%);
}
.uw-bh > * { position: relative; }
.uw-bh__in { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--space-12); align-items: center; }

.uw-bh__h { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: var(--ls-tighter); line-height: 1.06; margin: var(--space-4) 0 var(--space-5); }
.uw-bh__b { color: var(--text-secondary); line-height: var(--lh-relaxed); max-width: 40em; }
.uw-bh__meta { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 2.2; color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); background: var(--bg-surface); }
.uw-bh__meta .k { color: var(--text-tertiary); display: inline-block; min-width: 74px; }
.uw-bh__meta .tbc { color: var(--accent); }

/* ---------- analyst figure ---------- */
.uw-agent { border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--bg-surface); overflow: hidden; }
.uw-agent__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-tertiary); }
.uw-agent__body { padding: var(--space-5); }
.uw-agent__gate {
  margin: var(--space-5) 0; padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--accent); border-radius: var(--radius-md);
  background: var(--accent-muted); display: flex; align-items: center; gap: var(--space-4);
}
.uw-agent__gate b { color: var(--text-primary); font-size: var(--text-sm); display: block; }
.uw-agent__gate span { color: var(--text-secondary); font-size: var(--text-xs); font-family: var(--font-mono); }
.uw-agent__held { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); text-align: center; padding-top: var(--space-2); }
.uw-agent__held .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin: 0 3px; }
@media (prefers-reduced-motion: no-preference) {
  .uw-agent__held .dot { animation: uw-wait 1.4s ease-in-out infinite; }
  .uw-agent__held .dot:nth-child(2) { animation-delay: .2s; }
  .uw-agent__held .dot:nth-child(3) { animation-delay: .4s; }
}
@keyframes uw-wait { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

/* ---------- analyst: plan choice ---------- */
.uw-plans { display: grid; gap: var(--space-3); }
.uw-plan {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-inset); padding: var(--space-4) var(--space-5);
  position: relative; transition: var(--transition-colors);
}
.uw-plan--rec { border-color: var(--accent); background: var(--accent-muted); }
.uw-plan__hd { display: flex; align-items: baseline; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.uw-plan__id { color: var(--text-secondary); }
.uw-plan__kind { color: var(--text-tertiary); }
.uw-plan--rec .uw-plan__kind { color: var(--accent); }
.uw-plan__tag { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 1px 6px; letter-spacing: var(--ls-wide); }
.uw-plan__act { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-primary); margin-top: var(--space-3); line-height: var(--lh-normal); }
.uw-plan__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-2-5); line-height: 1.9; }
.uw-plan__meta .k { color: var(--text-tertiary); display: inline-block; min-width: 62px; }
.uw-plan__meta .wide { color: var(--status-verified); }

/* black hat: two events */
.uw-bh__ev { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-3); margin-bottom: var(--space-3); }
.uw-bh__ev:last-of-type { border-bottom: 0; }
.uw-bh__ev .nm { color: var(--text-primary); letter-spacing: var(--ls-wide); }
.uw-bh__ev .dt { color: var(--text-tertiary); }

/* ---------- shapes: equalise card rows ---------- */
.uw-grid--2 > .uw-card { display: flex; flex-direction: column; }
.uw-card .uw-uc-rec { min-height: 96px; display: flex; flex-direction: column; justify-content: center; white-space: normal; }
.uw-card .uw-uc-rec > div { white-space: nowrap; }
.uw-grid--2 > .uw-card > p { flex: 1 1 auto; }


/* ---------- roles: energised ---------- */
.uw-roles2 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: var(--space-12); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.uw-role2 { padding: var(--space-8) var(--space-5); border-right: 1px solid var(--border-default); position: relative; transition: var(--transition-colors); }
.uw-role2:last-child { border-right: 0; }
.uw-role2:hover { background: var(--bg-hover); }
.uw-role2::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--accent); transition: height var(--duration-normal) var(--ease-out); }
.uw-role2:hover::before { height: 100%; }
.uw-role2__ic { color: var(--text-tertiary); margin-bottom: var(--space-5); }
.uw-role2:hover .uw-role2__ic { color: var(--accent); }
.uw-role2__t { font-weight: var(--fw-semibold); font-size: var(--text-base); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); }
.uw-role2__d { color: var(--text-secondary); font-size: var(--text-sm); margin-top: var(--space-2-5); line-height: var(--lh-normal); }



/* ---------- integrations: signals converging ---------- */


/* closure line on shape cards */
.uw-uc-close {
  margin-top: auto; padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-wide); color: var(--text-tertiary);
}
.uw-uc-close .v { color: var(--status-verified); margin-right: var(--space-2); }

/* ============================================================
   MOBILE: figures that cannot simply shrink
   ============================================================ */

/* wide figures scroll horizontally rather than shrink to illegibility */


/* the record is decorative-adjacent; never let it force a scrollbar */
.uw-hero__rec, .uw-uc-rec { max-width: 100%; }

/* black hat meta: stack cleanly */


/* plans: tighten on small screens */


/* funnel + statement: reduce the shout on small screens */


/* ============================================================
   READABILITY FLOOR
   The design system's 14px base is a product-UI default.
   This is a marketing page: body is 16px, and no content
   label sits below 12px. Decorative ordinals may.
   ============================================================ */

/* mono evidence records: 11px was too tight to scan */
.uw-record { font-size: var(--text-xs); line-height: 2.05; }

/* funnel headline: it is the section's argument, give it size */
.uw-funnel3__h { font-size: clamp(21px, 2.4vw, 28px); }

/* loop caption is content, not chrome */
.uw-loop__track .cap { font-size: 12px; }
.uw-loop__track .num { font-size: 12px; }

/* graph labels: 10px is below the floor for anything named */
.uw-ap .lbl { font-size: 11.5px; }

/* trust strip: 11px uppercase mono is a wall. Loosen. */
.uw-trust { font-size: var(--text-xs); line-height: 2; }

/* kickers stay small, they are eyebrows, but darken them */
.uw-kicker { color: var(--text-secondary); }

/* five-column role text needs air, not shrinkage */
.uw-role2 { padding: var(--space-8) var(--space-4); }
.uw-role2__d { font-size: var(--text-base); }
.uw-loop__step p { font-size: var(--text-md); }


/* ============================================================
   MOBILE: figures that need a different layout, not a smaller one
   ============================================================ */

/* the loop: horizontal on desktop. On mobile it becomes a vertical
   rail drawn with CSS pseudo-elements on each step, so the markers
   can never drift out of alignment with wrapping text. */

.uw-loop__cap { display: none; }



/* wide graph: fade the right edge so the scroll is discoverable */


/* ============================================================
   TAP TARGETS (WCAG 2.5.5) — 44px minimum on touch
   ============================================================ */
@media (pointer: coarse), (max-width: 720px) {
  .uw-nav .uz-btn,
  .uw-cta .uz-btn { min-height: 44px; display: inline-flex; align-items: center; }

  .uw-themebtn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* footer + nav links get vertical padding rather than bigger text */
  .uw-foot__links a { display: inline-block; padding: var(--space-3) 0; }
  .uw-navlinks a { padding: var(--space-3) 0; display: inline-block; }

  /* brand marks */
  .uw-brand { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ============================================================
   TYPE SCALE — option B
   Every content label moves up one step. Body copy in the
   14px band moves to 16px. Decorative ordinals stay at 11px
   so they do not compete with the headings beside them.
   ============================================================ */

/* --- content labels: 11px -> 12px --- */
.uw-kicker,
.uw-eyebrow,
.uw-fig__bar,
.uw-agent__bar,
.uw-agent__held,
.uw-uc-shape__t,
.uw-uc-close,
.uw-slot__label,
.uw-int2__l,
.uw-ba__h,
.uw-int__label,
.uw-funnel__lbl,
.uw-tool__hd,
.uw-tool__row,
.uz-badge {
  font-size: var(--text-xs);
}

/* --- evidence records + data: 12px -> 13px --- */
.uw-record,
.uw-hero__rec,
.uw-uc-rec,
.uw-plan__meta,
.uw-plan__id,
.uw-plan__kind,
.uw-plan__tag,
.uw-ticket__hd,
.uw-ticket__meta,
.uw-ticket__card,
.uw-bh__meta,
.uw-funnel3__step,
.uw-funnel3__sub,
.uw-quote cite,
.uw-src__l,
.uw-trust {
  font-size: var(--text-sm);
}

/* --- primary data lines: 13px -> 14px --- */
.uw-plan__act { font-size: var(--text-base); }

/* --- sans underclass: 13/14px -> 16px --- */
.uw-role2__t { font-size: var(--text-md); }
.uw-role2__d { font-size: 15px; }
.uw-bh__b { font-size: var(--text-md); }
.uw-agent__gate b { font-size: var(--text-md); }
.uw-agent__gate span { font-size: var(--text-sm); }
.uw-loop__step h3 { font-size: var(--text-md); }
.uw-funnel3__note { font-size: var(--text-sm); }
.uw-list__it span { font-size: var(--text-md); }

/* --- graph labels: 11.5px -> 12.5px --- */
.uw-ap .lbl { font-size: 12.5px; }
.uw-loop__track .num,
.uw-loop__track .cap { font-size: 13px; }

/* --- ordinals stay small: they are scaffolding, not content --- */
.uw-fail__n,
.uw-stage__n,
.uw-loop__step .n,
.uw-card__n,
.uw-uc-shape__n,
.uw-record__ln,
.uw-hero__rec .ln,
.uw-plan__meta .k,
.uw-bh__meta .k,
.uw-agent__plan .sn {
  font-size: var(--text-2xs);
}

/* --- contrast repairs surfaced by the type increase --- */
.uw-plan__kind { color: var(--text-secondary); }
/* on the cyan tint, only text-primary clears AA in both themes */
.uw-plan--rec .uw-plan__kind { color: var(--text-primary); }
.uw-trust { color: var(--text-secondary); }

/* ============================================================
   INTEGRATIONS — six sources converge on Live Security Context.
   The connectors are drawn per-card with CSS, so they cannot
   drift out of alignment with the cards they belong to.
   Nothing pipes into another tool. Every line ends at the hub.
   ============================================================ */
.uw-hub {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: 1fr 240px 1fr;
  align-items: center;
  gap: 0;
}


.uw-hub__side { display: grid; grid-auto-rows: 1fr; gap: var(--space-4); }

.uw-src {
  position: relative;
  display: grid; grid-template-columns: 92px 1fr auto; gap: var(--space-4);
  align-items: center;
  align-content: center;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); padding: var(--space-4) var(--space-5);
  transition: var(--transition-colors);
}
.uw-src:hover { border-color: var(--accent); }
.uw-src__l {
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-tertiary);
}
.uw-src__n { font-size: var(--text-md); color: var(--text-primary); line-height: var(--lh-snug); }
.uw-src__more {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--text-disabled); white-space: nowrap;
  letter-spacing: var(--ls-wide);
  transition: var(--transition-colors);
}
.uw-src:hover .uw-src__more { color: var(--accent); }


/* connector stub out of each card, toward the hub */
.uw-hub__side .uw-src::after {
  content: ""; position: absolute; top: 50%;
  width: var(--space-10); height: 1.4px; background: var(--border-strong);
}
.uw-hub__side--a .uw-src::after { left: 100%; }
.uw-hub__side--b .uw-src::after { right: 100%; }

.uw-hub__side--a { padding-right: var(--space-10); }
.uw-hub__side--b { padding-left:  var(--space-10); }

/* vertical collector rails, one per side, joining the three stubs */
.uw-hub__side { position: relative; }
.uw-hub__side::before {
  content: ""; position: absolute; top: 50%; bottom: 50%;
  width: 1.4px; background: var(--border-strong);
  top: 12%; bottom: 12%;
}
.uw-hub__side--a::before { right: 0; }
.uw-hub__side--b::before { left: 0; }

/* the short lead from each rail into the hub */
.uw-hub__side::after {
  content: ""; position: absolute; top: 50%; width: var(--space-6); height: 1.4px;
  background: var(--border-strong);
}
.uw-hub__side--a::after { left: 100%; }
.uw-hub__side--b::after { right: 100%; }

.uw-hub__core {
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent-muted);
  padding: var(--space-7) var(--space-5);
  text-align: center; position: relative; z-index: 2;
}
.uw-hub__core .t {
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight);
  font-size: var(--text-lg); line-height: var(--lh-snug);
}
.uw-hub__core .s {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--text-primary); opacity: .78;
  margin-top: var(--space-2); letter-spacing: var(--ls-wide);
}
.uw-hub__core .uw-pulse { margin: 0 auto var(--space-4); }

/* mobile: stack, hub last, one arrow */
.uw-hub__arrow { display: none; }



/* ---------- integrations: the categories are not the whole list ---------- */
.uw-hub__also {
  margin-top: var(--space-10);
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-7);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-8);
  align-items: start;
}

.uw-hub__also__l {
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-tertiary); white-space: nowrap; padding-top: 3px;
}
.uw-hub__also__tags { display: flex; flex-wrap: wrap; gap: var(--space-2-5); }
.uw-tag {
  font-size: var(--text-sm); color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: var(--radius-pill, 999px);
  padding: var(--space-2) var(--space-4); background: var(--bg-surface);
  transition: var(--transition-colors);
}
.uw-tag:hover { border-color: var(--accent); color: var(--text-primary); }
.uw-tag--open { border-style: dashed; color: var(--text-tertiary); font-family: var(--font-mono); }

.uw-hub__note {
  margin-top: var(--space-6); font-size: var(--text-md);
  color: var(--text-secondary); max-width: 52em;
}
.uw-hub__note b { color: var(--text-primary); font-weight: var(--fw-medium); }

/* ============================================================
   PROOF — the evidence panel
   ============================================================ */
/* the evidence panel spans the full figure width, beneath both cards.
   No grid-template override here: .uw-ticket already declares 1fr 1fr
   and collapses to one column under 760px. Overriding it would break mobile. */
.uw-ticket__foot {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border-default);
  background: var(--bg-inset);
  padding: var(--space-5) var(--space-6);
}
.uw-ticket__foot .uw-ticket__hd { margin-bottom: var(--space-4); }
.uw-ticket__foot .uw-record { border: 0; border-radius: 0; background: transparent; padding: 0; }


/* ============================================================
   HERO / PROBLEM — opening variants (exploration)
   ============================================================ */

/* ---- V1: the record, promoted to a figure ---- */
.uw-terminal {
  margin-top: var(--space-8);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: var(--shadow-md, 0 1px 3px rgba(0,0,0,.06));
}
.uw-terminal__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2-5) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-inset);
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-tertiary);
}
.uw-terminal__bar .uz-badge { margin-left: auto; }
.uw-terminal__body { padding: var(--space-3) var(--space-6) var(--space-2); }

.uw-line {
  display: grid; grid-template-columns: 26px 1fr;
  gap: var(--space-4); align-items: baseline;
  padding: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.5;
}
.uw-line + .uw-line { border-top: 1px solid var(--border-subtle); }
.uw-line__n { color: var(--text-disabled); font-size: var(--text-sm); }
.uw-line__t { color: var(--text-primary); }
.uw-line .arrow { color: var(--text-tertiary); margin: 0 6px; }
.uw-line .hot  { color: var(--risk-critical); font-weight: var(--fw-medium); }
.uw-line .nil  { color: var(--text-tertiary); }
.uw-line .ok   { color: var(--status-verified); font-weight: var(--fw-medium); }
.uw-line__note {
  grid-column: 2; font-family: var(--font-sans);
  font-size: var(--text-sm); color: var(--text-tertiary);
  margin-top: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .js .uw-line { opacity: 0; transform: translateY(6px); animation: uw-lineIn .5s var(--ease-out) forwards; }
  .js .uw-line:nth-child(1) { animation-delay: .35s; }
  .js .uw-line:nth-child(2) { animation-delay: 1.1s; }
  .js .uw-line:nth-child(3) { animation-delay: 1.85s; }
  .js .uw-terminal__cursor { animation: uw-blink 1s step-end infinite; }
}
@keyframes uw-lineIn { to { opacity: 1; transform: none; } }
@keyframes uw-blink { 50% { opacity: 0; } }
.uw-terminal__cursor {
  display: inline-block; width: 7px; height: 15px;
  background: var(--accent); vertical-align: -2px; margin-left: 4px;
}
.uw-terminal__foot {
  border-top: 1px solid var(--border-subtle); background: var(--bg-inset);
  padding: var(--space-3-5, 14px) var(--space-6);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-tertiary);
}


/* terminal on small screens: the notes wrap and double the height.
   The lines carry the argument; drop the glosses. */


/* ============================================================
   TERMINAL — status words carry meaning in TEXT, colour is a
   signal on top. On light backgrounds the brand red/green do
   not clear AA at body weight, so the status words become
   chips: tinted background, darker text, semibold.
   ============================================================ */
.uw-line .hot,
.uw-line .ok {
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 5px;
  white-space: nowrap;
  color: var(--gray-900);   /* theme-independent: 6.2:1 on red, 9.9:1 on green */
}
.uw-line .hot { background: var(--critical-500); }
.uw-line .ok  { background: var(--success-500); }

/* the bar + foot are chrome, but they are content chrome: darken */
.uw-terminal__bar { color: var(--text-secondary); }
.uw-terminal__foot { color: var(--text-secondary); }



/* ============================================================
   LIVE SECURITY CONTEXT — the signature scene (handoff v7)

   v7 is theme-aware: every coloured element carries a role class
   (.r-*) and the theme rules below swap them. Ported from the
   reference's .lsc / .lsc.theme-light roots onto our [data-theme].

   The scene is authored at viewBox 1500 x 610 and is rendered at
   its native 1500px, scrolling when the viewport cannot hold it.
   Rendered smaller its labels drop under 9px; at 1:1 they sit at
   their authored 11 to 15px.

   Contrast was measured against the real painted background across
   six animation frames, not against the canvas. Several role fills
   were corrected; see the notes on each.
   ============================================================ */
.uw-lsc {
  margin-top: var(--space-2);
  position: relative;
}
/* The feed's scroll mask fades to the surface it sits on. Bind both
   to one variable, or the mask paints a visible band. */
/* The scene sits directly on the band, not on a raised surface. A
   surface would be 1.05:1 against the canvas in dark and 1.08:1 in
   light: invisible. The fade masks and text halos still need to know
   what colour they sit on, so keep the variable and point it at the
   canvas. */
.uw-lsc { --lsc-surface: var(--bg-canvas); }
/* v8 is authored at viewBox 0 0 1200 620. It renders at its native 1200px
   and never scales. The prose column (.uw) is 1136px usable, narrower than
   the scene, so the frame breaks out by the difference and centres the
   scene: on desktop it renders fully at 1200px with no scroll and no
   squishing. When the viewport itself cannot hold 1200px, the frame scrolls
   rather than shrinking the labels. */
.uw-lsc__scene { display: block; width: 1200px; max-width: none; height: auto; overflow: visible; }
.uw-lsc__frame {
  position: relative;
  /* break out to the scene's native width, centred on the column */
  width: 1200px;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding-block: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Below the phone breakpoint, drop the scene to a slightly narrower fixed
   width so the scroll distance on a small screen is not excessive. Still
   fixed, still no scaling. */
@media (max-width: 640px) {
  .uw-lsc__scene { width: 1100px; }
}

.uw-lsc__hint { display: none; }

/* Show the scroll hint only where the frame actually scrolls: when the
   viewport cannot hold the scene's native 1200px (plus a little gutter). */
@media (max-width: 1264px) {
  .uw-lsc__hint {
    display: block; text-align: center;
    font-family: var(--font-mono); font-size: var(--text-2xs);
    color: var(--text-tertiary); letter-spacing: var(--ls-wide);
    padding-top: var(--space-3);
  }
}


@media (prefers-reduced-motion: reduce) {
  .uw-lsc [style*="animation"] { animation: none !important; }
  .uw-lsc animate, .uw-lsc animateMotion, .uw-lsc animateTransform { display: none; }
}

.uw-lsc {
  --lsc-host-ink-l: #A34100;
  --lsc-glass-1: #FFFFFF;
  --lsc-glass-2: #EAF0F2;
  --lsc-glass-3: #D3DEE2;
  --lsc-amber-l: #D99A2B;
  --lsc-cyan-bright: #7FEBF2;
  --lsc-cyan-ink-d: #35D0EC;
  --lsc-cyan-ink-l: #0A5D6E;
  --lsc-green-ink-l: #0C6B4B;
  --lsc-green-mid-l: #1F9E73;
  --lsc-hair-d: #9AA6B4;
  --lsc-hair-l: #C9D1DA;
  --lsc-label-d: #8A94A4;
  --lsc-neutral-d: #2C3644;
  --lsc-neutral-l: #EAEFF5;
  --lsc-orb-deep: #070A10;
  --lsc-red-ink-l: #C81E31;
  --lsc-redsoft-d: #FF9AA5;
  --lsc-redsoft-ink-l: #A31023;
  --lsc-redsoft-mid-l: #D6455A;
  --lsc-redtint-d: #FFD2D6;
  --lsc-region-l: #24404F;
}

/* dark theme (default for this section) */
.uw-band[data-theme="dark"] .uw-lsc .r-card ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-card  { fill:var(--orb-card);stroke:rgba(255,255,255,.09) }
.uw-band[data-theme="dark"] .uw-lsc .r-card2 ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-card2  { fill:var(--orb-card);stroke:rgba(255,255,255,.09) }
.uw-band[data-theme="dark"] .uw-lsc .r-hair ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-hair  { stroke:rgba(255,255,255,.1) }
.uw-band[data-theme="dark"] .uw-lsc .r-ink ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-ink  { fill:var(--lsc-neutral-l) }
.uw-band[data-theme="dark"] .uw-lsc .r-ink2 ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-ink2  { fill:var(--lsc-hair-d) }
.uw-band[data-theme="dark"] .uw-lsc .r-ink2-s ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-ink2-s  { stroke:var(--lsc-hair-d) }
.uw-band[data-theme="dark"] .uw-lsc .r-label ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-label  { fill:var(--gray-350, var(--lsc-label-d)) }
.uw-band[data-theme="dark"] .uw-lsc .r-neu ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-neu  { fill:var(--lsc-neutral-d) }
.uw-band[data-theme="dark"] .uw-lsc .r-cyan ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-cyan  { fill:var(--brand-500) }
.uw-band[data-theme="dark"] .uw-lsc .r-cyantext ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-cyantext  { fill:var(--lsc-cyan-ink-d) }
.uw-band[data-theme="dark"] .uw-lsc .r-cyanstroke ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-cyanstroke  { stroke:var(--lsc-cyan-ink-d) }
.uw-band[data-theme="dark"] .uw-lsc .r-node ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-node  { fill:var(--brand-400) }
.uw-band[data-theme="dark"] .uw-lsc .r-node-s ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-node-s  { stroke:var(--brand-400) }
.uw-band[data-theme="dark"] .uw-lsc .r-green ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-green  { fill:var(--success-500) }
.uw-band[data-theme="dark"] .uw-lsc .r-green-s ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-green-s  { stroke:var(--success-500) }
.uw-band[data-theme="dark"] .uw-lsc .r-red ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-red  { fill:var(--critical-400) }
.uw-band[data-theme="dark"] .uw-lsc .r-red-s ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-red-s  { stroke:var(--critical-500) }
.uw-band[data-theme="dark"] .uw-lsc .r-redsoft ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-redsoft  { fill:var(--lsc-redsoft-d) }
.uw-band[data-theme="dark"] .uw-lsc .r-redsoft-s ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-redsoft-s  { stroke:var(--critical-400) }
.uw-band[data-theme="dark"] .uw-lsc .r-amber ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-amber  { fill:var(--medium-500) }
.uw-band[data-theme="dark"] .uw-lsc .r-twinkle ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-twinkle  { fill:var(--lsc-cyan-bright) }
.uw-band[data-theme="dark"] .uw-lsc .r-region ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-region  { fill:var(--gray-200) }
.uw-band[data-theme="dark"] .uw-lsc .r-markerfill ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-markerfill  { fill:var(--bg-canvas) }
.uw-band[data-theme="dark"] .uw-lsc .r-halo-s ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-halo-s  { stroke:var(--lsc-orb-deep) }
.uw-band[data-theme="dark"] .uw-lsc .r-pulse ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-pulse  { fill:var(--lsc-redtint-d) }
.uw-band[data-theme="dark"] .uw-lsc .orb-light ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .orb-light  { display:none }
.uw-band[data-theme="dark"] .uw-lsc .r-redtext ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-redtext  { fill:var(--critical-400); stroke:var(--lsc-surface); }

/* light theme */
.uw-band[data-theme="light"] .uw-lsc .r-card ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-card  { fill:var(--bg-surface);stroke:rgba(10,13,18,.1) }
.uw-band[data-theme="light"] .uw-lsc .r-card2 ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-card2  { fill:var(--bg-surface);stroke:rgba(10,13,18,.08) }
.uw-band[data-theme="light"] .uw-lsc .r-hair ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-hair  { stroke:rgba(10,13,18,.08) }
.uw-band[data-theme="light"] .uw-lsc .r-ink ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-ink  { fill:var(--text-primary) }
.uw-band[data-theme="light"] .uw-lsc .r-ink2 ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-ink2  { fill:var(--text-secondary) }
.uw-band[data-theme="light"] .uw-lsc .r-ink2-s ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-ink2-s  { stroke:var(--text-secondary) }
.uw-band[data-theme="light"] .uw-lsc .r-label ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-label  { fill:var(--text-secondary) }
.uw-band[data-theme="light"] .uw-lsc .r-neu ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-neu  { fill:var(--lsc-hair-l) }
.uw-band[data-theme="light"] .uw-lsc .r-cyan ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-cyan  { fill:var(--brand-600) }
.uw-band[data-theme="light"] .uw-lsc .r-cyantext ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-cyantext  { fill:var(--lsc-cyan-ink-l) }
.uw-band[data-theme="light"] .uw-lsc .r-cyanstroke ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-cyanstroke  { stroke:var(--brand-700) }
.uw-band[data-theme="light"] .uw-lsc .r-node ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-node  { fill:var(--brand-600) }
.uw-band[data-theme="light"] .uw-lsc .r-node-s ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-node-s  { stroke:var(--brand-600) }
.uw-band[data-theme="light"] .uw-lsc .r-green ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-green  { fill:var(--lsc-green-ink-l) }
.uw-band[data-theme="light"] .uw-lsc .r-green-s ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-green-s  { stroke:var(--lsc-green-mid-l) }
.uw-band[data-theme="light"] .uw-lsc .r-red ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-red  { fill:var(--critical-700, var(--lsc-red-ink-l)) }
.uw-band[data-theme="light"] .uw-lsc .r-red-s ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-red-s  { stroke:var(--critical-600) }
.uw-band[data-theme="light"] .uw-lsc .r-redsoft ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-redsoft  { fill:var(--lsc-redsoft-ink-l) }
.uw-band[data-theme="light"] .uw-lsc .r-redsoft-s ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-redsoft-s  { stroke:var(--lsc-redsoft-mid-l) }
.uw-band[data-theme="light"] .uw-lsc .r-amber ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-amber  { fill:var(--lsc-amber-l) }
.uw-band[data-theme="light"] .uw-lsc .r-twinkle ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-twinkle  { fill:var(--brand-700) }
.uw-band[data-theme="light"] .uw-lsc .r-region ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-region  { fill:var(--lsc-region-l) }
.uw-band[data-theme="light"] .uw-lsc .r-markerfill ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-markerfill  { fill:var(--bg-surface) }
.uw-band[data-theme="light"] .uw-lsc .r-halo-s ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-halo-s  { stroke:rgba(255,255,255,.9) }
.uw-band[data-theme="light"] .uw-lsc .r-pulse ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-pulse  { fill:var(--critical-600) }
.uw-band[data-theme="light"] .uw-lsc .r-ring circle, .uw-band[data-theme="light"] .uw-lsc .r-ring line ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-ring line  { stroke:rgba(46,74,90,.18); }
.uw-band[data-theme="light"] .uw-lsc .orb-dark ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .orb-dark  { display:none }
.uw-band[data-theme="light"] .uw-lsc .orb-light ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .orb-light  { display:inline }
.uw-band[data-theme="light"] .uw-lsc .r-greentext ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-greentext  { fill:var(--lsc-green-ink-l); stroke:var(--lsc-surface); }
.uw-band[data-theme="light"] .uw-lsc .r-redtext ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-redtext  { fill:var(--critical-700, var(--lsc-red-ink-l)); stroke:var(--lsc-surface); }

/* theme-independent */
/* The two connector labels sit directly on an animated dashed line with
   a travelling dot. Measured worst-frame contrast was 2.00:1 in BOTH
   themes: no fill colour can fix a background that moves. Paint a
   canvas-coloured stroke behind the glyphs (paint-order:stroke) so the
   text always sits on the canvas, never on the dot. */
.uw-band[data-theme="dark"] .uw-lsc .r-greentext ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-greentext  { fill:var(--success-400); stroke:var(--lsc-surface); }
/* ---- roles added during the port ---------------------------------
   These elements shipped with hardcoded fills and no role class, so
   they never followed the theme. Measured worst-frame contrast:
   edge-proxy-03 was 3.40:1 on the lit orb; verified closed was
   2.53:1 on light. Both now theme, and the two that sit on moving
   backgrounds carry a canvas-coloured halo (paint-order:stroke). */

.uw-band[data-theme="dark"] .uw-lsc .r-hosttext ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-hosttext  { fill: var(--high-400); stroke: var(--lsc-surface); }
.uw-band[data-theme="light"] .uw-lsc .r-hosttext ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-hosttext  { fill: var(--lsc-host-ink-l); stroke: var(--lsc-surface); }

.uw-band[data-theme="dark"] .uw-lsc .r-verifiedtext ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-verifiedtext  { fill: var(--success-400); }
.uw-band[data-theme="light"] .uw-lsc .r-verifiedtext ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-verifiedtext  { fill: var(--lsc-green-ink-l); }

.uw-band[data-theme="dark"] .uw-lsc .r-hair2 ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-hair2  { stroke: var(--lsc-hair-d); opacity: .5; }
.uw-band[data-theme="light"] .uw-lsc .r-hair2 ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-hair2  { stroke: var(--lsc-hair-l); }

.uw-band[data-theme="dark"] .uw-lsc .r-shadow ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-shadow  { fill: var(--orb-990); }
.uw-band[data-theme="light"] .uw-lsc .r-shadow ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-shadow  { fill: var(--gray-900); }

/* these three sit on the orb, which is dark in dark theme and frosted
   in light. v7 swaps the whole orb subtree, so a single value works. */
.uw-lsc .r-badgering { stroke: var(--brand-500); }
.uw-lsc .r-travel { fill: var(--success-400); }
.uw-lsc .r-check { stroke: var(--success-400); }
.uw-band[data-theme="light"] .uw-lsc .r-badgering ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-badgering  { stroke: var(--brand-700); }
.uw-band[data-theme="light"] .uw-lsc .r-check ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-check  { stroke: var(--lsc-green-ink-l); }


@keyframes uz-spin { to { transform: rotate(360deg); } }
@keyframes uz-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes uz-ring { 0% { transform: scale(.5); opacity:.7; } 100% { transform: scale(2); opacity:0; } }
@keyframes uz-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes uz-aura { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
@keyframes uz-draw { 0% { stroke-dashoffset: 500; } 55%,100% { stroke-dashoffset: 0; } }
@keyframes uz-edge { 0%,100% { opacity:.08; } 45% { opacity:.55; } }
@keyframes uz-twinkle { 0%,100% { opacity:.2; } 50% { opacity:1; } }
@keyframes uz-appear { 0% { opacity:0; transform:scale(.2); } 18% { opacity:1; transform:scale(1); } 82% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(.2); } }
@keyframes uz-cand { 0% { opacity:0; } 20% { opacity:.7; } 55% { opacity:.7; } 80%,100% { opacity:0; } }
@keyframes uz-scroll { from { transform: translateY(0); } to { transform: translateY(-400px); } }
@keyframes uz-merge { 0% { opacity:0; transform: translate(-10px,0); } 40% { opacity:1; transform: translate(0,0);} 70%{opacity:1;} 100% { opacity:0; transform: translate(8px,0);} }
@keyframes uz-link { 0% { stroke-dashoffset: 40; } 50%,100% { stroke-dashoffset: 0; } }




/* ============================================================
   LSC scene v8 (unizo-lsc-hero) — port additions

   The v8 redraw is authored at viewBox 0 0 1200 620 and renders
   1:1 in the 1200px content column, so the scrollport and the
   1500px width below are retired (see .uw-lsc__scene / __frame).

   v8 externalised its orb gradient stops to classes (s-*), which
   keeps raw hex out of the markup. The stop colours below are the
   same values the v7 orb used inline; only the delivery changed.

   Seven role classes are new to v8: r-accent, r-gate, r-graynode,
   r-rail-s, r-ring-s, r-route-s, r-verifbox. Each themes in both
   modes, matched to the family it belongs to.
   ============================================================ */

/* --- orb gradient stops: dark orb (v8-body / v8-aura / v8-inner) --- */
.uw-lsc .s-body0 { stop-color: var(--orb-900); }
.uw-lsc .s-body1 { stop-color: var(--orb-950); }
.uw-lsc .s-body2 { stop-color: var(--orb-990); }
.uw-lsc .s-aura0 { stop-color: rgba(34,199,230,0); }
.uw-lsc .s-aura1 { stop-color: rgba(34,199,230,.16); }
.uw-lsc .s-inner0 { stop-color: rgba(127,235,242,.22); }
.uw-lsc .s-inner1 { stop-color: rgba(127,235,242,0); }

/* --- orb gradient stops: light/frosted orb (lg-body / lg-shade / lg-hi / lg-aura) --- */
.uw-lsc .s-lbody0 { stop-color: var(--lsc-glass-1); }
.uw-lsc .s-lbody1 { stop-color: var(--lsc-glass-2); }
.uw-lsc .s-lbody2 { stop-color: var(--lsc-glass-3); }
.uw-lsc .s-lshade0 { stop-color: rgba(46,74,90,.22); }
.uw-lsc .s-lshade1 { stop-color: rgba(46,74,90,0); }
.uw-lsc .s-lhi0 { stop-color: rgba(255,255,255,.92); }
.uw-lsc .s-lhi1 { stop-color: rgba(255,255,255,0); }
.uw-lsc .s-laura0 { stop-color: rgba(34,199,230,0); }
.uw-lsc .s-laura1 { stop-color: rgba(34,199,230,.13); }

/* --- feed scroll-fade masks: fade to whatever surface the scene sits on --- */
.uw-lsc .s-fade0 { stop-color: var(--lsc-surface); stop-opacity: 0; }
.uw-lsc .s-fade1 { stop-color: var(--lsc-surface); stop-opacity: 1; }

/* --- new role classes: DARK --- */
.uw-band[data-theme="dark"] .uw-lsc .r-accent ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-accent  { fill: var(--brand-500); }
.uw-band[data-theme="dark"] .uw-lsc .r-graynode ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-graynode  { fill: var(--lsc-neutral-d); }
.uw-band[data-theme="dark"] .uw-lsc .r-rail-s ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-rail-s  { stroke: rgba(255,255,255,.14); }
.uw-band[data-theme="dark"] .uw-lsc .r-ring-s ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-ring-s  { stroke: rgba(255,255,255,.1); }
.uw-band[data-theme="dark"] .uw-lsc .r-route-s ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-route-s  { stroke: var(--critical-500); }
.uw-band[data-theme="dark"] .uw-lsc .r-gate ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-gate  { fill: var(--orb-card); stroke: rgba(127,235,242,.35); }
.uw-band[data-theme="dark"] .uw-lsc .r-verifbox ,
html[data-theme="dark"] .uw-band:not([data-theme]) .uw-lsc .r-verifbox  { fill: var(--orb-card); stroke: rgba(80,220,150,.3); }

/* --- new role classes: LIGHT --- */
.uw-band[data-theme="light"] .uw-lsc .r-accent ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-accent  { fill: var(--brand-600); }
.uw-band[data-theme="light"] .uw-lsc .r-graynode ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-graynode  { fill: var(--lsc-hair-l); }
.uw-band[data-theme="light"] .uw-lsc .r-rail-s ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-rail-s  { stroke: rgba(10,13,18,.14); }
.uw-band[data-theme="light"] .uw-lsc .r-ring-s ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-ring-s  { stroke: rgba(46,74,90,.18); }
.uw-band[data-theme="light"] .uw-lsc .r-route-s ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-route-s  { stroke: var(--critical-600); }
.uw-band[data-theme="light"] .uw-lsc .r-gate ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-gate  { fill: var(--bg-surface); stroke: rgba(10,93,110,.35); }
.uw-band[data-theme="light"] .uw-lsc .r-verifbox ,
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .r-verifbox  { fill: var(--bg-surface); stroke: rgba(12,107,75,.3); }

/* --- label halo for glyphs sitting on moving backgrounds (plate/halo-txt).
   Paints a canvas-coloured stroke behind the text via paint-order so the
   text always sits on the canvas, never on a travelling dot or a route. --- */
.uw-lsc .plate, .uw-lsc .halo-txt {
  paint-order: stroke;
  stroke: var(--lsc-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* --- Traveling-dot markers (smil-motion). v8 shipped these without the
   motion that positions them, so they default to (0,0) and stray into the
   top-left corner. Hidden for launch pending a decision on how to animate
   the exposure path (SMIL travel vs static pulse vs remove). Deleting this
   one rule restores them once that is decided. --- */
.uw-lsc .smil-motion { display: none; }

/* ============================================================
   BREAKPOINTS

   Three, and only three. Previously there were twelve, none of
   them chosen: each was added when a component broke, at
   whatever width it happened to break at.

     1180px   large tablet landscape, small laptops
      900px   tablets, large phones landscape
      640px   phones

   Verified against real device widths: 375, 390, 412, 430, 744,
   768, 820, 834, 1024, 1194, 1280, 1366, 1512, 1728, 1920, 2560.
   Note that no device reports 1440px.
   ============================================================ */

/* ============================================================
   @1180px  large tablet landscape and small laptops. Multi-column grids
   must collapse here, before iPad Pro portrait at 1024px.
   ============================================================ */
@media (max-width: 1180px) {

  /* was @1000px */
  .uw-loop__steps { grid-template-columns: repeat(3, 1fr); }

  /* was @1000px */
  /* 5 role cells: 3-across avoids the orphaned single cell that 2-across
     leaves (2+2+1). 3+2 reads as intentional. Reset all right borders,
     then redraw them so no cell has a dangling edge at the row end. */
  .uw-roles2 { grid-template-columns: repeat(3, 1fr); }
  .uw-role2 { border-bottom: 1px solid var(--border-default); border-right: 1px solid var(--border-default); }
  .uw-role2:nth-child(3n) { border-right: 0; }

  /* was @1000px */
  .uw-role2 { padding: var(--space-7) var(--space-5); }

  /* was @980px */
  .uw-hub { grid-template-columns: 1fr; }

  /* was @980px */
  .uw-hub__side--a, .uw-hub__side--b { padding: 0; }
  .uw-hub__side::before, .uw-hub__side::after,
  .uw-hub__side .uw-src::after { display: none; }
  .uw-hub__side--a { order: 1; }
  .uw-hub__side--b { order: 2; margin-top: var(--space-4); }
  .uw-hub__arrow {
  display: block; order: 3; text-align: center;
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--accent); padding: var(--space-6) 0 var(--space-4);
  }
  .uw-hub__core { order: 4; }
}

/* ============================================================
   @900px  tablets and large phones in landscape. Two-column figures
   become one. The loop becomes a vertical rail.
   ============================================================ */
@media (max-width: 900px) {
  /* was @900px */
  .uw-band { padding: var(--space-16) 0; }

  /* was @900px */
  .uw-grid--3, .uw-grid--2 { grid-template-columns: 1fr; }

  /* was @900px */
  .uw-split { grid-template-columns: 1fr; gap: var(--space-8); }

  /* was @900px */
  .uw-statement { padding: var(--space-20) 0; }

  /* was @900px */
  .uw-bh { padding: var(--space-10) var(--space-6); } .uw-bh__in { grid-template-columns: 1fr; gap: var(--space-8); }

  /* was @860px */
  .uw-navlinks { display: none; }

  /* was @800px */
  .uw-stage { grid-template-columns: 30px 1fr; } .uw-stage__d { grid-column: 2; }

  /* was @760px */
  .uw-ticket { grid-template-columns: 1fr; }
  .uw-ticket__side + .uw-ticket__side { border-left: 0; border-top: 1px solid var(--border-default); }

  /* was @760px */
  .uw-funnel3 { grid-template-columns: 1fr; }
  .uw-funnel3__c + .uw-funnel3__c { border-left: 0; border-top: 1px solid var(--border-default); }

  /* was @760px */
  .uw-hub__also { grid-template-columns: 1fr; gap: var(--space-4); }

  /* was @720px */
  .uw-fig__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .uw-fig__body > svg { min-width: 640px; }
  .uw-fig__body::after {
  content: "scroll to follow the path";
  display: block; text-align: center; padding-top: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-disabled);
  }
  /* the loop: track is illustrative on mobile; the steps grid carries the content */
  .uw-loop__track .num { display: none; }
  .uw-loop__track .cap { font-size: 14px; }
  .uw-loop__steps { margin-top: var(--space-5); }
  .uw-uc-rec { white-space: normal; }
  .uw-uc-rec > div { white-space: normal; }

  /* was @720px */
  .uw-loop__track--wide { display: none; }
  .uw-loop__steps {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
  position: relative;
  padding-left: 34px;
  }
  /* the rail */
  .uw-loop__steps::before {
  content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px;
  width: 1.6px; background: var(--border-strong);
  }
  /* the return path */
  .uw-loop__steps::after {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 9px;
  border: 1.6px dashed var(--status-verified); border-right: 0;
  border-radius: 9px 0 0 9px;
  }
  .uw-loop__step { position: relative; padding: var(--space-4) 0; }
  .uw-loop__step::before {
  content: ""; position: absolute; left: -34px; top: calc(var(--space-4) + 4px);
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--bg-canvas); border: 1.6px solid var(--border-strong);
  }
  .uw-loop__step:first-child::before { border-color: var(--accent); border-width: 2px; }
  .uw-loop__step:last-child::before  { border-color: var(--status-verified); border-width: 2px; }
  .uw-loop__step .n { margin-bottom: 0; }
  .uw-loop__step h3 { font-size: var(--text-md); }
  .uw-loop__step p  { font-size: var(--text-sm); margin-top: 2px; }
  .uw-loop__cap {
  display: block; margin-top: var(--space-4); padding-left: 34px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--status-verified); letter-spacing: var(--ls-wide);
  }

  /* was @720px */
  .uw-fig { position: relative; }
  .uw-fig__body { position: relative; }
  .uw-fig__body::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 22px; width: 42px;
  background: linear-gradient(to right, transparent, var(--bg-surface));
  pointer-events: none; z-index: 2;
  }

  /* was @700px */
  .uw-card .uw-uc-rec { min-height: 0; }
}

/* ============================================================
   @640px  phones. Everything is a single column.
   ============================================================ */
@media (max-width: 640px) {
  /* was @640px */
  .uw { padding: 0 var(--space-5); }

  /* was @640px */
  .uw-fail { grid-template-columns: 1fr; gap: var(--space-2); }

  /* was @640px */
  .uw-line { grid-template-columns: 22px 1fr; font-size: 12.5px; padding: var(--space-2-5) 0; }
  .uw-line__note { display: none; }
  .uw-line__t { word-break: break-word; }
  .uw-terminal__bar { font-size: var(--text-2xs); }
  .uw-terminal__bar .uz-badge { font-size: var(--text-2xs); }
  .uw-terminal__foot { font-size: var(--text-2xs); text-align: center; }

  /* was @560px */
  .uw-roles2 { grid-template-columns: 1fr; } .uw-role2 { border-right: 0; }

  /* was @560px */
  .uw-bh__meta { font-size: 11px; padding: var(--space-4); }
  .uw-bh__h { font-size: clamp(26px, 8vw, 34px); }

  /* was @560px */
  .uw-plan { padding: var(--space-3-5, 14px) var(--space-4); }
  .uw-plan__hd { flex-wrap: wrap; gap: var(--space-2); }
  .uw-plan__tag { margin-left: 0; }
  .uw-plan__meta .k { min-width: 0; margin-right: var(--space-2); }

  /* was @560px */
  .uw-funnel3__c { padding: var(--space-7) var(--space-5); }
  .uw-statement p { font-size: clamp(21px, 6.4vw, 28px); }

  /* was @560px */
  .uw-src { grid-template-columns: 1fr auto; }
  .uw-src__l { grid-column: 1 / -1; }
}


html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .orb-dark  { display: none; }
html[data-theme="light"] .uw-band:not([data-theme]) .uw-lsc .orb-light { display: inline; }

/* ============================================================
   Contact / Black Hat page helpers
   Small additions for the conversion pages. They reuse the
   existing band, hero, list, and trust components; only two
   new pieces are needed.
   ============================================================ */

/* A shorter hero for interior pages: no giant scene below it, so it
   does not need the homepage hero's vertical drama. */
.uw-hero--tight .uw-hero__in { padding-block: var(--space-16); }
.uw-hero--tight .uw-lead { max-width: 62ch; }

/* Booking embed wrapper: gives the Calendly iframe a framed, themed
   surface consistent with the site's cards, and a sane max width so
   the 700px widget does not stretch edge to edge on wide screens. */
.uw-embed {
  margin-top: var(--space-8);
  max-width: 720px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--bg-surface);
}
.uw-embed .calendly-inline-widget { display: block; }

/* Black Hat page: sticky mobile CTA. Hidden on desktop (the header CTA and
   in-page buttons cover it); pinned bottom-center on phones so the booking
   action is always a thumb-reach away on a crowded show floor. */
.uw-sticky-cta { display: none; }
@media (max-width: 640px) {
  .uw-sticky-cta {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: var(--space-4); right: var(--space-4);
    bottom: var(--space-4); z-index: 50;
    min-height: 52px; padding: 0 var(--space-6);
    background: var(--accent); color: var(--accent-contrast);
    font-weight: var(--fw-semibold); font-size: var(--text-base);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
  }
}

/* ============================================================
   Exposure paths — 4-across compact layout (Option C)
   Four shapes on one row on desktop, denser than the old 2x2
   cards. The per-card "closure verified" line is gone; one
   shared arc line sits below the row instead.
   ============================================================ */
.uw-shapes4 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4); margin-top: var(--space-8);
}
.uw-shape4 { display: flex; flex-direction: column; padding: var(--space-5) var(--space-4); }
.uw-shape4 .uw-uc-rec {
  font-size: var(--text-2xs); line-height: 1.9;
  min-height: auto; margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
}
.uw-shape4 > p { font-size: var(--text-sm); margin-top: auto; }
.uw-uc-arc {
  margin-top: var(--space-8); color: var(--text-secondary);
  font-size: var(--text-md); line-height: var(--lh-relaxed); max-width: 88ch;
}
.uw-uc-arc .v { color: var(--status-verified); margin-right: var(--space-2); }

/* 4 across is too tight below the large-tablet breakpoint: go 2x2, then 1. */
@media (max-width: 1180px) { .uw-shapes4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .uw-shapes4 { grid-template-columns: 1fr; } }

/* ============================================================
   Closing section — Black Hat "ticket stub" (LOUD 3)
   Merges the event push with the final CTA into one loud
   closing block. Text-forward, no third-party logo.
   ============================================================ */
.uw-bh--loud { padding: 0; overflow: hidden; }
.uw-bh__loud { display: grid; grid-template-columns: 1.15fr .85fr; }
.uw-bh__loudleft { padding: var(--space-12); }
.uw-bh__loudh {
  font-size: clamp(32px, 4vw, 52px); letter-spacing: var(--ls-tighter);
  line-height: 1.02; margin: var(--space-4) 0 var(--space-5);
}
.uw-bh__loudb { color: var(--text-secondary); line-height: var(--lh-relaxed); max-width: 42ch; }

.uw-bh__stub {
  position: relative; background: var(--bg-surface);
  border-left: 2px dashed var(--border-strong);
  padding: var(--space-10) var(--space-8);
  display: flex; flex-direction: column; justify-content: center;
}
.uw-bh__stubtop {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest, .18em); color: var(--text-tertiary);
  text-align: center; margin-bottom: var(--space-3);
}
.uw-bh__stubcity {
  font-family: var(--font-mono); font-weight: var(--fw-bold, 700);
  font-size: clamp(30px, 3.6vw, 46px); letter-spacing: var(--ls-tight);
  text-align: center; color: var(--accent); margin-bottom: var(--space-5);
}
.uw-bh__stubrows {
  display: flex; flex-direction: column; gap: var(--space-2-5);
  font-family: var(--font-mono); font-size: var(--text-xs);
}
.uw-bh__stubrows > div {
  display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-2);
}
.uw-bh__stubrows span { color: var(--text-tertiary); }
.uw-bh__stubrows b { color: var(--text-primary); font-weight: var(--fw-medium); }
.uw-bh__barcode {
  height: 38px; margin-top: var(--space-5); opacity: .5;
  background: repeating-linear-gradient(90deg,
    var(--text-primary) 0 2px, transparent 2px 5px,
    var(--text-primary) 5px 6px, transparent 6px 10px);
}
@media (max-width: 900px) {
  .uw-bh__loud { grid-template-columns: 1fr; }
  .uw-bh__stub { border-left: 0; border-top: 2px dashed var(--border-strong); }
}

/* ============================================================
   LSC stages — horizontal strip (option B)
   The five stages sit horizontally beneath the visual, each
   under its part of the flow, replacing the old vertical rows
   and the definition paragraph. On wide screens: 5 across.
   Never collapses to 2 (which would orphan the 5th cell): it
   steps 5 -> 3 -> 1 so a row is always full or the last is 3+2.
   ============================================================ */
.uw-hstages {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: var(--space-4);
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-5);
}
.uw-hstage {
  padding: 0 var(--space-4);
  border-left: 1px solid var(--border-subtle);
}
.uw-hstage:first-child { border-left: 0; padding-left: 0; }
.uw-hstage__n { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-disabled); }
.uw-hstage__t {
  font-weight: var(--fw-semibold); font-size: var(--text-sm);
  letter-spacing: var(--ls-tight); line-height: var(--lh-snug);
  margin: var(--space-2) 0;
}
.uw-hstage__d { color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--lh-normal); }
.uw-hstage--lit { border-left: 2px solid var(--accent); padding-left: var(--space-4); }
.uw-hstage--lit .uw-hstage__n { color: var(--accent); }
.uw-hstage--lit .uw-hstage__t { color: var(--text-primary); }

/* 5-across is too tight below the large-tablet breakpoint. Step to 3
   (5 items -> 3+2, reads intentional), then to 1 on phones. Reset the
   left borders per row so no cell has a dangling divider. */
@media (max-width: 1180px) {
  .uw-hstages { grid-template-columns: repeat(3, 1fr); gap: var(--space-6) 0; }
  .uw-hstage { border-left: 1px solid var(--border-subtle); padding-left: var(--space-4); }
  .uw-hstage:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .uw-hstage--lit { border-left: 2px solid var(--accent); padding-left: var(--space-4); }
}
@media (max-width: 640px) {
  .uw-hstages { grid-template-columns: 1fr; gap: var(--space-5); }
  .uw-hstage, .uw-hstage:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .uw-hstage--lit { border-left: 2px solid var(--accent); padding-left: var(--space-4); }
}

/* ============================================================
   Contact — booking hero (two-column, calendar above the fold)
   Reassurance on the left, Calendly widget on the right, both
   in the first screen. On mobile the columns stack with the
   calendar FIRST (order:-1) so the primary action still lands
   without scrolling.
   ============================================================ */
.uw-book { position: relative; border-bottom: 1px solid var(--border-subtle); }
.uw-book__in {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: var(--space-12); align-items: start;
  padding-block: var(--space-14) var(--space-16);
}
.uw-book__left { align-self: center; }
.uw-book__h { margin-bottom: var(--space-4); }
.uw-book__lead { max-width: 46ch; margin-bottom: var(--space-8); }
.uw-book__list { margin-top: 0; }
.uw-book__right { min-width: 0; }
.uw-book__right .uw-embed { margin-top: 0; max-width: none; }

@media (max-width: 900px) {
  .uw-book__in { grid-template-columns: 1fr; gap: var(--space-8); padding-block: var(--space-10) var(--space-12); }
  /* calendar first on mobile: the booking widget is the point of the page */
  .uw-book__right { order: -1; }
  .uw-book__lead { max-width: none; }
}

/* ---- contact booking hero: proof record, founders, calendar meta ---- */
.uw-book__rec { margin-top: var(--space-6); margin-bottom: var(--space-2); max-width: 100%; }
.uw-book__reccap { color: var(--text-tertiary); font-size: var(--text-xs); margin: 0 0 var(--space-6); }
.uw-book__list { margin-top: 0; margin-bottom: var(--space-8); }

.uw-founders {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-top: var(--space-6); border-top: 1px solid var(--border-subtle);
}
.uw-founder { display: flex; gap: var(--space-3); align-items: flex-start; }
.uw-founder__av {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-inset); border: 1px solid var(--border-default);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--ls-wide); color: var(--text-secondary);
  box-shadow: 0 0 12px -2px var(--accent);
}
.uw-founder__n { font-weight: var(--fw-semibold); font-size: var(--text-sm); letter-spacing: var(--ls-tight); }
.uw-founder__b { color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--lh-normal); margin-top: 2px; }
.uw-founders__note {
  color: var(--text-secondary); font-size: var(--text-sm);
  line-height: var(--lh-relaxed); font-style: italic;
  margin: var(--space-2) 0 0; padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.uw-book__meta {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-wide); color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}
.uw-book__after {
  color: var(--text-tertiary); font-size: var(--text-xs);
  margin-top: var(--space-3); text-align: center;
}

/* ---- Black Hat page: booking-hero modifiers ---- */
/* Flat ticket-stub variant: sits inside the hero left column as an event
   detail card, without the dashed-edge / big city header of the closing block. */
.uw-bh__stub--flat {
  border: 1px solid var(--border-default);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-8);
}
.uw-bh__stub--flat .uw-bh__stubrows { gap: var(--space-2-5); }

/* Founders side by side (this page introduces them as a pair, not stacked). */
.uw-founders--row {
  flex-direction: row; flex-wrap: wrap;
  gap: var(--space-8); border-top: 0; padding-top: 0;
}
.uw-founders--row .uw-founder { flex: 1 1 340px; }

/* ============================================================
   FIELD NOTES
   Editorial article template + index. Reads like a publication,
   not a resource center: generous measure, characterful headers,
   the concrete example set apart, rubrics boxed, FAQ as quiet
   reference below the essay. Inherits the site's tokens and
   type; the restraint is the point.
   ============================================================ */

/* ---- article shell ---- */
.fn-article { padding-block: var(--space-16) var(--space-20); }
.fn-wrap { max-width: 720px; margin: 0 auto; padding-inline: var(--space-6); }

/* back link */
.fn-back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-tertiary); text-decoration: none; margin-bottom: var(--space-8);
}
.fn-back:hover { color: var(--text-secondary); }

/* eyebrow / kicker for the piece */
.fn-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-4);
}

/* title + standfirst */
.fn-title { font-size: clamp(30px, 4.2vw, 44px); letter-spacing: var(--ls-tighter); line-height: 1.08; margin: 0 0 var(--space-4); }
.fn-standfirst { font-size: var(--text-lg); color: var(--text-secondary); line-height: var(--lh-snug); margin: 0 0 var(--space-8); }

/* byline: avatar + name + date */
.fn-byline { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-8); margin-bottom: var(--space-10); border-bottom: 1px solid var(--border-subtle); }
.fn-byline__av {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-inset); border: 1px solid var(--border-default);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--ls-wide); color: var(--text-secondary);
  background-size: cover; background-position: center;
  box-shadow: 0 0 12px -2px var(--accent);
}
.fn-byline__name { font-weight: var(--fw-semibold); font-size: var(--text-sm); }
.fn-byline__meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); letter-spacing: var(--ls-wide); }

/* body prose */
.fn-body { font-size: var(--text-lg); line-height: 1.72; color: var(--text-primary); }
.fn-body > p { margin: 0 0 var(--space-6); }
.fn-body > p:first-of-type { font-size: calc(var(--text-lg) + 1px); }
.fn-body h2 {
  font-size: var(--text-2xl, 26px); letter-spacing: var(--ls-tight); line-height: 1.2;
  margin: var(--space-12) 0 var(--space-5);
}
.fn-body strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.fn-body em { color: var(--text-secondary); }

/* ordered/unordered lists rendered as real lists */
.fn-body ol, .fn-body ul { margin: 0 0 var(--space-6); padding-left: 0; list-style: none; counter-reset: fn; }
.fn-body ol > li { position: relative; padding-left: var(--space-10); margin-bottom: var(--space-4); counter-increment: fn; }
.fn-body ol > li::before {
  content: counter(fn); position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent);
  border: 1px solid var(--border-default); border-radius: 50%;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.fn-body ul > li { position: relative; padding-left: var(--space-6); margin-bottom: var(--space-3); }
.fn-body ul > li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* the concrete example, set apart (edge-proxy-03 / lab-bench-11) */
.fn-example {
  border-left: 2px solid var(--accent);
  background: var(--bg-inset);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6) var(--space-7);
  margin: var(--space-8) 0;
  font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--text-secondary);
}
.fn-example p { margin: 0 0 var(--space-3); }
.fn-example p:last-child { margin-bottom: 0; }
.fn-example code, .fn-mono { font-family: var(--font-mono); font-size: .92em; color: var(--text-primary); }

/* ============================================================
   LEGAL / long-form policy pages (privacy, terms).
   Restrained, readable, denser than a Field Note. Tokens only.
   ============================================================ */
.legal { max-width: 760px; margin: 0 auto; padding: var(--space-12) var(--space-6) var(--space-16); }
.legal__eyebrow {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-3);
}
.legal h1 { font-size: clamp(30px, 4vw, 40px); letter-spacing: var(--ls-tight); line-height: 1.12; margin: 0 0 var(--space-3); }
.legal__meta { font-size: var(--text-sm); color: var(--text-tertiary); margin: 0 0 var(--space-10); }
.legal__body { font-size: var(--text-md); line-height: 1.7; color: var(--text-secondary); }
.legal__body h2 {
  font-size: var(--text-xl); line-height: 1.25; color: var(--text-primary);
  letter-spacing: var(--ls-tight); margin: var(--space-10) 0 var(--space-4);
}
.legal__body h3 { font-size: var(--text-md); color: var(--text-primary); font-weight: var(--fw-semibold); margin: var(--space-6) 0 var(--space-2); }
.legal__body p { margin: 0 0 var(--space-5); }
.legal__body strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.legal__body a { color: var(--accent); text-decoration: none; }
.legal__body a:hover { text-decoration: underline; }
.legal__body ul { margin: 0 0 var(--space-5); padding-left: var(--space-6); }
.legal__body li { margin-bottom: var(--space-2); }
/* policy tables (lawful basis, sub-processors) */
.legal__table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0 var(--space-8); font-size: var(--text-sm); }
.legal__table th, .legal__table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.legal__table th { color: var(--text-tertiary); font-weight: var(--fw-semibold); font-size: var(--text-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.legal__table td { color: var(--text-secondary); }
.legal__table td:first-child { color: var(--text-primary); }
@media (max-width: 640px) {
  .legal { padding: var(--space-10) var(--space-5) var(--space-12); }
  .legal__table th, .legal__table td { padding: var(--space-2) var(--space-3); }
}

/* in-body figure: the one earned diagram, sitting above its explanatory prose */
.fn-example--fig { padding-top: var(--space-5); }
.fn-fig { display: block; width: 100%; height: auto; margin-bottom: var(--space-5); }

/* "The short version" box — top-of-piece summary, founder-note register.
   Tinted accent panel so it reads as the author's own framing, distinct
   from the neutral rubric (reader's tool) and the inset example. */
.fn-tldr {
  background: var(--accent-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-8) 0 var(--space-10);
}
.fn-tldr__label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-4);
}
.fn-tldr ul { margin: 0; padding-left: 0; list-style: none; }
.fn-tldr li {
  position: relative; padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: var(--text-md); line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.fn-tldr li:last-child { margin-bottom: 0; }
.fn-tldr li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.fn-tldr li strong { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* boxed rubric / self-diagnostic (liftable takeaway tool) */
.fn-rubric {
  border: 1px solid var(--border-default); border-radius: var(--radius-lg, 12px);
  background: var(--bg-surface); padding: var(--space-8);
  margin: var(--space-10) 0;
}
.fn-rubric__label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-5);
}
.fn-rubric ol { margin: 0; }

/* pull line / coinage callout (e.g. "triage treadmill") */
.fn-pull {
  font-size: var(--text-xl, 22px); line-height: 1.35; letter-spacing: var(--ls-tight);
  color: var(--text-primary); border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle); padding: var(--space-6) 0;
  margin: var(--space-10) 0;
}

/* closing signature */
.fn-sign { font-style: italic; color: var(--text-secondary); margin-top: var(--space-8); }

/* ---- FAQ accordions (reference material below the essay) ---- */
.fn-faq { margin-top: var(--space-16); padding-top: var(--space-10); border-top: 1px solid var(--border-default); }
.fn-faq__h { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-6); }
.fn-faq details { border-bottom: 1px solid var(--border-subtle); }
.fn-faq summary {
  cursor: pointer; list-style: none; padding: var(--space-5) 0;
  font-weight: var(--fw-medium); font-size: var(--text-md); color: var(--text-primary);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.fn-faq summary::-webkit-details-marker { display: none; }
.fn-faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--text-tertiary); font-size: var(--text-lg); flex: none; }
.fn-faq details[open] summary::after { content: "\2013"; }
.fn-faq details[open] summary { color: var(--accent); }
.fn-faq__a { padding: 0 0 var(--space-5); color: var(--text-secondary); font-size: var(--text-md); line-height: var(--lh-relaxed); }

/* ---- index ---- */
.fn-index { padding-block: var(--space-16) var(--space-20); }
.fn-index__head { max-width: 720px; margin: 0 auto var(--space-12); padding-inline: var(--space-6); }
.fn-index__sub { font-size: var(--text-lg); color: var(--text-secondary); line-height: var(--lh-snug); margin-top: var(--space-4); }
.fn-list { max-width: 720px; margin: 0 auto; padding-inline: var(--space-6); }
.fn-card { display: block; text-decoration: none; padding: var(--space-8) 0; border-top: 1px solid var(--border-subtle); transition: var(--transition-colors); }
.fn-card:last-child { border-bottom: 1px solid var(--border-subtle); }
.fn-card:hover .fn-card__title { color: var(--accent); }
.fn-card__meta { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-wide); color: var(--text-tertiary); text-transform: uppercase; margin-bottom: var(--space-3); display: flex; gap: var(--space-3); align-items: center; }
.fn-card__title { font-size: var(--text-2xl, 26px); letter-spacing: var(--ls-tight); line-height: 1.18; color: var(--text-primary); margin: 0 0 var(--space-2); transition: var(--transition-colors); }
.fn-card__dek { color: var(--text-secondary); font-size: var(--text-md); line-height: var(--lh-normal); margin: 0; }
.fn-card__by { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); margin-top: var(--space-3); }

@media (max-width: 640px) {
  .fn-body, .fn-body > p:first-of-type { font-size: var(--text-md); }
  .fn-title { font-size: 28px; }
}

/* ============================================================
   FIELD NOTES INDEX — card grid (API-era style)
   Dark hero, category filter pills, 3-col card grid. Each card
   carries a content-derived SVG visual in the scene language,
   not a stock image. Byline avatar uses the accent-glow motif.
   ============================================================ */
.fni-hero {
  background: var(--bg-inset); border-bottom: 1px solid var(--border-subtle);
  text-align: center; padding: var(--space-20) var(--space-6);
}
.fni-hero h1 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: var(--ls-tight); line-height: 1.14; margin: 0 auto var(--space-4); max-width: 26ch; text-wrap: balance; }
.fni-hero p { color: var(--text-secondary); font-size: var(--text-lg); margin: 0; }

.fni-filters { display: flex; gap: var(--space-2-5); justify-content: center; flex-wrap: wrap; margin: var(--space-12) 0 var(--space-10); padding: 0 var(--space-6); }
.fni-pill {
  font-size: var(--text-sm); padding: 8px 18px; border-radius: var(--radius-full, 999px);
  border: 1px solid var(--border-default); color: var(--text-secondary);
  background: transparent; cursor: pointer; font-family: inherit; transition: var(--transition-colors);
}
.fni-pill:hover { color: var(--text-primary); border-color: var(--border-strong); }
.fni-pill--on { background: var(--text-primary); color: var(--bg-canvas); border-color: var(--text-primary); }

.fni-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6) var(--space-20); }
.fni-card { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 12px); overflow: hidden; background: var(--bg-surface); transition: var(--transition-colors); }
.fni-card:hover { border-color: var(--border-strong); }
.fni-card__img { aspect-ratio: 2 / 1; position: relative; overflow: hidden; border-bottom: 1px solid var(--border-subtle); }
.fni-card__img svg { width: 100%; height: 100%; display: block; }
.fni-card__tag { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: var(--text-3xs, 10px); letter-spacing: var(--ls-wide); text-transform: uppercase; background: var(--accent); color: var(--accent-contrast); padding: 4px 10px; border-radius: var(--radius-sm); }
.fni-card__body { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; flex: 1; }
.fni-card__title { font-size: var(--text-lg); letter-spacing: var(--ls-tight); line-height: 1.25; color: var(--text-primary); margin: 0 0 var(--space-3); transition: var(--transition-colors); }
.fni-card:hover .fni-card__title { color: var(--accent); }
.fni-card__dek { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.55; margin: 0 0 var(--space-5); flex: 1; }
.fni-card__by { display: flex; align-items: center; gap: var(--space-2-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.fni-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-inset); border: 1px solid var(--border-default); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-secondary); box-shadow: 0 0 12px -2px var(--accent); background-size: cover; background-position: center; }
.fni-by__n { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text-primary); }
.fni-by__m { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); }

@media (max-width: 900px) { .fni-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .fni-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FIELD NOTE — article shell with TOC rail + share
   Desktop: a light "On this page" rail sits left of the reading
   column (essay stays centred-ish, rail is a courtesy). The rail
   is sticky and desktop-only; on narrower screens it collapses
   and the essay runs full single-column.
   ============================================================ */
.fn-shell {
  display: grid; grid-template-columns: 220px minmax(0, 720px);
  gap: var(--space-12); justify-content: center;
  padding: var(--space-16) var(--space-6) var(--space-20);
}
.fn-shell .fn-wrap { padding-inline: 0; max-width: none; margin: 0; }

.fn-toc { position: sticky; top: var(--space-16); align-self: start; }
.fn-toc__label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: var(--space-4);
}
.fn-toc nav { display: flex; flex-direction: column; gap: var(--space-3); border-left: 1px solid var(--border-subtle); }
.fn-toc a {
  font-size: var(--text-sm); line-height: 1.4; color: var(--text-tertiary);
  text-decoration: none; padding-left: var(--space-4); margin-left: -1px;
  border-left: 2px solid transparent; transition: var(--transition-colors);
}
.fn-toc a:hover { color: var(--text-primary); }
.fn-toc a.is-active { color: var(--accent); border-left-color: var(--accent); }

/* byline now holds share on the right */
.fn-byline { display: flex; align-items: center; gap: var(--space-3); }
.fn-byline__who { flex: 1; }
.fn-share { display: flex; gap: var(--space-2); }
.fn-share__btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default); background: transparent;
  color: var(--text-tertiary); cursor: pointer; text-decoration: none;
  transition: var(--transition-colors);
}
.fn-share__btn:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* rail collapses below the point where the fixed columns stop fitting */
@media (max-width: 1080px) {
  .fn-shell { grid-template-columns: minmax(0, 720px); }
  .fn-toc { display: none; }
}