/* NEUCLIPS — BRANDS. Hero architecture E: Inline-Image Typography.
   The sentence literally contains the network. */

/* ══ B1 — HERO · Inline-Image Typography ═══════════════════════ */
.bhero {
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(var(--s16), 10vh, var(--s24)) clamp(var(--s5), 4vw, var(--s16)) clamp(var(--s16), 7vw, var(--s24));
}
.bhero__inner { max-width: 1280px; margin: 0 auto; width: 100%; }
.bhero h1 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(38px, 5.6vw + 8px, 104px);
  line-height: 1.02; letter-spacing: -0.012em;
  margin-top: var(--s6);
}
.bhero h1 em { font-style: normal; color: var(--signal); }
/* the tiles sit at x-height. They are punctuation, not focal elements. */
.bhero h1 img {
  display: inline-block;
  width: clamp(46px, 5.4vw, 96px);
  height: clamp(32px, 3.6vw, 64px);
  border-radius: 3px;
  object-fit: cover;
  vertical-align: baseline;
  transform: translateY(0.08em);
  margin-inline: 0.16em;
  filter: brightness(1.9) contrast(1.22) saturate(0.85);
  box-shadow: 0 0 0 1px rgba(244,241,236,0.18);
  animation: tile-drift 7s var(--spring-smooth) infinite;
}
.bhero h1 img:nth-of-type(2) { animation-delay: 1.1s; }
.bhero h1 img:nth-of-type(3) { animation-delay: 2.3s; }
.bhero h1 img:nth-of-type(4) { animation-delay: 3.4s; }
@keyframes tile-drift {
  0%, 100% { transform: translateY(0.08em); }
  50%      { transform: translateY(-0.06em); }
}
.bhero__sub { margin-top: var(--s8); color: var(--ink-70); max-width: 52ch; font-size: var(--t-lg); }
.bhero__act { margin-top: var(--s8); display: flex; flex-wrap: wrap; gap: var(--s4); }
@media (max-width: 620px) {
  .bhero h1 img { width: 40px; height: 28px; margin-inline: 0.1em; }
}

/* ══ B2 — ACCESS · bento with deliberately unequal cells ═══════
   The largest cell is the NETWORK, not a feature. */
.access { padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16)); }
.access__inner { max-width: 1360px; margin: 0 auto; }
.access h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-2xl); line-height: 0.96; margin-bottom: var(--s12); max-width: 18ch;
}
.access__bento {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1px; background: var(--ink-12);
  border: 1px solid var(--ink-12);
}
.access__cell {
  background: var(--base); padding: clamp(var(--s6), 2.6vw, var(--s12));
  display: flex; flex-direction: column; gap: var(--s4);
  transition: background var(--d-base) var(--ease-snap);
}
.access__cell:hover { background: var(--surface); }
.access__cell h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 2vw, 30px); line-height: 1; }
.access__cell p { color: var(--ink-52); font-size: var(--t-sm); }
/* the network cell spans two rows and takes the widest column */
.access__cell--net {
  grid-row: 1 / span 2; background: var(--surface);
  justify-content: space-between;
}
.access__cell--net h3 { font-size: clamp(30px, 4.2vw, 62px); color: var(--signal); line-height: 0.94; }
.access__cell--net p { color: var(--ink-70); font-size: var(--t-body); }
.access__cell--net .mark { --mk: clamp(9px, 1.3vw, 15px); color: var(--signal); }
@media (max-width: 860px) {
  .access__bento { grid-template-columns: 1fr; }
  .access__cell--net { grid-row: auto; }
}

/* ══ B3 — COVERAGE, LIVE ═════════════════════════════════════════
   The section was a static list on flat near-black. It now sits on a field of
   transmissions and each surface FIRES in turn: the section demonstrates
   coverage rather than enumerating it. Ambient layer, so it never competes
   with a reveal and it stops entirely under reduced motion. */
