/* Heimdall (/heimdall/), in Heimdall's own "Signal" brand (heimdall-cover-pack-2026-09-26): void ground, one
   signal colour (mint), JetBrains Mono only, zero radius, corner ticks, the Bifrost line under the header and
   between the page's acts. Owned by the Heimdall page builder, with src/assets/pages/heimdall/ (marks, favicon,
   scripts).

   Contents: 1. fonts  2. tokens and chrome  3. the Heimdall animation pack's CSS (heimdall-anim.css, repaired, its
   CSS-module class names made plain page classes)  4. the page. */

/* ---- 1. fonts: JetBrains Mono 400/500/700, latin, self-hosted (OFL: /assets/fonts/OFL-JetBrainsMono.txt, from
   @fontsource/jetbrains-mono 5.3.0). Characters outside latin (the runes, the block cursor) fall back to the
   system monospace stack. */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- 2. tokens and chrome. The header is 56px here (chrome.css reads --chrome-h from :root; this stylesheet
   loads only on /heimdall/). */
:root{--chrome-h:56px}
html{background:#04070e}
body[data-page="heimdall"]{
  /* Signal palette */
  --hd-void:#04070e; --hd-text:rgba(235,255,247,.92); --hd-dim:rgba(235,255,247,.64); --hd-label:rgba(235,255,247,.6);
  --hd-mint:#00ffb2; --hd-on-mint:#021008; --hd-blue:#59a7ff; --hd-amber:#ffb700; --hd-red:#ff4d6d;
  --hd-line:rgba(255,255,255,.08); --hd-hair:rgba(255,255,255,.05); --hd-fill:rgba(255,255,255,.014);
  --hd-font:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* the names the animation pack's CSS uses */
  --mint:var(--hd-mint); --blue:var(--hd-blue); --amber:var(--hd-amber); --red:var(--hd-red);
  --text-primary:var(--hd-text); --text-dim:var(--hd-dim); --cta-on-mint:var(--hd-on-mint);
  --tick-color:rgba(0,255,178,.55); --panel-border:var(--hd-line); --panel-fill:var(--hd-fill);
  /* the shared chrome, in Heimdall's identity; the Lunar half-moon stays (it is Lunar's site) */
  --chrome-bg:rgba(4,7,14,.8); --chrome-menu-bg:#04070e;
  --chrome-fg:var(--hd-text); --chrome-dim:rgba(235,255,247,.66); --chrome-line:var(--hd-line);
  --chrome-accent:var(--hd-mint); --chrome-on-accent:var(--hd-on-mint); --chrome-mark:var(--hd-text);
  --chrome-font:var(--hd-font); --chrome-radius:0;
  --chrome-rule:linear-gradient(90deg,#00ffb2 0%,#59a7ff 38%,#ffb700 70%,#ff4d6d 100%); --chrome-rule-h:2px; --chrome-rule-opacity:.85;
  background:var(--hd-void); color:var(--hd-text); font-family:var(--hd-font); font-size:15px; line-height:1.6;
}
body[data-page="heimdall"] a:hover{color:var(--hd-mint)}
body[data-page="heimdall"] .site-top .site-cta{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px}

/* ---- 3. the Heimdall animation pack's CSS (heimdall-anim.css, heimdall-design e7311e1, pack sha256 f40e73e0…e1f9,
   globals.css and marketing.module.css). Two rules the extraction cut are restored in full: the panel with its corner ticks (the
   file began mid-rule, at the bottom-right tick) and the section kicker (the file ended inside
   .sectionKickerText). CSS-module names are now plain classes: heroTitleCursor -> hd-cursor, heroSub ->
   hd-hero-sub, heroCtas -> hd-hero-ctas, section -> hd-sec, sectionKicker(-Rune, -Line, -Text) -> hd-kicker(-rune,
   -line, -text), sectionTitle -> hd-title; heroCursorBlink -> heimdall-cursor-blink. Page changes: the focus ring
   is 2px (the pack's 1px at .6 is hard to see), and kicker text is 11px, not 9px (the designer's legibility note). */
.heimdall-panel{position:relative;border:1px solid var(--panel-border);background:var(--panel-fill);border-radius:0}
.heimdall-panel::before,.heimdall-panel::after{content:"";position:absolute;width:7px;height:7px;pointer-events:none}
.heimdall-panel::before{top:-1px;left:-1px;border-top:1px solid var(--tick-color);border-left:1px solid var(--tick-color)}
.heimdall-panel::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--tick-color);border-right:1px solid var(--tick-color)}

