/* DevMap website v2. Tokens first; every value below comes from them. */
:root {
  /* colour: graphite surfaces, off-white text, one indigo accent, amber/teal for status only */
  --bg: #0b0c0f;
  --bg-1: #0f1115;
  --bg-tint: #10131c;
  --line: #1c2027;
  --line-2: #2a2f39;
  --fg: #eceef2;
  --fg-2: #a4abb7;
  --fg-3: #8a92a0;
  --accent: #8393ff;
  --accent-btn: #4d61d6;
  --accent-btn-hover: #596ce0;
  --accent-line: #3d4890;
  --warn: #e2a23b;
  --ok: #3fc9a8;
  /* depth: surface layers, grid, light (V2.1) */
  --bg-0: #08090c;
  --bg-lit: #0d1014;
  --grid: rgba(255, 255, 255, .06);
  --hl: rgba(255, 255, 255, .09);
  --glow-blue: rgba(110, 130, 255, .28);
  --glow-teal: rgba(63, 201, 168, .12);
  --t-ui: 160ms;

  /* type: one family (the app's own stack), three weights */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --fw-body: 400; --fw-ui: 500; --fw-head: 600;
  --fs-label: .75rem;
  --fs-caption: .8125rem;
  --fs-small: .875rem;
  --fs-body: 1rem;
  --fs-lede: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --fs-h1: clamp(2.75rem, 1.8rem + 3.3vw, 4rem);
  --tr-h1: -.035em; --tr-h2: -.03em; --tr-h3: -.02em;

  /* spacing scale (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --sec: clamp(72px, 9vw, 120px);
  --gutter: clamp(16px, 4vw, 32px);
  --wrap: 1120px;

  /* shape and motion */
  --r1: 4px; --r2: 6px; --r3: 8px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms; --t-med: 360ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--fw-body) var(--fs-body)/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, figure, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
h1, h2, h3 { font-weight: var(--fw-head); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r1); }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: var(--s4); top: -64px; background: var(--fg); color: var(--bg); padding: var(--s2) var(--s4); border-radius: var(--r2); z-index: 100; }
.skip:focus { top: var(--s3); }
.label { font: var(--fw-ui) var(--fs-label)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast); }
.site-header.stuck { background: color-mix(in srgb, var(--bg) 88%, transparent); border-color: var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bar { min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s6); }
.brand { display: inline-flex; align-items: center; min-height: 32px; gap: var(--s2); font-weight: var(--fw-head); font-size: var(--fs-body); letter-spacing: -.01em; }
.brand img { width: 20px; height: auto; }
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s1); margin-left: auto; }
.nav a, .nav .na { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s3); border-radius: var(--r2); font-size: var(--fs-small); font-weight: var(--fw-ui); color: var(--fg-2); transition: color var(--t-fast), background var(--t-fast); }
.nav a:hover { color: var(--fg); background: #ffffff0d; }
.nav a:active { background: #ffffff14; }
.nav .na { color: var(--fg-3); cursor: default; }
.nav .btn { margin-left: var(--s2); color: #fff; }
.nav .btn:hover { color: #fff; background: var(--accent-btn-hover); }
.menu-btn { display: none; margin-left: auto; align-items: center; height: 44px; padding: 0 var(--s4); background: none; border: 1px solid var(--line-2); border-radius: var(--r2); color: var(--fg); font: var(--fw-ui) var(--fs-small)/1 var(--font); cursor: pointer; }
.soon { margin-left: 6px; font: var(--fw-ui) 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); border: 1px solid var(--line-2); border-radius: 99px; padding: 3px 6px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 40px; padding: 0 var(--s4); border-radius: var(--r2); border: 1px solid var(--line-2); background: transparent; color: var(--fg); font: var(--fw-ui) var(--fs-small)/1 var(--font); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.btn:hover { background: #ffffff0d; border-color: #3b414d; }
.btn:active { transform: translateY(1px); background: #ffffff14; }
.btn.primary { background: var(--accent-btn); border-color: #6174e4; color: #fff; }
.btn.primary:hover { background: var(--accent-btn-hover); border-color: #7385ee; }
.btn.sm { height: 32px; padding: 0 var(--s3); }
.btn:disabled { color: var(--fg-3); border-style: dashed; background: none; cursor: not-allowed; }
.btn:disabled:hover { background: none; border-color: var(--line-2); }
.btn:disabled:active { transform: none; }

/* Hero */
.hero { padding: clamp(56px, 8vw, 96px) 0 0; }
.hero h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: var(--tr-h1); margin: var(--s5) 0 var(--s5); }
.hero h1 span { display: block; }
.hero .lede { font-size: var(--fs-lede); color: var(--fg-2); max-width: 34em; text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero .meta { margin-top: var(--s4); font-size: var(--fs-caption); color: var(--fg-3); }
.hero .meta b { color: var(--fg-2); font-weight: var(--fw-ui); }

/* Product frame: one border, no window chrome, restrained shadow */
.frame { position: relative; border: 1px solid var(--line-2); border-radius: var(--r3); background: var(--bg-1); overflow: hidden; box-shadow: 0 24px 48px -28px #000b; }
.frame img { width: 100%; }
.zoom-btn { position: absolute; inset: 0; width: 100%; background: none; border: 0; padding: 0; cursor: zoom-in; border-radius: inherit; }
.zoom-btn::after { content: "Enlarge"; position: absolute; right: var(--s3); bottom: var(--s3); font: var(--fw-ui) var(--fs-label)/1 var(--font); color: var(--fg); background: #0b0c0fcc; border: 1px solid var(--line-2); border-radius: var(--r2); padding: 6px 8px; opacity: 0; transition: opacity var(--t-fast); }
.zoom-btn:hover::after, .zoom-btn:focus-visible::after { opacity: 1; }
.zoom-btn:focus-visible { outline-offset: -2px; }
.hero-shot { margin-top: clamp(40px, 6vw, 72px); }
.hero-shot .frame { border-bottom: 0; border-radius: var(--r3) var(--r3) 0 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 -24px 90px -34px var(--glow-blue), 0 40px 80px -40px #000; }
.hero-shot .frame::before { content: ""; position: absolute; inset: auto 0 0; height: 24%; background: linear-gradient(transparent, var(--bg)); z-index: 1; pointer-events: none; }
.hero-shot .zoom-btn { z-index: 2; }
.caption { margin-top: var(--s3); font-size: var(--fs-caption); color: var(--fg-3); }

/* Sections */
section { padding: var(--sec) 0; }
section + section { border-top: 1px solid var(--line); }
.head { margin-bottom: var(--s8); }
.head h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: var(--tr-h2); margin-top: var(--s3); max-width: 16em; text-wrap: balance; }
.head p { margin-top: var(--s4); color: var(--fg-2); font-size: var(--fs-lede); max-width: 36em; text-wrap: pretty; }

/* Features: one hairline grid, no cards */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; }
.cell { background: var(--bg); padding: var(--s6) var(--s5); }
.cell .label { color: var(--accent); }
.cell h3 { font-size: var(--fs-body); font-weight: var(--fw-ui); letter-spacing: -.01em; margin: var(--s4) 0 var(--s2); }
.cell p { color: var(--fg-2); font-size: var(--fs-small); line-height: 1.65; }

/* Product tour: the interface leads, copy is one sentence */
.tour > article { padding-top: var(--s8); margin-top: var(--s8); border-top: 1px solid var(--line); }
.tour > article:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.tour header { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s6) var(--s7); align-items: end; margin-bottom: var(--s6); }
.tour h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--tr-h3); margin-top: var(--s3); text-wrap: balance; }
.tour header p { color: var(--fg-2); max-width: 34em; text-wrap: pretty; }

/* Steps: open layout with hairlines */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
.step { border-top: 1px solid var(--line-2); padding-top: var(--s5); }
.step .label { color: var(--accent); }
.step h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); margin: var(--s4) 0 var(--s3); }
.step p { color: var(--fg-2); }
.step a { display: inline-flex; align-items: center; min-height: 32px; margin-top: var(--s3); font-size: var(--fs-small); font-weight: var(--fw-ui); color: var(--accent); }
.step a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Pricing: one comparison surface, three columns, aligned rows */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-2); border-radius: var(--r3); overflow: hidden; }
.plan { display: flex; flex-direction: column; padding: var(--s6) var(--s5); }
.plan + .plan { border-left: 1px solid var(--line-2); }
.plan.pro { background: var(--bg-tint); }
@supports (grid-template-rows: subgrid) {
  .plans { grid-template-rows: auto 1fr auto; }
  .plan { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
.plan h3 { display: flex; align-items: center; justify-content: space-between; min-height: 24px; font-size: var(--fs-small); font-weight: var(--fw-ui); color: var(--fg-2); }
.tag { font: var(--fw-ui) 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 99px; padding: 4px 8px; }
.price { margin-top: var(--s4); font-size: 2.5rem; line-height: 1; letter-spacing: -.04em; font-weight: var(--fw-head); font-variant-numeric: tabular-nums; }
.price small { font-size: var(--fs-small); font-weight: var(--fw-body); letter-spacing: 0; color: var(--fg-2); margin-left: 6px; }
.sub { margin: var(--s3) 0 var(--s5); min-height: 3em; font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-3); }
.plan ul { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s5); border-top: 1px solid var(--line); }
.plan li { position: relative; padding-left: 22px; font-size: var(--fs-small); color: var(--fg-2); }
.plan li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 5px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.plan .act { padding-top: var(--s6); }
.plan .btn { width: 100%; }
.notice { margin-top: var(--s5); display: flex; gap: var(--s3); align-items: flex-start; color: var(--fg-2); font-size: var(--fs-small); max-width: 52em; }
.notice::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-top: .6em; }

/* Download */
.dl { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line-2); }
.dl h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); line-height: 1.25; }
.dl p { color: var(--fg-2); margin-top: var(--s3); max-width: 34em; }
.dl .cta { margin-top: var(--s5); }
.facts { display: grid; align-content: start; }
.facts div { display: flex; justify-content: space-between; gap: var(--s5); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.facts div:first-child { padding-top: 0; }
.facts dt { color: var(--fg-3); flex: none; }
.facts dd { color: var(--fg); text-align: right; display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }
.dot.ok { background: var(--ok); }
.mono { font-family: var(--mono); font-size: var(--fs-caption); word-break: break-all; }

/* FAQ */
.faq { max-width: 760px; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s4) 0; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); font-weight: var(--fw-ui); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--fg-3); font: var(--fw-body) 20px/1 var(--mono); transition: transform var(--t-fast); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 var(--s5); color: var(--fg-2); max-width: 38em; }
.faq .a p + p { margin-top: var(--s3); }

