/* ==========================================================================
   Homepage film header — the #desk band
   --------------------------------------------------------------------------
   Overlay model: an absolutely positioned video layer plus a flat dark wash,
   so the band reads as an environment rather than a media player.
   Scope: only the #desk band and the desk-demo section under it. Copy,
   wording and every other section are untouched.
   ========================================================================== */

.hero.hero--film {
  position: relative;
  isolation: isolate;
  display: block;          /* outranks the >=1280px .hero two-column grid */
  overflow: hidden;
  width: 100%;
  max-width: none;
  padding: 92px 0 76px;
  background: var(--void);
  background-image: none;  /* drops the light radial gradient from .hero */
  border-radius: 0;
}

/* One continuous type ramp for the band. The page's own .hero h1 uses
   clamp(36px, 5.8vw, 64px), and the approved concept only overrode it from
   1280px up — which made the headline 64px at 1279px and 56.3px at 1280px,
   i.e. it stepped DOWN as the viewport grew. A single clamp removes the
   discontinuity and leaves the approved >=1440px render identical. */
.hero.hero--film h1 {
  color: var(--film-ink);
  max-width: 18ch;
  font-size: clamp(36px, 4.6vw, 62px);
}

/* --- film layer --- */
.hero.hero--film .hero__film {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero.hero--film .hero__film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* dimmed only: no grade and no blur, so the film reads as slow atmosphere
     behind the copy. Starts transparent and fades to the approved 0.3 once the
     film is actually playing — with preload="none" (Step 7) there would
     otherwise be a beat of flat dark band before the first frame paints. */
  opacity: 0;
  transition: opacity .5s linear;
}

.hero.hero--film .hero__film-video.is-live { opacity: 0.3; }

.hero.hero--film .hero__film-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(6, 11, 20, 0.72);
}

.hero.hero--film .hero__film-body {
  position: relative;
  z-index: 2;
}

/* --- copy flips to the film palette; wording is unchanged --- */
.hero.hero--film .hero__eyebrow { color: var(--film-ink-2); }
.hero.hero--film .hero__sub { color: var(--film-ink-2); }
.hero.hero--film .hero__note { color: var(--film-ink-2); }

/* The rotating phrase is part of the white headline. The page-level cream
   highlighter is dropped here: it only covered the lower third of the line
   box, which left dark ink sitting on the dark film above the band. The
   selector covers every phrase in the rotation, not just the default one. */
.hero.hero--film h1 em,
.hero.hero--film h1 em.loop {
  color: #FFFFFF;
  background: none;
}

.hero.hero--film .btn--ghost {
  color: var(--film-ink);
  border-color: var(--film-line);
}
.hero.hero--film .btn--ghost:hover {
  background: rgba(233, 241, 251, 0.08);
  border-color: var(--film-ink-2);
  color: #FFFFFF;
}

/* The >=1280px page rule shrinks .hero__sub to 15px / 46ch because the copy
   used to sit in a 40% column. The film band is full width, so restore the
   concept's desktop sub size. */
@media (min-width: 1280px) {
  .hero.hero--film .hero__sub { max-width: 52ch; font-size: 16px; }
}

/* --- the reply desk sits directly under the film band --- */
.desk-demo { padding: 56px 0 0; }
.desk-demo .hero__fig { margin-top: 0; }

/* --- the citation legend now lives inside the draft reader, directly above
       its header, next to the numbered citations it explains --- */
.reader .cite-legend {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}

/* --- phones: no film at all. Flat --void band, same copy, no video bytes.
       760px matches the app's own mobile breakpoint in page.css and the
       `w < 760` device class in analytics.js. --- */
@media (max-width: 760px) {
  .hero.hero--film { padding: 64px 0 56px; }
  .hero.hero--film .hero__film { display: none; }
}

/* The 36px floor wraps "Your AI-powered inbox" once the shell is narrower
   than that line, which orphans a fourth row under the two breaks. Scale
   only in that range; from 461px up the signed-off ramp is unchanged. */
@media (max-width: 460px) {
  .hero.hero--film h1 { font-size: clamp(26px, 7.4vw, 34px); }
}

/* The band is decorative: if the user has asked for reduced motion, do not
   loop a video at them. The flat --void band with full-contrast copy is the
   designed fallback and is what every phone gets too. */
@media (prefers-reduced-motion: reduce) {
  .hero.hero--film .hero__film { display: none; }
}