@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

/* Redline shared styles.
   Structure borrowed from YouTube: surfaces are stepped by lightness rather than
   separated by borders, secondary text sits well below primary, one brand accent
   and blue reserved for links. Roboto throughout, YouTube red as the accent.
   Success keeps its own green: an "ok" pill inheriting the accent would read as
   an error. */

:root {
  --bg: #0f0f0f;
  --surface: #1c1c1c;
  --chip: #272727;
  --chip-hover: #3f3f3f;
  --ink: #f1f1f1;
  --muted: #aaaaaa;
  --faint: #717171;
  --line: #303030;
  --line-soft: #232323;
  --accent: #ff0000;
  --accent-ink: #ffffff;
  --accent-soft: #2a1010;
  --link: #3ea6ff;
  --good: #4cc38a;
  --good-soft: #12241a;
  --bad: #f28b82;
  --code-bg: #000000;

  --radius: 12px;
  --pill: 18px;
  /* Anything sticky below the header offsets by this rather than a magic number. */
  --header-h: 57px;
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Roboto, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --surface: #f9f9f9;
    --chip: #f2f2f2;
    --chip-hover: #e5e5e5;
    --ink: #0f0f0f;
    --muted: #606060;
    --faint: #909090;
    --line: #e5e5e5;
    --line-soft: #efefef;
    /* #cc0000 rather than pure red: white text on #ff0000 fails contrast in light mode. */
    --accent: #cc0000;
    --accent-ink: #ffffff;
    --accent-soft: #fdeeee;
    --link: #065fd4;
    --good: #1c7a4c;
    --good-soft: #eaf4ee;
    --bad: #c5221f;
    --code-bg: #0f0f0f;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 900px; }

/* Header ------------------------------------------------------------------ */

header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.logo { font-weight: 700; font-size: 20px; letter-spacing: -0.04em; color: var(--ink); }
.logo:hover { text-decoration: none; }
.logo span { color: var(--accent); }
.nav { display: flex; gap: 8px; align-items: center; }
.nav a { white-space: nowrap; }

/* Nav items are YouTube chips: no borders, a filled pill on hover. */
.nav a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
}
.nav a:hover { background: var(--chip); color: var(--ink); text-decoration: none; }
.nav a[aria-current] { background: var(--chip); color: var(--ink); }

/* One filled action per header, so the bar reads as a product rather than three
   floating words. */
.nav a.cta { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.nav a.cta:hover { background: color-mix(in srgb, var(--accent) 82%, #000); color: var(--accent-ink); }

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  padding: 10px 18px;
  border-radius: var(--pill);
  font: 500 14px/1.2 var(--sans);
  cursor: pointer;
}
.btn:hover { background: color-mix(in srgb, var(--accent) 82%, #000); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: var(--chip); color: var(--ink); }
.btn.ghost:hover { background: var(--chip-hover); }
.btn.sm { padding: 6px 13px; font-size: 13px; }
.btn.danger { background: var(--chip); color: var(--bad); }
.btn.danger:hover { background: var(--chip-hover); }

/* Forms ------------------------------------------------------------------- */

input, select {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: 400 14px var(--sans);
}
input::placeholder { color: var(--faint); }
input:focus, select:focus { outline: 0; border-color: var(--link); background: var(--bg); }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }

/* Type -------------------------------------------------------------------- */

h1 { font-size: clamp(30px, 5.5vw, 50px); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; margin: 0 0 16px; }
h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 6px; }
h3 { font-size: 15px; font-weight: 500; margin: 0 0 7px; }
.lede { font-size: clamp(15px, 2vw, 18px); color: var(--muted); max-width: 58ch; margin: 0 0 28px; }
.sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; max-width: 68ch; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

section { padding-block: 44px; border-top: 1px solid var(--line-soft); }

/* Cards ------------------------------------------------------------------- */

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 780px) { .grid { grid-template-columns: 1fr; } }
.card { background: var(--surface); border-radius: var(--radius); padding: 20px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; }
.num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700; margin-bottom: 12px;
}

/* Tables ------------------------------------------------------------------ */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap table { min-width: 560px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line-soft); }
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: none; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
tbody tr:hover { background: var(--surface); }
.pill { display: inline-block; padding: 3px 9px; border-radius: var(--pill); font-size: 12px; background: var(--chip); color: var(--muted); }
.pill.ok { color: var(--good); background: var(--good-soft); }
.pill.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.empty { color: var(--muted); font-size: 14px; padding: 26px 0; }

