:root{--ink:#1A1B20;--ink-strong:#0D0E12;--paper:#F2F4FA;--paper-2:#E6EAF3;--lime-50:#E7F0FF;--lime-100:#CFE2FF;--lime-300:#6EA8FE;--lime-500:#0D6EFD;--lime-600:#0B5ED7;--lime-700:#0A4DAE;--lime-ink:#08316E;--lime-soft:#DCEAFF;--coral-500:#FF6B3D;--amber-500:#F5B400;--text:#1A1B20;--text-muted:#5E626E;--text-faint:#888D99;--text-on-lime:#FFFFFF;--text-on-ink:#EEF1F8;--app-canvas:#1F1F1D;--app-sunken:#18181A;--app-card:#232325;--app-raised:#2E2E31;--app-border:#2E2E31;--focus-ring:0 0 0 3px rgba(13, 110, 253, 0.45);--shadow-sm:0 1px 0 rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);--shadow-md:0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.12);--ease-out:cubic-bezier(0.22, 1, 0.36, 1);--dur-fast:120ms;--dur-base:180ms;--fs-display-xl:clamp(44px, 6.4vw, 88px);--fs-display-lg:clamp(38px, 5.2vw, 68px);--fs-display-md:clamp(32px, 4.2vw, 52px);--fs-display-sm:clamp(27px, 3.2vw, 39px);--fs-h1:clamp(27px, 3vw, 39px);--fs-h2:clamp(22px, 2.3vw, 29px);--fs-h3:21px;--fs-body-lg:18px;--fs-body:16px;--fs-body-sm:14px;--fs-caption:12.5px;--fs-eyebrow:11.5px}

:root{
  --ff-display:"Archivo","Inter Tight",sans-serif;
  --ff-body:"Inter Tight",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --rule:rgba(26,27,32,.14);
  --rule-soft:rgba(26,27,32,.08);
  --rule-strong:rgba(26,27,32,.28);
  --rule-ink:rgba(238,241,248,.18);
  --on-ink-dim:rgba(238,241,248,.66);
  --gutter:20px;
  --measure:68ch;
  --display-wdth:100%;
  --label:11px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:#FFFFFF;
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  letter-spacing:-0.003em;
  -webkit-font-smoothing:antialiased;
}

/* Browser surfaces: selection, caret, scrollbars and rings are part of the
   design, not the user agent's to decide. */
::selection{background:var(--lime-100);color:var(--lime-ink)}
body{caret-color:var(--lime-600);scrollbar-color:var(--rule-strong) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule-strong);border:3px solid #FFFFFF}
::-webkit-scrollbar-thumb:hover{background:rgba(26,27,32,.45)}
:focus-visible{outline:0;box-shadow:var(--focus-ring);border-radius:0}
:where(h1,h2,h3){margin:0}
:where(p,ul,ol,dl,dd,figure){margin:0}
:where(ul,ol){padding:0;list-style:none}

a{color:var(--lime-700);text-decoration-thickness:1px;text-underline-offset:0.18em;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--lime-ink)}
code,pre,.tnum,.mono{font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.container{width:100%;max-width:calc(1180px + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:20;
  padding:12px 18px;background:var(--ink);color:var(--paper);
  font-family:var(--ff-mono);font-size:13px;text-decoration:none;
}
.skip:hover,.skip:focus{color:var(--paper)}
.skip:focus{left:0}

/* ── Type ─────────────────────────────────────────────────────────────── */
.hero__title,.page__title,.section__title,.close__title,.nav__mark,.foot__mark,.ledger__title,.platform__name,.faq__q{
  font-family:var(--ff-display);
  font-stretch:var(--display-wdth);
  text-wrap:balance;
}
.hero__title{font-size:var(--fs-display-lg);font-weight:600;line-height:1.0;letter-spacing:-0.032em;color:var(--ink)}
.page__title{font-size:var(--fs-display-md);font-weight:600;line-height:1.03;letter-spacing:-0.030em;color:var(--ink)}
.section__title{font-size:var(--fs-display-sm);font-weight:600;line-height:1.06;letter-spacing:-0.026em;color:var(--ink)}
.lead{font-size:var(--fs-body-lg);line-height:1.55;color:var(--text-muted);max-width:52ch;text-wrap:pretty}
p{text-wrap:pretty}

/* Mono label: every eyebrow, column head, index and unit on the site. */
.section-register,.hero__reach-label,.code__lang,.code__status,.code__copy,.foot__label,
.spec thead th,.ledger__num,.counts__num,.price__unit,.price__billed,.nav__links a,.foot__col a{
  font-family:var(--ff-mono);
  letter-spacing:.08em;
}
.section-register{
  display:block;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--ink);
  font-size:var(--label);text-transform:uppercase;font-weight:500;line-height:1;color:var(--text-muted);
}
.section--ink .section-register{color:var(--on-ink-dim);border-bottom-color:var(--rule-ink)}

/* ── Sections ─────────────────────────────────────────────────────────── */
.section{padding-block:56px}
.section--white{background:#FFFFFF}
.section--paper{background:var(--paper);border-block:1px solid var(--rule)}
.section--ink{background:var(--ink);color:var(--text-on-ink)}
.section--ink .section__title{color:var(--text-on-ink)}
.section__head{margin-bottom:28px}
.section__lead{margin-top:12px;font-size:var(--fs-body-lg);line-height:1.55;color:var(--text-muted);max-width:58ch}
.section--ink .section__lead{color:var(--on-ink-dim)}

/* ── Controls: square, never pills ────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:13px 22px;border:1px solid transparent;border-radius:0;
  font-family:var(--ff-body);font-size:15px;font-weight:600;line-height:1;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.btn--accent{background:var(--lime-500);color:var(--text-on-lime);border-color:var(--lime-500)}
.btn--accent:hover{background:var(--lime-600);border-color:var(--lime-600);color:var(--text-on-lime)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}
.btn--on-ink{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--on-ink:hover{background:#FFFFFF;color:var(--ink)}
.btn--line-ink{background:transparent;color:var(--text-on-ink);border-color:var(--rule-ink)}
.btn--line-ink:hover{border-color:var(--paper);color:var(--text-on-ink)}
.actions{display:flex;flex-wrap:wrap;gap:10px}

/* ── Nav ──────────────────────────────────────────────────────────────── */
/* Not sticky on a phone: the two-row bar costs 20% of an 812px viewport on
   every scroll position, and the primary action repeats in the hero, the
   pricing panel and the close. Sticky returns at desktop, where it is 7%. */
.nav{background:#FFFFFF;border-bottom:1px solid var(--ink)}
.nav__inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-block:12px}
.nav__mark{flex:1 1 auto;font-size:19px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);text-decoration:none}
.nav__mark:hover{color:var(--ink)}
.nav__cta{flex:0 0 auto;min-height:38px;padding:10px 16px;font-size:13px}
.nav__links{order:3;flex:1 0 100%;display:flex;flex-wrap:wrap;gap:0 13px;padding-top:6px;border-top:1px solid var(--rule-soft)}
.nav__links a{display:inline-flex;align-items:center;min-height:38px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--text-muted);text-decoration:none}
.nav__links a:hover{color:var(--ink)}

