/* Account page: sign-in, access status, the free trial and passes. It keeps the
   editorial reading layout; controls are square, rules separate information and
   fired red marks the actions that move the account forward. */
.account-page .account-launcher,
.account-page .account-notice { max-width: none; margin: 0 0 24px; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); color: var(--ink); font-size: 15px; line-height: 1.6; }
.account-page .account-notice:empty { display: none; }

.account-card { padding: 35px; background: var(--paper-light); border-top: 2px solid var(--accent); }
.account-card h2 { margin-top: 0; }
.account-page .account-card p { margin-bottom: 0; }

.account-meta { margin: 24px 0 0; }
.account-meta div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.account-meta dt { color: var(--ink-muted); }
.account-meta dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 25px; }
.account-page button,
.account-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.2; }
.account-page button:not(:disabled):hover,
.account-actions a:hover { background: var(--ink); color: var(--paper-light); }
.account-page .account-button-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.account-page .account-button-primary:not(:disabled):hover { border-color: var(--accent-hover); background: var(--accent-hover); color: #fff; }
.account-page .account-button-quiet { margin-left: auto; padding: 0 4px; border-color: transparent; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.account-page .account-button-quiet:not(:disabled):hover { background: transparent; color: var(--accent); }
.account-page button:disabled { cursor: not-allowed; opacity: .55; }
/* A deep link pre-selects a control; the visitor still presses it. */
.account-page button[data-selected] { outline: 2px solid var(--ink); outline-offset: 3px; }

.account-plans { margin-top: 56px; }
.account-plans h2 { margin: 0 0 18px; }
.account-plan-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.account-plan-list li { display: flex; flex-direction: column; align-items: flex-start; max-width: none; padding: 22px 20px 4px 0; }
.account-plan-list li + li { padding-left: 20px; border-left: 1px solid var(--rule); }
.account-plan-list h3 { margin: 0; color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.account-page .account-plan-price { margin: 10px 0 0; color: var(--ink-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.account-plan-price strong { color: var(--ink); font-size: 36px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.account-page .account-plan-list li p:not(.account-plan-price) { margin: 10px 0 18px; font-size: 14px; line-height: 1.55; }
.account-plan-list button { margin-top: auto; }

/* Prepaid crypto passes: two plans, one coin/network choice and the exact payment. */
.account-crypto .account-crypto-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-page .account-crypto-intro { margin: 0 0 22px; font-size: 15px; line-height: 1.6; }
.account-crypto-network { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 22px; }
.account-crypto-network label,
.account-crypto-tx-label { color: var(--ink-muted); font-size: 14px; font-weight: 600; }
.account-crypto-network select,
.account-crypto-tx { min-height: 44px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper-light); color: var(--ink); font: inherit; font-size: 15px; }
.account-crypto-order { margin-top: 36px; padding: 30px 35px; background: var(--paper-light); border-top: 2px solid var(--accent); }
.account-crypto-order h3 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 600; }
.account-page .account-crypto-amount { margin: 12px 0 0; color: var(--ink-muted); font-size: 18px; font-variant-numeric: tabular-nums; }
.account-crypto-amount strong { color: var(--ink); font-size: 40px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.account-crypto-order code { font-size: 14px; overflow-wrap: anywhere; word-break: break-all; }
.account-crypto-tx-label { display: block; margin-top: 26px; }
.account-crypto-tx { display: block; width: 100%; margin-top: 8px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; }

.account-page .account-fineprint { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.65; }
.account-page .account-support { margin: 36px 0 0; font-size: 14px; }
.account-fineprint a,
.account-support a { border-bottom: 1px solid currentColor; font-weight: 700; }
.account-fineprint a:hover,
.account-support a:hover { color: var(--accent); }

@media (max-width: 760px) {
  .account-card { padding: 26px 20px; }
  .account-actions > * { flex: 1 1 100%; }
  .account-page .account-button-quiet { flex: 0 0 auto; margin-left: 0; }
  .account-plan-list { grid-template-columns: 1fr; }
  .account-plan-list li,
  .account-plan-list li + li { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .account-plan-list li:last-child { border-bottom: 0; }
  .account-plan-list button { width: 100%; }
  .account-crypto .account-crypto-plans { grid-template-columns: 1fr; }
  .account-crypto-network select { flex: 1 1 100%; }
  .account-crypto-order { padding: 24px 20px; }
  .account-crypto-amount strong { font-size: 32px; }
}