/* =================================================================
   Nimbus — landing page stylesheet.

   The entire palette, type stack, and radius scale is copied 1:1 from
   the iOS app's `NimbusPalette.vanillaWood`, `NimbusType`, `NimbusRadius`,
   and `NimbusSpacing` tokens. If the app theme changes, tokens below
   change with it — nothing else in the stylesheet hard-codes color.

   Source-of-truth files:
     apps/ios/Nimbus/Core/Theme/NimbusPalette.swift  (colors)
     apps/ios/Nimbus/Core/Theme/NimbusFonts.swift    (type scale, radii)
     apps/ios/design/nimbus-mark.svg                 (logo geometry)
   =================================================================== */

:root {
  /* --- Vanilla Wood palette (NimbusPalette.vanillaWood) -------- */
  --bg:               #feffd6;
  --surface:          #feffd6;
  --surface-dim:      #e5e4cd;
  --surface-bright:   #feffd6;
  --surface-c-lowest: #ffffff;
  --surface-c-low:    #fcf9ee;
  --surface-c:        #f6f4e5;
  --surface-c-high:   #f0efdd;
  --surface-c-hi:     #eae9d5;
  --surface-variant:  #eae9d5;

  --on-bg:            #38392b;
  --on-surface:       #38392b;
  --on-surface-var:   #656555;

  --primary:          #5f5e5e;
  --primary-dim:      #535252;
  --primary-container:#e5e2e1;
  --on-primary:       #faf7f6;
  --on-primary-c:     #525151;

  --secondary:        #67645d;
  --tertiary:         #686458;

  --error:            #a64542;
  --error-container:  #fe8983;

  --outline:          #828271;
  --outline-variant:  #bbbaa7;

  --success:          #34ba66;
  --warning:          #f2a12b;

  /* Ink variants for the warm-paper context (video underneath) */
  --ink:              #2b2c22;
  --ink-soft:         #4a4b3c;

  /* --- Type stack (NimbusFonts.swift) --------------------------- */
  --f-headline: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'SF Pro Display', sans-serif;
  --f-body:     'Inter', ui-sans-serif, system-ui, -apple-system, 'SF Pro Text', sans-serif;
  --f-label:    'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:     'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --f-rounded:  ui-rounded, 'SF Pro Rounded', 'Plus Jakarta Sans', system-ui, sans-serif;

  /* --- Radii (NimbusRadius) ------------------------------------ */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-bubble: 16px;
  --r-bubble-tail: 4px;
  --r-composer: 28px;

  /* --- Spacing scale (NimbusSpacing) --------------------------- */
  --s-xxs: 2px; --s-xs: 4px; --s-sm: 8px; --s-md: 12px;
  --s-lg: 16px; --s-xl: 20px; --s-xxl: 24px; --s-xxxl: 32px;

  /* --- Landing-page-only tokens -------------------------------- */
  --page-max:   1200px;
  --ease-out:   cubic-bezier(.2, .7, .2, 1);
  --ease-snap:  cubic-bezier(.16, 1, .3, 1);
  --shadow-soft: 0 30px 80px rgba(56, 57, 43, 0.18),
                 0 8px 24px rgba(56, 57, 43, 0.08);
  --shadow-phone: 0 60px 120px rgba(40, 40, 28, 0.35),
                  0 20px 50px rgba(40, 40, 28, 0.22),
                  0 6px 18px rgba(40, 40, 28, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  font-family: var(--f-body);
  color: var(--on-surface);
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100%;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }


/* =================================================================
   Icon helpers — inline Lucide SVGs.
   Lucide uses a 24-unit grid, 2px stroke, round caps/joins. We slim to
   1.75 for a lighter, SF-Symbol-adjacent feel. All sized via font-size
   ("1em" square) so they inherit from their container.
   ================================================================= */
.ic {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ic-spin { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* =================================================================
   Fixed background: crossfading video slideshow + overlays
   ================================================================= */

.bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-videos { position: absolute; inset: 0; }

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Film-like treatment: cut saturation + brightness so the warm overlay
     can carry the palette. */
  filter: brightness(0.72) saturate(0.78) contrast(1.02);
  transition: opacity 2.4s var(--ease-out);
  /* Ken-burns runs CONTINUOUSLY on every video, not just .is-active.
     Tying it to the active class caused a visible scale-snap on every
     crossfade because the keyframe would restart from scale(1.04). With
     alternate + infinite, the zoom oscillates forever; active only
     controls opacity. Offsets + durations differ per clip so they don't
     all peak at the same moment. */
  animation: ken-burns 22s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
.bg-video:nth-child(1) { animation-duration: 22s; animation-delay: -3s;  }
.bg-video:nth-child(2) { animation-duration: 26s; animation-delay: -9s;  }
.bg-video:nth-child(3) { animation-duration: 20s; animation-delay: -14s; }
.bg-video:nth-child(4) { animation-duration: 24s; animation-delay: -6s;  }
.bg-video:nth-child(5) { animation-duration: 28s; animation-delay: -17s; }
.bg-video.is-active {
  opacity: 0.62;
  z-index: 2; /* keep the incoming clip above the outgoing during crossfade */
}
@keyframes ken-burns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.16); }
}

/* Warm paper wash layered on top of the video — this is what gives the
   page its vanilla-wood feel without hiding motion. */
.bg-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(254, 255, 214, 0.62) 0%,
      rgba(254, 255, 214, 0.55) 40%,
      rgba(254, 255, 214, 0.78) 100%);
}

/* SVG film grain via a tiny inline data URI. Low opacity, multiply blend
   so it survives the wash without looking dirty. */
.bg-grain {
  position: absolute;
  inset: -40px; /* oversized so animated translate doesn't expose seams */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.13;
  mix-blend-mode: multiply;
  animation: grain-drift 4.2s steps(6) infinite;
  pointer-events: none;
}
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-10px, 8px); }
  40%  { transform: translate(6px, -12px); }
  60%  { transform: translate(-6px, -4px); }
  80%  { transform: translate(12px, 10px); }
  100% { transform: translate(0, 0); }
}

/* Radial vignette strengthens the center-stage feel for the hero mark. */
.bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(254, 255, 214, 0) 35%,
      rgba(184, 180, 140, 0.18) 75%,
      rgba(100, 100, 80, 0.45) 100%);
}


/* =================================================================
   Top chrome — invisible on idle, mega-glass on hover
   ================================================================= */

.chrome {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s-xxl);
  height: 68px;
  padding: 0 clamp(16px, 3vw, 36px);
  /* Invisible on idle — links float directly over the page */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* The bottom border is the "rail" — hidden on idle, revealed as a thin
     hairline when the mega panel is open. The active trigger's underline
     rides on this exact line. */
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease-out),
              backdrop-filter .3s var(--ease-out),
              border-color .3s var(--ease-out);
}
/* When mega is open, chrome gets a full glass wash that seamlessly connects
   with the panel beneath — same backdrop blur + tint so the user reads them
   as one surface, with only the hairline rail marking the column-underline. */
.chrome.is-mega-open {
  background: rgba(254, 255, 214, 0.72);
  backdrop-filter: saturate(1.2) blur(22px);
  -webkit-backdrop-filter: saturate(1.2) blur(22px);
  border-bottom-color: rgba(95, 94, 94, 0.22);
}

.chrome-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
  /* Shadow for readability since chrome has no backing on idle */
  filter: drop-shadow(0 2px 14px rgba(40, 40, 28, 0.18));
}
.chrome-mark { width: 26px; height: 26px; color: var(--primary); }
.chrome-word {
  font-family: var(--f-rounded);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.6px;
  color: var(--primary);
}

.chrome-nav {
  display: flex;
  gap: 6px;
  margin-left: auto;
  margin-right: auto;
}

.mega-trigger {
  font-family: var(--f-label);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--on-surface);
  /* Trigger is a full-height hit-target so the underline can ride on the
     chrome's bottom rail. Horizontal padding gives the text breathing room. */
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .2s var(--ease-out);
  /* Readability against the photo/video background */
  text-shadow: 0 1px 10px rgba(40, 40, 28, 0.22);
  position: relative;
}
.mega-trigger:hover,
.mega-trigger.is-hover {
  color: var(--primary);
}
/* When chrome is open, triggers lose their text-shadow because the glass
   backing already covers them. */
.chrome.is-mega-open .mega-trigger { text-shadow: none; }

/* Active underline — sits on the hairline rail (chrome's bottom border)
   and extends 1px below it so it visually OVERPAINTS the rail in primary.
   This is the "brighter line underlines the hovered column" effect. */
.mega-trigger::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity .22s var(--ease-out),
              transform .28s var(--ease-snap);
  pointer-events: none;
}
.mega-trigger.is-hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.chrome-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-label);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-surface);
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 0.5px solid var(--outline-variant);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .2s var(--ease-out), background .2s var(--ease-out);
}
.chrome-pill:hover { transform: translateY(-1px); background: rgba(255,255,255,0.75); }
.chrome-pill-dot {
  width: 7px; height: 7px;
  background: var(--warning);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(242, 161, 43, 0.18);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.2); }
}

@media (max-width: 760px) {
  .chrome-nav { display: none; }
  .mega-panel { display: none; }
  .chrome-pill { display: none; }
  .chrome-burger { display: inline-flex; margin-left: auto; }
}


