/* Hallmark · macrostructure: bespoke settlement-ledger (index) · Narrative Workflow (dwy)
 * · Split Studio (invest) · tabular-spec-led (submit) · Index-First (resources)
 * theme: custom (vibe: "the closing table, paper and ink" · paper oklch(96.5% 0.012 85)
 * · accent #F68D2E company orange · display Cabinet Grotesk + body Geist + outlier Geist Mono)
 * axes: light paper-band / display-grotesk / warm accent · differs from the cc build on all three
 * nav: letterhead masthead (N6-adjacent) · footer: signature block (Ft6-adjacent)
 * staging: grid-break focal (seed 12854daa, direction candidate 7: the settlement ledger)
 * tone: institutional-warm · pre-emit critique: P5 H5 E4 S5 R4 V5
 * House hard rules: zero negative letter-spacing, tabular numerals, no em dashes, real numbers only. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  /* paper and ink: the settlement statement's material */
  --paper: oklch(96.5% 0.012 85);
  --paper-2: oklch(94% 0.014 85);
  --panel: oklch(98.2% 0.008 88);
  --rule: oklch(85% 0.018 80);
  --rule-soft: oklch(90% 0.014 82);
  --rule-strong: oklch(65% 0.025 70);
  --ink: oklch(25% 0.022 60);
  --ink-2: oklch(41% 0.018 62);
  --ink-3: oklch(54% 0.014 68);
  /* the company color: the executed stamp, the one grid-breaker per page */
  --orange: #F68D2E;
  --orange-deep: #C96A14;
  --orange-ink: oklch(99% 0.01 85);
  --orange-wash: oklch(93% 0.045 65);
  /* siblings, semantic only */
  --teal: #487A7B;
  --teal-deep: #005151;
  --teal-wash: oklch(93% 0.025 195);
  --money: oklch(46% 0.11 155);
  --money-wash: oklch(93% 0.04 155);
  --caution: oklch(55% 0.12 75);
  /* faces */
  --font-display: 'Cabinet Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-ledger: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;
  /* rhythm */
  --track-caps: 0.12em;
  --r-sm: 3px;
  --r-md: 6px;
  --t-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-base: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 18px 44px -22px oklch(30% 0.03 60 / 0.35), 0 2px 8px oklch(30% 0.03 60 / 0.08);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.08; font-weight: 800; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
.num { font-family: var(--font-ledger); font-variant-numeric: tabular-nums; }
.caps { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); }

/* the framed column: the same two rails as the product site, drawn in ink on paper */
.frame {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 44px;
  border-inline: 1px solid var(--rule);
}
main > section { border-top: 1px solid var(--rule); }
main > section:first-child { border-top: 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--teal-deep); outline-offset: 2px;
}
.btn-stamp { background: var(--orange); color: var(--orange-ink); box-shadow: var(--shadow); }
.btn-stamp:hover { background: var(--orange-deep); transform: translateY(-1px); }
.btn-line { border-color: var(--rule-strong); color: var(--ink); background: var(--panel); }
.btn-line:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-lg { padding: 15px 30px; font-size: 16px; }
.arrow { transition: transform var(--t-fast); display: inline-block; }
a:hover > .arrow, a:hover .arrow { transform: translateX(3px); }
.text-link { color: var(--teal-deep); font-weight: 700; display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid transparent; }
.text-link:hover { border-bottom-color: var(--teal-deep); }

