/* 2026-10-28 website review (Sam + Nolan). Loads after site.css; everything here overrides it. */

/* Fewer text colours: body text white, eyebrows gold, numbers + links cyan. */
:root { --muted: #f6f7f8 }
header nav a { color: #fff }
.eyebrow, .eyebrow.gold { color: var(--gold) }
details.more .body, .batch .b-txt, .chip:not(.on), .ro-v, .fchip, .dash .dr em { color: var(--ink) }

/* A tab lands with its section filling the page right up to the tab bar. */
html { scroll-padding-top: var(--head) }
section.sec[id] { scroll-margin-top: calc(32px - clamp(76px, 11vw, 150px)) }
@media (max-width: 760px) { section.sec[id] { scroll-margin-top: -26px } }

/* Hero: the clean glove, no callouts. */
.hero-shot .tags, .callouts { display: none !important }
@media (min-width: 761px) { #hero-shot img { transform: scale(1.22) !important; transform-origin: 54% 50% } }

/* ---------- metric cards ---------- */
.metrics[data-carousel] > .m { display: flex; flex-direction: column }
.m .defs { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.5; font-weight: 500; text-align: left }
.m .defs strong { color: var(--cyan); font-weight: 800 }
.m .defs + details.more { margin-top: auto }
.m details.more { margin-top: 18px }
.m .foot { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--dim) }
/* "See it in action" stays hidden until the slow-motion clips are filmed (Sam, 10-28): delete this line then. */
details.more.see { display: none }
.see .vid-soon { aspect-ratio: 16/9; border-radius: 14px; border: 1px dashed var(--line2); display: grid; place-items: center; color: var(--dim); font-size: 13px; font-weight: 600; text-align: center; padding: 12px }

/* Glove speed: one number per catch, each popping in. */
.reps { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: clamp(180px, 22vw, 250px) }
.rep { min-width: 0; overflow: hidden; border: 1px solid var(--line2); border-radius: 12px; padding: 10px 4px 10px; text-align: center; background: var(--card2) }
.rep span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: var(--dim); text-transform: uppercase }
.rep b { display: block; margin-top: 6px; font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink) }
.rep b small { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .08em; color: var(--gold) }
.rep.best { border-color: var(--cyan) }
.rep.best b { color: var(--cyan) }
.js .rep { opacity: 0; transform: translateY(10px) scale(.92) }
.js .m.in .rep { opacity: 1; transform: none; transition: opacity .4s ease, transform .5s var(--ease) }
.js .m.in .rep:nth-child(2) { transition-delay: .45s }
.js .m.in .rep:nth-child(3) { transition-delay: .9s }

/* Accel + decel stacked, a label under each. */
.val.pair { display: flex; gap: .45em; align-items: flex-start }
.val.pair > span { display: flex; flex-direction: column; align-items: flex-start }
.val.pair em { font-style: normal; font-size: .2em; font-weight: 800; letter-spacing: .14em; color: var(--dim); margin-top: .5em }

/* Stick distance: the ruler fills catch → stick. */
.m svg .ruler-fill { stroke-dasharray: 1; stroke-dashoffset: 1 }
.js .m.in svg .ruler-fill { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) .3s }

