/* ═══════════════════════════════════════════════════════════════
   DAYBOOK — sales site

   The page itself is built in Daybook. That is the argument: the
   thing selling the system is made with the free half of it.
   Everything here is layout on top of tokens/daybook.css; no new
   colors, no new type sizes.
   ═══════════════════════════════════════════════════════════════ */

html, body { margin: 0; padding: 0; }
body { background: var(--d-paper); }

.wide { max-width: 1240px; }

/* ── Section scaffolding ──────────────────────────────────────
   Sections are numbered because the page is an argument made in
   order: problem, evidence, mechanism, contents, price. */
.sec { padding-top: var(--d-space-9); }
.sec-head {
  display: flex;
  align-items: baseline;
  gap: var(--d-space-4);
  border-bottom: var(--d-hairline) solid var(--d-ink);
  padding-bottom: var(--d-space-3);
  margin-bottom: var(--d-space-7);
}
.sec-head .d-label { color: var(--d-accent); flex: none; }
.sec-head h2 { margin: 0; }
.sec-head .tail { margin-left: auto; text-align: right; }

/* ── Hero ─────────────────────────────────────────────────────
   No gigantic centered headline. The screen is the argument, so
   the copy gets out of its way as fast as possible. */
.hero { padding-top: var(--d-space-8); }
/* No max-width here: a ch measure on this container resolves
   against the 15px body size, not the display size, and strangles
   the headline. The grid column is the constraint. */
.hero-copy { max-width: none; }
.hero h1 {
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.024em;
  margin: 0;
  max-width: 14ch;      /* resolves against the h1's own size */
}
.hero h1 em { font-style: italic; color: var(--d-accent); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--d-space-8);
  align-items: end;
  padding-bottom: var(--d-space-7);
}
.hero-side { display: flex; flex-direction: column; gap: var(--d-space-4); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; gap: var(--d-space-6); }
  .hero-copy { max-width: none; }
}

/* ── The switcher ─────────────────────────────────────────────
   Tabs above a framed screen. The frame matters: without it the
   preview reads as part of the page rather than as an app. */
/* Scrolls rather than wraps, so the two states always read as one
   control instead of breaking across rows on a narrow screen. */
.switch {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0;
  border: var(--d-hairline) solid var(--d-ink);
  border-bottom: 0;
  scrollbar-width: none;
}
.switch::-webkit-scrollbar { display: none; }
.switch button {
  flex: 1 0 auto;
  min-width: 132px;
  background: none;
  border: 0;
  border-right: var(--d-hairline) solid var(--d-rule);
  padding: var(--d-space-3) var(--d-space-4);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background 120ms ease;
}
.switch button:last-child { border-right: 0; }
.switch button:hover { background: var(--d-paper-raised); }
.switch button[aria-selected="true"] { background: var(--d-ink); }
.switch .sw-name {
  font-family: var(--d-mono);
  font-size: var(--d-text-micro);
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-ink);
}
.switch .sw-note {
  font-family: var(--d-mono);
  font-size: 9.5px;
  color: var(--d-ink-faint);
  letter-spacing: 0.02em;
}
.switch button[aria-selected="true"] .sw-name { color: var(--d-paper); }
.switch button[aria-selected="true"] .sw-note { color: var(--d-rule); }

.frame {
  border: var(--d-hairline) solid var(--d-ink);
  overflow: hidden;
}
.frame-bar {
  display: flex;
  align-items: center;
  gap: var(--d-space-3);
  padding: 7px var(--d-space-4);
  border-bottom: var(--d-hairline) solid var(--d-rule);
  background: var(--d-paper-sunk);
}
.frame-bar .dots { display: flex; gap: 5px; }
.frame-bar .dots i { width: 6px; height: 6px; background: var(--d-rule); display: block; }
.frame-bar .url {
  font-family: var(--d-mono);
  font-size: 10px;
  color: var(--d-ink-faint);
  letter-spacing: 0.04em;
}
.pv-scroll { overflow-x: auto; }

/* The defect list under the frame. Each row names a real error in
   the screen above and cites the rule it breaks, so the claim is
   checkable rather than asserted. */
