/* FinalCheck consumer view (/) — basic brand pass per brand/BRAND.md "Screen A".
   Every colour, radius, spacing step and font is a variable in this one :root block;
   to restyle, change the values here. Selectors below use only c- ids, c- classes and
   data-attributes (plus the elements inside them). */
:root {
  /* brand palette */
  --c-navy: #062B62;
  --c-blue: #1685EE;
  --c-mint: #2FC69B;
  --c-slate: #496B84;
  --c-red: #B63A3A;      /* BRAND.md refusal #D64545, darkened for light surfaces */
  --c-amber: #B16B13;    /* BRAND.md warning #E8A33D, darkened for light surfaces */
  --c-white: #FFFFFF;
  --c-navy-deep: #041F49;
  --c-shadow: rgba(6, 43, 98, .055);
  --c-panel-ink-muted: rgba(255, 255, 255, .7);
  --c-panel-line: rgba(255, 255, 255, .16);
  --c-orbit-inner: rgba(47, 198, 155, .28);
  --c-orbit-outer: rgba(255, 255, 255, .10);
  --c-orbit-fill: rgba(255, 255, 255, .06);
  --c-topbar-bg: rgba(255, 255, 255, .92);
  --c-orbit-size: 170px;
  --c-icon-size: 36px;
  --c-feed-icon-size: 40px;
  --c-avatar-size: 34px;
  --c-chat-avatar-size: 26px;

  /* roles */
  --c-bg: #F6FAFC;
  --c-surface: var(--c-white);
  --c-surface-alt: #EDF7FF;
  --c-line: #DCE8EF;
  --c-ink: #132F45;
  --c-heading: var(--c-navy);
  --c-ink-muted: #60798B;
  --c-ink-inverse: var(--c-white);
  --c-banner-bg: var(--c-navy);
  --c-banner-ink: #DCE6F2;
  --c-accent: var(--c-blue);
  --c-accent-hover: color-mix(in srgb, var(--c-blue) 88%, black);
  --c-accent-tint: color-mix(in srgb, var(--c-blue) 10%, var(--c-white));
  --c-accent-tint-strong: color-mix(in srgb, var(--c-blue) 30%, var(--c-white));
  --c-accent-ring: color-mix(in srgb, var(--c-blue) 40%, transparent);
  --c-ok: var(--c-mint);
  --c-ok-ink: #168A6D;
  --c-ok-tint: #EAFAF5;
  --c-ok-line: color-mix(in srgb, var(--c-mint) 45%, var(--c-white));
  --c-bad: var(--c-red);
  --c-bad-tint: color-mix(in srgb, var(--c-red) 5%, var(--c-white));
  --c-bad-line: color-mix(in srgb, var(--c-red) 40%, var(--c-white));
  --c-warn: var(--c-amber);
  --c-warn-tint: #FFF7E7;

  /* type */
  --c-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --c-text-xs: 12.5px;
  --c-text-sm: 14px;
  --c-text-md: 16px;
  --c-text-lg: 18px;
  --c-text-xl: 24px;
  --c-text-hero: 44px;
  --c-text-amount: 52px;
  --c-text-label: 11.5px;
  --c-weight-bold: 700;
  --c-weight-semi: 600;
  --c-leading: 1.5;

  /* shape + space */
  --c-radius-sm: 6px;
  --c-radius-md: 10px;
  --c-radius-lg: 22px;
  --c-radius-inner: 14px;
  --c-radius-bubble: 16px;
  --c-radius-pill: 999px;
  --c-space-1: 4px;
  --c-space-2: 8px;
  --c-space-3: 12px;
  --c-space-4: 16px;
  --c-space-5: 20px;
  --c-space-6: 32px;
  --c-column: 1080px;
  --c-panel-width: 300px;
  --c-logo-height: 40px;
  --c-border: 1px;
  --c-border-accent: 4px;
}

