* { box-sizing: border-box; }

/* Typography and shape are per theme, not shared.
   Four of the five live themes used this one stack, so four of five
   storefronts were typographically identical and only the palette differed.
   Each theme now sets its own faces, weights, tracking and corner radii; the
   values below are the fallback for a theme that sets none.

   System stacks only. Loading a web font would mean relaxing the CSP for a
   font host and paying a round trip on every first view, for sites whose
   whole problem is looking trustworthy quickly. */
:root {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: var(--font-body);
  --font-num: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --h-weight: 700;
  --h-tracking: -0.01em;
  --h-transform: none;
  --body-size: 16px;
  --body-leading: 1.55;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --bullet: "\2713";
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  background: var(--bg);
  color: var(--text);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .brand {
  font-family: var(--font-head);
  font-weight: var(--h-weight);
  letter-spacing: var(--h-tracking);
  text-wrap: balance;
}
h1 { text-transform: var(--h-transform); }

/* Money and coin amounts line up down a column only with tabular figures. */
.price, .price-display, .cell-price, .deposit-amount-inline, .calc-price { font-variant-numeric: tabular-nums; }

a { color: var(--accent); }

.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.5rem;
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06);
  background: var(--bg-alt);
  position: relative;
  z-index: 20;
}
.brand-block {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  text-decoration: none;
  line-height: 1.1;
  flex-shrink: 0;
}
.brand-line { display: flex; align-items: center; gap: 0.45rem; }
.brand-mark { flex-shrink: 0; color: var(--accent); width: 22px; height: 22px; }
.brand-logo-img { display: block; width: 22px; height: 22px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.site-nav .brand {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}

.nav-links { display: flex; align-items: center; gap: 0.4rem; }
.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

.nav-contact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.contact-icon:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.site-nav--a .nav-links { flex: 1 1 auto; justify-content: center; }

.site-nav--b { gap: 0.75rem; }
.site-nav--b .nav-links { margin-left: auto; }

.site-nav--c { padding: 0.4rem 1.25rem; border-bottom-width: 1px; }
.site-nav--c .nav-links { margin-left: auto; gap: 0.15rem; }
.site-nav--c .nav-links a {
  border: none;
  background: none;
  padding: 0.25rem 0.55rem;
  font-weight: 500;
}
.site-nav--c .nav-links a:hover { background: none; color: var(--accent); }
.site-nav--c .contact-icon { width: 1.65rem; height: 1.65rem; }

.site-nav--d { flex-wrap: wrap; row-gap: 0.5rem; position: relative; padding-block: 0.7rem; }
.site-nav--d .brand-block { flex-basis: 100%; }
.site-nav--d .nav-links { flex-basis: 100%; justify-content: flex-start; }
.site-nav--d .nav-contact { position: absolute; right: 1.5rem; top: 0.7rem; }

.site-nav--e .nav-links { order: 1; margin-right: auto; }
.site-nav--e .nav-contact { order: 2; }
.site-nav--e .brand-block { order: 3; align-items: flex-end; text-align: right; }
.site-nav--e .brand-line { flex-direction: row-reverse; }

.site-nav--f .nav-links { order: 1; flex: 1 1 0; justify-content: flex-start; }
.site-nav--f .brand-block { order: 2; align-items: center; }
.site-nav--f .brand-line { justify-content: center; }
.site-nav--f .nav-contact { order: 3; flex: 1 1 0; justify-content: flex-end; }

.site-nav--g { padding: 0.5rem 1.5rem; }
.site-nav--g .nav-links { display: none; }

@media (max-width: 780px) {
  /* The links used to be display:none here with no menu button, so on a phone
     none of the five sites had any header navigation. They now drop to a
     second row that scrolls sideways if it has to. CSS only, so there is no
     script for the CSP to block and nothing that can fail to load. */
  .site-nav { flex-wrap: wrap; row-gap: 0.4rem; }
  .site-nav .nav-links {
    order: 9; flex: 1 1 100%; justify-content: flex-start;
    /* nowrap is explicit: the `nav { flex-wrap: wrap }` rule in the 700px block
       below matches this element by tag and would otherwise stack the links
       into a second row, a 135px header on a 390px phone. */
    flex-wrap: nowrap;
    margin: 0; padding: 0 0 0.15rem; gap: 0.3rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .site-nav .nav-links::-webkit-scrollbar { display: none; }
  .site-nav .nav-links a {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    min-height: 40px; padding: 0.4rem 0.65rem;
  }
  .site-nav--g .nav-links { display: none; }
  .site-nav--d { padding-block: 0.6rem; }
  .site-nav--d .brand-block { flex-basis: auto; }
}
.picker-form { display: flex; gap: 1rem; }
.picker-form label {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.picker-form select {
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
}

.hero { text-align: center; padding: 3rem 1.5rem 1.5rem; }
.hero h1 { font-size: 2.25rem; margin-bottom: 0.5rem; }
.subhead { color: var(--text-muted); font-size: 1.05rem; }

.plans-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.5rem;
}
.plans-centered { justify-content: center; }

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
}
.plans-grid .tier-card { width: 100%; }

.hero-compact { padding: 2rem 1.5rem 1rem; }
.plans-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem;
}
.tier-row {
  width: auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 1.5rem;
}
.tier-row .tier-row-main { flex: 1 1 auto; min-width: 0; }
.tier-row h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.15rem; font-size: 1.1rem; }
.tier-row .tagline { min-height: 0; margin: 0 0 0.5rem; }
.tier-row .term-tabs { margin: 0; }
.tier-row-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  text-align: right;
}
.tier-row-side .price-display { margin-top: 0; }
.tier-row-side .savings { margin: 0; }
.tier-row-side .buy-btn { padding: 0.5rem 1.1rem; }
.badge-inline {
  position: static;
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
}

.side-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
.side-grid-right { grid-template-columns: 1fr 380px; }
.side-grid-right .content-col { order: 1; }
.side-grid-right .plans-col { order: 2; }
.plans-col { display: flex; flex-direction: column; gap: 1.5rem; }
.content-col h1 { font-size: 2rem; }

.content-col .how-it-works,
.content-col .home-guides { max-width: none; margin-left: 0; margin-right: 0; padding: 0; }
.content-col .home-guides { margin-top: 2.5rem; }
/* The centre and all-markets layouts wrap the page in their own padded column,
   so .how-it-works adding another 1.5rem each side pushed that one section in
   from the hero and the tables above it: a 302px text column on a 390px phone
   where everything else had 350px. Same reset the content column applies. */
.ref-wrap .how-it-works, .ct-wrap .how-it-works { padding-left: 0; padding-right: 0; }

.tier-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  width: 300px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.tier-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tier-card .badge {
  position: absolute;
  top: -12px;
  right: 1rem;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-weight: 600;
}
.tier-card h3 { margin: 0 0 0.25rem; font-size: 1.3rem; }
.tier-card .tagline { color: var(--text-muted); font-size: 0.9rem; min-height: 2.5em; }

.term-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
.term-tab {
  flex: 1 1 auto;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
}
.term-tab.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.price-display { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.5rem; }
.price-display .price { font-size: 2rem; font-weight: 700; }
.price-display .per-month { color: var(--text-muted); font-size: 0.85rem; }
.savings { color: var(--success); font-size: 0.85rem; margin: 0.25rem 0 1rem; }

.features { list-style: none; padding: 0; margin: 0 0 1.5rem; flex-grow: 1; }
/* Bullets. A tick glyph in the text flow wrapped badly and sat on the
   baseline; the marker is now positioned so multi-line items align to the
   text rather than to the glyph, and its shape is a theme variable. */
.features { list-style: none; padding: 0; margin: 0 0 1rem; }
.features li {
  position: relative;
  padding: 0.28rem 0 0.28rem 1.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.features li::before {
  content: var(--bullet);
  position: absolute;
  left: 0;
  top: 0.28rem;
  color: var(--success);
  font-weight: 700;
  font-size: 0.85em;
  line-height: 1.6;
}

.buy-btn {
  display: block;
  text-align: center;
  padding: 0.75rem;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}
.buy-btn:hover { opacity: 0.9; }

.market-group { padding: 1rem 1.5rem 0.5rem; max-width: 1100px; margin: 0 auto; }
.market-group h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
.market-tagline { color: var(--text-muted); margin-top: 0.5rem; }

/* Market groups on the all-markets layout.
   Four vendors stacked in one column all carried the same hairline heading,
   so the page read as one undifferentiated list and the three non-Claude
   markets were easy to scroll straight past. Each group now gets its own
   hue, a lettered chip and real vertical separation.

   The hues are deliberately NOT the vendors' brand colours. These are
   resold gift subscriptions with no affiliation, and copying a brand
   palette next to a brand name is the sort of thing that implies one. */
.market-group { --market-accent: var(--accent); margin-top: 2.5rem; }
.market-group[data-market="deepseek"] { --market-accent: #3b82f6; }
.market-group[data-market="cursor"]   { --market-accent: #8b5cf6; }
.market-group[data-market="gemini"]   { --market-accent: #0ea5a4; }

.market-group h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--market-accent);
  padding: 0 0 0.5rem 0.7rem;
  margin-bottom: 0;
}
.market-group h2::before {
  content: attr(data-letter);
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--market-accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}
.market-group .market-tagline { padding-left: 0.7rem; }
.market-group .tier-card.featured { border-color: var(--market-accent); box-shadow: 0 0 0 1px var(--market-accent); }

/* What the subscription costs at the vendor's own checkout, next to what it
   costs here. A shopper's first question about a reseller is how much the
   convenience is costing them, and answering it in figures on the card is
   more persuasive than any adjective. */
.retail-ref {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.retail-ref .retail-line { color: var(--text); font-weight: 600; }
.retail-ref .premium-line::before { content: " "; }
.retail-ref [hidden] { display: none; }
.tier-row .retail-ref { margin-bottom: 0; }

.how-it-works { max-width: 700px; margin: 2rem auto; padding: 0 1.5rem; }
.how-it-works ol { padding-left: 1.2rem; }
.how-it-works li { margin-bottom: 0.5rem; }

.home-highlights { max-width: 1000px; margin: 2.5rem auto 1rem; padding: 0 1.5rem; }
.who-we-are { max-width: 700px; margin: 0 auto 2rem; }
.who-we-are h2 { margin-bottom: 0.5rem; }
.who-we-are p { color: var(--text-muted); line-height: 1.6; }
.who-we-are a { color: var(--accent); }

.trust-bullets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.trust-bullet {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.trust-bullet h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.trust-bullet p { margin: 0; color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }

.home-guides-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem; margin-bottom: 1rem; }
.home-guides-heading h2 { margin: 0; }
.home-guides-heading a { color: var(--accent); text-decoration: none; font-size: 0.85rem; }
.home-guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.home-guide-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease;
}
.home-guide-card:hover { border-color: var(--accent); }
.home-guide-card h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.home-guide-card p { margin: 0 0 0.6rem; color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }
.home-guide-card .read-guide { font-size: 0.8rem; color: var(--accent); font-weight: 600; }

.calculator-wrap { max-width: 640px; margin: 0 auto; padding: 0 1.5rem 2rem; }
.calculator-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
}
.calculator-heading { margin-bottom: 1.25rem; }
.calculator-heading h2 { margin: 0.15rem 0 0; font-size: 1.3rem; }

.swap-wrap { max-width: 1040px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.swap-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.75rem; align-items: start; }
.swap-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; padding: 2rem; }
.swap-grid.calculator-form fieldset { margin: 0 0 1.5rem; }
.swap-panel-summary {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--accent) 45%, transparent);
}
.swap-panel-summary .price-panel { background: transparent; border: none; padding: 0; margin: 0; }
.swap-panel-summary .calc-submit { width: 100%; }
@media (max-width: 860px) {
  .swap-grid { grid-template-columns: 1fr; }
  .swap-panel-summary { position: static; box-shadow: none; }
  .swap-panel { padding: 1.5rem; }
}
.section-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.calculator-form fieldset { border: none; padding: 0; margin: 0 0 1.25rem; }
.calculator-form legend.section-label { margin-bottom: 0.5rem; padding: 0; }
.calc-email { display: block; }
.calc-email input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
.calc-email input:focus { outline: none; border-color: var(--accent); }

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.plan-btn, .dur-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.plan-btn {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
}
.plan-btn .plan-name { font-weight: 700; font-size: 0.95rem; }
.plan-btn small { color: var(--text-muted); font-size: 0.75rem; }
.plan-btn.is-active, .dur-btn.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.duration-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dur-btn { padding: 0.5rem 0.9rem; font-size: 0.85rem; }

