/* CurveNumber, public pages.

   The application is a tool: dense, scanned, operated. These pages are read,
   once, by somebody deciding whether to trust the thing. So the palette, the
   type and the three theme states are the application's, unchanged, and the
   proportions are not: a wider measure, a serif for the argument, and room
   around the artefacts.

   The one idea in this stylesheet is the specimen. Anything shown here is a
   real thing out of the product, framed and labelled with where it came
   from, in the same way the product labels its own figures. Nothing on these
   pages is an illustration of a feature. */

/* ---------- tokens: the application's, verbatim ---------- */
:root {
  --ground: #f5f4f0;
  --surface: #ffffff;
  --sunk: #efeee8;
  --line: #dfdcd3;
  --line-strong: #c6c2b6;
  --ink: #1e2320;
  --ink-mid: #5a5f58;
  --ink-soft: #82867d;
  --accent: #26696c;
  --accent-soft: #e2edec;
  --accent-line: #9dc2c1;
  --ochre: #9c5f2b;
  --ochre-soft: #f3e7db;
  --ochre-line: #d6ac83;
  --red: #9b3226;
  --red-soft: #f7e4e1;
  --shadow: 0 1px 2px rgba(30,35,32,.05), 0 4px 14px rgba(30,35,32,.05);
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* A screenshot is a photograph of something that happened, so it does not
     invert with the theme. The mat behind it does: in light it is a shade of
     paper, in dark it is the panel surface, so a white specimen reads as a
     printed page laid on the page rather than as a hole burned in it. */
  --paper: #fbfaf7;
  --paper-line: #d9d5cb;
  --measure: 34rem;
}

/* --ink-soft is 3.4 to 1 on the light ground, which the application can carry
   because its soft text is one-word column labels beside the figure they
   label. These pages set whole sentences at 10 and 11 px, so everything that
   is read rather than glanced at takes --ink-mid, at 5.9 to 1, and --ink-soft
   is left to the one place it still belongs: the DEFAULTED chip, where the
   word is deliberately the quietest of the three provenance states. */
:root {
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #151917; --surface: #1d2220; --sunk: #262b28;
    --line: #333935; --line-strong: #4a514c;
    --ink: #e9e7e0; --ink-mid: #a8ada4; --ink-soft: #848a80;
    --accent: #5fafb0; --accent-soft: #1e3234; --accent-line: #356f71;
    --ochre: #d3924f; --ochre-soft: #33261a; --ochre-line: #7a5730;
    --red: #d98276; --red-soft: #331e1b;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
    --paper: #1d2220; --paper-line: #3f4642;
  }
}
:root[data-theme="dark"] {
  --ground: #151917; --surface: #1d2220; --sunk: #262b28;
  --line: #333935; --line-strong: #4a514c;
  --ink: #e9e7e0; --ink-mid: #a8ada4; --ink-soft: #848a80;
  --accent: #5fafb0; --accent-soft: #1e3234; --accent-line: #356f71;
  --ochre: #d3924f; --ochre-soft: #33261a; --ochre-line: #7a5730;
  --red: #d98276; --red-soft: #331e1b;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  --paper: #1d2220; --paper-line: #3f4642;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
a:hover { border-bottom-color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.012em; }
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); line-height: 1.1; margin: 0 0 1rem; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); line-height: 1.2; margin: 0 0 .75rem; }
h3 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 .4rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: .45rem; }
strong { font-weight: 600; }
code, .mono { font-family: var(--mono); font-size: .875em; }

/* ---------- shell ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.col { max-width: var(--measure); }
.col-wide { max-width: 46rem; }

.site-header {
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1.25rem; padding-top: .9rem; padding-bottom: .9rem;
}
.brand {
  font-family: var(--serif); font-weight: 700; font-size: 1.2rem;
  letter-spacing: -.015em; color: var(--ink); border: 0;
}
.brand span { color: var(--accent); }
.brand.sm { font-size: 1.05rem; }
/* A sans heading inside a reading column, one step below the section head. */
.h-sub { font-family: var(--serif); font-size: 1.15rem; }
.site-nav { display: flex; align-items: center; gap: .2rem; margin-left: auto; flex-wrap: wrap; }
.site-nav a {
  font-size: 13.5px; color: var(--ink-mid); border: 1px solid transparent;
  padding: .35rem .65rem; border-radius: 2px;
}
.site-nav a:hover { background: var(--sunk); color: var(--ink); }
.site-nav a[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line);
}
.theme-toggle {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-mid); background: none; border: 1px solid var(--line); border-radius: 2px;
  padding: .35rem .55rem; cursor: pointer; flex: 0 0 auto;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }

main { display: block; }
section { padding: 3.4rem 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
.section-tight { padding: 2.4rem 0; }

.eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-mid); margin: 0 0 .9rem;
}
.eyebrow.accent { color: var(--accent); }
.eyebrow.warn { color: var(--ochre); }
.lede { font-size: 1.14rem; line-height: 1.58; color: var(--ink-mid); }
.lede strong { color: var(--ink); font-weight: 600; }
.note { font-size: .875rem; line-height: 1.6; color: var(--ink-mid); }
.muted { color: var(--ink-soft); }

/* ---------- provenance line: where a claim on this page came from ---------- */
/* The product's whole argument is that a figure without a source is not a
   figure. A page making that argument cites itself. */
.from {
  font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-mid);
  border-left: 2px solid var(--line-strong); padding-left: .55rem; margin: -.3rem 0 1.25rem;
  word-break: break-word;
}

/* ---------- hero ---------- */
.hero { padding: 3.6rem 0 3.2rem; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 3rem; align-items: start;
}
.hero h1 { max-width: 13ch; }
.hero .lede { max-width: 32rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1.6rem; }
.btn {
  font-family: var(--sans); font-size: 14.5px; font-weight: 500; padding: .6rem 1.1rem;
  border-radius: 2px; cursor: pointer; display: inline-block; border: 1px solid var(--accent);
}
.btn.primary { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .btn.primary { color: #10201f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.primary { color: #10201f; }
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--ink-mid); border-color: var(--line-strong); }
.btn.ghost:hover { color: var(--accent); border-color: var(--accent); }
.price-line { font-size: .9rem; color: var(--ink-mid); margin-top: .9rem; }

/* ---------- specimen: a real artefact, framed and labelled ---------- */
.spec { margin: 0; }
.spec-frame {
  background: var(--paper); border: 1px solid var(--paper-line); box-shadow: var(--shadow);
  padding: .5rem; border-radius: 2px;
}
.spec-frame img { border: 1px solid rgba(30,35,32,.07); }
.spec-cap {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.55; color: var(--ink-mid);
  margin-top: .55rem; letter-spacing: .01em;
}
.spec-cap b { color: var(--ink); font-weight: 500; }

/* ---------- three mechanics ---------- */
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.mech {
  border-top: 3px solid var(--accent); background: var(--surface);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line); padding: 1.1rem; box-shadow: var(--shadow);
}
.mech.defaulted { border-top-color: var(--line-strong); }
.mech.overridden { border-top-color: var(--ochre); }
.mech .origin { margin-bottom: .6rem; }
.mech h3 { font-family: var(--sans); font-size: .98rem; font-weight: 600; }
.mech p { font-size: .9rem; color: var(--ink-mid); margin-bottom: .7rem; }
.mech .sample {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--ink);
  background: var(--sunk); border: 1px solid var(--line); padding: .55rem .6rem;
  word-break: break-word;
}

.origin {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 2px; border: 1px solid;
}
.origin.derived { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.origin.defaulted { color: var(--ink-soft); border-color: var(--line-strong); background: transparent; }
.origin.overridden { color: var(--ochre); border-color: var(--ochre-line); background: var(--ochre-soft); }

/* ---------- verbatim: text lifted out of the codebase ---------- */
.verbatim {
  border-left: 3px solid var(--red); background: var(--red-soft);
  padding: .9rem 1.1rem; margin: 0 0 1.2rem;
}
.verbatim.warn { border-left-color: var(--ochre); background: var(--ochre-soft); }
.verbatim.quiet { border-left-color: var(--line-strong); background: var(--sunk); }
.verbatim .head {
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--red); margin-bottom: .45rem;
}
.verbatim.warn .head { color: var(--ochre); }
.verbatim.quiet .head { color: var(--ink-mid); }
.verbatim p { font-size: .93rem; line-height: 1.6; color: var(--ink-mid); margin-bottom: .6rem; }
.verbatim p:last-child { margin-bottom: 0; }

