/* Deal-ledger marketing pages. Tokens and layout follow the approved home mockup. */
:root {
  --bg: oklch(0.205 0.01 55);
  --bg2: oklch(0.25 0.014 50);
  --on: oklch(0.9 0.012 75);
  --on2: oklch(0.74 0.015 65);
  --gold: oklch(0.83 0.09 82);
  --paper: oklch(0.968 0.005 95);
  --line: oklch(0.91 0.008 95);
  --ink: oklch(0.23 0.01 60);
  --ink2: oklch(0.42 0.014 60);
  --rule: oklch(0.45 0.012 60);
  --ox: oklch(0.47 0.13 32);
  --ox-d: oklch(0.41 0.12 32);
  --ox-ink: oklch(0.39 0.13 32);
  --leather: oklch(0.19 0.012 50);
  --serif: 'Instrument Serif', 'Serif Fallback', Georgia, serif;
  --sans: 'Instrument Sans', 'Sans Fallback', Arial, sans-serif;
  --label: 'Cormorant SC', 'Instrument Serif', Georgia, serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --header: 64px;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
body {
  margin: 0;
  background: radial-gradient(90% 60% at 70% 0%, var(--bg2), var(--bg) 70%) fixed, var(--bg);
  color: var(--on);
  font: 15px/1.6 var(--sans);
  overflow-x: clip;
  font-variant-numeric: tabular-nums;
}
::selection { background: oklch(0.83 0.09 82 / .35); }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.paper :focus-visible, .form-card :focus-visible, .pricing-card :focus-visible { outline-color: var(--ox); }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 400; }
p { margin: 0 0 1em; max-width: 68ch; }
img, svg { max-width: 100%; }

