/* Portable Computer on DGX Spark — landing skeleton
   Shell, type, and rhythm from hybrid-ai-lp / marketing siteShell.
   Visuals stay labeled frames until the IA is locked. */

@font-face {
  font-family: "PPLX Sans";
  src: url("https://frontend-cdn.perplexity.ai/_agi_assets/fonts/PPLX-Sans-Beta-v2-VF.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  font-display: swap;
}
/* GT Canon VF: the marketing display serif (hub, Deep Research, enterprise
   pages) -- condensed axis; marketing sets opsz 60 / wdth 75 / wght 600 */
@font-face {
  font-family: "GT Canon VF";
  src: url("https://frontend-cdn.perplexity.ai/_agi_assets/fonts/GT-Canon-VF.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 37% 150%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPLX Serif";
  src: url("https://frontend-cdn.perplexity.ai/_agi_assets/fonts/PPLX-Serif-Beta-v2-VF.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPLX Mono";
  src: url("https://frontend-cdn.perplexity.ai/_agi_assets/fonts/PPLX-Mono-Beta-v0-VF.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  font-display: swap;
}

:root {
  --font-sans: "PPLX Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "PPLX Serif", Georgia, serif;
  --font-display: "GT Canon VF", "PPLX Serif", Georgia, serif;
  --font-mono: "PPLX Mono", ui-monospace, monospace;

  --rhythm-1: 8px;
  --rhythm-2: 16px;
  --rhythm-3: 24px;
  --rhythm-4: 32px;
  --rhythm-6: 48px;
  --rhythm-9: 72px;
  --rhythm-11: 88px;
  --rhythm-eyebrow: var(--rhythm-2);
  --rhythm-head: var(--rhythm-3);
  --rhythm-lede: var(--rhythm-11);
  --rhythm-block: var(--rhythm-6);
  --rhythm-close: var(--rhythm-4);
  --rhythm-section: 96px;
  --rhythm-moment: 120px;
  --rhythm-hero-t: 112px;
  --rhythm-hero-b: 96px;

  /* Aether odin-dark neutrals (swatches.css); campaign greens retired 8/13 */
  --ground: #121211;            /* odin-dark-50 */
  --surface: #171615;           /* odin-dark-100 */
  --surface-2: #1e1d1c;         /* odin-dark-200 */
  --text: #fbfaf4;
  --muted: rgba(214, 213, 212, 0.65);  /* odin-dark-1000-a-65 */
  --faint: rgba(214, 213, 212, 0.5);   /* odin-dark-1000-a-50 */
  --line: rgba(214, 213, 212, 0.07);   /* border-soft */
  --line-strong: rgba(214, 213, 212, 0.14); /* border-medium */
  --hairline: rgba(251, 250, 244, 0.14);
  --paper: #fbfaf4;
  --ink: #121211;
  --teal: #20808d;
  --turquoise-200: #92dce2;

  --r-pill: 999px;
  --r-card: 12px;
  --container: 1112px;
  --reading: 900px;
  --gutter: 24px;
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --unfold: cubic-bezier(0.4, 0.14, 0.3, 1);
  --respond: cubic-bezier(0, 0, 0.38, 0.9);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-sans);
  font-style: normal;
  font-synthesis: none;
  font-variation-settings: "slnt" 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, a, input {
  font-family: inherit;
  font-style: normal;
  font-synthesis: none;
  font-variation-settings: "slnt" 0;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgba(146, 220, 226, 0.24); }

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 80;
  padding: 8px 14px;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.skip:focus { top: 16px; }

.shell {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { .shell { padding: 0 32px; } }
@media (min-width: 1024px) { .shell { padding: 0 64px; } }

/* marketing app container (Zeyao 8/18): max-w-[1440px] px-4 md:px-8 lg:px-16 */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { .container { padding: 0 32px; } }
@media (min-width: 1024px) { .container { padding: 0 64px; } }

.h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 60, "wdth" 75, "wght" 600;
  font-size: clamp(60px, 6.2vw, 88px); /* 8/18 Phi size ladder: 88 cap on desktop (72 read modest), 60 floor on phones (still a clean two-line break at 390; 66 forced three) */
  line-height: 1.05;
  letter-spacing: normal; /* production: normal on GT Canon */
  margin: 0 auto;
  max-width: 20ch;
  text-wrap: balance;
}
/* SE-class screens: the 60 floor forces a third line (so does 52); 48
   holds the two-line break */
@media (max-width: 359.98px) {
  .h1 { font-size: 48px; }
}
/* audit 8/17: GT Canon is the MASTHEAD face only (hub hero, Deep Research
   hero). Production section h2s are pplxSerif 400 with negative tracking;
   product-page h1s are even pplxSerif. Sections stay PPLX Serif. */
.h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px); /* nimbus headline-m; 32 floor */
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px; /* nimbus subtitle-s */
  line-height: 1.35;
  margin: 0 0 8px;
}
.lede {
  font-size: clamp(17px, 1.25vw, 18px); /* nimbus body-l; 17 floor */
  line-height: 1.6;
  color: var(--muted);
  margin: var(--rhythm-head) 0 0;
  max-width: 56ch;
}
.lede--center {
  margin-left: auto;
  margin-right: auto;
  max-width: 58ch;
  text-align: center;
  text-wrap: pretty;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: #121211;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms var(--respond), opacity 160ms var(--respond);
}
.btn:hover { background: #ffffff; }
.btn:focus-visible { outline: 2px solid var(--turquoise-200); outline-offset: 2px; }

/* Marketing header -- measured off production perplexity.ai/hub 8/17:
   68px transparent bar (translucent theme-aware when scrolled), centered 15px
   nav with pill hover rgba(255,254,251,0.1), Try Perplexity CTA 14px/480,
   dropdown sheet rgb(23,22,21) r16 with product cards 264 (Resources 319),
   full-screen mobile menu with accordions. */
.nav { position: sticky; top: 0; z-index: 60; }
.nav-bar {
  position: relative;
  z-index: 2;
  height: 68px;
  transition: background-color 200ms var(--respond);
}
.nav.is-scrolled .nav-bar {
  background: rgba(23, 22, 21, 0.8);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nav--light.is-scrolled .nav-bar { background: rgba(243, 240, 236, 0.8); }
.nav--open .nav-bar { background: rgb(23, 22, 21); }
.nav-inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}
@media (min-width: 768px) { .nav-inner { padding: 0 40px; } }
@media (min-width: 1024px) { .nav-inner { padding: 0 64px; } }
.logo { display: flex; align-items: center; color: var(--text); text-decoration: none; }
.nav--light .logo { color: rgb(39, 37, 30); }
.logo-wordmark {
  display: block;
  width: 96px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("assets/wordmark.svg") center / contain no-repeat;
  mask: url("assets/wordmark.svg") center / contain no-repeat;
}
.nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  gap: 4px;
}
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-link {
  padding: 6px 16px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: rgb(214, 213, 212);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms var(--respond);
}
.nav-link:hover,
.nav-link.is-open { background: rgba(255, 254, 251, 0.1); }
.nav--light .nav-link { color: rgb(39, 37, 30); }
.nav--light .nav-link:hover,
.nav--light .nav-link.is-open { background: rgba(23, 22, 21, 0.08); }
.nav-link:focus-visible { outline: 2px solid var(--turquoise-200); outline-offset: 2px; }
.nav-cta {
  display: none;
  flex: none;
  align-items: center;
  height: 37px;
  padding: 8px 20px;
  border-radius: 100px;
  background: rgb(214, 213, 212);
  color: rgb(23, 22, 21);
  font-size: 14px;
  font-weight: 480;
  line-height: 1.5; /* production: 21px */
  text-decoration: none;
  transition: background-color 150ms var(--respond);
}
@media (min-width: 1024px) { .nav-cta { display: inline-flex; } }
.nav-cta:hover { background: #ffffff; }
.nav--light .nav-cta { background: rgb(23, 22, 21); color: rgb(243, 240, 236); }
.nav-cta:focus-visible { outline: 2px solid var(--turquoise-200); outline-offset: 2px; }
.nav-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 254, 251, 0.14);
  border-radius: 50%;
  background: rgba(255, 254, 251, 0.04);
  color: var(--text);
  cursor: pointer;
}
@media (min-width: 1024px) { .nav-menu { display: none; } }
.nav-menu:focus-visible { outline: 2px solid var(--turquoise-200); outline-offset: 2px; }
.nav-menu .icon-close { display: none; }
.nav--open .nav-menu .icon-burger { display: none; }
.nav--open .nav-menu .icon-close { display: block; }

/* dropdown sheet (desktop only) */
.nav-sheet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  background: rgb(23, 22, 21);
  border-radius: 16px;
  transition: height 260ms var(--respond), visibility 0s linear 260ms;
  display: none;
}
@media (min-width: 1024px) { .nav-sheet { display: block; } }
.nav-sheet.is-open { visibility: visible; transition: height 260ms var(--respond); }
.nav-panel-in {
  max-width: 1440px;
  margin: 0 auto;
  padding: 76px 64px 32px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.nav-card {
  position: relative;
  flex: none;
  width: 264px;
  height: 264px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 254, 251, 0.05);
  text-decoration: none;
  transition: background-color 150ms var(--respond);
}
.nav-card:hover { background: rgba(255, 254, 251, 0.09); }
.nav-card > span { position: absolute; top: 16px; left: 20px; z-index: 1; font-size: 20px; line-height: 1.5; color: rgb(214, 213, 212); }
.nav-card > img { position: absolute; bottom: 0; left: 0; width: 100%; display: block; }
.nav-card--lg { width: 319px; height: 319px; }
/* native 346x248 art covers the card width like production, cropping sides */
.nav-card--lg > img { height: 248px; object-fit: cover; }
.nav-card:focus-visible { outline: 2px solid var(--turquoise-200); outline-offset: 2px; }
.nav-cols { margin-left: 28px; padding-top: 2px; }
.nav-col-h { margin: 0 0 8px; font-size: 14px; line-height: 1; color: rgba(214, 213, 212, 0.65); }
.nav-col-h--gap { margin-top: 20px; }
.nav-cols a { display: block; padding: 0 0 6px; font-size: 16px; line-height: 24px; color: rgb(214, 213, 212); text-decoration: none; }
.nav-cols a:hover { color: #ffffff; }

/* mobile menu: full-screen dark sheet under the bar, production grammar */
.drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  padding: 92px 24px 40px;
  overflow: auto;
  background: rgb(23, 22, 21);
}
.nav--open .drawer { display: block; }
@media (min-width: 1024px) { .drawer, .nav--open .drawer { display: none !important; } }
html.no-scroll { overflow: hidden; }
.drawer-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 18px;
  color: rgb(214, 213, 212);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.drawer-acc-btn svg { transition: transform 200ms var(--respond); }
.drawer-acc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer-sub { padding: 0 0 8px; }
.drawer-sub a { display: block; padding: 8px 0; font-size: 15px; color: rgba(214, 213, 212, 0.8); text-decoration: none; }
.drawer-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
  height: 40px;
  padding: 8px 20px;
  border-radius: 100px;
  background: rgb(214, 213, 212);
  color: rgb(23, 22, 21);
  font-size: 15px;
  font-weight: 480;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-bar, .nav-link, .nav-cta, .nav-card, .nav-sheet, .drawer-acc-btn svg { transition: none; }
}

.section {
  position: relative;
  padding-top: var(--rhythm-section);
  padding-bottom: var(--rhythm-section);
}
.section-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
/* mobile type (8/17 Phi pick, option E): centered headlines hold to two
   lines; these run longer on a phone. Section heads and ledes set left at
   one step down (28px). Desktop keeps the centered axis. The CTA band
   stays centered deliberately: short line, button-led closing moment. */
@media (max-width: 767.98px) {
  .section-head { text-align: left; margin: 0; }
  /* scoped to section heads: the hero holds its centered axis (two short
     lines under a centered eyebrow and button), so its lede stays centered */
  .section-head .lede--center { margin-left: 0; margin-right: 0; text-align: left; }
  .h2 { font-size: 28px; }
}
.theme-lift {
  --ground: #1e1d1c;            /* odin-dark-200 */
  --surface: #242322;           /* odin-dark-300 */
  --surface-2: #2a2928;         /* odin-dark-400 */
  --muted: rgba(214, 213, 212, 0.65);
  --faint: rgba(214, 213, 212, 0.5);
  --line: rgba(255, 255, 255, 0.08);
  --hairline: rgba(255, 255, 255, 0.12);
  background: var(--ground);
}

.stage {
  position: relative;
  background: var(--ground);
}
.stage-field,
.stage-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stage-field {
  /* 8/19: vortex plate retired — it was 217KB under the hero and never
     visible once hero-field painted. */
  background-image: none;
  background-size: cover;
  background-position: 50% 22%;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(130% 85% at 50% 18%, #000 28%, rgba(0,0,0,0.45) 58%, transparent 92%);
  mask-image: radial-gradient(130% 85% at 50% 18%, #000 28%, rgba(0,0,0,0.45) 58%, transparent 92%);
}
.stage-scrim {
  background:
    radial-gradient(110% 55% at 50% 14%, rgba(18, 18, 17, 0.7) 0%, rgba(18, 18, 17, 0.28) 46%, rgba(18, 18, 17, 0) 72%),
    linear-gradient(to bottom, rgba(18, 18, 17, 0.5) 0%, rgba(18, 18, 17, 0.12) 32%, rgba(18, 18, 17, 0.08) 62%, var(--ground) 100%);
}
.stage > .hero,
.stage > .section {
  position: relative;
  z-index: 1;
}
.hero {
  position: relative;
  overflow: visible;
  padding: var(--rhythm-hero-t) 0 80px;
  text-align: center;
}
/* hero kicker carries the product name (Cameron v2: the H1 no longer does) */
.hero-k {
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 18px;
}
.hero > .container {
  max-width: 1180px;
}
.hero .scene--hero {
  margin-top: 72px;
  text-align: left;
}
.hero .lede { color: rgba(251, 250, 244, 0.82); max-width: 52ch; }
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: var(--rhythm-4);
}
/* paired CTA (8/23 Phi, per the Mac LP hero): ghost secondary; the pair
   stacks full-width on phones so the hero reads balanced */
.btn--ghost {
  background: rgba(214, 213, 212, 0.07);
  border-color: var(--line-strong);
  color: var(--text);
  gap: 8px;
}
.btn--ghost:hover { background: rgba(214, 213, 212, 0.12); }
.btn--ghost .ic { opacity: 0.7; }
@media (max-width: 719.98px) {
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { width: 100%; }
}

.frame {
  position: relative;
  border: 1px dashed rgba(251, 250, 244, 0.22);
  border-radius: var(--r-card);
  background:
    linear-gradient(rgba(251, 250, 244, 0.03), rgba(251, 250, 244, 0.03)),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(251, 250, 244, 0.015) 10px,
      rgba(251, 250, 244, 0.015) 11px
    );
}

