/* ============================================================================
   Compel — marketing site
   Implements system/03-web.md on system/tokens.css. No colour, radius or
   typeface is invented here; everything resolves through the token layer.
   ============================================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: var(--ring-w) solid var(--ring-color);
  outline-offset: var(--ring-o);
}

/* --- Grid ---------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (max-width: 720px) { .wrap { padding-inline: var(--space-4); } }

section { padding-block: var(--space-20); }
@media (max-width: 720px) { section { padding-block: var(--space-14); } }

.band { background: var(--accent-tint); }
.band-sunk { background: var(--sunk); }

.prose { max-width: 74ch; }

/* --- Type ---------------------------------------------------------------- */

h1, h2, h3 {
  margin: 0;
  font-weight: var(--weight-black);
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.eyebrow {
  margin: 0;
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

h1 { font-size: var(--text-hero); line-height: 1.03; max-width: 20ch; }
h2 { font-size: var(--text-display); }
h3 { font-size: var(--text-title-sm); letter-spacing: var(--track-title); }

.statement {
  font-size: var(--text-display);
  max-width: 30ch;
  text-wrap: balance;
}

.lede {
  margin: 0;
  font-size: var(--text-body-lg);
  color: var(--ink-2);
  max-width: 60ch;
}

p { margin: 0; }
.stack > * + * { margin-block-start: var(--space-4); }

.tagline {
  font-family: var(--font-serif);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  line-height: var(--leading-snug);
  color: var(--ink);
  margin: 0;
}

.micro {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

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

@media (max-width: 900px) {
  h1 { font-size: var(--text-display-lg); }
  h2, .statement { font-size: var(--text-display-sm); }
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  font: inherit;
  font-size: var(--text-body);
  font-weight: var(--button-weight);
  letter-spacing: 0;
  padding: var(--button-pad-y) var(--button-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--button-bg);
  color: var(--button-ink);
  box-shadow: var(--button-shadow);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-color) var(--ease-inout),
              transform var(--dur-move) var(--ease-out);
}
.btn:hover { color: var(--button-ink); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-control);
  box-shadow: none;
}
.btn-ghost:hover { color: var(--ink); background: var(--surface); }

/* --- Lockup -------------------------------------------------------------- */

.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--lockup-gap);
  font-size: 22px;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.lockup:hover { color: var(--ink); }
.lockup .mark {
  width: calc(1em * var(--lockup-mark-scale));
  height: calc(1em * var(--lockup-mark-scale));
  color: var(--lockup-mark);
  flex: none;
}
.lockup .word {
  font-weight: var(--lockup-weight);
  letter-spacing: var(--lockup-tracking);
  color: var(--lockup-letters);
}
.lockup .word i { font-style: normal; color: var(--lockup-period); }

/* --- Nav ----------------------------------------------------------------- */

.nav {
  border-block-end: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-4);
}
.nav-links {
  display: flex;
  gap: var(--space-6);
  margin-inline-start: var(--space-4);
}
.nav-links a, .nav-right a:not(.btn) {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--ink-2);
  text-decoration: none;
}
.nav-links a:hover, .nav-right a:not(.btn):hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--accent-text); }
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-inline-start: auto;
}
.mode-btn {
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  padding: 5px 9px;
  cursor: pointer;
}
.mode-btn:hover { color: var(--ink); }
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-in { gap: var(--space-4); }
}

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: var(--space-20) var(--space-14); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-14);
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: var(--space-5); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero .tagline { padding-block-start: var(--space-2); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
}

/* --- Proof ---------------------------------------------------------------
   One figure now rather than a divided row of four, so it gets the room and
   the size that a single claim deserves. */

.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  border-block-start: 1px solid var(--line);
  padding-block: var(--space-6);
}
.proof b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-display-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.proof span {
  font-size: var(--text-body-lg);
  color: var(--ink-2);
  line-height: var(--leading-snug);
}
@media (max-width: 720px) {
  .proof b { font-size: var(--text-display); }
}

/* --- Panel (the product surface) ----------------------------------------- */

.panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-5);
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--line);
}
.panel-title {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-title);
}
.chip {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius);
  background: var(--sunk);
  color: var(--ink-3);
  white-space: nowrap;
}
.chip-caution { background: var(--caution-tint); color: var(--caution); }
.chip-positive { background: var(--positive-tint); color: var(--positive); }
.chip-accent { background: var(--accent-tint); color: var(--accent-on-tint); }

