/* UplinkOps website — see DESIGN.md. Plain CSS, no build step, no webfonts,
   no third-party request. Tokens are carried over verbatim from the product's
   own dashboard stylesheet so the site and the dashboard are one system. */

/* ===== 1. Tokens ========================================================= */

:root {
  /* colour — light is the default */
  --bg: #eaeef3;
  --surface: #ffffff;
  --surface-2: #f3f6f9;
  --border: #d8dfe8;
  --border-2: #e6ebf1;
  --ink: #131922;
  --muted: #5c6b7a;
  --faint: #8a97a7;
  /* The dashboard's own accent and status colours, darkened for light mode.
     On screen the dashboard sits on panels; here the same colours sit on the
     page background as small bold labels, where the originals measured
     4.29, 3.49, 3.40 and 3.87 against the 4.5 this site needs. Every value
     below was chosen by measuring, not by eye. */
  --accent: #0c766e;
  --on-accent: #ffffff;
  --ok: #146b3a;
  --warn: #8c5a00;
  --bad: #c13630;
  /* Status text sitting on a tint of its own colour loses contrast against it,
     so a chip gets a darker ink than the colour that tints it. */
  --ink-accent: #0a655e;
  --ink-ok: #0f5b31;
  --ink-warn: #744b00;
  --ink-bad: #a02a25;
  --shadow-sm: 0 1px 2px rgba(16, 24, 32, .04), 0 6px 22px rgba(16, 24, 32, .06);

  /* type */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  --fs-display: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --fs-h3: 1.125rem;
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-label: .6875rem;

  /* space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* shape + layout */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --maxw: 1120px;
  --gutter: 20px;

  color-scheme: light;
}

/* dark follows the OS unless light was explicitly chosen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0e14;
    --surface: #131a23;
    --surface-2: #0f151d;
    --border: #232f3d;
    --border-2: #1b2530;
    --ink: #e7eef6;
    --muted: #94a2b2;
    --faint: #66727f;
    --accent: #2dd4bf;
    --on-accent: #06211e;
    --ok: #34d17f;
    --warn: #e3a80f;
    --bad: #f0655c;
    /* on dark the tint darkens rather than washes out, so the colour itself
       is already the readable ink */
    --ink-accent: #2dd4bf;
    --ink-ok: #34d17f;
    --ink-warn: #e3a80f;
    --ink-bad: #f0655c;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

/* dark chosen from the toggle, overriding the OS */
:root[data-theme="dark"] {
  --bg: #0a0e14;
  --surface: #131a23;
  --surface-2: #0f151d;
  --border: #232f3d;
  --border-2: #1b2530;
  --ink: #e7eef6;
  --muted: #94a2b2;
  --faint: #66727f;
  --accent: #2dd4bf;
  --on-accent: #06211e;
  --ok: #34d17f;
  --warn: #e3a80f;
  --bad: #f0655c;
  --ink-accent: #2dd4bf;
  --ink-ok: #34d17f;
  --ink-warn: #e3a80f;
  --ink-bad: #f0655c;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

/* ===== 2. Base =========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* the product's own atmosphere: a faint accent wash in the top-right */
  background:
    radial-gradient(1100px 560px at 100% -12%,
      color-mix(in srgb, var(--accent) 4%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: var(--fs-body)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { max-width: 100%; }

h1 { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.02em; }
h3 { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -.01em; }

a { color: var(--accent); }
a:not(.btn):not(.navlink):not(.footlink):not(.brand) {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== 3. Layout ========================================================= */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--s7);
  border-top: 1px solid var(--border-2);
}
.section:first-of-type { border-top: 0; }

@media (min-width: 768px) {
  .section { padding-block: var(--s9); }
}

.prose { max-width: 68ch; }

/* The header is sticky, so anything jumped to from the nav has to clear it.
   The header is two rows tall on a phone and one row from 720px up. */
main [id] { scroll-margin-top: 112px; }
@media (min-width: 720px) { main [id] { scroll-margin-top: 80px; } }

.skip {
  position: absolute;
  left: var(--s4);
  top: calc(-1 * var(--s9));
  z-index: 100;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s2) var(--s4);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease;
}
.skip:focus { top: var(--s4); }

/* ===== 4. Type helpers =================================================== */

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
}

