/* Deixis marketing page.
   The design is an instrument: hairlines, tabular numerals, one accent. Everything here is a
   component the page reuses — one-off geometry stays inline, inside the illustrations only. */

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

/* ─────────────────────────── tokens ───────────────────────────
   Two themes on one page: the dark chassis, and `.paper` bands for the sections that read as
   documents (privacy, pricing).

   The ink ramp is re-stepped from the design's. Its `--i3` (#5c5956 / #8d8884) measured 2.93:1 and
   3.10:1 while carrying real content at 10.5–12px, so it had to clear 4.5:1 — but with `--i2` left
   where it was there is no room for a fourth passing step underneath it, and i2/i3 collapsed into
   one tone. Graded ink is the point of the design, so `--i2` is lifted too and `--i3` sits a
   visible 1.36x (dark) / 1.52x (paper) luminance step below it, clearing 4.5:1 on both --g0 and
   --g1. `--ctrl` and `--sigink` exist for related reasons: control boundaries need 3:1, and amber
   used as *text* needs 4.5:1 on the lighter paper fills, which raw `--sig` misses at 4.26:1. */
:root {
  --g0: #0c0a08;
  --g1: #151210;
  --g2: #1f1b18;
  --g3: #2b2723;
  --hair: #35312e;
  --hair2: #504c49;
  --ctrl: #6a6663;
  --i0: #f5f3f1;
  --i1: #bfbbb9;
  --i2: #94918e;
  --i3: #817e7b;
  --sig: #ea8a18;
  --sigink: #ea8a18;
  --sighi: #f59c2e;
  --ok: #42c070;
  --fault: #f97770;
  --onsig: #1a0f00;
  --lit: rgba(255, 255, 255, 0.055);
  --cast: rgba(0, 0, 0, 0.55);
  --sans: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", ui-monospace, monospace;
  --e1: inset 0 1px 0 var(--lit), 0 1px 2px var(--cast);
  --e2: inset 0 1px 0 var(--lit), 0 2px 4px var(--cast), 0 18px 40px -18px rgba(0, 0, 0, 0.85);
  --pad: 80px;

  /* Type scale. Named for the job rather than the pixel count, so the media queries at the foot of
     this file restep the whole scale in one place instead of listing selectors — and so there is a
     right answer to reach for instead of a new number to invent. These are all the sizes the page
     uses. */
  --t-h1: 64px;
  --t-h2: 44px; /* a band's own heading */
  --t-h2-track: -0.032em;
  --t-h2-sub: 34px; /* a heading for a block nested inside a band */
  --t-h2-fit: 36px; /* the one band heading set down to hold its long line */
  --t-h2-close: 52px; /* the closing line */
  --t-h2-close-track: -0.036em;
  --t-lede: 18px;
  --t-lede-hero: 19px;
  --t-lede-sm: 16px;
  --t-body: 15px; /* running prose */
  --t-body-prose: 14.5px; /* the trial explanation */
  --t-body-note: 14px; /* callouts and the extend cards */
  --t-body-card: 13.5px; /* card, mode and plan copy */
  --t-body-footnote: 12.5px; /* plan footnotes */

  /* Vertical rhythm. Five gaps, each named for the relationship it sets rather than its size. */
  --gap-h2: 20px; /* a heading under its eyebrow label */
  --gap-block: 30px; /* a supporting block under a lede */
  --gap-pair: 44px; /* two columns of prose under a section intro */
  --gap-table: 48px; /* a table under a section intro */
  --gap-grid: 52px; /* a card grid under a section intro */
}

.paper {
  --g0: #f9f6f3;
  --g1: #efece8;
  --g2: #e4e1dd;
  --g3: #d9d5d0;
  --hair: #cfccc6;
  --hair2: #8a857e;
  --ctrl: #847f79;
  --i0: #211d1a;
  --i1: #4b4743;
  --i2: #5a5551;
  --i3: #6d6864;
  --sig: #b45309;
  --sigink: #a04a08;
  --sighi: #9a4707;
  --ok: #007938;
  --fault: #b63132;
  --onsig: #fff6ee;
  --lit: rgba(255, 255, 255, 0.8);
  --cast: rgba(0, 0, 0, 0.12);
  background: var(--g0);
  color: var(--i0);
}

