:root{
  /* **One palette, and it is black.** The site used to carry a light theme, a dark theme and a
     media query to choose between them, which meant every panel had two sets of numbers behind it
     and a rule added to one was a rule missing from the other. The operator asked for a black
     background on 2026-09-21; one palette is how that stays true on a page somebody adds tomorrow. */
  --bg:#000000; --bg2:#000000; --panel2:#141414; --ink:#ececec; --muted:#a3aba7;
  --line:rgba(255,255,255,.12); --accent:#4ec49a; --accent2:#7fe0bb; --accent-ink:#04120c; --accent-soft:rgba(78,196,154,.10);
  --glass:rgba(255,255,255,.045); --glass-strong:rgba(255,255,255,.075); --glass-line:rgba(255,255,255,.14);
  --frame:rgba(255,255,255,.022); --frame-line:rgba(255,255,255,.10);
  --code-bg:#000000; --code-ink:#dbe2de; --code-key:#6fdcb4; --code-str:#e6c58c; --code-num:#8fc2ee;
  --gold:#f0c060; --gold2:#ffd98a; --gold-ink:#241a00; --gold-bg:rgba(90,66,10,.28);
  --shadow:0 1px 2px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.5);
  --deep:0 30px 90px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.55);
  /* The coloured blobs and the swish are what made the background not black. They are kept as
     variables rather than deleted so that every rule that paints with them - the hero's corner
     glow, the call-to-action, the offer - resolves to nothing instead of to a broken value. */
  --blob1:transparent; --blob2:transparent; --blob3:transparent; --blob4:transparent;
  --swish:none;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#000;color:var(--ink);
  font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;position:relative}

/* ---- the background: blobs of colour, then the swish, fixed behind the frame ---- */
.bgblobs,.bgswish{display:none}
.bgblobs-off{position:fixed;inset:0;z-index:-2;pointer-events:none}
.bgblobs{background:
  radial-gradient(700px 520px at 6% -6%,var(--blob1),transparent 62%),
  radial-gradient(900px 620px at 100% 10%,var(--blob4),transparent 60%),
  radial-gradient(760px 620px at 82% 96%,var(--blob2),transparent 60%),
  radial-gradient(560px 460px at 8% 88%,var(--blob3),transparent 62%);
  inset:-8%}
.bgswish{z-index:-1;background-image:var(--swish);background-size:cover;background-position:center;opacity:1}
@media (prefers-reduced-motion:no-preference){
  .bgblobs{animation:drift 40s ease-in-out infinite alternate}
  @keyframes drift{0%{transform:translate(-2%,-2%) scale(1)}100%{transform:translate(2%,3%) scale(1.06)}}
}

/* ---- the frame: one translucent sheet the whole site sits on ---- */
.frame{max-width:1240px;margin:30px auto 48px;background:var(--frame);border:1px solid var(--frame-line);
  border-radius:30px;box-shadow:var(--deep);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);
  overflow:clip;position:relative}
.frame::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 220px);opacity:.9}
@media (max-width:820px){.frame{margin:10px 8px 20px;border-radius:20px}}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 18px}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:6px;z-index:99}

/* ---- header ---- */
header.top{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.88);border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
header.top .wrap{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap;padding-block:6px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:15.5px;flex:none;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#fff;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 4px 12px rgba(11,109,79,.25)}
.mark img{display:block;width:100%;height:100%}
nav.top{display:flex;gap:2px 14px;flex-wrap:wrap;font-size:14px}
nav.top a{color:var(--muted);padding:4px 2px;border-bottom:2px solid transparent}
nav.top a:hover{color:var(--ink);text-decoration:none}
nav.top a.on{color:var(--ink);border-bottom-color:var(--accent)}
.btn{display:inline-block;font-weight:660;font-size:14.5px;border-radius:10px;padding:10px 18px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));color:var(--accent-ink);border:1px solid transparent;white-space:nowrap;
  box-shadow:0 6px 18px rgba(11,109,79,.28);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 10px 24px rgba(11,109,79,.34)}
.btn.ghost{background:var(--glass);color:var(--accent);border-color:var(--accent);box-shadow:none}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.lg{font-size:16px;padding:14px 26px;border-radius:12px}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--gold-ink);box-shadow:0 6px 18px rgba(138,90,0,.28)}
header.top .btn{margin-left:auto}
@media (max-width:700px){header.top .btn{display:none}nav.top{font-size:13.5px;gap:2px 11px}}
[id]{scroll-margin-top:130px}

