/* bnmapp.com: one stylesheet, colours only in the token blocks (BNM Business
   app theme). Mobile first. Keep it under 60 KB. Content never waits on JS or motion. */

@font-face {
  font-family:"Inter Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica");
  size-adjust:107%;
  ascent-override:90.5%;
  descent-override:22.5%;
  line-gap-override:0%;
}

:root {
  --canvas:#F7F8F9;
  --surface:#FFFFFF;
  --surface-muted:#F1F2F4;
  --surface-elevated:#FFFFFF;
  --border:#E6E7EA;
  --border-strong:#D1D3D7;
  --text:#0B0D0F;
  --text-2:#5C6370;
  --text-3:#646B7A;
  --accent:#22C55E;
  --accent-fill:#15803D;
  --accent-fill-hover:#166534;
  --on-accent:#FFFFFF;
  --accent-soft:#DCFCE7;
  --accent-text-on-soft:#14532D;
  --accent-text:#166534;
  --accent-bright:#22C55E;
  --accent-bright-hover:#4ADE80;
  --on-accent-bright:#052E16;
  --brand-blue:#1E88E5;
  --info-soft:#DBEAFE;
  --info-text:#1D4ED8;
  --warning-soft:#FEF3C7;
  --warning-text:#AD500A;
  --danger-soft:#FEE2E2;
  --danger-text:#B91C1C;
  --premium-soft:#EDE9FE;
  --premium-text:#6D28D9;
  --focus-ring:#15803D;
  --header-bg:rgba(247,248,249,.86);
  --band-bg:#0B0D0F;
  --band-border:#0B0D0F;
  --band-text:#F5F6F7;
  --band-text-2:#B4B8BF;
  --band-line:rgba(255,255,255,.22);
  --bezel:#0B0D0F;
  --bezel-edge:#2A2D33;
  --punch:#000000;
  --knob:#FFFFFF;
  --overlay:rgba(11,13,15,.78);
  --overlay-edge:rgba(255,255,255,.0);
  --on-overlay:#FFFFFF;
  --dot-1:#FF5F57;
  --dot-2:#FEBC2E;
  --dot-3:#28C840;
  --glow:rgba(34,197,94,.18);
  --glow-2:rgba(30,136,229,.08);
  --grid-dot:rgba(21,128,61,.16);
  --shadow-sm:0 1px 2px rgba(11,13,15,.06);
  --shadow-card:0 4px 16px -4px rgba(11,13,15,.08);
  --shadow-pop:0 16px 40px -12px rgba(11,13,15,.22);
  --shadow-stage:0 24px 64px -24px rgba(11,13,15,.28);
  --font:"Inter","Inter Fallback",-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --header-h:64px;
  --gutter:16px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:24px;
  color-scheme:light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas:#0A0B0C;
    --surface:#111315;
    --surface-muted:#17191C;
    --surface-elevated:#1D1F23;
    --border:#26292E;
    --border-strong:#363A40;
    --text:#F5F6F7;
    --text-2:#A7ABB3;
    --text-3:#8A9099;
    --accent-fill:#22C55E;
    --accent-fill-hover:#4ADE80;
    --on-accent:#052E16;
    --accent-soft:#12291B;
    --accent-text-on-soft:#86EFAC;
    --accent-text:#4ADE80;
    --info-soft:#0F2340;
    --info-text:#60A5FA;
    --warning-soft:#2E2208;
    --warning-text:#FBBF24;
    --danger-soft:#2A1215;
    --danger-text:#F87171;
    --premium-soft:#211A3A;
    --premium-text:#A78BFA;
    --focus-ring:#4ADE80;
    --header-bg:rgba(10,11,12,.82);
    --band-bg:#111315;
    --band-border:#26292E;
    --band-text:#F5F6F7;
    --band-text-2:#A7ABB3;
    --bezel:#1F2227;
    --bezel-edge:#3A3F46;
    --knob:#FFFFFF;
    --overlay:rgba(45,49,56,.92);
    --overlay-edge:rgba(255,255,255,.18);
    --glow:rgba(34,197,94,.12);
    --glow-2:rgba(66,165,245,.07);
    --grid-dot:rgba(134,239,172,.09);
    --shadow-sm:0 0 0 1px rgba(0,0,0,0);
    --shadow-card:0 0 0 1px rgba(0,0,0,0);
    --shadow-pop:0 16px 40px -12px rgba(0,0,0,.7);
    --shadow-stage:0 24px 64px -24px rgba(0,0,0,.8);
  }
  .logo img { filter:brightness(1.45) saturate(.95); }
}

@media (min-width: 768px) { :root { --gutter:24px; } }
@media (min-width: 1024px) { :root { --gutter:32px; --header-h:68px; } }

/* --- base */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); }
body {
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font-family:var(--font);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
    font-feature-settings:"cv11","ss01";
}
img, svg, picture { display:block; max-width:100%; }
img { height:auto; }
h1, h2, h3 { color:var(--text); line-height:1.2; }
h1, h2 { font-weight:700; text-wrap:balance; }
h3 { font-weight:600; }
p { text-wrap:pretty; }
a { color:var(--accent-text); text-decoration-thickness:from-font; text-underline-offset:.18em; }
button { font:inherit; color:inherit; }
::selection { background:var(--accent-soft); color:var(--text); }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:4px; }
main:focus { outline:none; }

.container { width:100%; max-width:calc(1200px + 2 * var(--gutter)); margin-inline:auto; padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right)); }
.container-narrow { max-width:calc(780px + 2 * var(--gutter)); }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:16px; top:-120px; z-index:100; padding:12px 18px; border-radius:var(--r-sm); background:var(--text); color:var(--canvas); font-weight:600; text-decoration:none; }
.skip-link:focus { top:12px; }

