/* ===========================================================
   ROZER — account / pricing / signup pages
   Requires /site.css first (tokens, reset, nav, buttons, footer).

   IMPORTANT: the class names here are load-bearing. The account page builds
   licence cards and messages in JS (lic-*, msg, tool-card*, tc-*), and the
   pricing page builds its payment modal in JS (pay-*). Restyle freely, but
   do not rename anything below without updating the matching script.
   =========================================================== */

body { min-height: 100vh; }

/* ---------- PAGE SHELL ---------- */
.top {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.4rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
}
.brand {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}
.top .lnk,
.top .acct {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--fast);
}
.top .lnk:hover,
.top .acct:hover { color: var(--accent); }

.page {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 3.5rem var(--pad) 4rem;
}
.page__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.sub {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 60ch;
  margin-top: 0.9rem;
}
.sub a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.foot {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-3);
}
.foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CARD + FORM ---------- */
.card {
  max-width: 440px;
  margin: 3.5rem auto;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 2.25rem 2rem;
}
.card h1 { font-size: 1.6rem; }
.card .sub { font-size: 0.92rem; margin-bottom: 1.75rem; }

label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 1.1rem 0 0.5rem;
}
input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.8em 0.9em;
  transition: border-color var(--fast);
}
input::placeholder { color: var(--text-3); }
input:focus {
  outline: none;
  border-color: var(--accent-line);
}
input:focus-visible { outline: none; }

button.main {
  width: 100%;
  margin-top: 1.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.9em 1.2em;
  border-radius: var(--r-md);
  transition: filter var(--fast);
}
button.main:hover { filter: brightness(1.1); }
button.main[disabled] { opacity: 0.5; cursor: default; filter: none; }

/* Visibility is class-driven, not content-driven: the scripts hide a message by
   resetting className to "msg" while leaving the old text in the node. */
.msg {
  display: none;
  margin-top: 1rem;
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 0.75rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.msg.ok,
.msg.err { display: block; }
.msg.ok  { color: var(--ok);  background: var(--ok-soft);  border-color: var(--ok); }
.msg.err { color: var(--err); background: var(--err-soft); border-color: var(--err); }

.acc-hint {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  padding: 0.9rem 1rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.acc-hint b { color: var(--accent); }

.acc-fine {
  margin-top: 2rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-3);
  max-width: 72ch;
}

/* ---------- LOADING SKELETON ---------- */
.sk {
  background: var(--surface);
  border-radius: var(--r-sm);
}
.sk-row { display: flex; align-items: center; gap: 1rem; }
.block { margin-top: 1.5rem; }

/* ---------- DASHBOARD ---------- */
.dash-wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 3rem var(--pad) 4rem;
}
.dash-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}
.acc-id__av {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
  overflow: hidden;
}
.acc-id__av img { width: 100%; height: 100%; object-fit: cover; }
.acc-id__meta { flex: 1; min-width: 0; }
.acc-id__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.acc-id__email {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-out {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  padding: 0.5em 0.95em;
  transition: color var(--fast), border-color var(--fast);
}
.acc-out:hover { color: var(--text); border-color: var(--rule-3); }

/* auto-fit, not auto-fill: most accounts have one or two tools, and auto-fill would
   leave the remaining tracks empty so a lone card sat at a third width. */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1px;
}

/* ---------- TOOL CARD ---------- */
.tool-card {
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
.tool-card__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.5rem;
}
.tool-card__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  overflow: hidden;
}
.tool-card__icon img { width: 24px; height: 24px; }
.tool-card__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.tool-card__badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  padding: 0.35em 0.6em;
}
.tool-card__badge.ok { color: var(--ok); border-color: var(--ok); }
.tool-card__body { flex: 1; }
.tool-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  padding: 0.65em 1.05em;
  transition: border-color var(--fast), background var(--fast), filter var(--fast);
}
.btn:hover { border-color: var(--rule-3); background: var(--surface); }
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn--primary:hover { filter: brightness(1.1); background: var(--accent); border-color: var(--accent); }

/* ---------- USAGE METER ---------- */
.tc-usage { margin-bottom: 1.1rem; }
.tc-usage__num {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tc-usage__num.zero { color: var(--err); }
.tc-usage__unit {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-3);
  margin-inline-start: 0.35rem;
}
.tc-usage__label {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 0.2rem;
}
.bar {
  height: 3px;
  background: var(--rule);
  margin: 0.9rem 0 0.6rem;
  overflow: hidden;
}
.bar i { display: block; height: 100%; background: var(--accent); transition: width 0.4s var(--ease); }
.tc-usage__detail {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-3);
}
.tc-reset {
  font-size: 0.84rem;
  color: var(--text-2);
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}
.tc-reset.warn { color: var(--warn); font-weight: 600; }
.tc-note { font-size: 0.8rem; color: var(--text-3); line-height: 1.55; }
.tc-note a { color: var(--accent); }

.tc-trial {
  margin-top: 1.1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--bg-raised);
}
.tc-trial__row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ok);
}
.tc-trial__sub {
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--text-3);
  margin-top: 0.5rem;
}

