:root {
  --focus-ring: rgba(0, 61, 129, .25);
  --bg: #f4f5f7;
  --card: #ffffff;
  --text: #272626;
  --heading: #1f1f1f;
  --muted: #636569;
  --line: #dfe2e7;
  --accent: #003d81;
  --accent-text: #ffffff;
  --accent-soft: #e5ebf2;
  --cta: #ed1c24;
  --cta-hover: #d4121a;
  --cta-text: #ffffff;
  --ok: #1b6e3a;
  --ok-bg: #e1f3e8;
  --warn: #8a5a00;
  --warn-bg: #fff4dc;
  --err: #b42318;
  --err-bg: #fdecea;
}
@media (prefers-color-scheme: dark) {
  :root {
    --focus-ring: rgba(127, 176, 255, .4);
    --bg: #101317;
    --card: #181c22;
    --text: #e8eaee;
    --heading: #ffffff;
    --muted: #a3a9b3;
    --line: #2a313b;
    --accent: #7fb0ff;
    --accent-text: #08111f;
    --accent-soft: #1b2a40;
    --cta: #ed1c24;
    --cta-hover: #ff3b42;
    --cta-text: #ffffff;
    --ok: #7fdca6;
    --ok-bg: #16301f;
    --warn: #f0c36b;
    --warn-bg: #33290f;
    --err: #ff9b92;
    --err-bg: #3a1a1a;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 "Open Sans", Arial, Helvetica, sans-serif;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.hero { padding: 44px 0 20px; background: var(--card); border-bottom: 1px solid var(--line); }
h1 { margin: 0 0 4px; font-size: 1.75rem; }
h2 { margin: 0 0 12px; font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.lede { margin: 0 0 12px; color: var(--muted); max-width: 680px; font-size: 1.05rem; }
.privacy {
  display: inline-block; margin: 0; padding: 4px 10px; font-size: .9rem;
  background: var(--ok-bg); color: var(--ok); border-radius: 999px;
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; margin: 16px 0;
}
.card[hidden] { display: none; }
.num {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent); color: var(--accent-text);
  font-size: .85rem; font-weight: 700;
}
.muted { color: var(--muted); font-size: .92rem; }
.drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 36px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line); border-radius: 12px; background: var(--bg);
}
.drop:hover, .drop:focus-visible, .drop.over { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.drop span { color: var(--muted); font-size: .92rem; }
.msg { margin: 8px 0 0; min-height: 1.2em; font-size: .92rem; }
.msg.err { color: var(--err); }
.msg.ok { color: var(--ok); }
button { font: inherit; cursor: pointer; }
.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; }
.btn { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent); }
.btn.primary { background: var(--cta); border-color: var(--cta); color: var(--cta-text); }
.btn.primary:hover:not(:disabled) { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn.primary:disabled { opacity: .5; cursor: not-allowed; }
.map-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 12px 0; }
@media (min-width: 640px) { .map-grid { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.field .req { color: var(--err); margin-left: 2px; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; }
select, input[type=text], input[type=email] {
  width: 100%; padding: 9px 10px; font: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
}
.saved { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.opts { display: grid; gap: 12px; }
@media (min-width: 640px) { .opts { grid-template-columns: 1fr 1fr; } .opts .check { grid-column: 1 / -1; } }
.opts label { font-weight: 600; }
.opts label select { margin-top: 4px; font-weight: 400; }
.opts .check { font-weight: 400; display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; cursor: pointer; }
.opts .check input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); cursor: pointer; }
.summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pill { padding: 4px 12px; border-radius: 999px; font-size: .9rem; font-weight: 600; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.err { background: var(--err-bg); color: var(--err); }
.problems { background: var(--err-bg); color: var(--err); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: .92rem; }
.problems ul { margin: 6px 0 0; padding-left: 20px; }
.problems.warn { background: var(--warn-bg); color: var(--warn); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { padding: 6px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
th { background: var(--bg); position: sticky; top: 0; }
td.bad { background: var(--err-bg); color: var(--err); }
tr:last-child td { border-bottom: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 16px; }
.actions label { flex: 1 1 220px; font-weight: 600; }
.actions input { margin-top: 4px; font-weight: 400; }
details { border-top: 1px solid var(--line); padding: 10px 0; }
details:first-of-type { border-top: 0; }
summary { cursor: pointer; font-weight: 600; }
details ol, details ul { padding-left: 22px; }
.site-footer { padding: 8px 16px 40px; color: var(--muted); font-size: .85rem; }

.target-label { display: block; font-weight: 600; margin-bottom: 12px; max-width: 320px; }
.target-label select { margin-top: 4px; font-weight: 400; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 880px; margin: 0 auto; padding: 0 16px; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; color: var(--accent); }
.brand-name { font-weight: 700; font-size: 1.1rem; color: var(--text); letter-spacing: -.01em; }
.brand-mark { flex: none; border-radius: 8px; }
.topnav { display: flex; align-items: center; gap: 4px; }
.topnav a {
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem;
  padding: 8px 12px; border-radius: 8px;
}
.topnav a:hover { color: var(--text); background: var(--bg); }
.topnav .pill-link {
  color: var(--accent); background: var(--accent-soft); font-weight: 600; margin-left: 6px;
}
.topnav .pill-link:hover { color: var(--accent); filter: brightness(.97); }
.topnav a:focus-visible, .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topnav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.prose h2 { margin-bottom: 8px; }
.prose p, .prose li { margin: 0 0 10px; }
.prose ol, .prose ul { padding-left: 22px; margin: 0 0 10px; }
.prose a { color: var(--accent); }
@media (max-width: 560px) {
  .topnav .hide-sm { display: none; }
  .brand-name { font-size: 1rem; }
}

.steps { list-style: none; margin: 24px 0 8px; padding: 0; display: flex; align-items: center; }
.steps li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: .95rem; flex: none; }
.steps li + li::before {
  content: ""; display: block; width: clamp(16px, 7vw, 56px); height: 2px; margin: 0 8px 0 12px;
  background: var(--line);
}
.step-num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--line); color: var(--muted); font-size: .85rem; font-weight: 700;
}
.steps li.current { color: var(--text); }
.steps li.current .step-num { border-color: var(--accent); color: var(--accent); }
.steps li.done { color: var(--text); }
.steps li.done .step-num { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.steps li.done + li::before, .steps li.current + li.current::before { background: var(--accent); }
@media (max-width: 480px) {
  .steps li { font-size: .85rem; gap: 6px; }
  .steps li + li::before { width: 12px; margin: 0 6px 0 8px; }
  .step-num { width: 24px; height: 24px; font-size: .78rem; }
  .steps li:not(.current) .step-label { display: none; }   /* only name the current step on phones */
}

/* ---- Export gate ---- */
.gate-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 12px 16px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--line);
}
.gate-banner[hidden] { display: none; }
.gate-banner p { margin: 0; font-weight: 600; flex: 1 1 260px; }
dialog {
  width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); color: var(--text);
}
dialog::backdrop { background: rgba(10, 25, 16, .55); }
dialog h2 { margin: 0 0 8px; display: block; }
dialog label { display: block; font-weight: 600; margin: 16px 0 4px; }
.small { font-size: .82rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---- Breadcrumb (sub-pages) ---- */
.breadcrumb { margin: 0 0 12px; font-size: .9rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.breadcrumb li { color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.breadcrumb a { color: var(--accent); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ---- ACS Technologies look: Barlow headings, Open Sans text, red pill buttons ---- */
h1, h2, h3, .brand-name { font-family: Barlow, "Open Sans", Arial, sans-serif; color: var(--heading); letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3rem); line-height: 1.08; font-weight: 700; margin: 0 0 12px; }
h2 { font-size: 1.4rem; font-weight: 700; }
.lede { color: var(--muted); }
.brand-name { font-size: 1.35rem; font-weight: 700; letter-spacing: 0; }
.brand-mark { color: var(--cta); }
.topbar-inner { height: 68px; }
.topnav a { letter-spacing: 0; font-size: .95rem; font-weight: 600; color: var(--text); }
.topnav a:hover { color: var(--accent); background: var(--accent-soft); }
.topnav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.btn { border-radius: 999px; letter-spacing: .01em; font-weight: 700; font-size: .95rem; padding: 12px 24px; }
.btn.ghost { border: 1.5px solid var(--heading); background: transparent; color: var(--heading); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.card { border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.privacy { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.link, .prose a { color: var(--accent); }
.breadcrumb a { color: var(--accent); }
.field label, .opts label, .actions label, dialog label { font-weight: 600; }
th { font-family: Barlow, "Open Sans", sans-serif; font-weight: 700; letter-spacing: .02em; }
.drop { border-radius: 16px; }
.drop:hover, .drop:focus-visible, .drop.over { background: var(--accent-soft); }
.steps li { font-family: Barlow, "Open Sans", sans-serif; font-size: 1.05rem; }
.brand-name { white-space: nowrap; }
@media (max-width: 560px) { .brand-name { font-size: 1.15rem; } .topnav a { padding: 8px 8px; } }

/* ---- Mapper: custom dropdowns + one row per field ---- */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23636569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 14px;
}
@media (prefers-color-scheme: dark) {
  select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23a3a9b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5'/%3E%3C/svg%3E"); }
}
select:hover { border-color: var(--accent); }

.map-board { margin: 16px 0 4px; }
.map-summary { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: .95rem; }
.map-summary.ok { background: var(--ok-bg); color: var(--ok); }
.map-summary.warn { background: var(--warn-bg); color: var(--warn); }
.map-group { margin: 20px 0 8px; font-size: .95rem; letter-spacing: 0; color: var(--muted); font-family: "Open Sans", Arial, sans-serif; font-weight: 700; }
.map-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.map-row {
  display: grid; grid-template-columns: 28px minmax(240px, 1.4fr) 20px minmax(150px, 1fr);
  gap: 4px 14px; align-items: start; padding: 14px 16px; border-top: 1px solid var(--line);
}
.map-row:first-child { border-top: 0; }
.map-row.is-missing { background: var(--err-bg); }
.map-status {
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin-top: 8px; border-radius: 50%;
  font-size: .8rem; font-weight: 800; background: var(--bg); color: var(--muted); border: 1.5px solid var(--line);
}
.is-mapped .map-status { background: var(--ok); border-color: var(--ok); color: var(--card); }
.is-missing .map-status { background: var(--err); border-color: var(--err); color: var(--card); }
.map-target { padding-top: 6px; min-width: 0; }
.map-name { display: block; font-weight: 700; font-size: 1rem; }
.map-target .hint { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.map-arrow { color: var(--muted); font-size: 1.2rem; line-height: 1; padding-top: 12px; text-align: center; }
.map-source { min-width: 0; }
.map-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: .85rem; color: var(--muted); min-height: 1.2em; overflow-wrap: anywhere; }
.map-note.warn { color: var(--warn); font-weight: 600; }
.is-skipped .map-name { color: var(--muted); }
@media (max-width: 640px) {
  .map-row { grid-template-columns: 28px 1fr; padding: 14px; }
  .map-arrow { display: none; }
  .map-target { order: 1; }                    /* on phones: the ACS field name first, then its picker below */
  .map-source { order: 2; grid-column: 1 / -1; }
}
.map-auto { flex: none; margin-left: auto; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .66rem; line-height: 1.6; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.saved { margin-top: 16px; }

/* column headings for the mapper */
.map-head {
  display: grid; grid-template-columns: 28px minmax(240px, 1.4fr) 20px minmax(150px, 1fr); gap: 4px 18px;
  padding: 0 21px 8px; margin-top: 18px; font-size: .88rem; font-weight: 700; letter-spacing: 0;
  color: var(--muted);
}
.map-head + .map-group { margin-top: 4px; }
.map-col-label { display: none; font-size: .88rem; font-weight: 700; letter-spacing: 0; color: var(--muted); margin-bottom: 4px; }
@media (max-width: 640px) {
  .map-head { display: none; }
  .map-col-label { display: block; }
}

/* ---- Remember mapping: one button that changes state, plus a quiet reset link ---- */
.saved { margin-top: 16px; }
.saved-sub { margin: 10px 0 0; font-size: .9rem; color: var(--muted); }
.saved-sub[hidden] { display: none; }
.saved-sub:empty { display: none; }
.saved-sub .link { margin-left: 6px; font-size: .9rem; }
.btn.is-saved, .btn.is-saved:disabled {
  background: var(--ok-bg); border-color: var(--ok); color: var(--ok); opacity: 1; cursor: default;
}

/* ---- Import help: easy-to-scan steps ---- */
.help details { border-top: 1px solid var(--line); padding: 0; }
.help details:first-of-type { border-top: 0; }
.help summary {
  display: flex; align-items: center; gap: 14px; padding: 16px 0; font-size: 1.05rem; font-weight: 700;
  list-style: none; border-radius: 6px;
}
.help summary::-webkit-details-marker { display: none; }
.help summary::before {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px;
  border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.help details[open] > summary::before { transform: rotate(45deg); }
.help summary:hover { color: var(--accent); }
.help-body { padding: 4px 0 24px; max-width: 720px; }
.help-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.help-steps > li { counter-increment: step; padding: 0 0 28px; margin: 0 0 28px; border-bottom: 1px solid var(--line); }
.help-steps > li:last-child { border-bottom: 0; margin-bottom: 8px; padding-bottom: 8px; }
.help-steps > li::before {
  content: "Step " counter(step); display: block; margin-bottom: 6px;
  font: 700 .88rem/1 "Open Sans", Arial, sans-serif; letter-spacing: 0; color: var(--muted);
}
.help-steps h3, .next-time h3 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 700; }
.help-steps p, .next-time p { margin: 0 0 10px; line-height: 1.65; }
.step-hint { color: var(--muted); font-size: .92rem; }
.ui {
  display: inline-block; padding: 1px 9px; border-radius: 6px; background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-size: .92em; line-height: 1.55; white-space: nowrap;
}
.path { font-weight: 700; }
dl.settings { margin: 4px 0 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
dl.settings > div { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4px 20px; padding: 12px 16px; border-top: 1px solid var(--line); }
dl.settings > div:first-child { border-top: 0; }
dl.settings dt { margin: 0; }
dl.settings dd { margin: 0; font-weight: 600; }
.help-table { width: 100%; border-collapse: collapse; margin: 4px 0 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: .95rem; }
.help-table th, .help-table td { white-space: normal; padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.help-table tr:last-child td { border-bottom: 0; }
.help-table th { background: var(--bg); font-size: .88rem; letter-spacing: 0; color: var(--muted); position: static; }
.help-table td:first-child { font-weight: 700; width: 42%; }
.next-time { background: var(--accent-soft); border-radius: 12px; padding: 16px 20px; margin-top: 4px; }
.next-time h3 { margin-top: 0; color: var(--accent); }
.next-time p:last-child { margin-bottom: 0; }
.help-list { padding-left: 22px; margin: 0; }
.help-list li { margin: 0 0 14px; line-height: 1.65; padding-left: 4px; }
@media (max-width: 560px) {
  dl.settings > div { grid-template-columns: 1fr; }
  .help-table td:first-child { width: 38%; }
}

/* ---- More breathing room ---- */
.hero { padding: 64px 0 36px; }
h1 { font-size: clamp(2rem, 4.6vw, 2.75rem); line-height: 1.12; margin: 0 0 20px; }
.lede { font-size: 1.15rem; line-height: 1.65; max-width: 620px; margin: 0 0 28px; }
.privacy { margin: 0; padding: 6px 14px; }
.steps { margin: 36px 0 0; }
.card { padding: 28px; margin: 28px 0; }
.card h2 { margin: 0 0 18px; }
.card > .muted { margin: 0 0 14px; line-height: 1.6; }
.map-row { padding: 18px 20px; gap: 6px 18px; }
.map-group { margin: 28px 0 10px; }
.map-summary { margin: 16px 0 0; padding: 12px 16px; }
.map-head { margin-top: 24px; }
.opts { gap: 20px; }
.summary { gap: 10px; margin-bottom: 16px; }
.problems { padding: 14px 18px; margin-bottom: 16px; }
.actions { margin-top: 24px; }
.gate-banner { margin-top: 16px; padding: 16px 20px; }
.saved { margin-top: 24px; }
@media (max-width: 560px) {
  .hero { padding: 40px 0 28px; }
  .card { padding: 20px; margin: 20px 0; }
  .lede { font-size: 1.05rem; }
  .steps { margin-top: 28px; }
  .map-row { padding: 16px; }
}

/* ---- "Done" under the mapper ---- */
.map-footer {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line);
}
.map-footer .saved { margin-top: 0; }
.btn-lg { padding: 16px 32px; font-size: 1rem; flex: none; }
.map-row.pulse { box-shadow: inset 0 0 0 3px var(--warn); }
@media (max-width: 640px) {
  .map-footer { flex-direction: column-reverse; align-items: stretch; }
  .btn-lg { width: 100%; }
  .map-footer .saved { text-align: center; }
}

@media (max-width: 560px) {
  .help-table, .help-table tbody, .help-table tr, .help-table td { display: block; width: 100%; }
  .help-table thead { display: none; }
  .help-table tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .help-table tr:last-child { border-bottom: 0; }
  .help-table td { padding: 0; border: 0; }
  .help-table td:first-child { width: 100%; margin-bottom: 2px; }
  .ui { white-space: normal; }
}

/* ---- Step 1: platform cards ---- */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice-body {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 22px 24px; border: 2px solid var(--line); border-radius: 16px; background: var(--card);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.choice-dot {
  flex: none; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--muted); background: var(--card); transition: border-color .15s, background .15s;
}
.choice-name { display: flex; align-items: center; gap: 14px; font: 700 1.3rem/1.2 Barlow, "Open Sans", sans-serif; color: var(--heading); }
.choice-desc { color: var(--muted); font-size: .95rem; line-height: 1.5; padding-left: 36px; }
.choice:hover .choice-body { border-color: var(--accent); }
.choice input:checked + .choice-body { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.choice input:checked + .choice-body .choice-dot { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 5px, var(--card) 6px); }
.choice input:focus-visible + .choice-body { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 640px) { .choice-grid { grid-template-columns: 1fr; } .choice-body { padding: 18px 20px; } }

/* upload locked until a platform is chosen */
.drop.is-disabled { cursor: not-allowed; background: var(--bg); border-color: var(--line); opacity: .75; }
.drop.is-disabled:hover { background: var(--bg); border-color: var(--line); }
#upload-for { margin: 0 0 14px; }
#upload-for a { color: var(--accent); font-weight: 600; }
#sample-wrap { margin: 14px 0 0; }

/* ---- Locked steps (before a file is loaded) ---- */
.card.locked { background: var(--bg); border-style: dashed; box-shadow: none; padding-top: 22px; padding-bottom: 22px; }
.card.locked > *:not(h2):not(.lock-note) { display: none; }
.card.locked h2 { margin-bottom: 6px; color: var(--muted); }
.card.locked .num { background: var(--line); color: var(--muted); }
.lock-note { display: none; margin: 0; color: var(--muted); }
.card.locked .lock-note { display: block; }

/* ---- Help shows both platforms until one is chosen ---- */

/* ---- Undo hint ---- */
.map-hint { margin: 12px 0 0; font-size: .9rem; color: var(--muted); }
.map-hint .link { font-size: .9rem; margin-left: 10px; }
.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; }
.map-row.flash { box-shadow: inset 0 0 0 3px var(--accent); transition: box-shadow .3s; }

/* ---- Errors are red with a "!", never a check ---- */
.map-row.is-error { background: var(--err-bg); }
.is-error .map-status { background: var(--err); border-color: var(--err); color: var(--card); }
.map-note.err { color: var(--err); font-weight: 600; }
.map-summary.err { background: var(--err-bg); color: var(--err); }
.map-row.is-error.pulse, .map-row.is-missing.pulse { box-shadow: inset 0 0 0 3px var(--err); }

/* ---- Forward = green ---- */
:root { --go: #1b7f3b; --go-hover: #166a31; --go-text: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --go: #4cc47c; --go-hover: #66d493; --go-text: #06140c; } }
.btn.primary { background: var(--go); border-color: var(--go); color: var(--go-text); }
.btn.primary:hover:not(:disabled) { background: var(--go-hover); border-color: var(--go-hover); }

/* ---- Preview label ---- */
.preview-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 20px 0 10px; }
.preview-head h3 { margin: 0; font-size: 1.1rem; }
.preview-head .muted { font-size: .9rem; }

/* ---- FAQ section heading ---- */
.faq-head { margin: 56px 0 4px; padding-top: 32px; border-top: 2px solid var(--line); }
.faq-head h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 3.5vw, 2rem); }
.faq-head .muted { margin: 0; max-width: 620px; line-height: 1.6; }
.card-title { margin: 0 0 18px; font-size: 1.3rem; }
@media (max-width: 560px) { .faq-head { margin-top: 40px; padding-top: 24px; } }

/* Focus ring on the FAQ rows: keyboard only */
html:not(.kbd) summary:focus, html:not(.kbd) summary:focus-visible { outline: none; }
.help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---- Focus: one clean highlight on fields; keyboard-only rings elsewhere ---- */
select:focus, input[type="text"]:focus, input[type="email"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring);
}
html.kbd :is(button, a, summary, .drop):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html:not(.kbd) :is(button, a, summary, .drop):focus, html:not(.kbd) :is(button, a, summary, .drop):focus-visible { outline: none; }
html:not(.kbd) .choice input:focus-visible + .choice-body { outline: none; }

/* ---- File name: ".csv" is fixed beside the box ---- */
.file-field { flex: 1 1 260px; font-weight: 600; }
.file-input { display: flex; align-items: stretch; margin-top: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.file-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.file-input input[type="text"], .file-input input[type="text"]:focus { flex: 1; min-width: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; padding: 10px 12px; font: inherit; font-weight: 400; }
.file-ext { display: flex; align-items: center; padding: 0 16px; background: var(--bg); border-left: 1px solid var(--line); color: var(--muted); font-weight: 600; user-select: none; }

/* ---- Download button icon ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn-icon { flex: none; }

/* ---- Upload icon in the drop zone ---- */
.drop-icon { color: var(--accent); margin-bottom: 4px; transition: transform .15s ease; }
.drop:hover .drop-icon, .drop.over .drop-icon { transform: translateY(-3px); }
.drop.is-disabled .drop-icon { color: var(--muted); transform: none; }

/* ---- Optional field with an empty column: skip it or keep it blank ---- */
.map-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.btn-sm { padding: 8px 16px; font-size: .88rem; }
.map-actions .btn { background: var(--card); }
.is-kept .map-name { color: var(--muted); }
.map-summary .link { color: inherit; font-weight: 700; margin-left: 4px; }

/* ---- Locked preview: clear rows, then a fade into grey with the unlock card floating over it ---- */
.table-shell { position: relative; }
.table-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 230px; border-radius: 0 0 8px 8px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(244, 245, 247, 0) 0%, var(--bg) 82%);
}
.table-fade[hidden] { display: none; }
@media (prefers-color-scheme: dark) { .table-fade { background: linear-gradient(to bottom, rgba(16, 19, 23, 0) 0%, var(--bg) 82%); } }
.fade-row td { color: var(--muted); letter-spacing: .12em; user-select: none; }
.table-shell + .gate-banner {
  position: relative; z-index: 2; margin-top: -28px; background: var(--card);
  box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
}

/* ---- An uploaded file replaces the drop zone until it is removed ---- */
.drop[hidden] { display: none; }
.file-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.file-card[hidden] { display: none; }
.file-card-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.file-card-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.file-card-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; }
.file-card-text .muted { font-size: .88rem; }
.file-remove {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--text); font: 700 .9rem "Open Sans", Arial, sans-serif;
  letter-spacing: 0; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s;
}
.file-remove:hover { border-color: var(--err); color: var(--err); background: var(--err-bg); }
html.kbd .file-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 520px) {
  .file-card { flex-wrap: wrap; row-gap: 12px; }
  .file-card-text { flex: 1 1 calc(100% - 64px); }          /* the name gets the whole first line... */
  .file-remove { margin-left: 60px; }                        /* ...and Remove drops underneath it */
}
.map-actions .link { font-size: .9rem; }

