/* ==========================================================================
   body.css — Release 2, page bodies (2026-10-01)
   Loaded after styles.css on the pages that need it. Same tokens, type and
   spacing as styles.css; nothing here restyles the header, footer or pop-up.
   ========================================================================== */

/* ---- M3 phone hero: Drew's face clear up top, copy starts below his chin ----
   The phone photo is 900x1200 (3:4). Shown at full width it is 133.33vw tall;
   his chin sits at ~45% of it (~60vw). Copy starts at 60vw on a dark fade. */
@media(max-width:47.99em){
  .hero{min-height:0;justify-content:flex-start;padding:0 0 2.75rem}
  .hero__bg{bottom:auto;height:133.34vw}
  .hero__bg img{object-position:50% 0}
  .hero__shade{background:linear-gradient(180deg,rgba(17,17,17,0) 0,rgba(17,17,17,0) 46vw,rgba(17,17,17,.75) 62vw,rgba(17,17,17,.96) 80vw,#111 104vw)}
  .hero__grid{padding-top:60vw}
  .hero__copy{gap:1.25rem}
  .hero__body--sub{display:none}
}

/* ---- M1 the free-draft line under "I Build Websites.": two short lines, the promise in cyan ---- */
.hero__price span{display:block}

/* ---- V2 scrolling-sites loop (home work band + /our-work/ page top) ---- */
.loop{position:absolute;inset:0;overflow:hidden;background:#0c0f10}
.loop__poster,.loop__poster img,.loop__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loop__poster img{max-width:none}
.loop__video{opacity:0;transition:opacity .6s ease}
.loop.is-playing .loop__video{opacity:1}
/* ~75% charcoal over the footage keeps white and #a6a6a6 text above 4.5:1 on the brightest frame */
.loop__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,17,17,.84) 0%,rgba(17,17,17,.62) 48%,rgba(17,17,17,.34) 100%)}
@media(max-width:47.99em){.loop__shade{background:linear-gradient(180deg,rgba(17,17,17,.45) 0%,rgba(17,17,17,.72) 100%)}}
.loop__toggle{position:absolute;right:.75rem;bottom:.75rem;z-index:3;display:inline-flex;align-items:center;gap:.5rem;min-height:2.25rem;padding:.375rem .875rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.28);background:rgba(17,17,17,.7);color:var(--text-1);font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;cursor:pointer}
.loop__toggle:hover{border-color:var(--brand);color:var(--brand)}
.loop__toggle[hidden]{display:none}


.work-sec{padding-top:0}
.loopband{position:relative;height:420px;display:flex;align-items:center;border-bottom:1px solid var(--ink-150)}
.loopband__copy{position:relative;z-index:2;width:100%}
.loopband__copy .head{margin-bottom:0}
.loopband__copy h2{max-width:40rem;text-shadow:0 1px 18px rgba(17,17,17,.6)}
@media(max-width:47.99em){.loopband{height:240px}.loopband__copy h2{font-size:1.7rem}}
.work-sec__body{padding-top:clamp(2rem,4vw,3rem)}
.work-sec__lede{margin-bottom:2rem}

/* ---- W1 home work tabs, in two labeled groups ---- */
.workbar{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.workgroup{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem}
.workgroup__label{flex:0 0 100%;font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.workgroup__label b{color:var(--brand);font-weight:500}
.workbar__all{align-self:flex-start}
@media(min-width:62em){
  .workgroup__label{flex:0 0 8.5rem}
  .workbar{position:relative}
  .workbar__all{position:absolute;right:0;top:0}
}
@media(max-width:61.99em){.workbar__all{width:100%}}

/* ---- M2 "What $297 buys": the six things and the four-logins table in one section ---- */
.buys__sub{margin-top:clamp(2.75rem,5vw,4rem);margin-bottom:1.75rem}
.buys__sub h3{font-size:clamp(1.4rem,1.6vw + .75rem,1.85rem)}

/* ---- M4 five-minute video: real cover, nothing from YouTube until play ---- */
.video--vsl{background:#000}
.vsl__cover,.vsl__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.vsl__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,0) 55%,rgba(17,17,17,.55) 100%)}
.video--vsl .play{position:relative;z-index:2}
/* the whole cover is the play target: the button's hit area stretches over the frame */
.video--vsl .play::before{content:"";position:absolute;inset:-100vmax}
.video--vsl .video__caption{position:absolute;right:1rem;bottom:1rem;z-index:2;padding:.375rem .75rem;border-radius:var(--r-pill);background:rgba(17,17,17,.8);color:var(--text-1);text-align:left}

/* ---- F2 phone: the form first, the $297 card after it ---- */
@media(max-width:61.99em){#build .offer>.form,#build .offer>.offer__side{order:-1}}

/* ---- E1 page tops on desktop: fill the empty right half ---- */
.pagetop__aside{display:none}
@media(min-width:62em){
  .pagetop{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:3.5rem;align-items:center}
  .pagetop .head{margin-bottom:2rem}
  .pagetop__aside{display:block}
}
.pagetop__shot{margin:0;display:flex;flex-direction:column;gap:.875rem}
.pagetop__shot .shot{box-shadow:var(--shadow-lg)}
.pagetop__cap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem;font-size:.9375rem;color:var(--text-2)}
.pagetop__cap a{font-family:var(--mono);font-size:.875rem;color:var(--brand);text-decoration:none}
.pagetop__aside .price{padding:2rem}
.pagetop__aside .price__amount{font-size:3.75rem}