.i { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.i .f { fill:currentColor; stroke:none; }
.i-sm { width:16px; height:16px; }

/* --- buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 18px; border:1px solid transparent; border-radius:var(--r-sm);
  font-family:var(--font); font-size:1rem; font-weight:600; line-height:1.2; text-align:center;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease);
}
.btn .i { width:18px; height:18px; }
.btn .i-arrow { transition:transform .15s var(--ease); }
.btn:hover .i-arrow { transform:translateX(3px); }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--accent-fill); color:var(--on-accent); box-shadow:0 1px 2px rgba(11,13,15,.14),inset 0 1px 0 rgba(255,255,255,.14); }
.btn-primary:hover { background:var(--accent-fill-hover); }
.btn-secondary { background:var(--surface); color:var(--text); border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.btn-secondary:hover { border-color:var(--text-3); background:var(--surface-muted); }
.btn-ghost { background:transparent; color:var(--text); }
.btn-ghost:hover { background:var(--surface-muted); }
.btn-lg { min-height:52px; padding:14px 24px; font-size:1.0625rem; border-radius:10px; }
.btn-sm { padding:8px 14px; font-size:.9375rem; }
.btn-block { width:100%; }

.link-arrow { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:16px; font-weight:600; color:var(--accent-text); text-decoration:none; }
.link-arrow .i { transition:transform .15s var(--ease); }
.link-arrow:hover { text-decoration:underline; }
.link-arrow:hover .i { transform:translateX(3px); }

/* --- chips/badges */
.chip { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:999px; font-size:.75rem; font-weight:600; line-height:1; white-space:nowrap; vertical-align:middle; letter-spacing:0; }
.chip::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.chip-next { background:var(--info-soft); color:var(--info-text); }
.chip-soon { background:var(--warning-soft); color:var(--warning-text); }
.chip-beta { background:var(--premium-soft); color:var(--premium-text); }
.badge { display:inline-flex; align-items:center; height:22px; padding:0 8px; border:1px solid var(--border-strong); border-radius:6px; background:var(--surface); color:var(--text-2); font-size:.6875rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.badge-offline { color:var(--text); }
.badge-pro { background:var(--accent-soft); color:var(--accent-text-on-soft); border-color:transparent; }
.badge-addon { background:var(--premium-soft); color:var(--premium-text); border-color:transparent; }
.pills { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none; }
.pills li { padding:4px 10px; border-radius:999px; background:var(--surface-muted); color:var(--text-2); font-size:.75rem; font-weight:600; }
.icon-chip { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--accent-soft); color:var(--accent-text-on-soft); }
.icon-chip .i { width:20px; height:20px; }
.icon-chip-lg { width:48px; height:48px; border-radius:12px; }
.icon-chip-lg .i { width:24px; height:24px; }

/* --- header */
/* Blur on ::before: on .site-header it would trap the fixed menu sheet. */
.site-header { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border); }
.site-header::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--header-bg); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); }
.header-inner { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; min-height:var(--header-h); }
.logo { display:inline-flex; align-items:center; min-height:44px; border-radius:6px; }
.logo img { width:auto; height:36px; }
@media (min-width: 1024px) { .site-header .logo img { height:40px; } }
.header-mobile { display:flex; align-items:center; gap:8px; margin-left:auto; }
.menu-btn { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); cursor:pointer; }
.menu-btn .i { width:22px; height:22px; }
.menu-btn .i-close, .menu-btn[aria-expanded="true"] .i-open { display:none; }
.menu-btn[aria-expanded="true"] .i-close { display:block; }
.nav-list { display:flex; gap:4px; margin:0; padding:0; list-style:none; }
.nav-link { display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:10px 12px; border-radius:var(--r-sm); color:var(--text-2); font-size:.9375rem; font-weight:500; text-decoration:none; cursor:pointer; list-style:none; white-space:nowrap; }
.nav-link:hover, .nav-link[aria-current="page"], .is-current > .nav-link { color:var(--text); background:var(--surface-muted); }
summary.nav-link::-webkit-details-marker { display:none; }
summary.nav-link .i { transition:transform .2s var(--ease); }
details[open] > summary.nav-link .i { transform:rotate(180deg); }
.nav-drop { position:relative; }
.drop-grid { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.drop-grid a { display:flex; align-items:center; gap:12px; min-height:48px; padding:8px 10px; border-radius:10px; color:var(--text); font-size:.9375rem; font-weight:500; text-decoration:none; }
.drop-grid a:hover, .drop-grid a[aria-current="page"] { background:var(--surface-muted); }
.drop-icon { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent-text-on-soft); }
.drop-icon .i { width:18px; height:18px; }
.header-actions { display:flex; align-items:center; gap:8px; }

/* Phones and tablets: no JS = a plain link row; with JS = a full-height sheet. */
@media (max-width: 1023.98px) {
  .site-menu { flex-basis:100%; }
  html:not(.js) .menu-btn { display:none; }
  html:not(.js) .site-menu { padding-bottom:8px; }
  html:not(.js) .nav-list { flex-wrap:wrap; }
  html:not(.js) .header-actions { display:none; }
  html:not(.js) .drop-panel { padding:4px 0 0; }
  .js .site-menu { display:none; position:fixed; z-index:49; inset:var(--header-h) 0 0 0; padding:12px max(var(--gutter),env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left)); overflow-y:auto; overscroll-behavior:contain; background:var(--canvas); border-top:1px solid var(--border); }
  .js .site-menu.is-open { display:flex; flex-direction:column; }
  .js .nav-list { flex-direction:column; gap:2px; }
  .js .nav-link { width:100%; justify-content:space-between; min-height:52px; padding:12px; font-size:1.0625rem; color:var(--text); }
  .js .drop-panel { padding:4px 0 8px 8px; }
  .js .header-actions { flex-direction:column-reverse; align-items:stretch; margin-top:auto; padding-top:20px; border-top:1px solid var(--border); }
  .js .header-actions .btn { width:100%; min-height:52px; font-size:1.0625rem; }
  .js .header-actions .btn-ghost { border-color:var(--border-strong); }
  html.menu-open { overflow:hidden; }
}
@media (max-width: 340px) { .header-cta-m { display:none; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .js .drop-grid { grid-template-columns:1fr 1fr; } }
@media (min-width: 1024px) {
  .header-mobile { display:none; }
  .header-inner { flex-wrap:nowrap; }
  .site-menu { display:flex; flex:1; align-items:center; justify-content:space-between; margin-left:20px; }
  .drop-panel { position:absolute; top:calc(100% + 10px); left:-8px; width:560px; padding:10px; background:var(--surface-elevated); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-pop); }
  .drop-grid { grid-template-columns:1fr 1fr; }
}

/* --- sections */
.section { padding-block:clamp(64px,8vw,112px); }
.section-tight { padding-block:clamp(32px,4vw,56px); }
.section-alt { background:var(--surface); border-block:1px solid var(--border); }
.section-head { max-width:760px; }
.section-head.is-center { margin-inline:auto; text-align:center; }
.section-head h2 { margin:0; font-size:clamp(1.625rem,1.3rem + 1.4vw,2.25rem); line-height:1.15; letter-spacing:-.022em; }
.eyebrow { margin:0 0 12px; color:var(--accent-text); font-size:.75rem; font-weight:700; line-height:1.4; letter-spacing:.09em; text-transform:uppercase; }
.lead { margin:14px 0 0; color:var(--text-2); font-size:1.0625rem; line-height:1.6; }
.is-center .lead { margin-inline:auto; max-width:62ch; }
@media (min-width: 768px) { .lead { font-size:1.125rem; } }
.center-link { margin:40px 0 0; text-align:center; }

/* Shared backdrop: faint emerald dot grid + glow */
.hero, .page-hero, .legal-page .legal-hero { position:relative; isolation:isolate; overflow:hidden; }
.hero::before, .page-hero::before, .legal-page .legal-hero::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--grid-dot) 1px,transparent 1.2px); background-size:22px 22px;
  mask-image:radial-gradient(ellipse 70% 70% at 70% 30%,black 10%,transparent 75%);
}
.hero::after, .page-hero::after, .legal-page .legal-hero::after {
  content:""; position:absolute; inset:-20% -10% auto auto; z-index:-1; width:70%; height:90%; pointer-events:none;
  background:radial-gradient(closest-side,var(--glow),transparent),radial-gradient(closest-side at 20% 80%,var(--glow-2),transparent);
}