/* Bifrost line: the allow -> info -> sample -> block spectrum; the page's only rainbow */
.heimdall-bifrost{display:block;height:2px;width:100%;opacity:.85;background:linear-gradient(90deg,var(--mint) 0%,var(--blue) 38%,var(--amber) 70%,var(--red) 100%);border:0;margin:0;padding:0;flex-shrink:0}

/* runic band (Hagalaz row) */
.heimdall-runes{font-family:"JetBrains Mono",monospace;color:rgba(0,255,178,.28);letter-spacing:.55em;font-size:12px}

/* scanline atmosphere */
.heimdall-scanline{position:absolute;inset:0;pointer-events:none;opacity:.22;background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);z-index:1}

/* aurora backdrop (radial-gradient fallback) */
.heimdall-aurora{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 40% at 30% 30%,rgba(0,255,178,.08),transparent 60%),radial-gradient(ellipse 50% 35% at 70% 40%,rgba(95,220,255,.06),transparent 60%),radial-gradient(ellipse 45% 30% at 50% 60%,rgba(150,130,255,.05),transparent 60%)}

/* buttons */
.heimdall-btn{display:inline-block;background:var(--mint);color:var(--cta-on-mint);border:0;font:inherit;font-weight:700;letter-spacing:.08em;padding:13px 26px;font-size:12px;cursor:pointer;text-transform:uppercase;border-radius:0;transition:filter 160ms ease}
.heimdall-btn:hover{filter:brightness(1.08)}
.heimdall-btn-outline{display:inline-block;background:transparent;color:var(--text-dim);border:1px solid rgba(255,255,255,.2);font:inherit;font-weight:600;padding:13px 26px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:0;transition:color 160ms ease,border-color 160ms ease}
.heimdall-btn-outline:hover{color:var(--text-primary);border-color:rgba(255,255,255,.4)}

/* live indicator dot. Steady: a status indicator never blinks or pulses on its own (WCAG 2.2.2). */
.heimdall-live-dot{display:inline-block;flex:none;width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 4px var(--mint)}

/* shared widget animations; the reduced-motion rule below covers them. None runs forever (WCAG 2.2.2): use the
   classes below, or the same finite counts. */
@keyframes heimdall-blink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes heimdall-row-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* Glow only: the chip's text stays fully opaque. */
@keyframes heimdall-pulse-red{0%,100%{box-shadow:0 0 8px var(--red)}50%{box-shadow:0 0 3px var(--red)}}
/* Text cursor: 8 blinks, then it stays on (the last keyframe is opacity 1). */
.heimdall-blink{animation:heimdall-blink 1.1s ease-in-out 8 forwards}
/* Verdict chip (here EXCLUDE): the red glow pulses 6 times (4.8s), then holds. */
.heimdall-pulse-red{animation:heimdall-pulse-red .8s ease-in-out 6 forwards}

/* focus visible (2px on this page; see the note above) */
body[data-page="heimdall"] :focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:0}

/* reduced motion: the kill switch */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}
/* Pause (WCAG 2.2.2 Pause, Stop, Hide): the page's Pause control (motion.js) sets this class on <html>, and every
   CSS animation under it holds its frame; the canvases stop on a static frame. */
.heimdall-motion-paused *,.heimdall-motion-paused *::before,.heimdall-motion-paused *::after{animation-play-state:paused !important}
/* (page) motion.js also sets its own hd-paused on <html>, with the same effect */
html.hd-paused *,html.hd-paused *::before,html.hd-paused *::after{animation-play-state:paused !important}

/* scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:rgba(0,255,178,.3)}

/* aurora blob layer: the hero's fallback (no script) and, frozen, its reduced-motion frame */
.heimdall-aurora-blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.heimdall-aurora-blobs > i{position:absolute;display:block;border-radius:50%;filter:blur(90px)}
.heimdall-aurora-blobs > i:nth-child(1){width:720px;height:480px;background:rgba(0,255,178,.14);top:-200px;left:16%}
.heimdall-aurora-blobs > i:nth-child(2){width:540px;height:430px;background:rgba(95,220,255,.10);top:-120px;right:10%}
.heimdall-aurora-blobs > i:nth-child(3){width:440px;height:380px;background:rgba(150,130,255,.07);top:260px;left:38%}
@media (prefers-reduced-motion:no-preference){
  @keyframes heimdall-blob-a{from{transform:translate(0,0) scale(1)}to{transform:translate(140px,70px) scale(1.18)}}
  @keyframes heimdall-blob-b{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-120px,90px) scale(.92)}}
  @keyframes heimdall-blob-c{from{transform:translate(0,0)}to{transform:translate(90px,-60px) scale(1.25)}}
  .heimdall-aurora-blobs > i:nth-child(1){animation:heimdall-blob-a 16s ease-in-out infinite alternate}
  .heimdall-aurora-blobs > i:nth-child(2){animation:heimdall-blob-b 21s ease-in-out infinite alternate}
  .heimdall-aurora-blobs > i:nth-child(3){animation:heimdall-blob-c 26s ease-in-out infinite alternate}
}

/* dot grid: radial dots on a 32px grid, drifting 0 -> 32px over 16s */
.heimdall-dotgrid{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(0,255,178,.08) 1px,transparent 1px);background-size:32px 32px}
@media (prefers-reduced-motion:no-preference){
  @keyframes heimdall-dot-drift{from{background-position:0 0}to{background-position:32px 32px}}
  .heimdall-dotgrid{animation:heimdall-dot-drift 16s linear infinite}
}

/* hero cursor (was .heroTitleCursor): 8 blinks, then it stops (WCAG 2.2.2); no forwards fill (the last keyframe is
   opacity 0), so it ends visible */
.hd-cursor{font-weight:400;display:inline-block;animation:heimdall-cursor-blink 1.1s steps(2) 8;animation-fill-mode:none}
@keyframes heimdall-cursor-blink{to{opacity:0}}

/* hero sub and CTAs (were .heroSub, .heroCtas) */
.hd-hero-sub{color:var(--text-dim);font-size:14px;line-height:1.7;max-width:640px;margin:0 auto 22px}
.hd-hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* section (was .section) */
.hd-sec{position:relative;max-width:1200px;margin:0 auto;padding:48px 48px 0}
@media (max-width:768px){.hd-sec{padding:32px 20px 0}}

/* section kicker and title (were .sectionKicker, .sectionKickerRune, .sectionKickerLine, .sectionKickerText,
   .sectionTitle); the kicker rune is picked from the runic band by kicker length */
.hd-kicker{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.hd-kicker-rune{color:var(--mint);font-size:13px}
.hd-kicker-line{display:inline-block;width:22px;height:1px;background:rgba(0,255,178,.4)}
.hd-kicker-text{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);font-weight:500}
.hd-title{font-size:32px;font-weight:700;text-transform:uppercase;line-height:1.12;margin:0 0 14px;max-width:860px;letter-spacing:0;color:var(--text-primary)}

/* ---- 4. the page ---------------------------------------------------------------------------------------- */

/* layout: sections are full-bleed (their backgrounds run edge to edge); .hd-wrap holds the content column */
body[data-page="heimdall"] .hd-sec{max-width:none;margin:0;padding:clamp(56px,7vw,96px) 0}
.hd-wrap{position:relative;z-index:1;box-sizing:border-box;width:100%;max-width:calc(1200px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.hd-sec-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hd-sec-bg > canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.hd-kicker{flex-wrap:wrap;row-gap:8px}
.hd-kicker .hd-chip{margin-left:6px}
.hd-title{font-size:clamp(23px,3.4vw,32px);text-wrap:balance}
.hd-lede{max-width:760px;font-size:15px;line-height:1.75;color:var(--hd-dim)}
.hd-mint{color:var(--hd-mint)}
.hd-act{position:relative;z-index:2}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* grids and cards */
.hd-grid{display:grid;gap:16px;margin-top:36px}
.hd-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hd-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hd-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.hd-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.hd-grid-3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.hd-grid-2,.hd-grid-4{grid-template-columns:minmax(0,1fr)}}
.hd-card{min-width:0;padding:24px 24px 26px}
.hd-card h3{margin:14px 0 10px;font-size:15px;font-weight:700;line-height:1.35;text-transform:uppercase;letter-spacing:.02em;color:var(--hd-text)}
.hd-card p{font-size:14px;line-height:1.7;color:var(--hd-dim)}
.hd-card p + p{margin-top:10px}
.hd-card-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.hd-card-top + p{margin-top:14px}
.hd-surface .hd-card-top{justify-content:flex-start}
.hd-idx{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--hd-label)}
.hd-chips{display:flex;flex-wrap:wrap;gap:6px}