.vh, .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip, .skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
}
.skip:focus, .skip-link:focus {
  left: 12px;
  top: 12px;
  background: var(--paper);
  color: var(--ink);
  padding: 8px 12px;
  z-index: 30;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
main:focus { outline: none; }

.wrap, .container { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
.lbl {
  font: 600 calc(.68rem * 1.2)/1.4 var(--label);
  letter-spacing: .12em;
  text-transform: lowercase;
}
.red { color: var(--ox-ink); }
.top .red, .close .red { color: var(--ox); }

/* Header */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: oklch(0.205 0.01 55 / .94);
  backdrop-filter: blur(8px);
}
.top .wrap { display: flex; align-items: center; gap: 22px; height: var(--header); }
.brand {
  color: var(--gold);
  text-decoration: none;
  margin-right: auto;
  min-height: 44px;
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
}
.brand img, .foot-brand img {
  display: block;
  /* Intrinsic ratio of blackbookengine-logo.svg (20811.9 × 2256.07).
     A fixed box stops the header from jumping when the SVG arrives. */
  width: calc(22px * 20811.9 / 2256.07);
  height: 22px;
  max-width: 100%;
  max-height: none;
  /* The lockup is ink (#0A0A0A). Paint it gold on the dark bar. */
  filter: brightness(0) saturate(100%) invert(84%) sepia(18%) saturate(620%) hue-rotate(3deg) brightness(1.02);
}
.top-links { display: flex; align-items: center; gap: 26px; }
.top a.l {
  font-size: .88rem;
  text-decoration: none;
  color: var(--on);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.top a.l:hover, .top a[aria-current="page"] { color: #fff; }
.nav-toggle {
  display: none;
  margin: 0;
  background: none;
  border: 1px solid oklch(0.9 0.012 75 / .45);
  border-radius: 3px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--on); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  font: 600 .9rem var(--sans);
  text-decoration: none;
  border-radius: 3px;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: inherit;
}
.ribbon,
.bb-book-ribbon {
  background: linear-gradient(180deg, var(--ox), var(--ox-d));
  color: #fff;
  padding: 0 26px 8px;
  min-height: 52px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
  border-radius: 0;
  border: 0;
}
.ribbon:hover,
.bb-book-ribbon:hover { background: var(--ox-d); }
.top .ribbon {
  min-height: 44px;
  padding: 0 16px 6px;
  flex: none;
}
.header-login {
  flex: none;
  margin-right: 2px;
  white-space: nowrap;
}
.link {
  color: var(--on);
  font-size: .9rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.paper a.link {
  color: var(--ox-ink);
}

/* Hero */
.hero { padding: 72px 0 120px; }
.hero .wrap {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
}
.hero .wrap > * { min-width: 0; }
.hero .lbl { color: var(--on2); }
.hero h1 {
  font: 400 clamp(2.9rem, 5.6vw, 5rem)/1 var(--serif);
  letter-spacing: -.02em;
  color: #fff;
  margin: .45em 0 .5em;
}
.hero h1 em { color: var(--gold); font-style: italic; }
.hero .sub { color: var(--on2); max-width: 44ch; }
.ctas { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 26px; }

.bookwrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 340px;
}
.book {
  position: relative;
  width: 220px;
  height: 300px;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  flex: none;
}
.pages {
  position: absolute;
  inset: 6px -8px 6px 6px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 2px, oklch(0.85 0.006 90) 2px 3px);
  border-radius: 3px 6px 6px 3px;
}
.cover {
  position: absolute;
  inset: 0;
  border-radius: 4px 10px 10px 4px;
  background: radial-gradient(120% 90% at 30% 20%, oklch(0.25 0.014 50), var(--leather));
  box-shadow: 0 34px 60px -24px #0009, inset 0 0 0 1px oklch(1 0 0 / .05);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid oklch(0.83 0.09 82 / .2);
  border-radius: 3px;
}
.cover b {
  font: 400 1.28rem/1.05 var(--serif);
  color: oklch(0.8 0.07 80);
  text-align: center;
  padding: 0 14px;
}
.cover i {
  font: 600 calc(.6rem * 1.2) var(--label);
  letter-spacing: .14em;
  text-transform: lowercase;
  color: oklch(0.7 0.06 80);
  font-style: normal;
  margin-top: 6px;
}
.band {
  position: absolute;
  top: -6px;
  right: 34px;
  width: 20px;
  height: calc(100% + 46px);
  background: linear-gradient(90deg, var(--ox-d), var(--ox));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
  z-index: 3;
}
@-webkit-keyframes cover-open {
  0% { -webkit-transform: rotateY(0deg) translateY(18px); transform: rotateY(0deg) translateY(18px); }
  55% { -webkit-transform: rotateY(-26deg) translateY(-4px); transform: rotateY(-26deg) translateY(-4px); }
  100% { -webkit-transform: rotateY(-18deg) translateY(0); transform: rotateY(-18deg) translateY(0); }
}
@keyframes cover-open {
  0% { -webkit-transform: rotateY(0deg) translateY(18px); transform: rotateY(0deg) translateY(18px); }
  55% { -webkit-transform: rotateY(-26deg) translateY(-4px); transform: rotateY(-26deg) translateY(-4px); }
  100% { -webkit-transform: rotateY(-18deg) translateY(0); transform: rotateY(-18deg) translateY(0); }
}
.bookwrap .card {
  background-color: var(--paper);
  background-image: none;
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 2px;
  box-shadow: 0 14px 30px -12px #000a;
  width: 150px;
  transform: rotate(-2deg);
}
.bookwrap .card b {
  font: 400 1.05rem var(--serif);
  display: block;
  border-bottom: 1px solid oklch(0.6 0.12 30 / .6);
}
.bookwrap .card span:not(.stamp) { font: .62rem/1.6 var(--sans); display: block; margin: 4px 0; }
.bookwrap .card .stamp {
  display: inline-block;
  font: 600 calc(.58rem * 1.2)/1.4 var(--label);
  font-style: normal;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--ox-ink);
  border: 1px solid var(--ox-ink);
  padding: 1px 5px;
}
.tabs { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tabs a {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 124px;
  padding: 0 12px;
  background: var(--paper);
  color: var(--ink);
  font: 600 .78rem var(--sans);
  text-decoration: none;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 8px 18px -10px #000a;
}

/* Spreads */
.inside {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.inside h2 { font: 400 2rem var(--serif); color: #fff; }
.inside .lbl { color: var(--on2); }
#ladder, #intel, #solo, #pricing, #inside, #ads { scroll-margin-top: 76px; }
.spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 96px;
  color: var(--ink);
  background: var(--leather);
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 40px 70px -40px #000;
  min-width: 0;
}
.spread.one { grid-template-columns: 1fr; }
.paper,
.spread,
.page,
.form-card,
.pricing-card,
.bookwrap .card,
.index {
  background-image: none;
}
.paper {
  background-color: var(--paper);
  background-image: none;
  padding: 26px 30px 22px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 0;
}
.spread > .paper:last-child { padding-right: 64px; }
.spread > .paper:first-child {
  border-radius: 3px 0 0 3px;
  box-shadow: inset -18px 0 24px -20px oklch(0.3 0.01 60 / .45);
}
.spread > .paper + .paper {
  border-radius: 0 3px 3px 0;
  box-shadow: inset 18px 0 24px -20px oklch(0.3 0.01 60 / .45);
  border-left: 1px solid oklch(0.75 0.008 80);
}
.spread.one > .paper { border-radius: 3px; box-shadow: none; }
.ph {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 7px;
  margin-bottom: 22px;
  color: var(--ink2);
  min-width: 0;
}
.ph span { min-width: 0; }
.ph span:last-child { text-align: right; }
.pf {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  color: var(--ink2);
  font: 500 .68rem/1.4 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}
.paper h2 {
  font: 400 clamp(1.8rem, 2.8vw, 2.3rem)/1.08 var(--serif);
  letter-spacing: -.01em;
  margin: 6px 0 12px;
  color: var(--ink);
}
.paper h3 { font: 600 .95rem var(--sans); margin-bottom: 2px; color: var(--ink); }
.paper h3.serif-h { font: 400 1.5rem var(--serif); margin: 14px 0 6px; }
.paper h3.serif-h.tight { margin: 6px 0 6px; }
.paper p { color: oklch(0.33 0.01 60); }
.paper .box,
.box {
  margin: 8px 0 18px;
  padding: 2px 0 2px 14px;
  border: 0;
  border-left: 2px solid var(--ox);
  border-radius: 0;
  background: none;
  background-image: none;
  font: italic 400 1.25rem/1.35 var(--serif);
  color: var(--ink);
}
.box.flush { margin-bottom: 0; }
.sp-ribbon {
  position: absolute;
  right: 28px;
  top: -6px;
  width: 22px;
  height: calc(100% + 40px);
  background: linear-gradient(90deg, var(--ox-d), var(--ox));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
  z-index: 2;
  pointer-events: none;
}
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th {
  font: 600 calc(.62rem * 1.2) var(--label);
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--ink2);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule);
}
td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
td small { display: block; font: .68rem/1.4 var(--sans); color: var(--ink2); }
.index th[scope="row"] {
  font: 400 .82rem var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
}
.tbar {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: .8rem;
  font-weight: 600;
  min-height: 44px;
}
.tbar .lbl { color: oklch(0.8 0.01 80); }
.pill {
  display: inline-block;
  font: 500 .64rem var(--sans);
  padding: 1px 6px;
  border: 1px solid var(--ink);
  white-space: nowrap;
  color: var(--ink);
}
.pill.on { background: var(--ox); border-color: var(--ox); color: #fff; }
.pill.r { border-color: var(--ox-ink); color: var(--ox-ink); }
.name { font: 400 1.05rem var(--serif); }
.tw { overflow-x: auto; max-width: 100%; }
.cols4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 10px 0 18px;
}
.cols4 > div { padding: 12px 14px 14px 0; color: oklch(0.33 0.01 60); min-width: 0; }
.cols4 > div + div { border-left: 1px solid var(--line); padding-left: 14px; }
.tl {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--rule);
  font-size: .82rem;
  color: var(--ink);
}
.tl span { padding: 6px 6px 0 0; }
.tl .lbl { display: block; color: var(--ink2); }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
  color: oklch(0.33 0.01 60);
}
.steps .n {
  font: 500 .66rem var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ox-ink);
  padding-top: 3px;
}
.steps strong, .bul strong { color: var(--ink); }
.bul { list-style: none; padding: 0; margin: 0 0 18px; }
.bul li {
  position: relative;
  padding: 8px 0 8px 18px;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  color: oklch(0.33 0.01 60);
}
.bul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  background: var(--ox);
}
.control-h { margin: 6px 0; font: 600 .95rem var(--sans); color: var(--ink); }
.ads-note { margin-top: 14px; }
.index {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 22px 40px -18px oklch(0.2 0.01 60 / .55);
  transform: rotate(-1.5deg);
  max-width: 330px;
  margin: 20px auto;
  padding: 14px 16px 18px;
  border-top: 2px solid oklch(0.62 0.13 30);
}
.index.note-card { margin: 22px 0 0; max-width: 360px; }
.index .ph { margin-bottom: 8px; }
.index .from { color: var(--ink2); margin: 0 0 6px; }
.index .quote {
  font: 400 1.3rem/1.25 var(--serif);
  color: var(--ink);
  margin: 0;
}
.index .price { font: 400 3rem/1 var(--serif); color: var(--ink); margin: 0; }
.index .price small { font: .75rem var(--sans); color: var(--ink2); }
.index table td { padding: 7px 0; font-size: .82rem; }
.index td + td { text-align: right; }
.margin-note {
  margin-top: 16px;
  font: italic 400 1.25rem var(--serif);
  color: var(--ox-ink);
}
.closer {
  margin-top: 18px;
  font: 400 1.3rem/1.3 var(--serif);
  color: var(--ink);
}
tr.ask td { background: oklch(0.9 0.03 60); }
tr.ask small { font: .62rem/1.4 var(--sans); margin-top: 3px; color: var(--ox-ink); }

