/* WodCam website. Volt look, docs/BRANDING.md: tokens, type roles, radii and spacing are the app's. */

@font-face{font-family:Archivo;src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Archivo Black";src:url(fonts/archivo-black.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}

/* Colour tokens: night, then day when the phone is set to light (the theme follows the phone). */
:root{
  --bg:#0b0b0b;--ink:#f4f4f0;--card:#151515;--card2:#1c1c1c;--line:#242424;--line2:#2f2f2f;
  --mut:#8b8b86;--mut2:#a3a39e;--mut3:#6f6f6b;
  --accent:#d6ff3f;--accentText:#d6ff3f;--onAccent:#0b0b0b;
  --cream:#f3efe6;--rec:#ff4d3d;--photoSub:#cfcfca;--photoScrim:rgba(0,0,0,.85);--glass:rgba(0,0,0,.55);
  --side:18px;--section:16px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  --bg:#f2f1ec;--ink:#121212;--card:#fff;--card2:#e9e8e2;--line:#e4e2db;--line2:#d4d2ca;
  --mut:#6b6a65;--mut2:#5d5c57;--mut3:#8a8984;
  --accentText:#768c23;color-scheme:light;
}}
/* Forced night: surfaces standing for a photo or the camera keep night tokens in both themes. */
.night{--bg:#0b0b0b;--ink:#f4f4f0;--card:#151515;--line2:#2f2f2f;--mut:#8b8b86;--mut2:#a3a39e;--accentText:#d6ff3f;color:var(--ink);background:var(--bg)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{background:var(--bg);color:var(--ink);font:400 17px/1.45 Archivo,system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px}

/* Layout: one column on a phone, the width used on a computer. */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--side)}
@media (min-width:720px){:root{--side:32px}}
@media (min-width:1100px){:root{--side:48px}}

/* Type roles (BRANDING, Type). Mono is always caps. */
.onboardingTitle{font:900 40px/1.05 Archivo;font-stretch:112%;letter-spacing:-.02em}
.heroTitle{font:900 30px/1.05 Archivo;font-stretch:110%;letter-spacing:-.02em}
.screenTitle{font:900 26px/1.1 Archivo;font-stretch:110%}
.sheetTitle{font:900 24px/1.15 Archivo;font-stretch:110%}
.tileTitle{font:800 19px/1.2 Archivo;font-stretch:105%}
.body{font:400 17px/1.45 Archivo;color:var(--mut2)}
.helper{font:400 15px/1.45 Archivo;color:var(--mut)}
.fine{font:400 13px/1.4 Archivo;color:var(--mut)}
.kicker{font:500 12px/1.3 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accentText)}
.sectionLabel{font:500 11px/1.3 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}

/* Header */
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:8px}
.logo{display:flex;align-items:center;min-height:48px}
.logo svg{height:34px;width:auto}
.logo .lt{fill:var(--ink)}.logo .tr{fill:var(--line2)}.logo .ac{fill:var(--accentText)}
.navlinks{display:flex}
.navlinks a{display:inline-flex;align-items:center;min-height:48px;padding:0 10px;font:700 14px Archivo;color:var(--mut2);text-decoration:none}
.navlinks a[aria-current]{color:var(--ink)}
.navlinks a:last-child{padding-right:0}

main{flex:1;padding:4px 0 0}

/* Buttons (BRANDING, Buttons): pressing scales; no ripple. */
.press{transition:transform .12s}
.press:active{transform:scale(.98)}
.primary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 24px;border-radius:18px;background:var(--accent);color:var(--onAccent);font:800 17px Archivo;text-decoration:none}
@media (min-width:720px){.primary{display:inline-flex}}
.tag{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:10px;border:1px solid var(--accentText);color:var(--accentText);font:500 11px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase}