/* Footer */
footer { border-top: 1px solid var(--line); padding: var(--s7) 0 var(--s8); }
.foot { display: flex; justify-content: space-between; gap: var(--s7); flex-wrap: wrap; }
.foot p { margin-top: var(--s3); color: var(--fg-3); font-size: var(--fs-caption); max-width: 26em; }
.foot ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); max-width: 620px; }
.foot a, .foot .na { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-small); color: var(--fg-2); }
.foot a:hover { color: var(--fg); }
.foot .na { color: var(--fg-3); cursor: default; }
.foot-note { margin-top: var(--s3); font-size: var(--fs-caption); color: var(--fg-3); max-width: 34em; }

/* Screenshot viewer */
html:has(dialog[open]) { overflow: hidden; }
dialog.lb { padding: 0; border: 1px solid var(--line-2); border-radius: var(--r3); background: var(--bg-1); color: var(--fg); max-width: 96vw; max-height: 94vh; width: auto; overflow: hidden; }
dialog.lb::backdrop { background: #05060acc; }
.lb-body { overflow: auto; scrollbar-gutter: stable; max-height: calc(94vh - 52px); max-width: 96vw; overscroll-behavior: contain; }
.lb-body img { max-width: none; height: auto; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 0 var(--s3) 0 var(--s4); height: 52px; border-bottom: 1px solid var(--line); font-size: var(--fs-caption); color: var(--fg-3); }

/* Entrance motion (only with JS; disabled under reduced motion) */
.js .rv { opacity: 0; transform: translateY(8px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* Tablet */
@media (max-width: 960px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .tour header { grid-template-columns: 1fr; gap: var(--s3); align-items: start; }
  .steps { gap: var(--s6); }
  .dl { grid-template-columns: 1fr; gap: var(--s6); }
  .plans { grid-template-columns: 1fr; grid-template-rows: none; }
  .plan { display: flex; grid-row: auto; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line-2); }
  .sub { min-height: 0; }
}

/* Mobile: a deliberate layout, not a squeezed desktop */
/* Menu breakpoint is separate from the layout breakpoint so the nav never wraps */
@media (max-width: 760px) {
  .bar { flex-wrap: nowrap; height: 56px; }
  .menu-btn { display: inline-flex; }
  .nav { display: flex; visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--t-ui), transform var(--t-ui), visibility 0s linear var(--t-ui); position: absolute; left: 0; right: 0; top: 56px; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--s2) var(--gutter) var(--s4); }
  .nav.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .nav a, .nav .na { height: 48px; padding: 0 var(--s2); font-size: var(--fs-body); border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav .btn { height: 48px; margin: var(--s4) 0 0; justify-content: center; border-radius: var(--r2); border-bottom: 1px solid #6174e4; font-size: var(--fs-body); }
}

@media (max-width: 720px) {
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.75rem); margin: var(--s4) 0 var(--s4); }
  .cta { flex-direction: column; }
  .cta .btn { height: 48px; width: 100%; font-size: var(--fs-body); }
  .hero-shot .frame::before { height: 12%; }
  .hero-shot img, #tour-health img, #tour-review img { aspect-ratio: 1290 / 1620; }
  #tour-approval img { aspect-ratio: 1290 / 1000; }
  .grid { grid-template-columns: 1fr; }
  .cell { padding: var(--s5) var(--s4); }
  .steps { grid-template-columns: 1fr; gap: var(--s6); }
  .tour > article { padding-top: var(--s7); margin-top: var(--s7); }
  .plan { padding: var(--s5) var(--s4); }
  .plan .btn { height: 48px; font-size: var(--fs-body); }
  .zoom-btn::after { opacity: 1; top: var(--s2); right: var(--s2); bottom: auto; }
  .facts div { flex-direction: column; gap: var(--s1); }
  .facts dd { text-align: left; justify-content: flex-start; }
  .foot a, .foot .na { min-height: 44px; }
  .foot .na { min-height: 32px; }
  .step a { min-height: 44px; }
  .brand { min-height: 44px; }
}

@media (max-width: 359px) { .hero h1 { font-size: 1.75rem; } }
main:focus { outline: none; }

/* ===== V2.1: depth, light and a consistent interaction system ===== */