/* ---- hero ---- */
.hero{padding:88px 0 60px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero.sub{padding:64px 0 46px}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--blob1),transparent 60%);filter:blur(10px);pointer-events:none}
.hero .wrap{position:relative}
.hero .wrap.withlogo{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start}
.herologo{position:relative;z-index:1;width:min(220px,28vw);aspect-ratio:1;border-radius:28px;background:#fff;border:1px solid var(--glass-line);box-shadow:var(--deep);padding:8%;margin-top:8px;justify-self:end}
.herologo img{display:block;width:100%;height:100%}
@media (max-width:820px){.hero .wrap.withlogo{grid-template-columns:1fr}.herologo{justify-self:start;width:120px;margin:0 0 18px;order:-1}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:750;color:var(--accent);background:var(--glass);border:1px solid var(--glass-line);
  padding:6px 13px;border-radius:999px;margin:0 0 22px;box-shadow:var(--shadow)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 4px var(--accent-soft)}
h1{margin:0 0 20px;font-size:clamp(36px,6vw,66px);line-height:1.02;letter-spacing:-.03em;font-weight:780;max-width:16em}
h1 .glow{background:linear-gradient(100deg,var(--accent) 0%,var(--accent2) 45%,var(--gold2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin:0 0 12px;font-size:clamp(17px,2.2vw,21px);line-height:1.5;color:var(--muted);max-width:36em}
.lede strong{color:var(--ink);font-weight:640}
.herobtns{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 0}
.subtle{font-size:13.5px;color:var(--muted);margin:16px 0 0}
.claims{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:22px 0 0;padding:0;list-style:none}
.claims li{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass-strong);box-shadow:var(--shadow);font-weight:600;font-size:14.5px;color:var(--ink)}
.claims li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* ---- stat strip ---- */
.strip{border-bottom:1px solid var(--line);background:var(--glass)}
.strip .wrap{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));padding-block:18px}
.stat{padding:16px 18px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass-strong);box-shadow:var(--shadow)}
.stat b{display:block;font-size:22px;letter-spacing:-.02em;background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}

/* ---- sections ---- */
section{padding:64px 0;border-bottom:1px solid var(--line);position:relative}
section:last-of-type{border-bottom:0}
section.tint{background:linear-gradient(180deg,var(--accent-soft),transparent 60%)}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:750;color:var(--accent);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px}
h2{margin:0 0 14px;font-size:clamp(26px,3.5vw,38px);line-height:1.12;letter-spacing:-.025em;font-weight:760;max-width:22em}
h3{margin:0 0 8px;font-size:18px;letter-spacing:-.01em;font-weight:680}
h4{margin:22px 0 8px;font-size:15px;letter-spacing:.02em;font-weight:700}
p{margin:0 0 16px;color:var(--muted);max-width:46em}
p strong{color:var(--ink);font-weight:640}
li{margin:0 0 8px}
ul,ol{color:var(--muted);max-width:46em;padding-left:22px}
li strong{color:var(--ink);font-weight:640}
.lead-p{font-size:18px;max-width:42em}
.big{font-size:clamp(21px,2.7vw,28px);line-height:1.32;color:var(--ink);font-weight:580;max-width:28em;margin:0 0 24px;letter-spacing:-.015em}
.big em{color:var(--accent);font-style:normal}
.figure{font-size:30px;line-height:1.1;display:block;margin-bottom:6px;color:var(--ink);font-weight:760;letter-spacing:-.02em}

/* ---- cards and boxes ---- */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:28px 0 0}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);padding:22px;color:var(--ink);
  box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--deep)}
