/* ==========================================================================
   stop-band.css - "Stop searching everywhere", the page's opening statement.

   Markup: <section class="block stop-band">
             <div class="container stop-band__grid">
               <div class="stop-band__lede">
                 <div class="kicker">Stop searching everywhere</div>
                 <p class="stop-band__statement">
                   <span class="stop-band__claim">
                     ... in <strong>one marketplace</strong>,
                   </span>
                   <span class="stop-band__rest">making it easier to ...</span>
                 </p>
               </div>
               <div class="stop-band__why">
                 <p class="stop-band__why-label">Why SplitMart?</p>
                 <ul class="stop-band__why-list"> 4x <i> + <span> </ul>
               </div>
             </div>
           </section>

   THE SURFACE. This band is where the page hands off from the dark video
   hero to the light half of the site, and both seams are made here. At the
   top it is a light sheet pulled up over the bottom of the hero on a
   32px radius, so the transparent corners let the dark video read through
   and the change of surface becomes a deliberate edge instead of a butt
   joint. At the bottom it fades into --bg-soft, the exact tint that
   .block.alt paints under the category grid, so that seam disappears
   entirely. Hard and curved where the surface changes, invisible where it
   does not. A single brand-tint wash sits in the top-left corner of the
   sheet: it is the page's one piece of colour between the hero and the
   category tiles, held at the --brand-tint alpha the design system already
   uses for barely-there brand fills.

   THE COMPOSITION. Two columns on the hero's own text axis, not a centred
   measure. The hero h1 starts at the container's left edge and the category
   grid re-centres immediately after, so running the statement down the hero
   axis keeps one vertical line through the seam and breaks a run of three
   centred blocks.

   The right column is a 360px margin index — the "Why SplitMart?" list that
   used to sit under the hero search. It is not a card and not a second
   statement: it is the same argument itemised, sized and coloured so the
   eye lands on the 44px sentence first and picks the list up second. The
   88px gutter between them is the only separator; a vertical rule there
   would be chrome doing a job the 3x type-scale step already does.

   Vertically the two columns are hung from one line: the eyebrow and the
   list label share a font-size, a line-height and a bottom margin, so the
   band opens on a single horizontal reading across both columns. The list
   then runs ~215px against the statement's ~275px, which is the point — it
   ends inside the sheet with air under it instead of hanging past the left
   column's last line.

   THE TYPE. Four tiers, each a clear step: 44 claim / 19 qualifier / 15
   list / 10 labels. The main clause runs at --fs-h2-closing, the same 44px
   the closing CTA uses for its statement, so the light half of the page
   opens and closes on the same display scale. The subordinate clause drops
   to --fs-subhead in --ink-3: a 2.3x step, well past the 1.25 minimum,
   which is what lets the claim carry the weight an h2 would carry elsewhere
   without being one. The list sits below the qualifier at --fs-md, which is
   what keeps it an index rather than a second paragraph.

   Linked from index.html with the other landing component sheets.
   ========================================================================== */

/* Two classes on the section so the value cannot be decided by which sheet
   the browser happens to resolve last (section.block sets the base rhythm).

   The negative top margin is what puts the sheet over the hero. It is
   always smaller than the hero's own bottom padding at the same breakpoint
   (145 / 72 / 36), so the overlap only ever eats hero padding, never hero
   content. z-index 1 states the paint order explicitly rather than relying
   on source order against the hero's isolated stacking context; the site
   header sits at 50 and is unaffected.

   Top padding is a step above the 88 of section.block because the sheet has
   just been pulled up by 56: measured from where the hero visually ends,
   the statement still lands on the page's normal section rhythm. */
section.block.stop-band {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--space-56) * -1);
  padding: var(--space-110) 0 var(--space-88);
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
  background:
    radial-gradient(88% 62% at 4% -6%,
      var(--brand-tint) 0%,
      rgba(var(--brand-rgb), 0) 62%),
    linear-gradient(180deg,
      var(--bg) 0%,
      var(--bg) 54%,
      var(--bg-soft) 100%);
}

/* The grid is put on .container itself rather than on an inner wrapper, so
   the 1200 max-width and the gutter stay the only horizontal constraints
   and the left column is measured off the same axis the hero h1 uses.

   minmax(0, …) on both tracks, not 1fr / 360px: 1fr floors at min-content,
   and the longest claim in the right column would otherwise be able to push
   its own track wider than 360 at narrow desktop widths. The left track
   lands at 704px inside a 1200 container, which holds the claim to three
   balanced lines — the same silhouette it had at 860 across the full width.

   align-items: start, so the right column hangs from the top line and the
   list's own (shorter) height does not get stretched or centred against the
   statement. */
