/* === Magic UI ports — vanilla CSS === */

/* spotlight + border-beam removed per request */
.border-beam { display: none !important; }

/* No more decorative dots */
.eyebrow::before,
.alarm-eyebrow::before,
.bento-cell .b-label::before,
.warp-info-card .warp-tag::before { display: none !important; }
.eyebrow { gap: 0; }
.bento-cell .b-label { padding-left: 0; }
.card .corner { display: none !important; }
.step .step-icon { display: none !important; }

/* No more tag-chip pills */
.warp-info-card .warp-tag,
.orbit-card-label,
.orbit-card-foot,
.tools-foot,
.alarm-eyebrow,
.partners-label { display: none !important; }

/* The .partners marquee no longer needs the label spacer */
.partners { padding: 36px 0; }

/* ---------------- Dithering · WebGL2 canvas (why-now hero bg) ---------- */
.dithering {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Subtle bottom-edge fade so the dithered banner blends into the page. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
.dithering canvas { display: block; width: 100%; height: 100%; }

/* Legacy: the AnimatedDots host is still defined in case any other page
   re-introduces it. */
.animated-dots {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
.animated-dots canvas { display: block; width: 100%; height: 100%; }

/* Dark variant for the why-now page-hero so the dots can glow.
   The hero needs to be tall enough for the waterfall to feel like a banner,
   not a strip. */
.page[data-page="why-now"] .page-hero {
  background: oklch(0.18 0 0);
  min-height: 56vh;
  display: flex;
  align-items: center;
}
.page[data-page="why-now"] .page-hero .eyebrow,
.page[data-page="why-now"] .page-hero .eyebrow { color: oklch(0.7 0 0); }
.page[data-page="why-now"] .page-hero h1 { color: var(--bg); }
.page[data-page="why-now"] .page-hero .lead { color: oklch(0.78 0 0); }

/* ---------------- Quote Marquee · two rows, opposite directions ---------------- */
.voices-marquee {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.voices-row {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.voices-track {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  width: max-content;
  animation: voicesRoll var(--voices-duration, 60s) linear infinite;
  will-change: transform;
  padding-right: 16px;
}
.voices-row.reverse .voices-track { animation-direction: reverse; }
.voices-row:hover .voices-track { animation-play-state: paused; }
@keyframes voicesRoll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.quote-card {
  width: 340px;
  flex-shrink: 0;
  background: var(--bg);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background .2s ease, transform .2s ease;
}
.quote-card:hover {
  background: var(--bg-2);
  transform: translateY(-2px);
}
.quote-card .qc-body {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
  font-weight: 450;
}
.quote-card .qc-body em { font-style: italic; color: var(--ink-2); }
.quote-card .qc-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}
.quote-card .qc-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.quote-card .qc-role {
  font-size: 12px;
  color: var(--ink-3);
}
.quote-card .qc-src {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 6px;
}

.quote-card { position: relative; overflow: hidden; }

@media (max-width: 600px) {
  .quote-card { width: 280px; }
}

/* ---------------- Shimmer · upgrade .btn-primary perimeter ---------------- */
.btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: -150%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 320deg,
    rgba(255, 255, 255, 0.55) 350deg,
    rgba(255, 255, 255, 0.85) 360deg
  );
  animation: shimmerSpin 3.5s linear infinite;
  z-index: -2;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: var(--ink);
  border-radius: inherit;
  z-index: -1;
  transition: background .18s ease;
}
.btn-primary:hover::after { background: oklch(0.28 0 0); }
@keyframes shimmerSpin { to { transform: rotate(1turn); } }

/* nav primary button is smaller; tighten inset */
.nav .btn-primary::after { inset: 1px; }

/* CTAs that override .btn-primary background (white-on-dark hero CTA) */
.btn[style*="background:var(--bg)"]::before,
.btn[style*="background: var(--bg)"]::before { display: none; }
.btn[style*="background:var(--bg)"]::after,
.btn[style*="background: var(--bg)"]::after { display: none; }

/* ---------------- Animated Grid Pattern · page-hero backgrounds ---------------- */
.animated-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 35%, #000 35%, transparent 85%);
          mask-image: radial-gradient(ellipse 95% 75% at 50% 35%, #000 35%, transparent 85%);
}
.animated-grid svg {
  width: 100%;
  height: 100%;
  display: block;
}
.animated-grid svg path { stroke: oklch(0.78 0.005 90 / 0.55); fill: none; }
.animated-grid svg rect.sq { fill: oklch(0.7 0.04 60 / 0.5); }

/* ensure page-hero stacks content above grid */
.page-hero { position: relative; overflow: hidden; }
.page-hero > .wrap { position: relative; z-index: 1; }

/* ---------------- Highlighter · marker-stroke on accent words ---------------- */
.highlight-marker {
  position: relative;
  font-style: normal;
  padding: 0.04em 0.18em 0.05em;
  border-radius: 3px 7px 4px 8px / 5px 3px 6px 4px;
  background-image: linear-gradient(
    var(--hl-color, oklch(from var(--peach) l c h / 0.78)),
    var(--hl-color, oklch(from var(--peach) l c h / 0.78))
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
  animation: hlSweepBg .85s cubic-bezier(.6,0,.3,1) .35s forwards;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@keyframes hlSweepBg {
  to { background-size: 100% 100%; }
}
.highlight-marker.peach { --hl-color: oklch(from var(--peach) l c h / 0.78); }
.highlight-marker.mint  { --hl-color: oklch(from var(--mint)  l c h / 0.78); }
.highlight-marker.sky   { --hl-color: oklch(from var(--sky)   l c h / 0.78); }
.highlight-marker.peach-soft { --hl-color: oklch(from var(--peach) l c h / 0.55); }
.highlight-marker.mint-soft  { --hl-color: oklch(from var(--mint)  l c h / 0.55); }

/* on dark surfaces, marker stays slightly translucent */
.bento-cell.dark .highlight-marker,
.alarm .highlight-marker,
.quote-block .highlight-marker { color: inherit; }

/* ---------------- Number Ticker numerics ---------------- */
[data-ticker] { font-variant-numeric: tabular-nums; display: inline-block; }

/* ---------------- Orbiting Tools · two rings, real brand logos ---------------- */
.tools-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 1000px) {
  .tools-split { grid-template-columns: 1fr; gap: 36px; }
}
.tools-side h2 {
  margin-top: 18px;
  margin-bottom: 22px;
}
.tools-side p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}
.tools-side p + p { margin-top: 14px; }
.tools-side .tools-foot {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px dashed var(--hairline);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Side card frame for the orbit */
.orbit-card {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.orbit-card .orbit-card-label {
  position: absolute;
  top: 22px; left: 24px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  z-index: 5;
}
.orbit-card .orbit-card-foot {
  position: absolute;
  bottom: 22px; right: 24px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  z-index: 5;
}

.orbit-stage {
  position: relative;
  width: 100%;
  height: 480px;
  max-width: 520px;
  margin: 0 auto;
  isolation: isolate;
}
@media (max-width: 1000px) {
  .orbit-stage { height: 460px; max-width: 520px; }
}
@media (max-width: 520px) {
  .orbit-stage { height: 360px; }
  .orbit-card { padding: 14px; }
}

.orbit-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.orbit-path circle {
  fill: none;
  stroke: oklch(0.18 0 0 / 0.08);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.orbit-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow:
    0 0 0 8px oklch(0.985 0.004 90 / 1),
    0 18px 40px -22px oklch(0.18 0 0 / 0.15);
}
.orbit-center img {
  width: 56px; height: 56px;
  object-fit: contain;
}
@media (max-width: 520px) {
  .orbit-center { width: 72px; height: 72px; }
  .orbit-center img { width: 44px; height: 44px; }
}

.orbit-item {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--icon-size, 56px);
  height: var(--icon-size, 56px);
  margin-top: calc(-0.5 * var(--icon-size, 56px));
  margin-left: calc(-0.5 * var(--icon-size, 56px));
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  animation: orbit var(--orbit-duration, 28s) linear infinite;
  transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
}
.orbit-item:hover {
  border-color: var(--ink-4);
  box-shadow: 0 12px 22px -14px oklch(0.18 0 0 / 0.25);
  z-index: 5;
}
.orbit-item img {
  width: calc(var(--icon-size, 56px) * 0.5);
  height: calc(var(--icon-size, 56px) * 0.5);
  object-fit: contain;
  pointer-events: none;
}
.orbit-item .orbit-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--bg);
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.orbit-item:hover .orbit-label { opacity: 1; }

.orbit-ring.reverse .orbit-item { animation-direction: reverse; }

@keyframes orbit {
  from {
    transform: rotate(calc(var(--angle) * 1deg))
               translateY(calc(var(--radius) * -1px))
               rotate(calc(var(--angle) * -1deg));
  }
  to {
    transform: rotate(calc(var(--angle) * 1deg + 360deg))
               translateY(calc(var(--radius) * -1px))
               rotate(calc((var(--angle) * -1deg) - 360deg));
  }
}

@media (max-width: 520px) {
  .orbit-item { --icon-size: 44px; border-radius: 11px; }
}

/* ---------------- Warp Background · perspective grid + beams ---------------- */
.warp {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 72px);
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
.warp-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  perspective: 110px;
  pointer-events: none;
  overflow: hidden;
  --grid-color: oklch(0.18 0 0 / 0.10);
  --beam-size: 5%;
}
.warp-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, var(--bg) 90%);
  z-index: 1;
}

