/* ==========================================================================
   PAGE WRAPPER
   ========================================================================== */
.renters-page {
  color: #1A1A1A;
  line-height: 1.6;
  --renters-navy-hero: var(--phi-navy-hero, #0D264A);
  --renters-heading-weight: var(--phi-heading-weight, 500);
  --renters-button-weight: var(--phi-button-weight, 600);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.renters-page *,
.renters-page *::before,
.renters-page *::after {
  box-sizing: border-box;
}

.renters-page a {
  color: #1B3A6B;
  text-decoration-color: rgba(27, 58, 107, 0.3);
  text-underline-offset: 3px;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

.renters-page a:hover {
  color: #0B1F3A;
  text-decoration-color: rgba(11, 31, 58, 0.6);
}

.renters-page a:focus-visible {
  outline: 2px solid #C9A961;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Selective gold emphasis utility. Applied to inline spans inside headlines
   and prose where a specific word or phrase carries the defining weight of
   the surrounding sentence. Used sparingly so the emphasis retains impact.
   Three-level specificity defends against foundation heading color rules. */
.renters-page .phi-h1 .renters-text-gold,
.renters-page .phi-h2 .renters-text-gold,
.renters-page .phi-h3 .renters-text-gold,
.renters-page .renters-text-gold,
.renters-text-gold {
  color: #C9A961 !important;
  font-style: italic;
}


/* ==========================================================================
   SECTION 1 — HERO
   ========================================================================== */
.renters-hero {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 75% 15%, rgba(42, 79, 138, 0.22), transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 90%, rgba(201, 169, 97, 0.12), transparent 55%),
    linear-gradient(160deg, #0B1F3A 0%, var(--renters-navy-hero) 45%, #1B3A6B 100%);
  color: #F7F5F0;
  padding: 72px 0 70px;
  overflow: hidden;
}

.renters-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
}

.renters-hero__top-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #C9A961;
}

.renters-hero .phi-container {
  position: relative;
  z-index: 1;
}

.renters-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 42px;
  align-items: center;
}

.renters-page .renters-hero .renters-hero__content .phi-eyebrow {
  color: #C9A961 !important;
  display: inline-block;
  margin-bottom: 16px;
}

.renters-page .renters-hero .renters-hero__content .phi-h1 {
  color: #F7F5F0 !important;
  margin: 0 0 20px !important;
  font-family: var(--phi-font-serif, 'Playfair Display', Georgia, serif);
  font-weight: var(--renters-heading-weight) !important;
  font-size: var(--phi-hero-h1-size, clamp(32px, 4.1vw, 52px)) !important;
  line-height: var(--phi-hero-h1-line-height, 1.08) !important;
  letter-spacing: 0;
  max-width: 650px;
}

.renters-page .renters-hero .renters-hero__highlight {
  color: #E8C76C !important;
  font-style: italic;
  display: inline;
}

.renters-page .renters-hero .renters-hero__content .phi-lede {
  color: rgba(247, 245, 240, 0.88) !important;
  max-width: 590px;
  margin: 0 !important;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.renters-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  margin-top: 30px;
}

.renters-hero__actions .phi-btn {
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  font-weight: var(--renters-button-weight);
}

.renters-hero__actions .phi-btn--on-dark-primary {
  background-color: #C9A961;
  color: #0B1F3A !important;
  border-color: #C9A961;
  box-shadow: 0 8px 24px rgba(201, 169, 97, 0.28);
}

.renters-hero__actions .phi-btn--on-dark-primary:hover,
.renters-hero__actions .phi-btn--on-dark-primary:focus-visible {
  background-color: #E8C76C;
  border-color: #E8C76C;
  color: #0B1F3A !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(201, 169, 97, 0.26);
  text-decoration: none !important;
}

.renters-hero__actions .phi-btn--on-dark-secondary {
  background-color: rgba(42, 79, 138, 0.36);
  color: #FFFFFF !important;
  border-color: #C9A961;
}

.renters-hero__actions .phi-btn--on-dark-secondary:hover,
.renters-hero__actions .phi-btn--on-dark-secondary:focus-visible {
  background-color: rgba(42, 79, 138, 0.52);
  border-color: #E8C76C;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(201, 169, 97, 0.24);
  text-decoration: none !important;
}

.renters-hero__cta-arrow {
  transition: transform 200ms ease;
  color: currentColor;
}

.renters-hero__actions .phi-btn:hover .renters-hero__cta-arrow,
.renters-hero__actions .phi-btn:focus-visible .renters-hero__cta-arrow {
  transform: translateX(4px);
}

.renters-page .renters-hero .phi-hero-trust {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px clamp(10px, 1.2vw, 16px);
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding-top: 26px;
  border-top: 1px solid rgba(201, 169, 97, 0.36);
}

.renters-page .renters-hero .renters-hero__trust {
  grid-column: 1 / -1;
}

.renters-page .renters-hero .phi-hero-trust__item,
.renters-page .renters-hero a.phi-hero-trust__item,
.renters-page .renters-hero a.phi-hero-trust__item:visited {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--phi-font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: clamp(12.5px, 1.15vw, 14px);
  font-weight: var(--renters-button-weight);
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none !important;
  transition: color 180ms ease, transform 180ms ease;
}

.renters-page .renters-hero a.phi-hero-trust__item:hover,
.renters-page .renters-hero a.phi-hero-trust__item:focus-visible,
.renters-page .renters-hero a.phi-hero-trust__item:active {
  color: #E8C76C !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}

.renters-page .renters-hero .phi-hero-trust__icon,
.renters-page .renters-hero .phi-hero-trust__item svg {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #E8C76C;
}

.renters-page .renters-hero .phi-hero-trust__divider {
  width: 1px;
  height: 16px;
  flex: 0 0 auto;
  background: rgba(201, 169, 97, 0.42);
}

.renters-hero__visual {
  position: relative;
  width: 100%;
  max-width: 560px;
  justify-self: center;
  padding-bottom: 34px;
}

.renters-hero__image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(42, 79, 138, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.renters-hero__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  display: block;
}

.renters-hero__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2A4F8A 0%, #1B3A6B 100%);
}

.renters-hero__image-placeholder-label {
  color: rgba(247, 245, 240, 0.4);
  font-size: 0.875rem;
  text-align: center;
  font-style: italic;
}

.renters-hero__credibility-card {
  position: absolute;
  bottom: 0;
  right: 18px;
  background: #F7F5F0;
  color: #1A1A1A;
  padding: 20px 24px;
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
  max-width: 280px;
  border-top: 3px solid #C9A961;
}

.renters-hero__cred-carrier {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.renters-hero__cred-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #444444;
  margin-bottom: 4px;
}

.renters-hero__cred-carrier-name {
  font-size: 1.25rem;
  font-weight: var(--renters-button-weight);
  color: #1B3A6B;
  letter-spacing: 0;
}

.renters-hero__cred-caption {
  font-size: 0.8125rem;
  color: #444444;
  margin: 0;
  line-height: 1.45;
}


/* ==========================================================================
   SECTION 2 — REALITY FRAMING (LA COST ANCHOR)
   ========================================================================== */
.renters-reality {
  background: #FFFFFF;
}

.renters-reality__header {
  max-width: 920px;
  margin: 0 auto 48px;
  text-align: center;
}

.renters-reality__header .phi-eyebrow {
  color: #1B3A6B;
}

.renters-reality__header .phi-h2 {
  color: #0B1F3A;
  margin: 12px 0 20px;
}

.renters-reality__chart {
  max-width: 1100px;
  margin: 0 auto 40px;
  padding: 32px 28px;
  background: #F7F5F0;
  border-radius: 12px;
  border-left: 4px solid #C9A961;
}

.renters-reality__chart-header {
  margin-bottom: 28px;
}

.renters-reality__chart-header .phi-h3 {
  margin: 0 0 6px;
  color: #0B1F3A;
  font-size: 1.25rem;
}

.renters-reality__chart-header .phi-microcopy {
  color: #444444;
  margin: 0;
  font-size: 0.8125rem;
  font-style: italic;
}

.renters-reality__chart-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.renters-reality__chart-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.renters-reality__chart-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1A1A1A;
  letter-spacing: 0.01em;
}

