/* components.css, slide objects shared by every format.
   Colors and type come from the format's tokens:
   --bg --fg --muted --accent --on-accent --card --line --radius --font --font-display */

.slide h1, .slide h2 { font-family: var(--font-display, var(--font)); letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.slide p { margin: 0; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.4rem); color: var(--muted); max-width: 34em; line-height: 1.5; }
.kicker { font-size: .95rem; color: var(--accent); font-weight: 600; }

/* Rounded cards ----------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: clamp(.8rem, 1.2vw, 1.25rem); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 1.6vw, 1.6rem); display: flex; flex-direction: column; gap: .5rem; min-height: 8rem; }
.card h3 { margin: 0; font-size: clamp(1rem, 1.3vw, 1.3rem); font-weight: 650; letter-spacing: -.01em; }
.card p { color: var(--muted); line-height: 1.45; font-size: clamp(.9rem, 1.05vw, 1.05rem); }
.card .kicker { font-size: .8rem; }
.card.accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.card.accent p, .card.accent .kicker { color: inherit; opacity: .85; }

/* Stat tiles -------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 1rem; }
.stat { display: flex; flex-direction: column; gap: .3rem; padding-top: 1rem; border-top: 2px solid var(--line); }
.stat .value { font-family: var(--font-display, var(--font)); font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .label { color: var(--muted); font-size: .95rem; line-height: 1.3; }
.stat.accent { border-top-color: var(--accent); }

/* Ring charts ------------------------------------------------------- */
.rings { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.5vw, 2.5rem); }
.ring { --size: clamp(7rem, 11vw, 10rem); position: relative; width: var(--size); display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.ring svg { width: var(--size); height: var(--size); transform: rotate(-90deg); overflow: visible; }
.ring .track { fill: none; stroke: var(--line); stroke-width: 10; }
.ring .fill { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.22, 1, .36, 1); }
.ring .center { position: absolute; top: calc(var(--size) / 2); left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display, var(--font)); font-weight: 700; font-size: calc(var(--size) * .22); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ring .label { color: var(--muted); font-size: .9rem; max-width: 12ch; line-height: 1.3; }

/* Bar rows ---------------------------------------------------------- */
.bars { display: grid; gap: .8rem; }
.bar { display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr auto; align-items: center; gap: 1rem; }
.bar .name { font-size: .95rem; }
.bar .track { height: .7rem; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar .fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 1s cubic-bezier(.22, 1, .36, 1); }
.bar .num { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 3.5ch; text-align: right; font-size: .95rem; }

/* Timeline ---------------------------------------------------------- */
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.5rem; position: relative; padding-top: 1.6rem; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: .45rem; height: 2px; background: var(--line); }
.step { position: relative; display: flex; flex-direction: column; gap: .35rem; }
.step::before { content: ""; position: absolute; top: -1.6rem; left: 0; width: .8rem; height: .8rem; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); }
.step h4 { margin: 0; font-size: 1.05rem; }
.step p { color: var(--muted); font-size: .95rem; line-height: 1.45; }
.step .when { font-size: .8rem; color: var(--accent); font-weight: 600; }

/* Comparison -------------------------------------------------------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.compare > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; background: var(--card); }
.compare .after { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.compare h3 { margin: 0; font-size: 1.1rem; }
.compare ul { margin: 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.65; }

/* Quote ------------------------------------------------------------- */
.quote { display: flex; flex-direction: column; gap: 1rem; max-width: 40ch; }
.quote blockquote { margin: 0; font-family: var(--font-display, var(--font)); font-size: clamp(1.3rem, 2.2vw, 2.2rem); line-height: 1.2; letter-spacing: -.01em; }
.quote cite { font-style: normal; color: var(--muted); font-size: .95rem; }
.quote cite b { color: var(--fg); font-weight: 600; }

