@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#101314;--panel:#191d1f;--ink:#f4f5f2;--muted:#a2aaad;--accent:#43c7ed}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 'DM Sans',Arial,sans-serif}body.modal-open{overflow:hidden}a{color:inherit}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:5px}header{margin:0 5%;padding:29px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff20}.brand{width:255px;min-height:54px;display:flex;flex-direction:column;justify-content:center}.brand>span{font-size:21px;font-weight:600;letter-spacing:-.6px}.brand-light{font-weight:400;color:#8d999e;margin-left:5px}.brand small{font-size:12px;letter-spacing:3px;color:#849094}.header-note{font-size:12px;letter-spacing:2px;color:var(--muted)}main{max-width:1600px;margin:auto;padding:48px 5% 70px}.intro{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:38px;gap:30px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;color:var(--accent);margin:0 0 12px}h1,h2,h3,.card-title{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-weight:700;line-height:1.05;margin:0;letter-spacing:-.01em}h1{font-size:clamp(50px,5vw,78px);text-transform:uppercase}.intro>p{color:var(--muted);font-size:14px;margin:0 0 4px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 25px}.card{border:0;background:none;padding:0;color:var(--ink);text-align:left;min-width:0}.thumb{aspect-ratio:16/10;position:relative;overflow:hidden;background:#242b2e;border:1px solid #ffffff24}.thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .45s ease,filter .3s}.thumb::after{content:'VIEW COMPARISON';position:absolute;bottom:16px;left:16px;background:var(--accent);color:#08202a;font-size:12px;font-weight:600;letter-spacing:1px;padding:9px 12px;opacity:0;transform:translateY(6px);transition:.25s}.card:hover .thumb img{transform:scale(1.025);filter:brightness(.8)}.card:hover .thumb:after,.card:focus-visible .thumb:after{opacity:1;transform:none}.card-caption{display:flex;justify-content:space-between;gap:14px;margin-top:16px;align-items:flex-start}.card-title{font-size:clamp(25px,2.4vw,35px);display:block}.card-meta{font-size:12px;color:var(--muted);display:block;margin-top:8px}.card-number{font-size:12px;color:#78888f;line-height:2.5}footer{margin:0 5%;border-top:1px solid #ffffff20;padding:24px 0;display:flex;justify-content:space-between;gap:25px;font-size:12px;color:#879399}footer>span:first-child{letter-spacing:2px;white-space:nowrap}dialog{width:min(1180px,95vw);max-height:94svh;overflow:auto;border:1px solid #465155;padding:0;background:var(--panel);color:var(--ink);box-shadow:0 20px 100px #000a}dialog::backdrop{background:#070b10e6;backdrop-filter:blur(12px)}.modal-header{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:24px 30px}.modal-header .eyebrow{margin-bottom:6px}h2{font-size:38px}.close{background:#2d3539;color:#fff;border:1px solid #59656b;border-radius:50%;font-size:28px;width:44px;height:44px;line-height:1}.compare{position:relative;aspect-ratio:16/10;background:#e9e9e9;overflow:hidden;isolation:isolate}.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;user-select:none;pointer-events:none}.before-layer{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--reveal)) 0 0);z-index:1}.image-label{position:absolute;top:16px;padding:5px 11px;border:1px solid #ffffff55;background:#0b151be6;color:#fff;font-size:12px;font-weight:600;letter-spacing:1px;z-index:2}.after-label{right:16px}.before-label{left:16px;opacity:0}.compare.has-before .before-label{opacity:1}.compare.all-before .after-label{opacity:0}.divider{position:absolute;z-index:3;left:clamp(24px,var(--reveal),calc(100% - 24px));height:100%;width:2px;background:var(--accent);pointer-events:none;box-shadow:0 0 0 1px #0004}.handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--accent);color:#08202a;display:grid;place-content:center;font-size:25px;font-weight:600;letter-spacing:5px;padding-left:5px;box-shadow:0 0 0 7px #43c7ed33}.compare:not(.interacted) .handle{animation:pulse 1.8s infinite}.compare input{position:absolute;inset:0;z-index:4;opacity:0;width:100%;height:100%;margin:0;cursor:ew-resize;touch-action:pan-y}.compare:focus-within{outline:3px solid var(--accent);outline-offset:-3px}.comparison-tools{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 30px;border-bottom:1px solid #ffffff1a;font-size:14px;color:var(--muted)}.comparison-tools>div{display:flex;gap:5px}.comparison-tools button{border:1px solid #4c585e;background:transparent;padding:7px 12px;font-size:14px;color:#c6ced1}.comparison-tools button.active{color:#09222a;background:var(--accent);border-color:var(--accent)}.details{display:grid;grid-template-columns:1fr 1.65fr;gap:45px;padding:32px 30px 20px}.details p:not(.eyebrow){font-size:16px;color:#c0c7ca;margin-top:0}.details h3{font-size:28px;margin-bottom:14px}.platform #evidence{font-size:14px;color:var(--muted)}.changes{margin-top:25px}.open-link{display:flex;justify-content:space-between;text-decoration:none;background:var(--accent);color:#09222a;padding:13px 17px;font-size:16px;font-weight:600;margin-top:25px}.open-link:hover{background:#8addf3}.platform small{display:block;font-size:12px;color:#a6b1b6;margin-top:10px}.source-note{margin:0;padding:0 30px 13px;color:#9eaaaf;font-size:12px}.audit-note{padding-bottom:25px}@keyframes pulse{50%{box-shadow:0 0 0 15px #43c7ed00}}@media(max-width:950px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-note{display:none}.details{gap:25px;grid-template-columns:1fr 1.35fr}}@media(max-width:600px){header{padding:20px 0}main{padding-top:30px}.intro{display:block;margin-bottom:28px}.intro>p{margin-top:18px}.grid{grid-template-columns:1fr;gap:30px}.card-title{font-size:32px}footer{flex-direction:column;gap:8px}dialog{width:96vw;max-height:95svh}.modal-header{padding:18px}h2{font-size:29px}.modal-header .eyebrow{font-size:12px;letter-spacing:1px}.comparison-tools{padding:12px 18px;align-items:flex-start;gap:10px}.comparison-tools>span{font-size:12px}.comparison-tools button{padding:6px 9px}.details{display:block;padding:24px 18px}.platform{margin-bottom:28px}.source-note{padding-left:18px;padding-right:18px}.image-label{top:9px;font-size:12px;padding:3px 7px}.after-label{right:9px}.before-label{left:9px}.handle{width:40px;height:40px}.thumb:after{display:none}}@media(prefers-reduced-motion:reduce){*,*:after{animation:none!important;transition:none!important}}

/* Keep every gallery card aligned, regardless of title length. */
.grid{align-items:start}
.card{display:flex;flex-direction:column;align-self:start;container-type:inline-size}
.thumb{width:100%;flex:none}
.card-caption{width:100%;align-items:flex-start}
.card-caption>div{min-width:0;flex:1}
.card-title{font-size:clamp(16px,5.5cqi,26px);line-height:1.15;white-space:nowrap}
.card-number{flex:none;line-height:1.8}

.brand img{display:block;width:255px;max-width:100%;height:auto;max-height:70px;object-fit:contain;object-position:left center}

/* Preserve the original page's top-left origin and fit its full width. */
.before-layer{overflow:hidden;background:#fff}
.before-layer .shot{inset:auto;top:0;left:0;width:100%;height:auto;max-width:none;object-fit:initial;object-position:left top}