/* ShopBurial /age/* rate-page styles
   Inherits palette tokens from /styles.css (--sb-*).
   Designed for ages 50–80 — large hit targets, generous line-height,
   wide tables that scroll horizontally on mobile. */

.sb-rates { background: var(--sb-cream); }

/* HERO
   Container geometry mirrors .sb-nav__inner (max-width 1180px, 24px inner
   padding) so the H1 left edge sits flush with the header logo above it. */
.sb-rates-hero {
  background: linear-gradient(180deg, var(--sb-paper) 0%, var(--sb-cream) 100%);
  padding: 28px 0 24px;
  border-bottom: 1px solid rgba(123,94,58,0.18);
}
/* Bold dollar amounts in the hero lede so the headline price reads at a glance. */
.sb-rates-hero .sb-lede strong { font-weight: 800; color: var(--sb-espresso-dark); }
.sb-rates-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.sb-rates-hero h1, .sb-rates-hero .sb-lede, .sb-rates-hero .sb-rates-hero__eyebrow {
  max-width: 780px;
}
.sb-rates-hero__eyebrow {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sb-teak);
  margin: 0 0 12px;
  font-weight: 600;
}
.sb-rates-hero h1 {
  font-family: var(--cs-font-heading);
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--sb-espresso-dark);
}
.sb-rates-hero .sb-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--sb-espresso);
  max-width: 640px;
  margin: 0 0 24px;
}
.sb-rates-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* SECTIONS
   Same 1180px / 24px-inner-padding container as .sb-nav__inner and the hero
   above, so every block on the page (eyebrow, H1, intro, tier explainer,
   tables, methodology, CTA box, agenav) shares one left edge with the header
   logo. The prose column (intro paragraphs) is left-aligned to a 780px
   reading width inside that container. The portraits row is the one element
   allowed to center horizontally — it reads as an editorial figure. */
.sb-rates-section { padding: 24px 0 48px; }
.sb-rates-section__inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sb-rates-intro {
  font-size: 19px;
  line-height: 1.65;
  max-width: 780px;
  margin: 0 0 18px;
}
.sb-rates-intro:last-of-type { margin-bottom: 28px; }

/* Portrait quick-links — male/female anchors at top of section.
   Centered on desktop (where there's room to spread); collapse to a left-flush
   wrap on mobile so the larger circles don't fight the page padding. */
.sb-rates-portraits {
  display: flex;
  gap: 32px;
  margin: 0 0 28px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 640px) {
  .sb-rates-portraits { justify-content: flex-start; gap: 12px; }
}
.sb-portrait-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 16px 24px 12px;
  border-radius: var(--cs-radius);
  background: var(--sb-paper);
  border: 1px solid rgba(123,94,58,0.16);
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.sb-portrait-link:hover {
  transform: translateY(-2px);
  border-color: var(--sb-gold);
  background: var(--sb-paper-warm);
}
.sb-portrait-link img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 16px rgba(45,31,18,0.12);
}
.sb-portrait-label {
  font-family: var(--cs-font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--sb-espresso-dark);
}
@media (max-width: 640px) {
  .sb-rates-portraits { gap: 12px; }
  .sb-portrait-link { padding: 12px 16px 10px; }
  .sb-portrait-link img { width: 110px; height: 110px; }
  .sb-portrait-label { font-size: 16px; }
}

/* TIER EXPLAINER */
.sb-rates-tier-explainer {
  background: var(--sb-paper);
  border: 1px solid rgba(123,94,58,0.18);
  border-radius: var(--cs-radius);
  padding: 22px 26px;
  margin-bottom: 28px;
}
.sb-rates-tier-explainer h2 {
  font-family: var(--cs-font-heading);
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--sb-espresso-dark);
}
.sb-rates-tier-explainer ul {
  margin: 0; padding: 0; list-style: none;
}
.sb-rates-tier-explainer li {
  padding: 12px 0;
  font-size: 17px;
  line-height: 1.55;
  border-top: 1px dashed rgba(123,94,58,0.18);
}
.sb-rates-tier-explainer li:first-child { border-top: none; }
.sb-rates-tier-explainer li strong { color: var(--sb-espresso-dark); }
/* Tier sublabel — small kicker after the tier name (e.g. "(Day 1 coverage)"). */
.sb-tier-sublabel {
  font-family: var(--cs-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--sb-teak);
  letter-spacing: 0;
  text-transform: none;
}

