/* The Lumen hero: one still, the buy lockup, and the row of hosts.
 *
 * Was lumen-hero-reveal.css, which drove a drag-to-reveal comparison. The
 * reveal is gone; everything else in this file is unchanged, because the
 * lockup, the eyebrow and the breakpoints were never about the reveal.
 *
 * The plate geometry is inherited from the plates it replaces: the art sits
 * right of center so the copy column stays on black, with a two-axis scrim
 * keeping that column readable when the art is bright.
 */

.lumen-hero-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  pointer-events: none;
}

.lumen-hero-plate-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover. The frame is a bulb on black: cover crops into the
     glass and shows a wall of orange, while contain keeps the whole bulb and
     letterboxes with the one color the page is already made of. */
  object-fit: contain;
  object-position: right center;
}

/* The Lumen hero: one still, and the row of hosts under the title.
 *
 * Replaces lumen-hero-reveal.css, which drove a drag-to-reveal comparison.
 * The plate positioning is inherited from it unchanged, because the geometry
 * was right: the art sits right of center so the copy column stays on black,
 * and a two-axis scrim keeps that column readable when the art is bright.
 */

.lumen-hero {
  position: relative;
}

.lumen-hero-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  pointer-events: none;
}

.lumen-hero-plate-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover. The frame is a bulb on black: cover crops into the
     glass and shows a wall of orange, while contain keeps the whole bulb and
     letterboxes with the one color the page is already made of. */
  object-fit: contain;
  object-position: right center;
}

/* Horizontal pass carries the copy column; vertical pass seats the art and
   stops the bright filament fighting the hero lockup. */
.lumen-hero-plate-scrim {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 32%, rgba(0, 0, 0, .08) 60%, transparent 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, .5) 100%);
}

/* The Lumen hero: one still, and the row of hosts under the title.
 *
 * Replaces lumen-hero-reveal.css, which drove a drag-to-reveal comparison.
 * The plate positioning is inherited from it unchanged, because the geometry
 * was right: the art sits right of center so the copy column stays on black,
 * and a two-axis scrim keeps that column readable when the art is bright.
 */

.lumen-hero {
  position: relative;
}

.lumen-hero-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  pointer-events: none;
}

.lumen-hero-plate-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover. The frame is a bulb on black: cover crops into the
     glass and shows a wall of orange, while contain keeps the whole bulb and
     letterboxes with the one color the page is already made of. */
  object-fit: contain;
  object-position: right center;
}

/* Horizontal pass carries the copy column; vertical pass seats the art and
   stops the bright filament fighting the hero lockup. */
.lumen-hero-plate-scrim {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 32%, rgba(0, 0, 0, .08) 60%, transparent 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, .5) 100%);
}

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

/* ── Hosts ──────────────────────────────────────────────────────────────
   Three rows of app, read as shape before it is read as text. The marks are
   our own type and color on purpose: Adobe's app icons are their trade
   dress, so using the real ones is a licensing decision rather than a design
   one, and an approximation of them would be the worse of both. */
.lumen-hosts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.15rem;
  align-items: center;
  margin: .85rem 0 0;
  padding: 0;
  list-style: none;
}

.lumen-hosts li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--paper-soft, #c8c3bb);
  font-size: .78rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

.lumen-host-mark {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--line-strong, rgba(255, 255, 255, .22));
  border-radius: .3rem;
  background: rgba(255, 255, 255, .04);
  color: var(--gold, #e6a23c);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
}

/* Lumen Glow hero reveal. Scoped to this page so Entropy's hero is untouched.
   The layer is absolutely stretched to the section box, so it covers the
   space above the title and continues behind the headline, subhead, and
   description. Copy stays in .hero-body, above the plates. */

.lumen-hero .hero-body {
  position: relative;
  z-index: 1;
}

/* "Available now" on the dark plates. Shared gold (#e6a23c), a step
   larger than the quiet .section-label, so the eyebrow stays readable.
   The Entropy hero carries the same eyebrow, styled to match in
   entropy-hero-live.css. */
.lumen-hero .section-label {
  color: var(--gold);
  font-size: .92rem;
}

/* Page-scoped. Pulls p.hero-belief up under h1.hero-title without touching
   --leading-display or the shared headline rules in wc.css. */
.lumen-hero .hero-copy {
  margin-top: clamp(1.35rem, 2.8vh, 2.15rem);
}

/* Buy Now and the offer price on one row, in flow under the title. */
.lumen-hero-lockup {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .85rem 1.15rem;
}

.lumen-hero-price {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2.15rem);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: 0 1px .9rem rgba(0, 0, 0, .92);
}

/* One Buy Now for this hero. Same gold .button from wc.css, drawn a bit
   larger here. On all widths it sits in flow under the title, left
   aligned to the title's left edge. */
.lumen-hero .lumen-hero-buy {
  min-height: 3.9rem;
  min-width: 15.5rem;
  padding: 1.05rem 3.2rem;
  font-size: 1.32rem;
  z-index: 2;
}

@media (min-width: 761px) {
  /* The copy keeps a stacking level above the plates. */
  .lumen-hero .section-label,
  .lumen-hero .hero-title,
  .lumen-hero .hero-copy {
    position: relative;
    z-index: 1;
  }

  .lumen-hero .lumen-hero-buy {
    display: inline-flex;
    margin-top: 1.5rem;
  }

  .lumen-hero .lumen-hero-price {
    margin-top: 1.5rem;
  }
}

@media (max-width: 760px) {
  .lumen-hero .lumen-hero-lockup {
    margin-top: 1.75rem;
  }

  .lumen-hero .hero-copy {
    margin-top: 2rem;
  }

  .lumen-hero .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-top: 1.5rem;
  }

  .lumen-hero .hero-actions .text-action {
    border-bottom: 0;
    padding: 0;
  }

  .lumen-hero .lumen-hero-buy {
    display: inline-flex;
    width: auto;
    min-width: 0;
    min-height: 3.1rem;
    margin-top: 0;
    padding: .8rem 1.9rem;
    font-size: 1.05rem;
  }

  .lumen-hero .lumen-hero-price {
    margin-top: 0;
  }
}

/* Lumen page only. Same tracks, gutter, and alignment as .proof-row in
   wc.css, so the bottle matches the frames under it in size. The image
   border and radius come from .image-link, the same rule the proof rows
   use. At 900px and below the image stacks under the heading and paragraph.
   .proof-row's auto-fit does not stack that early, so this breakpoint is
   set here. */
[data-nav="lumen-glow"] .story-intro {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(2rem, 4.8vw, 5rem);
  align-items: center;
}

/* The heading and paragraph share the left track, so the paragraph needs
   the same top gap .proof-row p uses. */
[data-nav="lumen-glow"] .story-intro p {
  margin-top: .9rem;
}

@media (max-width: 900px) {
  [data-nav="lumen-glow"] .story-intro {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .lumen-hosts {
    gap: .45rem .8rem;
    margin-top: .7rem;
  }

  .lumen-hosts li {
    font-size: .72rem;
  }

  /* The copy column is full width on a phone, so the scrim runs top to
     bottom rather than left to right. */
  .lumen-hero-plate-scrim {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .62) 40%, rgba(0, 0, 0, .68) 62%, rgba(0, 0, 0, .86) 100%);
  }

  /* cover, not the contain the wide hero uses. A phone hero is tall and
     narrow, so containing a 16:9 frame shrinks it to a thin band adrift in
     black. Cover fills the column and the position holds the bulb in it. */
  .lumen-hero-plate-image {
    object-fit: cover;
    object-position: 68% center;
  }
}