/* ==== Download everywhere v2 (Archie, 31 Oct 2026) ====
   Papa, 30 Oct 22:07: the download button needs to be displayed up top in the three-item menu bar.
   Papa, 31 Oct 06:44: do everything, and make sure the downloads link and page are visible.
   This one stylesheet styles four things, all added by apply_download_everywhere.py, all marked data-kit="dl2":
     1. the Download pill, last item of the top menu on every page   (a.nav-download)
     2. the Download button in the homepage hero                     (a.hero-download)
     3. the Download link in the footer links of every page          (a.footer-download)
     4. the two-row header that keeps LOGIN and Download on screen at every width.
   Loaded last, after every other stylesheet. The label-floor rule on `.studio-nav a` (font-family and font-size, !important)
   is left alone on purpose: the pill takes the same size as Atlas, Explore and Platforms.
   The selectors also match any other link to /downloads/ that sits directly in the menu or footer, so a copy of the link
   that was added by hand earlier looks the same as this one. */

/* ---------- 1. the pill ---------- */
html body header.header .studio-nav > a.nav-download,
html body header.header .studio-nav > a[href="/downloads/"] {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 9px;
  padding: 9px 17px;
  border: 1px solid #ff6a1f;
  border-radius: 99px;
  background: rgba(255, 106, 31, 0.14);
  color: #f3f0e7;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
html body header.header .studio-nav > a.nav-download span,
html body header.header .studio-nav > a[href="/downloads/"] span {
  color: #ff6a1f;
  line-height: 1;
  transition: color 0.2s;
}
html body header.header .studio-nav > a.nav-download:hover,
html body header.header .studio-nav > a.nav-download:focus-visible,
html body header.header .studio-nav > a.nav-download[aria-current="page"],
html body header.header .studio-nav > a[href="/downloads/"]:hover,
html body header.header .studio-nav > a[href="/downloads/"]:focus-visible,
html body header.header .studio-nav > a[href="/downloads/"][aria-current="page"] {
  background: #ff6a1f;
  color: #110e0b;
}
html body header.header .studio-nav > a.nav-download:hover span,
html body header.header .studio-nav > a.nav-download:focus-visible span,
html body header.header .studio-nav > a.nav-download[aria-current="page"] span,
html body header.header .studio-nav > a[href="/downloads/"]:hover span,
html body header.header .studio-nav > a[href="/downloads/"]:focus-visible span,
html body header.header .studio-nav > a[href="/downloads/"][aria-current="page"] span {
  color: #110e0b;
}
html body header.header .studio-nav > a.nav-download:focus-visible,
html body header.header .studio-nav > a[href="/downloads/"]:focus-visible {
  outline: 2px solid #f3f0e7;
  outline-offset: 3px;
}

/* ---------- 2. homepage hero button ---------- */
html body .hero-actions a.hero-download {
  gap: 14px;
  border-color: #ff6a1f;
  background: rgba(255, 106, 31, 0.12);
  color: #f3f0e7;
}
html body .hero-actions a.hero-download .arrow { color: #ff6a1f; transition: color 0.2s; }
html body .hero-actions a.hero-download:hover,
html body .hero-actions a.hero-download:focus-visible { background: #ff6a1f; color: #110e0b; }
html body .hero-actions a.hero-download:hover .arrow,
html body .hero-actions a.hero-download:focus-visible .arrow { color: #110e0b; }

/* ---------- 3. footer link ---------- */
html body .footer-links > a.footer-download,
html body .footer-links > a[href="/downloads/"] { color: #f3f0e7; font-weight: 600; }
html body .footer-links > a.footer-download:hover,
html body .footer-links > a[href="/downloads/"]:hover { color: #ff6a1f; }

/* ---------- 4. two-row header ----------
   One row holds the brand, the four menu items and LOGIN only from 1360 px up. Below that the header takes a second row:
   brand and LOGIN on the first, the menu on the second, Download at its right end under LOGIN.
   Dropdown panels stay under the header whatever its height: 420 px panels line up with their button from 781 px,
   and span the header from 780 px down. */
@media (max-width: 1360px) {
  html body .atlas-studio header.header {
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
    padding-block: 8px 6px;
  }
  html body .atlas-studio header.header .brand { order: 1; }
  html body .atlas-studio header.header .portal-login { order: 2; margin-left: auto; }
  html body .atlas-studio header.header .studio-nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    gap: 0 26px;
  }
  html body .atlas-studio header.header .studio-nav > button,
  html body .atlas-studio header.header .studio-nav .nav-pop > button { padding-block: 5px; }
  html body .atlas-studio header.header .studio-nav > a.nav-download,
  html body .atlas-studio header.header .studio-nav > a[href="/downloads/"] { margin-left: auto; padding: 6px 15px; }
  html body .atlas-studio header.header .studio-nav .quiet-menu {
    top: calc(100% + 12px);
    left: 0;
    right: auto;
    max-height: calc(100dvh - 190px);
  }
}
@media (max-width: 780px) {
  html body .atlas-studio header.header .studio-nav { gap: 0 20px; }
  html body .atlas-studio header.header .studio-nav .nav-pop { position: static; }
  html body .atlas-studio header.header .studio-nav .quiet-menu {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    top: calc(100% + 8px);
  }
}
@media (max-width: 400px) {
  html body .atlas-studio header.header .studio-nav { gap: 0 14px; }
  html body header.header .studio-nav > a.nav-download,
  html body header.header .studio-nav > a[href="/downloads/"] { font-size: 15px !important; gap: 6px; padding: 5px 12px; }
}

/* ---------- 5. the downloads page on a phone ----------
   The page stacks its picture first on a phone (meet-atlas.css: .dl-hero-art { order: -1 }), which pushes the two installer
   buttons about 230 px below the first screen. Here the headline and the buttons come first and the picture follows. */
@media (max-width: 760px) {
  html body .downloads-clean .dl-hero-art { order: 1; }
  html body .downloads-clean .dl-hero > div:first-child { display: flex; flex-direction: column; }
  html body .downloads-clean .dl-hero .eyebrow { order: 1; }
  html body .downloads-clean .dl-hero h1 { order: 2; }
  html body .downloads-clean .dl-hero .dl-cta { order: 3; margin-top: 4px; }
  html body .downloads-clean .dl-hero .lead { order: 4; }
  html body .downloads-clean .dl-hero .download-release { order: 5; }
}

/* Very small windows: recover vertical space on the downloads hero so both installer buttons stay on the first screen. */
@media (max-width: 400px) {
  html body .downloads-clean .dl-hero { padding-top: 14px; }
  html body .downloads-clean .dl-hero .eyebrow { margin-block: 6px; }
  html body .downloads-clean .dl-hero h1 { margin-bottom: 16px; }
}
/* Type rescue, 2 Nov 2026 (Lauren). Additive; each rule beats the site's type-scale rule by one extra id.
   1. The lead paragraph under a page hero (Tech and the other pages built on .page-hero-bottom) was being set at the big
      hero-lead size (23px) with no gap under the buttons. It goes back to a reading size with room above it.
   2. The home page's "What's included" link was bigger and bolder than every other link around it. It now sits at the
      same quiet size as "Free Beta, Available Now" and the menu links. */
:root:not(#_):not(#ts):not(#rescue) body main .page-hero-bottom > p{
  font-size:18px!important;line-height:1.7!important;margin-top:28px!important;max-width:64ch;color:rgba(225,231,240,.78);font-weight:400!important;letter-spacing:0;
}
@media (max-width:580px){
  :root:not(#_):not(#ts):not(#rescue) body main .page-hero-bottom > p{font-size:16px!important;margin-top:22px!important}
}
:root:not(#_):not(#ts):not(#rescue) body .wi-home-entry{margin:14px 0 0!important}
:root:not(#_):not(#ts):not(#rescue) body .wi-home-entry>a{
  font-size:13px!important;font-weight:600;letter-spacing:.12em;min-height:0;padding:4px 0;gap:8px;
}
/* Compare board colours as one ordered spectrum, sunrise to night (Papa, 2 Nov: the six colours read as a disorganized set).
   Dawn orange at Atlas herself, then amber, rose, violet, indigo, and the deep blue of night at Protection. Colour only; nothing else changes. */
html body .cmpx-board .cmpx-col[data-cat="herself"]{--fam:#ff8a2a!important}
html body .cmpx-board .cmpx-col[data-cat="memory"]{--fam:#ffb84d!important}
html body .cmpx-board .cmpx-col[data-cat="intelligence"]{--fam:#ff7d8f!important}
html body .cmpx-board .cmpx-col[data-cat="work"]{--fam:#c27cff!important}
html body .cmpx-board .cmpx-col[data-cat="life"]{--fam:#7a86ff!important}
html body .cmpx-board .cmpx-col[data-cat="protection"]{--fam:#4aa3ff!important}
/* Home order walkthrough: colour by role instead of by box (Papa, 2 Nov: "a disorganized union of warts").
   Outside the company = one blue (sender, mail server, recipient); Atlas = her orange; the three people inside the company = one amber.
   Only each box's colour variable changes; layout, text and motion are untouched. */
:root:not(#_):not(#_):not(#_) body #acme-film [data-jr-node="customer"],
:root:not(#_):not(#_):not(#_) body #acme-film [data-jr-node="custout"],
:root:not(#_):not(#_):not(#_) body #acme-film [data-jr-node="mail"]{--c:92,200,255}
:root:not(#_):not(#_):not(#_) body #acme-film [data-jr-node="orders"],
:root:not(#_):not(#_):not(#_) body #acme-film [data-jr-node="operations"],
:root:not(#_):not(#_):not(#_) body #acme-film [data-jr-node="accounts"]{--c:255,184,77}
/* the three wires from Atlas to the people inside the company take the same amber */
:root:not(#_):not(#_):not(#_) body #acme-film .jr-wires .jr-wire:not(.jr-ghost):nth-child(3),
:root:not(#_):not(#_):not(#_) body #acme-film .jr-wires .jr-wire:not(.jr-ghost):nth-child(4),
:root:not(#_):not(#_):not(#_) body #acme-film .jr-wires .jr-wire:not(.jr-ghost):nth-child(5){stroke:rgba(255,184,77,.6)!important}
/* Header frame, one for every page (Papa, 1 Nov: the menu on the home page is different from the others).
   Home and Why Atlas set their header to width:70vw with an !important rule that is meant for their hero; every other page uses the
   site frame. This gives the header on every page the site frame: 22px side margins to 999px, 36px from 1000px, 56px from 1280px,
   never wider than 1452px, centred. It changes the header only. */
:root:not(#hf1):not(#hf2):not(#hf3):not(#hf4) body header.header.wrap{--hm:22px;width:var(--atlas-page-width,min(1452px,calc(100% - 2*var(--hm))))!important;margin-left:auto!important;margin-right:auto!important}
@media(min-width:1000px){:root:not(#hf1):not(#hf2):not(#hf3):not(#hf4) body header.header.wrap{--hm:36px}}
@media(min-width:1280px){:root:not(#hf1):not(#hf2):not(#hf3):not(#hf4) body header.header.wrap{--hm:56px}}