.cover {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--s20), 8vw, var(--s32)) clamp(var(--s5), 4vw, var(--s16));
  border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12);
}
.cover__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; opacity: 0.55;
}
.cover::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.6) 70%, rgba(10,10,10,0.9) 100%),
    linear-gradient(to bottom, var(--base) 0%, transparent 18%, transparent 82%, var(--base) 100%);
}
.cover__inner { max-width: 1360px; margin: 0 auto; }
.cover__field {
  margin-top: var(--s8);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: baseline;
}
.cover__field span {
  font-family: var(--display); text-transform: uppercase;
  line-height: 1; color: var(--ink-30);
  position: relative;
  transition: color 0.42s var(--ease-snap), text-shadow 0.42s var(--ease-snap);
}
.cover__field span:nth-child(3n+1) { font-size: clamp(24px, 3.6vw, 56px); }
.cover__field span:nth-child(3n+2) { font-size: clamp(17px, 2.2vw, 34px); }
.cover__field span:nth-child(3n+3) { font-size: clamp(20px, 2.8vw, 43px); }
/* the firing state: a surface lights, then falls back */
.cover__field span.is-live {
  color: var(--signal);
  text-shadow: 0 0 26px rgba(255, 212, 0, 0.45);
}
.cover__field span:hover { color: var(--ink); }
.cover__note { margin-top: var(--s8); color: var(--ink-52); font-size: var(--t-sm); max-width: 56ch; }
@media (prefers-reduced-motion: reduce) {
  .cover__field span.is-live { text-shadow: none; }
}

/* ══ B4 — TIERS · differentiated by DENSITY, never by a number ══ */
.tiers { padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16)); }
.tiers__inner { max-width: 1360px; margin: 0 auto; }
.tiers h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-2xl); line-height: 0.96; margin-bottom: var(--s5); max-width: 18ch;
}
.tiers__lede { color: var(--ink-70); max-width: 52ch; margin-bottom: var(--s12); }
.tiers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); align-items: start; }
.tiers__t {
  border: 1px solid var(--ink-12);
  padding: clamp(var(--s6), 2.4vw, var(--s10));
  display: flex; flex-direction: column; gap: var(--s5);
  transition: border-color var(--d-base) var(--ease-snap), transform var(--d-snappy) var(--spring-snappy);
}
.tiers__t:hover { border-color: var(--ink-30); transform: translateY(-4px); }
.tiers__t h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 2.4vw, 36px); line-height: 1; }
.tiers__t ul { display: flex; flex-direction: column; gap: var(--s3); }
.tiers__t li {
  display: grid; grid-template-columns: 10px 1fr; gap: var(--s4);
  color: var(--ink-70); font-size: var(--t-sm); line-height: 1.5;
}
.tiers__t li::before { content: ""; display: block; height: 2px; width: 10px; background: var(--ink-30); margin-top: 0.62em; }
/* the ladder is expressed in weight and density, not in price */
.tiers__t--2 { border-color: var(--ink-30); }
.tiers__t--3 { border-color: var(--signal); }
.tiers__t--3 h3 { color: var(--signal); }
.tiers__t--3 li::before { background: var(--signal); }
.tiers__t--3 li { color: var(--ink); }
@media (max-width: 900px) { .tiers__grid { grid-template-columns: 1fr; } }

/* ══ B5 — ADVERTISING · full-bleed break ═══════════════════════ */
.adv {
  position: relative; isolation: isolate;
  min-height: clamp(400px, 66vh, 700px);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(var(--s10), 5vw, var(--s24));
  overflow: hidden;
}
.adv img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.adv::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 80% at 50% 50%, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.62) 60%, rgba(10,10,10,0.9) 100%),
    linear-gradient(to bottom, var(--base) 0%, transparent 20%, transparent 80%, var(--base) 100%);
}
.adv__body { max-width: 30ch; }
.adv h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(30px, 4.6vw, 78px); line-height: 0.94; }
.adv h2 em { font-style: normal; color: var(--signal); }
.adv p { margin-top: var(--s6); color: var(--ink-70); font-size: var(--t-lg); }