.ic { display: block; }

/* SYSD — the orchestration figure (8/18): a task card cycles; run rows
   land inside the dashed Spark frame; the one approved step slides out
   through the frame's edge and the result stays with the run. Content
   comes from the SYSD fixture in main.js (the CMS seam). */
.sysd {
  --sysd-respond: cubic-bezier(0, 0, .38, .9);
  --sysd-settle: cubic-bezier(.2, 0, .38, .9);
  --sysd-reveal: cubic-bezier(0, 0, .2, 1);
  --sysd-unfold: cubic-bezier(.4, .14, .3, 1);
  --sysd-exit: cubic-bezier(.2, 0, 1, .9);
  /* 8/18 Phi: desktop reads like mobile — narrower column so task rows
     wrap to a real measure, type scaled up to hold presence */
  max-width: 520px;
  margin: 72px auto 0;
}
@media (min-width: 1024px) { .sysd { margin-top: 104px; } }
@media (min-width: 700px) {
  .sysd-rr { font-size: 15px; padding: 14px 17px; }
  .sysd-card b { font-size: 17px; }
  .sysd-card p { font-size: 14px; }
  .sysd-k { font-size: 11px; }
  .sysd-rr--leave .sysd-sub { font-size: 12.5px; }
}
.sysd-deck { position: relative; min-height: 128px; transform-origin: center center; will-change: transform; }
.sysd-card {
  position: absolute;
  inset: 0;
  padding: 18px 22px;
  border: 1px solid rgba(237, 235, 228, 0.22);
  border-radius: 12px;
  background: #1a1918;
}
.sysd-card--back {
  /* 8/18 Phi: honest stack perspective — the card behind is clearly
     narrower (visible side insets), peeking one step above, like the
     product's own stacked-sheet grammar. Height is pinned to the front
     card by JS so it never outgrows it when the deck reserves room for
     the taller task. */
  inset: 0 0 auto;
  transform: translateY(-11px) scale(0.94);
  transform-origin: 50% 0;
  background: #171615;
  border-color: rgba(237, 235, 228, 0.12);
}
/* Front card is in flow so the deck sizes to the longest prompt; JS pins
   min-height to the tallest task so the switch never shifts layout */
