/* v23: editorial layout refresh for the two SEO-focused genre pages only. */
.genre-hero h1 {
  font-size: clamp(1.85rem, 2.85vw, 2.65rem);
  line-height: 1.38;
  letter-spacing: .012em;
  text-wrap: balance;
  overflow-wrap: normal;
}
.genre-hero h1 > span { overflow-wrap: normal; }
.genre-hero .genre-intro { max-width: 37rem; line-height: 1.85; }

.rai-seo-v23 {
  background: linear-gradient(180deg, #fffdf8 0%, #fdf7ef 100%);
  padding-block: clamp(3.6rem, 6vw, 5.2rem);
}
.rai-seo-v23 > .wrap > .eyebrow { margin-bottom: .7rem; }
.rai-seo-v23 > .wrap > h2 {
  max-width: 100%;
  margin: 0 0 clamp(1.55rem, 3vw, 2.15rem);
  font-size: clamp(1.75rem, 2.7vw, 2.55rem);
  line-height: 1.42;
  letter-spacing: .015em;
  text-wrap: balance;
}
.rai-seo-v23 .rai-seo-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.5rem);
}
.rai-seo-v23 .rai-seo-intro-copy { min-width: 0; }
.rai-seo-v23 .rai-seo-intro-copy > p {
  margin: 0 0 .9rem;
  color: #3a3029;
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.96;
  letter-spacing: .015em;
}
.rai-seo-v23 .rai-seo-intro-copy strong { color: #6e2523; font-weight: 700; }
.rai-seo-v23 .rai-seo-intro-copy > .rai-seo-caution {
  margin-top: 1.35rem;
  padding: .83rem 1.04rem;
  background: #f9f0e4;
  border-left: 3px solid #b18b4b;
  border-radius: 0 6px 6px 0;
  color: #695b4d;
  font-size: .88rem;
  line-height: 1.82;
}
.rai-seo-v23 .rai-seo-photo { min-width: 0; margin: 0; }
.rai-seo-v23 .rai-seo-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid rgba(145, 99, 50, .22);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(65, 35, 23, .1);
}
.rai-seo-v23 .rai-seo-photo figcaption {
  margin-top: .55rem;
  color: #786c61;
  font-size: .77rem;
  line-height: 1.65;
}
.rai-seo-v23 .rai-seo-feature-grid { counter-reset: rai-seo-points; gap: clamp(.85rem, 1.75vw, 1.25rem); }
.rai-seo-v23 .rai-seo-feature-grid article {
  position: relative;
  padding: clamp(1.35rem, 2.7vw, 1.85rem);
  border-color: #e8d9c0;
  border-radius: 12px;
  box-shadow: 0 7px 20px rgba(57, 32, 19, .045);
}
.rai-seo-v23 .rai-seo-feature-grid article::before {
  counter-increment: rai-seo-points;
  content: counter(rai-seo-points, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 1rem;
  border: 1px solid #dec6a3;
  border-radius: 50%;
  background: #fbf4e8;
  color: #8d3329;
  font: 700 .83rem/1 system-ui, sans-serif;
}
.rai-seo-v23 .rai-seo-feature-grid h3 {
  margin: 0 0 .65rem;
  color: #642526;
  font-size: clamp(1.12rem, 1.4vw, 1.24rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.rai-seo-v23 .rai-seo-feature-grid p { margin: 0; font-size: .95rem; line-height: 1.94; }
.rai-seo-v23 .rai-seo-qa-title {
  margin-top: clamp(2.6rem, 4vw, 3.3rem);
  margin-bottom: 1rem;
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  line-height: 1.55;
  text-wrap: balance;
}
.rai-seo-v23 .rai-seo-qa { gap: .67rem; }
.rai-seo-v23 .rai-seo-qa details { padding: 1rem 1.3rem; border-radius: 9px; }
.rai-seo-v23 .rai-seo-qa summary { font-size: 1rem; line-height: 1.7; }
.rai-seo-v23 .rai-seo-qa details p { max-width: 58rem; margin-top: .65rem; }
.rai-seo-v23 .rai-seo-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  align-items: center;
  margin-top: clamp(2rem, 3vw, 2.5rem);
  padding: 1.45rem 1.7rem;
  border: 1px solid #e6d7b9;
  border-left: 4px solid #a82d30;
  border-radius: 0 12px 12px 0;
  background: #fff;
}
.rai-seo-v23 .rai-seo-cta p { font-size: .96rem; line-height: 1.8; }
.rai-seo-v23 .rai-seo-cta p strong { color: #77252a; }
.rai-seo-v23 .rai-seo-cta > div { max-width: 25rem; }
.rai-seo-v23 .rai-seo-cta a {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: .45rem .7rem;
  background: #f9f2e6;
  border: 1px solid #eadbc1;
  border-radius: 5px;
  font-size: .87rem;
  line-height: 1.45;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.rai-seo-v23 .rai-seo-cta a:hover,
.rai-seo-v23 .rai-seo-cta a:focus-visible { background: #fff; border-color: #a72d30; text-decoration: underline; }

@media (max-width: 900px) {
  .rai-seo-v23 .rai-seo-intro-layout { grid-template-columns: 1fr; gap: 1.45rem; }
  .rai-seo-v23 .rai-seo-photo { max-width: 650px; }
  .rai-seo-v23 .rai-seo-cta { grid-template-columns: 1fr; }
  .rai-seo-v23 .rai-seo-cta > div { max-width: 100%; justify-content: flex-start; }
}
@media (max-width: 700px) {
  .genre-hero h1 { font-size: clamp(1.7rem, 6vw, 2.1rem); line-height: 1.45; }
  .genre-hero h1 > span { overflow-wrap: normal; }
  .rai-seo-v23 { padding-block: 3.2rem; }
  .rai-seo-v23 > .wrap > h2 { font-size: clamp(1.7rem, 5.7vw, 2rem); line-height: 1.48; }
  .rai-seo-v23 .rai-seo-intro-copy > p { font-size: 1rem; line-height: 1.85; }
  .rai-seo-v23 .rai-seo-feature-grid { grid-template-columns: 1fr; }
  .rai-seo-v23 .rai-seo-feature-grid article { padding: 1.3rem; }
  .rai-seo-v23 .rai-seo-feature-grid article::before { margin-bottom: .7rem; }
  .rai-seo-v23 .rai-seo-qa details { padding: .95rem 1.1rem; }
  .rai-seo-v23 .rai-seo-cta { padding: 1.2rem; }
}
@media (max-width: 370px) {
  .genre-hero h1 { font-size: 1.65rem; }
  .rai-seo-v23 .rai-seo-cta a { font-size: .81rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rai-seo-v23 .rai-seo-cta a { transition: none; }
}