/* velvetbetdobrasil.com v5: the preparation workbook */

@font-face {
  font-family: "Pathway Extreme";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 75% 100%;
  src: url(assets/fonts/pathway-extreme-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pathway Extreme";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 75% 100%;
  src: url(assets/fonts/pathway-extreme-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --vb-bg: #11110F;
  --vb-surface: #131313;
  --vb-surface-2: #181916;
  --vb-surface-3: #1E1D1D;
  --vb-text: #EAEAEA;
  --vb-text-body: rgba(255, 255, 255, .6);
  --vb-text-muted: #BCBCC0;
  --vb-brand: #95F400;
  --vb-on-brand: #11110F;
  --vb-border: #3C3C3D;
  --vb-accent: #FFDD2A;
  --vb-error: #FE0000;
  color-scheme: dark;

  --prose: rgba(255, 255, 255, .76);
  --rule: rgba(255, 255, 255, .08);
  --rule-2: rgba(255, 255, 255, .16);
  --rule-3: rgba(255, 255, 255, .12);
  --frame: rgba(255, 255, 255, .34);
  --mline: rgba(254, 0, 0, .5);
  --slip: color-mix(in srgb, var(--vb-surface-3) 93%, #fff);
  --note: color-mix(in srgb, var(--vb-surface-2) 94%, #fff);
  --lime-soft: rgba(149, 244, 0, .14);
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.6l3.5 3.4 7.3-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.6l3.5 3.4 7.3-8' fill='none' stroke='%2311110F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --font: "Pathway Extreme", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --page: 1200px;
  --g: 16px;
  --pitch: 24px;
  --gap: 44px;
  --pad-l: 16px;
  --pad-r: 16px;
  --tg: 32px;
  --slip-w: 440px;
  --slip-shift: 28px;
  --overhang: 150px;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--vb-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  background: var(--vb-bg);
  color: var(--prose);
  font-family: var(--font);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
a, summary, label, input { touch-action: manipulation; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; color: var(--vb-text); font-weight: 750; text-wrap: balance; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
b, strong { font-weight: 600; color: var(--vb-text); }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
a {
  color: var(--vb-text);
  text-decoration-line: underline;
  text-decoration-color: var(--vb-brand);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
}
a:hover { color: var(--vb-brand); }
:focus-visible {
  outline: 2px solid var(--vb-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--vb-bg);
}
.ic { width: 20px; height: 20px; flex: none; }

/* folio header */
.folio-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: calc(var(--page) + 2 * var(--g));
  margin-inline: auto;
  position: relative;
  padding: 0 var(--g);
}
.folio-in::after { content: ""; position: absolute; left: var(--g); right: var(--g); bottom: 0; height: 1px; background: var(--rule-2); }
.folio-mark {
  display: inline-flex;
  align-items: baseline;
  gap: .28em;
  min-height: 44px;
  padding-block: 12px;
  color: var(--vb-text);
  font-size: 19px;
  line-height: 20px;
  white-space: nowrap;
  text-decoration: none;
}
.folio-mark:hover { color: var(--vb-text); }
.fm-lead { font-weight: 750; font-stretch: 86%; }
.fm-acc { font-weight: 400; font-stretch: 76%; color: var(--vb-text-muted); }
.tabs-ruled { display: flex; align-items: center; gap: 10px; }
.tab-note { display: none; }

/* the page counter: the nav's pages as folio numbers (phones and tablets) */
@media (max-width: 1023.98px) {
  .tabs-ruled ul { display: flex; list-style: none; counter-reset: folio; }
  .tabs-ruled li { counter-increment: folio; }
  .tabs-ruled ul a {
    display: grid;
    place-items: center;
    width: 30px;
    min-height: 44px;
    font-size: 14px;
    line-height: 16px;
    color: var(--vb-text-muted);
    text-decoration: none;
  }
  .tabs-ruled ul a .tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabs-ruled ul a::before { content: counter(folio, decimal-leading-zero); font-size: 14px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .tabs-ruled ul a:hover { color: var(--vb-text); }
  .tabs-ruled ul a[aria-current="page"] { color: var(--vb-text); box-shadow: inset 0 -2px 0 var(--vb-brand); }
}

/* phones: the counter becomes index tabs down the cover's ruled margin */
@media (max-width: 719.98px) {
  .folio { position: relative; z-index: 2; }
  .tabs-ruled { position: absolute; top: calc(100% + 11px); left: 9px; }
  .tabs-ruled ul { flex-direction: column; }
  .tabs-ruled ul a { width: 30px; }
  .tabs-ruled ul a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--vb-brand); }
}

/* the independence line: a running head above the folio on desktop, right after the deal below 1024 */
.folio-run { display: none; }
/* the independence line, right after the deal */
main > .folio-tag {
  margin-top: 14px;
  font-size: 14px;
  line-height: 20px;
  color: var(--vb-text-muted);
}

/* main frame */
main {
  display: block;
  max-width: calc(var(--page) + 2 * var(--g));
  margin-inline: auto;
}
main > * { margin-inline: var(--g); }
main > .cover, main > header.hero, main > .sheet, main > section { margin-inline: 0; }

/* the cover sheet and the margin line */
.cover, main > header.hero {
  position: relative;
  padding: 12px var(--g) 16px;
  background: var(--vb-surface-3);
  border-bottom: 1px solid var(--rule-2);
}
.cover::before, main > header.hero::before, .sheet::before, main > section::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 8px;
  width: 1px;
  background: var(--mline);
  pointer-events: none;
}
.cover-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-bottom: 6px;
  border-bottom: 3px double var(--rule-2);
}
.cover h1, main > header.hero h1 {
  font-size: 32px;
  line-height: 38px;
  font-stretch: 82%;
  letter-spacing: -.01em;
}
main > header.hero h1 { padding-bottom: 8px; border-bottom: 3px double var(--rule-2); }
.cover-plate, main > header.hero .plate {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  background: var(--vb-bg);
  border: 1px solid var(--vb-border);
  border-radius: 6px;
}
main > header.hero .plate { margin-bottom: 10px; }
.cover-plate img, main > header.hero .plate img { display: block; width: 104px; height: auto; }
.cover p, main > header.hero p {
  max-width: 560px;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--pitch) - 1px), var(--rule) calc(var(--pitch) - 1px) var(--pitch));
}
.cover .lede, main > header.hero .lede {
  margin-top: 6px;
  font-size: 15px;
  line-height: var(--pitch);
  font-weight: 600;
  font-stretch: 86%;
  color: var(--vb-text);
}
.cover .intro, main > header.hero .intro {
  font-size: 16px;
  line-height: var(--pitch);
  font-stretch: 100%;
  color: var(--prose);
}