/* ── base ── */
body {
  margin: 0; padding: 0 var(--c-space-4) var(--c-space-6);
  background: var(--c-bg); color: var(--c-ink);
  font: var(--c-text-md) / var(--c-leading) var(--c-font);
}
#c-banner, #c-header, main, #c-footer { max-width: var(--c-column); margin-left: auto; margin-right: auto; }
#c-header p, main p { margin: 0 0 var(--c-space-3); }
.c-card h2 { font-size: var(--c-text-xl); margin: 0 0 var(--c-space-2); color: var(--c-heading); }
.c-card h3 { font-size: var(--c-text-md); margin: 0; color: var(--c-heading); }
.c-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── banner + header ── */
#c-banner {
  max-width: none; margin: 0 calc(-1 * var(--c-space-4)) var(--c-space-5);
  padding: var(--c-space-2) var(--c-space-4); text-align: center;
  background: var(--c-banner-bg); color: var(--c-banner-ink); font-size: var(--c-text-xs);
}
#c-header { margin-bottom: var(--c-space-5); }
.c-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--c-space-3); }
#c-logo { height: var(--c-logo-height); width: auto; display: block; }
#c-ops-link { font-size: var(--c-text-xs); color: var(--c-ink-muted); text-decoration: none; white-space: nowrap; }
#c-ops-link:hover { color: var(--c-accent); }
#c-tagline { margin: var(--c-space-3) 0 var(--c-space-1); font-size: var(--c-text-xl); font-weight: var(--c-weight-bold); color: var(--c-ink); }
.c-explainer { color: var(--c-ink-muted); }

/* ── cards ── */
main > p:empty { display: none; }
#c-boot-error { color: var(--c-bad); }
.c-card {
  background: var(--c-surface); border: var(--c-border) solid var(--c-line); border-radius: var(--c-radius-lg);
  padding: var(--c-space-4) var(--c-space-5); margin: 0 0 var(--c-space-4);
  box-shadow: 0 1px 2px var(--c-shadow);
}

/* ── buttons + inputs ── */
.c-card button {
  font: var(--c-weight-semi) var(--c-text-sm) var(--c-font); color: var(--c-ink-inverse); background: var(--c-accent);
  border: var(--c-border) solid var(--c-accent); border-radius: var(--c-radius-md);
  padding: var(--c-space-2) var(--c-space-4); cursor: pointer;
}
.c-card button:hover { background: var(--c-accent-hover); }
.c-card button:disabled { opacity: .5; cursor: not-allowed; }
.c-card button:focus-visible, .c-card input:focus-visible, .c-card select:focus-visible {
  outline: 3px solid var(--c-accent-ring); outline-offset: 2px;
}
.c-card button.c-ghost { background: transparent; color: var(--c-accent); border-color: var(--c-accent-tint-strong); }
.c-card button.c-ghost:hover { background: var(--c-accent-tint); }
.c-card button.c-danger { background: transparent; color: var(--c-bad); border-color: var(--c-bad-line); }
.c-card button.c-danger:hover { background: var(--c-bad-tint); }
.c-card select, .c-hero select {
  font: inherit; color: var(--c-ink); background: var(--c-surface);
  border: var(--c-border) solid var(--c-line); border-radius: var(--c-radius-sm); padding: var(--c-space-1) var(--c-space-2);
}

/* ── protection ── */
#c-protection-status {
  display: inline-flex; align-items: center; gap: var(--c-space-2);
  background: var(--c-ok-tint); color: var(--c-ok-ink); border: var(--c-border) solid var(--c-ok-line);
  padding: var(--c-space-1) var(--c-space-3); border-radius: var(--c-radius-pill); font-size: var(--c-text-sm);
}
#c-protection-status::before {
  content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none;
  background: var(--c-ok); color: var(--c-ink-inverse); border-radius: var(--c-radius-pill);
  font-size: var(--c-text-xs);
}
.c-region-row { display: flex; align-items: center; gap: var(--c-space-2); color: var(--c-ink-muted); font-size: var(--c-text-sm); }
#c-bullets { list-style: none; padding: 0; margin: var(--c-space-1) 0 var(--c-space-3); }
#c-bullets li { padding: var(--c-space-1) 0; border-bottom: var(--c-border) dashed var(--c-line); }
#c-bullets li:last-child { border-bottom: 0; }
#c-protection-note, #c-pause-note, #c-mandate-note, #c-activity-status { color: var(--c-ink-muted); font-size: var(--c-text-sm); }

.c-toggle-row { display: flex; align-items: flex-start; gap: var(--c-space-2); margin: var(--c-space-3) 0 var(--c-space-1); }
.c-toggle-row input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--c-accent); flex: none; }
#c-pause { accent-color: var(--c-warn); }
body[data-paused="1"] #c-pause-note {
  color: var(--c-warn); font-weight: var(--c-weight-semi); background: var(--c-warn-tint);
  border-left: var(--c-border-accent) solid var(--c-warn); padding: var(--c-space-2) var(--c-space-3); border-radius: var(--c-radius-sm);
}

