/* -----------------------------------------------------------------------------
   0  FONTS  ·  self hosted, latin subset, variable
   Served from this origin so no visitor IP reaches a third party font CDN.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo.woff2") format("woff2-variations");
  font-weight: 400 800; font-stretch: 75% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono.woff2") format("woff2-variations");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* =============================================================================
   PRAEVEN SECURITY
   praeven.css  ·  v4
   One stylesheet. Tokens, field layers, base, components, motion.
   Purple anchors the brand. Dark plum heroes alternate with warm, light
   reading surfaces; semantic tokens maintain contrast in each context.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1  TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand, authoritative */
  --accent:        #7C5CFF;
  --accent-hover:  #B8A1FF;
  --button-bg:     #A78BFA;
  --button-ink:    #171022;
  --input-bg:      #161321;
  --control-border: #82788F;
  --accent-soft:   #A78BFA;
  --base:          #12101B;
  --raised:        #1B1628;
  --motto:         #2A1D45;
  --ink:           #F5F2FA;
  --muted:         #C7C1D2;
  --hair:          rgba(255,255,255,.08);
  --hair-2:        rgba(255,255,255,.14);
  --badge-bg:      rgba(124,92,255,.15);

  /* Derived surfaces */
  --card:          #1C1729;
  --card-2:        #251D36;
  --wash:          rgba(124,92,255,.07);
  --glow:          rgba(124,92,255,.34);

  /* Ambient field, overridden per page */
  --field-a: 258;          /* hue of the primary bloom  */
  --field-b: 268;          /* hue of the secondary bloom */
  --field-strength: .45;

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --t-eyebrow: .75rem;
  --t-h1: clamp(2.4rem, 6vw, 4.5rem);
  --t-h2: clamp(1.85rem, 3.5vw, 2.75rem);
  --t-h3: 1.3125rem;
  --t-body: clamp(1rem, .95rem + .25vw, 1.0625rem);
  --t-lead: clamp(1.125rem, 1rem + .55vw, 1.375rem);
  --t-sm: .9375rem;
  --t-xs: .8125rem;

  /* Rhythm */
  --gut: clamp(1.25rem, 4vw, 3rem);
  --shell: 1200px;
  --prose: 68ch;
  --pad-y: clamp(3.75rem, 7vw, 6rem);
  --r: 16px;
  --r-sm: 10px;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* Per-page ambient hue rotation. Primary accent never changes. */
body[data-page="home"]        { --field-a: 258; --field-b: 272; }
body[data-page="training"]    { --field-a: 272; --field-b: 292; }
body[data-page="prismvector"] { --field-a: 250; --field-b: 196; --field-strength: 1.25; }
body[data-page="briefings"]   { --field-a: 232; --field-b: 258; }
body[data-page="about"]       { --field-a: 246; --field-b: 264; }
body[data-page="contact"]     { --field-a: 258; --field-b: 252; --field-strength: .7; }

/* -----------------------------------------------------------------------------
   2  RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  color-scheme: dark;
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* --- the field: fixed ambient light + surveying grid --- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120vw 90vh at 86% -12%,
      hsl(var(--field-a) 100% 68% / calc(.16 * var(--field-strength))), transparent 58%),
    radial-gradient(90vw 70vh at -10% 108%,
      hsl(var(--field-b) 100% 66% / calc(.11 * var(--field-strength))), transparent 60%),
    linear-gradient(hsl(var(--field-a) 100% 70% / .028) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--field-a) 100% 70% / .028) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 68px 68px, 68px 68px;
}

/* --- grain. this is what stops a dark site reading as flat --- */
body::after {
  content: "";
  position: fixed; inset: -50%; z-index: 1; pointer-events: none;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.site-header, main, .site-footer { position: relative; z-index: 2; }

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.06;
  text-wrap: balance;
}
h1 { overflow-wrap: anywhere; font-size: var(--t-h1); letter-spacing: -.04em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.018em; line-height: 1.28; }
h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.35; }
h3.h-sm { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.35; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-soft); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--ink); }
p a:not(.btn):not(.arrow) { text-decoration: underline; text-underline-offset: .2em; }

:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: #fff; }

