/* The light follows the pointer, with a separate passing reflection on entry. */
.header{background:linear-gradient(120deg,#ffffffbc,#e5ecf474 42%,#ffffffa1);border:1px solid #ffffffed;box-shadow:inset 0 2px 1px #fff,inset 0 -2px 2px #a6b7c647,0 12px 32px #273d5514;backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6)}
.header::before,.finish-dock::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(280px 100px at var(--light-x,32%) var(--light-y,0%),#ffffffeb,#c7e8ff55 30%,#eed5ff24 55%,transparent 75%);opacity:.55;transition:opacity .3s;z-index:-1}
.header:hover::before,.finish-dock:hover::before{opacity:1}
.header{isolation:isolate}.header .nav nav{gap:5px;margin-left:0}.header nav a{border-radius:24px;padding:12px 15px;white-space:nowrap}
:is(.button,.nav-contact,.header nav a,.category-tabs button){position:relative;isolation:isolate;overflow:hidden;transition:background .3s,box-shadow .3s,transform .3s}
:is(.button,.nav-contact,.header nav a,.category-tabs button)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(100px 65px at var(--light-x,50%) var(--light-y,0%),#ffffffd9,#ccecff70 28%,#ead2fa35 50%,transparent 76%);opacity:0;transition:opacity .25s}
:is(.button,.nav-contact,.header nav a,.category-tabs button)::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-75%;width:55%;transform:skewX(-24deg);z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,#ffffffc9 43%,#c9e9ff9c 49%,#f2deff7a 55%,transparent);opacity:0}
:is(.button,.nav-contact,.header nav a,.category-tabs button):is(:hover,:focus-visible)::before{opacity:1}
:is(.button,.nav-contact,.header nav a,.category-tabs button):is(:hover,:focus-visible)::after{animation:glass-sweep .85s ease-out}
.button-dark,.hero-actions .button-dark,.category-tabs button.active{color:white}
.button-dark::before,.category-tabs button.active::before{background:radial-gradient(120px 80px at var(--light-x,50%) var(--light-y,0%),#d4e8ff50,#e7d3ff29 45%,transparent 80%)}
.button-dark::after,.category-tabs button.active::after{opacity:.35;background:linear-gradient(90deg,transparent,#ffffff45,#c9e9ff50,transparent)}
.button:hover,.nav-contact:hover{box-shadow:inset 0 2px 1px #ffffffcf,inset 0 -2px 2px #a6bed353,0 9px 25px #334f7130}
.header nav a:is(:hover,:focus-visible){color:#1c2d3e;background:#ffffff5c;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #a6b9cc70,0 5px 15px #314b6715}
.finish-dock{background:linear-gradient(125deg,#ffffffb8,#e6edf275 55%,#ffffffa6);box-shadow:inset 0 2px 1px #fff,inset 0 -2px 2px #c0cbd474,0 12px 32px #263f5b20;isolation:isolate}
@keyframes glass-sweep{0%{left:-75%;opacity:0}18%{opacity:.85}100%{left:135%;opacity:0}}










.product-price-row{margin-top:16px}.product-price{font-size:20px}.product-date{font-size:10px}
.hero-trade-link{display:inline-flex;flex-wrap:wrap;gap:6px;font-size:11px;margin-top:15px;color:#657080}.hero-trade-link span{color:#384c60;border-bottom:1px solid #aab7c4;padding-bottom:3px}
.trade-in{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1.1fr;gap:18px 35px;align-items:center;padding:58px 55px 38px;margin-bottom:80px;border-radius:30px;background:linear-gradient(125deg,#eef0f1,#e9e8eb 50%,#f0ecee);border:1px solid #fff;box-shadow:inset 0 1px 1px #fff,0 12px 45px #24324708;overflow:hidden;scroll-margin-top:115px}
.trade-story .eyebrow{font-size:9px;color:#5c6271;margin-bottom:22px}
.trade-story h2{font-size:clamp(37px,3.7vw,53px);line-height:1.1;letter-spacing:-2.6px}
.trade-story h2 span{color:#8b6471;display:block}
.trade-intro{font-size:13px;line-height:1.85;color:#616570;max-width:365px;margin-top:24px}
.trade-cta{margin-top:27px;background:linear-gradient(145deg,#4e3b48,#292630);border:1px solid #7f7181;box-shadow:inset 0 1px 1px #ffffff66,0 8px 20px #392b3a1c}
.trade-note{font-size:10px;line-height:1.6;color:#686772;margin-top:14px;max-width:310px}
.trade-visual{height:390px;position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.trade-orbit{position:absolute;inset:20% 0 18%;border:1px solid #ffffffdc;border-radius:50%;transform:rotate(-15deg);box-shadow:0 0 40px #ffffff6b,inset 0 0 35px #ffffff3b;z-index:-1}
.trade-phone{position:relative;margin:0;width:49%;text-align:center}
.trade-phone img{height:270px;width:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .65s cubic-bezier(.2,.65,.3,1)}
.trade-before img{transform:rotate(-9deg);filter:saturate(.6)}
.trade-after img{height:330px;transform:rotate(8deg) scale(1.13);mix-blend-mode:normal;margin-top:-38px;filter:drop-shadow(0 14px 12px #542c3b1c)}
.trade-phone figcaption{font-size:17px;letter-spacing:-.4px;margin-top:8px}.trade-phone figcaption small{display:block;font-size:10px;letter-spacing:0;color:#6d6973;margin-top:6px}
.trade-exchange{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:25px;display:grid;place-items:center;z-index:2;background:linear-gradient(135deg,#ffffffdb,#d8e4ec80,#f6dfef9c);box-shadow:inset 0 2px 1px white,inset 0 -2px 2px #b6b2c2a8,0 15px 32px #48354726}
.trade-exchange svg{width:38px;height:38px;stroke:#604657;stroke-width:1.7}
.trade-steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;list-style:none;padding:28px 0 0;margin:10px 0 0;border-top:1px solid #d6d4dc}
.trade-steps li{display:flex;gap:14px}.trade-steps li>span{font-size:10px;color:#8b6471;padding-top:3px}.trade-steps h3{font-size:16px}.trade-steps p{font-size:11px;line-height:1.7;color:#666572;margin-top:9px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.trade-visual:hover .trade-before img{transform:translateX(-6px) rotate(-12deg)}.trade-visual:hover .trade-after img{transform:translateX(6px) rotate(4deg) scale(1.16)}}
@media(max-width:1100px){.header nav a{padding:11px 9px;font-size:12px}.header .nav{gap:15px}.trade-in{padding:40px 30px;gap:25px}.trade-visual{height:340px}.trade-phone img{height:225px}.trade-after img{height:280px}.trade-exchange{width:62px;height:62px;border-radius:20px}.trade-steps{gap:20px}}
@media(max-width:760px){.header nav a{padding:12px 18px}.product-price{font-size:18px}.product-date{font-size:9px}.hero-trade-link{font-size:10px;margin-top:13px}.trade-in{grid-template-columns:1fr;padding:30px 24px 27px;margin-bottom:45px;border-radius:24px;gap:6px}.trade-story h2{font-size:37px;letter-spacing:-1.9px}.trade-story .eyebrow{font-size:8px;margin-bottom:18px}.trade-intro{font-size:12px;margin-top:19px}.trade-note{font-size:9px}.trade-cta{margin-top:22px;padding:16px 20px;gap:25px}.trade-visual{height:310px;margin-inline:-15px}.trade-phone img{height:215px}.trade-after img{height:265px}.trade-phone figcaption{font-size:15px}.trade-phone figcaption small{font-size:9px}.trade-exchange{width:56px;height:56px;border-radius:18px;top:44%}.trade-exchange svg{width:29px;height:29px}.trade-steps{grid-template-columns:1fr;gap:22px;padding-top:24px;margin-top:0}.trade-steps h3{font-size:16px}.trade-steps p{font-size:11px;margin-top:6px}.trade-orbit{inset:22% 3% 23%}}
@media(prefers-reduced-motion:reduce){:is(.button,.nav-contact,.header nav a,.category-tabs button)::after{animation:none!important}:is(.button,.nav-contact,.header nav a,.category-tabs button)::before,.header::before,.trade-phone img{transition:none}.button:hover{transform:none}}
@media(forced-colors:active){.product-badge,.trade-exchange{border:1px solid ButtonText}}



/* One quiet, monochrome label: condition and numerical grade together. */
.product-badge,.product-badge.used,.product-badge.new{top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:20px;border:1px solid #ffffffb3;background:#ffffffa8;color:#4c535b;font-size:11px;line-height:1.2;font-weight:400;letter-spacing:0;white-space:nowrap;box-shadow:inset 0 1px 0 #ffffff9c;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.product-badge.new::before{display:none}
.badge-divider{color:#8e959c}.badge-score{font-weight:500;color:#293440;font-variant-numeric:tabular-nums}
@media(max-width:760px){.product-badge,.product-badge.used,.product-badge.new{top:10px;left:9px;padding:6px 8px;font-size:10px;gap:5px}.favorite-button{right:4px;top:5px}}
@media(max-width:370px){.product-badge,.product-badge.used,.product-badge.new{left:7px;padding:6px;font-size:9px;gap:4px}.favorite-button{width:27px;height:27px;right:3px}}
@media(forced-colors:active){.product-badge{border:1px solid ButtonText}}
