/* ==========================================================================
   Indore — downloads.css
   Loads after base.css. Nothing here belongs to any other page.

   Four grounds stacked:
     .dhead   plum      the title plate — no hero, so the page opens on colour
     .apps    surface   the four cards, white .panel on the off-white ground
     .acct    white     one account behind all four
     .dfine   surface   buying, the three free rides, help

   Every platform glyph is drawn inline in the markup, in currentColor, to
   the same stroke weight as the footer's social mark. Nothing is fetched.
   ========================================================================== */


/* --- sticky nav ----------------------------------------------------------
   No hero on this page, so .snav carries .is-visible in the markup. Four
   links is one more than the homepage carries: the run tightens on a phone
   and Help steps out below 600, where it is still in the footer. */
@media (max-width:599px){
  .snav ul{gap:16px}
  .snav a{font-size:15px}
  .snav__opt{display:none}
}


/* ==========================================================================
   01 — TITLE
   ========================================================================== */
.dhead{background:var(--plum);color:var(--white);padding:104px 0 64px}
.dhead h1{font-size:clamp(52px,8.889vw,139px);color:var(--white)}
.dhead p{margin-top:24px;font-size:18px;color:var(--white70);max-width:54ch}
@media (min-width:900px){
  .dhead{padding:160px 0 96px}
  .dhead p{margin-top:36px}
}


/* ==========================================================================
   02 — THE FOUR APPS
   One column on a phone, two from 700, all four abreast from 1200 where
   there is room for a 44px target and a readable line inside each card.
   ========================================================================== */
.apps{background:var(--surface);padding:56px 0 72px}
.agrid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:700px){.agrid{gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){
  .apps{padding:88px 0 112px}
  .agrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
}

/* the card ---------------------------------------------------------------
   .panel gives the ground, the hairline and the label/value rows. The card
   adds a glyph above the title, room at the foot for the button, and the
   install caveat in the small-print register under it. */
.dcard{max-width:none;padding-bottom:22px;display:flex;flex-direction:column}
@media (min-width:600px){.dcard{padding-bottom:24px}}

.dcard__icon{display:block;color:var(--plum50);margin-bottom:16px}
.dcard__icon svg{width:30px;height:30px}

/* The grid stretches every card in a row to the same height, and the button is
   the last thing in the card, so the slack collects immediately above it: the
   title, note, rows and install caveat sit hard against the top with no gap
   opened under a short line, and the four buttons land on one baseline. */
.dcard__act{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:10px}
.dcard__act .btn{width:100%}
/* macOS ships two builds, so its action line is a pair */
@media (min-width:380px){
  .dcard__act--pair{flex-direction:row}
  .dcard__act--pair .btn{flex:1 1 0;padding:0 14px}
}

/* the second build of a pair: the same pill, outlined rather than filled,
   so the recommended one stays the obvious one. This page only. */
.btn--ghost{background:transparent;color:var(--primary);
  box-shadow:inset 0 0 0 2px rgba(38,103,200,.35)}
.btn--ghost:hover{background:rgba(38,103,200,.06);color:#1d55ab}

.dcard__fine{margin-top:16px}



/* ==========================================================================
   03 — ONE ACCOUNT
   ========================================================================== */
.acct{background:var(--white);padding:72px 0}
.acct__in{display:flex;flex-direction:column;gap:36px}
.acct__copy{max-width:var(--measure)}
.acct__copy h2{font-size:clamp(30px,3.2vw,46px)}
.acct__copy p{margin-top:20px;font-size:18px;color:var(--plum70)}

.acct__cards{display:flex;flex-wrap:wrap;gap:12px}
.acct__cards .mc{flex:1 1 150px;min-width:0}

@media (min-width:1000px){
  .acct{padding:128px 0}
  .acct__in{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:80px}
  .acct__copy{flex:1 1 auto}
  .acct__cards{flex:0 0 232px;flex-direction:column;flex-wrap:nowrap;gap:16px}
  .acct__cards .mc{flex:0 0 auto}
}


/* ==========================================================================
   04 — THE SMALL PRINT
   ========================================================================== */
.dfine{background:var(--surface);padding:72px 0}
.dgrid{display:grid;grid-template-columns:1fr;gap:40px}
.dcol h2{font-size:22px}
.dcol p{margin-top:14px;font-size:18px;color:var(--plum70)}
.dcol a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(38,103,200,.4);
  display:inline-flex;align-items:center;min-height:44px}
.dcol a:hover{color:#1d55ab;text-decoration-color:currentColor}

.dfine__note{margin-top:48px;padding-top:24px;border-top:1px solid var(--border);
  max-width:var(--measure)}

@media (min-width:900px){
  .dfine{padding:112px 0 128px}
  .dgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
  .dfine__note{margin-top:72px}
}


/* --- focus ---------------------------------------------------------------
   base.css rings in white, which is right over the plum title plate and
   invisible everywhere else on this page. */
.apps :focus-visible,
.acct :focus-visible,
.dfine :focus-visible,
.snav :focus-visible,
.footer :focus-visible{outline-color:var(--primary)}