/* The static pages: pricing, terms, privacy and the rest. Same type, colours, light and header as
   the landing (src/app.css), so moving between them feels like one site; the tokens are copied
   rather than shared because these pages don't go through Vite and must not depend on the app
   bundle. Nothing here needs a script. */

/* The typeface: Geist and Geist Mono, latin and latin-ext, from /assets/fonts, under the SIL Open
   Font License (OFL.txt beside them). src/app.css and the docs' brand.css declare the same four
   faces, and site/test holds them together. Not preloaded: on a slow phone that drew the page
   later, not sooner. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* What the words are set in until Geist arrives: Arial, and Courier New for Geist Mono, scaled to
   Geist's widths and given its ascent and descent, so a line wraps at the same word either way
   and nothing moves when the swap comes. Geist isn't Arial in proportion: its t and f are a fifth
   wider than Arial's, its full stop and comma a quarter narrower. With one scale per weight a line
   was about 1% off on average, and a sentence heavy in t's broke a word earlier once Geist came:
   the terms moved 0.042 at 390px. So each weight is Arial seven times over, one face for each
   group of characters of about the same proportion and one for the rest, each scaled on its own,
   and a line is within about 0.4%. Fitted per weight on the pages' own text in Chromium, 5 Oct
   2026. On Linux they're Liberation Sans and Liberation Mono, which have the same widths, and they
   only match with text-rendering: geometricPrecision on the body (see there). */
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 100 249;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 97.0%;
  ascent-override: 103.61%;
  descent-override: 30.41%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 100 249;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 68.6%;
  ascent-override: 146.50%;
  descent-override: 43.00%;
  line-gap-override: 0%;
  unicode-range: U+0021, U+0028-0029, U+002C, U+002E, U+0031, U+0054, U+0059, U+0060;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 100 249;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 96.1%;
  ascent-override: 104.58%;
  descent-override: 30.70%;
  line-gap-override: 0%;
  unicode-range: U+0020, U+0022-0023, U+0025-0027, U+002B, U+0037, U+003C-003E, U+0040-0041, U+0043-0049, U+004B-004C, U+004F-0053, U+0055, U+0057-0058, U+005A, U+005E, U+0061, U+0065, U+007E, U+00A0, U+2014;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 100 249;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 98.5%;
  ascent-override: 102.03%;
  descent-override: 29.95%;
  line-gap-override: 0%;
  unicode-range: U+003B, U+003F, U+0042, U+004D-004E, U+0056, U+005F, U+006E-006F, U+0073, U+0075-0076, U+0078-0079, U+007C, U+2018-2019;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 100 249;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 102.6%;
  ascent-override: 97.95%;
  descent-override: 28.75%;
  line-gap-override: 0%;
  unicode-range: U+0024, U+002A, U+0033-0036, U+0038-003A, U+0062-0064, U+0067-006B, U+006D, U+0070-0072, U+0077, U+007A, U+2013, U+201C-201D;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 100 249;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 112.9%;
  ascent-override: 89.02%;
  descent-override: 26.13%;
  line-gap-override: 0%;
  unicode-range: U+0030, U+0032, U+004A, U+006C, U+007B, U+007D;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 100 249;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 115.2%;
  ascent-override: 87.24%;
  descent-override: 25.61%;
  line-gap-override: 0%;
  unicode-range: U+002D, U+002F, U+005B-005D, U+0066, U+0074;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 250 349;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 97.2%;
  ascent-override: 103.40%;
  descent-override: 30.35%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 250 349;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 71.3%;
  ascent-override: 140.95%;
  descent-override: 41.37%;
  line-gap-override: 0%;
  unicode-range: U+0021, U+0028-0029, U+002C, U+002E, U+0031, U+0054, U+0059, U+0060;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 250 349;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 96.8%;
  ascent-override: 103.82%;
  descent-override: 30.48%;
  line-gap-override: 0%;
  unicode-range: U+0020, U+0022-0023, U+0025-0027, U+002B, U+0037, U+003C-003E, U+0040-0041, U+0043-0049, U+004B-004C, U+004F-0053, U+0055, U+0057-0058, U+005A, U+005E, U+0061, U+0065, U+007E, U+00A0, U+2014;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 250 349;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 100.1%;
  ascent-override: 100.40%;
  descent-override: 29.47%;
  line-gap-override: 0%;
  unicode-range: U+003B, U+003F, U+0042, U+004D-004E, U+0056, U+005F, U+006E-006F, U+0073, U+0075-0076, U+0078-0079, U+007C, U+2018-2019;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 250 349;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 104.4%;
  ascent-override: 96.26%;
  descent-override: 28.26%;
  line-gap-override: 0%;
  unicode-range: U+0024, U+002A, U+0033-0036, U+0038-003A, U+0062-0064, U+0067-006B, U+006D, U+0070-0072, U+0077, U+007A, U+2013, U+201C-201D;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 250 349;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 114.7%;
  ascent-override: 87.62%;
  descent-override: 25.72%;
  line-gap-override: 0%;
  unicode-range: U+0030, U+0032, U+004A, U+006C, U+007B, U+007D;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 250 349;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 120.9%;
  ascent-override: 83.13%;
  descent-override: 24.40%;
  line-gap-override: 0%;
  unicode-range: U+002D, U+002F, U+005B-005D, U+0066, U+0074;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 350 449;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 97.4%;
  ascent-override: 103.18%;
  descent-override: 30.29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 350 449;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 74.0%;
  ascent-override: 135.81%;
  descent-override: 39.86%;
  line-gap-override: 0%;
  unicode-range: U+0021, U+0028-0029, U+002C, U+002E, U+0031, U+0054, U+0059, U+0060;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 350 449;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 97.5%;
  ascent-override: 103.08%;
  descent-override: 30.26%;
  line-gap-override: 0%;
  unicode-range: U+0020, U+0022-0023, U+0025-0027, U+002B, U+0037, U+003C-003E, U+0040-0041, U+0043-0049, U+004B-004C, U+004F-0053, U+0055, U+0057-0058, U+005A, U+005E, U+0061, U+0065, U+007E, U+00A0, U+2014;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 350 449;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 101.7%;
  ascent-override: 98.82%;
  descent-override: 29.01%;
  line-gap-override: 0%;
  unicode-range: U+003B, U+003F, U+0042, U+004D-004E, U+0056, U+005F, U+006E-006F, U+0073, U+0075-0076, U+0078-0079, U+007C, U+2018-2019;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 350 449;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 106.2%;
  ascent-override: 94.63%;
  descent-override: 27.78%;
  line-gap-override: 0%;
  unicode-range: U+0024, U+002A, U+0033-0036, U+0038-003A, U+0062-0064, U+0067-006B, U+006D, U+0070-0072, U+0077, U+007A, U+2013, U+201C-201D;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 350 449;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 116.6%;
  ascent-override: 86.19%;
  descent-override: 25.30%;
  line-gap-override: 0%;
  unicode-range: U+0030, U+0032, U+004A, U+006C, U+007B, U+007D;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 350 449;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 126.3%;
  ascent-override: 79.57%;
  descent-override: 23.36%;
  line-gap-override: 0%;
  unicode-range: U+002D, U+002F, U+005B-005D, U+0066, U+0074;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 450 549;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 97.7%;
  ascent-override: 102.87%;
  descent-override: 30.19%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 450 549;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 76.9%;
  ascent-override: 130.69%;
  descent-override: 38.36%;
  line-gap-override: 0%;
  unicode-range: U+0021, U+0028-0029, U+002C, U+002E, U+0031, U+0054, U+0059, U+0060;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 450 549;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 99.3%;
  ascent-override: 101.21%;
  descent-override: 29.71%;
  line-gap-override: 0%;
  unicode-range: U+0020, U+0022-0023, U+0025-0027, U+002B, U+0037, U+003C-003E, U+0040-0041, U+0043-0049, U+004B-004C, U+004F-0053, U+0055, U+0057-0058, U+005A, U+005E, U+0061, U+0065, U+007E, U+00A0, U+2014;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 450 549;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 104.2%;
  ascent-override: 96.45%;
  descent-override: 28.31%;
  line-gap-override: 0%;
  unicode-range: U+003B, U+003F, U+0042, U+004D-004E, U+0056, U+005F, U+006E-006F, U+0073, U+0075-0076, U+0078-0079, U+007C, U+2018-2019;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 450 549;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 108.7%;
  ascent-override: 92.46%;
  descent-override: 27.14%;
  line-gap-override: 0%;
  unicode-range: U+0024, U+002A, U+0033-0036, U+0038-003A, U+0062-0064, U+0067-006B, U+006D, U+0070-0072, U+0077, U+007A, U+2013, U+201C-201D;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 450 549;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 119.3%;
  ascent-override: 84.24%;
  descent-override: 24.73%;
  line-gap-override: 0%;
  unicode-range: U+0030, U+0032, U+004A, U+006C, U+007B, U+007D;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 450 549;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
  size-adjust: 132.7%;
  ascent-override: 75.73%;
  descent-override: 22.23%;
  line-gap-override: 0%;
  unicode-range: U+002D, U+002F, U+005B-005D, U+0066, U+0074;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 550 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold');
  size-adjust: 106.7%;
  ascent-override: 94.19%;
  descent-override: 27.65%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 550 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold');
  size-adjust: 85.7%;
  ascent-override: 117.27%;
  descent-override: 34.42%;
  line-gap-override: 0%;
  unicode-range: U+0021, U+0028-0029, U+002C, U+002E, U+0031, U+0054, U+0059, U+0060;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 550 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold');
  size-adjust: 102.2%;
  ascent-override: 98.34%;
  descent-override: 28.86%;
  line-gap-override: 0%;
  unicode-range: U+0020, U+0022-0023, U+0025-0027, U+002B, U+0037, U+003C-003E, U+0040-0041, U+0043-0049, U+004B-004C, U+004F-0053, U+0055, U+0057-0058, U+005A, U+005E, U+0061, U+0065, U+007E, U+00A0, U+2014;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 550 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold');
  size-adjust: 98.0%;
  ascent-override: 102.55%;
  descent-override: 30.10%;
  line-gap-override: 0%;
  unicode-range: U+003B, U+003F, U+0042, U+004D-004E, U+0056, U+005F, U+006E-006F, U+0073, U+0075-0076, U+0078-0079, U+007C, U+2018-2019;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 550 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold');
  size-adjust: 102.3%;
  ascent-override: 98.24%;
  descent-override: 28.84%;
  line-gap-override: 0%;
  unicode-range: U+0024, U+002A, U+0033-0036, U+0038-003A, U+0062-0064, U+0067-006B, U+006D, U+0070-0072, U+0077, U+007A, U+2013, U+201C-201D;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 550 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold');
  size-adjust: 115.8%;
  ascent-override: 86.79%;
  descent-override: 25.47%;
  line-gap-override: 0%;
  unicode-range: U+0030, U+0032, U+004A, U+006C, U+007B, U+007D;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 550 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold');
  size-adjust: 119.8%;
  ascent-override: 83.89%;
  descent-override: 24.62%;
  line-gap-override: 0%;
  unicode-range: U+002D, U+002F, U+005B-005D, U+0066, U+0074;
}
@font-face {
  font-family: 'Geist Mono Fallback';
  font-style: normal;
  font-weight: 100 900;
  src: local('Courier New'), local('CourierNewPSMT'), local('Liberation Mono'), local('LiberationMono'), local('Cousine');
  size-adjust: 100%;
  ascent-override: 100.5%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}

