/* =========================================================
   RENEWAL HUB — add-on component styles
   Namespaced under .rnw-* so they never collide with the
   base theme. Relies on the theme's :root design tokens.
   ========================================================= */

/* --- Path / choice cards (Personal vs Commercial) --- */
.rnw-paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.rnw-path-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-10);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
}
.rnw-path-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: transparent; }
.rnw-path-card .rnw-path-icon { font-size: 2rem; margin-bottom: var(--space-4); }
.rnw-path-card h3 { font-size: var(--size-2xl); margin-bottom: var(--space-3); }
.rnw-path-card p { color: var(--color-muted); margin-bottom: var(--space-6); flex-grow: 1; }
.rnw-path-card .btn { align-self: flex-start; }

/* --- Coverage list --- */
.rnw-coverage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.rnw-coverage-item {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.rnw-coverage-item h4 { font-family: var(--font-body); font-size: var(--size-md); font-weight: 600; margin-bottom: var(--space-2); }
.rnw-coverage-item p { font-size: var(--size-sm); color: var(--color-muted); margin: 0; }

/* --- Process timeline --- */
.rnw-timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: var(--space-8);
}
.rnw-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--color-border);
}
.rnw-step { position: relative; padding-bottom: var(--space-10); }
.rnw-step:last-child { padding-bottom: 0; }
.rnw-step::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-8));
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent-alt);
  box-shadow: 0 0 0 4px var(--color-bg);
}
.rnw-step-when {
  display: inline-block;
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.rnw-step h3 { font-size: var(--size-xl); margin-bottom: var(--space-2); }
.rnw-step p { color: var(--color-muted); margin: 0; }

/* --- FAQ accordion (native details/summary, no JS) --- */
.rnw-faq { max-width: 760px; margin: 0 auto; }
.rnw-faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.rnw-faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.rnw-faq summary::-webkit-details-marker { display: none; }
.rnw-faq summary::after {
  content: '+';
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-muted);
  transition: transform var(--transition);
}
.rnw-faq details[open] summary::after { content: '\2013'; }
.rnw-faq .rnw-faq-body { padding: 0 var(--space-6) var(--space-5); color: var(--color-muted); line-height: 1.7; }

/* --- Intake form --- */
.rnw-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.rnw-form-grid .form-group.full { grid-column: 1 / -1; }
.rnw-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.rnw-fieldset legend {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: 700;
  padding: 0 var(--space-2);
}
.rnw-checks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-2); }
.rnw-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.rnw-check:hover { border-color: var(--color-text); }
.rnw-check input { margin-top: 3px; flex-shrink: 0; }
.rnw-check span { font-size: var(--size-sm); }
.rnw-radio-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.rnw-radio-row .rnw-check { flex: 1; min-width: 140px; }

/* --- Notice / callout box --- */
.rnw-notice {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: #FBF7EE;
  border: 1px solid var(--color-accent-alt);
  border-radius: var(--radius-md);
  margin: var(--space-6) 0;
}
.rnw-notice .rnw-notice-icon { font-size: 1.25rem; flex-shrink: 0; }
.rnw-notice p { margin: 0; font-size: var(--size-sm); line-height: 1.6; }
.rnw-notice strong { color: var(--color-text); }