/* ─────────────────────────── base ─────────────────────────── */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--g0);
  color: var(--i0);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--sigink);
  text-decoration: none;
}

a:hover {
  color: var(--sighi);
}

/* 1.4.1 Use of Color: amber against --i3 measures 1.57:1, far below the 3:1 that colour-only
   differentiation needs, so a link buried in running prose has to carry a second cue. Prose gets
   the underline; the nav, the footer columns and the .cta buttons are unambiguous by position and
   role, so they stay clean. The hover colour shift remains as the secondary cue. */
.lede a,
p.body a,
.faq p a,
.fine a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.lede a:hover,
p.body a:hover,
.faq p a:hover,
.fine a:hover {
  text-decoration-thickness: 2px;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 1.02;
}

h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: var(--t-h2-track);
  line-height: 1.08;
}

h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.3;
}

img,
svg {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: 2px;
}

/* ─────────────────────────── utilities ─────────────────────────── */

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 20;
  padding: 12px 18px;
  background: var(--sig);
  color: var(--onsig);
  font: 700 14px/1 var(--sans);
  border-radius: 3px;
  transition: top 120ms cubic-bezier(0.2, 0, 0.35, 1);
}

.skip:focus {
  top: 12px;
  color: var(--onsig);
}

/* ─────────────────────────── layout primitives ─────────────────────────── */

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.band {
  position: relative;
  padding: 104px 0;
}

.band--rule {
  border-top: 1px solid var(--hair);
}

.band--raised {
  background: var(--g1);
}

.band--tight {
  padding: 72px 0;
}

.band--flush {
  padding: 0 0 104px;
}

.band--hero {
  padding: 96px 0 104px;
  overflow: hidden;
}

.band--final {
  overflow: hidden;
  text-align: center;
}

.cols2,
.cols3,
.cols4 {
  display: grid;
}

.cols2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
}

.cols3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.cols4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.cols4--modes {
  gap: 20px;
}

.cols2--tighter {
  gap: 32px;
}

.cols2--wide-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}

.cols2--files {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}

.cols2--phone {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
}

.cols2--trial {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
}

.cols2--faq {
  gap: 0 56px;
}

.cols2--mid {
  align-items: center;
}

.cols2--top {
  align-items: start;
}

.cols3--plans {
  align-items: start;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

.gap-grid {
  margin-top: var(--gap-grid);
}

.gap-table {
  margin-top: var(--gap-table);
}

.gap-pair {
  margin-top: var(--gap-pair);
}

.gap-block {
  margin-top: var(--gap-block);
}

.gap-h2 {
  margin-top: var(--gap-h2);
}

.wrap--over {
  position: relative;
}

/* Wide content scrolls in its own box so the page body never scrolls sideways. Focusable, with a
   name, so a keyboard-only reader can reach the overflow. */
.scroller {
  max-width: 100%;
}

.scroller:focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: 4px;
}

/* ─────────────────────────── type ─────────────────────────── */

.ml {
  margin: 0;
  font: 600 10.5px/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--i2);
}

.ml--sig {
  color: var(--sigink);
}

.ml--ink {
  color: var(--i1);
}

.mn {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.lede {
  margin: 18px 0 0;
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--i1);
  max-width: 60ch;
  text-wrap: pretty;
}

.lede--sm {
  font-size: var(--t-lede-sm);
}

p.body {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--i2);
  text-wrap: pretty;
}

p.body--card {
  font-size: var(--t-body-card);
}

p.body--note {
  font-size: var(--t-body-note);
}

p.body--prose {
  font-size: var(--t-body-prose);
}

p.body--footnote {
  font-size: var(--t-body-footnote);
}

.strong-ink {
  color: var(--i0);
  font-weight: 600;
}

.fine {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--i3);
  line-height: 1.6;
}

.rule--band {
  margin-bottom: 64px;
}