/* ---------- LICENCE CARDS ---------- */
.lic-card {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 1rem 1.15rem;
  margin-bottom: 0.65rem;
  background: var(--bg-raised);
}
.lic-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.lic-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ok);
  border: 1px solid var(--ok);
  border-radius: var(--r-sm);
  padding: 0.28em 0.55em;
}
.lic-badge.trial { color: var(--warn); border-color: var(--warn); }
.lic-key__val {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-2);
  word-break: break-all;
}
.lic-exp { font-size: 0.79rem; color: var(--text-3); margin-top: 0.6rem; }
.lic-exp.warn { color: var(--warn); font-weight: 600; }
.lic-exp.err  { color: var(--err); font-weight: 600; }

.lic-dev { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--rule); }
.lic-dev__head {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.6rem;
}
.lic-dev__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  font-size: 0.82rem;
}
.lic-dev__name { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lic-dev__seen { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); }
.lic-dev__none { font-size: 0.82rem; color: var(--text-3); }
.lic-dev__off {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-3);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  padding: 0.3em 0.6em;
  transition: color var(--fast), border-color var(--fast);
}
.lic-dev__off:hover { color: var(--err); border-color: var(--err); }

.lic-empty { font-size: 0.86rem; color: var(--text-3); line-height: 1.6; }
.lic-msg { display: none; font-size: 0.82rem; margin-top: 0.6rem; }
.lic-msg.ok, .lic-msg.err { display: block; }
.lic-msg.ok  { color: var(--ok); }
.lic-msg.err { color: var(--err); }

.lic-add { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.lic-add input { flex: 1; min-width: 0; font-size: 0.85rem; padding: 0.6em 0.75em; }
.lic-add__btn {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  padding: 0 1rem;
  transition: border-color var(--fast), background var(--fast);
}
.lic-add__btn:hover { border-color: var(--rule-3); background: var(--surface); }

/* ===========================================================
   PRICING
   =========================================================== */
.cyc-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 3px;
  margin: 2rem 0 2.5rem;
}
.cyc {
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-3);
  padding: 0.6em 1.3em;
  border-radius: var(--r-sm);
  transition: color var(--fast), background var(--fast);
}
.cyc:hover { color: var(--text-2); }
.cyc.active { background: var(--accent); color: var(--accent-ink); }
.cyc .save {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--ok);
  margin-inline-start: 0.45rem;
}
.cyc.active .save { color: var(--accent-ink); opacity: 0.75; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
}
.plan {
  position: relative;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 2.25rem 1.9rem;
  display: flex;
  flex-direction: column;
}
.plan.hot { box-shadow: 0 0 0 1px var(--accent-line); z-index: 1; }
.badge {
  position: absolute;
  top: 1.4rem;
  inset-inline-end: 1.9rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  padding: 0.35em 0.6em;
}
.pname {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.price {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  margin-top: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.price small { font-size: 0.95rem; color: var(--text-3); font-weight: 500; letter-spacing: 0; }
.mins {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0.5rem 0 1.75rem;
}

ul.feats { list-style: none; flex: 1; margin-bottom: 2rem; }
ul.feats li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-2);
}
ul.feats li.off { color: var(--text-3); }
ul.feats li.off .ft { text-decoration: line-through; text-decoration-color: var(--rule-2); }
ul.feats svg { flex-shrink: 0; margin-top: 4px; }
ul.feats .ft { flex: 1; min-width: 0; }
ul.feats b { color: var(--text); font-weight: 600; }

.buy,
.buy-static {
  display: block;
  text-align: center;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  padding: 0.9em 1.2em;
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast), filter var(--fast);
}
.buy:hover,
.buy-static:hover { border-color: var(--rule-3); background: var(--surface); }
.plan.hot .buy {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.plan.hot .buy:hover { filter: brightness(1.1); background: var(--accent); }

.how {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 1.75rem;
  margin-top: 3rem;
  max-width: 62ch;
}
.how h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.how ol { padding-inline-start: 1.15rem; color: var(--text-2); font-size: 0.9rem; line-height: 1.75; }
.how li { margin-bottom: 0.6rem; }
.how b { color: var(--text); font-weight: 600; }
.how a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- PAYMENT CONFIRM MODAL (built in JS) ---------- */
.pay-ov {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 6, 0.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  z-index: 400;
}
.pay-card {
  background: var(--bg);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  padding: 2rem;
  max-width: 430px;
  width: 100%;
}
.pay-h { font-size: 1.2rem; margin-bottom: 0.6rem; }
.pay-p { color: var(--text-2); font-size: 0.88rem; line-height: 1.6; margin-bottom: 1.5rem; }
.pay-email {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  padding: 0.8rem 0.95rem;
  margin-bottom: 1.5rem;
}
.pay-email__txt {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text);
  word-break: break-all;
}
.pay-copy {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r-sm);
  padding: 0.45em 0.8em;
}
.pay-go {
  display: block;
  text-align: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.85em 1.2em;
  border-radius: var(--r-md);
  transition: filter var(--fast);
}
.pay-go:hover { filter: brightness(1.1); }
.pay-cancel {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--text-3);
  padding: 0.6em;
  transition: color var(--fast);
}
.pay-cancel:hover { color: var(--text-2); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
  .page { padding-block: 2.5rem 3rem; }
  .card { margin-block: 2rem; padding: 1.75rem 1.35rem; }
  .dash-wrap { padding-block: 2rem 3rem; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { padding: 1.5rem 1.35rem; }
  .cyc-toggle { width: 100%; }
  .cyc { flex: 1; text-align: center; }
  .badge { position: static; display: inline-block; margin-bottom: 0.9rem; }
  .plan { padding: 1.9rem 1.35rem; }
  .tool-card__actions .btn { flex: 1; }
}


/* ===========================================================
   SIGNUP
   =========================================================== */
body.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}
body.auth-page .card { margin: 0; }

