/* ==========================================================================
   HERO (Olsaar edition): the intro on its own, no film. Every rule is scoped under .hero.
   The first screen is the headline (one platform's real logo on line 2, turned by the tide),
   the explainer + CTAs, the "Posts to" waterline, and the phone wall standing in the pink crest of
   chapter 01. No JS or reduced motion: the same layout, Instagram on line 2, a still waterline,
   a still row of phones. Behaviour: js/platforms.js, js/herowall.js; logo files: assets/brands/.
   ========================================================================== */

.hero {
  position: relative;
  background: var(--paper);
  isolation: isolate;
}

/* One screen tall, minus a strip for chapter 01's crest: the intro on top, the phone wall filling the rest
   down to the hero's bottom edge, where the crest's pink water covers the phones' lower part. */
.hero .hero-pin {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 4.5rem);
  min-height: calc(100svh - 4.5rem);
  background-color: var(--paper);
}

/* ---------- Intro: H1 left, explainer + CTAs right, the platforms row under both ---------- */

.hero-intro {
  position: relative;
  z-index: 0;
  container-type: inline-size; /* the headline is sized from this width (cqi) */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: start;
  row-gap: clamp(2.25rem, 5vh, 3.5rem);
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vh, 4.5rem));
}

/* Three fixed lines: "Run hundreds of" / [logo] / "accounts like one." The logo has line 2 to itself,
   so nothing else ever moves. Sized from the intro's width so "accounts like one." (8.95em) always
   fits the eight columns. */
.hero-title {
  grid-column: 1 / span 8;
  font-size: clamp(2.5rem, 5.8vw, 5.5rem);
  font-size: clamp(2.5rem, 6.4cqi, 6rem);
  color: var(--navy);
}

.hero-side {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 0.3em;
}

