/* Devices page (appareils.html): real game UI hero, checklist, the connect-in-four-steps scene, compatibility tabs, XP tiers, platforms and FAQ. */

figure.card, .dv-hero__vis figure, .dv-scene__vis figure, .dv-hrfig, .dv-multi__screen { margin: 0; }
.feat > .chip, .stack > .chip { justify-self: start; }

/* Real UI crops: a window onto part of a 16:9 game capture. --x/--y = top-left, --w/--h = size (fractions of the capture), --ar = the window's own ratio. */
.dv-crop { position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar); }
.dv-crop img, .thumb.dv-crop img { position: absolute; max-width: none; width: calc(100% / var(--w)); height: auto; left: calc(var(--x) / var(--w) * -100%); top: calc(var(--y) / var(--h) * -100%); object-fit: initial; }
.card:hover .thumb.dv-crop img { transform: none; }

/* ── hero: the game's home menu on a monitor, its Home trainer panel zoomed ── */
.dv-hero { background: var(--ink); }
.dv-hero__bg { position: absolute; inset: 0; z-index: -2; }
.dv-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; animation: breathe 10s var(--ease) both; }
.dv-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--ink) 8%, rgba(7, 9, 11, .78) 45%, rgba(7, 9, 11, .45)), linear-gradient(180deg, rgba(7, 9, 11, .7), transparent 30%, transparent 70%, var(--ink)); }
.dv-hero > .wrap { padding-bottom: clamp(64px, 12vh, 130px); }
@media (min-width: 1000px) { .dv-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); align-items: center; } }
.dv-hero .h-hero { font-size: clamp(50px, min(7.2vw, 12.5vh), 128px); }
.dv-hero__vis { position: relative; width: 100%; padding: 0 0 48px; }
.dv-callout { position: absolute; right: -2%; bottom: 0; width: 52%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 46, 120, .55); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 6px rgba(255, 46, 120, .12); animation: bob 7s ease-in-out infinite; }
.dv-hero__vis > .chip { position: absolute; animation: bob 6s ease-in-out infinite; z-index: 2; }
.dv-hero__c1 { left: -3%; top: 8%; }
.dv-hero__c2 { left: 4%; bottom: 14%; animation-delay: -2s !important; }
.dv-hero__c3 { right: 6%; top: -4%; animation-delay: -4s !important; }
@media (max-width: 999px) { .dv-hero__vis { max-width: 620px; } .dv-hero__c1 { left: 0; } }
@media (max-width: 600px) { .dv-callout { width: 64%; right: 0; } .dv-hero__c3 { right: 0; } }

/* ── 01 · checklist ── */
.dv-need { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) { .dv-need { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 60px; } }
.dv-need__col { display: grid; gap: 16px; }
.dv-need__col--xp { background: var(--white); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); position: relative; overflow: hidden; }
.dv-need__col--xp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ride); }
.dv-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.dv-list li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.dv-list li:last-child { border-bottom: 0; }
.dv-need__col:first-child .dv-list li:last-child { border-bottom: 1px solid var(--line); }
.dv-list .idx { color: var(--pink-ink); }
.dv-list p { color: var(--mute); margin-top: 6px; }
.dv-need .note { border-color: var(--pink); }