/* Hero: technical grid and light field behind the product (static, no loops) */
.hero { position: relative; isolation: isolate; overflow-x: clip; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero::before { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 56px 56px; background-position: center -1px; -webkit-mask-image: radial-gradient(75% 62% at 50% 0%, #000, transparent 78%); mask-image: radial-gradient(75% 62% at 50% 0%, #000, transparent 78%); }
.hero::after { background: radial-gradient(58% 40% at 50% 68%, var(--glow-blue), transparent 72%), radial-gradient(34% 28% at 90% 60%, var(--glow-teal), transparent 72%), radial-gradient(40% 24% at 12% 4%, rgba(110, 130, 255, .07), transparent 70%); }

/* Hero entrance is pure CSS, so it never depends on JavaScript and never leaves content hidden */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rise-shot { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.enter { animation: rise 560ms var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.enter-shot { animation-name: rise-shot; animation-duration: 760ms; }

/* Product frames: layered edge, active glow for the tour */
.frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, .03), 0 18px 40px -22px #000c; transition: border-color var(--t-ui); }
.frame:has(.zoom-btn:hover) { border-color: #3d4452; }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 var(--hl); z-index: 1; }
.zoom-btn { z-index: 2; }
.hero-shot .frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 -24px 90px -34px var(--glow-blue), 0 40px 80px -40px #000; }
.tour .frame { overflow: visible; }
.tour .frame picture, .tour .frame img { display: block; border-radius: calc(var(--r3) - 1px); }
.tour .frame::before { content: ""; position: absolute; inset: -1px; border-radius: var(--r3); pointer-events: none; box-shadow: 0 0 0 1px rgba(131, 147, 255, .5), 0 30px 80px -34px rgba(110, 130, 255, .45); opacity: 0; transition: opacity 320ms var(--ease); }
.tour article.is-active .frame::before { opacity: 1; }
.js .tour .rv .frame { opacity: 0; transform: translateY(14px) scale(.992); transition: opacity 520ms var(--ease) 80ms, transform 520ms var(--ease) 80ms; }
.js .tour .rv.in .frame { opacity: 1; transform: none; }

/* Section surfaces: three tones, one grid, soft transitions instead of hard seams */
.sec-lit { border-top: 0; background: linear-gradient(var(--bg), transparent 240px), radial-gradient(55% 38% at 14% 0%, var(--glow-teal), transparent 70%), radial-gradient(40% 30% at 92% 100%, rgba(110, 130, 255, .05), transparent 70%), var(--bg-lit); }
.sec-deep { background: linear-gradient(var(--bg-lit), transparent 200px), radial-gradient(50% 20% at 50% 5%, rgba(110, 130, 255, .09), transparent 72%), var(--bg-0); }
.sec-base { background: linear-gradient(var(--bg-0), transparent 200px), var(--bg); }
.sec-grid { position: relative; isolation: isolate; background: linear-gradient(var(--bg), transparent 160px), var(--bg-lit); }
.sec-grid::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }

/* Tour index: real anchors, sticky only when JS can mark it, full-bleed only while stuck */
.tour-sentinel { height: 1px; margin-bottom: -1px; }
.tour-nav { margin-bottom: var(--s7); }
.tour-nav.is-live { position: sticky; top: 56px; z-index: 40; } /* only once the script that styles the stuck state is running */
.tour-nav.is-stuck { background: var(--bg-0); box-shadow: 0 0 0 100vmax var(--bg-0), 0 1px 0 100vmax var(--line); clip-path: inset(0 -100vmax -1px -100vmax); }
.tour-nav ul { display: flex; gap: var(--s5); overflow-x: auto; scrollbar-width: none; }
.tour-nav ul::-webkit-scrollbar { display: none; }
.tour-nav a { position: relative; display: flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: var(--fs-small); font-weight: var(--fw-ui); color: var(--fg-3); transition: color var(--t-ui); }
.tour-nav a:focus-visible { outline-offset: -2px; }
.tour-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform-origin: left; transition: transform 240ms var(--ease); }
.tour-nav a:hover { color: var(--fg); }
.tour-nav a[aria-current="true"] { color: var(--fg); }
.tour-nav a[aria-current="true"]::after { transform: scaleX(1); }
.tour > article { scroll-margin-top: 32px; } /* adds to scroll-padding-top (72px): lands just under the sticky tour bar */

/* Interaction system: one speed, one easing, a readable state for each control */
.btn { transition: background var(--t-ui), border-color var(--t-ui), transform var(--t-ui), box-shadow var(--t-ui), color var(--t-ui); }
.btn:not(.primary):hover { border-color: #454c5a; }
.btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .4); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 20px -10px rgba(77, 97, 214, .9); }
.btn.primary:active { transform: none; background: #4457c4; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.btn:disabled, .btn:disabled:hover, .btn:disabled:active { transform: none; box-shadow: none; transition: none; }
.menu-btn { transition: background var(--t-ui), border-color var(--t-ui); }
.menu-btn[aria-expanded="true"] { background: #ffffff0d; border-color: #3d4452; }
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: -12px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform 240ms var(--ease); }
.nav a:not(.btn)[aria-current="location"] { color: var(--fg); }
.nav a:not(.btn)[aria-current="location"]::after { transform: scaleX(1); }
.faq summary { transition: color var(--t-ui); }
.faq summary:hover { color: #fff; }
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 240ms var(--ease), content-visibility 240ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Pointer light on feature cells and plans (fine pointers only; text stays above it) */
.cell, .plan { position: relative; isolation: isolate; }
.cell::before, .plan::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(131, 147, 255, .10), transparent 70%); transition: opacity 220ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .cell:hover::before, .plan:hover::before { opacity: 1; } }

/* How it works: nodes on the hairline connect the three steps */
.step { position: relative; }
.step::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }

/* Screenshot viewer: short in/out, vignette backdrop */
@keyframes lb-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lb-out { to { opacity: 0; transform: translateY(4px) scale(.99); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
dialog.lb[open] { animation: lb-in 200ms var(--ease); }
dialog.lb::backdrop { background: radial-gradient(60% 50% at 50% 40%, rgba(18, 22, 38, .84), rgba(4, 5, 8, .94)); }
dialog.lb[open]::backdrop { animation: fade-in 200ms ease-out; }
dialog.lb.closing { animation: lb-out 160ms ease-in forwards; }
dialog.lb.closing::backdrop { animation: fade-out 160ms ease-in forwards; }

@media (max-width: 760px) {
  .nav a:not(.btn)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .tour .rv .frame { opacity: 1; transform: none; }
  .btn.primary:hover { transform: none; }
  .cell::before, .plan::before { display: none; }
  .tour-nav a::after, .nav a:not(.btn)::after { transition: none; }
}

/* ===== V3: multi-page product site. Shared layout primitives used by the home page and every product page. ===== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav a[aria-current="page"] { color: var(--fg); }
.nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.soon { font-style: normal; }
code { font: var(--fs-caption) var(--mono); color: var(--fg); background: #ffffff0f; padding: 1px 5px; border-radius: var(--r1); }
.more { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; font-weight: var(--fw-ui); color: var(--accent); }
.more::after { content: "→"; transition: transform var(--t-ui) var(--ease); }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
.more:hover::after { transform: translateX(3px); }
.ticks { margin-top: var(--s5); display: grid; gap: var(--s3); }
.ticks li { position: relative; padding-left: var(--s5); color: var(--fg-2); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent); }
.split-t .more { margin-top: var(--s5); }

/* page heroes: same atmosphere as home, no cropped product frame */
.hero.pg { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); }
.hero.pg h1 { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); max-width: 17em; text-wrap: balance; margin-bottom: var(--s5); }
.hero.pg .cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero.home-hero .cta, .hero .cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.pg-top { border-top: 0 !important; padding-top: 0; }
.pg-stage { padding-bottom: clamp(48px, 7vw, 96px); }
.pg-stage.glow .frame { box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 120px -30px var(--glow-blue), 0 30px 60px -30px #000c; }
.pg-stage.layered { position: relative; }
.pg-stage.layered .lay-b { width: 46%; margin: calc(-1 * clamp(40px, 9vw, 120px)) 0 0 auto; position: relative; z-index: 2; padding-right: var(--s5); }
.pg-stage.layered .lay-b .frame { box-shadow: 0 30px 60px -20px #000; }

/* alternating product showcase */
.show { padding: var(--sec) 0; }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.show.rev .split-t { order: 2; }
.split.tall { align-items: start; }
.split-t h2, .split-t .h3like { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: var(--tr-h2); margin: var(--s3) 0 var(--s4); text-wrap: balance; }
.split-t > p { color: var(--fg-2); font-size: var(--fs-lede); text-wrap: pretty; }
.split-m { min-width: 0; }
.split-m.sticky { position: sticky; top: 88px; }
.show .frame { box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 30px 60px -28px #000d, 0 0 90px -50px var(--glow-blue); }
.intro { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.intro .head { margin: 0; }
.big { font-size: var(--fs-lede); color: var(--fg-2); line-height: 1.65; text-wrap: pretty; }

/* numbered walkthrough */
.walk { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s5); counter-reset: w; }
.walk li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s4); align-items: start; }
.walk .num { font: var(--fw-ui) var(--fs-label)/1 var(--mono); color: var(--accent); border: 1px solid var(--accent-line); border-radius: var(--r2); height: 28px; display: grid; place-items: center; background: #8393ff14; }
.walk h3 { font-size: var(--fs-body); font-weight: var(--fw-ui); letter-spacing: -.01em; }
.walk p { margin-top: var(--s1); color: var(--fg-2); font-size: var(--fs-small); line-height: 1.65; }
.sec-lit .walk, .pg-top .walk { max-width: 44em; }

/* connected workflow */
.flow { list-style: none; margin: var(--s7) 0 var(--s6); padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s5); }
.flow li { position: relative; padding-top: var(--s6); }
.flow li::before { content: ""; position: absolute; top: 7px; left: 0; right: calc(-1 * var(--s5)); height: 2px; background: var(--line-2); }
.flow li:last-child::before { right: 0; }
.flow li::after { content: ""; position: absolute; top: 7px; left: 0; right: calc(-1 * var(--s5)); height: 2px; background: var(--accent); transform-origin: left; transition: transform 700ms var(--ease) calc(var(--i, 0) * 120ms + 150ms); }
.flow li:last-child::after { right: 0; }
.js .flow li:not(.in)::after { transform: scaleX(0); }
.flow .node { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); z-index: 1; box-shadow: 0 0 0 4px var(--bg); }
.flow h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); }
.flow p { margin-top: var(--s2); color: var(--fg-2); font-size: var(--fs-small); line-height: 1.6; }
.flow .tagline { display: inline-block; margin-top: var(--s3); font: var(--fw-ui) var(--fs-label)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.flow.compact h3 { font-size: var(--fs-body); font-weight: var(--fw-ui); }
.flow.compact { margin-bottom: var(--s5); }

/* benefits, callouts, examples */
.bens, .callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s6) var(--s7); }
.bens > div, .callouts > div { border-top: 1px solid var(--line-2); padding-top: var(--s4); }
.bens h3, .callouts h3 { font-size: var(--fs-body); font-weight: var(--fw-ui); letter-spacing: -.01em; margin: var(--s2) 0; }
.bens p, .callouts p { color: var(--fg-2); font-size: var(--fs-small); line-height: 1.65; }
.callouts .label { color: var(--accent); }
.example { max-width: 46em; }
.example h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: var(--tr-h2); margin: var(--s3) 0 var(--s4); text-wrap: balance; }
.example p { color: var(--fg-2); font-size: var(--fs-lede); text-wrap: pretty; }
.example ul { margin-top: var(--s4); display: grid; gap: var(--s2); list-style: disc; padding-left: 1.2em; color: var(--fg-2); }
.scope { margin-top: var(--s5); max-width: 52em; padding-left: var(--s4); border-left: 2px solid var(--line-2); color: var(--fg-3); font-size: var(--fs-small); }
.wrap > .scope, .pg-stage + .scope { margin-left: auto; margin-right: auto; }
.pg-stage + .scope { max-width: calc(var(--wrap)); padding-bottom: var(--s6); margin-top: calc(-1 * var(--s6)); }
.conf { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.conf > div { border-top: 1px solid var(--line-2); padding-top: var(--s4); }
.conf dd { margin-top: var(--s3); color: var(--fg-2); font-size: var(--fs-small); line-height: 1.65; }
.chip { display: inline-block; font: var(--fw-ui) var(--fs-label)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: var(--r1); color: var(--fg-2); }
.chip.ok { color: var(--ok); border-color: #1f5a4c; }
.opgrid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; }
.opgrid li { background: var(--bg); padding: var(--s5); }
.opgrid h3 { font-size: var(--fs-body); font-weight: var(--fw-ui); }
.opgrid p { margin-top: var(--s2); color: var(--fg-2); font-size: var(--fs-small); line-height: 1.65; }
.facts.wide div { flex-direction: row; }
.prose { max-width: 46em; }
.prose h2 { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); margin: var(--s7) 0 var(--s4); }
.prose h2:first-child { margin-top: 0; }
.prose ul { display: grid; gap: var(--s3); list-style: disc; padding-left: 1.2em; color: var(--fg-2); }
.prose p { color: var(--fg-2); }

