/* ═══════════════════════════════════════════════════════════════════
   FOOTPRINT — technology page components
   Extends site.css. Long-form product page: stat strips, challenge
   cards, case-study cards, quotes, before/after, comparison table.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Stat strip ────────────────────────────────────────────────────── */
.statrow{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
@media(min-width:680px){.statrow{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.statrow--4{grid-template-columns:repeat(4,1fr)}}
.statrow .stat{background:var(--bg-2);padding:clamp(1.15rem,2.6vw,1.85rem)}
.statrow .stat__n{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.statrow .stat__sub{font-size:.8125rem;color:var(--faint);margin-top:.45rem;line-height:1.45}

/* ── Section head ──────────────────────────────────────────────────── */
.sechead{max-width:64ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sechead p{margin-top:1rem}

/* ── Challenge cards ───────────────────────────────────────────────── */
.cards{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.cards--4{grid-template-columns:repeat(4,1fr)}}
.card{
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.35rem,2.4vw,1.85rem);
  background:var(--bg-2);
  display:flex;flex-direction:column;gap:.9rem;
  transition:border-color var(--t),transform var(--t);
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card__ico{
  width:38px;height:38px;border-radius:10px;flex:none;
  display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid rgba(255,196,124,.22);
}
.card__ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.0625rem;letter-spacing:-.015em;line-height:1.3}
.card p{font-size:.875rem;color:var(--muted);line-height:1.6}
.card .ticks{margin-top:auto;padding-top:.35rem}
.card .ticks li{font-size:.8125rem;gap:.6rem}

/* ── Feature list (two-col ticks) ──────────────────────────────────── */
.featlist{display:grid;gap:.65rem 2.5rem}
@media(min-width:700px){.featlist{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.featlist{grid-template-columns:repeat(3,1fr)}}
.featlist li{
  display:grid;grid-template-columns:auto 1fr;gap:.65rem;
  font-size:.9375rem;color:var(--muted);align-items:baseline;
}
.featlist li::before{
  content:'';width:14px;height:14px;flex:none;transform:translateY(.18em);
  background:var(--accent);
  clip-path:polygon(14.7% 50%,0 35.3%,5.9% 29.4%,14.7% 38.2%,41.2% 11.8%,47.1% 17.6%);
}

/* ── Case-study cards ──────────────────────────────────────────────── */
.cases{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:760px){.cases{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.cases{grid-template-columns:repeat(3,1fr)}}
.case{
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(170deg,var(--bg-3),var(--bg-2));
  padding:clamp(1.35rem,2.4vw,1.75rem);
  display:flex;flex-direction:column;gap:1rem;
  transition:border-color var(--t);
}
.case:hover{border-color:var(--line-2)}
.case__eyebrow{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.case__title{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.case__meta{display:grid;gap:.4rem}
.case__meta div{font-size:.8125rem;color:var(--faint);display:grid;grid-template-columns:auto 1fr;gap:.5rem}
.case__meta b{font-weight:700;color:var(--muted)}
.case__how{border-top:1px solid var(--line);padding-top:.9rem;margin-top:auto}
.case__how span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:.5rem}
.case__how li{font-size:.8125rem;color:var(--muted);margin-bottom:.35rem;padding-left:.85rem;position:relative;list-style:none}
.case__how li::before{content:'';position:absolute;left:0;top:.58em;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.7}
.case__stat{
  border-top:1px solid var(--line);padding-top:.9rem;
  display:flex;align-items:baseline;gap:.6rem;
}
.case__stat b{font-size:clamp(1.6rem,3.4vw,2.1rem);font-weight:800;letter-spacing:-.04em;color:var(--accent);line-height:1}
.case__stat span{font-size:.75rem;color:var(--muted);line-height:1.35}

/* ── Quotes ────────────────────────────────────────────────────────── */
.quotes{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:760px){.quotes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  padding:clamp(1.25rem,2.2vw,1.6rem);display:flex;flex-direction:column;gap:.9rem;
}
.quote p{font-size:.9375rem;line-height:1.65;color:var(--ink)}
.quote footer{margin-top:auto;font-size:.8125rem;color:var(--faint)}
.quote footer b{color:var(--muted);font-weight:700}

/* ── Before / after split ──────────────────────────────────────────── */
.split{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:760px){.split{grid-template-columns:repeat(2,1fr)}}
.split__col{border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.35rem,2.4vw,1.85rem);background:var(--bg-2)}
.split__col--bad{border-color:rgba(255,120,120,.18)}
.split__col--bad .split__hd{color:#ff9d9d}
.split__col--good{border-color:rgba(255,196,124,.24);background:linear-gradient(170deg,var(--bg-3),var(--bg-2))}
.split__col--good .split__hd{color:var(--accent)}
.split__hd{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.split ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.split li{font-size:.875rem;color:var(--muted);padding-left:1.1rem;position:relative;line-height:1.5}
.split li::before{position:absolute;left:0;top:0;font-family:var(--mono)}
.split__col--bad li::before{content:'×';color:#ff9d9d}
.split__col--good li::before{content:'✓';color:var(--accent)}

/* ── Comparison table ──────────────────────────────────────────────── */
.cmp{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r)}
.cmp table{border-collapse:collapse;width:100%;min-width:660px;font-size:.875rem}
.cmp th,.cmp td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);background:var(--bg-3);font-weight:400;white-space:nowrap;
}
.cmp thead th:first-child{color:var(--muted)}
.cmp tbody th{
  font-weight:700;font-size:.875rem;color:var(--ink);
  background:var(--bg-2);width:34%;min-width:200px;
}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp td{color:var(--muted)}
.cmp .yes{color:var(--accent);font-weight:700}
.cmp .no{color:var(--faint)}
.cmp__note{font-size:.8125rem;color:var(--faint);margin-top:1rem}

/* ── Credibility / awards row ──────────────────────────────────────── */
.awards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(min-width:700px){.awards{grid-template-columns:repeat(4,1fr)}}
.award{background:var(--bg-2);padding:clamp(1.1rem,2.2vw,1.5rem);text-align:center}
.award b{display:block;font-size:1rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.3rem}
.award span{font-size:.75rem;color:var(--faint);line-height:1.4}

/* ── Big number callout ────────────────────────────────────────────── */
.bignum{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.bignum b{font-size:clamp(2.75rem,7vw,4.5rem);font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--accent)}
.bignum span{font-size:clamp(.9375rem,1.4vw,1.125rem);color:var(--muted);max-width:30ch;line-height:1.45}

/* ── Anchor sub-nav ────────────────────────────────────────────────── */
.subnav{
  position:sticky;top:57px;z-index:40;
  border-bottom:1px solid var(--line);
  background:rgba(5,8,11,.9);
  backdrop-filter:blur(12px);
  overflow-x:auto;
}
.subnav ul{display:flex;gap:clamp(1rem,2.4vw,1.9rem);list-style:none;margin:0;padding:.85rem var(--gut);white-space:nowrap}
.subnav a{font-size:.8125rem;color:var(--muted);transition:color var(--t-fast)}
.subnav a:hover{color:var(--accent)}
@media(max-width:760px){.subnav{display:none}}