:root {
  --ink: #04050a;
  --ink-2: #0a0d15;
  --white: #ffffff;
  --text: #f2f4f8;
  --text-2: #b9c0cc;
  --text-3: #737b89;
  --blue: #4c7dff;
  --blue-deep: #2b59c3;
  --blue-soft: #9db6ff;
  --green: #35d399;
  --amber: #f5b455;
  --red: #ff5a5a;
  --line-1: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.28);
  --glass: rgba(10, 13, 21, 0.62);
  --glass-strong: rgba(8, 11, 18, 0.82);
  --font: 'Geist', 'Geist Fallback', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 48px;
  --measure: 760px;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; scroll-padding-top: 112px; }
/* geometricPrecision, not optimizeLegibility. Chrome on Linux otherwise rounds every letter's
   width to a whole pixel, Geist's one way and the fallback's another, so a line held in one face
   broke at another word in the other and the page moved when Geist came: 0.051 on the 404 page at
   900px. With it the widths are the ones the fallback was tuned to, as on a Mac. Kerning and
   ligatures stay on. */
body {
  margin: 0; color: var(--text); font-family: var(--font); font-weight: 400; font-size: 18px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}

/* The landing's light without its canvas: the blue wash from the top right, a fainter one from
   the bottom left, the stars, then grain and the vignette. Fixed, as the landing's stage is, so
   the page scrolls over it. */