.renters-reality__chart-bar {
  position: relative;
  height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  width: var(--bar-fill, 70%);
  transition: width 600ms ease;
  min-width: 140px;
}

.renters-reality__chart-bar--la {
  background: linear-gradient(90deg, #1B3A6B 0%, #2A4F8A 100%);
  color: #F7F5F0;
}

.renters-reality__chart-bar--national {
  background: #C9A961;
  color: #0B1F3A;
}

.renters-reality__chart-value {
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}

.renters-reality__chart-caption {
  font-size: 0.9375rem;
  color: #1A1A1A;
  line-height: 1.65;
  margin: 0;
}

.renters-reality__framing {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.renters-reality__bridge {
  font-size: 1.0625rem;
  color: #444444;
  font-style: italic;
  margin: 0;
}


/* ==========================================================================
   SECTION 3 — COVERAGE EDUCATION
   ========================================================================== */
.renters-coverage__header {
  max-width: 920px;
  margin: 0 auto 48px;
  text-align: center;
}

.renters-coverage__header .phi-eyebrow {
  color: #1B3A6B;
}

.renters-coverage__header .phi-h2 {
  color: #0B1F3A;
  margin: 12px 0 20px;
}

.renters-coverage__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 64px;
}

.renters-coverage-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 28px 24px;
  border: 1px solid #EFE9DC;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.renters-coverage-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 31, 58, 0.08);
  border-color: #C9A961;
}

.renters-coverage-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #F2EEE3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #1B3A6B;
}

.renters-coverage-card .phi-h4 {
  color: #0B1F3A;
  margin: 0 0 10px;
  font-size: 1.125rem;
}

.renters-coverage-card .phi-body {
  color: #444444;
  font-size: 0.9375rem;
  margin: 0;
  line-height: 1.6;
}

/* Coverage tabs */
.renters-coverage__tabs {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 32px 24px;
  border: 1px solid #EFE9DC;
  box-shadow: 0 8px 24px rgba(11, 31, 58, 0.05);
}

.renters-coverage__tabs-header {
  margin-bottom: 24px;
}

.renters-coverage__tabs-header .phi-h3 {
  color: #0B1F3A;
  margin: 0 0 8px;
  font-size: 1.375rem;
}

.renters-coverage__tabs-header .phi-body {
  color: #444444;
  margin: 0;
  font-size: 0.9375rem;
}

.renters-coverage__tabs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 2px solid #EFE9DC;
  margin-bottom: 28px;
  padding-bottom: 0;
}

.renters-coverage__tab {
  background: transparent;
  border: none;
  padding: 12px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #444444;
  cursor: pointer;
  position: relative;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 200ms ease, border-color 200ms ease;
  font-family: inherit;
  letter-spacing: 0.01em;
}

.renters-coverage__tab:hover {
  color: #1B3A6B;
  background: transparent !important;
  background-color: transparent !important;
}

.renters-coverage__tab--active,
.renters-coverage__tab[aria-selected="true"] {
  color: #1B3A6B;
  border-bottom-color: #C9A961;
  background: transparent !important;
  background-color: transparent !important;
}

.renters-coverage__tab:focus-visible {
  outline: 2px solid #C9A961;
  outline-offset: 2px;
  border-radius: 4px;
  background: transparent !important;
  background-color: transparent !important;
}

