/* Databasin homepage, new design language.
   Values from SPEC.md (homepage-2026-10-27) and get_computed_styles / get_jsx on the H-01..H-06 boards in Paper.
   Fonts: Google Fonts (Host Grotesk, Geist, Geist Mono, Inter, DM Mono), checked 2026-10-28. */
.db-site{
  /* grounds */
  --white:#FFFFFF; --paper:#F5F4EF; --cream:#FBF9F4; --well:#F3F0E8; --stone:#EBEBE7; --mist:#F1F3F6;
  /* panels */
  --sky:#DCE5F5; --green:#CDEBC2; --ultra:#2C2F87;
  /* ink */
  --ink:#111214; --body:#56585D; --grey:#8B8D92;
  --w-ink:#1A1914; --w-muted:#5B584E; --w-faint:#8F8B80;
  /* accents */
  --cobalt:#2348FF; --cobalt-light:#7088FF; --field-green:#3B6B2A;
  /* hairlines */
  --line:#1112141A; --w-line:#1A19142E; --w-row:#1A191417;
  --w-shadow:#1414100D 0 1px 2px, #14141038 0 18px 40px -18px;
  /* type */
  --f-display:"Host Grotesk", system-ui, sans-serif;
  --f-body:"Geist", system-ui, sans-serif;
  --f-mono:"Geist Mono", ui-monospace, monospace;
  --f-ui:"Inter", system-ui, sans-serif;
  --f-data:"DM Mono", ui-monospace, monospace;
  /* layout */
  --gutter:120px; --container:1200px; --gap:24px;
  --t-hero:56px; --l-hero:60px; --t-title:38px; --l-title:44px;
  background:var(--white); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:22px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-synthesis:none;
  text-align:left; overflow-wrap:anywhere;
}
.db-site *,.db-site *::before,.db-site *::after{box-sizing:border-box}
.db-site h1,.db-site h2,.db-site h3,.db-site h4,.db-site p,.db-site ul,.db-site ol,.db-site figure,.db-site blockquote{margin:0;padding:0;font-weight:400}
.db-site ul,.db-site ol{list-style:none}
.db-site a{color:inherit;text-decoration:none}
.db-site img,.db-site svg{display:block;max-width:100%}

/* sections: full-width band, content in a 1200 container (padding-inline 120 at 1440) */
.db-site section.hp{width:100%;padding-inline:var(--gutter)}
.db-site .wrap{max-width:var(--container);margin-inline:auto;width:100%}

/* type */
.db-site .t-hero{font-family:var(--f-display);font-weight:400;font-size:var(--t-hero);line-height:var(--l-hero);letter-spacing:-0.024em;color:var(--ink);text-wrap:balance}
.db-site .t-title{font-family:var(--f-display);font-weight:400;font-size:var(--t-title);line-height:var(--l-title);letter-spacing:-0.018em;color:var(--ink);text-wrap:balance}
.db-site .t-card{font-family:var(--f-display);font-weight:400;font-size:22px;line-height:28px;color:var(--ink)}
.db-site .t-num{font-family:var(--f-display);font-weight:400;font-size:56px;line-height:60px;letter-spacing:-0.024em;color:var(--cobalt)}
.db-site .t-lede{font-family:var(--f-body);font-size:17px;line-height:26px;letter-spacing:-0.003em;color:var(--body)}
.db-site .t-body{font-family:var(--f-body);font-size:15px;line-height:22px;color:var(--body)}
.db-site .t-small{font-family:var(--f-body);font-size:14px;line-height:21px;color:var(--body)}
.db-site .grey{color:var(--grey)}