.price-panel {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.25rem;
}
.price-total { display: flex; justify-content: space-between; align-items: baseline; }
.price-total p { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.price-total strong { font-size: 1.9rem; }
#calc-currency-label { color: var(--text-muted); font-size: 0.8rem; }
.price-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.price-breakdown div { display: flex; justify-content: space-between; font-size: 0.82rem; }
.price-breakdown span { color: var(--text-muted); }

.calc-submit { width: 100%; padding: 0.85rem; font-size: 0.95rem; margin-top: 0.25rem; }

@media (max-width: 480px) {
  .plan-grid { grid-template-columns: 1fr; }
}

.checkout-wrap { max-width: 560px; margin: 3rem auto; padding: 0 1.5rem; }
.order-summary {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.checkout-form { display: flex; flex-direction: column; gap: 1rem; }
.checkout-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
.checkout-form input, .checkout-form select {
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
/* Submit buttons only. This was `.checkout-form button`, which is more specific
   than .coin-btn, .network-option and .coin-toggle, so every coin tile and
   network chip in the form took the accent fill and accent-text colour: coin
   names came out as pale accent on accent, symbols as black on purple, and the
   selected network chip (white text on a near-white fill) vanished. Contrast
   audits passed the whole time because they read the theme variables, not the
   rendered cascade. Anything that is not a submit button styles itself. */
.checkout-form button[type="submit"] {
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  cursor: pointer;
}
.method-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.method-tab {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}
.method-tab.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.method-tab.active .soon-badge { background: rgba(0, 0, 0, 0.15); color: inherit; }
.method-panel { margin-top: -0.25rem; }
.method-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  margin: 0;
}
.deposit-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
  margin: 1.5rem 0;
}
/* .deposit-qr is defined once, in the deposit panel block further down. There
   used to be a second definition here that framed the <img> as well, so the code
   sat in a rounded box inside another rounded box. */
.demo-warning {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.fine-print { font-size: 0.8rem; color: var(--text-muted); }

.site-footer {
  padding: 2.5rem 1.5rem 1.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: center;
  max-width: 980px;
  margin: 0 auto 2rem;
}
.footer-brand { flex: 1 1 240px; max-width: 300px; }
.footer-brand .brand-line { margin-bottom: 0.6rem; }
.footer-mission { font-size: 0.85rem; line-height: 1.55; margin: 0 0 0.9rem; }
.trust-badges { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.trust-badges li {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding-left: 1.1rem;
  position: relative;
}
.trust-badges li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}
.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 170px));
  gap: 1.5rem;
  flex: 2 1 500px;
}
.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col h4 {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}
.footer-col a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
}
.footer-col a:hover { color: var(--accent); }
.footer-coins { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.3rem; }
.footer-legal {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}
.footer-legal p { margin: 0.35rem 0; }
.footer-legal p:first-child { font-size: 0.78rem; line-height: 1.6; }
.order-status-badge { font-size: 0.85rem; color: var(--text-muted); }

.track-order {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: center;
  margin-top: 0.85rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.track-order label { white-space: nowrap; }
.track-order input {
  width: 100px;
  padding: 0.22rem 0.4rem;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.track-order button {
  padding: 0.22rem 0.55rem;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.track-order button:hover { color: var(--text); border-color: var(--text-muted); }

.track-order--b, .track-order--f { justify-content: flex-end; }
.track-order--c { justify-content: flex-start; opacity: 0.85; }
.track-order--d { justify-content: center; margin-top: 1.1rem; }
.track-order--e { justify-content: flex-end; font-size: 0.68rem; }
.track-order--e input, .track-order--e button { font-size: 0.68rem; }
.track-order--g { justify-content: flex-start; }

.page-wrap { max-width: 700px; margin: 0 auto; padding: 3rem 1.5rem 2rem; }
.page-wrap h1 { margin-bottom: 0.25rem; }
.page-intro { color: var(--text-muted); }
.page-content h2 { margin-top: 2rem; font-size: 1.15rem; }
.page-content p { color: var(--text-muted); line-height: 1.65; }
.page-content ul { color: var(--text-muted); line-height: 1.65; }
.page-content a { color: var(--accent); }

.reviews-summary { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 2rem; }
.reviews-summary-score { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.reviews-summary p { margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.85rem; }
.star-rating { color: var(--accent); letter-spacing: 0.05em; font-size: 1.05rem; }
.review-list { display: flex; flex-direction: column; gap: 1rem; }
.review-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.5rem; }
.review-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.review-item-name { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.review-body { margin: 0 0 0.6rem; line-height: 1.6; }
.review-meta { margin: 0; font-size: 0.78rem; color: var(--text-muted); }

.review-form { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; margin: 1.5rem 0; }
.review-form h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.review-form p.review-form-note { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.85rem; }
.star-picker { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.3rem; margin-bottom: 1rem; }
.star-picker input { position: absolute; opacity: 0; pointer-events: none; }
.star-picker label { font-size: 1.6rem; color: var(--border); cursor: pointer; line-height: 1; }
.star-picker input:checked ~ label { color: var(--accent); }
.star-picker:hover label { color: var(--border); }
.star-picker label:hover, .star-picker label:hover ~ label { color: var(--accent); }
.review-form textarea {
  width: 100%; box-sizing: border-box; min-height: 90px; padding: 0.7rem 0.8rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 0.92rem; resize: vertical; margin-bottom: 0.9rem;
}
.review-submitted { color: var(--success); font-size: 0.9rem; }
.guide-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.guide-list a {
  display: block;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
}
.guide-list a:hover { border-color: var(--accent); }
.review-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.review-card p { color: var(--text); margin: 0 0 0.4rem; }
.review-meta { color: var(--text-muted); font-size: 0.8rem; }

@media (max-width: 700px) {
  .footer-top { flex-direction: column; align-items: center; text-align: center; }
  .footer-brand { max-width: 340px; }
  .trust-badges { align-items: center; }
  .trust-badges li { padding-left: 0; }
  .trust-badges li::before { position: static; margin-right: 0.35rem; }
  .site-footer-grid { grid-template-columns: repeat(2, minmax(130px, 160px)); }
}
@media (max-width: 380px) {
  .site-footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .side-grid, .side-grid-right { grid-template-columns: 1fr; }
  .side-grid-right .content-col, .side-grid-right .plans-col { order: initial; }
  .tier-row { flex-direction: column; align-items: stretch; }
  .tier-row-side { align-items: stretch; text-align: left; }
}

/* ---------- per-layout checkout pages (grid/calculator/side-left/side-right/all) ----------
 * These templates shipped without matching CSS — every card/section class
 * below had zero rules anywhere, so they rendered as unstyled boxes with no
 * background/border, and the network-picker <dialog> was invisible. Coin
 * buttons were never the problem (.coin-btn is already hardcoded grey,
 * independent of theme) — the surrounding chrome just had nothing to sit in. */
.checkout-sub { color: var(--text-muted); font-size: 0.92rem; margin: 0.3rem 0 1.5rem; }

.card-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.card-eyebrow-spaced { margin-top: 1.5rem; }

/* side-left / side-right: two cards side by side. Each template's own DOM
 * order already puts the right card on the right — no extra flip needed. */
.split-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 720px) { .split-wrap { grid-template-columns: 1fr; } }

.summary-card, .pay-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
}
.summary-card h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.sum-price { margin: 0 0 1rem; font-size: 1.6rem; font-weight: 700; }
.sum-price .per-month { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); margin-left: 0.3rem; }
.sum-email { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; margin-bottom: 1rem; }
.sum-email span { color: var(--text-muted); font-size: 0.78rem; }
.sum-email input {
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.sum-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sum-points li { font-size: 0.82rem; color: var(--text-muted); padding-left: 1.2rem; position: relative; }
.sum-points li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); }
.sum-onchain { font-size: 0.82rem; color: var(--text-muted); margin-top: 1rem; }

/* grid layout: three step cards */
.checkout-layout-grid .checkout-wrap,
.checkout-layout-all .checkout-wrap,
.checkout-layout-side-left .checkout-wrap,
.checkout-layout-side-right .checkout-wrap {
  max-width: 900px;
}
.steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.steps-grid .step-card:nth-child(3) { grid-column: 1 / -1; }
.step-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.step-card h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.grid-email { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); }
.grid-email input { padding: 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.95rem; }
.step-submit { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.6rem; }
.onchain-line { margin: 0; font-size: 0.8rem; color: var(--text-muted); text-align: center; }
@media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr; } }

/* calculator layout: one stacked card */
.builder-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.builder-sec h2 { margin: 0 0 0.6rem; font-size: 1rem; }
.builder-item { margin: 0; font-size: 0.95rem; color: var(--text-muted); }
.builder-email input { width: 100%; box-sizing: border-box; padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.builder-submit { width: 100%; }
.breakdown { display: flex; flex-direction: column; gap: 0.4rem; }
.breakdown-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); }
.breakdown-row.total { font-size: 1rem; font-weight: 700; color: var(--text); padding-top: 0.5rem; border-top: 1px solid var(--border); }

