/* The shared component vocabulary: header, nav, buttons, cards, forms, overlays, footer. */

/* ---------- header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--fx-surface);
  border-bottom: 1px solid var(--fx-border);
}

.header-row {
  height: var(--fx-header);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img { display: block; height: 27px; width: auto; }

/* The lock-up ships in two colourways; the white one is for dark grounds. */
.brand .on-light { display: block; }
.brand .on-dark { display: none; }
[data-theme='dark'] .brand .on-light,
.footer .brand .on-light { display: none; }
[data-theme='dark'] .brand .on-dark,
.footer .brand .on-dark { display: block; }

.header-nav {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.header-nav a {
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.006em;
  color: var(--fx-ink2);
  white-space: nowrap;
  transition: background-color var(--fx-fast) ease, color var(--fx-fast) ease;
}

.header-nav a:hover { background: var(--fx-cyansoft); color: var(--fx-cyanink); }
/* The prototype has no active state; the current-page ink is the live site's own addition. */
.header-nav a[aria-current='page'] { color: var(--fx-ink); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--fx-r-btn);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter var(--fx-fast) ease, border-color var(--fx-fast) ease, background-color var(--fx-fast) ease, color var(--fx-fast) ease;
}

.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:not(:disabled):hover { filter: brightness(1.06); }
.btn i { font-size: 16px; }

.btn-primary { background: var(--fx-cyan); color: var(--fx-btn-primary-ink); }
.btn-primary.glow { box-shadow: var(--fx-shadow-cyan); }
.btn-soft { background: var(--fx-cyansoft); color: var(--fx-cyanink); }
.btn-stroke { background: transparent; color: var(--fx-ink); border-color: var(--fx-border); font-weight: 500; }
.btn-stroke:not(:disabled):hover { filter: none; border-color: var(--fx-cyan); color: var(--fx-cyanink); }
.btn-ok { background: var(--fx-ok); color: #03210F; }
.btn-danger { background: transparent; color: var(--fx-err); border-color: var(--fx-border); font-weight: 500; }
.btn-danger:not(:disabled):hover { filter: none; border-color: var(--fx-err); }
.btn-on-dark { background: transparent; color: var(--fx-deepink); border-color: var(--fx-white-12); font-weight: 500; }
.btn-on-dark:not(:disabled):hover { filter: none; border-color: var(--fx-cyan); }

.btn-sm { height: 38px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
/* The prototype uses 38 and 40 as distinct steps; this is the 40 one. */
.btn-40 { height: 40px; padding: 0 16px; border-radius: 10px; }
/* A stroke button standing on the page ground needs the surface fill to read as a control. */
.btn-stroke.btn-filled { background: var(--fx-surface); }
.btn-md { height: 42px; padding: 0 16px; border-radius: 11px; }
.btn-lg { height: 50px; padding: 0 20px; font-size: 15px; }
.btn-xl { height: 52px; padding: 0 22px; font-size: 15px; }
.btn-pill { border-radius: var(--fx-r-pill); }
.btn-block { width: 100%; }

/* Visual heights below 44 keep the prototype's ladder; the tap area is topped up here. */
.btn-sm, .btn-md, .btn-40, .icon-btn { position: relative; }
.btn-sm::after, .btn-md::after, .btn-40::after, .icon-btn::after {
  content: '';
  position: absolute;
  inset: -6px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--fx-border);
  color: var(--fx-ink2);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--fx-fast) ease, color var(--fx-fast) ease;
}

.icon-btn:hover { border-color: var(--fx-cyan); color: var(--fx-cyanink); }
.icon-btn i { font-size: 16px; }
.icon-btn.plain { border-color: transparent; }
.icon-btn.on-dark { border-color: var(--fx-white-12); color: var(--fx-deepink); }

/* ---------- cards ---------- */

/* The border carries the card, not a shadow. Shadows are for floating things only. */
.card {
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-card);
  padding: 18px;
}

.card-feature { border-radius: var(--fx-r-feature); padding: clamp(18px, 2.4vw, 26px); }
.card-hero { border-radius: var(--fx-r-hero); }
.card-link { display: block; color: inherit; transition: border-color var(--fx-fast) ease, transform var(--fx-fast) ease; }
.card-link:hover { border-color: var(--fx-cyan); color: inherit; }
.card-lift { box-shadow: var(--fx-shadow); }

