/* The front door (features/brand/pages.mjs homePage, public/brand/home.js), on top of public/premiere.css.
   Before the paste: the promise, the store box and the price line, and only then the made-up brands' ads. After it, the page
   turns into theirs: their product becomes a record (the photo is the cover, the song our writer just made is the
   track, their brand is the artist), their buyers' words glow amber in the lyrics, and the wait sits under it.
   Phone first; from 1024px the words and the record sit side by side, so nothing floats in the dark. */
.hv{flex:1;width:100%;max-width:var(--col);margin:0 auto;padding:0 var(--gut) 44px}
.hv-back{margin:6px 0 4px;padding:12px 14px;border-radius:13px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);font:400 var(--t3)/1.4 var(--sans);color:var(--dim)}
.hv-back b{color:var(--ink);font-weight:500}
.hv-back{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px;padding-bottom:4px}
.hv-back a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--ink)}
.hv-words{padding-top:14px}
.hv-words .pm-fine{text-align:center}

/* the examples: one made-up brand's ad under the box (beside it on a laptop), then the others in a row after the first
   screen, a carousel on a phone with its neighbours peeking */
.hv-eg{margin-top:44px}
.hv-door .hv-slides{justify-content:center}
.hv-door .hv-card{--cw:min(76vw,320px)}
.hv-eg-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.hv-eg-top .pm-lab{color:var(--dim)}
.hv-arrows{display:none;gap:8px}
.hv-arrows button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);cursor:pointer}
.hv-arrows svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.hv-arrows{display:flex}.hv-slides{cursor:grab}.hv-slides.is-drag{cursor:grabbing;scroll-snap-type:none}}
.hv-kinds{display:flex;gap:6px;margin:8px calc(-1*var(--gut)) 0;padding:0 var(--gut);overflow-x:auto;scrollbar-width:none}
.hv-kinds::-webkit-scrollbar{display:none}
.hv-kinds button{flex:none;min-height:40px;padding:0 13px;border:0;border-radius:99px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);color:var(--dim);font:500 var(--t4)/1 var(--sans);cursor:pointer;transition:background .2s,color .2s}
.hv-kinds [aria-pressed="true"]{background:var(--ink);color:var(--on-btn);box-shadow:none}
/* a phone: the first card on the page's own left edge at about two thirds of the screen, the next one peeking in at full
   strength (it sat 105px in from the left at 44% of the width, its neighbours dimmed and shrunk; three reviewers, 2026-09-30) */
.hv-slides{--cw:min(64vw,280px);display:flex;gap:12px;margin:14px calc(-1*var(--gut)) 0;padding:0 var(--gut);scroll-padding:0 var(--gut);list-style:none;
 overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;user-select:none;-webkit-user-select:none}