.stop-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  column-gap: var(--space-88);
  align-items: start;
}

/* ── Eyebrow: pill off, one trailing hairline ─────────────────────────────
   kicker.css ships the eyebrow as a tinted pill and is global via
   index.html. closing-cta.css and /trainer-modular replace that chrome with
   a hairline either side of a centred label, and this band belongs to the
   same mark - but the label is flush left here, and a leading line would
   push the text 108px off the axis the statement below sits on. So the
   leading line is dropped and the trailing one runs out to the right, which
   is the same mark read left-aligned rather than a second one.

   Text treatment (uppercase, tracking, weight, size, colour) is inherited
   from kicker.css; only the chip geometry is overridden. The label's
   --brand-ink is the same colour the statement's accent word uses, so the
   band spends exactly one hue.

   inline-flex, not flex: a block-level flex row would stretch the full
   column and throw the hairline out to the container edge. 96px is the line
   measure this mark uses everywhere it appears. flex-shrink stays at 1 as a
   safety valve: at 360px the label sets ~200px against a 328px column, so
   the line gives up width rather than overflow the gutter. */
.stop-band .kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  background: none;
  border-radius: 0;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  margin-bottom: var(--space-24);
}
.stop-band .kicker::after {
  content: "";
  flex: 0 1 96px;
  height: 1px;
  background: rgba(var(--brand-rgb), .18);
}

/* ── The statement ───────────────────────────────────────────────────────
   One <p>, two block spans. The grid track (704px at container max) is what
   holds the main clause to three balanced lines at 44px; the 860 cap is the
   backstop for the stacked layout below 980, where the track is the whole
   container. Balance rather than pretty because a display clause this short
   is judged on its silhouette, and a one-word last line would wreck it. */
.stop-band__statement {
  margin: 0;
  max-width: 860px;
}

.stop-band__claim {
  display: block;
  font-size: var(--fs-h2-closing);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  color: var(--ink);
  text-wrap: balance;
}

/* The band's only accent. Display weight plus brand ink, which clears AA
   for large text against every stop of the sheet behind it. Two words out
   of twenty-nine keeps brand colour far under the 10%-of-surface budget. */
.stop-band__claim strong {
  font-weight: var(--fw-display);
  color: var(--brand-ink);
}

/* 620px is roughly 62 characters at this size, inside the 65-75 reading
   measure, and the step down from the claim's 860 is what makes the block
   read as a shape rather than a paragraph. */
.stop-band__rest {
  display: block;
  max-width: 620px;
  margin-top: var(--space-28);
  font-size: var(--fs-subhead);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--ink-3);
  text-wrap: pretty;
}

/* ── "Why SplitMart?" — the margin index ─────────────────────────────────
   Four claims, four glyphs, no container. Explicitly not the AI feature-card
   shape: no tile behind the icon, no border, no panel. The icon sits inline
   at the head of its line and the line is the whole item.

   The label is the eyebrow's typographic twin — same 10px, same widest
   tracking, same bold, same line-height 1 and the same 24px bottom margin
   the .kicker override sets above — so the two labels share one baseline
   across the gutter and the band opens on a single line. What it does not
   share is the colour: --ink-3 instead of --brand-ink, because the band
   spends brand ink on the left eyebrow and the accent word, and a second
   brand label on the right would read as a competing section head rather
   than an index to the sentence beside it. */
.stop-band__why-label {
  margin: 0 0 var(--space-24);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--ink-3);
}

.stop-band__why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-22);
}

/* --fs-md, a step under the qualifier's 19px: the list is a restatement, so
   it must not read louder than the prose it restates. --ink-2 rather than
   --ink-3 because 15px is small enough to want the contrast back.
   flex-start, not center: the last claim wraps to two lines in a 360px
   column and a centred glyph would float against the middle of the pair. */
.stop-band__why-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* --brand-ink, not --brand: a 20px glyph is a non-text UI element and needs
   3:1 against the sheet. #00a7e5 lands at 2.7:1 on white and the ink variant
   at 4.1:1, so the accessible colour is also the one that ties the glyphs to
   the eyebrow and the accent word — one hue for the band. That 4.1:1 is what
   makes the bold-duotone cut work here: the detail layer clears the bar on
   its own and the 50%-opacity underlayer still lands near 2.2:1, visible as
   an azure wash without going grey.
   The 2px nudge drops a 20px box onto the optical centre of a 22.5px line
   box; Solar's glyphs are inset in their viewBox, so the mark reads at ~17px
   and the row still feels like text with a leading symbol. */
.stop-band__why-list svg.lucide,
.stop-band__why-list [data-lucide] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: var(--space-2);
  color: var(--brand-ink);
}