/* status chips: BUILT (mint), SHADOW MODE (blue), NEXT (dashed); roadmap lanes add NEXT (amber) and AFTER THAT
   (red) on the Bifrost spectrum; "Astra's side" and context tags are neutral */
.hd-chip{display:inline-flex;align-items:center;gap:7px;min-height:22px;box-sizing:border-box;padding:3px 8px;border:1px solid;font-size:10.5px;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;vertical-align:middle}
.hd-chip::before{content:"";flex:none;width:5px;height:5px;background:currentColor}
.hd-chip--built{color:var(--hd-mint);border-color:rgba(0,255,178,.45);background:rgba(0,255,178,.06)}
.hd-chip--rolling{color:var(--hd-blue);border-color:rgba(89,167,255,.5);background:rgba(89,167,255,.07)}
.hd-chip--roadmap{color:rgba(235,255,247,.74);border-color:rgba(235,255,247,.32);border-style:dashed}
.hd-chip--roadmap::before{background:transparent;box-shadow:inset 0 0 0 1px currentColor}
.hd-chip--later{color:var(--hd-red);border-color:rgba(255,77,109,.5);background:rgba(255,77,109,.06)}
.hd-chip--neutral{color:rgba(235,255,247,.7);border-color:rgba(235,255,247,.22)}
.hd-chip--neutral::before{display:none}

/* "Illustrative" labels on every mock */
.hd-illus-tag{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border:1px dashed rgba(235,255,247,.35);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(235,255,247,.74)}
.hd-illus{margin-top:22px;font-size:11px;letter-spacing:.08em;color:var(--hd-label)}

/* typed text (PmType): the real text stays in .hd-type-full; the aria-hidden .hd-type-live is typed over it */
.hd-type{display:grid}
.hd-type > .hd-type-full,.hd-type > .hd-type-live{grid-area:1/1;min-width:0}
.hd-type.is-typing > .hd-type-full{color:transparent;text-shadow:none}
/* (page) the typed copy holds the untyped rest in a transparent span, so the line wraps and centres as it will end,
   and a zero-width caret, so the caret never moves the text */
.hd-type-ghost{color:transparent;text-shadow:none}
.hd-type-caret{position:relative}
.hd-type-caret::before{content:"▌";position:absolute;left:0;top:0;color:var(--hd-mint);text-shadow:none;animation:heimdall-cursor-blink 1.1s steps(2) 8}
.hd-row-in{animation:heimdall-row-in 480ms cubic-bezier(.2,.7,.2,1) both}

/* ---- §0 hero */
.hd-cover{text-align:center;padding-bottom:88px;background:var(--hd-void)}
.hd-cover .cover-bg{background:var(--hd-void)}
.hd-cover .cover-bg > canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
.hd-cover .cover-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;z-index:2;background:linear-gradient(180deg,rgba(4,7,14,0),var(--hd-void))}
.hd-cover.hd-sky-on .heimdall-aurora-blobs{display:none}
.hd-hero{display:flex;flex-direction:column;align-items:center;padding-block:48px 16px}
.hd-lockup{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;font-size:13px;text-shadow:0 0 14px var(--hd-void),0 0 3px var(--hd-void)}
.hd-lockup svg{display:block;width:auto;height:22px;color:var(--hd-mint)}
.hd-word{font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hd-text)}
.hd-word-cursor{color:var(--hd-mint);font-weight:400}
.hd-by{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hd-label)}
.hd-hero-kicker{margin-top:30px;padding:6px 16px;border:1px solid rgba(0,255,178,.3);background:rgba(4,7,14,.55);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--hd-mint)}
.hd-cover h1{margin-top:28px;max-width:1120px;font-size:clamp(29px,6.2vw,76px);font-weight:700;line-height:1.05;letter-spacing:0;text-transform:uppercase;color:var(--hd-text);text-shadow:0 0 24px rgba(4,7,14,.6)}
.hd-h1-a,.hd-h1-b{display:block;text-wrap:balance}
.hd-h1-b{color:var(--hd-mint)}
.hd-cover .hd-hero-sub{margin:26px auto 0;font-size:15px;color:rgba(235,255,247,.8);text-shadow:0 0 14px var(--hd-void),0 0 3px var(--hd-void)}
.hd-status{display:inline-flex;align-items:center;gap:10px;padding:7px 12px;border:1px solid rgba(0,255,178,.3);background:rgba(4,7,14,.7);font-size:12px;line-height:1.4;text-align:left;color:var(--hd-text)}
/* the status as the site's Early access label: a neutral outline and fill, no live dot */
.hd-status--ea{border-color:rgba(235,255,247,.42);background:linear-gradient(rgba(235,255,247,.06),rgba(235,255,247,.06)),rgba(4,7,14,.7);letter-spacing:.06em}
.hd-cover .hd-status{margin-top:26px}
.hd-cover .hd-hero-ctas{margin-top:26px}
.hd-hero-ctas .heimdall-btn,.hd-hero-ctas .heimdall-btn-outline,.hd-cta .heimdall-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;box-sizing:border-box}
.hd-hero-ctas .heimdall-btn-outline{background:rgba(4,7,14,.5)}
.heimdall-btn:hover,.heimdall-btn:focus-visible{color:var(--cta-on-mint)}
.hd-cover-note{position:absolute;left:0;right:0;bottom:18px;z-index:1;margin:0 auto;box-sizing:border-box;max-width:calc(1200px + 2 * var(--gutter));padding-inline:var(--gutter);text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hd-label)}