/* --- hero */
.hero { padding:36px 0 0; }
.hero-grid { display:grid; gap:36px; }
.hero-copy { max-width:640px; }
.eyebrow-chip { display:inline-flex; align-items:center; gap:8px; margin:0; padding:6px 14px 6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--surface); box-shadow:var(--shadow-sm); color:var(--text-2); font-size:.8125rem; font-weight:600; line-height:1.3; }
.eyebrow-chip .dot { flex:none; width:8px; height:8px; margin-left:2px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.eyebrow-chip .icon-dot { display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent-text-on-soft); }
.eyebrow-chip .icon-dot .i { width:14px; height:14px; }
.display { margin:20px 0 0; font-size:clamp(2.25rem,1.55rem + 3.2vw,4rem); line-height:1.04; letter-spacing:-.036em; }
.display-sm { font-size:clamp(2rem,1.45rem + 2.5vw,3.375rem); line-height:1.07; }
.hero-sub { margin:20px 0 0; max-width:46ch; color:var(--text-2); font-size:1.125rem; line-height:1.6; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-ctas .btn { flex:1 1 auto; }
.hero-micro { margin:14px 0 0; color:var(--text-2); font-size:.875rem; line-height:1.5; }
.platforms { display:flex; flex-wrap:wrap; gap:8px 18px; margin:22px 0 0; padding:0; list-style:none; color:var(--text-2); font-size:.8125rem; font-weight:500; }
.platforms li { display:inline-flex; align-items:center; gap:6px; }
.platforms .i { width:15px; height:15px; }
@media (min-width: 480px) { .hero-ctas .btn { flex:0 0 auto; } }

.hero-stage { position:relative; }
.hero-stage::before { content:""; position:absolute; inset:8% 4% -4% 12%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side,var(--glow),transparent 85%); }
.stage-phone { --phone-w:230px; }
@media (max-width: 767.98px) {
  .stage-desk { display:none; }
  .hero-stage { display:flex; justify-content:center; height:380px; margin-inline:calc(-1 * var(--gutter)); padding-top:4px; overflow:hidden;
    mask-image:linear-gradient(black 70%,transparent); }
  .hero-stage .stage-phone { width:236px; }
  .hero-stage .anim-btn { top:64px; bottom:auto; left:max(-54px,calc((236px - 100vw) / 2 + 8px)); }
}
@media (min-width: 768px) {
  .hero { padding:56px 0 72px; }
  .hero-stage { margin-right:4%; padding-bottom:72px; }
  .stage-desk { width:100%; }
  .hero-stage .stage-phone { position:absolute; right:-4%; bottom:0; width:27%; min-width:180px; max-width:232px; }
}
@media (min-width: 1024px) {
  .hero { padding:72px 0 96px; }
  .hero-grid { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:center; gap:56px; }
  .hero-sub { font-size:1.1875rem; }
  .hero-stage { margin-right:0; }
  .hero-stage .stage-phone { right:-2%; width:31%; }
}

/* --- frames */
.frame picture, .frame img { width:100%; }
.frame-desktop { overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow-stage); }
.frame-bar { display:flex; align-items:center; gap:7px; height:30px; padding:0 12px; background:var(--surface-muted); border-bottom:1px solid var(--border); }
.frame-bar i { width:10px; height:10px; border-radius:50%; background:var(--dot-1); }
.frame-bar i:nth-child(2) { background:var(--dot-2); }
.frame-bar i:nth-child(3) { background:var(--dot-3); }
.frame-phone { position:relative; width:var(--phone-w,260px); max-width:100%; padding:9px; border-radius:42px; background:var(--bezel); box-shadow:var(--shadow-stage),inset 0 0 0 1.5px var(--bezel-edge); }
.frame-phone::after { content:""; position:absolute; top:22%; right:-2px; width:3px; height:11%; border-radius:0 2px 2px 0; background:var(--bezel-edge); }
.frame-phone .frame-screen { position:relative; overflow:hidden; padding:22px 0 16px; border-radius:33px; background:var(--surface); }
.frame-phone .frame-screen::before { content:""; position:absolute; top:6px; left:50%; z-index:2; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--punch); box-shadow:0 0 0 2px var(--bezel); }
.frame-phone .frame-screen::after { content:""; position:absolute; bottom:6px; left:33%; width:34%; height:4px; border-radius:2px; background:var(--border-strong); }
.anim-btn { position:absolute; bottom:36px; left:-54px; z-index:3; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--overlay-edge); border-radius:50%; background:var(--overlay); color:var(--on-overlay); box-shadow:var(--shadow-pop); cursor:pointer; }
.anim-btn .i { width:18px; height:18px; }

/* Panels that hold a framed screenshot */
.media-panel { position:relative; overflow:hidden; display:grid; border:1px solid var(--border); border-radius:20px;
  background:radial-gradient(110% 90% at 100% 0%,var(--accent-soft),transparent 60%),var(--surface-muted); }
.media-panel.tint-b { background:radial-gradient(110% 90% at 0% 100%,var(--accent-soft),transparent 60%),var(--surface-muted); }
.media-panel.media-phone { justify-items:center; align-items:start; height:420px; padding:32px 16px 0; }
.media-panel.media-phone .frame-phone { --phone-w:236px; }
.media-panel.media-desktop { align-content:center; padding:clamp(16px,3vw,40px); }
.media-panel.media-none { padding:24px; }
.media-panel.media-list { place-items:center; padding:clamp(24px,4vw,48px); }
.list-card { width:100%; max-width:460px; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-stage); }
.list-head { display:flex; align-items:center; gap:12px; margin:0; padding:14px 18px; border-bottom:1px solid var(--border); background:var(--surface-muted); font-weight:700; }
.list-card .ticks { gap:0; margin:0; }
.list-card .ticks li { padding:14px 18px; border-top:1px solid var(--border); }
.list-card .ticks li:first-child { border-top:0; }
@media (min-width: 1024px) {
  .media-panel.media-phone { height:auto; padding:44px 24px; align-items:center; }
  .media-panel.media-phone .frame-phone { --phone-w:264px; }
}

/* --- proof */
.proof { padding-block:28px; background:var(--surface); border-block:1px solid var(--border); }
.proof-grid { display:grid; gap:20px; margin:0; padding:0; list-style:none; }
.proof-item { display:flex; align-items:flex-start; gap:14px; }
.proof-title { margin:0; font-size:1rem; font-weight:600; line-height:1.35; letter-spacing:-.01em; }
.proof-title a { display:inline-block; padding-block:12px; margin-block:-12px; color:var(--text); text-decoration:none; }
.proof-title a:hover { color:var(--accent-text); text-decoration:underline; }
.proof-item p { margin:4px 0 0; color:var(--text-2); font-size:.875rem; line-height:1.5; }
@media (min-width: 640px) { .proof-grid { grid-template-columns:1fr 1fr; gap:24px 32px; } }
@media (min-width: 1100px) {
  .proof { padding-block:32px; }
  .proof-grid { grid-template-columns:repeat(4,1fr); gap:0; }
  .proof-item { padding:0 24px; border-left:1px solid var(--border); }
  .proof-item:first-child { padding-left:0; border-left:0; }
}

/* --- jobs */
.jobs { display:grid; gap:64px; margin-top:48px; }
.job { display:grid; gap:28px; align-items:center; scroll-margin-top:calc(var(--header-h) + 24px); }
.job-num { display:inline-flex; margin:0 0 14px; padding:4px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent-text-on-soft); font-size:.75rem; font-weight:700; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.job-title { margin:0; font-size:clamp(1.5rem,1.2rem + 1vw,2rem); line-height:1.15; letter-spacing:-.022em; }
.job-text { margin:14px 0 0; max-width:52ch; color:var(--text-2); font-size:1.0625rem; }
.jobs-cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 24px; margin-top:64px; }
.jobs-cta .link-arrow { margin-top:0; }
@media (min-width: 1024px) {
  .jobs { gap:104px; margin-top:72px; }
  .job { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:72px; }
  .job.is-flipped .job-copy { order:2; }
  .job.no-media { grid-template-columns:1fr; max-width:760px; }
}

