/* 09-content.css — Story values, counters and the delivery zones. */

/* ---------- values / counters ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.value{background:var(--paper);padding:38px 32px}
.section-alt .value{background:var(--paper-2)}
.value-num{font-family:var(--display);font-size:15px;opacity:.4}
.value h3{font-family:var(--display);font-weight:400;font-size:23px;margin:14px 0 9px}
.value p{margin:0;font-size:15.5px;opacity:.76;line-height:1.6}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:56px}
.stat{border-top:2px solid var(--ink);padding-top:16px}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2rem,4vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:14px;opacity:.68;margin-top:8px}

/* ---------- delivery ---------- */
.delivery-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.zones{list-style:none;padding:0;margin:24px 0 0;columns:2;column-gap:28px}
.zones li{
  padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px;break-inside:avoid;
  display:flex;justify-content:space-between;gap:10px;cursor:default;transition:padding-left .22s,border-color .22s;
}
.zones li:hover{padding-left:9px;border-bottom-color:var(--accent)}
.zones li em{font-style:normal;font-size:13px;opacity:0;transition:opacity .22s}
.zones li:hover em{opacity:.6}
.note{margin-top:28px;padding:20px 22px;border-left:3px solid var(--accent);background:var(--paper-2);font-size:15px;line-height:1.6}
.section-alt .note{background:var(--paper)}