@import url("https://fonts.googleapis.com/css2?family=Gabarito:wght@500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap");
/* Backchannel - warm peer-circle look. Blush paper, plum ink, soft coral; rounded, friendly, a little playful.
   Layout: single column of full-width bands; content held to a 1120px measure. */
:root {
  --paper: #fbf2ec;      /* blush paper - page ground */
  --sheet: #ffffff;      /* cards */
  --ink: #35203a;        /* plum - text, primary buttons, dark bands */
  --ink-2: #6e5a70;      /* secondary text */
  --rule: #ebd5cc;       /* hairlines, dashed dividers */
  --blush: #f6dcd3;      /* pills, highlights */
  --lilac: #e8ddf1;      /* secondary card tint */
  --butter: #f9e6c9;     /* tertiary card tint */
  --rose: #e9807a;       /* decorative coral */
  --rose-ink: #9e3f39;   /* coral as text */
  --redact: #e8d2ca;     /* soft hidden-detail pills */
  --mark: #f2a79f;       /* soft coral - accent button, accents on plum */
  --mark-ink: #35203a;
  --night: #35203a;
  --night-2: #45304b;
  --night-ink: #fbf2ec;
  --night-dim: #d8c8d9;
  --ok: #2f6b4f;
  --no: #9e3f39;

  --display: "Gabarito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: var(--body);

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.9rem, 3.4vw, 2.75rem);
  --step-4: clamp(2.6rem, 5.4vw, 4.4rem);
  --measure: 1120px;
  --shadow: 0 24px 50px -32px rgba(53, 32, 58, 0.45);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
}
img { max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.band-night :focus-visible { outline-color: var(--mark); }

/* ---------- layout ---------- */
.wrap {
  max-width: calc(var(--measure) + 2 * 16px);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.band { padding-block: clamp(56px, 8vw, 104px); }
.band-tight { padding-block: clamp(28px, 4vw, 44px); }
.band-night { background: var(--night); color: var(--night-ink); }
.band-sheet { background: var(--sheet); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 46rem; margin-bottom: clamp(28px, 4vw, 44px); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.04; margin: 0; text-wrap: balance; letter-spacing: -0.03em; }
h1 { font-size: var(--step-4); line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-family: var(--body); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }
.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 38rem; }
.band-night .lede, .band-night .muted { color: var(--night-dim); }
.muted { color: var(--ink-2); }
.label { font-family: var(--body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; color: var(--ink-2); }
.band-night .label { color: var(--night-dim); }
.section-head > .label, .hero-copy > .label, .closer > .label, .excerpt-doc > .label, .commit > .stack > .label:first-child {
  align-self: flex-start; background: var(--blush); color: var(--rose-ink); padding: 5px 14px; border-radius: 999px;
}
.band-night .section-head > .label, .band-night .closer > .label, .band-night .commit > .stack > .label:first-child { background: var(--night-2); color: var(--mark); }
.excerpt-doc > .label { background: var(--lilac); color: var(--ink); }
.mark { background: var(--blush); color: inherit; padding: 0 0.16em; border-radius: 0.3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.small { font-size: var(--step--1); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(53, 32, 58, 0.06); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; text-transform: lowercase; }
.wordmark-glyph { display: inline-flex; align-items: center; }
.wordmark-glyph i { display: block; width: 20px; height: 20px; border-radius: 50%; }
.wordmark-glyph i:nth-child(1) { background: var(--mark); }
.wordmark-glyph i:nth-child(2) { background: var(--ink); opacity: 0.88; margin-left: -8px; }
.wordmark-glyph i:nth-child(3) { display: none; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a:not(.btn) { text-decoration: none; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.nav a:not(.btn):hover { color: var(--ink); }
@media (max-width: 640px) { .nav a.hide-sm { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 0.9375rem/1 var(--body); text-decoration: none; cursor: pointer;
  padding: 15px 24px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper); transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-ghost { background: var(--sheet); color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-mark { background: var(--mark); color: var(--mark-ink); border-color: var(--mark); }
.btn-mark:hover { background: #ee968d; border-color: #ee968d; }
.btn-sm { padding: 11px 18px; font-size: 0.875rem; }
.btn-block { width: 100%; }
.band-night .btn-ghost { background: transparent; color: var(--night-ink); border-color: rgba(251, 242, 236, 0.45); }
.band-night .btn-ghost:hover { background: var(--night-2); border-color: var(--night-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- hidden details, stickers, chips ---------- */
.redact { display: inline-block; height: 0.9em; vertical-align: -0.1em; background: var(--redact); border-radius: 999px; }
.band-night .redact { background: #5a4060; }
.stamp {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--body); font-size: 0.8125rem; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; background: var(--blush); color: var(--rose-ink); border: 0;
}
.stamp-tilt { transform: rotate(-4deg); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 700;
  padding: 7px 14px; border-radius: 999px; background: var(--sheet); border: 0;
}
.band-sheet .chip { background: var(--paper); }
.chip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--c, var(--ink)); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.hero-proof span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); margin-right: 8px; vertical-align: 0.12em; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }

/* hero card stack */
.file { position: relative; min-width: 0; padding: 14px 18px 18px 6px; }
.file-sheet {
  position: relative; background: var(--sheet); border: 0; border-radius: 26px;
  padding: 32px 26px 26px; box-shadow: var(--shadow); transform: rotate(-1.5deg);
}
.file-sheet.back { position: absolute; inset: 22px 0 0 26px; transform: rotate(3.5deg); background: var(--lilac); box-shadow: none; padding: 0; }
.file-tab { position: absolute; top: -14px; left: 24px; font: 700 0.8125rem/1 var(--body); background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 999px; }
.file-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1.5px dashed var(--rule); }
.file-head h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.file-rows { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; font-size: 0.9375rem; margin: 0; }
.file-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
.file-row dt { font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); }
.file-row dd { margin: 0; line-height: 1.5; }
@media (max-width: 520px) { .file-row { grid-template-columns: 6.25rem minmax(0, 1fr); } }
.file-stamp { position: absolute; right: 18px; bottom: -14px; background: var(--mark); color: var(--ink); box-shadow: 0 10px 20px -12px rgba(53, 32, 58, 0.5); }

/* ---------- vendor strip ---------- */
.vendors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.vendors .label { margin-right: 6px; color: var(--ink); }

/* ---------- category grid ---------- */
.grid-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 960px) { .grid-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-cats { grid-template-columns: 1fr; } }
.cat {
  display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--sheet);
  border: 0; border-radius: 24px; min-width: 0;
}
.cat-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cat .cat-top .label { background: var(--butter); color: var(--ink); padding: 4px 12px; border-radius: 999px; }
.grid-cats .cat:nth-child(3n+2) .cat-top .label { background: var(--lilac); }
.grid-cats .cat:nth-child(3n) .cat-top .label { background: var(--blush); }
.cat h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.cat p { color: var(--ink-2); font-size: 0.9375rem; }
.cat .btn-ghost { background: var(--paper); border-color: transparent; align-self: flex-start; }
.cat .btn-ghost:hover { border-color: var(--ink); }
.cat-meta { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); margin-top: auto; padding-top: 10px; border-top: 1.5px dashed var(--rule); }
.cat-live { grid-column: 1 / -1; background: var(--ink); color: var(--paper); padding: 30px; border-radius: 28px; }
.cat-live p, .cat-live .cat-meta { color: var(--night-dim); border-color: #5a4060; }
.cat-live .cat-top .label { background: transparent; color: var(--night-dim); padding: 0; }
.cat-live .stamp { background: var(--night-2); }
.cat-live .chip { background: var(--night-2); color: var(--paper); }
@media (max-width: 600px) { .cat-live { grid-column: auto; } }
.cat-live-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; }
@media (max-width: 700px) { .cat-live-body { grid-template-columns: 1fr; } }
.price { font-family: var(--display); font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.price small { font-family: var(--body); font-size: 0.8125rem; font-weight: 600; opacity: .8; letter-spacing: 0; }
.notify { display: flex; gap: 8px; flex-wrap: wrap; }
.notify input { flex: 1 1 160px; min-width: 0; }
.notify-done { font-size: 0.875rem; color: var(--ok); font-weight: 700; }
.cat-suggest { background: transparent; border: 2px dashed var(--rule); grid-column: span 2; }
@media (max-width: 960px) { .cat-suggest { grid-column: auto; } }

/* ---------- coming soon cards (on plum) ---------- */
.soon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 960px) { .soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .soon-grid { grid-template-columns: 1fr; } }
.soon-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--night-2); border: 0; border-radius: 24px; min-width: 0; }
.soon-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.soon-top .label { background: rgba(251, 242, 236, 0.1); color: var(--night-ink); padding: 4px 12px; border-radius: 999px; }
.soon-top .stamp { background: rgba(242, 167, 159, 0.16); color: var(--mark); }
.soon-card h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--night-ink); }
.soon-card > p { color: var(--night-dim); font-size: 0.9375rem; }
.soon-card > .label { color: var(--night-dim); }
.soon-card ul { list-style: none; margin: -4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.9063rem; color: var(--night-ink); }
.soon-card li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; line-height: 1.45; }
.soon-card li::before { content: "+"; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(242, 167, 159, 0.18); color: var(--mark); font-weight: 800; font-size: 0.75rem; line-height: 1; }
.soon-cta { margin-top: auto; padding-top: 16px; border-top: 1.5px dashed #5a4060; }
.soon-card input { background: var(--night); color: var(--night-ink); border-color: #5a4060; }
.soon-card input::placeholder { color: #b9a8ba; }
.soon-card input:focus { border-color: var(--mark); }
.soon-card .notify-done { color: var(--mark); }
.soon-card [data-msg] { color: var(--night-dim); }
.soon-suggest { background: transparent; border: 2px dashed #5a4060; }
.soon-foot { margin-top: clamp(28px, 4vw, 44px); padding-top: 24px; border-top: 1.5px dashed #5a4060; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.soon-foot p { color: var(--night-ink); font-size: var(--step-1); }

/* ---------- inputs ---------- */
input[type="email"], input[type="text"], select {
  font: 0.9375rem var(--body); padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: 14px;
  background: var(--sheet); color: var(--ink);
}
input:focus, select:focus { border-color: var(--ink); outline: none; }

/* ---------- insider notes ---------- */
.notes { columns: 3 280px; column-gap: 18px; }
.note {
  break-inside: avoid; margin-bottom: 18px; background: var(--sheet); color: var(--ink); border: 0;
  border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 40px -30px rgba(0, 0, 0, 0.6); transform: rotate(-1deg);
}
.note:nth-child(3n+2) { background: var(--butter); transform: rotate(1deg); }
.note:nth-child(3n) { background: var(--lilac); transform: rotate(-0.4deg); }
.note-from { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--ink-2); }
.note-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--blush); flex: none; }
.note:nth-child(3n+2) .note-avatar { background: var(--sheet); }
.note:nth-child(3n) .note-avatar { background: var(--mark); }
.note-from b { color: var(--ink); font-weight: 700; }
.note p { font-size: 1rem; line-height: 1.55; font-weight: 600; }
.note .mark { background: var(--blush); }
.note:nth-child(3n+1) .mark { background: var(--butter); }
.note .redact { background: rgba(53, 32, 58, 0.14); }
.note-tag { align-self: flex-start; font-size: 0.75rem; font-weight: 700; color: var(--ink); background: rgba(53, 32, 58, 0.08); padding: 3px 10px; border-radius: 999px; }

/* ---------- ROI ---------- */
.roi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto minmax(0, 1fr); gap: 14px; align-items: stretch; }
.roi-cell { padding: 24px; display: flex; flex-direction: column; gap: 8px; background: var(--sheet); border-radius: 22px; min-width: 0; }
.roi-cell strong { font-family: var(--display); font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.roi-vs { display: flex; align-items: center; justify-content: center; padding: 0 4px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--rose-ink); }
.roi-cell.ours { background: var(--mark); }
.roi-cell.ours .label { color: var(--ink); }
@media (max-width: 860px) {
  .roi { grid-template-columns: 1fr; }
  .roi-vs { padding: 2px 0; }
}

/* ---------- fit lists ---------- */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }
.fit-col { background: var(--sheet); border: 0; border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.band-sheet .fit-col { background: var(--paper); }
.fit-col h3 { font-family: var(--display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.fit-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fit-col li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.fit-col li::before { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.875rem; line-height: 1; margin-top: 2px; }
.fit-yes li::before { content: "+"; background: #dcebe2; color: var(--ok); }
.fit-no li::before { content: "\2013"; background: var(--blush); color: var(--no); }

/* ---------- commitments ---------- */
.commit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 760px) { .commit { grid-template-columns: 1fr; } }
.commit dl { margin: 0; display: flex; flex-direction: column; background: var(--sheet); border-radius: 24px; padding: 6px 26px; }
.band-sheet .commit dl { background: var(--paper); }
.commit dl > div { padding: 18px 0; border-top: 1.5px dashed var(--rule); display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 16px; }
.commit dl > div:first-child { border-top: 0; }
.commit dt { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; }
.commit dd { margin: 0; color: var(--ink-2); }
@media (max-width: 520px) { .commit dl > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- FAQ ---------- */
.faq { max-width: 52rem; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--sheet); border-radius: 18px; padding: 0 22px; }
.band-sheet .faq details { background: var(--paper); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative; font-weight: 700; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--blush); color: var(--ink);
  font-weight: 800; font-size: 1.125rem; line-height: 1; transition: transform .15s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); max-width: 42rem; }

/* ---------- closing CTA ---------- */
.closer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; max-width: 44rem; }
.closer .btn-row { justify-content: center; }
.closer > .label { align-self: center; }