/* ── mandate: active card ── */
#c-mandate-active {
  border: var(--c-border) solid var(--c-ok-line); background: var(--c-ok-tint);
  border-radius: var(--c-radius-md); padding: var(--c-space-3) var(--c-space-4);
}
#c-mandate-summary { font-weight: var(--c-weight-bold); font-size: var(--c-text-lg); }

/* ── mandate conversation ── */
#c-chat-log { list-style: none; padding: 0; margin: 0 0 var(--c-space-3); display: flex; flex-direction: column; gap: var(--c-space-2); }
#c-chat-log li { max-width: 85%; padding: var(--c-space-2) var(--c-space-3); border-radius: var(--c-radius-bubble); }
#c-chat-log li[data-who="finalcheck"] { align-self: flex-start; background: var(--c-surface-alt); color: var(--c-ink); border-bottom-left-radius: var(--c-space-1); }
#c-chat-log li[data-who="you"] { align-self: flex-end; background: var(--c-accent); color: var(--c-ink-inverse); border-bottom-right-radius: var(--c-space-1); }
#c-chat-log li b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#c-chat-replies { display: flex; flex-wrap: wrap; gap: var(--c-space-2); margin: 0 0 var(--c-space-3); }
#c-chat-replies:empty { display: none; }
#c-chat-replies button { background: var(--c-surface); color: var(--c-accent); border-radius: var(--c-radius-pill); padding: var(--c-space-1) var(--c-space-3); }
#c-chat-replies button:hover { background: var(--c-accent); color: var(--c-ink-inverse); }
#c-chat-form { display: flex; gap: var(--c-space-2); }
#c-chat-input {
  flex: 1; min-width: 0; font: inherit; color: var(--c-ink); background: var(--c-surface);
  border: var(--c-border) solid var(--c-line); border-radius: var(--c-radius-pill); padding: var(--c-space-2) var(--c-space-4);
}
#c-chat-send { border-radius: var(--c-radius-pill); }

#c-chat-preview { margin-top: var(--c-space-4); border: var(--c-border) solid var(--c-line); border-radius: var(--c-radius-md); padding: var(--c-space-3) var(--c-space-4); background: var(--c-bg); }
#c-chat-rows { list-style: none; padding: 0; margin: 0 0 var(--c-space-1); display: flex; flex-wrap: wrap; gap: var(--c-space-2); }
#c-chat-rows li {
  font: var(--c-weight-semi) var(--c-text-xs) var(--c-font); color: var(--c-ink);
  background: var(--c-accent-tint); border: var(--c-border) solid var(--c-accent-tint-strong);
  padding: var(--c-space-1) var(--c-space-3); border-radius: var(--c-radius-sm);
}
#c-chat-rows li.c-default { font-weight: normal; background: transparent; color: var(--c-ink-muted); border-style: dashed; border-color: var(--c-line); }
#c-chat-actions { display: flex; gap: var(--c-space-2); margin: var(--c-space-3) 0 0; }

.c-skip-row { margin-top: var(--c-space-3); }
#c-mandate-error { color: var(--c-bad); font-size: var(--c-text-sm); }
#c-skip-confirm { color: var(--c-ok-ink); font-size: var(--c-text-sm); }

/* ── activity feed ── */
#c-agent-hint {
  display: inline-block; font-size: var(--c-text-xs); font-weight: var(--c-weight-semi); color: var(--c-accent);
  background: var(--c-accent-tint); border-radius: var(--c-radius-pill); padding: var(--c-space-1) var(--c-space-3);
}
#c-agent-hint[hidden] { display: none; }
#c-activity { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--c-space-2); }
#c-activity li {
  padding: var(--c-space-2) var(--c-space-3); background: var(--c-surface);
  border: var(--c-border) solid var(--c-line); border-left-width: var(--c-border-accent); border-radius: var(--c-radius-md);
}
#c-activity li[data-kind="receipt"] { border-left-color: var(--c-ok); }
#c-activity li[data-kind="refusal"] { border-left-color: var(--c-bad); background: var(--c-bad-tint); }
#c-activity li[data-kind="order"] { border-left-color: var(--c-accent); }
#c-activity time { display: block; color: var(--c-ink-muted); font-size: var(--c-text-xs); }

/* ── footer ── */
#c-footer { text-align: center; color: var(--c-ink-muted); font-size: var(--c-text-xs); margin-top: var(--c-space-2); }

