/* Generated by gtm/_tools/site.py from packages/ui/src/tokens.ts. Do not edit. */
:root {
  --bg: #111110;
  --surface: #1B1B1A;
  --surfaceRaised: #2C2C2A;
  --surfaceSunken: #111110;
  --border: #2C2C2A;
  --borderStrong: #454542;
  --text: #F7F7F5;
  --textSecondary: #CDCDC8;
  --textMuted: #A8A8A3;
  --success: #5FD48E;
  --successSoft: #123521;
  --warning: #F0C060;
  --warningSoft: #3A2B08;
  --danger: #F2766D;
  --onDanger: #2B0806;
  --dangerSoft: #3E1512;
  --overlay: rgba(0, 0, 0, 0.6);
  --accent: #2DD4BF;
  --onAccent: #052E2B;
  --accentSoft: rgba(45, 212, 191, 0.18);
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 20px;
  --sp6: 24px; --sp8: 32px; --sp10: 40px; --sp12: 48px; --sp16: 64px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  color-scheme: dark light;
}
@media (prefers-color-scheme: light) {
  :root {
  --bg: #F7F7F5;
  --surface: #FFFFFF;
  --surfaceRaised: #FFFFFF;
  --surfaceSunken: #EFEFEC;
  --border: #E3E3DF;
  --borderStrong: #CDCDC8;
  --text: #111110;
  --textSecondary: #5F5F5B;
  --textMuted: #7F7F7A;
  --success: #1E7B46;
  --successSoft: #DDF3E5;
  --warning: #8A5A00;
  --warningSoft: #FBEFD2;
  --danger: #B3261E;
  --onDanger: #FFFFFF;
  --dangerSoft: #FADCDA;
  --overlay: rgba(17, 17, 16, 0.45);
  --accent: #0F766E;
  --onAccent: #FFFFFF;
  --accentSoft: rgba(15, 118, 110, 0.12);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size:16px;line-height:22px;font-weight:400;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--sp5); }
header.top { border-bottom: 1px solid var(--border); background: var(--surface); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: var(--sp4); }
.wordmark { display: inline-flex; align-items: center; gap: var(--sp2); color: var(--text); text-decoration: none; font-size:18px;line-height:24px;font-weight:600; }
.wordmark .dot { width: 12px; height: 12px; border-radius: var(--r-pill); background: var(--accent); }
nav.site a { color: var(--textSecondary); text-decoration: none; margin-left: var(--sp4); font-size:14px;line-height:20px;font-weight:400; padding: var(--sp2) 0; display: inline-block; min-height: 44px; line-height: 28px; }
nav.site a:hover, nav.site a[aria-current] { color: var(--text); }
.hero { padding: var(--sp12) 0 var(--sp8); }
.hero h1 { font-size:34px;line-height:40px;font-weight:700;letter-spacing:-0.4px; margin: 0 0 var(--sp4); max-width: 24ch; }
.hero p.sub { font-size:18px;line-height:24px;font-weight:600; font-weight: 400; color: var(--textSecondary); margin: 0 0 var(--sp5); max-width: 56ch; }
.price { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp3); background: var(--accentSoft); border: 1px solid var(--accent); border-radius: var(--r-lg); padding: var(--sp3) var(--sp4); font-size:16px;line-height:22px;font-weight:600; }
.price .tag { color: var(--accent); }
.soon { margin-top: var(--sp5); color: var(--textMuted); font-size:14px;line-height:20px;font-weight:400; }
section { padding: var(--sp8) 0; border-top: 1px solid var(--border); }
section h2 { font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.2px; margin: 0 0 var(--sp5); }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp5); }
figure.shot { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
/* Phone frames (780 x 1688) and desktop frames (1512 x 793) share a row, so the image is
   shown whole inside a fixed-height box rather than cropped to one aspect ratio. */
figure.shot .frame { height: 420px; padding: var(--sp4); background: var(--surfaceSunken); border-bottom: 1px solid var(--border); }
figure.shot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; }
figure.shot figcaption { padding: var(--sp3) var(--sp4) var(--sp4); margin-top: auto; }
figure.shot figcaption b { display: block; font-size:16px;line-height:22px;font-weight:600; margin-bottom: var(--sp1); }
figure.shot figcaption span { color: var(--textSecondary); font-size:14px;line-height:20px;font-weight:400; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp5); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp5); }
.card h3 { font-size:18px;line-height:24px;font-weight:600; margin: 0 0 var(--sp2); }
.card p { margin: 0; color: var(--textSecondary); }
ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp3); max-width: 64ch; }
ol.steps li { position: relative; padding-left: var(--sp10); min-height: 32px; }
ol.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--accent); color: var(--onAccent); display: grid; place-items: center; font-size:16px;line-height:22px;font-weight:600; }
.plain { max-width: 64ch; }
.plain p { margin: 0 0 var(--sp3); }
.plain .big { font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.2px; margin-bottom: var(--sp3); }
.note { background: var(--surfaceSunken); border-radius: var(--r-md); padding: var(--sp4); color: var(--textSecondary); font-size:14px;line-height:20px;font-weight:400; max-width: 64ch; }
footer.bottom { border-top: 1px solid var(--border); padding: var(--sp8) 0 var(--sp12); color: var(--textMuted); font-size:14px;line-height:20px;font-weight:400; }
footer.bottom .links a { margin-right: var(--sp4); }
footer.bottom p { margin: 0 0 var(--sp2); max-width: 72ch; }
/* policy pages */
article.doc { max-width: 68ch; padding: var(--sp8) 0 var(--sp12); }
article.doc h1 { font-size:34px;line-height:40px;font-weight:700;letter-spacing:-0.4px; margin: 0 0 var(--sp5); }
article.doc h2 { font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.2px; margin: var(--sp8) 0 var(--sp3); }
article.doc h3 { font-size:18px;line-height:24px;font-weight:600; margin: var(--sp6) 0 var(--sp2); }
article.doc p, article.doc li { margin: 0 0 var(--sp3); }
article.doc ul { padding-left: 1.2em; }
article.doc code { background: var(--surfaceSunken); border-radius: var(--r-sm); padding: 0 4px; font-size: 0.95em; }
article.doc .meta { color: var(--textMuted); font-size:14px;line-height:20px;font-weight:400; margin-bottom: var(--sp6); }
@media (max-width: 600px) {
  .hero { padding-top: var(--sp8); }
  .hero h1 { font-size: 28px; line-height: 34px; }
  figure.shot .frame { height: 360px; }
  header.top .wrap { flex-wrap: wrap; padding-top: var(--sp2); padding-bottom: var(--sp2); }
  nav.site a { margin-left: 0; margin-right: var(--sp4); }
}