.defects {
  border: var(--d-hairline) solid var(--d-rule);
  border-top: 0;
}
.defects-head {
  display: flex;
  align-items: baseline;
  gap: var(--d-space-3);
  padding: var(--d-space-3) var(--d-space-4);
  border-bottom: var(--d-hairline) solid var(--d-rule);
  background: var(--d-paper-sunk);
}
.defects-head .count {
  font-family: var(--d-mono);
  font-size: var(--d-text-caption);
  font-variant-numeric: tabular-nums;
}
.defect-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.defect {
  display: flex;
  align-items: baseline;
  gap: var(--d-space-3);
  padding: var(--d-space-3) var(--d-space-4);
  border-bottom: var(--d-hairline) solid var(--d-rule-faint);
  border-right: var(--d-hairline) solid var(--d-rule-faint);
  font-size: 14px;
  line-height: 1.5;
}
.defect .mark {
  width: 6px;
  height: 6px;
  flex: none;
  display: block;
  transform: translateY(-2px);
}
.defect .cite {
  margin-left: auto;
  padding-left: var(--d-space-3);
  font-family: var(--d-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-ink-faint);
  white-space: nowrap;
}
.defects[data-mode="bad"]  .defect .mark { background: var(--d-debit); }
.defects[data-mode="bad"]  .defect        { color: var(--d-ink); }
.defects[data-mode="good"] .defect .mark { background: var(--d-credit); }
.defects[data-mode="good"] .defect        { color: var(--d-ink-muted); }

/* ── Rule cards — the six groups of money rules in § 02 ────────
   320px min gives three columns at the 1240 container, so the six
   cards fill exactly two rows with no orphaned cells. */
.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  border-top: var(--d-hairline) solid var(--d-ink);
  border-left: var(--d-hairline) solid var(--d-rule);
}
.rule-card {
  border-right: var(--d-hairline) solid var(--d-rule);
  border-bottom: var(--d-hairline) solid var(--d-rule);
  padding: var(--d-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--d-space-3);
}
.rule-card p { margin: 0; color: var(--d-ink-muted); font-size: 14.5px; line-height: 1.55; }
.rule-card .for { margin-top: auto; padding-top: var(--d-space-3); border-top: var(--d-hairline) solid var(--d-rule-faint); }

/* ── Code ─────────────────────────────────────────────────────── */
.code {
  border: var(--d-hairline) solid var(--d-rule);
  background: var(--d-paper-raised);
  overflow: hidden;
}
.code-head {
  display: flex;
  align-items: center;
  gap: var(--d-space-2);
  padding: var(--d-space-2) var(--d-space-4);
  border-bottom: var(--d-hairline) solid var(--d-rule);
  background: var(--d-paper-sunk);
}
.code-head i { width: 5px; height: 5px; background: var(--d-accent); display: block; }
.code pre {
  margin: 0;
  padding: var(--d-space-4);
  overflow-x: auto;
  font-family: var(--d-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--d-ink-muted);
}
.code .k { color: var(--d-accent); }
.code .c { color: var(--d-ink-faint); }
.code .s { color: var(--d-ink); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--d-space-6);
  align-items: start;
}

/* ── Manifest ─────────────────────────────────────────────────── */
.manifest { width: 100%; border-collapse: collapse; }
.manifest th {
  font-family: var(--d-mono);
  font-size: var(--d-text-micro);
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-ink-faint);
  font-weight: 400;
  text-align: left;
  border-bottom: var(--d-hairline) solid var(--d-ink);
  padding: 0 var(--d-space-4) var(--d-space-2) 0;
}
.manifest td {
  padding: var(--d-space-3) var(--d-space-4) var(--d-space-3) 0;
  border-bottom: var(--d-hairline) solid var(--d-rule-faint);
  vertical-align: top;
  color: var(--d-ink-muted);
  line-height: 1.55;
}
.manifest td:first-child { color: var(--d-ink); white-space: nowrap; width: 1%; }

