/* ============================================================================
   v2-preview-v20260508c.css
   ----------------------------------------------------------------------------
   Shared stylesheet for the 5 "What's inside" sample preview pages and the
   /buy/preview/all/ index page.

   WHY THIS FILE EXISTS
   --------------------
   The funnel auditor's #1 conversion friction (May 7 2026) was: buyers can't
   tell what's inside before paying $4.99. There were zero sample/peek-inside
   PDFs on /buy/. The biggest cheap-digital-good objection.

   So we built /buy/preview/{slug}/ — one per kit. Honest sampling. Real ToC,
   2-3 chapter samples (real brand-voice content, not lorem), an honest
   "what this is NOT" section, and a buy CTA at the bottom.

   DESIGN INTENT
   -------------
   - Reads like a book preview, not a sales page. The buy CTA is at the bottom,
     not the top. The whole point is removing buyer hesitation through honesty.
   - Inherits all base typography, color tokens, spacing, and dark-mode parity
     from /assets/style-v20260508a.css + the v2-* layer. This file only adds
     preview-specific structure (ToC, sample blockquotes, "what it is NOT",
     buy panel, all-previews grid).
   - Last-loaded so cascade wins on conflicts (matches /buy/index.html pattern).
   - Heavily commented because Deskrune's brand voice canon applies here too:
     show the work, don't hide the reasoning.
   ============================================================================ */


/* ─── 1. PAGE WRAPPER ─────────────────────────────────────────────────────
   Body class .kit-preview-page sets the reading max-width tight (this is
   prose, not a marketing page) and adds top breathing room beneath the nav.
   Same width as /q/ pages so the reading rhythm is consistent across the
   site — buyers who land here from a /q/ explainer should feel zero design
   whiplash. */

.kit-preview-page main#main {
  padding-top: 32px;
  padding-bottom: 96px;
}

.kit-preview-page article {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 640px) {
  .kit-preview-page article { padding: 0 18px; }
  .kit-preview-page main#main { padding-top: 16px; padding-bottom: 64px; }
}


/* ─── 2. HEADER (eyebrow + h1 + lede + meta) ──────────────────────────────
   The eyebrow names what this is ("Sample preview · {Kit name}") so a buyer
   landing from search instantly knows: this is a peek inside, not the buy
   page. The h1 is plain — no "Transform your..." marketing crud. */

.kit-preview-page header {
  margin: 0 0 40px;
  padding: 0 0 32px;
  border-bottom: 1px solid var(--rule, rgba(20, 20, 19, 0.12));
}

.kit-preview-page header .eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 12px;
  border: 1px solid var(--rule, rgba(20, 20, 19, 0.18));
  border-radius: 4px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-2, #555);
  background: var(--surface-2, #f8f6f3);
}

.kit-preview-page header h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.kit-preview-page header .lede {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink-2, #2c2c2b);
  margin: 0 0 24px;
  max-width: 60ch;
}

/* preview-meta is a compact row of "page count · format · price" so a buyer
   knows the shape of what they're sampling. Used dot separators, not pipes,
   to feel less form-y. */
.kit-preview-page .preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-3, #6b6b6a);
  font-weight: 500;
}