body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(78% 64% at 97% -6%, rgba(28, 58, 176, 0.44) 0%, rgba(14, 30, 98, 0.22) 42%, rgba(4, 5, 10, 0) 74%),
    radial-gradient(62% 56% at -6% 106%, rgba(16, 30, 86, 0.4) 0%, rgba(4, 5, 10, 0) 72%),
    url('/assets/stars.svg') center / cover no-repeat;
}
body::after {
  background:
    radial-gradient(130% 110% at 50% 38%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--blue-soft); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A link in running text is underlined: its colour alone is too close to the text's to find. */
:is(p, li, td, dd) a:not(.btn) { text-decoration: underline; text-decoration-color: rgba(157, 182, 255, 0.45); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:is(p, li, td, dd) a:not(.btn):hover { text-decoration-color: currentColor; }
/* the contents list is all links, so it needs no mark */
.toc li a { text-decoration: none; }
.toc li a:hover { text-decoration: underline; }
::selection { background: rgba(76, 125, 255, 0.35); color: #fff; }
:focus-visible { outline: 1px solid var(--blue-soft); outline-offset: 3px; }
/* The first Tab stop, past the header to the page. Out of sight until it has the focus, as the
   docs' and the dashboard's are. */
/* Read by a screen reader, not shown: a label a table's corner cell would otherwise lack. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: fixed; top: 12px; left: 16px; z-index: 30; padding: 8px 14px; border-radius: 8px;
  background: var(--blue); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus, .skip:focus-visible { transform: none; }
main:focus { outline: none; }

/* header: fixed, and in exactly the landing's place (its .jc-tl and .jc-tr), so it holds still
   when you move between the landing and these pages. Once the page scrolls, a frosted band
   settles in behind it so the text passes under cleanly; at the top it is as clear as the
   landing's. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 28px var(--gutter);
}
.site-header::before {
  content: ''; position: absolute; inset: 0 0 -28px; z-index: -1; background: rgba(4, 5, 10, 0.6);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent); mask-image: linear-gradient(to bottom, #000 58%, transparent);
}
@supports (animation-timeline: scroll()) {
  .site-header::before { opacity: 0; animation: header-band linear both; animation-timeline: scroll(root); animation-range: 0 96px; }
}
@keyframes header-band { to { opacity: 1; } }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; line-height: 1; }
.brand:hover { text-decoration: none; }
.brand .light { font-weight: 300; color: var(--text-2); }
.brand svg { display: block; width: 26px; height: 26px; }
.site-nav {
  display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 0 6px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line-1);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.site-nav a { height: 36px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; color: var(--text-2); transition: color 300ms, background 300ms; }
.site-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.site-nav a.cta, .site-nav a.cta:hover { background: var(--white); color: #0a0d15; }
.site-nav a[aria-current="page"] { color: var(--text); }
/* the docs, next to signing in and tinted with the brand's blue, so they're found at a glance */
.site-nav a.docs { color: var(--text); background: rgba(76, 125, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(157, 182, 255, 0.3); }
.site-nav a.docs:hover { background: rgba(76, 125, 255, 0.26); }
.site-nav a.docs svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* page */
.page { max-width: var(--measure); margin: 0 auto; padding: 150px var(--gutter) 112px; }
.page--wide { max-width: 1080px; }
.eyebrow {
  margin: 0 0 18px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-soft);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--blue); opacity: 0.8; }
h1 { margin: 0 0 12px; font-weight: 300; font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
/* Measures are 52 and 80 of Geist's zeros (0.663em each), not 52ch and 80ch: ch is the zero of the
   face drawn now, so the fallback's narrower one wrapped the lines at other words until Geist came. */
.lede { margin: 0 0 8px; font-size: clamp(18px, 1.25vw, 21px); line-height: 1.55; color: var(--text-2); max-width: calc(52 * 0.663em); text-wrap: pretty; }
.meta, .updated { margin: 0 0 40px; font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.notice { margin: -24px 0 40px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--glass); color: var(--text); }
h2 { margin: 48px 0 12px; font-weight: 500; font-size: 24px; letter-spacing: -0.02em; line-height: 1.25; }
h3 { margin: 28px 0 8px; font-weight: 500; font-size: 18px; color: var(--text); }
/* break-word, so an address written out in the text wraps rather than widening a phone's page */
p, li { color: var(--text-2); text-wrap: pretty; overflow-wrap: break-word; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin: 0 0 6px; }
li::marker { color: var(--text-3); }
strong { color: var(--text); font-weight: 500; }
code { font-family: var(--mono); font-size: 0.92em; color: var(--text); background: rgba(255, 255, 255, 0.06); padding: 1px 6px; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--line-1); margin: 40px 0; }

/* The guides (/claude-code, /it, /compare and the rest): commands to copy, steps, and where a
   comparison's facts come from. */
pre { margin: 0 0 16px; padding: 14px 18px; overflow-x: auto; border: 1px solid var(--line-1); border-radius: 12px; background: var(--glass); font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--text); }
pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.sources li { font-size: 15.5px; }
.sources .checked-on { color: var(--text-3); }
/* A page with a table wider than its prose: the table takes the room, the prose keeps its measure.
   On a phone the table scrolls inside its frame, not the page. */
.page--table { max-width: 1080px; }
:where(.page--table) > :where(:not(.table-wrap)) { max-width: var(--measure); }
.page--table .table-wrap table { min-width: 880px; }
.page--table tbody th { white-space: normal; min-width: 150px; }

/* a list of the sections at the top of the long pages */
.toc { margin: 0 0 40px; padding: 18px 22px; border: 1px solid var(--line-1); border-radius: 14px; background: var(--glass); }

/* The panels are the landing's: frosted over the light behind them, with its highlight and shadow. */
.toc, .table-wrap, .note, .entity, .plan {
  backdrop-filter: blur(18px) saturate(115%); -webkit-backdrop-filter: blur(18px) saturate(115%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 80px rgba(0, 0, 0, 0.35);
}
.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.toc li { margin: 0 0 4px; font-size: 15.5px; break-inside: avoid; }
.toc a { color: var(--text-2); }
.toc a:hover { color: var(--text); }

/* tables */
.table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line-1); border-radius: 14px; background: var(--glass); }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line-1); color: var(--text-2); }
thead th { border-top: 0; color: var(--text); font-weight: 500; font-size: 14.5px; }
tbody th { color: var(--text); font-weight: 500; white-space: nowrap; }
td .mono, th .mono { font-family: var(--mono); font-size: 14.5px; }

