/* ===========================================================================
   Autonomir — site styles

   Layered on top of nocturne.css. The Nocturne accent is re-tuned here to the
   Autonomir enterprise blue; everything else (spacing scale, radii, shadows,
   type) comes from the design system unchanged.
   =========================================================================== */

/* ── Theme ─────────────────────────────────────────────────────────────── */
:root {
  --color-bg: #0d121e;
  --color-surface: #151d2c;
  --color-accent: #4d94d6;
  --color-accent-100: #eaf3fb;
  --color-accent-200: #cfe4f6;
  --color-accent-300: #a8cdee;
  --color-accent-400: #79b0e4;
  --color-accent-500: #4d94d6;
  --color-accent-600: #3a76b0;
  --color-accent-700: #2b5a87;
  --color-accent-800: #1e3f5f;
  --color-accent-900: #132738;
  --color-section: #132a44;
  --color-section-glow: #1d3f63;

  --ok: #5fbf9b;
  --warn: #d9a34d;
  --crit: #d2695f;

  /* Surfaces and hairlines used across every section. */
  --line: rgba(233, 233, 237, 0.07);
  --line-2: rgba(233, 233, 237, 0.09);
  --line-3: rgba(233, 233, 237, 0.12);
  --panel: rgba(21, 29, 44, 0.4);
  --ink-80: rgba(233, 233, 237, 0.82);
  --ink-60: rgba(233, 233, 237, 0.62);
  /* Names are historical; the values below are what clears WCAG AA. Ink at
     alpha a on the page needs a >= 0.495 for 4.5:1, and 0.535 on a section
     band, so 0.56 is the floor that holds on both grounds. */
  --ink-45: rgba(233, 233, 237, 0.58);
  --ink-38: rgba(233, 233, 237, 0.56);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent-200); }
section[id] { scroll-margin-top: 96px; }
h1, h2 { text-wrap: pretty; }

/* ── Motion ────────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }
@keyframes breathe {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: .75; transform: scale(1.03); }
}
@keyframes dashFlow { to { stroke-dashoffset: -240; } }
@keyframes stepGlow {
  0%, 72%, 100% { border-color: rgba(233, 233, 237, .10); color: rgba(233, 233, 237, .56); box-shadow: none; }
  10%, 42% { border-color: #4d94d6; color: #e9e9ed; box-shadow: 0 0 0 1px rgba(77,148,214,.35), 0 0 26px rgba(77,148,214,.20); }
}
@keyframes stepGlowText {
  0%, 72%, 100% { color: rgba(233, 233, 237, .56); }
  10%, 40% { color: #a8cdee; }
}
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes sweep {
  0% { opacity: 0; transform: translateY(-40px); }
  12% { opacity: .6; }
  100% { opacity: 0; transform: translateY(340px); }
}
@keyframes tick { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes menuSweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* Scroll reveal. The hidden state is opt-in: `motion-ready` is set by JS only
   once the observer is running and can undo it, so with JS off or blocked the
   content is simply visible. */
.motion-ready [data-reveal],
.motion-ready h2 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .85s cubic-bezier(.22,.7,.24,1), transform .85s cubic-bezier(.22,.7,.24,1);
}
.motion-ready [data-reveal].in,
.motion-ready h2.in { opacity: 1; transform: none; }

/* Staggered reveal. `data-reveal` sits on the container, so a grid of peers
   arrives as one slab — the wider the row, the more it reads like a panel
   dropping in than like content settling. Where the container is a grid of
   separate boxes, the container itself only fades and each child carries the
   rise, offset a beat from the one before it. The offset stops climbing at
   the sixth child — everything from there shares 350ms — so a long grid never
   feels like it is queuing.

   The children animate rather than transition, and deliberately so: several
   of them (.fam-card, .cross-card, .feat-card--link) lift on hover, and a
   transition-delay large enough to stagger an entrance would still be sitting
   on the element afterwards, delaying every hover by up to a third of a
   second. `backwards` fill holds the from-state through the delay and then
   hands the element back to its own styles, so hover is untouched.

   The selector is scoped to a named list rather than every `[data-reveal]`:
   containers like .dcore, .estateweb and .arch run their own looping
   animations on their children, and a blanket animation-delay would desync
   them. */
@keyframes revealRise {
  from { opacity: 0; transform: translateY(16px); }
}
@keyframes revealFade {
  from { opacity: 0; }
}

.motion-ready :is(.card-grid, .loop-grid, .cmp-grid, .g-family, .platstrip, .signal-grid)[data-reveal] {
  transform: none;
}
.motion-ready :is(.card-grid, .loop-grid, .cmp-grid, .g-family, .platstrip, .signal-grid)[data-reveal]:not(.in) > * {
  opacity: 0;
}
.motion-ready :is(.card-grid, .loop-grid, .cmp-grid, .g-family, .platstrip)[data-reveal].in > * {
  animation: revealRise .7s cubic-bezier(.22, .7, .24, 1) backwards;
}

/* The signal grid is a seamless field whose 1px gaps are the container
   showing through — translating its cards would tear that grid open, so
   those fade on the same cadence without moving. */
.motion-ready .signal-grid[data-reveal].in > * {
  animation: revealFade .7s cubic-bezier(.22, .7, .24, 1) backwards;
}

.motion-ready :is(.card-grid, .loop-grid, .cmp-grid, .g-family, .platstrip, .signal-grid)[data-reveal].in > * {
  animation-delay: 350ms;
}
.motion-ready :is(.card-grid, .loop-grid, .cmp-grid, .g-family, .platstrip, .signal-grid)[data-reveal].in > *:nth-child(1) { animation-delay: 0ms; }
.motion-ready :is(.card-grid, .loop-grid, .cmp-grid, .g-family, .platstrip, .signal-grid)[data-reveal].in > *:nth-child(2) { animation-delay: 70ms; }
.motion-ready :is(.card-grid, .loop-grid, .cmp-grid, .g-family, .platstrip, .signal-grid)[data-reveal].in > *:nth-child(3) { animation-delay: 140ms; }
.motion-ready :is(.card-grid, .loop-grid, .cmp-grid, .g-family, .platstrip, .signal-grid)[data-reveal].in > *:nth-child(4) { animation-delay: 210ms; }
.motion-ready :is(.card-grid, .loop-grid, .cmp-grid, .g-family, .platstrip, .signal-grid)[data-reveal].in > *:nth-child(5) { animation-delay: 280ms; }
.motion-ready :is(.card-grid, .loop-grid, .cmp-grid, .g-family, .platstrip, .signal-grid)[data-reveal].in > *:nth-child(6) { animation-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-ready [data-reveal],
  .motion-ready [data-reveal] > *,
  .motion-ready h2 { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  /* The blanket rule above only neutralises animations; hover transforms are
     transitions, so they survive it and still lurch under a settled pointer. */
  .lift:hover,
  .fam-card:hover,
  .intg-card:hover,
  .feat-card--link:hover,
  .cross-card:hover,
  .arch-branch:hover { transform: none; }
}

/* ── Layout ────────────────────────────────────────────────────────────── */
.sec { max-width: 1320px; margin: 0 auto; padding: 92px 48px; }
.sec--hero { padding: 88px 48px 0; }
.sec--open-bottom { padding-bottom: 0; }
.sec--open-top { padding-top: 0; padding-bottom: 84px; }
.sec--cta { padding: 104px 48px; text-align: center; position: relative; }
.bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bar--bottom { border-bottom: 1px solid var(--line); }
.bar--top { border-top: 1px solid var(--line); }

.g-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,600px); gap: 56px; align-items: start; }
.g-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,520px); gap: 64px; align-items: center; }
.g-safe { display: grid; grid-template-columns: minmax(0,520px) minmax(0,1fr); gap: 72px; align-items: center; }
.g-resp { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: 32px; align-items: start; }
.g-contact { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 56px; align-items: start; }
.g-plat { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 56px; align-items: center; }
.g-family { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.g-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 20px; }
.g-auto-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px,1fr)); gap: 32px; align-items: stretch; }
/* auto-fit does not collapse below its minimum — it overflows. At 320px the
   330px track is already wider than the content box, so this needs an explicit
   single-column fallback rather than trusting the grid to fold. */
@media (max-width: 420px) {
  .g-auto-wide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ── Shared type ───────────────────────────────────────────────────────── */
.kicker {
  font: 500 11px var(--font-heading);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-accent-400);
}
.kicker--sm { font-size: 10.5px; }
.label {
  font: 500 10.5px var(--font-heading);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(233, 233, 237, .56);
}
.label--accent { letter-spacing: .16em; color: var(--color-accent-400); }
.label--11 { font-size: 11px; }
.lede { margin: 22px 0 0; max-width: 640px; font-size: 17px; line-height: 1.65; color: var(--ink-60); }
.lede--wide { max-width: 680px; }
.lede--lg { font-size: 17.5px; }

h1 { margin: 28px 0 0; font-size: clamp(46px, 5.2vw, 74px); line-height: 1.03; letter-spacing: -.03em; }
h2 { margin: 0; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.025em; }
.h2--md { font-size: clamp(32px, 4vw, 50px); line-height: 1.08; }
.h2--cta { font-size: clamp(38px, 4.8vw, 62px); line-height: 1.05; letter-spacing: -.03em; }
.h2--gap { margin-top: 22px; }
.accent { color: var(--color-accent-400); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-accent,
.btn-quiet {
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 14px var(--font-heading); letter-spacing: .03em;
  padding: 14px 28px; border-radius: var(--radius-md);
  border: 1px solid transparent; background: none; cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.btn-accent { border-color: var(--color-accent); color: var(--color-accent-100); }
.btn-accent:hover { background: rgba(77, 148, 214, .16); color: var(--color-accent-100); }
.btn-quiet { border-color: rgba(233, 233, 237, .16); color: var(--ink-80); }
.btn-quiet:hover { border-color: rgba(233, 233, 237, .4); color: #fff; }
.btn-accent--sm {
  font-size: 13.5px; letter-spacing: 0; padding: 13px 24px;
  color: var(--color-accent-200);
}
.btn-accent--sm:hover { background: rgba(77, 148, 214, .14); color: var(--color-accent-200); }
.btn-row { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.btn-row--center { justify-content: center; margin-top: 38px; }

/* ── Panels ────────────────────────────────────────────────────────────── */
.panel {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.panel--accent {
  border-color: rgba(77, 148, 214, .28);
  background: linear-gradient(180deg, rgba(19, 42, 68, .5), rgba(21, 29, 44, .4));
}
.lift { transition: border-color .3s ease, transform .3s ease; }
.lift:hover { border-color: rgba(77, 148, 214, .45); transform: translateY(-3px); }

.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot--ok { background: var(--ok); animation: tick 2.4s ease-in-out infinite; }
.grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(233, 233, 237, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 233, 237, .03) 1px, transparent 1px);
}

/* ===========================================================================
   Header
   =========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(13, 18, 30, .82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(233, 233, 237, .08);
  font-family: var(--font-body);
}
.header-rail {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 148, 214, .5), transparent);
  opacity: 0; transition: opacity .4s ease;
}
.site-header[data-menu-open] .header-rail { opacity: 1; }
.header-bar {
  max-width: 1320px; margin: 0 auto; padding: 0 48px; height: 84px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.header-logo { display: flex; align-items: center; }
.header-logo img { height: 34px; width: auto; }

.navlinks { display: flex; align-items: center; gap: 2px; }
.navtrigger {
  position: relative; background: none; border: 0;
  color: rgba(233, 233, 237, .72);
  font: 500 13px var(--font-heading); letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 15px; cursor: pointer; border-radius: 7px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .25s ease, background .25s ease;
}
.navtrigger:hover { background: rgba(77, 148, 214, .10); color: #fff; }
.navtrigger[aria-expanded="true"] { color: #fff; }
.navtrigger svg { opacity: .6; transition: transform .3s ease; }
.navtrigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.navtrigger-underline {
  position: absolute; left: 15px; right: 15px; bottom: 4px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.navtrigger[aria-expanded="true"] .navtrigger-underline { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.header-login {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12.5px var(--font-heading); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(233, 233, 237, .7); padding: 10px 14px; border-radius: var(--radius-md);
  transition: color .25s ease, background .25s ease;
}
.header-login:hover { color: #fff; background: rgba(77, 148, 214, .10); }
.header-sep { width: 1px; height: 22px; background: var(--line-3); }
.header-demo {
  border: 1px solid var(--color-accent); color: var(--color-accent-200);
  font: 500 12.5px var(--font-heading); letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 18px; border-radius: var(--radius-md); white-space: nowrap;
  transition: background .25s ease, color .25s ease;
}
.header-demo:hover { background: rgba(77, 148, 214, .14); color: #fff; }
.navtoggle {
  display: none; background: none; border: 1px solid rgba(233, 233, 237, .18);
  border-radius: var(--radius-md); width: 42px; height: 42px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.navtoggle:hover { border-color: var(--color-accent); }
.navtoggle span { display: block; width: 17px; height: 1.5px; background: #e9e9ed; }

.megamenu {
  /* Opaque, and deliberately no backdrop-filter of its own: the panel is
     absolutely positioned over page content inside .site-header, which
     already blurs its backdrop. Nesting a second backdrop-filter makes
     Chrome drop this element's background and the page shows through. */
  display: none; position: relative; overflow: hidden;
  border-top: 1px solid rgba(77, 148, 214, .2);
  background: linear-gradient(180deg, #0f1726, #0b1019);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .55);
  animation: menuIn .28s cubic-bezier(.22,.7,.24,1) both;
}
.megamenu[data-open] { display: block; }
.megamenu-sweep {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 148, 214, .8), transparent);
  animation: menuSweep 2.4s ease-out both;
}
.g-mega {
  position: relative; display: grid;
  grid-template-columns: 230px minmax(0,1fr) 260px; gap: 44px; align-items: start;
  max-width: 1320px; margin: 0 auto; padding: 30px 48px 34px;
}
.mega-blurb { margin-top: 12px; font-size: 14px; color: rgba(233, 233, 237, .5); line-height: 1.55; max-width: 230px; }
.mega-mark { margin-top: 18px; width: 48px; height: 1px; background: linear-gradient(90deg, var(--color-accent), transparent); }
.mega-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 4px 24px; align-content: start; }
.mega-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 8px; font-size: 14.5px;
  color: var(--ink-80); border: 1px solid transparent;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.mega-item:hover { background: rgba(77, 148, 214, .10); border-color: rgba(77, 148, 214, .28); color: #fff; }
.mega-item span:last-child { color: var(--color-accent-400); opacity: .7; }
.mega-cta {
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid rgba(77, 148, 214, .3); border-radius: var(--radius-lg);
  padding: 22px 22px 20px; min-height: 150px; color: inherit;
  background: radial-gradient(300px 160px at 80% 0%, rgba(77, 148, 214, .22), transparent 70%), rgba(21, 29, 44, .6);
  transition: border-color .25s ease;
}
.mega-cta:hover { border-color: rgba(77, 148, 214, .65); }
.mega-cta-title { font: 500 19px var(--font-heading); letter-spacing: -.015em; color: #fff; margin-top: 10px; line-height: 1.3; }
.mega-cta-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: 12.5px; color: var(--color-accent-300); }

.drawer {
  display: none; border-top: 1px solid rgba(233, 233, 237, .08);
  background: rgba(11, 15, 25, .98); max-height: 70vh; overflow-y: auto;
}
.drawer[data-open] { display: block; }
.drawer-login-wrap { padding: 18px 24px 0; }
.drawer-login {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(233, 233, 237, .14); border-radius: var(--radius-md);
  padding: 12px 16px; font: 500 13px var(--font-heading);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-80);
}
.drawer-login:hover { border-color: var(--color-accent); color: #fff; }
.drawer-sections { padding: 20px 24px 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; }
.drawer-heading { font: 500 11px var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-400); padding-bottom: 6px; }
.drawer a.drawer-link {
  display: block; padding: 10px 0; font-size: 15px;
  color: var(--ink-80); border-bottom: 1px solid rgba(233, 233, 237, .06);
}
.drawer a.drawer-link:hover { color: #fff; }

/* ===========================================================================
   Hero
   =========================================================================== */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(1000px 640px at 74% 42%, rgba(45, 110, 168, .26), transparent 68%),
    radial-gradient(720px 520px at 6% 92%, rgba(30, 63, 95, .30), transparent 70%);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(233, 233, 237, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 233, 237, .035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(900px 600px at 62% 42%, #000, transparent 78%);
}
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .85; }
.hero-inner { position: relative; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 11px var(--font-heading); letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-accent-400);
  border: 1px solid rgba(77, 148, 214, .3); border-radius: 999px; padding: 7px 15px;
}
.hero-copy { margin: 26px 0 0; max-width: 520px; font-size: 18px; line-height: 1.62; color: rgba(233, 233, 237, .64); }
.hero-tail { height: 64px; }

/* ── Hero refinements ──────────────────────────────────────────────────────
   The left column top-aligns (see .g-hero align-items) rather than centering
   against the taller intelligence orbit, so the headline reads at eye level
   instead of floating down the fold. A short staggered entrance and a soft
   accent glow add life without leaving the existing motion and colour
   language. All of it collapses to an instant, static reveal under the global
   prefers-reduced-motion carve-out above. */

/* A little breathing room so the badge clears the top edge cleanly, and the
   left column is capped so its text block stays optically anchored near the
   top of the tall orbit column beside it. */
.hero .g-hero > div:first-child { padding-top: 6px; }

/* The accent word picks up the same blue light the hero glow already casts. */
.hero h1 .accent { text-shadow: 0 0 46px rgba(77, 148, 214, .35); }

/* Staggered entrance for the hero's left column. This is above the fold, so it
   runs on load rather than through the scroll-reveal observer. `backwards` fill
   means the pre-animation state is the hidden one, so there is no flash of the
   settled layout first. */
@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } }
.hero .g-hero > div:first-child > * {
  animation: heroRise .85s cubic-bezier(.22, .7, .24, 1) backwards;
}
.hero .g-hero > div:first-child > .hero-badge { animation-delay: .05s; }
.hero .g-hero > div:first-child > h1 { animation-delay: .16s; }
.hero .g-hero > div:first-child > .hero-copy { animation-delay: .30s; }
.hero .g-hero > div:first-child > .btn-row { animation-delay: .42s; }