/* Selected state is a cyan wash plus a cyan border — never a coloured left edge.
   The language menu's checked row is the same state, so it shares the rule rather than
   restating it; `border-color` simply has nothing to paint on a borderless row. */
.selected,
.lang-opt[aria-checked='true'] {
  background: var(--fx-cyansoft);
  border-color: var(--fx-cyan);
  color: var(--fx-cyanink);
}

/* ---------- chips, badges, pills ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--fx-r-pill);
  background: var(--fx-bg);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--fx-ink2);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--fx-fast) ease, background-color var(--fx-fast) ease, color var(--fx-fast) ease, transform var(--fx-fast) ease;
}

.chip:hover { border-color: var(--fx-cyan); color: var(--fx-cyanink); }
.chip.stroke { background: var(--fx-surface); border-color: var(--fx-border); color: var(--fx-ink); }
.chip.static { cursor: default; }
/* 4px taller than the controls beside it, with the avatar inset 6px — the prototype's shape. */
.profile-chip { height: 38px; padding: 0 6px 0 12px; gap: 10px; }
.chip.static:hover { border-color: transparent; color: var(--fx-ink2); }
.chip i { font-size: 16px; color: var(--fx-cyan); }
.chip.selected i { color: var(--fx-cyanink); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--fx-r-pill);
  background: var(--fx-cyan);
  color: var(--fx-on-cyan);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

.badge.soft { background: var(--fx-cyansoft); color: var(--fx-cyanink); }
.badge.ok { background: var(--fx-ok); color: #03210F; }
.badge.ok-soft { background: var(--fx-oksoft); color: var(--fx-ok); }
.badge.neutral { background: var(--fx-bg); color: var(--fx-ink2); }
.badge.warn { background: var(--fx-warnsoft); color: var(--fx-warn); }
.badge.tall { height: 24px; padding: 0 11px; font-size: 12px; }

.pill-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-pill);
  background: var(--fx-bg);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fx-ink2);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fx-cyan);
  flex-shrink: 0;
}

.dot.pulse { animation: fxPulse 1.8s ease-in-out infinite; }
.dot.ok { background: var(--fx-ok); }
.dot.warn { background: var(--fx-warn); }
.dot.idle { background: var(--fx-ink2); }

/* ---------- language menu ---------- */

/* The trigger is the currency chip's twin — same `.chip.stroke` shell, so the header row keeps the
   density it had. `.chip` is 34px tall, so the tap area is topped up the way `.btn-sm` does it. */
/* Full header height on purpose: the anchor is what `top: 100%` measures from, so at chip height
   (34px in a 66px row) the panel would open 8px *above* the header's bottom border. */
.lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--fx-header);
  flex-shrink: 0;
}

.lang-btn { position: relative; }
/* Vertical only. `inset: -6px` would reach 6px right, into the 8px gap, and collide with the
   theme toggle's own `.icon-btn::after` overlay — which, being later in the DOM, would win.
   The chip is ~90px wide, so only the height ever needed topping up. */
.lang-btn::after { content: ''; position: absolute; inset: -6px 0; }
.lang-btn[aria-expanded='true'] { border-color: var(--fx-cyan); color: var(--fx-cyanink); }

/* `.chip i` paints every chip glyph cyan; the caret is furniture, not brand, so it is walked back. */
.lang-btn .lang-caret { font-size: 14px; color: var(--fx-ink2); transition: transform var(--fx-fast) ease; }
.lang-btn[aria-expanded='true'] .lang-caret { transform: rotate(180deg); color: var(--fx-cyanink); }

/* A sibling of `.search-results`: surface, one border, the lift shadow, the same rise on open.
   Anchored left — the chip is the leftmost control in the actions row, so a right anchor would
   hang the panel off the screen on a phone. */
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);   /* = 8px below the header border, see .lang */
  left: 0;
  z-index: 30;
  min-width: 216px;
  max-width: calc(100vw - var(--fx-gutter) * 2);
  padding: 6px;
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-card);
  box-shadow: var(--fx-shadow-lift);
  animation: fxUp var(--fx-base) var(--fx-ease-out) both;
}

