/* Strategy review of landing-v4, 2026-10-29 (docs/strategy/site-review-2026-10-29/). Loaded last, after motion.css,
   so it overrides without editing the shared sheets another session is working in. */

/* 1 · /reel: Give / Pay / Get inside the form reads as three full-width rows, the label left and the lines right */
.maker .gpg{grid-template-columns:minmax(0,1fr);gap:8px;max-width:none;margin:6px 0 14px}
.maker .gpg-c{grid-template-columns:112px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:14px 16px;align-items:start}
.maker .gpg-l{grid-column:1;grid-row:1;padding-top:3px}
.maker .gpg-c>ul{grid-column:2;grid-row:1}
.maker .gpg-lead{grid-column:2;grid-row:1}
.maker .gpg-c.get>ul{grid-row:2}
.maker .gpg-c ul{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 16px}
.maker .gpg-c.pay ul{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.maker .gpg-c li.gpg-price{font-size:22px}
@media (max-width:520px){
  .maker .gpg-c{grid-template-columns:84px minmax(0,1fr);column-gap:10px;padding:12px 14px}
  .maker .gpg-c ul{grid-template-columns:minmax(0,1fr)}
}

/* 2 · /reel: the example Reel starts beside the headline and stays beside the form while it scrolls */
@media (min-width:901px){
  .page-hero .split:has(.phone-wrap){align-items:start}
  .page-hero .phone-wrap{position:sticky;top:max(96px,calc(50vh - 300px))}
}

/* 5 · results strip: the whole 9:16 frame, never zoomed; "Made with AI" sits under the title, off the picture */
.rc2-v video,.rc2-v img{object-fit:contain;background:#000}
.rc2:hover .rc2-v video{transform:none}
.rc2-t .ai-chip{position:static;align-self:flex-start;margin-top:8px;background:rgba(17,26,21,.07);color:var(--ink2)}

/* 7 · home configurator: the questions and the button sit centred beside the card instead of above an empty column */
@media (min-width:901px){
  .cfg{grid-template-rows:1fr auto auto auto 1fr;column-gap:56px;row-gap:26px}
  .cfg-l,.cfg-r{display:contents}
  .cfg-q:nth-child(1){grid-column:1;grid-row:2}
  .cfg-q:nth-child(2){grid-column:1;grid-row:3}
  .cfg-r>.btn{grid-column:1;grid-row:4;justify-self:start;margin-top:4px}
  .cfg-win{grid-column:2;grid-row:1/-1}
}

/* 8 · phone home: Give / Pay / Get as one compact card of three rows, so the hero Reel reaches the first screen */
@media (max-width:760px){
  .hero-copy .gpg{gap:0;margin:14px 0 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line);overflow:hidden;text-align:left}
  .hero-copy .gpg-c,.hero-copy .gpg-c.get{grid-template-columns:92px minmax(0,1fr);align-items:baseline;gap:2px 10px;padding:9px 14px;
    border-radius:0;background:none;box-shadow:none;border-top:1px solid var(--line)}
  .hero-copy .gpg-c:first-child{border-top:0}
  .hero-copy .gpg-l{grid-column:1;grid-row:1;font-size:11px}
  .hero-copy .gpg-c>ul{grid-column:2;grid-row:1;gap:2px}
  .hero-copy .gpg-c li{grid-template-columns:minmax(0,1fr);font-size:14px;line-height:1.3}
  .hero-copy .gpg-c li .gi{display:none}
  .hero-copy .gpg-c li.gpg-price{font-size:16px;letter-spacing:-.01em}
  .hero-copy .join{margin-top:0}
  /* the Reel moves up under the headline; the header keeps the waitlist button on screen */
  .hero .split{row-gap:0}
  .hero-copy{display:contents}
  .hero-copy>*{order:5}
  .hero-copy>.slogan-top{order:1;justify-self:center}
  .hero-copy>h1{order:2}
  .hero-copy>.lede{order:3}
  .hero .hero-reel{order:4;width:min(52vw,210px);height:auto;margin:4px auto 2px;border-radius:22px}
  .hero .hero-reel .hr-tap{font-size:13px;padding:6px 12px 6px 6px;gap:8px}
  .hero .hero-reel .hr-pi{width:28px;height:28px}
}

/* 5 · hero Reel: the badge sits top centre, the one spot no hero Reel uses (their clocks sit left or right) */
.hero-reel .ai-chip{left:50%;right:auto;top:10px;transform:translateX(-50%);white-space:nowrap}