/* ============================================================
   AskHrAI — Salary Benchmarking Tool
   Aesthetic: Financial data terminal — precise, editorial,
              warm neutrals + bold accent.
   Typography: uses var(--f-display)/var(--f-ui) (Playfair Display +
   Plus Jakarta Sans) — the same pair as every other page. This used to
   hardcode 'DM Serif Display'/'DM Sans' directly, which — since its own
   page templates loaded that font pair — actually rendered, making the
   Salary tool look like it belonged to a different site.
   ============================================================ */

/* ── Base ──────────────────────────────────────────────────── */
.sal-page {
  font-family: var(--f-ui);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

/* Several elements below (.sal-suggestions, .sal-loading, .sec-success)
   set `display` explicitly (flex), which — being an author rule — wins
   the cascade over the browser's default `[hidden]{display:none}` UA
   style. The page's JS toggles these purely via the `hidden` attribute
   (element.hidden = true/false), so without this override they stayed
   visibly stuck open/overlapping the form regardless of what the JS
   set: the job-title autocomplete dropdown never closed, and the
   "Pulling market data…" loading panel rendered permanently underneath
   the form even before it was submitted. `!important` is needed here
   because the offending rules are the same specificity and come later
   in this same file. */
[hidden] { display: none !important; }

/* ── Nav ───────────────────────────────────────────────────── */
.sal-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 2rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.sal-logo {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--f-ui);
  font-weight: 700; font-size: 1rem; color: var(--ink);
  text-decoration: none;
}
.sal-nav-links { display: flex; align-items: center; gap: 1.25rem; }
.sal-nav-links a { font-size: .875rem; color: var(--ink-3); text-decoration: none; transition: color .2s; }
.sal-nav-links a:hover { color: #C2410C; }
.sal-link { font-weight: 500; }
.sal-btn-sm {
  padding: calc(.5rem - 2px) calc(1.125rem - 2px);
  background: var(--c-dark); color: #fff;
  border-radius: 100px; font-size: .8375rem;
  font-weight: 600; text-decoration: none;
  transition: background .2s, border-color .2s; cursor: pointer; border: 2px solid var(--orange);
}
.sal-btn-sm:hover { background: var(--orange); border-color: var(--orange); }
.sal-btn-sm:active { background: var(--orange-dark); border-color: var(--orange-dark); }
/* .sal-nav-links a's color otherwise wins on specificity, leaving this
   button's text at 3.03:1 against its own dark background. */
.sal-nav-links a.sal-btn-sm { color: #fff; }

/* ── Hero ──────────────────────────────────────────────────── */
.sal-hero {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  padding: 4rem 1.5rem 3rem;
  min-height: calc(100vh - 57px);
  display: flex; align-items: flex-start; justify-content: center;
}
.sal-hero-inner { max-width: 820px; width: 100%; }

.sal-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #8a7d6a;
  margin-bottom: 1.25rem;
}
.sal-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #16a34a;
  animation: pulseGreen 2.5s infinite;
}
@keyframes pulseGreen { 0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.5);} 50%{box-shadow:0 0 0 6px rgba(22,163,74,0);} }

.sal-hero h1 {
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.sal-hero h1 em { font-style: italic; color: var(--ink); }
.sal-hero-sub {
  font-size: 1rem; color: var(--ink-3); line-height: 1.75;
  max-width: 560px; margin-bottom: 2.5rem;
}

/* ── Form card ─────────────────────────────────────────────── */
.sal-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
}

.sal-field-label {
  display: flex; align-items: center; gap: .375rem;
  font-size: .78rem; font-weight: 700; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: .5rem;
}
.sal-field-label i { color: var(--ink); }
.sal-optional { font-weight: 400; text-transform: none; color: var(--ink-3); letter-spacing: 0; }