.ticks { display:grid; gap:10px; margin:20px 0 0; padding:0; list-style:none; }
.ticks li { display:flex; align-items:flex-start; gap:10px; font-size:.9688rem; line-height:1.5; }
.tick-i { width:20px; height:20px; margin-top:1px; padding:3px; border-radius:50%; background:var(--accent-soft); color:var(--accent-text-on-soft); stroke-width:2.6; }
.ticks .is-later { color:var(--text-2); }
.ticks .is-limit { color:var(--text-2); }
.ticks .is-limit .tick-i { background:var(--surface-muted); color:var(--text-2); }
.ticks .is-later .tick-i { background:var(--surface-muted); color:var(--text-2); stroke-width:2.2; }
.ticks .chip { margin-left:2px; }

/* --- type tiles */
.type-grid { display:grid; gap:12px; margin:44px 0 0; padding:0; list-style:none; }
.type-tile { position:relative; display:flex; align-items:center; gap:14px; height:100%; min-height:72px; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--canvas); color:var(--text); text-decoration:none; transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease); }
.type-tile:hover { border-color:var(--accent-fill); box-shadow:var(--shadow-card); transform:translateY(-2px); }
.tile-body { min-width:0; }
.tile-name { display:block; font-weight:600; line-height:1.3; }
.tile-mods { display:block; margin-top:4px; color:var(--text-2); font-size:.8125rem; line-height:1.45; }
.tile-arrow { flex:none; width:18px; height:18px; margin-left:auto; color:var(--text-3); transition:transform .15s var(--ease),color .15s; }
.type-tile:hover .tile-arrow { color:var(--accent-text); transform:translateX(3px); }
@media (min-width: 560px) { .type-grid { grid-template-columns:1fr 1fr; } }
@media (min-width: 1100px) {
  .type-grid { grid-template-columns:repeat(5,1fr); gap:14px; }
  .type-tile { flex-direction:column; align-items:flex-start; gap:16px; padding:20px; }
  .type-tile .tile-arrow { position:absolute; top:22px; right:18px; }
}

/* --- apps */
.app-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:44px 0 0; padding:0; list-style:none; }
.app-card { display:flex; flex:1 1 100%; flex-direction:column; padding:24px; border:1px solid var(--border); border-radius:16px; background:var(--canvas); }
@media (min-width: 560px) { .app-card { flex:0 1 calc((100% - 16px) / 2); } }
@media (min-width: 900px) { .app-card { flex-basis:calc((100% - 32px) / 3); } }
@media (min-width: 1100px) { .app-card { flex:1 1 200px; padding:22px 20px; } }
.app-name { margin:16px 0 0; font-size:1.125rem; }
.app-card > p { margin:6px 0 0; color:var(--text-2); font-size:.9375rem; }
.app-card .link-arrow { display:block; margin-top:auto; padding:22px 0 10px; text-wrap:balance; }
.app-card .link-arrow .i { display:inline-block; margin-left:6px; vertical-align:-3px; }

/* --- pricing */
html:not(.js) .price-controls { display:none; }
.price-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 20px; width:fit-content; max-width:100%; margin:32px auto 0; }
.price-controls.is-sticky { position:sticky; top:calc(var(--header-h) + 10px); z-index:20; margin-top:0; padding:6px 10px; border:1px solid var(--border); border-radius:18px; background:var(--header-bg); backdrop-filter:blur(12px); box-shadow:var(--shadow-card); }
.seg { display:inline-flex; padding:3px; border:1px solid var(--border); border-radius:999px; background:var(--surface-muted); }
.seg-btn { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 18px; border:0; border-radius:999px; background:transparent; color:var(--text-2); font-size:.9375rem; font-weight:600; cursor:pointer; transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease); }
.seg-btn[aria-pressed="true"] { background:var(--text); color:var(--canvas); box-shadow:var(--shadow-sm); }
.seg-note { padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent-text-on-soft); font-size:.75rem; font-weight:700; }
.switch { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 6px; border:0; background:none; color:var(--text); font-size:.9375rem; font-weight:500; cursor:pointer; }
.switch-track { position:relative; flex:none; width:42px; height:24px; border-radius:999px; background:var(--text-3); transition:background-color .2s var(--ease); }
.switch-thumb { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--knob); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s var(--ease); }
.switch[aria-checked="true"] .switch-track { background:var(--accent-fill); }
.switch[aria-checked="true"] .switch-thumb { transform:translateX(18px); background:var(--on-accent); }
.pv-in { animation:pv-in .18s var(--ease); }
@keyframes pv-in { from { opacity:.15; } to { opacity:1; } }