.card p{margin:0;font-size:14.8px}
.card p+p{margin-top:10px}
.card .tag{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:750;color:var(--accent);margin:0 0 10px}
.card.num .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;margin:0 0 12px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));color:var(--accent-ink);font-weight:800;font-size:15px;box-shadow:0 4px 12px rgba(11,109,79,.3)}
a.card:hover{text-decoration:none;border-color:var(--accent)}
a.card h3{color:var(--ink)}
a.card .more{display:block;margin-top:14px;color:var(--accent);font-weight:650;font-size:14px}
.pair{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:18px 0 6px}
.pair .box{border:1px solid var(--glass-line);border-radius:14px;padding:18px 20px;background:var(--glass);box-shadow:var(--shadow)}
.pair .box.ask{border-left:4px solid var(--gold2)}
.pair .box.ans{border-left:4px solid var(--accent2)}
.pair .box .tag{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:750;margin:0 0 8px;color:var(--accent)}
.pair .box.ask .tag{color:var(--gold)}
.pair .box p{margin:0;font-size:15px;color:var(--ink)}
.pair .box p+p{margin-top:8px}
.pair .box ul{margin:0;padding-left:20px}
.pair .box li{color:var(--ink);font-size:15px}
.pair .box pre{margin:0;box-shadow:none}

.numbered{counter-reset:n;list-style:none;padding:0;margin:26px 0 0;max-width:none;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.numbered>li{counter-increment:n;position:relative;padding:22px 22px 22px 66px;margin:0;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);box-shadow:var(--shadow)}
.numbered>li::before{content:counter(n);position:absolute;left:20px;top:22px;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent2),var(--accent));color:var(--accent-ink);font:800 14px/32px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-align:center;box-shadow:0 4px 12px rgba(11,109,79,.3)}
.numbered h3{margin:3px 0 6px}
.numbered p{margin:0;font-size:14.8px}

/* ---- folds: open only what you came for ---- */
.fold{border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);box-shadow:var(--shadow);margin:18px 0 0;overflow:hidden}
.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:18px 22px;font-weight:680;font-size:17px;color:var(--ink)}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary:hover{background:var(--accent-soft)}
.fold>summary .fh{margin-left:auto;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:750;white-space:nowrap}
.fold>summary .chev{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent2),var(--accent));color:var(--accent-ink);font-size:16px;line-height:1;transition:transform .2s ease;box-shadow:0 4px 12px rgba(11,109,79,.3)}
.fold[open]>summary .chev{transform:rotate(45deg)}
.fold[open]>summary{border-bottom:1px solid var(--line)}
.fold>.fb{padding:8px 22px 22px}
.fold>.fb>.tablewrap{margin-top:14px}
.fold>.fb>.grid{margin-top:14px}
.fold>.fb>p:first-child{margin-top:12px}
.fold>.fb>.numbered{margin-top:14px}

/* ---- code and tables ---- */
pre{background:var(--code-bg);color:var(--code-ink);border-radius:14px;padding:18px 20px;overflow-x:auto;
  margin:0 0 16px;font:13.4px/1.62 "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  border:1px solid rgba(255,255,255,.08);max-width:100%;box-shadow:var(--deep)}
pre b{color:var(--code-key);font-weight:600}
pre i{color:var(--code-str);font-style:normal}
pre s{color:var(--code-num);text-decoration:none}
code{font:.9em "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  background:var(--panel2);padding:1.5px 5px;border-radius:4px;color:var(--ink)}
.caption{font-size:13.6px;color:var(--muted);margin:-4px 0 26px;max-width:46em}
/* **A table is sized to the page, not the page to the table.** Every wide table here used to
   carry a `min-width` - 520px, and 760, 860 or 1080 on the four variants - so a ten-column
   comparison put the reader on a horizontal scrollbar and the last three columns off the screen,
   which is where the numbers that win the argument are. The width is gone and the type shrinks
   instead: `clamp()` gives each variant a floor it will not go below, its full size once there is
   room for it, and one step per column count in between. `overflow-x` stays as a backstop for a
   table nobody anticipated, not as the normal way to read one. */
.tablewrap{overflow-x:auto;margin:22px 0 22px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass-strong);box-shadow:var(--shadow);max-width:100%}
table{border-collapse:collapse;width:100%;font-size:clamp(11.5px,1.22vw,14.4px);table-layout:auto}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:break-word;word-break:normal}
th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--accent-soft);font-weight:750}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;width:1%}
td .note{display:block;color:var(--muted);font-size:.88em;margin-top:2px;line-height:1.45}
tr.do td{background:var(--accent-soft);font-weight:650}
tr.do td:first-child{color:var(--accent)}
tr.do td .note{font-weight:400}
/* Eight columns of figures, seven of them unbreakable, so this one gets the smallest floor on the
   site: the workload definitions on compare.html were the last table still asking for a scrollbar
   at a laptop width. */
