/* databrickscdn: the Airbrx CDN for Databricks SQL
   ==================================================================
   Brand source: airbrx/signal (CLAUDE.md "Brand rules" and /styleguide).
     - Inter for everything people read; monospace only for what a
       machine produced or a person would type.
     - #FD6C1D is the only accent. No second accent, no tint family.
     - #16181C for dark bands (header, hero, footer, inverted panels).
     - Off-white surfaces, never pure #FFFFFF.
     - No em dashes in any copy (scripts/verify.mjs enforces it).

   Every colour is a token. html.dark-mode redefines the same names, so a
   rule that reads a token flips for free; a rule with a hex in it does
   not. The accent does not flip. The header, footer and mid-page bands
   stay dark; the opening bands (hero, page heroes) follow the theme.
   ================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/databricks/fonts/inter-latin-wght.woff2') format('woff2');
}

:root {
  /* Brand constants: the same in both themes. */
  --accent: #fd6c1d;
  --band: #16181c;
  --band-raise: #1f2228;
  --band-line: #2c3038;
  --band-ink: #f4f2ef;
  --band-text: #b3b0ab;
  --band-muted: #85827d;
  --on-accent: #16181c;        /* near-black label on orange: 7:1 */

  /* Outcome colours from the styleguide. Data, never accent. */
  --hit: #10b981;
  --miss: #94a3b8;

  /* Light theme surfaces */
  --ground: #faf9f7;
  --ground-alt: #f3f1ee;
  --card: #fdfcfb;
  --ink: #1d1f23;
  --text: #4a4843;
  --muted: #6f6c66;
  --line: #e4e0da;
  --line-soft: #ece9e4;
  --shadow: rgba(22, 24, 28, .07);
  --code-bg: #16181c;
  --code-text: #e9e6e1;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  --wrap: 1160px;
  --narrow: 760px;
  --radius: 16px;
  --ease: 180ms ease;
}

html.dark-mode {
  --ground: #101114;
  --ground-alt: #15171b;
  --card: #1a1c21;
  --ink: #f2f0ec;
  --text: #bdb9b3;
  --muted: #8d8983;
  --line: #2b2e35;
  --line-soft: #23262c;
  --shadow: rgba(0, 0, 0, .35);
  --code-bg: #0b0c0e;
  --code-text: #e9e6e1;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
strong { color: var(--ink); font-weight: 650; }
code, kbd, samp {
  font-family: var(--mono);
  font-size: .88em;
  color: var(--ink);
  background: var(--ground-alt);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 1px 6px;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px;
}
.skip:focus { left: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: var(--narrow); }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

/* ----- Header: always on the dark band --------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--band);
  border-bottom: 1px solid var(--band-line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--band-ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.brand__name { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.brand__name b { color: var(--accent); font-weight: 800; }
.brand__by { font-size: 12px; font-weight: 500; color: var(--band-muted); margin-left: 2px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--band-text); font-weight: 500; font-size: 14.5px;
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
  transition: color var(--ease), background var(--ease);
}
.nav a:hover { color: var(--band-ink); background: var(--band-raise); }
.nav a[aria-current="page"] { color: var(--band-ink); }
.nav .btn { margin-left: 8px; }
.theme-btn {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--band-line);
  background: transparent; color: var(--band-text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-btn:hover { color: var(--band-ink); border-color: var(--band-muted); }
.theme-btn svg { width: 16px; height: 16px; }
.menu-btn { display: none; }

@media (max-width: 880px) {
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch;
         background: var(--band); border-bottom: 1px solid var(--band-line); padding: 12px 20px 20px; gap: 2px; }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px; font-size: 16px; }
  .nav .btn { margin: 10px 0 0; justify-content: center; }
  .menu-btn { display: inline-flex; margin-left: auto; }
  .site-header .theme-btn--bar { margin-left: 0; }
}
@media (min-width: 881px) { .theme-btn--bar { display: none; } }

/* ----- Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 650; font-size: 15px; line-height: 1;
  padding: 14px 20px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { box-shadow: 0 6px 18px rgba(253, 108, 29, .28); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--muted); }
.band .btn--ghost, .site-header .btn--ghost { color: var(--band-ink); border-color: var(--band-line); }
.band .btn--ghost:hover { border-color: var(--band-muted); }
.btn--sm { padding: 10px 14px; font-size: 14px; }
.btn .arrow { transition: transform var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ----- Dark band sections ---------------------------------------- */
.band {
  background: var(--band);
  color: var(--band-text);
  position: relative;
  overflow: hidden;
}
.band h1, .band h2, .band h3, .band strong { color: var(--band-ink); }
.band code { background: var(--band-raise); border-color: var(--band-line); color: var(--band-ink); }
/* The edge-network grid: a CDN is a map of points, not a gradient. */
.band--grid::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--band-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--band-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 0%, transparent 75%);
  opacity: .55;
}

