/* Pro pack download page (download.html). Page layout only: buttons, fields, card and copy buttons come from the
   library (marvelous/bundle.css). Same cascade layers as landing.css, so the library never overrides this file. */
@layer mv.reset, mv.tokens, mv.base, mv.components, mv.utilities, page;

@layer page {
  body {
    margin: 0; background: var(--mv-bg); color: var(--mv-fg);
    font: 400 1rem/1.65 var(--mv-font-sans); -webkit-font-smoothing: antialiased;
    background-image: radial-gradient(60rem 26rem at 50% -6rem, color-mix(in oklch, var(--mv-accent) 16%, transparent), transparent 70%);
    background-repeat: no-repeat;
  }
  [hidden] { display: none !important; }
  ::selection { background: var(--mv-selection); }
  a:where(:not(.mv-button)) { color: var(--mv-accent-fg); }
  code { font-family: var(--mv-font-mono); font-size: .9em; overflow-wrap: anywhere; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .5rem 1rem; border-radius: var(--mv-radius-md); background: var(--mv-accent); color: var(--mv-fg-on-accent); }
  .skip:focus { top: 1rem; }

  .dl-wrap { width: min(100% - 2rem, 44rem); margin-inline: auto; }

  /* Top bar: brand back to the home page, language switcher */
  .dl-top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
  .brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--mv-fg) !important; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
  .brand svg { width: 1.75rem; height: 1.75rem; }
  .brand-ui { margin-left: .2rem; padding: .05rem .35rem; border-radius: var(--mv-radius-xs); font-size: .7rem; background: var(--mv-bg-emphasis); color: var(--mv-fg-muted); vertical-align: .15em; }

  /* Hero */
  .dl-hero { padding-block: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 4vw, 2.25rem); }
  .dl-eyebrow { margin: 0 0 .75rem; color: var(--mv-accent-fg); font: 600 .8125rem/1 var(--mv-font-sans); letter-spacing: .08em; text-transform: uppercase; }
  .dl-hero h1 { margin: 0; font: 700 clamp(1.9rem, 1.2rem + 3vw, 2.75rem)/1.1 var(--mv-font-sans); letter-spacing: -.035em; text-wrap: balance; }
  .lead { margin: 1rem 0 0; max-width: 38rem; color: var(--mv-fg-muted); font-size: 1.075rem; line-height: 1.65; }
  .fine { margin: 1rem 0 0; font-size: .8125rem; color: var(--mv-fg-subtle); }

  /* Download card */
  .dl-form { display: grid; gap: 1rem; }
  .dl-form .mv-input { font-family: var(--mv-font-mono); }
  .dl-form .mv-button { justify-self: start; }
  @media (max-width: 30rem) { .dl-form .mv-button { justify-self: stretch; } }
  .dl-progress { margin-top: 1rem; }
  .dl-progress progress {
    display: block; width: 100%; height: .5rem; border: 0; border-radius: var(--mv-radius-full); overflow: hidden;
    appearance: none; background: var(--mv-bg-muted); color: var(--mv-accent);
  }
  .dl-progress progress::-webkit-progress-bar { background: var(--mv-bg-muted); }
  .dl-progress progress::-webkit-progress-value { background: var(--mv-accent); border-radius: var(--mv-radius-full); transition: inline-size .2s; }
  .dl-progress progress::-moz-progress-bar { background: var(--mv-accent); border-radius: var(--mv-radius-full); }
  .dl-status:empty { display: none; }
  .dl-status {
    margin: 1rem 0 0; padding: .75rem .9rem; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-md);
    background: var(--mv-bg-subtle); font-size: .9375rem;
  }
  .dl-status[data-tone="error"] { border-color: color-mix(in oklch, var(--mv-danger) 55%, transparent); background: color-mix(in oklch, var(--mv-danger) 10%, var(--mv-bg)); }
  .dl-status[data-tone="success"] { border-color: color-mix(in oklch, var(--mv-success) 55%, transparent); background: color-mix(in oklch, var(--mv-success) 10%, var(--mv-bg)); }
  .dl-status b { display: block; }

  /* Sections */
  .dl-section { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
  .dl-section h2 { margin: 0 0 .75rem; font-size: 1.3rem; letter-spacing: -.02em; }
  .dl-section > p { margin: .75rem 0 0; }
  .dl-where { margin: 0; padding-left: 1.2rem; }
  .dl-where li + li { margin-top: .4rem; }
  .dl-where strong { color: var(--mv-fg); }

  .dl-cmd {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem;
    margin-top: .75rem; padding: .55rem .55rem .55rem .9rem;
    border: 1px solid var(--mv-border); border-radius: var(--mv-radius-lg); background: var(--mv-bg-subtle);
  }
  .dl-cmd code { color: var(--mv-fg); font-size: .9rem; font-weight: 600; line-height: 1.5; }
  .dl-cmd code::before { content: "$ "; color: var(--mv-fg-subtle); font-weight: 400; }
  .dl-section > .dl-cmd-note { margin-top: 1rem; color: var(--mv-fg-muted); font-size: .9375rem; }

  .dl-links { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
  .dl-link {
    display: grid; gap: .2rem; padding: 1rem 1.1rem; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-lg);
    background: var(--mv-bg-subtle); color: var(--mv-fg) !important; text-decoration: none;
    transition: border-color var(--mv-duration-fast) var(--mv-ease-out), background-color var(--mv-duration-fast) var(--mv-ease-out);
  }
  .dl-link:hover { border-color: var(--mv-border-strong); background: var(--mv-bg-muted); }
  .dl-link:focus-visible { outline: 2px solid var(--mv-ring, var(--mv-accent)); outline-offset: 2px; }
  .dl-link strong::after { content: " →"; color: var(--mv-accent-fg); }
  .dl-link span { color: var(--mv-fg-muted); font-size: .9375rem; }

  /* Footer, as on the home page */
  .footer { margin-top: clamp(3rem, 8vw, 5rem); border-top: 1px solid var(--mv-border); font-size: .8125rem; color: var(--mv-fg-subtle); }
  .footer-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.75rem; }
  .footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
  .footer a { color: inherit !important; text-decoration: none; }
  .footer a:hover { color: var(--mv-fg) !important; }
  .i18n-report { margin-top: 0; }

  @media (forced-colors: active) {
    .dl-status, .dl-cmd, .dl-link { border-color: CanvasText; }
  }
}