/* Carousel ---------------------------------------------------------- */
.carousel { position: relative; --per: 1; --gap: 1rem; outline: none; }
.carousel:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent); border-radius: var(--radius); }
.carousel-track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 2vw, 2rem); min-height: 11rem; display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.carousel-ui { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.carousel-dots { display: flex; gap: .4rem; }
.carousel-dots button { width: .5rem; height: .5rem; border-radius: 999px; border: 0; background: var(--line); padding: 0; cursor: pointer; transition: .3s; }
.carousel-dots button.active { background: var(--accent); width: 1.4rem; }
.carousel-btns { display: flex; gap: .5rem; }
.carousel-btns button { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; font-size: 1.05rem; display: grid; place-items: center; font-family: inherit; transition: .2s; }
.carousel-btns button:hover { border-color: var(--accent); color: var(--accent); }

/* Pills and bullets ------------------------------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.pill.accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; font-size: clamp(1.05rem, 1.5vw, 1.5rem); }
.bullets li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .4rem; align-items: baseline; }
.bullets li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); display: inline-block; transform: translateY(-.15em); }

/* Image frame and code ---------------------------------------------- */
.frame { border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--line); display: grid; gap: .6rem; }
.frame img, .frame video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.frame .placeholder { aspect-ratio: 16 / 10; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 45%, var(--card)), var(--card)); }
.frame figcaption { padding: 0 1rem .9rem; color: var(--muted); font-size: .9rem; }
.code { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; font: .95rem/1.55 ui-monospace, 'JetBrains Mono', monospace; overflow: auto; margin: 0; }
.code .file { display: block; color: var(--muted); font-size: .8rem; margin-bottom: .6rem; }

/* Reveal (staggered by the engine) ---------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0ms !important; transition-delay: 0ms !important; }
}
@media (max-width: 760px) {
  .compare { grid-template-columns: 1fr; }
  .timeline { grid-auto-flow: row; padding-top: 0; padding-left: 1.6rem; }
  .timeline::before { top: 0; bottom: 0; left: .35rem; width: 2px; height: auto; }
  .step::before { top: .2rem; left: -1.6rem; }
}

/* ======================================================================
   Infographic objects, added 2026-09-16.
   Drawn objects (journey, arc, diagram, funnel, columns, linechart, waffle,
   matrix, hub, cycle, slope, roadmap) are built by components.js and get
   class "on" when their slide is active; everything animates from that.
   Pure-CSS objects (features, overlap, ladder, flow, checks, bignum) use
   the engine's .reveal / .in stagger.
   ====================================================================== */

/* Journey path (serpentine) ---------------------------------------- */
.journey { --cols: 3; position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: 1rem; row-gap: clamp(2.6rem, 6vh, 4rem); padding-inline: clamp(2.2rem, 4vw, 3.5rem) .5rem; }
.journey > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.journey > svg path { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1); }
.journey.on > svg path { stroke-dashoffset: 0; }
.journey .stop { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.journey .stop.flip { align-items: flex-end; text-align: right; }
.journey .marker { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: .95rem; margin-bottom: .3rem; transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * 170ms + .15s); }
.journey .marker svg { width: 1.3rem; height: 1.3rem; fill: var(--accent); }
.journey.on .marker { transform: none; }
.journey .stop > b, .journey .stop > p { opacity: 0; transform: translateY(6px); transition: opacity .5s ease calc(var(--i) * 170ms + .35s), transform .5s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 170ms + .35s); }
.journey.on .stop > b, .journey.on .stop > p { opacity: 1; transform: none; }
.journey .stop b { font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; max-width: 16rem; }
.journey .stop p { color: var(--muted); font-size: .9rem; line-height: 1.4; max-width: 16rem; }
.journey .stop.mark .marker { background: none; }
.journey .stop.mark b { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* Arc list (half wheel) --------------------------------------------- */
.arc { position: relative; display: grid; grid-template-columns: minmax(9rem, 30%) 1fr; column-gap: clamp(1.6rem, 3vw, 3rem); align-items: center; }
.arc .side { position: relative; align-self: stretch; min-height: 12rem; }
.arc .side svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arc .core { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 62%; }
.arc .core b { display: block; font-family: var(--font-display, var(--font)); font-size: clamp(1.15rem, 1.9vw, 1.7rem); line-height: 1.05; letter-spacing: -.02em; }
.arc .core p { color: var(--muted); font-size: .85rem; line-height: 1.4; margin-top: .45rem; }
.arc .list { display: grid; gap: .7rem; }
.arc .item { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .8rem 1.4rem .8rem 3.2rem; display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-height: 3.6rem; opacity: 0; transform: translateX(-14px); transition: opacity .5s ease calc(var(--i) * 140ms + .2s), transform .6s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 140ms + .2s); }
.arc.on .item { opacity: 1; transform: none; }
.arc .item .idx { position: absolute; left: -1.2rem; top: 50%; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: .85rem; letter-spacing: -.02em; transform: translateY(-50%) scale(0); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * 140ms + .35s); }
.arc.on .item .idx { transform: translateY(-50%) scale(1); }
.arc .item b { font-size: .95rem; font-weight: 650; }
.arc .item p { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.arc .item.accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.arc .item.accent p { color: inherit; opacity: .82; }
.arc .curve { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.45, 0, .2, 1); }
.arc.on .curve { stroke-dashoffset: 0; }
.arc .tick { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease calc(var(--i) * 140ms + .45s); }
.arc.on .tick { stroke-dashoffset: 0; }
.arc .node { fill: var(--accent); stroke: var(--bg); stroke-width: 3; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * 140ms + .4s); }
.arc.on .node { transform: none; }