/* Code -------------------------------------------------------------------- */

pre {
  background: var(--code-bg);
  color: #f1f1f1;
  padding: 20px;
  border-radius: var(--radius);
  overflow-x: auto;
  font: 400 13px/1.7 var(--mono);
  margin: 0;
}
pre .c { color: #717171; }
pre .s { color: #8ed4a6; }

.keyout {
  font: 400 12.5px/1.6 var(--mono);
  word-break: break-all;
  background: var(--code-bg);
  color: #f1f1f1;
  padding: 12px;
  border-radius: 8px;
  margin: 11px 0 0;
}

/* Notices ----------------------------------------------------------------- */

/* Notices in Redline are confirmations, so they take the success green. The accent
   is the brand red and would read as a failure here. */
.notice {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--good-soft);
  color: var(--ink);
  margin-bottom: 20px;
  font-size: 14px;
}
.notice.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.hide { display: none !important; }

/* Page sheet and reveal footer, shared across every page ----------------------
   The page is a sheet with rounded bottom corners laid over a red footer. When
   the footer fits the viewport, redline.js pins it to the bottom behind the
   sheet and a spacer of the same height lets the sheet scroll up off it. When
   it does not fit, it stays in normal flow so nothing is ever cut off. */

:root { --foot-bg: #a8120f; --foot-ink: #ffffff; --sheet-radius: 32px; }

html { background: var(--bg); }
body { background: var(--foot-bg); }

.sheet {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 64px;
  background: var(--bg);
  border-radius: 0 0 var(--sheet-radius) var(--sheet-radius);
}

.foot-spacer { height: 0; pointer-events: none; }
html.reveal .foot-spacer { height: var(--foot-h, 0px); }
html.reveal footer.site-foot { position: fixed; inset-inline: 0; bottom: 0; z-index: 0; }

footer.site-foot { background: var(--foot-bg); color: var(--foot-ink); }
.foot-cta { padding-block: 92px 64px; }
.foot-title {
  font-size: clamp(38px, 6.6vw, 80px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin: 0 0 30px;
  max-width: 14ch;
}
.btn.on-red { background: #ffffff; color: var(--foot-bg); }
.btn.on-red:hover { background: #f1d9d8; }
.btn.on-red-ghost { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.btn.on-red-ghost:hover { background: rgba(255, 255, 255, 0.24); }

.foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 20px 40px;
  padding-block: 26px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.foot-brand { display: flex; gap: 10px; align-items: baseline; max-width: 46ch; color: rgba(255, 255, 255, 0.78); font-size: 13px; }
.foot-brand .logo { font-size: 16px; color: #ffffff; }
.foot-brand .logo span { color: #0f0f0f; }
.foot-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-nav a { color: rgba(255, 255, 255, 0.82); font-size: 13px; }
.foot-nav a:hover { color: #ffffff; }
.foot-legal { grid-column: 1 / -1; color: rgba(255, 255, 255, 0.6); font-size: 12px; }

@media (max-width: 640px) {
  :root { --sheet-radius: 22px; }
  .sheet { padding-bottom: 40px; }
  .foot-cta { padding-block: 60px 44px; }
  .foot { grid-template-columns: 1fr; gap: 14px; }
}

/* Long-form pages (privacy, use cases) ------------------------------------ */
.prose { max-width: 70ch; padding-block: 40px 8px; }
.prose .kicker { color: var(--accent); font-size: 13px; font-weight: 500; margin: 0 0 10px; }
.prose h1 { font-size: clamp(28px, 4.4vw, 42px); margin-bottom: 14px; }
.prose .lede { color: var(--ink); font-size: 18px; margin-bottom: 22px; }
.prose p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 0 0 16px; }
.prose h2 { font-size: 20px; margin: 32px 0 10px; }
.prose ul, .prose ol { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 0 0 16px; padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--link); }
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-block: 8px 28px; }
.cases a {
  display: block; background: var(--surface); border-radius: var(--radius); padding: 16px 18px;
  color: var(--ink); text-decoration: none;
}
.cases a:hover { background: var(--chip); text-decoration: none; }
.cases a strong { display: block; font-size: 15px; margin-bottom: 4px; }
.cases a span { color: var(--muted); font-size: 13.5px; }
@media (max-width: 720px) { .cases { grid-template-columns: 1fr; } }

/* Sign-in gate, used by the dashboard and the Playground ------------------ */
.gate { max-width: 430px; margin: 96px auto; padding: 0 24px; }
.gate h1 { font-size: 26px; margin-bottom: 8px; }
.gate p { color: var(--muted); margin: 0 0 22px; }
.gate input { width: 100%; margin-bottom: 12px; }
.gate .alt { margin-top: 18px; font-size: 13px; }
#gateCode {
  font: 500 26px/1 var(--mono);
  letter-spacing: 0.28em;
  text-align: center;
  padding: 16px 12px;
}
@media (max-width: 640px) { .gate { margin: 56px auto; } }

/* Dashboard account bar, so the site header stays identical to the other pages */
.acctbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0 18px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px; color: var(--muted);
}
.acctbar #signout { color: var(--muted); }
.acctbar #signout:hover { color: var(--ink); }


/* Mobile ------------------------------------------------------------------ */

@media (max-width: 640px) {
  :root { --header-h: 53px; }

  .wrap { padding: 0 16px; }

  /* The logo shrinks a touch and the text links tighten, so the bar keeps real
     breathing room around the one filled action instead of crowding the edge. */
  header .wrap { gap: 12px; padding-block: 9px; }
  .logo { font-size: 18px; }
  .nav { gap: 4px; }
  .nav a { padding: 7px 11px; font-size: 13px; }
  .nav a.cta { padding: 7px 13px; }
  /* Anchors to sections you scroll past anyway; the real destinations stay. */
  .nav a.secondary { display: none; }

  /* Below 380px the three items would touch, so the text links drop their chip
     padding and only the action keeps its pill. */
  @media (max-width: 380px) {
    .nav a { padding: 7px 6px; }
    .nav a.cta { padding: 7px 12px; }
  }

  /* Under 16px, iOS zooms the whole page when a field takes focus. */
  input, select, textarea { font-size: 16px; padding: 11px 13px; }

  /* Thumbs need more than a mouse pointer does. */
  .btn { padding: 12px 18px; }
  .btn.sm { padding: 8px 13px; }

  h1 { letter-spacing: -0.03em; }
  section { padding-block: 34px; }
  .grid { gap: 12px; }
  .card { padding: 17px; }

  pre { padding: 15px; font-size: 12px; border-radius: 10px; }
}

/* SEO layer: guides, models, comparisons, learn ---------------------------
   Added for the generated pages. Reuses .prose, .cases, .card, pre, table.
   No left accent stripes, no hover lift: hover changes colour only. */

.prose.wide { max-width: 82ch; }

/* Breadcrumb trail. Muted, with a faint separator; current page not a link. */
.crumbs { font-size: 13px; color: var(--muted); padding-block: 24px 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); text-decoration: none; }
.crumbs .sep { margin: 0 8px; color: var(--faint); }
.crumbs [aria-current] { color: var(--ink); }

/* Labelled snippet group. */
.snip { margin: 0 0 16px; }
.snip-label { font-size: 12px; color: var(--muted); margin: 0 0 6px; font-weight: 500; }

/* Honest-caveat callout. A tinted surface, no stripe. */
.callout {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.65;
}
.callout strong { color: var(--ink); }

/* Spec and comparison tables reuse the base table look. */
table.spec th, table.cmp th { color: var(--muted); font-weight: 500; vertical-align: top; }
table.spec th { width: 34%; white-space: nowrap; }
table.spec td, table.cmp td { color: var(--ink); vertical-align: top; }
table.cmp thead th { color: var(--ink); font-weight: 600; }
table.cmp th:first-child { width: 22%; color: var(--muted); font-weight: 500; }
table.cmp td { width: 39%; }
table.spec .mono, table.cmp .mono { font-size: 12.5px; }

/* FAQ block. */
.faq { margin: 0 0 16px; }
.faq-item { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.faq-item:last-child { border-bottom: 0; }
.faq-item h3 { font-size: 15px; color: var(--ink); margin: 0 0 6px; }
.faq-item p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; }

/* Backlink row under an article. */
.backlink { color: var(--muted); font-size: 14px; padding-block: 8px 28px; }
.backlink a { color: var(--link); }

/* "Facts checked ..." line on comparison pages. */
.checked { color: var(--faint); font-size: 13px; margin: -8px 0 20px; }

/* The .cases grid is reused as a link grid throughout; keep it single-column
   friendly on the wider prose pages. */
.prose + .cases, article + .cases { margin-top: 4px; }