/* ---- IDS token map (raw value  <-  --ids-sem-* token) ---- */
  :root {
    /* Cox Automotive / Interstate palette */
    --color-cox-blue:        #0033a0;   /* Cox Automotive primary blue */
    --color-cox-blue-dark:   #002171;
    --color-manheim-navy:    #1b2a4a;   /* Manheim deep navy */

    /* surface  <-  --ids-sem-color-surface-* */
    --surface-app:           #f4f6f9;   /* surface-app */
    --surface-default:       #ffffff;   /* surface-default */
    --surface-subdued:       #eef2f7;   /* surface-subdued */
    --surface-info:          #e8f0fe;   /* surface-info (banner) */

    /* text  <-  --ids-sem-color-on-surface-* */
    --text-default:          #1f2733;   /* on-surface-default */
    --text-subdued:          #4a5564;   /* on-surface-subdued */
    --text-muted:            #6b7685;   /* on-surface-muted */
    --text-link:             #0033a0;   /* on-surface-interactive-rest */
    --text-link-hover:       #002171;   /* on-surface-interactive-hover */

    /* border  <-  --ids-sem-color-border-* */
    --border-default:        #d4dae2;   /* border-default */
    --border-muted:          #e4e9ef;   /* border-muted */
    --border-info:           #9bbcf6;   /* info border */

    /* spacing  <-  --ids-sem-space-* */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;

    /* type  <-  --ids-sem-font-* */
    --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;     /* font-family-body */
    --font-heading: "Roboto", "Helvetica Neue", Arial, sans-serif;  /* font-family-heading */
    --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 32px;
    --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;

    /* shape & shadow  <-  --ids-sem-* */
    --radius-sm: 4px;
    --radius-md: 8px;
    --border-thin: 1px;
    --shadow-sm: 0 1px 2px rgba(27,42,74,0.08), 0 1px 3px rgba(27,42,74,0.06);
    --shadow-md: 0 4px 12px rgba(27,42,74,0.10);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    background: var(--surface-app);
    color: var(--text-default);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  a { color: var(--text-link); text-decoration: none; }
  a:hover { color: var(--text-link-hover); text-decoration: underline; }

  /* ---------- Header ---------- */
  .site-header {
    background: var(--surface-default);
    border-bottom: var(--border-thin) solid var(--border-muted);
    box-shadow: var(--shadow-sm);
  }
  /* Sizing lives here, not in a style="" attribute: inline style
     attributes are blocked by style-src just like a <style> block. */
  .logo-official { height: 40px; width: auto; display: block; }

  .header-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  /* ---------- Main ---------- */
  .page {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) var(--space-6);
  }

  .notice {
    text-align: center;
    padding: var(--space-5) var(--space-3) var(--space-4);
  }
  .notice h1 {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--color-manheim-navy);
    margin-bottom: var(--space-3);
  }
  .notice p {
    font-size: var(--fs-lg);
    color: var(--text-subdued);
    max-width: 640px;
    margin: 0 auto;
  }

  /* ---------- Retrieval banner ---------- */
  .banner {
    background: var(--surface-info);
    border: var(--border-thin) solid var(--border-info);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-5) 0;
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
  }
  .banner .icon {
    flex: 0 0 auto;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-cox-blue);
    color: #fff; font-weight: var(--fw-bold);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-md);
  }
  .banner h2 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--color-manheim-navy);
    margin-bottom: var(--space-2);
  }
  .banner p { color: var(--text-subdued); }
  .banner-body { flex: 1; }

  /* ---------- Copyable email chip ---------- */
  .email-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface-subdued);
    border: var(--border-thin) solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    margin: var(--space-3) 0;
    max-width: 100%;
  }
  .email-chip-icon {
    width: 18px; height: 18px;
    color: var(--text-muted);
    flex: 0 0 auto;
  }
  .email-chip-text {
    font-weight: var(--fw-medium);
    color: var(--text-default);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
  }
  .email-chip-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--surface-default);
    border: var(--border-thin) solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-link);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    padding: 4px var(--space-2);
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }
  .email-chip-copy:hover { background: var(--surface-info); border-color: var(--border-info); }
  .email-chip-copy:focus-visible { outline: 2px solid var(--color-cox-blue); outline-offset: 2px; }
  .email-chip-copy.copied { color: #1b7f3b; border-color: #9ed3ac; background: #eafbef; }
  .icon-copy { width: 14px; height: 14px; }

  /* ---------- CTA button ---------- */
  .cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    background: var(--color-cox-blue);
    color: #fff;
    font-weight: var(--fw-medium);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
  }
  .cta:hover { background: var(--color-cox-blue-dark); color: #fff; text-decoration: none; box-shadow: var(--shadow-md); }
  .cta:active { transform: translateY(1px); }
  .cta:focus-visible { outline: 2px solid var(--color-cox-blue); outline-offset: 3px; }
  .cta-icon { width: 18px; height: 18px; flex: 0 0 auto; }

  /* ---------- Terms ---------- */
  .terms {
    background: var(--surface-default);
    border: var(--border-thin) solid var(--border-muted);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-5) 0 0;
  }
  .terms h2 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-manheim-navy);
    margin-bottom: var(--space-3);
  }
  .terms h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--text-default);
    margin: var(--space-4) 0 var(--space-2);
  }
  .terms p { color: var(--text-subdued); margin-bottom: var(--space-3); font-size: var(--fs-sm); }

  /* ---------- Footer ---------- */
  .site-footer {
    border-top: var(--border-thin) solid var(--border-muted);
    background: var(--surface-default);
    margin-top: var(--space-6);
  }
  .footer-inner {
    max-width: 960px; margin: 0 auto;
    padding: var(--space-4);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    justify-content: space-between;
  }

  /* Visually hidden, still announced by screen readers. */
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 600px) {
    .header-inner { flex-direction: column; align-items: flex-start; }
    .notice h1 { font-size: var(--fs-xl); }
    .notice p { font-size: var(--fs-md); }
    .banner { flex-direction: column; }
  }