@media (max-width: 719.98px) {
  main > .cover, main > header.hero {
    margin: 6px 6px 0;
    padding: 10px 10px 12px 46px;
    border: 1px solid var(--frame);
    border-radius: 3px;
  }
  .cover::before, main > header.hero::before { left: 36px; }
  main > header.hero { min-height: 252px; }
  .en-col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .cover-title { display: block; padding-bottom: 0; border-bottom: 0; }
  .cover h1 { font-size: 36px; line-height: 40px; }
  .cover-plate { position: absolute; top: -1px; right: -1px; border-color: var(--frame); border-radius: 0 3px 0 6px; }
  .cover .lede { margin-top: 6px; padding-bottom: 6px; line-height: 22px; background: none; border-bottom: 1px solid var(--frame); }
  .cover .intro {
    margin-top: 4px;
    line-height: 24px;
    background: repeating-linear-gradient(to bottom, transparent 0 23px, var(--rule-3) 23px 24px);
  }
}

/* the offset foldout slip (deal) */
.slip {
  position: relative;
  z-index: 2;
  margin: -8px var(--g) 0 calc(var(--g) + 12px);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .55));
}
.slip-in {
  --fold: 18px;
  position: relative;
  padding: 12px 16px 16px;
  border-radius: 10px 0 10px 10px;
  background: linear-gradient(225deg, transparent var(--fold), var(--slip) calc(var(--fold) + .5px));
}
.slip::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 25.5px;
  height: 25.5px;
  border-radius: 0 0 0 4px;
  background: linear-gradient(225deg, transparent 50%, var(--vb-brand) 50%);
  pointer-events: none;
}
.slip-in { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.slip-in > * { grid-column: 1 / -1; }
.slip-plate { display: inline-flex; grid-column: 1; justify-self: start; }
.slip-plate img { display: block; width: 104px; height: auto; }
.slip-kicker {
  grid-column: 2;
  padding-left: 14px;
  border-left: 1px solid var(--rule-2);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--vb-text-muted);
}
.slip-offer {
  margin-top: 12px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 750;
  font-stretch: 84%;
  color: var(--vb-text);
}
.slip-terms { list-style: none; margin-top: 12px; border-top: 1px solid var(--rule-2); }
.slip-terms li {
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  line-height: 24px;
  color: var(--prose);
}
.slip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 18px;
  border-radius: 7px;
  background: var(--vb-brand);
  color: var(--vb-on-brand);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.slip-btn:hover { color: var(--vb-on-brand); background: color-mix(in srgb, var(--vb-brand) 86%, #fff); }
.slip-btn .ic { width: 18px; height: 18px; }
.slip-foot { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--vb-text-muted); }
.slip-meta { display: flex; align-items: center; gap: 10px; }
.slip-age {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid var(--vb-text-muted);
  border-radius: 4px;
  font-weight: 600;
  color: var(--vb-text);
}
.slip-aff { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--prose); }
@media (max-width: 719.98px) {
  .slip-kicker { padding-right: 14px; font-size: 14px; line-height: 19px; }
  .slip-plate { align-self: start; padding-top: 1px; }
  .slip-in { padding-top: 10px; }
}

/* ruled page index (mobile and tablet) */
.index-ruled { margin-top: 30px; }
.index-label {
  padding-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--vb-text-muted);
}
.index-ruled ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  list-style: none;
  border-top: 1px solid var(--rule-2);
}
.index-ruled a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding-block: 4px;
  border-bottom: 1px solid var(--rule);
  color: var(--vb-text);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
}
.index-ruled a:hover, .index-ruled a[aria-current="page"] { color: var(--vb-brand); }
.index-ruled .ic { display: none; }
.index-ruled a > span { flex: 1 1 auto; min-width: 0; }
.index-ruled ul { counter-reset: folio; }
.index-ruled li { counter-increment: folio; }
.index-ruled a::before {
  content: counter(folio, decimal-leading-zero);
  flex: none;
  min-width: 2ch;
  color: var(--vb-text-muted);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* sheets */
.sheet, main > section {
  position: relative;
  margin-top: var(--gap);
  padding: 26px var(--g) 30px;
  background: var(--vb-surface-2);
  border-block: 1px solid var(--rule-2);
}
.sheet > *, main > section > * { min-width: 0; }
.sheet > * + *, main > section > * + * { margin-top: 18px; }
.sheet > h2, main > section > h2 {
  padding-bottom: 12px;
  border-bottom: 3px double var(--rule-2);
  font-size: 24px;
  line-height: 30px;
  font-stretch: 86%;
}
.sheet > h2 + *, main > section > h2 + * { margin-top: 20px; }
.sheet-copy, main > section > p { max-width: 32em; }
.sheet-copy > * + * { margin-top: 14px; }
main > section > h3 { font-size: 19px; line-height: 26px; font-stretch: 88%; }

/* the document checklist (tool) */
.checklist { position: relative; }
.checklist::after { content: ""; display: block; height: 44px; }
.tally {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  background: var(--vb-surface-3);
  border: 1px solid var(--vb-border);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.meter {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--vb-text);
  font-variant-numeric: tabular-nums;
}
.tally-bar { display: flex; align-items: center; gap: 3px; flex: none; }
.tally-bar i { width: 14px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .16); }
.tally-bar b { width: 6px; }
.checklist:has(.col:nth-child(1) .check-row:nth-child(1) input:checked) .tally-bar i:nth-of-type(1),
.checklist:has(.col:nth-child(1) .check-row:nth-child(2) input:checked) .tally-bar i:nth-of-type(2),
.checklist:has(.col:nth-child(1) .check-row:nth-child(3) input:checked) .tally-bar i:nth-of-type(3),
.checklist:has(.col:nth-child(2) .check-row:nth-child(1) input:checked) .tally-bar i:nth-of-type(4),
.checklist:has(.col:nth-child(2) .check-row:nth-child(2) input:checked) .tally-bar i:nth-of-type(5),
.checklist:has(.col:nth-child(3) .check-row:nth-child(1) input:checked) .tally-bar i:nth-of-type(6),
.checklist:has(.col:nth-child(3) .check-row:nth-child(2) input:checked) .tally-bar i:nth-of-type(7) {
  background: var(--vb-brand);
}
.checklist:not(:has(input:not(:checked))) .tally { border-color: var(--vb-brand); }
.col { margin-top: 24px; }
.col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  line-height: 26px;
  font-stretch: 88%;
}
.col:not(:has(input:not(:checked))) h3::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tick-ink) center / 12px no-repeat, var(--vb-brand);
}
.col .why { margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--vb-text-muted); }
.col ul { list-style: none; margin-top: 10px; border-top: 1px solid var(--rule-2); }
.check-row { border-bottom: 1px solid var(--rule); }
.chk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 56px;
  padding: 14px 4px 14px 0;
  cursor: pointer;
}
.chk > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  color: var(--prose);
}
.chk .src {
  font-size: 14px;
  line-height: 20px;
  color: var(--vb-text-muted);
}
.chk input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 26px;
  height: 26px;
  margin: 1px 0 0;
  border: 2px solid var(--vb-text-muted);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.chk input::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--vb-brand);
  -webkit-mask: var(--tick) center / contain no-repeat;
  mask: var(--tick) center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .28s cubic-bezier(.3, .7, .3, 1);
}
.chk:hover input { border-color: var(--vb-text); }
.chk input:checked { border-color: var(--vb-brand); background: var(--lime-soft); }
.chk input:checked::before { clip-path: inset(0 0 0 0); }
.chk:has(input:checked) > span { color: var(--vb-text); }
.checklist .note {
  margin-top: 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--vb-border);
  border-radius: 0 8px 8px 0;
  background: var(--vb-surface);
  font-size: 16px;
  line-height: 24px;
}