/* Cards and tiles */
.card{background:var(--card);border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:8px}
.tile{background:var(--card);border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:22px;min-height:140px}
.tile svg{width:26px;height:26px;fill:none;stroke:var(--accentText);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile div{display:flex;flex-direction:column;gap:4px}

/* Photo card (VOLT-REFERENCE 3.4): forced night, scrim from X % to .85 black, text at the bottom. */
.photo{position:relative;overflow:hidden;border-radius:28px;isolation:isolate}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) var(--scrim,40%),var(--photoScrim))}
.photo .over{position:absolute;left:20px;right:16px;bottom:18px;display:flex;flex-direction:column;gap:6px}
.photo .sub{font:400 16px/1.4 Archivo;color:var(--photoSub)}
.glassBadge{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--glass);font:500 11px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--ink)}
.glassBadge i{width:7px;height:7px;border-radius:50%;background:var(--rec)}

/* The clip: a 9:16 frame carrying the burn, laid out in units of 1/390 of the frame's width (ANTICHEAT, The burn). */
.clip{aspect-ratio:9/16;container-type:inline-size}
.clip::after{display:none}
.burn{--u:calc(100cqw / 390);position:absolute;inset:0;color:var(--cream);pointer-events:none}
.burn .block{position:absolute;left:calc(16 * var(--u));top:calc(16 * var(--u));width:max-content;display:flex;flex-direction:column}
.burn .clock{font:400 calc(48 * var(--u))/1 "Archivo Black";font-variant-numeric:tabular-nums;text-shadow:0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.95)}
.burn .steps{display:flex;gap:calc(4 * var(--u));margin-top:calc(2 * var(--u))}
.burn .steps i{flex:1;height:calc(5 * var(--u));border-radius:calc(2.5 * var(--u));box-shadow:0 0 0 calc(1 * var(--u)) rgba(0,0,0,.55)}
.burn .steps .done{background:rgba(243,239,230,.55)}.burn .steps .rec{background:var(--rec)}.burn .steps .todo{background:rgba(243,239,230,.22)}
.burn .names{margin-top:calc(5 * var(--u));font:600 calc(18 * var(--u))/1.2 "Barlow Condensed";opacity:.9;text-shadow:0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.85)}
.burn .edge{position:absolute;right:calc(16 * var(--u));bottom:calc(16 * var(--u));display:flex;flex-direction:column;align-items:flex-end;gap:calc(4 * var(--u));font:700 calc(9 * var(--u))/1.2 "JetBrains Mono";letter-spacing:.06em;text-shadow:0 0 2px rgba(0,0,0,.9)}
.burn .edge svg{width:calc(52 * var(--u));height:auto;opacity:.6;filter:drop-shadow(0 0 calc(1.5 * var(--u)) rgba(0,0,0,.9))}
.burn .edge svg path{fill:var(--cream)}.burn .edge svg .tr{fill:none}

/* Home */
.hero{display:grid;gap:24px;padding-top:12px}
.hero .text{display:flex;flex-direction:column;gap:16px}
.hero .clip{width:100%;max-width:420px;justify-self:center}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:56px;align-items:center;padding-top:32px}
  .hero .clip{max-width:none}
  .hero .onboardingTitle{font-size:56px}
}