/* ── 02 · connect scene: a real game photo behind, the real screen for each step ── */
.dv-scene { height: 440vh; }
@media (max-width: 800px) { .dv-scene { height: 400vh; } }
.dv-scene .scene__shade { background: linear-gradient(90deg, rgba(7, 9, 11, .92), rgba(7, 9, 11, .62) 55%, rgba(7, 9, 11, .5)), linear-gradient(180deg, rgba(7, 9, 11, .6), transparent 30%, transparent 66%, rgba(7, 9, 11, .9)); }
@media (max-width: 800px) { .dv-scene .scene__shade { background: rgba(7, 9, 11, .74); } }
.dv-scene__main { display: grid; gap: 40px; align-items: center; min-height: 0; }
@media (min-width: 900px) { .dv-scene__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 70px; } }
.dv-scene__text > div { max-width: 560px; }
.dv-scene__text p { font-size: 17px; }
.dv-scene .h-2 { font-size: clamp(30px, 3.4vw, 56px); }
.dv-scene__n { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 6vw, 96px); letter-spacing: -.05em; line-height: .9; font-variation-settings: "wdth" 86; display: flex; align-items: flex-start; }
.dv-scene__n small { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--on-ink-3); margin: .5em 0 0 .5em; }
.dv-scene__vis > div { width: min(100%, calc(58vh * 16 / 9)); justify-self: center; align-content: center; }
.dv-shotcard { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--ink-line); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .8); }
.dv-shotcard img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
.dv-shotcard .chip { position: absolute; left: 18px; bottom: 18px; }
.dv-zoom .dv-crop { border-radius: clamp(9px, .9vw, 14px); }
.dv-zoom__chip { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); z-index: 2; }
.dv-moments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 1; }
.dv-moments li { display: grid; gap: 10px; }
.dv-moments li::before { content: ""; height: 3px; border-radius: 3px; background: var(--ink-line); transform: skewX(var(--skew)); transition: background .5s var(--ease); }
.dv-moments li.is-on::before { background: var(--ride); }
.dv-moments li.is-on .label { color: var(--on-ink); }
@media (max-width: 899px) {
  .dv-scene .scene__grid { padding-top: 84px; padding-bottom: 24px; gap: 12px; }
  .dv-scene__main { grid-template-rows: auto auto; align-content: center; gap: 22px; }
  .dv-scene__vis { order: -1; }
  .dv-scene__vis > div { width: min(100%, calc(30vh * 16 / 9)); }
  .dv-scene__n { font-size: 44px; }
  .dv-scene .h-2 { font-size: 28px; }
  .dv-scene__text p { font-size: 15.5px; }
}
@media (max-width: 600px) { .dv-scene .scene__top .chip { display: none; } .dv-moments .label { font-size: 9.5px; letter-spacing: .1em; } }

/* ── 03 · compatibility tabs ── */
.dv-tabs .tabs { margin-bottom: 36px; }
.dv-tabs .tabs button { font-size: 16px; }
.dv-panel__lead { color: var(--mute); max-width: 68ch; margin-bottom: 30px; }
.dv-proto { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.dv-proto li { display: grid; gap: 8px 30px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: center; }
@media (min-width: 900px) { .dv-proto li { grid-template-columns: 50px 280px minmax(0, 1fr) 170px; } }
.dv-proto .idx { color: var(--pink); }
.dv-proto__name { display: grid; gap: 4px; }
.dv-proto__name h3 { font-size: clamp(22px, 2vw, 30px); letter-spacing: -.035em; font-variation-settings: "wdth" 88; }
.dv-proto p { color: var(--mute); max-width: 60ch; }
.dv-proto .chip { justify-self: start; }
@media (min-width: 900px) { .dv-proto .chip { justify-self: end; } }
.dv-chip--est { color: var(--mute); }
.dv-chip--est::before { border-style: dashed !important; }
.dv-brands { display: grid; gap: 34px; margin-top: clamp(56px, 9vh, 100px); }
@media (min-width: 1000px) { .dv-brands { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 70px; align-items: start; } }
.dv-brands__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.dv-brands__list li { display: grid; place-items: center; height: 92px; padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .3s; }
.dv-brands__list li:hover { background: rgba(255, 46, 120, .08); }
.dv-logo img { height: 24px; width: auto; max-width: 100%; filter: brightness(0) invert(1); opacity: .82; transition: opacity .3s; }
.dv-logo:hover img { opacity: 1; }
.dv-logo--thinkrider img { height: 38px; filter: none; } .dv-logo--magene img { filter: none; } .dv-logo--tacx img { height: 28px; } .dv-logo--jetblack img, .dv-logo--elite img, .dv-logo--vanrysel img { height: 19px; } .dv-logo--stages img, .dv-logo--keiser img, .dv-logo--kinetic img { height: 21px; }
.dv-logo--text { font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--on-ink-2); }
@media (max-width: 600px) { .dv-brands__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-brands__list li { height: 76px; } }
.dv-multi { display: grid; gap: 34px; align-items: center; margin-bottom: 40px; }
@media (min-width: 1000px) { .dv-multi { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 60px; } }
.dv-multi .dv-panel__lead { margin: 0; }
.dv-multi__copy { gap: 20px; }
.dv-multi__fig { display: grid; gap: 6px; border-left: 2px solid var(--pink); padding-left: 20px; }
.dv-multi__fig .num { font-size: clamp(64px, 6vw, 96px); display: flex; align-items: flex-start; }
.dv-multi__fig small { font-size: .3em; margin: .2em 0 0 .1em; color: var(--mute); }
.dv-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dv-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .dv-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 80px; } }
.dv-split .stack p { max-width: 54ch; }
.dv-hrfig { position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; aspect-ratio: 4 / 3; border: 1px solid var(--ink-line); display: grid; align-content: end; gap: 14px; padding: clamp(18px, 2.4vw, 30px); }
.dv-hrfig__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -2; }
.dv-hrfig::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 9, 11, .35), transparent 35%, rgba(7, 9, 11, .9)); }
.dv-hrfig__lag { position: absolute; left: clamp(18px, 2.4vw, 30px); top: clamp(18px, 2.4vw, 30px); }
.dv-hrfig__hud { display: block; width: min(100%, 440px); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.dv-hrfig figcaption { color: var(--on-ink-2); font-size: 14.5px; }
@media (max-width: 600px) { .dv-hrfig { aspect-ratio: 4 / 5; } }

/* ── 04 · XP tiers ── */
.dv-xp { display: grid; gap: 16px; }
@media (min-width: 900px) { .dv-xp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dv-xp article { display: grid; gap: 18px; align-content: start; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.dv-xp article { position: relative; overflow: hidden; isolation: isolate; }
.dv-xp__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .16; z-index: -1; filter: saturate(.6); }
.dv-xp article:first-child { background: radial-gradient(90% 70% at 0% 0%, rgba(255, 46, 120, .16), transparent 70%), rgba(255, 255, 255, .03); border-color: rgba(255, 46, 120, .35); }
.dv-xp__n { font-size: clamp(80px, 8vw, 130px); display: flex; align-items: flex-start; }
.dv-xp__n small { font-size: .3em; margin: .2em 0 0 .08em; color: var(--mute); letter-spacing: 0; }
.dv-xp__n--off { color: var(--faint); }
.dv-xp__bar { height: 8px; border-radius: 8px; background: var(--ink-line); overflow: hidden; }
.dv-xp__bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--ride); transform-origin: left; transition: transform 1.4s var(--ease) .35s; }
.js .dv-xp article[data-reveal]:not(.is-in) .dv-xp__bar i { transform: scaleX(0); }
.dv-xp p { color: var(--mute); }