/* the status page: the column, the maintenance and the incidents that status.js writes in when /status.json is there */
td.status { font-family: var(--mono); font-size: 14.5px; white-space: nowrap; }
td.status--up { color: var(--green); }
td.status--degraded { color: var(--amber); }
td.status--down { color: var(--red); }
.checked { margin: -8px 0 0; font-family: var(--mono); font-size: 13.5px; color: var(--text-3); }
.incident { border-top: 1px solid var(--line-1); padding: 14px 0; }
.incident:last-child { border-bottom: 1px solid var(--line-1); }
.incident h3 { margin: 0 0 4px; }
.incident .meta { margin: 0 0 8px; }
.incident ul { margin: 0; padding-left: 20px; }
.incident time { font-family: var(--mono); font-size: 13.5px; color: var(--text-3); margin-right: 8px; }
/* the 90 days of uptime: a row per component, a bar per day, oldest on the left */
.uptime { margin: 0 0 20px; }
.uptime-row { padding: 12px 0; border-top: 1px solid var(--line-1); }
.uptime-row:last-child { border-bottom: 1px solid var(--line-1); }
.uptime-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.uptime-percent { font-family: var(--mono); font-size: 14.5px; color: var(--text-2); white-space: nowrap; }
.uptime-bars { display: flex; gap: 2px; height: 28px; }
.uptime-bars .day { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--line-2); }
.uptime-bars .day--up { background: var(--green); }
.uptime-bars .day--degraded { background: var(--amber); }
.uptime-bars .day--down { background: var(--red); }
@media (max-width: 560px) { .uptime-bars { gap: 1px; } .uptime-bars .day { border-radius: 1px; } }