.lead { font-size: var(--t-lead); color: var(--muted); line-height: 1.55; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.prose { max-width: var(--prose); }
.center { text-align: center; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -120px; z-index: 300;
  background: var(--button-bg); color: var(--button-ink);
  padding: .8rem 1.25rem; border-radius: var(--r-sm); font-weight: 700;
}
.skip:focus { top: 1rem; }

/* -----------------------------------------------------------------------------
   3  LAYOUT
   -------------------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.shell--narrow { max-width: 900px; }

.sec { padding-block: var(--pad-y); position: relative; }
.sec--tight { padding-block: clamp(3.25rem, 5.5vw, 5rem); }
.sec--flush { padding-top: 0; }

/* Light bands provide a clear reading surface between dark brand sections. */
.sec--raised, .sec--light {
  --base: #F7F5FA;
  --raised: #F7F5FA;
  --ink: #241C32;
  --muted: #5F566D;
  --accent: #6842C2;
  --accent-soft: #6440AD;
  --accent-hover: #53319F;
  --button-bg: #6842C2;
  --button-ink: #FFFFFF;
  --input-bg: #FFFFFF;
  --control-border: #8A7D9B;
  --card: #FFFFFF;
  --card-2: #F0EAF8;
  --hair: #DED7E7;
  --hair-2: #C9BED8;
  --badge-bg: #EEE7F8;
  --wash: rgba(104,66,194,.06);
  --glow: rgba(104,66,194,.18);
  color-scheme: light;
  color: var(--ink);
  background: var(--base);
  border-block: 1px solid var(--hair);
}

/* Section head */
.head { max-width: 760px; margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.head--center { margin-inline: auto; text-align: center; }
.head p:not(.eyebrow) { color: var(--muted); font-size: var(--t-lead); line-height: 1.55; margin-bottom: 0; }
.head--center .eyebrow { justify-content: center; }

/* -----------------------------------------------------------------------------
   4  EYEBROWS, BADGES, DATA LABELS
   The mono face is structural. Every operational label uses it, so the site
   reads as a readout rather than a brochure.
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0 0 1.15rem;
  display: flex; align-items: center; gap: .75rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase;
  padding: .4rem .85rem; border-radius: 999px;
  background: var(--badge-bg); color: var(--accent-soft);
  border: 1px solid rgba(124,92,255,.28);
}
.card > .badge:first-child { margin-bottom: 1.1rem; }
.card > .badge { white-space: nowrap; }
@media (max-width: 400px) { .card > .badge { white-space: normal; } }
.badge--pulse::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-soft); flex: none;
  box-shadow: 0 0 0 0 rgba(167,139,250,.55);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(167,139,250,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(167,139,250,0); }
  100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); }
}

.tag {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .03em;
  color: var(--accent-soft);
  background: var(--wash);
  border: 1px solid rgba(124,92,255,.2);
  border-radius: 5px; padding: .2rem .5rem;
  display: inline-block; white-space: nowrap;
}
.mono { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .01em; }

/* -----------------------------------------------------------------------------
   5  BUTTONS
   Separate button tokens preserve normal-text contrast on both surfaces.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--display); font-size: 1.1875rem; font-weight: 700;
  letter-spacing: -.015em; line-height: 1;
  padding: 1.0625rem 1.8rem; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease), box-shadow .28s var(--ease), color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--button-bg); color: var(--button-ink); }
.btn--primary:hover {
  background: var(--accent-hover); color: var(--button-ink);
  box-shadow: 0 14px 40px -14px var(--glow);
}
.btn--ghost {
  background: rgba(255,255,255,.02); color: var(--ink); border-color: var(--hair-2);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--accent); background: var(--wash); color: var(--ink); }
.btn--full { width: 100%; }
.btn--sm { font-size: 1rem; padding: .8rem 1.15rem; }

.btns { display: flex; flex-wrap: wrap; gap: .875rem; }
.center .btns, .head--center .btns { justify-content: center; }

.arrow {
  font-family: var(--display); font-weight: 600; font-size: .9375rem;
  display: inline-flex; align-items: center; gap: .45rem; color: var(--accent-soft);
}
.arrow::after {
  content: "→"; transition: transform .24s var(--ease); font-family: var(--body);
}
.arrow:hover::after { transform: translateX(5px); }

/* -----------------------------------------------------------------------------
   6  HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(18,16,27,.94);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.stuck { border-bottom-color: var(--hair); background: rgba(18,16,27,.98); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 74px; }

.brand { display: inline-flex; align-items: center; flex: none; }
.brand__wordmark { display: block; width: 200px; height: auto; }
.site-footer .brand__wordmark { width: 210px; max-width: 100%; }
@media (max-width: 400px) { .brand__wordmark { width: 180px; } }

.nav ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav ul a {
  display: block; font-size: .9375rem; font-weight: 500; color: var(--muted);
  padding: .5rem .85rem; border-radius: 7px; position: relative;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav ul a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.nav ul a[aria-current="page"] { color: var(--ink); background: var(--wash); }

.services-nav { position: relative; }
.services-nav summary {
  display: flex; align-items: center; gap: .65rem; cursor: pointer; list-style: none;
  padding: .5rem .85rem; border-radius: 7px; font-size: .9375rem; font-weight: 500; color: var(--muted);
}
.services-nav summary::-webkit-details-marker { display: none; }
.services-nav summary::after { content: ""; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.services-nav[open] summary::after { transform: translateY(2px) rotate(225deg); }
.services-nav summary:hover, .services-nav[open] summary, .services-nav[data-current] summary { color: var(--ink); background: var(--wash); }
.nav .services-nav__links {
  display: block; position: absolute; top: calc(100% + .65rem); left: 0; width: 330px;
  padding: .5rem; background: var(--card); border: 1px solid var(--hair-2); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.nav .services-nav__links a { padding: .8rem; }
.services-nav__links span, .services-nav__links small { display: block; }
.services-nav__links small { margin-top: .2rem; font-size: .8rem; line-height: 1.5; font-weight: 400; color: var(--muted); }
@media (max-width: 1000px) {
  .nav__links { width: 100%; }
  .services-nav summary { padding: .9rem .5rem; font-size: 1.0625rem; border-bottom: 1px solid var(--hair); border-radius: 0; justify-content: space-between; }
  .nav .services-nav__links { position: static; width: 100%; margin-block: .5rem; box-shadow: none; }
}

.nav__end { display: flex; align-items: center; gap: .75rem; }

.burger {
  display: none; background: rgba(255,255,255,.02); border: 1px solid var(--hair-2);
  border-radius: 9px; padding: .6rem .72rem; cursor: pointer; color: var(--ink);
}
.burger i { display: block; width: 19px; height: 1.5px; background: currentColor; transition: transform .26s var(--ease), opacity .18s var(--ease); }
.burger i + i { margin-top: 5px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .burger { display: block; }
  .nav__panel {
    position: fixed; inset: 74px 0 auto 0; display: none;
    flex-direction: column; gap: 1rem;
    background: rgba(11,9,20,.98); backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--hair);
    padding: 1.25rem var(--gut) 1.75rem;
    max-height: calc(100dvh - 74px); overflow-y: auto;
  }
  .nav__panel.open { display: flex; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav ul a { padding: .9rem .5rem; font-size: 1.0625rem; border-bottom: 1px solid var(--hair); border-radius: 0; }
  .nav__end { flex-direction: column; align-items: stretch; margin-top: .5rem; }
  .nav__end .btn { width: 100%; }
}
@media (max-width: 1000px) {
  html:not(.js) .nav { flex-wrap: wrap; padding-block: 1rem; }
  html:not(.js) .burger { display: none; }
  html:not(.js) .nav__panel { display: flex; position: static; width: 100%; max-height: none; padding: 0; background: transparent; border: 0; }
}
@media (min-width: 1001px) { .nav__panel { display: flex !important; align-items: center; gap: 1.75rem; } }

/* -----------------------------------------------------------------------------
   7  HERO
   -------------------------------------------------------------------------- */
.hero { overflow: clip; padding-block: clamp(4rem, 9vw, 8rem) clamp(3.5rem, 7vw, 6.5rem); position: relative; }
.hero--split .shell {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 940px) { .hero--split .shell { grid-template-columns: 1fr; gap: 3rem; } }

.hero h1 { margin-bottom: 1.35rem; }
.hero__sub { font-size: var(--t-lead); color: var(--muted); line-height: 1.55; max-width: 44ch; margin-bottom: 2.25rem; }
.hero__sig {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hair);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

/* -----------------------------------------------------------------------------
   8  FIGURES: prism, graph, scanline
   -------------------------------------------------------------------------- */
.fig { width: 100%; overflow: visible; }
.fig text { font-family: var(--mono); }
.fig__label { font-size: 12px; fill: var(--muted); }
.fig__cap { font-size: 10px; fill: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.fig__body { fill: rgba(124,92,255,.06); stroke: var(--accent); stroke-width: 1.3; }
.fig__in { stroke: var(--ink); stroke-width: 1.9; fill: none; opacity: .92; }
.fig__ray { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.fig__node { fill: var(--accent-soft); }

/* attack graph */
.graph__edge { stroke: rgba(124,92,255,.28); stroke-width: 1.2; fill: none; }
.graph__edge.hot { stroke: var(--accent); stroke-width: 2; }
.graph__dot { fill: rgba(244,246,250,.28); }
.graph__dot.hot { fill: var(--accent-soft); }
.graph__ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .5; }

/* readout panel */
.readout { border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); backdrop-filter: blur(8px); overflow: hidden; }
.readout__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--hair);
  background: rgba(255,255,255,.025);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.readout__body { padding: clamp(1.1rem, 2.4vw, 1.75rem); }
.row {
  display: grid; grid-template-columns: 72px 1fr; gap: 1.25rem;
  padding: .85rem 0;
}
.row + .row { border-top: 1px solid var(--hair); }
.row__t { font-family: var(--mono); font-size: .78rem; color: var(--accent-soft); padding-top: .18rem; }
.row__a { font-size: .9375rem; color: var(--ink); font-weight: 500; margin: 0 0 .18rem; }
.row__b { font-family: var(--mono); font-size: .74rem; color: var(--muted); margin: 0; word-break: break-word; }

/* -----------------------------------------------------------------------------
   9  GRIDS AND CARDS
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,4.5rem); align-items: start; }
@media (max-width: 1040px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px)  { .g3, .g2, .g-split { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .g4 { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.125rem);
  border: 1px solid var(--hair); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 55%), var(--card);
  position: relative; overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 50% at 50% 0%, rgba(124,92,255,.14), transparent 70%);
  transition: opacity .35s var(--ease);
}
.card:hover { border-color: rgba(124,92,255,.4); transform: translateY(-4px); }
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card h3, .card h4 { margin-bottom: .65rem; }
.card p:not(.eyebrow):not(.badge) { color: var(--muted); font-size: var(--t-sm); line-height: 1.62; }
.card .btn, .card .arrow { margin-top: auto; }
.card .arrow { padding-top: 1.35rem; }
.card--lit { border-color: rgba(124,92,255,.55); background: linear-gradient(180deg, rgba(124,92,255,.09), rgba(255,255,255,0) 60%), var(--card-2); }
.card--still:hover { transform: none; }

/* card grids: align internal rows across siblings */
.grid--rows { grid-template-rows: repeat(4, auto); }

@supports (grid-template-rows: subgrid) {
  .grid--rows > .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;            /* badge, heading, body, link */
    align-content: start;
  }
  .grid--rows > .card .arrow,
  .grid--rows > .card .btn { margin-top: 0; align-self: end; }
}