.renters-coverage__tab:active,
.renters-coverage__tab:focus {
  background: transparent !important;
  background-color: transparent !important;
}

.renters-coverage__tab-panel {
  display: none;
  animation: rentersFadeIn 300ms ease;
}

.renters-coverage__tab-panel--active,
.renters-coverage__tab-panel:not([hidden]) {
  display: block;
}

@keyframes rentersFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.renters-coverage__tab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.renters-coverage__tab-block {
  padding: 20px;
  background: #F7F5F0;
  border-radius: 8px;
  border-left: 3px solid #EFE9DC;
}

.renters-coverage__tab-block .phi-h4 {
  color: #0B1F3A;
  margin: 0 0 10px;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.renters-coverage__tab-block .phi-body {
  color: #1A1A1A;
  font-size: 0.9375rem;
  margin: 0;
  line-height: 1.65;
}

.renters-coverage__tab-block--scenario {
  background: #0B1F3A;
  border-left-color: #C9A961;
  border-left-width: 4px;
}

.renters-coverage__tab-block--scenario .phi-h4 {
  color: #C9A961 !important;
  font-weight: 700;
}

.renters-coverage__tab-block--scenario .phi-body {
  color: rgba(247, 245, 240, 0.95) !important;
}

.renters-coverage__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}


/* ==========================================================================
   SECTION 4 — WIND vs. STORM SURGE
   ========================================================================== */
.renters-stormsplit {
  background: #FFFFFF;
}

.renters-stormsplit__header {
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
}

.renters-stormsplit__header .phi-eyebrow {
  color: #1B3A6B;
}

.renters-stormsplit__header .phi-h2 {
  color: #0B1F3A;
  margin: 12px 0 20px;
}

/* Image visual anchor between header and panels grid.
   The wind versus flood split-screen image visualizes the most
   important Louisiana clarification on the page. */
.renters-stormsplit__image-wrap {
  margin: 0 0 36px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(11, 31, 58, 0.18);
  background: #0B1F3A;
}

.renters-stormsplit__image-wrap img {
  width: 100% !important;
  height: auto !important;
  display: block;
  max-width: 100%;
}

@media (min-width: 768px) {
  .renters-stormsplit__image-wrap {
    margin-bottom: 48px;
    border-radius: 14px;
  }
}

@media (min-width: 1024px) {
  .renters-stormsplit__image-wrap {
    margin-bottom: 56px;
    border-radius: 16px;
  }
}

.renters-stormsplit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 36px;
}

.renters-stormsplit__panel {
  padding: 32px 26px;
  border-radius: 14px;
  border: 2px solid;
  position: relative;
}

.renters-stormsplit__panel--covered {
  background: #F0F7F2;
  border-color: #2E7D5B;
}

.renters-stormsplit__panel--notcovered {
  background: #FBF3F1;
  border-color: #8B2C2C;
}

.renters-stormsplit__panel-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.renters-stormsplit__panel-icon--covered {
  background: #2E7D5B;
  color: #F0F7F2;
}

.renters-stormsplit__panel-icon--notcovered {
  background: #8B2C2C;
  color: #FBF3F1;
}

.renters-stormsplit__panel .phi-h3 {
  margin: 0 0 14px;
  font-size: 1.25rem;
  line-height: 1.3;
}

.renters-stormsplit__panel--covered .phi-h3 {
  color: #1A4A33;
}

.renters-stormsplit__panel--notcovered .phi-h3 {
  color: #5C1818;
}

.renters-stormsplit__panel .phi-body {
  color: #1A1A1A;
  margin: 0 0 18px;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.renters-stormsplit__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.renters-stormsplit__list li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: 0.9375rem;
  color: #1A1A1A;
  line-height: 1.5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.renters-stormsplit__list li:last-child {
  border-bottom: none;
}

.renters-stormsplit__panel--covered .renters-stormsplit__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 14px;
  height: 8px;
  border-left: 2px solid #2E7D5B;
  border-bottom: 2px solid #2E7D5B;
  transform: rotate(-45deg);
}

.renters-stormsplit__panel--notcovered .renters-stormsplit__list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 13px;
  width: 12px;
  height: 12px;
  background: none;
  border: none;
}

.renters-stormsplit__panel--notcovered .renters-stormsplit__list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 13px;
  width: 12px;
  height: 12px;
  background-image: linear-gradient(45deg, transparent 44%, #8B2C2C 44%, #8B2C2C 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, #8B2C2C 44%, #8B2C2C 56%, transparent 56%);
}

.renters-stormsplit__nfip {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 16px 18px;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #1A1A1A;
  border-left: 3px solid #C9A961;
}

.renters-stormsplit__binding {
  background: #F7F5F0;
  border-radius: 12px;
  padding: 28px 24px;
  margin-bottom: 36px;
  border-top: 3px solid #C9A961;
}

.renters-stormsplit__binding .phi-h4 {
  color: #0B1F3A;
  margin: 0 0 12px;
  font-size: 1.125rem;
}