/* status key under the hero */
.hd-legend{position:relative;z-index:1;margin-top:8px}
.hd-legend-in{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:14px 28px;align-items:start;padding:18px 22px}
.hd-legend-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hd-legend-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hd-label);padding-top:3px}
.hd-motion{padding:8px 14px;font-size:11px;min-height:36px}
.hd-motion[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.hd-motion{display:none}}
.hd-legend ul{display:contents;list-style:none}
.hd-legend li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:13px;line-height:1.55;color:var(--hd-dim)}
@media (max-width:900px){.hd-legend-in{grid-template-columns:minmax(0,1fr)}}

/* ---- §1 the problem, over the SgWaveBg call */
.hd-problem{box-sizing:border-box;min-height:680px}
.hd-problem .hd-sec-bg > canvas{opacity:.4}
.hd-problem-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:640px;margin:36px 0 0;padding:0;list-style:none}
.hd-problem-list > li{display:flex;gap:18px;padding:22px 24px;background:rgba(4,7,14,.86)}
.hd-problem-list .hd-idx{padding-top:3px}
.hd-problem-list p{font-size:15px;line-height:1.7;color:var(--hd-text)}

/* ---- §2 the idea, over the dot grid */
.hd-idea .heimdall-dotgrid{-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 80%)}
.hd-idea .hd-card{background:rgba(4,7,14,.82)}

/* ---- §3 anatomy of a decision: a pipeline, one tier per row */
.hd-pipe{position:relative;max-width:980px;margin:40px 0 0;padding:0;list-style:none}
.hd-pipe::before{content:"";position:absolute;left:19px;top:20px;bottom:40px;width:1px;background:rgba(0,255,178,.3)}
.hd-pipe > li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:20px;padding-bottom:20px}
.hd-pipe > li:last-child{padding-bottom:0}
.hd-pipe-step{display:grid;place-items:center;width:40px;height:40px;box-sizing:border-box;border:1px solid rgba(0,255,178,.5);background:var(--hd-void);font-size:12px;font-weight:700;color:var(--hd-mint)}
.hd-pipe-body{min-width:0;padding:18px 22px 20px}
.hd-pipe-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:10px}
.hd-pipe-head h3{margin:0 6px 0 0;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--hd-text)}
.hd-pipe-body p{font-size:14px;line-height:1.7;color:var(--hd-dim)}
/* (b) the first-release note sits directly under "Watch only, flag, or block: you choose.", at the same size and
   in full text colour: never smaller, muted, collapsible or hidden */
.hd-pipe-body p.hd-first-release{margin-top:6px;color:var(--hd-text)}
.hd-pipe-when{display:block;margin-bottom:6px;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--hd-label)}

