@layer layout, typography, components, responsive;

/* Layout, type, controls and responsive states for the dispute page.
   Shared dossier assets supply the established fonts and persisted theme. */
@layer layout {
  :root {
    --d-bg: #0e131b;
    --d-surface: #141c26;
    --d-raised: #1c2632;
    --d-input: #101720;
    --d-ink: #eeeae6;
    --d-muted: #bac2cf;
    --d-dim: #a0adbd;
    --d-line: #303b4a;
    --d-control: #59697b;
    --d-red: #efacb8;
    --d-on-red: #16090b;
    --d-cyan: #8bc3cf;
    --d-green: #8dc0ab;
    --d-amber: #d9b886;
    --d-rule: color-mix(in srgb, var(--d-line) 65%, transparent);
    --d-accent-wash: color-mix(in srgb, var(--d-red) 6%, var(--d-surface));
    --d-shadow: 0 12px 36px rgb(2 5 10 / .14);
    --d-radius: 10px;
    --d-form-padding: clamp(1rem, 2.5vw, 2rem);
    --d-ease: cubic-bezier(.22, 1, .36, 1);
    --d-font: Inter, system-ui, sans-serif;
    --d-editorial: 'Libre Baskerville', Georgia, serif;
    --d-mono: 'JetBrains Mono', Consolas, monospace;
    --d-max: 1400px;
    --d-gutter: clamp(1rem, 4vw, 3rem);
    --d-gap: clamp(1rem, 2vw, 2rem);
    --d-section: clamp(3.25rem, 6vw, 5.75rem);
    --d-header: 4.75rem;
    --pd-ui-font: var(--d-font);
    --pd-ui-secondary: var(--d-muted);
    --pd-ui-text: var(--d-ink);
    --pd-ui-line: var(--d-line);
    --pd-ui-surface: var(--d-surface);
    --pd-ui-info: var(--d-cyan);
  }
  html[data-ed-theme='light'] {
    --d-bg: #f6f3ed;
    --d-surface: #fffdf9;
    --d-raised: #ebe7df;
    --d-input: #fffdf9;
    --d-ink: #1c252e;
    --d-muted: #4d5b68;
    --d-dim: #596778;
    --d-line: #c7cbd0;
    --d-control: #81909c;
    --d-red: #a33048;
    --d-on-red: #fffdf9;
    --d-cyan: #245875;
    --d-green: #14664f;
    --d-amber: #805216;
    --d-shadow: 0 12px 36px rgb(35 32 27 / .045);
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-padding-top: calc(var(--d-header) + 1rem); }
  body.dsp-editorial { margin: 0; background: var(--d-bg); color: var(--d-ink); font-family: var(--d-font); -webkit-font-smoothing: antialiased; transition: background-color .24s ease, color .24s ease; }
  .dsp-editorial [hidden] { display: none !important; }
  .dsp { max-width: var(--d-max); margin-inline: auto; padding-inline: var(--d-gutter); padding-bottom: 2rem; }
  .dsp [id], .dsp-progress { scroll-margin-top: .5rem; }
  .dsp-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--d-bg) 96%, transparent); border-bottom: 1px solid var(--d-rule); backdrop-filter: blur(16px); }
  .dsp-header-inner { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); max-width: var(--d-max); min-height: 4.75rem; padding: .75rem var(--d-gutter); margin-inline: auto; }
  .dsp-header-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
  .dsp-nav-short { display: none; }
  .dsp-brand { display: inline-flex; align-items: center; gap: .75rem; justify-self: start; min-width: 0; }
  .dsp-brand > span { min-width: 0; overflow-wrap: anywhere; }
  .dsp-brand img { flex: none; }
  .dossier-header-actions { display: flex; justify-content: end; }
  .dsp-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(2.75rem, 5vw, 4.25rem); }
  .dsp-hero-copy { min-width: 0; }
  .dsp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; margin-top: 1.75rem; }
  .dsp-commitment { position: relative; padding: 1.5rem 1.75rem; background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: 2px var(--d-radius) var(--d-radius); box-shadow: var(--d-shadow); }
  .dsp-commitment::before { content: ''; position: absolute; inset: -1px auto auto -1px; height: 3px; width: 3rem; background: var(--d-red); }
  .dsp-commitment ol { margin: 0; padding: 0; list-style: none; }
  .dsp-commitment li { display: grid; grid-template-columns: 1.65rem minmax(0, 1fr); gap: .7rem; padding-block: 1rem; border-bottom: 1px solid var(--d-rule); }
  .dsp-commitment-details > a { display: inline-flex; gap: .75rem; align-items: center; min-height: 44px; margin-top: .5rem; }
  .dsp-request { border-top: 1px solid var(--d-rule); padding-top: 2rem; }
  .dsp-section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
  .dsp-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 280px); gap: var(--d-gap); align-items: start; }
  .dsp-form { background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius); padding: var(--d-form-padding); min-width: 0; box-shadow: var(--d-shadow); }
  .dsp-preview { position: sticky; top: calc(var(--d-header) + 1.5rem); min-width: 0; padding: .25rem 0 0 1.5rem; border-left: 1px solid var(--d-rule); }
  .dsp-progress { position: sticky; top: var(--d-header); z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding: 1rem var(--d-form-padding) .8rem; margin: calc(-1 * var(--d-form-padding)) calc(-1 * var(--d-form-padding)) 1.75rem; list-style: none; background: var(--d-surface); border-bottom: 1px solid var(--d-rule); border-radius: var(--d-radius) var(--d-radius) 0 0; }
  .dsp-form-step { min-width: 0; outline: none; }
  .dsp-fs { min-width: 0; padding: 1.4rem 0 1.75rem; margin: 0; border: 0; border-bottom: 1px solid var(--d-rule); }
  .dsp-fs:first-child { padding-top: 1rem; }
  .dsp-fs > :last-child { margin-bottom: 0; }
  .dsp-field { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.25rem; min-width: 0; }
  .dsp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.1rem; }
  .dsp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .875rem; margin-block: .5rem 1rem; }
  .dsp-remedies { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .dsp-step-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; }
  .dsp-step-actions > .dsp-hint { max-width: 27ch; }
  .dsp-step-actions .is-primary { margin-inline-start: auto; }
  .dsp-inline { display: flex; flex-wrap: wrap; gap: 1rem; }
  .dsp-sub { margin: .5rem 0 1rem 1.75rem; display: grid; gap: .5rem; }
  .dsp-band { padding-block: var(--d-section); border-bottom: 1px solid var(--d-rule); }
  .dsp-position { position: relative; display: grid; grid-template-columns: minmax(130px, .3fr) minmax(0, 1fr); gap: var(--d-gap); margin-top: var(--d-section); padding: clamp(1.5rem, 4vw, 3.5rem); background: var(--d-accent-wash); border: 1px solid var(--d-rule); border-radius: var(--d-radius); }
  .dsp-position::before { content: ''; position: absolute; inset: 2rem auto 2rem 0; width: 3px; background: var(--d-red); transform-origin: top; }
  .dsp-position > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; max-width: 60rem; }
  .dsp-position h2 { grid-column: 1 / -1; }
  .dsp-process-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem 1.75rem; list-style: none; padding: 0; margin: 2.5rem 0 0; }
  .dsp-process-list > li { position: relative; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto 1fr; gap: 1rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--d-rule); }
  .dsp-process-list > li::before { content: ''; position: absolute; inset: -1px auto auto 0; height: 2px; width: 2rem; background: var(--d-red); transform-origin: left; }
  .dsp-targets { display: grid; grid-template-columns: 1fr 1fr 1.2fr; align-items: center; gap: 2rem; padding: 1.5rem 0; margin-top: 2rem; border-block: 1px solid var(--d-rule); }
  .dsp-targets > p + p { padding-left: 2rem; border-left: 1px solid var(--d-rule); }
  .dsp-tracking { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: start; background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius); padding: clamp(1.5rem, 3.5vw, 3rem); margin-top: var(--d-section); }
  .dsp-tracking-intro { grid-row: span 3; }
  .dsp-tracking > :not(.dsp-tracking-intro) { grid-column: 2; }
  .dsp-rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; align-items: start; }
  .dsp-record-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-block: 1.5rem; border-bottom: 1px solid var(--d-rule); }
  .dsp-policy { padding-block: 2rem; }
  .dsp-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.5rem; border-top: 1px solid var(--d-rule); }
  .dsp-footer nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
}

