/* =============================================================================
   HavikPay merchant console
   Light is the base palette; dark overrides only the tokens. Every colour is
   defined on bare :root so a value never exists solely inside a media query.
   ============================================================================= */

:root {
  color-scheme: light;

  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --sidebar: #ffffff;
  --line: #e3e6ea;
  --line-strong: #cfd4da;

  --text: #14171a;
  --text-muted: #5f6b76;
  --text-faint: #8a949e;

  --accent: #2f6feb;
  --accent-hover: #2159c9;
  --accent-soft: rgba(47, 111, 235, .10);
  --on-accent: #ffffff;

  --ok: #1a7f43;
  --ok-soft: rgba(26, 127, 67, .11);
  --warn: #9a6700;
  --warn-soft: rgba(154, 103, 0, .12);
  --err: #c4322c;
  --err-soft: rgba(196, 50, 44, .10);

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);

  --radius: 10px;
  --radius-sm: 7px;
  --sidebar-w: 244px;
  --header-h: 60px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1117;
    --surface: #151b23;
    --surface-2: #1b222b;
    --sidebar: #11161d;
    --line: #262d37;
    --line-strong: #39414d;
    --text: #e8edf3;
    --text-muted: #9aa5b1;
    --text-faint: #6e7a87;
    --accent: #4f8cff;
    --accent-hover: #6a9dff;
    --accent-soft: rgba(79, 140, 255, .14);
    --on-accent: #0d1117;
    --ok: #4ac07a;
    --ok-soft: rgba(74, 192, 122, .13);
    --warn: #d9a441;
    --warn-soft: rgba(217, 164, 65, .13);
    --err: #f0645d;
    --err-soft: rgba(240, 100, 93, .13);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117;
  --surface: #151b23;
  --surface-2: #1b222b;
  --sidebar: #11161d;
  --line: #262d37;
  --line-strong: #39414d;
  --text: #e8edf3;
  --text-muted: #9aa5b1;
  --text-faint: #6e7a87;
  --accent: #4f8cff;
  --accent-hover: #6a9dff;
  --accent-soft: rgba(79, 140, 255, .14);
  --on-accent: #0d1117;
  --ok: #4ac07a;
  --ok-soft: rgba(74, 192, 122, .13);
  --warn: #d9a441;
  --warn-soft: rgba(217, 164, 65, .13);
  --err: #f0645d;
  --err-soft: rgba(240, 100, 93, .13);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- shell ---------------------------------------------------------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--header-h);
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -.2px;
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}
.brand .scope { color: var(--text-faint); font-weight: 400; font-size: 12px; }

.nav { padding: 14px 10px; overflow-y: auto; flex: 1 1 auto; }
.nav-group { margin-bottom: 18px; }
.nav-group h6 {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 1px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
  transition: background .12s, color .12s;
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav a svg { width: 17px; height: 17px; flex: 0 0 auto; stroke-width: 1.7; }

.sidebar-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 11.5px;
  flex: 0 0 auto;
}

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--header-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .titles { min-width: 0; }
.topbar h1 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .spacer { flex: 1 1 auto; }

.icon-btn {
  width: 34px; height: 34px;
  /* The generic button rule sets padding 8px 15px. Left in place it shrinks the
     content box to 2px and pushes the glyph 7.5px right of centre. */
  padding: 0;
  gap: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.icon-btn svg { display: block; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }
.icon-btn svg { width: 17px; height: 17px; stroke-width: 1.7; }
.icon-btn .icon-dark { display: none; }
:root[data-theme="dark"] .icon-btn .icon-dark { display: block; }
:root[data-theme="dark"] .icon-btn .icon-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .icon-dark { display: block; }
  :root:not([data-theme="light"]) .icon-btn .icon-light { display: none; }
}

.user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.avatar {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.user .who { line-height: 1.25; }
.user .who .email { font-size: 12.5px; font-weight: 550; }
.user .who .role { font-size: 11px; color: var(--text-faint); }

.nav-toggle { display: none; }

.content { padding: 24px 22px 56px; width: 100%; }

/* ---------- surfaces -------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 18px;
}
.card > h2:first-child, .card > h2:first-of-type { margin-top: 0; }

h2 { font-size: 14.5px; font-weight: 650; margin: 0 0 14px; letter-spacing: -.1px; }
.hint { color: var(--text-muted); font-size: 12.5px; margin: 8px 0 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { padding: 16px 18px; }
.stat .label { color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.stat .value { font-size: 25px; font-weight: 660; margin-top: 5px; letter-spacing: -.6px; }
.stat .value.sm { font-size: 18px; }

/* ---------- tables ---------------------------------------------------------- */

.table-card { padding: 0; overflow: hidden; }
.table-card > h2 { padding: 18px 20px 0; }
.scroll-x { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 16px; white-space: nowrap; }
thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}
tbody tr { border-bottom: 1px solid var(--line); }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
/* A th inside tbody is a row label, not a column heading — it should read as a quiet
   label rather than borrowing the uppercase treatment from thead. */