.hv-slides::-webkit-scrollbar{display:none}
.hv-card{flex:none;width:var(--cw);scroll-snap-align:start}
.hv-reel{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000 center/cover;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.hv-reel video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.hv-reel .hv-snd{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;padding:8px;border:0;background:linear-gradient(to bottom,transparent 60%,rgba(0,0,0,.55));color:#fff;cursor:pointer}
.hv-reel .hv-snd svg{width:26px;height:26px}
.hv-snd .is-p,.is-sound .hv-snd .is-s{display:none}
.is-sound .hv-snd .is-p{display:block}
.hv-cat{margin-top:10px;font:400 var(--t3)/1.3 var(--sans);color:var(--dim)}
.hv-cat b{margin-right:4px;font-weight:560;color:var(--ink)}
.hv-card .pm-lab{margin-top:2px}
.hv-made{text-align:center}

/* after the first screen: the other examples side by side and what the $29 gets you; gone once the page is theirs */
.hv-door[hidden]~.hv-kit{display:none}
.hv-kit{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.hv-kit .hv-eg{margin-top:0}
.hv-kit .hv-eg-top .pm-h1{text-wrap:balance}
.hv-get{margin-top:36px;padding:22px 20px 20px;border-radius:20px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line)}
.hv-get .pm-ticks{margin-top:10px}
.hv-get .pm-btn{margin-top:18px}
.hv-get .pm-fine{text-align:center}
.hv-kit>.hv-made{margin-top:22px}
.hv-quote{font:520 var(--t2)/1.35 var(--disp);letter-spacing:-.012em;text-wrap:pretty}

/* the record */
.hv-live{padding-top:6px;min-height:calc(100svh - 54px)}
.hv-written{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.hv-rec{--p:0;position:relative;border-radius:22px;overflow:hidden;background:#131311;box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -50px rgba(247,178,74,.45)}
.hv-blur{position:absolute;inset:-60px;background:center/cover no-repeat;filter:blur(48px) saturate(1.5) brightness(.34);opacity:0;transition:opacity .8s}
.hv-rec::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(to bottom,transparent 35%,rgba(8,8,7,.6))}
.has-photo .hv-blur{opacity:1}
.hv-in{position:relative;z-index:1;padding:18px 18px 16px}
.hv-cover{position:relative;width:min(100%,236px);aspect-ratio:1;margin:0 auto;border-radius:14px;overflow:hidden;display:grid;place-items:center;
 background:linear-gradient(135deg,#1d1c19,#2a2721);box-shadow:0 22px 50px -20px rgba(0,0,0,.85),inset 0 0 0 1px var(--line)}
.hv-cover img{width:100%;height:100%;object-fit:cover;animation:hv-in .6s ease-out}
.hv-cover b{padding:18px;font:560 var(--t1)/1.08 var(--disp);letter-spacing:-.03em;text-align:center;overflow-wrap:anywhere;color:var(--ink)}
.is-reading .hv-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(247,178,74,.12) 50%,transparent 70%);background-size:220% 100%;animation:hv-sheen 1.6s linear infinite}
@keyframes hv-sheen{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes hv-in{from{opacity:0;transform:scale(1.03)}}
.hv-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.hv-title{font:520 var(--t1)/1.12 var(--disp);letter-spacing:-.022em;text-wrap:balance}
.hv-meta .pm-lab{margin-top:3px;color:var(--dim)}
.is-reading .hv-title{color:var(--faint)}
.hv-play{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;padding:0;background:var(--ink);color:var(--on-btn);cursor:pointer;
 box-shadow:0 12px 30px -10px rgba(247,178,74,.6)}
.hv-play svg{width:20px;height:20px}
.hv-play .is-p,.is-playing .hv-play .is-s{display:none}
.is-playing .hv-play .is-p{display:block}
.is-loading .hv-play{animation:hv-breathe 1s ease-in-out infinite alternate}
@keyframes hv-breathe{to{box-shadow:0 0 0 8px rgba(243,238,230,.1)}}
.hv-track{position:relative;height:3px;margin-top:14px;border-radius:2px;background:rgba(243,238,230,.16);overflow:hidden}
.hv-track i{position:absolute;inset:0 auto 0 0;width:calc(var(--p)*100%);background:var(--ink);border-radius:2px}
.is-reading .hv-track i{width:30%;background:rgba(243,238,230,.4);animation:hv-scan 1.4s ease-in-out infinite alternate}
@keyframes hv-scan{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.hv-lyr{margin-top:12px;display:grid;gap:5px}
.hv-lyr .pm-sung{color:rgba(243,238,230,.6);transition:color .35s}
.hv-lyr .is-on .pm-sung{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.hv-lyr .pm-sung{color:var(--ink)}}

.hv-text{margin-top:14px}
.hv-status{display:flex;align-items:center;gap:10px;margin-top:4px;font:500 var(--t3)/1.35 var(--sans);color:var(--dim)}
.hv-status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px 2px rgba(247,178,74,.6);animation:pm-pulse 1.2s ease-in-out infinite alternate}
.hv-text>.pm-fine:first-of-type{margin-top:0}
.hv-ask{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.hv-ask .pm-input{margin-top:16px}
.hv-ask .pm-fine{text-align:center}
.hv-human:empty{display:none}
.hv-human{margin-top:9px}
.hv-said{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.hv-said .hv-quote{margin-top:8px}
[data-progress-slot]:not(:empty){margin-top:8px}
[data-progress-slot] .pm-h1{margin-top:18px}

/* a phone: the record is a compact player (cover left, the song beside it, the lyrics under), so the email ask after it
   stays on the first screen of a 390x749 Instagram browser */
@media (max-width:1023.98px){
 .hv-in{display:grid;grid-template-columns:128px 1fr;column-gap:16px;align-items:center}
 .hv-cover{width:128px;margin:0;border-radius:12px}
 .hv-cover b{padding:10px;font-size:var(--t2)}
 .hv-meta{margin-top:0;flex-direction:column;align-items:flex-start;gap:10px}
 .hv-title{font-size:21px}
 .hv-play{width:44px;height:44px}
 .hv-track,.hv-lyr,.hv-written{grid-column:1 / -1}
 .hv-text{margin-top:12px}
 .hv-ask{margin-top:18px;padding-top:18px}
}

/* ---------- a laptop: a spread, not a stretched phone ----------
   One screen tall. The promise and the box on the left at a size that owns the space, the demo ad beside it at a real
   size. After the paste the same two columns hold their record (right) and the words about it (left). The type scales with
   the window between 1024 and 1728+, so 1280, 1440 and 1728 all read as designed. */
@media (min-width:1024px){
 body:has(.hv) .pm-bar{max-width:1200px;padding:0 48px}
 body:has(.hv) .pm-foot{max-width:1200px;padding-left:48px;padding-right:48px}
 .hv{--wide:clamp(1024px,86vw,1200px);max-width:1200px;padding:0 48px 64px}
 .hv-back{max-width:560px}
 /* One screen, sized by its content rather than stretched to the window: the ad beside the words is sized to fit under a
    900px fold with its caption, and the words sit a little above its middle (site review 2026-09-29: the door filled the
    window, so the words floated ~280px under the bar and the ad ran past the fold). The next section peeks in under it. */
 .hv-door{display:grid;grid-template-columns:minmax(0,680px) auto;justify-content:space-between;align-items:center;column-gap:64px;padding:28px 0 8px}
 .hv-words{padding-top:0;max-width:760px;margin-bottom:56px}
 .hv-words .pm-h1{font-size:clamp(42px,3.6vw,58px);line-height:1.03;letter-spacing:-.035em}
 .hv-words .pm-sub{margin-top:18px;font-size:clamp(17px,1.25vw,21px);line-height:1.45;max-width:28em}
 .hv-words .pm-form,.hv-words .pm-fine,.hv-words .pm-err{max-width:600px}
 .hv-words .pm-form{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:34px}
 .hv-words .pm-form .pm-input,.hv-words .pm-form .pm-btn{height:58px}
 .hv-words .pm-form .pm-btn{margin-top:0;width:auto;padding:0 30px}
 .hv-words .pm-fine{text-align:left;margin-top:14px}
 /* the example takes the right column, sized by the window's width but never taller than the fold leaves it (a 1440x790
    laptop once showed it at 245px, a thumbnail; at 1440x900 it ran past the fold). */
 .hv-door .hv-eg{--rw:min(clamp(280px,22vw,330px),calc((100vh - 72px - 170px) * 9 / 16));width:var(--rw);margin-top:0;display:flex;flex-direction:column}
 .hv-door .hv-eg-top{min-height:0;margin-bottom:10px}
 .hv-door .hv-slides{--cw:var(--rw);width:var(--rw);margin:0;padding:0;scroll-padding:0}
 .hv-door .hv-card{--cw:var(--rw)}
 .hv-reel{border-radius:20px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 100px -50px rgba(247,178,74,.45)}
 /* after the first screen: the other examples in a plain row (no carousel controls: all of them show), the $29 beside them */
 .hv-kit{display:grid;grid-template-columns:auto minmax(290px,360px);justify-content:space-between;align-items:center;column-gap:64px;margin-top:40px;padding-top:56px}
 .hv-kit .hv-eg-top{margin-bottom:22px}
 .hv-kit .hv-eg-top .pm-h1{font-size:clamp(30px,2.6vw,40px);line-height:1.08;letter-spacing:-.03em}
 .hv-row .hv-arrows,.hv-row .hv-kinds{display:none}
 .hv-row .hv-slides{--cw:clamp(190px,15vw,232px);margin:0;padding:0;gap:20px;overflow:visible;cursor:auto}
 .hv-get{margin-top:0;padding:26px 26px 22px}
 .hv-get .pm-btn{width:100%}
 .hv-kit>.hv-made{grid-column:1 / -1;text-align:left}
 .hv-quote{font-size:var(--t2)}
 .hv-live{display:grid;grid-template-columns:minmax(0,560px) clamp(380px,30vw,460px);grid-template-areas:"text rec";justify-content:space-between;align-items:center;column-gap:64px;
  min-height:calc(100vh - 72px - 72px);padding:12px 0 48px}
 .hv-rec{grid-area:rec}
 .hv-text{grid-area:text;margin-top:0}
 .hv-cover{width:100%}
 .hv-text .hv-status{font-size:var(--t2)}
 .hv-ask{border-top:0;padding-top:0;margin-top:22px}
 .hv-ask .pm-h2{font-size:clamp(24px,2vw,32px);line-height:1.12;letter-spacing:-.025em}
 .hv-ask .pm-sub{font-size:var(--t2)}
 .hv-ask .pm-fine{text-align:left}
 .hv-ask .pm-btn{width:auto;padding:0 30px}
 [data-progress-slot] .pm-h1{margin-top:0;font-size:clamp(28px,2.4vw,40px);line-height:1.08;letter-spacing:-.03em}
}
/* 1024-1199: the three ads take the width, the $29 goes under them */
@media (min-width:1024px) and (max-width:1199.98px){
 .hv-kit{grid-template-columns:auto;justify-content:start}
 .hv-get{max-width:560px;margin-top:36px}
}