/* ============================================
   ListingPrep — legal pages styles (Étape B, palier 2).

   Scoped to the 3 legal pages (/legal/, /privacy/, /terms/). Loaded
   AFTER style.css + listingprep.css; declares the Schibsted Grotesk +
   JetBrains Mono webfont stacks (the new public-identity pages are the
   only ones that fetch these fonts — the tools stay on system fonts).

   Layout: narrow reading column (.doc → wrap 760px max), numbered
   sections (h2 with .num), gentle visual hierarchy. Brand chrome
   (.site-header__brand + .brand-mark + .site-footer-global) inherits
   from listingprep.css; this file only adds page-specific styling.
   ============================================ */

/* Page-scoped typography — overrides style.css's system font stack
   ONLY on pages that link this file. */
body {
  font-family: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* Brand link picks up the new sans-serif on these pages (style.css sets
   it to Georgia by default). Sans-serif fits the cleaner legal layout. */
.site-header__brand {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.site-header__brand span {
  color: var(--color-brand);
}

/* "Back to home" link — sits on the right side of the header where the
   nav inter-outils lives on tool pages. Different by intent: legal pages
   have no inter-tool nav (per brief). */
.site-header__back {
  font-size: .9rem;
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
}
.site-header__back:hover {
  color: var(--color-brand);
}

/* h1/h2/h3 use the same sans-serif (Schibsted), not the Georgia stack
   inherited from style.css. h-base rules from style.css already set
   margins + line-height; we override font-family here. */
h1, h2, h3, h4 {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
}

/* ============= Document layout ============= */
.doc {
  padding: 4rem 0 4.5rem;
}
.doc__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.doc__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: .85rem;
}

.doc__h1 {
  font-size: clamp(2rem, 5vw, 2.85rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 .9rem;
  text-wrap: pretty;
}
.doc__updated {
  color: var(--color-text-muted);
  font-size: .9rem;
  margin: 0 0 .5rem;
}
.doc__lede {
  color: var(--color-text);
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 1.1rem 0 .5rem;
  max-width: 62ch;
}

.doc__caveat {
  margin: 1.75rem 0 .5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 0 10px 10px 0;
  color: var(--color-text-muted);
  font-size: .92rem;
  line-height: 1.55;
}

/* Numbered sections — each begins with a thin separator + the h2
   numbering monogram in JetBrains Mono. */
.doc__section {
  padding: 1.9rem 0;
  border-top: 1px solid var(--color-border);
}
.doc__section:first-of-type {
  border-top: none;
}
.doc__section h2 {
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 .85rem;
}
.doc__section h2 .doc__num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .92rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-right: .65rem;
}
.doc__section h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.4rem 0 .5rem;
}
.doc__section p {
  margin: .75rem 0;
  max-width: 64ch;
  color: var(--color-text);
}
.doc__section ul {
  margin: .75rem 0;
  padding-left: 1.4rem;
  max-width: 64ch;
}
.doc__section li {
  margin: .5rem 0;
  color: var(--color-text);
}
.doc__section li::marker {
  color: var(--color-brand);
}
.doc__section strong {
  color: var(--color-text);
  font-weight: 600;
}
.doc__section a {
  color: var(--color-brand);
  text-decoration: none;
}
.doc__section a:hover {
  text-decoration: underline;
}
.doc__section .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* Ownership highlight — the "We never store your files" line in privacy. */
.doc__ownership {
  margin: 1.65rem 0;
  padding: 1.25rem 1.4rem;
  border-radius: 12px;
  background: #e4ede7;
  border: 1px solid #d6e4dc;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 500;
}

/* Table of contents — small navigation box in privacy. */
.doc__toc {
  margin: 1.9rem 0 .35rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.doc__toc h4 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  margin: 0 0 .75rem;
}
.doc__toc ol {
  margin: 0;
  padding-left: 1.25rem;
}
.doc__toc li {
  margin: .35rem 0;
}
.doc__toc a {
  color: var(--color-brand);
  text-decoration: none;
}
.doc__toc a:hover {
  text-decoration: underline;
}

/* Address block on /legal/ only — the only place where "Geoffrey Bagot"
   appears with the full postal address (brief: identity rule). */
.doc__address {
  font-style: normal;
  line-height: 1.75;
  color: var(--color-text);
  margin: .25rem 0;
}
.doc__address strong {
  font-weight: 600;
}

/* Footer sits flush with the document — kill the top margin .site-footer-global
   inherits from listingprep.css since the document already provides bottom
   breathing room via .doc padding. */
.site-footer-global {
  margin-top: 0;
}

/* ============= /thanks/ — Kit double opt-in success page =============
   Single-purpose post-submit success page. NO header (success state stands
   on its own; the in-card "Back to ListingPrep" CTA carries the return path).
   Centered card on cream background, footer global below carries the legal
   coverage like every other page.

   Layout: min-height calc so the card stays vertically centered above the
   footer, regardless of viewport height. .site-footer-global sits in the
   normal flow underneath. */
.thanks {
  min-height: calc(100vh - 22rem); /* leaves room for the footer block (~22rem) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
}
.thanks__card {
  max-width: 520px;
  width: 100%;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 3.4rem 3rem;
  box-shadow: 0 2px 6px rgba(29, 27, 22, 0.05), 0 30px 60px -28px rgba(29, 27, 22, 0.3);
}
.thanks__check {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--color-brand);
  display: grid;
  place-items: center;
  margin: 0 auto 1.6rem;
  box-shadow: 0 12px 24px -10px rgba(30, 77, 82, 0.55);
}
.thanks__check svg { display: block; }
.thanks__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin: 0 0 .85rem;
}
.thanks__title {
  font-size: clamp(1.65rem, 4vw, 2.1rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 .85rem;
  text-wrap: pretty;
}
.thanks__body {
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 42ch;
  margin: 0 auto .6rem;
}
/* Secondary CTA line — appears UNDER the primary "Start with Resize →"
   button. Surfaces the other two tools (Mockup, PDF Maker) discreetly so
   the seller's eye lands on Resize first (the canonical workflow entry)
   without burying the alternatives. */
.thanks__secondary {
  color: var(--color-text-muted);
  font-size: .9rem;
  margin: 1.1rem 0 0;
}
.thanks__secondary a {
  color: var(--color-brand);
  text-decoration: none;
  font-weight: 500;
}
.thanks__secondary a:hover {
  text-decoration: underline;
}
.thanks__back-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.9rem;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: var(--color-brand);
  padding: .85rem 1.5rem;
  border-radius: 12px;
  text-decoration: none;
  transition: background .15s, transform .12s;
}
.thanks__back-cta:hover {
  background: #163d41; /* slightly darker teal for hover */
}
.thanks__back-cta:active {
  transform: translateY(1px);
}
.thanks__back-cta svg { flex: none; }