/* document table (checklist table with a tick column) */
.doc-table, main > section > .tbl {
  overflow-x: auto;
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  background:
    linear-gradient(to right, var(--vb-surface) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--vb-surface) 30%, transparent) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .6), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .6), transparent) right / 14px 100% no-repeat scroll,
    var(--vb-surface);
}
.doc-table table, main > section > .tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 23px;
}
main > section > .tbl table { min-width: 560px; }
.doc-table caption, main > section > .tbl caption {
  caption-side: top;
  padding: 14px 16px 10px;
  text-align: left;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--vb-text);
}
.doc-table th, .doc-table td, main > section > .tbl th, main > section > .tbl td {
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.doc-table thead th, main > section > .tbl thead th {
  border-top-color: var(--rule-2);
  background: var(--vb-surface-2);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--vb-text-muted);
}
.doc-table tbody th, main > section > .tbl tbody th {
  position: relative;
  padding-left: 44px;
  font-weight: 600;
  color: var(--vb-text);
}
.doc-table tbody th::before, main > section > .tbl tbody th::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 16px;
  height: 16px;
  background: var(--vb-text-muted);
  -webkit-mask: var(--tick) center / contain no-repeat;
  mask: var(--tick) center / contain no-repeat;
  opacity: .7;
}
.doc-table td, main > section > .tbl td { color: var(--prose); }
.doc-table td a, main > section > .tbl td a { display: inline-block; padding-block: 10px; margin-block: -10px; }
@media (min-width: 720px) { .doc-table td:last-child a, main > section > .tbl td:last-child a { white-space: nowrap; } }

/* phones: each record row becomes one ruled entry (no sideways scroll) */
@media (max-width: 719.98px) {
  main > section > .tbl { overflow: visible; background: var(--vb-surface); }
  main > section > .tbl :is(table, caption, tbody, tr, th, td) { display: block; }
  main > section > .tbl table { min-width: 0; }
  main > section > .tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  main > section > .tbl tbody tr { position: relative; padding: 14px 16px 14px 44px; border-top: 1px solid var(--rule); }
  main > section > .tbl tbody :is(th, td) { padding: 0; border: 0; }
  main > section > .tbl tbody th { position: static; }
  main > section > .tbl tbody th::before { top: 18px; }
  main > section > .tbl td { margin-top: 6px; }
  main > section > .tbl td + td:not(:last-child) { padding-left: 12px; border-left: 2px solid var(--rule-2); color: var(--vb-text-muted); }
  main > section > .tbl td:last-child { font-size: 14px; line-height: 21px; color: var(--vb-text-muted); }
}

/* callout: slip-style note */
.note-track {
  --nf: 12px;
  position: relative;
  padding: 14px 16px;
  border-radius: 8px 0 8px 8px;
  background: linear-gradient(225deg, transparent var(--nf), var(--note) calc(var(--nf) + .5px));
  font-size: 16px;
  line-height: 24px;
  color: var(--prose);
}
.note-track::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 17px;
  height: 17px;
  border-radius: 0 0 0 3px;
  background: linear-gradient(225deg, transparent 50%, rgba(188, 188, 192, .3) 50%);
  pointer-events: none;
}
.op-note dl > div { padding: 10px 0; border-top: 1px solid var(--rule); }
.op-note dl > div:first-child { padding-top: 0; border-top: 0; }
.op-note dl > div:last-child { padding-bottom: 0; }
.op-note dt { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--vb-text-muted); }
.op-note dd { margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--vb-text); overflow-wrap: anywhere; }

/* steps and timeline (sequences only) */
.stage-list { list-style: none; counter-reset: stage; }
.stage-list > li {
  position: relative;
  counter-increment: stage;
  padding: 14px 0 14px 44px;
  border-top: 1px solid var(--rule);
}
.stage-list > li::before {
  content: counter(stage);
  position: absolute;
  left: 0;
  top: 12px;
  width: 30px;
  text-align: right;
  font-size: 26px;
  line-height: 30px;
  font-weight: 750;
  font-stretch: 78%;
  color: var(--vb-brand);
  font-variant-numeric: tabular-nums;
}
.stage-list h3 { font-size: 19px; line-height: 26px; font-stretch: 88%; }
.stage-list p { margin-top: 4px; }
.stage-line { list-style: none; position: relative; padding-left: 28px; }
.stage-line::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--rule-2);
}
.stage-line > li { position: relative; padding: 0 0 18px; }
.stage-line > li::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 6px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--vb-brand);
  border-radius: 50%;
  background: var(--vb-surface-2);
}
.stage-line .when { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--vb-text-muted); }

