/* Abrasor website concept: shared design system.
   Dark page (precision equipment) with deliberate bright panels. One accent: Abrasor teal.
   Radius scale: media and panels 18px, buttons and inputs 12px, chips full, bright panels 36px.
   Motion: transform and opacity only (individual translate / scale / rotate for scroll depth), reduced motion respected. */

/* ── Tokens and base ─────────────────────────────────────────────── */
:root {
  --bg: #08090a;
  --bg-2: #0c0e0f;
  --panel: #111415;
  --panel-2: #161a1b;
  --line: rgba(238, 243, 243, .08);
  --line-2: rgba(238, 243, 243, .14);
  --ink: #eef3f3;
  --muted: #95a0a2;
  --dim: #66716f;
  --teal: #42c1c8;
  --teal-ink: #051a1c;
  --teal-soft: rgba(66, 193, 200, .12);
  --paper: #edf2f2;
  --paper-ink: #0a0d0e;
  --paper-muted: #4c5759;
  --paper-line: rgba(10, 13, 14, .1);
  --teal-deep: #0d7a81;
  --danger: #f06a5e;
  --warn: #e3a43b;
  --r-lg: 18px;
  --r-md: 12px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --nav-h: 68px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 24px; }
@media (max-width: 767px) { .wrap { padding-inline: 16px; } }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--teal); color: var(--teal-ink); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }

/* Film grain on a fixed layer only (never on scrolling content) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The page light: a fixed layer that travels with the scroll */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient i { position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(66, 193, 200, .2), rgba(66, 193, 200, .06) 45%, transparent 70%); }
.ambient .a1 { left: 30vw; top: -38vmax; }
.ambient .a2 { left: -45vmax; top: 55vh; opacity: .55; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; cursor: pointer;
  height: 48px; padding: 0 22px; border-radius: var(--r-md); font-weight: 600; font-size: 15px; border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--teal); color: var(--teal-ink); }
.btn-primary:hover { background: #5fd0d6; }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: rgba(238, 243, 243, .02); }
.btn-ghost:hover { border-color: rgba(238, 243, 243, .3); background: rgba(238, 243, 243, .05); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn i { font-size: 18px; transition: transform .2s var(--ease); }
.btn:hover i.ph-arrow-right { transform: translateX(3px); }
.btn[disabled] { opacity: .5; cursor: default; }
.link { color: var(--teal); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.link i { transition: transform .2s var(--ease); }
.link:hover i { transform: translateX(3px); }

/* ── Navigation ───────────────────────────────────────────────────── */
/* Opaque: Safari on iOS 26 no longer reads theme-color and paints the status bar area with the colour of the bar
   held at the top. A see-through bar lets the page show through above it. */
.nav {
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent;
  background: var(--bg); transition: border-color .3s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { height: var(--nav-h); display: flex; align-items: center; gap: 36px; }
.nav .logo { display: flex; align-items: center; min-height: 44px; }
.nav .logo img { height: 24px; width: auto; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--muted); }
.nav ul a { transition: color .2s ease; position: relative; }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--ink); }
.nav ul a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -23px; height: 2px; background: var(--teal); border-radius: 2px; }
.nav .end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); place-items: center; cursor: pointer; font-size: 20px; }
@media (max-width: 1080px) { .nav ul { display: none; } .menu-btn { display: grid; } }
/* Mobile menu: a full-height sheet under the bar */
.menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; background: rgba(8, 9, 10, .97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 24px 16px 40px; overflow-y: auto; display: none; }
.menu.open { display: block; }
@media (prefers-reduced-motion: no-preference) { .menu.open { animation: rise .35s var(--ease) both; } }
.menu a:not(.btn) { display: flex; align-items: center; justify-content: space-between; padding: 18px 8px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; border-bottom: 1px solid var(--line); }
.menu a:not(.btn) i { color: var(--muted); font-size: 18px; }
.menu a[aria-current="page"] { color: var(--teal); }
.menu .btn { margin-top: 28px; width: 100%; }