@layer typography {
  .dsp { font-size: clamp(.95rem, 1.5vw, 1.0625rem); line-height: 1.7; overflow-wrap: anywhere; }
  .dsp :is(h1,h2,h3,p) { margin-top: 0; }
  .dsp :is(h1,h2,h3) { font-family: var(--d-font); color: var(--d-ink); text-wrap: balance; }
  .dsp h1 { font-family: var(--d-editorial); font-size: clamp(1.8rem, 4.3vw, 3.5rem); line-height: 1.16; letter-spacing: -.055em; font-weight: 400; margin-bottom: 1.5rem; }
  .dsp h1 span { color: var(--d-red); font-style: italic; }
  .dsp h2 { font-size: clamp(1.4rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -.035em; font-weight: 600; margin-bottom: 1rem; }
  .dsp h3 { font-size: clamp(1.1rem, 2vw, 1.8rem); line-height: 1.35; letter-spacing: -.02em; font-weight: 600; margin-bottom: .75rem; }
  .dsp p { color: var(--d-muted); text-wrap: pretty; margin-bottom: 1rem; }
  .dsp :is(p,li) strong { color: var(--d-ink); font-weight: 600; }
  .dsp .dsp-eyebrow, .dsp .dsp-kicker { font-family: var(--d-mono); font-size: .68rem; line-height: 1.5; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
  .dsp .dsp-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; color: var(--d-dim); margin-bottom: 1.5rem; letter-spacing: .04em; }
  .dsp-eyebrow > span[aria-hidden] { color: var(--d-red); }
  .dsp .dsp-eyebrow a { color: var(--d-dim); text-decoration: none; }
  .dsp .dsp-eyebrow a:hover { color: var(--d-ink); }
  .dsp .dsp-current-page { color: var(--d-muted); }
  .dsp .dsp-kicker { color: var(--d-red); margin-bottom: .65rem; }
  .dsp .dsp-lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65; max-width: 52ch; margin-bottom: 1rem; }
  .dsp .dsp-hero-note { font-size: .9rem; line-height: 1.65; max-width: 59ch; color: var(--d-dim); }
  .dsp-index { font: 500 .8rem/1.5 var(--d-mono); color: var(--d-red); }
  .dsp-commitment h2 { font-size: .95rem; letter-spacing: -.015em; line-height: 1.45; margin-bottom: .35rem; }
  .dsp-commitment p { font-size: .83rem; line-height: 1.65; margin-bottom: 0; }
  .dsp-commitment-details > a { font-size: .8rem; }
  .dsp-section-heading h2 { margin-bottom: 0; }
  .dsp-section-heading > p { font-size: .9rem; line-height: 1.6; margin-bottom: 0; color: var(--d-dim); }
  .dsp-brand { font-size: 1rem; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; text-decoration: none; color: var(--d-ink); }
  .dsp-brand small { display: block; font-size: .64rem; line-height: 1.5; font-weight: 400; color: var(--d-dim); letter-spacing: .02em; margin-top: .2rem; }
  .dsp-header-links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--d-muted); font: 500 .8rem/1.4 var(--d-font); text-decoration: none; transition: color .2s ease; }
  .dsp-header-links a::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--d-red); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--d-ease); }
  .dsp-header-links a[aria-current='location'], .dsp-header-links a:hover { color: var(--d-ink); }
  .dsp-header-links a[aria-current='location']::after { transform: scaleX(1); }
  .dsp-position h2 { font-family: var(--d-editorial); font-size: clamp(1.5rem, 2.8vw, 2.5rem); font-weight: 400; line-height: 1.35; letter-spacing: -.045em; max-width: 40ch; margin-bottom: 1.5rem; }
  .dsp-position h2 span { color: var(--d-red); }
  .dsp-position p { max-width: 65ch; font-size: .94rem; line-height: 1.75; margin-bottom: 0; }
  .dsp-process-list h3 { font-size: 1.075rem; line-height: 1.45; margin: 0; max-width: 22ch; }
  .dsp-process-list p { font-size: .9rem; line-height: 1.75; margin-bottom: .9rem; max-width: 65ch; }
  .dsp-process-list small { display: block; font-size: .815rem; line-height: 1.7; color: var(--d-dim); max-width: 65ch; }
  .dsp-targets p { margin: 0; }
  .dsp-targets strong { display: block; font-size: 1.35rem; font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -.035em; margin-bottom: .35rem; }
  .dsp-targets span { display: block; font-size: .83rem; line-height: 1.5; color: var(--d-dim); max-width: 27ch; }
  .dsp-targets .dsp-target-note { font-size: .83rem; line-height: 1.6; color: var(--d-dim); }
  .dsp .dsp-hint, .dsp .dsp-note { font-size: .83rem; color: var(--d-dim); line-height: 1.65; margin: 0; text-wrap: pretty; }
  .dsp .dsp-form-intro { margin-bottom: 1.25rem; }
  .dsp .dsp-step-status { font: 400 .68rem/1.5 var(--d-mono); color: var(--d-dim); margin-bottom: 1rem; }
  .dsp .dsp-opt { font: 400 .68rem/1.5 var(--d-font); color: var(--d-dim); margin-inline-start: .25rem; }
  .dsp .dsp-label { display: block; color: var(--d-ink); font-size: .88rem; font-weight: 500; }
  .dsp code, .dsp-mono { font-family: var(--d-mono); font-size: .8em; overflow-wrap: anywhere; }
  .dsp .dsp-dim { color: var(--d-dim); font-size: .8rem; }
  .dsp .dsp-policy-h { font: 500 .8rem/1.5 var(--d-mono); letter-spacing: .03em; }
  .dsp-policy > p, .dsp-record-bar { font-size: .83rem; }
  .dsp-footer { font-size: .8rem; }
  .dsp-footer-brand { font-weight: 600; color: var(--d-ink); }
  .dsp-footer-brand span { font-weight: 400; color: var(--d-dim); }
}