/* --- Gauge: the system signature. Target is a tick, not a hue. ----------- */

.gauges { display: flex; flex-direction: column; gap: var(--space-4); padding-block-start: var(--space-4); }
.gauge-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: center; }
.gauge-label { font-size: var(--text-ui); font-weight: var(--weight-semibold); }
.gauge-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  color: var(--ink-2);
}
.gauge {
  grid-column: 1 / -1;
  position: relative;
  height: var(--gauge-h);
  background: var(--gauge-rail);
  border-radius: var(--radius-bar);
}
.gauge i {
  display: block;
  height: 100%;
  background: var(--gauge-fill);
  border-radius: var(--radius-bar);
}
.gauge.under i { background: var(--gauge-under); }
.gauge b {
  position: absolute;
  inset-block: -3px;
  width: 2px;
  background: var(--gauge-mark);
}

.panel-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
  font-size: var(--text-caption);
  color: var(--ink-3);
}
.key { display: inline-flex; align-items: center; gap: 6px; }
.key::before {
  content: "";
  width: 2px;
  height: 11px;
  background: var(--gauge-mark);
}
.key.fill::before { width: 11px; height: 9px; background: var(--gauge-fill); }
.key.under::before { width: 11px; height: 9px; background: var(--gauge-under); }

/* --- Split --------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-14);
  align-items: start;
}
.split-copy { display: flex; flex-direction: column; gap: var(--space-5); max-width: 52ch; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } }

/* --- Section head -------------------------------------------------------- */

.sec-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 62ch; }

/* --- Table (source library) ---------------------------------------------- */

.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-ui); min-width: 360px; }
th {
  text-align: left;
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-block-end: 1px solid var(--line);
}
td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-block-end: 1px solid var(--line);
  color: var(--ink-2);
}
tr:last-child td { border-block-end: 0; }
td:first-child { color: var(--ink); font-weight: var(--weight-semibold); }
th:last-child, td:last-child { padding-inline-end: 0; text-align: right; }

/* --- CTA ----------------------------------------------------------------- */

.cta-in { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; max-width: 54ch; }

/* --- Footer -------------------------------------------------------------- */

footer { border-block-start: 1px solid var(--line); padding-block: var(--space-10); }
.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
}
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.foot-links a {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--ink-2);
  text-decoration: none;
}
.foot-links a:hover { color: var(--ink); }
.foot-note { font-size: var(--text-caption); color: var(--ink-3); }

/* --- Skip link ----------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  background: var(--surface);
  color: var(--ink);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  z-index: 20;
}
.skip:focus { left: var(--space-4); }

/* --- Early access banner -------------------------------------------------
   The one loud thing on the page. Accent fill, so everything below it can
   stay quiet. --accent-ink flips with the mode; never hardcode white here. */

.ea {
  background: var(--accent);
  color: var(--accent-ink);
}
.ea-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
}
.ea-tag {
  font-size: var(--text-micro);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  white-space: nowrap;
}
.ea-text {
  font-size: var(--text-title-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-title);
  line-height: var(--leading-snug);
}
.ea-link {
  margin-inline-start: auto;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.ea-link:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }
@media (max-width: 720px) {
  .ea-text { font-size: var(--text-body-lg); }
  .ea-link { margin-inline-start: 0; }
}

/* --- Campaign lift rows --------------------------------------------------
   Not a table: three metrics, each a name, a before/after and a delta. The
   arrow takes the accent so the direction reads before the numbers do. */

/* Side-by-side screens share a bottom edge; the lift rows spread to fill the
   taller neighbour rather than leaving a gap under the last one. */
.split-panels { align-items: stretch; }
.split-panels > .panel { display: flex; flex-direction: column; }

.lift {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding-block-start: var(--space-2);
}
.lift-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--line);
}
.lift-row:last-child { border-block-end: 0; }
.lift-name { font-size: var(--text-body); color: var(--ink-2); }
.lift-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-title-sm);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.lift-val i { font-style: normal; color: var(--accent-text); }
.lift-row .chip { align-self: center; }
@media (max-width: 420px) {
  .lift-row { grid-template-columns: minmax(0, 1fr) auto; }
  .lift-row .chip { grid-column: 2; }
}

/* --- Campaign chart ------------------------------------------------------
   Two series on one 0-100% axis, both direct-labelled. The system's chart
   ramp sits at protan dE 7.2, inside the band where a series must also be
   named at the mark, so the labels are required and not decoration. */

