/* /download: the desktop tools page, built as a SIBLING of /about.
   about.css is this page's base: its :root tokens, its type scale, its section furniture
   (.ab-big / .ab-label / .ab-bigH / .ab-bigSub) and its .io scroll-in.
   Only what this page alone needs lives here: the download card, the statement sections and the
   install steps. Same family, not a new invention. */

/* ---- 1. the download, above the fold ---------------------------------------------------------
   Deliberately NOT a full-viewport .ab-big statement: the file is the job, and a producer who came
   here to get it should not have to scroll past a headline to reach the button. */
.dl-top{ max-width:1080px; margin:0 auto; padding:clamp(96px,13vh,150px) var(--gutter) clamp(40px,6vh,72px);
  text-align:center; }
.dl-h1{ margin:0; font-weight:800; font-size:var(--t-display); line-height:1.04; letter-spacing:-.03em;
  text-wrap:balance; }
.dl-lede{ margin:clamp(12px,1.6vw,18px) auto 0; font-size:var(--t-sub); line-height:1.5;
  color:rgba(255,255,255,.6); max-width:34ch; text-wrap:balance; }
/* what installs today, said before the button rather than found after the install (Sid, 28 Sept).
   A step quieter than the lede so it reads as a note on it, but at body size and full sentence, not
   fine print: the one bold word is the name the producer will actually see on their machine. */
.dl-now{ margin:10px auto 0; font-size:var(--t-small); line-height:1.55; color:rgba(255,255,255,.5);
  max-width:46ch; text-wrap:balance; }

.dl-getWrap{ margin-top:clamp(26px,3.4vw,38px); display:flex; flex-direction:column; align-items:center; gap:14px; }
/* The two platform buttons sit side by side and WRAP to a stack when they no longer fit, rather
   than shrinking: .dl-get carries a 280px min-width, so two of them need ~600px and a phone gets a
   stack without a breakpoint being written for it. align-items:start keeps both buttons on one
   baseline when one platform's meta line runs to two lines and the other's does not. */
