/* reevemods.com */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(type/bricolage.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(type/dmsans.woff2) format("woff2"); }

:root {
  --night: #071018; --deep: #0b1a24; --panel: #0f222e; --rule: #1d3645;
  --foam: #eef8f8; --mist: #9db6bf;
  --aqua: #2fe3d0; --pink: #ff4d8d; --sun: #ffb347;
  --sunset: linear-gradient(95deg, #ff4d8d 0%, #ff7a5c 55%, #ffb347 100%);
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --text: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --measure: 1160px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--night); color: var(--foam); font: 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--aqua); }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
.shell { width: min(var(--measure), 100% - 40px); margin-inline: auto; }

/* ---- buttons ---- */
.go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 4px; font: 700 15px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
.go-sun { background: var(--sunset); color: #1b0a12; box-shadow: 0 10px 30px -10px rgba(255, 77, 141, .7); }
.go-sun:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgba(255, 122, 92, .85); }
.go-line { color: var(--foam); border: 1.5px solid rgba(238, 248, 248, .45); background: rgba(7, 16, 24, .35); backdrop-filter: blur(6px); }
.go-line:hover { border-color: var(--aqua); color: var(--aqua); }
.go-small { min-height: 40px; padding: 0 16px; font-size: 13px; }

/* ---- masthead (sits on top of the hero, scrolls away with it) ---- */
.masthead { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.masthead .shell { display: flex; align-items: center; gap: 28px; padding-block: 22px; }
.masthead .mark img { height: 34px; width: auto; }
.masthead nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.masthead nav a:not(.go) { color: var(--foam); text-decoration: none; font-weight: 500; font-size: 15px; opacity: .85; }
.masthead nav a:not(.go):hover { opacity: 1; color: var(--aqua); }

/* ---- hero ---- */
.hero { position: relative; min-height: max(100svh, 680px); display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; }
.hero > picture, .hero > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(7, 16, 24, .62), rgba(7, 16, 24, .2) 70%),
    linear-gradient(180deg, rgba(7, 16, 24, .75) 0%, rgba(7, 16, 24, .15) 28%, rgba(7, 16, 24, .35) 62%, var(--night) 100%); }
.hero-body { padding: 110px 0 70px; display: grid; justify-items: center; gap: 22px; }
.kicker { font: 600 13px/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--aqua); }
.hero-logo { width: min(520px, 72vw); filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .65)); }
.hero h1 { font-size: clamp(30px, 4.6vw, 58px); font-weight: 800; max-width: 16ch; text-wrap: balance; }
.hero h1 em { font-style: normal; background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { max-width: 62ch; color: #d6e8ea; font-size: clamp(16px, 1.35vw, 19px); text-wrap: pretty; }
.hero .choices { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 6px; }
.status { font-size: 14px; color: var(--mist); max-width: 60ch; }
.status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); margin-right: 10px; box-shadow: 0 0 0 4px rgba(255, 179, 71, .18); }

/* ---- facts strip ---- */
.facts { border-block: 1px solid var(--rule); background: var(--deep); }
.facts .shell { display: grid; grid-template-columns: repeat(4, 1fr); }
.facts div { padding: 26px 22px; border-left: 1px solid var(--rule); }
.facts div:first-child { border-left: 0; padding-left: 0; }
.facts strong { display: block; font: 800 22px/1.15 var(--display); letter-spacing: -.01em; }
.facts span { color: var(--mist); font-size: 14.5px; }

