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

/* Calibre (Klim), licensed, 700 only. Reached through --display so nothing
   lighter is rendered out of the bold file. */
@font-face {
  font-family: Calibre;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Calibre-700.woff') format('woff');
}

/* MagmaRouter 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: #ffffff;
  --surface: #f5f6f8;
  --chip: #eef0f3;
  --chip-hover: #e4e7eb;
  --ink: #101114;
  --muted: #6c7076;
  --faint: #9aa0a8;
  --line: #e4e7eb;
  --line-soft: #eef0f3;
  --accent: #e10600;
  --accent-ink: #ffffff;
  --accent-soft: #fdecec;
  /* Links carry ink and an underline rather than a colour of their own, which
     is what keeps a page of prose reading as one piece of type. */
  --link: #101114;
  --good: #1c7a4c;
  --good-soft: #eaf4ee;
  --bad: #c5221f;
  --code-bg: #101114;

  /* Square throughout. The slabs, the cards and the buttons all sit on the
     same grid as the type, and a corner radius breaks it. */
  --radius: 0px;
  --pill: 0px;
  --header-h: 57px;
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: Calibre, Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { 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-family: var(--display); 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: var(--radius);
}
/* Colour only on hover, never a move and never a fill. */
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current] { 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: var(--radius);
  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-family: var(--display); font-size: clamp(30px, 5.5vw, 50px); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; margin: 0 0 16px; }
h2 { font-family: var(--display); font-size: 20px; font-weight: 700; 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: var(--radius);
  margin: 11px 0 0;
}

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

/* Notices in MagmaRouter 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, magmarouter.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: #eef0f3; --foot-ink: #101114; --sheet-radius: 0px; }

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-family: var(--display);
  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;
}
/* The band is pale now, so the actions on it are ink rather than reversed. */
.btn.on-red { background: var(--ink); color: #ffffff; }
.btn.on-red:hover { background: #2b2e34; }
.btn.on-red-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.on-red-ghost:hover { background: #ffffff; }

.foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 20px 40px;
  padding-block: 26px 30px;
  border-top: 1px solid var(--line);
}
.foot-brand { display: flex; gap: 10px; align-items: baseline; max-width: 46ch; color: var(--muted); font-size: 13px; }
.foot-brand .logo { font-size: 16px; color: var(--ink); }
.foot-brand .logo span { color: var(--accent); }
.foot-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-nav a { color: var(--muted); font-size: 13px; }
.foot-nav a:hover { color: var(--accent); text-decoration: none; }
.foot-legal { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }

@media (max-width: 640px) {
  .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; }
/* No eyebrows. Held here as a backstop because the markup reaches generated pages. */
.prose .kicker, .prose .eyebrow, .kicker, .eyebrow { display: none !important; }
.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); text-decoration: underline; text-underline-offset: 3px; }
.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 filled action keeps its own. */
  @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; }
}

/* 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; }

/* Editorial chrome =========================================================
   The homepage is a standalone file with its own copy of this system. These
   are the same rules expressed for the 104 pages that share this stylesheet,
   so every page in the site carries one header and one footer. The reference
   is isthmus.co.nz: a fixed wordmark in a left rail, no nav bar, a full-screen
   menu behind a burger, and a pale footer revealed by scrolling past the page.
   ------------------------------------------------------------------------ */

:root {
  --paper: var(--bg);
  --band: var(--foot-bg);
  --red: var(--accent);
  --mid: var(--muted);
  /* The second clause of a statement. Light on purpose: it is only ever set at
     display sizes, and it is never used for body copy, where it would fail to
     be readable. */
  --grey: #b4b8bf;
  --rail: clamp(24px, 17vw, 206px);
}

/* The old header bar is gone. Any page still carrying the markup hides it
   rather than showing two headers while the hand-written pages catch up. */
header { display: none; }

.rail {
  font-family: var(--display);
  position: fixed;
  top: 34px;
  left: 24px;
  width: 152px;
  z-index: 30;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.22;
  letter-spacing: -0.025em;
}
.rail a { color: inherit; }
.rail a:hover { text-decoration: none; }
.rail .mark { color: var(--ink); display: block; }
.rail .mark i { color: var(--red); font-style: normal; }