.sysd-card--front { position: relative; z-index: 1; }
.sysd-k {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: rgba(237, 235, 228, 0.38);
}
.sysd-card b { display: block; font-weight: 550; font-size: 16px; }
.sysd-card p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: rgba(237, 235, 228, 0.55); }
.sysd-dots { position: absolute; right: 20px; top: 20px; z-index: 2; display: flex; gap: 6px; }
.sysd-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(237, 235, 228, 0.22); }
.sysd-dots span.on { background: #edebe4; }
.sysd-feed {
  display: block;
  width: 0;
  height: 44px;
  margin: 0 auto;
  border-left: 1px solid rgba(237, 235, 228, 0.22);
  transform-origin: top center;
}
.sysd-spark {
  position: relative;
  border: 1px dashed rgba(237, 235, 228, 0.22);
  border-radius: 16px;
  padding: 26px 24px 24px;
}
.sysd-tag {
  position: absolute;
  top: -8px;
  left: 22px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: rgba(237, 235, 228, 0.42);
  background: var(--ground);
}
.sysd-rows { display: grid; gap: 10px; }
.sysd-rr {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border: 1px solid rgba(237, 235, 228, 0.12);
  border-radius: 10px;
  background: rgba(23, 22, 21, 0.7);
  font-size: 14px;
  will-change: transform, opacity;
}
.sysd-rr > .sysd-ic,
.sysd-rr > .sysd-t,
.sysd-rr > .sysd-app,
.sysd-rr > small { will-change: transform, opacity; }
.sysd-rr small {
  margin-left: auto;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: rgba(237, 235, 228, 0.38);
  white-space: nowrap;
}
.sysd-app {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-top: 1px;
}
.sysd-app img {
  display: block;
  width: 15px;
  height: 15px;
  object-fit: contain;
}
.sysd-app small { margin-left: 0; padding-top: 0; }
/* working / done iconography: the product's thinking ring, then a check */
.sysd-ic { flex: none; width: 15px; height: 15px; margin-top: 2px; position: relative; }
.sysd-ic svg { position: absolute; inset: 0; display: block; width: 15px; height: 15px; }
.sysd-ic .sysd-ic-spin { color: rgba(237, 235, 228, 0.55); opacity: 0; }
.sysd-ic .sysd-ic-done { color: rgba(237, 235, 228, 0.45); opacity: 0; }
.sysd-rr.is-working .sysd-ic-spin { opacity: 1; animation: sysd-spin 1100ms linear infinite; }
.sysd-rr.is-done .sysd-ic-done { opacity: 1; }
@keyframes sysd-spin { to { transform: rotate(360deg); } }
/* chain-of-thought shimmer while the step works */
.sysd-rr.is-working .sysd-t {
  background: linear-gradient(90deg, rgba(237, 235, 228, 0.45) 25%, #fffefb 50%, rgba(237, 235, 228, 0.45) 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sysd-shimmer 1.6s linear infinite;
}
@keyframes sysd-shimmer {
  from { background-position: 130% 0; }
  to { background-position: -130% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sysd-rr.is-working .sysd-t { animation: none; background: none; color: inherit; }
  .sysd-rr.is-working .sysd-ic-spin { animation: none; }
}
.sysd-rr--leave {
  position: relative;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  /* 8/19 Phi: width hack removed (leftover from the retired side-offset
     treatment); the row seats flush with its siblings */
  width: 100%;
  /* 8/18 Phi: white outline, thicker, so the approved step reads through
     the resolved fade (teal border was lost against the dim ground) */
  border: 1.5px solid rgba(251, 250, 244, 0.78);
  background: #171615;
}
.sysd-rr--leave b { font-weight: 620; color: #fffefb; }
.sysd-copy { min-width: 0; }
.sysd-rr--leave .sysd-sub { display: block; margin-top: 3px; font-size: 12px; color: rgba(237, 235, 228, 0.55); }
.sysd-rr--leave .sysd-app small { color: rgba(237, 235, 228, 0.52); }
/* Product connector chip (Aether ak-chip grammar at row scale): the step
   that rides a connector out wears the chip; ambient marks stay plain */
.sysd-app--chip {
  height: 25px;
  padding: 0 10px 0 7px;
  gap: 6px;
  border: 1px solid rgba(214, 213, 212, 0.14);
  border-radius: 999px;
  background: rgba(214, 213, 212, 0.04);
}
.sysd-rr--leave .sysd-app--chip small {
  font-family: inherit;
  font-size: 12px;
  font-weight: 480;
  letter-spacing: 0;
  color: rgba(237, 235, 228, 0.75);
}
@media (max-width: 699.98px) {
  .sysd-app--chip { height: 23px; padding: 0 9px 0 6px; }
  .sysd-rr--leave .sysd-app--chip small { font-size: 11.5px; }
}
.sysd-consent {
  grid-column: 2 / -1;
  justify-self: end;
  display: grid;
  margin-top: 1px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms var(--sysd-reveal), transform 240ms var(--sysd-unfold);
}
.sysd-consent > * { grid-area: 1 / 1; }
.sysd-consent .fux-btn { pointer-events: none; }
.sysd-consent-approved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 1px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(237, 235, 228, 0.66);
  opacity: 0;
}
.sysd-consent-approved svg { width: 13px; height: 13px; color: var(--teal-bright, #1ba393); }
.sysd-rr--leave.is-consent-visible .sysd-consent { opacity: 1; transform: translateY(0); }
.sysd-rr--leave.is-consent-approved .fux-btn { opacity: 0; }
.sysd-rr--leave.is-consent-approved .sysd-consent-approved { opacity: 1; }
.sysd-consent-card-wrap {
  position: absolute;
  z-index: 3;
  bottom: calc(100% + 12px);
  left: 50%;
  width: min(420px, calc(100% - 16px));
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px) scale(0.98);
  transform-origin: bottom center;
  transition: opacity 180ms var(--sysd-reveal), transform 420ms var(--sysd-unfold);
  will-change: transform, opacity;
}
.sysd-consent-card {
  max-width: none;
  width: 100%;
  margin: 0;
  /* Raised dialog surface so the card separates from the row plane */
  background: #1e1d1c;
  border-color: rgba(214, 213, 212, 0.16);
  box-shadow: 0 18px 44px rgba(10, 10, 9, 0.6), 0 2px 10px rgba(10, 10, 9, 0.4);
}
/* 8/19 Phi: Allow once ^Enter was clipping ("Allow onc^Enter"). .fux's
   368px width was winning over this card, and the dark pill was a
   shrinking flex item. Fill the wrap; never shrink a keyboard-hint pill. */
.sysd-consent-card.fux { width: 100%; }
.sysd-consent-card .fux-btn { flex: 0 0 auto; }
/* Product backdrop quote: everything behind the floating consent card
   drops away (8/18 Phi: backdrop was too visible). The leave row hosts
   the card, so its content children blur individually and its chrome
   quiets; sibling rows blur harder. */
.sysd-spark .sysd-rr,
.sysd-rr--leave > .sysd-ic,
.sysd-rr--leave > .sysd-copy,
.sysd-rr--leave > .sysd-app {
  transition: filter 260ms var(--sysd-reveal), opacity 260ms var(--sysd-reveal);
}
.sysd-rr--leave { transition: border-color 260ms var(--sysd-reveal), filter 260ms var(--sysd-reveal); }
.sysd-spark.is-consent-live .sysd-rr:not(.sysd-rr--leave) { filter: blur(5px) brightness(0.45); }
.sysd-spark.is-consent-live .sysd-rr--leave { border-color: rgba(251, 250, 244, 0.22); }
.sysd-spark.is-consent-live .sysd-rr--leave > .sysd-ic,
.sysd-spark.is-consent-live .sysd-rr--leave > .sysd-copy,
.sysd-spark.is-consent-live .sysd-rr--leave > .sysd-app { filter: blur(3px) brightness(0.55); }
/* 8/19: iOS Safari's compositor smears blurred stacked layers into a
   yellow-green blob (Phi's phone caught it over these exact rows). On iOS
   the consent beat dims without blur; the modal read survives. */
@supports (-webkit-touch-callout: none) {
  .sysd-spark.is-consent-live .sysd-rr:not(.sysd-rr--leave) { filter: brightness(0.38) saturate(0.9); }
  .sysd-spark.is-consent-live .sysd-rr--leave > .sysd-ic,
  .sysd-spark.is-consent-live .sysd-rr--leave > .sysd-copy,
  .sysd-spark.is-consent-live .sysd-rr--leave > .sysd-app { filter: brightness(0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .sysd-spark.is-consent-live .sysd-rr:not(.sysd-rr--leave),
  .sysd-spark.is-consent-live .sysd-rr--leave > .sysd-ic,
  .sysd-spark.is-consent-live .sysd-rr--leave > .sysd-copy,
  .sysd-spark.is-consent-live .sysd-rr--leave > .sysd-app { filter: none; }
}
/* The cursor that walks to Allow once and clicks. Enters from below-left,
   eases to rest over the button, presses with it, leaves with the card. */
.sysd-cursor {
  position: absolute;
  z-index: 2;
  right: 58px;
  bottom: 19px;
  width: 17px;
  height: 17px;
  opacity: 0;
  transform: translate(-150px, 44px);
  transition: opacity 160ms var(--sysd-reveal);
  will-change: transform, opacity;
}
.sysd-cursor svg { display: block; width: 100%; height: 100%; fill: #fbfaf4; stroke: #121211; stroke-width: 1.1; }
.sysd-rr--leave.is-cursor-in .sysd-cursor { opacity: 1; }
.sysd-rr--leave.is-consent-approved .sysd-cursor { opacity: 0; }
.sysd-consent-card .fux-title,
.ledger-pane .fux-title,
.ledger-slot .fux-title {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: -0.005em;
  max-width: none;
  color: var(--fg-primary);
}
.sysd-consent-card .fux-body,
.ledger-pane .fux-body,
.ledger-slot .fux-body {
  margin: 0 0 13px;
  font-size: 12px;
  line-height: 1.55;
  max-width: none;
  color: var(--fg-secondary);
}
.sysd-rr--leave.is-consent-visible .sysd-consent-card-wrap { opacity: 1; }
.sysd-consent-card .fux-btn--dark { transform-origin: center; will-change: transform; }
.sysd-rr--leave.is-consent-approved .sysd-consent-card-wrap { opacity: 0; }
@media (max-width: 699.98px) {
  .sysd-card b { font-size: 15px; }
  .sysd-rr { font-size: 13px; padding: 12px 13px; }
  /* 8/19 Phi: mobile width hack removed with the desktop one; flush rows */
  .sysd-app { gap: 5px; }
  .sysd-app img { width: 14px; height: 14px; }
  .sysd-rr--leave .sysd-sub { font-size: 11.5px; }
  .sysd-consent-card-wrap { width: calc(100% - 12px); }
  .sysd-consent-card { padding: 13px 14px; }
  .sysd-consent-card .fux-title { font-size: 13px; }
  .sysd-consent-card .fux-body { font-size: 11.5px; }
  .sysd-cursor { right: 46px; }
}


/* 8/24 Phi: generated scene imagery dropped. The measured dimetric turntable
   (moved out of the hardware aside) leads the section; larger than its old
   in-aside size. motifs.js finds .hw-fig/.hw-draw by class, so it still boots. */
.setup-fig {
  margin: 62px auto -30px;
  display: flex;
  justify-content: center;
}
/* .hw-fig needs a definite width here: as a bare flex item it shrink-wraps its
   %-width children and collapses to the 2px canvas floor. */
.setup-fig .hw-fig { width: 100%; }
.setup-fig .hw-draw { width: min(480px, 86%); }
.setup-fig .hw-canvas { width: min(480px, 86%); }
@media (max-width: 719.98px) {
  .setup-fig { margin: 54px auto -38px; }
}

/* 8/19 Phi: Variant A. Drop the rounded container; the three steps sit in
   the hardware block's grammar so the two plates read as one system. */
.setup-steps {
  max-width: 1000px;
  margin: var(--rhythm-lede) auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .setup-steps { grid-template-columns: 168px 1fr; }
}
.setup-k {
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 3px;
  margin: 0;
}
@media (min-width: 720px) {
  .setup-k { text-transform: none; letter-spacing: 0.06em; }
}
.setup-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  border-left: 1px solid var(--line);
  padding-left: 20px;
}
@media (min-width: 720px) {
  .setup-body {
    grid-template-columns: 1.1fr 1fr 1.15fr;
    gap: 40px;
    padding-left: 36px;
  }
}
.setup-step { min-width: 0; }
.setup-n {
  display: block;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.3;
  color: var(--faint);
  white-space: nowrap;
}
.setup-step h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.setup-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
/* install commands: quiet terminal register in a full-width row under the
   steps; second grid column so it aligns with the step bodies. Long lines
   scroll sideways on phones instead of wrapping mid-command. */
.setup-cmds-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
/* 8/24 Phi: header line spans the row — kicker left, copy button right, shared
   text baseline. The pre drops below the header at every width. */
.cmds-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.cmds-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: "PPLX Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1;
  cursor: pointer;
}
.cmds-copy:hover { color: var(--text); border-color: var(--line-strong); }
.cmds-copy:focus-visible { outline: 2px solid var(--turquoise-200); outline-offset: 2px; }
.cmds-copy svg { display: block; }
.cmds-copy.is-copied { color: var(--turquoise-200); border-color: var(--line-strong); }
.setup-cmds-k {
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 26px 0 0;
}
.setup-cmds {
  margin: 22px 0 0;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  /* quiet the scroll chrome: the default light track reads as a broken bar */
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 213, 212, 0.22) transparent;
}
.setup-cmds::-webkit-scrollbar { height: 6px; }
.setup-cmds::-webkit-scrollbar-track { background: transparent; }
.setup-cmds::-webkit-scrollbar-thumb {
  background: rgba(214, 213, 212, 0.22);
  border-radius: 999px;
}
.setup-cmds::-webkit-scrollbar-thumb:hover { background: rgba(214, 213, 212, 0.35); }
@media (min-width: 720px) {
  /* header now spans the row, so the pre must be pinned to the content column */
  .setup-cmds { grid-column: 2; margin-left: 36px; }
}
.setup-cmds code {
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text);
  white-space: pre;
}
@media (max-width: 719.98px) {
  .setup-step {
    padding: 22px 0;
    border-top: 1px solid var(--line);
  }
  .setup-step:first-child {
    padding-top: 0;
    border-top: 0;
  }
}
.hw {
  /* share the 3-step block's content width so the rail, hairline and spec
     columns align edge to edge with .setup-steps above */
  max-width: 1000px;
  margin: var(--rhythm-6) auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .hw { grid-template-columns: 168px 1fr; }
}
.hw-k {
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 3px;
}
/* desktop label reads as a sentence, not a caps eyebrow (mobile stays caps) */
@media (min-width: 720px) {
  .hw-k { text-transform: none; letter-spacing: 0.06em; }
}
.hw-v {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
/* Spec sheet, B&O grammar: label rail, vertical hairline, grouped
   key/value stacks in two columns. Bold group name, plain value lines. */
.hw-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
  border-left: 1px solid var(--line);
  padding-left: 36px;
}
.hw-group { min-width: 0; }
/* Measured drawing: same ink grammar as the feature-card isometrics. */
/* the figure is one centered stack: drawing, dims, then the manufacturer
   credit on the same axis -- furniture aligns to the object, not the page */
.hw-fig {
  grid-column: 1 / -1;
  padding: 6px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
/* Official NVIDIA horizontal mark (docs.nvidia.com static asset), never redrawn. */
.hw-canvas {
  display: block;
  width: min(340px, 88%);
  height: auto;
}
/* Product-UI fragments in feature cards (measured off the Windows Figma /
   GTM storyboard). Light Aether chrome floating on the dark card. */
/* Linear-style: flat, crisp panel. Panel sinks DARKER than the card so it
   reads as content on the card, not a third container. No zone band. */
.feat-ui {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 216px;
  padding-top: 28px;
  font-family: var(--font-sans);
  /* 8/18: the pane crops the ghost edge-bleeds (thread -76 left, runs -76
     right). Without this the runs ghost widened the document 84px past
     390 and iOS Safari let the whole page pan and rubber-band sideways. */
  overflow-x: clip;
  overflow-y: visible;
}
.feat--wide .feat-ui { min-height: 244px; }
/* local halo: the fragment is the lit layer, everything else stays ground */
.feat-ui::before {
  content: "";
  position: absolute;
  inset: 6% 12% 0;
  background: radial-gradient(58% 62% at 50% 56%, rgba(237, 235, 228, 0.05) 0%, rgba(237, 235, 228, 0.015) 55%, transparent 78%);
  pointer-events: none;
}
/* Layered scene: dim parent panel recedes into the ground behind the
   focused fragment (the Linear crop pattern: overlay in front, parent
   dissolving at its lower edge). */
.fux-scene {
  position: relative;
  width: min(400px, 100%);
  padding: 54px 12px 0;
  /* no bottom crop: our cards end in their key beat (buttons, meta), so
     cropping there always reads as cut content. Glimpse comes from the
     ghost edge-bleeds instead. */
}
.fux-ghost {
  position: absolute;
  inset: 0 0 44px;
  z-index: 0;
  min-height: 150px;
  background: rgba(23, 22, 21, 0.55);
  border: 1px solid rgba(214, 213, 212, 0.05);
  border-radius: 12px;
  padding: 15px 17px;
  opacity: 0.62;
  -webkit-mask-image: linear-gradient(to bottom, #000 8%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 8%, transparent 86%);
}
.fg-head {
  display: block;
  width: 32%;
  height: 6px;
  border-radius: 3px;
  background: rgba(237, 235, 228, 0.07);
  margin-bottom: 15px;
}
.fg-row { display: flex; align-items: center; gap: 9px; margin: 13px 0; }
.fg-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(237, 235, 228, 0.055); flex: none; }
.fg-bar { height: 6px; border-radius: 3px; background: rgba(237, 235, 228, 0.055); }
.fg-bar--w1 { width: 58%; }
.fg-bar--w2 { width: 44%; }
.fg-bar--w3 { width: 62%; }
.fg-chip { margin-left: auto; width: 46px; height: 11px; border-radius: 999px; background: rgba(237, 235, 228, 0.04); flex: none; }
/* ghosts crop off the cell edges: parents extend past the frame */
.fux-ghost--thread { left: -76px; top: -16px; }
.fux-ghost--runs { right: -76px; top: -14px; }
/* thread-view ghost (Advisor): query title, source chips, answer lines */
.fg-query {
  display: block;
  width: 54%;
  height: 8px;
  border-radius: 4px;
  background: rgba(237, 235, 228, 0.09);
  margin-bottom: 13px;
}
.fg-srcrow { display: flex; gap: 7px; margin-bottom: 15px; }
.fg-src { width: 58px; height: 13px; border-radius: 7px; background: rgba(237, 235, 228, 0.045); }
.fg-line { display: block; height: 6px; border-radius: 3px; background: rgba(237, 235, 228, 0.055); margin: 11px 0; }
.fg-line--w1 { width: 96%; }
.fg-line--w2 { width: 88%; }
.fg-line--w3 { width: 93%; }
.fg-line--w4 { width: 58%; }
/* local-runs ghost (Own the compute): tighter rows, every row carries a cost chip */
.fux-ghost--runs .fg-row { margin: 11px 0; }
.fux-ghost--runs .fg-chip { width: 58px; }
/* model-selector ghost (Local): popover shape, two option groups with a check
   on the active row. Narrower than the panel ghosts, like a menu. */
.fux-ghost--selector {
  /* 8/24: widened from 14% insets so "NVIDIA Nemotron 3.5 Lightning" +
     the Coming soon tag fit the row without ellipsis (Cameron rename) */
  left: 8%;
  right: 8%;
  padding: 13px 15px;
  /* fade before the Cloud group: LOCAL + active row is the whole read */
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 80%);
}
/* the popover needs more visible height than the panel ghosts */
.fux-scene:has(.fux-ghost--selector) { padding-top: 96px; }
/* 8/24: phones need the full NVIDIA Nemotron row too */
@media (max-width: 719.98px) {
  .fux-ghost--selector { left: 3%; right: 3%; }
  .fux-ghost--selector .fgs-row { font-size: 10.5px; gap: 6px; }
  .fux-ghost--selector .fgs-soon { padding: 2px 5px; letter-spacing: 0.03em; }
}
/* faithful selector rows: real group labels, model names, cpu icons, and
   the teal check on the active row — dimmed into the ghost band */
.fgs-label {
  display: block;
  font-size: 9.5px;
  font-weight: 570;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(237, 235, 228, 0.3);
  margin: 3px 0 9px;
}
.fgs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0;
  font-size: 12px;
  color: rgba(237, 235, 228, 0.42);
  white-space: nowrap;
}
.fgs-name { overflow: hidden; text-overflow: ellipsis; }
.fgs-ico { width: 13px; height: 13px; opacity: 0.55; flex: none; }
/* 8/20 NVDA: coming-soon tag on the ghost selector's Nemotron row */
.fgs-soon {
  margin-left: auto; flex: none;
  font-size: 8.5px; font-weight: 560;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(237, 235, 228, 0.34);
  border: 1px solid rgba(237, 235, 228, 0.14);
  border-radius: 999px;
  padding: 2px 7px;
}
.fgs-check {
  margin-left: auto;
  width: 12px;
  height: 12px;
  color: rgba(27, 163, 147, 0.7);
  flex: none;
}
.fg-sep {
  display: block;
  height: 1px;
  background: rgba(237, 235, 228, 0.05);
  margin: 13px -15px;
}
.fux {
  position: relative;
  z-index: 1;
  width: min(368px, 100%);
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid rgba(214, 213, 212, 0.1);
  border-radius: 12px;
  padding: 15px 17px;
  color: var(--fg-secondary);
  box-shadow: 0 14px 34px rgba(10, 10, 9, 0.55);
}
/* Ambient trigger loop: the modal is invoked over its parent -- snappy
   build (200ms rise + settle), long hold, hard cut, replay. Staggered per
   cell so one fires at a time. Runs only while the section is on screen
   (.is-live per row, gated in motifs.js) and never under reduced motion. */
@keyframes fux-trigger-once {
  0% { opacity: 0; transform: translateY(7px) scale(0.97); }
  3.7%, 100% { opacity: 1; transform: none; }
}
@keyframes fux-dl-fill-once {
  0%, 44% { transform: scaleX(0.18); }
  56%, 100% { transform: scaleX(1); }
}
@keyframes fux-dl-meta-a-once {
  0%, 52% { opacity: 1; }
  57%, 100% { opacity: 0; }
}
@keyframes fux-dl-meta-b-once {
  0%, 57% { opacity: 0; }
  62%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  /* 8/17 Phi: product-UI fragments do not loop. Every card enters once on
     its stagger and rests on its landed state. Only figures with a real
     running verb keep loops (sandbox room, hardware turntable, timeline). */
  .ledger-entry.is-live .fux {
    animation: fux-trigger-once 5.4s cubic-bezier(0.22, 1, 0.36, 1) 1;
    animation-fill-mode: both;
  }
  /* one short entrance beat: the cards live in separate ledger panes now
     (never co-visible), so the old co-scene stagger (0.2/2/3.8s) just read
     as a dead pane. Animations start when the pane becomes visible. */
  .ledger-entry.is-live .fux { animation-delay: 0.35s; }
  /* inside the dl card's 5.4s window: hold 18% to 44%, complete the bar,
     then swap the meta line to the startup state and hold it there */
  .ledger-entry.is-live .fux--dl .fux-bar i {
    animation: fux-dl-fill-once 5.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s 1 both;
  }
  .ledger-entry.is-live .fux--dl .fux-dl-meta {
    animation: fux-dl-meta-a-once 5.4s linear 0.35s 1 both;
  }
  .ledger-entry.is-live .fux--dl .fux-dl-meta--start {
    animation: fux-dl-meta-b-once 5.4s linear 0.35s 1 both;
  }

  /* Brain graph: same rhythm, the graph's own verb -- a memory crossing.
     Cloud node wakes, the crossing edge brightens, the local node answers
     with one teal pulse; hold; hard cut to rest; replay. Fires at 1.1s,
     the quiet slot in the section's stagger. */
  /* the beat: Computer just learned something -- the center wakes, the
     spoke brightens, the new note answers with one pulse */
  }
  2.5%, 78% { opacity: 1; }
  78.4%, 100% { opacity: 0.78; }
}
  9%, 78% { stroke: rgba(237, 235, 228, 0.34); }
  78.4%, 100% { stroke: rgba(214, 213, 212, 0.13); }
}
  12%, 78% { opacity: 1; }
  78.4%, 100% { opacity: 0.78; }
}
  11% { transform: scale(1.35); }
  14%, 100% { transform: scale(1); }
}
/* Brain: a snippet of the product's own Brain panel (tabs, graph, typed
   legend, learned row) so it reads as product UI, not a drawn figure.
   Legend chips are working type filters. */
/* minmax(0,1fr): the nowrap subhead sets a ~450px intrinsic width, and an
   auto track would grow to it and overflow the cell on mobile */
/* the product's Brain constellation on the light card ground */

/* locality badge: the reason to believe, one per card. Teal dot = fully
   on device; the advisor exception is stated, which makes the zeros credible. */
/* the stated exception is the one loud mark in the rail: a bordered pill,
   count bright, approval quiet */

/* inline connector/skill chips in prompts, production composer style.
   line-height 1.1 keeps the chip box (text + 3px pad + 2px border = ~21.5px)
   inside the paragraph's 21.75px line box, so chip lines get no extra
   leading and the prompt keeps one even rhythm. */
/* chips inside the hero product window scale to its 12.5px type;
   the window is the light paper theme, so the token flips to dark-alpha */
/* delivery: a completed action is chrome, not a caption -- same module
   family as .apx-out (surface, hairline, radius, soft shadow), one line,
   trailing teal check = the window's own completion mark */
