/* Shared scaffolding for every content section below the hero.
   Each section has its OWN stylesheet in this folder and its own marked block in index.html, so a section
   is removed by deleting that block and its <link>. This file is the only one the sections share.

   Visual language: flat blueprint / measurement-instrument. Hairline frames, mono labels, tick marks,
   dot grids, and small blue flow pulses along thin lines. No glow, no blue fills, no isometric geometry
   (the page draws none of its own; that stays with the supplied hero illustration).
   Colours come only from the tokens in styles.css. Card tint is white at 1.5-4% alpha over --recessed. */

:root {
  --fs-section: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem);   /* CHOICE: section titles are larger than the spec's 25-30px h2 */
}

/* ---------- Section frame ---------- */
.s { position: relative; padding-block: var(--section-y); }
.s::before {                                   /* hairline that fades at both ends */
  content: ""; position: absolute; top: 0; left: var(--inset); right: var(--inset); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14) 20%, rgba(255, 255, 255, 0.14) 80%, transparent);
}
.s__inner { position: relative; max-width: 1160px; margin-inline: auto; padding-inline: var(--inset); }

/* Honeycomb backdrop: neutral white hairlines, faded out towards the edges.
   Tile = 1 hexagon row pair (pointy-top, r=12 -> 20.78 x 36). */
.s--dots::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.78' height='36' viewBox='0 0 20.78 36' fill='none' stroke='%23fff' stroke-opacity='.04' stroke-width='1'%3E%3Cpath d='M0 6L10.39 0L20.78 6M0 6V18M20.78 6V18M0 18L10.39 24L20.78 18M10.39 24V36'/%3E%3C/svg%3E");
  background-size: 20.78px 36px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 0%, transparent 75%);
}
.s--dots > * { position: relative; z-index: 1; }

/* ---------- Section head ---------- */
.s__head { max-width: 720px; margin: 0 auto var(--s-8); text-align: center; }
.s__head--left { margin-inline: 0; text-align: left; }
.s__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4);
  font: 400 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-4);
}
.s__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.s__title {
  margin: 0; color: var(--t-head);
  font-size: var(--fs-section); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance;
}
.s__sub { margin: var(--s-4) auto 0; max-width: 58ch; color: var(--t-2); text-wrap: pretty; }
.s__head--left .s__sub { margin-inline: 0; }

/* ---------- Card ---------- */
.card {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012) 55%), var(--recessed);
}
@media (prefers-reduced-motion: no-preference) {
  .card { transition: border-color 0.25s ease; }
}
.card:hover { border-color: rgba(255, 255, 255, 0.18); }
.card__index {
  margin: 0 0 var(--s-4); font: 400 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.1em; color: var(--t-4);
}
.card__title { margin: 0; color: var(--t-head); font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; }
.card__text { margin: var(--s-3) 0 0; color: var(--t-2); font-size: var(--fs-small); line-height: 1.55; }

/* ---------- Status chip (founder-approved labels) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 6px;
  font: 400 var(--fs-mono)/1.2 var(--font-mono); letter-spacing: 0.02em; color: var(--t-body); white-space: nowrap;
}
.chip::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--t-3); }
.chip--now::before   { background: var(--accent); border-color: var(--accent); }
.chip--early::before { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); border-color: var(--accent); }
.chip--dev::before   { background: transparent; border-color: var(--t-3); }

/* ---------- Flow pulse: a short blue dash travelling along a thin line (SVG paths with pathLength="1") ---------- */
.pulse { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0.07 0.93; stroke-dashoffset: 0; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pulse { opacity: 1; animation: pulse-run 3.6s linear infinite; }
  .pulse--2 { animation-delay: -1.2s; }
  .pulse--3 { animation-delay: -2.4s; }
}
@keyframes pulse-run { to { stroke-dashoffset: -1; } }

/* Shape glyphs shared with the hero cards (circle GPS, triangle optical, square event, hexagon dataset). */
.glyph { width: 20px; height: 20px; fill: none; stroke: var(--t-3); stroke-width: 1.25; stroke-linejoin: round; flex: none; }
.glyph--filled { fill: var(--accent); stroke: var(--accent); }

@media (max-width: 959.98px) {
  .s__head { margin-bottom: var(--s-7); }
}

/* ---------- Flat card art (inline SVG, plain card background, no pattern) ---------- */
.art {
  border-bottom: 1px solid var(--border);
}
.art svg { display: block; width: 100%; height: auto; }
.a-line { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.a-dim  { stroke: rgba(255, 255, 255, 0.2); }
.a-dash { stroke-dasharray: 3 4; }
.a-acc  { stroke: var(--accent); }
.a-fillacc { fill: var(--accent); stroke: none; }