/* quotalens.com: site CSS, layered on tokens.css.
   Option B, "One number": editorial, one giant mono figure per section, the
   product's own screen as the hero. No inline styles anywhere: the CSP forbids
   'unsafe-inline', so every SVG graphic on the home page is styled from here.
   Rules kept from design/DESIGN.md: amber is the session window and nothing
   else: the mark, the burn line in a graphic, and one deliberate accent per
   page. Chrome is achromatic. No shadows. No radius above 3px. 4px grid. */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--case);
  color: var(--txt);
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  line-height: var(--lh-txt);
  font-variant-numeric: tabular-nums slashed-zero;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }

:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-off);
  border-radius: var(--r-1);
}

/* One measure for the whole site: 1152px of content inside a 1280px frame. */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-5); }

/* ── links ──────────────────────────────────────────────────────────
   Achromatic, underlined. Colour is reserved for data and states. */
a { color: inherit; text-decoration: underline; text-decoration-color: var(--hair-firm); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

code, kbd, samp, pre { font-family: var(--font-num); font-size: .92em; }
:not(pre) > code { color: var(--txt); background: var(--screen); border: var(--hair) solid var(--hairline); border-radius: var(--r-1); padding: 1px var(--sp-1); }

h1, h2, h3 { font-weight: var(--w-med); line-height: 1.2; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: var(--w-med); }

/* ── header ─────────────────────────────────────────────────────────
   No bar, no rule: the wordmark and four links sit on the page ground. */
.site-head .wrap { display: flex; align-items: center; gap: var(--sp-5); height: 64px; }
.brand { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand svg { display: block; width: 22px; height: 22px; }
.brand b { font-size: var(--fs-lg); font-weight: var(--w-med); letter-spacing: -.005em; }
.site-nav { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; font-size: var(--fs-md); }
.site-nav a { color: var(--txt-dim); text-decoration: none; }
.site-nav a:hover { color: var(--txt); }
.site-nav a.here { color: var(--txt); }

.tgl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  color: var(--txt-dim);
  background: none; border: var(--hair) solid var(--hairline);
  border-radius: var(--r-2); cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tgl:hover { color: var(--txt); border-color: var(--hair-firm); }
.ic { display: block; }   /* specificity must stay at one class so the .ic-moon / [data-theme] rules below can win */

/* Which icon shows is the theme's business, so CSS decides it and it is
   correct before theme.js runs. The icon is the mode you are switching TO:
   a sun on a dark page, a moon on a light one. */
.ic-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ic-sun  { display: none; }
  :root:not([data-theme="dark"]) .ic-moon { display: block; }
}
:root[data-theme="light"] .ic-sun  { display: none; }
:root[data-theme="light"] .ic-moon { display: block; }
:root[data-theme="dark"]  .ic-sun  { display: block; }
:root[data-theme="dark"]  .ic-moon { display: none; }

/* ── hero ───────────────────────────────────────────────────────── */
.hero { padding: var(--sp-7) 0 var(--sp-5); }
.hero h1 {
  font-size: clamp(32px, 4.3vw, 56px);
  line-height: 1.08; letter-spacing: -.025em;
  max-width: 30ch;   /* two lines at 1440, never one */
}
.hero .lead {
  margin-top: var(--sp-6);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5) var(--sp-6);
  align-items: end;
}
.hero .deck { margin: 0; font-size: 17px; color: var(--txt-dim); max-width: 48ch; }
/* --txt-far is for ticks, units and disabled state; as *text* it is 2.89:1 on
   light and 3.23:1 on dark, under the 4.5:1 bar. These three roles are text a
   stranger has to read: the only above-the-fold mention of Claude, the eleven
   words that ask for the cookie, and the step numbers. --txt-dim for each. */
.hero .deck small { display: inline-block; margin-top: var(--sp-2); font-size: var(--fs-md); color: var(--txt-dim); }
.hero .go { margin: 0; justify-self: end; }

/* The one filled control on the site. Achromatic: ink on the page ground. */
.btn {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  background: var(--txt); color: var(--case);
  border-radius: var(--r-2);
  text-decoration: none;
  font-size: 14px; font-weight: var(--w-med);
  transition: opacity var(--dur) var(--ease);
}
.btn:hover { opacity: .88; text-decoration: none; }