.rule {
  height: 1px;
  margin: 0;
  background: var(--hair);
  border: 0;
}

/* Four headings on the page are set individually. These are per-heading typographic decisions,
   not a scale — if a fifth heading needs its own size, the honest move is to ask why, not to add
   .h2--38. Sizes come from the tokens so the media queries restep them with everything else. */
.h2--sub {
  margin-top: 18px;
  font-size: var(--t-h2-sub);
}

.h2--fit {
  font-size: var(--t-h2-fit);
}

.h2--closing {
  margin-top: var(--gap-block);
  font-size: var(--t-h2-close);
  letter-spacing: var(--t-h2-close-track);
}

.h2--measure {
  max-width: 24ch;
}

.h2--measure-wide {
  max-width: 26ch;
}

/* ─────────────────────────── one primary action, repeated ─────────────────────────── */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 3px;
  background: var(--sig);
  border: 1px solid var(--sig);
  color: var(--onsig);
  font: 700 15px/1 var(--sans);
  letter-spacing: 0.005em;
  cursor: pointer;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 4px var(--cast);
  transition:
    background 120ms cubic-bezier(0.2, 0, 0.35, 1),
    transform 120ms cubic-bezier(0.2, 0, 0.35, 1);
}

.cta:hover {
  background: var(--sighi);
  border-color: var(--sighi);
  color: var(--onsig);
  transform: translateY(-1px);
}

.cta.ghost {
  background: transparent;
  color: var(--i0);
  border-color: var(--ctrl);
  box-shadow: none;
  font-weight: 600;
}

.cta.ghost:hover {
  background: var(--g2);
  color: var(--i0);
  transform: none;
}

.cta--block {
  width: 100%;
  justify-content: center;
}

.cta--sm {
  height: 40px;
  padding: 0 18px;
  font-size: 13.5px;
}

.cta--xs {
  height: 40px;
  padding: 0 16px;
  font-size: 13px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.actions--center {
  justify-content: center;
}

/* ─────────────────────────── small components ─────────────────────────── */

.kc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 27px;
  padding: 0 8px;
  background: var(--g2);
  border: 1px solid var(--hair2);
  border-bottom-width: 2px;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 var(--lit);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--i0);
}

.kc--inline {
  vertical-align: 2px;
}

.kcrow {
  display: flex;
  gap: 7px;
  margin: 18px 0 0;
}

.pane {
  background: var(--g1);
  border: 1px solid var(--hair);
  border-radius: 3px;
  box-shadow: var(--e1);
}

.pane--pad {
  padding: 26px;
}

.pane--clip {
  overflow: hidden;
}

.segbar {
  display: flex;
  gap: 1.5px;
  align-items: flex-end;
  flex: none;
}

.segbar span {
  width: 3px;
  border-radius: 0.5px;
  background: var(--g3);
}

.segbar span.on {
  background: var(--sig);
}

.segbar span.done {
  background: var(--ok);
}

.led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--ok);
}

.led--sig {
  background: var(--sig);
  box-shadow: 0 0 5px color-mix(in oklch, var(--sig) 70%, transparent);
}

.led--glow {
  box-shadow: 0 0 6px color-mix(in oklch, var(--ok) 70%, transparent);
}

/* Atmosphere: fine grain plus one vignette. No gradient meshes. */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.glow {
  position: absolute;
  pointer-events: none;
}

.glow--hero {
  top: -180px;
  right: -160px;
  width: 1000px;
  height: 800px;
  background: radial-gradient(closest-side, rgba(234, 138, 24, 0.13), transparent 70%);
}

.glow--final {
  inset: 0;
  background: radial-gradient(closest-side at 50% 120%, rgba(234, 138, 24, 0.16), transparent 70%);
}

.badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: var(--g1);
}

.modecard {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 22px;
  background: var(--g1);
  border: 1px solid var(--hair);
  border-radius: 3px;
  box-shadow: var(--e1);
}

.modecard .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modecard svg {
  color: var(--sig);
}

.modecard--own {
  border-style: dashed;
  background: transparent;
}

.modecard--own svg {
  color: var(--i2);
}