/* GENDER / TOBACCO sections */
.sb-rates-gender { margin-bottom: 56px; }
.sb-rates-gender h2 {
  font-family: var(--cs-font-heading);
  font-size: 28px;
  margin: 0 0 16px;
  color: var(--sb-espresso-dark);
  border-bottom: 2px solid var(--sb-gold);
  padding-bottom: 8px;
}
.sb-rates-table-wrap + .sb-rates-table-wrap,
.sb-rates-table-foot + .sb-rates-table-wrap { margin-top: 28px; }
.sb-rates-caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 10px;
  font-family: var(--cs-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--sb-espresso-dark);
}
.sb-rates-table-foot {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--sb-teak);
}

/* TIER pill — used as the row label in the index table */
.sb-tier-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--cs-radius-pill);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sb-tier-level    { background: rgba(90,106,58,0.14);  color: var(--sb-avocado-dark); }
.sb-tier-graded   { background: rgba(201,152,46,0.18); color: var(--sb-gold-dark); }
.sb-tier-modified { background: rgba(184,85,46,0.16);  color: var(--sb-rust-dark); }
.sb-tier-gi       { background: rgba(123,94,58,0.16);  color: var(--sb-teak); }

/* TABLES */
.sb-rates-table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(123,94,58,0.14);
  border-radius: var(--cs-radius-sm);
  background: var(--sb-paper);
}
.sb-rates-scrollhint {
  display: none;
  position: absolute;
  top: 8px; right: 12px;
  font-size: 12px;
  color: var(--sb-teak);
  background: rgba(255,255,255,0.85);
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
}
@media (max-width: 768px) {
  .sb-rates-scrollhint { display: block; }
}
.sb-rates-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.sb-rates-table thead th {
  background: var(--sb-paper-warm);
  color: var(--sb-espresso-dark);
  font-weight: 700;
  text-align: right;
  padding: 12px 14px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(123,94,58,0.16);
  font-family: var(--cs-font-body);
}
.sb-rates-table thead th:first-child,
.sb-rates-th-tier,
.sb-rates-th-cov { text-align: left; min-width: 130px; }
.sb-rates-table thead th { text-align: right; padding-right: 28px; }
.sb-rates-table thead th:first-child { text-align: left; padding-right: 14px; }
.sb-rates-cov-cell {
  font-family: var(--cs-font-heading);
  font-size: 19px;
  color: var(--sb-espresso-dark);
  font-variant-numeric: tabular-nums;
}
.sb-rates-table td {
  text-align: right;
  padding-right: 28px;
  font-variant-numeric: tabular-nums;
}
.sb-rates-table td.sb-rate-na { text-align: center; padding-right: 14px; }
.sb-rates-table tbody th {
  text-align: left;
  padding: 12px 14px;
  background: transparent;
  border-bottom: 1px solid rgba(123,94,58,0.10);
  font-weight: 600;
  font-family: var(--cs-font-body);
}
.sb-rate-avg { display: block; font-size: 12px; color: var(--sb-teak); margin-top: 2px; font-weight: 400; }
.sb-rates-table td {
  padding: 12px 28px 12px 14px;
  border-bottom: 1px solid rgba(123,94,58,0.10);
  white-space: nowrap;
}
.sb-rate-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.sb-rate-monthly {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22em;
  font-weight: 700;
  color: var(--sb-espresso-dark);
  font-size: 18px;
}
.sb-rate-cell:not(.sb-rate-na) .sb-rate-monthly::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--sb-gold);
  border-top: 2px solid var(--sb-gold);
  transform: rotate(45deg);
  transform-origin: center;
  margin-left: 1px;
  flex: 0 0 auto;
}
.sb-rate-yearly  { display: block; font-size: 14px; color: var(--sb-teak); margin-top: 3px; font-weight: 400; }
.sb-rate-na { color: var(--sb-sage); font-weight: 400; cursor: default; }
.sb-rate-cell:not(.sb-rate-na) { cursor: pointer; transition: background-color 0.15s; }
.sb-rate-cell:not(.sb-rate-na):hover { background-color: var(--sb-paper-warm); }
.sb-rate-cell:focus-visible { outline: 3px solid var(--sb-gold); outline-offset: -3px; border-radius: 4px; }
@media (max-width: 640px) {
  .sb-rate-cell:not(.sb-rate-na) .sb-rate-monthly::after { width: 6px; height: 6px; }
}

