/* ============================================================
   traak · Espace candidat · compte, profil, abonnement
   Surface éditoriale sombre (même atmosphère que les pages doc)
   S'appuie sur tokens.css + styles.css + legal.css
   ============================================================ */

/* L'attribut [hidden] doit toujours l'emporter sur display:flex/grid des classes */
[hidden] { display: none !important; }

/* ── Largeur de page un peu plus large que les pages doc ─────── */
.acc-shell { max-width: 1040px; }
.acc-shell--narrow { max-width: 760px; }

/* ── En-tête de compte (salutation + plan) ──────────────────── */
.acc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--brand-line);
}
.acc-head .acc-greeting {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--brand-paper-mute);
  max-width: 52ch;
  margin-top: 8px;
}
.acc-head .acc-greeting em {
  font-style: italic;
  color: var(--brand-paper);
  font-family: var(--font-display);
  font-size: 1.06em;
}

/* ── Badge de plan ──────────────────────────────────────────── */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--brand-line-strong);
  color: var(--brand-paper-mute);
  white-space: nowrap;
}
.plan-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-paper-whisper); }
.plan-badge.is-free .dot { background: var(--teal); }
.plan-badge.is-premium {
  color: #1A1404;
  border-color: transparent;
  background: var(--gradient-premium);
  font-weight: 500;
}
.plan-badge.is-premium .dot { background: #1A1404; }

/* ── Cartes / panneaux ──────────────────────────────────────── */
.acc-card {
  background: var(--brand-ink-raised);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-2xl);
  padding: clamp(22px, 3vw, 36px);
  margin-bottom: 24px;
}
.acc-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.acc-card-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--brand-paper);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.acc-card-head h2 .num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--teal);
  text-transform: uppercase;
  flex-shrink: 0;
}
.acc-card-note {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--brand-paper-mute);
  max-width: 60ch;
  margin: -8px 0 24px;
}
.acc-card-note a { color: var(--teal); border-bottom: 1px solid rgba(0,212,170,0.4); }

/* ── Formulaires ────────────────────────────────────────────── */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-paper-whisper);
}
.field input,
.field select {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 15px;
  color: var(--brand-paper);
  background: var(--brand-ink);
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--r-lg);
  padding: 13px 16px;
  transition: border-color var(--dur-fade), background var(--dur-fade);
  width: 100%;
}
.field input::placeholder { color: var(--brand-paper-whisper); }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--teal);
  background: #0d1322;
}
.field input:disabled {
  color: var(--brand-paper-mute);
  cursor: not-allowed;
  opacity: 0.7;
}
.field .field-hint {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 12px;
  color: var(--brand-paper-whisper);
}

/* ── Boutons ────────────────────────────────────────────────── */
.acc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fade), border-color var(--dur-fade), transform var(--dur-fade), color var(--dur-fade);
  text-align: center;
}
.acc-btn svg { width: 15px; height: 15px; }
.acc-btn--primary { background: var(--teal); color: #04231C; }
.acc-btn--primary:hover { background: #00E8BC; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,212,170,0.28); }
.acc-btn--primary:active { transform: translateY(0); }
.acc-btn--ghost { background: transparent; border-color: var(--brand-line-strong); color: var(--brand-paper); }
.acc-btn--ghost:hover { border-color: var(--brand-paper-mute); }
.acc-btn--premium { background: var(--gradient-premium); color: #1A1404; font-weight: 700; }
.acc-btn--premium:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,170,0,0.32); }
.acc-btn--danger { background: transparent; border-color: rgba(229,62,62,0.4); color: #FF7A7A; }
.acc-btn--danger:hover { border-color: var(--error); background: rgba(229,62,62,0.08); }
.acc-btn--block { width: 100%; }
.acc-btn--lg { padding: 16px 28px; font-size: 15px; }

.acc-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ── Ligne CV ───────────────────────────────────────────────── */
.cv-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--brand-ink);
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--r-lg);
  flex-wrap: wrap;
}
.cv-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: rgba(0,212,170,0.10);
  color: var(--teal);
}
.cv-icon svg { width: 20px; height: 20px; }
.cv-meta { flex: 1; min-width: 160px; }
.cv-meta .cv-name { font-family: var(--font-ui); font-weight: 500; font-size: 15px; color: var(--brand-paper); }
.cv-meta .cv-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--brand-paper-whisper); margin-top: 4px; }
.cv-row-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cv-empty {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  color: var(--brand-paper-mute);
}