/* ── Code / terminal panels ───────────────────────────────────────────── */
.code{margin:0;border:1px solid var(--ink);border-radius:0;background:var(--ink-strong);color:var(--text-on-ink)}
.code + .code{margin-top:-1px}
.code__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--rule-ink);background:var(--app-sunken);
}
.code__lang{font-size:var(--label);text-transform:uppercase;color:var(--on-ink-dim)}
.code__status{font-size:var(--label);color:var(--on-ink-dim)}
.code__copy{
  appearance:none;min-height:34px;padding:8px 13px;border-radius:0;cursor:pointer;
  background:transparent;border:1px solid var(--rule-ink);color:var(--text-on-ink);
  font-size:var(--label);text-transform:uppercase;
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.code__copy:hover{border-color:var(--paper);color:var(--paper)}
.code__body{
  margin:0;padding:15px 14px;overflow-x:auto;overscroll-behavior-x:contain;
  font-family:var(--ff-mono);font-size:12.5px;line-height:1.7;tab-size:2;
}
.code__body code{white-space:pre;color:var(--text-on-ink)}
.code__body::-webkit-scrollbar-thumb{background:var(--rule-ink);border-color:var(--ink-strong)}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding-block:44px 52px;background:#FFFFFF}
/* An explicit minmax(0,1fr), never the implicit auto column: an auto column is
   sized by its widest content, so the terminal panel's <pre> would drag the
   whole page past the viewport instead of scrolling inside its own box. */
.hero__grid{display:grid;gap:36px;grid-template-columns:minmax(0,1fr)}
.hero__body,.hero__panel{min-width:0}
.hero__title{max-width:18ch}
.hero__lead{margin-top:18px;padding-top:18px;border-top:1px solid var(--ink);font-size:var(--fs-body-lg);line-height:1.5;color:var(--ink);font-weight:500;max-width:34ch}
.hero__price{margin-top:12px;font-size:var(--fs-body);color:var(--text-muted)}
.hero__price .money{font-weight:600;color:var(--ink)}
.hero .actions{margin-top:24px}
.hero__reach{margin-top:32px;padding-top:12px;border-top:1px solid var(--rule)}
.hero__reach-label{display:block;font-size:var(--label);text-transform:uppercase;color:var(--text-muted)}
.hero__reach-list{display:flex;flex-wrap:wrap;margin-top:8px;gap:4px 18px}
.hero__reach-list li{font-size:14px;font-weight:500;color:var(--text-muted)}

/* ── Quickstart ───────────────────────────────────────────────────────── */
.quickstart__caption{margin-bottom:14px;font-size:15px;color:var(--text-muted);max-width:62ch}

/* ── Platforms spec table ─────────────────────────────────────────────── */
.spec__scroll{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--ink);background:#FFFFFF}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec thead th{
  padding:12px 10px;text-align:center;vertical-align:bottom;
  font-size:var(--label);text-transform:uppercase;font-weight:500;color:var(--text-muted);
  border-bottom:1px solid var(--ink);white-space:nowrap;
}
.spec__rowhead{
  position:sticky;left:0;z-index:1;text-align:left;
  min-width:184px;padding:12px 14px;background:#FFFFFF;border-right:1px solid var(--rule);
}
.spec tbody tr{border-bottom:1px solid var(--rule-soft)}
.spec tbody tr:last-child{border-bottom:0}
.spec tbody td{padding:12px 10px;text-align:center;color:var(--ink)}
.platform__name{display:block;font-size:16px;font-weight:600;letter-spacing:-0.012em;color:var(--ink)}
.platform__note{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--text-muted);max-width:26ch}
.spec__yes{font-size:15px;color:var(--ink)}
.spec__no{color:var(--text-muted)}
.spec__link-col{text-align:right;padding-right:14px;white-space:nowrap}
.spec__link-col a{font-family:var(--ff-mono);font-size:var(--label);text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.spec__link-col a:hover{text-decoration:underline}

/* ── Ledger (how it works) ────────────────────────────────────────────── */
.ledger{border-top:1px solid var(--ink)}
.ledger__row{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--rule)}
.ledger__num{grid-row:1 / span 2;font-size:var(--label);font-weight:500;color:var(--text-muted);padding-top:4px}
.ledger__title{font-size:var(--fs-h3);font-weight:600;letter-spacing:-0.014em;color:var(--ink)}
.ledger__body{font-size:15px;line-height:1.6;color:var(--text-muted);max-width:60ch}