tbody th {
  color: var(--text-muted);
  font-weight: 550;
  font-size: 12.5px;
  white-space: nowrap;
  vertical-align: top;
}

td .sub { display: block; font-size: 11.5px; color: var(--text-faint); }
.mono, td.mono { font-family: var(--mono); font-size: 12.5px; }
.actions { text-align: right; }
.actions form { display: inline; }
/* Every adjacent pair, not just form-after-form: an action may be a bare link. */
.actions > * + * { margin-left: 10px; }

.empty { padding: 34px 20px; text-align: center; color: var(--text-muted); }

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

label { display: block; margin: 0 0 5px; color: var(--text-muted); font-size: 12px; font-weight: 550; }

input, select, textarea {
  width: 100%;
  padding: 8px 11px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 82px; font-family: var(--mono); font-size: 12.5px; resize: vertical; }
/* A <select> sizes from its own line box while an <input> sizes from padding plus
   font metrics, so side by side in a row they land a few pixels apart and their
   labels stop lining up. Pin both to the same height. */
input:not([type="checkbox"]):not([type="radio"]), select { height: 40px; }

input[type=checkbox] { width: auto; }

.form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-row > .field { flex: 1 1 170px; min-width: 0; }
.form-row > button { flex: 0 0 auto; }
.field { margin-bottom: 14px; }
.form-row .field { margin-bottom: 0; }

button, .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  transition: background .12s;
}
button:hover, .btn:hover { background: var(--accent-hover); text-decoration: none; }
button.secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
button.secondary:hover { background: var(--surface-2); }
/* Row actions are a mix of buttons (a POST that changes something) and anchors
   (a GET that only reads). They must be indistinguishable to the eye, so the rule
   covers both elements rather than assuming every action is a form. */
button.link, a.link {
  display: inline;
  background: none; border: none; padding: 0;
  color: var(--text-muted); font-weight: 500; text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
button.link:hover, a.link:hover { color: var(--accent); background: none; }
button.link.danger:hover, a.link.danger:hover { color: var(--err); }

/* ---------- feedback -------------------------------------------------------- */

/* Sized to its own text rather than the full content width — a one-line message
   stretched across a wide screen reads as an empty bar. */
.banner {
  /* flex keeps it block-level so consecutive banners stack rather than sharing a
     line; fit-content still sizes it to its own text. */
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  border: 1px solid;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-size: 13px;
}
.banner svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; stroke-width: 1.8; }
.banner.error { background: var(--err-soft); border-color: var(--err); color: var(--err); }
.banner.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.banner.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.banner a { color: inherit; font-weight: 600; text-decoration: underline; }
.banner strong { font-weight: 650; }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 550;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
}
.pill.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.pill.warn { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.pill.err { color: var(--err); border-color: var(--err); background: var(--err-soft); }

.meter { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 7px; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.meter.over > span { background: var(--warn); }

/* ---------- auth ------------------------------------------------------------ */

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth { width: 100%; max-width: 380px; }
.auth .auth-head { text-align: center; margin-bottom: 22px; }
.auth .mark {
  width: 42px; height: 42px; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  border-radius: 11px; font-size: 18px; font-weight: 700;
}
.auth h1 { font-size: 19px; font-weight: 650; margin: 0 0 4px; letter-spacing: -.3px; }
.auth .auth-head p { margin: 0; color: var(--text-muted); font-size: 13px; }
.auth .card { margin-bottom: 14px; }
.auth-theme { position: fixed; top: 18px; right: 18px; }

/* ---------- responsive ------------------------------------------------------ */

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: var(--shadow-md);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 30;
  }
  .nav-toggle { display: grid; }
  .content { padding: 18px 16px 48px; }
  .topbar { padding: 0 16px; }
  .user .who { display: none; }
}


/* ---------- user menu -------------------------------------------------------- */

.user { position: relative; }