.tablewrap.workloads table{font-size:clamp(8.6px,.86vw,12.6px)}
.tablewrap.workloads th,.tablewrap.workloads td{padding:6px 6px}
.tablewrap.workloads th{letter-spacing:.02em}
.tablewrap.compare table{font-size:clamp(10.5px,1.05vw,13.4px)}
.tablewrap.compare td:first-child{font-weight:650}
.tablewrap.compare th:nth-child(2){color:var(--accent)}
.tablewrap.compare td:nth-child(2){background:var(--accent-soft);font-weight:650}
/* the comparison page (market.py), which all three sites render. The rules are here rather than in
   section 6's story layer because this stylesheet is the base of all three and that one is not. */
.tablewrap.market table{font-size:clamp(9.5px,.93vw,12.4px)}
.tablewrap.market th,.tablewrap.market td{padding:7px 8px}
.tablewrap.market td:first-child{font-weight:680;color:var(--accent)}
.tablewrap.wide table{font-size:clamp(10px,1vw,13px)}
.tablewrap.wide th,.tablewrap.wide td{padding:8px 9px}
.tablewrap.wide td:first-child{font-weight:680;color:var(--accent)}
/* The three widest tables take the gutter back off the column they sit in, which is 56px of page
   they were not using and the type no longer has to give up. */
.tablewrap.market,.tablewrap.wide,.tablewrap.compare,.tablewrap.workloads{margin-left:-28px;margin-right:-28px;width:calc(100% + 56px);max-width:none}
@media (max-width:640px){.tablewrap.market,.tablewrap.wide,.tablewrap.compare,.tablewrap.workloads{margin-left:-18px;margin-right:-18px;width:calc(100% + 36px)}}
.fold .tablewrap.market,.fold .tablewrap.wide,.fold .tablewrap.compare,.fold .tablewrap.workloads{margin-left:-22px;margin-right:-22px;width:calc(100% + 44px)}
.svc{color:var(--gold);font-weight:640}
.yes{color:var(--accent);font-weight:700}
.dash{color:var(--muted)}

/* ---- quotes, offers, calls to action ---- */
.quotes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:26px 0 0}
.quote{border:1px solid var(--glass-line);border-left:4px solid var(--accent2);border-radius:14px;padding:18px 20px;background:var(--glass);box-shadow:var(--shadow)}
.quote p{font-size:17.5px;line-height:1.4;color:var(--ink);margin:0 0 10px;font-weight:540}
.quote p::before{content:"\201C";color:var(--accent2);font-size:26px;line-height:0;margin-right:2px}
.quote cite{font-style:normal;color:var(--muted);font-size:14px;display:block}
.ctabox{border:1px solid var(--accent);border-radius:22px;padding:38px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--accent-soft),var(--glass) 60%);box-shadow:var(--deep);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ctabox::after{content:"";position:absolute;right:-140px;bottom:-160px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,var(--blob1),transparent 62%);pointer-events:none}
.ctabox>*{position:relative}
.ctabox h2{margin-top:0}
.ctabox .herobtns{margin-top:22px}
.offer{border:1px solid var(--gold2);background:linear-gradient(135deg,var(--gold-bg),var(--glass) 70%);border-radius:22px;padding:34px;margin:26px 0;box-shadow:var(--deep);position:relative;overflow:hidden}
.offer::after{content:"";position:absolute;right:-120px;top:-140px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,var(--blob3),transparent 62%);pointer-events:none}
.offer>*{position:relative}
.offer .kicker{color:var(--gold)}
.offer .kicker::before{background:linear-gradient(90deg,var(--gold),var(--gold2))}
.offer p{color:var(--ink)}
.offer p:last-child{margin-bottom:0}
.offer h2{margin-top:0}

.aud{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:28px 0 0}
.aud a{display:block;border:1px solid var(--glass-line);border-radius:16px;padding:24px;background:var(--glass);color:var(--ink);box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease;position:relative;overflow:hidden}
.aud a::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--gold2))}
.aud a:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--deep)}
.aud a b{display:block;font-size:19px;margin:0 0 6px;letter-spacing:-.01em}
.aud a span{display:block;color:var(--muted);font-size:14.5px;line-height:1.5}
.aud a i{display:block;font-style:normal;color:var(--accent);font-weight:650;font-size:14px;margin-top:14px}

