/*
 * The Datera site's stylesheet.
 *
 * Extracted from index.html when a second page arrived: two copies of a stylesheet is two
 * places to change a colour and one place to forget. The tokens at the top are the same
 * ones the desktop app uses, copied verbatim so the site and the product cannot drift into
 * looking like different things.
 */
:root{
  --bg:#fbfcfd;--ink:#12161c;--ink2:#414855;--ink3:#7b828f;--line:#e6e8ee;--line2:#d7dae2;--card:#fff;
  --indigo:#4f46e5;--indigo-bg:#edecfd;--indigo-line:#c9c5f6;
  --green:#0d7a52;--green-bg:#e3f2eb;--green-line:#b6ddca;
  --violet:#6d3fc4;--violet-bg:#efeafc;
  --code:#0f1524;--codeink:#c8d3e6;
  /* Amber, for "not built yet". It lives in the app's tokens.css but had never been copied
     here, so the status badge silently rendered as unstyled text — an undefined custom
     property makes the whole declaration invalid rather than failing loudly. */
  --amber:#8a6100;--amber-bg:#fdf3e0;--amber-line:#eed9ad;
  --serif:'Instrument Serif',Georgia,serif;--body:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --sh:0 1px 2px rgba(18,22,28,.05),0 3px 12px rgba(18,22,28,.05);--sh2:0 18px 50px rgba(18,22,28,.13);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
/* Inline links in prose still need to be findable, so they take the accent colour and
   underline on hover. Navigation and buttons are identifiable by position and shape and
   need neither. */
p a,li a,figcaption a,.note a,.lead a{color:var(--indigo)}
p a:hover,li a:hover,figcaption a:hover,.note a:hover,.lead a:hover{text-decoration:underline;text-underline-offset:2px}
.mono{font-family:var(--mono)}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(251,252,253,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .in{display:flex;align-items:center;gap:20px;height:60px;max-width:1040px;margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.brand:hover{opacity:.72}
.brand:focus-visible{outline:2px solid var(--indigo);outline-offset:4px;border-radius:6px}
.brand .m{width:20px;height:20px;display:block;flex:0 0 auto}
.nav .lk{margin-left:auto;display:flex;gap:22px;font-size:14px;color:var(--ink2);font-weight:500;align-items:center}
/* :not(.btn) matters. Without it this darkened the Download button's label to near-black
   on its indigo fill the moment the pointer touched it. */
.nav .lk a:not(.btn):hover{color:var(--ink)}
.nav .gh{font-family:var(--mono);font-size:12.5px;border:1px solid var(--line2);border-radius:8px;padding:6px 11px;color:var(--ink2)}
.btn{background:var(--indigo);color:#fff;border:0;border-radius:9px;padding:9px 16px;font-size:14px;font-weight:600;text-decoration:none;display:inline-block}
.btn:hover{background:#4230c9;color:#fff}


.btn.ghost{background:#fff;border:1px solid var(--line2);color:var(--ink2)}
/* The ghost button had no hover of its own, so it inherited the solid button's dark indigo
   fill while keeping its dark grey label — unreadable for as long as the pointer was on it. */
.btn.ghost:hover{background:#f3f4f8;border-color:var(--ink3);color:var(--ink)}
.btn:focus-visible,.dlopt:focus-visible,.nav .lk a:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:9px}

/* hero */
.hero{text-align:center;padding:64px 0 8px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin-bottom:16px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,62px);line-height:1.06;letter-spacing:.005em;margin:0 auto 20px;max-width:22ch;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--indigo)}
.hero p{font-size:18.5px;line-height:1.62;color:var(--ink2);max-width:52ch;margin:0 auto 28px;text-wrap:pretty}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .micro{font-family:var(--mono);font-size:12px;color:var(--ink3);margin-top:16px}

/* the split demo */
.demo{margin:44px auto 0;max-width:960px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh2);overflow:hidden}
.demo .bar{display:flex;gap:7px;padding:11px 15px;background:#eef0f4;border-bottom:1px solid var(--line)}
.demo .bar i{width:11px;height:11px;border-radius:50%;background:#cfd4de}
.demo .grid{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:720px){.demo .grid{grid-template-columns:1fr}}
.demo .col{padding:22px 24px}
.demo .col.q{background:#0f1320;color:#c7cede}
.demo .col.q .lbl{color:#7f8aa3}
.demo .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.demo .q pre{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.8;color:#aeb8cf}
.demo .q .kw{color:#79c0ff}.demo .q .cm{color:#5f6a83}
.demo .oi{display:flex;gap:10px;padding:6px 0;font-size:14px}
.demo .oi .k{font-family:var(--mono);font-size:10px;color:var(--ink3);min-width:44px;padding-top:4px;text-transform:uppercase}
.chip{display:inline-flex;gap:4px;font-family:var(--mono);font-size:10px;color:var(--green);background:var(--green-bg);border:1px solid var(--green-line);border-radius:5px;padding:1px 6px;vertical-align:1px}

/* small screens
   The navigation was laid out for a desktop only: at phone width its text links wrapped into
   a three-line tangle and pushed the Download button off the right edge, taking the page into
   horizontal scroll. On a one-page site the section links are a convenience, not the way in —
   so below the breakpoint the brand and the download button stay, and the rest goes.

   860px, not 760px. Measured: the full navigation needs 788px, so a 760px breakpoint left a
   dead zone from 761 to 789 where the links showed and the Download button was clipped — and
   768px is exactly an iPad in portrait. The extra headroom is for the next link added. */
@media(max-width:860px){
  .nav .in{gap:12px;height:56px;padding:0 18px}
  .nav .lk{gap:12px}
  .nav .lk a:not(.btn),.nav .gh{display:none}
  .wrap{padding:0 18px}
  .hero{padding:44px 0 4px}
  .eyebrow{font-size:10px;letter-spacing:.07em;line-height:1.7}
  .hero .micro{font-size:11px;line-height:1.7}
  .hero p{font-size:16.5px}
  .shot figcaption{font-size:13px}
}
/* Nothing should ever scroll sideways; if something overflows that is a bug to fix, but it
   should not take the whole page with it in the meantime. */
html,body{overflow-x:hidden}

/* sections */
.sec{padding:64px 0}
section[id]{scroll-margin-top:78px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sec h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,38px);margin:0 0 10px;letter-spacing:.005em;text-wrap:balance}
.sec .lead{color:var(--ink2);font-size:17px;line-height:1.65;max-width:62ch;margin:0 0 30px;text-wrap:pretty}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.feat{grid-template-columns:1fr}}
.fc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 21px;box-shadow:var(--sh)}
/* Icons are inline stroke SVG at currentColor, so they inherit the tile's colour and stay
   crisp at any scale. The glyphs that were here before (◇ ◐ 🔒 ▦ …) rendered differently on
   every platform and several were doing work no reader could decode. */
.fc .ic{width:40px;height:40px;border-radius:11px;background:var(--indigo-bg);color:var(--indigo);display:grid;place-items:center;margin-bottom:12px}
.fc .ic svg{width:22px;height:22px;display:block}
.fc h3{font-size:16.5px;margin:0 0 5px;font-weight:600}
.fc p{margin:0;font-size:13.5px;color:var(--ink2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
@media(max-width:760px){.steps{grid-template-columns:1fr 1fr}}
.step{border:1px solid var(--line);border-radius:13px;padding:17px;background:var(--card);box-shadow:var(--sh)}
.step .n{font-family:var(--mono);font-size:11px;color:var(--indigo);margin-bottom:7px}
.step h4{font-size:15px;margin:0 0 4px;font-weight:600}.step p{margin:0;font-size:13px;color:var(--ink2)}

/* client/server split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.pcard{border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--sh);background:var(--card)}
/* The free client is the thing a visitor can have in two minutes; Server is a roadmap item.
   An even two-column split gave them equal billing, which reads as two products for sale. */
.pricing{grid-template-columns:1.9fr 1fr;align-items:start}
@media(max-width:860px){.pricing{grid-template-columns:1fr}}
.pricing .pcard{padding:30px 32px}
.pricing .pcard h3{font-size:34px}
.pricing .pcard ul{font-size:14.5px}
/* Server: quieter surface, smaller type, dashed edge — present, clearly not purchasable. */
.pricing .pcard.paid{border-color:var(--line2);border-style:dashed;background:#f7f8fa;box-shadow:none;padding:22px 24px}
.pricing .pcard.paid h3{font-size:23px;color:var(--ink2)}
.pricing .pcard.paid .price{font-size:13.5px}
.pricing .pcard.paid ul{font-size:13px;color:var(--ink3)}
.pricing .pcard.paid li::before{color:var(--ink3)}
.pcard .tag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:4px 11px;display:inline-block;margin-bottom:12px}
.tag.free{background:var(--green-bg);color:var(--green)} .tag.paid{background:var(--indigo-bg);color:var(--indigo)}
.pcard h3{font-family:var(--serif);font-weight:400;font-size:28px;margin:0 0 4px}
.pcard .price{font-size:15px;color:var(--ink2);margin-bottom:16px}
.pcard .price b{font-size:22px;color:var(--ink);font-weight:600;font-family:var(--body)}
.pcard ul{list-style:none;padding:0;margin:0 0 18px}
.pcard li{font-size:14px;color:var(--ink2);padding:6px 0 6px 22px;position:relative}
.pcard li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.pcard.paid li::before{background:var(--indigo)}
.pcard .note{font-size:12px;color:var(--ink3);margin-top:4px}

/* educators band */
.band{background:var(--ink);color:#e7ecf3;border-radius:20px;padding:40px 44px;text-align:center}
.band h2{font-family:var(--serif);color:#fff;font-weight:400;font-size:34px;margin:0 0 10px}
.band p{color:#aab3c6;max-width:62ch;margin:0 auto 8px;font-size:16px}
.band .row{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:22px;text-align:left}
.band .b{max-width:230px}.band .b b{color:#fff;display:block;margin-bottom:3px}.band .b span{color:#95a1b6;font-size:13.5px}

/* oss band */
.oss{border:1px dashed var(--line2);border-radius:16px;padding:26px 28px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.oss .big{font-family:var(--mono);font-size:34px;color:var(--indigo)}
.oss h3{margin:0 0 4px;font-size:18px}.oss p{margin:0;color:var(--ink2);font-size:14px;max-width:60ch}

footer{border-top:1px solid var(--line);margin-top:60px;padding:30px 0;color:var(--ink3);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* --- anti-lock-in additions --- */
.guarantee{margin:40px auto 0;max-width:820px;border:1px solid var(--green-line);background:var(--green-bg);border-radius:16px;padding:24px 28px;text-align:center}
.guarantee .g1{font-family:var(--serif);font-size:27px;color:var(--green);margin-bottom:6px}
.guarantee p{margin:0;color:var(--ink2);font-size:14.5px;max-width:64ch;margin-inline:auto}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media(max-width:760px){.vs{grid-template-columns:1fr}}
.vs .col{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--card);box-shadow:var(--sh)}
.vs .col.them{background:#fcfcfd}
.vs h3{margin:0 0 12px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.vs .tag2{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;border-radius:20px;padding:2px 9px}
.vs .them .tag2{background:#f1f2f6;color:var(--ink3)}
.vs .us .tag2{background:var(--green-bg);color:var(--green)}
.vs ul{list-style:none;padding:0;margin:0}
.vs li{font-size:13.5px;color:var(--ink2);padding:6px 0 6px 24px;position:relative;line-height:1.5}
.vs .them li::before{content:"✕";position:absolute;left:2px;top:6px;color:var(--ink3);font-size:12px}
.vs .us li::before{content:"✓";position:absolute;left:2px;top:6px;color:var(--green);font-size:12px}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
@media(max-width:760px){.paths{grid-template-columns:1fr}}
.path{border:1px solid var(--line);border-radius:14px;padding:21px 22px;background:var(--card);box-shadow:var(--sh)}
.path .n{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--indigo);margin-bottom:8px}
.path h3{margin:0 0 6px;font-size:16.5px;font-weight:600}
.path p{margin:0 0 12px;font-size:13.5px;color:var(--ink2)}
.path pre{margin:0;background:var(--code);color:var(--codeink);border-radius:9px;padding:12px 14px;font-family:var(--mono);font-size:11.5px;line-height:1.65;overflow-x:auto}
.path .k{color:#79c0ff}.path .s{color:#a5d6ff}.path .c{color:#6b7689}
/* The planned path is deliberately quieter than the one that works.
   Equal weight and a small badge meant a skimmer could take both as shipping, which is the
   one misreading this page cannot afford — so: muted surface, no accent on the number, a
   status line that is a sentence rather than a badge, and the sample dimmed until hover. */
.path.planned{background:#f7f8fa;border-style:dashed;box-shadow:none}
.path.planned .n{color:var(--ink3)}
.path.planned h3{color:var(--ink2);font-weight:600}
.path.planned p{color:var(--ink3)}
.path.planned pre{opacity:.62;filter:saturate(.45)}
.path.planned:hover pre{opacity:1;filter:none}
.notyet{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:7px;padding:5px 11px;margin-bottom:10px}
.arrowflow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin:26px 0 4px}
.arrowflow .step2{border:1px solid var(--line2);border-radius:11px;padding:11px 16px;background:var(--card);font-size:13.5px;font-weight:500;box-shadow:var(--sh)}
.arrowflow .ar{color:var(--ink3);font-family:var(--mono)}
.notgoal{margin-top:24px;border:1px dashed var(--line2);border-radius:13px;padding:18px 22px;background:#fcfcfd}
.notgoal h4{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--ink2)}
.notgoal p{margin:0;font-size:13px;color:var(--ink3);max-width:78ch}
.status{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:2px 8px;background:var(--indigo-bg);color:var(--indigo);vertical-align:2px}
.status.soon{background:#f1f2f6;color:var(--ink3)}

.shot{margin:26px 0 34px;padding:0}
.shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh2);background:var(--card)}
.shot figcaption{margin-top:12px;font-size:13.5px;line-height:1.65;color:var(--ink2);max-width:78ch}
.dl{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.dlmain{text-align:center}
.dlalt{font-size:12px;color:var(--ink3);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.dlopt{color:var(--indigo);text-decoration:none;border-bottom:1px solid transparent}
.dlopt:hover{border-bottom-color:var(--indigo)}
.dlopt[hidden]{display:none}

/* getting-started page
   A table of contents, plain lists and a question list — the three shapes a walkthrough
   needs that a landing page does not. */
.toc{display:flex;flex-wrap:wrap;gap:8px 14px;padding-top:26px;padding-bottom:4px;font-size:13.5px}
.toc a{color:var(--ink2);border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 13px}
.toc a:hover{border-color:var(--indigo);color:var(--indigo)}
ul.plain{margin:0 0 18px;padding-left:20px;max-width:72ch}
ul.plain li{margin-bottom:9px;color:var(--ink2);line-height:1.65}
ul.plain li b{color:var(--ink)}
.faq{display:grid;gap:14px;margin-top:6px}
.qa{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px 20px;box-shadow:var(--sh)}
.qa h3{margin:0 0 6px;font-size:16px;font-weight:600}
.qa p{margin:0;font-size:14px;color:var(--ink2);line-height:1.68;max-width:74ch}

/* footer */
.site-foot{padding:36px 24px 48px;border-top:1px solid var(--line);color:var(--ink3);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;align-items:flex-start}
.site-foot b{color:var(--ink2)}
.fmeta{margin-top:5px}
.flinks{display:flex;flex-wrap:wrap;gap:6px 18px}
.flinks a{color:var(--ink2)}
.flinks a:hover{color:var(--indigo);text-decoration:underline;text-underline-offset:2px}

/* Contact sits with Download rather than among the section links: it is an action, not a
   place on the page, and pairing them gives the bar one obvious right-hand end. */
.nav .lk .navcta{padding:7px 13px;font-size:13.5px}
@media(max-width:860px){.nav .lk .navcta{display:none}}

/* ── the hero band ──────────────────────────────────────────────────────────────────────
   Full bleed and dark, sitting directly under a white nav with no border between them: the
   band's own edge is the separation. Everything below it stays on the light ground. */
:root{
  --band:#111A2B;--band-card:#182234;--band-line:#253148;--band-rule:#202C40;
  --band-ink:#fff;--band-ink2:#A9B8CC;--band-ink3:#8095B2;--band-btn:#4A5585;--band-btn-line:#33415A;
}
.nav{border-bottom:0}

.hb{background:var(--band);color:var(--band-ink);text-align:left}
/* 72px, not 88. At 88 with an 84px headline the band stood 928px tall in a 900px
   viewport: the buttons sat on the fold and the platform line under them was cut off — the
   one part of a hero that must never need scrolling to. */
.hb-in{max-width:1280px;margin:0 auto;padding:72px 80px;display:grid;grid-template-columns:46fr 54fr;gap:52px;align-items:center}

.hb .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--band-ink3);margin-bottom:18px}
/* Capped at 64px rather than the 84 the reference uses: this headline is two sentences,
   and at 84 it took four lines in a 46% column and pushed everything below it off screen.
   Same proportion of the band, fewer lines. */
.hb h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.5vw,64px);line-height:1.04;letter-spacing:-.032em;color:var(--band-ink);margin:0 0 20px;max-width:none;text-wrap:balance}
.hb h1 em{font-style:italic;color:#B9C4FF}
.hb p{font-size:17.5px;line-height:1.58;color:var(--band-ink2);max-width:480px;margin:0 0 26px}
.hb p b{color:#DCE6F4}
.hb .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start}
/* One filled button, one outlined: two filled ones make the page ask twice. The fill is
   desaturated from the brand indigo, which shouts against this ground. */
.hb .btn{height:52px;display:inline-flex;align-items:center;border-radius:8px;padding:0 22px;font-size:15px;background:var(--band-btn);border:1px solid var(--band-btn);color:#fff}
.hb .btn:hover{background:#56638f;border-color:#56638f}
.hb .btn.ghost{background:transparent;border:1px solid var(--band-btn-line);color:#E6EDF7}
.hb .btn.ghost:hover{background:rgba(255,255,255,.05);border-color:#4a5b78;color:#fff}
.hb .micro{font-family:var(--mono);font-size:12px;color:var(--band-ink3);margin-top:18px}

/* The card: a real answer with each part labelled by where that part came from. */
.answer{background:var(--band-card);border:1px solid var(--band-line);border-radius:14px;padding:22px 24px}
.answer-q{font-family:var(--mono);font-size:13px;line-height:1.55;color:var(--band-ink3);margin-bottom:18px}
.answer-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 0;border-top:1px solid var(--band-rule)}
.answer-label{font-size:14px;color:var(--band-ink2)}
.answer-val{margin-left:auto;font-family:var(--mono);font-size:13.5px;color:var(--band-ink)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-family:var(--mono);font-size:11.5px;white-space:nowrap}
/* Decorative only — the chip's own words say which category it is, so nothing is carried
   by hue alone. */
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.schema{background:#E9E4FB;color:#4A2FA8}
.chip.sql{background:#DDEBFC;color:#14508F}
.chip.counted{background:#DCF2E5;color:#0C6B43}
.chip.local{background:#FCEBD9;color:#8A4B00}
.chip.cost{background:#E2EEF0;color:#14595E}

.answer-total{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:6px;padding-top:18px;border-top:2px solid #2C3A52}
.answer-total-label{font-family:var(--serif);font-size:24px;color:var(--band-ink)}
.answer-total-val{margin-left:auto;font-family:var(--mono);font-size:19px;color:var(--band-ink)}

@media(max-width:1000px){
  .hb-in{grid-template-columns:1fr;gap:38px;padding:60px 24px;align-items:start}
  .hb h1{font-size:40px}
  .hb p{max-width:none}
}
@media(max-width:560px){
  /* Let the chip drop under the value rather than shrinking the type to fit.
     The break is forced by giving the *value* the whole line, so the chip stays a pill that
     hugs its text — stretching it to the full width would turn it into a bar. */
  .answer-val{flex-basis:100%;text-align:right;margin-left:0}
  .chip{margin-left:auto}
}