/* ---------------------------------------------------------------------------
   Dark-first, because the app is. The bare :root carries the complete dark
   palette; light is redefined at token level in both the media query and the
   explicit stamp, so a viewer's OS setting and a viewer's toggle each win in
   the direction they should.
   --------------------------------------------------------------------------- */
:root {
  --ground:   #12131F;
  --surface:  #1D1F2B;
  --inset:    #171926;
  --ink:      #E9E9ED;
  --muted:    #9A9AA8;
  --dim:      #8585A0;
  --hair:     #2A2C3A;
  --accent:   #9184D9;
  --accent-soft: rgba(145, 132, 217, 0.14);
  --on-accent: #141521;
  --shadow:   0 24px 60px rgba(0, 0, 0, 0.45);

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 62ch;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:   #F5F4F8;
    --surface:  #FFFFFF;
    --inset:    #EDECF3;
    --ink:      #1B1C28;
    --muted:    #5A5A6B;
    --dim:      #68687F;
    --hair:     #E0DFE9;
    --accent:   #6B5BC4;
    --accent-soft: rgba(107, 91, 196, 0.10);
    --on-accent: #FFFFFF;
    --shadow:   0 24px 60px rgba(27, 28, 40, 0.12);
  }
}

:root[data-theme="light"] {
  --ground:   #F5F4F8;
  --surface:  #FFFFFF;
  --inset:    #EDECF3;
  --ink:      #1B1C28;
  --muted:    #5A5A6B;
  --dim:      #68687F;
  --hair:     #E0DFE9;
  --accent:   #6B5BC4;
  --accent-soft: rgba(107, 91, 196, 0.10);
  --on-accent: #FFFFFF;
  --shadow:   0 24px 60px rgba(27, 28, 40, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

img { max-width: 100%; height: auto; display: block; }

/* --- shared shell ------------------------------------------------------- */

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Hairlines run edge to edge, like the rules on a logbook page. They are the
   page's only structural device, so sections need no boxes of their own. */
.rule {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

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

h1 {
  font-size: clamp(38px, 6.6vw, 76px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

h2 {
  font-size: clamp(27px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.1;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

p { margin: 0; max-width: var(--measure); }

.lede { font-size: clamp(17px, 1.9vw, 20px); color: var(--muted); line-height: 1.62; }
.body { color: var(--muted); }

section { padding-block: clamp(56px, 8vw, 104px); }

/* --- masthead ----------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 20px;
}

.mark {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 19px;
  text-decoration: none;
}

.mark-glyph {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}

.mark-glyph svg { width: 16px; height: 16px; }

.masthead-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.02em;
}

/* --- hero --------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 92px);
}

.hero-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }

.hero h1 .quiet { color: var(--dim); }

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hero-facts li {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 6px 12px;
}

.shot {
  border-radius: 22px;
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
  background: var(--surface);
  overflow: hidden;
}

.hero-shot { max-width: 330px; margin-inline: auto; }

/* --- the ledger: the page's one loud moment ----------------------------- */

.ledger-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 34px; }

.ledger-scroll { overflow-x: auto; }

table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  min-width: 460px;
}

table.ledger th {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: left;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--hair);
}

table.ledger th:last-child, table.ledger td:last-child { text-align: right; }

table.ledger td {
  padding: 17px 0;
  border-bottom: 1px solid var(--hair);
  vertical-align: baseline;
}

table.ledger td:first-child {
  font-weight: 600;
  letter-spacing: -0.012em;
  padding-right: 20px;
}

table.ledger td:last-child {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent);
  white-space: nowrap;
  padding-left: 20px;
}

.ledger-note { padding-top: 22px; font-size: 15px; }

/* --- feature rows ------------------------------------------------------- */

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

/* Reordering alone moves the content but not the column widths, which handed
   the text the narrow column and left the shot rattling around in the wide one.
   The track sizes have to swap with it. */
.row.flip { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); }
.row.flip .row-media { order: -1; }

.row-copy { display: flex; flex-direction: column; gap: 16px; }

.row-media { max-width: 300px; width: 100%; margin-inline: auto; }

/* --- three-up ----------------------------------------------------------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
  margin-top: 34px;
}

.cell {
  background: var(--ground);
  padding: 26px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cell .tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.cell p { font-size: 15px; }

/* --- build -------------------------------------------------------------- */

/* --- status ------------------------------------------------------------- */

.status {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--hair);
  border-radius: 20px;
  background: var(--surface);
}

.status-flag {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  padding: 5px 12px;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }

.btn {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  color: var(--ink);
  background: var(--inset);
  transition: border-color 140ms ease, transform 140ms ease;
}

.btn:hover { border-color: var(--accent); transform: translateY(-1px); }

.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 500;
}

