/* ============================================================================
   page.css — the two designed standalone pages: the 404 and /contact/.

   Depends on tokens.css + base.css + archive.css, and is loaded after all
   three (the same arrangement home.css and post.css use). It reuses the
   archive's chrome — page gutters, `.well`, `.btn`, `.eyebrow` — and adds only
   the blocks that exist nowhere else.

   NO NEW COLOURS AND NO NEW TYPE. Every value is a token already in tokens.css.

   Same breakpoints as its siblings: 1180 (gutters step down), 980 (two-column
   blocks collapse), 640 (the 390px artboard).
   ========================================================================== */

.pg { padding: 0 var(--pad) 8px; max-width: 1080px; }

/* -- Head ------------------------------------------------------------------ */
.pg-head {
  margin: 32px 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.pg-head .eyebrow { margin-bottom: 12px; }
.pg-head h1 {
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.024em;
  max-width: 18ch;
}
.pg-lede {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}
/* The path that 404'd, quoted back. Mono because it is a URL, and wrapped
   anywhere because a 300-character query string must not push the page sideways
   on a 390px screen. */
.pg-path {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* -- Shared section furniture ---------------------------------------------- */
.pg-sec { margin-top: 40px; }
.pg-sec--tint {
  padding: 32px;
  background: var(--sage-tint);
  border: 1px solid var(--sage-line-soft);
  border-radius: var(--radius-xl);
}
.pg-h { font-size: 28px; letter-spacing: -0.018em; margin-bottom: 16px; max-width: 34ch; }
.pg-body {
  max-width: var(--measure);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.pg-cta { margin-top: 20px; }

/* A quiet inset: the "they may not be gone" note on the 404, and the
   affiliate/scope paragraph on the contact page. */
.pg-note {
  margin-top: 24px;
  padding: 16px 18px;
  max-width: var(--measure);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
  text-wrap: pretty;
}
.pg-note.well { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); }
.pg-note em { color: var(--ink-2); font-style: italic; }

.pg-tail {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  max-width: var(--measure);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* -- 404: the routes out ---------------------------------------------------
   Three cards, each a live count and the URL that returns exactly the rows it
   counted. Auto-fit rather than a fixed three, because Maker Therapy has no
   blog and so gets two. */
.pg-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}
.pg-route {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 6px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  color: var(--ink);
}
.pg-route:hover { border-color: var(--sage-line); box-shadow: var(--shadow-md); text-decoration: none; color: var(--ink); }
.pg-route-i { display: inline-flex; color: var(--sage); font-size: 20px; margin-bottom: 4px; }
.pg-route-n {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pg-route-n small { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.pg-route-l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sage-deep);
}
.pg-route-l .ico { width: 14px; height: 14px; }
.pg-route:hover .pg-route-l { text-decoration: underline; }
.pg-route-s { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }

/* -- Contact: the urgent line ----------------------------------------------
   Deliberately NOT an alarm. Sand well, sage rule, body type — the same
   treatment the affiliate disclosure gets. It has to be impossible to miss and
   it must not be the loudest thing on a page most people reached to report a
   typo. */
.pg-urgent {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--sage);
  border-radius: var(--radius-lg);
  max-width: 74ch;
}
.pg-urgent p { font-size: 15px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.pg-urgent b { color: var(--ink); font-weight: 500; }
.pg-urgent a { font-weight: 500; }

/* -- Contact: the two detail cards ----------------------------------------- */
.pg-two {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.pg-card {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}
.pg-card .eyebrow { margin-bottom: 10px; }
.pg-card-t { font-size: 22px; letter-spacing: -0.014em; overflow-wrap: anywhere; }
.pg-card-t a { color: var(--sage-deep); }
.pg-card-s { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }
.pg-address {
  margin-top: 10px;
  font-style: normal;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* -- Contact: can / cannot ------------------------------------------------- */
.pg-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 28px var(--gap);
  align-items: start;
}
.pg-col .eyebrow { margin-bottom: 12px; }
.pg-list { display: flex; flex-direction: column; gap: 10px; }
.pg-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
/* A sage rule against what we can do, a muted one against what we cannot.
   Decorative — the column's own eyebrow says which list this is, and the two
   lists are never adjacent on a phone. */
.pg-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--sage);
}
.pg-list--no li::before { background: var(--ink-4); }
.pg-col .pg-note { margin-top: 16px; padding: 0; }

/* ==========================================================================
   1180 → the headline follows the gutters down
   ========================================================================== */
@media (max-width: 1180px) {
  .pg-head h1 { font-size: 40px; }
  .pg-h { font-size: 26px; }
}

/* ==========================================================================
   980
   ========================================================================== */
@media (max-width: 980px) {
  .pg-sec { margin-top: 34px; }
  .pg-sec--tint { padding: 24px; }
}

/* ==========================================================================
   640 → the 390px artboard
   ========================================================================== */
@media (max-width: 640px) {
  .pg { padding-bottom: 0; }

  .pg-head { margin: 22px 0 20px; padding-bottom: 20px; }
  .pg-head h1 { font-size: 29px; line-height: 1.1; letter-spacing: -0.02em; max-width: none; }
  .pg-lede { margin-top: 12px; font-size: 16px; }

  .pg-urgent { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); }
  .pg-urgent p { font-size: 15.5px; }

  .pg-two { margin-top: 20px; gap: 12px; }
  .pg-card { padding: 20px; border-radius: 16px; }
  .pg-card-t { font-size: 19px; }
  /* An email address is a tap target on a phone — it opens the mail app. */
  .pg-card-t a { display: inline-flex; align-items: center; min-height: 44px; }

  .pg-sec { margin-top: 30px; }
  .pg-sec--tint { padding: 20px 18px; border-radius: 16px; }
  .pg-h { font-size: 23px; letter-spacing: -0.016em; max-width: none; }
  .pg-body, .pg-list li { font-size: 15.5px; }
  .pg-note { margin-top: 18px; padding: 14px 16px; font-size: 15.5px; }
  .pg-split { gap: 22px; }

  .pg-routes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Two lines and a number is a lot of card to scroll past three times on a
     phone; the note is what the desktop card has room for, not what a phone
     needs to choose between three links. */
  .pg-route { padding: 16px 18px; border-radius: 16px; gap: 4px; }
  .pg-route-i { display: none; }
  .pg-route-n { font-size: 24px; }
  .pg-route-s { display: none; }

  .pg-tail { margin-top: 26px; font-size: 15.5px; }
  .pg-cta .btn { width: 100%; }
}