.burger {
  position: fixed;
  top: 32px;
  right: 30px;
  z-index: 40;
  width: 34px;
  height: 22px;
  display: grid;
  align-content: space-between;
  padding: 3px 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .15s ease; }
.open .burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.open .burger span:nth-child(2) { opacity: 0; }
.open .burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: var(--paper);
  padding: 110px clamp(24px, 8vw, 96px) 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.open .menu { opacity: 1; visibility: visible; }
.menu a {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 58px);
  line-height: 1.16;
  letter-spacing: -0.04em;
  color: var(--grey);
  width: max-content;
  max-width: 100%;
  transition: color .15s ease;
}
.menu a:hover, .menu a[aria-current] { color: var(--ink); text-decoration: none; }

/* The column sits to the right of the rail and centres past 1240, so the page
   and the footer columns share one left edge on a wide screen. */
.wrap { max-width: 1240px; margin-inline: auto; padding: 0 30px 0 var(--rail); }
.wrap.narrow { max-width: 1240px; }

/* The statement -----------------------------------------------------------
   The lead clause carries the ink and the rest of the sentence drops to grey,
   sharing one line box so the colour changes mid-line. That is the whole
   effect. Set smaller than the homepage's because these ledes are sentences
   rather than slogans, and held to a measure so a long one still reads as a
   statement instead of a wall. */
.statement {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(27px, 3.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  /* Measured in em so the column scales with the type and the lead clause
     always shares its first line with the start of the grey one. */
  max-width: 13em;
  padding-block: clamp(30px, 4vw, 54px) clamp(34px, 4.5vw, 66px);
}
.statement > h1,
.statement > .lede {
  display: inline;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  max-width: none;
}
.statement > h1 { color: var(--ink); }
.statement > .lede { color: var(--grey); }
/* A heading with no lede behind it is still a heading. */
.prose > h1 { margin: 0 0 clamp(26px, 3.5vw, 44px); }

/* Every label and heading takes a full stop, which is the reference's single
   most recognisable habit. Only where the text does not punctuate itself. */
.menu a::after, .crumbs span[aria-current]::after { content: '.'; }

/* Footer ------------------------------------------------------------------
   Pinned behind the page and revealed by scrolling past the end of it, rather
   than arriving in flow. The spacer opens the gap it shows through, and only
   while the footer fits on screen: a taller one would have its top unreachable,
   so it stays in flow. */
.foot-spacer { height: 0; pointer-events: none; }
html.reveal .foot-spacer { height: var(--foot-h, 0px); }
html.reveal .ed-foot { position: fixed; inset-inline: 0; bottom: 0; z-index: 0; }

.ed-foot { background: var(--band); padding: 40px 30px 46px; }
/* Full bleed rather than held to the page column: three columns of real size
   read better across the whole width than five small ones in the middle. */
.ed-foot .cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 30px;
  max-width: none;
  margin: 0;
  padding-left: var(--rail);
  font-size: 14px;
  line-height: 1.7;
}
.ed-foot .legal { color: var(--mid); }
.ed-foot h3 { margin: 0 0 6px; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.ed-foot .foot-nav { display: flex; flex-direction: column; align-items: flex-start; }
.ed-foot a { transition: color .15s ease; }
.ed-foot a:hover { color: var(--red); text-decoration: none; }
.ed-foot .end { color: var(--mid); word-break: break-all; }
.ed-foot .social { display: flex; flex-direction: column; align-items: flex-start; }

.menu-word {
  display: block;
  margin-left: auto;
  width: max-content;
  padding-block: clamp(40px, 7vw, 92px) clamp(40px, 6vw, 76px);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.035em;
}

@media (max-width: 900px) {
  :root { --rail: 0px; }
  .rail { position: static; width: auto; padding: 30px 30px 0; font-size: 16px; }
  /* No side gutter to sit in on a phone, so the trigger scrolls away with the
     wordmark rather than sitting on top of the page. */
  .burger { position: absolute; top: 30px; }
  /* Back to fixed while the overlay is up, or the close control would be
     scrolled off the top of the screen. */
  .open .burger { position: fixed; }
  .wrap { padding-inline: 30px; }
  .ed-foot .cols { grid-template-columns: 1fr 1fr; gap: 22px 26px; padding-left: 0; }
  .menu-word { margin-left: 0; }
}
@media (max-width: 460px) {
  .ed-foot .cols { grid-template-columns: 1fr; }
}