/* callouts */
.note { padding: 16px 20px; border: 1px solid var(--line-2); border-left: 2px solid var(--blue); border-radius: 12px; background: var(--glass); margin: 0 0 20px; }
.note p:last-child { margin: 0; }

/* pricing: the headline beside the landing's own frame of the three tiles at the gate */
.pricing-hero .intro { position: relative; z-index: 1; max-width: 520px; }
/* Placed against the window rather than the column (nothing between it and the page is
   positioned), flush with its right edge so nothing can scroll sideways, and sized so the first
   tile stays clear of the copy. The cards are frosted glass over it, so where they meet reads as depth. */
.pricing-art {
  position: absolute; z-index: 0; top: 86px; right: 0; width: min(760px, 52vw); height: auto; pointer-events: none;
  /* the render's own edges fade out: the ring runs off the top of the frame */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%), radial-gradient(70% 80% at 60% 44%, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%), radial-gradient(70% 80% at 60% 44%, #000 60%, transparent 100%);
  mask-composite: intersect;
}

/* pricing */
.plans { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0 48px; }
.plan { padding: 24px; border: 1px solid var(--line-1); border-radius: 18px; background: var(--glass); display: flex; flex-direction: column; gap: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.plan--featured { border-color: rgba(76, 125, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 60px rgba(76, 125, 255, 0.14), 0 24px 80px rgba(0, 0, 0, 0.35); }
.plan .name { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-soft); }
.plan .price { font-weight: 300; font-size: 44px; letter-spacing: -0.03em; line-height: 1.1; margin: 8px 0 0; color: var(--text); }
/* under the price rather than beside it: at the bigger size a long one would wrap mid-phrase */
.plan .price small { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.4; letter-spacing: 0; color: var(--text-3); font-weight: 400; }
.plan .for { margin: 4px 0 14px; font-size: 15.5px; color: var(--text-2); min-height: 2.6em; }
.plan ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; }
.plan li { margin: 0; padding-left: 22px; position: relative; }
.plan li::before { content: ''; position: absolute; left: 0; top: 9px; width: 12px; height: 6px; border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(-45deg); }
.plan li.no::before { border: 0; width: 10px; height: 1.5px; background: var(--text-3); transform: none; top: 11px; }
.plan li.no { color: var(--text-3); }
.plan .btn { margin-top: auto; }
/* Enterprise has no price and no column in the table: a card the width of the row under the three. */
.plan--wide { grid-column: 1 / -1; }
.plan--wide ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
.plan--wide .for { min-height: 0; }
.plan--wide .btn { align-self: flex-start; }
.plan .price--words { font-size: 32px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font-size: 15.5px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; cursor: pointer; transition: box-shadow 500ms, border-color 300ms;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--white); color: #0a0d15; }
.btn--primary:hover { box-shadow: 0 0 36px rgba(76, 125, 255, 0.35); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: var(--glass); color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--line-3); }
/* The comparison never scrolls sideways. The plan names stay in view while the rows pass under
   them, and Team, the plan most workspaces want, is picked out as its card is. */