/* ── the dashboard: a data surface, so it gets the recess ───────── */
.shot { margin: var(--sp-5) 0 0; }
.shot .frame {
  background: var(--screen);
  border: var(--hair) solid var(--hair-firm);
  border-radius: var(--r-2);
  overflow: hidden;
}
/* The capture follows the theme the same way the sun and moon do, and with
   the same selector pattern: every selector in the chain is one class, so the
   rule that hides can always win against the base rule (the .ic bug, again).
   Both images share one frame and one aspect ratio, so the swap does not
   reflow; the frame has no height of its own and wraps whichever image shows. */
.shot-img { display: block; width: 100%; height: auto; }
.shot-light { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .shot-dark  { display: none; }
  :root:not([data-theme="dark"]) .shot-light { display: block; }
}
:root[data-theme="light"] .shot-dark  { display: none; }
:root[data-theme="light"] .shot-light { display: block; }
:root[data-theme="dark"]  .shot-dark  { display: block; }
:root[data-theme="dark"]  .shot-light { display: none; }
.shot figcaption { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--txt-dim); }

/* ── the figure: one giant number per section ───────────────────── */
.fig {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0 var(--sp-2);
  margin: 0;
}
.fig .n {
  font-size: clamp(56px, 6.5vw, 84px);
  font-weight: 300; line-height: .95;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums slashed-zero;
}
.fig .n.mono { font-family: var(--font-num); letter-spacing: -.04em; }
.fig .cap { font-family: var(--font-num); font-size: 20px; color: var(--txt-dim); }

/* ── sections ───────────────────────────────────────────────────── */
.sec { padding: var(--sp-7) 0; border-top: var(--hair) solid var(--hairline); }
.sec-tight { padding: var(--sp-6) 0; }

/* What a subscription loses: three readings from one real window, in a row.
   Each is a number and a unit line, nothing else. */
.loss { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: var(--sp-6); align-items: start; }
.loss .m { display: block; font-family: var(--font-num); font-size: var(--fs-metric); line-height: 1; letter-spacing: var(--tr-readout); }
.loss .u { display: block; margin-top: var(--sp-2); font-size: var(--fs-md); color: var(--txt-dim); max-width: 32ch; }
.loss-cap { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--txt-dim); }

/* Local only: a trust statement beside its diagram. Quieter than the four
   numbered blocks above it on purpose. */
.local { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-6); align-items: center; }
.local > p { margin: 0; color: var(--txt-dim); max-width: 44ch; }

/* The diagram is text in boxes laid out by flex, so nothing can overlap or
   clip at any width: the two blocks sit side by side when they fit and stack
   when they do not, and every label is a block of its own. */
.loc { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); align-items: flex-start; font-family: var(--font-num); font-size: var(--fs-sm); }
.loc-box { flex: 1 1 150px; min-width: 0; border: var(--hair) dashed var(--hair-firm); border-radius: var(--r-2); padding: var(--sp-3); }
.loc-box b { display: block; font-weight: var(--w-reg); color: var(--txt-dim); margin-bottom: var(--sp-2); }
.loc-box span { display: block; margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-3); background: var(--screen); border: var(--hair) solid var(--hairline); border-radius: var(--r-1); color: var(--txt); overflow-wrap: anywhere; }
.loc-note { flex: 1 1 100%; margin: 0; color: var(--txt-dim); }

/* The four highlights: eyebrow across, then figure · words · graphic. */
.feat {
  display: grid; grid-template-columns: 1.1fr 1.1fr 1fr;
  gap: var(--sp-3) var(--sp-6);
  align-items: start;
}
.feat .eye { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--txt-dim); margin: 0 0 var(--sp-1); }
.feat h3 { font-size: var(--fs-sub); letter-spacing: -.015em; margin: var(--sp-1) 0 var(--sp-3); max-width: 24ch; }
.feat .t p { font-size: 14px; margin: 0 0 var(--sp-3); max-width: 40ch; }
.feat .t .why { font-size: var(--fs-md); color: var(--txt-dim); }
.feat .g { margin-top: var(--sp-2); }

