/* =========================================================
   Component — Fact strip

   A row of short facts on the band ground. Four on a wide screen,
   two on a tablet, one on a phone. Used by the home page, /ai-agent
   and /video-commerce, which is why everything below is written
   once here rather than three times in the page files.

   It used to be the sunken surface between two hairlines, which on
   the home page put a hard-edged grey slab directly under the hero.
   The band is the same idea at a quarter of the strength, and the
   rules above and below it were only there to stop the old ground
   from vibrating against the canvas.

   The facts are tiles now rather than four lines sharing one ground.
   Set as bare text they made a paragraph: the eye crossed all four
   in one sweep and kept none of them. A tile per fact makes the row
   count itself, and each promise stops being a phrase in a sentence
   and becomes a thing with an edge.

   The tint is olive, a hue neither brand ramp carries. It is written
   here rather than promoted to tokens.css because one component uses
   it, and it is written as a translucent fill over the band rather
   than as an opaque colour — the tile is the band seen through glass,
   not a slab laid on top of it. The wash on .strip is what the glass
   has to look at: with nothing uneven behind it, a translucent
   surface and a solid one are the same picture.
   ========================================================= */
.strip {
  position: relative;
  isolation: isolate;
  background: var(--color-canvas-band);

  /* The olive, as channels, and the three strengths it is used at:
     the tile fill, the tile edge, and the wash the tiles sit over.
     One set for both themes, which is not the usual answer — a tint
     this weak normally has to be raised on paper to stay visible —
     but the olive is dark enough that 0.30 darkens white and lightens
     #171c21 by about the same amount, and the two tiles came out
     matched when they were measured against each other. */
  --strip-olive: 124 141 78;
  --strip-tile: rgb(var(--strip-olive) / 0.30);
  --strip-tile-line: rgb(var(--strip-olive) / 0.55);
  --strip-wash: rgb(var(--strip-olive) / 0.14);
}
/* Two pools rather than one flat overlay, and set under the tiles
   rather than over them, so each translucent fill is sitting on a
   gradient instead of on a constant. */
.strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 120% at 18% 0%, var(--strip-wash), transparent 70%),
    radial-gradient(55% 120% at 82% 100%, var(--strip-wash), transparent 70%);
  pointer-events: none;
}

.strip__inner {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
  grid-template-columns: 1fr;
}
/* These four lines are the page's first concrete promises, and at
   13px in the secondary ink they read as a caption — the eye took
   them for legal small print and skipped them. Body size and the
   primary ink, which is what a promise is set in. */
.strip__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--strip-tile-line);
  border-radius: var(--radius-lg);
  background: var(--strip-tile);
  box-shadow: var(--shadow-soft);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
/* The lit top edge: one hairline of white fading out at both ends.
   It is most of the difference between a tile that reads as glass
   and one that reads as a coloured rectangle. */
.strip__item::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--space-5);
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.16), transparent);
  pointer-events: none;
}
/* Guarded, the way the auth card guards its own glass: a browser
   without backdrop-filter keeps the translucent fill and the lit
   edge, which is the tile minus one refinement rather than a
   broken tile. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .strip__item {
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
  }
}
/* The diamond grows with the text it marks and drops the veil — at
   0.85 over a tinted band the brass was doing neither job. */
.strip__mark {
  width: 9px;
  height: 9px;
  flex: none;
  rotate: 45deg;
  background: var(--color-gold);
}

/* Paper takes the same three values and drops one thing: the lit
   edge. A hairline of white at 16% is invisible on a pale sage tile,
   so on this ground the tile earns its lift from the border and the
   shadow alone. */
:root[data-theme="light"] .strip__item::before { display: none; }

@media (min-width: 720px) {
  .strip__inner { grid-template-columns: repeat(2, 1fr); }
}
/* Four equal columns forced the two longest facts onto a second line
   while the two shortest sat in half-empty tiles. The columns are
   content-sized instead: each tile is as wide as its own sentence, and
   the row divides the width the way the copy actually falls.

   No `white-space: nowrap`. Auto columns already hold one line each
   wherever the row has the width for it, so the only question is
   where that width starts. Measured, in English, which is the longer
   of the two languages here: the four tiles want 1104px between them,
   so the row opens at 1160 rather than at the 1080 it used to. The
   forty pixels between the two numbers are the scrollbar and a margin
   for a font that has not finished loading.

   Under 1160 the strip is two columns, where a tile is half the page
   wide and no sentence has to break. Nothing wraps at any width; it
   only ever changes how many tiles stand in a row. */
@media (min-width: 1160px) {
  .strip__inner {
    grid-template-columns: repeat(4, auto);
    gap: var(--space-2);
  }
  .strip__item { padding-inline: var(--space-4); }
}