/*
  Layout follows meteorclient.com: a solid top bar, a full-width hero image with the logo drawing itself in,
  a centered downloads block with wide stacked buttons, light page body, one dark footer bar.
  Colors, buttons and the other sections are our own.

  Fonts:   Poppins (display), Figtree (body); code uses the system monospace stack
  Colors:  blue   = dominant, links, icons and the hero hills
           purple = the one accent, every primary button
           navy   = top bar, hero and footer
           paper  = page background
           ink    = main text
           mist   = secondary text
           (lilac is a light tint of the purple, used only on dark backgrounds)
  Spacing: --s1 8px, --s2 24px, --s3 72px. Anything else is a multiple of these.
*/
:root {
  --blue: #2a4fd6;
  --purple: #7a3fe0;
  --purple-edge: #5524b0;
  --lilac: #b79cf5;
  --navy: #0f1944;
  --paper: #e4e8f4;
  --ink: #131a38;
  --mist: #4a5478;
  --white: #fff;
  --line: #b8c0dc;

  --s1: 8px;
  --s2: 24px;
  --s3: 72px;

  --display: "Poppins", "Trebuchet MS", sans-serif;
  --body: "Figtree", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.2; }
h1 { font-size: clamp(40px, 7vw, 72px); font-weight: 800; color: var(--white); letter-spacing: -0.02em; line-height: 1.1; }
h2 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
h3 { font-size: 19px; font-weight: 700; line-height: 1.3; }
p { margin: 0; }

code, pre { font-family: var(--mono); }
code { font-size: 0.86em; background: var(--white); border: 1px solid var(--line); padding: 1px 6px; }

.wrap { width: min(1100px, 100% - 2 * var(--s2)); margin-inline: auto; }

.icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* Buttons: square block with a thick lower edge. Flat colors, no gradient, no pill shape. */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--s1);
  padding: calc(var(--s1) * 1.5) var(--s2) calc(var(--s1) * 1.5 + 4px);
  font: 700 17px/1.2 var(--body);
  text-decoration: none;
  color: var(--white);
  background: var(--purple);
  border: 0;
  border-radius: 2px;
  box-shadow: inset 0 -4px 0 var(--purple-edge);
  cursor: pointer;
}
.btn:hover { color: var(--white); box-shadow: inset 0 -3px 0 var(--purple-edge); padding-bottom: calc(var(--s1) * 1.5 + 3px); }
.btn:active { box-shadow: inset 0 -1px 0 var(--purple-edge); padding-bottom: calc(var(--s1) * 1.5 + 1px); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; }
.install a:focus-visible, .install button:focus-visible, dialog a:focus-visible, dialog button:focus-visible { outline-color: var(--blue); }

.btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--white), inset 0 -4px 0 rgba(255, 255, 255, 0.4); }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--white), inset 0 -3px 0 rgba(255, 255, 255, 0.4); }
.btn.outline { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.btn.outline:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), inset 0 -3px 0 var(--line); padding-bottom: calc(var(--s1) * 1.5 + 3px); }
.btn.muted { color: var(--mist); background: transparent; box-shadow: inset 0 0 0 2px var(--line); cursor: default; }
.btn.muted:hover, .btn.muted:active { color: var(--mist); box-shadow: inset 0 0 0 2px var(--line); padding-bottom: calc(var(--s1) * 1.5 + 4px); }
.btn.small { padding: var(--s1) calc(var(--s1) * 2) calc(var(--s1) + 3px); font-size: 15px; }
.btn.small:hover { padding-bottom: calc(var(--s1) + 2px); }
.btn.wide { min-width: 22rem; }
.btn[disabled] { opacity: 0.6; cursor: default; }
.tag { white-space: nowrap; padding: 2px var(--s1); font: 700 13px/1.4 var(--body); color: var(--white); background: var(--mist); border-radius: 2px; }