/* --- Form status messages --- */
.rnw-form-status { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-size: var(--size-sm); display: none; }
.rnw-form-status.is-error   { display: block; background: #FDECEA; border: 1px solid #E8B4AD; color: #8A2C28; }
.rnw-form-status.is-success { display: block; background: #ECF6EE; border: 1px solid #AcD3B4; color: #1F5C32; }

/* --- Contact methods --- */
.rnw-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.rnw-contact-card {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.rnw-contact-card .rnw-contact-icon { font-size: 1.75rem; margin-bottom: var(--space-3); }
.rnw-contact-card .rnw-contact-label { font-size: var(--size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-bottom: var(--space-2); }
.rnw-contact-card a, .rnw-contact-card p { font-size: var(--size-lg); color: var(--color-text); font-weight: 500; }

/* --- Step strip (mini how-it-works) --- */
.rnw-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.rnw-strip-item { text-align: center; }
.rnw-strip-num {
  width: 44px; height: 44px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-text); color: var(--color-bg);
  font-family: var(--font-display); font-weight: 700;
}
.rnw-strip-item h4 { font-family: var(--font-body); font-size: var(--size-md); margin-bottom: var(--space-1); }
.rnw-strip-item p { font-size: var(--size-sm); color: var(--color-muted); margin: 0; }

/* --- Honeypot (spam trap) --- */
.rnw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .rnw-paths { grid-template-columns: 1fr; }
  .rnw-coverage { grid-template-columns: repeat(2, 1fr); }
  .rnw-contact-grid { grid-template-columns: 1fr; }
  .rnw-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}
@media (max-width: 768px) {
  .rnw-coverage { grid-template-columns: 1fr; }
  .rnw-form-grid { grid-template-columns: 1fr; }
  .rnw-checks { grid-template-columns: 1fr; }
}

/* --- FAQ rich answer content (lists, sub-headings) --- */
.rnw-faq-body p { margin-bottom: var(--space-3); }
.rnw-faq-body p:last-child { margin-bottom: 0; }
.rnw-faq-body ul { margin: var(--space-2) 0 var(--space-4); padding-left: var(--space-6); }
.rnw-faq-body li { margin-bottom: var(--space-1); list-style: disc; }
.rnw-faq-subhead { font-weight: 600; color: var(--color-text); margin: var(--space-4) 0 var(--space-1); }
.rnw-faq-body a { color: var(--color-cta); text-decoration: underline; }

/* --- Footer contact + disclaimer --- */
.footer-links span { font-size: var(--size-sm); color: rgba(250,250,248,0.5); }
.footer-links .footer-phone { color: var(--color-bg); font-weight: 600; font-size: var(--size-md); }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.footer-disclaimer { max-width: 90ch; line-height: 1.6; color: rgba(250,250,248,0.3); }
@media (max-width: 1024px) { .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
@media (max-width: 600px)  { .footer-top { grid-template-columns: 1fr; } }

/* --- Resources page --- */
.rnw-textlink { color: var(--color-cta); font-weight: 600; font-size: var(--size-sm); margin-top: var(--space-3); display: inline-block; }
.rnw-empty { text-align: center; padding: var(--space-12) var(--space-6); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); color: var(--color-muted); }

/* --- Resources page: tighter vertical rhythm --- */
.rnw-resources .hero { padding-top: var(--space-10); padding-bottom: var(--space-6); }
.rnw-resources .section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.rnw-resources .text-center { margin-bottom: var(--space-4); }
.rnw-resources .hero-desc { margin-bottom: 0; }
.rnw-resources .section-label { margin-bottom: var(--space-1); }
.rnw-resources .section-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0; }

/* --- Renewal hub hero: two-column split with client info pane --- */
.hero-inner--split {
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
  gap: var(--space-12);
}
.hero-inner--split .hero-content { max-width: 640px; }

.hero-aside {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.hero-aside-head { margin-bottom: var(--space-6); }
.hero-aside-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--size-xs); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.hero-aside-eyebrow::before {
  content: ''; display: block; width: 24px; height: 1px; background: var(--color-accent-alt);
}
.hero-aside-title { font-size: var(--size-2xl); margin: 0; }

.hero-aside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.hero-aside-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.hero-aside-icon {
  flex: 0 0 auto; font-size: 1.25rem; line-height: 1;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.hero-aside-item h3 { font-family: var(--font-body); font-size: var(--size-md); font-weight: 600; margin: 0 0 var(--space-1); }
.hero-aside-item p { font-size: var(--size-sm); color: var(--color-muted); margin: 0; line-height: 1.6; }

.hero-aside-foot {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
}
.hero-aside-foot span { font-size: var(--size-sm); color: var(--color-muted); }
.hero-aside-foot a { font-size: var(--size-lg); font-weight: 600; color: var(--color-accent); }

@media (max-width: 900px) {
  .hero-inner--split { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero-inner--split .hero-content { max-width: none; }
}

/* --- Anchor offset so #choose clears the sticky header --- */
#choose { scroll-margin-top: 90px; }

/* --- Hero aside: resources link list --- */
.hero-aside-links { list-style: none; margin: 0; padding: 0; }
.hero-aside-links li { border-top: 1px solid var(--color-border); }
.hero-aside-links li:first-child { border-top: 0; }
.hero-aside-links a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0; text-decoration: none;
}
.hero-aside-link-title { font-size: var(--size-md); font-weight: 500; color: var(--color-text); line-height: 1.4; }
.hero-aside-link-meta { flex: 0 0 auto; font-size: var(--size-xs); color: var(--color-muted); }
.hero-aside-links a:hover .hero-aside-link-title { color: var(--color-accent); }
.hero-aside .hero-aside-foot { justify-content: flex-start; }

/* --- Full-width info band below the two hero columns --- */
.hero-info-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.hero-info-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.hero-info-icon {
  flex: 0 0 auto; font-size: 1.1rem; line-height: 1;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.hero-info-item h3 { font-family: var(--font-body); font-size: var(--size-md); font-weight: 600; margin: 0 0 var(--space-1); }
.hero-info-item p { font-size: var(--size-sm); color: var(--color-muted); margin: 0; line-height: 1.55; }
.hero-info-item p a { color: var(--color-accent); font-weight: 600; }

@media (max-width: 900px) {
  .hero-info-band { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-8); margin-top: var(--space-10); }
}
@media (max-width: 520px) {
  .hero-info-band { grid-template-columns: 1fr; }
}

/* --- Hero aside in "resources" mode: drop the panel chrome so the
   [resources] plugin's own cards render cleanly (no card-in-card). --- */
.hero-aside--resources {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.hero-aside-resources { margin-top: 0; }
/* Keep the plugin grid to a single column inside the narrow sidebar,
   regardless of the columns attribute, and tighten spacing. */
.hero-aside-resources .posts-grid,
.hero-aside-resources [class*="grid"],
.hero-aside-resources [class*="columns"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--space-3) !important;
}
/* Make the article cards / summaries smaller and more compact. */
.hero-aside-resources [class*="card"] { padding: var(--space-4) !important; }
.hero-aside-resources h2,
.hero-aside-resources h3,
.hero-aside-resources h4 {
  font-size: var(--size-md) !important;
  line-height: 1.3 !important;
  margin-bottom: var(--space-2) !important;
}
.hero-aside-resources p,
.hero-aside-resources li,
.hero-aside-resources [class*="excerpt"],
.hero-aside-resources [class*="summary"],
.hero-aside-resources [class*="desc"] {
  font-size: var(--size-sm) !important;
  line-height: 1.5 !important;
}
.hero-aside-resources a { font-size: var(--size-sm) !important; }
.hero-aside--resources .hero-aside-foot { padding-top: var(--space-4); }

/* --- Resources sidebar carousel --- */
.rnw-cycle-stage { position: relative; }
.rnw-cycle-stage > * {
  grid-area: 1 / 1;            /* stack every card in one cell */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
}
.rnw-cycle-stage > *.is-active { opacity: 1; visibility: visible; }

.rnw-cycle-controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); margin-top: var(--space-4);
}
.rnw-cycle-arrow {
  appearance: none; -webkit-appearance: none;
  width: 1.9rem; height: 1.9rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color var(--transition), color var(--transition);
}
.rnw-cycle-arrow:hover { border-color: var(--color-accent); color: var(--color-accent); }