.table-wrap:has(> .compare) { overflow: visible; }
/* So it never scrolls, it fits its column: set widths, and values that wrap. */
.compare { table-layout: fixed; }
.compare thead th:first-child { width: 24%; }
.compare thead th {
  position: sticky; top: 84px; z-index: 2; background: rgba(9, 12, 20, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.compare thead th:first-child { border-top-left-radius: 14px; }
.compare thead th:last-child { border-top-right-radius: 14px; }
.compare thead th:nth-of-type(3) { background: rgba(14, 22, 46, 0.96); color: var(--blue-soft); }
.compare td:nth-of-type(2) { background: rgba(76, 125, 255, 0.05); }
.compare th.plan-col { text-align: center; }
.compare td.v { text-align: center; font-family: var(--mono); font-size: 14.5px; color: var(--text); text-wrap: balance; }
.compare td.v.no { color: var(--text-3); }
.compare tbody th { font-weight: 400; color: var(--text-2); white-space: normal; }
.compare tr.group th { color: var(--text); font-weight: 500; font-size: 14.5px; padding-top: 18px; }

/* the small print under the cards, the first paragraph pulled up close to them */
.fine { margin: 0; max-width: calc(80 * 0.663em); font-size: 15.5px; line-height: 1.65; color: var(--text-3); }
.plans + .fine { margin-top: -20px; }
.fine + .fine { margin-top: 10px; }
/* what every plan has, between the comparison's heading and its table */
.fine:has(+ .table-wrap) { margin-bottom: 20px; }

/* questions: the heading holds its place while the answers, at a reading width, run beside it */
.questions { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.6fr); gap: 0 56px; align-items: start; margin: 72px 0 0; }
.questions h2 { margin: 12px 0 0; position: sticky; top: 124px; }

/* faq */
.faq details { border-top: 1px solid var(--line-1); padding: 14px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line-1); }
.faq summary { cursor: pointer; font-weight: 500; color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--text-3); font-weight: 300; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 12px 0 0; }