.lang-title {
  margin: 0;
  padding: 8px 10px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fx-ink2);
}

/* 44px tall, so the rows need no `::after` top-up of their own. */
.lang-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 10px;
  /* reserved, so the cyan hairline `.selected` adds on the checked row costs no height */
  border: 1px solid transparent;
  border-radius: var(--fx-r-input);
  background: transparent;
  font-family: var(--fx-text);
  font-size: 14px;
  font-weight: 500;
  color: var(--fx-ink);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--fx-fast) ease, color var(--fx-fast) ease;
}

.lang-opt-name { flex: 1; min-width: 0; }
.lang-opt-code { font-family: var(--fx-mono); font-size: 12px; color: var(--fx-ink2); }
/* A fixed slot, so the tick on one row does not shunt the row above it out of line. */
.lang-opt-mark { display: inline-flex; justify-content: center; width: 16px; flex-shrink: 0; }
.lang-opt-mark i { font-size: 16px; color: var(--fx-cyan); }

/* `:not(...)` so hovering the checked row does not wash its cyan back out. */
.lang-opt:not([aria-checked='true']):hover { background: var(--fx-bg); }
.lang-opt[aria-checked='true'] .lang-opt-code { color: var(--fx-cyanink); }

/* The global ring is --fx-cyan, which is only 2.46:1 on this panel — under the 3:1 WCAG 1.4.11
   asks of a focus indicator. Here the ring is the ONLY sign of where the arrow keys have landed,
   so it steps up to --fx-cyanink: 5.17:1 light, 9.88:1 dark. */
.lang-opt:focus-visible { outline-color: var(--fx-cyanink); }

/* Anchored to the chip there is a width at which the panel would run past the screen edge. Below
   560px it stops being a popover and spans the gutters instead, which cannot overflow. */
@media (max-width: 560px) {
  .lang-menu {
    position: fixed;
    top: calc(var(--fx-header) + 8px);
    left: var(--fx-gutter);
    right: var(--fx-gutter);
    min-width: 0;
    max-width: none;
  }
}

/* Listed but not offered: the copy for these languages does not exist yet. */
.lang-opt[aria-disabled='true'] { color: var(--fx-ink2); cursor: not-allowed; }
.lang-opt[aria-disabled='true']:hover { background: transparent; }

/* ---------- forms ---------- */

.field { display: block; }

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 7px;
}

.input {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-input);
  background: var(--fx-bg);
  transition: border-color var(--fx-fast) ease;
}

.input:focus-within { border-color: var(--fx-cyan); }
.input.error { border-color: var(--fx-err); }
.input.on-surface { background: var(--fx-surface); }
.input.tall { height: 50px; border-radius: var(--fx-r-btn); }
.input i { font-size: 18px; color: var(--fx-ink2); }

.input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--fx-ink);
  font-size: 15px;
}

.input input::placeholder { color: var(--fx-ink2); }

/* On the inverted ground the field is a translucent wash, not a surface card. */
.input.on-deep {
  background: var(--fx-white-05);
  border-color: var(--fx-white-14);
  padding: 0 16px;
}

.input.on-deep input { color: var(--fx-deepink); }
.input.on-deep input::placeholder { color: var(--fx-deepink2); }

.field-msg { font-size: 12px; margin-top: 6px; color: var(--fx-ink2); }
.field-msg.error { color: var(--fx-err); }
.field-msg.ok { color: var(--fx-ok); }

/* ---------- tabs ---------- */

.tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-pill);
}

.tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--fx-r-pill);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--fx-ink2);
  transition: background-color var(--fx-fast) ease, color var(--fx-fast) ease;
}

.tabs button[aria-selected='true'] { background: var(--fx-deep); color: var(--fx-deepink); }

/* the badge sits in a centred row, so it centres with it */
.tabs .badge { align-self: center; }

.tabs.surface { background: var(--fx-bg); border-color: transparent; padding: 4px; width: 100%; }
.tabs.surface button { flex: 1; height: 38px; font-size: 14px; font-weight: 600; padding: 0 4px; }
.tabs.surface button[aria-selected='true'] { background: var(--fx-surface); color: var(--fx-cyanink); box-shadow: var(--fx-shadow-sm); }

