/* Nextbard — dark console for lead runs.
   Depth, not borders: three surfaces (base / raised / sunk) do the separating,
   hairlines only where a real edge exists.
   Three signals, one meaning each:
     accent blue  = live, and decision-maker
     mint         = caught
     coral        = failed
   Prose is Open Sans, headings are Spline Sans, anything the machine
   produced (addresses, domains, logs) is Spline Sans Mono. */

:root {
  color-scheme: dark;

  --base:    #14151E;
  --surface: #1A1E29;
  --raised:  #232838;
  --sunk:    #101119;

  --text:   #E7ECF3;
  --text-2: #9AA5B8;
  --text-3: #6A7387;

  --line:    rgba(255, 255, 255, .07);
  --line-2:  rgba(255, 255, 255, .12);

  --accent:     #90CDF4;
  --accent-ink: #14151E;
  --accent-dim: rgba(144, 205, 244, .13);
  --accent-ring:rgba(144, 205, 244, .22);

  --catch: #9AE6B4;
  --alert: #FEB2B2;

  --shadow:    0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -24px #000;
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 40px 70px -40px #000;

  --display: "Spline Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --body:    "Open Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono:    "Spline Sans Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --r-sm: 6px;
  --r:    8px;
  --r-lg: 14px;
  --r-xl: 18px;
}

* { box-sizing: border-box; }

/* The app hides controls with the `hidden` attribute; any author `display`
   rule (.btn is inline-flex) would otherwise win and keep them on screen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; background: var(--base); }

body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-ring); color: var(--text); }

/* Chrome repaints autofilled fields with its own pale slate. Nothing but an
   inset shadow overrides it, so paint the sunk surface back on. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--sunk) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out;
}

/* dark scrollbars, so the log well doesn't punch a white stripe in the panel */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--raised) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--raised);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: #303648; }

/* ───────────────────────────────────────────────────────── brand mark */

.mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
}

.mark__ring {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  display: grid;
  place-items: center;
}
.mark__ring::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ─────────────────────────────────────────────────────────────── gate */

.gate {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}

/* one atmospheric moment, and only here: the console glowing behind the lock */
.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(660px 460px at 50% 24%, rgba(144, 205, 244, .16), transparent 68%);
  pointer-events: none;
}

.gate__card {
  position: relative;
  width: min(380px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--shadow-lg);
}

/* Also the way back out to the landing page. */
.gate__mark {
  display: flex;
  margin: 0 0 24px;
  text-decoration: none;
  color: inherit;
  width: fit-content;
}

/* sign in / create account — one card, two modes */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 26px;
  padding: 4px;
  background: var(--sunk);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}

.tabs__tab {
  flex: 1;
  padding: 7px 10px;
  border: 0;
  border-radius: calc(var(--r) - 2px);
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.gate__title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.gate__note {
  margin: 0 0 26px;
  color: var(--text-2);
  font-size: 13.5px;
}

.gate__error {
  margin: 14px 0 0;
  min-height: 20px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--alert);
}

.gate .btn--solid { width: 100%; margin-top: 22px; }

/* ────────────────────────────────────────────────────────────── shell */

.shell { min-height: 100dvh; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  background: rgba(20, 21, 30, .82);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar__brand { display: flex; align-items: center; gap: 16px; min-width: 0; }

.topbar__sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__sub b { color: var(--accent); font-weight: 400; }

.topbar__right { display: flex; align-items: center; gap: 12px; }

/* whose console this is — the answer to "are these leads mine?" */
.topbar__who {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  white-space: nowrap;
}
/* What is left on the plan. Normally quiet; turns to the alert colour only
   once the account can no longer start a run. */
.pill--plan    { color: var(--text-2); text-transform: none; letter-spacing: .02em; font-size: 11px; }
.pill--plan:empty { display: none; }
.pill--spent   { color: var(--alert); border-color: var(--alert); }

.pill--idle    { color: var(--text-3); }
.pill--running { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-dim); }
.pill--done    { color: var(--catch); }
.pill--error   { color: var(--alert); }

.pill--running::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: blink 1.3s ease-in-out infinite;
}

@keyframes blink { 50% { opacity: .2; } }

/* ───────────────────────────────────────────────────────────── layout */

.desk {
  display: grid;
  grid-template-columns: minmax(300px, 372px) minmax(0, 1fr);
  align-items: start;
  max-width: 1560px;
  margin: 0 auto;
}

/* ────────────────────────────────────────────────────────────── brief */

.brief {
  padding: 24px 22px 40px;
  border-right: 1px solid var(--line);
  min-height: calc(100dvh - 57px);
  background: var(--surface);
}

