/* Matterhorn SaaS — the shared surface for two brands that already agree.
 *
 * WAYPOINT: mometic.com is a dark fintech marketing site (Poppins headings on
 * #121518, Open Sans body, a cyan-to-blue accent). The Matterhorn product is a
 * warm editorial paper surface (Georgia headings on #f3f0e8, a slate green
 * accent). Reconciling them by averaging would produce something that belongs
 * to neither, so this file does not average. It assigns each palette the
 * surface it already owns:
 *
 *   - Marketing and onboarding — pricing, sign-up, sign-in — wear Mometic's
 *     dark band and blue accent, so arriving from mometic.com is continuous.
 *   - Signed-in product surfaces — account, billing — wear Matterhorn's paper,
 *     cards and Georgia display type, so the wrapper and the research app are
 *     one product.
 *   - The header is where they already agree: Matterhorn's topbar is #101b18
 *     and Mometic's ink is #121518. Near enough to the same near-black that one
 *     bar serves both, and it is the element on every page.
 *
 * INVARIANTS
 *
 * - No external asset request. The font stacks name Poppins and Open Sans
 *   first because a visitor arriving from mometic.com may already have them
 *   cached, then fall back through Inter to the system stack. There is no
 *   @import and no <link> to a font host: the parent package serves its own
 *   favicon for exactly this reason, and a dashboard that must run on a machine
 *   with no internet cannot depend on fonts.google.com resolving.
 *
 * - Contrast is checked, not assumed. Two tokens exist only because the
 *   inherited value fails WCAG AA at body size, and both are marked below.
 *   Do not "simplify" them back.
 */

:root {
  /* -- Mometic layer: marketing and onboarding ------------------------- */
  --momo-ink: #121518;          /* mometic.com heading color and dark ground */
  --momo-ink-2: #1b2025;        /* raised panel on the dark ground */
  --momo-line: #2a3138;
  --momo-body: #a9b3bb;         /* mometic's #7c7c7c fails AA on its own ink;
                                   this is the same neutral, lifted to 7.0:1 */
  --momo-accent: #0093e9;       /* mometic's blue — display and links on dark */
  --momo-cyan: #21d4fd;
  --momo-teal: #80d0c7;
  --accent-strong: #0a72b4;     /* the same blue darkened for button fills:
                                   white on #0093e9 is 3.5:1, which fails AA at
                                   body size. This is 5.2:1. */
  --momo-gradient: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
  --momo-gradient-2: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);

  /* -- Matterhorn layer: signed-in product ---------------------------- */
  --ink: #17211e;
  --paper: #f3f0e8;
  --card: #fffefa;
  --line: #d9d6cc;
  --muted: #5c6764;             /* Matterhorn's #68736f is 4.3:1 on paper.
                                   This is 5.1:1. Used for body-adjacent text;
                                   #68736f survives for large labels only. */
  --muted-soft: #68736f;
  --green: #2f6c58;
  --green-soft: #dcebe3;
  --blue: #426b8c;
  --gold: #b77b22;
  --gold-soft: #fff3da;
  --red: #9a5047;
  --red-soft: #f8e5e1;
  --shadow: 0 8px 28px #13211d0f;
  --shadow-lift: 0 18px 44px #13211d1a;

  /* -- Type ----------------------------------------------------------- */
  --font-ui: "Open Sans", Inter, ui-sans-serif, system-ui, -apple-system,
             BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Poppins, "Open Sans", Inter, ui-sans-serif, system-ui,
                  sans-serif;
  --font-editorial: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 10px;
  --radius-lg: 16px;
  --wrap: 1080px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 var(--font-ui);
  letter-spacing: 0;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 520px; margin: 0 auto; padding: 0 24px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* -- Skip link: the first tab stop on every page, per WCAG 2.4.1 ------ */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--momo-ink); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------------
 * Header — the shared element, in the near-black both brands use
 * ------------------------------------------------------------------ */

