/* /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), its .ab-pieceVis frame and its .io scroll-in.
   Only what this page alone needs lives here — the download card, and the two-column rhythm for a
   section that pairs a statement with a product shot. 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; }

.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,#3B74F0); color:#fff;
  font:700 16.5px var(--ui); letter-spacing:-.01em; text-decoration:none;
  box-shadow:0 10px 30px rgba(59,116,240,.34); transition:filter .15s ease, transform .15s ease; }
.dl-get:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.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. a statement paired with a product shot --------------------------------------------
   .ab-big gives the full-viewport rhythm and the vertical centring; this only adds the two-column
   split and the alternation. The image side is .ab-pieceVis, so the corner radius, the hairline and
   the ground are the about page's, not a second treatment invented here. */
.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); }
.dl-duo.flip .dl-duoText{ order:2; }
.dl-duo.flip .dl-duoVis{ order:1; }
/* THE SAME CLASS OF DEFECT, found by the same audit. "acetate 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); }

/* the shot itself. 4/5 like /about's pieces; the renders are portrait so they sit in it without
   cropping, and object-fit:contain keeps a plugin window a plugin window (cover would slice it). */
.dl-shot{ aspect-ratio:4/5; padding:clamp(22px,3vw,40px); }
.dl-shot img{ width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 26px 54px rgba(0,0,0,.62)); }
/* the one section with no shot yet — it 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; }

/* ---- the bounce folder's two real captures ----------------------------------------------------
   These are the only shots on the page that are not headless renders, and they arrive at the size
   a person's screen actually gave them: the folder is 235x185, the notification 374x93. That is a
   hard ceiling. The other three sections carry ~900px renders that can fill a frame; blowing a
   235px capture up to the same width would put one soft, mushy image beside three crisp ones,
   which reads as a mistake rather than as a photograph.
   So the folder is CAPPED near its native size and centred on the frame's ground instead of
   filling it. The frame does the composition; the image does not have to. */
.dl-shotFolder img{ width:auto; height:auto; max-width:min(78%, 300px); max-height:70%;
  border-radius:10px; }

/* The notification is a SEPARATE object, floated near the frame rather than composited inside it.
   Putting it into the folder shot would assert that one screen showed both at one moment, which is
   not what was captured and not what happens — the notification fires at the bounce, the folder is
   what you find afterwards. Presented as a detail: smaller than the main shot, overlapping the
   frame's edge so it reads as sitting in front of it, with its own shadow doing the lifting. */
.dl-duoVis{ position:relative; }
/* Sized to its own pixels, not to the space available. At ~195px it renders within a hair of the
   374px capture's native resolution on a 2x screen, so it stays sharp — and being small is what
   makes it read as a detail rather than a second slab competing with the folder. Bigger was worse
   twice over: softer, and no longer subordinate. */
.dl-detail{ position:absolute; right:-5%; bottom:11%; width:min(46%, 195px); margin:0; }
.dl-detail img{ display:block; width:100%; height:auto; border-radius:9px;
  box-shadow:0 16px 34px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.55); }

/* ---- 6. installing ---------------------------------------------------------------------------- */
/* 900 rather than the 760 the rest of the page reads at, and ONLY here: this section now 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 mono 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-duo.flip .dl-duoText{ order:1; }
  .dl-duo.flip .dl-duoVis{ order:2; }
  .dl-duoText .ab-bigH, .dl-duoText .ab-bigSub{ max-width:none; margin-left:auto; margin-right:auto; }
  .dl-shot{ aspect-ratio:1/1; max-width:420px; margin:0 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; }
}