/* ── Figma design pass: hero, protection tiles, chat + navy side panel ── */
.c-eyebrow { font-size: var(--c-text-label); font-weight: var(--c-weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 var(--c-space-2); }
.c-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--c-space-4); flex-wrap: wrap; margin: var(--c-space-2) 0 var(--c-space-5); }
.c-hero-title { font-size: var(--c-text-hero); font-weight: var(--c-weight-semi); letter-spacing: -.02em; line-height: 1.1; color: var(--c-heading); margin: 0 0 var(--c-space-2); }
.c-hero-sub { color: var(--c-ink-muted); margin: 0 0 var(--c-space-3); }
.c-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--c-space-2); }
.c-hero-side #c-protection-status { margin: 0; }
.c-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--c-space-3); margin-bottom: var(--c-space-3); }
.c-badge { white-space: nowrap; font-size: var(--c-text-xs); font-weight: var(--c-weight-semi); color: var(--c-ok-ink); background: var(--c-ok-tint); border-radius: var(--c-radius-pill); padding: var(--c-space-1) var(--c-space-3); }
#c-bullets { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--c-space-3); margin: 0 0 var(--c-space-3); }
#c-bullets li {
  position: relative; border: var(--c-border) solid var(--c-line); border-radius: var(--c-radius-inner);
  padding: var(--c-space-3) var(--c-space-6) var(--c-space-3) var(--c-space-3); font-size: var(--c-text-sm); background: var(--c-surface);
}
#c-bullets li:last-child { border-bottom: var(--c-border) solid var(--c-line); }
#c-bullets li::after {
  content: "✓"; position: absolute; top: var(--c-space-2); right: var(--c-space-2);
  width: 18px; height: 18px; display: grid; place-items: center; font-size: var(--c-text-label);
  background: var(--c-ok); color: var(--c-ink-inverse); border-radius: var(--c-radius-pill);
}
#c-mandate h2 { font-size: var(--c-text-hero); font-weight: var(--c-weight-semi); letter-spacing: -.02em; line-height: 1.1; }
#c-mandate-form { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--c-space-5); row-gap: var(--c-space-2); align-items: start; }
#c-mandate-form > * { min-width: 0; }
#c-mandate-error:empty { display: none; }
#c-mandate-form:has(#c-chat-preview:not([hidden])) { grid-template-columns: minmax(0, 1fr) var(--c-panel-width); }
#c-mandate-form > :not(#c-chat):not(#c-chat-preview) { grid-column: 1; }
#c-chat-preview, #c-mandate-active {
  grid-column: 2; grid-row: 1 / span 4; margin: 0;
  background: radial-gradient(circle at 80% 10%, var(--c-blue), transparent 60%), var(--c-navy-deep);
  color: var(--c-ink-inverse); border: 0; border-radius: var(--c-radius-lg); padding: var(--c-space-5);
}
#c-mandate-active { max-width: var(--c-panel-width); }
#c-chat-preview h3, #c-mandate-active #c-mandate-summary { color: var(--c-ink-inverse); }
#c-chat-preview h3 { font-size: var(--c-text-label); letter-spacing: .08em; text-transform: uppercase; color: var(--c-panel-ink-muted); margin-bottom: var(--c-space-3); }
#c-chat-rows { flex-direction: column; }
#c-chat-rows li { background: transparent; color: var(--c-ink-inverse); border-color: var(--c-panel-line); }
#c-chat-rows li[data-field="max_amount"]:not(.c-default) { font-size: var(--c-text-amount); font-weight: var(--c-weight-bold); letter-spacing: -.02em; border: 0; padding: 0; }
#c-chat-rows li.c-default { color: var(--c-panel-ink-muted); border-color: var(--c-panel-line); }
#c-mandate-active #c-mandate-note { color: var(--c-panel-ink-muted); }
#c-chat-actions .c-ghost { color: var(--c-ink-inverse); border-color: var(--c-panel-line); }
#c-mandate-active .c-danger { color: var(--c-ink-inverse); border-color: var(--c-panel-line); }
#c-chat-log li[data-who="finalcheck"] { border: var(--c-border) solid var(--c-line); }
#c-header { display: block; }