/* =================================================================
   Mobile navigation — hamburger + full-screen overlay
   Desktop: burger hidden, mega-nav visible.
   Mobile (≤760px): burger replaces mega-nav + pill; tap opens a
   full-screen drawer that lists every page on the site.
   ================================================================= */

.chrome-burger {
  display: none;              /* enabled inside the ≤760px block above */
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  border: 0.5px solid var(--outline-variant);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  color: var(--on-surface);
  position: relative;
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.chrome-burger:hover { background: rgba(255, 255, 255, 0.78); }
.chrome-burger:active { transform: scale(0.96); }
.chrome-burger-bars {
  position: relative;
  width: 20px; height: 14px;
  display: block;
}
.chrome-burger-bars::before,
.chrome-burger-bars::after,
.chrome-burger-bars > span {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease-snap), opacity .2s var(--ease-out), top .3s var(--ease-snap);
}
.chrome-burger-bars::before { top: 0; }
.chrome-burger-bars > span  { top: 6px; }
.chrome-burger-bars::after  { top: 12px; }
/* Open state — morph to X */
.chrome-burger[aria-expanded="true"] .chrome-burger-bars::before {
  top: 6px; transform: rotate(45deg);
}
.chrome-burger[aria-expanded="true"] .chrome-burger-bars > span {
  opacity: 0;
}
.chrome-burger[aria-expanded="true"] .chrome-burger-bars::after {
  top: 6px; transform: rotate(-45deg);
}

/* Lock background scroll while the drawer is open */
body.is-mnav-open { overflow: hidden; touch-action: none; }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 80;                /* above .chrome (60), below system modals */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  /* Hidden by default — drawer slides down from top + fades in */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .28s var(--ease-out), transform .32s var(--ease-snap);
}
.mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Warm-paper texture wash so the drawer doesn't feel flat */
.mobile-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(100% 70% at 100% 100%, rgba(234, 233, 213, 0.55), transparent 60%);
  opacity: 0.9;
}

.mobile-nav-inner {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 20px clamp(18px, 5vw, 28px) calc(env(safe-area-inset-bottom, 0px) + 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  flex: 0 0 auto;
}
.mobile-nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0.5px solid var(--outline-variant);
  background: var(--surface-c-lowest);
  border-radius: 12px;
  color: var(--on-surface);
  cursor: pointer;
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.mobile-nav-close:hover { background: var(--surface-c); }
.mobile-nav-close:active { transform: scale(0.96); }

.mobile-nav-body {
  margin-top: 18px;
  flex: 1 1 auto;
}
.mobile-nav-group + .mobile-nav-group { margin-top: 22px; }
.mobile-nav-title {
  font-family: var(--f-label);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-var);
  padding: 0 4px 8px;
  border-bottom: 0.5px solid var(--outline-variant);
  margin-bottom: 6px;
}

.mobile-nav-link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  align-items: center;
  padding: 14px 10px;
  border-radius: 14px;
  color: var(--on-surface);
  text-decoration: none;
  transition: background .18s var(--ease-out), transform .18s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
  background: var(--surface-c);
  outline: 0;
}
.mobile-nav-link:active { transform: scale(0.985); }
.mobile-nav-link-name {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--f-headline);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mobile-nav-link-sub {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--on-surface-var);
  line-height: 1.35;
}
.mobile-nav-link-chev {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--on-surface-var);
  opacity: 0.6;
  flex: 0 0 auto;
}
.mobile-nav-link[aria-current="page"] {
  background: var(--surface-c);
}
.mobile-nav-link[aria-current="page"] .mobile-nav-link-chev {
  color: var(--primary);
  opacity: 1;
}

.mobile-nav-foot {
  flex: 0 0 auto;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 0.5px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--on-surface);
  color: var(--surface-c-lowest);
  border-radius: 16px;
  font-family: var(--f-headline);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background .18s var(--ease-out), transform .18s var(--ease-snap);
}
.mobile-nav-cta:hover  { background: var(--primary); }
.mobile-nav-cta:active { transform: scale(0.98); }
.mobile-nav-foot-note {
  text-align: center;
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--on-surface-var);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav-link,
  .chrome-burger-bars::before,
  .chrome-burger-bars::after,
  .chrome-burger-bars > span {
    transition: none;
  }
}


/* =================================================================
   Shared mega-panel — one glass panel, content cross-fades.
   Harvey-style fluid effect: hovering between triggers keeps the
   panel mounted while its contents swap.
   ================================================================= */

.mega-panel {
  /* Attached directly to the chrome's bottom edge — the chrome's
     border-bottom acts as the shared hairline between the two. No gap.
     Spans full viewport width so it reads as an extension of the nav. */
  position: fixed;
  top: 68px;              /* = chrome height; JS keeps this in sync */
  left: 0; right: 0;
  z-index: 55;
  min-height: 420px;
  padding: 32px clamp(20px, 4vw, 48px) 40px;
  background: rgba(254, 255, 214, 0.72);
  border-top: 0;          /* chrome's border-bottom is the separator */
  border-bottom: 0.5px solid rgba(95, 94, 94, 0.16);
  box-shadow:
    0 40px 90px rgba(40, 40, 28, 0.22),
    0 12px 30px rgba(40, 40, 28, 0.10);
  backdrop-filter: saturate(1.2) blur(22px);
  -webkit-backdrop-filter: saturate(1.2) blur(22px);
  opacity: 0;
  pointer-events: none;
  /* Panel slides down a few pixels on open — chrome stays pinned, so the
     effect reads as the panel emerging from under the nav bar. */
  transform: translateY(-6px);
  transition:
    opacity .28s var(--ease-out),
    transform .32s var(--ease-snap);
  will-change: opacity, transform;
}
.mega-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* The inner holds every category stacked; max-width matches the landing's
   page-max so content aligns with the rest of the site, even though the
   panel background spans the full viewport. */
.mega-panel-inner {
  position: relative;
  min-height: 360px;
  max-width: var(--page-max);
  margin: 0 auto;
}
.mega-content {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .22s var(--ease-out), transform .28s var(--ease-out);
}
.mega-content.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---- MODULES grid: 4×2 cards ------------------------------------ */
.mega-grid-modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 960px) {
  .mega-grid-modules { grid-template-columns: repeat(2, 1fr); }
}
.mega-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 6px;
  padding: 16px 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 0.5px solid rgba(95, 94, 94, 0.12);
  transition: transform .2s var(--ease-out),
              background .2s var(--ease-out),
              border-color .2s var(--ease-out);
  color: var(--on-surface);
}
.mega-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(95, 94, 94, 0.28);
}
.mega-card-badge {
  justify-self: start;
  font-family: var(--f-label);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--primary);
  padding: 3px 8px;
  background: var(--primary-container);
  border-radius: 999px;
}
.mega-card-name {
  font-family: var(--f-headline);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--on-surface);
}
.mega-card-sub {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--on-surface-var);
}

/* ---- Split grid (Platform/Resources/Company): 2 cols + feature --- */
.mega-grid-split {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 20px;
}
@media (max-width: 960px) {
  .mega-grid-split { grid-template-columns: 1fr; }
}
.mega-col-title {
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--on-surface-var);
  margin-bottom: 10px;
}
.mega-row {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  margin: 0 -10px;
  border-radius: 10px;
  transition: background .18s var(--ease-out);
}
.mega-row:hover { background: rgba(255, 255, 255, 0.55); }
.mega-row-name {
  font-family: var(--f-headline);
  font-size: 15px;
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.2px;
}
.mega-row-sub {
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--on-surface-var);
}

.mega-feature {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px 22px 24px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(95, 94, 94, 0.92), rgba(83, 82, 82, 0.92));
  color: var(--on-primary);
}
.mega-feature-kicker {
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(250, 247, 246, 0.72);
}
.mega-feature-title {
  font-family: var(--f-headline);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: var(--on-primary);
}
.mega-feature-sub {
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(250, 247, 246, 0.82);
}


/* =================================================================
   Shared layout primitives
   ================================================================= */

section {
  position: relative;
  z-index: 2; /* lift above fixed video stage */
}

.strip-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.display {
  font-family: var(--f-headline);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -1.2px;
  color: var(--on-surface);
  margin: 0 0 var(--s-lg);
}

.lede {
  font-family: var(--f-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--on-surface-var);
  margin-bottom: var(--s-md);
}
.eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.bullets {
  list-style: none;
  padding: 0;
  margin: var(--s-xxl) 0 0;
  display: grid;
  gap: 14px;
}
.bullets li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px;
  align-items: baseline;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-surface);
}
.bullets li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 8px;
  background: var(--primary);
  border-radius: 50%;
}
.bullets li > span {
  font-weight: 700;
  color: var(--on-surface);
  font-family: var(--f-headline);
  grid-column: 2;
}
.bullets li > em {
  font-style: normal;
  color: var(--on-surface-var);
  grid-column: 2;
  font-size: 14.5px;
}


