/* Display type + hero art, matching the reference slides: extra-wide uppercase geometric display face,
   wide-tracked sans for body and labels. Loaded last so it wins over the base rules. Tokens only. */
:root{--font-display:"Krona One","Arial Black",Impact,sans-serif}
.display{font-family:var(--font-display);font-weight:400;font-synthesis:none;letter-spacing:.005em;text-transform:uppercase}
.soft{color:var(--fg-55)}
.label{font-family:var(--font-sans);font-weight:600;letter-spacing:.2em;font-size:.66rem}
.lead,.sub,.body,.lede{letter-spacing:.015em}
.lede{font-style:normal}

/* headings — the face is wide, so sizes run smaller than the previous serif */
.brand-name{font-size:1rem;letter-spacing:.04em}
.hero h1{font-size:1.5rem;line-height:1.22;margin-top:32px;font-weight:400;letter-spacing:.005em}
@media(min-width:768px){.hero h1{font-size:2.5rem}}
@media(min-width:1024px){.hero h1{font-size:3.4rem}}
.sec h2,.panel h2{font-size:1.4rem;line-height:1.2;letter-spacing:.005em}
@media(min-width:768px){.sec h2,.panel h2{font-size:2.1rem}}
#chain h2{font-size:1.4rem}
@media(min-width:768px){#chain h2{font-size:2.1rem}}
.phil h2{font-size:1.5rem;line-height:1.2}
@media(min-width:768px){.phil h2{font-size:2.4rem}}
@media(min-width:1024px){.phil h2{font-size:2.9rem}}
.phil h2 .soft{color:var(--bg-60)}
.h1i{font-family:var(--font-display);font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:1.4rem;line-height:1.2}
@media(min-width:768px){.h1i{font-size:2.9rem}}
.h2i{font-family:var(--font-display);font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:1.1rem;line-height:1.25}
@media(min-width:768px){.h2i{font-size:1.6rem}}
.h1d{font-size:1.4rem;line-height:1.2}
@media(min-width:768px){.h1d{font-size:2.5rem}}
.ccard h3,.pcard h3,.tblock h3{font-size:.95rem;line-height:1.35;margin-bottom:12px}
.blk h2{font-size:1.05rem;line-height:1.3}
.dcard>.display{font-size:.85rem;line-height:1.35}
.pn-c .display{font-size:1rem;line-height:1.3}
.foot-logo .display,.foot .brand-name{font-size:1.15rem;letter-spacing:.06em}

/* live figures stay in the sans — wide capitals would not fit a number column */
.stats dd,.ccard h3[data-num]{font-family:var(--font-sans);font-weight:600;letter-spacing:-.02em;text-transform:none;font-variant-numeric:tabular-nums}
.stats dd{font-size:1.75rem}
@media(min-width:768px){.stats dd{font-size:2rem}}
.ccard h3[data-num]{font-size:1.75rem}
.pname{font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em;font-size:1.15rem}
@media(min-width:768px){.pname{font-size:1.3rem}}

/* hero: perspective grid cropped from the cover art */
.hero-grid{position:absolute;left:0;right:0;bottom:0;height:70%;background:url(hero-grid.jpg) center bottom/cover no-repeat;opacity:.95;pointer-events:none}
.hero-shade{background:linear-gradient(180deg,var(--bg-85) 0%,var(--bg-50) 45%,transparent 100%)}
.hero-body{padding-bottom:72px}
@media(min-width:768px){.hero-body{padding-bottom:104px}}

/* product path */
.pgrid.four{border:1px solid var(--fg-15);border-right:0;border-top:1px solid var(--fg-15)}
@media(min-width:1024px){.pgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pgrid.four .pcard{padding:24px}