.ab-h1 { font-size: var(--t-4xl); line-height: 0.92; max-width: 8ch; }
.ab-mark { justify-self: center; width: min(100%, 25rem); }
.ab-mark svg { width: 100%; height: auto; }
.ab-mark .lift { --lift-step: -12px; }
@media (max-width: 960px) { .ab-mark { width: min(62%, 16rem); } }

.story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.story__h { position: sticky; top: calc(var(--bar-h) + 2.5rem); max-width: 12ch; }
.beats { position: relative; display: grid; gap: clamp(1.25rem, 3vw, 2rem); padding-block: 0.5rem; }

.beats::before {
  content: ""; position: absolute; left: 1.75rem; top: 1.4rem; bottom: 1.4rem; width: 1px;
  background: var(--accent); transform-origin: top;
}
.beat { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s5); align-items: center; }
.beat__plate { width: 3.5rem; height: auto; color: currentColor; }
.beat__plate use { stroke: currentColor; fill: var(--ground); }
.beat--turn .beat__plate, .beat--after .beat__plate { color: var(--tk, var(--accent)); }
.beat p { max-width: 46ch; }
.beat--turn p { font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg); line-height: 1.35; letter-spacing: var(--track-snug); }
@media (max-width: 960px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .story__h { position: static; }
}
@media (max-width: 600px) {
  .beat { grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--s4); }
  .beat__plate { width: 2.75rem; }
  .beats::before { left: 1.375rem; }
}

.money { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.money__head { display: grid; gap: var(--s4); }
.money__head p { color: var(--fg-soft); max-width: 44ch; }
.money__fig { display: grid; gap: var(--s5); margin: 0; }
.money__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: var(--s5); }

.money__col { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--s3); justify-items: center; }
.money__stack { align-self: end; }
.money__legend { align-self: start; }
.money__k { font-family: var(--f-display); font-weight: 600; text-align: center; }
.money__stack { width: min(100%, 11.5rem); height: auto; overflow: visible; }
.money__legend { display: grid; gap: 0.35rem; font-size: var(--t-sm); color: var(--fg-soft); }
.money__legend li { display: flex; align-items: center; gap: 0.6rem; }
.key { flex: none; width: 0.95rem; height: 0.52rem; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.key--build { background: var(--accent); }
.key--x { background: color-mix(in oklab, var(--fg) 45%, transparent); }
.money__cap { font-size: var(--t-sm); color: var(--fg-soft); text-align: center; }
.slab__top { stroke-width: 1.6; stroke-linejoin: miter; stroke-miterlimit: 6; }
.slab__side { stroke: none; }
.slab--build .slab__top { stroke: var(--accent); fill: color-mix(in oklab, var(--accent) 16%, var(--ground)); }
.slab--build .slab__side { fill: color-mix(in oklab, var(--accent) 34%, var(--ground)); }
.slab--x .slab__top { stroke: color-mix(in oklab, var(--fg) 55%, transparent); stroke-dasharray: 3 2.4; fill: var(--ground); }
.slab--x .slab__side { fill: color-mix(in oklab, var(--fg) 12%, var(--ground)); }
@media (max-width: 960px) { .money { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }

.cont { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.cont__h { max-width: 16ch; }
.cont__plate { display: grid; gap: var(--s4); }
.cont__list { display: grid; }
.cont__list li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s3); align-items: center; padding-block: 0.85rem; border-bottom: 1px solid var(--rule); }
.cont__list li:first-child { padding-top: 0.2rem; }
.cont__note { color: var(--fg-soft); font-size: var(--t-sm); }
@media (max-width: 960px) { .cont { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }

.reg { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.reg__head { display: grid; gap: var(--s4); }
.reg__head p { color: var(--fg-soft); max-width: 44ch; }
.reg__ssm { font-size: var(--t-lg); letter-spacing: 0.01em; }
@media (max-width: 960px) { .reg { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }

@media (prefers-reduced-motion: no-preference) {
  
  .ab-g { animation: ab-born 1000ms var(--ease) both; animation-delay: calc(var(--k) * 150ms + 150ms); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .beats::before { animation: beats-draw linear both; animation-timeline: --scan; animation-range: cover 35vh cover calc(100% - 35vh); }
    .money__stack--agency { view-timeline: --money block; }
    .slab--x { animation: slab-lift linear both; animation-timeline: --money; animation-range: cover 15% cover 50%; }
  }
}
@keyframes ab-born { from { transform: translateY(22px); } to { transform: none; } }
@keyframes beats-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes slab-lift { from { translate: 0 0; } to { translate: 0 calc(var(--i, 1) * -6px); } }

@media (prefers-reduced-motion: reduce) {
  .ab-g, .beats::before, .slab--x { animation: none !important; }
}