/* ── Bandeau abonnement dans le compte ──────────────────────── */
.sub-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 24px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(255,215,0,0.10), rgba(255,170,0,0.04));
  border: 1px solid rgba(255,200,58,0.22);
}
.sub-banner .sub-copy { max-width: 52ch; }
.sub-banner .sub-copy strong { color: var(--brand-paper); font-weight: 600; font-family: var(--font-ui); font-size: 16px; }
.sub-banner .sub-copy p {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--brand-paper-mute);
  margin-top: 4px;
}

/* ── Zone sensible ──────────────────────────────────────────── */
.danger-card { border-color: rgba(229,62,62,0.22); }
.danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.danger-row + .danger-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--brand-line); }
.danger-row .d-copy strong { font-family: var(--font-ui); font-weight: 500; font-size: 15px; color: var(--brand-paper); }
.danger-row .d-copy p { font-family: var(--font-ui); font-weight: 300; font-size: 13px; color: var(--brand-paper-mute); margin-top: 3px; max-width: 48ch; }

/* ════════════════════════════════════════════════════════════
   PREMIUM · tarification
═══════════════════════════════════════════════════════════════ */

/* ── Bascule mensuel / annuel ───────────────────────────────── */
.bill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--brand-line-strong);
  background: var(--brand-ink-raised);
  margin: 0 auto 44px;
}
.bill-toggle button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-paper-mute);
  padding: 9px 18px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-fade), color var(--dur-fade);
  white-space: nowrap;
}
.bill-toggle button.is-active { background: var(--teal); color: #04231C; font-weight: 500; }
.bill-toggle .save-tag { color: var(--teal); margin-left: 6px; }
.bill-toggle button.is-active .save-tag { color: #04231C; }

/* Téléphone : la bascule doit tenir dans la largeur.
   Le bénéfice « 2 mois offerts » reste affiché sous le prix de chaque offre. */
@media (max-width: 560px) {
  .bill-toggle { max-width: 100%; }
  .bill-toggle button { padding: 10px 12px; letter-spacing: 0.06em; }
  .bill-toggle .save-tag { display: none; }
}

/* ── Grille des plans ───────────────────────────────────────── */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 820px;
  margin-inline: auto;
}
.plans--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 100%;
}
.plan {
  background: var(--brand-ink-raised);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-2xl);
  padding: clamp(26px, 3vw, 38px);
  display: flex;
  flex-direction: column;
}
.plan--featured {
  border-color: rgba(255,200,58,0.35);
  background: linear-gradient(180deg, rgba(255,215,0,0.06), var(--brand-ink-raised) 40%);
  position: relative;
}
.plan-flag {
  position: absolute;
  top: -12px;
  left: clamp(26px, 3vw, 38px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--gradient-premium);
  color: #1A1404;
  font-weight: 600;
}
.plan-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--brand-paper);
}
.plan-name .it { font-style: italic; color: var(--teal); }
.plan-tagline {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-paper-mute);
  margin: 8px 0 22px;
  min-height: 42px;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--brand-line);
}
.plan-price .amount {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-paper);
}
.plan-price .period { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--brand-paper-whisper); }
.plan-price .amount .cur { font-size: 26px; }

.plan-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--brand-paper-mute);
}
.plan-features li strong { color: var(--brand-paper); font-weight: 500; }
.plan-features .tick {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  color: var(--teal);
}
.plan-features li.muted { color: var(--brand-paper-whisper); }
.plan-features li.muted .tick { color: var(--brand-paper-whisper); }

/* Prix exprimé en mot (palier traak) */
.plan-price .amount--word { font-size: 40px; }

