/* ============================================================
   SERENADA — basic-copy variant
   Local additions ONLY. The brand / design system is inherited from
   ../styles.css (tokens, type, every component). This file adds just the
   three pieces the new copy needs:
     1. a full-bleed background-video hero
     2. phone-framed app-demo video slots
     3. on-brand placeholders so the page reads before footage exists
   To go live: drop footage into ../../assets/video/ and swap the commented
   <video> in for the .videoslot placeholder. Nothing else changes.
   ============================================================ */

/* ---------- 1 · Full-bleed background-video hero ---------- */
.hero-video{
  position:relative;
  display:flex;align-items:flex-end;
  min-height:clamp(560px,90vh,880px);
  overflow:hidden;
  background:var(--charcoal-900);
}
.hv-media{position:absolute;inset:0;z-index:0;}
.hv-media > video,
.hv-media > img{
  width:100%;height:100%;object-fit:cover;
  /* same warm charcoal duotone the photo system uses */
  filter:grayscale(1) contrast(1.05) brightness(.82) sepia(.22);
}
.hv-media > .videoslot{position:absolute;inset:0;}
.hv-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(29,27,24,.45) 0%,
    rgba(29,27,24,.26) 38%,
    rgba(29,27,24,.93) 100%);
}
.hero-video > .wrap{position:relative;z-index:2;width:100%;}
.hv-content{
  max-width:760px;
  padding:clamp(96px,16vh,200px) 0 clamp(48px,8vh,92px);
}
.hero-video h1{margin:0 0 22px;max-width:16ch;}
.hero-video .lead{max-width:46ch;margin-bottom:32px;color:var(--bone);opacity:.92;}
.hero-video .scrollcue{margin-top:6px;}

/* photoband background image — horizontal flip (subject moves L→R) */
.photoband img.pb-fill--flip{transform:scaleX(-1);}

/* ---------- 2 · Phone-framed app demo ---------- */
.phone-demo{display:flex;flex-direction:column;align-items:center;gap:18px;}
.phone-demo .phone-screen > .videoslot{position:absolute;inset:0;border-radius:32px;}
/* a real app screen dropped straight into the frame (already in-app UI, so no
   notch and no duotone — these show in full colour) */
.phone-demo .phone-screen > img.phone-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:32px;}
/* The default phone frame is var(--charcoal-900), which is also the
   panel-deep background — bezel disappears. Lift the frame one shade so the
   silhouette stays visible against the deepest charcoal. */
.panel-deep .phone{background:var(--charcoal-700);}
.media-note{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.8rem;color:var(--muted-light);letter-spacing:.01em;text-align:center;
}
.media-note .mn-mark{color:var(--orange);font-size:.72rem;}
.panel-dark .media-note,.panel-deep .media-note{color:var(--muted-dark);}

/* ---------- 5 · Waitlist form (stacked, multi-field) ----------
   The inherited .waitform is a one-line pill. The waitlist now collects three
   fields (name, email, region) so it needs a stacked card form, brand-styled. */
.waitform-card{
  display:grid;gap:14px;
  max-width:460px;margin:26px auto 0;
  text-align:left;
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);
  padding:22px;
  box-shadow:0 30px 60px -32px rgba(0,0,0,.45);
}
.waitform-card .wf-field{display:flex;flex-direction:column;gap:6px;}
.waitform-card .wf-label{
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-light);
}
.waitform-card .wf-input,
.waitform-card .wf-select{
  font:inherit;font-size:1rem;color:var(--charcoal);
  background:var(--paper);
  border:1.5px solid var(--line-dark);
  border-radius:var(--r-sm);
  padding:12px 14px;
  outline:none;
  transition:border-color .15s ease,background .15s ease;
  width:100%;
}
.waitform-card .wf-input::placeholder{color:rgba(48,46,42,.4);}
.waitform-card .wf-input:focus,
.waitform-card .wf-select:focus{border-color:var(--orange);background:var(--white);}
.waitform-card .wf-select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23CB6650' stroke-width='2' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}
.waitform-card .wf-select:invalid{color:rgba(48,46,42,.4);}
.waitform-card .btn{margin-top:4px;}
/* The form sits inside .on-dark (photoband). A global rule `.on-dark p {
   color: var(--muted-dark) }` would otherwise win the cascade and render the
   success message as near-invisible bone-on-white. Scoping to .waitform-card
   bumps specificity high enough to beat it without !important. */
