[hidden] { display: none !important; }
:root {
  --ink: #0f1c2e; --ink-2: #425570; --ink-3: #6b7b91; --line: #dde4ee; --line-2: #eef2f8;
  --bg: #f3f6fb; --panel: #ffffff; --navy: #0b2447; --navy-2: #12356a;
  --accent: #1f5fd0; --accent-d: #1849a6; --accent-2: #e8f0fd; --cyan: #22b8d4;
  --err: #b42318; --err-bg: #fdecea; --warn: #9a5b00; --warn-bg: #fff4dc; --ok: #167a47; --ok-bg: #e6f6ed; --info: #2b5c9e; --info-bg: #eaf1fb;
  --closed: #d1352b; --detour: #2563eb; --repl: #167a47; --cand: #8a97a8; --conflict: #e08a00; --unlisted: #b26b00;
  --r: 14px; --shadow: 0 1px 2px rgba(15,28,46,.05), 0 6px 20px -8px rgba(15,28,46,.12);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--ink-3); } .small { font-size: 12px; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.logo { display: block; height: 30px; width: auto; }
.brand-div { width: 1px; height: 24px; background: var(--line); }
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: .01em; color: var(--navy); }
.brand-name span { color: var(--accent); }
.provenance { display: flex; gap: 8px; flex-wrap: wrap; }
.prov { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.prov b { color: var(--navy); font-weight: 650; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 36px; align-items: center; padding: 34px 28px 30px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(900px 340px at 85% -10%, rgba(34,184,212,.28), transparent 60%), radial-gradient(700px 300px at 0% 120%, rgba(31,95,208,.55), transparent 60%), linear-gradient(135deg, #081b3a, #0e2f63); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.hero > * { position: relative; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a9c7f5; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(34,184,212,.25); }
.hero h1 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.025em; font-weight: 800; margin: 10px 0 12px; max-width: 22ch; text-wrap: balance; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #7fd6ea, #8fb4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin: 0 0 18px; max-width: 62ch; color: #cfdcf2; font-size: 15px; line-height: 1.55; }
.catch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.catch-label { font-size: 12px; color: #9fb7dc; margin-right: 4px; font-weight: 600; }
.cx { font-size: 12.5px; padding: 5px 11px 5px 28px; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); color: #fff; position: relative; }
.cx::before { content: "!"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; border-radius: 50%; background: #f5b53d; color: #3b2a00; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.banner { padding: 7px 28px; font-size: 12.5px; background: #fff8e6; color: #5c4600; border-bottom: 1px solid #f0e2b6; }

/* ---------- stepper ---------- */
.steps { list-style: none; display: flex; gap: 0; margin: 0; padding: 12px 28px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; }
.steps li { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--ink-3); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: color .2s; }
.steps li + li::before { content: ""; width: 34px; height: 2px; margin: 0 12px; background: var(--line); border-radius: 2px; transition: background .3s; }
.steps li.done + li::before, .steps li.active::before { background: var(--ok); }
.steps li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); border: 1px solid var(--line); font-size: 11px; font-weight: 700; transition: all .2s; }
.steps li.active { color: var(--accent); }
.steps li.active span { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-2); }
.steps li.done { color: var(--ink-2); }
.steps li.done span { background: var(--ok); border-color: var(--ok); color: #fff; font-size: 0; }
.steps li.done span::after { content: "\2713"; font-size: 12px; }

/* ---------- layout ---------- */
.grid { display: grid; grid-template-columns: minmax(300px, 370px) minmax(320px, 1fr) minmax(390px, 480px); gap: 16px; padding: 18px 28px 28px; height: max(700px, calc(100vh - 56px)); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); min-height: 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 16px 6px; }
.panel-head h2 { font-size: 15px; }
.try { padding: 4px 16px 6px; }

.notice-panel { padding-bottom: 16px; }
.samples { display: grid; gap: 8px; padding: 0 16px 12px; }
.sample { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 12px; transition: border-color .15s, background .15s, box-shadow .15s; }
.sample:hover { border-color: #aebfdc; box-shadow: 0 2px 10px -4px rgba(15,28,46,.18); }
.sample[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-2); box-shadow: 0 0 0 3px rgba(31,95,208,.12); }
.sample .t { font-weight: 650; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sample .tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); white-space: nowrap; }
.sample .tag.bad { background: var(--warn-bg); color: var(--warn); }
.sample .b { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
#notice { flex: 1; min-height: 180px; margin: 0 16px; resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: 12px/1.55 var(--mono); color: var(--ink); background: #fafcff; }
.primary { margin: 12px 16px 0; padding: 12px; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #2f7bf0); color: #fff; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 16px -6px rgba(31,95,208,.7); transition: transform .1s, box-shadow .15s; }
.primary:hover { box-shadow: 0 8px 20px -6px rgba(31,95,208,.8); transform: translateY(-1px); }
.primary:disabled { background: #9db8e8; box-shadow: none; transform: none; cursor: progress; }

/* ---------- map ---------- */
.map-panel { position: relative; }
#map { position: absolute; inset: 0; background: #e9eef3; }
.map-empty { position: absolute; inset: 0; display: grid; place-items: center; z-index: 500; pointer-events: none; background: rgba(243,246,251,.55); backdrop-filter: blur(1.5px); }
.empty-card { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 20px 26px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); max-width: 320px; color: var(--ink-3); font-size: 12.5px; }
.empty-card b { color: var(--ink); font-size: 14px; }
.empty-card em { font-style: normal; color: var(--accent); font-weight: 650; }
.pin { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--closed); margin-bottom: 8px; position: relative; }
.pin::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; }
.legend { position: absolute; left: 12px; bottom: 12px; z-index: 600; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 11.5px; display: grid; gap: 3px; box-shadow: var(--shadow); }
.legend div { display: flex; align-items: center; gap: 7px; }
.lg { display: inline-block; width: 22px; height: 0; border-top: 4px solid; }
.lg.closed { border-color: var(--closed); }
.lg.detour { border-top: 4px dashed var(--detour); }
.lg.unlisted { border-top: 3px dashed #e0a400; }
.lg.dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid; margin: 0 5px; }
.lg.missed { border-color: var(--closed); background: #fff; }
.lg.repl { border-color: var(--repl); background: var(--repl); }
.lg.cand { border-color: var(--cand); background: #fff; }
.lg.conflict { border-color: var(--conflict); background: #fff3dc; box-shadow: 0 0 0 2px #ffd48a; }

/* ---------- results ---------- */
.results-panel { position: relative; }
.status { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #f8faff, #fff); border-left: 5px solid var(--line); }
.status.ok { border-left-color: var(--ok); background: linear-gradient(180deg, var(--ok-bg), #fff); }
.status.warn { border-left-color: #f0a400; background: linear-gradient(180deg, var(--warn-bg), #fff); }
.status.bad { border-left-color: var(--err); background: linear-gradient(180deg, var(--err-bg), #fff); }
.status-title { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.status.ok .status-title { color: var(--ok); } .status.bad .status-title { color: var(--err); } .status.warn .status-title { color: var(--warn); }
.chips { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 999px; }
.chip.error { background: var(--err-bg); color: var(--err); } .chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.pass { background: var(--ok-bg); color: var(--ok); } .chip.info { background: var(--info-bg); color: var(--info); }
.runstat { margin-top: 9px; font-size: 12px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.runstat b { color: var(--ink); font-weight: 700; }
.tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 10px 10px 9px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab-body { flex: 1; overflow: auto; padding: 12px 16px 16px; }

.group h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin: 12px 0 4px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.check .ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; margin-top: 1px; }
.check.error .ic { background: var(--err); color: #fff; } .check.warn .ic { background: #f0a400; color: #fff; }
.check.pass .ic { background: var(--ok-bg); color: var(--ok); } .check.info .ic { background: var(--info-bg); color: var(--info); }
.check .m { font-size: 13px; } .check.error .m { color: var(--err); font-weight: 650; } .check.warn .m { color: #6d4200; font-weight: 600; }
.check .d { font-size: 12px; color: var(--ink-3); margin-top: 1px; }

table.facts { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.facts th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 650; padding: 6px 4px; border-bottom: 1px solid var(--line); }
table.facts td { padding: 8px 4px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.facts td:first-child { color: var(--ink-2); width: 92px; font-weight: 650; }
.quote { font-size: 11.5px; color: var(--ink-2); background: #fff9e8; border-left: 3px solid #f2c94c; padding: 3px 7px; margin-top: 4px; font-family: var(--mono); white-space: pre-wrap; border-radius: 0 4px 4px 0; }
.null { color: var(--err); font-style: italic; }
.engine-badge { display: inline-block; font-size: 11.5px; padding: 3px 9px; border-radius: 6px; background: var(--info-bg); color: var(--info); margin-bottom: 6px; }

/* rider preview (draft tab) */
.rider { border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #f7faff, #fff); padding: 12px; margin-bottom: 14px; }
.rider-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 650; }
.grade { text-transform: none; letter-spacing: 0; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.grade.hi { background: var(--warn-bg); color: var(--warn); }
.bubble { background: #fff; border: 1px solid var(--line); border-left: 4px solid #f0a400; border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.45; box-shadow: 0 2px 8px -4px rgba(15,28,46,.2); }
.bubble .bt { font-size: 11px; font-weight: 700; color: #8a5a00; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }

.field { margin-bottom: 12px; }
.field label { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 650; margin-bottom: 4px; }
.field textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font: 13px/1.5 system-ui, sans-serif; color: var(--ink); resize: vertical; background: #fafcff; }
.field textarea[readonly] { background: #f6f8fb; }
.field textarea.editing { background: #fff; border-color: var(--accent); }
table.rt { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 12px; }
table.rt th, table.rt td { text-align: left; padding: 5px 4px; border-bottom: 1px solid var(--line-2); }
table.rt th { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.pill { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); font-weight: 650; }
.pill.no { background: var(--warn-bg); color: var(--warn); }
pre.json { font: 11.5px/1.45 var(--mono); background: #0b1626; color: #d6e2ef; padding: 12px; border-radius: 10px; overflow: auto; margin: 0; white-space: pre; }
.row-btns { display: flex; gap: 8px; margin-bottom: 8px; }
.link-btn { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 650; color: var(--ink-2); }
.link-btn:hover { border-color: var(--accent); color: var(--accent); }
.audit-item { display: grid; grid-template-columns: 70px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.audit-item time { color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 3px 10px; font-size: 12px; margin-bottom: 10px; }
.kv div:nth-child(odd) { color: var(--ink-3); }
.kv code { font-family: var(--mono); font-size: 11px; word-break: break-all; }

.review { border-top: 1px solid var(--line); padding: 12px 16px 14px; background: #fafbfe; }
.review-row { display: flex; align-items: center; gap: 8px; }
.review-row input, .override input[type=text], #overrideReason { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; }
.override { display: grid; gap: 6px; margin-top: 8px; padding: 9px; border: 1px dashed #e8b4ae; border-radius: 9px; background: #fff7f6; }
.review-actions { display: flex; gap: 8px; margin-top: 10px; }
.ghost { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 9px; padding: 9px 13px; font-weight: 650; }
.ghost:hover { border-color: #aebfdc; }
.approve { flex: 1; border: 0; border-radius: 9px; padding: 9px 13px; font-weight: 750; background: var(--ok); color: #fff; box-shadow: 0 6px 14px -8px rgba(22,122,71,.9); }
.approve:disabled { background: #c9d3dd; color: #64748b; cursor: not-allowed; box-shadow: none; }
.decision { margin-top: 8px; font-size: 12.5px; }
.decision .ok { color: var(--ok); font-weight: 650; } .decision .rej { color: var(--err); font-weight: 650; }

.stop-pop b { display: block; margin-bottom: 2px; } .stop-pop .s { color: var(--ink-3); font-size: 12px; }
.leaflet-container { font: inherit; }

/* ---------- login ---------- */
body.login { display: grid; place-items: center; min-height: 100vh; padding: 20px;
  background: radial-gradient(800px 400px at 80% 0%, rgba(34,184,212,.3), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(31,95,208,.55), transparent 60%), linear-gradient(135deg, #081b3a, #0e2f63); }
.login-card { width: min(420px, 100%); background: #fff; border-radius: 18px; padding: 30px 30px 24px; display: grid; gap: 12px; text-align: center; justify-items: center; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.login-card .logo { height: 34px; margin-bottom: 4px; }
.login-card .kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.login-card h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); line-height: 1.15; }
.login-card h1 em { font-style: normal; color: var(--accent); }
.login-card p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.login-card input { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; text-align: center; }
.login-card button { width: 100%; padding: 12px; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #2f7bf0); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 6px 16px -6px rgba(31,95,208,.7); }
.login-card .fine { font-size: 11.5px; color: var(--ink-3); } .login-card .err { color: var(--err); font-weight: 650; }

@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr; height: auto; }
  .map-panel { min-height: 400px; }
  .results-panel { min-height: 540px; }
  #notice { min-height: 240px; }
}
@media (max-width: 600px) {
  .top, .banner, .steps, .hero { padding-left: 16px; padding-right: 16px; }
  .grid { padding: 12px 16px 20px; }
      .brand-name { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* rejection rationale */
.reject-box { margin-top: 10px; padding: 11px; border: 1px solid #f0c9c4; border-radius: 10px; background: #fff7f6; display: grid; gap: 8px; }
.reject-box label { color: var(--ink-2); font-size: 12.5px; }
.reason-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reason-chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.reason-chips button:hover { border-color: var(--err); }
.reason-chips button[aria-pressed="true"] { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.reject-box textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: 13px/1.45 system-ui, sans-serif; resize: vertical; background: #fff; }
.reject-actions { display: flex; justify-content: flex-end; gap: 8px; }
.reject-confirm { border: 0; border-radius: 9px; padding: 9px 14px; font-weight: 700; background: var(--err); color: #fff; }
.reject-confirm:disabled { background: #e3c4c0; cursor: not-allowed; }
.decision .reason { margin-top: 6px; padding: 7px 10px; border-left: 3px solid var(--err); background: var(--err-bg); border-radius: 0 6px 6px 0; color: var(--ink); white-space: pre-wrap; }

/* hero example card */
.hero-card { border-radius: 16px; padding: 16px 18px 14px; background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 24px 50px -22px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.4); transform: rotate(.6deg); }
.hc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.hc-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; background: var(--accent-2); color: var(--accent); }
.hc-src { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.hc-title { margin: 0 0 10px; font-size: 16px; font-weight: 750; letter-spacing: -.01em; color: var(--navy); line-height: 1.3; }
.hc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hc-list li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start; padding: 8px 10px; border-radius: 9px; font-size: 13px; line-height: 1.4; }
.hc-list li i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; margin-top: 1px; }
.hc-list li.e { background: var(--err-bg); } .hc-list li.e i { background: var(--err); }
.hc-list li.w { background: var(--warn-bg); } .hc-list li.w i { background: #f0a400; }
.hc-foot { margin-top: 10px; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 1100px) { .hero { grid-template-columns: 1fr; } .hero-card { transform: none; max-width: 560px; } }