/* ---------- 0. SELF HOSTED FONTS -------------------------------- *
   No Google Fonts request is made anywhere on this site. These are the
   latin subsets, served from our own origin, so a visitor's browsing is
   not disclosed to a third party in order to render type.

   All three families are licensed under the SIL Open Font License 1.1,
   which permits redistribution and web embedding:
     Inter             (c) The Inter Project Authors
     Instrument Serif  (c) The Instrument Serif Project Authors
     Space Mono        (c) The Space Mono Project Authors

   Inter ships as a variable font, so one 48KB file covers 400 to 700.
   font-display: swap keeps text readable while the file loads.           */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/space-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/space-mono-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================================================================
   HAIVIAN — VISUAL SYSTEM
   ==================================================================
   Built from the existing Haivian Council site: near black ground,
   molten orange signature, ember glow burning in from a corner,
   glowing gradient CTAs.

   Cohesion rule: every product shares the ground, the type, the
   spacing and the glow treatment. Only --accent changes. So the
   family reads as one machine with differently coloured parts, not
   six unrelated brands.

   Cinematic without overdone: depth comes from layered light, not
   from decoration. One dominant glow per view. Nothing pulses for
   its own sake.
   ================================================================== */

/* ---------- 1. TOKENS ------------------------------------------- */

