/* Concept home only: landing scroll scene, trust strip, collected band, Grading Lab teaser. */
/* Intro: a pinned scroll scene that ends as the home hero. JS drives the custom properties. */
.top.on-dark { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--night-text); }
.top.on-dark .links a, .top.on-dark .icon-btn { color: var(--night-text); }
.top { transition: background .3s, color .3s, border-color .3s; }
.intro { --slab-w: min(330px, 26vw, calc((100svh - 230px) / 1.7)); position: relative; height: 460vh; margin-top: -68px; }
/* Clip the scene without creating a scroll container that traps focused controls' arrow keys. */
.pin { --c: 0; --chips: 0; --dark: 1; --intro: 1; --cue: 1; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; perspective: 1400px; touch-action: pan-y pinch-zoom; background:
    radial-gradient(60% 80% at 78% 30%, #fff 0%, transparent 60%),
    linear-gradient(115deg, transparent 52%, #ffffff8c 58%, transparent 66%),
    linear-gradient(180deg, #f1ebe0, var(--cream)); }
.pin-dark { position: absolute; inset: 0; opacity: var(--dark, 0); background: radial-gradient(55% 50% at 50% 58%, #33291a 0%, transparent 70%), var(--night); }
.card-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: var(--scene-two, 0); background: #101519; }
.card-art-glow { position: absolute; inset: -3%; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: .7; animation: scene-breathe 22s ease-in-out infinite alternate paused; }
.card-atmosphere::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #080d1426, #080d1440 45%, #080d14c7), linear-gradient(0deg, #080d1466, transparent 35%, #080d1433); }
.card-atmosphere i { position: absolute; inset: 0; opacity: .3; background: radial-gradient(ellipse at 25% 60%, #ccdcd61a, transparent 65%); animation: scene-breathe 16s ease-in-out infinite alternate paused; }
.card-atmosphere i:nth-child(3) { animation-delay: -7s; }
.card-atmosphere i:nth-child(4) { animation-delay: -11s; }
[data-atmosphere="fire"] .card-atmosphere i, [data-atmosphere="volcano"] .card-atmosphere i { background: radial-gradient(ellipse at 20% 85%, #ff90244d, #c432161a 35%, transparent 70%); animation-name: fire-flicker; animation-duration: 4.3s; }
[data-atmosphere="water"] .card-atmosphere i { inset: -100% 0 0; height: 200%; background: radial-gradient(ellipse 2px 28px at 17% 70%, #bbecf45c 30%, transparent 80%), radial-gradient(ellipse 3px 48px at 68% 25%, #9ddce640 25%, transparent 80%); background-size: 163px 317px, 257px 463px; animation: water-trickle 15s linear infinite paused; }
[data-atmosphere="water"] .card-atmosphere i:nth-child(3) { left: 7%; opacity: .16; animation-duration: 21s; }
[data-atmosphere="water"] .card-atmosphere i:nth-child(4) { left: -5%; opacity: .12; animation-duration: 27s; }
[data-atmosphere="electric"] .card-atmosphere i { background: radial-gradient(ellipse at 28% 25%, #fff2a84d, transparent 60%), linear-gradient(112deg, transparent 35%, #c5eeff26 48%, transparent 58%); animation-name: electric-flicker; animation-duration: 7.4s; }
[data-scene="detail"] .card-atmosphere i, [data-scene="detail"] .card-art-glow { animation-play-state: running; }
@keyframes scene-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes fire-flicker { 0%, 100% { opacity: .25; } 16%, 43%, 78% { opacity: .38; } 23%, 51%, 84% { opacity: .28; } 67% { opacity: .42; } }
@keyframes water-trickle { from { translate: 0 0; } to { translate: 0 50%; } }
@keyframes electric-flicker { 0%, 35%, 42%, 68%, 77%, 100% { opacity: .08; } 38%, 73% { opacity: .24; } 40%, 75% { opacity: .13; } }
@media (max-width: 700px) { .card-atmosphere::after { background: linear-gradient(0deg, #080d14df, #080d1433 75%); } }
@media (prefers-reduced-motion: reduce) { .card-atmosphere i, .card-art-glow { animation: none !important; } }
.word { position: absolute; left: 0; right: 0; top: max(11%, 84px); margin: 0; color: var(--night-text); font-family: var(--font); font-size: clamp(40px, min(7.4vw, 11vh), 120px); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1; text-align: center; white-space: nowrap; opacity: var(--intro, 0); pointer-events: none; transform: translateY(calc((1 - var(--intro, 0)) * -24vh)) scale(calc(1 + (1 - var(--intro, 0)) * .12)); }
.landing-foot { position: absolute; left: 0; right: 0; bottom: 4.5%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: var(--cue, 0); }
.cue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; width: min(540px, calc(100% - 24px)); gap: 8px; }
.cue .landing-collection { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--gold); color: #17120a; font-size: 13px; font-weight: 600; }
.cue button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid #ffffff29; border-radius: 999px; background: #ffffff0d; color: var(--night-text); font: 600 13px/1 var(--font); cursor: pointer; }
.cue button:hover { background: #ffffff1a; }
.cue button, .cue .landing-collection { justify-content: center; width: 100%; height: 48px; padding: 8px 12px; text-align: center; line-height: 1.2; }
.cue .skip-intro { border-color: transparent; background: none; color: var(--night-muted); }
.carousel-nav { display: flex; align-items: center; gap: 4px; }
.nav-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff29; border-radius: 50%; background: #ffffff0d; color: var(--night-text); cursor: pointer; }
.nav-arrow:hover { background: #ffffff1a; }
.nav-arrow svg { width: 18px; height: 18px; }
.dots { position: relative; display: flex; max-width: min(62vw, 360px); overflow-x: auto; scrollbar-width: none; }
.dots::-webkit-scrollbar { display: none; width: 0; height: 0; }
.slab-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dots button { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.dots button::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: #ffffff4d; transition: width .3s var(--ease), background .3s; }
.dots button[aria-current="true"]::before { width: 22px; background: var(--gold); }
.peek { position: absolute; left: 50%; top: 50%; z-index: 1; width: calc(var(--slab-w) / .661); aspect-ratio: 1027 / 1531; transform-origin: 39.2% 41.6%; opacity: calc(var(--cue, 0) * .35); filter: brightness(.75); cursor: pointer; transition: opacity .3s; }
.peek:hover { opacity: calc(var(--cue, 0) * .6); }
.peek-prev { transform: translate(-39.2%, -41.6%) translate(calc(var(--peek-x, 0) * -1), var(--peek-y, 0)) scale(var(--peek-s, .5)) rotateY(28deg) rotateZ(-7deg); }
.peek-next { transform: translate(-39.2%, -41.6%) translate(var(--peek-x, 0), var(--peek-y, 0)) scale(var(--peek-s, .5)) rotateY(-28deg) rotateZ(7deg); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cue i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: ping 3s ease-in-out infinite; }
@keyframes ping { 0%, 100% { opacity: .65; box-shadow: 0 0 0 0 #c9a56300; } 50% { opacity: .95; box-shadow: 0 0 0 5px #c9a5631a; } }
@media (prefers-reduced-motion: reduce) { .cue i { animation: none; } }
.hero-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 32px; padding-block: 92px 24px; }
.hero-copy > * { opacity: clamp(0, calc(var(--c, 1) * 3 - var(--i, 0) * .5), 1); transform: translateY(calc((1 - var(--c, 1)) * (40px + var(--i, 0) * 28px))); }
.hero-copy h1 { font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif; font-size: clamp(48px, 6.3vw, 88px); font-weight: 400; letter-spacing: -.035em; line-height: 1.02; }
.hero-slot { align-self: stretch; min-height: 200px; }
/* The slab sits at 6–72% x, 4–79% y of the 1027×1531 photo frame; its centre is the transform origin. */
.held { position: absolute; left: 50%; top: 50%; z-index: 2; width: calc(var(--slab-w) / .661); aspect-ratio: 1027 / 1531; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 39.2% 41.6%; transform: translate(-39.2%, -41.6%) translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1)) rotateY(var(--ry, 0)) rotateZ(var(--rz, 0)); will-change: transform; -webkit-tap-highlight-color: transparent; }
.held:focus-visible { outline: none; }
.held:focus-visible .held-slab { outline: 3px solid var(--gold); outline-offset: -6px; }
.held-float { position: absolute; inset: 0; animation: float 5s ease-in-out infinite; transform: perspective(1000px) rotateX(calc(var(--card-rx, 0deg) * 2.5)) rotateY(calc(var(--card-ry, 0deg) * 2.5)); transition: transform .25s ease; }
/* Light over the slab only (6–72% x, 4–79% y of the frame): pointer glint, as on the live site, plus a slow glimmer sweep while it floats. */
.slab-light { position: absolute; left: 6.23%; top: 3.98%; width: 66.1%; height: 75.3%; overflow: hidden; border-radius: 3.3% / 1.9%; pointer-events: none; mix-blend-mode: screen; }
.card-glint { position: absolute; inset: 0; background: radial-gradient(ellipse at var(--card-x, 50%) var(--card-y, 50%), #fff5, transparent 65%); opacity: var(--card-light, 0); transition: opacity .25s ease; }
.glimmer { position: absolute; inset: -40% -80%; opacity: 0; transform: translateX(-100%); background: linear-gradient(110deg, transparent 40%, #ffffff1f 45%, #ffe7b873 49%, #c9f2ff59 51%, #ffffff1f 55%, transparent 60%); }
/* Start outside the holder after its photo and entrance are ready. */
.held[data-slab-ready] .glimmer { animation: glimmer 4.8s 1.35s ease-in-out infinite backwards; }
@keyframes glimmer { 0%, 30% { opacity: 0; transform: translateX(-100%); } 40%, 60% { opacity: var(--cue, 0); } 70%, 100% { opacity: 0; transform: translateX(100%); } }
@keyframes float { 50% { translate: 0 calc(var(--float, 0) * -14px); } }
.is-arriving .held-float { animation: float 5s ease-in-out infinite, slab-arrival 1.25s cubic-bezier(.16, 1, .3, 1); }
.is-arriving .word { animation: arrival-copy .8s .12s var(--ease) backwards; }
.is-arriving .peek { animation: arrival-peek .9s .3s var(--ease) backwards; }
.is-arriving .peek-next { animation-delay: .4s; }
.is-arriving .landing-foot { animation: arrival-copy .7s .5s var(--ease) backwards; }
@keyframes slab-arrival { from { opacity: 0; scale: .82; rotate: 0 1 0 -16deg; } to { opacity: 1; scale: 1; rotate: 0 1 0 0deg; } }
@keyframes arrival-copy { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes arrival-peek { from { opacity: 0; scale: .9; } to { opacity: .35; scale: 1; } }
.held img { position: absolute; inset: 0; width: 100%; height: 100%; }
.held .hand-variant-thumb { -webkit-mask: url('assets/concept/held-thumb.webp?v=3') center / 100% 100% no-repeat; mask: url('assets/concept/held-thumb.webp?v=3') center / 100% 100% no-repeat; }
.held.skip-reveal .hand-shade { animation: none; }
.held.skip-reveal .hand-layer { transition: none; }
/* Floating shadow only while the slab is alone; once held, the photo's own shading takes over (one fade, not per frame). */
.held-slab { position: absolute; inset: 0; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .35)); transition: filter .5s ease; }
.held[data-grip="in"] .held-slab { filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0)); }
/* Light reveal: the hand is already holding the slab, in the dark. Crossing the grip point sets data-grip="in"
   on .held; light comes up on the hand (opacity) while hand and slab settle toward the camera together (scale on
   .held-float), so nothing slides and the thumb never shifts against the holder. Triggered on its own clock,
   opacity/scale only (GPU-composited), so scroll bursts can't make it stutter. Edge fades are baked into the image. */
/* Fade the photo and its shade together so a dark silhouette cannot precede the skin. */
.hand-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; will-change: opacity; -webkit-mask-image: linear-gradient(to right, #000 99.5%, transparent 100%); mask-image: linear-gradient(to right, #000 99.5%, transparent 100%); }
.held[data-grip="in"] .hand-layer { opacity: var(--return-hand, 1); animation: hand-light .3s ease-out both; }
.held[data-returning="true"] .hand-layer { transition: none; }
/* Darkness lifting off the hand: a hand-shaped shadow (the hand's own image as a mask) fades out, so the hand is
   solid from the start — never see-through over the slab — just in shadow, then lit. */
.hand-shade { position: absolute; inset: 0; background: #0b0b0b; -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat; mask: var(--m) 0 0 / 100% 100% no-repeat; opacity: 0; pointer-events: none; will-change: opacity; }
.held[data-grip="in"] .hand-shade { animation: hand-shade 1.6s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes hand-shade { from { opacity: .92; } }
.held[data-grip="in"] .held-float { animation: float 5s ease-in-out infinite, grip-settle 1.4s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes hand-light { from { opacity: 0; } }
@keyframes grip-settle { from { scale: 1.035; } }
.chip { position: absolute; z-index: 3; opacity: var(--chips, 1); box-shadow: 0 18px 40px #0000001f; }
.grade-chip { top: 9%; left: -14%; display: grid; gap: 2px; padding: 12px 16px; border: 1px solid #ffffffb3; border-radius: 18px; background: #ffffffbf; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--soft); font-size: 12px; font-weight: 500; text-align: left; }
.grade-chip strong { color: var(--ink); font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.grade-chip.is-gem { width: 68px; height: 61px; padding: 9px 6px 17px; gap: 1px; justify-items: center; align-content: center; border: 0; border-radius: 0; text-align: center; background: url('assets/concept/gem-clear.webp') center / contain no-repeat; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; font-size: 8px; letter-spacing: .04em; color: #303b47; }
.grade-chip.is-gem { left: calc(6.23% - 34px); }
.grade-chip.is-gem strong { font-size: 18px; font-weight: 500; letter-spacing: -.03em; }
.grade-chip.is-gem > * { position: relative; }
.price-chip { bottom: 30%; left: -18%; padding: 12px 16px; border-radius: 18px; background: var(--ink); color: #d9d4ca; font-size: 13px; line-height: 1.35; text-align: left; }
.price-chip b { display: block; color: #fff; font-size: 18px; }
.info { position: absolute; left: 50%; top: 50%; z-index: 4; width: min(420px, var(--available-width, 34vw)); height: min(720px, calc(100svh - 112px)); padding: 26px; color: var(--night-text); opacity: var(--o, 0); transform: translate(-50%, -50%) translate(var(--ix, 0), var(--iy, 0)); }
.info-content { display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.info-content > * { flex-shrink: 0; }
/* Frost the full right region so the text does not sit in a separate rounded box. */
.detail-plane { position: absolute; top: 0; bottom: 0; left: var(--hand-edge, 100%); right: 0; z-index: 3; opacity: var(--scene-two, 0); background: #10131766; backdrop-filter: blur(16px) saturate(.65); -webkit-backdrop-filter: blur(16px) saturate(.65); pointer-events: none; }
.detail-plane::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 1px; background: linear-gradient(180deg, transparent, #ffffff40 25%, #ffffff40 75%, transparent); }
.info::after { content: ''; display: none; position: absolute; pointer-events: none; }
.scene-nav { position: absolute; inset: 0; z-index: 5; opacity: var(--scene-two, 0); visibility: hidden; pointer-events: none; }
.scene-nav button { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #ffffff73; pointer-events: auto; cursor: pointer; }
.scene-nav button:hover, .scene-nav button:focus-visible { color: #fff; background: #ffffff0d; }
.scene-nav svg { width: 24px; height: 24px; }
#scene-prev { left: 4px; }
#scene-next { right: 4px; }
.info-content > * { opacity: clamp(0, calc(var(--q, 0) * 5 - var(--i, 0) * .7), 1); transform: translateY(calc((1 - clamp(0, calc(var(--q, 0) * 5 - var(--i, 0) * .7), 1)) * 14px)); }
.info-kicker { color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.info-kicker.engraved-gem { position: relative; padding-right: 24px; }
.info-kicker.engraved-gem::before { position: absolute; top: 50%; right: 0; margin: 0; transform: translateY(-50%); }
.info h2 { margin-top: 10px; color: var(--night-text); font-size: 36px; }
.info-heading { display: flex; align-items: flex-start; gap: 12px; }
.info-heading h2 { flex: 1; min-width: 0; min-height: 2.3em; margin-top: 0; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; overflow-wrap: anywhere; }
.info-heading .info-kicker { flex: 0 0 96px; max-width: 96px; padding-top: 3px; text-align: right; font-size: 10px; line-height: 1.4; letter-spacing: .06em; }
.info-sub { min-height: 2.8em; margin-top: 6px; color: var(--night-muted); font-size: 14px; line-height: 1.4; }
.info-content > .info-desc { flex: 0 0 min(9em, 22svh); margin-top: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; color: #d6d1c7; font-size: 15px; line-height: 1.5; }
.info dl { display: grid; gap: 10px; margin: 20px 0 0; padding: 16px 0; border-block: 1px solid #ffffff1a; font-size: 14px; }
.info dl div { display: flex; justify-content: space-between; gap: 12px; }
.info dt { color: var(--night-muted); }
.info dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.info-buy { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.info-buy b { font-size: 26px; letter-spacing: -.02em; }
.info-buy a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--gold); color: #17120a; font-size: 14px; font-weight: 600; }
.info-buy #view-card { background: transparent; color: var(--night-text); border: 1px solid #ffffff40; }
.info-purchase:not([hidden]) { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 12px; padding: 10px 18px; border-radius: 999px; background: var(--gold); color: #17120a; font-size: 16px; font-weight: 600; }
.info-purchase:hover { background: #d8b674; }
.info-purchase:focus-visible { outline: 2px solid white; outline-offset: 4px; }

/* Trust strip */
.trust .shell { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.trust p { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.trust small { display: block; margin-top: 2px; color: var(--soft); font-size: 13px; font-weight: 400; }
.trust svg { flex: none; width: 22px; height: 22px; color: var(--gold-deep); }

/* Collected band: the current site's dark + gold look */
.band { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 440px; border-radius: 28px; background: radial-gradient(80% 120% at 85% 60%, #3a2f1c 0%, transparent 60%), var(--night); color: var(--night-text); }
.band-copy { position: relative; z-index: 1; padding: clamp(28px, 5vw, 64px); }
.band h2 { color: var(--night-text); }
.band p { max-width: 400px; margin-top: 20px; color: var(--night-muted); font-size: 17px; }
.band .pill { margin-top: 30px; background: var(--gold); color: #17120a; }
.band .pill:hover { background: #d8b674; }
.fan { position: relative; align-self: stretch; min-height: 380px; isolation: isolate; }
.fan a { position: absolute; bottom: -12%; width: 38%; isolation: isolate; border-radius: 12px; }
.fan a:nth-child(1) { left: 6%; transform: rotate(-12deg); }
.fan a:nth-child(2) { left: 31%; bottom: -3%; z-index: 1; }
.fan a:nth-child(3) { left: 56%; transform: rotate(12deg); }
.fan img { display: block; width: 100%; height: auto; transition: opacity .22s ease; }
.fan a::before, .fan a::after { content: ""; position: absolute; inset: 9% -12% 24%; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 30% 42%, #d2d5d98c, transparent 40%), radial-gradient(ellipse at 70% 38%, #b4bdc88c, transparent 38%), radial-gradient(ellipse at 48% 68%, #eef0f28c, transparent 46%); }
.fan a::after { inset: 14% -5% 18%; rotate: 26deg; }
.fan a span { position: absolute; inset: 22% 0 auto; text-align: center; color: #f4e7cd; font-size: clamp(16px, 2vw, 27px); font-weight: 500; line-height: 1.25; opacity: 0; translate: 0 8px; transition: opacity .25s ease, translate .35s var(--ease); pointer-events: none; }
.fan a b { display: block; margin-top: 12px; color: var(--gold); font-weight: 400; }
.money-bags { position: absolute; inset: 0; pointer-events: none; }
.money-bags i { position: absolute; left: 50%; top: 34%; font-style: normal; font-size: 28px; opacity: 0; transform: translate(-50%, -50%) scale(.2); }
.money-bags i:nth-child(1) { --bx: -65px; --by: -80px; --br: -25deg; }
.money-bags i:nth-child(2) { --bx: 0px; --by: -110px; --br: 12deg; }
.money-bags i:nth-child(3) { --bx: 65px; --by: -65px; --br: 28deg; }
.money-bags i:nth-child(4) { --bx: -65px; --by: 55px; --br: -18deg; }
.money-bags i:nth-child(5) { --bx: 60px; --by: 65px; --br: 22deg; }
.fan a:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.fan a:focus-visible img { opacity: 0; visibility: hidden; }
.fan a:focus-visible span { opacity: 1; translate: 0 0; transition-delay: .3s; }
.fan a:focus-visible::before, .fan a:focus-visible::after { animation: sell-smoke .65s ease-out both; }
.fan a:focus-visible .money-bags i { animation: money-burst .95s .28s var(--ease) both; }
@media (hover: hover) {
  .fan a:hover img { opacity: 0; visibility: hidden; }
  .fan a:hover span { opacity: 1; translate: 0 0; transition-delay: .3s; }
  .fan a:hover::before, .fan a:hover::after { animation: sell-smoke .65s ease-out both; }
  .fan a:hover .money-bags i { animation: money-burst .95s .28s var(--ease) both; }
}
@keyframes sell-smoke { 0% { opacity: 0; scale: .25; translate: 0 10px; } 20% { opacity: .9; } 100% { opacity: 0; scale: 1.3; translate: 0 -30px; } }
@keyframes money-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 18%, 65% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) rotate(var(--br)) scale(.85); } }
@media (prefers-reduced-motion: reduce) {
  .held[data-slab-ready] .glimmer { animation: none; }
  .fan img, .fan a span { transition: none; }
  .fan a::before, .fan a::after { animation: none !important; }
  .fan a .money-bags i { animation: none !important; transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(.85); }
  .fan a:is(:hover, :focus-visible) .money-bags i { opacity: 1; }
}
.crest { position: absolute; top: 26px; right: 26px; width: 52px; height: 52px; }

/* Grading Lab */
.lab { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.scanner { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; border: 1px solid #c9a56380; border-radius: 28px; background: linear-gradient(#c9a56318 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, #c9a56318 1px, transparent 1px) 0 0 / 28px 100%, radial-gradient(ellipse at 50% 40%, #e6cf9b4d, transparent 70%), var(--cream); box-shadow: inset 0 0 0 6px #c9a5630a; }
/* Brackets and scan line live in the slab's own box, so they always frame it. */
.scan-frame { position: relative; width: 50%; }
.scan-frame img { width: 100%; height: auto; border-radius: 6px; filter: drop-shadow(0 20px 24px #0003); }
.scan-line { position: absolute; left: -10px; right: -10px; top: 0; height: 2px; background: var(--gold); box-shadow: 0 0 18px 4px #c9a56380; animation: scan 3.2s ease-in-out infinite; }
@keyframes scan { 50% { top: 100%; } }
.corner { position: absolute; width: 26px; height: 26px; border: 2px solid var(--gold); }
.tl { top: -14px; left: -14px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.tr { top: -14px; right: -14px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.bl { bottom: -14px; left: -14px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.br { bottom: -14px; right: -14px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.lab-grade { position: absolute; top: 18px; right: 18px; padding: 6px 14px; border: 1px solid #c9a56359; border-radius: 999px; background: #fffaf0; color: var(--gold-deep); font-size: 13px; font-weight: 600; }
.lab-grade b { margin-left: 4px; color: var(--ink); font-size: 18px; }
.lab-copy { min-width: 0; }
.lab-copy h2 { max-width: 15ch; margin-top: 18px; font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif; font-weight: 400; letter-spacing: -.035em; line-height: 1.08; }
.lab-copy .body { max-width: 46ch; margin-top: 20px; color: var(--soft); font-size: 17px; line-height: 1.6; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0 32px; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #c9a5634d; border-radius: 14px; background: #c9a56308; font-size: 14px; }
.checks li svg { width: 34px; height: 34px; padding: 6px; border-radius: 9px; background: #c9a5631a; color: var(--gold-deep); }
.checks li b { min-width: 0; font-weight: 500; }
.checks li span { color: var(--gold-deep); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-copy .pill { background: var(--gold); color: #17120a; }
.lab-copy .pill:hover { background: #d8b674; }
.note { margin-top: 14px; color: var(--soft); font-size: 13px; }


@media (max-width: 960px) {
  .trust .shell { grid-template-columns: repeat(2, 1fr); }
  .band, .lab { grid-template-columns: 1fr; }
  .fan { min-height: 300px; }
  .scanner, .lab-copy { width: 100%; max-width: 620px; margin-inline: auto; }
  .scanner { aspect-ratio: 4 / 3; }
  .scan-frame { width: 44%; }
}
@media (max-width: 1024px) {
  .pin { --scene-top: 80px; }
  .info { left: calc(50% + 16px); top: calc((100% + var(--scene-top) - 12px) / 2); width: calc(50% - 32px); height: calc(100svh - var(--scene-top) - 24px); padding: 12px; transform: translateY(calc(-50% + var(--iy, 0px))); }
  .info .info-heading h2 { font-size: 24px; line-height: 1.15; }
  .info .info-heading .info-kicker { flex-basis: 80px; max-width: 80px; font-size: 9px; }
  .info-sub { font-size: 12px; line-height: 1.4; }
  .info dl { margin-top: 8px; padding: 6px 0; gap: 2px; font-size: 12px; line-height: 1.4; }
  .info dd { overflow-wrap: anywhere; text-align: right; }
  .info-buy { margin-top: 8px; gap: 8px; }
  .info-buy b { font-size: 24px; }
  .info-buy a { padding: 0 12px; font-size: 12px; }
  .info .info-purchase:not([hidden]) { min-height: 44px; margin-top: 8px; font-size: 14px; }
  .scene-nav button { top: calc((100% + var(--scene-top) - 12px) / 2); }
  .scene-nav #scene-next { right: calc(50% + 4px); }
}
@media (max-width: 760px) {
  .pin { --scene-top: 72px; }
  .intro { --slab-w: min(250px, 60vw, calc((100svh - 260px) / 1.7)); height: 420vh; margin-top: -60px; }
  .hero-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 0; padding-block: 80px 0; }
  .hero-copy .lede { margin-top: 14px; font-size: 16px; }
  .hero-copy .cta-row { margin-top: 18px; }
  .hero-copy .ghost { display: none; }
  .hero-copy h1 { margin-top: 14px; font-size: clamp(42px, 11.5vw, 58px); }
  .word { top: 13%; font-size: 8.5vw; }
  .chip { display: none; }
}
@media (max-width: 600px) {
  .pin { --mobile-details-height: min(300px, calc(100svh - 220px)); }
  .info { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; height: var(--mobile-details-height); transform: translateY(var(--iy, 0)); }
  .scene-nav button { top: calc((var(--scene-top) + 100% - var(--mobile-details-height) - 12px) / 2); bottom: auto; transform: translateY(-50%); }
  .scene-nav #scene-next { right: 4px; }
  .detail-plane { display: none; }
  .hand-layer { display: none; }
  .info .info-heading h2, .info-sub { min-height: 0; }
  .info dt { flex-shrink: 0; }
  .info::after { display: block; left: 20px; right: 20px; top: 0; width: auto; height: 1px; background: linear-gradient(90deg, transparent, #ffffff40 25%, #ffffff40 75%, transparent); }
  .info-desc { display: none; }
}
@media (min-width: 601px) and (max-width: 1024px) and (max-height: 540px) {
  .info-desc { display: none; }
}
@media (max-width: 560px) {
  .cue button, .cue .landing-collection { height: 56px; padding: 8px; font-size: 12px; gap: 6px; }
  .trust .shell { gap: 18px 14px; }
  .trust p { align-items: flex-start; font-size: 13px; }
  .band { border-radius: 22px; }
  .band .pill { width: 100%; }
  .fan { min-height: 230px; }
  .checks { grid-template-columns: 1fr; }
  .crest { display: none; }
  .scanner { aspect-ratio: 1; }
  .lab-grade { top: 12px; right: 12px; }
  .lab-copy .pill { width: 100%; }
}