footer {
  padding-block: 34px 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
}

footer a { color: var(--muted); text-underline-offset: 3px; }

/* --- motion, held back -------------------------------------------------- */

/* Gated on .js, which is set by an inline script before paint. Without that
   guard a page whose script never runs — blocked, or an environment with no
   IntersectionObserver — renders every section at opacity 0, which is to say
   blank. Content is visible by default and the animation is the enhancement. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  * { animation: none !important; }
}

/* --- narrow ------------------------------------------------------------- */

/* Narrow enough that the screenshot has to give up width, wide enough that
   pairing it with its paragraph still works. This covers the side-panel and
   tablet widths where the page is most often read, and stacking there would
   put every screenshot a scroll away from the text explaining it. */
@media (max-width: 900px) {
  .hero, .row {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
    gap: clamp(20px, 3.4vw, 40px);
  }
  .row.flip { grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr); }
  .row-media, .hero-shot { max-width: 215px; }
  .hero { padding-block: 40px 68px; }
}

/* An actual phone. Below this the text column stops holding a readable line,
   so the two columns become one and the shot goes under its paragraph. */
@media (max-width: 620px) {
  .hero, .row, .row.flip { grid-template-columns: minmax(0, 1fr); }

  /* The ledger's whole point is the right-hand column, and at this width a
     scrolling table hides it off the edge - the answer sits under its own row
     instead. The header row is kept for screen readers, which still need it to
     make sense of the pairs. */
  table.ledger { min-width: 0; }
  table.ledger thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  table.ledger tr {
    display: grid;
    gap: 3px;
    padding: 15px 0;
    border-bottom: 1px solid var(--hair);
  }
  table.ledger td, table.ledger td:first-child, table.ledger td:last-child {
    border: 0;
    padding: 0;
    text-align: left;
  }
  .row.flip .row-media { order: 0; }
  .hero { padding-block: 30px 52px; }
  .row-media, .hero-shot { max-width: 250px; }
}

/* ---------------------------------------------------------------------------
   Document pages — privacy and support. Same palette and type, narrower
   measure, no screenshots. These are read to answer a question, not browsed,
   so the structure is headings and prose rather than paired columns.
   --------------------------------------------------------------------------- */

.doc { max-width: 720px; padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }

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

.doc-date {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--dim);
  letter-spacing: 0.02em;
}

.doc h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
}

.doc h3 { margin-top: 28px; font-size: 16.5px; }

.doc p, .doc li { max-width: none; color: var(--muted); }

.doc p + p, .doc h3 + p, .doc h2 + p { margin-top: 12px; }

.doc ul { margin: 12px 0 0; padding-left: 0; list-style: none; display: grid; gap: 12px; }

/* Marked with a short rule rather than a bullet, matching the hairlines the
   rest of the site is built from. */
.doc li { padding-left: 20px; position: relative; }

.doc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

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

.doc a { color: var(--accent); text-underline-offset: 3px; }

/* The one thing on these pages that must not be skimmed past. */
.callout {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--accent-soft);
}

.callout p { color: var(--ink); font-size: 15px; }

.back { font-family: var(--mono); font-size: 12px; color: var(--dim); text-decoration: none; }

.back:hover { color: var(--accent); }

/* A block of text meant to be read as text and copied verbatim — a split, or a
   prompt to hand an assistant. Scrolls inside itself so a long movement name
   never makes the page scroll sideways. */
.spec {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--accent-soft);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink);
  white-space: pre;
  overflow-x: auto;
}

.spec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
}
.spec-head h3 { margin-top: 0; }

/* Written in by the copy script, so nothing offers a button that cannot work. */
.copy {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  background: none;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 5px 11px;
  cursor: pointer;
  flex: none;
}
.copy:hover { color: var(--accent); border-color: var(--accent); }
.copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Inline literals — a movement name, a rep target — set apart from the prose
   around them without shouting. */
.doc code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--ink);
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 1px 5px;
}

/* Prose that happens to be monospaced — a prompt is read, not parsed, so it
   wraps. The split example above it does not: there, the line breaks are the
   format. */
.spec-wrap { white-space: pre-wrap; }