@font-face{font-family:'Space Grotesk';src:url('./assets/space-grotesk.woff2') format('woff2');font-style:normal;font-weight:300 700;font-display:swap}
@property --coach-progress{syntax:'<number>';inherits:true;initial-value:0}

:root{color-scheme:light;--paper:#f4f4ef;--surface:#fff;--sunk:#e9eae4;--ink:#102024;--muted:#5b686a;--line:#dcdfd9;--blue:#2456e8;--accent:#2456e8;--board:#f5f5f2;--bezel:#0e1214;--shadow:0 1px 2px #10202414,0 18px 48px -18px #10202438;--mono:'DM Mono',ui-monospace,monospace;--display:'Space Grotesk',system-ui,sans-serif;--gutter:clamp(20px,5vw,64px);--max:1200px;--r-tile:28px;--r-inner:16px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--paper:#0d1c21;--surface:#132a31;--sunk:#0a171b;--ink:#f3f3ed;--muted:#a3b3b4;--line:#223d45;--accent:#7f9dff;--bezel:#05090a;--shadow:0 1px 2px #0007,0 24px 56px -20px #000a}}
:root[data-theme=dark]{color-scheme:dark;--paper:#0d1c21;--surface:#132a31;--sunk:#0a171b;--ink:#f3f3ed;--muted:#a3b3b4;--line:#223d45;--accent:#7f9dff;--bezel:#05090a;--shadow:0 1px 2px #0007,0 24px 56px -20px #000a}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.55 var(--display);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}button{font:inherit}
h1,h2,h3,p,figure,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
.skip-link{position:absolute;z-index:100;top:-100px;left:16px;padding:10px 15px;background:var(--blue);color:#fff;border-radius:10px}.skip-link:focus{top:12px}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px}
.eyebrow{font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.step{color:var(--accent);margin-right:.6em}

/* Header */
.site-header{height:72px;padding:0 var(--gutter);display:flex;align-items:center;gap:16px;position:relative;z-index:30;background:var(--paper)}
.brand,.footer-brand{display:inline-flex;gap:10px;align-items:center;text-decoration:none;font-size:1.4rem;font-weight:700;letter-spacing:-.05em}
.brand{min-height:44px}
.brand-icon{width:36px;height:36px;flex:none;border-radius:9px;box-shadow:0 1px 3px #10202426}
.header-end{display:flex;align-items:center;gap:10px;margin-left:auto}
.header-links{display:flex;align-items:center;gap:28px;margin-left:auto}.header-links a{font-size:.875rem;font-weight:600;text-decoration:none}.header-links a:hover{text-decoration:underline;text-underline-offset:4px}
.theme-toggle{width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--ink);background:transparent;cursor:pointer}
.theme-toggle:hover{background:var(--surface)}
.theme-toggle[hidden]{display:none}.theme-toggle svg{width:18px;height:18px}.theme-toggle .sun{display:none}:root[data-theme=dark] .theme-toggle .sun{display:block}:root[data-theme=dark] .theme-toggle .moon{display:none}
.header-status{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:99px;background:var(--surface);font:500 .68rem/1 var(--mono);white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px #2456e826}

/* Shared type */
.home h1,.home h2{font-weight:700;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
.home h1{font-size:clamp(3.1rem,11.5vw,6.4rem);margin:18px 0 22px}
.home h2{font-size:clamp(2.4rem,7.4vw,4.4rem);margin:16px 0 20px}
.home h1 em,.home h2 em{font-style:normal;color:var(--accent)}
.lead{font-size:clamp(1.13rem,1.6vw,1.33rem);line-height:1.45;color:var(--muted);max-width:30em}
.beat-copy>p:not(.eyebrow){font-size:clamp(1.06rem,1.35vw,1.2rem);line-height:1.55;color:var(--muted);max-width:30em}
.beat-copy>p.fine{margin-top:18px;font:500 .8rem/1.4 var(--mono);letter-spacing:.02em;color:var(--ink)}

/* Platform buttons (not live yet, so they do not navigate) */
.platforms{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.platform{min-height:56px;min-width:128px;padding:9px 18px 9px 14px;display:inline-flex;align-items:center;gap:12px;border-radius:16px;background:var(--ink);color:var(--paper);text-decoration:none;cursor:default;user-select:none}
.platform svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.platform span{display:flex;flex-direction:column;font-size:1.06rem;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.platform small{font:500 .62rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.66}

/* Beats */
.beat{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:clamp(64px,7vw,104px) var(--gutter)}

/* Hero */
.hero{padding-top:clamp(28px,6vw,56px);padding-bottom:clamp(32px,5vw,64px);display:grid;gap:40px;align-items:center}
.hero-copy{max-width:640px}
.hero-visual{position:relative;width:100%;max-width:480px;margin:0 auto;aspect-ratio:5/6}
@media(min-width:960px){.hero-visual{max-width:560px}}
.hero-visual:before{content:'';position:absolute;inset:14% 4% 2%;border-radius:50%;background:radial-gradient(closest-side,var(--surface),transparent);opacity:.9}
.hero-phone{position:absolute;left:50%;top:3%;height:94%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 24px 34px #10202433)}

/* Static checker, where the 3D checker rests when that layer runs */
.checker{position:absolute;width:11%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fff 0 46%,#e9ebe6 47% 56%,#fff 57%);box-shadow:inset 0 0 0 1px #10202422,0 1px 0 #10202418,0 10px 18px -6px #10202455;transform:translate(-50%,-50%)}
.checker--rest{left:16%;top:84%}
.has-table .checker--rest,.has-table .dice-stage .die{visibility:hidden}

/* Screens */
.shot{position:relative;margin:0;padding:clamp(6px,1vw,11px);border-radius:clamp(26px,4.2vw,50px);background:var(--bezel);box-shadow:var(--shadow),inset 0 0 0 1px #ffffff1a}
.shot img{width:100%;border-radius:clamp(20px,3.3vw,40px)}
.beat--play,.beat--coach{display:grid;gap:clamp(40px,6vw,80px);align-items:center}

.specs{margin-top:32px;border-top:1px solid var(--line);max-width:30em}
.specs div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.specs dt{font-weight:600}
.specs dd{color:var(--muted);text-align:right}

/* Coach comparison. --coach-progress: 0 shows your move, 1 the stronger move. */
.shot-stack{min-width:0}
.stack-frame{display:grid;gap:14px}
.stack-state{margin:0}
.stack-state img{width:100%;border-radius:var(--r-tile);background:var(--board);box-shadow:var(--shadow)}
.stack-state figcaption{margin-top:12px;font:500 .8rem/1.4 var(--mono);color:var(--muted)}
.stack-state figcaption b{font:600 .95rem var(--display);color:var(--ink);margin-right:8px}
.is-best figcaption b{color:var(--accent)}
.stack-legend{display:none}
@media(min-width:600px){.stack-frame{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:no-preference){
  .stack-frame{display:block;position:relative;aspect-ratio:1200/1159}
  .stack-frame .stack-state{position:absolute;inset:0}
  .stack-frame figcaption{display:none}
  .is-best{opacity:var(--coach-progress)}
  .is-best img{box-shadow:none}
  .stack-legend{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-top:18px;font:500 .78rem/1.35 var(--mono);color:var(--muted)}
  .stack-legend b{display:block;font:600 .95rem/1.3 var(--display);color:var(--ink)}
  .legend-yours{opacity:calc(1 - var(--coach-progress) * .55)}
  .legend-best{text-align:right;opacity:calc(.45 + var(--coach-progress) * .55)}
  .legend-best b{color:var(--accent)}
  .legend-track{width:clamp(48px,10vw,120px);height:4px;border-radius:4px;background:var(--line);overflow:hidden}
  .legend-track i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--coach-progress))}
  @supports (animation-timeline:view()){
    html:not(.has-table) .shot-stack{animation:coach-scrub linear both;animation-timeline:view();animation-range:cover 35% cover 65%}
  }
  @supports not (animation-timeline:view()){
    html:not(.has-table) .shot-stack{animation:coach-loop 8s ease-in-out infinite}
  }
}
@keyframes coach-scrub{from{--coach-progress:0}to{--coach-progress:1}}
@keyframes coach-loop{0%,38%{--coach-progress:0}50%,88%{--coach-progress:1}100%{--coach-progress:0}}

/* Bento */
.features{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:clamp(24px,4vw,64px) var(--gutter) clamp(40px,6vw,72px)}
.features-head{max-width:640px;margin-bottom:clamp(32px,5vw,56px)}
.features-head>p:last-child{font-size:clamp(1.06rem,1.35vw,1.2rem);color:var(--muted);max-width:30em}
.bento{display:grid;gap:10px;grid-template-columns:1fr 1fr;grid-template-areas:"coach coach" "oneroll learn" "replay cube" "way way" "offline offline" "sync sync" "every every"}
.tile{grid-area:var(--area);position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:22px;background:var(--surface);padding:18px 18px 0;box-shadow:0 1px 2px #1020240d}
.tile--coach{--area:coach}.tile--oneroll{--area:oneroll}.tile--learn{--area:learn}.tile--replay{--area:replay}.tile--cube{--area:cube}.tile--way{--area:way}.tile--offline{--area:offline}.tile--sync{--area:sync}.tile--everywhere{--area:every}
.tile h3{font-size:1.06rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.tile p{margin-top:5px;color:var(--muted);font-size:.9rem;line-height:1.45;max-width:26em}
.tile p b{color:var(--ink);font-weight:600}
.tile .more{display:none}
.tile-media{margin:16px auto 0;width:100%;height:128px;overflow:hidden;border-radius:12px 12px 0 0;background:var(--board);box-shadow:0 0 0 1px var(--line)}
.tile-media img,.tile-media video{width:100%;height:100%;object-fit:cover;object-position:center top}
.tile--oneroll .tile-media img{object-position:center 80%}
.tile--learn .tile-media img{object-position:30% 70%}
.tile--replay .tile-media img{object-position:20% 60%}
.tile--cube .tile-media{height:auto;margin-top:auto;padding-top:0}
.tile--cube .tile-copy{margin-bottom:16px}
.tile--cube .tile-media img{height:auto}
.tile--coach{background:#0f2126;color:#f3f3ed}
.tile--coach p{color:#b4c2c3}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tile--coach{background:#071114;box-shadow:inset 0 0 0 1px var(--line)}}
:root[data-theme=dark] .tile--coach{background:#071114;box-shadow:inset 0 0 0 1px var(--line)}
.tile--coach .tile-media{height:300px;width:min(100%,300px);box-shadow:none;background:#000}
.tile--type{flex-direction:row;align-items:center;gap:16px;padding:18px}
.tile-icon{flex:none;width:24px;height:24px;padding:12px;box-sizing:content-box;border-radius:50%;background:var(--sunk);fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.tile--offline .tile-icon{fill:var(--accent);stroke:none}
.tile--way{padding-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px}
.chip{padding:9px 13px;border-radius:12px;background:var(--sunk);font-size:.86rem;font-weight:600;line-height:1.2}
.chip--on{background:var(--blue);color:#fff}
.tile--everywhere{padding-bottom:0}
.devices{display:grid;grid-template-columns:1fr 1fr;gap:22px 12px;align-items:end;margin-top:22px;padding-bottom:20px}
.device{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.device>span:last-child{font:500 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.device img{width:auto;max-width:100%;filter:drop-shadow(0 10px 16px #10202426)}
.device--iphone img{height:116px}
.device--ipad img{height:96px}
.device--mac img{height:92px}
.duo-frame{display:block;padding:4px;border-radius:12px;background:var(--bezel);box-shadow:0 10px 18px -8px #10202455}
.duo-frame img,.duo-frame video{height:84px;width:auto;max-width:100%;border-radius:9px;filter:none}

/* Close */
.close{text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(64px,8vw,112px)}
.close .lead{margin:0 auto}
.close .platforms{justify-content:center}
.dice-stage{position:relative;width:min(100%,300px);height:120px;margin-bottom:24px}
.die{position:absolute;top:50%;width:48px;height:48px;padding:8px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);border-radius:11px;background:#fff;box-shadow:inset 0 0 0 1px #10202418,0 2px 0 #1020241a,0 14px 20px -8px #10202450}
.die i{width:8px;height:8px;margin:auto;border-radius:50%;background:#102024}
.die--five{left:calc(50% - 60px);transform:translateY(-40%) rotate(-12deg)}
.die--five i:nth-child(1){grid-area:1/1}.die--five i:nth-child(2){grid-area:1/3}.die--five i:nth-child(3){grid-area:2/2}.die--five i:nth-child(4){grid-area:3/1}.die--five i:nth-child(5){grid-area:3/3}
.die--three{left:calc(50% + 12px);transform:translateY(-58%) rotate(9deg)}
.die--three i:nth-child(1){grid-area:1/1}.die--three i:nth-child(2){grid-area:2/2}.die--three i:nth-child(3){grid-area:3/3}

/* Footer */
.site-footer{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:28px var(--gutter) 40px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;border-top:1px solid var(--line)}
.home .site-footer{border-top:0}
.footer-brand{font-size:1.1rem;min-height:44px}.footer-icon{width:28px;height:28px;flex:none;border-radius:7px}
.site-footer>span{font-size:.85rem;color:var(--muted)}
.site-footer nav{display:flex;gap:4px 20px;margin-left:auto}
.site-footer nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.88rem;font-weight:600;text-decoration:none}
.site-footer nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* Privacy and support */
.utility-main{max-width:850px;margin:0 auto;padding:72px 24px 130px;min-height:calc(100vh - 190px)}.utility-main .eyebrow{color:var(--accent)}.utility-main h1{font-size:clamp(3rem,7vw,5.5rem);line-height:.98;letter-spacing:-.055em;font-weight:700;margin:18px 0 22px}.utility-main .lead{font-size:1.25rem;line-height:1.45;color:var(--muted);max-width:720px}.utility-main h2{font-size:1.6rem;letter-spacing:-.035em;margin:46px 0 10px}.utility-main p,.utility-main li{font-size:1.05rem;line-height:1.65}.utility-main p+p{margin-top:1em}.utility-main a{color:var(--accent);text-underline-offset:3px}.utility-main ul{padding-left:23px;list-style:disc}.utility-main .note{padding:20px 24px;background:var(--surface);border-left:4px solid var(--blue);border-radius:0 12px 12px 0;margin-top:32px}.utility-main .updated{font:500 .72rem var(--mono);letter-spacing:.06em;color:var(--muted);margin-top:60px}.utility-main .contact-card{padding:30px;background:var(--blue);color:#fff;border-radius:var(--r-tile);margin-top:30px}.utility-main .contact-card .eyebrow{color:#fffc}.utility-main .contact-card a{display:inline-block;margin:10px 0 14px;color:#fff;font-size:clamp(1.2rem,4.8vw,1.5rem);font-weight:700}.utility-main .contact-card p{margin-bottom:0}

/* Tablet */
@media(min-width:700px){
  .bento{gap:12px;grid-template-columns:repeat(2,1fr);grid-template-areas:"coach coach" "oneroll learn" "replay replay" "cube way" "offline sync" "every every"}
  .tile{padding:24px 24px 0;border-radius:var(--r-tile)}
  .tile h3{font-size:1.2rem}
  .tile p{font-size:.96rem}
  .tile .more{display:inline}
  .tile-media{margin-top:22px;height:230px;border-radius:var(--r-inner) var(--r-inner) 0 0}
  .tile--learn .tile-media img,.tile--replay .tile-media img{object-position:center top}
  .tile--oneroll .tile-media img{object-position:center 70%}
  .tile--coach{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end}
  .tile--coach .tile-copy{align-self:start}
  .tile--coach .tile-media{margin:0 auto;height:400px;width:100%}
  .tile--replay{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .tile--replay .tile-media{margin:0;height:250px;width:100%;align-self:end}
  .tile--cube .tile-copy{margin-bottom:22px}
  .tile--way{padding-bottom:24px}
  .tile--type{flex-direction:column;align-items:flex-start;padding:24px;gap:0}
  .tile--type>div{margin-top:auto;padding-top:28px}
  .devices{grid-template-columns:repeat(4,auto);justify-content:space-between;gap:20px;margin-top:28px;padding-bottom:24px}
  .device--iphone img{height:150px}.device--ipad img{height:128px}.device--mac img{height:124px}.duo-frame img,.duo-frame video{height:112px}
}

/* Desktop */
@media(min-width:960px){
  .site-header{height:84px}
  .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;min-height:min(660px,calc(100svh - 84px))}
  .hero-visual{max-width:none}
  .beat--play{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .beat--coach{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .hero{padding-bottom:24px}
  .beat--play{padding-bottom:40px}
  .beat--coach{padding-top:40px}
  .beat--coach .beat-copy{order:2}
  .bento{grid-template-columns:repeat(4,1fr);grid-template-areas:"coach coach oneroll learn" "coach coach cube way" "replay replay offline sync" "every every every every"}
  .tile--coach{display:flex;padding:28px 28px 0}
  .tile--coach .tile-media{margin-top:28px;height:auto;flex:1 1 0;min-height:360px;width:min(100%,380px)}
  .tile--oneroll .tile-media,.tile--learn .tile-media{height:228px}
  .tile--replay .tile-media{height:240px}
  .tile--everywhere{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px;align-items:end;padding:28px 32px 0}
  .tile--everywhere .tile-copy{align-self:center;padding-bottom:28px}
  .devices{margin-top:0;padding-bottom:28px;gap:24px}
  .device--iphone img{height:180px}.device--ipad img{height:150px}.device--mac img{height:150px}.duo-frame img,.duo-frame video{height:128px}
}
@media(min-width:1280px){.home h1{font-size:6.6rem}}

@media(max-width:420px){
  .header-status{display:none}
  .platforms{gap:8px}
  .platform{min-width:0;flex:1 1 0;padding:9px 12px;gap:8px}
  .platform{justify-content:center}
  .platform svg{display:none}
  .platform span{font-size:.98rem}
  .platform small{font-size:.56rem}
  .platforms li{display:flex;flex:1 1 0}
  .platforms{flex-wrap:nowrap}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}