/* A product story, built from the site's own demo content. */
.product-story {
  background: #050a1b;
  color: #fff;
  padding: 100px 0 0;
  overflow: clip;
}
.matchday-heading { max-width: 800px; margin: 0 auto 58px; text-align: center; }
.matchday-heading .eyebrow { color: #afbacd; font-size: .75rem; }
.matchday-heading h2 { font-size: clamp(3.2rem, 6.5vw, 5.5rem); line-height: 1.04; letter-spacing: -.055em; }
.matchday-heading h2 span { color: var(--turquoise); }
.matchday-heading > p:last-child { color: #aebbd0; font-size: 1.0625rem; line-height: 1.8; margin-top: 25px; }
.matchday-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.matchday-stage { grid-row: 1; width: min(100%, 780px); margin-inline: auto; min-width: 0; }
.matchday-chapters { grid-row: 2; width: 100%; }
.matchday-chapter { max-width: 600px; margin-inline: auto; padding: 24px 0 40px; }
.chapter-marker { display: flex; align-items: center; gap: 16px; color: #00cacc; font-size: .875rem; font-weight: 750; }
.chapter-marker > span { letter-spacing: .13em; color: #9cacc3; font-size: .75rem; }
.matchday-chapter h3 { font-size: clamp(2rem, 3.1vw, 2.85rem); line-height: 1.15; letter-spacing: -.045em; margin: 23px 0 20px; }
.matchday-chapter > p { color: #b8c4d6; font-size: 1rem; line-height: 1.85; max-width: 37rem; }
.matchday-link { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; color: #6fe2df; font-weight: 650; font-size: .9375rem; margin-top: 22px; }
.matchday-link:hover { color: white; }
.matchday-link .icon { width: 19px; }
.matchday-ready .matchday-chapter:not(.is-current) { display: none; }
.matchday-scroll .matchday-layout { grid-template-columns: minmax(0, .76fr) minmax(0, 1.3fr); gap: 48px; }
.matchday-scroll .matchday-stage { grid-column: 2; grid-row: 1; position: sticky; top: 114px; padding-top: 30px; }
.matchday-scroll .matchday-chapters { grid-column: 1; grid-row: 1; }
.matchday-scroll .matchday-chapter,
.matchday-scroll .matchday-chapter:not(.is-current) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 580px;
  padding: 70px 0 90px 25px;
  border-left: 1px solid #ffffff1c;
  opacity: .48;
  transition: opacity .3s, border-color .3s;
}
.matchday-scroll .matchday-chapter.is-current,
.matchday-scroll .matchday-chapter:focus-within { opacity: 1; border-color: #00cacc; }
.matchday-scroll .matchday-chapter:last-child { padding-bottom: 150px; }
.device-scene { position: relative; height: 540px; isolation: isolate; perspective: 1400px; }
.showcase-tablet {
  position: absolute;
  top: 22px;
  right: 0;
  width: calc(100% - 100px);
  height: 428px;
  border: 9px solid #263347;
  border-radius: 24px;
  background: #f7f9fc;
  color: #152033;
  overflow: hidden;
  box-shadow: 0 0 0 1px #8094ac75, 0 28px 70px #0007;
  transform: translateY(var(--tablet-lift, 0px)) rotateY(-4deg) rotate(1deg);
}
.tablet-toolbar { height: 55px; padding: 9px 18px 9px 145px; background: #0b1427; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #a6b4c9; }
.tablet-toolbar img { width: 137px; height: auto; }
.tablet-toolbar > span { font-size: .75rem; }
.tablet-content { position: relative; height: calc(100% - 55px); overflow: auto; scrollbar-width: thin; }
.tablet-rail { position: absolute; inset: 0 auto 0 0; width: 63px; display: flex; flex-direction: column; align-items: center; gap: 26px; padding-top: 25px; color: #687c99; border-right: 1px solid #e2e8f0; }
.tablet-rail .icon { width: 20px; height: 20px; }
.tablet-panel { padding: 24px 22px 18px 145px; }
.device-kicker { font-size: .75rem; color: #596b82; font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.tablet-panel h3 { font-size: 1.4rem; letter-spacing: -.04em; line-height: 1.25; margin: 7px 0 19px; }
.tablet-summary { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: #e5f6f4; border-radius: 7px; }
.tablet-summary strong { font-size: .9375rem; }
.tablet-summary > span { font-size: .75rem; color: #44716e; }
.tablet-exercises { list-style: none; margin-top: 8px; }
.tablet-exercises li { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid #e1e8f0; font-size: .875rem; }
.tablet-exercises li:last-child { border: 0; }
.tablet-exercises b { color: #078b83; font-size: .75rem; }
.tablet-exercises small { display: none; }
.tablet-exercises em { margin-left: auto; color: #64748b; white-space: nowrap; font-size: .75rem; font-style: normal; }
.tablet-score { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 20px; }
.tablet-score > span { font-size: .875rem; font-weight: 650; }
.tablet-score strong { font-size: 2.5rem; line-height: 1.2; white-space: nowrap; }
.tablet-score i, .phone-live-score i { color: #92a4b7; font-style: normal; font-weight: 400; }
.match-stat { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 5px; margin-bottom: 14px; font-size: .875rem; text-align: center; }
.match-stat b:first-child { text-align: left; }
.match-stat b:nth-child(3) { text-align: right; }
.match-stat > span { color: #607087; }
.match-stat > div { grid-column: 1 / -1; height: 5px; border-radius: 5px; background: linear-gradient(to right, #008b86 var(--stat-share), #e2e7f0 var(--stat-share)); }
.tablet-small-note { display: flex; align-items: center; gap: 7px; font-size: .75rem; line-height: 1.5; color: #5d7189; margin-top: 14px; }
.tablet-small-note .icon { width: 15px; color: #00857d; }
.tablet-growth-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8125rem; color: #64758a; }
.tablet-growth-top strong { font-size: 1.875rem; color: #142a3d; }
.tablet-growth-top small { font-size: .75rem; font-weight: 500; }
.showcase-chart { display: flex; align-items: flex-end; gap: 20px; height: 190px; margin-top: 12px; border-bottom: 1px solid #dae3eb; padding: 0 12px; }
.showcase-chart > div { display: grid; grid-template-rows: 20px minmax(0, 1fr) 27px; align-items: end; flex: 1; height: 100%; text-align: center; }
.showcase-chart b { font-size: .75rem; color: #526a7f; }
.showcase-chart span { height: var(--bar-height); min-height: 0; background: #5dc7c0; border-radius: 5px 5px 0 0; }
.showcase-chart > div:last-child span { background: #008c86; }
.showcase-chart small { color: #65738a; font-size: .75rem; align-self: center; }
.showcase-phone {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 246px;
  height: 514px;
  border: 7px solid #253247;
  border-radius: 39px;
  background: #f7f9fc;
  color: #152033;
  overflow: hidden;
  box-shadow: 0 0 0 1px #8c9db779, 0 24px 60px #0008;
  transform: translateY(var(--phone-lift, 0px)) rotate(var(--phone-tilt, -4deg));
  transform-origin: 50% 80%;
}
.phone-status { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; position: relative; height: 29px; padding: 0 16px; background: #0b1427; color: #fff; font-size: .75rem; font-weight: 650; }
.phone-island { position: absolute; left: 50%; top: 5px; transform: translateX(-50%); width: 68px; height: 18px; border-radius: 14px; background: #02050c; }
.phone-reception { font-size: .75rem; letter-spacing: -2px; }
.phone-brand { display: flex; align-items: center; flex-shrink: 0; background: #0b1427; height: 41px; padding: 0 16px 6px; }
.phone-brand img { width: 132px; height: auto; }
.phone-content { flex: 1; min-height: 0; padding: 17px 15px 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.phone-panel .device-kicker { font-size: .75rem; letter-spacing: .025em; }
.phone-panel h3 { font-size: 1.45rem; line-height: 1.16; letter-spacing: -.045em; margin-top: 6px; }
.phone-match { padding: 11px 10px; margin: 15px 0 3px; border: 1px solid #dce5ed; border-radius: 8px; background: #fff; }
.phone-card-label { font-size: .75rem; color: #66768c; font-weight: 650; }
.phone-match > div { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-top: 10px; font-size: .8125rem; }
.phone-match > div > span { color: #8a96a8; font-size: .75rem; }
.phone-match p { color: #697b90; font-size: .75rem; margin-top: 8px; }
.phone-check { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #e3e9f0; }
.phone-check > .icon { width: 18px; color: #00857b; flex-shrink: 0; }
.phone-check strong, .phone-event strong { display: block; font-size: .875rem; line-height: 1.3; }
.phone-check small, .phone-event small { display: block; font-size: .75rem; line-height: 1.5; color: #65758b; }
.phone-tip { color: #3b6e6a; background: #e6f6f2; border-radius: 7px; margin-top: 13px; padding: 10px 11px; font-size: .8125rem; line-height: 1.5; }
.phone-live-score { text-align: center; margin: 18px 0 11px; }
.phone-live-score > span { display: block; font-size: .75rem; color: #65758b; }
.phone-live-score strong { display: block; font-size: 3.5rem; line-height: 1.35; letter-spacing: -.05em; }
.phone-event { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid #e3e9f0; }
.phone-event > b { color: #00857b; font-size: .75rem; min-width: 22px; }
.phone-event > .icon { margin-left: auto; width: 16px; color: #00857b; }
.phone-player { display: flex; align-items: center; gap: 11px; margin: 20px 0 18px; }
.phone-player > span { display: grid; place-items: center; width: 43px; height: 43px; font-size: 1.125rem; font-weight: 750; border-radius: 50%; color: #03726f; background: #d8efec; }
.phone-player strong { display: block; font-size: 1rem; }
.phone-player small { display: block; color: #677a91; font-size: .75rem; }
.phone-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding-bottom: 16px; border-bottom: 1px solid #e0e7ef; }
.phone-numbers strong { display: block; font-size: 2rem; line-height: 1.3; letter-spacing: -.05em; }
.phone-numbers small { font-size: .875rem; }
.phone-numbers span { display: block; font-size: .75rem; color: #67788e; }
.phone-coach-note { margin-top: 15px; }
.phone-coach-note > .icon { width: 19px; color: #00867f; margin-bottom: 6px; }
.phone-coach-note strong { display: block; font-size: .875rem; }
.phone-coach-note p { color: #64748b; font-size: .8125rem; line-height: 1.6; margin-top: 5px; }
.phone-home { flex-shrink: 0; width: 77px; height: 4px; margin: 9px auto 8px; border-radius: 4px; background: #172237; }
[data-device-screen][hidden] { display: none !important; }
.matchday-controls { display: flex; justify-content: center; align-items: stretch; gap: 4px; width: max-content; max-width: 100%; margin: 34px auto 0; padding: 5px; border: 1px solid #ffffff25; border-radius: 12px; background: #0d172b; }
.matchday-controls[hidden] { display: none; }
.matchday-controls button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border: 0; border-radius: 8px; padding: 9px 13px; background: transparent; color: #b4c2d6; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.matchday-controls button > span { font-size: .75rem; opacity: .7; }
.matchday-controls button[aria-pressed="true"] { color: #050a1b; background: #00cacc; }
.matchday-controls button:hover:not([aria-pressed="true"]) { color: #fff; background: #19273c; }
.matchday-caption { text-align: center; color: #96a9c4; font-size: .75rem; margin: 13px 0 8px; }
.product-story a:focus-visible, .matchday-controls button:focus-visible { outline: 2px solid #00cacc; outline-offset: 5px; }
.pixel-bridge { position: relative; height: 150px; width: 100%; margin-top: 28px; background: #050a1b; overflow: hidden; }
.pixel-bridge::before { content: ''; position: absolute; inset: 0; background: #fff; clip-path: polygon(0 65%, 6% 65%, 6% 48%, 12% 48%, 12% 70%, 18% 70%, 18% 57%, 26% 57%, 26% 38%, 32% 38%, 32% 63%, 40% 63%, 40% 49%, 48% 49%, 48% 66%, 55% 66%, 55% 46%, 62% 46%, 62% 60%, 70% 60%, 70% 39%, 78% 39%, 78% 58%, 85% 58%, 85% 70%, 91% 70%, 91% 50%, 96% 50%, 96% 65%, 100% 65%, 100% 100%, 0 100%); }
.pixel-bridge canvas { display: block; position: absolute; width: 100%; height: 100%; }
.pixel-bridge.canvas-ready::before { display: none; }
.product-story + .demo-section { margin-top: 0; border-radius: 0; background: linear-gradient(180deg, #fff, #f3f6f8 80%); }
@media (prefers-reduced-motion: no-preference) {
  .matchday-ready [data-device-screen]:not([hidden]) { animation: device-screen-in .4s ease both; }
  @keyframes device-screen-in { from { opacity: .3; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 1099px), (max-height: 819px) {
  .matchday-heading { margin-bottom: 38px; }
  .matchday-chapter { padding-top: 15px; }
}
@media (max-width: 720px) {
  .product-story { padding-top: 70px; }
  .matchday-heading { margin-bottom: 30px; }
  .matchday-heading h2 { font-size: clamp(3rem, 12vw, 4.2rem); }
  .matchday-heading > p:last-child { font-size: 1rem; }
  .device-scene { height: 510px; }
  .showcase-tablet { height: 400px; }
  .showcase-phone { width: 240px; height: 503px; }
  .matchday-layout { gap: 27px; }
  .matchday-chapter { padding: 8px 10px 28px; }
  .matchday-chapter h3 { font-size: 2.1rem; margin-block: 18px; }
  .pixel-bridge { height: 110px; margin-top: 12px; }
}
@media (max-width: 600px) {
  .showcase-tablet { display: none; }
  .device-scene { height: 541px; }
  .showcase-phone { width: min(276px, 100%); height: 530px; left: 50%; bottom: 4px; transform: translateX(-50%); }
  .phone-content { padding: 18px 19px 0; }
  .phone-panel h3 { font-size: 1.6rem; }
  .phone-match { margin-block: 18px 8px; }
  .phone-check { padding-block: 11px; }
  .phone-tip { margin-top: 16px; }
  .matchday-controls { margin-top: 18px; }
  .matchday-chapter { max-width: 460px; padding-inline: 0; }
  .matchday-heading .eyebrow { letter-spacing: .08em; }
  .matchday-heading > p:last-child br { display: none; }
}
@media (max-width: 360px) {
  .matchday-controls button { padding-inline: 10px; gap: 4px; }
  .matchday-controls button > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-tablet { transform: none; }
  .showcase-phone { transform: none; }
  @media (max-width: 600px) { .showcase-phone { transform: translateX(-50%); } }
}
@media print {
  .product-story { color: #050a1b; background: #fff; }
  .matchday-layout, .matchday-scroll .matchday-layout { display: block; }
  .matchday-ready .matchday-chapter, .matchday-ready .matchday-chapter:not(.is-current) { display: block; opacity: 1; min-height: 0; padding: 20px 0; border: 0; }
  .matchday-heading p, .matchday-chapter > p { color: #374151; }
  .matchday-stage, .pixel-bridge { display: none; }
}