.card ul { list-style: none; margin: .25rem 0 1.5rem; padding: 0; }
.card li {
  position: relative; padding-left: 1.35rem; margin-bottom: .55rem;
  font-size: var(--t-sm); color: var(--muted); line-height: 1.55;
}
.card li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 1px; background: var(--accent);
}

/* -----------------------------------------------------------------------------
   10  STAT BAND
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--hair); }
.stat { padding: clamp(1.75rem,3vw,2.5rem) clamp(1rem,2.2vw,2rem); }
.stat + .stat { border-left: 1px solid var(--hair); }
.stat .stat__num {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem,4vw,2.85rem); line-height: 1; letter-spacing: -.045em;
  margin-bottom: .6rem;
}
.stat .stat__plus { color: var(--accent-soft); }
.stat p { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; margin: 0; }
.stat small {
  display: block; margin-top: .7rem; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .06em; color: var(--muted);
}
@media (max-width: 820px) {
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--hair); }
}

/* -----------------------------------------------------------------------------
   11  NUMBERED WORKFLOW
   The numbering is real: the sequence is the operating procedure.
   -------------------------------------------------------------------------- */
.flow { counter-reset: step; display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.flow--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.flow--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.flow--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1040px) { .flow--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .flow--4, .flow--3, .flow--2 { grid-template-columns: 1fr; } }