/* ---- §4 what a call gives away: the fingerprint card and the five layers */
.hd-fp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:40px}
@media (min-width:1001px){.hd-fpcard{position:sticky;top:calc(var(--chrome-h) + 28px)}}
@media (max-width:1000px){.hd-fp-grid{grid-template-columns:minmax(0,1fr)}}
.hd-fpcard{min-width:0;margin:0;background:rgba(4,7,14,.9);font-size:13px}
.hd-panel-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:12px 16px;border-bottom:1px solid var(--hd-line);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hd-text)}
.hd-panel-head > span:first-child{display:inline-flex;align-items:center;gap:10px}
.hd-sq{display:inline-block;flex:none;width:6px;height:6px;background:var(--hd-mint)}
.hd-fprows{margin:0}
.hd-fprows > div{display:grid;grid-template-columns:106px minmax(0,1fr);gap:4px 14px;padding:12px 16px;border-bottom:1px solid var(--hd-hair)}
.hd-fprows dt{padding-top:1px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hd-mint)}
.hd-fprows dd{margin:0;min-width:0;line-height:1.55;overflow-wrap:anywhere}
.hd-fp-claim{display:block;color:var(--hd-label)}
.hd-fp-seen{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;color:var(--hd-text)}
.hd-fp-seen > b{font-weight:400;color:var(--hd-label)}
.hd-fp-sig{display:grid;grid-template-columns:106px minmax(0,1fr);gap:4px 14px;padding:14px 16px 4px;margin:0}
.hd-fp-sig > span:first-child,.hd-fp-result > span:first-child{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hd-label)}
.hd-fp-sig code{font:inherit;font-weight:700;letter-spacing:.04em;color:var(--hd-mint);overflow-wrap:anywhere}
.hd-fp-result{display:grid;grid-template-columns:106px minmax(0,1fr);gap:4px 14px;padding:8px 16px 14px;margin:0}
.hd-fp-foot{padding:10px 16px 12px;border-top:1px solid var(--hd-hair);font-size:11px;letter-spacing:.06em;color:var(--hd-label)}
@media (max-width:480px){.hd-fprows > div,.hd-fp-sig,.hd-fp-result{grid-template-columns:minmax(0,1fr)}}
.hd-layers{display:grid;gap:12px}
.hd-layer{padding:18px 20px 20px}
.hd-layer .hd-pipe-head{margin-bottom:8px}
.hd-layer p{font-size:14px;line-height:1.7;color:var(--hd-dim)}
.hd-note{display:block;margin-top:8px;font-size:12px;letter-spacing:.02em;color:var(--hd-label)}
.hd-closer{margin-top:52px;max-width:940px;font-size:clamp(18px,2.4vw,26px);font-weight:700;line-height:1.35;text-transform:uppercase;color:var(--hd-text);text-wrap:balance}

/* ---- §5 see the campaign: the node graph (SVG, drifted by heimdall-page.js) */
.hd-graph{margin:40px 0 0;background:rgba(4,7,14,.6)}
.hd-graph svg{display:block;width:100%;height:auto}
.ng-ring{fill:none;stroke:rgba(255,255,255,.08);stroke-dasharray:3 5}
.ng-link{stroke:rgba(0,255,178,.3);stroke-width:1}
.ng-carrier-link{stroke:rgba(89,167,255,.45);stroke-width:1;stroke-dasharray:4 4}
.ng-num circle{fill:rgba(235,255,247,.78)}
.ng-num:nth-of-type(3n) circle{fill:rgba(235,255,247,.35)}
.ng-stray circle{fill:rgba(235,255,247,.3)}
.ng-key rect{fill:var(--hd-mint)}
.ng-key .ng-key-halo{fill:none;stroke:rgba(0,255,178,.45)}
.ng-carrier rect{fill:var(--hd-void);stroke:var(--hd-blue);stroke-width:1.5}
.hd-legend-row{display:flex;flex-wrap:wrap;gap:10px 26px;padding:12px 16px;border-top:1px solid var(--hd-line);font-size:12px;color:var(--hd-dim)}
.hd-legend-row span{display:inline-flex;align-items:center;gap:10px}
.hd-legend-row i{display:inline-block;flex:none}
.lg-key{width:9px;height:9px;background:var(--hd-mint)}
.lg-num{width:7px;height:7px;border-radius:50%;background:rgba(235,255,247,.78)}
.lg-car{width:9px;height:9px;box-sizing:border-box;border:1.5px solid var(--hd-blue)}

/* ---- §6 two surfaces */
.hd-surface{padding:24px 24px 26px}
.hd-surface svg{display:block;width:100%;max-width:260px;height:auto;margin:6px 0 16px}
.hd-surface h3{margin:0 0 10px}