.kit-preview-page .preview-meta > span:nth-child(odd) {
  /* the "·" separators — softer color */
  color: var(--rule-strong, #b3b3b1);
}


/* ─── 3. TABLE OF CONTENTS ────────────────────────────────────────────────
   The ToC is the highest-conversion element on this page. A buyer who reads
   a real ToC (not a vague feature list) decides faster — they can see the
   shape of the kit, count the chapters, and know what they're getting.

   We use a numbered <ol> so screen readers announce chapter count, with
   the chapter title bold and the one-line description in muted text. The
   list-style is decimal-leading-zero so "01." reads more like a book than
   a checklist. */

.kit-preview-page .preview-toc {
  margin: 0 0 56px;
  padding: 32px;
  background: var(--surface-2, #f8f6f3);
  border: 1px solid var(--rule, rgba(20, 20, 19, 0.08));
  border-radius: 6px;
}

.kit-preview-page .preview-toc h2 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-2, #555);
  margin: 0 0 20px;
}

.kit-preview-page .preview-toc ol {
  list-style: none;
  counter-reset: chapter;
  padding: 0;
  margin: 0;
}

.kit-preview-page .preview-toc li {
  counter-increment: chapter;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule, rgba(20, 20, 19, 0.08));
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.kit-preview-page .preview-toc li:last-child { border-bottom: none; }

.kit-preview-page .preview-toc li::before {
  content: counter(chapter, decimal-leading-zero);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-3, #888);
  letter-spacing: 0.05em;
  min-width: 28px;
}

.kit-preview-page .preview-toc .chapter-title {
  font-weight: 600;
  color: var(--ink, #14110b);
  font-size: 16px;
  display: block;
  margin: 0 0 2px;
}

.kit-preview-page .preview-toc .chapter-desc {
  font-size: 14.5px;
  color: var(--ink-2, #555);
  line-height: 1.5;
}

.kit-preview-page .preview-toc a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-strong, #b3b3b1);
}

.kit-preview-page .preview-toc a:hover {
  border-bottom-style: solid;
  border-bottom-color: var(--ink, #14110b);
}


/* ─── 4. SAMPLE PARAGRAPHS ────────────────────────────────────────────────
   The samples are the trust earners. They're real brand-voice content from
   the kit — pulled or paraphrased from the chapter — and styled as
   blockquotes so the visual frame says "this is from the actual kit."

   We do NOT use italic on blockquotes here (italic blockquotes feel like
   "inspirational quote" Pinterest energy, which is the opposite of Deskrune
   voice). Instead: a left rule, slightly larger type, a small label above
   that names which chapter the sample is from. */

.kit-preview-page .preview-samples {
  margin: 0 0 56px;
}

.kit-preview-page .preview-samples h2 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-2, #555);
  margin: 32px 0 16px;
}

.kit-preview-page .preview-samples h2:first-child { margin-top: 0; }

.kit-preview-page .preview-samples blockquote {
  margin: 0 0 24px;
  padding: 0 0 0 24px;
  border-left: 3px solid var(--accent, #c9613f);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink, #14110b);
  font-style: normal; /* explicit override: no italic */
}

.kit-preview-page .preview-samples blockquote p {
  margin: 0 0 12px;
}

.kit-preview-page .preview-samples blockquote p:last-child { margin-bottom: 0; }


/* ─── 5. "WHAT THIS IS NOT" ───────────────────────────────────────────────
   This is the trust-frame. A buyer who reads what something *isn't* trusts
   the rest more — see brand/trust.md "honest exclusion."

   Visually it's set apart with a warmer surface and a small icon-marker
   that signals "boundary," not "warning" — we're not scolding the reader,
   we're being honest about scope. */

.kit-preview-page .preview-honest {
  margin: 0 0 56px;
  padding: 28px 32px;
  background: var(--surface-3, #fbf2ec);
  border-left: 3px solid var(--ink-3, #888);
  border-radius: 0 6px 6px 0;
}

.kit-preview-page .preview-honest h2 {
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink, #14110b);
  margin: 0 0 12px;
}

.kit-preview-page .preview-honest p,
.kit-preview-page .preview-honest ul {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2, #2c2c2b);
  margin: 0 0 12px;
}

.kit-preview-page .preview-honest ul {
  padding-left: 20px;
}

.kit-preview-page .preview-honest li { margin: 0 0 6px; }
.kit-preview-page .preview-honest p:last-child,
.kit-preview-page .preview-honest ul:last-child { margin-bottom: 0; }


/* ─── 6. BUY PANEL ────────────────────────────────────────────────────────
   The buy CTA sits at the bottom by design. The whole page is the case;
   the button is the conclusion. We use the same .btn-primary style as the
   rest of the site so the brand experience stays unified.

   .btn-prominent is a slightly larger variant — we want this button to
   feel like the natural next step, not a screaming sales banner. */

.kit-preview-page .preview-buy {
  margin: 0;
  padding: 40px 32px;
  background: var(--ink, #14110b);
  color: #fff;
  border-radius: 8px;
  text-align: center;
}

.kit-preview-page .preview-buy h2 {
  font-size: 22px;
  margin: 0 0 12px;
  color: #fff;
  font-weight: 700;
}

.kit-preview-page .preview-buy p {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 24px;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

.kit-preview-page .preview-buy .btn,
.kit-preview-page .preview-buy button {
  display: inline-block;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 700;
  background: var(--accent, #c9613f);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s;
  font-family: inherit;
}

.kit-preview-page .preview-buy .btn:hover,
.kit-preview-page .preview-buy button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(201, 97, 63, 0.4);
}

.kit-preview-page .preview-buy .trust-line {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.58);
  letter-spacing: 0.01em;
}


/* ─── 7. INLINE TOOL-LINK BADGES ──────────────────────────────────────────
   Some chapters in the EF Kit and Mental Health Tracker correspond to free
   tools we already shipped (Decision Fatigue Index, Re-entry Card, etc.).
   Linking ToC items to those tools lets a buyer try the chapter for free
   before deciding — strongest possible trust signal. The .tool-badge class
   adds a small "Try it →" badge inline. */

.kit-preview-page .tool-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  font-weight: 600;
  background: var(--accent-soft, rgba(201, 97, 63, 0.12));
  color: var(--accent, #c9613f);
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid var(--accent-soft, rgba(201, 97, 63, 0.18));
}

.kit-preview-page .tool-badge:hover {
  background: var(--accent, #c9613f);
  color: #fff;
}


/* ─── 8. ALL-PREVIEWS INDEX (/buy/preview/all/) ───────────────────────────
   Grid of all 5 kits, each as a tile with: kit name, page count, 1-line
   description, "See preview →" link. This is the bundle "Peek inside"
   destination — for buyers who want to compare sample previews before
   choosing a kit or buying a bundle. */

.kit-preview-all-page main#main {
  padding-top: 32px;
  padding-bottom: 96px;
}

.kit-preview-all-page .preview-all-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.kit-preview-all-page .preview-all-header {
  margin: 0 0 48px;
}

.kit-preview-all-page .preview-all-header h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 16px 0;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.kit-preview-all-page .preview-all-header .lede {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink-2, #2c2c2b);
  max-width: 60ch;
  margin: 0;
}

.kit-preview-all-page .preview-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin: 0 0 48px;
}

.kit-preview-all-page .preview-all-tile {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--surface, #fff);
  border: 1px solid var(--rule, rgba(20, 20, 19, 0.12));
  border-radius: 8px;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.kit-preview-all-page .preview-all-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(20, 20, 19, 0.08);
  border-color: var(--accent, #c9613f);
}

.kit-preview-all-page .preview-all-tile h2 {
  font-size: 19px;
  margin: 0 0 8px;
  font-weight: 700;
  line-height: 1.3;
}

.kit-preview-all-page .preview-all-tile h2 a {
  color: inherit;
  text-decoration: none;
}

.kit-preview-all-page .preview-all-tile .tile-meta {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3, #888);
  margin: 0 0 14px;
}

.kit-preview-all-page .preview-all-tile p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2, #2c2c2b);
  margin: 0 0 20px;
  flex: 1;
}

.kit-preview-all-page .preview-all-tile .tile-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent, #c9613f);
  text-decoration: none;
  align-self: flex-start;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.kit-preview-all-page .preview-all-tile .tile-link:hover {
  color: var(--ink, #14110b);
}


/* ─── 9. /BUY/ PAGE — "Peek inside" link integration ──────────────────────
   These rules style the small "Peek inside →" link added to each kit card
   on /buy/index.html. The link sits below the buy buttons in the card
   actions area. Visually it's secondary to the buy CTA — a quiet escape
   hatch for the still-deciding buyer. */

.dr-peek-inside {
  display: inline-block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2, #555);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-strong, #b3b3b1);
  letter-spacing: 0.01em;
}

.dr-peek-inside:hover {
  color: var(--accent, #c9613f);
  border-bottom-color: var(--accent, #c9613f);
  border-bottom-style: solid;
}

/* When the peek link sits inside .dr-preview-actions or .buy-actions, give
   it a small top margin so it doesn't crowd the primary buy button. */
.buy-actions .dr-peek-inside,
.dr-preview-actions .dr-peek-inside,
.dr-bundle-card .dr-peek-inside {
  margin-top: 12px;
  display: block;
  text-align: center;
}


/* ─── 10. DARK MODE PARITY ────────────────────────────────────────────────
   We follow the project's existing data-theme="dark" pattern (see
   theme-v20260508a.css). Surfaces darken, ink lightens, the buy panel
   stays accent-bright. */

:root[data-theme="dark"] .kit-preview-page header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .kit-preview-page header .eyebrow {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
}

:root[data-theme="dark"] .kit-preview-page .preview-toc {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .kit-preview-page .preview-toc li {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .kit-preview-page .preview-honest {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: rgba(255, 255, 255, 0.32);
}

:root[data-theme="dark"] .kit-preview-page .preview-honest h2,
:root[data-theme="dark"] .kit-preview-page .preview-honest p {
  color: rgba(255, 255, 255, 0.88);
}

:root[data-theme="dark"] .kit-preview-page .preview-buy {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .kit-preview-all-page .preview-all-tile {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.10);
}

:root[data-theme="dark"] .kit-preview-all-page .preview-all-tile:hover {
  border-color: var(--accent, #f08160);
}

:root[data-theme="dark"] .dr-peek-inside {
  color: rgba(255, 255, 255, 0.70);
  border-bottom-color: rgba(255, 255, 255, 0.25);
}


/* ─── 11. PRINT (we want buyers to be able to save a preview) ─────────────
   Hide nav, footer, and buy panel buttons on print. The whole point of a
   sample preview is that it's portable — buyers might print it to read
   later. Don't fight that. */

@media print {
  nav, footer, .deskrune-sale-banner, .deskrune-sticky-buy { display: none !important; }
  .kit-preview-page .preview-buy { background: none; color: #000; padding: 16px 0; }
  .kit-preview-page .preview-buy button { display: none; }
  .kit-preview-page .preview-buy .trust-line { color: #555; }
}