/* ---------- MOVE AI band (app + coaches) ---------- */
.aiband { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; width: 100%; max-width: 1040px; margin-top: clamp(32px, 4vw, 52px); border-radius: 26px; padding: clamp(22px, 3vw, 32px); text-align: left; background: radial-gradient(70% 140% at 0% 50%, rgba(0,220,250,.10) 0%, transparent 60%), radial-gradient(60% 140% at 100% 50%, rgba(255,191,6,.07) 0%, transparent 60%), var(--card); border: 1px solid var(--line) }
.disc { width: 108px; height: 108px; border-radius: 50%; border: 1px solid var(--line2); background: radial-gradient(circle at 50% 40%, #16161b 0%, #08080a 70%); display: grid; place-items: center; box-shadow: 0 0 50px rgba(0,220,250,.12), 0 0 0 6px rgba(255,191,6,.04) }
.disc svg { overflow: visible }
@media (prefers-reduced-motion: no-preference) {
  .disc { animation: aiBreath 3.2s ease-in-out infinite }
  .disc .brk { transform-box: view-box; transform-origin: 50% 50%; animation: aiSpin 4.8s cubic-bezier(.65,0,.35,1) infinite }
}
@keyframes aiBreath { 0%,100% { box-shadow: 0 0 40px rgba(0,220,250,.08) } 50% { box-shadow: 0 0 70px rgba(0,220,250,.18), 0 0 0 6px rgba(255,191,6,.05) } }
@keyframes aiSpin { 0%,70% { transform: rotate(0) } 85%,100% { transform: rotate(180deg) } }
.aiword { display: flex; align-items: baseline; gap: 9px; margin: 0 0 6px; font-size: 34px; font-weight: 800; line-height: 1.1 }
.aiword img { height: .74em; width: auto }
.aiword span { color: var(--app-gold); font-size: 1.21em; display: inline-block; transform: scaleX(.84); transform-origin: left center; margin-left: .05em }
.aitext p:not(.aiword) { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 500; max-width: 34em }
.asks { display: flex; flex-direction: column; gap: 8px }
.asks span { font-size: 13px; font-weight: 600; background: rgba(255,255,255,.05); border: 1px solid var(--line2); border-radius: 16px; padding: 8px 14px; max-width: 300px }

/* ---------- the MOVE app ---------- */
#app h2 .logo-word { display: inline-block; height: .74em; width: auto; vertical-align: -.02em; margin-inline: .12em }
.appgrid { align-items: center }
.appgrid .feats { align-items: stretch }
.appgrid .feat { justify-content: flex-start }
.appgrid .feat details.more { margin-top: auto }

/* ---------- coaches: the dashboard as a sliding carousel ---------- */
.dash { position: relative; display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100vw; max-width: none; margin: clamp(32px, 4vw, 52px) calc(50% - 50vw) 0; padding: 8px max(16px, calc((100vw - 1080px) / 2)) 12px; scroll-padding-inline: max(16px, calc((100vw - 1080px) / 2)); cursor: grab; align-items: stretch; text-align: left }
.dash::-webkit-scrollbar { display: none }
.dash.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none }
.dc { flex: 0 0 min(920px, 80vw); min-width: 0; scroll-snap-align: start; background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: clamp(20px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 20px }
.dc:hover { border-color: #26343d }
.dtag { margin: 0; color: var(--cyan); font-weight: 800; font-size: 13px; letter-spacing: .16em; text-transform: uppercase }
.dc-head h3 { margin: 8px 0 6px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.03em }
.dc-head .say { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 500; max-width: 46em }
.dash-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px }
.dash-nav .cdots { display: flex; gap: 7px; margin: 0 }
.dash-nav .carr { display: inline-block }
.dash-note { margin-top: 10px; color: var(--dim); font-size: 12px }

.dash .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px }
.dash .stat { background: var(--card2); border-radius: 12px; padding: 12px 14px }
.dash .stat small { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 700 }
.dash .stat b { font-size: 22px; font-variant-numeric: tabular-nums }
.dash table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums }
.dash th { text-align: left; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 700; padding: 0 8px 8px }
.dash td { padding: 10px 8px; border-top: 1px solid var(--line) }
.dash td:first-child { font-weight: 600 }
.dash .av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--cyan); color: var(--cyan); font-size: 10px; font-weight: 700; margin-right: 9px; vertical-align: middle }
.dash .tw { overflow-x: auto }