.modecard--own h3 {
  color: var(--i1);
}

.ticks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ticks--tight {
  gap: 12px;
}

.tick {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.tick svg {
  flex: none;
  margin-top: 4px;
  color: var(--sig);
}

.tick span {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--i1);
}

.tick--sm span {
  font-size: var(--t-body-card);
}

/* Captions under the composite illustrations. They are pictures of the product, so each one is a
   figure with a real caption; the mockup inside is hidden from assistive tech.

   On contrast inside those mockups: the editor's syntax colours (1.5–3.4:1) and two --i3-on---g2
   labels (4.2:1) sit below the 1.4.3 floor. What exempts them is that they are *incidental — part
   of a picture* of an inactive interface, which is an explicit 1.4.3 carve-out. It is NOT the
   aria-hidden: hiding text from assistive tech is not a contrast exemption, so do not reach for
   aria-hidden to get a colour past this rule. Note that axe and Lighthouse will still report all
   five occurrences, because they are live DOM text — they are known and accepted, not unnoticed. */
figure {
  margin: 0;
}

figure.gap-block {
  margin-top: var(--gap-block);
}

.figcap {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--i3);
  text-align: center;
}

/* ─────────────────────────── tables ─────────────────────────── */

table.t {
  width: 100%;
  border-collapse: collapse;
}

table.t th {
  text-align: left;
  font: 600 10.5px/1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--i3);
  padding: 0 18px 11px 0;
  border-bottom: 1px solid var(--hair);
}

table.t td {
  padding: 13px 18px 13px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 14px;
  line-height: 1.5;
  color: var(--i1);
  vertical-align: top;
}

table.t td:first-child {
  color: var(--i0);
  font-weight: 500;
}

table.t tr:last-child td {
  border-bottom: 0;
}

table.t td.mn {
  font-size: 12.5px;
}

table.t td.cost {
  font-size: 13px;
}

table.t td.free {
  color: var(--ok);
}

.col-what {
  width: 210px;
}

.col-where {
  width: 200px;
}

.col-when {
  width: 170px;
}

.col-cost {
  width: 210px;
}

/* ─────────────────────────── plans ─────────────────────────── */

.plan {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: var(--g1);
  border: 1px solid var(--hair);
  border-radius: 3px;
  box-shadow: var(--e1);
}

.plan.lead {
  border-color: var(--sig);
}

.plan__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.plan__note {
  margin-top: 10px;
}

.plan__fine {
  color: var(--i3);
}

.plan__fine--mid {
  text-align: center;
  color: var(--i2);
}