/* ------------------------------------------------------- webinar strip */
.webinar-strip {
  display: block; background: var(--ink); color: oklch(93% 0.01 85);
  font-size: 13.5px; text-align: center; padding: 9px 16px;
}
.webinar-strip b { color: #fff; font-weight: 650; }
.webinar-strip .num { color: var(--orange); font-weight: 700; }
.webinar-strip .go { margin-left: 10px; color: var(--orange); font-weight: 700; white-space: nowrap; }
.webinar-strip:hover .go { text-decoration: underline; }

/* ---------------------------------------------------- letterhead nav */
.masthead { border-bottom: 1px solid var(--rule-strong); background: var(--paper); position: sticky; top: 0; z-index: 200; }
.masthead .frame { border-inline-color: transparent; }
.mast-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0 12px; }
.mast-brand { display: inline-flex; align-items: center; gap: 12px; }
.mast-brand img { display: block; height: 40px; width: auto; }
.mast-label { font-family: var(--font-ledger); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.mast-label b { display: block; color: var(--ink); font-weight: 600; }
.mast-links {
  display: flex; align-items: center; gap: 26px;
  border-top: 1px solid var(--rule); padding: 10px 0 12px;
}
.mast-links a { font-size: 14px; font-weight: 600; color: var(--ink-2); transition: color var(--t-fast); }
.mast-links a:hover, .mast-links a[aria-current] { color: var(--ink); }
.mast-links a[aria-current] { border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
.mast-links .mast-cta { margin-left: auto; color: var(--teal-deep); display: inline-flex; align-items: center; gap: 7px; }
.mast-toggle { display: none; background: none; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); color: var(--ink); width: 42px; height: 38px; cursor: pointer; }
.mast-toggle svg { width: 20px; height: 20px; }
.mast-menu { display: none; }

/* ------------------------------------------------------------- ledger kit */
/* the entry: a settlement line. label, dotted leader, amount. */
.entry { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); font-size: 14.5px; }
.entry:last-child { border-bottom: 0; }
.entry .lno { font-family: var(--font-ledger); font-size: 12px; color: var(--ink-3); width: 34px; flex: none; }
.entry .lbl { color: var(--ink); font-weight: 500; }
.entry .leader { flex: 1; border-bottom: 1px dotted var(--rule-strong); position: relative; top: -4px; min-width: 24px; }
.entry .amt { font-family: var(--font-ledger); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; white-space: nowrap; }
.entry .amt.money { color: var(--money); }
.entry .amt.quiet { color: var(--ink-3); font-weight: 500; }

/* the statement card: a block of entries with a ruled head */
.statement { background: var(--panel); border: 1px solid var(--rule-strong); border-radius: var(--r-md); box-shadow: var(--shadow); }
.statement-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--rule-strong); background: var(--paper-2); border-radius: var(--r-md) var(--r-md) 0 0; }
.statement-head .caps { color: var(--ink-3); }
.statement-head b { font-family: var(--font-ledger); font-size: 13px; color: var(--ink); }
.statement-body { padding: 10px 20px 16px; }
.statement-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 20px 16px; padding: 12px 14px; background: var(--money-wash); border: 1px solid oklch(75% 0.08 155); border-radius: var(--r-sm); color: var(--ink); font-weight: 650; }
.statement-total .amt { font-family: var(--font-ledger); color: var(--money); font-size: 19px; font-weight: 700; }

/* the stamp: rotated, bordered, orange. used once per page at most for a TRUE line. */
.stamp {
  display: inline-block; transform: rotate(-2deg);
  border: 2.5px solid var(--orange); color: var(--orange-deep);
  border-radius: var(--r-sm); padding: 6px 14px;
  font-family: var(--font-ledger); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; background: var(--orange-wash);
}

/* the mono strip: honest figures in a row */
.figures { display: flex; gap: 48px; flex-wrap: wrap; padding: 26px 0 30px; border-top: 1px solid var(--rule); }
.figures div { display: flex; flex-direction: column; gap: 3px; }
.figures dt { font-family: var(--font-ledger); font-variant-numeric: tabular-nums; color: var(--ink); font-size: 27px; font-weight: 600; line-height: 1.1; }
.figures dd { color: var(--ink-3); font-size: 13px; }

/* section heads: stacked, left-flush over left-flush bodies */
.sect { padding-block: 96px; }
.sect-head { max-width: 720px; }
.sect-head h2 { font-size: clamp(28px, 4vw, 42px); }
.sect-head .lead { margin-top: 16px; font-size: 16.5px; color: var(--ink-2); max-width: 60ch; }
.sect-head.centered { margin-inline: auto; text-align: center; }
.sect-head.centered .lead { margin-inline: auto; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; }
.hero .frame { padding-top: 84px; padding-bottom: 64px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.hero h1 { font-size: clamp(40px, 5.8vw, 66px); }
.hero .kicker { color: var(--teal-deep); margin-bottom: 16px; }
.hero-sub { margin-top: 20px; font-size: 17px; color: var(--ink-2); max-width: 54ch; }
.hero-actions { margin-top: 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* the violation: the one element that crosses the rail. positional, not animated. */
.break-right { position: relative; }
.break-right .statement { position: relative; margin-right: -76px; transform: rotate(0.6deg); }
.hero-stamp-line { margin-top: 26px; }

/* ------------------------------------------------------------ path rows */
.paths-list { margin-top: 48px; border-top: 2px solid var(--ink); }
.path {
  display: grid; grid-template-columns: 190px 1fr 220px; gap: 28px; align-items: start;
  padding: 30px 4px; border-bottom: 1px solid var(--rule-strong);
  transition: background var(--t-fast);
}
.path:hover { background: var(--panel); }
.path-for { font-family: var(--font-ledger); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding-top: 6px; }
.path h3 { font-size: 23px; }
.path-body p { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); max-width: 58ch; }
.path-side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.path-side .amt-chip { font-family: var(--font-ledger); font-size: 13px; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); padding: 5px 10px; }

