/* ==========================================================================
   Miguel Downloader — site
   --------------------------------------------------------------------------
   Two grounds, not one. The product stands on a dark stage at the top, where a
   lit screenshot reads as an object; everything after it opens into paper,
   where text is meant to be read. That alternation is what gives the page a
   pulse. One uniform ground, one accent and a bordered card per section is
   what a template looks like.

   Borders are almost absent on purpose. Space separates things here.
   ========================================================================== */

:root {
  --paper:     #fbfaf7;  /* warm near-white; the page's default ground */
  --paper-2:   #f2efe8;  /* a half-step down, for bands that need separating */
  --stage:     #14120f;  /* the dark stage the product stands on */
  --ink:       #17150f;  /* body text on paper — 17.9:1 */
  --ink-soft:  #6a635a;  /* secondary text on paper — 5.7:1 */
  --bone:      #f0ece3;  /* text on the stage */
  --bone-soft: #a49c8e;  /* secondary text on the stage — 7.0:1 */
  --brass:     #90610a;  /* the accent on paper — 4.7:1 even on the darker band */
  --brass-lit: #f2b736;  /* the accent on the stage, where it can be bright */
  --hair:      #e2ddd2;  /* the few rules that survive — separators, never a boundary */
  --edge:      #8c8579;  /* a real border, when something has to read as a control — 3.2:1 */

  --page: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.wrap { width: min(var(--page), 100% - 3rem); margin-inline: auto; }
.narrow { width: min(760px, 100% - 3rem); margin-inline: auto; }

.mono {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* --- type: jumps, not a ladder -------------------------------------------
   The gap between a headline and body copy is where confidence lives. An
   evenly spaced scale reads as cautious; these sizes deliberately skip. */

h1, h2, h3 { margin: 0; letter-spacing: -0.032em; line-height: 1.02; text-wrap: balance; font-weight: 600; }
h1 { font-size: clamp(2.9rem, 1.6rem + 5.4vw, 5.5rem); }
h2 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.2; }

p { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(1.2rem, 1.02rem + 0.75vw, 1.6rem); line-height: 1.4; letter-spacing: -0.015em; }
.soft { color: var(--ink-soft); }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--brass); }

:where(a, button, summary):focus-visible {
  outline: 2.5px solid var(--brass);
  outline-offset: 3px;
  border-radius: 4px;
}
.stage :where(a, button):focus-visible { outline-color: var(--brass-lit); }

::selection { background: var(--brass-lit); color: var(--stage); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--stage); color: var(--bone);
  padding: 0.8rem 1.2rem; font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

:target { scroll-margin-top: 6rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- the stage ------------------------------------------------------------ */

.stage {
  background: var(--stage);
  color: var(--bone);
  position: relative;
  overflow: hidden;
}

/* One warm bloom under the product, as if the screen were lighting the room.
   The only gradient on the page. */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(1500px, 160%);
  aspect-ratio: 2 / 1;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(242, 183, 54, 0.15), transparent 100%);
  pointer-events: none;
}
.stage > * { position: relative; }

/* --- masthead ------------------------------------------------------------- */

.masthead { padding: 1.5rem 0 0; }
.masthead .wrap { display: flex; align-items: center; gap: 1.5rem; }

.wordmark {
  display: inline-flex; align-items: center; gap: 0.65rem;
  text-decoration: none; color: var(--bone);
  font-weight: 600; letter-spacing: -0.02em; font-size: 1.05rem;
  margin-right: auto; min-width: 0;
}
.wordmark svg { flex: none; }
.wordmark span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.masthead nav { display: flex; gap: 1.6rem; font-size: 0.95rem; }
.masthead nav a { color: var(--bone-soft); text-decoration: none; transition: color 180ms var(--ease); }
.masthead nav a:hover { color: var(--bone); }

