/* ==========================================================================
   lg-a: legal hub, policy template, contact page
   Shared by every policy page (lg-a, lg-b, lg-c). Prefix: lg-
   ========================================================================== */

/* ---------- Legal identity placeholders: [Registered company name] etc. ----------
   Quiet on purpose: muted text with a dashed underline (title "To be filled in before launch", set by
   _dev/lg-a.js). Easy for the owner to find, without making the page look broken. */
.ph {
  color: var(--muted); font: inherit; overflow-wrap: anywhere; cursor: help;
  text-decoration: underline dashed color-mix(in srgb, var(--muted) 70%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 0.24em;
}

/* Small dark icon tiles (hero chips, company card, contact panels) stay dark in both themes */
.lg-register__chip > svg, .lg-ct-mock__chip > svg, .lg-id__icon, .lg-ct-panel__who > span { --inv-bg: var(--panel-inv); --inv-ink: var(--panel-inv-ink); }
[data-theme="dark"] :is(.lg-register__chip > svg, .lg-ct-mock__chip > svg, .lg-id__icon, .lg-ct-panel__who > span) { box-shadow: inset 0 0 0 1px var(--panel-inv-line); }

/* ==========================================================================
   1. Policy header
   ========================================================================== */
.lg-phero { position: relative; padding: 56px 0 72px; isolation: isolate; border-bottom: 1px solid var(--line); }
.lg-phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; opacity: 0.75;
  -webkit-mask: radial-gradient(60% 90% at 20% 0%, #000 25%, transparent 75%); mask: radial-gradient(60% 90% at 20% 0%, #000 25%, transparent 75%);
}
.lg-phero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; margin-top: 28px; }
.lg-phero .eyebrow { display: flex; }
.lg-phero h1 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); font-weight: 540; letter-spacing: -0.055em; line-height: 1; margin: 20px 0 20px; text-wrap: balance; }
.lg-phero .lead { color: var(--muted); font-size: 1.12rem; max-width: 560px; }

.lg-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.lg-meta li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 0.84rem; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.lg-meta svg { width: 15px; height: 15px; color: var(--accent); }
.lg-meta time { font-weight: 560; color: var(--ink); }
.lg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lg-actions .btn svg, .lg-actions .btn:hover svg { transform: none; width: 16px; height: 16px; }

/* "The short version" */
.lg-short { --inv-bg: var(--panel-inv); --inv-ink: var(--panel-inv-ink); --inv-muted: var(--panel-inv-muted); }
[data-theme="dark"] .lg-short { box-shadow: 0 0 0 1px var(--panel-inv-line), var(--shadow-lg); }
.lg-short a:not(.btn) { color: var(--inv-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lg-short { position: relative; padding: 28px 28px 24px; border-radius: var(--radius-lg); background: var(--inv-bg); color: var(--inv-muted); box-shadow: var(--shadow-lg); overflow: hidden; }
.lg-short::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 38%, transparent), transparent); opacity: 0.55; pointer-events: none; }
.lg-short__head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed color-mix(in srgb, var(--inv-ink) 22%, transparent); }
.lg-short__head h2 { font-size: 1.2rem; letter-spacing: -0.025em; font-weight: 580; color: var(--inv-ink); }
.lg-short__head span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inv-muted); }
.lg-short__list { position: relative; z-index: 1; display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.lg-short__list li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: baseline; }
.lg-short__list b { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; color: color-mix(in srgb, var(--accent) 65%, var(--inv-ink)); }
.lg-short__list p { font-size: 0.95rem; line-height: 1.5; color: color-mix(in srgb, var(--inv-ink) 86%, transparent); }
.lg-short__note { position: relative; z-index: 1; margin-top: 18px; font-size: 0.8rem; color: var(--inv-muted); }

/* ==========================================================================
   2. Policy body: sticky contents + numbered prose
   ========================================================================== */
.lg-doc { padding: 72px 0 48px; }
.lg-doc__grid { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 72px; }
.lg-doc__side { align-self: stretch; min-width: 0; }
.lg-doc__sticky {
  position: sticky; top: calc(var(--anchor-offset) + 12px); display: grid; gap: 22px;
  max-height: calc(100vh - var(--anchor-offset) - 28px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; padding-right: 6px;
  /* long contents lists scroll inside the rail: its lower edge fades out instead of slicing a link or the
     help card in half, and the extra bottom padding lets the last card scroll clear of the fade */
  padding-bottom: 36px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
}
.lg-doc .toc { position: static; }
.lg-toc ol { counter-reset: lg-toc; }
.lg-toc li { counter-increment: lg-toc; }
.lg-toc a { display: flex; gap: 10px; font-size: 0.86rem; padding-top: 5px; padding-bottom: 5px; }
.lg-toc a::before { content: counter(lg-toc, decimal-leading-zero); flex: none; font-family: var(--mono); font-size: 0.7rem; line-height: 1.9; color: var(--faint); }
.lg-toc a.is-active::before { color: var(--accent); }
.lg-toc-btn { display: none; }

.lg-side-card { display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); font-size: 0.86rem; }
/* The help card only sits in the rail when it fits under the whole contents list; on long policies and short
   screens it would otherwise be sliced by the rail's edge (the same contacts close every policy anyway).
   Item counts are where the list (about 36px a line) plus the card outgrow the rail's height. */
