/**
 * The platform UI kit (D-091) — the components every platform page is built from:
 * the operator console today, the agency sign-up pages next.
 *
 * KEEP-on-clone. Colours, type and shape come ONLY from the theme's tokens
 * (brand/themes/<id>/tokens.css, the platform's is `slate`), so a theme change
 * restyles every page and dark mode needs no rules of its own. Class names are
 * prefixed `ui-` so this can sit beside any other stylesheet without a clash.
 *
 * The patterns are the standard ones (GOV.UK Design System, Material): a label
 * above every field, hint text under it, an error summary plus the message beside
 * the field, one primary action, destructive actions that look destructive,
 * status in words as well as colour. WCAG 2.1 AA; usable from 360 px wide.
 */

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` always wins — a component's own display rule must never reveal what a page hid. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal);
  color: var(--ink); background: var(--paper-tint);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: var(--leading-tight); margin: 0; }
p { margin: 0 0 var(--sp-3); }
a { color: var(--gold-deep); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
code, .ui-mono { font-family: var(--font-mono); font-size: 0.92em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.ui-skip { position: absolute; left: -9999px; top: 0; }
.ui-skip:focus { left: var(--sp-4); top: var(--sp-3); z-index: 10; background: var(--paper); padding: var(--sp-2) var(--sp-3); }
.ui-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.ui-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 60px; padding: 0 var(--sp-5);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.ui-brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--ink); text-decoration: none; font-weight: 600; }
.ui-brand img { width: 28px; height: 28px; display: block; }
.ui-brand__area { font-weight: 500; color: var(--ink-muted); padding-left: var(--sp-3); border-left: 1px solid var(--line-strong); }
.ui-nav { display: flex; gap: var(--sp-1); margin-left: var(--sp-4); }
.ui-nav a {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: var(--text-sm);
}
.ui-nav a:hover { background: var(--paper-tint); color: var(--ink); }
.ui-nav a[aria-current='page'] { background: var(--gold-wash); color: var(--gold-deep); }
.ui-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.ui-who { font-size: var(--text-sm); color: var(--ink-soft); }
.ui-who strong { color: var(--ink); font-weight: 600; }
.ui-header form { margin: 0; }

/* ── Page ─────────────────────────────────────────────────────────────────── */
.ui-main { width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-10); flex: 1; }
.ui-main--narrow { max-width: 460px; padding-top: var(--sp-8); }
/* The public sign-up pages (D-097): the details form is wider than a sign-in card. */
.ui-main--form { max-width: 680px; padding-top: var(--sp-7, var(--sp-6)); }
.ui-step { margin: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.ui-center { text-align: center; margin-top: var(--sp-5); }
.ui-stack-gap { margin-top: var(--sp-5); }
/* The bot trap: off-screen for people, still in the form for a bot to fill. */
/* Applications (D-099): the count beside the menu item, filter tabs, a history list, a logo preview. */
.ui-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; margin-left: .25rem;
  border-radius: 999px; background: var(--warn); color: #fff; font-size: var(--text-xs); font-weight: 700; line-height: 1; }
.ui-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.ui-tabs a { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); color: var(--ink-soft); text-decoration: none;
  font-weight: 500; font-size: var(--text-sm); border: 1px solid var(--line); background: var(--paper); }
.ui-tabs a[aria-current='page'] { border-color: var(--gold); color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
.ui-timeline { list-style: none; margin: 0; padding: 0; }
.ui-timeline li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.ui-timeline li:last-child { border-bottom: 0; }
.ui-app-logo { height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.ui-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ui-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.ui-page-head__text { flex: 1 1 22rem; min-width: 0; }
.ui-page-head h1 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; }
.ui-page-head p { color: var(--ink-muted); margin: var(--sp-2) 0 0; max-width: 46rem; }
.ui-page-head__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ui-back { display: inline-flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-3); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.ui-back::before { content: '←'; }
.ui-title-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ui-footer { padding: var(--sp-5); text-align: center; color: var(--ink-muted); font-size: var(--text-xs); }

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.ui-stack > * + * { margin-top: var(--sp-5); }
.ui-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ui-cols { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ui-muted { color: var(--ink-muted); }
.ui-small { font-size: var(--text-sm); }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.ui-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--sp-5);
}
.ui-card > :last-child { margin-bottom: 0; }
.ui-card__head { margin-bottom: var(--sp-4); }
.ui-card__head h2 { font-size: var(--text-lg); font-weight: 600; }
.ui-card__head p { color: var(--ink-muted); font-size: var(--text-sm); margin: var(--sp-1) 0 0; }
.ui-card--flush { padding: 0; overflow: hidden; }
.ui-card--flush .ui-card__head { padding: var(--sp-5) var(--sp-5) 0; }
.ui-card--danger { border-color: color-mix(in srgb, var(--urgent) 35%, var(--line)); }
.ui-card--danger .ui-card__head h2 { color: var(--urgent); }
a.ui-card { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.ui-card:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.ui-stat { font-size: var(--text-3xl); font-weight: 600; line-height: 1; margin: var(--sp-3) 0 var(--sp-2); color: var(--ink); }
.ui-stat-label { font-weight: 600; }
.ui-divider { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.ui-form { max-width: 34rem; }
.ui-field { margin: 0 0 var(--sp-5); }
.ui-field--error { border-left: 4px solid var(--urgent); padding-left: var(--sp-4); }
.ui-label { display: block; font-weight: 600; margin-bottom: var(--sp-1); color: var(--ink); }
.ui-label__optional { font-weight: 400; color: var(--ink-muted); }
.ui-hint { display: block; color: var(--ink-muted); font-size: var(--text-sm); margin-bottom: var(--sp-2); }
.ui-error-msg { display: block; color: var(--urgent); font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--sp-2); }
.ui-error-msg::before { content: 'Error: '; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ui-input, .ui-select {
  display: block; width: 100%; min-height: 44px; padding: 0.55rem 0.75rem;
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.ui-input::placeholder { color: var(--ink-faint); }
.ui-input:hover, .ui-select:hover { border-color: var(--ink-muted); }
.ui-input:focus, .ui-select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent);
}
.ui-input[aria-invalid='true'], .ui-select[aria-invalid='true'] { border-color: var(--urgent); border-width: 2px; }
.ui-input--short { max-width: 16rem; }
/* D-097: a multi-line box, a group of tick boxes under one question, and the German
   words a screen reader hears before an error. */
.ui-textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.ui-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ui-fieldset > legend { padding: 0; }
.ui-check-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
:lang(de) .ui-error-msg::before { content: 'Fehler: '; }
.ui-input--medium { max-width: 24rem; }
.ui-select { appearance: none; padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.ui-check { display: flex; gap: var(--sp-3); align-items: flex-start; }
.ui-check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--gold); }
.ui-check label { font-weight: 500; }
.ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
/* A value to copy and its button, side by side; stacked on a phone (D-096). */
.ui-copy { display: flex; gap: var(--sp-2); align-items: stretch; margin-top: var(--sp-2); }
.ui-copy .ui-input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--text-sm); }
@media (max-width: 560px) { .ui-copy { flex-direction: column; } }
.ui-inline-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-start; }
.ui-inline-form .ui-field { margin: 0; flex: 1 1 14rem; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0.55rem 1.1rem; border-radius: var(--radius);
  font: inherit; font-weight: 600; font-size: var(--text-sm); line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.ui-btn--primary { background: var(--action-bg); color: var(--action-fg); }
.ui-btn--primary:hover { background: var(--gold-hover); }
.ui-btn--secondary { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.ui-btn--secondary:hover { border-color: var(--ink-muted); background: var(--paper-tint); }
.ui-btn--danger { background: var(--urgent); color: #FFFFFF; }
.ui-btn--danger:hover { filter: brightness(0.93); }
.ui-btn--quiet { background: transparent; color: var(--gold-deep); padding-left: var(--sp-2); padding-right: var(--sp-2); }
.ui-btn--quiet:hover { background: var(--gold-wash); }
.ui-btn--small { min-height: 36px; padding: 0.35rem 0.75rem; }
.ui-btn[disabled], .ui-btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; filter: none; }
.ui-btn[aria-busy='true']::after {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-btn[aria-busy='true']::after { animation: none; } }

/* ── Notices and the error summary ────────────────────────────────────────── */
.ui-notice {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-5);
  border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius);
  background: var(--paper);
}
.ui-notice__icon { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--paper); margin-top: 2px; }
.ui-notice__body > :last-child { margin-bottom: 0; }
.ui-notice strong { display: block; margin-bottom: 2px; }
.ui-notice--success { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, var(--paper)); }
.ui-notice--success .ui-notice__icon { background: var(--ok); }
.ui-notice--info { border-left-color: var(--gold); background: var(--gold-wash); }
.ui-notice--info .ui-notice__icon { background: var(--gold); }
.ui-notice--warning { border-left-color: var(--warn); background: var(--warn-wash); }
.ui-notice--warning .ui-notice__icon { background: var(--warn); }
.ui-notice--error { border-left-color: var(--urgent); background: color-mix(in srgb, var(--urgent) 6%, var(--paper)); }
.ui-notice--error .ui-notice__icon { background: var(--urgent); }
.ui-error-summary {
  border: 3px solid var(--urgent); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5); background: var(--paper);
}
.ui-error-summary:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.ui-error-summary h2 { font-family: var(--font-ui); font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--sp-2); }
.ui-error-summary ul { margin: 0; padding-left: var(--sp-5); }
.ui-error-summary a { color: var(--urgent); font-weight: 600; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.ui-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; line-height: 1.6;
  white-space: nowrap; border: 1px solid transparent;
}
.ui-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-badge--neutral { color: var(--ink-soft); background: var(--paper-tint); border-color: var(--line); }
.ui-badge--neutral::before { display: none; }
.ui-badge--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--paper)); }
.ui-badge--warn { color: var(--warn); background: var(--warn-wash); }
.ui-badge--danger { color: var(--urgent); background: color-mix(in srgb, var(--urgent) 10%, var(--paper)); }
.ui-badge--muted { color: var(--ink-muted); background: var(--paper-tint); border-color: var(--line); }
.ui-badge--accent { color: var(--gold-deep); background: var(--gold-wash); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.ui-table-wrap { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ui-table th {
  text-align: left; font-weight: 600; font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-muted); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--paper-tint);
}
.ui-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover { background: color-mix(in srgb, var(--paper-tint) 60%, var(--paper)); }
.ui-table td.ui-table__actions { text-align: right; white-space: nowrap; }
.ui-table__primary { font-weight: 600; color: var(--ink); }
.ui-table__primary a { color: var(--ink); text-decoration: none; }
.ui-table__primary a:hover { color: var(--gold-deep); text-decoration: underline; }
.ui-table__sub { display: block; color: var(--ink-muted); font-size: var(--text-xs); margin-top: 2px; }

/* ── Disclosure: a secondary action that opens a small form in place ──────── */
.ui-disclosure { display: inline-block; text-align: left; }
.ui-disclosure > summary { list-style: none; }
.ui-disclosure > summary::-webkit-details-marker { display: none; }
.ui-disclosure > summary::after { content: '▾'; font-size: 0.8em; }
.ui-disclosure[open] > summary::after { content: '▴'; }
.ui-disclosure__panel {
  margin-top: var(--sp-2); padding: var(--sp-4); width: min(22rem, 80vw);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.ui-disclosure__panel .ui-field { margin-bottom: var(--sp-3); }

/* ── Checklist: what something still needs ───────────────────────────────── */
.ui-checklist { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.ui-check-item { display: flex; gap: var(--sp-2); padding: 2px 0; }
.ui-check-item--done > span:first-child { color: var(--ok); font-weight: 700; }
.ui-check-item--todo { color: var(--ink); }
.ui-check-item--todo > span:first-child { color: var(--warn); font-weight: 700; }

/* ── Logo upload ───────────────────────────────────────────────────────────── */
.ui-logo__current { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
/* The logo's one display slot (D-103): 32 px tall, at most 160 px wide — as on the agency's site.
   The current logo is also shown on a dark header, where a logo drawn for a light one can vanish. */
.ui-logo__current img, .ui-logo__preview {
  display: block; height: 32px; width: auto; max-width: 160px; object-fit: contain; box-sizing: content-box;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.ui-logo__current img.ui-logo--dark { background: var(--ink); border-color: var(--ink); }
.ui-logo__preview { margin-top: var(--sp-3); }
[data-logo-status][data-state='error'] { color: var(--urgent); font-weight: 600; }

/* ── Key/value list, empty state ──────────────────────────────────────────── */
.ui-dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--sp-2) var(--sp-5); margin: 0; }
.ui-dl dt { color: var(--ink-muted); font-size: var(--text-sm); }
.ui-dl dd { margin: 0; }
.ui-empty { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--ink-muted); }
.ui-empty h3 { font-family: var(--font-ui); font-size: var(--text-base); color: var(--ink); margin-bottom: var(--sp-2); }

/* ── Theme toggle ─────────────────────────────────────────────────────────── */
.ui-theme { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius);
  background: transparent; border: 1px solid transparent; color: var(--ink-soft); cursor: pointer; }
.ui-theme:hover { background: var(--paper-tint); border-color: var(--line); }
.ui-theme svg { width: 18px; height: 18px; fill: currentColor; }
.ui-theme .moon { display: none; }
:root[data-theme='dark'] .ui-theme .sun { display: none; }
:root[data-theme='dark'] .ui-theme .moon { display: block; }

/* ── Sign-in and other centred pages ──────────────────────────────────────── */
.ui-auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); text-align: center; }
.ui-auth-brand img { width: 44px; height: 44px; }
.ui-auth-brand h1 { font-size: var(--text-xl); font-weight: 600; }
.ui-auth-brand p { color: var(--ink-muted); margin: 0; font-size: var(--text-sm); }

/* ── Small screens ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .ui-header { flex-wrap: wrap; padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); }
  .ui-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .ui-brand__area, .ui-who { display: none; }
  .ui-main { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .ui-cols { grid-template-columns: 1fr; }
  .ui-card { padding: var(--sp-4); }
  .ui-page-head h1 { font-size: var(--text-xl); }
  /* Tables become one card per row, each value labelled. */
  .ui-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ui-table, .ui-table tbody, .ui-table tr, .ui-table td { display: block; width: 100%; }
  .ui-table tr { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
  .ui-table td { border: 0; padding: var(--sp-1) 0; display: flex; justify-content: space-between; gap: var(--sp-4); text-align: right; }
  .ui-table td::before { content: attr(data-label); color: var(--ink-muted); font-size: var(--text-xs); text-align: left; }
  .ui-table td.ui-table__primary { display: block; text-align: left; }
  .ui-table td.ui-table__primary::before { content: none; }
  .ui-table td.ui-table__actions { justify-content: flex-start; flex-wrap: wrap; }
  .ui-table td.ui-table__actions::before { content: none; }
  .ui-dl { grid-template-columns: 1fr; gap: 0; }
  .ui-dl dd { margin-bottom: var(--sp-3); }
}

/* A legal text (D-107): a readable column, its headings and tables, and each gap
   still to be filled marked, so a draft can never pass for a finished text. */
.ui-legal { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-6); margin: var(--sp-4) 0; line-height: 1.6; overflow-wrap: anywhere; }
.ui-legal h1 { font-size: var(--text-2xl); margin: 0 0 var(--sp-3); }
.ui-legal h2 { font-size: var(--text-lg); margin: var(--sp-6) 0 var(--sp-2); }
.ui-legal h3 { font-size: var(--text-base); margin: var(--sp-4) 0 var(--sp-2); }
.ui-legal p, .ui-legal ul, .ui-legal ol { margin: 0 0 var(--sp-3); }
.ui-legal table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); font-size: var(--text-sm); }
.ui-legal th, .ui-legal td { text-align: left; padding: var(--sp-2); border-bottom: 1px solid var(--line); vertical-align: top; }
/* A gap reads as plain text on a public page (D-114). */
.ui-legal mark.legal-gap { background: none; color: inherit; padding: 0; }
.ui-legal-draft { font-size: var(--text-xs); color: var(--ink-muted); margin: var(--sp-6) 0 0; }

/* ── The sign-up landing page (D-117) ─────────────────────────────────────────
   The reasons first, the form last. Wide sections on the page ground, cards on
   paper, one accent; every size from the theme's tokens so dark mode follows. */
.ui-main--landing { max-width: var(--content-max, 1180px); padding-top: 0; }
.ui-main--landing h2 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--sp-5); }
.ui-main--landing h3 { font-size: var(--text-lg); font-weight: 600; margin: 0 0 var(--sp-2); }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-8);
  align-items: center; padding: var(--sp-10) 0 var(--sp-8); }
.lp-hero h1 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 var(--sp-4); }
.lp-lead { font-size: var(--text-lg); color: var(--ink-soft); max-width: 36rem; margin: 0 0 var(--sp-5); }
.lp-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.lp-btn { min-height: 48px; padding: 0.7rem 1.35rem; font-size: var(--text-base); text-decoration: none; }
.lp-offer { color: var(--ink-muted); font-size: var(--text-sm); margin: 0; }
.lp-hero__pic { display: flex; justify-content: center; }
/* The phone: the demo site in a rounded frame, as it would sit in a hand. */
.lp-phone { width: 100%; max-width: 300px; height: auto; border-radius: 28px; border: 8px solid var(--ink);
  box-shadow: var(--shadow-lg); background: var(--paper); }
.lp-sec { padding: var(--sp-8) 0; }
.lp-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.lp-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--sp-5); }
.lp-card p { color: var(--ink-soft); margin: 0; }
.lp-ico { width: 40px; height: 40px; padding: 8px; border-radius: var(--radius); margin-bottom: var(--sp-3);
  color: var(--gold-deep); background: var(--gold-wash); display: block; }
/* The dashboard: a wide picture in a browser-like frame, with a line under it. */
.lp-shot { margin: var(--sp-6) 0 0; }
.lp-shot__img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); }
.lp-shot figcaption { text-align: center; color: var(--ink-muted); font-size: var(--text-sm); margin-top: var(--sp-3); }
.lp-steps { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp-steps li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.lp-steps p { color: var(--ink-soft); margin: 0; }
.lp-num { flex: none; width: 36px; height: 36px; border-radius: var(--radius-pill); display: grid; place-items: center;
  font-weight: 700; background: var(--action-bg); color: var(--action-fg); }
.lp-trust { list-style: none; margin: 0; padding: var(--sp-4) var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.lp-trust li { display: flex; align-items: center; gap: var(--sp-2); font-weight: 500; color: var(--ink-soft); }
.lp-trust li::before { content: '✓'; color: var(--ok); font-weight: 700; }
.lp-faq { max-width: 46rem; }
.lp-q { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--sp-2); }
.lp-q summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 48px; padding: var(--sp-3) var(--sp-4); font-weight: 600; }
.lp-q summary::-webkit-details-marker { display: none; }
.lp-q summary::after { content: '+'; margin-left: auto; color: var(--ink-muted); font-weight: 400; font-size: var(--text-lg); }
.lp-q[open] summary::after { content: '−'; }
.lp-q p { margin: 0; padding: 0 var(--sp-4) var(--sp-4); color: var(--ink-soft); }
/* The form, last: its own tinted panel, centred at the width it always had. */
.lp-start { margin: var(--sp-6) 0 0; padding: var(--sp-8) var(--sp-5); background: var(--gold-wash);
  border: 1px solid var(--line); border-radius: var(--radius-lg); scroll-margin-top: 72px; }
.lp-start__inner { max-width: 460px; margin: 0 auto; }
.lp-start h2 { font-size: var(--text-xl); margin: 0; }
@media (max-width: 860px) {
  .lp-hero { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6) 0 var(--sp-5); }
  .lp-hero h1 { font-size: var(--text-2xl); }
  .lp-phone { max-width: 240px; }
  .lp-sec { padding: var(--sp-6) 0; }
  .ui-main--landing h2 { font-size: var(--text-xl); }
  .lp-start { padding: var(--sp-8) var(--sp-4); }
}