/* ── Figma pass 2: topbar, promise tiles, limit orbit, chat avatar, composer, activity rows ── */
#c-header {
  max-width: none; margin: 0 calc(-1 * var(--c-space-4)) var(--c-space-5);
  padding: var(--c-space-3) max(var(--c-space-4), calc((100vw - var(--c-column)) / 2));
  background: var(--c-topbar-bg); border-bottom: var(--c-border) solid var(--c-line);
}
#c-banner { margin-bottom: 0; }
.c-topnav { display: flex; align-items: center; gap: var(--c-space-4); }
.c-topnav-link { color: var(--c-heading); font-weight: var(--c-weight-semi); font-size: var(--c-text-sm); text-decoration: none; }
.c-topnav-link:hover { color: var(--c-accent); }
.c-avatar {
  width: var(--c-avatar-size); height: var(--c-avatar-size); border-radius: var(--c-radius-pill);
  display: grid; place-items: center; background: var(--c-navy); color: var(--c-ink-inverse);
  font-size: var(--c-text-label); font-weight: var(--c-weight-bold);
}
#c-tagline { font-size: var(--c-text-sm); font-weight: var(--c-weight-semi); color: var(--c-heading); margin: 0; }

#c-bullets { gap: 0; border: var(--c-border) solid var(--c-line); border-radius: var(--c-radius-inner); overflow: hidden; }
#c-bullets li, #c-bullets li:last-child {
  display: flex; flex-direction: column; gap: var(--c-space-1);
  border: 0; border-right: var(--c-border) solid var(--c-line); border-radius: 0;
  padding: var(--c-space-4) var(--c-space-4) var(--c-space-4);
}
#c-bullets li:last-child { border-right: 0; }
.c-tile-icon {
  width: var(--c-icon-size); height: var(--c-icon-size); display: grid; place-items: center;
  background: var(--c-surface-alt); color: var(--c-accent); border-radius: var(--c-radius-md); margin-bottom: var(--c-space-2);
}
.c-tile-title { color: var(--c-heading); font-size: var(--c-text-sm); }
.c-tile-sub { color: var(--c-ink-muted); font-size: var(--c-text-xs); line-height: 1.4; }

#c-chat-rows li[data-field="max_amount"]:not(.c-default) {
  width: var(--c-orbit-size); height: var(--c-orbit-size); margin: calc(var(--c-space-6) + var(--c-space-5)) auto calc(var(--c-space-6) + var(--c-space-3));
  display: grid; place-content: center; text-align: center; border-radius: var(--c-radius-pill);
  background: var(--c-orbit-fill); font-size: var(--c-text-amount); line-height: 1;
  box-shadow: 0 0 0 22px var(--c-navy-deep), 0 0 0 23px var(--c-orbit-inner), 0 0 0 50px var(--c-navy-deep), 0 0 0 51px var(--c-orbit-outer);
}
#c-chat-rows li[data-field="max_amount"]:not(.c-default)::before {
  content: "Your spend limit"; display: block; margin-bottom: var(--c-space-2);
  font-size: var(--c-text-label); font-weight: var(--c-weight-semi); letter-spacing: .04em; color: var(--c-panel-ink-muted);
}
#c-chat-preview { overflow: hidden; }

#c-chat-log li[data-who="finalcheck"] { position: relative; margin-left: calc(var(--c-chat-avatar-size) + var(--c-space-2)); }
#c-chat-log li[data-who="finalcheck"]::before {
  content: "✓"; position: absolute; left: calc(-1 * (var(--c-chat-avatar-size) + var(--c-space-2))); top: var(--c-space-1);
  width: var(--c-chat-avatar-size); height: var(--c-chat-avatar-size); display: grid; place-items: center;
  background: var(--c-ok); color: var(--c-ink-inverse); border-radius: var(--c-radius-sm); font-size: var(--c-text-xs);
}
#c-chat-form {
  border: var(--c-border) solid var(--c-line); border-radius: var(--c-radius-inner);
  background: var(--c-surface); padding: var(--c-space-2); box-shadow: 0 1px 2px var(--c-shadow);
}
#c-chat-input { border: 0; border-radius: var(--c-radius-sm); padding: var(--c-space-2); }
#c-chat-input:focus-visible { outline: 0; }
#c-chat-form:focus-within { border-color: var(--c-accent); }
#c-chat-send { border-radius: var(--c-radius-md); }

