/* site/public/site.css */
/* The landing, pricing and status pages; the docs are Starlight's, themed by src/styles/docs.css.
   Dark first, and the light theme is the same tokens under prefers-color-scheme: light. One accent, a signal orange,
   for the primary button, prices and the unit squares, and nothing else; zinc neutrals, never pure black or white.
   Type: Geist and Geist Mono (src/layouts/Site.astro loads them); prices, ids and code are mono.
   Shapes: surfaces have 12px corners, buttons are pills, and the unit squares keep the mark's own 2px corner.
   Layers: the sticky navigation is 10, the skip link 20. */

/* ---- Tokens, base and frame ---- */
:root {
  color-scheme: dark;
  --bg: #0b0b0d;
  --surface: #121215;
  --surface-2: #19191c;
  --line: #26262a;
  --line-strong: #3a3a40;
  --text: #f4f4f5;
  --text-2: #a1a1aa;
  --text-3: #8a8a93;
  --accent: #e27b30;
  --accent-ink: #e27b30;
  --on-accent: #131315;
  --tint: color-mix(in oklab, var(--accent) 7%, var(--surface));
  --tint-line: color-mix(in oklab, var(--accent) 24%, var(--line));
  --shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 32px 64px -32px rgb(4 4 6 / 0.7);
  --radius: 12px;
  --sans: "Geist Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 7.5vw, 104px);
  --h2: clamp(1.875rem, 1.25rem + 1.9vw, 2.75rem);
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #fafafa;
    --surface: #f3f3f4;
    --surface-2: #ebebed;
    --line: #e2e2e5;
    --line-strong: #cfcfd4;
    --text: #18181b;
    --text-2: #52525b;
    --text-3: #63636b;
    --accent-ink: #a6541b;
    --tint: color-mix(in oklab, var(--accent) 6%, var(--surface));
    --tint-line: color-mix(in oklab, var(--accent) 32%, var(--line));
    --shadow: 0 32px 64px -36px rgb(24 24 27 / 0.22);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  display: flex; flex-direction: column; min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
main { flex: 1 0 auto; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
code { font-family: var(--mono); font-size: 0.9em; color: var(--text); }
pre code { font-size: inherit; color: inherit; }
::selection { background: var(--line-strong); color: var(--text); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.wrap { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.section { padding-block: var(--section); }
.section h2 { font-size: var(--h2); letter-spacing: -0.035em; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.55; color: var(--text-2); max-width: 60ch; }
.muted { color: var(--text-3); }
p a:not(.btn):not(.go) { text-decoration: underline 1px var(--line-strong); text-underline-offset: 3px; transition: text-decoration-color 160ms; }
p a:not(.btn):not(.go):hover { text-decoration-color: currentColor; }

.skip { position: absolute; left: 16px; top: -64px; z-index: 20; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg); text-decoration: none; }
.skip:focus { top: 12px; }

.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in oklab, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) { .nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav-row { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 30px); height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--text); text-decoration: none; white-space: nowrap; }
.nav nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 30px); margin-left: auto; font-size: 0.9375rem; }
/* On a phone the brand is a row of its own, and the links and Sign in the row under it, so that none of them pushes the
   page wider and they are seen in the order they are focused. */
