/* ==========================================================================
   Legal pages — Claude Design turn 11 (11a shell · 11b scenarios · 11c
   disclaimer grid · 11d mobile 390).

   Scoped under .lg-page so none of it reaches the Tailwind theme the rest of
   the site runs on. Tokens are the scheduler design system's, inlined here as
   locals rather than importing the DS token files, so this stylesheet has no
   external dependency and cannot be broken by a change upstream:

     ink #111111 · body #374151 · muted #6b7280 · soft #898989 · faint #9ca3af
     lines #e5e7eb · hairline #f3f4f6 · card var(--xw-ink-tint, #f8f9fa) · surface #f8f9fa
     warning #f59e0b · dark #101010
     display Manrope · ui Inter · mono JetBrains Mono
     radius sm 6 / md 8 / lg 12 / pill 9999
   ========================================================================== */

.lg-page {
  --ink: #111111;
  --body: #374151;
  --muted: #6b7280;
  --faint: #9ca3af;
  --line: #e5e7eb;
  --hair: #f3f4f6;
  --card: var(--xw-ink-tint, #f8f9fa);
  --surface: #f8f9fa;
  --warn: #f59e0b;
  --warn-ink: #b45309;
  --r-md: 8px;
  --r-lg: 12px;

  background: #fff;
  color: var(--body);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Breadcrumb removed at the owner's request — the sidebar already names the
   document you are in and the header carries the way home. The markup is gone
   from legal_page.php too, so there is no hidden element left behind. */

/* ── the 220 + content grid, centred at 980 (11a) ───────────────────────── */
.lg-shell { padding: 22px 32px 40px; display: flex; justify-content: center; }
.lg-grid {
  width: 980px;
  max-width: 100%;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
/* 11c's disclaimer runs narrower and full-width — no sidebar competing with
   the four-card grid. 11b's refund page sits between the two at 900. */
.lg-grid.narrow { width: 820px; grid-template-columns: minmax(0, 1fr); }
.lg-grid.mid    { width: 900px; grid-template-columns: minmax(0, 1fr); }

/* ── sidebar ────────────────────────────────────────────────────────────── */
/* Pinned BELOW the sticky site header (--xw-hdr-h, published by customer_header.php)
   plus a 16px breathing gap — at top:16px it was sliding under the header by 50px.
   max-height + overflow so a long document's TOC (Terms has 24 sections) can still
   be scrolled to the bottom instead of being cut off by the viewport. */
.lg-side {
  position: sticky;
  top: calc(var(--xw-hdr-h, 66px) + 16px);
  max-height: calc(100vh - var(--xw-hdr-h, 66px) - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lg-side::-webkit-scrollbar { width: 6px; }
.lg-side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.lg-tag {
  font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .06em;
  color: var(--faint);
  text-transform: uppercase;
}
.lg-docs { display: flex; flex-direction: column; gap: 1px; }
.lg-docs a {
  padding: 9px 10px;
  border-radius: var(--r-md);
  font: 400 12px 'Inter', sans-serif;
  color: var(--body);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
@media (hover: hover) { .lg-docs a:hover { background: var(--hair); color: var(--ink); } }
.lg-docs a.on { background: var(--card); color: var(--ink); font-weight: 500; }

.lg-rule { height: 1px; background: var(--hair); margin: 6px 0; }

/* "on this page" — the 2px bar is the active indicator (11a) */
.lg-toc { display: flex; flex-direction: column; gap: 9px; }
.lg-toc a {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  text-decoration: none;
  font: 400 11.5px/1.35 'Inter', sans-serif;
  color: var(--muted);
  transition: color .15s ease;
}
.lg-toc a::before {
  content: '';
  flex: none;
  width: 2px;
  min-height: 12px;
  align-self: stretch;
  border-radius: 1px;
  background: var(--hair);
  transition: background .2s ease;
}
@media (hover: hover) { .lg-toc a:hover { color: var(--ink); } }
.lg-toc a.on { color: var(--ink); font-weight: 500; }
.lg-toc a.on::before { background: var(--ink); }

/* ── document head ──────────────────────────────────────────────────────── */
.lg-doc { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.lg-head {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 18px;
}
.lg-h1 {
  font: 600 32px/1.1 'Manrope', system-ui, sans-serif;
  letter-spacing: -1.1px;
  color: var(--ink);
  margin: 0;
}
.lg-meta { font: 400 11.5px 'Inter', sans-serif; color: var(--muted); margin: 0; }

/* ── "the short version" (11a) ──────────────────────────────────────────── */
.lg-short {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lg-short p { margin: 0; font: 400 13.5px/1.65 'Inter', sans-serif; color: var(--body); }
.lg-short strong { color: var(--ink); font-weight: 600; }

/* ── prose ──────────────────────────────────────────────────────────────── */
.lg-body { display: flex; flex-direction: column; gap: 22px; }
/* Each h2 + everything up to the next h2 is grouped into a section by legal.js,
   which is what lets the same markup be a plain column on desktop and an
   accordion on a phone without the copy being written twice. */
/* scroll-margin so a TOC jump lands the heading below the sticky header rather
   than tucked behind it — same offset the sidebar uses. */
.lg-sec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: calc(var(--xw-hdr-h, 66px) + 18px); }
.lg-prose h2 {
  font: 600 19px/1.25 'Manrope', system-ui, sans-serif;
  letter-spacing: -.4px;
  color: var(--ink);
  margin: 0;
}
.lg-prose h3 {
  font: 600 14.5px/1.35 'Inter', sans-serif;
  color: var(--ink);
  margin: 4px 0 0;
}
/* Legal prose is read, not skimmed: 14.5/1.8 rather than the wireframe's
   placeholder bars, which carry no type size of their own. */
.lg-prose p { margin: 0; font: 400 14.5px/1.8 'Inter', sans-serif; color: var(--body); }
/* Underlines belong to links inside the DOCUMENT, not to the furniture around
   it — scoped to prose so the sidebar, the TOC, the picker and the breadcrumb
   keep the plain treatment the design gives them. */
.lg-doc p a, .lg-doc li a, .lg-doc td a, .lg-short a, .lg-note a, .lg-caps a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
@media (hover: hover) {
  .lg-doc p a:hover, .lg-doc li a:hover, .lg-doc td a:hover,
  .lg-short a:hover, .lg-note a:hover, .lg-caps a:hover { text-decoration-thickness: 2px; }
}
.lg-prose ul, .lg-prose ol { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.lg-prose li { position: relative; padding-left: 19px; font: 400 14.5px/1.8 'Inter', sans-serif; color: var(--body); }
/* the 5px dot from 11a */
.lg-prose ul > li::before {
  content: '';
  position: absolute;
  left: 3px; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink);
}
.lg-prose ol { counter-reset: lgi; }
.lg-prose ol > li { counter-increment: lgi; }
.lg-prose ol > li::before {
  content: counter(lgi) '.';
  position: absolute;
  left: 0; top: 0;
  font: 500 12px/1.9 'JetBrains Mono', ui-monospace, monospace;
  color: var(--faint);
}
.lg-prose strong { color: var(--ink); font-weight: 600; }

/* ── "important" callout — 3px amber rule (11a / 11d) ───────────────────── */
.lg-note {
  border-left: 3px solid var(--warn);
  background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lg-note .lg-tag { color: var(--warn-ink); }
.lg-note p { font-size: 13.5px; line-height: 1.65; }

/* ── the all-caps statutory blocks the old pages used ───────────────────── */
.lg-caps {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lg-caps p { font: 500 12.5px/1.7 'Inter', sans-serif; color: var(--ink); }

/* ── 11b scenario cards ─────────────────────────────────────────────────── */
.lg-hero {
  border: 1px solid var(--ink);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lg-hero b { font: 600 15px 'Manrope', system-ui, sans-serif; letter-spacing: -.4px; color: var(--ink); }
.lg-hero p { font-size: 13px; line-height: 1.6; }

.lg-cases { display: flex; flex-direction: column; gap: 12px; }
.lg-case {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  gap: 16px;
}
.lg-case > .lg-n {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  font: 500 12px 'JetBrains Mono', ui-monospace, monospace;
  color: var(--body);
}
.lg-case > div:last-child { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lg-case b { font: 500 13.5px 'Inter', sans-serif; color: var(--ink); }
.lg-case p { font-size: 13.5px; line-height: 1.65; }

/* ── 11c four-up fact grid ──────────────────────────────────────────────── */
.lg-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lg-fact {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lg-fact b { font: 500 13px 'Inter', sans-serif; color: var(--ink); }
.lg-fact p { font-size: 13px; line-height: 1.6; }
.lg-src { font: 400 10.5px/1.6 'Inter', sans-serif; color: var(--faint); }

/* ── page footer row ────────────────────────────────────────────────────── */
.lg-foot {
  border-top: 1px solid var(--hair);
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lg-foot .lg-rel { flex: 1; min-width: 220px; font: 400 11px/1.7 'Inter', sans-serif; color: var(--muted); }
.lg-foot .lg-rel a { color: var(--ink); font-weight: 500; text-decoration: none; }
@media (hover: hover) { .lg-foot .lg-rel a:hover { text-decoration: underline; } }
.lg-print {
  font: 500 11px 'Inter', sans-serif;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
}
@media (hover: hover) { .lg-print:hover { text-decoration: underline; } }

/* ── mobile doc picker (11d) — hidden on desktop, the sidebar covers it ─── */
.lg-picker { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Phone / tablet — 11d
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .lg-bc { display: none; }               /* the picker replaces it */
  .lg-shell { padding: 0 0 24px; }
  .lg-grid, .lg-grid.narrow, .lg-grid.mid { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lg-side { display: none; }

  .lg-head { padding: 16px 16px 0; border-bottom: 0; gap: 6px; }
  .lg-h1 { font-size: 25px; line-height: 1.15; letter-spacing: -.9px; }
  .lg-meta { font-size: 10.5px; }

  /* the horizontally scrolling chips, with 11d's right-edge mask */
  .lg-picker {
    display: flex;
    gap: 7px;
    padding: 12px 16px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
            mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .lg-picker::-webkit-scrollbar { display: none; }
  .lg-picker a {
    flex: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    font: 500 10.5px 'Inter', sans-serif;
    color: var(--body);
    text-decoration: none;
    white-space: nowrap;
    touch-action: manipulation;
  }
  .lg-picker a.on { background: var(--ink); color: #fff; border-color: var(--ink); }

  .lg-doc { gap: 18px; padding: 0 16px; }
  .lg-short { border-radius: var(--r-lg); padding: 15px; }
  .lg-short p { font-size: 12.5px; line-height: 1.6; }

  /* Sections become accordions. legal.js adds .lg-acc + the toggle button; the
     :not(.lg-acc) fallback keeps everything open and readable with no JS. */
  .lg-body { gap: 12px; }
  .lg-sec.lg-acc {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 0;
    gap: 0;
    overflow: hidden;
  }
  .lg-sec.lg-acc > .lg-accbtn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 15px;
    background: none;
    border: 0;
    text-align: left;
    font: 500 12.5px/1.4 'Inter', sans-serif;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
  }
  .lg-sec.lg-acc > .lg-accbtn .lg-pm { flex: none; color: var(--faint); font-size: 14px; line-height: 1; }
  .lg-sec.lg-acc > .lg-accwrap { display: none; padding: 0 15px 14px; flex-direction: column; gap: 11px; }
  .lg-sec.lg-acc.open > .lg-accwrap { display: flex; }
  .lg-sec.lg-acc > .lg-accwrap > h2 { display: none; }   /* the button is the heading */

  .lg-page p, .lg-page li { font-size: 13px; line-height: 1.7; }
  .lg-note { padding: 12px 13px; border-radius: 0 var(--r-md) var(--r-md) 0; }
  .lg-note p { font-size: 11.5px; line-height: 1.55; }
  .lg-caps { padding: 13px 14px; }
  .lg-caps p { font-size: 11.5px; line-height: 1.6; }

  .lg-facts { grid-template-columns: 1fr; gap: 12px; }
  .lg-fact, .lg-case, .lg-hero { padding: 14px; }
  .lg-case { gap: 12px; }
  .lg-case > .lg-n { width: 24px; height: 24px; font-size: 10.5px; }
  .lg-case b { font-size: 12.5px; }
  .lg-case p, .lg-fact p, .lg-hero p { font-size: 11.5px; line-height: 1.55; }
  .lg-hero b { font-size: 12.5px; }

  .lg-foot { padding-top: 14px; }
  .lg-foot .lg-rel { font-size: 10.5px; line-height: 1.6; }
}

/* ── print / save as PDF: drop the furniture, keep the document ─────────── */
@media print {
  .lg-side, .lg-picker, .lg-bc, .lg-print, .lg-foot { display: none !important; }
  .lg-page { background: #fff; }
  .lg-shell { padding: 0; display: block; }
  .lg-grid { width: auto; display: block; }
  .lg-sec.lg-acc > .lg-accwrap { display: flex !important; }
  .lg-sec.lg-acc > .lg-accwrap > h2 { display: block !important; }
  .lg-sec.lg-acc > .lg-accbtn { display: none !important; }
  .lg-sec, .lg-case, .lg-fact, .lg-note, .lg-caps { break-inside: avoid; }
  .lg-page a { text-decoration: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Page-specific blocks carried over from the old pages.

   These keep their original .lp-* class names on purpose: they wrap real legal
   copy, and renaming them would mean editing markup inside the documents for no
   gain. Only the skin changes — each one is re-cut to the design's card
   language (11b scenario cards / 11c fact grid), and the semantic colour that
   used to be a whole tinted panel is now carried by the label alone, which is
   how the design uses colour (monochrome surfaces, amber reserved for warnings).
   ══════════════════════════════════════════════════════════════════════════ */

/* refund.php — the three-up "who pays what" summary (11c fact grid) */
.lg-page .lp-summ { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.lg-page .lp-summ-box {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lg-page .lp-summ-box strong { font: 600 13px 'Inter', sans-serif; color: var(--ink); }
.lg-page .lp-summ-box span { font: 400 12.5px/1.6 'Inter', sans-serif; color: var(--body); }
/* the accent lives on a top rule, not a wash of colour */
.lg-page .lp-summ-box { border-top: 3px solid var(--xw-green, #15803d); }
.lg-page .lp-summ-box.amber { border-top-color: var(--warn); }
.lg-page .lp-summ-box.red   { border-top-color: var(--xw-red, #dc2626); }

/* privacy.php — your rights, two-up */
.lg-page .lp-rights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.lg-page .lp-right-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lg-page .lp-right-item strong { font: 600 12.5px 'Inter', sans-serif; color: var(--ink); }
.lg-page .lp-right-item span { font: 400 12.5px/1.6 'Inter', sans-serif; color: var(--body); }

/* grievance.php — the named officers, two-up */
.lg-page .lp-officers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.lg-page .lp-off {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lg-page .lp-off .lp-off-role {
  font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 5px;
}
.lg-page .lp-off .lp-off-name { font: 600 15px 'Manrope', system-ui, sans-serif; letter-spacing: -.3px; color: var(--ink); }
.lg-page .lp-off p { font-size: 12.5px; line-height: 1.7; }

/* grievance.php — response-time commitments, the number is the point */
.lg-page .lp-sla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.lg-page .lp-sla-box {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.lg-page .lp-sla-box strong { font: 600 22px/1.1 'Manrope', system-ui, sans-serif; letter-spacing: -.6px; color: var(--ink); }
.lg-page .lp-sla-box span { font: 400 11.5px/1.5 'Inter', sans-serif; color: var(--muted); }

/* the "how to reach us" block that closes several documents */
.lg-page .lp-contact {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.lg-page .lp-contact p { font-size: 13px; line-height: 1.7; }

.lg-page .lp-intro { font-size: 14.5px; line-height: 1.8; color: var(--body); margin: 0; }

/* grievance.php — the escalation timeline (the numbered dot is 11b's .lg-n) */
.lg-page .lp-time { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.lg-page .lp-time li { position: relative; padding: 0 0 20px 36px; }
.lg-page .lp-time li::before {          /* the connecting rule */
  content: '';
  position: absolute;
  left: 11px; top: 24px; bottom: 0;
  width: 2px;
  background: var(--hair);
}
.lg-page .lp-time li:last-child { padding-bottom: 0; }
.lg-page .lp-time li:last-child::before { display: none; }
.lg-page .lp-time .dot {
  position: absolute;
  left: 0; top: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--card);
  color: var(--body);
  font: 500 11px 'JetBrains Mono', ui-monospace, monospace;
  display: flex; align-items: center; justify-content: center;
}
.lg-page .lp-time strong { display: block; font: 500 13.5px 'Inter', sans-serif; color: var(--ink); margin-bottom: 2px; }
.lg-page .lp-time span { font: 400 13.5px/1.7 'Inter', sans-serif; color: var(--body); }

/* tables (cookie categories, retention schedules) */
.lg-page .tw-wrap { overflow-x: auto; margin: 0; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.lg-page .tw { width: 100%; border-collapse: collapse; font-size: 13px; }
.lg-page .tw th {
  background: var(--surface);
  color: var(--ink);
  font: 500 11.5px 'Inter', sans-serif;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.lg-page .tw td { padding: 10px 12px; border: 1px solid var(--line); color: var(--body); vertical-align: top; line-height: 1.65; }

@media (max-width: 1023px) {
  .lg-page .lp-summ, .lg-page .lp-rights, .lg-page .lp-officers, .lg-page .lp-sla { grid-template-columns: 1fr; }
  .lg-page .lp-summ-box, .lg-page .lp-right-item, .lg-page .lp-off,
  .lg-page .lp-sla-box, .lg-page .lp-contact { padding: 13px 14px; }
  .lg-page .lp-summ-box span, .lg-page .lp-right-item span,
  .lg-page .lp-off p, .lg-page .lp-contact p, .lg-page .lp-time span { font-size: 12px; line-height: 1.6; }
  .lg-page .lp-time strong { font-size: 12.5px; }
  .lg-page .tw { font-size: 12px; }
}

/* ── touch: nothing reacts to a finger being held ───────────────────────── */
@media (hover: none) {
  .lg-page a, .lg-page button {
    -webkit-touch-callout: none;
    -webkit-user-select: none; user-select: none;
  }
  /* the document itself stays selectable — people copy clauses out of these */
  .lg-page p, .lg-page li, .lg-page h1, .lg-page h2, .lg-prose h3 {
    -webkit-user-select: text; user-select: text;
  }
}

/* ─── Content pages (About / How it works / Help / Contact) ──────────────────
   These reuse the shell but NOT the prose typography: they keep their own hero,
   stat strip, cards and CTAs, which are Tailwind-classed markup. Two things the
   shell must not impose on them: */

/* 1. Section spacing. .lg-sec is a 12px flex column, which would ADD to the
      margins the existing markup already carries (mt-3, mt-6, py-7…) and open
      every block up. Zero the gap and let the page's own rhythm stand. */
.lg-page:not(.lg-prose) .lg-sec { gap: 0; }
.lg-page:not(.lg-prose) .lg-body { gap: 34px; }

/* 2. A wider grid for pages that carry cards rather than paragraphs. */
.lg-grid.wide { width: 1120px; grid-template-columns: 220px minmax(0, 1fr); }

/* The hero a content page passes in sits flush at the top of the article and
   spans the column; it brings its own padding. */
.lg-hero { margin: 0; }
.lg-hero + .lg-body { margin-top: 4px; }

/* An h2 that leads a content section is the page's own heading, so it keeps its
   Tailwind size — but on a phone the accordion BUTTON replaces it, and that
   label must not inherit a 30px display size. */
.lg-accbtn { text-align: left; }
.lg-page:not(.lg-prose) .lg-accbtn > span:first-child {
  font: 600 15px/1.35 'Manrope', system-ui, sans-serif;
  letter-spacing: -.2px;
  color: var(--ink);
}

/* Sections opted out of collapsing (the contact form) keep a plain heading on a
   phone rather than a dead accordion row. */
@media (max-width: 1023px) {
  .lg-page:not(.lg-prose) .lg-sec[data-noacc] { padding-top: 4px; }
}