/* ===================================================================
   ODOMETRIC public website :: FLOOR (2026-09-14)

   The app moved to "Floor" on 2026-09-13: a lavender wash, frosted
   glass, photo-first cards, floating chrome. This sheet puts the site
   on the same surface, with the same tokens copied from app/globals.css,
   so the landing page and the screen it sells are one product.

   The class names are the ones website/pages/*.html and website/posts
   were written against. They are kept on purpose: the content pages are
   composed through _shell.html at request time and never touched here.

   Indigo acts; the ledger colours report. Plus Jakarta Sans + Roboto
   Mono. Glass is frost (no blur) on anything repeated, real blur only on
   the few things that float.
   =================================================================== */

:root{
  --indigo:#5B4EE8;
  --indigo-700:#4437C9;
  --indigo-600:#6D61EC;
  --indigo-300:#9C93F5;
  --indigo-50:#EEF0FA;

  /* One hue (2026-09-21). The site is indigo and black, the same as the
     product, so the names below keep their jobs and lose their hues:
     emerald was "this is good", amber "this is waiting", danger "this is
     wrong". They now sit at three different weights of the one ladder.
     Every rule that already asks for var(--emerald) inherits it. */
  --emerald:#5B4EE8;
  --emerald-ink:#4437C9;
  --emerald-50:#EEF0FA;

  --amber:#7B8199;
  --amber-ink:#4A5069;
  --amber-50:#F2F3F8;

  --sky:#9AA0B4;
  --danger:#1A1D2E;

  --white:#FFFFFF;
  --canvas:#F1F2FA;
  --slate-50:#F8F9FD;
  --slate-100:#F0F2FA;
  --border:#E8EAF5;
  --border-strong:#D6DAED;
  --ink:#1A1D2E;
  --ink-2:#4A5069;
  --ink-3:#6B7291;
  --ink-4:#949BB5;

  --glass:rgba(255,255,255,.68);
  --glass-edge:rgba(255,255,255,.85);

  --shadow-card:0 1px 2px rgba(26,29,46,.04),0 16px 36px -18px rgba(26,29,46,.22);
  --shadow-lift:0 4px 10px rgba(26,29,46,.05),0 26px 48px -20px rgba(26,29,46,.30);
  --shadow-pop:0 14px 34px -10px rgba(26,29,46,.24),0 2px 8px -2px rgba(26,29,46,.08);
  --shadow-brand:0 14px 28px -12px rgba(91,78,232,.75);

  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:32px; --r-pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:150ms var(--ease);
  --t-base:220ms var(--ease);
  --t-slow:320ms var(--ease);

  --font-ui:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-mono:'Roboto Mono',ui-monospace,monospace;

  --pad:clamp(1rem,4vw,3.5rem);
  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-ui);font-size:16px;line-height:1.6;
  color:var(--ink-2);background:var(--canvas);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* The wash. Fixed, behind everything, and drifting very slowly so the
   page feels lit rather than painted. Oversized so the drift never shows
   an edge. */
body::before{
  content:"";position:fixed;inset:-12%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 46% at 88% 6%, rgba(91,78,232,.22), transparent 70%),
    radial-gradient(50% 42% at 4% 34%, rgba(91,78,232,.13), transparent 70%),
    radial-gradient(56% 44% at 92% 92%, rgba(91,78,232,.16), transparent 72%),
    radial-gradient(40% 36% at 30% 96%, rgba(26,29,46,.07), transparent 72%);
  animation:drift 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2.5%,1.5%,0)}}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button,a,input,select,[tabindex]{touch-action:manipulation}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.skip-link{position:absolute;left:-999px;top:0;z-index:300;background:var(--indigo);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 12px 0;font-weight:700;font-size:.9rem}
.skip-link:focus{left:0}

.wrap{width:min(1240px,calc(100% - var(--pad)*2));margin-inline:auto}

/* ===================================================================
   SURFACES
   =================================================================== */
.glass{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card)}
.glass-blur{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow-card);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-blur,.nav-in,.sheet,.float{background:rgba(255,255,255,.94)}
}
@media (prefers-reduced-transparency:reduce){
  .glass,.glass-blur,.nav-in,.sheet,.float,.car,.pill,.plan,.qa,.band-item,.art{background:rgba(255,255,255,.96);-webkit-backdrop-filter:none;backdrop-filter:none}
  body::before{animation:none}
}