@media (max-height: 860px) { .lg-doc__sticky:has(.lg-toc li:nth-child(13)) > .lg-side-card { display: none; } }
@media (max-height: 1000px) { .lg-doc__sticky:has(.lg-toc li:nth-child(17)) > .lg-side-card { display: none; } }
.lg-doc__sticky:has(.lg-toc li:nth-child(23)) > .lg-side-card { display: none; }
.lg-side-card strong { font-size: 0.88rem; font-weight: 580; }
.lg-side-card a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 520; overflow-wrap: anywhere; }
.lg-side-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg-side-card svg { width: 14px; height: 14px; }

.lg-prose { max-width: 760px; min-width: 0; counter-reset: lg-h2; }
.lg-prose h2 { counter-increment: lg-h2; counter-reset: lg-h3; display: flex; align-items: baseline; gap: 14px; margin-top: 2.6em; padding-top: 1.3em; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--anchor-offset) + 8px); }
.lg-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lg-prose h2::before { content: counter(lg-h2, decimal-leading-zero); flex: none; padding: 3px 8px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.04em; transform: translateY(-3px); }
.lg-prose h3 { counter-increment: lg-h3; scroll-margin-top: calc(var(--anchor-offset) + 8px); }
.lg-prose h3::before { content: counter(lg-h2) "." counter(lg-h3); margin-right: 10px; font-family: var(--mono); font-size: 0.8em; font-weight: 500; color: var(--faint); }
.lg-prose li strong { color: var(--ink); }
.lg-prose ol > li::marker { font-family: var(--mono); font-size: 0.86em; color: var(--accent); }
.lg-prose .callout { margin: 1.4em 0; font-size: 0.97rem; line-height: 1.6; }
.lg-prose .callout a { font-weight: 560; }

/* definition list */
.lg-defs { display: grid; grid-template-columns: 170px minmax(0, 1fr); margin: 1.2em 0 0; border-top: 1px solid var(--line); font-size: 0.98rem; }
.lg-defs dt, .lg-defs dd { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--line); }
.lg-defs dt { padding-right: 20px; font-weight: 580; color: var(--ink); }
.lg-defs dd { color: var(--ink-2); }

/* tables inside a policy */
.lg-table { margin: 1.4em 0; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.prose .lg-table table { min-width: 560px; margin: 0; font-size: 0.92rem; line-height: 1.55; }
.prose .lg-table th, .prose .lg-table td { padding: 12px 16px; }
.prose .lg-table thead th { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--bg); }
.prose .lg-table tbody tr:last-child td, .prose .lg-table tbody tr:last-child th { border-bottom: 0; }
.prose .lg-table tbody th { font-weight: 580; color: var(--ink); background: none; }
.prose .lg-table--fit table { min-width: 0; }
.lg-table code { white-space: nowrap; }
.prose .lg-table tbody th small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; color: var(--faint); }
.prose .lg-table td .lg-tag { margin: 2px 4px 2px 0; }
.prose .lg-table tbody th[scope="row"] { min-width: 132px; }
.lg-table__dur { font-family: var(--mono); font-size: 0.86em; color: var(--ink); white-space: nowrap; }
/* .lg-table--tight: short values (a storage key, a single tag, a duration) take only the width they need,
   so the prose columns get the rest instead of being squeezed to 3-4 words a line. Opt-in, because CSS
   can't see a sentence that follows the tag in the same cell. :where() keeps it at the specificity of the
   modifier alone, so page-level table rules still win. */
.lg-table--tight :where(th, td):where(:has(> code:only-child), :has(> .lg-tag:only-child)) { width: 1%; white-space: nowrap; }
/* durations get a fixed ~16-character column: "5 years after the service ends" wraps once */
.lg-table--tight :where(td:has(> .lg-table__dur:only-child)) { width: 11em; }
.lg-table--tight :where(td:has(> .lg-table__dur:only-child)) > .lg-table__dur { white-space: normal; }
/* four or more columns: slightly tighter cells so the text column keeps a readable width on small laptops */
@media (min-width: 641px) { .prose .lg-table--tight:has(thead th:nth-child(4)) :is(th, td) { padding-left: 12px; padding-right: 12px; } }
/* Column proportions for three-column text tables: .lg-table--c3a (label | long text | short text) and
   .lg-table--c3b (long label | short value | text). Widths are preferences; content minimums still win. */
.lg-table--c3a :where(thead th:nth-child(1)) { width: 23%; }
.lg-table--c3a :where(thead th:nth-child(3)) { width: 31%; }
.lg-table--c3b :where(thead th:nth-child(1)) { width: 36%; }
/* version history (.lg-table--log): version and date stay on one line, the change note takes the rest */
.lg-table--log :where(td:nth-child(-n+2)) { width: 1%; white-space: nowrap; }
.prose .lg-table--log td:nth-child(-n+2) { padding-right: 32px; }

/* small label chips inside tables (e.g. localStorage / sessionStorage) */
.lg-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); white-space: nowrap; }
.lg-tag--accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.lg-tag--green { color: var(--green); background: var(--green-soft); border-color: transparent; }

/* ==========================================================================
   3. After the policy: questions card + related policies
   ========================================================================== */