/* The orbit eases in a beat later and from slightly smaller, so the eye lands
   on the headline first and the graphic settles in behind it. */
@keyframes heroArt { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.hero .g-hero > div:last-child {
  animation: heroArt 1s cubic-bezier(.22, .7, .24, 1) .2s backwards;
}

.orbit { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto; }

/* These three are centred with the `translate` property rather than inside
   `transform`: their spin / breathe keyframes set `transform` outright, which
   would otherwise discard the centering and throw them down and to the right. */
.orbit-halo,
.orbit-sweep,
.orbit-ring,
.orbit-ring-inner {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
}
.orbit-halo {
  width: 80%; height: 80%;
  background: radial-gradient(circle, rgba(77, 148, 214, .20), transparent 66%);
  animation: breathe 7s ease-in-out infinite;
}
.orbit-ring {
  width: 97%; height: 97%;
  border: 1px solid rgba(77, 148, 214, .14); border-top-color: rgba(77, 148, 214, .5);
  animation: spin 34s linear infinite;
}
.orbit-ring-inner {
  width: 75%; height: 75%;
  border: 1px dashed rgba(233, 233, 237, .11);
  animation: spinRev 46s linear infinite;
}
/* A slow sector sweep — the orbit reading its own signals rather than sitting
   still. Masked hollow so it never washes over the core's numbers. */
.orbit-sweep {
  width: 97%; height: 97%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(77, 148, 214, .14) 24deg, rgba(77, 148, 214, .04) 50deg, transparent 62deg);
  -webkit-mask: radial-gradient(circle, transparent 45%, #000 46%);
  mask: radial-gradient(circle, transparent 45%, #000 46%);
  animation: spin 12s linear infinite;
}
.orbit-paths { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Draws once on load to the stated trust value, then holds. */
@keyframes orbitArc { to { stroke-dashoffset: 28.3; } }
/* Draws once on load; the script then owns the value via an inline style,
   which outranks this animation's final frame. */
.orbit-arc {
  animation: orbitArc 2.4s cubic-bezier(.22, .7, .24, 1) .5s forwards;
  transition: stroke-dashoffset 1.2s cubic-bezier(.22, .7, .24, 1), stroke .7s ease;
}
.orbit-core-score, .orbit-core-state { transition: color .7s ease; }

/* ── Product marks ─────────────────────────────────────────────────────
   Each mark animates the idea its glyph already draws. The shield never
   moves — it is the constant the four products share, and a shield that
   drifts stops reading as a shield.

   transform-box: view-box makes transform-origin resolve against the SVG's
   own 100x108 coordinate system, so the rings can be spun about the point
   they are actually centred on (50, 51) rather than the element's corner. */
.pmark { display: block; flex: none; overflow: visible; }
.pmark-ring, .pmark-arc, .pmark-cell, .pmark-check, .pmark-dot {
  transform-box: view-box;
}

@keyframes pmarkSpin { to { transform: rotate(360deg); } }
@keyframes pmarkSpinRev { to { transform: rotate(-360deg); } }
@keyframes pmarkCell {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes pmarkCheck {
  0%, 8% { stroke-dashoffset: 34; }
  38%, 100% { stroke-dashoffset: 0; }
}
@keyframes pmarkDot {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.16); opacity: 1; }
}

/* Endpoint: the two signal rings orbit the core, counter-rotating so the
   dashes never lock into a single rotating pattern. */
.motion-ready .pmark--endpoint .pmark-ring--in {
  transform-origin: 50px 51px; animation: pmarkSpin 22s linear infinite;
}
.motion-ready .pmark--endpoint .pmark-ring--out {
  transform-origin: 50px 51px; animation: pmarkSpinRev 34s linear infinite;
}
/* ADM: the four cells report in turn rather than all at once. */
.motion-ready .pmark--adm .pmark-cell { animation: pmarkCell 4.4s ease-in-out infinite; }
.motion-ready .pmark--adm .pmark-cell:nth-of-type(1) { animation-delay: 0s; }
.motion-ready .pmark--adm .pmark-cell:nth-of-type(2) { animation-delay: .35s; }
.motion-ready .pmark--adm .pmark-cell:nth-of-type(3) { animation-delay: 1.05s; }
.motion-ready .pmark--adm .pmark-cell:nth-of-type(4) { animation-delay: .7s; }
/* Mobile: the check completes, which is the whole claim of the glyph. */
.motion-ready .pmark--mobile .pmark-check {
  stroke-dasharray: 34; animation: pmarkCheck 5s ease-in-out infinite;
}
/* SAFE: the trust loop runs continuously, slowly, and never completes into
   a resting state — that is the point of continuous trust. */
.motion-ready .pmark--safe .pmark-arc {
  transform-origin: 50px 52px; animation: pmarkSpin 26s linear infinite;
}
.motion-ready .pmark--safe .pmark-dot {
  transform-origin: 50px 52px; animation: pmarkDot 3.4s ease-in-out infinite;
}

/* Page hero: mark and kicker on one baseline above the headline. */
.page-hero-mark { display: flex; align-items: center; gap: 14px; }
.page-hero-mark .kicker { margin: 0; }

/* Products hub: mark sits with the numbered label above the product name. */
.pshow-badge { display: flex; align-items: center; gap: 12px; }
.pshow-badge .label { margin: 0; }

/* Home cards: the mark leads the row, the numeral closes it. */
.fam-head { display: flex; align-items: center; gap: 11px; }
.fam-head .fam-num { margin-left: auto; }

/* A card lifting under the cursor gets its mark's motion, too. */
.fam-card:hover .pmark-shield, .pshow-mark:hover .pmark-shield { filter: brightness(1.12); }
.pmark-shield { transition: filter .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .pmark-ring, .pmark-arc, .pmark-cell, .pmark-check, .pmark-dot { animation: none !important; }
  .pmark--mobile .pmark-check { stroke-dasharray: none; }
}

/* ── Hero autonomous-operations log ────────────────────────────────────
   Balances the hero: the dial column runs ~775px tall and the copy column
   ~429px, which left the lower left empty. This fills it with the actions
   belonging to the condition shown opposite. Fixed height for three rows so
   a new entry never reflows the hero. */
.heroops {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--line-2); max-width: 440px;
}
.heroops-head {
  display: flex; align-items: center; justify-content: space-between;
  font: 500 9.5px var(--font-heading); letter-spacing: .16em; text-transform: uppercase;
}
.heroops-title { color: var(--color-accent-300); }
.heroops-live { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-45); }
.heroops-live i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--ok);
  animation: tick 2.2s ease-in-out infinite;
}
.heroops-list {
  margin: 12px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.heroops-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid rgba(233, 233, 237, .05);
}
.heroops-row:last-child { border-bottom: 0; }
.heroops-stage {
  font: 500 9px var(--font-heading); letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent-400);
}
.heroops-text { font-size: 13px; line-height: 1.45; color: var(--ink-60); }
/* Only the incoming row animates; the ones below it simply shift down. */
@keyframes heroOpsIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.motion-ready .heroops-row--new { animation: heroOpsIn .5s cubic-bezier(.22, .7, .24, 1) both; }
.loop-steps--hero { margin-top: 30px; }

@media (max-width: 1180px) {
  /* Stacked, the log sits between the buttons and the dial, where it reads as
     an interruption rather than as balance. */
  .heroops { display: none; }
}

/* ── Hero trust graph ──────────────────────────────────────────────────
   Sits under the dial: the dial is the current value, this is the shape it
   has been making. Deliberately small — it substantiates the number without
   competing with the headline. */
.orbit-graph { margin-top: 26px; padding: 0 4px; }
.orbit-graph-head,
.orbit-graph-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  font: 500 9.5px var(--font-heading); letter-spacing: .16em; text-transform: uppercase;
}
.orbit-graph-title { color: var(--color-accent-300); }
.orbit-graph-scale, .orbit-graph-foot { color: var(--ink-45); }
.orbit-graph-foot { margin-top: 7px; letter-spacing: .12em; }
.orbit-graph-svg {
  display: block; width: 100%; height: 46px; margin-top: 6px;
  border-bottom: 1px solid var(--line-2);
}
.orbit-graph-area { fill: url(#orbitGraphFill); }
.orbit-graph-line {
  fill: none; stroke: var(--color-accent-300); stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round;
  /* Non-scaling stroke keeps the line 1.5px after preserveAspectRatio="none"
     stretches the 320-unit viewBox across the column. */
  vector-effect: non-scaling-stroke;
}
.orbit-graph-mark {
  fill: var(--warn); stroke: rgba(13, 18, 30, .9); stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.orbit-graph-legend { display: inline-flex; align-items: center; gap: 6px; }
.orbit-graph-legend i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--warn);
}
.orbit-arc-head { transition: fill .7s ease, cx 1.2s cubic-bezier(.22, .7, .24, 1), cy 1.2s cubic-bezier(.22, .7, .24, 1); }

/* The condition read-out. One line, because the hero's job is still the
   headline — this says the system is working, not what every layer is doing. */
.orbit-feed {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-top: 22px; padding: 0 12px;
  font-size: 12.5px; line-height: 1.5; text-align: center;
}
.orbit-feed-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--ok); animation: tick 2.2s ease-in-out infinite;
  transition: background .7s ease;
}
.orbit-feed-stage {
  font: 500 10px var(--font-heading); letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent-300); flex: none;
}
.orbit-feed-text { color: var(--ink-60); }
.orbit-note {
  margin: 12px 0 0; text-align: center; font-size: 11px; color: var(--ink-45);
}

/* Active signal and active loop stage, driven by the read-out. */
.orbit-chip { transition: border-color .5s ease, background .5s ease; }
.orbit-chip[data-on] {
  border-color: rgba(77, 148, 214, .55);
  background: rgba(29, 63, 99, .92);
}
.loop-step { transition: color .5s ease, border-color .5s ease; }
.loop-step[data-on] { color: var(--color-accent-200); border-color: rgba(77, 148, 214, .5); }
.orbit-core {
  position: absolute; left: 50%; top: 50%; width: 46%; height: 46%;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid rgba(77, 148, 214, .32);
  background: radial-gradient(circle, rgba(19, 39, 56, .94), rgba(13, 18, 30, .7));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 10px;
}
.orbit-core-kicker { font: 500 9.5px var(--font-heading); letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent-400); }
.orbit-core-score { font: 500 clamp(46px, 6.2vw, 66px) var(--font-heading); line-height: 1; letter-spacing: -.04em; color: #fff; margin-top: 8px; }
.orbit-core-label { font: 500 9.5px var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: rgba(233, 233, 237, .5); margin-top: 6px; }
.orbit-core-state {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
  font: 500 10px var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--ok);
}
.orbit-node { position: absolute; transform: translate(-50%, -50%); }
.orbit-node > div { animation: drift 11s ease-in-out infinite; }
.orbit-chip {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(233, 233, 237, .14); background: rgba(16, 22, 34, .88);
  backdrop-filter: blur(8px); border-radius: 999px; padding: 8px 15px; white-space: nowrap;
}
.orbit-chip .dot { background: var(--color-accent-400); animation: tick 2.6s ease-in-out infinite; }
.orbit-chip span:last-child { font: 500 12.5px var(--font-heading); letter-spacing: .02em; color: rgba(233, 233, 237, .86); }

.loop-steps {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center;
  margin: 22px auto 0; max-width: 520px;
}
.loop-step {
  font: 500 10px var(--font-heading); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(233, 233, 237, .56); animation: stepGlowText 9s ease-in-out infinite;
}
.loop-arrow { color: rgba(77, 148, 214, .4); font-size: 10px; }

.os-strip {
  display: flex; flex-wrap: wrap; margin-top: 56px;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.os-cell { flex: 1 1 0; min-width: 150px; padding: 22px 26px; border-left: 1px solid rgba(233, 233, 237, .08); }
.os-cell:last-child { border-right: 1px solid rgba(233, 233, 237, .08); }
.os-head { display: flex; align-items: center; gap: 10px; }
.os-head img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.os-head span { font: 500 15px var(--font-heading); color: #e9e9ed; }
.os-note { font-size: 12.5px; color: rgba(233, 233, 237, .56); margin-top: 4px; }
/* The iOS mark ships as dark artwork; invert it onto the dark ground. */
.icon-invert { filter: invert(1) brightness(1.9); }

/* ===========================================================================
   Market shift / mobile trust anchor
   =========================================================================== */
.shift-copy { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 48px; margin-top: 34px; max-width: 1020px; }
.shift-copy p { font-size: 17px; line-height: 1.65; color: var(--ink-60); margin: 0; }
.pullquote {
  margin-top: 34px; padding: 20px 24px;
  border-left: 1px solid var(--color-accent);
  background: linear-gradient(90deg, rgba(77, 148, 214, .10), transparent);
  font: 500 20px var(--font-heading); color: #fff; letter-spacing: -.01em;
}
.anchor-stage { position: relative; height: 480px; display: flex; align-items: center; justify-content: center; }
.anchor-ring { position: absolute; width: 330px; height: 330px; border-radius: 50%; border: 1px solid rgba(233, 233, 237, .10); animation: spinRev 60s linear infinite; }
.anchor-ring-outer { position: absolute; width: 440px; height: 440px; border-radius: 50%; border: 1px solid rgba(233, 233, 237, .06); }
.anchor-phone { position: relative; z-index: 2; transform: scale(.86); filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }
.anchor-tag {
  position: absolute; font-size: 12px; color: var(--ink-60);
  border: 1px solid var(--line-3); border-radius: 999px; padding: 5px 12px;
  background: rgba(21, 29, 44, .8);
}

/* ===========================================================================
   Category creation
   =========================================================================== */
.category { margin-top: 96px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(19, 42, 68, .32), transparent 60%); }
.evo { display: flex; align-items: center; gap: 14px; margin-top: 52px; flex-wrap: wrap; }
.evo-chip {
  font: 500 13px var(--font-heading); letter-spacing: .12em;
  color: rgba(233, 233, 237, .56);
  border: 1px solid rgba(233, 233, 237, .10); border-radius: 999px; padding: 9px 20px;
}
.evo-chip--now {
  color: #fff; border-color: var(--color-accent); background: rgba(77, 148, 214, .12);
  padding: 9px 22px; box-shadow: 0 0 34px rgba(77, 148, 214, .18);
}
.evo-arrow { color: rgba(233, 233, 237, .56); }
.evo-arrow--accent { color: var(--color-accent-500); }

.cmp { display: flex; flex-direction: column; padding: 32px 30px 36px; }
.cmp-list { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.cmp-row {
  border: 1px solid rgba(233, 233, 237, .10); border-radius: var(--radius-md);
  padding: 16px 20px; font: 500 15px var(--font-heading); color: rgba(233, 233, 237, .5);
}
.cmp-row--live { animation: stepGlow 8s ease-in-out infinite; font-weight: 400; color: inherit; }
/* Both columns carry a step plus its description, so the layout belongs to
   the row rather than to the animated variant. */
.cmp-row > div { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cmp-step { font: 500 15px var(--font-heading); letter-spacing: .02em; }
.cmp-desc { font-size: 12.5px; color: rgba(233, 233, 237, .56); line-height: 1.4; }
.cmp-loop {
  display: flex; align-items: center; gap: 10px; padding: 4px 20px 0;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(77, 148, 214, .55);
}
.cmp-loop span:first-child,
.cmp-loop span:last-child { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(77, 148, 214, .4), transparent); }
.cmp-foot { margin-top: auto; padding-top: 26px; font-size: 13px; color: var(--ink-38); }
.cmp-foot--accent { color: var(--color-accent-300); }

/* ===========================================================================
   Product family
   =========================================================================== */
.fam-card {
  display: flex; flex-direction: column; min-height: 372px;
  position: relative; overflow: hidden;
  border: 1px solid rgba(233, 233, 237, .10); border-radius: var(--radius-lg);
  padding: 32px 28px 26px; background: rgba(21, 29, 44, .45); color: inherit;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.fam-card:hover { border-color: rgba(77, 148, 214, .6); background: rgba(29, 63, 99, .3); transform: translateY(-4px); }
.fam-card--foundational { border-color: rgba(77, 148, 214, .32); background: linear-gradient(165deg, rgba(29, 63, 99, .42), rgba(21, 29, 44, .45)); }
.fam-edge { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--color-accent), transparent); }
.fam-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fam-num { font: 500 12px var(--font-heading); color: rgba(233, 233, 237, .56); }
.fam-name { font: 500 30px var(--font-heading); letter-spacing: -.02em; margin-top: 10px; color: #fff; }
.fam-sub { font-size: 14px; line-height: 1.4; color: var(--color-accent-300); margin-top: 6px; min-height: 40px; }
.fam-body { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-60); }
.fam-foot {
  margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(233, 233, 237, .08);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--ink-45);
}
.fam-foot span:last-child { color: var(--color-accent-300); white-space: nowrap; }