/* =================================================================
   HERO
   ================================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 140px clamp(20px, 4vw, 40px) 80px;
  z-index: 2;
}

.hero-inner {
  position: relative;
  max-width: 1100px;
  width: 100%;
  text-align: center;
  display: grid;
  gap: var(--s-xxl);
  place-items: center;
}

.hero-kicker {
  display: inline-flex;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.65);
  border: 0.5px solid rgba(95, 94, 94, 0.2);
  border-radius: 999px;
  font-family: var(--f-label);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--primary);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-lockup {
  display: grid;
  gap: clamp(10px, 1.6vw, 18px);
  place-items: center;
  width: 100%;
  will-change: transform;
}
.hero-mark {
  width: clamp(96px, 12vw, 160px);
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(40, 40, 28, 0.25));
}
.hero-word {
  width: min(92vw, 1100px);
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(40, 40, 28, 0.12));
}

.hero-tagline {
  font-family: var(--f-rounded);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.25;
  color: var(--on-surface);
  max-width: 720px;
  margin: 0;
  letter-spacing: -0.4px;
}
.hero-tagline span {
  display: block;
  margin-top: 8px;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--ink-soft);
  letter-spacing: 0;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-label);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 999px;
  transition: transform .2s var(--ease-out),
              box-shadow .25s var(--ease-out),
              background .2s var(--ease-out);
  will-change: transform;
}
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 10px 24px rgba(83, 82, 82, 0.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(83, 82, 82, 0.36);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.6);
  color: var(--on-surface);
  border: 0.5px solid var(--outline-variant);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.75);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 60px);
  justify-content: center;
  padding-top: var(--s-lg);
  margin-top: var(--s-md);
  border-top: 0.5px solid rgba(95, 94, 94, 0.15);
}
.hero-meta > div {
  display: grid;
  gap: 2px;
  text-align: center;
}
.hero-meta strong {
  font-family: var(--f-headline);
  font-weight: 800;
  font-size: 18px;
  color: var(--on-surface);
}
.hero-meta span {
  font-family: var(--f-label);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--on-surface-var);
  text-transform: uppercase;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  place-items: center;
  opacity: 0.7;
}
.hero-scroll-hint span {
  font-family: var(--f-label);
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--on-surface-var);
}
.hero-scroll-line {
  width: 1px;
  height: 30px;
  background: linear-gradient(var(--primary), transparent);
  animation: scroll-bounce 2s var(--ease-out) infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}


/* =================================================================
   Intro strip
   ================================================================= */

.strip.intro {
  padding: clamp(80px, 14vh, 160px) 0 clamp(60px, 10vh, 120px);
  background: linear-gradient(180deg,
    rgba(254, 255, 214, 0) 0%,
    rgba(254, 255, 214, 0.92) 40%,
    var(--bg) 100%);
}


/* =================================================================
   Module sections (Gale / Cirrus / Ashe)
   ================================================================= */

.module {
  padding: clamp(60px, 10vh, 120px) clamp(20px, 4vw, 48px);
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  position: relative;
}

.module-gale    { background: var(--bg); }
.module-cirrus  { background: var(--surface-c-low); }
.module-ashe    { background: var(--bg); }

/* Shape the seams so strips feel like paper, not divs */
.module-cirrus::before,
.module-cirrus::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 40px;
  pointer-events: none;
}
.module-cirrus::before {
  top: -1px;
  background: linear-gradient(180deg, var(--bg), var(--surface-c-low));
}
.module-cirrus::after {
  bottom: -1px;
  background: linear-gradient(0deg, var(--bg), var(--surface-c-low));
}

/* Phone on right by default (Gale), left for Cirrus, right again for Ashe */
.module-cirrus { grid-template-columns: 420px 1fr; }

@media (max-width: 960px) {
  .module,
  .module-cirrus {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .module .phone-wrap { order: 2; justify-self: center; }
  .module .module-copy { order: 1; }
  .module-cirrus .phone-wrap { order: 2; }
  .module-cirrus .module-copy { order: 1; }
}


/* =================================================================
   Phone frame + iOS chrome
   ================================================================= */

.phone-wrap {
  display: grid;
  place-items: center;
  perspective: 1400px;
  will-change: transform;
}

.phone {
  position: relative;
  width: 360px;
  height: 740px;
  max-width: 84vw;
  background: linear-gradient(180deg, #2a2a2e, #14141a);
  border-radius: 54px;
  padding: 10px;
  box-shadow: var(--shadow-phone);
  transform: translateY(0);
  transition: transform .8s var(--ease-out);
}
.phone::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 55px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
  pointer-events: none;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
}
.phone-notch {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  width: 108px; height: 30px;
  background: #000;
  border-radius: 24px;
  z-index: 3;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 44px;
  overflow: hidden;
  background: var(--bg);
  color: var(--on-surface);
  font-family: var(--f-body);
  display: flex;
  flex-direction: column;
}

/* iOS status bar */
.ios-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px 4px;
  font-family: var(--f-rounded);
  font-weight: 600;
  font-size: 13px;
  color: var(--on-surface);
  height: 40px;
}
.ios-status-right { display: inline-flex; gap: 6px; align-items: center; color: var(--on-surface); }

/* iOS navigation bar — mirrors .navigationBarTitleDisplayMode(.inline) */
.ios-nav {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  padding: 4px 16px 6px;
  color: var(--on-surface);
}
.ios-nav-title {
  font-family: var(--f-headline);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}
.ios-nav-left, .ios-nav-right {
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ios-nav-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
  opacity: 0.6;
}

.ios-home-indicator {
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 4px;
  background: #0b0b0e;
  opacity: 0.85;
  border-radius: 2px;
}


/* =================================================================
   Gale UI (matches HomeView + ChatView)
   ================================================================= */

.nimbus-ui[data-ui="gale"] {
  background: var(--bg);
  position: relative;
}

/* Marketing-only hero greeting retained for index.html's Gale showcase
   section, which cross-fades to the chat to set emotional context. The
   canonical gale.html mockup has no greeting — it matches the running app. */
.gale-hero {
  padding: 18px 20px 10px;
}
.gale-greet-small {
  font-family: var(--f-rounded);
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
}
.gale-greet-big {
  font-family: var(--f-rounded);
  font-size: 28px;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.15;
  letter-spacing: -0.5px;
}

/* GaleModelPill — .overlay(alignment: .top) in the app, rendered here
   as a normal flex child above the thread. Capsule shape with the
   active-model label + chevron.down; surface-container fill, shadow
   radius 6 offset y=2. */
.gale-pill {
  margin: 8px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface-c-lowest);
  border: 0.5px solid var(--outline-variant);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(40, 40, 28, 0.12);
  font-family: var(--f-label);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--on-surface);
  max-width: 82%;
  align-self: center;
}
.gale-pill-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--success);
  flex: 0 0 auto;
}
.gale-pill-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.gale-pill-chev { color: var(--on-surface-var); flex: 0 0 auto; }

/* MessagesListView — ScrollView with LazyVStack(spacing: 16) and .padding() = 16 */
.gale-thread, .cirrus-thread {
  flex: 1;
  overflow: hidden;
  padding: 12px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* MessageView — HStack(alignment: .top) with avatar on one side + bubble stack */
.msg {
  display: flex;
  gap: 8px;
  max-width: 100%;
  align-items: flex-start;
}
.msg-user { justify-content: flex-end; }
.msg-assistant { justify-content: flex-start; }

/* Cirrus assistant rows stack their content (step-card + bubble + diff-card)
   vertically — no avatar, and the diff card needs the full thread width. */
.cirrus-thread .msg-assistant {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* Avatars: frame(width: 32, height: 32). NimbusAvatar = gradient "N",
   UserAvatar = surface circle with user initial. */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-family: var(--f-headline);
  font-size: 14px;
  font-weight: 500;
}
.avatar-nimbus {
  background: linear-gradient(145deg, var(--primary), var(--primary-dim));
  color: var(--on-primary);
}
.avatar-n {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.avatar-user {
  background: var(--surface-c);
  color: var(--on-surface);
  border: 0.5px solid var(--outline-variant);
}

/* msg-body — VStack spacing 4 that wraps bubble + timestamp */
.msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;     /* children take full column width so the
                                thinking-block and bubble stay stacked
                                vertically no matter how long the stream
                                response gets — the flex-start default
                                was letting the bubble sit beside the
                                thinking-block on narrow screens. */
  min-width: 0;
  flex: 1 1 auto;            /* own the remaining row space after the
                                avatar; avoids a 0-width column collapse
                                that made thinking-block render as a
                                vertical stripe while the bubble grew. */
  max-width: calc(100% - 40px);
}

/* MessageContentView — padding H16 V12, RoundedRectangle(cornerRadius: 16) */
.bubble {
  padding: 12px 16px;
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.45;
  border-radius: 16px;
}
/* user bubble = Color.nimbusPrimary, onPrimary text */
.bubble-user {
  background: linear-gradient(145deg, var(--primary), var(--primary-dim));
  color: var(--on-primary);
  max-width: 100%;
}
/* assistant bubble = Color.nimbusSurface, nimbusText. Slightly elevated
   from the page bg so it reads as a card against the warm-paper canvas. */
.bubble-assistant {
  display: block;
  width: 100%;
  align-self: stretch;
  background: var(--surface-c-low);
  color: var(--on-surface);
  border: 0.5px solid rgba(187, 186, 167, 0.55);
  max-width: 100%;
  min-height: 22px;
}
.bubble-assistant::after {
  /* Blinking caret while streaming — mirrors the animated text cursor. */
  content: '';
  display: inline-block;
  width: 6px; height: 14px;
  margin-left: 3px;
  background: var(--primary);
  transform: translateY(2px);
  opacity: 0;
  animation: caret 1s steps(2) infinite;
  border-radius: 1px;
}
.bubble-assistant.is-done::after { display: none; }
@keyframes caret { 50% { opacity: 0.85; } }

/* Text(.time) — NimbusTypography.caption2 on secondary */
.msg-time {
  font-family: var(--f-body);
  font-size: 10.5px;
  color: var(--on-surface-var);
  padding: 0 2px;
}

/* ThinkingBlockView — collapsible disclosure with brain icon + header.
   surfaceContainerHigh at 0.65 opacity, radius 12, divider opacity 0.25. */
.thinking-block {
  display: block;
  width: 100%;
  align-self: stretch;
  border-radius: 12px;
  background: rgba(240, 239, 221, 0.65);
  border: 0.5px solid rgba(187, 186, 167, 0.3);
  overflow: hidden;
  font-family: var(--f-body);
}
.thinking-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
}
.thinking-ic { color: var(--primary); flex: 0 0 auto; }
.thinking-title {
  flex: 1 1 auto;
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface);
}
.thinking-chev { color: var(--on-surface-var); flex: 0 0 auto; }
.thinking-body {
  padding: 0 12px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--on-surface-var);
  border-top: 0.5px solid rgba(187, 186, 167, 0.25);
  padding-top: 8px;
}


