/* =========================================================
   Coinmarketcop demo — mobile stylesheet.

   Mobile-first throughout: the base rules are the phone layout and
   the only media query is a width cap for large phones and tablets.
   Colour comes from the token block; the dark theme re-declares the
   same names, so nothing below needs a second set of rules.
   ========================================================= */

/* ==================== 1. TOKENS ==================== */
:root {
  --blue: #3861fb;
  --blue-ink: #2b4dd4;
  --blue-wash: #eef2ff;
  --up: #16c784;
  --up-wash: #e9f9f3;
  --down: #ea3943;
  --down-wash: #fdecec;

  --ink: #0d1421;
  --ink-2: #58667e;
  --ink-3: #8a94a6;
  --line: #e6e8ea;
  --line-2: #f0f2f4;
  --bg: #ffffff;
  --panel: #f8fafd;
  --panel-2: #f0f3f8;
  --nav: #0d1421;
  --nav-ink: #ffffff;
  --shadow: 0 2px 10px rgba(13, 20, 33, .08);

  --r: 12px;
  --r-sm: 8px;
  --r-lg: 18px;
  --gut: 16px;
  --top: 56px;
  --maxw: 560px;

  /* Density. These five drive the vertical rhythm of every list and card
     on the site, so the whole layout can be tightened or loosened from
     one place instead of by hunting through the components. */
  --gap-sec: 14px;     /* between page sections */
  --gap-card: 10px;    /* between stacked cards */
  --pad-row: 8px;      /* block padding inside a list row */
  --pad-item: 11px;    /* block padding inside a card row */
  --badge-row: 30px;   /* coin badge size in a list row */

  --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
       Arial, "Noto Sans", "PingFang SC", "Hiragino Sans", "Microsoft YaHei",
       "Noto Sans SC", "Noto Sans Thai", "Noto Sans Arabic", sans-serif;
  --fnum: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --blue: #5b7cff;
  --blue-ink: #7c96ff;
  --blue-wash: #1a2246;
  --up: #2fd39b;
  --up-wash: #10281f;
  --down: #ff5b63;
  --down-wash: #2c1417;

  --ink: #e8ecf3;
  --ink-2: #9aa6bd;
  --ink-3: #6f7c94;
  --line: #232b3d;
  --line-2: #1a2030;
  --bg: #0b0f19;
  --panel: #121826;
  --panel-2: #1a2132;
  --nav: #0b0f19;
  --nav-ink: #ffffff;
  --shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

/* ==================== 2. BASE ==================== */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--ink-2); }

/* A signed figure reads left-to-right even on an RTL page. Without the
   isolation the bidi algorithm treats the leading minus and the trailing
   percent sign as neutral and shunts them to the far end of the run, so
   "−0.58%" comes out looking like "0.58%−". */
.row .rk, .row .px, .row .ch, .trow .rk, .trow .big, .trow .mini-ch,
.mini .px, .mini .ch, .gitem .v, .stat .v, .kv-row .v, .price-now,
.price-sub .ch, .chart-readout, .conv input, .conv .unit, .badge,
.chead .rank, .foot-strip .kvp b {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==================== 3. LAYOUT ==================== */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--flush { padding-inline: 0; }

main { flex: 1; padding-bottom: 24px; }

.sec { margin-top: var(--gap-sec); }
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.sec-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.sec-head .more-link { font-size: 13px; color: var(--blue); font-weight: 600; }

/* ==================== 4. TOP BAR ==================== */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: var(--maxw); margin-inline: auto;
  height: var(--top); padding-inline: 12px;
  display: flex; align-items: center; gap: 6px;
}
.brand { display: flex; align-items: center; gap: 8px; margin-inline-end: auto; }
.brand-mark { width: 28px; height: 28px; color: var(--blue); flex: none; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.brand-sub { font-size: 11px; color: var(--ink-3); font-weight: 600; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  flex: none;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:active { background: var(--panel-2); }
.icon-btn .dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); transform: translate(11px, -11px);
}

/* ==================== 5. DRAWER + SHEETS ==================== */
.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(13, 20, 33, .5);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

/* The off-screen offset goes through a custom property rather than
   being written twice. `html[dir="rtl"] .drawer` outweighs
   `.drawer.is-open`, so a second transform rule there would leave the
   panel parked off-screen in RTL for good. */
.drawer {
  --off: -100%;
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 61;
  width: min(86vw, 340px);
  background: var(--bg);
  transform: translateX(var(--off));
  transition: transform .22s ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[dir="rtl"] .drawer { --off: 100%; }
.drawer.is-open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px var(--gut); border-bottom: 1px solid var(--line);
}
.drawer-group { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.drawer-group > h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); padding: 8px var(--gut) 4px; font-weight: 700;
}
.drawer-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; text-align: start;
  padding: 11px var(--gut); font-size: 15px; font-weight: 500;
}
.drawer-item:hover { background: var(--panel); }
.drawer-item .sub { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.drawer-item svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }

