/* Document pages (guide, privacy, terms, delete-account) and the shared offer pages (/o/<id>)
   in the Sep 2026 site design.
   Loaded AFTER landing.css, which supplies the tokens, fonts, nav, buttons and footer — so the
   chrome is identical to the landing page and stays in sync with it. This file only adds the
   document layout and gives prose its margins, bullets and tables back (landing.css resets them).
   The words on these pages were not changed by the redesign; only the chrome around them. */

.doc-head { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(24px, 3vw, 36px); }
.doc-head__in { max-width: 820px; margin-inline: auto; }
.guide-page .doc-head__in { max-width: none; }
.doc-head h1 { font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin: 14px 0 12px; text-wrap: balance; }
.updated { font-size: 14px; font-weight: 600; color: var(--muted); }
.crumb { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 22px; font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; min-height: 44px; }
.crumb:hover { color: #0E1F44; }

/* ── Prose ──────────────────────────────────────────────────────────────── */
.doc { max-width: 820px; margin-inline: auto; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 4vw, 48px); }
.prose { font-size: 16.5px; line-height: 1.7; color: #2A3B5C; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 16px; }
.prose h2 { font-size: clamp(21px, 2.2vw, 25px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); margin: 40px 0 12px; scroll-margin-top: 96px; }
.prose h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); margin: 28px 0 8px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li { margin: 7px 0; padding-left: 4px; }
.prose li::marker { color: var(--muted); }
.prose strong { font-weight: 700; color: var(--ink); }
.prose a { color: var(--blue-text); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; font-weight: 600; }
.prose a:hover { color: var(--navy); }
.prose em { font-style: italic; }

.prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 8px 0 24px; font-size: 15.5px; line-height: 1.6; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.prose th { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--input); border-bottom-color: var(--divider); }
.prose th:first-child { border-top-left-radius: 14px; } .prose th:last-child { border-top-right-radius: 14px; }
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { width: 38%; }
/* Two long columns are unreadable on a phone: each row becomes a small stacked block. */
@media (max-width: 640px) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: auto; }
  .prose tr:first-child:has(th) { display: none; }
  .prose td { padding: 0; border: 0; }
  .prose td:first-child { width: auto; margin-bottom: 6px; }
  .prose tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .prose tr:last-child { border-bottom: 0; }
}

/* ── Guide ──────────────────────────────────────────────────────────────── */
.guide { font-size: 16.5px; line-height: 1.7; color: #2A3B5C; }
.guide > p { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--muted); max-width: 720px; margin: 0 0 24px; }
.toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(32px, 4vw, 48px); }
.toc a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 9px 16px; background: #fff; border: 1.5px solid var(--outline);
  border-radius: 999px; font-size: 14.5px; font-weight: 700; color: var(--navy); text-decoration: none; transition: border-color .15s ease; }
.toc a:hover { border-color: var(--navy); }

.guide section { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 4vw, 48px); margin-bottom: 20px; scroll-margin-top: 96px;
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(32px, 5vw, 72px); align-items: start; }
.guide section > * { grid-column: 1; }
.guide h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); margin: 0 0 16px; text-wrap: balance; }
.guide section p { margin: 0 0 14px; max-width: 560px; }
.guide section ul { list-style: disc; margin: 0 0 14px; padding-left: 24px; max-width: 560px; }
.guide section li { margin: 6px 0; }
.guide strong { font-weight: 700; color: var(--ink); }
.guide section a:not(.anchor) { color: var(--blue-text); font-weight: 600; text-underline-offset: 3px; }
.anchor { margin-left: 8px; font-weight: 600; font-size: .7em; color: var(--muted); text-decoration: none; vertical-align: middle; }
.anchor:hover { color: var(--navy); }

/* Screenshots already carry their own status bar and island, so the frame is just the bezel. */
.guide figure { margin: 20px auto 0; width: min(100%, 288px); }
.shot { display: block; width: 100%; height: auto; border-radius: 40px; background: #F2F2F7;
  box-shadow: 0 32px 64px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 7px #0F1B33, 0 0 0 8px rgba(0, 0, 0, .25);
  /* A missing screenshot collapses quietly instead of showing a broken-image box. */
  font-size: 0; color: transparent; }
/* Premium: only the top of the paywall. The capture below that point showed a simulator sandbox
   price in the wrong currency, so the FILE itself is cropped to 640x600 (not just this box). */
