/* ============================================================
   Landing - uses colors_and_type.css tokens.
   Only styles for landing-page-specific elements live here.
   App-wide concerns (resets, buttons, logo, body colors) are in
   app/assets/tailwind/application.css.
   ============================================================ */

/* ── Layout ── */
.container { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* Nav, buttons, and logo are NOT styled here. The landing layout renders
   shared/_header.html.erb with Tailwind utilities, and the .btn / .logo
   component classes live in app/assets/tailwind/application.css. */

/* ── Landing CTA size modifier ──
   Mix with the app-wide .btn / .btn-primary / .btn-secondary classes:
       <a class="btn btn-primary landing-cta">Get Started</a>
   Bigger than the standard .btn-md so the marketing CTAs read as primary
   actions on the landing page without changing button sizing app-wide. */
.btn.landing-cta {
  padding: 13px 22px;
  font-size: 16px;
  font-weight: 600;
  gap: 8px;
}

/* Sign-up-disabled state: button looks like the regular green CTA but does
   nothing on click and reads "Coming Soon" instead of the live label. */
.btn.cta-coming-soon { cursor: not-allowed; }

/* ── CTA price note ──
   Rendered by landing_primary_cta when price_note: is given - a small
   subscription disclosure stacked under the button so the cost is visible
   at the moment of click. */
.cta-stack { display: inline-flex; flex-direction: column; gap: 8px; }
.cta-price-note { font-size: 13px; color: var(--color-fg-muted); }
.cta-actions .cta-price-note { text-align: center; }

/* ── Eyebrow / kicker ── */
.kicker {
  font-size: 13px; font-weight: 600; color: var(--color-brand-700);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ── Hero ── */
.hero {
  background: white;
  border-bottom: 1px solid var(--color-border-card);
  padding: 72px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-size: 56px; line-height: 1.05; letter-spacing: -0.03em;
  font-weight: 700; color: var(--color-fg-heading);
  margin: 16px 0 20px;
}
.hero h1 em {
  font-style: normal;
  color: var(--color-brand-700);
}
.hero-sub {
  font-size: 20px; line-height: 1.55;
  color: var(--color-fg-muted);
  max-width: 480px;
  margin: 0 0 28px;
}
.hero-price {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--color-brand-50);
  border: 1px solid var(--color-brand-200);
  color: var(--color-brand-800);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.hero-price strong { font-weight: 700; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero-trust {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--color-neutral-100);
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 24px 32px;
  width: fit-content;
}
.trust-stat .num {
  font-size: 28px; font-weight: 700;
  color: var(--color-fg-heading);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.trust-stat .lbl {
  font-size: 14px;
  color: var(--color-fg-muted);
}

/* ── Section wrappers ── */
.section { padding: 88px 0; }
.section-tight { padding: 64px 0; }
.section-alt { background: white; border-block: 1px solid var(--color-border-card); }
.section-dark {
  background: var(--color-brand-950);
  color: white;
}

.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head .kicker { display: block; margin-bottom: 12px; }
.section-head h2 {
  font-size: 40px; line-height: 1.1; letter-spacing: -0.025em;
  font-weight: 700; color: var(--color-fg-heading);
  margin: 0 0 14px;
}
.section-head p {
  font-size: 18px; color: var(--color-fg-muted);
  margin: 0; line-height: 1.55;
}
.section-dark .section-head h2 { color: white; }
.section-dark .section-head p { color: rgba(255,255,255,0.65); }
.section-dark .kicker { color: var(--color-brand-300); }

/* ── How it works ──
   Four feature cards (LOOKUP / BENCHMARK / EXPLORE / REPORT); collapses to
   2x2 at tablet widths and a single column on phones via the shared
   .steps media rules below. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.step {
  background: white;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
}
.step-num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--color-brand-700);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.step h3 {
  font-size: 22px; font-weight: 700; color: var(--color-fg-heading);
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.step p { font-size: 15px; color: var(--color-fg-muted); line-height: 1.55; margin: 0; }

/* ── Sample report preview ── */
.preview-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}

/* Reversed preview (Explorer): mock left, copy right on desktop so the two
   preview sections zig-zag. DOM order stays copy-first (matching #sample), so
   the mobile stack reads copy → mock → disclaimer identically in both. */
.preview-wrap-reversed { grid-template-columns: 1.1fr 1fr; }
.preview-wrap-reversed .preview-copy { grid-column: 2; grid-row: 1; }
.preview-wrap-reversed .mock-card { grid-column: 1; grid-row: 1; }
.preview-wrap-reversed .sample-disclaimer { grid-column: 1; }

.sample-disclaimer {
  grid-column: 2;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-fg-muted);
  text-align: left;
  font-style: italic;
}
@media (max-width: 960px) {
  .sample-disclaimer { grid-column: 1; }
  .preview-wrap-reversed .preview-copy,
  .preview-wrap-reversed .mock-card { grid-column: 1; grid-row: auto; }
}
.preview-copy h2 {
  font-size: 40px; line-height: 1.1; letter-spacing: -0.025em;
  font-weight: 700; color: var(--color-fg-heading);
  margin: 12px 0 16px;
}
.preview-copy p {
  font-size: 17px; color: var(--color-fg-muted); line-height: 1.6;
  margin: 0 0 24px;
}
.feature-list { list-style: none; padding: 0; margin: 0 0 24px; }
.feature-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0;
  font-size: 15px;
  color: var(--color-fg-body);
}
.feature-list svg {
  flex-shrink: 0; margin-top: 2px;
  color: var(--color-brand-600);
}