/* comparison pair */
.doc-pair { display: grid; gap: 14px; }
.doc-pair > div { padding: 16px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--vb-surface); }
.doc-pair h3 { padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-size: 19px; line-height: 26px; font-stretch: 88%; }
.doc-pair ul { list-style: none; margin-top: 8px; }
.doc-pair li { padding: 6px 0; font-size: 15px; line-height: 23px; }

/* static check rows */
.check-list { list-style: none; border-top: 1px solid var(--rule-2); max-width: 34em; }
.check-list > .check-row { position: relative; padding: 13px 0 13px 38px; }
.check-list > .check-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 18px;
  height: 18px;
  background: var(--vb-text-muted);
  -webkit-mask: var(--tick) center / contain no-repeat;
  mask: var(--tick) center / contain no-repeat;
  opacity: .7;
}

/* questions as check rows */
.check-qa, main > section.faq > details { border-bottom: 1px solid var(--rule); }
.sheet > h2 + .check-qa, main > section.faq > h2 + details { margin-top: 8px; }
.sheet > .check-qa + .check-qa, main > section.faq > details + details { margin-top: 0; }
.check-qa summary, main > section.faq > details > summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 56px;
  padding: 15px 4px 15px 0;
  list-style: none;
  cursor: pointer;
}
.check-qa summary::-webkit-details-marker, main > section.faq summary::-webkit-details-marker { display: none; }
.check-qa summary::before, main > section.faq > details > summary::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--vb-text-muted);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
  transition: background-size .2s ease, color .2s ease;
}
.check-qa[open] summary::before, main > section.faq > details[open] > summary::before {
  color: var(--vb-brand);
  background-size: 12px 2px, 2px 0;
}
.check-qa summary h3, main > section.faq summary h3 { font-size: 19px; line-height: 26px; font-stretch: 90%; }
.check-qa summary:hover h3, main > section.faq summary:hover h3 { color: var(--vb-brand); }
.check-qa > p, main > section.faq > details > p { max-width: calc(32em + 40px); padding: 0 0 18px 40px; }

/* RG close: final recap list */
.recap { list-style: none; max-width: 34em; }
.sheet > h2 + .recap, main > section > h2 + .recap { margin-top: 8px; }
.recap li { position: relative; padding: 14px 0 14px 36px; border-bottom: 1px solid var(--rule); }
.recap li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 18px;
  height: 18px;
  background: var(--vb-text-muted);
  -webkit-mask: var(--tick) center / contain no-repeat;
  mask: var(--tick) center / contain no-repeat;
  opacity: .7;
}
.age {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--vb-text);
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  font-weight: 750;
  color: var(--vb-text);
}

/* captures */
main figure img { display: block; border: 1px solid var(--vb-border); border-radius: 8px; }
main figcaption { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--vb-text-muted); }

/* contents box (long pages only, after the first sheet) */
.contents { margin-top: var(--gap); }
.contents-label {
  padding-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--vb-text-muted);
}
.contents ol { list-style: none; border-top: 3px double var(--rule-2); }
.contents a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-block: 8px;
  border-bottom: 1px solid var(--rule);
  color: var(--vb-text);
  font-size: 16px;
  line-height: 22px;
  text-decoration: none;
}
.contents a:hover { color: var(--vb-brand); }

/* design-time placeholder */
.v5-pending { padding: 12px 14px; border: 2px dashed var(--vb-border); border-radius: 8px; color: var(--vb-text-muted); font-size: 15px; }

/* sign-off (byline) */
.signoff {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: var(--gap);
  padding-top: 18px;
  border-top: 3px double var(--rule-2);
}
.so-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--vb-border);
  border-radius: 50%;
  color: var(--vb-text-muted);
}
.so-n { font-weight: 600; color: var(--vb-text); }
.so-n a { display: inline-block; padding-block: 9px; margin-block: -9px; }
.so-note { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--vb-text-muted); }
.so-up { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--vb-text-muted); }

/* workbook endnote (footer) */
.endnote { margin-top: 64px; border-top: 3px double var(--rule-2); background: var(--vb-surface); }
.endnote-in {
  max-width: calc(var(--page) + 2 * var(--g));
  margin-inline: auto;
  padding: 30px var(--g) calc(36px + env(safe-area-inset-bottom, 0px));
}
.en-mark { font-size: 18px; line-height: 24px; color: var(--vb-text); }
.en-para { margin-top: 8px; max-width: 35em; font-size: 15px; line-height: 23px; color: var(--prose); }
.en-next { display: grid; gap: 22px; margin-top: 28px; }
.en-col-h {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-2);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--vb-text-muted);
}
.en-col ul { list-style: none; }
.en-col li { border-bottom: 1px solid var(--rule); }
.en-col a, .en-col span { display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 21px; }
.en-col a { color: var(--vb-text); font-weight: 600; text-decoration: none; }
.en-col a:hover { color: var(--vb-brand); }
.en-col a[aria-current="page"] { color: var(--vb-brand); }
.en-col span { color: var(--vb-text-muted); }
.en-rg {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 28px;
  padding: 16px;
  border: 1px solid var(--rule-2);
  border-radius: 10px;
}
.en-age {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--vb-text);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 750;
  color: var(--vb-text);
}
.en-rg p { font-size: 15px; line-height: 23px; }
.en-indep { margin-top: 18px; font-size: 14px; line-height: 21px; color: var(--vb-text-muted); }
.en-fine { margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--vb-text-muted); }

/* below desktop: the tool's end spacer replaces the next block's margin */
@media (max-width: 1023.98px) {
  .checklist + * { margin-top: 12px; }
  .tally::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: 100%; height: 9px; background: var(--vb-surface-2); }
}

