/* Devplan marketing site — follows the Devplan brand guide (devplan.com/brand, May 2026):
   Geist for reading, JetBrains Mono for system labels, ink/paper surfaces, one cobalt accent. */

:root {
  --paper: #FFFFFF;
  --paper-tint: #FBFBFC;
  --paper-off: #F7F7F8;
  --rule: #ECECEE;
  --rule-strong: #D9D9DD;
  --ink: #0A0A0B;
  --ink-2: #1A1A1C;
  --ink-dim: #52525A;
  --ink-faint: #8A8A92;
  --night: #0A0A0B;
  --night-2: #0F0F11;
  --night-dim: #A0A0A6;
  --night-faint: #5C5C62;
  --accent: #1F3DFF;
  --accent-2: #2D49FF;
  --accent-dark: #5A77FF;
  --accent-soft: rgba(31, 61, 255, .10);
  /* soft cobalt, taken as-is from the Devplan product (prototype "Actions" button) */
  --cobalt-soft: #F0F5FF;
  --cobalt-soft-line: #B3C8F8;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 10px;
  --radius-lg: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --section: clamp(72px, 10vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-faint); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.eyebrow {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.eyebrow--dark { color: var(--accent-dark); }
.h2 {
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.028em;
  max-width: 20ch;
  text-wrap: balance;
}
h3 { font-weight: 500; font-size: 18px; letter-spacing: -.01em; line-height: 1.3; }
.lede { font-size: clamp(17px, 1.6vw, 19px); color: var(--ink-dim); max-width: 60ch; margin-top: 20px; }
.caption { font: 400 12px/1.4 var(--mono); color: var(--ink-faint); margin-top: 12px; text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn:active { transform: scale(.98); }
.btn--lg { height: 48px; padding: 0 24px; font-size: 16px; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-2); }
.btn--ghost { border: 1px solid var(--rule-strong); color: var(--ink); background: var(--paper); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--on-dark { background: transparent; color: #fff; border-color: var(--night-faint); }
.btn--on-dark:hover { border-color: #fff; }
.link-quiet { font-size: 14px; color: var(--ink-dim); text-decoration: none; }
.link-quiet:hover { color: var(--ink); }
.arrow-link {
  display: inline-flex; gap: 8px; margin-top: 32px;
  font-weight: 500; font-size: 15px; text-decoration: none; color: var(--accent);
}
.arrow-link span { transition: transform .25s var(--ease); }
.arrow-link:hover span { transform: translateX(4px); }
.arrow-link--dark { color: var(--accent-dark); }

/* ---------- brand mark (placeholder until the official SVG is dropped in) ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { display: grid; grid-template-columns: repeat(2, 6px); gap: 3px; }
.brand__mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.brand__mark i:nth-child(4) { opacity: .45; }
.brand__word { font-weight: 600; font-size: 18px; letter-spacing: -.02em; }

/* ---------- header ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.is-scrolled { border-bottom-color: var(--rule); }
.nav__bar { display: flex; align-items: center; gap: 32px; height: 64px; }
.nav__links { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.nav__links > a, .nav__trigger { color: var(--ink-dim); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; }
.nav__links > a:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { color: var(--ink); }
.nav__trigger svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .2s; }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__item { position: relative; }
.nav__cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav__burger { display: none; margin-left: auto; width: 40px; height: 40px; position: relative; }
.nav__burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease); }
.nav__burger span:first-child { top: 16px; }
.nav__burger span:last-child { top: 23px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: absolute; top: calc(100% + 10px); left: -24px;
  display: grid; grid-template-columns: repeat(3, 230px); gap: 8px;
  padding: 10px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px -20px rgba(10, 10, 11, .25);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.nav__item.is-open .menu { opacity: 1; visibility: visible; transform: none; }
.menu__card { display: grid; gap: 6px; padding: 16px; border-radius: var(--radius); text-decoration: none; transition: background-color .2s; }
.menu__card:hover { background: var(--paper-off); }
.menu__card strong { font-weight: 500; font-size: 15px; }
.menu__card span:last-child { font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
.menu__icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 15px; }
.menu--list { grid-template-columns: 200px; gap: 0; }
.menu--list a { padding: 10px 14px; border-radius: 8px; font-size: 14px; text-decoration: none; color: var(--ink-dim); }
.menu--list a:hover { background: var(--paper-off); color: var(--ink); }

.mobile { border-top: 1px solid var(--rule); padding: 16px var(--gutter) 24px; display: grid; gap: 4px; background: var(--paper); }
.mobile[hidden] { display: none; }
.mobile .mono { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 12px 0 4px; }
.mobile a:not(.btn) { padding: 10px 0; text-decoration: none; font-size: 17px; }
.mobile__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

/* ---------- hero ---------- */
.hero { padding: clamp(56px, 9vw, 112px) 0 clamp(56px, 8vw, 96px); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(var(--rule-strong) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
  opacity: .7;
}
.hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__title {
  font-weight: 400;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1.0;
  letter-spacing: -.035em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero__sub { margin-top: 24px; font-size: clamp(17px, 1.9vw, 21px); color: var(--ink-dim); max-width: 38em; text-wrap: balance; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.hero__note { margin-top: 14px; font: 400 12px/1.4 var(--mono); color: var(--ink-faint); }

/* hero flow diagram */
.flow {
  margin-top: clamp(48px, 7vw, 80px);
  display: grid; grid-template-columns: 1fr 64px 1.15fr 64px 1fr; align-items: center;
  padding: clamp(20px, 3vw, 36px); border: 1px solid var(--rule); border-radius: 20px;
  background: var(--paper-tint);
}
.flow__label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.flow__col { display: grid; gap: 10px; }
.sig, .out {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: 14px; line-height: 1.35;
  opacity: 0; transform: translateX(-12px);
}
.out { transform: translateX(12px); }
.sig__src { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); background: var(--paper-off); padding: 5px 7px; border-radius: 6px; flex: none; }
.out__ico { font: 500 12px/1 var(--mono); color: var(--accent); background: var(--accent-soft); width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.flow__wire { width: 100%; height: 200px; }
.flow__wire path { fill: none; stroke: var(--rule-strong); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 4 5; }
.is-in .flow__wire path { animation: dash 1.2s linear infinite; }
.req {
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 14px; padding: 20px;
  box-shadow: 0 18px 40px -24px rgba(31, 61, 255, .45);
  opacity: 0; transform: scale(.96);
}
.req__kicker { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.req__title { font-size: 24px; letter-spacing: -.02em; margin-top: 8px; }
.req__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.req__meta span { font-size: 12px; color: var(--ink-dim); background: var(--paper-off); border-radius: 999px; padding: 4px 10px; }
.req__bar { height: 6px; border-radius: 999px; background: var(--paper-off); margin-top: 16px; overflow: hidden; }
.req__bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 1.2s var(--ease) 1.1s; }
.is-in .req__bar i { width: var(--w); }
.req__spec { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--ink-dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #1FA971; box-shadow: 0 0 0 4px rgba(31, 169, 113, .15); }

.flow.is-in .sig { animation: slideIn .6s var(--ease) forwards; animation-delay: calc(.15s + var(--i) * .15s); }
.flow.is-in .req { animation: pop .7s var(--ease) .7s forwards; }
.flow.is-in .out { animation: slideIn .6s var(--ease) forwards; animation-delay: calc(1.5s + var(--i) * .15s); }

/* ---------- integrations marquee ---------- */
.logos { padding: 8px 0 clamp(56px, 8vw, 96px); }
.logos__title { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); text-align: center; margin-bottom: 24px; }
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee 45s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  height: 52px; padding: 0 20px 0 10px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); font-size: 15px; font-weight: 500; color: var(--ink-2);
}
.chip__logo {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper-off); font: 500 13px/1 var(--mono); color: var(--ink-dim);
}

/* ---------- sections ---------- */
.section { padding: var(--section) 0; }
.section--white { background: #fff; }
.section--tint { background: var(--cobalt-soft); }
.section--tint .team, .section--tint .calc__card { background: #fff; }
.section--tint .team, .section--tint .calc__card, .section--tint .stab { border-color: var(--cobalt-soft-line); }
.section--dark { background: var(--night); color: #fff; }
.section--dark .lede { color: var(--night-dim); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }

.pain { padding: 28px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper); }
.pain__n { font-size: 12px; color: var(--accent); margin-bottom: 36px; }
.pain p:last-child, .card > p, .team p, .trust p, .feature p, .step p { color: var(--ink-dim); font-size: 15.5px; margin-top: 8px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; top: 20px; left: 20px; right: 20px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--rule-strong)); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease) .3s; }
.steps.is-in::before { transform: scaleX(1); }
.step { position: relative; padding-top: 64px; }
.step__n { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--accent); color: var(--accent); font-size: 14px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.split--rev .split__text { order: 1; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature { padding: 22px; border: 1px solid var(--rule); border-radius: var(--radius-lg); transition: border-color .25s, transform .25s var(--ease); }
.feature:hover { border-color: var(--accent); transform: translateY(-2px); }
.feature h3 { font-size: 16px; }
.feature p { font-size: 14.5px !important; }

.ticks { display: grid; gap: 14px; margin-top: 28px; }
.ticks li { padding-left: 28px; position: relative; color: var(--night-dim); font-size: 15.5px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 1.5px solid var(--accent-dark); border-bottom: 1.5px solid var(--accent-dark); transform: rotate(-45deg); }
.ticks strong { color: #fff; font-weight: 500; }

.graph svg { width: 100%; max-width: 460px; margin: 0 auto; overflow: visible; }
.graph__edges path { stroke: #2A2A30; stroke-width: 1.2; fill: none; }
.graph__node circle { fill: var(--night-2); stroke: #2A2A30; }
.graph__node text, .graph__core text { fill: var(--night-dim); font: 500 11px var(--mono); text-anchor: middle; }
.graph__node--out circle { stroke: var(--accent-dark); }
.graph__node--out text { fill: #fff; }
.graph__core circle { fill: var(--accent); }
.graph__core text { fill: #fff; font: 500 14px var(--sans); }
.graph__halo { fill: none !important; stroke: var(--accent-dark); opacity: .5; transform-origin: 210px 210px; animation: halo 3s var(--ease) infinite; }
.pulse { fill: var(--night-dim); }
.pulse--out { fill: var(--accent-dark); }

.card { padding: 28px; border: 1px solid var(--rule); border-radius: var(--radius-lg); display: flex; flex-direction: column; }
.card__tag { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.mock { margin-top: 24px; border-radius: 12px; background: var(--paper-off); padding: 16px; font-size: 13.5px; }
.mock__q { color: var(--ink-dim); }
.mock__q b { color: var(--accent); font-weight: 500; }
.mock__a { margin-top: 10px; padding: 10px 12px; background: var(--paper); border-radius: 8px; border: 1px solid var(--rule); }
.mock--code { background: var(--night); color: #E6E6EA; font: 400 12.5px/1.6 var(--mono); overflow-x: auto; white-space: pre; }
.mock--code .c { color: var(--night-faint); }
.mock__row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; padding: 6px 0; }
.mock__row i { height: 6px; border-radius: 999px; background: var(--accent); width: 0; transition: width 1s var(--ease) .4s; }
.is-in .mock__row i { width: var(--w); }

.teams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 48px; background: var(--rule-strong); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); overflow: hidden; }
.team { background: var(--paper-off); padding: 28px; transition: background-color .25s; }
.team:hover { background: var(--paper); }

.quote { max-width: 900px; }
.quote blockquote { margin: 0; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 14.5px; color: var(--ink-dim); }
.quote strong { color: var(--ink); font-weight: 500; }
.quote__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 500 13px var(--mono); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; border-top: 1px solid var(--rule); padding-top: 32px; }
.stat__n { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.03em; color: var(--accent); margin-bottom: 8px; }
.stat p:last-child { color: var(--ink-dim); font-size: 15px; }

.bvb { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.compare { border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); font-size: 14.5px; }
.compare__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--rule); }
.compare__row span:nth-child(2) { color: var(--ink-faint); }
.compare__row span:nth-child(3) { color: var(--accent); font-weight: 500; }
.compare__head { border-top: 0; background: var(--paper-tint); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.compare__head span { color: var(--ink-faint) !important; font-weight: 500 !important; }

.trust { padding-top: 20px; border-top: 1px solid var(--ink); }
.trust h3 { font-size: 16px; }

.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq__list { border-top: 1px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule-strong); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 36px 22px 0; font-size: 17px; font-weight: 500; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font: 300 24px var(--sans); color: var(--ink-faint); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 36px 24px 0; color: var(--ink-dim); font-size: 16px; }
.faq details a { color: var(--accent); }

.final { background: var(--night); color: #fff; padding: clamp(88px, 12vw, 152px) 0; text-align: center; position: relative; overflow: hidden; }
.final::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(#26262B 1px, transparent 1px); background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 70%);
}
.final__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.final .h2 { max-width: 18ch; }
.final .lede { color: var(--night-dim); }

.footer { padding: 72px 0 32px; border-top: 1px solid var(--rule); font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer__tag { color: var(--ink-dim); margin-top: 16px; max-width: 30ch; }
.footer nav { display: grid; gap: 10px; align-content: start; }
.footer nav .mono { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.footer nav a { text-decoration: none; color: var(--ink-dim); }
.footer nav a:hover { color: var(--ink); }
.footer__legal { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--ink-faint); font-size: 13px; }
.footer__legal a { text-decoration: none; }


/* ---------- hero prompt demo ---------- */
.ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: stretch; width: 100%; max-width: 820px; margin-top: 44px; text-align: left; }
.ask__box {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 10px 10px 20px;
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 999px;
  box-shadow: 0 24px 60px -30px rgba(10, 10, 11, .35), 0 0 0 6px var(--paper-off);
}
.ask__plus { font: 300 22px/1 var(--sans); color: var(--ink-faint); flex: none; }
.ask__text { flex: 1; min-width: 0; font-size: 16.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.ask__caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -3px; background: var(--accent); animation: blink 1s steps(1) infinite; }
.ask__send { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--paper-off); transition: background-color .3s; }
.ask__send svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-faint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.ask.is-sent .ask__send { background: var(--accent); }
.ask.is-sent .ask__send svg { stroke: #fff; }
.ask__count {
  display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 190px;
  padding: 10px 20px; border: 1px solid var(--rule); border-radius: 20px; background: var(--paper);
  opacity: .35; transform: translateY(4px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.ask.is-sent .ask__count { opacity: 1; transform: none; }
.ask__n { font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--accent); }
.ask__n small { font: 500 11px var(--mono); letter-spacing: .06em; color: var(--ink-faint); margin-left: 6px; }
.ask__src { display: flex; gap: 10px; font: 400 11.5px var(--mono); color: var(--ink-dim); }
.ask__src b { font-weight: 500; color: var(--ink); }
.req__title, [data-sig], .req__meta span { transition: opacity .3s; }
.is-swapping .req__title, .is-swapping [data-sig], .is-swapping .req__meta span { opacity: 0; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 720px) {
  .ask { grid-template-columns: 1fr; }
  .ask__box { border-radius: 18px; align-items: flex-start; }
  .ask__text { white-space: normal; min-height: 3.1em; } /* two full lines at the 1.55 line height, so the box never grows while typing */
  .ask__count { flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; }
}


/* ---------- works with your stack ---------- */
.stack { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--rule); }
.stack__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.stack__logos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: 540px; overflow: hidden;
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.stack__col { overflow: hidden; }
.stack__track { display: flex; flex-direction: column; gap: 16px; animation: vloop 28s linear infinite; }
.stack__col--down .stack__track { animation-direction: reverse; animation-duration: 34s; }
.stack__col:nth-child(3) .stack__track { animation-duration: 31s; }
.stack__logos:hover .stack__track { animation-play-state: paused; }
.tile {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 22px;
  box-shadow: 0 12px 30px -22px rgba(10, 10, 11, .25);
  transition: border-color .25s, transform .25s var(--ease);
}
.tile:hover { border-color: var(--rule-strong); transform: scale(1.03); }
.tile img { width: 44px; height: 44px; }
.tile__name { font: 500 12px/1.2 var(--mono); color: var(--ink-dim); text-align: center; padding: 0 8px; }
.tile--todo { border-style: dashed; border-color: var(--rule-strong); }
.tile__mono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-off); font: 500 18px var(--mono); color: var(--ink-faint); }
.stack__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin: 32px 0 0; }
.stack__groups div { border-top: 1px solid var(--rule); padding-top: 12px; }
.stack__groups dt { font: 500 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.stack__groups dd { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
@keyframes vloop { to { transform: translateY(calc(-50% - 8px)); } }
@media (max-width: 960px) {
  .stack__inner { grid-template-columns: 1fr; }
  .stack__logos { height: 380px; order: 1; }
}
@media (max-width: 520px) {
  .stack__logos { gap: 10px; height: 320px; }
  .stack__track { gap: 10px; }
  .tile { border-radius: 16px; gap: 8px; }
  .tile img, .tile__mono { width: 32px; height: 32px; }
  .tile__name { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .stack__logos { height: auto; mask-image: none; -webkit-mask-image: none; } .stack__track [aria-hidden="true"] { display: none; } }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
.no-js .sig, .no-js .out, .no-js .req { opacity: 1; transform: none; }

@keyframes slideIn { to { opacity: 1; transform: none; } }
@keyframes pop { to { opacity: 1; transform: none; } }
@keyframes dash { to { stroke-dashoffset: -18; } }
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }
@keyframes halo { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
}
@media (max-width: 960px) {
  .split, .bvb, .faq { grid-template-columns: 1fr; }
  .split--rev .split__text { order: 0; }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .flow { grid-template-columns: 1fr; gap: 8px; }
  .flow__wire { height: 40px; width: 40px; margin: 0 auto; transform: rotate(90deg); }
  .grid3, .steps, .stats, .teams { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .features { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .grid4 { grid-template-columns: 1fr; }
  .compare__row { grid-template-columns: 1.2fr 1fr 1fr; padding: 14px; font-size: 13px; }
  .footer__legal { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .sig, .out, .req { opacity: 1 !important; transform: none !important; }
  .req__bar i, .mock__row i { width: var(--w) !important; }
  .marquee__track { flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee__track [aria-hidden="true"] { display: none; }
}

/* =====================================================================
   v2 — cinematic layer (Linear / Dovetail / Promptwise references).
   Same Devplan brand: Geist + JetBrains Mono, ink/paper/night, cobalt.
   ===================================================================== */

/* ---------- floating glass nav ---------- */
.nav { position: fixed; left: 0; right: 0; top: 14px; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.nav__bar {
  pointer-events: auto; height: 58px; max-width: 1120px; margin: 0 auto; width: calc(100% - 2 * var(--gutter));
  padding: 0 10px 0 20px; border-radius: 999px;
  background: rgba(15, 15, 17, .66); border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 20px 50px -25px rgba(0, 0, 0, .6);
  transition: background-color .3s, border-color .3s;
}
.nav.is-scrolled { border: 0; }
.nav.is-scrolled .nav__bar { background: rgba(10, 10, 11, .82); }
.nav .brand__word { color: #fff; }
.nav__links > a, .nav__trigger, .link-quiet { color: var(--night-dim); }
.nav__links > a:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"], .link-quiet:hover { color: #fff; }
.nav .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .18); }
.nav .btn--ghost:hover { border-color: #fff; }
.nav__burger span { background: #fff; }
.menu { top: calc(100% + 14px); background: var(--night-2); border-color: rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.menu__card:hover, .menu--list a:hover { background: rgba(255, 255, 255, .05); }
.menu__card strong, .menu--list a:hover { color: #fff; }
.menu__card span:last-child, .menu--list a { color: var(--night-dim); }
.menu__icon { background: rgba(90, 119, 255, .14); color: var(--accent-dark); }
.mobile { pointer-events: auto; margin: 8px var(--gutter) 0; border-radius: 20px; background: var(--night-2); border: 1px solid rgba(255, 255, 255, .08); color: #fff; }
.mobile .mono { color: var(--night-faint); }
.mobile .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .2); }

/* ---------- hero: dark stage with a live signal field ---------- */
.hero { background: var(--night); color: #fff; padding: 168px 0 120px; isolation: isolate; }
.hero::before { display: none; }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; filter: grayscale(.3) contrast(1.05); }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,.4), var(--night) 92%); }
.field { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__glow {
  position: absolute; left: 50%; top: 38%; width: min(1100px, 120vw); aspect-ratio: 1.6; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(31, 61, 255, .28), rgba(31, 61, 255, .08) 55%, transparent);
  filter: blur(20px); animation: breathe 9s ease-in-out infinite;
}
.hero .eyebrow { color: var(--accent-dark); }
.hero__title { color: #fff; font-size: clamp(44px, 7.6vw, 104px); letter-spacing: -.045em; max-width: 14ch; }
.hero__title .w { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(8px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(.15s + var(--i) * .06s); }
.hero.is-live .hero__title .w { opacity: 1; transform: none; filter: none; }
.hero__sub { color: var(--night-dim); }
.hero__note { color: var(--night-faint); }
.hero .btn--ghost { background: rgba(255, 255, 255, .04); color: #fff; border-color: rgba(255, 255, 255, .18); }
.hero .btn--ghost:hover { border-color: #fff; }
.btn--primary { box-shadow: 0 0 0 1px rgba(90, 119, 255, .5), 0 12px 40px -12px rgba(31, 61, 255, .8); }

/* prompt box as dark glass */
.hero .ask__box { background: rgba(26, 26, 28, .72); border-color: rgba(255, 255, 255, .12); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 6px rgba(255, 255, 255, .03); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hero .ask__text { color: #fff; }
.hero .ask__plus { color: var(--night-faint); }
.hero .ask__send { background: rgba(255, 255, 255, .08); }
.hero .ask__send svg { stroke: var(--night-dim); }
.hero .ask__count { background: rgba(26, 26, 28, .72); border-color: rgba(255, 255, 255, .1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hero .ask__n { color: var(--accent-dark); }
.hero .ask__src { color: var(--night-dim); }
.hero .ask__src b { color: #fff; }

/* flow diagram as a dark product window */
.hero .flow { background: rgba(15, 15, 17, .7); border-color: rgba(255, 255, 255, .08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 60px 120px -40px rgba(31, 61, 255, .35); margin-top: 88px; }
.hero .flow__label { color: var(--night-faint); }
.hero .sig, .hero .out { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); color: #E6E6EA; }
.hero .sig__src { background: rgba(255, 255, 255, .06); color: var(--night-dim); }
.hero .out__ico { background: rgba(90, 119, 255, .16); color: var(--accent-dark); }
.hero .flow__wire path { stroke: #34343B; }
.hero .req { background: var(--night-2); border-color: rgba(90, 119, 255, .45); box-shadow: 0 0 0 6px rgba(31, 61, 255, .08), 0 30px 70px -20px rgba(31, 61, 255, .55); color: #fff; }
.hero .req__kicker { color: var(--accent-dark); }
.hero .req__meta span { background: rgba(255, 255, 255, .06); color: var(--night-dim); }
.hero .req__bar { background: rgba(255, 255, 255, .06); }
.hero .req__spec { color: var(--night-dim); }
.hero .caption { color: var(--night-faint); }

/* ---------- integrations: dark continuation ---------- */
.stack { background: var(--night); color: #fff; border-top: 0; padding-top: 40px; }
.stack .lede { color: var(--night-dim); }
.stack .eyebrow { color: var(--accent-dark); }
.stack__groups div { border-top-color: rgba(255, 255, 255, .1); }
.stack__groups dt { color: var(--accent-dark); }
.stack__groups dd { color: #E6E6EA; }
.stack .arrow-link { color: var(--accent-dark); }
.stack .tile { box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); }
.stack .tile--todo { background: var(--night-2); border-color: #34343B; }
.stack .tile--todo .tile__name { color: var(--night-dim); }
.stack .tile--todo .tile__mono { background: rgba(255, 255, 255, .05); color: var(--night-dim); }

/* ---------- statement: words light up as you scroll ---------- */
.statement { background: var(--night); color: #fff; padding: clamp(96px, 14vw, 180px) 0 clamp(80px, 10vw, 128px); }
.statement__text { font-weight: 400; font-size: clamp(28px, 4.3vw, 56px); line-height: 1.12; letter-spacing: -.03em; max-width: 24ch; }
.statement__text .w { color: #2E2E34; transition: color .35s ease; }
.statement__text .w.on { color: #fff; }
.statement__text .w.hl.on { color: var(--accent-dark); }
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 80px; }
.statement .pain { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
.statement .pain h3 { color: #fff; }
.statement .pain p:last-child { color: var(--night-dim); }
.statement .pain__n { color: var(--accent-dark); }

/* ---------- the story: pinned product window ---------- */
.story { padding: var(--section) 0; background: var(--paper); }
.story__head { max-width: 760px; }
.story__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 88px); margin-top: 64px; }
.story__steps { counter-reset: none; }
.sstep { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-left: 28px; border-left: 2px solid var(--rule); opacity: .35; transition: opacity .5s var(--ease), border-color .5s var(--ease); }
.sstep:first-child { min-height: 48vh; justify-content: flex-start; padding-top: 12vh; }
.sstep:last-child { min-height: 56vh; }
.sstep.is-active { opacity: 1; border-left-color: var(--accent); }
.sstep__n { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.sstep h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; letter-spacing: -.02em; }
.sstep p:last-child { margin-top: 12px; color: var(--ink-dim); font-size: 16.5px; max-width: 42ch; }
.story__stage { position: sticky; top: 110px; align-self: start; }
.win { border-radius: 18px; background: var(--night); color: #E6E6EA; border: 1px solid #1F1F24; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(31, 61, 255, .45), 0 30px 60px -30px rgba(10, 10, 11, .5); }
.win__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #1F1F24; }
.win__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2A2A30; }
.win__bar span { margin-left: 10px; font-size: 11px; color: var(--night-faint); }
.win__body { position: relative; height: 440px; }
.scene { position: absolute; inset: 0; padding: 26px; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; }
.scene.is-active { opacity: 1; transform: none; }
.scene__label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--night-faint); margin-bottom: 16px; }
.scene li { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.12s + var(--i) * .08s); }
.scene.is-active li { opacity: 1; transform: none; }
.inbox, .tickets { display: grid; gap: 8px; }
.inbox li, .tickets li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); font-size: 13.5px; }
.inbox em, .tickets em { margin-left: auto; font-style: normal; font: 400 11px var(--mono); color: var(--night-faint); white-space: nowrap; }
.tag { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--night-dim); flex: none; }
.group { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13.5px; color: var(--night-dim); }
.group b { color: #fff; font-weight: 500; }
.group__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-dark); box-shadow: 0 0 0 5px rgba(90, 119, 255, .18); animation: breathe 2.4s ease-in-out infinite; }
.rank { display: grid; gap: 10px; }
.rank li { display: grid; grid-template-columns: 22px 150px 1fr 34px; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: 14px; }
.rank b { font: 500 12px var(--mono); color: var(--night-faint); }
.rank i { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); width: 0; transition: width 1s var(--ease) .3s; }
.scene.is-active .rank i { width: var(--w); }
.rank em { font: 500 13px var(--mono); font-style: normal; color: #fff; text-align: right; }
.rank li:first-child { background: rgba(31, 61, 255, .12); border: 1px solid rgba(90, 119, 255, .35); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips span { font-size: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--night-dim); }
.doc { padding: 18px 20px; border-radius: 12px; background: #F7F7F8; color: var(--ink); }
.doc__h { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 14px; }
.doc__h:first-child { margin-top: 0; }
.doc__p { font-size: 14px; margin-top: 6px; line-height: 1.5; }
.doc mark { background: var(--accent-soft); color: var(--accent); padding: 1px 4px; border-radius: 4px; }
.doc sup { font: 500 9px var(--mono); }
.cites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cites span { font: 400 11px var(--mono); color: var(--night-dim); padding: 5px 9px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .1); }
.tk { font: 500 11px var(--mono); color: var(--accent-dark); }
.term { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: #050506; border: 1px solid #1F1F24; font-size: 12.5px; line-height: 1.8; color: var(--night-dim); }
.term__p { color: #fff; }
.ok { color: #1FA971; }
.track { display: grid; gap: 4px; }
.track__row { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: 14px; }
.track__row i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--night-faint); }
.track__row i.done { background: #1FA971; border-color: #1FA971; }
.track__row i.risk { background: var(--warn, #E6A437); border-color: #E6A437; box-shadow: 0 0 0 5px rgba(230, 164, 55, .18); animation: breathe 2s ease-in-out infinite; }
.notify { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: rgba(31, 61, 255, .14); border: 1px solid rgba(90, 119, 255, .35); font-size: 13.5px; color: #E6E6EA; }
.notify b { color: #fff; font-weight: 500; }

/* ---------- product brain glow ---------- */
.section--dark { position: relative; overflow: hidden; }
[data-glow] { position: relative; }
[data-glow]::before { content: ""; position: absolute; inset: 10%; background: radial-gradient(closest-side, rgba(31, 61, 255, .35), transparent); filter: blur(30px); z-index: 0; animation: breathe 7s ease-in-out infinite; }
[data-glow] svg { position: relative; z-index: 1; }
.graph__core circle:not(.graph__halo) { filter: drop-shadow(0 0 24px rgba(31, 61, 255, .8)); }

/* ---------- final CTA field ---------- */
.final .field--final { position: absolute; inset: 0; width: 100%; height: 100%; }
.final::before { z-index: 0; }

@keyframes breathe { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.group__dot, .track__row i.risk, [data-glow]::before { animation-name: pulse2; }
@keyframes pulse2 { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

@media (max-width: 1080px) { .nav__bar { padding-right: 8px; } }
@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__stage { top: 84px; order: -1; z-index: 2; }
  .win__body { height: 340px; }
  .scene { padding: 18px; }
  .sstep, .sstep:first-child, .sstep:last-child { min-height: 58vh; padding-top: 0; justify-content: center; }
  .pains { grid-template-columns: 1fr; }
  .rank li { grid-template-columns: 18px 1fr 70px 30px; }
}
@media (max-width: 520px) {
  .hero { padding: 128px 0 88px; }
  .nav { top: 10px; }
  .win__body { height: 320px; }
  .inbox em, .tickets em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title .w { opacity: 1 !important; transform: none !important; filter: none !important; }
  .statement__text .w { color: #fff !important; }
  .scene li { opacity: 1 !important; transform: none !important; }
  .field { display: none; }
}

.final__inner { z-index: 1; }
@media (max-width: 900px) {
  .story__stage { background: var(--paper); padding-bottom: 8px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
  .story__stage .caption { display: none; }
  .win__body { height: 300px; }
  .scene li:nth-child(n+5) { display: none; }
  .sstep, .sstep:first-child, .sstep:last-child { min-height: 72vh; }
}
/* vivid photo treatment (Promptwise-style): full colour, darkened only where text sits */
.hero__photo.is-vivid { opacity: 1; filter: saturate(1.05); background-image: url(photos/hero-spring.jpg); background-image: image-set(url(photos/hero-spring.webp) type("image/webp"), url(photos/hero-spring.jpg) type("image/jpeg")); background-position: center 60%; }
/* sharp hero on Retina and 4K: 3200px from the original (tools_scenes.py) */
@media (min-resolution: 1.5dppx), (min-width: 2200px) { .hero__photo.is-vivid { background-image: image-set(url(photos/hero-spring-3200.webp) type("image/webp"), url(photos/hero-spring.jpg) type("image/jpeg")); } }
.hero__photo.is-vivid::after {
  background:
    radial-gradient(ellipse 60% 45% at 50% 34%, rgba(10,10,11,.62), rgba(10,10,11,.15) 70%, transparent),
    linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.05) 30%, rgba(10,10,11,.2) 60%, var(--night) 96%);
}
.hero--vivid .hero__glow { opacity: .35; }
.hero--vivid .field { opacity: .55; }
.hero--vivid .hero__sub { color: #D6D6DA; }
@media (max-width: 720px) {
  /* phones: the hero is tall and narrow, so the photo is scaled up a lot. Show the calm right side (grass and pond), not the tree. */
  .hero__photo.is-vivid { background-position: 88% 60%; }
  .hero__photo.is-vivid::after {
    background: linear-gradient(180deg, rgba(10,10,11,.7) 0%, rgba(10,10,11,.45) 35%, rgba(10,10,11,.35) 60%, var(--night) 94%);
  }
  .hero .ask__count { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 18px; }
  .hero .ask__n { white-space: nowrap; }
  .hero .ask__src { flex-wrap: wrap; gap: 12px; }
}

/* ---------- customer logos (placeholders) ---------- */
.cust { background: var(--night); padding: 8px 0 72px; }
.cust__title { text-align: center; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--night-faint); margin-bottom: 28px; }
.cust__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 48px; }
.cust__logo { color: #8A8A92; font-size: 20px; font-weight: 500; letter-spacing: -.01em; opacity: .85; transition: opacity .25s, color .25s; }
.cust__logo:hover { opacity: 1; color: #fff; }
.cust__logo--serif { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.cust__logo--caps { font: 600 16px var(--sans); letter-spacing: .12em; }
[data-logo-todo] { outline: 1px dashed rgba(255, 255, 255, .14); outline-offset: 8px; border-radius: 4px; }
@media (max-width: 720px) { .cust__row { gap: 18px 28px; } .cust__logo { font-size: 16px; } .cust__logo--caps { font-size: 13px; } }

/* ---------- story kicker (Chris's framing) ---------- */
.story__kicker { margin-top: 18px; font-size: clamp(17px, 1.6vw, 19px); color: var(--ink); max-width: 60ch; padding-left: 16px; border-left: 2px solid var(--accent); }

/* ---------- product menu footer ---------- */
.menu { grid-template-columns: repeat(3, 240px); }
.menu__foot { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 4px; padding: 16px 16px 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
.menu__foot .mono { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--night-faint); margin-bottom: 8px; }
.menu__foot a { display: block; padding: 5px 0; font-size: 13px; color: var(--night-dim); text-decoration: none; }
.menu__foot a:hover { color: #fff; }

/* ---------- phone menu: covers the page, scrolls, locks the page behind ---------- */
.mobile { max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8); }
.mobile a:not(.btn) { color: #fff; padding: 9px 0; }
.mobile__cta { grid-template-columns: 1fr 1fr; }
.mobile__start { grid-column: 1 / -1; height: 46px; }
.nav-backdrop { position: fixed; inset: 0; z-index: 49; background: rgba(5, 5, 6, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s; }
body.menu-open { overflow: hidden; }
body.menu-open .nav-backdrop { opacity: 1; pointer-events: auto; }
/* real customer logos: shown as one light monochrome, like the rest of the strip */
.cust__logo--img img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .6; transition: opacity .25s; }
.cust__logo--img:hover img { opacity: 1; }
@media (max-width: 720px) { .cust__logo--img img { height: 20px; } }

/* =====================================================================
   Story v3: simple tabs + one product window (replaces the pinned scroll)
   ===================================================================== */
.story__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); align-items: center; margin-top: 56px; }
.story__tabs { display: grid; gap: 4px; }
.stab { position: relative; display: grid; gap: 4px; text-align: left; padding: 16px 18px 18px; border-radius: 14px; transition: background-color .25s; overflow: hidden; }
.stab:hover { background: var(--paper-off); }
.stab.is-active { background: var(--paper-off); }
.stab__n { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); transition: color .25s; }
.stab.is-active .stab__n { color: var(--accent); }
.stab__t { font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-faint); transition: color .25s; }
.stab.is-active .stab__t, .stab:hover .stab__t { color: var(--ink); }
.stab__d { display: none; font-size: 15px; color: var(--ink-dim); line-height: 1.45; }
.stab.is-active .stab__d { display: block; }
.stab__bar { position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--rule); overflow: hidden; opacity: 0; }
.stab.is-active .stab__bar { opacity: 1; }
.stab__bar::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.stab.is-active.is-running .stab__bar::after { animation: stabfill var(--dur, 5.5s) linear forwards; }
.story.is-paused .stab.is-running .stab__bar::after { animation-play-state: paused; }
@keyframes stabfill { to { transform: scaleX(1); } }

.story__stage { position: static; top: auto; }
.win__body { position: relative; height: auto; display: grid; }
.scene { position: relative; inset: auto; grid-area: 1 / 1; padding: 24px; }
.scene:not(.is-active) { visibility: hidden; }

@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
  .story__stage { order: 0; background: none; margin: 0; padding: 0; z-index: auto; }
  .story__stage .caption { display: block; }
  .story__tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
  .story__tabs::-webkit-scrollbar { display: none; }
  .stab { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); }
  .stab.is-active { background: var(--ink); border-color: var(--ink); }
  .stab__n { font-size: 12px; letter-spacing: .08em; }
  .stab.is-active .stab__n { color: #fff; }
  .stab__t, .stab__d, .stab__bar { display: none !important; }
  .story__mobile-d { display: block; font-size: 17px; color: var(--ink); margin: 4px 0 0; min-height: 2.9em; }
  .win__body { height: auto; }
  .scene { padding: 18px; }
  .scene li:nth-child(n+5) { display: list-item; }
  .inbox li:nth-child(n+4) { display: none; }
  .rank li { grid-template-columns: 18px minmax(0, 1fr) 60px 28px; gap: 10px; }
}
@media (min-width: 901px) { .story__mobile-d { display: none; } }
@media (prefers-reduced-motion: reduce) { .stab__bar { display: none; } }

/* =====================================================================
   Sub-pages: shared components (dark page hero, pipeline, bento, doc,
   terminal, chat, compare table, orbit hub, filters). Same motion language.
   ===================================================================== */
.phero { position: relative; background: var(--night); color: #fff; padding: 168px 0 96px; overflow: hidden; isolation: isolate; text-align: center; }
.phero .field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.phero__glow { position: absolute; left: 50%; top: 42%; width: min(1000px, 120vw); aspect-ratio: 1.7; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient(closest-side, rgba(31, 61, 255, .3), rgba(31, 61, 255, .06) 60%, transparent); filter: blur(24px); animation: breathe 9s ease-in-out infinite; }
.phero .eyebrow { color: var(--accent-dark); }
.phero__crumb { display: inline-flex; gap: 8px; align-items: center; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--night-faint); margin-bottom: 18px; }
.phero__crumb a { color: var(--night-dim); text-decoration: none; }
.phero__crumb a:hover { color: #fff; }
.phero h1 { font-weight: 400; font-size: clamp(40px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.04em; max-width: 16ch; margin: 0 auto; text-wrap: balance; }
.phero h1 .w { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(8px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(.1s + var(--i) * .06s); }
.phero.is-live h1 .w { opacity: 1; transform: none; filter: none; }
.phero__sub { margin: 24px auto 0; max-width: 40em; font-size: clamp(17px, 1.8vw, 20px); color: var(--night-dim); text-wrap: balance; }
.phero .hero__cta { margin-top: 34px; }
.phero .btn--ghost { background: rgba(255, 255, 255, .04); color: #fff; border-color: rgba(255, 255, 255, .18); }
.phero .caption { color: var(--night-faint); }

/* pipeline: stages light up in sequence, a beam travels between them */
.pipe { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 72px; text-align: left; }
.pipe::before { content: ""; position: absolute; left: 6%; right: 6%; top: 38px; height: 1px; background: linear-gradient(90deg, transparent, #2A2A30 8%, #2A2A30 92%, transparent); }
.pipe__beam { position: absolute; top: 34px; left: 6%; width: 90px; height: 9px; border-radius: 9px; background: radial-gradient(closest-side, rgba(90, 119, 255, .95), rgba(90, 119, 255, 0)); filter: blur(1px); animation: beam 7.5s var(--ease) infinite; }
.pstage { position: relative; padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .5s, background-color .5s, transform .5s var(--ease), box-shadow .5s; }
.pstage__dot { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: var(--night-2); border: 1px solid #2A2A30; color: var(--night-dim); font: 500 13px var(--mono); transition: all .5s; }
.pstage__k { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--night-faint); }
.pstage__t { margin-top: 6px; font-size: 15px; color: #E6E6EA; }
.pstage__d { margin-top: 10px; font: 400 11.5px/1.5 var(--mono); color: var(--night-faint); }
.pstage.is-on { border-color: rgba(90, 119, 255, .55); background: rgba(31, 61, 255, .1); transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(31, 61, 255, .7); }
.pstage.is-on .pstage__dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 24px rgba(31, 61, 255, .8); }
.pstage.is-on .pstage__k { color: var(--accent-dark); }
@keyframes beam { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translateX(calc(min(1080px, 88vw) * .82)); opacity: 0; } }

/* section heads */
.shead { max-width: 760px; }
.shead--center { margin: 0 auto; text-align: center; }
.shead--center .h2, .shead--center .lede { margin-left: auto; margin-right: auto; }

/* bento grid with live mini-visuals */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.bcard { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 22px; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); overflow: hidden; transition: border-color .3s, transform .35s var(--ease), box-shadow .35s; }
.bcard:hover { border-color: var(--rule-strong); transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgba(10, 10, 11, .35); }
.bcard--wide { grid-column: span 2; }
.bcard__viz { position: relative; flex: 1; min-height: 140px; margin: -4px -4px 18px; border-radius: 14px; background: var(--paper-off); overflow: hidden; }
.bcard__k { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.bcard h3 { margin-top: 8px; font-size: 18px; }
.bcard p { margin-top: 6px; font-size: 14.5px; color: var(--ink-dim); }
.section--dark .bcard { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
.section--dark .bcard:hover { border-color: rgba(255, 255, 255, .18); }
.section--dark .bcard__viz { background: rgba(255, 255, 255, .03); }
.section--dark .bcard h3 { color: #fff; }
.section--dark .bcard p { color: var(--night-dim); }
.section--dark .bcard__k { color: var(--accent-dark); }

/* viz: chips flying into a stack (proposals) */
.v-stack { position: absolute; inset: 0; display: grid; place-items: center; }
.v-stack i { position: absolute; font: 500 11px var(--mono); font-style: normal; padding: 6px 10px; border-radius: 8px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink-dim); white-space: nowrap; opacity: 0; }
.is-in .v-stack i { animation: flyin 4.8s var(--ease) infinite; animation-delay: calc(var(--i) * .35s); }
.v-stack b { position: relative; z-index: 2; font: 500 12px var(--sans); padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: 0 10px 30px -10px rgba(31, 61, 255, .6); }
@keyframes flyin { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.9); } 15% { opacity: 1; } 45% { opacity: 1; transform: translate(0, 0) scale(.9); } 55%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); } }

/* viz: ranking bars that reorder */
.v-rank { position: absolute; inset: 14px; display: grid; gap: 8px; align-content: center; }
.v-rank div { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-dim); }
.v-rank span { position: relative; height: 8px; border-radius: 8px; background: rgba(10, 10, 11, .06); overflow: hidden; }
.v-rank span::after { content: ""; position: absolute; inset: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); transition: width 1.1s var(--ease); transition-delay: calc(var(--i) * .12s); }
.is-in .v-rank span::after { width: var(--w); }
.v-rank em { font: 500 11px var(--mono); font-style: normal; color: var(--ink); text-align: right; }

/* viz: doc lines typing */
.v-doc { position: absolute; inset: 16px 18px; display: grid; gap: 8px; align-content: start; }
.v-doc i { display: block; height: 7px; border-radius: 4px; background: rgba(10, 10, 11, .09); width: 0; }
.v-doc i.h { height: 9px; background: var(--ink); opacity: .8; }
.v-doc i.m { background: var(--accent-soft); outline: 1px solid rgba(31, 61, 255, .25); }
.is-in .v-doc i { animation: typeline 5s steps(24) infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes typeline { 0% { width: 0; } 30%, 88% { width: var(--w); } 100% { width: var(--w); opacity: 0; } }

/* viz: size estimate */
.v-size { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.v-size span { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font: 500 14px var(--mono); color: var(--ink-faint); background: var(--paper); border: 1px solid var(--rule); }
.is-in .v-size span:nth-child(2) { animation: pick 3.6s var(--ease) infinite; }
.v-size small { position: absolute; bottom: 14px; font: 400 11px var(--mono); color: var(--ink-faint); }
@keyframes pick { 0%, 30% { background: var(--paper); color: var(--ink-faint); border-color: var(--rule); transform: none; } 45%, 90% { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 30px -10px rgba(31, 61, 255, .7); } 100% { background: var(--paper); color: var(--ink-faint); transform: none; } }

/* viz: tickets sliding into a column */
.v-tix { position: absolute; inset: 14px; display: grid; gap: 7px; align-content: center; }
.v-tix i { display: flex; justify-content: space-between; font: 400 11px var(--mono); font-style: normal; padding: 8px 10px; border-radius: 8px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink-dim); opacity: 0; transform: translateX(-24px); }
.v-tix i b { color: var(--accent); font-weight: 500; }
.is-in .v-tix i { animation: slidein 4.8s var(--ease) infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes slidein { 0% { opacity: 0; transform: translateX(-24px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(12px); } }

/* viz: agents with progress */
.v-agents { position: absolute; inset: 14px; display: grid; gap: 10px; align-content: center; }
.v-agents div { display: grid; grid-template-columns: 78px 1fr 30px; align-items: center; gap: 8px; font: 400 11px var(--mono); color: var(--ink-dim); }
.v-agents span { height: 6px; border-radius: 6px; background: rgba(10, 10, 11, .07); overflow: hidden; }
.v-agents span::after { content: ""; display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; }
.is-in .v-agents span::after { animation: fill 4s var(--ease) infinite; animation-delay: calc(var(--i) * .5s); }
.v-agents em { font-style: normal; color: #1FA971; text-align: right; }
@keyframes fill { 0% { width: 0; } 70%, 100% { width: 100%; } }

/* viz: timeline with a risk pulse */
.v-time { position: absolute; left: 18px; right: 18px; top: 50%; height: 2px; background: rgba(10, 10, 11, .1); }
.v-time i { position: absolute; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--rule-strong); left: var(--x); }
.v-time i.d { background: #1FA971; border-color: #1FA971; }
.v-time i.r { background: #E6A437; border-color: #E6A437; }
.is-in .v-time i.r { animation: ring 1.8s ease-out infinite; }
.v-time b { position: absolute; top: 18px; transform: translateX(-30%); font: 500 10.5px var(--mono); color: #B07A1F; white-space: nowrap; left: var(--x); }
.v-time u { position: absolute; left: 0; top: 0; height: 2px; background: #1FA971; width: 0; text-decoration: none; transition: width 1.6s var(--ease) .2s; }
.is-in .v-time u { width: 52%; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(230, 164, 55, .6); } 100% { box-shadow: 0 0 0 14px rgba(230, 164, 55, 0); } }

/* evidence doc: claims highlight in turn, their source lights up */
.evidence { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 16px; margin-top: 48px; align-items: start; }
.edoc { padding: 30px 32px; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 40px 80px -50px rgba(10, 10, 11, .4); }
.edoc__top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.edoc__top b { font-weight: 500; color: #1FA971; }
.edoc h3 { font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
.edoc h4 { margin: 20px 0 6px; font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.edoc p, .edoc li { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.edoc ul { list-style: disc; padding-left: 20px; }
.claim { padding: 1px 3px; border-radius: 4px; transition: background-color .35s, color .35s, box-shadow .35s; cursor: default; }
.claim sup { font: 500 9px var(--mono); color: var(--accent); margin-left: 2px; }
.claim.is-on { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px rgba(31, 61, 255, .3); }
.sources { display: grid; gap: 10px; }
.src { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); transition: border-color .35s, transform .35s var(--ease), box-shadow .35s; }
.src__n { font: 500 11px var(--mono); color: var(--accent); }
.src__k { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.src p { font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.src.is-on { border-color: var(--accent); transform: translateX(-6px); box-shadow: 0 20px 40px -24px rgba(31, 61, 255, .6); }

/* terminal typing */
.term2 { border-radius: 18px; background: #050506; border: 1px solid #1F1F24; overflow: hidden; box-shadow: 0 60px 120px -50px rgba(31, 61, 255, .55); text-align: left; }
.term2__bar { display: flex; gap: 7px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #1F1F24; }
.term2__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2A2A30; }
.term2__bar span { margin-left: 10px; font: 400 11px var(--mono); color: var(--night-faint); }
.term2__body { padding: 20px 22px; min-height: 290px; font: 400 13px/1.85 var(--mono); color: var(--night-dim); white-space: pre-wrap; }
.term2__body .p { color: #fff; }
.term2__body .ok { color: #1FA971; }
.term2__body .ac { color: var(--accent-dark); }
.term2__body .cur { display: inline-block; width: 8px; height: 15px; background: var(--accent-dark); vertical-align: -2px; animation: blink 1s steps(1) infinite; }

/* chat demo */
.chat { border-radius: 18px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 50px 100px -60px rgba(10, 10, 11, .45); overflow: hidden; text-align: left; }
.chat__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--rule); font-size: 14px; font-weight: 500; }
.chat__bar small { font: 400 11px var(--mono); color: var(--ink-faint); }
.chat__body { padding: 18px; display: grid; gap: 14px; min-height: 330px; align-content: start; }
.msg { display: grid; grid-template-columns: 32px 1fr; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.msg.is-on { opacity: 1; transform: none; }
.msg__av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font: 500 11px var(--mono); background: var(--paper-off); color: var(--ink-dim); }
.msg__av--bot { background: var(--accent); color: #fff; }
.msg__who { font-size: 13px; font-weight: 500; }
.msg__who small { font: 400 11px var(--mono); color: var(--ink-faint); margin-left: 6px; }
.msg__txt { font-size: 14.5px; color: var(--ink-2); margin-top: 2px; }
.msg__cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg__cites span { font: 400 11px var(--mono); padding: 4px 8px; border-radius: 6px; background: var(--paper-off); color: var(--ink-dim); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }

/* before/after table */
.ba { margin-top: 48px; border: 1px solid var(--rule-strong); border-radius: 20px; overflow: hidden; }
.ba__row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; border-top: 1px solid var(--rule); }
.ba__row:first-child { border-top: 0; }
.ba__row > * { padding: 18px 22px; font-size: 15px; }
.ba__row > :first-child { color: var(--ink); font-weight: 500; }
.ba__row > :nth-child(2) { color: var(--ink-faint); }
.ba__row > :nth-child(3) { color: var(--ink); background: rgba(31, 61, 255, .035); }
.ba__head > * { font: 500 11px var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint) !important; background: var(--paper-tint) !important; }
.ba__head > :nth-child(3) { color: var(--accent) !important; }

/* split media rows */
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.row2--rev > :first-child { order: 2; }
.checks { display: grid; gap: 12px; margin-top: 26px; }
.checks li { position: relative; padding-left: 28px; font-size: 16px; color: var(--ink-dim); }
.checks li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 12px; height: 7px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); }
.checks strong { color: var(--ink); font-weight: 500; }
.section--dark .checks li { color: var(--night-dim); }
.section--dark .checks strong { color: #fff; }
.section--dark .checks li::before { border-color: var(--accent-dark); }
.section--dark .h2 { color: #fff; }
.section--dark .eyebrow { color: var(--accent-dark); }

/* graph canvas (product brain hero) */
.brain { position: relative; margin: 64px auto 0; max-width: 980px; aspect-ratio: 16 / 8; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .08); background: radial-gradient(ellipse at 50% 50%, rgba(31, 61, 255, .14), transparent 65%), rgba(255, 255, 255, .02); overflow: hidden; }
.brain canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.brain__legend { position: absolute; left: 18px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 14px; font: 400 11px var(--mono); color: var(--night-faint); }
.brain__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

/* orbit hub (integrations hero) */
.orbit { position: relative; width: min(620px, 92vw); aspect-ratio: 1; margin: 56px auto 0; }
.orbit__ring { position: absolute; inset: var(--in); border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .1); }
.orbit__spin { position: absolute; inset: var(--in); animation: spin var(--dur) linear infinite; }
.orbit__spin--rev { animation-direction: reverse; }
.orbit__node { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8); transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))); }
.orbit__node img { width: 28px; height: 28px; animation: spin var(--dur) linear infinite reverse; }
.orbit__spin--rev .orbit__node img { animation-direction: normal; }
.orbit__core { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px; border-radius: 34px; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(31, 61, 255, .15), 0 0 90px rgba(31, 61, 255, .8); }
.orbit__core .brand__mark { grid-template-columns: repeat(2, 12px); gap: 6px; }
.orbit__core .brand__mark i { width: 12px; height: 12px; background: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* integrations directory */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.filter { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule-strong); font-size: 14px; color: var(--ink-dim); transition: all .2s; }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.dir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.icard { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 18px; border: 1px solid var(--rule); background: var(--paper); text-decoration: none; transition: border-color .25s, transform .3s var(--ease), box-shadow .3s, opacity .3s; }
.icard:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgba(31, 61, 255, .5); }
.icard.is-hidden { display: none; }
.icard__top { display: flex; align-items: center; gap: 12px; }
.icard__logo { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--rule); display: grid; place-items: center; background: #fff; flex: none; }
.icard__logo img { width: 24px; height: 24px; }
.icard__name { font-size: 17px; font-weight: 500; }
.icard__cat { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.icard p { font-size: 14.5px; color: var(--ink-dim); flex: 1; }
.icard__go { font-size: 13.5px; font-weight: 500; color: var(--accent); }
.icard__tag { margin-left: auto; font: 500 10px var(--mono); letter-spacing: .08em; padding: 4px 8px; border-radius: 6px; background: #FFF6E5; color: #8A5A10; }

@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pipe::before, .pipe__beam { display: none; }
  .dir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .phero { padding: 128px 0 72px; }
  .pipe { grid-template-columns: 1fr; gap: 10px; margin-top: 48px; }
  .pstage { display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; align-items: center; padding: 14px; }
  .pstage__dot { margin: 0; grid-row: span 2; }
  .pstage__d { display: none; }
  .bento { grid-template-columns: 1fr; }
  .bcard--wide { grid-column: auto; }
  .evidence, .row2 { grid-template-columns: 1fr; }
  .row2--rev > :first-child { order: 0; }
  .edoc { padding: 22px; }
  .ba__row { grid-template-columns: 1fr 1fr; }
  .ba__row > :first-child { grid-column: 1 / -1; padding-bottom: 0; }
  .ba__head > :first-child { display: none; }
  .ba__row > * { padding: 12px 16px; font-size: 14px; }
  .dir { grid-template-columns: 1fr; }
  .brain { aspect-ratio: 4 / 5; }
  .orbit__node { width: 44px; height: 44px; margin: -22px; border-radius: 12px; }
  .orbit__node img { width: 22px; height: 22px; }
  .orbit__core { width: 96px; height: 96px; margin: -48px; border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .phero h1 .w { opacity: 1 !important; transform: none !important; filter: none !important; }
  .msg { opacity: 1 !important; transform: none !important; }
  .v-stack i, .v-tix i { opacity: 1 !important; transform: none !important; }
  .v-doc i { width: var(--w) !important; }
}
.bcard--full { grid-column: 1 / -1; min-height: 240px; }
.bcard--full .bcard__viz { min-height: 110px; }
@media (max-width: 1080px) { .bcard--full { grid-column: 1 / -1; } }
@media (max-width: 760px) { .bcard--full { grid-column: auto; } }

/* product brain page: extra mini-visuals */
.v-graph { position: absolute; inset: 0; }
.v-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-graph path { stroke: var(--rule-strong); stroke-width: .6; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.is-in .v-graph path { animation: dash 1.4s linear infinite; }
.v-graph i, .v-graph b { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); border-radius: 50%; }
.v-graph i { width: 14px; height: 14px; background: var(--paper); border: 2px solid var(--rule-strong); z-index: 1; }
.v-graph b { width: 40px; height: 40px; background: var(--accent); z-index: 1; box-shadow: 0 0 0 8px rgba(31, 61, 255, .12), 0 0 30px rgba(31, 61, 255, .6); }
.is-in .v-graph b { animation: pulse2 2.4s ease-in-out infinite; }
.v-bars { position: absolute; inset: 16px 18px 34px; display: flex; align-items: flex-end; gap: 8px; }
.v-bars i { flex: 1; height: 0; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent-dark), var(--accent)); transition: height 1s var(--ease); transition-delay: calc(var(--i) * .1s); }
.is-in .v-bars i { height: var(--h); }
.v-bars small { position: absolute; left: 0; bottom: -24px; font: 400 11px var(--mono); color: var(--ink-faint); }
.v-decide { position: absolute; inset: 18px; display: grid; align-content: center; gap: 6px; padding: 16px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); }
.v-decide p { font-size: 14px; font-weight: 500; }
.v-decide small { font: 400 11px var(--mono); color: var(--ink-faint); }
.v-decide span { justify-self: start; margin-top: 6px; font: 500 11px var(--mono); padding: 4px 10px; border-radius: 999px; background: var(--paper-off); color: var(--ink-faint); }
.is-in .v-decide span { animation: approve 4s var(--ease) infinite; }
@keyframes approve { 0%, 35% { background: var(--paper-off); color: var(--ink-faint); } 45%, 100% { background: #E7F6EF; color: #137A4E; } }
.v-goals { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; padding: 16px; }
.v-goals span { font-size: 13px; padding: 8px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2); opacity: 0; transform: translateY(8px); transition: all .6s var(--ease); }
.v-goals span:nth-child(2) { transition-delay: .15s; } .v-goals span:nth-child(3) { transition-delay: .3s; }
.is-in .v-goals span { opacity: 1; transform: none; }
.is-in .v-goals span:first-child { border-color: var(--accent); color: var(--accent); }
/* light pipeline variant */
.pipe--light { grid-template-columns: 1fr; gap: 8px; margin-top: 0; }
.pipe--light::before { display: none; }
.pipe--light .pstage { display: grid; grid-template-columns: 40px 90px 1fr; align-items: center; gap: 14px; background: var(--paper); border-color: var(--rule); padding: 12px 14px; }
.pipe--light .pstage__dot { margin: 0; background: var(--paper-off); border-color: var(--rule); color: var(--ink-faint); }
.pipe--light .pstage__t { margin: 0; color: var(--ink); }
.pipe--light .pstage.is-on { background: var(--paper); border-color: var(--accent); box-shadow: 0 20px 40px -24px rgba(31, 61, 255, .5); transform: translateX(6px); }
.pipe--light .pstage.is-on .pstage__k { color: var(--accent); }
/* orbit: the white tile counter-rotates with the logo, so tiles stay level */
.orbit__node { background: none; box-shadow: none; border-radius: 0; }
.orbit__node img { width: 58px; height: 58px; padding: 15px; background: #fff; border-radius: 16px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8); }
@media (max-width: 760px) { .orbit__node img { width: 44px; height: 44px; padding: 11px; border-radius: 12px; } }


/* =====================================================================
   Typography change (26 Sept, Josip): no more spaced-out mono capitals.
   Every label uses Geist in sentence case; JetBrains Mono stays only for
   code (terminals, code snippets). This overrides earlier label styles.
   ===================================================================== */
.ask__n small,
.ask__src,
.ba__head > *,
.bcard__k,
.brain__legend,
.caption,
.card__tag,
.chat__bar small,
.chip__logo,
.cites span,
.claim sup,
.compare__head,
.cust__title,
.doc sup,
.doc__h,
.edoc h4,
.edoc__top,
.flow__label,
.footer nav .mono,
.graph__core text,
.graph__node text,
.hero__note,
.icard__cat,
.icard__tag,
.inbox em,
.logos__title,
.menu__foot .mono,
.mobile .mono,
.mono,
.msg__av,
.msg__cites span,
.msg__who small,
.out__ico,
.phero__crumb,
.pstage__d,
.pstage__dot,
.pstage__k,
.quote__avatar,
.rank b,
.rank em,
.req__kicker,
.scene__label,
.sig__src,
.src__k,
.src__n,
.sstep__n,
.stab__n,
.stack__groups dt,
.tag,
.tickets em,
.tile__mono,
.tile__name,
.v-agents div,
.v-bars small,
.v-decide small,
.v-decide span,
.v-rank em,
.v-size small,
.v-size span,
.v-stack i,
.v-time b,
.v-tix i,
/* ---------- type ---------- */
.eyebrow {
  font-family: var(--sans) !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
}
.eyebrow { font-size: 14px; font-weight: 500; margin-bottom: 14px; }
.phero__crumb { font-size: 13.5px; font-weight: 500; }
.logos__title, .cust__title { font-size: 14px; font-weight: 500; }
.stack__groups dt, .bcard__k, .card__tag, .sstep__n, .stab__n, .pstage__k, .icard__cat, .src__k, .edoc h4, .edoc__top, .doc__h, .scene__label, .flow__label, .req__kicker, .mobile .mono, .footer nav .mono, .menu__foot .mono { font-size: 13px; font-weight: 500; }
.tag, .sig__src, .pain__n, .step__n, .pstage__dot, .rank b, .rank em, .src__n, .tile__name { font-weight: 500; }
.caption, .hero__note { font-size: 13px; }
.compare__head span, .ba__head > * { font-size: 13px !important; font-weight: 500 !important; }

/* Devplan logo (official mark, supplied by Josip 26 Sept) */
.brand__logo { width: 26px; height: 24px; color: currentColor; flex: none; }
.nav .brand { color: #fff; }
.footer .brand { color: var(--ink); }
.brand__word { font-weight: 600; letter-spacing: -.02em; }
.orbit__core { background: var(--accent); color: #fff; }
.orbit__logo { width: 64px; height: 58px; color: #fff; }
@media (max-width: 760px) { .orbit__logo { width: 46px; height: 42px; } }
.ask { grid-template-areas: "label label" "box count"; }
.ask__label { grid-area: label; margin: 0 0 -4px 22px; font-size: 13px; font-weight: 500; color: var(--night-dim); }
.ask__box { grid-area: box; } .ask__count { grid-area: count; }
@media (max-width: 720px) { .ask { grid-template-areas: "label" "box" "count"; } .ask__label { margin-left: 4px; } }
/* contrast on the photo hero */
.hero .eyebrow { color: #B9C6FF; font-size: 15px; }
.hero .hero__note { color: #B9C6FF; }
.hero .ask__label { color: #D6D6DA; }
.phero .eyebrow, .phero__crumb { color: #A0A0A6; }

/* ---------- PRD template page ---------- */
.tpl__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.tpl__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--paper-off); border: 1px solid var(--rule); }
.seg__btn { height: 32px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-dim); transition: all .25s var(--ease); }
.seg__btn.is-on { background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px -2px rgba(10, 10, 11, .18); }
.tpl { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; margin-top: 36px; align-items: start; }
.tpl__toc { position: sticky; top: 100px; }
.tpl__toc-h { font-size: 13px; font-weight: 500; color: var(--ink-faint); margin-bottom: 10px; }
.tpl__toc ol { display: grid; gap: 2px; counter-reset: t; }
.tpl__toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 14px; color: var(--ink-dim); text-decoration: none; transition: all .2s; }
.tpl__toc a:hover, .tpl__toc a.is-on { background: var(--paper-off); color: var(--ink); }
.tdoc { padding: 36px 44px 40px; border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 50px 100px -60px rgba(10, 10, 11, .45); }
.tdoc__bar { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--ink-faint); padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.tdoc__status { color: var(--accent); }
.tdoc__title { margin-top: 22px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 400; letter-spacing: -.025em; }
.tdoc__meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 14px 0 6px; }
.tdoc__meta dt { font-size: 12.5px; color: var(--ink-faint); }
.tdoc__meta dd { margin: 2px 0 0; font-size: 14.5px; }
.tdoc section { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--rule); scroll-margin-top: 110px; }
.tdoc h4 { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.tdoc p, .tdoc li { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; }
.tdoc ul { list-style: disc; padding-left: 20px; display: grid; gap: 4px; }
.tdoc [data-f] { transition: color .3s, background-color .6s; border-radius: 4px; }
.tdoc.is-blank [data-f], .tdoc.is-blank [data-f] li { color: var(--ink-faint); }
.tdoc.is-swapping [data-f] { background: var(--accent-soft); }
#s-agents { background: linear-gradient(90deg, rgba(31, 61, 255, .05), transparent); margin-left: -44px; margin-right: -44px; padding-left: 44px; padding-right: 44px; padding-bottom: 18px; }
#s-agents h4::after { content: "New"; margin-left: 10px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; vertical-align: 2px; }
.howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; counter-reset: none; }
.howto__step { padding: 26px; border-radius: 18px; border: 1px solid var(--rule); background: var(--paper); transition: border-color .3s, transform .35s var(--ease); }
.howto__step:hover { border-color: var(--accent); transform: translateY(-3px); }
.howto__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 600; margin-bottom: 18px; }
.howto__step p { margin-top: 8px; color: var(--ink-dim); font-size: 15px; }
.pipe--dark .pstage { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
.pipe--dark .pstage__t { color: #E6E6EA; }
.pipe--dark .pstage__dot { background: var(--night-2); border-color: #2A2A30; color: var(--night-dim); }
.pipe--dark .pstage.is-on { background: rgba(31, 61, 255, .12); border-color: rgba(90, 119, 255, .55); }
@media (max-width: 960px) {
  .tpl { grid-template-columns: 1fr; }
  .tpl__toc { display: none; }
  .howto { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .tdoc { padding: 24px 20px 28px; }
  #s-agents { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .howto { grid-template-columns: 1fr; }
  .tpl__actions { width: 100%; }
  .tpl__actions .btn { flex: 1; }
  .pipe--light .pstage { grid-template-columns: 40px 1fr; }
  .pipe--light .pstage__k { display: none; }
}

/* ---------- compare pages ---------- */
.phero--compact { padding-bottom: 72px; }
.vs { display: inline-flex; align-items: center; gap: 16px; margin-top: 36px; padding: 10px 12px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.vs__us, .vs__them { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; font-weight: 500; }
.vs__us { background: var(--accent); color: #fff; box-shadow: 0 0 30px rgba(31, 61, 255, .6); }
.vs__us svg { width: 20px; height: 18px; color: #fff; }
.vs__them { background: rgba(255, 255, 255, .08); color: #E6E6EA; }
.vs__x { color: var(--night-faint); font-size: 14px; }
.choose { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.choose__card { padding: 30px; border-radius: 20px; border: 1px solid var(--rule); background: var(--paper); }
.choose__card--us { border-color: var(--accent); box-shadow: 0 40px 80px -50px rgba(31, 61, 255, .6); }
.choose__k { font-size: 18px; font-weight: 500; }
.choose__card .checks { margin-top: 18px; }
.cmp { margin-top: 40px; border: 1px solid var(--rule-strong); border-radius: 20px; overflow: hidden; background: var(--paper); }
.cmp__row { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; border-top: 1px solid var(--rule); }
.cmp__row:first-child { border-top: 0; }
.cmp__row > * { padding: 18px 22px; font-size: 15px; }
.cmp__row > :first-child { font-weight: 500; }
.cmp__row > :nth-child(2) { color: var(--ink-dim); }
.cmp__row > :nth-child(3) { background: rgba(31, 61, 255, .035); color: var(--ink); }
.cmp__head > * { font-size: 13px; font-weight: 500; color: var(--ink-faint); background: var(--paper-tint) !important; }
.cmp__head > :nth-child(3) { color: var(--accent); }
.caption a { color: inherit; }
@media (max-width: 760px) {
  .choose { grid-template-columns: 1fr; }
  .cmp__row { grid-template-columns: 1fr 1fr; }
  .cmp__row > :first-child { grid-column: 1 / -1; padding-bottom: 0; }
  .cmp__head > :first-child { display: none; }
  .cmp__row > * { padding: 12px 16px; font-size: 14px; }
  .vs { flex-wrap: wrap; justify-content: center; border-radius: 20px; }
}

/* ---------- values awaiting Chris's confirmation (visible on purpose) ---------- */
[data-todo] { position: relative; background: #FFF4DE; color: #8A5A10; outline: 1px dashed #E6A437; outline-offset: 2px; border-radius: 4px; padding: 0 4px; cursor: help; }
[data-todo]::after { content: "to confirm"; position: absolute; left: 0; top: -1.6em; font: 500 10px var(--sans); white-space: nowrap; color: #8A5A10; background: #FFF4DE; padding: 1px 6px; border-radius: 4px; opacity: 0; transition: opacity .2s; pointer-events: none; }
[data-todo]:hover::after { opacity: 1; }
[data-todo-select] { border: 1px dashed #E6A437; background: #FFF4DE; color: #8A5A10; }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: 22px; border: 1px solid var(--rule); background: var(--paper); transition: transform .35s var(--ease), box-shadow .35s; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -50px rgba(10, 10, 11, .4); }
.plan--pop { border-color: var(--accent); box-shadow: 0 50px 100px -50px rgba(31, 61, 255, .55); }
.plan__badge { position: absolute; top: -12px; left: 30px; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: #fff; }
.plan__name { font-size: 18px; font-weight: 500; }
.plan__price { margin-top: 14px; font-size: 40px; letter-spacing: -.03em; line-height: 1.1; }
.plan__price small { font-size: 15px; color: var(--ink-faint); letter-spacing: 0; }
.plan__for { margin-top: 8px; color: var(--ink-dim); font-size: 15px; min-height: 2.8em; }
.plan__pick { display: grid; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--ink-faint); }
.plan__pick select { height: 40px; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; }
.plan__cta { margin-top: 20px; width: 100%; }
.plan .checks { margin-top: 24px; }
.usage { margin-top: 40px; display: grid; gap: 4px; max-width: 760px; }
.usage__row { display: grid; grid-template-columns: 1fr 160px 70px; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 12px; background: var(--paper); }
.usage__row i { position: relative; height: 6px; border-radius: 6px; background: var(--rule); overflow: hidden; }
.usage__row i::after { content: ""; position: absolute; inset: 0; width: 0; border-radius: inherit; background: var(--accent); transition: width 1s var(--ease); }
.is-in .usage__row i[data-level="1"]::after { width: 33%; } .is-in .usage__row i[data-level="2"]::after { width: 66%; } .is-in .usage__row i[data-level="3"]::after { width: 100%; }
.usage__row em { font-style: normal; font-size: 13px; color: var(--ink-faint); text-align: right; }

/* ---------- build vs buy ---------- */
.layers { display: grid; gap: 10px; margin-top: 44px; }
.layer { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--rule); background: var(--paper); transition: border-color .3s, transform .35s var(--ease); }
.layer:hover { border-color: var(--accent); transform: translateX(4px); }
.layer__n { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-off); font-weight: 600; color: var(--ink-dim); }
.layer p { margin-top: 4px; font-size: 15px; color: var(--ink-dim); }
.layer__t { font-style: normal; font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 999px; background: #FFF4DE; color: #8A5A10; white-space: nowrap; }
.layer:first-child .layer__t { background: #E7F6EF; color: #137A4E; }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 40px; padding: 32px; border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); }
.calc__in { display: grid; gap: 22px; }
.calc__in label { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 15px; }
.calc__in output { font-weight: 500; }
.calc__in input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.calc__out { display: grid; gap: 12px; }
.calc__card { padding: 18px 20px; border-radius: 16px; background: var(--paper-off); }
.calc__card p:first-child { font-size: 14px; color: var(--ink-dim); }
.calc__n { font-size: 32px; letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.calc__card small { font-size: 12.5px; color: var(--ink-faint); }
.calc__card--us { background: rgba(31, 61, 255, .06); border: 1px solid rgba(31, 61, 255, .25); }
@media (max-width: 900px) { .plans, .calc { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .layer { grid-template-columns: 36px 1fr; }
  .layer__n { width: 36px; height: 36px; }
  .layer__t { grid-column: 2; justify-self: start; }
  .usage__row { grid-template-columns: 1fr 70px; }
  .usage__row i { display: none; }
  .calc { padding: 20px; }
}

/* =====================================================================
   Review round (26 Sept): shared components
   ===================================================================== */

/* ---------- customer story cards (Dovetail-style: logo front, cobalt quote on hover) ---------- */
.stories { background: var(--night); color: #fff; padding: var(--section) 0; overflow: hidden; }
.stories__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.stories .h2 { color: #fff; }
.stories__ctl { display: flex; gap: 10px; align-items: center; }
.stories__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 18px; transition: border-color .2s, background-color .2s; }
.stories__arrow:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.stories__row { display: grid; grid-auto-flow: column; grid-auto-columns: min(360px, 78vw); gap: 20px; margin-top: 48px; padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.stories__row::-webkit-scrollbar { display: none; }
.scard { scroll-snap-align: start; }
.scard__link { display: block; text-decoration: none; color: inherit; outline-offset: 6px; }
.scard__face { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); }
.scard__front, .scard__back { position: absolute; inset: 0; transition: opacity .45s var(--ease), transform .55s var(--ease); }
.scard__front { display: grid; place-items: center; background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--tint) 85%, #fff 15%), var(--tint) 45%, #07070a 100%); }
.scard__front::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 70% 80%, rgba(90, 119, 255, .25), transparent 70%); }
.scard__front img { position: relative; z-index: 1; width: auto; height: auto; max-width: 58%; max-height: 64px; filter: brightness(0) invert(1); }
.scard__word { position: relative; z-index: 1; font-size: 44px; font-weight: 600; letter-spacing: -.03em; }
.scard__back { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; background: var(--accent); opacity: 0; transform: translateY(12px); }
.scard__back blockquote { margin: 0; font-size: 20px; line-height: 1.35; letter-spacing: -.01em; }
.scard__stat { margin-top: 14px; font-size: 13.5px; color: rgba(255, 255, 255, .85); }
.scard__stat b { font-size: 22px; font-weight: 500; margin-right: 4px; }
.scard__stat span { color: rgba(255, 255, 255, .65); }
.scard__who { display: grid; gap: 2px; font-size: 14px; }
.scard__who strong { font-weight: 500; }
.scard__who span { color: rgba(255, 255, 255, .75); }
.scard:hover .scard__back, .scard__link:focus-visible .scard__back, .scard.is-flipped .scard__back { opacity: 1; transform: none; }
.scard:hover .scard__front, .scard__link:focus-visible .scard__front, .scard.is-flipped .scard__front { opacity: 0; transform: scale(1.04); }
.scard__title { margin-top: 16px; font-size: 17px; line-height: 1.35; color: #E6E6EA; }

/* ---------- "Works with your AI coding tools" logo row ---------- */
.aitools__logos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.aitools__logos span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; }
.aitools__logos img { width: 22px; height: 22px; }
.aitools .checks a { color: var(--accent-dark); }

/* ---------- build vs buy comparison (vs2) ---------- */
.vs2 { position: relative; max-width: 980px; margin: 48px auto 0; border-radius: 22px; overflow: hidden; background: var(--paper); border: 1px solid var(--rule-strong); box-shadow: 0 50px 100px -60px rgba(10, 10, 11, .35); }
.vs2__row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.15fr 1.15fr; border-top: 1px solid var(--rule); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.08s * var(--i, 0)); }
.vs2.is-in .vs2__row, .vs2__head { opacity: 1; transform: none; }
.vs2__row > * { padding: 18px 22px; font-size: 15px; display: flex; gap: 10px; align-items: flex-start; }
.vs2__row > :first-child { font-weight: 500; }
.vs2__head { border-top: 0; }
.vs2__head > * { font-size: 13px; font-weight: 500; color: var(--ink-faint); background: var(--paper-tint); }
.vs2__head > :nth-child(3) { color: var(--accent); }
.vs2__no { color: var(--ink-faint); }
.vs2__no i { font-style: normal; color: #C4453B; font-weight: 600; }
.vs2__yes { color: var(--ink); font-weight: 500; }
.vs2__yes i { font-style: normal; color: var(--accent); font-weight: 700; }
.vs2__sweep { position: absolute; top: 0; bottom: 0; right: 0; width: calc(100% * 1.15 / 3.3); background: linear-gradient(180deg, rgba(31, 61, 255, .09), rgba(31, 61, 255, .03)); transform-origin: top; transform: scaleY(0); transition: transform 1.2s var(--ease) .2s; z-index: 0; }
.vs2.is-in .vs2__sweep { transform: scaleY(1); }
.vs2__cta { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 720px) {
  .vs2__row { grid-template-columns: 1fr 1fr; }
  .vs2__row > :first-child { grid-column: 1 / -1; padding-bottom: 0; }
  .vs2__head > :first-child { display: none; }
  .vs2__row > * { padding: 12px 16px; font-size: 14px; }
  .vs2__sweep { width: 50%; }
}
@media (prefers-reduced-motion: reduce) { .vs2__row { opacity: 1; transform: none; } .vs2__sweep { transform: none; } }

/* ---------- announcement ticker (item 1) ---------- */
:root { --bar-h: 40px; --bar-offset: 40px; }
body.no-announce { --bar-h: 0px; --bar-offset: 0px; }
.announce { position: relative; z-index: 60; height: var(--bar-h); display: flex; align-items: center; background: #050506; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #E6E6EA; font-size: 14px; overflow: hidden; }
body.no-announce .announce { display: none; }
.announce__link { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; overflow: hidden; color: inherit; text-decoration: none;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.announce__track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.announce:hover .announce__track { animation-play-state: paused; }
.announce__item { display: inline-flex; align-items: center; gap: 10px; padding-right: 56px; white-space: nowrap; }
.announce__item b { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: #fff; }
.announce__item u { text-decoration: none; color: var(--accent-dark); font-weight: 500; }
.announce__close { flex: none; width: 40px; height: 40px; color: var(--night-dim); font-size: 20px; line-height: 1; }
.announce__close:hover { color: #fff; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .announce__track { animation: none; width: 100%; justify-content: center; }
  .announce__item:not(:first-child) { display: none; }
}
/* the floating nav sits below the bar at the top of the page, then docks at 14px */
.nav { top: calc(14px + var(--bar-offset)); transition: top .15s linear; }
.nav.is-scrolled .nav__bar { background: rgba(10, 10, 11, .94); }
/* anchor jumps leave room for the nav (item 13) */
[id] { scroll-margin-top: 110px; }
/* item 4: pause the logo columns on hover, keyboard focus or tap (class set in JS as well as :hover) */
.stack__logos.is-paused .stack__track, .stack__logos:focus-within .stack__track { animation-play-state: paused; }
.stack__logos .tile { cursor: default; }
/* item 3: quick scene swap (no long faded moment) */
.req__title, [data-sig], .req__meta span, [data-out], [data-kicker] { transition: opacity .15s ease; }
.is-swapping .req__title, .is-swapping [data-sig], .is-swapping .req__meta span, .is-swapping [data-out], .is-swapping [data-kicker] { opacity: .15; }

/* ---------- homepage: integrations button + "use it where you already work" (items 5, 9) ---------- */
.stack__btn { margin-top: 28px; }
.where { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: clamp(56px, 8vw, 96px); padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.where__h { font-size: clamp(24px, 2.6vw, 32px); font-weight: 400; letter-spacing: -.02em; color: #fff; }
.where__p { margin-top: 10px; color: var(--night-dim); font-size: 16px; }
.where__tabs { display: grid; gap: 8px; margin-top: 22px; }
.where__tab { display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); color: #fff; font-weight: 500; transition: border-color .25s, background-color .25s; }
.where__tab img, .where__dp { width: 24px; height: 24px; grid-row: span 2; }
.where__dp { color: #fff; }
.where__tab small { grid-column: 2; font-size: 13.5px; font-weight: 400; color: var(--night-dim); }
.where__tab.is-on { border-color: var(--accent-dark); background: rgba(31, 61, 255, .12); }
.where__mcp { margin-top: 14px; font-size: 13px; color: var(--night-faint); }
.where__mcp a { color: var(--accent-dark); }
.where__stage { position: relative; display: grid; }
.where__q { font-size: 14px; color: var(--night-dim); margin-bottom: 12px; }
.where__scene { grid-area: 2 / 1; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
.where__scene.is-on { opacity: 1; transform: none; }
.wslack, .wapp { border-radius: 16px; background: var(--paper); color: var(--ink); padding: 16px 18px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.wslack__ch { font-weight: 600; font-size: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.wmsg { display: grid; grid-template-columns: 34px 1fr; gap: 10px; margin-top: 12px; font-size: 14.5px; }
.wmsg__av { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--paper-off); font-size: 11.5px; font-weight: 600; color: var(--ink-dim); }
.wmsg__av--dp { background: var(--accent); color: #fff; }
.wmsg__av--dp svg { width: 20px; height: 18px; }
.wmsg__who { font-weight: 600; font-size: 14px; }
.wmsg__who em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: var(--paper-off); color: var(--ink-faint); margin-left: 4px; vertical-align: 1px; }
.wsrc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wsrc span { font-size: 12px; padding: 4px 9px; border-radius: 6px; background: var(--paper-off); color: var(--ink-dim); border: 1px solid var(--rule); }
.wcode { border-radius: 16px; background: #050506; border: 1px solid #1F1F24; padding: 16px 18px; font: 400 13px/1.9 var(--mono); color: var(--night-dim); box-shadow: 0 40px 80px -40px rgba(31, 61, 255, .5); }
.wcode__bar { font-size: 11px; color: var(--night-faint); margin-bottom: 8px; }
.wcode .p { color: #fff; } .wcode .ac { color: var(--accent-dark); } .wcode .ok { color: #1FA971; }
.wapp__bar { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-dim); padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.wapp__bar svg { width: 18px; height: 16px; color: var(--accent); }
.wapp__card { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--rule); font-size: 14.5px; }
.wapp__t { font-weight: 600; }
.wapp__s { font-size: 12.5px; color: var(--ink-faint); margin: 2px 0 8px; }

/* ---------- homepage story: Result step (item 16) ---------- */
.stab--result .stab__n { color: #137A4E; }
.stab--result.is-active { background: #EEF8F3; }
.outs { display: grid; gap: 10px; }
.outs li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: rgba(31, 169, 113, .08); border: 1px solid rgba(31, 169, 113, .3); }
.outs b { color: #5FD6A3; font-weight: 600; font-size: 15px; }
.outs span { color: #E6E6EA; font-size: 14px; }

/* ---------- homepage product brain: benefit tabs + live graph (item 8) ---------- */
.btabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.btab { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); color: var(--night-dim); font-size: 14px; transition: all .25s var(--ease); }
.btab:hover { color: #fff; border-color: rgba(255, 255, 255, .35); }
.btab.is-on { background: #fff; color: var(--ink); border-color: #fff; }
.graph--live { position: relative; }
.graph__logo { color: #fff; }
.graph--live .graph__edges path { transition: stroke .35s, stroke-width .35s; }
.graph--live .graph__edges path.is-hl { stroke: var(--accent-dark); stroke-width: 2; }
.graph--live .graph__node circle { transition: stroke .35s, fill .35s; }
.graph--live .graph__node.is-hl circle { stroke: var(--accent-dark); fill: rgba(31, 61, 255, .25); }
.graph--live .graph__node[role="button"] { cursor: pointer; }
.graph--live .graph__node[role="button"]:focus-visible circle { stroke: #fff; }
.bprevs { position: relative; z-index: 2; display: grid; margin: -8px auto 0; max-width: 360px; }
.bprev { grid-area: 1 / 1; padding: 14px 16px; border-radius: 14px; background: rgba(15, 15, 17, .9); border: 1px solid rgba(90, 119, 255, .4); box-shadow: 0 20px 50px -20px rgba(31, 61, 255, .6); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.bprev.is-on { opacity: 1; transform: none; }
.bprev__t { color: #fff; font-weight: 500; font-size: 15px; }
.bprev__d { color: var(--night-dim); font-size: 14px; margin-top: 4px; }

/* ---------- homepage teams: switcher (item 10) ---------- */
.tswitch { margin-top: 40px; }
.tpills { display: flex; flex-wrap: wrap; gap: 8px; }
.tpill { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--paper); font-size: 14.5px; font-weight: 500; color: var(--ink-dim); transition: all .25s var(--ease); }
.tpill:hover { border-color: var(--ink); color: var(--ink); }
.tpill.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tpanes { display: grid; margin-top: 20px; }
.tpane { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; }
.tpane.is-on { opacity: 1; transform: none; pointer-events: auto; }
.tpane__copy h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 400; letter-spacing: -.02em; }
.tpane__copy p { margin-top: 10px; color: var(--ink-dim); font-size: 17px; max-width: 34ch; }
.tpane__mock { padding: 20px 22px; border-radius: 16px; background: var(--night); color: #fff; box-shadow: 0 40px 80px -40px rgba(31, 61, 255, .5); }
.tpane__k { font-size: 12.5px; font-weight: 500; color: var(--accent-dark); }
.tpane__t { margin-top: 6px; font-size: 20px; letter-spacing: -.01em; }
.tpane__s { margin-top: 6px; font-size: 13.5px; color: var(--night-dim); }

/* ---------- homepage enterprise teaser (item 13) ---------- */
.ent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.ent__icons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ent__icons li { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 16px; border: 1px solid var(--rule); font-weight: 500; }
.ent__icons span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 18px; flex: none; }

@media (max-width: 900px) {
  .where, .tpane, .ent { grid-template-columns: 1fr; }
  .tpills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; }
  .tpills::-webkit-scrollbar { display: none; }
  .tpill { flex: none; }
}
@media (max-width: 520px) { .ent__icons { grid-template-columns: 1fr; } }
.stories__row { scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }

/* ---------- feedback to feature: steps -> outcomes (items 16, 17) ---------- */
.pstage > a { display: block; color: inherit; text-decoration: none; }
.pstage > a:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 6px; border-radius: 12px; }
.pipe__result { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 18px 10px 10px; border-radius: 999px; border: 1px solid rgba(31, 169, 113, .35); background: rgba(31, 169, 113, .08); color: #CFF3E2; font-weight: 500; text-decoration: none; transition: box-shadow .4s, background-color .4s; }
.pipe__result span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #1FA971; color: #fff; }
.pipe__result.is-on { background: rgba(31, 169, 113, .18); box-shadow: 0 0 0 6px rgba(31, 169, 113, .12), 0 20px 50px -20px rgba(31, 169, 113, .8); }
.ocards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.ocard { display: flex; flex-direction: column; padding: 24px; border-radius: 20px; border: 1px solid var(--rule); background: var(--paper); transition: border-color .3s, transform .35s var(--ease); }
.ocard:hover { border-color: #1FA971; transform: translateY(-3px); }
.ocard__k { font-size: 13px; font-weight: 600; color: #137A4E; }
.ocard h3 { margin-top: 8px; font-size: 19px; }
.ocard__ba { display: grid; gap: 8px; margin-top: 14px; font-size: 14.5px; }
.ocard__ba s { text-decoration: none; color: var(--ink-faint); padding-left: 20px; position: relative; }
.ocard__ba s::before { content: "✕"; position: absolute; left: 0; color: #C4453B; font-weight: 600; }
.ocard__ba span { color: var(--ink); padding-left: 20px; position: relative; }
.ocard__ba span::before { content: "✓"; position: absolute; left: 0; color: #1FA971; font-weight: 700; }
.ocard__proof { margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--ink-dim); border-top: 1px solid var(--rule); }
.ocard__proof b { font-size: 20px; font-weight: 500; color: var(--ink); margin-right: 4px; }
.ocard__proof em { font-style: normal; color: var(--ink-faint); }
.bcard__step { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.bcard__out { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 500; color: #137A4E; text-decoration: none; }
.bcard__out:hover { text-decoration: underline; }
/* two dark sections in a row: separate them slightly */
.aitools + .stories { background: var(--night-2); border-top: 1px solid rgba(255, 255, 255, .06); }
@media (max-width: 1080px) { .ocards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ocards { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .pstage:has(> a) { display: block; }
  .pstage > a { display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; align-items: center; }
  .pstage > a .pstage__dot { grid-row: span 2; margin: 0; }
}

/* ---------- product brain: hero question box + answer (item 22) ---------- */
.ask2 { max-width: 760px; margin: 44px auto 0; text-align: left; }
.ask2__label { margin: 0 0 10px 22px; font-size: 13.5px; font-weight: 500; color: #D6D6DA; }
.ask2__label span { color: var(--accent-dark); }
.ask2 .ask__box { background: rgba(26, 26, 28, .72); border-color: rgba(255, 255, 255, .12); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 6px rgba(255, 255, 255, .03); }
.ask2 .ask__text { color: #fff; }
.ask2 .ask__send { background: rgba(255, 255, 255, .08); }
.ask2 .ask__send svg { stroke: var(--night-dim); }
.ask2.is-sent .ask__send { background: var(--accent); }
.ask2.is-sent .ask__send svg { stroke: #fff; }
.brain { margin-top: 28px; }
.ask2__answer { position: absolute; left: 50%; bottom: 44px; transform: translate(-50%, 10px); width: min(460px, 86%); padding: 14px 16px; border-radius: 14px; background: rgba(15, 15, 17, .92); border: 1px solid rgba(90, 119, 255, .45); box-shadow: 0 20px 50px -20px rgba(31, 61, 255, .7); opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); text-align: left; z-index: 2; }
.ask2__answer.is-on { opacity: 1; transform: translate(-50%, 0); }
.ask2__atext { color: #fff; font-size: 15px; }
.ask2__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ask2__chips span { font-size: 12px; padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--night-dim); }

/* ---------- product brain: Slack with the Devplan Agent (item 24) ---------- */
.chips3 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chips3 li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--rule-strong); font-size: 14px; font-weight: 500; }
.chips3 span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 13px; }
.slack { border-radius: 18px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 50px 100px -60px rgba(10, 10, 11, .45); overflow: hidden; }
.slack__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.slack__bar span { font-size: 12px; color: var(--ink-faint); }
.slack__body { display: grid; padding: 18px; min-height: 260px; }
.slack__ex { grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.slack__ex.is-on { opacity: 1; }
.smsg { display: grid; grid-template-columns: 36px 1fr; gap: 10px; font-size: 14.5px; }
.smsg__av { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--paper-off); font-size: 11.5px; font-weight: 600; color: var(--ink-dim); }
.smsg__av--dp { background: var(--accent); color: #fff; }
.smsg__av--dp svg { width: 21px; height: 19px; }
.smsg__who { font-weight: 600; font-size: 14px; }
.smsg__who small { font-weight: 400; color: var(--ink-faint); margin-left: 4px; }
.smsg__who em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: var(--paper-off); color: var(--ink-faint); margin-left: 4px; vertical-align: 1px; }
.smsg--a, .smsg__txt, .smsg__src, .smsg__react { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.smsg__typing { display: none; gap: 4px; margin-top: 4px; }
.smsg__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: dot 1s infinite; }
.smsg__typing i:nth-child(2) { animation-delay: .15s; } .smsg__typing i:nth-child(3) { animation-delay: .3s; }
.slack__ex.st-q .smsg--a { opacity: 0; }
.slack__ex.st-typing .smsg__typing { display: flex; }
.slack__ex.st-typing .smsg__txt, .slack__ex.st-typing .smsg__src, .slack__ex.st-typing .smsg__react,
.slack__ex.st-answer .smsg__src, .slack__ex.st-answer .smsg__react, .slack__ex.st-src .smsg__react { opacity: 0; transform: translateY(4px); }
.smsg__src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.smsg__src span { font-size: 12px; padding: 4px 9px; border-radius: 6px; background: var(--paper-off); border: 1px solid var(--rule); color: var(--ink-dim); }
.smsg__react { display: inline-block; margin-top: 8px; font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }

/* ---------- product brain: outcome bento on dark (item 25) ---------- */
.bento--dark .bcard { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
.bento--dark .bcard:hover { border-color: rgba(90, 119, 255, .45); box-shadow: 0 30px 60px -40px rgba(31, 61, 255, .6); }
.bento--dark .bcard__viz { background: radial-gradient(120% 100% at 50% 0%, rgba(31, 61, 255, .16), rgba(255, 255, 255, .02) 70%); }
.bento--dark .bcard h3 { color: #fff; font-size: 20px; }
.bento--dark .bcard p { color: var(--night-dim); }
.bento--dark .bcard__k { color: var(--night-faint) !important; font-size: 12.5px; }
.bcard__proof { margin-top: 12px; font-size: 13px; }
.bcard__proof b { color: #fff; font-size: 18px; font-weight: 500; margin-right: 4px; }
.bcard__proof em { font-style: normal; color: var(--night-faint); }
.v2-graph, .v2-radar, .v2-doc, .v2-goals { position: absolute; inset: 0; }
.v2-graph svg { width: 100%; height: 100%; }
.v2-edges path { stroke: rgba(90, 119, 255, .35); stroke-width: 1.4; stroke-dasharray: 4 4; fill: none; }
.is-in .v2-edges path { animation: dash 1.2s linear infinite; }
.v2-nodes circle { fill: #15151a; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.is-in .v2-nodes circle { animation: pulse2 2.4s ease-in-out infinite; }
.v2-core { fill: var(--accent); filter: drop-shadow(0 0 18px rgba(31, 61, 255, .9)); }
.v2-logo { color: #fff; }
.v2-radar { padding: 16px; display: grid; gap: 7px; align-content: center; }
.v2-radar__h { font-size: 12px; color: var(--night-faint); }
.v2-radar i { display: flex; gap: 8px; align-items: center; font-style: normal; font-size: 12.5px; color: #E6E6EA; padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, .05); opacity: 0; transform: translateY(8px); transition: all .5s var(--ease); transition-delay: calc(.2s + var(--i) * .25s); }
.is-in .v2-radar i { opacity: 1; transform: none; }
.v2-radar b { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.v2-radar b.r { background: rgba(230, 164, 55, .2); color: #F1C27A; } .v2-radar b.a { background: rgba(90, 119, 255, .2); color: #AFC0FF; } .v2-radar b.d { background: rgba(31, 169, 113, .2); color: #7FE0B5; }
.bento--dark .v-bars i { background: linear-gradient(180deg, #7C93FF, var(--accent)); box-shadow: 0 0 20px rgba(31, 61, 255, .4); }
.bento--dark .v-bars small { color: var(--night-dim); }
.v-send { transition: transform .8s var(--ease) 1.4s, opacity .8s 1.4s; }
.is-in .v-send { color: #AFC0FF !important; }
.v2-doc { padding: 16px 18px; display: grid; gap: 7px; align-content: start; }
.v2-doc__h { font-size: 12.5px; font-weight: 600; color: #fff; }
.v2-doc i { display: block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .14); width: 0; }
.is-in .v2-doc i { animation: typeline 5s steps(24) infinite; animation-delay: calc(var(--i) * .3s); }
.v2-doc__live { justify-self: start; margin-top: 4px; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(31, 169, 113, .18); color: #7FE0B5; }
.v-decide--dark { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.v-decide--dark p { color: #fff; } .v-decide--dark small { color: var(--night-faint); }
.v-decide--dark span { background: rgba(255, 255, 255, .06); color: var(--night-dim); }
.is-in .v-decide--dark span { animation: approve2 4s var(--ease) infinite; }
@keyframes approve2 { 0%, 35% { background: rgba(255, 255, 255, .06); color: var(--night-dim); } 45%, 100% { background: rgba(31, 169, 113, .22); color: #7FE0B5; } }
.v2-goals { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px; }
.v2-goals__chips { display: grid; gap: 8px; }
.v2-goals__chips span { font-size: 12.5px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(90, 119, 255, .5); color: #AFC0FF; opacity: 0; transform: translateX(-10px); transition: all .6s var(--ease); }
.v2-goals__chips span:nth-child(2) { transition-delay: .2s; }
.is-in .v2-goals__chips span { opacity: 1; transform: none; }
.v2-goals__arrow { color: var(--accent-dark); font-size: 20px; }
.v2-goals__spec { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.v2-goals__spec p { font-size: 13.5px; color: #fff !important; font-weight: 500; margin: 0 !important; }
.v2-goals__spec small { font-size: 11.5px; color: #7FE0B5; }

/* ---------- integrations: animated setup scene (item 30) ---------- */
.setup { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 48px); align-items: center; margin-top: 40px; }
.setup__tabs { display: grid; gap: 8px; }
.setup__tab { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; text-align: left; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--rule); background: var(--paper); transition: border-color .25s, box-shadow .25s; }
.setup__tab b { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-off); color: var(--ink-dim); font-weight: 600; }
.setup__tab span { display: grid; gap: 2px; font-size: 14.5px; color: var(--ink-dim); }
.setup__tab strong { font-size: 16px; color: var(--ink); font-weight: 500; }
.setup__tab.is-on { border-color: var(--accent); box-shadow: 0 20px 40px -24px rgba(31, 61, 255, .5); }
.setup__tab.is-on b { background: var(--accent); color: #fff; }
.setup__app { border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 50px 100px -60px rgba(10, 10, 11, .45); overflow: hidden; display: grid; }
.setup__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font-size: 13px; font-weight: 500; color: var(--ink-dim); }
.setup__bar svg { width: 18px; height: 16px; color: var(--accent); }
.setup__scene { grid-area: 2 / 1; padding: 20px; min-height: 250px; opacity: 0; transition: opacity .4s var(--ease); }
.setup__scene.is-on { opacity: 1; }
.sconn { display: grid; gap: 8px; }
.sconn li { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule); font-weight: 500; }
.sconn img { width: 22px; height: 22px; }
.sconn em { margin-left: auto; font-style: normal; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--ink-dim); }
.sconn em.ok { border-color: transparent; background: #E7F6EF; color: #137A4E; }
.sconn__go em.btnish { background: var(--accent); color: #fff; border-color: var(--accent); }
.is-on .sconn__go em.btnish { animation: connected 3.6s var(--ease) infinite; }
@keyframes connected { 0%, 45% { background: var(--accent); color: #fff; border-color: var(--accent); } 55%, 100% { background: #E7F6EF; color: #137A4E; border-color: transparent; } }
.cursor { position: absolute; right: 32px; top: 50%; width: 14px; height: 14px; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(-20deg) translate(30px, 20px); opacity: 0; }
.is-on .cursor { animation: cursor 3.6s var(--ease) infinite; }
@keyframes cursor { 0% { opacity: 0; transform: rotate(-20deg) translate(40px, 30px); } 20% { opacity: 1; } 40% { transform: rotate(-20deg) translate(0, 0); } 45% { transform: rotate(-20deg) translate(0, 0) scale(.85); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(-20deg) translate(0, 0); } }
.spick__h { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.spick { display: grid; gap: 8px; }
.spick li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--paper-off); font: 400 13.5px var(--mono); }
.spick i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--rule-strong); background: var(--paper); transition: all .3s; transition-delay: calc(.3s + var(--i, 0) * .35s); }
.is-on .spick li:not(.off) i { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--paper-off); }
.spick li.off { opacity: .55; }
.spick__lock { margin-top: 12px; font-size: 13px; color: #137A4E; }
.sfill { position: relative; display: grid; place-items: center; min-height: 210px; }
.sfill__ring { width: 120px; height: 120px; transform: rotate(-90deg); }
.sfill__ring circle { fill: none; stroke: var(--rule); stroke-width: 6; }
.sfill__ring .sfill__prog { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 214; stroke-dashoffset: 214; }
.is-on .sfill__prog { animation: ring 3.4s var(--ease) forwards; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.sfill__nodes { position: absolute; inset: 0; }
.sfill__nodes i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-dark); opacity: 0; transform: scale(.4); transition: all .5s var(--ease); transition-delay: calc(.4s + var(--i) * .35s); }
.sfill__nodes i:nth-child(1) { left: 18%; top: 22%; } .sfill__nodes i:nth-child(2) { left: 80%; top: 20%; } .sfill__nodes i:nth-child(3) { left: 12%; top: 70%; }
.sfill__nodes i:nth-child(4) { left: 86%; top: 68%; } .sfill__nodes i:nth-child(5) { left: 50%; top: 8%; } .sfill__nodes i:nth-child(6) { left: 50%; top: 88%; }
.is-on .sfill__nodes i { opacity: 1; transform: none; }
.sfill__live { position: absolute; bottom: 8px; font-size: 13px; font-weight: 500; color: #137A4E; opacity: 0; transition: opacity .4s 3.2s; }
.is-on .sfill__live { opacity: 1; }
@media (max-width: 900px) { .setup { grid-template-columns: 1fr; } }

/* ---------- enterprise page (item 13) ---------- */
.egroups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.egroup { padding: 24px; border-radius: 20px; border: 1px solid var(--rule); background: var(--paper); }
.egroup__k { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.egroup__k span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.egroup ul { display: grid; gap: 12px; margin-top: 16px; }
.egroup li { display: grid; gap: 2px; font-size: 14px; color: var(--ink-dim); }
.egroup strong { color: var(--ink); font-weight: 500; font-size: 15px; }
.ecomp { margin-top: 20px; padding: 22px 24px; border-radius: 20px; background: var(--paper-off); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ecomp__h { font-weight: 600; }
.ecomp__list { display: flex; flex-wrap: wrap; gap: 10px; }
.ecomp__note { margin-left: auto; font-size: 14px; color: var(--ink-dim); }
.ecomp__note a { color: var(--accent); }
.page-enterprise .cust { padding-top: 40px; }
@media (max-width: 1080px) { .egroups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .egroups { grid-template-columns: 1fr; } .ecomp__note { margin-left: 0; } }

/* =====================================================================
   Blog index
   ===================================================================== */
.bhero { padding: 150px 0 40px; background: var(--paper); }
.bhero__h { font-weight: 400; font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -.04em; max-width: 16ch; }
.bhero__sub { margin-top: 18px; font-size: clamp(17px, 1.7vw, 19px); color: var(--ink-dim); max-width: 52ch; }
.bfeat { margin-top: 44px; }
.bpost { position: relative; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.bpost:hover { transform: translateY(-4px); border-color: var(--rule-strong); box-shadow: 0 40px 80px -50px rgba(10, 10, 11, .45); }
.bpost__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.bpost__cover { aspect-ratio: 5 / 3; overflow: hidden; }
.bcover { display: block; width: 100%; height: 100%; transition: transform .6s var(--ease); }
.bpost:hover .bcover { transform: scale(1.04); }
.bpost__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bpost__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--ink-faint); }
.bpost__topic { color: var(--accent); font-weight: 500; }
.bpost__title { font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; }
.bpost__desc { font-size: 15px; color: var(--ink-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bpost--feat .bpost__link { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.bpost--feat .bpost__cover { aspect-ratio: auto; min-height: 340px; }
.bpost--feat .bpost__body { justify-content: center; padding: clamp(24px, 4vw, 48px); gap: 14px; }
.bpost--feat .bpost__title { font-size: clamp(26px, 3vw, 38px); font-weight: 400; letter-spacing: -.03em; }
.bpost--feat .bpost__desc { font-size: 17px; -webkit-line-clamp: 4; }
.bpost--feat::after { content: "Latest"; position: absolute; top: 16px; left: 16px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--ink); }
.bsec__h { font-size: 22px; font-weight: 500; letter-spacing: -.015em; }
.bguides { padding: 24px 0 8px; }
.bguides__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.bguide { display: grid; gap: 6px; padding: 20px; border-radius: 16px; background: var(--paper-off); border: 1px solid var(--rule); color: inherit; text-decoration: none; transition: border-color .25s, transform .3s var(--ease); }
.bguide:hover { border-color: var(--accent); transform: translateY(-3px); }
.bguide__k { font-size: 12.5px; font-weight: 600; color: #B36B00; }
.bguide--prd .bguide__k { color: var(--accent); }
.bguide__t { font-size: 16.5px; font-weight: 500; line-height: 1.3; }
.bguide__go { font-size: 14px; color: var(--accent); font-weight: 500; }
.bposts { padding-top: 56px; }
.bposts__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.bsearch input { height: 42px; width: min(320px, 100%); padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule-strong); font: inherit; font-size: 15px; background: var(--paper); }
.bsearch input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.bpost.is-hidden { display: none; }
.bpost--cta { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 28px; background: var(--night); border-color: var(--night); color: #fff; }
.bpost--cta:hover { transform: none; }
.bpost__cta-k { font-size: 13px; font-weight: 600; color: var(--accent-dark); }
.bpost__cta-t { font-size: 24px; letter-spacing: -.02em; line-height: 1.2; }
.bpost--cta .btn { align-self: flex-start; }
.bpost__cta-l { color: var(--night-dim); font-size: 14px; text-decoration: none; }
.bpost__cta-l:hover { color: #fff; }
.bempty { margin-top: 24px; color: var(--ink-dim); }
@media (max-width: 1000px) { .bgrid { grid-template-columns: 1fr 1fr; } .bguides__row { grid-template-columns: 1fr; } .bpost--feat .bpost__link { grid-template-columns: 1fr; } .bpost--feat .bpost__cover { min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 620px) { .bgrid { grid-template-columns: 1fr; } .bhero { padding-top: 120px; } }

/* QA 26 Sept: on phones the story window took the height of its tallest scene (the 4 outcomes), leaving
   ~200px empty under every other scene. Two-column outcomes shorten it; shorter scenes sit centred. */
@media (max-width: 720px) {
  .story .scene { display: flex; flex-direction: column; justify-content: center; }
  .scene--result .outs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .scene--result .outs li { padding: 10px 12px; }
  .scene--result .outs b { font-size: 14px; }
  .scene--result .outs span { font-size: 12.5px; line-height: 1.4; }
}

/* homepage FAQ tabs (UI QA 26 Sept) */
.faq__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.faq__tabs[hidden] { display: none; }
.faq__tab { font: 500 14px/1 var(--sans); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink-dim); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.faq__tab span { margin-left: 4px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.faq__tab:hover { border-color: var(--ink); color: var(--ink); }
.faq__tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.faq__tab.is-on span { color: rgba(255, 255, 255, .6); }
.faq details.faq-in { animation: faqIn .45s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
@keyframes faqIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .faq__tabs { margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { .faq details.faq-in { animation: none; } }

/* "Show more" on phones + filter pop-in (UI QA 26 Sept) */
.is-clamped { display: none !important; }
.more-btn { display: flex; margin: 28px auto 0; }
.more-btn[hidden] { display: none; }
.is-revealed-more, .icard.pop-in { animation: popIn .45s var(--ease) both; animation-delay: calc(var(--n, 0) * 40ms); }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .is-revealed-more, .icard.pop-in { animation: none; } }

/* ---------- scroll animations added in UI QA (26 Sept) ---------- */
/* compare pages: rows tick in one by one, then the Devplan column lights up */
.cmp__row:not(.cmp__head) { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.25s + var(--r, 0) * .07s); }
.cmp.is-in .cmp__row { opacity: 1; transform: none; }
.cmp__row > :nth-child(3) { transition: background .6s var(--ease); transition-delay: calc(.6s + var(--r, 0) * .07s); }
.cmp:not(.is-in) .cmp__row > :nth-child(3) { background: transparent; }

/* build vs buy: the six layers stack up from "easy" to "ongoing"; each tag lands after its row */
.layers .layer { opacity: 0; transform: translateX(-16px); transition: opacity .55s var(--ease), transform .55s var(--ease), border-color .3s; transition-delay: calc(var(--r, 0) * .11s); }
.layers.is-in .layer { opacity: 1; transform: none; }
.layers.is-in .layer:hover { transform: translateX(4px); transition-delay: 0s; }
.layers .layer__t { opacity: 0; transform: scale(.85); transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: calc(.35s + var(--r, 0) * .11s); }
.layers.is-in .layer__t { opacity: 1; transform: none; }

/* feedback to feature outcomes: the "before" line gets struck out, then the "after" line arrives */
.ocard__ba s { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: transparent; transition: text-decoration-color .6s var(--ease) .5s; }
.ocard.is-in .ocard__ba s { text-decoration-color: rgba(196, 69, 59, .55); }
.ocard__ba span { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease) 1s, transform .5s var(--ease) 1s; }
.ocard.is-in .ocard__ba span { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cmp__row:not(.cmp__head), .layers .layer, .layers .layer__t, .ocard__ba span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ocard__ba s { text-decoration-color: rgba(196, 69, 59, .55); transition: none; }
}
.no-js .cmp__row, .no-js .layers .layer, .no-js .layer__t, .no-js .ocard__ba span { opacity: 1; transform: none; }

/* feedback to feature, step 03: a small real spec instead of skeleton lines (UI QA 26 Sept).
   Same example as the rest of the page (Slack alerts, 17 customers, Ticket #4812, notifier service). */
.v-spec { position: absolute; inset: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; align-content: center; }
.v-spec__t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-spec__t span { flex-shrink: 0; }
.v-spec__t span { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: #E7F6EF; color: #137A4E; }
.v-spec__l { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--paper); border: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-dim); }
.v-spec__l span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v-spec__l b { flex-shrink: 0; font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.is-in .v-spec__l { animation: specLine 6.5s var(--ease) infinite both; animation-delay: calc(var(--i) * .45s); }
.is-in .v-spec__l b { animation: specChip 6.5s var(--ease) infinite both; animation-delay: calc(.3s + var(--i) * .45s); }
@keyframes specLine { 0% { opacity: 0; transform: translateY(5px); } 7%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes specChip { 0%, 3% { opacity: 0; transform: scale(.7); } 9%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .is-in .v-spec__l, .is-in .v-spec__l b { animation: none; } }
/* the spec card's picture area gets short in the 3-column layout: drop the title line rather than clip it */
#step-3 .bcard__viz { container-type: size; }
@container (max-height: 132px) { .v-spec__t { display: none; } }
@container (max-width: 250px) { .v-spec__l { font-size: 11.5px; padding: 5px 7px; } .v-spec__l b { font-size: 10.5px; padding: 2px 6px; } }

/* feedback to feature: "before you decide" strip (copy round, 26 Sept) */
.assure { padding: clamp(48px, 7vw, 80px) 0 0; }
.assure__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.assure__i { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: 18px; border: 1px solid var(--rule); background: var(--paper); }
.assure__ico { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.assure h3 { font-size: 16px; font-weight: 600; }
.assure p { margin-top: 4px; font-size: 14.5px; color: var(--ink-dim); }
@media (max-width: 860px) { .assure__row { grid-template-columns: 1fr; } }
/* plain-English card labels keep the product name as a small tag */
.bcard__tag { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--paper-off); border: 1px solid var(--rule); font-size: 11.5px; font-weight: 500; color: var(--ink-faint); }
.section--dark .bcard__tag { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); color: var(--night-dim); }

/* customer stories: slow auto-drift (JS). Snapping would fight the drift, so it's off while drifting. */
.stories__row.is-drifting { scroll-snap-type: none; scroll-behavior: auto; }

/* ================= compare hub (rebuilt 26 Sept): vs rotator, at-a-glance matrix, fit cards ================= */
.mono-tile { flex-shrink: 0; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(145deg, #2A2A30, #121215); color: #fff; font: 600 14px/1 var(--sans); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mono-tile--dp { background: var(--accent); color: #fff; box-shadow: 0 6px 18px -6px rgba(31, 61, 255, .7); }
.mono-tile--dp svg { width: 16px; height: 15px; }
.mono-tile--diy { font: 600 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: -.02em; }

/* hero: "Devplan vs …" pill that cycles through the tools */
.hvs { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 8px 18px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 16px; color: #fff; }
.hvs__dp { font-weight: 500; }
.hvs__x { color: var(--night-faint); font-size: 14px; }
.hvs__rot { display: inline-grid; text-align: left; min-width: 11.5em; }
.hvs__w { grid-area: 1 / 1; color: var(--accent-dark); font-weight: 500; opacity: 0; transform: translateY(10px); filter: blur(4px); transition: opacity .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease); }
.hvs__w.is-on { opacity: 1; transform: none; filter: none; }
.hvs__w.is-out { opacity: 0; transform: translateY(-10px); filter: blur(4px); }

/* tool picker */
.hpicks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.hpick { font: 500 14px/1 var(--sans); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink-dim); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.hpick:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.hpick.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* the matrix */
.hubm { position: relative; margin-top: 24px; border: 1px solid var(--rule-strong); border-radius: 22px; background: var(--paper); overflow: hidden; box-shadow: 0 40px 80px -60px rgba(10, 10, 11, .35); }
.hubm__row { position: relative; z-index: 1; display: grid; grid-template-columns: .75fr 1.15fr 1.15fr; border-top: 1px solid var(--rule); }
.hubm__row:first-child { border-top: 0; }
.hubm__row > * { padding: 18px 20px; min-width: 0; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.45; color: var(--ink-dim); transition: opacity .35s var(--ease), background .35s var(--ease), color .35s var(--ease); }
.hubm__row > [role=rowheader] { font-weight: 500; color: var(--ink); }
.hubm__row > .hubm__dp { color: var(--ink); background: rgba(31, 61, 255, .045); display: flex; gap: 8px; align-items: flex-start; }
.hubm__dp > i { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 700 10px/1 var(--sans); font-style: normal; transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.55s + var(--r, 0) * .09s); }
.hubm.is-in .hubm__dp > i { transform: scale(1); }
.hubm__head > * { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink); background: var(--paper-tint); padding-top: 16px; padding-bottom: 16px; }
.hubm__head > .hubm__dp { align-items: center; color: var(--accent); background: rgba(31, 61, 255, .07); }
.hubm__head a { color: inherit; text-decoration: none; }
.hubm__head a:hover { color: var(--accent); }
.hubm__foot > * { padding-top: 14px; padding-bottom: 14px; background: var(--paper-tint); }
.hubm__foot a { font-size: 13.5px; font-weight: 500; color: var(--accent); text-decoration: none; }
.hubm__foot a:hover { text-decoration: underline; }
/* rows tick in one by one */
.hubm__row:not(.hubm__head) { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.2s + var(--r, 5) * .08s); }
.hubm.is-in .hubm__row { opacity: 1; transform: none; }
/* a glow travels down the Devplan column once, then rests */
.hubm__glow { position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(100% * .75 / 3.05); width: calc(100% * 1.15 / 3.05); background: linear-gradient(180deg, rgba(31, 61, 255, .10), rgba(31, 61, 255, .02)); transform-origin: top; transform: scaleY(0); transition: transform 1.3s var(--ease) .25s; pointer-events: none; }
.hubm.is-in .hubm__glow { transform: scaleY(1); }
/* one tool at a time: Devplan next to the picked tool; the column fades in on each switch */
.hubm [data-col]:not([data-col="dp"]):not(.is-pick) { display: none; }
.hubm [data-col].is-pick { animation: hub-in .45s var(--ease); }
@keyframes hub-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }

/* phones: Devplan vs the picked tool, two columns */
@media (max-width: 860px) {
  .hubm__row { grid-template-columns: 1fr 1fr; }
  .hubm__row > [role=rowheader] { grid-column: 1 / -1; padding-bottom: 4px; font-size: 13px; color: var(--ink-faint); }
  .hubm__head > [role=columnheader]:first-child { display: none; }
  .hubm__row > * { padding: 12px 14px; font-size: 14px; }
  .hubm__foot > [role=rowheader] { display: none; }
  .hubm__glow { left: 0; width: 50%; }
}

/* fit cards */
.hcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.hcard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 22px; border: 1px solid var(--rule); background: var(--paper); text-decoration: none; color: var(--ink); overflow: hidden; transition: border-color .3s, transform .35s var(--ease), box-shadow .35s; }
.hcard::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(31, 61, 255, .12), transparent); opacity: 0; transition: opacity .4s; pointer-events: none; }
.hcard:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 40px 70px -45px rgba(31, 61, 255, .55); }
.hcard:hover::before { opacity: 1; }
.hcard__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.hcard__vs { font-size: 12px; color: var(--ink-faint); }
.hcard:hover .hcard__top .mono-tile:last-child { transform: rotate(-6deg) scale(1.06); }
.hcard__top .mono-tile { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.hcard__name { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.hcard__cat { margin-top: -6px; font-size: 13px; color: var(--ink-faint); }
.hcard__is { font-size: 15px; color: var(--ink-dim); }
.hcard__if { display: grid; gap: 8px; margin-top: 4px; }
.hcard__if p { padding: 12px 14px; border-radius: 12px; background: var(--paper-off); font-size: 14px; color: var(--ink-dim); }
.hcard__if p b { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.hcard__if p.is-us { background: rgba(31, 61, 255, .06); }
.hcard__if p.is-us b { color: var(--accent); }
.hcard__go { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 500; color: var(--accent); }
.hcard__go i { display: inline-block; font-style: normal; transition: transform .3s var(--ease); }
.hcard:hover .hcard__go i { transform: translateX(4px); }
@media (max-width: 760px) { .hcards { grid-template-columns: 1fr; } .hcard { padding: 22px; } }

@media (prefers-reduced-motion: reduce) {
  .hubm__row:not(.hubm__head), .hubm__dp > i, .hubm__glow, .hvs__w { transition: none !important; }
  .hubm [data-col].is-pick { animation: none; }
  .hubm__row { opacity: 1 !important; transform: none !important; }
  .hubm__dp > i { transform: none; } .hubm__glow { transform: none; }
}
.no-js .hubm__row { opacity: 1; transform: none; } .no-js .hubm__dp > i { transform: none; }

/* ================= blog: fully dark (26 Sept) ================= */
body.page-blog { background: var(--night); color: #fff; }
.page-blog main { background: var(--night); }
.page-blog .bhero { position: relative; overflow: hidden; background: var(--night); color: #fff; }
.page-blog .bhero::before { content: ""; position: absolute; left: 50%; top: -30%; width: 1100px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(31, 61, 255, .28), transparent 70%); pointer-events: none; }
.page-blog .bhero > * { position: relative; }
.page-blog .bhero__sub { color: var(--night-dim); }
.page-blog .bpost { background: var(--night-2); border-color: rgba(255, 255, 255, .08); }
.page-blog .bpost:hover { border-color: rgba(90, 119, 255, .5); box-shadow: 0 40px 80px -45px rgba(31, 61, 255, .45); }
.page-blog .bpost__meta { color: var(--night-faint); }
.page-blog .bpost__topic { color: var(--accent-dark); }
.page-blog .bpost__desc { color: var(--night-dim); }
.page-blog .bpost__cover { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.page-blog .bpost--feat .bpost__cover { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .06); }
.page-blog .bpost--feat::after { background: var(--accent); color: #fff; }
.page-blog .bsec__h { color: #fff; }
.page-blog .bguide { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
.page-blog .bguide:hover { border-color: rgba(90, 119, 255, .6); background: rgba(31, 61, 255, .06); }
.page-blog .bguide__k { color: #F0B35A; }
.page-blog .bguide--prd .bguide__k, .page-blog .bguide__go { color: var(--accent-dark); }
.page-blog .bposts { background: var(--night); }
.page-blog .filter { color: var(--night-dim); border-color: rgba(255, 255, 255, .14); background: transparent; }
.page-blog .filter:hover { border-color: #fff; color: #fff; }
.page-blog .filter.is-on { background: #fff; border-color: #fff; color: var(--night); }
.page-blog .bsearch input { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #fff; }
.page-blog .bsearch input::placeholder { color: var(--night-faint); }
.page-blog .bsearch input:focus { border-color: var(--accent-dark); box-shadow: 0 0 0 4px rgba(31, 61, 255, .25); }
.page-blog .bempty { color: var(--night-dim); }
/* the in-feed call to action stands out on a dark page with the brand colour */
.page-blog .bpost--cta { background: linear-gradient(160deg, #1F3DFF, #0E1F99); border-color: rgba(90, 119, 255, .6); }
.page-blog .bpost__cta-k { color: rgba(255, 255, 255, .75); }
.page-blog .bpost--cta .btn--primary { background: #fff; color: var(--accent); }
.page-blog .bpost__cta-l { color: rgba(255, 255, 255, .8); }
.page-blog .more-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .2); }
.page-blog .more-btn:hover { border-color: #fff; }
/* footer on the dark blog: white logo, quiet dividers (it is built for light pages elsewhere) */
.page-blog .footer { background: var(--night); color: #fff; border-top-color: rgba(255, 255, 255, .06); }
.page-blog .footer .brand { color: #fff; }
.page-blog .footer__tag { color: var(--night-dim); }
.page-blog .footer nav .mono { color: var(--night-faint); }
.page-blog .footer nav a { color: var(--night-dim); }
.page-blog .footer nav a:hover { color: #fff; }
.page-blog .footer__legal { border-top-color: rgba(255, 255, 255, .06); color: var(--night-faint); }
.page-blog .footer__legal a:hover { color: #fff; }

/* ================= dark pages (theme-dark body class): pricing, Linear-style (26 Sept) ================= */
body.theme-dark { background: var(--night); color: #fff; }
.theme-dark main { background: var(--night); }
.theme-dark .footer { background: var(--night); color: #fff; border-top-color: rgba(255, 255, 255, .06); }
.theme-dark .footer .brand { color: #fff; }
.theme-dark .footer__tag { color: var(--night-dim); }
.theme-dark .footer nav .mono { color: var(--night-faint); }
.theme-dark .footer nav a { color: var(--night-dim); }
.theme-dark .footer nav a:hover { color: #fff; }
.theme-dark .footer__legal { border-top-color: rgba(255, 255, 255, .06); color: var(--night-faint); }
.theme-dark .footer__legal a:hover { color: #fff; }
.theme-dark .section { background: var(--night); }
.theme-dark .eyebrow { color: var(--accent-dark); }
.theme-dark .h2, .theme-dark h2 { color: #fff; }
.theme-dark .faq__list { border-top-color: rgba(255, 255, 255, .1); }
.theme-dark .faq details { border-bottom-color: rgba(255, 255, 255, .1); }
.theme-dark .faq summary { color: #fff; }
.theme-dark .faq summary::after { color: var(--night-faint); }
.theme-dark .faq details p { color: var(--night-dim); }
.theme-dark .faq details a { color: var(--accent-dark); }
.theme-dark .final { border-top: 1px solid rgba(255, 255, 255, .06); }

/* check icon: filled circle with a dark tick (Linear-style) */
.pchk { flex-shrink: 0; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #E6E6EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.9' fill='none' stroke='%230A0A0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }

/* header */
.phead { padding: 170px 0 0; }
.phead__h { font-size: clamp(44px, 6vw, 76px); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.phead__sub { margin-top: 20px; max-width: 46ch; font-size: 18px; color: var(--night-dim); }

/* plan columns: thin dividers, no boxes */
.pplans { padding: 96px 0 0; }
.pcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcol { display: flex; flex-direction: column; padding: 0 36px; border-left: 1px solid rgba(255, 255, 255, .08); }
.pcol:first-child { padding-left: 0; border-left: 0; }
.pcol:last-child { padding-right: 0; }
.pcol__name { font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.pcol__price { margin-top: 10px; font-size: 19px; color: #fff; }
.pcol__price small { font-size: 17px; color: var(--night-dim); }
.pcol__bill { margin-top: 22px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 15.5px; color: var(--night-dim); }
.pcol__list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; }
.pcol__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: #E6E6EA; line-height: 1.35; }
.pcol__list .pchk { margin-top: 2px; }
.pcol__cta { margin-top: auto; padding-top: 44px; display: flex; gap: 10px; }
.pbtn { flex: 1; display: inline-flex; justify-content: center; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px; background: #1A1A1E; border: 1px solid rgba(255, 255, 255, .08); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.pbtn:hover { background: #232328; border-color: rgba(255, 255, 255, .16); }
.pbtn--on { background: #EDEDF0; color: var(--night); border-color: #EDEDF0; }
.pbtn--on:hover { background: #fff; border-color: #fff; }

/* logos */
.plogos { padding: 150px 0 40px; text-align: center; }
.plogos__h { font-size: 16px !important; font-weight: 400; color: var(--night-dim) !important; letter-spacing: 0; }
.plogos .cust__row { margin-top: 48px; }
.plogos__more { margin-top: 48px; }
.plogos__more a { color: var(--night-dim); text-decoration: none; font-size: 15px; transition: color .2s; }
.plogos__more a:hover { color: #fff; }
.plogos__more a span { display: inline-block; transition: transform .2s var(--ease); }
.plogos__more a:hover span { transform: translateX(3px); }

/* feature comparison */
.pcompare { padding: 110px 0 40px; }
.pt__head, .pt__row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; }
.pt__head { position: sticky; top: 72px; z-index: 2; background: var(--night); padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pt__head > * { font-size: 24px; font-weight: 500; letter-spacing: -.02em; padding-left: 28px; }
.pt__head > :first-child { padding-left: 0; }
.pt__group { padding: 56px 0 18px; }
.pt__group > * { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.pt__row > * { padding: 14px 0 14px 28px; font-size: 15px; color: #E6E6EA; display: flex; gap: 10px; align-items: flex-start; border-left: 1px solid rgba(255, 255, 255, .08); line-height: 1.4; }
.pt__row > [role=rowheader] { padding-left: 0; border-left: 0; color: var(--night-dim); }
.pt__row > * .pchk { margin-top: 2px; }
.pt__no { color: var(--night-faint) !important; }
.pt__note { margin-top: 40px; font-size: 14px; color: var(--night-faint); }
.pt .pt__row { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.pt.is-in .pt__row { opacity: 1; transform: none; }
.pfaq { padding-top: 120px; }

@media (max-width: 900px) {
  .phead { padding-top: 130px; }
  .pplans { padding-top: 56px; }
  .pcols { grid-template-columns: 1fr; gap: 0; }
  .pcol { padding: 36px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .pcol:first-child { border-top: 0; padding-top: 0; }
  .pcol__cta { padding-top: 28px; }
  .plogos { padding-top: 90px; }
  .pt__head { top: 64px; }
  .pt__head > *, .pt__group > * { font-size: 17px; }
  .pt__head, .pt__row { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .pt__head > *, .pt__row > * { padding-left: 10px; }
  .pt__row > * { font-size: 13px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .pt .pt__row { opacity: 1; transform: none; transition: none; } }
.no-js .pt .pt__row { opacity: 1; transform: none; }
.pt__head, .pt__row { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pt__head, .pt__row { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); } .pt__row > * { overflow-wrap: anywhere; } }

/* Team credit package picker */
.pcol__bill--pick { padding: 12px 0; }
.ppick { position: relative; display: block; }
.ppick select { appearance: none; -webkit-appearance: none; width: 100%; height: 42px; padding: 0 40px 0 14px; border-radius: 10px; background: #141417; border: 1px solid rgba(255, 255, 255, .1); color: #fff; font: 500 15px var(--sans); cursor: pointer; transition: border-color .2s; }
.ppick select:hover { border-color: rgba(255, 255, 255, .22); }
.ppick select:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 4px rgba(31, 61, 255, .25); }
.ppick::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--night-dim); border-bottom: 1.5px solid var(--night-dim); transform: rotate(45deg); pointer-events: none; }
.pcol__price [data-plan-price] { display: inline-block; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.pcol__price [data-plan-price].is-swap { opacity: 0; transform: translateY(-6px); }

/* build vs buy: Devplan package picker in the calculator */
.calc__pkg { grid-template-columns: 1fr !important; }
.calc__sel { position: relative; display: block; }
.calc__sel select { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; padding: 0 40px 0 14px; border-radius: 12px; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); font: 500 15px var(--sans); cursor: pointer; }
.calc__sel select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.calc__sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--ink-dim); border-bottom: 1.5px solid var(--ink-dim); transform: rotate(45deg); pointer-events: none; }

/* ================= book a demo (dark, two columns) ================= */
.bdemo { padding: 160px 0 40px; }
.bdemo__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.bdemo__copy { position: sticky; top: 120px; }
.bdemo__h { margin-top: 14px; font-size: clamp(38px, 4.8vw, 60px); font-weight: 500; letter-spacing: -.04em; line-height: 1.02; }
.bdemo__sub { margin-top: 18px; font-size: 18px; color: var(--night-dim); max-width: 40ch; }
.bdemo__k { margin-top: 40px; font-size: 15px !important; font-weight: 600; color: #fff; letter-spacing: 0; }
.bdemo__list { margin-top: 16px; }
.bdemo__note { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14px; color: var(--night-faint); }
.bdemo__try { margin-top: 14px; font-size: 15px; color: var(--night-dim); }
.bdemo__try a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); transition: border-color .2s; }
.bdemo__try a:hover { border-color: #fff; }
.bdemo__calk { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: 14.5px; color: var(--night-dim); }
.bdemo__live { flex-shrink: 0; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: #1FA971; box-shadow: 0 0 0 0 rgba(31, 169, 113, .6); animation: livePulse 2s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(31, 169, 113, .55); } 70% { box-shadow: 0 0 0 8px rgba(31, 169, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 169, 113, 0); } }
.bdemo__frame { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 50px 100px -50px rgba(31, 61, 255, .45), 0 0 0 1px rgba(255, 255, 255, .08); }
.bdemo__crop { --gcal-header: 260px; --gcal-visible: 940px; height: var(--gcal-visible); overflow: hidden; }
.bdemo__frame iframe { display: block; border: 0; width: 100%; height: calc(var(--gcal-visible) + var(--gcal-header)); margin-top: calc(-1 * var(--gcal-header)); }
.bdemo__alt { margin-top: 16px; font-size: 14.5px; color: var(--night-dim); }
.bdemo__alt a { color: #fff; }
.plogos--demo { padding-top: 110px; }
@media (max-width: 900px) {
  .bdemo { padding-top: 120px; }
  .bdemo__grid { grid-template-columns: 1fr; }
  .bdemo__copy { position: static; }
  .bdemo__crop { --gcal-header: 250px; --gcal-visible: 1120px; }
}
@media (prefers-reduced-motion: reduce) { .bdemo__live { animation: none; } }
/* Google's booking widget follows the viewer's dark mode; keep it in its light theme to match the white card */
.bdemo__frame, .bdemo__frame iframe { color-scheme: light; }

/* footer: SOC 2 Type 2 badge (Oneleet), links to the Trust Center */
.footer__soc2 { display: inline-block; margin-top: 24px; border-radius: 12px; transition: transform .25s var(--ease), opacity .25s; }
.footer__soc2 img { display: block; width: 92px; height: auto; }
.footer__soc2:hover { transform: translateY(-2px); }
/* the badge's "Monitored by Oneleet" line is white text: keep the whole badge on a dark tile so it reads on light pages too */
.footer__soc2 { padding: 8px 8px 10px; background: #111113; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); border-radius: 14px; }

/* ================= security page (dark) ================= */
.shero { position: relative; overflow: hidden; padding: 170px 0 60px; }
.shero__glow { position: absolute; left: 50%; top: -35%; width: 1100px; height: 720px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(31, 61, 255, .26), transparent 70%); pointer-events: none; }
.shero .wrap { position: relative; }
.shero__h { margin-top: 14px; max-width: 16ch; font-size: clamp(40px, 5.6vw, 72px); font-weight: 500; letter-spacing: -.04em; line-height: 1.02; }
.shero__sub { margin-top: 20px; max-width: 46ch; font-size: 18px; color: var(--night-dim); }
.sfacts { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.sfacts li { display: flex; gap: 10px; align-items: center; font-size: 15px; color: #E6E6EA; }
.shero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; max-width: 460px; }
.ssec { padding: 110px 0 0; }
.scards2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 44px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; overflow: hidden; }
.scard2 { padding: 28px; background: var(--night); transition: background .3s var(--ease); }
.scard2:hover { background: #111114; }
.scard2 h3 { font-size: 17px; font-weight: 500; }
.scard2 p { margin-top: 8px; font-size: 15px; color: var(--night-dim); line-height: 1.5; }
.sbound { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.sbound .lede { color: var(--night-dim); }
.ssteps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.ssteps li { display: flex; gap: 14px; align-items: baseline; font-size: 15.5px; color: #E6E6EA; }
.ssteps span { font-size: 13px; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.sbound__note { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14.5px; color: var(--night-faint); }
/* data boundary diagram */
.sflow { position: relative; padding: 28px; border-radius: 22px; background: linear-gradient(180deg, #111114, #0C0C0E); border: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 14px; justify-items: center; text-align: center; }
.sflow__k { font-size: 12.5px; color: var(--night-faint); }
.sflow__k--x { margin-top: -6px; color: #C4453B; opacity: .8; }
.sflow__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sflow__chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(31, 61, 255, .12); border: 1px solid rgba(90, 119, 255, .35); color: #fff; }
.is-in .sflow__row:not(.sflow__row--x) .sflow__chip { animation: chipGlow 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes chipGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(90, 119, 255, 0); } 30% { box-shadow: 0 0 18px 0 rgba(90, 119, 255, .45); border-color: rgba(140, 160, 255, .8); } }
.sflow__gate { width: 100%; position: relative; height: 22px; display: grid; place-items: center; }
.sflow__gate::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(196, 69, 59, .55); }
.sflow__gate span { position: relative; padding: 2px 10px; border-radius: 999px; background: #0E0E10; border: 1px solid rgba(196, 69, 59, .45); font-size: 12px; color: #E89A92; }
.sflow__chip--x { position: relative; background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); color: var(--night-faint); }
.sflow__chip--x::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1px; background: #C4453B; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); transition-delay: calc(.6s + var(--i) * .12s); }
.sflow.is-in .sflow__chip--x::after { transform: scaleX(1); }
.sflow__beam { position: relative; width: 2px; height: 56px; background: linear-gradient(180deg, rgba(90, 119, 255, .15), rgba(90, 119, 255, .6)); overflow: hidden; }
.sflow__beam::after { content: ""; position: absolute; left: -2px; width: 6px; height: 14px; border-radius: 3px; background: #9DB0FF; box-shadow: 0 0 10px #5A77FF; top: -14px; animation: beamDrop 1.8s linear infinite; }
@keyframes beamDrop { to { top: 60px; } }
.sflow__core { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 500; box-shadow: 0 20px 50px -15px rgba(31, 61, 255, .8); }
.sflow__core svg { width: 20px; height: 18px; color: #fff; }
/* deployment reuses the pricing columns */
.sdeploy { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; }
/* architecture */
.sarch { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.sarch__i { display: flex; gap: 18px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.sarch__n { font-size: 13px; color: var(--accent-dark); font-variant-numeric: tabular-nums; padding-top: 3px; }
.sarch__i h3 { font-size: 17px; font-weight: 500; }
.sarch__i p { margin-top: 6px; font-size: 15px; color: var(--night-dim); line-height: 1.5; }
.sops { margin-top: 10px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 15px; color: var(--night-dim); max-width: 80ch; }
/* approval band */
.sband { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: radial-gradient(120% 140% at 100% 0%, rgba(31, 61, 255, .22), transparent 55%), #0F0F12; border: 1px solid rgba(255, 255, 255, .08); }
.sband .pcol__list { margin-top: 22px; }
.sband__cta p { font-size: 15.5px; color: var(--night-dim); margin-bottom: 20px; }
.sband__cta .pbtn { flex: none; }
.sfoot { margin-top: 24px; font-size: 13.5px; color: var(--night-faint); }
@media (max-width: 900px) {
  .shero { padding-top: 130px; }
  .scards2, .sbound, .sdeploy, .sarch, .sband { grid-template-columns: 1fr; }
  .sdeploy .pcol { padding: 28px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .sdeploy .pcol:first-child { border-top: 0; padding-top: 0; }
  .ssec { padding-top: 80px; }
}
@media (prefers-reduced-motion: reduce) { .sflow__chip, .sflow__beam::after { animation: none !important; } .sflow__chip--x::after { transform: scaleX(1); transition: none; } }
.no-js .sflow__chip--x::after { transform: scaleX(1); }

/* ================= blog post template (dark). First post: the Tato customer story ================= */
.post__head { padding: 150px 0 0; position: relative; }
.post__head::before { content: ""; position: absolute; left: 50%; top: -20%; width: 1000px; height: 560px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(31, 61, 255, .2), transparent 70%); pointer-events: none; }
.post__head > * { position: relative; }
.post__narrow { max-width: 860px; }
.post__crumb { display: flex; gap: 8px; font-size: 13.5px; color: var(--night-faint); }
.post__crumb a { color: var(--night-dim); text-decoration: none; }
.post__crumb a:hover { color: #fff; }
.post__tag { margin-top: 28px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--night-dim); }
.post__tag span { padding: 4px 10px; border-radius: 999px; background: rgba(31, 61, 255, .16); border: 1px solid rgba(90, 119, 255, .4); color: #C7D1FF; font-size: 12.5px; font-weight: 500; }
.post__h { margin-top: 18px; font-size: clamp(34px, 4.6vw, 56px); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; }
.post__dek { margin-top: 20px; font-size: 19px; line-height: 1.5; color: var(--night-dim); max-width: 60ch; }
.post__meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--night-faint); }
.post__hero { margin-top: 48px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); background: #9BAE82; display: grid; place-items: center; aspect-ratio: 21 / 7; }
.post__hero img { width: min(420px, 60%); height: auto; }
.post__outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.post__out { padding: 22px; border-radius: 18px; background: #111114; border: 1px solid rgba(255, 255, 255, .08); }
.post__outk { font-size: 12.5px; font-weight: 600; color: var(--accent-dark); }
.post__out p:last-child { margin-top: 8px; font-size: 15px; color: #E6E6EA; line-height: 1.45; }
.post__out b { display: block; font-size: 38px; font-weight: 500; letter-spacing: -.03em; color: #fff; line-height: 1; margin-bottom: 8px; }
.post__out em { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: var(--night-faint); }
.post__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 6vw, 88px); align-items: start; padding-top: 72px; padding-bottom: 40px; }
.post__body { max-width: 68ch; }
.post__body h2 { margin-top: 52px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
.post__body h2:first-child { margin-top: 0; }
.post__body p { margin-top: 18px; font-size: 17.5px; line-height: 1.7; color: #D4D4DA; }
.post__body h3 { margin-top: 36px; font-size: 20px; font-weight: 500; color: #fff; }
.post__body ul, .post__body ol { margin: 20px 0 0; padding-left: 1.35em; color: #D4D4DA; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li { margin-top: 10px; padding-left: .2em; font-size: 17px; line-height: 1.65; }
.post__body li::marker { color: var(--accent-dark); }
.post__body a { color: #8FA2FF; text-underline-offset: 3px; }
.post__body a:hover { color: #fff; }
.post__body > img,
.post__body > a > img,
.post__body > p > img,
.post__body > figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin: 34px 0 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #fff;
}
.post__body blockquote { margin: 30px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--accent-dark); color: #fff; font-size: 20px; line-height: 1.55; }
.post--article .post__head { padding-bottom: 8px; }
.post__grid--article { padding-top: 64px; }
.pquote { margin: 36px 0; padding: 28px 30px; border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, rgba(31, 61, 255, .16), transparent 60%), #111114; border: 1px solid rgba(255, 255, 255, .08); }
.pquote blockquote { margin: 0; font-size: clamp(20px, 2.1vw, 25px); line-height: 1.4; letter-spacing: -.015em; color: #fff; }
.pquote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.pquote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.pquote figcaption b { display: block; font-size: 15px; font-weight: 500; color: #fff; }
.pquote figcaption span { font-size: 14px; color: var(--night-dim); }
.pquote--plain { background: transparent; border: 0; border-left: 2px solid var(--accent); border-radius: 0; padding: 4px 0 4px 24px; }
.pstat { margin: 32px 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; align-items: center; padding: 22px 26px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); }
.pstat b { grid-row: span 2; font-size: 48px; font-weight: 500; letter-spacing: -.03em; color: #fff; }
.pstat span { font-size: 16px; color: #E6E6EA; }
.pstat em { font-style: normal; font-size: 13px; color: var(--night-faint); }
.post__about { margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .08); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.post__about h3 { font-size: 15px; font-weight: 600; }
.post__about p { margin-top: 8px !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--night-dim) !important; }
.post__back { margin-top: 36px !important; }
.post__back a { color: var(--night-dim); text-decoration: none; font-size: 15px; }
.post__back a:hover { color: #fff; }
.post__side { position: sticky; top: 110px; display: grid; gap: 12px; }
.post__card { padding: 22px; border-radius: 18px; background: #111114; border: 1px solid rgba(255, 255, 255, .08); }
.post__sk { margin-top: 16px; font-size: 12.5px; color: var(--night-faint); }
.post__sk:first-child { margin-top: 0; }
.post__card > p:not(.post__sk) { margin-top: 4px; font-size: 14.5px; color: #E6E6EA; line-height: 1.45; }
.post__card .pcol__list { margin-top: 10px; gap: 10px; }
.post__card .pcol__list li { font-size: 14.5px; }
.post__card--cta { display: grid; gap: 10px; background: radial-gradient(120% 140% at 100% 0%, rgba(31, 61, 255, .25), transparent 60%), #111114; }
.post__card--cta p { font-size: 15.5px; color: #fff; margin-bottom: 4px; }
.post__card--cta .pbtn { flex: none; }
@media (max-width: 980px) {
  .post__outs { grid-template-columns: 1fr 1fr; }
  .post__grid { grid-template-columns: 1fr; }
  .post__side { position: static; }
}
@media (max-width: 620px) {
  .post__head { padding-top: 120px; }
  .post__outs, .post__about { grid-template-columns: 1fr; }
  .post__hero { aspect-ratio: 16 / 9; }
  .post__body p { font-size: 16.5px; }
}

/* blog index: customer story spot */
.bstory { padding: 40px 0 0; }
.page-blog .bstory { background: var(--night); }
.bstory__card { margin-top: 16px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); background: #111114; color: #fff; text-decoration: none; transition: border-color .3s, transform .35s var(--ease), box-shadow .35s; }
.bstory__card:hover { border-color: rgba(90, 119, 255, .5); transform: translateY(-3px); box-shadow: 0 40px 80px -45px rgba(31, 61, 255, .45); }
.bstory__logo { display: grid; place-items: center; background: #9BAE82; min-height: 200px; }
.bstory__logo img { width: 60%; height: auto; }
.bstory__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 3vw, 36px); }
.bstory__k { font-size: 13px; color: var(--accent-dark); font-weight: 500; }
.bstory__t { font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.bstory__q { font-size: 15px; color: var(--night-dim); line-height: 1.5; }
.bstory__go { margin-top: 4px; font-size: 14.5px; font-weight: 500; color: var(--accent-dark); }
.bstory__go i { display: inline-block; font-style: normal; transition: transform .3s var(--ease); }
.bstory__card:hover .bstory__go i { transform: translateX(4px); }
@media (max-width: 760px) { .bstory__card { grid-template-columns: 1fr; } .bstory__logo { min-height: 140px; } }

/* story cards: only cards with a story open; they say so */
.scard__read { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--accent-dark); }
.scard__read i { display: inline-block; font-style: normal; transition: transform .3s var(--ease); }
.scard--link:hover .scard__read i { transform: translateX(4px); }
div.scard__link { cursor: default; outline: none; }
.post__head { overflow: hidden; } /* the header glow is wider than a phone; keep it inside */
/* match the Tato logo image's own green exactly, so no box shows around it */
.post__hero, .bstory__logo { background: #9CAD81; }

/* Tato story card: co-founder photo, desaturated, under a Devplan-blue overlay */
.scard__front--photo { background: var(--photo) center 30% / cover no-repeat, #1F3DFF; }
.scard__front--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 61, 255, .78) 0%, rgba(31, 61, 255, .62) 45%, rgba(10, 16, 60, .92) 100%); mix-blend-mode: normal; }
.scard__front--photo { filter: none; }
.scard__front--photo > * { position: relative; z-index: 1; }
.scard--link .scard__front--photo { background-blend-mode: luminosity; }
.scard__front--photo .scard__word { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.scard__front--photo { place-items: end start; padding: 26px; }
.scard__front--photo .scard__word { font-size: 38px; }

/* feedback to feature hero: the same request box as the product brain hero, above the five steps */
.ask3 { margin-top: 44px; }
.ask3 + .pipe { margin-top: 28px; }
.pstage__d { transition: color .3s; }
.pstage.is-on .pstage__d { color: #C7D1FF; }
/* the detail line changes per request: reserve two lines so the cards never change height (no layout jump) */
[data-pipe-ask] .pstage__d { min-height: 3em; }
/* homepage enterprise strip: SOC 2 Type II leads, full width */
.ent__icons .ent__soc2 { grid-column: 1 / -1; }

/* homepage: one quiet company-trust line under the customer logos */
.cust__trust { margin-top: 28px; text-align: center; font-size: 13.5px; color: var(--night-faint); }

/* ---------- hero world carried down the page: falling leaves + grass glow ---------- */
[data-leaves] { position: relative; overflow: hidden; }
[data-leaves] > .wrap, [data-leaves] > .final__inner { position: relative; z-index: 1; }
.leaves { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.leaf { position: absolute; top: -40px; left: var(--x); width: var(--s); height: var(--s); opacity: 0;
  animation: leaf-fall var(--d) linear var(--delay) infinite; animation-play-state: paused; }
.leaf svg { width: 100%; height: 100%; display: block; transform: rotate(var(--r));
  animation: leaf-sway calc(var(--d) / 3) ease-in-out var(--delay) infinite alternate; animation-play-state: inherit; }
.leaves.is-on .leaf { animation-play-state: running; }
@keyframes leaf-fall {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: var(--o); }
  85% { opacity: var(--o); }
  100% { transform: translateY(var(--h)); opacity: 0; }
}
@keyframes leaf-sway {
  from { transform: translateX(calc(var(--w) * -1)) rotate(calc(var(--r) - 25deg)); }
  to { transform: translateX(var(--w)) rotate(calc(var(--r) + 35deg)); }
}
[data-grass]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(74, 122, 38, .22), rgba(34, 60, 20, .08) 55%, transparent 80%); }
@media (prefers-reduced-motion: reduce) {
  .leaf { animation: none; opacity: var(--o); top: var(--y); }
  .leaf svg { animation: none; }
}
@media (max-width: 720px) { .leaves { display: none; } }

/* ---------- hero world, scenes: real crops of the hero image as section backdrops ---------- */
.scene-pond-host > .wrap { position: relative; z-index: 1; }
/* never wider than 2000 CSS px, so the 2880px crop is never stretched past its real resolution */
.pscene--pond { position: absolute; left: 50%; transform: translateX(-50%); width: min(100%, 2000px); bottom: 0; height: 70%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 72%, transparent 100%); }
.pscene--pond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block;
  opacity: .5; filter: url(#ripple) saturate(.9) brightness(.8); transform: scale(1.04); }
.pscene--pond::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 70%, transparent 0%, rgba(10, 10, 11, .35) 70%, rgba(10, 10, 11, .75) 100%); }
.pscene__fx { position: absolute; }
@media (min-width: 2000px) { .pscene--pond img { -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pscene--pond img { filter: saturate(.9) brightness(.8); } }
@media (max-width: 720px) { .pscene--pond { height: 40%; } .pscene--pond img { opacity: .35; } }

.pscene--field { position: absolute; left: 50%; transform: translateX(-50%); width: min(100%, 2000px); bottom: 0; height: 42%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 60%); }
.pscene--field img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; opacity: .55; filter: brightness(.85); }
.final__inner { z-index: 1; }
@media (min-width: 2000px) { .pscene--field img { -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); } }
@media (max-width: 720px) { .pscene--field { height: 30%; } }
/* hero world, part 4: the red tree reaches into the stories section from the top-right edge (mirrored), max 560px so it's never stretched */
/* homepage only, and pinned to the content column so it never drifts to the far edge of wide screens */
.page-home .stories { position: relative; }
.page-home .stories > * { position: relative; z-index: 1; }
.page-home .stories::before { content: ""; position: absolute; top: -70px; right: max(0px, calc((100vw - var(--wrap)) / 2 - 140px)); z-index: 0; pointer-events: none;
  width: min(42vw, 560px); aspect-ratio: 560 / 406; transform: scaleX(-1); opacity: .85;
  background: url(photos/scene-branch-560.webp) center / cover no-repeat;
  background-image: image-set(url(photos/scene-branch-560.webp) 1x, url(photos/scene-branch-1120.webp) 2x);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 72%), linear-gradient(to right, #000 40%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 30%, transparent 72%), linear-gradient(to right, #000 40%, transparent 100%);
  mask-composite: intersect; filter: brightness(1.1) saturate(1.05); }
@media (max-width: 720px) { .page-home .stories::before { width: 70vw; opacity: .3; } }

/* ---------- product screenshots (card 3): an app window on a photo panel from the hero (Promptwatch-style) ----------
   <figure class="shot">
     <div class="shot__win"><div class="shot__bar"><i></i><i></i><i></i><span>Roadmap</span></div>
       <img src="..." srcset="..." width="1440" height="900" alt="What the screen shows" loading="lazy"></div>
   </figure>
   The window starts 48px inside the photo panel and runs past its bottom edge onto the page. */
.shot { position: relative; margin: 0; padding: clamp(28px, 4vw, 56px) clamp(20px, 3.5vw, 48px) 0; }
.shot::before { content: ""; position: absolute; inset: 0 0 18% 0; border-radius: 6px; z-index: 0;
  background: #2a3a1e url(photos/scene-panel-1440.webp) center 40% / cover no-repeat;
  background-image: image-set(url(photos/scene-panel-1440.webp) 1x, url(photos/scene-panel-2880.webp) 2x); }
.shot__win { position: relative; z-index: 1; border-radius: 10px; overflow: hidden; background: #fff;
  border: 1px solid rgba(10, 10, 11, .12); box-shadow: 0 2px 6px rgba(10, 10, 11, .08), 0 24px 60px -24px rgba(10, 10, 11, .45); }
.shot__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; background: #F4F4F5; border-bottom: 1px solid rgba(10, 10, 11, .08); }
.shot__bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.shot__bar i:nth-child(2) { background: #FEBC2E; }
.shot__bar i:nth-child(3) { background: #28C840; }
.shot__bar span { flex: 1; text-align: center; margin-right: 50px; font-size: 12.5px; color: var(--ink-dim); }
.shot__win img { display: block; width: 100%; height: auto; }
.section--dark .shot__win { border-color: rgba(255, 255, 255, .14); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .8); }

/* ---------- live product window (mini app): the Devplan UI rebuilt in HTML, sharp at any size ---------- */
/* fixed height: the loops add and remove rows inside, so the window must never change size (no page jumping) */
.app { position: relative; display: grid; grid-template-columns: 188px 1fr; height: 548px; background: #fff; color: #0A0A0B; font-size: 12.5px; text-align: left; overflow: hidden; }
.app__side { border-right: 1px solid #EFEFF1; padding: 14px 10px; background: #FCFCFD; display: flex; flex-direction: column; }
.app__ws { display: flex; flex-direction: column; padding: 4px 8px 14px; line-height: 1.25; }
.app__ws b { font-weight: 500; font-size: 13px; } .app__ws small { color: #8A8A92; font-size: 10.5px; }
.app__nav { list-style: none; margin: 0; padding: 0; }
.app__nav li { padding: 6px 8px; border-radius: 6px; color: #3F3F46; }
.app__nav li.is-on { background: #F0F5FF; color: #1F3DFF; font-weight: 500; }
.app__navh { margin: 14px 8px 4px; font-size: 10.5px; color: #A0A0A8; }
.app__user { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px; font-size: 12px; }
.app__user b { width: 22px; height: 22px; border-radius: 6px; background: #0A0A0B; color: #fff; font-size: 9px; display: grid; place-items: center; font-weight: 500; }
.app__main { padding: 20px 22px; min-width: 0; }
.app__title { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.app__sub { margin: 2px 0 14px; color: #6B6B73; font-size: 12px; }
.app__card { border: 1px solid #EDEDF0; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.app__cardh { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 14px; background: #FAFAFB; border-bottom: 1px solid #EDEDF0; }
.app__cardh b { font-weight: 500; } .app__cardh span { grid-column: 1; color: #6B6B73; font-size: 11.5px; }
.app__cardh em { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-size: 11px; color: #6B6B73; }
.app__row { display: grid; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid #F2F2F4; transition: background-color .3s; }
.app__row:hover { background: #FAFAFC; }
.app__inf { grid-template-columns: 1fr 78px 30px auto; }
.app__proj { grid-template-columns: 1fr 84px 76px 50px 80px 30px; }
.app__name { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 7px; min-width: 0; }
.app__name b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__name small { grid-column: 1 / -1; color: #8A8A92; font-size: 11px; }
.app__proj .app__name { grid-template-columns: 1fr; }
.app__dot { width: 7px; height: 7px; border-radius: 50%; background: #1F3DFF; }
.app__tag { justify-self: start; font-size: 9.5px; border: 1px dashed #C9C9D0; border-radius: 4px; padding: 1px 5px; color: #6B6B73; text-transform: uppercase; letter-spacing: .06em; }
.app__pill { justify-self: start; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; transition: background-color .4s, color .4s; }
.app__pill--blue { background: #F0F5FF; color: #1F3DFF; } .app__pill--green { background: #E9F7EF; color: #16804F; }
.app__pill--amber { background: #FFF4E0; color: #B26A00; } .app__pill--red { background: #FDECEC; color: #C2362F; }
.app__who { width: 24px; height: 24px; border-radius: 50%; background: #F1F1F3; display: grid; place-items: center; font-size: 9.5px; color: #52525A; }
.app__btns { display: flex; gap: 10px; align-items: center; }
.app__btn { display: inline-block; background: #1F3DFF; color: #fff; border-radius: 6px; padding: 5px 10px; font-size: 11.5px; font-weight: 500; transition: transform .15s, box-shadow .3s; }
.app__btn.is-press { transform: scale(.94); box-shadow: 0 0 0 4px rgba(31, 61, 255, .2); }
.app__ghost { color: #52525A; font-size: 11.5px; }
.app__stage { color: #52525A; font-size: 11.5px; }
.app__rice { color: #8A8A92; font-size: 10px; } .app__rice b { color: #1F3DFF; font-size: 14px; font-weight: 500; }
.app__bar { height: 4px; border-radius: 4px; background: #EEF0F6; overflow: hidden; } .app__bar i { display: block; height: 100%; width: var(--p); background: #1F3DFF; border-radius: 4px; }
.app__grouph { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #FAFAFB; }
.app__grouph b { font-weight: 500; } .app__grouph span { color: #8A8A92; }
.app__live { width: 7px; height: 7px; border-radius: 50%; background: #1FA971; }
/* animation states */
.app__inf, .app__new { transition: opacity .45s var(--ease), max-height .5s var(--ease), padding .5s var(--ease), background-color .6s; max-height: 80px; }
.app__inf.is-gone { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; }
.app__new { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
.app__new.is-in { opacity: 1; max-height: 80px; padding-top: 9px; padding-bottom: 9px; background: #F0F5FF; }
.app__new.is-in.is-settled { background: transparent; }
[data-app-risk-row].is-risk { background: #FFFAF1; }
.app__toast { position: absolute; right: 18px; top: 58px; width: 290px; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid #F3D9A8;
  box-shadow: 0 18px 40px -16px rgba(10, 10, 11, .35); opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.app__toast.is-in { opacity: 1; transform: none; }
.app__toastk { margin: 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #B26A00; }
.app__toastt { margin: 4px 0; font-weight: 500; font-size: 13px; } .app__toastb { margin: 0 0 10px; color: #52525A; font-size: 11.5px; line-height: 1.45; }
/* below 960px the window keeps its desktop layout and is scaled down to fit (like a screenshot), see site.js */
.app-fit { overflow: hidden; }
.app-fit.is-scaled .app { width: 960px; transform-origin: 0 0; }
@media (max-width: 720px) { .shot__bar { height: 22px; gap: 5px; padding: 0 8px; } .shot__bar i { width: 7px; height: 7px; } .shot__bar span { font-size: 10px; margin-right: 30px; } }
/* live window: Dashboards / Your Radar */
.app__grp { display: flex; flex-direction: column; margin: 4px 0 8px; } .app__grp b { font-weight: 500; font-size: 14px; } .app__grp span { color: #6B6B73; font-size: 11.5px; }
.app__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.app__tile { border: 1px solid #EDEDF0; border-radius: 10px; padding: 12px 13px; display: flex; flex-direction: column; transition: border-color .4s, box-shadow .4s; }
.app__tile p { margin: 0; }
.app__tileh { display: flex; align-items: center; justify-content: space-between; } .app__tileh b { font-weight: 500; font-size: 13px; }
.app__def { font-size: 10px; color: #6B6B73; border: 1px solid #E4E4E8; border-radius: 5px; padding: 1px 6px; }
.app__tilep { color: #52525A; font-size: 11.5px; line-height: 1.45; margin: 6px 0 10px !important; flex: 1; }
.app__tilef { display: flex; align-items: center; gap: 6px; color: #8A8A92; font-size: 10.5px; border-top: 1px solid #F2F2F4; padding-top: 8px; }
.app__sync { width: 7px; height: 7px; border-radius: 50%; background: #1FA971; }
.app__tile.is-hot { border-color: #B3C8F8; box-shadow: 0 0 0 4px #F0F5FF; }
.app__tile.is-hot .app__sync { animation: pulse2 .8s ease-in-out infinite; background: #1F3DFF; }
.app__slack, .app__mail { position: absolute; right: 18px; width: 330px; background: #fff; border-radius: 10px; border: 1px solid #E4E4E8;
  box-shadow: 0 22px 50px -18px rgba(10, 10, 11, .4); opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.app__slack { top: 54px; } .app__mail { top: 318px; padding: 12px 14px; }
.app__slack.is-in, .app__mail.is-in { opacity: 1; transform: none; }
.app__slackh { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border-bottom: 1px solid #F0F0F2; font-size: 12px; }
.app__slackh span { margin-left: auto; color: #8A8A92; font-size: 10.5px; } .app__slacklogo { color: #8A8A92; }
.app__msg { display: flex; gap: 10px; padding: 12px; }
.app__msgav { flex: none; width: 30px; height: 30px; border-radius: 7px; background: #1F3DFF; color: #fff; display: grid; place-items: center; font-weight: 600; }
.app__msg p { margin: 0; } .app__msgn { display: flex; align-items: center; gap: 6px; }
.app__msgn span { font-size: 9px; background: #F1F1F3; color: #6B6B73; padding: 1px 4px; border-radius: 3px; } .app__msgn small { color: #8A8A92; font-size: 10.5px; }
.app__msgt { font-weight: 500; margin: 4px 0 6px !important; }
.app__msg ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.app__msg li { position: relative; padding-left: 14px; font-size: 11.5px; color: #3F3F46; line-height: 1.4; } .app__msg li b { font-weight: 500; color: #0A0A0B; }
.app__msg li i { position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; } .app__msg li i.g { background: #1FA971; } .app__msg li i.a { background: #E6A437; } .app__msg li i.b { background: #1F3DFF; }
.app__msgbtn { display: inline-block; font-size: 11px; border: 1px solid #D9D9DD; border-radius: 6px; padding: 4px 10px; }
.app__mail p { margin: 0; } .app__mailh { display: flex; justify-content: space-between; } .app__mailh b { font-weight: 500; } .app__mailh small { color: #8A8A92; font-size: 10.5px; }
.app__mails { font-weight: 500; font-size: 12px; margin: 3px 0 !important; } .app__mailp { color: #6B6B73; font-size: 11.5px; }
/* live window: Ask Weaver */
.ask3__box { display: flex; align-items: center; gap: 2px; min-height: 58px; border: 1px solid #DADCE3; border-radius: 12px; padding: 12px 12px 12px 16px; font-size: 14px; box-shadow: 0 0 0 4px #F5F7FF; }
.ask3__q { color: #0A0A0B; } .ask3__q:empty::before { content: "Ask a question or create something…"; color: #A0A0A8; }
.ask3__caret { width: 1.5px; height: 18px; background: #1F3DFF; animation: pulse2 1s steps(2) infinite; }
.ask3__send { margin-left: auto; opacity: .45; transition: opacity .3s; } .ask3__box.is-ready .ask3__send { opacity: 1; }
.ask3__srcs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 18px 0 0; }
.ask3__srcs span { position: relative; text-align: center; font-size: 11.5px; color: #8A8A92; border: 1px solid #EDEDF0; border-radius: 8px; padding: 6px 4px; transition: color .3s, border-color .3s, background-color .3s; }
.ask3__srcs span::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 26px; margin-left: -1px; opacity: 0;
  background: linear-gradient(to bottom, transparent, #1F3DFF 50%, transparent) 0 -26px / 2px 52px no-repeat; transition: opacity .3s; }
.ask3__srcs span.is-lit { color: #1F3DFF; border-color: #B3C8F8; background: #F0F5FF; }
.ask3__srcs span.is-lit::after { opacity: 1; animation: ask3flow .9s linear infinite; }
@keyframes ask3flow { to { background-position: 0 26px; } }
.ask3__ans { margin-top: 26px; border: 1px solid #EDEDF0; border-radius: 12px; padding: 14px 16px; min-height: 118px; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ask3__ans.is-in { opacity: 1; transform: none; }
.ask3__ans p { margin: 0; } .ask3__who { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12px; }
.ask3__av { width: 22px; height: 22px; border-radius: 6px; background: #1F3DFF; color: #fff; display: grid; place-items: center; font-size: 11px; }
.ask3__text { margin: 8px 0 10px !important; font-size: 13.5px; line-height: 1.55; color: #27272A; } .ask3__text b { font-weight: 500; color: #0A0A0B; }
.ask3__cites { display: flex; flex-wrap: wrap; gap: 6px; } .ask3__cites span { font-size: 10.5px; color: #52525A; background: #F4F4F6; border-radius: 5px; padding: 3px 7px; }
.shot[data-app="ask"] .app { height: 430px; }

/* ---------- Track + Radar sections (cards 7, 8) ---------- */
.run__head { max-width: 780px; }
.run__pts { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.run__pts li { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--cobalt-soft-line); }
.run__pts b { font-weight: 500; font-size: 16px; } .run__pts span { color: var(--ink-dim); font-size: 15px; line-height: 1.5; }
.run__win { margin-top: 48px; }
.run__note { margin: 20px 0 0; text-align: center; color: var(--ink-dim); font-size: 14px; }
@media (max-width: 760px) { .run__pts { grid-template-columns: 1fr; gap: 18px; } .run__win { margin-top: 32px; } }
.shot[data-app="roadmap"] .app { height: 610px; }
.story__trail { margin: 14px 0 0; max-width: 62ch; color: var(--ink); font-size: 16px; font-weight: 500; }
.app__trail { color: #1F3DFF !important; }
.phero__line { margin: 14px 0 0; font-weight: 500; color: inherit; max-width: 60ch; }

/* ---------- hero, card 6: incoming customer message (not a typing box) + started project + automatic chain ---------- */
.ask__tag { flex: none; font-size: 12px; font-weight: 500; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.ask__text [data-type] { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.ask__tag { opacity: 0; transition: opacity .4s var(--ease); }
.ask.is-in .ask__text [data-type], .ask.is-in .ask__tag { opacity: 1; transform: none; }
.ask__live { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-faint); }
.ask__live i { width: 7px; height: 7px; border-radius: 50%; background: #1FA971; animation: pulse2 1.6s ease-in-out infinite; }
.req__act { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.req__act .req__spec { margin-top: 0; }
/* a status label, not a button (first-impression test: visitors tried to click "Start project") */
.req__start { font-size: 12.5px; font-weight: 500; color: var(--night-dim); background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .22); border-radius: 999px; padding: 5px 12px; transition: color .3s, background-color .3s, border-color .3s; }
.req__start.is-press { transform: scale(.94); box-shadow: 0 0 0 4px rgba(31, 61, 255, .25); }
.req__start.is-done { color: #7BE3B5; background: rgba(31, 169, 113, .14); border: 1px solid rgba(31, 169, 113, .45); }
.flow .out .out__ico { opacity: .6; transition: opacity .3s, background-color .3s, color .3s; }
.flow .out.is-done .out__ico { opacity: 1; background: rgba(31, 169, 113, .16); color: #1FA971; }
.flow .out span:last-child { opacity: .85; transition: opacity .3s; }
.flow .out.is-done span:last-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ask__text [data-type], .ask__tag { opacity: 1; transform: none; } }
.hero .ask__tag { color: #B9C6FF; background: rgba(90, 119, 255, .2); }
.flow__intro { margin: 56px 0 18px; text-align: center; font-size: 18px; font-weight: 500; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .6); }
.flow__label b { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; vertical-align: 1px; }

/* ---------- For every team (card 10): each team asks Weaver its own question; plays each time a tab opens ---------- */
.tqa { display: flex; flex-direction: column; gap: 12px; min-height: 212px; }
.tqa p { margin: 0; }
.tqa__q { align-self: flex-end; display: flex; align-items: center; gap: 8px; max-width: 92%; padding: 9px 12px; border-radius: 12px 12px 4px 12px; background: rgba(255, 255, 255, .08); font-size: 14.5px; }
.tqa__who { flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 6px; background: rgba(255, 255, 255, .14); font-size: 9.5px; font-weight: 600; }
.tqa__typing { display: flex; gap: 4px; padding: 4px 2px; }
.tqa__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--night-dim); animation: pulse2 .9s ease-in-out infinite; }
.tqa__typing i:nth-child(2) { animation-delay: .15s; } .tqa__typing i:nth-child(3) { animation-delay: .3s; }
.tqa__a { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(179, 200, 248, .22); background: rgba(31, 61, 255, .1); }
.tqa__name { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--night-dim); }
.tqa__av { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 10px; }
.tqa__t { margin-top: 6px !important; font-size: 14.5px; line-height: 1.5; }
.tqa__src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.tqa__src span { font-size: 11px; color: #C9D3FF; background: rgba(255, 255, 255, .07); border-radius: 5px; padding: 3px 7px; }
.tpane.is-on .tqa__q { animation: tqaIn .4s var(--ease) .15s both; }
.tpane.is-on .tqa__typing { animation: tqaType 1.1s linear .55s both; }
.tpane.is-on .tqa__a { animation: tqaIn .45s var(--ease) 1.6s both; }
.tqa__q, .tqa__a { opacity: 0; } .tqa__typing { opacity: 0; height: 0; padding: 0; overflow: hidden; }
@keyframes tqaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tqaType { 0% { opacity: 0; height: 14px; padding: 4px 2px; } 10%, 90% { opacity: 1; height: 14px; padding: 4px 2px; } 100% { opacity: 0; height: 0; padding: 0; } }
@media (prefers-reduced-motion: reduce) { .tqa__q, .tqa__a { opacity: 1; animation: none !important; } .tqa__typing { display: none; } }
.phero__win { max-width: 1100px; margin: 48px auto 0; text-align: left; }

/* ---------- Product brain: under the hood (cards 13, 14) ---------- */
.hood__steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hood__steps li { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--cobalt-soft-line); }
.hood__steps b { font-weight: 500; font-size: 17px; } .hood__steps li > span:last-child { color: var(--ink-dim); font-size: 15px; line-height: 1.55; }
.hood__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; }
.hood__stats { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hood__stat { padding: 22px; border-radius: 16px; background: var(--night); color: #fff; }
.hood__stat p { margin: 0; } .hood__stat p:nth-child(2) { margin-top: 6px; color: var(--night-dim); font-size: 15px; }
.hood__num { font-size: 32px; letter-spacing: -.02em; color: #B9C6FF; }
.hood__src { margin-top: 10px !important; font-size: 12px; color: var(--night-faint); }
[data-placeholder] .hood__num, [data-placeholder] .hood__src { background: rgba(255, 214, 0, .16); outline: 1px dashed rgba(255, 214, 0, .6); border-radius: 4px; display: inline-block; padding: 0 6px; }
@media (max-width: 860px) { .hood__steps, .hood__stats { grid-template-columns: 1fr; } }

/* ---------- MCP happy path, Product brain page (card 15) ---------- */
.mcp3 { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.mcp3 li { display: flex; gap: 14px; align-items: flex-start; }
.mcp3__n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }
.mcp3 strong { font-weight: 500; color: #fff; } .mcp3 p { margin: 2px 0 0; color: var(--night-dim); font-size: 15px; } .mcp3 a { color: var(--accent-dark); }
.bcard__more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--accent-dark); }

/* ---------- Press + About (card 17) ---------- */
.press { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.press__item { padding: 20px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 220px 1fr auto; gap: 6px 24px; align-items: baseline; }
.press__meta { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-faint); } .press__meta span { color: var(--ink-dim); font-weight: 500; }
.press__title { font-size: 17px; font-weight: 500; color: var(--ink); line-height: 1.4; } .press__title:hover { color: var(--accent); }
.press__by { margin: 0; font-size: 13px; color: var(--ink-faint); }
.press__contact { margin-top: 36px; padding: 22px; border-radius: 16px; background: var(--cobalt-soft); border: 1px solid var(--cobalt-soft-line); } .press__contact p { margin: 0; } .press__contact p + p { margin-top: 4px; color: var(--ink-dim); } .press__contact a { color: var(--accent); }
.investors { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.investors li { display: grid; place-items: center; width: 190px; height: 84px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--cobalt-soft-line); }
.investors img { max-width: 100%; max-height: 44px; object-fit: contain; }
.team2s { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.team2 { display: flex; gap: 18px; padding: 22px; border-radius: 16px; border: 1px solid var(--rule); }
.team2 img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--paper-off); }
.team2 p { margin: 0; } .team2__n { font-weight: 500; font-size: 17px; } .team2__r { font-size: 13.5px; color: var(--accent); margin-top: 2px !important; }
.team2__b { margin-top: 8px !important; color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; } .team2__in { display: inline-block; margin-top: 8px; font-size: 13.5px; color: var(--ink-dim); }
.worked { margin: 32px 0 0; color: var(--ink-dim); font-size: 15px; } .worked span { display: block; font-size: 13px; color: var(--ink-faint); margin-bottom: 6px; }
@media (max-width: 760px) { .press__item { grid-template-columns: 1fr; } .team2s { grid-template-columns: 1fr; } }
.investors img { width: auto; height: auto; }

/* ---------- Press + About v2 (card 17): dark scene hero, stats, featured story, image cards, logo marquee ---------- */
.pgh { position: relative; overflow: hidden; padding: clamp(150px, 16vw, 200px) 0 clamp(72px, 9vw, 110px); background: var(--night); color: #fff; }
.pgh .wrap { position: relative; z-index: 1; }
.pgh__scene { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 2000px); height: 75%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%); mask-image: linear-gradient(to bottom, transparent, #000 55%); }
.pgh__scene img { width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: brightness(.8); animation: pghDrift 30s ease-in-out infinite alternate; }
@keyframes pghDrift { from { transform: scale(1.04); } to { transform: scale(1.1) translateX(-1%); } }
.pgh__h { max-width: 18ch; margin: 10px 0 0; font-size: clamp(40px, 6vw, 72px); font-weight: 400; letter-spacing: -.035em; line-height: 1.02; }
.pgh__sub { max-width: 60ch; margin: 22px 0 0; color: #C8C8CE; font-size: 18px; line-height: 1.55; }
.pstats { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 28px; }
.pstats li { padding-top: 16px; border-top: 1px solid rgba(179, 200, 248, .25); }
.pstats b { display: block; font-size: 44px; font-weight: 400; letter-spacing: -.03em; color: #B9C6FF; }
.pstats span { color: var(--night-dim); font-size: 14px; }
.pfeat { display: grid; grid-template-columns: 1.1fr 1fr; margin-top: 48px; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px); color: #fff; transition: transform .35s var(--ease), border-color .35s; }
.pfeat:hover { transform: translateY(-4px); border-color: rgba(179, 200, 248, .45); }
.pfeat__img { overflow: hidden; } .pfeat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.pfeat:hover .pfeat__img img { transform: scale(1.05); }
.pfeat__body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.pfeat__body p { margin: 0; } .pfeat__k { font-size: 13px; color: #B9C6FF; } .pfeat__t { margin-top: 12px !important; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.02em; }
.pfeat__by { margin-top: 10px !important; color: var(--night-dim); font-size: 14px; } .pfeat__cta { margin-top: 22px; font-size: 14.5px; font-weight: 500; color: #fff; }
.pcards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pcard a { display: flex; flex-direction: column; height: 100%; color: inherit; }
.pcard.reveal { transition-delay: calc(var(--i) * 90ms); }
.pcard__img { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--night); border: 1px solid var(--rule); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.pcard a:hover .pcard__img img { transform: scale(1.06); }
.pcard__brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 18px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(31, 61, 255, .55), transparent 60%), linear-gradient(160deg, #15162a, #0A0A0B); transition: transform .7s var(--ease); }
.pcard a:hover .pcard__brand { transform: scale(1.04); }
.pcard__brand svg { width: 34px; height: 30px; opacity: .9; } .pcard__brand b { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.pcard__meta { margin: 14px 0 0; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-faint); } .pcard__meta span { color: var(--accent); font-weight: 500; }
.pcard__t { margin: 6px 0 0; font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--ink); transition: color .25s; } .pcard a:hover .pcard__t { color: var(--accent); }
.pcard__by { margin: 6px 0 0; font-size: 13px; color: var(--ink-faint); }
.press__contact { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.investors li { transition: transform .3s var(--ease), box-shadow .3s; } .investors li:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(31, 61, 255, .45); }
.investors li:nth-child(2) { transition-delay: 60ms; } .investors li:nth-child(3) { transition-delay: 120ms; } .investors li:nth-child(4) { transition-delay: 180ms; } .investors li:nth-child(5) { transition-delay: 240ms; }
.team2 { transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.team2:hover { transform: translateY(-4px); border-color: var(--cobalt-soft-line); box-shadow: 0 24px 50px -30px rgba(31, 61, 255, .45); }
/* photos stay in full colour (grey read as a memorial); hover = gentle zoom + cobalt ring */
.team2 img { transition: transform .4s var(--ease), box-shadow .4s; } .team2:hover img { transform: scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cobalt-soft-line); }
.team2s .team2:nth-child(2) { transition-delay: 80ms; } .team2s .team2:nth-child(3) { transition-delay: 160ms; } .team2s .team2:nth-child(4) { transition-delay: 240ms; } .team2s .team2:nth-child(5) { transition-delay: 320ms; }
.worked { margin-top: 48px; }
.worked__h { margin: 0 0 16px; font-size: 13px; color: var(--ink-faint); text-align: center; }
.worked__marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.worked__row { list-style: none; margin: 0; padding: 0; display: flex; flex: none; gap: 14px; padding-right: 14px; animation: workedScroll 32s linear infinite; }
.worked__marquee:hover .worked__row { animation-play-state: paused; }
.worked__row li { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 22px; border-radius: 14px; border: 1px solid var(--rule); background: #fff; white-space: nowrap; font-size: 17px; font-weight: 500; color: var(--ink); }
.worked__row li img { width: 24px; height: 24px; opacity: .85; } .worked__row .worked__wm img { width: auto; height: 30px; }
@keyframes workedScroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .worked__row { animation: none; flex-wrap: wrap; } .worked__row[aria-hidden] { display: none; } .worked__marquee { mask-image: none; -webkit-mask-image: none; } .pgh__scene img { animation: none; filter: brightness(.8); } }
@media (max-width: 900px) { .pfeat { grid-template-columns: 1fr; } .pcards { grid-template-columns: 1fr 1fr; } .pstats { grid-template-columns: repeat(3, 1fr); gap: 16px; } .pstats b { font-size: 32px; } }
@media (max-width: 560px) { .pcards { grid-template-columns: 1fr; } }
.pfeat, .pfeat:hover, .pcard a, .pcard a:hover { text-decoration: none; }
.press__contact .btn { color: #fff; }
.team2__in { text-decoration: none; } .team2__in:hover { color: var(--accent); }
/* wide screens: the scene spans the full width and fades out at the sides instead of ending in a hard edge */
.pgh__scene { width: 100%; }
.pgh__scene img { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%); }
@media (min-width: 2000px) { .pscene--pond, .pscene--field { width: 100%; } .pscene--pond img, .pscene--field img { object-fit: cover; } }
/* bigger, readable investor and "worked at" logos (Josip, 30 Sept) */
.investors { gap: 16px; }
.investors li { width: 220px; height: 110px; padding: 18px 22px; }
.investors img { max-height: 64px; }
.investors li.inv--dark { background: #151517; padding: 0; overflow: hidden; } .investors li.inv--dark img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.worked__row li { height: 76px; padding: 0 26px; font-size: 19px; color: var(--ink); }
.worked__row li img { width: 30px; height: 30px; opacity: 1; }
.worked__row .worked__wm img { width: auto; height: 38px; }
.investors li { width: 204px; } .investors li.inv--dark img { object-fit: contain; padding: 10px 12px; }
.worked__row li span { color: var(--ink); opacity: .85; }
/* real testimonials (30 Sept): long quotes get a smaller size so they fit the card; names link to their profiles */
.scard__back--long blockquote { font-size: 15px; line-height: 1.45; }
.scard__who a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.scard__word { font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: #fff; }
/* customer product screenshot as card front, in natural colour (Aarden AI): dark fade at the bottom for the name */
.scard__front--natural { background: var(--photo) center top / cover no-repeat, #0b1418; }
.scard__front--natural::before { background: linear-gradient(180deg, rgba(7, 10, 14, .05) 0%, rgba(7, 10, 14, .25) 50%, rgba(7, 10, 14, .92) 100%); }
.scard__front--natural { place-items: center; padding: 0; background-position: center; }
.scard__front--natural::before { background: radial-gradient(80% 60% at 50% 50%, rgba(7, 12, 16, .55), rgba(7, 12, 16, .85)); }
.scard__front--natural img { width: 170px; height: auto; mix-blend-mode: screen; }
.scard__front--natural::before { background: linear-gradient(180deg, rgba(7, 12, 16, .72), rgba(7, 12, 16, .9)); }
.scard__front--natural img { mix-blend-mode: normal; width: 190px; border-radius: 10px; box-shadow: 0 0 0 10px #0b1a22, 0 20px 50px -10px rgba(0, 0, 0, .8); background: #0b1a22; }
.scard__front--natural img { filter: none !important; opacity: 1 !important; }
.scard__front--natural::before { background: rgba(7, 12, 16, .82); }
/* light-brand customer card (Axiad): their own site as the backdrop, washed light, colour logo on a white badge */
.scard__front--light { background-color: #f1efea; }
.scard__front--light::before { background: rgba(241, 239, 234, .62) !important; }
.scard__front--light img { background: #fff; box-shadow: 0 0 0 14px #fff, 0 22px 50px -14px rgba(90, 50, 10, .35); width: 180px; }
/* Devplan cobalt accents on customer-branded cards (Josip, 30 Sept): glow behind the badge, cobalt ring, cobalt card edge */
.scard__front--natural { box-shadow: inset 0 0 0 1px rgba(90, 119, 255, .45); border-radius: inherit; }
.scard__front--natural::after { content: ""; position: absolute; left: 50%; top: 50%; width: 80%; height: 55%; transform: translate(-50%, -50%); z-index: 0;
  background: radial-gradient(closest-side, rgba(31, 61, 255, .45), transparent); filter: blur(18px); pointer-events: none; }
.scard__front--natural img { box-shadow: 0 0 0 10px #0b1a22, 0 0 0 12px rgba(90, 119, 255, .7), 0 20px 50px -10px rgba(31, 61, 255, .55); }
.scard__front--light img { box-shadow: 0 0 0 14px #fff, 0 0 0 16px #5A77FF, 0 22px 50px -14px rgba(31, 61, 255, .5); }
.scard__front--light::after { background: radial-gradient(closest-side, rgba(31, 61, 255, .32), transparent); }
/* darker cobalt-night gradient over the customer screenshot (Josip, 30 Sept) */
.scard__front--natural::before, .scard__front--light::before {
  background: linear-gradient(180deg, rgba(12, 18, 52, .62) 0%, rgba(10, 14, 40, .8) 55%, rgba(6, 8, 22, .95) 100%) !important; }
.scard__front--natural img[src*="aarden-ai-logo"] { padding: 14px 18px; width: 210px; box-sizing: content-box; }
.scard__front--natural img[src*="eight-sleep"] { padding: 16px 22px; width: 150px; box-sizing: content-box; } /* the file is already white */
.scard__front--blue { background-blend-mode: luminosity; } /* same duotone as the Tato card */
/* logo mark + company name lockup on the badge (Devmarketing) */
.scard__lockup { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px 14px 14px; border-radius: 14px; background: #fbf7f2;
  box-shadow: 0 0 0 2px #5A77FF, 0 20px 50px -12px rgba(31, 61, 255, .5); }
.scard__front--natural .scard__lockup img { width: 44px !important; height: 44px; padding: 0; box-shadow: none !important; background: none !important; border-radius: 10px; }
.scard__lockup b { font-size: 24px; font-weight: 700; letter-spacing: -.03em; color: #141210; }
/* Tato: sage logo on a white badge, over its own site; no greyscale blend on link cards with natural fronts */
.scard--link .scard__front--natural { background-blend-mode: normal; }
.scard__front--natural img[src*="tato-logo"] { width: 130px; padding: 16px 26px; box-sizing: content-box; background: #fff; box-shadow: 0 0 0 2px #5A77FF, 0 20px 50px -12px rgba(31, 61, 255, .5); }
/* all customer cards: the same cobalt duotone as the people photos (Josip, 30 Sept) */
.scard__front--natural { background-color: #1F3DFF; background-blend-mode: luminosity !important; }
.scard__front--natural::before, .scard__front--light::before {
  background: linear-gradient(180deg, rgba(31, 61, 255, .72) 0%, rgba(31, 61, 255, .55) 45%, rgba(10, 16, 60, .92) 100%) !important; }
.scard__front--natural::after { background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent); }
.scard__front--natural img[src*="first-logo"] { width: 190px; padding: 16px 22px; box-sizing: content-box; background: #fff; box-shadow: 0 0 0 2px #5A77FF, 0 20px 50px -12px rgba(10, 16, 60, .6); }
.scard__front--natural img[src*="axiad-color"] { box-shadow: 0 0 0 14px #fff, 0 0 0 16px #5A77FF, 0 22px 50px -14px rgba(10, 16, 60, .6); }
.scard__front--natural::before, .scard__front--light::before {
  background: linear-gradient(180deg, rgba(31, 61, 255, .8) 0%, rgba(24, 46, 200, .78) 45%, rgba(10, 16, 60, .95) 100%) !important; }
/* badges: soft cobalt gradient instead of flat white, and a glassy dark gradient for dark logos (Josip, 30 Sept) */
.scard__front--natural img[src*="tato-logo"], .scard__front--natural img[src*="first-logo"], .scard__front--natural img[src*="axiad-color"], .scard__lockup {
  background: linear-gradient(160deg, #F4F6FF 0%, #E3E9FF 55%, #C9D3FF 100%) !important;
  box-shadow: 0 0 0 2px rgba(90, 119, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .8), 0 20px 50px -12px rgba(10, 16, 60, .65) !important; }
.scard__front--natural img[src*="axiad-color"] { padding: 14px 20px; box-sizing: content-box; width: 170px; }
.scard__front--natural img[src*="eight-sleep"], .scard__front--natural img[src*="aarden-ai-logo"] {
  background: linear-gradient(160deg, rgba(40, 56, 140, .92) 0%, rgba(14, 22, 70, .95) 60%, rgba(8, 12, 40, .98) 100%) !important;
  box-shadow: 0 0 0 2px rgba(90, 119, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .15), 0 20px 50px -12px rgba(10, 16, 60, .7) !important; }
/* item 2 (Chris, 1 Oct): the explanation lives inside the dashboard as its title bar */
.flow__intro { display: none; }
.hero .flow { margin-top: 64px; }
.flow__title { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; margin: -4px 0 22px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 16px; font-weight: 500; color: #fff; text-align: center; }
.flow__dot { width: 8px; height: 8px; border-radius: 50%; background: #1FA971; box-shadow: 0 0 0 4px rgba(31, 169, 113, .18); animation: pulse2 1.8s ease-in-out infinite; }
@media (max-width: 760px) { .flow__title { font-size: 15px; margin-bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .flow__dot { animation: none; } }
/* item 3 (Chris, 1 Oct): cobalt pulses flow along the wires, feedback -> suggested project -> what happens next */
.flow__wire path.flow__pulse { stroke: #5A77FF; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 22 78; stroke-dashoffset: 100;
  filter: drop-shadow(0 0 4px rgba(90, 119, 255, .9)); animation: flowPulse 2.4s cubic-bezier(.45, 0, .55, 1) var(--d, 0s) infinite; }
.flow__wire--b path.flow__pulse { animation-delay: calc(1.2s + var(--d, 0s)); }
@keyframes flowPulse { 0% { stroke-dashoffset: 100; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -22; opacity: 0; } }
.hero .flow__wire path:not(.flow__pulse) { stroke: #2c2f45; }
@media (prefers-reduced-motion: reduce) { .flow__wire path.flow__pulse { animation: none; opacity: 0; } }
/* item 4 (Chris, 1 Oct): one quote size on every card */
.scard__back blockquote, .scard__back--long blockquote { font-size: 16.5px; line-height: 1.45; letter-spacing: -.005em; }
.faq__more { display: block; margin: 22px auto 0; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--cobalt-soft-line); background: #fff; color: var(--accent); font-size: 14.5px; font-weight: 500; cursor: pointer; transition: background-color .2s; }
.faq__more:hover { background: var(--cobalt-soft); }
.faq__more[hidden] { display: none; }
.faq__list .faq__more { margin: 24px 0 0; }

/* live window: Proposals (Chris, 1 Oct item 8) */
.shot[data-app="proposals"] .app { height: 600px; }
.prop { position: relative; display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start; padding: 14px; margin-bottom: 10px; border: 1px solid #EDEDF0; border-radius: 12px; background: #fff; transition: border-color .4s, box-shadow .4s, opacity .4s; }
.prop p { margin: 0; }
.prop__score { display: grid; justify-items: center; padding: 8px 4px; border-radius: 10px; background: #F0F5FF; color: #1F3DFF; }
.prop__score b { font-size: 22px; font-weight: 500; line-height: 1; } .prop__score small { font-size: 10px; color: #6B7BD6; } .prop__score span { margin-top: 4px; font-size: 9px; letter-spacing: .1em; color: #6B7BD6; }
.prop__score--mid { background: #F4F5F8; color: #3F3F46; } .prop__score--mid small, .prop__score--mid span { color: #8A8A92; }
.prop__score--low { background: #F7F7F9; color: #8A8A92; } .prop__score--low small, .prop__score--low span { color: #A0A0A8; }
.prop__t { font-size: 14px; font-weight: 500; }
.prop__s { margin-top: 3px !important; color: #6B6B73; font-size: 11.5px; line-height: 1.45; }
.prop__ev { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.prop__ev li { position: relative; padding-left: 12px; font-size: 11.5px; color: #3F3F46; } .prop__ev li::before { content: ""; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: #1F3DFF; }
.prop__ev b { font-weight: 600; color: #1F3DFF; display: inline-block; transition: transform .3s; }
.prop__acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px !important; } .prop__acc span { font-size: 10.5px; color: #52525A; background: #F4F4F6; border-radius: 6px; padding: 3px 7px; } .prop__acc b { font-weight: 600; color: #0A0A0B; }
.prop__act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.app__btn--soft { background: #F0F5FF; color: #1F3DFF; }
.prop__done { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; background: rgba(233, 247, 239, .96); color: #16804F; font-weight: 500; font-size: 13.5px; opacity: 0; transition: opacity .45s; pointer-events: none; }
.prop.is-hot { border-color: #B3C8F8; box-shadow: 0 0 0 4px #F0F5FF; }
.prop.is-hot .prop__ev b { transform: scale(1.25); }
.prop.is-started .prop__done { opacity: 1; }
.app__toast--blue { border-color: #B3C8F8; top: 70px; } .app__toast--blue .app__toastk { color: #1F3DFF; }
.prop__ev b { margin-right: .3em; }
.shot[data-app="proposals"] .app { height: 540px; }
/* item 13 (Chris, 1 Oct): real speed and cost numbers from the demo video */
.hood__num span { font-size: 18px; color: var(--night-dim); letter-spacing: 0; margin-left: 6px; }
.hood__note { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-dim); } .hood__note a { color: var(--accent); }

/* ---------- legal pages ---------- */
.legal-hero { padding: clamp(96px, 13vw, 156px) 0 clamp(52px, 7vw, 80px); background: var(--night); color: var(--paper); }
.legal-hero__inner { max-width: 900px; }
.legal-hero h1 { max-width: 16ch; font-size: clamp(42px, 7vw, 76px); font-weight: 400; line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.legal-hero .eyebrow { color: var(--accent-dark); }
.legal-updated { margin-top: 24px; color: var(--night-dim); font: 400 13px/1.5 var(--mono); }
.legal-body { padding: clamp(52px, 8vw, 96px) 0; background: var(--paper-off); }
.legal-shell { max-width: 900px; }
.legal-prose { padding: clamp(28px, 5vw, 64px); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper); color: var(--ink-dim); font-size: 16px; line-height: 1.72; box-shadow: 0 16px 50px rgba(10, 10, 11, .04); }
.legal-prose > :first-child { margin-top: 0; }
.legal-prose > :last-child { margin-bottom: 0; }
.legal-prose h2, .legal-prose h3 { color: var(--ink); scroll-margin-top: 96px; }
.legal-prose h2 { margin: 48px 0 16px; font-size: clamp(24px, 3vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.legal-prose h3 { margin: 32px 0 12px; font-size: 18px; }
.legal-prose p { margin: 0 0 18px; }
.legal-prose ul, .legal-prose ol { margin: 0 0 22px; padding-left: 1.4em; }
.legal-prose ul { list-style: disc; }
.legal-prose ol { list-style: decimal; }
.legal-prose li { margin: 8px 0; padding-left: .2em; }
.legal-prose li::marker { color: var(--accent); }
.legal-prose a { color: var(--accent); text-underline-offset: 3px; }
.legal-prose a:hover { text-decoration-thickness: 2px; }
.legal-prose strong { color: var(--ink-2); font-weight: 600; }

@media (max-width: 600px) {
  .legal-hero { padding-top: 84px; }
  .legal-prose { padding: 26px 22px; border-radius: 12px; }
  .legal-prose h2 { margin-top: 38px; }
}

@media print {
  .page-legal .announce, .page-legal .site-header, .page-legal .site-footer { display: none !important; }
  .legal-hero, .legal-body { padding: 24px 0; background: #fff; color: #000; }
  .legal-hero h1, .legal-prose h2, .legal-prose h3, .legal-prose strong { color: #000; }
  .legal-updated, .legal-prose { color: #222; }
  .legal-prose { padding: 0; border: 0; box-shadow: none; }
}

/* =====================================================================
   Brand guide
   ===================================================================== */
.page-brand { background: var(--paper); }
.brand-page { background: var(--paper); color: var(--ink); }
.brand-hero { padding: 170px 0 clamp(72px, 10vw, 128px); overflow: hidden; position: relative; background: var(--night); color: #fff; }
.brand-hero::before { content: ""; position: absolute; width: min(900px, 90vw); aspect-ratio: 1; left: 50%; top: -55%; transform: translateX(-50%); background: radial-gradient(circle, rgba(31, 61, 255, .45), transparent 66%); pointer-events: none; }
.brand-hero__inner { position: relative; }
.brand-hero__title { max-width: 13ch; font-size: clamp(48px, 7.5vw, 96px); font-weight: 400; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.brand-hero__lede { max-width: 50ch; margin-top: 28px; color: var(--night-dim); font-size: clamp(18px, 2vw, 22px); }
.brand-hero__meta { margin-top: 32px; color: var(--night-faint); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.brand-jump { position: sticky; top: 84px; z-index: 30; background: rgba(255, 255, 255, .88); border-bottom: 1px solid var(--rule); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand-jump .wrap { display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px; scrollbar-width: none; }
.brand-jump .wrap::-webkit-scrollbar { display: none; }
.brand-jump a { flex: none; padding: 7px 12px; border-radius: 999px; color: var(--ink-dim); font-size: 13px; text-decoration: none; }
.brand-jump a:hover { color: var(--ink); background: var(--paper-off); }
.brand-section { padding: var(--section) 0; scroll-margin-top: 145px; }
.brand-section--tint { background: var(--paper-tint); border-block: 1px solid var(--rule); }
.brand-section--dark { background: var(--night); color: #fff; }
.brand-copy { max-width: 1080px; }
.brand-kicker { margin-bottom: 14px; color: var(--accent); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.brand-section--dark .brand-kicker { color: var(--accent-dark); }
.brand-copy > h2 { max-width: 18ch; font-size: clamp(34px, 5vw, 58px); font-weight: 400; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.brand-lede { max-width: 62ch; margin-top: 20px; color: var(--ink-dim); font-size: clamp(17px, 1.7vw, 20px); }
.brand-section--dark .brand-lede { color: var(--night-dim); }
.brand-subhead { margin: 56px 0 18px; font-size: 18px; }

.brand-logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.brand-logo-block { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 38px; margin: 0; border: 1px solid var(--rule); border-radius: 18px; background: #fff; }
.brand-logo-block--dark { color: #fff; background: var(--night); border-color: var(--night); }
.brand-lockup { display: inline-flex; align-items: center; gap: 15px; font-size: 32px; font-weight: 600; letter-spacing: -.025em; }
.brand-lockup svg { width: 44px; height: 40px; color: var(--accent); }
.brand-mark-demo { width: 82px; height: 74px; color: var(--accent); }
.brand-logo-block figcaption { color: var(--ink-faint); font: 500 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.brand-logo-block--dark figcaption { color: var(--night-faint); }
.brand-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 42px; }
.brand-rules article { padding: 24px; border: 1px solid var(--rule); border-radius: 14px; }
.brand-rules h3 { margin-bottom: 10px; }
.brand-rules p { color: var(--ink-dim); font-size: 15px; }

.brand-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.brand-swatch { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 112px auto auto; padding: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: 12px; background: #fff; text-align: left; transition: transform .18s var(--ease), border-color .18s; }
.brand-swatch:hover { border-color: var(--ink); transform: translateY(-2px); }
.brand-swatch::after { content: "Copied"; position: absolute; right: 9px; top: 9px; padding: 4px 8px; border-radius: 999px; background: var(--accent); color: #fff; font: 500 10px/1.3 var(--mono); opacity: 0; transform: translateY(-4px); transition: .18s; }
.brand-swatch.is-copied::after { opacity: 1; transform: none; }
.brand-swatch > i { grid-column: 1 / -1; display: block; height: 112px; background: var(--swatch); border-bottom: 1px solid var(--rule); }
.brand-swatch > i.brand-swatch__rule { background-color: #fff; background-image: linear-gradient(45deg, var(--rule-strong) 25%, transparent 25%, transparent 75%, var(--rule-strong) 75%), linear-gradient(45deg, var(--rule-strong) 25%, transparent 25%, transparent 75%, var(--rule-strong) 75%); background-position: 0 0, 8px 8px; background-size: 16px 16px; }
.brand-swatch b { padding: 13px 0 2px 14px; font-size: 14px; font-weight: 500; }
.brand-swatch span { padding: 14px 14px 2px 8px; color: var(--ink-dim); font: 400 11px/1.4 var(--mono); }
.brand-swatch small { grid-column: 1 / -1; padding: 0 14px 14px; color: var(--ink-faint); font: 400 10px/1.4 var(--mono); }

.brand-specimen { margin-top: 16px; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.brand-specimen:first-of-type { margin-top: 48px; }
.brand-specimen__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 24px; color: var(--ink-faint); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.brand-specimen__meta b { color: var(--ink-dim); font-weight: 500; }
.brand-specimen__display { font-size: clamp(42px, 6vw, 76px); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.brand-specimen__heading { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -.028em; }
.brand-specimen__body { max-width: 64ch; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.brand-specimen__mono { color: var(--ink-2); font-size: clamp(12px, 1.7vw, 16px); letter-spacing: .14em; }

.brand-downloads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.brand-download { overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; transition: transform .25s var(--ease), border-color .2s; }
.brand-download:hover { transform: translateY(-3px); border-color: var(--accent-dark); }
.brand-download__preview { height: 170px; display: grid; place-items: center; padding: 24px; background: var(--paper-off); border-bottom: 1px solid var(--rule); }
.brand-download__preview img { width: auto; height: auto; max-width: 88%; max-height: 78px; object-fit: contain; }
.brand-download--night .brand-download__preview { background: var(--night-2); border-bottom-color: rgba(255, 255, 255, .08); }
.brand-download__preview--mark img { max-width: 76px; max-height: 76px; }
.brand-download__preview--pixel img { image-rendering: pixelated; }
.brand-download--fill .brand-download__preview { padding: 0; }
.brand-download--fill .brand-download__preview img { width: 100%; height: 100%; object-fit: cover; max-height: none; }
.brand-download > span:last-child { display: grid; grid-template-columns: 1fr auto; padding: 15px 16px 17px; }
.brand-download b { font-size: 14px; font-weight: 500; }
.brand-download small { grid-column: 1; color: var(--ink-faint); font: 400 10px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.brand-download i { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--ink-faint); font-style: normal; transition: transform .2s; }
.brand-download:hover i { transform: translateY(3px); color: var(--accent); }

.brand-generator { margin-top: 48px; }
.brand-generator__stage { padding: 18px; overflow: hidden; border: 1px solid var(--rule); border-radius: 16px; background: radial-gradient(circle, rgba(10,10,11,.06) 1px, transparent 1.3px) 0 0 / 16px 16px, var(--paper-tint); }
.brand-generator__stage canvas { display: block; width: 100%; height: auto; border-radius: 7px; box-shadow: 0 18px 45px -24px rgba(10, 10, 11, .35); }
.brand-generator__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; align-items: end; margin-top: 24px; }
.brand-generator fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.brand-generator legend, .brand-generator label { color: var(--ink-dim); font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.brand-generator legend { margin-bottom: 8px; }
.brand-generator label { position: relative; display: grid; gap: 6px; }
.brand-generator output { position: absolute; right: 0; color: var(--accent); }
.brand-generator input[type="range"] { width: 100%; accent-color: var(--accent); }
.brand-generator__bgs { display: flex; gap: 6px; }
.brand-generator__bgs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 8px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; font: 400 11px/1 var(--mono); }
.brand-generator__bgs button.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.brand-generator__bgs i { width: 12px; height: 12px; display: inline-block; border: 1px solid rgba(10, 10, 11, .18); border-radius: 4px; background: var(--bg); }
.brand-generator__dims { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); font-family: var(--mono); }
.brand-generator__dims input { width: 88px; min-width: 0; padding: 8px 9px; border: 1px solid var(--rule); border-radius: 8px; font: 400 12px/1 var(--mono); }
.brand-generator__actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 4px; }
.brand-generator__actions > button { min-height: 44px; padding: 0 18px; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: 13px; }
.brand-generator__actions .btn { flex: 1; border-color: var(--accent); color: #fff; }
.brand-generator__seed { grid-column: 1 / -1; color: var(--ink-faint); font-size: 10px; letter-spacing: .08em; }
.brand-help { margin-top: 48px; padding-left: 18px; border-left: 2px solid var(--accent); color: var(--ink-dim); font-size: 15px; }
.brand-help a { color: var(--accent); }

@media (max-width: 900px) {
  .brand-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-generator__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-rules { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .brand-hero { padding-top: 130px; }
  .brand-jump { top: 80px; }
  .brand-logo-grid, .brand-swatches, .brand-downloads, .brand-generator__controls { grid-template-columns: 1fr; }
  .brand-logo-block { min-height: 190px; }
  .brand-generator__actions { flex-direction: column; }
  .brand-generator__actions > button { width: 100%; }
  .brand-generator__dims input { width: calc(50% - 14px); }
}

/* blog code blocks scroll inside the article instead of pushing the page sideways */
.post__grid--article > * { min-width: 0; }
.post__grid--article pre { max-width: 100%; overflow-x: auto; padding: 16px 18px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: #E6E6EA; font: 400 13px/1.6 var(--mono); }
.post__grid--article pre code { white-space: pre; }

/* PRD template versions: chips above the template */
.tvar { display: grid; gap: 12px; margin-top: 28px; }
.tvar__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tvar__k { width: 180px; font-size: 14px; font-weight: 500; color: var(--ink-faint); }
.tvar .hpicks { margin-top: 0; justify-content: flex-start; }
@media (max-width: 640px) { .tvar__k { width: auto; flex-basis: 100%; } .tvar { gap: 18px; } }
.tdoc section[data-xsec] { animation: hub-in .45s var(--ease); }
@media (prefers-reduced-motion: reduce) { .tdoc section[data-xsec] { animation: none; } }
.tvar__ai { display: flex; flex-wrap: wrap; gap: 8px; }
.tvar__btn { gap: 8px; padding-top: 9px; padding-bottom: 9px; font-size: 14px; }
.tvar__btn img { width: 16px; height: 16px; }

/* startups page: clear costs */
.stcost { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.stcost__c { padding: 26px; border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); }
.stcost__c p:last-child { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-dim); }
.stcost__n { font-size: 34px; letter-spacing: -.02em; color: var(--accent); }
.stcost__n span { font-size: 16px; letter-spacing: 0; color: var(--ink-dim); }
@media (max-width: 960px) { .stcost { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stcost { grid-template-columns: 1fr; } }
.hero--startups { padding-bottom: 140px; }
.hero--startups .hero__photo.is-vivid { background-position: center 88%; }
/* PRD page: crawlable template versions */
.pvers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.pver { padding: 26px; border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); }
.pver h3 { font-size: 18px; font-weight: 500; }
.pver__ch { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-dim); }
.pver ul { margin-top: 14px; display: grid; gap: 6px; padding-left: 18px; list-style: disc; font-size: 14.5px; color: var(--ink); }
@media (max-width: 960px) { .pvers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pvers { grid-template-columns: 1fr; } }