/* Bento „KI macht die Arbeit“, neue Fassung, Block proof/how auf allen Seiten (seit 2026-10-31).
   Quelle: Artefakt https://claude.ai/artifact/Cf6f6wtYd5Qmd5ARDJNL3Z, Klassen mit Präfix bx-, damit nichts mit
   .bento/.growth/.phone3 aus redesign.css kollidiert. Schriften (Work Sans, Cousine) lädt redesign.css. */
.bxn *, .bxn *::before, .bxn *::after { box-sizing: border-box; }
.bxn h3, .bxn p, .bxn ul { margin: 0; padding: 0; }
.bxn ul { list-style: none; }
.bx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Aufbau: vier Kacheln mit gleichem Gerüst (Bühne oben, Text unten), Reihen 7/5 und 5/7,
   zwei Flächen im Wechsel: weiß und PROOF-Navy diagonal. Farben und Typo wie proof.css. */
.bxn {
  --ink: #101114;
  --muted: #55574f;
  --paper: #f3f2f1;
  --white: #ffffff;
  --rule: rgba(16, 17, 20, .1);
  --blue: #0b50c8;
  --navy: #062558;
  --lime: #adf71e;
  --lime-deep: #8fd60a;
  --on-dark: rgba(255, 255, 255, .78);
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .26 0 0 0 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --stage: clamp(330px, 12vw + 220px, 410px);
  --pad: clamp(22px, 2.4vw, 36px);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.32, .64, 1);
}




