/* iMac M6 product page – L breakpoint (2880px PSB artboard rendered at 1x = 1440 CSS px) */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; }
body {
  font-family: "Helvetica Neue", "SF Pro Text", "SF Pro Display", Helvetica, Arial, sans-serif;
  color: #1d1d1f;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.stage { overflow: hidden; }
/* left:50% + -720px keeps the 1440px canvas centred; narrower screens clip the empty side margins instead of scrolling */
.page { position: relative; left: 50%; width: 1440px; height: 8790px; margin: 0 0 0 -720px; overflow: visible; }
.a { position: absolute; margin: 0; padding: 0; font-weight: inherigott; }
.a img, img.a { display: block; max-width: none; }
.card { overflow: hidden; }
.t { white-space: nowrap; }
.t a, .legal a { color: inherit; text-decoration: none; }
a.t { color: #06c; text-decoration: none; }
a.t:hover { text-decoration: underline; }
.buy { display: block; }
.buy:focus-visible, a.t:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.t.wrap { white-space: normal; }
sup.fn { font-size: .55em; line-height: 0; vertical-align: baseline; position: relative; top: -0.55em; }
[hidden] { display: none !important; }

.footer { background: #f5f5f7; }
.footer-inner { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; height: 704px; }
.legal { width: min(980px, 100% - 32px); margin: 0 auto; padding-top: 19px; color: #6e6e73; font-size: 12px; line-height: 16px; font-weight: 400; position: relative; }
.legal p { margin: 0 0 9px; }
.legal p strong { font-weight: 500; }
.legal a { color: #424245; }
.legal a:hover { text-decoration: underline; }

/* Grouping wrappers (.g) only matter below 1100px. On desktop they generate no box,
   so the absolutely positioned canvas above renders exactly as designed. */
.g { display: contents; }
.m-alt { display: none; }

/* ===== Tablet + phone (< 1100px): the canvas reflows into stacked cards ===== */
@media (max-width: 1099.98px) {
  .page { left: auto; width: auto; height: auto; max-width: 980px; margin: 0 auto; padding: 0 16px 48px;
          display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .page > section { position: relative; isolation: isolate; min-width: 0; }

  /* In-flow elements drop their canvas coordinates (left/top are ignored once static) */
  .page .a:not(.cv .a) { position: static; }
  .page .a:not(.cv .a):not(img) { width: auto !important; }
  .page img:not(.cv img) { max-width: 100%; height: auto; }
  .page .t:not(.cv .t) { white-space: normal; }
  .page .t:not(.cv .t) br { display: none; }
  /* A card's coloured panel becomes the background of its wrapper */
  .page .card:not(.cv .card) { position: absolute; inset: 0; left: 0 !important; top: 0 !important;
                               width: auto !important; height: auto !important; z-index: -1; }
  .page .box { display: block; position: relative; isolation: isolate; border-radius: 18px; overflow: hidden; }

  /* Tile windows: image-led tiles keep their exact desktop composition, scaled to the
     available width. tan(atan2(a, b)) is the unitless ratio a / b. */
  .page .w { display: block; position: relative; overflow: hidden; border-radius: 18px;
             aspect-ratio: var(--w) / var(--h); container-type: inline-size; }
  .page .w > .cv { display: block; position: absolute; left: 0; top: 0; width: 1440px; height: 0; transform-origin: 0 0;
                   transform: scale(var(--s, tan(atan2(100cqw, var(--w) * 1px)))) translate(calc(var(--x) * -1px), calc(var(--y) * -1px)); }

  /* Shared card pattern */
  #section_4, #section_5, #section_6, #section_12, #section_15, #section_16, #section_17, #section_17_without-inrxxx,
  #section_2, #section_9 { border-radius: 18px; overflow: hidden; }
  #section_4, #section_5, #section_6 { display: flex; flex-direction: column; align-items: center; text-align: center;
                                       gap: 12px; padding: 36px 24px 0; }
  #section_4 p, #section_5 p { font-size: 17px !important; line-height: 25px !important; }
  #section_4 > div.a:last-child, #section_6 > div.a:last-child { margin-top: auto; padding-top: 12px; }
  #section_5 { justify-content: center; padding: 40px 24px; }

  /* 1 – hero */
  #section_1 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 40px 0 28px; }
  #section_1 > div.a:nth-child(3) { margin: 8px 0; }
  #section_1 > p { max-width: 640px; font-size: 17px !important; line-height: 25px !important; }

  /* 2 – performance */
  #section_2 .m-txt { display: flex; flex-direction: column; gap: 16px; padding: 32px 24px 24px; }
  #section_2 .m-stats { display: flex; gap: 24px; }
  #section_2 .m-stat { display: flex; flex-direction: column; gap: 6px; flex: 1; }
  #section_2 .m-stat p { font-size: 17px !important; line-height: 21px !important; }

  /* 9 – ports */
  #section_9 { display: flex; flex-direction: column; align-items: center; background: #ffedf1; text-align: center; padding-bottom: 32px; }
  #section_9 > div.a:first-child, #section_9 .m-feats { align-self: stretch; }
  /* show only the top band of the card artwork (the ports), not its empty lower half */
  #section_9 > div.a:first-child { overflow: hidden; aspect-ratio: 982 / 240; }
  #section_9 > div.a:first-child img { width: 100%; }
  #section_9 > h2 { margin: 20px 24px 24px; }
  #section_9 .m-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 16px; }
  #section_9 .m-feat { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  #section_9 .m-feat p { font-size: 17px !important; line-height: 21px !important; }

  /* 12 – upgrade */
  #section_12 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 12px 12px; }
  #section_12 .m-tiles { display: grid; gap: 12px; width: 100%; margin-top: 12px; }
  #section_12 .m-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px 20px; }
  #section_12 .m-tile:nth-child(1), #section_12 .m-tile:nth-child(4) { padding-bottom: 0; }
  #section_12 .m-tile:nth-child(1) > div.a:last-child, #section_12 .m-tile:nth-child(4) > div.a:last-child { margin-top: auto; }
  #section_12 .m-alt { font-size: 14px; line-height: 20px; font-weight: 500; color: #6e6e73; }
  #section_12 .m-alt b { color: #1d1d1f; font-weight: 600; }

  /* 13 – new to Mac */
  #section_13 { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 36px; }
  #section_13 .m-tiles { display: grid; gap: 12px; width: 100%; }
  #section_13 .m-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px; text-align: center; }

  /* 14 – compare: one row-major 3-column grid, one cell per product */
  #section_14 { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 48px; }
  #section_14 .m-cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 18px;
                       width: 100%; max-width: 720px; margin-top: 32px; }
  #section_14 .m-c { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
  #section_14 .m-c:nth-child(n+7):nth-child(-n+9) { justify-content: flex-end; }
  #section_14 .m-c span { display: block; }

  /* 15–17 – feature cards */
  #section_15, #section_16, #section_17, #section_17_without-inrxxx { display: flex; flex-direction: column; gap: 24px; padding: 32px 24px 24px; }
  :is(#section_15, #section_16, #section_17, #section_17_without-inrxxx) .m-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  :is(#section_15, #section_16, #section_17, #section_17_without-inrxxx) > div.a:last-child { align-self: center; }
  .page .m-link { display: inline-flex; align-items: center; gap: 6px; }

  .footer-inner { height: auto; padding-bottom: 32px; }
}

/* ===== Tablet (735–1099px): two-column grid, image-led bento shown whole ===== */
@media (min-width: 735px) and (max-width: 1099.98px) {
  .page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 24px 64px; }
  .page > section { grid-column: 1 / -1; }
  #section_4, #section_5, #section_7, #section_8, #section_10, #section_11 { grid-column: auto; }
  .page .w-ph, .page .w-ph > .cv { display: contents; }

  #section_1 > p:first-of-type { font-size: 21px !important; line-height: 29px !important; }
  #section_2 { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  #section_2 .m-txt { order: 2; }
  #section_2 > div.a:last-child { order: 1; align-self: end; }
  #section_12 .m-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #section_13 .m-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #section_15, #section_16, #section_17, #section_17_without-inrxxx { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 32px; }
}

/* ===== Phone (< 735px): single column ===== */
@media (max-width: 734.98px) {
  .page .w-tab, .page .w-tab > .cv { display: contents; }
  .page .m-s3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .page .s3-pink, .page .s3-blue { grid-column: 1 / -1; }
  .page .s3-purple { grid-column: 1; grid-row: 2; }
  .page .s3-green { grid-column: 1; grid-row: 3; }
  .page .s3-yellow { grid-column: 2; grid-row: 2 / span 2; aspect-ratio: auto; }

  /* Wide single-line heading images would shrink below legible size: show live text instead */
  .page .m-img { display: none; }
  .page .m-alt { display: block; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; }
  #section_6 .m-alt { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; color: #1459b6; }

  #section_9 > div.a:first-child { aspect-ratio: 12 / 5; }
  #section_9 > div.a:first-child img { width: 170%; max-width: none; margin-left: -35%; }
  #section_9 .m-feats { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}