/* signup.css — public reader/member signup page.
   Uses the site theme tokens from /theme.css where available, with safe
   fallbacks so the page looks premium even on a freshly-installed theme.
   No inline styles (strict-CSP friendly). */

:root {
  --su-bg: var(--vp-bg, #0d0f14);
  --su-surface: var(--vp-surface, #161922);
  --su-surface-2: #1d212c;
  --su-border: rgba(255, 255, 255, .08);
  --su-text: var(--vp-text, #e8eaf0);
  --su-muted: #9aa3b2;
  --su-accent: var(--vp-accent, #6366f1);
  --su-accent-2: #818cf8;
  --su-ok: #10b981;
  --su-err: #ef4444;
  --su-font: var(--vp-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

* { box-sizing: border-box; }

.su-body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(99, 102, 241, .18), transparent 60%),
    var(--su-bg);
  color: var(--su-text);
  font-family: var(--su-font);
  -webkit-font-smoothing: antialiased;
  display: flex;
}

.su-shell {
  margin: auto;
  width: 100%;
  max-width: 30rem;
  padding: 2.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.su-card {
  width: 100%;
  background: linear-gradient(180deg, var(--su-surface-2), var(--su-surface));
  border: 1px solid var(--su-border);
  border-radius: 18px;
  padding: 2.25rem 2rem 2rem;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .65);
}

.su-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.5rem;
}

.su-logo { border-radius: 9px; }

.su-brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

.su-title {
  margin: 0 0 .4rem;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.su-sub {
  margin: 0 0 1.4rem;
  color: var(--su-muted);
  font-size: .95rem;
  line-height: 1.55;
}

.su-notice {
  margin: 0 0 1.1rem;
  padding: .7rem .85rem;
  border-radius: 10px;
  font-size: .86rem;
  line-height: 1.45;
  border: 1px solid transparent;
}

.su-notice--ok {
  color: #d1fae5;
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .35);
}

.su-notice--err {
  color: #fee2e2;
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .35);
}

.su-form {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.4rem;
}

.su-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--su-muted);
}

.su-input {
  width: 100%;
  padding: .8rem .9rem;
  font-size: .98rem;
  color: var(--su-text);
  background: var(--su-bg);
  border: 1px solid var(--su-border);
  border-radius: 11px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.su-input:focus {
  border-color: var(--su-accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}

.su-btn {
  margin-top: .25rem;
  padding: .85rem 1rem;
  font-size: 1rem;
  font-weight: 650;
  color: #fff;
  background: linear-gradient(180deg, var(--su-accent-2), var(--su-accent));
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}

.su-btn:hover { filter: brightness(1.07); }
.su-btn:active { transform: translateY(1px); }
.su-btn:disabled { filter: saturate(.6) brightness(.9); cursor: default; }

.su-perks {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--su-border);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.su-perks li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  color: var(--su-text);
}

.su-perk-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--su-accent-2);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
  flex: none;
}

.su-foot {
  margin: 0;
  font-size: .85rem;
  color: var(--su-muted);
}

.su-link {
  color: var(--su-accent-2);
  text-decoration: none;
  font-weight: 600;
}

.su-link:hover { text-decoration: underline; }

.su-legal {
  margin: 0;
  font-size: .76rem;
  color: var(--su-muted);
  opacity: .8;
}

/* The muted colour existed only as the --su-muted custom property, so markup
   that reached for a `su-muted` CLASS rendered at full contrast. */
.su-muted { color: var(--su-muted); }


/* ── Member account portal (/members/account) ─────────────────────────────── */

.ma-shell {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}

.ma-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ma-title { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }

.ma-card {
  border: 1px solid var(--su-border);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(180deg, var(--su-surface-2), var(--su-surface));
}

.ma-card h2 { margin: 0 0 1rem; font-size: 1.05rem; }

.ma-plan { font-size: 1rem; margin: 0; }
.ma-plan--paid { font-weight: 600; }
.ma-muted { color: var(--su-muted); font-weight: 400; }

.ma-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--su-border);
}
.ma-row:last-child { border-bottom: 0; }
.ma-row span:first-child { color: var(--su-muted); }

.ma-field { display: block; margin-bottom: 1rem; }
.ma-field label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9rem; }
.ma-field input[type=text] {
  width: 100%;
  padding: .6rem .8rem;
  font-size: .98rem;
  color: var(--su-text);
  background: var(--su-bg);
  border: 1px solid var(--su-border);
  border-radius: 10px;
  outline: none;
}
.ma-field input[type=text]:focus { border-color: var(--su-accent); box-shadow: 0 0 0 3px rgba(99,102,241,.25); }