.ladder-climb { position: relative; }
.rung-marker {
  position: absolute;
  left: 2px;
  top: 0;
  width: 3px;
  height: 18px;
  margin-top: -9px;
  background: var(--ox);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* Close + footer */
.close { border-top: 1px solid oklch(1 0 0 / .1); padding: 56px 0 30px; }
.close h2 {
  font: 400 clamp(2.4rem, 4.6vw, 3.6rem)/1 var(--serif);
  color: #fff;
  margin-bottom: .4em;
}
.close p { color: var(--on2); }
.close .ctas { flex-direction: row; align-items: center; }
.close .lbl { color: var(--on2); margin-top: 22px; }
footer, .site-foot {
  text-align: center;
  color: var(--on2);
  font-size: .8rem;
  padding: 30px 20px 44px;
}
footer p { margin: 0 auto; max-width: 70ch; }
footer a, .site-foot a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin: 0 6px;
  padding: 0 4px;
}
.foot-brand {
  display: flex;
  justify-content: center;
  margin: 0 auto 4px;
  text-decoration: none;
}
/* The logo file has a viewBox and no width or height. Inside this
   shrink-to-fit link, max-width: 100% resolves against an indefinite
   size and the image collapses (the link falls back to its 8px of
   horizontal padding). Size it to the header lockup: 22px tall, and
   16px under 640px, at the file's aspect ratio so the wordmark stays whole. */