/* index of pages: a ledger, not a card grid */
.index { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s8); border-top: 1px solid var(--line-2); }
.index li { border-bottom: 1px solid var(--line); }
.index a { display: grid; grid-template-columns: 36px 1fr auto; grid-template-areas: "n t g" ". d d"; gap: var(--s1) var(--s3); padding: var(--s5) var(--s2); align-items: baseline; transition: background var(--t-ui), padding-left 240ms var(--ease); }
.index .label { grid-area: n; color: var(--accent); }
.index b { grid-area: t; font-size: var(--fs-h3); letter-spacing: var(--tr-h3); font-weight: var(--fw-head); }
.index .d { grid-area: d; color: var(--fg-2); font-size: var(--fs-small); max-width: 32em; }
.index .go, .rel .go { grid-area: g; color: var(--fg-3); transition: transform var(--t-ui) var(--ease), color var(--t-ui); }
.index a:hover { background: #ffffff08; padding-left: var(--s4); }
.index a:hover .go, .rel a:hover .go { color: var(--accent); transform: translateX(4px); }
.rel { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s5); }
.rel a { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); padding: var(--s5); border: 1px solid var(--line-2); border-radius: var(--r3); height: 100%; transition: border-color var(--t-ui), background var(--t-ui); }
.rel a:hover { border-color: var(--accent-line); background: #8393ff0a; }
.rel .label { color: var(--accent); grid-column: 1; }
.rel .rt { grid-column: 1; color: var(--fg-2); font-size: var(--fs-small); }
.rel .go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.next { border-top: 1px solid var(--line); padding: var(--s7) 0 var(--sec); }
.next .wrap { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7); align-items: center; justify-content: space-between; }
.next .nt { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); font-weight: var(--fw-head); margin-top: var(--s2); text-wrap: balance; }
.avail { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s8); align-items: center; justify-content: space-between; }
.avail > div:first-child { max-width: 40em; }
.avail h2 { font-size: var(--fs-h2); letter-spacing: var(--tr-h2); margin: var(--s3) 0 var(--s4); }
.avail p:not(.label) { color: var(--fg-2); }
.avail-links { display: flex; flex-wrap: wrap; gap: var(--s3); }
.foot-cols { display: flex; flex-wrap: wrap; gap: var(--s7) var(--s9); }
.foot-cols h2 { font-size: var(--fs-label); margin-bottom: var(--s3); }
.foot-cols ul { display: grid; gap: 0; max-width: none; }