@layer components {
  .dsp a { color: var(--d-ink); text-underline-offset: .25em; text-decoration-thickness: 1px; text-decoration-color: var(--d-control); transition: color .2s ease, text-decoration-color .2s ease; }
  .dsp a:hover { color: var(--d-red); text-decoration-color: currentColor; }
  .dsp-editorial :focus-visible { outline: 2px solid var(--d-cyan); outline-offset: 4px; }
  .dsp-skip { position: fixed; z-index: 30; left: 1rem; top: 1rem; padding: .75rem 1rem; background: var(--d-red); color: var(--d-on-red); transform: translateY(-200%); }
  .dsp-skip:focus { transform: translateY(0); }
  .dsp a.dsp-btn, .dsp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 48px; padding: .8rem 1.2rem; border: 1px solid var(--d-control); border-radius: 6px; background: var(--d-input); color: var(--d-ink); font: 550 .875rem/1.45 var(--d-font); text-align: center; text-decoration: none; cursor: pointer; transition: transform .2s var(--d-ease), background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
  .dsp a.dsp-btn:hover, .dsp-btn:hover { color: var(--d-ink); border-color: var(--d-ink); transform: translateY(-1px); }
  .dsp a.dsp-btn.is-primary, .dsp-btn.is-primary { color: var(--d-bg); background: var(--d-ink); border-color: var(--d-ink); }
  .dsp a.dsp-btn.is-primary:hover, .dsp-btn.is-primary:hover { color: var(--d-bg); background: color-mix(in srgb, var(--d-ink) 90%, var(--d-bg)); border-color: transparent; box-shadow: var(--d-shadow); }
  .dsp-btn > span[aria-hidden] { display: inline-block; transition: transform .25s var(--d-ease); }
  .dsp-btn:hover > span[aria-hidden] { transform: translateX(3px); }
  .dsp a.dsp-btn.is-text, .dsp-btn.is-text { padding-inline: .2rem; border-color: transparent; background: transparent; color: var(--d-ink); box-shadow: none; }
  .dsp a.dsp-btn.is-text:hover, .dsp-btn.is-text:hover { color: var(--d-red); }
  .dsp a.dsp-btn:active, .dsp-btn:active { transform: translateY(1px); }
  .dsp-btn:disabled, .dsp-btn:disabled:hover { cursor: not-allowed; opacity: .45; transform: none; box-shadow: none; }
  .dsp-btn.is-small { font-size: .8rem; min-height: 44px; }
  .dsp-form-step:focus-visible { outline: none; }
  .dsp h2[tabindex='-1']:focus-visible { outline: none; }
  .dsp-form :is(input[id],select[id],textarea[id],fieldset[id]) { scroll-margin-top: 6rem; }
  .dsp-progress button { position: relative; display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 48px; padding: .3rem .2rem; border: 0; background: none; color: var(--d-dim); font: 500 .78rem/1.4 var(--d-font); text-align: start; cursor: pointer; transition: color .2s ease; }
  .dsp-progress button::after { content: ''; position: absolute; inset: auto 0 -.8rem; height: 2px; background: var(--d-red); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--d-ease); }
  .dsp-progress button span { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border: 1px solid var(--d-line); border-radius: 50%; font-family: var(--d-mono); font-size: .65rem; transition: background-color .2s, border-color .2s; }
  .dsp-progress button[aria-current='step'] { color: var(--d-ink); }
  .dsp-progress button[aria-current='step']::after { transform: scaleX(1); }
  .dsp-progress button[aria-current='step'] span { color: var(--d-red); border-color: var(--d-red); background: var(--d-accent-wash); }
  .dsp-progress button[data-complete='true'] { color: var(--d-muted); }
  .dsp-progress button[data-complete='true'] span { position: relative; color: transparent; border-color: var(--d-green); }
  .dsp-progress button[data-complete='true'] span::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--d-green); font-size: .85rem; }
  .dsp-progress button:hover { color: var(--d-ink); }
  .dsp-fs legend { padding: 0; margin-bottom: .5rem; color: var(--d-ink); font-size: 1.025rem; font-weight: 600; letter-spacing: -.02em; }
  .dsp-field label, .dsp-sub > label { color: var(--d-ink); font-size: .875rem; font-weight: 500; }
  .dsp :is(input[type='text'],input[type='email'],input[type='password'],input[type='url'],input[type='date'],input[type='datetime-local'],select,textarea) { width: 100%; max-width: 100%; min-width: 0; min-height: 50px; padding: .75rem .9rem; border: 1px solid var(--d-control); border-radius: 6px; background: var(--d-input); color: var(--d-ink); font: 400 1rem/1.5 var(--d-font); transition: border-color .2s, box-shadow .2s, background-color .2s; }
  .dsp textarea { resize: vertical; min-height: 100px; }
  .dsp input::placeholder, .dsp textarea::placeholder { color: var(--d-dim); opacity: 1; }
  .dsp :is(input,select,textarea):focus-visible { outline: 2px solid var(--d-cyan); outline-offset: 2px; border-color: var(--d-cyan); }
  .dsp input[type='checkbox'], .dsp input[type='radio'] { accent-color: var(--d-red); }
  .dsp :is(input[type='date'],input[type='datetime-local']) { color-scheme: inherit; }
  .dsp [aria-invalid='true'] { border-color: var(--d-red); }
  .dsp-card { display: block; position: relative; cursor: pointer; min-width: 0; }
  .dsp-card > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .dsp-card-body { position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.1rem 2.5rem 1.1rem 1.15rem; border: 1px solid var(--d-line); border-radius: 6px; background: var(--d-input); pointer-events: none; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
  .dsp-card-body::after { content: ''; position: absolute; inset-inline-end: 1rem; top: 1.25rem; width: 14px; height: 14px; border: 1px solid var(--d-control); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--d-input); }
  .dsp-card input:checked + .dsp-card-body { border-color: var(--d-red); background: var(--d-accent-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d-red) 20%, transparent); }
  .dsp-card input:checked + .dsp-card-body::after { background: var(--d-red); border-color: var(--d-red); }
  .dsp-card input:focus-visible + .dsp-card-body { outline: 2px solid var(--d-cyan); outline-offset: 3px; }
  .dsp-card:hover .dsp-card-body { border-color: var(--d-control); }
  .dsp-card:hover input:checked + .dsp-card-body { border-color: var(--d-red); }
  .dsp-card input:disabled + .dsp-card-body { opacity: .4; }
  .dsp-card b { font-size: .93rem; font-weight: 600; line-height: 1.45; color: var(--d-ink); }
  .dsp-card-text { font-size: .82rem; color: var(--d-dim); line-height: 1.55; }
  .dsp-route-icon { color: var(--d-muted); margin-bottom: .35rem; }
  .dsp-card input:checked + .dsp-card-body .dsp-route-icon { color: var(--d-red); }
  .dsp-route-cards .dsp-card-body { padding-block: 1.25rem; }
  .dsp-route-cards .dsp-card b { font-size: 1rem; letter-spacing: -.02em; }
  .dsp-remedies .dsp-card-body { display: grid; grid-template-columns: minmax(155px, .7fr) minmax(0, 1fr); align-items: center; column-gap: 1.25rem; padding: .9rem 1rem .9rem 2.75rem; }
  .dsp-remedies .dsp-card-body::after { inset: 50% auto auto 1rem; transform: translateY(-50%); }
  .dsp-remedies .dsp-card b { font-size: .875rem; }
  .dsp-remedies .dsp-card-text { font-size: .8rem; }
  .dsp-check { display: flex; align-items: start; gap: .7rem; margin: .9rem 0; font-size: .875rem; line-height: 1.6; color: var(--d-muted); cursor: pointer; }
  .dsp-check input { flex: none; width: 1.05rem; height: 1.05rem; margin: .25rem 0 0; }
  .dsp-inline label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
  .dsp input[type='file'] { width: 100%; min-width: 0; color: var(--d-muted); font: 400 .875rem/1.5 var(--d-font); padding: .5rem 0; }
  .dsp input[type='file']::file-selector-button { min-height: 44px; margin-inline-end: .8rem; padding: .6rem 1rem; border: 1px solid var(--d-control); border-radius: 4px; background: var(--d-raised); color: var(--d-ink); font: inherit; cursor: pointer; }
  .dsp-filecheck { display: grid; gap: .5rem; padding: .9rem; margin: 0; border: 1px solid var(--d-line); background: var(--d-input); }
  .dsp-filecheck > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .5rem; }
  .dsp-filecheck dt { font-size: .7rem; color: var(--d-dim); }
  .dsp-filecheck dd { margin: 0; font-size: .8rem; min-width: 0; overflow-wrap: anywhere; }
  .dsp-hashpair-grid { display: grid; gap: .75rem; }
  .dsp-hashpair-grid span { display: block; font-size: .75rem; color: var(--d-dim); }
  .dsp-hashpair-h { font-size: .8rem; }
  .dsp-captcha { min-height: 78px; margin-top: 1.5rem; }
  .dsp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .dsp .dsp-err, .dsp .dsp-alert { color: var(--d-red); font-size: .875rem; line-height: 1.6; }
  .dsp .dsp-err { margin-block: .25rem 0; }
  .dsp .dsp-alert { padding: 1rem; margin-top: 1rem; border: 1px solid var(--d-red); background: color-mix(in srgb, var(--d-red) 5%, var(--d-surface)); }
  .dsp .dsp-gate { margin: .75rem 0; color: var(--d-amber); font-size: .83rem; }
  .dsp .dsp-ok { color: var(--d-green); }
  .dsp .dsp-bad { color: var(--d-red); }
  .dsp-detail { border-bottom: 1px solid var(--d-rule); padding-block: .4rem; }
  .dsp-detail summary { display: flex; align-items: baseline; gap: .75rem; min-height: 48px; padding: .85rem 0; color: var(--d-ink); font-size: .9rem; font-weight: 500; list-style: none; cursor: pointer; transition: color .2s ease; }
  .dsp-detail summary::-webkit-details-marker { display: none; }
  .dsp-detail summary:hover { color: var(--d-red); }
  .dsp-detail summary::after { content: '+'; margin-inline-start: auto; padding-inline: .25rem; color: var(--d-red); font: 400 1.15rem/1 var(--d-mono); }
  .dsp-detail[open] > summary::after { content: '−'; }
  .dsp-detail summary > span { font-size: .75rem; color: var(--d-dim); font-weight: 400; }
  .dsp-detail[open] > summary { margin-bottom: .5rem; }
  .dsp-detail p { font-size: .9rem; max-width: 65ch; }
  .dsp-detail .dsp-row { margin-top: .75rem; }
  .dsp-detail.dsp-compact { border: 0; }
  .dsp-detail.dsp-compact summary, .dsp-other-routes summary { font-size: .82rem; color: var(--d-muted); }
  .dsp-other-routes { border: 0; }
  .dsp-commitment-details > summary, .dsp-preview-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; list-style: none; cursor: pointer; }
  .dsp-commitment-details > summary::-webkit-details-marker, .dsp-preview-details > summary::-webkit-details-marker { display: none; }
  .dsp-commitment-details > summary { color: var(--d-dim); font: 500 .65rem/1.5 var(--d-mono); letter-spacing: .075em; text-transform: uppercase; }
  .dsp-commitment-details > summary::after, .dsp-preview-details > summary::after { content: '+'; color: var(--d-red); font: 400 1rem/1 var(--d-mono); }
  .dsp-commitment-details[open] > summary::after, .dsp-preview-details[open] > summary::after { content: '−'; }
  .dsp-preview-details > summary { color: var(--d-ink); font-size: .9rem; font-weight: 600; }
  .dsp-preview-details[open] > summary { margin-bottom: 1rem; }
  .dsp-preview-explanation { margin-top: .75rem; }
  .dsp-preview-explanation summary { font-size: .78rem; }
  .dsp-preview-explanation .dsp-pv > div:last-child { border-bottom: 0; }
  .dsp-pv { display: grid; gap: .85rem; margin: 0; }
  .dsp-pv > div { padding-bottom: .85rem; border-bottom: 1px solid var(--d-rule); min-width: 0; }
  .dsp-pv dt { margin: 0 0 .3rem; font-size: .7rem; letter-spacing: .015em; color: var(--d-dim); }
  .dsp-pv dd { margin: 0; font-size: .83rem; line-height: 1.6; color: var(--d-ink); overflow-wrap: anywhere; }
  .dsp-estimate { display: none; }
  .dsp .dsp-preview-foot { font-size: .75rem; line-height: 1.65; color: var(--d-dim); margin-block: 1rem 0; }
  .dsp .dsp-aside-link { font-size: .8rem; margin-block: 1rem 0; }
  .dsp-review-list { margin: 1.5rem 0; }
  .dsp-review-list > div { display: grid; grid-template-columns: 10rem minmax(0,1fr); gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--d-rule); }
  .dsp-review-list dt { color: var(--d-dim); font-size: .8rem; }
  .dsp-review-list dd { margin: 0; white-space: pre-line; color: var(--d-ink); font-size: .9rem; overflow-wrap: anywhere; }
  .dsp-review-list dd > button { display: block; padding: .4rem 0 0; min-height: 44px; background: none; border: 0; color: var(--d-ink); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
  .dsp-receipt, .dsp-status { padding: clamp(1rem,3vw,2rem); border: 1px solid var(--d-rule); border-top: 2px solid var(--d-green); background: var(--d-surface); border-radius: var(--d-radius); max-width: 62rem; }
  .dsp-receipt:focus { outline: none; }
  .dsp-rc-id { overflow-wrap: anywhere; font-family: var(--d-mono); font-size: 1.25rem; }
  .dsp-rc-key { display: grid; justify-items: start; gap: .75rem; padding: 1.25rem; margin-block: 1.5rem; border: 1px solid color-mix(in srgb, var(--d-amber) 55%, var(--d-line)); border-radius: 6px; background: color-mix(in srgb, var(--d-amber) 4%, var(--d-surface)); }
  .dsp-rc-key code { color: var(--d-amber); }
  .dsp-rc-due { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; font-size: .85rem; }
  .dsp-rc-due b { color: var(--d-ink); }
  .dsp-rc-files { padding-inline-start: 1.25rem; margin: 0; }
  .dsp-rc-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
  .dsp-status-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; overflow-wrap: anywhere; }
  .dsp-badge { color: var(--d-muted); font-size: .75rem; }
  .dsp-badge.is-red { color: var(--d-red); }
  .dsp-badge.is-green { color: var(--d-green); }
  .dsp-timeline { list-style: none; padding-inline-start: 1.25rem; border-left: 1px solid var(--d-line); margin: 1.5rem 0 0; }
  .dsp-timeline li { position: relative; margin-block: 1.25rem; }
  .dsp-timeline li::before { content: ''; position: absolute; left: -1.5rem; top: .45rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--d-green); }
  .dsp-timeline time { display: block; font: 400 .7rem/1.5 var(--d-mono); color: var(--d-dim); margin-bottom: .4rem; }
  .dsp-timeline p { font-size: .875rem; margin-block: .5rem; }
  .dsp-to-you { padding-inline-start: .75rem; border-left: 2px solid var(--d-cyan); }
  .dsp-to-you span { display: block; color: var(--d-cyan); font-size: .72rem; }
  .dsp-pre { overflow-x: auto; white-space: pre; padding: 1rem; background: var(--d-input); border: 1px solid var(--d-line); color: var(--d-muted); font: 400 .75rem/1.7 var(--d-mono); }
  .dsp-chain { display: flex; gap: .7rem; align-items: center; margin: 0 !important; }
  .dsp-chain-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--d-dim); }
  [data-chain-status='ok'] .dsp-chain-dot { background: var(--d-green); }
  [data-chain-status='broken'] .dsp-chain-dot, [data-chain-status='error'] .dsp-chain-dot { background: var(--d-red); }
}