/* ============================================
   Tier-comparison modal (matches rates.coversavvy.com pattern)
   ============================================ */
.sb-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(45, 31, 18, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.sb-modal-overlay.open { opacity: 1; visibility: visible; }
.sb-modal-card {
  max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto;
  position: relative;
  background: var(--sb-cream);
  border: 1px solid rgba(123,94,58,0.25);
  border-radius: var(--cs-radius);
  box-shadow: 0 20px 50px rgba(45,31,18,0.25);
  animation: sbModalSlideUp 0.25s ease-out;
}
@keyframes sbModalSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.sb-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sb-paper-warm); border: none;
  color: var(--sb-espresso-dark);
  font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 1; transition: background 0.15s;
}
.sb-modal-close:hover { background: var(--sb-sage); }
.sb-rate-card-header { padding: 24px 28px 0; }
.sb-rate-card-title {
  font-family: var(--cs-font-heading);
  font-size: 22px; font-weight: 800;
  color: var(--sb-espresso-dark);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.sb-rate-card-subtitle {
  font-size: 14px; color: var(--sb-teak); margin: 0;
}
.sb-rate-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 20px 24px;
}
.sb-rate-card-col {
  text-align: center; padding: 16px 8px;
  border-radius: var(--cs-radius-sm);
  background: #fff;
  border: 1px solid rgba(123,94,58,0.15);
}
.sb-rate-card-col.active {
  border-color: var(--sb-gold);
  background: var(--sb-paper);
  box-shadow: 0 0 0 2px rgba(201,152,46,0.18);
}
.sb-rate-card-tier {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--cs-radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.sb-rate-card-monthly {
  font-family: var(--cs-font-heading);
  font-size: 24px; font-weight: 800;
  color: var(--sb-espresso-dark);
  line-height: 1.1;
}
.sb-rate-card-monthly.sb-rate-card-na {
  font-size: 16px; color: var(--sb-teak); font-weight: 400;
}
.sb-rc-whole { font-variant-numeric: tabular-nums; }
.sb-rate-card-monthly small { font-size: 13px; color: var(--sb-teak); font-weight: 500; margin-left: 2px; }
.sb-rate-card-annual {
  font-size: 12px; color: var(--sb-teak); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.sb-rate-card-qualifier {
  font-size: 12px; color: var(--sb-teak); margin-top: 8px; line-height: 1.3;
}
.sb-rate-card-ctas {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 24px 16px;
}
.sb-rate-card-disclosure {
  font-size: 12px; color: var(--sb-teak);
  padding: 0 28px 24px;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .sb-rate-card-grid { grid-template-columns: repeat(2, 1fr); }
  .sb-modal-card { max-height: 95vh; }
}

/* METHODOLOGY + DISCLAIMER */
.sb-rates-methodology {
  background: var(--sb-paper);
  border-radius: var(--cs-radius);
  padding: 22px 26px;
  margin-top: 28px;
  border-left: 4px solid var(--sb-avocado);
}
.sb-rates-methodology h2 {
  font-family: var(--cs-font-heading);
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--sb-espresso-dark);
}
.sb-rates-methodology p { margin: 0 0 12px; line-height: 1.6; }
.sb-rates-methodology p:last-child { margin-bottom: 0; }
.sb-rates-disclaimer { color: var(--sb-teak); font-size: 15px; }

/* High-visibility personalized-quote CTA box.
   Sits between the methodology and the FAQ. Wider, bolder, and warmer than the
   surrounding cards so it reads as the page's primary action. */
.sb-rates-cta-box {
  background: linear-gradient(180deg, var(--sb-paper-warm) 0%, var(--sb-paper) 100%);
  border: 2px solid var(--sb-gold);
  border-radius: var(--cs-radius);
  padding: 32px 28px;
  margin: 32px 0 24px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(201, 152, 46, 0.18);
}
.sb-rates-cta-box__lede {
  font-family: var(--cs-font-heading);
  font-size: 24px;
  line-height: 1.2;
  color: var(--sb-espresso-dark);
  margin: 0 auto 18px;
  max-width: 620px;
  font-weight: 700;
}
.sb-rates-cta-box__btn {
  display: inline-block;
  background: var(--sb-rust);
  color: #FFFBF2;
  font-family: var(--cs-font-heading);
  font-weight: 700;
  font-size: 22px;
  padding: 18px 36px;
  border-radius: 14px;
  text-decoration: none;
  min-height: 60px;
  line-height: 1.2;
  box-shadow: 0 3px 0 var(--sb-rust-dark), 0 6px 16px rgba(184, 85, 46, 0.25);
  transition: transform 0.05s ease, background 0.15s ease;
}
.sb-rates-cta-box__btn:hover { background: var(--sb-rust-dark); color: #FFFBF2; }
.sb-rates-cta-box__btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--sb-rust-dark), 0 3px 8px rgba(184, 85, 46, 0.20);
}
.sb-rates-cta-box__or {
  margin: 16px 0 0;
  font-size: 17px;
  color: var(--sb-teak);
}
.sb-rates-cta-box__or a {
  color: var(--sb-rust);
  text-decoration: none;
}
.sb-rates-cta-box__or a:hover { color: var(--sb-rust-dark); text-decoration: underline; }
@media (max-width: 640px) {
  .sb-rates-cta-box { padding: 26px 18px; }
  .sb-rates-cta-box__lede { font-size: 21px; }
  .sb-rates-cta-box__btn { font-size: 19px; padding: 16px 24px; width: 100%; box-sizing: border-box; }
}