.price {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price__per {
  font-size: 15px;
  color: var(--i2);
  letter-spacing: 0;
  margin-left: 4px;
}

.pill {
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 2px;
  background: var(--sig);
  color: var(--onsig);
  flex: none;
  align-self: flex-start;
}

.tog {
  display: flex;
  gap: 2px;
  background: var(--g2);
  border: 1px solid var(--ctrl);
  border-radius: 2px;
  padding: 2px;
  flex: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.tog button {
  font: 600 12px/1 var(--sans);
  height: 30px;
  padding: 0 15px;
  border: 0;
  border-radius: 1px;
  background: transparent;
  color: var(--i2);
  cursor: pointer;
  font-family: var(--sans);
}

/* The pressed segment gets the amber hairline the design uses everywhere else to mean "this is
   the live one" (the lead plan, the selected radio row). The fill change alone measures 1.16:1
   against the track, which is not a state a sighted user can rely on. */
.tog button[aria-pressed="true"] {
  background: var(--g0);
  color: var(--i0);
  box-shadow:
    var(--e1),
    inset 0 0 0 1px var(--sig);
}

.pricing__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.trial {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--hair);
}

.trial h3 {
  font-size: 22px;
}

.trial p + p {
  margin-top: 14px;
}

.trial__lead {
  margin-top: 14px;
}

/* ─────────────────────────── FAQ ─────────────────────────── */

.faq {
  padding: 24px 0;
  border-bottom: 1px solid var(--hair);
}

.faq h3 {
  margin-bottom: 9px;
}

/* The dashed box the owner fills with real proof. The block itself is commented out in
   index.html — invented testimonials would cost more than the empty space does. */
.slot {
  border: 1px dashed var(--ctrl);
  border-radius: 3px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─────────────────────────── nav ─────────────────────────── */

.nav {
  border-bottom: 1px solid var(--hair);
  background: var(--g0);
}

.nav__bar {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  color: var(--i0);
}

.brand:hover {
  color: var(--i0);
}

.brand__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.brand__name--sm {
  font-size: 13px;
}

.spacer {
  flex: 1;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: none;
}

.navlinks a:not(.cta) {
  font-size: 14px;
  color: var(--i1);
}

.navlinks a:not(.cta):hover {
  color: var(--i0);
}

.navmenu {
  display: none;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
  flex: none;
}

.navmenu__toggle {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--i1);
  cursor: pointer;
  padding: 0;
}

.navpanel {
  display: none;
  border-top: 1px solid var(--hair);
  padding: 12px 0 20px;
}

.navpanel a {
  display: block;
  padding: 12px 0;
  font-size: 15px;
  color: var(--i1);
  border-bottom: 1px solid var(--hair);
}

.navpanel a:last-child {
  border-bottom: 0;
}

/* ─────────────────────────── hero illustration ─────────────────────────── */

.hero .lede {
  max-width: 52ch;
}

.lede--hero {
  font-size: var(--t-lede-hero);
}

.lede--under {
  font-size: var(--t-lede-sm);
  color: var(--i2);
  margin-top: 14px;
}

.shot {
  position: relative;
}

.editor {
  border: 1px solid var(--hair2);
  border-radius: 5px;
  overflow: hidden;
  box-shadow:
    0 30px 70px -30px rgba(0, 0, 0, 0.9),
    var(--e1);
}

.editor__tabs {
  height: 32px;
  background: #16181f;
  border-bottom: 1px solid #1f2430;
  display: flex;
  align-items: stretch;
}

.editor__tab {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-right: 1px solid #1f2430;
  font-family: var(--mono);
  font-size: 11px;
  color: #565f89;
}

.editor__tab--on {
  background: #0d1017;
  border-top: 1px solid #7aa2f7;
  color: #c0caf5;
}

.editor__body {
  position: relative;
  background: #0d1017;
  padding: 16px 0 24px;
}

.editor__rows {
  display: flex;
}

.editor__gutter {
  width: 44px;
  flex: none;
  text-align: right;
  padding-right: 12px;
}

.editor__gutter span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 21px;
  color: #333b52;
}

/* Clipped, not scrolled. The design scrolls this plate on a phone, but Chrome makes a scroll
   container keyboard-focusable when it has no focusable children, which would put a tab stop
   *inside* the aria-hidden figure — focusable-but-hidden, which axe flags and a screen-reader user
   cannot explain. It is a picture of an editor: clipping it loses nothing and keeps the page body
   from scrolling sideways just the same. */
.editor__code {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 21px;
  white-space: pre;
  overflow-x: hidden;
  color: #a9b1d6;
}

.tok-com {
  color: #4d5878;
}

.tok-said {
  color: #c0caf5;
}

.tok-kw {
  color: #7aa2f7;
}

.tok-punc {
  color: #a9b1d6;
}

.tok-type {
  color: #2ac3de;
}

.tok-caret {
  color: #ea8a18;
}

/* the anchor line: what the HUD is pointing at */
.tether {
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

.hud {
  margin: 26px 24px 0;
  background: var(--g1);
  border: 1px solid var(--hair2);
  border-radius: 5px;
  box-shadow: var(--e2);
  overflow: hidden;
}

.hud__keys {
  display: flex;
  gap: 6px;
  padding: 11px 11px 9px;
}

.hud__key {
  width: 40px;
  height: 40px;
  background: var(--g2);
  border: 1px solid var(--hair);
  border-radius: 2px;
  display: grid;
  place-items: center;
  color: var(--i1);
}

.hud__key--on {
  border-color: var(--sig);
  color: var(--sig);
}

.hud__hair {
  height: 1px;
  background: var(--hair);
}

.hud__status {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
}

.hud__time {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--i1);
}