.rnw-cycle-dots { display: flex; align-items: center; gap: var(--space-2); }
.rnw-cycle-dot {
  appearance: none; -webkit-appearance: none; border: 0; padding: 0; cursor: pointer;
  width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--color-border);
  transition: background var(--transition), transform var(--transition);
}
.rnw-cycle-dot.is-active { background: var(--color-accent); transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) {
  .rnw-cycle-stage > * { transition: none; }
}

/* --- Home page hero background image (top section only) --- */
/* Scoped to the front page so other pages' heroes are unaffected. The page
   background color is #FAFAF8 = rgb(250,250,248); the scrim uses that so it
   blends seamlessly and keeps the dark hero text + info band readable. */
.home .hero,
.front-page .hero {
  background-image:
    linear-gradient(to bottom, rgba(250,250,248,0) 52%, rgba(250,250,248,0.92) 100%),
    linear-gradient(to right, rgba(250,250,248,0.92) 0%, rgba(250,250,248,0.5) 34%, rgba(250,250,248,0.06) 62%, rgba(250,250,248,0) 100%),
    url('../images/bg1.png');
  background-size: cover, cover, cover;
  background-position: center, center, center 38%;
  background-repeat: no-repeat;
}
/* Hide the decorative radial blob — the photo replaces it. */
.home .hero::before,
.front-page .hero::before { display: none; }