/* narrow tables become records (every column label kept) */
@media (max-width: 719.98px) {
  .doc-table table, .doc-table caption, .doc-table tbody, .doc-table tr, .doc-table tbody th, .doc-table td { display: block; }
  .doc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .doc-table tbody tr { padding: 12px 14px 14px; border-top: 1px solid var(--rule-2); }
  .doc-table tbody th, .doc-table td { padding: 0; border: 0; }
  .doc-table tbody th { padding-left: 28px; }
  .doc-table tbody th::before { left: 0; top: 4px; }
  .doc-table td { margin-top: 8px; }
  .doc-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--vb-text-muted);
  }
}

/* tablet */
@media (min-width: 720px) {
  :root { --g: 32px; --pitch: 28px; }
  main { padding-inline: var(--g); }
  main > * { margin-inline: 0; }
  .cover, main > header.hero {
    padding: 28px 32px 34px 40px;
    border: 1px solid var(--rule-2);
    border-radius: 16px;
  }
  .cover::before, main > header.hero::before, .sheet::before, main > section::before { left: 20px; }
  .cover h1, main > header.hero h1 { font-size: 52px; line-height: 58px; }
  .cover-plate img, main > header.hero .plate img { width: 136px; }
  .cover .lede, main > header.hero .lede { font-size: 18px; }
  .cover .intro, main > header.hero .intro { font-size: 17px; font-stretch: 100%; }
  .cover p, main > header.hero p { max-width: 600px; }
  .slip { width: min(520px, 100% - 28px); margin: -26px 28px 0 auto; }
  .slip-in { padding: 18px 22px 20px; }
  .sheet, main > section {
    padding: 34px 32px 38px 40px;
    border: 1px solid var(--rule-2);
    border-radius: 16px;
  }
  .sheet > h2, main > section > h2 { font-size: 30px; line-height: 36px; }
  .signoff { padding-left: 40px; }
  .doc-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .en-next { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

/* desktop: four tracks, tabs over the ruled line */
@media (min-width: 1024px) {
  :root { --g: 40px; --pad-l: 56px; --pad-r: 40px; --pitch: 30px; }
  .folio-in { align-items: flex-end; gap: 24px; padding-top: 0; }
  .folio-mark { font-size: 24px; line-height: 24px; padding-block: 12px; align-self: center; }
  main > .folio-tag { display: none; }
  .folio-run {
    display: block;
    max-width: calc(var(--page) + 2 * var(--g));
    margin-inline: auto;
    padding: 6px var(--g) 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--vb-text-muted);
  }
  .tabs-ruled { align-items: flex-end; gap: 16px; }
  .tabs-ruled ul { display: flex; gap: 2px; list-style: none; }
  .tabs-ruled ul a {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin-bottom: -1px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    position: relative;
    z-index: 1;
    color: var(--vb-text-muted);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }
  .tabs-ruled ul a:hover { color: var(--vb-text); border-color: var(--rule); }
  .tabs-ruled ul a[aria-current="page"] {
    color: var(--vb-text);
    background: var(--vb-bg);
    border-color: var(--rule-2);
    box-shadow: inset 0 2px 0 var(--vb-brand);
  }
  .tabs-ruled ul a[aria-current="page"]:focus-visible { box-shadow: inset 0 2px 0 var(--vb-brand), 0 0 0 2px var(--vb-bg); }
  .tab-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 4px;
    color: var(--vb-text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .tab-note .ic { color: var(--vb-accent); }
  .tab-note:hover { color: var(--vb-text); }
  .tab-note[aria-current="page"] { color: var(--vb-text); }
  .index-ruled { display: none; }

  main { padding-top: 28px; }
  .cover, main > header.hero, .sheet, main > section {
    --mx: calc(var(--pad-l) + (100% - var(--pad-l) - var(--pad-r) - 3 * var(--tg)) * .75 + 2.5 * var(--tg));
  }
  .cover::before, main > header.hero::before, .sheet::before, main > section::before { left: var(--mx); }
  .cover, main > header.hero { padding: 40px var(--pad-r) 50px var(--pad-l); }
  .cover-title { gap: 10px 22px; padding-bottom: 14px; }
  .cover h1, main > header.hero h1 { font-size: 76px; line-height: 80px; font-stretch: 80%; letter-spacing: -.015em; }
  .cover-plate { padding: 7px 11px; }
  .cover-plate img, main > header.hero .plate img { width: 150px; }
  .cover .lede, main > header.hero .lede { margin-top: 14px; font-size: 20px; }
  .cover .intro, main > header.hero .intro { font-size: 18px; }
  .cover p, main > header.hero p { max-width: min(630px, 75% + var(--tg) * .25 - 24px); }
  .sheet.rg > .age, main > section.rg > .age { grid-column: 4; grid-row: 2; justify-self: start; margin-top: 20px; }
  .slip { width: min(560px, 100%); margin: -40px 28px 0 auto; }

  .sheet, main > section {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--tg);
    align-items: start;
    grid-auto-rows: min-content;
    padding: 44px var(--pad-r) 50px var(--pad-l);
  }
  .sheet > *, main > section > * { grid-column: 1 / span 3; }
  .sheet > h2, main > section > h2 {
    grid-column: 1 / -1;
    padding-right: calc(25% + var(--tg) * .25);
    font-size: 34px;
    line-height: 40px;
  }
  .sheet > .note-track { grid-column: 4; grid-row: span 3; margin-top: 20px; }
  .sheet > .op-note { grid-row: 2 / span 3; }
  .contents ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tg); }
  .checklist::after { display: none; }
  .checklist {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--tg);
    align-items: start;
    grid-column: 1 / -1;
  }
  .checklist > .cols { grid-column: 1 / span 3; grid-row: 1; }
  .checklist > .note { grid-column: 1 / span 3; grid-row: 2; }
  .checklist > .tally {
    grid-column: 4;
    grid-row: 1 / span 2;
    top: 28px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 18px 18px;
    border-radius: 10px;
  }
  .checklist > .tally .meter { font-size: 22px; line-height: 28px; font-weight: 750; font-stretch: 86%; }
  .col {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 28px;
  }
  .col h3 { grid-column: 1; grid-row: 1; padding-top: 12px; }
  .col .why { grid-column: 1; grid-row: 2; }
  .col ul { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .signoff { margin-left: 0; padding-left: var(--pad-l); }
  .en-head { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: baseline; }
  .en-para { margin-top: 0; }
}