/* Diagram cards (line-art glyphs) ---------------------------------- */
.diagram { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: clamp(.8rem, 1.2vw, 1.25rem); }
.dcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 1.6vw, 1.5rem); display: flex; flex-direction: column; gap: .45rem; min-height: 15rem; }
.dcard b { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.dcard p { color: var(--muted); font-size: .85rem; line-height: 1.4; }
.dcard .art { flex: 1; display: grid; place-items: center; padding: .9rem 0 .5rem; color: var(--fg); }
.dcard .art svg { width: min(100%, 11rem); height: auto; overflow: visible; opacity: .9; }
.dcard .art .a { stroke: var(--accent); }
.dcard .art :is(path, line, circle, ellipse, rect, polyline) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.45, 0, .2, 1) calc(var(--i) * 45ms + .25s); }
.diagram.on .art :is(path, line, circle, ellipse, rect, polyline) { stroke-dashoffset: 0; }
.dcard .art .af { fill: var(--accent); stroke: none; stroke-dasharray: none; opacity: 0; transform: scale(.5); transform-box: fill-box; transform-origin: center; transition: opacity .4s ease calc(var(--i) * 45ms + .3s), transform .55s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * 45ms + .3s); }
.diagram.on .art .af { opacity: 1; transform: none; }
.dcard .more { margin-top: auto; font-size: .8rem; color: var(--muted); }
.dcard .more::after { content: " \2197"; }

/* Feature tiles (icon disc + text) --------------------------------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: clamp(.8rem, 1.2vw, 1.25rem); }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 1.5vw, 1.4rem); display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.feature .disc { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 16%, var(--card)); color: var(--accent); margin-bottom: .5rem; }
.feature .disc svg { width: 1.3rem; height: 1.3rem; }
.feature b { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.feature p { color: var(--muted); font-size: .88rem; line-height: 1.4; }
.feature.accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.feature.accent p { color: inherit; opacity: .85; }
.feature.accent .disc { background: color-mix(in oklab, var(--on-accent) 18%, transparent); color: inherit; }
.features.band { gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.features.band .feature { background: none; border: 0; border-radius: 0; border-left: 1px solid var(--line); }
.features.band .feature:first-child { border-left: 0; }
.features.plain .feature { background: none; border: 0; padding: 0; }
.features.center .feature { align-items: center; text-align: center; }

/* Overlap circles --------------------------------------------------- */
.overlap { --size: clamp(13rem, 27vw, 21rem); display: flex; align-items: flex-start; }
.overlap .disc { width: var(--size); height: var(--size); flex: none; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; gap: .5rem; padding: calc(var(--size) * .17); background: color-mix(in oklab, var(--bg) 90%, var(--fg)); border: 1px solid var(--line); opacity: 0; transform: scale(.7); transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .6s ease; }
.overlap .disc + .disc { margin-left: calc(var(--size) * -.3); margin-top: calc(var(--size) * .32); transition-delay: .25s; }
.overlap.in .disc { opacity: 1; transform: none; }
.overlap .disc b { font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 650; letter-spacing: -.01em; }
.overlap .disc p { color: var(--muted); font-size: clamp(.82rem, 1vw, .95rem); line-height: 1.4; }
.overlap .disc.ink { background: var(--fg); color: var(--bg); border-color: transparent; }
.overlap .disc.ink p { color: inherit; opacity: .72; }
.overlap .disc.accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.overlap .disc.accent p { color: inherit; opacity: .85; }
.overlap.trio { position: relative; display: block; width: calc(var(--size) * 1.7); height: calc(var(--size) * 1.62); }
.overlap.trio .disc { position: absolute; margin: 0; }
.overlap.trio .disc:nth-child(1) { left: 0; top: 0; }
.overlap.trio .disc:nth-child(2) { left: calc(var(--size) * .7); top: 0; transition-delay: .2s; }
.overlap.trio .disc:nth-child(3) { left: calc(var(--size) * .35); top: calc(var(--size) * .62); transition-delay: .4s; }

