/* Inter, served from this site. No visitor is sent to another company to
   fetch a font. One variable file carries every weight the page uses. */
@font-face{
  font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2");
}
:root{
  --navy:#0B1124; --cloud:#F3F3FB; --orange:#F4B443; --glow:#142449;
  --card:#151E3A; --haze:#8F9BBA; --verified:#3CCB8B;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gutter:16px; --max:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--navy); color:var(--cloud); font-family:var(--sans);
  font-size:17px; line-height:26px; font-variant-numeric:tabular-nums; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(56rem 36rem at 10% -10%, var(--glow) 0%, transparent 70%);
}
main,header,footer{position:relative; z-index:1}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
a{color:var(--cloud)}
a:focus-visible{outline:2px solid var(--orange); outline-offset:3px; border-radius:4px}
h1,h2,h3{margin:0} p{margin:0}

.label{font-size:12px; line-height:16px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--haze)}
.small{font-size:14px; line-height:21px; font-weight:500; color:var(--haze)}

/* Header: lockup top left. */
header{padding:28px 0 0}
header img{display:block; width:170px; height:auto; animation:rise 900ms cubic-bezier(.65,0,.35,1) both}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){header img{animation:none}}

/* Hero: copy left, film right. */
.hero{padding:36px 0 44px}
.hero-grid{display:grid; gap:36px; align-items:center}
h1{font-size:clamp(30px, 7.2vw, 38px); line-height:1.08; font-weight:800; letter-spacing:-.03em}
.tagline{margin-top:16px; font-size:17px; line-height:26px; font-weight:700; color:var(--cloud)}
.intro{margin-top:14px; max-width:46ch; color:var(--haze)}
.btn{display:inline-block; margin-top:24px; background:var(--orange); color:var(--navy);
  font-size:17px; line-height:26px; font-weight:700; text-decoration:none;
  padding:13px 26px; border-radius:999px}
.btn:hover{filter:brightness(1.06)}
.btn.secondary{background:transparent; color:var(--cloud); border:1px solid var(--haze); margin-left:10px}
.btn.secondary:hover{border-color:var(--cloud); filter:none}

.demo{display:block; width:100%; max-width:286px; height:auto; margin:0 auto;
  border-radius:18px; border:1px solid var(--card); background:var(--card)}
.demo-note{margin:12px auto 0; max-width:286px; text-align:center}

/* Three points, side by side. */
.points{display:grid; gap:14px; padding:40px 0; border-top:1px solid var(--card)}
.point{background:var(--card); border-radius:14px; padding:22px 20px}
.point h2{font-size:18px; line-height:25px; font-weight:700; letter-spacing:-.01em; margin-bottom:9px}
.point p{color:var(--haze); font-size:15px; line-height:23px}
.point strong{color:var(--cloud); font-weight:700}
.status{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.tag{font-size:11px; line-height:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px; border:1px solid currentColor}
.tag.v{color:var(--verified)} .tag.l{color:var(--orange)} .tag.u{color:var(--haze)}

.never{padding:28px 0 36px; border-top:1px solid var(--card)}
.never p{color:var(--haze); font-size:15px; line-height:23px}
.never strong{color:var(--cloud); font-weight:700}

footer{padding:28px 0 48px; border-top:1px solid var(--card); color:var(--haze)}
footer p + p{margin-top:10px}
/* The company line and the note under it are ordinary weight: they are to be read, not to stand out. */
footer .small{font-weight:400}
/* The company line stays on one line wherever the screen is wide enough to
   hold it: a laptop or a desktop. On a phone or an upright tablet it has to
   wrap, because one line there would be too small to read or run off the screen. */
@media (min-width:1024px){
  footer .wrap > p:first-of-type{white-space:nowrap; font-size:11.75px}
}
@media (min-width:1180px){
  footer .wrap > p:first-of-type{font-size:13px}
}
footer nav{margin:12px 0}
footer nav a{color:var(--haze); font-size:14px; font-weight:500; margin-right:18px}

@media (min-width:860px){
  body{font-size:18px; line-height:28px}
  header{padding:34px 0 0}
  header img{width:195px}
  .hero{padding:26px 0 52px}
  .hero-grid{grid-template-columns:1fr 320px; gap:60px}
  /* One line, which is what the headline is for. */
  h1{font-size:clamp(38px, 3.7vw, 48px); white-space:nowrap}
  .points{grid-template-columns:repeat(3,1fr); gap:18px; padding:44px 0}
}

.status-line{margin-bottom:14px}
header a{display:inline-block}

/* Pages of text and the registration form. One column, easy to read on a phone. */
.page{max-width:640px; padding-top:36px; padding-bottom:56px}
.page h1{white-space:normal; font-size:clamp(30px, 7.2vw, 40px)}
.page h2{font-size:20px; line-height:28px; font-weight:700; letter-spacing:-.01em; margin:34px 0 10px}
.page p{color:var(--haze); margin-top:14px}
.page p strong{color:var(--cloud); font-weight:700}
.page .lead{color:var(--cloud)}
.page ul{color:var(--haze); margin:12px 0 0; padding-left:22px}
.page li{margin-top:6px}

form{margin-top:28px}
.field{margin-top:20px}
.field label, .field .q{display:block; font-size:15px; line-height:22px; font-weight:700; color:var(--cloud)}
.field .hint{display:block; margin-top:3px; font-size:14px; line-height:21px; font-weight:500; color:var(--haze)}
.field input[type=text], .field input[type=tel], .field select{
  display:block; width:100%; margin-top:8px; padding:13px 14px; font:inherit; color:var(--cloud);
  background:var(--card); border:1px solid var(--haze); border-radius:12px; appearance:none; -webkit-appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--haze) 50%),linear-gradient(135deg,var(--haze) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:40px}
.field input:focus-visible, .field select:focus-visible, .tick input:focus-visible, button:focus-visible{
  outline:2px solid var(--orange); outline-offset:2px}
.tick{display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; margin-top:20px}
.tick input{width:24px; height:24px; margin:2px 0 0; accent-color:var(--orange)}
.tick label{font-size:15px; line-height:23px; color:var(--cloud); font-weight:500}
button.btn{border:0; cursor:pointer; font-family:inherit}
.fine{margin-top:16px; font-size:14px; line-height:21px; font-weight:500; color:var(--haze)}
/* Not for people. A script that fills every box fills this one too, and is turned away. */
.leave-empty{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}