.brand--center {
  display: block;
  text-align: center;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 1.75rem;
}
.card h1 { text-align: center; }
.card .sub--center { text-align: center; }

.field { position: relative; margin-bottom: 0.25rem; }
.field label { margin-top: 1.1rem; }
.hint {
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--text-3);
  margin-top: 0.6rem;
}
.pw-toggle {
  position: absolute;
  inset-inline-end: 0.7rem;
  bottom: 0.62rem;
  display: flex;
  padding: 4px;
  color: var(--text-3);
  transition: color var(--fast);
}
.pw-toggle:hover { color: var(--text-2); }

button.submit,
a.submit {
  width: 100%;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.9em 1.2em;
  border-radius: var(--r-md);
  transition: filter var(--fast);
}
button.submit:hover, a.submit:hover { filter: brightness(1.1); }
button.submit:disabled { opacity: 0.55; cursor: default; filter: none; }

.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: var(--accent-ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.cf-turnstile { margin-top: 1.25rem; display: flex; justify-content: center; }
.done-ico { width: 52px; height: 52px; margin: 0 auto 0.5rem; display: none; }

.or-rule {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.or-rule::before, .or-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ===========================================================
   LEGAL / PROSE
   =========================================================== */
.page__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.updated {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-top: 1rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
}
.prose { max-width: 68ch; }
.prose h2 {
  font-size: 1.15rem;
  letter-spacing: -0.025em;
  margin: 2.75rem 0 0.9rem;
}
.prose p { color: var(--text-2); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1rem; }
.prose ul { list-style: none; margin: 0 0 1rem; }
.prose li {
  position: relative;
  padding-inline-start: 1.15rem;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0.45rem;
}
.prose li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.82em;
  width: 5px; height: 1px;
  background: var(--accent);
}
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); font-weight: 600; }

.warning-box {
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
  margin: 1.25rem 0 1.5rem;
}
.warning-box p { color: var(--text); margin: 0; font-size: 0.92rem; }

.divider { height: 1px; background: var(--rule); margin: 3.5rem 0 1.75rem; }
.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.footer-links a { transition: color var(--fast); }
.footer-links a:hover { color: var(--accent); }

/* ===========================================================
   ACTIVATING (post-payment)
   Deliberately does NOT reuse .msg or .spinner from above:
   - .msg here is always-visible status text, but the shared .msg is
     class-driven and hidden by default — it would never appear.
   - the shared .spinner is the 15px one inside the signup button.
   =========================================================== */
.act-card { text-align: center; }

.act-spinner {
  width: 44px; height: 44px;
  margin: 0.5rem auto 1.5rem;
  border: 3px solid var(--rule-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .act-spinner { animation: none; } }

.act-tick {
  width: 46px; height: 46px;
  margin: 0.5rem auto 1.5rem;
  display: none;
  color: var(--ok);
}

.status-msg {
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-top: 0.6rem;
}

.plan-badge {
  display: none;
  width: max-content;
  margin: 1.25rem auto 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ok);
  background: var(--ok-soft);
  border-radius: var(--r-sm);
  padding: 0.4em 0.75em;
}

.acts {
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.75rem;
}
.acts .btn { width: 100%; padding: 0.85em 1.2em; font-size: 0.9rem; }

/* ---------- ACCOUNT SETTINGS (name + password) ---------- */
.prof { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.prof__h {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.5rem;
}
.prof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
}
.prof__box {
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 1.6rem;
}
.prof__t {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.prof__d {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-3);
  margin-bottom: 1.1rem;
}
.prof__box input { margin-bottom: 0.6rem; }
.prof__go { width: 100%; margin-top: 0.4rem; padding: 0.75em 1.2em; }
.prof .msg { margin-top: 0.8rem; }

@media (max-width: 640px) {
  .prof__grid { grid-template-columns: 1fr; }
  .prof__box { padding: 1.35rem; }
}

/* Which machine the captions plugin is bound to. */
.tc-device {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.84rem;
}
.tc-device__k {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  flex-shrink: 0;
}
.tc-device__v { color: var(--text); text-align: end; min-width: 0; overflow-wrap: anywhere; }