/* ---- section heads ---- */
.band { padding: 96px 0 0; }
.head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 52px; }
.head h2 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 800; text-wrap: balance; }
.head p { color: var(--mist); font-size: 18px; }
.tag { justify-self: start; font: 700 12px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; padding: 8px 12px; border-radius: 3px; }
.tag-both { color: var(--aqua); border: 1px solid rgba(47, 227, 208, .45); }
.tag-full { color: #1b0a12; background: var(--sunset); }

/* ---- feature rows (renderer) ---- */
.rows { display: grid; gap: 84px; }
.row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.row.flip .shot { order: 2; }
.shot { position: relative; border-radius: 6px; overflow: hidden; background: var(--panel); aspect-ratio: 16 / 9; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot.pair { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: none; box-shadow: none; overflow: visible; }
.shot.pair img, .shot.pair video { aspect-ratio: 4 / 5; border-radius: 6px; width: 100%; height: auto; object-fit: cover; display: block; background: var(--panel); }
.row h3 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; margin-bottom: 18px; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.points li { position: relative; padding-left: 22px; color: #cfe2e5; }
.points li::before { content: ""; position: absolute; left: 0; top: .68em; width: 10px; height: 2px; background: var(--aqua); }
.points strong { color: var(--foam); }
.only { font: 700 11px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--sun); border: 1px solid rgba(255, 179, 71, .5); border-radius: 3px; padding: 3px 6px; margin-left: 6px; white-space: nowrap; vertical-align: 1px; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; margin-top: 84px; }
.tiles article { background: var(--deep); padding: 28px 26px 30px; }
.tiles h3 { font-size: 21px; font-weight: 700; margin-bottom: 14px; }
.tiles .points { gap: 9px; font-size: 15.5px; }

/* ---- only in Full ---- */
.full-band { margin-top: 110px; padding: 96px 0 100px; position: relative; background:
    radial-gradient(900px 420px at 85% 0%, rgba(255, 77, 141, .16), transparent 65%),
    radial-gradient(800px 380px at 5% 100%, rgba(255, 179, 71, .12), transparent 65%), var(--deep); }
.full-band::before, .full-band::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--sunset); }
.full-band::before { top: 0; } .full-band::after { bottom: 0; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.card { background: var(--night); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.card .shot { border-radius: 0; box-shadow: none; }
.card .shot img, .card .shot video { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.card:hover .shot img, .card:hover .shot video { transform: scale(1.05); }
.card-body { padding: 26px 28px 30px; }
.card h3 { font-size: 26px; font-weight: 800; margin-bottom: 14px; }
.card .points { font-size: 16px; }
.also { margin-top: 26px; border: 1px solid var(--rule); border-radius: 6px; background: var(--night); padding: 28px; display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.also h3 { font-size: 24px; font-weight: 800; }
.also ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; }
.also li { position: relative; padding-left: 20px; color: #cfe2e5; font-size: 16px; }
.also li::before { content: "+"; position: absolute; left: 0; color: var(--pink); font-weight: 700; }
.full-cta { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.full-cta p { color: var(--mist); max-width: 46ch; }

/* ---- compare table ---- */
.sheet { border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--deep); }
.sheet table { width: 100%; border-collapse: collapse; }
.sheet th, .sheet td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.sheet thead th { font: 800 20px/1.1 var(--display); padding-block: 22px; background: var(--night); }
.sheet thead th small { display: block; font: 500 13px/1.3 var(--text); color: var(--mist); letter-spacing: 0; margin-top: 4px; }
.sheet th:nth-child(n+2), .sheet td:nth-child(n+2) { width: 21%; text-align: center; }
.sheet td:nth-child(3), .sheet thead th:nth-child(3) { background: rgba(255, 77, 141, .07); }
.sheet thead th:nth-child(3) { box-shadow: inset 0 3px 0 var(--pink); }
.sheet tr.group td { font: 700 12px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--aqua); background: var(--night); padding-block: 12px; }
.sheet tbody tr:last-child td { border-bottom: 0; }
.sheet td:first-child { color: #cfe2e5; }
.yes, .no { display: inline-block; font-size: 0; vertical-align: middle; }
.yes { width: 12px; height: 12px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 4px rgba(47, 227, 208, .15); }
.sheet td:nth-child(3) .yes { background: var(--pink); box-shadow: 0 0 0 4px rgba(255, 77, 141, .18); }
.no { width: 14px; height: 2px; background: #3c5564; }
.val { font-weight: 600; font-size: 15px; color: var(--foam); }
.sheet tfoot td { background: var(--night); border-bottom: 0; padding-block: 20px; }
.note { color: var(--mist); font-size: 14.5px; margin-top: 18px; }

/* ---- editions / get it ---- */
.get { position: relative; margin-top: 110px; padding: 110px 0; overflow: hidden; isolation: isolate; }
.get > .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.get::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--night) 0%, rgba(7, 16, 24, .42) 22%, rgba(7, 16, 24, .38) 60%, rgba(7, 16, 24, .7) 86%, var(--night) 100%); }
.get .head h2, .get .head p { text-shadow: 0 2px 18px rgba(7, 16, 24, .9); }
.get .head p { color: #d6e8ea; }
.get .head { margin-inline: auto; text-align: center; justify-items: center; }
.editions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; align-items: stretch; }
.edition { background: rgba(11, 26, 36, .88); backdrop-filter: blur(10px); border: 1px solid var(--rule); border-radius: 6px; padding: 34px 32px; display: flex; flex-direction: column; gap: 18px; }
.edition.is-full { border-color: transparent; background: linear-gradient(rgba(11, 26, 36, .94), rgba(11, 26, 36, .94)) padding-box, var(--sunset) border-box; border: 2px solid transparent; box-shadow: 0 30px 80px -30px rgba(255, 77, 141, .55); }
.edition h3 { font-size: 30px; font-weight: 800; }
.edition .price { font: 800 15px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); }
.edition.is-full .price { color: var(--sun); }
.edition > p { color: var(--mist); }
.edition .points { font-size: 16px; }
.platforms { margin-top: auto; padding-top: 10px; display: grid; gap: 10px; }
.platforms .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.platforms small { color: var(--mist); font-size: 13.5px; text-align: center; }

/* ---- gallery ---- */
.frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.frames a { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--panel); }
.frames a:first-child { grid-column: span 2; grid-row: span 2; }
.frames img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease, filter .3s ease; filter: saturate(.92); }
.frames a:hover img { transform: scale(1.06); filter: saturate(1.1); }

