/* Homepage refinement pass — 03/09/2026 */

/* 1. Preserve the stacked hero, but give the 'outgrown' descender real room. */
.hero h1{
  line-height:1.02;
  overflow:visible;
}
.hero h1 span{
  display:block;
  line-height:1.10;
  padding-bottom:.10em;
  margin-bottom:-.01em;
  overflow:visible;
}

/* 2. A deliberately simple before / after story. */
.hero-visual{
  min-height:735px;
}
.hero-visual::before{
  content:none;
}
.browser-card{
  width:72%;
  left:50%;
  right:auto;
  transform:translateX(-50%) !important;
}
.before-card{
  top:66px;
  bottom:auto;
  opacity:.88;
}
.after-card{
  top:410px;
  bottom:auto;
  z-index:3;
  background:#fffdf8;
  border-color:rgba(255,255,255,.18);
}
.before-card::before,
.after-card::before{
  position:absolute;
  z-index:8;
  left:0;
  right:auto;
  font-size:.98rem;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.015em;
  text-transform:none;
  white-space:nowrap;
}
.before-card::before{
  content:"From this…";
  top:-42px;
  color:rgba(255,255,255,.78);
}
.after-card::before{
  content:"…to this.";
  top:-38px;
  bottom:auto;
  color:var(--gold);
}
.rise-arrow,
.card-caption{
  display:none;
}
.hero-phoenix{
  right:-35px;
  top:132px;
  opacity:.07;
}

/* Make the AFTER example unmistakably a client website rather than a mini SitePhoenix. */
.after-card .browser-top.dark{
  background:#eef0ea;
  border-bottom-color:#dfe3dc;
}
.after-card .browser-top.dark>span{
  background:#abb3ac;
}
.after-card .browser-top.dark small{
  margin-left:10px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:0;
  color:#69746d;
  white-space:nowrap;
}
.after-card .browser-top.dark small::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  background:url('/logo-mark.svg') center/contain no-repeat;
}
.after-card .browser-top.dark small::after{
  content:"Your new SitePhoenix-designed website";
  font-size:.58rem;
  font-weight:700;
  letter-spacing:-.01em;
}
.after-card .new-site{
  min-height:0;
  aspect-ratio:760 / 440;
  padding:0;
  background:#f5f1e8 url('/client-after.svg') center/cover no-repeat;
  color:#163b34;
}
.after-card .new-site>*{
  display:none;
}

/* 3. Stop the offer headline lines colliding. */
.offer-copy h2{
  line-height:1.045;
  letter-spacing:-.055em;
}

/* 4. Give the price symbol proper presence and separation. */
.price{
  letter-spacing:-.045em;
}
.price sup{
  font-size:2.85rem;
  top:2px;
  margin-right:.1em;
  letter-spacing:0;
}

@media(max-width:980px){
  .hero-visual{min-height:735px}
  .browser-card{width:min(78%,540px)}
  .before-card{top:66px}
  .after-card{top:410px}
  .before-card::before,.after-card::before{font-size:.9rem}
}

@media(max-width:640px){
  .hero h1{line-height:1.04}
  .hero h1 span{line-height:1.12;padding-bottom:.12em}
  .hero-visual{min-height:650px}
  .browser-card{width:88%}
  .before-card{top:54px}
  .after-card{top:350px}
  .before-card::before,.after-card::before{font-size:.82rem}
  .before-card::before{top:-36px}
  .after-card::before{top:-32px}
  .hero-phoenix{top:120px;right:-20px;width:380px}
  .after-card .browser-top.dark small::after{font-size:.52rem}
  .after-card .browser-top.dark small::before{width:16px;height:16px;flex-basis:16px}
  .offer-copy h2{line-height:1.07}
  .price sup{font-size:2.35rem}
}