/* Funnel (and pyramid) ---------------------------------------------- */
.funnel { display: flex; flex-direction: column; gap: .4rem; }
.funnel.up { flex-direction: column-reverse; }
.funnel .tier { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr auto; align-items: center; gap: 1rem; }
.funnel .name { font-size: .95rem; }
.funnel .band { display: flex; justify-content: center; height: clamp(2rem, 5.5vh, 3rem); }
.funnel .fill { width: var(--w); height: 100%; border-radius: 6px; background: var(--accent); opacity: max(.28, calc(1 - var(--i) * .15)); transform: scaleX(0); transition: transform .9s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 110ms); }
.funnel.on .fill { transform: none; }
.funnel .num { display: flex; flex-direction: column; align-items: flex-end; min-width: 4ch; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.funnel .rate { font-size: .74rem; color: var(--muted); font-weight: 500; white-space: nowrap; }

/* Column chart ------------------------------------------------------ */
.columns { --h-max: clamp(8rem, 28vh, 14rem); position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(.6rem, 1.5vw, 1.2rem); align-items: end; }
.columns::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1.9rem; height: 1px; background: var(--line); }
.columns .column { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .35rem; min-height: calc(var(--h-max) + 3.6rem); }
.columns .num { font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .4s ease calc(var(--i) * 70ms + .6s); }
.columns.on .num { opacity: 1; }
.columns .pillar { width: 100%; max-width: 4.2rem; height: calc(var(--h-max) * var(--h)); border-radius: 6px 6px 0 0; background: color-mix(in oklab, var(--fg) 22%, transparent); transform: scaleY(0); transform-origin: bottom; transition: transform .9s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 70ms); }
.columns.on .pillar { transform: none; }
.columns .column.accent .pillar { background: var(--accent); }
.columns .lab { height: 1.9rem; display: flex; align-items: flex-end; font-size: .85rem; color: var(--muted); box-sizing: border-box; padding-top: .5rem; text-align: center; }

/* Line chart -------------------------------------------------------- */
.linechart { display: grid; gap: .5rem; }
.linechart .plot { position: relative; height: clamp(9rem, 30vh, 15rem); }
.linechart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.linechart .grid { stroke: var(--line); stroke-width: 1; }
.linechart .area { fill: var(--accent); opacity: 0; transition: opacity .8s ease 1s; }
.linechart.on .area { opacity: .12; }
.linechart .curve { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.45, 0, .2, 1); }
.linechart.on .curve { stroke-dashoffset: 0; }
.linechart .end { fill: var(--accent); stroke: var(--bg); stroke-width: 3; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1) 1.3s; }
.linechart.on .end { transform: none; }
.linechart .endlabel { position: absolute; transform: translate(-100%, -100%); padding: 0 .2rem .6rem 0; font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity .4s ease 1.4s; }
.linechart.on .endlabel { opacity: 1; }
.linechart .xlabels { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); }