/* Suggestion chips row */
.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 16px 10px;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--f-label);
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface);
  padding: 8px 14px;
  background: var(--surface-c-high);
  border: 0.5px solid var(--outline-variant);
  border-radius: 999px;
}
.chip-ic { color: var(--primary); font-size: 12px; }


/* NimbusChatComposer.swift — VStack(spacing: 10) with textField + actionRow.
   padding: H18 V14, surfaceContainerHigh bg, outlineVariant 0.5 stroke,
   RoundedRectangle(cornerRadius: 28). Submit = Circle 34 with arrow.up. */
.composer {
  margin: 4px 16px 14px;
  padding: 14px 18px;
  background: var(--surface-c-high);
  border: 0.5px solid rgba(187, 186, 167, 0.5);
  border-radius: 28px;
}
.composer-slim { margin-bottom: 12px; }
.composer-text {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--on-surface-var);
  padding-bottom: 10px;
}
.composer-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ComposerAction.Style.plain — size 32, no bg, plain icon */
.composer-icon {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-surface-var);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.composer-spacer { flex: 1; }
/* ComposerChip — Capsule pill with icon + label, used by Cirrus for the
   current repo (arrow.triangle.branch). surfaceContainerHighest fill,
   outlineVariant 0.5 stroke, padding H12 V7. */
.composer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--surface-c-hi);
  border: 0.5px solid rgba(187, 186, 167, 0.6);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--on-surface);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 140px;
}
.composer-chip .ic { color: var(--on-surface-var); flex: 0 0 auto; }
/* modelSelector — label + chevron.down, onSurfaceVariant tint, padding H10 V5 */
.composer-model {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface-var);
  padding: 5px 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.composer-model-label {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* submitButton — Circle 34×34, primary fill when canSubmit, arrow.up in .white.
   Uses onSurfaceVariant @ 35% opacity when disabled. Here we render the
   "canSubmit" state because the composer is the marketing mockup. */
.composer-submit {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  padding: 0;
}


/* =================================================================
   Step cards (StepCard.swift)
   ================================================================= */

.step-card {
  border-radius: var(--r-xl);
  background: var(--surface-c);
  border: 0.5px solid rgba(187, 186, 167, 0.6);
  overflow: hidden;
  align-self: stretch;
}
.step-head {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}
.step-icon {
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 13px;
}
.step-ic-run {
  color: var(--primary);
  animation: step-pulse 1.2s var(--ease-out) infinite;
}
@keyframes step-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.step-ic-block { color: var(--warning); }
.step-ic-done  { color: var(--primary); }

.step-meta { min-width: 0; }
.step-title {
  font-family: var(--f-rounded);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step-sub {
  font-family: var(--f-rounded);
  font-size: 11px;
  color: var(--on-surface-var);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step-chev, .step-check {
  color: var(--on-surface-var);
  font-size: 11px;
  font-weight: 700;
}
.step-check { color: var(--primary); }

.step-blocked {
  border-color: rgba(242, 161, 43, 0.5);
}


/* =================================================================
   Cirrus UI
   ================================================================= */

.repo-bar {
  display: grid;
  grid-template-columns: 32px 1fr 12px;
  gap: 10px;
  align-items: center;
  margin: 8px 16px 4px;
  padding: 12px 14px;
  background: var(--surface-c-low);
  border-radius: var(--r-xl);
}
.repo-ic {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.repo-meta { min-width: 0; }
.repo-name {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.repo-branch {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--on-surface-var);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.repo-chev {
  color: var(--on-surface-var);
  font-size: 18px;
  line-height: 1;
}

.tabbar {
  display: flex;
  margin: 6px 16px 8px;
  padding: 3px;
  background: var(--surface-variant);
  border-radius: var(--r-lg);
}
.tab {
  flex: 1;
  padding: 7px 10px;
  font-family: var(--f-label);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-surface-var);
  border-radius: 6px;
  text-align: center;
}
.tab.is-active {
  background: var(--surface-c-lowest);
  color: var(--on-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* InteractiveDiffCardView 1:1 — surfaceContainerLow fill, outlineVariant
   0.5 stroke, xLarge (12pt) corner. Header + collapsible hunks + footer. */
.diff-card {
  margin-top: 4px;
  border-radius: 12px;
  background: var(--surface-c-low);
  border: 0.5px solid var(--outline-variant);
  overflow: hidden;
}

/* header — doc.text icon tile (28×28 in surfaceContainerHighest, large
   radius 8pt) + filePath (bodyEmphasis) + summary (caption variant) +
   +adds/−dels + chevron. padding(12) on the whole row. */
.diff-head {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
}
.diff-ic {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-c-hi);
  color: var(--primary);
  border-radius: 8px;
  flex: 0 0 auto;
}
.diff-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.diff-path {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diff-summary {
  font-family: var(--f-body);
  font-size: 11.5px;
  color: var(--on-surface-var);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diff-counts {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.diff-add {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  color: #1e7a3f;
}
.diff-del {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--error);
}
.diff-chev { color: var(--on-surface-var); flex: 0 0 auto; }

/* Expanded hunks — mono font .footnote weight, colored by line type. */
.diff-hunk {
  background: rgba(95, 94, 94, 0.06);
  padding: 5px 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--on-surface-var);
  border-top: 0.5px solid var(--outline-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diff-body {
  padding: 4px 0 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.45;
  overflow-x: auto;
}
.diff-line {
  display: grid;
  grid-template-columns: 34px 1fr;
  padding: 2px 0;
}
.diff-gutter {
  padding: 0 8px;
  color: var(--on-surface-var);
  text-align: right;
  user-select: none;
  font-weight: 700;
}
.diff-code { padding-right: 12px; white-space: pre; color: var(--on-surface); }
.diff-line.diff-ctx { background: transparent; }
.diff-line.diff-add { background: rgba(52, 186, 102, 0.08); }
.diff-line.diff-add .diff-gutter { color: #1e7a3f; }
.diff-line.diff-del { background: rgba(166, 69, 66, 0.08); }
.diff-line.diff-del .diff-gutter { color: var(--error); }

/* InteractiveDiffCardView footer — divider + action row. Default state
   shows Reject (ghost / surfaceContainerHighest) + Approve & open PR
   (primary). Both frame(maxWidth: .infinity), large radius, V10 padding. */
.diff-footer {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 0.5px solid var(--outline-variant);
}
.diff-btn {
  flex: 1 1 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  font-family: var(--f-label);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.diff-btn-ghost {
  background: var(--surface-c-hi);
  color: var(--on-surface);
}
.diff-btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}


/* =================================================================
   Ashe UI — AsheView.swift with sections: Long run · Activity · Hands
   · Manual wake. Vertical ScrollView with VStack(spacing: 20), padding 16.
   ================================================================= */

.ashe-section {
  padding: 0 16px;
  margin-bottom: 20px;
}
.ashe-section-head { margin-bottom: 8px; padding: 0 4px; }

/* AsheSection title: 11pt bold rounded, tracking 1pt, uppercase, secondary */
.ashe-section-title {
  font-family: var(--f-rounded);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--on-surface-var);
}
/* AsheSection subtitle: .footnote, secondary, fixedSize vertical */
.ashe-section-sub {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--on-surface-var);
  margin-top: 4px;
  line-height: 1.4;
}

.step-stream {
  display: grid;
  gap: 8px;
  padding-bottom: 0;
}

/* AsheHandRow — HStack top-aligned: 22-wide statusIcon + VStack(name, sub,
   err) + play.fill button in 8px padded Circle with primary.opacity(0.12).
   Row bg Color.nimbusSurface, radius 12, padding 12. */
.hand-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--surface-c-low);
  border-radius: 12px;
}
.hand-ic {
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--success);
  font-size: 16px;
  padding-top: 2px;
}
.hand-name {
  font-family: var(--f-rounded);
  font-size: 14px;
  font-weight: 600;
  color: var(--on-surface);
}
.hand-sub {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--on-surface-var);
  margin-top: 2px;
}
/* Button(action: onRun) — play.fill in Circle, primary.opacity(0.12) bg */
.hand-run {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(95, 94, 94, 0.12);
  color: var(--primary);
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}


/* =================================================================
   Why Nimbus
   ================================================================= */

.why {
  padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 48px);
  background: linear-gradient(180deg, var(--bg), var(--surface-c-low));
  text-align: center;
}
.why .strip-inner { text-align: center; }
.why .display { margin-inline: auto; max-width: 22ch; }

.pillars {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  padding: 32px 28px;
  background: var(--surface-c-lowest);
  border: 0.5px solid var(--outline-variant);
  border-radius: 20px;
  text-align: left;
  box-shadow: var(--shadow-soft);
}
.pillar-ic {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--primary-container);
  color: var(--primary);
  margin-bottom: 18px;
}
.pillar h3 {
  font-family: var(--f-headline);
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--on-surface);
  letter-spacing: -0.3px;
}
.pillar p {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--on-surface-var);
  margin: 0;
}


