/* Selective typography and CTA polish inspired by editorial conversion sites.
   Keep accent usage sparse: color marks key phrases, serif appears once, CTA motion stays functional. */

body[data-editorial-family="home"] .headline-accent{color:var(--brand)}
body[data-editorial-family="home"] .accent-serif{
  color:var(--brand-hover);
  font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.035em;
}

body[data-editorial-family="home"] .editorial-hero h1 .headline-accent{display:block}
body[data-editorial-family="home"] .hero-eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body[data-editorial-family="home"] .hero-eyebrow span,
body[data-editorial-family="home"] .hero-eyebrow strong{font:inherit;letter-spacing:inherit;text-transform:inherit}
body[data-editorial-family="home"] .hero-eyebrow strong{color:var(--brand);font-weight:800}

body[data-editorial-family="home"] .kicker{display:flex;align-items:center;gap:10px}
body[data-editorial-family="home"] .kicker::before{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--punch);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--punch) 10%,transparent);
  content:"";
}

body[data-editorial-family="home"] .cta-premium{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding-right:9px!important;
  min-height:52px;
}
body[data-editorial-family="home"] .cta-premium>span{padding-left:6px}
body[data-editorial-family="home"] .cta-arrow{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand-contrast) 22%,transparent);
  border-radius:50%;
  background:color-mix(in srgb,var(--brand-contrast) 11%,transparent);
  color:var(--brand-contrast);
  font-size:17px;
  font-style:normal;
  line-height:1;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease;
}
body[data-editorial-family="home"] .cta-premium:hover .cta-arrow,
body[data-editorial-family="home"] .cta-premium:focus-visible .cta-arrow{
  transform:translateX(3px);
  border-color:color-mix(in srgb,var(--brand-contrast) 34%,transparent);
  background:color-mix(in srgb,var(--brand-contrast) 17%,transparent);
}

body[data-editorial-family="home"] .cta-secondary-link{
  min-height:auto!important;
  padding:7px 0 5px!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,currentColor 42%,transparent)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text)!important;
  text-decoration:none!important;
}
body[data-editorial-family="home"] .cta-secondary-link::after{
  margin-left:8px;
  content:"→";
  transition:transform .2s ease;
}
body[data-editorial-family="home"] .cta-secondary-link:hover,
body[data-editorial-family="home"] .cta-secondary-link:focus-visible{
  border-bottom-color:currentColor!important;
  background:transparent!important;
}
body[data-editorial-family="home"] .cta-secondary-link:hover::after,
body[data-editorial-family="home"] .cta-secondary-link:focus-visible::after{transform:translateX(3px)}

body[data-editorial-family="home"] .merchant-final .cta-panel{align-items:center}
body[data-editorial-family="home"] .merchant-final .cta-action-stack{display:grid;gap:14px;justify-items:start}
body[data-editorial-family="home"] .merchant-final .final-cta-reassurance{
  max-width:520px;
  margin:0;
  color:var(--muted);
  font-size:11px;
  font-weight:650;
  letter-spacing:.015em;
  line-height:1.5;
}
body[data-editorial-family="home"] .merchant-final .headline-accent{color:var(--brand-hover)}
body[data-editorial-family="home"] .brand-promise .accent-serif{color:var(--brand-hover)}

/* Keep the desktop hero decisive: wider copy column, slightly smaller display type and
   no forced break before the highlighted phrase. This targets roughly 3–4 headline lines. */
@media(min-width:981px){
  body[data-editorial-family="home"] .editorial-hero>.shell{max-width:1320px!important}
  body[data-editorial-family="home"] .editorial-hero-grid{grid-template-columns:minmax(0,1fr) minmax(540px,1.04fr)!important;gap:clamp(36px,4.5vw,64px)!important}
  body[data-editorial-family="home"] .editorial-hero-copy{max-width:720px!important}
  body[data-editorial-family="home"] .editorial-hero h1{max-width:760px!important;font-size:clamp(50px,5.4vw,80px)!important;line-height:.95!important}
  body[data-editorial-family="home"] .editorial-hero h1 .headline-accent{display:inline!important}
}

/* The footer is always a dark product chapter, even when the page preference is Light.
   Use product-interface tokens so the appearance selector cannot inherit pale Light surfaces. */
.footer .theme-switcher{
  border-color:var(--product-line)!important;
  background:color-mix(in srgb,var(--product-bg) 90%,var(--product-surface2))!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--product-text) 7%,transparent)!important;
}
.footer .theme-option{color:var(--product-muted)!important}
.footer .theme-option:hover,.footer .theme-option:focus-visible{color:var(--product-text)!important}
.footer .theme-option[aria-pressed="true"]{
  background:color-mix(in srgb,var(--product-brand) 24%,var(--product-surface2))!important;
  color:var(--product-text)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--product-brand) 62%,var(--product-line)),0 0 20px color-mix(in srgb,var(--product-brand) 12%,transparent)!important;
}

@media(max-width:760px){
  body[data-editorial-family="home"] .editorial-hero h1 .headline-accent{display:inline}
  body[data-editorial-family="home"] .cta-premium{width:100%;justify-content:space-between!important}
  body[data-editorial-family="home"] .cta-secondary-link{width:auto!important;justify-self:start!important}
  body[data-editorial-family="home"] .merchant-final .cta-action-stack{width:100%}
  body[data-editorial-family="home"] .merchant-final .cta-row{width:100%}
}

@media(prefers-reduced-motion:reduce){
  body[data-editorial-family="home"] .cta-arrow,
  body[data-editorial-family="home"] .cta-secondary-link::after{transition:none!important}
  body[data-editorial-family="home"] .cta-premium:hover .cta-arrow,
  body[data-editorial-family="home"] .cta-premium:focus-visible .cta-arrow,
  body[data-editorial-family="home"] .cta-secondary-link:hover::after,
  body[data-editorial-family="home"] .cta-secondary-link:focus-visible::after{transform:none!important}
}

@media(prefers-contrast:more){
  body[data-editorial-family="home"] .kicker::before{box-shadow:none}
  body[data-editorial-family="home"] .cta-secondary-link{border-bottom-color:currentColor!important}
  .footer .theme-switcher{border-width:2px!important}
}
