/* ==========================================================================
   MARK One – Software page. Builds on style.css + hardware.css + appstore.css (same layers, tokens, header, footer, bands, tiles).
   Mobile-first; from 1100px up it is the 1920px design scaled with --u.
   ========================================================================== */

@layer components {

  /* ---------- hero ---------- */
  .sw-hero { background: #8b8a9a; color: #fff; }
  .sw-hero .hw-hero__img::after { display: none; }
  .sw-hero .hw-hero__img img { object-position: var(--op, 50% 40%); }

  /* ---------- sections ---------- */
  .sw-sec { position: relative; background: var(--bg); text-align: center; isolation: isolate; }
  .sw-top { background: #fff; }
  .sw-top .teaser { padding-bottom: 0; }
  .sw-mosaic { margin-top: 0; }
  .sw-m:not(.as-rp) { aspect-ratio: var(--ar, 1 / 1); }
  .sw-m, .sw-c, .sw-d1, .sw-a { align-self: start; --r: 14px; }
  .sw-bw { position: relative; isolation: isolate; }
  .sw-bw--ic { padding-top: clamp(210px, 58vw, 300px); }
  .sw-cloud { aspect-ratio: auto; display: grid; place-items: center; padding: 26px 16px; min-height: 92px; }
  .sw-cloud .rt { position: static; transform: none; text-align: center; font-size: clamp(14px, 4vw, 18px); line-height: 1.25; white-space: normal; }
  .sw-bw--ic .hband__h { margin-top: 0; }
  .sw-uiwrap { background: var(--bg); padding-top: clamp(30px, 8vw, 60px); }
  .sw-top .sw-bw { margin-top: var(--gap); }

  /* ---------- steps ---------- */
  .sw-box { text-align: center; background: #c9c8c8; padding: clamp(34px, 9vw, 60px) 10px 10px; --r: 16px; }
  .sw-int { font-size: clamp(16px, 4.4vw, 22px); line-height: 1.2; letter-spacing: -.02em; margin: 0 auto clamp(26px, 8vw, 44px); max-width: 22em; color: #262626; text-wrap: balance; }
  .sw-stack { display: grid; gap: 10px; text-align: left; }
  .sw-step { display: grid; grid-template-columns: 2em 1fr; column-gap: .2em; row-gap: 10px; align-content: start; padding: clamp(22px, 6vw, 34px) 14px 14px; --r: 14px; }
  .sw-step > *:not(.sw-n):not(.sw-t) { grid-column: 1 / -1; }
  .sw-n, .sw-t { margin: 0; font-size: clamp(24px, 6.6vw, 34px); line-height: 1.2; letter-spacing: -.02em; font-weight: 400; }
  .sw-d { margin: 0 0 6px; font-size: clamp(15px, 4.2vw, 19px); line-height: 1.35; letter-spacing: -.01em; color: #0f0f0f; max-width: 26em; }
  .sw-mk { background: #4d99ee; color: inherit; padding: 2px 8px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .sw-hl { display: none; }
  .sw-shot { aspect-ratio: var(--ar, 16 / 10); position: relative; --r: 10px; }
  .sw-deploy { --r: 12px; margin: 6px -14px -14px; }
  .sw-chev { position: absolute; right: 16px; top: 20px; width: clamp(64px, 20vw, 110px); aspect-ratio: 230 / 155; overflow: hidden; display: block; }
  .sw-chev .bgimg { position: static; }

  /* ---------- tiles (scaled text inside aspect-locked panels: .as-rp / .rt from appstore.css) ---------- */
  .sw-cardwrap { grid-template-columns: 1fr; }
  .sw-dgrid, .sw-agrid { grid-template-columns: 1fr 1fr; margin-top: clamp(30px, 9vw, 64px); }
  .sw-agrid { grid-template-columns: 1fr; }
  .sw-cardwrap { margin-top: 0; }
  .sw-d1.span2, .sw-a.span2 { grid-column: 1 / -1; }
  /* the torso melts into the pink towards the bottom, as in the design */
  .sw-torso .ph { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, rgba(0,0,0,.5) 66%, transparent 86%); mask-image: linear-gradient(to bottom, #000 0, #000 46%, rgba(0,0,0,.5) 66%, transparent 86%); }
  .sw-a .rt, .sw-d1 .rt, .sw-c .rt, .sw-m .rt { font-size: max(10px, calc(var(--s) / var(--pw) * 100cqw)); }
}

@layer desktop {
  @media (min-width: 1100px) {
    .sw-hero { min-height: 0; background: #000; }
    .sw-sec { padding: 0; text-align: initial; }
    .sw-top { background: linear-gradient(#fff calc(var(--u) * 1483), var(--bg) 0); }
    .sw-bw, .sw-bw--ic { display: contents; padding: 0; margin: 0; }
    .sw-top .sw-bw { margin: 0; }
    .sw-uiwrap, .sw-mosaic, .sw-dgrid, .sw-agrid, .sw-cardwrap { padding: 0; margin: 0; background: none; }
    .sw-m:not(.as-rp), .sw-shot, .sw-d1, .sw-a { aspect-ratio: auto; }
    .sw-m, .sw-c, .sw-d1, .sw-a { align-self: auto; }
    .sw-box { padding: 0; }
    .sw-stack { display: contents; }
    .sw-step { display: block; padding: 0; }
    .sw-step > *:not(.sw-n):not(.sw-t) { grid-column: auto; }
    .sw-n, .sw-t, .sw-d, .sw-int { max-width: none; margin: 0; font-weight: inherit; }
    .sw-int { text-wrap: nowrap; }
    .sw-t, .sw-n { font-weight: 400; }
    .sw-hl { display: block; position: absolute; left: calc(var(--u) * var(--px)); top: calc(var(--u) * var(--py)); width: calc(var(--u) * var(--pw)); height: calc(var(--u) * var(--ph));
      border-radius: calc(var(--u) * var(--pr)); background: #4d99ee; }
    .sw-mk { background: none; padding: 0; border-radius: 0; }
    .sw-chev { right: auto; left: calc(var(--u) * var(--px)); top: calc(var(--u) * var(--py)); width: calc(var(--u) * var(--pw)); height: calc(var(--u) * var(--ph)); max-width: none; aspect-ratio: auto; }
    .sw-chev .bgimg { position: absolute; }
    .sw-deploy { margin: 0; }
    .sw-cloud { display: block; padding: 0; min-height: 0; }
    .sw-cloud .rt { position: absolute; font-size: calc(var(--u) * var(--s)); line-height: calc(var(--u) * var(--l)); white-space: nowrap; }
    .sw-cloud .rt.c { transform: translateX(-50%); }
    .sw-a .rt, .sw-d1 .rt, .sw-c .rt, .sw-m .rt { font-size: calc(var(--u) * var(--s)); }
    /* TeX Gyre Heros sits ~.035em higher than Helvetica Now in the same line box: nudge baselines onto the designer's */
    body.sw-page .t, body.sw-page .rt { top: calc(var(--u) * (var(--b) - var(--l) / 2 - .397 * var(--s))); }
  }
}

@layer components {
  @media (max-width: 359.98px) { .sw-a .rt, .sw-d1 .rt, .sw-c .rt, .sw-m .rt { font-size: max(9px, calc(var(--s) / var(--pw) * 100cqw)); } }
}