.block { margin-bottom: 26px; }

.block__title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text);
}

.block__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
  min-height: 19px;
}

.block--fold {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-bottom: 22px;
}

.block__title--fold {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 0;
}
.block__title--fold::-webkit-details-marker { display: none; }
.block__title--fold::before {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform .16s ease;
}
.block--fold[open] .block__title--fold { margin-bottom: 18px; }
.block--fold[open] .block__title--fold::before {
  transform: rotate(45deg) translate(-1px, -2px);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.chip:hover { background: var(--raised); color: var(--text); }
.chip[aria-pressed="true"] {
  border-color: var(--accent-ring);
  background: var(--accent-dim);
  color: var(--accent);
}

.field { display: block; margin-bottom: 14px; }

.field__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-3);
}

.field__hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-3);
}

.field input,
.field select,
#keywords,
.tape-head__filter {
  width: 100%;
  padding: 9px 11px;
  background: var(--sunk);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  transition: border-color .14s, box-shadow .14s;
}

.field input::placeholder,
#keywords::placeholder,
.tape-head__filter::placeholder { color: var(--text-3); }

.field input:focus,
.field select:focus,
#keywords:focus,
.tape-head__filter:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}

/* The run's finish line, set right where you commit to it. Must follow the
   .field rules above — it overrides their display and input width. */
.field--inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.field--inline .field__label { margin-bottom: 0; flex: none; }
.field--inline input[type="number"] { width: 84px; flex: none; }

.field__unit {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

.field select {
  appearance: none;
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.field select option { background: var(--surface); color: var(--text); }

#keywords { resize: vertical; line-height: 1.7; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* four segments in a narrow column: let it wrap without the lines colliding */
.meter {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--text-3);
}
.meter__num {
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Each stat is unbreakable and carries its own trailing separator, so a wrap
   never strands a lone "·" at the head of the next line. */
.meter__stat { white-space: nowrap; }
.meter__stat:not(:last-child)::after {
  content: " ·";
  margin-right: 7px;
  color: var(--line-2);
}

.meter--over .meter__num { color: var(--alert); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
}
.check input {
  margin-top: 3px;
  width: 14px; height: 14px;
  accent-color: var(--accent);
}
.check em {
  font-style: normal;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
}

.brief__actions { display: flex; gap: 10px; margin-top: 24px; }

.brief__error {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--alert);
}

/* ──────────────────────────────────────────────────────────── buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, transform .14s;
}
.btn:hover { background: var(--raised); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn--solid {
  flex: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--solid:hover:not(:disabled) { background: #B0DCF8; border-color: #B0DCF8; }

/* What the click costs, carried on the control that spends it. */
.btn__cost { font-weight: 500; opacity: .6; }
.btn__cost::before { content: "·"; margin-right: 5px; }
.btn__cost:empty { display: none; }

.btn--ghost {
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-2);
}
.btn--ghost:hover { color: var(--text); }

.btn--danger { flex: 1; color: var(--alert); border-color: rgba(254, 178, 178, .3); }
.btn--danger:hover { background: rgba(254, 178, 178, .12); border-color: var(--alert); }

/* ───────────────────────────────────────────── the field: live station */

.field-panel { padding: 22px 26px 60px; }

/* carrier signal — a beam that scans while the run is receiving */
.sweep {
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.sweep::after {
  content: "";
  display: block;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-100%);
}
.sweep--on::after { animation: sweep 2.2s ease-in-out infinite; }

@keyframes sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(360%); }
}

/* hairline gaps between tiles: the 1px gap shows the divider through */
.readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: 22px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.readout {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: var(--surface);
}

.readout__num {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.readout__num i {
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-3);
}

.readout__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* the payoff figure — the only number worth reading from across the room */
.readout--catch { flex-grow: 1.6; }
.readout--catch .readout__num {
  font-size: 42px;
  letter-spacing: -.04em;
  color: var(--catch);
}
.readout--catch .readout__label { color: var(--catch); }

/* ──────────────────────────────────────────────────────── the results */

.tape-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 14px;
}

.tape-head__filter {
  flex: 1;
  max-width: 320px;
  padding: 8px 12px;
  font-size: 12.5px;
}

.tape-head__actions { display: flex; gap: 6px; }