/* buttons */
.db-site .pill{display:inline-flex;align-items:center;height:44px;padding-inline:20px;border-radius:999px;background:var(--ink);color:#FFFFFF;font:500 15px/22px var(--f-body);white-space:nowrap}
.db-site .pill.sm{height:34px;padding-inline:14px;font-size:13.5px;line-height:20px}
.db-site .tlink{font:500 15px/22px var(--f-body);color:var(--ink);white-space:nowrap}
.db-site .ctas{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

/* product windows (our own drawings, as on the boards) */
.db-site .window{background:var(--cream);border:1px solid var(--w-line);box-shadow:var(--w-shadow);border-radius:0;font-family:var(--f-ui);color:var(--w-ink)}
.db-site .well{background:var(--well);border:1px solid var(--w-row);font:12px/19px var(--f-data);color:var(--w-muted);white-space:pre;overflow:hidden}
.db-site .mono{font-family:var(--f-data)}
.db-site .field{position:absolute;inset:0;background-repeat:no-repeat;background-position:50%;background-size:100% 100%;pointer-events:none}
.db-site .shot{display:block;width:100%;height:auto;border:1px solid var(--w-line);box-shadow:var(--w-shadow)}

/* hairlines */
.db-site .hr{height:1px;background:var(--line)}

/* tablet and phone: same design, narrower gutters and type; every variant also carries its own stacking rules */
@media (max-width:1100px){ .db-site{--gutter:48px} }
@media (max-width:760px){
  .db-site{--gutter:16px;--t-hero:38px;--l-hero:42px;--t-title:28px;--l-title:33px}
  .db-site .t-num{font-size:44px;line-height:48px}
  .db-site .well{white-space:pre-wrap}
}

/* Databasin page sections (every type except the homepage), on top of databasin.css.
   Same design vocabulary as the homepage port: Host Grotesk display, Geist body, white ground,
   radius 0 except pills, cream windows, cobalt pen fields inside panels, ultramarine once per page (closing only).
   Grounds are classes on the section; build.py / the flip script shift a ground when two neighbours match. */

.db-site section.s{position:relative;padding-block:112px}
.db-site section.s.hero{padding-top:96px;padding-bottom:88px}
.db-site section.s.tight{padding-block:48px}
.db-site section.s.flush{padding-bottom:0}

/* grounds: --bg is the section, --card the surface that sits on it */
.db-site .g-white{background:var(--white);--card:var(--paper);--card-b:transparent}
.db-site .g-paper{background:var(--paper);--card:var(--white);--card-b:transparent}
.db-site .g-stone{background:var(--stone);--card:var(--white);--card-b:transparent}
.db-site .g-mist{background:var(--mist);--card:var(--white);--card-b:transparent}
.db-site .g-ultra{background:var(--ultra);color:#FFFFFF;--card:#FFFFFF1A}
.db-site .g-ultra .t-hero,.db-site .g-ultra .t-title,.db-site .g-ultra .t-lede,.db-site .g-ultra .t-body{color:#FFFFFF}
.db-site .g-ultra h2,.db-site .g-ultra .t-disp,.db-site .g-ultra a{color:#FFFFFF}
.db-site .g-ultra .t-lede{color:#DCE1FF}
.db-site .g-ultra .pill{background:#FFFFFF;color:var(--ultra)}

/* panels inside a section */
.db-site .panel{padding:56px}
.db-site .panel.sky{background:var(--sky)}
.db-site .panel.green{background:var(--green)}
.db-site .panel.mist{background:var(--mist)}
.db-site .panel.paper{background:var(--paper)}
.db-site .panel.sky .t-body,.db-site .panel.sky .t-lede,.db-site .panel.sky p{color:var(--ultra)}
.db-site .panel.sky .t-title,.db-site .panel.sky .t-card,.db-site .panel.sky h3{color:var(--ink)}
.db-site .card{background:var(--card);border:1px solid var(--card-b);padding:28px;min-width:0}

/* type helpers */
.db-site .t-disp{font-family:var(--f-display);font-weight:400;font-size:var(--t-hero);line-height:var(--l-hero);letter-spacing:-0.024em;color:var(--ink);text-wrap:balance}
.db-site .t-xl{font-family:var(--f-display);font-weight:400;font-size:72px;line-height:76px;letter-spacing:-0.026em;color:var(--ink);text-wrap:balance}
.db-site h2,.db-site h3{text-wrap:balance}
.db-site .t-h3{font:400 22px/28px var(--f-display);letter-spacing:-0.01em;color:var(--ink);text-wrap:balance}
.db-site .t-h3l{font:400 30px/36px var(--f-display);letter-spacing:-0.014em;color:var(--ink);text-wrap:balance}
.db-site .t-lab{font:500 13px/20px var(--f-body);color:var(--grey)}
.db-site .t-mono{font:400 13px/20px var(--f-data);color:var(--cobalt)}
.db-site .t-meta{font:400 14px/21px var(--f-body);color:var(--grey)}
.db-site .prose{display:flex;flex-direction:column;gap:16px;max-width:690px}
.db-site .prose p,.db-site .prose li{font:400 17px/27px var(--f-body);color:var(--body)}
.db-site .prose ul{display:flex;flex-direction:column;gap:8px;padding-left:20px;list-style:disc}
.db-site .prose a,.db-site .t-body a,.db-site .ans a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.db-site .stack{display:flex;flex-direction:column}
.db-site .gap8{gap:8px}.db-site .gap12{gap:12px}.db-site .gap16{gap:16px}.db-site .gap24{gap:24px}.db-site .gap32{gap:32px}.db-site .gap48{gap:48px}.db-site .gap64{gap:64px}
.db-site .mt24{margin-top:24px}.db-site .mt40{margin-top:40px}.db-site .mt56{margin-top:56px}
.db-site .w690{max-width:690px}.db-site .w560{max-width:560px}.db-site .w790{max-width:790px}
.db-site .crumbs{font:400 14px/22px var(--f-body);color:var(--grey);margin-bottom:28px}
.db-site .crumbs a{color:var(--body)}
.db-site .hl{border-top:1px solid var(--line)}
.db-site .inkrule{border-top:1px solid var(--ink)}

/* grids */
.db-site .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.db-site .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.db-site .g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.db-site .split{display:grid;grid-template-columns:384fr 690fr;gap:24px 126px;align-items:start}
.db-site .split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 72px;align-items:center}
.db-site .split.wide{grid-template-columns:486fr 690fr;gap:24px 24px}
.db-site .split .sticky{position:sticky;top:24px}
.db-site .row-end{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}

/* rows between hairlines */
.db-site .rows > *{border-bottom:1px solid var(--line);padding-block:24px}
.db-site .rows{border-top:1px solid var(--line)}
.db-site .rows.ink{border-top-color:var(--ink)}
.db-site .rowgrid{display:grid;grid-template-columns:384fr 690fr;gap:12px 126px;align-items:start}
.db-site .rowgrid.three{grid-template-columns:200fr 384fr 490fr;gap:12px 48px}

/* visuals: real screens in a cream window, placeholder frames for screens still needed */
.db-site .win{background:var(--cream);border:1px solid var(--w-line);box-shadow:var(--w-shadow);padding:10px;margin:0}
.db-site .win img{width:100%;height:auto;display:block;border:1px solid var(--w-row)}
.db-site .ph{background:var(--well);border:1px solid var(--w-line);aspect-ratio:16/10;display:flex;align-items:flex-start;padding:24px;margin:0;width:100%}
.db-site .ph p{font:400 14px/21px var(--f-body);color:var(--w-muted);max-width:420px}
.db-site .ph.short{aspect-ratio:auto;min-height:220px}
.db-site .ph.wide{aspect-ratio:21/8}
.db-site .win.wide{max-width:960px}
.db-site .field-box{position:relative;min-height:200px;overflow:hidden}
.db-site .field-box .field{position:absolute;inset:0;background-size:100% 100%}
.db-site .portraits{display:flex;gap:24px}
.db-site .portrait{width:100%;max-width:220px;aspect-ratio:1/1;object-fit:cover;background:var(--paper);display:block}

/* tabs: one frame at a time, following the selected item (keeps one visual per section) */
.db-site .tabs{display:grid;grid-template-columns:486fr 690fr;gap:24px 48px;align-items:start}
.db-site .tablist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.db-site .tab-i{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:20px 0;cursor:pointer;color:inherit;font:inherit}
.db-site .tab-i .t-h3{color:var(--grey);transition:color .15s}
.db-site .tab-i .tx{display:none;margin-top:10px}
.db-site .tab-i[aria-selected="true"] .t-h3{color:var(--ink)}
.db-site .tab-i[aria-selected="true"] .tx{display:block}
.db-site .tab-f{display:none}
.db-site .tab-f.on{display:block}

/* FAQ accordions: every question shown, the first answer open */
.db-site details.q{border-bottom:1px solid var(--line)}
.db-site details.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding-block:22px}
.db-site details.q summary::-webkit-details-marker{display:none}
.db-site details.q summary::after{content:"+";font:400 22px/26px var(--f-body);color:var(--grey);flex-shrink:0}
.db-site details.q[open] summary::after{content:"–"}
.db-site details.q summary h3{font:400 20px/26px var(--f-display);color:var(--ink)}
.db-site details.q .ans{padding-bottom:24px;max-width:690px}
.db-site details.q .ans p{font:400 15px/23px var(--f-body);color:var(--body)}
.db-site .qlist{border-top:1px solid var(--line)}
.db-site .qlist.big details.q summary h3{font-size:28px;line-height:34px;letter-spacing:-0.012em}
.db-site .qcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.db-site .qcards details.q{background:var(--card);border:0;padding-inline:24px}

/* tables */
.db-site .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.db-site table.tb{width:100%;border-collapse:collapse;min-width:640px}
.db-site table.tb th{font:500 13px/20px var(--f-body);color:var(--grey);text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
.db-site table.tb td{font:400 15px/22px var(--f-body);color:var(--body);padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.db-site table.tb td:first-child{color:var(--ink);font-weight:500}
.db-site .win table.tb{min-width:560px}
.db-site .win .tbin{padding:12px 20px}
.db-site .win table.tb th{font:400 12px/19px var(--f-ui);color:var(--w-faint);border-bottom-color:var(--w-row)}
.db-site .win table.tb td{font:400 13px/19px var(--f-ui);color:var(--w-muted);border-bottom-color:var(--w-row)}
.db-site .win table.tb td:first-child{color:var(--w-ink)}

/* lists inside sides and entries */
.db-site ul.dots{display:flex;flex-direction:column;gap:8px}
.db-site ul.dots li{font:400 15px/22px var(--f-body);color:var(--body);padding-left:16px;position:relative}
.db-site ul.dots li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.db-site .panel.sky ul.dots li::before{background:var(--ultra)}

/* pills row of topics */
.db-site .chips{display:flex;flex-wrap:wrap;gap:10px}
.db-site .chip{display:inline-flex;align-items:center;height:36px;padding-inline:16px;border:1px solid var(--line);border-radius:999px;font:400 14px/22px var(--f-body);color:var(--ink);background:var(--white)}
.db-site .names{display:flex;flex-wrap:wrap;gap:12px 48px;align-items:baseline}
.db-site .names span{font:400 22px/28px var(--f-display);color:var(--ink)}
.db-site .names.big span{font-size:44px;line-height:52px;letter-spacing:-0.02em}

/* numbers */
.db-site .fig{font:400 56px/60px var(--f-display);letter-spacing:-0.024em;color:var(--cobalt)}
.db-site .fig.xl{font-size:96px;line-height:96px}
.db-site .fig.ink{color:var(--ink)}
.db-site .fig.green{color:var(--field-green)}

/* bars for weights */
.db-site .bar{height:10px;background:var(--stone)}
.db-site .bar i{display:block;height:100%;background:var(--cobalt)}

/* side by side (head-to-head) */
.db-site .sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.db-site .vrule{border-left:1px solid var(--ultra);padding-left:40px}

/* legal and article reading */
.db-site .rail{display:flex;flex-direction:column;gap:10px;position:sticky;top:24px}
.db-site .rail a{font:400 14px/20px var(--f-body);color:var(--body)}
.db-site .doc h2{font:400 30px/36px var(--f-display);letter-spacing:-0.014em;color:var(--ink);margin-top:56px;margin-bottom:16px}
.db-site .doc h2:first-child{margin-top:0}
.db-site .doc p,.db-site .doc li{font:400 17px/28px var(--f-body);color:var(--body);margin-bottom:14px}
.db-site .doc ul{padding-left:20px;list-style:disc;margin-bottom:14px}
.db-site .doc li{margin-bottom:6px}
.db-site .doc.sm p,.db-site .doc.sm li{font-size:15px;line-height:24px}
.db-site .doc.sm h2{font-size:24px;line-height:30px;margin-top:44px}
.db-site .doc figure{margin:40px 0}
.db-site .doc figcaption{font:400 14px/21px var(--f-body);color:var(--grey);margin-top:12px}
.db-site .doc blockquote{font:400 26px/34px var(--f-display);color:var(--ink);margin:32px 0}
.db-site .srcs{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.db-site .srcs p,.db-site .srcs a{font:400 13px/19px var(--f-body);color:var(--grey);margin:0}
.db-site .sheet{background:var(--white);padding:72px 96px;max-width:996px}

/* closing ends on the footer */
.db-site .k-closing + .v-hp-foot-01,.db-site .flip:last-of-type + .v-hp-foot-01{border-top:0}

@media (max-width:1100px){
  .db-site section.s{padding-block:88px}
  .db-site .split,.db-site .split.wide,.db-site .rowgrid,.db-site .tabs{grid-template-columns:minmax(0,1fr);gap:24px}
  .db-site .split .sticky,.db-site .rail{position:static}
  .db-site .rowgrid.three{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .db-site .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-site .t-xl{font-size:56px;line-height:60px}
  .db-site .sheet{padding:56px 48px}
}
@media (max-width:760px){
  .db-site section.s{padding-block:64px}
  .db-site section.s.hero{padding-top:56px;padding-bottom:56px}
  .db-site section.s.flush{padding-bottom:0}
  .db-site .g2,.db-site .g3,.db-site .g4,.db-site .sides,.db-site .qcards,.db-site .split.even,.db-site .rowgrid.three{grid-template-columns:minmax(0,1fr)}
  .db-site .panel{padding:28px 20px}
  .db-site .card{padding:22px}
  .db-site .t-xl{font-size:40px;line-height:44px}
  .db-site .fig{font-size:44px;line-height:48px}
  .db-site .fig.xl{font-size:56px;line-height:60px}
  .db-site .names.big span{font-size:30px;line-height:36px}
  .db-site .qlist.big details.q summary h3{font-size:21px;line-height:27px}
  .db-site .vrule{border-left:0;border-top:1px solid var(--ultra);padding-left:0;padding-top:24px}
  .db-site .sheet{padding:32px 20px}
  .db-site .doc h2{font-size:24px;line-height:30px}
  .db-site .portrait{max-width:160px}
  .db-site .t-h3l{font-size:24px;line-height:30px}
}
.db-site table.tb td,.db-site table.tb th{overflow-wrap:normal;word-break:normal}
.db-site table.tb td:first-child{min-width:140px}
/* visual slots: the candidate fills the slot box at the slot's proportions */
.db-site .vslot{position:relative;width:100%;overflow:hidden}
.db-site .vslot.sh-half{aspect-ratio:564/352}
.db-site .vslot.sh-wide{aspect-ratio:1200/457}
.db-site .vslot.sh-col{aspect-ratio:690/431}
.db-site .vslot.sh-strip160{aspect-ratio:384/160}
.db-site .vslot.sh-strip140{height:140px}
.db-site .vslot.sh-strip220{height:220px}
.db-site .vslot.sh-side{min-height:360px;height:100%}
.db-site .vslot.sh-names{min-height:300px;height:100%}
.db-site .vslot > *{position:absolute;inset:0;width:100%;height:100%;margin:0}
.db-site .win.fit{display:flex;align-items:flex-start;justify-content:center;padding:10px}
.db-site .win.fit img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border:1px solid var(--w-row)}
.db-site .ph.fill{aspect-ratio:auto}
.db-site .fld{background-size:cover;background-position:center;background-repeat:no-repeat}
.db-site .portraits.fill{display:flex;gap:16px;align-items:center;justify-content:flex-start}
.db-site .portraits.fill .portrait{height:100%;width:auto;max-width:48%;aspect-ratio:1/1}
/* hero: split ground, and the index of pages it leads to */
.db-site section.hp.hero.splitground{padding:0}
.db-site .hero.splitground .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:none;margin:0;width:100%}
.db-site .hero.splitground .sg{padding:96px var(--gutter) 88px}
.db-site .hero.splitground .sg.r{background:var(--white);justify-content:flex-end}
.db-site .ixl .ix{display:flex;justify-content:space-between;align-items:center;gap:16px}
.db-site .ixl .ix .arr{font:400 22px/28px var(--f-body);color:var(--ink)}
@media (max-width:760px){
  .db-site .hero.splitground .wrap{grid-template-columns:minmax(0,1fr)}
  .db-site .hero.splitground .sg{padding:48px var(--gutter)}
  .db-site .vslot.sh-side,.db-site .vslot.sh-names{min-height:220px}
}

/* coloured doors (homepage services pick, carried to card sections) */
.db-site .door{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:28px 28px 0;min-width:0}
.db-site .door.sky{background:var(--sky)} .db-site .door.sky p{color:var(--ultra)} .db-site .door.sky .t-h3l{color:var(--ink)}
.db-site .door.green{background:var(--green)} .db-site .door.green .t-body{color:#2D4A22}
.db-site .door.paper{background:var(--paper)}
.db-site .door.line{background:var(--white);border:1px solid var(--line)}
.db-site .door .doorfield{margin-inline:-28px}
.db-site .door .doorfield .field{background-size:cover}
@media (max-width:760px){.db-site .tlink{white-space:normal}}

.db-site .ft{padding-top:72px;padding-bottom:40px}
.db-site .ft .brand{display:flex;align-items:center;gap:10px}
.db-site .ft .dot{width:13px;height:13px;border-radius:50%;background:var(--ink)}
.db-site .ft .word{font:500 17px/26px var(--f-body);letter-spacing:-0.01em;color:var(--ink)}
.db-site .ft .about p{font:400 14px/22px var(--f-body);color:var(--body);max-width:300px;margin-top:14px}
.db-site .ft .cols{display:grid;gap:32px 24px;align-items:start}
.db-site .ft .col{display:flex;flex-direction:column;gap:9px;min-width:0}
.db-site .ft .col h4{font:500 14px/22px var(--f-body);color:var(--ink);margin-bottom:2px}
.db-site .ft .col a{font:400 14px/21px var(--f-body);color:var(--body)}
.db-site .ft .col a.all{color:var(--ink);font-weight:500}
.db-site .ft .legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;border-top:1px solid var(--line);padding-top:20px;margin-top:56px}
.db-site .ft .legal a,.db-site .ft .legal span{font:400 13px/20px var(--f-body);color:var(--grey)}
.db-site .ft .legal .sp{flex:1 1 auto}
.db-site .ft .linkrow{display:flex;flex-wrap:wrap;gap:8px 28px;border-top:1px solid var(--line);padding-top:20px;margin-top:48px}
.db-site .ft .linkrow a{font:400 14px/22px var(--f-body);color:var(--body)}
.db-site .ft .cmp{border-top:1px solid var(--line);padding-top:32px;margin-top:48px}
.db-site .ft .cmp h4.cont{visibility:hidden}
@media (max-width:1100px){.db-site .ft .cmp .sp0{display:none}}
@media (max-width:760px){.db-site .ft .cmp h4.cont{display:none}.db-site .ft .cmp .col:last-child{grid-column:2;margin-top:-23px}}
.db-site .ft .hubs{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:40px}
.db-site .ft .hubs a{font:400 30px/36px var(--f-display);letter-spacing:-0.014em;color:var(--ink)}
@media (max-width:1100px){.db-site .ft .cols{grid-template-columns:repeat(3,minmax(0,1fr))!important}.db-site .ft .cols .about{grid-column:1/-1}}
@media (max-width:760px){.db-site .ft .cols{grid-template-columns:repeat(2,minmax(0,1fr))!important}.db-site .ft .hubs a{font-size:22px;line-height:28px}}

.db-site .snav-wrap{position:relative;z-index:30;background:var(--white);border-bottom:1px solid var(--line)}
.db-site .snav{display:flex;align-items:center;gap:36px;height:72px}
.db-site .snav .brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.db-site .snav .dot{width:13px;height:13px;border-radius:50%;background:var(--ink)}
.db-site .snav .word{font:500 17px/26px var(--f-body);letter-spacing:-0.01em;color:var(--ink)}
.db-site .snav .items{display:flex;align-items:center;gap:6px}
.db-site .snav .item > button{background:none;border:0;cursor:pointer;font:400 14px/22px var(--f-body);color:var(--body);padding:24px 10px;display:flex;align-items:center;gap:6px}
.db-site .snav .item > button i{display:inline-block;width:5px;height:5px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.db-site .snav .item.open > button{color:var(--ink)}
.db-site .snav .sp{flex:1 1 auto}
.db-site .snav .acts{display:flex;align-items:center;gap:20px;flex-shrink:0}
.db-site .snav .acts a.t{font:400 14px/22px var(--f-body);color:var(--body)}
.db-site .dd{display:none;position:absolute;left:0;right:0;top:72px;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 18px 40px -24px #14141040}
.db-site .item.open .dd{display:block}
.db-site .dd .in{max-width:var(--container);margin:0 auto;padding:32px 0}
.db-site .dd .panel-w{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}
.db-site .dd .grp{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px}
.db-site .dd .grp p{font:500 13px/20px var(--f-body);color:var(--grey);margin-bottom:10px}
.db-site .dd .grp a,.db-site .dd .list a{display:block;font:400 16px/24px var(--f-body);color:var(--ink);padding:6px 0;border-top:1px solid var(--line)}
.db-site .dd .acc{background:var(--ultra);color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:200px}
.db-site .dd .acc .cnt{font:400 12px/18px var(--f-data);color:#B9C4FF}
.db-site .dd .acc b{font:400 26px/32px var(--f-display);letter-spacing:-0.012em;color:#fff}
.db-site .dd .list{max-width:360px}
.db-site .snav .item{position:static}
.db-site .snav .item:has(.dd.sm){position:relative}
.db-site .dd.sm{left:-6px;right:auto;top:calc(100% - 4px);min-width:240px;border:1px solid var(--line)}
.db-site .dd.sm .in{padding:12px 20px 16px}
.db-site .dd.sm .list a:first-child{border-top:0}
.db-site .dd .desc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;align-content:start}
.db-site .dd .desc a{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid var(--line)}
.db-site .dd .desc b{font:500 16px/24px var(--f-body);color:var(--ink)}
.db-site .dd .desc span{font:400 14px/21px var(--f-body);color:var(--body)}
.db-site .dd .list a.all{font-weight:500}
.db-site .snav .burger{display:none;background:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font:500 13px var(--f-body);color:var(--ink);cursor:pointer}
@media (max-width:1100px){
  .db-site .snav{flex-wrap:wrap;height:auto;padding-block:14px;row-gap:4px;gap:16px}
  .db-site .snav .burger{display:inline-flex}
  .db-site .snav .items{order:5;flex:1 1 100%;flex-direction:column;align-items:stretch;gap:0;display:none}
  .db-site .snav.mopen .items{display:flex}
  .db-site .snav .item > button{padding:12px 0;width:100%;justify-content:space-between;border-top:1px solid var(--line);font-size:16px}
  .db-site .dd{position:static;box-shadow:none;border-bottom:0}
  .db-site .dd .in{padding:8px 0 16px}
  .db-site .dd .panel-w,.db-site .dd .grp,.db-site .dd .desc{grid-template-columns:minmax(0,1fr)}
  .db-site .dd.sm{border:0;min-width:0}.db-site .dd .desc span{display:none}
  .db-site .dd .acc{min-height:0}
}
@media (max-width:760px){.db-site .snav .acts a.t{display:none}}

.db-site .topic[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.db-site .ent[hidden]{display:none!important}
.db-site .k-closing + .k-footer,.db-site .k-closing + section.k-footer{margin-top:0}

.db-site .board section.hp:not(.tight){padding-bottom:96px}
.db-site .prod4{position:relative;display:grid;grid-template-columns:486fr 690fr;gap:24px;padding:48px 0 0 48px;overflow:hidden;align-items:start}
.db-site .prod4 .prodwin{margin-bottom:-60px}
.db-site .prod4 .prodtext{margin-bottom:48px}
@media (max-width:1100px){.db-site .prod4{grid-template-columns:minmax(0,1fr);padding:24px}.db-site .prod4 .prodwin{margin-bottom:-40px}}

.db-site .lg{display:block;width:auto;max-width:100%;object-fit:contain}
.db-site section.logos{padding-top:0;padding-bottom:0}
.db-site .lgpair{display:flex;align-items:center;flex-wrap:wrap;gap:20px 28px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.db-site .lgpair .dbm{display:flex;align-items:center;gap:10px;font:500 20px/26px var(--f-body);letter-spacing:-0.01em;color:var(--ink)}
.db-site .lgpair .dbm i{width:15px;height:15px;border-radius:50%;background:var(--ink)}
.db-site .lgpair .x{width:40px;height:1px;background:var(--ink);position:relative}
.db-site .lgpair .x::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-right:1px solid var(--ink);border-top:1px solid var(--ink);transform:rotate(45deg)}
.db-site .lgpair .vs{font:400 18px/24px var(--f-display);color:var(--grey)}
.db-site .lgpair .bar{width:1px;height:36px;background:var(--line)}
.db-site .lgwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.db-site .lgwall figure{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:120px;padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0}
.db-site .lgwall figcaption{font:400 12px/16px var(--f-body);color:var(--grey);text-align:center}
.db-site .lgrow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px 40px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.db-site .dd .lgmini{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:760px){.db-site .lgwall{grid-template-columns:repeat(2,minmax(0,1fr))}.db-site .lgrow{justify-content:flex-start;gap:20px 28px}}

.db-site img.lg.cust{filter:grayscale(1) contrast(1.2) brightness(.8)}
.db-site .names.lgs{justify-content:space-between;align-items:center;gap:18px 32px}
.db-site .names.lgs li{display:flex;align-items:center}
@media (max-width:760px){.db-site .names.lgs{justify-content:flex-start;gap:16px 28px}.db-site .names.lgs img.lg{height:24px!important;width:auto}}
.db-site figure.abs{margin:0;padding:0;background:none;border:0;box-shadow:none}
.db-site figure.abs img{display:block;width:100%;height:auto}
.db-site figure.abs.wide{max-width:1040px}
.db-site .vslot.sh-half:has(figure.abs){aspect-ratio:564/440}
.db-site .vslot.sh-wide:has(figure.abs){aspect-ratio:1200/760}
.db-site .vslot.sh-col:has(figure.abs){aspect-ratio:690/520}
.db-site .vslot figure.abs.fit{position:absolute;inset:0}
.db-site .vslot figure.abs.fit img{width:100%;height:100%;object-fit:contain}

/* The logo blues across pages: cobalt contours behind product windows on paper,
   the contour card behind figures, the Databasin column of comparison tables in ultramarine. */
.db-site figure.abs{position:relative;isolation:isolate;background:#F0EFEA;padding:40px 36px;border:1px solid #11121414;box-sizing:border-box}
.db-site figure.abs::before{content:"";position:absolute;inset:0;z-index:-1;background:url(redesign/fields/penShell-564x352-2348FF-101.svg) center/cover no-repeat;opacity:.32}
.db-site figure.abs.lgpanel::before{display:none}
/* the contour field shows on the hero screen and the product tabs only; elsewhere screens sit on plain paper so the illustration does not repeat on every screen */
.db-site figure.abs::before{display:none}
.db-site section.hero figure.abs::before,.db-site .pex figure.abs::before{display:block}
.db-site .numcard{background:#F5F4EF;border:1px solid var(--line);display:flex;flex-direction:column}
.db-site .numart{height:200px;background:url(redesign/fields/penShell-282x400-2348FF-391.svg) center/cover no-repeat}
.db-site table.tb.vs td:nth-child(2){color:var(--ultra)}
.db-site .snav .item > a.navlink{font:400 14px/22px var(--f-body);color:var(--body);padding:24px 10px;display:flex;align-items:center;text-decoration:none}
.db-site .snav .item > a.navlink:hover{color:var(--ink)}
/* Design, Build, Run as a step rail, numbered without week numbers */
.db-site .k-steps .g3{counter-reset:st;column-gap:0;border-top:1px solid #11121433;margin-top:56px}
.db-site .k-steps .g3>.inkrule{border-top:0!important;position:relative;padding:48px 32px 0 0!important;counter-increment:st}
.db-site .k-steps .g3>.inkrule::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;background:#2C2F87}
.db-site .k-steps .g3>.inkrule:last-child::before{background:#111214}
.db-site .k-steps .g3>.inkrule::after{content:counter(st,decimal-leading-zero);position:absolute;top:18px;left:0;font:400 13px/20px "DM Mono",monospace;color:#2C2F87}
/* worked examples read as one framed case, so they are clearly marked as examples */
.db-site section.ex>.wrap{border:1px solid #11121424;background:#fff;padding:0 48px 48px}
.db-site section.ex .exhead{display:flex;align-items:center;gap:12px;border-bottom:1px solid #11121424;margin:0 -48px 40px;padding:16px 48px;background:#F5F4EF}
.db-site section.ex .exhead .extag{font:500 12px/18px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#2C2F87;padding:3px 9px}
.db-site figure.abs.ba-win{margin:0 0 24px}.db-site .ba-win img{display:block;width:100%;height:auto}
.db-site section.ex .exhead .exlab{font:400 14px/21px var(--f-body);color:var(--body)}
/* one type scale (review/competitors-and-type-2026-11-03.md 2.3): one body size on marketing pages */
.db-site .t-xl{font-size:56px!important;line-height:60px!important}
.db-site main .prose p,.db-site main .prose li{font-size:15px;line-height:22px}
.db-site .ans p,.db-site details.q .ans p{font-size:15px;line-height:22px}
.db-site .ba-i{font-size:15px;line-height:22px}
.db-site main :not(.doc) .t-h3l:not(h2),.db-site details.q summary h3{font-size:22px;line-height:28px;letter-spacing:-.01em}
.db-site h2.t-title.t-h3l{font-size:38px;line-height:44px;letter-spacing:-0.018em}
.db-site .eyebrow,.db-site .crumbs{line-height:21px}
@media (max-width:760px){
  .db-site .snav .item > a.navlink{padding:12px 0;width:100%;border-top:1px solid var(--line);font-size:16px}
  .db-site figure.abs{padding:20px 16px}
  .db-site .numart{height:140px}
}
@media (max-width:760px){
  .db-site .names.lgs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;justify-items:start;align-items:center}
  .db-site .names.lgs img.lg{height:26px!important;width:auto;max-width:100%}
  .db-site .card.stack{min-height:0!important;gap:16px!important}
  .db-site table.tb{min-width:0!important}
  .db-site table.tb thead,.db-site .gtab thead{display:none}
  .db-site table.tb,.db-site table.tb tbody,.db-site table.tb tr,.db-site table.tb td,.db-site .gtab table,.db-site .gtab tbody,.db-site .gtab tr,.db-site .gtab td{display:block;width:100%}
  .db-site table.tb tr,.db-site .gtab tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .db-site table.tb td,.db-site .gtab td{border:0;padding:4px 0}
  .db-site table.tb td:first-child,.db-site .gtab td:first-child{font-weight:500;color:var(--ink);font-size:17px;padding-bottom:8px}
  .db-site table.tb td:not(:first-child)::before,.db-site .gtab td:not(:first-child)::before{content:attr(data-label);display:block;font:400 13px/20px var(--f-body);color:#56585D}
  .db-site .rail a{display:block;padding:10px 0;border-top:1px solid var(--line)}
  .db-site .ba-col{padding:20px}
  .db-site .tabs.sel .tab-i{padding:14px 0}
}
.db-site .ba-tag{font-size:12px!important}
.db-site .qt{margin:0;background:#F5F4EF;border:1px solid #11121424;padding:64px 72px}
.db-site .qt blockquote{margin:0;max-width:900px;font:400 44px/54px "Newsreader",Georgia,serif;letter-spacing:-0.01em;color:var(--ink)}
.db-site .qt .qo{margin-left:-0.42em}
.db-site .qt figcaption{margin-top:28px;font:400 14px/22px var(--f-body);color:#56585D}
@media (max-width:760px){.db-site .qt{padding:32px 24px}.db-site .qt blockquote{font-size:30px;line-height:38px}.db-site .qt .qo{margin-left:0}}
.db-site .eyebrow{display:block;font:400 14px/22px var(--f-body);color:#56585D;margin:0 0 12px}
.db-site .brand{display:flex;align-items:center;gap:8px}
.db-site .brand .mark{width:30px;height:30px;display:block}
.db-site .brand .word{font:500 21px/26px var(--f-display);letter-spacing:-0.02em;color:var(--ink)}
.db-site .lgpair .dbm .mark{width:30px;height:30px}
.db-site .gans{font:400 22px/32px var(--f-body);color:var(--ink);padding-bottom:32px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.db-site .gans p{font:inherit;color:inherit}
.db-site .gtab{overflow-x:auto;margin:20px 0}
.db-site .gtab table{border-collapse:collapse;width:100%;font:400 14px/21px var(--f-body)}
.db-site .gtab th{text-align:left;font-weight:500;color:var(--ink);border-bottom:1px solid var(--ink);padding:10px 12px 10px 0;vertical-align:bottom}
.db-site .gtab td{border-bottom:1px solid var(--line);padding:10px 12px 10px 0;vertical-align:top;color:var(--body)}
.db-site .srch{font:500 12px/18px var(--f-mono, "DM Mono", monospace);letter-spacing:.04em;text-transform:uppercase;color:#8B8D92;margin:48px 0 6px;padding-top:16px;border-top:1px solid #11121424}
.db-site .doc .srcs p{font-size:13px;line-height:20px;color:#8B8D92}
.db-site .gex{background:var(--paper);padding:24px 28px;margin-top:12px}
.db-site .gchk{list-style:none;counter-reset:c;margin:16px 0 0;padding:0}
.db-site .gchk li{counter-increment:c;display:grid;grid-template-columns:36px 1fr;column-gap:8px;padding:14px 0;border-top:1px solid var(--line)}
.db-site .gchk li::before{content:counter(c,decimal-leading-zero);font:400 13px/24px var(--f-data);color:var(--cobalt);grid-row:span 2}
.db-site .gchk b{font:500 17px/24px var(--f-body);color:var(--ink)}
.db-site .gchk span{font:400 15px/22px var(--f-body);color:var(--body)}
.db-site .ba{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.db-site .ba-col{background:var(--paper);padding:28px}
.db-site .ba-col.on{background:var(--sky)}
.db-site .ba-h{font:500 13px/20px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:16px}
.db-site .ba-col.on .ba-h{color:var(--ultra)}
.db-site .ba ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.db-site .ba-i{display:grid;grid-template-columns:28px 1fr;gap:8px;font:400 16px/24px var(--f-body);color:var(--ink)}
.db-site .ba-n{font:400 13px/24px var(--f-data);color:var(--grey)}
.db-site .ba-tag{display:inline-block;font:500 11px/18px var(--f-body);padding:1px 8px;border-radius:999px;margin-right:8px;vertical-align:1px}
.db-site .ba-tag.sw{background:var(--ultra);color:#fff}
.db-site .ba-tag.tm{background:#fff;color:var(--ultra);box-shadow:inset 0 0 0 1px var(--ultra)}  /* the new blues, not the old site's green */
.db-site .tabs.sel{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;align-items:start}
.db-site .tabs.sel .tablist{display:flex;flex-direction:column}
.db-site .tabs.sel .tab-i{display:flex;gap:16px;align-items:baseline;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:16px 0;cursor:pointer;color:var(--body)}
.db-site .tabs.sel .tab-i[aria-selected="true"]{color:var(--ink)}
.db-site .tabs.sel .tab-i[aria-selected="true"] .t-h3{color:var(--ultra)}
.db-site .tabs.sel .tab-f{display:none}.db-site .tabs.sel .tab-f.on{display:block}
@media (max-width:900px){.db-site .ba,.db-site .tabs.sel{grid-template-columns:minmax(0,1fr)}}

.db-site .tabs.pex{display:grid;grid-template-columns:384px 1fr;gap:126px}
.db-site .tabs.pex .tab-i[aria-selected="true"]{background:#DCE5F5;box-shadow:inset 3px 0 0 #2C2F87;padding-left:14px}
.db-site .tabs.pex .tab-i{padding-left:14px}
.db-site .bento{display:grid;grid-template-columns:1.25fr 1fr 1.25fr;gap:24px}
.db-site .bento .bc{border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:20px;margin:0}
.db-site .bento .wash{background:#fff;justify-content:space-between}
.db-site .bento .wash .lg{align-self:flex-start;margin:0}
.db-site .bento .wash .facts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.db-site .bento .wash .facts li{font:400 22px/28px "Host Grotesk",sans-serif;color:var(--ink);border-top:1px solid var(--line);padding-top:14px}
.db-site .bento .qc{background:#F5F4EF;justify-content:space-between}
.db-site .bento .qc blockquote{font:400 30px/38px "Newsreader",serif;color:var(--ink);margin:0}
.db-site .bento .qc figcaption{font:400 14px/21px var(--f-body);color:var(--body);border-top:1px solid var(--line);padding-top:12px}
.db-site .stiles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #11121433}
.db-site .stile{padding:24px 24px 0 0;display:flex;flex-direction:column;gap:10px}
.db-site .stile .t-mono{color:#2C2F87}
.db-site .whn{display:grid;grid-template-columns:384px 1fr;gap:126px;align-items:start}
.db-site .whw{border:1px solid var(--line);background:#F5F4EF}
.db-site .whw .whh{font:400 13px/20px "DM Mono",monospace;color:var(--body);padding:16px 28px;border-bottom:1px solid var(--line);margin:0}
.db-site .whw ol{list-style:none;margin:0;padding:28px;display:flex;flex-direction:column;gap:28px}
.db-site .whw li{display:grid;grid-template-columns:32px 1fr;gap:24px}
.db-site .whw .wn{width:32px;height:32px;background:#2C2F87;color:#fff;font:400 13px/32px "DM Mono",monospace;text-align:center}
.db-site .whw li:last-child .wn{background:#111214}
@media (max-width:760px){
  .db-site .tabs.pex,.db-site .whn{grid-template-columns:1fr;gap:32px}
  .db-site .bento{grid-template-columns:1fr}
  .db-site .stiles{grid-template-columns:1fr 1fr}
  .db-site .bento .qc blockquote{font-size:24px;line-height:30px}
}

.db-site .hfx{display:grid;grid-template-columns:1fr 400px;gap:96px;align-items:stretch}
.db-site .row-end.cfx{display:grid;grid-template-columns:1fr auto 280px;gap:48px;align-items:center}.db-site .cfield{min-height:160px}
@media (max-width:900px){.db-site .row-end.cfx{grid-template-columns:1fr}.db-site .cfield{display:none}}
.db-site section.logos + section.k-facts{border-top:1px solid #11121414}
.db-site .person{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;align-items:start}.db-site .pphoto{width:160px;height:160px;object-fit:cover;display:block}
@media (max-width:600px){.db-site .person{grid-template-columns:96px minmax(0,1fr)}.db-site .pphoto{width:96px;height:96px}}
/* frames give screens their full width: the wide padding only where the contour field shows (hero, product tabs) */
.db-site section.hp:not(.hero) figure.abs:not(.pex figure.abs){padding:0}
.db-site .hero .panel.sky figure.abs{padding:16px}
/* where the field frame stays (hero, product tabs), the screen side gets 7 of 12 columns so its text stays readable */
.db-site .hero .split.even:has(> :last-child figure.abs),.db-site .pex .split.even:has(> :last-child figure.abs){grid-template-columns:5fr 7fr}
.db-site .hero .split.even:has(> :first-child figure.abs),.db-site .pex .split.even:has(> :first-child figure.abs){grid-template-columns:7fr 5fr}
@media (max-width:900px){.db-site .hero .split.even,.db-site .pex .split.even{grid-template-columns:1fr}}
.db-site .bookx{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}  /* full width: Calendly lays out side by side above ~1000px and fits its height */.db-site #book{scroll-margin-top:96px}
@media (max-width:900px){.db-site .bookx{grid-template-columns:1fr}}
.db-site .whw li{grid-template-columns:10px 1fr;gap:18px}.db-site .whw .wn{width:10px;height:10px;margin-top:9px}
.db-site .ba-i{grid-template-columns:minmax(0,1fr)}
.db-site .ifield{min-height:150px}
.db-site .hfield{margin:0;min-height:300px;background:#F0EFEA url(redesign/fields/penShell-282x400-2348FF-391.svg) center/cover no-repeat;border:1px solid #11121414}
@media (max-width:900px){.db-site .hfx{grid-template-columns:1fr;gap:40px}.db-site .hfield{min-height:180px}}
.db-site .abento{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}
.db-site .ab-c{background:#F5F4EF;border:1px solid #11121414;display:flex;flex-direction:column;overflow:hidden}
.db-site .abento{grid-template-columns:1fr 1fr}
.db-site .ab-c.big{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.5fr;align-items:end}
.db-site .ab-c.big .ab-t{align-self:start;padding:40px}
.db-site .ab-c.big .ab-s{padding:40px 0 0}
.db-site .ab-t{padding:32px 32px 20px;display:flex;flex-direction:column;gap:10px}
.db-site .ab-t .t-mono{color:#2C2F87}
.db-site .ab-s{margin-top:auto;padding:0 0 0 32px}
.db-site .ab-s figure{margin:0}.db-site .ab-s img{display:block;width:100%;height:auto}
.db-site .tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #11121424}
.db-site .tg-c{padding:28px 24px 28px 0;display:flex;flex-direction:column;gap:10px;border-right:1px solid #11121414;margin-right:24px}
.db-site .tg-c:last-child{border-right:0;margin-right:0}
.db-site .tg-c .t-mono{color:#2C2F87}
.db-site .chips{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-wrap:wrap;gap:6px;padding-top:8px}
.db-site .chips li{font:400 12px/18px "DM Mono",monospace;color:#2C2F87;background:#E6EBFF;padding:3px 8px}
.db-site .ewin{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
.db-site .ewin figure{margin:0}.db-site .ewin img{display:block;width:100%;height:auto}
@media (max-width:900px){.db-site .abento,.db-site .ewin{grid-template-columns:1fr}.db-site .ab-c.big{grid-column:auto;display:flex}.db-site .ab-c.big .ab-t{padding:32px 32px 20px}.db-site .ab-c.big .ab-s{padding:0 0 0 32px}
 .db-site .tgrid{grid-template-columns:1fr 1fr}.db-site .tg-c{border-right:0;margin-right:0;border-bottom:1px solid #11121414;padding-right:16px}}
@media (max-width:560px){.db-site .tgrid{grid-template-columns:1fr}}

/* Phones and tablets: columns stack and everything tappable has room (tin-brand-kit mobile-check) */
@media (max-width:900px){
  /* the hero's :has() column rules outrank the plain stacking rule above */
  .db-site .hero .split.even:has(> :last-child figure.abs),.db-site .pex .split.even:has(> :last-child figure.abs),
  .db-site .hero .split.even:has(> :first-child figure.abs),.db-site .pex .split.even:has(> :first-child figure.abs){grid-template-columns:minmax(0,1fr)}
  .db-site .tabs.pex,.db-site .whn{grid-template-columns:minmax(0,1fr);gap:32px}
  .db-site .hero.splitground .wrap{grid-template-columns:minmax(0,1fr)}
  .db-site .g3{grid-template-columns:minmax(0,1fr)}
  .db-site .tlink{display:inline-flex;align-items:center;min-height:36px;white-space:normal}
  .db-site a.t-h3{display:inline-flex;align-items:center;min-height:36px}
  .db-site .crumbs a{display:inline-flex;align-items:center;min-height:36px}
  .db-site .rail{gap:0}
  .db-site .rail a{display:flex;align-items:center;min-height:36px}
  .db-site .t-small,.db-site .t-meta,.db-site .ft .about p{font-size:15px;line-height:22px}
  .db-site .srcs p,.db-site .srcs a,.db-site .doc .srcs p{font-size:15px;line-height:22px}
  .db-site .chip{font-size:15px}
  .db-site .gtab table{font-size:15px;line-height:22px}
  .db-site .gtab thead{display:none}
  .db-site .gtab table,.db-site .gtab tbody,.db-site .gtab tr,.db-site .gtab td{display:block;width:100%}
  .db-site .gtab tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .db-site .gtab td{border:0;padding:4px 0}
  .db-site .gtab td:first-child{font-weight:500;color:var(--ink);font-size:17px;padding-bottom:8px}
  .db-site .gtab td:not(:first-child)::before{content:attr(data-label);display:block;font:400 13px/20px var(--f-body);color:#56585D}
}
@media (max-width:1100px){
  .db-site header.snav-wrap{padding-inline:var(--gutter)}
  .db-site .snav .brand{min-height:44px}
  .db-site .snav .burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .db-site .snav .acts .pill.sm{height:44px}
  .db-site .ft .brand{min-height:44px}
  .db-site .ft .col{gap:0}
  .db-site .ft .col h4{margin-bottom:6px}
  .db-site .ft .col a{display:flex;align-items:center;min-height:36px;padding-block:4px}
  .db-site .ft .legal{gap:0 24px}
  .db-site .ft .legal a{display:inline-flex;align-items:center;min-height:36px}
}
/* Docs and Sign in stay hidden on phones (the rule at 760px above); on tablets they get a full-height target */
@media (min-width:761px) and (max-width:1100px){.db-site .snav .acts a.t{display:inline-flex;align-items:center;min-height:44px}}
/* the narrowest phones: logo, button and menu fit inside the 16px gutters */
@media (max-width:400px){.db-site .snav{gap:8px}.db-site .snav .acts{gap:8px}.db-site .snav .burger{padding-inline:10px}}