/* On small screens the hero stacks tall; lighten the photo more evenly so all
   the stacked text stays readable. */
@media (max-width: 700px) {
  .home .hero,
  .front-page .hero {
    background-image:
      linear-gradient(to bottom, rgba(250,250,248,0.6) 0%, rgba(250,250,248,0.82) 100%),
      url('../images/bg1.png');
    background-size: cover, cover;
    background-position: center, center 40%;
  }
}

/* =========================================================
   Personal Lines page — hero with background image + features
   Scoped via .rnw-personal so no other page is affected.
   ========================================================= */
.rnw-personal .hero {
  background-image:
    linear-gradient(to right, rgba(250,250,248,0.88) 0%, rgba(250,250,248,0.45) 32%, rgba(250,250,248,0) 58%),
    url('../images/pl_background.png');
  background-size: cover, cover;
  background-position: center, right center;
  background-repeat: no-repeat;
  padding-bottom: var(--space-20);
}
.rnw-personal .hero::before { display: none; } /* photo replaces the radial blob */
.rnw-personal .hero-content { max-width: 600px; }

/* Match the artwork's navy headline + teal accent */
.rnw-personal .hero-eyebrow { color: var(--color-accent); }
.rnw-personal .hero-title { color: #1d3354; }
.rnw-personal .hero-title em { color: var(--color-accent); font-style: italic; }

/* Home / Auto / Life feature row */
.rnw-pl-features {
  display: flex; flex-wrap: wrap; gap: var(--space-8);
  margin-top: var(--space-10);
}
.rnw-pl-feature { flex: 1 1 150px; min-width: 150px; max-width: 220px; }
.rnw-pl-feature-icon {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full);
  display: grid; place-items: center; margin-bottom: var(--space-3);
}
.rnw-pl-feature-icon svg { width: 1.4rem; height: 1.4rem; display: block; }
.rnw-pl-feature-icon--home { background: rgba(63,108,125,0.13);  color: var(--color-accent); }
.rnw-pl-feature-icon--auto { background: rgba(74,124,89,0.15);   color: #4A7C59; }
.rnw-pl-feature-icon--life { background: rgba(214,105,101,0.15); color: var(--color-accent-alt); }
.rnw-pl-feature h3 {
  font-family: var(--font-body); font-size: var(--size-md); font-weight: 600;
  color: #1d3354; margin: 0 0 var(--space-1);
}
.rnw-pl-feature p { font-size: var(--size-sm); color: var(--color-muted); margin: 0; line-height: 1.5; }

@media (max-width: 700px) {
  .rnw-personal .hero {
    background-image:
      linear-gradient(to bottom, rgba(250,250,248,0.55) 0%, rgba(250,250,248,0.82) 100%),
      url('../images/pl_background.png');
    background-position: center, center;
  }
  .rnw-personal .hero-content { max-width: none; }
  .rnw-pl-features { gap: var(--space-6); }
  .rnw-pl-feature { flex: 1 1 140px; }
}

/* =========================================================
   Commercial Lines page — hero with background image
   Scoped via .rnw-commercial. The italic "done early and
   accurately." keeps the default muted-gray em (matches art).
   ========================================================= */
.rnw-commercial .hero {
  background-image:
    linear-gradient(to right, rgba(250,250,248,0.9) 0%, rgba(250,250,248,0.5) 34%, rgba(250,250,248,0) 60%),
    url('../images/cl_background.png');
  background-size: cover, cover;
  background-position: center, right center;
  background-repeat: no-repeat;
  padding-bottom: var(--space-20);
}
.rnw-commercial .hero::before { display: none; } /* photo replaces the radial blob */
.rnw-commercial .hero-content { max-width: 620px; }
.rnw-commercial .hero-eyebrow { color: #1d3354; }
.rnw-commercial .hero-title { color: #1d3354; }

@media (max-width: 700px) {
  .rnw-commercial .hero {
    background-image:
      linear-gradient(to bottom, rgba(250,250,248,0.55) 0%, rgba(250,250,248,0.82) 100%),
      url('../images/cl_background.png');
    background-position: center, center;
  }
  .rnw-commercial .hero-content { max-width: none; }
}

/* =========================================================
   How It Works page — hero, choice card, timeline, CTA
   Scoped via .rnw-hiw.
   ========================================================= */
.rnw-hiw .hero {
  background-image:
    linear-gradient(to right, rgba(250,250,248,0.92) 0%, rgba(250,250,248,0.5) 30%, rgba(250,250,248,0) 55%),
    url('../images/bg2.png');
  background-size: cover, cover;
  background-position: center, right center;
  background-repeat: no-repeat;
  padding-bottom: 160px;
}
.rnw-hiw .hero::before { display: none; }
.rnw-hiw .hero-content { max-width: 560px; }
.rnw-hiw .hero-eyebrow { color: #1d3354; }
.rnw-hiw .hero-title { color: #1d3354; }
.rnw-hiw .hero-title em { color: #1d3354; font-style: italic; }

/* Personal / Commercial choice card overlapping the hero */
.rnw-hiw-choose { position: relative; z-index: 3; margin-top: -96px; }
.rnw-hiw-choose-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) var(--space-10);
}
.rnw-hiw-choice {
  display: flex; align-items: center; gap: var(--space-4);
  text-decoration: none; border-radius: var(--radius-md);
  padding: var(--space-2); transition: background var(--transition);
}
.rnw-hiw-choice:hover { background: var(--color-bg); }
.rnw-hiw-choice-icon {
  flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: var(--radius-full);
  display: grid; place-items: center;
}
.rnw-hiw-choice-icon svg { width: 1.5rem; height: 1.5rem; }
.rnw-hiw-choice-icon--personal { background: rgba(63,108,125,0.12); color: var(--color-accent); }
.rnw-hiw-choice-icon--commercial { background: rgba(63,108,125,0.12); color: #1d3354; }
.rnw-hiw-choice h3 { font-size: var(--size-lg); color: #1d3354; margin: 0 0 2px; }
.rnw-hiw-choice p { font-size: var(--size-sm); color: var(--color-muted); margin: 0; line-height: 1.45; }
.rnw-hiw-or {
  font-size: var(--size-sm); color: var(--color-muted);
  padding: 0 var(--space-2); border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border); align-self: stretch;
  display: grid; place-items: center;
}

/* Timeline */
.rnw-hiw-timeline-section { padding-top: var(--space-16); }
.rnw-hiw-steps { position: relative; display: grid; gap: var(--space-10); }
.rnw-hiw-steps::before {
  content: ''; position: absolute; left: 1.5rem; top: 1.5rem; bottom: 1.5rem;
  width: 2px; background: var(--color-border);
}
.rnw-hiw-step {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-10); align-items: start;
}
.rnw-hiw-step-main { display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-4); align-items: start; }
.rnw-hiw-step-icon {
  position: relative; z-index: 1;
  width: 3rem; height: 3rem; border-radius: var(--radius-full);
  background: var(--color-accent-alt); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 5px var(--color-bg);
}
.rnw-hiw-step-icon svg { width: 1.4rem; height: 1.4rem; }
.rnw-hiw-step-when {
  display: block; font-size: var(--size-xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-accent-alt); margin-bottom: var(--space-1);
}
.rnw-hiw-step-body h3 { font-size: var(--size-xl); color: #1d3354; margin: 0 0 var(--space-2); }
.rnw-hiw-step-body p { color: var(--color-muted); margin: 0; line-height: 1.6; }

.rnw-hiw-step-card {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-5);
}
.rnw-hiw-step-card-icon {
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full);
  background: rgba(63,108,125,0.1); color: var(--color-accent);
  display: grid; place-items: center;
}
.rnw-hiw-step-card-icon svg { width: 1.4rem; height: 1.4rem; }
.rnw-hiw-step-card h4 {
  font-family: var(--font-body); font-size: var(--size-md); font-weight: 600;
  color: #1d3354; margin: 0 0 var(--space-3);
}
.rnw-hiw-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rnw-hiw-checks li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--size-sm); color: var(--color-text); line-height: 1.4;
}
.rnw-hiw-checks li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--color-accent); font-weight: 700;
}