.warp-side {
  position: absolute;
  background-image:
    linear-gradient(var(--grid-color) 0 1px, transparent 1px var(--beam-size)),
    linear-gradient(90deg, var(--grid-color) 0 1px, transparent 1px var(--beam-size));
  background-size: var(--beam-size) var(--beam-size);
  background-position: 50% -0.5px, 50% 50%;
  overflow: hidden;
  transform-style: preserve-3d;
}
/* TOP — anchored at center-top, tilted away */
.warp-side.warp-top {
  top: 0; left: 0;
  width: 100%; height: 800px;
  transform-origin: 50% 0%;
  transform: rotateX(-90deg);
}
/* BOTTOM — anchored just below container, tilted away */
.warp-side.warp-bottom {
  top: 100%; left: 0;
  width: 100%; height: 800px;
  transform-origin: 50% 0%;
  transform: rotateX(-90deg);
}
/* LEFT — anchored at top-left, rotated 90° then tilted */
.warp-side.warp-left {
  top: 0; left: 0;
  width: 100%; height: 800px;
  transform-origin: 0% 0%;
  transform: rotate(90deg) rotateX(-90deg);
}
/* RIGHT — anchored at top-right */
.warp-side.warp-right {
  top: 0; right: 0;
  width: 100%; height: 800px;
  transform-origin: 100% 0%;
  transform: rotate(-90deg) rotateX(-90deg);
}