.lg-after { border-top: 1px solid var(--line); }
/* icon | text | buttons on one row. All three start on the same line (the icon sits level with the heading,
   the button group is as tall as the row and centres its buttons), so the strip reads as one row at every
   width instead of the icon, text and buttons each floating at a different height. */
.lg-ask { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px; row-gap: 18px; align-items: stretch; padding: 28px 32px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.lg-ask__icon { align-self: start; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.lg-ask__icon svg { width: 24px; height: 24px; }
.lg-ask__text { align-self: center; min-width: 0; }
.lg-ask h2 { font-size: 1.35rem; letter-spacing: -0.03em; font-weight: 580; text-wrap: balance; }
.lg-ask p { margin-top: 6px; color: var(--muted); font-size: 0.95rem; max-width: 560px; text-wrap: pretty; }
.lg-ask p a { color: var(--accent); font-weight: 560; }
.lg-ask__btns { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; justify-content: flex-end; }
.lg-ask__btns .btn { white-space: nowrap; }

.lg-related { margin-top: 56px; }
.lg-related__title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.lg-related__title::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.6; }
.lg-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lg-rel { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); transition: border-color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s; }
.lg-rel:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow); }
.lg-rel__icon { width: 38px; height: 38px; margin-bottom: 8px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink); transition: background 0.2s, color 0.2s; }
.lg-rel:hover .lg-rel__icon { background: var(--accent-soft); color: var(--accent); }
.lg-rel__icon svg { width: 19px; height: 19px; }
.lg-rel strong { font-size: 1.02rem; letter-spacing: -0.02em; }
.lg-rel small { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.lg-rel__go { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 560; color: var(--accent); }
.lg-rel__go svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.lg-rel:hover .lg-rel__go svg { transform: translateX(3px); }

/* ==========================================================================
   Responsive: policy template
   ========================================================================== */
@media (max-width: 1180px) {
  /* narrower contents rail so the policy text (and its tables) keep a comfortable measure on small laptops */
  .lg-doc__grid { grid-template-columns: 216px minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 980px) {
  /* buttons drop under the text and line up with it, so the text column is not squeezed beside them */
  .lg-ask { grid-template-columns: auto minmax(0, 1fr); }
  .lg-ask__btns { grid-column: 2; justify-content: flex-start; }
  .lg-phero__grid { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .lg-doc { padding-top: 40px; }
  .lg-doc__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lg-doc__sticky { position: static; max-height: none; overflow: visible; padding: 0; gap: 0; -webkit-mask-image: none; mask-image: none; }
  .lg-toc-btn {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; padding: 0 18px; border-radius: 14px;
    background: var(--card); border: 1px solid var(--line); font-weight: 560; color: var(--ink); box-shadow: var(--shadow-sm);
  }
  .lg-toc-btn svg { width: 18px; height: 18px; color: var(--accent); }
  .lg-toc-btn .lg-toc-btn__chev { margin-left: auto; color: var(--muted); transition: transform 0.3s var(--ease); }
  .lg-toc-btn[aria-expanded="true"] .lg-toc-btn__chev { transform: rotate(180deg); }
  .lg-doc .lg-toc { display: none; margin-top: 8px; padding: 18px 18px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
  .lg-doc__side.is-open .lg-toc { display: block; }
  .lg-side-card { display: none; }
  .lg-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* .lg-table--stack: rows become labelled blocks on phones (td[data-label] gives each value its column name) */
  .lg-table--stack { overflow: visible; }
  .prose .lg-table--stack table { min-width: 0; }
  .lg-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lg-table--stack table, .lg-table--stack tbody, .lg-table--stack tr, .prose .lg-table--stack th, .prose .lg-table--stack td { display: block; width: auto; }
  .lg-table--stack tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .lg-table--stack tbody tr:last-child { border-bottom: 0; }
  .prose .lg-table--stack th, .prose .lg-table--stack td { padding: 0; border: 0; background: none; }
  .prose .lg-table--stack tbody th[scope="row"] { min-width: 0; margin-bottom: 8px; font-size: 0.98rem; line-height: 1.4; }
  .prose .lg-table--stack td + td { margin-top: 8px; }
  .lg-table--stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  .lg-phero { padding: 36px 0 52px; }
  .lg-phero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  /* four pills of different widths stacked down a phone look ragged: one card with ruled rows instead */
  .lg-meta { display: grid; gap: 0; padding: 2px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
  .lg-meta li { padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  .lg-meta li:last-child { border-bottom: 0; }
  .lg-short { padding: 22px 20px 20px; }
  .lg-prose { font-size: 1rem; }
  .lg-prose h2 { font-size: 1.42rem; gap: 10px; }
  .lg-defs { grid-template-columns: 1fr; }
  .lg-defs dt { padding-bottom: 2px; border-bottom: 0; }
  .lg-defs dd { padding-top: 0; }
  .lg-ask { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 16px; }
  .lg-ask__btns { grid-column: 1; flex-wrap: wrap; }
  .lg-ask__btns .btn { flex: 1 1 100%; justify-content: center; }
  .lg-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lg-related__grid .lg-rel small { display: none; }
}

/* ==========================================================================
   4. Legal hub (legal.html)
   ========================================================================== */
.lg-head-row { max-width: none; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; }
.lg-head-row h2 { margin-bottom: 0; }
.lg-head-row > p { margin: 0 0 8px; }
.lg-band { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* hero mock: policy register */
.lg-register { position: relative; padding: 0 0 54px 28px; }
.lg-register .hero-browser { position: relative; z-index: 1; }
.lg-register__body { padding: 18px 20px 16px; }
.lg-register__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lg-register__head strong { font-size: 1rem; letter-spacing: -0.02em; }
.lg-register__head .lg-tag { gap: 7px; padding: 3px 10px; }
.lg-register__head .live-dot { width: 6px; height: 6px; }
.lg-register__cols, .lg-register__rows li { display: grid; grid-template-columns: minmax(0, 1fr) 56px 92px; gap: 10px; align-items: center; }
.lg-register__cols { padding: 0 12px 8px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.lg-register__cols span:nth-child(n+2), .lg-register__rows b, .lg-register__rows em { text-align: right; }
.lg-register__rows { display: grid; gap: 6px; }
.lg-register__rows li { padding: 10px 12px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); font-size: 0.86rem; color: var(--ink); }
.lg-register__rows li:first-child { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent); }
.lg-register__rows span { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 520; }
.lg-register__rows span svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.lg-register__rows b { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; color: var(--muted); }
.lg-register__rows em { font-style: normal; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.lg-register__foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 0.8rem; color: var(--muted); }
.lg-register__foot svg { width: 15px; height: 15px; color: var(--accent); }
.lg-register__chip { position: absolute; z-index: 2; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 12px; padding: 11px 16px 11px 11px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-weight: 560; font-size: 0.9rem; color: var(--ink); animation: bob 7s ease-in-out infinite; }
.lg-register__chip > svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--inv-bg); color: var(--inv-ink); }
.lg-register__chip small { display: block; font-family: var(--mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* library */
.lg-lib { padding-bottom: 96px; }
.lg-lib__group { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; padding: 44px 0; border-top: 1px solid var(--line); }
.lg-lib__group:last-child { border-bottom: 1px solid var(--line); }
.lg-lib__label { position: sticky; top: calc(var(--anchor-offset) + 16px); align-self: start; }
.lg-lib__num { display: inline-block; font-family: var(--mono); font-size: 0.78rem; color: var(--accent); padding: 3px 8px; border-radius: 7px; background: var(--accent-soft); }
.lg-lib__label h3 { margin-top: 16px; font-size: 1.6rem; letter-spacing: -0.04em; font-weight: 560; }
.lg-lib__label p { margin-top: 10px; color: var(--muted); font-size: 0.95rem; max-width: 260px; }
.lg-lib__label small { display: block; margin-top: 14px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.lg-lib__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* rows: [icon + text] stretches, [meta] stays on the bottom edge, so the meta lines of cards in a row align */
.lg-card { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 4px 16px; padding: 22px 22px 18px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); transition: border-color 0.25s, transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.lg-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-3px); box-shadow: var(--shadow); }
.lg-card__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink); transition: background 0.25s, color 0.25s; }
.lg-card:hover .lg-card__icon { background: var(--accent); color: #fff; }
.lg-card__icon svg { width: 21px; height: 21px; }
.lg-card__body strong { display: block; font-size: 1.06rem; letter-spacing: -0.02em; font-weight: 580; }
.lg-card__body small { display: block; margin-top: 6px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.lg-card__meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--faint); }
.lg-card__meta span:first-child { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.lg-card__meta svg { margin-left: auto; width: 17px; height: 17px; color: var(--accent); transition: transform 0.3s var(--ease); }
.lg-card:hover .lg-card__meta svg { transform: translateX(4px); }

/* quick answers */
.lg-answers-sec { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lg-ans { gap: 10px; }
/* Tiles in the same row share four row tracks (figure, question, answer, link) through subgrid, so a
   question that wraps to two lines pushes its neighbours' answers down with it and every answer starts
   on the same line. The two wide ".lg-ans--row" tiles keep their own layout. */
.lg-answers > .lg-ans:not(.lg-ans--row) { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
.lg-answers > .lg-ans:not(.lg-ans--row) > .lg-ans__link { align-self: end; }
.lg-ans__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lg-ans__fig { font-size: clamp(2.2rem, 3.4vw, 2.9rem); font-weight: 520; letter-spacing: -0.055em; line-height: 1; color: var(--ink); }
.lg-ans h3 { margin-top: 14px; font-size: 1.12rem; letter-spacing: -0.025em; text-wrap: balance; }
.lg-ans p { line-height: 1.55; }
.lg-ans__link { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 560; color: var(--accent); }
.lg-ans__link svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.lg-ans__link:hover svg { transform: translateX(3px); }
.lg-ans__table { display: grid; margin-top: 6px; border-top: 1px solid var(--line); }
.lg-ans__table > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.93rem; color: var(--ink-2); }
.lg-ans__table b { flex: none; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; color: var(--green); }
.lg-ans__table .is-off b { color: var(--muted); }
.lg-ans--wide .lg-ans__fig { color: var(--accent); }
.lg-ans--row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px; align-items: start; }
.lg-ans--row .lg-ans__top { flex-direction: column; gap: 12px; }
.lg-ans--row h3 { margin-top: 2px; }
.lg-ans--row > div:last-child { display: flex; flex-direction: column; gap: 8px; height: 100%; }

/* in-brief tabs */
.lg-brief .tabs__list { margin-bottom: 18px; }
.lg-brief__panel { scroll-margin-top: calc(var(--anchor-offset) + 72px); }
.lg-brief__panel:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 16px; }
.lg-brief__main { padding: 32px 36px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.lg-brief__main h3 { font-size: 1.5rem; letter-spacing: -0.035em; font-weight: 560; }
.lg-brief__list { counter-reset: lg-b; display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.lg-brief__list li { counter-increment: lg-b; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 1rem; }
.lg-brief__list li::before { content: counter(lg-b, decimal-leading-zero); font-family: var(--mono); font-size: 0.76rem; line-height: 1.9; color: var(--accent); }
.lg-brief__list a { color: var(--accent); font-weight: 520; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lg-brief__facts { --inv-bg: var(--panel-inv); --inv-ink: var(--panel-inv-ink); --inv-muted: var(--panel-inv-muted); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 28px; border-radius: var(--radius-lg); background: var(--inv-bg); color: var(--inv-muted); box-shadow: var(--shadow); }
[data-theme="dark"] .lg-brief__facts { box-shadow: 0 0 0 1px var(--panel-inv-line), 0 30px 70px -30px rgba(80, 100, 255, 0.35); }
.lg-brief__facts dl { margin: 0; display: grid; }
.lg-brief__facts dl > div { display: grid; gap: 2px; padding: 11px 0; border-bottom: 1px dashed color-mix(in srgb, var(--inv-ink) 18%, transparent); }
.lg-brief__facts dl > div:first-child { padding-top: 0; }
.lg-brief__facts dt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--inv-muted); }
.lg-brief__facts dd { margin: 0; font-size: 0.98rem; font-weight: 540; color: var(--inv-ink); }
.lg-brief__facts dd a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lg-brief__facts .btn--primary { background: var(--accent); color: #fff; }
.lg-brief__facts .btn--primary:hover { background: var(--accent-2); }

/* company identity */
.lg-company { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lg-company__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 72px; align-items: start; }
.lg-company__title { font-size: clamp(2.1rem, 4.2vw, 3.3rem); letter-spacing: -0.045em; line-height: 1.04; margin: 18px 0 16px; }
/* without an eyebrow above it the title starts level with the top of the card beside it */
.lg-company__grid > div > .lg-company__title:first-child { margin-top: 0; }
.lg-company__lead { color: var(--muted); font-size: 1.08rem; max-width: 520px; }
.lg-princ { display: grid; gap: 0; margin: 36px 0 0; padding: 0; list-style: none; }
.lg-princ li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid var(--line-2); }
.lg-princ li > span { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); line-height: 1.9; }
.lg-princ h3 { font-size: 1.1rem; letter-spacing: -0.025em; font-weight: 580; }
.lg-princ p { margin-top: 6px; color: var(--muted); font-size: 0.95rem; }

.lg-id { position: sticky; top: calc(var(--anchor-offset) + 16px); padding: 26px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lg-id__head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lg-id__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--inv-bg); color: var(--inv-ink); }
.lg-id__icon svg { width: 22px; height: 22px; }
.lg-id__head h3 { font-size: 1.15rem; letter-spacing: -0.025em; }
.lg-id__head small { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.lg-id__rows { margin: 0; display: grid; }
.lg-id__rows > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.93rem; }
.lg-id__rows dt { color: var(--muted); }
.lg-id__rows dd { margin: 0; color: var(--ink); font-weight: 520; }
.lg-id__rows dd a { color: var(--accent); }
.lg-id__mails { display: grid; gap: 6px; margin-top: 18px; }
.lg-id__mails li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 0.88rem; }
.lg-id__mails span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.lg-id__mails a { color: var(--ink); font-weight: 520; overflow-wrap: anywhere; }
.lg-id__mails a:hover { color: var(--accent); }
.lg-copy { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); border: 1px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.lg-copy:hover { background: var(--card); border-color: var(--line); color: var(--accent); }
.lg-copy svg { width: 16px; height: 16px; }

/* hub and contact heroes: break the headline into even lines instead of leaving one word on the last */
.lg-hub-hero h1, .lg-ct-hero h1 { text-wrap: balance; }

@media (max-width: 1180px) {
  /* a narrower label rail keeps the two policy cards per row wide enough to read */
  .lg-lib__group { grid-template-columns: 216px minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 1100px) {
  .lg-register__cols, .lg-register__rows li { grid-template-columns: minmax(0, 1fr) 84px; }
  .lg-register__cols span:nth-child(2), .lg-register__rows b { display: none; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .bento.lg-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-answers > .tile { grid-column: span 1; }
  .lg-answers > .lg-ans--wide { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .lg-head-row { grid-template-columns: 1fr; gap: 14px; }
  .lg-register { max-width: 560px; }
  .lg-lib__group { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .lg-lib__label { position: static; }
  .lg-lib__label p { max-width: 520px; }
  .lg-ans--row { grid-template-columns: 1fr; gap: 10px; }
  .lg-ans--row .lg-ans__top { flex-direction: row; }
  .lg-ans--row h3 { margin-top: 14px; }
  .lg-brief__panel:not([hidden]) { grid-template-columns: 1fr; }
  .lg-company__grid { grid-template-columns: 1fr; gap: 40px; }
  .lg-id { position: static; }
}
@media (max-width: 640px) {
  /* the policy register mock repeats the library below: phones go straight from the intro to the policies */
  .lg-register { display: none; }
  /* stacked hero buttons share one width instead of two ragged lengths */
  .lg-hub-hero .hero__ctas .btn, .lg-ct-hero .hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
  .lg-lib__cards { grid-template-columns: 1fr; }
  .lg-card { padding: 20px 18px 16px; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; }
  .lg-card__icon { width: 40px; height: 40px; }
  .lg-ans__table > div { flex-direction: column; gap: 2px; }
  .lg-brief .tabs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 18px; }
  .lg-brief .tab { padding: 0 10px; }
  .lg-brief__main { padding: 24px 20px; }
  .lg-brief__facts { padding: 22px 20px; }
  .lg-id { padding: 20px 18px; }
  .lg-id__rows > div { grid-template-columns: 1fr; gap: 2px; }
  .lg-id__mails li { grid-template-columns: minmax(0, 1fr) auto; }
  .lg-id__mails li span { grid-column: 1 / -1; }
}

/* ==========================================================================
   5. Forms on policy pages and contact (grievance, abuse, unsubscribe, contact)
   ========================================================================== */
.lg-phero--solo .lg-phero__grid { grid-template-columns: minmax(0, 1fr); }
.lg-phero--solo .lg-phero__main { max-width: 760px; }

.lg-formsec { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: var(--anchor-offset); }
.lg-formsec__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.lg-formsec__intro { position: sticky; top: calc(var(--anchor-offset) + 16px); }
.lg-formsec__intro h2 { margin: 16px 0 14px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.045em; line-height: 1.05; font-weight: 540; }
.lg-formsec__intro h2, .lg-hub .cta h2, .lg-company__title { text-wrap: balance; }
.lg-formsec__intro > p { color: var(--muted); font-size: 1.02rem; max-width: 440px; }

.lg-steps { display: grid; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.lg-steps li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.lg-steps b { font-family: var(--mono); font-size: 0.86rem; font-weight: 500; color: var(--accent); white-space: nowrap; }
.lg-steps span { color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }

.lg-formcard { position: relative; padding: 32px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lg-formcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lg-formcard__head h3 { font-size: 1.2rem; letter-spacing: -0.025em; font-weight: 580; }
.lg-formcard__head p { margin-top: 4px; color: var(--muted); font-size: 0.9rem; }
.lg-formcard .field textarea { min-height: 140px; }
.lg-req { color: var(--red); font-weight: 600; }
.lg-hint { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.field .lg-hint { margin-top: -1px; }
.lg-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin: 4px 0 18px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.lg-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.lg-consent a { color: var(--accent); font-weight: 520; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lg-formcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding-top: 4px; }
.lg-formcard__foot small { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.82rem; }
.lg-formcard__foot small svg { width: 14px; height: 14px; color: var(--green); }

@media (max-width: 980px) {
  .lg-formsec__grid { grid-template-columns: 1fr; gap: 36px; }
  .lg-formsec__intro { position: static; }
}
@media (max-width: 640px) {
  .lg-formcard { padding: 22px 18px; }
  .lg-formcard__head { flex-direction: column; gap: 8px; }
  .lg-steps li { grid-template-columns: 76px minmax(0, 1fr); }
  .lg-formcard__foot .btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   6. Contact page (contact.html) — prefix lg-ct- / lg-dir / lg-topic
   ========================================================================== */
.lg-ct-promise { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; margin-top: 30px; border-top: 1px solid var(--line); }
.lg-ct-promise li { display: grid; gap: 2px; align-content: start; padding: 16px 20px 0; border-left: 1px solid var(--line); }
.lg-ct-promise li:first-child { padding-left: 0; border-left: 0; }
.lg-ct-promise b { font-family: var(--mono); font-size: 0.98rem; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; }
.lg-ct-promise span { font-size: 0.8rem; color: var(--muted); }

/* hero mock: message routing */
.lg-ct-mock { position: relative; padding: 0 28px 30px 0; }
.lg-ct-mock .hero-browser { position: relative; z-index: 1; }
.lg-ct-mock__body { padding: 18px 20px 16px; }
.lg-ct-mock__head { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.lg-ct-mock__avatar { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.lg-ct-mock__avatar svg { width: 18px; height: 18px; }
.lg-ct-mock__head strong { display: block; font-size: 0.98rem; letter-spacing: -0.02em; }
.lg-ct-mock__head small { display: block; font-size: 0.78rem; color: var(--muted); }
.lg-ct-mock__head .lg-tag { gap: 7px; padding: 3px 10px; }
.lg-ct-mock__head .live-dot { width: 6px; height: 6px; }
.lg-ct-mock__routes { display: grid; gap: 6px; }
.lg-ct-mock__routes li { display: grid; grid-template-columns: minmax(0, 1fr) 82px 136px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); font-size: 0.86rem; color: var(--ink); }
.lg-ct-mock__routes li.is-on { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent); }
.lg-ct-mock__routes span { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 520; }
.lg-ct-mock__routes span svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.lg-ct-mock__routes code { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.lg-ct-mock__routes em { font-style: normal; font-family: var(--mono); font-size: 0.72rem; color: var(--green); text-align: right; white-space: nowrap; }
.lg-ct-mock__foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 0.8rem; color: var(--muted); }
.lg-ct-mock__foot svg { width: 15px; height: 15px; color: var(--accent); }
.lg-ct-mock__chip { position: absolute; z-index: 2; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 12px; padding: 11px 16px 11px 11px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-weight: 560; font-size: 0.9rem; color: var(--ink); animation: bob 7s ease-in-out infinite; }
.lg-ct-mock__chip > svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--inv-bg); color: var(--inv-ink); }
.lg-ct-mock__chip small { display: block; font-family: var(--mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* department directory */
.lg-dir { display: grid; margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lg-dir__row {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.45fr) minmax(0, 1.15fr) minmax(0, 0.8fr) 44px;
  grid-template-areas: "team what mail sla go"; gap: 28px; align-items: center; padding: 22px 8px; border-bottom: 1px solid var(--line);
  transition: background 0.25s;
}
.lg-dir__row:hover { background: color-mix(in srgb, var(--card) 70%, transparent); }
.lg-dir__team { grid-area: team; display: flex; align-items: center; gap: 14px; min-width: 0; }
.lg-dir__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--ink); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.lg-dir__row:hover .lg-dir__icon { background: var(--accent); border-color: var(--accent); color: #fff; }
.lg-dir__icon svg { width: 20px; height: 20px; }
.lg-dir__team strong { display: block; font-size: 1.06rem; letter-spacing: -0.02em; font-weight: 580; }
.lg-dir__team small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--muted); }
.lg-dir__what { grid-area: what; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.lg-dir__mail { grid-area: mail; display: flex; align-items: center; gap: 4px; min-width: 0; }
.lg-dir__mail a { font-family: var(--mono); font-size: 0.84rem; color: var(--ink); overflow-wrap: anywhere; }
.lg-dir__mail a:hover { color: var(--accent); }
.lg-dir__sla { grid-area: sla; display: grid; gap: 2px; }
.lg-dir__sla b { font-family: var(--mono); font-size: 0.88rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.lg-dir__sla small { font-size: 0.78rem; color: var(--faint); }
.lg-dir__go { grid-area: go; justify-self: end; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--ink); transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.3s var(--ease); }
.lg-dir__go svg { width: 17px; height: 17px; }
.lg-dir__row:hover .lg-dir__go, .lg-dir__go:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--bg); transform: translateX(3px); }
.lg-dir__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; color: var(--muted); font-size: 0.9rem; }
.lg-dir__note svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--accent); }
.lg-dir__note a { color: var(--accent); font-weight: 520; }

/* form: topic chips + side panels */
.lg-topics { margin: 0 0 20px; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--line); min-width: 0; }
.lg-topics legend { padding: 0; margin-bottom: 10px; font-size: 0.86rem; font-weight: 520; color: var(--ink-2); }
.lg-topics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lg-topic { position: relative; display: block; cursor: pointer; }
.lg-topic input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lg-topic span { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 0.92rem; font-weight: 520; color: var(--ink-2); transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s; }
.lg-topic span svg { width: 17px; height: 17px; flex: none; color: var(--muted); transition: color 0.2s; }
.lg-topic:hover span { border-color: var(--line-2); color: var(--ink); }
.lg-topic input:checked + span { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.lg-topic input:checked + span svg { color: var(--accent); }
.lg-topic input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.lg-opt { margin-left: 4px; font-family: var(--mono); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.04em; color: var(--faint); }
.lg-ct-plan[hidden] { display: none; }
.lg-ct-plan input[readonly] { background: var(--bg-2); font-family: var(--mono); font-size: 0.86rem; color: var(--ink); }
.lg-ct-count { margin-top: 2px; }
.lg-ct-form .btn--lg { padding-inline: 26px; }

.lg-ct-panels { margin-top: 30px; }
.lg-ct-panel { padding: 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); animation: lg-panel-in 0.35s var(--ease); }
.lg-ct-panel[hidden] { display: none; }
@keyframes lg-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lg-ct-panel__who { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.lg-ct-panel__who > span { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--inv-bg); color: var(--inv-ink); }
.lg-ct-panel__who svg { width: 19px; height: 19px; }
.lg-ct-panel__who strong { display: block; font-size: 1.02rem; letter-spacing: -0.02em; font-weight: 580; }
.lg-ct-panel__who small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); overflow-wrap: anywhere; }
.lg-ct-panel__who small span { display: block; }
.lg-ct-panel__who small span + span { margin-top: 1px; font-family: var(--font); font-size: 0.8rem; color: var(--faint); }
.lg-ct-panel__lead { margin: 16px 0 10px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.lg-ct-panel .check-list { gap: 9px; }
.lg-ct-panel .check-list li { font-size: 0.93rem; }
.lg-ct-panel .check-list a, .lg-ct-panel__note a { color: var(--accent); font-weight: 520; }
.lg-ct-panel__note { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.lg-ct-panel__note strong { color: var(--ink); }

/* "Contracts, POs and notices": role-address routing card beside "What happens after you press Send" */
.lg-ct-route .lg-id__mails { margin-top: 18px; }
.lg-ct-route .lg-id__mails li { grid-template-columns: 138px minmax(0, 1fr) auto; }
.lg-ct-route__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.lg-ct-route__note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.lg-ct-route__note a { color: var(--accent); font-weight: 520; }

/* the chrome help band ("Open a ticket", "Help center"…) repeats this page, so the contact page leaves it out */
main.lg-contact ~ .footer .helpband { display: none; }

/* faster answers */
.lg-ct-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lg-ct-q { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 20px 40px 20px 20px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); transition: border-color 0.25s, transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.lg-ct-q:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow); }
.lg-ct-q__icon { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink); transition: background 0.25s, color 0.25s; }
.lg-ct-q:hover .lg-ct-q__icon { background: var(--accent-soft); color: var(--accent); }
.lg-ct-q__icon svg { width: 19px; height: 19px; }
.lg-ct-q strong { display: block; font-size: 0.98rem; letter-spacing: -0.02em; font-weight: 580; }
.lg-ct-q small { display: block; margin-top: 4px; font-size: 0.85rem; line-height: 1.45; color: var(--muted); }
.lg-ct-q__go { position: absolute; top: 18px; right: 16px; width: 16px; height: 16px; color: var(--faint); transition: color 0.2s, transform 0.3s var(--ease); }
.lg-ct-q:hover .lg-ct-q__go { color: var(--accent); transform: translate(2px, -2px); }