/* =================================================================
   Final CTA + footer
   ================================================================= */

.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 48px) 40px;
  /* Fallback while the solar image streams in */
  background: var(--surface-c-low);
  text-align: center;
}

/* Solar backdrop — mirrors .bg-video treatment (same filter, same opacity)
   so the CTA blends with the hero's visual language. The wrapper is inside
   the section and .cta has overflow:hidden, so the image never bleeds into
   the footer below. */
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.cta-bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* Identical film treatment to .bg-video */
  filter: brightness(0.72) saturate(0.78) contrast(1.02);
  opacity: 0.62;
}
/* Keep the card above the backdrop layers */
.cta > .cta-card { position: relative; z-index: 2; }

.cta-card {
  max-width: 760px;
  margin: 0 auto 80px;
  padding: clamp(40px, 6vw, 72px);
  background: var(--surface-c-lowest);
  border: 0.5px solid var(--outline-variant);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
}
.cta-mark {
  width: 80px; height: 80px;
  color: var(--primary);
  margin: 0 auto 20px;
}
/* =================================================================
   Waitlist form — squircle, wood-palette, matches composer radius
   ================================================================= */
.waitlist {
  margin: 28px auto 0;
  max-width: 520px;
  text-align: left;
}
.waitlist-label {
  display: block;
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-var);
  margin: 0 0 10px 4px;
}
.waitlist-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  padding: 6px;
  background: var(--surface-c-low);
  border: 0.5px solid var(--outline-variant);
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 24px rgba(56, 57, 43, 0.08);
  transition: border-color 160ms var(--ease-out),
              box-shadow 160ms var(--ease-out);
}
.waitlist-row:focus-within {
  border-color: var(--primary);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 28px rgba(56, 57, 43, 0.14),
    0 0 0 3px rgba(95, 94, 94, 0.14);
}
.waitlist-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 14px;
  font: 500 16px/1.3 var(--f-body);
  color: var(--on-surface);
  -webkit-appearance: none;
  appearance: none;
}
.waitlist-input::placeholder { color: var(--on-surface-var); opacity: 0.7; }
.waitlist-submit {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 0;
  border-radius: 16px;
  background: var(--on-surface);
  color: var(--surface-c-lowest);
  font-family: var(--f-headline);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 140ms var(--ease-snap),
              background 140ms var(--ease-out),
              opacity 140ms var(--ease-out);
}
.waitlist-submit:hover { background: var(--primary); }
.waitlist-submit:active { transform: scale(0.98); }
.waitlist-submit:disabled { opacity: 0.6; cursor: progress; }
.waitlist-submit-ic { flex: 0 0 auto; }
.waitlist-note {
  margin: 10px 4px 0;
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--on-surface-var);
}
.waitlist-status {
  margin: 8px 4px 0;
  min-height: 18px;
  font-family: var(--f-label);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-surface-var);
}
.waitlist-status[data-state="ok"]    { color: var(--success); }
.waitlist-status[data-state="error"] { color: var(--error); }

@media (max-width: 520px) {
  .waitlist-row { flex-direction: column; padding: 8px; }
  .waitlist-input { padding: 10px 12px; }
  .waitlist-submit { width: 100%; }
}

/* =================================================================
   Site footer — link-heavy, shared across all pages
   ================================================================= */

.site-foot {
  position: relative;
  z-index: 2;
  /* Dark ink behind the rounded cream card — shows in the top-left and
     top-right corners where the card's border-radius cuts away, so the
     site reads as "cream card on dark ink" rather than "cream card on
     unfinished white". */
  background: var(--on-surface);
  padding: 0;
  color: var(--on-surface-var);
  font-family: var(--f-body);
}
.site-foot-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1.1fr 2.4fr;
  gap: clamp(32px, 6vw, 72px);
  background:
    radial-gradient(140% 180% at 0% 0%, #ece9cf 0%, #dedbbe 55%, #c9c5a2 100%);
  border: 1px solid var(--outline-variant);
  border-bottom: 0;
  border-radius: clamp(28px, 3.5vw, 44px) clamp(28px, 3.5vw, 44px) 0 0;
  padding: clamp(48px, 7vw, 88px) clamp(32px, 6vw, 96px) clamp(36px, 5vw, 64px);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.35) inset, 0 -24px 60px -28px rgba(58,48,24,0.18);
}
@media (max-width: 860px) {
  .site-foot-inner { grid-template-columns: 1fr; }
}

.site-foot-brand { display: grid; gap: 14px; align-content: start; }
.site-foot-brand .chrome-brand { filter: none; }
.site-foot-mission {
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-surface-var);
  max-width: 36ch;
  margin: 0;
}

.site-foot-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 3vw, 40px);
}
@media (max-width: 700px) { .site-foot-cols { grid-template-columns: repeat(2, 1fr); } }

.site-foot-col {
  display: grid;
  gap: 10px;
  align-content: start;
}
.site-foot-title {
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--on-surface);
  margin-bottom: 4px;
}
.site-foot-col a {
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--on-surface-var);
  transition: color .18s var(--ease-out);
}
.site-foot-col a:hover { color: var(--on-surface); }

.site-foot-legal {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(20px, 2.5vw, 32px) clamp(32px, 6vw, 96px) clamp(24px, 3vw, 40px);
  background: #c9c5a2;
  border-top: 1px solid var(--outline-variant);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  font-family: var(--f-label);
  font-size: 12px;
  color: var(--on-surface-var);
  align-items: center;
}
.site-foot-legal > :nth-child(2) { text-align: center; }
.site-foot-legal > :nth-child(3) { justify-self: end; }
.site-foot-legal-links { display: inline-flex; gap: 12px; align-items: center; }
.site-foot-legal-links a {
  font-weight: 600;
  color: var(--on-surface-var);
}
.site-foot-legal-links a:hover { color: var(--on-surface); }
@media (max-width: 700px) {
  .site-foot-legal { grid-template-columns: 1fr; text-align: center; }
  .site-foot-legal > :nth-child(3) { justify-self: center; }
}


/* =================================================================
   Subpage shared chrome — Pexels cloud/sky backdrop, hero, sticky
   side-index, long-form content hierarchy, blog cards.
   ================================================================= */

.subpage {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  z-index: 2;
}

/* Photo background: fixed, fills the viewport. JS swaps the src from the
   Pexels pool at load. Wash + grain + vignette reused from landing feel. */
.bg-photo-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78) saturate(0.82) contrast(1.02);
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.bg-photo.is-ready { opacity: 0.62; }

.subpage-hero {
  padding: clamp(120px, 16vh, 200px) clamp(20px, 4vw, 48px) clamp(40px, 6vh, 72px);
  text-align: center;
}
.subpage-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: var(--s-lg);
  place-items: center;
}
.subpage-kicker {
  display: inline-flex;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.65);
  border: 0.5px solid rgba(95, 94, 94, 0.2);
  border-radius: 999px;
  font-family: var(--f-label);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--primary);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.subpage-title {
  font-family: var(--f-headline);
  font-weight: 800;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.04;
  letter-spacing: -1.4px;
  color: var(--on-surface);
  margin: 0;
}
.subpage-sub {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}
.subpage-meta {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  font-family: var(--f-label);
  font-size: 12px;
  color: var(--on-surface-var);
}
.subpage-meta strong { color: var(--on-surface); font-weight: 700; }

/* Long-form layout — sticky side index + content column ------------ */
.doc {
  max-width: var(--page-max);
  margin: 0 auto clamp(60px, 10vh, 120px);
  padding: 0 clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 860px) {
  .doc { grid-template-columns: 1fr; }
  .doc-index { position: static !important; max-height: none !important; overflow: visible !important; }
}