.qa{margin:26px 0 0;max-width:none}
.qa details{border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);margin:0 0 10px;padding:0;box-shadow:var(--shadow)}
.qa summary{cursor:pointer;padding:16px 20px;font-weight:650;font-size:16.5px;color:var(--ink);list-style:none;display:flex;gap:14px;align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"+";color:var(--accent);font-weight:700;flex:none;width:14px}
.qa details[open] summary::before{content:"\2013"}
.qa .body{padding:0 20px 18px 20px}

footer{padding:40px 0 50px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;background:var(--glass)}
footer .wrap{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer b{display:block;color:var(--ink);margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
footer a{display:block;color:var(--muted);margin:0 0 5px}
footer a:hover{color:var(--accent)}
footer p{font-size:13px;margin:0 0 6px}
.next{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0}

/* ---- motion ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  .hero h1{animation:rise .7s ease both}
  .hero .lede{animation:rise .7s .12s ease both}
  .hero .herobtns,.hero .subtle{animation:rise .7s .22s ease both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ---- a comparison that keeps one side on the screen ---------------------------------------
   **Data Oil's column never leaves, and every other product is a tile you open.** A fourteen-row
   table of Snowflake, Databricks, Redshift and the rest asks a reader to hold our row in their
   head while their eye travels to the vendor they actually own, and on a laptop our row has
   usually scrolled off by the time they find it. Here ours is a panel that stays put, the others
   are square tiles under it, and an opened tile takes `order:-1` - so it moves to the front of the
   grid, directly below ours, and the two read one above the other on the same fields.
   Several may be open at once; they stack, all of them still under ours. */
.vs{margin:26px 0 8px}
.vs-do{border:1px solid var(--accent);border-radius:16px;background:linear-gradient(180deg,var(--accent-soft),transparent 70%);
  padding:20px 22px;box-shadow:var(--shadow)}
.vs-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.vs-h b{font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.vs-h span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:750;color:var(--accent)}
.vs dl{margin:0;display:grid;gap:9px 20px;grid-template-columns:minmax(120px,var(--vsl,19%)) 1fr;align-items:baseline}
.vs dt{margin:0;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:750;color:var(--muted);line-height:1.5}
.vs dd{margin:0;font-size:14px;color:var(--ink);line-height:1.55}
.vs dd .note{display:block;color:var(--muted);font-size:12.6px;margin-top:2px}
@media (max-width:620px){.vs dl{grid-template-columns:1fr;gap:2px}.vs dt{margin-top:9px}}

.vs-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));grid-auto-rows:1fr;margin:14px 0 0}
.vs-c{border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);box-shadow:var(--shadow);
  transition:border-color .16s ease,transform .16s ease}
.vs-c:hover{border-color:var(--accent)}
.vs-c>summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:14px 12px;min-height:138px;height:100%;border-radius:13px}
.vs-c>summary::-webkit-details-marker{display:none}
.vs-c>summary b{font-size:14px;font-weight:700;color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.vs-c>summary i{font-style:normal;font-size:11.6px;color:var(--muted);line-height:1.35}
.vs-c>summary em{font-style:normal;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:750;color:var(--accent);margin-top:auto}
.vs-c[open]{grid-column:1/-1;order:-1;border-color:var(--accent)}
.vs-c[open]>summary{min-height:0;height:auto;flex-direction:row;text-align:left;justify-content:flex-start;
  align-items:baseline;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.vs-c[open]>summary em{margin:0 0 0 auto;font-size:0}
.vs-c[open]>summary em::before{content:"Close";font-size:11px;letter-spacing:.09em}
.vs-b{padding:16px 20px 20px}
.vs-note{margin:14px 0 0;font-size:13.4px;color:var(--muted)}
@media (max-width:820px){h1{max-width:none}}

.illus{display:block;margin:26px auto 0;max-width:820px}
.illus svg{display:block;width:100%;height:auto}
.illus figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);text-align:center}
.illus .t{font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:14px;font-weight:650;fill:var(--ink)}
.illus .s{font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:11.5px;fill:var(--muted)}
.illus .w{font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;fill:var(--accent-ink)}
.illus .box{fill:var(--glass-strong);stroke:var(--line);stroke-width:1}
.illus .core{fill:var(--accent)}
.illus .ln{stroke:var(--accent2);stroke-width:1.6;fill:none}
.illus .gd{stroke:var(--gold2);stroke-width:1.6;fill:none}
.illus .ring{fill:none;stroke:var(--accent2);stroke-width:1.4;opacity:.9}
.illus .ringfill{fill:var(--accent-soft)}
.illus .pill{fill:var(--accent-soft);stroke:var(--accent2);stroke-width:1}
.illus .gold{fill:var(--gold2)}
.illus .goldsoft{fill:var(--gold-bg);stroke:var(--gold2);stroke-width:1}
/* ================= section 6: the story on top of the same frame ================= */
.chapters{position:sticky;top:62px;z-index:30;background:rgba(0,0,0,.88);border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.chapters .wrap{display:flex;gap:4px 22px;flex-wrap:wrap;padding-block:8px;font-size:13px}
.chapters a{color:var(--muted);display:inline-flex;align-items:center;gap:8px;padding:4px 0}
.chapters a b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:800;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--glass-line)}
.chapters a:hover{color:var(--ink);text-decoration:none}
@media (max-width:700px){.chapters{display:none}}
[id]{scroll-margin-top:150px}