.renters-stormsplit__binding .phi-body {
  color: #1A1A1A;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Stormsplit CTA. CSS grid with a fixed center cell guarantees the
   "or" sits dead center between the two buttons regardless of their
   individual widths. The 1fr auto 1fr template makes the left and
   right cells equal, so the auto-width center cell is mathematically
   centered. Mobile collapses to a single column producing a stacked
   button, or, button order with the or centered. */
.renters-stormsplit__cta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

.renters-stormsplit__cta > .phi-btn:first-child {
  justify-self: end;
}

.renters-stormsplit__cta > .phi-btn:last-child {
  justify-self: start;
}

.renters-stormsplit__cta-or {
  justify-self: center;
  text-align: center;
}

.renters-stormsplit__cta-or {
  color: #444444;
  font-size: 0.9375rem;
  font-style: italic;
  margin: 0 8px;
  flex-shrink: 0;
}

/* Stormsplit primary CTA. Rest state inherits foundation. Hover adds
   gold glow ring. */
.renters-stormsplit__cta .phi-btn--primary {
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.renters-stormsplit__cta .phi-btn--primary:hover,
.renters-stormsplit__cta .phi-btn--primary:focus-visible {
  border-color: #C9A961 !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.45),
              0 8px 24px rgba(201, 169, 97, 0.35) !important;
  transform: translateY(-1px);
}

.renters-stormsplit__cta .phi-btn--secondary,
.renters-stormsplit__cta .phi-btn--secondary:link,
.renters-stormsplit__cta .phi-btn--secondary:visited {
  background-color: #FFFFFF !important;
  color: #1B3A6B !important;
  border: 2px solid #C9A961 !important;
  text-decoration: none !important;
  font-weight: 600;
}

.renters-stormsplit__cta .phi-btn--secondary:hover,
.renters-stormsplit__cta .phi-btn--secondary:focus-visible {
  background-color: #C9A961 !important;
  color: #0B1F3A !important;
  border-color: #C9A961 !important;
  text-decoration: none !important;
}


/* ==========================================================================
   SECTION 5 — COST IN LOUISIANA (with ZIP widget)
   ========================================================================== */
.renters-cost__header {
  max-width: 920px;
  margin: 0 auto 40px;
  text-align: center;
}

.renters-cost__header .phi-eyebrow {
  color: #1B3A6B;
}

.renters-cost__header .phi-h2 {
  color: #0B1F3A;
  margin: 12px 0 20px;
}

/* ZIP lookup widget */
.renters-cost__zip-widget {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 32px 26px;
  margin: 0 auto 48px;
  max-width: 1000px;
  box-shadow: 0 12px 32px rgba(11, 31, 58, 0.08);
  border-top: 4px solid #C9A961;
}

.renters-cost__zip-header {
  text-align: center;
  margin-bottom: 24px;
}

.renters-cost__zip-header .phi-h3 {
  color: #0B1F3A;
  margin: 0 0 8px;
  font-size: 1.375rem;
}

.renters-cost__zip-header .phi-body {
  color: #444444;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.renters-cost__zip-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.renters-cost__zip-input {
  width: 100%;
  padding: 14px 18px;
  font-size: 1.0625rem;
  border: 2px solid #EFE9DC;
  border-radius: 8px;
  background: #F7F5F0;
  color: #1A1A1A;
  font-family: inherit;
  letter-spacing: 0.04em;
  transition: border-color 200ms ease, background 200ms ease;
}

.renters-cost__zip-input::placeholder {
  color: #888888;
  letter-spacing: 0;
}

.renters-cost__zip-input:focus {
  outline: none;
  border-color: #C9A961;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}

.renters-cost__zip-submit {
  width: 100%;
  padding: 14px 24px;
  font-size: 1rem;
  background: #1B3A6B;
  color: #F7F5F0;
  border: 2px solid #1B3A6B;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 100ms ease;
}

.renters-cost__zip-submit:hover {
  background: #0B1F3A;
  border-color: #0B1F3A;
}

.renters-cost__zip-submit:active {
  transform: translateY(1px);
}

.renters-cost__zip-result {
  background: #F7F5F0;
  border-radius: 10px;
  padding: 22px 20px;
  margin-bottom: 16px;
  border-left: 4px solid #1B3A6B;
  animation: rentersFadeIn 350ms ease;
}

.renters-cost__zip-result[hidden] {
  display: none;
}

.renters-cost__zip-result-zip {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #444444;
  margin: 0 0 4px;
}

.renters-cost__zip-result-location {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0B1F3A;
  margin: 0 0 16px;
}

.renters-cost__zip-result-range {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #FFFFFF;
  border-radius: 8px;
}

.renters-cost__zip-result-range-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #444444;
}

.renters-cost__zip-result-range-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1B3A6B;
  letter-spacing: -0.01em;
}

.renters-cost__zip-result-descriptor {
  font-size: 0.9375rem;
  color: #1A1A1A;
  line-height: 1.6;
  margin: 0 0 16px;
}

.renters-cost__zip-result-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #C9A961;
  color: #0B1F3A;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background 200ms ease, transform 100ms ease;
}

.renters-cost__zip-result-cta:hover {
  background: #E8C76C;
  color: #0B1F3A;
}

.renters-cost__zip-result-error {
  color: #5C1818;
  font-size: 0.9375rem;
  margin: 0;
  padding: 8px 0;
}

.renters-cost__zip-methodology {
  font-size: 0.8125rem;
  color: #444444;
  line-height: 1.55;
  margin: 0;
  font-style: italic;
  text-align: center;
}

.renters-cost__factors {
  max-width: 1100px;
  margin: 0 auto 48px;
}

.renters-cost__factors .phi-h3 {
  color: #0B1F3A;
  margin: 0 0 20px;
  text-align: center;
  font-size: 1.25rem;
}

.renters-cost__factor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.renters-cost__factor-list li {
  background: #FFFFFF;
  padding: 16px 18px;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: #1A1A1A;
  line-height: 1.55;
  border-left: 3px solid #C9A961;
}

.renters-cost__factor-list strong {
  color: #0B1F3A;
  font-weight: 700;
}

/* Cost table wrap. max-width: 100% plus overflow-x: auto means a
   wide multi-column table scrolls inside this container instead of
   forcing intrinsic width and breaking the page margin. The branded
   deep navy scrollbar is defined here and applies at all sizes; on
   desktop the table fits so the bar does not appear, on mobile the
   table exceeds the viewport so the scroller engages. */
.renters-cost__table-wrap {
  max-width: 1100px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #0B1F3A #F2EEE3;
  scrollbar-width: thin;
}

.renters-cost__table-wrap::-webkit-scrollbar {
  height: 8px;
}