/* Title field */
.sal-title-field { margin-bottom: 1.5rem; position: relative; }
.sal-title-input-wrap { position: relative; }
.sal-title-icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  font-size: 1.125rem; color: var(--ink-4); pointer-events: none;
}
.sal-title-input {
  width: 100%; padding: 1rem 1rem 1rem 3rem;
  background: var(--bg); border: 2px solid var(--border);
  border-radius: 12px;
  font-family: var(--f-display);
  font-size: 1.375rem; color: var(--ink);
  outline: none; transition: all .2s;
}
.sal-title-input:focus { border-color: #C2410C; background: var(--white); box-shadow: 0 0 0 4px rgba(194,65,12,.12); }
.sal-title-input::placeholder { color: #c5b8a8; font-style: italic; }

/* Suggestions */
.sal-suggestions {
  position: absolute; top: calc(100% + .375rem); left: 0; right: 0;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  padding: .75rem; z-index: 20;
  display: flex; flex-wrap: wrap; gap: .375rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.sal-suggestion-chip {
  padding: .375rem .75rem;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 100px; font-size: .78rem; font-weight: 500;
  color: var(--ink-2); cursor: pointer; transition: all .15s;
}
.sal-suggestion-chip:hover { background: #eee9e0; border-color: #c5b8a8; }

/* Form row */
.sal-form-row {
  display: grid; grid-template-columns: 1fr 1.5fr 1fr 1fr;
  gap: 1.25rem; margin-bottom: 1.5rem;
}
.sal-field {}

/* Select */
.sal-select-wrap { position: relative; }
.sal-select {
  width: 100%; padding: .75rem 2.25rem .75rem .875rem;
  background: var(--bg); border: 2px solid var(--border);
  border-radius: 10px; font-family: var(--f-ui);
  font-size: .875rem; color: var(--ink);
  outline: none; cursor: pointer; transition: border-color .2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7d6a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center;
}
.sal-select:focus { border-color: #C2410C; background-color: var(--white); }
/* Required-field validation feedback — the submit handler used to just
   silently re-focus State/Company size when empty (novalidate disables
   the browser's own "please fill this out" bubble), so a visitor who
   scrolled past those two selects saw the button do literally nothing
   on click, with zero indication why. Now a missing required field gets
   a visible red border plus an inline message, and both clear the
   moment the visitor picks a value. */
.sal-select.sal-field-invalid { border-color: #DC2626; background-color: rgba(220,38,38,.05); }
.sal-required-mark { color: #DC2626; margin-left: .125rem; }
.sal-error-text {
  display: none; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 600; color: #DC2626;
  margin-top: .4rem;
}
.sal-error-text.show { display: flex; }

/* Experience buttons
   Was a single flex-column of all 4 buttons stacked one per line — at the
   ~200px-wide grid column this filled it takes on the salary tool, that
   made a lanky vertical stack that stuck out well past the height of the
   Country/State/Company-size fields beside it (the orange "active" button
   looked like it was overflowing its area). A contained 2x2 grid keeps it
   to two short rows, matching the other fields' footprint. */
.sal-exp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.sal-exp-btn {
  padding: .5rem .4rem; text-align: center;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 8px; font-size: .68rem; font-weight: 500; line-height: 1.2;
  color: #8a7d6a; cursor: pointer; transition: all .15s;
}
.sal-exp-btn:hover { border-color: #C2410C; color: #C2410C; }
.sal-exp-btn.active { background: #C2410C; border-color: #C2410C; color: #fff; font-weight: 700; }

/* Footer */
.sal-form-footer { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.sal-submit {
  padding: calc(.9375rem - 2px) calc(2rem - 2px); background: var(--c-dark); color: #fff;
  border-radius: 100px; font-size: .9375rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: background .2s, border-color .2s; cursor: pointer; border: 2px solid var(--orange);
}
.sal-submit:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); }
.sal-submit:active:not(:disabled) { background: var(--orange-dark); border-color: var(--orange-dark); }
.sal-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Quota dots */
.sal-quota-indicator { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ink-3); }
.sal-quota-dots { display: flex; gap: .3rem; }
.sqd {
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e; transition: background .3s;
}
.sqd.used { background: var(--border); }

/* Loading */
.sal-loading { display: flex; justify-content: center; padding: 3rem 1rem; }
.sal-loading-content { text-align: center; }
.sal-spinner {
  position: relative; width: 64px; height: 64px; margin: 0 auto 1.5rem;
}
.sl-ring {
  position: absolute; inset: 0;
  border: 3px solid var(--border); border-top-color: var(--ink);
  border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sl-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.375rem; color: var(--ink);
}
.sal-loading-content > p { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 1rem; }
.sal-sources { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.sal-source-chip {
  padding: .25rem .75rem; background: var(--bg-2);
  border-radius: 100px; font-size: .72rem; font-weight: 600;
  color: var(--ink-3); transition: all .3s;
}
.sal-source-chip.active { background: #FED7AA; color: #9A3412; }

/* ── Results ───────────────────────────────────────────────── */
.sal-results { background: var(--bg); min-height: 100vh; padding: 2rem 1.5rem 4rem; }
.sal-results-inner { max-width: 900px; margin: 0 auto; }

.sal-back-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .8125rem; color: #8a7d6a; cursor: pointer;
  background: none; border: none; margin-bottom: 1.75rem; transition: color .2s;
}
.sal-back-btn:hover { color: var(--ink); }

/* Result header */
.sal-result-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.srh-meta { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); margin-bottom: .5rem; }
.sal-result-header h2 {
  font-family: var(--f-display);
  font-size: 2.25rem; color: var(--ink); letter-spacing: -.02em; margin-bottom: .5rem;
}
.srh-summary { font-size: .9375rem; color: var(--ink-3); line-height: 1.7; max-width: 500px; }
.srh-actions { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; flex-shrink: 0; }
.sal-action-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .625rem 1rem; background: var(--white);
  border: 1.5px solid var(--border); border-radius: 100px;
  font-size: .8125rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; transition: all .15s;
}
.sal-action-btn:hover { border-color: #C2410C; color: #C2410C; }
.sal-cta-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: calc(.625rem - 2px) calc(1.125rem - 2px); background: var(--c-dark); color: #fff;
  border-radius: 100px; font-size: .8125rem; font-weight: 700;
  text-decoration: none; transition: background .2s, border-color .2s; border: 2px solid var(--orange);
}
.sal-cta-btn:hover { background: var(--orange); border-color: var(--orange); }
.sal-cta-btn:active { background: var(--orange-dark); border-color: var(--orange-dark); }

/* ── Salary range card ─────────────────────────────────────── */
.sal-range-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 20px; padding: 2rem 2.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.src-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.75rem; flex-wrap: wrap; gap: .75rem;
}
.src-header h3 { font-family: var(--f-display); font-size: 1.25rem; color: var(--ink); }
.src-header-right { display: flex; align-items: center; gap: .875rem; }
.src-confidence {
  padding: .2rem .625rem; border-radius: 100px;
  font-size: .68rem; font-weight: 700;
}
.conf-high   { background: #dcfce7; color: #15803d; }
.conf-medium { background: #fef3c7; color: #92400e; }
.conf-low    { background: #fee2e2; color: #991b1b; }
.src-currency { font-size: .72rem; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* The bar */
.src-chart { margin-bottom: 2rem; }
.src-pcnt-labels {
  display: flex; justify-content: space-between;
  margin-bottom: .625rem; padding: 0 0;
}
.src-pcnt-labels span { font-size: .68rem; color: var(--ink-4); font-weight: 600; text-align: center; }
.src-bar-wrap { padding: .75rem 0; }
.src-bar-track {
  position: relative; height: 24px;
  background: var(--bg-2); border-radius: 100px;
}
.src-bar-range {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, #D4D4D4, #C2410C);
  border-radius: 100px;
  opacity: 0; transition: opacity .5s ease, left .5s ease, width .5s ease;
}
.src-bar-range.animated { opacity: 1; }
.src-bar-median {
  position: absolute; top: -4px; bottom: -4px;
  width: 4px; background: var(--ink); border-radius: 2px;
  opacity: 0; transform: scaleY(0); transition: opacity .5s .3s, transform .5s .3s ease;
}
.src-bar-median.animated { opacity: 1; transform: scaleY(1); }
.src-dollar-labels {
  display: flex; justify-content: space-between;
  margin-top: .5rem;
}
.src-dollar-labels span { font-size: .72rem; color: #8a7d6a; font-weight: 600; }

/* Big numbers */
.src-numbers {
  display: grid; grid-template-columns: 1fr 1.2fr 1fr;
  gap: 1px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.srn-item {
  background: var(--white); padding: 1.25rem 1rem; text-align: center;
}
.srn-featured { background: var(--bg); }
.srn-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); margin-bottom: .375rem; }
.srn-value {
  display: block;
  font-family: var(--f-display);
  font-size: 1.75rem; font-weight: 400; letter-spacing: -.02em;
}
.srn-low  { color: var(--ink); }
.srn-mid  { font-size: 2.25rem; color: var(--ink); }
.srn-high { color: var(--ink); }
.srn-sub  { display: block; font-size: .7rem; color: var(--ink-4); margin-top: .2rem; }

/* ── Comp grid ─────────────────────────────────────────────── */
.sal-comp-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1rem; margin-bottom: 1.25rem;
}
.scg-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.25rem;
  display: flex; align-items: flex-start; gap: .75rem;
  border-top: 3px solid transparent;
}
.scg-total  { border-top-color: #C2410C; }
.scg-bonus  { border-top-color: #f59e0b; }
.scg-equity { border-top-color: #525252; }
.scg-benefits { border-top-color: #22c55e; }
.scg-icon { font-size: 1.25rem; flex-shrink: 0; }
.scg-total   .scg-icon { color: #C2410C; }
.scg-bonus   .scg-icon { color: #f59e0b; }
.scg-equity  .scg-icon { color: #525252; }
.scg-benefits .scg-icon { color: #22c55e; }
.scg-label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); margin-bottom: .3rem; }
.scg-value { display: block; font-family: var(--f-display); font-size: 1.25rem; color: var(--ink); margin-bottom: .2rem; }
.scg-sub   { display: block; font-size: .72rem; color: #8a7d6a; line-height: 1.5; }
.scg-benefits-list { list-style: none; padding: 0; margin: 0; }
.scg-benefits-list li { font-size: .72rem; color: var(--ink-3); padding: .2rem 0; border-bottom: 1px solid var(--bg-2); }
.scg-benefits-list li:last-child { border-bottom: none; }

/* ── Market factors ─────────────────────────────────────────── */
.sal-factors-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 20px; padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
}
.sal-factors-card h3 {
  font-family: var(--f-display);
  font-size: 1.125rem; color: var(--ink);
  margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem;
}
.sal-factors-card h3 i { color: #f59e0b; }
.sfc-list { display: flex; flex-direction: column; gap: .75rem; }
.sfc-item {
  display: flex; align-items: flex-start; gap: .875rem;
  padding: .875rem 1rem; border-radius: 12px;
}
.sfc-positive { background: #f0fdf4; }
.sfc-negative { background: #fef2f2; }
.sfc-neutral  { background: var(--bg-2); }
.sfc-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: .35rem;
}
.sfc-positive .sfc-dot { background: #22c55e; }
.sfc-negative .sfc-dot { background: #ef4444; }
.sfc-neutral  .sfc-dot { background: #94a3b8; }
.sfc-body { flex: 1; }
.sfc-body strong { display: block; font-size: .875rem; color: var(--ink); margin-bottom: .2rem; }
.sfc-body p { font-size: .8rem; color: var(--ink-3); line-height: 1.55; margin: 0; }
.sfc-badge {
  padding: .2rem .625rem; border-radius: 100px; font-size: .65rem; font-weight: 700; flex-shrink: 0;
  text-transform: capitalize;
}
.sfc-badge-positive { background: #dcfce7; color: #15803d; }
.sfc-badge-negative { background: #fee2e2; color: #991b1b; }
.sfc-badge-neutral  { background: #f1f5f9; color: #64748b; }

/* ── Two-col ────────────────────────────────────────────────── */
.sal-two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem; margin-bottom: 1.25rem;
}
.sal-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 20px; padding: 1.5rem 1.75rem;
}
.sal-card h3 {
  font-family: var(--f-display);
  font-size: 1.0625rem; color: var(--ink);
  margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
}
.sal-card h3 i { color: var(--ink); }

.sal-comp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .875rem; padding: .625rem 0;
  border-bottom: 1px solid var(--bg-2);
}
.sal-comp-row:last-child { border-bottom: none; }
.scr-title { font-size: .875rem; font-weight: 600; color: var(--ink); }
.scr-right  { text-align: right; }
.scr-delta  { display: block; font-size: .875rem; font-weight: 700; }
.scr-pos    { color: #22c55e; }
.scr-neg    { color: #ef4444; }
.scr-note   { display: block; font-size: .72rem; color: var(--ink-4); }

.sal-tip-row {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .625rem 0; border-bottom: 1px solid var(--bg-2);
  font-size: .8375rem; color: var(--ink-2); line-height: 1.6;
}
.sal-tip-row:last-child { border-bottom: none; }
.sal-tip-num {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--c-dark); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700;
}

/* ── Pay transparency ──────────────────────────────────────── */
.sal-transparency-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; margin-bottom: 1.25rem;
  overflow: hidden;
}
.spt-inner {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem;
}
.spt-icon { font-size: 1.375rem; flex-shrink: 0; margin-top: .1rem; }
.spt-required { color: #C2410C; }
.spt-not      { color: var(--ink-4); }
.spt-inner h4 { font-size: .875rem; font-weight: 700; color: var(--ink); margin-bottom: .3rem; }
.spt-inner p  { font-size: .8125rem; color: var(--ink-3); line-height: 1.6; margin: 0; }

/* ── Email capture ──────────────────────────────────────────── */
.sal-email-capture {
  background: var(--c-dark); border-radius: 20px;
  padding: 1.75rem 2rem; margin-bottom: 1.25rem;
}
.sec-inner {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.sec-icon { font-size: 2rem; flex-shrink: 0; }
.sec-text { flex: 1; min-width: 200px; }
.sec-text h3 { font-size: 1rem; color: #fff; margin-bottom: .2rem; }
.sec-text p  { font-size: .8125rem; color: rgba(255,255,255,.5); margin: 0; }
.sec-form { display: flex; gap: .5rem; flex-shrink: 0; }
.sec-form input {
  padding: .625rem 1rem; background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15); border-radius: 100px;
  font-family: var(--f-ui); font-size: .875rem; color: #fff;
  outline: none; width: 220px;
}
.sec-form input::placeholder { color: rgba(255,255,255,.3); }
.sec-form input:focus { border-color: #C2410C; }
.sec-success { display: flex; align-items: center; gap: .5rem; color: #34d399; font-weight: 600; font-size: .875rem; }

/* ── Upgrade ─────────────────────────────────────────────────── */
.sal-upgrade {
  background: linear-gradient(135deg, var(--bg-2), #ede8df);
  border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem;
  text-align: center;
}
.su-inner { max-width: 520px; margin: 0 auto; }
.sal-upgrade h3 { font-family: var(--f-display); font-size: 1.75rem; color: var(--ink); margin-bottom: .625rem; }
.sal-upgrade p  { color: var(--ink-3); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.75rem; }
.su-btns { display: flex; gap: .875rem; justify-content: center; flex-wrap: wrap; margin-bottom: .875rem; }
.su-fine { font-size: .75rem; color: var(--ink-4); }

/* ── Quota wall ──────────────────────────────────────────────── */
.sal-quota-wall {
  background: var(--white); border: 1px solid var(--border); border-radius: 20px;
  padding: 2.5rem; text-align: center; margin-top: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.sqw-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.sal-quota-wall h3 { font-family: var(--f-display); font-size: 1.5rem; color: var(--ink); margin-bottom: .625rem; }
.sal-quota-wall p  { color: var(--ink-3); margin-bottom: 1.5rem; }
.sqw-btns { display: flex; gap: .875rem; justify-content: center; flex-wrap: wrap; }

/* Share modal */
.sal-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px); z-index: 999;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.sal-modal-overlay[hidden] { display: none; }
.sal-modal {
  background: var(--white); border-radius: 20px; padding: 2rem; max-width: 400px; width: 100%;
  position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.sal-modal-close { position: absolute; top: 1rem; right: 1rem; font-size: 1.375rem; color: var(--ink-4); background: none; border: none; cursor: pointer; }
.sal-modal h3 { font-family: var(--f-display); font-size: 1.25rem; margin-bottom: .375rem; }
.sal-modal > p { font-size: .875rem; color: var(--ink-3); margin-bottom: 1.25rem; }
.sal-share-row { display: flex; gap: .5rem; margin-bottom: 1rem; }
.sal-share-row input { flex: 1; padding: .625rem .875rem; background: var(--bg-2); border: 1.5px solid var(--border); border-radius: 10px; font-size: .8rem; color: var(--ink); outline: none; }
.sal-share-socials { display: flex; gap: .625rem; }
.sal-social-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem; border: 1.5px solid var(--border); border-radius: 10px; font-size: .8rem; font-weight: 600; color: var(--ink); transition: all .15s; }
.sal-social-btn:hover { background: var(--bg-2); }

/* Footer */
.sal-footer { background: var(--bg-2); border-top: 1px solid var(--border); padding: 2rem; }
.sal-footer-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.sal-footer p { font-size: .8rem; color: var(--ink-3); }
.sal-footer a { color: #C2410C; text-decoration: underline; }
.sal-footer-disc { margin-top: .375rem; font-size: .72rem; color: var(--ink-3); }

/* Print */
@media print {
  .sal-nav, .sal-hero, .srh-actions, .sal-email-capture, .sal-upgrade, .sal-modal-overlay, .sal-footer, .sal-back-btn { display: none !important; }
  .sal-results { background: var(--white); padding: 0; }
}

/* Responsive */
@media(max-width:1000px) { .sal-comp-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:900px) {
  .sal-form-row { grid-template-columns: 1fr 1fr; }
  .sal-two-col  { grid-template-columns: 1fr; }
  .sal-result-header { flex-direction: column; }
}
@media(max-width:600px) {
  .sal-hero { padding: 2.5rem 1rem; min-height: auto; }
  .sal-form-card { padding: 1.25rem; }
  .sal-form-row { grid-template-columns: 1fr; }
  .sal-exp-btn  { font-size: .72rem; padding: .5rem; }
  .src-numbers  { grid-template-columns: 1fr; }
  .sal-comp-grid { grid-template-columns: 1fr; }
  .sec-inner    { flex-direction: column; }
  .sec-form     { width: 100%; }
  .sec-form input { width: 100%; }
  .sal-form-footer { flex-direction: column; align-items: flex-start; }
  .sal-submit   { width: 100%; justify-content: center; }
}