/* ==========================================================================
   OpsRabbit — Design system v3 (Apple-aligned)
   Neutral canvas: white · #F5F5F7 · black. One brand accent, used sparingly:
   the rabbit, its speed lines, links, and the single data point that matters.
   ========================================================================== */

:root {
  /* Neutrals (Apple HIG web palette) */
  --white: #FFFFFF;
  --gray: #F5F5F7;
  --gray-2: #E8E8ED;
  --black: #000000;
  --ink: #1D1D1F;
  --text-2: #6E6E73;
  --text-3: #86868B;
  --sep: #D2D2D7;
  --sep-2: rgba(0, 0, 0, 0.08);

  /* On black */
  --d-text: #F5F5F7;
  --d-text-2: #A1A1A6;
  --d-text-3: #6E6E73;
  --d-sep: #424245;
  --d-tile: #1D1D1F;
  --d-tile-2: #2C2C2E;

  /* Brand accent — OpsRabbit orange */
  --accent: #FF6B00;          /* graphics, marks, dots */
  --accent-ink: #C2410C;      /* text/links on light — AA contrast */
  --accent-ink-d: #FF8A3D;    /* text/links on black */
  --accent-soft: rgba(255, 107, 0, 0.08);

  --ok: #1E8E3E;
  --warn: #B25000;

  /* OpsRabbit pattern — the 20px grid, rendered in neutral */
  --grid-l: linear-gradient(to right, rgba(0,0,0,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.045) 1px, transparent 1px);
  --grid-d: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  --grid-size: 20px 20px;

  /* Type — SF Pro on Apple devices, Inter elsewhere */
  --f: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "SF Mono", ui-monospace, Menlo, "JetBrains Mono", monospace;
  --fs-hero: clamp(3rem, 7vw, 6rem);
  --fs-h1: clamp(2.4rem, 5vw, 4.5rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.5rem);
  --fs-sub: clamp(1.15rem, 1.6vw, 1.6rem);
  --fs-body: 1.0625rem;

  --gutter: clamp(20px, 4vw, 48px);
  --maxw: 1180px;
  --section-y: clamp(96px, 12vw, 160px);
  --r: 18px;
  --r-lg: 28px;

  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);     /* Apple's signature curve */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--f); font-size: var(--fs-body); line-height: 1.47; letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(255,107,0,.2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 16px; }

.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: var(--section-y) 0; }
.bg-white { background: var(--white); color: var(--ink); }
.bg-gray { background: var(--gray); color: var(--ink); }
.bg-black { background: var(--black); color: var(--d-text); }

/* ---------- Type ---------- */
.display { font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); line-height: 1.07; }
.h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.tone { color: var(--text-3); }
.bg-black .tone { color: var(--d-text-3); }
.hl { color: var(--accent); }
.lead { font-size: var(--fs-sub); color: var(--text-2); line-height: 1.38; letter-spacing: -0.015em; max-width: 40ch; font-weight: 400; }
.bg-black .lead { color: var(--d-text-2); }
.mono { font-family: var(--f-mono); letter-spacing: 0; }
.dim { color: var(--text-3); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-2); }
.bg-black .eyebrow { color: var(--d-text-2); }
.eyebrow .sl { width: 20px; height: 13px; color: var(--accent); }

.sec-head { display: grid; gap: 18px; margin-bottom: clamp(48px, 6vw, 80px); }
.sec-head.center { justify-items: center; text-align: center; }
.sec-head.center .lead { margin-inline: auto; }

.more-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); font-size: var(--fs-body); }
.more-link:hover { text-decoration: underline; }
.bg-black .more-link { color: var(--accent-ink-d); }

/* ---------- OpsRabbit pattern (neutral) ---------- */
.pattern { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pattern::before { content: ""; position: absolute; inset: 0; background-image: var(--grid-l); background-size: var(--grid-size); -webkit-mask-image: var(--pmask, radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 80%)); mask-image: var(--pmask, radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 80%)); }
.bg-black .pattern::before { background-image: var(--grid-d); }
.beam { display: none; }

/* ---------- Buttons ---------- */
.btn {
  --h: 48px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h); padding: 0 24px; border-radius: 980px; font-size: 1.0625rem; font-weight: 400; letter-spacing: -0.022em; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease);
}
.btn .arrow { transition: transform .4s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.bg-black .btn-primary, .on-dark .btn-primary { background: #fff; color: var(--ink); }
.bg-black .btn-primary:hover { background: var(--gray-2); }
.btn-ghost { border: 1px solid var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.bg-black .btn-ghost { border-color: var(--d-text); color: var(--d-text); }
.bg-black .btn-ghost:hover { background: var(--d-text); color: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-sm { --h: 32px; padding: 0 14px; font-size: .8rem; letter-spacing: -0.01em; }

/* ---------- Nav (Apple global nav: 52px translucent) ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; transition: transform .5s var(--ease); }
.nav.hide { transform: translateY(-100%); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; height: 52px; padding: 0 var(--gutter);
}
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.nav.solid::before { border-bottom-color: var(--sep-2); }
.nav.on-black::before { background: rgba(22,22,23,.8); border-bottom-color: rgba(255,255,255,.08); }
.nav.on-black .brand, .nav.on-black .nav-links a { color: var(--d-text); }
.nav.on-black .nav-links a { color: rgba(245,245,247,.8); }
.nav.on-black .btn-ghost { border-color: rgba(245,245,247,.6); color: var(--d-text); }
.nav.on-black .burger span { background: var(--d-text); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.12rem; letter-spacing: -0.03em; color: var(--ink); transition: color .3s; }
.brand-mark { width: 34px; height: 24px; color: var(--accent); overflow: visible; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { padding: 6px 12px; font-size: .82rem; letter-spacing: -0.01em; color: rgba(29,29,31,.8); transition: color .25s; }
.nav-links a:hover { color: var(--ink); }
.nav.on-black .nav-links a:hover { color: #fff; }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.nav-cta .btn-ghost { border-color: var(--sep); }
.burger { display: none; width: 40px; height: 40px; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 1.2px; background: var(--ink); transition: transform .4s var(--ease); }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 23px; }
.menu-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 55; background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: flex-start; padding: 96px var(--gutter) 48px; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu a.big { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; padding: 8px 0; color: var(--ink); }
.mobile-menu .btn { margin-top: 28px; align-self: flex-start; }

/* ---------- Hop tracker ---------- */
.hop {
  position: fixed; z-index: 50; left: var(--gutter); bottom: 18px;
  display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.8); border: 1px solid var(--sep-2); box-shadow: 0 8px 30px rgba(0,0,0,.08);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  font-size: .75rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-2);
  opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s var(--ease-out); pointer-events: none;
}
.hop.on { opacity: 1; transform: none; }
.hop-track { position: relative; width: 140px; height: 28px; }
.hop-track::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: repeating-linear-gradient(90deg, var(--sep) 0 3px, transparent 3px 6px); }
.hop-fill { position: absolute; left: 0; bottom: 4px; height: 1px; width: 0; background: var(--ink); }
.hop-rabbit { position: absolute; left: 0; bottom: 4px; width: 30px; height: 21px; margin-left: -15px; color: var(--accent); will-change: transform; overflow: visible; }
.hop-rabbit .speed { opacity: var(--spd, 0); }
.hop-label { min-width: 14ch; }
.hop-label b { color: var(--ink); font-weight: 600; }

/* ---------- Rabbit art ---------- */
.rabbit-art { overflow: visible; }
.rabbit-art .tube { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.rabbit-art .speed .tube { stroke: var(--accent); }
.rabbit-art .core { display: none; }
.rabbit-art .eye { fill: var(--ink); }
.bg-black .rabbit-art .tube { stroke: var(--d-text); }
.bg-black .rabbit-art .speed .tube { stroke: var(--accent); }
.bg-black .rabbit-art .eye { fill: var(--d-text); }
.js .rabbit-art.draw .tube { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .rabbit-art.draw.drawn .tube { stroke-dashoffset: 0; transition: stroke-dashoffset 2s cubic-bezier(.65,0,.35,1); }
.js .rabbit-art.draw .speed .tube { transition-delay: 1.4s !important; transition-duration: .8s !important; }
.js .rabbit-art.draw .eye { opacity: 0; transition: opacity .4s 1.7s; }
.js .rabbit-art.draw.drawn .eye { opacity: 1; }
.run .body-g { animation: bob .44s cubic-bezier(.65,0,.35,1) infinite alternate; }
.run .ear-g { animation: ear .88s ease-in-out infinite; transform-origin: 690px 400px; transform-box: view-box; }
.run .speed path { animation: streakArt .55s linear infinite; }
.run .speed path:nth-child(2) { animation-delay: -.18s; }
.run .speed path:nth-child(3) { animation-delay: -.36s; }
@keyframes bob { from { transform: translateY(6px); } to { transform: translateY(-10px); } }
@keyframes ear { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes streakArt { 0% { transform: translateX(50px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-150px); opacity: 0; } }

/* ---------- HERO ---------- */
.hero { position: relative; height: 200vh; background: var(--white); }
.hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero .pattern { --pmask: radial-gradient(60% 55% at 50% 72%, #000 0%, transparent 80%); }
.hero-streaks { display: none; }
.hero-glow { display: none; }
.hero-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(96px, 15vh, 150px); }
.hero-copy { max-width: 900px; display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: var(--fs-hero); margin: 14px 0 18px; line-height: 1.03; }
.hero h1 .line { display: inline; }
.hero .lead { max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 22px; font-size: .85rem; color: var(--text-3); }
.tag { display: inline-flex; align-items: center; gap: 6px; }
.tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.tag b { font-weight: 500; color: var(--text-2); }
.hero-rabbit { position: absolute; left: 50%; bottom: 5vh; width: min(30vw, 400px); transform: translate(calc(-50% + var(--rx, 0px)), 0); will-change: transform; z-index: 1; }
.hero-rabbit svg { width: 100%; height: auto; }
.hero-scroll { display: none; }

/* ---------- Stats ---------- */
.stats { padding: 0 0 var(--section-y); background: var(--white); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { padding: 28px 4px 0; border-top: 1px solid var(--sep); }
.stat .num { font-size: clamp(2.6rem, 4.4vw, 4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .num small { font-size: .45em; color: var(--text-3); margin-left: 3px; font-weight: 600; letter-spacing: -0.02em; }
.stat .lbl { margin-top: 12px; font-size: 1rem; color: var(--text-2); max-width: 24ch; line-height: 1.4; }

/* ---------- RABBIT HOLE (black, pinned) ---------- */
.hole { position: relative; height: 440vh; background: var(--black); color: var(--d-text); }
.hole-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: 900px; }
.hole-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.ring {
  position: absolute; left: 0; top: 0; width: min(86vw, 1100px); height: min(72vh, 680px);
  transform: translate(-50%, -50%) translateZ(var(--z, 0px)); border-radius: 44px;
  border: 1.5px solid var(--ring-c, #FF6B00);
  background-image: var(--grid-d); background-size: var(--grid-size);
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,.1) 55%, #000 100%); mask-image: radial-gradient(closest-side, rgba(0,0,0,.1) 55%, #000 100%);
  will-change: transform, opacity;
}
.ring-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) translate3d(var(--lx), var(--ly), var(--z, 0px)); white-space: nowrap; will-change: transform, opacity; }
.ring-label .tagcard { display: inline-flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: 16px; background: rgba(29,29,31,.9); border: 1px solid rgba(255,255,255,.1); }
.ring-label .src { font-size: .78rem; font-weight: 600; color: var(--d-text-2); }
.ring-label .v { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; color: var(--d-text); }
.hole-copy { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; padding: 0 var(--gutter); }
.hole-copy .panel { grid-area: 1 / 1; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.hole-copy .panel.out { opacity: 0; transform: translateY(-16px) scale(.98); }
.hole-copy .panel.wait { opacity: 0; transform: translateY(16px) scale(.98); }
.hole-copy h2 { font-size: var(--fs-h1); }
.hole-copy p { margin: 20px auto 0; }
.hole-copy .eyebrow { color: var(--d-text-2); }
.hole-clock { position: absolute; z-index: 6; left: var(--gutter); top: 50%; transform: translateY(-50%); font-size: .8rem; font-weight: 500; color: var(--d-text-3); display: grid; gap: 4px; }
.hole-clock b { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; color: var(--d-text); font-variant-numeric: tabular-nums; }
.hole-depth { position: absolute; z-index: 6; right: var(--gutter); top: 50%; transform: translateY(-50%); height: 36vh; width: 1px; background: var(--d-sep); }
.hole-depth i { position: absolute; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--d-text); top: 0; }
.hole-depth span { position: absolute; left: 14px; font-size: .7rem; font-weight: 500; color: var(--d-text-3); white-space: nowrap; transform: translateY(-50%); }
.hole-core { position: absolute; z-index: 4; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%) scale(var(--cs, 0)); background: #fff; box-shadow: 0 0 40px 18px rgba(255,255,255,.35), 0 0 140px 60px rgba(255,107,0,.18); }
.hole-answer { position: absolute; z-index: 7; left: 50%; bottom: 8vh; transform: translate(-50%, 20px); opacity: 0; transition: opacity .6s, transform .8s var(--ease-out); width: min(560px, calc(100% - 40px)); }
.hole-answer.on { opacity: 1; transform: translate(-50%, 0); }

.answer { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 18px; border-radius: 18px; background: var(--d-tile); border: 1px solid rgba(255,255,255,.1); text-align: left; }
.answer .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,107,0,.12); color: var(--accent); }
.answer .ic svg { width: 30px; height: 21px; }
.answer .k { font-size: .78rem; font-weight: 600; color: var(--accent-ink-d); }
.answer .v { margin-top: 4px; font-weight: 500; line-height: 1.4; color: var(--d-text); }
.answer .c { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--d-text-2); }
.answer .bar { flex: 1; height: 4px; border-radius: 4px; background: var(--d-tile-2); overflow: hidden; }
.answer .bar i { display: block; height: 100%; width: 87%; background: var(--d-text); }

/* ---------- FOLLOW THE RABBIT (gray, pinned) ---------- */
.trail { position: relative; height: 500vh; background: var(--gray); }
.trail-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 52px; }
.trail .pattern { --pmask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); opacity: .7; }
.trail-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.trail-head .h2 { margin-top: 10px; }
.trail-head .lead { max-width: 34ch; font-size: 1.15rem; }
.trail-map { position: relative; margin: clamp(14px, 3vh, 34px) 0 clamp(10px, 2.4vh, 26px); height: 100px; }
.trail-map svg { width: 100%; height: 100%; overflow: visible; }
.trail-path { fill: none; stroke: var(--sep); stroke-width: 1.2; stroke-dasharray: 2 5; }
.trail-lit { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.track { fill: var(--text-3); opacity: 0; transition: opacity .4s; }
.track.on { opacity: .7; }
.wp circle { fill: var(--gray); stroke: var(--sep); stroke-width: 1.4; transition: fill .4s, stroke .4s; }
.wp.on circle { fill: var(--ink); stroke: var(--ink); }
.wp.cur circle { fill: var(--accent); stroke: var(--accent); }
.wp text { font-size: 12px; font-weight: 500; letter-spacing: -0.01em; fill: var(--text-3); transition: fill .4s; }
.wp.on text { fill: var(--ink); }
.trail-runner { color: var(--accent); }
.trail-body { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(20px, 4vw, 56px); align-items: start; }
.step-copy { position: relative; min-height: 220px; }
.step-copy .sc { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .7s var(--ease-out); }
.step-copy .sc.on { opacity: 1; transform: none; }
.step-copy .n { font-size: .85rem; font-weight: 600; color: var(--accent-ink); }
.step-copy h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; margin-top: 10px; }
.step-copy p { margin-top: 14px; color: var(--text-2); max-width: 38ch; font-size: 1.06rem; }