@media (max-width: 1180px) {
  /* small laptops: the five directory columns don't fit (addresses broke mid-word), so each team gets two
     lines beside its name: what it handles, then address and reply target */
  .lg-dir__row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "team what what go" "team mail sla go"; gap: 12px 28px; }
  .lg-dir__mail a { overflow-wrap: normal; }
  .lg-ct-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .lg-ct-promise { grid-template-columns: 1fr 1fr; max-width: 420px; }
  .lg-ct-promise li { padding: 14px 12px 12px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .lg-ct-promise li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .lg-ct-promise li:nth-last-child(-n+2) { border-bottom: 0; }
  .lg-ct-mock { padding-bottom: 54px; }
  .lg-ct-mock__routes li { grid-template-columns: minmax(0, 1fr) auto; }
  .lg-ct-mock__routes code { display: none; }
}
@media (max-width: 980px) {
  .lg-ct-mock { max-width: 560px; }
  .lg-dir__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "team team go" "what what what" "mail sla sla"; gap: 14px 24px; padding: 22px 4px; }
}
@media (max-width: 640px) {
  .lg-ct-promise { max-width: none; }
  /* the routing mock repeats the directory below: phones go straight from the intro to the teams */
  .lg-ct-mock { display: none; }
  .lg-dir__row { grid-template-columns: minmax(0, 1fr) 42px; grid-template-areas: "team go" "what what" "mail mail" "sla sla"; gap: 10px 14px; }
  .lg-dir__sla { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .lg-topics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-ct-panel { padding: 20px 18px; }
  .lg-ct-quick { grid-template-columns: 1fr; }
  .lg-ct-route .lg-id__mails li { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ==========================================================================
   Print: policies print as clean documents (button[data-lg-print] or Ctrl+P)
   ========================================================================== */
@media print {
  @page { margin: 18mm 16mm; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .announce, .utilbar, .nav, .mobile-menu, .scroll-progress, .skip-link, .footer, .to-top, .toast-region,
  .lg-doc__side, .lg-actions, .lg-after, .lg-formsec, .lg-phero::before, .lg-short::after, [class*="palette"], [class*="launcher"] { display: none !important; }
  .reveal, .stagger > *, .split .w > span { opacity: 1 !important; transform: none !important; }
  .lg-phero { padding: 0 0 12pt; border: 0; }
  .lg-phero__grid { display: block; margin-top: 8pt; }
  .lg-phero h1 { font-size: 24pt; margin: 6pt 0; color: #000; }
  .lg-phero h1 em { color: #000; }
  .lg-meta li { border: 0; box-shadow: none; padding: 0 12pt 0 0; background: none; }
  .lg-short { margin-top: 12pt; background: #fff !important; color: #000 !important; border: 1px solid #999; box-shadow: none; }
  .lg-short *, .lg-short__list p { color: #000 !important; }
  .lg-doc { padding: 0; }
  .lg-doc__grid { display: block; }
  .lg-prose { max-width: none; font-size: 10.5pt; color: #000; }
  .lg-prose h2 { break-after: avoid; color: #000; }
  .lg-prose h2::before { background: none; color: #000; }
  .lg-prose a { color: #000 !important; }
  .lg-prose a[href]:not([href^="#"])::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; overflow-wrap: anywhere; }
  .lg-table { overflow: visible; border-color: #999; }
  .prose .lg-table table { min-width: 0; }
  .lg-table--stack thead { position: static; width: auto; height: auto; clip: auto; }
  .callout { border: 1px solid #999; background: none !important; }
  .ph { color: #000; text-decoration-color: #999; }
}

/* every policy page ends with its own contact strip, so the footer help band is not repeated */
body:has(main.lg-policy) .helpband { display: none; }

/* long timeline phrases wrap evenly instead of crushing the neighbouring column */
.lg-prose .lg-table td { text-wrap: pretty; }