/* ------------------------------------------------------------ diptychs */
.diptych { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; padding-block: 72px; border-bottom: 1px solid var(--rule); }
.diptych:last-child { border-bottom: 0; }
.diptych.flip { grid-template-columns: 1.1fr 0.9fr; }
.diptych h2 { font-size: clamp(26px, 3.4vw, 36px); }
.diptych .dip-copy p { margin-top: 14px; font-size: 15.5px; color: var(--ink-2); max-width: 56ch; }

/* ------------------------------------------------------------ checklists */
.ledger-check { list-style: none; padding: 0; margin-top: 18px; border-top: 1px solid var(--rule-strong); }
.ledger-check li { display: flex; gap: 12px; align-items: baseline; padding: 11px 2px; border-bottom: 1px solid var(--rule-soft); font-size: 14.5px; color: var(--ink); }
.ledger-check .tick { font-family: var(--font-ledger); color: var(--money); font-weight: 700; flex: none; }

/* ------------------------------------------------------------ steps (workflow) */
.stages { counter-reset: stage; margin-top: 56px; }
.stage { display: grid; grid-template-columns: 120px 1fr; gap: 36px; padding: 40px 0; border-top: 1px solid var(--rule-strong); }
.stage-no { font-family: var(--font-ledger); font-size: 34px; color: var(--orange-deep); font-weight: 600; }
.stage h3 { font-size: 24px; }
.stage p { margin-top: 10px; font-size: 15px; color: var(--ink-2); max-width: 58ch; }

/* ------------------------------------------------------------ compare ledger */
.ledger-table { margin-top: 44px; border: 1px solid var(--rule-strong); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.lt-head, .lt-row { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 18px; padding: 13px 20px; align-items: baseline; }
.lt-head { background: var(--ink); color: oklch(93% 0.01 85); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); }
.lt-head .with { color: var(--orange); }
.lt-row { border-top: 1px solid var(--rule-soft); font-size: 14px; }
.lt-row .k { color: var(--ink); font-weight: 650; }
.lt-row .with-v { color: var(--ink); }
.lt-row .without-v { color: var(--ink-3); }

/* ------------------------------------------------------------ spec sheet */
.spec { margin-top: 44px; border-top: 2px solid var(--ink); }
.spec-row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 16px 4px; border-bottom: 1px solid var(--rule-strong); align-items: baseline; }
.spec-row dt { font-family: var(--font-ledger); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.spec-row dd { font-size: 16px; color: var(--ink); font-weight: 550; }

/* ------------------------------------------------------------ FAQ */
.faq-list { margin-top: 44px; border-top: 1px solid var(--rule-strong); max-width: 760px; }
.faq-list details { border-bottom: 1px solid var(--rule-strong); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 4px; color: var(--ink); font-weight: 650; font-size: 16px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--teal-deep); }
.faq-x { position: relative; width: 13px; height: 13px; flex: none; }
.faq-x::before, .faq-x::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--ink-3); transition: transform var(--t-base); }
.faq-x::before { width: 13px; height: 1.5px; }
.faq-x::after { width: 1.5px; height: 13px; }
details[open] .faq-x::after { transform: rotate(90deg); }
.faq-list p { padding: 0 4px 18px; font-size: 14.5px; color: var(--ink-2); max-width: 62ch; }

/* ------------------------------------------------------------ forms */
.lead-block { background: var(--panel); border: 1px solid var(--rule-strong); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 36px 40px; max-width: 640px; }
.lead-block h2 { font-size: clamp(24px, 3vw, 32px); }
.lead-block .lead { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
.lead-form { margin-top: 24px; display: grid; gap: 14px; }
.lead-form input, .lead-form select {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
}
.lead-form input::placeholder { color: var(--ink-3); }
.lead-form select:invalid { color: var(--ink-3); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-3); }
.consent input { width: auto; margin-top: 3px; }
.form-legal { font-size: 12px; color: var(--ink-3); }
.form-legal a { text-decoration: underline; }
.form-note { font-size: 12.5px; color: var(--ink-3); }
.form-success { display: none; padding: 18px; background: var(--money-wash); border: 1px solid oklch(75% 0.08 155); border-radius: var(--r-sm); color: var(--ink); font-size: 14.5px; }
.form-error { display: none; padding: 12px 14px; background: oklch(94% 0.04 30); border: 1px solid oklch(70% 0.1 30); border-radius: var(--r-sm); color: oklch(40% 0.13 30); font-size: 13.5px; }