/* CTA à deux niveaux : action, puis montant engagé */
.acc-btn.js-pay {
  flex-direction: column;
  gap: 3px;
  line-height: 1.2;
  padding-block: 13px;
}
.js-pay .btn-main { font-size: 15px; font-weight: 700; }
.js-pay .btn-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.72;
}

/* Déclencheur de conversion : questions personnalisées visibles, grisées, cliquables */
.plan-features li.locked { padding: 0; }
.plan-features li.locked .lock-link {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--brand-paper-whisper);
  transition: color var(--dur-fade);
}
.plan-features li.locked .lock-link:hover { color: var(--teal); }
.plan-features li.locked .lock-link em { font-style: italic; }
.plan-features li.locked .tick { color: inherit; }

.matrix td.is-teaser { padding: 0; }
.matrix .teaser-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 15px 14px;
  width: 100%;
  color: var(--brand-paper-whisper);
  transition: color var(--dur-fade), background var(--dur-fade);
}
.matrix .teaser-link { white-space: nowrap; }
.matrix .teaser-link:hover { color: var(--teal); background: rgba(0, 212, 170, 0.06); }
.matrix .teaser-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* 3 colonnes : compacter légèrement */
.plans--3 .plan { padding: clamp(20px, 2.2vw, 30px); }
.plans--3 .plan-flag { left: clamp(20px, 2.2vw, 30px); }
.plans--3 .plan-price .amount { font-size: 42px; }
.plans--3 .plan-price .amount .cur { font-size: 20px; }
.plans--3 .plan-tagline { min-height: 54px; }

/* Note sous le prix (ex. « 2 mois offerts ») */
.plan-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin: -14px 0 20px;
  min-height: 15px;
}

/* Premium+ */
.plan-name .plus { color: var(--teal); font-style: italic; }
.plan--plus { border-color: rgba(0, 212, 170, 0.28); }

/* ── Matrice comparative ────────────────────────────────────── */
.matrix-section { margin-top: 72px; }
.matrix-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.018em;
  color: var(--brand-paper);
  text-align: center;
  margin-bottom: 32px;
}
.matrix-title .it { font-style: italic; color: var(--teal); }
.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  /* Largeurs imposees. En layout auto, c'est la valeur la plus longue de la
     grille qui dicte tout : premium+ s'elargissait, traak et premium se
     retrouvaient a l'etroit et leurs valeurs cassaient en deux. Trois
     colonnes d'offres de meme largeur, c'est la condition pour comparer. */
  table-layout: fixed;
}
.matrix thead th:first-child { width: 31%; }
.matrix thead th + th { width: 23%; }
.matrix th, .matrix td {
  padding: 15px 14px;
  text-align: center;
  border-bottom: 1px solid var(--brand-line);
  vertical-align: middle;
}
.matrix thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brand-paper);
  padding-bottom: 18px;
}
.matrix tbody th[scope="row"] {
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: var(--brand-paper-mute);
}
.matrix tbody td {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: var(--brand-paper);
  text-wrap: balance;
  hyphens: none;
}
.matrix td.none, .matrix .none { color: var(--brand-paper-whisper); }
.matrix .is-reco { background: rgba(0, 212, 170, 0.05); }
.matrix thead th.is-reco { color: var(--teal); border-radius: 8px 8px 0 0; }
.matrix .m-ok { width: 18px; height: 18px; color: var(--teal); vertical-align: middle; }
.matrix .fn { color: var(--teal); }
/* Libelle d'offre porte par chaque cellule : inutile tant que les en-tetes
   de colonnes sont la, indispensable des que le tableau se deplie. */
.m-plan,
.m-all { display: none; }
.matrix-foot {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--brand-paper-whisper);
  margin-top: 16px;
}
.matrix-foot .fn { color: var(--teal); }

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

@media (max-width: 900px) {
  .plans--3 { grid-template-columns: 1fr; }
  .plans--3 .plan-tagline { min-height: 0; }
}