/* small desktop: the one-row folio keeps its tabs on one line */
@media (min-width: 1024px) and (max-width: 1179.98px) {
  .tabs-ruled ul a { padding: 0 10px; font-size: 14px; }
  .tab-note { justify-content: center; min-width: 44px; }
  .tab-note span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* tablet and small desktop: the slip spans the row, its terms in a second column */
@media (min-width: 720px) and (max-width: 1179.98px) {
  .slip { width: auto; margin-right: 0; margin-left: 28px; }
  .slip-in {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "plate kick terms" "offer offer terms" "btn btn terms" "foot foot terms";
    align-items: start;
  }
  .slip-plate { grid-area: plate; align-self: center; }
  .slip-kicker { grid-area: kick; align-self: center; }
  .slip-offer { grid-area: offer; }
  .slip-btn { grid-area: btn; }
  .slip-foot { grid-area: foot; }
  .slip-terms { grid-area: terms; margin: 0 0 0 14px; }
}

/* v6 wide desktop (owner 22.10, 07:49Z and 07:52Z): the slip lies on the cover, inside its row, so no row of the
   page carries the slip alone. The sheets open into a workbook spread: the H2 is written in the left margin column
   (sticky while its sheet scrolls), the red margin line runs between margin and text, the text lane keeps about
   70 characters, and the notes column at the right carries the sheet's own notes; tables and the tool span lane and
   notes. FAQ, RG close, sign-off, folio band and endnote are framed, so no row reads as a stray strip. */
@media (min-width: 1180px) {
  :root { --slip-w: 500px; --lane: 32em; --sg: 40px; --open-measure: 33em; }
  main { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--slip-w) + var(--pad-r)); }
  main > * { grid-column: 1 / -1; }
  main > .cover, main > header.hero { grid-row: 1; grid-column: 1 / -1; }
  .tabs-ruled ul a { padding: 0 13px; }
  .cover, main > header.hero { padding: 44px calc(var(--slip-w) + var(--pad-r) + 64px) 52px var(--pad-l); }
  main > .slip {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    width: auto;
    margin: 36px var(--pad-r) 36px 0;
  }
  /* polish 1: the slip itself lies straight, so its type renders crisp; only a blank under-sheet behind it keeps the tilt */
  main > .slip::before {
    content: "";
    position: absolute;
    inset: 10px -8px -10px 12px;
    z-index: -1;
    border-radius: 10px;
    background: var(--vb-surface-2);
    border: 1px solid var(--rule-2);
    transform: rotate(-1.6deg);
    transform-origin: 50% 50%;
    pointer-events: none;
  }
  .slip-in { --fold: 22px; padding: 20px 24px 22px; }
  .slip-kicker { padding-right: 30px; }
  .slip::after { width: 31px; height: 31px; }
  .slip-offer { font-size: 28px; line-height: 34px; }
  /* polish 1 (P1 deal hierarchy): the terms read at the disclosure's size or larger, in one column */
  .slip-terms li { font-size: 17px; line-height: 26px; padding: 8px 0; }
  .cover, main > header.hero { display: flex; flex-direction: column; justify-content: center; }
  .cover-title { align-self: stretch; }
  main > header.hero .plate { align-self: flex-start; }
  .slip-aff { font-size: 17px; line-height: 26px; }
  .cover p, main > header.hero p { max-width: 31em; }
  main > header.hero h1 { max-width: none; font-size: 60px; line-height: 66px; }
  .cover::before, main > header.hero::before { left: calc(100% - var(--slip-w) - var(--pad-r) - 30px); }

  /* the spread */
  .sheet:not([data-tool]), main > section:not([data-tool]) {
    grid-template-columns: [head] minmax(0, var(--head)) [lane] minmax(0, var(--lane)) [side] minmax(0, var(--side));
    column-gap: var(--sg);
    padding: 46px var(--pad-r) 50px var(--pad-l);
    --head: 1fr; --side: .8fr; --hf: 1; --sf: .8;
    --mx: calc(var(--pad-l) + (100% - var(--pad-l) - var(--pad-r) - var(--lane) - 2 * var(--sg)) * var(--hf) / (var(--hf) + var(--sf)) + var(--sg) / 2);
  }
  .sheet:not([data-tool]) > *, main > section:not([data-tool]) > * { grid-column: lane; grid-row: auto; }
  .sheet:not([data-tool]) > h2, main > section:not([data-tool]) > h2 {
    grid-column: head;
    grid-row: 1 / span 80;
    align-self: start;
    position: sticky;
    top: 24px;
    padding: 0 0 14px;
    font-size: 30px;
    line-height: 36px;
  }
  .sheet:not([data-tool]) > h2 + *, main > section:not([data-tool]) > h2 + * { margin-top: 0; }
  .sheet:not([data-tool]) > :is(.note-track, .op-note), main > section:not([data-tool]) > :is(.note-track, .op-note) {
    grid-column: side;
    grid-row: span 3;
    margin-top: 0;
  }
  .sheet:not([data-tool]) > :is(.doc-table, .tbl, .doc-pair, figure, .contents),
  main > section:not([data-tool]) > :is(.doc-table, .tbl, .doc-pair, figure) { grid-column: lane / -1; }
  .sheet:not([data-tool]) > .doc-table + *, main > section:not([data-tool]) > .doc-table + * { margin-top: 22px; }
  .sheet.rg > .age, main > section.rg > .age { grid-column: side; grid-row: 1 / span 3; justify-self: start; margin-top: 0; }
  /* the operator card rides beside the whole sheet, like the margin heading */
  .sheet:not(:has(> .note-track:not(.op-note))) > .op-note { grid-row: 1 / span 80; position: sticky; top: 24px; align-self: start; }
  /* a sheet without its own heading continues the tool sheet above: copy and table across margin and lane, notes at right */
  .sheet:not([data-tool]):not(:has(> h2)) > * { grid-column: head / side; }
  .sheet:not([data-tool]):not(:has(> h2)) > :is(.doc-table, .tbl, .doc-pair, figure) { grid-column: head / side; }
  .sheet:not([data-tool]):not(:has(> h2)) > :is(.note-track, .op-note) { grid-column: side; grid-row: 1 / span 3; }
  .sheet:not([data-tool]):not(:has(> h2)) {
    --mx: calc(100% - var(--pad-r) - (100% - var(--pad-l) - var(--pad-r) - var(--lane) - 2 * var(--sg)) * var(--sf) / (var(--hf) + var(--sf)) - var(--sg) / 2);
  }
  /* polish 1: its opening copy takes the wider measure too, over the table it introduces */
  .sheet:not([data-tool]):not(:has(> h2)) > :is(.sheet-copy, p:not(.note-track)) { max-width: var(--open-measure); }
  /* polish 1: a sheet with no notes of its own gives the empty notes track to its own blocks. Rows, timelines and
     tables run to the right edge and the copy widens to --open-measure (33em, at most 75 characters per line in this
     face; 34em gives 78 and 64ch about 85, over the measure gate). The margin heading and the lane's left edge stay
     put: no column jump. */
  .sheet:not([data-tool]):has(> h2):not(:has(> :is(.note-track, .op-note, .age))) > :not(h2) { grid-column: lane / -1; }
  .sheet:not([data-tool]):has(> h2):not(:has(> :is(.note-track, .op-note, .age))) > :is(.sheet-copy, p) { max-width: var(--open-measure); }
  .sheet:not([data-tool]):has(> h2):not(:has(> :is(.note-track, .op-note, .age))) > :is(.stage-line, .check-list, .recap) { max-width: calc(var(--open-measure) + 38px); }
  /* polish 2: a prose sheet (no notes, no table; the FAQ and the RG close too) becomes a split spread. The margin heading takes the free width and
     the 33em text column ends on the sheet's right padding edge, where the notes and tables of the other sheets end,
     so no empty band is left beside the text inside the ruled sheet. */
  :is(.sheet, main > section):not([data-tool]):has(> h2):not(:has(> :is(.note-track, .op-note, .age, .doc-table, .tbl, .doc-pair, figure, .contents))),
  :is(.sheet, main > section).rg:not([data-tool]):has(> h2):not(:has(> :is(.note-track, .op-note, .doc-table, .tbl, .doc-pair, figure, .contents))) {
    grid-template-columns: [head] minmax(0, 1fr) [lane] minmax(0, var(--open-measure)) [side];
    --mx: calc(100% - var(--pad-r) - var(--open-measure) - var(--sg) / 2);
  }
  :is(.sheet, main > section):not([data-tool]):has(> h2):not(:has(> :is(.note-track, .op-note, .age, .doc-table, .tbl, .doc-pair, figure, .contents))) > :not(h2),
  :is(.sheet, main > section).rg:not([data-tool]):has(> h2):not(:has(> :is(.note-track, .op-note, .doc-table, .tbl, .doc-pair, figure, .contents))) > :not(h2):not(.age) { grid-column: lane; max-width: none; }
  /* the FAQ and the RG close join the split, so the last sheets of a page share one text edge; the RG heading stays
     put and its 18+ seal closes the heading column at the foot of the sheet */
  :is(.sheet, main > section).rg:not([data-tool]):has(> h2):not(:has(> :is(.note-track, .op-note, .doc-table, .tbl, .doc-pair, figure, .contents))) > h2 { position: static; }
  :is(.sheet, main > section).rg:not([data-tool]):has(> h2):not(:has(> :is(.note-track, .op-note, .doc-table, .tbl, .doc-pair, figure, .contents))) > .age { grid-column: head; grid-row: 1 / span 80; align-self: end; justify-self: start; margin: 0; }
  /* polish 2: a sheet's single margin note starts level with its first paragraph and rides beside the text like the
     margin heading, so the notes rail is never an empty strip above or below one note */
  .sheet:not([data-tool]):has(> h2):not(:has(> .note-track ~ .note-track)) > .note-track:not(.op-note) { grid-row: 1 / span 80; position: sticky; top: 24px; align-self: start; }

  /* the contents box: a framed tab index across the page */
  main > .contents {
    padding: 26px var(--pad-r) 28px var(--pad-l);
    background: var(--vb-surface-2);
    border: 1px solid var(--rule-2);
    border-radius: 16px;
  }
  main > .contents ol { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--tg); }
}