.dash .vid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px }
.dash .frame { position: relative; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #2a3b2c 0%, #16201a 45%, #0b0f0c 100%) }
.dash .frame .plate { position: absolute; left: 50%; bottom: 9%; width: 22%; height: 6%; transform: translateX(-50%); background: #d9dcd6; opacity: .5; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%) }
.dash .frame .zone { position: absolute; left: 36%; top: 22%; width: 28%; height: 40%; border: 1.5px dashed rgba(255,255,255,.35); border-radius: 4px }
.dash .mk { position: absolute; inset: 0; width: 100%; height: 100% }
.dash .vchips { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px }
.dash .vchip { background: rgba(10,10,10,.75); border: 1px solid var(--line2); border-radius: 8px; padding: 5px 9px; font-size: 11px; font-weight: 600 }
.dash .vchip b { font-size: 14px; margin-left: 4px; font-variant-numeric: tabular-nums }
.dash .rail { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.15) }
.dash .rail i { position: absolute; top: -4px; width: 2px; height: 14px; border-radius: 1px }
.dash .rail .band { position: absolute; top: 0; height: 6px; background: var(--gold); border-radius: 3px }
.dash .cam { position: absolute; left: 12px; bottom: 26px; display: flex; align-items: center; gap: 8px }
.dash .face { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; background: linear-gradient(160deg, #3a4250, #1a1e24); box-shadow: 0 4px 16px rgba(0,0,0,.5) }
.dash .face svg { width: 100%; height: 100%; display: block }
.dash .rec { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; background: rgba(10,10,10,.75); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 10px }
.dash .rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d }
.dash .tools { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; background: rgba(10,10,10,.75); border: 1px solid var(--line2); border-radius: 12px; padding: 6px }
.dash .tools i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center }
.dash .tools i.on { background: rgba(240,178,50,.18) }
.dash .tools svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.dash .tools i.on svg { stroke: var(--gold) }
.dash .side h4 { margin: 0 0 10px; font-size: 13px }
.dash .list { display: flex; flex-direction: column; gap: 8px }
.dash .li { display: flex; gap: 10px; align-items: flex-start; background: var(--card2); border-radius: 10px; padding: 9px 10px; font-size: 12px }
.dash .li .th { flex: none; width: 46px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #253427, #0f1611) }
.dash .li b { display: block; font-size: 13px; font-weight: 600; font-style: italic; line-height: 1.35 }
.dash .li .to { display: block; margin-top: 3px; color: var(--cyan); font-size: 11px; font-weight: 600 }
.dash .li > div { min-width: 0 }

.dash .gr { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.dash .chart { background: var(--card2); border-radius: 12px; padding: 14px; min-width: 0 }
.dash .chart h4 { margin: 0 0 2px; font-size: 13px }
.dash .chart p { margin: 0 0 8px; font-size: 11px; color: var(--dim) }
.dash .chart svg { width: 100%; height: auto; display: block }
.dash .chart svg text { font-family: var(--font) }
.dash .leg { display: flex; gap: 14px; font-size: 11px; margin: 2px 0 6px }
.dash .leg i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px }

.dash .cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px }
.dash .day { background: var(--card2); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 170px }
.dash .day small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 700 }
.dash .dr { font-size: 11px; font-weight: 600; border-radius: 7px; padding: 6px 8px; background: rgba(41,197,232,.1); border-left: 3px solid var(--cyan) }
.dash .dr.g { background: rgba(240,178,50,.1); border-left-color: var(--gold) }
.dash .dr em { display: block; font-style: normal; font-weight: 500; font-size: 10px; color: #c6ccd4 }
.dash .lib { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--card2) }
.dash .lib-t { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 700; margin-right: 4px }
.dash .lc { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line) }
.dash .lc i { width: 24px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #253427, #0f1611); position: relative }
.dash .lc i::after { content: ""; position: absolute; left: 9px; top: 4px; border-left: 6px solid var(--ink); border-top: 4px solid transparent; border-bottom: 4px solid transparent }

@media (max-width: 760px) {
  .reps { width: 162px; gap: 5px }
  .rep { padding: 7px 2px 8px; border-radius: 9px }
  .rep span { font-size: 7px; letter-spacing: .04em; white-space: nowrap }
  .rep b small { font-size: 7.5px; margin-top: 2px }
  .rep b { font-size: 15px; margin-top: 3px }
  .m .defs { font-size: 13px; gap: 8px; margin-top: 12px }
  .aiband { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 18px }
  .disc { width: 64px; height: 64px }
  .disc svg { width: 30px; height: 40px }
  .aiword { font-size: 28px }
  .asks span { max-width: none }
  .dash { gap: 12px; align-items: flex-start }
  .dc { flex-basis: 88%; border-radius: 20px; padding: 16px; gap: 14px }
  .dc-head .say { font-size: 13px }
  .dash .vid, .dash .gr { grid-template-columns: minmax(0, 1fr) }
  .dash .cal { grid-template-columns: minmax(0, 1fr) }
  .dash .day { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center }
  .dash .day small { width: 100% }
  .dash-nav .carr { display: none }
  .dash .stat { padding: 10px }
  .dash .stat b { font-size: 18px }
  .dash .stat small { font-size: 9px }
  .dash .av, .dash .hide-s { display: none }
  .dash td, .dash th { padding-left: 4px; padding-right: 4px }
  .dash .vchips { left: 8px; top: 8px; gap: 4px }
  .dash .vchip { font-size: 9px; padding: 3px 6px }
  .dash .vchip b { font-size: 11px }
  .dash .vchips .vchip:nth-child(3) { display: none }
  .dash .cam { left: 8px; bottom: 18px; gap: 5px }
  .dash .face { width: 34px; height: 34px }
  .dash .rec { font-size: 9px; padding: 3px 7px }
  .dash .tools { right: 6px; padding: 4px; gap: 3px }
  .dash .tools i { width: 22px; height: 22px }
  .dash .tools svg { width: 13px; height: 13px }
}

/* Every card's title sits at the same height: titles pin to the top of the card, the drawing stays centred. */
.metrics .m-top > div { align-self: flex-start }

/* Wider, airier subtitles (3D Glove Path + Coaches) on laptops; phones keep the normal subtitle size. */
@media (min-width: 761px) { .lead.spread { max-width: 1000px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.75; letter-spacing: .01em; text-wrap: balance } }

/* Phones: the coach dashboard slides are different heights, so the slider takes the height of the one showing (no big empty gap under short slides). */
@media (max-width: 760px) { .dash { overflow-y: hidden; transition: height .35s ease } }

/* ---------- phones only: tighter, smaller, shorter (Nolan 10-29) ---------- */
@media (max-width: 760px) {
  .hide-phone { display: none !important }
  .sec { padding-block: 40px }
  h2 { font-size: 26px }
  .lead { font-size: 14px; line-height: 1.5; margin-top: 10px }
  .eyebrow { font-size: 11px }
  /* MOVE AI box */
  .aiband { padding: 16px 18px; gap: 10px; border-radius: 20px }
  .disc { width: 44px; height: 44px }
  .disc svg { width: 20px; height: 27px }
  .aiword { font-size: 21px; margin-bottom: 2px }
  .aitext p:not(.aiword) { font-size: 13.5px; line-height: 1.5 }
  .asks { gap: 6px; width: 100% }
  .asks span { font-size: 12px; padding: 6px 12px; border-radius: 12px }
  /* coach dashboard slides */
  .dc-head h3 { font-size: 21px; margin: 6px 0 4px }
  .dtag { font-size: 11px }
  .dash { transition: none }
}
@media (max-width: 760px) {
  /* MOVE AI: logo and wordmark side by side, text below */
  .aiband { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px }
  .aiband .aitext { display: contents }
  .aiband .aiword { margin: 0 }
  .aiband .aitext p:not(.aiword), .aiband .asks { grid-column: 1 / -1 }
}

/* ---------- 10-29 round 3 (Nolan) ---------- */
/* Coaches: MOVE AI + Platform integration keep their spacing; text and logo smaller on laptops. */
@media (min-width: 761px) {
  #coaches .disc { width: 84px; height: 84px }
  #coaches .disc svg { width: 38px; height: 51px }
  #coaches .aiword { font-size: 25px }
  #coaches .aitext p:not(.aiword) { font-size: 13.5px }
  #coaches .asks span { font-size: 11.5px; padding: 7px 12px }
  .integ .tag { font-size: 11px }
  .integ h3 { font-size: clamp(19px, 1.9vw, 23px) }
  .integ p { font-size: 13.5px }
  .integ .btn { font-size: 14px }
}

@media (max-width: 760px) {
  /* App: no app home-screen picture on phones. */
  #app .phones { display: none }
  /* Coaches slides: more room in the Video Room + Programs writing. */
  .dc { padding: 18px 16px 22px }
  .dc-head h3 { margin: 6px 0 20px }
  .dc-head .say { line-height: 1.7 }
  /* Coaches: MOVE AI much smaller. */
  #coaches .aiband { padding: 12px 14px; column-gap: 10px; row-gap: 8px; border-radius: 16px }
  #coaches .disc { width: 34px; height: 34px }
  #coaches .disc svg { width: 15px; height: 20px }
  #coaches .aiword { font-size: 17px }
  #coaches .aitext p:not(.aiword) { font-size: 12.5px; line-height: 1.45 }
  #coaches .asks { gap: 5px }
  #coaches .asks span { font-size: 11px; padding: 5px 10px; border-radius: 10px }
  /* Platform integration: a short, wide box. */
  .integ { margin-top: 16px; padding: 12px 14px; gap: 10px; border-radius: 16px }
  .integ .tag { font-size: 9px }
  .integ h3 { margin-top: 4px; font-size: 16px }
  .integ p { margin-top: 4px; font-size: 12.5px; line-height: 1.45 }
  .integ .btn { min-height: 0; padding: 7px 14px; font-size: 12.5px }
}
/* Phones: a taller slide peeking beside the one showing is cut to the same height with its own
   rounded corners (no sharp edge at the bottom). */
@media (max-width: 760px) { .dash .dc { overflow: hidden } }
/* Phones: the Reports slide is shorter (Nolan 10-29): no chart subtitles, tighter boxes, the
   charts drawn a little flatter. */
@media (max-width: 760px) {
  .dash .gr { gap: 8px }
  .dash .chart { padding: 10px 10px 8px }
  .dash .chart h4 { font-size: 12px; margin-bottom: 4px }
  .dash .chart p { display: none }
  .dash .chart .leg { margin-bottom: 2px; font-size: 11px }
  .dash .chart svg { height: 160px }
}
@media (max-width: 760px) { .dc-head h3:last-child { margin-bottom: 4px } }
.show-phone { display: none }
@media (max-width: 760px) {
  .show-phone { display: inline }
  .dash .chart .leg { font-size: 9.5px; gap: 10px }
  .dash .chart .leg i { width: 7px; height: 7px; margin-right: 4px }
}