/* Top bar */
.top { position: relative; background: var(--navy); }
.top .wrap { display: flex; align-items: center; min-height: 72px; gap: var(--s2); }
.mark {
  display: flex;
  align-items: center;
  gap: calc(var(--s1) * 1.5);
  margin-right: auto;
  color: var(--white);
  font: 700 21px/1 var(--display);
  text-decoration: none;
}
.mark span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.mark svg { width: 22px; height: 22px; }
.links { display: flex; align-items: center; gap: var(--s2); }
.links a:not(.btn) { color: var(--white); text-decoration: none; }
.links a:not(.btn):hover { text-decoration: underline; }
.burger { display: none; background: none; border: 0; color: var(--white); padding: var(--s1); cursor: pointer; }
.burger .icon { width: 28px; height: 28px; }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--navy); text-align: center; }
.hero svg.land { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .wrap { position: relative; padding: calc(var(--s3) * 1.5) 0; }
.hero .box { display: inline-block; max-width: 640px; padding: var(--s2) var(--s2) calc(var(--s2) + var(--s1)); background: rgba(8, 12, 38, 0.74); border-radius: 2px; }
.logo { display: block; margin-inline: auto; height: 8rem; overflow: visible; fill: none; stroke-width: 15; stroke-linecap: square; stroke-linejoin: miter; }
.js-ready .logo path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.logo .e { stroke: var(--white); }
.logo .y { stroke: var(--lilac); }
.js-ready .logo path { animation: draw 1.4s ease-out forwards; }
.js-ready .logo path:nth-child(2) { animation-delay: 0.25s; }
.js-ready .logo path:nth-child(3) { animation-delay: 0.5s; }
.js-ready .logo path:nth-child(4) { animation-delay: 0.75s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero h1 { margin-top: var(--s2); }
.hero p { margin-top: var(--s1); color: #dfe5fa; font-size: 19px; }
.hero .buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

/* Downloads: centered, wide buttons stacked, like the reference */
.downloads { padding: var(--s3) 0; text-align: center; }
.downloads .status { margin-top: var(--s1); color: var(--mist); min-height: 1.6em; }
.downloads .stack { display: flex; flex-direction: column; align-items: center; gap: calc(var(--s1) * 2); margin: var(--s2) 0; }
.downloads .note { max-width: 40em; margin: 0 auto; color: var(--mist); font-size: 15px; }
.downloads .note + .note { margin-top: var(--s1); }

/* What changed: a narrow heading column and a long ruled list, not a card grid */
.changes { padding: var(--s3) 0; background: var(--white); }
.changes .wrap { display: grid; grid-template-columns: 0.75fr 1.6fr; gap: var(--s3); }
.changes .intro p { margin-top: var(--s2); color: var(--mist); }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { display: grid; grid-template-columns: 22px 1fr; gap: calc(var(--s1) * 2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.rows li:first-child { padding-top: 0; }
.rows li:last-child { padding-bottom: 0; border-bottom: 0; }
.rows .icon { margin-top: 3px; color: var(--blue); }
.rows p { margin-top: var(--s1); color: var(--mist); }
.rows code { background: var(--paper); }

/* Info icon beside the section heading */
.info { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: var(--s1); vertical-align: middle; padding: 0; color: var(--blue); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.info:hover { color: var(--ink); background: var(--paper); }
.info .icon { width: 24px; height: 24px; stroke-linecap: round; stroke-width: 2; }

/* Install */
.install { padding: var(--s3) 0; background: var(--white); }
.install code { background: var(--paper); }
.install .wrap { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--s3); }
.install ol { margin: var(--s2) 0 0; padding-left: var(--s2); }
.install li { margin-bottom: var(--s1); padding-left: calc(var(--s1) / 2); }
.install li::marker { color: var(--blue); font-weight: 700; }
.install .btn { margin-top: var(--s2); }
.install .needs { align-self: end; padding-left: var(--s2); border-left: 4px solid var(--purple); }
.install .needs p { margin-top: var(--s1); color: var(--mist); }

/* Footer */
footer { padding: calc(var(--s1) * 2) 0; background: var(--navy); color: #d3daf5; text-align: center; font-size: 15px; }
footer p { max-width: 52em; margin-inline: auto; padding-inline: var(--s2); }

/* Download dialog (native <dialog>, so focus handling and Esc come from the browser) */
dialog {
  width: min(520px, 100% - 2 * var(--s2));
  padding: var(--s2);
  color: var(--ink);
  background: var(--white);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
dialog::backdrop { background: rgba(8, 12, 38, 0.7); }
dialog h2 { font-size: 26px; line-height: 1.2; }
dialog .lead { margin-top: var(--s1); color: var(--mist); }
dialog dl { margin: var(--s2) 0 0; border-top: 1px solid var(--line); }
dialog dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s1); padding: var(--s1) 0; border-bottom: 1px solid var(--line); font-size: 15px; }
dialog dt { color: var(--mist); }
dialog dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dialog .changelog { margin-top: var(--s2); padding-left: var(--s2); border-left: 4px solid var(--purple); white-space: pre-line; font-size: 15px; }
dialog .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--s1) * 1.5); margin-top: var(--s2); }
dialog [hidden] { display: none; }
.changelist { margin: var(--s2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.changelist li { padding: calc(var(--s1) * 1.5) 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--mist); }
.changelist strong { color: var(--ink); }

/* Sections fade in once, but only when scripts are running, so nothing is hidden without them */
.js-ready .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
.js-ready .reveal.in { opacity: 1; transform: none; }

/* Grid children may shrink below their content, so wide code blocks scroll instead of pushing the page */
.changes .wrap > *, .install .wrap > * { min-width: 0; }

@media (max-width: 900px) {
  .burger { display: block; }
  .links { display: none; position: absolute; top: 100%; right: 0; z-index: 2; flex-direction: column; align-items: stretch; gap: calc(var(--s1) * 2); padding: calc(var(--s1) * 2) var(--s2) var(--s2); background: var(--navy); border-top: 1px solid #2c3870; }
  .top.open .links { display: flex; }
  .changes .wrap, .install .wrap { grid-template-columns: 1fr; gap: var(--s2); }
  .hero .wrap { padding: var(--s3) 0; }
  .logo { height: 6rem; }
  .btn.wide { min-width: 18rem; }
}
@media (max-width: 480px) {
  .logo { height: 4.5rem; }
  .btn.wide { min-width: 0; width: 100%; }
  .btn.muted { flex-direction: column; gap: calc(var(--s1) / 2); }
  dialog dl div { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .logo path { animation: none; stroke-dashoffset: 0; }
  .js-ready .reveal { opacity: 1; transform: none; transition: none; }
}