/* 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;
}

: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', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 48px;
  --measure: 720px;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; scroll-padding-top: 112px; }
body {
  margin: 0; color: var(--text); font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* 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; }
::selection { background: rgba(76, 125, 255, 0.35); color: #fff; }
:focus-visible { outline: 1px solid var(--blue-soft); outline-offset: 3px; }

/* 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: 15px; 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: 24px; height: 24px; }
.site-nav {
  display: inline-flex; align-items: center; gap: 4px; height: 44px; 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: 32px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 13px; 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); }

/* 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: 11px; 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(36px, 5vw, 60px); letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.lede { margin: 0 0 8px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--text-2); max-width: 52ch; text-wrap: pretty; }
.meta { margin: 0 0 40px; font-family: var(--mono); font-size: 12px; 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: 22px; letter-spacing: -0.02em; line-height: 1.25; }
h3 { margin: 28px 0 8px; font-weight: 500; font-size: 16px; color: var(--text); }
p, li { color: var(--text-2); text-wrap: pretty; }
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; }

/* 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: 14px; 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: 14px; }
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: 13px; }
tbody th { color: var(--text); font-weight: 500; white-space: nowrap; }
td .mono, th .mono { font-family: var(--mono); font-size: 13px; }

/* 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: 13px; 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: 12px; 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: 12px; color: var(--text-3); margin-right: 8px; }

/* 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: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-soft); }
.plan .price { font-weight: 300; font-size: 40px; letter-spacing: -0.03em; line-height: 1.1; margin: 8px 0 0; color: var(--text); }
.plan .price small { font-size: 14px; letter-spacing: 0; color: var(--text-3); font-weight: 400; margin-left: 4px; }
.plan .for { margin: 4px 0 14px; font-size: 14px; 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: 14px; }
.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; }
.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: 14px; 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; }
.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: 13px; color: var(--text); white-space: nowrap; }
.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: 13px; padding-top: 18px; }

/* the small print under the cards */
.fine { margin: -20px 0 0; max-width: 80ch; font-size: 14px; line-height: 1.65; color: var(--text-3); }

/* 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: 20px; 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: 14px; }
.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: 12.5px; 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. */
@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 60%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

@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: 40px; }
  .site-nav a { padding: 0 10px; font-size: 12px; }
  .site-nav a.hide-sm { display: none; }
  h1 { font-size: 34px; }
  .toc ol { columns: 1; }
  .plans { grid-template-columns: 1fr; }
  .fine { margin-top: -16px; font-size: 13.5px; }
  .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 three plans' values under the plan names. */
  .compare, .compare thead, .compare tbody { display: block; }
  .compare tr { display: grid; grid-template-columns: repeat(3, 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: 12.5px; color: var(--text-3); }
  .compare td.v { border-top: 0; padding: 6px 6px 14px; font-size: 12.5px; line-height: 1.4; white-space: normal; }
  .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; }
}