/* ── Ink pricing panel ────────────────────────────────────────────────── */
.ink__rule{font-size:var(--fs-h2);font-weight:600;line-height:1.22;letter-spacing:-0.02em;color:var(--text-on-ink);max-width:22ch;font-family:var(--ff-display);font-stretch:var(--display-wdth)}
.price__lead{margin-top:26px;font-family:var(--ff-display);font-stretch:var(--display-wdth);font-size:var(--fs-display-sm);font-weight:600;line-height:1;letter-spacing:-0.028em;color:var(--lime-300)}
/* Label tracking belongs on the uppercase labels, not on these two: both are
   lowercase running text at body size, where 0.08em reads as loose, not precise. */
.price__lead .price__unit{font-family:var(--ff-mono);font-size:var(--fs-body-sm);font-weight:400;letter-spacing:.01em;color:var(--on-ink-dim)}
.price__billed{margin-top:10px;font-size:var(--fs-body-sm);letter-spacing:.01em;color:var(--on-ink-dim)}
.ink__free{margin-top:22px;font-size:var(--fs-body-lg);line-height:1.5;color:var(--text-on-ink);max-width:42ch}
.ink__nothing{margin-top:12px;font-size:var(--fs-body);line-height:1.6;color:var(--on-ink-dim);max-width:46ch}
.ink__actions{margin-top:28px}

/* ── About ────────────────────────────────────────────────────────────── */
.prose p{max-width:var(--measure);font-size:var(--fs-body-lg);line-height:1.62;color:var(--text-muted)}
.prose p + p{margin-top:14px}
.about__rel{font-weight:600;color:var(--ink)}