/* who we are */
.entity { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 18px 22px; border: 1px solid var(--line-1); border-radius: 14px; background: var(--glass); margin: 0 0 20px; font-size: 15.5px; }
.entity span { color: var(--text-2); }
.entity .name { color: var(--text); font-weight: 500; }

/* footer */
.site-footer { position: relative; border-top: 1px solid var(--line-1); padding: 32px var(--gutter) 48px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--text-3); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: var(--text); }
.site-footer .legal-entity { display: flex; flex-wrap: wrap; gap: 4px 10px; }

/* Moving between pages, and to and from the landing, is a crossfade rather than a cut. The
   header is in the same place on every page, so it holds still through it. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 340ms; animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); }

/* The panels rise in as they come into view, like the landing's copy. Nothing that is already on
   screen when the page opens moves. A panel is fully there once 160px of it is in view: a share of
   its height would leave a tall one, a plan on a phone, dim for as long as it is half on screen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plan, .table-wrap, .toc, .note, .entity, .faq { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry min(60%, 160px); }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* The not-found page (404.html) is one card, and Yun leans in from behind its bottom right
   corner. The picture is cut at its own right and bottom edges, and sits flush with the card's,
   which crop it there, so it looks round the corner rather than standing cut off. The copy keeps
   clear of it; on a phone it sits under the copy instead. Its height is set, and the width and
   height on the img hold its box, so nothing moves as it loads. */
