/* ==========================================================================
   max — evidence components for the second set of case studies
   Each one exists because a specific case needed to prove a specific claim.
   ========================================================================== */

/* ---------- brand specimen (Fielder) ---------- */
.specimen{display:grid;gap:14px}
.specimen__mark{
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-lg);padding:clamp(34px,6vw,64px);box-shadow:var(--shadow-tile);
  display:grid;place-items:center;gap:18px;position:relative;
}
.specimen__mark b{font-size:clamp(38px,6.4vw,76px);font-weight:800;letter-spacing:-.075em;line-height:1}
.specimen__mark b i{font-style:normal;font-weight:300;color:var(--mist)}
.specimen__mark small{font-size:9px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--mist)}
/* the clearspace rule, drawn */
.specimen__mark::before,.specimen__mark::after{
  content:"";position:absolute;border:1px dashed var(--hairline-2);
}
.specimen__mark::before{inset:22px;border-radius:var(--r-md)}
.specimen__mark::after{inset:38px;border-radius:var(--r-sm);border-color:transparent}

.specimen__row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.specimen__cell{
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-md);padding:20px;box-shadow:var(--shadow-tile);
}
.specimen__cell small{
  display:block;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist);margin-bottom:16px;
}
.swatchrow{display:flex;gap:7px}
.swatchrow i{flex:1;height:38px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(11,12,14,.07)}
.ramp{display:grid;gap:8px}
.ramp b{letter-spacing:-.04em;line-height:1;display:block}
.pairing{display:grid;gap:9px}
.pairing b{font-size:19px;font-weight:800;letter-spacing:-.03em}
.pairing span{font-size:12px;line-height:1.6;color:var(--ink-60)}

/* ---------- adoption matrix (Tessellate) ---------- */
.matrix{
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-lg);padding:clamp(18px,3vw,28px);box-shadow:var(--shadow-tile);
  overflow-x:auto;
}
.matrix table{border-collapse:collapse;width:100%;min-width:560px}
.matrix th{
  text-align:center;font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mist);padding:0 6px 14px;white-space:nowrap;
}
.matrix th:first-child{text-align:left;padding-left:0}
.matrix td{border-top:1px solid var(--hairline);padding:13px 6px;text-align:center}
.matrix td:first-child{text-align:left;padding-left:0;font-size:13px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.cell{width:22px;height:22px;border-radius:6px;background:#E6E9ED;display:inline-block}
.cell--on{background:var(--ink)}
.cell--part{background:linear-gradient(90deg,var(--ink) 50%,#E6E9ED 50%)}
.cell--new{background:var(--signal)}
.matrix__key{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline)}
.matrix__key span{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.matrix__key i{width:13px;height:13px;border-radius:4px;display:block}

/* ---------- performance gauges (Lumen Row) ---------- */
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gauge{
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-md);padding:22px;box-shadow:var(--shadow-tile);
}
.gauge small{display:block;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.gauge b{display:block;margin-top:12px;font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.gauge b i{font-style:normal;font-weight:300;font-size:.6em;color:var(--mist)}
.gauge__track{position:relative;height:6px;border-radius:3px;background:#E6E9ED;margin-top:20px}
.gauge__track > i{display:block;height:100%;border-radius:3px;background:var(--signal);width:0;transition:width 1.2s var(--ease)}
.gauge__was{position:absolute;top:-6px;width:2px;height:18px;background:var(--ink);opacity:.45}
.gauge__was::after{
  content:attr(data-was);position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font-size:8px;font-weight:700;letter-spacing:.1em;color:var(--ink-60);white-space:nowrap;
}
.gauge__scale{display:flex;justify-content:space-between;margin-top:11px;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}

/* ---------- data model (Acre) ---------- */
.model{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch}
.node{
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-tile);position:relative;
}
.node--key{box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--ink)}
.node small{display:block;font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mist);margin-bottom:11px}
.node b{display:block;font-size:14px;font-weight:700;letter-spacing:-.015em;margin-bottom:9px}
.node span{display:block;font-size:11px;line-height:1.65;color:var(--ink-60)}
.node em{
  display:block;font-style:normal;margin-top:11px;padding-top:10px;border-top:1px solid var(--hairline);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);
}

/* ---------- shift route (Parcelle) ---------- */
.route{display:grid}
.stop{display:grid;grid-template-columns:76px 18px 1fr;gap:18px;align-items:start;padding:13px 0}
.stop__t{font-size:12px;font-weight:700;color:var(--mist);font-variant-numeric:tabular-nums;padding-top:2px}
.stop__d{position:relative;display:flex;justify-content:center}
.stop__d i{width:9px;height:9px;border-radius:50%;background:var(--ink);margin-top:6px;z-index:2;position:relative}
.stop:not(:last-child) .stop__d::after{
  content:"";position:absolute;top:12px;bottom:-26px;left:50%;width:1px;background:var(--hairline-2);
}
.stop--live .stop__d i{background:var(--signal);box-shadow:0 0 0 4px rgba(196,240,77,.28)}
.stop--off .stop__d i{background:#fff;box-shadow:inset 0 0 0 1px var(--hairline-2)}
.stop b{display:block;font-size:14px;font-weight:700;letter-spacing:-.015em;margin-bottom:5px}
.stop span{display:block;font-size:12px;line-height:1.6;color:var(--ink-60);max-width:52ch}
.stop em{
  display:inline-block;font-style:normal;margin-top:8px;font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mist);
  border:1px solid var(--hairline-2);border-radius:var(--r-pill);padding:5px 11px;
}

@media (max-width:980px){
  .specimen__row,.gauges{grid-template-columns:1fr}
  .model{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .model{grid-template-columns:1fr}
  .stop{grid-template-columns:58px 16px 1fr;gap:12px}
}