/* Section corrections — headings should read as headers for the content
   directly beneath them. Layered over styles.css. */

/* "Who it's for"
   The band was 430px tall to hold a single line of type, stranding the
   heading ~155px above the grid it introduces. Shrink it and sit the
   heading on the band's baseline so the two read as one section. */
.persona-title {
  min-height: 0;
  align-items: flex-end;
  padding: 64px 6vw;
}

/* Each card pinned its description to the card's bottom edge with
   `margin: auto 0 0`, so the heading and its own copy sat ~91px apart and
   read as unrelated. Let the copy sit under the heading it belongs to. */
.persona-list p {
  margin: 0;
}

.persona-list article {
  gap: 14px;
  min-height: 210px;
  padding-top: 38px;
  padding-bottom: 38px;
}

@media (max-width: 700px) {
  .persona-title {
    padding: 48px 7vw;
  }
}

/* Coverage — cricket and football are destinations, so each is an outlined
   link with an outbound arrow rather than one static line of type. */
.coverage-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.coverage-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ffffff5c;
  color: #fff;
  padding: 22px 0;
  font-size: clamp(28px, 3.1vw, 50px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  transition:
    background-color .3s var(--ease-soft, ease),
    border-color .3s var(--ease-soft, ease),
    color .3s var(--ease-soft, ease);
}

/* styles.css absolutely positions every svg inside .coverage-cell for the
   corner glyph, which would fling these arrows into that corner too. */
.coverage-link svg {
  position: static;
  inset: auto;
  flex: none;
  width: clamp(20px, 1.8vw, 30px);
  height: clamp(20px, 1.8vw, 30px);
  opacity: .8;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}

.coverage-link:hover {
  border-bottom-color: var(--navy);
  color: var(--navy);
}

.coverage-link:hover svg {
  opacity: 1;
  transform: translate(3px, -3px);
}

.coverage-link:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .coverage-links {
    gap: 12px;
  }

  .coverage-link {
    gap: 14px;
    padding: 18px 0;
  }

  /* With the links filling the cell there is no free corner left for the
     decorative glyph, and it lands on the Football rule. It is aria-hidden,
     so drop it at this width. Direct child only — not the link arrows. */
  .coverage-cell > svg {
    display: none;
  }
}

/* Mobile hero — styles.css pins .hero-copy to a 650-720px min-height while the
   copy itself is only ~216px, leaving ~350px of dead space above and below.
   Let the content set the height. */
@media (max-width: 900px) {
  .hero-copy {
    min-height: 0;
    padding: 64px 7vw 72px;
  }
}

/* Heading scale — the hero h1 dropped to 26px on a phone while every section
   h2 sat at 56px, so the page's main heading was half the size of its own
   subheadings. One scale for both, and the proof strip joins it (it was 52px). */
@media (max-width: 700px) {
  .hero h1.source-hero-title,
  .proof-copy h2,
  .split-heading h2,
  .section-heading-row h2,
  .fields-heading h2,
  .coverage-intro h2,
  .persona-title h2 {
    font-size: clamp(34px, 11vw, 46px);
  }
}

/* Same mismatch on desktop, milder: h1 58px, proof strip 62px, sections 64px.
   Put them on the section-heading clamp. The >=1600px hero rule in styles.css
   is deliberate, so this stops short of it. */
@media (min-width: 701px) and (max-width: 1599px) {
  .proof-copy h2 {
    font-size: clamp(46px, 5.2vw, 84px);
  }

  /* The hero title is 78 characters against section headings of 10-24, so it
     cannot take their exact size without stacking. `styles.css` also caps it
     at 500px while its column offers ~600px, which forced 8 lines above
     ~1300px. Give it the full column and its own step just under the section
     scale. */
  .hero h1.source-hero-title {
    max-width: 100%;
    font-size: clamp(44px, 4.6vw, 72px);
  }
}

/* Same cap above 1600px: 600px inside a ~750px column. */
@media (min-width: 1600px) {
  .hero h1.source-hero-title {
    max-width: 100%;
  }
}

@media (min-width: 1600px) {
  .proof-copy h2 {
    font-size: clamp(46px, 5.2vw, 84px);
  }
}

/* Stacked heading bands — once these sections drop to one column their
   min-heights are no longer aligning anything, they just leave dead space
   under a single line of type (fields 540px, coverage 400px). */
@media (max-width: 1000px) {
  .fields-heading,
  .coverage-intro {
    min-height: 0;
  }

  /* The watermark is anchored to the band's bottom edge and is taller than
     the band now is, so bring it down to size. */
  .ghost-icon {
    width: 150px;
    height: 150px;
    bottom: -26px;
    right: -24px;
  }
}

/* The section heading keeps an 82px margin below it at every width, which is
   generous on a wide layout and far too much on a phone. */
@media (max-width: 700px) {
  .section-heading-row {
    margin-bottom: 38px;
  }
}

/* Footer CTA — "Book a Demo" needs 283px at 52px but only ~255px is free on a
   375px screen, so it wrapped to two lines. Scale it with the viewport; the
   floor keeps it on one line down to 320px. */
@media (max-width: 700px) {
  .footer-cta span {
    font-size: clamp(32px, 11.7vw, 52px);
    white-space: nowrap;
  }
}

/* Footer origin line — now a link to the Cricket API, with room beneath it.
   Only below 700px, where the note stacks; above that it is a three-column
   row and a bottom margin would just throw the row off centre.
   Two classes to outweigh `.footer-note p { margin: 0 }`. */
@media (max-width: 700px) {
  .footer-note .footer-origin {
    margin-bottom: 16px;
  }
}

/* Heading weight — the h1 sits at 850 while the proof strip ran 900 and every
   other section ran 800. Match them all to the h1. */
.proof-copy h2,
.split-heading h2,
.section-heading-row h2,
.fields-heading h2,
.coverage-intro h2,
.persona-title h2 {
  font-weight: 850;
}


/* Proof strip — per-logo scale.
   styles.css sizes each cell by nth-child, which assumes a fixed running order
   and breaks the moment a logo moves slot. Key the scale to the file instead:
   square marks get a matched width/height, wordmarks get a width with auto
   height so their own aspect drives it. Three classes to outweigh
   `.logo-cluster-left span:nth-child(n) img`. */
.proof-strip .logo-cluster img[src$="client-jio.png"]            { width: 48%; height: 48%; }
.proof-strip .logo-cluster img[src$="client-burger-king.png"]    { width: 45%; height: 45%; }
.proof-strip .logo-cluster img[src$="client-kings-punjab.png"]   { width: 50%; height: 50%; }
.proof-strip .logo-cluster img[src$="client-starpick.png"]       { width: 52%; height: 52%; }
.proof-strip .logo-cluster img[src$="client-fi.png"]             { width: 46%; height: 46%; }

.proof-strip .logo-cluster img[src$="client-opera-full.png"]     { width: 74%; height: auto; }
.proof-strip .logo-cluster img[src$="client-amazon-echo.png"]    { width: 82%; height: auto; }
.proof-strip .logo-cluster img[src$="client-openbet.png"]        { width: 80%; height: auto; }
.proof-strip .logo-cluster img[src$="client-fun88.png"]          { width: 78%; height: auto; }
.proof-strip .logo-cluster img[src$="client-americandream11.png"]{ width: 80%; height: auto; }
.proof-strip .logo-cluster img[src$="client-zomato.png"]         { width: 78%; height: auto; }
.proof-strip .logo-cluster img[src$="client-raketech.png"]       { width: 84%; height: auto; }