.warp-beam {
  position: absolute;
  top: 0;
  left: var(--bx, 50%);
  width: var(--bw, 5%);
  aspect-ratio: 1 / var(--bar, 6);
  background: linear-gradient(
    hsl(var(--bh, 200) 75% 62%),
    transparent
  );
  transform: translate(-50%, 100%);
  animation: warpBeamFly var(--bdur, 3.2s) linear infinite;
  animation-delay: var(--bdelay, 0s);
  filter: blur(0.5px);
  opacity: 0.85;
}
@keyframes warpBeamFly {
  from { transform: translate(-50%, 800%); }
  to   { transform: translate(-50%, -100%); }
}

.warp-content {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
}

.warp-info-card {
  width: 100%;
  max-width: 520px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 38px 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow:
    0 24px 60px -28px oklch(0.18 0 0 / 0.22),
    0 8px 22px -10px oklch(0.18 0 0 / 0.10);
}
.warp-info-card .warp-tag {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--peach-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}
.warp-info-card .warp-tag::before {
  content: '';
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--peach);
}
.warp-info-card h3 {
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-weight: 600;
  color: var(--ink);
}
.warp-info-card .warp-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.warp-info-card .warp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.warp-info-card .warp-chip {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--hairline);
}
.warp-info-card .warp-chip.mint  { background: var(--mint);  color: var(--mint-ink);  border-color: transparent; }
.warp-info-card .warp-chip.sky   { background: var(--sky);   color: var(--sky-ink);   border-color: transparent; }
.warp-info-card .warp-chip.peach { background: var(--peach); color: var(--peach-ink); border-color: transparent; }