/* ---------- split layouts ---------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem; align-items: start;
}
.split.narrow-left { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.split.wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }

/* ---------- data list ---------- */
.rows { border-top: 1px solid var(--line-strong); margin-top: 1.4rem; }
.row-item {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem;
  padding: .95rem 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.row-item .k { font-weight: 600; font-size: .95rem; }
.row-item .k span {
  display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  color: var(--ink-mid); margin-top: .15rem; letter-spacing: .02em; word-break: break-word;
}
.row-item .v { font-size: .93rem; color: var(--ink-mid); }

/* ---------- figures ---------- */
.figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 1.8rem 0 0; }
.fig-card { border-top: 1px solid var(--line-strong); padding-top: .8rem; }
.fig-n {
  font-family: var(--mono); font-size: 1.85rem; font-weight: 600; line-height: 1;
  letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.fig-n small { font-size: .95rem; font-weight: 400; color: var(--ink-mid); letter-spacing: 0; }
.fig-l { font-size: .875rem; color: var(--ink-mid); margin-top: .5rem; }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.plan {
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 1.5rem;
}
.plan.lead { border-top: 3px solid var(--accent); }
.plan .amount {
  font-family: var(--mono); font-size: 2.3rem; font-weight: 600; letter-spacing: -.035em;
  color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums;
}
.plan .amount small { font-size: .9rem; font-weight: 400; color: var(--ink-mid); letter-spacing: 0; }
.plan h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600; margin-bottom: .8rem; }
.plan p { font-size: .9rem; color: var(--ink-mid); margin: .9rem 0 0; }

/* ---------- legal documents ---------- */
.doc { padding: 2.6rem 0 3.4rem; }
.doc h1 { font-size: 2.1rem; }
.doc .col-wide { max-width: 43rem; }
.draft-banner {
  border: 1px solid var(--ochre-line); border-left: 3px solid var(--ochre);
  background: var(--ochre-soft); padding: 1rem 1.15rem; margin-bottom: 2.2rem;
}
.draft-banner .head {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ochre); margin-bottom: .45rem;
}
.draft-banner p { font-size: .93rem; color: var(--ink-mid); margin-bottom: .6rem; }
.draft-banner p:last-child { margin-bottom: 0; }

.doc h2.first { border-top: 0; padding-top: 0; margin-top: 2.4rem; }
.doc h2 {
  font-size: 1.3rem; margin-top: 2.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: flex; gap: .8rem; align-items: baseline;
}
.doc h2 .n {
  font-family: var(--mono); font-size: .82rem; font-weight: 400; color: var(--ink-mid);
  flex: 0 0 auto; padding-top: .15rem;
}
.doc h3 { margin-top: 1.6rem; font-family: var(--sans); font-size: 1rem; font-weight: 600; }
.doc p, .doc li { font-size: .97rem; }
.doc .meta {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mid); letter-spacing: .02em;
  margin-bottom: 1.6rem;
}
.toc {
  background: var(--sunk); border: 1px solid var(--line); padding: 1rem 1.15rem;
  margin-bottom: 2rem;
}
.toc ol { margin: 0; padding-left: 1.3rem; column-count: 2; column-gap: 2rem; }
.toc li { margin-bottom: .3rem; font-size: .9rem; }
@media (max-width: 640px) { .toc ol { column-count: 1; } }

/* A placeholder wraps like any other text. An early draft held it on one line
   so it would read as a single token, and a long instruction to the lawyer
   then pushed the page four times wider than the viewport. */
.ph {
  font-family: var(--mono); font-size: .84em; letter-spacing: .02em; line-height: 1.5;
  color: var(--ochre); background: var(--ochre-soft);
  border: 1px dashed var(--ochre-line); border-radius: 2px; padding: 1px 5px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.ph-list { border: 1px solid var(--ochre-line); background: var(--ochre-soft); padding: 1.1rem 1.25rem; }
/* Inside the ochre box the chips would otherwise sit on their own fill and
   disappear, so they take the surface instead. */
.ph-list .ph { background: var(--surface); }
.ph-list ul { margin-bottom: 0; }
.ph-list li { font-size: .92rem; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line); background: var(--surface); padding: 2.2rem 0 2.8rem;
  margin-top: 0;
}
.foot-grid { display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: flex-start; }
.foot-links { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-left: auto; }
.foot-links a { font-size: .88rem; color: var(--ink-mid); border-bottom-color: var(--line-strong); }
.foot-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.disclaimer {
  font-size: .8rem; color: var(--ink-mid); line-height: 1.65; max-width: 46rem;
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .split, .split.narrow-left, .split.wide-left { grid-template-columns: 1fr; gap: 2.2rem; }
  .tri, .figs, .plans { grid-template-columns: 1fr; gap: 1.2rem; }
  .row-item { grid-template-columns: 1fr; gap: .3rem; }
  .hero h1 { max-width: none; }
}
@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 1.1rem; }
  section { padding: 2.6rem 0; }
  .hero { padding: 2.4rem 0; }
  .site-header .wrap { flex-wrap: wrap; gap: .6rem; }
  .site-nav { margin-left: 0; width: 100%; order: 3; }
  .theme-toggle { margin-left: auto; }
  .foot-links { margin-left: 0; width: 100%; }
}