/* Thread — light product UI */
.thread { position: relative; border-radius: 20px; overflow: hidden; background: var(--white); border: 1px solid var(--sep-2); box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 24px 60px rgba(0,0,0,.10); }
.thread-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--sep-2); background: rgba(245,245,247,.7); }
.dots { display: flex; gap: 7px; } .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--sep); }
.thread-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 600; }
.thread-title span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sev { flex: none; white-space: nowrap; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); }
.clock { font-family: var(--f-mono); font-size: .76rem; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.clock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.6s ease-in-out infinite; }
.thread.resolved .clock::before { background: var(--ok); animation: none; }
@keyframes blink { 50% { opacity: .25; } }
.thread-body { position: relative; height: clamp(300px, 42vh, 390px); }
.pane { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; gap: 11px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .45s, transform .7s var(--ease-out); }
.pane.on { opacity: 1; transform: none; pointer-events: auto; }
.msg { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.msg > div { min-width: 0; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 600; background: var(--gray); color: var(--text-2); }
.avatar.ai { background: var(--accent-soft); color: var(--accent); }
.avatar.ai svg { width: 20px; height: 14px; }
.meta { font-size: .74rem; color: var(--text-3); margin-bottom: 5px; }
.meta b { color: var(--ink); font-weight: 600; }
.card { border: 1px solid var(--sep-2); background: var(--gray); border-radius: 12px; padding: 11px 13px; font-size: .88rem; color: var(--text-2); }
.card strong { color: var(--ink); font-weight: 600; }
.kv { display: grid; grid-template-columns: 100px 1fr; gap: 7px 12px; font-size: .88rem; margin: 0; }
.kv dt { color: var(--text-3); font-size: .8rem; padding-top: 1px; }
.kv dd { margin: 0; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: .74rem; padding: 3px 9px; border-radius: 999px; background: var(--white); border: 1px solid var(--sep); color: var(--text-2); }
.chip.hot { border-color: rgba(194,65,12,.35); color: var(--accent-ink); background: var(--accent-soft); }
.agents { display: grid; gap: 8px; }
.agent { display: grid; grid-template-columns: 16px 84px 1fr auto; align-items: center; gap: 10px; font-size: .86rem; color: var(--ink); }
.agent .ic { width: 14px; height: 14px; border-radius: 50%; background: var(--ok); box-shadow: inset 0 0 0 4px #DDF3E4; }
.agent .tr { height: 4px; border-radius: 4px; background: var(--gray-2); overflow: hidden; }
.agent .tr i { display: block; height: 100%; width: 0; background: var(--ink); transition: width 1.1s var(--ease-out); }
.pane.on .agent .tr i { width: 100%; }
.pane.on .agent:nth-child(2) .tr i { transition-delay: .1s; } .pane.on .agent:nth-child(3) .tr i { transition-delay: .2s; }
.pane.on .agent:nth-child(4) .tr i { transition-delay: .3s; } .pane.on .agent:nth-child(5) .tr i { transition-delay: .4s; }
.agent .r { font-size: .74rem; color: var(--text-3); }
.cause { border-color: rgba(194,65,12,.25); background: #FFF7F1; }
.cause .k { font-size: .76rem; font-weight: 600; color: var(--accent-ink); }
.cause .v { margin-top: 6px; color: var(--ink); font-size: .98rem; font-weight: 500; line-height: 1.4; }
.conf { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .76rem; color: var(--text-2); }
.conf .bar { flex: 1; height: 4px; border-radius: 4px; background: var(--gray-2); overflow: hidden; }
.conf .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1.3s var(--ease-out) .2s; }
.pane.on .conf .bar i { width: 87%; }
.cmd { font-family: var(--f-mono); font-size: .76rem; letter-spacing: 0; background: var(--ink); color: #F5F5F7; border-radius: 10px; padding: 11px 13px; overflow-x: auto; white-space: nowrap; }
.cmd .p { color: var(--accent-ink-d); } .cmd .c { color: #86868B; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mini { font-size: .78rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--sep); color: var(--ink); }
.mini.go { background: var(--ink); border-color: var(--ink); color: #fff; }
.ok-line { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 500; color: var(--ok); }

/* ---------- RACE (white, pinned) ---------- */
.race { position: relative; height: 240vh; background: var(--white); }
.race-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.race-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(48px, 8vh, 90px); }
.race-head .h1 { margin-top: 12px; }
.race-head .lead { max-width: 28ch; }
.lanes { position: relative; }
.lane { position: relative; height: 104px; border-top: 1px solid var(--sep); }
.lane:last-child { border-bottom: 1px solid var(--sep); }
.lane-name { position: absolute; left: 0; top: 14px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.lane.slow .lane-name { color: var(--text-2); }
.lane-time { position: absolute; right: 0; top: 12px; font-size: 1.1rem; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lane.fast .lane-time { color: var(--ink); }
.lane-run { position: absolute; left: 0; right: 150px; bottom: 26px; height: 40px; }
.lane-run::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--sep) 0 4px, transparent 4px 8px); }
.lane-fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; }
.lane.slow .lane-fill { background: var(--text-3); }
.lane.fast .lane-fill { background: var(--ink); }
.runner { position: absolute; bottom: 0; left: 0; transform: translateX(-50%); }
.lane.slow .runner { width: 14px; height: 14px; border-radius: 50%; background: var(--text-3); bottom: -6px; box-shadow: 0 0 0 5px var(--gray); }
.lane.fast .runner { width: 56px; height: 39px; bottom: 3px; color: var(--accent); overflow: visible; }
.stage-marks { position: absolute; left: 0; right: 150px; bottom: 6px; height: 14px; }
.stage-marks span { position: absolute; transform: translateX(-50%); font-size: .72rem; font-weight: 500; color: var(--text-3); white-space: nowrap; transition: color .3s; }
.stage-marks span.on { color: var(--ink); }
.finish { position: absolute; right: 150px; top: -10px; bottom: -10px; width: 1px; background: repeating-linear-gradient(180deg, var(--ink) 0 4px, transparent 4px 8px); opacity: .5; z-index: 1; }
.finish-lbl { position: absolute; right: 150px; top: -34px; transform: translateX(50%); font-size: .78rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.race-foot { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-top: clamp(44px, 7vh, 72px); }
.race-big { font-size: clamp(3.6rem, 8vw, 7rem); font-weight: 600; letter-spacing: -0.05em; line-height: .9; }
.race-note { max-width: 34ch; color: var(--text-2); font-size: 1.1rem; }

/* ---------- WARREN (gray, bento) ---------- */
.warren-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tunnels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.tunnels path { fill: none; stroke: var(--sep); stroke-width: 1.2; stroke-dasharray: 2 4; }
.tunnels path.flow { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 27; animation: tunnelFlow var(--fd, 1.6s) linear infinite; }
@keyframes tunnelFlow { to { stroke-dashoffset: -30; } }
.burrow {
  position: relative; z-index: 1; min-height: 300px; padding: 28px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--white); display: flex; flex-direction: column; gap: 16px;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.burrow:hover { transform: scale(1.015); box-shadow: 0 20px 50px rgba(0,0,0,.08); }
.burrow.wide { grid-column: span 2; }
.burrow .top { display: flex; justify-content: space-between; align-items: center; }
.burrow .ix { font-size: .74rem; font-weight: 500; color: var(--text-3); }
.burrow .icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--gray); color: var(--ink); transition: background .4s, color .4s; }
.burrow:hover .icon { background: var(--accent-soft); color: var(--accent-ink); }
.burrow h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.025em; }
.burrow p { color: var(--text-2); font-size: .98rem; margin-top: 6px; line-height: 1.45; }
.burrow .viz { margin-top: auto; position: relative; min-height: 90px; display: flex; align-items: flex-end; }
.burrow .viz svg { width: 100%; height: auto; overflow: visible; }