/* ===================================================================
   ATOMS
   =================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;border-radius:var(--r-md);
  font-size:15px;font-weight:700;white-space:nowrap;
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),filter var(--t-fast),color var(--t-fast);
}
.btn svg{width:17px;height:17px;flex:none}
.btn-sm{height:40px;padding:0 16px;font-size:13.5px;border-radius:14px}
.btn-lg{height:56px;padding:0 28px;font-size:16px;border-radius:20px}
.btn-primary{background:linear-gradient(180deg,#6D61EC,#4437C9);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.8);color:var(--ink);border:1px solid #fff;box-shadow:0 8px 20px -14px rgba(26,29,46,.4)}
.btn-ghost:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-card)}
.btn-light{background:#fff;color:var(--indigo-700);box-shadow:0 12px 28px -14px rgba(26,29,46,.5)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.btn-outline-light{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.btn-wa{background:rgba(91,78,232,.12);color:var(--indigo-700)}
.btn-wa:hover{background:rgba(91,78,232,.20);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.75);border:1px solid #fff;color:var(--indigo-700);
  border-radius:var(--r-pill);padding:7px 14px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.2;
  box-shadow:0 8px 20px -14px rgba(26,29,46,.4);
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--emerald);flex:none}

.chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border-radius:var(--r-pill);font-size:12px;font-weight:700}
.chip svg{width:13px;height:13px}
.chip-em{background:var(--emerald-50);color:var(--emerald-ink)}
.chip-am{background:var(--amber-50);color:var(--amber-ink)}
.chip-sa{background:var(--indigo-50);color:var(--indigo-700)}

/* A label that sits on a photograph: dark glass, white type. */
.photo-chip{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  border-radius:var(--r-pill);font-size:11.5px;font-weight:700;line-height:1;white-space:nowrap;
  color:#fff;background:rgba(26,29,46,.42);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.22);
}
.photo-chip-sm{height:24px;padding:0 8px;gap:5px;font-size:10.5px}
.photo-chip svg{width:12px;height:12px}

.plate{
  display:inline-flex;align-items:center;font-family:var(--font-mono);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--indigo-700);
  background:rgba(91,78,232,.10);border-radius:8px;padding:5px 9px;white-space:nowrap;
}

.h1{
  font-size:clamp(2.6rem,1.55rem + 3.7vw,4.5rem);line-height:1.02;
  font-weight:800;letter-spacing:-.045em;color:var(--ink);text-wrap:balance;
}
/* Ran indigo into emerald until 2026-09-21. One hue now, so it runs
   indigo into black instead and the headline still travels. */
