/*
 * Cover: the ad, live. Paper field, rule rows top and bottom, the ultra-heavy
 * headline with two marker strokes, the sticker, and a stack of real client work.
 * Phones (under 1024): 4-line headline, line and buttons above the fold,
 * devices stacked below. Desktop: devices in columns 8 to 12 beside lines 2 and 3.
 */

.cover {
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}
.cover__inner {
  display: flex;
  flex-direction: column;
}

/* ---------- top rule row ---------- */

.cover__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px 13px;
}
.cover__tagline { max-width: 19em; }
.cover__where { display: none; white-space: nowrap; }

/* ---------- headline ---------- */

.cover__main { position: relative; }
.cover__head {
  position: relative;
  z-index: 2;
  margin-top: 30px;
}
.cover__title {
  position: relative;
  font-size: var(--fs-hero);
  color: var(--ink);
}
/* Room under each masked line so descenders and the marker's chisel end are never clipped. */
.cover__title .split-line { padding-bottom: .14em; margin-bottom: -.14em; }
.cover__title mark.hl { padding: 0 .05em; margin: 0 -.05em; }
/* Phones: line 1 always breaks after its first word (a very wide space forces the wrap). */
.cover__split { word-spacing: 100vw; }
.cover__anchor {
  display: inline-block;
  width: 0;
  height: .72em;
  anchor-name: --cover-line-one;
}

/* Sticker: in the empty space right of "Your", lower edge on the top of "marketing." */
.cover__sticker {
  position: absolute;
  z-index: 3;
  top: calc(var(--fs-hero) * .8);
  right: 2px;
  translate: 0 -100%;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.cover__sticker .sticker { font-size: clamp(.8125rem, .6rem + .9vw, 1.5rem); }
/* Depth Drift moves these inner layers; the outer wrappers own the positioning translate. */
.cover__drift { display: block; }

/* ---------- line and call buttons ---------- */

.cover__intro {
  position: relative;
  z-index: 2;
  margin-top: 22px;
}
.cover__line {
  color: var(--ink);
  max-width: 31ch;
}
.cover__calls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}
.cover__call {
  justify-content: center;
  gap: 10px;
  padding-inline: 10px 12px;
}

/* ---------- device stack (phones first) ---------- */

.cover__devices {
  position: relative;
  z-index: 1;
  margin-top: 44px;
  padding-top: 13vw;
}
.cover__browser {
  position: absolute;
  top: 0;
  left: calc(34vw - var(--gx));
  width: 78vw;
}
.cover__tilt { perspective: 1600px; }
.cover__phone {
  position: relative;
  width: 58vw;
  margin-inline: auto;
  translate: -6vw 0;
}
.cover__devices--solo { padding-top: 0; }
.cover__devices--solo .cover__browser { position: relative; left: 0; width: 100%; }

/* The shared frames render their viewports as <span>s; make them boxes so aspect-ratio applies. */
.cover__frame .frame-browser__view,
.cover__handset .frame-phone__view { display: block; }

/* ---------- bottom rule row ---------- */

.cover__foot {
  position: relative;
  z-index: 2;
  margin-top: 40px;
}
.cover__footrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  min-height: 64px;
}
.cover__more {
  display: none;
  align-items: center;
  gap: .7em;
  min-height: 48px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.cover__more svg {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--ease-soft);
}
.cover__more:hover span { text-decoration: underline; text-underline-offset: .3em; }
.cover__more:hover svg { transform: translateY(3px); }
.cover__signoff {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 100%;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--link); /* cobalt on paper; follows Lights Down to the lifted blue on night */
  white-space: nowrap;
}

/* ---------- small phones ---------- */

@media (max-width: 374px) {
  .cover__call { padding-inline: 8px 10px; gap: 8px; }
  .cover__call .btn-call__name { font-size: 1rem; }
}

/* ---------- tablet ---------- */

@media (min-width: 768px) {
  .cover__top { padding-block: 16px 15px; }
  .cover__where { display: block; }
  .cover__tagline { max-width: none; }
  .cover__head { margin-top: 40px; }
  .cover__sticker { right: 0; }
  .cover__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 32px;
    margin-top: 32px;
  }
  .cover__calls { display: flex; margin-top: 0; }
  .cover__call { padding-inline: 18px 22px; gap: 14px; }
  /* The phone's top lands about 68% down the browser (bar plus a 16:10 capture),
     below the capture's headline, so it only overlaps the bottom-left corner. */
  .cover__devices { margin-top: 56px; padding-top: calc(min(66vw, 620px) * .47); }
  .cover__browser { left: auto; right: 0; width: min(66vw, 620px); }
  .cover__phone { width: min(30vw, 260px); margin-inline: 4% 0; translate: none; }
  .cover__more { display: inline-flex; }
  .cover__footrow { justify-content: space-between; }
}