.burrow .viz.v-triage { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.stack { position: relative; height: 128px; }
.pill { position: absolute; left: 0; right: 0; height: 30px; border-radius: 10px; padding: 0 10px; display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--text-2); background: var(--gray); transition: transform .9s var(--ease-out), opacity .6s; white-space: nowrap; overflow: hidden; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: none; }
.pill:nth-child(1) { top: 0; } .pill:nth-child(2) { top: 33px; } .pill:nth-child(3) { top: 66px; } .pill:nth-child(4) { top: 99px; }
.burrow:hover .pill:nth-child(1), .burrow.grouped .pill:nth-child(1) { transform: translateY(99px) scale(.92); opacity: 0; }
.burrow:hover .pill:nth-child(2), .burrow.grouped .pill:nth-child(2) { transform: translateY(66px) scale(.94); opacity: 0; }
.burrow:hover .pill:nth-child(3), .burrow.grouped .pill:nth-child(3) { transform: translateY(33px) scale(.96); opacity: 0; }
.sum { border-radius: 14px; padding: 13px; background: var(--ink); font-size: .8rem; color: #A1A1A6; }
.sum b { display: block; color: #fff; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.sum .r { display: flex; justify-content: space-between; font-size: .74rem; padding: 4px 0; border-top: 1px solid #424245; }
.sum .r span:last-child { color: #F5F5F7; }
.draw-path { stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300); transition: stroke-dashoffset 1.4s var(--ease-out); }
.in .draw-path, .burrow:hover .draw-path { stroke-dashoffset: 0; }
.ndot { transform: translate(var(--dx, 0), var(--dy, 0)); transition: transform 1s var(--ease-out); transform-box: fill-box; }
.burrow:hover .ndot, .burrow.grouped .ndot { transform: none; }
.wave rect { transform-box: fill-box; transform-origin: center; animation: wave 1.4s ease-in-out infinite; }
@keyframes wave { 50% { transform: scaleY(.35); } }
.plan { width: 100%; }
.plan-i { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sep-2); font-size: .9rem; color: var(--text-3); transition: color .3s; }
.plan-i .bx { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--sep); display: grid; place-items: center; flex: none; transition: background .3s, border-color .3s; }
.plan-i .bx svg { opacity: 0; color: #fff; transition: opacity .3s; }
.plan-i.done { color: var(--ink); } .plan-i.done .bx { background: var(--ink); border-color: var(--ink); } .plan-i.done .bx svg { opacity: 1; }
.chat { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.bub { max-width: 82%; padding: 9px 14px; border-radius: 18px; font-size: .86rem; line-height: 1.4; }
.bub.me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.bub.ai { align-self: flex-start; background: var(--gray-2); color: var(--ink); border-bottom-left-radius: 6px; }
.bub.ai b { font-weight: 600; }

/* ---------- SKG (white) ---------- */
.skg-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.skg-points { margin-top: 32px; display: grid; gap: 18px; }
.skg-point { display: grid; grid-template-columns: 24px 1fr; gap: 12px; }
.skg-point svg { color: var(--text-3); margin-top: 4px; }
.skg-point b { display: block; font-weight: 600; }
.skg-point span { color: var(--text-2); }
.skg-box { position: relative; border-radius: var(--r-lg); background: var(--gray); overflow: hidden; display: flex; flex-direction: column; }
.skg-box .pattern { --pmask: radial-gradient(80% 70% at 50% 45%, #000, transparent 90%); }
.skg-box svg.graph { position: relative; width: 100%; height: auto; aspect-ratio: 600 / 500; }
.skg-edge { stroke: var(--sep); stroke-width: 1.2; transition: stroke .4s; }
.skg-edge.hot { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 3 5; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -16; } }
.skg-node { cursor: pointer; transition: opacity .4s; }
.skg-node .core { fill: var(--white); stroke: var(--sep); stroke-width: 1.4; transition: fill .4s, stroke .4s; }
.skg-node .halo { fill: var(--accent); opacity: 0; transition: opacity .4s; }
.skg-node text { font-size: 11px; font-weight: 500; fill: var(--text-3); pointer-events: none; transition: fill .4s; }
.skg-node.hot .core { stroke: var(--ink); } .skg-node.hot text { fill: var(--ink); }
.skg-node.focus .core { fill: var(--ink); stroke: var(--ink); } .skg-node.focus .halo { opacity: .1; } .skg-node.focus text { fill: var(--ink); font-weight: 600; }
.skg-node.dim { opacity: .4; }
.skg-node:focus { outline: none; } .skg-node:focus-visible .core { stroke: var(--accent); stroke-width: 2.5; }
.skg-bunny { color: var(--accent); pointer-events: none; }
.skg-card { position: relative; margin: 0 16px 16px; padding: 14px 16px; border-radius: 14px; background: var(--white); font-size: .88rem; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.skg-card .name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.skg-card .name::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.skg-card dl { margin: 10px 0 0; display: grid; grid-template-columns: 84px 1fr 84px 1fr; gap: 6px 12px; }
.skg-card dt { color: var(--text-3); font-size: .8rem; }
.skg-card dd { margin: 0; color: var(--ink); }

/* ---------- Teams (gray) ---------- */
.tabs { position: relative; display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--gray-2); width: fit-content; margin-bottom: 44px; }
.tab { position: relative; z-index: 1; padding: 8px 18px; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--text-2); transition: color .3s; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab-ind { position: absolute; z-index: 0; border-radius: 999px; background: var(--white); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); transition: left .5s var(--ease), top .5s var(--ease), width .5s var(--ease); }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.team-panel[hidden] { display: none; }
.team-panel h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; }
.team-panel ul { margin-top: 24px; display: grid; gap: 14px; }
.team-panel li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--text-2); }
.team-panel li svg { color: var(--ink); margin-top: 4px; }
.team-panel .scen { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.team-panel .scen span { font-size: .82rem; padding: 6px 14px; border-radius: 999px; background: var(--white); color: var(--text-2); }
.workplan { border-radius: var(--r-lg); padding: 24px; background: var(--white); box-shadow: 0 2px 6px rgba(0,0,0,.03), 0 20px 50px rgba(0,0,0,.06); }
.wp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--sep-2); }
.wp-head .t { font-weight: 600; font-size: 1rem; }
.wp-head .s { font-size: .74rem; font-weight: 500; color: var(--text-3); }
.wp-item { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--sep-2); font-size: .95rem; color: var(--text-3); transition: color .4s; }
.wp-item:last-child { border-bottom: 0; }
.wp-item .ck { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--sep); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.wp-item .ck svg { opacity: 0; color: #fff; transition: opacity .3s; }
.wp-item .m { font-size: .76rem; color: var(--text-3); }
.wp-item.done { color: var(--ink); } .wp-item.done .ck { background: var(--ink); border-color: var(--ink); } .wp-item.done .ck svg { opacity: 1; }
.wp-item.gate .m { color: var(--accent-ink); font-weight: 500; }
.wp-foot { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.wp-foot .chip { background: var(--gray); border-color: transparent; }

/* ---------- Enterprise (black) ---------- */
.ent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.layers { position: relative; aspect-ratio: 1; width: 100%; max-width: 500px; margin: 0 auto; }
.layer { position: absolute; border-radius: 16%; border: 1px solid var(--d-sep); display: flex; justify-content: center; transition: border-color .5s, background .5s; }
.layer span { position: absolute; top: -10px; padding: 0 10px; background: var(--black); font-size: .74rem; font-weight: 500; color: var(--d-text-3); transition: color .5s; white-space: nowrap; }
.layer:nth-child(1) { inset: 0; } .layer:nth-child(2) { inset: 11%; } .layer:nth-child(3) { inset: 22%; } .layer:nth-child(4) { inset: 33%; }
.layer.on { border-color: var(--d-text); background: rgba(255,255,255,.02); }
.layer.on span { color: var(--d-text); }
.layers .core-r { position: absolute; inset: 39%; display: grid; place-items: center; color: var(--accent); }
.layers .core-r svg { width: 100%; height: auto; }
.layers .core-r .rabbit-art .tube { stroke: var(--accent); }
.layers .core-r .rabbit-art .eye { fill: var(--accent); }
.ent-list { margin-top: 32px; }
.ent-item { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--d-sep); cursor: default; }
.ent-item:last-child { border-bottom: 1px solid var(--d-sep); }
.ent-item .n { font-size: .8rem; font-weight: 500; color: var(--d-text-3); padding-top: 3px; transition: color .3s; }
.ent-item b { font-weight: 600; display: block; color: var(--d-text); }
.ent-item span { color: var(--d-text-2); font-size: .95rem; }
.ent-item:hover .n, .ent-item.on .n { color: var(--accent-ink-d); }
.ent-extra { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.bg-black .chip { background: var(--d-tile); border-color: transparent; color: var(--d-text-2); }

/* ---------- Integrations (white) ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee + .marquee { margin-top: 12px; }
.mq-track { display: flex; gap: 12px; width: max-content; animation: mq 60s linear infinite; }
.marquee.rev .mq-track { animation-direction: reverse; animation-duration: 70s; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.logo-pill { display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 26px; border-radius: 16px; background: var(--gray); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.02em; white-space: nowrap; }
.logo-pill small { font-weight: 400; font-size: .74rem; letter-spacing: -0.01em; color: var(--text-3); }
.mech { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; }
.mech-card { padding: 4px 0 0; border-top: 1px solid var(--sep); }
.mech-card .k { display: block; margin-top: 18px; font-size: .78rem; font-weight: 600; color: var(--text-3); }
.mech-card h3 { margin-top: 8px; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }
.mech-card p { margin-top: 6px; color: var(--text-2); font-size: .95rem; }

/* ---------- Industries (gray) ---------- */
.ind-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.ind-ctrl { display: flex; gap: 10px; }
.ind-ctrl button { width: 44px; height: 44px; border-radius: 50%; background: var(--gray-2); display: grid; place-items: center; color: var(--ink); transition: background .3s; }
.ind-ctrl button:hover { background: var(--sep); }
.rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px var(--gutter) 24px; margin: 44px calc(var(--gutter) * -1) 0; scroll-padding-inline: var(--gutter); cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.ind { scroll-snap-align: start; flex: 0 0 clamp(260px, 25vw, 320px); min-height: 380px; padding: 30px; border-radius: var(--r-lg); background: var(--white); display: flex; flex-direction: column; justify-content: space-between; user-select: none; transition: transform .6s var(--ease); }
.ind:hover { transform: scale(1.015); }
.ind .ix { font-size: .78rem; font-weight: 500; color: var(--text-3); }
.ind h3 { margin-top: 14px; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.ind p { margin-top: 10px; color: var(--text-2); font-size: .98rem; }
.ind .rk { display: flex; flex-wrap: wrap; gap: 6px; }
.ind .rk span { font-size: .78rem; padding: 5px 12px; border-radius: 999px; background: var(--gray); color: var(--text-2); }
.ind.feat { background: var(--black); color: var(--d-text); }
.ind.feat .ix, .ind.feat p { color: var(--d-text-2); }
.ind.feat .big { font-size: 3.6rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1; margin-top: 14px; }
.ind.feat .rk span { background: var(--d-tile); color: var(--d-text-2); }

/* ---------- Company (white) ---------- */
.quote { font-size: clamp(2.2rem, 4.6vw, 4.2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; max-width: 18ch; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: clamp(56px, 8vw, 96px); }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--sep); }
.tl-fill { position: absolute; left: 0; top: 6px; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 2s var(--ease); }
.in .tl-fill { transform: scaleX(1); }
.tl { position: relative; padding-right: 20px; }
.tl::before { content: ""; display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--sep); margin-bottom: 22px; position: relative; z-index: 1; }
.tl.now::before { background: var(--accent); border-color: var(--accent); }
.tl .y { font-size: .85rem; font-weight: 600; color: var(--text-3); }
.tl.now .y { color: var(--accent-ink); }
.tl b { display: block; margin-top: 6px; font-weight: 600; }
.tl span { display: block; margin-top: 4px; color: var(--text-2); font-size: .92rem; }
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(56px, 8vw, 96px); }
.person { padding: 26px; border-radius: var(--r-lg); background: var(--gray); }
.person .av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--white); color: var(--ink); margin-bottom: 18px; }
.person b { display: block; font-weight: 600; }
.person .r { font-size: .9rem; color: var(--text-2); margin-top: 2px; }
.person p { font-size: .9rem; color: var(--text-2); margin-top: 10px; }

/* ---------- CTA (gray, centered) ---------- */
.cta { position: relative; overflow: hidden; background: var(--gray); color: var(--ink); padding: clamp(110px, 14vw, 190px) 0; text-align: center; }
.cta::before { content: ""; position: absolute; inset: 0; background-image: var(--grid-l); background-size: var(--grid-size); -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); }
.cta .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cta h2 { margin-top: 14px; max-width: 16ch; }
.cta .lead { margin-top: 20px; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.cta-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 30px; font-size: .92rem; color: var(--text-2); }
.cta-points span { display: inline-flex; align-items: center; gap: 6px; }
.cta-points svg { color: var(--ok); }
.cta-rabbit { width: 120px; margin: 0 auto 26px; color: var(--accent); opacity: 0; transform: translateX(-60px); transition: transform 1.4s var(--ease-out), opacity 1s; position: relative; z-index: 1; }
.cta-rabbit.in { opacity: 1; transform: none; }
.cta-rabbit svg { width: 100%; height: auto; }
.cta-rabbit .rabbit-art .tube { stroke: var(--accent); stroke-width: 34; }
.cta-rabbit .rabbit-art .eye { fill: var(--accent); }

/* ---------- Footer (Apple style) ---------- */
.footer { background: var(--gray); padding: 0 0 26px; font-size: .78rem; color: var(--text-2); }
.footer .wrap > * { position: relative; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 28px; padding-top: 36px; border-top: 1px solid var(--sep); }
.foot-grid h4 { font-size: .78rem; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.foot-grid li + li { margin-top: 8px; }
.foot-grid a { color: var(--text-2); transition: color .2s; }
.foot-grid a:hover { color: var(--ink); text-decoration: underline; }
.foot-about p { margin-top: 12px; max-width: 34ch; }
.foot-about .brand { font-size: 1rem; }
.foot-contact { margin-top: 14px; display: grid; gap: 4px; }
.foot-word { display: none; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--sep); color: var(--text-3); }
.foot-bottom nav { display: flex; gap: 0; }
.foot-bottom nav a { padding: 0 10px; border-right: 1px solid var(--sep); }
.foot-bottom nav a:last-child { border-right: 0; }
.foot-bottom a:hover { color: var(--ink); }
.to-top { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 500; }
.to-top svg { width: 26px; height: 18px; color: var(--accent); transition: transform .5s var(--ease-out); overflow: visible; }
.to-top:hover svg { transform: translateY(-6px) rotate(-12deg); }

/* ---------- Reveal (Apple-style: gentle rise + fade) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-split] .w { display: inline-block; }
.js [data-split] .w > span { display: inline-block; opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i) * 35ms + var(--d, 0s)); }
.js [data-split].in .w > span { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1068px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .nav-cta .btn-ghost { display: none; }
  .warren-grid { grid-template-columns: repeat(2, 1fr); }
  .mech { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .skg-grid, .team-grid, .ent-grid, .trail-body { grid-template-columns: 1fr; }
  .hero-rabbit { width: min(56vw, 380px); bottom: 4vh; }
  .hero-meta { display: none; }
  .trail-head .lead { display: none; }
  .trail-map { height: 76px; }
  .step-copy { min-height: 84px; }
  .step-copy p { display: none; }
  .step-copy h3 { font-size: 1.5rem; margin-top: 4px; }
  .thread-body { height: 330px; }
  .hole-clock { top: 76px; transform: none; }
  .hole-depth { display: none; }
  .timeline { grid-template-columns: 1fr; gap: 24px; }
  .timeline::before, .tl-fill { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .tl-fill { transform: scaleY(0); transform-origin: top; } .in .tl-fill { transform: scaleY(1); }
  .tl { display: grid; grid-template-columns: 13px 1fr; gap: 0 18px; }
  .tl::before { margin: 2px 0 0; grid-row: span 3; }
  .skg-card dl { grid-template-columns: 84px 1fr; }
}
@media (max-width: 640px) {
  .hero { height: 180vh; }
  .warren-grid { grid-template-columns: 1fr; }
  .burrow.wide { grid-column: auto; }
  .burrow .viz.v-triage { grid-template-columns: 1fr; }
  .stack { height: 96px; } .pill:nth-child(4) { display: none; }
  .mech, .people { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .lane-run, .stage-marks { right: 34px; }
  .finish, .finish-lbl { right: 34px; } .finish-lbl { transform: none; }
  .stage-marks span:nth-child(even) { display: none; }
  .agent { grid-template-columns: 16px 76px 1fr; } .agent .r { display: none; }
  .kv { grid-template-columns: 86px 1fr; }
  .thread-body { height: 300px; }
  .hop { left: auto; right: var(--gutter); bottom: 12px; padding: 6px 12px; }
  .hop-track { width: 90px; }
  .hop-label { display: none; }
  .tabs { border-radius: 20px; }
  .ring-label .tagcard { padding: 10px 14px; }
  .ring-label .v { font-size: .95rem; }
}

/* Small rabbits live in 1024-unit space — larger motion values */
.runner.run .body-g { animation: bobIcon .32s cubic-bezier(.65,0,.35,1) infinite alternate; }
.runner.run .speed path { animation: streakIcon .4s linear infinite; }
.runner.run .speed path:nth-child(2) { animation-delay: -.13s; }
.runner.run .speed path:nth-child(3) { animation-delay: -.26s; }
@keyframes bobIcon { from { transform: translateY(40px); } to { transform: translateY(-70px); } }
@keyframes streakIcon { 0% { transform: translateX(80px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-240px); opacity: 0; } }
.lane.fast .runner .speed { opacity: 0; transition: opacity .3s; }
.lane.fast .runner.run .speed { opacity: 1; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-split] .w > span { opacity: 1; transform: none; }
  .js .rabbit-art.draw .tube { stroke-dashoffset: 0; }
  .js .rabbit-art.draw .eye { opacity: 1; }
  .marquee .dup { display: none; }
  .mq-track { flex-wrap: wrap; width: auto; justify-content: center; padding: 0 var(--gutter); }
}

/* ==========================================================================
   HERO v3 — interactive chase
   ========================================================================== */
.hero { height: 150vh; }
.hero-stage { cursor: crosshair; touch-action: pan-y; }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-content { pointer-events: none; }
.hero-copy { cursor: default; transition: opacity .2s linear; will-change: transform, opacity; }
.hero-copy a { pointer-events: auto; }
.hero-rabbit { display: none; }

.chaser { position: absolute; left: 0; top: 0; z-index: 3; width: var(--cw, 96px); pointer-events: none; will-change: transform; }
.chaser-flip { transform-origin: 50% 70%; }
.chaser svg { width: 100%; height: auto; }
.chaser .rabbit-art .tube { stroke-width: 13; }
.chaser .speed { opacity: 0; transition: opacity .25s; }
.chaser.run .speed { opacity: 1; }
.chaser:not(.run) .body-g, .chaser:not(.run) .speed path { animation: none; }
.chaser.sit .ear-g { animation: twitch 3.2s ease-in-out infinite; transform-origin: 690px 400px; transform-box: view-box; }
@keyframes twitch { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-9deg); } 90% { transform: rotate(2deg); } 94% { transform: rotate(-5deg); } }
.chaser.sniff .body-g { animation: sniff .5s ease-in-out 2; }
@keyframes sniff { 50% { transform: translate(14px, 6px); } }

