/* 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 · a typographic field, not borrowed logos ═══ */
.cover {
  padding: clamp(var(--s16), 6vw, var(--s24)) clamp(var(--s5), 4vw, var(--s16));
  border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12);
  background: var(--base);
}
.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-52);
  transition: color var(--d-base) var(--ease-snap);
}
.cover__field span:hover { color: var(--signal); }
/* the field varies in scale so it reads as a field, not a list */
.cover__field span:nth-child(3n+1) { font-size: clamp(22px, 3.4vw, 52px); color: var(--ink); }
.cover__field span:nth-child(3n+2) { font-size: clamp(16px, 2.1vw, 32px); }
.cover__field span:nth-child(3n+3) { font-size: clamp(19px, 2.7vw, 40px); }
.cover__note { margin-top: var(--s8); color: var(--ink-30); font-size: var(--t-sm); max-width: 56ch; }

/* ══ 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); }
}