/* ── Shared type and sections ─────────────────────────────────────── */
section.block { padding-block: 128px; }
@media (max-width: 767px) { section.block { padding-block: 88px; } }
.h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -.035em; font-weight: 600; margin: 0; text-wrap: balance; }
.h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin: 0; }
.sub { color: var(--muted); font-size: 18px; max-width: 56ch; margin: 18px 0 0; text-wrap: pretty; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0 0 18px; }
.muted { color: var(--muted); }

/* Entrance and reveal */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 80ms); }
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .reveal.in { opacity: 1; transform: none; }
}

/* Spotlight: a light that follows the pointer across a panel and its border (pointer devices only) */
.spot { position: relative; }
.spot > :not(.bg) { position: relative; z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .spot::before, .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; z-index: 1; }
  .spot::after { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(66, 193, 200, .1), transparent 45%); }
  .spot::before {
    padding: 1px; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(66, 193, 200, .75), transparent 42%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .spot:hover::before, .spot:hover::after { opacity: 1; }
}

/* Device frames for real screenshots */
.frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: var(--bg-2); box-shadow: 0 40px 120px -30px rgba(66, 193, 200, .22), 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06); }
.phone-frame { border-radius: 30px; overflow: hidden; border: 6px solid #1b1f20; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .95), 0 0 0 1px var(--line-2); background: var(--bg); }
@media (max-width: 767px) { .phone-frame { border-width: 4px; border-radius: 20px; } }

/* ── Home hero ────────────────────────────────────────────────────── */
.hero { position: relative; overflow-x: clip; }
.hero-grid { min-height: calc(100dvh - var(--nav-h)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 48px; padding-block: 56px 72px; }
.hero .display { font-size: clamp(56px, 7vw, 104px); line-height: .98; letter-spacing: -.05em; font-weight: 600; margin: 0; text-wrap: balance; }
.display span { color: var(--teal); }
h1.eyebrow { font-weight: 500; }
.lead { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 32ch; margin: 24px 0 36px; text-wrap: pretty; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.stage { position: relative; perspective: 1800px; --shift: calc((min(1240px, 100vw) - 96px) * 17 / 24 + 72px - min(1240px, 100vw) / 2); }
.tilt { transform: rotateY(-13deg) rotateX(5deg) translateX(4%); transform-origin: 30% 50%; }
.stage .phone { position: absolute; left: -2%; bottom: -10%; width: 28%; }
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; min-height: 0; padding-block: 40px 88px; }
  .lead { max-width: 40ch; }
  .tilt { transform: none; }
  .stage .phone { left: auto; right: -2%; bottom: -14%; width: 27%; }
}
@media (prefers-reduced-motion: no-preference) {
  .desk-in { animation: deskIn 1.1s var(--ease) .25s both; }
  .stage .phone { animation: rise .9s var(--ease) .7s both; }
}
@keyframes deskIn { from { opacity: 0; transform: translateY(40px) scale(.96); } }

/* ── Inner page hero ──────────────────────────────────────────────── */
.phero { position: relative; overflow-x: clip; }
.phero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 56px; padding-block: 72px 112px; min-height: min(820px, calc(100dvh - var(--nav-h))); }
.phero .display { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; margin: 0; text-wrap: balance; }
.pvis { position: relative; }
.pvis .phone-frame { position: absolute; right: -2%; bottom: -12%; width: 27%; }
.pvis.solo .phone-frame { position: relative; right: auto; bottom: auto; width: min(340px, 70%); margin-inline: auto; }
@media (max-width: 1023px) {
  .phero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: 48px 96px; min-height: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .pvis .frame { animation: deskIn 1.1s var(--ease) .2s both; }
  .pvis .phone-frame { animation: rise .9s var(--ease) .6s both; }
}