.step {
  counter-increment: step;
  background: var(--card); padding: clamp(1.4rem, 2.4vw, 1.9rem);
  transition: background-color .3s var(--ease);
  position: relative;
}
.step:hover { background: var(--card-2); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  color: var(--accent-soft); display: block; margin-bottom: .9rem;
}
.step h3 { margin-bottom: .5rem; }
.step p { font-size: var(--t-sm); color: var(--muted); margin: 0; line-height: 1.58; }
/* Steps carrying a stage tag align it to the bottom, so the tags form a row
   across the grid regardless of how long each description runs. */
.step { display: flex; flex-direction: column; }
.step p { margin-bottom: 1rem; }
.step .tag { margin-top: auto; align-self: flex-start; }

/* -----------------------------------------------------------------------------
   12  SPEC TABLE
   -------------------------------------------------------------------------- */
.spec { border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); backdrop-filter: blur(6px); overflow: hidden; }
.spec > div { display: grid; grid-template-columns: 190px 1fr; gap: 1.5rem; padding: 1.05rem 1.4rem; }
.spec > div + div { border-top: 1px solid var(--hair); }
.spec dt, .spec .k {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.spec dd, .spec .v { font-size: var(--t-sm); color: var(--ink); margin: 0; line-height: 1.55; }
@media (max-width: 660px) { .spec > div { grid-template-columns: 1fr; gap: .4rem; } }

/* -----------------------------------------------------------------------------
   13  EVIDENCE / MAP TABLE
   -------------------------------------------------------------------------- */
.tbl { border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; background: var(--card); }
.tbl__scroll { overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; min-width: 680px; }
.tbl th {
  text-align: left; font-family: var(--mono); font-weight: 500;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 1rem 1.4rem;
  background: rgba(255,255,255,.03); border-bottom: 1px solid var(--hair); white-space: nowrap;
}
.tbl td { padding: 1.05rem 1.4rem; border-bottom: 1px solid var(--hair); font-size: var(--t-sm); color: var(--muted); vertical-align: top; line-height: 1.55; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background-color .2s var(--ease); }
.tbl tbody tr:hover { background: var(--wash); }
.tbl td:first-child { color: var(--ink); font-weight: 500; }
.tbl__note { padding: 1.15rem 1.4rem; background: rgba(255,255,255,.03); border-top: 1px solid var(--hair); font-size: var(--t-sm); color: var(--muted); margin: 0; }

/* -----------------------------------------------------------------------------
   14  CATALOG LIST
   -------------------------------------------------------------------------- */
.list { border-top: 1px solid var(--hair); }
.list > * {
  display: grid; grid-template-columns: 44px minmax(0,1fr) auto;
  gap: clamp(.75rem,2vw,1.75rem); align-items: baseline;
  padding: 1.15rem .5rem; border-bottom: 1px solid var(--hair);
  transition: background-color .2s var(--ease), padding-left .2s var(--ease);
}
.list > *:hover { background: var(--wash); padding-left: 1rem; }
.list i { font-style: normal; font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.list h3 { margin: 0; }
.list p { margin: .3rem 0 0; font-size: var(--t-sm); color: var(--muted); grid-column: 2; }
@media (max-width: 700px) {
  .list > * { grid-template-columns: 34px 1fr; row-gap: .5rem; }
  .list > * > .tag { grid-column: 2; justify-self: start; }
}

/* -----------------------------------------------------------------------------
   14b  MODULE LIST and PRICING TIERS
   Boxed rows for the Tradecraft curriculum, and the four pricing cards.
   -------------------------------------------------------------------------- */
.mods{display:flex;flex-direction:column;gap:1px;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--hair)}
.mod{display:grid;grid-template-columns:56px 250px 1fr;gap:1.4rem;align-items:start;background:var(--base);padding:1.35rem 1.6rem}
.sec--raised .mod{background:var(--raised)}
.mod__n{font-family:var(--mono);color:var(--accent-soft);font-size:.9rem}
.mod__title{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:0}
.mod__record{color:var(--muted);font-size:.82rem;margin:.25rem 0 0}
.mod__desc{color:var(--muted);font-size:.95rem;margin:0}

.tier{border:1px solid var(--hair);border-radius:var(--r);padding:1.6rem;text-align:center;background:var(--card)}
.tier--featured{border-color:var(--accent);background:var(--card-2)}
.tier__name{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.tier__price{font-family:var(--display);font-weight:700;font-size:1.9rem;margin:0;line-height:1}
.tier__price small{display:block;font-family:var(--body);font-weight:400;font-size:.8rem;color:var(--muted);margin-top:.4rem}

@media(max-width:720px){.mod{grid-template-columns:1fr;gap:.5rem}}

/* -----------------------------------------------------------------------------
   14c  EDITORIAL TITLE and HERO GLOW
   The oversized motif line, and the ambient bloom behind hero figures.
   -------------------------------------------------------------------------- */
.editorial__title {
  font-family: var(--display);
  font-size: clamp(2.25rem, 6.5vw, 4.5rem);
  font-weight: 700; letter-spacing: -.045em; line-height: .98;
  color: var(--accent); margin: 0 0 1.25rem;
}
.editorial__lead { font-size: var(--t-lead); color: var(--ink); max-width: 46ch; line-height: 1.5; }
.hero__glow {
  position: absolute; pointer-events: none; z-index: -1;
  right: -8%; top: 4%; width: 62vw; max-width: 900px; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(124,92,255,.17), rgba(124,92,255,.05) 42%, transparent 68%);
  filter: blur(12px);
}

/* -----------------------------------------------------------------------------
   15  MOTTO BAND
   -------------------------------------------------------------------------- */
.motto {
  background: var(--motto); min-height: 20vh; position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding-block: clamp(3rem,6vw,4.75rem); overflow: hidden;
}
.motto::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 140% at 50% 50%, rgba(124,92,255,.16), transparent 70%);
}
.motto p {
  position: relative; margin: 0;
  font-family: var(--display); font-variation-settings: "wdth" 104;
  font-size: clamp(1rem, 2.4vw, 1.65rem); font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--ink); line-height: 1.55;
}