@media print {
  .pg-routes, .pg-cta { display: none; }
  .pg-card, .pg-route { box-shadow: none; break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   long-form documents — /privacy-policy/ and /terms/
   ---------------------------------------------------------------------------
   The markup comes from render/legal.js, which BOTH SITES share. Maker Therapy
   dresses it in glass.css; this is Quick Counseling's own treatment of the same
   elements, and it lives here because `page.css` is in PAGE_SHEETS, which is
   what the documents route loads.

   ⚠ WITHOUT THIS BLOCK THE PAGES RENDER COMPLETELY UNSTYLED, and that is not a
   hypothetical: Quick Counseling's documents shipped that way for one deploy on
   17 Aug 2026. The class names existed in exactly one stylesheet — Maker's —
   and nothing failed, because CSS does not error on markup it has no rules for.
   It just renders as a wall of full-bleed text. The lesson is the same one the
   removal form taught in base.css: shared markup needs its rules in a sheet
   EVERY SITE THAT EMITS IT ACTUALLY LOADS.

   Deliberately NOT a copy of the glass version. Quick Counseling sets display
   type in the serif and accents in terracotta; Maker is sans and indigo. Two
   legal pages that look identical on two domains would undo the differentiation
   the rest of this migration paid for — and the tokens are named differently
   anyway (`--line` here, `--border` there), so a copy would silently fall back
   to initial values.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠ THE GUTTER LIVES HERE, not on a wrapper. `archiveDocument` puts this block
   inside <main> with no horizontal padding of its own — `.pg` and `.post-wrap`
   each supply their own, and so must this. Without it the document runs edge to
   edge while the breadcrumb above it stays indented, which is how it shipped
   for one deploy on 17 Aug 2026. */
.lg { max-width: 1080px; padding: 28px var(--pad) 72px; }
.lg:focus { outline: none; }

.lg-head h1 {
  max-width: 20ch;
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.lg-lede {
  max-width: 58ch;
  margin-top: 16px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lg-updated {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lg-updated time { color: var(--ink); }

/* The summary is a SUMMARY, never a substitute — `.lg-summary-n` says so on the
   page and this is what makes that sentence look like a caveat rather than a
   fifth bullet. */
.lg-summary {
  margin-top: 32px;
  padding: 24px 26px;
  background: var(--sage-tint);
  border: 1px solid var(--sage-line-soft);
  border-radius: var(--radius-lg);
}
/* legal.js labels these `caption`, so that is what carries the rule — styling
   them as `.lg-summary > h2` worked but left the class itself defined nowhere,
   which is the shape of the bug this whole block exists because of. */
.lg .caption {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lg-summary > .caption { color: var(--sage-deep); }
.lg-summary-l { display: grid; gap: 10px; margin-top: 14px; }
.lg-summary-l li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}
.lg-summary-l li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--sage);
}
.lg-summary-n {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Two columns on desktop: a table of contents that stays put, and the document.
   One column below 1000px, where the TOC becomes the <details> instead.

   ⚠ THE RAIL IS FIRST BECAUSE IT IS FIRST IN THE DOM. legal.js emits
   <nav class="lg-toc"> before <div class="lg-main">, so a `1fr 232px` template
   puts the CONTENTS in the wide column and squeezes the document into 232px —
   which is exactly what happened on the first deploy of these pages. Reordering
   with `order` would fix the picture and leave the tab order wrong; matching
   the DOM is the version that is right for a keyboard too. */
.lg-body {
  display: grid;
  grid-template-columns: 232px minmax(0, 74ch);
  gap: 56px;
  margin-top: 44px;
  align-items: start;
}
.lg-main { min-width: 0; }

.lg-toc {
  position: sticky;
  top: 24px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.lg-toc-l { display: grid; gap: 1px; margin-top: 12px; }
.lg-toc-l a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: baseline;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-2);
}
.lg-toc-l a:hover { background: var(--sage-tint); color: var(--sage-deep); text-decoration: none; }
.lg-n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.lg-toc-l a:hover .lg-n { color: var(--sage-deep); }

/* The mobile contents. `<details>` because both sites ship no client
   JavaScript and <summary> is a real disclosure button for free. */
.lg-toc-m { display: none; }
.lg-toc-m > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.lg-toc-m > summary::-webkit-details-marker { display: none; }
.lg-toc-m[open] > summary { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.lg-toc-n {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.lg-toc-m[open] > .lg-toc-l {
  margin-top: 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── the sections ─────────────────────────────────────────────────────────── */

.lg-sec { scroll-margin-top: 20px; }
.lg-sec + .lg-sec { margin-top: 52px; }
.lg-sec > h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.lg-sec > h2 .lg-n { font-size: 12px; }
.lg-sec h3 {
  margin-top: 26px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.lg-sec p, .lg-tail p {
  margin-top: 15px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lg-sec h3 + p { margin-top: 8px; }
/* `anywhere` for the reason `.post-body a` has it: one long unbreakable token
   in a link is a box wider than a 320px phone, and one of those gives the whole
   document a sideways scroll. These documents are written here rather than
   imported, so none has one today; this is what stops the next edit adding one. */
.lg-sec a, .lg-tail a { color: var(--sage-deep); font-weight: 500; overflow-wrap: anywhere; }
.lg-sec strong, .lg-tail strong { color: var(--ink); font-weight: 600; }

.lg-list, .lg-ol { display: grid; gap: 10px; margin-top: 15px; }
.lg-list li, .lg-ol li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lg-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink-4);
}
.lg-ol { counter-reset: lg-ol; }
.lg-ol li { padding-left: 30px; counter-increment: lg-ol; }
.lg-ol li::before {
  content: counter(lg-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.95;
  font-variant-numeric: tabular-nums;
  color: var(--sage-deep);
}

/* An inset aside. Same weight as body text — a note that shouts is a note
   people learn to skip. */
.lg-note {
  margin-top: 20px !important;
  padding: 16px 18px;
  background: var(--surface-2);
  border-left: 2px solid var(--line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15.5px !important;
  color: var(--ink-2);
}
/* The one that IS meant to stop you. Used twice across both documents, on the
   session-recording disclosure and the crisis notice; any more and it stops
   meaning anything. */
.lg-warn {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--clay-tint);
  border: 1px solid var(--clay);
  border-radius: var(--radius-lg);
}
.lg-warn p { margin-top: 0; color: var(--ink); }

.lg-tablewrap { margin-top: 18px; overflow-x: auto; }
.lg-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 15px;
}
.lg-table thead th {
  padding: 0 14px 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-3);
}
.lg-table td, .lg-table tbody th {
  padding: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-2);
  text-align: left;
  vertical-align: top;
  text-wrap: pretty;
}
.lg-table tbody tr:first-child td, .lg-table tbody tr:first-child th { border-top: 0; }
.lg-table tbody th { font-weight: 600; color: var(--ink); }

.lg-defs { display: grid; gap: 16px; margin-top: 18px; }
.lg-defs > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.lg-defs > div:last-child { padding-bottom: 0; border-bottom: 0; }
.lg-defs dt { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.lg-defs dd { font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* The closing block — how to reach a human. Raised, so it reads as the end of
   the document rather than one more section. */
.lg-tail {
  margin-top: 52px;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.lg-tail > h2 {
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.lg-tail > h2 + p { margin-top: 8px; }

@media (max-width: 1000px) {
  .lg-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lg-toc { display: none; }
  .lg-toc-m { display: block; margin-bottom: 32px; }
}

@media (max-width: 640px) {
  /* ⚠ KEEP `var(--pad)` ON THE SIDES. Writing `padding: 20px 0 56px` here — the
     obvious shorthand for "less top and bottom on a phone" — silently zeroes
     the horizontal gutter the rule above sets, and the document runs edge to
     edge while the breadcrumb above it stays indented. It shipped that way for
     one deploy on 17 Aug 2026. */
  .lg { padding: 20px var(--pad) 56px; }
  .lg-head h1 { font-size: 33px; max-width: none; }
  .lg-lede { font-size: 17px; }
  .lg-summary { padding: 20px; }
  .lg-sec + .lg-sec { margin-top: 40px; }
  .lg-sec > h2 { font-size: 23px; }
  .lg-sec p, .lg-tail p { font-size: 16px; }
  /* One column: a 13rem term column next to a definition is unreadable at
     360px, and the two halves are a pair rather than a table. */
  .lg-defs > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lg-tail { padding: 20px; }
}