.user-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 4px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 22px;
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.user-trigger:hover { background: var(--surface-2); border-color: var(--line); }
.user-trigger[aria-expanded="true"] { background: var(--surface-2); border-color: var(--line-strong); }
.user-trigger .chev { width: 15px; height: 15px; color: var(--text-faint); stroke-width: 2; transition: transform .15s; }
.user-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 60;
  display: none;
}
.menu.open { display: block; }
.menu-head { padding: 9px 11px 11px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head .email { display: block; font-size: 13px; font-weight: 600; word-break: break-all; }
.menu-head .role { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.menu a, .menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 11px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.menu a:hover, .menu button:hover { background: var(--surface-2); text-decoration: none; }
.menu svg { width: 16px; height: 16px; color: var(--text-faint); stroke-width: 1.7; flex: 0 0 auto; }
.menu .sep { height: 1px; background: var(--line); margin: 6px 0; }
.menu .danger { color: var(--err); }
.menu .danger svg { color: var(--err); }

/* ---------- charts ----------------------------------------------------------- */

.viz {
  --chart-grid: var(--line);
  --chart-axis: var(--text-faint);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .viz {
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
  }
}
:root[data-theme="dark"] .viz {
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
}

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-empty { padding: 46px 0; text-align: center; color: var(--text-muted); font-size: 13px; }
.chart-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.chart-head h2 { margin: 0; }
.chart-head .delta { font-size: 12px; font-weight: 600; }
.chart-head .delta.up { color: var(--ok); }
.chart-head .delta.down { color: var(--err); }
.chart-note { color: var(--text-muted); font-size: 12px; margin: 0 0 12px; }

.chart .gridline { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis { fill: var(--chart-axis); font-size: 10.5px; font-family: var(--sans); }
.chart .area-line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area-fill { fill: var(--series-1); opacity: .12; }
.chart .marker { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
.chart .point-label { fill: var(--text); font-size: 11px; font-weight: 600; font-family: var(--sans); }
.chart .bar { fill: var(--series-1); }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .hit:hover { fill: var(--text); opacity: .04; }
.chart .track { fill: var(--line); }
.chart .cat-label { fill: var(--text); font-size: 12.5px; font-weight: 550; font-family: var(--sans); }
.chart .cat-value { fill: var(--text); font-size: 12.5px; font-weight: 600; font-family: var(--mono); }
.chart .cat-bar.s1 { fill: var(--series-1); }
.chart .cat-bar.s2 { fill: var(--series-2); }
.chart .cat-bar.s3 { fill: var(--series-3); }
.chart .cat-bar.s4 { fill: var(--series-4); }

.chart-tip {
  position: fixed;
  z-index: 80;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s;
}
.chart-tip.show { opacity: 1; }
.chart-tip .k { color: var(--text-muted); }
.chart-tip .v { font-weight: 650; margin-left: 8px; }


/* ---------- merchant console additions --------------------------------------
   The client pages predate this stylesheet and use their own class names for
   form rows and page subtitles. Rather than rewrite twelve pages of markup,
   those names map onto the same tokens here.
   --------------------------------------------------------------------------- */

/* A page-level subtitle paragraph. Inside a table cell `.sub` is already the
   second line of a two-line cell, and that rule wins by specificity. */
p.sub { color: var(--text-muted); font-size: 12.5px; margin: 0 0 16px; }

/* The client pages' equivalent of .form-row, with bare <div> children. */
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.row > * { flex: 1 1 170px; min-width: 0; }
.row > button { flex: 0 0 auto; }
/* A bare <label> straight inside a row is a checkbox, not a field — it should hug
   its text instead of splitting the row into equal columns. */
.row > label { flex: 0 0 auto; }
.row label { margin-bottom: 5px; }

form.inline { display: inline; }
form.inline + form.inline { margin-left: 10px; }

/* A card that is nothing but a table wants no padding of its own. */
.card.scroll-x { padding: 0; overflow: hidden; overflow-x: auto; }
.card.scroll-x > h2 { padding: 18px 20px 0; margin-bottom: 10px; }

/* Standalone form fields outside a .field wrapper still need breathing room. */
.card > form label:not(:first-child) { margin-top: 14px; }
.card > form > label:first-child { margin-top: 0; }

/* ---------- payment detail (Plan page) --------------------------------------- */

.pay-address {
  display: block;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 14px;
  word-break: break-all;
  margin: 0 0 12px;
}
.pay-amount { font-size: 19px; font-weight: 650; letter-spacing: -.3px; }

/* ---------- usage meter in a stat tile ---------------------------------------- */

.stat .meter { margin-top: 10px; }
.stat .cap { color: var(--text-faint); font-weight: 500; font-size: 15px; }
.stat .sub { color: var(--text-faint); font-size: 11.5px; margin-top: 6px; }

/* ---------- auth footer link row ---------------------------------------------- */

.auth-foot { text-align: center; color: var(--text-muted); font-size: 12.5px; margin: 0; }

/* ---------- plan chooser ------------------------------------------------------ */

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

.plan-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
}
/* The plan they are on reads as selected rather than merely labelled. */
.plan-card.current { border-color: var(--accent); background: var(--accent-soft); }

.plan-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.plan-name { font-weight: 650; font-size: 14.5px; }

.plan-price { font-size: 23px; font-weight: 660; letter-spacing: -.5px; margin-bottom: 12px; }
.plan-price .per { font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin-left: 3px; }

.plan-facts { list-style: none; margin: 0 0 16px; padding: 0; flex: 1 1 auto; }
.plan-facts li { color: var(--text-muted); font-size: 12.5px; padding: 3px 0 3px 16px; position: relative; }
.plan-facts li::before { content: "·"; position: absolute; left: 5px; color: var(--text-faint); }

.plan-card button[disabled] { opacity: .55; cursor: default; }
.plan-card .hint { text-align: center; }