/* -----------------------------------------------------------------------------
   16  FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.f { display: grid; gap: .45rem; }
.f label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.f input, .f select, .f textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--control-border);
  border-radius: var(--r-sm); padding: .85rem .95rem; width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.f textarea { min-height: 130px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus {
  border-color: var(--accent-soft); outline: 2px solid var(--accent-soft); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(124,92,255,.18);
}
.f input::placeholder, .f textarea::placeholder { color: var(--muted); }
.f select {
  appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23C0C4CE' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.f2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.15rem; }
@media (max-width: 620px) { .f2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.check input { width: 18px; height: 18px; flex: none; margin-top: .15rem; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; opacity: 0; }
.cf-turnstile { margin: .25rem 0; min-height: 65px; }

/* -----------------------------------------------------------------------------
   16b  ARTICLE BODY  ·  styling for markdown posts and legal pages
   -------------------------------------------------------------------------- */
.article { max-width: var(--prose); }
.article > *:first-child { margin-top: 0; }
.article h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin: 2.75rem 0 .85rem; padding-top: 2.25rem;
  border-top: 1px solid var(--hair);
}
.article h3 { font-size: 1.25rem; margin: 2rem 0 .7rem; color: var(--accent-soft); }
.article h4 { margin: 1.6rem 0 .5rem; }
.article p { color: var(--muted); margin-bottom: 1.25em; }
.article strong { color: var(--ink); font-weight: 600; }
.article ul, .article ol { color: var(--muted); padding-left: 0; margin: 0 0 1.5rem; list-style: none; }
.article ol { counter-reset: n; }
.article li { position: relative; padding-left: 1.5rem; margin-bottom: .6rem; line-height: 1.6; }
.article ul > li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 8px; height: 1px; background: var(--accent);
}
.article ol > li { counter-increment: n; }
.article ol > li::before {
  content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .1em;
  font-family: var(--mono); font-size: .72rem; color: var(--accent-soft);
}
.article blockquote {
  margin: 1.75rem 0; padding: .25rem 0 .25rem 1.5rem;
  border-left: 2px solid var(--accent); color: var(--ink); font-size: var(--t-lead); line-height: 1.5;
}
.article code {
  font-family: var(--mono); font-size: .85em; color: var(--accent-soft);
  background: var(--wash); border: 1px solid rgba(124,92,255,.2);
  border-radius: 4px; padding: .12em .4em;
}
.article pre {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-sm);
  padding: 1.15rem 1.35rem; overflow-x: auto; margin: 1.75rem 0;
}
.article pre code { background: none; border: 0; padding: 0; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.article hr { border: 0; border-top: 1px solid var(--hair); margin: 2.75rem 0; }
.article a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(167,139,250,.4); }
.article a:hover { text-decoration-color: var(--ink); }
.article table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: var(--t-sm); }
.article th, .article td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--hair); color: var(--muted); }
.article th { color: var(--ink); font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

/* -----------------------------------------------------------------------------
   16c  MEDIA  ·  figures, images, video
   -------------------------------------------------------------------------- */
.figure { margin: 2.25rem 0; }
.figure img, .figure video {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--card);
}
.figure figcaption {
  margin-top: .85rem; font-family: var(--mono); font-size: .75rem;
  letter-spacing: .02em; color: var(--muted); line-height: 1.5;
}
.figure--wide { margin-inline: calc(50% - 50vw); max-width: 100vw; padding-inline: var(--gut); }
.figure--wide figcaption { max-width: var(--prose); margin-inline: auto; }
.figure--video video { aspect-ratio: 16 / 9; object-fit: cover; }