.peek { position: relative; overflow: hidden; aspect-ratio: 640 / 600; border-radius: 40px 40px 0 0; padding: 8px 8px 0; }
.guide figure.peek { width: min(100% - 16px, 288px); } /* outer width = content width on narrow phones */
.peek .shot { border-radius: 40px 40px 0 0; }
.peek::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); pointer-events: none; }

/* Two columns from 860px: text beside the phone, sides alternating down the page. */
@media (min-width: 860px) {
  .guide section { grid-template-columns: minmax(0, 1fr) 304px; }
  .guide section > figure { grid-column: 2; grid-row: 1 / span 12; margin: 0; align-self: center; padding: 8px; }
  .guide section > figure.peek { padding: 8px 8px 0; align-self: end; margin-bottom: calc(-1 * clamp(24px, 4vw, 48px)); }
  .guide section:nth-of-type(even) { grid-template-columns: 304px minmax(0, 1fr); }
  .guide section:nth-of-type(even) > * { grid-column: 2; }
  .guide section:nth-of-type(even) > figure { grid-column: 1; }
}

.doc-cta { margin-top: clamp(40px, 5vw, 64px); background: var(--dark-grad); color: #fff; border-radius: 28px; padding: clamp(28px, 4vw, 44px);
  display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.doc-cta h2 { font-size: clamp(24px, 2.8vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 6px; color: #fff; }
.doc-cta p { margin: 0; color: var(--on-dark); font-size: 16px; }
.doc-cta .badge img { height: 52px; width: auto; display: block; }
.doc-cta :focus-visible { outline-color: #fff; } /* the blue ring is under 3:1 on the navy gradient */

.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.doc-page .foot { padding-top: clamp(48px, 6vw, 72px); }

/* ── Shared offer pages (/o/<id>, rendered by src/offer-page.js) ──────────── */
/* The perk first; the "what is Perkroo" panel below it on a phone, beside it from 900px. */
.offer-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; padding-top: clamp(28px, 5vw, 64px); }
.offer { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 4vw, 48px); }
.offer__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.offer__chips .tile { margin-right: 6px; }
.pill--quiet { background: var(--input); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.offer h1 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.offer__at { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.offer__at strong { color: var(--ink); font-weight: 700; }
.offer__desc { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16.5px; line-height: 1.7; color: #2A3B5C;
  max-width: 680px; overflow-wrap: anywhere; }
.offer__desc p + p { margin-top: 14px; }
/* Outline button, but provider names can be long: the label wraps instead of the page scrolling. */
.offer__source { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; min-height: 48px; box-sizing: border-box; padding: 12px 20px;
  background: #fff; border: 1.5px solid var(--outline); border-radius: 999px; color: var(--navy); font-weight: 700; font-size: 15px; line-height: 1.35;
  text-decoration: none; transition: border-color .15s ease; }
.offer__source:hover { border-color: var(--navy); color: var(--navy); }
.offer__source .i { font-size: 16px; }

.offer-cta { background: var(--dark-grad); color: #fff; border-radius: 28px; padding: clamp(24px, 3.5vw, 36px); }
.offer-cta h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin: 12px 0 10px; color: #fff; text-wrap: balance; }
.offer-cta p { color: var(--on-dark); font-size: 16px; line-height: 1.55; }
.offer-cta .badge { display: inline-flex; margin: 22px 0 18px; }
.offer-cta .badge img { height: 52px; width: auto; display: block; }
.offer-cta .offer-cta__more { font-size: 15px; }
.offer-cta__more + .offer-cta__more { margin-top: 8px; }
.offer-cta__more a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.offer-cta__more a:hover { color: var(--amber); }
.offer-cta :focus-visible { outline-color: #fff; } /* the blue ring is under 3:1 on the navy gradient */

.offer__gone { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 560px; }
.offer__gone-links { margin-top: 18px; }
.offer__gone-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--blue-text); text-underline-offset: 3px; }

@media (min-width: 900px) {
  .offer-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
  .offer-cta { position: sticky; top: 104px; } /* stays in view beside a long description */
}

/* FAQ (/faq/): the Guide's cards, single column because there are no screenshots, questions as h3. */
.faq-page .guide section, .faq-page .guide section:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
.faq-page .guide section:nth-of-type(even) > * { grid-column: 1; }
.faq-page .guide h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); margin: 26px 0 8px; scroll-margin-top: 96px; text-wrap: balance; }
.faq-page .guide h2 + h3 { margin-top: 6px; }