/* ============================================================
   AgentC Consulting — hand-authored stylesheet (zero framework).
   Replaces the compiled Tailwind bundle. Served verbatim from
   ./public/css/agentc.css. No build step, no CDN, no external CSS.

   Brand: navy / gold / taupe / white ONLY.
   Shadow Grey #23293A · Soft Fawn #DAB56E · Dusty Taupe #938366

   Sections:
     1. Tokens (:root)
     2. Fonts (self-hosted)
     3. Reset + base
     4. Typography components (headings, eyebrow, lede)
     5. Buttons / cards / panels / forms
     6. Article prose (answer-hub)
     7. Sticky nav + submenus + mobile panel
     8. Footer
     9. Layout primitives + utility layer (the hand-written
        replacement for the Tailwind utilities still in the views)
    10. Scene animation (iso-draw / iso-pop / iso-pulse / reveal)
    11. Depth treatment (reusable cast-shadow + face lighting)
    12. 3-step hero sequence
    13. Reduced-motion fallback
    14. Consent briefing (full-screen missive takeover)
    15. Tension stage (homepage hero — "The Noise")
    16. AED canon page (/aed) — paper medium
    17. Blog newsroom (/blog) — wide-fill feed + post
   ============================================================ */

/* ===== 1. TOKENS ===== */
:root {
  --c-navy: #23293a;
  --c-navy-deep: #1b202e;
  --c-navy-soft: #2b3245;
  --c-surface-alt: #1f2433;
  --c-gold: #dab56e;
  --c-gold-bright: #e6c684;
  --c-gold-dim: #c6a15a;
  --c-taupe: #938366;
  --c-taupe-dim: #6f6450;
  --c-white: #ffffff;

  /* ===== DIMENSIONAL SYSTEM PRIMITIVES =====
     The shared physics every icon / device / scene inherits so the whole
     site reads as ONE matte, isometric, upper-left-lit world. Authoritative
     source: brand_design_rules "Dimensional Visual Language". */

  /* Shadow — soft, charcoal (Shadow-Grey based), NEVER pure black. One
     direction site-wide: down + right. The hover variant is slightly
     stronger and offset a touch further. */
  --dim-shadow: rgba(15, 19, 30, 0.28);
  --dim-shadow-strong: rgba(15, 19, 30, 0.38);

  /* Object palette ROLES (the readability engine). */
  --dim-face-top: #ffffff;     /* upper surface — catches the most light  */
  --dim-face-front: #f1ece3;   /* front face — lit, a hair off-white       */
  --dim-face-side: var(--c-taupe);      /* right/depth faces — Dusty Taupe */
  --dim-face-side-deep: var(--c-taupe-dim); /* deepest depth / underside   */
  --dim-structure: #2b3245;    /* dark structure / panels (lifted Shadow)  */
  --dim-structure-deep: #1b202e;/* deeper interface wells                  */
  --dim-signal: var(--c-gold); /* Soft Fawn — SIGNAL ONLY (matte, no shine)*/
  --dim-signal-bright: var(--c-gold-bright); /* the brighten-on-hover step */
  --dim-edge: rgba(15, 19, 30, 0.30);   /* thin contact edge on light faces*/

  /* Hover motion contract: a system waking up, not a toy reacting. */
  --dim-hover-lift: -4px;
  --dim-hover-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out         */
  --dim-hover-time: 0.2s;      /* within the 160–240ms window              */

  --font-sans: "Fira Sans", system-ui, sans-serif;
  --font-mono: "Fira Mono", ui-monospace, monospace;
  /* Retro-futuristic display: blocky geometric-extended (Michroma) for
     headlines/headers; Orbitron used SPARINGLY for select labels/captions.
     Geometric system-font stack as the swap/fallback. */
  --font-display: "Michroma", "Eurostile", "Bank Gothic", ui-sans-serif, system-ui, sans-serif;
  --font-accent: "Orbitron", "Michroma", ui-sans-serif, system-ui, sans-serif;

  /* spacing scale: 1 unit = 0.25rem (matches the old utility scale) */
  --space: 0.25rem;
}

/* ===== 2. FONTS (self-hosted, already in public/fonts/) ===== */
@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/fira-sans-v17-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/fira-sans-v17-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  src: url("/fonts/fira-mono-v14-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  src: url("/fonts/fira-mono-v14-latin-500.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Retro-futuristic display + accent (OFL, self-hosted). Michroma carries the
   headline/header voice; Orbitron is a variable font used sparingly for
   select labels. Both font-display:swap so text never blocks paint. */
@font-face {
  font-family: "Michroma";
  src: url("/fonts/michroma-v21-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("/fonts/orbitron-v35-latin-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ===== 3. RESET + BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background-color: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, figure, ul, ol {
  margin: 0;
}
ul, ol {
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
img, svg {
  display: block;
  max-width: 100%;
}
button {
  font-family: inherit;
  font-size: inherit;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--c-navy-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--c-taupe);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-gold);
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  margin: 0.5rem;
  padding: 0.65rem 1.1rem;
  background: var(--c-gold);
  color: var(--c-navy);
  font-weight: 500;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
}

/* Keyboard focus indicator */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.nav-link:focus-visible,
.nav-logo:focus-visible,
.submenu-item:focus-visible,
.mobile-link:focus-visible,
.mobile-sub-link:focus-visible,
.footer-link:focus-visible,
.footer-icon:focus-visible,
.article-link:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 0.3rem;
}

/* ===== 4. TYPOGRAPHY COMPONENTS =====
   Display headings use Michroma — a wide geometric-extended face, so it reads
   LARGE per glyph and needs smaller sizes + tighter line-height + no negative
   tracking (it is already wide). The clamp() lower bounds are sized so the
   longest homepage headline wraps cleanly inside a 390px viewport. */
.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 5.2vw, 3.2rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--c-white);
  letter-spacing: 0.005em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero-heading .accent {
  color: var(--c-gold);
}
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  font-weight: 400;
  line-height: 1.18;
  color: var(--c-white);
  letter-spacing: 0.005em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.eyebrow {
  font-family: var(--font-accent);
  font-size: clamp(0.62rem, 1.4vw, 0.74rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
  overflow-wrap: break-word;
}
.lede {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  overflow-wrap: break-word;
}

/* ===== 5. BUTTONS / CARDS / PANELS / FORMS ===== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--c-gold);
  color: var(--c-navy);
  font-weight: 500;
  padding: 0.85rem 1.6rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.btn-primary:hover {
  background: var(--c-gold-bright);
  transform: translateY(-2px);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid rgba(218, 181, 110, 0.55);
  color: var(--c-gold);
  font-weight: 500;
  padding: 0.85rem 1.6rem;
  border-radius: 0.5rem;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.btn-ghost:hover {
  background: rgba(218, 181, 110, 0.12);
  border-color: var(--c-gold);
  transform: translateY(-2px);
}

/* Icon-only button (e.g. the RSS subscribe control): even padding so the
   glyph sits centered in a compact square; label carried by sr-only text. */
.btn-icon {
  padding: 0.8rem;
  line-height: 0;
}

/* Visually hidden but read by screen readers (accessible icon labels). */
.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;
}

/* Feed filter links (blog sidebar): the active filter is gold + marked. */
.filter-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}
.filter-link:hover { color: var(--c-gold); }
.filter-link.active {
  color: var(--c-gold);
  font-weight: 500;
}
.filter-link.active::before { content: "\25B8\00a0"; }

/* Filter chip row (portfolio): server-side filters rendered as pill links.
   Sharp-outside/rounded-inside DNA: pills are the rounded inner form. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.05rem;
  border-radius: 9999px;
  border: 1px solid rgba(147, 131, 102, 0.35);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.filter-chip:hover {
  color: var(--c-gold);
  border-color: rgba(218, 181, 110, 0.55);
  background: rgba(218, 181, 110, 0.08);
}
.filter-chip.active {
  color: var(--c-navy);
  background: var(--c-gold);
  border-color: var(--c-gold);
}

/* Design DNA — "sharp outside, rounded inside": outer container corners are
   crisp (small radius), while the rounded inner forms (buttons, fields, pills,
   inner SVG details) carry the "human" softness. Applied to the card/panel
   shells; their contents keep their own larger radii. */
.card {
  background: rgba(147, 131, 102, 0.1);
  border: 1px solid rgba(218, 181, 110, 0.22);
  border-radius: 0.25rem;
  padding: 1.6rem;
  height: 100%;
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(218, 181, 110, 0.55);
  background: rgba(147, 131, 102, 0.16);
}
.card-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--c-gold);
  margin-bottom: 0.5rem;
}
.panel {
  background: rgba(27, 32, 46, 0.7);
  border: 1px solid rgba(147, 131, 102, 0.28);
  border-radius: 0.3rem;
  padding: 1.8rem;
}

.form-field {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(218, 181, 110, 0.28);
  border-radius: 0.5rem;
  padding: 0.75rem 0.9rem;
  width: 100%;
  color: var(--c-white);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-field::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.form-field:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(218, 181, 110, 0.25);
}

/* ===== 6. ARTICLE PROSE (answer-hub) ===== */
.article-prose {
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.05rem;
  line-height: 1.75;
}
.article-prose > .article-p:first-child {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--c-white);
  border-left: 3px solid var(--c-gold);
  padding-left: 1.1rem;
  margin-bottom: 1.8rem;
}
.article-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--c-white);
  letter-spacing: 0.005em;
  margin-top: 2.6rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(147, 131, 102, 0.25);
  overflow-wrap: break-word;
}
.article-h3 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--c-gold);
  margin-top: 2rem;
  margin-bottom: 0.7rem;
  overflow-wrap: break-word;
}
.article-p {
  margin-bottom: 1.15rem;
}
.article-ul,
.article-ol {
  margin: 0 0 1.3rem 0;
  padding-left: 1.4rem;
}
.article-ul {
  list-style: none;
  padding-left: 0;
}
.article-ul > .article-li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55rem;
}
.article-ul > .article-li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.65rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: var(--c-gold);
}
.article-ol {
  list-style: decimal;
}
.article-ol > .article-li {
  margin-bottom: 0.55rem;
  padding-left: 0.3rem;
}
.article-ol > .article-li::marker {
  color: var(--c-gold);
  font-family: var(--font-mono);
}
.article-link {
  color: var(--c-gold);
  text-decoration: underline;
  text-decoration-color: rgba(218, 181, 110, 0.4);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.article-link:hover {
  color: var(--c-gold-bright);
  text-decoration-color: var(--c-gold-bright);
}
.article-code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(218, 181, 110, 0.12);
  color: var(--c-gold-bright);
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
}
.article-quote {
  border-left: 3px solid var(--c-taupe);
  background: rgba(147, 131, 102, 0.08);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
}
.article-hr {
  border: none;
  border-top: 1px solid rgba(147, 131, 102, 0.25);
  margin: 2.5rem 0;
}
.article-table-wrap {
  overflow-x: auto;
  margin: 0 0 1.6rem 0;
  border: 1px solid rgba(218, 181, 110, 0.22);
  border-radius: 0.6rem;
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  line-height: 1.5;
}
.article-th {
  text-align: left;
  font-weight: 500;
  color: var(--c-gold);
  background: rgba(218, 181, 110, 0.1);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(218, 181, 110, 0.3);
  white-space: nowrap;
}
.article-td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(147, 131, 102, 0.18);
  vertical-align: top;
  color: rgba(255, 255, 255, 0.82);
}
.article-table tbody tr:last-child .article-td {
  border-bottom: none;
}
.article-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
.article-checklist {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}
.article-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(147, 131, 102, 0.14);
}
.article-checkbox {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* ===== 7. STICKY NAV ===== */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  padding: 1.1rem 1.5rem;
  background: rgba(35, 41, 58, 0.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.site-nav.scrolled {
  padding: 0.55rem 1.5rem;
  background: rgba(27, 32, 46, 0.95);
  border-bottom-color: rgba(218, 181, 110, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nav-logo .wordmark {
  width: clamp(118px, 18vw, 158px);
  height: auto;
}
.site-nav.scrolled .nav-logo .wordmark {
  width: clamp(104px, 15vw, 132px);
}
/* nav link: rest = soft white. ACTIVE (current page/section) = gold + a gold
   underline. HOVER = a DISTINCT non-gold affordance (lighter text + a taupe
   underline grow + a subtle lift) so hovering never reads as "you are here". */
.nav-link {
  position: relative;
  color: rgba(255, 255, 255, 0.88);
  padding: 0.4rem 0.2rem;
  font-size: 0.96rem;
  transition: color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease, background 0.2s ease;
}
.nav-link:hover {
  color: var(--c-white);
  transform: translateY(-1px);
}
.nav-link:hover::after {
  background: var(--c-taupe);
  transform: scaleX(1);
}
.nav-link.active {
  color: var(--c-gold);
}
.nav-link.active::after {
  background: var(--c-gold);
  transform: scaleX(1);
}
.nav-link.active:hover {
  color: var(--c-gold);
  transform: none;
}
.nav-burger {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-gold);
  padding: 0.25rem;
}
.nav-group {
  position: relative;
}
.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 17rem;
  padding: 0.6rem;
  margin-top: 0.4rem;
  background: rgba(27, 32, 46, 0.98);
  border: 1px solid rgba(218, 181, 110, 0.22);
  border-radius: 0.75rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.nav-group::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1rem;
}
.nav-group:hover .submenu,
.nav-group:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.submenu-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  transition: background 0.2s ease, color 0.2s ease;
}
.submenu-item:hover {
  background: rgba(218, 181, 110, 0.12);
  color: var(--c-gold);
}
.submenu-item svg {
  flex-shrink: 0;
}
.submenu-item .submenu-title {
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.2;
}
.submenu-item .submenu-sub {
  display: block;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.1rem;
}
.mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--c-navy-deep);
  transform: translateX(100%);
  transition: transform 0.35s ease;
  overflow-y: auto;
}
.mobile-panel.open {
  transform: translateX(0);
}
.mobile-link {
  display: block;
  padding: 0.9rem 0;
  font-size: 1.25rem;
  color: var(--c-white);
  border-bottom: 1px solid rgba(147, 131, 102, 0.2);
}
.mobile-link:hover {
  color: var(--c-white);
  text-decoration: underline;
  text-decoration-color: var(--c-taupe);
  text-underline-offset: 4px;
}
.mobile-link.active {
  color: var(--c-gold);
}
.mobile-sub-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0 0.6rem 1rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.82);
}
.mobile-sub-link:hover {
  color: var(--c-gold);
}

/* ===== 8. FOOTER ===== */
.footer-link {
  color: var(--c-gold);
  transition: color 0.25s ease;
}
.footer-link:hover {
  color: var(--c-white);
}
.footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(218, 181, 110, 0.25);
  color: var(--c-gold);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.footer-icon:hover {
  transform: translateY(-4px);
  background: rgba(218, 181, 110, 0.12);
  color: var(--c-white);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem;
}

/* ============================================================
   9. LAYOUT PRIMITIVES + UTILITY LAYER
   Hand-written replacements for the exact Tailwind utility
   tokens that remain in the views. Scoped, small, predictable.
   ============================================================ */

/* display */
.block { display: block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* flex direction / wrap / alignment */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* gaps */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }

/* width */
.w-full { width: 100%; }

/* max widths (rem equivalents of the Tailwind scale) */
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }

/* horizontal auto-margin */
.mx-auto { margin-left: auto; margin-right: auto; }