/* ══ B6 — FAQ · accordion, questions in display, answers in grotesk ═ */
.faq { padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16)); background: var(--surface); }
.faq__inner { max-width: 1000px; margin: 0 auto; }
.faq h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-2xl); line-height: 0.96; margin-bottom: var(--s12);
}
.faq__i { border-top: 1px solid var(--ink-12); }
.faq__i:last-child { border-bottom: 1px solid var(--ink-12); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: grid; grid-template-columns: 1fr 28px; align-items: center; gap: var(--s5);
  padding: var(--s8) 0; text-align: left;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(18px, 1.9vw, 30px); line-height: 1.05; color: var(--ink);
  transition: color var(--d-base) var(--ease-snap);
}
.faq__q:hover, .faq__q[aria-expanded="true"] { color: var(--signal); }
.faq__q b {
  display: block; position: relative; width: 20px; height: 20px; justify-self: end;
}
.faq__q b::before, .faq__q b::after {
  content: ""; position: absolute; left: 0; top: 9px;
  display: block; width: 20px; height: 2px; background: currentColor;
  transition: transform var(--d-base) var(--spring-snappy);
}
.faq__q b::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] b::after { transform: rotate(0deg); }
.faq__a { height: 0; overflow: hidden; transition: height var(--d-smooth) var(--spring-smooth); }
.faq__a p { padding-bottom: var(--s8); color: var(--ink-70); max-width: 62ch; }

/* ══ B7 — CTA banner ═══════════════════════════════════════════ */
.bpush {
  background: var(--signal); color: var(--base);
  padding: clamp(var(--s20), 9vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16));
  text-align: center;
}
.bpush__inner { max-width: 900px; margin: 0 auto; }
.bpush h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--t-3xl); line-height: 0.94; letter-spacing: -0.012em;
}
.bpush p { margin-top: var(--s5); opacity: 0.78; font-size: var(--t-lg); }
.bpush .btn { margin-top: var(--s8); background: var(--base); color: var(--signal); padding: var(--s5) var(--s10); font-size: var(--t-body); }
.bpush .btn:hover { background: #000; box-shadow: 0 14px 34px rgba(10,10,10,0.28); }

/* ═══ PASS 2 — BRANDS ═══════════════════════════════════════════ */

/* B1 — the tiles reveal in sequence and drift independently */
.js .bhero h1 img { clip-path: inset(0 100% 0 0); }
.js .bhero.is-in h1 img,
.js .wr.is-in img { clip-path: inset(0 0 0 0); transition: clip-path 0.9s var(--spring-smooth); }
.bhero h1 img:nth-of-type(1) { transition-delay: 0.30s; }
.bhero h1 img:nth-of-type(2) { transition-delay: 0.55s; }
.bhero h1 img:nth-of-type(3) { transition-delay: 0.80s; }
.bhero h1 img:nth-of-type(4) { transition-delay: 1.05s; }

/* B2 — depth under the tilt */
.access__cell {
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: background var(--d-base) var(--ease-snap),
              box-shadow var(--d-smooth) var(--spring-smooth),
              transform var(--d-smooth) var(--spring-smooth);
}
.access__cell:hover { box-shadow: 0 22px 46px rgba(0,0,0,0.42); z-index: 2; }
.access__cell--net .mark { animation: float-a 7s var(--spring-smooth) infinite; }

/* B3 — the field raises a word out on hover */
.cover__field span {
  display: inline-block;
  transition: color var(--d-base) var(--ease-snap), transform var(--d-base) var(--spring-snappy);
}
.cover__field span:hover { transform: translateY(-5px); }

/* B4 — TIERS on paper. Still no figures; the ladder is density and weight. */
.tiers__t { border-color: var(--day-12); background: var(--day); }
.tiers__t:hover { border-color: var(--day-30); }
.tiers__t li::before { background: var(--day-30); }
.tiers__t--2 { border-color: var(--day-30); }
/* the top tier is marked by a yellow FILL, never by yellow type */
.tiers__t--3 { border-color: var(--day-ink); background: var(--day-2); position: relative; }
.tiers__t--3 h3 { color: var(--day-ink); }
.tiers__t--3::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  display: block; height: 8px; background: var(--signal);
}
.tiers__t--3 li::before { background: var(--day-ink); }
.tiers__t--3 li { color: var(--day-ink); }

/* B5 — over-scan for the parallax */
.adv img { height: calc(100% + 140px); top: -70px; }

/* B6 — closed FAQ rows behave like accordion slices on hover */
.faq__i { transition: background var(--d-base) var(--ease-snap); }
.faq__i:has(.faq__q[aria-expanded="false"]):hover { background: var(--surface-2); }
.faq__q { padding-inline: var(--s4); margin-inline: calc(-1 * var(--s4)); }