.apx-deliver {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 8px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20, 24, 26, 0.05);
  font-size: 12.5px;
  color: var(--fg-secondary);
}
.apx-deliver .conn-ic { width: 14px; height: 14px; flex: none; }
/* a local hand-off has no connector logo: same slot, the file icon */
.apx-dlv-loc { display: flex; flex: none; color: var(--fg-tertiary); }
.apx-dlv-text { min-width: 0; }
.apx-dlv-check { margin-left: auto; color: #12857a; flex: none; }

/* agent tray: production's parallel-subagent cards, simplified to the
   header line (task / model / stop). Same module family as .apx-out.
   This is the local/cloud split made visible: one lane on the Spark,
   one approved cloud lane, running at the same time. */
.apx-tray { display: grid; gap: 6px; }
/* one element, not two: a single module carries the chrome, rows divide
   with a hairline (production stacks its tray rows the same way) */
.apx-tray-group {
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20, 24, 26, 0.05);
  overflow: hidden;
}
.apx-tray-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  font-size: 12.5px;
}
/* the divider belongs to row 2, so it fades in with the row */
.apx-tray-card + .apx-tray-card { border-top: 1px solid var(--border-soft); }
/* local lane carries the capture's live telemetry row (Joey's dev build):
   CPU / Memory / GPU sparklines with live percentages. The local run header
   is teal-washed in the capture; the "Local agent:" prefix and model chip
   are its title grammar. */
.apx-tray-card--local { display: block; background: rgba(18, 133, 122, 0.045); }
.apx-tc-pre { color: #12857a; }
.apx-tc-chip {
  flex: none;
  padding: 2px 8px 2.5px;
  border-radius: 999px;
  background: var(--layer-subtle);
  font-size: 10.5px;
  font-weight: 540;
  color: var(--fg-secondary);
  white-space: nowrap;
}
.apx-tc-head { display: flex; align-items: center; gap: 8px; }
.apx-tlm { display: flex; gap: 16px; margin-top: 7px; }
.apx-tlm-cell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.apx-tlm-cell i { font-style: normal; font-size: 10.5px; color: var(--fg-tertiary); }
.apx-tlm-cell b { font-size: 11px; font-weight: 560; color: var(--fg-secondary); font-variant-numeric: tabular-nums; min-width: 30px; }
.apx-tlm-spark { width: 64px; height: 12px; border-radius: 3px; flex: none; }
.tlm-fill { stroke: none; }
.tlm-line { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.apx-tlm-spark--cpu .tlm-fill { fill: rgba(96, 144, 168, 0.22); }
.apx-tlm-spark--cpu .tlm-line { stroke: rgba(96, 144, 168, 0.65); }
.apx-tlm-spark--mem .tlm-fill { fill: rgba(64, 150, 140, 0.22); }
.apx-tlm-spark--mem .tlm-line { stroke: rgba(64, 150, 140, 0.65); }
.apx-tlm-spark--gpu .tlm-fill { fill: rgba(144, 96, 216, 0.2); }
.apx-tlm-spark--gpu .tlm-line { stroke: rgba(144, 96, 216, 0.6); }
@media (max-width: 699.98px) {
  /* head-row budget at phone width: the task ellipsizes, the chip caps,
     the local meta yields (prefix + telemetry already say local), and
     telemetry wraps instead of colliding */
  /* .apx-tc-head prefix: the base .apx-tc-task{flex:none} rule sits later
     in the file and would win the cascade at equal specificity */
  .apx-tc-head .apx-tc-task { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .apx-tc-head .apx-tc-chip { max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
  /* phone budget: prefix + task read whole; the local chip yields (the
     teal wash, telemetry, and composer band still say local) */
  .apx-tray-card--local .apx-tc-chip { display: none; }
  /* statuses crush to a sliver at phone width between task and chip;
     they yield entirely (the thread steps narrate the same work) */
  .apx-tray-card .apx-tc-meta { display: none; }
  .apx-tlm { flex-wrap: wrap; gap: 5px 14px; }
  .apx-tlm-spark { width: 40px; }
  .apx-tlm-cell b { min-width: 27px; }
}
.apx-tc-mark { color: var(--fg-secondary); flex: none; }
/* production card affordance: trailing chevron (inert fixture, like the stop) */
.apx-tc-chev { color: var(--fg-tertiary); flex: none; }
.apx-tc-task { color: var(--fg-primary); font-weight: 560; flex: none; }
.apx-tc-meta {
  color: var(--fg-tertiary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* production stop control anatomy (refs IMG_2239/2240): dark square glyph
   inside a soft gray rounded button, not a bare square. Inert fixture. */
.apx-tc-stop {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--layer-subtle);
  flex: none;
}
.apx-tc-stop::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--fg-secondary);
}
.apx-tray-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 1px 2px;
  font-size: 11.5px;
  color: #12857a;
}

/* consent exchange row (Advisor): the moment it asked, replayed small */

/* Connectors tile grid (reference: dense integration grid, center-weighted,
   edges ghosting out). Hover: the tile expands while the grid contracts. */
.conn-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  place-items: center;
  width: 100%;
  padding-top: 30px;
  background: radial-gradient(52% 58% at 50% 58%, rgba(237, 235, 228, 0.04) 0%, transparent 74%);
}
.conn-tile {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid rgba(214, 213, 212, 0.08);
  opacity: 0.95;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
  /* the extracted marks carry overflow=visible + sprite-offset viewBoxes;
     clip their leakage at the tile instead of editing brand files */
  overflow: hidden;
}
/* marks render as CSS backgrounds: intrinsic-less Figma-export SVGs
   (width/height 100%) size deterministically as background-image where
   <img> misplaced them */
.conn-ic {
  display: block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.conn-ic--asana { background-image: url("assets/logos/apps/asana.svg"); }
.conn-ic--confluence { background-image: url("assets/logos/apps/confluence.svg"); }
.conn-ic--dropbox { background-image: url("assets/logos/apps/dropbox.svg"); }
.conn-ic--excel { background-image: url("assets/logos/apps/excel.svg"); }
.conn-ic--github { background-image: url("assets/logos/apps/github.svg"); }
.conn-ic--gmail { background-image: url("assets/logos/apps/gmail.svg"); }
.conn-ic--google-calendar { background-image: url("assets/logos/apps/google-calendar.svg"); }
.conn-ic--google-drive { background-image: url("assets/logos/apps/google-drive.svg"); }
.conn-ic--jira { background-image: url("assets/logos/apps/jira.svg"); }
.conn-ic--linear { background-image: url("assets/logos/apps/linear.svg"); }
.conn-ic--notion { background-image: url("assets/logos/apps/notion.svg"); }
.conn-ic--onedrive { background-image: url("assets/logos/apps/onedrive.svg"); }
.conn-ic--slack { background-image: url("assets/logos/apps/slack.svg"); }
.conn-ic--snowflake { background-image: url("assets/logos/apps/snowflake.svg"); }
.conn-ic--teams { background-image: url("assets/logos/apps/teams.svg"); }
.conn-tile .conn-ic { width: 24px; height: 24px; }
.conn-tile--lg .conn-ic { width: 30px; height: 30px; }
.conn-tile--sm .conn-ic { width: 20px; height: 20px; }
.conn-tile--ghost .conn-ic { width: 17px; height: 17px; }
.conn-tile--lg { width: 58px; height: 58px; border-radius: 13px; }
.conn-tile--sm { width: 38px; height: 38px; border-radius: 9px; opacity: 0.68; }
.conn-tile--ghost {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  opacity: 0.26;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .conn-grid:hover .conn-tile { transform: scale(0.96); }
  .conn-grid .conn-tile:hover { transform: scale(1.14); opacity: 1; }
}

/* rail outcome rows: task in, artifact out */

.ledger-pane .fux-title, .ledger-slot .fux-title {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: -0.005em;
  max-width: none;
  color: var(--fg-primary);
}
/* the consent card is the subject now and its cycling copy must read in
   full (8/18); the clamp stays only as a safety net */
.fux--consent .fux-body {
  opacity: 0.62;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ledger-pane .fux-body, .ledger-slot .fux-body { margin: 0 0 13px; font-size: 12px; line-height: 1.55; max-width: none; color: var(--fg-secondary); }
.fux-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* a keyboard-hint pill must never break its label */
.fux-btn { white-space: nowrap; }
.fux-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-primary);
  border: 1px solid var(--border-medium);
  border-radius: 9px;
  padding: 6px 12px;
}
.fux-btn i { font-style: normal; font-size: 10px; font-weight: 480; color: var(--fg-tertiary); }
.fux-btn--dark {
  background: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--surface-base);
}
.fux-btn--dark i { color: inherit; opacity: 0.6; }
.fux--runs { width: min(360px, 100%); padding: 12px 14px; }
.ledger-pane .fux-head, .ledger-slot .fux-head { margin: 0 0 8px; font-size: 10.5px; font-weight: 620; max-width: none; color: var(--fg-primary); }
.fux-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 2px;
  font-size: 11.5px;
  font-weight: 520;
  color: var(--fg-secondary);
}
.fux-row + .fux-row { border-top: 1px solid var(--border-soft); }
.fux-row .ic { color: var(--fg-tertiary); flex: none; }
.fux-row > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fux-chip {
  margin-left: auto;
  font-size: 10px;
  font-weight: 550;
  color: var(--fg-secondary);
  background: var(--layer-subtle);
  border-radius: 999px;
  padding: 2.5px 9px;
  white-space: nowrap;
}
.fux--dl { width: min(300px, 100%); padding: 12px 14px; }
.fux-dl-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 560;
  color: var(--fg-primary);
}
.fux-dl-top .ic { color: var(--fg-secondary); }
.fux-dl-x { margin-left: auto; color: var(--fg-tertiary); }
.fux-bar {
  height: 5px;
  margin: 10px 0 8px;
  border-radius: 999px;
  background: var(--layer-subtle);
  overflow: hidden;
}
/* full-width fill scaled DOWN to 18%: scaling up a rounded 18% bar
   stretched its end caps into a skew (Phi caught it). The track clips. */
.fux-bar i { display: block; height: 100%; width: 100%; background: #1ba393; transform: scaleX(0.18); transform-origin: left center; }
.fux-dl-meta { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--fg-tertiary); }
.fux-dl-meta b { font-weight: 560; color: #1ba393; }
/* download-then-startup: the two meta lines share a cell; the startup line
   (Figma Windows spec, verbatim) takes over late in the card's cycle while
   the bar completes. Static render stays the 18% download state. */
.fux-dl-metas { display: grid; }
.fux-dl-metas > * { grid-area: 1 / 1; }
.fux-dl-meta--start { opacity: 0; }
@media (max-width: 699.98px) {
  .hw-canvas { width: 100%; }
}
.hw-draw {
  --iso-ink: rgba(214, 213, 212, 0.72);
  --iso-hatch: rgba(214, 213, 212, 0.3);
  --iso-guide: rgba(214, 213, 212, 0.45);
  display: block;
  width: min(330px, 78%);
  height: auto;
  overflow: visible;
}
.hw-draw polygon, .hw-draw line {
  fill: none;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.hw-draw .iso-axis { stroke: var(--iso-ink); stroke-width: 1.05px; }
.hw-draw .iso-s { stroke: var(--iso-ink); stroke-width: 0.7px; }
.hw-draw .iso-h { stroke: var(--iso-hatch); stroke-width: 0.35px; }
.hw-draw .iso-g { stroke: var(--iso-guide); stroke-width: 0.45px; }
.hw-draw path { fill: none; stroke-linejoin: miter; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.hw-draw .iso-dot { fill: rgba(214, 213, 212, 0.34); stroke: none; }
.hw-draw .iso-t {
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: var(--muted);
}
.hw-draw .iso-t--dim { fill: var(--faint); font-size: 9px; letter-spacing: 0.14em; }
.hw-g-name {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -0.005em;
  color: var(--text);
}
.hw-g-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.hw-g-lines li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hw-tag {
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line);
  padding: 2px 7px;
  margin-left: 10px;
  white-space: nowrap;
}
.hw-foot {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--faint);
}
@media (max-width: 699.98px) {
  .hw-body { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-left: 20px; }
}

/* Marketing Marquee + DeepResearchPromptCard
   Source: pplx/frontend/apps/marketing/components/Marquee
           pplx/frontend/apps/marketing/pages/hub/products/deep-research/components/DeepResearchPromptCard */
/* Task cards follow their content so the footer keeps its intentional gap. */
@media (min-width: 768px) {
}
@media (prefers-reduced-motion: reduce) {
}

/* Linear grammar: ONE framed surface, hairline internal dividers, no
   gutters. Cells are the page ground itself; only the UI fragment is
   lighter. gap:1px over a line-colored backdrop draws the dividers. */
/* LEDGER (8/17, replaces the bento): numbered spec entries on the left at
   full measure, one shared product stage on the right. Entries switch the
   stage on hover/focus/click; on phones each pane relocates into its entry
   (main.js moves the nodes). Density is carried by hierarchy, not cells. */
.ledger { margin-top: var(--rhythm-lede); }

.ledger-list { list-style: none; margin: 0; padding: 0; }
.ledger-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "num" "copy" "slot";
  padding: 36px 0 40px;
  border-top: 1px solid rgba(214, 213, 212, 0.12);
}
.ledger-entry:last-child { border-bottom: 1px solid rgba(214, 213, 212, 0.12); }
.ledger-entry p {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
}
/* editorial rows (8/17 Phi, borrowed production pattern): every feature
   is a full-width hairline row: mono index, serif title, short body left;
   the asset breathing right. Nothing switches; nothing hides. */