/* Contact CTA bar */
.rnw-hiw-cta {
  display: flex; align-items: center; gap: var(--space-5);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8);
}
.rnw-hiw-cta-icon {
  flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: var(--radius-full);
  background: var(--color-accent); color: #fff; display: grid; place-items: center;
}
.rnw-hiw-cta-icon svg { width: 1.4rem; height: 1.4rem; }
.rnw-hiw-cta-text { flex: 1 1 auto; }
.rnw-hiw-cta-text h3 { font-size: var(--size-lg); color: #1d3354; margin: 0 0 2px; }
.rnw-hiw-cta-text p { font-size: var(--size-sm); color: var(--color-muted); margin: 0; }
.rnw-hiw-cta .btn { flex: 0 0 auto; }

@media (max-width: 860px) {
  .rnw-hiw-choose-card { grid-template-columns: 1fr; gap: var(--space-4); }
  .rnw-hiw-or { border: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; }
  .rnw-hiw-step { grid-template-columns: 1fr; gap: var(--space-5); }
  .rnw-hiw-step-card { margin-left: calc(3rem + var(--space-4)); }
}
@media (max-width: 700px) {
  .rnw-hiw .hero {
    background-image:
      linear-gradient(to bottom, rgba(250,250,248,0.55) 0%, rgba(250,250,248,0.82) 100%),
      url('../images/bg2.png');
    background-position: center, center;
    padding-bottom: 120px;
  }
  .rnw-hiw .hero-content { max-width: none; }
  .rnw-hiw-cta { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   FAQ page — hero bg, overlapping accordion card, help panel
   Scoped via .rnw-faq-page.
   ========================================================= */
.rnw-faq-page .hero {
  background-image:
    linear-gradient(to right, rgba(250,250,248,0.98) 0%, rgba(250,250,248,0.96) 34%, rgba(250,250,248,0.82) 48%, rgba(250,250,248,0.35) 62%, rgba(250,250,248,0) 80%),
    url('../images/faq_background.jpg');
  background-size: cover, cover;
  background-position: center, right center;
  background-repeat: no-repeat;
  padding-bottom: 150px;
}
.rnw-faq-page .hero::before { display: none; }
.rnw-faq-page .hero-content { max-width: 620px; }
.rnw-faq-page .hero-eyebrow { color: #1d3354; }
.rnw-faq-page .hero-title { color: #1d3354; }
.rnw-faq-page .hero-title em { color: var(--color-accent); font-style: italic; }

/* Accordion as one card overlapping the hero */
.rnw-faq-list-section { padding-top: 0; margin-top: -90px; position: relative; z-index: 3; }
.rnw-faq-page .rnw-faq {
  max-width: 880px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.rnw-faq-page .rnw-faq details {
  border: 0; border-radius: 0; background: transparent; margin: 0;
  border-bottom: 1px solid var(--color-border);
}
.rnw-faq-page .rnw-faq details:last-child { border-bottom: 0; }
.rnw-faq-page .rnw-faq summary { justify-content: flex-start; gap: var(--space-4); color: #1d3354; }
.rnw-faq-page .rnw-faq summary::after { margin-left: auto; color: var(--color-accent); }
.rnw-faq-ic {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-full);
  background: var(--color-accent); color: #fff; display: grid; place-items: center;
}
.rnw-faq-ic svg { width: 1.25rem; height: 1.25rem; }
.rnw-faq-page .rnw-faq .rnw-faq-body { padding-left: calc(var(--space-6) + 2.4rem + var(--space-4)); }

/* "Still have questions?" help panel */
.rnw-faq-help {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-10);
  background: #EAF1F1; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-10);
}
.rnw-faq-help-main { display: flex; gap: var(--space-6); align-items: flex-start; }
.rnw-faq-help-shield {
  flex: 0 0 auto; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-full);
  background: #fff; color: var(--color-accent); display: grid; place-items: center;
}
.rnw-faq-help-shield svg { width: 2.2rem; height: 2.2rem; }
.rnw-faq-help-body h2 { font-size: var(--size-2xl); color: var(--color-accent); margin: 0 0 var(--space-3); }
.rnw-faq-help-body > p { color: var(--color-muted); margin: 0 0 var(--space-4); line-height: 1.6; max-width: 46ch; }
.rnw-faq-help-checks {
  list-style: none; margin: 0 0 var(--space-6); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
}
.rnw-faq-help-checks li {
  position: relative; padding-left: 1.5rem; font-size: var(--size-sm);
  color: #1d3354; font-weight: 500;
}
.rnw-faq-help-checks li::before {
  content: '✓'; position: absolute; left: 0; color: var(--color-accent); font-weight: 700;
}
.rnw-faq-help-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.rnw-faq-help-actions .btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.rnw-faq-help-actions .btn svg { width: 1.05rem; height: 1.05rem; }

.rnw-faq-trust {
  display: grid; gap: var(--space-6); align-content: start;
  border-left: 1px solid rgba(63,108,125,0.2); padding-left: var(--space-8);
}
.rnw-faq-trust-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.rnw-faq-trust-icon {
  flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: var(--radius-full);
  background: #fff; color: var(--color-accent); display: grid; place-items: center;
}
.rnw-faq-trust-icon svg { width: 1.4rem; height: 1.4rem; }
.rnw-faq-trust-item h4 { font-family: var(--font-body); font-size: var(--size-md); font-weight: 700; color: #1d3354; margin: 0 0 2px; }
.rnw-faq-trust-item p { font-size: var(--size-sm); color: var(--color-muted); margin: 0; line-height: 1.45; }

.rnw-faq-secure {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin-top: var(--space-8); font-size: var(--size-sm); color: var(--color-muted);
}
.rnw-faq-secure svg { width: 1rem; height: 1rem; }

@media (max-width: 860px) {
  .rnw-faq-help { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-8); }
  .rnw-faq-trust { border-left: 0; border-top: 1px solid rgba(63,108,125,0.2); padding-left: 0; padding-top: var(--space-6); }
}
@media (max-width: 700px) {
  .rnw-faq-page .hero {
    background-image:
      linear-gradient(to bottom, rgba(250,250,248,0.85) 0%, rgba(250,250,248,0.92) 100%),
      url('../images/faq_background.jpg');
    background-position: center, center;
    padding-bottom: 110px;
  }
  .rnw-faq-page .hero-content { max-width: none; }
  .rnw-faq-help-main { flex-direction: column; }
}

/* FAQ hero: darken the intro paragraph for contrast over the photo */
.rnw-faq-page .hero-desc { color: #1d3354; }

/* =========================================================
   Resources page — hero background image
   Scoped via .rnw-resources (overrides the tighter-rhythm rule above).
   ========================================================= */
.rnw-resources .hero {
  background-image:
    linear-gradient(to right, rgba(250,250,248,0.92) 0%, rgba(250,250,248,0.7) 32%, rgba(250,250,248,0.2) 56%, rgba(250,250,248,0) 75%),
    url('../images/resources_background.jpg');
  background-size: cover, cover;
  background-position: center, right center;
  background-repeat: no-repeat;
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}
.rnw-resources .hero::before { display: none; }
.rnw-resources .hero-content { max-width: 600px; }
.rnw-resources .hero-eyebrow { color: #1d3354; }
.rnw-resources .hero-title { color: #1d3354; }
.rnw-resources .hero-title em { color: var(--color-accent); font-style: italic; }
.rnw-resources .hero-desc { color: #1d3354; }

@media (max-width: 700px) {
  .rnw-resources .hero {
    background-image:
      linear-gradient(to bottom, rgba(250,250,248,0.8) 0%, rgba(250,250,248,0.92) 100%),
      url('../images/resources_background.jpg');
    background-position: center, center;
  }
  .rnw-resources .hero-content { max-width: none; }
}

/* =========================================================
   Contact page — soft abstract hero background
   Scoped via .rnw-contact.
   ========================================================= */
.rnw-contact .hero {
  background-image:
    linear-gradient(to right, rgba(250,250,248,0.6) 0%, rgba(250,250,248,0.2) 45%, rgba(250,250,248,0) 70%),
    url('../images/contact_background.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.rnw-contact .hero::before { display: none; }
.rnw-contact .hero-content { max-width: 620px; }
.rnw-contact .hero-eyebrow { color: #1d3354; }
.rnw-contact .hero-title { color: #1d3354; }
.rnw-contact .hero-title em { color: var(--color-accent); font-style: italic; }
.rnw-contact .hero-desc { color: #1d3354; }

@media (max-width: 700px) {
  .rnw-contact .hero-content { max-width: none; }
}