/* ── Formula band ─────────────────────────────────────────────────── */
.formulas { position: relative; border-block: 1px solid var(--line); background: var(--bg-2); overflow: hidden; padding-block: 34px; view-timeline: --formulas block; }
.frow { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.frow + .frow { margin-top: 22px; }
.ftrack { display: flex; gap: 72px; width: max-content; }
.f { flex: none; }
.f span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.f b { font-family: var(--mono); font-weight: 400; font-size: 21px; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.f b i { font-style: normal; color: var(--teal); }
.f sub { font-size: .62em; color: var(--muted); }
.u { flex: none; font-family: var(--mono); font-size: 14px; color: var(--muted); white-space: nowrap; }
.u i { font-style: normal; color: var(--teal); padding-inline: 8px; }

/* ── Panels and instruments ───────────────────────────────────────── */
.panel { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); padding: 28px; min-width: 0; }
.panel h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.panel h3 i { color: var(--teal); font-size: 20px; }
.panel .note { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; margin-top: 56px; align-items: stretch; }
@media (max-width: 1023px) { .demo-grid { grid-template-columns: minmax(0, 1fr); } }
.speed { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; margin-top: 28px; align-items: center; }
@media (max-width: 640px) { .speed { grid-template-columns: minmax(0, 1fr); } .gauge { max-width: 300px; margin-inline: auto; width: 100%; } }
.field + .field { margin-top: 22px; }
.field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.field label output { font-family: var(--mono); color: var(--ink); font-size: 15px; }
input[type="range"] { width: 100%; height: 28px; background: transparent; appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--teal) var(--p, 50%), rgba(238, 243, 243, .1) var(--p, 50%)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(238, 243, 243, .1); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--teal); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; margin-top: -8px; background: var(--ink); border: 4px solid var(--teal); box-shadow: 0 0 0 6px rgba(66, 193, 200, .12); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 4px solid var(--teal); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; height: 34px; padding: 0 12px; white-space: nowrap; border-radius: 9px; font-family: var(--mono); font-size: 13px; color: var(--muted); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--teal-soft); color: var(--teal); }
.gauge { position: relative; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.gauge .arc-bg { stroke: rgba(238, 243, 243, .08); }
.gauge .arc { stroke: var(--teal); transition: stroke-dashoffset .45s var(--ease), stroke .3s ease; }
.gauge .read { position: absolute; inset: auto 0 6px 0; text-align: center; }
.gauge .read b { display: block; font-family: var(--mono); font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.gauge .read small { font-size: 13px; color: var(--muted); }
.status { margin-top: 22px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); padding: 12px 14px; border-radius: var(--r-md); background: rgba(238, 243, 243, .03); border: 1px solid var(--line); }
.status i { font-size: 18px; color: var(--teal); flex: none; margin-top: 2px; }
.status.over { border-color: rgba(240, 106, 94, .35); background: rgba(240, 106, 94, .06); }
.status.over i { color: var(--danger); }
.status.near i { color: var(--warn); }
.status b { color: var(--ink); font-weight: 600; }
.decode-form { display: flex; gap: 8px; margin-top: 24px; }
.decode-form input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line-2); font-family: var(--mono); font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.decode-form input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (pointer: coarse) { .examples button { height: 40px; padding: 0 14px; } }
.examples button { border: 1px solid var(--line); background: transparent; border-radius: 99px; height: 30px; padding: 0 12px; font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.examples button:hover { color: var(--teal); border-color: rgba(66, 193, 200, .4); }
.parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; min-height: 46px; }
.parts span { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 10px; font-family: var(--mono); font-size: 20px; font-weight: 500; background: var(--teal-soft); color: var(--teal); border: 1px solid rgba(66, 193, 200, .25); }
.parts span.k { background: rgba(238, 243, 243, .05); color: var(--ink); border-color: var(--line-2); }
@media (prefers-reduced-motion: no-preference) { .parts span { animation: rise .45s var(--ease) both; animation-delay: calc(var(--i) * 60ms); } }
dl.spec { margin: 18px 0 0; display: grid; grid-template-columns: 96px 1fr; gap: 10px 14px; font-size: 14px; }
dl.spec dt { color: var(--muted); font-family: var(--mono); font-size: 12px; padding-top: 2px; }
dl.spec dd { margin: 0; }
dl.spec dd small { color: var(--muted); }
.decode-miss { margin-top: 22px; font-size: 14px; color: var(--muted); }