.lost {
  position: relative; overflow: hidden; isolation: isolate; padding: 44px 44px 48px; border: 1px solid var(--line-1); border-radius: 24px;
  background: radial-gradient(90% 80% at 100% 100%, rgba(76, 125, 255, 0.2), rgba(76, 125, 255, 0) 62%), var(--glass);
  backdrop-filter: blur(18px) saturate(115%); -webkit-backdrop-filter: blur(18px) saturate(115%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 80px rgba(0, 0, 0, 0.45);
}
.lost h1 { margin-bottom: 14px; }
/* the heading runs above Yun's head; what comes after it stops short of Yun */
.lost-copy > :not(.eyebrow, h1) { max-width: calc(100% - 190px); }
.lost .lede { margin-bottom: 28px; }
.lost-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.lost-note { margin: 0; font-size: 15.5px; color: var(--text-3); }
.peek { position: absolute; right: 0; bottom: 0; z-index: -1; display: block; height: 300px; pointer-events: none; user-select: none; -webkit-user-select: none; }
.peek img { display: block; width: auto; height: 100%; }

@media (max-width: 1100px) {
  .pricing-art { opacity: 0.5; }
}
@media (max-width: 767px) {
  :root { --gutter: 22px; }
  .site-header { padding: 16px var(--gutter); }
  .brand { margin-top: 2px; }
  html { scroll-padding-top: 84px; }
  .pricing-art { position: relative; top: auto; right: auto; display: block; width: calc(100% + 2 * var(--gutter)); max-width: none; margin: -12px calc(-1 * var(--gutter)) -28px; opacity: 1; }
  .site-nav { height: 42px; padding: 0 4px; gap: 2px; }
  .site-nav a { height: 32px; padding: 0 11px; font-size: 13.5px; gap: 6px; }
  .site-nav a.docs svg { width: 14px; height: 14px; }
  .site-nav a.hide-sm { display: none; }
  h1 { font-size: 36px; }
  .toc ol { columns: 1; }
  .plans { grid-template-columns: 1fr; }
  .lost { padding: 30px 24px 196px; border-radius: 20px; }
  .lost-copy > :not(.eyebrow, h1) { max-width: none; }
  .lost .btn { height: 40px; padding: 0 16px; font-size: 15px; }
  .peek { height: 180px; }
  .plan--wide ul { grid-template-columns: 1fr; }
  .fine { font-size: 15px; }
  .plans + .fine { margin-top: -16px; }
  /* Three columns don't fit a phone, and the state was the one cut off. Each component is a row
     with its state beside its name, and what it is under both. */
  #components-table, #components-table thead, #components-table tbody { display: block; }
  #components-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--line-1); }
  #components-table thead tr { border-top: 0; }
  #components-table th, #components-table td { border-top: 0; }
  #components-table thead th:nth-child(2) { display: none; }
  #components-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .questions { grid-template-columns: 1fr; margin-top: 56px; }
  .questions h2 { position: static; margin: 0 0 8px; }
  /* On a phone each row is its name, then the four plans' values under the plan names. */
  .compare, .compare thead, .compare tbody { display: block; }
  .compare tr { display: grid; grid-template-columns: repeat(4, 1fr); }
  .compare thead { position: sticky; top: 64px; z-index: 2; }
  .compare thead tr { background: rgba(9, 12, 20, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 14px 14px 0 0; }
  .compare thead th { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px 6px; }
  .compare thead th:nth-of-type(3) { background: rgba(76, 125, 255, 0.08); }
  .compare thead th:first-child { display: none; }
  .compare tbody th { grid-column: 1 / -1; padding: 14px 16px 0; font-size: 14px; color: var(--text-3); }
  .compare td.v { border-top: 0; padding: 6px 4px 14px; font-size: 13px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  .page { padding-top: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}