/* B7 — ambient wash, same instrument as the home banner */
.bpush { position: relative; overflow: hidden; isolation: isolate; }
.bpush::before {
  content: ""; position: absolute; inset: -30%; z-index: -1;
  background: radial-gradient(45% 55% at 65% 35%, rgba(255,255,255,0.3), transparent 62%);
  animation: wash 16s var(--spring-smooth) infinite;
}

/* B4b — the comparison strip. Coverage, never cost. */
.cmp { margin-top: var(--s12); border-top: 1px solid var(--day-12); }
.cmp__r {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--day-12);
  align-items: center;
  transition: background var(--d-base) var(--ease-snap);
}
.cmp__r:not(.cmp__r--h):hover { background: var(--day-2); }
.cmp__r span { font-size: var(--t-sm); color: var(--day-52); }
.cmp__r span:first-child { color: var(--day-ink); }
.cmp__r--h span {
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--day-30); font-weight: 600;
}
.cmp__r--h span:last-child { color: var(--day-ink); }
/* a covered cell is marked by a yellow FILL behind dark type — never yellow type */
.cmp__r span[data-on] {
  color: var(--day-ink); font-weight: 600;
  position: relative; display: inline-block; width: fit-content;
  padding: 2px 8px;
}
.cmp__r span[data-on]::before {
  content: ""; position: absolute; inset: auto 0 2px 0; z-index: -1;
  display: block; height: 0.6em; background: rgba(255, 212, 0, 0.62);
}
.cmp__r span[data-on] { isolation: isolate; }
@media (max-width: 760px) {
  .cmp__r { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s2); }
  .cmp__r span { font-size: 12px; }
}

/* the mark is `inline-flex` with `vertical-align: middle`; at this scale its box
   escaped the line box and collided with the heading under it. In this cell it is
   block-level. */
.access__cell--net .mark {
  display: flex;
  margin-bottom: var(--s5);
  vertical-align: baseline;
}

/* "not included" cells: quiet, but readable and announced, rather than a glyph */
.cmp__r span[data-off] {
  color: var(--day-30);
  font-size: 12px; letter-spacing: 0.04em;
}

/* ═══ B4 — WHAT IT PRODUCES (replaces tiers + comparison) ═════════
   Architecture: a two-column benefit register closing on an invitation panel.
   Deliberately not the bento (B2), not the coverage field (B3), not the
   accordion (B6), and not the numbered steps or patch rows used on Home. */
.fit { padding: clamp(var(--s20), 8vw, var(--s40)) clamp(var(--s5), 4vw, var(--s16)); }
.fit__inner { max-width: 1240px; margin: 0 auto; }
.fit .label { margin-bottom: var(--s5); }
.fit h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 3.8vw + 8px, 72px);
  line-height: 0.98; letter-spacing: -0.01em; max-width: 20ch;
}
.fit__reg {
  margin-top: clamp(var(--s10), 5vw, var(--s16));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(var(--s8), 5vw, var(--s20));
}
.fit__reg li {
  padding: var(--s6) 0;
  border-top: 1px solid var(--day-12);
}
/* the two columns are offset by half a row so the register reads as a field,
   not as two stacked lists */
.fit__reg li:nth-child(even) { position: relative; top: clamp(0px, 3vw, 44px); }
.fit__reg b {
  display: block;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(18px, 1.8vw, 27px); line-height: 1.02;
  margin-bottom: var(--s3);
}
.fit__reg span { display: block; color: var(--day-70); font-size: var(--t-sm); max-width: 46ch; }
/* one benefit carries the accent so the field is not six identical things */
.fit__reg li:nth-child(5) { border-top: 6px solid var(--signal); }

/* the invitation, not a price */
.fit__ask {
  margin-top: clamp(var(--s16), 7vw, var(--s24));
  padding-top: clamp(var(--s8), 3vw, var(--s12));
  border-top: 2px solid var(--day-ink);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(var(--s6), 3vw, var(--s12)); align-items: center;
}
.fit__ask p { color: var(--day-ink); font-size: var(--t-lg); max-width: 44ch; }
@media (max-width: 860px) {
  .fit__reg { grid-template-columns: 1fr; }
  .fit__reg li:nth-child(even) { top: 0; }
  .fit__ask { grid-template-columns: 1fr; align-items: start; }
}

/* E — the hero and the bento were two flat near-black sections in sequence.
   The bento steps up to the raised surface so the pair reads as two rooms. */