.hud__held {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--i3);
}

/* ─────────────────────────── the one gesture ─────────────────────────── */

.step__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.step__no {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--sigink);
}

.step h3 {
  margin-top: 20px;
}

.step p.body {
  margin-top: 10px;
}

.step--live {
  border-color: color-mix(in oklch, var(--sig) 34%, var(--hair));
}

.step__metric {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--i2);
}

.step__big {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--i0);
}

.aside {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--hair);
  flex-wrap: wrap;
}

.aside p.body {
  flex: 1;
  min-width: 280px;
}

.aside__ptr {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--i3);
}

/* ─────────────────────────── the numbers ─────────────────────────── */

.stat__n {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.stat__n--ok {
  color: var(--ok);
}

.stat__unit {
  font-size: 17px;
  color: var(--i2);
}

.stat .ml {
  margin-top: 10px;
}

.stat p.body {
  margin-top: 7px;
}

/* ─────────────────────────── free-mode note ─────────────────────────── */

.note__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hair);
}

.note__count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--i3);
}

.note__body {
  padding: 22px;
}

.note__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--i0);
}

.ref {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 14px 0;
  padding: 11px 13px;
  background: var(--g2);
  border: 1px solid var(--hair);
  border-radius: 2px;
}

.ref svg {
  flex: none;
}

.ref span {
  flex: 1;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--i1);
}

.note__saved {
  display: flex;
  gap: 9px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 10.5px;
}

.note__saved span:first-child {
  color: var(--i3);
}

.note__saved span:last-child {
  color: var(--i2);
}

/* ─────────────────────────── share page ─────────────────────────── */

.share__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--hair);
  background: var(--g2);
}

.share__url {
  flex: 1;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--i1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share__copied {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--i3);
}

.share__body {
  padding: 20px;
}

.share__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.3;
}

.share__body p.body {
  margin-top: 10px;
}

.share__thumb {
  height: 118px;
  margin-top: 16px;
  background: var(--g2);
  border: 1px solid var(--hair);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.share__thumb span {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--i3);
}

.share__meta {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--i3);
}

/* ─────────────────────────── privacy ─────────────────────────── */

.callout {
  padding-left: 20px;
  border-left: 3px solid var(--sig);
}

.callout--ok {
  border-left-color: var(--ok);
}

.callout p.body {
  margin-top: 11px;
}

.subband {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--hair);
}

.radios {
  background: var(--g1);
  border: 1px solid var(--hair);
  border-radius: 3px;
  box-shadow: var(--e1);
  overflow: hidden;
}

.radios__list {
  padding: 8px;
}

.radio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  font-size: 14px;
  color: var(--i1);
}

.radio--on {
  grid-template-columns: auto 1fr auto;
  gap: 3px 12px;
  border: 1px solid var(--sig);
  border-radius: 2px;
  background: var(--g2);
  color: var(--i0);
  font-weight: 600;
}

.radio__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--hair2);
  display: grid;
  place-items: center;
}

.radio--on .radio__dot {
  border-color: var(--sig);
}

.radio__dot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sig);
}

.radios__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--hair);
  color: var(--sigink);
  background: color-mix(in oklch, var(--sig) 9%, transparent);
}

.radios__foot .led {
  background: currentColor;
}

.radios__foot .ml {
  color: currentColor;
}

/* ─────────────────────────── everything is a file ─────────────────────────── */

.files {
  background: var(--g1);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 22px 24px;
  box-shadow: var(--e1);
}

.files__root {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--i3);
}

.files dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.files div {
  display: flex;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
}

.files div:last-child {
  border-bottom: 0;
}

.files dt {
  flex: none;
  width: 150px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--i0);
}

.files dd {
  flex: 1;
  margin: 0;
  font-size: 13px;
  color: var(--i2);
}

/* ─────────────────────────── phones ─────────────────────────── */