.portrait { margin: 0 0 1.75rem; max-width: 280px; }
.portrait--hero { max-width: 400px; margin: 0 0 0 auto; position: relative; }
.portrait--hero::before {
  content: ""; position: absolute; inset: -12% -8% -6% -8%; z-index: -1;
  background: radial-gradient(60% 55% at 50% 40%, rgba(124,92,255,.28), transparent 70%);
  filter: blur(26px);
}
.portrait--hero figcaption { text-align: right; }
@media (max-width: 940px) {
  .portrait--hero { margin-inline: 0; max-width: 300px; }
  .portrait--hero figcaption { text-align: left; }
}
.portrait picture, .portrait img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hair); border-radius: var(--r);
}
.portrait img { filter: saturate(.94) contrast(1.03); }
.portrait figcaption {
  margin-top: .8rem; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* Etymology, set as a definition list so it holds a half-width column. */
.etym { margin: 1.75rem 0 0; }
.etym > div {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--hair);
}
.etym dt {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); letter-spacing: -.03em;
  color: var(--ink); line-height: 1.1; flex: none; min-width: 5.5ch;
}
.etym dd {
  margin: 0; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); line-height: 1.4;
}
.etym__out { border-bottom: 0 !important; padding-top: 1rem !important; }
.etym__out dt { color: var(--accent-soft); }
.etym__out dd { color: var(--accent-soft); opacity: .85; }
.etym__say {
  margin: 1.5rem 0 0; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .08em; color: var(--muted); line-height: 1.6;
}
@media (max-width: 480px) {
  .etym > div { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .etym dt { min-width: 0; }
}

/* Breaks a wide figure out of the shell and centres it on the viewport.
   --fig-max caps the width at the asset's native size so it never upscales. */
.figure--bleed {
  --fw: min(var(--fig-max, 1200px), calc(100vw - 2.5rem));
  width: var(--fw);
  max-width: none;
  /* Centres on the viewport using margin, not transform. The reveal animation
     sets transform: none on [data-in].in, which would otherwise wipe it. */
  margin-inline: calc(50% - var(--fw) / 2) 0;
  margin-block: clamp(1.75rem, 3vw, 2.75rem);
}
.figure--bleed img, .figure--bleed picture { width: 100%; height: auto; display: block; }
.figure--bleed figcaption { text-align: center; }

/* Framed player for a product demo. The bar reads as a capture window
   rather than a marketing embed. */
.player { border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; background: var(--card); }
.player__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.2rem; border-bottom: 1px solid var(--hair);
  background: rgba(255,255,255,.025);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.player video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; background: #05060B; }
.player__cap { padding: .9rem 1.2rem; border-top: 1px solid var(--hair); margin: 0; font-size: var(--t-xs); color: var(--muted); }

/* -----------------------------------------------------------------------------
   16d  ARTICLE COMPONENTS  ·  chat mockups, callouts, source views
   -------------------------------------------------------------------------- */
.chat {
  border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--card); overflow: hidden; margin: 2rem 0;
}
.chat__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--hair);
  background: rgba(255,255,255,.025);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.chat__bar::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-soft); flex: none;
}
.chat__body { padding: 1.1rem; display: grid; gap: .8rem; }
.chat__msg {
  padding: .85rem 1.05rem; border-radius: 12px;
  font-size: .9375rem; line-height: 1.6; max-width: 88%;
}
.chat__msg p { margin: 0 0 .6em; color: inherit; }
.chat__msg p:last-child { margin: 0; }
.chat__msg--user {
  background: rgba(124,92,255,.16); border: 1px solid rgba(124,92,255,.3);
  color: var(--ink); justify-self: end;
}
.chat__msg--ai {
  background: rgba(255,255,255,.04); border: 1px solid var(--hair);
  color: var(--muted); justify-self: start;
}
.chat__who {
  display: block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .45rem;
}
.chat__inject {
  background: rgba(124,92,255,.22); border-bottom: 1px solid var(--accent);
  padding: .05em .2em; border-radius: 3px; color: var(--ink);
}
.chat__note {
  padding: .8rem 1.1rem; border-top: 1px solid var(--hair);
  background: rgba(255,255,255,.025); margin: 0;
  font-family: var(--mono); font-size: .72rem; color: var(--muted); line-height: 1.5;
}

/* Raw source view, for showing what a page contains versus what it displays */
.source {
  margin: 2rem 0; border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--card); overflow: hidden;
}
.source__bar {
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--hair);
  background: rgba(255,255,255,.025);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.source pre { margin: 0; border: 0; border-radius: 0; background: transparent; }

/* Pull-out note */
.callout {
  margin: 2rem 0; padding: 1.35rem 1.5rem;
  border: 1px solid rgba(124,92,255,.32); border-left: 2px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0; background: var(--wash);
}
.callout p { margin: 0 0 .7em; color: var(--muted); font-size: var(--t-sm); }
.callout p:last-child { margin: 0; }
.callout b { color: var(--ink); }