.tabs.small { padding: 4px; background: var(--fx-bg); border-color: transparent; }
.tabs.small button { height: 32px; padding: 0 14px; font-size: 13px; font-weight: 600; }
.tabs.small button[aria-selected='true'] { background: var(--fx-cyan); color: var(--fx-on-cyan); }

.tabs.blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  width: 100%;
}

.tabs.blocks button { height: 42px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.tabs.blocks button[aria-selected='true'] { background: var(--fx-cyan); color: var(--fx-on-cyan); }

/* ---------- progress ---------- */

.bar {
  height: 8px;
  border-radius: var(--fx-r-pill);
  background: var(--fx-border);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fx-cyan);
  transition: width var(--fx-slow) var(--fx-ease);
}

.bar span.ok { background: var(--fx-ok); }
.bar span.warn { background: var(--fx-warn); }

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: fxSpin .7s linear infinite;
}

/* ---------- overlays ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--fx-backdrop);
  display: flex;
  animation: fxIn var(--fx-base) ease both;
}

.backdrop.center { align-items: center; justify-content: center; padding: 20px; }
.backdrop.bottom { align-items: flex-end; }
.backdrop.right { justify-content: flex-end; }

.modal {
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-feature);
  box-shadow: var(--fx-shadow-lift);
  width: min(520px, 100%);
  max-height: 86vh;
  overflow: auto;
  padding: 24px;
  animation: fxUp var(--fx-slow) var(--fx-ease-out) both;
}

.sheet {
  background: var(--fx-surface);
  border-top: 1px solid var(--fx-border);
  border-radius: var(--fx-r-hero) var(--fx-r-hero) 0 0;
  box-shadow: var(--fx-shadow-lift);
  width: 100%;
  max-height: 86vh;
  overflow: auto;
  padding: 20px 20px 28px;
  animation: fxUp var(--fx-slow) var(--fx-ease-out) both;
}

.sheet-grip {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--fx-border);
  margin: 0 auto 16px;
}

.drawer {
  background: var(--fx-surface);
  border-left: 1px solid var(--fx-border);
  box-shadow: var(--fx-shadow-lift);
  width: min(440px, 100%);
  height: 100%;
  overflow: auto;
  padding: 24px;
  animation: fxDrawer var(--fx-slow) var(--fx-ease-out) both;
}

.overlay-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

/* ---------- accordion ---------- */

.acc { border: 1px solid var(--fx-border); border-radius: var(--fx-r-card); background: var(--fx-surface); overflow: hidden; }
.acc-item + .acc-item { border-top: 1px solid var(--fx-border); }

.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 20px;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: var(--fx-ink);
}

.acc-head i { color: var(--fx-ink2); transition: transform var(--fx-base) var(--fx-ease); }
.acc-item.open .acc-head i { transform: rotate(45deg); }
.acc-body { padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--fx-ink2); }

/* ---------- menu drawer ---------- */

/* Only ever open below 1024, where the header has given up its nav, both pickers and the theme
   switch. The option rows are the picker's own `.lang-opt`, which is already a 44px target. */
.menu-drawer { display: grid; align-content: start; }

.menu-nav { display: grid; margin-bottom: 12px; }

.menu-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 10px;
  border-radius: var(--fx-r-input);
  font-size: 16px;
  font-weight: 500;
  color: var(--fx-ink);
}

.menu-nav a:not([aria-current]):hover { background: var(--fx-bg); color: var(--fx-cyanink); }
.menu-nav a[aria-current='page'] { background: var(--fx-cyansoft); color: var(--fx-cyanink); }

.menu-opts { display: grid; gap: 2px; margin-bottom: 8px; }

/* ---------- mobile bottom nav ---------- */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  gap: 2px;
  padding: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: var(--fx-surface);
  border-top: 1px solid var(--fx-border);
}

.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 52px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  color: var(--fx-ink2);
}

.tabbar a i { font-size: 20px; }
.tabbar a[aria-current='page'] { background: var(--fx-cyansoft); color: var(--fx-cyanink); }

/* ---------- back to top ---------- */

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  color: var(--fx-ink);
  box-shadow: var(--fx-shadow-lift);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--fx-base) ease, transform var(--fx-base) ease, visibility var(--fx-base);
}

