/* =========================================================
   Tarsil ROI Calculator v2 — Frontend CSS
   Background: transparent (inherits theme)
   Colors driven by CSS variables set from WP backend
   ========================================================= */

.tarsil-roi-wrapper {
  --t-accent:      #0ea5e9;
  --t-btn-bg:      #0ea5e9;
  --t-btn-text:    #0f172a;
  --t-btn-hover:   #38bdf8;
  --t-modal-bg:    #1e293b;
  --t-modal-text:  #f8fafc;
  --t-modal-border:#0ea5e9;
  --t-banner-bg:   #7f1d1d;
  --t-banner-text: #fef2f2;
  --t-radius:      12px;
  --t-radius-sm:   8px;
  --t-font: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--t-font);
}

/* Preload */
.tarsil-roi-preload { display:flex; align-items:center; justify-content:center; padding:60px; }
.tarsil-roi-preload span {
  width:36px; height:36px;
  border:3px solid rgba(14,165,233,0.2);
  border-top-color: var(--t-accent);
  border-radius:50%;
  animation: tarsil-spin 0.8s linear infinite;
}
@keyframes tarsil-spin { to { transform:rotate(360deg); } }

/* Spinner */
.tarsil-spinner {
  width:38px; height:38px;
  border:3px solid rgba(14,165,233,0.15);
  border-top-color: var(--t-accent);
  border-radius:50%;
  animation:tarsil-spin 0.8s linear infinite;
  margin-bottom:10px;
}
.tarsil-spinner--sm { width:18px; height:18px; margin:0; }

/* ── Calc container ── */
.tarsil-calc { max-width:960px; margin:0 auto; }