/* ---------------- Waves Background · noise-driven animated lines (auto only) ---------------- */
.waves-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  --waves-stroke: oklch(from var(--peach) l c h / 0.55);
}
.waves-bg svg { display: block; width: 100%; height: 100%; }
.waves-bg svg path {
  fill: none;
  stroke: var(--waves-stroke);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: reduce) {
  .waves-bg svg path { animation: none; }
}

/* ============================================================
   DENSITY · SPACING · RHYTHM POLISH
   Shared modifiers + components used across all pages.
   Added after audit pass.
   ============================================================ */

/* ---- Section rhythm ---------------------------------------- */
/* Looser default + reusable tight modifier replacing inline padding-top:0 */
section { padding-top: clamp(96px, 10vw, 140px); padding-bottom: clamp(96px, 10vw, 140px); }
/* `.tight` previously used shorthand `padding: ... 0` which (specificity 0,1,1)
   beats `.wrap`'s `padding: 0 var(--gutter)` and zeroed horizontal padding —
   so `<section class="wrap tight">` cards (Jensen quote on home, product/
   enterprise CTAs) slammed to the viewport edges on mobile. Use longhand
   so vertical-only is set, preserving wrap's gutter. */
section.tight {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
section.section-tight { padding-top: clamp(40px, 5vw, 56px); }
section.section-tight + section.section-tight { padding-top: 0; }

/* Per-page consistent rhythm between adjacent sections */
.page[data-page="product"]  section + section,
.page[data-page="paths"]    section + section,
.page[data-page="why-now"]  section + section,
.page[data-page="pricing"]  section + section { padding-top: clamp(56px, 7vw, 96px); }

/* ---- Section-head variants --------------------------------- */
.section-head .lead { max-width: 56ch; }
.section-head h2 { margin-top: 18px; }

.section-head.section-head--inline {
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 760px;
  margin-bottom: 40px;
}
.section-head.section-head--inline .lead { max-width: 60ch; }

.section-head.section-head--center {
  grid-template-columns: 1fr;
  text-align: center;
  gap: 16px;
  max-width: 56ch;
  margin-inline: auto;
}
.section-head.section-head--center .lead { margin-inline: auto; }

/* ---- CTA-band component (used on every sub-page) ---------- */
.cta-band {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 40px 48px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
}
.cta-band h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.025em; line-height: 1.15; }
.cta-band-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 800px) { .cta-band { grid-template-columns: 1fr; padding: 32px; } }

/* ---- Tabs component (enterprise + paths) ------------------- */
.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  margin-bottom: 32px;
}
.tabs .tab {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  border-radius: 8px;
  transition: all .18s ease;
}
.tabs .tab.active,
.tabs .tab.is-active { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.tab-panel { display: none; }
.tab-panel.active,
.tab-panel.is-active { display: block; animation: tabIn .25s ease; }
@keyframes tabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Disclosure component (`<details>`) -------------------- */
.disclosure { border-top: 1px solid var(--hairline); margin-top: 24px; padding-top: 18px; }
.disclosure > summary {
  list-style: none; cursor: pointer;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink-3); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: '↓'; transition: transform .2s ease; }