.chapter{position:relative}
.chapter .num{position:absolute;right:28px;top:22px;font-size:clamp(90px,14vw,180px);line-height:1;font-weight:800;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.5px var(--accent);opacity:.14;pointer-events:none;user-select:none}
@media (max-width:820px){.chapter .num{font-size:96px;right:14px;top:14px}}

.voice{margin:30px 0 0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));padding:0;list-style:none;max-width:none}
.voice li{margin:0;padding:22px 24px 22px 28px;border:1px solid var(--glass-line);border-left:4px solid var(--gold2);border-radius:16px;background:var(--glass);box-shadow:var(--shadow)}
.voice li q{display:block;font-size:19px;line-height:1.35;color:var(--ink);font-weight:580;letter-spacing:-.01em;quotes:"\201C" "\201D"}
.voice li q::before{content:open-quote;color:var(--gold2)}
.voice li q::after{content:close-quote;color:var(--gold2)}
.voice li span{display:block;margin-top:10px;font-size:14px;color:var(--muted)}

.split{display:grid;gap:0;grid-template-columns:1fr 1fr;margin:28px 0 0;border:1px solid var(--glass-line);border-radius:18px;overflow:hidden;box-shadow:var(--deep)}
.split>div{padding:26px 28px;background:var(--glass)}
.split>div+div{background:var(--glass-strong);border-left:1px solid var(--line)}
.split .tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:750;margin:0 0 12px}
.split>div:first-child .tag{color:var(--gold)}
.split>div+div .tag{color:var(--accent)}
.split p{font-size:15.5px;color:var(--ink);margin:0}
.split p+p{margin-top:10px}
.split ul{margin:0;padding-left:20px}
.split li{color:var(--ink);font-size:15.2px}
@media (max-width:720px){.split{grid-template-columns:1fr}.split>div+div{border-left:0;border-top:1px solid var(--line)}}

.answers{list-style:none;padding:0;margin:30px 0 0;max-width:none;display:grid;gap:16px}
.answers>li{margin:0;display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:0;border:1px solid var(--glass-line);border-radius:16px;overflow:hidden;background:var(--glass);box-shadow:var(--shadow)}
.answers .heard{padding:22px 24px;border-right:1px solid var(--line)}
.answers .heard q{display:block;font-size:17px;line-height:1.35;color:var(--ink);font-weight:580;quotes:"\201C" "\201D"}
.answers .heard q::before{content:open-quote;color:var(--gold2)}.answers .heard q::after{content:close-quote;color:var(--gold2)}
.answers .heard small{display:block;margin-top:8px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:750}
.answers .done{padding:22px 26px;background:var(--glass-strong)}
.answers .done h3{margin:0 0 6px;font-size:17px}
.answers .done p{margin:0;font-size:15px}
.answers .done p+p{margin-top:8px}
.answers .done .how{display:block;margin-top:12px;font-size:13.5px;color:var(--muted)}
.answers .done .how code{font-size:.92em}
@media (max-width:720px){.answers>li{grid-template-columns:1fr}.answers .heard{border-right:0;border-bottom:1px solid var(--line)}}