.plans { display:grid; gap:20px; margin-top:36px; }
.plan { position:relative; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-card); }
.section-alt .plan { background:var(--canvas); }
.plan-body { display:flex; flex:1; flex-direction:column; padding:24px; }
.plan-hl { border:2px solid var(--accent-fill); box-shadow:var(--shadow-stage); }
.plan-hl .plan-body { padding:23px; }
.plan-flag { position:absolute; top:-13px; left:22px; margin:0; padding:3px 12px; border-radius:999px; background:var(--accent-fill); color:var(--on-accent); font-size:.75rem; font-weight:700; line-height:1.6; letter-spacing:.02em; }
.plan-name { margin:0; font-size:1.25rem; letter-spacing:-.01em; }
.plan-tagline { margin:6px 0 0; color:var(--text-2); font-size:.9375rem; line-height:1.5; }
.plan-price { margin-top:20px; }
.price { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px; margin:0; }
.price-amt { font-size:clamp(2.5rem,2rem + 2vw,3.25rem); font-weight:700; line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.plan-compact .price-amt { font-size:clamp(2.25rem,1.9rem + 1.4vw,2.75rem); }
.price-per { color:var(--text-2); font-size:1rem; font-weight:500; }
.price-tax, .price-sub { min-height:1.4em; margin:6px 0 0; color:var(--text-2); font-size:.8125rem; line-height:1.4; font-variant-numeric:tabular-nums; }
.price-tax { font-weight:600; }
.price-sub { margin-top:2px; }
.plan-cta { display:grid; align-content:start; gap:4px; margin-top:20px; }
@media (min-width: 900px) { .has-ask .plan-cta { min-height:92px; } }
.plan-ask { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; color:var(--accent-text); font-size:.875rem; font-weight:600; text-decoration:none; }
.plan-ask:hover { text-decoration:underline; }
.plan-best { margin:16px 0 0; color:var(--text-2); font-size:.875rem; }
.plan-best span { color:var(--text); font-weight:600; }
.plan .ticks { margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
.plans-foot { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:32px; text-align:center; }
.plans-foot .link-arrow { margin-top:0; }
.seats-line { display:inline-flex; align-items:flex-start; gap:8px; margin:0; color:var(--text-2); font-size:.9375rem; text-align:left; }
.seats-line .i { margin-top:3px; }
.seats-line strong { color:var(--text); font-variant-numeric:tabular-nums; }
.plans-note { display:flex; align-items:flex-start; gap:8px; max-width:64ch; margin:18px auto 0; color:var(--text-2); font-size:.875rem; text-align:left; }
.plans-foot .plans-note { margin-top:0; }
.plans-note .i, .plan-why .i { margin-top:3px; }
.plan-why { display:flex; gap:10px; max-width:760px; margin:24px auto 0; padding:14px 16px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--accent-text-on-soft); font-size:.9375rem; }
@media (min-width: 900px) {
  .plans { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
  .plan-tagline { min-height:3em; }
}
@media (max-width: 899.98px) { .plans .plan-hl { order:-1; } }
@media (max-width: 767.98px) { .price-controls.is-sticky { position:static; margin-top:24px; padding:4px 6px; box-shadow:none; backdrop-filter:none; } .seg-btn { padding:8px 14px; } }

.table-card { overflow:hidden; margin-top:36px; border:1px solid var(--border); border-radius:14px; background:var(--canvas); }
.seats-table { width:100%; border-collapse:collapse; font-size:.9375rem; }
.seats-table th, .seats-table td { padding:16px 20px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.seats-table tbody tr:last-child > * { border-bottom:0; }
.seats-table thead th { background:var(--surface-muted); color:var(--text-2); font-size:.8125rem; font-weight:600; }
.seats-table tbody th { font-weight:600; }
.seats-table .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cell-note { display:block; margin-top:2px; color:var(--text-2); font-size:.8125rem; font-weight:400; }

/* compare table: real <table>, sticky header row */
.compare { margin-top:40px; }
.cmp { width:100%; border:1px solid var(--border); border-radius:14px; border-collapse:separate; border-spacing:0; background:var(--surface); font-size:.875rem; }
.cmp thead th { position:sticky; top:var(--header-h); z-index:2; padding:14px 6px; border-bottom:1px solid var(--border-strong); background:var(--surface); font-size:.875rem; font-weight:700; text-align:center; }
.cmp thead th:first-child { border-top-left-radius:13px; }
.cmp thead th:last-child { border-top-right-radius:13px; }
.cmp thead .c-feat { padding-left:14px; text-align:left; }
.cmp thead .c-hl { color:var(--accent-text); }
.cmp tbody th[scope="row"] { padding:12px 6px 12px 14px; font-weight:500; text-align:left; }
.cmp tbody th[scope="row"] .chip { margin:4px 0 0; }
.cmp td { padding:12px 6px; color:var(--text-2); text-align:center; vertical-align:middle; }
.cmp tbody tr > * { border-bottom:1px solid var(--border); }
.cmp tbody:last-child tr:last-child > * { border-bottom:0; }
.cmp td:last-child { background:color-mix(in srgb,var(--accent-soft) 32%,transparent); }
.cmp-g th { padding:10px 14px; background:var(--surface-muted); color:var(--text-2); font-size:.75rem; font-weight:700; letter-spacing:.07em; text-align:left; text-transform:uppercase; }
.cmp .cell-i { display:inline-block; width:20px; height:20px; vertical-align:middle; }
.c-yes .cell-i { color:var(--accent-fill); stroke-width:2.6; }
.c-no .cell-i { color:var(--text-3); }
.c-text { color:var(--text); font-size:.8125rem; line-height:1.4; }
.more-btn { display:none; margin:16px auto 0; }
.more-btn .i { transition:transform .2s var(--ease); }
.is-open > .more-btn .i, .is-open .more-btn .i { transform:rotate(180deg); }
.c-soon, .c-soon .cell-i { color:var(--warning-text); }
.c-soon-t { display:block; font-size:.8125rem; font-weight:600; line-height:1.3; }
.c-price strong { color:var(--text); font-variant-numeric:tabular-nums; }
@media (max-width: 767.98px) {
  .cmp, .cmp thead, .cmp tbody { display:block; }
  .cmp { overflow:clip; }
  .cmp tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cmp thead { position:sticky; top:var(--header-h); z-index:2; background:var(--surface); border-bottom:1px solid var(--border-strong); }
  .cmp thead th { position:static; border-bottom:0; }
  .cmp thead .c-feat { display:none; }
  .cmp tbody th[scope="row"], .cmp-g th { grid-column:1 / -1; }
  .cmp tbody th[scope="row"] { padding:12px 14px 2px; border-bottom:0; }
  .cmp td { padding:6px 6px 12px; }
  .cmp .c-text, .cmp .cell-note { font-size:.8125rem; }
  .js .compare:not(.is-open) .cmp-group.is-extra { display:none; }
  .js .more-btn { display:flex; }
}
@media (min-width: 768px) {
  .cmp { font-size:.9375rem; }
  .cmp thead .c-feat { width:46%; padding-left:20px; }
  .cmp tbody th[scope="row"] { padding:14px 12px 14px 20px; }
  .cmp tbody th[scope="row"] .chip { margin:0 0 0 6px; }
  .cmp-g th { padding:12px 20px; }
  .c-text { font-size:.875rem; }
}

.notes { padding:20px 24px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.notes-h { margin:0 0 10px; font-size:1rem; }
.notes ul { display:grid; gap:8px; margin:0; padding-left:20px; color:var(--text-2); font-size:.9375rem; }

/* --- FAQ */
.faq { display:grid; gap:12px; margin-top:40px; }
.faq-item { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); transition:border-color .15s; }
.section-alt .faq-item { background:var(--canvas); }
.faq-item[open] { border-color:var(--border-strong); }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:16px 20px; font-size:1.0625rem; font-weight:600; line-height:1.4; list-style:none; cursor:pointer; border-radius:var(--r-md); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-i { color:var(--text-2); transition:transform .2s var(--ease); }
.faq-item[open] .faq-i { transform:rotate(180deg); }
.faq-a { padding:0 20px 18px; color:var(--text-2); }
.faq-a p { margin:0 0 10px; }
.faq-a p:last-child { margin-bottom:0; }

/* --- CTA band */
.cta-section { padding-top:0; }
.section-alt + .cta-section { padding-top:clamp(64px,8vw,112px); }
.cta-card { position:relative; isolation:isolate; overflow:hidden; padding:clamp(36px,6vw,80px) clamp(20px,5vw,64px); border:1px solid var(--band-border); border-radius:var(--r-xl); background:var(--band-bg); color:var(--band-text); text-align:center; }
.cta-card::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 80% at 50% 0%,rgba(34,197,94,.28),transparent 70%),radial-gradient(40% 60% at 100% 100%,rgba(30,136,229,.14),transparent 70%); }
.cta-card::after { content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.2px); background-size:22px 22px; mask-image:linear-gradient(transparent,black 40%,transparent); }
.cta-card h2 { max-width:22ch; margin:0 auto; color:var(--band-text); font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem); line-height:1.12; letter-spacing:-.028em; }
.cta-card p { max-width:56ch; margin:16px auto 0; color:var(--band-text-2); font-size:1.0625rem; }
.cta-row { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px; }
.cta-card .btn-primary { background:var(--accent-bright); color:var(--on-accent-bright); }
.cta-card .btn-primary:hover { background:var(--accent-bright-hover); }
.cta-card .btn-secondary { background:transparent; color:var(--band-text); border-color:var(--band-line); box-shadow:none; }
.cta-card .btn-secondary:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }
.cta-card :focus-visible { outline-color:var(--accent-bright); }