.lang { display: inline-flex; gap: 0.15rem; font-size: 0.85rem; }
.lang a {
  padding: 0.3rem 0.62rem; border-radius: 999px;
  color: var(--bone-soft); text-decoration: none;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.lang a:hover { color: var(--bone); background: rgba(255, 255, 255, 0.08); }
.lang a[aria-current="page"] { background: var(--brass-lit); color: var(--stage); font-weight: 600; }

/* --- hero ----------------------------------------------------------------- */

.hero { padding: clamp(3.5rem, 9vw, 7rem) 0 0; text-align: center; }
.hero h1 { max-width: 16ch; margin-inline: auto; }
.hero h1 em { font-style: normal; color: var(--brass-lit); }
.hero .lead { margin: 1.8rem auto 0; max-width: 46ch; color: var(--bone-soft); }

.cta-row {
  margin-top: 2.4rem;
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 0.9rem 1.4rem;
}

.button {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1.05rem 1.9rem;
  background: var(--brass-lit); color: var(--stage);
  border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background-color 180ms var(--ease);
  box-shadow: 0 12px 34px -14px rgba(242, 183, 54, 0.75);
  touch-action: manipulation;
}
.button:hover {
  background: #ffc94f; color: var(--stage);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -14px rgba(242, 183, 54, 0.85);
}
.button svg { flex: none; }

.meta { font-size: 0.92rem; color: var(--bone-soft); }
/* Mono digits sit tight against the separators; a hair of space stops
   "1.0.0·198,6 MB" reading as one run of characters. */
.meta b { color: var(--bone); font-weight: 500; margin-inline: 0.18em; }

/* The product, big. It is the argument; everything else is a caption. */
.product { margin-top: clamp(0.5rem, 2vw, 1.5rem); }
.product img {
  display: block; width: 100%; height: auto;

}

/* --- sections on paper ---------------------------------------------------- */

section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.band-2 { background: var(--paper-2); }

.statement { font-size: clamp(1.5rem, 1.05rem + 2vw, 2.6rem); line-height: 1.24; letter-spacing: -0.025em; }
.statement .soft { color: var(--ink-soft); }

.kicker {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; margin-bottom: 1.2rem;
}
.stage .kicker { color: var(--brass-lit); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 54ch; }
.section-head p { margin-top: 1.1rem; font-size: 1.1rem; color: var(--ink-soft); }
.stage .section-head p { color: var(--bone-soft); }

/* --- claims: no boxes, just a rule and air -------------------------------- */

/* Explicit counts rather than auto-fit: four items reflowing to 3 + 1 leaves a hole
   where the fourth column should be, which reads as a mistake. */
.claims { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .claims { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .claims { grid-template-columns: repeat(4, 1fr); } }
.claim { display: grid; gap: 0.7rem; align-content: start; }
.claim .n {
  font-size: 0.78rem; letter-spacing: 0.12em; color: var(--brass);
  font-weight: 600; font-variant-numeric: tabular-nums;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--hair);
}
.claim p { color: var(--ink-soft); }

/* --- the limits, on the stage --------------------------------------------- */

.limits { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.limit { display: grid; gap: 0.6rem; align-content: start; }
.limit h3 { color: var(--bone); }
.limit p { color: var(--bone-soft); }
.limit .mark { color: var(--brass-lit); font-size: 1.4rem; line-height: 1; }

/* --- the receipt ---------------------------------------------------------- */

.receipt { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); align-items: start; }

.facts { display: grid; gap: 0; margin: 0; }
.facts > div { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--hair); }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; text-align: right; font-weight: 500; }

.checksum { margin-top: 1.8rem; }
.checksum .label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.checksum-row code {
  display: block; margin-top: 0.55rem;
  font-size: 0.8rem; line-height: 1.7; overflow-wrap: anywhere; color: var(--ink);
}
.checksum-row { display: flex; align-items: flex-start; gap: 0.8rem; min-width: 0; }
.checksum-row > div { min-width: 0; }