/* ---------- desktop: the ad layout ---------- */

@media (min-width: 1024px) {
  .cover {
    --line: calc(var(--fs-hero) * .86);
    min-height: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
  }
  .cover__inner { flex: 1; }
  .cover__main {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: var(--gutter);
  }
  .cover__head {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-top: clamp(24px, 4.2svh, 52px);
  }
  .cover__split { word-spacing: normal; }

  /* Sticker over the top-right end of line 1. Fallback uses the measured width of "Your marketing." */
  .cover__sticker {
    top: 0;
    left: auto;
    right: calc(100% - var(--fs-hero) * 7.91);
    translate: 20% -62%;
  }
  .cover__sticker .sticker { font-size: var(--fs-sticker); }
  @supports (anchor-name: --a) {
    .cover__sticker {
      position-anchor: --cover-line-one;
      right: anchor(right);
      top: anchor(top);
    }
  }

  .cover__intro {
    grid-column: 1 / 7;
    grid-row: 2;
    display: block;
    align-self: start;
    margin-top: clamp(22px, 3.4svh, 40px);
  }
  .cover__line { max-width: 33ch; }
  .cover__calls { margin-top: clamp(20px, 3svh, 30px); gap: 12px; }

  .cover__devices {
    grid-column: 8 / -1;
    grid-row: 1 / 3;
    align-self: start;
    justify-self: end;
    width: min(40vw, 640px);
    margin-top: calc(clamp(24px, 4.2svh, 52px) + var(--line) + .16 * var(--fs-hero));
    padding-top: 0;
  }
  .cover__browser {
    position: relative;
    left: auto;
    right: auto;
    width: 100%;
  }
  .cover__tilt { transform: perspective(1600px) rotateY(-8deg) rotateX(4deg); transform-origin: 60% 50%; }
  /* The phone's top sits below the capture's headline and lede (about 68% down the
     browser), so it only overlaps the bottom-left corner and hangs below it. */
  .cover__phone {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 68%;
    /* 18svh keeps its hang past the fold near 10% on short laptop screens. */
    width: clamp(130px, min(11vw, 18svh), 190px);
    margin: 0;
    translate: -46% 0;
  }

  .cover__foot { margin-top: 28px; }
  .cover__footrow { min-height: 68px; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .cover__phone { translate: -30% 0; }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .cover__head { margin-top: 20px; }
  .cover__devices { margin-top: calc(20px + var(--line) + .16 * var(--fs-hero)); }
}

/* ---------- first paint ---------- */

/* Phones: the H1 and the device captures paint as soon as they are parsed (they are
   the LCP candidates). The H1 skips Ink Set here and the Dock is transform-only,
   run by CSS so it starts with the first frame instead of waiting for scripts. */
@media (max-width: 767px) {
  html.motion-ready .cover__title[data-ink-set] { visibility: visible; }
  html.motion-ready .cover__devices [data-dock] { opacity: 1; }
  html.motion-ready .cover__browser [data-dock] { animation: cover-dock-browser 1.1s cubic-bezier(.23, 1, .32, 1) .6s backwards; }
  html.motion-ready .cover__phone [data-dock] { animation: cover-dock-phone 1.1s cubic-bezier(.23, 1, .32, 1) .72s backwards; }
}
@keyframes cover-dock-browser {
  from { transform: translateX(20vw) scale(.85); }
}
@keyframes cover-dock-phone {
  from { transform: translate(30vw, 10vh) rotate(10deg) scale(.92); }
}

/* Failsafe: if cover.js has not taken over 1.2s after first paint (slow network),
   show the hidden starting states as they are. cover.js adds .is-live when it runs. */
@keyframes cover-show { to { visibility: visible; opacity: 1; } }
html.motion-ready .cover:not(.is-live) [data-slap] { animation: cover-show 0s 1.2s forwards; }
@media (min-width: 768px) {
  html.motion-ready .cover:not(.is-live) [data-ink-set],
  html.motion-ready .cover:not(.is-live) [data-dock] { animation: cover-show 0s 1.2s forwards; }
}