.together {
  margin-top: 24px; border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  padding: 44px 40px 40px; text-align: center;
  background: radial-gradient(700px 260px at 50% 0%, rgba(77, 148, 214, .16), transparent 70%), rgba(19, 42, 68, .18);
}
.together-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.together-chip {
  border: 1px solid rgba(233, 233, 237, .16); border-radius: 999px; padding: 9px 20px;
  font: 500 13px var(--font-heading); color: var(--ink-80); background: rgba(16, 22, 34, .7);
}
.together-plus { color: var(--color-accent-500); }
.together-stem { margin: 26px auto 0; width: 1px; height: 34px; background: linear-gradient(180deg, rgba(77, 148, 214, .7), transparent); }
.together-line { margin: 14px auto 0; max-width: 640px; font: 500 clamp(22px, 2.4vw, 28px) var(--font-heading); letter-spacing: -.015em; line-height: 1.25; color: #fff; }

/* ===========================================================================
   SAFE
   =========================================================================== */
.safe { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #0a0f18, #101a2a 55%, #0a0f18); }
.safe-glow { position: absolute; inset: 0; background: radial-gradient(760px 520px at 26% 50%, rgba(77, 148, 214, .22), transparent 70%); }
.safe-sweep { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(77, 148, 214, .6), transparent); animation: sweep 9s linear infinite; }
.safe-inner { position: relative; }
/* The seven axis labels are absolutely positioned against this box with small
   edge offsets, so the stage has to stay near its design width: let it fill a
   wide container and the labels strand at the far edges, let it shrink-wrap
   inside a flex parent and they pile up. Pin the width and centre it. */
.safe-stage {
  position: relative; height: 480px; display: flex; align-items: center; justify-content: center;
  /* 380 not 340: ENTERPRISE sits at left:-14px and SESSION at right:-6px, so
     the labels overhang the box they are positioned against and a tighter
     width clips them against the frame. */
  flex: none; width: 380px; max-width: 100%; margin-inline: auto;
}
.safe-orbit { position: absolute; width: 400px; height: 400px; border-radius: 50%; border: 1px solid rgba(77, 148, 214, .14); animation: spin 44s linear infinite; }
.safe-bloom { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(77, 148, 214, .16), transparent 65%); animation: breathe 6s ease-in-out infinite; }
.safe-dial { position: absolute; width: 300px; height: 300px; transform: rotate(-90deg); }
.safe-dial-value { transition: stroke-dashoffset 1.1s ease, stroke 1.1s ease; }
.safe-readout { position: relative; text-align: center; z-index: 2; }
.safe-name { font: 500 11px var(--font-heading); letter-spacing: .24em; text-transform: uppercase; color: rgba(233, 233, 237, .5); }
.safe-score { font: 500 84px var(--font-heading); line-height: 1; letter-spacing: -.045em; color: #fff; margin-top: 6px; }
.safe-state { margin-top: 10px; font: 500 11.5px var(--font-heading); letter-spacing: .2em; text-transform: uppercase; }
.safe-axis { position: absolute; font: 500 10.5px var(--font-heading); letter-spacing: .16em; color: rgba(233, 233, 237, .56); }
.safe-log { margin-top: 36px; border: 1px solid rgba(233, 233, 237, .10); border-radius: var(--radius-lg); background: rgba(13, 18, 30, .6); padding: 8px 0; max-width: 520px; }
.safe-log-head { padding: 11px 22px; border-bottom: 1px solid var(--line); }
.safe-log-row { display: flex; align-items: center; gap: 14px; padding: 11px 22px; font-size: 14px; color: rgba(233, 233, 237, .72); }
.safe-log-row .dot { width: 7px; height: 7px; }
.safe-log-row span:nth-child(2) { flex: 1; }
.safe-log-row span:last-child { font: 500 12.5px var(--font-heading); }

/* ===========================================================================
   Autonomous response
   =========================================================================== */
.resp-card { border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 30px 32px 12px; background: linear-gradient(180deg, rgba(19, 42, 68, .34), rgba(21, 29, 44, .4)); }
.resp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.resp-running { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--color-accent-300); }
.resp-running .dot { background: var(--color-accent-400); animation: tick 1.8s ease-in-out infinite; }
.resp-step { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 18px; align-items: start; }
.resp-marker { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.resp-node {
  width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 5px;
  border: 2px solid rgba(233, 233, 237, .22); background: transparent;
  transition: border-color .6s ease, background .6s ease;
}
.resp-line { flex: 1; width: 1px; min-height: 26px; background: linear-gradient(180deg, rgba(233, 233, 237, .22), rgba(233, 233, 237, .08)); transition: background .6s ease; }
.resp-body { padding-bottom: 26px; }
.resp-meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.resp-phase { font: 500 11px var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: rgba(233, 233, 237, .22); transition: color .6s ease; }
.resp-cadence { font-size: 11.5px; color: rgba(233, 233, 237, .3); }
.resp-text { font: 500 17px var(--font-heading); line-height: 1.35; color: rgba(233, 233, 237, .38); margin-top: 8px; transition: color .6s ease; max-width: 420px; }

.resp-step[data-state="done"] .resp-node { border-color: var(--ok); background: rgba(95, 191, 155, .45); }
.resp-step[data-state="done"] .resp-line { background: linear-gradient(180deg, var(--ok), rgba(233, 233, 237, .08)); }
.resp-step[data-state="done"] .resp-phase { color: var(--ok); }
.resp-step[data-state="done"] .resp-text { color: rgba(233, 233, 237, .72); }
.resp-step[data-state="live"] .resp-node { border-color: var(--color-accent); background: rgba(77, 148, 214, .5); }
.resp-step[data-state="live"] .resp-line { background: linear-gradient(180deg, var(--color-accent), rgba(233, 233, 237, .08)); }
.resp-step[data-state="live"] .resp-phase { color: var(--color-accent); }
.resp-step[data-state="live"] .resp-text { color: #fff; }

.act-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px,1fr)); gap: 14px; margin-top: 20px; }
.act-card { border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 24px 24px 26px; background: rgba(21, 29, 44, .42); }
.act-title { font: 500 17px var(--font-heading); color: #fff; }
.act-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { border: 1px solid var(--line-3); border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--ink-60); }
.resp-closer {
  margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line-2);
  font: 500 clamp(24px, 2.8vw, 32px) var(--font-heading); letter-spacing: -.02em; color: #fff;
}
.resp-closer span { color: rgba(233, 233, 237, .42); }

/* ===========================================================================
   ADM
   =========================================================================== */
