/* The site's layout and buttons, shared by every page in public/explore/ and
   ported from src/assets/styles/global.scss, so a static explore page sits on
   the same measure and draws the same pill as a Mantine Button on
   surrealdb.com. The buttons:

   - `.btn`            the secondary pill: a 2px quiet-grey outline, white ink.
   - `.btn.primary`    the filled pill: the page's accent, white ink.
   - `.btn.on-brand`   the solid white pill on a purple band, purple ink.
   - `.btn.lg`         the hero and closing-band size (48px, 16px type).

   Labels are weight 400 throughout: the pages load Geist at 400 and 500 only,
   so the site's 450 would round up to 500 and read as bold.

   THE HOVER ARROW: no arrow at rest. On hover or keyboard focus an arrow grows
   out of the label and the pill widens for it, the site's hover signal for
   every filled and ghost button. It is drawn by the button's `::after`, masking
   the site's straight ArrowIcon path, so the markup carries no arrow glyph.
   `data-no-hover-arrow` opts a control out (Back, Reset), as on the site.

   Palette tokens come from the host page: `--accent` for the fill. */

/* ALWAYS DARK, as the site is (its theme is forced dark globally): every
   `light-dark()` pair on the explore pages resolves to its dark value whatever
   the visitor's system setting, and the pages carry `data-theme="dark"` for
   the one page that switches on that attribute. */
:root, :root[data-theme] { color-scheme: dark; }

/* TEXT RENDERING, as the site's: Mantine sets antialiased smoothing on the
   body, which draws Geist at its true weight on macOS. Without it the browser's
   subpixel rendering makes every 400 read as bold. */
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* THE BAND MEASURE, as on surrealdb.com (`SITE_MEASURE` in
   src/lib/design-tokens.ts and `--site-gutter` in global.scss): 85% of the
   window, 7.5% either side, capped at 1458px; 24px either side on a phone.
   Loaded after each page's own <style>, so it replaces the page's `.wrap`. */