footer.site-foot .foot-brand img {
  flex: none;
  width: calc(22px * 20811.9 / 2256.07);
  height: 22px;
  max-width: none;
  max-height: none;
}
.secnav { display: none; }

/* Contact + book-a-demo */
body.contact .section, body.demo .section,
body.contact .sheet, body.demo .sheet { padding: 56px 0 80px; }
body.contact .container, body.demo .container,
body.contact .sheet .wrap, body.demo .sheet .wrap { max-width: 760px; }
body.contact .text-muted, body.demo .text-muted { color: var(--on2); margin-top: 22px; }
body.contact .text-muted a, body.demo .text-muted a {
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.form-card .btn.ribbon { margin-top: 4px; border: 0; }
body.contact h1, body.demo h1, body.pricing h1 {
  font: 400 clamp(2.3rem, 5vw, 3.6rem)/1.05 var(--serif);
  color: #fff;
  margin: .35em 0 .4em;
}
body.contact .intro, body.demo .intro { color: var(--on2); max-width: 46ch; }
.form-card, .form-grid.form-card {
  background-color: var(--paper);
  background-image: none;
  color: var(--ink);
  padding: 26px 28px 28px;
  border-radius: 4px;
  max-width: 720px;
  margin: 8px auto 0;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: grid; gap: 6px; min-width: 0; }
.form-field--full { grid-column: 1 / -1; }
.form-field label, .form-card label {
  font: 600 .78rem var(--sans);
  color: var(--ink);
}
.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font: 1rem/1.4 var(--sans);
}
.textarea { min-height: 8rem; resize: vertical; }
.hint { margin: 0; font-size: .82rem; color: var(--ink2); }
.form-status { margin-top: 8px; min-height: 1.5em; font-weight: 600; color: var(--ink); }
.form-status[data-state="ok"] { color: oklch(0.38 0.09 150); }
.form-status[data-state="error"] { color: var(--ox-ink); }
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sheet .fine, .sheet .text-muted {
  color: var(--on2);
  margin-top: 22px;
}
.sheet .fine a, .sheet .text-muted a {
  color: var(--gold);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.form-card .ribbon, .form-grid .ribbon { border: 0; }

/* Pricing chrome. Plan copy and checkout hrefs stay in the HTML. */
body.pricing { color: var(--on); }
body.pricing .section { padding: 36px 0 56px; }
body.pricing .section-head { max-width: 42rem; margin: 0 auto 32px; }
body.pricing .section-head h1,
body.pricing .section-head h2,
body.pricing .cta-banner h2 {
  font: 400 clamp(2rem, 4.4vw, 3.2rem)/1.08 var(--serif);
  color: #fff;
  letter-spacing: -.01em;
}
body.pricing .section-head p,
body.pricing .cta-sub,
body.pricing .container > p.text-muted {
  color: var(--on2);
  font-size: 1.05rem;
  line-height: 1.5;
}
body.pricing .eyebrow {
  display: block;
  font: 600 calc(.68rem * 1.2)/1.4 var(--label);
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--gold);
  margin-bottom: 8px;
}
body.pricing .feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
body.pricing .pricing-card {
  background-color: var(--paper);
  background-image: none;
  color: var(--ink);
  border-radius: 4px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: auto;
  max-width: none;
  min-width: 0;
  position: static;
  inset: auto;
  -webkit-transform: none;
  transform: none;
  border: 0;
  box-shadow: none;
}
body.pricing .pricing-card.is-featured { box-shadow: inset 0 0 0 2px var(--ox); }
body.pricing .pricing-card h3 {
  font: 400 1.7rem/1.1 var(--serif);
  color: var(--ink);
}
body.pricing .pricing-price {
  font: 400 clamp(2rem, 7vw, 3rem)/1 var(--serif);
  color: var(--ink);
  overflow-wrap: anywhere;
}
body.pricing .pricing-period,
body.pricing .pricing-billed,
body.pricing .pricing-card .text-muted { color: var(--ink2); margin: 0; }
body.pricing .pricing-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.pricing .pricing-card li {
  position: relative;
  padding-left: 16px;
  color: oklch(0.33 0.01 60);
  font-size: .92rem;
  line-height: 1.4;
}
body.pricing .pricing-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  background: var(--ox);
}
body.pricing .badge {
  align-self: flex-start;
  font: 600 calc(.64rem * 1.2)/1.4 var(--label);
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--ox-ink);
  border: 1px solid var(--ox-ink);
  border-radius: 0;
  background: transparent;
  padding: 4px 8px;
}
body.pricing .pricing-card > .btn {
  align-self: flex-start;
  margin-top: auto;
  text-decoration: none;
}
body.pricing .billing-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
body.pricing .billing-toggle-label {
  margin: 0;
  font: 600 calc(.68rem * 1.2)/1.4 var(--label);
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--on2);
}
body.pricing .billing-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid oklch(0.9 0.012 75 / .45);
  border-radius: 3px;
  background: transparent;
}
body.pricing .billing-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--on);
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border-radius: 2px;
  font: 600 .9rem var(--sans);
  cursor: pointer;
}
body.pricing .billing-toggle button.is-active { background: var(--ox); color: #fff; }
body.pricing .trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 28px;
}
body.pricing .trust-strip a,
body.pricing .trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--on2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.pricing .trust-strip .ts-tick { color: var(--gold); text-decoration: none; }
body.pricing .faq-list {
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 4px;
  padding: 6px 8px 10px;
}
body.pricing .accordion {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  margin: 0;
}
body.pricing .accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 12px 12px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
body.pricing .accordion summary::-webkit-details-marker { display: none; }
body.pricing .accordion summary::after { content: "+"; color: var(--ink2); font-weight: 600; }
body.pricing .accordion[open] summary::after { content: "−"; }
body.pricing .accordion .accordion-body {
  padding: 0 12px 16px;
  color: oklch(0.33 0.01 60);
  line-height: 1.5;
}
body.pricing .cta-banner { text-align: center; padding-top: 12px; }
body.pricing .container > p.text-muted { text-align: center; margin: 28px auto 0; }
body.pricing .container > p.text-muted a,
body.pricing .accordion a {
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

@media (min-width: 901px) {
  .nw { white-space: nowrap; }
  .hero .wrap { grid-template-columns: 1.3fr .7fr; gap: 24px; }
  .hero h1 { font-size: clamp(3rem, 5vw, 4.3rem); }
  .bookwrap { justify-content: flex-end; }
  .bookwrap .card {
    position: absolute;
    right: 150px;
    top: -4px;
    z-index: 4;
    width: 136px;
  }
}

@media (max-width: 699px) {
  body.pricing .feature-grid { grid-template-columns: 1fr; }
  body.pricing .pricing-card .btn {
    align-self: stretch;
    width: 100%;
    justify-content: center;
  }
  .sp-ribbon {
    right: 6px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    height: auto;
    clip-path: none;
  }
  .spread > .paper,
  .spread > .paper:last-child { padding-right: 22px; }
  .spread .ph { flex-wrap: wrap; row-gap: 2px; }
  .spread .ph span:last-child { margin-left: auto; }
}

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .spread { grid-template-columns: 1fr; }
  .spread > .paper + .paper {
    border-left: 0;
    border-top: 1px dashed oklch(0.75 0.008 80);
    border-radius: 0 0 3px 3px;
    box-shadow: none;
  }
  .spread > .paper:first-child { border-radius: 3px 3px 0 0; box-shadow: none; }
  .cols4 { grid-template-columns: 1fr 1fr; }
  .cols4 > div:nth-child(3) { border-left: 0; padding-left: 0; }
}