/* ── Matrice · sur telephone, le tableau se deplie ───────────────────────────
   La matrice demande 640 px de large : sur un telephone elle se lisait par
   defilement horizontal, un geste que personne ne devine et que rien
   n'annonce. En dessous de 720 px chaque ligne devient un bloc autonome, les
   trois offres l'une sous l'autre. Plus rien a faire glisser : tout se lit
   avec le pouce, vers le bas.
   Chaque cellule porte son libelle d'offre en clair (.m-plan), donc la
   lecture reste juste meme sans les en-tetes de colonnes, a l'oeil comme au
   lecteur d'ecran.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .matrix-scroll { overflow-x: visible; }
  .matrix {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }
  .matrix,
  .matrix tbody,
  .matrix tbody tr,
  .matrix tbody th,
  .matrix tbody td { display: block; width: auto; }
  .matrix thead { display: none; }

  .matrix tbody tr {
    border: 1px solid var(--brand-line);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    background: rgba(244, 241, 234, 0.015);
  }

  .matrix tbody th[scope="row"] {
    min-width: 0;
    padding: 0 0 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--brand-line);
    font-size: 15px;
    line-height: 1.4;
    color: var(--brand-paper);
    text-align: left;
  }

  .matrix tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    text-align: right;
    font-size: 14px;
  }
  .matrix tbody td + td { margin-top: 2px; }

  .m-plan,
  .matrix tbody tr.is-uniform .m-all {
    display: inline;
    flex: none;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-paper-whisper);
    text-align: left;
  }

  .matrix tbody td.is-reco { background: rgba(0, 212, 170, 0.07); }
  .matrix tbody td.is-reco .m-plan { color: var(--teal); }

  /* Une ligne qui vaut pareil pour les trois offres n'a pas besoin de trois
     lignes pour le dire : on garde la premiere cellule et on renomme. */
  .matrix tbody tr.is-uniform td + td { display: none; }
  .matrix tbody tr.is-uniform .m-plan { display: none; }
  .matrix tbody tr.is-uniform .m-all { display: inline; }

  /* la cellule teaser reprend le rythme des autres */
  .matrix tbody td.is-teaser { padding: 9px 12px; }
  .matrix .teaser-link { width: auto; padding: 0; justify-content: flex-end; }

  .matrix-title { text-align: left; }
  .matrix-foot { text-align: left; }
}

/* ── Réassurance paiement ───────────────────────────────────── */
.pay-reassure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-paper-whisper);
}
.pay-reassure .item { display: inline-flex; align-items: center; gap: 7px; }
.pay-reassure svg { width: 13px; height: 13px; color: var(--teal); }
.pay-method {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-paper-mute);
}
.pay-method strong { color: var(--brand-paper); font-weight: 600; letter-spacing: 0; text-transform: none; font-family: var(--font-ui); font-size: 13px; }

/* ════════════════════════════════════════════════════════════
   CONNEXION
═══════════════════════════════════════════════════════════════ */
.auth-card {
  max-width: 440px;
  margin-inline: auto;
  background: var(--brand-ink-raised);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-2xl);
  padding: clamp(28px, 4vw, 44px);
}
.auth-tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--brand-line-strong); margin-bottom: 28px; }
.auth-tabs button {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-paper-mute);
  padding: 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-fade), color var(--dur-fade);
}
.auth-tabs button.is-active { background: var(--teal); color: #04231C; font-weight: 500; }
/* ── SSO ReKrute ────────────────────────────────────────────── */
.sso-group { margin-bottom: 18px; }
.rekrute-btn {
  background: var(--brand-paper);
  color: var(--brand-ink);
  font-weight: 600;
}
.rekrute-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.rekrute-btn .rk { color: var(--orange); font-weight: 800; }
.rekrute-mark {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 5px;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-paper-whisper);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brand-line);
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-foot { text-align: center; margin-top: 22px; font-family: var(--font-ui); font-weight: 300; font-size: 13px; color: var(--brand-paper-whisper); }
.auth-foot a { color: var(--teal); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  .field-grid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .acc-head { flex-direction: column; }
}