/* Shared shell for the fabricated preview cards (.report-card in #sample,
   .explorer-card in #explorer). Those two classes are content hooks only -
   the card chrome and SAMPLE watermark live here. */
.mock-card {
  position: relative;
  background: white;
  border: 1px solid var(--color-border-card);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08);
  padding: 28px;
}
/* Tiled diagonal SAMPLE watermark. Tiling (rather than one centered mark)
   ensures any screenshot crop of the card still carries the mark; the
   opacity is set low enough to keep the card's small text readable, and
   pointer-events off keeps content under it selectable. */
.mock-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='240'%3E%3Ctext%20x='160'%20y='120'%20text-anchor='middle'%20dominant-baseline='middle'%20transform='rotate(-30%20160%20120)'%20font-family='sans-serif'%20font-size='40'%20font-weight='700'%20letter-spacing='6'%20fill='%230f172a'%20fill-opacity='0.05'%3ESAMPLE%3C/text%3E%3C/svg%3E") 0 0 / 320px 240px;
  pointer-events: none;
}
/* Mobile-only: allow the card to shrink below its content min-width so the
   tables scroll horizontally inside the card instead of pushing the page
   wider. On desktop the grid column is wide enough to fit the tables, so
   we leave default sizing alone to avoid an unnecessary scroll affordance. */
@media (max-width: 960px) {
  .mock-card { min-width: 0; }
  .report-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Edge fades + radial shadows hint at off-screen content. */
    background:
      linear-gradient(to right, white, rgba(255, 255, 255, 0)) left center / 24px 100% no-repeat local,
      linear-gradient(to left,  white, rgba(255, 255, 255, 0)) right center / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0)) left center / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0)) right center / 10px 100% no-repeat scroll;
  }
}
.report-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  border-bottom: 1px solid var(--color-border-card);
  padding-bottom: 16px; margin-bottom: 18px;
}
.report-title {
  font-size: 17px; font-weight: 700; color: var(--color-fg-heading);
  letter-spacing: -0.01em;
}
.report-subtitle {
  font-size: 11px; color: var(--color-fg-muted); margin-top: 3px;
}
.report-meta {
  text-align: right; font-size: 11px; color: var(--color-fg-muted);
  font-family: var(--font-mono);
}
.report-meta strong { color: var(--color-fg-heading); font-size: 13px; display: block; }

/* Benchmark parameters strip */
.report-params {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border-card);
}
.report-param .lbl {
  font-size: 10px; color: var(--color-fg-heading); font-weight: 600;
  margin-bottom: 4px;
}
.report-param .val {
  font-size: 12px; color: var(--color-fg-body);
}
.report-param .sub {
  font-size: 12px; color: var(--color-fg-body);
}