/* ---------- Raster ---------- */
.bx-bento { display: grid; gap: clamp(12px, 1.2vw, 18px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .bx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .bx-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bx-t-team, .bx-t-growth { grid-column: span 7; }
  .bx-t-phone, .bx-t-speed { grid-column: span 5; }
}

.bx-tile { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px var(--rule); }
.bx-tile--dark { color: var(--white); background: var(--grain-dark), radial-gradient(120% 90% at 75% 0%, #0d3a8a 0%, var(--navy) 55%, #04163a 100%); box-shadow: none; }
.bx-stage { position: relative; flex: none; height: var(--stage); overflow: hidden; }
.bx-tile:not(.bx-tile--dark) .bx-stage { background: radial-gradient(60% 75% at 50% 42%, #e6edfb 0%, rgba(230, 237, 251, 0) 72%); }
.bx-title { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 540; text-wrap: balance; }
.bx-body { display: grid; gap: 10px; margin-top: auto; padding: 4px var(--pad) var(--pad); }
.bx-body p { font-size: .9375rem; line-height: 1.55; color: var(--muted); max-width: 46ch; }
.bx-tile--dark .bx-body p { color: var(--on-dark); }


/* ---------- 1 Team-Stapel (aus tiles.js „team-stapel“) ---------- */
.bx-t-team .bx-stage { container-type: inline-size; --docw: clamp(118px, 17cqw, 150px); }
.bx-deck { position: absolute; inset: 0; z-index: 2; }
/* Links schreibt die KI den Entwurf, rechts liegt das geprüfte Ergebnis, die Linie läuft durch den Stapel; erst ab 640 px Bühnenbreite */
.bx-doc, .bx-flow, .bx-packet { display: none; }
@container (min-width: 640px) { .bx-doc, .bx-flow { display: block; } .bx-packet { display: grid; } }
.bx-doc { position: absolute; z-index: 1; top: 41%; width: var(--docw); aspect-ratio: 3 / 4; translate: 0 -50%; }
.bx-doc--draft { left: 6cqw; rotate: -3deg; }
.bx-doc--done { right: 6cqw; rotate: 3deg; }
.bx-sheet { position: absolute; inset: 0; padding: 12px 12px 0; border-radius: 8px; background: var(--white); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(16, 17, 20, .04), 0 20px 34px -24px rgba(6, 37, 88, .5); overflow: hidden; }
.bx-lines { display: flex; flex-direction: column; gap: 6px; }
.bx-lines i { display: block; flex: none; width: var(--w, 100%); height: 5px; border-radius: 3px; }
.bx-lines i.bx-h { height: 8px; margin: 1px 0 4px; }
.bx-lines i.bx-gap { margin-top: 6px; }
/* Links arbeitet die KI zu: Zeilen in Blau, die sich nach jeder Übergabe sanft von oben neu füllen; KI-Pille, stiller Schein */
.bx-aura { position: absolute; inset: -12px; border-radius: 20px; background: conic-gradient(from 200deg, #0b50c8, #7aa7ff, #c6fb5f, #3e82e4, #0b50c8); filter: blur(16px); opacity: .3; }
.bx-ai { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bx-ai__pill { flex: none; padding: 3px 8px 2px; border-radius: 999px; background: linear-gradient(135deg, #0b50c8, #3e82e4); color: var(--white); font-size: 11px; line-height: 1.3; font-weight: 600; letter-spacing: .05em; }
.bx-doc--draft .bx-lines i { background: rgba(11, 80, 200, .2); }
.bx-doc--draft .bx-lines i.bx-h { background: rgba(11, 80, 200, .36); }
.bx-doc--draft.is-writing .bx-lines i { animation: write 1.1s ease backwards; animation-delay: calc(var(--d) * .2s); }
@keyframes write { from { opacity: .3; } }
/* Rechts das abgegebene Ergebnis: gesetzte Zeilen, Bild, zwei Blätter darunter, Haken als Prüfstempel; alles steht */
.bx-doc--done .bx-lines i { background: rgba(16, 17, 20, .12); }
.bx-doc--done .bx-lines i.bx-h { background: rgba(16, 17, 20, .5); }
.bx-sheet__img { display: block; flex: none; height: 44px; margin-bottom: 4px; border-radius: 4px; background: linear-gradient(135deg, #e6edfb, #bccff5); }
.bx-sheet--b1 { transform: translate(8px, 7px) rotate(4deg); box-shadow: 0 0 0 1px var(--rule), 0 10px 20px -16px rgba(6, 37, 88, .4); }
.bx-sheet--b2 { transform: translate(4px, 3px) rotate(2deg); box-shadow: 0 0 0 1px var(--rule), 0 10px 20px -16px rgba(6, 37, 88, .4); }
.bx-stamp { position: absolute; z-index: 2; top: -9px; right: -9px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--ink); box-shadow: 0 0 0 3px var(--white), 0 6px 12px -6px rgba(6, 37, 88, .5); }
.bx-stamp svg { width: 15px; height: 15px; }
.bx-flow { position: absolute; z-index: 0; top: 41%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgba(11, 80, 200, .28) 0 4px, rgba(11, 80, 200, 0) 4px 9px); }
.bx-flow--in { left: calc(6cqw + var(--docw) + 6px); right: calc(50% + 150px); }
.bx-flow--out { left: calc(50% + 150px); right: calc(6cqw + var(--docw) + 6px); }
/* Ein Blatt wandert vom Entwurf in den Stapel und mit Haken weiter zum Ergebnis */
.bx-packet { position: absolute; z-index: 1; top: 41%; width: 24px; height: 30px; margin-top: -15px; align-content: start; gap: 3px; padding: 9px 5px 0; border-radius: 4px; background: var(--white); box-shadow: 0 0 0 1px var(--rule), 0 6px 12px -6px rgba(6, 37, 88, .5); opacity: 0; }
.bx-packet i { display: block; height: 2px; border-radius: 1px; background: rgba(16, 17, 20, .18); }
.bx-packet i:last-child { width: 60%; }
.bx-packet__dot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--white); }
.bx-packet__dot--ki { background: var(--blue); }
.bx-packet__dot--ok { background: var(--lime); }
.bx-packet--in { left: calc(6cqw + var(--docw)); }
.bx-packet--out { left: calc(50% + 140px); }
.bx-packet--in.is-go { animation: hop-in .8s cubic-bezier(.4, 0, .2, 1) forwards; }
.bx-packet--out.is-go { animation: hop-out .8s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes hop-in { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(50cqw - 6cqw - var(--docw) - 150px)); } }
@keyframes hop-out { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(50cqw - 6cqw - var(--docw) - 164px)); } }

.bx-pc { position: absolute; left: 50%; top: 8%; height: 66%; aspect-ratio: 4 / 5; translate: -50% 0; padding: 6px; border-radius: 12px; background: var(--white); box-shadow: 0 1px 0 rgba(16, 17, 20, .05), 0 26px 44px -24px rgba(6, 37, 88, .6); transition: transform .6s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.bx-pc img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 7px; filter: grayscale(1); transition: filter .6s ease; }
.bx-pc[data-pos="0"] { transform: rotate(-3deg); }
.bx-pc[data-pos="0"] img { filter: none; }
.bx-pc[data-pos="1"] { transform: translate(16%, 4%) rotate(6deg) scale(.92); }
.bx-pc[data-pos="2"] { transform: translate(-16%, 6%) rotate(-10deg) scale(.86); }
.bx-pc[data-pos="3"] { transform: translate(-16%, 6%) rotate(-10deg) scale(.8); }
.bx-pc[data-pos="out"] { transform: translate(95%, 0) rotate(18deg); transition: transform .45s cubic-bezier(.55, .085, .68, .53); }
.bx-pc[data-pos="out"] img { filter: none; }
.bx-seal { position: absolute; left: 50%; bottom: 7%; z-index: 8; translate: -50% 0; display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 7px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: .875rem; font-weight: 500; white-space: nowrap; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6); transition: opacity .3s ease, transform .5s var(--spring); }
.bx-seal:not(.is-on) { opacity: 0; transform: translateY(8px) scale(.94); }
.bx-seal i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--ink); }
.bx-seal svg { width: 14px; height: 14px; }

/* ---------- 2 Handy: Dynamic Island meldet, Push fällt in den Stapel ---------- */
.bx-t-phone .bx-stage { -webkit-mask: linear-gradient(180deg, #000 80%, transparent 100%); mask: linear-gradient(180deg, #000 80%, transparent 100%); }
.bx-t-phone .bx-stage::before { content: ""; position: absolute; left: 50%; top: 12%; width: 120%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 125, 255, .35), rgba(60, 125, 255, 0)); pointer-events: none; }
.bx-phone { position: absolute; left: 50%; top: 24px; translate: -50% 0; width: clamp(224px, 58%, 262px); aspect-ratio: 9 / 19.5; padding: 9px; border-radius: 48px; background: linear-gradient(150deg, #7a7e88 0%, #2a2c32 16%, #131417 48%, #24262b 84%, #6a6e77 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), inset 0 0 0 3.5px #0a0b0d, 0 0 0 1px rgba(0, 0, 0, .35), 0 60px 90px -40px rgba(0, 0, 0, .85); }
.bx-phone::before, .bx-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2d3036; }
.bx-phone::before { left: -3px; top: 19%; height: 20%; background: linear-gradient(180deg, #34373d 0 30%, transparent 30% 40%, #34373d 40% 100%); }
.bx-phone::after { right: -3px; top: 25%; height: 12%; }
.bx-screen { position: relative; height: 100%; overflow: hidden; border-radius: 39px; container-type: inline-size; color: var(--white); background: radial-gradient(110% 70% at 12% 0%, #3f7df2 0%, rgba(63, 125, 242, 0) 55%), radial-gradient(90% 60% at 100% 48%, #1648bb 0%, rgba(22, 72, 187, 0) 62%), linear-gradient(180deg, #0b2c76 0%, #061736 72%); }
.bx-screen::after { content: ""; position: absolute; inset: 0; z-index: 20; background: linear-gradient(115deg, rgba(255, 255, 255, .09) 0 24%, rgba(255, 255, 255, 0) 24.3%); pointer-events: none; }
.bx-island { position: absolute; z-index: 10; top: 4cqw; left: 50%; translate: -50% 0; width: 34cqw; height: 10.5cqw; padding: 0 2.2cqw; border-radius: 999px; background: #000; display: flex; align-items: center; justify-content: space-between; transition: width .55s var(--spring), height .55s var(--spring); }
.bx-island.is-ping { width: 82cqw; height: 14cqw; }
.bx-island__app, .bx-island__ring { opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .4s var(--spring); }
.bx-island.is-ping .bx-island__app, .bx-island.is-ping .bx-island__ring { opacity: 1; transform: scale(1); transition-delay: .14s; }
.bx-island__app { display: grid; place-items: center; width: 9.4cqw; height: 9.4cqw; border-radius: 2.8cqw; background: #1d1f25; }
.bx-island__app svg { width: 5.6cqw; height: 4.5cqw; fill: var(--lime); }
.bx-island__ring { position: relative; width: 6.6cqw; height: 6.6cqw; margin-right: 1cqw; border-radius: 50%; border: .9cqw solid var(--lime); }
.bx-island.is-ping .bx-island__ring::after { content: ""; position: absolute; inset: -.9cqw; border-radius: 50%; border: .9cqw solid var(--lime); animation: ring 1s ease-out .2s; opacity: 0; }
@keyframes ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.bx-lock { padding-top: 19cqw; text-align: center; }
.bx-lock__date { font-size: max(11px, 4.8cqw); font-weight: 500; color: rgba(255, 255, 255, .86); }
.bx-lock__time { margin-top: .6cqw; font-size: 23cqw; line-height: 1; font-weight: 320; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bx-notes { position: relative; margin: 6.5cqw 3.4cqw 0; }
.bx-note { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 10.6cqw minmax(0, 1fr); gap: 3cqw; align-items: start; padding: 3.4cqw 3.8cqw 3.6cqw 3.4cqw; border-radius: 6.4cqw; background: rgba(238, 242, 250, .84); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); color: var(--ink); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .55); transform-origin: 50% 0; transition: transform .75s var(--spring), opacity .45s ease, filter .45s ease; }
.bx-note.is-instant { transition: none; }
.bx-note.is-enter { opacity: 0; filter: blur(6px); }
.bx-note.is-out { opacity: 0; }
.bx-note__ico { position: relative; display: grid; place-items: center; width: 10.6cqw; height: 10.6cqw; border-radius: 2.8cqw; background: var(--ink); }
.bx-note__ico > svg { width: 6.2cqw; height: 5cqw; fill: var(--lime); }
.bx-note__ico--person { border-radius: 50%; background: #c9d3e6; }
.bx-note__ico--person img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bx-note__badge { position: absolute; right: -1.2cqw; bottom: -1.2cqw; display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; border-radius: 1.6cqw; background: var(--ink); box-shadow: 0 0 0 .7cqw #eef2fa; }
.bx-note__badge svg { width: 3.4cqw; height: 2.8cqw; fill: var(--lime); }
.bx-note__txt { min-width: 0; font-size: max(11px, 4.3cqw); line-height: 1.28; }
.bx-note__head { display: flex; justify-content: space-between; gap: 2cqw; font-weight: 600; letter-spacing: .01em; }
.bx-note__head span { font-weight: 400; color: #5d6068; white-space: nowrap; }
.bx-note strong { display: block; font-weight: 650; }
.bx-note__msg { display: block; color: #2a2c31; }

/* ---------- 3 Tempo: Zeitstrahl in Arbeitstagen, PROOF gegen Agentur ---------- */
.bx-race { position: absolute; left: var(--pad); right: var(--pad); top: 50%; translate: 0 -54%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 14px; align-items: center; }
.bx-race__weeks { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 11.5px; color: rgba(255, 255, 255, .72); }
.bx-race__weeks span { padding: 0 0 6px 7px; border-left: 1px solid rgba(255, 255, 255, .22); white-space: nowrap; overflow: hidden; }
.bx-race__name { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.bx-race__name svg { width: 15px; height: 12px; fill: var(--lime); }
.bx-race__name--muted { color: var(--on-dark); font-weight: 500; }
.bx-lane { position: relative; height: 42px; border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .075) 0 calc(5% - 3px), rgba(255, 255, 255, 0) calc(5% - 3px) 5%); }
.bx-bar { position: absolute; left: 0; top: 6px; bottom: 6px; width: 0; border-radius: 6px; opacity: var(--fade, 1); }
.bx-bar--proof { width: 15%; background: linear-gradient(90deg, var(--lime-deep), var(--lime)); box-shadow: 0 0 22px -4px rgba(173, 247, 30, .6); }
.bx-bar--agency { width: 80%; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 7px, rgba(255, 255, 255, .14) 7px 14px); background-size: 19.8px 19.8px; }
.bx-bar--agency.is-run { animation: stripes .7s linear infinite; }
@keyframes stripes { to { background-position: 19.8px 0; } }
.bx-done { position: absolute; top: 50%; left: 15%; display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 8px; border-radius: 50%; background: var(--lime); color: var(--ink); opacity: var(--fade, 1); transform: scale(1); transition: transform .5s var(--spring); }
.bx-done:not(.is-on) { transform: scale(0); transition: none; } /* beim Neustart sofort weg, sonst blinkt der Haken kurz auf */
.bx-done svg { width: 16px; height: 16px; }
.bx-race__ph { grid-column: 2; grid-row: 1 / span 3; position: relative; align-self: stretch; pointer-events: none; }
.bx-ph { position: absolute; top: 2px; bottom: -6px; left: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .2)); opacity: 0; }
.bx-ph::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--white); }

/* ---------- 4 Wachstum ---------- */
.bx-growth { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--pad) var(--pad) 6px; }
.bx-growth__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .875rem; color: var(--muted); }
.bx-growth__chip { padding: 3px 9px; border-radius: 6px; background: rgba(16, 17, 20, .06); font-size: .75rem; }
.bx-growth__metric { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.bx-growth__metric strong { padding: 4px 9px 3px; border-radius: 7px; background: var(--lime); font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: clamp(1.875rem, 1.45rem + 1.2vw, 2.5rem); line-height: 1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bx-growth__metric small { font-size: .9375rem; color: var(--muted); }
.bx-chart { position: relative; height: 56%; margin-top: auto; }
.bx-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bx-chart__bars rect { fill: rgba(11, 80, 200, .1); transform-box: fill-box; transform-origin: 50% 100%; }
.bx-chart__bars rect:last-child { fill: rgba(11, 80, 200, .22); }
.bx-chart__grid line { stroke: rgba(16, 17, 20, .08); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
/* Meilensteine auf der Kurve, am letzten die Notiz des Ansprechpartners (Bildsprache wie die Dokumente in der Team-Kachel) */
.bx-mile { position: absolute; z-index: 2; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 2.5px var(--blue); }
.bx-memo { position: absolute; z-index: 3; right: calc(100% - 72.13% + 10px); bottom: calc(70% + 10px); display: flex; align-items: center; gap: 10px; width: min(184px, 60%); padding: 9px 12px 9px 9px; border-radius: 10px 10px 3px 10px; background: var(--white); box-shadow: 0 0 0 1px var(--rule), 0 16px 28px -18px rgba(6, 37, 88, .55); }
.bx-memo img { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.bx-memo span { flex: 1; display: grid; gap: 5px; }
.bx-memo i { display: block; height: 5px; border-radius: 3px; background: rgba(16, 17, 20, .12); }
.bx-memo i:first-child { width: 55%; background: rgba(16, 17, 20, .3); }
.bx-memo i:last-child { width: 72%; }
.bx-chart__area { fill: url(#bxAreaGrad); }
.bx-chart__line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bx-chart__dot { position: absolute; left: 96.53%; top: 12.26%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px var(--white), 0 0 0 4px rgba(11, 80, 200, .35); }
.bx-chart__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--lime-deep); opacity: 0; animation: halo 2.4s ease-out 2.4s infinite; }
@keyframes halo { 0% { opacity: .7; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
.is-play .bx-chart__bars rect { animation: grow .8s var(--ease-out) backwards; animation-delay: calc(var(--n) * 28ms); }
.is-play .bx-chart__lines { animation: reveal 1.4s .45s cubic-bezier(.65, 0, .35, 1) backwards; }
.is-play .bx-chart__dot { animation: pop .5s 1.75s var(--spring) backwards; }
.is-play .bx-mile { animation: pop .4s var(--spring) backwards; animation-delay: calc(.45s + 1.4s * var(--f)); }
.is-play .bx-memo { animation: rise .6s var(--ease-out) backwards; animation-delay: calc(.75s + 1.4s * var(--f)); }
.is-wait .bx-chart__bars rect { transform: scaleY(0); }
.is-wait .bx-chart__lines { clip-path: inset(0 100% 0 0); }
.is-wait .bx-mile, .is-wait .bx-chart__dot { transform: scale(0); }
.is-wait .bx-memo { opacity: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pop { from { transform: scale(0); } }

@media (max-width: 679px) {
  .bx-t-phone .bx-stage { height: 380px; }
  .bx-race { gap: 14px 10px; }
  .bx-race__weeks { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .bxn *, .bxn *::before, .bxn *::after { transition: none !important; animation: none !important; }
}