:root { --site-gutter: 7.5%; }
@media (max-width: 47.99em) { :root { --site-gutter: 24px; } }
.wrap {
  width: calc(100% - 2 * var(--site-gutter));
  max-width: 1458px;
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 22px; box-sizing: border-box;
  border: 0; border-radius: 999px;
  /* An outline (5 Nov 2026, asked for): a 2px quiet-grey rule and white ink,
     no tinted fill, which mixed into a grey the site never uses. */
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--text-muted, #8986a2);
  color: var(--text-primary, var(--text, #ffffff));
  font: 400 14px/1 var(--font-sans, var(--sans, "Geist", system-ui, sans-serif));
  letter-spacing: normal; text-transform: none;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition:
    transform 0.12s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.15s ease,
    color 0.15s ease;
}
.btn:hover:not(:disabled), .btn:focus-visible { background: transparent; }
.btn:active:not(:disabled) { transform: none; }
.btn:disabled { opacity: .45; cursor: default; }

.btn.primary,
.btn.primary:hover:not(:disabled),
.btn.primary:focus-visible {
  background: var(--button-fill, var(--accent, #d255fe)); color: #ffffff; box-shadow: none;
}

.band .btn { color: #ffffff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .62); }

.btn.on-brand,
.btn.on-brand:hover:not(:disabled),
.btn.on-brand:focus-visible {
  background: #ffffff; color: var(--purple, #651ddd); box-shadow: none;
}

.btn.lg { height: 48px; padding: 0 24px; font-size: 16px; }

.btn:not([data-no-hover-arrow])::after {
  content: "";
  display: inline-block; flex: none;
  width: 1.325em; max-width: 0; height: 1.325em;
  margin-left: 0; margin-right: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M2.75%2010H16.75m-6.25-5.75L16.75%2010l-6.25%205.75'%20stroke='%23000'%20stroke-width='1.25'%20stroke-linecap='square'%20stroke-linejoin='miter'/%3E%3C/svg%3E") no-repeat left center;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M2.75%2010H16.75m-6.25-5.75L16.75%2010l-6.25%205.75'%20stroke='%23000'%20stroke-width='1.25'%20stroke-linecap='square'%20stroke-linejoin='miter'/%3E%3C/svg%3E") no-repeat left center;
  -webkit-mask-size: 1.325em 1.325em;
  mask-size: 1.325em 1.325em;
  opacity: 0;
  transition:
    max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    margin-left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    margin-right 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}
.btn:not([data-no-hover-arrow]):not(:disabled):hover::after,
.btn:not([data-no-hover-arrow]):focus-visible::after {
  max-width: 1.325em; margin-left: 12px; margin-right: -6px; opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { transition: none; }
}

/* THE HERO, one layout for every explore page: the same padding, eyebrow,
   headline, lede and spacing, so each page opens at the same place. The
   headline tops out at 72px, the size of the /pricing headline, a step under
   the homepage's 88px display (asked for, 5 Nov 2026); the second
   clause of a two-tone headline (`.recede`) takes the page's product colour
   (Lilac on a database page, Violet on an Agent Memory page). The headline
   and the lede share one width (`--hero-copy-w`), so their right edges line up. */
body .hero.hero { padding: 96px 0; display: block; --hero-copy-w: 1120px; }
.hero .hero-eyebrow {
  display: block; margin: 0 0 24px;
  font: 400 13px/1.5 var(--font-mono, var(--mono, "JetBrains Mono", ui-monospace, monospace));
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary, var(--text2));
}
.hero .hero-title {
  margin: 0; max-width: var(--hero-copy-w);
  font-size: clamp(36px, 5vw, 72px); font-weight: 400;
  line-height: 1.02; letter-spacing: -0.035em; text-wrap: wrap;
}
/* The coloured clause always starts its own line. */
.hero .hero-title .recede, .hero .hero-title .rest { display: block; color: var(--large-accent, var(--accent-text, var(--accent))); }
.hero .hero-lede {
  margin: 32px 0 0; padding: 0; border: 0; max-width: var(--hero-copy-w);
  font-size: 22px; font-weight: 300; line-height: 1.5; color: var(--text-secondary, var(--text2));
}
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
/* Whatever the hero carries after its copy (a thesis, stats, a graph). */
.hero .hero-after { margin-top: 48px; }
@media (max-width: 47.99em) {
  body .hero.hero { padding: 64px 0; }
  .hero .hero-lede { margin-top: 20px; font-size: 18px; }
  .hero .hero-after { margin-top: 32px; }
}

/* THE LOGO BAR, as the homepage's navigation row draws it: the site's logo
   (src/assets/img/logo.svg, copied beside this sheet) at 138px wide, on the
   left edge of the measure, centred in a 66px row. */
.site-bar { background: var(--bg-canvas, var(--bg)); }
.site-bar .wrap { display: flex; align-items: center; height: 66px; }
.site-bar a { display: block; line-height: 0; }
.site-bar img { display: block; width: 138px; height: auto; }

/* RULED COLUMNS (5 Nov 2026, asked for): the columns share the full width
   evenly, a 1px rule sits between columns and never before the first one in
   a row, 28px of rule above the content, 24px either side of each rule, and
   the first and last columns flush with the page edges. Used by the figure
   rows (`.stat-row`), the company brain's columns and the sources ledger. */
.stat-row, .brief .cols, .closing .cols, .ledger {
  --cols: 4;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 32px 0;
  padding: 0; border: 0; background: none; list-style: none;
}
.stat-row:has(> :nth-child(5)) { --cols: 5; }
.stat-row:not(:has(> :nth-child(4))) { --cols: 3; }
.stat-row > *, .brief .cols > *, .closing .cols > *, .ledger > li {
  min-width: 0; margin: 0; padding: 28px 24px 0; background: none;
  border: 0; border-left: 1px solid rgba(112, 109, 143, .3);
}
/* No rule before the first column of a row, and the outer columns flush. */
.stat-row:not(:has(> :nth-child(5))):not(:has(> :nth-child(4)) ) > :nth-child(3n+1),
.stat-row:has(> :nth-child(4)):not(:has(> :nth-child(5))) > :nth-child(4n+1),
.stat-row:has(> :nth-child(5)) > :nth-child(5n+1),
:is(.brief .cols, .closing .cols, .ledger) > :nth-child(4n+1) { padding-left: 0; border-left: 0; }
.stat-row:not(:has(> :nth-child(4))) > :nth-child(3n),
.stat-row:has(> :nth-child(4)):not(:has(> :nth-child(5))) > :nth-child(4n),
.stat-row:has(> :nth-child(5)) > :nth-child(5n),
:is(.brief .cols, .closing .cols, .ledger) > :nth-child(4n) { padding-right: 0; }
@media (max-width: 1023px) {
  .stat-row, .stat-row:has(> :nth-child(5)), .stat-row:not(:has(> :nth-child(4))),
  .brief .cols, .closing .cols, .ledger { --cols: 2; }
  .stat-row > *, .brief .cols > *, .closing .cols > *, .ledger > li { padding-left: 24px; padding-right: 24px; border-left: 1px solid rgba(112, 109, 143, .3); }
  :is(.stat-row, .brief .cols, .closing .cols, .ledger) > :nth-child(2n+1) { padding-left: 0; border-left: 0; }
  :is(.stat-row, .brief .cols, .closing .cols, .ledger) > :nth-child(2n) { padding-right: 0; }
}
@media (max-width: 575px) {
  .stat-row, .stat-row:has(> :nth-child(5)), .stat-row:not(:has(> :nth-child(4))),
  .brief .cols, .closing .cols, .ledger { --cols: 1; }
  :is(.stat-row, .brief .cols, .closing .cols, .ledger) > * { padding: 0; border-left: 0; }
}
/* The titles and bodies, at the live sizes. */
.brief .cols h3, .closing .cols h3, .ledger .n {
  margin: 0; font-size: clamp(22px, 1.9vw, 28px); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em;
  color: var(--text-primary, var(--text));
}
.brief .cols p, .closing .cols p, .ledger .v, .stat-row.prose > * > span {
  margin: 12px 0 0; font-size: 17px; font-weight: 400; line-height: 1.55; letter-spacing: -0.01em;
  color: var(--text-secondary, var(--text2)); text-transform: none;
  font-family: var(--font-sans, var(--sans, "Geist", system-ui, sans-serif));
}
.stat-row > * > b {
  display: block; margin: 0;
  font: 300 clamp(48px, 6vw, 88px)/1 var(--font-sans, var(--sans, "Geist", system-ui, sans-serif));
  letter-spacing: -0.04em; font-variant-numeric: normal; font-feature-settings: normal;
  color: var(--text-primary, var(--text));
}
.stat-row > * > span {
  display: block; margin-top: 16px;
  font: 300 13px/1.5 var(--font-mono, var(--mono, "JetBrains Mono", ui-monospace, monospace));
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--text-secondary, var(--text2));
}

/* THE LEDE UNDER A SECTION HEADING, one style on every page, as the hero's
   (5 Nov 2026, asked for): 22px light quiet grey at 1.5, up to the hero's
   copy width. It reaches the paragraph after a section's h2 in each page's
   own markup: `.sec-head`, the credit page's `.head`, the company brain's
   bare `h2 + p.lede`, and the purple closing bands (which keep their own
   white ink). */
:is(.sec-head, .head) > h2 ~ p,
section .wrap > h2 + p.lede,
.band h2 + p {
  max-width: 1120px; margin-top: 20px;
  font-size: 22px; font-weight: 300; line-height: 1.5;
}
:is(.sec-head, .head) > h2 ~ p,
section .wrap > h2 + p.lede { color: var(--text-secondary, var(--text2)); }
@media (max-width: 47.99em) {
  :is(.sec-head, .head) > h2 ~ p,
  section .wrap > h2 + p.lede,
  .band h2 + p { font-size: 18px; }
}

/* TWO-TONE SECTION HEADINGS: the secondary clause always starts its own line
   under the white one, as the hero's does (5 Nov 2026, asked for). */
h2 .recede, h2 .rest { display: block; }

/* CONTENT TILES, as the site's compare tiles and the Explore more cards
   (5 Nov 2026, asked for): square from tablet up, 16px in, on the card
   ground, the title at the Title step top left, the body in 16px quiet grey
   at the foot, and an index number in mono where a link tile's arrow sits. */
.tile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; padding: 0; border: 0; background: none;
}
.tile-grid > .tile {
  position: relative; min-width: 0; margin: 0; border: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr); row-gap: 20px;
  padding: 16px; background: var(--card-ground, var(--bg-surface, #242132));
}
@media (min-width: 768px) { .tile-grid > .tile { aspect-ratio: 1 / 1; } }
.tile-grid > .tile h3 {
  margin: 0; padding-right: 40px;
  font-size: clamp(22px, 1.9vw, 28px); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em;
  color: var(--text-primary, var(--text));
}
.tile-grid > .tile p {
  align-self: end; margin: 0;
  font-size: 16px; font-weight: 400; line-height: 1.45; letter-spacing: -0.01em;
  color: var(--text-secondary, var(--text2));
}
.tile-grid > .tile .k {
  position: absolute; top: 16px; right: 16px; margin: 0;
  font: 300 13px/1.5 var(--font-mono, var(--mono, monospace)); letter-spacing: .02em;
  color: var(--text-muted, var(--text3));
}

/* LINES. The site draws every line on a dark page in solid Obsidian (#242131,
   `--surreal-border-default`), never a white wash. A rule inside an Obsidian
   card would vanish, so inside the cards the same lines step up to #383546. */
:is(.rings-key, .rings-fig, .demo-side, .demo-main, .controls, .results, .panel,
    .inspector, .uc-detail, .tile, .kind-body, .lane, .stage, .code, .graphbox) {
  --border: #383546; --line: #383546; --border-subtle: #383546; --border-default: #383546;
}

.hero .stat-row { margin-top: 48px; }
.hero .stat-row + .hero-actions { margin-top: 48px; }

/* THREE ACROSS: not square (5 Nov 2026, asked for). A tile in a row of three
   is as tall as one in a row of four - the four-across square, 296px at
   1440 - so a three-up row does not stand taller than its neighbours. */
@media (min-width: 768px) {
  .tile-grid:not(:has(> :nth-child(4))) > .tile,
  .explore-more ul:not(:has(> :nth-child(4))) a {
    aspect-ratio: auto; min-height: clamp(220px, 20.55vw, 296px);
  }
}

/* The ruled rows sit 72px under their heading, as the live rows do (the
   live grid's 71.8px top margin at 1440), and each column is a stack whose
   last line - a source, a "Shown in" note, a link - drops to the column's
   foot, so those lines align across a row as the live "Explore ..." links do. */
.brief .cols, .closing .cols { margin-top: clamp(40px, 5vw, 72px); margin-bottom: 0; }
.brief .cols > *, .closing .cols > *, .stat-row > *, .ledger > li { display: flex; flex-direction: column; }
.brief .cols > * > .scene { margin-top: auto; padding-top: 20px; }
.stat-row { margin-top: clamp(40px, 5vw, 72px); margin-bottom: 40px; }

/* Lists inside a ruled column read as its body: 17px quiet grey, 12px under
   the title, 8px between items. A ruled row of three splits the width three
   ways, its rules again only between columns. */
.brief .cols ul, .brief .cols ol, .closing .cols ul, .closing .cols ol {
  margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px;
}
.brief .cols li, .closing .cols li {
  margin: 0; font-size: 17px; font-weight: 400; line-height: 1.55; letter-spacing: -0.01em;
  color: var(--text-secondary, var(--text2));
}
@media (min-width: 1024px) {
  :is(.brief .cols, .closing .cols):not(:has(> :nth-child(4))) { --cols: 3; }
  :is(.brief .cols, .closing .cols):not(:has(> :nth-child(4))) > * { padding-left: 24px; padding-right: 24px; border-left: 1px solid rgba(112, 109, 143, .3); }
  :is(.brief .cols, .closing .cols):not(:has(> :nth-child(4))) > :nth-child(3n+1) { padding-left: 0; border-left: 0; }
  :is(.brief .cols, .closing .cols):not(:has(> :nth-child(4))) > :nth-child(3n) { padding-right: 0; }
}

/* Tiles run four across (a row of three stays three), two on a tablet, one
   on a phone (5 Nov 2026, asked for). */
.tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile-grid:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .tile-grid, .tile-grid:not(:has(> :nth-child(4))) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .tile-grid, .tile-grid:not(:has(> :nth-child(4))) { grid-template-columns: minmax(0, 1fr); } }

/* THE CLOSING CTA BAND, as the site's (`CTA`, measured on /agent-memory and
   /studio, 5 Nov 2026): a solid product ground with no decoration and no
   eyebrow, 120px above, the heading at the Section step, then the buttons.
   Agent Memory pages: Purple, white type, a white primary and a white-outlined
   secondary. Database pages set the `--band-*` tokens for Lilac with dark ink
   and a dark primary. */
section.band {
  background: var(--band-ground, var(--purple, #651ddd)); color: var(--band-ink, #ffffff);
  position: relative; overflow: hidden; isolation: isolate;
  padding: 120px 0 200px; border: 0;
}
section.band > .wrap { position: relative; z-index: 2; }
section.band h2 {
  max-width: 900px; margin: 0;
  font-size: clamp(26px, 3.75vw, 48px); font-weight: 400; line-height: 1.13; letter-spacing: -0.04em;
  color: var(--band-ink, #ffffff);
}
section.band h2 .recede { color: var(--band-quiet, rgba(255, 255, 255, .72)); }
section.band h2 + p {
  margin-top: 20px; max-width: 1120px; font-size: 22px; font-weight: 300; line-height: 1.5;
  color: var(--band-quiet, rgba(255, 255, 255, .72));
}
section.band .btn { margin-top: 40px; }
section.band .btn.on-brand,
section.band .btn.on-brand:hover:not(:disabled),
section.band .btn.on-brand:focus-visible {
  background: var(--band-btn-bg, #ffffff); color: var(--band-btn-ink, var(--purple, #651ddd)); box-shadow: none;
}
section.band .btn:not(.on-brand) { color: var(--band-ink, #ffffff); box-shadow: inset 0 0 0 2px var(--band-ink, #ffffff); }
@media (max-width: 47.99em) { section.band { padding: 48px 0; } }

/* FORM FIELDS, as the site's contact form in dark (5 Nov 2026, asked for):
   no border, no radius, the page ground inside a card, a 2px accent ring on
   focus, and the select drawn with its own chevron. */
.explore-field, input[type="number"], input[type="text"], select {
  -webkit-appearance: none; appearance: none;
  height: 44px; padding: 0 14px; border: 0; border-radius: 0; box-shadow: none;
  background-color: var(--section-ground, #191723); color: var(--text-primary, #ffffff);
  font: 300 15px/1 var(--font-sans, var(--sans, "Geist", system-ui, sans-serif));
}
input[type="number"] { font-family: var(--font-mono, var(--mono, monospace)); font-size: 14px; text-align: right; }
select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M4%206l4%204%204-4'%20stroke='%23ffffff'%20stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
}
:is(input[type="number"], input[type="text"], select):focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--accent, #d255fe); }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { opacity: .5; }

/* THE BREATHING FIELD on the closing bands (explore-field.js), as the site's
   `BreathingField`: white blocks over the band's ground and under its copy,
   each breathing to its own ceiling; off below 75em, as on the site; a still
   scattering at half strength for a reader who asked for less motion. */
.band-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.band-field > i { position: absolute; width: var(--pitch, 96px); height: var(--pitch, 96px); background: #ffffff; opacity: 0; }
.band-field > i[data-off] { display: none; }
@media (max-width: 74.99em) { .band-field { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .band-field[data-measured] > i {
    animation: band-field-breathe var(--block-duration) ease-in-out var(--block-delay) infinite backwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .band-field[data-measured] > i[data-still] { opacity: calc(var(--block-peak) * .5); }
}
@keyframes band-field-breathe {
  0%, 8% { opacity: 0; }
  42%, 58% { opacity: var(--block-peak); }
  92%, 100% { opacity: 0; }
}

/* SCROLLBARS, as the site's (global.scss "THE SCROLLBAR", 5 Nov 2026): the
   browser's own, thin and in the page's accent (Lilac on a database page,
   Violet on an Agent Memory page), on the page and on every inner scroll area
   - a panel, a code block, a wide diagram. They replaced square thumbs drawn
   by a script the same day, which hid until an area moved and did nothing
   when their track was clicked. */
html, body * { scrollbar-width: thin; scrollbar-color: var(--accent, #d255fe) transparent; }