#c-activity { gap: 0; }
#c-activity li, #c-activity li[data-kind] {
  display: flex; align-items: center; gap: var(--c-space-3);
  background: transparent; border: 0; border-bottom: var(--c-border) solid var(--c-line); border-radius: 0;
  padding: var(--c-space-3) 0;
}
#c-activity li:last-child { border-bottom: 0; }
.c-feed-icon {
  flex: none; width: var(--c-feed-icon-size); height: var(--c-feed-icon-size); border-radius: var(--c-radius-pill);
  display: grid; place-items: center; font-size: var(--c-text-sm); background: var(--c-ok-tint); color: var(--c-ok-ink);
}
#c-activity li[data-kind="refusal"] .c-feed-icon { background: var(--c-bad-tint); color: var(--c-bad); }
#c-activity li[data-kind="order"] .c-feed-icon { background: var(--c-surface-alt); color: var(--c-accent); }
.c-feed-body { display: flex; flex-direction: column; min-width: 0; }
.c-feed-title { color: var(--c-heading); font-size: var(--c-text-sm); }
.c-feed-meta { color: var(--c-ink-muted); font-size: var(--c-text-xs); }
#c-activity .c-feed-meta time { display: inline; font-size: inherit; }

/* ── how it works + CTA + note ── */
html { scroll-behavior: smooth; }
.c-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--c-space-4); margin-top: var(--c-space-4); }
.c-cta {
  background: var(--c-accent); color: var(--c-ink-inverse); text-decoration: none; font-weight: var(--c-weight-semi);
  padding: var(--c-space-2) var(--c-space-4); border-radius: var(--c-radius-md);
}
.c-cta:hover { background: var(--c-accent-hover); }
.c-cta-link { color: var(--c-accent); font-weight: var(--c-weight-semi); text-decoration: none; }
.c-steps { list-style: none; padding: 0; margin: 0 0 var(--c-space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--c-space-3); }
.c-steps li {
  display: flex; flex-direction: column; gap: var(--c-space-1);
  background: var(--c-surface); border: var(--c-border) solid var(--c-line); border-radius: var(--c-radius-inner);
  padding: var(--c-space-4);
}
.c-step-icon {
  width: var(--c-chat-avatar-size); height: var(--c-chat-avatar-size); display: grid; place-items: center; margin-bottom: var(--c-space-1);
  background: var(--c-navy); color: var(--c-ink-inverse); border-radius: var(--c-radius-pill); font-size: var(--c-text-xs); font-weight: var(--c-weight-bold);
}
.c-steps strong { color: var(--c-heading); font-size: var(--c-text-sm); }
.c-steps span:last-child { color: var(--c-ink-muted); font-size: var(--c-text-xs); line-height: 1.45; }
.c-note {
  background: var(--c-surface-alt); border: var(--c-border) solid var(--c-accent-tint-strong); border-radius: var(--c-radius-inner);
  padding: var(--c-space-3) var(--c-space-4); font-size: var(--c-text-sm); color: var(--c-ink);
}
.c-note strong { color: var(--c-heading); }

/* ── legal basis ── */
.c-tile-law { color: var(--c-ink-muted); font-size: var(--c-text-label); margin-top: var(--c-space-1); opacity: .85; }
.c-backed { color: var(--c-ink-muted); font-size: var(--c-text-xs); margin: 0 0 var(--c-space-3); }
.c-backed:empty { display: none; }

@media (max-width: 760px) {
  #c-mandate-form:has(#c-chat-preview:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  #c-chat-preview, #c-mandate-active { grid-column: 1; grid-row: auto; max-width: none; }
  .c-hero-title, #c-mandate h2 { font-size: var(--c-text-xl); }
  .c-hero-side { align-items: flex-start; }
  .c-topnav-link { display: none; }
  #c-bullets li, #c-bullets li:last-child { border-right: 0; border-bottom: var(--c-border) solid var(--c-line); }
}

@media (max-width: 480px) {
  #c-tagline { font-size: var(--c-text-lg); }
  .c-card { padding: var(--c-space-3) var(--c-space-4); }
  #c-chat-log li { max-width: 92%; }
  #c-chat-actions button, .c-skip-row button { flex: 1; }
}

/* Explainer video (made with Fotor) */
#c-explainer h3 { margin: 0 0 var(--c-space-3); color: var(--c-heading); }
#c-explainer-video { display: block; width: 100%; height: auto; border-radius: var(--c-radius-md); background: var(--c-navy-deep); }
.c-explainer-credit { margin: var(--c-space-2) 0 0; color: var(--c-ink-muted); font-size: var(--c-text-sm); }