/* KrabyData's public site. The tokens, type scale and rules are KrabyFlow's
   public site's (warm graphite, serif headlines, sans for the rest), written
   as plain CSS since this site has no build step for styles. Krab orange is
   the one brand colour: the top bar, the mark, primary actions and a few
   accents, never large fills. Green and amber keep their meaning on the
   status page. */

@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }

:root {
  --canvas: rgb(22 22 21);
  --surface: rgb(29 29 27);
  --raised: rgb(37 37 35);
  --overlay: rgb(42 42 40);
  --line: rgb(44 44 41);
  --line-strong: rgb(59 59 55);
  --ink: rgb(236 234 228);
  --ink-2: rgb(165 163 157);
  --ink-3: rgb(113 112 106);
  --krab: rgb(242 110 58);
  --krab-hi: rgb(255 134 86);
  --krab-ink: rgb(255 160 120);
  --krab-soft: rgb(242 110 58 / 0.12);
  --krab-line: rgb(242 110 58 / 0.4);
  --accent: var(--krab);
  --up: rgb(76 195 138);
  --warn: rgb(227 169 75);
  --down: rgb(240 96 74);
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --site: 1200px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); font: 400 16px/24px var(--sans); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p, dl, dd, ul, ol, figure, pre { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgb(242 110 58 / 0.35); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 50; padding: 8px 12px; border-radius: 6px; background: var(--ink); color: var(--canvas); font-size: 15px; text-decoration: none; }
.skip:focus { top: 16px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

.container { width: 100%; max-width: var(--site); margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .container { padding: 0 32px; } }

/* Header and footer. */
.site-header { position: sticky; top: 0; z-index: 40; border-top: 3px solid var(--krab); background: linear-gradient(180deg, rgb(242 110 58 / 0.07), rgb(242 110 58 / 0) 100%), var(--canvas); box-shadow: 0 1px 0 0 var(--line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
@media (min-width: 640px) { .site-header .container { min-height: 72px; } }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; border-radius: 4px; }
.wordmark::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 3px 3px 7px 7px; background: var(--krab); box-shadow: 0 0 0 3px var(--krab-soft); }
.site-nav { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 -12px; }
.site-nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 6px; color: var(--ink-2); font-size: 15px; text-decoration: none; transition: color 120ms; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current='page'] { color: var(--ink); box-shadow: inset 0 -2px 0 0 var(--krab); border-radius: 6px 6px 0 0; }
.site-nav a[href='/key/'] { margin-left: 6px; color: var(--krab-ink); box-shadow: inset 0 0 0 1px var(--krab-line); }
.site-nav a[href='/key/']:hover { color: var(--canvas); background: var(--krab); box-shadow: none; }
.site-nav a[href='/key/'][aria-current='page'] { color: var(--canvas); background: var(--krab); box-shadow: none; border-radius: 6px; }
@media (max-width: 719px) {
  .site-header .container { padding-top: 10px; padding-bottom: 6px; row-gap: 2px; }
  .site-nav { width: calc(100% + 24px); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: none; }
  .site-nav .nav-key { display: none; }
}
.site-footer { border-top: 1px solid var(--line); margin-top: 0; }
.site-footer .container { padding-top: 56px; padding-bottom: 40px; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 5fr 7fr; gap: 48px; } }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
.footer-cols h2 { font-size: 15px; line-height: 22px; font-weight: 500; }
.footer-cols ul { list-style: none; margin-top: 12px; display: grid; gap: 8px; font-size: 15px; line-height: 22px; }
.footer-cols a { color: var(--ink-2); text-decoration: none; }
.footer-cols a:hover { color: var(--krab-ink); }
.site-footer .wordmark::before { width: 10px; height: 10px; }
.footer-about p { margin-top: 12px; max-width: 42ch; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.footer-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 18px; color: var(--ink-3); }
@media (min-width: 640px) { .footer-base { flex-direction: row; justify-content: space-between; } .footer-base p:last-child { max-width: 64ch; text-align: right; } }