.ma-check { display: flex; align-items: center; gap: .6rem; margin: .7rem 0; font-size: .92rem; }
.ma-subhead { margin: 1.4rem 0 .4rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--su-muted, #6b7280); }
.ma-hint { margin: .6rem 0 1rem; font-size: .82rem; color: var(--su-muted, #6b7280); }

.su-btn--inline { display: inline-block; width: auto; text-decoration: none; }

.ma-upgrade {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed var(--su-border);
  border-radius: 10px;
  text-align: center;
}
.ma-upgrade p { margin: 0 0 .6rem; }

.ma-signout {
  background: transparent;
  border: 1px solid var(--su-border);
  border-radius: 9px;
  padding: .45rem .9rem;
  cursor: pointer;
  color: var(--su-text);
  font: inherit;
}
.ma-signout:hover { border-color: var(--su-accent); }

/* ── Public pricing page (/pricing) ───────────────────────────────────────── */

.pr-shell { width: 100%; max-width: 62rem; margin: 0 auto; padding: 2.5rem 1.25rem; }
.pr-head { text-align: center; margin-bottom: 2.5rem; }
.pr-head h1 { font-size: 2rem; margin: 0 0 .5rem; letter-spacing: -.02em; }
.pr-head p { color: var(--su-muted); margin: 0; }

.pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.pr-card {
  border: 1px solid var(--su-border);
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: linear-gradient(180deg, var(--su-surface-2), var(--su-surface));
}
.pr-card--featured { border-color: var(--su-accent); box-shadow: 0 10px 40px -16px rgba(99,102,241,.5); }

.pr-name { margin: 0; font-size: 1.25rem; }
.pr-desc { color: var(--su-muted); margin: .25rem 0 .75rem; min-height: 2.6em; }
.pr-price { display: flex; align-items: baseline; gap: .4rem; }
.pr-amount { font-size: 1.9rem; font-weight: 700; }
.pr-per { color: var(--su-muted); font-size: .9rem; }
.pr-yearly { font-size: .8rem; color: var(--su-muted); margin: .1rem 0 0; }

.pr-benefits { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: .5rem; }
.pr-benefits li { padding-left: 1.5rem; position: relative; font-size: .92rem; }
.pr-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--su-accent-2); font-weight: 700; }

.pr-cta {
  margin-top: auto;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: .7rem 1rem;
  border-radius: 11px;
  border: 1px solid var(--su-border);
  color: var(--su-text);
  font-weight: 600;
}
.pr-cta--primary { background: linear-gradient(180deg, var(--su-accent-2), var(--su-accent)); color: #fff; border-color: transparent; }
.pr-cta:hover { filter: brightness(1.06); }

.pr-empty { text-align: center; color: var(--su-muted); }
.pr-foot { text-align: center; margin-top: 2rem; color: var(--su-muted); }

/* ── Paywall preview (gated posts) ────────────────────────────────────────── */

.pw-gate {
  margin-top: 2rem;
  padding: 1.85rem;
  border: 1px solid var(--su-border);
  border-radius: 14px;
  text-align: center;
  background: linear-gradient(180deg, var(--su-surface-2), var(--su-surface));
}
.pw-title { font-weight: 700; font-size: 1.15rem; margin: 0 0 .5rem; }
.pw-price { margin: .25rem 0; font-size: 1.05rem; }
.pw-price span { color: var(--su-muted); font-size: .85rem; }
.pw-perks { list-style: none; padding: 0; margin: .75rem auto 1rem; max-width: 22rem; display: flex; flex-direction: column; gap: .4rem; text-align: left; }
.pw-perks li { padding-left: 1.4rem; position: relative; font-size: .9rem; }
.pw-perks li::before { content: "✓"; position: absolute; left: 0; color: var(--su-accent-2); font-weight: 700; }
.pw-join {
  display: inline-block;
  padding: .65rem 1.2rem;
  border-radius: 11px;
  background: linear-gradient(180deg, var(--su-accent-2), var(--su-accent));
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  margin: .25rem 0 1rem;
}
.pw-form { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.pw-form input { padding: .6rem .8rem; border-radius: 9px; border: 1px solid var(--su-border); background: var(--su-bg); color: var(--su-text); }
.pw-form button { padding: .6rem 1rem; border-radius: 9px; border: 0; background: var(--su-surface-2); color: var(--su-text); cursor: pointer; border: 1px solid var(--su-border); }
.pw-hint { font-size: .8rem; color: var(--su-muted); margin-top: .75rem; }
.pw-shell { max-width: 42rem; margin: 3rem auto; padding: 0 1rem; }
.pw-excerpt { opacity: .85; }


/* ── Public author profile (/author/{id}) ─────────────────────────────────── */

.au-shell { width: 100%; max-width: 34rem; margin: 0 auto; padding: 3rem 1.25rem; }

.au-card {
  text-align: center;
  border: 1px solid var(--su-border);
  border-radius: 18px;
  padding: 2.5rem 2rem;
  background: linear-gradient(180deg, var(--su-surface-2), var(--su-surface));
}

.au-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  display: block;
  border: 2px solid var(--su-border);
}

.au-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--su-accent-2), var(--su-accent));
}