.band{margin-top:48px;display:grid;gap:var(--section)}
.band .head{display:flex;flex-direction:column;gap:8px;max-width:640px}
.split{display:grid;gap:10px}
.split .judge{min-height:460px;--scrim:30%}
.tiles{display:grid;gap:10px}
@media (min-width:600px){.tiles{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  .band{margin-top:80px}
  .split{grid-template-columns:5fr 7fr}
  .split .judge{min-height:100%}
}

/* Legal pages */
.banner{min-height:240px;margin-top:12px;--scrim:0%;display:flex;flex-direction:column;justify-content:flex-end;padding:110px 16px 18px 20px}
.banner .over{position:static}
@media (min-width:900px){.banner{min-height:300px}}
.legal{display:grid;gap:var(--section);margin-top:var(--section)}
.toc{display:none}
@media (min-width:1000px){
  .legal{grid-template-columns:240px minmax(0,1fr);gap:40px;margin-top:32px}
  .toc{display:flex;flex-direction:column;position:sticky;top:16px;align-self:start}
  .toc a{display:flex;align-items:center;min-height:48px;font:700 15px Archivo;color:var(--mut2);text-decoration:none;border-bottom:1px solid var(--line)}
  .toc .sectionLabel{margin-bottom:6px}
}
.doc{display:flex;flex-direction:column;gap:var(--section);max-width:820px}
@media (min-width:1000px){.doc{max-width:none}}
.doc .card p,.doc .card li{font:400 17px/1.45 Archivo;color:var(--mut2)}
.doc .card ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.doc strong{color:var(--ink);font-weight:700}
.doc h3{font:700 17px/1.3 Archivo;margin-top:8px}
.kv{display:flex;flex-direction:column}
.kv div{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--line)}
.kv div:last-child{border-bottom:0}
.kv b{font:700 17px/1.3 Archivo}
.kv span{font:400 15px/1.45 Archivo;color:var(--mut)}
@media (min-width:600px){.kv div{flex-direction:row;gap:16px}.kv b{flex:0 0 38%}}
.howSteps{list-style:none;display:flex;flex-direction:column;gap:14px}
.howSteps li{display:flex;gap:14px;align-items:flex-start}
.howSteps li b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--onAccent);font:800 15px/30px Archivo;text-align:center}
.mail{font:700 17px Archivo;color:var(--ink);overflow-wrap:anywhere}

/* Footer */
footer{border-top:1px solid var(--line);margin-top:48px;padding:8px 0 24px}
footer .wrap{display:flex;flex-direction:column;gap:4px}
footer nav{display:flex;flex-wrap:wrap;column-gap:20px}
footer a{display:inline-flex;align-items:center;min-height:48px;font:600 14px Archivo;color:var(--mut2);text-decoration:none}
footer .sectionLabel{padding:16px 0}
@media (min-width:900px){footer .wrap{flex-direction:row;justify-content:space-between;align-items:center}}

/* Home, WodCam Cloud: the steps and facts on one side, what the judge sees on the other. */
.cloud{grid-template-columns:1fr;align-items:center;gap:32px}
.cloudText{display:flex;flex-direction:column;gap:24px;min-width:0}
/* The three steps read as one object, like the clock controls: joined, 4 px seams, outer radius 18. */
.flow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-radius:18px;overflow:hidden}
.flow li{background:var(--card);padding:16px 14px;display:flex;flex-direction:column;gap:4px;min-height:132px}
.flow .n{font:800 30px/1 Archivo;font-stretch:75%;font-variant-numeric:tabular-nums;color:var(--accentText);margin-bottom:auto;padding-bottom:14px}
.flow .tileTitle{font-size:17px}
.flow .helper{font-size:13px;line-height:1.35}
.facts{max-width:520px}
/* The judge's page, drawn as a phone: forced night, it stands for a screen. */
.judgePage{justify-self:center;width:100%;max-width:340px;border-radius:28px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 0 0 1px var(--line2)}
.judgePage .url{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:14px;background:var(--card);font:500 11px "JetBrains Mono",monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--mut2);min-width:0}
.judgePage .url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.judgePage .url svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--accentText);stroke-width:2.2;stroke-linecap:round}
.judgePage .player{border-radius:18px}
.judgePage .play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:64px;height:64px;border-radius:50%;background:var(--glass);display:grid;place-items:center;backdrop-filter:blur(6px)}
.judgePage .play svg{width:26px;height:26px;fill:var(--cream);margin-left:3px}
.judgePage .checks{background:var(--card);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.judgePage .ok{display:flex;align-items:center;gap:10px;font:700 15px/1.3 Archivo}
.judgePage .ok::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.judgePage figcaption{padding:0 6px 4px;color:var(--mut)}
@media (min-width:900px){
  .cloud{grid-template-columns:1fr 360px;gap:64px}
  .judgePage{justify-self:end}
}

/* Home, questions: VoltFoldRow. On a computer the heading stays in view beside the rows. */
.faqBand{align-items:start}
.faqBand .head{gap:10px}
.faqBand .outline{margin-top:10px;align-self:flex-start}
.outline{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 22px;border-radius:18px;border:1px solid var(--line2);font:700 16px Archivo;color:var(--ink);text-decoration:none}
.folds{display:flex;flex-direction:column;gap:8px;min-width:0}
.fold{background:var(--card);border-radius:18px}
.fold summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 18px;cursor:pointer;border-radius:18px}
.fold summary::-webkit-details-marker{display:none}
.fold h3{flex:1;font:800 17px/1.3 Archivo}
.fold summary svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--mut2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:rotate .2s}
.fold[open] summary svg{rotate:180deg;stroke:var(--accentText)}
.fold p{padding:0 18px 18px;font:400 16px/1.5 Archivo;color:var(--mut2);max-width:62ch}
.fold summary:focus-visible,.outline:focus-visible{outline:2px solid var(--accentText);outline-offset:2px}
@media (min-width:900px){
  .faqBand{grid-template-columns:320px 1fr;gap:64px}
  .faqBand .head{position:sticky;top:24px}
}
@media (prefers-reduced-motion:reduce){.fold summary svg{transition:none}}

