/* ============================================================
   rawcloser.com — Download page (Phase 7.E)
   Page-specific rules ONLY for /download/ and /it/download/.

   LIVE (Phase 7.E.1): the download button is an <a class="btn btn-primary"
   href="/download/RawCloser.dmg" download>; the nav and hero CTAs link here.

   Loaded after landing.css, the same convention as pricing.css and
   features.css: landing.css supplies the shared .reveal / .r-rise
   ruleset and the .ts-kicker eyebrow this page reuses verbatim.

   Layout: hero section on the landing hero's shared grid, two columns from the site's shared 60rem
   breakpoint. The DOM order is text, then image, so on narrow widths
   the copy reads first and the MacBook falls below it. From 60rem the
   image is moved to the LEFT column with `order` only — the source
   order (and so the reading order) never changes. Same mobile shape as
   /resources/'s .lm-hero-grid (landing.css), with the columns mirrored
   on desktop.
   Consumes tokens.css only. Never hardcode a colour, spacing, radius,
   type, shadow, or motion value in this file.
   ============================================================ */

/* ---------- 1. Grid ----------
   .dl-grid is in landing.css's shared hero-grid selector groups (with
   .hero-grid / .wl-grid / .ts-grid): mobile single column with the page
   gutters and --space-8 gap, and from 60rem the same centred block
   (max-width 92.25rem, 28rem copy track, gap --space-6, flexible media
   track), so the shot is exactly as wide as the landing hero's (900px at the
   cap, 80% centred below 60rem, section 4). Nothing is restated here except
   the mirrored track order in section 5. The section carries no .container:
   like the hero, the grid supplies its own gutters. */

/* ---------- 2. Text column ---------- */
.dl-title{
  font-size:var(--text-5xl);
  text-wrap:balance;
  margin-top:var(--space-4);
}

/* The sub-line is the trial line, reused verbatim from /pricing/. */
.dl-sub{
  font-size:var(--text-lg);
  color:var(--color-text-secondary);
  max-width:var(--measure-prose);
  margin-top:var(--space-5);
}

/* Same shape as the landing hero's lone CTA (landing.css .hero-actions):
   a flex row so the button hugs its own height, widened inline. The
   button's disabled look is components.css's shared .btn:disabled. */
.dl-actions{
  display:flex;
  margin-top:var(--space-6);
}

.dl-actions .btn{
  padding-inline:var(--space-7);
}

/* Requirement fine print — the landing hero's .hero-req treatment. */
.dl-req{
  font-size:var(--text-sm);
  color:var(--color-text-tertiary);
  margin-top:var(--space-4);
}

/* Pre-download notice (Phase 7.E.2) — the counsel-approved paragraph sitting
   directly under the button. Secondary text colour, not the tertiary of
   .dl-req: tertiary on the page background is below WCAG AA for body-size
   text, and this is a disclosure the visitor has to be able to read. The two
   links take the primary text colour and an underline so they read as
   clickable inside the muted paragraph (the .form-notice treatment). */
.dl-notice{
  font-size:var(--text-sm);
  line-height:var(--leading-relaxed);
  color:var(--color-text-secondary);
  max-width:var(--measure-prose);
  margin-top:var(--space-4);
}

.dl-notice a{
  color:var(--color-text);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color var(--dur-fast) var(--ease-standard);
}

.dl-notice a:hover{
  color:var(--color-text-secondary);
}

/* ---------- 3. First-run steps ---------- */
.dl-steps-block{
  margin-top:var(--space-7);
}

.dl-steps-title{
  font-size:var(--text-xl);
}

/* base.css resets list-style on ol, so the numbers are drawn from a
   counter: the list stays a real <ol> for assistive tech. */
.dl-steps{
  counter-reset:dl-step;
  display:grid;
  gap:var(--space-4);
  margin-top:var(--space-4);
}

.dl-step{
  counter-increment:dl-step;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  column-gap:var(--space-3);
  color:var(--color-text-secondary);
  max-width:var(--measure-prose);
}

.dl-step::before{
  content:counter(dl-step) ".";
  font-weight:var(--weight-semibold);
  color:var(--color-text-tertiary);
}

/* ---------- 4. Image ----------
   website/CLAUDE.md's /features/ image contract: ONE <picture> with a
   media-qualified dark <source>, WebP only, no PNG fallback, and an
   inline --img-ratio equal to the <img>'s own width/height attributes
   (2000x1333 for both theme files). Unlike /features/ rows this image is
   above the fold, so the markup carries fetchpriority="high" and no
   loading="lazy". */
.dl-visual{
  min-width:0;                   /* lets the grid item shrink below the img's intrinsic width */
}

.dl-visual picture{
  display:block;
  width:100%;
  aspect-ratio:var(--img-ratio, 3/2);
}

/* Below 60rem: the landing hero's mobile cap (landing.css .hero-shot, 7.A.33):
   80% of the track, centred. */
@media (max-width: 59.999rem){
  .dl-visual picture{
    max-width:80%;
    margin-inline:auto;
  }
}

.dl-visual img{
  display:block;
  width:100%;
  height:100%;
}

/* ---------- 5. Desktop: image left, text right ---------- */
@media (min-width: 60rem){
  /* Mirror of the shared hero tracks (landing.css: minmax(0, 28rem) minmax(0, 1fr)):
     the image is moved to the left column, so the fixed copy track goes second. */
  .dl-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 28rem);
  }

  .dl-visual{
    order:-1;
  }
}

/* Mac-only note (Phase 7.A.126). Static markup carries `hidden`; for visitors
   who are not on a desktop Mac, assets/js/download-platform.js sets
   html.dl-nonmac before first paint, which hides the button row and the
   pre-download notice and shows this note in their place. Without JS none of
   this applies and the page is unchanged. */
.dl-mobile-note{
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  color:var(--color-text);
  max-width:var(--measure-prose);
  margin-top:var(--space-5);
}

.dl-nonmac .dl-mobile-note{
  display:block;
}

.dl-nonmac .dl-actions,
.dl-nonmac .dl-notice{
  display:none;
}