/* Dot matrix (waffle) ----------------------------------------------- */
.waffle { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; }
.waffle .cells { display: grid; grid-template-columns: repeat(var(--cols, 10), 1fr); gap: .3rem; width: clamp(9rem, 22vw, 15rem); }
.waffle .cell { aspect-ratio: 1; border-radius: 50%; background: var(--line); }
.waffle .cell.f { background: var(--accent); transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * 14ms + .1s); }
.waffle.on .cell.f { transform: none; }
.waffle[data-shape="person"] .cell { border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM5 22v-6.5A4.5 4.5 0 0 1 9.5 11h5a4.5 4.5 0 0 1 4.5 4.5V22z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM5 22v-6.5A4.5 4.5 0 0 1 9.5 11h5a4.5 4.5 0 0 1 4.5 4.5V22z'/%3E%3C/svg%3E") center / contain no-repeat; }
.waffle .value { display: block; font-family: var(--font-display, var(--font)); font-size: clamp(2.6rem, 5vw, 4.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.waffle .label { color: var(--muted); font-size: 1rem; line-height: 1.35; max-width: 22ch; margin-top: .45rem; }

/* 2×2 matrix -------------------------------------------------------- */
.matrix { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: .45rem .7rem; }
.matrix .ylab { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .78rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; align-self: center; }
.matrix .ylab::after, .matrix .xlab::after { content: " \2192"; }
.matrix .xlab { grid-column: 2; font-size: .78rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.matrix .plane { position: relative; height: clamp(12rem, 40vh, 20rem); border: 1px solid var(--line); border-radius: calc(var(--radius) / 2); }
.matrix .plane::before, .matrix .plane::after { content: ""; position: absolute; background: var(--line); }
.matrix .plane::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.matrix .plane::after { top: 50%; left: 0; right: 0; height: 1px; }
.matrix .q { position: absolute; font-size: .72rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; padding: .6rem .8rem; }
.matrix .q:nth-child(1) { left: 0; top: 0; }
.matrix .q:nth-child(2) { right: 0; top: 0; text-align: right; }
.matrix .q:nth-child(3) { left: 0; bottom: 0; }
.matrix .q:nth-child(4) { right: 0; bottom: 0; text-align: right; }
.matrix .q.hot { width: 50%; height: 50%; box-sizing: border-box; background: color-mix(in oklab, var(--accent) 9%, transparent); }
.matrix .pt { position: absolute; display: flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; white-space: nowrap; transform: translate(-.45rem, 50%); opacity: 0; transition: opacity .4s ease calc(var(--i) * 90ms + .2s); }
.matrix .pt.flip { flex-direction: row-reverse; transform: translate(calc(-100% + .45rem), 50%); }
.matrix.on .pt { opacity: 1; }
.matrix .pt::before { content: ""; width: .9rem; height: .9rem; border-radius: 50%; background: var(--fg); flex: none; transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * 90ms + .2s); }
.matrix.on .pt::before { transform: none; }
.matrix .pt.accent::before { background: var(--accent); }

/* Hub and spokes ---------------------------------------------------- */
.hub { position: relative; height: clamp(15rem, 46vh, 26rem); }
.hub > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub > svg line { stroke: var(--muted); opacity: .55; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.45, 0, .2, 1) calc(var(--i) * 80ms + .2s); }
.hub.on > svg line { stroke-dashoffset: 0; }
.hub .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(5.5rem, 9vw, 7.5rem); height: clamp(5.5rem, 9vw, 7.5rem); border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; text-align: center; font-weight: 700; font-size: .95rem; line-height: 1.15; padding: .6rem; box-sizing: border-box; }
.hub .spoke { position: absolute; transform: translate(-50%, -50%) scale(.6); opacity: 0; padding: .55rem 1.05rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .9rem; font-weight: 600; white-space: nowrap; text-align: center; transition: transform .6s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 80ms + .4s), opacity .4s ease calc(var(--i) * 80ms + .4s); }
.hub.on .spoke { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.hub .spoke.accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.hub .spoke small { display: block; font-weight: 400; color: var(--muted); font-size: .75rem; }
.hub .spoke.accent small { color: inherit; opacity: .8; }

/* Cycle ------------------------------------------------------------- */
.cycle { position: relative; height: clamp(15rem, 48vh, 26rem); }
.cycle > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cycle .seg, .cycle .head { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cycle .seg { transition: stroke-dashoffset .45s cubic-bezier(.45, 0, .2, 1) calc(var(--i) * .45s + .3s); }
.cycle .head { transition: stroke-dashoffset .2s ease calc(var(--i) * .45s + .68s); }
.cycle.on .seg, .cycle.on .head { stroke-dashoffset: 0; }
.cycle .node { position: absolute; width: 0; height: 0; }
.cycle .node .idx { position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: .9rem; transform: translate(-50%, -50%) scale(0); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * .45s + .1s); }
.cycle.on .node .idx { transform: translate(-50%, -50%) scale(1); }
.cycle .node.accent .idx { background: var(--accent); color: var(--on-accent); }
.cycle .node .text { position: absolute; width: max-content; max-width: 11rem; opacity: 0; transition: opacity .5s ease calc(var(--i) * .45s + .25s); }
.cycle.on .node .text { opacity: 1; }
.cycle .node b { display: block; font-size: .95rem; font-weight: 650; }
.cycle .node p { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.cycle .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--muted); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; max-width: 9rem; }