/* ---- §7 the 28 layers */
.hd-sec.hd-layers28 .heimdall-dotgrid{-webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
.hd-cells{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px;max-width:600px;margin-top:32px}
.hd-cells i{display:block;aspect-ratio:1;border:1px solid rgba(0,255,178,.3);background:rgba(0,255,178,.05)}
@media (prefers-reduced-motion:no-preference){
  .hd-cells i{animation:hd-cell-scan 16.8s linear infinite;animation-delay:calc(var(--i) * .6s)}
}
@keyframes hd-cell-scan{0%{background:rgba(0,255,178,.5)}6%,100%{background:rgba(0,255,178,.05)}}
@media (max-width:560px){.hd-cells{gap:4px}}
.hd-cells-cap{margin-top:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hd-label)}
.hd-group{padding:20px 20px 22px;background:rgba(4,7,14,.82)}
.hd-group h3{margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hd-mint)}
.hd-group p{font-size:14px;line-height:1.7;color:var(--hd-dim)}
.hd-both{margin-top:28px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-wrap:balance}

/* ---- §8 built into Astra, standalone for PBXs: the paths diagram */
.hd-paths{margin:40px 0 0;display:grid;gap:14px}
.hd-lane{padding:18px 20px 20px}
.hd-lane-label{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:16px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hd-text)}
.hd-flow{display:flex;align-items:stretch;gap:30px;margin:0;padding:0;list-style:none}
.hd-flow > li{position:relative;flex:1 1 0;min-width:0;box-sizing:border-box;padding:12px 14px;border:1px solid var(--hd-line);background:rgba(255,255,255,.02);font-size:12.5px;line-height:1.45;color:var(--hd-dim)}
.hd-flow > li b{display:block;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hd-text)}
.hd-flow > li + li::before{content:"→";position:absolute;left:-23px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--hd-mint)}
.hd-flow > li.is-hd{border-color:rgba(0,255,178,.55);background:rgba(0,255,178,.05)}
.hd-flow > li.is-hd b{color:var(--hd-mint)}
.hd-flow > li.is-opt{border-style:dashed}
.hd-flow > li.is-back::before{content:"←"}
@media (max-width:900px){
  .hd-flow{flex-direction:column;gap:26px}
  .hd-flow > li + li::before{content:"↓";left:16px;top:-22px;transform:none}
  .hd-flow > li.is-back::before{content:"↓"}
}
.hd-lane-copy{max-width:860px;margin-top:16px;font-size:14px;line-height:1.7;color:var(--hd-dim)}
.hd-astra-note{margin-top:20px;font-size:13px;color:var(--hd-dim)}
.hd-astra-note a{color:var(--hd-text);text-decoration:underline;text-decoration-color:rgba(0,255,178,.5);text-underline-offset:4px}