/* ── Reveal ──────────────────────────────────────────────────────────────
   The three tiers rise in sequence as the band scrolls in, which is the one
   thing motion is doing here: the sentence assembles in reading order, so
   the claim lands before its qualifier instead of the whole block appearing
   as one slab. The index joins the same sequence: its label rides with the
   eyebrow it shares a baseline with, then the four claims come in one at a
   time behind the statement they restate.

   Scroll-driven and CSS-only: no observer, no scroll listener, no state.
   The default (unanimated) state is the finished state, and the animation
   is only attached inside @supports, so a browser without view timelines
   renders the band exactly as it ends up rather than hiding anything it
   cannot then reveal. Ranges end progressively later down the stack to open
   the stagger past what the elements' own positions already give.

   transform and opacity only. Reduced motion never arms it. */
@keyframes stop-band-rise {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stop-band .kicker,
    .stop-band__claim,
    .stop-band__rest,
    .stop-band__why-label,
    .stop-band__why-list li {
      /* Longhands, not the shorthand: the shorthand would reset
         animation-duration, and "auto" (fill the timeline range) is the only
         value that means anything against a view timeline. Written this way
         a parser that rejects the duration still leaves name and fill
         standing, and the element lands on its end state rather than
         sticking at opacity 0. */
      animation-name: stop-band-rise;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
    }
    .stop-band .kicker,
    .stop-band__why-label { animation-range: entry 0% cover 14%; }
    .stop-band__claim   { animation-range: entry 0% cover 21%; }
    .stop-band__rest    { animation-range: entry 0% cover 28%; }
    /* Behind the qualifier, four 3% steps. Small on purpose: a wider
       stagger turns four short lines into a queue and pulls attention off
       the statement, which is what the eye is meant to be reading while
       these arrive. */
    .stop-band__why-list li:nth-child(1) { animation-range: entry 0% cover 24%; }
    .stop-band__why-list li:nth-child(2) { animation-range: entry 0% cover 27%; }
    .stop-band__why-list li:nth-child(3) { animation-range: entry 0% cover 30%; }
    .stop-band__why-list li:nth-child(4) { animation-range: entry 0% cover 33%; }
  }
}

/* ── Responsive ───────────────────────────────────────────────────────── */

/* The hero's bottom padding drops to 72 here, so the overlap drops with it
   and still clears hero content by 28px. */
@media (max-width: 980px) {
  section.block.stop-band {
    margin-top: calc(var(--space-44) * -1);
    padding: var(--space-88) 0 var(--space-72);
  }
  .stop-band__statement { max-width: 680px; }
  .stop-band__claim { font-size: var(--fs-h2-md); }

  /* One column. The index goes under the statement on the same left axis,
     separated by 48px of gutter and nothing else: the uppercase label is
     already a hard start-of-block signal, and a hairline here would be the
     first rule the band has ever drawn. Measure caps at 560 so the four
     claims keep a list shape instead of running the full container width
     and reading as four more paragraphs. */
  .stop-band__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-48);
  }
  .stop-band__why { max-width: 560px; }
}

/* Phone. The hero keeps only 36px of bottom padding, so the sheet lifts by
   20 and the radius steps down to 28 to stay a readable curve inside that
   reveal. The claim caps at --fs-h2-sm per the mobile title rule, the
   qualifier holds at 16px rather than dropping to --fs-sm, and both
   measures come off so the container gutter is the only constraint left.
   Nothing re-centres: the hero centres its own content at this width, and
   inheriting that here would rag a four-line sentence down both edges. */
@media (max-width: 720px) {
  section.block.stop-band {
    margin-top: calc(var(--space-20) * -1);
    padding: var(--space-64) 0 var(--space-56);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .stop-band .kicker { margin-bottom: var(--space-18); }
  .stop-band .kicker::after { flex-basis: 48px; }
  .stop-band__statement,
  .stop-band__rest { max-width: none; }
  .stop-band__claim { font-size: var(--fs-h2-sm); }
  .stop-band__rest {
    margin-top: var(--space-20);
    font-size: var(--fs-body);
  }
  /* The gutter tightens with the rest of the band's rhythm, the measure cap
     comes off (the container gutter is the only constraint at this width),
     and the rows close up to 18: at 15px over a narrow column the claims
     are mostly two lines each, and 22px of gap between them would start to
     read as four separate blocks rather than one list. */
  .stop-band__grid { row-gap: var(--space-36); }
  .stop-band__why { max-width: none; }
  .stop-band__why-label { margin-bottom: var(--space-18); }
  .stop-band__why-list { gap: var(--space-18); }
}