@media (max-width: 640px) {
  .wrap, .container { padding: 0 20px; }
  .top .top-links { display: none; }
  .top.menu-open .top-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: oklch(0.17 0.01 55 / .98);
    padding: 6px 20px 12px;
    border-bottom: 1px solid oklch(1 0 0 / .08);
    z-index: 20;
  }
  .top.menu-open .top-links a { min-height: 48px; }
  .nav-toggle { display: inline-flex; }
  .top .wrap { height: 60px; gap: 10px; }
  .header-login { font-size: .78rem; padding: 0 2px; }
  .top .ribbon { padding: 0 12px 6px; }
  .brand img, .foot-brand img,
  footer.site-foot .foot-brand img {
    width: calc(16px * 20811.9 / 2256.07);
    height: 16px;
    max-height: none;
  }
  .hero { padding: 22px 0 40px; }
  .hero .lbl { font-size: calc(.64rem * 1.2); }
  .hero h1 { font-size: 2.65rem; margin: .35em 0 .45em; }
  .ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .ctas .ribbon { width: 100%; min-height: 58px; padding-bottom: 10px; }
  .ctas .link { align-self: flex-start; }
  body.doc .cta-banner { flex-direction: column; align-items: stretch; }
  body.doc .cta-banner .ctas,
  body.contact .ctas { width: 100%; }
  body.contact .ctas .link { align-self: center; }
  .close .ctas { flex-direction: column; align-items: stretch; }
  .bookwrap { justify-content: flex-end; gap: 14px; min-height: 0; padding: 20px 0 30px; }
  .book { width: 112px; height: 150px; }
  .band { right: 16px; width: 12px; height: calc(100% + 22px); }
  .cover b { font-size: .68rem; padding: 0 8px; }
  .cover i { font-size: calc(.42rem * 1.2); }
  .cover::before { inset: 7px; }
  .bookwrap .card { width: 124px; position: static; }
  .tabs { display: none; }
  .spread { margin-bottom: 56px; }
  .paper { padding: 20px 18px 16px; }
  .cols4 { grid-template-columns: 1fr; }
  .cols4 > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .tl { grid-template-columns: repeat(3, 1fr); }
  .spread > .paper,
  .spread > .paper:last-child { padding-right: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card, .form-grid.form-card { padding: 20px 16px 22px; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: 80px; }
  .secnav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: oklch(0.17 0.01 55 / .96);
    backdrop-filter: blur(8px);
    border-top: 1px solid oklch(1 0 0 / .08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .secnav a {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font: 600 .68rem/1.15 var(--sans);
    text-decoration: none;
    color: var(--on);
    padding: 6px 2px;
  }
  .secnav a[aria-current="page"] {
    color: var(--gold);
    box-shadow: inset 0 2px 0 var(--gold);
  }
  .secnav a:active { background: oklch(1 0 0 / .06); }
}

/* Motion is on unless the reader asks for less. Do not gate the tweens on
   prefers-reduced-motion: no-preference: some WebKit builds never match it,
   and then the cover, spreads, and rows stay frozen. Hover rules stay in
   (hover: hover) so a phone does not need a pointer to run the rest.
   The transition lives on html.motion, which the script adds after the
   hidden pose has painted. Putting it on .in instead starts and ends in
   the same frame, and iOS WebKit skips the tween. */
.cover {
  -webkit-animation: cover-open 560ms var(--ease) both;
  animation: cover-open 560ms var(--ease) both;
}
.js .spread.settled {
  will-change: auto;
}
.js .spread:not(.in) {
  opacity: 0;
  -webkit-transform: perspective(1400px) rotateY(12deg) translate3d(0, 36px, 0);
  transform: perspective(1400px) rotateY(12deg) translate3d(0, 36px, 0);
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
.js.motion .spread {
  -webkit-transition: -webkit-transform 560ms var(--ease), opacity 560ms var(--ease);
  transition: transform 560ms var(--ease), opacity 560ms var(--ease);
}
.js .spread.in {
  opacity: 1;
  -webkit-transform: perspective(1400px) rotateY(0deg) translate3d(0, 0, 0);
  transform: perspective(1400px) rotateY(0deg) translate3d(0, 0, 0);
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
.js .spread.in.settled {
  -webkit-transform: none;
  transform: none;
  -webkit-transition: none;
  transition: none;
}
.js .nw-block:not(.in) .nw-rows td,
.js .nw-block:not(.in) .margin-note {
  opacity: 0;
  -webkit-transform: translate3d(-14px, 0, 0);
  transform: translate3d(-14px, 0, 0);
}
.js .nw-block.in .nw-rows td,
.js .nw-block.in .margin-note {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}
.js.motion .nw-block .nw-rows td,
.js.motion .nw-block .margin-note {
  -webkit-transition: opacity 380ms var(--ease), -webkit-transform 380ms var(--ease);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.js.motion .nw-block .nw-rows tr:nth-child(2) td { -webkit-transition-delay: 45ms; transition-delay: 45ms; }
.js.motion .nw-block .nw-rows tr:nth-child(3) td { -webkit-transition-delay: 90ms; transition-delay: 90ms; }
.js.motion .nw-block .nw-rows tr:nth-child(4) td { -webkit-transition-delay: 135ms; transition-delay: 135ms; }
.js.motion .nw-block .margin-note { -webkit-transition-delay: 200ms; transition-delay: 200ms; }
.js .coach-note:not(.in) {
  opacity: 0;
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}
.js.motion .coach-note {
  -webkit-transition: opacity 520ms var(--ease), -webkit-transform 520ms var(--ease);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.js .coach-note.in {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}
/* Phones get a slower, longer rise. Desktop stays on the 560ms curve above. */
@media (max-width: 768px) {
  .cover {
    -webkit-animation-duration: 880ms;
    animation-duration: 880ms;
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js.motion .spread {
    -webkit-transition: -webkit-transform 880ms cubic-bezier(0.22, 1, 0.36, 1), opacity 880ms cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 880ms cubic-bezier(0.22, 1, 0.36, 1), opacity 880ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js .spread:not(.in) {
    -webkit-transform: perspective(1400px) rotateY(12deg) translate3d(0, 48px, 0);
    transform: perspective(1400px) rotateY(12deg) translate3d(0, 48px, 0);
  }
  .js.motion .nw-block .nw-rows td,
  .js.motion .nw-block .margin-note {
    -webkit-transition-duration: 880ms;
    transition-duration: 880ms;
    -webkit-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js.motion .nw-block .nw-rows tr:nth-child(2) td { -webkit-transition-delay: 100ms; transition-delay: 100ms; }
  .js.motion .nw-block .nw-rows tr:nth-child(3) td { -webkit-transition-delay: 200ms; transition-delay: 200ms; }
  .js.motion .nw-block .nw-rows tr:nth-child(4) td { -webkit-transition-delay: 300ms; transition-delay: 300ms; }
  .js.motion .nw-block .margin-note { -webkit-transition-delay: 400ms; transition-delay: 400ms; }
  .js.motion .coach-note {
    -webkit-transition-duration: 880ms;
    transition-duration: 880ms;
    -webkit-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}
.ribbon, body.pricing .btn-primary {
  -webkit-transition: -webkit-transform 180ms var(--ease);
  transition: transform 180ms var(--ease);
}
.ribbon:focus, .ribbon:focus-visible, .ribbon:active,
body.pricing .btn-primary:focus,
body.pricing .btn-primary:focus-visible,
body.pricing .btn-primary:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
}
.tabs a {
  -webkit-transition: -webkit-transform 200ms var(--ease);
  transition: transform 200ms var(--ease);
}
.tabs a:focus-visible {
  -webkit-transform: translateX(14px);
  transform: translateX(14px);
}
@media (hover: hover) {
  .ribbon:hover, body.pricing .btn-primary:hover {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  .tabs a:hover {
    -webkit-transform: translateX(14px);
    transform: translateX(14px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cover {
    -webkit-animation: none;
    animation: none;
    -webkit-transform: rotateY(-18deg);
    transform: rotateY(-18deg);
    will-change: auto;
  }
  .rung-marker { display: none; }
  .js .spread,
  .js .spread:not(.in),
  .js.motion .spread,
  .js .nw-block td,
  .js .nw-block .nw-rows td,
  .js .nw-block:not(.in) .nw-rows td,
  .js.motion .nw-block .nw-rows td,
  .js .margin-note,
  .js .nw-block:not(.in) .margin-note,
  .js.motion .nw-block .margin-note,
  .js .coach-note,
  .js .coach-note:not(.in),
  .js.motion .coach-note {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-filter: none;
    filter: none;
    -webkit-clip-path: none;
    clip-path: none;
    -webkit-transition: none;
    transition: none;
  }
  .ribbon, .ribbon:hover, .ribbon:focus, .ribbon:active,
  .tabs a, .tabs a:hover, .tabs a:focus-visible,
  body.pricing .btn-primary, body.pricing .btn-primary:hover,
  body.pricing .btn-primary:focus, body.pricing .btn-primary:active {
    -webkit-transform: none;
    transform: none;
    -webkit-transition: none;
    transition: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .top, .secnav { backdrop-filter: none; background: var(--bg); }
}

/* Interior documents: the same paper-on-leather ledger as the home,
   without the old marketing-page bands. Copy stays in the HTML. */
body.doc main {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 20px 72px;
}
body.doc main > .section,
body.doc main > .proof-band,
body.doc main > header.section,
body.doc main > article.section {
  background-color: var(--paper);
  background-image: none;
  color: var(--ink);
  border-radius: 4px;
  padding: 28px 28px 22px;
  margin: 0 0 16px;
}
body.doc .container { max-width: none; padding: 0; }
body.doc h1 {
  font: 400 clamp(2.1rem, 4.6vw, 3.1rem)/1.08 var(--serif);
  color: var(--ink);
  margin: 0 0 .35em;
}
body.doc h2 {
  font: 400 clamp(1.55rem, 3vw, 2.05rem)/1.15 var(--serif);
  color: var(--ink);
  margin: 1.15em 0 .4em;
}
body.doc h3 {
  font: 400 1.35rem/1.25 var(--serif);
  color: var(--ink);
  margin: .9em 0 .25em;
}
body.doc p,
body.doc li { color: oklch(0.33 0.01 60); }
body.doc a { color: var(--ox-ink); }
body.doc .eyebrow {
  display: block;
  font: 600 calc(.68rem * 1.2)/1.4 var(--label);
  letter-spacing: .14em;
  text-transform: lowercase;
  color: var(--ox-ink);
  margin-bottom: 8px;
}
body.doc .eyebrow a { color: inherit; text-decoration: none; }
body.doc .text-muted,
body.doc .blog-date,
body.doc .blog-meta,
body.doc .cta-sub,
body.doc .proof-caption,
body.doc .proof-note { color: var(--ink2); }
body.doc .feature-grid { display: grid; gap: 4px 28px; }
body.doc .feature-card,
body.doc .blog-card {
  background: none;
  background-image: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 0 6px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
body.doc .feature-icon:not(:has(img)) { display: none; }
body.doc .feature-icon:has(img) {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 2px;
  overflow: hidden;
}
body.doc .feature-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.doc ul,
body.doc ol { margin: 0 0 1em; padding-left: 1.15em; }
body.doc li { margin: 0 0 .35em; }
body.doc .proof-big {
  font: 400 2.6rem/1 var(--serif);
  color: var(--ink);
  margin: 0;
}
body.doc .cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
body.doc .cta-banner .ctas { margin-top: 0; }
body.contact .ctas { justify-content: center; margin-top: 22px; }
body.doc .accordion {
  border-top: 1px solid var(--line);
  padding: 4px 0;
}
body.doc .accordion summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font: 600 .95rem/1.35 var(--sans);
  color: var(--ink);
}
body.doc .accordion-body { padding: 0 0 12px; }
body.doc .tag {
  display: inline-block;
  margin-top: 8px;
  font: 600 calc(.64rem * 1.2)/1.4 var(--label);
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--ox-ink);
}
body.doc .miss {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 700px) {
  body.doc .feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body.doc main { padding: 16px 16px 56px; }
  body.doc main > .section,
  body.doc main > .proof-band,
  body.doc main > header.section,
  body.doc main > article.section { padding: 22px 16px 16px; }
  body.doc .feature-grid { grid-template-columns: 1fr; }
}

/* body.doc a paints every link ox-ink and beats a plain .ribbon rule, so the
   header button was dark red on red. Keep :visited in its own rule: a group
   that includes :visited does not apply to unvisited links. */
a.btn.ribbon,
a.btn.ribbon:hover,
a.btn.ribbon:focus,
a.btn.ribbon:focus-visible,
a.btn.ribbon:active,
a.btn.bb-book-ribbon,
a.btn.bb-book-ribbon:hover,
a.btn.bb-book-ribbon:focus,
a.btn.bb-book-ribbon:focus-visible,
a.btn.bb-book-ribbon:active,
button.btn.ribbon,
button.btn.ribbon:hover,
button.btn.ribbon:focus,
button.btn.ribbon:focus-visible,
button.btn.ribbon:active {
  color: #fff;
  text-decoration: none;
}
a.btn.ribbon:visited,
a.btn.bb-book-ribbon:visited {
  color: #fff;
}

/* body.doc a is (0, 1, 2) and beats .secnav a, so phone tabs on document
   pages were ox-ink on the dark bar. nav.secnav a ties that and comes later.
   :visited stays in its own rule so unvisited tabs still match. */
@media (max-width: 640px) {
  nav.secnav a {
    color: var(--on);
    text-decoration: none;
  }
  nav.secnav a[aria-current="page"] {
    color: var(--gold);
    box-shadow: inset 0 2px 0 var(--gold);
  }
}
nav.secnav a:visited { color: var(--on); }
nav.secnav a[aria-current="page"]:visited { color: var(--gold); }

/* body.doc a would paint the header Log in and the footer links ox-ink
   on the dark bar. These tie or beat that rule. :visited stays separate. */
header.top a.header-login,
header.top a.header-login:hover,
header.top a.header-login:focus,
header.top a.header-login:active {
  color: var(--on);
}
header.top a.header-login:visited { color: var(--on); }
footer.site-foot a { color: var(--on2); }
footer.site-foot a:visited { color: var(--on2); }