/* ----- Hero ------------------------------------------------------ */
.hero { padding: 88px 0 96px; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
/* .eyebrow and .kicker share the hand-lettered note style: see "Eyebrows" below. */
.hero h1 {
  font-size: clamp(40px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -.035em;
  font-weight: 800; margin: 0 0 22px;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lede { font-size: 19px; line-height: 1.6; max-width: 34em; margin: 0 0 30px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero__fine { font-size: 13.5px; color: var(--band-muted); margin: 0; }
.hero__fine span + span::before { content: '·'; margin: 0 8px; }

@media (max-width: 960px) {
  .hero { padding: 56px 0 64px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
}

/* Hostname swap: the whole product in one field */
.swap {
  background: var(--band-raise); border: 1px solid var(--band-line); border-radius: var(--radius);
  padding: 22px; font-family: var(--mono); font-size: 14px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.swap__label { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--band-muted); margin: 0 0 8px; }
.swap__row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--band); border: 1px solid var(--band-line); overflow-wrap: anywhere; }
.swap__row--old { color: var(--band-muted); text-decoration: line-through; text-decoration-color: rgba(253, 108, 29, .6); }
.swap__row--new { color: var(--band-ink); border-color: var(--accent); }
.swap__row--new b { color: var(--accent); font-weight: 600; }
.swap__arrow { text-align: center; color: var(--accent); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 10px 0; }
.swap__same { margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-family: var(--sans); font-size: 13px; }
.swap__same li { list-style: none; display: flex; gap: 8px; align-items: center; color: var(--band-text); }
.swap__same li::before { content: ''; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 4px; border: 1.5px solid var(--hit);
  background: no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.2 2.2L8.5 2.6' fill='none' stroke='%2310b981' stroke-width='1.8'/%3E%3C/svg%3E"); }
.swap__same { padding: 0; }
.headers { margin-top: 16px; border-top: 1px dashed var(--band-line); padding-top: 14px; font-size: 12.5px; line-height: 1.8; color: var(--band-text); }
.headers .k { color: var(--band-muted); }
.headers .hit { color: var(--hit); font-weight: 600; }

/* ----- Generic sections ------------------------------------------ */
.section { padding: 96px 0; }
.section--alt { background: var(--ground-alt); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section--tight { padding: 64px 0; }
.section h2 {
  font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.03em;
  font-weight: 800; color: var(--ink); margin: 0 0 18px; max-width: 22em;
}
.band h2 { color: var(--band-ink); }
.section h3 { font-size: 20px; letter-spacing: -.015em; color: var(--ink); margin: 0 0 8px; line-height: 1.3; }
.section p { margin: 0 0 16px; max-width: 42em; }
.lede { font-size: 19px; color: var(--text); }
.band .lede { color: var(--band-text); }

@media (max-width: 720px) { .section { padding: 64px 0; } }

/* Numbered steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; counter-reset: step; padding: 0; }
.steps li {
  list-style: none; counter-increment: step; position: relative;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 28px 24px 24px; box-shadow: 0 1px 2px var(--shadow);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent);
  display: block; margin-bottom: 14px;
}
.steps p { font-size: 15.5px; margin: 0; }
.steps .when { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* Feature grid */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid, .grid--2 { grid-template-columns: 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: 0 1px 2px var(--shadow);
  transition: transform var(--ease), border-color var(--ease);
}
a.card { display: block; color: inherit; font-weight: 400; }
a.card:hover { text-decoration: none; transform: translateY(-3px); border-left-color: var(--accent); }
.card--rule { border-left: 4px solid var(--line-soft); }
.card--rule:hover { border-left-color: var(--accent); }
.card p { font-size: 15.5px; margin: 0; }
.card .tag { margin-bottom: 14px; }
.card .more { display: inline-flex; gap: 6px; margin-top: 14px; color: var(--accent); font-weight: 600; font-size: 14px; transition: gap var(--ease); }
a.card:hover .more { gap: 10px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 10px;
}
.band .tag { color: var(--accent); }

/* Comparison table */
.table-wrap { margin-top: 36px; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow-x: auto; background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
th, td { text-align: left; padding: 16px 20px; vertical-align: top; border-top: 1px solid var(--line-soft); }
thead th { border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--ground-alt); }
thead th.us { color: var(--accent); }
tbody th { color: var(--ink); font-weight: 650; width: 28%; }
td.us { color: var(--ink); }
.yes, .no { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.yes { color: var(--hit); }
.no { color: var(--muted); }
.table-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; max-width: 60em; }

/* Timeline figure (inline SVG reads tokens via style attributes) */
.figure { margin: 40px 0 0; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 28px; }
.figure figcaption { font-size: 13.5px; color: var(--muted); margin-top: 16px; max-width: 60em; }
.band .figure { background: var(--band-raise); border-color: var(--band-line); }
.band .figure figcaption { color: var(--band-muted); }

/* Split: text beside a panel */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* Checklist */
.checks { padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.checks li { list-style: none; display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 16px; }
.checks li::before { content: ''; width: 18px; height: 18px; margin-top: 4px; border-radius: 5px; border: 1.5px solid var(--accent);
  background: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.2 2.2L8.5 2.6' fill='none' stroke='%23fd6c1d' stroke-width='1.8'/%3E%3C/svg%3E"); }

/* Code blocks: darker than the page in both themes */
pre {
  margin: 20px 0; background: var(--code-bg); color: var(--code-text);
  border-radius: 12px; padding: 20px 22px; overflow-x: auto;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.7;
}
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
pre .c { color: #85827d; }
pre .o { color: var(--accent); }
pre .g { color: var(--hit); }

/* Callout / limits */
.note {
  border: 1px solid var(--line-soft); border-left: 4px solid var(--accent);
  background: var(--card); border-radius: 12px; padding: 18px 22px; margin: 24px 0; font-size: 15.5px;
}
.note p:last-child { margin-bottom: 0; }

/* CTA band */
.cta { padding: 88px 0; text-align: left; }
.cta .wrap { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.cta h2 { margin: 0 0 12px; }
.cta p { margin: 0; max-width: 36em; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Article / long-form pages */
.page-hero { padding: 72px 0 64px; }
.page-hero h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; margin: 0 0 18px; max-width: 18em; }
.page-hero p { font-size: 19px; max-width: 38em; margin: 0; }
.crumbs { font-size: 13px; color: var(--band-muted); margin: 0 0 18px; }
.crumbs a { color: var(--band-text); font-weight: 500; }
.prose { padding: 72px 0 32px; }
.prose .wrap { max-width: 800px; }
.prose h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); margin: 56px 0 14px; font-weight: 800; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; color: var(--ink); margin: 34px 0 10px; letter-spacing: -.01em; }
.prose p, .prose li { font-size: 17px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose .table-wrap { margin: 24px 0; }
.sources { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line-soft); margin-top: 48px; padding-top: 20px; }
.sources ol { padding-left: 18px; }
.sources li { font-size: 14px; margin-bottom: 6px; }
.toc { font-size: 14.5px; background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px 20px; margin: 0 0 40px; }
.toc b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.toc ol { margin: 0; padding-left: 18px; }
.toc li { font-size: 15px; margin: 3px 0; }

/* FAQ */
.faq { margin-top: 32px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px;
  padding: 18px 0; font-size: 18px; font-weight: 650; color: var(--ink); letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
/* Each question is a real heading for search; it keeps the summary's look. */
.faq summary h2.faq__q { margin: 0; max-width: none; font: inherit; letter-spacing: inherit; color: inherit; }
.faq summary::after { content: '+'; color: var(--accent); font-weight: 400; font-size: 24px; line-height: 1; transition: transform var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 20px; max-width: 46em; }
.faq .a p { font-size: 16.5px; }

/* ----- Footer ---------------------------------------------------- */
.site-footer { background: var(--band); color: var(--band-muted); font-size: 14px; padding: 56px 0 40px; border-top: 1px solid var(--band-line); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h4 { color: var(--band-ink); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--band-text); font-weight: 500; }
.site-footer a:hover { color: var(--band-ink); }
.site-footer .lockup { width: 120px; margin-bottom: 14px; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--band-line); padding-top: 20px; margin-top: 12px; font-size: 12.5px; line-height: 1.6; }
@media (max-width: 860px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } }

sup { line-height: 0; font-size: .7em; }
sup a { font-weight: 700; }
.nav a.btn--primary, .nav a.btn--primary:hover { color: var(--on-accent); background: var(--accent); }
.brand__by { white-space: nowrap; }
@media (max-width: 420px) { .brand__by { display: none; } }
.figure { overflow-x: auto; }
.figure > svg { min-width: 640px; }

/* ----- The opening drawing (lib/edge/hero.js) ----------------------
   Ported from Signal's PNW Day of Data deck, slide 05. Kalam is the
   stories' and decks' drawing hand: annotations inside the drawing only,
   never page copy. The canvas reads these tokens by name; they are the
   deck kit's dark-band values; html.light-mode .edge-art (below) swaps
   in a light set, and hero.js redraws when the theme changes. */
@font-face { font-family: 'Kalam'; font-weight: 400; font-display: swap; src: url('/databricks/fonts/kalam-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Kalam'; font-weight: 700; font-display: swap; src: url('/databricks/fonts/kalam-latin-700-normal.woff2') format('woff2'); }

.edge-art {
  --stage: #16181c;
  --stage-card: #1f2126;
  --stage-panel: #25272c;
  --stage-ink: #f2f2f2;
  --stage-text: #d6d6d6;
  --stage-grid: #56565c;
  --stage-line: #33353a;
  --stage-muted: #a0a0a0;
  --stage-ok: #4fbf94;
  --stage-stop: #ef5350;
  --stage-water: #3b7ea1;
  --stage-glow: rgba(253, 108, 29, 0);
  position: relative;
  margin: 40px 0 0;
  border: 1px solid var(--band-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--band);
}
.edge-art canvas { display: block; }
/* The drawing's words, as a list: what screen readers get, and what a
   phone gets, where a 1280-wide drawing would be too small to read. */
.edge-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .edge-art canvas { display: none; }
  .edge-list { position: static; width: auto; height: auto; clip: auto; white-space: normal; margin: 0; padding: 8px 18px; list-style: none; }
  .edge-list li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--band-line); font-size: 15px; color: var(--band-ink); }
  .edge-list li:last-child { border-bottom: 0; }
  .edge-list span { font-size: 13px; font-weight: 700; color: var(--stage-ok); }
  .edge-list li.raw span { color: var(--stage-stop); }
}

.hero--edge { padding: 72px 0 88px; }
.hero--edge .wrap { display: block; }
.hero--edge h1 { max-width: 15em; }
.hero__sub { font-size: 20px; line-height: 1.55; max-width: 40em; margin: 0; }
.hero__sub b { color: var(--band-ink); font-weight: 600; }
.hero__answer { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; margin-top: 64px; }
.hero__answer h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; margin: 0 0 16px; color: var(--band-ink); }
.hero__answer h2 em { font-style: normal; color: var(--accent); }
@media (max-width: 960px) { .hero__answer { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; } .hero--edge { padding: 52px 0 64px; } }

/* Home: the four outcomes */
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--4 { grid-template-columns: 1fr; } }
.outcome { border-top: 4px solid var(--line-soft); }
.outcome--hit { border-top-color: var(--hit); }
.outcome--block { border-top-color: var(--accent); }
.outcome--pass { border-top-color: var(--miss); }
.outcome--hit .tag { color: var(--hit); border-color: var(--hit); }
.outcome--pass .tag { color: var(--muted); border-color: var(--line); }
.outcome--route { border-top-color: #3b82b8; }
.outcome--route .tag { color: #3b82b8; border-color: #3b82b8; }
html.dark-mode .outcome--route { border-top-color: #5aa9d6; }
html.dark-mode .outcome--route .tag { color: #5aa9d6; border-color: #5aa9d6; }

/* Home: measured stats on the dark band */
.band h2 em { font-style: normal; color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 36px 0 0; padding: 0; }
.stats li { list-style: none; border-top: 1px solid var(--band-line); padding-top: 18px; }
.stats b { display: block; font-size: clamp(34px, 4.4vw, 48px); line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--band-ink); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.stats span { display: block; font-size: 15px; color: var(--band-text); }
.band .table-note { color: var(--band-muted); }
.stats + .table-note { margin-top: 28px; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* Home: the usual fixes */
.fixes .card p { display: block; font-weight: 400; }
.fixes .card p + p { margin-top: 10px; }
.fixes .yes { color: var(--ink); }
.fixes .yes::first-letter, .fixes .no::first-letter { font-weight: 700; }
.fixes .yes::first-letter { color: var(--hit); }
.fixes .no { color: var(--text); }
.pull { margin: 40px 0 0; padding: 0 0 0 20px; border-left: 4px solid var(--accent); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--ink); max-width: 30em; }

/* Four-step setup */
.steps--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .steps--4 { grid-template-columns: 1fr; } }
.steps code { font-size: 13px; }

/* Closing band fine print */
.cta .fine { color: var(--band-muted); white-space: nowrap; }

/* Home hero: problem, solution, benefit first; the edge story follows */
.hero__answer--top { margin-top: 0; align-items: center; }
.hero__answer--top h1 { font-size: clamp(38px, 5vw, 60px); max-width: 13em; margin-bottom: 20px; }
.hero__benefits { margin: 0 0 30px; }
.hero__benefits li { font-size: 16px; color: var(--band-text); }
.edge-band { border-top: 1px solid var(--band-line); }
.edge-band .lede { max-width: 40em; }

/* Light mode: the opening bands follow the theme, so the toggle visibly
   does something on the first screen. The header, footer and mid-page
   inverted panels stay dark. */
html.light-mode .hero,
html.light-mode .page-hero,
html.light-mode .edge-band {
  --band: var(--ground);
  --band-raise: var(--card);
  --band-line: var(--line);
  --band-ink: var(--ink);
  --band-text: var(--text);
  --band-muted: var(--muted);
}
html.light-mode .edge-band { border-top-color: var(--line-soft); }
/* The drawing in light mode: same scene on an off-white stage. hero.js
   re-reads these on themechange and redraws. */
html.light-mode .edge-art {
  --stage: #fdfcfb;
  --stage-card: #f6f4f1;
  --stage-panel: #efece8;
  --stage-ink: #1d1f23;
  --stage-text: #4a4843;
  --stage-grid: #a8a49d;
  --stage-line: #e4e0da;
  --stage-muted: #8a867f;
  --stage-ok: #1f9d6e;
  --stage-stop: #d93c3a;
  --stage-water: #3b7ea1;
  background: var(--stage);
  border-color: var(--line);
}

/* Slide-7 crowd scene: a picture, not words, so it stays on phones too. */
.edge-art--scene { margin: 36px 0 32px; }
@media (max-width: 640px) { .edge-art--scene canvas { display: block; } }

/* Eyebrows: a note in the margin, in the drawings' hand (Kalam), with a
   hand-drawn arrow curling down toward the heading. The words are plain
   text in the markup; the arrow is a CSS mask, so crawlers and screen
   readers get exactly the text. */
.eyebrow, .kicker {
  display: inline-flex; align-items: flex-end; gap: 6px;
  font-family: 'Kalam', 'Segoe Print', 'Bradley Hand', cursive;
  font-weight: 700; font-size: 22px; line-height: 1.15;
  letter-spacing: 0; text-transform: none;
  color: var(--accent);
  margin: 0 0 12px; padding-right: 2px;
  transform: rotate(-2.5deg); transform-origin: left bottom;
}
.eyebrow::after, .kicker::after {
  content: ''; flex: 0 0 auto; width: 38px; height: 30px;
  margin-bottom: -16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath d='M3 7c9-5 22-4 27 4 4 6 2 12-1 17M22 22l7 7 4-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath d='M3 7c9-5 22-4 27 4 4 6 2 12-1 17M22 22l7 7 4-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.eyebrow { margin-bottom: 18px; }
.cta .kicker { margin-bottom: 16px; }
@media (max-width: 640px) { .eyebrow, .kicker { font-size: 19px; } }

/* ----- result-cache.html ------------------------------------------- */
/* Above the fold: the gateway's traffic log as the illustration. Every row
   is real text and its rule and outcome are links into the page, so it is
   also the page's navigation. The panel is a dark console in both themes,
   like the code blocks. Rows light up in turn, like traffic arriving. */
.page-hero--split .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.page-hero--split h1 { font-size: clamp(32px, 3.7vw, 48px); }
.page-hero--split .wrap > div > p:last-child { font-size: 19px; }
@media (max-width: 1000px) { .page-hero--split .wrap { grid-template-columns: 1fr; gap: 32px; } }

.trace { --t-ink: #e9e6e1; --t-mute: #8d8983; --t-line: #2c3038; position: relative; z-index: 1; margin: 0; background: #16181c; border: 1px solid var(--t-line); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); overflow: hidden; color: var(--t-ink); }
.trace__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--t-line); font-family: 'Kalam', cursive; font-weight: 700; font-size: 18px; color: var(--accent); }
.trace__live { width: 8px; height: 8px; border-radius: 50%; background: var(--hit); box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); animation: trace-live 1.6s ease-out infinite; }
.trace__wh { margin-left: auto; font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--t-mute); }
.trace__wh b { color: var(--hit); font-weight: 600; }
.trace__rows { list-style: none; margin: 0; padding: 6px 0; }
.trace__row { --c: var(--hit); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 18px; border-left: 3px solid transparent; animation: trace-row 12s ease-in-out infinite; }
.trace__row:nth-child(2) { animation-delay: 2s; }
.trace__row:nth-child(3) { animation-delay: 4s; }
.trace__row:nth-child(4) { animation-delay: 6s; }
.trace__row:nth-child(5) { animation-delay: 8s; }
.trace__row:nth-child(6) { animation-delay: 10s; }
.trace--block { --c: var(--accent); }
.trace--write { --c: var(--miss); }
.trace--route { --c: #5aa9d6; }
.trace--pass { --c: #c9c5bf; }
.trace .trace__sql { font-size: 12.5px; color: var(--t-ink); background: none; border: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trace__rule { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--t-ink); border: 1px dashed var(--t-line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; text-decoration: none; }
.trace__rule::before { content: '\2192  '; color: var(--t-mute); }
a.trace__rule:hover { border-color: var(--c); color: var(--c); text-decoration: none; }
.trace__rule--none { color: var(--t-mute); }
/* The whole row is a link: its main link (the rule, or PASS when no rule
   matched) stretches over the row; the outcome badge sits above it and
   keeps its own target. */
.trace__row { position: relative; }
.trace__go::after { content: ''; position: absolute; inset: 0; }
.trace__out:not(.trace__go) { position: relative; z-index: 1; }
.trace__row:hover, .trace__row:focus-within { background: rgba(255, 255, 255, .07); border-left-color: var(--c); }
.trace__row:hover .trace__rule, .trace__row:focus-within .trace__rule { border-color: var(--c); color: var(--c); }
.trace__go:focus-visible { outline: none; }
.trace__row:has(.trace__go:focus-visible) { outline: 2px solid var(--c); outline-offset: -2px; }
.trace__out { min-width: 128px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--c); border: 1px solid var(--c); border-radius: 6px; padding: 4px 9px; white-space: nowrap; text-decoration: none; }
.trace__out small { display: block; font-weight: 500; letter-spacing: 0; color: var(--t-mute); font-size: 11px; }
a.trace__out:hover { background: var(--c); color: #16181c; text-decoration: none; }
a.trace__out:hover small { color: #16181c; }
.trace .trace__foot { max-width: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 12px 18px 14px; border-top: 1px solid var(--t-line); font-size: 13.5px; }
.trace__foot a { color: var(--t-mute); font-weight: 600; }
.trace__foot a::after { content: ' \2193'; }
.trace__foot a:hover { color: var(--t-ink); }
@keyframes trace-row {
  0%, 14%, 100% { background: transparent; border-left-color: transparent; }
  3%, 9% { background: rgba(255, 255, 255, .05); border-left-color: var(--c); }
}
@keyframes trace-live { 70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
@media (prefers-reduced-motion: reduce) { .trace__row, .trace__live { animation: none; } }
@media (max-width: 640px) {
  .trace__row { grid-template-columns: 1fr auto; }
  .trace__sql { grid-column: 1 / -1; }
}

/* Jump targets clear the sticky header; a jumped-to rule card says so. */
main [id] { scroll-margin-top: 88px; }
.rulecard:target { box-shadow: 0 0 0 2px var(--rc), 0 10px 30px rgba(0, 0, 0, .12); }

/* The short version: three verdict cards */
.verdict h3 { margin: 0 0 8px; font-size: 18px; color: var(--accent); }
.verdict .verdict__line { font-size: 19px; line-height: 1.35; color: var(--ink); margin: 0 0 14px; }
.verdict ul { margin: 0; padding: 0; }
.verdict li { list-style: none; font-size: 15px; padding: 7px 0; border-top: 1px solid var(--line-soft); color: var(--text); }
.verdict--us { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 28px rgba(253, 108, 29, .12); }

/* Evaluation order, on the dark band */
.steps--band li { background: var(--band-raise); border-color: var(--band-line); box-shadow: none; }
.steps--band h3 { margin: 0 0 8px; font-size: 18px; color: var(--band-ink); }
.steps--band p { color: var(--band-text); }

/* Four real rules */
.rulecards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
@media (max-width: 960px) { .rulecards { grid-template-columns: 1fr; } }
.rulecard { --rc: var(--accent); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line-soft); border-top: 4px solid var(--rc); border-radius: var(--radius); padding: 22px 22px 18px; box-shadow: 0 1px 2px var(--shadow); min-width: 0; }
.rulecard--cache { --rc: var(--hit); }
.rulecard--deny { --rc: var(--accent); }
.rulecard--write { --rc: var(--miss); }
.rulecard--route { --rc: #3b82b8; }
html.dark-mode .rulecard--route { --rc: #5aa9d6; }
.rulecard header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rulecard header code { font-size: 15px; font-weight: 700; background: none; border: 0; padding: 0; color: var(--ink); }
.rulecard .tag { color: var(--rc); border-color: var(--rc); }
.rulecard dl { display: grid; grid-template-columns: 84px 1fr; gap: 8px 12px; margin: 0 0 16px; }
.rulecard dt { font-family: 'Kalam', cursive; font-weight: 700; font-size: 17px; color: var(--rc); line-height: 1.45; }
.rulecard dd { margin: 0; font-size: 15.5px; color: var(--text); }
.rulecard pre { margin: auto 0 0; font-size: 12px; padding: 16px 18px; }
/* Wrap only when a line will not fit (narrow cards, phones), never scroll sideways. */
.rulecard pre, .rulecard pre code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Databricks' own caches: spec cards */
.spec h3 { margin: 0 0 8px; font-size: 19px; }
.spec > p { margin: 0 0 14px; }
.spec dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
.spec dt { color: var(--muted); font-weight: 600; }
.spec dd { margin: 0; color: var(--ink); }
.spec dd.yes, .spec dd.no { display: block; }

/* Where they stop: big hand-lettered numbers */

.prose--tail { padding-top: 64px; }

/* result-cache: Databricks' caches as one story. Each row credits the layer,
   says where it stops, then where Airbrx picks up, left to right. */
.story { max-width: 760px; margin: 18px 0 28px; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); }
.story p { margin: 0 0 12px; font-size: 18px; line-height: 1.65; color: var(--ink); }
.story p:last-child { margin-bottom: 0; font-weight: 600; }
.layers { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 18px; }
.layer { display: grid; grid-template-columns: 1.2fr 1fr 1fr; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: 0 1px 2px var(--shadow); overflow: hidden; }
.layer > div { padding: 22px 24px; min-width: 0; }
.layer > div > p { margin: 0 0 12px; }
.layer__stop { position: relative; border-left: 1px dashed var(--line); }
.layer__fix { position: relative; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.layer__stop::before, .layer__fix::before { content: ''; position: absolute; left: -9px; top: 30px; width: 14px; height: 14px; background: var(--card); border-top: 1px dashed var(--line); border-right: 1px dashed var(--line); transform: rotate(45deg); }
.layer__fix::before { left: -10px; border-top: 3px solid var(--accent); border-right: 3px solid var(--accent); }
.layer__label { font-family: 'Kalam', cursive; font-weight: 700; font-size: 19px; line-height: 1.2; transform: rotate(-1.5deg); transform-origin: left; }
.layer__stop .layer__label { color: var(--muted); }
.layer__fix .layer__label { color: var(--accent); }
.layer__fix a { font-weight: 700; font-size: 14.5px; }
.layer__fix a::after { content: ' \2191'; }
@media (max-width: 900px) {
  .layer { grid-template-columns: 1fr; }
  .layer__stop { border-left: 0; border-top: 1px dashed var(--line); }
  .layer__fix { border-left: 0; border-top: 3px solid var(--accent); }
  .layer__stop::before, .layer__fix::before { display: none; }
}

/* warehouse-costs: the awake meter. A dark console in both themes, like the
   result-cache traffic log. Two timelines of one working day, the bill they
   make, and the sliders that change it. */
.meter { --t-ink: #e9e6e1; --t-mute: #8d8983; --t-line: #2c3038; --bad: #e5534b; position: relative; z-index: 1; margin: 0; background: #16181c; border: 1px solid var(--t-line); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); color: var(--t-ink); padding: 0 0 6px; }
.meter__head { display: flex; align-items: baseline; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--t-line); font-family: 'Kalam', cursive; font-weight: 700; font-size: 19px; color: var(--accent); }
.meter__note { margin-left: auto; font-size: 15px; color: var(--t-mute); }
.meter__lane { padding: 14px 20px 0; }
.meter__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; font-size: 14px; }
.meter__who { font-weight: 700; color: var(--t-ink); }
.meter__stat { color: var(--t-mute); }
.meter__stat b { font-weight: 800; }
.meter__stat--bad b { color: var(--bad); }
.meter__stat--good b { color: var(--hit); }
.tl { position: relative; height: 30px; background: #1f2329; border-radius: 6px; overflow: hidden; }
.tl__on { position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: left .25s, width .25s; }
.tl--direct .tl__on { background: color-mix(in srgb, var(--bad) 70%, transparent); }
.tl--gateway .tl__on { background: color-mix(in srgb, var(--hit) 75%, transparent); }
.tl__q { position: absolute; bottom: 0; width: 2px; height: 9px; margin-left: -1px; background: var(--t-ink); opacity: .8; }
.tl__q--hit { height: 5px; background: var(--hit); opacity: .9; }
.tl__load { position: absolute; top: 0; width: 0; height: 0; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--accent); }
/* labels sit at their own time on the 07:00 to 20:00 axis */
.tl__axis { position: relative; height: 22px; margin: 0 20px; font-family: var(--mono); font-size: 11px; color: var(--t-mute); }
.tl__axis span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.tl__axis span:first-child { transform: none; }
.meter__bill { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 20px 0; padding: 14px 0; border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line); }
.meter__k { display: block; font-size: 12px; color: var(--t-mute); }
.meter__big { display: inline-block; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; color: var(--t-ink); font-variant-numeric: tabular-nums; }
.meter__big--bad { color: var(--bad); }
.meter__big--good { color: var(--hit); }
.meter__pct { margin-left: 8px; font-family: 'Kalam', cursive; font-weight: 700; font-size: 18px; color: var(--accent); }
.meter__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; padding: 14px 20px 4px; }
.meter__controls label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--t-mute); font-weight: 600; }
.meter__controls output { color: var(--t-ink); font-weight: 700; }
.meter__controls label > output { display: inline; }
.meter__controls input[type=range] { width: 100%; accent-color: var(--accent); }
.meter__controls select, .meter__controls input[type=number] { width: 100%; background: #1f2329; color: var(--t-ink); border: 1px solid var(--t-line); border-radius: 6px; padding: 6px 8px; font: inherit; font-weight: 600; }
.meter .meter__foot { max-width: none; margin: 8px 20px 10px; font-size: 12px; line-height: 1.5; color: var(--t-mute); }
.meter__foot a { color: var(--t-ink); }
/* home: the savings simulator (savings.js) reuses the meter */
.savings .meter { margin-top: 28px; }
.meter .savings__line { max-width: none; margin: 10px 20px 0; font-size: 13.5px; color: var(--t-mute); }
.savings__line b { color: var(--hit); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .meter__controls { grid-template-columns: 1fr 1fr; }
  .meter__note { display: none; }
  .meter__bill { grid-template-columns: 1fr 1fr; }
  .meter__bill > div:last-child { grid-column: 1 / -1; }
}

/* warehouse-costs: the bill as an equation */
.bill { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; margin-top: 36px; }
.bill__term { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px; box-shadow: 0 1px 2px var(--shadow); }
.bill__term p { margin: 0; font-size: 15.5px; }
.bill__name { display: block; margin-bottom: 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.bill__term--hot { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.bill__term--hot .bill__name { color: var(--accent); }
.bill__op { align-self: center; font-family: 'Kalam', cursive; font-weight: 700; font-size: 40px; color: var(--muted); }
.autostop { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: center; margin-top: 48px; }
.autostop .table-wrap { margin-top: 0; }
@media (max-width: 900px) {
  .bill { grid-template-columns: 1fr; }
  .bill__op { justify-self: center; line-height: .6; }
  .autostop { grid-template-columns: 1fr; gap: 16px; }
}

/* warehouse-costs: the refresh loop band, and the fixes as cards */
.band .loop__then { margin: 28px 0 0; max-width: 46em; font-size: 19px; color: var(--band-ink); }
.fixcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.fixcard { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px; box-shadow: 0 1px 2px var(--shadow); }
.fixcard__moves { display: inline-block; margin-bottom: 12px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 3px 10px; }
.fixcard h3 { margin: 0 0 10px; }
.fixcard p { margin: 0 0 8px; padding-left: 22px; position: relative; font-size: 15px; }
.fixcard p::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.fixcard__good::before { content: '+'; color: var(--hit); }
.fixcard__cost::before { content: '\2212'; color: var(--accent); }
.fixcard--us { border: 2px solid var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 28px rgba(253, 108, 29, .12); }
.fixcard--us h3 { color: var(--accent); }
.fixcard--us .fixcard__moves { color: var(--accent); border-color: var(--accent); border-style: solid; }
.fixcard--us .fixcard__cost::before { content: '+'; color: var(--hit); }
@media (max-width: 1000px) { .fixcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fixcards { grid-template-columns: 1fr; } }

/* warehouse-costs: quick answers, a two-column grid of short Q&As */
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.answer { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px; box-shadow: 0 1px 2px var(--shadow); }
.answer h3 { font-size: 18px; margin: 0 0 8px; }
.answer p { margin: 0; font-size: 15.5px; }
@media (max-width: 760px) { .answers { grid-template-columns: 1fr; } }