/* ---- E1 "Built by me" strip above the closing band ---- */
.builtstrip{border-top:1px solid var(--ink-150)}
.builtstrip__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.75rem}
.builtstrip__head .stack{gap:.625rem}
.builtstrip__head h2{font-size:clamp(1.5rem,1.8vw + .75rem,2.1rem)}
.builtstrip__all{font-family:var(--mono);font-size:.875rem;color:var(--brand)}
.builtstrip__grid{list-style:none;margin:0;padding:0;display:grid;gap:.875rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:62em){.builtstrip__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}}
.builtstrip__grid li{margin:0}
.builtstrip__card{display:flex;flex-direction:column;gap:.375rem;height:100%;padding:.625rem .625rem .875rem;border-radius:var(--r-lg);border:1px solid var(--ink-300);background:var(--ink-050);transition:border-color .2s,transform .2s}
.builtstrip__card:hover{border-color:var(--brand);color:var(--text-1);transform:translateY(-1px)}
.builtstrip__card .shot{border-radius:10px;margin-bottom:.375rem}
.builtstrip__name{font-family:var(--disp);font-weight:800;font-size:1rem;line-height:1.2;padding:0 .25rem}
.builtstrip__meta{font-size:.875rem;color:var(--text-2);padding:0 .25rem}
.builtstrip__open{margin-top:auto;padding:.25rem .25rem 0;font-family:var(--mono);font-size:.8125rem;color:var(--brand)}
@media(max-width:39.99em){.builtstrip__card{padding:.5rem .5rem .75rem}.builtstrip__name{font-size:.9375rem}.builtstrip__meta{font-size:.8125rem}}

/* ---- E2 slim ask strip, mid-page ---- */
.askstrip{padding:clamp(1.75rem,4vw,2.5rem) 0;background:linear-gradient(90deg,rgba(0,231,239,.10),rgba(0,231,239,.03));border-top:1px solid rgba(0,231,239,.25);border-bottom:1px solid rgba(0,231,239,.25)}
.askstrip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem}
.askstrip__line{font-family:var(--disp);font-weight:800;font-size:clamp(1.2rem,1.2vw + .8rem,1.5rem);line-height:1.2;max-width:38rem}
.askstrip__line span{display:block;margin-top:.375rem;font-family:var(--font);font-weight:400;font-size:1rem;line-height:1.5;color:var(--text-2)}
.askstrip__btns{display:flex;flex-wrap:wrap;gap:.75rem}
@media(max-width:47.99em){.askstrip__btns{flex-direction:column;width:100%}.askstrip__btns .btn{width:100%}}
.page-head .hero__ctas+.hero__proof{margin-top:1.25rem}

/* ---- W2 /our-work/: loop behind the page top, then Built by me / Helped build ---- */
.owtop{position:relative;overflow:hidden;min-height:420px;display:flex;align-items:center;padding:clamp(3rem,7vw,5rem) 0;border-bottom:1px solid var(--ink-150)}
.owtop .wrap{position:relative;z-index:2;width:100%}
.owtop .head{margin-bottom:0}
.owtop h1{font-size:clamp(2.25rem,4.5vw + .5rem,3.75rem);font-weight:800;line-height:1.04;text-shadow:0 1px 18px rgba(17,17,17,.6)}
.owtop .lede{color:#c4c4c4}
.owtop__cap{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.04em;color:var(--text-2)}
@media(max-width:47.99em){.owtop{min-height:0}}
.wgroup[hidden]{display:none}
.wgroup__head{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem;max-width:46rem}
.wgroup__head h2{font-size:clamp(1.6rem,2vw + .75rem,2.25rem)}
.wgroup__head p{color:var(--text-2)}
.wgroup+.wgroup{margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--ink-300)}
.wgroup[hidden]+.wgroup{margin-top:0;padding-top:0;border-top:0}
.workgrid--big{grid-template-columns:1fr}
@media(min-width:44em){.workgrid--big{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:70em){.workgrid--small{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wcard__body h3{font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.15}
.workgrid--small .wcard__body h3{font-size:1.25rem}
.workgrid--small .wcard__body{padding:1.25rem}
.wcard__chips{position:absolute;left:.75rem;bottom:.75rem;z-index:2;display:flex;flex-wrap:wrap;gap:.375rem}
.wcard__chips .chip{background:rgba(17,17,17,.78);backdrop-filter:blur(4px)}
.chip--tag{border-color:var(--ink-400);color:var(--text-1)}
.vsl__note a{text-decoration:underline;text-underline-offset:3px}
.builtstrip__card .shot{display:block}
.dtable tr.is-us a[data-open-draft]{color:var(--brand);font-weight:600;white-space:nowrap}

/* Drew's 12-second clip, above the page form (10/01) */
.offer__side{display:grid;gap:1rem;align-content:start;min-width:0}
.clip{position:relative;overflow:hidden;border-radius:var(--r-card,14px);border:1px solid var(--ink-150,#2a2a2a);background:#000;aspect-ratio:16/9}
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;background:#000}
.clip video::cue{font-size:.95rem;background:rgba(17,17,17,.75);color:#fff}
.clip__sound{position:absolute;left:.75rem;bottom:.75rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;min-height:2.5rem;padding:.4rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(17,17,17,.72);color:#fff;font:600 .8125rem/1 var(--font,inherit);cursor:pointer}
.clip__sound:hover,.clip__sound:focus-visible{border-color:var(--brand,#00e7ef);color:var(--brand,#00e7ef)}
.clip__sound .on{display:inline}.clip__sound .off{display:none}
.clip.is-sound .clip__sound .on{display:none}.clip.is-sound .clip__sound .off{display:inline}
.clip[hidden]{display:none}