.access { background: var(--surface); }
.access__cell { background: var(--surface); }
.access__cell:hover { background: var(--surface-2); }
.access__cell--net { background: var(--surface-2); }
.access__bento { background: var(--ink-12); border-color: var(--ink-12); }

/* ═══ B1 — the hero has a room now ════════════════════════════════
   A crowd of raised, lit phones: attention already held, which is what the
   headline claims. The tiles inside the sentence keep working because the
   scrim keeps the centre dark. */
.bhero { position: relative; isolation: isolate; overflow: hidden; }
.bhero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: calc(100% + 130px); top: -65px;
  object-fit: cover; object-position: 50% 46%;
}
.bhero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.76) 46%, rgba(10,10,10,0.5) 100%),
    linear-gradient(to bottom, var(--base) 0%, transparent 26%, transparent 62%, var(--base) 100%);
}
@media (max-width: 900px) {
  .bhero__bg { object-position: 50% 40%; }
  /* lighter on phones: the crowd is the point, and it was being buried */
  .bhero::after {
    background:
      linear-gradient(to bottom, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.5) 42%, rgba(10,10,10,0.86) 100%);
  }
}

/* the sub-copy lands over the densest part of the crowd on narrow screens, where
   a flat scrim would kill the image. A local shadow keeps the type readable and
   leaves the picture intact. */
@media (max-width: 900px) {
  .bhero__sub { text-shadow: 0 1px 14px rgba(10,10,10,0.95), 0 0 34px rgba(10,10,10,0.8); }
  .bhero h1 { text-shadow: 0 2px 22px rgba(10,10,10,0.8); }
  .bhero .label { text-shadow: 0 1px 10px rgba(10,10,10,0.9); }
}

/* ═══ B1 — ARCHITECTURE A: CINEMATIC CENTER ═══════════════════════
   Architecture E is retired: the inline tiles failed on phone and laptop.
   The crowd is near-symmetrical and reads from the centre out, so the statement
   sits IN it rather than on it. One centred CTA. This is also the clearest
   contrast with Home, which anchors bottom-left in the dark floor of its frame. */
.bhero { min-height: 94svh; text-align: center; }
.bhero__inner--center { max-width: 1000px; margin: 0 auto; }
.bhero__inner--center .label { display: inline-block; }
.bhero h1 {
  font-size: clamp(36px, 4.6vw + 8px, 84px);
  line-height: 1.02; margin-top: var(--s5);
  /* balance equalises the line lengths, which is what a centred axis needs.
     Hard breaks produced a ragged wedge that read as an accident. */
  text-wrap: balance;
  max-width: 15ch; margin-left: auto; margin-right: auto;
}
.bhero__sub { margin: var(--s6) auto 0; max-width: 42ch; text-wrap: balance; }
.bhero__act { justify-content: center; margin-top: var(--s8); }
.bhero__bg { object-position: 50% 52%; }
/* the crowd should be readable behind a centred statement, so the scrim is a
   vignette rather than a side wash */
.bhero::after {
  background:
    radial-gradient(62% 52% at 50% 46%, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.6) 62%, rgba(10,10,10,0.34) 100%),
    linear-gradient(to bottom, var(--base) 0%, transparent 22%, transparent 70%, var(--base) 100%);
}
@media (max-width: 900px) {
  .bhero { min-height: 88svh; }
  .bhero::after {
    background:
      radial-gradient(80% 44% at 50% 40%, rgba(10,10,10,0.84) 0%, rgba(10,10,10,0.6) 70%, rgba(10,10,10,0.4) 100%),
      linear-gradient(to bottom, rgba(10,10,10,0.8) 0%, transparent 30%, var(--base) 100%);
  }
}

/* B2 — the anchor cell now says what it is, and the three routes are numbered
   so the heading's promise and the content agree at a glance. */
.access__what {
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-30); margin-bottom: var(--s3);
}
.access__n {
  display: block;
  font-family: var(--body); font-size: var(--t-label); font-weight: 600;
  letter-spacing: 0.18em; color: var(--signal); margin-bottom: var(--s3);
}
.access__bento { grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; }
.access__cell--net { grid-row: 1 / span 2; }
.access__cell:nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 860px) {
  .access__bento { grid-template-columns: 1fr; }
  .access__cell--net { grid-row: auto; }
  .access__cell:nth-child(4) { grid-column: auto; }
}