/* ------------------------------------------------------------ resource index */
.res-index { margin-top: 48px; border-top: 2px solid var(--ink); }
.res-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 24px; align-items: baseline; padding: 24px 4px; border-bottom: 1px solid var(--rule-strong); transition: background var(--t-fast); }
.res-item:hover { background: var(--panel); }
.res-item .lno { font-family: var(--font-ledger); font-size: 13px; color: var(--ink-3); }
.res-item h3 { font-size: 21px; }
.res-item p { margin-top: 6px; font-size: 14px; color: var(--ink-2); max-width: 60ch; }
.book-cats { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.book-cat { padding: 24px 0; border-top: 1px solid var(--rule-strong); }
.book-cat h3 { font-size: 18px; display: flex; justify-content: space-between; align-items: baseline; }
.book-cat h3 .num { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.book-cat ol { margin: 14px 0 0; padding: 0; list-style: none; }
.book-cat li { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px dotted var(--rule); font-size: 14px; }
.book-cat li:last-child { border-bottom: 0; }
.book-cat .bno { font-family: var(--font-ledger); font-size: 11.5px; color: var(--ink-3); }
.book-cat b { color: var(--ink); font-weight: 600; }
.book-cat span.au { color: var(--ink-3); }

/* ------------------------------------------------------ signature footer */
.footer { border-top: 2px solid var(--ink); background: var(--paper-2); }
.footer .frame { border-inline-color: transparent; }
.footer-inner { padding: 48px 0 52px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
.sig-block { max-width: 380px; }
.sig-line { border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.sig-line img { height: 34px; width: auto; display: block; }
.sig-name { margin-top: 8px; font-family: var(--font-ledger); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.by-line { display: inline-block; margin-top: 18px; font-family: var(--font-ledger); font-size: 11.5px; letter-spacing: 0.16em; color: var(--teal-deep); font-weight: 600; }
.by-line:hover { text-decoration: underline; }
.footer-cols { display: flex; gap: 56px; justify-content: flex-end; flex-wrap: wrap; }
.fcol { display: flex; flex-direction: column; gap: 9px; }
.fcol .caps { color: var(--ink-3); margin-bottom: 4px; }
.fcol a { font-size: 14px; color: var(--ink-2); }
.fcol a:hover { color: var(--ink); text-decoration: underline; }
.footer-legal { border-top: 1px solid var(--rule); padding: 14px 0 18px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }

/* ------------------------------------------------------------ motion */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 560ms cubic-bezier(0.16, 1, 0.3, 1), transform 560ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--rd, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .arrow { transition: none; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1240px) {
  .break-right .statement { margin-right: -24px; }
}
@media (max-width: 1000px) {
  .frame { padding-inline: 26px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .break-right .statement { margin-right: 0; transform: none; }
  .diptych, .diptych.flip { grid-template-columns: 1fr; gap: 24px; padding-block: 56px; }
  .path { grid-template-columns: 1fr; gap: 12px; }
  .path-for { padding-top: 0; }
  .stage { grid-template-columns: 64px 1fr; gap: 20px; }
  .book-cats { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-cols { justify-content: flex-start; }
  .figures { gap: 28px; }
}
@media (max-width: 760px) {
  .mast-links { display: none; }
  .mast-toggle { display: grid; place-items: center; }
  .mast-menu.open { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 16px; border-top: 1px solid var(--rule); }
  .mast-menu a { padding: 11px 2px; color: var(--ink); font-size: 16px; font-weight: 600; }
  .hero .frame { padding-top: 52px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .lt-head, .lt-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
  .lt-head { display: none; }
  .lt-row .k { font-family: var(--font-ledger); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
  .lt-row .without-v::before { content: "By hand: "; font-weight: 650; }
  .lt-row .with-v::before { content: "With us: "; font-weight: 650; }
  .spec-row { grid-template-columns: 1fr; gap: 4px; }
  .lead-block { padding: 26px 22px; }
  .res-item { grid-template-columns: 1fr; gap: 8px; }
  .figures dt { font-size: 22px; }
}