.h1 .hot{
  background:linear-gradient(92deg,var(--indigo) 0%,var(--indigo-700) 52%,var(--ink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.h2{
  font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem);line-height:1.08;
  font-weight:800;letter-spacing:-.035em;color:var(--ink);text-wrap:balance;
}
.h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.8rem);line-height:1.18;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.lede{font-size:clamp(1.02rem,.97rem + .35vw,1.2rem);line-height:1.65;color:var(--ink-3)}

.sec{padding-block:clamp(4rem,8vw,7.5rem)}
.sec-head{max-width:58ch;margin-bottom:clamp(2.25rem,4vw,3.5rem)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .h2{margin:16px 0 14px}

/* ===================================================================
   NAV
   A floating glass pill rather than a bar, the same object as the
   app's tab bar turned the other way up. The header itself has no
   pointer events, so the page around the pill stays clickable.
   =================================================================== */
.nav{position:sticky;top:0;z-index:100;padding-top:12px;pointer-events:none}
.nav-in{
  pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--nav-h);padding:0 8px 0 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--t-base),background var(--t-base);
}
.nav.is-stuck .nav-in{background:rgba(255,255,255,.74);box-shadow:0 18px 40px -16px rgba(26,29,46,.38)}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;flex:none;display:grid;place-items:center}
.brand-mark img{width:34px;height:34px;display:block}
.brand-name{font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:600;color:var(--ink-2);transition:background var(--t-fast),color var(--t-fast);
}
.nav-links a:hover{background:rgba(255,255,255,.85);color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-cta .btn{border-radius:var(--r-pill)}
.nav-burger{
  display:none;width:44px;height:44px;border-radius:50%;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:background var(--t-fast);
}
.nav-burger:hover{background:rgba(255,255,255,.85)}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform var(--t-base),opacity var(--t-base)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.sheet{
  display:none;flex-direction:column;gap:2px;
  position:fixed;left:var(--pad);right:var(--pad);top:calc(var(--nav-h) + 20px);z-index:99;
  padding:10px;border-radius:24px;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 50px -18px rgba(26,29,46,.4);
  transform-origin:top center;
}
.sheet.is-open{display:flex;animation:sheet-in .24s var(--ease) both}
@keyframes sheet-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.sheet a:not(.btn){display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:14px;font-size:15.5px;font-weight:600;color:var(--ink);transition:background var(--t-fast)}
.sheet a:not(.btn):hover{background:rgba(255,255,255,.9)}
.sheet .btn{margin-top:8px;width:100%}
@media (max-width:940px){
  .nav-links,.nav-cta .btn-demo{display:none}
  .nav-burger{display:flex}
}
@media (max-width:400px){
  .nav-in{padding-left:10px}
  .nav .brand-name{display:none}
}

/* ===================================================================
   HERO
   =================================================================== */
.hero{position:relative;padding-top:clamp(2.5rem,6vw,5.5rem);padding-bottom:clamp(3rem,7vw,6rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media (min-width:1060px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.hero-copy .h1{margin:18px 0 20px}
.hero-copy .lede{max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-trust{margin-top:26px;font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:46ch}
.hero-trust b{color:var(--ink-2)}

/* Entrance: the copy rises line by line, then the phones. Only when JS
   is running, so a crawler or a browser with scripts off sees the page
   at rest. */
html.js .hero-copy > *{animation:rise-in .8s var(--ease) backwards}
html.js .hero-copy > :nth-child(1){animation-delay:.05s}
html.js .hero-copy > :nth-child(2){animation-delay:.16s}
html.js .hero-copy > :nth-child(3){animation-delay:.27s}
html.js .hero-copy > :nth-child(4){animation-delay:.38s}
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- the phones ---- */
.stage{position:relative;display:grid;place-items:center;perspective:1600px}
.phone{
  position:relative;width:var(--w,300px);aspect-ratio:390/844;
  border-radius:52px;background:#14162A;padding:9px;
  box-shadow:0 40px 80px -30px rgba(26,29,46,.6),inset 0 0 0 1px rgba(255,255,255,.10);
}
.phone::before{
  content:"";position:absolute;top:19px;left:50%;transform:translateX(-50%);
  width:82px;height:24px;border-radius:999px;background:#0B0C17;z-index:2;
}
/* A status-bar band above the screenshot, so the island sits where a
   phone's does instead of over the app's own top bar. */
.phone-screen{width:100%;height:100%;border-radius:44px;overflow:hidden;background:var(--canvas);display:flex;flex-direction:column}
.phone-screen::before{content:"";flex:none;height:46px;background:var(--canvas)}
.phone-screen img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:top}
.phone-main{
  --w:min(280px,72vw);z-index:2;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s var(--ease);
}
html.js .phone-main{animation:phone-in 1.1s .28s var(--ease) backwards}
@keyframes phone-in{from{opacity:0;transform:translateY(44px) rotateX(10deg)}to{opacity:1;transform:none}}
.phone-side{--w:clamp(180px,20vw,220px);position:absolute;top:50%;z-index:1;display:none;transform:var(--tf)}
.phone-l{left:-3%;--tf:translateY(-46%) rotate(-8deg)}
.phone-r{right:-3%;--tf:translateY(-40%) rotate(8deg)}
html.js .phone-side{animation:side-in 1.1s .55s var(--ease) backwards}
@keyframes side-in{from{opacity:0;transform:translateY(-36%) scale(.9)}to{opacity:1;transform:var(--tf)}}
@media (min-width:1060px){.phone-main{--w:clamp(250px,22vw,300px)}.phone-side{display:block}}

.float{
  position:absolute;z-index:3;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);border-radius:18px;padding:10px 14px 10px 10px;
  box-shadow:0 16px 36px -14px rgba(26,29,46,.32);
  animation:bob 6s ease-in-out infinite alternate;
}
@keyframes bob{from{transform:translateY(-5px)}to{transform:translateY(5px)}}
.float-ico{width:34px;height:34px;border-radius:12px;flex:none;display:grid;place-items:center}
.float-ico.am{background:var(--amber-50);color:var(--amber-ink)}
.float-ico.em{background:var(--emerald-50);color:var(--emerald-ink)}
.float-ico.sa{background:var(--indigo-50);color:var(--indigo-700)}
.float-ico svg{width:17px;height:17px}
.float-t{display:block;font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.25}
.float-s{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.float-1{top:9%;left:0;animation-delay:-2s}
.float-2{bottom:12%;right:0;animation-delay:-4s}
.float-3{top:46%;right:-4%;animation-delay:-1s}
html.js .stage .float{animation:float-in .9s var(--ease) backwards,bob 6s ease-in-out infinite alternate}
html.js .float-1{animation-delay:.8s,-2s}
html.js .float-2{animation-delay:.95s,-4s}
html.js .float-3{animation-delay:1.1s,-1s}
@keyframes float-in{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@media (max-width:620px){.float{display:none}}
@media (min-width:1060px){.float-1{left:-6%}.float-2{right:-6%}}

/* ===================================================================
   PAPERWORK STRIP: a marquee of the documents a sale needs
   =================================================================== */
.trust{padding-block:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,1.5rem)}
.trust-l{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);text-align:center;margin-bottom:16px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:12px;width:max-content;padding-block:6px;animation:marquee 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trust-n{
  display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px 0 14px;
  border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card);
  font-size:14.5px;font-weight:700;color:var(--ink-2);white-space:nowrap;
}
.trust-n i{width:8px;height:8px;border-radius:50%;background:var(--indigo);flex:none}
.trust-n:nth-child(3n) i{background:var(--emerald)}
.trust-n:nth-child(3n+2) i{background:var(--amber)}

/* ===================================================================
   STATS BAND: four glass tiles, the figures counting up on arrival
   =================================================================== */
.band{padding-block:clamp(1rem,2vw,2rem) clamp(2rem,4vw,3rem)}
.band-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:820px){.band-grid{grid-template-columns:repeat(4,1fr);gap:16px}}
.band-item{
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card);
  border-radius:var(--r-lg);padding:20px 20px 18px;
}
.band-v{font-family:var(--font-mono);font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.1;white-space:nowrap}
@media (max-width:480px){.band-v{font-size:1.45rem}}
.band-l{font-size:13px;color:var(--ink-3);margin-top:8px;line-height:1.45}

/* ===================================================================
   MODULES (alternating rows, the real app on a phone)
   =================================================================== */
.mod{
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);align-items:center;
  padding-block:clamp(2rem,4vw,3.5rem);position:relative;isolation:isolate;
}
@media (min-width:960px){
  .mod{grid-template-columns:1fr 1fr}
  .mod.flip .art{order:-1}
}
.mod-n{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--indigo-700);text-transform:uppercase;
}
.mod .h3{margin:12px 0 14px}
.mod-p{font-size:16px;line-height:1.7;color:var(--ink-3);max-width:50ch}
.mod-list{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.mod-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.tick{width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px;background:var(--emerald-50);display:grid;place-items:center}
.tick svg{width:11px;height:11px;color:var(--emerald-ink)}

/* THE ARTEFACT, NOT A PHOTOGRAPH OF ONE

   Every module used to be the same phone on the same tinted panel, five
   times down the page. What a showroom is buying is not an app that looks
   like an app: it is the slip, the schedule and the statement it hands to
   a buyer, an investor and itself. So each module renders the document
   that feature produces, in real type, in HTML. Nothing here is an image,
   so it stays sharp, reads on a phone, and cannot go stale against the
   product the way a screenshot does. */
.art{
  position:relative;z-index:1;justify-self:center;width:100%;max-width:520px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lift);padding:clamp(18px,2.6vw,26px);
}
/* The faint second sheet behind it: a document, not a card. */
.art::after{
  content:"";position:absolute;z-index:-1;left:16px;right:16px;bottom:-9px;height:22px;
  background:#fff;border:1px solid var(--border);border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg);opacity:.7;
}
.art-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.art-lbl{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin:0}
.art-ttl{font-size:15.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:7px 0 0}
.art-sub{font-size:12.5px;color:var(--ink-3);margin:3px 0 0}
.art-plate{
  display:inline-block;font-family:var(--font-mono);font-size:13.5px;font-weight:700;
  letter-spacing:.04em;color:var(--ink);border:1.5px solid var(--border-strong);
  border-radius:8px;padding:4px 8px;background:var(--slate-50);
}
.art-stamp{
  flex:none;display:inline-flex;align-items:center;gap:7px;transform:rotate(-3.5deg);
  border:1.5px solid var(--amber-ink);color:var(--amber-ink);background:var(--amber-50);
  border-radius:9px;padding:6px 11px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.art-stamp svg{width:13px;height:13px}
.art-rows{list-style:none;margin:0;padding:0}
.art-rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--border)}
.art-rows li:last-child{border-bottom:0}
.art-k{font-size:14px;font-weight:600;color:var(--ink-2)}
.art-k small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-4);margin-top:2px}
.art-v{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.art-v.neg{color:var(--ink-3)}
.art-v.pos{color:var(--emerald-ink)}
.art-pill{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  border-radius:999px;padding:4px 9px;white-space:nowrap;
}
.art-pill.hold{color:var(--amber-ink);background:var(--amber-50)}
.art-pill.ok{color:var(--emerald-ink);background:var(--emerald-50)}
.art-pill.wait{color:var(--ink-3);background:var(--slate-100)}
.art-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.art-sig{height:30px;border-bottom:1.5px solid var(--border-strong)}
.art-big{font-family:var(--font-mono);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.art-bar{height:7px;border-radius:99px;background:var(--slate-100);overflow:hidden;margin:14px 0 10px}
.art-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--emerald),var(--emerald-ink))}
.art-note{font-size:12.5px;color:var(--ink-3);margin:12px 0 0;display:flex;align-items:flex-start;gap:8px}
.art-note svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--emerald-ink)}
.art-field{
  display:flex;align-items:center;gap:10px;border:1.5px solid var(--border-strong);border-radius:12px;
  padding:11px 13px;background:var(--slate-50);font-family:var(--font-mono);font-size:14px;color:var(--ink);
}
.art-field svg{width:15px;height:15px;color:var(--ink-4);flex:none}
.art-caret{display:inline-block;width:1.5px;height:16px;background:var(--indigo);margin-left:1px;animation:art-blink 1.1s steps(1) infinite}
@keyframes art-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.art-caret{animation:none}}
.art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:14px 0 2px}
.art-grid div{border-top:1px solid var(--border);padding-top:8px}
.art-gk{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);margin:0}
.art-gv{font-size:14px;font-weight:700;color:var(--ink);margin:3px 0 0}
.art-wa{
  display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:14px;
  background:var(--emerald-50);color:var(--emerald-ink);font-size:13px;font-weight:700;
}
.art-wa svg{width:16px;height:16px;flex:none}