.rc-card {
  position: absolute; z-index: 4; left: 0; top: 0; width: 290px; padding: 14px 16px; border-radius: 16px;
  background: rgba(255,255,255,.86); border: 1px solid var(--sep-2);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 50px rgba(0,0,0,.12);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  transform: translate(-50%, calc(-100% - 26px)) scale(.92); transform-origin: 50% 100%;
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .55s var(--ease-out);
}
.rc-card.on { opacity: 1; transform: translate(-50%, calc(-100% - 26px)) scale(1); }
.rc-card::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; border-right: 1px solid var(--sep-2); border-bottom: 1px solid var(--sep-2); transform: translateX(-50%) rotate(45deg); }
.rc-top { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 600; color: var(--accent-ink); }
.rc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.rc-t { margin-left: auto; font-family: var(--f-mono); font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rc-v { margin-top: 6px; font-size: .96rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); }
.rc-s { margin-top: 4px; font-size: .8rem; color: var(--text-2); }

.hero-hint { position: absolute; z-index: 3; left: 0; right: 0; bottom: 28px; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; pointer-events: none; }
.hint-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px; border-radius: 999px; background: rgba(255,255,255,.8); border: 1px solid var(--sep-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: .82rem; font-weight: 500; color: var(--text-2); box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.hint-ping { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hint-ping::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--accent); animation: ping 1.8s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.hint-count { font-size: .82rem; color: var(--text-3); }
.hint-count b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; display: inline-block; min-width: 1ch; }
.hint-count b.bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 40% { transform: translateY(-4px) scale(1.25); color: var(--accent-ink); } }

@media (max-width: 640px) {
  .chaser { --cw: 60px; }
  .rc-card { width: 240px; }
  .hero-hint { bottom: 18px; gap: 8px; }
  .hint-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hint-ping::after { display: none; }
}


/* Rabbit hole: crisp orange rings; the neutral grid sits on its own masked layer */
.ring { background-image: none; -webkit-mask-image: none; mask-image: none; border-width: 1.5px; border-color: #FF6B00; }
.ring::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--grid-d); background-size: var(--grid-size); -webkit-mask-image: radial-gradient(closest-side, transparent 60%, #000 100%); mask-image: radial-gradient(closest-side, transparent 60%, #000 100%); }

/* Rabbit inside the hole — seen from behind, running in */
.hole-bunny { position: absolute; left: 0; top: 0; width: 150px; pointer-events: none; will-change: transform, opacity; opacity: 0; }
.hole-bunny svg { width: 100%; height: auto; display: block; }
.hole-bunny path, .hole-bunny ellipse:not(.bb-shadow) { fill: #000; stroke: #D2D2D7; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.hole-bunny .bb-tail { fill: #F5F5F7; }
.hole-bunny .bb-shadow { fill: rgba(210,210,215,.22); transform-box: fill-box; transform-origin: center; }
.hole-bunny .bb-all { transform-box: fill-box; transform-origin: 50% 100%; }
.hole-bunny .bb-earL { transform-box: fill-box; transform-origin: 70% 100%; }
.hole-bunny .bb-earR { transform-box: fill-box; transform-origin: 30% 100%; }
.hole-bunny .bb-feet { transform-box: fill-box; transform-origin: 50% 0%; }

/* ==========================================================================
   SOLUTIONS — "OpsRabbit for [role]"
   ========================================================================== */
.sol-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); }
.sol-head .h1 { max-width: 16ch; }

.sol-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.sol-for { color: var(--text-3); }
.sol-pick { position: relative; }
.sol-role { display: inline-flex; align-items: center; gap: 8px; font: inherit; letter-spacing: inherit; color: var(--ink); padding: 2px 4px 4px; margin: 0 -4px; border-radius: 12px; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-color .25s, color .25s; }
.sol-role:hover { background-color: rgba(0,0,0,.04); }
.sol-role .chev { color: var(--text-3); transition: transform .4s var(--ease-out); flex: none; }
.sol-role[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sol-nav { display: inline-flex; gap: 8px; margin-left: auto; }
.sol-nav button { width: 44px; height: 44px; border-radius: 50%; background: var(--white); display: grid; place-items: center; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: transform .3s var(--ease), background .25s; }
.sol-nav button:hover { transform: scale(1.06); }
.sol-nav button:active { transform: scale(.96); }

.sol-menu {
  position: absolute; z-index: 20; left: -8px; top: calc(100% + 10px); width: min(360px, 86vw); padding: 6px;
  border-radius: 18px; background: rgba(255,255,255,.92); border: 1px solid var(--sep-2);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.16);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: 20% 0;
  transition: opacity .2s, transform .35s var(--ease-out), visibility .2s;
}
.sol-menu.on { opacity: 1; visibility: visible; transform: none; }
.sol-opt { display: grid; grid-template-columns: 22px 1fr 14px; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; font-size: .95rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-align: left; transition: background .15s; }
.sol-opt svg:first-child { color: var(--text-2); }
.sol-opt .tick { color: var(--accent-ink); opacity: 0; }
.sol-opt[aria-selected="true"] .tick { opacity: 1; }
.sol-opt[aria-selected="true"] svg:first-child { color: var(--accent); }
.sol-opt:hover, .sol-opt:focus-visible { background: var(--gray); outline: none; }

.sol-sum { margin-top: 18px; max-width: 52ch; transition: opacity .25s, transform .4s var(--ease-out); }
.sol-sum.swap { opacity: 0; transform: translateY(6px); }

.sol-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(48px, 6vw, 72px); padding-top: 36px; }
.sol-line { position: absolute; left: 12.5%; right: 12.5%; top: 8px; height: 1px; background: var(--sep); }
.sol-line i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.5s cubic-bezier(.45,0,.3,1); }
.sol-step .node { position: absolute; left: 50%; top: -36px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: var(--gray); border: 1.5px solid var(--ink); }
.sol-step.impact .node { background: var(--accent); border-color: var(--accent); }
.sol-bunny { position: absolute; left: 0; top: 0; z-index: 2; width: 42px; height: 29px; color: var(--accent); pointer-events: none; }
.sol-bunny .speed { opacity: 0; transition: opacity .2s; }
.sol-bunny.run .speed { opacity: 1; }
.sol-bunny.run .body-g { animation: bobIcon .3s cubic-bezier(.65,0,.35,1) infinite alternate; }
.sol-bunny.run .speed path { animation: streakIcon .4s linear infinite; }

.sol-step { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 250px; padding: 26px; border-radius: var(--r-lg); background: var(--white); transition: opacity .25s, transform .45s var(--ease-out); }
.sol-step .n { font-size: .78rem; font-weight: 600; color: var(--text-3); }
.sol-step h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.sol-step p { color: var(--text-2); font-size: .98rem; line-height: 1.5; }
.sol-step.impact { background: var(--ink); color: var(--d-text); }
.sol-step.impact .n { color: var(--d-text-3); }
.sol-step.impact p { color: var(--d-text-2); }
.sol-step .metric { margin-top: 6px; font-size: clamp(2.2rem, 3.4vw, 3.1rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: #fff; }
.sol-step .mlbl { font-size: .95rem; font-weight: 600; color: var(--accent-ink-d); }
.sol-flow.swap .sol-step { opacity: 0; transform: translateY(10px); }
.sol-step:nth-of-type(2) { transition-delay: .04s; } .sol-step:nth-of-type(3) { transition-delay: .08s; } .sol-step:nth-of-type(4) { transition-delay: .12s; }

.sol-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; }
.sol-chips-k { font-size: .85rem; font-weight: 600; color: var(--text-3); }
#solChips { display: contents; }
#solChips span { font-size: .85rem; padding: 7px 14px; border-radius: 999px; background: var(--white); color: var(--text-2); }

@media (max-width: 900px) {
  .sol-flow { grid-template-columns: 1fr; padding-top: 0; padding-left: 34px; gap: 14px; }
  .sol-line { left: 7px; right: auto; top: 20px; bottom: 20px; width: 1px; height: auto; }
  .sol-line i { transform-origin: top; }
  .sol-step { min-height: 0; }
  .sol-step .node { left: -34px; top: 28px; margin-left: 0; }
  .sol-bunny { display: none; }
  .sol-nav { margin-left: 0; }
}
@media (max-width: 900px) { .sol-line i { transform: scaleY(var(--sy, 1)) !important; } }
/* visible immediately on open (so focus can move in); hide only after the fade on close */
.sol-menu { transition: opacity .2s, transform .35s var(--ease-out), visibility 0s linear .2s; }
.sol-menu.on { transition: opacity .2s, transform .35s var(--ease-out), visibility 0s; }

/* ==========================================================================
   INDUSTRIES — the downtime meter
   ========================================================================== */
.ind-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto clamp(32px, 4vw, 48px); max-width: 1180px; }
.ind-pill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--white); color: var(--text-2); font-size: .9rem; font-weight: 500; letter-spacing: -0.01em; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background .25s, color .25s, transform .3s var(--ease); }
.ind-pill:hover { color: var(--ink); transform: translateY(-1px); }
.ind-pill[aria-selected="true"] { background: var(--ink); color: #fff; }
.ind-pill[aria-selected="true"] svg { color: var(--accent-ink-d); }

.meter { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; }
.meter-live { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(26px, 3.4vw, 40px); border-radius: var(--r-lg); background: var(--black); color: var(--d-text); min-height: 420px; }
.meter-live::before { content: ""; position: absolute; inset: 0; background-image: var(--grid-d); background-size: var(--grid-size); -webkit-mask-image: radial-gradient(70% 60% at 30% 60%, #000, transparent 80%); mask-image: radial-gradient(70% 60% at 30% 60%, #000, transparent 80%); pointer-events: none; }
.meter-live > * { position: relative; }
.ml-top { display: flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 500; color: var(--d-text-2); }
.ml-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255,107,0,.6); animation: livePulse 1.6s ease-out infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 8px rgba(255,107,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,107,0,0); } }
.ml-clock { margin-left: auto; font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--d-text-3); letter-spacing: 0; }
.ml-k { margin-top: auto; padding-top: 48px; font-size: 1rem; font-weight: 500; color: var(--d-text-2); }
.ml-num { margin-top: 8px; font-size: clamp(2.8rem, 6.4vw, 5.6rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ml-rate { margin-top: 16px; font-size: 1rem; color: var(--d-text-2); }
.ml-rate b { color: var(--accent-ink-d); font-weight: 600; }
.ml-ind { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 8px 14px; border-radius: 999px; background: var(--d-tile); font-size: .85rem; font-weight: 500; color: var(--d-text); width: fit-content; }
.ml-ic { display: inline-grid; color: var(--accent-ink-d); }

.meter-cmp { display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 3.4vw, 40px); border-radius: var(--r-lg); background: var(--white); }
.cmp-k { font-size: .85rem; font-weight: 600; color: var(--text-3); }
.cmp-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; }
.cmp-l { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: .95rem; font-weight: 600; }
.cmp-l .t { font-weight: 500; color: var(--text-3); }
.cmp-bar { height: 10px; border-radius: 10px; background: var(--gray); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; border-radius: 10px; transform-origin: left; }
.cmp-row.slow .cmp-bar i { width: 100%; background: var(--text-3); }
.cmp-row.fast .cmp-bar i { width: 8.9%; min-width: 10px; background: var(--accent); }
.meter.grow .cmp-bar i { animation: barGrow 1.1s var(--ease-out) both; }
.meter.grow .cmp-row.fast .cmp-bar i { animation-delay: .25s; }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: none; } }
.cmp-v { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; }
.cmp-row.slow .cmp-v { color: var(--text-2); }
.cmp-save { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid var(--sep-2); border-bottom: 1px solid var(--sep-2); }
.cmp-save span { font-size: .95rem; font-weight: 600; }
.cmp-save b { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.04em; color: var(--accent-ink); }
.cmp-why b { display: block; font-size: .9rem; font-weight: 600; }
.cmp-why p { margin-top: 4px; color: var(--text-2); font-size: .95rem; line-height: 1.5; }
.cmp-impact { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-impact span { font-size: .8rem; padding: 5px 12px; border-radius: 999px; background: var(--gray); color: var(--text-2); }
.meter.grow .cmp-why, .meter.grow .cmp-impact, .meter.grow .cmp-save b { animation: fadeUp .6s var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }
.meter-note { margin: 18px auto 0; max-width: 70ch; text-align: center; font-size: .78rem; color: var(--text-3); line-height: 1.5; }

@media (max-width: 900px) {
  .meter { grid-template-columns: 1fr; }
  .meter-live { min-height: 320px; }
  .ind-pills { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; }
  .ind-pills::-webkit-scrollbar { display: none; }
  .ind-pill { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .ml-dot { animation: none; } }

/* ==========================================================================
   INTEGRATIONS — the hub
   ========================================================================== */
.ig-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 8px; }
.ig-f { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 999px; background: var(--gray); color: var(--text-2); font-size: .88rem; font-weight: 500; letter-spacing: -0.01em; transition: background .25s, color .25s; }
.ig-f span { font-size: .75rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ig-f:hover { color: var(--ink); }
.ig-f[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ig-f[aria-pressed="true"] span { color: var(--d-text-2); }

.ig-stage { position: relative; height: clamp(560px, 62vw, 700px); margin-top: 12px; }
.ig-stage::before { content: ""; position: absolute; inset: 0; background-image: var(--grid-l); background-size: var(--grid-size); -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent 85%); mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent 85%); pointer-events: none; }
.ig-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ig-lines .ig-base { fill: none; stroke: var(--gray-2); stroke-width: 1; transition: stroke .35s, stroke-width .35s; }
.ig-lines .ig-pulse { fill: none; stroke-width: 2.2; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.ig-lines .ig-pulse.in { stroke: var(--accent); }
.ig-lines .ig-pulse.out { stroke: var(--ink); }
.ig-lines g.cat .ig-base { stroke: var(--sep); }
.ig-lines g.cat .ig-pulse, .ig-lines g.hot .ig-pulse { opacity: 1; }
.ig-lines g.cat .ig-pulse.out { opacity: .35; }
.ig-lines g.hot .ig-base { stroke: var(--ink); stroke-width: 1.3; }
.ig-lines g.ping .ig-pulse.in { opacity: 1; }

.ig-hub { position: absolute; left: 50%; top: 50%; z-index: 2; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 34px; background: var(--white); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.12); }
.ig-hub-mark { width: 64px; height: 44px; color: var(--accent); margin-top: -14px; }
.ig-hub-name { position: absolute; bottom: 16px; font-size: .78rem; font-weight: 600; letter-spacing: -0.01em; }
.ig-hub-ring { position: absolute; inset: -14px; border-radius: 44px; border: 1px solid var(--sep); opacity: .7; }
.ig-hub-ring.r2 { inset: -30px; border-radius: 56px; opacity: .35; }
.ig-hub.live .ig-hub-ring { border-color: var(--accent); opacity: .5; animation: hubBreath 2.4s ease-in-out infinite; }
.ig-hub.live .ig-hub-ring.r2 { opacity: .22; animation-delay: .4s; }
@keyframes hubBreath { 50% { transform: scale(1.05); } }
.ig-hub.blip { animation: hubBlip .5s var(--ease-out); }
@keyframes hubBlip { 40% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(255,107,0,.12), 0 24px 60px rgba(0,0,0,.12); } }