.disclosure[open] > summary::after { transform: rotate(180deg); }
.disclosure > .disclosure-body { margin-top: 18px; animation: tabIn .25s ease; }

/* dashed variant for inside cards */
details.reveal-disclose { margin-top: 18px; border-top: 1px dashed var(--hairline); padding-top: 14px; }
details.reveal-disclose > summary {
  cursor: pointer; list-style: none;
  font-family: 'Geist Mono', monospace; font-size: 12px;
  color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase;
}
details.reveal-disclose > summary::-webkit-details-marker { display: none; }
details.reveal-disclose > summary::after { content: ' ↓'; transition: transform .2s ease; display: inline-block; margin-left: 6px; }
details.reveal-disclose[open] > summary::after { transform: rotate(180deg); }
details.reveal-disclose[open] > summary { color: var(--ink); }

/* ---- Multiplier card disclosure ---------------------------- */
.multiplier-card .m-tag { margin-top: 8px; color: oklch(0.78 0 0); font-size: 14px; }
.multiplier-card .m-src {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.6 0 0);
}
[data-theme="dark"] .multiplier-card .m-src { color: var(--ink-3); }
.multiplier-card details.m-more { margin-top: 24px; border-top: 1px solid oklch(0.3 0 0); padding-top: 16px; }
.multiplier-card details.m-more summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: oklch(0.78 0 0);
  font-family: 'Geist Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase;
}
.multiplier-card details.m-more summary::-webkit-details-marker { display: none; }
.multiplier-card details.m-more summary .ic { transition: transform .2s ease; font-size: 18px; }
.multiplier-card details.m-more[open] summary .ic { transform: rotate(45deg); }
.multiplier-card details.m-more .m-rows { margin-top: 14px; border-top: 0; }

/* ---- Alarm-stats disclosure -------------------------------- */
.alarm-more { margin-top: 56px; }
.alarm-more > summary {
  list-style: none; cursor: pointer;
  padding: 16px 0; border-top: 1px solid oklch(0.3 0 0);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Geist Mono', monospace; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.78 0 0);
}
.alarm-more > summary::-webkit-details-marker { display: none; }
.alarm-more > summary .ic { transition: transform .2s ease; font-size: 18px; }
.alarm-more[open] > summary .ic { transform: rotate(45deg); }
.alarm-more[open] > summary { border-bottom: 1px solid oklch(0.3 0 0); }
.alarm-more .alarm-stats { margin-top: 28px; }

/* ---- Bento 4-up modifier (How-It-Works) -------------------- */
.bento.cols-4 { grid-template-columns: repeat(4, 1fr); }
.bento.cols-4 .bento-cell { grid-column: span 1; }
@media (max-width: 1000px) { .bento.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .bento.cols-4 { grid-template-columns: 1fr; } }

/* ---- Paths-grid modifiers ---------------------------------- */
.paths-grid.paths-2x2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .paths-grid.paths-2x2 { grid-template-columns: 1fr; } }