.adm { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(19, 42, 68, .28), transparent 70%); }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px,1fr)); gap: 26px; margin-top: 52px; }
.adm-card { border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 32px 32px 36px; background: rgba(21, 29, 44, .35); }
.adm-card--accent { border-color: rgba(77, 148, 214, .3); background: linear-gradient(160deg, rgba(29, 63, 99, .4), rgba(21, 29, 44, .35)); }
.adm-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: rgba(233, 233, 237, .55); }
.adm-list--two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; color: rgba(233, 233, 237, .85); }
.adm-flow { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(233, 233, 237, .08); font-size: 12.5px; color: var(--ink-38); letter-spacing: .04em; }
.adm-flow--accent { border-top-color: rgba(77, 148, 214, .2); color: var(--color-accent-300); }
.adm-closer { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.adm-closer > div { font: 500 28px var(--font-heading); letter-spacing: -.02em; color: #fff; }

/* ===========================================================================
   Cross-platform
   =========================================================================== */
.plat-tabs { display: flex; gap: 26px; border-bottom: 1px solid rgba(233, 233, 237, .10); flex-wrap: wrap; }
.plat-tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: rgba(233, 233, 237, .5);
  font: 500 14px var(--font-heading); letter-spacing: .02em;
  padding: 12px 4px; cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
  display: inline-flex; align-items: center; gap: 9px;
}
.plat-tab:hover { color: #e9e9ed; }
.plat-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--color-accent); }
.plat-tab img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.plat-title { font: 500 clamp(26px, 2.6vw, 32px) var(--font-heading); letter-spacing: -.02em; color: #fff; margin-top: 10px; }
.plat-body { margin: 14px 0 0; max-width: 440px; font-size: 16px; line-height: 1.62; color: var(--ink-60); }
.plat-points { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; max-width: 440px; }
.plat-point { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.plat-point .dot { background: var(--color-accent-400); margin-top: 7px; }
.plat-point span:last-child { font-size: 15px; line-height: 1.5; color: rgba(233, 233, 237, .75); }
.plat-stats { display: flex; gap: 28px; margin-top: 26px; }
.plat-stat-value { font: 500 24px var(--font-heading); color: #fff; }
.plat-stat-value--accent { color: var(--color-accent-300); }
.plat-stat-label { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(233, 233, 237, .4); margin-top: 4px; }
.plat-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 520px; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(620px 400px at 50% 40%, rgba(77, 148, 214, .16), transparent 70%);
  border: 1px solid var(--line);
}
.plat-stage .grid-overlay {
  background-size: 64px 64px;
  mask-image: radial-gradient(420px 300px at 50% 45%, #000, transparent 78%);
}
.plat-surface { position: relative; }
.plat-surface[hidden] { display: none; }
.plat-surface--desktop { width: 100%; padding: 32px 28px; }
.plat-surface--phone { padding: 34px 0; transform: scale(.94); }

/* ===========================================================================
   Device mocks — phone
   =========================================================================== */
@keyframes phTick { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes phBreathe { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
@keyframes phSpin { to { transform: rotate(360deg); } }
@keyframes phSweep {
  0% { transform: translateY(-30px); opacity: 0; }
  20% { opacity: .5; }
  100% { transform: translateY(560px); opacity: 0; }
}

.phone {
  /* Trust tone. JS re-points these per state; the defaults are the "trusted"
     state so the mock renders correctly before (or without) script. */
  --tone: var(--ok);
  --tone-glow: rgba(95, 191, 155, .20);
  width: 296px; height: 604px; border-radius: 42px; padding: 9px;
  background: linear-gradient(160deg, #2c3444, #0f131c 45%, #232b39);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(233, 233, 237, .09);
}
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #0b1017; font-family: var(--font-body); }
.phone-glow { position: absolute; inset: 0; background: radial-gradient(300px 260px at 50% 26%, var(--tone-glow), transparent 70%); }
.phone-scan { position: absolute; inset: 0; background-image: linear-gradient(rgba(233, 233, 237, .03) 1px, transparent 1px); background-size: 100% 46px; }
.phone-sweep { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--tone), transparent); animation: phSweep 7s linear infinite; z-index: 1; }
.phone-status {
  position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
  font: 500 11.5px var(--font-heading); color: rgba(233, 233, 237, .85);
}
.phone-bars { display: flex; align-items: center; gap: 4px; }
.phone-bars i { display: block; width: 3px; border-radius: 1px; background: rgba(233, 233, 237, .75); }
.phone-bars i:nth-child(1) { height: 7px; }
.phone-bars i:nth-child(2) { height: 9px; }
.phone-bars i:nth-child(3) { height: 11px; }
.phone-battery { width: 16px; height: 8px; border: 1px solid rgba(233, 233, 237, .6); border-radius: 2px; margin-left: 4px; position: relative; }
.phone-battery i { position: absolute; inset: 1.5px; right: 5px; background: rgba(233, 233, 237, .75); border-radius: 1px; }
.phone-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 86px; height: 22px; border-radius: 14px; background: #05080d; z-index: 4; }
.phone-punch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; background: #05080d; box-shadow: 0 0 0 1px rgba(233, 233, 237, .12); z-index: 4; }
.phone[data-platform="android"] .phone-notch,
.phone[data-platform="ios"] .phone-punch { display: none; }
.phone-app { position: relative; z-index: 2; padding: 44px 18px 0; height: 100%; display: flex; flex-direction: column; }
.phone-appbar { display: flex; align-items: center; justify-content: space-between; }
.phone-appbar img { height: 13px; width: auto; opacity: .92; }
.phone-avatar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(233, 233, 237, .2); background: linear-gradient(150deg, #2b3a4d, #151d2c); }
.phone-dial { position: relative; margin: 18px auto 0; width: 168px; height: 168px; display: flex; align-items: center; justify-content: center; }
.phone-dial-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--tone-glow), transparent 68%); animation: phBreathe 5s ease-in-out infinite; }
.phone-ticks { position: absolute; width: 236px; height: 236px; left: -34px; top: -34px; opacity: .65; }
.phone-ticks circle { animation: phSpin 44s linear infinite; transform-origin: 120px 120px; }
.phone-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.phone-ring-value { transition: stroke-dashoffset .9s ease, stroke .9s ease; }
.phone-score { font: 500 46px var(--font-heading); line-height: 1; letter-spacing: -.04em; color: #fff; }
.phone-state { margin-top: 5px; font: 500 9.5px var(--font-heading); letter-spacing: .2em; text-transform: uppercase; }
.phone-caption { text-align: center; margin-top: 12px; font-size: 12px; line-height: 1.45; color: rgba(233, 233, 237, .55); padding: 0 12px; }
.phone-sectionhead { display: flex; justify-content: space-between; align-items: center; font: 500 9.5px var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: rgba(233, 233, 237, .4); }
.phone-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.phone-tile { border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 12px; background: rgba(21, 29, 44, .66); }
.phone-tile-name { font: 500 11.5px var(--font-heading); color: #e9e9ed; }
.phone-tile-value { margin-top: 4px; font-size: 10.5px; color: var(--ok); }
.phone-activity {
  margin-top: 14px; border: 1px solid rgba(77, 148, 214, .24); border-radius: 12px;
  padding: 11px 13px; background: linear-gradient(120deg, rgba(29, 63, 99, .5), rgba(21, 29, 44, .6));
  display: flex; align-items: center; gap: 10px;
}
.phone-activity .dot { width: 7px; height: 7px; animation: phTick 2s ease-in-out infinite; }
.phone-activity span:last-child { font-size: 11.5px; color: var(--ink-80); line-height: 1.35; }
.phone-tabbar { margin-top: auto; display: flex; align-items: center; justify-content: space-around; padding: 12px 0 20px; border-top: 1px solid var(--line); }
.phone-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.phone-tab i { display: block; width: 15px; height: 15px; border: 1.5px solid rgba(233, 233, 237, .35); border-radius: 4px; }
.phone-tab span { font-size: 8.5px; letter-spacing: .08em; color: rgba(233, 233, 237, .35); }
.phone-tab--on i { border-color: var(--color-accent-400); }
.phone-tab--on span { color: var(--color-accent-400); }
.phone-tab--round i { border-radius: 50%; }
.phone-tab--shield i { border-radius: 4px 4px 8px 8px; }
.phone-tab--square i { border-radius: 2px; }

/* ── Device mocks — desktop ────────────────────────────────────────────── */
@keyframes dtTick { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.desktop {
  width: 100%; max-width: 760px; border-radius: 14px; overflow: hidden; background: #0b1017;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .62), 0 0 0 1px rgba(233, 233, 237, .10);
  font-family: var(--font-body);
}
.desktop-chrome { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: rgba(21, 29, 44, .85); border-bottom: 1px solid rgba(233, 233, 237, .08); }
.desktop-lights { display: flex; gap: 7px; }
.desktop-lights i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #3f4552; }
.desktop-chrome img { height: 14px; width: auto; margin-left: 6px; opacity: .9; }
.desktop-app { font: 500 11.5px var(--font-heading); letter-spacing: .12em; text-transform: uppercase; color: rgba(233, 233, 237, .55); }
.desktop-note { margin-left: auto; font-size: 11px; color: rgba(233, 233, 237, .4); }
.desktop-wincontrols { display: flex; align-items: center; gap: 16px; margin-left: 16px; color: var(--ink-45); }
.desktop-wincontrols i:nth-child(1) { display: block; width: 11px; height: 1px; background: currentColor; }
.desktop-wincontrols i:nth-child(2) { display: block; width: 9px; height: 9px; border: 1px solid currentColor; }
.desktop-close { position: relative; width: 11px; height: 11px; }
.desktop-close i { position: absolute; top: 5px; left: 0; width: 13px; height: 1px; background: currentColor; }
.desktop-close i:first-child { transform: rotate(45deg); }
.desktop-close i:last-child { transform: rotate(-45deg); }
.desktop[data-platform="windows"] .desktop-lights,
.desktop[data-platform="macos"] .desktop-wincontrols { display: none; }
.desktop-body { display: grid; grid-template-columns: 64px minmax(0,1fr); }
.desktop-rail { border-right: 1px solid var(--line); padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.desktop-rail i { display: block; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-3); }
.desktop-rail i:first-child { background: rgba(77, 148, 214, .18); border-color: rgba(77, 148, 214, .45); }
.desktop-main { position: relative; padding: 24px 26px 26px; background: radial-gradient(520px 300px at 22% 10%, rgba(77, 148, 214, .14), transparent 70%); }
.desktop-top { display: flex; align-items: flex-start; gap: 22px; }
.desktop-headline { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.desktop-headline .dot { width: 10px; height: 10px; background: var(--ok); animation: dtTick 2.4s ease-in-out infinite; }
.desktop-headline span:last-child { font: 500 38px var(--font-heading); letter-spacing: -.025em; color: #fff; }
.desktop-caption { margin-top: 8px; font-size: 14px; color: rgba(233, 233, 237, .58); max-width: 340px; line-height: 1.5; }
.desktop-dial { position: relative; width: 118px; height: 118px; flex: none; display: flex; align-items: center; justify-content: center; }
.desktop-dial svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.desktop-dial-score { font: 500 30px var(--font-heading); line-height: 1; color: #fff; }
.desktop-dial-label { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); margin-top: 4px; }
.desktop-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 22px; }
.desktop-stat { border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 16px; background: rgba(21, 29, 44, .6); }
.desktop-stat-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(233, 233, 237, .4); }
.desktop-stat-value { font: 500 17px var(--font-heading); color: #fff; margin-top: 6px; }
.desktop-stat-value--accent { color: var(--color-accent-300); }
.desktop-activity { margin-top: 18px; border: 1px solid rgba(233, 233, 237, .08); border-radius: 10px; padding: 16px 18px 18px; background: rgba(21, 29, 44, .45); }
.desktop-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, transparent, rgba(11, 16, 23, .85)); pointer-events: none; }

/* Blurred "there is more here" placeholder rows, shared by desktop + portal. */
.ghost-rows { display: flex; flex-direction: column; }
.ghost-row { display: flex; align-items: center; }
.ghost-row i { display: block; border-radius: 3px; background: rgba(233, 233, 237, .16); height: 7px; }
.ghost-rows--desktop { margin-top: 14px; filter: blur(3.5px); opacity: .5; gap: 11px; }
.ghost-rows--desktop .ghost-row { gap: 12px; }
.ghost-rows--portal { margin-top: 14px; filter: blur(4px); opacity: .42; gap: 12px; }
.ghost-rows--portal .ghost-row { gap: 14px; }
.ghost-rows--portal .ghost-row i { height: 8px; border-radius: 4px; }
.ghost-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ghost-rows--portal .ghost-dot { width: 8px; height: 8px; }
.ghost-lead { background: rgba(233, 233, 237, .34) !important; }
.ghost-dim { background: rgba(233, 233, 237, .12) !important; }
.ghost-end { margin-left: auto; }

/* ── Device mocks — portal ─────────────────────────────────────────────── */
@keyframes ptTick { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes ptHalo { 0% { transform: scale(.7); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes ptDash { to { stroke-dashoffset: -320; } }
@keyframes ptDraw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@keyframes ptFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ptBar { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.portal {
  width: 100%; max-width: 1120px; border-radius: 14px; overflow: hidden; background: #0a0f18;
  box-shadow: 0 50px 110px rgba(0, 0, 0, .65), 0 0 0 1px rgba(233, 233, 237, .11);
  font-family: var(--font-body);
}
.portal-chrome { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: rgba(21, 29, 44, .8); border-bottom: 1px solid rgba(233, 233, 237, .08); }
.portal-chrome img { height: 16px; width: auto; opacity: .92; }
.portal-name { font: 500 11.5px var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); }
.portal-scope { margin-left: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(233, 233, 237, .42); }
.portal-scope i { font-style: normal; border: 1px solid var(--line-3); border-radius: 6px; padding: 4px 10px; }
.portal-live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ok); }
.portal-live .dot { background: var(--ok); animation: ptTick 2s ease-in-out infinite; }
.portal-body { display: grid; grid-template-columns: 70px minmax(0,1fr); }
.portal-rail { border-right: 1px solid var(--line); padding: 18px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; background: rgba(21, 29, 44, .35); }
.portal-rail i { display: block; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(233, 233, 237, .11); }
.portal-rail i:first-child { background: rgba(77, 148, 214, .2); border-color: rgba(77, 148, 214, .5); }
.portal-main { padding: 24px 26px 28px; background: radial-gradient(720px 380px at 18% 0%, rgba(77, 148, 214, .14), transparent 72%); }
.portal-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.portal-title { font: 500 26px var(--font-heading); letter-spacing: -.02em; color: #fff; margin-top: 6px; }
.portal-range { display: flex; gap: 8px; }
.portal-range span { border: 1px solid var(--line-3); border-radius: 7px; padding: 7px 14px; font-size: 11.5px; color: rgba(233, 233, 237, .55); }
.portal-range span.is-live { border-color: rgba(77, 148, 214, .4); color: var(--color-accent-300); }
.portal-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 12px; margin-top: 20px; }
.portal-kpi { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 11px; padding: 18px 20px 16px; background: rgba(21, 29, 44, .55); }
.portal-kpi--hero { border-color: rgba(77, 148, 214, .34); background: linear-gradient(155deg, rgba(29, 63, 99, .5), rgba(21, 29, 44, .55)); }
.portal-kpi-label { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-kpi-value { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
.portal-kpi-value > span:first-child { font: 500 clamp(30px, 3.6vw, 44px) var(--font-heading); line-height: .95; letter-spacing: -.035em; }
.portal-kpi-value > span:last-child { font: 500 14px var(--font-heading); opacity: .6; }
.portal-kpi-delta { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.portal-kpi-delta > span:first-child { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 9px; font: 500 11px var(--font-heading); }
.portal-kpi-delta > span:last-child { font-size: 11px; color: rgba(233, 233, 237, .36); }
.delta-ok { border: 1px solid rgba(95, 191, 155, .2); background: rgba(95, 191, 155, .1); color: var(--ok); }
.delta-blue { border: 1px solid rgba(121, 176, 228, .2); background: rgba(121, 176, 228, .1); color: #79b0e4; }
.portal-spark { width: 100%; height: 26px; margin-top: 14px; }
.portal-panel { border: 1px solid var(--line-2); border-radius: 11px; padding: 18px 20px; background: rgba(21, 29, 44, .5); }
.portal-panel-head { display: flex; justify-content: space-between; align-items: center; }
.portal-panel-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(233, 233, 237, .42); }
.portal-panel-note { font-size: 10.5px; color: rgba(233, 233, 237, .3); }
.portal-row-2 { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 12px; margin-top: 12px; }
.portal-row-3 { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) minmax(0,.85fr); gap: 12px; margin-top: 12px; }
.portal-row-4 { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 12px; margin-top: 12px; }
.portal-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: rgba(233, 233, 237, .7); }
.portal-legend span { display: flex; align-items: center; gap: 8px; }
.portal-legend i { display: block; width: 8px; height: 8px; border-radius: 2px; }
.portal-gauge-value { font: 500 30px var(--font-heading); line-height: 1; color: #fff; }
.portal-gauge-note { font-size: 11px; color: var(--warn); margin-top: 5px; }
.portal-compliance { font: 500 26px var(--font-heading); color: #fff; margin-top: 8px; }
.portal-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 12px; }
.portal-bars i { flex: 1; border-radius: 2px; animation: ptBar 3s ease-in-out infinite; }
.portal-ops { margin-top: 14px; display: flex; flex-direction: column; gap: 11px; font-size: 12px; color: rgba(233, 233, 237, .72); }
.portal-op-head { display: flex; justify-content: space-between; }
.portal-op-track { height: 5px; border-radius: 3px; background: rgba(233, 233, 237, .08); margin-top: 5px; }
.portal-op-track i { display: block; height: 100%; border-radius: 3px; }
.portal-detail { position: relative; margin-top: 12px; border: 1px solid rgba(233, 233, 237, .08); border-radius: 11px; padding: 16px 20px 18px; background: rgba(21, 29, 44, .4); }
.portal-detail-veil { position: absolute; inset: 0; border-radius: 11px; background: linear-gradient(180deg, transparent, rgba(10, 15, 24, .9)); }

/* ===========================================================================
   Command center
   =========================================================================== */
.command { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #0b111c, #0d121e); }
.command-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.command-head .lede { max-width: 640px; margin-top: 20px; }
.portalwrap { position: relative; margin-top: 52px; border-radius: var(--radius-lg); overflow: hidden; display: flex; justify-content: center; padding-top: 8px; }
.portalwrap > div:first-child { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.portalwrap-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, transparent, var(--color-bg)); pointer-events: none; }
.command-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.command-chip { border: 1px solid var(--line-3); border-radius: 999px; padding: 7px 15px; font-size: 13px; color: rgba(233, 233, 237, .66); background: rgba(21, 29, 44, .5); }
.command-note { margin-top: 14px; font-size: 12px; color: rgba(233, 233, 237, .56); }

/* ===========================================================================
   Integrations · industries
   =========================================================================== */
.intg-card { border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 26px 24px 28px; background: rgba(21, 29, 44, .35); transition: border-color .3s ease, transform .3s ease; }
.intg-card:hover { border-color: rgba(77, 148, 214, .45); transform: translateY(-3px); }
.intg-list { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; color: rgba(233, 233, 237, .72); }

.ind-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1px;
  margin-top: 44px; background: rgba(233, 233, 237, .08);
  border: 1px solid rgba(233, 233, 237, .08); border-radius: var(--radius-lg); overflow: hidden;
}
.ind-cell { background: var(--color-bg); padding: 30px 28px 34px; transition: background .3s ease; }
.ind-cell:hover { background: rgba(29, 63, 99, .22); }
/* The grid clips to a rounded box and its cells are inset by the 1px gap, so
   a focus ring drawn outside the border box lands in the clipped region or
   under the neighbouring cell's opaque background — invisible either way.
   Drawing it inside keeps these seven links keyboard-navigable. */
.ind-cell--link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ind-cell--cta { background: linear-gradient(150deg, rgba(29, 63, 99, .4), var(--color-bg)); display: flex; align-items: flex-end; }
.ind-cell--cta a { font: 500 15px var(--font-heading); color: var(--color-accent-300); }
.ind-name { font: 500 19px var(--font-heading); color: #fff; }
.ind-body { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(233, 233, 237, .55); }

/* ===========================================================================
   Final CTA
   =========================================================================== */
.future { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: linear-gradient(180deg, #0a0f18, #0f1b2b); }
.future-glow { position: absolute; inset: 0; background: radial-gradient(900px 520px at 50% 110%, rgba(77, 148, 214, .28), transparent 70%); }
.future .grid-overlay { background-size: 70px 70px; mask-image: radial-gradient(700px 400px at 50% 60%, #000, transparent 75%); }
.future-copy { margin: 26px auto 0; max-width: 560px; font-size: 17.5px; line-height: 1.65; color: var(--ink-60); }
.future-mark { height: 26px; width: auto; margin: 64px auto 0; opacity: .75; }

/* ===========================================================================
   Contact
   =========================================================================== */
.contact-form { margin-top: 34px; max-width: 560px; }
.contact-form[hidden] { display: none; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 16px; }
.field-label { display: flex; flex-direction: column; gap: 7px; }
.field-label + .field-label--wide,
.field-label--wide { margin-top: 16px; }
.field-name {
  font: 500 10.5px var(--font-heading); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-45);
}
.field-optional { text-transform: none; letter-spacing: 0; color: rgba(233, 233, 237, .56); }
.field-input {
  background: rgba(13, 18, 30, .7); border: 1px solid rgba(233, 233, 237, .14);
  border-radius: var(--radius-md); padding: 12px 14px;
  font: 400 15px var(--font-body); color: #e9e9ed; outline: none;
  transition: border-color .25s ease;
}
.field-input:focus { border-color: var(--color-accent); }
textarea.field-input { resize: vertical; }
.form-actions { display: flex; align-items: center; gap: 18px; margin-top: 24px; flex-wrap: wrap; }
.form-note { font-size: 12.5px; color: var(--ink-38); max-width: 280px; line-height: 1.5; }

.thanks {
  margin-top: 34px; max-width: 560px;
  border: 1px solid rgba(77, 148, 214, .32); border-radius: var(--radius-lg);
  padding: 30px 32px;
  background: linear-gradient(150deg, rgba(29, 63, 99, .4), rgba(21, 29, 44, .45));
}
.thanks[hidden] { display: none; }
.thanks-flag { display: flex; align-items: center; gap: 10px; }
.thanks-flag .dot { width: 8px; height: 8px; background: var(--ok); animation: tick 2s ease-in-out infinite; }
.thanks-flag span:last-child { font: 500 10.5px var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: var(--ok); }
.thanks-title { font: 500 24px var(--font-heading); letter-spacing: -.015em; color: #fff; margin-top: 14px; }
.thanks-body { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-60); }

.contact-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.contact-card {
  display: block; border: 1px solid rgba(233, 233, 237, .10); border-radius: var(--radius-lg);
  padding: 22px 24px; background: rgba(21, 29, 44, .4); color: inherit;
  transition: border-color .25s ease, background .25s ease;
}
.contact-card:hover { border-color: rgba(77, 148, 214, .5); background: rgba(29, 63, 99, .24); color: inherit; }
.contact-address { font: 500 17px var(--font-heading); color: #fff; margin-top: 9px; }
.contact-desc { font-size: 13.5px; color: rgba(233, 233, 237, .5); margin-top: 6px; line-height: 1.5; }

/* ===========================================================================
   Footer
   =========================================================================== */
.site-footer { border-top: 1px solid rgba(233, 233, 237, .08); background: #0a0e17; font-family: var(--font-body); }
.g-foot { display: grid; grid-template-columns: 1.4fr repeat(5, minmax(0,1fr)); gap: 40px; max-width: 1320px; margin: 0 auto; padding: 64px 48px 34px; }
.foot-mark { height: 26px; width: auto; }
.foot-line { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink-45); max-width: 250px; }
.foot-social { display: flex; gap: 10px; margin-top: 22px; }
.foot-social a {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid rgba(233, 233, 237, .14); border-radius: var(--radius-md);
  color: var(--ink-60); transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.foot-social a:hover { border-color: var(--color-accent); color: #fff; background: rgba(77, 148, 214, .12); }
.ftcol-head { font: 500 11px var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: rgba(233, 233, 237, .56); padding-bottom: 8px; }
.ftcol a { display: block; font-size: 13.5px; color: var(--ink-60); padding: 4px 0; }
.ftcol a:hover { color: var(--color-accent-200); }
.ftbar {
  max-width: 1320px; margin: 0 auto; padding: 22px 48px 40px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(233, 233, 237, .56);
}
.ftbar span { display: flex; gap: 18px; flex-wrap: wrap; }
.ftbar a { color: rgba(233, 233, 237, .56); }
.ftbar a:hover { color: var(--color-accent-200); }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 1240px) {
  .g-mega { grid-template-columns: 200px minmax(0,1fr); gap: 32px; }
  .mega-cta { display: none; }
}
@media (max-width: 1180px) {
  .g-hero, .g-split, .g-safe { grid-template-columns: minmax(0,1fr); gap: 48px; }
  .g-safe > *:first-child { order: 2; }
  .g-family { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-foot { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
  .navlinks { display: none; }
  .navtoggle { display: flex; }
  .megamenu { display: none !important; }
  .orbit-chip { font-size: 11px; }
}
@media (max-width: 1060px) {
  .g-resp, .g-contact, .g-plat { grid-template-columns: minmax(0,1fr); }
  .g-resp { gap: 28px; }
  .g-contact { gap: 40px; }
  .g-plat { gap: 36px; }
}
@media (max-width: 820px) {
  .sec { padding-left: 24px; padding-right: 24px; }
  .header-bar, .g-foot, .ftbar { padding-left: 24px; padding-right: 24px; }
  .g-foot { grid-template-columns: repeat(2, minmax(0,1fr)); }
  h1 { font-size: 44px; }
  h2 { font-size: 34px; }
  .portal-row-2, .portal-row-3, .portal-row-4 { grid-template-columns: minmax(0,1fr); }
}
/* Phones. The source design stops at 820px, so everything below is additive:
   the fixed-size decorative rings and the device mocks are sized down to fit,
   and chrome that has a home in the drawer is dropped from the header. */
@media (max-width: 620px) {
  .g-family { grid-template-columns: minmax(0,1fr); }
  .desktop-stats { grid-template-columns: minmax(0,1fr); }
  .adm-list--two { grid-template-columns: minmax(0,1fr); }

  /* Header — the login link lives in the drawer at this width. */
  .header-bar { height: 72px; gap: 12px; }
  .header-logo img { height: 26px; }
  .header-login, .header-sep { display: none; }
  .header-demo { padding: 9px 13px; font-size: 11px; letter-spacing: .06em; }
  .navtoggle { width: 38px; height: 38px; }

  .hero-badge { font-size: 10px; letter-spacing: .14em; }
  .orbit-chip { padding: 6px 11px; gap: 6px; }
  .orbit-chip span:last-child { font-size: 11px; }
  .os-cell { min-width: 128px; padding: 18px 20px; }

  /* Decorative rings are fixed-size; scale them to the column. */
  .anchor-stage, .safe-stage { height: 420px; }
  .anchor-ring { width: 240px; height: 240px; }
  .anchor-ring-outer { width: 310px; height: 310px; }
  .anchor-phone { transform: scale(.74); }
  .anchor-tag, .safe-axis { display: none; }
  .safe-orbit, .safe-bloom { width: 300px; height: 300px; }
  .safe-dial { width: 240px; height: 240px; }
  .safe-score { font-size: 68px; }

  /* Device mocks: let the header wrap and the summary stack. */
  .desktop-body { grid-template-columns: 44px minmax(0,1fr); }
  .desktop-rail { gap: 10px; }
  .desktop-rail i { width: 22px; height: 22px; }
  .desktop-main { padding: 20px 18px; }
  .desktop-top { flex-direction: column; gap: 14px; }
  .desktop-headline span:last-child { font-size: 30px; }
  .portal-chrome { flex-wrap: wrap; gap: 10px; }
  .portal-scope { display: none; }
  .portal-live { margin-left: 0; }
  .portal-body { grid-template-columns: minmax(0,1fr); }
  .portal-rail { display: none; }
  .portal-main { padding: 18px 16px 20px; }
}

/* ===========================================================================
   PAGE SYSTEM
   Blocks shared by the ~35 inner pages. Everything above this line is the
   home page and the global chrome it introduced.
   =========================================================================== */

/* ── Accessibility ─────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-surface); color: var(--color-accent-200);
  padding: 12px 18px; border: 1px solid var(--color-accent); border-radius: 0 0 var(--radius-md) 0;
  font: 500 14px var(--font-heading);
}
.skip-link:focus { left: 0; }

/* ── Header additions ──────────────────────────────────────────────────── */
.site-header { transition: background .3s ease, border-color .3s ease; }
.site-header.is-scrolled { background: rgba(10, 14, 23, .92); border-bottom-color: rgba(233, 233, 237, .12); }
.navgroup { position: static; }
.navtrigger {
  position: relative; background: none; border: 0; cursor: pointer;
  color: rgba(233, 233, 237, .72); text-decoration: none;
  font: 500 13px var(--font-heading); letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 15px; border-radius: 7px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .25s ease, background .25s ease;
}
.navtrigger:hover, .navtrigger[aria-current="true"] { background: rgba(77, 148, 214, .10); color: #fff; }
.megamenu { position: absolute; left: 0; right: 0; top: 100%; }
.mega-head { display: flex; align-items: center; gap: 9px; }
.drawer-group + .drawer-group { margin-top: 4px; }

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.crumbs { border-bottom: 1px solid var(--line); background: rgba(10, 14, 23, .5); }
.sec--crumbs {
  max-width: 1320px; margin: 0 auto; padding: 14px 48px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(233, 233, 237, .56);
}
.crumbs a { color: rgba(233, 233, 237, .55); }
.crumbs a:hover { color: var(--color-accent-200); }
.crumb-sep { color: rgba(233, 233, 237, .56); }
.crumbs [aria-current="page"] { color: var(--color-accent-300); }

/* ── Page hero ─────────────────────────────────────────────────────────── */
.page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(900px 520px at 22% 0%, rgba(45, 110, 168, .26), transparent 66%),
              radial-gradient(700px 460px at 88% 60%, rgba(30, 63, 95, .26), transparent 70%);
}
.page-hero-grid { background-size: 88px 88px; mask-image: radial-gradient(760px 420px at 30% 30%, #000, transparent 78%); }
.page-hero-inner { position: relative; padding-top: 70px; padding-bottom: 70px; }
.page-h1 {
  margin: 22px 0 0; font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.06; letter-spacing: -.03em;
}
.page-lede { margin: 24px 0 0; max-width: 640px; font-size: 18px; line-height: 1.62; color: rgba(233, 233, 237, .64); }

/* ── Bands ─────────────────────────────────────────────────────────────── */
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band--top { background: linear-gradient(180deg, rgba(19, 42, 68, .32), transparent 60%); }
.band--flat { background: linear-gradient(180deg, #0b111c, #0d121e); }
.band--default { background: rgba(21, 29, 44, .18); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card-grid { display: grid; gap: 20px; margin-top: 44px; }
.card-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feat-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  padding: 28px 26px 30px; background: rgba(21, 29, 44, .38);
  color: inherit; transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.feat-card--link:hover { border-color: rgba(77, 148, 214, .5); background: rgba(29, 63, 99, .26); transform: translateY(-3px); color: inherit; }
.feat-title { font: 500 20px var(--font-heading); letter-spacing: -.01em; color: #fff; margin-top: 12px; }
.feat-card > .feat-title:first-child { margin-top: 0; }
.feat-body { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-60); }
.feat-points { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.feat-points li {
  position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5;
  color: rgba(233, 233, 237, .7);
}
.feat-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-400);
}
.feat-more {
  margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 13px; color: var(--color-accent-300);
}
/* The arrow leans into the direction of travel on hover. The card already
   lifts; this is the one detail that says the whole card is the target. */
.feat-more > span:last-child { transition: transform .3s cubic-bezier(.22, .7, .24, 1); }
.feat-card--link:hover .feat-more > span:last-child,
.feat-card--link:focus-visible .feat-more > span:last-child { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .feat-card--link:hover .feat-more > span:last-child,
  .feat-card--link:focus-visible .feat-more > span:last-child { transform: none; }
}

/* ── Loop ──────────────────────────────────────────────────────────────── */
/* Three across, two rows: the loop carries six stages, and at four columns
   the last two orphaned onto a second row. */
.loop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.loop-card {
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  padding: 26px 24px 28px; background: linear-gradient(180deg, rgba(19, 42, 68, .34), rgba(21, 29, 44, .38));
}
.loop-index { font: 500 12px var(--font-heading); letter-spacing: .16em; color: var(--color-accent-400); }
.loop-name { font: 500 21px var(--font-heading); letter-spacing: -.015em; color: #fff; margin-top: 12px; }
.loop-desc { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-60); }
.loop-rail {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(77, 148, 214, .55);
}
.loop-rail > span:first-child, .loop-rail > span:last-child {
  flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(77, 148, 214, .4), transparent);
}

/* ── Signals ───────────────────────────────────────────────────────────── */
.signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; margin-top: 44px;
  background: rgba(233, 233, 237, .08); border: 1px solid rgba(233, 233, 237, .08); border-radius: var(--radius-lg); overflow: hidden; }
.signal-card { background: var(--color-bg); padding: 26px 24px 28px; transition: background .3s ease; }
.signal-card:hover { background: rgba(29, 63, 99, .2); }
.signal-name { font: 500 17px var(--font-heading); color: #fff; }
.signal-desc { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(233, 233, 237, .55); }

/* ── OS strip on inner pages ───────────────────────────────────────────── */
.os-strip--page { margin-top: 44px; }

/* ── Comparison ────────────────────────────────────────────────────────── */
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 44px; }
.cmp-col { border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 30px 30px 34px; background: rgba(21, 29, 44, .35); }
.cmp-col--accent { border-color: rgba(77, 148, 214, .3); background: linear-gradient(160deg, rgba(29, 63, 99, .4), rgba(21, 29, 44, .35)); }
.cmp-items { margin-top: 22px; display: flex; flex-direction: column; gap: 11px; font-size: 15px; color: rgba(233, 233, 237, .58); }
.cmp-col--accent .cmp-items { color: rgba(233, 233, 237, .85); }
.cmp-flow { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(233, 233, 237, .08); font-size: 12.5px; color: var(--ink-38); letter-spacing: .04em; }
.cmp-flow--accent { border-top-color: rgba(77, 148, 214, .2); color: var(--color-accent-300); }

/* ── Prose ─────────────────────────────────────────────────────────────── */
.prose { max-width: 720px; margin-top: 34px; }
.prose p { margin: 0 0 20px; font-size: 17px; line-height: 1.72; color: rgba(233, 233, 237, .72); }
.prose h3 { margin: 44px 0 16px; font-size: 22px; letter-spacing: -.015em; color: #fff; }
.prose h3:first-child { margin-top: 0; }
.prose ul { margin: 0 0 22px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.prose li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.6; color: rgba(233, 233, 237, .7); }
.prose li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-400); }
.prose blockquote {
  margin: 28px 0; padding: 20px 26px;
  border-left: 1px solid var(--color-accent);
  background: linear-gradient(90deg, rgba(77, 148, 214, .10), transparent);
  font: 500 19px var(--font-heading); line-height: 1.5; letter-spacing: -.01em; color: #fff;
}

/* ── Callout ───────────────────────────────────────────────────────────── */
.callout {
  margin-top: 44px; border: 1px solid rgba(77, 148, 214, .28); border-radius: var(--radius-lg);
  padding: 30px 32px 32px; background: linear-gradient(150deg, rgba(29, 63, 99, .34), rgba(21, 29, 44, .42));
}
.callout-title { font: 500 22px var(--font-heading); letter-spacing: -.015em; color: #fff; }
.callout-body { margin: 12px 0 0; max-width: 720px; font-size: 15.5px; line-height: 1.65; color: var(--ink-60); }
.callout-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ── Illustrative-data label ───────────────────────────────────────────── */
.illustrative { margin-top: 14px; font-size: 12px; color: rgba(233, 233, 237, .56); }

/* ── Capability table ──────────────────────────────────────────────────── */
.captable { margin-top: 34px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; }
.captable-head, .captable-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 200px; gap: 20px; padding: 16px 24px; align-items: center; }
.captable-head {
  background: rgba(21, 29, 44, .6); border-bottom: 1px solid var(--line-2);
  font: 500 10.5px var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: rgba(233, 233, 237, .56);
}
.captable-row + .captable-row { border-top: 1px solid rgba(233, 233, 237, .06); }
.captable-row:hover { background: rgba(29, 63, 99, .14); }
.captable-surface { font: 500 16px var(--font-heading); color: #fff; }
.captable-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.by-tag { display: inline-flex; font-size: 11.5px; padding: 4px 11px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.by-tag--native { color: var(--ok); border-color: rgba(95, 191, 155, .35); background: rgba(95, 191, 155, .1); }
.by-tag--adm { color: var(--color-accent-300); border-color: rgba(77, 148, 214, .38); background: rgba(77, 148, 214, .1); }
.by-tag--integration { color: var(--warn); border-color: rgba(217, 163, 77, .35); background: rgba(217, 163, 77, .1); }
.legend-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* ── Flow diagram ──────────────────────────────────────────────────────── */
.flowline { margin-top: 44px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.flowline-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.flowline-item {
  border: 1px solid var(--line-3); border-radius: 999px; padding: 8px 16px;
  font-size: 13px; color: rgba(233, 233, 237, .66); background: rgba(21, 29, 44, .5);
}
.flowline-core {
  border: 1px solid var(--color-accent); border-radius: var(--radius-md);
  padding: 14px 28px; font: 500 17px var(--font-heading); color: #fff;
  background: rgba(77, 148, 214, .12); box-shadow: 0 0 34px rgba(77, 148, 214, .16);
}
.flowline-core--muted { border-color: var(--line-3); background: rgba(21, 29, 44, .55); box-shadow: none; color: rgba(233, 233, 237, .82); font-size: 15.5px; }
.flowline-down { width: 1px; height: 26px; background: linear-gradient(180deg, rgba(77, 148, 214, .7), rgba(77, 148, 214, .15)); margin: 12px 0; }

/* ── "feeds into" note ─────────────────────────────────────────────────── */
.feeds-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px;
  font-size: 13.5px; color: rgba(233, 233, 237, .6);
}
.feeds-note--center { justify-content: center; margin-top: 0; }
.feeds-note > span:not(.feeds-arrow):not(.feeds-core):not(.feeds-plus) {
  border: 1px solid var(--line-3); border-radius: 999px; padding: 8px 18px; background: rgba(16, 22, 34, .7);
}
.feeds-arrow, .feeds-plus { color: var(--color-accent-500); }
.feeds-core { border: 1px solid var(--color-accent); border-radius: 999px; padding: 8px 20px; color: #fff; background: rgba(77, 148, 214, .12); }

/* ── Mock frames ───────────────────────────────────────────────────────── */
/* Wrapping matters because some mocks return more than one root element —
   safeMock emits the dial and the live-evaluation panel as siblings. Without
   it they stay on one line at any width, and `overflow: hidden` silently
   clips the overflow rather than showing it as scroll. */
.mock-frame {
  position: relative; margin-top: 44px; display: flex; justify-content: center;
  flex-wrap: wrap; gap: 24px;
  padding: 32px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: radial-gradient(620px 400px at 50% 30%, rgba(77, 148, 214, .16), transparent 70%);
  overflow: hidden;
}
/* The frame hugs what it holds. Stretched to the column it left a 300px phone
   floating in 1224px of empty panel — 24% filled — which is the large blank
   space these frames were creating on the product pages. The split frame is
   excluded: its left column is flex:1 and has to be free to grow. */
.mock-frame:not(.mock-frame--split) {
  width: fit-content; max-width: 100%; margin-inline: auto;
}
.mock-frame--wide { padding: 24px 16px 0; }
.mock-duo { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }
.mock-duo-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mock-caption { font: 500 11px var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: rgba(233, 233, 237, .56); }

/* ── ADM console ───────────────────────────────────────────────────────── */
.adm-console {
  width: 100%; max-width: 1020px; border-radius: 14px; overflow: hidden; background: #0a0f18;
  box-shadow: 0 50px 110px rgba(0, 0, 0, .6), 0 0 0 1px rgba(233, 233, 237, .11); font-family: var(--font-body);
}
.adm-console-body { padding: 22px 24px 26px; background: radial-gradient(640px 320px at 20% 0%, rgba(77, 148, 214, .12), transparent 72%); }
.adm-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.adm-kpi { border: 1px solid var(--line-2); border-radius: 11px; padding: 16px 18px; background: rgba(21, 29, 44, .55); }
.adm-kpi-value { font: 500 26px var(--font-heading); letter-spacing: -.03em; color: #e9e9ed; margin-top: 8px; }
.adm-table { margin-top: 16px; border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; }
.adm-table-head, .adm-table-row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) 90px 110px 150px 60px; gap: 12px;
  padding: 12px 18px; align-items: center; font-size: 13px;
}
.adm-table-head {
  background: rgba(21, 29, 44, .7); font: 500 10px var(--font-heading);
  letter-spacing: .14em; text-transform: uppercase; color: rgba(233, 233, 237, .56);
}
.adm-table-row + .adm-table-row { border-top: 1px solid rgba(233, 233, 237, .05); }
.adm-dev { color: #e9e9ed; }
.adm-os, .adm-own { color: rgba(233, 233, 237, .5); }
.adm-score { font: 500 15px var(--font-heading); color: #fff; text-align: right; }
.state-tag { display: inline-flex; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.state-tag--ok { color: var(--ok); border-color: rgba(95, 191, 155, .3); background: rgba(95, 191, 155, .1); }
.state-tag--blue { color: #79b0e4; border-color: rgba(121, 176, 228, .3); background: rgba(121, 176, 228, .1); }
.state-tag--warn { color: var(--warn); border-color: rgba(217, 163, 77, .3); background: rgba(217, 163, 77, .1); }

/* ── SAFE showcase ─────────────────────────────────────────────────────── */
.safe-showcase {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: center;
  margin-top: 44px;
}
.safe-stage--page { height: 460px; }
.safe-log--page { margin-top: 0; }

/* ── Cross-links ───────────────────────────────────────────────────────── */
.crosslinks { border-top: 1px solid var(--line); padding-top: 56px; }
.cross-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; }
.cross-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 24px 26px 26px;
  background: rgba(21, 29, 44, .35); color: inherit;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.cross-card:hover { border-color: rgba(77, 148, 214, .5); background: rgba(29, 63, 99, .24); transform: translateY(-3px); color: inherit; }
.cross-label { font: 500 17px var(--font-heading); color: #fff; }
.cross-desc { font-size: 13.5px; line-height: 1.55; color: rgba(233, 233, 237, .55); }
.cross-more { position: absolute; top: 24px; right: 24px; color: var(--color-accent-300); }

/* ── Section hand-off links (home) ─────────────────────────────────────── */
.section-more { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.section-more--center { justify-content: center; }
.section-more a { font: 500 14.5px var(--font-heading); color: var(--color-accent-300); }
.section-more a:hover { color: var(--color-accent-200); }

/* ── Industry cards become links ───────────────────────────────────────── */
.ind-cell--link { position: relative; display: block; color: inherit; }
.ind-cell--link:hover { color: inherit; }
.ind-more { position: absolute; top: 30px; right: 26px; color: var(--color-accent-300); opacity: 0; transition: opacity .3s ease; }
.ind-cell--link:hover .ind-more { opacity: 1; }

/* ── Evolution strip on inner pages ────────────────────────────────────── */
.evo--page { margin-top: 40px; }

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty-state {
  margin-top: 44px; border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  padding: 56px 40px 60px; text-align: center;
  background: radial-gradient(700px 260px at 50% 0%, rgba(77, 148, 214, .14), transparent 70%), rgba(21, 29, 44, .28);
}
.empty-state-mark {
  width: 60px; height: 60px; margin: 0 auto 22px; border-radius: 50%;
  border: 1px solid rgba(77, 148, 214, .3); display: grid; place-items: center;
  background: rgba(19, 39, 56, .6);
}
.empty-state-title { font: 500 24px var(--font-heading); letter-spacing: -.015em; color: #fff; }
.empty-state-copy { margin: 12px auto 0; max-width: 480px; font-size: 15px; line-height: 1.6; color: var(--ink-60); }

/* ── Demo page "what to expect" ────────────────────────────────────────── */
.expect-list { display: flex; flex-direction: column; gap: 22px; margin: 22px 0 34px; }
.expect-item { display: flex; gap: 16px; }
.expect-num { font: 500 12px var(--font-heading); letter-spacing: .16em; color: var(--color-accent-400); padding-top: 3px; }
.expect-title { font: 500 16px var(--font-heading); color: #fff; }
.expect-item p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-60); }
.contact-note { margin-top: 20px; font-size: 13.5px; color: rgba(233, 233, 237, .56); }

/* ── Follow block ──────────────────────────────────────────────────────── */
.follow { border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 32px 34px 34px; background: rgba(21, 29, 44, .3); }
.follow-title { font: 500 21px var(--font-heading); letter-spacing: -.015em; color: #fff; }
.follow-copy { margin: 12px 0 0; max-width: 640px; font-size: 15px; line-height: 1.62; color: var(--ink-60); }
.follow-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.follow-links a {
  border: 1px solid var(--line-3); border-radius: 999px; padding: 8px 18px;
  font: 500 13.5px var(--font-heading); color: rgba(233, 233, 237, .78);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.follow-links a:hover { border-color: var(--color-accent); color: #fff; background: rgba(77, 148, 214, .12); }

/* ── Portal holding page ───────────────────────────────────────────────── */
.portal-note {
  margin-top: 44px; max-width: 720px; border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  padding: 30px 32px; background: rgba(21, 29, 44, .35);
}
.portal-note-title { font: 500 19px var(--font-heading); color: #fff; }
.portal-note p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-60); }

/* ── Legal ─────────────────────────────────────────────────────────────── */
.legal { max-width: 820px; }
.legal-section + .legal-section { margin-top: 44px; }
.legal-h2 { font-size: 21px; letter-spacing: -.015em; color: #fff; margin: 0 0 14px; }
.legal p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.72; color: rgba(233, 233, 237, .7); }
.legal ul { margin: 0 0 18px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.legal li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.6; color: rgba(233, 233, 237, .68); }
.legal li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-400); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.field-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
select.field-input { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(233,233,237,.5) 50%), linear-gradient(135deg, rgba(233,233,237,.5) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select.field-input option { background: var(--color-surface); color: var(--color-text); }
.form-error {
  margin-top: 18px; border: 1px solid rgba(210, 105, 95, .4); border-radius: var(--radius-md);
  padding: 12px 16px; font-size: 14px; color: #eab3ad; background: rgba(210, 105, 95, .1);
}
.thanks:focus { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.pullquote--center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; border-left: 0; border-top: 1px solid var(--color-accent); background: linear-gradient(180deg, rgba(77, 148, 214, .10), transparent); }

/* ── Page-system responsive ────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .megamenu { display: none !important; }
  .loop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .safe-showcase { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 1060px) {
  .card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .captable-head, .captable-row { grid-template-columns: 140px minmax(0, 1fr) 170px; gap: 14px; padding: 14px 18px; }
  .adm-table-head, .adm-table-row { grid-template-columns: minmax(0, 1.4fr) 80px 100px 130px 50px; font-size: 12px; }
}
@media (max-width: 820px) {
  .sec--crumbs { padding-left: 24px; padding-right: 24px; }
  .card-grid--2, .cmp-grid { grid-template-columns: minmax(0, 1fr); }
  .captable-head { display: none; }
  .captable-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .page-hero-inner { padding-top: 64px; padding-bottom: 64px; }
  /* Same treatment its two peers already get: once the columns collapse the
     header labels no longer sit above anything, so they wrap into nonsense.
     The trust tag needs a track wide enough for "Step-up required" — at 60px
     it was cut off by the table's own overflow. */
  .adm-table-head { display: none; }
  .adm-table-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
  .adm-os, .adm-own { display: none; }
  .adm-table-row .state-tag { justify-self: end; }
}
@media (max-width: 620px) {
  .loop-grid { grid-template-columns: minmax(0, 1fr); }
  .mock-frame { padding: 20px 14px; }
  .mock-duo { gap: 32px; }
  .safe-stage--page { height: 400px; }
  .follow-links a { padding: 8px 14px; font-size: 12.5px; }
  .prose blockquote { padding: 16px 18px; font-size: 17px; }
}

/* ===========================================================================
   AUTONOMOUS ENDPOINT DEFENSE SYSTEM
   Cross-platform positioning work: the hero ecosystem, the coverage bar, the
   estate and defense-core diagrams, the product architecture, the authority
   boundary, and the richer endpoint / estate / incident interfaces.

   Everything here is built from the existing tokens. No new colour is
   introduced and no animation runs that is not explaining something.
   =========================================================================== */

/* Screen-reader-only summaries for the composed diagrams, so the picture is
   never the only way the information is available. */
.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;
}

.sub-h2 {
  margin: 68px 0 0; font: 500 clamp(26px, 2.9vw, 36px) var(--font-heading);
  letter-spacing: -.02em; line-height: 1.14; color: #fff;
}
/* A labelled break inside a section: a hairline, then the kicker/heading pair
   sets up whatever follows, so a visual never lands unannounced. */
.sec-break {
  margin-top: 64px; padding-top: 40px;
  border-top: 1px solid var(--line-2);
}
.sec-break .sub-h2--tight { margin-top: 14px; }
.hero-brandline {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-2);
  max-width: 420px; font: 500 14px var(--font-heading);
  letter-spacing: .02em; color: var(--ink-45);
}
.future-line { margin-top: 18px; font: 500 13px var(--font-heading); letter-spacing: .1em; color: var(--ink-38); }

/* ── Hero ecosystem (§2) ───────────────────────────────────────────────
   Core on top, one bus, four drops, four endpoints. The pulse travels the
   wires so the composition reads as telemetry moving through one system
   rather than four screenshots that happen to be near each other. */
@keyframes ecoPulse {
  0%   { background-position: 0 -120px; }
  100% { background-position: 0 120px; }
}
@keyframes ecoBus {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

.eco { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }

.eco-core {
  position: relative; text-align: center; z-index: 2;
  width: min(300px, 78%); padding: 20px 24px 18px;
  border: 1px solid rgba(77, 148, 214, .34); border-radius: var(--radius-lg);
  background: linear-gradient(170deg, rgba(19, 39, 56, .95), rgba(13, 18, 30, .82));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
.eco-core-glow {
  position: absolute; inset: -40px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(77, 148, 214, .22), transparent 68%);
  animation: breathe 7s ease-in-out infinite;
}
.eco-core-kicker { position: relative; font: 500 9.5px var(--font-heading); letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent-400); }
.eco-core-safe { position: relative; font: 500 12px var(--font-heading); letter-spacing: .18em; color: var(--ink-45); margin-top: 5px; }
.eco-core-score { position: relative; font: 500 clamp(40px, 5vw, 54px) var(--font-heading); line-height: 1; letter-spacing: -.04em; color: #fff; margin-top: 8px; }
.eco-core-label { position: relative; font: 500 9.5px var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: rgba(233, 233, 237, .5); margin-top: 7px; }
.eco-core-state {
  position: relative; display: inline-flex; align-items: center; gap: 7px; margin-top: 9px;
  font: 500 10px var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--ok);
}

.eco-stem {
  width: 1px; height: 30px;
  background-image: linear-gradient(180deg, transparent, var(--color-accent) 45%, transparent);
  background-size: 1px 120px; background-repeat: repeat-y;
  animation: ecoPulse 2.6s linear infinite;
}
.eco-bus {
  width: 84%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 148, 214, .55) 12%, rgba(77, 148, 214, .55) 88%, transparent);
  animation: ecoBus 3.4s ease-in-out infinite;
}

/* All four endpoints get an equal share. The earlier split (laptops 1.35,
   phones .85) starved the phone cards to ~103px while their header needed
   ~141px, so the status badge rendered outside the card. Equal columns
   plus a header that can actually shrink removes the constraint rather
   than hiding it. */
.eco-devices { display: flex; align-items: flex-start; justify-content: center; gap: 18px; width: 100%; }
.eco-dev { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 26px; min-width: 0; }
.eco-dev--lap,
.eco-dev--phone { flex: 1 1 0; }
.eco-drop {
  position: absolute; top: 0; left: 50%; width: 1px; height: 26px;
  background-image: linear-gradient(180deg, transparent, var(--color-accent-400) 50%, transparent);
  background-size: 1px 90px; background-repeat: repeat-y;
  animation: ecoPulse 2.6s linear infinite;
}

.eco-screen {
  width: 100%; padding: 10px 11px 11px;
  border: 1px solid rgba(233, 233, 237, .13); background: #0b1017;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.eco-dev--lap .eco-screen { border-radius: 8px 8px 3px 3px; }
.eco-dev--phone .eco-screen { position: relative; border-radius: 16px; padding-top: 16px; }
.eco-dev--phone .eco-screen::before {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 4px; border-radius: 3px; background: #05080d;
}
.eco-base {
  width: 104%; max-width: 200px; height: 7px; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #2c3444, #151b26);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}

.eco-bar { display: flex; align-items: center; gap: 6px; }
.eco-bar img { width: 13px; height: 13px; object-fit: contain; flex: none; }
.eco-os { font: 500 11px var(--font-heading); color: #e9e9ed; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-state {
  display: flex; align-items: center; gap: 6px; margin-top: 7px;
  font: 500 8.5px var(--font-heading); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ok);
}
.eco-state .dot { width: 5px; height: 5px; background: var(--ok); animation: tick 2.4s ease-in-out infinite; }
.eco-score { display: flex; align-items: baseline; gap: 6px; margin-top: 9px; }
.eco-score b { font: 500 26px var(--font-heading); line-height: 1; letter-spacing: -.03em; color: #fff; }
.eco-score i { font: normal 8.5px var(--font-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); }
.eco-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; }
.eco-rows span { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; }
.eco-rows i { font-style: normal; color: rgba(233, 233, 237, .5); }
.eco-rows b { font-weight: 500; color: var(--ok); }
.eco-act {
  display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--line); font-size: 9px; color: var(--color-accent-300);
}
.eco-act .dot { width: 5px; height: 5px; background: var(--color-accent-400); animation: tick 2.4s ease-in-out infinite; }

.eco-foot { display: flex; align-items: center; gap: 14px; width: 90%; margin-top: 22px; }
.eco-foot span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(77, 148, 214, .4), transparent); }
.eco-foot b {
  font: 500 10.5px var(--font-heading); letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-accent-300); white-space: nowrap;
}

/* ── Platform coverage bar (§3) ────────────────────────────────────────── */
.coverage { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(19, 42, 68, .30), transparent 75%); }
.sec--coverage { padding-top: 46px; padding-bottom: 46px; }

/* The platform strip carries the cross-platform claim directly under the
   hero: each platform gets its mark, its name and the role it plays, and
   the run closes on the intelligence that unifies them — so the row reads
   as "four platforms, one system" rather than a list of logos. It stays a
   single horizontal run with hairline dividers rather than five bordered
   cards, which would compete with the hero above it. */
.platstrip {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}
.platstrip-item {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 13px;
  padding: 10px clamp(10px, 1.6vw, 22px);
}
.platstrip-item + .platstrip-item::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 34px; background: var(--line-3);
}
.platstrip-mark {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--line-2); background: rgba(21, 29, 44, .55);
  transition: border-color .35s ease, background .35s ease;
}
.platstrip-mark--core {
  border-color: rgba(77, 148, 214, .3); background: rgba(29, 63, 99, .3);
}
.platstrip-mark--core svg { animation: spin 26s linear infinite; }
.platstrip-item:hover .platstrip-mark {
  border-color: rgba(77, 148, 214, .45); background: rgba(29, 63, 99, .32);
}
.platstrip-mark img { width: 21px; height: 21px; object-fit: contain; }
.platstrip-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.platstrip-name {
  font: 500 15px var(--font-heading); letter-spacing: -.01em; color: #fff;
}
.platstrip-name--core { color: var(--color-accent-300); }
.platstrip-role {
  font-size: 11.5px; letter-spacing: .02em; color: var(--ink-45); white-space: nowrap;
}

@media (max-width: 1180px) {
  .platstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 4px; }
  /* With three per row the dividers land under the wrong items, so the
     rule below re-draws them per row instead of per item. */
  .platstrip-item + .platstrip-item::before { display: none; }
  .platstrip-item:not(:nth-child(3n + 1))::before { display: block; }
}
@media (max-width: 760px) {
  .platstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platstrip-item::before { display: none !important; }
  .platstrip-item { justify-content: flex-start; }
}
.coverage-foot {
  margin-top: 22px; text-align: center;
  font: 500 13.5px var(--font-heading); letter-spacing: .06em; color: var(--color-accent-300);
}

/* ── Product showcase ──────────────────────────────────────────────────
   Positioning left, capabilities right, interface full width beneath. The
   rule between blocks does the separating so consecutive products never run
   together into one undifferentiated column. */
.pshow + .pshow { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--line-2); }
.pshow-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.pshow-name {
  margin: 12px 0 0; font: 500 clamp(24px, 2.6vw, 32px) var(--font-heading);
  letter-spacing: -.02em; line-height: 1.14; color: #fff;
}
.pshow-lede { margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-60); }
.pshow-meta {
  margin-top: 18px; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-45);
}
.pshow-cta { margin-top: 22px; }
.pshow-points {
  margin: 6px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 12px;
}
.pshow-points li {
  position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.55;
  color: rgba(233, 233, 237, .74);
}
.pshow-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-400);
}
.pshow-visual { margin-top: 38px; }

@media (max-width: 900px) {
  .pshow-head { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pshow + .pshow { margin-top: 52px; padding-top: 52px; }
}

/* ── Split frame: an interface beside the signal it acts on ────────────
   The console takes the room it needs and the dial keeps its drawn width,
   with a pulsing link between them carrying the same signal language as the
   hero orbit and the endpoint duo. */
.mock-frame--split { align-items: center; gap: clamp(20px, 3vw, 40px); padding: 28px 26px; }
.split-main { flex: 1 1 0; min-width: 0; }
/* auto-fit lands on three-plus-one at this narrower width, which reads as a
   wrapping accident rather than a layout. Two by two is deliberate. */
.mock-frame--split .adm-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-side { flex: none; }
.split-link {
  /* `margin: auto 0` would win over align-self:stretch and collapse this to
     zero height, so the connector gets an explicit length instead. */
  flex: none; align-self: center; width: 1px; height: 300px;
  background-image: linear-gradient(180deg, transparent, var(--color-accent) 45%, transparent);
  background-size: 1px 120px; background-repeat: repeat-y;
  animation: ecoPulse 2.6s linear infinite;
}
/* The dial's value and colour are set as SVG attributes on each phase change;
   without a transition the ring and its hue jump between states. */
.safe-dial-value { transition: stroke-dashoffset 1.1s cubic-bezier(.22,.7,.24,1), stroke .8s ease; }
.safe-score, .safe-state { transition: color .8s ease; }

@media (max-width: 1060px) {
  .mock-frame--split { flex-direction: column; }
  .split-main, .split-side { width: 100%; }
  .split-link { display: none; }
}

/* ── Endpoint + mobile duo (§7) ────────────────────────────────────────
   Two devices, not four. The laptop and the phone stand in for desktop and
   mobile, and the platform marks under each caption carry the cross-platform
   claim without asking a visitor to parse four interfaces at once. The
   columns are weighted so the desktop interface stays readable — an equal
   split shrinks it to the point where its UI stops meaning anything. */
/* The intelligence core sits above both devices and feeds a bus; each device
   hangs off that bus by a pulsing drop. The pulse is a gradient scrolled by
   background-position rather than a moving element, so it costs no layout
   and stops dead under prefers-reduced-motion with the rest of the site. */
.duo-link { display: flex; flex-direction: column; align-items: center; margin-top: 52px; }
.duo-core {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 26px; border-radius: var(--radius-lg);
  border: 1px solid rgba(77, 148, 214, .3);
  background: linear-gradient(180deg, rgba(29, 63, 99, .5), rgba(21, 29, 44, .45));
}
.duo-core::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120px 60px at 50% 50%, rgba(77, 148, 214, .22), transparent 70%);
}
.duo-core-kicker {
  position: relative; font: 500 9.5px var(--font-heading);
  letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent-400);
}
.duo-core-safe {
  position: relative; font: 500 13px var(--font-heading);
  letter-spacing: .16em; color: #fff;
}
.duo-stem {
  width: 1px; height: 34px;
  background-image: linear-gradient(180deg, transparent, var(--color-accent) 45%, transparent);
  background-size: 1px 120px; background-repeat: repeat-y;
  animation: ecoPulse 2.6s linear infinite;
}
.duo-bus {
  width: 78%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 148, 214, .55) 12%, rgba(77, 148, 214, .55) 88%, transparent);
  animation: ecoBus 3.4s ease-in-out infinite;
}
.duo-drop {
  position: absolute; top: 0; left: 50%; width: 1px; height: 30px;
  background-image: linear-gradient(180deg, transparent, var(--color-accent-400) 50%, transparent);
  background-size: 1px 90px; background-repeat: repeat-y;
  animation: ecoPulse 2.6s linear infinite;
}

.duo {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: end; margin-top: 0;
}
.duo-item { position: relative; display: flex; flex-direction: column; gap: 22px; margin: 0; padding-top: 30px; }
.duo-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; }
/* The inset belongs to the whole phone column, not just its stage. On the
   stage alone the phone narrowed but its caption still spanned the full
   grid track, so the caption rule ran wider than the device it captions. */
.duo-item--phone { padding-inline: clamp(0px, 5vw, 50px); }
.duo-cap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 18px;
  padding-top: 16px; border-top: 1px solid var(--line-2);
}
.duo-name { font: 500 16px var(--font-heading); letter-spacing: -.01em; color: #fff; }
.duo-os {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: .04em; color: var(--ink-45);
}
.duo-os img { width: 16px; height: 16px; object-fit: contain; opacity: .8; }
.duo-os img + img { margin-left: 8px; }

@media (max-width: 980px) {
  .duo { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .duo-stage--phone { padding-inline: 0; }
}

/* ── The enterprise estate (§4) ────────────────────────────────────────── */
.estateweb {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr);
  gap: 20px; align-items: center; margin-top: 56px;
}
.estateweb-col { display: flex; flex-direction: column; gap: 10px; }
.estateweb-head {
  font: 500 10.5px var(--font-heading); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-45); padding-bottom: 4px;
}
.estateweb-node {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius-md);
  padding: 13px 16px; background: rgba(21, 29, 44, .45);
}
.estateweb-node img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.estateweb-node span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.estateweb-node b { font: 500 14.5px var(--font-heading); color: #e9e9ed; }
.estateweb-node i { font-style: normal; font-size: 11.5px; color: var(--ink-45); }

.estateweb-core { display: flex; align-items: center; }
.estateweb-wire {
  flex: 1; height: 1px; min-width: 18px;
  background-image: linear-gradient(90deg, transparent, var(--color-accent) 50%, transparent);
  background-size: 90px 1px; background-repeat: repeat-x;
  animation: estateFlow 3.2s linear infinite;
}
.estateweb-wire--out { animation-direction: reverse; }
@keyframes estateFlow { from { background-position: -90px 0; } to { background-position: 90px 0; } }
.estateweb-core-panel {
  flex: none; width: 100%; max-width: 240px; text-align: center;
  border: 1px solid rgba(77, 148, 214, .34); border-radius: var(--radius-lg);
  padding: 26px 20px; background: linear-gradient(170deg, rgba(19, 39, 56, .9), rgba(21, 29, 44, .6));
  box-shadow: 0 0 40px rgba(77, 148, 214, .14);
}
.estateweb-core-name { font: 500 24px var(--font-heading); letter-spacing: -.02em; color: #fff; margin-top: 8px; }
.estateweb-core-note { font-size: 12.5px; line-height: 1.5; color: var(--ink-45); margin-top: 10px; }

/* ── Defense core (§6) ─────────────────────────────────────────────────
   Signals arrive, the core decides, actions leave. The stagger is the
   explanation; it is disabled wholesale under prefers-reduced-motion by
   the global rule near the top of this file. */
@keyframes dcoreIn {
  0%, 8% { border-color: var(--line-3); color: var(--ink-60); background: rgba(21, 29, 44, .5); }
  14%, 34% { border-color: rgba(77, 148, 214, .7); color: #fff; background: rgba(77, 148, 214, .16); }
  46%, 100% { border-color: var(--line-3); color: var(--ink-60); background: rgba(21, 29, 44, .5); }
}
@keyframes dcoreOut {
  0%, 8% { border-color: var(--line-3); color: var(--ink-60); background: rgba(21, 29, 44, .5); }
  14%, 34% { border-color: rgba(95, 191, 155, .65); color: #fff; background: rgba(95, 191, 155, .14); }
  46%, 100% { border-color: var(--line-3); color: var(--ink-60); background: rgba(21, 29, 44, .5); }
}
@keyframes dcoreSeq {
  0%, 10% { border-color: var(--line-3); color: var(--ink-45); }
  18%, 38% { border-color: var(--color-accent); color: #fff; box-shadow: 0 0 24px rgba(77, 148, 214, .2); }
  50%, 100% { border-color: var(--line-3); color: var(--ink-45); box-shadow: none; }
}

.dcore {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px; align-items: center; margin-top: 52px;
}
.dcore-side-head {
  font: 500 10.5px var(--font-heading); letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-accent-400); margin-bottom: 14px;
}
.dcore-side--out { text-align: right; }
.dcore-side--out .dcore-chips { justify-content: flex-end; }
.dcore-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dcore-chip {
  border: 1px solid var(--line-3); border-radius: 999px; padding: 8px 15px;
  font-size: 13px; color: var(--ink-60); background: rgba(21, 29, 44, .5);
}
.dcore-chip--in { animation: dcoreIn 6.5s ease-in-out infinite; }
.dcore-chip--out { animation: dcoreOut 6.5s ease-in-out infinite; }

.dcore-hub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; }
.dcore-hub-ring {
  position: absolute; width: 280px; height: 280px; border-radius: 50%;
  border: 1px solid rgba(77, 148, 214, .16); border-top-color: rgba(77, 148, 214, .5);
  animation: spin 30s linear infinite;
}
.dcore-hub-bloom {
  position: absolute; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 148, 214, .18), transparent 66%);
  animation: breathe 7s ease-in-out infinite;
}
.dcore-hub-face {
  position: relative; text-align: center; width: 188px; height: 188px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(77, 148, 214, .34);
  background: radial-gradient(circle, rgba(19, 39, 56, .96), rgba(13, 18, 30, .8));
}
.dcore-hub-name { font: 500 24px var(--font-heading); letter-spacing: -.02em; color: #fff; margin-top: 6px; }
.dcore-hub-sub { font: 500 11px var(--font-heading); letter-spacing: .2em; color: var(--ink-45); margin-top: 8px; }
.dcore-platforms { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.dcore-plat {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-3); border-radius: 999px; padding: 6px 13px;
  font-size: 12px; color: var(--ink-80); background: rgba(16, 22, 34, .8);
}
.dcore-plat img { width: 14px; height: 14px; object-fit: contain; }

.dcore-seq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 44px; }
.dcore-seq-step {
  border: 1px solid var(--line-3); border-radius: 999px; padding: 9px 20px;
  font: 500 13px var(--font-heading); letter-spacing: .05em; color: var(--ink-45);
  animation: dcoreSeq 4.2s ease-in-out infinite;
}
.dcore-seq-arrow { color: rgba(77, 148, 214, .45); }

/* ── Long-form loop label (§11) ────────────────────────────────────────── */
.looplong { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 28px; }
.looplong-label {
  font: 500 10.5px var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-45);
}
.looplong-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.looplong-step { font-size: 13px; color: var(--ink-60); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; }
.looplong-arrow { color: rgba(77, 148, 214, .45); font-size: 11px; }