/* --- footer */
.site-footer { padding:56px 0 24px; border-top:1px solid var(--border); background:var(--surface); font-size:.9375rem; }
.footer-grid { display:grid; gap:32px 24px; grid-template-columns:1fr 1fr; }
.footer-brand { grid-column:1 / -1; }
.footer-brand p { max-width:36ch; margin:12px 0 0; color:var(--text-2); }
.footer-h { margin:0 0 6px; color:var(--text-2); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.site-footer ul { margin:0; padding:0; list-style:none; }
.footer-col a, .footer-mail { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--text); text-decoration:none; }
.footer-col a:hover, .footer-mail:hover { color:var(--accent-text); text-decoration:underline; }
.footer-types { grid-column:1 / -1; }
.footer-types ul { columns:2; column-gap:24px; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 24px; margin-top:40px; padding-top:20px; border-top:1px solid var(--border); color:var(--text-2); font-size:.875rem; }
.footer-bottom p { margin:0; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns:repeat(3,1fr); }
  .footer-types { grid-column:auto; }
  .footer-types ul { columns:1; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns:1.3fr .8fr 1.5fr .8fr; }
  .footer-brand { grid-column:auto; }
  .footer-types ul { columns:2; }
}
@media (max-width: 767.98px) { .js .site-footer { padding-bottom:calc(96px + env(safe-area-inset-bottom)); } }

/* --- sticky mobile CTA */
.mobile-cta { display:none; }
@media (max-width: 767.98px) {
  .js .mobile-cta { position:fixed; right:0; bottom:0; left:0; z-index:40; display:flex; gap:8px; padding:10px max(var(--gutter),env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
    background:var(--header-bg); backdrop-filter:blur(14px); border-top:1px solid var(--border);
    transform:translateY(110%); visibility:hidden; transition:transform .25s var(--ease),visibility 0s linear .25s; }
  .js .mobile-cta.is-shown { transform:none; visibility:visible; transition:transform .25s var(--ease); }
  .mobile-cta .btn { flex:1; }
}

/* --- inner page heroes */
.page-hero { padding:clamp(48px,7vw,96px) 0 clamp(24px,3vw,40px); }
.page-hero h1 { margin:0; font-size:clamp(2rem,1.5rem + 2.2vw,3.125rem); line-height:1.08; letter-spacing:-.032em; }
.page-hero.is-center { text-align:center; }
.page-hero.is-center h1 { max-width:20ch; margin-inline:auto; }
.page-hero.is-center .lead { max-width:60ch; margin-inline:auto; }
.legend { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin-top:28px; color:var(--text-2); font-size:.8125rem; }
.legend p { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:0; }
.legend-h { margin-right:4px; color:var(--text); font-size:.6875rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.legend-t { margin-left:2px; }

/* --- features */
.cat-nav { position:sticky; top:var(--header-h); z-index:30; border-block:1px solid var(--border); background:var(--header-bg); backdrop-filter:blur(14px); }
.cat-wrap { position:relative; }
.cat-btn { position:absolute; top:50%; z-index:1; display:none; place-items:center; width:36px; height:36px; margin-top:-18px; padding:0; border:1px solid var(--border-strong); border-radius:50%; background:var(--surface); color:var(--text); box-shadow:var(--shadow-card); cursor:pointer; }
.cat-btn:hover { border-color:var(--text-3); }
.cat-prev { left:max(4px,calc(var(--gutter) - 14px)); }
.cat-next { right:max(4px,calc(var(--gutter) - 14px)); }
@media (min-width: 768px) { .cat-btn:not([hidden]) { display:grid; } }
.cat-nav ul { display:flex; gap:6px; margin:0; padding:8px 0; overflow-x:auto; list-style:none; scrollbar-width:none; scroll-padding-inline:48px;
  mask-image:linear-gradient(90deg,transparent,black 12px,black calc(100% - 28px),transparent); }
.cat-nav ul::-webkit-scrollbar { display:none; }
.cat-nav li:first-child { padding-left:4px; }
.cat-nav li:last-child { padding-right:24px; }
.cat-nav a { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-2); font-size:.875rem; font-weight:600; text-decoration:none; white-space:nowrap; transition:background-color .15s,color .15s,border-color .15s; }
.cat-nav a:hover { color:var(--text); border-color:var(--border-strong); }
.cat-nav a[aria-current="true"] { border-color:var(--text); background:var(--text); color:var(--canvas); }
.feat-cat { scroll-margin-top:calc(var(--header-h) + 62px); }
.cat-head { display:grid; gap:28px; align-items:center; }
.cat-intro { max-width:640px; }
.cat-intro h2 { margin:16px 0 0; font-size:clamp(1.625rem,1.3rem + 1.4vw,2.25rem); line-height:1.15; letter-spacing:-.022em; }
.cat-count { display:inline-flex; margin:14px 0 0; padding:3px 10px; border-radius:999px; background:var(--surface-muted); color:var(--text-2); font-size:.8125rem; font-weight:600; }
.cat-media .frame-phone { --phone-w:220px; margin-inline:auto; }
@media (max-width: 1023.98px) {
  .media-is-phone .cat-media { height:360px; overflow:hidden; mask-image:linear-gradient(black 72%,transparent); }
}
@media (min-width: 1024px) {
  .cat-head.has-media { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; }
  .cat-head.media-is-phone { grid-template-columns:minmax(0,1fr) auto; }
  .cat-head.media-is-phone .cat-media { padding-right:48px; }
}
.feat-grid { display:grid; gap:12px; margin:40px 0 0; padding:0; list-style:none; }
.feat { display:flex; flex-direction:column; padding:18px 18px 16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); scroll-margin-top:calc(var(--header-h) + 72px); }
.section-alt .feat { background:var(--canvas); }
.feat.is-later { border-style:dashed; border-color:var(--border-strong); }
.feat-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.feat-name { margin:0; font-size:1rem; line-height:1.35; }
.feat-benefit { margin:6px 0 0; color:var(--text-2); font-size:.9375rem; line-height:1.55; }
.feat-surf { margin:auto 0 0; padding-top:12px; color:var(--text-2); font-size:.75rem; line-height:1.45; }
@media (max-width: 767.98px) {
  .js .feat-cat:not(.is-open) .feat.is-extra { display:none; }
  .feat { padding:14px 16px; }
  .feat-benefit { font-size:.9063rem; }
}
@media (min-width: 640px) { .feat-grid { grid-template-columns:1fr 1fr; } }
@media (min-width: 1024px) { .feat-grid { grid-template-columns:repeat(3,1fr); gap:14px; } }