.ig-tiles { position: absolute; inset: 0; }
.ig-tile {
  position: absolute; left: 0; top: 0; z-index: 3; width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center; background: var(--white);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.06);
  transition: transform .6s var(--ease-out), box-shadow .35s, opacity .35s;
}
.ig-tile img, .ig-tile .ig-mono { width: 30px; height: 30px; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter .35s, opacity .35s, transform .45s var(--ease-out); }
.ig-tile .ig-mono, .ig-card-logo .ig-mono { display: grid; place-items: center; border-radius: 8px; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.ig-tile:hover img, .ig-tile:hover .ig-mono, .ig-tile.on img, .ig-tile.on .ig-mono, .ig-tile.cat img, .ig-tile.cat .ig-mono, .ig-tile.ping img, .ig-tile.ping .ig-mono { filter: none; opacity: 1; }
.ig-tile.on { box-shadow: 0 0 0 2px var(--ink), 0 18px 40px rgba(0,0,0,.16); z-index: 4; }
.ig-tile.on img, .ig-tile.on .ig-mono { transform: scale(1.12); }
.ig-tile.dim { opacity: .35; }
.ig-tile.ping { box-shadow: 0 0 0 2px rgba(255,107,0,.5), 0 6px 18px rgba(0,0,0,.08); }
.ig-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent), 0 18px 40px rgba(0,0,0,.16); }
.ig-tip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); padding: 4px 9px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--ease-out); }
.ig-tile:hover .ig-tip, .ig-tile.on .ig-tip, .ig-tile:focus-visible .ig-tip { opacity: 1; transform: translate(-50%, 0); }

.ig-card { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center; max-width: 760px; margin: 8px auto 0; padding: 22px 26px; border-radius: var(--r-lg); background: var(--gray); min-height: 132px; }
.ig-card-logo { width: 64px; height: 64px; border-radius: 18px; background: var(--white); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ig-card-logo img, .ig-card-logo .ig-mono { width: 34px; height: 34px; object-fit: contain; }
.ig-card-rabbit { width: 38px; height: 26px; color: var(--accent); display: block; }
.ig-card-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ig-card-top b { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.ig-card-top span { font-size: .85rem; color: var(--text-3); }
.ig-card-rows { margin-top: 8px; display: grid; gap: 4px; font-size: .92rem; color: var(--ink); }
.ig-card-rows .k { display: inline-block; min-width: 128px; color: var(--text-3); font-weight: 500; }
.ig-card-rows .ro { font-size: .78rem; padding: 2px 9px; border-radius: 999px; background: var(--white); color: var(--text-2); }
.ig-card.swap .ig-card-main, .ig-card.swap .ig-card-logo { animation: fadeUp .4s var(--ease-out) both; }

.ig-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(56px, 7vw, 88px); }
.ig-feat { padding-top: 22px; border-top: 1px solid var(--sep); }
.ig-fi { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gray); color: var(--ink); }
.ig-feat h3 { margin-top: 14px; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; }
.ig-feat p { margin-top: 6px; color: var(--text-2); font-size: .95rem; }

/* phones & tablets: a calm logo grid instead of the orbit */
@media (max-width: 899px) {
  .ig-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; }
  .ig-filters::-webkit-scrollbar { display: none; }
  .ig-f { flex: none; }
  .ig-stage { height: auto; margin-top: 20px; }
  .ig-stage::before, .ig-lines, .ig-hub { display: none; }
  .ig-tiles { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px; justify-items: center; }
  .ig-tile { position: relative; transform: none !important; }
  .ig-tip { display: none; }
  .ig-card { margin-top: 20px; grid-template-columns: 52px 1fr; padding: 18px; gap: 14px; }
  .ig-card-logo { width: 52px; height: 52px; }
  .ig-card-rows .k { display: block; min-width: 0; }
  .ig-feats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .ig-feats { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ig-hub.live .ig-hub-ring { animation: none; } }
/* wordmark logos get a wider pill tile */
.ig-tile.wide { width: 112px; border-radius: 20px; }
.ig-tile.wide img { width: 84px; height: 26px; }
.ig-card-logo.wide img { width: 50px; height: 34px; }
@media (max-width: 899px) { .ig-tile.wide { grid-column: span 2; width: 100%; max-width: 140px; } }
@media (max-width: 899px) {
  #integrations .wrap { display: flex; flex-direction: column; }
  #integrations .sec-head { order: 0; } .ig-filters { order: 1; } .ig-card { order: 2; margin-top: 16px; } .ig-stage { order: 3; } .ig-feats { order: 4; }
  .ig-tiles { grid-auto-flow: dense; }
}

/* ==========================================================================
   MEGA MENU
   ========================================================================== */
.mm-nav { position: relative; align-items: center; }
.mm-trigger, .mm-plain { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 999px; font-size: .84rem; letter-spacing: -0.01em; color: rgba(29,29,31,.8); transition: color .2s; }
.mm-trigger:hover, .mm-plain:hover, .mm-trigger[aria-expanded="true"] { color: var(--ink); }
.mm-trigger.is-active, .mm-plain.is-active { color: var(--ink); font-weight: 500; }
.mm-chev { opacity: .55; transition: transform .35s var(--ease-out), opacity .2s; }
.mm-trigger[aria-expanded="true"] .mm-chev { transform: rotate(180deg); opacity: 1; }
.mm-ink { position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; border-radius: 2px; background: var(--accent); opacity: 0; transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .25s; pointer-events: none; }
.nav.on-black .mm-trigger, .nav.on-black .mm-plain { color: rgba(245,245,247,.82); }
.nav.on-black .mm-trigger:hover, .nav.on-black .mm-plain:hover { color: #fff; }
.nav.mm-active { transform: none !important; }
.nav.mm-active::before { background: rgba(255,255,255,.94); border-bottom-color: var(--sep-2); }
.nav.mm-active.on-black .brand, .nav.mm-active.on-black .mm-trigger, .nav.mm-active.on-black .mm-plain { color: var(--ink); }
.nav.mm-active.on-black .btn-ghost { color: var(--ink); border-color: var(--sep); }

.mm-shell { position: absolute; left: 0; right: 0; top: 100%; overflow: hidden; pointer-events: none; }
.mm-inner { position: relative; height: 0; overflow: hidden; background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); transition: height .42s var(--ease-out); box-shadow: 0 24px 50px -24px rgba(0,0,0,.18); pointer-events: auto; }
.mm-panel {
  display: grid; grid-template-columns: 240px 1fr 280px; gap: 36px;
  max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 30px var(--gutter) 36px;
  opacity: 0; transform: translateX(calc(var(--dir, 0) * 18px)) translateY(calc((1 - var(--dir, 0) * var(--dir, 0)) * -6px));
  transition: opacity .3s var(--ease), transform .45s var(--ease-out);
}
.mm-panel.on { opacity: 1; transform: none; }
.mm-panel[hidden] { display: none; }
.mm-intro { display: flex; flex-direction: column; gap: 10px; padding-right: 8px; border-right: 1px solid var(--sep-2); }
.mm-path { font-family: var(--f-mono); font-size: .72rem; letter-spacing: 0; color: var(--text-3); }
.mm-path em { font-style: normal; color: var(--accent-ink); }
.mm-intro h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; }
.mm-intro p { font-size: .9rem; color: var(--text-2); line-height: 1.45; }
.mm-over { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 500; color: var(--accent-ink); }
.mm-over:hover { text-decoration: underline; }
.mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; align-content: start; }
.mm-link { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 10px; border-radius: 14px; transition: background .2s; }
.mm-link:hover, .mm-link:focus-visible { background: var(--gray); outline: none; }
.mm-link[aria-current="page"] { background: var(--gray); }
.mm-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--gray); color: var(--ink); transition: background .2s, color .2s; }
.mm-link:hover .mm-ic, .mm-link[aria-current="page"] .mm-ic { background: var(--white); color: var(--accent-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.mm-txt { display: grid; gap: 2px; min-width: 0; }
.mm-txt b { font-size: .9rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.mm-txt small { font-size: .78rem; color: var(--text-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-panel-res { grid-template-columns: 1fr 280px; }
.mm-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mm-col { display: grid; align-content: start; gap: 2px; }
.mm-col-k { font-size: .72rem; font-weight: 600; color: var(--text-3); padding: 0 10px 6px; text-transform: uppercase; letter-spacing: .06em; }

.mm-feat { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 20px; background: var(--gray); position: relative; overflow: hidden; }
.mm-feat::before { content: ""; position: absolute; inset: 0; background-image: var(--grid-l); background-size: var(--grid-size); -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%); mask-image: linear-gradient(160deg, #000, transparent 70%); pointer-events: none; }
.mm-feat > * { position: relative; }
.mm-ft-k { font-size: .74rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.mm-ft-big { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--ink); }
.mm-ft-sub { font-size: .82rem; color: var(--text-2); line-height: 1.4; }
.mm-ft-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 500; color: var(--accent-ink); }
.mm-ft-rows { display: grid; gap: 6px; font-size: .82rem; }
.mm-ft-rows div { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: var(--white); color: var(--text-2); }
.mm-ft-rows div.hot b { color: var(--accent-ink); }
.mm-ft-rows b { font-weight: 600; color: var(--ink); }
.mm-feat-thread { background: var(--ink); color: var(--d-text); }
.mm-feat-thread::before { background-image: var(--grid-d); }
.mm-feat-thread .mm-ft-k { color: var(--d-text-3); }
.mm-ft-top { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .74rem; color: var(--d-text-2); letter-spacing: 0; }
.mm-ft-top span:last-child { margin-left: auto; color: var(--d-text-3); }
.mm-live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255,107,0,.6); animation: livePulse 1.6s ease-out infinite; }
.mm-ft-steps { display: flex; gap: 4px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: 0; }
.mm-ft-steps span { flex: 1; padding: 5px 0; text-align: center; border-radius: 6px; background: var(--d-tile-2); color: var(--d-text-3); }
.mm-ft-steps .done { color: var(--d-text); }
.mm-ft-steps .cur { background: var(--accent); color: #fff; }
.mm-ft-v { font-size: .92rem; font-weight: 500; line-height: 1.35; color: #fff; }
.mm-ft-bar { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .7rem; color: var(--d-text-2); }
.mm-ft-bar i { flex: 1; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) 87%, var(--d-tile-2) 87%); }
.mm-feat-thread .mm-ft-link { color: var(--accent-ink-d); }
.mm-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mm-logo { height: 46px; border-radius: 12px; background: var(--white); display: grid; place-items: center; }
.mm-logo img { width: 24px; height: 24px; object-fit: contain; }
.mm-layers { position: relative; width: 140px; height: 140px; margin: 2px auto; }
.mm-layers i { position: absolute; border: 1px solid var(--sep); border-radius: 22%; }
.mm-layers i:nth-child(1) { inset: 0; } .mm-layers i:nth-child(2) { inset: 16%; } .mm-layers i:nth-child(3) { inset: 32%; border-color: var(--accent); }
.mm-layers-core { position: absolute; inset: 40%; color: var(--accent); }
.mm-ft-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-ft-chips span { font-size: .72rem; padding: 4px 9px; border-radius: 999px; background: var(--white); color: var(--text-2); }
.mm-feat-post { gap: 8px; transition: background .2s; }
.mm-feat-post:hover { background: var(--gray-2); }
.mm-ft-post { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); }

.mm-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.18); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
body.mm-open .mm-scrim { opacity: 1; visibility: visible; }

/* mobile accordion */
.mobile-menu { justify-content: flex-start; overflow-y: auto; padding-top: 84px; gap: 0; }
.mob-sec { border-bottom: 1px solid var(--sep-2); }
.mob-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.mob-head svg { transition: transform .35s var(--ease-out); color: var(--text-3); }
.mob-sec.open .mob-head svg { transform: rotate(180deg); }
.mob-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.mob-body > * { min-height: 0; }
.mob-sec.open .mob-body { grid-template-rows: 1fr; }
.mob-body { overflow: hidden; }
.mob-sec.open .mob-body { padding-bottom: 10px; }
.mob-body a { display: flex; align-items: center; gap: 12px; padding: 9px 4px; font-size: .98rem; color: var(--text-2); }
.mob-body a svg { color: var(--text-3); flex: none; }
.mob-sec .mob-body { display: block; max-height: 0; transition: max-height .45s var(--ease-out); }
.mob-sec.open .mob-body { max-height: 900px; }
.mob-plain { display: block; padding: 16px 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; border-bottom: 1px solid var(--sep-2); }
.mobile-menu .btn { margin-top: 24px; }

@media (max-width: 1180px) { .mm-panel { grid-template-columns: 200px 1fr; } .mm-panel > .mm-feat { display: none; } .mm-panel-res { grid-template-columns: 1fr; } }
@media (max-width: 1068px) { .mm-shell, .mm-scrim { display: none; } }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
body.sub { background: var(--white); }
.pg-hero { position: relative; overflow: hidden; padding: clamp(120px, 14vw, 170px) 0 clamp(64px, 8vw, 110px); background: var(--white); }
.pg-hero .pattern { --pmask: radial-gradient(60% 70% at 75% 40%, #000 0%, transparent 80%); }
.pg-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.pg-hero-copy .eyebrow { margin-top: 18px; }
.pg-hero-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--gray); color: var(--accent-ink); }
.pg-h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); margin: 16px 0 18px; line-height: 1.04; }
.pg-h1-article { font-size: clamp(2.2rem, 4.4vw, 3.8rem); max-width: 22ch; }
.pg-hero .lead { max-width: 46ch; }
.pg-hero .hero-actions { justify-content: flex-start; margin-top: 30px; }
.pg-hero-simple .wrap { position: relative; }
.pg-hero-simple .lead { max-width: 60ch; }
.pg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-3); }
.pg-crumbs a:hover { color: var(--ink); }
.pg-crumbs .sep { opacity: .5; }
.pg-crumbs [aria-current] { color: var(--text-2); }
.pg-meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pg-meta-chips span { font-size: .8rem; padding: 6px 12px; border-radius: 999px; background: var(--gray); color: var(--text-2); }