/* ===================================================================
   THE DESK: the same floor in a browser
   =================================================================== */
.browser{
  border-radius:26px;overflow:hidden;
  background:rgba(255,255,255,.72);border:1px solid #fff;box-shadow:var(--shadow-lift);
}
.browser-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(26,29,46,.06)}
.browser-bar i{width:10px;height:10px;border-radius:50%;flex:none}
/* Window buttons on the mock browser: three greys, not three hues. */
.browser-bar i:nth-child(1){background:#C6CAD8}
.browser-bar i:nth-child(2){background:#D7DAE4}
.browser-bar i:nth-child(3){background:#E4E6EE}
.browser-url{
  margin-left:10px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);
  background:rgba(26,29,46,.05);border-radius:8px;padding:5px 12px;
}
.browser img{width:100%;height:auto;display:block}
.desk-points{display:grid;grid-template-columns:1fr;gap:12px;margin-top:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:760px){.desk-points{grid-template-columns:repeat(3,1fr)}}
.desk-point{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card);border-radius:var(--r-lg);padding:18px 20px}
.desk-point b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.desk-point span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:4px;line-height:1.55}

/* ===================================================================
   MARKETPLACE
   =================================================================== */
.mkt-bar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.pill{
  height:40px;padding:0 16px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card);
  font-size:13.5px;font-weight:700;color:var(--ink-2);
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.pill:hover{color:var(--ink);transform:translateY(-1px)}
.pill.is-on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 10px 20px -12px rgba(26,29,46,.7)}
.mkt-count{margin-left:auto;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3)}