.tape {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tape:empty { display: none; }

.lead {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  animation: land .25s ease-out;
}
.lead:last-child { border-bottom: 0; }
.lead:hover { background: rgba(255, 255, 255, .022); }

@keyframes land {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* the signature: the left rail reads as a quality track. A lead that carries
   a job title lights its edge, so a glance down the rail counts the
   decision-makers without reading a single address. */
.lead::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
}
.lead:has(.lead__role)::before { background: var(--accent); }
.lead:has(.lead__role) .lead__index { color: var(--accent); }

.lead__index {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  text-align: right;
  padding-top: 3px;
}

.lead__email {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 500;
  word-break: break-all;
}
.lead__email a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.lead__email a:hover { color: var(--accent); border-bottom-color: var(--accent-ring); }

.lead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-3);
}

.lead__domain { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); }

.lead__role {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: var(--r-sm);
  padding: 2px 7px;
}

.lead__kw { font-style: italic; }

.empty {
  margin: 52px auto;
  max-width: 40ch;
  font-size: 13.5px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.6;
}

/* ───────────────────────────────────────────────────────── activity log */

.drawer {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--sunk);
  overflow: hidden;
}

.drawer__title {
  cursor: pointer;
  list-style: none;
  padding: 11px 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-3);
}
.drawer__title::-webkit-details-marker { display: none; }
.drawer__title::before { content: "▸ "; color: var(--accent); }
.drawer[open] .drawer__title::before { content: "▾ "; }
.drawer__title:hover { color: var(--text-2); }

.log {
  list-style: none;
  margin: 0;
  padding: 0 16px 16px;
  max-height: 280px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.8;
}

.log li { display: flex; gap: 14px; color: var(--text-2); }
.log__tag {
  flex: none;
  width: 56px;
  color: var(--text-3);
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: .09em;
  padding-top: 3px;
}
.log__msg { min-width: 0; word-break: break-word; }

.log li[data-level="search"] .log__tag { color: var(--accent); }
.log li[data-level="lead"]   .log__tag { color: var(--catch); }
.log li[data-level="error"]  .log__msg { color: var(--alert); }
.log li[data-level="warn"]   .log__msg { color: var(--text); }

/* ───────────────────────────────────────────────────────────── account */

.account { padding: 0 16px 16px; }

.account__who {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.account__who b { color: var(--text); font-weight: 500; }

.account__plan {
  margin: -6px 0 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
}

.account__msg {
  margin: 12px 0 0;
  min-height: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--alert);
}
.account__msg--ok { color: var(--catch); }

.upgrade { margin: 0 0 20px; }
.upgrade__row { display: flex; flex-wrap: wrap; gap: 8px; }
.upgrade__note {
  margin: 10px 0 0;
  min-height: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
}

.account--danger {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ───────────────────────────────────────────────────────────── history */

.history { margin-top: 34px; }

.history__title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.history__list { list-style: none; margin: 0; padding: 0; }

.history__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.history__open {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  font-family: var(--body);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history__open:hover { color: var(--accent); }

.history__count {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--catch);
  font-variant-numeric: tabular-nums;
}

.history__when {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
}

.history__del {
  flex: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: var(--r-sm);
}
.history__del:hover { color: var(--alert); background: rgba(254, 178, 178, .1); }

/* ─────────────────────────────────────────────────────── small screens */

@media (max-width: 900px) {
  .desk { grid-template-columns: 1fr; }
  .brief {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: 0;
  }
  .field-panel { padding: 18px 18px 48px; }
  .readout { padding: 14px 16px; }
  .readout__num { font-size: 20px; }
  .readout--catch .readout__num { font-size: 34px; }
}

@media (max-width: 560px) {
  .topbar { padding: 12px 18px; }
  .topbar__sub { display: none; }
  .brief { padding: 20px 18px 32px; }
  .grid2 { grid-template-columns: 1fr; }
  .readout { flex-basis: 45%; }
  .readout--catch { flex-basis: 100%; }
  .tape-head { flex-wrap: wrap; }
  .tape-head__filter { max-width: none; }
  .lead { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ─────────────────────────────────────────────────── support and legal foot

   Sits outside both the gate and the console shell, so it is there whether or
   not anyone is signed in. The support address has to be reachable from inside
   the product, not only from the marketing page — a customer looking for help,
   and a payment provider reviewing the account, both look here. */

.appfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 20px 28px 26px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-3);
}

.appfoot__copy { margin-right: auto; }

.appfoot__link {
  color: var(--text-3);
  text-decoration: none;
  transition: color .15s;
}

.appfoot__link:hover { color: var(--text); }

@media (max-width: 560px) {
  .appfoot { padding: 18px 18px 22px; gap: 6px 14px; }
  .appfoot__copy { flex-basis: 100%; margin-right: 0; }
}