.paths-grid.paths-4up { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .paths-grid.paths-4up { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .paths-grid.paths-4up { grid-template-columns: 1fr; } }

/* ---- Path name label (replacing hidden .path-tag) ---------- */
.path-name {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 999px;
  font-family: 'Geist Mono', monospace;
  background: var(--accent);
  color: var(--accent-ink);
  margin-bottom: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Mock visual differentiation --------------------------- */
.mock[data-tone="capture"] { border-left: 3px solid var(--peach); }
.mock[data-tone="grade"]   { border-left: 3px solid var(--mint); }
.mock[data-tone="tracker"] { border-left: 3px solid var(--sky); }
.mock[data-tone="profile"] { border-left: 3px solid var(--mint); }
.mock[data-tone="visibility"] { border-left: 3px solid var(--peach); }

/* ---- Pricing card refinements ------------------------------ */
.price-card .num.descriptor {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 4px;
}
.price-card ul li.ul-head {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding: 14px 0 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline-2);
}
.price-card ul li.ul-head::before { content: ''; }
.price-card ul li.ul-head:first-child { padding-top: 0; }
.price-card.feat ul li.ul-head { color: oklch(0.7 0 0); border-bottom-color: oklch(0.3 0 0); }

/* ---- Why-now timeline 2026 step ---------------------------- */
.page[data-page="why-now"] .step--now {
  background: linear-gradient(180deg, oklch(0.97 0.02 60), transparent 65%);
  padding: 32px 24px !important;
  margin: 0 -24px;
  border-radius: 14px;
}
.page[data-page="why-now"] .step--now h3 { font-size: 26px; }

/* ---- Hero trust strip on light page-hero ------------------- */
.page-hero .hero-trust {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 32px;
  font-family: 'Geist Mono', monospace; font-size: 12px;
  color: var(--ink-3); letter-spacing: 0.04em;
}
.page-hero .hero-trust .dot { color: var(--ink-4); }
.page-hero .hero-cta-row { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

/* ---- Voices marquee — calmer ------------------------------- */
.voices-row              { --voices-duration: 110s; }
.voices-row.reverse      { --voices-duration: 120s; }

/* ---- Pillar overview cards: tame status colors ------------- */
.page[data-page="enterprise"] .tag.green:not(#continuum *):not(.cohort-board *),
.page[data-page="enterprise"] .tag.amber:not(#continuum *):not(.cohort-board *),
.page[data-page="enterprise"] .tag.red:not(#continuum *):not(.cohort-board *) {
  background: var(--bg-3); color: var(--ink-2);
}

/* ---- Hairline divider for between-section breath ----------- */
.between-divider {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.between-divider hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* ---- Shift / Split / Numbers — replaces the dark alarm block --- */
/* Headline section — no container, just copy on page bg. */
.shift-head { max-width: 64ch; }
.shift-head .eyebrow { color: var(--peach-ink); margin-bottom: 22px; }
.shift-head .shift-h2 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 22ch;
  margin-bottom: 22px;
}
.shift-head .shift-h2 em { font-style: normal; color: var(--peach-ink); }
.shift-head .shift-lead {
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 60ch;
}

/* Two contrasting cards — peach (down) vs mint (up). No chart. */
.shift-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 700px) { .shift-split { grid-template-columns: 1fr; } }
.shift-split--single {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: clamp(28px, 3.5vw, 48px) auto 0;
}

/* SHIFT row — text + supporting stat card side-by-side. Stacks on mobile. */
.shift-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 800px) {
  .shift-row { grid-template-columns: 1fr; gap: 24px; }
}
.shift-row .shift-card { min-height: auto; }
.split-card {
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 48px);
  background: var(--bg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.split-card.down { background: oklch(from var(--peach) calc(l + 0.06) c h / 0.35); }
.split-card.up   { background: oklch(from var(--mint)  calc(l + 0.06) c h / 0.35); }
.split-card .split-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.split-card .split-num {
  font-size: clamp(64px, 9vw, 128px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.split-card.down .split-num { color: var(--peach-ink); }
.split-card.up   .split-num { color: var(--mint-ink); }
.split-card .split-num small {
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-left: 2px;
  opacity: 0.85;
}
.split-card .split-trend {
  font-size: 15px;
  color: var(--ink-2);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.split-card .trend-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
}
.split-card.down .trend-arrow { background: var(--peach); color: var(--peach-ink); }
.split-card.up   .trend-arrow { background: var(--mint);  color: var(--mint-ink); }
.split-card .split-src {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 10px;
}

/* Light-bg variant of the existing alarm-stats grid (92M + 3-row list). */
.alarm-stats.alarm-stats--light {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 56px;
}
.alarm-stats--light .stat-hero { border-right-color: var(--hairline); }
@media (max-width: 800px) {
  .alarm-stats--light .stat-hero { border-right: 0; border-bottom-color: var(--hairline); }
}
.alarm-stats--light .stat-hero .num { color: var(--peach-ink); }
.alarm-stats--light .stat-hero .lbl { color: var(--ink); }
.alarm-stats--light .stat-hero .src { color: var(--ink-3); }
.alarm-stats--light .stat-list li { border-color: var(--hairline) !important; }
.alarm-stats--light .stat-list .rn.peach { color: var(--peach-ink); }
.alarm-stats--light .stat-list .rn.mint  { color: var(--mint-ink); }
.alarm-stats--light .stat-list .rn.sky   { color: var(--sky-ink); }
.alarm-stats--light .stat-list .rl { color: var(--ink); }
.alarm-stats--light .stat-list .rl em { color: var(--ink); font-style: italic; }
.alarm-stats--light .stat-list .rs { color: var(--ink-3); }

/* ---- Path tabs (paths page deep dive) ---------------------- */
.path-detail {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 32px;
  background: var(--bg-2);
}
.path-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 28px;
}
.path-tab {
  padding: 12px 20px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.path-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.path-tab-panel { display: none; }
.path-tab-panel.is-active { display: block; animation: tabIn .25s ease; }
.path-deliverables {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px 28px;
  margin-top: 18px;
}
.path-deliverables li {
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-2);
}
@media (max-width: 700px) { .path-deliverables { grid-template-columns: 1fr; } }

/* =====================================================================
 * DARK MODE · magicui-scoped overrides
 * Pairs with the [data-theme="dark"] block in styles.css. Touches every
 * place magicui.css hardcodes a #fff/#000/oklch literal that the token
 * flip alone can't cover.
 * ===================================================================== */

/* Dithering / animated-dots / why-now hero pane masks — these mask into
   the page bg. In dark mode the page bg is dark, so the mask should
   keep using opaque-on-itself. The literal #000 here is fine because
   it's the mask alpha, not a color, BUT we also want to soften the
   bottom-edge fade so the dithered banner doesn't visibly stop. */
[data-theme="dark"] .dithering,
[data-theme="dark"] .animated-dots {
  /* mask alpha unchanged; opacity tweak to keep the canvas legible
     against a dark page without going washed-out. */
  opacity: 0.92;
}

/* why-now page hero (magicui ships its own dark surface for this hero
   even in light mode). In dark mode, raise it slightly above the page
   bg so the banner still feels like a feature. */
[data-theme="dark"] .page[data-page="why-now"] .page-hero {
  background: oklch(0.13 0.005 90);
}
[data-theme="dark"] .page[data-page="why-now"] .page-hero .eyebrow,
[data-theme="dark"] .page[data-page="why-now"] .page-hero .lead {
  color: var(--ink-2);
}

/* Voices marquee mask: token-agnostic alpha mask, no color override
   needed (mask only uses #000 as the alpha). */

/* Quote-card already overridden in styles.css for visibility. */

/* Shimmer button: the conic-gradient uses rgba(255,255,255,...) for the
   shimmer perimeter. On dark, the inner fill is now near-white (--ink),
   so a white perimeter on a white pill kills the effect. Switch the
   shimmer color to a dim warm tone that reads against the pale pill. */
[data-theme="dark"] .btn-primary::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 320deg,
    rgba(0, 0, 0, 0.32) 350deg,
    rgba(0, 0, 0, 0.55) 360deg
  );
}
/* The inner pill (::after) uses var(--ink) — already flips to near-white
   on dark, painting "white text-on-button" via .btn-primary's color
   token chain. Confirm the hover stays a touch darker. */
[data-theme="dark"] .btn-primary:hover::after {
  background: oklch(from var(--ink) calc(l - 0.10) c h);
}

/* Animated grid pattern: stroke + sq fill come from oklch literals. The
   light versions read fine on dark too, but lift the stroke slightly. */
[data-theme="dark"] .animated-grid svg path { stroke: oklch(0.78 0.005 90 / 0.30); }
[data-theme="dark"] .animated-grid svg rect.sq { fill: oklch(0.7 0.04 60 / 0.4); }
[data-theme="dark"] .animated-grid {
  -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 35%, var(--bg) 35%, transparent 85%);
          mask-image: radial-gradient(ellipse 95% 75% at 50% 35%, var(--bg) 35%, transparent 85%);
}

/* Highlight markers (peach/mint/sky and *-soft variants). On dark, the
   0.78 alpha colored stripe is too washed; bump density and pin a dark
   ink so the marker reads as a deliberate highlight, not a smudge. */
[data-theme="dark"] .highlight-marker.peach      { --hl-color: oklch(from var(--peach) l c h / 0.85); color: oklch(0.18 0.06 60); }
[data-theme="dark"] .highlight-marker.mint       { --hl-color: oklch(from var(--mint)  l c h / 0.85); color: oklch(0.18 0.06 160); }
[data-theme="dark"] .highlight-marker.sky        { --hl-color: oklch(from var(--sky)   l c h / 0.85); color: oklch(0.18 0.06 245); }
[data-theme="dark"] .highlight-marker.peach-soft { --hl-color: oklch(from var(--peach) l c h / 0.65); color: var(--ink); }
[data-theme="dark"] .highlight-marker.mint-soft  { --hl-color: oklch(from var(--mint)  l c h / 0.65); color: var(--ink); }

/* Orbit path / orbit center already overridden in styles.css. */

/* Warp grid color — magicui sets it inline as a custom prop on
   .warp-stage; styles.css already overrides. */

/* Waves background stroke: keep peach hue but bump alpha slightly so it
   reads on dark surfaces. */
[data-theme="dark"] .waves-bg {
  --waves-stroke: oklch(from var(--peach) l c h / 0.70);
}

/* CTA-band (the `.cta-band` shipped from magicui) — bg-2 token already
   flips, so it's automatically dark. No extra rule needed beyond the
   per-track overrides in styles.css. */

/* Tabs / details disclosures already use --hairline / --bg-2 — token
   flip handles them. */

/* Multiplier-card's inline oklch literals for graded "78/3/0" gray
   become the wrong contrast on a dark elevated surface. Re-pin them
   to the token graph so the rows stay legible. */
[data-theme="dark"] .multiplier-card .m-tag { color: var(--ink-3); }
[data-theme="dark"] .multiplier-card details.m-more { border-top-color: var(--hairline); }
[data-theme="dark"] .multiplier-card details.m-more summary { color: var(--ink-3); }
[data-theme="dark"] .multiplier-card .m-row .k { color: var(--ink-3); }
[data-theme="dark"] .price-card.feat ul li.ul-head {
  color: var(--ink-3);
  border-bottom-color: var(--hairline);
}

/* alarm-more disclosure summary uses oklch(0.3 0 0) borders — re-pin. */
[data-theme="dark"] .alarm-more > summary { border-top-color: var(--hairline); color: var(--ink-3); }
[data-theme="dark"] .alarm-more[open] > summary { border-bottom-color: var(--hairline); }

/* Why-now timeline 2026 step: replace the cream peach gradient with a
   warmer/darker version so it reads as "spotlight" without going pale. */
[data-theme="dark"] .page[data-page="why-now"] .step--now {
  background: linear-gradient(180deg, oklch(from var(--peach) l c h / 0.20), transparent 65%);
}

/* Pillar overview tag.green/amber/red on enterprise: muted into bg-3 so
   the user-facing status color isn't fighting the dark surface. The
   styles.css block already provides class-level overrides; this is the
   enterprise-page-scoped guard rail. */
[data-theme="dark"] .page[data-page="enterprise"] .tag.green:not(#continuum *):not(.cohort-board *),
[data-theme="dark"] .page[data-page="enterprise"] .tag.amber:not(#continuum *):not(.cohort-board *),
[data-theme="dark"] .page[data-page="enterprise"] .tag.red:not(#continuum *):not(.cohort-board *) {
  background: var(--bg-3);
  color: var(--ink-2);
}

/* === END DARK MODE === */