/* =====================================================================
   Savings Table — Figma "See the Real Savings with OneGold" 6190:48110.
   A WHITE band, content locked to the 1240 content area. Vertical stack:
   LEFT-aligned H2 (Axiforma Medium 32/45) + LEFT-aligned lead (Axiforma
   Regular 18/25), then a horizontally-scrollable savings table, a centred
   grey footnote, then a centred CTA block (caption + filled OneGold-blue
   button). Mirrors the sibling process-cards / compare-cards conventions on
   this same Switch & Save page.

   Table chrome:
     Row 1 — empty corner cell + a single "Investment" cell spanning every
             value column (dark navy, white, bold, centred).
     Row 2 — "Time Horizon" first cell (dark navy, white) + each tier header
             (very light blue, gray-8 bold, centred).
   Body rows zebra-stripe (odd very light blue / even white) via :nth-child,
   so any number of rows stripes correctly; first column + values centred.
   The table lives in an overflow-x:auto wrapper so the 7 value columns never
   break the page on small screens.

   Component-local --st-* properties for the few non-token Figma hexes (the
   navy header band + light-blue stripe/header tints); shared tokens for
   everything else. No edits to tokens.css; new component => no impact on
   other pages.
   ===================================================================== */

.savings-table {
  /* Component-local values (no token edits; mirrors process-cards' --pc-* / compare-cards' --cc-* pattern). */
  --st-block-gap: 40px;            /* intro -> table -> footnote -> CTA block      */
  --st-intro-gap: var(--cb-gap);   /* H2 -> lead (20px)                            */
  --st-cell-pad-y: 12px;           /* generous cell vertical padding               */
  --st-cell-pad-x: 16px;           /* generous cell horizontal padding             */
  --st-head-navy: var(--dusty-blue);    /* #1f3954 dark navy header band           */
  --st-colhead-bg: #eef4fc;        /* very light blue tier column headers (Figma)  */
  --st-zebra-bg: #f5f8fd;          /* very light blue odd-row stripe (Figma)       */
  --st-cell-border: var(--gray-3); /* subtle 1px row divider (#dddddd)             */
  --st-footnote-fs: 13px;          /* small grey footnote (~13-14px, no 13 token)  */
  --st-cta-block-gap: 20px;        /* CTA caption -> button                        */
  --st-cta-min-w: 160px;           /* button min-width                             */
  --st-cta-pad-y: 14px;            /* button vertical padding (Figma 14px)         */
  --st-cta-tracking: 0.16px;       /* button letter-spacing                        */
  --st-cta-hover: #006fd6;         /* darker OneGold blue on hover (repo button.css)*/

  background: var(--gray-0);
  padding-block: var(--home-sec-pad-y);
}

/* ---- Inner stack locked to the 1240 content area ---- */
.savings-table__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--st-block-gap);
}

/* ---- Intro: LEFT-aligned H2 + lead ---- */
.savings-table__intro {
  display: flex;
  flex-direction: column;
  gap: var(--st-intro-gap);
  text-align: left;
}

/* H2 — Axiforma Medium 32/45 (OG Desktop H2), left-aligned. */
.savings-table__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  color: var(--gray-8);
  word-break: break-word;
}

/* Lead — Axiforma Regular 18/25, gray-8, left-aligned. */
.savings-table__lead {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25);
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- Horizontal-scroll wrapper: the 7 value columns may overflow here. ---- */
.savings-table__scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.savings-table__table {
  width: 100%;
  border-collapse: collapse;
  color: var(--gray-8);
}