.pg-sec-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 56px); max-width: 860px; }
.pg-sec-head .lead { max-width: 62ch; }
.pg-sec-head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; max-width: none; }
.pg-sec-head-row > div { display: grid; gap: 16px; }

.pg-covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-cover { padding: 28px; border-radius: var(--r-lg); background: var(--white); display: grid; gap: 18px; align-content: start; }
.pg-cover .n, .pg-cap .n { font-family: var(--f-mono); font-size: .78rem; letter-spacing: 0; color: var(--accent-ink); }
.pg-cover p { font-size: 1.08rem; line-height: 1.45; color: var(--ink); letter-spacing: -0.015em; }
.pg-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-caps-5 { grid-template-columns: repeat(3, 1fr); }
.pg-cap { padding: 28px; border-radius: var(--r-lg); background: var(--gray); display: grid; gap: 10px; align-content: start; }
.bg-gray .pg-cap { background: var(--white); }
.pg-cap h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; margin-top: 8px; }
.pg-cap p { color: var(--text-2); line-height: 1.5; }

.pg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pg-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-lg); background: var(--white); transition: transform .5s var(--ease), box-shadow .5s var(--ease); min-height: 210px; }
.bg-white .pg-card { background: var(--gray); }
.pg-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.18); }
.pg-card-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gray); color: var(--ink); margin-bottom: 8px; transition: color .3s, background .3s; }
.bg-white .pg-card .pg-card-ic { background: var(--white); }
.pg-card:hover .pg-card-ic { color: var(--accent-ink); }
.pg-card b { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em; }
.pg-card > span:not(.pg-card-ic) { color: var(--text-2); font-size: .92rem; line-height: 1.45; }
.pg-card em { margin-top: auto; padding-top: 10px; font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 500; color: var(--accent-ink); }
.pg-card em svg { transition: transform .35s var(--ease-out); }
.pg-card:hover em svg { transform: translateX(3px); }

.pg-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pg-role { padding: 32px; border-radius: var(--r-lg); background: var(--gray); }
.pg-role-k { font-size: .8rem; font-weight: 600; color: var(--accent-ink); }
.pg-role h3 { margin-top: 10px; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.pg-role ul { margin-top: 20px; display: grid; gap: 12px; }
.pg-role li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: var(--text-2); }
.pg-role li svg { color: var(--ink); margin-top: 3px; }
.pg-scens { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pg-scen { display: grid; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--white); }
.pg-scen b { font-weight: 600; letter-spacing: -0.015em; }
.pg-scen span { font-size: .85rem; color: var(--text-3); }