/* ── Authority boundary (§12) ──────────────────────────────────────────── */
.authority { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 44px; }
.authority-flow { display: flex; flex-direction: column; align-items: stretch; }
.authority-stage {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 6px;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  padding: 18px 22px; background: rgba(21, 29, 44, .42);
}
.authority-stage--boundary {
  border-color: rgba(77, 148, 214, .45);
  background: linear-gradient(150deg, rgba(29, 63, 99, .45), rgba(21, 29, 44, .45));
  box-shadow: 0 0 34px rgba(77, 148, 214, .12);
}
.authority-index { grid-row: 1 / 3; font: 500 12px var(--font-heading); letter-spacing: .14em; color: var(--color-accent-400); padding-top: 3px; }
.authority-name { font: 500 17px var(--font-heading); letter-spacing: -.01em; color: #fff; }
.authority-desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-60); }
.authority-down { width: 1px; height: 22px; margin: 0 auto; background: linear-gradient(180deg, rgba(77, 148, 214, .7), rgba(77, 148, 214, .18)); }
.authority-controls { border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 26px 28px 28px; background: rgba(21, 29, 44, .3); }
.authority-controls-head { font: 500 10.5px var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent-400); }

/* ── Desktop / mobile distinction rows (§5) ────────────────────────────── */
.distinction { margin-top: 30px; border-top: 1px solid var(--line-2); }
.distinction-row {
  display: flex; align-items: baseline; gap: 18px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.distinction-row span {
  flex: none; width: 96px; font: 500 10.5px var(--font-heading);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45);
}
.distinction-row b { font: 500 15.5px var(--font-heading); color: var(--ink-80); }
.distinction-row--accent span { color: var(--color-accent-400); }
.distinction-row--accent b { color: #fff; }

/* ── Enterprise trust anchor label (§9) ────────────────────────────────── */
.anchor-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 auto 16px;
  border: 1px solid rgba(77, 148, 214, .4); border-radius: 999px; padding: 7px 16px;
  font: 500 10.5px var(--font-heading); letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent-300); background: rgba(16, 22, 34, .85); white-space: nowrap;
}
.anchor-phone { display: flex; flex-direction: column; align-items: center; }
.anchor-caption {
  margin-top: 18px; max-width: 300px; text-align: center;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-45);
}
.plat-surface--phone .anchor-badge { display: inline-flex; margin-bottom: 18px; }
.plat-surface--phone { display: flex; flex-direction: column; align-items: center; }