/* all-in-one layout: services + steps */
.checkout-all-wrap .all-step { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; margin-bottom: 1rem; }
.all-step h2 { margin: 0.2rem 0 0.8rem; font-size: 1.05rem; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.svc-card { text-align: left; padding: 0.9rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; font-family: inherit; }
.svc-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.svc-card small { color: var(--text-muted); font-size: 0.78rem; }
.svc-count { font-size: 0.72rem; color: var(--text-muted); }
.dur-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.all-price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.all-price-row span:first-child { color: var(--text-muted); font-size: 0.85rem; }
.all-price-row strong { font-size: 1.5rem; }

/* track-again mini-form (search order status from any checkout page) */
.track-again { margin-top: 2rem; text-align: center; }
.track-again-label { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 0.5rem; }
.track-again-row { display: flex; gap: 0.5rem; justify-content: center; }
.track-again-row input { padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); max-width: 220px; }
.track-again-row button { padding: 0.6rem 1rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); cursor: pointer; font-family: inherit; }

/* network picker modal — same fixed-grey treatment as .coin-btn on purpose,
 * so choosing a network reads as one continuous step with choosing a coin,
 * regardless of site theme. This is also what silently broke "defaults to
 * Tron": the <dialog> had no styling at all, so if it ever failed to look
 * like a real modal the network never got set and the server fell back to
 * its own default network order. */
/* Theme variables throughout. This block used to hardcode #1c1c1c / #262626 /
   #f0f0f0, exactly the mistake the coin picker was fixed for and this was
   missed: on the three light themes the network chooser opened as a dark
   panel dropped onto a light page. Nothing here assumes a background. */
.net-modal {
  border: 1px solid var(--border); border-radius: var(--radius-lg, 14px);
  padding: 1.25rem; max-width: 420px; width: calc(100% - 2rem);
  background: var(--card-bg); color: var(--text);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.net-modal::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); }
.net-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.net-modal-head h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
.net-close {
  width: 32px; height: 32px; border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border); background: var(--bg-alt); color: var(--text);
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.net-close:hover { border-color: var(--accent); color: var(--accent); }
.net-modal-sub { font-size: 0.84rem; line-height: 1.5; color: var(--text-muted); margin: 0 0 1rem; }
.net-scroll { display: flex; flex-direction: column; gap: 0.4rem; max-height: 320px; overflow-y: auto; }
.net-btn {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.75rem;
  border: 1px solid var(--border); background: var(--bg-alt); color: var(--text);
  border-radius: var(--radius-md, 10px); cursor: pointer; text-align: left;
  font-family: inherit; font-size: 0.92rem; min-height: 44px;
}
.net-btn:hover { background: var(--card-bg); border-color: var(--accent); }
.net-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.net-badge {
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--card-bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; overflow: hidden;
}
.net-badge-letter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.net-icon { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }

/* ============================================================
   Mobile hardening.
   The layouts were built desktop-first and carried 29 fixed pixel widths
   with no overflow guard, so a phone got a horizontally scrolling page and
   tables that ran off the screen. These rules cap everything to the
   viewport without touching the desktop appearance.
   ============================================================ */

html, body { max-width: 100%; overflow-x: hidden; }

/* Anything that can carry a long unbroken string (an address, a tx hash,
   an order code) wraps instead of forcing the page wider. */
.deposit-address, .order-code, code, pre, .tx-id, .mono { overflow-wrap: anywhere; }

img, svg, video, canvas, table { max-width: 100%; height: auto; }

/* Wide content scrolls inside its own box, never the page. */
.table-scroll, table { display: block; max-width: 100%; overflow-x: auto; }