.cars{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){.cars{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:1000px){.cars{grid-template-columns:repeat(3,1fr)}}
.car{
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card);
  border-radius:26px;padding:8px;display:flex;flex-direction:column;
  transition:box-shadow var(--t-base),transform var(--t-base);
}
.car:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.car.is-off{display:none}
.car-art{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:20px;background:linear-gradient(160deg,#ECEEFB,#DDE0F2)}
.car-art img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.car:hover .car-art img{transform:scale(1.04)}
.car-badge{position:absolute;top:10px;left:10px}
.car-badge svg{color:#fff}
.car-note{position:absolute;left:10px;bottom:10px}
.car-b{padding:14px 10px 8px;display:flex;flex-direction:column;gap:10px;flex:1}
.car-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
/* No .car-price, deliberately. A Listing has no price field anywhere in the
   product: what a car costs another dealer is the subject of the phone call,
   not a number every showroom in the country can compare. */
.car-nm{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.car-specs{display:flex;flex-wrap:wrap;gap:6px}
.car-specs span{font-size:11px;font-weight:600;color:var(--ink-2);background:rgba(26,29,46,.06);border-radius:var(--r-pill);padding:5px 10px}
.car-f{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.9)}
.car-loc{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.car-f .btn{border-radius:var(--r-pill)}
.empty{padding:40px;text-align:center;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-edge);color:var(--ink-3)}
.empty[hidden]{display:none}

/* ===================================================================
   PRICING
   =================================================================== */
.plans{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;max-width:460px;margin-inline:auto}
@media (min-width:1000px){.plans{grid-template-columns:repeat(3,1fr);gap:20px;max-width:none}}
.plan{
  position:relative;
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card);
  border-radius:var(--r-xl);padding:28px 26px;display:flex;flex-direction:column;
  transition:transform var(--t-base),box-shadow var(--t-base);
}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.plan.is-best{background:rgba(255,255,255,.86);box-shadow:var(--shadow-lift),0 0 0 2px rgba(91,78,232,.35)}
.plan-tag{
  position:absolute;top:-13px;left:26px;background:linear-gradient(180deg,#6D61EC,#4437C9);color:#fff;
  border-radius:var(--r-pill);padding:6px 13px;font-size:11px;font-weight:800;letter-spacing:.04em;box-shadow:var(--shadow-brand);
}
.plan-n{font-size:15px;font-weight:800;color:var(--ink)}
.plan-d{font-size:13px;color:var(--ink-3);margin-top:5px;min-height:38px}
.plan-p{font-family:var(--font-mono);font-size:34px;font-weight:700;color:var(--ink);margin:14px 0 3px;letter-spacing:-.02em}
.plan-p small{font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink-3)}
.plan-u{font-size:12px;color:var(--ink-4)}
.plan .btn{margin:20px 0 22px;width:100%}
.plan-f{display:flex;flex-direction:column;gap:11px}
.plan-f li{display:flex;gap:10px;font-size:13.5px;color:var(--ink-2);align-items:flex-start}

/* ===================================================================
   CTA + FOOTER
   =================================================================== */
.cta-in{
  position:relative;overflow:hidden;text-align:center;color:#fff;
  background:linear-gradient(135deg,#6D61EC 0%,#4437C9 58%,#3B2FB3 100%);
  border-radius:var(--r-2xl);padding:clamp(2.75rem,6vw,5rem) clamp(1.25rem,5vw,4rem);
  box-shadow:0 30px 60px -28px rgba(68,55,201,.7);
}
.cta-in::before,.cta-in::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(40px)}
.cta-in::before{width:360px;height:360px;right:-120px;top:-140px;background:rgba(109,97,236,.38)}
.cta-in::after{width:300px;height:300px;left:-100px;bottom:-140px;background:rgba(255,255,255,.18)}
.cta-in > *{position:relative;z-index:1}
.cta .h2{color:#fff}
.cta-p{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.82);max-width:56ch;margin:16px auto 0}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.cta-note{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.62);margin-top:20px}

.foot{
  background:var(--ink);color:rgba(255,255,255,.66);
  padding-block:clamp(3rem,5vw,4.5rem) 26px;margin-top:clamp(2rem,5vw,4rem);
  border-radius:40px 40px 0 0;
}
.foot-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:520px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (min-width:860px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}}
.foot .brand-name{color:#fff}
.foot-p{font-size:13.5px;line-height:1.65;margin-top:14px;max-width:36ch}
.foot-h{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.foot-l{display:flex;flex-direction:column;gap:10px}
.foot-l a,.foot-l span{font-size:13.5px;transition:color var(--t-fast)}
.foot-l a:hover{color:#fff}
.foot-b{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;
}

/* ===================================================================
   DEMO REQUEST MODAL
   =================================================================== */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-bd{position:absolute;inset:0;background:rgba(26,29,46,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:bdIn var(--t-base) both}
@keyframes bdIn{from{opacity:0}to{opacity:1}}
.modal-card{
  position:relative;width:min(580px,100%);max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-lift);
  animation:cardIn var(--t-slow) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.modal-x{
  position:absolute;top:14px;right:14px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-3);background:var(--canvas);
  transition:background var(--t-fast),color var(--t-fast);
}
.modal-x:hover{background:var(--slate-100);color:var(--ink)}
.modal-x svg{width:17px;height:17px}
.modal-head{padding:28px 28px 0}
.modal-t{font-size:clamp(1.35rem,1.1rem + .9vw,1.7rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:14px 0 8px}
.modal-s{font-size:14.5px;line-height:1.6;color:var(--ink-3)}
.modal-body{padding:22px 28px;display:flex;flex-direction:column;gap:16px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.f-row{grid-template-columns:1fr}.modal-head,.modal-body{padding-inline:20px}}
.f{display:flex;flex-direction:column;gap:6px}
.f[hidden]{display:none}
.f-other{animation:otherIn var(--t-base) both}
@keyframes otherIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.f label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.f input,.f select{
  height:48px;padding:0 14px;border:1px solid var(--border);border-radius:14px;
  background:#fff;font-size:16px;color:var(--ink);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.f select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7291' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
}
.f input:focus,.f select:focus{outline:none;border-color:rgba(91,78,232,.6);box-shadow:0 0 0 4px rgba(91,78,232,.12)}
.f input::placeholder{color:var(--ink-4)}
.f.is-bad input{border-color:var(--danger)}
.f.is-bad input:focus{box-shadow:0 0 0 4px rgba(26,29,46,.16)}
.f-err{font-size:12px;font-weight:600;color:var(--danger);display:none}
.f.is-bad .f-err{display:block}
.modal-foot{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 28px 24px;border-top:1px solid var(--border);background:var(--canvas);
  border-radius:0 0 var(--r-xl) var(--r-xl);
}
@media (max-width:560px){.modal-foot{padding-inline:20px}.modal-foot .btn{width:100%}}
.modal-note{font-size:12.5px;color:var(--ink-4)}
.modal-done{padding:44px 30px 36px;text-align:center;display:flex;flex-direction:column;align-items:center}
.modal-done[hidden]{display:none}
.done-ico{width:60px;height:60px;border-radius:20px;background:var(--emerald-50);color:var(--emerald-ink);display:grid;place-items:center;margin-bottom:6px}
.done-ico svg{width:26px;height:26px}
.modal-done .btn{margin-top:22px}
body.modal-open{overflow:hidden}

/* ===================================================================
   REVEALS
   Only once JS has marked the document, so nothing is hidden from a
   crawler or from a browser that never runs the script.
   =================================================================== */
html.js .rev{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms)}
html.js .rev.in{opacity:1;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}
  html.js .rev{opacity:1 !important;transform:none !important}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .phone-main{transform:none !important}
}

/* ===================================================================
   DOC PAGES
   Long-form content (/faq, /about, /investor-profit-sharing, the blog).
   Prose sits straight on the wash; the blocks that carry arithmetic,
   questions and tables sit on glass.
   =================================================================== */
.doc-head{padding-top:clamp(2rem,5vw,4.5rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.doc-head .h1{
  font-size:clamp(2.2rem,1.5rem + 2.6vw,3.6rem);line-height:1.04;
  font-weight:800;letter-spacing:-.04em;color:var(--ink);margin:16px 0 14px;max-width:24ch;
}
.doc-head .lede{max-width:62ch}
.crumb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-4);margin-bottom:10px;flex-wrap:wrap}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--indigo-700);text-decoration:underline}