.renters-cost__table-wrap::-webkit-scrollbar-track {
  background: #F2EEE3;
  border-radius: 4px;
}

.renters-cost__table-wrap::-webkit-scrollbar-thumb {
  background: #0B1F3A;
  border-radius: 4px;
}

.renters-cost__table-wrap::-webkit-scrollbar-thumb:hover {
  background: #1B3A6B;
}

.renters-cost__table-wrap .phi-h3 {
  color: #0B1F3A;
  margin: 0 0 8px;
  text-align: center;
  font-size: 1.25rem;
}

.renters-cost__table-intro {
  text-align: center;
  font-size: 0.9375rem;
  color: #444444;
  margin: 0 0 20px;
  line-height: 1.55;
}

.renters-cost__table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: #FFFFFF;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(11, 31, 58, 0.06);
  font-size: 0.9375rem;
}

.renters-cost__table thead {
  background: #1B3A6B;
  color: #F7F5F0;
}

.renters-cost__table th {
  text-align: left;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.renters-cost__table td {
  padding: 14px 16px;
  border-bottom: 1px solid #EFE9DC;
  color: #1A1A1A;
  vertical-align: top;
}

.renters-cost__table tbody tr:nth-child(even) {
  background: #F7F5F0;
}

.renters-cost__table tbody tr:last-child td {
  border-bottom: none;
}

.renters-cost__table td:first-child {
  font-weight: 600;
  color: #0B1F3A;
}

.renters-cost__table-note {
  font-size: 0.8125rem;
  color: #444444;
  font-style: italic;
  margin: 16px 0 0;
  text-align: center;
}


/* ==========================================================================
   SECTION 6 — BUNDLE EDUCATION
   ========================================================================== */
.renters-bundle__header {
  max-width: 780px;
  margin: 0 auto 40px;
  text-align: center;
}

.renters-bundle__header .phi-eyebrow {
  color: #1B3A6B;
}

.renters-bundle__header .phi-h2 {
  color: #0B1F3A;
  margin: 12px 0 20px;
}

.renters-bundle__math {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 40px;
}

.renters-bundle__math-card {
  background: #F2EEE3;
  border-radius: 12px;
  padding: 28px 22px;
  text-align: center;
  border-top: 3px solid #C9A961;
  transition: transform 250ms ease;
}

.renters-bundle__math-card:hover {
  transform: translateY(-3px);
}

.renters-bundle__math-value {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1B3A6B;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.renters-bundle__math-label {
  display: block;
  font-size: 0.875rem;
  color: #1A1A1A;
  line-height: 1.45;
}

.renters-bundle__explainer {
  max-width: 760px;
  margin: 0 auto 40px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 28px 26px;
  border-left: 4px solid #1B3A6B;
}

.renters-bundle__explainer .phi-h3 {
  color: #0B1F3A;
  margin: 0 0 14px;
  font-size: 1.25rem;
}

.renters-bundle__explainer .phi-body {
  margin: 0;
  color: #1A1A1A;
  line-height: 1.7;
}

.renters-bundle__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Bundle secondary CTA (Start with an auto quote). White at rest with
   a 2px gold border, navy text. On hover, the button fills with gold
   and the text shifts to navy-deep for contrast. */
.renters-bundle__cta .phi-btn--secondary,
.renters-bundle__cta .phi-btn--secondary:link,
.renters-bundle__cta .phi-btn--secondary:visited {
  background-color: #FFFFFF !important;
  color: #1B3A6B !important;
  border: 2px solid #C9A961 !important;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.renters-bundle__cta .phi-btn--secondary:hover,
.renters-bundle__cta .phi-btn--secondary:focus-visible {
  background-color: #C9A961 !important;
  color: #0B1F3A !important;
  border-color: #C9A961 !important;
}

/* Bundle primary CTA. Rest state inherits foundation. Hover adds the
   canonical gold glow ring. */
.renters-bundle__cta .phi-btn--primary {
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.renters-bundle__cta .phi-btn--primary:hover,
.renters-bundle__cta .phi-btn--primary:focus-visible {
  border-color: #C9A961 !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.45),
              0 8px 24px rgba(201, 169, 97, 0.35) !important;
  transform: translateY(-1px);
}

.renters-bundle__cta-note {
  font-size: 0.8125rem;
  color: #444444;
  font-style: italic;
  margin: 12px 0 0;
  max-width: 520px;
  text-align: center;
  line-height: 1.55;
}


/* ==========================================================================
   SECTION 7 — MYTH DESTRUCTION
   ========================================================================== */
.renters-myths__header {
  max-width: 920px;
  margin: 0 auto 40px;
  text-align: center;
}

.renters-myths__header .phi-eyebrow {
  color: #1B3A6B;
}

.renters-myths__header .phi-h2 {
  color: #0B1F3A;
  margin: 12px 0 20px;
}

.renters-myths__list {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.renters-myth {
  background: #FFFFFF;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #EFE9DC;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.renters-myth[open] {
  border-color: #C9A961;
  box-shadow: 0 8px 24px rgba(11, 31, 58, 0.06);
}

.renters-myth__summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 150ms ease;
}

.renters-myth__summary::-webkit-details-marker {
  display: none;
}

.renters-myth__summary:hover {
  background: #F7F5F0;
}

.renters-myth__summary:focus-visible {
  outline: 2px solid #C9A961;
  outline-offset: -2px;
}

.renters-myth__number {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #C9A961;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  background: #F2EEE3;
  padding: 4px 8px;
  border-radius: 4px;
}

.renters-myth__title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  color: #0B1F3A;
  line-height: 1.45;
}

.renters-myth__icon {
  flex-shrink: 0;
  color: #1B3A6B;
  transition: transform 250ms ease;
}

.renters-myth[open] .renters-myth__icon {
  transform: rotate(180deg);
}

.renters-myth__content {
  padding: 0 22px 22px 22px;
  border-top: 1px solid #EFE9DC;
  padding-top: 18px;
  margin-top: 0;
  animation: rentersFadeIn 300ms ease;
}

.renters-myth__truth-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #C9A961;
  font-weight: 700;
  margin: 0 0 8px;
}

.renters-myth__content .phi-body {
  color: #1A1A1A;
  margin: 0;
  line-height: 1.7;
  font-size: 0.9375rem;
}


/* ==========================================================================
   SECTION 8 — DISCOUNT STACK
   ========================================================================== */
.renters-discounts__header {
  max-width: 920px;
  margin: 0 auto 40px;
  text-align: center;
}

.renters-discounts__header .phi-eyebrow {
  color: #1B3A6B;
}

.renters-discounts__header .phi-h2 {
  color: #0B1F3A;
  margin: 12px 0 20px;
}

.renters-discounts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 40px;
}

.renters-discount-tile {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 22px 20px;
  border: 1px solid #EFE9DC;
  transition: transform 250ms ease, border-color 250ms ease;
  position: relative;
}

.renters-discount-tile:hover {
  transform: translateY(-2px);
  border-color: #C9A961;
}

.renters-discount-tile--featured {
  background: #1B3A6B;
  border-color: #1B3A6B;
  color: #F7F5F0;
}

.renters-discount-tile--featured:hover {
  border-color: #C9A961;
}

.renters-discount-tile__badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: #C9A961;
  color: #0B1F3A;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.renters-discount-tile .phi-h4 {
  margin: 0 0 8px;
  color: #0B1F3A;
  font-size: 1rem;
}