/* ── 05 · requirements & platforms ── */
.dv-req { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dv-req li { display: grid; gap: 8px; padding: 24px 24px 24px 0; }
.dv-req li + li { border-left: 1px solid var(--line); padding-left: 24px; }
.dv-req b { font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -.02em; font-weight: 600; }
.dv-req li:last-child b { color: var(--pink); }
@media (max-width: 700px) { .dv-req li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } }
.dv-plat { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 40px; }
.dv-plat .h-2 { font-size: clamp(30px, 2.8vw, 44px); }
.dv-plat .feat:first-child { border-color: rgba(255, 46, 120, .4); }
@media (min-width: 1000px) { .dv-plat { grid-template-columns: 1.3fr 1fr .8fr; align-items: start; } }
.dv-plat__limit { background: transparent !important; border-style: dashed; }
.dv-live { gap: 10px; }
.dv-plat .feat > .btn { justify-self: start; margin-top: 6px; }
.dv-shot { margin: 40px 0 0; aspect-ratio: 16 / 7; border: 1px solid var(--ink-line); }
@media (max-width: 700px) { .dv-shot { aspect-ratio: 4 / 3; } }

/* ── 06 · the app's side ── */
.dv-app { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1000px) { .dv-app { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(50px, 6vw, 96px); } }
.dv-app__phone { display: grid; justify-items: center; }
.dv-app__cards { grid-template-columns: 1fr; }
@media (min-width: 640px) { .dv-app__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dv-appthumb { place-items: start center; background: linear-gradient(160deg, #ffe1ec, #f3f6f2 70%); padding-top: 18px; }
.dv-appthumb img { border-radius: 18px 18px 0 0; box-shadow: 0 20px 40px -18px rgba(7, 9, 11, .45); }
.dv-appthumb--low img { transform: translateY(-34%); }
.card:hover .dv-appthumb--low img { transform: translateY(-34%) scale(1.03); }

/* ── 06 · FAQ ── */
@media (min-width: 900px) { .dv-faq-head { position: sticky; top: 120px; } }

/* ── closing band ── */
.band .btn--line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.band .eyebrow::before { background: #fff; }
.dv-scene__vis > .dv-zoomwrap { width: min(100%, 560px); }