.phones {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.phone {
  width: 250px;
  flex: none;
  background: var(--g0);
  border: 1px solid var(--hair2);
  border-radius: 22px;
  padding: 12px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}

.phone--back {
  margin-top: 52px;
  border-color: var(--hair);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
  opacity: 0.92;
}

.phone__notch {
  height: 34px;
}

.phone__foot {
  height: 22px;
}

.phone__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.phone__wm {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.19em;
}

.phone__host {
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone__host .led {
  width: 6px;
  height: 6px;
}

.phone__host span {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--i2);
}

.phone__target {
  margin-top: 10px;
  padding: 9px 10px;
  background: var(--g1);
  border: 1px solid var(--hair);
  border-radius: 2px;
}

.phone__target .ml {
  font-size: 8.5px;
  color: var(--i3);
}

.phone__target p.mn {
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--i0);
}

.phone__dial {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 20px auto 0;
}

.phone__dial > div {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.phone__dial .ml {
  font-size: 8.5px;
  color: var(--sigink);
}

.phone__dial .mn {
  margin: 0;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.phone__release {
  margin-top: 18px;
  height: 56px;
  background: var(--sig);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--onsig);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.phone__release b {
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.phone__release span {
  font-family: var(--mono);
  font-size: 8.5px;
  opacity: 0.72;
}

.phone__h {
  margin: 0 4px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.024em;
}

.phone__seg {
  display: flex;
  gap: 2px;
  margin-top: 12px;
  padding: 2px;
  background: var(--g2);
  border: 1px solid var(--hair);
  border-radius: 3px;
}

.phone__seg span {
  flex: 1;
  height: 26px;
  display: grid;
  place-items: center;
  font: 500 10px/1 var(--sans);
  color: var(--i2);
}

.phone__seg span.on {
  border-radius: 2px;
  background: var(--g0);
  font-weight: 600;
  color: var(--i0);
}

.phone__list {
  margin-top: 14px;
}

.phone__item {
  display: flex;
  gap: 9px;
  padding: 11px 0;
  border-bottom: 1px solid var(--g2);
}

.phone__item:last-child {
  border-bottom: 0;
}

.phone__icon {
  width: 24px;
  height: 24px;
  flex: none;
  background: var(--g2);
  border: 1px solid var(--hair);
  border-radius: 2px;
  display: grid;
  place-items: center;
}

.phone__icon--sig {
  border-color: color-mix(in oklch, var(--sig) 35%, transparent);
}

.phone__txt {
  flex: 1;
  min-width: 0;
}

.phone__txt b {
  display: block;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--i1);
}

.phone__txt b.lit {
  color: var(--i0);
}

.phone__txt span {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--i2);
  margin-top: 4px;
}

/* ─────────────────────────── extend ─────────────────────────── */

.snippet {
  margin: 18px 0 0;
  padding: 13px 15px;
  background: var(--g0);
  border: 1px solid var(--hair);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--i2);
  overflow-x: auto;
}

.snippet .k {
  color: var(--sigink);
}

.snippet .s {
  color: var(--ok);
}

.hook {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  padding: 11px 13px;
  background: var(--g0);
  border: 1px solid var(--hair);
  border-radius: 2px;
}

.hook__url {
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--i2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hook__code {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--i3);
}

.packs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.packs li {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 4px 8px;
  background: var(--g0);
  border: 1px solid var(--hair);
  border-radius: 2px;
  color: var(--i1);
}

.extend h3 + p.body {
  margin-top: 11px;
}

/* ─────────────────────────── final CTA ─────────────────────────── */

.band--final .segbar {
  height: 26px;
  justify-content: center;
  margin: 0 auto;
}

.band--final .lede {
  margin: 20px auto 0;
}

/* ─────────────────────────── footer ─────────────────────────── */

.foot {
  border-top: 1px solid var(--hair);
  padding: 56px 0 44px;
}

.foot__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
}

.foot p.body {
  margin-top: 16px;
  font-size: 13px;
  max-width: 34ch;
}

.foot__legal {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--i3);
}

.foot__cols .ml {
  margin-bottom: 16px;
}