.doc{padding-block:clamp(1.5rem,4vw,3rem) clamp(2.5rem,5vw,4rem)}
.doc-body{display:grid;grid-template-columns:minmax(0,68ch);justify-content:center;gap:0}
.doc-body>*{grid-column:1}
.doc-body>.wide{width:min(100%,1000px);justify-self:center}

.doc-body h2{
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);line-height:1.14;font-weight:800;
  letter-spacing:-.03em;color:var(--ink);margin:2.3em 0 .7em;scroll-margin-top:calc(var(--nav-h) + 28px);
}
.doc-body h2:first-child{margin-top:0}
.doc-body h3{
  font-size:clamp(1.1rem,1rem + .45vw,1.35rem);line-height:1.3;font-weight:800;
  letter-spacing:-.02em;color:var(--ink);margin:1.8em 0 .5em;scroll-margin-top:calc(var(--nav-h) + 28px);
}
.doc-body p{font-size:16.5px;line-height:1.72;color:var(--ink-2);margin:0 0 1.05em}
.doc-body strong{color:var(--ink);font-weight:700}
.doc-body a:not(.btn){color:var(--indigo-700);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.doc-body a:not(.btn):hover{color:var(--indigo);text-decoration-thickness:2px}
.doc-body ul{list-style:disc;margin:0 0 1.25em;padding-left:1.3em;color:var(--ink-2)}
.doc-body ol{list-style:decimal;margin:0 0 1.25em;padding-left:1.4em;color:var(--ink-2)}
.doc-body li{font-size:16.5px;line-height:1.7;margin-bottom:.5em}
.doc-body li::marker{color:var(--ink-4)}
.doc-body hr{border:0;border-top:1px solid rgba(26,29,46,.08);margin:2.6em 0}

.toc{
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card);
  border-radius:var(--r-lg);padding:20px 22px;margin:0 0 2.4em;
}
.toc p{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.toc ol{list-style:decimal;margin:0;padding-left:1.15em}
.toc li::marker{color:var(--ink-4);font-family:var(--font-mono);font-size:12px}
.toc li{font-size:15px;margin-bottom:.35em}

/* Question and answer. qa-q / qa-a are load-bearing: lib/server/marketing.ts
   reads the FAQPage schema out of this markup, so the tags and class names
   here are part of the contract, not decoration.

   <details> rather than a scripted accordion: it opens with no JavaScript,
   answers the keyboard and a screen reader on its own, and the answer stays
   in the HTML for anything reading the page rather than looking at it. */
.qa{
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card);
  border-radius:var(--r-lg);margin:0 0 10px;overflow:hidden;
  transition:box-shadow var(--t-base),border-color var(--t-base);
}
.qa:hover{box-shadow:var(--shadow-lift)}
.qa[open]{background:#fff;border-color:var(--border)}
.qa summary{
  display:flex;align-items:flex-start;gap:16px;justify-content:space-between;
  padding:18px 22px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;width:9px;height:9px;margin-top:7px;
  border-right:2.5px solid var(--ink-4);border-bottom:2.5px solid var(--ink-4);border-radius:1px;
  transform:rotate(45deg);transform-origin:70% 70%;
  transition:transform var(--t-base),border-color var(--t-base);
}
.qa[open] summary::after{transform:rotate(-135deg);border-color:var(--indigo)}
.qa summary:hover::after{border-color:var(--ink-2)}
.qa-q{font-size:17px;line-height:1.35;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0}
.doc-body .qa-q{margin-top:0}
.qa-a{padding:0 22px 20px;color:var(--ink-3)}
.qa-a p{margin-bottom:.7em}
.qa-a p:last-child{margin-bottom:0}

/* Opening is animated where the browser can interpolate to auto, and is
   simply instant everywhere else. */
@supports (interpolate-size:allow-keywords){
  html{interpolate-size:allow-keywords}
  .qa::details-content{
    block-size:0;overflow:hidden;
    transition:block-size var(--t-slow),content-visibility var(--t-slow) allow-discrete;
  }
  .qa[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){
  .qa::details-content{transition:none}
  .qa summary::after{transition:none}
}

.eg{
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card);
  border-radius:var(--r-lg);padding:20px 22px;margin:0 0 1.6em;
}
.eg-t{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--indigo-700);margin:0 0 12px}
.eg table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:14px}
.eg td{padding:7px 0;color:var(--ink-2);border-bottom:1px solid rgba(26,29,46,.08)}
.eg td:last-child{text-align:right;font-weight:500;color:var(--ink);white-space:nowrap}
.eg tr:last-child td{border-bottom:0;font-weight:700;padding-top:10px}

