@font-face{font-family:'Barlow Condensed';font-weight:900;font-style:italic;font-display:swap;src:url(/assets/fonts/BarlowCondensed-BlackItalic.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-style:italic;font-display:swap;src:url(/assets/fonts/BarlowCondensed-ExtraBoldItalic.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-style:italic;font-display:swap;src:url(/assets/fonts/BarlowCondensed-BoldItalic.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/BarlowCondensed-Regular.woff2) format('woff2')}
:root{--red:#D91E24;--accent:#F33134;--ink:#0B0E12;--panel:rgba(12,15,19,.84);--line:rgba(255,255,255,.18);--muted:#C9D0D6;--dim:#8A939C;--green:#53D88A;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:#fff;font-family:'Barlow Condensed',system-ui,sans-serif;-webkit-text-size-adjust:100%}
.hero{position:relative;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,rgba(11,14,18,.25) 40%,var(--ink) 100%),url(/assets/bg-results.jpg) center/cover;padding:18px 16px 0}
.top{display:flex;align-items:center;justify-content:space-between}
.logo{display:block;width:120px;height:auto}
.chip{font-weight:800;font-style:italic;font-size:14px;letter-spacing:2px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--panel)}
h1{margin:26px 0 0;font-weight:900;font-style:italic;font-size:54px;line-height:.95;letter-spacing:1px;text-shadow:0 2px 10px rgba(0,0,0,.9)}
h1 em{color:var(--accent);font-style:italic}
.who{margin-top:8px;font-weight:800;font-style:italic;font-size:20px;color:var(--green);text-shadow:0 1px 6px #000;max-width:58%}
.sub{margin-top:8px;font-weight:700;font-style:italic;font-size:20px;color:var(--muted);text-shadow:0 1px 6px #000}
/* The car sits in the hero's flow on its own patch of track: never clipped, tyres on a contact
   shadow with a little floor below, front bumper on-screen. */
.ride{position:relative;align-self:flex-end;margin:12px 0 0;padding-bottom:20px;max-width:100%}
.ride::before{content:"";position:absolute;left:4%;right:2%;bottom:10px;height:24px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,.45) 55%,rgba(0,0,0,0));filter:blur(3px)}
.car{position:relative;display:block;width:330px;max-width:100%;height:auto;filter:drop-shadow(0 6px 6px rgba(0,0,0,.55))}
.code{display:flex;justify-content:space-between;gap:6px;margin:4px 0 2px}
.code b{display:flex;align-items:center;justify-content:center;flex:1;max-width:58px;height:66px;background:#0B0E12;border:2px solid rgba(255,255,255,.78);border-radius:10px;font-weight:900;font-style:italic;font-size:36px}
main{padding:40px 16px 24px;max-width:520px;margin:0 auto}
.slip{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px 14px}
.slip .head{display:flex;justify-content:space-between;gap:8px;font-size:13px;letter-spacing:2px;color:var(--muted);margin-bottom:6px}
.row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 8px;border-radius:8px}
.row:nth-child(even){background:rgba(255,255,255,.05)}
.row span{font-weight:700;font-style:italic;font-size:18px;color:var(--muted)}
.row b{font-weight:900;font-style:italic;font-size:26px}
.row.et b{font-size:40px}
.foot{margin-top:8px}
.verified,.practice{display:inline-flex;align-items:center;gap:6px;border-radius:15px;padding:3px 10px;font-weight:800;font-style:italic;font-size:14px;letter-spacing:1px;background:rgba(12,15,19,.82)}
.verified{border:1px solid rgba(83,216,138,.7);color:var(--green)}
.practice{border:1px solid rgba(201,208,214,.5);color:var(--muted)}
.cta{display:block;margin-top:16px;text-align:center;text-decoration:none;background:var(--red);color:#fff;border:2px solid rgba(255,255,255,.9);border-radius:14px;font-weight:900;font-style:italic;font-size:30px;line-height:1;padding:18px 16px 16px;box-shadow:0 8px 20px rgba(0,0,0,.45);letter-spacing:.5px}
.cta small{display:block;font-size:14px;font-weight:400;font-style:normal;letter-spacing:1px;color:#FFD7D7;margin-top:6px}
.stores{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:18px}
.store{display:flex;align-items:center;justify-content:center;min-height:48px;min-width:48px}
.store img{display:block}
.apple img{height:48px;width:auto}
/* Google's PNG carries its own clear space (41 px of 250): scale it so the badge itself is 48 px. */
.google img{height:71.4px;width:auto;margin:-11.7px}
.legal{color:var(--dim);font-size:12px;line-height:1.5;text-align:center;margin:18px 0 0}
@media (min-width:700px){
 body{display:grid;grid-template-columns:1.2fr 1fr;min-height:100vh}
 .hero{min-height:100vh;padding:32px 40px}
 .ride{margin-top:auto;padding-bottom:32px}
 h1{font-size:88px;margin-top:80px}
 .who{font-size:28px}
 .car{width:560px}
 main{padding:80px 40px;align-self:center;width:100%}
}
/* Phones held sideways (the game is landscape): everything on one screen. */
@media (min-width:700px) and (max-height:520px){
 .hero{padding:14px 20px;min-height:0;height:100vh;align-self:start}
 .logo{width:96px}
 h1{font-size:52px;margin-top:14px}
 .who,.sub{font-size:18px;max-width:none;position:relative;z-index:1}
 /* Sideways the hero is exactly one screen tall: the car stands on its bottom edge (absolute,
    inside the hero, never clipped) and the text sits above it. */
 .ride{position:absolute;right:20px;bottom:0;margin:0;padding-bottom:14px;max-width:calc(100% - 40px)}
 .ride::before{bottom:5px;height:18px}
 .car{width:auto;height:min(140px,calc(100vh - 250px));min-height:90px}
 main{padding:14px 20px}
 .slip{padding:6px 12px 8px}
 .row{padding:2px 8px}
 .row span{font-size:15px}.row b{font-size:20px}.row.et b{font-size:28px}
 .cta{margin-top:10px;font-size:24px;padding:12px 12px 10px}
 .cta small{font-size:12px;margin-top:4px}
 .stores{margin-top:10px}
 .legal{margin-top:8px;font-size:10px}
}