/* ── graphics: inline SVG, styled here because the CSP forbids <style> ── */
.g { display: block; width: 100%; height: auto; overflow: hidden; }
.g text { font-family: var(--font-num); font-size: 9px; fill: var(--txt-dim); }
.g .lab { font-family: var(--font-ui); font-weight: var(--w-med); fill: var(--txt); }
.g .red { fill: var(--st-critical); }
.g .axis { stroke: var(--grid-zero); stroke-width: 1; }
.g .tick { stroke: var(--hair-firm); stroke-width: 1; }
.g .dash { stroke: var(--hair-firm); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.g .proj { stroke: var(--txt-far); stroke-width: 1.25; stroke-dasharray: 4 3; fill: none; }
.g .away { fill: var(--chrome); }
.g .amber { stroke: var(--s1); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.g .dot { fill: var(--s1); }
.g .cut { stroke: var(--st-critical); stroke-width: 2; }
.g .track { fill: var(--hairline); }
.g .fill { fill: var(--s1); }
.g .day { fill: var(--chrome); }
.g .blk { fill: var(--txt-far); }
.g .plan { fill: none; stroke: var(--s2); stroke-width: 1.25; }
.g .box { fill: none; stroke: var(--hair-firm); stroke-width: 1; stroke-dasharray: 3 3; }
.g .chip { fill: var(--screen); stroke: var(--hairline); stroke-width: 1; }
.g .chip-t { fill: var(--txt); font-size: 9.5px; }
.g .spark { stroke: var(--txt-far); stroke-width: 1; fill: none; }

/* History: rows, not a chart. */
.hist { margin: var(--sp-2) 0 0; padding: 0; list-style: none; font-family: var(--font-num); font-size: var(--fs-sm); }
.hist li {
  display: grid; grid-template-columns: 76px 36px 1fr 28px; gap: var(--sp-3); align-items: center;
  padding: var(--sp-1) 0; border-bottom: var(--hair) solid var(--hairline);
  color: var(--txt-dim);
}
.hist li:first-child { color: var(--txt); }
.hist .pc { text-align: right; color: var(--txt); font-size: var(--fs-md); }
.hist .bar { height: 3px; background: var(--hairline); border-radius: 1px; }
.hist .bar i { display: block; height: 100%; background: var(--txt-far); }
.hist li:first-child .bar i { background: var(--txt); }
.hist .w88 { width: 88%; } .hist .w71 { width: 71%; } .hist .w63 { width: 63%; } .hist .w52 { width: 52%; }
.hist svg { display: block; width: 28px; height: 12px; }

/* ── supporting features: one row, pipes, no paragraphs ─────────── */
.more { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) 0; font-size: var(--fs-md); color: var(--txt-dim); }
.more li { padding: 0 var(--sp-4); border-left: var(--hair) solid var(--hair-firm); }
.more li:first-child { padding-left: 0; border-left: 0; }
.more code { font-size: 1em; background: none; border: 0; padding: 0; color: inherit; }

/* ── command blocks, a data surface, so it gets the recess ──────── */
.cmd {
  background: var(--screen);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-5);
  margin: 0;
  overflow-x: auto;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--txt);
}
.cmd .c { color: var(--txt-dim); }

/* ── interior pages: a heading, then labelled rows ──────────────── */
.page-h1 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -.025em; margin: var(--sp-7) 0 var(--sp-6); }
.page-h1 + .row { border-top: var(--hair) solid var(--hairline); }
.rows { margin-bottom: var(--sp-7); }
.row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.1fr); gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: var(--hair) solid var(--hairline);
}
.row > h2 { font-size: var(--fs-sm); font-weight: var(--w-reg); color: var(--txt-dim); letter-spacing: 0; padding-top: 3px; }
.row > h2.lit { color: var(--lit); }   /* the one amber accent on the page: the clause you read first */
.row .lede { font-size: var(--fs-sub); line-height: 1.4; margin: 0 0 var(--sp-3); max-width: 44ch; }
.row .cmd { margin-bottom: var(--sp-3); }
.row .note { font-size: var(--fs-md); color: var(--txt-dim); max-width: 60ch; }
.row .note:last-child { margin-bottom: 0; }

.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-4); }
.keys b { display: block; font-family: var(--font-num); font-weight: var(--w-reg); font-size: 20px; line-height: 1.15; letter-spacing: -.01em; }
.keys small { display: block; font-size: var(--fs-xs); color: var(--txt-dim); margin-top: var(--sp-1); }

