/* TempoReps, "program on the wall": the session is written like a gym board,
   then each block shows the real screen that runs it.
   Tokens come from the icon (orange hourglass on carbon) and the app's phase colours. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/martian-mono-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/martian-mono-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --carbon:#151314;--carbon-2:#1f1b1d;--carbon-3:#2a2527;--navy:#222b3a;--line:#3a3436;
  --orange:#f5772b;--ember:#ee5530;--work:#d36c50;--down:#5a82c0;--sand:#d9ab63;--go:#4fb26c;
  --chalk:#f2ede7;--dim:#bdb3ab;
  --wide:"Archivo","Hiragino Sans","Noto Sans JP",sans-serif;
  --mono:"Martian Mono",ui-monospace,"SFMono-Regular",monospace;
  --wrap:1240px;--side:clamp(18px,5vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carbon);color:var(--chalk);font:400 1.0625rem/1.6 var(--wide);font-stretch:100%}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
.visually-hidden,.honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:9;background:var(--orange);color:var(--carbon);padding:10px 14px;font-weight:700}
.skip:focus{top:12px}

/* Header */
.hdr{display:flex;align-items:center;gap:10px 26px;max-width:var(--wrap);margin:0 auto;padding:14px var(--side)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;font-weight:800;font-stretch:118%;font-size:1.15rem}
.brand img{border-radius:9px}
.links{display:none}
.links a{color:var(--dim);text-decoration:none;padding:10px 0}
.links a:hover{color:var(--chalk)}
.lang{position:relative;font-size:.95rem}
.lang summary{cursor:pointer;list-style:none;padding:10px 0;color:var(--dim)}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.5em;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-.15em) rotate(45deg)}
.lang nav{position:absolute;right:0;top:100%;z-index:5;display:grid;min-width:13rem;padding:6px;background:var(--carbon-2);border:1px solid var(--line);border-radius:10px}
.lang nav a{padding:9px 12px;border-radius:6px;text-decoration:none}
.lang nav a:hover{background:var(--carbon-3)}
.lang nav a[aria-current]{color:var(--orange);font-weight:700}