/* ── Product showcase (desktop and phone at different depths) ────── */
.showcase { perspective: 2000px; }
.duo { position: relative; margin-top: 64px; margin-bottom: 72px; view-timeline: --duo block; }
.duo .phone-frame { position: absolute; right: -1%; bottom: -14%; width: 21%; }
@media (max-width: 767px) { .duo { margin-bottom: 56px; } .duo .phone-frame { width: 34%; right: 0; } }
.window { border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 60px 160px -40px rgba(66, 193, 200, .2), inset 0 1px 0 rgba(255, 255, 255, .06); }
@media (prefers-reduced-motion: no-preference) {
  .showcase .window { transform: rotateX(16deg) scale(.94); opacity: .35; transform-origin: 50% 100%; transition: transform 1.3s var(--ease), opacity 1s ease; }
  .showcase .window.in { transform: none; opacity: 1; }
}
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--line); }
.stats div { padding: 28px 24px 0 0; }
.stats b { display: block; font-family: var(--mono); font-weight: 500; font-size: 40px; letter-spacing: -.03em; line-height: 1; }
.stats span { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); max-width: 22ch; }
@media (max-width: 767px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; } }

/* ── Bento cells ──────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.cell { overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); min-height: 300px; display: flex; flex-direction: column; isolation: isolate; view-timeline: --cell block; transition: border-color .3s ease; }
a.cell:hover { border-color: rgba(66, 193, 200, .35); }
.cell .txt { padding: 28px; }
.cell h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; font-weight: 600; }
.cell p { margin: 10px 0 0; color: var(--muted); font-size: 15px; max-width: 42ch; }
.cell .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--teal); margin-bottom: 14px; }
.cell .tag i { font-size: 18px; }
.cell .more { margin-top: 16px; font-size: 14px; }
.cell .bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cell .bg img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cell .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 10, .1) 0%, rgba(8, 9, 10, .55) 45%, rgba(8, 9, 10, .94) 100%); }
.cell:hover .bg img { transform: scale(1.04); }
.cell.bottom { justify-content: flex-end; }
.cell .shot { margin: auto 28px 0; border-radius: 14px 14px 0 0; border: 1px solid var(--line-2); border-bottom: 0; overflow: hidden; box-shadow: 0 -20px 60px -20px rgba(66, 193, 200, .18); }
.cell .pshot { width: 46%; align-self: flex-end; margin-inline-end: 24px; border-radius: 20px 20px 0 0; border: 4px solid #1b1f20; border-bottom: 0; overflow: hidden; height: 300px; }
.cell.row { flex-direction: row; }
.cell.row .txt { flex: 1; }
.cell.shop { background: #000; border-color: rgba(0, 229, 255, .25); }
.cell.shop .tag { color: #00e5ff; }
.cell .readout { margin: auto 28px 28px; font-family: var(--mono); color: #00e5ff; }
.cell .readout b { display: block; font-size: 64px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.cell .readout span { font-size: 14px; color: #7ff2ff; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
.tall { min-height: 460px; }
@media (max-width: 1023px) { .bento > * { grid-column: span 6; } .bento > .wide-md { grid-column: span 12; } }
@media (max-width: 767px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > *, .bento > .wide-md { grid-column: auto; }
  .cell.row { flex-direction: column; }
  .cell .pshot { width: 70%; margin: 0 auto; height: 260px; }
}

/* ── Feature split (text and media side by side) ──────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.flip > .media { order: -1; }
.split .media { position: relative; }
.split .media .phone-frame { position: absolute; width: 30%; right: -3%; bottom: -10%; }
.points { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 18px; }
.points li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.points li i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); font-size: 18px; }
.points li b { display: block; font-weight: 600; }
.points li span { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
@media (max-width: 1023px) { .split, .split.flip { grid-template-columns: minmax(0, 1fr); gap: 48px; } .split.flip > .media { order: 0; } }

/* ── Bright panel ─────────────────────────────────────────────────── */
.light { margin-inline: 12px; border-radius: 36px; background: var(--paper); color: var(--paper-ink); position: relative; overflow: hidden; isolation: isolate; }
.light::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -300px; top: -420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(66, 193, 200, .28), transparent 70%); }
.light .h2, .light .h3 { color: var(--paper-ink); }
.light .sub, .light .muted, .light .points li span { color: var(--paper-muted); }
.light .eyebrow, .light .link { color: var(--teal-deep); }
.light .points li i { background: #d7eff0; color: var(--teal-deep); }
.light .frame { border-color: rgba(10, 13, 14, .12); box-shadow: 0 40px 80px -30px rgba(10, 13, 14, .45); }
@media (max-width: 767px) { .light { margin-inline: 8px; border-radius: 28px; } }
.flow { position: relative; margin-top: 72px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.flow .rail { position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--paper-line); }
.flow svg.line { position: absolute; left: 0; right: 0; top: 27px; width: 100%; height: 2px; overflow: visible; pointer-events: none; }
.flow svg.line line { stroke: var(--teal); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.flow.in svg.line line { stroke-dashoffset: 0; }
.node { position: relative; }
.node .dot { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: #fff; border: 1px solid var(--paper-line); font-size: 24px; color: var(--paper-muted); box-shadow: 0 10px 30px -12px rgba(10, 13, 14, .25); transition: color .4s ease, border-color .4s ease, background-color .4s ease; transition-delay: calc(var(--i) * 320ms); }
.flow.in .node .dot { color: var(--teal-deep); border-color: rgba(13, 122, 129, .4); background: #dff2f3; }
.node h3 { margin: 22px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.node p { margin: 8px 0 0; color: var(--paper-muted); font-size: 15px; max-width: 26ch; }
@media (prefers-reduced-motion: reduce) { .flow svg.line line { stroke-dashoffset: 0; } .flow .node .dot { color: var(--teal-deep); } }
@media (max-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .flow svg.line, .flow .rail { display: none; }
  .node { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; align-items: start; }
  .node .dot { grid-row: 1 / span 2; }
  .node h3 { margin-top: 4px; }
  .node p { grid-column: 2; margin-top: 4px; }
}
.light-shots { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; margin-top: 80px; align-items: end; }
.light-shots figure { margin: 0; }
.light-shots img { border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(10, 13, 14, .45), 0 0 0 1px rgba(10, 13, 14, .08); }
.light-shots figcaption { margin-top: 12px; font-size: 14px; color: var(--paper-muted); }
@media (max-width: 767px) { .light-shots { grid-template-columns: minmax(0, 1fr); margin-top: 56px; } }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.tile { border-radius: var(--r-lg); background: #fff; border: 1px solid var(--paper-line); padding: 28px; box-shadow: 0 20px 50px -30px rgba(10, 13, 14, .3); }
.tile i { font-size: 26px; color: var(--teal-deep); }
.tile h3 { margin: 18px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.tile p { margin: 8px 0 0; color: var(--paper-muted); font-size: 15px; }
@media (max-width: 767px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

/* ── Statement (lights up word by word) ───────────────────────────── */
.neutral { view-timeline: --neutral block; }
.neutral .wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; align-items: end; }
.statement { margin: 0; font-size: clamp(36px, 5.4vw, 80px); line-height: 1.02; letter-spacing: -.04em; font-weight: 600; text-wrap: balance; }
.statement .w.hl { color: var(--teal); }
.neutral .aside > p { color: var(--muted); margin: 0; font-size: 17px; }
.proof { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.proof div { display: flex; gap: 10px; align-items: flex-start; }
.proof i { color: var(--teal); font-size: 18px; margin-top: 2px; }
@media (max-width: 900px) { .neutral .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ── Pricing plans ────────────────────────────────────────────────── */
.price-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.plans { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: 16px; margin-top: 48px; align-items: stretch; }
.plan { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; background: var(--panel); display: flex; flex-direction: column; }
.plan h3 { margin: 0; font-size: 16px; font-weight: 600; }
.plan .price { margin: 18px 0 4px; font-family: var(--mono); font-size: 44px; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.plan .price small { font-family: var(--sans); font-size: 14px; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.plan .per { font-size: 13px; color: var(--muted); min-height: 20px; }
.plan ul { list-style: none; padding: 0; margin: 24px 0 28px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li i { color: var(--teal); font-size: 18px; margin-top: 3px; }
.plan .btn { margin-top: auto; width: 100%; }
.plan.featured { background: linear-gradient(180deg, #0f2325, var(--panel) 70%); border-color: rgba(66, 193, 200, .5); box-shadow: 0 30px 80px -30px rgba(66, 193, 200, .3); }
.plan.featured h3 { color: var(--teal); }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* ── Questions (details/summary) ──────────────────────────────────── */
.faq { margin-top: 48px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--muted); font-size: 20px; transition: transform .25s var(--ease), color .2s ease; flex: none; }
.faq summary:hover i { color: var(--teal); }
.faq details[open] summary i { transform: rotate(45deg); color: var(--teal); }
.faq .ans { padding: 0 4px 24px; color: var(--muted); max-width: 70ch; }
.faq .ans p { margin: 0 0 10px; }

/* ── Forms ────────────────────────────────────────────────────────── */
.form { display: grid; gap: 20px; }
.form .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .form .row2 { grid-template-columns: minmax(0, 1fr); } }
.fld { display: grid; gap: 8px; }
.fld label { font-size: 14px; font-weight: 500; }
.fld input, .fld select, .fld textarea { width: 100%; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line-2); color: var(--ink); padding: 0 14px; height: 48px; font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease; }
.fld textarea { height: auto; min-height: 160px; padding: 12px 14px; resize: vertical; line-height: 1.55; }
.fld select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--dim); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.fld .hint { font-size: 13px; color: var(--muted); }
.fld .err { font-size: 13px; color: var(--danger); min-height: 0; }
.fld.bad input, .fld.bad select, .fld.bad textarea { border-color: rgba(240, 106, 94, .6); }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: rgba(238, 243, 243, .03); font-size: 15px; }
.notice i { font-size: 20px; color: var(--teal); flex: none; margin-top: 1px; }
.notice.bad { border-color: rgba(240, 106, 94, .4); background: rgba(240, 106, 94, .06); }
.notice.bad i { color: var(--danger); }

/* ── Legal and long-form documents ────────────────────────────────── */
.doc-head { padding-block: 72px 40px; border-bottom: 1px solid var(--line); }
.doc-head h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.02; letter-spacing: -.04em; font-weight: 600; margin: 0; }
.doc-head .meta { margin-top: 16px; color: var(--muted); font-size: 15px; }
.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding-block: 56px 120px; align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 24px); font-size: 14px; max-height: calc(100dvh - var(--nav-h) - 48px); overflow-y: auto; }
.toc p { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); transition: color .2s ease, border-color .2s ease; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--teal); border-left-color: var(--teal); }
.prose { max-width: 72ch; color: #c9d2d3; font-size: 16.5px; line-height: 1.75; }
.prose h2 { color: var(--ink); font-size: 26px; letter-spacing: -.02em; line-height: 1.2; margin: 56px 0 14px; font-weight: 600; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--ink); font-size: 19px; margin: 32px 0 10px; font-weight: 600; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; }
@media (max-width: 960px) { .doc { grid-template-columns: minmax(0, 1fr); gap: 32px; } .toc { position: static; max-height: none; } }

/* ── Closing band and footer ──────────────────────────────────────── */
.close { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--line); view-timeline: --close block; }
.light + .close { margin-top: 120px; }
@media (max-width: 767px) { .light + .close { margin-top: 80px; } }
.close > img { position: absolute; left: 0; top: -16%; width: 100%; height: 132%; object-fit: cover; object-position: 60% 40%; z-index: -2; }
.close::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 9, 10, .96) 0%, rgba(8, 9, 10, .82) 45%, rgba(8, 9, 10, .25) 100%); }
.close .wrap { padding-block: 144px; }
.close .h2 { max-width: 14ch; }
.close .btn { margin-top: 36px; }
footer.site { border-top: 1px solid var(--line); padding-block: 64px 40px; font-size: 14px; color: var(--muted); background: var(--bg); }
footer.site .cols { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 40px; }
footer.site .brand img { height: 22px; width: auto; }
footer.site .brand p { margin: 16px 0 0; max-width: 30ch; }
footer.site .social { display: flex; gap: 8px; margin-top: 20px; }
footer.site .social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 19px; transition: color .2s ease, border-color .2s ease; }
footer.site .social a:hover { color: var(--ink); border-color: rgba(66, 193, 200, .45); }
footer.site h2 { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 14px; letter-spacing: 0; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
footer.site a:hover { color: var(--ink); }
footer.site .base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
footer.site .base span { margin-inline-end: auto; }
@media (max-width: 860px) { footer.site .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer.site .brand { grid-column: 1 / -1; } }

/* ── Scroll-driven depth ──────────────────────────────────────────────
   Utilities any page can use:
     .depth-1  moves slowly against the scroll        .depth-2  moves faster (for front layers)
     .rise-in  rises and settles as it enters          .bg img / .drift  drifts inside a clipped frame
   Where scroll timelines are unsupported, or motion is reduced, everything is still. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .ambient .a1 { animation: amb1 linear both; animation-timeline: scroll(root); }
    .ambient .a2 { animation: amb2 linear both; animation-timeline: scroll(root); }
    .ftrack.fwd { animation: px-fwd linear both; animation-timeline: --formulas; animation-range: cover 0% cover 100%; }
    .ftrack.rev { animation: px-rev linear both; animation-timeline: --formulas; animation-range: cover 0% cover 100%; }
    .duo .window { animation: px-slow linear both; animation-timeline: --duo; animation-range: cover 0% cover 100%; }
    .duo .phone-frame { animation: px-fast linear both; animation-timeline: --duo; animation-range: cover 0% cover 100%; }
    .bento .cell { animation: px-cell linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .cell .bg img { animation: px-img linear both; animation-timeline: --cell; animation-range: cover 0% cover 100%; }
    .cell .pshot { animation: px-rise linear both; animation-timeline: --cell; animation-range: entry 0% cover 50%; }
    .light { animation: px-sheet linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .statement .w { animation: lightup linear both; animation-timeline: --neutral; animation-range: cover calc(18% + var(--i) * 2.6%) cover calc(26% + var(--i) * 2.6%); }
    .close > img { animation: px-img linear both; animation-timeline: --close; animation-range: cover 0% cover 100%; }
    .close .wrap { animation: px-counter linear both; animation-timeline: --close; animation-range: cover 0% cover 100%; }
    .depth-1 { animation: px-slow linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .depth-2 { animation: px-fast-md linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .rise-in { animation: px-cell linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .drift { animation: px-img linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* Inner page heroes: layers part as the hero scrolls away */
    .phero { view-timeline: --phero block; }
    .phero .copy { animation: px-copy linear both; animation-timeline: --phero; animation-range: exit 0% exit 100%; }
    .pvis { animation: px-stage linear both; animation-timeline: --phero; animation-range: exit 0% exit 100%; }
    .pvis .phone-frame { animation: rise .9s var(--ease) .6s both, px-phone-sm linear both; animation-timeline: auto, --phero; animation-range: normal, exit 0% exit 100%; }
  }
  /* Home, desktop: the hero holds the screen while the product takes over */
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .hero { height: 235vh; }
    .hero-pin { position: sticky; top: var(--nav-h); height: calc(100dvh - var(--nav-h)); overflow: clip; }
    .hero-grid { min-height: 0; height: 100%; padding-block: 24px; }
    .hero .copy { animation: hz-copy linear both; animation-timeline: scroll(root); animation-range: 0 55vh; }
    .stage { z-index: 2; animation: hz-stage linear both; animation-timeline: scroll(root); animation-range: 0 125vh; }
    .tilt { animation: hz-tilt linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    .stage .phone { animation: rise .9s var(--ease) .7s both, hz-phone linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 75vh; }
  }
  /* Home, smaller screens: no pinning */
  @media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
    .hero { view-timeline: --hero block; }
    .hero .copy { animation: px-copy linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .stage { animation: px-stage linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .stage .phone { animation: rise .9s var(--ease) .7s both, px-phone-sm linear both; animation-timeline: auto, --hero; animation-range: normal, exit 0% exit 100%; }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
    .duo .phone-frame { animation-name: px-fast-sm; }
    .cell .pshot { animation-name: px-rise-sm; }
    .depth-2 { animation-name: px-fast-sm; }
  }
  /* One-column heroes: the picture sits under the copy, so the layers part vertically instead of sliding into each other */
  @media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
    .phero .copy, .hero .copy { animation-name: px-copy-up; }
    .pvis, .stage { animation-name: px-stage-down; }
  }
}
@keyframes amb1 { 0% { translate: 0 0; scale: 1; } 12% { translate: -22vw 26vh; scale: 1.25; } 30% { translate: 12vw 46vh; scale: .95; } 52% { translate: -34vw 30vh; scale: 1.15; } 75% { translate: 6vw 58vh; scale: 1; } 100% { translate: -12vw 82vh; scale: 1.3; } }
@keyframes amb2 { 0% { translate: 0 0; } 40% { translate: 30vw -20vh; } 100% { translate: 70vw -40vh; } }
@keyframes hz-copy { 0% { translate: 0 0; opacity: 1; } 100% { translate: -6vw -14vh; opacity: 0; } }
@keyframes hz-stage { 0% { translate: 0 0; scale: 1; } 72% { translate: calc(var(--shift) * -1) 1vh; scale: 1.42; } 100% { translate: calc(var(--shift) * -1) -3vh; scale: 1.48; } }
@keyframes hz-tilt { to { transform: none; } }
@keyframes hz-phone { 100% { translate: -16vw 46vh; rotate: -14deg; opacity: 0; } }
@keyframes px-copy { to { translate: 0 120px; opacity: 0; } }
@keyframes px-stage { to { translate: 0 -90px; } }
@keyframes px-copy-up { to { translate: 0 -40px; opacity: 0; } }
@keyframes px-stage-down { to { translate: 0 40px; } }
@keyframes px-phone-sm { to { translate: 0 -110px; } }
@keyframes px-fwd { from { translate: -4% 0; } to { translate: -30% 0; } }
@keyframes px-rev { from { translate: -34% 0; } to { translate: -8% 0; } }
@keyframes px-slow { from { translate: 0 40px; } to { translate: 0 -40px; } }
@keyframes px-fast { from { translate: 0 180px; } to { translate: 0 -150px; } }
@keyframes px-fast-md { from { translate: 0 110px; } to { translate: 0 -90px; } }
@keyframes px-fast-sm { from { translate: 0 60px; } to { translate: 0 -40px; } }
@keyframes px-cell { from { translate: 0 60px; scale: .95; } to { translate: 0 0; scale: 1; } }
@keyframes px-img { from { translate: 0 -7%; } to { translate: 0 7%; } }
@keyframes px-rise { from { translate: 0 90px; } to { translate: 0 0; } }
@keyframes px-rise-sm { from { translate: 0 40px; } to { translate: 0 0; } }
@keyframes px-sheet { from { translate: 0 140px; scale: .93; } to { translate: 0 0; scale: 1; } }
@keyframes px-counter { from { translate: 0 60px; } to { translate: 0 -60px; } }
@keyframes lightup { from { opacity: .16; } to { opacity: 1; } }