@media (max-width: 559px) {
  .nav-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; height: auto; padding-block: 12px 10px; gap: 10px 12px; }
  .brand { grid-column: 1 / -1; justify-self: start; }
  .nav nav { margin-left: 0; }
}
.nav nav a:not(.btn) { color: var(--text-2); text-decoration: none; transition: color 160ms; }
.nav nav a:not(.btn):hover, .nav nav a[aria-current="page"] { color: var(--text); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px;
  font: 500 0.9375rem/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in oklab, var(--accent) 86%, #fafafa); }
.btn-quiet { height: 36px; padding: 0 16px; border-color: var(--line-strong); color: var(--text); font-size: 0.875rem; }
.btn-quiet:hover { background: var(--surface-2); }
.go { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap; }
.go .icon { transition: transform 220ms var(--ease); }
.go:hover .icon { transform: translateX(3px); }

.panel { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel-head { padding: 12px 20px; border-bottom: 1px solid var(--line); font: 400 0.8125rem/1.4 var(--mono); color: var(--text-3); }
.code {
  margin: 0; padding: 20px; font: 400 0.8125rem/1.7 var(--mono); color: var(--text-2);
  white-space: pre-wrap; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.code .ln { display: block; padding-left: calc(var(--hang, 2) * 1ch); text-indent: calc(var(--hang, 2) * -1ch); }
.code .w { white-space: nowrap; }
@media (max-width: 639px) { .code { white-space: pre; } }
.t-prompt, .t-key, .t-dim, .t-comment { color: var(--text-3); }
.t-cmd, .t-id { color: var(--text); }
.t-price { color: var(--accent-ink); }

.page-head { padding-block: clamp(56px, 7vw, 96px) clamp(32px, 4vw, 48px); }
.page-head h1 { font-size: clamp(2.5rem, 1.5rem + 3vw, 3.75rem); line-height: 1.04; letter-spacing: -0.04em; }
.page-head .lead { margin-top: 20px; }
.page-body { padding-bottom: var(--section); }

.foot { border-top: 1px solid var(--line); padding-block: 28px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.foot .brand { font-size: 0.9375rem; }
.foot nav { display: flex; gap: 24px; font-size: 0.875rem; }
.foot nav a { color: var(--text-2); text-decoration: none; transition: color 160ms; }
.foot nav a:hover { color: var(--text); }

@media (max-width: 480px) {
  .brand { gap: 8px; }
  .nav nav { font-size: 0.875rem; gap: 12px; }
  .btn-quiet { padding: 0 12px; }
  .code { padding: 16px; font-size: 0.75rem; }
}

/* ---- Landing ---- */
.hero { padding-top: clamp(48px, 6.5vw, 88px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 3.5rem); line-height: 1.02; letter-spacing: -0.045em; }
.hero .lead { margin-top: 24px; max-width: 36ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: 64px; }
  .hero h1 { font-size: clamp(2.5rem, 4.6vw - 2px, 3.625rem); }
}

.units { display: flex; gap: clamp(4px, 0.5vw, 6px); margin: 0 0 16px 2px; }
.units span { position: relative; flex: 0 1 10px; min-width: 0; aspect-ratio: 1; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.units span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .units span::after { animation: unit-done 420ms var(--ease) both; animation-delay: calc(400ms + var(--rank) * 105ms); }
}
@keyframes unit-done { from { opacity: 0; transform: scale(0.3); } }

.timeline { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 44px; max-width: 48rem; counter-reset: step; }
.timeline li { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0 24px; counter-increment: step; }
.timeline li::before { content: counter(step); font: 500 0.9375rem/1.75rem var(--mono); color: var(--text); text-align: center; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem - 0.5px); top: 2.25rem; bottom: -2.25rem; width: 1px; background: var(--line-strong); }
.timeline h3 { font-size: 1.3125rem; line-height: 1.75rem; letter-spacing: -0.025em; }
.timeline p { margin-top: 8px; font-size: 1.0625rem; color: var(--text-2); max-width: 60ch; }

.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 48px; }
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.card { container-type: inline-size; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 32px); }
.card.tinted { background: var(--tint); border-color: var(--tint-line); }
.card-body { display: grid; grid-template-rows: auto auto 1fr; height: 100%; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.card h3 { font: 500 1rem/1.4 var(--mono); letter-spacing: 0; }
.avail { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; line-height: 1.4; color: var(--text-2); white-space: nowrap; }
.card.launching { border-style: dashed; }
.card.launching h3, .card.launching .price-value { color: var(--text-2); }
.card.launching .avail { color: var(--text-3); }
.spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px; margin: 16px 0 0; font-size: 0.9375rem; }
.spec dt { color: var(--text-3); }
.spec dd { margin: 0; color: var(--text-2); max-width: 62ch; }
.price { display: flex; align-self: end; align-items: baseline; gap: 10px; margin-top: 32px; white-space: nowrap; }
@container (min-width: 720px) {
  .card-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 56px; }
  .card-head { grid-column: 1 / -1; }
  .price { grid-column: 2; grid-row: 2; margin-top: 0; }
}
.price-value { font: 500 clamp(2.25rem, 1.7rem + 1.6vw, 3rem)/1 var(--mono); letter-spacing: -0.04em; color: var(--accent-ink); }
.price-per { font-size: 0.875rem; color: var(--text-3); }
.cards-note { margin-top: 24px; font-size: 0.9375rem; color: var(--text-2); max-width: 65ch; }
.cards-note .go { margin-left: 4px; }

.shot { margin: clamp(56px, 7vw, 96px) 0 0; }
.shot-frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.shot picture { display: block; }
.shot img { width: 100%; height: auto; }
.shot figcaption { margin-top: 14px; font-size: 0.875rem; color: var(--text-3); }