.timeline{list-style:none;padding:0;margin:28px 0 0;max-width:none;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.timeline li{margin:0;padding:18px 18px 18px 18px;border-top:4px solid var(--accent2);border-radius:0 0 14px 14px;background:var(--glass);border:1px solid var(--glass-line);border-top-width:4px;box-shadow:var(--shadow)}
.timeline li b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.timeline li p{margin:0;font-size:14.6px;color:var(--ink)}
.timeline li.next{border-top-color:var(--gold2)}
.timeline li.next b{color:var(--gold)}

.goals{margin:26px 0 0;border:1px solid var(--accent);border-radius:18px;background:var(--glass-strong);box-shadow:var(--deep);overflow:hidden}
.goals .head{padding:16px 24px;background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:750;color:var(--accent)}
.goals ol{margin:0;padding:18px 24px 20px 46px;max-width:none}
.goals li{color:var(--ink);font-size:15.5px;margin:0 0 10px}
.goals li:last-child{margin:0}
.goals li em{font-style:normal;color:var(--muted);font-size:14px}

/* **Three figures side by side, and until 2026-09-20 they had no CSS at all.** The markup was
   written and the rule never was, so the most important moment on the pricing page - the first
   month, the part paid once, and every month after - rendered as three run-together lines with the
   number touching its own caption. Found by looking at the page, which is the only way it could
   have been found. */
.grid3{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:26px 0 0}
.grid3 .tile{padding:24px 26px;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);box-shadow:var(--shadow)}
.grid3 .tile b{display:block;font-size:clamp(26px,3.4vw,36px);line-height:1.05;letter-spacing:-.03em;font-weight:800;
  background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.grid3 .tile span{display:block;margin-top:10px;font-size:14.5px;color:var(--muted);line-height:1.45}

.onenumber{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin:28px 0 0;padding:30px 34px;border:1px solid var(--glass-line);border-radius:22px;background:var(--glass);box-shadow:var(--deep)}
.onenumber b{font-size:clamp(44px,8vw,84px);line-height:1;letter-spacing:-.04em;font-weight:800;background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.onenumber p{margin:0;font-size:16px;color:var(--ink)}
.onenumber p+p{margin-top:8px;color:var(--muted);font-size:14.5px}
@media (max-width:640px){.onenumber{grid-template-columns:1fr;gap:12px}}

/* **Every button gets room above it and below it, wherever it sits.** `.cta-row` had no rule at
   all until 2026-09-20, so the button under the translation section sat flush against the
   paragraph over it. These live here rather than in section 7's own layer because section 6 uses
   the same markup and was still missing them a day after section 7 was fixed. */
main a.btn{margin-block:8px}
header.top a.btn{margin-block:0}
main .herobtns{margin:32px 0 12px}
main .next{margin:32px 0 12px}
.ctabox .herobtns{margin:26px 0 8px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 34px}

.mini{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.mini>summary{cursor:pointer;list-style:none;font-size:13px;letter-spacing:.07em;text-transform:uppercase;font-weight:750;color:var(--accent)}
.mini>summary::-webkit-details-marker{display:none}
.mini>summary::after{content:" +";font-weight:800}
.mini[open]>summary::after{content:" \2013"}
.mini>summary:hover{text-decoration:underline}
.mini .how{display:block;margin-top:10px;font-size:13.8px;color:var(--muted)}
.mini .how code{font-size:.92em}
.promise{margin:26px 0 0;padding:26px 30px;border-left:5px solid var(--accent2);border-radius:0 18px 18px 0;background:var(--glass);box-shadow:var(--shadow)}
.promise p{margin:0;font-size:clamp(18px,2.3vw,23px);line-height:1.4;color:var(--ink);font-weight:560;max-width:34em;letter-spacing:-.01em}
.promise p em{font-style:normal;color:var(--accent)}
.promise small{display:block;margin-top:10px;color:var(--muted);font-size:14px}
/* Ten tabs, a brand and a button on one row. The *Priced for you* tab was the tenth and pushed
   the call to action onto a second line, which doubled the height of a header that is sticky on
   every page - so the tabs give up a point of type rather than the reader giving up 60 pixels of
   every screen. */
header.top .wrap{gap:10px}
header.top nav.top{gap:2px 8px;font-size:12px}
header.top .btn{font-size:13px;padding:9px 14px}
.longer{margin-top:26px;padding:22px 24px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass)}
.longer p{margin:0 0 8px}
.longer a{font-weight:650}