/* ── Timing comparison (§10) ───────────────────────────────────────────── */
.timing { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; margin-top: 40px; }
.timing-col { border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 24px 26px 26px; background: rgba(21, 29, 44, .32); }
.timing-col--accent { border-color: rgba(77, 148, 214, .3); background: linear-gradient(160deg, rgba(29, 63, 99, .34), rgba(21, 29, 44, .32)); }
.timing-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.timing-flow span { border: 1px solid var(--line-3); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; color: var(--ink-60); }
.timing-col--accent .timing-flow span { border-color: rgba(77, 148, 214, .3); color: var(--ink-80); }
.timing-flow i { font-style: normal; color: rgba(77, 148, 214, .5); font-size: 11px; }

/* ── Product architecture (§13) ────────────────────────────────────────── */
.arch { display: flex; flex-direction: column; align-items: center; margin-top: 56px; }
.arch-tier { display: flex; justify-content: center; width: 100%; }
.arch-node {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--line-3); border-radius: var(--radius-md); padding: 14px 28px;
  font: 500 15px var(--font-heading); letter-spacing: -.005em; color: var(--ink-80);
  background: rgba(21, 29, 44, .6); transition: border-color .3s ease, color .3s ease;
}
.arch-node:hover { border-color: rgba(77, 148, 214, .55); color: #fff; }
.arch-node--command { letter-spacing: .12em; text-transform: uppercase; font-size: 12px; color: var(--ink-60); }
.arch-node--core { border-color: var(--color-accent); color: #fff; background: rgba(77, 148, 214, .14); box-shadow: 0 0 34px rgba(77, 148, 214, .16); font-size: 17px; }
.arch-node--safe { border-color: rgba(77, 148, 214, .35); color: var(--color-accent-200); }
.arch-stem { width: 1px; height: 24px; background: linear-gradient(180deg, rgba(77, 148, 214, .65), rgba(77, 148, 214, .2)); }
.arch-bus { width: 100%; height: 1px; background: linear-gradient(90deg, transparent 8%, rgba(77, 148, 214, .5) 17%, rgba(77, 148, 214, .5) 83%, transparent 92%); }
.arch-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; margin-top: 24px; }
.arch-branch {
  position: relative; display: flex; flex-direction: column; text-align: center; align-items: center;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 26px 22px 24px;
  background: rgba(21, 29, 44, .42); color: inherit;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.arch-branch::before {
  content: ""; position: absolute; top: -24px; left: 50%; width: 1px; height: 24px;
  background: linear-gradient(180deg, rgba(77, 148, 214, .45), rgba(77, 148, 214, .18));
}
.arch-branch:hover { border-color: rgba(77, 148, 214, .5); background: rgba(29, 63, 99, .26); transform: translateY(-3px); color: inherit; }
.arch-branch-name { font: 500 18px var(--font-heading); letter-spacing: -.015em; color: #fff; }
.arch-branch-sub { font-size: 13px; color: var(--color-accent-300); margin-top: 6px; }
.arch-branch-plats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; }
.arch-branch-plats span { border: 1px solid var(--line-3); border-radius: 999px; padding: 4px 11px; font-size: 11.5px; color: var(--ink-60); }

/* ── Endpoint interface: protection status + autonomous activity (§7) ──── */
.desktop--win .desktop-main,
.mac-main { display: flex; flex-direction: column; }
.ep-block { margin-top: 20px; border: 1px solid var(--line-2); border-radius: 10px; padding: 15px 18px 17px; background: rgba(21, 29, 44, .5); }
.ep-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ep-block-note { font-size: 10.5px; color: var(--ink-38); }
.ep-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 13px; }
/* ── Endpoint console motion ───────────────────────────────────────────
   The console showed a finished incident sitting still. These replay the
   sequence it describes: the trust ring draws to its value, the protection
   layers report in, and the four autonomous events arrive in order and then
   settle. One 12s cycle covers all four events plus a pause, so it reads as
   a system working rather than a banner blinking. The whole block inherits
   the global prefers-reduced-motion carve-out. */
@keyframes epDial { from { stroke-dashoffset: 327; } }
.desktop-dial-value { animation: epDial 1.8s cubic-bezier(.22, .7, .24, 1) .3s backwards; }

@keyframes epArrive {
  0%, 4%   { opacity: .28; transform: translateX(-4px); }
  10%, 92% { opacity: 1; transform: none; }
  100%     { opacity: 1; transform: none; }
}
.ep-event { animation: epArrive 12s ease-in-out infinite backwards; }
.ep-event:nth-child(1) { animation-delay: .4s; }
.ep-event:nth-child(2) { animation-delay: 1.2s; }
.ep-event:nth-child(3) { animation-delay: 2s; }
.ep-event:nth-child(4) { animation-delay: 2.8s; }

@keyframes epReport { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.ep-row .dot { animation: epReport 3.2s ease-in-out infinite; }
.ep-row:nth-child(2) .dot { animation-delay: .35s; }
.ep-row:nth-child(3) .dot { animation-delay: .7s; }
.ep-row:nth-child(4) .dot { animation-delay: 1.05s; }
.ep-row:nth-child(5) .dot { animation-delay: 1.4s; }
.ep-row:nth-child(6) .dot { animation-delay: 1.75s; }

.ep-complete .dot { animation: tick 2.4s ease-in-out infinite; }

.ep-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.ep-row .dot { width: 6px; height: 6px; }
.ep-row-name { flex: 1; color: var(--ink-80); }
.ep-row-state { font: 500 11px var(--font-heading); white-space: nowrap; }
.ep-row-state--ok { color: var(--ok); }
.ep-row-state--blue { color: var(--color-accent-300); }

.ep-activity { display: flex; flex-direction: column; margin-top: 12px; }
.ep-event { position: relative; display: flex; gap: 14px; padding: 0 0 12px 16px; }
.ep-event::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent-400);
}
.ep-event::after { content: ""; position: absolute; left: 3px; top: 14px; bottom: 0; width: 1px; background: var(--line-3); }
.ep-event:last-child::after { display: none; }
.ep-event--warn::before { background: var(--warn); }
.ep-event--ok::before { background: var(--ok); }
.ep-event-time { flex: none; font: 500 11px var(--font-heading); color: var(--ink-45); padding-top: 1px; }
.ep-event-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ep-event-title { font: 500 13px var(--font-heading); color: #fff; }
.ep-event-detail { font-size: 12px; color: var(--ink-60); }
.ep-complete {
  display: flex; align-items: center; gap: 9px; margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--line); font: 500 12px var(--font-heading); color: var(--color-accent-300);
}
.ep-complete .dot { width: 6px; height: 6px; background: var(--color-accent-400); animation: dtTick 2s ease-in-out infinite; }