.ledger-list { counter-reset: featrow; }
.ledger-entry { counter-increment: featrow; }
.ledger-entry::before {
  content: "0" counter(featrow);
  grid-area: num;
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(237, 235, 228, 0.4);
  padding-top: 9px;
}
.ledger-copy { grid-area: copy; }
.ledger-h {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* 8/19 Phi: keep the desktop row until mobile — the 1024 stack left a
   narrow copy column and a dead field on tablet. */
@media (min-width: 768px) {
  .ledger-entry {
    grid-template-columns: 44px minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "num copy slot";
    gap: 0 40px;
    /* breathing room (8/18 Phi): graphics need air to read easily */
    padding: 76px 0;
  }
  .ledger-h { font-size: 30px; line-height: 1.15; }
  .ledger-entry p { font-size: 16px; max-width: 36ch; margin: 12px 0 0; }
  /* open rows (Phi): the fragment sits on the section ground, no plate */
  /* the whole scene (ghost + card) zooms together so the fragments keep
     their spatial relationship; scaling only the card made them collide */
  .ledger-slot--open .fux-scene { scale: 1.22; transform-origin: center; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ledger-entry { gap: 0 24px; }
  .ledger-slot--open .fux-scene { scale: 1; }
  .ledger-slot { overflow-x: clip; }
}
.ledger-slot { grid-area: slot; margin-top: 18px; }
@media (min-width: 768px) {
  .ledger-slot { margin: 0; align-self: center; }
  .ledger-pane { display: grid; align-items: center; }
}
/* fragments keep their internals; the pane gives them back a card ground
   (the old bento cell) so they don't float loose on the section dark */
.ledger-pane .feat-ui,
.ledger-slot .feat-ui {
  min-height: 360px;
  width: 100%;
  place-items: center;
  padding: 32px;
  border: 1px solid rgba(214, 213, 212, 0.12);
  border-radius: var(--r-card);
  background: #161514;
  overflow: hidden; /* fragments may bleed; the plate clips like the old cell */
}
/* open rows (8/17 Phi): container removed, the fragment floats on the
   section ground like the reference rows */
.ledger-slot--open .feat-ui {
  min-height: 300px;
  padding: 24px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* 8/18: x stays clipped — the runs ghost's -76px bleed was widening the
     document 84px past 390 and iOS Safari panned/rubber-banded sideways
     (Phi's recording). y stays visible for shadows and popovers. */
  overflow-x: clip;
  overflow-y: visible;
}
/* connectors: larger marks, tighter field (Phi: not so spread out) */
.ledger-slot .conn-grid {
  max-width: 440px;
  margin: 0 auto;
  gap: 16px 20px;
}
@media (min-width: 1024px) {
  .ledger-slot .conn-grid { scale: 1.18; transform-origin: center; }
}
/* mobile type bump (8/17): reading layer steps up one Nimbus notch on
   phones -- 14px bodies read tiny at arm's length. Product-window fixture
   and mono kickers stay exempt (fidelity beats scale). */
@media (max-width: 767.98px) {
  .ledger-entry p,
  .setup-step p,
  .cta-avail { font-size: 16px; }
}

/* mobile section rhythm (8/17): 96/96 desktop paddings stacked ~200-260px of
   dark at every seam on phones; the swells carry the transitions, so seams
   need a breath, not a field */
@media (max-width: 1023.98px) {
  .section { padding-top: 48px; padding-bottom: 48px; }
  #features { padding-bottom: 40px; }
  .cta-inner { padding-top: 72px; padding-bottom: 24px; }
}

/* mobile slots: the plate hugs the scene instead of centering it in a fixed
   box, and the consent body earns a third line at narrow measure (two lines
   cut mid-sentence at 278px) */
@media (max-width: 1023.98px) {
  .ledger-slot .feat-ui { min-height: 0; padding: 24px 20px; }
  .ledger-slot .fux--consent .fux-body { -webkit-line-clamp: 4; }
}
/* consent cycler (8/18 Phi): the modal cycles through the real escalation
   triggers so people learn what asks for approval. Text crossfades; card
   height is locked to the tallest variant so the row never shifts. */
.ledger-slot .fux--consent { min-height: 200px; } /* unscaled; scene scales 1.22 on desktop */
/* collapse chevron: product consent chrome (Figma 2298 component, 8/24 Phi) */
.fux--consent { position: relative; }
.fux-chev { position: absolute; top: 16px; right: 15px; color: var(--fg-tertiary); }
.fux--consent .fux-title { padding-right: 22px; }
.fux--consent .fux-title, .fux--consent .fux-body { transition: opacity 200ms var(--respond); }
.fux--consent.is-swapping .fux-title, .fux--consent.is-swapping .fux-body { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .fux--consent .fux-title, .fux--consent .fux-body { transition: none; }
}
.ledger-pane .feat-iso,
.ledger-slot .feat-iso { display: block; margin: 0 auto; }
/* sandbox tray (8/18 Phi): product tray group replaces the surveyed-zone
   drawing. Wider than the default fux scene so a status line like
   "Reading 1099-B-2024.pdf" does not ellipsize. Open slot, no plate. */
.feat-ui--sandbox {
  min-height: 0;
  width: 100%;
  place-items: center;
  padding: 8px 0;
  border: 0;
  background: transparent;
}
.sandbox-tray {
  width: min(560px, 100%);
}
.sandbox-tray .apx-tc-meta {
  flex: none;
  white-space: nowrap;
}
@media (max-width: 699.98px) {
  .sandbox-tray .apx-tray-card--local .apx-tc-chip { display: none; }
}
.ledger-pane .conn-grid,
.ledger-slot .conn-grid { margin: 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .ledger-pane, .ledger-entry p { transition: none; }
}

.cta-band { background: var(--ground); }
.cta-inner {
  padding-top: var(--rhythm-moment);
  padding-bottom: var(--rhythm-moment);
  text-align: center;
}
/* desktop (8/24 Phi): the tile-only plate has no device below, so the copy
   sits centered in the band instead of floating in the old sky zone */
@media (min-width: 768px) {
  .cta-inner { padding-top: 280px; padding-bottom: 280px; }
}
/* 22ch: the v2 headline breaks as two lines, not three */
.cta-inner .h2 { margin-left: auto; margin-right: auto; max-width: 22ch; }
.cta-avail {
  margin: var(--rhythm-head) auto 0;
  max-width: 42ch;
  color: rgba(251, 250, 244, 0.78);
  font-size: 14px;
}
.cta-inner .btn { margin-top: var(--rhythm-4); }

.footer {
  background: #ece9e4;
  color: #27251e;
  padding: 48px 0 0;
}
@media (min-width: 1024px) { .footer { padding-top: 56px; } }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 64px;
    row-gap: 48px;
  }
  .footer-cols { grid-row: span 2; }
  .footer-meta { align-self: end; }
}
.footer-logo {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.footer-logo:hover { opacity: 0.8; }
.footer-logo:focus-visible { outline: 2px solid rgba(39, 37, 30, 0.6); outline-offset: 4px; }
.footer-symbol {
  width: 28px;
  height: 30px;
  background: currentColor;
  -webkit-mask: url("assets/symbol.svg") center / contain no-repeat;
  mask: url("assets/symbol.svg") center / contain no-repeat;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
}
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .footer-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 32px; }
}
.footer-col-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.footer-col-body { margin-top: 24px; display: flex; flex-direction: column; gap: 32px; }
.footer-sub {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(39, 37, 30, 0.5);
}
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-list a {
  font-size: 16px;
  line-height: 1.35;
  text-decoration: none;
}
.footer-list a:hover { opacity: 0.7; }
.footer-legal {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(39, 37, 30, 0.6);
}
.footer-legal-line { display: block; }
.footer-legal-line + .footer-legal-line { margin-top: 6px; }
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: #27251e; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .hero { padding-top: 80px; }
}

/* ============ Delegation scene: ported from hybrid-ai-lp (R90/R92) ============ */
/* easing aliases for ported rules */
:root { --e-respond: var(--respond); --e-reveal: cubic-bezier(0,0,.2,1); --e-settle: var(--ease); }
.scene { margin: 0; }
.hero .scene--hero { margin-top: 72px; }
.apx-shell { max-width: 920px; margin: 0 auto; }
.apx {
  font-family: var(--font-sans);
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  min-height: 420px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface-base);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--fg-primary);
}
.apx .ic { flex: none; }
.apx-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 0 6px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--layer-subtler);
}
/* Windows 11 chrome: nav cluster left, caption controls right (from the
   Windows app Figma / GTM storyboard). No traffic lights. */
.apx-bar-nav { display: flex; align-items: center; gap: 14px; color: var(--fg-tertiary); }
.apx-caption { display: flex; align-items: stretch; margin-left: auto; color: var(--fg-secondary); }
.apx-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 36px;
  margin: -6px 0;
}
.apx-bar-title {
  font-size: 11px;
  font-weight: 550;
  color: var(--fg-secondary);
  margin: 0 auto;
  transform: translateX(-16px);
  /* a session title is title-bar chrome: one line, clipped like the app's */
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apx-bar-tools { display: flex; gap: 10px; color: var(--fg-tertiary); }
.apx-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 0; }
.apx-main { min-height: 0; }
.apx-side {
  border-right: 1px solid var(--border-soft);
  background: var(--layer-subtler);
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  /* the sidebar is fixture chrome; it must never drive the window height */
  min-height: 0;
  overflow: hidden;
}
.apx-side-top { display: flex; justify-content: space-between; align-items: center; color: var(--fg-secondary); padding: 2px 6px 10px; }
.apx-mark { color: var(--fg-primary); }
.apx-nav { display: grid; gap: 1px; }
.apx-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  color: var(--fg-secondary);
  font-weight: 520;
}
.apx-nav-item .ic { color: var(--fg-tertiary); }
.apx-side-label {
  margin: 8px 6px 2px;
  font-size: 10px;
  font-weight: 550;
  color: var(--fg-tertiary);
}
.apx-recents { display: grid; gap: 1px; }
.apx-recent {
  padding: 3.5px 6px;
  border-radius: 6px;
  color: var(--fg-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apx-recent.is-active {
  background: var(--surface-raised);
  color: var(--fg-primary);
  font-weight: 550;
  box-shadow: 0 1px 2px var(--layer-subtle), 0 0 0 0.5px var(--border-soft);
}
.apx-main { display: grid; grid-template-rows: 1fr auto; min-height: 0; }
/* production threads run a centered content column, not edge-to-edge --
   the column, not the pane, is the reading surface */
.apx-thread {
  justify-self: center;
  width: 100%;
  max-width: 680px;
  padding: 14px 20px 8px;
  display: grid;
  gap: 8px;
  align-content: start;
}
/* production feel (8/18 Phi): the thread scrolls itself to the newest
   beat, so the persistent scrollbar rail read as a fat sidebar strip.
   Hide the rail entirely, like overlay scrollbars in the shipping app. */
.apx-thread { scrollbar-width: none; }
.apx-thread::-webkit-scrollbar { width: 0; height: 0; display: none; }
.apx-msg {
  justify-self: end;
  max-width: 420px;
  background: var(--layer-subtle);
  border-radius: 12px 12px 4px 12px;
  padding: 8px 12px;
  font-size: 12.5px;
  /* 1.7, not 1.5: inline chips fill the line box, leading carries the air */
  line-height: 1.7;
  color: var(--fg-secondary);
}
.apx-working {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--fg-secondary);
}
.apx-working .apx-spin { color: var(--fg-tertiary); animation: apx-rot 1.6s linear infinite; }
@keyframes apx-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .apx-working .apx-spin { animation: none; } }
.apx-working b { font-weight: 640; font-variant-numeric: tabular-nums; }
.apx-steps { display: grid; gap: 6px; padding-left: 4px; }
.apx-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-secondary);
  min-height: 20px;
}
.apx-step .ic { color: var(--fg-tertiary); }
.apx-step--check .ic { color: var(--fg-tertiary); }
.apx-redact {
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0;
  font-size: 10px;
  color: var(--fg-tertiary);
  background: var(--surface-raised);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  padding: 2.5px 8px;
  white-space: nowrap;
}
.apx-receipt {
  margin-left: 21px;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 4px 22px;
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 8px 13px;
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0;
}
.apx-r-k { font-family: var(--font-sans); font-size: 11px; color: var(--fg-tertiary); align-self: center; }
.apx-r-v { font-size: 11.5px; font-weight: 560; color: var(--fg-primary); font-variant-numeric: tabular-nums; }
/* Final output = Computer output module: contained block, expand affordance
   top-right, document prose clipped as the preview (storyboard p14 inside). */