/* hero visuals */
.vis { position: relative; border-radius: var(--r-lg); background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 30px 70px -30px rgba(0,0,0,.25); padding: 24px; }
.vis-k { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--text-3); }
.vis-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: livePulse 1.6s ease-out infinite; }
.vis-big { margin-top: 14px; font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.vis-big small { display: block; margin-top: 10px; font-size: .85rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-2); }
.vis-big-sm { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.vis-thread { padding: 0; overflow: hidden; }
.vis-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--sep-2); background: var(--gray); font-size: .88rem; }
.vis-top .dots { display: flex; gap: 6px; } .vis-top .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--sep); }
.vis-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: var(--accent-ink); }
.vis-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: livePulse 1.6s ease-out infinite; }
.vis-steps { padding: 10px 18px; }
.vis-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--sep-2); font-size: .92rem; line-height: 1.45; color: var(--text-2); }
.vis-steps li:last-child { border-bottom: 0; }
.vis-steps .ck { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-2); color: #fff; transition: background .4s; }
.in .vis-steps .ck { background: var(--ink); transition-delay: calc(.5s + var(--i) * .45s); }
.vis-steps .ck svg { opacity: 0; transition: opacity .3s; }
.in .vis-steps .ck svg { opacity: 1; transition-delay: calc(.5s + var(--i) * .45s); }
.vis-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px 18px; }
.vis-foot span { font-size: .74rem; padding: 4px 10px; border-radius: 999px; background: var(--gray); color: var(--text-2); }
.vis-race { display: grid; gap: 16px; }
.vis-lane { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; font-size: .9rem; font-weight: 600; }
.vis-lane span { grid-column: 1 / -1; color: var(--text-2); font-weight: 500; }
.vis-lane.hot span { color: var(--ink); }
.vis-bar { height: 10px; border-radius: 10px; background: var(--gray); overflow: hidden; }
.vis-bar i { display: block; height: 100%; width: var(--w); border-radius: 10px; background: var(--text-3); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out) .4s; }
.vis-lane.hot .vis-bar i { background: var(--accent); transition-delay: .9s; }
.in .vis-bar i { transform: none; }
.vis-lane b { font-variant-numeric: tabular-nums; }
.vis-lane.hot b { color: var(--accent-ink); }
.vis-cost .vis-k2 { margin-top: 22px; font-size: .78rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.vis-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vis-chips span { font-size: .85rem; padding: 7px 12px; border-radius: 999px; background: var(--gray); }
.vis-hub { aspect-ratio: 1.15; display: grid; place-items: center; background: var(--gray); box-shadow: none; overflow: hidden; }
.vis-hub::before { content: ""; position: absolute; inset: 0; background-image: var(--grid-l); background-size: var(--grid-size); -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent); mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent); }
.vis-hub-core { position: relative; z-index: 2; width: 96px; height: 96px; border-radius: 26px; background: var(--white); display: grid; place-items: center; color: var(--accent); box-shadow: 0 20px 50px rgba(0,0,0,.12); }
.vis-hub-core .brand-mark { width: 54px; height: 38px; color: var(--accent); }
.vis-hub-ring { position: absolute; inset: 0; }
.vis-logo { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 16px; background: var(--white); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transform: rotate(calc(var(--i) * 60deg)) translateY(-38%) translateY(-90px) rotate(calc(var(--i) * -60deg)); opacity: 0; transition: opacity .6s, transform .9s var(--ease-out); transition-delay: calc(var(--i) * .08s); }
.in .vis-logo { opacity: 1; transform: rotate(calc(var(--i) * 60deg)) translateY(-150px) rotate(calc(var(--i) * -60deg)); }
.vis-logo img { width: 28px; height: 28px; object-fit: contain; }
.vis-logo.wide { width: 92px; margin-left: -46px; } .vis-logo.wide img { width: 70px; }
.vis-logo-t { font-family: var(--f-mono); font-size: .66rem; letter-spacing: 0; color: var(--text-2); width: 72px; margin-left: -36px; }
.vis-hub-k { position: absolute; bottom: 16px; left: 0; right: 0; justify-content: center; }
.vis-layers { aspect-ratio: 1; max-width: 440px; margin: 0 auto; background: var(--black); padding: 0; }
.vl { position: absolute; border: 1px solid #424245; border-radius: 22%; display: flex; justify-content: center; transition: border-color .6s; }
.vl span { position: absolute; top: -9px; padding: 0 10px; background: var(--black); font-size: .72rem; font-weight: 500; color: var(--d-text-3); white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis; }
.vl.l1 { inset: 8%; } .vl.l2 { inset: 18%; } .vl.l3 { inset: 28%; } .vl.l4 { inset: 38%; }
.vl.on { border-color: var(--accent); } .vl.on span { color: #fff; }
.vl-core { position: absolute; inset: 45%; color: var(--accent); }

/* prose pages */
.pg-body { padding-top: 0; }
.pg-body-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 760px; }
.pg-body-grid.has-aside { grid-template-columns: minmax(0, 1fr) 280px; max-width: none; }
.pg-prose { font-size: 1.08rem; line-height: 1.7; color: #333336; max-width: 720px; }
.pg-prose > * + * { margin-top: 1em; }
.pg-prose h2 { margin-top: 1.8em; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: var(--ink); }
.pg-prose h3 { margin-top: 1.5em; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.pg-prose h4 { margin-top: 1.3em; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.pg-prose ul { padding-left: 1.2em; list-style: disc; display: grid; gap: .45em; }
.pg-prose li::marker { color: var(--accent); }
.pg-prose figure { margin: 1.6em 0; }
.pg-prose figure img { width: 100%; border-radius: 18px; background: var(--gray); }
.pg-prose .pg-checks { list-style: none; padding: 0; }
.pg-checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
.pg-checks svg { color: var(--accent-ink); margin-top: 5px; }
.pg-impact { margin-top: 2em !important; padding: 24px; border-radius: 20px; background: var(--ink); color: var(--d-text); }
.pg-impact p { margin-top: 8px; font-size: 1.1rem; color: #fff; }
.pg-table { overflow-x: auto; margin: 1.4em 0; border-radius: 14px; border: 1px solid var(--sep-2); }
.pg-table table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.45; }
.pg-table th { text-align: left; background: var(--gray); font-weight: 600; color: var(--ink); }
.pg-table th, .pg-table td { padding: 10px 14px; border-bottom: 1px solid var(--sep-2); vertical-align: top; }
.pg-aside { display: grid; gap: 16px; align-content: start; position: sticky; top: 90px; }
.pg-aside-box { display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: var(--gray); }
.pg-aside-k { font-size: .72rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.pg-aside-box b { font-weight: 600; }
.pg-aside-box > span:not(.pg-aside-k) { font-size: .85rem; color: var(--text-2); }
.pg-aside-lib { max-height: 60vh; overflow-y: auto; }
.pg-post { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--sep-2); font-size: .9rem; }
.pg-post b { font-weight: 600; line-height: 1.35; }
.pg-post:hover b { color: var(--accent-ink); }
.pg-post.on b { color: var(--accent-ink); }
.pg-post-meta { font-size: .76rem; color: var(--text-3); }
.pg-hero-img { margin: 0 0 56px; border-radius: var(--r-lg); overflow: hidden; background: var(--gray); }
.pg-hero-img img { width: 100%; max-height: 520px; object-fit: cover; }

.pg-feat-posts { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.pg-feat-side { display: grid; gap: 20px; }
.pg-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-postcard { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 22px; border-radius: var(--r-lg); background: var(--white); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.bg-white .pg-postcard { background: var(--gray); }
.pg-postcard:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.18); }
.pg-post-img { display: block; aspect-ratio: 1.9; border-radius: 16px; overflow: hidden; background: var(--gray-2); margin-bottom: 8px; }
.pg-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.pg-postcard:hover .pg-post-img img { transform: scale(1.03); }
.pg-postcard .pg-post-meta, .pg-postcard b, .pg-postcard .pg-post-desc { padding: 0 8px; }
.pg-postcard b { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.pg-postcard.big b { font-size: 1.6rem; letter-spacing: -0.03em; }
.pg-post-desc { font-size: .9rem; color: var(--text-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pg-feat-side .pg-postcard { flex-direction: row; align-items: center; gap: 14px; padding: 12px; }
.pg-feat-side .pg-post-img { flex: 0 0 42%; margin: 0; }
.pg-feat-side .pg-postcard > :not(.pg-post-img) { display: none; }
.pg-feat-side .pg-postcard .pg-feat-txt { display: grid; }
.pg-posts-3 { grid-template-columns: repeat(3, 1fr); }
.pg-gallery-sec { padding: 48px 0; }
.pg-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.pg-gallery figure { border-radius: 20px; overflow: hidden; background: var(--white); }
.pg-gallery img { width: 100%; height: 100%; object-fit: contain; }

.pg-faq-group + .pg-faq-group { margin-top: 2.2em; }
.pg-faq-group h2 { margin-top: 0 !important; margin-bottom: .6em; }
.pg-faq { border-top: 1px solid var(--sep-2); }
.pg-faq:last-child { border-bottom: 1px solid var(--sep-2); }
.pg-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq-ic { position: relative; width: 14px; height: 14px; flex: none; }
.pg-faq-ic::before, .pg-faq-ic::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease-out); }
.pg-faq-ic::after { transform: rotate(90deg); }
.pg-faq[open] .pg-faq-ic::after { transform: rotate(0); }
.pg-faq p { padding-bottom: 18px; color: var(--text-2); }
.pg-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pg-contact-card { display: grid; gap: 6px; padding: 24px; border-radius: var(--r-lg); background: var(--gray); }
.pg-contact-card b { font-size: 1.1rem; font-weight: 600; }
.pg-contact-card span:not(.pg-card-ic) { color: var(--text-2); font-size: .95rem; }
.pg-contact-card .pg-card-ic { background: var(--white); }
.sub .cta-rabbit { opacity: 1; transform: none; color: var(--accent); }

@media (max-width: 1068px) { .pg-posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .pg-hero-grid, .pg-feat-posts, .pg-roles { grid-template-columns: 1fr; }
  .pg-covers, .pg-caps, .pg-caps-5, .pg-contact { grid-template-columns: 1fr; }
  .pg-body-grid.has-aside { grid-template-columns: 1fr; }
  .pg-aside { position: static; }
  .vis-logo { width: 48px; height: 48px; margin: -24px; }
  .in .vis-logo { transform: rotate(calc(var(--i) * 60deg)) translateY(-118px) rotate(calc(var(--i) * -60deg)); }
}
@media (max-width: 640px) { .pg-posts, .pg-posts-3 { grid-template-columns: 1fr; } .pg-feat-side .pg-postcard { flex-direction: column; align-items: stretch; } .pg-feat-side .pg-post-img { flex: none; } }
/* post cards: text block */
.pg-pc-txt { display: grid; gap: 8px; padding: 0 8px; }
.pg-postcard .pg-pc-txt .pg-post-meta, .pg-postcard .pg-pc-txt b, .pg-postcard .pg-pc-txt .pg-post-desc { padding: 0; }
.pg-feat-side .pg-postcard > .pg-pc-txt { display: grid; }
.pg-feat-side .pg-pc-txt .pg-post-desc { -webkit-line-clamp: 2; }
.pg-feat-side .pg-pc-txt b { font-size: 1rem; }
.vl-cap { position: absolute; left: 0; right: 0; bottom: 3%; text-align: center; font-size: .9rem; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.vl-cap small { display: block; font-size: .72rem; font-weight: 500; color: var(--d-text-3); }
.vis-layers .vl.l1 { inset: 6% 8% 16%; } .vis-layers .vl.l2 { inset: 15% 17% 25%; } .vis-layers .vl.l3 { inset: 24% 26% 34%; } .vis-layers .vl.l4 { inset: 33% 35% 43%; }
.vis-layers .vl-core { inset: 39% 42% 49%; }
.foot-grid.foot-3 { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 1068px) { .foot-grid.foot-3 { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .foot-grid.foot-3 { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   COLLECTIONS — search + filters (blog, case studies, FAQ)
   ========================================================================== */
.col-search { position: relative; display: flex; align-items: center; max-width: 620px; margin-top: 30px; height: 56px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--sep), 0 10px 30px -14px rgba(0,0,0,.18); transition: box-shadow .25s; }
.col-search:focus-within { box-shadow: 0 0 0 2px var(--ink), 0 14px 36px -14px rgba(0,0,0,.22); }
.col-search-ic { position: absolute; left: 20px; color: var(--text-3); display: grid; }
.col-search input { flex: 1; height: 100%; border: 0; background: none; padding: 0 92px 0 52px; font: inherit; font-size: 1.05rem; color: var(--ink); outline: none; border-radius: 999px; }
.col-search input::-webkit-search-cancel-button { display: none; }
.col-search kbd { position: absolute; right: 18px; font-family: var(--f-mono); font-size: .75rem; padding: 3px 8px; border-radius: 6px; background: var(--gray); color: var(--text-3); }
.col-x { position: absolute; right: 52px; width: 28px; height: 28px; border-radius: 50%; background: var(--gray); color: var(--text-2); font-size: 1.1rem; line-height: 1; }
.col-x[hidden] { display: none; }
.col-bar { position: sticky; top: 52px; z-index: 30; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid var(--sep-2); border-bottom: 1px solid var(--sep-2); }
.col-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.col-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px; }
.col-chips::-webkit-scrollbar { display: none; }
.col-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--gray); color: var(--text-2); font-size: .86rem; font-weight: 500; transition: background .2s, color .2s; }
.col-chip span { font-size: .72rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.col-chip:hover { color: var(--ink); }
.col-chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.col-chip[aria-pressed="true"] span { color: var(--d-text-2); }
.col-tools { display: flex; gap: 8px; flex: none; }
.col-sel { position: relative; display: inline-flex; align-items: center; }
.col-sel select { appearance: none; -webkit-appearance: none; height: 36px; padding: 0 30px 0 14px; border-radius: 999px; border: 1px solid var(--sep); background: var(--white); font: inherit; font-size: .84rem; color: var(--ink); cursor: pointer; max-width: 190px; }
.col-sel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sel-chev { position: absolute; right: 12px; pointer-events: none; color: var(--text-3); }
.col-res { padding-top: 40px; }
.col-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-size: .9rem; color: var(--text-2); font-weight: 500; }
.col-clear { font-size: .85rem; color: var(--accent-ink); font-weight: 500; }
.col-clear:hover { text-decoration: underline; }
.col-clear[hidden], [data-item][hidden], .col-more[hidden], .col-feat-sec[hidden] { display: none !important; }
.col-empty { display: grid; justify-items: center; gap: 8px; padding: 72px 20px; text-align: center; border-radius: var(--r-lg); background: var(--white); }
.col-empty[hidden] { display: none; }
.col-empty .brand-mark { width: 64px; height: 44px; color: var(--accent); margin-bottom: 8px; }
.col-empty b { font-size: 1.2rem; font-weight: 600; }
.col-empty span { color: var(--text-2); }
.col-empty .btn { margin-top: 8px; }
.col-more { display: flex; justify-content: center; margin-top: 32px; }
.pg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pg-tags span { font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: var(--gray); color: var(--text-2); }
.bg-gray .pg-tags span { background: var(--gray); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.faq-group + .faq-group { margin-top: 44px; }
.faq-group[hidden] { display: none; }
.faq-group h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 8px; }
.faq-list .pg-faq[hidden] { display: none; }
.faq-list .pg-faq p { font-size: 1rem; line-height: 1.6; max-width: 70ch; }
.faq-aside { position: sticky; top: 130px; }
.faq-ask { display: grid; gap: 8px; padding: 26px; border-radius: var(--r-lg); background: var(--gray); justify-items: start; }
.faq-ask .pg-card-ic { background: var(--white); }
.faq-ask b { font-size: 1.15rem; font-weight: 600; }
.faq-ask > span:not(.pg-card-ic) { color: var(--text-2); font-size: .92rem; }
.faq-ask .btn { margin-top: 8px; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.ab-hero { padding-bottom: clamp(80px, 10vw, 140px); }
.ab-hero .wrap { position: relative; }
.ab-h1 { font-size: clamp(3rem, 7vw, 6rem); max-width: 14ch; margin: 18px 0 26px; line-height: 1.02; }
.ab-mission { font-size: clamp(1.25rem, 2vw, 1.75rem); max-width: 38ch; color: var(--ink); line-height: 1.35; }
.ab-quote-sec { padding: clamp(96px, 12vw, 160px) 0; }
.ab-quote-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.ab-quote { font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.06; margin-top: 18px; }
.ab-paras { display: grid; gap: 18px; padding-top: 44px; }
.ab-paras p { color: var(--d-text-2); font-size: 1.08rem; line-height: 1.6; }
.ab-diffs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ab-diff { padding: 32px; border-radius: var(--r-lg); background: var(--gray); display: grid; gap: 10px; align-content: start; }
.ab-diff .n { font-family: var(--f-mono); font-size: .78rem; color: var(--accent-ink); letter-spacing: 0; }
.ab-diff h3 { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.03em; }
.ab-diff p { color: var(--text-2); line-height: 1.55; }
.ab-field { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.ab-field-head { position: sticky; top: 100px; display: grid; gap: 18px; }
.ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; }
.ab-stats div { padding: 18px; border-radius: 18px; background: var(--white); display: grid; gap: 6px; }
.ab-stats b { font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.ab-stats span { font-size: .8rem; color: var(--text-2); line-height: 1.35; }
.ab-tl { position: relative; display: grid; gap: 0; padding-left: 0; }
.ab-tl::before { content: ""; position: absolute; left: 31px; top: 10px; bottom: 10px; width: 1px; background: var(--sep); }
.ab-tl li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 16px 0; }
.ab-yr { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; min-width: 48px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--white); font-size: .78rem; font-weight: 600; color: var(--ink); box-shadow: 0 0 0 1px var(--sep); }
.ab-tl li:nth-child(-n+3) .ab-yr, .ab-tl li .ab-yr:not(:empty) { }
.ab-tl p { color: var(--text-2); line-height: 1.55; padding-top: 3px; }
.ab-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ab-person { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 22px; border-radius: var(--r-lg); background: var(--gray); }
.ab-photo { display: block; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--gray-2); margin-bottom: 10px; }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .5s, transform .8s var(--ease-out); }
.ab-person:hover .ab-photo img { filter: none; transform: scale(1.03); }
.ab-person b { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
.ab-role { font-size: .88rem; color: var(--accent-ink); font-weight: 500; }
.ab-person p { font-size: .9rem; color: var(--text-2); line-height: 1.5; margin-top: 4px; }
.ab-in { margin-top: auto; padding-top: 10px; font-size: .85rem; font-weight: 500; color: var(--ink); }
.ab-in:hover { color: var(--accent-ink); }

/* ==========================================================================
   PRICING
   ========================================================================== */
.pr-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.pr-scope { display: grid; gap: 22px; padding: 28px; border-radius: var(--r-lg); background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 30px 70px -30px rgba(0,0,0,.25); }
.pr-scope-row { display: grid; gap: 10px; }
.pr-scope-k { font-size: .76rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; }
.pr-scope-k b { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: var(--gray-2); }
.seg button { height: 36px; border-radius: 9px; font-size: .86rem; font-weight: 500; color: var(--text-2); transition: background .25s, color .25s, box-shadow .25s; }
.seg button[aria-checked="true"] { background: var(--white); color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.pr-scope input[type=range] { width: 100%; accent-color: var(--ink); }
.pr-scope-out { display: grid; gap: 6px; padding: 18px; border-radius: 16px; background: var(--ink); color: var(--d-text); }
.pr-scope-out .pr-scope-k { color: var(--d-text-3); }
.pr-scope-out b { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.pr-scope-out > span:not(.pr-scope-k) { font-size: .88rem; color: var(--d-text-2); }
.pr-scope-out .btn { justify-self: start; margin-top: 8px; background: #fff; color: var(--ink); }
.pr-factors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pr-factor { position: relative; display: grid; gap: 10px; align-content: start; padding: 30px; border-radius: var(--r-lg); background: var(--white); }
.pr-factor .n { position: absolute; top: 30px; right: 30px; font-family: var(--f-mono); font-size: .78rem; color: var(--text-3); letter-spacing: 0; }
.pr-factor h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.025em; margin-top: 6px; }
.pr-factor p { color: var(--text-2); line-height: 1.5; }
.pr-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pr-opt { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r-lg); background: var(--gray); }
.pr-opt.feat { background: var(--ink); color: var(--d-text); }
.pr-k { font-size: .78rem; font-weight: 600; color: var(--accent-ink); }
.pr-opt.feat .pr-k { color: var(--accent-ink-d); }
.pr-opt h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; }
.pr-opt p { font-size: .9rem; color: var(--text-2); line-height: 1.5; }
.pr-opt.feat p { color: var(--d-text-2); }
.pr-price { margin-top: 6px; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.04em; }
.pr-price span { display: block; font-size: .78rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.pr-opt ul { display: grid; gap: 8px; margin: 6px 0 14px; }
.pr-opt li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: .88rem; }
.pr-opt li svg { margin-top: 3px; color: var(--accent-ink); }
.pr-opt.feat li svg { color: var(--accent-ink-d); }
.pr-opt .btn { margin-top: auto; align-self: flex-start; }
.pr-opt.feat .btn-primary { background: #fff; color: var(--ink); }
.pr-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.pr-steps { display: grid; gap: 12px; counter-reset: s; }
.pr-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 18px; border-radius: 18px; background: var(--white); }
.pr-step-n { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 600; }
.pr-steps b { font-weight: 600; font-size: 1.05rem; }
.pr-steps li > span:last-child { color: var(--text-2); font-size: .92rem; }
.pr-incl { padding: 28px; border-radius: var(--r-lg); background: var(--white); display: grid; gap: 14px; position: sticky; top: 100px; }
.pr-incl ul { display: grid; gap: 12px; }
.pr-incl li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.pr-incl li svg { color: var(--accent-ink); margin-top: 4px; }
.pr-faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.pr-faq .pg-sec-head { margin-bottom: 0; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.ct-hero { min-height: 100vh; display: flex; align-items: center; }
.ct-grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 96px); align-items: center; width: 100%; }
.ct-cards { display: grid; gap: 10px; margin-top: 34px; max-width: 460px; }
.ct-card { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--gray); transition: background .2s; }
a.ct-card:hover { background: var(--gray-2); }
.ct-card .pg-card-ic { grid-row: span 2; margin: 0; background: var(--white); }
.ct-card b { font-weight: 600; }
.ct-card span:not(.pg-card-ic) { font-size: .88rem; color: var(--text-2); }
.ct-form { display: grid; gap: 16px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 30px 70px -30px rgba(0,0,0,.25); }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-form label { display: grid; gap: 6px; }
.ct-form label > span { font-size: .82rem; font-weight: 600; color: var(--text-2); }
.ct-form input, .ct-form textarea, .ct-form select { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--sep); background: var(--white); font: inherit; font-size: .98rem; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.ct-form textarea { resize: vertical; }
.ct-form input:focus, .ct-form textarea:focus, .ct-form select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.ct-sel { position: relative; }
.ct-sel select { appearance: none; -webkit-appearance: none; height: auto; border-radius: 12px; max-width: none; }
.ct-sel .sel-chev { right: 16px; bottom: 19px; }
.ct-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ct-note { font-size: .8rem; color: var(--text-3); max-width: 30ch; }
.ct-err { font-size: .85rem; color: #B42318; }

/* ==========================================================================
   FEATURES
   ========================================================================== */
.ft-status { padding: 0; overflow: hidden; }
.ft-steps { position: relative; padding: 16px 22px 22px; display: grid; gap: 0; }
.ft-steps::before { content: ""; position: absolute; left: 30px; top: 30px; bottom: 34px; width: 1px; background: var(--sep); }
.ft-steps li { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 2px 16px; padding: 12px 0; }
.ft-dot { grid-row: span 2; position: relative; z-index: 1; width: 17px; height: 17px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--sep); margin-top: 2px; transition: background .4s, border-color .4s; }
.in .ft-dot { background: var(--ink); border-color: var(--ink); transition-delay: calc(.4s + var(--i) * .35s); }
.in .ft-steps li:last-child .ft-dot { background: var(--accent); border-color: var(--accent); }
.ft-steps b { font-weight: 600; }
.ft-steps li > span:last-child { font-size: .9rem; color: var(--text-2); }
.ft-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ft-cap { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-lg); background: var(--white); }
.ft-cap .pg-card-ic { margin-bottom: 6px; }
.ft-cap h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; }
.ft-cap p { font-size: .9rem; color: var(--text-2); line-height: 1.5; }
.ft-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.ft-subs span { font-size: .74rem; padding: 4px 10px; border-radius: 999px; background: var(--gray); color: var(--text-2); }
.ft-ent { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.ft-ent .pg-sec-head { margin: 0; }
.ft-ent .h2 { margin-top: 16px; }
.ft-ent .lead { margin-top: 16px; }
.ft-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ft-pills span { padding: 8px 14px; border-radius: 999px; background: var(--d-tile); color: var(--d-text); font-size: .88rem; font-weight: 500; }
.ft-ent-list { display: grid; gap: 0; }
.ft-ent-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 16px 0; border-top: 1px solid var(--d-sep); color: var(--d-text-2); }
.ft-ent-list li:last-child { border-bottom: 1px solid var(--d-sep); }
.ft-ent-list svg { color: var(--accent-ink-d); margin-top: 4px; }
.ft-toolgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ft-tools { display: grid; gap: 14px; padding: 24px; border-radius: var(--r-lg); background: var(--gray); }
.ft-tools b { font-weight: 600; }
.ft-tools > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-logo { width: 52px; height: 52px; border-radius: 14px; background: var(--white); display: grid; place-items: center; }
.ft-logo img { width: 26px; height: 26px; object-fit: contain; }
.ft-logo.wide { width: 96px; } .ft-logo.wide img { width: 74px; }
.ft-logo-t { width: auto; padding: 0 14px; font-size: .8rem; color: var(--text-2); }