/* ── macOS endpoint interface (§8) ─────────────────────────────────────
   Source-list sidebar, unified toolbar, grouped cards: the platform's own
   conventions carrying the same intelligence model. */
.desktop--mac { border-radius: 12px; }
.desktop--mac .desktop-chrome { padding: 10px 16px; background: rgba(28, 34, 46, .95); }
.desktop--mac .desktop-lights i:nth-child(1) { background: #e0655c; }
.desktop--mac .desktop-lights i:nth-child(2) { background: #ddb03a; }
.desktop--mac .desktop-lights i:nth-child(3) { background: #58ab52; }
.mac-title { font: 500 12.5px var(--font-heading); color: var(--ink-80); margin-left: 8px; }
.mac-seg { display: inline-flex; margin-left: auto; border: 1px solid var(--line-3); border-radius: 7px; overflow: hidden; }
.mac-seg i { font-style: normal; font-size: 10.5px; padding: 4px 12px; color: var(--ink-45); }
.mac-seg i + i { border-left: 1px solid var(--line-3); }
.mac-seg i.is-on { background: rgba(77, 148, 214, .18); color: #fff; }
.mac-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); }
.mac-side { border-right: 1px solid var(--line); padding: 16px 12px; background: rgba(16, 22, 34, .6); }
.mac-side-head { font: 500 9.5px var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-38); padding: 0 8px 10px; }
.mac-side-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px;
  font-size: 12.5px; color: var(--ink-60);
}
.mac-side-item span { width: 6px; height: 6px; border-radius: 2px; background: var(--line-3); flex: none; }
.mac-side-item.is-on { background: rgba(77, 148, 214, .18); color: #fff; }
.mac-side-item.is-on span { background: var(--color-accent-400); }
.mac-main { padding: 22px 24px 24px; background: radial-gradient(520px 300px at 78% 0%, rgba(77, 148, 214, .12), transparent 70%); }
.mac-hero { display: flex; align-items: flex-start; gap: 22px; }
.mac-hero > div:first-child { flex: 1; }
.mac-hero-state { display: flex; align-items: center; gap: 11px; margin-top: 9px; font: 500 30px var(--font-heading); letter-spacing: -.025em; color: #fff; }
.mac-hero-state .dot { width: 9px; height: 9px; background: var(--ok); animation: dtTick 2.4s ease-in-out infinite; }
.mac-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 20px; }
.mac-card { border: 1px solid var(--line-2); border-radius: 10px; padding: 13px 14px; background: rgba(21, 29, 44, .62); }
.mac-card-name { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-45); }
.mac-card-value { font: 500 20px var(--font-heading); letter-spacing: -.02em; color: #fff; margin-top: 7px; }
.mac-card-state { font: 500 11.5px var(--font-heading); margin-top: 3px; }
.mac-card-state--ok { color: var(--ok); }
.mac-card-state--blue { color: var(--color-accent-300); }
.ep-block--mac { background: rgba(21, 29, 44, .62); }

/* ── Command Center: distribution, operations, live stream (§14) ───────── */
.portal-state { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.portal-state-cell {
  display: flex; flex-direction: column; gap: 7px;
  border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; background: rgba(21, 29, 44, .4);
}
.portal-state-value { font: 500 17px var(--font-heading); letter-spacing: -.02em; color: #fff; }

.portal-dist { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.portal-dist-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 48px 34px; gap: 10px; align-items: center; font-size: 12px; }
.portal-dist-os { color: var(--ink-80); }
.portal-dist-track { height: 8px; border-radius: 4px; background: rgba(233, 233, 237, .08); overflow: hidden; }
.portal-dist-track i { display: block; height: 100%; border-radius: 4px; }
.portal-dist-count { font: 500 12.5px var(--font-heading); color: #fff; text-align: right; }
.portal-dist-pct { color: var(--ink-38); text-align: right; }

.portal-stream { margin-top: 12px; }
.portal-stream-row {
  display: grid; grid-template-columns: 8px 62px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 0; font-size: 12.5px; border-bottom: 1px solid rgba(233, 233, 237, .05);
}
.portal-stream-row:first-of-type { margin-top: 6px; }
.portal-stream-time { font: 500 11.5px var(--font-heading); color: var(--ink-45); }
.portal-stream-text { color: var(--ink-80); }
.portal-stream-meta { font-size: 11px; color: var(--ink-38); white-space: nowrap; }
.portal-stream-foot {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font: 500 11.5px var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--ok);
}
.portal-stream-foot .dot { width: 6px; height: 6px; background: var(--ok); animation: ptTick 2s ease-in-out infinite; }

/* ── Endpoint estate console (§15) ─────────────────────────────────────── */
.estate {
  width: 100%; max-width: 1120px; border-radius: 14px; overflow: hidden; background: #0a0f18;
  box-shadow: 0 50px 110px rgba(0, 0, 0, .6), 0 0 0 1px rgba(233, 233, 237, .11); font-family: var(--font-body);
}
.estate-body { padding: 20px 22px 24px; background: radial-gradient(680px 320px at 18% 0%, rgba(77, 148, 214, .12), transparent 72%); }
.estate-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.estate-filter-label { font: 500 9.5px var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-38); margin-right: 4px; }
.estate-filter { border: 1px solid var(--line-3); border-radius: 7px; padding: 5px 12px; font-size: 11.5px; color: var(--ink-60); background: rgba(21, 29, 44, .55); }
.estate-table { margin-top: 16px; border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; }
.estate-head, .estate-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 92px 56px 84px 84px minmax(0, 1.25fr) 96px;
  gap: 10px; padding: 12px 18px; align-items: center; font-size: 12.5px;
}
.estate-head {
  background: rgba(21, 29, 44, .72); font: 500 9.5px var(--font-heading);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-45);
}
.estate-row + .estate-row { border-top: 1px solid rgba(233, 233, 237, .05); }
.estate-row:hover { background: rgba(29, 63, 99, .16); }
.estate-ep { font: 500 12.5px var(--font-heading); color: #fff; }
.estate-dim { color: var(--ink-60); }
.estate-trust { font: 500 14px var(--font-heading); color: #fff; }
.estate-action { color: var(--color-accent-300); }

/* ── Autonomous incident (§16) ─────────────────────────────────────────── */
.incident {
  width: 100%; max-width: 880px; border: 1px solid rgba(77, 148, 214, .28); border-radius: var(--radius-lg);
  padding: 28px 30px 30px; background: linear-gradient(160deg, rgba(29, 63, 99, .34), rgba(21, 29, 44, .5));
}
.incident-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.incident-title { font: 500 26px var(--font-heading); letter-spacing: -.02em; color: #fff; margin-top: 8px; }
.incident-resolved {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(95, 191, 155, .38); border-radius: 999px; padding: 8px 16px;
  font: 500 10.5px var(--font-heading); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ok); background: rgba(95, 191, 155, .1); white-space: nowrap;
}
.incident-resolved .dot { width: 7px; height: 7px; background: var(--ok); animation: tick 2.2s ease-in-out infinite; }
.incident-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.incident-meta span {
  display: inline-flex; align-items: baseline; gap: 9px;
  border: 1px solid var(--line-3); border-radius: 8px; padding: 8px 14px;
  font-size: 13px; color: var(--ink-80); background: rgba(16, 22, 34, .6);
}
.incident-meta i { font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-38); }
.incident-timeline { margin-top: 26px; }
.incident-step { position: relative; display: grid; grid-template-columns: 22px 68px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 22px; }
.incident-marker { position: relative; display: flex; justify-content: center; height: 100%; }
.incident-marker i {
  width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; flex: none;
  border: 2px solid var(--color-accent); background: rgba(77, 148, 214, .4);
}
.incident-step--warn .incident-marker i { border-color: var(--warn); background: rgba(217, 163, 77, .35); }
.incident-step--ok .incident-marker i { border-color: var(--ok); background: rgba(95, 191, 155, .4); }
.incident-marker::after {
  content: ""; position: absolute; top: 18px; bottom: -4px; left: 50%; width: 1px;
  background: linear-gradient(180deg, rgba(77, 148, 214, .5), rgba(233, 233, 237, .08));
}
.incident-step:last-child { padding-bottom: 0; }
.incident-step:last-child .incident-marker::after { display: none; }
.incident-time { font: 500 12.5px var(--font-heading); color: var(--ink-45); padding-top: 2px; }
.incident-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.incident-phase { font: 500 10.5px var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent-300); }
.incident-step--ok .incident-phase { color: var(--ok); }
.incident-step--warn .incident-phase { color: var(--warn); }
.incident-text { font-size: 15px; line-height: 1.5; color: var(--ink-80); }

/* ===========================================================================
   Responsive — the compositions collapse rather than shrink (§23)
   =========================================================================== */