.apx-out {
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 13px;
  box-shadow: 0 2px 10px rgba(20, 24, 26, 0.05);
}
.apx-out-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-secondary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.apx-out-title { font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--fg-primary); }
.apx-out-exp { margin-left: auto; display: inline-flex; color: var(--fg-tertiary); flex: none; }
.apx-out-preview {
  padding-top: 8px;
  display: grid;
  gap: 6px;
  max-height: 64px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 98%);
}
.apx-a-p {
  margin: 0;
  padding-left: 18px;
  position: relative;
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-secondary);
}
.apx-a-num { position: absolute; left: 0; color: var(--fg-tertiary); }
.apx-cite { color: #12857a; }
.apx-dock { justify-self: center; width: min(100% - 28px, 680px); margin: 6px 0 11px; }
/* "You're working locally" strip, from the GTM storyboard: grey band that
   peeks above the composer card. */
.apx-local {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 17px;
  margin-bottom: -10px;
  background: var(--layer-subtle);
  border-radius: 12px 12px 0 0;
  font-size: 11.5px;
  font-weight: 520;
  color: var(--fg-secondary);
}
.apx-local-info { margin-left: auto; color: var(--fg-tertiary); }
.apx-composer {
  position: relative;
  z-index: 1;
  display: block;
  padding: 10px 14px 9px;
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(20, 24, 26, 0.06);
  color: var(--fg-tertiary);
}
.apx-c-ph { display: block; font-size: 12.5px; color: var(--fg-tertiary); padding: 0 2px 12px; }
.apx-c-row { display: flex; align-items: center; gap: 12px; }
.apx-c-computer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--fg-secondary);
}
.apx-c-spacer { flex: 1; }
.apx-c-sub {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: var(--surface-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.apx-c-sub i {
  width: 1.5px;
  border-radius: 1px;
  background: var(--surface-base);
}
.apx-c-sub i:nth-child(1) { height: 6px; }
.apx-c-sub i:nth-child(2) { height: 10px; }
.apx-c-sub i:nth-child(3) { height: 6px; }
.apx-c-modelwrap { position: relative; display: inline-flex; }
.apx-c-model {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 11px;
  font-weight: 540;
  color: var(--fg-secondary);
  background: var(--layer-subtle);
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
  cursor: pointer;
}
.apx-c-model:hover { background: var(--border-soft); }
.apx-c-model:focus-visible { outline: 2px solid var(--turquoise-200, #17b8a6); outline-offset: 2px; }
.apx-c-suffix { color: var(--fg-tertiary); }
.apx-c-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  right: -8px;
  z-index: 5;
  min-width: 248px;
  display: grid;
  gap: 8px;
  padding: 8px;
  background: var(--surface-raised);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(20, 24, 26, 0.18), 0 2px 8px rgba(20, 24, 26, 0.08);
}
.apx-c-menu[hidden] { display: none; }
/* option A (8/17): the thread renders only landed beats at every width;
   the window hugs the live scene instead of reserving the full final
   layout. Desktop floor 420 keeps sparse beats from collapsing. */
.apx-thread [data-ax]:not(.is-live) { display: none; }
/* 8/17 Phi: "the taller it gets the site moves" -- a hugging window shifts
   the page as beats land. Desktop gets the mobile fix: a FIXED app viewport
   sized to the fullest beat, so beats swap inside a stable frame and the
   page height never changes. */
@media (min-width: 700px) {
  .apx { height: 520px; min-height: 0; }
  .apx-body, .apx-main { min-height: 0; }
  .apx-thread { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
}
.apx-m-row--wrap { white-space: normal; line-height: 1.4; }
.apx-m-manage {
  padding: 2px 8px 4px;
  font-size: 11px;
  font-weight: 520;
  color: var(--fg-tertiary);
}
.apx-m-desc {
  margin: 0;
  padding: 1px 8px 5px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--fg-tertiary);
  display: none;
}
.apx-m-desc.is-on { display: block; }
.apx-m-group {
  background: var(--layer-subtler);
  border-radius: 10px;
  padding: 4px;
}
.apx-m-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 6px 8px 4px;
  font-size: 10.5px;
  font-weight: 620;
  color: var(--fg-primary);
}
.apx-m-head .ic { color: var(--fg-tertiary); }
.apx-m-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 520;
  color: var(--fg-secondary);
  white-space: nowrap;
}
/* model marks were recolored to light ink for the dark feature cards;
   pull them down to ink for the light menu */
.apx-m-row img { filter: brightness(0.32); }
.apx-m-tail {
  position: absolute;
  bottom: -5px;
  right: 56px;
  width: 12px;
  height: 12px;
  background: var(--surface-raised);
  transform: rotate(45deg);
  border-radius: 2px;
}
.apx-c-menu [role="option"] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--fg-secondary);
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 7px 9px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.apx-c-menu [role="option"] .apx-m-tag { margin-left: 14px; }
.apx-c-menu [role="option"]:hover { background: var(--layer-subtle); }
.apx-c-menu [role="option"]:focus-visible { outline: 2px solid var(--turquoise-200, #17b8a6); outline-offset: -2px; }
.apx-m-check { margin-left: auto; color: #12857a; visibility: hidden; flex: none; }
/* 8/20 NVDA: Nemotron ships later; it stays in the menu as a quiet, non-selectable row */
.apx-m-soon {
  margin-left: auto; flex: none;
  font-size: 10px; font-weight: 550;
  color: var(--fg-tertiary);
  background: var(--layer-subtle);
  border-radius: 999px;
  padding: 2.5px 8px;
  white-space: nowrap;
}
.apx-c-menu [aria-disabled="true"] { cursor: default; }
.apx-c-menu [aria-disabled="true"] > .ic,
.apx-c-menu [aria-disabled="true"] > span:not(.apx-m-soon) { opacity: 0.55; }
.apx-c-menu [aria-selected="true"] .apx-m-check { visibility: visible; }
.apx-c-menu [aria-selected="true"] { color: var(--fg-primary); }
.apx-m-tag {
  margin-left: auto;
  font-size: 9px;
  font-weight: 550;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 1.5px 7px;
}
.apx-c-stop {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: var(--surface-inverse);
  position: relative;
}
.apx-c-stop::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 1.5px;
  background: var(--surface-base);
}
@media (max-width: 699.98px) {
  .apx-body { grid-template-columns: minmax(0, 1fr); }
  .apx-side { display: none; }
  .apx-msg { max-width: 88%; }
  /* step rows: icon | wrapping text | chevron. Flex-wrap orphaned the icon
     and chevron onto their own lines when the label broke. */
  .apx-step { display: grid; grid-template-columns: 13px minmax(0, 1fr) auto; align-items: start; }
  .apx-step .ic:first-child { margin-top: 2px; }
  .apx-step .apx-exp { margin-top: 2.5px; }
  .apx-step .apx-redact { grid-column: 2; justify-self: start; margin-top: 4px; }
  .apx-receipt { grid-template-columns: auto auto; gap: 4px 14px; margin-left: 0; }
  .apx-c-modelwrap { display: none; }
  /* the desktop window reserves the full final layout so nothing reflows;
     at phone width that reads as a tall empty card. Fixed app viewport:
     unlanded beats take no space, and the thread scrolls inside the window
     as steps stream in (the engine follows the newest beat), so the page
     height never changes. clamp: fits with context on an SE (~480px)
     without ballooning on tall phones. */
  .apx {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: clamp(420px, 72svh, 560px);
  }
  .apx-body, .apx-main { min-height: 0; }
  .apx-thread { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
}
.apx-working.is-done .apx-spin { animation-play-state: paused; }

/* R90 accuracy pass: titlebar back, expanders, sub-steps, sidebar footer */
.apx-bar-back { color: var(--fg-tertiary); }
.apx-bar-title { margin: 0; transform: none; }
.apx-bar-tools { margin-left: auto; }
.apx-exp { margin-left: 2px; color: var(--fg-tertiary); }
.apx-step--sub { margin-left: 21px; }
.apx-side-user {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 8px 10px;
  font: inherit;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0 0 0 10px;
  background: transparent;
  font-size: 11px;
  font-weight: 550;
  color: var(--fg-secondary);
  cursor: pointer;
}
.apx-side-user:hover { background: var(--layer-subtle); }
.apx-side-user:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.apx-kbd {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 520;
  color: var(--fg-tertiary);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--surface-raised);
}
.apx-user-meta { display: grid; line-height: 1.25; }
.apx-user-plan { font-style: normal; font-weight: 450; font-size: 10px; color: var(--fg-tertiary); }
/* inline-block: the global .ic{display:block} was stacking the folder
   icon above the project name, doubling those rows' height */
.apx-recent .ic { display: inline-block; vertical-align: -1px; margin-right: 3px; color: var(--fg-tertiary); }
.apx-avatar {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Sam's profile opens a page-level offer, separate from the hero animation clock. */
.enterprise-modal[hidden] { display: none; }
.enterprise-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--ground) 76%, transparent);
}
.enterprise-modal__card {
  width: min(100%, 600px);
  padding: 36px 40px 32px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--ground) 72%, transparent);
  color: var(--text);
}
.enterprise-modal__topline,
.enterprise-modal__actions {
  display: flex;
  align-items: center;
}
.enterprise-modal__topline { justify-content: space-between; margin-bottom: 28px; }
.enterprise-modal__logo {
  display: block;
  width: min(220px, calc(100% - 48px));
  height: auto;
}
.enterprise-modal__card { width: min(100%, 600px); }
.enterprise-modal__later,
.enterprise-modal__cta {
  border-radius: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.enterprise-modal__later {
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
/* product ModalCloseButton: 32px secondary X, top-right of the panel */
.enterprise-modal__card { position: relative; }
.enterprise-modal__close {
  position: absolute;
  top: 20px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.enterprise-modal__close:hover { background: var(--layer-subtle); }
.enterprise-modal__close:focus-visible { outline: 2px solid var(--turquoise-200); outline-offset: 2px; }
.enterprise-modal__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.enterprise-modal__description {
  margin: 16px 0 28px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}
.enterprise-modal__features {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}
.enterprise-modal__features li {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
}
.enterprise-modal__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 1px;
  border: 1px solid var(--line);
  background: var(--layer-subtle);
  color: var(--text);
}
.enterprise-modal__copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.enterprise-modal__features strong {
  font-weight: 550;
}
.enterprise-modal__copy span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.enterprise-modal__actions {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
}
.enterprise-modal__later,
.enterprise-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  line-height: 1;
}
.enterprise-modal__cta {
  background: var(--teal);
  color: var(--paper);
  text-decoration: none;
}
.enterprise-modal__later:hover { background: var(--layer-subtle); }
.enterprise-modal__cta:hover { background: var(--turquoise-200); color: var(--ink); }
.enterprise-modal__close:focus-visible,
.enterprise-modal__later:focus-visible,
.enterprise-modal__cta:focus-visible {
  outline: 2px solid var(--turquoise-200);
  outline-offset: 3px;
}
body.enterprise-modal-open { overflow: hidden; }
@media (max-width: 480px) {
  .enterprise-modal { padding: 16px; }
  .enterprise-modal__card { padding: 24px 20px 22px; }
  .enterprise-modal__title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-modal,
  .enterprise-modal * { transition: none; }
}

/* the scene furniture (chips, rail, note) shares the window's 920px axis --
   one grid, one left edge */
.scene-steps-wrap {
  max-width: 920px;
  margin: var(--rhythm-6) auto 0;
}
/* use-case chips: the scenario menu made tappable. Quiet controls --
   hairline, no teal (teal stays CTA/status), selected = raised + primary */
/* scenario switcher, ledger grammar (8/17 Phi pick, option A): full-width
   numbered row echoing the features ledger. Active scenario in ink; the
   thin rail under the active cell fills with the rotation timer (--uc-p,
   set by the scenario engine each frame). */
/* hub tablist grammar (Zeyao 8/18, perplexity.ai/hub/products/search):
   hairline rounded-full container, quiet tabs, active = filled light pill */
.uc-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: max-content;
  margin: 0 auto 8px;
  padding: 6px;
  border: 1px solid rgba(255, 254, 251, 0.2);
  border-radius: 999px;
  background: rgba(214, 213, 212, 0.04);
}
.uc-chip {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: rgba(237, 235, 228, 0.55);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
.uc-chip .uc-ic { flex: none; opacity: 0.8; }
.uc-chip:hover { color: rgba(237, 235, 228, 0.85); }
.uc-chip[aria-pressed="true"] {
  color: #171615;
  background: #fffefb;
}
.uc-progress {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: rgba(237, 235, 228, 0.7);
  transform: scaleX(var(--uc-p, 0));
  transform-origin: left center;
  visibility: hidden;
  border-radius: 1px;
}
.uc-chip[aria-pressed="true"] .uc-progress { visibility: hidden; } /* compact pills: pressed chrome is enough */
.uc-chip:focus-visible { outline: 2px solid rgba(237, 235, 228, 0.7); outline-offset: -2px; }
/* mobile (8/17 Phi pick, option B): scenarios stack as full-width ledger
   rows -- one line count everywhere, one left edge, the rotation rail on
   the active row's own hairline */
@media (max-width: 699.98px) {
  .uc-row { width: 100%; justify-content: stretch; }
  .uc-chip { flex: 1 1 auto; justify-content: center; }
}
/* scroll cue: appears only when a tap starts a run out of view; the
   IntersectionObserver retires it the moment the demo is visible */
.uc-cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 6px 11px;
  font: inherit;
  font-size: 11.5px;
  line-height: 1;
  color: rgba(237, 235, 228, 0.62);
  background: rgba(237, 235, 228, 0.04);
  border: 1px solid rgba(214, 213, 212, 0.16);
  border-radius: 8px;
  cursor: pointer;
}
.uc-cue[hidden] { display: none; }
.uc-cue:hover { color: rgba(237, 235, 228, 0.85); border-color: rgba(214, 213, 212, 0.3); }
.uc-cue:focus-visible { outline: 2px solid rgba(237, 235, 228, 0.7); outline-offset: 2px; }
.uc-cue .ic { transform: rotate(-90deg); }
@media (prefers-reduced-motion: no-preference) {
  /* two quiet nudges up, long rest -- transform-only */
  .uc-cue .ic { animation: cue-nudge 2.4s ease-in-out infinite; }
}
@keyframes cue-nudge {
  0%, 64%, 100% { transform: rotate(-90deg) translateX(0); }
  74%, 88% { transform: rotate(-90deg) translateX(2px); }
  81% { transform: rotate(-90deg) translateX(0.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .uc-chip { transition: none; }
}


/* --- 2. THE COUNT ----------------------------------------------------------

/* ============ ComputerSpinner: verbatim from ppl-ai/agi ask/computer/branding ============ */
/* Easing curves */
:root {
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
}

/* ComputerSpinner styles */
.computer-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Eye transform origins */
.computer-eye-l {
  transform-origin: 204.546px 136.363px;
}

.computer-eye-r {
  transform-origin: 295.454px 136.363px;
}

/* Checkmark path - hidden by default, drawn via stroke-dashoffset */
.computer-check {
  stroke-dasharray: 191;
  stroke-dashoffset: 191;
  opacity: 0;
}
/* THINKING STATE: 3-phase gaze animation */
.computer-thinking .computer-eye-l {
  animation:
    thinking-gaze 6.87s var(--ease-in-out-quart) infinite,
    thinking-blink-l 6.87s linear infinite;
}

.computer-thinking .computer-eye-r {
  animation:
    thinking-gaze 6.87s var(--ease-in-out-quart) 40ms infinite,
    thinking-blink-r 6.87s linear infinite;
}

@keyframes thinking-gaze {
  0% {
    transform: translateX(0);
  }
  13.1% {
    transform: translateX(-50px);
  }
  18.2% {
    transform: translateX(-50px);
  }
  34.2% {
    transform: translateX(55px);
  }
  38.6% {
    transform: translateX(55px);
  }
  48.8% {
    transform: translateX(-25px);
  }
  51.7% {
    transform: translateX(-25px);
  }
  56.1% {
    transform: translateX(30px);
  }
  57.3% {
    transform: translateX(30px);
  }
  60.9% {
    transform: translateX(-18px);
  }
  61.8% {
    transform: translateX(-18px);
  }
  66.5% {
    transform: translateX(40px);
  }
  67.5% {
    transform: translateX(40px);
  }
  70.7% {
    transform: translateX(-12px);
  }
  71.4% {
    transform: translateX(-12px);
  }
  74% {
    transform: translateX(8px);
  }
  78.4% {
    transform: translateX(8px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Blinks at ~1.25s, ~3.55s, ~5.98s within the 6.87s gaze cycle */
@keyframes thinking-blink-l {
  0%,
  17% {
    opacity: 1;
  }
  18.2% {
    opacity: 0;
  }
  19.5%,
  50.5% {
    opacity: 1;
  }
  51.7% {
    opacity: 0;
  }
  53%,
  85.8% {
    opacity: 1;
  }
  87% {
    opacity: 0;
  }
  88.5%,
  100% {
    opacity: 1;
  }
}

/* Right eye: ~40ms stagger (≈0.6% of 6.87s) later than left */
@keyframes thinking-blink-r {
  0%,
  17.6% {
    opacity: 1;
  }
  18.8% {
    opacity: 0;
  }
  20.1%,
  51.1% {
    opacity: 1;
  }
  52.3% {
    opacity: 0;
  }
  53.6%,
  86.4% {
    opacity: 1;
  }
  87.6% {
    opacity: 0;
  }
  89.1%,
  100% {
    opacity: 1;
  }
}

/* DONE STATE: eyes → checkmark */
.computer-done .computer-eye-l,
.computer-done .computer-eye-r {
  animation: done-eye-close 300ms var(--ease-in-out-cubic) forwards;
}

.computer-done .computer-check {
  animation: done-check-draw 600ms var(--ease-out-quint) 350ms forwards;
}

@keyframes done-eye-close {
  to {
    transform: scaleY(0);
  }
}

@keyframes done-check-draw {
  from {
    stroke-dashoffset: 191;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* page-local sizing: 16px in the working row; state flip mirrors is-done */
.apx-cspin { width: 16px; height: 16px; }
.apx-cspin svg { width: 16px; height: 16px; display: block; }

/* reduced motion: hold resolved states, mirroring computer-no-mount-animation */
@media (prefers-reduced-motion: reduce) {
  .computer-thinking .computer-eye-l,
  .computer-thinking .computer-eye-r { animation: none; }
  .computer-done .computer-eye-l,
  .computer-done .computer-eye-r { transform: scaleY(0); animation: none; }
  .computer-done .computer-check { stroke-dashoffset: 0; opacity: 1; animation: none; }
}

/* ============ Imagery: three plates, fades into the ground ============
   Grammar from hybrid-ai-lp hero-silk/cta-silk: image layer + scrim layer
   in the ground color, so every edge dissolves into #040A0D. */

.hero > .container { position: relative; z-index: 1; }

/* cta: the light-streak frame behind the closing ask */
.cta-band { position: relative; overflow: hidden; }
.cta-scrim {
  /* 8/19 Phi: retired — the tile frames carry true-black headroom, so the
     copy sits directly on the photograph with no guard */
  display: none;
}
.cta-inner { position: relative; z-index: 1; }

/* hwd backdrop bled 15px past the viewport on phones */
.hero { overflow-x: clip; overflow-y: visible; }



/* Film grain over the whole page. Ported verbatim from the Computer for
   Windows LP (agi marketing: ComputerForWindowsPage.module.css .cfw-grain):
   feTurbulence fractalNoise bf=0.9, 3 octaves, seed 7, desaturated,
   200px tile, 11% opacity, fixed above all content, pointer-events none. */
.page-grain {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.11;
  /* iOS Safari: an uncomposited fixed overlay repaints during momentum
     scroll and lags behind the page, exposing a hard grain/no-grain seam
     mid-content (Phi photographed it on the features rows). Pinning the
     layer in the compositor keeps it glued to the viewport. */
  transform: translateZ(0);
  will-change: transform;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22g%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%20seed%3D%227%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20filter%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* 8/19: stacked-cards retired with the ledger restyle. Mobile is now open
   sequential entries in the hardware grammar (see .setup-steps above). */

/* Feature-card isometric motifs + content-rooted loops.
   Job: explain. Register: Curiosity (slow instrument loops). GPU props only.
   Each loop is a verb from the card copy; paused offscreen and when the tab
   is hidden (.is-live). Reduced motion holds the resting pose. */
.feat-iso {
  --iso-ink: rgba(214, 213, 212, 0.72);
  --iso-hatch: rgba(214, 213, 212, 0.34);
  --iso-guide: rgba(214, 213, 212, 0.5);
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  margin: 0;
  padding-top: 10px;
  overflow: hidden;
  pointer-events: none;
  /* same local lighting as the fragment scenes: canvas bg renders behind the ink */
  background: radial-gradient(52% 58% at 50% 54%, rgba(237, 235, 228, 0.045) 0%, rgba(237, 235, 228, 0.012) 55%, transparent 76%);
}
.feat-iso polygon,
.feat-iso polyline,
.feat-iso line {
  fill: none;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.feat-iso .iso-axis { stroke: var(--iso-ink); stroke-width: 1.05px; }
.feat-iso .iso-s { stroke: var(--iso-ink); stroke-width: 0.7px; }
.feat-iso .iso-h { stroke: var(--iso-hatch); stroke-width: 0.35px; }
.feat-iso .iso-g { stroke: var(--iso-guide); stroke-width: 0.45px; }
.feat-iso .iso-dot {
  fill: var(--iso-ink);
  stroke: none;
}
@media (max-width: 699.98px) {
  .feat-iso {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 0 2px;
    --iso-ink: rgba(214, 213, 212, 0.88);
    --iso-hatch: rgba(214, 213, 212, 0.42);
    --iso-guide: rgba(214, 213, 212, 0.62);
  }
  .feat-iso .iso-axis { stroke-width: 1.15px; }
  .feat-iso .iso-s { stroke-width: 0.8px; }
  .feat-iso .iso-h { stroke-width: 0.4px; }
  .feat-iso .iso-g { stroke-width: 0.5px; }
}
/* Each loop enacts the card. Resting pose is the finished drawing.
   Motion starts only when #features is in view. Hatch never crawls.
   --iso-t staggers cards without flattening the verb's own sequence. */
.feat:nth-child(1) .feat-iso { --iso-t: 0s; }
.feat:nth-child(2) .feat-iso { --iso-t: 0.9s; }
.feat:nth-child(3) .feat-iso { --iso-t: 1.8s; }
.feat:nth-child(4) .feat-iso { --iso-t: 2.7s; }
.feat:nth-child(5) .feat-iso { --iso-t: 3.6s; }
.feat:nth-child(6) .feat-iso { --iso-t: 4.5s; }
.feat-iso .iso-core,
.feat-iso .iso-arm,
.feat-iso .iso-tick,
.feat-iso .iso-inner,
.feat-iso .iso-sat,
.feat-iso .iso-layer {
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* 1 LOCAL HARNESS — the model (mind) stays. The harness is the apparatus
   around it on the same plate: planner, router, orchestrator. Links draw
   into the model, then each organ answers. This is not an install drop. */
.feat-iso[data-feat="local"] .iso-arm { opacity: 0.25; }
.feat-iso[data-feat="local"] .iso-arm .iso-g {
  stroke-dasharray: 56;
  stroke-dashoffset: 56;
}
.feat-iso[data-feat="local"].is-live .iso-arm .iso-g {
  animation: iso-harness-route 8s linear infinite;
  animation-delay: var(--iso-t, 0s);
}
.feat-iso[data-feat="local"].is-live .iso-arm {
  animation: iso-harness-arm 8s var(--unfold) infinite;
  animation-delay: var(--iso-t, 0s);
}
.feat-iso[data-feat="local"].is-live .iso-arm--route,
.feat-iso[data-feat="local"].is-live .iso-arm--route .iso-g {
  animation-delay: calc(var(--iso-t, 0s) + 0.7s);
}
.feat-iso[data-feat="local"].is-live .iso-arm--orch,
.feat-iso[data-feat="local"].is-live .iso-arm--orch .iso-g {
  animation-delay: calc(var(--iso-t, 0s) + 1.4s);
}
@keyframes iso-harness-route {
  0%, 6% { stroke-dashoffset: 56; }
  20%, 58% { stroke-dashoffset: 0; }
  74%, 100% { stroke-dashoffset: 56; }
}
@keyframes iso-harness-arm {
  0%, 14% { opacity: 0.25; }
  26%, 58% { opacity: 1; }
  74%, 100% { opacity: 0.25; }
}

/* 2 ESCALATE — a task climbs the axis; cloud ribs light as it arrives. */
.feat-iso[data-feat="escalate"] .iso-tick { opacity: 0; }
.feat-iso[data-feat="escalate"] .iso-cloud polygon { opacity: 0.25; }
.feat-iso[data-feat="escalate"].is-live .iso-tick {
  animation: iso-climb 8s linear infinite;
  animation-delay: var(--iso-t, 0s);
}
.feat-iso[data-feat="escalate"].is-live .iso-cloud polygon {
  animation: iso-rib 8s var(--unfold) infinite;
  animation-delay: var(--iso-t, 0s);
}
.feat-iso[data-feat="escalate"].is-live .iso-cloud polygon:nth-child(1) { animation-delay: calc(var(--iso-t, 0s) + 0.15s); }
.feat-iso[data-feat="escalate"].is-live .iso-cloud polygon:nth-child(2) { animation-delay: calc(var(--iso-t, 0s) + 0.35s); }
.feat-iso[data-feat="escalate"].is-live .iso-cloud polygon:nth-child(3) { animation-delay: calc(var(--iso-t, 0s) + 0.55s); }
.feat-iso[data-feat="escalate"].is-live .iso-cloud polygon:nth-child(4) { animation-delay: calc(var(--iso-t, 0s) + 0.75s); }
/* Up, then home. Escalation is a trip, not an upload. */
@keyframes iso-climb {
  0%, 8% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  32% { transform: translateY(-44px); opacity: 1; }
  40% { transform: translateY(-44px); opacity: 1; }
  62% { transform: translateY(0); opacity: 1; }
  70%, 100% { transform: translateY(0); opacity: 0; }
}
@keyframes iso-rib {
  0%, 12% { opacity: 0.2; }
  38%, 70% { opacity: 1; }
  86%, 100% { opacity: 0.2; }
}

/* 4 CONNECTORS — ports on the orchestrator plate, already yours.
   Not an MCP star. Short stubs light one at a time. */
.feat-iso[data-feat="connectors"] .iso-sat { opacity: 0.25; }
.feat-iso[data-feat="connectors"] .iso-sat .iso-g {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
}
.feat-iso[data-feat="connectors"].is-live .iso-sat .iso-g {
  animation: iso-route 8s linear infinite;
  animation-delay: var(--iso-t, 0s);
}
.feat-iso[data-feat="connectors"].is-live .iso-sat {
  animation: iso-port 8s var(--unfold) infinite;
  animation-delay: var(--iso-t, 0s);
}
.feat-iso[data-feat="connectors"].is-live .iso-sat--2,
.feat-iso[data-feat="connectors"].is-live .iso-sat--2 .iso-g {
  animation-delay: calc(var(--iso-t, 0s) + 1.1s);
}
.feat-iso[data-feat="connectors"].is-live .iso-sat--3,
.feat-iso[data-feat="connectors"].is-live .iso-sat--3 .iso-g {
  animation-delay: calc(var(--iso-t, 0s) + 2.2s);
}
@keyframes iso-route {
  0%, 6% { stroke-dashoffset: 36; }
  18%, 52% { stroke-dashoffset: 0; }
  68%, 100% { stroke-dashoffset: 36; }
}
@keyframes iso-port {
  0%, 14% { opacity: 0.25; }
  24%, 52% { opacity: 1; }
  68%, 100% { opacity: 0.25; }
}

/* 5 BRAIN — memory is portable between runtimes. Shelf stays.
   A packet goes local→shelf, then cloud→local. Not a diary. */
@keyframes iso-mem-up {
  0%, 10% { transform: translate(0, 0); opacity: 0; }
  14% { opacity: 1; }
  36% { transform: translate(8px, -22px); opacity: 1; }
  42%, 100% { transform: translate(8px, -22px); opacity: 0; }
}
@keyframes iso-mem-dn {
  0%, 44% { transform: translate(0, 0); opacity: 0; }
  48% { opacity: 1; }
  70% { transform: translate(6px, 16px); opacity: 1; }
  76%, 100% { transform: translate(6px, 16px); opacity: 0; }
}

/* 6 PERSIST — this session leaves, the next arrives empty.
   The working-state slab never moves. No clock. */
.feat-iso[data-feat="persist"] .iso-session { opacity: 1; }
.feat-iso[data-feat="persist"] .iso-next { opacity: 0; }
.feat-iso[data-feat="persist"].is-live .iso-session {
  animation: iso-session-end 8s var(--unfold) infinite;
  animation-delay: var(--iso-t, 0s);
}
.feat-iso[data-feat="persist"].is-live .iso-next {
  animation: iso-session-next 8s var(--unfold) infinite;
  animation-delay: var(--iso-t, 0s);
}
@keyframes iso-session-end {
  0%, 16% { opacity: 0.9; }
  34%, 100% { opacity: 0.06; }
}
@keyframes iso-session-next {
  0%, 36% { opacity: 0; }
  52%, 78% { opacity: 0.7; }
  92%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .feat-iso .iso-core,
  .feat-iso .iso-arm,
  .feat-iso .iso-g,
  .feat-iso .iso-tick,
  .feat-iso .iso-cloud polygon,
  .feat-iso .iso-inner,
  .feat-iso .iso-dot,
  .feat-iso .iso-sat,
  .feat-iso .iso-layer,
  .feat-iso .iso-pkt,
  .feat-iso .iso-next,
  .feat-iso .iso-session {
    animation: none !important;
    transform: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }
  .feat-iso[data-feat="escalate"] .iso-tick { opacity: 0; }
}

/* ---- Seam system: structural transitions, no scroll-driven motion ----
   Each treatment is paint-level and self-contained per section, so blocks
   stay one-cut movable. Grammar: a seam is either a RAMP (one ground runs
   into the next), a LAP (an object crosses the boundary), or a HAIRLINE
   (dark-on-dark seams get the page's line, not a tone trick). */

/* RAMP into the lift: the hero's ground runs 140px into the use-case
   section instead of hard-swapping at the edge */
/* seamless hand-off (8/17): the hero carries the rising half of this swell
   (.hero::after), so both sides meet at exactly #121211 + warm 0.05 -- no
   step. The falling side runs 260px so the lift arrives gradually. */
#system::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 260px;
  background:
    linear-gradient(to bottom, rgba(206, 124, 60, 0.05), rgba(206, 124, 60, 0) 60%),
    linear-gradient(to bottom, #121211, rgba(18, 18, 17, 0));
  pointer-events: none;
}
/* Keep the section copy above the top seam's paint-only transition. */
/* retired with the marquee; system section uses default heads */
#system .section-head,
#system .container {
  position: relative;
  z-index: 1;
}
/* 8/19 Phi: same line grid as Computer for Windows (.grid-fx__base),
   23px pitch, white 0.035 at 0.5 opacity. Fades top and bottom so it
   arrives out of the hero and dies before features. No teal spotlight. */
.sys-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: 23px 23px;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 120px, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 120px, #000 calc(100% - 120px), transparent 100%);
}
#system { overflow: hidden; }
/* 8/18 Phi: this head recenters on mobile (exception to the 8/17 option E
   left-set mobile heads; the short two-line headline holds the center) */
@media (max-width: 767.98px) {
  #system .section-head { text-align: center; margin: 0 auto; }
  #system .section-head .lede--center { margin-left: auto; margin-right: auto; text-align: center; }
}
/* seam slimmed (8/17): 188px of stacked padding floated the use-cases head
   in dead dark; the swell gradients carry the transition, not empty space */
.hero { padding-bottom: 32px; }
@media (min-width: 1024px) { .hero { padding-bottom: 48px; } }
#system { padding-top: 96px; }
@media (min-width: 1024px) { #system { padding-top: 136px; } }
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(206, 124, 60, 0), rgba(206, 124, 60, 0.05));
  pointer-events: none;
}

/* RAMP + UNDERGLOW (8/17): the lift dissolves into the base ground, and an
   ember underglow peaks ON the seam, fading into both sections -- this half
   rises to the boundary, #features::before carries the decay downward. Two
   halves of one ellipse (same radii, centered on the shared edge), so the
   glow reads continuous while each section owns its own paint. */
/* 8/19 Phi: the ember swell between system and features was the thing —
   a long open sepia field that banded and seamed. Retired. Flat ground;
   page grain is the only texture. */
#system { padding-bottom: 48px; }
@media (min-width: 1024px) { #system { padding-bottom: 64px; } }
#system::after { content: none; }
#system + #features { padding-top: 48px; }
@media (min-width: 1024px) { #system + #features { padding-top: 64px; } }
#features::before { content: none; }
/* no fill at all: the cool-gray surface was muddying the warm band beneath
   it. Cards are hairline + content only; the ground itself is the surface,
   so there is nothing to clash. Hover keeps its spot and shimmer. */
/* harmonized strokes: warm-paper alphas instead of flat cool gray, so the
   band reads through the hairline and each border carries its ground's
   temperature -- frames warmer where the field is warmer, by construction */

/* HAIRLINE: retired 8/17 -- the page's seam doctrine is now "grounds fade,
   they don't cut"; kept for any future seam that must declare a line */
.seam-hairline { border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* DUSKFOLD FIELDS (8/17): deterministic stills from the Duskfold instrument
   (engine R10.1, renderToPixels, t=7.0, drift 0). Top: Nightreach 9e3779b1 on
   nocturne -- cool is the knowing. Bottom: Emberline 5fa7fdee on ember,
   vertically mirrored so the arc builds toward the cream -- warm is the doing.
   Masked to fade into the page grounds; the swell system rides above. */
/* HERO PLATE (8/19 Phi): cinematic dusk-arc stills (MJ), landscape
   desktop / portrait mobile. Scrim guards the copy; mask fades to ground. */
/* HERO PLATE (8/18 perf pass): mobile-first on purpose. The tall crop is the
   default and the landscape crop is the min-width override, so a phone can
   never paint the landscape plate and then swap. The plate URLs carry ?v=
   because both files were replaced under the same names, and the old
   low-quality pair is still sitting in caches. The 24px inline blur-up is the
   bottom layer: same crop, zero requests, so a slow network shows the right
   composition instead of an empty field. The tall plate's horizon band lands
   behind the rail captions with no cover slack to move it, so mobile keeps its
   lower-zone scrim. */
.hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom, rgba(18, 18, 17, 0.55), rgba(18, 18, 17, 0.18) 28%, rgba(18, 18, 17, 0) 48%, rgba(18, 18, 17, 0.4) 68%, rgba(18, 18, 17, 0.78) 86%),
    image-set(url("assets/img/hero-hills-tall.webp?v=20260819aby") type("image/webp"), url("assets/img/hero-hills-tall.jpg?v=20260819aby") type("image/jpeg")) center 18% / cover no-repeat,
    url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAwACADASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAABAUGAwEC/8QAKRAAAgEDAgUCBwAAAAAAAAAAAQIDAAQRBSESIjFBURNhBhQyUnGBwf/EABcBAQEBAQAAAAAAAAAAAAAAAAMCAQT/xAAbEQEBAQEAAwEAAAAAAAAAAAABABECEiExUf/aAAwDAQACEQMRAD8AWFUulIdgkwHK33expeHkhcgkgg+ao9RsI45RJCpCPvnOcGkuoQkYcb52NUgmlGY5G6frskDqspLIe5qkms4r2ETwY4sdOxqBG6H2p78O6wbeUQSHkPmg71tAqCyglhtoVmKuhUBhnofzS7XtOhit5ZEYqQM4rlpqHr2qQthZMdB/K01JHlsH4yc8OKnnpm65/aR2wTWYYqwIODR8Vk8kDbdDkGgCuDSwx0cjidGBIIO1VM15bSxxwSuiysoJDHANJEtjZJ61z9WOVO/7oCWRbhiznDHz0oR10+TJ4nv7UcdiZYbiPyMLw9BU7PalHIx0NeEkuLY5gldPdGrRdRlyfmEWXPcjBrpOiBG//9k=") center 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 98%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 98%);
  pointer-events: none;
}
@media (min-width: 768px) {
  .hero-field {
    background:
      linear-gradient(to bottom, rgba(18, 18, 17, 0.52), rgba(18, 18, 17, 0.16) 36%, rgba(18, 18, 17, 0) 58%),
      image-set(url("assets/img/hero-hills.webp?v=20260819aby") type("image/webp"), url("assets/img/hero-hills.jpg?v=20260819aby") type("image/jpeg")) center 26% / cover no-repeat,
      url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAbADADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAABAUGAwL/xAApEAACAgIBAwIFBQAAAAAAAAABAgMRAAQhBRIxBhMUIjJRcUFhgZGh/8QAFwEBAQEBAAAAAAAAAAAAAAAAAgMBBP/EABsRAAICAwEAAAAAAAAAAAAAAAABAhESITEi/9oADAMBAAIRAxEAPwBFo78mo9UWU8UGII/GVnx3va8bRMbA/kZHrEEILYXpbjxbaEH5boj7jJS3wcddH3WGkn0pGP6rzktHrtJC1DkHLTcjSXVARuGFnFcGqeydY1pkXix5ObDasMukqwINY/8AS8qwbyMxoMCpvFM0DKx7hzfOG9OiYDvC3XjFO4qyd2CBr884Xp64NzSAqi83nfR4I5p1EihheEdcJVzGvCLwFHgZCUvWKOmMdZMDn3Nkz+/BKy8UO0+B9s11/UG1AxMkcct+bFH/ADFYZlNqSM0+tbYAn8ZVeVRFu3Yc+7q7crMwMBY3R5H9416I5RvajUSKT3ftks4A8ZR+k3ZJWVTQYcjE3lpgqj//2Q==") center 34% / cover no-repeat;
  }
}
/* Co-brand lockup in the closer (8/22): marks 28px, gap 28px each side
   (>= one Perplexity symbol height and >= NVIDIA n-height), hairline divider.
   White one-color marks on the flat black copy zone only. */
.cta-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 44px;
}
.cta-lockup img { display: block; height: 28px; width: auto; opacity: 0.92; }
/* full wordmark logos: equalize optical wordmark height, not box height */
.cta-lockup .cta-lockup-pplx { height: 22px; }
.cta-lockup-div { width: 1px; height: 30px; background: rgba(237, 235, 228, 0.3); }
/* CLOSER PLATE (8/19 Phi): the Spark on the brushed-tile floor. Both frames
   were shot with true-black headroom, so there is no mask, no scrim, no
   overlay — the image top merges straight into the page ground and the copy
   sits on the photograph's own black. Landscape frame on desktop; the
   portrait frame lets mobile go full-bleed too (no split copy/plate). */
.cta-field {
  position: absolute;
  inset: 0;
  background: url("assets/img/spark-tiles.webp") center bottom / cover no-repeat;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .cta-field { background-image: url("assets/img/spark-tiles-m.webp"); }
  .cta-inner { padding-bottom: 430px; }
}

/* SEAM SWELLS (8/17): every remaining boundary carries a quiet temperature
   rise that peaks on the seam and decays into both neighbors, so scrolling
   reads as one gradual temperature journey. The marquee band (0.13) stays
   the loudest moment; swells sit at 0.05-0.06. */
#features::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: linear-gradient(to bottom, rgba(206, 124, 60, 0), rgba(206, 124, 60, 0.06));
  pointer-events: none;
}
#setup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(206, 124, 60, 0.06), rgba(206, 124, 60, 0));
  pointer-events: none;
}
/* 8/19: setup's bottom ember swell retired — it flipped temperature exactly
   on the photo boundary and read as a cut; the closer's ground dissolve
   owns this seam now */

/* RAMP into the CTA image: the band's streak field fades up from the
   previous ground instead of starting at full strength on the edge */
/* image retired (8/17): the CTA is a gradient-only surface. The setup swell
   hands in at the top; the band's own warmth gathers toward the footer and
   peaks at the cream edge, so the light resolves into the paper. */
.cta-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* 8/19 Phi: long eased dissolve — the page ground develops into the
     photograph over 420px on a smoothstep curve (no slope kinks, which
     read as lines on OLED). The photo emerges; nothing arrives at an edge. */
  height: 420px;
  background: linear-gradient(
    to bottom,
    rgba(18, 18, 17, 1) 0%,
    rgba(18, 18, 17, 0.972) 10%,
    rgba(18, 18, 17, 0.896) 20%,
    rgba(18, 18, 17, 0.784) 30%,
    rgba(18, 18, 17, 0.648) 40%,
    rgba(18, 18, 17, 0.5) 50%,
    rgba(18, 18, 17, 0.352) 60%,
    rgba(18, 18, 17, 0.216) 70%,
    rgba(18, 18, 17, 0.104) 80%,
    rgba(18, 18, 17, 0.028) 90%,
    rgba(18, 18, 17, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.cta-band::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(to bottom, rgba(206, 124, 60, 0), rgba(206, 124, 60, 0.13));
  z-index: 1;
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 2; }

/* footer socials (production parity: X, Discord, Instagram, LinkedIn, YouTube) */
.footer-social { display: flex; gap: 16px; margin: 0 0 14px; }
.footer-social a { color: rgba(39, 37, 30, 0.55); transition: color 140ms ease; }
.footer-social a:hover { color: #27251e; }
.footer-social a:focus-visible { outline: 2px solid #27251e; outline-offset: 3px; border-radius: 4px; }


/* Hybrid plate (8/18): original icon-card language + a quiet packet loop.
   Square squircles, labels under, dashed Spark enclosure, teal packet. */
.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;
}
.hyb { margin: 28px 0 0; }
.hyb-draw {
  display: block;
  width: min(1040px, 100%);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
@media (min-width: 1024px) {
  .hyb { margin: 36px 0 0; }
  .hyb-draw { width: min(1180px, 100%); }
}
.hyb { position: relative; }
.hyb::before {
  content: "";
  position: absolute;
  inset: 8% 12% 0;
  background: radial-gradient(46% 50% at 50% 42%, rgba(206, 124, 60, 0.09) 0%, rgba(206, 124, 60, 0.03) 42%, transparent 72%);
  pointer-events: none;
}
.hyb-draw { position: relative; z-index: 1; }
.hyb-sq {
  fill: url(#hyb-glass);
  stroke: rgba(237, 235, 228, 0.2);
  stroke-width: 1;
}
.hyb-sq--grid { fill: url(#hyb-grid); }
.hyb-enclose {
  fill: none;
  stroke: rgba(237, 235, 228, 0.18);
  stroke-width: 1;
  stroke-dasharray: 3.5 5;
}
.hyb-port { fill: rgba(237, 235, 228, 0.55); }
.hyb-tile { fill: rgba(237, 235, 228, 0.82); }
.hyb-label {
  fill: #edebe4;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 520;
}
.hyb-sub {
  fill: rgba(237, 235, 228, 0.5);
  font-family: var(--font-sans);
  font-size: 12px;
}
.hyb-edge {
  fill: none;
  stroke: rgba(237, 235, 228, 0.28);
  stroke-width: 1.15;
}
.hyb-pkt {
  fill: #1ba393;
  filter: drop-shadow(0 0 6px rgba(27, 163, 147, 0.7));
}
.hyb-pkt--a {
  offset-path: path("M248 178 C 312 178 336 254 410 254 C 454 254 454 254 498 254 C 580 254 620 178 672 178");
  offset-rotate: 0deg;
  animation: hyb-run 7.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.hyb-pkt--b {
  offset-path: path("M248 154 C 312 154 336 82 410 82 C 454 82 454 82 498 82 C 580 82 620 154 672 154");
  offset-rotate: 0deg;
  animation: hyb-run 7.2s cubic-bezier(0.4, 0, 0.2, 1) 3.6s infinite;
}
@keyframes hyb-run {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.hyb.is-paused .hyb-pkt { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hyb-pkt { animation: none; opacity: 0; }
}
.hyb-stack { display: none; list-style: none; margin: 0; padding: 0; }
.hyb-stack li {
  padding: 16px 0;
  border-top: 1px solid rgba(237, 235, 228, 0.12);
}
.hyb-stack-k {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(237, 235, 228, 0.45);
}
.hyb-stack p { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(237, 235, 228, 0.78); }
@media (max-width: 699.98px) {
  .hyb-draw { display: none; }
  .hyb-stack { display: block; }
}

/* ULTRAWIDE CANVAS CAP (8/24 Phi): the full-bleed photographs stop scaling
   past a 1920px canvas. Above that the plate stays centered at canvas width
   and its side edges dissolve into the page ground, so wide monitors get the
   intended composition and sharpness instead of a soft over-enlargement. */
@media (min-width: 1921px) {
  .hero-field,
  .cta-field {
    left: 50%;
    right: auto;
    width: 1920px;
    transform: translateX(-50%);
  }
  .hero-field::after,
  .cta-field::after {
    content: "";
    position: absolute;
    inset: 0;
    /* 8/24 Phi: feathered — eased stops across a 22% wing each side so the
       plate drops off instead of reading as a vignette frame */
    background: linear-gradient(to right,
      var(--ground) 0,
      rgba(18, 18, 17, 0.95) 3%,
      rgba(18, 18, 17, 0.84) 6.5%,
      rgba(18, 18, 17, 0.66) 10%,
      rgba(18, 18, 17, 0.44) 13.5%,
      rgba(18, 18, 17, 0.24) 16.5%,
      rgba(18, 18, 17, 0.09) 19.5%,
      rgba(18, 18, 17, 0) 22%,
      rgba(18, 18, 17, 0) 78%,
      rgba(18, 18, 17, 0.09) 80.5%,
      rgba(18, 18, 17, 0.24) 83.5%,
      rgba(18, 18, 17, 0.44) 86.5%,
      rgba(18, 18, 17, 0.66) 90%,
      rgba(18, 18, 17, 0.84) 93.5%,
      rgba(18, 18, 17, 0.95) 97%,
      var(--ground) 100%);
  }
}