@font-face { font-family: "Hanson"; src: url("../fonts/Hanson-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Highrise"; src: url("../fonts/HighriseFont-Bold-Demo.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --blue: #1f3bff;
  --bg: #f4f4f4;
  --white: #ffffff;
  --muted: #4a4f78;
  --red: #ff5f57;
  --gutter: clamp(16px, 2vw, 32px);
  --radius: clamp(14px, 1.8vw, 26px);
  --display: "Hanson", "Arial Black", sans-serif;
  --condensed: "Highrise", "Arial Narrow", sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--blue); font-family: var(--mono); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.label { font-family: var(--condensed); font-weight: 700; text-transform: uppercase; font-size: clamp(15px, 1.3vw, 19px); }

/* Hero */
.hero { position: relative; margin: var(--gutter); height: calc(100svh - 2 * var(--gutter)); min-height: 620px; border-radius: var(--radius); overflow: hidden; color: var(--white); background: #000; }
.cuts, .cuts img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cuts img { visibility: hidden; }
.cuts img.on { visibility: visible; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .4), rgb(0 0 0 / 0) 30%, rgb(0 0 0 / .78) 100%); pointer-events: none; }
.hero-in { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: var(--gutter); }
.badge { display: block; width: clamp(58px, 6vw, 84px); height: auto; margin-bottom: clamp(16px, 2.4vh, 26px); }
.hero-copy { margin-top: auto; }
.hero h1 { font-size: clamp(30px, 5vw, 76px); max-width: 15ch; margin-bottom: 14px; }
.hero-copy > p { max-width: 46ch; margin: 0 0 20px; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.5; }
.wordmark { margin: 0; }
.wordmark svg { width: 100%; height: auto; }

/* Signup */
.signup { position: relative; display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.signup input[type="email"] { flex: 1 1 210px; min-width: 0; height: 54px; padding: 0 22px; border: 0; border-radius: 99px; background: var(--white); color: var(--blue); font: 16px var(--mono); }
.signup input[type="email"]::placeholder { color: var(--muted); }
.signup button { flex: 1 0 auto; height: 54px; padding: 0 26px; border: 0; border-radius: 99px; background: var(--blue); color: var(--white); font: 700 13px var(--display); text-transform: uppercase; cursor: pointer; }
.signup button:disabled { opacity: .6; cursor: default; }
.signup :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.trap { position: absolute; left: -9999px; }
.note { flex: 0 0 100%; margin: 0; font-size: 13px; line-height: 1.4; }
.note:empty { display: none; }
.signup.done input, .signup.done button { display: none; }
.signup.done .note { font-size: clamp(14px, 1.3vw, 17px); font-weight: 700; }

/* Statement */
.statement { padding: clamp(56px, 10vh, 130px) var(--gutter); }
.statement h2 { font-size: clamp(30px, 6.4vw, 104px); }
.statement p { max-width: 50ch; margin: 24px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Features */
.features-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 0 var(--gutter) 22px; }
.features-head h2 { font-size: clamp(24px, 3.4vw, 52px); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); padding: 0 var(--gutter); }
.visual { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: radial-gradient(circle at 50% 40%, #2a2a2e, #050505 75%); }
.visual .bg { position: absolute; inset: 7% 0; width: 100%; height: 86%; object-fit: contain; }
/* A video can't have the stills' see-through corners, so it's sized to the phone and its corners rounded to match. */
.visual video.phone { left: 50%; right: auto; width: auto; aspect-ratio: 700 / 1436; transform: translateX(-50%); border-radius: 18.6% / 9.1%; background: #000; }
.soon { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 11px; border-radius: 99px; background: var(--white); font: 700 14px var(--condensed); text-transform: uppercase; }
.text { display: grid; grid-template-columns: 34px 1fr; padding: 14px 4px 24px; }
.num { padding-top: 2px; font-size: 11px; }
.text h3 { font-size: clamp(15px, 1.5vw, 21px); margin-bottom: 8px; }
.text p { grid-column: 2; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

/* Final signup */
.end { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: end; margin: clamp(48px, 8vh, 110px) var(--gutter) var(--gutter); padding: clamp(28px, 5vw, 72px); border-radius: var(--radius); background: var(--blue); color: var(--white); }
.end h2 { font-size: clamp(28px, 5vw, 80px); }
.end p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; }
.end .note { margin: 0; }
.end .signup button { background: var(--white); color: var(--blue); }

.fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 0 var(--gutter) var(--gutter); font-size: 11px; line-height: 1.5; }

/* Privacy */
.doc { padding: var(--gutter); }
.home { display: block; width: min(320px, 70%); }
.home svg { width: 100%; height: auto; }
.doc main { max-width: 60ch; margin-top: clamp(48px, 9vh, 96px); padding-bottom: 48px; }
.doc h1 { font-size: clamp(30px, 5vw, 60px); margin-bottom: 24px; }
.doc h2 { font-size: 16px; margin: 32px 0 10px; }
.doc p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.updated { margin-top: 32px !important; font-size: 12px !important; }

/* Motion */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1200px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid, .end { grid-template-columns: 1fr; } .features-head { display: block; } .features-head .label { display: block; margin-top: 8px; } }