.doc-index {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  display: grid;
  gap: 4px;
  padding: 18px 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 0.5px solid rgba(95, 94, 94, 0.16);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.doc-index-title {
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--on-surface-var);
  margin-bottom: 6px;
  padding: 0 6px;
}
.doc-index a {
  font-family: var(--f-label);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-surface-var);
  padding: 8px 10px;
  border-radius: 8px;
  border-left: 2px solid transparent;
  transition: color .18s var(--ease-out),
              background .18s var(--ease-out),
              border-color .18s var(--ease-out);
  line-height: 1.3;
}
.doc-index a:hover { color: var(--on-surface); background: rgba(255,255,255,0.45); }
.doc-index a.is-current {
  color: var(--on-surface);
  background: rgba(255, 255, 255, 0.7);
  border-left-color: var(--primary);
}

.doc-body {
  background: rgba(255, 255, 255, 0.72);
  border: 0.5px solid rgba(95, 94, 94, 0.16);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 56px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}
.doc-body section { scroll-margin-top: 100px; }
.doc-body section + section { margin-top: clamp(32px, 5vw, 56px); }

.doc-body h2 {
  font-family: var(--f-headline);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--on-surface);
  margin: 0 0 16px;
}
.doc-body h3 {
  font-family: var(--f-headline);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 20px);
  letter-spacing: -0.3px;
  color: var(--on-surface);
  margin: 24px 0 8px;
}
.doc-body p {
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--on-surface);
  margin: 0 0 14px;
}
.doc-body p:last-child { margin-bottom: 0; }
.doc-body ul, .doc-body ol {
  margin: 0 0 14px;
  padding-left: 22px;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--on-surface);
}
.doc-body li + li { margin-top: 6px; }
.doc-body strong { color: var(--on-surface); font-weight: 700; }
.doc-body em { font-style: italic; color: var(--ink-soft); }
.doc-body code {
  font-family: var(--f-mono);
  font-size: 13.5px;
  padding: 2px 6px;
  background: var(--surface-c);
  border-radius: 4px;
  color: var(--ink);
}
.doc-body a:not(.btn) {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: rgba(95, 94, 94, 0.35);
  text-underline-offset: 3px;
}
.doc-body a:not(.btn):hover { text-decoration-color: var(--primary); }


/* ---- Blog index -------------------------------------------------- */
.blog-grid {
  max-width: var(--page-max);
  margin: 0 auto clamp(60px, 10vh, 120px);
  padding: 0 clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  padding: 24px 24px 22px;
  background: rgba(255, 255, 255, 0.78);
  border: 0.5px solid rgba(95, 94, 94, 0.16);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
  transition: transform .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 40px 90px rgba(40, 40, 28, 0.22),
    0 12px 28px rgba(40, 40, 28, 0.10);
}
.blog-card-meta {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--on-surface-var);
}
.blog-card-tag {
  color: var(--primary);
  padding: 3px 8px;
  background: var(--primary-container);
  border-radius: 999px;
  letter-spacing: 1px;
}
.blog-card-title {
  font-family: var(--f-headline);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--on-surface);
  margin: 0;
}
.blog-card-excerpt {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-surface-var);
  margin: 0;
}
.blog-card-read {
  font-family: var(--f-label);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.blog-card-read::after {
  content: '→';
  transition: transform .2s var(--ease-out);
}
.blog-card:hover .blog-card-read::after { transform: translateX(3px); }


/* =================================================================
   Scroll-reveal primitives (JS toggles .is-in)
   ================================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal-stagger].is-in > * {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .08s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .16s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .24s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .32s; }

/* Phone reveal — subtle zoom, no tilt */
.phone-wrap[data-reveal-phone] .phone {
  transform: scale(0.92) translateY(40px);
  opacity: 0;
  transition: transform 1.1s var(--ease-snap), opacity .9s var(--ease-out);
}
.phone-wrap[data-reveal-phone].is-in .phone {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .bg-video { transform: scale(1.05) !important; }
}


/* =================================================================
   MODULE PAGES — shared layout + per-module phone-UI styles.
   Each module page uses the subpage backdrop + mega-nav + footer
   (same as privacy/terms/blog) and adds a hero with an iPhone
   mockup, feature cards, a long-form spec section with the
   scroll-spy side index, and a related-modules grid.
   ================================================================= */

.module-page-hero {
  padding: clamp(120px, 16vh, 180px) clamp(20px, 4vw, 48px) clamp(40px, 6vh, 72px);
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 960px) {
  .module-page-hero {
    grid-template-columns: 1fr;
    padding-top: clamp(96px, 14vh, 140px);
  }
  .module-page-hero .phone-wrap { justify-self: center; order: 2; }
  .module-page-hero-copy { order: 1; text-align: center; }
  .module-page-hero-copy .module-page-cta,
  .module-page-hero-copy .module-page-meta { justify-content: center; }
  .module-page-hero-copy .module-page-badge { justify-self: center; }
}

.module-page-hero-copy { display: grid; gap: var(--s-lg); align-content: center; }

.module-page-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.65);
  border: 0.5px solid rgba(95, 94, 94, 0.2);
  border-radius: 999px;
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  justify-self: start;
}
.module-page-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.module-page-badge[data-status="shipping"] .module-page-badge-dot { background: var(--success); }
.module-page-badge[data-status="beta"] .module-page-badge-dot { background: var(--warning); }
.module-page-badge[data-status="exploring"] .module-page-badge-dot { background: var(--on-surface-var); }

.module-page-title {
  font-family: var(--f-headline);
  font-weight: 800;
  font-size: clamp(38px, 5.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -1.6px;
  color: var(--on-surface);
  margin: 0;
}
.module-page-lede {
  font-family: var(--f-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}
.module-page-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.module-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 0.5px solid rgba(95, 94, 94, 0.18);
}
.module-page-meta > div { display: grid; gap: 2px; }
.module-page-meta strong {
  font-family: var(--f-headline);
  font-weight: 800;
  font-size: 16px;
  color: var(--on-surface);
}
.module-page-meta span {
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--on-surface-var);
}

/* Feature row — 3 cards beneath the hero summarising flagship capabilities. */
.module-features {
  max-width: var(--page-max);
  margin: 0 auto clamp(48px, 8vh, 80px);
  padding: 0 clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 860px) { .module-features { grid-template-columns: 1fr; } }

.module-feature {
  padding: 26px 26px 28px;
  background: rgba(255, 255, 255, 0.75);
  border: 0.5px solid rgba(95, 94, 94, 0.16);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 10px;
  align-content: start;
}
.module-feature-ic {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--primary-container);
  color: var(--primary);
  border-radius: 10px;
  margin-bottom: 4px;
}
.module-feature-title {
  font-family: var(--f-headline);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--on-surface);
  margin: 0;
}
.module-feature-sub {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-surface-var);
  margin: 0;
}

/* Related-modules strip at the bottom of each module page */
.module-related {
  max-width: var(--page-max);
  margin: clamp(40px, 6vh, 80px) auto clamp(60px, 10vh, 120px);
  padding: 0 clamp(20px, 4vw, 48px);
}
.module-related-head {
  text-align: center;
  margin-bottom: 28px;
}
.module-related-kicker {
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--on-surface-var);
  display: inline-block;
  margin-bottom: 8px;
}
.module-related-title {
  font-family: var(--f-headline);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.6px;
  color: var(--on-surface);
  margin: 0;
}
.module-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 960px) { .module-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .module-related-grid { grid-template-columns: 1fr; } }

.module-related-card {
  padding: 18px 18px 20px;
  background: rgba(255, 255, 255, 0.75);
  border: 0.5px solid rgba(95, 94, 94, 0.14);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  gap: 6px;
  transition: transform .2s var(--ease-out),
              background .2s var(--ease-out),
              border-color .2s var(--ease-out);
}
.module-related-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(95, 94, 94, 0.3);
}
.module-related-name {
  font-family: var(--f-headline);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--on-surface);
}
.module-related-sub {
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--on-surface-var);
}


/* =================================================================
   MIST phone mockup — MistSearchView.swift 1:1
   All rules scoped under `.nimbus-ui[data-ui="mist"]` so they win
   against the global `img, svg, video { display: block }` reset and
   against any user-agent h1/button defaults.
   ================================================================= */

.nimbus-ui[data-ui="mist"] {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Inline SVGs inside any Mist control must NOT behave as block elements
   (breaks flex rows). Override the global reset for everything under the
   Mist mockup scope. */
.nimbus-ui[data-ui="mist"] svg { display: inline-block; vertical-align: middle; }

/* .navigationBarTitleDisplayMode(.large) — title left, tools right. */
.nimbus-ui[data-ui="mist"] .mist-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px 8px;
  gap: 12px;
}
.nimbus-ui[data-ui="mist"] .mist-title {
  font-family: var(--f-headline);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.1;
  color: var(--on-surface);
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
.nimbus-ui[data-ui="mist"] .mist-tools {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.nimbus-ui[data-ui="mist"] .mist-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--primary);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}
.nimbus-ui[data-ui="mist"] .mist-tool svg { width: 20px; height: 20px; }
.nimbus-ui[data-ui="mist"] .mist-tool-primary svg { width: 24px; height: 24px; }

/* searchField — pill with magnifier + query + clear. Rounded 18pt,
   surface-variant fill so it pops off the cream canvas. */