/* Executive summary */
.report-summary {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-card);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.report-summary-kicker {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-brand-700); font-weight: 700;
  margin-bottom: 8px;
}
.report-summary-lede {
  font-size: 12px; line-height: 1.55; color: var(--color-fg-heading);
  margin: 0 0 10px 0;
}
.report-summary-lede strong { font-weight: 700; }
.report-summary-caveat {
  font-size: 10.5px; font-style: italic; color: var(--color-fg-muted);
  margin: 0 0 14px 0;
}
.report-summary-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  padding-top: 12px; border-top: 1px solid var(--color-border-card);
}
.report-summary-stats .lbl {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-fg-muted); font-weight: 600; margin-bottom: 4px;
  /* Reserve two label lines so the values sit on one shared row even when a
     long label ("Estimated Peer Median") wraps and its neighbors do not. */
  min-height: 22px;
}
.report-summary-stats .val {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  color: var(--color-fg-heading);
}
.report-summary-stats .val .ord {
  font-size: 10px; color: var(--color-fg-muted); font-weight: 500; margin-left: 1px;
}
/* Estimated (ECI-trended) figures match the app's violet "estimate" color. */
.report-summary-stats .val.est { color: var(--color-estimate, #6d28d9); }
/* Rank value takes the quartile color, like the app's pctl-text (q2 amber). */
.report-summary-stats .val.rank { color: #c08a2e; }
.report-summary-stats .val.rank .ord { color: inherit; }

/* Percentile rank mini-bar - compact mock of the app's pctl-bar indicator:
   quartile-gradient track, faint median tick, lollipop marker at the exact
   percentile in the quartile color. Colors mirror .pctl-* in the app CSS. */
.report-pctl-bar { position: relative; height: 13px; margin-top: 7px; }
.report-pctl-track {
  position: absolute; left: 0; right: 0; top: 4px; height: 5px;
  border-radius: 3px;
  background: linear-gradient(to right,
    #fde4d2 0%, #fde4d2 25%,
    #f1ecd6 25%, #f1ecd6 50%,
    #d8ebde 50%, #d8ebde 75%,
    #b8d6c0 75%, #b8d6c0 100%);
}
.report-pctl-median {
  position: absolute; top: 2px; left: 50%; width: 1px; height: 9px;
  background: #94a3b8; opacity: 0.5;
  transform: translateX(-50%);
}
.report-pctl-marker {
  position: absolute; top: 1px; left: 44%; width: 2px; height: 11px;
  border-radius: 1px; background: #c08a2e;
  transform: translateX(-50%);
}
.report-pctl-dot {
  position: absolute; top: -3px; left: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: #c08a2e; border: 1.5px solid #ffffff;
  box-shadow: 0 0 0 1px #c08a2e;
  transform: translateX(-50%);
}
.report-pctl-ticks {
  position: relative; height: 10px; margin-top: 3px;
  font-family: var(--font-mono); font-size: 7.5px;
  color: var(--color-fg-placeholder);
}
.report-pctl-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.report-pctl-ticks span[data-pos="0"]   { left: 0; transform: none; }
.report-pctl-ticks span[data-pos="25"]  { left: 25%; }
.report-pctl-ticks span[data-pos="50"]  { left: 50%; }
.report-pctl-ticks span[data-pos="75"]  { left: 75%; }
.report-pctl-ticks span[data-pos="100"] { right: 0; left: auto; transform: none; }
.report-summary-stats .lbl sup { font-size: 8px; letter-spacing: 0; }
.report-summary-stats .note {
  font-size: 9px; color: var(--color-fg-muted); margin-top: 3px;
}

/* Section titles inside the report */
.report-section-title {
  font-size: 12px; font-weight: 700; color: var(--color-fg-heading);
  margin-bottom: 8px;
}

/* Chart */
.report-chart {
  border: 1px solid var(--color-border-card);
  border-radius: 10px;
  padding: 16px 18px 14px;
  margin-bottom: 22px;
  background: white;
}
.report-chart-head { margin-bottom: 6px; }
.report-chart-title {
  font-size: 13px; font-weight: 700; color: var(--color-fg-heading);
}
.report-chart-title .cohort {
  font-size: 11px; font-weight: 400; color: var(--color-fg-muted);
}
.report-chart-svg {
  display: block; width: 100%; height: auto;
}
.report-chart-legend {
  display: flex; flex-wrap: wrap; gap: 14px 18px;
  justify-content: center;
  font-size: 10px; color: var(--color-fg-body);
  padding-top: 4px;
}
.report-chart-legend .lg {
  display: inline-flex; align-items: center; gap: 6px;
}
.report-chart-legend .lg-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block;
  background: #7aa9ff;
}
.report-chart-legend .lg-sq {
  width: 9px; height: 9px; display: inline-block;
  background: #1e2a44;
}
.report-chart-legend .lg-tri {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #3b6ee0;
  display: inline-block;
}
.report-chart-legend .lg-dia {
  width: 9px; height: 9px;
  display: inline-block;
  transform: rotate(45deg);
  background: #e8a23a;
}
.report-section-title.is-spaced { margin-top: 22px; }
.report-section-title.is-divided {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border-card);
}
.report-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.report-table th {
  text-align: left; padding: 8px 8px;
  font-weight: 600; color: var(--color-fg-muted);
  border-bottom: 1px solid var(--color-border-card);
  background: var(--color-bg-page);
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
}
.report-table th.num, .report-table td.num { text-align: right; font-family: var(--font-mono); }
.report-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--color-neutral-100);
  color: var(--color-fg-body);
}
.report-table td.name { font-weight: 600; color: var(--color-fg-heading); font-family: var(--font-mono); }
.report-table td.num.pos { color: var(--color-brand-700); }
.report-table td.num.est { color: var(--color-estimate, #6d28d9); }
.report-table td.num.muted { color: var(--color-fg-placeholder); text-align: center; }
.report-table td.exec {
  color: var(--color-fg-heading); font-weight: 500;
}
.report-table td.exec .role {
  color: var(--color-fg-muted); font-weight: 400;
}
.report-table tr:last-child td { border-bottom: none; }

/* ── Explorer preview card ──
   Static mock of the Explorer screen (role pills, filter chips, histogram,
   percentile table). Pills and chips are <span>s, not buttons - the card is
   aria-hidden decoration, so nothing inside may be focusable. */
.explorer-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.explorer-pill {
  display: inline-flex; align-items: center;
  padding: 4px 11px;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-full);
  background: white;
  font-size: 11px; font-weight: 500;
  color: var(--color-fg-body);
}
.explorer-pill.is-active {
  background: var(--color-brand-700);
  border-color: var(--color-brand-700);
  color: white;
}
.explorer-pill.is-more { color: var(--color-fg-muted); border-style: dashed; }

/* One-line cohort summary in the in-app category/state chip style. */
.explorer-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--color-border-card);
}
.explorer-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-700);
  color: white;
  font-size: 10.5px; font-weight: 500;
}