/* ---- §9 false answer supervision: the console mock */
.hd-console{margin:40px 0 0;background:rgba(4,7,14,.9);font-size:12.5px}
.hd-console-cols,.hd-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.1fr) 96px;gap:12px;align-items:center;padding:0 16px}
.hd-console-cols{min-height:34px;border-bottom:1px solid var(--hd-hair);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--hd-label)}
.hd-console-rows{height:calc(5 * 46px);margin:0;padding:0;overflow:hidden;list-style:none}
.hd-row{height:46px;box-sizing:border-box;border-bottom:1px solid var(--hd-hair);color:var(--hd-dim)}
.hd-row .c-vendor{font-weight:700;color:var(--hd-text)}
.hd-row .c-verdict{justify-self:start}
.hd-v{display:inline-flex;align-items:center;min-height:20px;padding:1px 8px;border:1px solid;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.hd-v--ok{color:var(--hd-mint);border-color:rgba(0,255,178,.45)}
.hd-v--flag{color:var(--hd-amber);border-color:rgba(255,183,0,.5)}
/* Exclude: the pack's .heimdall-pulse-red (on the chip in the page) pulses the glow six times; the text stays fully
   opaque */
.hd-v--exclude{color:#ff6f89;border-color:var(--hd-red);background:rgba(255,77,109,.1)}
.hd-console figcaption{padding:10px 16px 12px;border-top:1px solid var(--hd-line);font-size:11px;letter-spacing:.04em;color:var(--hd-label)}
@media (max-width:760px){
  .hd-console-cols{display:none}
  .hd-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"v verdict" "s s" "m m";gap:2px 12px;height:84px;align-content:center}
  .hd-console-rows{height:calc(5 * 84px)}
  .hd-row .c-vendor{grid-area:v}.hd-row .c-verdict{grid-area:verdict;justify-self:end}.hd-row .c-signal{grid-area:s;color:var(--hd-text)}
  .hd-row .c-win,.hd-row .c-peer{grid-row:3;font-size:11.5px}
  .hd-row .c-win{grid-column:1}.hd-row .c-peer{grid-column:2;justify-self:end}
}

/* ---- §10 safe by design */
.hd-safe-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 36px;align-items:center;margin-top:36px;padding:26px 28px}
.hd-safe-top .hd-safe-nums{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.1;letter-spacing:.02em;color:var(--hd-mint)}
.hd-safe-top h3{margin:0 0 8px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.hd-safe-top p{font-size:15px;line-height:1.7;color:var(--hd-text)}
@media (max-width:700px){.hd-safe-top{grid-template-columns:minmax(0,1fr)}}
.hd-safe .hd-grid{margin-top:16px}

/* ---- §11 what's built, and what's next: four lanes (Built, Shadow mode, Next, After that). Next wears the dashed
   "Next" chip used across the page, and its lane rule is dashed to match (amber would read as a warning). */
.hd-road{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
@media (max-width:1000px){.hd-road{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hd-road{grid-template-columns:minmax(0,1fr)}}
.hd-road > section{min-width:0;padding:18px 18px 20px;border-top:2px solid var(--c)}
.hd-road > section::before{display:none}
.hd-road h3{margin:0}
.hd-road ul{margin:14px 0 0;padding:0;list-style:none}
.hd-road li{position:relative;padding:9px 0 9px 18px;border-top:1px solid var(--hd-hair);font-size:13.5px;line-height:1.6;color:var(--hd-dim)}
.hd-road li::before{content:"▸";position:absolute;left:0;top:9px;color:var(--c)}
.hd-road .is-built{--c:var(--hd-mint)}
.hd-road .is-rolling{--c:var(--hd-blue)}
.hd-road .is-next{--c:rgba(235,255,247,.5);border-top-style:dashed}
.hd-road .is-later{--c:var(--hd-red)}

/* ---- §12 the stat strip */
.hd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:36px 0 0}
.hd-stats > div{padding:22px 22px 24px;border-left:1px solid rgba(255,255,255,.07)}
.hd-stats > div:first-child{border-left:0}
.hd-stats dt{font-size:clamp(28px,3.6vw,40px);font-weight:700;line-height:1.1;color:var(--hd-mint)}
.hd-stats dd{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--hd-dim)}
.hd-stats dd b{display:block;margin-bottom:4px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--hd-text)}
@media (max-width:760px){
  .hd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hd-stats > div:nth-child(3){border-left:0}
  .hd-stats > div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.07)}
}

/* ---- §13 the CTA band */
.hd-cta{position:relative;overflow:hidden;text-align:center}
.hd-cta .heimdall-bifrost{position:relative;z-index:1}
.hd-cta-in{display:flex;flex-direction:column;align-items:center;padding-block:clamp(72px,9vw,120px)}
.hd-cta-mark{display:block;width:auto;height:44px;color:var(--hd-mint)}
.hd-cta .heimdall-runes{margin-top:22px;font-size:14px;padding-left:.55em}
.hd-cta h2{margin-top:20px;max-width:900px;font-size:clamp(26px,4.4vw,48px);font-weight:700;line-height:1.1;text-transform:uppercase;letter-spacing:0;text-wrap:balance}
.hd-cta .hd-status{margin-top:24px}
.hd-cta .heimdall-btn{margin-top:28px}
.hd-cta-mail{margin-top:18px;font-size:14px;color:var(--hd-dim)}
.hd-cta-mail a{color:var(--hd-text);text-decoration:underline;text-decoration-color:rgba(0,255,178,.5);text-underline-offset:4px;overflow-wrap:anywhere}

/* phones */
@media (max-width:560px){
  .hd-card,.hd-surface,.hd-safe-top{padding:20px 18px 22px}
  .hd-pipe > li{grid-template-columns:32px minmax(0,1fr);gap:12px}
  .hd-pipe-step{width:32px;height:32px}
  .hd-pipe::before{left:15px}
  .hd-pipe-body{padding:16px 16px 18px}
  .hd-problem-list > li{padding:18px 18px 20px;gap:14px}
  .hd-stats > div{padding:18px 14px 20px}
  .hd-hero{padding-top:32px}
}