@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/BarlowCondensed-Bold.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/BarlowCondensed-SemiBold.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/IBMPlexSans-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2")}

:root{
  --bg:#0F1115;--card:#181B21;--raised:#22262E;--hairline:#2C313A;
  --felt:#1E7A4E;--chalk:#4DA3FF;--amber:#F5B041;
  --text:#F2F4F7;--muted:#A0A7B4;
  --gutter:16px;--section:48px;
  color-scheme:dark;
}
@media (min-width:600px){:root{--gutter:24px}}
@media (min-width:1024px){:root{--gutter:32px;--section:80px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 16px/1.6 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  background-image:radial-gradient(ellipse 70% 520px at 50% 300px,rgba(30,122,78,.30),transparent 70%);
  background-repeat:no-repeat;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--chalk);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--chalk);outline-offset:3px;border-radius:6px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:1080px;margin:0 auto;padding-inline:var(--gutter)}

.hero{text-align:center;padding:48px 0 32px}
@media (min-width:1024px){.hero{padding:96px 0 48px}}
.hero .icon{width:88px;height:88px;margin:0 auto 20px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
h1{
  margin:0;font:700 clamp(40px,8vw,72px)/1 "Barlow Condensed","Arial Narrow",sans-serif;
  letter-spacing:.01em;
}
.tagline{margin:12px auto 0;max-width:36ch;font-size:clamp(18px,2.4vw,20px);line-height:1.4;color:var(--muted)}
.stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.store{
  display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;
  background:var(--text);color:var(--bg);font-weight:600;text-decoration:none;
}
.store:hover{background:#fff}

.screens{
  list-style:none;margin:0;padding:0;
  display:flex;gap:16px;align-items:flex-end;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-block:8px 24px;padding-inline:19vw;margin-inline:calc(-1 * var(--gutter));position:relative;
}
.screens::-webkit-scrollbar{display:none}
.screens li{flex:0 0 62vw;scroll-snap-align:center}
.frame{
  border:3px solid var(--hairline);border-radius:28px;overflow:hidden;background:var(--card);
  aspect-ratio:390/844;box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.frame img{width:100%;height:100%;object-fit:cover;object-position:top}
@media (min-width:600px){
  .screens{
    overflow:visible;scroll-snap-type:none;justify-content:center;padding-inline:0;margin-inline:0;gap:clamp(8px,1.6vw,20px);
  }
  .screens li{flex:0 0 auto;width:clamp(96px,16vw,180px);transition:transform .3s ease}
  .screens li.is-hero{width:clamp(112px,19vw,210px)}
  .screens li:nth-child(1),.screens li:nth-child(5){transform:translateY(28px)}
  .screens li:nth-child(2),.screens li:nth-child(4){transform:translateY(12px)}
  .screens{padding-bottom:48px}
}

.section{margin-top:var(--section)}
.features{
  display:grid;grid-template-columns:1fr;gap:16px;list-style:none;margin:0;padding:0;
}
@media (min-width:600px){.features{grid-template-columns:1fr 1fr}}
.feature{background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:20px}
.feature svg{width:24px;height:24px;stroke:var(--chalk);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.feature h3{margin:12px 0 6px;font:600 22px/1.15 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.01em;color:var(--chalk)}
.feature p{margin:0;color:var(--muted)}

.trial{
  margin:var(--section) auto 0;max-width:min(60ch, calc(100% - 2 * var(--gutter)));text-align:center;
  font-size:18px;line-height:1.5;padding:20px;border:1px solid var(--hairline);border-radius:16px;background:rgba(24,27,33,.7);
}
.trial strong{color:var(--amber);font-weight:600}

footer{margin-top:var(--section);border-top:1px solid var(--hairline);padding:24px 0 40px;font-size:14px;color:var(--muted)}
footer .row{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 4px}
footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
.langs a{color:var(--muted)}
.langs a[aria-current]{color:var(--text);font-weight:600;text-decoration:none}
.legal{display:flex;flex-wrap:wrap;gap:0 16px;margin-left:-8px}
.langs ul{margin-right:-8px}
.copy{margin:8px 0 0}

.policy-head{max-width:calc(42rem + 2 * var(--gutter));display:flex;align-items:center;padding-block:20px}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:48px;color:var(--text);text-decoration:none;font:700 24px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.02em}
.brand img{width:48px;height:48px;border-radius:11px;box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06)}
.policy{max-width:calc(42rem + 2 * var(--gutter));padding-top:24px}
.policy h1,.policy h2{overflow-wrap:anywhere}
.policy h1{font-size:clamp(40px,7vw,56px);line-height:1.02}
.policy .updated{margin:12px 0 0;color:var(--muted);font-size:14px}
.policy h2{
  margin:40px 0 12px;padding-top:24px;border-top:1px solid var(--hairline);
  font:600 26px/1.15 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.01em;scroll-margin-top:16px;
}
.policy h2:target{color:var(--chalk)}
.policy p{margin:0 0 16px;overflow-wrap:anywhere}
.policy-page footer{margin-top:64px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .screens li{transition:none}
}