/* ── Header ── */
.tarsil-header {
  background:linear-gradient(135deg,#0f172a 0%,#0c1a2e 100%);
  border-bottom:2px solid var(--t-accent);
  padding:22px 28px;
  border-radius:var(--t-radius) var(--t-radius) 0 0;
}
.tarsil-header__text h1 { margin:0 0 4px; font-size:1.3rem; font-weight:700; color:#f8fafc; letter-spacing:-0.02em; }
.tarsil-header__text p  { margin:0; font-size:0.83rem; color:#94a3b8; }

/* ── Progress ── */
.tarsil-progress {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:18px 28px 0;
  background:#1e293b;
  position:relative; gap:4px;
}
.tarsil-progress::before {
  content:''; position:absolute;
  top:36px; left:52px; right:52px; height:2px;
  background:#334155; z-index:0;
}
.tarsil-progress__step {
  display:flex; flex-direction:column; align-items:center;
  gap:5px; flex:1; cursor:default; position:relative; z-index:1;
}
.tarsil-progress__step--done { cursor:pointer; }
.tarsil-progress__dot {
  width:36px; height:36px; border-radius:50%;
  background:#334155; border:2px solid #334155;
  display:flex; align-items:center; justify-content:center;
  font-size:0.95rem; transition:all 0.3s; color:#94a3b8;
}
.tarsil-progress__step--active .tarsil-progress__dot {
  background:var(--t-accent); border-color:var(--t-accent);
  box-shadow:0 0 14px rgba(14,165,233,0.4); color:#fff;
}
.tarsil-progress__step--done .tarsil-progress__dot {
  background:#22c55e; border-color:#22c55e; color:#fff; font-size:0.8rem;
}
.tarsil-progress__label { font-size:0.62rem; color:#64748b; text-align:center; line-height:1.2; max-width:68px; }
.tarsil-progress__step--active .tarsil-progress__label { color:var(--t-accent); }
.tarsil-progress__step--done .tarsil-progress__label  { color:#22c55e; }

/* ── Step card ── */
.tarsil-step-card { background:#1e293b; padding:28px; min-height:340px; }
.tarsil-step-card--wide { padding:0; }

/* ── Step content ── */
.tarsil-step-title { margin:0 0 5px; font-size:1.15rem; font-weight:700; color:#f8fafc; }
.tarsil-step-sub   { margin:0 0 22px; font-size:0.85rem; color:#94a3b8; line-height:1.5; }

/* ── Fields ── */
.tarsil-field { margin-bottom:18px; }
.tarsil-field label {
  display:block; font-size:0.78rem; font-weight:600;
  color:var(--t-accent); margin-bottom:5px;
  text-transform:uppercase; letter-spacing:0.04em;
}
.tarsil-hint { display:block; font-size:0.73rem; color:#64748b; margin-bottom:5px; margin-top:-3px; }
.tarsil-input {
  width:100%; background:#0f172a; border:1px solid #334155;
  border-radius:var(--t-radius-sm); padding:10px 13px;
  color:#f8fafc; font-size:0.92rem; font-family:var(--t-font);
  transition:border-color 0.2s,box-shadow 0.2s; box-sizing:border-box;
}
.tarsil-input:focus { outline:none; border-color:var(--t-accent); box-shadow:0 0 0 3px rgba(14,165,233,0.12); }
.tarsil-input--error { border-color:#ef4444; }
.tarsil-input option { background:#1e293b; }
.tarsil-error { display:block; font-size:0.73rem; color:#ef4444; margin-top:4px; }
.tarsil-currency-badge {
  display:inline-block; margin-top:5px; font-size:0.73rem; color:#22c55e;
  background:rgba(34,197,94,0.1); padding:2px 9px; border-radius:20px;
}
.tarsil-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tarsil-row-single { max-width:320px; }

/* ── Sliders ── */
.tarsil-slider {
  width:100%; appearance:none; height:6px; border-radius:3px;
  background:#334155; outline:none; cursor:pointer;
}
.tarsil-slider::-webkit-slider-thumb {
  appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--t-accent); cursor:pointer;
  box-shadow:0 0 8px rgba(14,165,233,0.45);
  transition:transform 0.2s;
}
.tarsil-slider::-webkit-slider-thumb:hover { transform:scale(1.18); }
.tarsil-slider-val { color:var(--t-accent); font-size:0.95rem; margin-left:3px; }

/* ── Industry grid ── */
.tarsil-industry-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.tarsil-industry-card {
  background:#0f172a; border:2px solid #334155; border-radius:var(--t-radius-sm);
  padding:13px 8px; display:flex; flex-direction:column; align-items:center;
  gap:5px; cursor:pointer; transition:all 0.2s;
  font-size:0.78rem; color:#94a3b8; font-family:var(--t-font); text-align:center;
}
.tarsil-industry-card:hover { border-color:var(--t-accent); color:var(--t-accent); transform:translateY(-2px); }
.tarsil-industry-card--active {
  border-color:var(--t-accent); background:rgba(14,165,233,0.08);
  color:var(--t-accent); box-shadow:0 0 18px rgba(14,165,233,0.18);
}
.tarsil-industry-icon { font-size:1.5rem; }
.tarsil-note {
  background:rgba(14,165,233,0.06); border-left:3px solid var(--t-accent);
  padding:11px 14px; border-radius:0 var(--t-radius-sm) var(--t-radius-sm) 0;
  font-size:0.8rem; color:#94a3b8; line-height:1.5; margin-top:8px;
}

/* ── Nav ── */
.tarsil-nav {
  display:flex; justify-content:flex-end; gap:10px;
  margin-top:24px; padding-top:18px; border-top:1px solid #334155;
}

/* ── Buttons ── */
.tarsil-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 22px; border-radius:var(--t-radius-sm);
  font-size:0.88rem; font-weight:600; cursor:pointer; border:none;
  font-family:var(--t-font); transition:all 0.2s; text-decoration:none;
  white-space:nowrap;
}
.tarsil-btn:disabled { opacity:0.6; cursor:not-allowed; }
.tarsil-btn--primary { background:var(--t-btn-bg); color:var(--t-btn-text); }
.tarsil-btn--primary:hover:not(:disabled) { background:var(--t-btn-hover); transform:translateY(-2px); box-shadow:0 6px 18px rgba(14,165,233,0.35); }
.tarsil-btn--secondary { background:transparent; border:2px solid var(--t-accent); color:var(--t-accent); }
.tarsil-btn--secondary:hover:not(:disabled) { background:rgba(14,165,233,0.08); transform:translateY(-2px); }
.tarsil-btn--ghost { background:transparent; color:#94a3b8; border:1px solid #334155; }
.tarsil-btn--ghost:hover { color:#f8fafc; border-color:#64748b; }
.tarsil-btn--full { width:100%; }

/* ────────────────────────────────────────────────────────
   RESULTS
──────────────────────────────────────────────────────── */
.tarsil-results { padding:24px; }

.tarsil-leakage-banner {
  background:var(--t-banner-bg); border:2px solid rgba(239,68,68,0.5);
  border-radius:var(--t-radius); padding:22px 24px; text-align:center;
  margin-bottom:20px; position:relative; overflow:hidden;
}
.tarsil-leakage-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(239,68,68,0.12),transparent 70%);
}
.tarsil-leakage-banner__label {
  font-size:0.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--t-banner-text); opacity:0.8; margin-bottom:6px; position:relative;
}
.tarsil-leakage-banner__amount {
  font-size:2.6rem; font-weight:800; color:var(--t-banner-text);
  letter-spacing:-0.03em; line-height:1; position:relative;
}
.tarsil-leakage-banner__sub { font-size:0.8rem; color:var(--t-banner-text); opacity:0.75; margin-top:7px; position:relative; }

/* Cards */
.tarsil-card {
  background:#0f172a; border:1px solid #1e293b;
  border-radius:var(--t-radius); padding:20px; margin-bottom:18px;
}
.tarsil-card--ai { border-color:rgba(14,165,233,0.25); background:linear-gradient(135deg,#0f172a,#0c1a2e); }
.tarsil-card-title { margin:0 0 16px; font-size:0.92rem; font-weight:700; color:#f8fafc; display:flex; align-items:center; gap:8px; }

/* Gauges */
.tarsil-gauges { display:flex; justify-content:space-around; align-items:flex-end; gap:10px; }
.tarsil-gauge { display:flex; flex-direction:column; align-items:center; gap:5px; }
.tarsil-gauge-label { font-size:0.72rem; color:#64748b; text-align:center; }

/* Leakage rows */
.tarsil-leakage-rows { display:flex; flex-direction:column; gap:9px; }
.tarsil-leakage-row { display:flex; align-items:center; gap:9px; }
.tarsil-leakage-row__label { font-size:0.77rem; color:#94a3b8; width:190px; flex-shrink:0; }
.tarsil-leakage-row__bar-wrap { flex:1; height:7px; background:#1e293b; border-radius:4px; overflow:hidden; }
.tarsil-leakage-row__bar { height:100%; background:linear-gradient(90deg,#ef4444,#f97316); border-radius:4px; min-width:4px; transition:width 1s ease; }
.tarsil-leakage-row__val { font-size:0.77rem; font-weight:700; color:#ef4444; width:86px; text-align:right; flex-shrink:0; }

/* ROI grid */
.tarsil-roi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.tarsil-roi-card { border-radius:var(--t-radius); padding:14px; text-align:center; border:1px solid transparent; }
.tarsil-roi-card__label { font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; opacity:0.7; margin-bottom:7px; }
.tarsil-roi-card__val   { font-size:1.35rem; font-weight:800; letter-spacing:-0.02em; }
.tarsil-roi-card--green  { background:rgba(34,197,94,0.07);  border-color:rgba(34,197,94,0.2);  color:#22c55e; }
.tarsil-roi-card--blue   { background:rgba(59,130,246,0.07); border-color:rgba(59,130,246,0.2); color:#60a5fa; }
.tarsil-roi-card--teal   { background:rgba(14,165,233,0.07); border-color:rgba(14,165,233,0.2); color:var(--t-accent); }
.tarsil-roi-card--orange { background:rgba(249,115,22,0.07); border-color:rgba(249,115,22,0.2); color:#f97316; }

/* Team table */
.tarsil-team-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.tarsil-team-table th { text-align:left; padding:7px 10px; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:#64748b; border-bottom:1px solid #1e293b; }
.tarsil-team-table td { padding:8px 10px; color:#f8fafc; border-bottom:1px solid #1e293b; }
.tarsil-team-table td:last-child { text-align:right; font-weight:700; color:var(--t-accent); }
.tarsil-team-total td { color:#f8fafc!important; font-weight:800!important; border-top:2px solid var(--t-accent); border-bottom:none; font-size:0.92rem; }
.tarsil-team-total td:last-child { color:#22d3ee!important; }

/* Plan card */
.tarsil-plan-card {
  background:linear-gradient(135deg,rgba(14,165,233,0.1),rgba(34,211,238,0.05));
  border:2px solid var(--t-accent); border-radius:var(--t-radius);
  padding:20px 22px; margin-bottom:18px; position:relative; overflow:hidden;
}
.tarsil-plan-card::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:110px; height:110px;
  background:radial-gradient(circle,rgba(14,165,233,0.12),transparent 70%);
}
.tarsil-plan-card__badge  { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#22c55e; margin-bottom:5px; }
.tarsil-plan-card__name   { font-size:1.4rem; font-weight:800; color:#f8fafc; letter-spacing:-0.02em; }
.tarsil-plan-card__price  { font-size:0.95rem; font-weight:700; color:var(--t-accent); margin-top:5px; }
.tarsil-plan-card__price span { font-weight:400; color:#64748b; font-size:0.82rem; }
.tarsil-plan-card__savings { font-size:0.8rem; color:#22c55e; margin-top:6px; }
.tarsil-plan-features { margin:10px 0 0 2px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.tarsil-plan-features li { font-size:0.75rem; color:#94a3b8; background:#1e293b; padding:3px 8px; border-radius:4px; }

/* AI */
.tarsil-ai-badge { font-size:0.65rem; font-weight:600; background:rgba(14,165,233,0.12); color:var(--t-accent); padding:2px 9px; border-radius:20px; border:1px solid rgba(14,165,233,0.25); margin-left:7px; }
.tarsil-ai-loading { display:flex; align-items:center; gap:10px; color:#94a3b8; font-size:0.85rem; padding:6px 0; }
.tarsil-ai-text { margin:0; font-size:0.86rem; line-height:1.75; color:#cbd5e1; white-space:pre-line; }

/* CTAs */
.tarsil-cta-row { display:flex; gap:12px; margin-top:6px; flex-wrap:wrap; }
.tarsil-cta-row .tarsil-btn { flex:1; min-width:160px; }

/* Loading */
.tarsil-loading-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px; gap:12px; color:#94a3b8; }

/* ── Modal ── */
.tarsil-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  backdrop-filter:blur(4px); display:flex; align-items:center;
  justify-content:center; z-index:99999; padding:16px;
}
.tarsil-modal {
  background:var(--t-modal-bg); border:1px solid var(--t-modal-border);
  border-radius:var(--t-radius); padding:28px; width:100%; max-width:420px;
  position:relative; box-shadow:0 20px 50px rgba(0,0,0,0.55),0 0 30px rgba(14,165,233,0.08);
}
.tarsil-modal .tarsil-input { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1); color:var(--t-modal-text); }
.tarsil-modal .tarsil-input:focus { border-color:var(--t-accent); }
.tarsil-modal .tarsil-field label { color:var(--t-accent); }
.tarsil-modal__close { position:absolute; top:12px; right:14px; background:none; border:none; color:#94a3b8; font-size:1rem; cursor:pointer; padding:3px 7px; border-radius:4px; transition:color 0.2s; }
.tarsil-modal__close:hover { color:var(--t-modal-text); }
.tarsil-modal h3 { margin:0 0 7px; font-size:1.1rem; color:var(--t-modal-text); }
.tarsil-modal__sub { font-size:0.8rem; color:#94a3b8; margin:0 0 20px; line-height:1.5; }
.tarsil-modal__privacy { text-align:center; font-size:0.72rem; color:#64748b; margin:12px 0 0; }

/* ── Responsive ── */
@media (max-width:640px) {
  .tarsil-header { padding:16px; flex-direction:column; text-align:center; }
  .tarsil-header__logo { height:30px; }
  .tarsil-progress { padding:14px 10px 0; }
  .tarsil-progress__label { font-size:0.56rem; }
  .tarsil-progress__dot { width:28px; height:28px; font-size:0.8rem; }
  .tarsil-step-card { padding:18px 14px; }
  .tarsil-results { padding:14px; }
  .tarsil-row { grid-template-columns:1fr; }
  .tarsil-industry-grid { grid-template-columns:repeat(2,1fr); }
  .tarsil-roi-grid { grid-template-columns:repeat(2,1fr); }
  .tarsil-leakage-banner__amount { font-size:2rem; }
  .tarsil-gauges { flex-wrap:wrap; justify-content:center; }
  .tarsil-leakage-row__label { width:130px; font-size:0.7rem; }
  .tarsil-cta-row { flex-direction:column; }
  .tarsil-nav { justify-content:space-between; }
}
@media (max-width:400px) {
  .tarsil-progress::before { display:none; }
  .tarsil-progress__label  { display:none; }
}

/* ── Before / After Tarsil ── */
.tarsil-before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.tarsil-ba-header {
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
}
.tarsil-ba-header--before { background: #7f1d1d; color: #fca5a5; }
.tarsil-ba-header--after  { background: #14532d; color: #86efac; }
.tarsil-ba-cell {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tarsil-ba-cell--before { background: rgba(239,68,68,0.05);  border-right: 1px solid rgba(255,255,255,0.04); }
.tarsil-ba-cell--after  { background: rgba(34,197,94,0.05); }
.tarsil-ba-metric { font-size: 0.68rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.tarsil-ba-val    { font-size: 0.95rem; font-weight: 700; }
.tarsil-ba-net {
  background: #0f172a;
  border-top: 2px solid #0ea5e9;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width:480px) {
  .tarsil-before-after { grid-template-columns: 1fr; }
  .tarsil-ba-header--before { display: none; }
  .tarsil-ba-cell--before { display: none; }
}

/* ── Email sent confirmation ── */
.tarsil-email-sent {
  display:flex; align-items:center; gap:10px;
  background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.3);
  border-radius:var(--t-radius-sm); padding:11px 18px;
  font-size:0.88rem; font-weight:600; color:#22c55e; flex:1;
  justify-content:center;
}
.tarsil-email-sent__icon { font-size:1.1rem; }

/* ── Production Step ── */
.tarsil-prod-gate {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: var(--t-radius);
  padding: 32px 24px;
  text-align: center;
  margin-top: 16px;
}
.tarsil-prod-gate__q {
  font-size: 1.2rem;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 8px;
}
.tarsil-prod-gate__hint {
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 24px;
}
.tarsil-prod-gate__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.tarsil-btn--lg {
  padding: 13px 32px;
  font-size: 1rem;
}
.tarsil-btn--outline {
  background: transparent;
  border: 2px solid var(--t-accent);
  color: var(--t-accent);
}
.tarsil-btn--outline:hover { background: var(--t-accent); color: #0f172a; }
.tarsil-prod-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(14,165,233,0.1);
  border: 1px solid rgba(14,165,233,0.3);
  color: #0ea5e9;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
}

/* ── Mode Selection Screen ── */
.tarsil-mode-screen {
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.tarsil-mode-screen__q {
  font-size: 1.2rem;
  font-weight: 700;
  color: #f8fafc;
  text-align: center;
}
.tarsil-mode-screen__sub {
  font-size: 0.85rem;
  color: #64748b;
  text-align: center;
  margin-top: -12px;
}
.tarsil-mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 680px;
}
.tarsil-mode-card {
  background: #1e293b;
  border: 1.5px solid #334155;
  border-radius: 12px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.tarsil-mode-card--basic { border-color: #22c55e; }
.tarsil-mode-card--full  { border-color: #0ea5e9; }
.tarsil-mode-card__rec {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #f59e0b;
  color: #451a03;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.tarsil-mode-card__icon { font-size: 28px; }
.tarsil-mode-card__title { font-size: 1rem; font-weight: 700; color: #f8fafc; }
.tarsil-mode-card__desc  { font-size: 0.8rem; color: #94a3b8; line-height: 1.55; }
.tarsil-mode-card__time  {
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  display: inline-block; align-self: flex-start;
}
.tarsil-mode-card--basic .tarsil-mode-card__time { background: rgba(34,197,94,.15); color: #4ade80; }
.tarsil-mode-card--full  .tarsil-mode-card__time { background: rgba(14,165,233,.15); color: #38bdf8; }
.tarsil-mode-card__steps {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tarsil-mode-card__steps li {
  font-size: 11.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tarsil-mode-card__steps li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tarsil-mode-card--basic .tarsil-mode-card__steps li::before { background: #22c55e; }
.tarsil-mode-card--full  .tarsil-mode-card__steps li::before { background: #0ea5e9; }
.tarsil-mode-card__cta {
  margin-top: 8px;
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.tarsil-mode-card__cta--basic { background: #22c55e; color: #052e16; }
.tarsil-mode-card__cta--full  { background: #0ea5e9; color: #0c4a6e; }
.tarsil-mode-card__cta:hover  { opacity: 0.9; }

/* Basic results upgrade prompt */
.tarsil-basic-upgrade {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: var(--t-radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tarsil-basic-upgrade p { font-size: 0.82rem; color: #94a3b8; flex: 1; }

@media (max-width: 540px) {
  .tarsil-mode-cards { grid-template-columns: 1fr; }
  .tarsil-mode-card--full { margin-top: 14px; }
}