/* Exact layout breakpoints: phone, tablet, desktop and wide. */
@layer responsive {
  @media (min-width: 1440px) {
    .dsp-hero { grid-template-columns: minmax(0, 1.55fr) minmax(320px, .8fr); }
    .dsp-form-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 2.5rem; }
  }
  @media (min-width: 1024px) and (max-width: 1439px) {
    .dsp-header-inner { gap: 1.25rem; }
    .dsp-header-links { gap: 1.15rem; }
    .dsp-form-grid { grid-template-columns: minmax(0, 1fr) 240px; }
    .dsp-route-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .dsp-route-cards .dsp-card-body { padding-inline: 1rem 2rem; }
    .dsp-process-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem; }
    .dsp-process-list > li { grid-template-rows: auto auto 1fr; }
    .dsp-position > div { grid-template-columns: minmax(0,1fr); gap: 0; }
    .dsp-position p + p { margin-top: 1rem; }
  }
  @media (max-width: 1023px) {
    :root { --d-header: 7rem; }
    .dsp-header-inner { grid-template-columns: minmax(0,1fr) auto; gap: 0 1rem; padding-block: .6rem 0; }
    .dsp-header-links { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 1rem; }
    .dsp-header-links a { min-height: 44px; font-size: .8rem; }
    .dsp-hero { grid-template-columns: minmax(0, 1fr) minmax(240px, .75fr); gap: 2rem; }
    .dsp-commitment { padding: 1rem 1.25rem; }
    .dsp-form-grid { grid-template-columns: minmax(0, 1fr); }
    .dsp-preview { position: static; grid-row: 1; padding: .25rem 1rem; border: 1px solid var(--d-rule); border-radius: 6px; background: color-mix(in srgb, var(--d-surface) 70%, var(--d-bg)); }
    .dsp-preview-details[open] .dsp-pv { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 2rem; }
    .dsp-preview-details[open] { padding-bottom: 1rem; }
    .dsp-process-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem; }
    .dsp-process-list > li { grid-template-rows: auto auto 1fr; }
    .dsp-process-list h3 { max-width: none; }
    .dsp-tracking { grid-template-columns: minmax(0,1fr); }
    .dsp-tracking-intro { grid-row: auto; }
    .dsp-tracking > :not(.dsp-tracking-intro) { grid-column: 1; }
    .dsp-position { grid-template-columns: minmax(0,1fr); gap: .5rem; }
    .dsp-targets { gap: 1.5rem; }
    .dsp-targets > p + p { padding-left: 1.5rem; }
  }
  @media (min-width: 640px) and (max-width: 1023px) {
    .dsp h1 { font-size: clamp(2rem, 4.25vw, 2.8rem); }
    .dsp-cards:not(.dsp-remedies) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dsp-position > div { grid-template-columns: minmax(0,1fr); }
    .dsp-position p + p { margin-top: 1rem; }
    .dsp-hero-actions { gap: .65rem; }
  }
  @supports (grid-template-rows: subgrid) {
    @media (min-width: 640px) {
      .dsp-process-list > li { grid-template-rows: subgrid; grid-row: span 3; }
    }
  }
  @media (max-width: 639px) {
    .dsp-nav-long { display: none; }
    .dsp-nav-short { display: inline; }
    .dsp-header-links { gap: .65rem; }
    .dsp-header-links a { font-size: .75rem; }
    .dsp-hero { grid-template-columns: minmax(0,1fr); gap: 1.5rem; padding-top: 1.75rem; padding-bottom: 2rem; }
    .dsp h1 { font-size: clamp(1.8rem, 7.9vw, 2.75rem); letter-spacing: -.045em; margin-bottom: 1.25rem; }
    .dsp .dsp-eyebrow { font-size: .6rem; letter-spacing: .025em; gap: .5rem; margin-bottom: 1.25rem; }
    .dsp .dsp-lede { font-size: 1rem; line-height: 1.7; }
    .dsp .dsp-hero-note { font-size: .835rem; }
    .dsp-hero-actions { align-items: stretch; gap: .55rem; margin-top: 1.25rem; }
    .dsp-hero-actions .dsp-btn { flex: 1 1 260px; }
    .dsp-hero-actions .is-text { justify-content: center; min-height: 44px; }
    .dsp-commitment { padding: .25rem 1rem; box-shadow: none; }
    .dsp-commitment-details[open] { padding-bottom: .25rem; }
    .dsp-commitment li { grid-template-columns: 1.5rem minmax(0,1fr); gap: .6rem; padding-block: .9rem; }
    .dsp-commitment h2 { font-size: .9rem; }
    .dsp-commitment p { font-size: .82rem; }
    .dsp-commitment-details > a { margin-top: .5rem; font-size: .8rem; }
    .dsp-request { padding-top: 1.75rem; }
    .dsp-section-heading { gap: .75rem; margin-bottom: 1.25rem; }
    .dsp-section-heading > p { font-size: .82rem; max-width: 36ch; }
    .dsp-section-heading br { display: none; }
    .dsp-form { padding: var(--d-form-padding); }
    .dsp-progress { gap: .4rem; padding-block: .6rem .7rem; margin-bottom: 1.5rem; }
    .dsp-progress button { flex-direction: column; align-items: start; gap: .45rem; font-size: .7rem; min-height: 64px; padding-block: 0; }
    .dsp-progress button::after { bottom: -.7rem; }
    .dsp-progress button span { width: 1.5rem; height: 1.5rem; font-size: .6rem; }
    .dsp-cards, .dsp-row, .dsp-rules-grid { grid-template-columns: minmax(0,1fr); }
    .dsp-card-body { padding: 1rem 2.5rem 1rem 1rem; }
    .dsp-card b { font-size: .9rem; }
    .dsp-route-cards .dsp-card-body { display: grid; grid-template-columns: 1.5rem minmax(0,1fr); gap: .45rem .75rem; padding-block: 1rem; }
    .dsp-route-cards .dsp-card-top { align-self: center; }
    .dsp-route-cards .dsp-card b { font-size: .9rem; }
    .dsp-route-cards .dsp-card-text { grid-column: 2; }
    .dsp-route-icon { width: 22px; height: 22px; margin-bottom: 0; }
    .dsp-remedies .dsp-card-body { grid-template-columns: minmax(0,1fr); gap: .35rem; padding-block: .85rem; }
    .dsp-remedies .dsp-card-body::after { top: 1.05rem; transform: none; }
    .dsp-step-actions > .dsp-hint { max-width: none; flex-basis: 100%; }
    .dsp-step-actions > .is-primary { max-width: 100%; }
    .dsp-step-actions .dsp-btn { font-size: .82rem; }
    .dsp-preview-details[open] .dsp-pv { grid-template-columns: minmax(0,1fr); }
    .dsp-review-list > div { grid-template-columns: minmax(0,1fr); gap: .3rem; }
    .dsp-position { padding: 1.5rem; }
    .dsp-position > div { grid-template-columns: minmax(0,1fr); gap: 0; }
    .dsp-position h2 { font-size: 1.65rem; }
    .dsp-position h2 span { display: block; }
    .dsp-position p { font-size: .875rem; }
    .dsp-position p + p { margin-top: 1rem; }
    .dsp-process-list { grid-template-columns: minmax(0,1fr); gap: 0; margin-top: 1.5rem; }
    .dsp-process-list > li { grid-template-columns: 1.75rem minmax(0,1fr); grid-template-rows: auto; gap: .75rem; padding-block: 1.5rem; }
    .dsp-process-list > li::before { width: 1.75rem; }
    .dsp-process-list h3 { font-size: 1rem; }
    .dsp-process-list > li > div { grid-column: 2; }
    .dsp-process-list p { font-size: .875rem; }
    .dsp-targets { grid-template-columns: minmax(0,1fr); padding-block: 1.25rem; gap: 1.25rem; margin-top: .5rem; }
    .dsp-targets > p + p { border: 0; padding-left: 0; }
    .dsp-targets p:not(.dsp-target-note) { display: grid; grid-template-columns: minmax(0,.55fr) minmax(0,1fr); gap: .75rem; }
    .dsp-targets strong { font-size: 1.05rem; }
    .dsp-targets span { font-size: .8rem; }
    .dsp-tracking { padding: 1.25rem; }
    .dsp-tracking .dsp-btn { width: 100%; }
    .dsp-footer-brand span { display: block; margin-top: .25rem; }
    .dsp-detail summary { flex-wrap: wrap; column-gap: .5rem; row-gap: .2rem; font-size: .85rem; }
    .dsp-detail summary::after { align-self: center; }
    .dsp-detail summary > span { font-size: .7rem; }
    .dsp-detail p { font-size: .875rem; }
    .dsp-status-head > b { font-size: .85rem; }
  }
  /* Motion communicates arrival, selection and progress; it never hides content. */
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    .dsp-hero-copy > * { animation: dsp-enter .55s var(--d-ease) both; }
    .dsp-hero-copy > :nth-child(2) { animation-delay: .04s; }
    .dsp-hero-copy > :nth-child(3) { animation-delay: .08s; }
    .dsp-hero-copy > :nth-child(4) { animation-delay: .12s; }
    .dsp-hero-copy > :nth-child(5) { animation-delay: .16s; }
    .dsp-commitment { animation: dsp-enter .6s .12s var(--d-ease) both; }
    .dsp-form-step:not([hidden]) { animation: dsp-step-enter .26s var(--d-ease) both; }
    .dsp-card:hover .dsp-card-body { background: color-mix(in srgb, var(--d-ink) 3%, var(--d-input)); }
    .dsp-card:hover input:checked + .dsp-card-body { background: var(--d-accent-wash); }
    .dsp-process-list > .is-in-view::before { animation: dsp-rule .65s var(--d-ease) both; }
    .dsp-position.is-in-view::before { animation: dsp-vertical-rule .65s var(--d-ease) both; }
    .dsp-tracking.is-in-view, .dsp-rules.is-in-view { animation: dsp-step-enter .45s var(--d-ease) both; }
    @keyframes dsp-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes dsp-step-enter { from { opacity: .6; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes dsp-rule { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
    @keyframes dsp-vertical-rule { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
  @media (forced-colors: active) {
    .dsp-card input:checked + .dsp-card-body { outline: 2px solid Highlight; }
    .dsp-progress button[aria-current='step'] { outline: 2px solid Highlight; }
    .dsp-card-body::after { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
    .dsp-card input:checked + .dsp-card-body::after { background: Highlight; border-color: Highlight; box-shadow: none; }
  }
  @media print {
    .dsp-header,.dsp-hero-actions,.dsp-form-grid,.dsp-track-form,.dsp-footer,.dsp-skip { display: none !important; }
    :root { --d-bg: #fff; --d-ink: #16212b; --d-muted: #364552; --d-dim: #485966; --d-surface: #fff; --d-input: #fff; --d-line: #bbb; --d-red: #8c283e; --d-green: #14664f; --d-cyan: #245875; --d-amber: #805216; --d-shadow: none; }
    .dsp { max-width: none; padding: 0; }
    .dsp-hero,.dsp-position,.dsp-process-list > li { break-inside: avoid; }
    .dsp-process-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dsp-receipt,.dsp-status { max-width: none; }
    .dsp-has-receipt .dsp > :not(#submit), .dsp-has-receipt #submit > :not(.dsp-receipt), .dsp-receipt .dsp-rc-actions { display: none !important; }
  }
}