.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top i { font-size: 20px; }

/* ---------- footer ---------- */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--fx-deep);
  color: var(--fx-deepink2);
  padding: 0 var(--fx-gutter) 28px;
}

.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 96% 0%, rgba(8, 181, 209, .16), transparent 46%);
  pointer-events: none;
}

.footer > * { position: relative; }
.footer a { color: var(--fx-deepink2); }
.footer a:hover { color: var(--fx-deepink); }

.footer-news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-items: center;
  padding: clamp(32px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--fx-white-10);
}

.footer-news h2 { font-size: clamp(22px, 2.4vw, 30px); color: var(--fx-deepink); margin-bottom: 8px; }
.footer-news p { font-size: 15px; line-height: 1.5; max-width: 32em; }

.footer-form { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; }
.footer-form .field { flex: 1; min-width: 180px; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px 28px;
  padding: clamp(32px, 4vw, 48px) 0;
}

.footer-about { grid-column: span 2; min-width: 0; }
.footer-about p { font-size: 14px; line-height: 1.55; margin: 14px 0 18px; max-width: 24em; }
.footer-col-title { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fx-deepink3); margin-bottom: 14px; }
.footer-links { display: grid; gap: 10px; font-size: 14px; justify-items: start; }

.footer-social { display: flex; gap: 9px; margin-top: 20px; }

.footer-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--fx-white-12);
  color: var(--fx-deepink);
  font-size: 17px;
  transition: background-color var(--fx-fast) ease;
}

.footer-social a:hover { background: rgba(8, 181, 209, .18); }

.footer-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid var(--fx-white-10);
  border-bottom: 1px solid var(--fx-white-10);
  font-size: 13px;
}

.footer-band > * { flex-shrink: 1; }
.pay-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.pay {
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  background: var(--fx-white-06);
  font-size: 12px;
  font-weight: 600;
  color: var(--fx-deepink);
}

.footer-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  font-size: 13px;
  color: var(--fx-deepink3);
}

/* Rounded rectangles here, not pills — `.chip`'s pill shape belongs to the hero suggestions. */
.footer-end .chip { background: transparent; border-color: var(--fx-white-12); color: var(--fx-deepink2); height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--fx-r-input); }
.footer-end .chip i { color: var(--fx-deepink2); font-size: 14px; }
.footer-end .chip:not(.static):hover { border-color: var(--fx-cyan); color: var(--fx-deepink); }

/* Tablet footer. Left to auto-fit, the about block eats two tracks and strands one link column
   up beside it while the other two drop to a row of their own. Three fixed columns put the link
   columns on one row under a full-width about block, whose contacts move up beside the blurb
   rather than trailing under it. The newsletter stacks so the field is not squeezed. */
@media (min-width: 641px) and (max-width: 1023px) {
  .footer-news { grid-template-columns: 1fr; }

  .footer-cols { grid-template-columns: repeat(3, 1fr); }

  .footer-about {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    align-items: start;
  }
}

/* ---------- responsive: the prototype switches structure at 1024px ---------- */

@media (max-width: 1023px) {
  .header-nav { display: none; }

  /* The bottom nav only exists for someone with an account, so it waits for a session. Signed
     out, the way in is the header's "Kirish" button, which stays visible at every width.
     Everything that made room for the bar has to wait with it or the page keeps a dead strip
     along its bottom edge. */
  [data-session='in'] .tabbar { display: flex; }
  /* clear the fixed bottom nav */
  [data-session='in'] body { padding-bottom: calc(69px + env(safe-area-inset-bottom)); }
  [data-session='in'] .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); }

  .desk-only { display: none !important; }
}

@media (min-width: 1024px) {
  .mob-only { display: none !important; }
}

@media (max-width: 460px) {
  .brand img { height: 22px; }
  .header-row { gap: 12px; }
  .hide-xs { display: none !important; }
}

@media (max-width: 640px) {
  /* Containers match the page inset (see pages.css). Buttons, tabs, chips and
     inputs are controls, not containers — their padding is what sizes them. */
  .card, .card-feature, .modal, .drawer, .sheet,
  .acc-head, .acc-body, .backdrop.center {
    padding-left: 16px;
    padding-right: 16px;
  }
}