.nimbus-ui[data-ui="mist"] .mist-search {
  margin: 4px 16px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface-c);
  border: 0.5px solid var(--outline-variant);
  border-radius: 14px;
}
.nimbus-ui[data-ui="mist"] .mist-search-ic {
  color: var(--primary);
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.nimbus-ui[data-ui="mist"] .mist-search-q {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nimbus-ui[data-ui="mist"] .mist-search-clear {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--on-surface-var);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}
.nimbus-ui[data-ui="mist"] .mist-search-clear svg { width: 16px; height: 16px; }

/* hitsList — vertical stack of section-heads + hit cards. */
.nimbus-ui[data-ui="mist"] .mist-results {
  flex: 1 1 auto;
  padding: 0 16px 64px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* Section header — icon + uppercase label + count, all on one row. */
.nimbus-ui[data-ui="mist"] .mist-section-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 2px;
}
.nimbus-ui[data-ui="mist"] .mist-section-head-web { margin-top: 6px; }
.nimbus-ui[data-ui="mist"] .mist-section-ic {
  color: var(--primary);
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
}
.nimbus-ui[data-ui="mist"] .mist-section-title {
  font-family: var(--f-rounded);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--on-surface-var);
  line-height: 1;
}
.nimbus-ui[data-ui="mist"] .mist-section-count {
  font-family: var(--f-body);
  font-size: 10.5px;
  color: var(--on-surface-var);
  line-height: 1;
}

/* HitRow — white card with outline for maximum contrast on cream bg. */
.nimbus-ui[data-ui="mist"] .mist-hit {
  padding: 12px 14px;
  background: var(--surface-c-lowest);
  border: 0.5px solid var(--outline-variant);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(40, 40, 28, 0.04);
}
.nimbus-ui[data-ui="mist"] .mist-hit-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.nimbus-ui[data-ui="mist"] .mist-hit-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-headline);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* HybridMatchChip — two stacked colored bars. Show the vector and BM25
   contribution at a glance. */
.nimbus-ui[data-ui="mist"] .mist-hybrid-chip {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 5px 7px;
  background: var(--surface-c);
  border-radius: 6px;
  flex: 0 0 auto;
  width: 40px;
  box-sizing: border-box;
}
.nimbus-ui[data-ui="mist"] .mist-hybrid-bar {
  height: 3px;
  width: var(--w, 50%);
  border-radius: 999px;
  background: var(--on-surface-var);
}
.nimbus-ui[data-ui="mist"] .mist-hybrid-v { background: var(--primary); }
.nimbus-ui[data-ui="mist"] .mist-hybrid-b { background: var(--success); }

/* ScoreChip — monospaced 0.xx score in a primary-tinted capsule. */
.nimbus-ui[data-ui="mist"] .mist-score-chip {
  flex: 0 0 auto;
  padding: 3px 8px;
  background: rgba(95, 94, 94, 0.12);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}

/* Snippet — secondary body text, clamped to 3 lines. */
.nimbus-ui[data-ui="mist"] .mist-hit-snippet {
  margin: 8px 0 0;
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--on-surface-var);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* WebHitRow — same card chrome as HitRow, with favicon tile leading. */
.nimbus-ui[data-ui="mist"] .mist-webhit {
  padding: 12px 14px;
  background: var(--surface-c-lowest);
  border: 0.5px solid var(--outline-variant);
  border-radius: 14px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(40, 40, 28, 0.04);
}
.nimbus-ui[data-ui="mist"] .mist-webhit-favicon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(145deg, var(--primary), var(--primary-dim));
  color: var(--on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-headline);
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}
.nimbus-ui[data-ui="mist"] .mist-webhit-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nimbus-ui[data-ui="mist"] .mist-webhit-title {
  font-family: var(--f-headline);
  font-size: 13px;
  font-weight: 700;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.nimbus-ui[data-ui="mist"] .mist-webhit-host {
  font-family: var(--f-body);
  font-size: 11px;
  color: var(--on-surface-var);
  line-height: 1.3;
}
.nimbus-ui[data-ui="mist"] .mist-webhit-snippet {
  margin: 4px 0 0;
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--on-surface-var);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Status footer — pinned to bottom with a frosted material look. */
.nimbus-ui[data-ui="mist"] .mist-footer {
  position: absolute;
  bottom: 22px;
  left: 0; right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(254, 255, 214, 0.85);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top: 0.5px solid var(--outline-variant);
  font-family: var(--f-body);
  font-size: 11px;
  color: var(--on-surface-var);
}
.nimbus-ui[data-ui="mist"] .mist-footer-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex: 0 0 auto;
}
.nimbus-ui[data-ui="mist"] .mist-footer-text { flex: 1 1 auto; }
.nimbus-ui[data-ui="mist"] .mist-footer-latency {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--on-surface-var);
  flex: 0 0 auto;
}


/* ---- STRATUS (vision) phone UI ---------------------------------- */
.nimbus-ui[data-ui="stratus"] { background: var(--bg); }
.stratus-photo {
  margin: 8px 16px 10px;
  height: 180px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 220, 150, 0.55), transparent 60%),
    radial-gradient(circle at 72% 78%, rgba(190, 210, 255, 0.4), transparent 55%),
    linear-gradient(160deg, #9aa4b8 0%, #586476 40%, #2e3540 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(40, 40, 28, 0.22) inset;
}
.stratus-photo::before {
  content: '';
  position: absolute;
  left: 12%; top: 30%;
  width: 76%; height: 44%;
  border: 1.5px dashed rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  animation: stratus-box 3.2s var(--ease-out) infinite;
}
.stratus-photo::after {
  content: 'sign · 96%';
  position: absolute;
  left: 12%; top: calc(30% - 18px);
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #14141a;
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
}
@keyframes stratus-box {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.stratus-read {
  margin: 4px 16px;
  padding: 12px 14px;
  background: var(--surface-c-low);
  border: 0.5px solid var(--outline-variant);
  border-radius: 12px;
}
.stratus-read-label {
  font-family: var(--f-label);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--on-surface-var);
  margin-bottom: 6px;
}
.stratus-read-text {
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-surface);
}
.stratus-caption {
  margin: 10px 16px 0;
  padding: 12px 14px;
  background: linear-gradient(145deg, var(--primary), var(--primary-dim));
  color: var(--on-primary);
  border-radius: 14px;
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
}


/* ---- OVERTURE (audio) phone UI ---------------------------------- */
.nimbus-ui[data-ui="overture"] { background: var(--bg); }
.overture-wave {
  margin: 10px 16px 8px;
  height: 86px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  background: var(--surface-c);
  border: 0.5px solid var(--outline-variant);
  border-radius: 14px;
  overflow: hidden;
}
.overture-wave span {
  display: block;
  width: 3px;
  background: var(--primary);
  border-radius: 2px;
  animation: wave-bar 1.1s var(--ease-out) infinite;
  opacity: 0.82;
}
@keyframes wave-bar {
  0%, 100% { height: 20%; }
  50% { height: 100%; }
}
.overture-meta {
  margin: 0 20px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 600;
  color: var(--on-surface-var);
}
.overture-meta-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--error);
  box-shadow: 0 0 0 4px rgba(166, 69, 66, 0.18);
  animation: pulse 1.4s var(--ease-out) infinite;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.overture-transcript {
  margin: 4px 16px;
  padding: 14px;
  background: var(--surface-c-low);
  border: 0.5px solid var(--outline-variant);
  border-radius: 14px;
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--on-surface);
}
.overture-transcript em {
  color: var(--on-surface-var);
  font-style: normal;
}
.overture-controls {
  margin: 12px 16px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.overture-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--surface-c-high);
  border: 0.5px solid var(--outline-variant);
  border-radius: 50%;
  color: var(--on-surface);
  font-size: 18px;
}
.overture-btn-big {
  width: 64px; height: 64px;
  background: var(--error);
  color: #fff;
  border: 0;
  font-size: 24px;
  box-shadow: 0 10px 24px rgba(166, 69, 66, 0.32);
}


/* ---- HAZE (memory) phone UI ------------------------------------- */
.nimbus-ui[data-ui="haze"] { background: var(--bg); }
.haze-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}
.haze-query {
  margin: 6px 16px 4px;
  padding: 10px 14px;
  background: var(--surface-c-hi);
  border: 0.5px solid var(--outline-variant);
  border-radius: var(--r-bubble);
  border-bottom-right-radius: var(--r-bubble-tail);
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--on-surface);
  align-self: flex-end;
  max-width: 85%;
}
.haze-recall-label {
  margin: 6px 16px 4px;
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--on-surface-var);
}
.haze-memory {
  margin: 2px 16px;
  padding: 12px 14px;
  background: var(--surface-c);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  display: grid;
  gap: 4px;
}
.haze-memory-date {
  font-family: var(--f-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--on-surface-var);
}
.haze-memory-text {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-surface);
}
.haze-memory-meta {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--on-surface-var);
}
.haze-memory-score {
  padding: 1px 6px;
  background: var(--primary-container);
  color: var(--primary);
  border-radius: 4px;
}
.haze-answer {
  margin: 8px 16px 0;
  padding: 12px 14px;
  background: linear-gradient(145deg, var(--primary), var(--primary-dim));
  color: var(--on-primary);
  border-radius: 14px;
  border-bottom-left-radius: var(--r-bubble-tail);
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
  align-self: flex-start;
  max-width: 88%;
}