.topbar {
  background: #101b18;
  color: #fff;
  border-bottom: 1px solid #27332f;
  position: sticky; top: 0; z-index: 30;
}
.topbar-inner {
  max-width: var(--wrap); margin: auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.mark {
  width: 34px; height: 34px; border: 1px solid #71847d; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 17px var(--font-editorial); color: #fff; flex: none;
}
.brand strong {
  display: block; color: #fff;
  font: 600 17px/1.1 var(--font-editorial); letter-spacing: .02em;
}
.brand small {
  display: block; color: #8fa39d; font-size: 9px;
  text-transform: uppercase; letter-spacing: .17em;
}
.topnav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.topnav a { color: #9fb0aa; padding: 8px 11px; border-radius: 7px; font-size: 14px; }
.topnav a:hover, .topnav a.active {
  background: #263631; color: #fff; text-decoration: none;
}
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.who { color: #c5d1cd; font-size: 12px; max-width: 210px; overflow: hidden;
       text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  line-height: 1.2; text-decoration: none; transition: transform .08s ease,
  box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { text-decoration: none; box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; box-shadow: none; transform: none;
}

.btn-primary {
  background: var(--accent-strong); border-color: var(--accent-strong);
  color: #fff;
}
.btn-primary:hover { background: #0a659f; border-color: #0a659f; }

.btn-green { background: var(--green); border-color: var(--green); color: #fff; }
.btn-green:hover { background: #275b4a; border-color: #275b4a; }

.btn-danger { background: var(--card); border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red-soft); }

.btn-quiet { background: transparent; border-color: transparent; color: var(--blue); }
.btn-quiet:hover { background: #ffffff8c; box-shadow: none; }

.btn-block { width: 100%; }
.btn-sm { padding: 7px 13px; font-size: 13.5px; }

/* On the dark band the paper-colored default button would vanish. */
.on-dark .btn {
  background: #ffffff14; border-color: #ffffff33; color: #fff;
}
.on-dark .btn:hover { background: #ffffff24; }
.on-dark .btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); }
.on-dark .btn-white { background: #fff; border-color: #fff; color: var(--momo-ink); }
.on-dark .btn-white:hover { background: #eef3f6; border-color: #eef3f6; }

/* Google's brand guidelines require their mark on a white or light field with
 * the wordmark legible; this is the neutral variant, which is compliant and
 * does not pretend to be a Google-issued asset. */
.btn-google {
  background: #fff; border-color: #d3d8dd; color: #1f2328; font-weight: 600;
}
.btn-google:hover { background: #f6f8fa; }
.btn-google svg { width: 18px; height: 18px; flex: none; }

/* ---------------------------------------------------------------------
 * Dark marketing band (Mometic)
 * ------------------------------------------------------------------ */

.band {
  background: var(--momo-ink); color: #fff;
  padding: 68px 0 76px;
  border-bottom: 1px solid var(--momo-line);
}
.band.tight { padding: 44px 0 48px; }
.band p { color: var(--momo-body); }

.eyebrow {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--momo-cyan); margin: 0 0 14px;
}
.band h1 {
  font: 600 clamp(30px, 4vw, 46px)/1.15 var(--font-display);
  letter-spacing: -.4px; margin: 0 0 16px; color: #fff;
  max-width: 20ch;
}
.band h1.wide { max-width: none; }
.band .lede {
  font-size: 17px; line-height: 1.6; max-width: 60ch; margin: 0 0 26px;
  color: var(--momo-body);
}
.gradient-text {
  background: var(--momo-gradient); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

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

.plans {
  display: grid; gap: 22px; margin: 34px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.plan-card {
  background: var(--momo-ink-2); border: 1px solid var(--momo-line);
  border-radius: var(--radius-lg); padding: 26px 24px 24px;
  display: flex; flex-direction: column; position: relative;
}
.plan-card.featured {
  border-color: #2f6f9c;
  box-shadow: 0 0 0 1px #0093e94d, 0 20px 50px #0093e91f;
}
.plan-card h2 {
  font: 600 20px/1.2 var(--font-display); margin: 0 0 4px; color: #fff;
}
.plan-card .cadence {
  color: var(--momo-body); font-size: 13px; margin: 0 0 20px;
}
.price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.price .amount {
  font: 600 40px/1.15 var(--font-display); color: #fff; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.price .per { color: var(--momo-body); font-size: 14px; }
.price-note { color: var(--momo-body); font-size: 13px; margin: 0 0 22px; min-height: 20px; }
.plan-card ul { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.plan-card li {
  color: #dbe3e9; font-size: 14.5px; padding: 7px 0 7px 26px;
  position: relative; line-height: 1.45;
}
.plan-card li::before {
  content: ""; position: absolute; left: 2px; top: 13px;
  width: 11px; height: 6px; border-left: 2px solid var(--momo-teal);
  border-bottom: 2px solid var(--momo-teal); transform: rotate(-45deg);
}
.ribbon {
  position: absolute; top: -11px; right: 20px;
  background: var(--momo-gradient); color: #04222f;
  font: 700 10px/1 var(--font-ui); letter-spacing: .12em;
  text-transform: uppercase; padding: 7px 11px; border-radius: 999px;
}
.plan-savings {
  color: var(--momo-teal); font-size: 13px; font-weight: 600; margin: 0 0 18px;
}

/* ---------------------------------------------------------------------
 * Paper surfaces (Matterhorn) — signed-in pages
 * ------------------------------------------------------------------ */

main { display: block; }
.sheet { padding: 34px 0 70px; }
.page-head { margin: 0 0 26px; }
.page-head h1 {
  font: 600 clamp(26px, 3vw, 34px)/1.1 var(--font-editorial);
  margin: 0 0 8px; letter-spacing: .01em;
}
.page-head p { color: var(--muted); margin: 0; max-width: 68ch; }

.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 24px; margin: 0 0 20px;
}
.panel > h2 {
  font: 600 19px/1.2 var(--font-editorial); margin: 0 0 4px;
}
.panel > h2 + .hint { margin: 0 0 18px; }
.panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 0 0 16px; flex-wrap: wrap;
}
.panel-head h2 { font: 600 19px/1.2 var(--font-editorial); margin: 0 0 4px; }
.panel-head .hint { margin: 0; }
.hint { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.grid-2 {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

.kv { display: grid; gap: 12px; margin: 0; }
.kv > div {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 0 0 12px; border-bottom: 1px dashed var(--line);
}
.kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt {
  color: var(--muted-soft); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; padding-top: 2px;
}
.kv dd { margin: 0; text-align: right; font-weight: 600; }
.kv dd small { display: block; font-weight: 400; color: var(--muted); }

/* ---------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------ */

.field { margin: 0 0 16px; }
.field label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted-soft); margin: 0 0 6px;
}
.field input, .field select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; color: var(--ink);
}
.field input:focus { border-color: var(--momo-accent); }
.field .help { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; }
.field .field-error { color: var(--red); font-size: 12.5px; margin: 6px 0 0; font-weight: 600; }
.field input[aria-invalid="true"] { border-color: var(--red); }

.on-dark .field label { color: #9fb0b8; }
.on-dark .field input {
  background: #0e1215; border-color: var(--momo-line); color: #fff;
}
.on-dark .field .help { color: var(--momo-body); }
.on-dark a { color: var(--momo-cyan); }

.form-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 20px 0 0;
}

.auth-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  padding: 30px 28px; margin: 40px auto 60px;
}
.auth-card h1 {
  font: 600 25px/1.15 var(--font-editorial); margin: 0 0 6px;
}
.auth-card > .hint { margin: 0 0 22px; }
.auth-alt {
  text-align: center; color: var(--muted); font-size: 14px; margin: 22px 0 0;
}
.divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0;
  color: var(--muted-soft); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
}
.divider::before, .divider::after {
  content: ""; height: 1px; background: var(--line); flex: 1;
}

/* ---------------------------------------------------------------------
 * Notices, badges, tables
 * ------------------------------------------------------------------ */

.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--muted-soft);
  background: var(--card); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 13px 16px; margin: 0 0 20px; font-size: 14px; line-height: 1.5;
}
.notice strong { display: block; margin: 0 0 2px; }
.notice.ok { border-left-color: var(--green); background: var(--green-soft); }
.notice.warn { border-left-color: var(--gold); background: var(--gold-soft); }
.notice.bad { border-left-color: var(--red); background: var(--red-soft); }
.notice.info { border-left-color: var(--blue); background: #eef3f7; }

.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font: 700 10.5px/1.35 var(--font-ui); letter-spacing: .1em;
  text-transform: uppercase; border: 1px solid transparent;
}
.badge.ok { background: var(--green-soft); color: #1f5343; border-color: #b7d5c7; }
.badge.warn { background: var(--gold-soft); color: #85571a; border-color: #e6cfa1; }
.badge.bad { background: var(--red-soft); color: #7d3a32; border-color: #e2bdb6; }
.badge.neutral { background: #eceae2; color: var(--muted); border-color: var(--line); }

table.rows { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rows th {
  text-align: left; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-soft); font-weight: 700;
  padding: 0 12px 8px 0; border-bottom: 1px solid var(--line);
}
table.rows td {
  padding: 11px 12px 11px 0; border-bottom: 1px solid #e7e4db;
  vertical-align: top;
}
table.rows tr:last-child td { border-bottom: 0; }
table.rows td.right, table.rows th.right { text-align: right; padding-right: 0; }
.table-scroll { overflow-x: auto; }

.mono { font-family: var(--font-mono); font-size: 12.5px; }

/* The plan chooser on the billing page: two radio cards on paper. */
.choices { display: grid; gap: 14px; margin: 0 0 6px; }
.choice {
  display: flex; gap: 13px; align-items: flex-start; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fffdf6; cursor: pointer;
}
.choice:hover { border-color: #c3bfb2; }
.choice input { margin: 3px 0 0; accent-color: var(--green); flex: none; }
.choice .choice-body { flex: 1; }
.choice strong { display: block; font-size: 15.5px; }
.choice .choice-note { color: var(--muted); font-size: 13px; margin: 3px 0 0; }
.choice[data-current="1"] {
  border-color: var(--green); background: var(--green-soft);
}

/* Stripe Elements mounts here; the border is ours so the card field matches
 * every other input on the page. */
#card-element {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 13px;
}
#card-element.StripeElement--focus { border-color: var(--momo-accent); }
#card-element.StripeElement--invalid { border-color: var(--red); }

footer.site {
  border-top: 1px solid var(--line); background: #eceae2;
  padding: 26px 0 34px; color: var(--muted); font-size: 13px;
}
footer.site .wrap { display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap; }
footer.site a { color: var(--muted); }
footer.site .legal { max-width: 60ch; line-height: 1.5; }

@media (max-width: 640px) {
  .topnav { display: none; }
  .band { padding: 44px 0 50px; }
  .kv > div { flex-direction: column; gap: 4px; }
  .kv dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* Enterprise review: Matterhorn leads; Mometic is a restrained blue accent. */
:root {
  --momo-ink: #1b1c20; --momo-ink-2: #222328; --momo-line: #3b3d44;
  --momo-body: #b5bac3; --momo-accent: #c5c9d1; --momo-cyan: #c5c9d1; --momo-teal: #79c4a2;
  --accent-strong: #464950; --ink: #1d303b; --paper: #edf1f3; --card: #fff;
  --line: #c9d3d9; --muted: #526774; --muted-soft: #526774;
  --green: #28684e; --green-soft: #e4f0e9; --blue: #285d77;
  --gold: #805a17; --red: #a03e37; --shadow: none; --shadow-lift: none;
  --font-ui: "IBM Plex Sans", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-ui); --font-editorial: var(--font-ui);
  --radius: 4px; --radius-lg: 4px; --wrap: 1200px;
}
body { font-size: 16px; }
.topbar { background: #1b1c20; border-color: #3b3d44; }
.topbar-inner { min-height: 76px; padding-block: 16px; gap: 24px; }
.brand strong { display: block; font: 700 28px/1.02 Arial, Helvetica, sans-serif; letter-spacing: -.015em; text-transform: none; }
.brand small { font-size: 12px; line-height: 1.15; margin-top: 2px; letter-spacing: .005em; text-transform: none; color: #b5bac3; }
.mark { width: 48px; height: 32px; border: 0; border-radius: 0; }
.mark svg { width: 100%; height: 100%; }
.topnav a { border-radius: 3px; }
.topnav a:hover, .topnav a.active { background: #292b31; }
.btn { font-weight: 500; min-height: 44px; }
.btn:hover, .btn:active { box-shadow: none; transform: none; }
.btn-primary:hover { background: #3d4046; border-color: #3d4046; }
.gradient-text { background: none; -webkit-text-fill-color: currentColor; color: #ebecf0; }
.eyebrow, .ribbon { font-size: 12px; font-weight: 500; }
.ribbon { background: #c5c9d1; color: #1b1c20; border-radius: 3px; }
.plan-card.featured { border-color: #c5c9d1; box-shadow: none; }
.band h1, .page-head h1, .auth-card h1 { font-weight: 500; letter-spacing: -.035em; }
.plans { gap: 0; border: 1px solid var(--momo-line); border-radius: 4px; }
.plan-card { border: 0; border-right: 1px solid var(--momo-line); border-radius: 0; padding: 30px; }
.plan-card:last-child { border-right: 0; }
.plan-card.featured { background: #292b31; }
.panel > h2, .panel-head h2 { font-weight: 550; }
.kv > div { border-bottom-style: solid; }
.kv dt, .badge { font-size: 12px; font-weight: 500; }
.badge { border-radius: 3px; }
.hint, .field label { font-size: 14px; }
.field input, .field select { font-size: 16px; min-height: 44px; }
.choice { background: var(--card); }
footer.site { background: #e3e9ed; }
.table-scroll { max-width: 100%; overscroll-behavior-inline: contain; }
.grid-2 > *, .plans > *, .choice-body { min-width: 0; }
@media (max-width: 760px) {
  .topbar-inner { flex-wrap: wrap; gap: 12px; }
  .topnav { display: flex; order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .topnav a { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
  .topbar-actions { margin-left: auto; gap: 6px; }
  .who { max-width: 140px; }
  .grid-2, .plans { grid-template-columns: minmax(0, 1fr); }
  .plan-card { border-right: 0; border-bottom: 1px solid var(--momo-line); padding: 24px; }
  .plan-card:last-child { border-bottom: 0; }
  .panel { padding: 20px 16px; }
  .kv dd { overflow-wrap: anywhere; }
  .form-actions { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .topbar-actions { flex-basis: 100%; margin-left: 0; }
  .who { max-width: 190px; margin-right: auto; }
}

/* Track the descriptor to the wordmark without stretching letterforms. */
.brand-copy { display: inline-block; flex: none; }
.brand-tagline { display: block; width: 0; min-width: 100%; height: 14px; margin-top: 2px; overflow: visible; color: #b5bac3; }
.brand-tagline text { fill: currentColor; font: 12px "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0; font-kerning: none; }

/* Account controls and comfortable numeric spacing. */
.account-menu { position:relative; margin-left:auto; }
.account-menu summary { list-style:none; display:grid; place-items:center; width:40px; height:38px; border:1px solid var(--line); border-radius:8px; cursor:pointer; color:#fff; }
.account-menu summary::-webkit-details-marker { display:none; }
.account-menu-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:100; min-width:160px; padding:6px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lift); }
.account-menu-panel a,.account-menu-panel button { display:block; width:100%; padding:10px 12px; border:0; border-radius:6px; background:transparent; color:var(--ink); text-align:left; font:inherit; }
.account-menu-panel a:hover,.account-menu-panel button:hover { background:var(--line); text-decoration:none; }
.terms-copy { max-width:800px; }
.terms-copy h2 { margin-top:28px; }
.check-row,.payment-choice { display:flex; gap:12px; align-items:flex-start; font-weight:400; letter-spacing:.005em; text-transform:none; }
.check-row input,.payment-choice input { flex:0 0 auto; width:18px; height:18px; margin:4px 0 0; }
.payment-choice { border:1px solid var(--line); border-radius:10px; padding:16px; margin:12px 0; cursor:pointer; }
.payment-choice:has(input:checked) { border-color:var(--blue); }
.payment-choice span { flex:1; }
.payment-choice strong { float:right; margin-left:12px; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.payment-choice small { display:block; margin-top:8px; color:var(--muted); }
.purchase-policy { font-size:13px; line-height:1.6; margin:20px 0; }
.bank-note { font-size:13px; margin:0 0 16px; }
.paid-amount { font-size:36px; font-weight:650; letter-spacing:.02em; font-variant-numeric:tabular-nums; margin:12px 0; }
.payment-result { width:min(480px,calc(100vw - 32px)); border:1px solid var(--line); border-radius:16px; padding:28px; color:var(--ink); background:var(--card); }
.payment-result::backdrop { background:rgba(0,0,0,.6); }
.mono,table.rows td,.stat-value { font-variant-numeric:tabular-nums; letter-spacing:.015em; }
@media(max-width:620px) { .topbar-actions { flex-basis:auto; margin-left:auto; } }