:root {
  --ink:       #07090c;
  --ink-2:     #0a0c10;
  --panel:     #101318;
  --panel-2:   #14181e;
  --panel-3:   #1a1f26;
  --line:      #23272d;
  --line-2:    #2d3136;
  --line-3:    #3b414a;

  --text:      #f4f4f2;
  --text-2:    #b8bdc5;
  --text-3:    #969ca4;
  --text-4:    #6b7178;

  /* The house signature. */
  --flame:     #ff6a00;
  --hot:       #ff9d21;
  --ember:     #351206;

  /* Per-product accent. Overridden on <body data-product>. */
  --accent:      #ff6a00;
  --accent-hi:   #ff9d21;
  --accent-deep: #c74400;

  --green:  #36d399;
  --gold:   #ffc247;
  --violet: #9d7bff;
  --blue:   #4aa8ff;
  --cyan:   #35e0e0;
  --red:    #ff5f4d;

  --radius:    6px;
  --radius-lg: 12px;

  --display: "Instrument Serif", Georgia, serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, Consolas, monospace;

  --measure: 62ch;
  --gutter: clamp(20px, 5vw, 60px);
  --page: 1280px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* Each product page tints the whole system by swapping three values. */
body[data-product="factory"]  { --accent:#ff6a00; --accent-hi:#ff9d21; --accent-deep:#c74400; }
body[data-product="council"]  { --accent:#ffc247; --accent-hi:#ffd97a; --accent-deep:#b8801a; }
body[data-product="steward"]  { --accent:#36d399; --accent-hi:#6ee7b7; --accent-deep:#1f8f68; }
body[data-product="qonduit"]  { --accent:#9d7bff; --accent-hi:#c4aeff; --accent-deep:#6b45d6; }
body[data-product="shield"]   { --accent:#4aa8ff; --accent-hi:#8ccbff; --accent-deep:#1f6fc4; }
body[data-product="explorer"] { --accent:#35e0e0; --accent-hi:#7ff0f0; --accent-deep:#159a9a; }

/* ---------- 2. RESET AND GROUND --------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0; min-width: 320px;
  font-family: var(--sans);
  font-size: 17px; line-height: 1.6;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The atmosphere. Two accent-tinted pools of light bleeding in from
   the corners over a cool gradient. This is what stops the page
   reading as a flat slab. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120vw 80vh at 78% -12%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 58%),
    radial-gradient(90vw 70vh at -10% 8%, color-mix(in srgb, var(--accent-deep) 12%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #0b0d11 0%, var(--ink) 42%);
}
/* A very fine grain, so large dark areas have tooth instead of banding. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }

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

.sr-only { 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:fixed; z-index:200; left:12px; top:-70px; padding:14px 18px; background:var(--accent); color:#120800; font-weight:700; transition:top .18s var(--ease); }
.skip:focus { top:12px; }

/* ---------- 3. LAYOUT ------------------------------------------- */

.wrap { width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter); }
section[id] { scroll-margin-top:92px; }
.wrap-narrow { max-width: 860px; }
section { position: relative; }
.band { padding-block: clamp(72px, 10vw, 140px); }
.band-tight { padding-block: clamp(48px, 6vw, 84px); }
.rule { height:1px; border:0; margin:0; background:linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent); }

.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

/* ---------- 4. TYPE --------------------------------------------- */

.display    { font-family:var(--display); line-height:1.0;  letter-spacing:-.025em; font-size:clamp(46px, 8vw, 108px); }
.display-sm { font-family:var(--display); line-height:1.06; letter-spacing:-.02em;  font-size:clamp(33px, 5vw, 62px); }
.h3 { font-size:clamp(20px,2vw,25px); line-height:1.25; font-weight:600; letter-spacing:-.01em; }

.lede { font-size:clamp(18px,1.8vw,21px); line-height:1.55; color:var(--text-2); max-width:var(--measure); }
.body { max-width:var(--measure); color:var(--text-2); }
.small { font-size:14.5px; line-height:1.6; color:var(--text-3); }
.dim { color: var(--text-3); }
.mono { font-family: var(--mono); }
.accent { color: var(--accent-hi); }

.eyebrow {
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--text-3);
  display:flex; align-items:center; gap:11px; margin-bottom:20px;
}
.eyebrow::before { content:""; width:22px; height:1px; background:var(--accent); flex:none; box-shadow:0 0 8px var(--accent); }
.eyebrow-num { color: var(--accent-hi); }

/* ---------- 5. BUTTONS ------------------------------------------ */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px;
  border:1px solid transparent; border-radius:var(--radius);
  font-weight:700; font-size:15.5px; cursor:pointer; white-space:nowrap;
  transition:filter .2s var(--ease), transform .2s var(--ease), border-color .2s, background .2s;
}
.btn-primary {
  color:#fff;
  border-color: color-mix(in srgb, var(--accent-hi) 70%, transparent);
  background: linear-gradient(100deg, var(--accent-deep), var(--accent));
  box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 22%, transparent),
              inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
.btn-primary:hover { filter:brightness(1.12); transform:translateY(-1px); }
.btn-ghost { border-color:var(--line-3); color:var(--text); background:transparent; }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent-hi); background:color-mix(in srgb, var(--accent) 8%, transparent); }
.btn-sm { min-height:42px; padding:0 17px; font-size:14px; }
.btn-block { width:100%; }
.btn[aria-disabled="true"] { opacity:.45; pointer-events:none; }

/* ---------- 6. HEADER ------------------------------------------- *
   The top left carries the product identity: name plus tagline. It
   changes per page, so a visitor always knows which machine they
   are looking at.                                                   */

.hdr {
  position:sticky; top:0; z-index:100;
  background:rgba(7,9,12,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.hdr.scrolled { background:rgba(7,9,12,.94); border-bottom-color:var(--line); }
.hdr-in { display:flex; align-items:center; gap:24px; min-height:78px; }

.brand { display:flex; align-items:center; gap:12px; flex:none; }
.brand-mark {
  width:40px; height:40px; flex:none; border-radius:9px;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, #0e1116), #0b0e12);
  box-shadow:0 0 20px color-mix(in srgb, var(--accent) 18%, transparent);
  display:grid; place-items:center;
}
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-name { font-size:18px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.brand-name b { color:var(--accent-hi); font-weight:700; }
.brand-tag { font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--text-4); white-space:nowrap; text-transform:uppercase; }
/* The per-product taglines are nowrap and the brand is flex:none, so the two
   longest ("Your host will crash. Your project will not." and "Protect the
   work and IP. Preserve the proof.") pushed the menu button off a 390px
   screen. Below that size the tagline is 9.5px of decoration, so it goes. */
@media (max-width: 430px) { .hdr .brand-tag { display:none; } }

.nav { display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav a { font-size:14.5px; color:var(--text-2); padding:9px 13px; border-radius:var(--radius); transition:color .16s, background .16s; white-space:nowrap; }
.nav a:hover { color:var(--text); background:var(--panel-2); }
.nav a[aria-current="page"] { color:var(--accent-hi); }
.nav-toggle { display:none; }

@media (max-width: 1040px) {
  .nav-toggle {
    display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
    width:46px; height:46px; background:none; border:1px solid var(--line-2);
    border-radius:var(--radius); color:var(--text); cursor:pointer;
  }
  .nav {
    position:fixed; inset:78px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; margin:0; padding:12px var(--gutter) 24px;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    max-height:calc(100vh - 78px); overflow-y:auto;
  }
  .hdr.open .nav { opacity:1; visibility:visible; transform:none; }
  .nav a { padding:15px 4px; border-bottom:1px solid var(--line); }
  .nav .btn { margin-top:16px; }
}

/* ---------- 7. HERO --------------------------------------------- */

.hero { padding-block: clamp(64px,10vh,120px) clamp(52px,8vh,100px); overflow:hidden; }
.hero h1 { max-width: 16ch; }
.hero .lede { margin-top:26px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

/* A thin bright filament under the hero, like heat in a seam. */
.seam { height:1px; border:0; margin:0; background:linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-hi) 50%, var(--accent) 70%, transparent); opacity:.55; box-shadow:0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------- 8. CARDS -------------------------------------------- */

.card {
  background:linear-gradient(180deg, var(--panel), var(--ink-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; position:relative;
  transition:border-color .22s var(--ease), transform .22s var(--ease);
}
.card:hover { border-color:var(--line-3); }
.card-stack { display:flex; flex-direction:column; }
.card-stack > :last-child { margin-top:auto; padding-top:20px; }

/* ---------- 9. TIER CARDS --------------------------------------- *
   The layout Richard identified as the model: a verification level,
   name, price, one line summary, highlights, an "everything in X"
   detail list, and its own worded call to action.                   */

.tiers { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); align-items:stretch; }

.tier {
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--panel), var(--ink-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px; position:relative; overflow:hidden;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tier:hover { transform:translateY(-3px); border-color:var(--line-3); }

.tier-featured {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    linear-gradient(180deg, var(--panel-2), var(--ink-2));
  box-shadow: 0 0 44px color-mix(in srgb, var(--accent) 13%, transparent);
}
.tier-featured::before {
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent-hi), transparent);
}

/* A badge sits in the top right corner, so a card that has one needs
   headroom or the badge collides with the verification chip. */
.tier:has(.tier-badge) { padding-top:44px; }
.tier-badge {
  position:absolute; top:0; right:0;
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.13em;
  padding:6px 12px; border-radius:0 var(--radius-lg) 0 var(--radius-lg);
  background:var(--accent); color:#120800;
}

/* The verification level chip. Tone is a product decision, not decoration. */
.check {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em;
  padding:5px 11px; border-radius:100px; border:1px solid; margin-bottom:16px; align-self:flex-start;
}
.check::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.check-silver { color:#b8bdc5; border-color:#3d434b; background:#ffffff08; }
.check-green  { color:var(--green); border-color:#1f6b50; background:#36d3990f; }
.check-orange { color:var(--hot);   border-color:#8a4a10; background:#ff9d210f; }
.check-gold   { color:var(--gold);  border-color:#8a6a1a; background:#ffc2470f; }

.tier-name { font-size:24px; font-weight:700; letter-spacing:-.015em; }
.tier-summary { font-size:14.5px; color:var(--text-3); line-height:1.55; margin-top:8px; min-height:3.1em; }

.tier-price { margin-top:20px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tier-price b { font-family:var(--display); font-size:46px; line-height:1; letter-spacing:-.02em; font-weight:400; }
.tier-price span { font-size:14px; color:var(--text-3); }
.currency-note { display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.025);color:var(--text-2);font-family:var(--mono);font-size:11px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase; }
.currency-note::before { content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 72%,transparent);flex:0 0 auto; }
.tier-alt { font-size:13px; color:var(--text-4); margin-top:6px; font-family:var(--mono); }

.tier ul { margin-top:20px; display:grid; gap:9px; }
.tier li { display:flex; gap:10px; font-size:14.5px; line-height:1.45; color:var(--text-2); }
.tier li::before { content:""; flex:none; width:15px; height:15px; margin-top:3px; border-radius:50%; background:color-mix(in srgb, var(--accent) 18%, transparent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8.2 9 4' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:11px; background-position:center; background-repeat:no-repeat; }
.tier-details { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.tier-details li { font-size:13.5px; color:var(--text-3); }
.tier-details li::before { background:none; border-color:var(--line-3); background-image:none; }

.tier-cta { margin-top:auto; padding-top:22px; }

/* ---------- 10. THE FACTORY MACHINE ----------------------------- *
   The centrepiece. A core with four module bays. Each bay is a real
   link into that product, and clicking opens a panel explaining it.  */

.machine { position:relative; margin-top:44px; }
.machine svg { width:100%; height:auto; display:block; overflow:visible; }

.bay { cursor:pointer; }
.bay .bay-plate { transition:fill .25s var(--ease), stroke .25s var(--ease); }
.bay .bay-glow { opacity:0; transition:opacity .3s var(--ease); }
.bay:hover .bay-glow, .bay:focus-visible .bay-glow, .bay.active .bay-glow { opacity:1; }
.bay:focus-visible { outline:none; }
.bay:focus-visible .bay-plate { stroke-width:2.4; }

.conduit { stroke-dasharray:5 7; animation:flow 2.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset:-24; } }
@media (prefers-reduced-motion: reduce) { .conduit { animation:none; } }

.machine-panel {
  margin-top:26px; border:1px solid var(--line-2); border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--panel),var(--ink-2)); padding:26px;
  display:none;
}
.machine-panel.open { display:block; }
.machine-panel h3 { font-size:26px; font-weight:700; }
.machine-hint { text-align:center; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-4); margin-top:18px; }

/* ---------- 11. MATURITY METER ---------------------------------- */

.maturity {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-2); background:#ffffff06; border:1px solid var(--line-2);
  border-radius:100px; padding:5px 12px 5px 9px; white-space:nowrap; cursor:help;
}
.meter { display:inline-flex; gap:2px; align-items:flex-end; flex:none; }
.meter i { display:block; width:3px; background:var(--line-3); border-radius:1px; }
.meter i:nth-child(1){height:4px}.meter i:nth-child(2){height:6px}.meter i:nth-child(3){height:8px}
.meter i:nth-child(4){height:10px}.meter i:nth-child(5){height:12px}.meter i:nth-child(6){height:14px}
.meter i.on { background:var(--tone,var(--accent)); box-shadow:0 0 5px var(--tone,var(--accent)); }
.maturity[data-tone="verified"]{--tone:var(--gold);color:var(--gold);border-color:#7a5c1a}
.maturity[data-tone="live"]    {--tone:var(--cyan);color:var(--cyan);border-color:#177}
.maturity[data-tone="internal"]{--tone:#8fa6c9;color:#a9bcd8}
.maturity[data-tone="guided"]  {--tone:var(--violet);color:#c4aeff}
.maturity[data-tone="planned"] {--tone:var(--text-4);color:var(--text-3)}

/* ---------- 12. TAGS -------------------------------------------- */

.tag { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; padding:5px 10px; border-radius:100px; border:1px solid var(--line-2); color:var(--text-3); }
.tag-accent { border-color:color-mix(in srgb,var(--accent) 45%,transparent); color:var(--accent-hi); background:color-mix(in srgb,var(--accent) 9%,transparent); }

/* ---------- 13. PRODUCT NAV CARDS ------------------------------- */

.prod {
  display:flex; flex-direction:column; padding:26px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:border-color .22s var(--ease), transform .22s var(--ease);
  --accent:var(--p-accent,#ff6a00); --accent-hi:var(--p-accent-hi,#ff9d21);
}
.prod::after { content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg,var(--accent),transparent); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.prod:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.prod:hover::after { transform:scaleX(1); }
.prod-name { font-size:26px; font-weight:700; letter-spacing:-.015em; margin-top:14px; }
.prod-tag { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-hi); margin-top:6px; }
.prod-body { color:var(--text-3); font-size:14.5px; margin-top:12px; line-height:1.55; }
.prod-foot { margin-top:auto; padding-top:20px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.prod-price { font-family:var(--mono); font-size:13px; color:var(--text-2); }

/* ---------- 14. PAPER (evidence surfaces) ----------------------- */

.paper { background:#f2ede3; color:#1a1c20; border-radius:var(--radius-lg); padding:clamp(26px,4vw,42px); }
.paper h2,.paper h3 { color:#101216; }
.paper p { color:#3d4148; }
.paper .eyebrow { color:#6a6255; }
.paper .eyebrow::before { background:var(--accent-deep); box-shadow:none; }
.paper .small,.paper .dim { color:#5c6169; }
.paper a { color:#8a4a10; text-decoration:underline; }
.paper .maths-row { border-bottom-color:#d5cec0; }
.paper .maths-row span { color:#5c6169; }
.paper .maths-row b { color:#1a1c20; }
.paper .maths-total { border-bottom:0; }
.paper .maths-total span,.paper .maths-total b { color:#101216; font-weight:700; }
.paper .maths-saving span,.paper .maths-saving b { color:#0f6b5c; }

.maths { display:grid; gap:2px; font-family:var(--mono); font-size:14px; }
.maths-row { display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px solid var(--line); }
.maths-row span { color:var(--text-2); }
.maths-total { padding-top:15px; font-size:16px; }
.maths-saving { border-bottom:0; padding-top:4px; }

/* ---------- 15. CHECKOUT ---------------------------------------- */

.co { display:grid; gap:26px; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); align-items:start; }
@media (max-width:900px){ .co { grid-template-columns:1fr; } }

.co-step { display:flex; gap:18px; padding:24px 0; border-bottom:1px solid var(--line); }
.co-step:last-child { border-bottom:0; }
.co-num {
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:13px; font-weight:700;
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  color:var(--accent-hi); background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.co-step h2 { font-size:19px; font-weight:700; }
.co-body { flex:1; min-width:0; }

.field { display:block; margin-top:14px; }
.field span { display:block; font-size:13px; color:var(--text-3); margin-bottom:6px; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.field input {
  width:100%; min-height:50px; padding:0 14px;
  background:#0c0f13; border:1px solid var(--line-2); border-radius:var(--radius); color:var(--text);
  transition:border-color .18s;
}
.field input:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }

.choice { display:flex; gap:12px; align-items:flex-start; padding:15px; border:1px solid var(--line-2); border-radius:var(--radius); margin-top:10px; cursor:pointer; transition:border-color .18s, background .18s; }
.choice:hover { border-color:var(--line-3); }
.choice input { margin-top:3px; accent-color:var(--accent); width:18px; height:18px; flex:none; }
.choice.sel { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); }
.choice b { display:block; font-size:15px; }
.choice small { color:var(--text-3); font-size:13.5px; }

.co-summary { position:sticky; top:96px; padding:26px; border:1px solid var(--line-2); border-radius:var(--radius-lg); background:linear-gradient(180deg,var(--panel-2),var(--ink-2)); }
.co-total { display:flex; align-items:baseline; justify-content:space-between; margin-top:18px; padding-top:18px; border-top:1px solid var(--line-2); }
.co-total b { font-family:var(--display); font-size:38px; line-height:1; font-weight:400; }
.co-note { font-size:12.5px; color:var(--text-4); margin-top:14px; line-height:1.5; }

.toggle { display:inline-flex; padding:4px; border:1px solid var(--line-2); border-radius:100px; background:#0c0f13; gap:2px; }
.toggle button { border:0; background:none; padding:9px 18px; border-radius:100px; font-size:14px; color:var(--text-3); cursor:pointer; transition:background .2s, color .2s; }
.toggle button.on { background:var(--accent); color:#120800; font-weight:700; }

/* ---------- 16. FOOTER ------------------------------------------ */

.ftr { border-top:1px solid var(--line); padding-block:48px 26px; margin-top:40px; background:linear-gradient(180deg, transparent, #06070a); }
.ftr-grid { display:grid; gap:30px 36px;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) repeat(2, minmax(0,1fr)); }
/* Products carries eight entries against four elsewhere, so it runs in two
   columns rather than setting the height of the whole footer. */
.ftr-products li { break-inside:avoid; }
/* Two sub-columns only where the track is wide enough for "Discovery
   Interface" to sit on one line, which is why this is a min-width query. */
@media (min-width: 1100px) { .ftr-products ul { columns:2; column-gap:22px; } }
@media (max-width: 1100px) {
  .ftr-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .ftr-grid > :first-child { grid-column:1 / -1; }
}
@media (max-width: 640px) {
  .ftr { padding-block:36px 20px; }
  .ftr-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 20px; }
  .ftr-legal { margin-top:24px; }
}
.ftr h4 { font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--text-4); margin-bottom:14px; }
.ftr li { margin-bottom:7px; }
.ftr a { color:var(--text-2); font-size:14.5px; }
.ftr a:hover { color:var(--accent-hi); }
.ftr-legal { margin-top:30px; padding-top:20px; border-top:1px solid var(--line); color:var(--text-4); font-size:13px; display:flex; flex-wrap:wrap; gap:8px 22px; }

/* ---------- 17. REVEAL ------------------------------------------ */

[data-reveal] { opacity:0; transform:translateY(16px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1;transform:none} }
.no-js [data-reveal] { opacity:1; transform:none; }

/* ---------- 18. TOUCH ------------------------------------------- */

@media (pointer: coarse) {
  .btn-sm { min-height:44px; }
  .ftr li { margin-bottom:0; }
  .ftr a { display:inline-block; padding-block:10px; }
  .ftr .brand { white-space:nowrap; }
  .nav a { min-height:44px; display:flex; align-items:center; }
}

/* ---------- 19. LIFECYCLE SPINE --------------------------------- *
   Kept from the first build because it explains the product, but
   rebuilt in the forge palette: the progress line runs hot, and a
   station lights with accent glow as you reach it.                  */

.spine { position:relative; padding-left:52px; margin-top:44px; }
.spine::before { content:""; position:absolute; left:17px; top:10px; bottom:10px; width:1px; background:var(--line-2); }
.spine-progress { position:absolute; left:17px; top:10px; width:1px; height:0; background:linear-gradient(180deg,var(--accent-hi),var(--accent)); box-shadow:0 0 12px var(--accent); transition:height .1s linear; }
.station { position:relative; padding-block:24px; }
.station::before {
  content:""; position:absolute; left:-41px; top:32px; width:11px; height:11px; border-radius:50%;
  background:var(--ink); border:1px solid var(--line-3);
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.station.lit::before { background:var(--accent); border-color:var(--accent-hi); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 14%,transparent), 0 0 16px var(--accent); }
.station-n { font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.13em; color:var(--text-4); }
.station.lit .station-n { color:var(--accent-hi); }
.station h3 { font-size:21px; font-weight:600; margin-top:6px; }
.station p { color:var(--text-2); font-size:15px; margin-top:8px; max-width:56ch; }

.dispositions { display:grid; gap:10px; margin-top:16px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.disp { border:1px solid var(--line); border-left-width:2px; border-radius:var(--radius); padding:13px 15px; background:var(--panel); }
.disp b { display:block; font-size:14px; font-weight:700; }
.disp span { font-size:13.5px; color:var(--text-3); }
.disp-accept { border-left-color:var(--green); } .disp-accept b { color:var(--green); }
.disp-return { border-left-color:var(--hot); }   .disp-return b { color:var(--hot); }
.disp-reject { border-left-color:var(--red); }   .disp-reject b { color:var(--red); }

/* ---------- 20. HERO ARTWORK ------------------------------------ *
   The generated Factory plate sits behind the hero. It is beautiful
   and it is also busy, so it carries a two axis scrim: dark on the
   left where the headline lives, opening up on the right where the
   molten core is. The text never sits on the bright part.           */

.hero-visual { position:relative; isolation:isolate; }
.hero-visual > .wrap { position:relative; z-index:2; }

.hero-art {
  position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:none;
}
.hero-art img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:70% 50%;
  opacity:.78;
}
.hero-art::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--ink) 4%, rgba(7,9,12,.94) 34%, rgba(7,9,12,.42) 68%, rgba(7,9,12,.62) 100%),
    linear-gradient(180deg, rgba(7,9,12,.72) 0%, transparent 26%, transparent 62%, var(--ink) 100%);
}

/* Below the text column the plate would only compete with the copy,
   so on narrow screens it becomes a quiet wash instead. */
@media (max-width: 900px) {
  .hero-art img { opacity:.34; object-position:60% 50%; }
  .hero-art::after { background:linear-gradient(180deg, rgba(7,9,12,.7) 0%, rgba(7,9,12,.82) 45%, var(--ink) 100%); }
}

/* ---------- 21. EVIDENCE EXHIBITS ------------------------------- */

.exhibit .ex-head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.ex-body { margin:16px 0 0; display:grid; gap:0; }
.ex-row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:11px 0; border-top:1px solid var(--line); }
.ex-row dt { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-4); margin:0; }
.ex-row dd { margin:0; font-size:14.5px; color:var(--text-2); line-height:1.55; }
@media (max-width:620px){ .ex-row { grid-template-columns:1fr; gap:4px; } }

/* ---------- 22. JOURNEY STEPS ----------------------------------- */

.journey { margin-top:38px; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.jstep {
  display:flex; gap:16px; padding:22px;
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
}
.jstep-n {
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; font-weight:700;
  color:var(--accent-hi); background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
}
.jstep h3 { font-size:17px; font-weight:600; }
.jstep p { margin-top:7px; font-size:14.5px; color:var(--text-3); line-height:1.55; }

/* ---------- 23. FORMS ------------------------------------------- */

.field-row { display:grid; gap:0 16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.field textarea, .field select {
  width:100%; padding:13px 14px; background:#0c0f13;
  border:1px solid var(--line-2); border-radius:var(--radius); color:var(--text);
  font-family:inherit; font-size:16px; transition:border-color .18s;
}
.field textarea { resize:vertical; min-height:96px; line-height:1.55; }
.field select { min-height:50px; padding-block:0; }
.field textarea:focus, .field select:focus {
  border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);
}

/* A button label should never be long enough to push the page sideways.
   This is a backstop: at narrow widths a long label wraps rather than
   forcing horizontal scroll on the whole document. */
@media (max-width: 820px) {
  .btn { white-space: normal; text-align: center; height: auto; padding-block: 13px; }
}

/* ---------- 24. WATCHDOG HEALING LOOP ---------------------------- *
   The loop is drawn as a circle because the claim is that it never
   ends. Dashes travel clockwise so the ring reads as running rather
   than as a diagram of a ring.                                       */

body[data-product="watchdog"] { --accent:#f2604e; --accent-hi:#ff8a76; --accent-deep:#b83a2b; }

.wd-loop { margin-top: clamp(30px, 5vh, 56px); }
.wd-loop svg { width: 100%; height: auto; display: block; overflow: visible; }

.wd-track {
  stroke-dashoffset: 0;
  animation: wd-run 3.4s linear infinite;
}
@keyframes wd-run { to { stroke-dashoffset: -44; } }

.wd-in path { animation: wd-run 2.6s linear infinite; }

.wd-node circle { transition: stroke-opacity .25s var(--ease), filter .25s var(--ease); }
.wd-node:hover circle { stroke-opacity: 1; filter: drop-shadow(0 0 10px var(--accent)); }

@media (prefers-reduced-motion: reduce) {
  .wd-track, .wd-in path { animation: none; }
}

.wd-caption {
  margin-top: 22px; text-align: center;
  font-family: var(--display); font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.25; letter-spacing: -.015em; color: var(--text);
}

/* Below this the ring labels collide, so the loop becomes a list that
   still reads in order. */
@media (max-width: 760px) {
  .wd-loop svg { min-width: 620px; }
  .wd-loop { overflow-x: auto; overscroll-behavior-x: contain; }
}

/* ---------- 25. WORKFLOW ICONS ---------------------------------- *
   The numbered steps became drawn marks. One mark per concept, reused
   across every product page, so a reader learns "evidence out" once
   and recognises it everywhere. Icons inherit the page accent.       */

.jstep-i {
  flex: none; width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  color: var(--accent-hi);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.wf-icon { display: block; }

/* ---------- 26. FACTORY STACK ----------------------------------- *
   Read top to bottom, because that is the direction authority
   travels: a person decides, the Project Director translates, the
   core executes, and the surface reports back.                      */

.stack { margin-top: clamp(30px, 5vh, 54px); }
.stack svg { width: 100%; height: auto; display: block; overflow: visible; }
.stack-flow { stroke-dasharray: 5 9; animation: stack-run 2.8s linear infinite; }
@keyframes stack-run { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .stack-flow { animation: none; } }
.stack-caption {
  margin-top: 20px; text-align: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-4);
}
@media (max-width: 820px) {
  .stack { overflow-x: auto; overscroll-behavior-x: contain; }
  .stack svg { min-width: 680px; }
}

/* ---------- 27. DEPLOYMENT DIAGRAM ------------------------------ */

.deploy-models { display: grid; gap: 14px; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.deploy-card {
  position: relative; padding: 22px 20px 20px;
  background: linear-gradient(180deg, var(--panel), var(--ink-2));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  border-top: 3px solid var(--dm, var(--accent));
}
.deploy-card h3 { font-size: 18px; font-weight: 700; margin-top: 10px; }
.deploy-card p { font-size: 14px; line-height: 1.5; color: var(--text-3); margin-top: 9px; }
.deploy-bar { display: flex; height: 8px; border-radius: 100px; overflow: hidden; margin-top: 16px; border: 1px solid var(--line-2); }
.deploy-bar i { display: block; height: 100%; }
.deploy-bar i.yours { background: var(--dm, var(--accent)); }
.deploy-bar i.ours { background: #2a3038; }
.deploy-key { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.deploy-boundary { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }

/* ---------- THE WATCHDOG LOOP CHAIN (Council page) ---------------- *
   Eight stations that read as a cycle rather than a list: the last one
   carries a return arrow back to the first. Wraps instead of scrolling,
   because a horizontal scroller hides half the argument on a phone.   */
.loop-chain { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; padding:0; list-style:none; counter-reset:none; }
.loop-chain li {
  display:flex; align-items:center; gap:9px; padding:9px 14px 9px 10px;
  border:1px solid var(--line-2); border-radius:999px; background:var(--panel);
  font-size:14px; color:var(--text-2); position:relative;
}
.loop-chain li::after {
  content:"→"; margin-left:4px; color:var(--text-4); font-size:13px;
}
.loop-chain li:last-child { border-color:color-mix(in srgb, var(--accent) 46%, transparent); color:var(--text); }
.loop-chain li:last-child::after { content:"↺"; color:var(--accent-hi); }
.loop-n {
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--accent-hi);
  background:color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius:999px; padding:3px 6px; flex:none;
}
@media (max-width: 560px) { .loop-chain { gap:7px; } .loop-chain li { font-size:13px; padding:7px 11px 7px 8px; } }

/* ==================================================================
   FACTORY V0.3  ·  MAKING THE ARCHITECTURE LEGIBLE
   ==================================================================
   Progressive-disclosure furniture for the rebuilt Factory page. The
   internal system is translated here into public layers: a visible
   operating journey, with supporting detail available on demand.

   Lane colours follow the house language: cyan for operational
   pathways, violet for evidence and assurance, green for learning and
   continuity, orange and gold for human authority.
   ================================================================== */

/* A pinned-V3 badge. Never let a designed capability read as a shipped one. */
.v3 {
  display:inline-block; vertical-align:middle; font-family:var(--mono);
  font-size:9.5px; letter-spacing:.12em; color:var(--gold);
  border:1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  border-radius:3px; padding:2px 6px; margin-left:6px;
}

/* ---------- HUMAN AUTHORITY -------------------------------------- */

.auth { display:grid; gap:10px; margin-top:30px;
  grid-template-columns:minmax(0, 1fr); }
@media (min-width: 440px)  { .auth { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .auth { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .auth { grid-template-columns:repeat(6, minmax(0, 1fr)); } }
.auth-c { border:1px solid var(--line); border-top:2px solid var(--hot);
  border-radius:var(--radius); background:var(--panel); padding:14px 16px; display:grid; gap:5px; }
.auth-c b { font-size:16px; color:var(--text); }
.auth-c span { font-size:14px; color:var(--text-3); line-height:1.45; }

/* ---------- THE OPERATING MODEL ---------------------------------- */

.opm { list-style:none; margin:34px 0 0; padding:0; display:grid; gap:8px; }
.opm-i { border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel); overflow:hidden; border-left:2px solid var(--line-3); }
.opm-i[data-lane="human"]       { border-left-color:var(--hot); }
.opm-i[data-lane="operational"] { border-left-color:var(--cyan); }
.opm-i[data-lane="evidence"]    { border-left-color:var(--violet); }
.opm-i[data-lane="assurance"]   { border-left-color:var(--gold); }
.opm-i[data-lane="learning"]    { border-left-color:var(--green); }

.opm-h { display:grid; grid-template-columns:auto auto 1fr; gap:16px;
  align-items:start; padding:16px 18px; }
.opm-n { font-family:var(--mono); font-size:12px; color:var(--text-4);
  border:1px solid var(--line-2); border-radius:4px; padding:4px 7px; min-width:32px; text-align:center; }
.opm-ic { display:inline-flex; color:var(--text-3); padding-top:2px; }
.opm-i[data-lane="human"] .opm-ic       { color:var(--hot); }
.opm-i[data-lane="operational"] .opm-ic { color:var(--cyan); }
.opm-i[data-lane="evidence"] .opm-ic    { color:var(--violet); }
.opm-i[data-lane="assurance"] .opm-ic   { color:var(--gold); }
.opm-i[data-lane="learning"] .opm-ic    { color:var(--green); }
.opm-t { min-width:0; }
.opm-t h3 { font-size:19px; margin:0; color:var(--text); font-weight:600; }
.opm-t p  { font-size:15px; color:var(--text-3); margin:5px 0 0; line-height:1.5; max-width:74ch; }
.opm-tag { display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--gold); border:1px solid color-mix(in srgb, var(--gold) 36%, transparent);
  border-radius:999px; padding:2px 8px; margin-left:8px; vertical-align:middle; }

.opm-d { border-top:1px solid var(--line); }
.opm-d summary { cursor:pointer; padding:11px 18px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--text-4); list-style:none; }
.opm-d summary::-webkit-details-marker { display:none; }
.opm-d summary::before { content:"+"; color:var(--hot); margin-right:7px; }
.opm-d[open] summary::before { content:"–"; }
.opm-d summary:hover { color:var(--text-2); }
.opm-d p { margin:0; padding:0 18px 18px; font-size:15.5px; line-height:1.6; color:var(--text-2); max-width:82ch; }

/* ---------- ACCEPTANCE SEQUENCE ---------------------------------- */

.acc { margin-top:32px; }
.acc-seq { list-style:none; margin:0; padding:0; display:grid; gap:6px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 175px), 1fr)); }
.acc-seq li { position:relative; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); padding:14px 15px; display:grid; gap:4px; }
.acc-seq li:nth-child(2) { border-color:color-mix(in srgb, var(--violet) 46%, transparent); }
.acc-seq li:nth-child(4) { border-color:color-mix(in srgb, var(--violet) 46%, transparent); }
.acc-seq li:last-child   { border-color:color-mix(in srgb, var(--green) 42%, transparent); }
.acc-n { font-family:var(--mono); font-size:10px; color:var(--hot); }
.acc-seq b { font-size:16px; color:var(--text); }
.acc-b { font-size:13.5px; color:var(--text-4); line-height:1.45; }
.acc-why { display:grid; gap:14px; margin-top:16px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.acc-card { border:1px solid var(--line); border-left:2px solid var(--violet);
  border-radius:var(--radius); background:var(--ink-2); padding:16px 18px; }

/* ---------- INTELLIGENCE LADDER ---------------------------------- */

.lad { display:grid; gap:18px; margin-top:32px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 330px), 1fr)); align-items:start; }
.lad-l { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.lad-l li { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:12px 15px; }
.lad-l li[data-rung="1"] { border-style:dashed; }
.lad-l li[data-rung="2"] { border-color:color-mix(in srgb, var(--green) 34%, transparent); }
.lad-l li[data-rung="3"] { border-color:color-mix(in srgb, var(--cyan) 28%, transparent); }
.lad-l li[data-rung="4"] { border-color:color-mix(in srgb, var(--gold) 32%, transparent); }
.lad-l li[data-rung="5"] { border-color:color-mix(in srgb, var(--red) 40%, transparent); }
.lad-n { font-family:var(--display); font-size:26px; line-height:1; color:var(--text-3); }
.lad-l b { font-size:16px; color:var(--text); display:block; }
.lad-l span:last-child { font-size:14px; color:var(--text-4); line-height:1.45; display:block; margin-top:3px; }
.lad-modes { border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--ink-2); padding:18px 20px; }
.lad-mode { padding:11px 0; border-top:1px solid var(--line); }
.lad-mode:first-of-type { border-top:0; }
.lad-mode b { font-size:15.5px; color:var(--text); display:block; }
.lad-mode span { font-size:14px; color:var(--text-3); line-height:1.45; display:block; margin-top:3px; }

/* ---------- WILDCARDS, MECHANISMS, TICK LISTS -------------------- */

.wc { display:grid; gap:8px; }
.wc-c { border:1px solid var(--line); border-left:2px solid var(--gold);
  border-radius:var(--radius); background:var(--panel); padding:13px 15px; display:grid; gap:4px; }
.wc-c b { font-size:16px; color:var(--text); }
.wc-c span { font-size:14px; color:var(--text-3); line-height:1.45; }

.mech { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.mech span { border:1px solid var(--line-2); border-radius:999px; padding:8px 15px;
  font-size:14px; color:var(--text-2); background:var(--panel); }

.ticks { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.ticks li { position:relative; padding-left:22px; font-size:15px; color:var(--text-2); line-height:1.5; }
.ticks li::before { content:""; position:absolute; left:0; top:.34em; width:9px; height:5px;
  border-left:1.6px solid var(--green); border-bottom:1.6px solid var(--green); transform:rotate(-45deg); }
.ticks.is-no li { color:var(--text-3); }
.ticks.is-no li::before { content:""; top:.52em; width:9px; height:9px; border:1px dashed var(--text-4);
  border-radius:50%; transform:none; border-left-width:1px; border-bottom-width:1px; }

.flow { list-style:none; margin:0; padding:0; display:grid; gap:9px; }

/* ---------- E.ON CASE STUDY -------------------------------------- */

.eon { margin-top:30px; }
.eon-frame { border-left:2px solid var(--line-3); padding-left:14px; max-width:78ch; }
.eon-stages { display:grid; gap:12px; margin-top:24px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 285px), 1fr)); }
.eon-stage { border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel); padding:18px 20px; display:grid; gap:14px; align-content:start; }
.eon-stage-h { display:grid; gap:5px; font-size:17px; color:var(--text); }
.eon-stage-h span { font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--hot); }
.eon-facts { display:grid; gap:11px; }
.eon-fact { border-left:2px solid var(--line-2); padding-left:12px; }
.eon-fact b { display:block; font-family:var(--display); font-size:26px; line-height:1.05; color:var(--text); }
.eon-fact span { display:block; font-size:13px; color:var(--text-4); line-height:1.4; margin-top:3px; }
.eon-state { font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; color:var(--green);
  border-top:1px solid var(--line); padding-top:11px; }
.eon-lim { margin-top:20px; border:1px solid var(--line); border-left:2px solid var(--text-4);
  border-radius:var(--radius); background:var(--ink-2); padding:16px 18px; }
.eon-lim ul { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.eon-lim li { position:relative; padding-left:16px; font-size:14px; color:var(--text-3); line-height:1.45; }
.eon-lim li::before { content:""; position:absolute; left:0; top:.66em; width:8px; height:1px; background:var(--text-4); }

.eon-shots { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.eon-shots figure { margin:0; min-width:0; }
.eon-shots img { width:100%; height:auto; display:block; border:1px solid var(--line-2);
  border-radius:var(--radius); background:var(--ink-2); }
.eon-shots figcaption { font-size:13px; color:var(--text-4); margin-top:8px; line-height:1.45; }
.eon-shots figcaption b { color:var(--text-2); display:block; }

/* ---------- TIMING ----------------------------------------------- */

.tim-wrap { margin-top:44px; padding-top:34px; border-top:1px solid var(--line); }
.tim { display:grid; gap:14px; margin-top:22px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items:start; }
.tim-known { border:1px solid var(--line); border-left:2px solid var(--gold);
  border-radius:var(--radius-lg); background:var(--panel); padding:20px 22px; }
.tim-v { font-family:var(--display); font-size:40px; line-height:1; color:var(--text); }
.tim-l { font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); margin-top:7px; }
.tim-d { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--ink-2); }
.tim-d summary { cursor:pointer; padding:15px 18px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--text-4); list-style:none; }
.tim-d summary::-webkit-details-marker { display:none; }
.tim-d summary::before { content:"+"; color:var(--hot); margin-right:7px; }
.tim-d[open] summary::before { content:"–"; }
.tim-fields { list-style:none; margin:0; padding:0 18px 4px; display:grid; gap:0; }
.tim-fields li { display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:9px 0; border-top:1px solid var(--line); font-size:14px; }
.tim-fields li span { color:var(--text-3); }
.tim-fields li b { font-family:var(--mono); font-size:11.5px; color:var(--text-4); font-weight:400; white-space:nowrap; }
.tim-fields li[data-state="known"] b { color:var(--gold); }
.tim-d .small { padding:0 18px 18px; }

/* ---------- QUANTUM DOCTRINE ------------------------------------- */

.qd { display:grid; gap:18px; margin-top:30px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items:start; }
.qd-parts { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.qd-parts li { position:relative; padding:10px 14px 10px 32px; font-size:15px; color:var(--text-2);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); line-height:1.45; }
.qd-parts li::before { content:""; position:absolute; left:14px; top:1.05em; width:7px; height:7px;
  border-radius:50%; background:var(--violet); }
.qd-states { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--ink-2); padding:18px 20px; }
.qd-state { padding:13px 0; border-top:1px solid var(--line); display:grid; gap:4px; }
.qd-state:first-of-type { border-top:0; }
.qd-state b { font-size:16px; color:var(--text); }
.qd-state span { font-size:14px; color:var(--text-3); line-height:1.45; }
.qd-state[data-t="no"] b      { color:var(--text-2); }
.qd-state[data-t="pending"] b { color:var(--gold); }

/* ---------- ASTRA APPRAISAL -------------------------------------- */

.appr { display:grid; gap:14px; margin-top:30px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items:start; }
.appr-main { border:1px solid var(--line); border-left:2px solid var(--hot);
  border-radius:var(--radius-lg); background:var(--panel); padding:20px 22px; }
.appr-limits, .appr-ex { border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--ink-2); padding:20px 22px; }

/* ---------- STEWARD LOCAL MODEL SAFETY --------------------------- */

.safe { display:grid; gap:8px; margin-top:28px; }
.safe-r { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:13px 16px; }
.safe-r[data-k="yes"] { border-left:2px solid var(--green); }
.safe-r[data-k="no"]  { border-left:2px solid var(--red); }
.safe-m { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-2); border-radius:3px; padding:3px 7px; white-space:nowrap; color:var(--text-4); }
.safe-r[data-k="yes"] .safe-m { color:var(--green); border-color:color-mix(in srgb, var(--green) 38%, transparent); }
.safe-r[data-k="no"] .safe-m  { color:var(--red);   border-color:color-mix(in srgb, var(--red) 38%, transparent); }
.safe-r b { font-size:15.5px; color:var(--text); display:block; }
.safe-r span:last-child { font-size:14px; color:var(--text-3); line-height:1.45; display:block; margin-top:3px; }

/* ---------- RESPONSIVE ------------------------------------------- */

@media (max-width: 720px) {
  .opm-h { grid-template-columns:auto 1fr; gap:12px; }
  .opm-ic { display:none; }
  .opm-t h3 { font-size:17px; }
  .tim-v { font-size:32px; }
  .eon-fact b { font-size:22px; }
  .safe-r { grid-template-columns:1fr; gap:8px; }
}


/* At 200% browser zoom the effective viewport halves. minmax() floors that
   are comfortable at 1440 become wider than the column, so every grid on the
   Factory page uses min(100%, X) floors. These three were the stragglers. */
@media (max-width: 760px) {
  .acc-seq, .eon-stages, .eon-shots, .qd, .lad, .appr, .tim,
  .moat-grid, .eon-lim ul { grid-template-columns:minmax(0, 1fr); }
  .mech span { font-size:13px; padding:7px 12px; }
  .opm-n { min-width:26px; }
}

/* ---------- THE PUBLIC OPERATING JOURNEY ------------------------- *
   Six states on one spine. Drawn from scratch for the public site: it
   shows the customer-visible contract, never internal topology.        */

.jn { display:grid; gap:clamp(26px, 4vw, 54px); margin-top:38px;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, .65fr); align-items:start; }
@media (max-width: 900px) { .jn { grid-template-columns:minmax(0, 1fr); } }

.jn-spine { list-style:none; margin:0; padding:0 0 0 30px; position:relative; display:grid; gap:4px; }
.jn-spine::before { content:""; position:absolute; left:9px; top:22px; bottom:22px; width:2px;
  background:linear-gradient(180deg, var(--hot), var(--cyan) 42%, var(--violet) 74%, var(--green)); opacity:.5; }

.jn-st { position:relative; padding:2px 0; }
.jn-node { position:absolute; left:-30px; top:18px; width:20px; height:20px; display:grid; place-items:center; }
.jn-node i { width:11px; height:11px; border-radius:50%; background:var(--ink);
  border:2px solid var(--line-3); display:block; transition:border-color .4s var(--ease), box-shadow .4s var(--ease); }
.jn-st[data-lane="human"]       .jn-node i { border-color:var(--hot); }
.jn-st[data-lane="operational"] .jn-node i { border-color:var(--cyan); }
.jn-st[data-lane="evidence"]    .jn-node i { border-color:var(--violet); }
.jn-st[data-lane="outcome"]     .jn-node i { border-color:var(--green); }
.jn-st.in .jn-node i { box-shadow:0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); }

.jn-body { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel);
  padding:15px 18px; display:grid; grid-template-columns:auto auto 1fr; gap:4px 12px; align-items:center;
  opacity:.5; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .5s; }
.jn-st.in .jn-body { opacity:1; transform:none; border-color:var(--line-2); }
.jn-n { font-family:var(--mono); font-size:11px; color:var(--text-4); }
.jn-ic { display:inline-flex; color:var(--text-3); }
.jn-st[data-lane="human"]       .jn-ic { color:var(--hot); }
.jn-st[data-lane="operational"] .jn-ic { color:var(--cyan); }
.jn-st[data-lane="evidence"]    .jn-ic { color:var(--violet); }
.jn-st[data-lane="outcome"]     .jn-ic { color:var(--green); }
.jn-body h3 { margin:0; font-size:18px; color:var(--text); font-weight:600; }
.jn-body p { grid-column:1 / -1; margin:2px 0 0; font-size:14.5px; color:var(--text-3); line-height:1.5; }

.jn-caps { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--ink-2); padding:20px; }
.jn-cap-grid { display:grid; gap:7px; margin-top:14px; }
.jn-cap { display:grid; grid-template-columns:auto 1fr; gap:3px 12px; align-items:center;
  border:1px solid var(--line); border-left:2px solid var(--c); border-radius:var(--radius);
  background:var(--panel); padding:11px 13px; text-decoration:none;
  transition:border-color .16s, background .16s; }
.jn-cap:hover { background:var(--panel-2); border-color:var(--c); }
.jn-cap-m { display:inline-flex; color:var(--c); }
.jn-cap-n { font-size:15.5px; color:var(--text); font-weight:600; }
.jn-cap-r { grid-column:2; font-size:13px; color:var(--text-4); line-height:1.4; }
.jn-cap-note { margin-top:14px; }

@media (prefers-reduced-motion: reduce) {
  .jn-body { opacity:1; transform:none; }
}

/* Progressive disclosure block used on the evidence section. */
.disclose { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); }
.disclose-b { padding:0 18px 20px; }

/* Supporting notes inside a journey station. Kept visually quieter than the
   station line so the six-state read stays the primary one. */
.jn-note { grid-column:1 / -1; margin:8px 0 0 !important; padding-left:12px;
  border-left:1px solid var(--line-2); font-size:13.5px !important;
  color:var(--text-4) !important; line-height:1.5; }

/* The quantum path, inside the allocation panel. */
.lad-q { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.lad-q p { font-size:14px; color:var(--text-3); line-height:1.5; margin:10px 0 0; }
.lad-q-n { color:var(--text-4) !important; font-size:13.5px !important; }

/* Speed positioning, folded into the verification section. */
.speed { margin-top:44px; padding-top:32px; border-top:1px solid var(--line); }

/* ---------- COUNCIL MILESTONE ------------------------------------ *
   Leads with the result. Reuses the stat and card furniture already on
   the site; the only new thing is the result plate.                   */
.ms-top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; }
.ms-result { font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; color:var(--green);
  border:1px solid color-mix(in srgb, var(--green) 44%, transparent); border-radius:999px;
  padding:7px 14px; background:color-mix(in srgb, var(--green) 7%, transparent); }
.ms-date { color:var(--text-4); }
.ms-stats { display:grid; gap:14px 18px; margin-top:30px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.ms-stat { border-left:2px solid var(--accent); padding-left:13px; }
.ms-stat b { display:block; font-family:var(--display); font-size:clamp(28px, 2.6vw, 38px); line-height:1; color:var(--text); }
.ms-stat span { display:block; font-size:13.5px; color:var(--text-3); margin-top:6px; line-height:1.4; }
.ms-card { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); padding:20px 22px; }
.ms-card.is-rec { border-left:2px solid var(--gold); background:var(--ink-2); }
@media (max-width: 760px) { .ms-stats { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 430px) { .ms-stats { grid-template-columns:minmax(0,1fr); } }
/* Council-first global no-JavaScript navigation. */
.council-noscript-nav{border-bottom:1px solid var(--line);background:#080a0e}
.council-noscript-nav .wrap{display:flex;flex-wrap:wrap;gap:8px;padding-block:10px}
.council-noscript-nav a{display:flex;flex:1 1 130px;min-height:44px;align-items:center;justify-content:center;padding:8px 12px;border:1px solid var(--line);border-radius:9px;color:var(--text-2);font-size:14px;font-weight:700;text-align:center;text-decoration:none}
.council-noscript-nav a:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:620px){.council-noscript-nav .wrap{display:grid;grid-template-columns:1fr 1fr}.council-noscript-nav a:last-child{grid-column:1/-1}}

/* High-contrast account action in the primary navigation. */
.nav a.nav-account{color:#fff;border:1px solid var(--line-3);background:#11161d}
.nav a.nav-account:hover{color:#fff;border-color:var(--accent);background:#1a2029}