/* The Marketing Cartel · hero · DESKTOP layer (≥1024px; linked with media="(min-width: 1024px)"). The E02/E03 desktop
   hero, navbar lockup and proof strip, unchanged except the removed phone overrides (the phone is rebuilt in hero.css). */

/* ---------- navbar lockup (desktop): symbol + live wordmark ---------- */
.nav__logo { gap: 10px; }
.nav__symbol { width: 36px; height: 36px; flex: none; }
.nav__wordmark {
  font: 780 1.0625rem / 1 var(--font-sans);
  letter-spacing: -.024em;
  white-space: nowrap;
}
/* the lockup rule of the system: the full name where there is room, "Marketing Cartel" where it is tight, the symbol alone
   where neither fits beside the centred links (measured 2026-10-07: full name from 1140 px, "Marketing Cartel" from 1100 px) */
.nav__wordmark .wm-short { display: none; }
@media (max-width: 1139.98px) {
  .nav__wordmark .wm-full { display: none; }
  .nav__wordmark .wm-short { display: inline; }
}
@media (max-width: 1099.98px) {
  .nav__wordmark .wm-short { display: none; }
}

/* ---------- 01 · hero ---------- */
.hero { position: relative; }
.hero__track { position: relative; }
.hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
}

/* #6 blinds: the system background .bg-blinds (components.css); the hero only places it behind the copy */
.hero__blinds { position: absolute; inset: 0; z-index: -1; }

.hero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100% - 2 * var(--gutter), 1200px);
  padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(36px, 6.4vh, 68px));
  text-align: center;
}
.hero__badge { margin-bottom: clamp(14px, 2.4vh, 30px); }
.hero__title {
  max-width: 1180px;
  /* capped by the viewport height too: on short screens (Arthur's 1534×692) the copy shrinks so the first screen
     keeps air between the buttons and the phone + marquee band (Arthur, 25/09) */
  font-size: min(var(--text-display), 10.2vh);
  font-weight: var(--w-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
.hero__title em.acc { letter-spacing: -.02em; }
.br-lg { display: none; }
@media (min-width: 1024px) { .br-lg { display: inline; } }
.hero__lead {
  max-width: 45rem;
  margin-top: clamp(14px, 2.2vh, 26px);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--fg-muted);
  text-wrap: balance;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: clamp(18px, 3vh, 36px);
}

/* devices: the first screen always ends on the phone's top peeking over the client marquee (Arthur, 25/09 — on his
   1534×692 viewport both sat below the fold). The devices box takes the space left under the copy (margin-top: auto)
   and is only --peek tall; the phone overflows it downward and the stage clips the rest. The marquee is its own layer
   at the stage's bottom edge, behind the phone: it leaves with the copy, the phone goes on with its storyboard. */
.hero__devices {
  --phone-w: clamp(230px, 17.5vw, 262px);
  --laptop-w: clamp(520px, 44vw, 660px);
  --stage-h: 480px;
  --peek: clamp(72px, 14vh, 170px);
  --gap: 12px;
  position: relative;
  z-index: 2;
  flex: none;
  width: 100%;
  height: calc(var(--peek) + var(--gap));
  margin-top: auto;
}
.hero__marquee {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: clamp(18px, 3.4vh, 34px);
}
/* the stage the storyboard plays on: perspective from the parent only, origin at its centre (wireframe v2.1e —
   a perspective() inside the element's own transform threw the vanishing point into a corner). Placed so the tilted
   phone's top edge sits --gap under the devices box's top (measured at rest: the tilted phone starts
   208px − .5625 × its width below the wrap's top, at 230–262px wide). */
.hero__device-wrap {
  position: absolute;
  z-index: 2;
  left: 0;
  top: calc(var(--gap) - 208px + var(--phone-w) * .5625);
  width: 100%;
  height: var(--stage-h);
  perspective: 760px;
  perspective-origin: 50% 50%;
}
.hero__tilt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--phone-w);
  transform: translate(-50%, -50%) rotateX(42deg) scale(1.14);
  transform-style: preserve-3d;
}
/* the CSS phone's shadow (it was a drop-shadow on the frame image): a box-shadow follows the same rounded body */
.hero__tilt .device--phone {
  box-shadow: var(--device-rim),
    0 28px 36px light-dark(rgb(20 16 31 / .22), rgb(0 0 0 / .6)), 0 8px 12px light-dark(rgb(20 16 31 / .14), rgb(0 0 0 / .2));
}