.renters-discount-tile--featured .phi-h4 {
  color: #C9A961 !important;
}

.renters-discount-tile .phi-microcopy {
  font-size: 0.875rem;
  color: #444444;
  margin: 0;
  line-height: 1.55;
}

.renters-discount-tile--featured .phi-microcopy {
  color: rgba(247, 245, 240, 0.92) !important;
}

.renters-discounts__cta {
  display: flex;
  justify-content: center;
}


/* ==========================================================================
   SECTION 9 — CLAIMS PROCESS
   ========================================================================== */
.renters-claims__header {
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
}

.renters-claims__header .phi-eyebrow {
  color: #1B3A6B;
}

.renters-claims__header .phi-h2 {
  color: #0B1F3A;
  margin: 12px 0 20px;
}

.renters-claims__steps {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.renters-claims-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 24px 22px;
  border-left: 4px solid #C9A961;
}

.renters-claims-step__number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1B3A6B;
  color: #C9A961;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  flex-shrink: 0;
  border: 2px solid #C9A961;
}

.renters-claims-step__content .phi-h3 {
  color: #0B1F3A;
  margin: 0 0 8px;
  font-size: 1.125rem;
}

.renters-claims-step__content .phi-body {
  color: #1A1A1A;
  margin: 0;
  line-height: 1.65;
  font-size: 0.9375rem;
}


/* ==========================================================================
   SECTION 10 — TRUST & CREDENTIALS
   ========================================================================== */
.renters-trust__header {
  max-width: 780px;
  margin: 0 auto 40px;
  text-align: center;
}

.renters-trust__header .phi-eyebrow {
  color: #1B3A6B;
}

.renters-trust__header .phi-h2 {
  color: #0B1F3A;
  margin: 12px 0 0;
}

.renters-trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 40px;
}

.renters-trust-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  border: 1px solid #EFE9DC;
  border-top: 3px solid #C9A961;
  transition: transform 250ms ease;
}

.renters-trust-card:hover {
  transform: translateY(-2px);
}

.renters-trust-card__metric {
  font-size: 2rem;
  font-weight: 700;
  color: #1B3A6B;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.renters-trust-card__label {
  font-size: 0.875rem;
  color: #0B1F3A;
  font-weight: 600;
  margin: 0 0 6px;
  line-height: 1.4;
}

.renters-trust-card__verify {
  font-size: 0.8125rem;
  color: #444444;
  margin: 0;
  line-height: 1.4;
  font-style: italic;
}

.renters-trust-card__verify a {
  color: #1B3A6B;
}

.renters-trust__statement {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: #F2EEE3;
  border-radius: 10px;
  padding: 24px 22px;
  border-top: 2px solid #C9A961;
}

.renters-trust__statement .phi-body {
  color: #1A1A1A;
  margin: 0;
  line-height: 1.7;
  font-size: 0.9375rem;
}


/* ==========================================================================
   SECTION 11 — FAQ
   ========================================================================== */
.renters-faq__header {
  max-width: 780px;
  margin: 0 auto 40px;
  text-align: center;
}

.renters-faq__header .phi-eyebrow {
  color: #1B3A6B;
}

.renters-faq__header .phi-h2 {
  color: #0B1F3A;
  margin: 12px 0 0;
}

.renters-faq__group {
  max-width: 1100px;
  margin: 0 auto 32px;
}

.renters-faq__group:last-of-type {
  margin-bottom: 40px;
}

.renters-faq__group .phi-h3 {
  color: #0B1F3A;
  margin: 0 0 16px;
  font-size: 1.125rem;
  padding-bottom: 8px;
  border-bottom: 2px solid #C9A961;
  display: inline-block;
}

.renters-faq__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.renters-faq-item {
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #EFE9DC;
  transition: border-color 200ms ease;
}

.renters-faq-item[open] {
  border-color: #C9A961;
}

.renters-faq-item__summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 150ms ease;
}

.renters-faq-item__summary::-webkit-details-marker {
  display: none;
}

.renters-faq-item__summary:hover {
  background: #F7F5F0;
}

.renters-faq-item__summary:focus-visible {
  outline: 2px solid #C9A961;
  outline-offset: -2px;
}