/* ---- small print + footer ---- */
.fine { margin-top: 96px; border-top: 1px solid var(--rule); padding: 44px 0; }
.fine .shell { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.fine h3 { font: 700 12px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--aqua); margin-bottom: 12px; }
.fine p { color: var(--mist); font-size: 15px; }
.fine a { color: var(--aqua); }
.colophon { border-top: 1px solid var(--rule); padding: 30px 0 44px; }
.colophon .shell { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.colophon img { height: 26px; width: auto; opacity: .9; }
.colophon nav { margin-left: auto; display: flex; gap: 22px; }
.colophon a { color: var(--mist); text-decoration: none; font-size: 15px; }
.colophon a:hover { color: var(--aqua); }
.colophon small { flex-basis: 100%; color: #6f8791; font-size: 13.5px; }

/* ---- viewer ---- */
.viewer { position: fixed; inset: 0; z-index: 50; background: rgba(4, 10, 15, .95); display: none; place-items: center; }
.viewer[open] { display: grid; }
.viewer img { max-width: 94vw; max-height: 88vh; border-radius: 4px; }
.viewer button { position: absolute; width: 46px; height: 46px; border-radius: 4px; border: 1px solid var(--rule); background: var(--deep); color: var(--foam); font-size: 20px; cursor: pointer; }
.viewer button:hover { border-color: var(--aqua); color: var(--aqua); }
.viewer .v-close { top: 16px; right: 16px; }
.viewer .v-prev { left: 16px; top: 50%; translate: 0 -50%; }
.viewer .v-next { right: 16px; top: 50%; translate: 0 -50%; }
.viewer output { position: absolute; bottom: 16px; left: 50%; translate: -50% 0; color: var(--mist); font-size: 13px; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .row, .row.flip { grid-template-columns: 1fr; gap: 26px; }
  .row.flip .shot { order: 0; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .facts .shell { grid-template-columns: repeat(2, 1fr); }
  .facts div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .editions { grid-template-columns: 1fr; }
  .edition.is-full { order: -1; }
  .also { grid-template-columns: 1fr; }
  .fine .shell { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .masthead nav a:not(.go) { display: none; }
  .masthead .mark img { height: 28px; }
  .hero-body { padding: 96px 0 56px; gap: 18px; }
  .hero .choices { width: 100%; }
  .hero .choices .go { flex: 1 1 100%; }
  .band { padding-top: 68px; }
  .head { margin-bottom: 34px; }
  .rows { gap: 56px; }
  .tiles, .cards { grid-template-columns: 1fr; }
  .tiles { margin-top: 56px; }
  .full-band { margin-top: 72px; padding: 68px 0 72px; }
  .also ul { grid-template-columns: 1fr; }
  .full-cta .go { width: 100%; }
  .sheet th, .sheet td { padding: 12px 12px; font-size: 14.5px; }
  .sheet thead th { font-size: 17px; }
  .sheet th:nth-child(n+2), .sheet td:nth-child(n+2) { width: 24%; }
  .get { margin-top: 72px; padding: 72px 0; }
  .edition { padding: 26px 22px; }
  .platforms .pair { grid-template-columns: 1fr; }
  .frames { grid-template-columns: repeat(2, 1fr); }
  .frames a:first-child { grid-column: span 2; grid-row: auto; }
  .colophon nav { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
dialog.viewer { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; color: inherit; }
dialog.viewer::backdrop { background: transparent; }
/* keep the buttons on the first screen even on short windows */
.hero-logo { width: auto; max-width: min(520px, 72vw); max-height: 34svh; object-fit: contain; }

/* ---- hero slideshow ---- */
.reel { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--night); }
.reel-slide { position: absolute; inset: 0; overflow: hidden; }
.reel-slide > img, .reel-slide > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* A clip fades in from the dark page when it starts playing, so there is never a jump from a
   placeholder picture to the video. The still picture is only a fallback for slow connections. */
.reel-slide > video { opacity: 0; transition: opacity 1.6s ease; }
.reel-slide > video.on { opacity: 1; }
.reel-slide > video.now { transition: none; }
.reel-live .reel-slide > .still { opacity: 0; transition: opacity 1.2s ease; }
.reel-live .reel-slide > .still.on { opacity: 1; }
.reel-slide + .reel-slide { opacity: 0; }
.hero::before { background:
    radial-gradient(ellipse 70% 55% at 50% 46%, rgba(7, 16, 24, .68), rgba(7, 16, 24, .28) 72%),
    linear-gradient(180deg, rgba(7, 16, 24, .8) 0%, rgba(7, 16, 24, .25) 28%, rgba(7, 16, 24, .4) 62%, var(--night) 100%); }
.reel-ticks { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.reel-ticks button { position: relative; width: 46px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.reel-ticks button::before, .reel-ticks i { content: ""; position: absolute; left: 0; top: 9px; height: 2px; border-radius: 2px; }
.reel-ticks button::before { right: 0; background: rgba(238, 248, 248, .28); }
.reel-ticks i { width: 0; background: var(--foam); }
.reel-ticks button:hover::before { background: rgba(238, 248, 248, .55); }

/* hidden until the intro starts; the class is removed again if scripts fail (see <head>) */
.anim .masthead .shell > *, .anim .hero-body > *, .anim .reel-ticks { opacity: 0; }

/* room for the scroll drift inside picture frames */
.row .shot:not(.pair) img, .row .shot:not(.pair) video { scale: 1.12; }
.get > .backdrop { scale: 1.18; }

/* ---- ticker ---- */
.ticker { overflow: hidden; margin-top: 96px; padding: 26px 0; border-top: 1px solid var(--rule); }
.ticker + .full-band { margin-top: 0; }
.ticker-track { display: flex; width: max-content; white-space: nowrap; font: 800 clamp(30px, 4.6vw, 62px)/1 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
/* outline only: the stroke is painted under a page-coloured fill, which hides the overlapping inner contours of the font */
.ticker-track span { padding-right: 34px; color: var(--night); -webkit-text-stroke: 2px #6c767b; paint-order: stroke fill; }
.ticker-track span:nth-child(3n + 1) { color: var(--foam); -webkit-text-stroke: 0; }
.ticker-track span::after { content: "/"; margin-left: 34px; color: var(--pink); -webkit-text-stroke: 0; }

/* ---- trailer (section is hidden until a video id is set) ---- */
.trailer .player, .player-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; overflow: hidden; background: var(--panel); }
.trailer .player { position: relative; padding: 0; cursor: pointer; }
.trailer .player img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); transition: filter .3s, transform .8s; }
.trailer .player:hover img { filter: brightness(.9); transform: scale(1.03); }
.player-badge { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 18px 28px; border-radius: 4px; background: var(--sunset); color: #1b0a12; font: 700 15px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 680px) {
  .ticker { margin-top: 64px; padding: 18px 0; }
  .reel-ticks button { width: 30px; }
}

/* table columns keep their share on every screen; long cells wrap instead of pushing the Full column out */
.sheet table { table-layout: fixed; }
.sheet th:first-child, .sheet td:first-child { width: auto; }
.sheet td, .sheet th { overflow-wrap: anywhere; }
@media (max-width: 680px) {
  .sheet th:nth-child(n+2), .sheet td:nth-child(n+2) { width: 25%; padding-inline: 6px; }
  .sheet thead th small { font-size: 12px; }
  .val { font-size: 13.5px; }
  .sheet tfoot .go { padding: 0 10px; min-height: 38px; font-size: 12px; letter-spacing: .03em; }
}

/* ---- primary button: a sheen crosses it every few seconds; on hover the gradient flows ---- */
.go-sun { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(95deg, #ff4d8d 0%, #ff7a5c 28%, #ffb347 50%, #ff7a5c 72%, #ff4d8d 100%); background-size: 220% 100%; background-position: 0% 50%; transition: transform .18s ease, box-shadow .25s ease, background-position .9s cubic-bezier(.2, .7, .2, 1); }
.go-sun::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 46%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .0) 20%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%);
  transform: translateX(-140%) skewX(-18deg); animation: sheen 4.6s ease-in-out infinite; mix-blend-mode: soft-light; }
.go-sun:hover { background-position: 100% 50%; box-shadow: 0 0 0 5px rgba(255, 122, 92, .18), 0 18px 44px -10px rgba(255, 122, 92, .95); }
.go-sun:hover::after { animation-duration: 1.4s; }
.go-sun:active { transform: translateY(0) scale(.98); }
@keyframes sheen { 0%, 62% { transform: translateX(-140%) skewX(-18deg); } 88%, 100% { transform: translateX(340%) skewX(-18deg); } }
/* the two hero buttons should not flash in sync with every other button on the page */
.hero .go-sun::after { animation-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) { .go-sun::after { animation: none; } }

/* gallery: the last picture is wide so the grid closes without an empty cell (1 large + 10 + 1 wide = 16 cells) */
@media (min-width: 681px) {
  .frames a:last-child { grid-column: span 2; aspect-ratio: auto; position: relative; }
  /* take the picture out of the flow so it fills the row instead of setting its height */
  .frames a:last-child img { position: absolute; inset: 0; }
}

/* Keep video on the page's normal drawing path. Left alone, a large untransformed video can be handed
   to the graphics card as a hardware overlay, which applies the driver's own video colour settings:
   the clip then looks darker than the same clip a moment later (after a scroll moves it) and than its
   still picture. A not-quite-1 opacity on the container prevents that hand-off. */
.reel, .get > .backdrop, .shot { opacity: .999; }

/* ---- comparison slider (drag anywhere on the picture) ---- */
.compare { position: relative; user-select: none; cursor: ew-resize; touch-action: pan-y; }
.compare img, .compare video { position: absolute; inset: 0; }
.compare .compare-top { clip-path: inset(0 0 0 var(--pos)); }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: var(--foam); box-shadow: 0 0 12px rgba(0, 0, 0, .6); pointer-events: none; }
.compare-line::after { content: "\2039\00a0\203A"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sunset); color: #1b0a12; font: 700 20px/1 var(--text); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.compare-tag { position: absolute; bottom: 12px; z-index: 1; padding: 6px 10px; border-radius: 3px; font: 700 11px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; background: rgba(7, 16, 24, .78); color: var(--foam); pointer-events: none; }
.compare-tag.is-left { left: 12px; }
.compare-tag.is-right { right: 12px; color: #1b0a12; background: var(--sunset); }
.compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.compare img { -webkit-user-drag: none; }
.compare:has(input:focus-visible) .compare-line::after { outline: 3px solid var(--aqua); outline-offset: 3px; }
/* both pictures must stay locked together, so no hover zoom on this card */
.card:hover .compare img { transform: none; }

/* ---- big Lite / Full slider above the table ---- */
.versus { margin: 0 0 44px; }
.versus .compare-tag { bottom: 16px; padding: 9px 14px; font-size: 13px; }
.versus .compare-tag.is-left { left: 16px; color: var(--aqua); }
.versus .compare-tag.is-right { right: 16px; }
.versus figcaption { margin-top: 14px; color: var(--mist); font-size: 15px; max-width: 80ch; }
@media (max-width: 680px) {
  .versus { margin-bottom: 30px; }
  .versus .compare-tag { bottom: 10px; padding: 6px 10px; font-size: 11px; }
  .compare-line::after { width: 36px; height: 36px; font-size: 16px; }
}

/* ---- before / after: three recorded pairs, one under another ---- */
#before-after .versus { margin-bottom: 40px; }
.versus-title { margin: 0 0 12px; display: flex; align-items: center; gap: 12px; color: var(--foam); font: 700 13px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; max-width: none; }
.versus-title::before { content: ""; width: 26px; height: 2px; background: var(--aqua); }

/* ---- what is next ---- */
.plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.plans li { position: relative; background: var(--deep); border: 1px solid var(--rule); border-radius: 6px; padding: 24px 22px; display: grid; gap: 12px; align-content: space-between; }
.plans strong { font: 800 21px/1.2 var(--display); letter-spacing: -.01em; }
.plans .state { justify-self: start; font: 700 11px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--sun); border: 1px solid rgba(255, 179, 71, .45); border-radius: 3px; padding: 5px 8px; }
.plans li:last-child strong { background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* small "i" that explains an item: shows on hover, keyboard focus, or a tap */
.hint { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; padding: 0; vertical-align: 2px; border-radius: 50%; border: 1.5px solid var(--aqua); background: none; color: var(--aqua); font: italic 700 13px/1 Georgia, "Times New Roman", serif; cursor: help; }
.hint:hover, .hint:focus-visible { background: var(--aqua); color: #071018; outline: none; }
.hint-text { position: absolute; z-index: 5; left: 0; bottom: calc(100% + 10px); width: min(360px, 86vw); padding: 14px 16px; border-radius: 6px; background: #12303d; border: 1px solid #2f5468; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8); color: var(--foam); font: 400 14.5px/1.5 var(--text); letter-spacing: 0; text-transform: none; opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .18s ease, translate .18s ease, visibility 0s .18s; pointer-events: none; }
.hint-text::after { content: ""; position: absolute; left: 26px; top: 100%; border: 7px solid transparent; border-top-color: #2f5468; }
li:has(.hint:hover) .hint-text, li:has(.hint:focus) .hint-text { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .18s ease, translate .18s ease; }

@media (max-width: 980px) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  /* "Better cutscenes" sits in the right-hand column here: open the note towards the left */
  .hint-text { left: auto; right: 0; }
  .hint-text::after { left: auto; right: 26px; }
}
@media (max-width: 680px) {
  #before-after .versus { margin-bottom: 28px; }
  .plans { gap: 8px; }
  .plans li { padding: 18px 16px; }
  .plans strong { font-size: 17px; }
}

/* ---- Full card: the two membership tiers ---- */
.tiers { display: grid; gap: 8px; }
.tier { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 4px; background: rgba(7, 16, 24, .55); }
.tier.is-top { border-color: rgba(255, 122, 92, .65); background: rgba(255, 77, 141, .08); }
.tier-price { flex: none; min-width: 118px; font: 800 24px/1 var(--display); letter-spacing: -.01em; }
.tier-price small { font: 600 13px/1 var(--text); color: var(--mist); margin-left: 2px; letter-spacing: 0; }
.tier.is-top .tier-price { background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier.is-top .tier-price small { -webkit-text-fill-color: var(--mist); }
.tier-what { color: #cfe2e5; font-size: 15px; }

/* ---- legal pages (/privacy/, /terms/) ---- */
.page .masthead { position: static; border-bottom: 1px solid var(--rule); }
.legal { width: min(760px, 100% - 40px); margin: 0 auto; padding: 64px 0 96px; }
.legal h1 { font: 800 clamp(34px, 5vw, 52px)/1.05 var(--display); letter-spacing: -.02em; margin: 0 0 10px; }
.legal .updated { color: var(--mist); font-size: 14px; margin: 0 0 40px; }
.legal h2 { font: 700 22px/1.25 var(--display); margin: 44px 0 12px; }
.legal p, .legal li { color: #cfe2e5; font-size: 16.5px; }
.legal p { margin: 0 0 14px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--aqua); }
.legal strong { color: var(--foam); }

/* ---- "Lite is only the beginning" window (nudge.js) ---- */
dialog.nudge { width: min(560px, 100vw - 32px); max-height: calc(100svh - 32px); padding: 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--deep); color: var(--foam); overflow: auto; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
dialog.nudge::backdrop { background: rgba(4, 10, 15, .78); backdrop-filter: blur(6px); }
dialog.nudge[open] { animation: nudge-in .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes nudge-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.nudge-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.nudge-x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 4px; border: 1px solid rgba(238, 248, 248, .25); background: rgba(7, 16, 24, .7); color: var(--foam); font-size: 20px; cursor: pointer; }
.nudge-x:hover { border-color: var(--aqua); color: var(--aqua); }
.nudge-body { padding: 26px 30px 28px; }
.nudge .nudge-kicker { font: 700 12px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--aqua); margin: 0 0 10px; }
.nudge h2 { font: 800 clamp(26px, 4vw, 34px)/1.05 var(--display); letter-spacing: -.02em; margin: 0 0 12px; }
.nudge p { color: #cfe2e5; margin: 0 0 12px; }
.nudge .points { margin: 0 0 16px; gap: 7px; font-size: 15.5px; }
.nudge .nudge-note { font-size: 15px; color: var(--mist); }
.nudge-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 14px; }
.nudge-actions .go { flex: 1 1 200px; justify-content: center; text-align: center; }
.nudge small { color: #6f8791; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { dialog.nudge[open] { animation: none; } }
@media (max-width: 680px) {
  .nudge-shot { aspect-ratio: 16 / 5; }
  .nudge-body { padding: 20px 20px 22px; }
  .nudge .points { font-size: 14.5px; gap: 5px; }
  .nudge-actions .go { min-height: 46px; }
}

/* tiers are a choice: the picked one is lit, the recommended one carries a badge */
button.tier { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
button.tier:hover { border-color: rgba(47, 227, 208, .5); }
button.tier:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.tier.is-top { border-color: var(--rule); background: rgba(7, 16, 24, .55); }
.tier.is-picked { border-color: rgba(255, 122, 92, .85); background: rgba(255, 77, 141, .1); box-shadow: 0 0 0 1px rgba(255, 122, 92, .35) inset; }
.tier-badge { margin-left: auto; flex: none; font: 700 11px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #1b0a12; background: var(--sunset); border-radius: 3px; padding: 5px 7px; }
.tier .tier-price::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 10px; border-radius: 50%; border: 2px solid var(--mist); vertical-align: 2px; box-sizing: border-box; }
.tier.is-picked .tier-price::before { border-color: #ff7a5c; background: radial-gradient(circle, #ff7a5c 0 3px, transparent 3.5px); }
@media (max-width: 680px) { .tier-badge { display: none; } }

/* community size in the "Get ImmersiveVC" intro */
.get .head .count { font-weight: 800; background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- install steps (bottom of "Get ImmersiveVC") ---- */
.install { margin-top: 44px; padding: 28px 30px 30px; border: 1px solid var(--rule); border-radius: 6px; background: rgba(7, 16, 24, .72); backdrop-filter: blur(6px); }
.install h3 { font-size: 22px; font-weight: 800; margin-bottom: 20px; }
.install ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.install li { counter-increment: step; display: grid; gap: 6px; align-content: start; }
.install li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 6px; border-radius: 50%; font: 800 15px/1 var(--display); color: #1b0a12; background: var(--sunset); }
.install strong { color: var(--foam); font-size: 16.5px; }
.install span { color: var(--mist); font-size: 15px; }

/* ---- questions ---- */
.qa { max-width: 860px; border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 20px 4px; font: 700 clamp(17px, 2vw, 20px)/1.3 var(--display); color: var(--foam); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; margin-left: auto; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; color: var(--aqua); font: 400 20px/1 var(--text); transition: transform .25s ease, border-color .2s ease; }
.qa summary:hover::after { border-color: var(--aqua); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.qa details p { margin: -4px 0 22px; padding: 0 52px 0 4px; color: #cfe2e5; max-width: 72ch; }
.qa a { color: var(--aqua); }
@media (max-width: 900px) { .install ol { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .install { padding: 22px 20px 24px; } .install ol { grid-template-columns: 1fr; gap: 16px; } .qa details p { padding-right: 4px; } }
.install a { color: var(--aqua); }