.do { margin: 0; padding: 0; list-style: none; counter-reset: do; }
.do li { position: relative; padding: 0 0 var(--sp-3) var(--sp-5); color: var(--txt-dim); max-width: 60ch; }
.do li:last-child { padding-bottom: 0; }
.do li::before {
  counter-increment: do; content: counter(do);
  position: absolute; left: 0; top: 3px;
  font-family: var(--font-num); font-size: var(--fs-xs); color: var(--txt-dim);
}
.do b { color: var(--txt); }

/* Feedback: the templates, one per row. */
.nots { margin: 0 0 var(--sp-6); padding: 0; list-style: none; border-top: var(--hair) solid var(--hairline); }
.nots li { padding: var(--sp-3) 0; border-bottom: var(--hair) solid var(--hairline); font-size: var(--fs-md); color: var(--txt-dim); }
.nots b { display: block; color: var(--txt); font-weight: var(--w-med); font-size: var(--fs-lg); margin-bottom: var(--sp-0); }

.sec-page { padding-bottom: var(--sp-7); }
.sec-page h3 { font-size: var(--fs-sub); margin: var(--sp-6) 0 var(--sp-3); }
.sec-page .lede { font-size: var(--fs-sub); color: var(--txt-dim); margin-bottom: var(--sp-5); max-width: 62ch; }
.sec-page p { max-width: 62ch; }
.note { font-size: var(--fs-md); color: var(--txt-dim); }

/* Contact rows */
.contact { margin: 0 0 var(--sp-6); display: grid; grid-template-columns: 120px 1fr; gap: 0; max-width: 560px; }
.contact dt, .contact dd {
  margin: 0; padding: var(--sp-3) 0;
  border-top: var(--hair) solid var(--hairline);
  font-size: var(--fs-md);
}
.contact dt { color: var(--txt-dim); }
.contact dd { color: var(--txt); }

/* ── footer ─────────────────────────────────────────────────────── */
.site-foot { margin-top: auto; border-top: var(--hair) solid var(--hairline); padding: var(--sp-5) 0 var(--sp-6); font-size: var(--fs-md); color: var(--txt-dim); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-5); }
.site-foot p { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.site-foot a { text-decoration: none; }
.site-foot a:hover { text-decoration: underline; text-decoration-color: var(--hair-firm); }

/* ── narrow ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .feat { grid-template-columns: 1fr 1fr; }
  .feat .g { grid-column: 1 / -1; max-width: 420px; }
  .loss { grid-template-columns: 1fr 1fr; }
  .local { grid-template-columns: 1fr; }
  .local .loc { max-width: 420px; }
}

@media (max-width: 700px) {
  .wrap { padding: 0 var(--sp-4); }
  .site-head .wrap { height: auto; padding-top: var(--sp-4); padding-bottom: var(--sp-3); flex-wrap: wrap; gap: var(--sp-3); }
  .site-nav { width: 100%; margin-left: 0; gap: var(--sp-3); flex-wrap: wrap; }
  .hero { padding: var(--sp-6) 0 var(--sp-5); }
  .hero .lead { grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-5); }
  .hero .go { justify-self: start; }
  .sec { padding: var(--sp-6) 0; }
  .fig .n { font-size: 56px; }
  .fig .cap { font-size: 16px; }
  .feat { grid-template-columns: 1fr; gap: var(--sp-2); }
  .feat h3 { margin-top: var(--sp-3); }
  .loss { grid-template-columns: 1fr; gap: var(--sp-4); }
  .more li { padding: 0 var(--sp-3); }
  .page-h1 { margin-top: var(--sp-6); }
  /* minmax(0, …), not 1fr: a grid track's default minimum is min-content, and
     the <pre> inside sets that, so the row grew past a 390px viewport and the
     whole page scrolled sideways. The <pre> already has overflow-x: auto and
     scrolls inside itself once the track is allowed to be narrower than it. */
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-5) 0; }
  .keys { grid-template-columns: 1fr; gap: var(--sp-3); }
  .cmd { font-size: var(--fs-sm); }
  .contact { grid-template-columns: 96px 1fr; }
  .site-foot .wrap { flex-direction: column; }
}

@media print {
  .site-nav, .tgl { display: none; }
}