/* margins */
.m-0 { margin: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.ml-4 { margin-left: 1rem; }

/* padding */
.p-0 { padding: 0; }
.p-4 { padding: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-32 { padding-top: 8rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-24 { padding-bottom: 6rem; }
.pl-5 { padding-left: 1.25rem; }

/* vertical rhythm helpers (Tailwind space-y-*) */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* text */
.text-xs { font-size: 0.75rem; line-height: 1.4; }
.text-sm { font-size: 0.875rem; line-height: 1.5; }
.text-base { font-size: 1rem; line-height: 1.5; }
.text-center { text-align: center; }
.text-white { color: var(--c-white); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.leading-relaxed { line-height: 1.625; }
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* brand color helpers (arbitrary-value classes still in the views) */
.text-\[\#dab56e\] { color: var(--c-gold); }
.hover\:text-\[\#dab56e\]:hover { color: var(--c-gold); }
.bg-\[\#1f2433\] { background-color: var(--c-surface-alt); }
.bg-\[\#1b202e\] { background-color: var(--c-navy-deep); }
.bg-\[rgba\(218\,181\,110\,0\.1\)\] { background-color: rgba(218, 181, 110, 0.1); }
.bg-\[rgba\(218\,181\,110\,0\.08\)\] { background-color: rgba(218, 181, 110, 0.08); }
.bg-transparent { background-color: transparent; }

/* opacity (applied to the element's own color/content, matching the old utilities) */
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-65 { opacity: 0.65; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-85 { opacity: 0.85; }
.opacity-90 { opacity: 0.9; }
.hover\:opacity-100:hover { opacity: 1; }

/* borders + radius */
.border { border: 1px solid rgba(218, 181, 110, 0.22); }
.border-none { border: none; }
.border-t { border-top: 1px solid rgba(147, 131, 102, 0.2); }
.border-\[rgba\(147\,131\,102\,0\.2\)\] { border-color: rgba(147, 131, 102, 0.2); }
.border-\[rgba\(218\,181\,110\,0\.3\)\] { border-color: rgba(218, 181, 110, 0.3); }
.border-\[rgba\(218\,181\,110\,0\.5\)\] { border-color: rgba(218, 181, 110, 0.5); }
.hover\:border-\[rgba\(218\,181\,110\,0\.55\)\]:hover { border-color: rgba(218, 181, 110, 0.55); }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* list styles */
.list-none { list-style: none; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }

/* cursor */
.cursor-pointer { cursor: pointer; }

/* transitions (matching the few hover utilities in the footer) */
.transition { transition: all 0.2s ease; }
.transition-all { transition: all 0.3s ease; }
.duration-300 { transition-duration: 0.3s; }

/* responsive: the views use only sm (640px), md (768px), lg (1024px) */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:w-auto { width: auto; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-\[1fr_3fr\] { grid-template-columns: 1fr 3fr; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   10. SCENE ANIMATION (hand-rolled, zero external libs)
   Scroll-triggered via IntersectionObserver which adds
   `.in-view`; CSS drives the rest.
   ============================================================ */
.iso-draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
}
.iso-scene.in-view .iso-draw {
  animation: iso-draw-in 1.4s ease forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes iso-draw-in {
  to { stroke-dashoffset: 0; }
}

.iso-pop {
  opacity: 0;
  transform: translateY(10px);
}
.iso-scene.in-view .iso-pop {
  animation: iso-pop-in 0.7s ease forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes iso-pop-in {
  to { opacity: 1; transform: translateY(0); }
}

.iso-pulse {
  stroke-dasharray: 14 320;
  stroke-dashoffset: 334;
  opacity: 0;
}
.iso-scene.in-view .iso-pulse {
  opacity: 1;
  animation: iso-pulse-run 2.4s linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes iso-pulse-run {
  to { stroke-dashoffset: 0; }
}

.station {
  opacity: 0.28;
  transition: opacity 0.5s ease;
}
.iso-scene.in-view .station {
  animation: station-light 0.6s ease forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes station-light {
  to { opacity: 1; }
}

/* Scroll-fade discipline (v4): the blanket reveal-on-scroll made the fade feel
   standard, not special, and degraded the experience. Ordinary content now
   renders ALREADY PRESENT (no reveal). `.reveal` is intentionally a no-op so
   the many existing markup uses degrade to "present" without a sweep of every
   view. The fade is reserved for the few intentional "wow" moments via
   `.fade-up` (the hero), while the animated EXPERIENCES keep their own
   scroll-trigger through `.iso-scene.in-view` (+ the scoped scene classes),
   and message-transitions run on the JS timer (`.hero-copy-step.active`). */
.reveal {
  opacity: 1;
  transform: none;
}

/* The intentional, special scroll-fade — applied sparingly (the hero). Comes
   in already rendered off-screen, then settles when scrolled into view. */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

.loop-node {
  transform-box: fill-box;
  transform-origin: center;
}
.iso-scene.in-view .loop-node {
  animation: node-breathe 3s ease-in-out infinite;
}
@keyframes node-breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ============================================================
   11. DEPTH TREATMENT — reusable cast-shadow + lighting.
   The fix for "too flat". Objects sit ON a surface and throw a
   soft elliptical shadow, the way the desk-scene reference does.
   These classes target SVG groups in the scene partials.
   ============================================================ */

/* A soft elliptical ground shadow drawn under an object. Uses the
   #castShadow radialGradient defined per-scene in <defs>. The faint
   rise keeps the object from looking glued to the plane. */
.cast-shadow {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.iso-scene.in-view .cast-shadow {
  animation: shadow-settle 0.8s ease forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes shadow-settle {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

/* Reusable device figure: SVG + a label, used in the hero step 3 and
   anywhere on the site. The grid that holds them is .device-row. */
.device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.device svg {
  width: 100%;
  height: auto;
}
.device-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.device-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.device-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.device-group-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.device-cluster {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}

/* A device/object that drops in and lands on its platform. */
.depth-object {
  opacity: 0;
  transform: translateY(-14px);
  transform-box: fill-box;
  transform-origin: center;
}
.iso-scene.in-view .depth-object {
  animation: object-land 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes object-land {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   11b. DIMENSIONAL ICON + COMPONENT SYSTEM
   The shared rig for the flat-isometric SVG icons (service cards,
   nav accents) and the device components. Everything inherits the
   one light direction (upper-left), one shadow direction (down-right,
   the charcoal --dim-shadow token), matte materials, and ONE shared
   hover so the set reads as a single engineered system.
   ============================================================ */

/* The wrapper a flat-iso icon lives in (service-card header, nav accent).
   Sizing stays where it always was; this only governs depth + motion. */
.dim-icon {
  display: inline-flex;
  line-height: 0;
}
.dim-icon svg {
  overflow: visible; /* lets the soft drop-shadow + hover-lift breathe */
}

/* SHARED HOVER — the object lifts toward the viewer, its shadow slides
   down-right and deepens, and its single Soft-Fawn signal brightens.
   A connector stroke (if the icon marks one with .dim-connector) draws
   left→right. No bounce / spin / scale / glow. The hover target is the
   nearest .dim-hover (the card or the icon wrapper). */
.dim-hover {
  transition: transform var(--dim-hover-time) var(--dim-hover-ease);
}
.dim-hover .dim-object {
  transition: transform var(--dim-hover-time) var(--dim-hover-ease);
}
.dim-hover .dim-shadow {
  transition: transform var(--dim-hover-time) var(--dim-hover-ease),
              opacity var(--dim-hover-time) var(--dim-hover-ease);
  transform-box: fill-box;
  transform-origin: center;
}
.dim-hover .dim-signal {
  transition: fill var(--dim-hover-time) var(--dim-hover-ease),
              stroke var(--dim-hover-time) var(--dim-hover-ease);
}
.dim-hover .dim-connector {
  stroke-dasharray: var(--dim-conn-len, 48);
  stroke-dashoffset: var(--dim-conn-len, 48);
  transition: stroke-dashoffset 0.4s var(--dim-hover-ease);
}

.dim-hover:hover .dim-object,
.dim-hover:focus-visible .dim-object {
  transform: translateY(var(--dim-hover-lift));
}
.dim-hover:hover .dim-shadow,
.dim-hover:focus-visible .dim-shadow {
  transform: translate(3px, 5px);
  opacity: 0.9;
}
.dim-hover:hover .dim-signal,
.dim-hover:focus-visible .dim-signal {
  fill: var(--dim-signal-bright);
}
.dim-hover:hover .dim-signal[stroke],
.dim-hover:focus-visible .dim-signal[stroke] {
  stroke: var(--dim-signal-bright);
}
.dim-hover:hover .dim-connector,
.dim-hover:focus-visible .dim-connector {
  stroke-dashoffset: 0;
}

/* Hover bridge — any card or submenu item that contains a dimensional icon
   becomes its hover target, so the views need no extra class and the
   behavior is identical everywhere an icon renders. */
.card .dim-object,
.submenu-item .dim-object {
  transition: transform var(--dim-hover-time) var(--dim-hover-ease);
}
.card .dim-shadow,
.submenu-item .dim-shadow {
  transition: transform var(--dim-hover-time) var(--dim-hover-ease),
              opacity var(--dim-hover-time) var(--dim-hover-ease);
  transform-box: fill-box;
  transform-origin: center;
}
.card .dim-signal,
.submenu-item .dim-signal {
  transition: fill var(--dim-hover-time) var(--dim-hover-ease),
              stroke var(--dim-hover-time) var(--dim-hover-ease);
}
.card .dim-connector,
.submenu-item .dim-connector {
  stroke-dasharray: var(--dim-conn-len, 48);
  stroke-dashoffset: var(--dim-conn-len, 48);
  transition: stroke-dashoffset 0.4s var(--dim-hover-ease);
}
.card:hover .dim-object,
.card:focus-visible .dim-object,
.submenu-item:hover .dim-object,
.submenu-item:focus-visible .dim-object {
  transform: translateY(var(--dim-hover-lift));
}
.card:hover .dim-shadow,
.card:focus-visible .dim-shadow,
.submenu-item:hover .dim-shadow,
.submenu-item:focus-visible .dim-shadow {
  transform: translate(3px, 5px);
  opacity: 0.9;
}
.card:hover .dim-signal,
.card:focus-visible .dim-signal,
.submenu-item:hover .dim-signal,
.submenu-item:focus-visible .dim-signal {
  fill: var(--dim-signal-bright);
}
.card:hover .dim-signal[stroke],
.card:focus-visible .dim-signal[stroke],
.submenu-item:hover .dim-signal[stroke],
.submenu-item:focus-visible .dim-signal[stroke] {
  stroke: var(--dim-signal-bright);
}
.card:hover .dim-connector,
.card:focus-visible .dim-connector,
.submenu-item:hover .dim-connector,
.submenu-item:focus-visible .dim-connector {
  stroke-dashoffset: 0;
}

/* Low-opacity blueprint grid — the "calm command room" atmosphere for
   hero / major sections. Subtle, Shadow-Grey based, sits BEHIND content.
   Apply as a utility class on a positioned section (it paints ::before). */
.blueprint-grid {
  position: relative;
  isolation: isolate;
}
.blueprint-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(147, 131, 102, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147, 131, 102, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 35%, transparent 100%);
}

/* ============================================================
   11c. HOMEPAGE HERO — DIMENSIONAL WORKSPACE SCENE
   "An idea enters a structured AgentC system and emerges as a
   working product." Matte isometric command room on the Shadow-Grey
   environment: a command desk, an idea card entering, a row of agent
   nodes, a dashboard showing the finished product, a single human at
   the desk, and ONE Soft-Fawn active path tracing idea -> system ->
   product. Light upper-left, soft charcoal shadow down-right. Objects
   settle in on scroll-in (`.iso-scene.in-view`); the active path then
   travels (illustrative motion, 300-500ms band). Reduced-motion shows
   the finished frame statically.
   ============================================================ */
.workspace-scene {
  position: relative;
  width: 100%;
}
.workspace-scene svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Objects rise gently and settle onto the desk plane. */
.ws-pop {
  opacity: 0;
  transform: translateY(-12px);
  transform-box: fill-box;
  transform-origin: center;
}
.iso-scene.in-view .ws-pop {
  animation: ws-settle 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes ws-settle {
  to { opacity: 1; transform: translateY(0); }
}

/* The soft contact shadow under the whole composition fades up. */
.ws-shadow {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.iso-scene.in-view .ws-shadow {
  animation: ws-shadow-in 0.9s ease forwards;
  animation-delay: 0.2s;
}
@keyframes ws-shadow-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The active Soft-Fawn path: a muted base line is always present; the
   bright fawn signal travels along it idea -> system -> product. */
.ws-path {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
}
.iso-scene.in-view .ws-path {
  animation: ws-path-travel 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.5s;
}
@keyframes ws-path-travel {
  to { stroke-dashoffset: 0; }
}

/* The path's arrowhead at the product end appears as the path arrives. */
.ws-path-tip {
  opacity: 0;
}
.iso-scene.in-view .ws-path-tip {
  animation: ws-signal-arrive 0.3s ease forwards;
  animation-delay: 1.7s;
}

/* The dashboard's active-product signal bar brightens once the path
   arrives — the "product emerges" beat. */
.ws-screen-head {
  opacity: 0.55;
}
.iso-scene.in-view .ws-screen-head {
  animation: ws-signal-arrive 0.5s ease forwards;
  animation-delay: 1.7s;
}
@keyframes ws-signal-arrive {
  to { opacity: 1; }
}

/* Reduced motion / no-JS: everything renders already present and the
   path is fully drawn (no travel). */
@media (prefers-reduced-motion: reduce) {
  .ws-pop,
  .iso-scene.in-view .ws-pop { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ws-shadow,
  .iso-scene.in-view .ws-shadow { animation: none !important; opacity: 1 !important; }
  .ws-path,
  .iso-scene.in-view .ws-path { animation: none !important; stroke-dashoffset: 0 !important; }
  .ws-path-tip,
  .iso-scene.in-view .ws-path-tip { animation: none !important; opacity: 1 !important; }
  .ws-screen-head,
  .iso-scene.in-view .ws-screen-head { animation: none !important; opacity: 1 !important; }
}

/* ============================================================
   11b. HERO FILM — the captioned silent "story" hero.
   A keyframe-driven, JS-sequenced isometric scene that plays
   like a short film through 9 beats. The JS controller sets
   data-beat="0..9" on #hero-stage; every visual reacts purely
   off CSS attribute selectors + transitions. Persistent desk
   objects (monitor + phone NEVER disappear); narrative layers
   (noise / prompt / AgentC / answers) fade in and out per beat.
   Dimensional rules: matte faces, upper-left light, soft
   down-right shadow, Soft-Fawn = signal, RED = alert badges only.
   ============================================================ */
.hero-film {
  position: relative;
  width: 100%;
}
.hero-film svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

/* Persistent desk props: hidden on the blank stage (beat 0), then
   "settle" onto the floor on beat 1+. They stay present for the
   whole film thereafter (monitor + phone never disappear). */
.hf-prop {
  opacity: 0;
  transform: translateY(-10px);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.55s var(--dim-hover-ease), transform 0.55s var(--dim-hover-ease);
  transition-delay: var(--delay, 0s);
}
.hero-film[data-beat="0"] .hf-prop { opacity: 0; transform: translateY(-10px); }
.hero-film:not([data-beat="0"]) .hf-prop { opacity: 1; transform: translateY(0); }

/* The isometric floor + grid fade with the props (sits behind). */
.hf-floor,
.hf-ground-shadow {
  opacity: 0;
  transition: opacity 0.6s ease 0.35s;
}
.hero-film:not([data-beat="0"]) .hf-floor,
.hero-film:not([data-beat="0"]) .hf-ground-shadow { opacity: 1; }

/* --- The smartphone: idle glint -> alert flash + buzz --- */
.hf-phone-badge,
.hf-phone-badge-count {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hf-phone-glint {
  transition: opacity 0.4s ease;
}
/* From beat 2 (first notification) through the chaos, the badge shows. */
.hero-film[data-beat="2"] .hf-phone-badge,
.hero-film[data-beat="2"] .hf-phone-badge-count,
.hero-film[data-beat="3"] .hf-phone-badge,
.hero-film[data-beat="3"] .hf-phone-badge-count,
.hero-film[data-beat="4"] .hf-phone-badge,
.hero-film[data-beat="4"] .hf-phone-badge-count,
.hero-film[data-beat="5"] .hf-phone-badge,
.hero-film[data-beat="5"] .hf-phone-badge-count { opacity: 1; }
/* The screen flashes on first notification + while noise builds. */
.hero-film[data-beat="2"] .hf-phone-screen,
.hero-film[data-beat="3"] .hf-phone-screen {
  animation: hf-phone-flash 1.1s ease-in-out infinite;
}
@keyframes hf-phone-flash {
  0%, 100% { fill: #2b3245; }
  50% { fill: #43506e; }
}
/* The whole phone vibrates during the noise build (beat 3). */
.hero-film[data-beat="3"] .hf-phone {
  animation: hf-buzz 0.16s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes hf-buzz {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(0.8px, -0.4px); }
  50% { transform: translate(-0.7px, 0.5px); }
  75% { transform: translate(0.5px, 0.4px); }
}

/* --- Notification bubbles: rise from their source (phone/monitor),
   jostle while the noise builds, then pop away as answers land. ---
   Each bubble is positioned at --bx/--by via CSS var translate. */
.hf-bub {
  --hx: 0px;
  --hy: 0px;
  opacity: 0;
  transform: translate(calc(var(--bx) + var(--hx)), calc(var(--by) + var(--hy))) translateY(10px) scale(0.7);
  transform-box: view-box;
  transform-origin: center;
  transition: opacity 0.35s ease, transform 0.4s var(--dim-hover-ease);
}
.hf-bub text { pointer-events: none; }
/* First single phone bubble at beat 2. */
.hero-film[data-beat="2"] .hf-bub-phone:first-of-type {
  opacity: 1;
  transform: translate(calc(var(--bx) + var(--hx)), calc(var(--by) + var(--hy))) scale(1);
  transition-delay: 0.1s;
}
/* Noise build (beat 3): all bubbles present + a slow intrusive jostle. */
.hero-film[data-beat="3"] .hf-bub,
.hero-film[data-beat="4"] .hf-bub,
.hero-film[data-beat="5"] .hf-bub {
  opacity: 1;
  transform: translate(calc(var(--bx) + var(--hx)), calc(var(--by) + var(--hy))) scale(1);
}
.hero-film[data-beat="3"] .hf-bub {
  animation: hf-jostle 2.4s ease-in-out infinite;
  animation-delay: var(--bd, 0s);
}
@keyframes hf-jostle {
  0%, 100% { transform: translate(calc(var(--bx) + var(--hx)), calc(var(--by) + var(--hy))) scale(1); }
  50% { transform: translate(calc(var(--bx) + var(--hx) + 3px), calc(var(--by) + var(--hy) - 3px)) scale(1.03); }
}

/* ===== Cursor interactivity (desktop, hand-rolled + rAF-throttled) =====
   The page "responds to you": bubbles drift toward the cursor (--hx/--hy
   set by JS), the nearest one lifts away with a separated shadow while its
   neighbours dim, and the phone / worker / AgentC / answers react when the
   cursor approaches. All gated to relevant beats; disabled for reduced
   motion (the jitter block below clears every transform). */
.hero-film[data-beat="2"] .hf-bub,
.hero-film[data-beat="3"] .hf-bub,
.hero-film[data-beat="4"] .hf-bub,
.hero-film[data-beat="5"] .hf-bub { pointer-events: auto; }

.hero-film .hf-noise:hover .hf-bub:not(.hf-bub-near) { opacity: 0.55; }
.hf-bub.hf-bub-near {
  transform: translate(calc(var(--bx) + var(--hx) + 2px), calc(var(--by) + var(--hy) - 5px)) scale(1.12) !important;
  animation: none !important;
  filter: drop-shadow(3px 5px 5px rgba(15, 19, 30, 0.4));
}
.hf-bub.hf-bub-near .hf-dot {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(214, 69, 63, 0.7));
}

.hf-phone { transition: filter 0.25s ease; }
.hf-phone.hf-react .hf-phone-glint { opacity: 0.95; }
.hf-phone.hf-react .hf-phone-badge { animation: hf-dot-pulse 0.7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hf-phone.hf-react { animation: hf-buzz 0.16s linear infinite; transform-box: fill-box; transform-origin: center; }

.hf-worker-body,
.hf-worker-head { transition: transform 0.4s var(--dim-hover-ease); transform-box: fill-box; transform-origin: center; }
.hf-worker.hf-react .hf-worker-body { transform: translateY(-1.5px) rotate(-1.5deg); }
.hf-worker.hf-react .hf-worker-head { transform: translateY(-1px); }
.hf-worker.hf-react .hf-cat-ear { animation: hf-ear-twitch 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
@keyframes hf-ear-twitch {
  0%, 70%, 100% { transform: rotate(0deg); }
  80% { transform: rotate(-12deg); }
  90% { transform: rotate(6deg); }
}

.hf-agentc { will-change: transform; }
.hf-agentc.hf-react .hf-agentc-glow { opacity: 0.26 !important; }
.hf-agentc.hf-react .hf-agentc-pulse { stroke: var(--c-gold); filter: drop-shadow(0 0 3px rgba(218, 181, 110, 0.6)); }
.hero-film.hf-agentc-focus .hf-bub { opacity: 0.35 !important; }
.hero-film.hf-agentc-focus[data-beat="6"] .hf-agentc-pulse { stroke-width: 3.2; }

.hf-answer { transition: opacity 0.4s var(--dim-hover-ease), transform 0.4s var(--dim-hover-ease); }
.hf-answer.hf-react {
  transform: translateX(0) translateY(-3px) scale(1.04) !important;
  filter: drop-shadow(2px 4px 5px rgba(15, 19, 30, 0.35));
}
.hf-answer.hf-react .dim-signal { filter: drop-shadow(0 0 3px rgba(218, 181, 110, 0.7)); }
/* The red count dots pulse during the build. */
.hf-dot { opacity: 0.95; }
.hero-film[data-beat="3"] .hf-dot {
  animation: hf-dot-pulse 1s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes hf-dot-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* --- The monitor screen states: calm -> AI prompt -> resolved --- */
.hf-screen-calm,
.hf-screen-ai,
.hf-screen-resolved {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.hero-film[data-beat="1"] .hf-screen-calm,
.hero-film[data-beat="2"] .hf-screen-calm,
.hero-film[data-beat="3"] .hf-screen-calm { opacity: 1; }
.hero-film[data-beat="4"] .hf-screen-ai,
.hero-film[data-beat="5"] .hf-screen-ai,
.hero-film[data-beat="6"] .hf-screen-ai { opacity: 1; }
.hero-film[data-beat="7"] .hf-screen-resolved,
.hero-film[data-beat="8"] .hf-screen-resolved,
.hero-film[data-beat="9"] .hf-screen-resolved { opacity: 1; }

/* --- The "How do I automate this?" prompt bubble (beats 4-5) --- */
.hf-prompt {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.4s ease, transform 0.4s var(--dim-hover-ease);
}
.hero-film[data-beat="4"] .hf-prompt,
.hero-film[data-beat="5"] .hf-prompt {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* On "still stuck" (beat 5) the worker breathes out a small sigh mark. */
.hf-worker-sigh { transition: opacity 0.4s ease; }
.hero-film[data-beat="5"] .hf-worker-sigh { opacity: 0.85; }

/* --- AgentC persona: a warm presence that ENTERS from the right
   (beat 6) and stays through resolution. Restrained, not a mascot. --- */
.hf-agentc {
  opacity: 0;
  transform: translateX(34px);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.6s var(--dim-hover-ease), transform 0.6s var(--dim-hover-ease);
}
.hero-film[data-beat="6"] .hf-agentc,
.hero-film[data-beat="7"] .hf-agentc,
.hero-film[data-beat="8"] .hf-agentc,
.hero-film[data-beat="9"] .hf-agentc {
  opacity: 1;
  transform: translateX(0);
}
/* A connection pulse draws from AgentC toward the worker on entrance. */
.hf-agentc-pulse {
  transition: stroke-dashoffset 0.9s var(--dim-hover-ease) 0.3s;
}
.hero-film[data-beat="6"] .hf-agentc-pulse,
.hero-film[data-beat="7"] .hf-agentc-pulse,
.hero-film[data-beat="8"] .hf-agentc-pulse,
.hero-film[data-beat="9"] .hf-agentc-pulse { stroke-dashoffset: 0; }
.hf-agentc-glow {
  transform-box: fill-box;
  transform-origin: center;
}
.hero-film[data-beat="6"] .hf-agentc-glow {
  animation: hf-agentc-breathe 2.6s ease-in-out infinite;
}
@keyframes hf-agentc-breathe {
  0%, 100% { opacity: 0.1; transform: scale(0.96); }
  50% { opacity: 0.2; transform: scale(1.04); }
}

/* --- The three solution answers (beat 7): each lands in turn while
   the matching noise bubbles pop away. They persist through calm. --- */
.hf-answer {
  opacity: 0;
  transform: translateX(-10px) scale(0.94);
  transform-box: fill-box;
  transform-origin: left center;
  transition: opacity 0.4s var(--dim-hover-ease), transform 0.4s var(--dim-hover-ease);
}
.hero-film[data-beat="7"] .hf-answer,
.hero-film[data-beat="8"] .hf-answer {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: var(--ad, 0s);
}
/* On resolution (beat 7+) the noise pops away (airy shrink-up). */
.hero-film[data-beat="7"] .hf-bub,
.hero-film[data-beat="8"] .hf-bub,
.hero-film[data-beat="9"] .hf-bub {
  opacity: 0;
  transform: translate(var(--bx), calc(var(--by) - 8px)) scale(0.5);
  animation: none;
}
.hero-film[data-beat="7"] .hf-phone-badge,
.hero-film[data-beat="7"] .hf-phone-badge-count { opacity: 0; }

/* --- Calm control (beat 8) + CTA earned (beat 9): the cat stirs a
   soft Soft-Fawn "Z" once the desk is finally quiet. --- */
.hf-cat-z { transition: opacity 0.5s ease; }
.hero-film[data-beat="8"] .hf-cat-z,
.hero-film[data-beat="9"] .hf-cat-z {
  opacity: 0.9;
  animation: hf-cat-z 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes hf-cat-z {
  0% { opacity: 0; transform: translateY(2px); }
  40% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* ===== Caption lane (lower third) ===== */
.hero-captions {
  position: relative;
  min-height: 3.4rem;
  margin-top: 0.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}
.hf-caption {
  position: absolute;
  inset: 0;
  margin: 0 auto;
  max-width: 30ch;
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(15, 19, 30, 0.55);
  border-radius: 0.4rem;
  padding: 0.45rem 0.9rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.hf-caption.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Hero film controls (sound invite + play/replay) ===== */
.hero-film-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
  margin-top: 1rem;
}
.hf-sound-invite,
.hf-play {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-gold);
  background: transparent;
  border: 1px solid rgba(218, 181, 110, 0.45);
  border-radius: 9999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hf-sound-invite:hover,
.hf-play:hover {
  background: rgba(218, 181, 110, 0.12);
  border-color: var(--c-gold);
}
/* Sound ON: the toggle fills gold so the state is unmistakable, and its
   label swaps to "Sound on" via the on/off label spans below. */
.hf-sound-invite.is-on {
  background: var(--c-gold);
  color: #23293a;
  border-color: var(--c-gold);
}
.hf-sound-invite.is-on:hover { background: var(--c-gold); }
.hf-sound-invite .hf-sound-on { display: none; }
.hf-sound-invite.is-on .hf-sound-off { display: none; }
.hf-sound-invite.is-on .hf-sound-on { display: inline; }
.hf-sound-invite svg,
.hf-play svg { flex: 0 0 auto; }
.hf-sound-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}
.hf-play .hf-play-replay { display: none; }
.hero-film-controls[data-state="ended"] .hf-play .hf-play-play { display: none; }
.hero-film-controls[data-state="ended"] .hf-play .hf-play-replay { display: inline; }

/* ===== Final CTA — only earned after the noise resolves (beat 9) ===== */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.6rem;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: opacity 0.6s var(--dim-hover-ease), transform 0.6s var(--dim-hover-ease), visibility 0.6s;
}
.hero-cta.revealed {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* ===== Mobile: behaves like a short interactive reel ===== */
@media (max-width: 640px) {
  .hero-captions { min-height: 4.2rem; }
  .hf-caption { max-width: 26ch; }
  .hero-film-controls { gap: 0.6rem 0.8rem; }
}

/* ===== Reduced motion: keep the story, drop the motion ===== */
@media (prefers-reduced-motion: reduce) {
  .hf-prop {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  .hero-film[data-beat="0"] .hf-prop { opacity: 1 !important; }
  .hf-phone-screen,
  .hero-film[data-beat="2"] .hf-phone-screen,
  .hero-film[data-beat="3"] .hf-phone-screen { animation: none !important; }
  .hero-film[data-beat="3"] .hf-phone { animation: none !important; }
  .hero-film[data-beat="3"] .hf-bub { animation: none !important; }
  .hero-film[data-beat="3"] .hf-dot { animation: none !important; }
  .hf-agentc-glow,
  .hero-film[data-beat="6"] .hf-agentc-glow { animation: none !important; opacity: 0.16 !important; }
  .hf-cat-z,
  .hero-film[data-beat="8"] .hf-cat-z,
  .hero-film[data-beat="9"] .hf-cat-z { animation: none !important; opacity: 0 !important; }
  .hf-bub,
  .hf-answer,
  .hf-agentc,
  .hf-prompt,
  .hf-caption,
  .hero-cta {
    transition: opacity 0.3s ease !important;
  }
  /* Cursor interactivity: keep responsiveness off for reduced motion —
     no drift, lift, buzz, posture shift, ear twitch, or pull. */
  .hf-bub.hf-bub-near { transform: none !important; filter: none !important; }
  .hf-phone.hf-react,
  .hf-phone.hf-react .hf-phone-badge { animation: none !important; }
  .hf-worker.hf-react .hf-worker-body,
  .hf-worker.hf-react .hf-worker-head { transform: none !important; }
  .hf-worker.hf-react .hf-cat-ear { animation: none !important; }
  .hf-answer.hf-react { transform: none !important; filter: none !important; }
}

/* ============================================================
   11c. PRODUCT DEVELOPMENT hero film — "the U Seth loves".
   [SCENE SECTION — rebuilt to the SVG Dimensional Craft Spec, 2026-07-02]
   A beat-sequenced 2:1-dimetric diorama driven by hfRunFilm via
   data-beat="0..3" on #pq-stage. Palette discipline: white matte
   faces, Dusty-Taupe sides, Shadow-Grey structure, Soft-Fawn = the
   ONE gold climax (the "ready to try" check). Light upper-left, soft
   down-right shadows. Zero external JS — pure CSS keyframes.
     0 settle        the platform grounds the stage
     1 give-idea     a person offers the idea; a gold wire carries it in
     2 agents-build  the hub core lights; a conveyor of agent modules assembles
     3 ships         the same app ships to desktop / browser / phone;
                     a single gold check resolves — ready to try
   The gold "baton" moves through the scene (spark -> hub core -> ship
   check) so exactly one climax reads at any rest frame. Reduced motion
   pins the fully-shipped beat-3 frame.
   ============================================================ */
.queue-stage-col { min-width: 0; }
.queue-film { position: relative; width: 100%; }
.queue-film svg { width: 100%; height: auto; overflow: visible; display: block; }

/* ---- Beat gating: each group settles in as its beat arrives, then holds. ---- */
.pqs-b1, .pqs-b2, .pqs-b3 {
  opacity: 0;
  transform: translateY(-6px);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.55s var(--dim-hover-ease), transform 0.55s var(--dim-hover-ease);
}
.queue-film:not([data-beat="0"]) .pqs-b1 { opacity: 1; transform: translateY(0); }
.queue-film[data-beat="2"] .pqs-b2,
.queue-film[data-beat="3"] .pqs-b2 { opacity: 1; transform: translateY(0); }
.queue-film[data-beat="3"] .pqs-b3 { opacity: 1; transform: translateY(0); }
/* stagger the agent modules assembling and the devices shipping */
.pqs-mod { transition-delay: calc(var(--mi, 0) * 0.16s); }
.pqs-dev { transition-delay: calc(var(--di, 0) * 0.18s); }

/* platform: a quiet grounded stage — fades up first */
.pqs-plat { opacity: 0; transition: opacity 0.6s ease; }
.queue-film .pqs-plat { opacity: 1; }

/* ---- Beat 1: the idea and its delivery ---- */
.pqs-spark { transform-box: fill-box; transform-origin: center; }
.queue-film[data-beat="1"] .pqs-spark { animation: pqs-spark 2.2s ease-in-out infinite; }
@keyframes pqs-spark {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.82; transform: scale(1.14); }
}
/* the idea is handed off: card + offering arm retract once the teams take over */
.pqs-card { transition: opacity 0.5s ease, transform 0.6s var(--dim-hover-ease); }
.queue-film[data-beat="2"] .pqs-card,
.queue-film[data-beat="3"] .pqs-card { opacity: 0; transform: translate(10px, -6px); }
.pqs-arm { transition: opacity 0.5s ease 0.1s; }
.queue-film[data-beat="2"] .pqs-arm,
.queue-film[data-beat="3"] .pqs-arm { opacity: 0; }

/* connector 1 — taupe track holds while gold pulse draws the idea in, then fades */
.pqs-c1-track { opacity: 0; transition: opacity 0.5s ease; }
.queue-film[data-beat="1"] .pqs-c1-track { opacity: 0.65; }
.pqs-c1-pulse { stroke-dasharray: var(--len, 80); stroke-dashoffset: var(--len, 80); opacity: 0; }
.queue-film[data-beat="1"] .pqs-c1-pulse { animation: pqs-draw 1.5s var(--dim-hover-ease) forwards; }
@keyframes pqs-draw {
  0% { stroke-dashoffset: var(--len, 80); opacity: 1; }
  62% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ---- Beat 2: agent teams get to work ---- */
/* the hub build-core is the beat-2 climax: it breathes gold, then passes the
   gold baton to the shipped-product check on beat 3 (where it dims to steel). */
.pqs-core { transform-box: fill-box; transform-origin: center; }
.queue-film[data-beat="2"] .pqs-core { animation: pqs-core 1.7s ease-in-out infinite; }
@keyframes pqs-core {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.16); opacity: 1; }
}
.queue-film[data-beat="3"] .pqs-core { fill: #3a4257; }
/* the conveyor tread runs; the modules bob as they are worked on */
.pqs-belt { stroke-dashoffset: 0; opacity: 0; transition: opacity 0.4s ease; }
.queue-film[data-beat="2"] .pqs-belt,
.queue-film[data-beat="3"] .pqs-belt { opacity: 0.8; }
.queue-film[data-beat="2"] .pqs-belt { animation: pqs-belt 1.1s linear infinite; }
@keyframes pqs-belt { to { stroke-dashoffset: -13; } }
.pqs-mod { transform-box: fill-box; transform-origin: center bottom; }
.queue-film[data-beat="2"] .pqs-mod {
  animation: pqs-bob 2.2s ease-in-out infinite;
  animation-delay: calc(var(--mi, 0) * 0.32s);
}
@keyframes pqs-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ---- Beat 3: it ships; the single gold climax resolves ---- */
.pqs-c2-track { opacity: 0; transition: opacity 0.5s ease; }
.queue-film[data-beat="3"] .pqs-c2-track { opacity: 0.65; }
.pqs-c2-pulse { stroke-dasharray: var(--len, 120); stroke-dashoffset: var(--len, 120); opacity: 0; }
.queue-film[data-beat="3"] .pqs-c2-pulse { animation: pqs-draw 1.6s var(--dim-hover-ease) forwards; }
/* the "ready to try" check — the ONE gold climax — pops in, then breathes */
.pqs-badge { opacity: 0; transform-box: fill-box; transform-origin: center; }
.queue-film[data-beat="3"] .pqs-badge { animation: pqs-badge-in 0.5s var(--dim-hover-ease) 0.9s both; }
@keyframes pqs-badge-in {
  0% { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
.pqs-badge-disc { transform-box: fill-box; transform-origin: center; }
.queue-film[data-beat="3"] .pqs-badge-disc { animation: pqs-pulse 1.8s ease-in-out 1.5s infinite; }
@keyframes pqs-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* floating story bubbles pop in per beat (idea on 1; agents on 2), then hold */
.pqs-bub { transform-box: fill-box; transform-origin: center; }
.queue-film:not([data-beat="0"]) .pqs-bub.pqs-b1 { animation: pqs-pop 0.4s var(--dim-hover-ease) both; }
.queue-film[data-beat="2"] .pqs-bub.pqs-b2,
.queue-film[data-beat="3"] .pqs-bub.pqs-b2 { animation: pqs-pop 0.4s var(--dim-hover-ease) both; }
@keyframes pqs-pop {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- Cursor interactivity (desktop, motion-on): gentle reactions only ---- */
.pqs-hub { transition: filter 0.25s ease; }
.pqs-hub.pqs-react { filter: drop-shadow(0 3px 7px rgba(15, 19, 30, 0.28)); }
.pqs-dev { transition: filter 0.25s ease; }
.pqs-dev.pqs-react { filter: drop-shadow(0 4px 8px rgba(15, 19, 30, 0.26)) brightness(1.03); }
.pqs-badge.pqs-react .pqs-badge-disc { filter: brightness(1.08); }

/* ===== Caption lane (mirrors the hero film) ===== */
.queue-captions {
  position: relative;
  min-height: 3.4rem;
  margin-top: 0.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}
.pq-caption {
  position: absolute;
  inset: 0;
  margin: 0 auto;
  max-width: 34ch;
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(15, 19, 30, 0.55);
  border-radius: 0.4rem;
  padding: 0.45rem 0.9rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.pq-caption.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Controls (reuse the .hf-* control styles + scoped state) ===== */
.queue-film-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
  margin-top: 1rem;
}
.queue-film-controls .hf-play .hf-play-replay { display: none; }
.queue-film-controls[data-state="ended"] .hf-play .hf-play-play { display: none; }
.queue-film-controls[data-state="ended"] .hf-play .hf-play-replay { display: inline; }

@media (max-width: 640px) {
  .queue-captions { min-height: 4.2rem; }
  .pq-caption { max-width: 28ch; }
  .queue-film-controls { gap: 0.6rem 0.8rem; }
}

/* ===== Reduced motion: keep the story, drop the motion — land on "it ships" ===== */
@media (prefers-reduced-motion: reduce) {
  .pqs-b1, .pqs-b2, .pqs-b3 {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  .queue-film[data-beat="3"] .pqs-b1,
  .queue-film[data-beat="3"] .pqs-b2,
  .queue-film[data-beat="3"] .pqs-b3 { opacity: 1 !important; }
  .pqs-spark, .pqs-core, .pqs-belt, .pqs-mod,
  .pqs-badge-disc, .pqs-bub { animation: none !important; }
  .pqs-c1-pulse, .pqs-c2-pulse { animation: none !important; opacity: 0 !important; }
  /* idea already delivered — hide the card/arm (specific enough to beat the
     [data-beat="3"] .pqs-b1 reveal), so only the ship-check reads gold. */
  .queue-film[data-beat="3"] .pqs-card,
  .queue-film[data-beat="3"] .pqs-arm { opacity: 0 !important; }
  .pqs-c1-track { opacity: 0 !important; }
  .pqs-c2-track { opacity: 0.65 !important; }
  .pqs-core { fill: #3a4257 !important; }
  .pqs-belt { opacity: 0.8 !important; }
  .pqs-badge { opacity: 1 !important; animation: none !important; transform: none !important; }
  .pqs-hub.pqs-react, .pqs-dev.pqs-react,
  .pqs-badge.pqs-react .pqs-badge-disc { filter: none !important; }
}

/* ============================================================
   12. THREE-STEP HERO SEQUENCE
   The homepage centerpiece. Three steps cross-fade on a timer
   (and respect reduced-motion by showing step 1 statically).
   Each step is an absolutely-stacked <figure>; the active one
   is shown. A row of dots + the side copy track the step.
   ============================================================ */
/* Homepage hero layout: the 3-step SCENE is the star. On desktop the scene
   column is given more room than the text; on mobile both stack and the scene
   scales within the viewport (the figures cap their own max-width below). */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
.hero-intro {
  min-width: 0;
}
.hero-stage-col {
  min-width: 0;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 3rem;
  }
}

.hero-stage {
  position: relative;
  width: 100%;
  min-height: 320px;
}

/* Each step occupies the same box; only the active step is visible. */
.hero-step {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
}
.hero-step.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hero-step > svg {
  width: 100%;
  height: auto;
  max-height: 320px;
}
/* The step-3 device showcase: cap its overall width and let it scale down on
   narrow viewports so the clusters never run past the screen edge. */
.hero-step .device-row {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 460px) {
  .hero-step .device-row { gap: 0.9rem; }
  .device-cluster[style] { width: auto !important; max-width: 100%; }
  .device-group > div[style*="width:230px"] { width: 190px !important; }
  .device-group > div[style*="width:150px"] { width: 132px !important; }
}

/* The step caption shown under the stage (figcaption). */
.hero-step-caption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-align: center;
}

/* Step indicator dots (a real <ol> for a11y; CSS turns them into dots). */
.hero-dots {
  display: flex;
  gap: 0.6rem;
  list-style: none;
  margin: 1.2rem 0 0 0;
  padding: 0;
  justify-content: center;
}
.hero-dots li {
  width: 2.2rem;
  height: 0.28rem;
  border-radius: 9999px;
  background: rgba(218, 181, 110, 0.25);
  transition: background 0.4s ease;
}
.hero-dots li.active {
  background: var(--c-gold);
}

/* The left-column step copy: each block tracks the active step. */
.hero-copy-step {
  display: none;
}
.hero-copy-step.active {
  display: block;
  animation: copy-in 0.5s ease;
}
@keyframes copy-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Speech bubbles inside step 1 / the robot in step 2 — fade/clear on cue. */
.speech {
  opacity: 0;
}
.hero-step.active .speech.show {
  animation: speech-pop 3.2s ease forwards;
}
@keyframes speech-pop {
  0% { opacity: 0; transform: translateY(6px) scale(0.96); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  78% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
.speech-2 {
  opacity: 0;
}
.hero-step.active .speech-2.show {
  animation: speech-pop-2 3.2s ease forwards;
  animation-delay: 1.6s;
}
@keyframes speech-pop-2 {
  0% { opacity: 0; transform: translateY(6px) scale(0.96); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* The conveyor belt motion in step 2. */
.conveyor-belt {
  stroke-dasharray: 6 10;
  animation: belt-run 1.1s linear infinite;
}
.hero-step:not(.active) .conveyor-belt {
  animation: none;
}
@keyframes belt-run {
  to { stroke-dashoffset: -16; }
}
.robot-bob {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.hero-step.active .robot-bob {
  animation: robot-bob 1.4s ease-in-out infinite;
}
@keyframes robot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* "that's you" pointer arrow draws itself in step 1. */
.arrow-draw {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}
.hero-step.active .arrow-draw {
  animation: iso-draw-in 0.9s ease forwards;
  animation-delay: 0.3s;
}

/* Native <details> step accordion on the homepage "how it works" section. */
.step-detail {
  border: 1px solid rgba(218, 181, 110, 0.22);
  border-radius: 0.25rem;
  background: rgba(147, 131, 102, 0.08);
  margin-bottom: 0.9rem;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.step-detail[open] {
  border-color: rgba(218, 181, 110, 0.45);
  background: rgba(147, 131, 102, 0.13);
}
.step-detail > summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  color: var(--c-white);
}
.step-detail > summary::-webkit-details-marker {
  display: none;
}
.step-detail .step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--c-gold);
  color: var(--c-navy);
  font-family: var(--font-mono);
  font-weight: 500;
}
.step-detail .step-detail-title {
  font-size: 1.1rem;
}
.step-detail > summary::after {
  content: "";
  margin-left: auto;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid var(--c-gold);
  border-bottom: 2px solid var(--c-gold);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.step-detail[open] > summary::after {
  transform: rotate(-135deg);
}
.step-detail > p {
  padding: 0 1.4rem 1.2rem 4.3rem;
  line-height: 1.65;
}

/* How-It-Works process strip — three flat-isometric step icons connected by
   a fawn flow arrow. Each step is a hoverable tile (uses the shared .dim-hover
   behavior: the iso object lifts, its shadow slides down-right, its fawn signal
   brightens, and the assemble-step connector draws L->R). Wraps on narrow
   screens; the connector arrows hide when wrapped. */
.how-steps {
  list-style: none;
  margin: 0 0 2.6rem 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.how-step {
  flex: 1 1 0;
  min-width: 180px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 1.6rem 1.2rem 1.4rem;
  border: 1px solid rgba(147, 131, 102, 0.18);
  border-radius: 0.4rem;
  background: rgba(147, 131, 102, 0.05);
  transition: border-color var(--dim-hover-time) var(--dim-hover-ease),
              background var(--dim-hover-time) var(--dim-hover-ease);
}
.how-step:hover,
.how-step:focus-within {
  border-color: rgba(218, 181, 110, 0.4);
  background: rgba(147, 131, 102, 0.1);
}
.how-step-icon {
  display: inline-flex;
  line-height: 0;
  min-height: 56px;
  align-items: center;
}
.how-step-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.how-step-label {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--c-white);
  line-height: 1.3;
}
.how-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  opacity: 0.7;
}
@media (max-width: 760px) {
  .how-step-arrow { display: none; }
  .how-step { min-width: 44%; }
}

/* ============================================================
   HOW-IT-WORKS TILES — three dimensional dioramas (svg-v5, 2026-07-02).
   True 2:1-dimetric mini-scenes on grounded stone platforms. Palette
   discipline: white matte faces / Dusty-Taupe sides / Shadow-Grey
   structure; exactly ONE Soft-Fawn climax per tile. Light upper-left,
   soft down-right shadows. Zero external JS — reveal rides the shared
   IntersectionObserver (.iso-scene.in-view); all motion is pure CSS.
     step 1  a gold-lightbulb idea on a message card handed over on an envelope
     step 2  two engineer figures converge modules onto one gold standard
     step 3  the finished app on monitor / keyboard / phone, gold ready-check
   REVISION (svg-v5 rebuild): bold uniform #23293A outlines, full darkening
   ladder for crisp top/left/right face separation, contact + cast shadows so
   nothing floats, and the illustration scaled to ~80% of the tile. Supporting
   objects pop in on enter, connectors line-draw, the single gold climax pops
   then breathes, and the diorama lifts on hover. Reduced motion pins the
   fully-resolved end state.  [scene section — revised for svg-v5]
   ============================================================ */
.how-step-icon { min-height: 0; width: 100%; justify-content: center; }
.how-step-icon .dim-icon { width: 100%; justify-content: center; }
.how-step-icon .dim-icon svg { width: 100%; max-width: 208px; height: auto; }
@media (max-width: 760px) {
  .how-step-icon .dim-icon svg { max-width: 264px; }
}

/* supporting objects settle in as the tile scrolls into view, then hold */
.how-step-icon .hiw-pop { opacity: 0; transform: translateY(8px); }
.iso-scene.in-view .hiw-pop {
  animation: hiw-pop-in 0.6s var(--dim-hover-ease) both;
  animation-delay: var(--d, 0s);
}
@keyframes hiw-pop-in { to { opacity: 1; transform: translateY(0); } }

/* the resolve/connector draws once, after the objects have settled */
.how-step-icon .hiw-draw { stroke-dasharray: var(--len, 30); stroke-dashoffset: var(--len, 30); }
.iso-scene.in-view .hiw-draw {
  animation: hiw-draw-in 0.55s var(--dim-hover-ease) forwards;
  animation-delay: calc(0.45s + var(--d, 0s));
}
@keyframes hiw-draw-in { to { stroke-dashoffset: 0; } }

/* the ONE gold climax breathes — restrained, and only the climax */
.how-step-icon .hiw-pulse { transform-box: fill-box; transform-origin: center; }
.iso-scene.in-view .hiw-pulse { animation: hiw-breathe 1.8s ease-in-out 0.9s infinite; }
@keyframes hiw-breathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* hover: the whole diorama lifts (shared .dim-object / .dim-shadow rules)
   and the gold accent warms a touch — no glow, no bounce */
.how-step:hover .hiw-climax,
.how-step:focus-within .hiw-climax { filter: brightness(1.05); }

@media (prefers-reduced-motion: reduce) {
  .how-step-icon .hiw-pop { opacity: 1; transform: none; animation: none; }
  .how-step-icon .hiw-draw { stroke-dashoffset: 0; animation: none; }
  .how-step-icon .hiw-pulse { opacity: 1; transform: none; }
  .iso-scene.in-view .hiw-pulse { animation: none; }
}

/* ============================================================
   14. SECURITY NARRATIVE — "recreate the experience" scene (svg-v5).
   A guarded product (standing app window) on a grounded, gridded
   platform; trusted device nodes connect over quiet taupe lines;
   one compromised node reaches for the product and turns red; a
   gold scan ring sweeps out and flags it; the system severs that
   link (spark + broken red stub); the bad node greys out and drifts
   away; a gold shield locks in with a checkmark and the data settles
   safe while the trusted connections keep running.
   Dimensional-craft spec: 2:1 dimetric, per-face palette (white top /
   #E7E0D3 left / #CBBFA6 right), soft down-right shadows, ONE gold
   climax (the shield). One looping CSS timeline (--sec-cycle); the
   layout IIFE only adds `.sec-playing` on scroll-in (never under
   reduced-motion). Default + reduced-motion pin the resolved-safe
   frame: nodes present & trusted, product secured, shield gold +
   check, no threat. Palette: navy / gold / taupe + one muted red.
   ============================================================ */
.sec-scene {
  --sec-cycle: 12s;
  margin: 0;
}
.sec-caption {
  margin-top: 0.6rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

/* ---- resolved static frame (before play / reduced motion): the CALM END of
   the story — threat detected, CUT, data safe. The bad node sits dead-grey +
   slashed + detached at the edge with a clean gap, so the quiet-thriller beat
   reads even for someone who lands after the animation. ---- */
.sec-gold-row { stroke: #DAB56E; }                 /* the product's one gold micro-signal (§5) */
.sec-traffic { opacity: 0; stroke-dasharray: 8 92; stroke-dashoffset: 100; }
.sec-link-bad { opacity: 0; stroke-dashoffset: var(--reach, 62px); }  /* fully retracted -> the gap */
.sec-bad-mark { opacity: 0; }
.sec-badge { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sec-severed { opacity: 0.5; }                      /* frayed cut-end at the product, in the gap */
.sec-cut-spark { opacity: 0; }
.sec-scan-ring { opacity: 0; }
.sec-flag { opacity: 0; }
.sec-bad-node { transform-box: fill-box; transform-origin: center; transform: translate(30px, 18px) scale(0.92); opacity: 0.62; }
.sec-bad-grey { opacity: 0.92; }                    /* dead-grey device */
.sec-bad-slash { opacity: 1; }                      /* decisive severance mark */
.sec-safe-wash { opacity: 0; }
.sec-shield { transform-box: fill-box; transform-origin: center bottom; }
.sec-check { stroke-dasharray: 60; stroke-dashoffset: 0; }   /* drawn in the static frame */

/* ---- the running timeline (only once scrolled into view) ---- */

/* trusted traffic: short steel dashes ride toward the product, always running */
.sec-scene.sec-playing .sec-traffic {
  opacity: 0.9;
  animation: sec-traffic-run 1.9s linear infinite;
  animation-delay: var(--t-delay, 0s);
}
@keyframes sec-traffic-run { to { stroke-dashoffset: 0; } }

/* the doomed connection reaches for the product, turns hostile, then SNAPS + retracts */
.sec-scene.sec-playing .sec-link-bad {
  animation: sec-badlink var(--sec-cycle) ease-in-out infinite;
}
@keyframes sec-badlink {
  0%, 5%   { stroke: #938366; stroke-dashoffset: var(--reach, 62px); opacity: 0; }
  7%       { opacity: 0.65; }
  17%      { stroke: #938366; stroke-dashoffset: 0; opacity: 0.65; }   /* reached the product */
  22%      { stroke: #938366; stroke-dashoffset: 0; opacity: 0.7; }
  25%, 47% { stroke: #C0392B; stroke-dashoffset: 0; opacity: 0.95; }   /* hostile grip */
  50%      { stroke: #C0392B; stroke-dashoffset: 0; opacity: 0.95; }
  56%      { stroke: #C0392B; stroke-dashoffset: var(--reach, 62px); opacity: 0.85; } /* SNAP: recoils to the node */
  61%      { opacity: 0; }
  100%     { stroke: #938366; stroke-dashoffset: var(--reach, 62px); opacity: 0; }
}

/* the compromised node: screen reddens + a red X fades in */
.sec-scene.sec-playing .sec-bad-screen {
  animation: sec-go-bad var(--sec-cycle) ease-in-out infinite;
}
@keyframes sec-go-bad {
  0%, 17% { fill: #23293A; }
  25%, 50% { fill: #5C2118; }
  70%, 100% { fill: #23293A; }
}
.sec-scene.sec-playing .sec-bad-mark {
  animation: sec-mark-in var(--sec-cycle) ease-in-out infinite;
}
@keyframes sec-mark-in {
  0%, 19% { opacity: 0; }
  27%, 52% { opacity: 0.95; }
  60%, 100% { opacity: 0; }
}

/* a red alert badge pops in over the threat, leaves when it's cut */
.sec-scene.sec-playing .sec-badge {
  animation: sec-badge-pop var(--sec-cycle) ease-out infinite;
}
@keyframes sec-badge-pop {
  0%, 19% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; transform: scale(1.14); }
  29%, 51% { opacity: 1; transform: scale(1); }
  58% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(0.4); }
}

/* detection: a single gold scan ring sweeps out from the product */
.sec-scene.sec-playing .sec-scan-ring {
  animation: sec-scan var(--sec-cycle) ease-out infinite;
}
@keyframes sec-scan {
  0%, 30% { r: 18px; opacity: 0; stroke-width: 3; }
  34% { opacity: 0.9; }
  46% { r: 150px; opacity: 0; stroke-width: 1; }
  47%, 100% { r: 18px; opacity: 0; }
}

/* a red flag ring pulses around the bad node once it's detected */
.sec-scene.sec-playing .sec-flag {
  animation: sec-flag var(--sec-cycle) ease-out infinite;
}
@keyframes sec-flag {
  0%, 34% { r: 0; opacity: 0; }
  38% { r: 4px; opacity: 0.95; }
  46% { r: 22px; opacity: 0.8; }
  54% { r: 22px; opacity: 0.32; }
  58%, 100% { r: 0; opacity: 0; }
}

/* the cut: a spark blooms at the sever point, the broken red stub recoils */
.sec-scene.sec-playing .sec-cut-spark {
  animation: sec-spark var(--sec-cycle) ease-out infinite;
}
@keyframes sec-spark {
  0%, 50% { r: 0; opacity: 0; }
  53% { r: 8px; opacity: 1; }
  60% { r: 2px; opacity: 0; }
  100% { r: 0; opacity: 0; }
}
.sec-scene.sec-playing .sec-severed {
  animation: sec-severed-show var(--sec-cycle) ease-in-out infinite;
}
@keyframes sec-severed-show {
  0%, 52% { opacity: 0; }
  56% { opacity: 0.9; }
  66% { opacity: 0.5; }
  88% { opacity: 0.5; }
  95%, 100% { opacity: 0; }
}

/* the bad node dies: faces go dead-grey, a red slash lands, and it drifts
   detached to the edge — decisive severance that still reads once it settles */
.sec-scene.sec-playing .sec-bad-grey {
  animation: sec-grey-in var(--sec-cycle) ease-in-out infinite;
}
@keyframes sec-grey-in {
  0%, 54% { opacity: 0; }
  62% { opacity: 0.92; }
  88% { opacity: 0.92; }
  96%, 100% { opacity: 0; }
}
.sec-scene.sec-playing .sec-bad-slash {
  animation: sec-slash-in var(--sec-cycle) ease-out infinite;
}
@keyframes sec-slash-in {
  0%, 55% { opacity: 0; }
  60% { opacity: 1; }
  88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
.sec-scene.sec-playing .sec-bad-node {
  animation: sec-node-falloff var(--sec-cycle) cubic-bezier(0.4, 0, 0.7, 1) infinite;
}
@keyframes sec-node-falloff {
  0%, 54% { transform: translate(0, 0) scale(1); opacity: 1; }
  66% { transform: translate(30px, 18px) scale(0.92); opacity: 0.62; }
  88% { transform: translate(30px, 18px) scale(0.92); opacity: 0.62; }
  97%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* the protected data flickers reassuringly, then settles */
.sec-scene.sec-playing .sec-safe-wash {
  animation: sec-safe-wash var(--sec-cycle) ease-in-out infinite;
}
@keyframes sec-safe-wash {
  0%, 60% { opacity: 0; }
  64% { opacity: 0.5; }
  67% { opacity: 0.12; }
  70% { opacity: 0.4; }
  76%, 100% { opacity: 0; }
}

/* the shield gives a confirming nudge + the checkmark completes: data settled safe */
.sec-scene.sec-playing .sec-shield {
  animation: sec-shield-confirm var(--sec-cycle) ease-in-out infinite;
}
@keyframes sec-shield-confirm {
  0%, 60% { transform: scale(1); }
  67% { transform: scale(1.06); }
  76%, 100% { transform: scale(1); }
}
.sec-scene.sec-playing .sec-check {
  animation: sec-check-draw var(--sec-cycle) ease-out infinite;
}
@keyframes sec-check-draw {
  0%, 60% { stroke-dashoffset: 60; }
  71% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

/* ============================================================
   15. PRODUCT DEVELOPMENT — the FSDD U-shaped process scene.
   (The hero scene is now "The Other Queue" — see section 11c.)
     #pd-fsdd-scene  a U-shaped path: creating stages down the left,
                     validating stages up the right, one pulse runs
                     the whole loop.
   Looping CSS timeline; the IIFE only adds `.in-view`. Default
   (and reduced-motion) pins the assembled, all-lit frame.
   Palette: navy / gold / taupe.
   ============================================================ */
.pd-u-scene { margin: 0; }
.pd-caption {
  margin-top: 0.6rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

/* ---- the FSDD U: stages light in sequence, one pulse runs the path ---- */
.pd-u-path {
  stroke-dasharray: 4 9;
  stroke-dashoffset: 0;
}
.pd-u-pulse {
  --pd-u-len: 1480;
  stroke-dasharray: 28 1480;
  stroke-dashoffset: 1480;
  opacity: 0;
}
.pd-u-scene.in-view .pd-u-pulse {
  opacity: 1;
  animation: pd-u-pulse-run 6s linear infinite;
}
@keyframes pd-u-pulse-run {
  to { stroke-dashoffset: -28; }
}
.pd-u-stage {
  opacity: 0.3;
  transform-box: fill-box;
  transform-origin: center;
}
.pd-u-scene.in-view .pd-u-stage {
  animation: pd-u-stage-light 6s ease-in-out infinite;
  animation-delay: calc(var(--si, 0) * 0.32s);
}
@keyframes pd-u-stage-light {
  0%, 6% { opacity: 0.3; transform: scale(0.92); }
  14% { opacity: 1; transform: scale(1.06); }
  28% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.62; transform: scale(1); }
}

/* ============================================================
   16. INDIVIDUAL TRAINING — 1:1 capability growth (svg-v5, spec-built).
   Rebuilt to the SVG Dimensional Craft Spec: a true-dimetric grounded
   scene — a matte-white learner reaching up at a skill tree rooted in a
   foundation block. Dark, undiscovered nodes light up one at a time as
   branches DRAW out to them (you can't use what you don't know exists),
   climbing a GOLD spine to a single gold mastery apex (the one climax).
   A capability rail fills at the front. Single-figure / skill-unlock feel
   (the deliberate contrast with Group's multi-figure network).
   Scoped to #it-coaching-scene. 8s loop; IntersectionObserver adds .in-view.
   ============================================================ */
.it-scene { margin: 0; }
.it-caption {
  margin-top: 0.6rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

/* Branches / trunk / gold spine: line-draw in sequence (the signature motion) */
.it-branch {
  stroke-dasharray: var(--len, 100);
  stroke-dashoffset: var(--len, 100);
}
.it-scene.in-view .it-branch {
  animation: it-branch-draw 8s ease-in-out infinite;
  animation-delay: calc(var(--li, 0) * 0.45s);
}
@keyframes it-branch-draw {
  0%, 4% { stroke-dashoffset: var(--len, 100); }
  18% { stroke-dashoffset: 0; }
  88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: var(--len, 100); }
}

/* Node reveal: a subtle pop as the ability comes online (paired with the lock lift) */
.it-node {
  transform-box: fill-box;
  transform-origin: center;
}
.it-scene.in-view .it-node {
  animation: it-node-pop 8s ease-in-out infinite;
  animation-delay: calc(var(--ni, 0) * 0.45s);
}
@keyframes it-node-pop {
  0%, 14% { transform: scale(0.9); }
  20% { transform: scale(1.09); }
  26% { transform: scale(1); }
  88% { transform: scale(1); }
  100% { transform: scale(0.9); }
}

/* Locked scrim: the dark, undiscovered slot that lifts to reveal the lit node */
.it-lock { opacity: 1; }
.it-scene.in-view .it-lock {
  animation: it-unlock 8s ease-in-out infinite;
  animation-delay: calc(var(--ni, 0) * 0.45s + 0.12s);
}
@keyframes it-unlock {
  0%, 14% { opacity: 1; }
  22% { opacity: 0; }
  88% { opacity: 0; }
  96%, 100% { opacity: 1; }
}

/* The ONE gold climax breathes after it unlocks (only the apex pulses) */
.it-apex-star {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.it-scene.in-view .it-apex-star {
  animation: it-apex 8s ease-in-out infinite;
}
@keyframes it-apex {
  0%, 44% { opacity: 0; transform: scale(0.7); }
  52% { opacity: 1; transform: scale(1.14); }
  64% { transform: scale(1); }
  78% { transform: scale(1.08); }
  88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.7); }
}

/* Capability meter: the taupe fill draws across the surface as abilities come online */
.it-meter-fill {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}
.it-scene.in-view .it-meter-fill {
  animation: it-meter 8s ease-in-out infinite;
}
@keyframes it-meter {
  0%, 4% { stroke-dashoffset: 90; }
  46% { stroke-dashoffset: 0; }
  88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 90; }
}
.it-meter-tip {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.it-scene.in-view .it-meter-tip {
  animation: it-tip 8s ease-in-out infinite;
}
@keyframes it-tip {
  0%, 44% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 1; transform: scale(1.15); }
  58% { transform: scale(1); }
  88% { opacity: 1; }
  96%, 100% { opacity: 0; transform: scale(0.4); }
}

/* Ambient scene-breathe: the learner is alive, nothing "moving" yet */
.it-learner {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.it-scene.in-view .it-learner {
  animation: it-breathe 6s ease-in-out infinite;
}
@keyframes it-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* ============================================================
   17. GROUP TRAINING — team enablement (svg-v5, spec-built).
   Rebuilt to the SVG Dimensional Craft Spec: five matte-white,
   per-face-shaded teammates on a grounded rounded stage, each at a
   DIFFERENT little workstation — monitor, code window, document,
   phone, chat panel (five ways of using AI). Quiet TAUPE connectors
   DRAW inward in sequence and converge on a single gold keystone —
   the shared standard — which activates and stamps a checkmark (the
   one gold climax; gold lives nowhere else). Then all five teammates
   pulse TOGETHER at once: one connected team, not five private habits
   (the deliberate multi-figure contrast with Individual's single
   figure). Scoped to #gt-team-scene. Navy / white / taupe / gold.
   9s loop; IntersectionObserver adds .in-view.
   ============================================================ */
.gt-scene { margin: 0; }
.gt-caption {
  margin-top: 0.6rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

/* One 9s master timeline. Storyboard: 0-12% five workstations present, each
   doing its own thing (scattered) -> 12-34% quiet taupe connectors draw inward
   (converge) -> 40-56% the gold keystone rises + checkmark stamps (the ONE
   climax) -> 56-70% all five teammates pulse together (one team) -> 70-94%
   resolved hold, only the keystone breathing -> 94-100% soft power-down (fades,
   never an un-draw snap) then the breath repeats. Connectors stay TAUPE the
   whole time — gold lives only on the keystone. */

/* Five workstation devices: each person's own way — pop in independently */
.gt-dev {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.gt-scene.in-view .gt-dev {
  animation: gt-dev-in 9s ease-in-out infinite;
  animation-delay: calc(var(--di, 0) * 0.14s);
}
@keyframes gt-dev-in {
  0% { opacity: 0; transform: scale(0.6); }
  4% { opacity: 1; transform: scale(1.06); }
  8%, 93% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.7; transform: scale(0.88); }
}

/* Subtle per-device activity (a muted row, never gold) sells "five ways" */
.gt-dev-live { opacity: 0.5; }
.gt-scene.in-view .gt-dev-live {
  animation: gt-dev-live 9s ease-in-out infinite;
  animation-delay: calc(var(--di, 0) * 0.14s);
}
@keyframes gt-dev-live {
  0%, 100% { opacity: 0.45; }
  6% { opacity: 1; }
  18% { opacity: 0.6; }
  30% { opacity: 0.95; }
  42%, 90% { opacity: 0.75; }
}

/* Quiet taupe connectors: draw inward in sequence, hold drawn, soft opacity
   fade at the loop seam (no un-draw snap). NEVER gold. */
.gt-link {
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
}
.gt-scene.in-view .gt-link {
  animation: gt-link-draw 9s ease-in-out infinite;
  animation-delay: calc(var(--gi, 0) * 0.28s);
}
@keyframes gt-link-draw {
  0% { stroke-dashoffset: 132; opacity: 0; }
  12% { stroke-dashoffset: 132; opacity: 1; }
  34% { stroke-dashoffset: 0; opacity: 1; }
  94% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Convergence hub ring (steel, not gold): appears as the links meet */
.gt-hub { opacity: 0; }
.gt-scene.in-view .gt-hub {
  animation: gt-hub-in 9s ease-in-out infinite;
}
@keyframes gt-hub-in {
  0%, 28% { opacity: 0; }
  40%, 94% { opacity: 1; }
  100% { opacity: 0; }
}

/* THE ONE gold climax: the keystone rises, activates, then breathes */
.gt-keystone {
  transform-box: fill-box;
  transform-origin: center bottom;
  opacity: 0.3;
}
.gt-scene.in-view .gt-keystone {
  animation: gt-keystone-rise 9s ease-in-out infinite;
}
@keyframes gt-keystone-rise {
  0%, 40% { opacity: 0.3; transform: scale(0.82); }
  48% { opacity: 1; transform: scale(1.14); }
  54% { transform: scale(1); }
  70% { transform: scale(1.05); }
  82% { transform: scale(1); }
  94% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0.3; transform: scale(0.82); }
}
.gt-check {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
}
.gt-scene.in-view .gt-check {
  animation: gt-check-draw 9s ease-in-out infinite;
}
@keyframes gt-check-draw {
  0% { stroke-dashoffset: 34; opacity: 0; }
  48% { stroke-dashoffset: 34; opacity: 1; }
  56% { stroke-dashoffset: 0; opacity: 1; }
  94% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Ensemble unison: after the standard lights, all five pulse TOGETHER at once */
.gt-fig {
  transform-box: fill-box;
  transform-origin: center bottom;
  opacity: 0.9;
}
.gt-scene.in-view .gt-fig {
  animation: gt-fig-sync 9s ease-in-out infinite;
}
@keyframes gt-fig-sync {
  0%, 56% { opacity: 0.9; transform: scale(1); }
  62% { opacity: 1; transform: scale(1.06); }
  70% { opacity: 1; transform: scale(1); }
  94% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.9; transform: scale(1); }
}

/* ============================================================
   18. STARTUP LAUNCH LAB — idea crosses the threshold into a live
   company (svg-v5, dimensional craft spec). True 2:1 dimetric
   diorama on a grounded platform: idea sketch (left) -> half-built
   product + assembling modules + red unfinished-count (center) ->
   finished product goes LIVE with a single gold verified/live badge,
   its first outside visitor, and a first-user notification (right).
   One gold climax (the check); gold connector converges on it; red
   is the counter-note. Motion grammar: staged rise-in, line-draw
   connector, ONE pulsing climax, subtle scene-breathe — play once on
   .in-view (IIFE adds it), then hold. No green, no glow, no neon.
   ============================================================ */
.sl-scene { margin: 0; }
.sl-caption {
  margin-top: 0.6rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}
/* --- base (pre-reveal) states: objects hidden until the scene enters --- */
.sl-beat,
.sl-prop,
.sl-modules,
.sl-founder,
.sl-visitor {
  transform-box: fill-box;
  transform-origin: center bottom;
  opacity: 0;
}
.sl-progress2 { opacity: 0; }
.sl-red,
.sl-snap,
.sl-bubble,
.sl-climax {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.sl-climax-ring,
.sl-climax-core {
  transform-box: fill-box;
  transform-origin: center;
}
.sl-sketch {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.sl-progress { opacity: 0; }

/* --- staged reveal (plays once on enter, holds the resolved frame) --- */
.sl-scene.in-view .sl-beat1   { animation: sl-rise 0.55s ease-out 0.15s both; }
.sl-scene.in-view .sl-prop    { animation: sl-rise 0.55s ease-out 0.40s both; }
.sl-scene.in-view .sl-sketch  { animation: sl-sketch-draw 0.6s ease-out 0.55s both; }
.sl-scene.in-view .sl-beat2   { animation: sl-rise 0.55s ease-out 0.80s both; }
.sl-scene.in-view .sl-modules { animation: sl-rise 0.55s ease-out 0.95s both; }
.sl-scene.in-view .sl-red     { animation: sl-pop 0.4s ease-out 1.15s both; }
.sl-scene.in-view .sl-snap    { animation: sl-pop 0.42s ease-out 1.30s both; }
.sl-scene.in-view .sl-progress { animation: sl-progress-draw 0.9s ease-out 1.25s both; }
.sl-scene.in-view .sl-beat3   { animation: sl-rise 0.6s ease-out 1.95s both; }
.sl-scene.in-view .sl-founder { animation: sl-rise 0.55s ease-out 2.15s both; }
.sl-scene.in-view .sl-climax  { animation: sl-pop 0.45s ease-out 2.45s both; }
.sl-scene.in-view .sl-visitor { animation: sl-rise 0.55s ease-out 2.65s both; }
.sl-scene.in-view .sl-progress2 { animation: sl-progress-draw 0.7s ease-out 2.95s both; }
.sl-scene.in-view .sl-bubble  { animation: sl-pop 0.4s ease-out 3.30s both; }
/* the ONE gold climax breathes + broadcasts a restrained ring (continuous) */
.sl-scene.in-view .sl-climax-ring { animation: sl-ping 2.1s ease-out 2.9s infinite; }
.sl-scene.in-view .sl-climax-core { animation: sl-core-breathe 2.4s ease-in-out 3s infinite; }
/* ambient scene-breathe — nothing "moving," everything alive */
.sl-scene.in-view .sl-breathe { animation: sl-scene-breathe 6s ease-in-out 0.2s infinite; }

@keyframes sl-rise {
  from { opacity: 0; transform: translateY(9px) scale(0.965); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sl-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  70%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes sl-sketch-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes sl-progress-draw {
  0%   { opacity: 0; stroke-dashoffset: 240; }
  22%  { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes sl-ping {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.55); }
}
@keyframes sl-core-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
@keyframes sl-scene-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ============================================================
   19. ABOUT — "foundation of trust" founder scene (svg-v5,
   dimensional craft spec). True 2:1-dimetric diorama on a grounded
   platform: four proven-credential courses (~5 yrs securing critical
   infrastructure, SOC 2 Type II, ISO 27001, a tested/proven process)
   are real 3-face boxes (white top / #E7E0D3 left / #CBBFA6 right,
   1.7px #23293A seams) that RISE in sequence and stack into a solid,
   tapering foundation; a security shield (navy padlock) + a stack of
   certified documents sit at the foot as the proof it's built from; a
   gold line climbs the foundation to its single gold climax — the
   "proven process" keystone (solid Soft-Fawn, dark check). A calm
   expert figure settles on top last. Light upper-left, soft down-right
   shadows; ONE gold climax; no glow (the banned haze is gone).
   Scoped to #about-foundation-scene via .ab-* classes. Motion plays
   once on .in-view, then holds; reduced motion pins the assembled
   frame. Distinct from the homepage 3-step, security network, training
   skill-tree/ring, product pipeline, and launch arc.
   ============================================================ */
.about-scene { margin: 0; }
.about-caption {
  margin-top: 0.6rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

/* --- base (pre-reveal) states: objects hidden until the scene enters --- */
.ab-course,
.ab-prop,
.ab-figure {
  transform-box: fill-box;
  transform-origin: center bottom;
  opacity: 0;
}
.ab-rise, .ab-rise-tip { opacity: 0; }
.ab-rise-tip { transform-box: fill-box; transform-origin: center; }
.ab-check {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}

/* --- staged reveal: the foundation assembles bottom -> top, the gold path
   climbs to the keystone, its proven-check draws + breathes, then the
   expert settles on the finished foundation (plays once, holds). --- */
.about-scene.in-view .ab-c1 { animation: ab-course-in 0.55s ease-out 0.15s both; }
.about-scene.in-view .ab-c2 { animation: ab-course-in 0.55s ease-out 0.45s both; }
.about-scene.in-view .ab-c3 { animation: ab-course-in 0.55s ease-out 0.75s both; }
.about-scene.in-view .ab-c4 { animation: ab-course-in 0.55s ease-out 1.05s both; }
.about-scene.in-view .ab-prop1 { animation: ab-course-in 0.55s ease-out 0.55s both; }
.about-scene.in-view .ab-prop2 { animation: ab-course-in 0.55s ease-out 0.70s both; }
.about-scene.in-view .ab-prop3 { animation: ab-course-in 0.55s ease-out 0.85s both; }
.about-scene.in-view .ab-rise { animation: ab-line-draw 0.85s ease-out 1.35s both; }
.about-scene.in-view .ab-rise-tip { animation: ab-tip-in 0.35s ease-out 2.1s both; }
.about-scene.in-view .ab-check {
  animation: ab-check-draw 0.5s ease-out 1.55s both,
             ab-check-breathe 2.4s ease-in-out 2.3s infinite;
}
.about-scene.in-view .ab-figure { animation: ab-figure-settle 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) 1.9s both; }
/* ambient scene-breathe — nothing "moving," everything alive */
.about-scene.in-view .ab-breathe { animation: ab-scene-breathe 6s ease-in-out 0.2s infinite; }

@keyframes ab-course-in {
  from { opacity: 0; transform: translateY(11px) scale(0.965); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ab-line-draw {
  0%   { opacity: 0; stroke-dashoffset: 140; }
  22%  { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes ab-tip-in {
  0%   { opacity: 0; transform: scale(0.4); }
  70%  { transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ab-check-draw {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: 0; }
}
@keyframes ab-check-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@keyframes ab-figure-settle {
  from { opacity: 0; transform: translateY(-15px) scale(0.965); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ab-scene-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
/* reduced-motion for this scene is pinned in the site-wide block (§ below). */

/* ============================================================
   20. STROLL HERO ACCENT — "your idea becomes an app you can use"
   (svg-v5, dimensional craft spec). A small, warm neighborly diorama
   for the magazine audience: a glowing lightbulb tile (the idea) on a
   grounded rounded tabletop, one gold path sweeping to a finished app
   on your own device (the single gold climax), with homey props —
   a potted plant, a notepad, a coffee. True 2:1 dimetric: white matte
   tops / Dusty-Taupe sides / Shadow-Grey structure, light upper-left,
   soft down-right cast + contact shadows so nothing floats. Reveal
   rides the shared IntersectionObserver (.iso-scene.in-view); all
   motion is pure CSS, zero external JS.  [scene section — svg-v5]
   ============================================================ */
#stroll-hero-scene {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  aspect-ratio: 398 / 242;
}
#stroll-hero-scene svg { display: block; width: 100%; height: 100%; }

/* gentle ambient life — the whole diorama breathes, nothing "moving" */
.stl-scene { transform-origin: 50% 60%; }
.iso-scene.in-view .stl-scene { animation: stl-breathe 6s ease-in-out 1.2s infinite; }
@keyframes stl-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* objects settle in on scroll-in, staggered so the little story builds */
.stl-pop { opacity: 0; transform: translateY(9px); }
.iso-scene.in-view .stl-pop {
  animation: stl-pop-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}
@keyframes stl-pop-in { to { opacity: 1; transform: translateY(0); } }

/* the golden path draws once, after the idea and device are present */
.stl-draw { stroke-dasharray: var(--len, 196); stroke-dashoffset: var(--len, 196); }
.iso-scene.in-view .stl-draw {
  animation: stl-draw-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.75s;
}
@keyframes stl-draw-in { to { stroke-dashoffset: 0; } }

/* the ONE gold climax — the finished app's primary action — breathes */
.stl-pulse { transform-box: fill-box; transform-origin: center; }
.iso-scene.in-view .stl-pulse { animation: stl-pulse 1.8s ease-in-out 1.5s infinite; }
@keyframes stl-pulse {
  0%, 100% { transform: scale(1); opacity: 0.94; }
  50% { transform: scale(1.07); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .iso-scene.in-view .stl-scene { animation: none; }
  .stl-pop { opacity: 1; transform: none; }
  .iso-scene.in-view .stl-pop { animation: none; }
  .stl-draw { stroke-dashoffset: 0; }
  .iso-scene.in-view .stl-draw { animation: none; }
  .stl-pulse { opacity: 1; transform: none; }
  .iso-scene.in-view .stl-pulse { animation: none; }
}

/* ============================================================
   12b. MEDIA KIT / BRAND PAGE (/media-kit) — scoped .mk-* classes.
   Reuses the shared tokens, .cast-shadow depth, and .depth-object. Built on
   the "sharp outside, rounded inside" DNA: crisp section/figure outer edges,
   rounded inner chips/swatches. No new color outside the four-token palette.
   ============================================================ */

/* --- 01 Logo: the wordmark on dark + light grounds --- */
.mk-logo-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  border-radius: 0.25rem;       /* sharp outer */
  border: 1px solid rgba(218, 181, 110, 0.22);
  padding: 2.75rem 1.5rem;
  min-height: 200px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);  /* static depth */
}
.mk-logo-dark {
  background: var(--c-navy);
}
.mk-logo-light {
  background: var(--c-white);
  border-color: rgba(35, 41, 58, 0.16);
}
/* The wordmark partial's <text> fills are white/gold (built for dark). On the
   light stage, recolor the white "AgentC" to navy so it reads on white; the
   gold rules + CONSULTING stay gold (in-palette on both). */
.mk-logo-light .wordmark text:first-of-type {
  fill: var(--c-navy);
}
.mk-logo-stage .wordmark {
  width: clamp(180px, 42vw, 260px);
  height: auto;
}
.mk-logo-caption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}
.mk-logo-caption-dark {
  color: rgba(35, 41, 58, 0.66);
}

/* --- 02 Color: swatches (figure + dl) --- */
.mk-swatch {
  display: flex;
  flex-direction: column;
  border-radius: 0.25rem;       /* sharp outer */
  border: 1px solid rgba(218, 181, 110, 0.22);
  overflow: hidden;
  background: rgba(147, 131, 102, 0.08);
  box-shadow: 0 16px 36px -22px rgba(0, 0, 0, 0.6);  /* static depth */
}
.mk-swatch-chip {
  height: 120px;
  width: 100%;
  border-radius: 0;             /* the chip is the sharp color field */
}
.mk-swatch-chip-bordered {
  box-shadow: inset 0 0 0 1px rgba(147, 131, 102, 0.4);
}
.mk-swatch-body {
  padding: 1.2rem 1.3rem 1.4rem;
}
.mk-swatch-dl {
  margin: 0;
}
.mk-swatch-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--c-white);
  margin: 0 0 0.35rem;
}
.mk-swatch-hex {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--c-gold);
  margin: 0 0 0.6rem;
}
.mk-swatch-role {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* --- 03 Typography: specimens --- */
.mk-type-spec {
  border-radius: 0.3rem;
}
.mk-type-sample {
  color: var(--c-white);
  line-height: 1.1;
  margin: 0 0 1rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
.mk-type-michroma {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.4rem);
  letter-spacing: 0.01em;
}
.mk-type-orbitron {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(0.95rem, 3.4vw, 1.6rem);
  letter-spacing: 0.18em;
  color: var(--c-gold);
}
.mk-type-fira {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  line-height: 1.35;
}
.mk-type-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 0;
  border-top: 1px solid rgba(147, 131, 102, 0.22);
  padding-top: 1rem;
}
.mk-type-meta div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mk-type-meta dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-gold);
  flex: 0 0 5.5rem;
}
.mk-type-meta dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  flex: 1 1 12rem;
}

/* --- 05 Visual language: isometric accent + principles list --- */
.mk-iso-accent {
  border-radius: 0.25rem;       /* sharp outer */
  border: 1px solid rgba(218, 181, 110, 0.22);
  background: rgba(35, 41, 58, 0.5);
  padding: 1rem 1rem 0.75rem;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6);  /* static depth */
}
.mk-iso-accent svg {
  width: 100%;
  height: auto;
}
.mk-iso-caption {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin: 0.5rem 0 0;
}
/* line-motion: the gold accent draws up the stack, the pulse breathes at the top */
.mk-iso-line {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: mk-iso-draw 2.6s ease-in-out infinite;
}
.mk-iso-pulse {
  opacity: 0;
  animation: mk-iso-pulse 2.6s ease-in-out infinite;
}
@keyframes mk-iso-draw {
  0% { stroke-dashoffset: 140; }
  45% { stroke-dashoffset: 0; }
  75% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 140; }
}
@keyframes mk-iso-pulse {
  0%, 35% { opacity: 0; r: 4; }
  50% { opacity: 1; r: 5.5; }
  75% { opacity: 0.85; r: 4; }
  100% { opacity: 0; r: 4; }
}
.mk-principle {
  border-radius: 0.25rem;       /* sharp outer */
  border: 1px solid rgba(218, 181, 110, 0.18);
  background: rgba(147, 131, 102, 0.08);
  padding: 1.05rem 1.2rem;
  display: block;
}
.mk-principle-title {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--c-gold);
  margin-bottom: 0.35rem;
}
.mk-principle-body {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   13. REDUCED MOTION — pin everything to its assembled state.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .iso-draw {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .iso-pop {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .iso-pulse {
    opacity: 0 !important;
    animation: none !important;
  }
  .station {
    opacity: 1 !important;
    animation: none !important;
  }
  .reveal,
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .loop-node {
    animation: none !important;
  }
  .cast-shadow {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .depth-object {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* Security narrative: pin to the resolved CALM END — threat detected, CUT,
     data safe. Trusted links present; the bad node sits dead-grey + slashed +
     detached at the edge with a clean gap; shield gold, checkmark drawn. */
  .sec-scene .sec-traffic,
  .sec-scene.sec-playing .sec-traffic { animation: none !important; opacity: 0 !important; }
  .sec-scene .sec-link-bad,
  .sec-scene.sec-playing .sec-link-bad { animation: none !important; opacity: 0 !important; }
  .sec-scene .sec-bad-screen,
  .sec-scene.sec-playing .sec-bad-screen { animation: none !important; fill: #23293A !important; }
  .sec-scene .sec-bad-mark,
  .sec-scene.sec-playing .sec-bad-mark { animation: none !important; opacity: 0 !important; }
  .sec-scene .sec-bad-node,
  .sec-scene.sec-playing .sec-bad-node { animation: none !important; opacity: 0.62 !important; transform: translate(30px, 18px) scale(0.92) !important; }
  .sec-scene .sec-bad-grey,
  .sec-scene.sec-playing .sec-bad-grey { animation: none !important; opacity: 0.92 !important; }
  .sec-scene .sec-bad-slash,
  .sec-scene.sec-playing .sec-bad-slash { animation: none !important; opacity: 1 !important; }
  .sec-scene .sec-badge,
  .sec-scene.sec-playing .sec-badge { animation: none !important; opacity: 0 !important; transform: none !important; }
  .sec-scene .sec-scan-ring,
  .sec-scene.sec-playing .sec-scan-ring { animation: none !important; opacity: 0 !important; }
  .sec-scene .sec-flag,
  .sec-scene.sec-playing .sec-flag { animation: none !important; opacity: 0 !important; }
  .sec-scene .sec-severed,
  .sec-scene.sec-playing .sec-severed { animation: none !important; opacity: 0.5 !important; }
  .sec-scene .sec-cut-spark,
  .sec-scene.sec-playing .sec-cut-spark { animation: none !important; opacity: 0 !important; }
  .sec-scene .sec-safe-wash,
  .sec-scene.sec-playing .sec-safe-wash { animation: none !important; opacity: 0 !important; }
  .sec-scene .sec-shield,
  .sec-scene.sec-playing .sec-shield { animation: none !important; transform: none !important; }
  .sec-scene .sec-check,
  .sec-scene.sec-playing .sec-check { animation: none !important; stroke-dashoffset: 0 !important; }
  /* Show every hero step stacked-but-visible is wrong (they overlap), so
     pin to step 1 only; the JS rotator is disabled by honoring this too. */
  .hero-step {
    transition: none !important;
  }
  .speech, .speech-2 {
    opacity: 1 !important;
    animation: none !important;
  }
  .conveyor-belt, .robot-bob, .arrow-draw {
    animation: none !important;
  }
  .arrow-draw {
    stroke-dashoffset: 0 !important;
  }
  /* Product Development FSDD U: pin to the assembled, all-lit frame. */
  .pd-u-scene .pd-u-pulse,
  .pd-u-scene.in-view .pd-u-pulse { animation: none !important; opacity: 0 !important; }
  .pd-u-scene .pd-u-stage,
  .pd-u-scene.in-view .pd-u-stage { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* Individual Training: pin to the resolved, all-abilities-online end-state. */
  .it-scene .it-branch,
  .it-scene.in-view .it-branch { animation: none !important; stroke-dashoffset: 0 !important; }
  .it-scene .it-node,
  .it-scene.in-view .it-node { animation: none !important; transform: none !important; }
  .it-scene .it-lock,
  .it-scene.in-view .it-lock { animation: none !important; opacity: 0 !important; }
  .it-scene .it-apex-star,
  .it-scene.in-view .it-apex-star { animation: none !important; opacity: 1 !important; transform: none !important; }
  .it-scene .it-meter-fill,
  .it-scene.in-view .it-meter-fill { animation: none !important; stroke-dashoffset: 0 !important; }
  .it-scene .it-meter-tip,
  .it-scene.in-view .it-meter-tip { animation: none !important; opacity: 1 !important; transform: none !important; }
  .it-scene .it-learner,
  .it-scene.in-view .it-learner { animation: none !important; transform: none !important; }
  /* Group Training: pin to the fully-connected, shared-standard-active frame.
     Connectors stay TAUPE (never gold) — gold lives only on the keystone. */
  .gt-scene .gt-link,
  .gt-scene.in-view .gt-link { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .gt-scene .gt-dev,
  .gt-scene.in-view .gt-dev { animation: none !important; opacity: 1 !important; transform: none !important; }
  .gt-scene .gt-dev-live,
  .gt-scene.in-view .gt-dev-live { animation: none !important; opacity: 0.75 !important; }
  .gt-scene .gt-hub,
  .gt-scene.in-view .gt-hub { animation: none !important; opacity: 1 !important; }
  .gt-scene .gt-keystone,
  .gt-scene.in-view .gt-keystone { animation: none !important; opacity: 1 !important; transform: none !important; }
  .gt-scene .gt-check,
  .gt-scene.in-view .gt-check { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .gt-scene .gt-fig,
  .gt-scene.in-view .gt-fig { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* Startup Launch Lab: pin to the resolved, launched-and-live frame. */
  .sl-scene .sl-beat, .sl-scene.in-view .sl-beat,
  .sl-scene .sl-prop, .sl-scene.in-view .sl-prop,
  .sl-scene .sl-modules, .sl-scene.in-view .sl-modules,
  .sl-scene .sl-snap, .sl-scene.in-view .sl-snap,
  .sl-scene .sl-red, .sl-scene.in-view .sl-red,
  .sl-scene .sl-founder, .sl-scene.in-view .sl-founder,
  .sl-scene .sl-visitor, .sl-scene.in-view .sl-visitor,
  .sl-scene .sl-climax, .sl-scene.in-view .sl-climax,
  .sl-scene .sl-bubble, .sl-scene.in-view .sl-bubble,
  .sl-scene .sl-breathe, .sl-scene.in-view .sl-breathe,
  .sl-scene .sl-climax-core, .sl-scene.in-view .sl-climax-core {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .sl-scene .sl-sketch,
  .sl-scene.in-view .sl-sketch { animation: none !important; stroke-dashoffset: 0 !important; }
  .sl-scene .sl-progress, .sl-scene .sl-progress2,
  .sl-scene.in-view .sl-progress,
  .sl-scene.in-view .sl-progress2 { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .sl-scene .sl-climax-ring,
  .sl-scene.in-view .sl-climax-ring { animation: none !important; opacity: 0 !important; transform: none !important; }
  /* About: pin the fully-assembled foundation, gold path drawn, expert standing. */
  .about-scene .ab-course, .about-scene .ab-prop, .about-scene .ab-figure,
  .about-scene.in-view .ab-course, .about-scene.in-view .ab-prop, .about-scene.in-view .ab-figure {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .about-scene .ab-rise,
  .about-scene.in-view .ab-rise { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .about-scene .ab-rise-tip,
  .about-scene.in-view .ab-rise-tip { animation: none !important; opacity: 1 !important; transform: none !important; }
  .about-scene .ab-check,
  .about-scene.in-view .ab-check { animation: none !important; stroke-dashoffset: 0 !important; }
  .about-scene .ab-breathe,
  .about-scene.in-view .ab-breathe { animation: none !important; transform: none !important; }
  /* Media kit: pin the isometric accent to its assembled, line-drawn frame. */
  .mk-iso-line { animation: none !important; stroke-dashoffset: 0 !important; }
  .mk-iso-pulse { animation: none !important; opacity: 0 !important; }
  /* Dimensional icon/component hover: no motion, but keep the static
     dimensional read — connectors fully drawn, no lift/slide transitions. */
  .dim-hover,
  .dim-hover .dim-object,
  .dim-hover .dim-shadow,
  .dim-hover .dim-signal,
  .card .dim-object,
  .card .dim-shadow,
  .card .dim-signal,
  .submenu-item .dim-object,
  .submenu-item .dim-shadow,
  .submenu-item .dim-signal {
    transition: none !important;
  }
  .dim-hover .dim-connector,
  .card .dim-connector,
  .submenu-item .dim-connector {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ===== 14. CONSENT BRIEFING (full-screen missive takeover) =====
   The GDPR notice rewritten as a handler-to-agent briefing — the pilot of
   the missive voice: the reader is a capable professional being briefed
   with respect. Sharp outer card, rounded inner forms (brand DNA). The
   overlay is JS-revealed only, so page content stays in the DOM for
   crawlers and no-JS readers. */
.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; /* JS flips to flex when consent is unset */
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(27, 32, 46, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
}
.consent-briefing {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin: auto;
  /* The card must fit ENTIRELY inside the viewport (owner law, 2026-07-14):
     collapsed by default, and the expanded briefing scrolls internally. */
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  display: flex;
  flex-direction: column;
  background: var(--c-navy-deep);
  border: 1px solid rgba(218, 181, 110, 0.4);
  border-radius: 0.25rem; /* sharp outside */
  padding: 2.2rem 2rem;
  box-shadow: 0 24px 60px var(--dim-shadow-strong);
  animation: consent-enter 0.4s var(--dim-hover-ease);
}
@keyframes consent-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.consent-eyebrow {
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-taupe);
  margin: 0 0 1.2rem;
}
/* Stencil-stamp headline: Michroma pressed inside a gold frame, set a
   hair off-angle — like a label stamped onto a crate. */
.consent-stamp {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.8vw, 1.55rem);
  font-weight: 700; /* synthesized — Michroma ships 400 only; a true squared bold is an open brand decision */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--c-white); /* white text in a gold outline — pops against the navy card */
  border: 2px solid var(--c-gold);
  border-radius: 2px;
  padding: 0.6rem 1rem;
  transform: rotate(-1.6deg);
  margin: 0 0 1.5rem;
}
.consent-body p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1rem;
}
.consent-body strong { color: var(--c-white); }
.consent-body a {
  color: var(--c-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-body a:hover { color: var(--c-gold-bright); }
.consent-signoff {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--c-taupe);
  margin: 0.2rem 0 0;
}
/* Collapsible long-form briefing: rounded inside (AR overlay DNA), scrolls
   internally when open so the card itself never outgrows the screen. */
.consent-details {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0 0 1.4rem;
  border: 1px solid rgba(218, 181, 110, 0.25);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
}
.consent-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--c-gold);
  padding: 0.7rem 0.9rem;
}
.consent-details summary::-webkit-details-marker { display: none; }
.consent-details summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  color: var(--c-gold);
  transition: transform 0.25s ease;
}
.consent-details[open] summary::before { content: "\2013"; }
.consent-details summary:hover { color: var(--c-gold-bright); }
.consent-details-body { padding: 0 0.9rem 0.9rem; }
.consent-details-body p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 0.8rem;
}
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}
/* Thumbs-up celebration: the button's thumb rocks, and a big thumb pops out
   of the card center and floats away — clicking OK should feel GOOD. */
.consent-ok .consent-thumb { display: inline-block; font-size: 1.1em; }
.consent-overlay.is-accepted .consent-ok .consent-thumb {
  animation: consent-thumb-rock 0.8s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes consent-thumb-rock {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.8) rotate(-14deg); }
  55%  { transform: scale(1.4) rotate(10deg); }
  100% { transform: scale(1); }
}
.consent-cheer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.consent-overlay.is-accepted .consent-cheer {
  animation: consent-cheer-pop 0.85s cubic-bezier(0.18, 1.25, 0.4, 1) forwards;
}
@keyframes consent-cheer-pop {
  0%   { opacity: 0; transform: scale(0.3) translateY(24px); }
  35%  { opacity: 1; transform: scale(1.15) translateY(0); }
  70%  { opacity: 1; transform: scale(1) translateY(-8px); }
  100% { opacity: 0; transform: scale(1.08) translateY(-36px); }
}
.consent-overlay.is-accepted .consent-briefing {
  animation: consent-exit 0.4s ease 0.5s forwards;
}
@keyframes consent-exit {
  to { opacity: 0; transform: translateY(10px) scale(0.98); }
}
.consent-actions .btn-primary,
.consent-actions .btn-ghost {
  text-decoration: none;
  font-size: 1.02rem;
}
/* Hover contract for the briefing CTAs: brighten the gold AND let the text
   pop — a touch bigger and bolder, white where contrast allows. */
.consent-actions .btn-primary:hover {
  background: var(--c-gold-bright);
  transform: translateY(-2px) scale(1.05);
  font-weight: 700;
}
.consent-actions .btn-ghost:hover {
  color: var(--c-white);
  border-color: var(--c-gold);
  transform: translateY(-2px) scale(1.05);
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .consent-briefing,
  .consent-overlay.is-accepted .consent-briefing,
  .consent-overlay.is-accepted .consent-cheer,
  .consent-overlay.is-accepted .consent-ok .consent-thumb { animation: none; }
  .consent-details summary::before { transition: none; }
}
@media (max-width: 760px) {
  .consent-overlay { padding: 1rem; }
  .consent-briefing {
    padding: 1.5rem 1.25rem;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
  }
  .consent-eyebrow { margin-bottom: 0.9rem; }
  .consent-stamp {
    font-size: 1.02rem;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1.1rem;
  }
  .consent-body p { font-size: 0.92rem; line-height: 1.55; }
  .consent-actions .btn-primary,
  .consent-actions .btn-ghost {
    font-size: 0.98rem;
    padding: 0.75rem 1.3rem;
  }
}

/* ===== 15. HERO FILM — "The Noise → The Calm" =====
   Full-viewport cinematic hero. A device-matched Seedance loop (person typing;
   the sharp physical world, no UI in the video) fills the screen; every
   notification is HTML overlaid as the exaggerated AR layer, anchored to the
   device it belongs to (computer screen / desk phone / wristwatch). A veil
   marks the turn: Act I overwhelm (fast, demanding, darker) → Act II calm
   (slow, grateful, brighter). Pipeline: docs/brand/AR_VIDEO_PIPELINE.md. */

.hero-noir {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 540px;
  overflow: hidden;
  /* Gutters ARE the page background — the scene fades into the site, so any
     viewport wider than the film reads as the film sitting IN the page. */
  background: var(--c-navy);
  /* Everything overlaid at the top must clear the fixed nav. */
  --nav-safe: 5.5rem;
}

.tension-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--c-navy);
  --tension: 0;
}

/* The frame replicates the cover-cropped video rectangle (JS keeps it in
   sync), so every % coordinate below is a coordinate ON THE VIDEO FRAME —
   overlays stay glued to their devices at any viewport size. */
.ts-frame { position: absolute; opacity: 1; transition: opacity 0.45s ease; }
/* Breakpoint crossings swap the whole scene: hide instantly, dissolve in. */
.ts-frame.is-switching { opacity: 0; transition: none; }
/* Viewports wider than the film get page-background gutters; the frame's
   left/right edges dissolve into them (owner: fade sides only, never
   top/bottom). JS sets .has-gutters whenever side gutters exist. */
.tension-stage.has-gutters .ts-frame {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ts-frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  filter: brightness(calc(1 - var(--tension) * 0.16)) saturate(calc(1 - var(--tension) * 0.12));
  transition: filter 1.2s ease;
}
.tension-stage.is-calm .ts-frame video {
  filter: brightness(1.07) saturate(1.04);
}

/* Vignette that breathes harder as the noise grows (JS drives --tension 0→1). */
.tension-stage::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 calc(30px + var(--tension) * 160px) rgba(10, 12, 20, calc(0.22 + var(--tension) * 0.55));
  transition: box-shadow 0.8s ease;
}

/* Legibility scrim behind the overlaid hero copy. */
.hero-noir::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(16, 19, 28, 0.72) 0%, rgba(16, 19, 28, 0.25) 22%, rgba(16, 19, 28, 0) 45%);
  z-index: 2;
}

/* The act veil — the artificial fade that marks before → after. */
.ts-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: #0c0f18;
  opacity: 0;
  transition: opacity 1.15s ease;
  z-index: 3;
}
.tension-stage.is-veiled .ts-veil { opacity: 1; }

/* Act chip — names the phase, top center just below the nav, and flashes
   when the act flips (The Noise → With AgentC). */
.ts-phase {
  position: absolute; left: 50%; top: var(--nav-safe);
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--font-accent);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  padding: 0.4em 1em;
  background: rgba(16, 19, 28, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 0.6s ease, border-color 0.6s ease;
}
/* The Calm state is a different object entirely: solid gold, navy text. */
.tension-stage.is-calm .ts-phase {
  color: var(--c-navy);
  background: var(--c-gold);
  border-color: var(--c-gold);
  font-weight: 700;
}
.ts-phase.is-flip { animation: ts-phase-flash 1s ease; }
@keyframes ts-phase-flash {
  0%   { transform: translateX(-50%) scale(1); }
  18%  { transform: translateX(-50%) scale(1.22); color: var(--c-gold-bright); border-color: var(--c-gold-bright); background: rgba(218, 181, 110, 0.18); }
  45%  { transform: translateX(-50%) scale(0.98); }
  100% { transform: translateX(-50%) scale(1); }
}

/* --- Overlay stacks --- */
.ts-toasts, .ts-stack-phone, .ts-stack-banner, .ts-watch {
  position: absolute;
  pointer-events: none;
}
/* Desktop notifications are VIEWER-FACING: they slide in from off the right
   edge of the screen, below the nav, sized like real OS toasts meant for the
   person watching — not props inside the scene. */
.ts-toasts {
  display: flex; flex-direction: column;
  top: var(--nav-safe);
  right: clamp(0.9rem, 2vw, 1.75rem);
  width: min(24rem, 80vw);
  font-size: 1.02rem;
  z-index: 4;
}
.ts-phonepov .ts-toasts { display: none; }
/* Desk phone — compact pings sit right above the filmed phone, sized like
   a phone screen, not like desktop toasts. Raised above the bottom scrim. */
.ts-stack-phone { display: flex; flex-direction: column; bottom: 14.5%; left: 14%; width: 15%; font-size: 0.95em; z-index: 3; }
/* Wristwatch — a TINY popup hugging the wrist + a haptic ring. */
.ts-watch { bottom: 10%; left: 53%; width: 8%; font-size: 0.55em; z-index: 3; }
.ts-monitor .ts-watch { bottom: 6.5%; left: 54%; }
.ts-ultrawide .ts-watch { bottom: 12%; left: 49.5%; }
.ts-watch .ts-notif { padding: 0.4em 0.55em; }
.ts-watch .ts-icon { width: 1.6em; height: 1.6em; }
.ts-watch .ts-icon > span { font-size: 0.95em; }
/* Speech-bubble tails: the sharp point names the speaker — watch popups
   point at the wrist, desk-phone pings point at the phone. */
.ts-watch:has(.ts-notif)::after,
.ts-stack-phone:has(.ts-notif)::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -0.32em;
  width: 0.75em; height: 0.75em;
  margin-left: -0.38em;
  background: rgba(30, 36, 52, 0.62);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transform: rotate(45deg);
}
/* Phone-POV: banners drop INSIDE the held phone's screen, clear of the nav;
   watch keeps its slot. Container queries size the banner type from the
   banner's own width, so it stays proportional to the FILMED phone screen
   instead of inheriting desktop-toast scale and getting squished. */
.ts-stack-banner { display: none; top: max(31%, var(--nav-safe)); left: 37.5%; width: 35%; min-height: 6em; container-type: inline-size; }
/* iOS depth stack: the newest banner sits front; earlier ones tuck behind
   it, smaller and dimmer, receding into space. */
.ts-stack-banner .ts-slot {
  display: block;
  position: absolute; left: 0; right: 0; top: 0;
  transition: transform 0.45s var(--dim-hover-ease), opacity 0.4s ease;
}
.ts-stack-banner .ts-slot > .ts-slot-clip { overflow: visible; }
.ts-stack-banner .ts-slot.pos0 { transform: translateY(0) scale(1); z-index: 3; opacity: 1; }
.ts-stack-banner .ts-slot.pos1 { transform: translateY(-0.6em) scale(0.94); z-index: 2; opacity: 0.7; }
.ts-stack-banner .ts-slot.pos2 { transform: translateY(-1.15em) scale(0.88); z-index: 1; opacity: 0.4; }
.ts-stack-banner .ts-slot.pos-gone { transform: translateY(-1.6em) scale(0.82); opacity: 0; }
.ts-stack-banner .ts-slot .ts-notif { margin-bottom: 0; }
/* iOS banner anatomy: proportional to the FILMED phone screen. */
.ts-stack-banner .ts-notif { font-size: clamp(8px, 7.5cqw, 15px); border-radius: 1.1em; padding: 0.7em 0.8em; gap: 0.55em; }
.ts-stack-banner .ts-icon { width: 1.85em; height: 1.85em; border-radius: 0.45em; }
.ts-stack-banner .ts-icon > span { font-size: 1.05em; }
.ts-stack-banner .ts-title { font-size: 0.85em; }
.ts-stack-banner .ts-notif-body { font-size: 0.85em; -webkit-line-clamp: 2; }
.ts-stack-banner .ts-time { font-size: 0.7em; }
.ts-phonepov .ts-stack-banner { display: flex; }
.ts-phonepov .ts-stack-phone { display: none; }
.ts-phonepov .ts-watch { bottom: 16%; left: 4%; width: 38%; }

/* --- The app on the filmed screen (ts-ui) ---
   Desktop/laptop: a believable ops dashboard in use — REAL generic text
   (names, statuses, amounts, chat messages), softly blurred so it reads as
   the busy screen in the background, never as content to study.
   Phone-POV: a compact iOS-style keyboard + compose field under the thumbs. */
.ts-ui {
  position: absolute;
  display: flex; flex-direction: column;
  gap: 2%;
  padding: 1.3% 1.5%;
  box-sizing: border-box;
  opacity: 0.8;
  pointer-events: none;
  transition: opacity 1s ease;
  font-size: 0.68em;
  color: rgba(255, 255, 255, 0.75);
  filter: blur(0.7px) saturate(0.9);
  overflow: hidden;
}
.ts-laptop .ts-ui { top: 10%; left: 31.3%; width: 34%; height: 44%; transform: perspective(1200px) rotateY(-9deg); transform-origin: left center; }
.ts-monitor .ts-ui { top: 10%; left: 18.5%; width: 49%; height: 51%; transform: perspective(1200px) rotateY(-9deg); transform-origin: left center; }
.ts-ultrawide .ts-ui { top: 9%; left: 26%; width: 41%; height: 52%; transform: perspective(1400px) rotateY(-7deg); transform-origin: left center; }
.ts-phonepov .ts-ui { top: 55%; left: 36%; width: 37.5%; height: 17%; opacity: 0.9; padding: 0; filter: blur(0.6px); }
.tension-stage.is-calm .ts-ui { opacity: 0.5; }

/* Browser URL bar above the window chrome — it's a web app being used. */
.ts-ui .tsu-url {
  display: flex; align-items: center; gap: 0.5em;
  flex: none;
  padding: 0.22em 0.9em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
  width: fit-content;
  margin: 0 auto 0.4em;
}
/* Window chrome: traffic dots, app name, view tabs, search field. */
.ts-ui .tsu-top { display: flex; align-items: center; gap: 0.7em; flex: none; padding-bottom: 0.5em; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ts-ui .tsu-top .tsu-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: rgba(255, 255, 255, 0.28); flex: none; }
.ts-ui .tsu-brand { font-weight: 500; color: rgba(255, 255, 255, 0.85); margin: 0 0.6em 0 0.3em; white-space: nowrap; }
.ts-ui .tsu-tab { padding: 0.15em 0.6em; border-radius: 999px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; transition: background 0.3s ease, color 0.3s ease; }
.ts-ui .tsu-tab.on { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); }
.ts-ui .tsu-search { margin-left: auto; padding: 0.15em 0.8em; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.35); white-space: nowrap; }
.ts-ui .tsu-body { display: flex; gap: 1.2em; flex: 1; min-height: 0; padding-top: 0.6em; }
/* Sidebar: real nav labels. */
.ts-ui .tsu-side { display: flex; flex-direction: column; gap: 0.45em; width: 8.5em; flex: none; }
.ts-ui .tsu-nav { display: flex; align-items: center; gap: 0.5em; padding: 0.25em 0.5em; border-radius: 0.4em; white-space: nowrap; color: rgba(255, 255, 255, 0.55); transition: background 0.3s ease, color 0.3s ease; }
.ts-ui .tsu-nav.on { background: rgba(218, 181, 110, 0.16); color: rgba(255, 255, 255, 0.92); }
/* Orders table: real names / statuses / amounts / times. */
.ts-ui .tsu-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ts-ui .tsu-title { font-weight: 500; color: rgba(255, 255, 255, 0.85); margin-bottom: 0.5em; white-space: nowrap; }
.ts-ui .tsu-thead, .ts-ui .tsu-row { display: flex; align-items: center; gap: 0.6em; white-space: nowrap; }
.ts-ui .tsu-thead { color: rgba(255, 255, 255, 0.38); padding-bottom: 0.35em; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.ts-ui .tsu-rows { flex: 1; overflow: hidden; }
.ts-ui .tsu-row { padding: 0.3em 0; opacity: 0; transform: translateY(-45%); transition: opacity 0.3s ease, transform 0.35s ease; }
.ts-ui .tsu-row.in { opacity: 1; transform: translateY(0); }
.ts-ui .tsu-c1 { width: 34%; overflow: hidden; text-overflow: ellipsis; }
.ts-ui .tsu-c2 { width: 22%; }
.ts-ui .tsu-c3 { width: 20%; text-align: right; font-variant-numeric: tabular-nums; }
.ts-ui .tsu-c4 { flex: 1; text-align: right; color: rgba(255, 255, 255, 0.4); }
.ts-ui .tsu-status { display: inline-block; padding: 0.05em 0.55em; border-radius: 999px; font-size: 0.9em; }
.ts-ui .tsu-status.ok { background: rgba(96, 178, 124, 0.18); color: rgba(150, 220, 172, 0.9); }
.ts-ui .tsu-status.pending { background: rgba(147, 131, 102, 0.22); color: rgba(218, 199, 160, 0.85); }
.ts-ui .tsu-status.fail { background: rgba(214, 69, 69, 0.2); color: rgba(255, 150, 150, 0.95); }
/* Chat pane: real short messages. */
.ts-ui .tsu-chat { display: flex; flex-direction: column; width: 32%; flex: none; border-left: 1px solid rgba(255, 255, 255, 0.08); padding-left: 1em; min-width: 0; }
.ts-ui .tsu-chead { font-weight: 500; color: rgba(255, 255, 255, 0.8); margin-bottom: 0.5em; white-space: nowrap; }
.ts-ui .tsu-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.45em; overflow: hidden; }
.ts-ui .tsu-msg { line-height: 1.3; opacity: 0; transform: translateY(35%); transition: opacity 0.3s ease, transform 0.3s ease; overflow: hidden; }
.ts-ui .tsu-msg.in { opacity: 1; transform: translateY(0); }
.ts-ui .tsu-msg b { font-weight: 500; color: rgba(218, 181, 110, 0.75); margin-right: 0.35em; }
.ts-ui .tsu-typing { display: flex; gap: 0.25em; align-items: center; height: 1em; margin: 0.4em 0; opacity: 0; transition: opacity 0.25s ease; }
.ts-ui .tsu-typing.on { opacity: 1; }
.ts-ui .tsu-typing i { width: 0.35em; height: 0.35em; border-radius: 50%; background: rgba(255, 255, 255, 0.45); animation: tsu-typing 1s ease-in-out infinite; }
.ts-ui .tsu-typing i:nth-child(2) { animation-delay: 0.15s; }
.ts-ui .tsu-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tsu-typing { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-40%); opacity: 1; } }
.ts-ui .tsu-cinput { border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.3); padding: 0.2em 0.8em; margin-top: 0.5em; white-space: nowrap; }

/* Phone-POV: compose field + compact keyboard where the thumbs are. */
.ts-ui .tsu-phone { display: none; flex-direction: column; width: 100%; height: 100%; gap: 4%; }
.ts-phonepov .ts-ui .tsu-top, .ts-phonepov .ts-ui .tsu-body { display: none; }
.ts-phonepov .ts-ui .tsu-phone { display: flex; }
.tsu-compose {
  display: flex; align-items: center; gap: 2%;
  height: 17%;
  border-radius: 999px;
  background: rgba(43, 50, 69, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 4%;
  overflow: hidden;
}
.tsu-compose .tsu-typed {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85em;
  white-space: nowrap; overflow: hidden;
  filter: blur(1.1px); /* real words, fuzzed — it's set dressing */
}
.tsu-compose .tsu-caret { flex: none; width: 2px; height: 55%; background: var(--c-gold); animation: tsu-caret 1.05s steps(1) infinite; }
@keyframes tsu-caret { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
.tsu-kb {
  flex: 1;
  display: flex; flex-direction: column; gap: 3.5%;
  background: rgba(27, 32, 46, 0.88);
  border-radius: 0.6em;
  padding: 2.5%;
  box-sizing: border-box;
}
.tsu-kb .tsu-krow { flex: 1; display: flex; gap: 2.2%; justify-content: center; }
.tsu-key {
  flex: 1; max-width: 9.5%;
  border-radius: 0.26em;
  background: rgba(75, 84, 110, 0.9);
  box-shadow: 0 1px 0 rgba(10, 12, 20, 0.6);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.5em;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s ease;
}
.tsu-key.mod { max-width: 13%; background: rgba(48, 56, 78, 0.9); }
.tsu-key.space { max-width: 46%; flex: 5; }
.tsu-key.hit { background: rgba(218, 181, 110, 0.85); color: var(--c-navy); }

/* --- Slots: grid-rows trick animates the stack shifting down smoothly --- */
.ts-slot {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--dim-hover-ease);
}
.ts-slot.is-in { grid-template-rows: 1fr; }
.ts-slot.is-leaving { grid-template-rows: 0fr; }
.ts-slot > .ts-slot-clip { overflow: hidden; min-height: 0; }
.ts-slot .ts-notif { margin-bottom: 0.55em; }

.ts-notif {
  border-radius: 0.55em; /* rounded = the AR layer */
  /* Glass is the AR material (owner 2026-07-04): translucent, heavy blur —
     the scene stays visible THROUGH the layer. Gold stays the signal only. */
  background: rgba(30, 36, 52, 0.55);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.55em 0.7em;
  font-size: 1em;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(10, 12, 20, 0.45);
  opacity: 0;
  transform: translateY(-0.6em) scale(0.97);
  transition: opacity 0.4s ease, transform 0.45s var(--dim-hover-ease);
}
.ts-slot.is-in .ts-notif { opacity: 1; transform: translateY(0) scale(1); }
.ts-slot.is-leaving .ts-notif { opacity: 0; transform: translateY(0.4em) scale(0.97); }
.ts-stack-phone .ts-notif { transform: translateY(0.6em) scale(0.97); }
.ts-stack-banner .ts-notif { border-radius: 0.8em; padding: 0.65em 0.8em; }
/* Viewer-facing toasts enter from off the right edge. */
.ts-toasts .ts-notif { transform: translateX(110%); border-radius: 0.7em; padding: 0.65em 0.85em; }
.ts-toasts .ts-slot.is-in .ts-notif { transform: translateX(0); }
.ts-toasts .ts-slot.is-leaving .ts-notif { transform: translateX(25%); }

/* Apple-style anatomy: app icon fills the left thumbnail; then sender,
   body sample, and a timestamp top-right. No app-name labels. */
.ts-notif { display: flex; align-items: center; gap: 0.6em; position: relative; }
.ts-notif .ts-icon {
  flex: none;
  position: relative; /* the red re-alert count pins to this corner */
  width: 2.35em; height: 2.35em;
  border-radius: 0.55em;
  background: rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1em; line-height: 1;
}
.ts-notif .ts-icon > span { font-size: 1.35em; }
/* The handler's icon: the gold A. */
.ts-notif .ts-icon.is-agentc {
  background: var(--c-gold);
  color: var(--c-navy);
  font-family: var(--font-display);
  font-size: 1.15em;
}
.ts-notif-main { flex: 1; min-width: 0; }
.ts-notif-head { display: flex; align-items: baseline; gap: 0.6em; margin-bottom: 0.15em; }
.ts-title {
  flex: 1; min-width: 0;
  font-size: 0.82em; font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-time { flex: none; font-size: 0.68em; color: rgba(255, 255, 255, 0.45); }
.ts-notif-body {
  font-size: 0.85em; line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Red channel count — small, quiet, iOS-true: plain sans, no heavy shadow,
   perched on the icon's corner without swallowing it. */
.ts-count {
  position: absolute;
  top: -0.28em; right: -0.28em;
  min-width: 1.25em; text-align: center;
  box-sizing: border-box;
  border-radius: 9999px;
  padding: 0.08em 0.28em;
  font-size: 0.5em; font-weight: 500;
  font-family: var(--font-sans);
  line-height: 1.35;
  color: #fff;
  background: #ff453a;
  box-shadow: 0 1px 3px rgba(10, 12, 20, 0.45);
}
.ts-notif.is-old { opacity: 0.62; filter: saturate(0.75); }
.ts-notif.is-oldest { opacity: 0.34; }
.ts-slot.is-in .ts-notif.is-old { opacity: 0.62; }
.ts-slot.is-in .ts-notif.is-oldest { opacity: 0.34; }
/* The one gold signal per scene — the handler's line at the turn. It is
   also the ONE notification you can touch: bigger, bolder, clickable,
   arriving as the world pauses. */
.ts-notif.ts-gold {
  border: 2px solid var(--c-gold);
  background: rgba(27, 32, 46, 0.96);
  font-size: 1.15em;
  padding: 0.8em 0.95em;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(218, 181, 110, 0.22);
  animation: ts-gold-arrive 1.6s ease;
  transition: transform 0.25s ease, background 0.25s ease;
}
.ts-notif.ts-gold:hover, .ts-notif.ts-gold:focus-visible { transform: scale(1.025); background: rgba(38, 45, 66, 0.98); outline: none; }
.ts-notif.ts-gold .ts-title { color: var(--c-gold); }
.ts-notif.ts-gold .ts-action {
  display: inline-block;
  margin-top: 0.5em;
  font-family: var(--font-accent);
  font-size: 0.68em; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-gold);
}
.ts-notif.ts-gold .ts-action::after { content: " →"; }
@keyframes ts-gold-arrive {
  0% { box-shadow: 0 0 0 0 rgba(218, 181, 110, 0.55); }
  100% { box-shadow: 0 12px 40px rgba(218, 181, 110, 0.22); }
}

/* Overflow badge — the red counter when a stack is full ("+4"). */
.ts-badge {
  position: absolute;
  top: -0.65em; right: -0.55em;
  z-index: 2;
  min-width: 1.7em;
  text-align: center;
  border-radius: 9999px;
  padding: 0.22em 0.5em;
  font-size: 0.72em; font-weight: 600;
  font-family: var(--font-accent);
  color: #fff;
  background: #d64545;
  box-shadow: 0 3px 10px rgba(180, 40, 40, 0.5);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ts-badge.is-on { opacity: 1; transform: scale(1); }
.ts-badge.is-bump { animation: ts-badge-bump 0.35s ease; }
@keyframes ts-badge-bump {
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Watch popup: compact card + expanding haptic ring at the wrist. */
.ts-watch .ts-notif { border-radius: 0.9em; }
.ts-watch-ring {
  position: absolute;
  left: 50%; top: 115%;
  width: 1.2em; height: 1.2em;
  margin: -0.6em;
  border-radius: 50%;
  border: 2px solid rgba(218, 181, 110, 0.8);
  opacity: 0;
  pointer-events: none;
}
.ts-watch.is-ping .ts-watch-ring { animation: ts-watch-ring 1.1s ease-out 2; }
@keyframes ts-watch-ring {
  0% { opacity: 0.9; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(3.2); }
}

/* --- Overlaid hero copy + scroll cue --- */
.hero-film-copy {
  position: absolute;
  box-sizing: border-box;
  left: clamp(1.25rem, 4.5vw, 4.5rem);
  /* Vertically centered so the bottom strip — desk phone + watch pings —
     stays visible; the card no longer sits on top of them. */
  top: 50%;
  transform: translateY(-54%);
  max-width: 30rem;
  z-index: 4;
  /* Glass title card: notifications sliding beneath it read as depth,
     and the copy stays legible over any moment of the film. */
  background: rgba(16, 19, 28, 0.52);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
.hero-noir .hero-heading { font-size: clamp(1.5rem, 3vw, 2.4rem); }
/* The minor headline — the punch under the major one. */
.hero-sub {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.5vw, 1.15rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1rem;
}
.hero-sub .accent { color: var(--c-gold); }
.hero-film-copy .lede { font-size: 0.95rem; margin-bottom: 1rem; }
@media (max-width: 480px) {
  .ts-phase { font-size: 0.55rem; }
}
@media (max-width: 560px) {
  .hero-film-copy { left: 1rem; max-width: calc(100vw - 2rem); padding: 1rem 1.1rem; }
}
.hero-film-copy .lede { max-width: 30rem; }
@media (max-height: 640px) {
  .hero-film-copy .lede { display: none; }
}
/* Mobile: the film is the hero — copy shrinks to the two headlines and ONE
   CTA so the phone-POV scene stays visible behind. */
/* Mobile: headline + ONE thumb-reach CTA, centered — the film stays the hero. */
@media (max-width: 700px) {
  .hero-film-copy {
    left: 1rem; right: 1rem;
    top: auto; transform: none;
    bottom: 4.25rem;
    max-width: none;
    padding: 1rem 1rem 1.1rem;
    text-align: center;
  }
  .hero-film-copy .lede { display: none; }
  .hero-film-copy .hero-sub { display: none; }
  .hero-film-copy .btn-ghost { display: none; }
  .hero-noir .hero-heading { font-size: clamp(1.6rem, 8vw, 2.1rem); margin-bottom: 0.9rem; }
  .hero-cta { justify-content: center; margin-top: 0; }
  .hero-film-copy .btn-primary { width: 74%; justify-content: center; padding: 0.85rem 1rem; font-size: 0.98rem; }
  .cta-label-desktop { display: none; }
}
@media (min-width: 701px) {
  .cta-label-mobile { display: none; }
}
.hero-scroll-cue {
  position: absolute;
  left: 50%; bottom: 1rem;
  transform: translateX(-50%);
  z-index: 4;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s ease;
  animation: ts-cue-bob 2.4s ease-in-out infinite;
}
.hero-scroll-cue:hover { color: var(--c-gold); }
@keyframes ts-cue-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .ts-slot, .ts-notif, .ts-badge { transition: none; }
  .tension-stage::after, .ts-veil, .ts-frame, .ts-frame video { transition: none; }
  .hero-scroll-cue { animation: none; }
  .ts-watch.is-ping .ts-watch-ring { animation: none; }
  .ts-phase.is-flip { animation: none; }
  .ts-ui .tsu-rows span, .ts-ui .tsu-chart i, .ts-ui .tsu-prog i, .ts-ui .tsu-side span { transition: none; }
}


/* ============================================================
   §16 · PRODUCT DEVELOPMENT — "The U, walked as a scroll"
   Film when humans are in frame; blueprint when agents work;
   paper on the way back to your hands. Gold thread: descent
   rails left, ascent rails right. Loops: 16s architect master,
   12s test wall, 18s conversation carousel.
   ============================================================ */

.pdx-page { overflow-x: hidden; }
.pdx-section { position: relative; max-width: 1160px; margin: 0 auto; padding: 4.5rem 1.5rem 3.5rem; }
/* rails retired round 14 — the straight timeline carries the process */
.pdx-kicker { font-family: var(--font-accent); font-size: .68rem; letter-spacing: .28em; color: var(--c-gold); text-transform: uppercase; margin: 0 0 .6rem; }
.pdx-kicker.you { color: #efe9dc; }
.pdx-h2 { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: .04em; line-height: 1.3; margin: 0 0 1rem; color: #fff; text-wrap: balance; }
.pdx-copy { color: #d6d2c4; max-width: 62ch; }
.pdx-copy b { color: #fff; }
.pdx-caption { font-size: .88rem; color: #c9d3f0; max-width: 62ch; margin: 1rem auto 0; text-align: center; }

/* ── hero scene: phase 1 CTA, phase 2 feature stories (scroll-driven) ── */
.pdx-heroscene { position: relative; height: 190vh; }
.pdx-hero { position: sticky; top: 0; height: 100vh; max-height: 1100px; overflow: hidden; }
.pdx-hero picture, .pdx-scenefull picture { display: contents; }
.pdx-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.pdx-phase { transition: opacity .55s ease, transform .55s ease; }
.pdx-phase-story { opacity: 0; pointer-events: none; }
.pdx-phase-story .pdx-bubble, .pdx-phase-story .pdx-fscard { transform: translateY(16px); transition: transform .55s ease; }
.is-story .pdx-phase-cta { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.is-story .pdx-phase-story { opacity: 1; pointer-events: auto; }
.is-story .pdx-phase-story .pdx-bubble, .is-story .pdx-phase-story .pdx-fscard { transform: none; }
.pdx-scrollhint { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  font-family: var(--font-accent); font-size: .58rem; letter-spacing: .3em; color: #e8e4da; text-transform: uppercase; opacity: .8; }
.pdx-hero-scrim { position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(35,41,58,.96) 0%, rgba(35,41,58,.45) 36%, rgba(35,41,58,0) 62%),
  linear-gradient(to right, rgba(35,41,58,.4), rgba(35,41,58,0) 45%); }
.pdx-hero-copy { position: absolute; left: max(2rem, calc((100% - 1160px)/2 + 1.5rem)); right: 2rem; bottom: 3.4rem; max-width: 560px; }
.pdx-hero-copy h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 4.2vw, 3rem); line-height: 1.16; margin: .7rem 0 .9rem; }
.pdx-hero-copy .lede { max-width: 46ch; margin-bottom: 1.6rem; }

/* ── conversation (layers 1–2) ── */
.pdx-channels { font-family: var(--font-accent); letter-spacing: .26em; color: var(--c-gold); font-size: .9rem; margin: 1.1rem 0 1.4rem; text-transform: uppercase; }
.pdx-scene { position: relative; border: 1px solid #3a4157; border-radius: .25rem; overflow: hidden; }
.pdx-scene img { display: block; width: 100%; height: auto; }
.pdx-bubble { position: absolute; right: 3%; top: 8%; max-width: 320px; background: rgba(255,255,255,.93); color: #23293a;
  border-radius: 1rem; padding: .85rem 1rem; font-size: .86rem; line-height: 1.45; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.pdx-bubble::after { content: ""; position: absolute; bottom: -9px; right: 44px; border: 10px solid transparent; border-top-color: rgba(255,255,255,.93); border-bottom: none; }
.pdx-fscard { position: absolute; left: 2.5%; top: 8%; max-width: 380px; background: rgba(30,36,52,.66);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(218,181,110,.55); border-radius: 1rem; padding: 1rem 1.15rem;
  box-shadow: 0 0 0 1px rgba(218,181,110,.12), 0 8px 30px rgba(0,0,0,.4); }
.pdx-fscard .fs { font-family: var(--font-accent); font-size: .56rem; letter-spacing: .22em; color: var(--c-gold); text-transform: uppercase; }
.pdx-fscard .t { font-family: var(--font-display); font-size: .8rem; margin: .45rem 0 .5rem; color: #fff; }
.pdx-fscard .story { font-size: .8rem; font-style: italic; color: #e8e4da; margin: 0 0 .6rem; line-height: 1.5; }
.pdx-fscard .ac { font-family: var(--font-accent); font-size: .52rem; letter-spacing: .2em; color: #aeb8d6; text-transform: uppercase; margin-bottom: .3rem; }
.pdx-fscard .crit { font-size: .72rem; color: #c9d3f0; margin: .25rem 0; padding-left: .9rem; position: relative; line-height: 1.45; }
.pdx-fscard .crit::before { content: "—"; position: absolute; left: 0; color: var(--c-gold); }
@keyframes pdxSwapA { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pdxSwapB { 0%, 44% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }
.pdx-pairA { animation: pdxSwapA 18s linear infinite; }
.pdx-pairB { opacity: 0; animation: pdxSwapB 18s linear infinite; }
/* ── the process timeline (straight: left→right, mobile top→bottom) ── */
.pdx-tl { display: flex; justify-content: space-between; position: relative; margin: 2.4rem 0 .6rem; }
.pdx-tl::before { content: ""; position: absolute; left: 2%; right: 2%; top: 7px; height: 2px;
  background: linear-gradient(to right, #efe9dc 0 22%, #c6a15a 26% 78%, #efe9dc 84%); opacity: .7; }
.pdx-tl-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem; flex: 1; }
.pdx-tl-item i { width: 16px; height: 16px; border-radius: 50%; background: var(--c-gold); border: 2px solid #1b202e; z-index: 1; }
.pdx-tl-item span { font-family: var(--font-accent); font-size: .6rem; letter-spacing: .18em; color: #c9c2b4; text-transform: uppercase; text-align: center; }
.pdx-tl-item.you i { background: #efe9dc; }
.pdx-tl-item.you span { color: #efe9dc; }
.pdx-tl-legend { font-size: .74rem; color: #938366; }
.pdx-tl-legend b { color: #efe9dc; font-weight: 500; }
.pdx-tl-legend em { color: var(--c-gold); font-style: normal; }
@media (max-width: 700px) {
  .pdx-tl { flex-direction: column; gap: 1rem; margin: 1.8rem 0 .6rem; }
  .pdx-tl::before { left: 7px; right: auto; top: 4%; bottom: 4%; width: 2px; height: auto;
    background: linear-gradient(to bottom, #efe9dc 0 22%, #c6a15a 26% 78%, #efe9dc 84%); }
  .pdx-tl-item { flex-direction: row; gap: .8rem; }
}

/* ── blueprint bands ── */
.pdx-bp { background: #1e2544; background-image:
  linear-gradient(rgba(214,224,255,.055) 1px, transparent 1px),
  linear-gradient(90deg, rgba(214,224,255,.055) 1px, transparent 1px);
  background-size: 14px 14px; border-top: 1px solid #3a4157; border-bottom: 1px solid #3a4157; }
.pdx-bp svg { display: block; width: 100%; height: auto; }
@keyframes pdxTrace { to { stroke-dashoffset: 0; } }
.pdx-trace { stroke: var(--c-gold); stroke-width: 2; fill: none; stroke-dasharray: 520; stroke-dashoffset: 520; animation: pdxTrace 2.6s ease forwards 1s; }
@keyframes pdxCk1 { 0%, 5% { opacity: 0; } 8%, 100% { opacity: 1; } }
@keyframes pdxCk2 { 0%, 12% { opacity: 0; } 15%, 100% { opacity: 1; } }
@keyframes pdxMiss { 0%, 17% { opacity: 0; } 20%, 24% { opacity: 1; } 26%, 28% { opacity: .35; } 30%, 32% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes pdxStore { 0%, 26% { opacity: 0; } 33%, 100% { opacity: 1; } }
@keyframes pdxCk3 { 0%, 34% { opacity: 0; } 37%, 100% { opacity: 1; } }
@keyframes pdxFlash { 0%, 39% { opacity: 0; } 41% { opacity: .95; } 44%, 100% { opacity: 0; } }
@keyframes pdxP1 { 0%, 42% { opacity: 0; transform: translate(0,0); } 45% { opacity: 1; } 53% { opacity: 1; transform: translate(336px,-70px); } 55%, 100% { opacity: 0; transform: translate(336px,-70px); } }
@keyframes pdxSwirl { 0%, 53% { opacity: 0; } 56%, 62% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes pdxP2 { 0%, 62% { opacity: 0; transform: translate(0,0); } 64% { opacity: 1; } 70% { opacity: .9; transform: translate(262px,58px); } 73%, 100% { opacity: 0; transform: translate(262px,58px); } }
@keyframes pdxG1 { 0%, 72% { opacity: 0; transform: translate(0,0); } 74% { opacity: 1; } 79% { opacity: 1; transform: translate(0,-58px); } 81%, 100% { opacity: 0; transform: translate(0,-58px); } }
@keyframes pdxG2 { 0%, 80% { opacity: 0; transform: translate(0,0); } 82% { opacity: 1; } 87% { transform: translate(-250px,32px); } 92% { opacity: 1; transform: translate(-672px,-22px); } 94%, 100% { opacity: 0; transform: translate(-672px,-22px); } }
@keyframes pdxShot { 0%, 91% { opacity: 0; } 94%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pdxOk { 0%, 93% { opacity: 0; transform: scale(.4); } 96% { opacity: 1; transform: scale(1.18); } 99% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes pdxSpin { to { transform: rotate(360deg); } }
@keyframes pdxNar1 { 0%, 2% { opacity: 0; } 5%, 22% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes pdxNar2 { 0%, 24% { opacity: 0; } 27%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes pdxNar3 { 0%, 42% { opacity: 0; } 45%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes pdxNar4 { 0%, 89% { opacity: 0; } 92%, 99% { opacity: 1; } 100% { opacity: 0; } }
.pdx-ck1 { animation: pdxCk1 16s linear infinite; }
.pdx-ck2 { animation: pdxCk2 16s linear infinite; }
.pdx-miss { animation: pdxMiss 16s linear infinite; }
.pdx-store { animation: pdxStore 16s linear infinite; }
.pdx-ck3 { animation: pdxCk3 16s linear infinite; }
.pdx-flash { animation: pdxFlash 16s linear infinite; }
.pdx-p1 { animation: pdxP1 16s linear infinite; }
.pdx-swirl { animation: pdxSwirl 16s linear infinite; }
.pdx-swirl circle { animation: pdxSpin 2.2s linear infinite; transform-box: fill-box; transform-origin: center; }
.pdx-p2 { animation: pdxP2 16s linear infinite; }
.pdx-g1 { animation: pdxG1 16s linear infinite; }
.pdx-g2 { animation: pdxG2 16s linear infinite; }
.pdx-shot { animation: pdxShot 16s linear infinite; }
.pdx-ok { animation: pdxOk 16s linear infinite; transform-box: fill-box; transform-origin: center; }
.pdx-n1 { animation: pdxNar1 16s linear infinite; }
.pdx-n2 { animation: pdxNar2 16s linear infinite; }
.pdx-n3 { animation: pdxNar3 16s linear infinite; }
.pdx-n4 { animation: pdxNar4 16s linear infinite; }

/* ── code + tree ── */
.pdx-duo { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.2rem; }
.pdx-codewin { background: #151a28; border: 1px solid #3a4157; border-radius: .4rem; overflow: hidden; }
.pdx-codewin .cb { height: 26px; background: #10131d; border-bottom: 1px solid #3a4157; display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.pdx-codewin .cb i { width: 8px; height: 8px; border-radius: 50%; background: #4a5470; }
.pdx-codewin .cb span { margin-left: 8px; font-family: var(--font-mono); font-size: .64rem; color: #8b93ad; }
.pdx-code { padding: 14px 18px; font-family: var(--font-mono); font-size: .76rem; line-height: 1.75; color: #cfd8ee; overflow-x: auto; }
.pdx-cl { display: block; white-space: pre; opacity: 0; transform: translateX(-8px); animation: pdxRowCycle 14s linear infinite; }
@keyframes pdxRowCycle { 0% { opacity: 0; transform: translateX(-8px); } 3% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: translateX(-8px); } }
.pdx-cl:nth-child(1) { animation-delay: .2s; } .pdx-cl:nth-child(2) { animation-delay: .5s; }
.pdx-cl:nth-child(3) { animation-delay: .8s; } .pdx-cl:nth-child(4) { animation-delay: 1.1s; }
.pdx-cl:nth-child(5) { animation-delay: 1.4s; } .pdx-cl:nth-child(6) { animation-delay: 1.7s; }
.pdx-cl:nth-child(7) { animation-delay: 2s; } .pdx-cl:nth-child(8) { animation-delay: 2.3s; }
.pdx-cl:nth-child(9) { animation-delay: 2.6s; } .pdx-cl:nth-child(10) { animation-delay: 2.9s; }
.pdx-cl:nth-child(11) { animation-delay: 3.2s; } .pdx-cl:nth-child(12) { animation-delay: 3.5s; }
.pdx-kw { color: #a88bd4; } .pdx-ty { color: #7fa3e0; } .pdx-st { color: var(--c-gold); } .pdx-mt { color: #7fd4c0; } .pdx-cm { color: #5d688a; }
.pdx-tree { background: #151a28; border: 1px solid #3a4157; border-radius: .4rem; padding: 14px 16px; font-family: var(--font-mono); font-size: .74rem; color: #aeb8d6; line-height: 1.8; }
.pdx-tree p { margin: 0; }
.pdx-tree .dir { color: #e8e4da; }
.pdx-tree .new { color: var(--c-gold); }
.pdx-runrow { display: flex; gap: .6rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }
.pdx-run { font-family: var(--font-accent); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid #3a4157; color: #aeb8d6; border-radius: 9999px; padding: .28rem .8rem; }
.pdx-run.pass { border-color: var(--c-gold); color: var(--c-gold); }

/* ── full-bleed scenes: the world, not a web page ── */
.pdx-scenefull { position: relative; width: 100%; }
.pdx-scenefull img { display: block; width: 100%; height: auto; }
.pdx-scenehead { position: absolute; top: 4.5%; left: max(1.5rem, calc((100% - 1160px)/2 + 1.5rem)); max-width: 520px; z-index: 2; }
.pdx-scenehead .pdx-h2 { text-shadow: 0 2px 18px rgba(15,19,30,.8); }
.pdx-scenehead .pdx-copy { text-shadow: 0 1px 12px rgba(15,19,30,.8); }
.pdx-scenefull .pdx-scrim-top { position: absolute; inset: 0 0 auto 0; height: 34%;
  background: linear-gradient(to bottom, rgba(35,41,58,.82), rgba(35,41,58,0)); }

/* ── test wall (film + AR) ── */
@keyframes pdxWFlash { 0%, 9% { opacity: 0; } 11% { opacity: .95; } 14%, 100% { opacity: 0; } }
@keyframes pdxWFly { 0%, 14% { opacity: 0; left: 58.6%; top: 47%; } 17% { opacity: 1; } 34% { opacity: 1; left: 12.8%; top: 47.4%; } 88% { opacity: 1; left: 12.8%; top: 47.4%; } 94%, 100% { opacity: 0; left: 12.8%; top: 47.4%; } }
@keyframes pdxWRing { 0%, 33% { opacity: 0; transform: scale(.6); } 37% { opacity: 1; transform: scale(1.12); } 48% { opacity: 0; transform: scale(1.45); } 100% { opacity: 0; } }
@keyframes pdxWT1 { 0%, 16% { opacity: 0; } 19%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pdxWT2 { 0%, 36% { opacity: 0; } 39%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pdxWT3 { 0%, 55% { opacity: 0; } 58%, 98% { opacity: 1; } 100% { opacity: 0; } }
.pdx-wflash { position: absolute; left: 58.3%; top: 45.2%; width: 4.15%; height: 13.5%; background: #fff; border-radius: 8px; opacity: 0; animation: pdxWFlash 12s linear infinite; }
.pdx-wfly { position: absolute; width: 3.4%; aspect-ratio: 4/3; border: 2px solid #fff; border-radius: 4px;
  background: radial-gradient(circle at 45% 40%, #e9b7ba 0%, #d795a0 45%, #efe9dc 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.5); opacity: 0; animation: pdxWFly 12s linear infinite; }
.pdx-wring { position: absolute; left: 12.1%; top: 46.4%; width: 4.6%; aspect-ratio: 4/3; border: 2px solid var(--c-gold); border-radius: 6px; opacity: 0; animation: pdxWRing 12s linear infinite; }
.pdx-wcard { position: absolute; left: 2.5%; top: 6%; max-width: 340px; background: rgba(30,36,52,.66);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(218,181,110,.55); border-radius: 1rem; padding: .9rem 1.1rem;
  box-shadow: 0 0 0 1px rgba(218,181,110,.12), 0 8px 30px rgba(0,0,0,.4); }
.pdx-wcard .fs { font-family: var(--font-accent); font-size: .56rem; letter-spacing: .22em; color: var(--c-gold); text-transform: uppercase; margin-bottom: .4rem; }
.pdx-wt { font-family: var(--font-mono); font-size: .78rem; color: #e6e9f5; margin: .32rem 0; }
.pdx-wt span { display: inline-block; width: 1.1rem; color: var(--c-gold); opacity: 0; }
.pdx-wt .t1 { animation: pdxWT1 12s linear infinite; }
.pdx-wt .t2 { animation: pdxWT2 12s linear infinite; }
.pdx-wt .t3 { animation: pdxWT3 12s linear infinite; }
.pdx-wfoot { font-size: .68rem; color: #aeb8d6; margin: .55rem 0 0; }
.pdx-term { position: absolute; right: 2.5%; bottom: 6%; width: min(360px, 40%); background: rgba(21,26,40,.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(218,181,110,.55); border-radius: .6rem; padding: .8rem 1rem;
  box-shadow: 0 0 0 1px rgba(218,181,110,.12), 0 8px 30px rgba(0,0,0,.4);
  font-family: var(--font-mono); font-size: .72rem; color: #cfd8ee; line-height: 1.8; }
.pdx-term .tl { display: block; overflow: hidden; white-space: nowrap; max-width: 0; }
.pdx-term .ok { color: #7fd4c0; }
.pdx-term .gold { color: var(--c-gold); }
@keyframes pdxTerm1 { 0%, 2% { max-width: 0; } 9% { max-width: 34ch; } 97% { max-width: 34ch; } 100% { max-width: 0; } }
@keyframes pdxTerm2 { 0%, 9% { max-width: 0; } 15% { max-width: 34ch; } 97% { max-width: 34ch; } 100% { max-width: 0; } }
@keyframes pdxTerm3 { 0%, 36% { max-width: 0; } 43% { max-width: 34ch; } 97% { max-width: 34ch; } 100% { max-width: 0; } }
@keyframes pdxTerm4 { 0%, 58% { max-width: 0; } 65% { max-width: 34ch; } 97% { max-width: 34ch; } 100% { max-width: 0; } }
.pdx-term .l1 { animation: pdxTerm1 12s steps(30, end) infinite; }
.pdx-term .l2 { animation: pdxTerm2 12s steps(30, end) infinite; }
.pdx-term .l3 { animation: pdxTerm3 12s steps(30, end) infinite; }
.pdx-term .l4 { animation: pdxTerm4 12s steps(30, end) infinite; }

/* ── documentation (paper) ── */
.pdx-docsband { background: #20263a; border-top: 1px solid #3a4157; border-bottom: 1px solid #3a4157; }
.pdx-docsflow { display: grid; grid-template-columns: 1fr auto 1.1fr; gap: 1.4rem; align-items: center; }
.pdx-docarrows { color: var(--c-gold); font-size: 1.3rem; text-align: center; }
.pdx-docpage { background: #efe9dc; border-radius: 3px; box-shadow: 0 14px 40px rgba(0,0,0,.45); padding: 1.4rem 1.5rem; color: #2a3050; max-width: 420px; }
.pdx-docpage h4 { font-family: var(--font-display); font-size: .82rem; letter-spacing: .04em; margin: 0 0 .8rem; color: #232a4d; }
.pdx-docpage h5 { font-family: var(--font-accent); font-size: .6rem; letter-spacing: .2em; margin: 1rem 0 .4rem; color: #5d688a; text-transform: uppercase; }
.pdx-dl { height: 8px; border-radius: 2px; background: #c9c0ab; margin: .5rem 0; }
.pdx-dl.w1 { width: 92%; } .pdx-dl.w2 { width: 78%; } .pdx-dl.w3 { width: 85%; } .pdx-dl.w4 { width: 60%; }

/* ── letter ── */
.pdx-letter { max-width: 560px; margin: 0 auto; border: 1px solid var(--c-gold-dim, #c6a15a); border-radius: .25rem; padding: 2.4rem 2.4rem 2rem; position: relative; background: var(--c-navy); }
.pdx-letter p { font-size: .98rem; color: #e8e4da; margin: 0 0 .9rem; }
.pdx-letter .salute { font-family: var(--font-accent); font-size: .62rem; letter-spacing: .26em; color: var(--c-taupe); text-transform: uppercase; margin-bottom: 1.2rem; }
.pdx-letter .sig { font-family: var(--font-display); font-size: .82rem; letter-spacing: .1em; color: #fff; }
.pdx-seal { position: absolute; top: -24px; right: 28px; width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e6c684, #c6a15a 70%); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); color: #1b202e; box-shadow: 0 4px 14px rgba(0,0,0,.4); }

/* ── responsive ── */
@media (max-width: 760px) {
  .pdx-section { padding: 3rem 1.1rem 2.6rem; }
  .pdx-hero { height: clamp(480px, 78vh, 720px); }
  .pdx-hero-copy { left: 1.2rem; right: 1.2rem; bottom: 2.2rem; }
  .pdx-duo, .pdx-docsflow { grid-template-columns: 1fr; }
  .pdx-docarrows { transform: rotate(90deg); }
  .pdx-bubble, .pdx-fscard { max-width: min(320px, 86vw); font-size: .78rem; }
  .pdx-phase-story .pdx-bubble { right: 3%; left: auto; top: 6%; }
  .pdx-phase-story .pdx-fscard { left: 3%; right: 3%; top: auto; bottom: 8%; max-width: none; }
  .pdx-scenefull .pdx-bubble[style], .pdx-scenefull .pdx-wcard, .pdx-scenefull .pdx-term { position: static !important; margin: .8rem; max-width: none !important; width: auto; }
  .pdx-scenehead { position: static; max-width: none; padding: 0 1.1rem 1rem; }
  .pdx-scenefull .pdx-scrim-top { display: none; }
  .pdx-wflash, .pdx-wfly, .pdx-wring { display: none; }
  .pdx-heroscene { height: 175vh; }
  .pdx-rail-d::before, .pdx-rail-a::before { width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .pdx-trace { animation: none; stroke-dashoffset: 0; }
  .pdx-cl { animation: none; opacity: 1; transform: none; }
  .pdx-flash, .pdx-p1, .pdx-p2, .pdx-g1, .pdx-g2, .pdx-swirl, .pdx-miss,
  .pdx-wflash, .pdx-wfly, .pdx-wring, .pdx-n2, .pdx-n3, .pdx-n4 { display: none; }
  .pdx-store, .pdx-ck1, .pdx-ck2, .pdx-ck3, .pdx-shot, .pdx-ok, .pdx-n1,
  .pdx-wt .t1, .pdx-wt .t2, .pdx-wt .t3 { animation: none; opacity: 1; }
  .pdx-pairA, .pdx-pairB { animation: none; }
  .pdx-pairB { opacity: 0; }
  .pdx-cl { animation: none; opacity: 1; transform: none; }
  .pdx-term .tl { animation: none; max-width: none; }
  .pdx-phase { transition: none; }
}

/* ============================================================
   16. AED CANON PAGE (/aed) — PAPER medium (documentation).
   Cream sheet, navy ink, one sage (botanical) accent. `aedp-*`.
   ============================================================ */
.aedp-creed {
  margin: 0; padding: 1.1rem 1.4rem;
  border-left: 3px solid #DAB56E;
  background: rgba(218, 181, 110, 0.06);
}
.aedp-creed p {
  margin: 0; color: #efe9dc;
  font-size: 1.25rem; line-height: 1.55; font-weight: 500;
}
.aedp-creed em { color: #DAB56E; font-style: italic; }

/* The paper sheet — a real-world artifact: sharp outside, slight print radius */
.aedp-sheet {
  background: #efe9dc; color: #23293a;
  border-radius: 3px; padding: 2rem 2.2rem 1.8rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  border-top: 4px solid #8ba888; /* the one botanical accent */
}
.aedp-sheet-head { margin-bottom: 1.3rem; }
.aedp-sheet-kicker {
  display: block; font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.14em; color: #938366;
  margin-bottom: 0.45rem;
}
.aedp-sheet-title {
  font-family: "Michroma", sans-serif; font-size: 1.35rem;
  color: #23293a; margin: 0; line-height: 1.3;
}
.aedp-rules {
  margin: 0; padding-left: 1.4rem;
  display: grid; gap: 0.85rem;
}
.aedp-rules li {
  font-size: 1.02rem; line-height: 1.6; color: #2a3050;
}
.aedp-rules li::marker {
  font-family: "Fira Mono", ui-monospace, monospace;
  color: #938366; font-size: 0.9rem;
}
.aedp-rules b { color: #23293a; font-weight: 600; }
.aedp-rules code {
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 0.88em; background: rgba(35, 41, 58, 0.08);
  padding: 0.08em 0.35em; border-radius: 3px;
}
.aedp-sheet-note {
  margin: 1.4rem 0 0; padding-top: 1rem;
  border-top: 1px solid rgba(147, 131, 102, 0.35);
  font-size: 0.92rem; line-height: 1.6; color: #5a5346;
}

/* Canon links — plain list, gold links, no cards */
.aedp-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.aedp-links li { font-size: 1.02rem; line-height: 1.6; }
.aedp-links a {
  color: #DAB56E; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid rgba(218, 181, 110, 0.4);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.aedp-links a:hover { color: #efd9a8; border-color: #efd9a8; }
.aedp-links span { opacity: 0.75; }
.aedp-inline {
  color: #DAB56E; text-decoration: none;
  border-bottom: 1px solid rgba(218, 181, 110, 0.4);
}
.aedp-inline:hover { color: #efd9a8; border-color: #efd9a8; }

@media (max-width: 760px) {
  .aedp-sheet { padding: 1.4rem 1.2rem 1.3rem; }
  .aedp-creed p { font-size: 1.1rem; }
}

/* AED page split: sheet left, canon links right (custom — no arbitrary-value utilities) */
.aedp-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .aedp-split { grid-template-columns: 3fr 2fr; } }

/* ============================================================
   17. BLOG NEWSROOM (/blog) — wide-fill (max-w-7xl, no arbitrary-value
   utilities), Anthropic-newsroom reference: featured hero with image,
   category groups, scannable row list whose image reveals on hover/focus.
   `nwr-*`. Purpose outline: docs/brand/PAGE_OUTLINES.md.
   ============================================================ */

/* ── featured post ── */
.nwr-feature {
  display: grid;
  grid-template-columns: 1fr;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(218, 181, 110, 0.22);
  border-radius: 0.25rem;
  overflow: hidden;
  background: rgba(147, 131, 102, 0.08);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.nwr-feature:hover, .nwr-feature:focus-visible {
  border-color: rgba(218, 181, 110, 0.55);
  transform: translateY(-3px);
}
.nwr-feature-art { position: relative; min-height: 220px; background: var(--c-navy-deep); }
.nwr-feature-art picture { display: contents; }
.nwr-feature-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nwr-feature-copy { padding: 1.6rem 1.6rem 2rem; display: flex; flex-direction: column; justify-content: center; }
.nwr-feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 400;
  line-height: 1.22;
  color: var(--c-white);
  margin: 0.5rem 0 0.9rem;
  text-wrap: balance;
}
.nwr-feature-excerpt { margin-bottom: 1.3rem; max-width: 60ch; }
.nwr-feature-meta { display: flex; align-items: center; gap: 1.1rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); }

/* ── category groups + rows ── */
.nwr-group { margin-bottom: 2.75rem; }
.nwr-group-title {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 0.4rem;
}
.nwr-rows { list-style: none; margin: 0; padding: 0; }
.nwr-row {
  display: grid;
  grid-template-columns: 1fr 112px;
  align-items: center;
  gap: 1.25rem;
  border-top: 1px solid rgba(147, 131, 102, 0.22);
}
.nwr-row:last-child { border-bottom: 1px solid rgba(147, 131, 102, 0.22); }
.nwr-row-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  min-width: 0;
  padding: 1.15rem 0;
  text-decoration: none;
  color: inherit;
}
.nwr-row-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-white);
  line-height: 1.3;
}
.nwr-row-link:hover .nwr-row-title, .nwr-row-link:focus-visible .nwr-row-title { color: var(--c-gold); }
.nwr-row-date { font-family: var(--font-mono); font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); white-space: nowrap; flex-shrink: 0; }
/* Reserved-box hover reveal: the art cell always occupies its grid track
   (row height never shifts) but stays invisible until the row is hovered
   or keyboard-focused — CSS-only, no JS. */
.nwr-row-art {
  width: 112px;
  height: 80px;
  border-radius: 0.3rem;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.nwr-row:hover .nwr-row-art, .nwr-row:focus-within .nwr-row-art { opacity: 1; transform: scale(1); }
.nwr-row-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── category placeholder art (system-consistent slot for posts without a
   commissioned image — navy/gold only, per the locked palette) ── */
.nwr-art {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--c-navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nwr-art-mark {
  width: 34%;
  aspect-ratio: 1;
  max-width: 64px;
  border: 1.5px solid rgba(218, 181, 110, 0.55);
  border-radius: 9999px;
  position: relative;
}
.nwr-art-mark::before {
  content: "";
  position: absolute;
  inset: 28%;
  border: 1.5px solid rgba(218, 181, 110, 0.85);
  border-radius: 9999px;
}
.nwr-art--philosophy::before {
  content: ""; position: absolute; inset: 0; opacity: 0.6;
  background: repeating-linear-gradient(45deg, rgba(218, 181, 110, 0.14) 0 1px, transparent 1px 15px);
}
.nwr-art--security::before {
  content: ""; position: absolute; inset: 0; opacity: 0.6;
  background: repeating-linear-gradient(-45deg, rgba(218, 181, 110, 0.14) 0 1px, transparent 1px 15px);
}
.nwr-art--process::before {
  content: ""; position: absolute; inset: 0; opacity: 0.6;
  background: repeating-linear-gradient(0deg, rgba(218, 181, 110, 0.12) 0 1px, transparent 1px 15px),
              repeating-linear-gradient(90deg, rgba(218, 181, 110, 0.12) 0 1px, transparent 1px 15px);
}

/* ── post page ── */
.nwr-post-hero picture { display: contents; }
.nwr-post-hero img { width: 100%; height: auto; display: block; border-radius: 0.3rem; }
.nwr-post-art { aspect-ratio: 21 / 9; border-radius: 0.3rem; }
.nwr-post-grid { display: grid; grid-template-columns: 1fr; gap: 2.75rem; }
.nwr-post-lede, .nwr-post-panel { max-width: 66ch; }
.nwr-post-rail { display: flex; flex-direction: column; gap: 1rem; }
.nwr-post-rail-back { align-self: flex-start; }

/* ── post prose (real article bodies authored as HTML in BlogController) ── */
.nwr-post-prose p { margin: 0 0 1.1rem; }
.nwr-post-prose p:last-child { margin-bottom: 0; }
.nwr-post-prose h2 {
  font-family: "Michroma", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #DAB56E;
  margin: 2.2rem 0 0.9rem;
}
.nwr-post-prose h2:first-child { margin-top: 0; }
.nwr-post-prose ul { margin: 0 0 1.1rem; padding-left: 1.2rem; list-style: disc; }
.nwr-post-prose li { margin-bottom: 0.45rem; }
.nwr-post-prose a { color: #DAB56E; text-decoration: underline; text-underline-offset: 3px; }
.nwr-post-prose a:hover { color: #efe9dc; }
.nwr-post-prose code {
  font-family: "Fira Mono", monospace;
  font-size: 0.86em;
  background: rgba(218, 181, 110, 0.1);
  border: 1px solid rgba(218, 181, 110, 0.22);
  border-radius: 0.25rem;
  padding: 0.08em 0.35em;
  white-space: nowrap;
}
.nwr-post-prose pre {
  font-family: "Fira Mono", monospace;
  font-size: 0.86rem;
  background: #1b202e;
  border: 1px solid rgba(218, 181, 110, 0.22);
  border-radius: 0.3rem;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.1rem;
  overflow-x: auto;
}
.nwr-post-prose pre code { background: none; border: none; padding: 0; white-space: pre; }
.nwr-post-prose blockquote {
  border-left: 2px solid rgba(218, 181, 110, 0.55);
  margin: 0 0 1.1rem;
  padding: 0.1rem 0 0.1rem 1rem;
  opacity: 0.85;
}

@media (min-width: 1024px) {
  .nwr-feature { grid-template-columns: 1.15fr 1fr; }
  .nwr-feature-art { min-height: 100%; }
  .nwr-feature-copy { padding: 2.2rem 2.4rem 2.2rem 0.2rem; }
  .nwr-post-grid { grid-template-columns: 1fr 300px; align-items: start; }
}

@media (max-width: 760px) {
  .nwr-row { grid-template-columns: 1fr; }
  .nwr-row-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nwr-feature, .nwr-row-art { transition: none; }
  .nwr-feature:hover { transform: none; }
}