/* ---- ZEPHYR (translation) phone UI ------------------------------ */
.nimbus-ui[data-ui="zephyr"] { background: var(--bg); }
.zephyr-langrow {
  margin: 10px 16px 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}
.zephyr-lang {
  padding: 10px 12px;
  background: var(--surface-c-high);
  border: 0.5px solid var(--outline-variant);
  border-radius: 12px;
  display: grid;
  gap: 2px;
}
.zephyr-lang-label {
  font-family: var(--f-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--on-surface-var);
}
.zephyr-lang-name {
  font-family: var(--f-headline);
  font-weight: 700;
  font-size: 14px;
  color: var(--on-surface);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.zephyr-lang-flag {
  font-size: 16px;
  line-height: 1;
}
.zephyr-swap {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--primary-container);
  color: var(--primary);
  border-radius: 50%;
  font-size: 14px;
}
.zephyr-card {
  margin: 6px 16px;
  padding: 14px;
  background: var(--surface-c-low);
  border: 0.5px solid var(--outline-variant);
  border-radius: 14px;
}
.zephyr-card-label {
  font-family: var(--f-label);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--on-surface-var);
  margin-bottom: 6px;
}
.zephyr-card-text {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-surface);
}
.zephyr-card-out {
  background: linear-gradient(145deg, var(--primary), var(--primary-dim));
  border-color: transparent;
}
.zephyr-card-out .zephyr-card-label { color: rgba(250, 247, 246, 0.72); }
.zephyr-card-out .zephyr-card-text { color: var(--on-primary); }
.zephyr-actions {
  margin: 8px 16px 0;
  display: flex;
  gap: 8px;
}
.zephyr-action {
  flex: 1;
  padding: 8px 12px;
  background: var(--surface-c-high);
  border: 0.5px solid var(--outline-variant);
  border-radius: 999px;
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface);
  text-align: center;
}


/* =================================================================
   Module-level split section — copy + phone mockup, 2-up on desktop,
   stacks on mobile. Used by gale.html's HF model browser, can be
   re-used by other modules for secondary mockups.
   ================================================================= */

.module-split {
  max-width: var(--page-max);
  margin: clamp(48px, 8vh, 96px) auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 960px) {
  .module-split {
    grid-template-columns: 1fr;
  }
  .module-split .phone-wrap { justify-self: center; order: 2; }
  .module-split-copy { order: 1; text-align: center; }
  .module-split-copy .eyebrow,
  .module-split-copy .bullets li { text-align: left; }
  .module-split-copy .bullets { justify-items: start; max-width: 52ch; margin-inline: auto; }
}
.module-split-copy { display: grid; gap: var(--s-lg); align-content: center; }
.module-split-copy .display {
  font-family: var(--f-headline);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--on-surface);
  margin: 0;
}
.module-split-copy .lede {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}

/* Check-style bullets used inside the split section. Swaps the dot
   for a stroked check inside a squircle so it reads "feature list". */
.bullets-check li {
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  color: var(--on-surface);
}
.bullets-check li::before {
  content: '';
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-radius: 7px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf7f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/14px 14px no-repeat,
    var(--primary);
  flex: 0 0 auto;
}
.bullets-check li strong {
  font-family: var(--f-headline);
  font-weight: 700;
  color: var(--on-surface);
}


/* =================================================================
   HF model browser mockup — .nimbus-ui[data-ui="hf"]
   1:1 re-creation of HuggingFaceBrowserView.swift. Top-to-bottom:
     status → inline nav "Find a model" → searchable drawer →
     HF credit header → horizontal filter chips → overline header
     "HuggingFace results" → result rows → hidden-count footer.
   All typography, radii, and copy trace back to the Swift source.
   ================================================================= */

.nimbus-ui[data-ui="hf"] {
  background: var(--bg);
  color: var(--on-surface);
  display: flex;
  flex-direction: column;
}

/* .searchable(placement: .navigationBarDrawer(.always)) — a secondary
   row under the nav bar with the magnifier + placeholder prompt. */
.hf-searchable {
  margin: 0 16px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--surface-c-hi);
  border-radius: 10px;
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--on-surface-var);
}
.hf-searchable-ic { color: var(--on-surface-var); flex: 0 0 auto; }

/* HF credit header — HuggingFaceCredit + Link(systemImage "arrow.up.right.square"). */
.hf-credit {
  margin: 4px 16px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hf-credit-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-headline);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--on-surface);
}
.hf-credit-emoji { font-size: 16px; line-height: 1; }
.hf-credit-out   { color: var(--on-surface-var); }

/* Horizontal filter bar — RoundedRectangle(cornerRadius: .large) = 8px */
.hf-chips {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
}
.hf-chips::-webkit-scrollbar { display: none; }
.hf-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface-c-hi);
  border: 0;
  border-radius: 8px;
  font-family: var(--f-label);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--on-surface);
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.hf-chip.is-active {
  background: var(--primary);
  color: var(--on-primary);
}
.hf-chip-divider {
  width: 0.5px;
  height: 18px;
  background: var(--outline-variant);
  flex: 0 0 auto;
  margin: 0 2px;
}

.hf-divider {
  height: 0.5px;
  background: var(--outline-variant);
  margin: 0;
}

/* Results list — ScrollView with LazyVStack, horizontal padding 16 + 4 inset */
.hf-list {
  flex: 1 1 auto;
  padding: 12px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.hf-overline {
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-var);
  padding: 4px 4px 0;
}

/* ResultRow — VStack(alignment: .leading, spacing: 10) with surfaceContainerLow
   background and xLarge (12pt) corner radius, md (12pt) padding. */
.hf-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--surface-c-low);
  border-radius: 12px;
}

/* headerRow: 36×36 module icon, author/name stack, download button trailing */
.hf-card-head {
  display: grid;
  grid-template-columns: 36px 1fr 40px;
  gap: 12px;
  align-items: center;
}
.hf-card-ic {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface-c-hi);
  color: var(--primary);
}
.hf-card-id {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hf-card-name {
  font-family: var(--f-headline);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--on-surface);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf-card-author {
  font-family: var(--f-rounded);
  font-size: 11px;
  font-weight: 400;
  color: var(--on-surface-var);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* downloadButton: 40×32, rounded .large corner, primary bg with onPrimary
   icon. The "blocked" variant uses surfaceContainerHighest + muted tint. */
.hf-dl-btn {
  width: 40px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--on-primary);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
}
.hf-dl-btn-blocked {
  background: var(--surface-c-hi);
  color: var(--on-surface-var);
}
.hf-dl-btn-busy {
  background: var(--surface-c-hi);
  color: var(--primary);
  cursor: progress;
}

/* SwiftUI ProgressView().tint(palette.primary) — simple spinner */
.hf-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--primary);
  border-right-color: var(--primary);
  animation: hfSpin 0.8s linear infinite;
}
@keyframes hfSpin { to { transform: rotate(360deg); } }

/* pipelineRow: routing pill + meta chips + fitness */
.hf-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* → Gale routing pill: primary color in Capsule() with 12% opacity bg */
.hf-route-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(95, 94, 94, 0.12);
  color: var(--primary);
  font-family: var(--f-rounded);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* metaChip: icon + rounded-design text in surfaceContainerHighest Capsule */
.hf-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface-c-hi);
  color: var(--on-surface-var);
  font-family: var(--f-rounded);
  font-size: 10px;
  font-weight: 500;
}

/* fitnessPill: only shown for .tight (orange) or .tooHeavy (gray) */
.hf-fitness {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  font-family: var(--f-rounded);
  font-size: 10px;
  font-weight: 600;
}
.hf-fitness-tight    { background: rgba(242, 161, 43, 0.12); color: #b76a10; }
.hf-fitness-desktop  { background: rgba(101, 101, 85, 0.14); color: var(--on-surface-var); }

/* capabilityChipStrip: primaryContainer bg, onPrimaryContainer text */
.hf-cap-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hf-cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--primary-container);
  color: var(--on-primary-c);
  font-family: var(--f-rounded);
  font-size: 10px;
  font-weight: 600;
}

/* tagStrip: monospace chip with 4pt corner radius on surfaceContainerHighest */
.hf-tag-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hf-tag {
  padding: 2px 6px;
  background: var(--surface-c-hi);
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--on-surface-var);
  white-space: nowrap;
}

/* statsRow: Label("downloads", "arrow.down.circle") + Label("likes", "heart") + gated */
.hf-stats-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.hf-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-body);
  font-size: 11.5px;
  color: var(--on-surface-var);
}

/* gatedChip: primaryContainer or errorContainer based on token state */
.hf-gated-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: rgba(166, 69, 66, 0.14);
  color: #7a2825;
  border-radius: 2px;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  margin-left: auto;
}

/* hiddenFooter — "X more models don't fit this device · Show all" */
.hf-hidden-footer {
  margin: 6px 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-c-low);
  border: 0;
  border-radius: 8px;
  font-family: var(--f-body);
  font-size: 11.5px;
  color: var(--on-surface-var);
  cursor: pointer;
  text-align: left;
}
.hf-hidden-footer span:first-of-type { flex: 1 1 auto; }
.hf-hidden-cta {
  font-family: var(--f-label);
  font-weight: 600;
  color: var(--on-surface-var);
}