@media (max-width: 1180px) {
  .dcore { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dcore-side--out { text-align: left; }
  .dcore-side--out .dcore-chips { justify-content: flex-start; }
  .dcore-hub { min-height: 280px; }
  .authority { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .estateweb { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .estateweb-core { flex-direction: column; }
  .estateweb-wire {
    width: 1px; height: 34px; flex: none; min-width: 0;
    background-image: linear-gradient(180deg, transparent, var(--color-accent) 50%, transparent);
    background-size: 1px 90px; background-repeat: repeat-y;
    animation-name: estateFlowY;
  }
  @keyframes estateFlowY { from { background-position: 0 -90px; } to { background-position: 0 90px; } }
  .estateweb-core-panel { max-width: 100%; }
}
@media (max-width: 1060px) {
  .arch-branches { grid-template-columns: minmax(0, 1fr); }
  .arch-branch::before { display: none; }
  .arch-bus { display: none; }
  .portal-state { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Keep every column, just tighter. */
  .estate-head, .estate-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) 76px 48px 76px 74px minmax(0, 1fr) 86px;
    gap: 8px; padding: 12px 14px; font-size: 11.5px;
  }
}
@media (max-width: 820px) {
  /* Below this the eight columns stop fitting, so each endpoint becomes a
     stacked card. Protection state is the one field that drops — the OS
     stays, because "every endpoint" is the whole point of this table. */
  .estate-head { display: none; }
  .estate-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 18px; font-size: 12.5px; }
  .estate-row > span:nth-child(6) { display: none; }
}
@media (max-width: 900px) {
  /* Below this width the four endpoints stack two-up instead of being
     squeezed until their interfaces stop being readable. */
  .eco-devices { flex-wrap: wrap; gap: 18px 14px; }
  .eco-dev--lap { flex: 1 1 calc(50% - 12px); }
  .eco-dev--phone { flex: 1 1 calc(50% - 12px); }
  .eco-bus { width: 94%; }
  .mac-body { grid-template-columns: minmax(0, 1fr); }
  .mac-side { display: none; }
  .mac-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .ep-status { grid-template-columns: minmax(0, 1fr); }
  .incident-step { grid-template-columns: 22px minmax(0, 1fr); }
  .incident-time { grid-column: 2; padding-top: 0; }
  .portal-stream-row { grid-template-columns: 8px 62px minmax(0, 1fr); }
  .portal-stream-meta { display: none; }
  .sub-h2 { margin-top: 64px; }
}
@media (max-width: 620px) {
  .eco-devices { gap: 14px 10px; }
  .eco-dev { padding-top: 20px; }
  .eco-drop { height: 20px; }
  .eco-screen { padding: 8px 9px 9px; }
  .eco-rows span { font-size: 9px; }
  .mac-cards { grid-template-columns: minmax(0, 1fr); }
  .timing { grid-template-columns: minmax(0, 1fr); }
  .distinction-row { flex-direction: column; gap: 4px; }
  .distinction-row span { width: auto; }
  .incident { padding: 22px 20px 24px; }
  .anchor-caption { max-width: 260px; }
}

/* ── Corrections to the home layout after the restructure ──────────────── */

/* The hero headline is two lines by design ("Autonomous Defense." /
   "Every Endpoint."), so the copy column has to be wide enough to hold the
   longer of the two without breaking it a third time. */
.g-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); }
.hero h1 { font-size: clamp(38px, 3.9vw, 54px); }

/* A trailing link row inside a full-bleed band still needs the page gutter. */
.sec--after { padding-top: 0; padding-bottom: 64px; }

/* The trust-anchor stage now carries a label above the phone and a caption
   below it, so the frame has to be tall enough for all three. */
.anchor-stage { height: 640px; }
.anchor-phone { transform: scale(.78); }

@media (max-width: 1180px) {
  .g-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .anchor-stage { height: 560px; }
  .anchor-phone { transform: scale(.68); }
  .sec--after { padding-bottom: 56px; }
}

/* Contrast: the muted tokens sit around 3.9:1, which is fine for the
   decorative labels they were built for but not for these — they carry
   real content (timestamps, OS descriptors, counts). Lifted to the 4.5:1
   band without changing the tokens other sections depend on. */
.dcore-seq-step,
.eco-score i,
.ep-event-time,
.incident-time,
.estateweb-node i,
.mac-card-name,
.portal-dist-pct,
.portal-stream-meta { color: var(--ink-60); }

/* ═══════════════════════════════════════════════════════════════════════
   Strategic components: authority, containment, recovery
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Response authority (§11) ──────────────────────────────────────────
   A spectrum, not three cards in a row: the position on the track is the
   point, so the levels sit under a shared axis that runs from human control
   to autonomous operation. */
.respauth { margin-top: 44px; }
.respauth-title {
  margin: 0 0 30px; font: 500 clamp(24px, 2.7vw, 33px) var(--font-heading);
  letter-spacing: -.02em; line-height: 1.14; color: #fff;
}
.respauth-scale {
  display: flex; align-items: center; gap: 16px;
  font: 500 9.5px var(--font-heading); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-45);
}
.respauth-scale-end { flex: none; }
.respauth-scale-end--right { color: var(--color-accent-300); }
.respauth-scale-track {
  position: relative; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--line-3), var(--color-accent-500));
}
.respauth-scale-track i {
  position: absolute; right: -1px; top: -3px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-400);
}
.respauth-levels {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-top: 18px;
}
.respauth-level {
  position: relative; padding: 26px 24px 24px;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: rgba(21, 29, 44, .42);
  transition: border-color .3s ease, background .3s ease;
}
/* The rightmost level is the one buyers are nervous about, so it is the one
   that carries the accent — reassurance reads better than apology. */
.respauth-level--auto { border-color: rgba(77, 148, 214, .32); background: linear-gradient(165deg, rgba(29, 63, 99, .40), rgba(21, 29, 44, .45)); }
.respauth-level:hover { border-color: rgba(77, 148, 214, .5); }
.respauth-level-num {
  font: 500 11px var(--font-heading); letter-spacing: .16em; color: var(--color-accent-400);
}
.respauth-level-name {
  margin-top: 12px; font: 500 19px var(--font-heading); letter-spacing: -.015em; color: #fff;
}
.respauth-level-body { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-60); }
.respauth-foot {
  margin: 26px 0 0; text-align: center;
  font: 500 14.5px var(--font-heading); letter-spacing: .01em; color: var(--color-accent-300);
}
.respauth--compact .respauth-title { font-size: clamp(21px, 2.2vw, 27px); margin-bottom: 24px; }
.respauth--compact .respauth-level { padding: 20px 18px; }

/* ── Precision containment (§12) ───────────────────────────────────────
   Indented rows read as nesting without needing literal concentric circles,
   which stop being legible once there are five of them and each carries a
   label. The connector runs down the gutter so the nesting is visible. */
.contain {
  margin-top: 44px; padding: 30px 28px;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: rgba(21, 29, 44, .38);
}
.contain-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 18px;
  font: 500 9.5px var(--font-heading); letter-spacing: .16em; text-transform: uppercase;
}
.contain-label { color: var(--color-accent-300); }
.contain-legend { color: var(--ink-45); }
.contain-rings { margin: 22px 0 0; padding: 0; list-style: none; }
.contain-ring {
  position: relative; display: flex; align-items: center; gap: 12px;
  /* Each scope steps in, so the endpoint sits furthest from the risk. */
  margin-left: calc(var(--i) * clamp(14px, 2.2vw, 30px));
  padding: 9px 0;
}
.contain-ring::before {
  content: ""; position: absolute; left: 3px; top: 0; bottom: 0;
  width: 1px; background: var(--line-3);
}
.contain-ring:first-child::before { top: 50%; }
.contain-ring:last-child::before { bottom: 50%; }
.contain-ring-dot {
  position: relative; z-index: 1; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent-400); box-shadow: 0 0 0 3px rgba(13, 18, 30, 1);
}
.contain-ring-name { font-size: 14.5px; color: rgba(233, 233, 237, .82); }
.contain-ring-tag {
  font: 500 9px var(--font-heading); letter-spacing: .14em; text-transform: uppercase;
  color: var(--warn); border: 1px solid rgba(217, 163, 77, .3);
  border-radius: 999px; padding: 3px 9px;
}
.contain-ring:last-child .contain-ring-dot { background: var(--warn); }
.contain-foot { margin: 20px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-60); }

/* ── Recovery loop (§21) ───────────────────────────────────────────────── */
.recovery { margin-top: 44px; }
.recovery-title {
  margin: 0 0 26px; font: 500 clamp(24px, 2.7vw, 33px) var(--font-heading);
  letter-spacing: -.02em; line-height: 1.14; color: #fff;
}
.recovery-row {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none;
}
.recovery-step {
  position: relative; padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
/* The final step is the outcome, so it is the one that reads as resolved. */
.recovery-step:last-child { border-top-color: rgba(95, 191, 155, .45); }
.recovery-step::before {
  content: ""; position: absolute; top: -3px; left: 0;
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-400);
}
.recovery-step:last-child::before { background: var(--ok); }
.recovery-step-num {
  font: 500 10px var(--font-heading); letter-spacing: .16em; color: var(--ink-45);
}
.recovery-step-name {
  display: block; margin-top: 7px;
  font: 500 15px var(--font-heading); letter-spacing: -.01em; color: #fff;
}
.recovery-step-desc {
  display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-60);
}
.recovery-foot { margin: 24px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-60); max-width: 760px; }

/* ── Mega-menu item descriptions (§23) ─────────────────────────────────── */
.mega-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mega-item-label { font-weight: 500; }
.mega-item-desc { font-size: 11.5px; line-height: 1.4; color: var(--ink-45); }

@media (max-width: 1060px) {
  .respauth-levels { grid-template-columns: minmax(0, 1fr); }
  .recovery-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
}
@media (max-width: 620px) {
  .recovery-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .respauth-scale { font-size: 9px; gap: 10px; }
  .contain { padding: 24px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Canonical platform architecture (spec 120-121)
   One vertical spine. Autonomir Endpoint holds the top tier because the
   hierarchy is the point of the diagram, not a styling preference.
   ═══════════════════════════════════════════════════════════════════════ */
.parch {
  margin-top: 48px; display: flex; flex-direction: column; align-items: stretch;
  max-width: 860px; margin-inline: auto;
}

/* ── Tier one: the product and every endpoint class it covers ──────────── */
.parch-head {
  border: 1px solid rgba(77, 148, 214, .38); border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(29, 63, 99, .46), rgba(21, 29, 44, .5));
  padding: 24px 26px;
}
.parch-head-id { display: flex; flex-direction: column; gap: 4px; }
.parch-head-name {
  font: 500 clamp(21px, 2.4vw, 27px) var(--font-heading);
  letter-spacing: -.02em; color: #fff;
}
.parch-head-sub {
  font: 500 11px var(--font-heading); letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-accent-300);
}
.parch-eps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin-top: 20px;
}
.parch-ep {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 6px; border: 1px solid var(--line-3); border-radius: var(--radius);
  background: rgba(13, 18, 30, .45);
  font: 500 13px var(--font-heading); color: var(--ink-80);
}
.parch-ep img { width: 17px; height: 17px; object-fit: contain; opacity: .9; flex: none; }

/* ── The spine ─────────────────────────────────────────────────────────
   A 26px connector carrying a single descending pulse. The pulse is the
   only motion in the diagram: it says signal moves downward through the
   stages, which is the one thing a static version cannot say. */
.parch-flow {
  position: relative; align-self: center;
  width: 1px; height: 26px; flex: none;
  background: linear-gradient(180deg, rgba(77, 148, 214, .5), rgba(77, 148, 214, .18));
}
.parch-flow::after {
  content: ""; position: absolute; left: -2px; top: 0;
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-400);
  opacity: 0;
}
@keyframes parchPulse {
  0% { transform: translateY(0); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateY(21px); opacity: 0; }
}
.motion-ready .parch-flow::after {
  animation: parchPulse 4.4s cubic-bezier(.4, 0, .6, 1) infinite;
  animation-delay: var(--d, 0s);
}

/* ── Middle stages ─────────────────────────────────────────────────────── */
.parch-stage {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 20px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: rgba(21, 29, 44, .42); padding: 15px 20px;
}
.parch-stage-name {
  display: inline-flex; align-items: baseline; gap: 10px;
  font: 500 16.5px var(--font-heading); letter-spacing: -.012em; color: #fff;
}
.parch-stage-name i {
  font: 500 9.5px var(--font-heading); font-style: normal;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-300);
}
.parch-stage-desc { font-size: 13.5px; color: var(--ink-60); }
/* SAFE and Decision AI are the two proprietary stages, so they carry the
   accent edge — everything else in the spine is a stage, these are the
   differentiators. */
.parch-stage--safe, .parch-stage--decision {
  border-color: rgba(77, 148, 214, .3); background: rgba(29, 63, 99, .3);
}

/* ── Authority and enforcement tiers ───────────────────────────────────── */
.parch-tier {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: rgba(21, 29, 44, .38); padding: 16px 20px 18px;
}
.parch-tier-label {
  display: block; font: 500 9.5px var(--font-heading);
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-300);
}
.parch-tier-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.parch-auth, .parch-enf {
  font: 500 12.5px var(--font-heading); letter-spacing: .01em;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-3); color: var(--ink-80);
  background: rgba(13, 18, 30, .4);
}
/* The three authority levels shade from human control to autonomous, which
   is the same left-to-right reading the response-authority block uses. */
.parch-auth--0 { border-color: var(--line-3); }
.parch-auth--1 { border-color: rgba(77, 148, 214, .32); }
.parch-auth--2 { border-color: rgba(77, 148, 214, .55); color: var(--color-accent-200); background: rgba(29, 63, 99, .4); }
.parch-tier--authority { border-color: rgba(77, 148, 214, .22); }

/* ADM: an extension hanging off enforcement, visually subordinate to it. */
.parch-ext {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-3);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.parch-ext-tag {
  font: 500 9px var(--font-heading); letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint, var(--ink-45));
}
.parch-ext-name { font: 500 14.5px var(--font-heading); color: #fff; letter-spacing: -.01em; }
.parch-ext-desc { font-size: 13px; color: var(--ink-60); flex: 1 1 240px; }

/* ── Outcome ───────────────────────────────────────────────────────────── */
.parch-outcome {
  border: 1px solid rgba(95, 191, 155, .35); border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(24, 54, 45, .42), rgba(21, 29, 44, .46));
  padding: 20px 24px; display: flex; flex-direction: column; gap: 6px;
}
.parch-outcome-name {
  font: 500 clamp(18px, 2vw, 22px) var(--font-heading); letter-spacing: -.015em; color: #fff;
}
.parch-outcome-desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-60); max-width: 62ch; }

@media (max-width: 620px) {
  .parch-eps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parch-head { padding: 20px 18px; }
  .parch-stage { padding: 13px 16px; }
  .parch-stage-name { font-size: 15.5px; }
  .parch-tier, .parch-outcome { padding: 14px 16px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Product hierarchy (spec 22, 41, 121)
   Endpoint dominant; ADM and SAFE supporting. The size difference is the
   argument — four equal cards let a reader conclude the four are peers and
   that mobile is one of them.
   ═══════════════════════════════════════════════════════════════════════ */
.plead {
  display: block; margin-top: 44px; text-decoration: none; color: inherit;
  border: 1px solid rgba(77, 148, 214, .38); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(29, 63, 99, .44), rgba(21, 29, 44, .5));
  transition: border-color .3s ease, transform .3s ease;
}
.plead:hover { border-color: rgba(77, 148, 214, .62); transform: translateY(-3px); color: inherit; }
.plead-main { padding: 30px 32px 26px; }
.plead-id { display: flex; align-items: center; gap: 16px; }
.plead-name {
  font: 500 clamp(24px, 2.9vw, 34px) var(--font-heading);
  letter-spacing: -.022em; line-height: 1.08; color: #fff;
}
.plead-sub {
  margin-top: 5px; font: 500 10.5px var(--font-heading);
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-300);
}
.plead-body {
  margin: 20px 0 0; max-width: 68ch;
  font-size: 15.5px; line-height: 1.65; color: var(--ink-60);
}
.plead-plats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.plead-plats span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-3); background: rgba(13, 18, 30, .42);
  font: 500 13px var(--font-heading); color: var(--ink-80);
}
.plead-plats img { width: 16px; height: 16px; object-fit: contain; opacity: .9; }
/* The two environments inside the product, named so a reader sees mobile is
   part of this card rather than missing from the page. */
.plead-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  padding: 16px 32px; border-top: 1px solid rgba(77, 148, 214, .2);
  background: rgba(13, 18, 30, .28);
}
.plead-split { font-size: 12.5px; color: var(--ink-60); }
.plead-split b {
  display: block; font: 500 13px var(--font-heading); color: #fff; letter-spacing: -.005em;
}
.plead-cta {
  margin-left: auto; font: 500 13.5px var(--font-heading); color: var(--color-accent-300);
}

.psupport { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.psupport-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: rgba(21, 29, 44, .42); padding: 24px 26px;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.psupport-card:hover {
  border-color: rgba(77, 148, 214, .45); background: rgba(29, 63, 99, .26);
  transform: translateY(-3px); color: inherit;
}
.psupport-name {
  margin-top: 14px; font: 500 20px var(--font-heading);
  letter-spacing: -.015em; color: #fff;
}
.psupport-sub {
  margin-top: 4px; font: 500 10px var(--font-heading);
  letter-spacing: .13em; text-transform: uppercase; color: var(--color-accent-300);
}
.psupport-body { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-60); }
.psupport-more {
  display: inline-block; margin-top: 16px;
  font: 500 13px var(--font-heading); color: var(--color-accent-300);
}

@media (max-width: 820px) {
  .psupport { grid-template-columns: minmax(0, 1fr); }
  .plead-main { padding: 24px 20px 22px; }
  .plead-foot { padding: 14px 20px; }
  .plead-cta { margin-left: 0; }
}

/* ── 320px overflow guard (spec 150) ───────────────────────────────────
   Two long-standing offenders showed up in a 320px sweep. Both are
   decorative and both were spilling past the viewport, which only stayed
   invisible because body carries overflow-x: hidden — the page was scrolling
   sideways by 13px underneath that.

   .safe-orbit / .safe-bloom are fixed 400px rings (300px under 620px) behind
   a stage that is narrower than they are, so they overhang on both sides.
   Clamping them to the stage keeps the halo without the overhang. */
@media (max-width: 380px) {
  .safe-orbit, .safe-bloom { width: 260px; height: 260px; }
  /* The mock window controls sit in a chrome row that is 3px wider than a
     320px viewport once padding is counted. */
  .desktop-wincontrols { display: none; }
}