.small { font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }

.num,
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

code {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 1px 5px;
}

pre {
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* ===== 5. Header ========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  min-height: 56px;
  padding-block: var(--s2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand svg { color: var(--accent); flex: none; }

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
  list-style: none;
}

.navlink {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color 120ms ease;
}
.navlink:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.navlink[aria-current="page"] { color: var(--ink); }

/* on phones the nav drops to its own full row under the wordmark */
@media (max-width: 719px) {
  .brand { margin-right: 0; }
  .nav { width: 100%; justify-content: flex-start; gap: var(--s4); }
}

.themetoggle {
  flex: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: var(--s2);
  transition: color 120ms ease, border-color 120ms ease;
}
.themetoggle:hover { color: var(--accent); border-color: var(--accent); }
.themetoggle svg { display: block; }
/* one icon per theme; the other is hidden */
.themetoggle .i-moon { display: none; }
:root[data-theme="dark"] .themetoggle .i-sun { display: none; }
:root[data-theme="dark"] .themetoggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle .i-sun { display: none; }
  :root:not([data-theme="light"]) .themetoggle .i-moon { display: block; }
}

/* ===== 6. Buttons ======================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 11px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); }

.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--accent); }

.btn-quiet { background: none; color: var(--accent); padding-inline: 0; }
.btn-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }

.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* ===== 7. Hero =========================================================== */

.hero { padding-block: var(--s7) var(--s8); }
@media (min-width: 768px) {
  .hero { padding-block: var(--s8) var(--s9); }
}
.hero h1 { max-width: 20ch; }
.hero .lead { max-width: 60ch; margin-top: var(--s5); }

/* the three claims under the hero */
.claims {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--border-2);
  list-style: none;
}
.claims h3 { margin-bottom: var(--s2); }
.claims p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.claims .ico { color: var(--accent); margin-bottom: var(--s3); display: block; }

/* ===== 8. Cards ========================================================== */

.grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--s6);
  list-style: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s5);
}
.card h3 { margin-bottom: var(--s2); }
.card p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.card ul { margin-top: var(--s3); }

/* a plain list of facts inside a card */
.ticks { list-style: none; display: grid; gap: var(--s2); }
.ticks li {
  position: relative;
  padding-left: var(--s5);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ===== 9. Chips ========================================================== */

.chip {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
  border-radius: var(--r-sm);
  padding: 2px 8px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--ink-accent);
}
.chip-ok   { background: color-mix(in srgb, var(--ok) 10%, transparent);   color: var(--ink-ok); }
.chip-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--ink-warn); }
.chip-bad  { background: color-mix(in srgb, var(--bad) 10%, transparent);  color: var(--ink-bad); }

/* ===== 10. Tables ======================================================== */

.tablewrap {
  margin-top: var(--s6);
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

caption {
  text-align: left;
  padding: var(--s4) var(--s4) 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  /* the table scrolls sideways; the caption stays where it can be read */
  position: sticky;
  left: 0;
}

th, td {
  padding: var(--s3) var(--s4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-2);
}

thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

tbody tr:last-child td,
tbody tr:last-child th { border-bottom: 0; }

/* the first column stays put while a wide table scrolls sideways */
.table-sticky th[scope="row"],
.table-sticky thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  font-weight: 650;
  color: var(--ink);
  border-right: 1px solid var(--border-2);
}
.table-sticky thead th:first-child { background: var(--surface-2); z-index: 1; }

td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.num { text-align: right; white-space: nowrap; }

/* In the tier comparison every value column is right-aligned, so each heading
   sits over its own numbers and the eye can run down a column. */
.table-tiers thead th:not(:first-child),
.table-tiers tbody td { text-align: right; }