.au-name { margin: 0 0 .25rem; font-size: 1.6rem; letter-spacing: -.02em; }
.au-role { margin: 0 0 1rem; color: var(--su-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.au-bio { margin: 0 auto 1.25rem; max-width: 28rem; line-height: 1.6; color: var(--su-text); }

.au-socials { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.25rem; }
.au-social {
  display: inline-block;
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--su-border);
  color: var(--su-text);
  text-decoration: none;
  font-size: .85rem;
}
.au-social:hover { border-color: var(--su-accent); color: var(--su-accent-2); }

.au-foot { margin: .5rem 0 0; font-size: .85rem; }


/* ── Checkout (direct/offline payment) ──────────────────────────────────── */
.co-instructions{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;background:var(--su-surface,#0f172a);border:1px solid var(--su-border,rgba(125,125,125,.25));border-radius:10px;padding:1rem;margin:.75rem 0}
.co-reference{font-size:1.4rem;text-align:center;margin:.5rem 0 1rem}
.co-reference code{padding:.35rem .75rem;border-radius:8px;background:var(--su-surface,#0f172a);border:1px dashed var(--su-accent,#f59e0b);letter-spacing:.1em}

/* ── Light / dark theme support (toggle sets [data-theme] on <html>) ─────── */
html[data-theme="light"] {
  --su-bg: #f7f8fa;
  --su-surface: #ffffff;
  --su-surface-2: #f1f3f7;
  --su-border: rgba(15, 23, 42, .10);
  --su-text: #0f172a;
  --su-muted: #5b6472;
  --su-accent: #4f46e5;
  --su-accent-2: #6366f1;
}
/* Floating theme toggle (author + auth pages) */
.vayu-theme-toggle.au-theme-toggle {
  position: fixed; top: 1rem; right: 1rem; z-index: 20;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--su-surface); color: var(--su-text);
  border: 1px solid var(--su-border); cursor: pointer;
  font-size: 1rem; line-height: 1; transition: background .15s, color .15s;
}
.vayu-theme-toggle.au-theme-toggle:hover { background: var(--su-surface-2); }

/* ── Author page — minimalist, elegant (clean, no gradient) ──────────────── */
.su-body.au-page { background: var(--su-bg); display: block; }
.au-wrap { width: 100%; max-width: 44rem; margin: 0 auto; padding: 3.5rem 1.25rem 4rem; }
.au-hero { display: flex; gap: 1.25rem; align-items: center; padding-bottom: 1.75rem; border-bottom: 1px solid var(--su-border); margin-bottom: 2rem; }
.au-hero .au-avatar, .au-hero .au-avatar--placeholder { width: 80px; height: 80px; flex: 0 0 auto; margin: 0; }
.au-hero-info { min-width: 0; }
.au-page .au-name { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .2rem; text-align: left; }
.au-page .au-role { text-align: left; margin: 0 0 .5rem; }
.au-page .au-bio { text-align: left; margin: .35rem 0 .6rem; max-width: none; color: var(--su-muted); line-height: 1.6; }
.au-page .au-socials { justify-content: flex-start; margin-top: .3rem; }
.au-posts-head { margin: 0 0 1rem; }
.au-posts-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--su-muted); font-weight: 600; }
.au-posts { display: flex; flex-direction: column; }
.au-post { display: block; padding: 1.1rem 0; border-bottom: 1px solid var(--su-border); text-decoration: none; color: inherit; transition: padding-left .18s ease; }
.au-post:hover { padding-left: .5rem; }
.au-post-date { display: block; font-size: .74rem; color: var(--su-muted); font-variant-numeric: tabular-nums; margin-bottom: .2rem; }
.au-post-title { display: block; font-size: 1.12rem; font-weight: 600; color: var(--su-text); line-height: 1.35; }
.au-post:hover .au-post-title { color: var(--su-accent); }
.au-post-excerpt { margin: .35rem 0 0; font-size: .92rem; color: var(--su-muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.au-posts-empty { color: var(--su-muted); font-size: .95rem; padding: 1rem 0; }
.au-page .au-foot { margin-top: 2rem; text-align: center; }

/* ══ Premium member dashboard v2 — plan, benefits, mail-ID, 2FA ═════════════ */

.ma-subtitle { margin: .25rem 0 0; color: var(--su-muted); font-size: .9rem; }

/* Plan hero card */
.ma-card--plan { background: linear-gradient(180deg, rgba(99,102,241,.10), var(--su-surface)); border-color: rgba(129,140,248,.35); }
.ma-plan-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; flex-wrap: wrap; }
.ma-plan-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  padding: .25rem .7rem; border-radius: 999px;
  background: var(--su-surface-2); border: 1px solid var(--su-border); color: var(--su-text);
}
.ma-plan-badge--paid { background: linear-gradient(180deg, var(--su-accent-2), var(--su-accent)); color: #fff; border-color: transparent; }
.ma-plan-price { color: var(--su-muted); font-size: .85rem; font-weight: 600; }
.ma-plan-h { margin: .5rem 0 .3rem; font-size: 1.05rem; }

/* Benefit lists (check bullets) */
.ma-benefits { list-style: none; padding: 0; margin: .4rem 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.ma-benefits li { padding-left: 1.5rem; position: relative; font-size: .92rem; line-height: 1.4; }
.ma-benefits li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--su-accent-2); font-weight: 700; }

/* Primary / danger CTAs (buttons and links share the look) */
.ma-cta-primary, .ma-cta-danger {
  display: inline-block; width: auto; text-align: center; text-decoration: none;
  padding: .65rem 1.15rem; border-radius: 11px; font: inherit; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; margin-top: .4rem;
}
.ma-cta-primary { background: linear-gradient(180deg, var(--su-accent-2), var(--su-accent)); color: #fff; }
.ma-cta-primary:hover { filter: brightness(1.07); }
.ma-cta-danger { background: transparent; border-color: var(--su-err); color: var(--su-err); }
.ma-cta-danger:hover { background: rgba(239,68,68,.1); }

/* Free vs Premium comparison */
.ma-compare { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 34rem) { .ma-compare { grid-template-columns: 1fr; } }
.ma-plan-col { border: 1px solid var(--su-border); border-radius: 12px; padding: 1rem 1.1rem; background: var(--su-bg); }
.ma-plan-col--paid { border-color: rgba(129,140,248,.45); background: linear-gradient(180deg, rgba(99,102,241,.08), var(--su-bg)); }
/* The column the member is actually on. Its sibling --paid carried a treatment
   and this one carried none, so "you are here" read only in the tag text. */
.ma-plan-col--current { border-color: var(--su-muted); background: var(--su-surface); }
.ma-plan-col-h { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: .5rem; }
.ma-col-tag { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 999px; background: var(--su-surface-2); color: var(--su-muted); }
.ma-col-tag--paid { background: linear-gradient(180deg, var(--su-accent-2), var(--su-accent)); color: #fff; }

/* Mail-ID card */
.ma-mailid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.1rem; font-weight: 600; padding: .7rem .9rem; border-radius: 10px; background: var(--su-bg); border: 1px solid var(--su-border); word-break: break-all; margin-bottom: .3rem; }
.ma-card--claim, .ma-card--perk { border-color: rgba(129,140,248,.3); }

/* Claim form */
.ma-claim { display: flex; flex-direction: column; gap: .7rem; }
.ma-claim-row { display: flex; align-items: stretch; }
.ma-input { width: 100%; padding: .6rem .8rem; font: inherit; font-size: .98rem; color: var(--su-text); background: var(--su-bg); border: 1px solid var(--su-border); border-radius: 10px; outline: none; }
.ma-input:focus { border-color: var(--su-accent); box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
.ma-claim-row .ma-input { border-radius: 10px 0 0 10px; border-right: 0; }
.ma-claim-at { display: inline-flex; align-items: center; padding: 0 .8rem; background: var(--su-surface-2); border: 1px solid var(--su-border); border-radius: 0 10px 10px 0; color: var(--su-muted); font-size: .9rem; white-space: nowrap; }
.ma-claim-terms { font-size: .85rem; }
.ma-claim-msg { margin: 0; font-size: .85rem; min-height: 1.1em; }
.ma-claim-msg.is-err { color: var(--su-err); }
.ma-claim-msg.is-ok { color: var(--su-muted); }

/* Two-factor card */
.ma-badge { font-size: .68rem; font-weight: 700; letter-spacing: .03em; padding: .15rem .5rem; border-radius: 999px; vertical-align: middle; }
.ma-badge--ok { background: rgba(16,185,129,.16); color: var(--su-ok); }
.ma-badge--warn { background: rgba(245,158,11,.18); color: #f59e0b; }
.ma-2fa-off { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; margin-top: .6rem; }
.ma-2fa-enroll { margin-top: 1rem; border-top: 1px solid var(--su-border); padding-top: 1rem; }
.ma-2fa-grid { display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: wrap; }
.ma-2fa-qrbox { background: #fff; padding: 8px; border-radius: 10px; line-height: 0; flex-shrink: 0; }
.ma-2fa-qr { display: block; width: 188px; height: 188px; }
.ma-2fa-steps { flex: 1; min-width: 12rem; font-size: .9rem; }
.ma-2fa-steps p { margin: 0 0 .6rem; line-height: 1.45; }
.ma-2fa-manual { color: var(--su-muted); }
.ma-2fa-key { display: inline-block; font-family: ui-monospace, monospace; font-size: .85rem; word-break: break-all; background: var(--su-bg); padding: .2rem .4rem; border-radius: 6px; border: 1px solid var(--su-border); }
.ma-field > span { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9rem; }

/* Sign-in: alternate VayuMail login + "or" divider */
.su-or { display: flex; align-items: center; text-align: center; color: var(--su-muted); font-size: .8rem; margin: 1.3rem 0 .6rem; }
.su-or::before, .su-or::after { content: ""; flex: 1; height: 1px; background: var(--su-border); }
.su-or span { padding: 0 .7rem; }
.su-alt { border: 1px solid var(--su-border); border-radius: 12px; padding: .1rem .9rem; background: var(--su-bg); }
.su-alt summary { cursor: pointer; padding: .8rem 0; font-weight: 600; font-size: .92rem; list-style: none; }
.su-alt summary::-webkit-details-marker { display: none; }
.su-alt summary::after { content: "+"; float: right; color: var(--su-muted); font-weight: 700; }
.su-alt[open] summary::after { content: "\2013"; }
.su-alt-body { padding: .2rem 0 1rem; }
.su-btn--ghost { background: transparent; border: 1px solid var(--su-accent); color: var(--su-text); }
.su-btn--ghost:hover { background: rgba(99,102,241,.12); }

/* Signup: Free-vs-Premium comparison card */
.su-compare-card { margin-top: 1rem; }
.su-compare-h { margin: 0 0 1rem; font-size: 1.05rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Member pages — compact & calm pass.

   The account and plans pages were sized like a marketing landing page: 2rem
   headings, tall cards, saturated gradient buttons. But someone opens these to
   check a plan, upgrade, or sign out — a utility errand, not a pitch. Tighter
   spacing, a smaller type scale, and one clearly primary action per card make
   them quicker to read and calmer to sit in. Colour is used to mark state (your
   current plan) rather than to shout.

   New in this pass: .pr-cta--current and .pr-here, the states the plans page
   needs now that it knows who is signed in.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Plans page ──────────────────────────────────────────────────────────── */
.pr-shell { max-width: 54rem; padding: 1.9rem 1.15rem 2.4rem; }
.pr-head { margin-bottom: 1.6rem; }
.pr-head h1 { font-size: 1.5rem; margin-bottom: .35rem; }
.pr-head p { font-size: .92rem; }

.pr-grid { gap: 1rem; }
.pr-card { padding: 1.25rem 1.25rem 1.35rem; border-radius: 14px; }
/* The featured card is distinguished by its border, not by a wide glow. */
.pr-card--featured { box-shadow: 0 6px 22px -14px rgba(99, 102, 241, .45); }

.pr-name { font-size: 1.08rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pr-desc { font-size: .88rem; margin: .2rem 0 .6rem; min-height: 0; }
.pr-amount { font-size: 1.5rem; }
.pr-per, .pr-yearly { font-size: .82rem; }
.pr-benefits { margin: .8rem 0; gap: .38rem; }
.pr-benefits li { font-size: .86rem; padding-left: 1.3rem; }

.pr-cta { padding: .62rem 1rem; font-size: .92rem; border-radius: 9px; }
.pr-cta:hover { filter: brightness(1.04); }
.pr-foot { margin-top: 1.4rem; font-size: .88rem; }

/* The plan you are already on: legible, clearly not a button. */
.pr-cta--current {
  display: block;
  text-align: center;
  cursor: default;
  color: var(--su-muted);
  background: transparent;
  border: 1px dashed var(--su-border, rgba(255, 255, 255, .18));
}
.pr-cta--current:hover { filter: none; }

/* A quiet marker beside the current plan's name. */
.pr-here {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .16rem .45rem;
  border-radius: 999px;
  color: var(--su-accent-2);
  background: color-mix(in srgb, var(--su-accent-2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--su-accent-2) 34%, transparent);
}
/* Your current card leads with state rather than with a sales border. */
.pr-card--current { border-color: color-mix(in srgb, var(--su-accent-2) 38%, transparent); }
.pr-card--current.pr-card--featured { box-shadow: none; }

/* ── Account page ────────────────────────────────────────────────────────── */
.ma-title { font-size: 1.32rem; }
.ma-card { padding: 1.15rem 1.2rem; border-radius: 14px; }
.ma-card h2 { font-size: .98rem; margin-bottom: .75rem; }
/* The plan card's tint was competing with the page; keep the hint, drop the wash. */
.ma-card--plan { background: var(--su-surface); border-color: color-mix(in srgb, var(--su-accent-2) 30%, transparent); }

/* ── Motion: responsive, not theatrical ──────────────────────────────────── */
.pr-cta, .pr-card {
  transition: transform .18s cubic-bezier(.22, .61, .36, 1), box-shadow .18s ease, filter .18s ease;
}
.pr-cta:hover { transform: translateY(-1px); }
.pr-card:hover { transform: translateY(-2px); }
.pr-cta--current:hover, .pr-card--current:hover { transform: none; }
.pr-cta:focus-visible { outline: 3px solid var(--su-accent-2); outline-offset: 2px; }

@media (max-width: 560px) {
  .pr-shell { padding: 1.5rem .95rem 2rem; }
  .pr-head h1 { font-size: 1.32rem; }
  .pr-cta { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-cta, .pr-card { transition: none; }
  .pr-cta:hover, .pr-card:hover { transform: none; }
}

/* ── Membership & billing card ────────────────────────────────────────────────
   A definition list rather than a table: these are label/value facts, not
   tabular data, and a dl stays readable when it wraps to one column on a phone. */
.ma-bill { margin: 0; display: grid; gap: .1rem; }
.ma-bill-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--su-border, rgba(255, 255, 255, .07));
}
.ma-bill-row:last-child { border-bottom: 0; }
.ma-bill-row dt { color: var(--su-muted); font-size: .82rem; }
.ma-bill-row dd { margin: 0; font-size: .9rem; font-weight: 600; }
.ma-bill-note {
  display: block;
  margin-top: .15rem;
  font-size: .76rem;
  font-weight: 400;
  color: var(--su-muted);
}

.ma-bill-hist { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--su-border, rgba(255, 255, 255, .07)); }
.ma-bill-hist-h { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--su-muted); margin-bottom: .45rem; }
.ma-bill-hist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ma-bill-hist li { font-size: .84rem; display: flex; gap: .55rem; }
.ma-bill-when { color: var(--su-muted); font-variant-numeric: tabular-nums; flex: none; min-width: 5.4rem; }

@media (max-width: 480px) {
  .ma-bill-row { grid-template-columns: 1fr; gap: .1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Monetization design language on the member pages.

   The account page was a flat stack of eight equal-weight cards, so everything
   shouted at the same volume and the page had to be read top to bottom to find
   anything. Each secondary section now collapses to one summary row — icon tile ·
   title · one-line subtitle · status chip · rotating chevron — and expanding
   reveals the existing card, chromeless, with a short reveal. This mirrors
   .mon-acc in admin-os.css deliberately: the console and the member pages should
   read as one design.

   Native <details>, so it needs no JavaScript: nothing to break under a strict
   CSP, and nothing lost if a script fails to load.
   ═══════════════════════════════════════════════════════════════════════════ */

.ma-sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 1.5rem 0 .7rem;
}
.ma-sec__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--su-text, #e8eaf0);
}
.ma-sec__hint { font-size: .74rem; color: var(--su-muted, #9aa3b2); }

.ma-acc {
  border: 1px solid var(--su-border, rgba(255, 255, 255, .09));
  border-radius: 14px;
  background: var(--su-surface, #161922);
  overflow: hidden;
  margin-bottom: .55rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ma-acc[open] {
  border-color: color-mix(in srgb, var(--su-accent, #6366f1) 32%, var(--su-border, rgba(255, 255, 255, .09)));
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .65);
}

.ma-acc__sum {
  display: flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  list-style: none;
  padding: .7rem .85rem;
  /* Comfortable tap target (WCAG 2.5.5). */
  min-height: 48px;
  user-select: none;
  touch-action: manipulation;
  transition: background .16s ease;
}
.ma-acc__sum::-webkit-details-marker { display: none; }
.ma-acc__sum::marker { content: ""; }
.ma-acc__sum:hover { background: color-mix(in srgb, #fff 3%, transparent); }
.ma-acc__sum:focus-visible { outline: 2px solid var(--su-accent, #6366f1); outline-offset: -2px; }

.ma-acc__ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border-radius: 10px;
  background: color-mix(in srgb, #fff 5%, transparent);
  border: 1px solid var(--su-border, rgba(255, 255, 255, .09));
}
.ma-acc__head { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ma-acc__title { font-weight: 650; font-size: .92rem; color: var(--su-text, #e8eaf0); }
.ma-acc__sub {
  font-size: .77rem;
  color: var(--su-muted, #9aa3b2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ma-acc__chev { flex: none; color: var(--su-muted, #9aa3b2); transition: transform .16s ease; }
.ma-acc[open] .ma-acc__chev { transform: rotate(180deg); }
.ma-acc[open] .ma-acc__sum { border-bottom: 1px solid var(--su-border, rgba(255, 255, 255, .09)); }

.ma-acc__body { animation: ma-reveal .26s cubic-bezier(.16, .84, .44, 1); }
@keyframes ma-reveal {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* The wrapped card renders chromeless — the accordion IS the frame — and its
   duplicate heading is hidden, because the summary row already names it. */
.ma-acc__body > .ma-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: .85rem .9rem 1rem;
}
.ma-acc__body > .ma-card::before { display: none; }
.ma-acc__body > .ma-card > h2:first-child { display: none; }

/* ── Status chip (mirrors .mon-chip) ────────────────────────────────────── */

.ma-chip {
  flex: none;
  font-size: .69rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  /* Theme-neutral grey rather than a white tint: the off state used a 4% WHITE
     fill and a white border, which is invisible on the light theme — so states
     like "Refunded" and "Not approved" read as stray text next to the green
     "Paid" pill instead of as chips. A mid grey resolves on both themes. */
  border: 1px solid rgba(127, 127, 127, .34);
  color: var(--su-muted, #9aa3b2);
  background: rgba(127, 127, 127, .1);
  white-space: nowrap;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ma-chip--on {
  color: #34d399;
  border-color: rgba(52, 211, 153, .4);
  background: rgba(52, 211, 153, .12);
}

@media (max-width: 560px) {
  .ma-acc__sum { padding: .75rem .8rem; gap: .6rem; }
  .ma-acc__ic { width: 32px; height: 32px; }
  /* The subtitle is often an email address; let it wrap rather than truncate to
     a few characters on a narrow screen. */
  .ma-acc__sub { white-space: normal; overflow-wrap: anywhere; }
  .ma-chip { max-width: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ma-acc__body { animation: none; }
  .ma-acc, .ma-acc__sum, .ma-acc__chev { transition: none; }
}

/* "Sign out" wrapped to two lines in the page header on a narrow screen, because
   the flex header let the button shrink below its text. It is a two-word label; it
   should never break. */
.ma-signout { white-space: nowrap; flex: none; }

/* Recovery completion list (ADR-0144). The reset reports exactly what it
   disconnected, and those counts are the holder's only way to notice a device
   they do not recognise — so the list is body-coloured, not muted like the
   surrounding prose. */
.su-list {
  margin: 0 0 1.2rem;
  padding-left: 1.15rem;
  display: grid;
  gap: .4rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--su-text, inherit);
}
.su-list li::marker { color: var(--su-accent, currentColor); }

/* ---------------------------------------------------------------------------
   Plans page: billing-cadence toggle, trial line, saving chip, mail benefit.

   Which price shows is driven entirely by [data-cadence] on .pr-shell, so the
   switch costs no layout work and both figures stay in the HTML for readers
   with JS off and for screen readers. .pr-shell--js is added by the script;
   until it is, the page renders exactly as it did before the toggle existed.
   --------------------------------------------------------------------------- */
.pr-toggle {
  display: flex;
  justify-content: center;
  gap: .25rem;
  margin: 0 auto 1.9rem;
  padding: .28rem;
  width: fit-content;
  border-radius: 999px;
  background: var(--su-card-2, rgba(255, 255, 255, .04));
  border: 1px solid var(--su-border, rgba(255, 255, 255, .1));
}
.pr-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .46rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--su-muted);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.pr-toggle-btn:hover { color: var(--su-text, inherit); }
.pr-toggle-btn.is-on {
  background: linear-gradient(180deg, var(--su-accent-2), var(--su-accent));
  color: #fff;
}
.pr-toggle-btn.is-on .pr-save { background: rgba(255, 255, 255, .2); color: #fff; }

/* The saving is the reason to choose yearly, so it reads as a badge rather
   than as more grey small print. */
.pr-save {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .14rem .42rem;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--su-accent-2);
  background: color-mix(in srgb, var(--su-accent-2) 16%, transparent);
}

/* Cadence visibility. Without the script both prices would stack, so the
   yearly figure is hidden until the toggle can control it. */
.pr-price--yearly { display: none; }
.pr-shell--js[data-cadence="yearly"] .pr-price--monthly { display: none; }
.pr-shell--js[data-cadence="yearly"] .pr-price--yearly { display: flex; }
/* The no-JS "or £X billed yearly" line is redundant once the toggle is live. */
.pr-shell--js .pr-yearly { display: none; }

.pr-trial {
  margin: .45rem 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--su-accent-2);
}

/* A mailbox on your own domain is the benefit that distinguishes this product,
   so it is the one benefit allowed to look different from the rest. */
.pr-benefits li.pr-benefit--mail::before { content: "✉"; }
.pr-benefits li.pr-benefit--mail { color: var(--su-text, inherit); }

@media (max-width: 480px) {
  .pr-toggle { width: 100%; justify-content: stretch; }
  .pr-toggle-btn { flex: 1; justify-content: center; padding: .5rem .6rem; font-size: .82rem; }
}

/* ---------------------------------------------------------------------------
   Receipts and "Your comments" on the account page.

   Both are lists of small records rather than tables: the account page is read
   on a phone as often as a desktop, and a four-column table there either
   scrolls sideways or shrinks past legibility. Each row is a two-line block —
   what and how much, then when / reference / status.
   --------------------------------------------------------------------------- */
.ma-rcpts, .ma-cmts {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: grid;
  gap: .1rem;
}
.ma-rcpt, .ma-cmt {
  padding: .65rem 0;
  border-bottom: 1px solid var(--su-border, rgba(255, 255, 255, .07));
}
.ma-rcpt:last-child, .ma-cmt:last-child { border-bottom: 0; }

.ma-rcpt__main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
}
.ma-rcpt__what { font-size: .92rem; font-weight: 600; }
/* The amount is the thing being looked for, so it is tabular and never wraps. */
.ma-rcpt__amt {
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}
.ma-rcpt__cad {
  font-size: .72rem;
  font-weight: 500;
  color: var(--su-muted);
  text-transform: lowercase;
}
.ma-rcpt__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--su-muted);
}
/* A reference is quoted to a human, so it must be selectable in one gesture. */
.ma-rcpt__ref code {
  font-size: .74rem;
  padding: .1rem .34rem;
  border-radius: 5px;
  background: var(--su-card-2, rgba(255, 255, 255, .05));
  user-select: all;
}

.ma-cmt__top { display: flex; align-items: center; gap: .5rem; }
/* A status chip in these rows must never be clipped: "Not approved" truncated to
   "Not approv…" is exactly the word a member needs to read. The parent rows wrap,
   so a long chip takes its own line rather than losing characters. .ma-chip caps
   its width for the accordion summary, where space really is fixed. */
.ma-rcpt__meta .ma-chip, .ma-cmt__top .ma-chip {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}
.ma-cmt__when { font-size: .78rem; color: var(--su-muted); font-variant-numeric: tabular-nums; }
.ma-cmt__body {
  margin: .35rem 0 .25rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--su-text, inherit);
}
.ma-cmt__where { font-size: .8rem; }
/* A removed post is stated plainly, not styled as a broken link. */
.ma-cmt__where--gone { color: var(--su-muted); font-style: italic; }

@media (max-width: 480px) {
  .ma-rcpt__main { flex-direction: column; gap: .15rem; }
}