/* Slope chart ------------------------------------------------------- */
.slope { --xa: 30%; --xb: 70%; position: relative; height: clamp(13rem, 42vh, 22rem); margin-top: 1.8rem; }
.slope .axis { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.slope .axis.a { left: var(--xa); }
.slope .axis.b { left: var(--xb); }
.slope .axis b { position: absolute; top: -1.7rem; left: 50%; transform: translateX(-50%); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.slope > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.slope > svg line { stroke: var(--muted); opacity: .5; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .2, 1) calc(var(--i) * 90ms + .3s); }
.slope > svg line.up { stroke: var(--accent); opacity: 1; }
.slope.on > svg line { stroke-dashoffset: 0; }
.slope .dot { fill: var(--bg); stroke: var(--muted); stroke-width: 2; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .4s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * 90ms + .3s); }
.slope .dot.up { stroke: var(--accent); }
.slope.on .dot { transform: none; }
.slope .lbl { position: absolute; transform: translateY(-50%); display: flex; gap: .5rem; align-items: baseline; font-size: .85rem; white-space: nowrap; opacity: 0; transition: opacity .4s ease calc(var(--i) * 90ms + .25s); }
.slope.on .lbl { opacity: 1; }
.slope .lbl.a { right: calc(100% - var(--xa) + .9rem); }
.slope .lbl.b { left: calc(var(--xb) + .9rem); }
.slope .lbl b { font-weight: 700; font-variant-numeric: tabular-nums; }
.slope .lbl span { color: var(--muted); }
.slope .lbl.up b { color: var(--accent); }

/* Staircase steps --------------------------------------------------- */
.ladder { --gap: clamp(1rem, 2.5vw, 2rem); --rise: clamp(1.4rem, 4vh, 2.6rem); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--gap); align-items: end; }
.ladder .stair { position: relative; display: flex; flex-direction: column; gap: .35rem; border-top: 2px solid var(--line); padding-top: 1rem; margin-bottom: calc(var(--i, 0) * var(--rise)); }
.ladder .stair:not(:last-child)::after { content: ""; position: absolute; right: calc(var(--gap) / -2 - 1px); top: calc(var(--rise) * -1 - 2px); width: 2px; height: var(--rise); background: var(--line); }
.ladder .stair .n { font-family: var(--font-display, var(--font)); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--muted); }
.ladder .stair:last-child .n { color: var(--accent); }
.ladder .stair b { font-size: 1.02rem; font-weight: 650; }
.ladder .stair p { color: var(--muted); font-size: .9rem; line-height: 1.4; }

/* Flow nodes -------------------------------------------------------- */
.flow { --gap: clamp(1.6rem, 3.5vw, 3.2rem); display: flex; align-items: center; flex-wrap: wrap; gap: 1rem var(--gap); }
.flow .node { position: relative; padding: .9rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-weight: 600; font-size: .95rem; text-align: center; min-width: 7rem; }
.flow .node small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; margin-top: .2rem; }
.flow .node.accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.flow .node.accent small { color: inherit; opacity: .8; }
.flow .node.ghost { background: none; border-style: dashed; color: var(--muted); }
.flow .node:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--gap); height: 2px; background: var(--line); transform: translateY(-50%); }
.flow .node:not(:last-child)::before { content: ""; position: absolute; left: calc(100% + var(--gap) - .55rem); top: 50%; width: .45rem; height: .45rem; border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: translateY(-50%) rotate(45deg); z-index: 1; }
.flow.vertical { flex-direction: column; align-items: stretch; gap: var(--gap) 0; }
.flow.vertical .node:not(:last-child)::after { left: 50%; top: 100%; width: 2px; height: var(--gap); transform: translateX(-50%); }
.flow.vertical .node:not(:last-child)::before { left: 50%; top: calc(100% + var(--gap) - .55rem); transform: translateX(-50%) rotate(135deg); }