/* Placeholder marking where artwork still needs to be supplied */
.slot {
  margin: 2rem 0; padding: 2.5rem 1.5rem; text-align: center;
  border: 1px dashed rgba(124,92,255,.4); border-radius: var(--r);
  background: rgba(124,92,255,.04);
  font-family: var(--mono); font-size: .78rem; color: var(--accent-soft); line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   17  FOOTER
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--hair); padding-block: clamp(3.5rem,5.5vw,5rem) 2rem; background: rgba(8,10,18,.7); }
.foot { display: grid; grid-template-columns: 1.7fr repeat(3,1fr); gap: clamp(2rem,4vw,3rem); }
@media (max-width: 900px) { .foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot { grid-template-columns: 1fr; } }
.foot p { font-size: var(--t-sm); color: var(--muted); max-width: 42ch; margin: 1.1rem 0 0; line-height: 1.6; }
.foot h3 {
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot ul a { font-size: .9375rem; color: var(--muted); }
.foot ul a:hover { color: var(--ink); }
.foot__note { margin: clamp(2.5rem,4vw,3.5rem) 0 0; padding-top: 1.75rem; border-top: 1px solid var(--hair); font-size: .78rem; line-height: 1.65; color: var(--muted); max-width: 92ch; }
.foot__base {
  margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .85rem 2rem;
  justify-content: space-between; font-size: var(--t-xs); color: var(--muted);
}

/* -----------------------------------------------------------------------------
   18  MOTION
   -------------------------------------------------------------------------- */
[data-in] { opacity: 0; transform: translateY(20px); }
.js [data-in] { transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-in].in { opacity: 1; transform: none; }
.js [data-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
[data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(2) { transition-delay: .07s; }
[data-stagger].in > *:nth-child(3) { transition-delay: .14s; }
[data-stagger].in > *:nth-child(4) { transition-delay: .21s; }
[data-stagger].in > *:nth-child(5) { transition-delay: .28s; }
[data-stagger].in > *:nth-child(6) { transition-delay: .35s; }
[data-stagger].in > *:nth-child(7) { transition-delay: .42s; }
[data-stagger].in > *:nth-child(8) { transition-delay: .49s; }

.js .fig__ray, .js .fig__in, .js .graph__edge {
  stroke-dasharray: var(--len,700); stroke-dashoffset: var(--len,700);
  animation: draw 1.3s var(--ease) forwards;
}
.js .fig__in { animation-delay: .2s; }
.js .fig__ray:nth-of-type(1) { animation-delay: .95s; }
.js .fig__ray:nth-of-type(2) { animation-delay: 1.07s; }
.js .fig__ray:nth-of-type(3) { animation-delay: 1.19s; }
.js .fig__ray:nth-of-type(4) { animation-delay: 1.31s; }
.js .fig__ray:nth-of-type(5) { animation-delay: 1.43s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.js .fig__label, .js .fig__node, .js .fig__cap { opacity: 0; animation: fade .7s var(--ease) forwards; }
.js .fig__cap { animation-delay: .55s; }
.js [data-r="1"] { animation-delay: 1.65s; }
.js [data-r="2"] { animation-delay: 1.77s; }
.js [data-r="3"] { animation-delay: 1.89s; }
.js [data-r="4"] { animation-delay: 2.01s; }
.js [data-r="5"] { animation-delay: 2.13s; }
@keyframes fade { to { opacity: 1; } }

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 150; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-in], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .js .fig__ray, .js .fig__in, .js .graph__edge { stroke-dashoffset: 0 !important; }
  .js .fig__label, .js .fig__node, .js .fig__cap { opacity: 1 !important; }
  .btn:hover, .card:hover { transform: none; }
  .progress { display: none; }
}

/* Hero diagrams: large geometry with HTML labels that remain readable on phones. */
.hero--home, .hero--prismvector { padding-block: clamp(3rem, 5vw, 5rem); }
.hero--home .shell, .hero--prismvector .shell { grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: clamp(2rem,4vw,3.5rem); }
.hero--home h1 { font-size: clamp(2.6rem,4.8vw,4.1rem); max-width: 13ch; }
.hero--prismvector h1 { font-size: clamp(2.6rem,4.3vw,3.75rem); max-width: 16ch; }
.adversary {
  margin: 0; min-width: 0; padding: clamp(1.25rem,2.3vw,2rem);
  border: 1px solid #493A64; border-radius: 24px;
  background: radial-gradient(ellipse at 45% 35%, rgba(124,92,255,.13), transparent 65%), #1A1426;
  box-shadow: 0 24px 70px -40px rgba(0,0,0,.6);
}
.adversary h2 { font-size: clamp(1.5rem,2.2vw,1.9rem); max-width: 26ch; line-height: 1.15; }
.adversary .eyebrow { font-size: .75rem; margin-bottom: .85rem; letter-spacing: .1em; }
.adversary__diagram { margin-block: .5rem; }
.adversary__orbit { fill: none; stroke: #433455; stroke-width: 1; }
.adversary__prism { fill: url(#prism-fill); stroke: #B59AF9; stroke-width: 2.5; stroke-linejoin: round; }
.adversary__facet { fill: none; stroke: #A78BFA; stroke-opacity: .5; stroke-width: 1; }
.adversary .fig__ray { stroke-width: 2; }
.adversary__numbers { fill: #DDD3FF; font-family: var(--mono); font-size: 17px; }
.adversary__key { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; counter-reset: exposure; }
.adversary__key li { counter-increment: exposure; display: grid; grid-template-columns: 1.8rem 1fr; column-gap: .5rem; padding-top: .65rem; border-top: 1px solid #3B304D; }
.adversary__key li::before { content: counter(exposure, decimal-leading-zero); grid-row: span 2; color: #BEA7FA; font-family: var(--mono); font-size: .8rem; padding-top: .1rem; }
.adversary__key strong { font-size: .875rem; font-weight: 600; line-height: 1.45; }
.adversary__key span { font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.attack-path__branches path { fill: none; stroke: #59486E; stroke-width: 1.5; }
.attack-path__branches circle { fill: #79668E; }
.attack-path .attack-path__route { stroke: #BEA7FA; stroke-width: 3; }
.attack-path__halo { fill: rgba(167,139,250,.08); stroke: #79639F; stroke-width: 1; }
.attack-path__nodes circle { fill: #2C2040; stroke: #BEA7FA; stroke-width: 2; }
.attack-path__nodes .attack-path__destination { fill: #6842C2; stroke: #DDD3FF; }
.attack-path__numbers { fill: #F5F2FA; font-family: var(--mono); font-size: 17px; text-anchor: middle; dominant-baseline: central; }
@media (max-width: 940px) {
  .hero--home .shell, .hero--prismvector .shell { grid-template-columns: 1fr; }
  .hero--home h1 { max-width: 18ch; }
  .adversary { width: 100%; max-width: 620px; margin-inline: auto; }
}
.sec--light .article { margin-inline: auto; }
.article { overflow-wrap: anywhere; }
.article table { display: block; overflow-x: auto; }
/* Existing technical SVGs retain a dark canvas; captions use the surrounding theme. */
.article .figure > svg { background: #171321; border-radius: var(--r); padding: .75rem; }
.sec--raised .card--lit { border-color: #B29BDA; background: var(--card-2); }
.sec--raised .card, .sec--light .card { box-shadow: 0 6px 24px -16px rgba(36,28,50,.18); }
.sec--raised .f select, .sec--light .f select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235F566D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.center > .shell > .eyebrow { justify-content: center; }
.grid > *, .g-split > * { min-width: 0; }

/* -----------------------------------------------------------------------------
   19  PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .progress, .btn, .form { display: none !important; }
  body::before, body::after { display: none; }
  body { background: #fff; color: #000; }
  .sec, .hero, .motto { padding-block: 1rem; }
  .motto::before { display: none; }
  h1,h2,h3,h4,.motto p { color: #000 !important; }
  p, td, li, dd { color: #222 !important; }
  .card, .spec, .tbl, .readout { border-color: #ccc; background: #fff; }
}

/* Security advisory */
.hero--advisory h1 { font-size: clamp(2.6rem, 4.6vw, 4.5rem); max-width: 14ch; }
.advisory-overview h2 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
.advisory-overview__steps { list-style: none; padding: 0; margin: 1rem 0 0; counter-reset: advisory-step; }
.advisory-overview__steps li { position: relative; padding: 1.25rem 0 1.25rem 2.75rem; border-top: 1px solid var(--hair-2); counter-increment: advisory-step; }
.advisory-overview__steps li::before { content: "0" counter(advisory-step); width: auto; height: auto; background: none; position: absolute; left: 0; top: 1.3rem; color: var(--accent-soft); font-family: var(--mono); font-size: .85rem; }
.advisory-overview__steps strong, .advisory-overview__steps span { display: block; }
.advisory-overview__steps span { margin-top: .4rem; color: var(--muted); font-size: .9375rem; }

/* Service previews */
.hero--service h1 { font-size: clamp(2.6rem, 4.3vw, 4.2rem); max-width: 15ch; }
.service-preview { min-width: 0; border: 1px solid rgba(124,92,255,.55); border-radius: var(--r); overflow: hidden; background: linear-gradient(145deg, rgba(124,92,255,.1), transparent 65%), var(--card); box-shadow: 0 24px 70px -40px rgba(0,0,0,.65); }
.service-preview__top, .service-preview__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem 1rem; padding: 1rem 1.5rem; font-size: .75rem; color: var(--muted); }
.service-preview__top { border-bottom: 1px solid var(--hair-2); }
.service-preview__top > :first-child { font-weight: 600; color: var(--ink); }
.service-preview__label { color: var(--accent-soft); }
.service-preview__body { padding: clamp(1.25rem, 2.5vw, 2rem); }
.service-preview__body h2 { font-size: clamp(1.65rem, 2.4vw, 2.2rem); line-height: 1.15; margin-bottom: 1.5rem; }
.service-preview__body .eyebrow { font-size: .65rem; }
.lesson-message { padding: 1.2rem; background: var(--card-2); border: 1px solid var(--hair-2); border-radius: 10px; }
.lesson-message__heading { display: flex; align-items: center; gap: .6rem; font-size: .75rem; color: var(--muted); }
.lesson-message__icon { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 5px; background: var(--wash); color: var(--accent-soft); font-size: 1rem; }
.lesson-message blockquote { margin: .9rem 0 1rem; padding: 0; border: 0; color: var(--ink); font-size: .9375rem; line-height: 1.6; font-style: normal; }
.lesson-message__signals { display: flex; flex-wrap: wrap; gap: .5rem; }
.lesson-message__signals span { padding: .25rem .55rem; border: 1px solid rgba(167,139,250,.35); border-radius: 5px; font-size: .6875rem; color: var(--accent-soft); }
.service-preview__steps { list-style: none; counter-reset: preview-step; margin: 1.5rem 0 0; padding: 0; }
.service-preview__steps li { counter-increment: preview-step; display: grid; grid-template-columns: 1.5rem 1fr; column-gap: .65rem; margin-top: 1rem; }
.service-preview__steps li::before { content: counter(preview-step, decimal-leading-zero); grid-row: span 2; padding-top: .15rem; font-family: var(--mono); font-size: .6875rem; color: var(--accent-soft); }
.service-preview__steps strong { font-size: .875rem; color: var(--ink); }
.service-preview__steps li > span { grid-column: 2; margin-top: .2rem; font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.service-preview__bottom { border-top: 1px solid var(--hair-2); background: rgba(124,92,255,.045); }
.briefing-scenario { border-block: 1px solid var(--hair-2); padding: 1.3rem 0; }
.briefing-scenario__mark { display: flex; align-items: center; gap: 5px; height: 40px; margin-bottom: 1rem; }
.briefing-scenario__mark i { display: block; width: 4px; height: 12px; border-radius: 3px; background: var(--accent-soft); }
.briefing-scenario__mark i:nth-child(2n) { height: 25px; }
.briefing-scenario__mark i:nth-child(3n) { height: 38px; }
.briefing-scenario__caption { font-size: .8125rem; color: var(--muted); margin: 0 0 .6rem; }
.briefing-scenario__question { font-size: 1.15rem; line-height: 1.45; color: var(--ink); margin: 0; max-width: 30ch; }
@media (max-width: 940px) { .hero--service h1 { max-width: 20ch; } .service-preview { width: 100%; max-width: 640px; } }
@media (max-width: 400px) { .service-preview__top, .service-preview__bottom { padding-inline: 1.25rem; } }

/* PrismVector's assessment cycle uses the shared list layout. */
.prism-workflow { list-style: none; margin: 0; padding: 0; }

/* Shared pricing cards and category navigation. */
.pricing-jump { display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; padding-block:1.5rem; }
.pricing-jump a { text-decoration:underline; text-underline-offset:.25em; font-weight:600; }
.card.pricing-card p.pricing-card__price { color:var(--ink); font-family:var(--display); font-size:clamp(2rem,4vw,2.8rem); font-weight:700; line-height:1.15; margin-block:.5rem 1.25rem; }
.pricing-card__price span { display:block; margin-top:.5rem; color:var(--muted); font:400 1rem/1.5 var(--body); }
.pricing-card ul, .pricing-overview ul { padding-left:1.25rem; }
.pricing-card li, .pricing-overview li { margin-bottom:.75rem; }
.pricing-card .btn { margin-top:auto; align-self:flex-start; }
.pricing-card button:disabled { cursor:not-allowed; border-style:dashed; transform:none; background:transparent; color:var(--muted); box-shadow:none; }
.pricing-note { margin-top:1.75rem; max-width:80ch; }

.store-email { white-space:pre-wrap; overflow-wrap:anywhere; padding:1.25rem; background:var(--card); border:1px solid var(--hair); border-radius:var(--r); font-size:.9rem; }
[hidden] { display:none !important; }