/* ── Pricing page ─────────────────────────────────────────────────────── */
.page-head{padding-block:44px 48px;background:#FFFFFF;border-bottom:1px solid var(--ink)}
.page-head__grid{display:grid;gap:30px}
.page-head .lead{margin-top:16px}
.page-head__note{margin-top:12px;font-size:15px;line-height:1.6;color:var(--text-muted);max-width:56ch}
.price-block{padding:22px;border:1px solid var(--ink);background:var(--paper)}
/* The one accent on this page. --lime-700, never --lime-500: 7.1:1 on paper. */
.price-block .price__lead{margin-top:0;color:var(--lime-700)}
.price-block .price__lead .price__unit{color:var(--text-muted)}
.price-block .price__billed{color:var(--text-muted)}
.price__free{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-size:var(--fs-body-lg);font-weight:600;color:var(--ink)}
.price__note{margin-top:6px;font-size:14px;line-height:1.55;color:var(--text-muted)}

.counts{border-top:1px solid var(--ink)}
.counts li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule)}
.counts__num{font-family:var(--ff-mono);font-size:var(--label);letter-spacing:.08em;color:var(--text-muted);padding-top:4px}
.counts__body{font-size:var(--fs-body);line-height:1.6;color:var(--text-muted);max-width:var(--measure)}

.faq{border-top:1px solid var(--ink)}
.faq__row{padding:18px 0;border-bottom:1px solid var(--rule)}
.faq__q{font-size:var(--fs-h3);font-weight:600;letter-spacing:-0.014em;color:var(--ink)}
.faq__a{margin:8px 0 0;font-size:var(--fs-body);line-height:1.62;color:var(--text-muted);max-width:var(--measure)}

.close{padding-block:52px;background:var(--ink);color:var(--text-on-ink)}
.close__title{font-size:var(--fs-display-sm);font-weight:600;line-height:1.06;letter-spacing:-0.026em;color:var(--text-on-ink);max-width:18ch}
.close__lead{margin-top:14px;font-size:var(--fs-body-lg);line-height:1.5;color:var(--on-ink-dim);max-width:44ch}
.close .actions{margin-top:24px}

/* ── Footer: a dense mono index ───────────────────────────────────────── */
.foot{background:#FFFFFF;border-top:1px solid var(--ink);padding-block:36px}
.foot__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.foot__mark{font-size:17px;font-weight:600;letter-spacing:-0.03em;color:var(--ink)}
.foot__rel{font-size:14px;color:var(--text-muted)}
.foot__index{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;padding-block:22px}
.foot__col{display:flex;flex-direction:column;gap:7px;min-width:0}
.foot__label{font-size:var(--label);text-transform:uppercase;color:var(--text-muted)}
.foot__col a{font-size:12.5px;color:var(--ink);text-decoration:none}
.foot__col a:hover{color:var(--lime-ink);text-decoration:underline}
.foot__col code{font-family:var(--ff-mono);font-size:12px;color:var(--ink);overflow-wrap:anywhere}
.foot__wink{padding-top:18px;border-top:1px solid var(--rule);font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.04em;color:var(--text-muted)}

/* ── One authored moment: the spec rows resolve as they enter ─────────── */
@keyframes row-settle{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .spec tbody tr{animation:row-settle linear both;animation-timeline:view();animation-range:entry 4% entry 38%}
  }
}

/* Phone headlines narrow rather than shrink (Archivo wdth axis). */
@media (max-width:479px){:root{--display-wdth:92%}}

@media (min-width:768px){
  :root{--gutter:32px}
  .nav{position:sticky;top:0;z-index:10}
  .nav__inner{flex-wrap:nowrap;gap:28px}
  .nav__links a{font-size:var(--label);letter-spacing:.08em}
  .nav__mark{order:1;flex:0 0 auto}
  .nav__links{order:2;flex:1 1 auto;justify-content:flex-end;gap:0 22px;padding-top:0;border-top:0}
  .nav__links a{min-height:0;padding-block:4px}
  .nav__cta{order:3}
  .section{padding-block:104px}
  .hero{padding-block:84px 96px}
  .page-head{padding-block:84px 72px}
  .close{padding-block:96px}
  .section__head{margin-bottom:40px}
  .hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr);gap:0}
  .hero__body{padding-right:48px}
  .hero__panel{padding-left:48px;border-left:1px solid var(--ink)}
  .page-head__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:48px;align-items:start}
  .ledger__row{grid-template-columns:3.5rem 15rem 1fr;gap:0 24px;padding:22px 0}
  .ledger__num{grid-row:auto;padding-top:6px}
  .ledger__body{grid-column:3}
  .counts li{grid-template-columns:3.5rem 1fr;gap:24px}
  .faq__row{display:grid;grid-template-columns:15rem 1fr;gap:24px;padding:22px 0}
  .faq__a{margin:0}
  .foot{padding-block:52px}
  .foot__index{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
}

@media (min-width:1080px){
  .hero__title{max-width:16ch}
}