.footlinks {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footlinks a {
  font-size: 13.5px;
  color: var(--i1);
}

.footlinks a:hover {
  color: var(--i0);
}

/* dappit.org is the only link that leaves the site. The mark is the cue; it is not an underline
   because these columns are already unambiguous as links by position. */
.ext {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.ext svg {
  align-self: center;
  color: var(--i3);
}

.ext:hover svg {
  color: var(--i0);
}

/* The waitlist is the quiet second path: download is still the one primary action. */
.waitlist {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--hair);
}

.waitlist__blurb {
  margin-top: 10px;
  max-width: 52ch;
}

.waitlist__form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.field {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
  height: 44px;
  padding: 0 13px;
  background: var(--g1);
  border: 1px solid var(--ctrl);
  border-radius: 3px;
  color: var(--i0);
  font: 400 14px/1 var(--sans);
}

.field::placeholder {
  color: var(--i3);
}

.cta--field {
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

.status {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--i2);
  min-height: 1.4em;
}

.status:empty {
  margin: 0;
  min-height: 0;
}

.status--ok {
  color: var(--ok);
}

.status--bad {
  color: var(--fault);
}

/* Off-screen, and out of the tab order and the a11y tree: a bot trap, not a field. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ─────────────────────────── responsive ─────────────────────────── */

@media (max-width: 1000px) {
  :root {
    --pad: 40px;
    --t-h2: 34px;
    --t-h2-sub: 34px;
    --t-h2-fit: 34px;
    --t-h2-close: 34px;
  }

  .cols2,
  .cols3,
  .cols4,
  .hero,
  .cols2--wide-right,
  .cols2--files,
  .cols2--phone,
  .cols2--trial,
  .cols2--faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .cols2--faq {
    gap: 0;
  }

  .band,
  .band--tight,
  .band--hero {
    padding: 72px 0;
  }

  .band--flush {
    padding: 0 0 72px;
  }

  .navlinks {
    display: none;
  }

  .navmenu {
    display: grid;
  }

  .navpanel[data-open="true"] {
    display: block;
  }

  .foot__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  :root {
    --pad: 20px;
    --t-h1: 34px;
    --t-h2: 27px;
    --t-h2-track: -0.024em;
    --t-h2-sub: 27px;
    --t-h2-fit: 27px;
    --t-h2-close: 27px;
    --t-h2-close-track: -0.024em;
    --t-lede: 16px;
    --t-lede-hero: 16px;
  }

  h1 {
    letter-spacing: -0.03em;
  }

  .band,
  .band--tight,
  .band--hero {
    padding: 56px 0;
  }

  .band--flush {
    padding: 0 0 56px;
  }

  .price {
    font-size: 32px;
  }

  /* Wide content scrolls in its own box; the page body never scrolls sideways. */
  .scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .scroller table {
    min-width: 600px;
  }

  /* Eight mode cards stacked is a scroll marathon — two up reads far better on a phone. */
  .cols4.tight {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .cols4.tight .modecard {
    padding: 16px;
    gap: 10px;
  }

  .cols4.tight h3 {
    font-size: 16px;
  }

  /* The privacy table's four fixed columns add up to 580px, which leaves nothing for the widest
     one inside a 600px table. On a phone let the browser distribute the 600px instead. */
  .col-what,
  .col-where,
  .col-when {
    width: auto;
  }

  .phones {
    flex-direction: column;
    align-items: center;
  }

  .foot__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* ─────────────────────────── preferences ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cta:hover {
    transform: none;
  }
}

/* The AAA path, without touching the default look: open the ink ramp back up and drop the grain. */
@media (prefers-contrast: more) {
  :root {
    --i1: #dedbd9;
    --i2: #b8b5b2;
    --i3: #b8b5b2;
    --ctrl: #8a8683;
    --hair: #55504c;
  }

  .paper {
    --i1: #262320;
    --i2: #3a3632;
    --i3: #3a3632;
    --sigink: #8f4207;
    --ctrl: #6d6863;
    --hair: #a9a49d;
  }

  .grain {
    display: none;
  }
}