/* Headlines are set in the serif, everything else in the sans. */
.title { font-family: var(--serif); font-weight: 400; color: var(--ink); scroll-margin-top: 96px; }
.title-page { font-size: 34px; line-height: 40px; letter-spacing: -0.01em; }
.title-section { font-size: 28px; line-height: 36px; }
.title-small { font-size: 22px; line-height: 30px; }
@media (min-width: 640px) { .title-page { font-size: 44px; line-height: 50px; letter-spacing: -0.015em; } .title-section { font-size: 34px; line-height: 40px; letter-spacing: -0.01em; } .title-small { font-size: 28px; line-height: 36px; } }
@media (min-width: 1024px) { .title-page { font-size: 64px; line-height: 68px; letter-spacing: -0.02em; } .title-section { font-size: 44px; line-height: 50px; letter-spacing: -0.015em; } }
.lede { max-width: 56ch; color: var(--ink-2); font-size: 16px; line-height: 24px; }
@media (min-width: 640px) { .lede { font-size: 18px; line-height: 26px; } }
.small-print { max-width: 70ch; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.muted { color: var(--ink-3); }

.hero { position: relative; padding-top: 40px; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: -3px 0 auto; height: 520px; pointer-events: none; background: radial-gradient(60% 70% at 85% 0%, rgb(242 110 58 / 0.10), rgb(242 110 58 / 0) 70%); }
main { position: relative; z-index: 0; overflow-x: clip; }
@media (min-width: 640px) { .hero { padding-top: 56px; } }
@media (min-width: 1024px) { .hero { padding-top: 80px; } }
.band { padding: 80px 0; }
@media (min-width: 1024px) { .band { padding: 112px 0; } }
.band.ruled { border-top: 1px solid var(--line); }
.page-end { padding-bottom: 80px; }
@media (min-width: 1024px) { .page-end { padding-bottom: 112px; } }

.split { display: grid; grid-template-columns: 1fr; gap: 16px 48px; }
@media (min-width: 1024px) { .split { grid-template-columns: repeat(12, 1fr); } .split > .wide { grid-column: span 7; } .split > .half { grid-column: span 6; } .split > .narrow { grid-column: 8 / span 5; padding-top: 8px; } .split > .end { align-self: end; } }
.stack-sm > * + * { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
@media (min-width: 1024px) { .mt-12 { margin-top: 64px; } }

/* Buttons and links. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 6px; font: 500 15px/22px var(--sans); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 120ms; border: 0; }
.btn-primary { background: var(--krab); color: rgb(22 16 12); font-weight: 600; }
.btn-primary:hover { background: var(--krab-hi); }
.btn-secondary { background: var(--raised); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-secondary:hover { background: var(--overlay); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: text-decoration-color 120ms; }
.link:hover { text-decoration-color: var(--krab); }

/* Figures, as on a ledger: a rule above, a line under each. */
.figures { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-strong); background: linear-gradient(90deg, var(--krab) 0 48px, transparent 48px) top left / 100% 2px no-repeat; }
@media (min-width: 900px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figure { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.figure dt { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.figure dd { margin-top: 4px; font-size: 28px; line-height: 36px; font-variant-numeric: tabular-nums; color: var(--ink); }
.figure-note { margin-top: 12px; }

/* Ruled tables on the canvas, no card. Text left, numbers right. */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.tbl th { height: 40px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--ink-3); white-space: nowrap; text-align: left; }
.tbl td { height: 44px; padding: 8px 12px; border-bottom: 1px solid rgb(44 44 41 / 0.7); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl .r { text-align: right; }
.tbl td.wrap { white-space: normal; }

/* Short facts: a term and its explanation, ruled. */
.facts { border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .facts > div { grid-template-columns: 11rem 1fr; gap: 24px; } }
.facts dt { font-size: 15px; line-height: 22px; font-weight: 500; }
.facts dd { font-size: 15px; line-height: 22px; color: var(--ink-2); }

/* The three things sold today. */
.offers { list-style: none; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line-strong); counter-reset: offer; }
@media (min-width: 900px) { .offers { grid-template-columns: repeat(3, 1fr); gap: 0 40px; } }
.offers li { padding: 24px 0; border-bottom: 1px solid var(--line); counter-increment: offer; }
.offers li::before { content: '0' counter(offer); display: block; margin-bottom: 12px; font: 500 13px/18px var(--mono); color: var(--krab); }
@media (min-width: 900px) { .offers li { border-bottom: 0; } }
.offers h3 { font-size: 18px; line-height: 26px; font-weight: 500; }
.offers p { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 22px; }
.offers code { display: inline-block; margin-top: 12px; color: var(--krab-ink); background: var(--krab-soft); }

/* Code. */
code, pre { font-family: var(--mono); font-size: 13px; line-height: 20px; }
:not(pre) > code { padding: 1px 5px; border-radius: 4px; background: var(--raised); color: var(--ink); overflow-wrap: anywhere; }
pre { overflow-x: auto; padding: 16px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
pre .k { color: var(--krab-ink); }
.code-caption { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; font-size: 13px; line-height: 18px; color: var(--ink-3); }

/* Long-form text: the docs and the legal pages. */
.prose { max-width: 68ch; color: var(--ink-2); }
.prose h2 { margin-top: 48px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 36px; color: var(--ink); scroll-margin-top: 96px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 32px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); scroll-margin-top: 96px; }
.prose p, .prose ul, .prose ol, .prose pre, .prose .tbl-wrap, .prose dl { margin-top: 16px; }
.prose ul, .prose ol { padding-left: 20px; display: grid; gap: 8px; }
.prose li::marker { color: var(--ink-3); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--krab); }
.prose strong { font-weight: 500; color: var(--ink); }
.draft { max-width: 68ch; margin-top: 24px; padding: 12px 16px; border: 1px solid rgb(227 169 75 / 0.45); border-radius: 6px; color: var(--ink); font-size: 15px; line-height: 22px; }
.draft strong { color: var(--warn); font-weight: 500; }

/* Docs: contents on the left on wide screens, the reference on the right. */
.docs { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) { .docs { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; } }
.toc { font-size: 15px; line-height: 22px; }
@media (min-width: 1024px) { .toc { position: sticky; top: 104px; align-self: start; max-height: calc(100vh - 128px); overflow-y: auto; } }
.toc h2 { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-3); margin-top: 24px; }
.toc h2:first-child { margin-top: 0; }
.toc ul { list-style: none; margin-top: 8px; display: grid; gap: 6px; }
.toc a { color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.toc a:hover { color: var(--krab-ink); }
.toc code { background: none; padding: 0; font-size: 13px; }
.route { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.route-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.route-head h3 { margin: 0; font-family: var(--mono); font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.method { font-family: var(--mono); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--krab); }
.nokey { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.route .summary { margin-top: 8px; color: var(--ink); }
.route h4 { margin-top: 24px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-3); }
.fields { list-style: none; margin-top: 8px; font-size: 15px; line-height: 22px; }
.fields li { padding: 6px 0; border-bottom: 1px solid rgb(44 44 41 / 0.7); }
.fields .fields { margin: 4px 0 0 20px; }
.fields .fields li:last-child { border-bottom: 0; }
.fields .type { color: var(--ink-3); font-family: var(--mono); font-size: 13px; margin-left: 6px; }
.fields .desc { color: var(--ink-2); }

/* Plans, side by side on wide screens. */
.plans { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.plan h2 { font-size: 18px; line-height: 26px; font-weight: 500; }
.plan .price { margin-top: 16px; font-family: var(--serif); font-size: 34px; line-height: 40px; color: var(--ink); }
.plan ul { list-style: none; margin-top: 20px; border-top: 1px solid var(--line); flex: 1; }
.plan li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 22px; color: var(--ink-2); }
.plan li strong { color: var(--ink); font-weight: 500; }
.plan .how { margin-top: 20px; }
.plan .price-terms { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--ink-3); }
.plan .allows { margin-top: 16px; color: var(--ink); font-size: 15px; line-height: 22px; min-height: 88px; }
.positioning { max-width: 56ch; padding-left: 14px; border-left: 3px solid var(--krab); color: var(--krab-ink); font-size: 18px; line-height: 26px; font-weight: 500; }
.plan-defs { border-top: 1px solid var(--line); }
.plan-defs > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .plan-defs > div { grid-template-columns: 7rem 1fr; gap: 24px; } }
.plan-defs dt { color: var(--ink); font-weight: 500; }
.plan-defs .allows { margin: 0; }
.plan[data-plan='free'] { border-color: var(--krab-line); background: linear-gradient(180deg, var(--krab-soft), transparent 160px), var(--surface); box-shadow: inset 0 3px 0 0 var(--krab); }

/* Forms. */
.form { display: grid; gap: 20px; max-width: 520px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 15px; line-height: 22px; font-weight: 500; }
.field .hint { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.input { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 400 16px/24px var(--sans); }
.input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
textarea.input { min-height: 104px; resize: vertical; }
.notice { max-width: 520px; padding: 12px 16px; border-radius: 6px; border: 1px solid var(--line-strong); font-size: 15px; line-height: 22px; }
.notice[hidden] { display: none; }
.notice.ok { border-color: rgb(76 195 138 / 0.5); }
.notice.err { border-color: rgb(240 96 74 / 0.5); }
.key-box { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; max-width: 720px; }
.key-box code { flex: 1 1 320px; padding: 12px; font-size: 15px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; user-select: all; }

/* Status: a dot and a word, green or amber. */
.state { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.state.green::before { background: var(--up); }
.state.amber::before { background: var(--warn); }
.band.docs-band { padding-top: 48px; }
.routes-title { margin-top: 80px; }
pre.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.hero-gap { padding-bottom: 80px; }
.route > p:not(.summary) { margin-top: 8px; max-width: 68ch; color: var(--ink-2); }
.route .tbl td:first-child.num { width: 64px; }
.routes-title + .route { border-top: 0; margin-top: 32px; padding-top: 0; }

/* Pricing: the billing-period switch, and one price per card at a time. */
.period-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.period-switch button { height: 34px; padding: 0 16px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: 500 14px/20px var(--sans); cursor: pointer; }
.period-switch button[aria-pressed="true"] { background: var(--krab); color: rgb(22 16 12); }
.period-switch .save { margin-left: 6px; font-size: 12px; opacity: 0.8; }
.plans[data-period="month"] .for-year { display: none; }
.plans[data-period="year"] .for-month { display: none; }
.plan .price .from { display: block; font: 400 13px/18px var(--sans); color: var(--ink-3); }