/* Hero: the copy, then the real MIX screen (no drawn board) */
.wall{max-width:var(--wrap);margin:0 auto;padding:12px var(--side) clamp(56px,8vw,104px);display:grid;gap:36px}
.kick{font:500 .8rem/1.5 var(--mono);color:var(--orange);margin-bottom:14px}
h1{font-weight:800;font-stretch:112%;font-size:clamp(2.1rem,8.4vw,4rem);line-height:.98;letter-spacing:-.012em;text-wrap:balance;margin-bottom:20px}
.sub{font-size:clamp(1.05rem,1.5vw,1.2rem);color:#ddd5ce;max-width:34em;margin-bottom:26px}
.badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.badge{display:block;line-height:0}
.badge img{height:48px;width:auto}
.small-print{margin-top:14px;font-size:.88rem;color:var(--dim);max-width:36em}
.pairing{display:grid;justify-items:center}
.pairing .pair-phone{width:min(78vw,300px)}
[data-tone="tabata"],[data-tone="work"]{--tone:var(--work)}
[data-tone="emom"]{--tone:var(--orange)}
[data-tone="amrap"],[data-tone="down"]{--tone:var(--down)}
[data-tone="rest"],[data-tone="sand"]{--tone:var(--sand)}
[data-tone="go"]{--tone:var(--go)}
.phone{width:min(78vw,320px)}
.phone img{border-radius:34px;box-shadow:0 0 0 1px rgb(242 237 231/.14),0 30px 60px -30px rgb(0 0 0/.7)}

/* Blocks: phase banner, then screen and words */
.blocks{max-width:var(--wrap);margin:0 auto;padding:0 var(--side);display:grid;gap:clamp(64px,9vw,112px)}
.banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding:16px 18px 16px 22px;border-radius:12px;background:color-mix(in srgb,var(--tone) 22%,var(--carbon));border-left:8px solid var(--tone);margin-bottom:28px}
.banner-mode{font-weight:800;font-stretch:125%;font-size:clamp(1.6rem,6.6vw,2.6rem);line-height:1}
.banner-mark{font:600 clamp(.95rem,3.4vw,1.15rem)/1.2 var(--mono);color:var(--chalk)}
.block-body{display:grid;gap:26px;justify-items:center}
.block-copy{width:100%;max-width:36rem}
.block-copy h2{font-weight:800;font-stretch:108%;font-size:clamp(1.7rem,5.6vw,2.6rem);line-height:1.02;text-wrap:balance;margin-bottom:16px}
.block-copy p{color:#ddd5ce;margin-bottom:12px;max-width:34em}
.wrist-shot{width:min(68vw,260px)}
.wrist-shot img{border-radius:54px;background:#000;padding:16px;box-shadow:0 0 0 1px rgb(242 237 231/.16)}
.ribbon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:22px 0 14px;max-width:26rem}
.cell{min-width:0;padding:10px 4px;border-radius:10px;background:var(--carbon-3);display:grid;gap:3px;justify-items:center;text-align:center}
.cell span{font:600 min(.62rem,2.5vw)/1.2 var(--mono);color:var(--dim);white-space:nowrap}
.cell b{font:700 1rem/1.1 var(--mono)}
.cell.now{background:#41679f}
.cell.now span{color:var(--chalk)}
.more-link a{font-weight:700}

/* Nine modes */
.modes{max-width:var(--wrap);margin:clamp(72px,10vw,128px) auto 0;padding:0 var(--side);display:grid;gap:30px;justify-items:center}
.modes-copy{width:100%}
.modes h2,.pro h2,.more h2,.ask h2{font-weight:800;font-stretch:112%;font-size:clamp(1.9rem,6vw,3.2rem);line-height:1;text-wrap:balance;margin-bottom:20px}
.mode-list li{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--line)}
.mode-list strong{font:700 .95rem/1.3 var(--mono);color:var(--orange)}
.mode-list span{color:#ddd5ce}

/* Free and Pro */
.pro{margin-top:clamp(72px,10vw,128px);background:var(--navy);padding:clamp(56px,8vw,104px) max(var(--side),calc((100% - var(--wrap))/2 + var(--side)))}
.pro-intro{max-width:36em;margin-bottom:28px;color:#e2ddd7}
.plans{display:grid;gap:26px;margin-bottom:26px}
.plan{border-top:6px solid var(--orange);padding-top:16px}
.plan-pro{border-top-color:var(--sand)}
.plan h3{font-weight:800;font-stretch:118%;font-size:1.6rem;margin-bottom:8px}
.plan li{padding:11px 0;border-bottom:1px solid rgb(242 237 231/.16)}
.legal-note{font-size:.9rem;color:#cfc8c1;max-width:62em;margin-top:10px}
.local{margin-top:22px;max-width:44em}

/* Last call */
.go{background:var(--orange);color:var(--carbon);padding:clamp(60px,9vw,120px) max(var(--side),calc((100% - var(--wrap))/2 + var(--side)))}
.go h2{font-weight:800;font-stretch:118%;font-size:clamp(2.2rem,7.6vw,5rem);line-height:.96;letter-spacing:-.01em;max-width:15em;text-wrap:balance;margin-bottom:30px}

/* More apps, support, footer */
.more{max-width:var(--wrap);margin:0 auto;padding:clamp(56px,8vw,96px) var(--side) 0}
.more-list{display:grid;gap:10px}
.more-list a{display:flex;align-items:center;gap:14px;padding:10px 0;text-decoration:none;font-weight:700;font-size:1.1rem}
.more-list img{border-radius:12px}
.ask{max-width:var(--wrap);margin:0 auto;padding:clamp(56px,8vw,96px) var(--side);display:grid;gap:28px}
.ask-head p{color:#ddd5ce;max-width:34em}
.support-form{display:grid;gap:14px}
.support-form label{display:grid;gap:6px;font-weight:700;font-size:.95rem}
.support-form input,.support-form select,.support-form textarea{font:inherit;font-weight:400;min-height:48px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--carbon-2);color:var(--chalk)}
.support-form textarea{min-height:140px;resize:vertical}
.support-form select{-webkit-appearance:none;appearance:none;padding-right:40px;background:var(--carbon-2) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23f2ede7%27 stroke-width=%272%27/%3E%3C/svg%3E") no-repeat right 14px center}
.support-form button{justify-self:start;min-height:50px;padding:0 26px;border:0;border-radius:999px;background:var(--orange);color:var(--carbon);font:700 1rem var(--wide);cursor:pointer}
.support-form button:hover{background:#ff8a45}
.form-note{font-size:.82rem;color:var(--dim)}
.base{max-width:var(--wrap);margin:0 auto;padding:36px var(--side) 56px;border-top:1px solid var(--line);display:grid;gap:14px;color:var(--dim);font-size:.92rem}
.base nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.base small{font-size:.76rem;line-height:1.5}

:lang(ja) h1,:lang(ja) h2,:lang(ja) h3,:lang(ja) .banner-mode{font-stretch:100%;letter-spacing:0;line-height:1.25;word-break:auto-phrase}
:lang(ja) h1{font-size:clamp(1.9rem,6.4vw,3.6rem)}

/* Desktop and wide tablets only: every multi-column layout lives here, never in the base rules. */
@media (min-width:1120px){
  .wall{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);column-gap:clamp(36px,5vw,80px);align-items:center;padding-top:28px}
}
@media (min-width:900px){
  .links{display:flex;gap:4px 22px;font-size:.95rem}
  .block-body{grid-template-columns:300px minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:center;justify-items:stretch}
  .block:nth-child(even) .block-body{grid-template-columns:minmax(0,1fr) 300px}
  .block:nth-child(even) .block-body > figure{order:2}
  .phone,.wrist-shot{width:300px}
  .wrist-shot{width:260px;justify-self:center}
  .modes{grid-template-columns:minmax(0,1fr) 300px;column-gap:clamp(40px,6vw,96px);align-items:start;justify-items:stretch}
  .mode-list{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  .plans{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
  .more-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ask{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;column-gap:clamp(24px,5vw,72px)}
  .support-form{grid-template-columns:1fr 1fr}
  .support-form .message-field,.support-form .cf-turnstile,.support-form .form-status,.support-form .form-note{grid-column:1 / -1}
}