/* The Ultimate's own page, kept like an object in a gallery: near black, one warm light, the lit screen
   as the only color, a serif for the words that matter. buy.css still does the buy steps. */
html:has(body.ultimate) { background: #0b0b0c }
body.ultimate { --ink: #0b0b0c; --panel: #161618; --warm: #f5f1ea; --amber: #ffb547; background: var(--ink); color: var(--warm); font-family: 'Inter', system-ui, sans-serif; letter-spacing: -.011em }
.ux-serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -.015em; line-height: .95 }
.ux-serif em { font-style: italic }
.ux-eyebrow { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--amber) }
.ux-muted { color: rgba(245,241,234,.6) }
.ux-link { color: var(--amber); font-weight: 500 }
.ux-link:hover { text-decoration: underline; text-underline-offset: 4px }
.ux-button { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.4rem; border-radius: 999px; background: var(--warm); color: var(--ink); font-weight: 600; font-size: 15px; transition: background .2s, transform .2s }
.ux-button:hover { background: #fff; transform: translateY(-1px) }
/* Film grain over everything, the one nod to an old print */
body.ultimate::after { content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }

/* Where each finish's screen sits inside its picture, measured off the photographs */
.ult-device { position: relative; display: block; --sx: 17.69%; --sy: 11.69%; --sw: 64.61%; --sh: 37.84% }
.ult-device[data-finish="gray"] { --sx: 15.9%; --sy: 10.4%; --sw: 67.82%; --sh: 43.21% }
.ult-device[data-finish="black"] { --sx: 18.24%; --sy: 8.36%; --sw: 63.52%; --sh: 42.38% }
.ult-device[data-finish="white"] { --sx: 14.35%; --sy: 8.15%; --sw: 70.83%; --sh: 45.1% }
.ult-device > img { display: block; width: 100%; height: auto; position: relative; z-index: 1 }
.ult-screen { position: absolute; z-index: 2; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); overflow: hidden; border-radius: 2px; background: #050506 }
.ult-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; transform: scaleY(.006) scaleX(.5); filter: brightness(2.6); transition: transform .55s cubic-bezier(.2,.9,.2,1), opacity .15s, filter .8s }
.ult-screen.on canvas { opacity: 1; transform: none; filter: none }
.ult-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.09), transparent 35%), repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px) }

/* 1 The hero: the console under one light, then the camera walks into its screen */
.ux-hero { position: relative; height: 330vh }
.ux-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: clamp(84px, 11svh, 120px); text-align: center }
.ux-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 40% at 50% 0%, rgba(255,181,71,.10), transparent 70%) }
.ux-head { position: relative; z-index: 3; padding: 0 20px; will-change: transform, opacity }
.ux-head h1 { font-size: clamp(3.2rem, min(7.4vw, 11svh), 7.4rem) }
.ux-device-wrap { position: relative; z-index: 2; flex: 1; display: flex; align-items: flex-start; justify-content: center; margin-top: clamp(20px, 3svh, 40px); width: 100% }
.ux-hero .ult-device { height: min(58svh, 600px); aspect-ratio: 982 / 1440; will-change: transform }
.ux-hero .ult-device > img { height: 100%; width: 100%; -webkit-box-reflect: below 6px linear-gradient(transparent 82%, rgba(255,255,255,.10)); filter: drop-shadow(0 50px 50px rgba(0,0,0,.7)) }
/* The screen's own light, thrown on the room behind it */
.ux-ambient { position: absolute; z-index: 0; left: 50%; top: 70%; width: min(70vw, 640px); aspect-ratio: 1.2; transform: translate(-50%, -50%); filter: blur(80px) saturate(1.4); opacity: .4; pointer-events: none }
.ux-cap { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 0 clamp(20px, 6vw, 96px) clamp(40px, 9svh, 96px); text-align: left; opacity: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.35) 55%, transparent) }
.ux-cap h2 { font-size: clamp(3.6rem, 9vw, 9rem); color: #fff }
.ux-cap p { max-width: 30rem; font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: rgba(255,255,255,.8) }
.ux-cue { position: absolute; z-index: 3; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 13px; color: rgba(245,241,234,.45) }

/* 2 The statement, lit word by word */
.ux-statement { font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 600 }

/* 3 Finishes: one console, four colors, the light behind it changing with them */
.ux-finish { --tint: rgba(232,38,28,.35); position: relative; overflow: hidden; border-radius: 36px; background: radial-gradient(55% 55% at 50% 45%, var(--tint), transparent 70%), var(--panel); transition: background .6s }
.ux-finish-stage { display: grid; place-items: center; height: clamp(420px, 70svh, 720px) }
.ux-finish-stage img { grid-area: 1 / 1; height: calc(clamp(420px, 70svh, 720px) * .8); width: auto; transition: opacity .45s, transform .6s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 40px 40px rgba(0,0,0,.55)) }
.ux-finish-stage img:not(.is-on) { opacity: 0; transform: translateY(14px) scale(.98) }
.ux-dots { display: flex; justify-content: center; gap: 14px }
.ux-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .2s, transform .2s }
.ux-dot:hover { transform: scale(1.08) }
.ux-dot[aria-pressed="true"] { outline-color: var(--warm) }

