/* =========================================================================
   Legal / policy pages — Warranty, Terms & Conditions, Privacy Policy, Returns.
   Shared layout: hero + "last updated" card, optional at-a-glance strip,
   sticky table-of-contents sidebar beside numbered sections.
   Loaded on those page templates (see inc/enqueue.php).
   Nova (Delta Appendix C): white hero, hairline glance strip, white preamble,
   the reading body on mist with white Outlined cards; the footer follows.
   ========================================================================= */

.lg-page { background: var(--w); color: var(--ink-2); overflow-x: hidden; }
.lg-page a { color: inherit; }

.lg-eyebrow {
	display: block;
	font-family: var(--fb); font-size: var(--fs-eyebrow); font-weight: 500;
	line-height: 1.4; letter-spacing: var(--ls-eyebrow); color: var(--tx-3);
	margin-bottom: 16px;
}
.lg-eyebrow-line { display: none; }
.lg-grad { color: var(--orange); }

/* ---------- Hero ---------- */
.lg-hero { padding: calc(var(--nav-h) + 56px) var(--gutter) 72px; background: var(--w); }
.lg-orb { display: none; }
.lg-orb-1 { display: none; }
.lg-orb-2 { display: none; }
.lg-hero-in { max-width: var(--max); margin: 0 auto; }
.lg-crumb { display: flex; align-items: center; gap: 8px; font-family: var(--fb); font-size: var(--fs-caption); color: var(--ink-4); margin-bottom: 32px; }
.lg-crumb a { color: var(--ink-3); text-decoration: none; transition: color var(--dur-1) var(--ease); }
.lg-crumb a:hover { color: var(--ink); }
.lg-crumb-cur { color: var(--ink-3); }
.lg-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--col-gap); align-items: end; }
.lg-title { font-family: var(--ff); font-weight: var(--fw-hero); letter-spacing: var(--ls-display); line-height: var(--lh-display); font-size: var(--fs-hero); color: var(--ink); max-width: 14ch; margin: 0 0 24px; }
.lg-lede { font-family: var(--fb); font-size: var(--fs-body-lg); color: var(--ink-2); line-height: var(--lh-body-lg); max-width: 52ch; margin: 0; }
.lg-updated {
	padding: 24px 26px; border-radius: var(--r);
	background: var(--w); border: 1px solid var(--line);
	display: flex; align-items: center; gap: 16px;
}
.lg-updated-icon { width: 40px; height: 40px; border-radius: var(--r-xs); background: var(--mist-2); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lg-updated-icon svg { width: 20px; height: 20px; }
.lg-updated-lab { font-family: var(--fb); font-size: var(--fs-spec); font-weight: 500; letter-spacing: var(--ls-spec); color: var(--ink-3); margin-bottom: 4px; }
.lg-updated-val { font-family: var(--ff); font-weight: 600; font-size: 1rem; color: var(--ink); }

/* ---------- At-a-glance strip (white, hairline top and bottom) ---------- */
.lg-glance { padding: var(--sec-y-sm) var(--gutter); background: var(--w); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lg-glance-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.lg-glance-item { padding: 4px 24px; border-left: 1px solid var(--line); }
.lg-glance-item:first-child { border-left: none; padding-left: 0; }
.lg-glance-big { font-family: var(--ff); font-weight: 600; font-size: var(--fs-h3); letter-spacing: var(--ls-h2); color: var(--ink); line-height: var(--lh-h3); margin-bottom: 8px; }
.lg-glance-lab { font-family: var(--fb); font-size: var(--fs-spec); font-weight: 500; letter-spacing: var(--ls-spec); color: var(--ink-3); }
.lg-glance-sub { font-family: var(--fb); font-size: var(--fs-caption); color: var(--ink-2); margin-top: 6px; line-height: 1.5; }

/* ---------- Preamble (Terms, Privacy, Returns) ---------- */
.lg-preamble { padding: var(--sec-y-sm) var(--gutter); background: var(--w); }
.lg-hero + .lg-preamble { border-top: 1px solid var(--line); }
.lg-preamble-in { max-width: var(--max); margin: 0 auto; font-family: var(--fb); font-size: var(--fs-body); color: var(--ink-2); line-height: var(--lh-body-lg); }
.lg-preamble-in > * { max-width: 800px; }
.lg-preamble-in p { margin: 0 0 16px; }
.lg-callout {
	margin: 0; padding: 14px 16px; border-radius: var(--rs);
	background: var(--mist); border: 0;
	color: var(--ink); font-weight: 500;
}

/* ---------- Body: TOC + article (the reading surface, on mist) ---------- */
.lg-body { padding: var(--sec-y) var(--gutter); background: var(--mist); }
.lg-body-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--col-gap); align-items: flex-start; }
.lg-toc { position: sticky; top: calc(var(--nav-h) + 32px); align-self: flex-start; }
.lg-toc--tall { max-height: calc(100vh - var(--nav-h) - 56px); overflow-y: auto; scrollbar-width: thin; border-radius: var(--r); background: var(--w); border: 1px solid var(--line); }
.lg-toc-card { padding: 20px 16px; border-radius: var(--r); background: var(--w); border: 1px solid var(--line); }
/* A tall contents list scrolls inside its own frame, so the frame carries the card edge and the whole card stays visible */
.lg-toc--tall .lg-toc-card { border: 0; }
.lg-toc-title { font-family: var(--fb); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--ls-eyebrow); color: var(--ink-3); margin: 0 0 12px 12px; }
.lg-toc-nav { display: flex; flex-direction: column; gap: 2px; }
.lg-toc-link {
	padding: 9px 12px; border-radius: var(--rs);
	font-family: var(--fb); font-size: .875rem; font-weight: 500; color: var(--ink-2);
	background: transparent; border: 0; text-decoration: none;
	display: flex; align-items: center; gap: 10px;
	transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.lg-toc-link:hover { color: var(--ink); background: var(--mist); }
.lg-toc-num { font-family: var(--fb); font-size: .8125rem; color: var(--ink-3); min-width: 18px; }
.lg-toc-link.is-active { color: var(--ink); font-weight: 600; background: var(--mist); }
.lg-toc-link.is-active .lg-toc-num { color: var(--ink); }

.lg-article { max-width: 800px; min-width: 0; }
.lg-section { padding-top: 8px; padding-bottom: 48px; margin-bottom: 40px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.lg-section.is-last { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.lg-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.lg-section-num { font-family: var(--fb); font-weight: 500; font-size: var(--fs-body); color: var(--ink-3); flex-shrink: 0; }
.lg-section-rule { display: none; }
.lg-section-head h2 { font-family: var(--ff); font-weight: var(--fw-display); letter-spacing: var(--ls-h2); line-height: var(--lh-h3); font-size: var(--fs-h3); color: var(--ink); margin: 0; }

/* Prose */
.lg-prose { font-family: var(--fb); font-size: var(--fs-body); color: var(--ink-2); line-height: var(--lh-body-lg); }
.lg-prose p { margin: 0 0 14px; }
.lg-prose p:last-child { margin-bottom: 0; }
.lg-prose strong { color: var(--ink); font-weight: 600; }
.lg-prose a { color: var(--orange-lo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; transition: color var(--dur-1) var(--ease); }
.lg-prose a:hover { color: var(--ink); }
.lg-prose h3 { font-family: var(--ff); font-weight: 600; font-size: var(--fs-h4); color: var(--ink); letter-spacing: -.01em; margin: 26px 0 10px; }
.lg-prose ul { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.lg-prose ul li { position: relative; padding-left: 20px; }
.lg-prose ul li::before { content: ''; position: absolute; left: 4px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.lg-prose em { color: var(--ink-2); font-style: italic; }

/* Card lists (covered / excluded) — Outlined small, white on the mist body */
.lg-cardlist { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 18px; }
.lg-cardrow { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--rs); background: var(--w); border: 1px solid var(--line); }
.lg-cardrow.is-top { align-items: flex-start; }
.lg-cardrow span:last-child { font-family: var(--fb); font-size: var(--fs-body); color: var(--ink); line-height: 1.55; }
.lg-cardrow.is-neg span:last-child { color: var(--ink-2); }
.lg-cardicon { width: 28px; height: 28px; border-radius: var(--r-xs); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lg-cardicon--yes { background: var(--teal-wash); color: var(--teal); }
.lg-cardicon--no { background: var(--mist-2); color: var(--ink-2); margin-top: 0; }

/* Definition rows (privacy third-parties etc.) */
.lg-deflist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 18px; }
.lg-defrow { padding: 16px 18px; border-radius: var(--rs); background: var(--w); border: 1px solid var(--line); }
.lg-defrow-k { font-family: var(--ff); font-weight: 600; font-size: 1rem; color: var(--ink); margin-bottom: 4px; }
.lg-defrow-v { font-family: var(--fb); font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.55; }

/* "In Short" callout (Privacy) — white plate on the mist body */
.lg-inshort {
	padding: 14px 16px; border-radius: var(--rs);
	background: var(--w); border: 1px solid var(--line);
	margin: 4px 0 18px;
	font-family: var(--fb); font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.65;
}
.lg-inshort strong { color: var(--ink); font-style: italic; font-weight: 600; margin-right: 6px; }

/* Third-party provider cards (Privacy §4) */
.lg-tpgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 8px; }
.lg-tpcard { padding: 16px 18px; border-radius: var(--rs); background: var(--w); border: 1px solid var(--line); }
.lg-tpcard-cat { font-family: var(--fb); font-size: var(--fs-spec); font-weight: 500; letter-spacing: var(--ls-spec); color: var(--ink-3); margin-bottom: 8px; }
.lg-tpcard-name { font-family: var(--ff); font-weight: 600; font-size: 1.0625rem; color: var(--ink); }

/* Cookie-type cards (Privacy §5) */
.lg-cookie { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 8px; }
.lg-cookie-card { padding: 18px 20px; border-radius: var(--rs); background: var(--w); border: 1px solid var(--line); }
.lg-cookie-name { font-family: var(--ff); font-weight: 600; font-size: 1rem; color: var(--ink); margin-bottom: 8px; letter-spacing: -.01em; }
.lg-cookie-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; font-family: var(--fb); font-size: .8125rem; color: var(--ink-2); }
.lg-cookie-meta strong { color: var(--ink); font-weight: 600; }
.lg-cookie-purpose { font-family: var(--fb); font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.6; }
.lg-cookie-purpose strong { color: var(--ink); }

/* Contact card (end of the article) — Outlined, white on mist, Primary button */
.lg-contact {
	margin-top: 18px; padding: 28px 32px; border-radius: var(--r-lg);
	background: var(--w);
	border: 1px solid var(--line);
	display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.lg-contact-lab { font-family: var(--fb); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--ls-eyebrow); color: var(--ink-3); margin-bottom: 8px; }
.lg-contact-h { font-family: var(--ff); font-size: var(--fs-h4); font-weight: 600; color: var(--ink); letter-spacing: -.01em; margin-bottom: 4px; }
.lg-contact-p { font-family: var(--fb); font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.55; }
.lg-contact-btn {
	height: 48px; padding: 0 22px; border-radius: var(--rs); border: 1px solid transparent;
	background: var(--orange); color: var(--w);
	font: 600 var(--fs-btn)/1 var(--fb); letter-spacing: 0;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none;
	cursor: pointer; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.lg-page .lg-contact-btn, .lg-page .lg-contact-btn:hover { color: var(--w); text-decoration: none; }   /* beats .lg-prose a */
.lg-contact-btn:hover { background: var(--orange-lo); }
.lg-contact-btn:active { background: var(--orange-lo); transform: translateY(1px); }
.lg-contact-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lg-contact-btn svg { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.lg-hero-grid { grid-template-columns: 1fr; gap: 28px; align-items: flex-start; }
	.lg-glance-in { grid-template-columns: 1fr; gap: 20px; }
	.lg-glance-item { border-left: none; padding: 0; }
	.lg-body-in { grid-template-columns: 1fr; gap: 32px; }
	.lg-toc { position: static; top: auto; }
	.lg-toc--tall { max-height: none; overflow: visible; }
	.lg-deflist { grid-template-columns: 1fr; }
	.lg-contact { grid-template-columns: 1fr; gap: 20px; }
	.lg-contact-btn { justify-self: start; }
}
@media (max-width: 600px) {
	.lg-contact { padding: 24px 20px; }
	.lg-tpgrid { grid-template-columns: 1fr; }
}