/* entrance and reveal motion: one set of timings for every page */
.walk li.rv, .bens > div.rv, .callouts > div.rv, .rel li.rv, .index li.rv, .conf > div.rv, .opgrid li.rv { transition-delay: calc(var(--i, 0) * 90ms); }
.js .split-m.rv .frame { transition: transform 700ms var(--ease); transform: translateY(14px) scale(.985); }
.js .split-m.rv.in .frame { transform: none; }
.index.big-index b { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
@media (max-width: 960px) {
  .split, .show.rev .split, .intro { grid-template-columns: 1fr; gap: var(--s6); }
  .show.rev .split-t { order: 0; }
  .split-m.sticky { position: static; }
  .flow { grid-template-columns: 1fr; gap: var(--s5); margin-left: var(--s2); }
  .flow li { padding: 0 0 0 var(--s7); }
  .flow li::before, .flow li::after { top: 16px; bottom: calc(-1 * var(--s5)); left: 7px; right: auto; width: 2px; height: auto; }
  .flow li:last-child::before, .flow li:last-child::after { bottom: 0; display: none; }
  .flow li::after { transform-origin: top; }
  .js .flow li:not(.in)::after { transform: scaleY(0); }
  .flow .node { top: 2px; }
  .conf, .opgrid { grid-template-columns: 1fr; }
  .index { grid-template-columns: 1fr; }
  .pg-stage.layered .lay-b { width: 70%; }
}
@media (max-width: 600px) {
  .pg-stage.layered .lay-b { width: 92%; padding-right: 0; margin-top: calc(-1 * var(--s6)); }
  .facts.wide div { flex-direction: column; }
  .foot-cols { gap: var(--s6); }
}
@media (prefers-reduced-motion: reduce) {
  .js .split-m.rv .frame, .js .split-m.rv.in .frame { transform: none; }
  .js .flow li:not(.in)::after { transform: none; }
  .flow li::after { transition: none; }
  .more::after, .index .go, .rel .go { transition: none; }
}
.head > .label, .split-t > .label, .avail .label, .example > .label { font-size: var(--fs-label); margin: 0; max-width: none; color: var(--fg-3); }
.split { grid-template-columns: 4fr 7fr; }
.show.rev .split { grid-template-columns: 7fr 4fr; }
.split.tall { grid-template-columns: 5fr 7fr; }
@media (max-width: 960px) { .split, .split.tall, .show.rev .split { grid-template-columns: 1fr; } }
.facts.wide dt { flex: 0 0 34%; }
.facts.wide dd { text-align: left; justify-content: flex-start; }
@media (max-width: 600px) { .facts.wide dt { flex: none; } }
.example ul.ticks, .prose ul.ticks { list-style: none; padding-left: 0; }
.hero.pg::after { background: radial-gradient(46% 80% at 72% 100%, var(--glow-blue), transparent 72%), radial-gradient(30% 50% at 95% 100%, var(--glow-teal), transparent 70%); }
.hero .label { line-height: 1.5; }
@media (max-width: 600px) { .pg-stage.layered .lay-b { width: 100%; margin-top: var(--s4); } }

/* ===== V4: slower, deliberate motion; larger product stage; interactive preview ===== */
:root { --ease-soft: cubic-bezier(.22, .7, .2, 1); --ease-stage: cubic-bezier(.16, .84, .24, 1); }
[hidden] { display: none !important; }

/* Page entrance: atmosphere first, then type, then the product. Overlap is deliberate (delays are shorter than durations). */
@keyframes v4-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes v4-rise-shot { from { opacity: 0; transform: translateY(36px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes v4-stage { from { opacity: 0; transform: perspective(1800px) translateY(64px) scale(.955) rotateX(4deg); } to { opacity: 1; transform: perspective(1800px) none; } }
@keyframes v4-grid { from { opacity: 0; } to { opacity: 1; } }
@keyframes v4-light { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.enter { animation: v4-rise 1200ms var(--ease-soft) both; animation-delay: calc(var(--i, 0) * 240ms + 300ms); }
.hero .lede.enter, .hero .meta.enter { animation-duration: 1000ms; }
.enter-shot { animation-name: v4-rise-shot; animation-duration: 1500ms; }
.enter-stage { animation: v4-stage 1800ms var(--ease-stage) both; animation-delay: 1500ms; }
.hero::before { animation: v4-grid 1800ms ease-out 200ms both; }
.hero::after { animation: v4-light 2400ms ease-out 100ms both; }

/* Scroll reveals: slower, one personality per kind of content */
.js .rv { transform: translateY(12px); transition: opacity 1000ms var(--ease-soft), transform 1100ms var(--ease-soft); }
.js .split-m.rv { transform: translateY(32px) scale(.975); transition: opacity 1200ms var(--ease-soft), transform 1500ms var(--ease-stage); }
.js .split-m.rv .frame { transform: none; transition: none; }
.js .conf > div.rv, .js .opgrid li.rv, .js .facts .rv { transform: none; transition: opacity 800ms ease; }
.js .rv.in, .js .split-m.rv.in { opacity: 1; transform: none; }
.walk li.rv, .bens > div.rv, .callouts > div.rv, .rel li.rv, .index li.rv, .conf > div.rv, .opgrid li.rv { transition-delay: calc(var(--i, 0) * 120ms); }
.flow li::after { transition-duration: 1100ms; transition-delay: calc(var(--i, 0) * 260ms + 250ms); }

/* Interactive controls stay quick even though the page is calm */
.btn, .more, .index a, .rel a, .stage-tabs button, .hot { transition-duration: 140ms; }

/* ----- product stage ----- */
.home-hero { padding-bottom: clamp(56px, 8vw, 112px); }
.home-hero .meta { margin-top: var(--s4); }
.stage-wrap { position: relative; max-width: 1400px; margin: clamp(32px, 4.5vw, 56px) auto 0; padding: 0 var(--gutter); }
.stage { position: relative; isolation: isolate; }
.stage::before { content: ""; position: absolute; inset: -9% -5% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 46%, rgba(110, 130, 255, .2), transparent 72%), radial-gradient(28% 30% at 90% 70%, var(--glow-teal), transparent 72%), radial-gradient(30% 28% at 8% 30%, rgba(110, 130, 255, .1), transparent 72%); }
.stage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s3); }
.stage-tag { display: inline-flex; align-items: center; gap: var(--s2); font: var(--fw-ui) var(--fs-label)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.dotlive { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #8393ff22; }
.stage-tabs { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.stage-tabs::-webkit-scrollbar { display: none; }
.stage-tabs button { position: relative; flex: none; height: 36px; padding: 0 var(--s4); border: 1px solid transparent; border-radius: var(--r2); background: none; color: var(--fg-2); font: var(--fw-ui) var(--fs-small)/1 var(--font); cursor: pointer; transition-property: color, background, border-color; }
.stage-tabs button:hover { color: var(--fg); background: #ffffff0d; }
.stage-tabs button[aria-selected="true"] { color: #fff; background: #8393ff1f; border-color: var(--accent-line); }
.stage-tabs button:active { background: #ffffff14; }
/* layered plate: bezel, hairline, edge highlight, three soft depth layers */
.stage-plate { position: relative; padding: 8px; border-radius: 16px; border: 1px solid #252a35; background: linear-gradient(180deg, #181b22, #0e1014 45%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .025), 0 2px 5px rgba(0, 0, 0, .35), 0 18px 36px -12px rgba(0, 0, 0, .55), 0 60px 110px -30px rgba(0, 0, 0, .75); }
.stage-plate::after { content: ""; position: absolute; inset: 0 14% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); pointer-events: none; }
.stage-frame { position: relative; border-radius: 9px; overflow: hidden; border: 1px solid #1c2027; background: #0f1115; }
.views { display: grid; }
.view { grid-area: 1 / 1; position: relative; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 420ms ease, visibility 0s linear 420ms; }
.view.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.view img { width: 100%; height: auto; display: block; }
.hots { position: absolute; inset: 0; pointer-events: none; }
.hot { position: absolute; pointer-events: auto; cursor: pointer; border-radius: 6px; transition-property: background, box-shadow; }
.hot:hover { background: rgba(131, 147, 255, .13); box-shadow: inset 0 0 0 1px rgba(131, 147, 255, .6); }
.hot:active { background: rgba(131, 147, 255, .22); }
.stage-note { position: absolute; left: 19%; bottom: 5%; z-index: 4; display: flex; gap: var(--s4); align-items: flex-start; max-width: min(460px, 60%); padding: var(--s4) var(--s5); border: 1px solid var(--line-2); border-radius: var(--r3); background: rgba(15, 17, 21, .96); box-shadow: 0 20px 50px -20px #000; animation: v4-rise 420ms var(--ease-soft) both; }
.stage-note .nt-title { font-size: var(--fs-small); font-weight: var(--fw-ui); color: var(--fg); }
.stage-note .nt-body { margin-top: var(--s1); color: var(--fg-2); font-size: var(--fs-caption); line-height: 1.6; }
.stage-dialog { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: var(--s4); }
.sd-back { position: absolute; inset: 0; background: rgba(5, 6, 10, .68); }
.stage-dialog.is-open .sd-back { animation: v4-grid 300ms ease both; }
.sd-card { position: relative; width: min(760px, 100%); max-height: 100%; overflow: auto; border: 1px solid var(--line-2); border-radius: 10px; background: #0f1115; box-shadow: 0 30px 80px -20px #000; }
.stage-dialog.is-open .sd-card { animation: v4-rise 420ms var(--ease-soft) both; }
.sd-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-bottom: 1px solid var(--line); font-size: var(--fs-caption); color: var(--fg-2); }
.sd-note { padding: var(--s3) var(--s4); font-size: var(--fs-caption); color: var(--fg-3); border-top: 1px solid var(--line); }
.stage-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-top: var(--s4); }
.stage-cap { color: var(--fg-2); font-size: var(--fs-small); max-width: 46em; }
.stage-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

@media (max-width: 720px) {
  .stage-plate { padding: 5px; border-radius: 12px; }
  .stage-frame { border-radius: 8px; }
  .hots { display: none; }
  .stage-tabs button { height: 44px; }
  .stage-note { position: static; max-width: none; margin: var(--s3); animation: none; }
  .stage-actions .btn { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .view, .view.is-on { transition: none; }
  .stage-note, .stage-dialog.is-open .sd-card, .stage-dialog.is-open .sd-back { animation: none; }
  .js .split-m.rv { transform: none; }
}
/* Home hero: copy sits beside the headline on wide screens so the product starts higher */
.home-hero { padding-top: clamp(40px, 5.5vw, 72px); }
.home-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "label label" "h1 lede" "h1 meta"; column-gap: clamp(32px, 6vw, 96px); }
.home-hero .label { grid-area: label; }
.home-hero h1 { grid-area: h1; margin: var(--s4) 0 0; }
.home-hero .lede { grid-area: lede; align-self: end; margin-top: var(--s4); max-width: 30em; }
.home-hero .meta { grid-area: meta; align-self: start; }
@media (max-width: 960px) {
  .home-hero .wrap { display: block; }
  .home-hero h1 { margin: var(--s5) 0; }
}
@media (min-width: 961px) {
  .home-hero .wrap { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); }
  .home-hero h1 span { white-space: nowrap; }
}
.stage-note[data-at="map"] { top: 22%; bottom: auto; }

/* ===== V4 final: first-screen composition. Tighter hero block so the product starts higher; sizes of the stage are unchanged. ===== */
@media (min-width: 961px) {
  .home-hero { padding-top: clamp(28px, 3.4vw, 48px); }
  .home-hero h1 { margin-top: var(--s3); }
  .home-hero .lede { font-size: 1.0625rem; line-height: 1.55; max-width: 31em; margin-top: var(--s3); }
  .home-hero .meta { margin-top: var(--s2); }
  .home-hero .stage-wrap { margin-top: clamp(20px, 2.2vw, 30px); }
  .home-hero .stage-head { margin-bottom: var(--s2); }
}
@media (min-width: 961px) and (max-height: 800px) {
  .home-hero h1 { font-size: 3.25rem; }
  .home-hero { padding-top: 24px; }
}


/* ===== V4.1: scroll motion. One system, a few kinds of content. Supersedes the earlier reveal rules above. =====
   Entrance of the hero (.enter) is untouched. Durations: headings 650 ms, copy 600 ms, product images 800 to 1000 ms,
   dense information 500 ms (fade only), groups 600 ms, workflow 700 ms per line segment. Small travel (8 to 26 px). */
:root { --ease-text: cubic-bezier(.25, .6, .3, 1); --ease-media: cubic-bezier(.16, .84, .24, 1); }

/* base: a block that moves as a whole (examples, next-step strip, grouped links, the page index) */
.js .rv { opacity: 0; transform: translateY(10px);
  transition: opacity 600ms var(--ease-text) var(--d, 0ms), transform 650ms var(--ease-text) var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }

/* headings and text columns: the container stays put, its parts follow one another (label+title, then copy, then lists/links) */
.js .head.rv, .js .split-t.rv { opacity: 1; transform: none; transition: none; }
.js .head.rv > *, .js .split-t.rv > :not(.walk) { opacity: 0; transform: translateY(10px);
  transition: opacity 650ms var(--ease-text) calc(var(--k, 0) * 110ms), transform 700ms var(--ease-text) calc(var(--k, 0) * 110ms); }
.js .head.rv > p:not(.label), .js .split-t.rv > p:not(.label) { --k: 1; }
.js .split-t.rv > ul, .js .split-t.rv > a { --k: 2; }
.js .head.rv.in > *, .js .split-t.rv.in > :not(.walk) { opacity: 1; transform: none; }

/* product images: gentle rise with a restrained scale; opacity settles first, position last */
.js .split-m.rv { opacity: 0; transform: translateY(26px) scale(.985);
  transition: opacity 800ms var(--ease-media), transform 1000ms var(--ease-media); }
.js .split-m.rv.in { opacity: 1; transform: none; }
.js .split-m.rv .frame { transform: none; transition: none; }

/* small related groups: a short stagger, kept close together */
.walk li.rv, .bens > div.rv, .callouts > div.rv { --d: calc(var(--i, 0) * 80ms); }
.rel.rv, .index.rv { transition-duration: 600ms, 650ms; }

/* dense information: no travel, quick fade, so it can be read straight away */
.js .conf > div.rv, .js .opgrid li.rv, .js .facts .rv { transform: none; transition: opacity 500ms ease var(--d, 0ms); --d: calc(var(--i, 0) * 60ms); }

/* workflow: steps and the connecting line come in as one sequence (about 1.2 s end to end) */
.js .flow li.rv { --d: calc(var(--i, 0) * 110ms); }
.flow li::after { transition: transform 700ms var(--ease-text) calc(var(--i, 0) * 110ms + 100ms); }

/* a block that was already passed when it was first seen appears without animating */
.js .rv.jump, .js .rv.jump > *, .js .rv.jump::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv > *, .js .head.rv > *, .js .split-t.rv > :not(.walk), .js .split-m.rv, .js .conf > div.rv, .js .opgrid li.rv {
    opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .flow li:not(.in)::after { transform: none !important; }
  .flow li::after { transition: none !important; }
}

/* ===== V5: Log in / Sign up and the Progress page ===== */
/* header: account links sit apart from the page links */
.nav-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 var(--s2); }
.nav .btn.sm:not(.primary) { height: 32px; color: var(--fg); }
.nav .btn.sm:not(.primary):hover { color: #fff; background: #ffffff0d; }
@media (max-width: 760px) {
  .nav-sep { display: none; }
  .nav .btn.sm:not(.primary) { height: 48px; margin: var(--s4) 0 0; border-bottom-color: var(--line-2); font-size: var(--fs-body); }
}
.dl-progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--fg-2); font-size: var(--fs-small); }

/* ----- auth ----- */
.auth-sec { padding: clamp(40px, 6vw, 88px) 0 var(--sec); }
.auth { display: grid; grid-template-columns: 5fr 5fr; gap: clamp(32px, 7vw, 112px); align-items: start; }
.auth-copy h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); line-height: 1.08; letter-spacing: var(--tr-h1); margin: var(--s4) 0 var(--s4); text-wrap: balance; }
.auth-copy .lede { font-size: var(--fs-lede); color: var(--fg-2); text-wrap: pretty; max-width: 28em; }
.auth-copy .ticks { margin-top: var(--s6); }
.ticks.small li { font-size: var(--fs-small); }
.ticks a, .alt a { color: var(--accent); }
.ticks a:hover, .alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-card { position: relative; padding: var(--s6); border: 1px solid #252a35; border-radius: 14px; background: linear-gradient(180deg, #14171d, #0e1014); box-shadow: 0 0 0 1px rgba(255,255,255,.025), 0 2px 5px rgba(0,0,0,.35), 0 30px 70px -30px rgba(0,0,0,.8); max-width: 480px; width: 100%; }
.card-h { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); margin-bottom: var(--s5); }
.auth-note { margin-bottom: var(--s5); padding: var(--s3) var(--s4); border: 1px solid #5a4a22; border-radius: var(--r2); background: #e2a23b12; color: var(--fg); font-size: var(--fs-small); line-height: 1.55; }
.auth-note strong { color: var(--warn); font-weight: var(--fw-ui); }
.auth-form { display: grid; gap: var(--s5); }
.auth-form .card-h { margin-bottom: 0; }
.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--fs-small); font-weight: var(--fw-ui); color: var(--fg); }
.field input { width: 100%; height: 44px; padding: 0 var(--s4); border: 1px solid var(--line-2); border-radius: var(--r2); background: #0a0b0e; color: var(--fg); font: var(--fw-body) var(--fs-body)/1 var(--font); transition: border-color var(--t-ui), box-shadow var(--t-ui); }
.field input:hover { border-color: #3b414d; }
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: #e5726a; }
.pwrow { position: relative; }
.pwrow input { padding-right: 52px; }
.pwtoggle { position: absolute; right: 2px; top: 2px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r2); background: none; color: var(--fg-2); cursor: pointer; transition: color var(--t-ui), background var(--t-ui); }
.pwtoggle:hover { color: var(--fg); background: #ffffff0d; }
.pwtoggle[aria-pressed="true"] { color: var(--accent); }
.pwtoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hint { color: var(--fg-3); font-size: var(--fs-caption); }
.hint:empty { display: none; }
.ferr { color: #ff9a92; font-size: var(--fs-caption); }
.btn.wide { width: 100%; height: 46px; }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.alert, .status { padding: var(--s3) var(--s4); border-radius: var(--r2); font-size: var(--fs-small); line-height: 1.5; }
.alert { border: 1px solid #6b2f2b; background: #e5726a14; color: #ffb4ad; }
.status { border: 1px solid var(--line-2); background: #ffffff08; color: var(--fg); }
.alt { text-align: center; color: var(--fg-2); font-size: var(--fs-small); }
.auth-signed { display: grid; gap: var(--s4); justify-items: start; }
.auth-signed .card-h { margin: 0; }
.small { font-size: var(--fs-small); color: var(--fg-2); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-card { padding: var(--s5); } }

/* ----- progress ----- */
.prog-top { padding: 0 0 var(--sec); }
.snap { margin-top: var(--s6); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s8); align-items: start; padding-top: var(--s6); border-top: 1px solid var(--line-2); }
.asof .date { font-size: var(--fs-h2); letter-spacing: var(--tr-h2); font-weight: var(--fw-head); margin-top: var(--s2); }
.asof .label { color: var(--fg-3); }
.stale { margin-top: var(--s4); padding: var(--s3) var(--s4); border: 1px solid #5a4a22; border-radius: var(--r2); background: #e2a23b12; color: var(--fg); font-size: var(--fs-small); }
.legend { list-style: none; padding: 0; margin-top: var(--s7); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3) var(--s5); }
.legend li { display: grid; gap: var(--s2); justify-items: start; color: var(--fg-3); font-size: var(--fs-caption); }
.chip.st-implemented { color: var(--ok); border-color: #1f5a4c; }
.chip.st-tested { color: var(--ok); border-color: #1f5a4c; background: #3fc9a812; }
.chip.st-planned { color: var(--accent); border-color: var(--accent-line); }
.chip.st-blocked { color: var(--warn); border-color: #5a4a22; background: #e2a23b0f; }
.chip.st-not-verified { color: var(--fg-2); border-style: dashed; }
.chip.st-limitation { color: var(--fg); border-color: #3b414d; }
.ledger { list-style: none; padding: 0; border-top: 1px solid var(--line-2); }
.ledger li { display: grid; gap: var(--s2); padding: var(--s5) 0; border-bottom: 1px solid var(--line); max-width: 52em; }
.lt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); justify-content: space-between; }
.lt h3 { font-size: var(--fs-body); font-weight: var(--fw-ui); letter-spacing: -.01em; }
.ledger p { color: var(--fg-2); font-size: var(--fs-small); line-height: 1.65; }
.ledger .ev { color: var(--fg-3); font-size: var(--fs-caption); }
.ledger .ev span { font: var(--fw-ui) var(--fs-label)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-right: var(--s2); }
.evid-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); }
.evid-cols h3 { font-size: var(--fs-body); font-weight: var(--fw-ui); margin-bottom: var(--s3); }
.evid-links { margin-top: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
@media (max-width: 860px) { .snap, .evid-cols { grid-template-columns: 1fr; gap: var(--s6); } }
/* dense lists: fade only, so they can be read straight away */
.js .ledger.rv, .js .evid-cols.rv { transform: none; transition: opacity 500ms ease; }
@media (prefers-reduced-motion: reduce) { .js .ledger.rv, .js .evid-cols.rv { opacity: 1 !important; transition: none !important; } .field input, .pwtoggle { transition: none; } }

.jump { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s5); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); }
.jump .label { color: var(--fg-3); margin-right: var(--s2); }
.jump a { display: inline-flex; align-items: center; min-height: 36px; color: var(--fg-2); font-size: var(--fs-small); transition: color var(--t-ui); }
.jump a:hover { color: var(--fg); }
.prog-top { padding-bottom: var(--s9); }

/* ===== Highlights carousel (home) ===== */
.car { margin-top: var(--s7); }
.car-bar { display: none; }
.car.is-live .car-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.car-tabs { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.car-tabs::-webkit-scrollbar { display: none; }
.car-tabs button { flex: none; height: 40px; padding: 0 var(--s4); border: 1px solid transparent; border-radius: var(--r2); background: none; color: var(--fg-2); font: var(--fw-ui) var(--fs-small)/1 var(--font); cursor: pointer; transition: color var(--t-ui), background var(--t-ui), border-color var(--t-ui); }
.car-tabs button:hover { color: var(--fg); background: #ffffff0d; }
.car-tabs button[aria-selected="true"] { color: #fff; background: #8393ff1f; border-color: var(--accent-line); }
.car-ctl { display: flex; align-items: center; gap: var(--s2); flex: none; }
.car-count { min-width: 3.5em; text-align: right; margin-right: var(--s2); font: var(--fw-ui) var(--fs-caption)/1 var(--mono); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.car-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--bg-1); color: var(--fg); cursor: pointer; transition: background var(--t-ui), border-color var(--t-ui); }
.car-btn:hover { background: #ffffff10; border-color: var(--accent-line); }
.car-btn:active { background: #ffffff18; }
.car-slide { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6) var(--s7); align-items: center; }
.car-slide + .car-slide { margin-top: var(--s8); }
.car-copy .label { margin-bottom: var(--s3); display: block; }
.car-copy h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--tr-h3); text-wrap: balance; }
.car-copy p:not(.label) { color: var(--fg-2); margin-top: var(--s3); text-wrap: pretty; }
.car-copy .more { display: inline-block; margin-top: var(--s5); }
.car-shot { margin: 0; }
.car-shot img { width: 100%; height: auto; aspect-ratio: 2160 / 1350; }
.car .caption { margin-top: var(--s5); }
/* live: slides share one grid cell; only the active one is visible */
.car.is-live .car-track { display: grid; }
.car.is-live .car-slide { grid-area: 1 / 1; margin-top: 0; opacity: 0; visibility: hidden; transition: opacity 360ms ease, visibility 0s linear 360ms; }
.car.is-live .car-slide.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (max-width: 900px) {
  .car-slide { grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
  .car-shot { order: -1; }
}
@media (max-width: 720px) {
  .car { margin-top: var(--s6); }
  .car.is-live .car-bar { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .car-ctl { justify-content: flex-end; }
  .car-shot img { aspect-ratio: 1290 / 1620; }
  .car-copy .more { margin-top: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .car.is-live .car-slide, .car.is-live .car-slide.is-on { transition: none; }
  .car-tabs button, .car-btn { transition: none; }
}

/* ----- auth: code step, secondary actions ----- */
.auth-card [hidden] { display: none !important; }
.alt-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.linkbtn { padding: 0; min-height: 44px; border: 0; background: none; color: var(--accent); font: var(--fw-ui) var(--fs-small)/1.3 var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--fg); }
.linkbtn:disabled { color: var(--fg-3); cursor: default; text-decoration: none; }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r1); }
.auth-form .small { color: var(--fg-2); }
.auth-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.auth-form.is-busy input { opacity: .7; }
.auth-warn { margin: 0; }

/* Account page */
.acct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: var(--s8, 56px); align-items: start; }
.acct-card { max-width: 560px; }
.acct-sec { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid #252a35; }
.acct-sec:first-of-type { margin-top: var(--s4); }
.acct-dl { display: grid; gap: 8px; margin: 0 0 var(--s3); }
.acct-dl > div { display: flex; justify-content: space-between; gap: var(--s4); }
.acct-dl dt { color: var(--mute, #9aa5ab); }
.acct-dl dd { margin: 0; font-weight: 600; text-align: right; }
.acct-danger summary { cursor: pointer; color: #f87171; font-weight: 600; }
.acct-danger[open] summary { margin-bottom: var(--s3); }
.btn.danger { background: #b42318; border-color: #b42318; color: #fff; }
.btn.danger:hover { background: #d92d20; }
.acct-card [hidden] { display: none !important; }
@media (max-width: 860px) { .acct { grid-template-columns: 1fr; } }

/* V7: three-tier pricing, comparison table, release stages, progress dashboard */
.proposed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s6); color: var(--fg-2); font-size: var(--fs-small); }
.plans3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); align-items: stretch; }
.plan3 { display: flex; flex-direction: column; padding: var(--s6) var(--s5); border: 1px solid var(--line-2); border-radius: var(--r3); background: var(--bg-1); position: relative; }
.plan3.pro { background: var(--bg-tint); border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), 0 24px 60px -30px var(--glow-blue); }
.plan3 h3 { display: flex; align-items: center; justify-content: space-between; min-height: 24px; font-size: var(--fs-small); font-weight: var(--fw-ui); color: var(--fg-2); }
.plan3 .ph { min-height: 13.5rem; }
.plan3 .price.custom { font-size: 1.75rem; line-height: 1.3; }
.plan3 .alt { margin-top: var(--s3); font-size: var(--fs-small); color: var(--fg-2); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.save { font: var(--fw-ui) 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ok); border: 1px solid #1f5a4c; border-radius: 99px; padding: 4px 8px; }
.plan3 .sub { min-height: 0; margin-bottom: var(--s5); }
.plan3 ul { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s5); border-top: 1px solid var(--line); flex: 1; }
.plan3 li { position: relative; padding-left: 22px; font-size: var(--fs-small); color: var(--fg-2); }
.plan3 li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 5px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.plan3 li.inh { color: var(--fg); font-weight: var(--fw-ui); }
.plan3 .sm { color: var(--fg-3); font-size: var(--fs-caption); }
.plan3 .act { padding-top: var(--s6); }
.plan3 .btn { width: 100%; }
.cmp-h { margin-top: var(--s9); font-size: var(--fs-h3); letter-spacing: var(--tr-h3); }
.cmp-wrap { margin-top: var(--s5); border: 1px solid var(--line-2); border-radius: var(--r3); overflow: hidden; }
.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.cmp th, .cmp td { padding: var(--s4) var(--s4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font: var(--fw-ui) var(--fs-label)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); background: var(--bg-1); }
.cmp tbody th { font-weight: var(--fw-ui); color: var(--fg); width: 34%; }
.cmp tbody th small { display: block; margin-top: 2px; font-weight: var(--fw-body); font-size: var(--fs-caption); color: var(--fg-3); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp td { color: var(--fg-2); }
.cmp .yes { color: var(--ok); font-size: 0; }
.cmp .yes::before { content: ""; display: inline-block; width: 11px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.cmp .no { color: var(--fg-3); font-size: 0; }
.cmp .no::before { content: "\2013"; font-size: var(--fs-small); }
.cmp .chip { white-space: nowrap; }
.stages { list-style: none; padding: 0; margin: 0 0 var(--s7); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); counter-reset: none; }
.stages li { display: grid; gap: var(--s2); align-content: start; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r2); color: var(--fg-3); font-size: var(--fs-caption); line-height: 1.5; }
.stages .n { font: var(--fw-ui) var(--fs-label)/1 var(--mono); color: var(--fg-3); }
.stages b { font-weight: var(--fw-ui); font-size: var(--fs-small); color: var(--fg-2); }
.stages li.past { border-color: #1f5a4c; }
.stages li.past b, .stages li.past .n { color: var(--ok); }
.stages li.now { border-color: var(--accent-line); background: var(--bg-tint); box-shadow: 0 0 0 1px var(--accent-line); }
.stages li.now b { color: var(--fg); }
.stages li.now .n { color: var(--accent); }
.dl .small { font-size: var(--fs-caption); color: var(--fg-3); }
.btn[disabled] { cursor: not-allowed; }
@media (max-width: 960px) { .plans3 { grid-template-columns: 1fr; } .plan3 .ph { min-height: 0; } .plan3.pro { order: -1; } .stages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .cmp-wrap { border: 0; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tbody tr { border: 1px solid var(--line-2); border-radius: var(--r2); margin-bottom: var(--s3); padding: var(--s2) 0; }
  .cmp tbody th { width: auto; border: 0; padding-bottom: var(--s2); }
  .cmp td { display: flex; justify-content: space-between; gap: var(--s4); border: 0; padding: var(--s2) var(--s4); }
  .cmp td::before { content: attr(data-plan); color: var(--fg-3); }
}
@media (max-width: 520px) { .stages { grid-template-columns: 1fr; } }
.cmp thead th:nth-child(n+2), .cmp tbody td { width: 16%; }

/* Progress: short qualitative launch status. All motion is transform/opacity only, in one timeline (see V8). */
:root { --teal: #1fa38d; --teal-deep: #137a6a; --teal-glow: rgba(31, 163, 141, .35); }
.launch { padding: 0 0 var(--sec); }
.launch .wrap { display: grid; gap: var(--s6); }
.launch .wrap > * { max-width: 56rem; }
.stagepill { display: inline-flex; align-items: center; gap: var(--s3); justify-self: start; padding: 8px 14px; border: 1px solid #1d5f55; border-radius: 99px; background: rgba(31, 163, 141, .08); color: var(--fg); font-size: var(--fs-small); font-weight: var(--fw-ui); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--teal); opacity: .5; animation: ring 3s var(--ease-smooth) 1.8s infinite; }
.ltrack { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); height: 10px; }
.lseg { position: relative; overflow: hidden; border-radius: 99px; background: var(--line-2); }
.lseg.complete::after, .lseg.now::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left; animation: fill 600ms linear both; animation-delay: calc(500ms + var(--i) * 600ms); }   /* back to back at constant speed: reads as ONE continuous sweep across the three segments */
.lseg.complete::after { background: linear-gradient(90deg, var(--teal-deep), var(--teal)); }
.lseg.now::after { background: linear-gradient(90deg, var(--teal-deep), var(--teal)); opacity: .55; }
.lseg.now::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); transform: translateX(-100%); animation: sheen 3.4s cubic-bezier(.45, 0, .55, 1) 2.6s infinite; z-index: 1; }
.miles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.miles li { display: grid; gap: var(--s2); padding-top: var(--s2); animation: settle 700ms var(--ease-smooth) both; animation-delay: calc(500ms + var(--i) * 600ms); }
.miles b { font-size: var(--fs-body); font-weight: var(--fw-ui); color: var(--fg); }
.miles .state { font: var(--fw-ui) var(--fs-label)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.miles li.complete .state { color: var(--teal); }
.miles li.now .state { color: #5fd3bf; }
.miles li.up b { color: var(--fg-2); }
.launch .snap { display: block; margin: 0; padding: 0; border: 0; }
.launch .asof { font-size: var(--fs-caption); color: var(--fg-3); }
.launch .stale { margin-top: var(--s2); font-size: var(--fs-caption); color: var(--warn); }
.launch-links { display: flex; flex-wrap: wrap; gap: var(--s5); }
@media (max-width: 560px) { .miles { grid-template-columns: 1fr; } .ltrack { height: 8px; } }
.launch .stagepill, .launch .snap, .launch-links { animation: settle 900ms var(--ease-smooth) both; }
.launch .stagepill { animation-delay: 380ms; }
.launch .snap, .launch-links { animation-delay: 1700ms; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sheen { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(260%); } }
@keyframes ring { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(3); opacity: 0; } }
@keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lseg::before, .lseg::after, .miles li, .pulse::after, .launch .stagepill, .launch .snap, .launch-links { animation: none !important; } }

/* ===== V8: smooth motion. One easing, compositor-only properties, no stacked delays. Loaded last so it wins over V2.1/V4/V4.1. ===== */
:root { --ease-smooth: cubic-bezier(.22, .61, .36, 1); }

/* Page entrance: a single quick cascade instead of 300 ms + 240 ms per line at 1.2 s each */
.enter { animation: v8-rise 900ms var(--ease-smooth) both; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
.hero .lede.enter, .hero .meta.enter { animation-duration: 900ms; }
@keyframes v8-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* the product stage: no 3D tilt (it forced a perspective repaint of a very large image) */
@keyframes v8-stage { from { opacity: 0; transform: translateY(32px) scale(.98); } to { opacity: 1; transform: none; } }
.enter-stage { animation: v8-stage 1300ms var(--ease-smooth) both; animation-delay: 700ms; will-change: transform, opacity; }
.hero::before { animation-duration: 1400ms; animation-delay: 100ms; }
.hero::after { animation-duration: 1800ms; animation-delay: 0s; animation-timing-function: var(--ease-smooth); }

/* Scroll reveals: same easing, less travel, shorter, no waiting for a long fade */
.js .rv { transform: translateY(12px); transition: opacity 700ms var(--ease-smooth) var(--d, 0ms), transform 800ms var(--ease-smooth) var(--d, 0ms); }
.js .head.rv > *, .js .split-t.rv > :not(.walk) { transform: translateY(12px); transition: opacity 700ms var(--ease-smooth) calc(var(--k, 0) * 90ms), transform 800ms var(--ease-smooth) calc(var(--k, 0) * 90ms); }
.js .split-m.rv { transform: translateY(20px); transition: opacity 800ms var(--ease-smooth), transform 900ms var(--ease-smooth); will-change: transform, opacity; }
.js .rv.in, .js .split-m.rv.in, .js .head.rv.in > *, .js .split-t.rv.in > :not(.walk) { opacity: 1; transform: none; }
.js .conf > div.rv, .js .opgrid li.rv, .js .facts .rv { transition: opacity 600ms var(--ease-smooth) var(--d, 0ms); }
.walk li.rv, .bens > div.rv, .callouts > div.rv, .rel li.rv, .index li.rv { --d: calc(var(--i, 0) * 70ms); transition-delay: var(--d), var(--d); }

/* Workflow ("Nothing changes until you approve it"): one continuous left-to-right sweep. Each line segment starts as the
   previous one ends (linear, same speed), and each step's node and text arrive just as the line reaches them. */
.js .flow li.rv { --step: 380ms; --d: calc(var(--i, 0) * var(--step)); transform: none; transition: opacity 650ms var(--ease-smooth) calc(var(--d) + 120ms); }
.js .flow li.rv > * { transition: transform 750ms var(--ease-smooth) calc(var(--d) + 120ms); }
.js .flow li:not(.in) > :not(.node) { transform: translateY(8px); }
.flow li::after { transition: transform var(--step, 380ms) linear calc(var(--i, 0) * var(--step, 380ms) + 200ms); }
.flow .node { transition: transform 500ms var(--ease-smooth) calc(var(--i, 0) * var(--step, 380ms)), opacity 400ms ease calc(var(--i, 0) * var(--step, 380ms)); }
.js .flow li:not(.in) .node { transform: scale(.4); opacity: 0; }
.flow li::after { will-change: transform; }
@media (max-width: 960px) {
  /* one column: each step is revealed on its own as it scrolls in, so no cross-step delay */
  .js .flow li.rv { --d: 0ms; }
  .flow li::after, .flow .node { transition-delay: 0ms; }
  .flow li::after { transition-duration: 500ms; }
}
@media (prefers-reduced-motion: reduce) {
  .enter, .enter-stage, .hero::before, .hero::after { animation: none !important; }
  .js .flow li:not(.in) > *, .js .flow li:not(.in) .node { transform: none !important; opacity: 1 !important; }
  .js .rv, .js .rv > * { transition: none !important; }
}