/* 4 The numbers, in tiles */
.ux-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px }
.ux-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; min-height: 280px; padding: 2rem; border-radius: 28px; background: var(--panel) }
.ux-tile p { color: rgba(245,241,234,.62); font-size: 1.05rem; line-height: 1.45 }
.ux-tile .ux-big, .ux-big { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; line-height: .9; letter-spacing: -.02em; color: var(--warm); font-size: clamp(3.6rem, 6vw, 5.6rem) }
.ux-glow { background: linear-gradient(180deg, #ffe0a8, #ffb547 55%, #ff7a3d); -webkit-background-clip: text; background-clip: text; color: transparent }
.ux-span-4 { grid-column: span 4; grid-row: span 2; min-height: 576px }
.ux-tile.ux-span-4 .ux-big { font-size: clamp(6rem, 14vw, 13rem) }
.ux-span-3 { grid-column: span 3 }
.ux-span-2 { grid-column: span 2 }
.ux-tile-art { position: absolute; inset: 0; z-index: 0; opacity: .9 }
.ux-tile > :not(.ux-tile-art) { position: relative; z-index: 1 }
/* A wall of tiny screens behind the 18,000 */
.ux-wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; padding: 6px; transform: perspective(900px) rotateX(18deg) scale(1.15) translateY(-12%); -webkit-mask: linear-gradient(180deg, #000 10%, transparent 75%); mask: linear-gradient(180deg, #000 10%, transparent 75%) }
.ux-wall i { aspect-ratio: 1; border-radius: 4px; background: var(--c, #222); opacity: .55 }
.ux-pixels { position: absolute; right: -10px; top: -10px; width: 62%; aspect-ratio: 1; background-image: linear-gradient(rgba(255,181,71,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,181,71,.18) 1px, transparent 1px); background-size: 14px 14px; -webkit-mask: radial-gradient(circle at 70% 30%, #000, transparent 70%); mask: radial-gradient(circle at 70% 30%, #000, transparent 70%) }
@media (max-width: 900px) {
  .ux-bento { grid-template-columns: 1fr 1fr }
  .ux-span-4, .ux-span-3 { grid-column: span 2 }
  .ux-span-4 { min-height: 420px; grid-row: auto }
  .ux-span-2 { grid-column: span 1 }
  .ux-tile { min-height: 220px; padding: 1.4rem }
  .ux-tile .ux-big { font-size: 3rem }
  .ux-span-4 .ux-big { font-size: 6.5rem }
}

/* 5 Compare: the two consoles side by side */
.ux-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 4vw, 64px) }
.ux-compare figure { display: flex; justify-content: center; align-items: flex-end; height: clamp(240px, 36vw, 420px) }
.ux-compare figure img { height: 100%; width: auto; filter: drop-shadow(0 30px 30px rgba(0,0,0,.6)) }
.ux-compare .ux-one img { height: 74% }
.ux-compare dl > div { padding: 1.1rem 0; border-top: 1px solid rgba(245,241,234,.12) }
.ux-compare dt { font-size: 13px; color: rgba(245,241,234,.5) }
.ux-compare dd { margin-top: .2rem; font-size: 1.15rem; font-weight: 600 }

/* 6 In the box and the full list, on warm paper */
.ux-paper { background: var(--warm); color: var(--ink) }
.ux-paper .ux-muted { color: rgba(11,11,12,.6) }
.ux-box { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px }
.ux-box > div { display: flex; flex-direction: column; gap: .35rem; padding: 1.6rem; border-radius: 24px; background: #fff }
.ux-box svg { width: 40px; height: 40px; margin-bottom: 1rem; stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
@media (max-width: 1023px) { .ux-box { grid-template-columns: 1fr 1fr } .ux-box > div:first-child { grid-column: span 2 } }
.ult-specs { border-top: 1px solid rgba(11,11,12,.15) }
.ult-specs div { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding: 1.05rem 0; border-bottom: 1px solid rgba(11,11,12,.15) }
.ult-specs dt { font-size: 14px; color: rgba(11,11,12,.55) }
.ult-specs dd { font-size: 1.1rem; font-weight: 600 }
@media (max-width: 767px) { .ult-specs div { grid-template-columns: 6.5rem 1fr; gap: 1rem } }

/* 7 The buy steps keep buy.css, on white, with the page's own type */
.ux-buy .step-title { letter-spacing: -.02em }
.ux-buy .purchase { background: #0b0b0c; border-radius: 999px }
.ux-buy .purchase:hover:not(:disabled) { background: #2a2a2d }
.ux-buy .swatch[aria-checked="true"], .ux-buy .choice input:checked + .choice-body { outline-color: #0b0b0c; border-color: #0b0b0c; box-shadow: 0 0 0 1px #0b0b0c }

@media (prefers-reduced-motion: reduce) {
  .ux-hero { height: auto }
  .ux-stage { position: relative; height: auto; min-height: 100svh; padding-bottom: 60px }
  .ux-cap, .ux-cue { display: none }
}

/* The numbers either side of the console, while it waits in the middle */
.ux-call { position: absolute; z-index: 3; width: 15rem; opacity: 0; pointer-events: none }
.ux-call b { display: block; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(2.4rem, 3.4vw, 3.4rem); line-height: 1; color: var(--warm) }
.ux-call span { display: block; margin-top: .35rem; font-size: 14px; color: rgba(245,241,234,.6) }
.ux-call-l { right: calc(100% + clamp(24px, 4vw, 64px)); text-align: right }
.ux-call-r { left: calc(100% + clamp(24px, 4vw, 64px)); text-align: left }
.ux-call-1 { top: 16% } .ux-call-2 { top: 22% } .ux-call-3 { top: 58% } .ux-call-4 { top: 64% }
@media (max-width: 900px) { .ux-call { display: none } }