/* ── Pricing ──────────────────────────────────────────────────── */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border: var(--d-hairline) solid var(--d-rule);
}
.tier {
  padding: var(--d-space-6) var(--d-space-5);
  border-right: var(--d-hairline) solid var(--d-rule);
  display: flex;
  flex-direction: column;
  gap: var(--d-space-3);
}
.tier:last-child { border-right: 0; }
.tier--lead { outline: var(--d-hairline) solid var(--d-accent); outline-offset: -1px; }
.tier--lead .d-label { color: var(--d-accent); }
.price {
  font-family: var(--d-serif);
  font-size: 40px;
  letter-spacing: var(--d-track-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price small { font-size: 14px; color: var(--d-ink-faint); letter-spacing: 0; }
.tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tier li {
  display: flex;
  gap: var(--d-space-2);
  font-size: 14.5px;
  color: var(--d-ink-muted);
  line-height: 1.45;
}
.tier li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--d-accent);
  flex: none;
  margin-top: 7px;
}
.tier li[data-absent] { color: var(--d-ink-faint); }
.tier li[data-absent]::before { background: none; border: var(--d-hairline) solid var(--d-rule); }
.tier .buy { margin-top: auto; padding-top: var(--d-space-4); }
.tier .buy .d-btn { width: 100%; }

/* Sits directly under the figure, quiet, because it qualifies the
   price rather than competing with it — but it has to be visible
   before the click, not discovered at checkout. */
.tax-note {
  display: block;
  margin-top: -4px;
  line-height: 1.4;
}

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq { border-top: var(--d-hairline) solid var(--d-ink); }
.faq details { border-bottom: var(--d-hairline) solid var(--d-rule); }
.faq summary {
  cursor: pointer;
  padding: var(--d-space-4) 0;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--d-space-3);
  font-size: var(--d-text-lead);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--d-mono);
  color: var(--d-ink-faint);
}
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { color: var(--d-accent); }
.faq .answer { padding: 0 0 var(--d-space-5); max-width: 66ch; color: var(--d-ink-muted); }
.faq .answer p { margin: 0 0 var(--d-space-3); }
.faq .answer p:last-child { margin-bottom: 0; }

/* ── Capture ──────────────────────────────────────────────────── */
.capture {
  border: var(--d-hairline) solid var(--d-ink);
  padding: var(--d-space-7) var(--d-space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--d-space-7);
  align-items: center;
}
@media (max-width: 820px) { .capture { grid-template-columns: 1fr; gap: var(--d-space-5); } }
.capture form { display: flex; flex-direction: column; gap: var(--d-space-3); }
.capture .fields { display: flex; gap: 0; }
.capture .fields .d-input { border-right: 0; }
.capture .fields .d-btn { flex: none; }

footer.site-foot {
  margin-top: var(--d-space-9);
  border-top: var(--d-hairline) solid var(--d-ink);
  padding: var(--d-space-6) 0 var(--d-space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--d-space-3) var(--d-space-7);
  align-items: baseline;
}

/* ── Narrow screens ───────────────────────────────────────────
   The masthead nav wraps to two lines before it runs out of room
   and pushes the CTA off the edge. Below 860 it goes; the section
   anchors are all reachable by scrolling anyway. */
@media (max-width: 860px) {
  .d-masthead .d-nav { display: none; }
  .sec { padding-top: var(--d-space-8); }
  .sec-head { flex-wrap: wrap; gap: var(--d-space-2) var(--d-space-4); }
  .sec-head .tail { margin-left: 0; text-align: left; flex-basis: 100%; }
  .capture { padding: var(--d-space-6) var(--d-space-5); }
  .tier { border-right: 0; border-bottom: var(--d-hairline) solid var(--d-rule); }
  .tier:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .capture .fields { flex-direction: column; }
  .capture .fields .d-input { border-right: var(--d-hairline) solid var(--d-rule); }
  .hero .d-row { flex-direction: column; align-items: stretch; }
}

/* The statement-descriptor line, under each paid buy button. Set
   quietly and close to the control, because it reassures without
   competing with the price. */
.pay-note {
  display: block;
  padding-top: 8px;
  line-height: 1.45;
}

/* Anything still to be wired before launch is marked, visibly. */
[data-todo] { position: relative; }
.todo-note {
  display: block;
  font-family: var(--d-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-debit);
  padding-top: 6px;
}