/* foldsportsgame.com. Plain CSS, no build step.
   Colours are sampled from the game: navy from the end card, orange from the wordmark,
   and one accent per sport from the menu cards. Type is Barlow Condensed, the game's own face. */

@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:800;font-display:swap;src:url(/assets/fonts/BarlowCondensed-800i.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/BarlowCondensed-700i.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/BarlowCondensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/BarlowCondensed-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/Barlow-600.woff2) format("woff2")}

:root{
  --navy:#070c16;
  --navy-2:#10122b;
  --panel:#12172e;
  --panel-2:#181e3a;
  --line:rgba(255,255,255,.1);
  --ink:#ffffff;
  --text:#d5d9e6;
  --muted:#9aa2b8;
  --orange:#ff7a2f;
  --orange-deep:#aa410c;
  --gold:#fed13f;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--text);font:400 18px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--orange);color:#111;padding:8px 14px;border-radius:8px;font-weight:600;z-index:50}
.skip:focus{left:12px}

/* Display type: heavy condensed italic, the way the game sets every title. */
h1,h2,h3{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;color:var(--ink);margin:0;line-height:.92;letter-spacing:.005em}
h2{font-size:clamp(46px,8.2vw,92px)}
h2 em,.wordmark em{font-style:italic;color:var(--orange)}
h2 em{display:block}
.label{font:600 15px/1.2 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.label.on{color:var(--orange)}
.lede{font-size:clamp(18px,2.1vw,21px);color:var(--text);max-width:34em;margin:20px 0 0}
section{padding:clamp(64px,9vw,112px) 0;position:relative}

/* Header */
.top{position:sticky;top:0;z-index:20;background:rgba(7,12,22,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 italic 24px/1 var(--display);text-transform:uppercase;color:var(--ink);white-space:nowrap}
.brand img{width:32px;height:32px;border-radius:8px}
.brand em{font-style:italic;color:var(--orange)}
.top nav{display:flex;align-items:center;gap:26px}
.top nav a{font:600 15px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color .2s}
.top nav a:hover{color:var(--ink)}
.top nav a.pill{color:#14100c;background:var(--orange);padding:9px 14px 8px;border-radius:999px;letter-spacing:.12em}
.top nav a.pill:hover{color:#14100c;background:#ff8d4b}

/* Hero: the menu's warm glow top left, cool teal bottom right. */
.hero{padding:clamp(36px,6vw,72px) 0 clamp(56px,8vw,96px);overflow:hidden;
  background:
    radial-gradient(70% 80% at 18% 18%,rgba(150,66,48,.5),transparent 62%),
    radial-gradient(60% 70% at 96% 100%,rgba(12,78,84,.45),transparent 60%),
    linear-gradient(180deg,var(--navy-2),var(--navy))}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px;align-items:center}
.wordmark{font-size:clamp(96px,25vw,196px);line-height:.8;letter-spacing:0;margin:6px 0 0}
.wordmark span,.wordmark em{display:block}
.wordmark span{text-shadow:0 .04em 0 rgba(120,130,160,.55),0 .12em .3em rgba(0,0,0,.45)}
.wordmark em{text-shadow:0 .04em 0 var(--orange-deep),0 .12em .3em rgba(0,0,0,.45);margin-left:-.12em}
.tagline{font:600 clamp(17px,2.4vw,23px)/1.2 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--text);margin:30px 0 0}
.hero .lede{margin-top:16px}
.hero .lede strong{color:var(--ink);font-weight:600}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.button{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#14100c;font:800 italic 22px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;padding:15px 24px 14px;border-radius:999px;text-decoration:none;box-shadow:0 10px 30px -10px rgba(255,122,47,.7);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.button:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(255,122,47,.85)}
.button svg{width:16px;height:16px;flex:none}
.button.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.button.line:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.button.gold{background:var(--gold);box-shadow:0 10px 30px -10px rgba(254,209,63,.6)}
.button.gold:hover{box-shadow:0 16px 36px -10px rgba(254,209,63,.75)}
.soon{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.soon li{display:flex;flex-direction:column;gap:3px;border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:9px 16px 8px;background:rgba(7,12,22,.45)}
.soon small{font:600 11px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.soon b{font:800 italic 23px/1 var(--display);color:var(--ink)}
.keep{text-transform:none}

/* Hero phones */
.stage{position:relative;height:620px;display:flex;justify-content:center;align-items:center}
.phone{background:#04060b;border-radius:38px;padding:9px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 80px -30px rgba(0,0,0,.9)}
.phone img,.phone video{border-radius:30px;width:100%;aspect-ratio:400/900;object-fit:cover;background:#0b0f1d}
.stage .phone{position:absolute;width:256px}
.stage .phone.side{width:212px;opacity:.92}
.stage .phone.l{transform:translate(-178px,26px) rotate(-8deg)}
.stage .phone.r{transform:translate(178px,26px) rotate(8deg)}
.stage .phone.main{z-index:2;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 50px 90px -30px rgba(0,0,0,.95),0 0 90px -20px rgba(255,122,47,.45)}

/* Trailer */
.trailer{padding-top:clamp(56px,8vw,96px)}
.trailer .head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:32px}
.trailer .head p{margin:0;max-width:26em;color:var(--muted)}
.screen{border-radius:22px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 100px -40px rgba(0,0,0,.9),0 0 120px -40px rgba(255,122,47,.4)}
.screen video{width:100%;aspect-ratio:16/9;background:#000}

/* Sports: cards carry the same coloured edge as the game's menu. */
.sports{background:linear-gradient(180deg,var(--navy),var(--navy-2) 50%,var(--navy))}
.sports .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26em);gap:20px 48px;align-items:end;margin-bottom:40px}
.sports .head p{margin:0;color:var(--muted)}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sport{--c:var(--orange);position:relative;border-radius:20px;overflow:hidden;background:var(--panel);box-shadow:0 0 0 2px var(--c),0 24px 50px -30px var(--c);transition:transform .3s var(--ease)}
.sport:hover{transform:translateY(-5px)}
.sport img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% var(--y,0%)}
.sport .meta{position:relative;padding:14px 16px 18px;background:linear-gradient(180deg,var(--panel-2),var(--panel))}
.sport .meta::before{content:"";position:absolute;left:16px;top:-2px;width:34px;height:4px;border-radius:2px;background:var(--c)}
.sport h3{font-size:clamp(30px,3.4vw,40px)}
.sport p{margin:6px 0 0;font-size:15.5px;line-height:1.4;color:var(--text)}
.facts{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.facts li{border:1px solid var(--line);border-radius:18px;padding:22px 22px 24px;background:rgba(18,23,46,.6)}
.facts h3{font-size:30px;margin-bottom:8px}
.facts p{margin:0;font-size:16px;color:var(--muted)}
.levels{display:inline-flex;gap:2px;padding:4px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(7,12,22,.6);margin-bottom:16px}
.levels span{font:600 13px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:8px 12px 7px;border-radius:999px}
.levels span.is{background:#fff;color:#10122b}
.glyph{display:flex;align-items:center;height:36px;margin-bottom:16px;color:var(--orange)}
.glyph svg{height:32px;width:auto}

/* The fold */
.fold{overflow:hidden;background:
  radial-gradient(50% 60% at 22% 50%,rgba(61,60,144,.4),transparent 70%),var(--navy)}
.fold .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.duo{perspective:1400px;perspective-origin:50% 20%;width:min(460px,100%);margin:0 auto;padding:10px 0 0}
.duo-body{transform-style:preserve-3d;transform:rotateY(-5deg)}
.duo-half{background:#04060b;padding:10px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.duo-half img{width:100%;aspect-ratio:760/540;object-fit:cover}
.duo-top{border-radius:30px 30px 4px 4px;padding-bottom:5px}
.duo-top img{border-radius:22px 22px 0 0}
.duo-bottom{border-radius:4px 4px 30px 30px;padding-top:5px;transform-origin:50% 0;transform:rotateX(60deg);margin-bottom:-20%;transition:transform 1.2s var(--ease);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 60px 60px -30px rgba(0,0,0,.9)}
.duo-bottom img{border-radius:0 0 22px 22px}
.js .duo.flat .duo-bottom{transform:rotateX(0deg)}
.duo figcaption,.fits figcaption{font:600 13px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:14px}
.duo figcaption{margin-top:30px;position:relative}
.duo figcaption{transition:opacity .5s .9s}
.js .duo.flat figcaption{opacity:0}
figure{margin:0}
.split{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;max-width:30em}
.split li{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline;padding:16px 0}
.split li+li{border-top:2px dashed rgba(255,255,255,.22)}
.split b{font:800 italic 30px/1 var(--display);text-transform:uppercase;color:var(--ink);min-width:3.2em}
.split li+li b{color:var(--orange)}
.split span{color:var(--text)}
.fits{display:flex;gap:22px;align-items:flex-end;margin-top:34px}
.fits .phone{border-radius:20px;padding:5px;width:92px}
.fits .phone img{border-radius:15px;aspect-ratio:516/960}
.fits .tablet{background:#04060b;border-radius:16px;padding:7px;width:172px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 60px -30px rgba(0,0,0,.9)}
.fits .tablet img{border-radius:9px}

/* Leaderboard */
.board{padding:0}
.board .band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:center;border-radius:28px;padding:clamp(28px,5vw,56px);background:
  radial-gradient(60% 120% at 100% 0,rgba(254,209,63,.2),transparent 60%),linear-gradient(140deg,var(--panel-2),var(--panel));box-shadow:0 0 0 1px rgba(254,209,63,.35)}
.board h2{font-size:clamp(42px,6.4vw,72px)}
.board h2 em{color:var(--gold)}
.board p{margin:16px 0 0;max-width:32em}

/* Pricing */
.pricing .head{margin-bottom:40px}
.plans{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px;align-items:stretch}
.plan{border-radius:24px;padding:clamp(24px,3.4vw,40px);background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column}
.plan h3{font-size:clamp(30px,3.6vw,40px)}
.plan .price{font:800 italic clamp(84px,13vw,140px)/.9 var(--display);color:var(--ink);margin:18px 0 6px;letter-spacing:-.01em}
.plan .price small{font:600 16px/1 var(--display);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-left:10px;vertical-align:.5em}
.plan p{margin:10px 0 0;color:var(--text)}
.plan.early{position:relative;background:
  radial-gradient(80% 90% at 100% 0,rgba(255,122,47,.32),transparent 65%),linear-gradient(140deg,#1d1730,var(--panel));border:0;box-shadow:0 0 0 2px var(--orange),0 40px 80px -40px rgba(255,122,47,.6)}
.plan.early .price{color:var(--orange);text-shadow:0 .035em 0 var(--orange-deep)}
.flag{align-self:flex-start;font:600 13px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#14100c;background:var(--gold);padding:7px 11px 6px;border-radius:6px;margin-bottom:16px}
.ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;color:var(--ink);font-weight:500}
.ticks svg{width:20px;height:20px;margin-top:4px;color:var(--orange)}
.rise{margin-top:auto !important;padding-top:22px;font-size:16px;color:var(--muted) !important}
.rise b{color:var(--gold);font-weight:600}
.noads{margin-top:20px;border-radius:24px;padding:clamp(28px,5vw,52px) 24px;text-align:center;background:#0b0f20;border:1px solid var(--line)}
.noads p{font:800 italic clamp(60px,12vw,132px)/.86 var(--display);text-transform:uppercase;color:var(--ink);margin:0}
.noads em{font-style:italic;color:var(--orange)}
.noads small{display:block;font:600 15px/1.3 var(--display);font-style:normal;letter-spacing:.2em;color:var(--muted);margin-top:18px}

/* Footer */
footer{border-top:1px solid var(--line);padding:44px 0 56px;color:var(--muted);font-size:15.5px}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:32px}
footer .brand{font-size:30px;margin-bottom:14px}
footer .brand img{width:44px;height:44px;border-radius:11px}
footer h4{font:600 14px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:6px 0 14px}
footer p{margin:0 0 8px;max-width:26em}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
footer a:hover{color:var(--ink);text-decoration-color:var(--orange)}
footer a.brand{text-decoration:none}

/* Scroll reveal. Without JS everything simply shows. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* Plain pages (404) */
.plain{min-height:70vh;display:grid;place-items:center;text-align:center;padding:80px 0}
.plain h1{font-size:clamp(64px,14vw,150px)}
.plain h1 em{font-style:italic;color:var(--orange)}
.plain p{margin:18px auto 28px;max-width:26em}

@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:8px}
  .stage{height:520px;margin-top:20px}
  .stage .phone{width:214px}
  .stage .phone.side{width:176px}
  .stage .phone.l{transform:translate(-142px,22px) rotate(-8deg)}
  .stage .phone.r{transform:translate(142px,22px) rotate(8deg)}
  .sports .head{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .fold .wrap{grid-template-columns:1fr;gap:44px}
  .fold .copy{order:-1}
  .plans{grid-template-columns:1fr}
  .board .band{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr 1fr}
  footer .wrap>div:first-child{grid-column:1/-1}
}
@media (max-width:700px){
  .top nav a:not(.pill){display:none}
  .facts{grid-template-columns:1fr}
  .sport .meta{padding:12px 12px 14px}
  .sport .meta::before{left:12px}
  .sport p{font-size:14.5px}
  .duo-body{transform:rotateY(-3deg)}
  .duo{width:min(400px,84%)}
}
@media (max-width:460px){
  body{font-size:17px}
  .wordmark em{margin-left:-.05em}
  .wrap{padding:0 16px}
  .button{font-size:20px;padding:14px 20px 13px}
  .stage{height:470px}
  .stage .phone{width:196px;border-radius:32px;padding:7px}
  .stage .phone img,.stage .phone video{border-radius:26px}
  .stage .phone.side{width:160px}
  .stage .phone.l{transform:translate(-118px,20px) rotate(-8deg)}
  .stage .phone.r{transform:translate(118px,20px) rotate(8deg)}
  footer .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .duo-bottom,.button,.sport{transition:none}
  .js .duo.flat .duo-bottom{transform:rotateX(60deg)}
  .js .duo.flat figcaption{opacity:1}
  .duo figcaption{transition:none}
}