/* desktop endnote: the three page lists run the full width of the sheet under the wordmark row, one equal column each */
@media (min-width: 1024px) {
  .en-next { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
}

/* phones: the independence line follows the deal slip (the folio row keeps the wordmark only) */
@media (max-width: 719.98px) {
  .folio-run { display: none; }
}

/* phones: every sheet and the endnote keep the cover's ruled margin column */
@media (max-width: 719.98px) {
  .sheet, main > section { padding-left: 48px; }
  .sheet::before, main > section::before { left: 38px; }
  .endnote-in { position: relative; padding-left: 48px; }
  .endnote-in::before { content: ""; position: absolute; inset-block: 0; left: 38px; width: 1px; background: var(--mline); }
}

/* phones: the endnote reads like the workbook's last page. The 18+ mark sits on the margin line as a tab marker,
   each link group is one row (its head in a narrow label column, its links stacked unruled at a 38px step, each
   link the full width of its column), and the rules run between groups only */
@media (max-width: 719.98px) {
  .en-next { gap: 0; margin-top: 22px; border-top: 1px solid var(--rule-2); }
  .en-col { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; padding-block: 10px; border-bottom: 1px solid var(--rule-2); }
  .en-col-h { padding: 8px 0 0; border-bottom: 0; font-size: 14px; line-height: 20px; }
  .en-col ul { display: block; }
  .en-col li { border-bottom: 0; }
  .en-col a, .en-col span { width: 100%; min-height: 38px; }
  .en-rg { position: relative; display: block; margin-top: 26px; padding: 0; border: 0; border-radius: 0; }
  .en-age { position: absolute; top: -4px; left: -42px; width: 34px; height: 34px; border-width: 1.5px; font-size: 14px; background: var(--vb-surface-2); }
  .en-rg p { font-size: 14px; line-height: 22px; }
  .en-indep { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rule-2); }
}