.note{
  border-left:3px solid var(--amber);background:rgba(26,29,46,.06);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:16px 20px;margin:0 0 1.6em;
}
.note p{margin:0;font-size:15.5px;color:var(--amber-ink)}
.note p+p{margin-top:.6em}

.cmp{overflow-x:auto;margin:0 0 1.8em;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card)}
.cmp table{width:100%;min-width:540px;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid rgba(26,29,46,.07);vertical-align:top}
.cmp thead th{background:rgba(255,255,255,.6);font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td:first-child{font-weight:600;color:var(--ink)}
.cmp td{color:var(--ink-2);line-height:1.55}

.kv{display:grid;gap:0;margin:0 0 1.8em;border-top:1px solid rgba(26,29,46,.08)}
.kv div{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:16px;padding:13px 0;border-bottom:1px solid rgba(26,29,46,.08)}
.kv dt,.kv .k{font-size:12.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.kv dd,.kv .v{margin:0;font-size:15.5px;color:var(--ink-2)}

/* THE FIRST SCREEN HAS TO ANSWER THE QUERY

   Measured 2026-09-21: the pillar page carried the most impressions of any
   page and had never been clicked, and its only price was inside a closed
   question near the foot of a 13,000px page. Price, trial and a way to act
   now sit under the lede, where a phone shows them without scrolling. */
.doc-offer{
  margin-top:18px;padding:12px 16px;border-radius:var(--r-lg);
  background:var(--emerald-50);color:var(--ink-2);
  font-size:15px;line-height:1.55;max-width:60ch;
}
.doc-offer strong{color:var(--emerald-ink)}
.doc-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
@media (max-width:520px){
  .doc-act .btn{flex:1 1 100%;justify-content:center}
}

.doc-cta{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(135deg,#6D61EC 0%,#4437C9 58%,#3B2FB3 100%);
  border-radius:var(--r-xl);padding:clamp(1.75rem,4vw,2.75rem);margin-top:2.8em;
  box-shadow:0 30px 60px -28px rgba(68,55,201,.7);
}
.doc-cta::before{content:"";position:absolute;width:300px;height:300px;right:-110px;top:-130px;border-radius:50%;background:rgba(109,97,236,.34);filter:blur(40px);pointer-events:none}
.doc-cta > *{position:relative;z-index:1}
.doc-cta h2{color:#fff;margin:0 0 .5em;font-size:clamp(1.4rem,1.1rem + 1.1vw,1.9rem)}
.doc-cta p{color:rgba(255,255,255,.84);margin:0 auto 1.4em;max-width:48ch}
.doc-cta .btn{margin:0 5px 8px}

@media (max-width:560px){
  .kv div{grid-template-columns:1fr;gap:3px;padding:11px 0}
  .doc-body p,.doc-body li{font-size:16px}
}

/* The hero eyebrow sits inside the h1 so the heading carries the topic
   words. It re-establishes block flow and sheds the h1's type. */
.h1>.eyebrow{
  display:flex;width:fit-content;margin-bottom:clamp(14px,1.6vw,20px);
  font-size:11.5px;line-height:1.2;letter-spacing:.1em;
}

/* ===================================================================
   BLOG
   =================================================================== */
.byline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 0;font-size:13.5px;color:var(--ink-3)}
.byline strong{color:var(--ink-2);font-weight:700}
.byline span{color:var(--ink-4)}

.post-card{
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card);
  border-radius:var(--r-lg);padding:22px 24px;margin:0 0 14px;
  transition:transform var(--t-base),box-shadow var(--t-base);
}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.post-meta{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.05em;color:var(--ink-4);margin:0 0 10px;display:flex;gap:8px;align-items:center}
.post-t{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);line-height:1.22;font-weight:800;letter-spacing:-.025em;margin:0 0 .45em}
.post-t a{color:var(--ink);text-decoration:none}
.post-t a:hover{color:var(--indigo-700)}
.post-x{font-size:16px;line-height:1.65;color:var(--ink-3);margin:0 0 .9em;max-width:62ch}
.post-more{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:14px;font-weight:700;color:var(--indigo-700);text-decoration:none}
.post-more svg{width:15px;height:15px;transition:transform var(--t-fast)}
.post-more:hover svg{transform:translateX(3px)}