/* ---------- footer ---------- */
.site-footer { padding-block: 40px; border-top: 1px solid var(--rule); font-size: 0.875rem; color: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; }
.foot-legal { margin-top: 28px; padding-top: 16px; border-top: 1.5px dashed var(--rule); font-size: 0.8125rem; }

/* ---------- guide page: contents explorer ---------- */
.toc { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .toc { grid-template-columns: 1fr; } }
.toc-list { list-style: none; margin: 0; padding: 8px; border: 0; border-radius: 24px; background: var(--sheet); counter-reset: sec; display: flex; flex-direction: column; gap: 2px; }
.band-sheet .toc-list { background: var(--paper); }
.toc-list button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 10px;
  padding: 12px 14px; border-radius: 14px; font-size: 0.9375rem; font-weight: 600; align-items: baseline;
}
.toc-list button::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); font-family: var(--display); font-weight: 800; font-size: 0.875rem; color: var(--rose-ink); }
.toc-list button:hover { background: var(--sheet); }
.toc-list button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.toc-list button[aria-selected="true"]::before { color: var(--mark); }
.toc-list button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.toc-panel { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 88px); background: var(--sheet); border: 0; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.band-sheet .toc-panel { background: var(--paper); }
.toc-panel h3 { font-family: var(--display); font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; }
.toc-lines { display: flex; flex-direction: column; gap: 10px; padding: 18px 0; border-block: 1.5px dashed var(--rule); }
.toc-lines span { display: block; height: 10px; border-radius: 999px; background: var(--rule); }
.toc-lines span.dk { background: #d9c3cf; }
.toc-lines .lock { height: auto; background: none; font-size: .8125rem; font-weight: 700; color: var(--ink-2); margin-top: 4px; }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 860px; }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--sheet); border: 0; border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 18px; min-width: 0; box-shadow: var(--shadow); }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.9375rem; }
.plan li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
.plan li::before { content: "+"; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #dcebe2; color: var(--ok); font-weight: 800; font-size: 0.8125rem; line-height: 1; }
.plan .price { font-size: 3.25rem; }
.plan-note { font-size: 0.8125rem; color: var(--ink-2); }

/* ---------- sample excerpt ---------- */
.excerpt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .excerpt { grid-template-columns: 1fr; } }
.excerpt-doc { background: var(--sheet); border: 0; border-radius: 26px; padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; gap: 14px; max-width: 42rem; min-width: 0; }
.excerpt-doc h3 { font-family: var(--display); font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; }
.excerpt-doc ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 10px; }
.excerpt-doc li::marker { color: var(--rose-ink); font-weight: 800; }
.excerpt-fade { position: relative; }
.excerpt-fade::after { content: ""; position: absolute; inset: auto 0 0 0; height: 70%; background: linear-gradient(transparent, var(--sheet)); }
.gate { background: var(--ink); color: var(--paper); border-radius: 28px; padding: 30px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gate input, .gate select { background: var(--night-2); color: var(--paper); border-color: #5a4060; }
.gate input::placeholder { color: #b9a8ba; }
.gate .label, .gate .muted { color: var(--night-dim); }
.gate form { display: flex; flex-direction: column; gap: 10px; }
.form-done { font-weight: 700; color: var(--mark); }

/* ---------- modal (unused, kept for reference) ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(53, 32, 58, .55); }
.modal-card { width: min(460px, 100%); max-height: 100%; overflow: auto; background: var(--sheet); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 16px; position: relative; }