/* Homepage "Check before you cross" animation. Versioned file: /assets/* is cached as immutable. */
.story-intro { display: grid; gap: .25rem; margin-bottom: 1.75rem; }
.story-intro h2 { margin-bottom: .5rem; }
.crossing-story { display: grid; gap: 1rem; }
.cs-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: clamp(14px, 2.2vw, 28px); background: #f3dcc3; box-shadow: var(--shadow); container-type: inline-size; }
.cs-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.cs-phone { position: absolute; top: 5cqw; right: 5cqw; width: clamp(168px, 27cqw, 320px); padding: clamp(6px, .9cqw, 11px); border-radius: clamp(18px, 3.2cqw, 38px); background: #122025; box-shadow: 0 2cqw 5cqw rgba(18, 32, 37, .35); transform: translateY(125%) rotate(4deg); opacity: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .4s; }
.cs-phone.show { transform: none; opacity: 1; }
.cs-screen { display: grid; gap: clamp(5px, .8cqw, 9px); padding: clamp(9px, 1.6cqw, 18px) clamp(8px, 1.3cqw, 15px); border-radius: clamp(13px, 2.5cqw, 30px); background: #f4f7f7; color: #122025; font-size: clamp(8.5px, 1.18cqw, 14px); line-height: 1.3; }
.cs-head { display: flex; justify-content: space-between; align-items: center; }
.cs-head b { display: inline-flex; align-items: center; gap: .4em; font-size: 1.25em; font-weight: 850; letter-spacing: -.04em; }
.cs-head b::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #0f8a8d; }
.cs-tag { padding: .15em .55em; border-radius: 99px; background: #e8f3f2; color: #0b7072; font-size: .82em; font-weight: 800; white-space: nowrap; }
.cs-seg { display: grid; grid-template-columns: 1fr 1fr; padding: .2em; border-radius: .7em; background: #e2eaea; font-size: .88em; font-weight: 750; text-align: center; }
.cs-seg span { padding: .3em; border-radius: .55em; }
.cs-seg span:first-child { background: #fff; box-shadow: 0 1px 3px rgba(18, 32, 37, .12); }
.cs-row { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .15em .6em; padding: .65em .75em; border: 1px solid #d9e2e2; border-radius: .9em; background: #fff; opacity: 0; transform: translateY(.8em); transition: opacity .35s, transform .45s, border-color .3s, box-shadow .3s; }
.cs-phone.show .cs-row { opacity: 1; transform: none; }
.cs-phone.show .cs-row:nth-child(3) { transition-delay: .2s; }
.cs-phone.show .cs-row:nth-child(4) { transition-delay: .4s; }
.cs-phone.show .cs-row:nth-child(5) { transition-delay: .6s; }
.cs-row strong { font-weight: 800; }
.cs-row small { grid-column: 1; color: #5c6b72; font-size: .86em; }
.cs-mins { grid-row: 1 / span 2; grid-column: 2; font-size: 1.35em; font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.cs-mins em { margin-left: .15em; color: #5c6b72; font-size: .6em; font-style: normal; font-weight: 700; }
.cs-bar { grid-column: 1 / -1; height: .32em; overflow: hidden; border-radius: 99px; background: #e8eeee; }
.cs-bar i { display: block; height: 100%; border-radius: inherit; }
.cs-row.pick { border-color: #0f8a8d; box-shadow: 0 0 0 .2em rgba(15, 138, 141, .18); }
.cs-pick-note { position: absolute; top: -.85em; right: .7em; padding: .1em .55em; border-radius: 99px; background: #0f8a8d; color: #fff; font-size: .78em; font-weight: 800; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; }
.cs-row.pick .cs-pick-note { opacity: 1; transform: none; }
.cs-fresh { display: flex; align-items: center; gap: .45em; color: #5c6b72; font-size: .88em; }
.cs-fresh::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #0e9f6e; box-shadow: 0 0 0 .22em rgba(14, 159, 110, .18); }
.cs-src { color: #6b7a81; font-size: .8em; }

.cs-end { position: absolute; left: 4cqw; bottom: 4cqw; width: clamp(230px, 47cqw, 560px); padding: clamp(12px, 2.4cqw, 30px); border-radius: clamp(12px, 2cqw, 24px); background: rgba(255, 255, 255, .93); color: #122025; box-shadow: 0 1.5cqw 4cqw rgba(18, 32, 37, .22); backdrop-filter: blur(10px); opacity: 0; transform: translateY(1.5cqw); transition: opacity .6s, transform .7s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.cs-end.show { opacity: 1; transform: none; }
.cs-end .cs-brand { display: inline-flex; align-items: center; gap: .45em; font-size: clamp(12px, 1.7cqw, 20px); font-weight: 850; letter-spacing: -.04em; }
.cs-end .cs-brand::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #0f8a8d; box-shadow: 0 0 0 .3em #e8f3f2; }
.cs-end h3 { margin: .45em 0 .35em; font-size: clamp(17px, 3.7cqw, 44px); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.cs-end p { max-width: 44ch; margin: 0; color: #5c6b72; font-size: clamp(10px, 1.3cqw, 15.5px); line-height: 1.45; }
.cs-end .cs-fine { margin-top: .8em; color: #6b7a81; font-size: clamp(8.5px, .95cqw, 12px); }

.cs-caption { min-height: 2.8em; margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 700; line-height: 1.35; letter-spacing: -.02em; text-wrap: balance; }
.cs-controls { display: flex; align-items: center; gap: .75rem 1rem; }
.cs-btn { display: inline-grid; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; place-items: center; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); color: var(--text); cursor: pointer; }
.cs-btn:hover { border-color: var(--primary); }
.cs-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.cs-btn:focus-visible, .cs-chapter:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.cs-chapters { display: grid; flex: 1 1 auto; grid-template-columns: 4fr 3.5fr 5fr 7fr 4.5fr; gap: .35rem; }
.cs-chapter { display: grid; gap: .35rem; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .72rem; font-weight: 750; text-align: left; cursor: pointer; }
.cs-track { height: .3rem; overflow: hidden; border-radius: 99px; background: var(--border); }
.cs-fill { display: block; width: 0; height: 100%; background: var(--primary); }
.cs-chapter.on { color: var(--text); }
.cs-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-note { margin: 0; color: var(--muted); font-size: .85rem; }

@media (max-width: 560px) { .cs-lbl { display: none; } }