.dl-getRow{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:18px clamp(14px,2.2vw,22px); width:100%; }
.dl-getCol{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.dl-get{ display:inline-flex; align-items:center; justify-content:center; min-width:280px;
  padding:17px 34px; border-radius:14px; background:var(--blue,#E46F40); color:#fff;
  font:700 16.5px var(--ui); letter-spacing:-.01em; text-decoration:none;
  box-shadow:0 10px 30px rgba(228,111,64,.34); transition:filter .15s ease, transform .15s ease; }
.dl-get:hover{ filter:brightness(1.07); transform:translateY(-1px); }
/* the zip: the same button, outlined instead of filled, so the pair above it stays the first choice.
   The rim is an inset shadow, not a border, so it is exactly as tall as the blue ones; and .off below
   clears box-shadow, so an unavailable zip greys to the same look as an unavailable platform. The
   extra top margin parts it from the pair's meta lines, so it never reads as one platform's footnote. */
.dl-getAll{ margin-top:10px; }
.dl-get.alt{ background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.dl-get.alt:hover{ filter:none; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
.dl-get.off{ background:rgba(255,255,255,.07); color:rgba(255,255,255,.3); box-shadow:none;
  pointer-events:none; }
/* version · size · floor · universal: read from /download/meta, never typed into the page.
   ONE VOICE ACROSS THE WHOLE LINE, in Inter, matching the about page's quiet lines (.ab-footL).
   It was Roboto Mono, which is a single family across all 58 glyphs, so the line never mixed
   fonts inside itself. What it did was speak in a different voice from everything around it: the
   lede above it and the button between them are Inter, so a mono line reads as a foreign object
   dropped into the block, and the numerals are where that shows first.
   The family is INHERITED rather than restated. .ab-footL carries no font-family of its own either,
   so inheriting from the same body rule is a computed match by construction: nothing to drift
   apart later if the stack is ever edited in one place and not the other. */
.dl-meta{ font-size:13px; font-weight:400; color:rgba(255,255,255,.6); letter-spacing:normal;
  line-height:1.6; text-align:center; }

/* ---- 2..5. the four pieces --------------------------------------------------------------------
   .ab-big gives the rhythm and the vertical centring. Each section was a statement paired with a
   product shot; every shot showed the old name or icon, so until the 1.3.0 retakes each one is a
   statement on its own (.solo), centred at a reading width, rather than a frame with nothing in it.
   The shot rules (the .dl-shot frame on .ab-pieceVis, the capped Finder capture, the floated
   notification and the .flip alternation) were deleted with the shots: at 68d5807 in git, to come
   back beside the retakes. SWAP-AT-1.3.0 */
.dl-duoIn{ position:relative; z-index:1; width:min(1080px, 100%); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(32px,5vw,72px); }
/* THE SAME CLASS OF DEFECT, found by the same audit. "emit sender au · vst3 · aax" is one line
   carrying two families and two sizes: .ab-label is Inter 13px, .ab-soonTag beside it is Roboto
   Mono 11px. On /about that tag is a standalone chip, which is why it was never wrong there; here
   it sits inline against label text, so the seam is visible mid-sentence.
   Brought into the label's own family and size, keeping only the quieter ink to hold the tag back.
   Scoped to this page: /about's chip is untouched. Tracking is set in em so it follows the size
   rather than being restated as a px value that would have to be kept in step by hand. */
.dl-duoText .ab-label .ab-soonTag{ font-family:inherit; font-size:13px; letter-spacing:.06em; }

.dl-duoText .ab-bigH{ max-width:14ch; }
.dl-duoText .ab-bigSub{ margin-top:clamp(14px,1.8vw,20px); }

/* a section with no shot gets the statement's full width rather than a hole */
.dl-duo.solo .dl-duoIn{ grid-template-columns:1fr; max-width:820px; text-align:center; }
.dl-duo.solo .ab-bigH, .dl-duo.solo .ab-bigSub{ max-width:none; margin-left:auto; margin-right:auto; }
/* A statement alone does not earn .ab-big's 86svh: that height was the shot's, and one sentence
   centred in a screen of empty ground reads as a picture that failed to load. Padded to a band that
   still gives each piece its own moment, and the install steps arrive a scroll or two sooner. */
.dl-duo.solo{ min-height:clamp(340px,52svh,560px); padding:clamp(64px,9vw,112px) 0; }

/* ---- 6. installing ---------------------------------------------------------------------------- */
/* 900 rather than the 760 the rest of the page reads at, and ONLY here: this section carries two
   step lists side by side, and splitting 760 in two gives a ~350px column, a measure short enough
   to break these steps across three lines each and make the shorter list look unfinished beside the
   longer one. The close below it stays 760, so the page's one wide moment is the one that earned it. */
.dl-install{ max-width:900px; margin:0 auto; padding:clamp(56px,8vw,96px) var(--gutter); }
.dl-installCols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
/* the platform each column belongs to, in the same label voice as .ab-label above it */
.dl-osLabel{ font-family:var(--ui); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.42); margin-bottom:16px; }
.dl-steps{ margin:0; padding:0; list-style:none; counter-reset:dls; }
.dl-steps li{ position:relative; padding-left:38px; font-size:var(--t-small); line-height:1.6;
  color:rgba(255,255,255,.66); }
.dl-steps li + li{ margin-top:18px; }
.dl-steps li::before{ counter-increment:dls; content:counter(dls);
  position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center;
  font-family:var(--ui); font-size:11.5px; color:rgba(255,255,255,.42); }
.dl-steps b{ color:#fff; font-weight:600; }

/* ---- 7. the quiet close ----------------------------------------------------------------------- */
.dl-close{ max-width:760px; margin:0 auto; padding:0 var(--gutter) clamp(72px,10vh,120px); text-align:center; }
/* .dl-win went with the "windows is coming" line it styled (2026-08-05). Its rules are deleted
   rather than left orphaned: a selector with nothing to match is the kind of thing the next person
   preserves out of caution because they cannot tell whether it is dead. */
.dl-foot{ margin-top:22px; font-size:var(--t-foot); color:rgba(255,255,255,.3); }
.dl-foot a{ color:rgba(255,255,255,.5); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:1px; }
.dl-foot a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.45); }
.dl-dot{ margin:0 9px; }

@media (max-width:820px){
  .dl-duoIn{ grid-template-columns:1fr; gap:clamp(24px,5vw,40px); text-align:center; }
  .dl-duoText .ab-bigH, .dl-duoText .ab-bigSub{ max-width:none; margin-left:auto; margin-right:auto; }
  .dl-get{ min-width:0; width:100%; }
  /* the button goes full-width here, so its COLUMN has to as well: otherwise width:100% resolves
     against a shrink-to-fit flex item and the two buttons come out at different widths */
  .dl-getCol{ width:100%; }
  .dl-installCols{ grid-template-columns:1fr; }
}