.hero-explainer {
  font-size: clamp(1rem, 1.22vw, 1.125rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: #3d424c;
  text-wrap: pretty;
}
.hero-explainer .t-fg { color: var(--navy); font-weight: 560; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- Platforms 1: the tide brings the next one in (js/platforms.js) ----------
   Line 2 holds one platform's real logo. Each logo hangs from a zero-height box on the text
   baseline, positioned in em so the wordmarks sit in the sentence (Mona Sans, measured: cap
   height 0.729em, x-height 0.534em):
     Instagram, YouTube, TikTok: the wordmark's cap height = the headline's cap height
       (TikTok at 92%: its note is taller than a 0.97 line and would touch line 1 otherwise);
     facebook (lowercase): its x-height = the headline's x-height.
   Instagram's and Facebook's glyphs are as tall as YouTube's play button (0.868em), 1/4 of their
   width from the wordmark (Meta's clear space). Line 2 has 1.08 leading (vs 0.97), always.
   The turn: a flood-pink wave line (the section crests' curve) rises through a 1.34em window
   round the logo. Two masks share that edge: the next logo shows below it and rises 0.24em into
   place, the last one shows above it and sinks. Only masks and transforms move; every logo
   stays in one grid cell, so the headline's layout is identical in every frame. */
.hero-tl { display: block; white-space: nowrap; }

.hero-rot {
  --tide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 512.35C150 483.85 300 468.65 470 476.25C660 484.8 770 531.35 970 527.55C1140 524.7 1220 480.05 1440 485.75V1000H0Z'/%3E%3C/svg%3E");
  --tide-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 512.35C150 483.85 300 468.65 470 476.25C660 484.8 770 531.35 970 527.55C1140 524.7 1220 480.05 1440 485.75V0H0Z'/%3E%3C/svg%3E");
  display: inline-grid;
  line-height: 1.08;
}
.hero-rot-w,
.hero-rot-t {
  grid-area: 1 / 1;
  justify-self: start;
}
.hero-rot-w:not(.is-on),
.hero-rot-t { display: none; } /* static (no JS, reduced motion): Instagram */
.hero-lg {
  position: relative;
  display: inline-block;
  width: var(--w);
  height: 0;
}
/* the window the tide passes through: 1.02em above the baseline to 0.32em below */
.hero-lgm {
  position: absolute;
  left: 0;
  top: -1.02em;
  width: 5.8em;
  height: 1.34em;
}
.hero-lgi { position: absolute; inset: 0; }
.hero-lg img {
  position: absolute;
  display: block;
  max-width: none;
}
.hero-lg-g { left: 0; bottom: 0.2723em; width: 0.8679em; height: 0.8679em; }
.hero-lg--ig { --w: 5.558em; }
.hero-lg--ig .hero-lg-w { left: 1.088em; bottom: 0.0575em; width: 4.4701em; height: 0.9915em; }
.hero-lg--tt { --w: 3.7595em; }
.hero-lg--tt .hero-lg-w { left: 0; bottom: 0.2662em; width: 3.7595em; height: 1.006em; }
.hero-lg--yt { --w: 4.0204em; }
.hero-lg--yt .hero-lg-w { left: 0; bottom: 0.2723em; width: 4.0204em; height: 0.8679em; }
.hero-lg--fb { --w: 5.698em; }
.hero-lg--fb .hero-lg-w { left: 1.088em; bottom: 0.3063em; width: 4.61em; height: 0.8237em; }

/* the wave line itself: same curve and box as the masks, a flood-pink stroke. It is drawn inside a
   band round the logo's body (0.86em above the baseline to 0.2em below) that fades out at its top
   and bottom, so it never reads as a rule under line 1 or over line 3. */
.hero-tide-band {
  position: absolute;
  left: 0;
  top: -0.86em;
  width: 5.8em;
  height: 1.06em;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%);
}
.hero-tide {
  position: absolute;
  left: 0;
  top: -0.16em; /* = 1.02em above the baseline, like the masks' window */
  width: 5.8em;
  max-width: none; /* the base reset caps svg at 100% of the zero-width anchor */
  height: 3.35em;
  overflow: visible;
  fill: none;
  stroke: var(--flood);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 90%, transparent 100%);
}
.hero-tide path { vector-effect: non-scaling-stroke; }

.hero-rot.is-live .hero-rot-w { display: block; visibility: hidden; }
.hero-rot.is-live .hero-rot-w.is-on,
.hero-rot.is-live .hero-rot-w.is-out { visibility: visible; }
.hero-rot.is-live .hero-rot-t { display: block; }
.hero-rot-w.is-in .hero-lgm,
.hero-rot-w.is-out .hero-lgm {
  -webkit-mask: var(--tide) 0 -0.285em / 100% 3.35em no-repeat;
  mask: var(--tide) 0 -0.285em / 100% 3.35em no-repeat;
}
.hero-rot-w.is-out .hero-lgm {
  -webkit-mask-image: var(--tide-top);
  mask-image: var(--tide-top);
}
.hero-rot.is-turning .hero-tide { opacity: 1; }
/* The motion itself is Web Animations started by js/platforms.js: the edge (the middle of the 3.35em mask image, a
   0.21em-high wave) and the line travel from 0.37em under the baseline (clear of Instagram's
   descender) to 1.06em over it (clear of TikTok's note); the next logo rises 0.24em into place,
   the last one sinks 0.2em. */

/* ---------- Platforms 2: "Posts to", on the waterline (js/platforms.js) ----------
   The four platforms sit still on a thin wave line that drifts slowly. The one the headline
   names is lit: its name in full ink, raised a little, and the line swells under it. The logos
   are never dimmed or recoloured; the others' names are the calm caption grey (AA on paper).
   No JS: the row with Instagram lit and no line. Reduced motion: a still line. */
.hero-posts {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  min-width: 0;
}
.hero-posts .t-label { flex: none; line-height: 1.5rem; color: #61687a; }
.hero-wl {
  position: relative;
  min-width: 0;
  padding-bottom: 0.875rem; /* the waterline runs here */
}
.hero-wl-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-wl-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-stretch: 112%;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.5rem;
  color: #61687a;
  white-space: nowrap;
  transition: transform 0.7s var(--ease-tide), color 0.5s ease;
}
.hero-wl-list li.is-lit { color: var(--navy); transform: translateY(-0.1875rem); }
.hero-wl-list img { flex: none; display: block; width: 1.25rem; height: 1.25rem; }
.hero-wl-list .hero-wl-tt { width: 1.125rem; }
.hero-wl-list .hero-wl-yt { width: 1.8125rem; }
.hero-wl-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ---------- The phone wall (js/herowall.js) ----------
   One real iPhone per account, each on a reel, in a row that drifts left. The track holds the set twice
   (js clones it) and moves by exactly one set (-50%; every phone carries its gap as margin-right), so the
   loop has no seam. Phones hang from the hero's bottom edge, their lower part below it: the next
   section's crest (the pink water) paints over that edge. A sweep: each phone swipes to the same new reel
   and shows "Posted" (.is-ok), left to right. */
.hero-wall {
  --ph-w: clamp(7rem, 11.5vw, 11.5rem);
  --ph-h: calc(var(--ph-w) * 2.1667); /* 9 : 19.5 */
  --ph-gap: clamp(0.75rem, 1.4vw, 1.375rem);
  position: relative;
  flex: 1 0 auto;
  min-height: calc(var(--ph-h) * 0.86);
  margin-top: clamp(1.75rem, 4vh, 3rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.hero-wall-track {
  position: absolute;
  left: 0;
  bottom: calc(var(--ph-h) * -0.18);
  display: flex;
  width: max-content;
  padding-left: var(--ph-gap);
}
.mf-motion .hero-wall.is-loop .hero-wall-track {
  padding-left: 0;
  animation: hw-drift var(--hw-dur, 90s) linear infinite;
  will-change: transform;
}
.hero-wall.is-off .hero-wall-track { animation-play-state: paused; }
@keyframes hw-drift { to { transform: translate3d(-50%, 0, 0); } }

.hw-ph {
  flex: none;
  width: var(--ph-w);
  height: var(--ph-h);
  margin-right: var(--ph-gap);
  padding: calc(var(--ph-w) * 0.035);
  border-radius: calc(var(--ph-w) * 0.165);
  background: #0b0d10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1.5rem 2.5rem -1.5rem rgba(11, 13, 16, 0.5);
}
.hw-scr {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--ph-w) * 0.135);
  background: #15181e;
  isolation: isolate;
}
/* the island, and a shade at the top so the handle reads on any reel */
.hw-scr::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: calc(var(--ph-w) * 0.045);
  left: 50%;
  width: 32%;
  height: calc(var(--ph-w) * 0.085);
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
.hw-scr::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 26%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
}
.hw-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hw-img.is-next { transform: translateY(100%); }
.hw-id {
  position: absolute;
  z-index: 3;
  left: 7%;
  top: 13%;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  max-width: 86%;
  padding: 0.4em 0.6em 0.4em 0.5em;
  border-radius: 999px;
  background: rgba(11, 13, 16, 0.72);
  font-size: max(0.625rem, calc(var(--ph-w) * 0.068));
  font-weight: 620;
  line-height: 1;
  letter-spacing: -0.005em;
  color: #ffffff;
  white-space: nowrap;
}
.hw-id .g { flex: none; width: 1.05em; height: 1.05em; fill: currentColor; }
.hw-ok {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 38%;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.5em 0.8em 0.5em 0.65em;
  border-radius: 999px;
  background: var(--flood);
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(11, 13, 16, 0.5);
  font-size: max(0.6875rem, calc(var(--ph-w) * 0.078));
  font-weight: 660;
  line-height: 1;
  color: #0a0a0b;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 0.5rem) scale(0.9);
  transition: opacity 0.3s ease, transform 0.5s var(--ease-tide);
}
.hw-ok .i { width: 1em; height: 1em; stroke-width: 3; }
.hw-ph.is-ok .hw-ok { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .hero-ctas .btn-lg { padding: 0 1.375rem; }
}

@media (max-width: 1023px) {
  .hero-title { grid-column: 1 / -1; font-size: clamp(2.5rem, 6.3vw, 6rem); }
  .hero-side { grid-column: 1 / span 9; padding-top: 0; }
}

@media (max-width: 760px) {
  .hero .hero-pin { min-height: 0; }
  .hero-wall { margin-top: 2.25rem; }
  .hero-intro {
    row-gap: 1.75rem;
    padding-top: calc(var(--nav-h) + 2.25rem);
  }
  /* "accounts like one." (8.95em) sets the size on a phone */
  .hero-title { font-size: clamp(2rem, 10.9cqi, 3.25rem); }
  .hero-posts { gap: 1rem; }
  .hero-side { grid-column: 1 / -1; gap: 1.25rem; }
  .hero-explainer { font-size: 1rem; }
  .hero-ctas .btn { flex: 1 1 0; }
}

/* phones: the four platforms in two rows of two (each row gets its own waterline) */
@media (max-width: 560px) {
  .hero-wl-list {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 1.125rem 2rem;
  }
}

@media (max-width: 380px) {
  .hero-ctas .btn-lg { --btn-h: 3rem; padding: 0 1rem; }
}