/* The landing's only stylesheet. It shares the Instance pages' tokens (src/pages.ts), so the product
   and its site look like one thing. Colours switch with the visitor's scheme through light-dark(). */
:root {
  color-scheme: light dark;
  --bg: light-dark(oklch(98.5% .004 230), oklch(17% .014 235));
  --surface: light-dark(oklch(99.7% .002 230), oklch(21.5% .016 235));
  --tint: light-dark(oklch(95% .025 195), oklch(26% .04 195));
  --text: light-dark(oklch(24% .02 245), oklch(95% .008 230));
  --muted: light-dark(oklch(47% .02 245), oklch(75% .015 230));
  --line: light-dark(oklch(88% .01 230), oklch(33% .016 235));
  --accent: light-dark(oklch(47% .095 195), oklch(82% .12 185));
  --accent-ink: light-dark(oklch(99.5% .003 195), oklch(20% .03 200));
  --term-bg: oklch(20% .018 235);
  --term-text: oklch(93% .01 230);
  --term-dim: oklch(72% .015 230);
  --term-accent: oklch(82% .12 185);
  --shadow: 0 1px 2px light-dark(oklch(25% .02 235 / .06), transparent), 0 18px 40px -18px light-dark(oklch(25% .03 235 / .22), transparent);
  --radius: 10px;
  --sans: system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --wrap: 68rem;
  --gutter: clamp(1rem, 4vw, 2rem);
}
@media (prefers-contrast: more) { :root { --line: var(--muted); --muted: var(--text); } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.6 var(--sans); }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); line-height: 1.08; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem); line-height: 1.15; font-weight: 680; }
h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 640; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
code, pre { font-family: var(--mono); font-size: .9em; }
:not(pre) > code { padding: .08em .35em; border-radius: 5px; background: var(--tint); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 3; padding: .5rem .85rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); font-weight: 600; text-decoration: none; }
.skip:focus { top: .75rem; }
.mark { display: block; width: 1.6rem; height: 1.6rem; flex: none; color: var(--accent); }

/* Header */
.top { position: sticky; top: 0; z-index: 2; background: color-mix(in oklch, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.brand { display: flex; align-items: center; gap: .55rem; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 1.5rem); font-size: .9375rem; }
.top nav a { color: var(--text); text-decoration: none; }
.top nav a:hover { color: var(--accent); }
.top nav .lang { color: var(--muted); font-weight: 600; }
.top nav .signin { font-weight: 600; color: var(--accent); }
@media (max-width: 44rem) { .top nav .section-link { display: none; } }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.875rem; padding: .6rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 650; font-size: 1rem; text-decoration: none; white-space: nowrap; }
.button:hover { filter: brightness(1.06); text-decoration: none; }
.button.quiet { background: transparent; color: var(--text); border-color: var(--line); }
.button.quiet:hover { border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .button { transition: translate .12s ease, filter .12s ease, border-color .12s ease; }
  .button:active { translate: 0 1px; }
}

/* Hero */
.hero { padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.hero .wrap { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.hero .copy { display: grid; gap: 1.4rem; justify-items: start; }
.hero .sub { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--muted); max-width: 40rem; }
.hero .fine { font-size: .9375rem; color: var(--muted); }

/* Terminal card */
.term { margin: 0; border-radius: 14px; background: var(--term-bg); color: var(--term-text); box-shadow: var(--shadow); overflow: hidden; border: 1px solid oklch(30% .02 235); min-width: 0; }
.term .bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; border-bottom: 1px solid oklch(30% .02 235); }
.term .bar span { width: .65rem; height: .65rem; border-radius: 50%; background: oklch(40% .02 235); }
.term pre { margin: 0; padding: 1.1rem 1.2rem 1.3rem; overflow-x: auto; line-height: 1.75; font-size: .875rem; }
.term .p { color: var(--term-dim); }
.term .ok { color: var(--term-accent); }
.term figcaption { padding: .8rem 1.2rem 1rem; border-top: 1px solid oklch(30% .02 235); color: var(--term-dim); font-size: .875rem; }

/* Sections */
section { padding: clamp(3rem, 8vw, 5.5rem) 0; border-top: 1px solid var(--line); }
section > .wrap { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.head { display: grid; gap: .8rem; max-width: 46rem; }
.head p { color: var(--muted); font-size: 1.125rem; }
.prose { display: grid; gap: 1rem; max-width: 46rem; }
.alt { background: var(--surface); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 1.4rem 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); display: grid; gap: .55rem; align-content: start; min-width: 0; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--tint); color: var(--accent); font-weight: 700; font-size: .9375rem; }
.steps p { color: var(--muted); }

.grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.grid > div { background: var(--surface); padding: 1.5rem; display: grid; gap: .5rem; align-content: start; min-width: 0; }
.grid p { color: var(--muted); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; padding: 1.2rem 1.4rem; border-radius: var(--radius); background: var(--tint); }
.price strong { font-size: 1.5rem; letter-spacing: -.02em; }

.list { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; max-width: 46rem; }
.list li { padding-left: 1.4rem; position: relative; }
.list li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .5rem; height: .5rem; border-radius: 2px; background: var(--accent); }
.list.no li::before { background: var(--muted); }

.faq { display: grid; gap: .75rem; max-width: 46rem; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 1.2rem; font-weight: 620; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; margin-top: .45rem; width: .5rem; height: .5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); rotate: 45deg; }
.faq details[open] summary::after { rotate: 225deg; margin-top: .7rem; }
.faq details > p { padding: 0 1.2rem 1.1rem; color: var(--muted); }

.install { background: var(--tint); border-top-color: transparent; }
.install pre { margin: 0; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--term-bg); color: var(--term-text); overflow-x: auto; line-height: 1.75; font-size: .875rem; }
.install .note { color: var(--muted); font-size: .9375rem; }

footer { border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; color: var(--muted); font-size: .9375rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; }
footer nav { display: flex; gap: 1.25rem; }

/* Not found */
main.lost { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem var(--gutter); }
.lost > div { max-width: 28rem; display: grid; gap: 1rem; justify-items: start; }

@media (forced-colors: active) { .steps li, .grid > div, .faq details, .term, .price { border: 1px solid CanvasText; } }