/* ==========================================================================
   lg-c: SLA, domain registration agreement, grievance, report abuse, unsubscribe
   Built on lg-a's policy template (lg-phero, lg-doc, lg-prose, lg-after). Prefix: lg-c-
   ========================================================================== */

/* ---------- Shared additions to lg-a's form kit (lg-formsec / lg-formcard) ---------- */
.lg-c-opt { margin-left: 4px; font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lg-c-opt.is-req { color: var(--accent); }
.lg-formcard .field select:invalid { color: var(--faint); }
.lg-formcard .field select option { color: var(--ink); }
.lg-formcard__head .lg-tag { flex: none; }

/* ==========================================================================
   SLA: credit calculator
   ========================================================================== */
.lg-prose .lg-c-calc { margin-top: 1.8em; }
.lg-c-calc { border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; line-height: 1.5; }
.lg-c-calc__head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--bg); }
.lg-c-calc__icon { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.lg-c-calc__icon svg { width: 20px; height: 20px; }
.lg-c-calc__head strong { display: block; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink); }
.lg-c-calc__head small { display: block; font-size: 0.84rem; color: var(--muted); }
.lg-c-calc__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lg-c-calc__inputs { display: grid; gap: 20px; align-content: start; padding: 22px; }

.lg-c-field { display: grid; gap: 7px; }
.lg-c-field label { font-size: 0.86rem; font-weight: 540; color: var(--ink-2); }
.lg-c-field small { font-size: 0.8rem; color: var(--muted); }
.lg-c-field .lg-c-err { color: var(--red); font-weight: 520; }
.lg-c-field .lg-c-err:empty { display: none; }
.lg-c-input { display: flex; align-items: center; height: 50px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.lg-c-input:focus-within { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.lg-c-input:has([aria-invalid="true"]) { border-color: var(--red); }
.lg-c-input span { flex: none; padding: 0 4px 0 14px; font-family: var(--mono); font-size: 0.95rem; color: var(--muted); }
.lg-c-input--suffix span { padding: 0 14px 0 4px; }
.lg-c-input input { flex: 1; min-width: 0; height: 100%; padding: 0 14px 0 4px; border: 0; outline: 0; background: none; font-family: var(--mono); font-size: 1.02rem; color: var(--ink); }
.lg-c-input--suffix input { padding: 0 4px 0 14px; }
.lg-c-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-c-presets button { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-family: var(--mono); font-size: 0.76rem; color: var(--muted); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.lg-c-presets button:hover { border-color: var(--line-2); color: var(--ink); }
.lg-c-presets button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.lg-c-calc__out { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-left: 1px solid var(--line); background: linear-gradient(180deg, var(--accent-soft), transparent 70%); }
.lg-c-calc__label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.lg-c-calc__amt { display: block; font-size: clamp(2.3rem, 4vw, 3rem); font-weight: 540; letter-spacing: -0.05em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.lg-c-calc.is-invalid .lg-c-calc__amt { color: var(--faint); }
.prose .lg-c-calc__tier { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.prose .lg-c-calc__note { margin: auto 0 0; padding-top: 12px; font-size: 0.84rem; color: var(--muted); }
.prose .lg-c-calc__note:empty { display: none; }

.prose .lg-c-ladder, .lg-c-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.prose .lg-c-ladder li { margin: 0; }
.lg-c-ladder li { position: relative; display: grid; gap: 1px; padding: 10px 10px 8px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.3s var(--ease); }
.lg-c-ladder b { font-family: var(--mono); font-size: 0.92rem; font-weight: 560; color: var(--ink); }
.lg-c-ladder span { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); white-space: nowrap; }
.lg-c-ladder li.is-on { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.lg-c-ladder li.is-on b, .lg-c-ladder li.is-on span { color: #fff; }
[data-theme="dark"] .lg-c-ladder li.is-on b, [data-theme="dark"] .lg-c-ladder li.is-on span { color: var(--accent-ink); }

/* ==========================================================================
   Domain registration agreement: price table, expiry lifecycle
   ========================================================================== */
.prose .lg-table .lg-c-prices td { white-space: nowrap; }
/* prices line up on their last digit under right-aligned headings, in three equal columns */
.prose .lg-table .lg-c-prices th, .prose .lg-table .lg-c-prices td { vertical-align: middle; }
.prose .lg-table .lg-c-prices thead th:not(:first-child), .prose .lg-table .lg-c-prices td { text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 641px) {
  .prose .lg-table .lg-c-prices thead th:first-child { width: 31%; }
  .prose .lg-table .lg-c-prices thead th:not(:first-child) { width: 23%; }
  .prose .lg-table .lg-c-prices td:last-child, .prose .lg-table .lg-c-prices thead th:last-child { padding-right: 22px; }
}
/* recovery cost by stage: column titles with their extension lists as a quieter second line */
.prose .lg-table .lg-c-stages thead th small { display: block; margin-top: 3px; font-size: 0.68rem; letter-spacing: 0.02em; text-transform: none; color: var(--faint); }
@media (min-width: 641px) {
  .prose .lg-table .lg-c-stages thead th:first-child { width: 22%; }
  .prose .lg-table .lg-c-stages thead th:not(:first-child) { width: 39%; }
  .prose .lg-table .lg-c-stages tbody th[scope="row"] { white-space: nowrap; }
}
.lg-c-nowrap { white-space: nowrap; }
/* SLA worked examples: figures right-aligned on one line, the service name takes the remaining width */
@media (min-width: 641px) {
  .prose .lg-table .lg-c-ex th, .prose .lg-table .lg-c-ex td { vertical-align: baseline; }
  .prose .lg-table .lg-c-ex thead th:not(:first-child), .prose .lg-table .lg-c-ex td { width: 1%; white-space: nowrap; text-align: right; }
  .prose .lg-table .lg-c-ex thead th:last-child, .prose .lg-table .lg-c-ex td:last-child { padding-right: 20px; }
}
/* grievance timelines: first lines share a baseline (sans heading vs mono timeline), and a long timeline
   wraps in its own column instead of squeezing the complaint column to four lines */
.prose .lg-table .lg-c-tl tbody th, .prose .lg-table .lg-c-tl tbody td { vertical-align: baseline; }
@media (min-width: 641px) {
  .prose .lg-table .lg-c-tl thead th:last-child { width: 40%; }
  .prose .lg-table .lg-c-tl td .lg-table__dur { white-space: normal; }
  .prose .lg-table .lg-c-tl td { text-wrap: balance; }
}
/* long cells in these policy tables: no one-word last lines */
.lg-prose .lg-table td { text-wrap: pretty; }
.lg-c-life { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 1.6em 0 0; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); overflow: hidden; line-height: 1.4; }
.lg-c-life__step { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; align-content: start; padding: 16px 14px 16px 16px; border-right: 1px solid var(--line); }
.lg-c-life__step:last-child { border-right: 0; }
.lg-c-life__step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--line-2); }
.lg-c-life__step--exp::before { background: var(--ink); }
.lg-c-life__step--grace::before { background: var(--green); }
.lg-c-life__step--red::before { background: var(--amber); }
.lg-c-life__step--del::before { background: var(--red); }
.lg-c-life__step--free::before { background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 10px); }
.lg-c-life__when { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lg-c-life strong { font-size: 0.98rem; letter-spacing: -0.02em; color: var(--ink); }
.prose .lg-c-life p { margin: 0; font-size: 0.85rem; color: var(--muted); }
.lg-c-life__step--grace .lg-c-life__when { color: color-mix(in srgb, var(--green) 80%, var(--ink)); }
.lg-c-life__step--red .lg-c-life__when { color: color-mix(in srgb, var(--amber) 80%, var(--ink)); }
.lg-c-life__step--del .lg-c-life__when { color: color-mix(in srgb, var(--red) 82%, var(--ink)); }

/* ==========================================================================
   Grievance: officer card in the header (built on .lg-short)
   ========================================================================== */
.lg-c-officer__rows { position: relative; z-index: 1; display: grid; margin: 8px 0 0; }
.lg-c-officer__rows > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px dashed color-mix(in srgb, var(--inv-ink) 16%, transparent); }
.lg-c-officer__rows dt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--inv-muted); padding-top: 3px; }
.lg-c-officer__rows dd { margin: 0; font-size: 0.95rem; line-height: 1.5; color: color-mix(in srgb, var(--inv-ink) 90%, transparent); }
.lg-c-officer__rows dd a { color: var(--inv-ink); font-weight: 560; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* lg-a's quiet placeholder style (muted text, dashed underline), re-tinted for the inverted card */
.lg-c-officer .ph { color: var(--inv-muted); text-decoration-color: color-mix(in srgb, var(--inv-muted) 70%, transparent); }

/* ==========================================================================
   Report abuse: evidence tabs, targets
   ========================================================================== */
.lg-c-types__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: end; margin-bottom: 36px; }
.lg-c-types__head h2 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
.lg-c-types__head .eyebrow + h2 { margin-top: 18px; }
.lg-c-types__head > p { color: var(--muted); font-size: 1.05rem; max-width: 460px; margin-bottom: 6px; }
.lg-c-types__box .tabs__list { margin-bottom: 18px; }