.renters-faq-item__question {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0B1F3A;
  line-height: 1.5;
}

.renters-faq-item__icon {
  flex-shrink: 0;
  color: #1B3A6B;
  transition: transform 250ms ease;
}

.renters-faq-item[open] .renters-faq-item__icon {
  transform: rotate(180deg);
}

.renters-faq-item__answer {
  padding: 0 18px 18px;
  border-top: 1px solid #EFE9DC;
  padding-top: 14px;
  animation: rentersFadeIn 300ms ease;
}

.renters-faq-item__answer .phi-body {
  color: #1A1A1A;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.renters-faq__cta {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 28px 20px;
  background: #FFFFFF;
  border-radius: 10px;
  border-top: 3px solid #C9A961;
}

.renters-faq__cta .phi-body {
  color: #1A1A1A;
  margin: 0 0 14px;
  font-size: 0.9375rem;
}


/* ==========================================================================
   SECTION 12 — CLOSING INVITATION
   ========================================================================== */
.renters-invitation {
  background: #0B1F3A;
  color: #F7F5F0;
  position: relative;
  overflow: hidden;
}

.renters-invitation::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #C9A961;
}

.renters-invitation__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.renters-invitation__eyebrow {
  color: #C9A961 !important;
}

.renters-page .renters-invitation .renters-invitation__inner .phi-h2 {
  color: #F7F5F0 !important;
  margin: 12px 0 24px !important;
  letter-spacing: -0.01em;
}

.renters-page .renters-invitation .renters-invitation__lede {
  font-size: 1.0625rem !important;
  color: rgba(247, 245, 240, 0.9) !important;
  line-height: 1.7 !important;
  margin: 0 0 32px !important;
}

.renters-invitation__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

/* Pre-footer primary CTA. Rest state inherits foundation. Only hover
   adds the gold glow ring. Pattern locked to car-invitation primary. */