@media (max-width: 700px) {
  /* Fixed widths become fluid. */
  [style*="width:"], .card, .panel, .item-card, .checkout-box, .deposit-box {
    max-width: 100% !important;
  }

  /* Multi-column layouts collapse to one column. */
  .grid, .items-grid, .layout-split, .side-rail, .two-col, .calc-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  /* Touch targets: 44px is the accessibility floor. */
  button, .btn, input[type="submit"], select, a.button, .coin-option, .term-tab {
    min-height: 44px;
  }
  input, select, textarea {
    /* 16px stops iOS Safari zooming the whole page on focus. */
    font-size: 16px;
  }

  /* Stop long nav rows overflowing. */
  nav, .nav, .site-nav, .footer-links { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  h1 { font-size: clamp(1.4rem, 7vw, 2rem); }
  h2 { font-size: clamp(1.15rem, 5.5vw, 1.5rem); }
  .price, .price-total { font-size: clamp(1.5rem, 8vw, 2.2rem); }
}

/* Respect a reader's motion preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Guides index cards. The index used to be a bare <ul> of four identical
   links, which read as thin and duplicated across every domain. */
.guide-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.guide-card {
  border: 1px solid var(--border, rgba(128,128,128,.25));
  border-radius: 10px; padding: 1.1rem 1.25rem;
}
.guide-card h2 { margin: 0 0 .4rem; font-size: 1.1rem; line-height: 1.35; }
.guide-card h2 a { text-decoration: none; }
.guide-card h2 a:hover { text-decoration: underline; }
.guide-card p { margin: 0 0 .7rem; opacity: .82; line-height: 1.55; }
.guide-link { font-size: .92rem; font-weight: 600; }
@media (min-width: 760px) { .guide-list { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Coin picker.
   Rewritten to use theme variables. The previous version hardcoded dark
   greys with !important, which meant the picker rendered as a dark panel on
   the three light themes. Nothing here assumes a background colour.
   ============================================================ */

.coin-heading {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; margin-bottom: .55rem; flex-wrap: wrap;
}
.coin-heading span { color: var(--text-muted); font-size: .78rem; }

/* Filter box. With 49 coins a grid alone means hunting; typing two letters
   is faster than scanning. Hidden entirely when JS is off, because a filter
   that does nothing is worse than no filter. */
.coin-filter {
  flex: 1 1 130px; min-width: 0; max-width: 220px;
  padding: .4rem .7rem;
  font: inherit; font-size: .82rem;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.coin-filter:focus { outline: none; border-color: var(--accent); }
.coin-filter::placeholder { color: var(--text-muted); opacity: .8; }

.coin-scroll-shell {
  max-height: 340px; overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  padding: .55rem;
  /* Keeps the scrollbar from sitting on top of the last column. */
  scrollbar-width: thin;
}
.coin-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: .5rem;
}

.coin-btn {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .7rem;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .12s, background .12s, transform .12s;
}
.coin-btn:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.coin-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.coin-btn.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--bg-alt);
}
/* Tick badge on the selected coin. Positioned inside the button rather than
   overhanging it, so it is never clipped by the scroll container. */
.coin-btn.is-active::after {
  content: "\2713";
  position: absolute; top: .3rem; right: .4rem;
  font-size: .62rem; font-weight: 700; line-height: 1;
  color: var(--accent-text, #fff);
  background: var(--accent);
  width: .95rem; height: .95rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Unavailable coins. Fading the whole button with opacity dropped the label
   to 2.6:1 on three of the five themes, so a shopper could not read which
   coin was unavailable, only that something was. The state is now carried by
   a dashed border, a flat background and a greyscale icon, while the text
   itself stays legible: measured at or above 4.5:1 on every theme. */
.coin-btn:disabled, .coin-btn-unavailable {
  cursor: not-allowed;
  transform: none;
  background: var(--bg-alt);
  border-style: dashed;
  border-color: var(--border);
}
.coin-btn:disabled:hover, .coin-btn-unavailable:hover {
  border-color: var(--border);
  transform: none;
}
.coin-btn:disabled .coin-symbol, .coin-btn-unavailable .coin-symbol { color: var(--text-muted); }
.coin-btn:disabled .coin-icon, .coin-btn-unavailable .coin-icon { filter: grayscale(1); opacity: .55; }
.coin-btn:disabled .coin-badge, .coin-btn-unavailable .coin-badge { opacity: .7; }

/* A dash in the corner says "not now" without competing with the label. */
.coin-btn:disabled::after, .coin-btn-unavailable::after {
  content: "";
  position: absolute; top: .45rem; right: .5rem;
  width: .55rem; height: 2px; border-radius: 2px;
  background: var(--text-muted); opacity: .8;
}

.coin-badge {
  position: relative; flex-shrink: 0;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
/* The letter sits underneath the icon and shows through when the remote
   image fails, so a coin never renders as an empty circle. */
.coin-badge-letter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
  color: var(--text-muted);
}
.coin-icon { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }

.coin-symbol { display: block; font-size: .95rem; font-weight: 650; color: var(--text);
  line-height: 1.25; letter-spacing: -.01em; }
.coin-btn small { display: block; color: var(--text-muted); font-size: .78rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-note { color: var(--text-muted); font-size: .78rem; margin: .6rem 0 0; line-height: 1.5; }

/* Shown by the filter script when nothing matches. */
.coin-empty { color: var(--text-muted); font-size: .8rem; padding: .8rem .2rem; grid-column: 1 / -1; }

@media (max-width: 480px) {
  .coin-scroll { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .coin-scroll-shell { max-height: 300px; }
}

/* Dollar equivalent under the deposit amount. Deliberately quiet: the coin
   figure is what the customer must send, and a large USD number beside it
   would compete with that. */
.deposit-usd {
  margin: .4rem 0 .9rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.deposit-usd strong { color: var(--text); font-weight: 650; }

/* ============================================================
   Deposit panel. Everything here uses theme variables, so it reads
   correctly on the light themes as well as the dark ones.
   ============================================================ */

.deposit-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .85rem; margin-bottom: .95rem;
  border-bottom: 1px solid var(--border);
}
.deposit-coin { display: flex; align-items: center; gap: .6rem; }
.deposit-coin .coin-badge { width: 2.1rem; height: 2.1rem; }
.deposit-coin-text { display: flex; flex-direction: column; line-height: 1.25; }
.deposit-coin-text strong { font-size: 1rem; font-weight: 700; }
.deposit-coin-text small { color: var(--text-muted); font-size: .74rem; }

/* The countdown is the one number on this page that changes, so it gets
   monospace to stop the layout jittering as the digits tick. */
.deposit-timer { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.deposit-timer-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.deposit-timer-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.deposit-timer.is-urgent .deposit-timer-value { color: #e5484d; }

.deposit-instruction { margin: 0 0 .35rem; font-size: .95rem; line-height: 1.55; }
.deposit-amount-inline { white-space: nowrap; }
.deposit-usd { margin: 0 0 1rem; font-size: .8rem; line-height: 1.5; color: var(--text-muted); }
.deposit-usd strong { color: var(--text); font-weight: 650; }

.deposit-qr {
  display: flex; justify-content: center;
  margin: 0 auto 1.1rem; padding: .7rem;
  width: fit-content;
  background: #fff;               /* QR codes need a white quiet zone to scan */
  border-radius: 12px;
  border: 1px solid var(--border);
}
.deposit-qr img { display: block; max-width: 100%; height: auto; }

.copy-field-group { margin-bottom: .85rem; }
.deposit-field-label {
  display: block; margin: 0 0 .3rem;
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
}
.deposit-field-note { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .85; }
.deposit-field-required {
  text-transform: uppercase; font-size: .62rem; letter-spacing: .06em;
  color: #e5484d; border: 1px solid currentColor; border-radius: 4px;
  padding: 0 .3rem; margin-left: .25rem;
}

.copy-row {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-alt);
  overflow: hidden;
}
/* The value is a block of text, not an <input>, so a long address wraps in full
   instead of being cut off with an ellipsis. user-select: all means one tap or
   click selects the whole thing for anyone copying by hand. The first and last
   characters are bold so the two ends can be checked against the wallet. */
.copy-value {
  flex: 1 1 auto; min-width: 0; align-self: center;
  padding: .65rem .75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem; line-height: 1.45; color: var(--text);
  overflow-wrap: anywhere; word-break: break-all;
  -webkit-user-select: all; user-select: all;
}
.copy-edge { font-weight: 800; }
.copy-field-suffix {
  display: flex; align-items: center; padding: 0 .55rem;
  font-size: .76rem; font-weight: 600; color: var(--text-muted);
  border-left: 1px solid var(--border);
}
/* flex: none matters. With a wrapping address beside it the button was squeezed
   and its icon shrank to 2px, a dot next to the word "Copy". */
.copy-btn {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .35rem;
  padding: 0 .8rem;
  border: none; border-left: 1px solid var(--border);
  background: var(--card-bg); color: var(--text);
  font: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.copy-btn:hover { background: var(--accent); color: var(--accent-text, #fff); }
.copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.copy-btn-icon { display: flex; flex: 0 0 auto; }
.copy-btn-icon svg { flex: 0 0 auto; }
/* Set by deposit-box.js after a successful copy. */
.copy-btn.is-copied { background: var(--success, #2ecc71); color: #fff; }

.deposit-warn {
  margin: .5rem 0 0;
  font-size: .78rem; line-height: 1.5; color: var(--text-muted);
  display: flex; align-items: flex-start; gap: .4rem;
}
.deposit-warn strong { color: var(--text); }
.deposit-warn-network {
  margin-top: .9rem; padding: .6rem .7rem;
  border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg-alt);
}
.network-icon { flex-shrink: 0; margin-top: .12rem; border-radius: 50%; }
.deposit-warn > span { min-width: 0; }

/* Progress. Four steps, the current one marked, the finished ones ticked green.
   Everything is drawn with borders and background rather than glyphs, so it
   follows the theme and has no font to fail. The connecting line belongs to the
   step it leads INTO, which is why it is coloured by that step's state. */
.deposit-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem;
  list-style: none; margin: 0 0 .85rem; padding: 0;
}
.deposit-steps li {
  position: relative; padding-top: 1.45rem;
  text-align: center; font-size: .75rem; line-height: 1.25; color: var(--text-muted);
}
.deposit-steps li::before {
  content: ""; position: absolute; top: 0; left: 50%; z-index: 1;
  width: .85rem; height: .85rem; margin-left: -.425rem; box-sizing: border-box;
  border: 2px solid var(--border); border-radius: 50%; background: var(--card-bg);
}
.deposit-steps li + li::after {
  content: ""; position: absolute; top: .4rem; right: 50%; width: 100%; height: 2px;
  background: var(--border);
}
.deposit-steps li.is-done::before { border-color: var(--success, #2ecc71); background: var(--success, #2ecc71); }
.deposit-steps li.is-done::after,
.deposit-steps li.is-current::after { background: var(--success, #2ecc71); }
.deposit-steps li.is-current { color: var(--text); font-weight: 700; }
/* Pulses the ring around whichever step is current, so the page reads as
   watching rather than stalled between polls. Animates box-shadow on the
   SAME ::before the dot already uses, deliberately not a new ::after:
   that pseudo-element is already spoken for by the connecting line two
   rules up (.is-current::after recolours the line itself), and a second
   rule targeting it would silently win and break that colouring instead of
   layering on top of it.
   deposit-box.js polls every 8 seconds, but that only asks what the
   reconciler last wrote, and that job runs on its own 45 second cycle --
   nothing on this page can show real movement faster than that without the
   Pegasus webhook actually being registered (still open). This is honest
   about that: it signals "alive", it does not pretend to be live data. */
.deposit-steps li.is-current::before {
  border-color: var(--accent); background: var(--accent);
  animation: step-pulse 1.8s ease-out infinite;
}
@keyframes step-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* What is happening right now, in a sentence, directly under the steps. This
   used to be one line at the very bottom of the page, and read "new". */
.deposit-now { margin: 0 0 1rem; font-size: .92rem; line-height: 1.55; color: var(--text); }

.deposit-body { display: block; margin-bottom: 1rem; }
.deposit-fields { min-width: 0; }
.deposit-body .deposit-qr { margin-top: 1.1rem; }

/* The three layouts with a 900px order page have room for the QR beside the
   fields instead of under them. */
@media (min-width: 860px) {
  .checkout-layout-grid .deposit-body,
  .checkout-layout-all .deposit-body,
  .checkout-layout-side-left .deposit-body,
  .checkout-layout-side-right .deposit-body {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.75rem; align-items: start;
  }
  .checkout-layout-grid .deposit-body .deposit-qr,
  .checkout-layout-all .deposit-body .deposit-qr,
  .checkout-layout-side-left .deposit-body .deposit-qr,
  .checkout-layout-side-right .deposit-body .deposit-qr { margin: .25rem 0 0; }
}

/* Once the deposit has been seen the pay instructions are gone. The details
   stay one click away, for anyone tracing what they sent. */
.deposit-recap {
  margin: 0 0 .85rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-alt);
}
.deposit-recap > summary {
  cursor: pointer; list-style: none; min-height: 44px; padding: .6rem .8rem;
  display: flex; align-items: center;
  font-size: .86rem; font-weight: 600; color: var(--text);
}
.deposit-recap > summary::-webkit-details-marker { display: none; }
.deposit-recap > summary::after {
  content: ""; margin-left: auto; width: .4em; height: .4em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.deposit-recap[open] > summary::after { transform: rotate(-135deg); }
.deposit-recap-body { padding: 0 .8rem .3rem; }
.deposit-recap-note { margin: 0 0 .8rem; font-size: .85rem; line-height: 1.55; color: var(--text-muted); }
.deposit-recap-note strong { color: var(--text); }

/* On the order page the customer is in the middle of paying. The header's row of
   links was another line of things to tap above the address, and pushed it down
   the screen; the footer carries the same pages. Phones only. */
@media (max-width: 780px) {
  .order-page .site-nav .nav-links { display: none; }
}

.deposit-help { margin: 1rem 0 0; font-size: .82rem; line-height: 1.6; color: var(--text-muted); }
.deposit-help a, .deposit-expired-note a { color: var(--accent); }

/* The order summary above the panel. It was a 290px card on a phone for four
   short facts, which pushed the address off the first screen. */
.order-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline;
  padding: .9rem 1.1rem; margin-bottom: 1rem;
}
.order-summary h2 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.order-summary .price { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.order-summary p { margin: 0; }
/* Everything after the title and price takes a full row of its own. */
.order-summary > :nth-child(n+3) { grid-column: 1 / -1; margin-top: .35rem; }
.order-title { margin: 0 0 .7rem; font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.2; }

@media (max-width: 480px) {
  .deposit-head { gap: .6rem; }
  .copy-value { padding: .65rem .6rem; }
  /* The word stays. An icon on its own is a guess, and this is the one button
     on the page that a customer has to be sure they pressed. */
  .copy-btn { padding: 0 .7rem; min-height: 44px; }
  .deposit-qr { padding: .5rem; }
  /* The panel sat inside 24px of page padding and then 28px of its own, so the
     content column was 286px on a 390px phone. Give it back. */
  .deposit-panel { padding: 1rem; margin: 1rem 0; }
  .checkout-wrap { margin: 1.25rem auto 2rem; }
  /* A plain 200px, not min(200px, 100%): a percentage inside the fit-content frame
     is circular, and the frame stretched to the full width of the panel. */
  .deposit-qr img { width: 200px; max-width: 100%; height: auto; }
}

/* ============================================================
   Scrollbars. The browser default is a grey slab that ignores the theme
   and looks broken on the dark storefronts.
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
  /* Inset the thumb so it reads as a slim pill rather than filling the gutter. */
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================
   Content page shapes. One template, five frames, so the storefronts do not
   ship identical DOM. See views/pages/content.ejs.
   ============================================================ */

.content-page h1 { margin-bottom: 1.1rem; }
.page-content { line-height: 1.68; }
.page-content h2 { margin: 1.9rem 0 .6rem; font-size: 1.12rem; line-height: 1.35; scroll-margin-top: 1.5rem; }
.page-content p { margin: 0 0 1rem; }

/* rail: contents on the left, prose on the right */
.content-rail-wrap { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.content-rail { font-size: .84rem; }
.content-rail-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin: 0 0 .5rem; }
.content-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.content-rail a { color: var(--text-muted); text-decoration: none; }
.content-rail a:hover { color: var(--accent); }
@media (min-width: 900px) {
  .content-rail-wrap { grid-template-columns: 200px minmax(0, 1fr); }
  .content-rail { position: sticky; top: 1.5rem; align-self: start; border-left: 2px solid var(--border); padding-left: .9rem; }
}

/* cards: each H2 section boxed */
.content-cards { display: grid; gap: .85rem; }
.content-cards h2 {
  margin: 0; padding: 1rem 1.15rem .2rem;
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 12px 12px 0 0; background: var(--card-bg);
}
.content-cards h2 + p {
  margin: 0 0 .85rem; padding: .5rem 1.15rem 1.05rem;
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 12px 12px; background: var(--card-bg);
}

/* aside: prose plus a supporting column */
.content-aside-wrap { display: grid; gap: 1.8rem; grid-template-columns: 1fr; }
.content-aside {
  font-size: .84rem; padding: 1rem 1.1rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-alt);
  align-self: start;
}
.content-aside-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin: 0 0 .55rem; }
.content-aside ul { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.content-aside a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: .35rem; display: block; }
.content-aside a:hover { color: var(--accent); }
.content-aside-note { margin: 0; color: var(--text-muted); font-size: .78rem; line-height: 1.5; }
@media (min-width: 900px) {
  .content-aside-wrap { grid-template-columns: minmax(0, 1fr) 260px; }
  .content-aside { position: sticky; top: 1.5rem; }
}

/* wide: full width with jump links and ruled sections */
.content-wide-head { border-bottom: 2px solid var(--border); padding-bottom: .9rem; margin-bottom: 1.4rem; }
.content-wide-jump { margin: .5rem 0 0; font-size: .8rem; color: var(--text-muted); line-height: 1.9; }
.content-wide-jump a { color: var(--text-muted); text-decoration: none; }
.content-wide-jump a:hover { color: var(--accent); }
.content-wide-body h2 { border-top: 1px solid var(--border); padding-top: 1.3rem; }
.content-wide-body h2:first-child { border-top: none; padding-top: 0; }

/* prose: a single readable column */
.content-prose { max-width: 68ch; }
.content-prose h2 { border-left: 3px solid var(--accent); padding-left: .7rem; margin-left: -.9rem; }

/* Guide index shapes, mirroring the content page shapes so a domain's guide
   list matches the frame its other pages use. */
.guides-index-cards .guide-list { grid-template-columns: 1fr; }
@media (min-width: 700px) { .guides-index-cards .guide-list { grid-template-columns: 1fr 1fr; } }
.guides-index-rail .guide-card { border-left: 3px solid var(--accent); }
.guides-index-aside .guide-list { gap: .6rem; }
.guides-index-aside .guide-card { display: grid; gap: .3rem; }
.guides-index-prose .guide-list { max-width: 68ch; }
.guides-index-prose .guide-card { border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding-left: 0; padding-right: 0; }
.guides-index-wide .guide-card { border-radius: 0; border-width: 0 0 1px 0; padding-left: 0; }
@media (min-width: 900px) { .guides-index-wide .guide-list { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; } }
.guides-jump { margin: .4rem 0 1.2rem; font-size: .82rem; line-height: 1.9; color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: .9rem; }
.guides-jump a { color: var(--text-muted); text-decoration: none; }
.guides-jump a:hover { color: var(--accent); }

/* Memo alert. On XRP, XLM, ATOM, ALGO, EOS, HBAR and TON a deposit sent
   without its tag is unrecoverable, so this sits above the address rather
   than below it: the customer has to read it before they copy anything. */
.memo-alert {
  margin: 0 0 1rem; padding: .75rem .9rem;
  border: 1px solid #d9822b; border-left-width: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, #d9822b 12%, transparent);
}
.memo-alert-title { margin: 0 0 .25rem; font-size: .84rem; font-weight: 700; color: #d9822b; }
.memo-alert-body { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--text); }
.copy-field-group-alert .copy-row { border-color: #d9822b; }
.copy-field-group-alert .deposit-field-label { color: #d9822b; }

/* Per-site assurance note under the deposit panel. */
.order-note {
  margin: 1.1rem 0 0; padding: .85rem 1rem;
  border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0;
  background: var(--bg-alt);
  font-size: .84rem; line-height: 1.6; color: var(--text-muted);
}
.order-note p { margin: 0; }
.order-note strong { color: var(--text); }

/* Section headings inside a grouped coin picker. They span the whole grid so
   the tiles below them stay aligned with the ungrouped layout. */
.coin-scroll-grouped { grid-auto-flow: row dense; }
/* Section dividers in the grouped pickers. These were 10.9px uppercase in a
   muted grey, which is the same "passes contrast, still unreadable" mistake
   the coin names had. Bigger, with a rule so the group actually reads as a
   group rather than as a stray word. */
.coin-section-label {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .6rem;
  margin: .9rem 0 .35rem;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
}
.coin-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.coin-scroll-grouped .coin-section-label:first-child { margin-top: 0; }

/* Network picker. Appears only when the chosen coin has more than one deposit
   chain; the cost difference between them is large enough to be worth a
   deliberate choice rather than a silent default. */
.network-picker { margin: .9rem 0 0; }
.network-picker-label {
  margin: 0 0 .4rem; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
}
.network-options { display: flex; flex-wrap: wrap; gap: .4rem; }
.network-option {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .7rem;
  font: inherit; font-size: .8rem;
  color: var(--text); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.network-option:hover { border-color: var(--accent); }
.network-option.is-active { border-color: var(--accent); background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--accent); }
.network-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.network-option img { border-radius: 50%; flex-shrink: 0; }
.network-picker-note { margin: .45rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 480px) { .network-option { min-height: 44px; } }

/* Shown once, on the redirect straight after checkout. The order page is the
   same URL the customer returns to, so this is gated on ?placed=1 rather than
   greeting them every visit. */
.order-placed-banner {
  margin: 0 0 1.2rem; padding: .9rem 1.1rem;
  border: 1px solid var(--success, #2ecc71); border-left-width: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--success, #2ecc71) 10%, transparent);
}
.order-placed-title { margin: 0 0 .3rem; font-size: .9rem; font-weight: 700; color: var(--success, #2ecc71); }
.order-placed-body { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--text); }
.order-placed-body a { color: var(--accent); }
/* The same panel for states that are not good news, so an expired order does
   not get a green tick it did not earn. */
.order-placed-banner.is-neutral {
  border-color: var(--border); border-left-color: var(--text-muted);
  background: var(--bg-alt);
}
.order-placed-banner.is-neutral .order-placed-title { color: var(--text); }

/* Set by submit-guard.js while an order is being created. The label changes
   and the button stops taking taps; the text stays at full contrast. */
/* Set by submit-guard.js the moment a real submit is accepted. Creating an
   order is a live Pegasus round trip (quote, network, address) and takes a
   few real seconds; a text change alone ("Getting your address") still read
   as the page having stalled, because nothing on screen was actually moving.
   The ring is drawn from currentColor, so it always matches whatever text
   colour that specific button already uses and needs no theme variable of
   its own. prefers-reduced-motion is handled by the global rule above. */
button.is-busy { cursor: progress; pointer-events: none; }
button.is-busy::before {
  content: "";
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: .55em;
  vertical-align: -0.15em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Track page and 404: one short centred block, no layout of their own. */
.lookup-wrap { max-width: 34rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.lookup-wrap h1 { margin: 0 0 .6rem; font-size: clamp(1.6rem, 5vw, 2.1rem); }
.lookup-wrap p { line-height: 1.65; margin: 0 0 1rem; color: var(--text-muted); }
.lookup-wrap .track-again-row { margin: 1.2rem 0; }
.lookup-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.lookup-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); background: var(--card-bg); text-decoration: none; font-weight: 600;
}
.lookup-links a:hover, .lookup-links a:focus-visible { border-color: var(--accent); color: var(--accent); }

/* Expired deposit window. The panel stays visible so the customer can see
   what they had, but it is visibly inert and says what to do next. */
.deposit-timer.is-expired .deposit-timer-value { color: var(--text-muted); }
.deposit-panel.is-expired .deposit-qr,
.deposit-panel.is-expired .copy-row { opacity: .5; }
.deposit-expired-note {
  margin: .9rem 0 0; padding: .7rem .85rem;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-alt);
  font-size: .82rem; line-height: 1.55; color: var(--text-muted);
}


/* Coin picker: the collapsed tail and its toggle.
   Every site lists all 46 coins. Only how many show at rest differs, set from
   data-visible per site. The class is applied by script, so with JS off the
   whole grid renders and nothing is unreachable. */
.coin-btn.is-collapsed,
.coin-section-label.is-collapsed { display: none; }

.coin-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: .55rem 0 0;
  padding: .45rem .85rem;
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--accent);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  min-height: 36px;
}
.coin-toggle::after { content: "\203A"; font-size: 1rem; line-height: 1; }
.coin-toggle[aria-expanded="true"]::after { content: "\2039"; }
.coin-toggle:hover { border-color: var(--accent); background: var(--bg-alt); }
.coin-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ============================================================
   Footer shapes. One per site, driven by config/siteChrome.js.
   The footer renders on every page of every domain, so an identical one was
   the largest single thing making five storefronts read as one operator:
   measured at 78 to 82 percent text overlap between every pair before this.
   ============================================================ */

.footer-cost-line {
  margin: .5rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.site-footer-grid { display: grid; gap: 1.5rem; }
.site-footer-grid[data-cols="1"] { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.site-footer-grid[data-cols="2"] { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.site-footer-grid[data-cols="3"] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* Rate desk: two lean columns, the cost line doing the work a badge row
   would otherwise do. */
.site-footer--ledger .footer-col h4 {
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.site-footer--ledger .footer-mission { max-width: 34ch; }

/* Privacy site: one wide row of links, no columns to speak of, badges as
   short factual chips. */
.site-footer--spare .site-footer-grid { gap: .75rem 1.5rem; }
.site-footer--spare .footer-col { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: baseline; }
.site-footer--spare .footer-col h4 { width: 100%; margin: 0 0 .2rem; font-size: .75rem; opacity: .7; }
.site-footer--spare .trust-badges li { border-radius: 999px; }

/* Beginner site: three signposted columns with a heavier heading, because
   this footer is meant to be used rather than skimmed. */
.site-footer--guided .footer-col h4 {
  font-size: .92rem; font-weight: 700; color: var(--text);
  border-bottom: 2px solid var(--accent); display: inline-block;
  padding-bottom: .2rem; margin-bottom: .55rem;
}
.site-footer--guided .footer-col a { display: block; padding: .18rem 0; }

/* Reference site: an index, so the headings are quiet and the links are
   dense and evenly weighted. */
.site-footer--index .footer-col h4 {
  font-size: .78rem; font-weight: 600; color: var(--text-muted);
  margin-bottom: .4rem;
}
.site-footer--index .footer-col a { font-size: .86rem; }
.site-footer--index .footer-legal p:first-child { max-width: none; line-height: 1.75; }

/* Marketplace: catalogue first, headings that read like counter signage. */
.site-footer--counter .footer-col h4 {
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: .5rem;
}
.site-footer--counter .trust-badges { gap: .4rem; }


/* Sibling guide links at the foot of a guide. A page arrived at from search
   otherwise offered nothing to read next except the nav. Shape follows the
   theme, so this does not become another identical block on five sites. */
.related-guides {
  margin: 2.5rem auto 0;
  max-width: 68ch;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}
.related-guides h2 {
  margin: 0 0 .6rem;
  font-size: .95rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: .02em;
}
.related-guides ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.related-guides a {
  display: inline-block;
  padding: .25rem 0;
  color: var(--accent);
  font-weight: 550;
  text-decoration: none;
}
.related-guides a:hover { text-decoration: underline; }
.content-wide .related-guides, .guides-layout-all .related-guides { max-width: none; }


/* Arrow marks.
   These were the "\2192" entity inline in the text. In a monospace theme that
   glyph often falls back to another face, so it landed at the wrong weight and
   baseline and read as a broken character. Drawn from a border instead, so it
   inherits colour, scales with the text and looks the same in every face. */
.link-arrow, .read-guide { display: inline-flex; align-items: center; gap: .45rem; }
.link-arrow::after, .read-guide::after {
  content: "";
  width: .42em; height: .42em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .14s ease;
  flex: 0 0 auto;
}
.home-guide-card:hover .read-guide::after, .link-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* Alternate-network disclosure on the order page. */
.net-switch {
  margin: .6rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}
.net-switch > summary {
  cursor: pointer;
  padding: .6rem .8rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.net-switch > summary::-webkit-details-marker { display: none; }
.net-switch > summary::after {
  content: "";
  margin-left: auto;
  width: .4em; height: .4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.net-switch[open] > summary::after { transform: rotate(-135deg); }
.net-switch-body { padding: 0 .8rem .8rem; }
.net-switch-body p { margin: 0 0 .7rem; font-size: .85rem; line-height: 1.55; color: var(--text-muted); }
.net-switch-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.net-switch-link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  font-size: .84rem;
  min-height: 40px;
}
.net-switch-link:hover { border-color: var(--accent); color: var(--accent); }


/* Hero facts strip. A stranger being asked for crypto needs the basic terms
   before the plans, not after them. Kept as short factual chips rather than
   badges with ticks, which read as marketing. */
.hero-facts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .45rem .55rem;
  margin: 1rem auto 0;
  max-width: 62ch;
  padding: 0;
  list-style: none;
}
.hero-facts span {
  font-size: .8rem;
  line-height: 1.4;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .3rem .7rem;
  background: var(--card-bg);
}
.layout-all .hero .subhead { max-width: 68ch; margin-left: auto; margin-right: auto; }


/* ============================================================
   Layout-specific treatments.
   Theme variables changed the palette, faces and radii, but every site still
   drew the same boxes. These scope real structural differences to the layout
   each site uses, so the pages differ in shape and not only in styling.
   ============================================================ */

/* --- side-right: the guided site. Numbered steps, sticky plans. --- */
.layout-side .content-col .how-it-works { counter-reset: hiw; }
.layout-side .content-col .how-it-works h2 {
  counter-increment: hiw;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: 1.05rem;
  margin: 1.6rem 0 .4rem;
}
.layout-side .content-col .how-it-works h2::before {
  content: counter(hiw);
  flex: 0 0 auto;
  width: 1.9rem; height: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-size: .9rem; font-weight: 700;
  letter-spacing: 0;
}
.layout-side .content-col .how-it-works > p,
.layout-side .content-col .how-it-works h2 + p { padding-left: 2.6rem; }
.layout-side .content-col .how-it-works {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem 1.6rem;
  margin-top: 1.5rem;
}
@media (min-width: 981px) {
  .layout-side .plans-col { position: sticky; top: 1rem; align-self: start; }
}
.layout-side .tier-card { box-shadow: 0 10px 30px rgba(16, 24, 43, .10); }
.layout-side .home-guide-card { border-radius: var(--radius-lg); }

/* --- center + mono-light: the reference. Strip the shopfront chrome. --- */
.theme-mono-light .tier-card {
  box-shadow: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 1.6rem 0 1.4rem;
  width: 100%;
  max-width: 34rem;
}
.theme-mono-light .tier-card.featured { box-shadow: none; border-top-color: var(--accent); border-top-width: 2px; }
.theme-mono-light .plans-row { flex-direction: column; align-items: center; gap: 0; }
.theme-mono-light .badge { background: none; color: var(--accent); border: 1px solid var(--accent); font-weight: 600; }
.theme-mono-light .buy-btn {
  background: none;
  color: var(--text);
  border: 1px solid var(--text);
  font-weight: 600;
}
.theme-mono-light .buy-btn:hover { background: var(--text); color: var(--bg); opacity: 1; }
.theme-mono-light .hero { padding-bottom: .5rem; }
.theme-mono-light .hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.15; }
.theme-mono-light .subhead { max-width: 58ch; margin-left: auto; margin-right: auto; color: var(--text-muted); }
.theme-mono-light .how-it-works, .theme-mono-light .home-highlights { max-width: 62ch; margin-left: auto; margin-right: auto; }
.theme-mono-light .home-guide-card { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.theme-mono-light .coin-scroll-shell { border-radius: 0; border-left: 0; border-right: 0; }

/* --- orange-black: the counter. Signage, not prose. --- */
.theme-orange-black .market-group h2 { border-bottom-width: 2px; }
.theme-orange-black .buy-btn { letter-spacing: .06em; text-transform: uppercase; font-size: .88rem; }
.theme-orange-black .badge { letter-spacing: .05em; }

/* --- termcode: the terminal. Rules instead of boxes. --- */
.theme-termcode .tier-card { box-shadow: none; }
.theme-termcode .home-guide-card { border-left: 2px solid var(--accent); }
.theme-termcode .buy-btn { letter-spacing: .02em; }

/* ============================================================
   Per-site checkouts.
   Five different pages, not one page with five palettes. The payment control
   inside them is a shared partial on purpose (see views/partials/coin-picker),
   so what differs here is the page around it: what is shown first, what is
   explained, and how the coin list is presented.
   ============================================================ */

.layout-checkout .co-submit {
  display: block; width: 100%;
  margin-top: 1.2rem;
  padding: .9rem 1.2rem;
  font: inherit; font-size: 1rem; font-weight: 650;
  color: var(--accent-text); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  cursor: pointer; min-height: 48px;
}
.layout-checkout .co-submit:hover { filter: brightness(1.06); }
.layout-checkout .co-submit:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.layout-checkout input[type="email"] {
  width: 100%; padding: .75rem .85rem;
  font: inherit; font-size: 16px;      /* 16px stops iOS zooming on focus */
  color: var(--text); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  min-height: 48px;
}
.layout-checkout input[type="email"]:focus { outline: none; border-color: var(--accent); }
.co-hint { font-size: .82rem; line-height: 1.5; color: var(--text-muted); margin: .4rem 0 0; }
.co-hint-centre { text-align: center; }

/* --- desk: sticky ledger beside the form --- */
.co-desk-wrap {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 2.5rem; align-items: start;
  max-width: 62rem; margin: 0 auto; padding: 2rem 1.5rem 3rem;
}
.co-desk-ledger {
  position: sticky; top: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card-bg); padding: 1.4rem;
}
.co-eyebrow { margin: 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.co-desk-ledger h1 { margin: .25rem 0 0; font-size: 1.5rem; }
.co-desk-term { margin: .1rem 0 1rem; color: var(--text-muted); }
.co-ledger { width: 100%; border-collapse: collapse; font-size: .9rem; }
.co-ledger td { padding: .45rem 0; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.co-ledger .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.co-ledger tfoot td { border-bottom: 0; padding-top: .7rem; font-weight: 700; color: var(--text); font-size: 1.05rem; }
.co-desk-permonth, .co-desk-note { font-size: .82rem; line-height: 1.55; color: var(--text-muted); margin: .8rem 0 0; }
.co-field { margin-bottom: 1.6rem; }
.co-field label, .co-field-label { display: block; margin-bottom: .45rem; font-weight: 650; font-size: .95rem; }

/* --- terminal: one narrow column --- */
.co-term-wrap { max-width: 40rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.co-term-path { margin: 0 0 1.2rem; font-size: .8rem; color: var(--text-muted); }
.co-term-wrap h1 { margin: 0; font-size: 1.35rem; }
.co-term-dim { color: var(--text-muted); font-weight: 400; }
.co-term-price { margin: .3rem 0 1.5rem; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-term-block { border-left: 2px solid var(--accent); padding: .2rem 0 .2rem 1rem; margin-bottom: 1.8rem; }
.co-term-head { margin: .8rem 0 .3rem; font-size: .82rem; font-weight: 700; color: var(--text); }
.co-term-block .co-term-head:first-child { margin-top: 0; }
.co-term-list { list-style: none; margin: 0; padding: 0; }
.co-term-list li { position: relative; padding-left: 1.1rem; font-size: .86rem; line-height: 1.6; color: var(--text-muted); }
.co-term-list li::before { content: "+"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.co-term-list-neg li::before { content: "-"; color: var(--accent); }
.co-term-foot { font-size: .8rem; line-height: 1.55; color: var(--text-muted); margin: .8rem 0 0; }
.co-term-label { display: block; margin: 1.4rem 0 .4rem; font-size: .82rem; font-weight: 700; color: var(--text-muted); }

/* --- guided: numbered steps --- */
.co-guided-wrap { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.co-guided-head h1 { margin: 0 0 .6rem; font-size: 1.7rem; line-height: 1.2; }
.co-guided-sub { margin: 0 0 2rem; color: var(--text-muted); line-height: 1.65; }
.co-steps { list-style: none; counter-reset: costep; margin: 0; padding: 0; }
.co-step { counter-increment: costep; position: relative; padding-left: 3.4rem; margin-bottom: 2rem; }
.co-step::before {
  content: counter(costep);
  position: absolute; left: 0; top: 0;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: var(--accent-text);
  font-weight: 700; font-size: 1rem; letter-spacing: 0;
}
.co-step-body { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); padding: 1.2rem 1.3rem; }
.co-step-body h2 { margin: 0 0 .4rem; font-size: 1.12rem; }
.co-step-body > p { margin: 0 0 .9rem; color: var(--text-muted); line-height: 1.6; font-size: .95rem; }

/* --- reference: specification --- */
.co-ref-wrap { max-width: 44rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.co-ref-wrap h1 { margin: 0 0 1.4rem; font-size: 1.6rem; }
.co-ref-terms { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0; margin: 0 0 2rem; font-size: .92rem; }
.co-ref-terms dt { padding: .55rem 0; border-top: 1px solid var(--border); color: var(--text-muted); }
.co-ref-terms dd { padding: .55rem 0; border-top: 1px solid var(--border); margin: 0; color: var(--text); }
.co-ref-field { margin-bottom: 1.6rem; }
.co-ref-field label, .co-ref-legend { display: block; margin-bottom: .4rem; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.co-ref-foot { margin: 1rem 0 0; font-size: .82rem; line-height: 1.6; color: var(--text-muted); }

/* --- counter: receipt strip --- */
.co-counter-wrap { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.co-receipt {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius-md); background: var(--card-bg);
  padding: 1rem 1.2rem; margin-bottom: 1.6rem;
}
.co-receipt-item { display: flex; flex-direction: column; gap: .1rem; }
.co-receipt-label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.co-receipt-item strong { font-size: 1.05rem; }
.co-receipt-sub { font-size: .8rem; color: var(--text-muted); }
.co-receipt-total { margin-left: auto; text-align: right; }
.co-receipt-total strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.co-counter-row { margin-bottom: 1.2rem; }
.co-counter-row label, .co-counter-legend { display: block; margin-bottom: .35rem; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.co-counter-foot { margin: .8rem 0 0; font-size: .82rem; color: var(--text-muted); }

/* --- coin picker presentation variants --- */
.coin-shell--list .coin-scroll { grid-template-columns: 1fr; }
.coin-shell--list .coin-btn { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.coin-shell--table .coin-scroll { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0; }
.coin-shell--table .coin-btn { border-radius: 0; border: 0; border-bottom: 1px solid var(--border); }
/* Compact still shows the coin's name. Hiding it left a bare ticker, which is
   the "hard to read" complaint: XMR and PIVX mean nothing without "Monero"
   and "PIVX" beside them, and the point of a wide catalogue is that people
   recognise what they hold. Narrower tiles, same two lines of text. */
.coin-shell--compact .coin-scroll { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .35rem; }
.coin-shell--compact .coin-btn { padding: .5rem .55rem; gap: .45rem; }
.coin-shell--compact .coin-symbol { font-size: .88rem; }
.coin-shell--compact .coin-btn small { font-size: .72rem; }

/* The list and table variants dropped tile borders, which left the coin name
   sitting on the panel with nothing separating one row from the next. */
.coin-shell--list .coin-btn, .coin-shell--table .coin-btn { padding-top: .7rem; padding-bottom: .7rem; }
.coin-shell--list .coin-btn:hover, .coin-shell--table .coin-btn:hover { background: var(--bg-alt); }
.coin-shell--table .coin-btn { border-right: 1px solid var(--border); }
.coin-shell--cards .coin-scroll { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .55rem; }

@media (max-width: 900px) {
  .co-desk-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .co-desk-ledger { position: static; }
  .co-ref-terms { grid-template-columns: 1fr; }
  .co-ref-terms dd { padding-top: 0; border-top: 0; padding-bottom: .7rem; }
  .co-receipt-total { margin-left: 0; text-align: left; }
}

/* ============================================================
   Homepages.
   Three of the five used to be the same page with a different container class
   on the plan row. Each now has its own section order and its own way of
   presenting a plan: rows, a spec table, a comparison, a catalogue, or the
   live calculator. See the layout files for why each site is shaped that way.
   ============================================================ */

.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;
}

/* --- privacy: policy before plans, plans as rows --- */
.pv-wrap { max-width: 58rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.pv-hero h1 { margin: 0 0 .4rem; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.pv-hero .subhead { margin: 0 0 2rem; color: var(--text-muted); }
.pv-policy { border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 1.2rem 1.3rem; margin-bottom: 2.5rem; }
.pv-policy h2 { margin: 0 0 1rem; font-size: 1.15rem; }
.pv-policy-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem 2rem; }
.pv-policy-cols h3 { margin: 0 0 .5rem; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pv-policy-cols ul { list-style: none; margin: 0; padding: 0; }
.pv-policy-cols li { position: relative; padding-left: 1.2rem; font-size: .88rem; line-height: 1.6; }
.pv-keep li::before { content: "+"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.pv-drop li::before { content: "-"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.pv-policy-foot, .pv-plans-foot { font-size: .84rem; line-height: 1.6; color: var(--text-muted); margin: 1rem 0 0; }
.pv-plans h2, .ref-plans h2, .gd-plans h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.plan-rows { display: flex; flex-direction: column; gap: .6rem; }
.plan-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
  gap: 1rem 1.5rem; align-items: center;
  width: auto; padding: 1rem 1.1rem;
}
.plan-row h3 { margin: 0; font-size: 1.02rem; }
.plan-row-tag { margin: .15rem 0 0; font-size: .84rem; color: var(--text-muted); }
.plan-row-buy { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.plan-row-buy .price { font-size: 1.5rem; font-weight: 700; }
.plan-row-buy .buy-btn { margin-top: .4rem; padding: .5rem 1.1rem; display: inline-block; width: auto; }
.plan-row .retail-ref { margin: .5rem 0 0; font-size: .78rem; }
.plan-row .term-tabs { margin: 0; }

/* --- reference: spec tables --- */
.ref-wrap { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.ref-hero h1 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 4.5vw, 2.6rem); line-height: 1.15; }
.ref-hero .subhead { margin: 0 0 1rem; color: var(--text-muted); font-size: 1.05rem; }
.ref-jump { margin: 0 0 2rem; }
.ref-jump a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1.1rem;
  font-weight: 600; text-decoration: none; color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-md);
}
.ref-jump a::after { content: "\2193"; }
.ref-jump a:hover, .ref-jump a:focus-visible { background: var(--accent); color: var(--accent-text); }
#ref-plans-h { scroll-margin-top: 1rem; }
.ref-lede h2, .ref-plans h2 { margin: 2rem 0 .8rem; font-size: 1.3rem; }
.ref-lede p { line-height: 1.75; margin: 0 0 1rem; }
.plan-spec { width: 100%; border-collapse: collapse; margin: 0 0 2rem; font-size: .92rem; }
.plan-spec caption { text-align: left; font-weight: 600; padding: 0 0 .5rem; color: var(--text); font-family: var(--font-head); }
.plan-spec th, .plan-spec td { padding: .55rem .5rem; border-bottom: 1px solid var(--border); text-align: left; }
.plan-spec thead th { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.plan-spec .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-spec tbody th { font-weight: 500; }
.plan-spec-buy { text-align: right; }
.plan-spec-buy a { text-decoration: none; font-weight: 600; white-space: nowrap; }
.plan-spec-buy a:hover { text-decoration: underline; }
.ref-plans-foot { font-size: .86rem; color: var(--text-muted); line-height: 1.65; }

/* --- guided: comparison blocks and a plain Q&A --- */
.gd-wrap { max-width: 48rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.gd-hero h1 { margin: 0 0 .5rem; font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
.gd-hero .subhead { margin: 0 0 2rem; color: var(--text-muted); font-size: 1.05rem; }
.gd-plans { margin: 2.5rem 0; }
.gd-plans-lede { margin: 0 0 1.2rem; color: var(--text-muted); line-height: 1.65; }
.plan-compare-set { display: flex; flex-direction: column; gap: 1rem; }
.plan-compare { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); padding: 1.2rem 1.3rem; }
.plan-compare-head h3 { margin: 0; font-size: 1.15rem; }
.plan-compare-who { margin: .2rem 0 .9rem; color: var(--text-muted); font-size: .92rem; }
.plan-compare-from { margin: 0 0 .4rem; font-size: 1.05rem; }
.plan-compare-list, .plan-compare-year { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.6; color: var(--text-muted); }
.plan-compare-terms { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; }
.plan-compare-terms a {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .6rem .7rem; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-alt); color: var(--text); min-height: 60px;
}
.plan-compare-terms a:hover { border-color: var(--accent); }
.pc-term { font-size: .78rem; color: var(--text-muted); }
.pc-price { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-mo { font-size: .76rem; color: var(--text-muted); }
.gd-worries { margin: 2.5rem 0; }
.gd-worries h2 { font-size: 1.25rem; margin: 0 0 1rem; }
.gd-qa dt { font-weight: 700; margin-top: 1.1rem; }
.gd-qa dd { margin: .3rem 0 0; color: var(--text-muted); line-height: 1.65; }

/* --- counter: catalogue tables --- */
.ct-wrap { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.ct-hero { text-align: center; margin-bottom: 2.5rem; }
.ct-hero h1 { margin: 0 0 .6rem; font-size: clamp(1.7rem, 4.5vw, 2.5rem); }
.ct-market { margin-bottom: 2.5rem; }
.catalogue { width: 100%; border-collapse: collapse; font-size: .9rem; }
.catalogue caption {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  text-align: left; padding: 0 0 .6rem;
  font-family: var(--font-head); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}
/* min-width + padding rather than a fixed width: this now holds a two-letter
   code (CL/DS/CU/GM), not one letter, since Claude and Cursor both start
   with C and a single shared letter defeated the point of a badge meant to
   tell markets apart at a glance. */
.cat-letter {
  min-width: 1.9rem; height: 1.9rem; padding: 0 .35rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: var(--market-accent, var(--accent));
  color: #fff; font-size: .78rem; letter-spacing: 0;
}
.catalogue[data-market="deepseek"] { --market-accent: #3b82f6; }
.catalogue[data-market="cursor"]   { --market-accent: #8b5cf6; }
.catalogue[data-market="gemini"]   { --market-accent: #0ea5a4; }
.cat-vendor { font-size: .72rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.catalogue th, .catalogue td { padding: .5rem .55rem; border-bottom: 1px solid var(--border); text-align: left; }
.catalogue thead th { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.catalogue .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.catalogue tbody th { font-weight: 700; vertical-align: top; border-right: 1px solid var(--border); padding-right: .9rem; }
.cat-buy { text-align: right; }
.cat-buy a { text-decoration: none; font-weight: 700; white-space: nowrap; }
.cat-buy a:hover { text-decoration: underline; }
.ct-tagline { margin: .6rem 0 0; font-size: .85rem; color: var(--text-muted); }
.ct-note { margin: 2.5rem 0; }
.ct-note h2 { font-size: 1.2rem; margin: 0 0 .7rem; }
.ct-note p { line-height: 1.7; margin: 0 0 .9rem; }

@media (max-width: 760px) {
  .plan-row { grid-template-columns: 1fr; gap: .7rem; }
  .plan-row-buy { align-items: flex-start; text-align: left; }
  .plan-spec, .catalogue { font-size: .84rem; }
  .plan-spec th, .plan-spec td, .catalogue th, .catalogue td { padding: .45rem .35rem; }
  .catalogue tbody th { padding-right: .5rem; }
  /* Header cells wrap. "ANTHROPIC LIST" held on one line made that column about
     120px wide, which squeezed the term label onto two lines ("1" over "Month")
     and pushed the Order link past the edge, clipped to "Orde" on the Max
     tables: the one link on the page that takes an order. Specificity is
     spelled out because .plan-spec .num (two classes) outranks a bare
     `thead th`. */
  .plan-spec thead th, .plan-spec thead th.num {
    white-space: normal; line-height: 1.2; vertical-align: bottom;
    font-size: .72rem; letter-spacing: .02em;
  }
  .plan-spec tbody th { white-space: nowrap; }
  .plan-spec-buy a { display: inline-block; padding: .5rem .25rem; }
  /* Wrap "12 MONTH" onto two lines rather than shrinking it below 11px. */
  .catalogue thead th, .catalogue thead th.num {
    font-size: .7rem; letter-spacing: .02em; padding-inline: .15rem;
    white-space: normal; line-height: 1.15; vertical-align: bottom;
  }
  .catalogue td.num { padding-inline: .15rem; }
}

/* ============================================================
   Icons.
   The homepages carried a single <svg> between them, which is most of why
   they read as unfinished. currentColor throughout, stroke weight from the
   theme, so one set covers five sites without a second file.
   ============================================================ */
.ic { flex: 0 0 auto; vertical-align: -0.15em; }

/* Footer badges are icon chips now, not a tick-bulleted list. All three
   footers that had badges rendered the same tick down the left edge. */
.trust-badges { list-style: none; padding: 0; margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.trust-badges li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .65rem; margin: 0;
  font-size: .78rem; line-height: 1.35;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
}
.trust-badges li::before { content: none; }
.trust-badges .ic { color: var(--accent); }
/* Per-footer shapes, so even the chips are not identical. */
.trust-badges--spare li { border: 0; background: none; padding: .15rem .1rem; gap: .35rem; }
.trust-badges--spare li + li { border-left: 1px solid var(--border); padding-left: .7rem; margin-left: .3rem; }
.trust-badges--guided { flex-direction: column; align-items: flex-start; gap: .35rem; }
.trust-badges--guided li { border: 0; background: none; padding: .1rem 0; font-size: .84rem; }
.trust-badges--counter li { border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; font-weight: 700; }

.hero-facts span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-facts .ic { color: var(--accent); }
.pv-policy-cols h3 { display: flex; align-items: center; gap: .4rem; }
.pv-keep .ic { color: var(--success); }
.pv-drop .ic { color: var(--accent); }
.track-order label { display: inline-flex; align-items: center; gap: .4rem; }

/* --- guided plan block, rebuilt around one number --- */
.plan-compare-price { margin: .2rem 0 .9rem; }
.plan-compare-from { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .5rem; }
.pc-big { font-size: 2.1rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-for { color: var(--text-muted); font-size: .95rem; }
.plan-compare-list { display: flex; align-items: flex-start; gap: .45rem; margin: 0; font-size: .86rem; line-height: 1.55; color: var(--text-muted); }
.plan-compare-list .ic { margin-top: .15rem; color: var(--accent); }
.plan-compare-more { margin: 0 0 1rem; }
.plan-compare-more > summary {
  cursor: pointer; list-style: none;
  font-size: .86rem; font-weight: 600; color: var(--accent);
  padding: .5rem 0; min-height: 40px; display: flex; align-items: center; gap: .4rem;
}
.plan-compare-more > summary::-webkit-details-marker { display: none; }
.plan-compare-more > summary::after {
  content: ""; width: .38em; height: .38em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.plan-compare-more[open] > summary::after { transform: rotate(-135deg); }
.plan-compare-terms { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.plan-compare-terms a { flex-direction: row; align-items: baseline; justify-content: space-between; gap: .5rem; min-height: 44px; }
.plan-compare-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.3rem;
  background: var(--accent); color: var(--accent-text);
  border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 650; min-height: 48px;
}
.plan-compare-cta:hover { filter: brightness(1.06); }


/* Section headings carrying an icon need the icon aligned to the cap height,
   not the baseline, or it hangs below the text. */
.how-it-works h2, .home-guides-heading h2, .ref-lede h2, .ref-plans h2 {
  display: flex; align-items: center; gap: .5rem;
}
.how-it-works h2 .ic, .home-guides-heading h2 .ic, .ref-lede h2 .ic, .ref-plans h2 .ic { color: var(--accent); }
.co-ledger td .ic { color: var(--text-muted); margin-right: .45rem; }

/* ============================================================
   Footers. Five components, not one template with five vocabularies.
   The old one had an identical block order on every site (brand, mission,
   badges, column grid, coin count, a full legal paragraph, copyright, track
   form) which is why they still read as the same footer however the headings
   were worded. The legal wall lives at /terms now; each footer carries the one
   sentence that has to travel with every page.
   ============================================================ */
.ft { border-top: 1px solid var(--border); margin-top: 3rem; padding: 1.5rem 1.5rem 2rem; font-size: .88rem; }
.ft a { color: inherit; text-decoration: none; }
.ft a:hover { color: var(--accent); text-decoration: underline; }

/* --- ledger: two rows, links inline, a thin meta bar --- */
.ft-ledger { max-width: 62rem; margin-left: auto; margin-right: auto; }
.ft-ledger-top { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: flex-start; }
.ft-ledger .ft-cost { margin: .5rem 0 0; max-width: 40ch; font-size: .82rem; color: var(--text-muted); line-height: 1.55; }
.ft-ledger-links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: baseline; }
.ft-ledger-links a { color: var(--text-muted); }
.ft-ledger-bar {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between;
  margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--text-muted);
}

/* --- spare: two lines total. The shortest footer on the estate. --- */
.ft-spare { max-width: 40rem; margin-left: auto; margin-right: auto; text-align: left; }
.ft-spare-links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.ft-spare-links a { color: var(--text); }
.ft-spare-meta { margin: .9rem 0 0; font-size: .8rem; line-height: 1.6; color: var(--text-muted); }

/* --- help: a support card first, because this site's users need one --- */
.ft-help { max-width: 48rem; margin-left: auto; margin-right: auto; }
.ft-help-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.2rem; align-items: start;
  padding: 1.3rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg);
}
.ft-help-icon { color: var(--accent); }
.ft-help-card h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.ft-help-card p { margin: 0 0 .6rem; color: var(--text-muted); font-size: .88rem; line-height: 1.55; }
.ft-help-cta { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; color: var(--accent); }
.ft-help-track label { display: block; font-size: .75rem; color: var(--text-muted); margin-bottom: .3rem; }
.ft-help-track-row { display: flex; gap: .35rem; }
.ft-help-track input { width: 9.5rem; padding: .55rem .6rem; font: inherit; font-size: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-alt); color: var(--text); min-height: 44px; }
.ft-help-track button { padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-alt); color: var(--text); cursor: pointer; min-height: 44px; }
.ft-help-links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 1.2rem 0 0; color: var(--text-muted); }
.ft-help-legal { margin: .9rem 0 0; font-size: .78rem; line-height: 1.6; color: var(--text-muted); }

/* --- index: a link index, no prose above it --- */
.ft-index { max-width: 46rem; margin-left: auto; margin-right: auto; }
.ft-index-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.4rem; }
.ft-index-cols h2 { margin: 0 0 .5rem; font-size: .76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.ft-index-cols ul { list-style: none; margin: 0; padding: 0; }
.ft-index-cols li { padding: .16rem 0; font-size: .86rem; }
.ft-index-legal { margin: 1.4rem 0 0; padding-top: .9rem; border-top: 1px solid var(--border); font-size: .78rem; line-height: 1.65; color: var(--text-muted); }

/* --- counter: track order first, catalogue shortcuts, signage type --- */
.ft-counter { max-width: 60rem; margin-left: auto; margin-right: auto; }
.ft-counter-bar { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: flex-end; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.ft-counter-track label { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin-bottom: .35rem; }
.ft-counter-track-row { display: flex; gap: .35rem; }
.ft-counter-track input { padding: .55rem .7rem; font: inherit; font-size: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-alt); color: var(--text); min-height: 44px; }
.ft-counter-track button { padding: .55rem 1.1rem; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-text); font-weight: 700; cursor: pointer; min-height: 44px; }
.ft-counter-facts { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0; font-size: .82rem; color: var(--text-muted); }
.ft-counter-facts span { display: inline-flex; align-items: center; gap: .4rem; }
.ft-counter-links { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin: 1.1rem 0 0; }
.ft-counter-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.ft-counter-group b { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ft-counter-group a { font-size: .86rem; color: var(--text-muted); }
.ft-counter-legal { margin: 1.1rem 0 0; font-size: .76rem; line-height: 1.6; color: var(--text-muted); }

@media (max-width: 700px) {
  .ft-help-card { grid-template-columns: 1fr; }
  .ft-help-track input { width: 100%; }
  .ft-counter-bar { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Marks.
   Not an icon set. Each site draws marks its own way, because a shared icon
   library is precisely what made five niche shops look like five copies of one
   template. See views/partials/icon.ejs.
   ============================================================ */
.mk { flex: 0 0 auto; }

/* Terminal: ASCII in the body face, which is already monospace here. */
.mk-ascii {
  font-family: var(--font-body);
  font-size: .9em;
  color: var(--accent);
  letter-spacing: -.02em;
}

/* Reference: a printed section mark, set in the serif heading face and sized
   down so it sits like a footnote marker rather than an icon. */
.mk-print {
  font-family: var(--font-head);
  font-size: 1.05em;
  line-height: 1;
  color: var(--accent);
  opacity: .8;
}

/* Counter: a stencilled character in a box, like a price board. */
.mk-stencil {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35em; height: 1.35em; padding: 0 .2em;
  font-family: var(--font-head);
  font-size: .78em; font-weight: 800;
  letter-spacing: 0;
  color: var(--accent-text);
  background: var(--accent);
  border-radius: 2px;
}

/* Beginner site: the drawn marks. Slightly heavier than a hairline so they
   read as ink rather than as a wireframe. */
.mk-drawn { vertical-align: -0.18em; color: var(--accent); }

/* The dealing desk renders nothing at all, so anything that laid out around a
   mark has to close the gap rather than leave a hole. */
.markstyle-none .ft-help-icon,
.markstyle-none .pv-policy-cols h3 { gap: 0; }


/* Catalogue as a price matrix. Every cell is a link to that exact plan and
   term, so buying is one click from the board rather than a row scroll. */
.catalogue tbody th { border-right: 1px solid var(--border); padding-right: 1rem; line-height: 1.3; }
.cat-list { display: block; font-size: .72rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; text-transform: none; }
/* These were bold body-coloured text with no border, so nothing said a price
   could be tapped and hover, the only cue, does not exist on a phone. On the
   one site whose whole checkout path starts here that read as a price list you
   could not buy from. Accent text in a bordered cell is the affordance. */
.catalogue td.num a {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .35rem .2rem; box-sizing: border-box;
  font-weight: 700; text-decoration: none; color: var(--accent);
  background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.catalogue td.num a:hover, .catalogue td.num a:focus-visible {
  background: var(--accent); color: var(--accent-text); border-color: var(--accent);
}
.ct-hint { margin: .9rem 0 0; font-size: .88rem; color: var(--text-muted); }
.cat-none { color: var(--text-muted); }
.catalogue thead th.num { text-align: right; }