/* a tier column the customer is steered to */
.table-sticky td.pick, .table-sticky th.pick {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* ===== 11. Pricing ====================================================== */

.pricenote {
  margin-top: var(--s4);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.promises {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  list-style: none;
}
.promises li {
  position: relative;
  padding-left: var(--s5);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.promises li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}

/* ===== 12. Notes ======================================================== */

.note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s4) var(--s5);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
  margin-top: var(--s5);
}
.note-warn { border-left-color: var(--warn); }
.note strong { color: var(--ink); }

/* the honest "what it does not do" list */
.limits { list-style: none; display: grid; gap: var(--s4); margin-top: var(--s6); }
.limits li {
  display: grid;
  gap: var(--s1) var(--s4);
  grid-template-columns: auto 1fr;
  align-items: start;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border-2);
}
.limits li:last-child { border-bottom: 0; padding-bottom: 0; }
.limits b { font-weight: 650; }
.limits p { grid-column: 2; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
@media (max-width: 519px) {
  .limits li { grid-template-columns: 1fr; }
  .limits p { grid-column: 1; }
}

/* ===== 13. Steps ======================================================== */

.steps { list-style: none; counter-reset: step; display: grid; gap: var(--s5); margin-top: var(--s6); }
.steps li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.steps li::before {
  content: counter(step);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: var(--r-sm);
  min-width: 28px;
  padding: 3px 0;
  text-align: center;
}
.steps h3 { margin-bottom: var(--s1); }
.steps p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

/* ===== 14. FAQ ========================================================== */

.faq { margin-top: var(--s6); border-top: 1px solid var(--border-2); }
.faq details { border-bottom: 1px solid var(--border-2); }
.faq summary {
  cursor: pointer;
  padding: var(--s4) 0;
  font-weight: 650;
  font-size: var(--fs-body);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--accent);
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div {
  padding-bottom: var(--s5);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
  max-width: 68ch;
}

/* ===== 15. Closing band ================================================= */

.cta {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  padding-block: var(--s8);
}
.cta .lead { margin-inline: auto; max-width: 52ch; margin-top: var(--s4); }
.cta .btnrow { justify-content: center; }

/* ===== 16. Footer ======================================================= */

.foot {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding-block: var(--s7);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.foot-grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.foot h2 {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
}
.foot ul { list-style: none; display: grid; gap: var(--s2); }
.footlink { color: var(--muted); text-decoration: none; }
.footlink:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.foot-base {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
}

/* ===== 17. Releases page ================================================ */

.current {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s5);
  margin-top: var(--s6);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3) var(--s6);
}
.current .v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.current dl { margin: 0; display: grid; gap: var(--s1); }
.current dt { font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.current dd { margin: 0; font-size: var(--fs-sm); }

.rel { border-top: 1px solid var(--border-2); padding-block: var(--s5); }
.rel:first-of-type { border-top: 0; }
.relhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.relhead h3 { font-family: var(--mono); font-size: 1.0625rem; font-weight: 700; }
.relhead time { font-size: var(--fs-sm); color: var(--muted); font-family: var(--mono); }
.rel p { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; max-width: 68ch; }
.rel ul { margin-top: var(--s3); }

/* ===== 18. Legal pages ================================================== */

.legal { padding-block: var(--s7) var(--s9); }
.legal h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.legal h2 { font-size: 1.25rem; margin-top: var(--s7); }
.legal h3 { margin-top: var(--s5); }
.legal p, .legal li { max-width: 68ch; }
.legal > .wrap > p,
.legal p { margin-top: var(--s4); color: var(--muted); }
.legal ul, .legal ol { margin-top: var(--s4); padding-left: var(--s5); display: grid; gap: var(--s2); }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { color: var(--muted); }
.legal li::marker { color: var(--faint); }
.legal .updated { font-size: var(--fs-sm); color: var(--muted); font-family: var(--mono); margin-top: var(--s4); }