.lg-c-type:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; min-height: 484px; }
.lg-c-type__main { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 30px 32px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.lg-c-type__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 6px; }
.lg-c-type__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink); }
.lg-c-type__icon svg { width: 22px; height: 22px; }
.lg-c-type__icon--hot { background: var(--accent-soft); color: var(--accent); }
.lg-c-type h3 { font-size: 1.45rem; letter-spacing: -0.035em; font-weight: 560; }
.lg-c-type__main > p { color: var(--muted); font-size: 0.98rem; }
.lg-c-type .check-list { margin: 8px 0 14px; }
.lg-c-type .check-list a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lg-c-type__main .btn { margin-top: auto; }

/* dark evidence window (a "space" surface, so fixed colours are intentional) */
.lg-c-win { display: flex; flex-direction: column; margin: 0; min-width: 0; border-radius: var(--radius-lg); background: var(--space); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-lg); overflow: hidden; }
.lg-c-win__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.lg-c-win__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.lg-c-win__bar span { margin-left: 8px; font-family: var(--mono); font-size: 0.74rem; color: rgba(255, 255, 255, 0.5); }
.lg-c-win__body { flex: 1; margin: 0; padding: 20px 20px 22px; overflow-x: auto; font-family: var(--mono); font-size: 0.8rem; line-height: 1.75; color: rgba(255, 255, 255, 0.72); white-space: pre; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.lg-c-win__body code { font: inherit; color: inherit; background: none; padding: 0; }
.lg-c-win__body b { font-weight: 500; color: #9fb0ff; }
.lg-c-win__body mark { padding: 1px 4px; border-radius: 4px; background: rgba(123, 140, 255, 0.2); color: #fff; }
.lg-c-win figcaption { padding: 12px 20px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }
.lg-c-win figcaption em { font-style: normal; font-family: var(--mono); font-size: 0.92em; color: rgba(255, 255, 255, 0.82); }

/* the report form intro has no eyebrow: start the heading flush with the form card */
.lg-c-report .lg-formsec__intro > h2:first-child { margin-top: 0; }

/* response targets beside the form */
.lg-c-targets { display: grid; margin: 30px 0 0; border-top: 1px solid var(--line-2); }
.lg-c-targets > div { display: grid; gap: 3px; padding: 15px 0; border-bottom: 1px solid var(--line-2); }
.lg-c-targets dt { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--muted); }
.lg-c-targets dt svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.lg-c-targets dd { margin: 0 0 0 26px; font-weight: 580; letter-spacing: -0.015em; color: var(--ink); }
.lg-c-targets dd a { color: var(--accent); }
.lg-c-targets dd a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* copyright-only part of the abuse form */
.lg-c-copy { margin: 0 0 18px; padding: 18px 18px 2px; min-width: 0; border-radius: var(--radius); border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.lg-c-copy[hidden] { display: none; }
.lg-c-copy legend { padding: 0 8px; margin-left: -8px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.lg-c-copy .field input { background: var(--card); }
.lg-c-copy .lg-consent { margin-bottom: 16px; }

/* ==========================================================================
   Unsubscribe
   ========================================================================== */
/* two columns: the intro and the "what happens next" steps share the left column, the form sits on the right */
.lg-c-unsub .lg-phero__grid { align-items: start; }
.lg-c-unsub__intro { min-width: 0; padding-top: 24px; }
/* the form runs ~300px taller than the intro. On laptop-height screens the intro stays beside the form while it
   scrolls (as lg-formsec does); on tall screens, where the whole form is in view, it is centred against the form
   like the other policy heroes */
@media (min-width: 981px) and (min-height: 720px) and (max-height: 999px) {
  .lg-c-unsub__intro { position: sticky; top: calc(var(--anchor-offset) + 8px); }
}
@media (min-width: 981px) and (min-height: 1000px) {
  .lg-c-unsub__intro { align-self: center; padding-top: 0; }
}
.lg-c-unsub__form { max-width: 520px; width: 100%; justify-self: end; }
.lg-c-unsub .lg-c-unsub__steps { max-width: 480px; margin-top: 40px; margin-bottom: 0; }
.lg-c-unsub__note { margin-top: 16px; }
.lg-c-unsub__note a { color: var(--accent); }
.lg-c-unsub .lg-formcard__foot .btn { flex: 1 1 100%; justify-content: center; }
.lg-c-lists { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.lg-c-lists legend { padding: 0; margin-bottom: 9px; font-size: 0.86rem; font-weight: 520; color: var(--ink-2); }
.lg-c-lists label { position: relative; display: block; cursor: pointer; }
.lg-c-lists input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lg-c-lists label > span { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.lg-c-lists label > span::before { content: ""; grid-row: span 2; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--card); transition: border-color 0.2s, box-shadow 0.2s; }
.lg-c-lists strong { font-size: 0.95rem; font-weight: 560; color: var(--ink); }
.lg-c-lists small { font-size: 0.82rem; line-height: 1.4; color: var(--muted); }
.lg-c-lists label:hover > span { border-color: var(--line-2); }
.lg-c-lists input:checked + span { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.lg-c-lists input:checked + span::before { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 10px var(--accent); }
.lg-c-lists input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.lg-c-stops { border-top: 1px solid var(--line); }
.lg-c-stops__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lg-c-stops__col { padding: 28px 30px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
/* the keep column is a large inverted panel: stay dark (elevated, with an accent edge) in dark mode instead of flipping to white */
.lg-c-stops__col--keep { --inv-bg: var(--panel-inv); --inv-ink: var(--panel-inv-ink); --inv-muted: var(--panel-inv-muted); background: var(--inv-bg); border-color: transparent; box-shadow: var(--shadow); }
[data-theme="dark"] .lg-c-stops__col--keep { border-color: var(--panel-inv-line); box-shadow: 0 0 0 1px var(--panel-inv-line), 0 30px 70px -30px rgba(80, 100, 255, 0.35); }
.lg-c-stops__head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.lg-c-stops__icon { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink); }
.lg-c-stops__icon svg { width: 20px; height: 20px; }
.lg-c-stops__head strong { display: block; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink); }
.lg-c-stops__head small { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lg-c-stops .check-list a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lg-c-stops .check-list li.is-off { color: var(--ink-2); }
.lg-c-stops .check-list li.is-off svg { color: var(--red); }
.lg-c-stops__col--keep .lg-c-stops__head { border-color: color-mix(in srgb, var(--inv-ink) 16%, transparent); }
.lg-c-stops__col--keep .lg-c-stops__icon { background: color-mix(in srgb, var(--inv-ink) 10%, transparent); color: var(--inv-ink); }
.lg-c-stops__col--keep .lg-c-stops__head strong { color: var(--inv-ink); }
.lg-c-stops__col--keep .lg-c-stops__head small { color: var(--inv-muted); }
.lg-c-stops__col--keep .check-list li { color: color-mix(in srgb, var(--inv-ink) 82%, transparent); }
.lg-c-stops__col--keep .check-list strong { color: var(--inv-ink); }
/* the keep column is an inverted surface: mix the green towards its ink so the ticks stay visible in both themes */
.lg-c-stops__col--keep .check-list svg { color: color-mix(in srgb, var(--green) 60%, var(--inv-ink)); }

.lg-c-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* each card spans three shared rows (number, title, text): a title that wraps pushes its whole row down, so the texts start on one line */
.lg-c-way { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px; align-content: start; padding: 26px 24px 28px 0; }
.lg-c-way + .lg-c-way { padding-left: 24px; border-left: 1px solid var(--line); }
.lg-c-way__n { font-family: var(--mono); font-size: 0.74rem; color: var(--accent); }
.lg-c-way strong { font-size: 1.04rem; letter-spacing: -0.02em; color: var(--ink); }
.lg-c-way p { font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.lg-c-way a { color: var(--accent); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  /* the evidence window sits in a narrower column here: wrap long header lines instead of scrolling sideways */
  .lg-c-win__body { white-space: pre-wrap; overflow-wrap: anywhere; }
}
@media (max-width: 1100px) {
  .lg-c-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-c-way:nth-child(3) { padding-left: 0; border-left: 0; }
  .lg-c-way:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (min-width: 981px) and (max-width: 1100px) {
  /* the unsubscribe form needs ~460px for its header line: split the hero evenly */
  .lg-c-unsub .lg-phero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 980px) {
  .lg-c-types__head { grid-template-columns: 1fr; gap: 14px; }
  .lg-c-type:not([hidden]) { grid-template-columns: 1fr; min-height: 0; }
  .lg-c-life__step { padding: 14px 10px 14px 12px; }
  /* one column: intro, then the form, then the steps (the intro wrapper steps aside so the steps can follow the form) */
  .lg-c-unsub__intro { display: contents; }
  .lg-c-unsub__form { justify-self: stretch; max-width: none; }
  .lg-c-unsub .lg-c-unsub__steps { order: 1; margin-top: 0; max-width: none; }
}
@media (max-width: 640px) {
  /* stacked tables on lg-c pages: long timelines wrap instead of running off the card */
  .prose .lg-table--stack .lg-c-tl td[data-label] .lg-table__dur { white-space: normal; }
  /* four short price columns fit a phone once the cells are tighter */
  .prose .lg-table .lg-c-prices th, .prose .lg-table .lg-c-prices td { padding: 10px; }
  .prose .lg-table .lg-c-prices tbody th[scope="row"] { min-width: 0; }
  .prose .lg-table .lg-c-prices thead th { letter-spacing: 0.04em; }
  .lg-c-calc__body { grid-template-columns: 1fr; }
  .lg-c-calc__out { border-left: 0; border-top: 1px solid var(--line); padding: 20px 18px; }
  .lg-c-calc__inputs { padding: 20px 18px; }
  .lg-c-calc__head { padding: 16px 18px; }
  .lg-c-ladder span { font-size: 0.6rem; }
  .lg-c-life { grid-template-columns: 1fr; }
  .lg-c-life__step { grid-row: auto; grid-template-rows: none; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; padding: 14px 14px 14px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .lg-c-life__step:last-child { border-bottom: 0; }
  .lg-c-life__step::before { right: auto; bottom: 0; width: 4px; height: auto; }
  .lg-c-life__when { grid-row: span 2; padding-top: 3px; }
  .lg-c-officer__rows > div { grid-template-columns: 1fr; gap: 2px; }
  /* six report types: an even 2 x 3 grid of tabs instead of three ragged centred rows */
  .lg-c-types__box .tabs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 20px; }
  .lg-c-types__box .tab { padding: 0 10px; }
  .lg-c-type__main { padding: 22px 20px; }
  .lg-c-type h3 { font-size: 1.25rem; }
  .lg-c-win__body { padding: 16px; font-size: 0.74rem; white-space: pre-wrap; overflow-wrap: anywhere; }
  .lg-c-win figcaption { padding: 12px 16px; }
  .lg-c-stops__grid { grid-template-columns: 1fr; }
  .lg-c-stops__col { padding: 22px 20px; }
  .lg-c-ways { grid-template-columns: 1fr; }
  .lg-c-way, .lg-c-way + .lg-c-way { padding: 22px 0; border-left: 0; }
  .lg-c-way + .lg-c-way { border-top: 1px solid var(--line); }
}

/* Print: the calculator and forms aren't useful on paper */
@media print {
  .lg-c-calc, .lg-c-types .btn { display: none !important; }
  .lg-c-win { background: #fff !important; border: 1px solid #999; box-shadow: none; }
  .lg-c-win__body, .lg-c-win__body b, .lg-c-win__body mark, .lg-c-win figcaption, .lg-c-win__bar span { color: #000 !important; background: none !important; }
  .lg-c-officer .ph { color: #000; }
}

/* unsubscribe form card title: an h2 for document order, styled like the other form-card titles */
.lg-unsub__h { margin: 0; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 580; }