/* R8: keep the headline and entry in document flow, including at text zoom. */
.hero.creative-hero {
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 grid-template-rows:auto auto;
 align-content:center;
 row-gap:24px;
 padding:40px 4% 70px;
 height:auto;
 min-height:calc(100svh - 100px);
 max-height:none;
}
.creative-hero .hero-img {inset:0;width:100%;height:100%}
.creative-hero .hero-copy {
 grid-column:1;grid-row:1;
 width:100%;max-width:none;padding:0;min-width:0;
}
.creative-hero .hero-entry {
 position:relative;inset:auto;bottom:auto;left:auto;
 grid-column:1;grid-row:2;
 width:100%;max-width:650px;min-width:0;
}
.creative-hero h1 {
 font-size:clamp(40px,4.45vw,80px);
 line-height:1.06;letter-spacing:-.055em;
 margin:18px 0 22px;
 overflow-wrap:normal;
}
.creative-hero .intro {max-width:390px;margin-bottom:0;font-size:16px;line-height:1.55}
.creative-hero .invitation {
 font:500 clamp(17px,1.45vw,21px)/1.4 var(--sans);
 letter-spacing:-.025em;gap:12px;
 margin:0 0 14px;padding:0;background:none;
 width:auto;max-width:100%;
}
.creative-hero .curve {width:50px;height:30px}
.creative-hero .suggestions {gap:8px;margin:12px 0}
.creative-hero .suggestions button {font-size:12px;padding:9px 12px;white-space:normal;text-align:left}
.creative-hero .hero-note {margin:14px 0 0;max-width:420px;line-height:1.5}
@media (min-width:701px) and (max-width:1000px) {
 .hero.creative-hero {grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
 .creative-hero h1 {font-size:clamp(36px,4.7vw,47px)}
 .creative-hero .start-box input {font-size:16px;padding:14px 10px}
}
@media (max-width:700px) {
 .hero.creative-hero {
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;
  padding:28px 5% 34px;row-gap:24px;min-height:0;
 }
 .creative-hero .hero-copy {grid-column:1;grid-row:1}
 .creative-hero .hero-img {
  position:relative;inset:auto;grid-column:1;grid-row:2;
  height:clamp(250px,65vw,380px);width:100%;
  object-fit:cover;object-position:86% center;
  transform:none;border-radius:14px;
 }
 .creative-hero:after {display:none}
 .creative-hero .idea-layers,.creative-hero .motion-toggle {display:none}
 .creative-hero .hero-entry {grid-column:1;grid-row:3;bottom:auto}
 .creative-hero h1 {font-size:clamp(32px,8.7vw,54px);margin:16px 0 18px}
 .creative-hero .intro {font-size:15px;max-width:390px}
 .creative-hero .invitation {font-size:17px}
 .creative-hero .curve {width:32px}
 .creative-hero .start-box input {font-size:14px;padding:14px 8px}
 .creative-hero .hero-note {max-width:none}
}