.waitform-card .waitform-done{
  font-size:1.08rem;font-weight:700;color:var(--charcoal);
  text-align:center;padding:10px 4px;line-height:1.4;
}
.waitform-card .waitform-done b{color:var(--orange);}
.waitform-card .waitform-done .wf-sub{
  display:block;margin-top:8px;
  font-size:.95rem;font-weight:500;color:var(--charcoal-700);
}

/* ---------- 4 · Long-form document (privacy / terms) ---------- */
.doc{max-width:760px;margin:0 auto;color:var(--charcoal);font-size:1.02rem;line-height:1.72;}
.doc-header{padding:clamp(56px,8vw,108px) 0 clamp(28px,4vw,48px);}
.doc-header .lead{margin-top:14px;}
.doc>section+section{margin-top:clamp(40px,5vw,68px);padding-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--line-dark);}
.doc h2{font-weight:800;font-size:clamp(1.55rem,2.3vw,2rem);line-height:1.18;letter-spacing:-.022em;color:var(--charcoal);}
.doc h2 .doc-num{display:inline-block;font-style:italic;font-weight:800;color:var(--orange);margin-right:14px;letter-spacing:-.03em;}
.doc h3{margin-top:1.7rem;font-weight:700;font-size:1.18rem;line-height:1.3;letter-spacing:-.01em;color:var(--charcoal);}
.doc h4{margin-top:1.3rem;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);}
.doc p,.doc ul,.doc ol{color:var(--muted-light);}
.doc p+p,.doc p+ul,.doc h2+p,.doc h3+p,.doc h4+p,.doc h4+ul,.doc ul+p,.doc ol+p{margin-top:.85rem;}
.doc p strong,.doc li strong{color:var(--charcoal);font-weight:700;}
.doc ul{list-style:none;padding-left:0;}
.doc ul li{position:relative;padding-left:20px;margin-top:.35rem;}
.doc ul li::before{content:'';position:absolute;left:4px;top:.78em;width:7px;height:2px;background:var(--orange);border-radius:1px;}
.doc .doc-basis{font-size:.94rem;color:var(--muted-light);margin-top:1rem;padding:11px 16px;border-left:2px solid var(--orange);background:var(--bone);border-radius:0 var(--r-sm) var(--r-sm) 0;}
.doc .doc-basis strong{color:var(--charcoal);}
.doc a{color:var(--orange);border-bottom:1px solid rgba(203,102,80,.45);padding-bottom:1px;transition:border-color .15s ease,color .15s ease;}
.doc a:hover{color:var(--orange-600);border-bottom-color:var(--orange-600);}
.doc table.retention{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.96rem;}
.doc table.retention th{text-align:left;padding:12px 14px;border-bottom:1.5px solid var(--line-dark);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);}
.doc table.retention td{padding:12px 14px;border-bottom:1px solid var(--line-dark);vertical-align:top;color:var(--charcoal);}
.doc table.retention td:last-child{color:var(--muted-light);}

/* ---------- 3 · Video placeholder ---------- */
/* On-brand stand-in shown until real footage is dropped in. */
.videoslot{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;
  min-height:180px;text-align:center;
  background:
    radial-gradient(120% 95% at 72% 16%,rgba(203,102,80,.18),transparent 58%),
    linear-gradient(150deg,var(--charcoal-700) 0%,var(--charcoal-900) 100%);
}
.videoslot > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.videoslot .vs-play{
  width:60px;height:60px;border-radius:50%;
  border:1.6px solid var(--orange);color:var(--orange);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;padding-left:5px;
  animation:vspulse 2.8s ease-in-out infinite;
}
.videoslot .vs-label{
  font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-dark);line-height:1.6;max-width:24ch;padding:0 18px;
}
@keyframes vspulse{0%,100%{opacity:1;}50%{opacity:.45;}}
@media(prefers-reduced-motion:reduce){.videoslot .vs-play{animation:none;}}