/* FAQ */
.sb-rates-faq { margin: 48px 0; }
.sb-rates-faq h2 {
  font-family: var(--cs-font-heading);
  font-size: 28px;
  margin: 0 0 24px;
  color: var(--sb-espresso-dark);
}
.sb-faq-item {
  border-bottom: 1px solid rgba(123,94,58,0.18);
  padding: 16px 0;
}
.sb-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  color: var(--sb-espresso-dark);
  list-style: none;
  padding: 8px 0;
  position: relative;
  padding-right: 32px;
}
.sb-faq-item summary::-webkit-details-marker { display: none; }
.sb-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 8px;
  font-size: 24px;
  color: var(--sb-gold);
  transition: transform 0.2s;
}
.sb-faq-item[open] summary::after { content: '−'; }
.sb-faq-answer { padding: 8px 0 12px; line-height: 1.65; }

/* PREV / NEXT NAV */
.sb-rates-agenav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid rgba(123,94,58,0.18);
}
.sb-rates-agenav a {
  color: var(--sb-espresso-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}
.sb-rates-agenav a:hover { color: var(--sb-gold-dark); }
.sb-rates-allages {
  background: var(--sb-paper);
  padding: 8px 16px;
  border-radius: var(--cs-radius-pill);
  border: 1px solid rgba(123,94,58,0.22);
}

/* INDEX page age grid */
.sb-age-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 14px;
  margin: 32px 0 48px;
}
.sb-age-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  background: #fff;
  border: 1px solid rgba(123,94,58,0.22);
  border-radius: var(--cs-radius);
  text-decoration: none;
  color: var(--sb-espresso-dark);
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.sb-age-tile:hover {
  transform: translateY(-2px);
  border-color: var(--sb-gold);
  background: var(--sb-paper);
}
.sb-age-tile__num {
  font-family: var(--cs-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
.sb-age-tile__label {
  font-size: 13px;
  color: var(--sb-teak);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.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: 640px) {
  .sb-rates-hero { padding: 32px 0 24px; }
  .sb-rates-section { padding: 24px 0 48px; }
  .sb-rates-hero__inner,
  .sb-rates-section__inner { padding: 0 16px; }
  .sb-rates-tier-explainer { padding: 18px; }
  .sb-rates-tier-explainer h2 { font-size: 20px; }
  .sb-rates-gender h2 { font-size: 24px; }
  .sb-rates-table { font-size: 14px; }
  .sb-rates-table thead th, .sb-rates-table td, .sb-rates-table tbody th { padding: 10px 12px; }
  .sb-rate-monthly { font-size: 15px; }
}