/* ---- Cells (shared base) ---- */
.savings-table__cell {
  padding: var(--st-cell-pad-y) var(--st-cell-pad-x);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---- Header row 1: empty corner + "Investment" spanning all value columns ---- */
.savings-table__cell--corner {
  background: var(--gray-0);
  border: 0;
}

.savings-table__cell--investment {
  background: var(--st-head-navy);
  color: var(--gray-0);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
}

/* ---- Header row 2: "Time Horizon" navy first cell + light-blue tier heads ---- */
.savings-table__cell--rowlabel {
  background: var(--st-head-navy);
  color: var(--gray-0);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
}

.savings-table__cell--colhead {
  background: var(--st-colhead-bg);
  color: var(--gray-8);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
}

/* ---- Body rows: zebra striping (odd light blue, even white) + 1px divider. ---- */
.savings-table__body .savings-table__row {
  background: var(--gray-0);
  border-bottom: 1px solid var(--st-cell-border);
}
.savings-table__body .savings-table__row:nth-child(odd) {
  background: var(--st-zebra-bg);
}

/* First column (row label) + values: Axiforma Regular 16, gray-8, centred. */
.savings-table__cell--label,
.savings-table__cell--value {
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  color: var(--gray-8);
}

/* ---- Footnote — small grey note, centred under the table (RAW). ---- */
.savings-table__footnote {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--st-footnote-fs);
  line-height: var(--lh-25);
  color: var(--gray-7);
  text-align: center;
  word-break: break-word;
}

/* ---- CTA block: centred caption + filled blue button. ---- */
.savings-table__cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--st-cta-block-gap);
  width: 100%;
  text-align: center;
}

/* CTA caption — Axiforma Regular 16, gray-8, centred. */
.savings-table__cta-caption {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-25);
  color: var(--gray-8);
  word-break: break-word;
}

/* Filled OneGold-blue button (matches the repo .btn--og look + the sibling
   process-cards / compare-cards CTAs: og-blue fill, white Medium 16, 14/24
   padding, radius 8, min-width 160, 0.16px tracking, centred, no underline).
   Self-contained so the partial stays CMS-mappable without the shared .btn. */
.savings-table__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--st-cta-min-w);
  padding: var(--st-cta-pad-y) var(--btn-pad-x-lg);
  border-radius: var(--radius-8);
  background: var(--og-blue);
  color: var(--gray-0);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: 1;
  letter-spacing: var(--st-cta-tracking);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.savings-table__cta:hover { background: var(--st-cta-hover); }

/* ---- Tablet (600–1023): tighten cell padding + fonts; table stays scrollable ---- */
@media (max-width: 1023.98px) {
  .savings-table__heading {
    font-size: clamp(26px, 3.5vw, var(--fs-32));
    line-height: 1.3;
  }
  .savings-table__cell {
    padding: 10px 12px;
    font-size: var(--fs-14);
  }
  .savings-table__cell--investment,
  .savings-table__cell--rowlabel,
  .savings-table__cell--colhead,
  .savings-table__cell--label,
  .savings-table__cell--value {
    font-size: var(--fs-14);
  }
}

/* ---- Mobile (M frame @767.98px): keep the table in its horizontal-scroll
   wrapper (do NOT reflow the grid); shrink type + tighten padding; H2 clamps;
   CTA + caption stay centred. ---- */
@media (max-width: 767.98px) {
  .savings-table {
    padding-inline: var(--pad-mobile);
    padding-block: 40px;
  }
  .savings-table__heading {
    font-size: clamp(28px, 6.4vw, var(--fs-32));
    line-height: 1.3;
  }
  .savings-table__lead {
    font-size: var(--fs-16);
  }
  .savings-table__cell {
    padding: 8px 10px;
    font-size: var(--fs-14);
  }
  .savings-table__cell--investment,
  .savings-table__cell--rowlabel,
  .savings-table__cell--colhead,
  .savings-table__cell--label,
  .savings-table__cell--value {
    font-size: var(--fs-14);
  }
  /* Keep the first column readable as the table scrolls horizontally. */
  .savings-table__cell--rowlabel,
  .savings-table__cell--label {
    white-space: nowrap;
  }
  .savings-table__cta {
    white-space: normal;
  }
}