.explorer-hist-sub { font-size: 10.5px; color: var(--color-fg-muted); margin-top: 2px; }

/* Percentile-table cell variants for the Explorer mock: sans-serif metric
   labels (td.name is mono for the report card's year column), an indented
   Schedule J component tier, and the uppercase subgroup divider row. */
.report-table td.metric { font-weight: 600; color: var(--color-fg-heading); }
.report-table td.metric.is-component { padding-left: 18px; font-weight: 500; }
/* All 8 in-app columns (Metric/N/Average/P10/P25/Median/P75/P90) must fit the
   desktop half-width card, so cells run tighter and slightly smaller than the
   default report table. */
.explorer-card .report-table { font-size: 10.5px; }
.explorer-card .report-table th { padding: 8px 5px; }
.explorer-card .report-table td { padding: 9px 5px; }
.explorer-card .report-table td.metric.is-component { padding-left: 18px; }
.report-table tr.is-total td { font-weight: 700; }
.report-table td.subhead {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; color: var(--color-fg-muted);
  background: var(--color-bg-page);
}

/* ── Pricing ── */
.pricing {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 460px;
  margin: 0 auto;
}
.price-card {
  background: white;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  padding: 36px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  position: relative;
}
.price-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--color-brand-400), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.price-tier {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-brand-700);
  margin-bottom: 16px;
}
.price-amount {
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  margin-bottom: 8px;
}
.price-amount .dollar {
  font-size: 28px; font-weight: 600; color: var(--color-fg-heading);
}
.price-amount .num {
  font-size: 72px; font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--color-fg-heading);
  line-height: 1;
}
.price-amount .per {
  font-size: 16px; color: var(--color-fg-muted);
}
.price-tagline {
  font-size: 14px; color: var(--color-fg-muted);
  margin-bottom: 24px;
}
.price-features {
  list-style: none; padding: 0; margin: 0 0 28px;
  text-align: left;
  border-top: 1px solid var(--color-neutral-100);
  padding-top: 24px;
}
.price-features li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 0;
  font-size: 15px;
  color: var(--color-fg-body);
}
.price-features svg {
  flex-shrink: 0; margin-top: 3px;
  color: var(--color-brand-600);
}
.price-foot {
  font-size: 12px; color: var(--color-fg-muted);
  margin-top: 12px;
}