/* --- type pages */
.hero-type { padding-top:20px; }
.crumbs ol { display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; margin:0 0 20px; padding:0; list-style:none; color:var(--text-2); font-size:.875rem; }
.crumbs li { display:inline-flex; align-items:center; gap:6px; }
.crumbs a { display:inline-flex; align-items:center; min-height:44px; color:var(--text-2); text-decoration:none; }
.crumbs a:hover { color:var(--text); text-decoration:underline; }
.crumbs [aria-current] { color:var(--text); font-weight:500; }
.hero-media { position:relative; display:flex; justify-content:center; }
.hero-media.media-phone .frame-phone { --phone-w:248px; }
.hero-media .frame-desktop { width:100%; }
.hero-media::before { content:""; position:absolute; inset:0 0 -10%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side,var(--glow),transparent 85%); }
@media (max-width: 767.98px) {
  .hero-media-d { display:none; }
  .hero-media.media-phone, .hero-media-m { height:380px; overflow:hidden; margin-inline:calc(-1 * var(--gutter)); mask-image:linear-gradient(black 70%,transparent); }
  .hero-type .hero-media.media-phone .frame-phone, .hero-media-m .frame-phone { --phone-w:236px; }
}
@media (min-width: 768px) { .hero-type { padding:24px 0 72px; } .hero-media-m { display:none; } }
.media-stack { padding-bottom:32px; }
.stack { position:relative; width:100%; max-width:440px; margin-inline:auto; padding-bottom:28px; }
.stack-card { border:1px solid var(--border); border-radius:20px; background:var(--surface); box-shadow:var(--shadow-stage); }
.stack-back, .stack-mid { position:absolute; bottom:0; left:10%; width:80%; height:50%; background:var(--surface-muted); }
.stack-mid { bottom:14px; left:5%; width:90%; }
.stack-front { position:relative; padding:20px; }
.stack-head { display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.stack-title { margin:0; font-size:1.125rem; font-weight:700; line-height:1.3; }
.stack-sub { margin:2px 0 0; color:var(--text-2); font-size:.875rem; }
.stack-list { display:grid; gap:10px; margin:16px 0 0; padding:0; list-style:none; }
.stack-list li { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--canvas); font-size:.9375rem; font-weight:600; line-height:1.35; }
.stack-list .icon-chip { width:34px; height:34px; border-radius:9px; }
.stack-name { flex:1; min-width:0; }
.stack-ok { width:22px; height:22px; padding:4px; border-radius:50%; background:var(--accent-fill); color:var(--on-accent); stroke-width:2.6; }
@media (min-width: 1024px) {
  .hero-type { padding-bottom:88px; }
  .hero-type .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:48px; }
  .hero-type .display-sm { font-size:clamp(2.25rem,1.2rem + 2vw,3rem); }
  .hero-type .hero-grid:has(.hero-media.media-phone) { grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); }
  .hero-type .hero-grid:has(.media-stack) { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
  .hero-type.no-media .hero-grid { grid-template-columns:1fr; }
  .hero-media.media-phone .frame-phone { --phone-w:264px; }
}

.pain-grid { display:grid; gap:16px; margin:40px 0 0; padding:0; list-style:none; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); }
.pain { display:grid; align-content:start; gap:14px; padding:22px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--canvas); }
.pain p { display:flex; gap:12px; margin:0; line-height:1.5; }
.pain-q { color:var(--text-2); }
.pain-a { padding-top:14px; border-top:1px dashed var(--border-strong); color:var(--text); font-weight:500; }
.pain-i { width:22px; height:22px; margin-top:1px; padding:4px; border-radius:50%; stroke-width:2.6; }
.pain-q .pain-i { background:var(--danger-soft); color:var(--danger-text); }
.pain-a .pain-i { background:var(--accent-soft); color:var(--accent-text-on-soft); }