.copy {
  flex: none; border: 1px solid var(--edge); background: transparent; color: var(--ink-soft);
  border-radius: 999px; padding: 0.45rem 0.9rem; font: inherit; font-size: 0.85rem;
  cursor: pointer; touch-action: manipulation;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.copy:hover { color: var(--ink); border-color: var(--ink-soft); }
.copy[data-done="true"] { color: var(--brass); border-color: var(--brass); }

.verify { margin-top: 1.3rem; font-size: 0.92rem; color: var(--ink-soft); }
.verify pre {
  margin: 0.6rem 0 0; padding: 0.85rem 1rem; overflow-x: auto;
  background: var(--stage); color: var(--bone); border-radius: 10px; font-size: 0.8rem;
}

.also { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.95rem; }
.also a { color: var(--brass); }

/* --- table: hairlines only, like a spec sheet ----------------------------- */

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
caption { text-align: left; color: var(--ink-soft); font-size: 0.92rem; padding-bottom: 1.2rem; }
th, td { text-align: left; padding: 1rem 1.4rem 1rem 0; border-bottom: 1px solid var(--hair); white-space: nowrap; }
thead th { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
tbody th { font-weight: 500; }
td.note { white-space: normal; color: var(--ink-soft); }
td.yes { color: var(--brass); font-weight: 500; }

/* --- footer --------------------------------------------------------------- */

footer { background: var(--stage); color: var(--bone-soft); padding: clamp(3.5rem, 6vw, 5rem) 0 3.5rem; font-size: 0.95rem; }
.foot-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-bottom: 3rem; }
.foot-grid h4 { margin: 0 0 1rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); font-weight: 600; }
.foot-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.foot-grid a { color: var(--bone-soft); text-decoration: none; }
.foot-grid a:hover { color: var(--brass-lit); }
.colophon { display: grid; gap: 0.45rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.09); }

/* --- documents ------------------------------------------------------------ */

.doc { padding: clamp(3rem, 6vw, 5rem) 0 6rem; }
.doc h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); margin-bottom: 0.8rem; }
.doc .updated { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 3rem; }
.doc h2 { font-size: 1.45rem; margin: 3rem 0 1rem; letter-spacing: -0.02em; }
.doc h3 { margin: 2rem 0 0.7rem; }
.doc p + p { margin-top: 1rem; }
.doc ul, .doc ol { padding-left: 1.3rem; display: grid; gap: 0.6rem; margin: 1.1rem 0 0; }
.doc dl { display: grid; gap: 0.9rem; margin: 1.2rem 0 0; }
.doc dt { color: var(--brass); font-size: 0.9rem; }
.doc dd { margin: 0.25rem 0 0; color: var(--ink-soft); }
.doc .callout {
  border-left: 3px solid var(--brass); padding: 0.1rem 0 0.1rem 1.4rem;
  margin: 2rem 0; font-size: 1.1rem; line-height: 1.5;
}

/* --- one entrance, not a parade ------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 900ms var(--ease) both; }
  .rise-2 { animation-delay: 90ms; }
  .rise-3 { animation-delay: 180ms; }
  .rise-4 { animation-delay: 300ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
}

/* --- narrow screens -------------------------------------------------------
   The masthead is the only thing that genuinely runs out of room: the brand
   name, three section links and the language switch cannot share one line at
   375px without the name being truncated to nothing. Two rows, then. */

@media (max-width: 660px) {
  .masthead .wrap { flex-wrap: wrap; gap: 0.9rem 1rem; }
  .masthead nav { order: 3; width: 100%; gap: 1.4rem; font-size: 0.9rem; }
  .wordmark span { text-overflow: clip; }
}

@media (max-width: 660px) {
  /* A 1460px-wide window squeezed into 327px reads as a smudge. Let it run to
     both edges: it cannot teach the interface at this size, but it can still
     read as a real program. */
  .product { width: 100vw; margin-left: 50%; translate: -50% 0; }
}

/* Legal text is meant to be read line by line, so it gets a reading measure
   rather than the full page width. The header above it keeps the page width,
   which is what tells you the document belongs to the site. */
.doc .wrap { width: min(790px, 100% - 3rem); }

/* Plex Mono runs wider than Instrument Sans at the same size; inline file
   names in running text need a hair less to sit level with it. */
.doc :where(p, li, dd, dt) .mono { font-size: 0.92em; }