/* ── Methodology / dark band ── */
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.method-cell {
  background: var(--color-brand-950);
  padding: 32px 28px;
}
.method-cell .num {
  font-size: 32px; font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 10px;
}
.method-cell .lbl {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.45;
}

/* ── FAQ ── */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
  max-width: 960px;
  margin: 0 auto;
}
.faq-item h4 {
  font-size: 18px; font-weight: 600;
  color: var(--color-fg-heading);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.faq-item p {
  font-size: 15px; color: var(--color-fg-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Final CTA ── */
.cta-band {
  background: white;
  border-top: 1px solid var(--color-border-card);
  border-bottom: 1px solid var(--color-border-card);
  padding: 80px 0;
}
.cta-inner {
  max-width: 720px; margin: 0 auto; text-align: center;
}
.cta-inner h2 {
  font-size: 44px; line-height: 1.05; letter-spacing: -0.03em;
  font-weight: 700; color: var(--color-fg-heading);
  margin: 0 0 14px;
}
.cta-inner h2 em {
  font-style: normal; color: var(--color-brand-700);
}
.cta-inner p {
  font-size: 18px; color: var(--color-fg-muted);
  margin: 0 0 28px;
}
/* flex-start keeps the secondary button from stretching to the height of a
   primary CTA that carries a price note underneath (.cta-stack). */
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: flex-start; }

/* ── Free salary data / benchmark hub links (pre-footer) ── */
.salary-links {
  background: white;
  padding: 56px 0;
}
.salary-links-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}
.salary-links-meta .kicker { display: block; margin: 0 0 12px; }
.salary-links-meta p {
  font-size: 15px;
  color: var(--color-fg-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}
.salary-links-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.salary-link-card {
  display: block;
  background: white;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.salary-link-card:hover {
  border-color: var(--color-brand-300);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.salary-link-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.salary-link-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-brand-700);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.salary-link-arrow {
  flex-shrink: 0;
  color: var(--color-brand-700);
  margin-top: 2px;
  transition: transform 150ms ease;
}
.salary-link-card:hover .salary-link-arrow { transform: translateX(3px); }
.salary-link-card-desc {
  display: block;
  font-size: 14px;
  color: var(--color-fg-muted);
  line-height: 1.5;
  margin: 8px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .salary-link-card, .salary-link-arrow { transition: none; }
  .salary-link-card:hover { transform: none; }
  .salary-link-card:hover .salary-link-arrow { transform: none; }
}

/* Footer styles (.footer, .footer-inner, .footer-links, .footer-meta) are not
   used here - the landing layout renders shared/_footer.html.erb which is
   styled with Tailwind utilities. */

/* ── Responsive ── */
@media (max-width: 960px) {
  .hero-grid, .preview-wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 40px; }
  .steps, .method-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .section, .cta-band { padding: 56px 0; }
  .section-head h2, .cta-inner h2 { font-size: 28px; }
  .salary-links-grid { grid-template-columns: 1fr; gap: 28px; }
  .salary-links-meta { text-align: center; }
  .salary-links-meta p { margin-inline: auto; }
}
@media (max-width: 540px) {
  .steps, .method-grid { grid-template-columns: 1fr; }
  .report-summary-stats, .report-params { grid-template-columns: 1fr; }
  /* Single column: no shared value row to align, drop the reserved space. */
  .report-summary-stats .lbl { min-height: 0; }
  .hero-trust { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .salary-links-cards { grid-template-columns: 1fr; }
}

/* ── Density tweak ── */
body[data-density="compact"] .section { padding: 56px 0; }
body[data-density="compact"] .hero { padding: 48px 0 56px; }
body[data-density="compact"] .cta-band { padding: 56px 0; }
body[data-density="compact"] .hero h1 { font-size: 44px; }
body[data-density="compact"] .section-head { margin-bottom: 36px; }

body[data-density="roomy"] .section { padding: 120px 0; }
body[data-density="roomy"] .hero { padding: 96px 0 112px; }
body[data-density="roomy"] .cta-band { padding: 112px 0; }