/* WodCam Cloud, proposal "the link": the judge photo, the link card on it, three facts below. */
.cloudLink{gap:20px}
.linkHero{min-height:440px;display:flex;align-items:flex-end;--scrim:10%}
@media (max-width:719px){.linkHero{min-height:560px}}
/* The air bike photo: frame lower, on the athlete rather than the crowd. */
.linkHero img{object-position:50% 58%}
/* On a phone the photo is too narrow to carry the text: photo on top, text and link card under it. */
@media (max-width:719px){
  .linkHero{display:flex;flex-direction:column;min-height:0;background:var(--card)}
  .linkHero::after{display:none}
  .linkHero img{position:static;z-index:0;height:300px;object-position:45% 80%}
  .linkInner{padding:20px 18px 18px}
  .linkHero .sub{color:var(--mut2)}
}
/* The bench photo: keep the judge's face in a narrow frame. */
.photo.judge img{object-position:80% 30%}
.linkInner{position:relative;width:100%;padding:24px 20px;display:flex;flex-direction:column;gap:20px}
.linkInner .head{display:flex;flex-direction:column;gap:8px;max-width:560px}
.linkCard{align-self:flex-start;max-width:100%;display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:18px;background:var(--glass);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.linkUrl{display:flex;align-items:center;gap:10px;font:700 17px/1.3 Archivo;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:419px){.linkUrl{font-size:15px}}
.linkUrl svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--accentText);stroke-width:2.2;stroke-linecap:round}
.linkFacts{display:grid;gap:16px}
.linkFacts div{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:2px solid var(--accent)}
@media (min-width:720px){
  .linkHero{min-height:520px}
  .linkInner{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:36px}
  .linkCard{align-self:auto}
  .linkFacts{grid-template-columns:repeat(3,1fr);gap:24px}
}

/* WodCam Cloud, proposal "free or Cloud": two plans side by side, Cloud ringed in the accent. */
.planGrid{display:grid;gap:10px}
.plan{background:var(--card);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:18px}
.planHead{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.planHead .tileTitle{font-size:22px}
.cloudPlan{box-shadow:inset 0 0 0 2px var(--accent)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.plan li{display:flex;gap:10px;align-items:flex-start;font:400 16px/1.4 Archivo;color:var(--mut2)}
.plan li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--card2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a39e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.cloudPlan li::before{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}
@media (min-width:720px){.planGrid{grid-template-columns:1fr 1fr}}
@media (max-width:599px){
  .flow{grid-template-columns:1fr}
  .flow li{min-height:0;display:grid;grid-template-columns:36px 1fr;column-gap:10px;align-items:baseline;padding:14px 16px}
  .flow .n{grid-row:span 2;margin:0;padding:0;font-size:26px}
}