.hero__laptop {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: var(--laptop-w);
  transform: translate(-50%, -50%) scale(.72);
  opacity: 0;
}
/* the CSS laptop's shadow (it was a drop-shadow on the frame image): under the lid, which stands on the base */
.hero__laptop::before { box-shadow: var(--device-rim), 0 30px 40px -8px light-dark(rgb(20 16 31 / .22), rgb(0 0 0 / .55)); }

/* feature tags: around the upright phone (and later the laptop); hidden until the storyboard reveals them */
.hero__tags {
  position: absolute;
  z-index: 4;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
/* tags are placed around the stage centre, where the upright phone / the laptop will stand */
.hero__tags .tag { position: absolute; opacity: 0; transform: translateY(14px); }
.hero__tags--phone .tag:nth-child(1) { right: calc(50% + var(--phone-w) * .57 + 34px); top: calc(50% - 150px); }
.hero__tags--phone .tag:nth-child(2) { left: calc(50% + var(--phone-w) * .57 + 34px); top: calc(50% - 60px); }
.hero__tags--phone .tag:nth-child(3) { right: calc(50% + var(--phone-w) * .57 + 58px); top: calc(50% + 70px); }
.hero__tags--laptop .tag:nth-child(1) { right: calc(50% + var(--laptop-w) / 2 + 20px); top: calc(50% - 150px); }
.hero__tags--laptop .tag:nth-child(2) { left: calc(50% + var(--laptop-w) / 2 + 20px); top: calc(50% - 80px); }
.hero__tags--laptop .tag:nth-child(3) { right: calc(50% + var(--laptop-w) / 2 + 36px); top: calc(50% + 40px); }

/* ---------- 02 · proof strip ---------- */
.proof {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--section-y) var(--gutter);
  background: var(--bg);
}
.proof__inner { display: grid; justify-items: center; gap: clamp(36px, 5vh, 56px); width: min(100%, var(--container)); text-align: center; }
.proof__title { font-size: var(--text-h2); letter-spacing: var(--track-heading); }
.proof__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin: 0;
  border-block: 1px solid var(--line);
}
.metric { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; padding: clamp(28px, 4vh, 44px) 16px; }
.metric + .metric { border-left: 1px solid var(--line); }
.metric__value {
  margin: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  font: 800 clamp(3rem, 1.6rem + 3.6vw, 5.25rem) / .9 var(--font-sans);
  letter-spacing: -.045em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.metric__value > span { font-size: .5em; letter-spacing: 0; color: var(--brand); margin-top: .08em; }
.metric__star svg { width: .9em; height: .9em; }
.metric__label { font: var(--w-ui) var(--text-sm) / 1.3 var(--font-sans); color: var(--fg-muted); }
.proof__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- pinned mode (added by storyboard.js on desktop) ---------- */
.hero__pin.is-pinned { height: 100vh; overflow: hidden; }
.hero__pin.is-pinned .hero__track { display: flex; width: 200%; height: 100%; will-change: transform; }
.hero__pin.is-pinned .hero__stage { flex: none; width: 50%; height: 100%; min-height: 0; }
.hero__pin.is-pinned .proof { flex: none; width: 50%; height: 100%; padding-block: 0; }
/* "down" exit (kept, off: storyboard.js EXIT): the track holds only the stage; the proof strip follows the pin */
.hero__pin.is-pinned.is-vertical .hero__track { width: 100%; }
.hero__pin.is-pinned.is-vertical .hero__stage { width: 100%; }

/* ---------- reduced motion: one static composition, nothing pinned ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__stage { min-height: 0; padding-bottom: var(--space-12); }
  .hero__devices { display: grid; justify-items: center; gap: var(--space-8); height: auto; margin-top: var(--space-10); }
  .hero__marquee { position: relative; bottom: auto; width: 100%; margin-top: var(--space-8); }
  .hero__device-wrap { position: relative; top: auto; display: grid; justify-items: center; gap: var(--space-8); height: auto; perspective: none; }
  .hero__tilt { position: relative; top: auto; left: auto; width: min(var(--phone-w), 60vw); transform: none; }
  .hero__tags { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .hero__tags .tag { position: static; opacity: 1; transform: none; }
  .hero__laptop { position: relative; left: auto; top: auto; width: min(var(--laptop-w), 92vw); transform: none; opacity: 1; }
  .hero__tags--laptop { display: none; }
}