/* CAREERS */
.cr-empty { display: grid; grid-template-columns: 80px 1fr auto; gap: 24px; align-items: center; padding: 32px; border-radius: var(--r-lg); background: var(--gray); }
.cr-empty .brand-mark { width: 72px; height: 50px; color: var(--accent); }
.cr-empty > div { display: grid; gap: 6px; }
.cr-empty b { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.03em; }
.cr-empty > div > span:last-child { color: var(--text-2); }

@media (max-width: 1068px) {
  .pr-opts, .ft-caps { grid-template-columns: repeat(2, 1fr); }
  .ab-team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .faq-grid, .ab-quote-grid, .ab-field, .pr-hero-grid, .pr-split, .pr-faq, .ct-grid, .ft-ent, .ft-toolgrid { grid-template-columns: 1fr; }
  .ab-field-head, .faq-aside, .pr-incl { position: static; }
  .ab-paras { padding-top: 0; }
  .pr-factors { grid-template-columns: 1fr; }
  .col-bar-inner { flex-direction: column; align-items: stretch; }
  .col-tools { overflow-x: auto; scrollbar-width: none; }
  .ct-hero { min-height: 0; }
}
@media (max-width: 640px) {
  .ab-diffs, .ab-stats, .pr-opts, .ft-caps, .ab-team, .ct-row { grid-template-columns: 1fr; }
  .cr-empty { grid-template-columns: 1fr; }
  .col-search kbd { display: none; }
  .col-search input { padding-right: 52px; }
  .col-x { right: 14px; }
}
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* back links, CTA rows */
.pg-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .9rem; font-weight: 500; color: var(--accent-ink); }
.pg-back:hover { text-decoration: underline; }
.pg-hero-simple .pg-back { display: flex; width: fit-content; }
.pg-cta-row { margin-top: 18px !important; padding-top: 22px; border-top: 1px solid var(--sep); }
.pg-cta-row .btn-ghost svg { margin-right: 2px; }

/* demo form (blog posts) */
.demo-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.demo-modal[hidden] { display: none; }
.demo-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadeIn .25s ease; }
.demo-card { position: relative; width: min(440px, 100%); display: grid; gap: 14px; padding: 30px; border-radius: 24px; background: var(--white); box-shadow: 0 30px 80px rgba(0,0,0,.3); animation: popIn .4s var(--ease-out); }
.demo-card h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; }
.demo-card label { display: grid; gap: 6px; }
.demo-card label span { font-size: .82rem; font-weight: 600; color: var(--text-2); }
.demo-card input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--sep); font: inherit; font-size: .98rem; }
.demo-card input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.demo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.demo-actions .btn { width: 100%; }
.demo-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--gray); font-size: 1.2rem; color: var(--text-2); }
.demo-note { font-size: .78rem; color: var(--text-3); text-align: center; }
.demo-ok { padding: 12px 14px; border-radius: 12px; background: #E9F7EE; color: #12663A; font-size: .88rem; }
.demo-ok[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* early access */
.ea-hero { min-height: 92vh; display: flex; align-items: center; }
.ea-grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; width: 100%; }
.ea-badge { display: inline-flex; gap: 6px; margin-top: 18px; padding: 7px 14px; border-radius: 999px; background: var(--gray); font-size: .85rem; font-weight: 500; color: var(--text-2); }
.ea-badge b { color: var(--accent-ink); font-weight: 600; }
.ea-perks { display: grid; gap: 10px; margin-top: 26px; }
.ea-perks li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: var(--text-2); }
.ea-perks svg { color: var(--accent-ink); margin-top: 4px; }
.ea-card { display: grid; gap: 10px; padding: 28px; border-radius: var(--r-lg); background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 30px 70px -30px rgba(0,0,0,.25); }
.ea-card h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 6px; }

/* 404 */
.nf-hero { min-height: 90vh; display: flex; align-items: center; }
.nf { position: relative; display: grid; justify-items: center; text-align: center; }
.nf .hero-actions { justify-content: center; }
.nf-rabbit { width: 120px; height: 84px; color: var(--accent); margin-bottom: 10px; }
.nf-code { font-family: var(--f-mono); font-size: .9rem; color: var(--text-3); letter-spacing: .2em; }
@media (max-width: 900px) { .ea-grid { grid-template-columns: 1fr; } .ea-hero { min-height: 0; } }

/* ==========================================================================
   Collections: two-row bar — row 1 search + filters, row 2 categories
   ========================================================================== */
.col-bar-inner { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 14px; padding-bottom: 12px; }
.col-row1 { display: flex; align-items: center; gap: 12px; }
.col-bar .col-search { flex: 1; min-width: 0; max-width: none; margin-top: 0; height: 46px; box-shadow: 0 0 0 1px var(--sep); }
.col-bar .col-search:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.col-bar .col-search input { font-size: .98rem; padding-left: 48px; }
.col-bar .col-search-ic { left: 17px; }
.col-bar .col-sel select { height: 46px; padding: 0 34px 0 16px; font-size: .88rem; }
.col-bar .col-chips { flex: none; }
.col-feat-sec { padding-top: 40px; }
@media (max-width: 900px) {
  .col-row1 { flex-direction: column; align-items: stretch; }
  .col-bar .col-tools { overflow-x: auto; scrollbar-width: none; }
  .col-bar .col-tools::-webkit-scrollbar { display: none; }
  .col-bar .col-sel { flex: none; }
}

/* ==========================================================================
   Case study page
   ========================================================================== */
.st-hero { padding-bottom: clamp(40px, 6vw, 64px); }
.st-hero-meta { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.st-hero-meta .pg-back { margin-top: 0; }
.st-cat { font-size: .82rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--gray); color: var(--accent-ink); }
.st-hero .pg-h1-article { max-width: 24ch; }
.st-out-sec { padding: 0 0 clamp(48px, 6vw, 80px); }
.st-out { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.st-impact { padding: 30px; border-radius: var(--r-lg); background: var(--ink); color: var(--d-text); display: grid; gap: 12px; align-content: start; }
.st-impact p { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.4; letter-spacing: -0.015em; color: #fff; }
.st-value { padding: 30px; border-radius: var(--r-lg); background: var(--gray); display: grid; gap: 12px; align-content: start; }
.st-value p { color: var(--text-2); line-height: 1.55; }
.st-k { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-ink); }
.st-impact .st-k { color: var(--accent-ink-d); }
.st-gal-sec { padding: clamp(48px, 6vw, 80px) 0; }
.st-gal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.st-count { font-size: .85rem; color: var(--text-3); }
.st-gallery { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.st-gallery.st-n1 { grid-template-columns: 1fr; }
.st-shot { position: relative; display: block; width: 100%; padding: 0; border-radius: 20px; overflow: hidden; background: #0b1622; cursor: zoom-in; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 20px 50px -24px rgba(0,0,0,.35); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.st-shot img { display: block; width: 100%; height: auto; }
.st-shot:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -24px rgba(0,0,0,.4); }
.st-gallery:not(.st-n1) .st-shot-main { grid-column: 1 / -1; }
.st-zoom { position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--ink); opacity: 0; transform: scale(.9); transition: opacity .25s, transform .35s var(--ease-out); }
.st-shot:hover .st-zoom, .st-shot:focus-visible .st-zoom { opacity: 1; transform: none; }
.st-lightbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadeIn .25s ease; cursor: zoom-out; }
.st-lightbox[hidden] { display: none; }
.st-lightbox img { max-width: 100%; max-height: 92vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: popIn .35s var(--ease-out); }
.st-lb-x { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.5rem; }
.st-body { padding-top: clamp(56px, 7vw, 96px); }
.pg-aside > .btn { justify-content: center; }

/* article / story body: text column and sidebar sit together, no dead gap */
.pg-body-grid.has-aside { grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; gap: clamp(40px, 6vw, 96px); max-width: none; }
.pg-body-grid.has-aside .pg-prose { max-width: none; }
.pg-prose > h2:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .st-out, .st-gallery { grid-template-columns: 1fr; }
  .pg-body-grid.has-aside { grid-template-columns: minmax(0, 1fr); }
}
.st-impact p { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.st-impact ul { display: grid; gap: 10px; margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.st-impact li { position: relative; padding-left: 18px; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.72); }
.st-impact li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 900px) { .col-bar .col-search { flex: none; width: 100%; } }
/* long unbroken strings (log names, URLs) wrap instead of widening the page on phones */
.pg-prose { overflow-wrap: break-word; }

/* Reading content must never depend on scroll-animation visibility thresholds. */
.js .pg-prose, .js .pg-prose[data-reveal] { opacity: 1; transform: none; transition: none; }
.pg-body-grid, .pg-prose { min-width: 0; }
.pg-prose { overflow-wrap: anywhere; }
.pg-prose p { line-height: 1.8; }
.pg-prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: .18em; }
.pg-prose blockquote { margin: 1.5em 0; border-left: 3px solid var(--accent); padding: 20px 24px; background: var(--gray); border-radius: 0 12px 12px 0; }
.pg-prose blockquote p { margin: 0; }
.pg-prose ol { padding-left: 1.4em; list-style: decimal; }
.pg-prose li > p { margin: .35em 0; }
.pg-prose li ul, .pg-prose li ol { margin-top: .5em; }
.pg-prose pre { max-width: 100%; overflow-x: auto; padding: 22px; background: #0a1929; color: #e2e8f0; border-radius: 12px; line-height: 1.6; white-space: pre; }
.pg-prose code { font-size: .88em; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.pg-prose :not(pre) > code { padding: .15em .35em; background: var(--gray); border-radius: 4px; }
.pg-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .9rem; }
.pg-prose th, .pg-prose td { padding: 12px; border: 1px solid var(--sep-2); text-align: left; }
.pg-prose th { background: var(--gray); }
.pg-prose img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.pg-hero-img { max-width: 960px; margin-inline: auto; }
.pg-hero-img img { width: 100%; max-height: 400px; object-fit: contain; }
.st-body { padding-top: 24px; }
@media (max-width: 640px) {
  .pg-h1-article { font-size: clamp(1.9rem, 7.5vw, 2.6rem); overflow-wrap: anywhere; }
  .pg-hero-simple { padding-bottom: 40px; }
  .pg-body-grid.has-aside { gap: 32px; }
  .pg-prose { font-size: 1rem; }
}

/* Value-led marketing pages share the existing type, buttons, and brand palette. */
.value-hero{padding:150px 24px 64px;text-align:center;background:#fff}

.value-hero .wrap{max-width:1040px}
.value-hero h1{font-size:clamp(40px,6vw,76px);line-height:1.08;margin:24px auto;max-width:980px}

.value-hero .lead{max-width:790px;margin:0 auto 24px}
.value-hero .hero-actions{justify-content:center;margin:26px 0 20px;flex-wrap:wrap}

.value-note{font-size:14px;line-height:1.65;color:#595959;margin:10px 0}
.value-points{display:flex;justify-content:center;gap:28px;list-style:none;padding:0;flex-wrap:wrap;font-weight:600}
.value-points li:before{content:'✓';color:#d94d00;margin-right:8px}

.value-section{padding:72px 0;scroll-margin-top:80px}
.value-section h2{max-width:980px;margin-bottom:30px}
.value-section .lead{margin-bottom:26px}
.value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.value-card,.value-triggers article{padding:28px;background:#fff;border:1px solid #ddd;border-radius:16px}
.value-card h3,.value-triggers h3,.value-engine h3,.value-output h3{font-size:22px;line-height:1.35;margin:14px 0}
.value-card p,.value-triggers p,.value-engine p,.value-output p{line-height:1.75;margin:12px 0}
.value-icon{color:#c94700;font-size:16px;font-weight:700}
.value-card .more-link{margin-top:18px}
.value-triggers{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.value-triggers article>span{font-weight:600;color:#b23e00}
.value-triggers a{text-decoration:underline}
.value-merge{text-align:center;font-size:32px;color:#c94700;padding:12px}
.value-engine,.value-output{border:1px solid #d5d5d5;border-radius:16px;padding:28px;max-width:900px;margin:auto;text-align:center;background:white}
.value-engine{border:2px solid #f06a21}
.value-section.bg-black .value-triggers article{background:#191919;border-color:#444;color:white}
.value-section ol{padding-left:24px;line-height:1.9;list-style:decimal}
.value-steps{font-size:20px;max-width:850px}
.value-steps li{padding:12px}
.value-section .more-link{margin-right:24px}
.value-logos{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.value-logo{display:flex;align-items:center;gap:12px;padding:14px;background:white;border-radius:10px}
.value-logo img{width:32px;height:32px;object-fit:contain}

@media(max-width:760px){.value-hero{padding:120px 0 44px}
.value-hero h1{font-size:42px}
.value-hero .lead{font-size:18px}
.value-points{gap:10px 20px;font-size:14px}
.value-grid,.value-triggers{grid-template-columns:1fr}
.value-section{padding:48px 0}
.value-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
.value-card,.value-triggers article{padding:22px}
.value-section .more-link{display:inline-flex;margin-top:12px}
.value-hero .btn{max-width:100%;white-space:normal}
}

/* Preserve the original animated homepage while making its promise easy to scan. */
.hero .hero-copy { max-width: 980px; }
.hero h1 { font-size: clamp(40px, 5.3vw, 76px); }
.hero .lead { max-width: 790px; }
.hero .home-value-points { margin: 18px 0 0; }
.hero .hero-copy button { pointer-events: auto; }
.home-reassurance { margin-top: 12px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.hero .hero-actions { margin-top: 22px; }
.hero .hero-hint { pointer-events: auto; }
.hero-animation-paused .chaser *, .hero-animation-paused .hint-ping::after { animation-play-state: paused !important; }
.home-solution-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0; }
.home-anchor { display: block; scroll-margin-top: 70px; }
.race-big .neon-text { font-size: clamp(54px, 9vw, 130px); }
@media (max-width: 640px) {
  .hero-content { padding-top: 96px; }
  .hero h1 { font-size: 40px; }
  .hero .lead { font-size: 17px; }
  .hero .home-value-points { gap: 8px 14px; font-size: 13px; }
  .hero .hero-actions { gap: 10px; margin-top: 16px; }
  .home-reassurance { font-size: 12px; margin-top: 10px; }
  .hero-hint .hint-pill { font-size: 11px; padding: 6px 10px; }
}

.value-detail-list { list-style: disc; padding-left: 24px; max-width: 900px; line-height: 1.8; margin: 20px 0; }
.value-detail-list li { margin: 12px 0; }
.value-section .value-output { margin-top: 24px; }