/* ---- FAQs: one card per platform, titled "ACS Realm FAQs" / "ACS OnDemand FAQs" ---- */
.help { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px 12px; margin: 24px 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.help-platform { margin: 0 0 6px; font-size: 1.4rem; }
.help details:last-of-type { border-bottom: 0; }
@media (max-width: 560px) { .help { padding: 20px 20px 8px; } }

/* Narrow tablets and small phones: keep the top bar and step tracker inside the screen */
@media (max-width: 820px) {
  .steps li:not(.current) .step-label { display: none; }
}
@media (max-width: 380px) {
  .brand-name { font-size: 1rem; }
  .topnav a { padding: 8px 6px; font-size: .9rem; }
  .brand { gap: 8px; }
}
@media (max-width: 340px) {
  .brand-name { font-size: .9rem; }
  .brand-mark, .brand svg { width: 28px; height: 28px; }
  .topnav a { padding: 8px 4px; font-size: .85rem; }
  .steps li { font-size: .8rem; gap: 4px; }
  .steps li + li::before { width: 6px; margin: 0 3px 0 4px; }
  .step-num { width: 22px; height: 22px; }
}

/* Intro text block (also read by search engines) */
.prose h3 { margin: 28px 0 8px; font-size: 1.25rem; }
.prose h4 { margin: 20px 0 4px; font-size: 1.02rem; font-family: Barlow, "Open Sans", sans-serif; }
.prose h4 + p { margin-top: 0; }
.prose .shot { display: block; width: 100%; max-width: 560px; height: auto; margin: 20px auto; border: 1px solid var(--line); border-radius: 12px; }