.sheet {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 62;
  background: var(--bg);
  border-start-start-radius: var(--r-lg); border-start-end-radius: var(--r-lg);
  max-height: 76vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .22s ease;
}
.sheet.is-open { transform: translateY(0); }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gut) 10px; border-bottom: 1px solid var(--line);
}
.sheet-head h3 { font-size: 15px; font-weight: 700; }
.sheet-list { overflow-y: auto; padding: 6px 0 14px; }
.sheet-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: start; padding: 12px var(--gut); font-size: 15px;
}
.sheet-item.is-on { color: var(--blue); font-weight: 700; }
.sheet-item .tick { width: 18px; flex: none; visibility: hidden; color: var(--blue); }
.sheet-item.is-on .tick { visibility: visible; }

/* ==================== 6. SEARCH ==================== */
.searchbar {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0 12px 10px;
}
.searchbar label {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 12px; height: 38px;
}
.searchbar svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.searchbar input {
  flex: 1; border: 0; background: none; outline: none;
  font-size: 14px; color: var(--ink); min-width: 0;
}
.searchbar input::placeholder { color: var(--ink-3); }

/* ==================== 7. GLOBAL STRIP ==================== */
.gstrip {
  background: var(--nav);
  color: var(--nav-ink);
  padding: 10px 0 12px;
}
.gscroll {
  display: flex; gap: 22px;
  overflow-x: auto; scrollbar-width: none;
  padding-inline: var(--gut);
  max-width: var(--maxw); margin-inline: auto;
}
.gscroll::-webkit-scrollbar { display: none; }
.gitem { flex: none; min-width: 96px; }
.gitem .k {
  font-size: 11px; color: #9aa6bd; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.gitem .v {
  font-size: 15px; font-weight: 700; margin-top: 2px;
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
}
.gitem .v .c { font-size: 12px; font-weight: 600; }
.gitem .v .c.up { color: var(--up); }
.gitem .v .c.down { color: var(--down); }
.gauge {
  --p: 56;
  width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(var(--up) calc(var(--p) * 1%), #2b3446 0);
  display: grid; place-items: center; flex: none;
}
.gauge i {
  width: 19px; height: 19px; border-radius: 50%; background: var(--nav);
  display: grid; place-items: center; font-size: 9px; font-weight: 700;
  font-style: normal; color: #fff;
}

/* ==================== 8. TABS + CHIPS ==================== */
.tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  padding-inline: var(--gut); max-width: var(--maxw); margin-inline: auto;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; padding: 11px 10px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab.is-on { color: var(--blue); border-bottom-color: var(--blue); }

.sortsel { position: relative; flex: none; }
select.chip {
  appearance: none; -webkit-appearance: none;
  padding-inline: 12px; height: 32px; line-height: 1;
  background: var(--bg); color: var(--ink-2);
}
select.chip:focus { outline: 2px solid var(--blue); outline-offset: 2px; }

.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 10px var(--gut); max-width: var(--maxw); margin-inline: auto;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.chip.is-on { background: var(--blue-wash); border-color: var(--blue); color: var(--blue); }

/* ==================== 9. CARDS ==================== */
.card {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg); overflow: hidden;
}
.card + .card { margin-top: var(--gap-card); }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: var(--pad-item) 14px 7px;
}
.card-head h3 { font-size: 14.5px; font-weight: 700; }
.card-head .badge-n {
  font-size: 11px; font-weight: 700; color: var(--blue);
  background: var(--blue-wash); border-radius: 999px; padding: 2px 8px;
}