.chart-fig { margin: 0; position: relative; }
.chart-scroll { overflow-x: auto; }
.chart-svg { display: block; width: 100%; height: auto; }

/* Below ~760px the chart would render under 330px wide, which puts the direct
   labels near 5px. The labels are required (see the note above), so the chart
   keeps a legible minimum and scrolls inside its own box instead — the same
   thing the tables on this page do. Hover is a pointer affordance, so the
   tooltip goes with it. */
@media (max-width: 760px) {
  .chart-svg { min-width: 700px; }
  .chart-tip { display: none; }
}

.chart-svg .grid { stroke: var(--line); stroke-width: 1; }
.chart-svg .axis-label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.chart-svg .series-1 { stroke: var(--chart-1); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .series-2 { stroke: var(--chart-2); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .end-1 { fill: var(--chart-1); stroke: var(--surface); stroke-width: 2; }
.chart-svg .end-2 { fill: var(--chart-2); stroke: var(--surface); stroke-width: 2; }
.chart-svg .series-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  fill: var(--ink-2);
}
.chart-svg .series-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: var(--weight-bold);
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.chart-svg .marker { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-svg .marker-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  fill: var(--ink-3);
}
.chart-svg .crosshair {
  stroke: var(--ink-3);
  stroke-width: 1;
  opacity: 0;
  transition: opacity var(--dur-color) var(--ease-out);
}
.chart-svg .hover-dot {
  opacity: 0;
  stroke: var(--surface);
  stroke-width: 2;
  transition: opacity var(--dur-color) var(--ease-out);
}
.chart-svg .hover-1 { fill: var(--chart-1); }
.chart-svg .hover-2 { fill: var(--chart-2); }

.chart-tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  box-shadow: var(--elevation-1);
  padding: var(--space-2) var(--space-3);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.chart-tip .tip-head {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.chart-tip dl { margin: var(--space-2) 0 0; display: grid; grid-template-columns: auto auto; gap: 2px var(--space-4); }
.chart-tip dt { font-size: var(--text-caption); color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.chart-tip dt::before { content: ""; width: 9px; height: 9px; flex: none; }
.chart-tip .k-1::before { background: var(--chart-1); }
.chart-tip .k-2::before { background: var(--chart-2); }
.chart-tip dd {
  margin: 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Legend is always present for two series, independent of the direct labels. */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-caption); color: var(--ink-2); }
.legend span::before { content: ""; width: 11px; height: 3px; flex: none; }
.legend .l-1::before { background: var(--chart-1); }
.legend .l-2::before { background: var(--chart-2); }

.chart-numbers { margin-block-start: var(--space-4); }
.chart-numbers summary {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--ink-3);
  cursor: pointer;
}
.chart-numbers summary:hover { color: var(--ink-2); }
.chart-numbers .tbl-wrap { margin-block-start: var(--space-3); }

/* Delta figures beside the chart copy. */
.deltas { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.delta b {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-display-sm);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.delta span { display: block; margin-block-start: var(--space-1); font-size: var(--text-caption); color: var(--ink-2); }
.delta i { font-style: normal; color: var(--accent-text); }

/* --- The three inputs ----------------------------------------------------
   A comparison, so the three columns are genuinely parallel objects and get
   identical edges. The third is the argument, so it takes the accent border
   and tint; the other two stay flat. That is the hierarchy, not decoration. */

.compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-10);
  align-items: stretch;
}
.compare-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.compare-col.win {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.compare-col h3 { font-size: var(--text-title-sm); }
.compare-col.win h3 { color: var(--accent-on-tint); }
.compare-sub {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.compare-col.win .compare-sub { color: var(--accent-on-tint); }
.compare-col p { font-size: var(--text-body); color: var(--ink-2); }
.compare-col.win p { color: var(--accent-on-tint); }
.compare-col .chip { align-self: flex-start; margin-block-start: auto; padding-block-start: var(--space-1); }
.compare-col .chip { margin-block-start: var(--space-4); }
@media (max-width: 860px) {
  .compare { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* Chart section: copy sits beside the headline figures, chart takes the full
   grid below. In a 6/6 split the SVG rendered at 467px, which put the direct
   labels near 7px — below anything legible. */
.chart-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8) var(--space-14);
  align-items: end;
}
.chart-intro .sec-head { max-width: 58ch; }
.chart-intro .deltas { flex-direction: column; gap: var(--space-5); }
@media (max-width: 900px) {
  .chart-intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .chart-intro .deltas { flex-direction: row; gap: var(--space-8); }
}