.mod-grid { display:grid; gap:12px; margin:40px 0 0; padding:0; list-style:none; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.mod { display:flex; gap:14px; padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.mod.is-later { border-style:dashed; border-color:var(--border-strong); }
.mod-name { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:2px 0 0; font-size:1rem; line-height:1.35; }
.mod p { margin:4px 0 0; color:var(--text-2); font-size:.9375rem; line-height:1.55; }

.day { display:grid; gap:16px; margin:48px 0 0; padding:0; list-style:none; }
.day-step { position:relative; display:flex; flex-direction:column; gap:14px; overflow:hidden; padding:24px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--canvas); }
.day-num { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--accent-fill); color:var(--on-accent); font-size:.875rem; font-weight:700; }
.day-copy h3 { margin:0; font-size:1.125rem; letter-spacing:-.01em; }
.day-copy p { margin:6px 0 0; color:var(--text-2); }
.day-media { display:flex; justify-content:center; align-items:flex-start; height:280px; margin:auto -24px -24px; padding:22px 20px 0; overflow:hidden; background:radial-gradient(90% 90% at 50% 0%,var(--accent-soft),transparent 70%),var(--surface-muted); border-top:1px solid var(--border); }
.day-media.media-phone .frame-phone { --phone-w:190px; }
.day-media.media-desktop { align-items:center; padding:20px; }
.day-media.media-desktop .frame-desktop { width:100%; }
@media (min-width: 768px) {
  .day { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .day[data-steps="2"], .day[data-steps="4"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .day.some-media { align-items:start; }
}
@media (min-width: 1024px) { .day[data-steps="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.day-split { display:grid; gap:20px; margin-top:48px; }
.day.day-stack { grid-template-columns:1fr; gap:12px; margin:0; }
.day-stack .day-step { flex-direction:row; align-items:flex-start; gap:16px; padding:20px; }
.day-stack .day-num { flex:none; }
.day-aside { display:flex; flex-direction:column; margin:0; }
.day-aside .day-media { height:360px; margin:0; border:1px solid var(--border); border-radius:var(--r-lg); }
.day-aside .day-media.media-phone .frame-phone { --phone-w:220px; }
.day-aside figcaption { margin-top:10px; color:var(--text-2); font-size:.875rem; text-align:center; }
@media (min-width: 768px) {
  .day-split { grid-template-columns:minmax(0,1fr) minmax(0,300px); }
  .day-split.is-desk { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
  .day-aside { contain:size; min-height:440px; }
  .day-aside .day-media { flex:1; height:auto; }
}

/* --- downloads */
.recommend { padding:0 0 8px; }
.recommend[hidden] { display:none; }
.rec-card { padding:24px; border:2px solid var(--accent-fill); border-radius:20px; background:var(--surface); box-shadow:var(--shadow-stage); }
.rec-card .eyebrow { margin-bottom:14px; }
.rec-os[hidden] { display:none; }
.rec-h { margin:0 0 14px; font-size:1.25rem; letter-spacing:-.01em; }
.rec-card .dl-stores, .dl-grid.rec-grid { margin-top:0; grid-template-columns:1fr; }
.rec-grid .dl-btn { background:var(--surface); }
.rec-ios { margin:0; font-size:1rem; }
.nw { white-space:nowrap; }
.rec-card .link-arrow { margin-top:8px; }
.dl-list { display:grid; gap:20px; }
.dl-app { padding:clamp(20px,3.4vw,32px); border:1px solid var(--border); border-radius:20px; background:var(--surface); box-shadow:var(--shadow-card); scroll-margin-top:calc(var(--header-h) + 16px); }
.dl-head { display:flex; align-items:flex-start; gap:16px; }
.dl-head h2 { margin:2px 0 0; font-size:clamp(1.375rem,1.2rem + .8vw,1.625rem); letter-spacing:-.02em; }
.dl-what { margin:6px 0 0; color:var(--text-2); }
.dl-meta { display:inline-flex; align-items:center; gap:6px; margin:12px 0 0; padding:4px 10px; border-radius:999px; background:var(--surface-muted); color:var(--text-2); font-size:.8125rem; font-weight:500; }
.dl-stores { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.store-btn { display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:8px 20px 8px 16px; border-radius:12px; background:var(--text); color:var(--canvas); text-decoration:none; transition:transform .15s var(--ease),box-shadow .15s; }
.store-btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-pop); }
.store-i { width:22px; height:22px; }
.store-small { display:block; font-size:.6875rem; line-height:1.1; opacity:.8; }
.store-name { display:block; font-size:1.0625rem; font-weight:600; line-height:1.25; }
.dl-playnote { display:flex; align-items:flex-start; gap:8px; margin:12px 0 0; color:var(--text-2); font-size:.8125rem; }
.dl-playnote .i { margin-top:2px; }
.dl-grid { display:grid; gap:10px; margin:20px 0 0; padding:0; list-style:none; }
.dl-btn { display:flex; align-items:center; gap:12px; min-height:64px; padding:12px 14px; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--canvas); color:var(--text); text-decoration:none; transition:border-color .15s,background-color .15s; }
.dl-btn:hover { border-color:var(--accent-fill); background:var(--surface); }
.dl-ic { display:grid; place-items:center; flex:none; width:40px; height:40px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.dl-txt { flex:1; min-width:0; }
.dl-label { display:block; font-weight:600; line-height:1.3; }
.dl-file { display:block; margin-top:2px; color:var(--text-2); font-size:.75rem; overflow-wrap:anywhere; }
.dl-arrow { width:18px; height:18px; color:var(--text-2); }
.dl-btn:hover .dl-arrow { color:var(--accent-text); }
.dl-note { margin:6px 4px 0; color:var(--text-2); font-size:.75rem; }
.dl-na { margin-top:20px; padding:14px 16px; border-radius:var(--r-md); background:var(--surface-muted); }
.dl-sub { margin:0 0 8px; color:var(--text-2); font-size:.75rem; letter-spacing:.07em; text-transform:uppercase; }
.dl-na ul, .dl-notes { display:grid; gap:8px; margin:0; padding:0; list-style:none; color:var(--text-2); font-size:.875rem; }
.dl-na li, .dl-notes li { display:flex; align-items:flex-start; gap:8px; }
.dl-na .i, .dl-notes .i { margin-top:2px; }
.dl-notes { margin-top:16px; }
.dl-web-ctas { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
@media (max-width: 479.98px) { .dl-head { flex-direction:column; gap:12px; } }
@media (min-width: 640px) { .dl-grid { grid-template-columns:1fr 1fr; } }
.install-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:40px; }
.install-card { flex:1 1 100%; padding:22px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--canvas); }
@media (min-width: 640px) { .install-card { flex:0 1 calc((100% - 16px) / 2); } }
@media (min-width: 1024px) { .install-card { flex-basis:calc((100% - 32px) / 3); } }
.install-card h3 { margin:0 0 10px; font-size:1.0625rem; }
.install-card ol { display:grid; gap:6px; margin:0; padding-left:20px; color:var(--text-2); font-size:.9375rem; }

/* --- legal */
.legal-page .container { max-width:calc(780px + 2 * var(--gutter)); }
.legal-page .legal-hero { padding:clamp(48px,7vw,88px) 0 36px; border-bottom:1px solid var(--border); text-align:center; }
.legal-eyebrow { display:inline-block; margin-bottom:12px; color:var(--accent-text); font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.legal-title { margin:0 0 18px; font-size:clamp(2rem,1.5rem + 2.2vw,3rem); line-height:1.1; letter-spacing:-.03em; }
.legal-updated { display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-2); font-size:.8125rem; }
.legal-updated svg { width:14px; height:14px; }
.legal-wrap { padding:40px 0 72px; }
.legal-meta { margin:0 0 28px; color:var(--text-2); font-size:.875rem; }
.legal-toc { margin:0 0 44px; padding:22px 24px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.legal-toc-title { margin:0 0 12px; color:var(--text-2); font-size:.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.legal-toc ol { margin:0; padding-left:20px; font-size:.9375rem; }
.legal-toc li { break-inside:avoid; color:var(--text-3); line-height:1.5; }
.legal-toc a { display:inline-flex; align-items:center; min-height:44px; padding-block:4px; color:var(--text); text-decoration:none; }
.legal-toc a:hover { color:var(--accent-text); text-decoration:underline; }
.legal-section { margin-top:32px; padding-top:32px; border-top:1px solid var(--border); scroll-margin-top:calc(var(--header-h) + 20px); }
.legal-section:first-of-type { margin-top:0; padding-top:0; border-top:0; }
.legal-section h2 { margin:0 0 14px; font-size:1.375rem; letter-spacing:-.012em; }
.legal-section h3 { margin:24px 0 8px; font-size:1.0625rem; }
.legal-section p, .legal-section li { color:var(--text-2); font-size:1rem; line-height:1.75; }
.legal-section p { margin:0 0 14px; }
.legal-section ul, .legal-section ol { margin:0 0 16px; padding-left:24px; }
.legal-section li { margin:6px 0; }
.legal-section strong { color:var(--text); }
.legal-section a, .legal-crosslink a { color:var(--accent-text); font-weight:500; }
.legal-crosslink { margin-top:48px; padding:18px 20px; border-radius:var(--r-md); background:var(--surface-muted); color:var(--text-2); font-size:.9375rem; }
.legal-page table { width:100%; margin:0 0 16px; border-collapse:collapse; font-size:.9375rem; }
.legal-page th, .legal-page td { padding:10px 12px; border:1px solid var(--border); text-align:left; vertical-align:top; }
@media (min-width: 768px) { .legal-toc ol { columns:2; column-gap:32px; } }

/* --- 404 */
.nf { min-height:62vh; padding-bottom:clamp(64px,8vw,112px); }
.nf h1 { font-size:clamp(2.25rem,1.6rem + 3vw,3.5rem); }
.nf-links { display:grid; gap:10px; margin:36px 0 0; padding:0; list-style:none; }
@media (min-width: 480px) { .nf-links { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.nf-label { flex:1; min-width:0; }
.nf-links a { display:flex; align-items:center; gap:12px; height:100%; min-height:64px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); font-weight:600; text-decoration:none; transition:border-color .15s,transform .15s var(--ease); }
.nf-links a:hover { border-color:var(--accent-fill); transform:translateY(-2px); }
.nf-h { margin:44px 0 12px; font-size:1rem; }
.nf-types { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.nf-types a { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text); font-size:.875rem; font-weight:500; text-decoration:none; }
.nf-types a:hover { border-color:var(--accent-fill); }
.nf-help { margin:32px 0 0; color:var(--text-2); }

/* --- motion */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .type-tile, .feat, .mod, .pain, .day-step, .app-card, .install-card, .faq-item, .job .media-panel {
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
  }
}
@keyframes rise { from { transform:translateY(14px); } to { transform:none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

@media (max-width: 767.98px) {
  .badge, .chip, .pills li, .seg-note, .plan-flag, .feat-surf, .legend-h, .dl-file, .store-small, .eyebrow, .footer-h, .job-num, .cmp-g th, .dl-sub, .legal-toc-title, .legal-eyebrow, .cell-note { font-size:.8125rem; }
  .badge, .chip { height:24px; }
  .dl-note { font-size:.875rem; }
}

@media print {
  .site-header, .mobile-cta, .cta-section, .price-controls, .cat-nav { display:none !important; }
  body { background:white; }
}