/* horizontal mini-card rail */
.rail {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  padding: 3px var(--gut) 12px; max-width: var(--maxw); margin-inline: auto;
  scroll-snap-type: x proximity;
}
.rail::-webkit-scrollbar { display: none; }
.mini {
  flex: none; width: 132px; scroll-snap-align: start;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; background: var(--bg);
}
.mini-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.mini .nm { display: block; min-width: 0; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .sym { font-size: 11px; color: var(--ink-3); }
.mini .px { font-size: 15px; font-weight: 700; }
.mini .ch { font-size: 12px; font-weight: 600; margin-top: 2px; }

/* ==================== 10. COIN BADGE + SPARK ==================== */
.badge {
  display: inline-grid; place-items: center; border-radius: 50%;
  background: var(--c, var(--ink-2)); color: #fff; font-weight: 800;
  letter-spacing: -.02em; flex: none; font-family: var(--f);
  line-height: 1;
}
.badge--sm { width: 22px; height: 22px; }

.spark { width: 60px; height: 24px; flex: none; }
.spark path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark.up { color: var(--up); }
.spark.down { color: var(--down); }

.area { width: 100%; height: 100%; }
.area .a-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.area .a-fill { stroke: none; }
.area .a-dot { fill: currentColor; stroke: var(--bg); stroke-width: 2; }
.area.up { color: var(--up); }
.area.down { color: var(--down); }

/* ==================== 11. COIN LIST ==================== */
.list { border-top: 1px solid var(--line-2); }
.rowli { display: contents; }
.row {
  display: grid;
  grid-template-columns: 26px var(--badge-row) 1fr auto;
  align-items: center; gap: 10px;
  padding: var(--pad-row) var(--gut);
  border-bottom: 1px solid var(--line-2);
  max-width: var(--maxw); margin-inline: auto;
}
.row:hover { background: var(--panel); }
.row .rk { font-size: 12.5px; color: var(--ink-3); font-weight: 600; text-align: center; }
.row .nm-wrap { min-width: 0; display: block; }
/* display:block matters: an inline box ignores overflow, so a long coin
   name would run straight under the price instead of eliding. */
.row .nm {
  display: block; font-size: 14px; line-height: 1.2; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row .meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; line-height: 1.25; }
.row .sym { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.row .px-wrap { text-align: end; }
/* These two stack, so both need to be block-level — as inline spans the
   price and the percentage ran together as "$38.42+4.62%". They also
   carry the row's height: with the default 1.45 line-height the two
   lines came to 40px, taller than the badge beside them. */
.row .px { display: block; font-size: 14px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.row .ch { display: block; font-size: 12.5px; line-height: 1.25; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.row .sp { display: none; }

.rows-head { display: none; }

.empty { text-align: center; color: var(--ink-2); padding: 28px var(--gut); font-size: 13.5px; }

.pager {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 16px var(--gut) 4px; max-width: var(--maxw); margin-inline: auto;
}
.pager button {
  min-width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--line); font-size: 13px; font-weight: 600;
  display: grid; place-items: center; color: var(--ink-2);
}
.pager button.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.pager button:disabled { opacity: .4; }
.pager .gap { color: var(--ink-3); }
.shown { text-align: center; font-size: 12px; color: var(--ink-3); padding-top: 8px; }

/* ==================== 12. STONKS / DERIVATIVES ==================== */
.kv { display: flex; flex-direction: column; }
.kv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: var(--pad-item) 14px; border-top: 1px solid var(--line-2);
}
.kv-row .k { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.kv-row .v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }
.bar .l { background: var(--up); }
.bar .s { background: var(--down); }

/* ==================== 13. COIN PAGE ==================== */
.chead { padding-top: 14px; }
.chead-top { display: flex; align-items: center; gap: 10px; }
.chead-top .badge { width: 40px; height: 40px; }
.chead-names { min-width: 0; }
.chead-names h1 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.chead-names .sym { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.chead .rank {
  margin-inline-start: auto; font-size: 12px; font-weight: 700;
  background: var(--panel-2); border-radius: 999px; padding: 4px 10px; color: var(--ink-2);
}
.price-now {
  font-size: 32px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: 14px;
}
.price-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13.5px; }
.price-sub .ch { font-weight: 700; }
.price-sub .lbl { color: var(--ink-3); }

.chart-card { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
/* Charts read left-to-right in every locale, RTL included, so the
   readout and the drag maths can both use a plain left offset. */
.chart-box { position: relative; height: 220px; touch-action: pan-y; direction: ltr; }
.chart-box .area { position: absolute; inset: 0; height: 100%; }
.chart-readout {
  position: absolute; top: 10px; inset-inline-start: 12px;
  font-size: 12px; color: var(--ink-2); pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.chart-readout b { display: block; font-size: 15px; color: var(--ink); }
.chart-hair { position: absolute; inset-block: 0; width: 1px; background: var(--line); pointer-events: none; }
.chart-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: currentColor; border: 2px solid var(--bg);
  transform: translate(-50%, -50%); pointer-events: none;
}
.per-chips { display: flex; gap: 4px; padding: 8px 12px 12px; border-top: 1px solid var(--line-2); }
.per {
  flex: 1; padding: 6px 0; border-radius: var(--r-sm); font-size: 12.5px;
  font-weight: 600; color: var(--ink-2); text-align: center;
}
.per.is-on { background: var(--blue-wash); color: var(--blue); }

.stats { border: 1px solid var(--line); border-radius: var(--r); margin-top: 16px; overflow: hidden; }
.stat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: var(--pad-item) 14px; border-bottom: 1px solid var(--line-2);
}
.stat:last-child { border-bottom: 0; }
.stat .k { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.stat .v { font-size: 13.5px; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
.stat .v small { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.stat .v small.up { color: var(--up); }
.stat .v small.down { color: var(--down); }

.conv { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.conv input {
  flex: 1; min-width: 0; height: 42px; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding-inline: 12px; font-size: 15px;
  font-weight: 600; background: var(--bg); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.conv .unit {
  height: 42px; display: grid; place-items: center; padding-inline: 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-weight: 700; font-size: 13px; background: var(--panel); flex: none;
}
.conv .swap { width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; flex: none; }
.conv .swap svg { width: 17px; height: 17px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--panel-2); border-radius: 999px; padding: 5px 10px;
}

.prose p { font-size: 13.5px; color: var(--ink-2); margin-top: 10px; line-height: 1.6; }
.prose h3 { font-size: 14px; font-weight: 700; margin-top: 16px; }

/* ==================== 14. TABLES (leaderboard / exchanges) ==================== */
.tbl { border-top: 1px solid var(--line-2); }
.tbl-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px var(--gut) 6px;
  max-width: var(--maxw); margin-inline: auto;
}
.tbl-head h2 { font-size: 16px; font-weight: 700; }
.tbl-head .note { font-size: 11.5px; color: var(--ink-3); }

.trow {
  display: grid; align-items: center; gap: 10px;
  padding: var(--pad-row) var(--gut); border-bottom: 1px solid var(--line-2);
  max-width: var(--maxw); margin-inline: auto;
}
.trow.coin { grid-template-columns: 26px var(--badge-row) 1fr auto; }
.trow.ex { grid-template-columns: 26px 1fr auto; }
.trow .rk { font-size: 12.5px; color: var(--ink-3); font-weight: 600; text-align: center; }
.trow .nm { display: block; font-size: 14px; line-height: 1.2; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.25; display: flex; gap: 6px; }
.trow .end { text-align: end; }
.trow .big { display: block; font-size: 14px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trow .mini-ch { display: block; font-size: 12.5px; line-height: 1.25; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars7 { display: flex; align-items: flex-end; gap: 2px; height: 22px; width: 46px; }
.bars7 i { flex: 1; background: var(--blue); opacity: .55; border-radius: 1px; }

/* ==================== 15. FAQ ==================== */
.faq { margin-top: 22px; }
.faq h2 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; text-align: start; padding: 14px 0; font-size: 14px; font-weight: 600;
}
.faq-q svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; transition: transform .18s ease; }
.faq-item.is-open .faq-q svg { transform: rotate(180deg); }
.faq-a { display: none; padding-bottom: 14px; }
.faq-item.is-open .faq-a { display: block; }
.faq-a p { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.faq-a p + p { margin-top: 8px; }

/* ==================== 16. FOOTER ==================== */
.foot {
  margin-top: 28px; background: var(--nav); color: #cfd6e4;
  padding: 22px var(--gut) 26px;
}
.foot-in { max-width: var(--maxw); margin-inline: auto; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
.foot-cols h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: #77839b; font-weight: 700; margin-bottom: 8px;
}
.foot-cols a { display: block; font-size: 13px; padding: 4px 0; color: #cfd6e4; }
.foot-cols a:hover { color: #fff; }
.foot-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
/* Stays brand-blue in the footer too: the mark's inner shape is white,
   so a white tile would swallow it. */
.foot-brand .brand-mark { width: 24px; height: 24px; color: var(--blue); }
.foot-brand span:last-child { font-size: 16px; font-weight: 800; color: #fff; }
.foot-strip {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #232c3f;
  display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 12px;
}
.foot-strip .kvp { display: flex; gap: 5px; }
.foot-strip .kvp b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.foot-note { margin-top: 16px; font-size: 11.5px; color: #77839b; line-height: 1.6; }
.foot-note + .foot-note { margin-top: 6px; }

/* ==================== 17. TAB BAR (phone) ==================== */
.tabbar {
  position: sticky; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--bg); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 10px; font-size: 10.5px; font-weight: 600; color: var(--ink-3);
}
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a.is-on { color: var(--blue); }

/* ==================== 18. BACK BUTTON ==================== */
.backrow {
  max-width: var(--maxw); margin-inline: auto;
  padding: 10px var(--gut) 0;
}

/* ==================== 19. LARGER PHONES ==================== */
@media (min-width: 520px) {
  .foot-cols { grid-template-columns: repeat(4, 1fr); }
  .row, .trow.coin { grid-template-columns: 26px var(--badge-row) 1fr 96px auto; }
  .row .sp { display: block; }
}