.renters-invitation__actions .phi-btn--primary {
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.renters-invitation__actions .phi-btn--primary:hover,
.renters-invitation__actions .phi-btn--primary:focus-visible {
  border-color: #C9A961 !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.45),
              0 8px 24px rgba(201, 169, 97, 0.35) !important;
  transform: translateY(-1px);
}

/* Pre-footer secondary CTA (Call button). Transparent at rest with a
   2px gold border and white text. On hover, the button fills with gold
   and the text flips to navy-deep. Pattern locked to car-invitation
   secondary, also matches Kevin's described pre-footer call button
   treatment. */
.renters-invitation__actions .phi-btn--secondary,
.renters-invitation__actions .phi-btn--secondary:link,
.renters-invitation__actions .phi-btn--secondary:visited {
  background-color: transparent !important;
  color: #F7F5F0 !important;
  border: 2px solid #C9A961 !important;
  font-weight: 600;
}

.renters-invitation__actions .phi-btn--secondary:hover,
.renters-invitation__actions .phi-btn--secondary:focus-visible {
  background-color: #C9A961 !important;
  color: #0B1F3A !important;
  border-color: #C9A961 !important;
}

.renters-invitation__actions .phi-btn--secondary svg {
  color: currentColor;
}

.renters-invitation__hours {
  font-size: 0.875rem;
  color: rgba(247, 245, 240, 0.7);
  margin: 0 0 28px;
  line-height: 1.55;
}

.renters-invitation__hours strong {
  color: rgba(247, 245, 240, 0.88);
}

.renters-invitation__signature {
  border-top: 1px solid rgba(247, 245, 240, 0.15);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.renters-invitation__signature-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #C9A961 !important;
  letter-spacing: 0.02em;
}

.renters-invitation__signature-tagline {
  font-size: 0.9375rem;
  color: #C9A961 !important;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Feature image at the top of the closing invitation section.
   Anchors the emotional close with local Louisiana imagery. The image
   wrap sits as a sibling above the inner text block, with a wider
   max-width than the 720px inner block for visual presence. */
.renters-invitation__image-wrap {
  max-width: 880px;
  margin: 0 auto 40px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.renters-invitation__image-wrap img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 50%;
  display: block;
}

@media (min-width: 768px) {
  .renters-invitation__image-wrap {
    aspect-ratio: 21 / 9;
    margin: 0 auto 48px;
    border-radius: 14px;
  }
}

@media (min-width: 1024px) {
  .renters-invitation__image-wrap {
    aspect-ratio: 24 / 9;
    max-width: 960px;
    margin: 0 auto 56px;
    border-radius: 16px;
  }
}


/* ==========================================================================
   MOBILE OVERRIDES (max-width 767px)
   Hero text constrained to viewport, image proportions adjusted, trust row
   stacks vertically. Defeats foundation rules that produce desktop-sized
   typography on narrow viewports.
   ========================================================================== */
@media (max-width: 767px) {
  .renters-hero {
    padding: 42px 0 50px;
  }

  .renters-hero__content .phi-h1 {
    font-size: var(--phi-hero-h1-size-mobile, clamp(34px, 10vw, 46px)) !important;
    line-height: var(--phi-hero-h1-line-height, 1.08) !important;
    letter-spacing: 0 !important;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .renters-hero__content .phi-lede {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .renters-hero__highlight {
    display: inline;
    font-size: inherit !important;
  }

  .renters-hero__actions {
    gap: 12px;
    margin-top: 26px;
  }

  .renters-hero__actions .phi-btn {
    width: 100%;
    justify-content: center;
  }

  .renters-hero__visual {
    max-width: 100%;
    padding-bottom: 0;
  }

  .renters-hero__image-wrap {
    aspect-ratio: 4 / 3;
    max-width: 100%;
  }

  .renters-hero__credibility-card {
    position: static;
    margin-top: 16px;
    width: 100%;
  }

  .renters-page .renters-hero .phi-hero-trust {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 0;
    padding-top: 22px;
    text-align: center;
  }

  .renters-page .renters-hero .phi-hero-trust__item,
  .renters-page .renters-hero a.phi-hero-trust__item,
  .renters-page .renters-hero a.phi-hero-trust__item:visited {
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  /* Mobile coverage tabs: single-column vertical stack. The 2x2 grid
     broke the page margin because labels like "Medical Payments" cannot
     compress into a half-width cell. A full-width single column has no
     horizontal overflow path, which permanently eliminates the margin
     break. Font is reduced and labels are allowed to sit on one line
     each at full width. */
  .renters-coverage__tabs-strip {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    border-bottom: none;
    width: 100%;
    max-width: 100%;
  }

  .renters-coverage__tab {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.875rem;
    border: 1px solid #EFE9DC;
    border-left: 3px solid #EFE9DC;
    border-radius: 6px;
    margin-bottom: 0;
    padding: 13px 10px;
    white-space: normal;
    box-sizing: border-box;
  }

  .renters-coverage__tab--active,
  .renters-coverage__tab[aria-selected="true"] {
    border-color: #C9A961;
    border-left-color: #C9A961;
    background: #F7F5F0;
  }

  /* Mobile stormsplit: collapse grid to a single column so the
     stacked order is button, or, button with the or centered. */
  .renters-stormsplit__cta {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .renters-stormsplit__cta > .phi-btn:first-child,
  .renters-stormsplit__cta > .phi-btn:last-child {
    justify-self: stretch;
  }

  .renters-stormsplit__cta-or {
    justify-self: center;
    text-align: center;
    margin: 0;
  }

  .renters-stormsplit__cta .phi-btn--primary,
  .renters-stormsplit__cta .phi-btn--secondary,
  .renters-stormsplit__cta .phi-btn--ghost {
    width: 100%;
    justify-content: center;
  }

  .renters-page .renters-hero .phi-hero-trust__divider {
    display: none !important;
  }

  /* Mobile cost table: height-constrained scroll pane. The wrap
     becomes its own scroll region capped at 62vh, so the horizontal
     scrollbar is pinned at the bottom edge of the visible pane and is
     reachable from any row without scrolling to the bottom of the full
     table. overscroll-behavior: contain prevents the inner scroll from
     chaining to the page. This is the sticky-scrollbar behavior Kevin
     confirmed he wants. The branded deep navy scrollbar styling is
     already defined on the base .renters-cost__table-wrap rule and
     applies here unchanged. */
  .renters-cost__table-wrap {
    max-width: 100%;
    max-height: 62vh;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #E4DEC9;
    border-radius: 10px;
  }

  /* Header row sticks to the top of the scroll pane so the column
     labels stay visible while the user scrolls the table body. This
     pairs with the pinned horizontal scrollbar for a coherent data
     table experience on mobile. */
  .renters-cost__table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  /* Defensive backstop: no descendant of the cost section may break
     the horizontal page margin on mobile. */
  .renters-cost {
    overflow-x: hidden;
  }
}


/* ==========================================================================
   TABLET BREAKPOINT (768px and up)
   ========================================================================== */
@media (min-width: 768px) {
  .renters-hero {
    padding: 72px 0 74px;
  }

  .renters-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.82fr);
    gap: 44px;
  }

  .renters-page .renters-hero .renters-hero__trust {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .renters-coverage__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .renters-coverage__tab-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .renters-stormsplit__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .renters-stormsplit__cta {
    gap: 16px;
  }

  .renters-cost__zip-form {
    flex-direction: row;
    align-items: stretch;
  }

  .renters-cost__zip-input {
    flex: 1;
  }

  .renters-cost__zip-submit {
    width: auto;
    padding: 14px 28px;
  }

  .renters-bundle__math {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .renters-bundle__cta {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .renters-discounts__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .renters-trust__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .renters-invitation__actions {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
}


@media (min-width: 768px) and (max-width: 900px) {
  .renters-page .renters-hero .renters-hero__trust {
    gap: 8px;
  }

  .renters-page .renters-hero .renters-hero__trust .phi-hero-trust__item,
  .renters-page .renters-hero .renters-hero__trust a.phi-hero-trust__item,
  .renters-page .renters-hero .renters-hero__trust a.phi-hero-trust__item:visited {
    gap: 6px;
    font-size: 11.75px;
  }

  .renters-page .renters-hero .renters-hero__trust .phi-hero-trust__icon,
  .renters-page .renters-hero .renters-hero__trust .phi-hero-trust__item svg {
    width: 15px;
    height: 15px;
  }
}


/* ==========================================================================
   DESKTOP BREAKPOINT (1024px and up)
   ========================================================================== */
@media (min-width: 1024px) {
  .renters-hero__content .phi-h1 {
    font-size: var(--phi-hero-h1-size, clamp(32px, 4.1vw, 52px));
  }

  .renters-coverage__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .renters-coverage__tabs {
    padding: 40px 36px;
  }

  .renters-coverage__tab-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .renters-coverage__tab-block .phi-body {
    font-size: 0.875rem;
  }

  .renters-discounts__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .renters-trust__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .renters-page *,
  .renters-page *::before,
  .renters-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
  .renters-hero,
  .renters-invitation {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
  }

  .renters-hero__content .phi-h1,
  .renters-hero__content .phi-lede,
  .renters-invitation__inner .phi-h2,
  .renters-invitation__lede {
    color: #1A1A1A !important;
  }

  .renters-cost__zip-widget,
  .renters-coverage__tabs,
  .renters-myth,
  .renters-faq-item {
    box-shadow: none !important;
    border: 1px solid #CCCCCC !important;
  }

  .renters-coverage__tab-panel {
    display: block !important;
    page-break-inside: avoid;
  }
}