/* Roadmap ----------------------------------------------------------- */
.roadmap { --cols: 4; position: relative; display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr; gap: .55rem 1rem; align-items: center; }
.roadmap .rhead { grid-column: 2; display: grid; grid-template-columns: repeat(var(--cols), 1fr); font-size: .76rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; padding-bottom: .25rem; }
.roadmap .rhead span, .roadmap .lanes > span { border-left: 1px solid var(--line); padding-left: .5rem; }
.roadmap .name { font-size: .92rem; }
.roadmap .lanes { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); height: 1.7rem; }
.roadmap .lane { position: absolute; top: 0; bottom: 0; left: calc((var(--s) - 1) / var(--cols) * 100% + .25rem); width: calc((var(--e) - var(--s) + 1) / var(--cols) * 100% - .5rem); border-radius: 999px; background: color-mix(in oklab, var(--fg) 18%, transparent); display: flex; align-items: center; padding-left: .75rem; font-size: .76rem; font-weight: 600; white-space: nowrap; overflow: hidden; box-sizing: border-box; transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 90ms + .1s); }
.roadmap.on .lane { transform: none; }
.roadmap .lane.accent { background: var(--accent); color: var(--on-accent); }
.roadmap .lane.milestone { width: 1.1rem; height: 1.1rem; top: 50%; bottom: auto; padding: 0; border-radius: 3px; background: var(--accent); transform: translateY(-50%) rotate(45deg) scale(0); transform-origin: center; }
.roadmap.on .lane.milestone { transform: translateY(-50%) rotate(45deg) scale(1); }
.roadmap .now { position: absolute; grid-column: 2; grid-row: 2 / -1; top: 0; bottom: 0; left: calc(var(--at) * 100%); border-left: 1.5px dashed var(--accent); }

/* Checklist --------------------------------------------------------- */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; font-size: clamp(1rem, 1.4vw, 1.35rem); }
.checks li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; align-items: center; position: relative; }
.checks li::before { content: ""; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--accent); box-sizing: border-box; transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i, 0) * 90ms + .1s); }
.checks li::after { content: ""; position: absolute; left: .46rem; top: 50%; width: .3rem; height: .58rem; border-right: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: translateY(-62%) rotate(45deg) scale(0); transition: transform .35s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i, 0) * 90ms + .32s); }
.checks li.in::before { transform: none; }
.checks li.in::after { transform: translateY(-62%) rotate(45deg) scale(1); }
.checks li.todo { color: var(--muted); }
.checks li.todo::before { background: none; border: 1.5px solid var(--line); }
.checks li.todo::after { display: none; }

/* Big number -------------------------------------------------------- */
.bignum { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.bignum::before { content: ""; width: 3rem; height: 4px; border-radius: 2px; background: var(--accent); }
.bignum .value { font-family: var(--font-display, var(--font)); font-size: clamp(4.5rem, 13vw, 12rem); font-weight: 700; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.bignum .label { font-size: clamp(1.05rem, 1.5vw, 1.4rem); color: var(--muted); max-width: 26ch; line-height: 1.4; }
.bignum.accent::before { display: none; }
.bignum.accent .value { color: var(--accent); }

/* Index helpers for pure-CSS staggers -------------------------------- */
.ladder .stair:nth-child(1), .checks li:nth-child(1) { --i: 0; }
.ladder .stair:nth-child(2), .checks li:nth-child(2) { --i: 1; }
.ladder .stair:nth-child(3), .checks li:nth-child(3) { --i: 2; }
.ladder .stair:nth-child(4), .checks li:nth-child(4) { --i: 3; }
.ladder .stair:nth-child(5), .checks li:nth-child(5) { --i: 4; }
.ladder .stair:nth-child(6), .checks li:nth-child(6) { --i: 5; }
.ladder .stair:nth-child(7), .checks li:nth-child(7) { --i: 6; }
.ladder .stair:nth-child(8), .checks li:nth-child(8) { --i: 7; }

@media (max-width: 760px) {
  .journey { --cols: 2 !important; padding-inline: 1.5rem .5rem; }
  .arc { grid-template-columns: 1fr; }
  .arc .side { display: none; }
  .arc .list { padding-left: 1.2rem; }
  .overlap { flex-direction: column; }
  .overlap .disc + .disc { margin: -20% 0 0 30%; }
  .ladder { grid-auto-flow: row; }
  .ladder .stair { margin-bottom: 0; }
  .ladder .stair::after { display: none; }
  .flow { flex-direction: column; align-items: stretch; gap: var(--gap) 0; }
  .flow .node:not(:last-child)::after { left: 50%; top: 100%; width: 2px; height: var(--gap); transform: translateX(-50%); }
  .flow .node:not(:last-child)::before { left: 50%; top: calc(100% + var(--gap) - .55rem); transform: translateX(-50%) rotate(135deg); }
  .waffle { grid-template-columns: 1fr; }
  .columns { gap: .4rem; }
  .cycle, .hub { height: 22rem; }
}

/* Arc dial (decoration drawn by the runtime) ------------------------ */
.arc .dial { fill: none; stroke: var(--accent); opacity: .16; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.45, 0, .2, 1) .1s; }
.arc.on .dial { stroke-dashoffset: 0; }