/* v6 framing: every row with content sits on a sheet, a band or a framed strip (no stray text on the bare desk) */
.signoff {
  padding: 18px 16px 20px;
  background: var(--vb-surface-2);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
}
.endnote { background: var(--vb-surface-2); border-top: 1px solid var(--rule-2); }
.en-rg { background: var(--vb-surface); }
@media (min-width: 720px) {
  .signoff { padding: 22px 32px 24px 40px; border-radius: 16px; }
}
@media (min-width: 1024px) {
  .folio { background: var(--vb-surface-2); border-bottom: 1px solid var(--rule-2); }
  .folio-in::after { display: none; }
  .tabs-ruled ul a { margin-bottom: -1px; }
  .signoff { padding: 26px var(--pad-r) 28px var(--pad-l); align-items: center; gap: 20px; }
  .so-ic { width: 48px; height: 48px; }
  .so-tx { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: baseline; flex: 1 1 auto; }
  .so-n { grid-column: 1; }
  .so-note { grid-column: 1; margin-top: 6px; max-width: 46em; }
  .so-up { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .endnote-in { padding-top: 40px; }
  .note-track, .checklist .note { font-size: 17px; line-height: 27px; }
  .slip-aff { font-size: 17px; line-height: 26px; }
  .slip-terms li { font-size: 17px; line-height: 26px; }
  .en-head { grid-template-columns: minmax(0, var(--head, .82fr)) minmax(0, 2fr); }
}

/* v6 large screens: the page and its type grow with the screen, so 1920 and 2560 read as one filled spread */
@media (min-width: 1600px) {
  :root { --page: 1360px; --pad-l: 64px; --pad-r: 48px; --tg: 36px; --slip-w: 560px; --gap: 52px; --sg: 48px; }
  body { font-size: 18px; line-height: 29px; }
  .folio-mark { font-size: 26px; }
  .tabs-ruled ul a { font-size: 16px; padding: 0 16px; }
  .cover h1 { font-size: 88px; line-height: 92px; }
  main > header.hero h1 { font-size: 68px; line-height: 74px; }
  .cover .lede, main > header.hero .lede { font-size: 22px; line-height: 32px; }
  .cover .intro, main > header.hero .intro { font-size: 19px; line-height: 31px; }
  :root { --pitch: 31px; }
  .sheet:not([data-tool]) > h2, main > section:not([data-tool]) > h2 { font-size: 34px; line-height: 40px; }
  .sheet[data-tool] > h2 { font-size: 38px; line-height: 44px; }
  .sheet h3, main > section h3, .col h3 { font-size: 21px; line-height: 28px; }
  .note-track { font-size: 17px; line-height: 27px; }
  .doc-table table, main > section > .tbl table { font-size: 16px; line-height: 25px; }
  .slip-offer { font-size: 31px; line-height: 37px; }
  .slip-terms li { font-size: 17px; line-height: 26px; }
  .slip-btn { min-height: 52px; font-size: 17px; }
  .slip-plate img { width: 120px; }
  .contents a { font-size: 17px; }
  .en-mark { font-size: 20px; line-height: 26px; }
  .en-para, .en-rg p, .en-col a, .en-col span { font-size: 16px; line-height: 24px; }
}
@media (min-width: 2200px) {
  :root { --page: 1720px; --pad-l: 80px; --pad-r: 64px; --tg: 44px; --slip-w: 660px; --gap: 64px; --sg: 60px; --pitch: 34px; }
  body { font-size: 20px; line-height: 32px; }
  .folio-mark { font-size: 30px; line-height: 30px; }
  .folio-run { font-size: 16px; line-height: 22px; }
  .tabs-ruled ul a { font-size: 18px; min-height: 54px; padding: 0 20px; }
  .tab-note { font-size: 17px; min-height: 54px; }
  .cover h1 { font-size: 108px; line-height: 110px; }
  main > header.hero h1 { font-size: 84px; line-height: 90px; }
  .cover-plate img, main > header.hero .plate img { width: 184px; }
  .cover .lede, main > header.hero .lede { font-size: 25px; line-height: 34px; }
  .cover .intro, main > header.hero .intro { font-size: 21px; line-height: 34px; }
  .sheet:not([data-tool]) > h2, main > section:not([data-tool]) > h2 { font-size: 40px; line-height: 46px; }
  .sheet[data-tool] > h2 { font-size: 44px; line-height: 50px; }
  .sheet h3, main > section h3, .col h3, .check-qa summary h3, main > section.faq summary h3 { font-size: 24px; line-height: 32px; }
  .col { grid-template-columns: 220px minmax(0, 1fr); }
  .col .why, .checklist .note { font-size: 18px; line-height: 28px; }
  .checklist > .tally .meter { font-size: 26px; line-height: 32px; }
  .chk .src { font-size: 16px; line-height: 23px; }
  .note-track { font-size: 19px; line-height: 30px; }
  .op-note dt { font-size: 16px; line-height: 22px; }
  .op-note dd { font-size: 18px; line-height: 26px; }
  .doc-table table, main > section > .tbl table { font-size: 18px; line-height: 28px; }
  .doc-table caption, main > section > .tbl caption { font-size: 18px; line-height: 26px; }
  .doc-table thead th, main > section > .tbl thead th { font-size: 16px; line-height: 22px; }
  .stage-line .when { font-size: 16px; line-height: 22px; }
  .slip-kicker { font-size: 16px; line-height: 22px; }
  .slip-offer { font-size: 36px; line-height: 42px; }
  .slip-terms li { font-size: 19px; line-height: 29px; padding: 8px 0; }
  .slip-btn { min-height: 58px; font-size: 19px; }
  .slip-foot { font-size: 16px; line-height: 22px; }
  .slip-aff { font-size: 19px; line-height: 29px; }
  .slip-plate img { width: 140px; }
  .contents-label { font-size: 16px; line-height: 22px; }
  .contents a { font-size: 19px; line-height: 26px; min-height: 56px; }
  .so-n { font-size: 20px; }
  .so-note, .so-up { font-size: 17px; line-height: 26px; }
  .en-mark { font-size: 23px; line-height: 30px; }
  .en-para, .en-rg p, .en-col a, .en-col span { font-size: 18px; line-height: 27px; }
  .en-col-h, .en-indep, .en-fine { font-size: 16px; line-height: 23px; }
  .en-age { width: 52px; height: 52px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* v6: the assembler wraps hyphen-joined H1 words in .nw so a heading never breaks at the hyphen */
.nw { white-space: nowrap; }