.guarantee { background: var(--surface); border-block: 1px solid var(--line); }
.statement { font-size: clamp(2.5rem, 1rem + 4.6vw, 5.25rem); line-height: 1; letter-spacing: -0.05em; max-width: 18ch; }
.guarantee .lead { margin-top: 28px; }
.figures-intro { margin-top: clamp(40px, 5vw, 64px); color: var(--text-2); }
.figures { display: grid; margin: 20px 0 0; border-top: 1px solid var(--line-strong); }
.figures > div { padding: 28px 24px 4px 0; }
.figures > div + div { border-top: 1px solid var(--line); }
.figures dt { font: 500 clamp(3rem, 2rem + 3vw, 4.75rem)/1 var(--mono); letter-spacing: -0.05em; }
.figures dt small { font-size: 0.4em; letter-spacing: -0.02em; color: var(--text-2); }
.figures dd { margin: 14px 0 0; color: var(--text-2); max-width: 30ch; }
@media (min-width: 768px) {
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figures > div + div { border-top: 0; border-left: 1px solid var(--line); padding-left: 32px; }
}
.fine { margin-top: clamp(40px, 5vw, 64px); color: var(--text-2); max-width: 65ch; }
.fine .go { margin-left: 4px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: 64px; } }
.split .lead { margin-top: 20px; }
.contract { display: grid; gap: 14px; margin: 32px 0 36px; }
.contract div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 16px; align-items: baseline; }
.contract dt { font: 500 0.875rem/1.5 var(--mono); color: var(--text); }
.contract dd { margin: 0; color: var(--text-2); }
@media (max-width: 560px) { .contract div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.yaml .code { color: var(--text); }
.yaml .t-key { color: var(--text-2); }
@media (max-width: 1023px) { .yaml .ln { padding-left: 4ch; text-indent: -4ch; } }

.not .wrap > * { max-width: 65ch; }
.not p { margin-top: 20px; font-size: 1.0625rem; color: var(--text-2); }

.supply { background: var(--surface); border-block: 1px solid var(--line); }
.supply .split { align-items: center; }
.supply .contract { margin-bottom: 0; }
.supply .panel { background: var(--bg); }
.installs { display: grid; gap: 16px; }

/* ---- Pricing and status ---- */
.price-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.prices { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prices th { padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; font-size: 0.8125rem; color: var(--text-3); white-space: nowrap; }
.prices td { padding: 22px 24px; vertical-align: baseline; color: var(--text-2); }
.prices tr + tr td { border-top: 1px solid var(--line); }
.prices .id { font-family: var(--mono); color: var(--text); white-space: nowrap; }
.prices .unit { max-width: 52ch; }
.prices .usd { font: 500 1.375rem/1.2 var(--mono); letter-spacing: -0.03em; color: var(--accent-ink); white-space: nowrap; }
.prices .needs { white-space: nowrap; }
.prices .launching .id, .prices .launching .usd { color: var(--text-2); }
.prices .launching .avail { color: var(--text-3); }
@media (max-width: 767px) {
  .prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prices tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; gap: 10px 16px; padding: 20px; }
  .prices tr + tr { border-top: 1px solid var(--line); }
  .prices td { padding: 0; }
  .prices tr + tr td { border-top: 0; }
  .prices .unit { grid-column: 1 / -1; }
  .prices .state { justify-self: end; }
  .prices .needs::before { content: "Needs "; color: var(--text-3); }
}
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.6vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.fact h2 { font-size: 1.125rem; letter-spacing: -0.015em; }
.fact p { color: var(--text-2); max-width: 56ch; }
.fact .btn { justify-self: start; margin-top: 12px; }
@media (min-width: 768px) { .facts > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.how-set p { margin-top: 20px; color: var(--text-2); max-width: 65ch; }
.how-set .panel { margin-top: 32px; }
.supply-rates { padding-top: 0; }
.supply-rates p { margin-top: 20px; color: var(--text-2); max-width: 65ch; }
.rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); column-gap: 40px; margin: 28px 0 0; border-top: 1px solid var(--line-strong); }
.rates div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rates dt { font: 400 0.9375rem/1.4 var(--mono); color: var(--text); }
.rates dd { margin: 0; font: 400 0.9375rem/1.4 var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
@media (max-width: 639px) {
  .rates { grid-template-columns: repeat(auto-fill, minmax(9.75rem, 1fr)); column-gap: 24px; }
  .rates dt, .rates dd { font-size: 0.8125rem; }
}

.status { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; max-width: 50rem; padding: clamp(24px, 3vw, 36px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.status .icon { display: none; color: var(--text); }
.status[data-state="checking"] .is-checking, .status[data-state="up"] .is-up,
.status[data-state="idle"] .is-idle, .status[data-state="down"] .is-down { display: block; }
.status[data-state="checking"] .icon { color: var(--text-3); }
.status p { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.45; letter-spacing: -0.01em; color: var(--text); }
.status .muted { font-size: 0.875em; }
.status-note { margin-top: 16px; font-size: 0.875rem; color: var(--text-3); max-width: 50rem; }