/* ---------- NAV ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(14,15,22,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 17px; }
.logo-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), var(--violet)); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; }
.logo-word { color: var(--ink); }
.logo-img { height: 26px; width: auto; display: block; }
.footer-brand .logo-img { height: 22px; }
.nav-links { display: flex; gap: 32px; }
.nav-links a { text-decoration: none; color: var(--ink-muted); font-weight: 600; font-size: 14.5px; transition: color 0.15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-login { text-decoration: none; color: var(--ink-muted); font-weight: 600; font-size: 14.5px; }
.nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; padding: 8px; cursor: pointer; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-mobile { display: none; flex-direction: column; gap: 4px; padding: 8px 24px 20px; border-bottom: 1px solid var(--border); }
.nav-mobile a { text-decoration: none; color: var(--ink-muted); font-weight: 600; padding: 10px 0; }
.nav-mobile.open { display: flex; }

/* ---------- BUTTONS ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; border-radius: 999px; padding: 11px 22px; font-size: 14.5px; border: 1.5px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; }
.btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 8px 24px var(--primary-glow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px var(--primary-glow); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { padding: 15px 30px; font-size: 16px; }

/* ---------- SHARED TYPE ---------- */
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12.5px; font-weight: 700; color: var(--accent); margin: 0 0 14px; }
.hero-accent { color: var(--accent); }

/* ---------- HERO SCENE ---------- */
.hero-scene { position: relative; padding: 100px 0 120px; overflow: hidden; min-height: 92vh; display: flex; align-items: center; }
.hero-scene::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 82% 20%, var(--primary-glow), transparent 45%),
    radial-gradient(circle at 60% 60%, var(--accent-glow), transparent 55%),
    radial-gradient(circle at 15% 80%, rgba(154,128,242,0.18), transparent 40%);
}

/* Floating background cards - pure CSS drift, no JS dependency, so
   this looks alive even before any interaction and works identically
   on touch devices. */
.hero-bg-cards { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bg-card {
  position: absolute; width: 90px; aspect-ratio: 5/7; border-radius: 10px;
  background: linear-gradient(155deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong); opacity: 0.35;
  --px: 0px; --py: 0px;
  animation: bg-card-drift 14s ease-in-out infinite;
}
.bg-card-1 { top: 12%; left: 6%; animation-duration: 16s; }
.bg-card-2 { top: 62%; left: 10%; width: 70px; animation-duration: 12s; animation-delay: -3s; }
.bg-card-3 { top: 8%; left: 88%; width: 100px; animation-duration: 18s; animation-delay: -7s; }
.bg-card-4 { top: 70%; left: 90%; width: 75px; animation-duration: 13s; animation-delay: -5s; }
.bg-card-5 { top: 42%; left: 3%; width: 60px; animation-duration: 15s; animation-delay: -9s; opacity: 0.22; }
@keyframes bg-card-drift {
  0%, 100% { transform: translate(var(--px), var(--py)) rotate(-4deg); }
  50% { transform: translate(var(--px), calc(var(--py) - 24px)) rotate(4deg); }
}

.hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; position: relative; z-index: 1; }

.hero-headline { font-size: 68px; line-height: 1.05; letter-spacing: 0.01em; margin-bottom: 6px; text-transform: uppercase; }
.hero-line { display: block; }
.hero-headline-sub { font-family: var(--font-display); font-size: 24px; color: var(--accent); margin: 6px 0 24px; text-transform: uppercase; letter-spacing: 0.02em; }
.hero-sub { font-size: 18px; color: var(--ink-muted); max-width: 460px; margin: 0 0 32px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-note { font-size: 13px; color: var(--ink-faint); }

/* ---------- X-RAY SCAN CARD ---------- */
.xray-stage { display: flex; flex-direction: column; align-items: center; perspective: 1200px; }
.xray-card {
  position: relative; width: 280px; aspect-ratio: 5/7; border-radius: 18px;
  transform-style: preserve-3d; transition: transform 0.2s ease;
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 0 0 1px var(--border-strong);
}
.xray-card-surface, .xray-card-data {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden;
}
.xray-card-surface {
  background: linear-gradient(160deg, #1e2030, #14151f 60%);
  display: flex; flex-direction: column;
  animation: surface-fade 6s ease-in-out infinite;
}
.xray-card-art { flex: 1; margin: 16px 16px 0; border-radius: 10px; background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 55%, var(--pink) 100%); opacity: 0.85; }
.xray-card-title-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 4px; font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.holo-mana { color: var(--accent); }
.xray-card-text { padding: 6px 16px 16px; font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; }

.xray-card-data {
  background: #0a0a10; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 22px;
  opacity: 0; filter: blur(4px);
  animation: data-reveal 6s ease-in-out infinite;
}
.data-row { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--border); padding-bottom: 8px; font-family: var(--font-data); }
.data-label { font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink-faint); }
.data-value { font-size: 12px; color: var(--green); font-weight: 700; }

.xray-scan-beam {
  position: absolute; left: -10%; right: -10%; height: 3px; top: 0;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, #fff 50%, var(--accent) 80%, transparent);
  box-shadow: 0 0 24px 4px var(--accent-glow); pointer-events: none;
  animation: scan-sweep 6s ease-in-out infinite;
}

@keyframes scan-sweep {
  0%, 12% { transform: translateY(-20px); opacity: 0; }
  18% { opacity: 1; }
  50% { transform: translateY(370px); opacity: 1; }
  58%, 100% { opacity: 0; }
}
@keyframes surface-fade {
  0%, 15% { opacity: 1; }
  30%, 78% { opacity: 0.06; }
  92%, 100% { opacity: 1; }
}
@keyframes data-reveal {
  0%, 22% { opacity: 0; filter: blur(4px); }
  35%, 75% { opacity: 1; filter: blur(0); }
  90%, 100% { opacity: 0; filter: blur(4px); }
}

.xray-hint { margin-top: 20px; font-size: 12.5px; color: var(--ink-faint); }

/* Reduced motion: skip the loop, show a permanently-revealed state
   rather than a frozen mid-transition frame - still communicates the
   product idea, just without motion. */
@media (prefers-reduced-motion: reduce) {
  .xray-card-surface { animation: none; opacity: 0.06; }
  .xray-card-data { animation: none; opacity: 1; filter: none; }
  .xray-scan-beam { animation: none; opacity: 0; }
  .bg-card { animation: none; }
}

/* ---------- PROBLEM ---------- */
.problem { padding: 70px 0; border-top: 1px solid var(--border); }
.problem h2 { font-size: 34px; max-width: 780px; margin-bottom: 20px; }
.problem-sub { font-size: 17px; color: var(--ink-muted); max-width: 640px; }

/* ---------- STORY ---------- */
.story { padding: 60px 0 80px; }
.story-steps { display: flex; align-items: stretch; gap: 20px; flex-wrap: wrap; }
.story-step { flex: 1; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 20px; }
.story-num { display: block; font-family: var(--font-display); font-size: 18px; color: var(--accent); margin-bottom: 8px; }
.story-step p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.story-arrow { display: flex; align-items: center; font-size: 22px; color: var(--ink-faint); }

/* ---------- HOW IT WORKS ---------- */
.how-it-works { padding: 90px 0; border-top: 1px solid var(--border); }
.how-it-works h2 { font-size: 36px; margin-bottom: 44px; max-width: 600px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 26px; }
.step-index { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-family: var(--font-display); font-size: 16px; margin-bottom: 18px; }
.step-card h3 { font-size: 19px; margin-bottom: 10px; }
.step-card p { margin: 0; color: var(--ink-muted); font-size: 14.5px; line-height: 1.55; }

/* ---------- FEATURES ---------- */
.features { padding: 90px 0; border-top: 1px solid var(--border); }
.features h2 { font-size: 36px; margin-bottom: 44px; max-width: 600px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { padding: 24px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-raise); }
.feature-card h3 { font-size: 16.5px; margin-bottom: 8px; font-family: var(--font-body); font-weight: 700; }
.feature-card p { margin: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.55; }

/* ---------- WHY ---------- */
.why { padding: 90px 0; border-top: 1px solid var(--border); background: var(--bg-raise); }
.why-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.why h2 { font-size: 32px; margin-bottom: 18px; }
.why-copy > p { color: var(--ink-muted); font-size: 16px; max-width: 440px; }
.why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.why-list li { color: var(--ink-muted); font-size: 15px; line-height: 1.55; padding-left: 26px; position: relative; }
.why-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.why-list strong { color: var(--ink); }

/* ---------- SOCIAL PROOF ---------- */
.proof { padding: 60px 0; text-align: center; }
.proof-label { font-family: var(--font-display); font-size: 20px; margin: 0 0 8px; }
.proof-sub { color: var(--ink-faint); font-size: 14px; margin: 0; }

/* ---------- FAQ ---------- */
.faq { padding: 90px 0; border-top: 1px solid var(--border); }
.faq h2 { font-size: 32px; margin-bottom: 36px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.faq-list details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px 22px; }
.faq-list summary { padding: 18px 0; cursor: pointer; font-weight: 700; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 20px; color: var(--accent); font-weight: 400; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list p { margin: 0 0 20px; color: var(--ink-muted); font-size: 14.5px; line-height: 1.6; }
.faq-list a { color: var(--accent); }

/* ---------- FINAL CTA ---------- */
.final-cta { padding: 100px 0; text-align: center; border-top: 1px solid var(--border); }
.final-cta h2 { font-size: 38px; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ---------- FOOTER ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 60px 0 30px; }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.footer-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-cols h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin: 0 0 14px; }
.footer-cols a { display: block; text-decoration: none; color: var(--ink-muted); font-size: 14px; margin-bottom: 10px; }
.footer-cols a:hover { color: var(--accent); }
.footer-legal { border-top: 1px solid var(--border); padding-top: 24px; }
.footer-legal p { margin: 0; color: var(--ink-faint); font-size: 12.5px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero-scene { padding: 50px 0 60px; min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .xray-stage { order: -1; }
  .xray-card { width: 220px; margin: 0 auto; }
  .hero-headline { font-size: 42px; }
  .hero-headline-sub { font-size: 22px; }
  .hero-sub { max-width: none; }
  .bg-card-3, .bg-card-4 { display: none; } /* avoid clutter competing with the card on a narrow screen */
  .why-inner { grid-template-columns: 1fr; }
  .steps-grid, .feature-grid { grid-template-columns: 1fr; }
  .story-steps { flex-direction: column; }
  .story-arrow { display: none; }
}
@media (max-width: 480px) {
  .hero-headline { font-size: 34px; }
}

/* ---------- COLLECTION-FIRST REDESIGN ---------- */
.hero-scene{position:relative;overflow:hidden;min-height:780px;padding:72px 0 90px;background:radial-gradient(circle at 72% 35%,rgba(117,103,255,.13),transparent 35%),radial-gradient(circle at 15% 55%,rgba(66,232,255,.07),transparent 30%),var(--bg)}
.hero-noise{position:absolute;inset:0;opacity:.08;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.55) .6px,transparent .6px);background-size:5px 5px;mask-image:linear-gradient(to bottom,black,transparent 85%)}
.hero-bg-cards .bg-card{width:150px;height:210px;padding:0;border:0;overflow:hidden;border-radius:13px;opacity:.14;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.hero-bg-cards .bg-card img{width:100%;height:100%;object-fit:cover}
.bg-card-1{top:16%;left:5%;transform:rotate(-12deg)}.bg-card-2{top:58%;left:11%;transform:rotate(8deg)}.bg-card-3{top:12%;left:87%;transform:rotate(12deg)}.bg-card-4{top:64%;left:82%;transform:rotate(-9deg)}
.hero-headline{font-size:clamp(58px,7vw,92px);letter-spacing:.005em}.hero-headline em{font-style:normal;color:var(--accent);display:inline-block;transform:skewX(-7deg)}
.hero-sub{max-width:560px;font-size:17px}.hero-copy{position:relative;z-index:2}.hero-note{font-family:var(--font-data);text-transform:uppercase;letter-spacing:.06em}
.collection-stack{position:relative;width:430px;height:540px;transform-style:preserve-3d}.stack-card{position:absolute;inset:0;margin:auto;width:290px;height:406px;border-radius:18px;overflow:hidden;box-shadow:0 35px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12);transition:transform .25s ease}.stack-card img{width:100%;height:100%;object-fit:cover}.stack-back{transform:translate(-62px,20px) rotate(-11deg);opacity:.62}.stack-mid{transform:translate(38px,10px) rotate(9deg);opacity:.78}.stack-front{transform:translate(0,0) rotate(-1deg);z-index:3}.scan-line{position:absolute;left:-10%;right:-10%;height:4px;top:10%;background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent);box-shadow:0 0 30px 6px var(--accent-glow);animation:hero-scan 4.5s ease-in-out infinite}.scan-label{position:absolute;left:18px;bottom:18px;padding:8px 10px;border:1px solid rgba(66,232,255,.4);background:rgba(7,8,18,.72);backdrop-filter:blur(8px);font:700 10px var(--font-data);letter-spacing:.08em;color:var(--accent)}@keyframes hero-scan{0%,10%{transform:translateY(0);opacity:0}18%{opacity:1}72%{transform:translateY(335px);opacity:1}84%,100%{opacity:0}}
.reveal-chip{position:absolute;right:-18px;bottom:46px;z-index:4;padding:13px 16px;border:1px solid rgba(105,240,174,.35);background:rgba(10,12,23,.88);box-shadow:0 20px 50px rgba(0,0,0,.45);font:700 10px var(--font-data);letter-spacing:.05em;color:var(--good)}.reveal-chip span{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:7px;border-radius:50%;background:rgba(105,240,174,.14)}
.problem{padding:110px 0;background:var(--bg-raise)}.split-callout{display:grid;grid-template-columns:1fr .85fr;gap:80px;align-items:end}.problem h2{font-size:clamp(42px,5vw,64px);max-width:760px}.problem h2 span{color:var(--accent)}.problem-sub{max-width:540px;margin:0;font-size:18px}
.possibility,.product-demo,.owned-section,.cards-directory{padding:110px 0;border-top:1px solid var(--border)}.section-heading{margin-bottom:46px}.section-heading h2{font-size:clamp(38px,4.5vw,58px);max-width:720px}.xray-flow{display:grid;grid-template-columns:1fr 150px 1fr;gap:30px;align-items:center}.flow-panel{min-height:390px;padding:26px;border:1px solid var(--border);border-radius:28px;background:linear-gradient(145deg,var(--surface),var(--bg-raise));overflow:hidden}.flow-label{font:700 11px var(--font-data);letter-spacing:.08em;color:var(--ink-faint)}.mini-fan{height:300px;position:relative;margin-top:25px}.mini-fan img{position:absolute;width:175px;height:245px;object-fit:cover;border-radius:12px;box-shadow:0 20px 45px rgba(0,0,0,.45);top:20px;left:50%;transform-origin:bottom center}.mini-fan img:nth-child(1){transform:translateX(-50%) rotate(-22deg)}.mini-fan img:nth-child(2){transform:translateX(-50%) rotate(-11deg)}.mini-fan img:nth-child(3){transform:translateX(-50%) rotate(0)}.mini-fan img:nth-child(4){transform:translateX(-50%) rotate(11deg)}.mini-fan img:nth-child(5){transform:translateX(-50%) rotate(22deg)}
.flow-beam{position:relative;text-align:center;font:700 10px var(--font-data);letter-spacing:.12em;color:var(--accent)}.flow-beam i{display:block;height:1px;margin-top:18px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 22px var(--accent-glow)}.result-card{display:flex;gap:18px;align-items:center;margin-top:25px;padding:16px;border:1px solid var(--border-strong);border-radius:18px;background:rgba(117,103,255,.07)}.result-card img{width:90px;height:126px;object-fit:cover;border-radius:8px}.result-card b{display:block;font-size:17px}.result-card small{display:block;color:var(--ink-muted);margin-top:5px}.owned-missing{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}.owned-missing span{padding:8px 10px;border-radius:999px;background:rgba(105,240,174,.08);color:var(--good);font:700 9px var(--font-data);letter-spacing:.08em}.owned-missing span:nth-child(2){background:rgba(255,255,255,.04);color:var(--ink-faint)}.owned-missing span:nth-child(3){background:rgba(66,232,255,.08);color:var(--accent)}
.demo-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:center}.demo-grid h2{font-size:clamp(38px,4vw,56px);margin-bottom:18px}.demo-grid p{color:var(--ink-muted);max-width:480px;margin-bottom:28px}.browser-frame{border:1px solid var(--border-strong);border-radius:22px;background:#080912;box-shadow:0 35px 100px rgba(0,0,0,.5);overflow:hidden;transform:rotate(-1deg)}.browser-top{height:42px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--border);font:700 11px var(--font-data);color:var(--ink-faint)}.browser-top span{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);opacity:.5}.browser-top b{margin-left:12px}.product-screen{position:relative;min-height:420px;padding:22px;background:linear-gradient(145deg,#0b0d18,#14152a)}.screen-nav{font:700 10px var(--font-data);color:var(--ink);letter-spacing:.08em;margin-bottom:20px}.screen-nav span{margin-left:25px;color:var(--ink-faint)}.screen-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.screen-grid img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:7px;box-shadow:0 8px 18px rgba(0,0,0,.35)}.screen-overlay{position:absolute;left:25px;bottom:25px;width:280px;padding:18px;border:1px solid rgba(66,232,255,.25);background:rgba(7,8,18,.86);backdrop-filter:blur(10px)}.screen-overlay span{font:700 9px var(--font-data);color:var(--accent)}.screen-overlay b{display:block;font:400 26px var(--font-display);text-transform:uppercase;margin:7px 0}.screen-overlay small{color:var(--ink-muted)}
.feature-story{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.feature-visual{height:470px;position:relative;display:flex;align-items:center;justify-content:center}.feature-visual img{position:absolute;width:230px;height:322px;object-fit:cover;border-radius:15px;box-shadow:0 30px 70px rgba(0,0,0,.55)}.feature-visual img:first-child{transform:translate(-70px,12px) rotate(-9deg)}.feature-visual img:nth-child(2){transform:translate(70px,-12px) rotate(8deg)}.feature-visual span{position:absolute;bottom:28px;padding:10px 14px;border:1px solid rgba(66,232,255,.35);background:rgba(7,8,18,.82);font:700 10px var(--font-data);color:var(--accent);letter-spacing:.1em}.feature-list{display:grid;gap:18px}.feature-list article{display:grid;grid-template-columns:40px 1fr;column-gap:14px;padding:20px 0;border-top:1px solid var(--border)}.feature-list b{font:700 11px var(--font-data);color:var(--accent)}.feature-list h3{font:400 25px var(--font-display);text-transform:uppercase}.feature-list p{grid-column:2;color:var(--ink-muted);margin:5px 0 0}
.owned-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:center}.owned-grid h2{font-size:clamp(40px,4.5vw,58px)}.owned-grid p{color:var(--ink-muted);max-width:440px}.owned-deck{padding:30px;border-radius:28px;background:var(--surface);border:1px solid var(--border)}.deck-row{display:flex;justify-content:center;min-height:180px}.deck-row img{width:105px;height:147px;object-fit:cover;border-radius:9px;box-shadow:0 14px 28px rgba(0,0,0,.4);margin-left:-22px;border:1px solid rgba(255,255,255,.1)}.deck-row img:first-child{margin-left:0}.deck-row.missing{margin-top:18px;opacity:.24;filter:grayscale(.75)}.legend{display:flex;gap:22px;margin-top:24px;font:700 10px var(--font-data);color:var(--ink-faint)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}.owned-dot{background:var(--good);box-shadow:0 0 12px var(--good)}.missing-dot{background:var(--ink-faint)}
.why{padding:110px 0}.why-card{padding:24px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(145deg,var(--surface),var(--bg-raise))}.why-line{padding:22px 0;border-bottom:1px solid var(--border)}.why-line:last-child{border-bottom:0}.why-line span{display:block;font:700 10px var(--font-data);color:var(--ink-faint);letter-spacing:.08em}.why-line b{display:block;margin-top:6px;font:400 25px var(--font-display);text-transform:uppercase}.why-line.active{padding:24px 18px;margin:0 -8px;border:1px solid rgba(66,232,255,.25);border-radius:15px;background:rgba(66,232,255,.05)}.why-line.active span,.why-line.active b{color:var(--accent)}
.steps-grid{grid-template-columns:repeat(4,1fr)}.step-card{min-height:230px}.step-index{width:auto;height:auto;background:none;color:var(--accent);font:400 34px var(--font-display);justify-content:flex-start;padding:0}.step-card h3{text-transform:uppercase;font-size:25px}
.cards-directory{background:var(--bg-raise)}.inline-heading{display:flex;justify-content:space-between;gap:30px;align-items:end}.card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.card-tile{display:block;text-decoration:none}.card-image-wrap{overflow:hidden;border-radius:13px;background:var(--surface);border:1px solid var(--border);box-shadow:0 15px 35px rgba(0,0,0,.25);aspect-ratio:5/7}.card-image-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.card-tile:hover .card-image-wrap img{transform:scale(1.035)}.card-tile-meta{display:flex;justify-content:space-between;gap:10px;padding:10px 2px;font-size:12px}.card-tile-meta span{color:var(--accent);font:700 9px var(--font-data);text-transform:uppercase}.directory-page{padding:90px 0 120px}.directory-page h1,.card-page h1{font-size:clamp(58px,7vw,90px);text-transform:uppercase}.directory-intro{max-width:650px;color:var(--ink-muted);font-size:18px;margin:15px 0 55px}.card-page{padding:80px 0 120px}.card-page-grid{display:grid;grid-template-columns:380px 1fr;gap:90px;align-items:center}.card-hero-image img{width:100%;border-radius:20px;box-shadow:0 35px 90px rgba(0,0,0,.55)}.card-lead{font-size:21px;color:var(--ink-muted);max-width:600px}.card-info{display:grid;gap:12px;margin:30px 0}.card-info div{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.card-info span{display:block;font:700 9px var(--font-data);color:var(--ink-faint)}.card-info b{display:block;margin-top:4px}.card-page-section{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px;padding:100px 0;border-top:1px solid var(--border)}.card-page-section h2{font-size:clamp(34px,4vw,52px)}.card-page-section>p{color:var(--ink-muted);font-size:18px}.related-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.related-strip a{text-decoration:none;color:var(--ink-muted)}.related-strip img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:10px}.related-strip span{display:block;padding-top:8px;font-size:11px}
.final-cta{position:relative;overflow:hidden;padding:130px 0}.final-cta h2{font-size:clamp(50px,6vw,76px);position:relative;z-index:2}.final-cta p:not(.eyebrow){color:var(--ink-muted);font-size:18px;position:relative;z-index:2}.cta-cards{position:absolute;inset:0;pointer-events:none}.cta-cards img{position:absolute;width:190px;opacity:.23;filter:saturate(.8)}.cta-cards img:nth-child(1){left:10%;top:25%;transform:rotate(-18deg)}.cta-cards img:nth-child(2){right:10%;top:15%;transform:rotate(15deg)}.cta-cards img:nth-child(3){left:44%;bottom:-38%;transform:rotate(4deg);opacity:.12}
@media(max-width:1050px){.card-grid{grid-template-columns:repeat(4,1fr)}.steps-grid{grid-template-columns:repeat(2,1fr)}.xray-flow{grid-template-columns:1fr}.flow-beam{padding:10px 0}.flow-beam i{margin-top:8px}.demo-grid,.owned-grid{grid-template-columns:1fr}.feature-story{grid-template-columns:1fr}.card-page-grid{grid-template-columns:300px 1fr;gap:50px}}
@media(max-width:900px){.hero-scene{min-height:0;padding-top:50px}.hero-inner{gap:55px}.xray-stage{order:-1}.collection-stack{width:330px;height:430px}.stack-card{width:235px;height:329px}.reveal-chip{right:-5px;bottom:20px}.split-callout{grid-template-columns:1fr;gap:20px}.card-grid{grid-template-columns:repeat(3,1fr)}.browser-frame{transform:none}.product-screen{min-height:330px}.screen-grid{grid-template-columns:repeat(3,1fr)}.screen-overlay{width:240px}.related-strip{grid-template-columns:repeat(4,1fr)}.card-page-section{grid-template-columns:1fr;gap:25px}}
@media(max-width:600px){.wrap{padding:0 18px}.hero-headline{font-size:48px}.collection-stack{width:290px;height:390px}.stack-card{width:210px;height:294px}.hero-ctas{flex-direction:column;align-items:stretch}.hero-ctas .btn{text-align:center}.problem,.possibility,.product-demo,.features,.owned-section,.why,.how-it-works,.cards-directory,.faq,.final-cta{padding:75px 0}.xray-flow{gap:12px}.flow-panel{min-height:320px}.mini-fan{height:230px}.mini-fan img{width:145px;height:203px}.feature-visual{height:390px}.feature-visual img{width:180px;height:252px}.card-grid{grid-template-columns:repeat(2,1fr);gap:14px}.inline-heading{align-items:flex-start;flex-direction:column}.steps-grid{grid-template-columns:1fr}.product-screen{min-height:300px}.screen-overlay{left:15px;bottom:15px;width:210px}.screen-overlay b{font-size:22px}.card-page-grid{grid-template-columns:1fr}.card-hero-image{max-width:280px}.related-strip{grid-template-columns:repeat(3,1fr)}.cta-cards img{width:120px}.cta-cards img:nth-child(1){left:-8%;top:18%}.cta-cards img:nth-child(2){right:-8%;top:16%}.cta-cards img:nth-child(3){left:40%;bottom:-20%}}
@media(prefers-reduced-motion:reduce){.scan-line{animation:none;top:50%;opacity:1}.stack-card,.card-image-wrap img{transition:none}.hero-bg-cards .bg-card{animation:none!important}}

/* Collectible card experience — revision 2 */
.card-tilt-ready,
.card-tilt-ready img,
.card-image-wrap,
.stack-card,
.feature-visual img,
.deck-row img,
.cta-cards img,
.mini-fan img,
.result-card img {
  transform-style: preserve-3d;
  will-change: transform;
}

.card-image-wrap,
.stack-card,
.feature-visual img,
.deck-row img,
.cta-cards img,
.mini-fan img,
.result-card img {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  --lift: 0px;
  --shine: 0;
  transition: transform .18s cubic-bezier(.2,.75,.25,1), box-shadow .18s ease, filter .18s ease;
}

.card-image-wrap::after,
.stack-card::after,
.feature-visual::after,
.card-hero-image::after,
.result-card::after {
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.34), transparent 16%),
    linear-gradient(115deg, transparent 25%, rgba(66,232,255,.14) 43%, rgba(182,108,255,.22) 52%, transparent 69%);
  mix-blend-mode:screen;
  opacity:var(--shine,0);
  transition:opacity .18s ease;
}

.card-image-wrap:hover,
.stack-card:hover,
.feature-visual img:hover,
.deck-row img:hover,
.cta-cards img:hover,
.mini-fan img:hover,
.result-card img:hover {
  box-shadow: 0 32px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.16), 0 0 45px rgba(66,232,255,.10);
  filter:saturate(1.06) contrast(1.02);
}

.card-image-wrap { position:relative; overflow:hidden; }
.card-image-wrap img { position:relative; z-index:1; }
.stack-card { position:absolute; }
.hero-commander { box-shadow:0 45px 110px rgba(0,0,0,.68), 0 0 60px rgba(117,103,255,.18); }
.hero-commander::before {
  content:"COMMANDER";
  position:absolute;
  z-index:5;
  top:16px;
  left:16px;
  padding:7px 9px;
  font:700 9px var(--font-data);
  letter-spacing:.12em;
  color:#fff;
  background:rgba(7,8,18,.66);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
}
.fan-commander { z-index:4; filter:drop-shadow(0 24px 28px rgba(0,0,0,.45)); }

/* The product proof deliberately avoids fake application UI. */
.product-proof {
  position:relative;
  min-height:420px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:linear-gradient(145deg, rgba(18,21,38,.98), rgba(8,9,19,.98));
  box-shadow:0 35px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  transform:perspective(1200px) rotateY(-3deg) rotateX(1deg);
}
.proof-top { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--border); color:var(--ink-muted); font:700 10px var(--font-data); letter-spacing:.08em; }
.proof-top a { margin-left:auto; color:var(--ink); text-decoration:none; }
.proof-live { color:var(--accent); }
.proof-body { display:grid; grid-template-columns:230px 1fr; gap:34px; align-items:center; padding:42px; min-height:340px; }
.proof-commander { position:relative; justify-self:center; }
.proof-commander img { display:block; width:190px; border-radius:14px; box-shadow:0 30px 60px rgba(0,0,0,.55); }
.proof-commander span { position:absolute; left:12px; bottom:12px; padding:7px 9px; border:1px solid rgba(66,232,255,.35); background:rgba(7,8,18,.75); color:var(--accent); font:700 9px var(--font-data); letter-spacing:.08em; }
.proof-copy b { display:block; font:400 clamp(28px,3vw,42px) var(--font-display); text-transform:uppercase; line-height:.98; }
.proof-copy p { max-width:460px; color:var(--ink-muted); line-height:1.65; }
.proof-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.proof-pills span { padding:8px 10px; border:1px solid var(--border); border-radius:999px; color:var(--ink-faint); font:700 9px var(--font-data); }

.feature-visual { position:relative; }
.feature-visual .feature-main-card { z-index:3; transform:scale(1.05); }
.feature-visual::after { z-index:5; inset:0; border-radius:inherit; }

@media(max-width:900px){
  .product-proof { transform:none; }
  .proof-body { grid-template-columns:190px 1fr; padding:28px; gap:24px; }
  .proof-commander img { width:155px; }
}
@media(max-width:600px){
  .proof-body { grid-template-columns:1fr; text-align:center; padding:26px 20px 32px; }
  .proof-commander img { width:170px; margin:auto; }
  .proof-pills { justify-content:center; }
  .proof-top { font-size:9px; }
  .feature-visual .feature-main-card { transform:scale(1); }
}
@media(prefers-reduced-motion:reduce){
  .card-image-wrap,.stack-card,.feature-visual img,.deck-row img,.cta-cards img,.mini-fan img,.result-card img { transition:none!important; }
}
.card-hero-image { position:relative; border-radius:20px; }
.card-hero-image::after { opacity:var(--shine,0); }
.card-hero-image img { display:block; position:relative; z-index:1; }

/* ---------- FINAL CARD EXPERIENCE POLISH ---------- */
.card-interactive {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  --lift: 0px;
  --shine: 0;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .28s cubic-bezier(.18,.8,.22,1), box-shadow .28s ease, filter .28s ease;
  isolation: isolate;
}
.card-interactive::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--shine);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.38), transparent 19%),
    linear-gradient(118deg, transparent 24%, rgba(66,232,255,.08) 40%, rgba(255,255,255,.17) 48%, rgba(182,108,255,.18) 55%, transparent 72%);
  mix-blend-mode: screen;
  transition: opacity .22s ease;
}
.card-interactive::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 28px rgba(66,232,255,.05);
}
.card-interactive > img {
  display: block;
  position: relative;
  z-index: 1;
  transform: none !important;
}
.card-interactive:hover,
.card-interactive.touch-selected {
  filter: saturate(1.045) contrast(1.018);
}

/* Collection fans: the wrapper, not the image, owns the tilt. */
.mini-fan .card-interactive {
  position: absolute;
  width: 175px;
  height: 245px;
  top: 20px;
  left: 50%;
  transform-origin: bottom center;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(0,0,0,.45);
}
.mini-fan .card-interactive:nth-child(1) { transform: translateX(-50%) rotate(-22deg); }
.mini-fan .card-interactive:nth-child(2) { transform: translateX(-50%) rotate(-11deg); }
.mini-fan .card-interactive:nth-child(3) { transform: translateX(-50%) rotate(0); }
.mini-fan .card-interactive:nth-child(4) { transform: translateX(-50%) rotate(11deg); }
.mini-fan .card-interactive:nth-child(5) { transform: translateX(-50%) rotate(22deg); }
.mini-fan .card-interactive > img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* Feature composition: one clear center of gravity. */
.feature-visual .card-interactive {
  position:absolute;
  width:230px;
  height:322px;
  border-radius:15px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.feature-visual .card-interactive:nth-child(1) { transform:translate(-70px,12px) rotate(-9deg); }
.feature-visual .card-interactive:nth-child(2) { transform:translate(70px,-12px) rotate(8deg); }
.feature-visual .card-interactive:nth-child(3) { transform:translate(0,52px) rotate(1deg) scale(.9); z-index:2; }
.feature-visual .card-interactive.feature-main-card { z-index:4; transform:translate(-2px,-6px) rotate(-1deg) scale(1.05); }
.feature-visual .card-interactive > img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* Owned/missing deck: physical overlap, with the state carried by the row. */
.deck-row .card-interactive {
  width:105px;
  height:147px;
  margin-left:-22px;
  border-radius:9px;
  box-shadow:0 14px 28px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.1);
}
.deck-row .card-interactive:first-child { margin-left:0; }
.deck-row .card-interactive > img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.deck-row.missing .card-interactive { filter:grayscale(.75); }

/* Final CTA cards keep their original atmospheric composition. */
.cta-cards .card-interactive { position:absolute; width:190px; opacity:.23; filter:saturate(.8); }
.cta-cards .card-interactive:nth-child(1) { left:10%; top:25%; transform:rotate(-18deg); }
.cta-cards .card-interactive:nth-child(2) { right:10%; top:15%; transform:rotate(15deg); }
.cta-cards .card-interactive:nth-child(3) { left:44%; bottom:-38%; transform:rotate(4deg); opacity:.12; }
.cta-cards .card-interactive > img { width:100%; border-radius:inherit; }

/* Related cards are links, so the entire tile becomes the tactile object. */
.related-strip > .card-interactive {
  display:block;
  border-radius:10px;
  padding:0;
  overflow:hidden;
}
.related-strip > .card-interactive img { width:100%; aspect-ratio:5/7; object-fit:cover; border-radius:inherit; }
.related-strip > .card-interactive span { display:block; padding-top:8px; }

/* Directory tiles: card art gets the same physical treatment as the hero. */
.card-image-wrap.card-interactive { overflow:hidden; }
.card-image-wrap.card-interactive img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* SEO card hero: give the card room to breathe and a subtle atmospheric edge. */
.card-hero-image.card-interactive { box-shadow:0 40px 100px rgba(0,0,0,.62); }
.card-hero-image.card-interactive::after {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.42), transparent 18%),
    linear-gradient(115deg, transparent 24%, rgba(66,232,255,.08) 42%, rgba(255,255,255,.15) 49%, rgba(182,108,255,.18) 57%, transparent 74%);
}

/* Subtle hero emphasis: the commander is the first object the eye reads. */
.hero-commander.card-interactive {
  box-shadow:0 45px 110px rgba(0,0,0,.68), 0 0 70px rgba(117,103,255,.20);
}

@media (max-width: 900px) {
  .mini-fan .card-interactive { width:145px; height:203px; }
  .feature-visual .card-interactive { width:180px; height:252px; }
  .deck-row .card-interactive { width:88px; height:123px; margin-left:-18px; }
  .cta-cards .card-interactive { width:150px; }
}
@media (max-width: 600px) {
  .mini-fan .card-interactive { width:145px; height:203px; }
  .feature-visual .card-interactive { width:180px; height:252px; }
  .feature-visual .card-interactive:nth-child(1) { transform:translate(-54px,12px) rotate(-8deg); }
  .feature-visual .card-interactive:nth-child(2) { transform:translate(54px,-8px) rotate(7deg); }
  .feature-visual .card-interactive:nth-child(3) { transform:translate(0,44px) rotate(1deg) scale(.88); }
  .feature-visual .card-interactive.feature-main-card { transform:translate(0,-2px) rotate(-1deg) scale(1); }
  .card-page-grid .card-hero-image { max-width:320px; }
  .related-strip > .card-interactive { min-width:0; }
}
@media (prefers-reduced-motion: reduce) {
  .card-interactive { transition:none !important; }
  .card-interactive::after { opacity:0 !important; }
}

/* Card directory controls */
.directory-controls { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 34px; flex-wrap:wrap; }
.directory-controls input { width:min(360px,100%); padding:13px 16px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); font:500 14px var(--font-body); outline:none; }
.directory-controls input::placeholder { color:var(--ink-faint); }
.directory-controls input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(66,232,255,.08); }
.directory-filters { display:flex; gap:7px; flex-wrap:wrap; }
.directory-filter { border:1px solid var(--border); background:transparent; color:var(--ink-muted); border-radius:999px; padding:9px 12px; font:700 9px var(--font-data); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.directory-filter:hover, .directory-filter.active { color:var(--ink); border-color:rgba(66,232,255,.38); background:rgba(66,232,255,.06); }
.card-tile[hidden] { display:none; }
@media(max-width:600px){ .directory-controls { align-items:stretch; flex-direction:column; } .directory-controls input { width:100%; } }

/* ---------- PHASE D.3 FOUNDATION FIXES ---------- */
.wrap { width: min(100%, var(--container)); }
html, body { max-width: 100%; overflow-x: clip; }
img { height: auto; }

/* Cards must never leave an empty image-shaped hole. */
.card-fallback {
  position:absolute; inset:0; display:grid; place-items:end start; padding:18px;
  border-radius:inherit; overflow:hidden;
  background:
    radial-gradient(circle at 72% 24%, rgba(66,232,255,.28), transparent 32%),
    linear-gradient(145deg, #1b2044 0%, #0c0e1c 48%, #070812 100%);
  color:var(--ink); z-index:0;
}
.card-fallback::before {
  content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.14);
  border-radius:12px; box-shadow:inset 0 0 40px rgba(66,232,255,.08);
}
.card-fallback-copy { position:relative; z-index:1; max-width:82%; }
.card-fallback-name { display:block; font:400 22px/1 var(--font-display); text-transform:uppercase; }
.card-fallback-type { display:block; margin-top:7px; color:var(--ink-muted); font:700 9px/1.3 var(--font-data); letter-spacing:.08em; text-transform:uppercase; }

/* Hero is intentionally card-led, with a spectral analysis environment. */
.hero-bg-cards .bg-card { overflow:hidden; background:var(--surface); }
.hero-bg-cards .bg-card img { width:100%; height:100%; object-fit:cover; }
.hero-scene::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(90deg, transparent 0 58%, rgba(66,232,255,.045) 58.1% 58.2%, transparent 58.3%),
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(117,103,255,.025) 45px 46px);
  mask-image:linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}
.xray-orbit { position:absolute; border:1px solid rgba(66,232,255,.18); border-radius:50%; pointer-events:none; }
.xray-orbit-a { width:390px; height:250px; transform:rotate(-16deg); }
.xray-orbit-b { width:330px; height:190px; transform:rotate(18deg); border-color:rgba(182,108,255,.14); }
.xray-stage { position:relative; }
.xray-hint { position:relative; z-index:2; }
.scan-label { text-transform:uppercase; }

/* Quieter display hierarchy: reserve Anton's biggest scale for the hero/key statements. */
.problem h2, .section-heading h2, .features h2 { letter-spacing:.005em; }
.problem-sub, .card-lead, .card-page-section>p { line-height:1.7; }

/* Product proof is explicitly an application entry point, not a fake screenshot. */
.live-product-proof { transform:perspective(1200px) rotateY(-2deg); }
.live-product-window { position:relative; min-height:420px; display:grid; grid-template-columns:112px 1fr; background:
  radial-gradient(circle at 78% 22%, rgba(66,232,255,.13), transparent 28%),
  linear-gradient(145deg,#12162b,#080914 72%); }
.live-product-rail { border-right:1px solid var(--border); padding:22px 14px; display:flex; flex-direction:column; gap:16px; color:var(--ink-faint); font:700 9px/1.2 var(--font-data); }
.live-product-rail b { color:var(--ink); }
.live-product-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px var(--accent); }
.live-product-main { padding:52px 38px 30px; max-width:620px; }
.live-product-kicker { color:var(--accent); font:700 9px var(--font-data); letter-spacing:.1em; }
.live-product-main h3 { margin:14px 0; font:400 clamp(30px,3.5vw,48px)/.98 var(--font-display); text-transform:uppercase; }
.live-product-main p { color:var(--ink-muted); max-width:480px; }
.live-product-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.live-product-cards { position:absolute; right:24px; bottom:18px; display:flex; align-items:flex-end; }
.live-product-cards .card-interactive { width:105px; margin-left:-30px; }
.live-product-cards .card-interactive:first-child { transform:rotate(-8deg); }
.live-product-cards .card-interactive:last-child { transform:rotate(7deg); }
.product-demo h2 { max-width:560px; }

/* Single-card pages: one consistent container, generous but bounded. */
.card-page > .wrap { max-width:1320px; }
.card-page-section { max-width:1320px; margin:0 auto; padding-left:24px; padding-right:24px; }
.card-page-grid { min-width:0; }
.card-page-grid > * { min-width:0; }
.card-hero-image { width:100%; max-width:380px; margin:0 auto; }
.card-hero-image img { width:100%; aspect-ratio:5/7; object-fit:cover; }
.related-strip { min-width:0; }
.related-strip > * { min-width:0; }

/* Mobile: keep the story and CTA inside the first viewport as much as practical. */
@media (max-width: 900px) {
  .hero-scene { padding:42px 0 54px; }
  .hero-inner { gap:28px; }
  .xray-stage { order:-1; }
  .collection-stack { width:min(82vw,330px); height:auto; aspect-ratio:330/430; }
  .stack-card { width:71%; height:auto; aspect-ratio:5/7; }
  .reveal-chip { right:-2px; bottom:8px; max-width:210px; }
  .hero-copy { text-align:left; }
  .hero-sub { max-width:520px; }
}
@media (max-width:600px) {
  .wrap { padding-left:18px; padding-right:18px; }
  .nav-inner { padding-left:18px; padding-right:18px; }
  .logo-img { height:30px; }
  .hero-scene { padding:26px 0 42px; }
  .hero-inner { gap:20px; }
  .collection-stack { width:min(88vw,300px); }
  .stack-card { width:74%; }
  .hero-headline { font-size:clamp(34px,11vw,46px); line-height:1.02; }
  .hero-headline-sub { font-size:20px; margin-bottom:14px; }
  .hero-sub { font-size:16px; line-height:1.5; margin-bottom:20px; }
  .hero-ctas { margin-bottom:0; }
  .hero-ctas .btn-lg { padding:13px 20px; }
  .hero-note { font-size:11px; line-height:1.45; margin-top:10px; }
  .xray-hint { font-size:10px; }
  .problem,.possibility,.product-demo,.features,.owned-section,.why,.how-it-works,.cards-directory,.faq,.final-cta { padding:64px 0; }
  .problem h2,.section-heading h2,.features h2 { font-size:clamp(32px,9vw,44px); }
  .product-demo .demo-grid { gap:34px; }
  .live-product-window { min-height:500px; grid-template-columns:1fr; }
  .live-product-rail { flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--border); padding:12px 14px; }
  .live-product-main { padding:32px 22px 180px; }
  .live-product-cards { right:20px; bottom:16px; }
  .live-product-cards .card-interactive { width:92px; }
  .card-page { padding-top:52px; }
  .card-page > .wrap { padding-left:18px; padding-right:18px; }
  .card-page-section { padding-left:18px; padding-right:18px; }
  .card-page-grid { gap:36px; }
  .card-hero-image { max-width:min(78vw,320px); }
  .card-page-section { grid-template-columns:1fr; gap:20px; padding-top:64px; padding-bottom:64px; }
  .related-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:360px) {
  .wrap { padding-left:16px; padding-right:16px; }
  .hero-headline { font-size:33px; }
  .collection-stack { width:280px; }
  .reveal-chip { font-size:8px; padding:10px 11px; }
  .live-product-main { padding-left:18px; padding-right:18px; }
}
@media (prefers-reduced-motion: reduce) {
  .xray-orbit, .live-product-cards { display:none; }
}

@media (max-width:600px) {
  .xray-stage { overflow: clip; width:100%; }
  .xray-orbit-a { width:300px; height:190px; }
  .xray-orbit-b { width:250px; height:150px; }
  .owned-deck { width:100%; min-width:0; padding:20px 12px; }
  .deck-row { min-height:126px; overflow:visible; }
  .deck-row .card-interactive { flex:0 1 auto; width:72px; min-width:0; margin-left:-14px; }
  .deck-row .card-interactive:first-child { margin-left:0; }
  .deck-row .card-interactive img { width:100%; height:auto; aspect-ratio:5/7; object-fit:cover; }
  .legend { justify-content:center; gap:14px; }
}
@media (max-width:360px) {
  .deck-row .card-interactive { width:62px; margin-left:-12px; }
}

@media (max-width:900px) {
  .feature-story, .feature-visual, .feature-list { min-width:0; width:100%; }
}
@media (max-width:600px) {
  .hero-copy { order:1; }
  .xray-stage { order:2; }
  .collection-stack { width:min(72vw,245px); }
  .xray-hint { margin-top:6px; }
}
@media (max-width:360px) {
  .collection-stack { width:220px; }
}

@media (max-width:360px) {
  .xray-orbit-a { width:240px; height:150px; }
  .xray-orbit-b { width:210px; height:125px; }
}

.card-hero-image { aspect-ratio:5/7; overflow:hidden; }
.card-hero-image.card-image-failed { min-height:0; }
.card-hero-image .card-fallback { border-radius:20px; }

.collection-stack { overflow: clip; }

/* =========================================================
   PHASE D.4 — CARD-FIRST MARKETING SYSTEM
   ========================================================= */

.card-interactive {
  --rx:0deg; --ry:0deg; --lift:0px; --mx:50%; --my:50%; --shine:0;
  transform-style:preserve-3d;
  isolation:isolate;
  transition:transform .24s cubic-bezier(.18,.8,.22,1), box-shadow .24s ease, filter .24s ease;
}
.card-interactive::after {
  content:""; position:absolute; inset:-1px; z-index:4; pointer-events:none; border-radius:inherit;
  opacity:var(--shine);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.46), transparent 17%),
    linear-gradient(118deg, transparent 22%, rgba(66,232,255,.08) 41%, rgba(255,255,255,.16) 48%, rgba(182,108,255,.15) 55%, transparent 74%);
  mix-blend-mode:screen;
  transition:opacity .18s ease;
}
.card-interactive::before {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 30px rgba(66,232,255,.05);
}
.card-interactive > picture,
.card-interactive > img { position:relative; z-index:1; display:block; }
.card-interactive > picture { width:100%; height:100%; }
.card-interactive > picture img { width:100%; height:100%; object-fit:cover; display:block; }
.card-interactive.is-hovered,
.card-interactive.is-focused,
.card-interactive.is-selected { filter:saturate(1.04) contrast(1.02); }
.card-interactive.is-focused { outline:2px solid rgba(66,232,255,.72); outline-offset:5px; }
.card-interactive:focus-visible { outline:2px solid rgba(66,232,255,.72); outline-offset:5px; }

/* Real card silhouette: preserve the normal 5:7 physical proportions. */
.primary-card-shell,
.commander-card-hero {
  position:relative;
  width:min(100%, 410px);
  aspect-ratio:5/7;
  border-radius:18px;
  overflow:hidden;
  background:#0b0d16;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 90px rgba(0,0,0,.58);
}
.primary-card-shell img,
.commander-card-hero img { object-fit:cover; }
.primary-card-shell .card-specular {
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:
    linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.14) 47%, transparent 58%);
  opacity:.24; transform:translateX(-110%); transition:transform .65s ease;
  mix-blend-mode:screen;
}
.primary-card-shell:hover .card-specular,
.primary-card-shell.is-hovered .card-specular { transform:translateX(110%); }

.card-image-failed { min-height:0; }
.card-fallback {
  position:absolute; inset:0; z-index:2; display:grid; place-items:end start; padding:20px;
  border-radius:inherit; overflow:hidden;
  background:
    radial-gradient(circle at 72% 24%, rgba(66,232,255,.28), transparent 30%),
    linear-gradient(145deg,#1b2044,#0c0e1c 48%,#070812);
}
.card-fallback::before {
  content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.14);
  border-radius:12px; box-shadow:inset 0 0 40px rgba(66,232,255,.08);
}
.card-fallback-copy { position:relative; z-index:2; max-width:84%; }
.card-fallback-name { display:block; font:400 24px/1 var(--font-display); text-transform:uppercase; }
.card-fallback-type { display:block; margin-top:8px; color:var(--ink-muted); font:700 9px/1.4 var(--font-data); text-transform:uppercase; letter-spacing:.08em; }

/* ---------------- Single card pages ---------------- */
.card-first-page { padding:0; }
.card-hero {
  position:relative; padding:82px 0 96px; overflow:clip;
  background:
    radial-gradient(circle at 16% 28%, rgba(66,232,255,.09), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(182,108,255,.09), transparent 26%),
    linear-gradient(180deg,#0b0d16 0%,#080a11 100%);
}
.card-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 54px,rgba(117,103,255,.025) 55px 56px);
  mask-image:linear-gradient(to bottom,transparent,black 20%,black 78%,transparent);
}
.card-hero-grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(300px,430px) minmax(0,1fr);
  gap:clamp(50px,8vw,120px); align-items:center;
}
.card-hero-art { display:flex; flex-direction:column; align-items:center; }
.card-hero-art .primary-card-shell { transform:rotate(-1deg); }
.card-hero-caption { width:min(100%,410px); display:flex; justify-content:space-between; gap:12px; margin-top:14px; color:var(--ink-faint); font:700 9px var(--font-data); letter-spacing:.08em; text-transform:uppercase; }
.card-hero-caption b { color:var(--ink-muted); text-align:right; }
.card-hero-copy h1 { max-width:780px; margin:10px 0 18px; font:400 clamp(52px,7vw,100px)/.9 var(--font-display); text-transform:uppercase; letter-spacing:-.012em; }
.card-context { max-width:690px; color:var(--ink-muted); font-size:clamp(18px,2vw,23px); line-height:1.5; }
.card-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:30px 0 24px; max-width:720px; }
.card-facts div { padding:15px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.025); }
.card-facts span { display:block; color:var(--ink-faint); font:700 8px var(--font-data); letter-spacing:.08em; }
.card-facts b { display:block; margin-top:5px; font-size:13px; }
.card-hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.card-ip-note { max-width:650px; margin-top:22px; color:var(--ink-faint); font:500 10px/1.55 var(--font-data); }

.section-heading-inline { display:flex; align-items:end; justify-content:space-between; gap:36px; margin-bottom:34px; }
.section-heading-inline h2 { max-width:700px; margin:6px 0 0; font:400 clamp(34px,4.2vw,58px)/.98 var(--font-display); text-transform:uppercase; }
.section-heading-inline > p { max-width:390px; color:var(--ink-muted); line-height:1.6; }
.text-link { color:var(--accent); font:700 10px var(--font-data); text-transform:uppercase; white-space:nowrap; }

.printings-section { padding:78px 0 86px; border-top:1px solid var(--border); background:var(--bg-raise); }
.printing-stage { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:28px; align-items:center; }
.printing-selector { display:flex; gap:10px; overflow-x:auto; padding:5px 2px 12px; scrollbar-width:thin; }
.printing-option {
  min-width:190px; display:flex; align-items:center; gap:12px; padding:9px;
  color:var(--ink); background:rgba(255,255,255,.025); border:1px solid var(--border);
  border-radius:13px; text-align:left; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.printing-option:hover { transform:translateY(-2px); border-color:var(--border-strong); }
.printing-option.is-active { border-color:rgba(66,232,255,.55); background:rgba(66,232,255,.06); box-shadow:0 10px 30px rgba(0,0,0,.18); }
.printing-thumb { width:42px; aspect-ratio:5/7; flex:none; overflow:hidden; border-radius:6px; background:#0c0e16; }
.printing-thumb picture, .printing-thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.printing-copy { min-width:0; display:grid; gap:5px; }
.printing-copy b { font-size:11px; line-height:1.2; }
.printing-copy small { color:var(--ink-faint); font:700 8px var(--font-data); letter-spacing:.06em; text-transform:uppercase; }
.printing-reading { padding:22px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.02); display:grid; gap:7px; }
.printing-reading-kicker { color:var(--accent); font:700 8px var(--font-data); letter-spacing:.09em; }
.printing-reading strong { font:400 24px/1 var(--font-display); text-transform:uppercase; }
.printing-reading span:last-child { color:var(--ink-faint); font:700 9px var(--font-data); }
.is-printing-changing { opacity:.58; transform:scale(.985) rotate(-1deg)!important; }

.card-context-section { padding:100px 0; border-top:1px solid var(--border); }
.context-intro { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.context-intro h2 { margin:8px 0 15px; font:400 clamp(40px,5vw,68px)/.95 var(--font-display); text-transform:uppercase; }
.context-intro p:not(.eyebrow) { color:var(--ink-muted); max-width:640px; line-height:1.75; font-size:17px; }
.xray-mini-flow {
  display:grid; grid-template-columns:1fr 80px 1fr 80px 1fr; align-items:center; margin-top:60px;
  padding:22px; border:1px solid var(--border); border-radius:20px; background:
    radial-gradient(circle at 50% 50%,rgba(66,232,255,.06),transparent 45%),var(--surface);
}
.xray-mini-flow div { padding:16px; }
.xray-mini-flow span { display:block; color:var(--accent); font:700 9px var(--font-data); }
.xray-mini-flow b { display:block; margin-top:8px; font:400 26px var(--font-display); text-transform:uppercase; }
.xray-mini-flow small { display:block; color:var(--ink-faint); margin-top:5px; }
.xray-mini-flow i { height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); position:relative; }
.xray-mini-flow i::after { content:"→"; position:absolute; right:-2px; top:-10px; color:var(--accent); }

.related-commanders-section,.related-cards-section { padding:92px 0; border-top:1px solid var(--border); }
.commander-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.commander-card { display:grid; grid-template-columns:100px 1fr; gap:15px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:16px; color:var(--ink); text-decoration:none; background:var(--surface); }
.commander-card picture { width:100px; aspect-ratio:5/7; border-radius:9px; overflow:hidden; }
.commander-card img { width:100%; height:100%; object-fit:cover; display:block; }
.commander-card strong { display:block; font-size:15px; line-height:1.1; }
.commander-card span { display:block; margin-top:8px; color:var(--accent); font:700 8px var(--font-data); letter-spacing:.08em; }
.related-cards-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.related-card { color:var(--ink); text-decoration:none; }
.related-card picture { display:block; width:100%; aspect-ratio:5/7; border-radius:12px; overflow:hidden; background:var(--surface); }
.related-card img { width:100%; height:100%; object-fit:cover; display:block; }
.related-card-name { display:block; margin-top:10px; font-size:13px; }
.related-card-meta { display:block; margin-top:4px; color:var(--ink-faint); font:700 8px var(--font-data); text-transform:uppercase; }

.card-final-cta { padding:120px 0 140px; position:relative; overflow:hidden; background:
  radial-gradient(circle at 50% 10%,rgba(66,232,255,.10),transparent 30%),#080a11; }
.card-final-cta::before { content:""; position:absolute; width:540px; height:260px; left:50%; top:30%; transform:translateX(-50%); border:1px solid rgba(66,232,255,.11); border-radius:50%; box-shadow:0 0 100px rgba(66,232,255,.06); }
.card-final-cta .wrap { position:relative; z-index:1; text-align:center; }
.card-final-cta h2 { margin:8px auto 15px; font:400 clamp(46px,7vw,90px)/.9 var(--font-display); text-transform:uppercase; }
.card-final-cta p:not(.eyebrow) { color:var(--ink-muted); max-width:560px; margin:0 auto 25px; font-size:17px; }

/* ---------------- Collection directory ---------------- */
.collection-directory .directory-hero { padding:92px 0 70px; }
.directory-hero h1 { max-width:900px; margin:8px 0 14px; font:400 clamp(56px,8vw,108px)/.88 var(--font-display); text-transform:uppercase; }
.collection-stats { display:flex; flex-wrap:wrap; gap:26px; margin-top:30px; color:var(--ink-faint); font:700 9px var(--font-data); letter-spacing:.08em; }
.collection-stats b { color:var(--ink); font-size:20px; margin-right:6px; }
.collection-wall { padding:0 0 100px; }
.directory-controls { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:18px 0 24px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.directory-search label { display:block; margin-bottom:8px; color:var(--ink-faint); font:700 8px var(--font-data); letter-spacing:.08em; }
.directory-search input { width:min(330px,100%); padding:13px 16px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--ink); outline:none; }
.directory-search input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(66,232,255,.08); }
.directory-filters { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.directory-filter { padding:9px 12px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--ink-faint); cursor:pointer; font:700 8px var(--font-data); text-transform:uppercase; letter-spacing:.06em; }
.directory-filter.active,.directory-filter:hover { color:var(--ink); border-color:rgba(66,232,255,.48); background:rgba(66,232,255,.06); }
.collection-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px 18px; padding-top:30px; }
.collection-card { min-width:0; color:var(--ink); text-decoration:none; }
.collection-card-art { aspect-ratio:5/7; overflow:hidden; border-radius:12px; background:var(--surface); border:1px solid var(--border); box-shadow:0 18px 45px rgba(0,0,0,.24); }
.collection-card-art picture { width:100%; height:100%; display:block; }
.collection-card-art img { width:100%; height:100%; object-fit:cover; display:block; }
.collection-card-meta { display:flex; justify-content:space-between; gap:8px; padding:10px 2px 0; }
.collection-card-meta strong { display:block; font-size:12px; line-height:1.15; }
.collection-card-meta span { display:block; color:var(--ink-faint); margin-top:4px; font:700 8px var(--font-data); text-transform:uppercase; }
.collection-card-meta>b { color:var(--accent); font:700 8px var(--font-data); }
.directory-cta { padding:100px 0 130px; border-top:1px solid var(--border); }
.directory-cta h2 { max-width:900px; margin:8px 0 24px; font:400 clamp(44px,6vw,78px)/.92 var(--font-display); text-transform:uppercase; }

/* ---------------- Commander destination ---------------- */
.commander-hero { padding:82px 0 96px; background:
  radial-gradient(circle at 15% 28%,rgba(66,232,255,.09),transparent 30%),
  radial-gradient(circle at 86% 18%,rgba(182,108,255,.10),transparent 30%); }
.commander-hero-grid { display:grid; grid-template-columns:minmax(280px,430px) minmax(0,1fr); gap:clamp(50px,8vw,120px); align-items:center; }
.commander-hero-grid h1 { margin:8px 0 18px; font:400 clamp(54px,7vw,96px)/.9 var(--font-display); text-transform:uppercase; }
.commander-points { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0; }
.commander-points span { padding:8px 10px; border:1px solid var(--border); border-radius:999px; color:var(--ink-muted); font:700 8px var(--font-data); }
.commander-build-section { padding:92px 0; border-top:1px solid var(--border); }
.commander-build-flow { display:grid; grid-template-columns:1fr 90px 1fr 90px 1fr; align-items:center; margin-top:44px; }
.commander-build-flow>div { min-height:130px; display:flex; flex-direction:column; justify-content:center; padding:22px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.commander-build-flow span { color:var(--accent); font:700 8px var(--font-data); }
.commander-build-flow b { margin-top:8px; font:400 28px var(--font-display); text-transform:uppercase; }
.commander-build-flow>i { height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.build-xray { background:radial-gradient(circle at 50% 50%,rgba(66,232,255,.14),transparent 60%),var(--surface)!important; }

/* Preserve readable layouts at all required widths. */
@media (max-width:1050px) {
  .collection-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .card-hero-grid,.commander-hero-grid { grid-template-columns:300px minmax(0,1fr); gap:50px; }
  .card-hero-copy h1,.commander-hero-grid h1 { font-size:clamp(52px,7vw,82px); }
}
@media (max-width:900px) {
  .card-hero { padding:54px 0 68px; }
  .card-hero-grid,.commander-hero-grid { grid-template-columns:1fr; }
  .card-hero-art { order:-1; }
  .primary-card-shell,.commander-card-hero { width:min(78vw,350px); }
  .card-hero-copy h1,.commander-hero-grid h1 { font-size:clamp(48px,11vw,76px); }
  .card-facts { max-width:none; }
  .section-heading-inline { align-items:start; flex-direction:column; gap:12px; }
  .context-intro { grid-template-columns:1fr; gap:20px; }
  .commander-strip { grid-template-columns:1fr; }
  .related-cards-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .printing-stage { grid-template-columns:1fr; }
  .printing-reading { display:none; }
  .collection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .directory-controls { align-items:start; flex-direction:column; }
  .directory-filters { justify-content:flex-start; }
  .commander-build-flow { grid-template-columns:1fr; gap:10px; }
  .commander-build-flow>i { width:1px; height:32px; margin:auto; }
}
@media (max-width:600px) {
  .wrap { padding-left:18px; padding-right:18px; }
  .card-hero,.commander-hero { padding:36px 0 56px; }
  .primary-card-shell,.commander-card-hero { width:min(78vw,320px); }
  .card-hero-grid,.commander-hero-grid { gap:30px; }
  .card-hero-copy h1,.commander-hero-grid h1 { font-size:clamp(42px,12vw,62px); }
  .card-context { font-size:17px; }
  .card-facts { grid-template-columns:1fr; }
  .card-hero-actions { width:100%; }
  .card-hero-actions .btn { flex:1; min-width:0; text-align:center; }
  .card-context-section,.related-commanders-section,.related-cards-section,.commander-build-section { padding:68px 0; }
  .context-intro h2,.section-heading-inline h2 { font-size:clamp(34px,10vw,48px); }
  .xray-mini-flow { grid-template-columns:1fr; gap:4px; margin-top:35px; }
  .xray-mini-flow i { width:1px; height:26px; margin:auto; }
  .xray-mini-flow i::after { content:"↓"; top:7px; right:-5px; }
  .related-cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
  .printing-selector { padding-right:4px; }
  .printing-option { min-width:178px; }
  .collection-directory .directory-hero { padding:58px 0 45px; }
  .directory-hero h1 { font-size:clamp(48px,14vw,64px); }
  .collection-stats { gap:14px; }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
  .collection-card-meta { display:block; }
  .collection-card-meta>b { display:block; margin-top:7px; }
  .directory-cta { padding:70px 0 90px; }
  .directory-cta h2 { font-size:clamp(40px,11vw,56px); }
  .card-final-cta { padding:88px 0 105px; }
  .card-final-cta h2 { font-size:clamp(42px,12vw,62px); }
}
@media (max-width:360px) {
  .wrap { padding-left:16px; padding-right:16px; }
  .primary-card-shell,.commander-card-hero { width:min(78vw,285px); }
  .collection-grid { gap:18px 10px; }
  .collection-card-meta strong { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .card-interactive,.printing-option,.primary-card-shell .card-specular { transition:none!important; }
  .primary-card-shell .card-specular { display:none; }
}

@media (max-width:900px) {
  .hero-copy { order:1; }
  .xray-stage { order:2; height:420px; min-height:0; }
  .hero-scene .hero-inner { gap:30px; }
  .collection-stack { width:min(72vw,300px); height:390px; }
}
@media (max-width:600px) {
  .xray-stage { height:340px; }
  .collection-stack { width:min(72vw,245px); height:320px; }
}
@media (max-width:360px) {
  .xray-stage { height:305px; }
  .collection-stack { width:220px; height:290px; }
}

/* ---------------- Collection → possibility story ---------------- */
.collection-possibility { padding:92px 0 108px; border-top:1px solid var(--border); }
.collection-possibility .section-heading { max-width:760px; margin-bottom:45px; }
.collection-possibility .section-heading h2 { margin:6px 0 10px; font:400 clamp(44px,6vw,78px)/.92 var(--font-display); text-transform:uppercase; }
.section-lead { color:var(--ink-muted); max-width:680px; line-height:1.65; }
.possibility-track {
  display:grid; grid-template-columns:1.2fr 70px 1fr 70px 1fr 70px 1fr;
  gap:12px; align-items:stretch;
}
.possibility-step {
  min-width:0; min-height:340px; padding:18px; border:1px solid var(--border); border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  display:flex; flex-direction:column;
}
.possibility-index { color:var(--accent); font:700 9px var(--font-data); }
.possibility-step .flow-label { margin-top:6px; color:var(--ink-faint); font:700 8px var(--font-data); letter-spacing:.08em; }
.possibility-step>b { margin-top:auto; font:400 25px/1 var(--font-display); text-transform:uppercase; }
.possibility-step>small { color:var(--ink-faint); line-height:1.45; margin-top:7px; }
.possibility-pile { position:relative; height:190px; margin:14px 0; }
.possibility-pile .card-interactive {
  position:absolute; width:105px; height:147px; top:24px; left:50%; border-radius:9px; box-shadow:0 16px 30px rgba(0,0,0,.4);
}
.possibility-pile .card-interactive:nth-child(1) { transform:translateX(-90%) rotate(-13deg); }
.possibility-pile .card-interactive:nth-child(2) { transform:translateX(-63%) rotate(-5deg); }
.possibility-pile .card-interactive:nth-child(3) { transform:translateX(-35%) rotate(5deg); }
.possibility-pile .card-interactive:nth-child(4) { transform:translateX(-6%) rotate(13deg); }
.possibility-xray { background:
  radial-gradient(circle at 50% 52%,rgba(66,232,255,.14),transparent 46%),
  linear-gradient(145deg,rgba(66,232,255,.05),rgba(182,108,255,.04)); }
.possibility-scan { position:relative; height:190px; margin:14px 0; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(66,232,255,.12); border-radius:13px; background:repeating-linear-gradient(0deg,transparent 0 18px,rgba(66,232,255,.035) 19px 20px); }
.possibility-scan::before { content:""; position:absolute; width:150%; height:2px; top:45%; background:linear-gradient(90deg,transparent,rgba(66,232,255,.75),transparent); box-shadow:0 0 25px rgba(66,232,255,.35); animation:possibility-scan 3.2s ease-in-out infinite; }
.possibility-scan div { width:110px; height:150px; border:1px solid rgba(66,232,255,.32); border-radius:9px; box-shadow:0 0 45px rgba(66,232,255,.10), inset 0 0 35px rgba(66,232,255,.06); }
.possibility-scan span { position:absolute; bottom:10px; color:var(--accent); font:700 8px var(--font-data); letter-spacing:.08em; }
@keyframes possibility-scan { 0%,100%{transform:translateY(-60px);opacity:.25} 50%{transform:translateY(60px);opacity:1} }
.possibility-commander { position:relative; height:190px; margin:14px 0; overflow:hidden; border-radius:13px; box-shadow:0 16px 35px rgba(0,0,0,.42); }
.possibility-commander img { width:100%; height:100%; object-fit:cover; display:block; }
.possibility-commander span { position:absolute; left:10px; bottom:10px; padding:7px 9px; border-radius:999px; background:rgba(7,8,16,.76); color:var(--accent); font:700 7px var(--font-data); }
.possibility-deck-stack { position:relative; height:190px; margin:14px 0; }
.possibility-deck-stack span { position:absolute; width:92px; height:128px; left:50%; top:30px; border-radius:8px; border:1px solid rgba(255,255,255,.13); background:
  linear-gradient(145deg,#151a35,#090b14); box-shadow:0 16px 30px rgba(0,0,0,.38); transform-origin:bottom center; }
.possibility-deck-stack span::after { content:""; position:absolute; inset:8px; border:1px solid rgba(66,232,255,.10); border-radius:5px; }
.possibility-deck-stack span:nth-child(1){transform:translateX(-55%) rotate(-12deg)}
.possibility-deck-stack span:nth-child(2){transform:translateX(-50%) rotate(-6deg)}
.possibility-deck-stack span:nth-child(3){transform:translateX(-50%) rotate(0)}
.possibility-deck-stack span:nth-child(4){transform:translateX(-45%) rotate(6deg)}
.possibility-deck-stack span:nth-child(5){transform:translateX(-40%) rotate(12deg)}
.possibility-arrow { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--accent); font:700 8px var(--font-data); letter-spacing:.08em; }
.possibility-arrow i { width:100%; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); position:relative; }
.possibility-arrow i::after { content:"→"; position:absolute; right:0; top:-8px; }
@media(max-width:1100px){
  .possibility-track { grid-template-columns:1fr 55px 1fr; }
  .possibility-track .possibility-arrow:nth-of-type(2) { grid-column:2; }
  .possibility-track .possibility-arrow:nth-of-type(3) { grid-column:2; }
  .possibility-track .possibility-step:nth-of-type(3) { grid-column:3; }
  .possibility-track .possibility-step:nth-of-type(4) { grid-column:1; }
}
@media(max-width:900px){
  .possibility-track { display:grid; grid-template-columns:1fr; gap:12px; }
  .possibility-track .possibility-step,.possibility-track .possibility-arrow { grid-column:auto!important; }
  .possibility-arrow { min-height:42px; flex-direction:row; }
  .possibility-arrow i { width:60px; }
  .possibility-arrow i::after { content:"↓"; right:-2px; top:-8px; }
}
@media(max-width:600px){
  .collection-possibility { padding:68px 0 78px; }
  .possibility-step { min-height:300px; }
  .possibility-pile,.possibility-scan,.possibility-commander,.possibility-deck-stack { height:165px; }
}
@media(prefers-reduced-motion:reduce){
  .possibility-scan::before { animation:none; }
}

@media(max-width:1100px) and (min-width:901px){
  .possibility-track { grid-template-columns:1fr 1fr; }
  .possibility-track .possibility-arrow { grid-column:1/-1; flex-direction:row; min-height:42px; }
  .possibility-track .possibility-arrow i { width:90px; }
  .possibility-track .possibility-arrow i::after { content:"→"; right:0; top:-8px; }
}

@media(max-width:600px){
  .collection-directory .directory-hero { padding:38px 0 28px; }
  .collection-directory .directory-hero h1 { font-size:clamp(42px,12vw,56px); }
  .collection-directory .directory-intro { font-size:15px; line-height:1.5; margin:10px 0 20px; }
  .collection-directory .collection-stats { margin-top:18px; gap:10px 16px; }
  .collection-directory .collection-stats b { font-size:17px; }
  .collection-directory .collection-wall { padding-bottom:70px; }
  .collection-directory .directory-controls { padding:14px 0 18px; }
}

@media(max-width:600px){
  .collection-directory { padding-top:0; }
  .collection-directory .directory-controls { margin-top:0; }
  .collection-directory .directory-search input { width:100%; }
}

@media(max-width:600px){
  .card-first-page .card-hero,
  .commander-page .commander-hero { padding-top:26px; padding-bottom:38px; }
  .card-first-page .primary-card-shell,
  .commander-page .commander-card-hero { width:min(70vw,285px); }
  .card-first-page .card-hero-grid,
  .commander-page .commander-hero-grid { gap:22px; }
  .card-first-page .card-hero-copy h1,
  .commander-page .commander-hero-grid h1 { font-size:clamp(40px,10.5vw,54px); }
  .card-first-page .card-context { font-size:16px; line-height:1.4; }
  .card-first-page .card-facts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:18px 0 14px; }
  .card-first-page .card-facts div { padding:10px 8px; }
  .card-first-page .card-facts span { font-size:7px; }
  .card-first-page .card-facts b { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .card-first-page .card-ip-note { display:none; }
  .commander-page .commander-points { margin:16px 0; }
}
@media(max-width:360px){
  .card-first-page .primary-card-shell,
  .commander-page .commander-card-hero { width:68vw; }
}


/* =========================================================
   PHASE D.5 — FINAL MARKETING POLISH
   Polish, not redesign: tighten hierarchy, improve card drama,
   make the X-ray journey feel continuous, and remove SaaS chrome.
   ========================================================= */

:root { --container: 1200px; }
body { background:
  radial-gradient(circle at 50% -12%, rgba(117,103,255,.055), transparent 34%),
  var(--bg); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 70%); }

.nav { background:rgba(7,8,18,.76); border-bottom-color:rgba(117,103,255,.20); }
.nav-inner { min-height:68px; padding-top:13px; padding-bottom:13px; }
.logo-img { height:31px; }
.footer-brand .logo-img { height:25px; }
.nav-links { gap:28px; }
.nav-links a,.nav-login { font-size:14px; }
.btn { min-height:44px; letter-spacing:.005em; }
.btn-primary { background:linear-gradient(135deg,var(--accent),#7567ff 82%); color:#07101a; box-shadow:0 10px 30px rgba(66,232,255,.17),0 5px 18px rgba(117,103,255,.16); }
.btn-primary:hover { box-shadow:0 14px 34px rgba(66,232,255,.22),0 8px 24px rgba(117,103,255,.2); }
.btn-ghost { background:rgba(255,255,255,.018); }

/* Hero: actual cards are the focal point, with dedicated mobile composition. */
.hero-scene { min-height:min(860px,92vh); padding:84px 0 92px; }
.hero-inner { grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr); gap:70px; }
.hero-headline { max-width:690px; font-size:clamp(56px,6.4vw,94px); line-height:.94; letter-spacing:-.012em; }
.hero-headline em { color:var(--accent); font-style:normal; }
.hero-headline-sub { font-size:21px; margin-top:12px; }
.hero-sub { max-width:530px; font-size:17px; line-height:1.65; }
.hero-note { max-width:520px; }
.hero-bg-cards .bg-card { opacity:.26; filter:saturate(.9); }
.xray-stage { min-height:530px; justify-content:center; }
.collection-stack { position:relative; width:min(100%,430px); height:500px; transform:translateZ(0); }
.stack-card { position:absolute; width:260px; aspect-ratio:5/7; border-radius:18px; overflow:hidden; box-shadow:0 34px 90px rgba(0,0,0,.52); border:1px solid rgba(255,255,255,.12); }
.stack-card img { width:100%; height:100%; object-fit:cover; }
.stack-back { left:18px; top:66px; transform:rotate(-13deg) scale(.9); opacity:.55; filter:saturate(.8) brightness(.78); }
.stack-mid { right:12px; top:40px; transform:rotate(11deg) scale(.94); opacity:.76; filter:saturate(.92) brightness(.88); }
.stack-front { left:50%; top:0; transform:translateX(-50%) rotate(-2deg); z-index:3; }
.stack-front::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 35% 20%,rgba(66,232,255,.16),transparent 28%),linear-gradient(110deg,transparent 35%,rgba(255,255,255,.13) 49%,transparent 61%); mix-blend-mode:screen; }
.scan-line { position:absolute; left:-15%; right:-15%; top:42%; height:2px; z-index:4; background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent); box-shadow:0 0 28px rgba(66,232,255,.55); animation:hero-scan 4.8s ease-in-out infinite; }
.scan-label { position:absolute; left:14px; bottom:14px; z-index:5; padding:8px 10px; background:rgba(4,8,18,.72); border:1px solid rgba(66,232,255,.28); color:var(--accent); border-radius:999px; font:700 8px var(--font-data); letter-spacing:.08em; }
@keyframes hero-scan { 0%,18%{transform:translateY(-180px);opacity:0} 28%{opacity:1} 66%{transform:translateY(180px);opacity:1} 74%,100%{opacity:0} }
.reveal-chip { position:absolute; right:-2px; bottom:34px; z-index:6; padding:10px 12px; border:1px solid rgba(105,240,174,.28); background:rgba(7,12,15,.78); color:var(--good); border-radius:999px; font:700 8px var(--font-data); letter-spacing:.07em; box-shadow:0 12px 30px rgba(0,0,0,.25); }
.reveal-chip span { margin-right:5px; }
.xray-orbit { position:absolute; border:1px solid rgba(66,232,255,.13); border-radius:50%; pointer-events:none; }
.xray-orbit-a { width:420px; height:170px; left:50%; top:18%; transform:translateX(-50%) rotate(-13deg); }
.xray-orbit-b { width:330px; height:500px; left:50%; top:0; transform:translateX(-50%) rotate(20deg); border-color:rgba(182,108,255,.11); }

/* Continuous process rail. */
.process-rail { display:grid; grid-template-columns:1fr 90px 1fr 90px 1fr 90px 1fr; align-items:center; margin:0 0 34px; }
.process-node { display:flex; align-items:center; gap:10px; color:var(--ink-faint); transition:color .35s ease,transform .35s ease; }
.process-node span { font:700 8px var(--font-data); color:var(--accent); }
.process-node b { font:700 9px var(--font-data); letter-spacing:.08em; }
.process-node.is-in-view { color:var(--ink); transform:translateY(-2px); }
.process-rail>i { height:1px; background:linear-gradient(90deg,rgba(66,232,255,.10),rgba(66,232,255,.55),rgba(182,108,255,.18)); }

/* Less card-shaped SaaS chrome; more editorial rhythm. */
.section-heading h2,.problem h2,.owned-grid h2,.features h2,.how-it-works h2 { letter-spacing:-.006em; }
.story-step,.feature-list article,.how-step,.price-card { border-radius:16px; background:linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.012)); }
.problem,.features,.owned-section,.how-it-works,.faq,.final-cta { position:relative; }
.problem::before,.features::before,.owned-section::before,.how-it-works::before,.faq::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(117,103,255,.28),transparent); }

/* Living states for the collection → possibility sequence. */
.possibility-step { transition:transform .45s ease,border-color .45s ease,box-shadow .45s ease; }
.possibility-step.is-in-view { transform:translateY(-4px); border-color:rgba(66,232,255,.24); box-shadow:0 20px 60px rgba(0,0,0,.22); }
.possibility-step.is-in-view .possibility-index { text-shadow:0 0 16px rgba(66,232,255,.38); }
.possibility-arrow i { transition:box-shadow .45s ease; }
.possibility-step.is-in-view + .possibility-arrow i { box-shadow:0 0 14px rgba(66,232,255,.25); }

/* Conversion bridge: one short question instead of another generic section. */
.conversion-bridge { padding:78px 0 72px; border-top:1px solid var(--border); }
.conversion-bridge .wrap { display:flex; align-items:end; justify-content:space-between; gap:30px; }
.conversion-bridge h2 { margin-top:6px; font:400 clamp(40px,5.3vw,68px)/.94 var(--font-display); text-transform:uppercase; }
.conversion-bridge .text-link { color:var(--accent); font:700 10px var(--font-data); text-transform:uppercase; white-space:nowrap; padding-bottom:8px; }

/* Standalone utility pages. */
.utility-page { min-height:calc(100vh - 68px); }
.utility-hero { padding:86px 0 56px; border-bottom:1px solid var(--border); }
.utility-hero h1 { margin-top:8px; font-size:clamp(56px,8vw,104px); text-transform:uppercase; }
.utility-hero p:not(.eyebrow) { max-width:620px; margin:14px 0 0; color:var(--ink-muted); font-size:18px; }
.utility-content { padding:20px 0 100px; }
.utility-content .faq-list { max-width:920px; }
.utility-content .faq-list details { border-bottom:1px solid var(--border); padding:22px 0; }
.utility-content .faq-list summary { cursor:pointer; list-style:none; padding-right:50px; position:relative; font-size:19px; font-weight:700; }
.utility-content .faq-list summary::-webkit-details-marker { display:none; }
.utility-content .faq-list summary::after { content:"+"; position:absolute; right:2px; top:-2px; color:var(--accent); font:500 28px/1 var(--font-body); }
.utility-content .faq-list details[open] summary::after { content:"−"; }
.utility-content .faq-list details p { max-width:700px; color:var(--ink-muted); line-height:1.7; margin:13px 0 0; }
.utility-cta { padding:92px 0 120px; border-top:1px solid var(--border); background:radial-gradient(circle at 50% 0,rgba(66,232,255,.08),transparent 35%); }
.utility-cta .wrap { text-align:center; }
.utility-cta h2 { margin:8px auto 22px; font:400 clamp(42px,6vw,74px)/.92 var(--font-display); text-transform:uppercase; }

.notfound-page { min-height:calc(100vh - 68px); display:grid; place-items:center; padding:80px 24px; }
.notfound-grid { width:min(1100px,100%); display:grid; grid-template-columns:1fr 360px; gap:90px; align-items:center; }
.notfound-grid h1 { max-width:620px; margin:8px 0 16px; font:400 clamp(54px,7vw,92px)/.9 var(--font-display); text-transform:uppercase; }
.notfound-grid p:not(.eyebrow) { max-width:540px; color:var(--ink-muted); font-size:18px; }
.notfound-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.notfound-card { position:relative; width:260px; aspect-ratio:5/7; justify-self:center; transform:rotate(-7deg); border-radius:18px; background:linear-gradient(145deg,#171a38,#090b14); border:1px solid rgba(255,255,255,.14); box-shadow:0 34px 80px rgba(0,0,0,.48); overflow:hidden; }
.notfound-card::before { content:"404"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(66,232,255,.14); font:400 100px/1 var(--font-display); }
.notfound-card span { position:absolute; left:18px; right:18px; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.5; }
.notfound-card span:nth-child(1){top:30%}.notfound-card span:nth-child(2){top:50%}.notfound-card span:nth-child(3){top:70%}

/* Directory: first impression is commander/deckbuilding, not utility inventory. */
.collection-directory .directory-hero { padding-bottom:52px; }
.directory-hero h1 { max-width:980px; }
.directory-intro { max-width:720px; color:var(--ink-muted); font-size:18px; line-height:1.65; }
.collection-grid { gap:28px 18px; }
.collection-card-art { border-radius:14px; box-shadow:0 22px 52px rgba(0,0,0,.30); }
.collection-card-meta strong { font-size:13px; }

/* Single card / commander: keep hierarchy, reduce aggression of display type. */
.card-hero-copy h1,.commander-hero-grid h1 { letter-spacing:-.006em; }
.card-context { max-width:650px; }
.card-final-cta h2 { letter-spacing:-.006em; }

@media (max-width:900px) {
  .hero-scene { min-height:auto; padding:54px 0 64px; }
  .hero-inner { grid-template-columns:1fr; gap:28px; }
  .hero-copy { order:1; }
  .xray-stage { order:2; min-height:370px; height:370px; }
  .collection-stack { width:min(76vw,310px); height:350px; }
  .stack-card { width:205px; border-radius:14px; }
  .stack-back { left:5%; top:46px; }
  .stack-mid { right:3%; top:30px; }
  .stack-front { top:0; }
  .reveal-chip { right:0; bottom:10px; font-size:7px; }
  .xray-orbit-a { width:330px; height:130px; top:15%; }
  .xray-orbit-b { width:270px; height:370px; }
  .process-rail { grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr; }
  .process-node { display:grid; gap:4px; }
  .process-node b { font-size:7px; }
  .conversion-bridge .wrap { align-items:start; flex-direction:column; }
  .notfound-grid { grid-template-columns:1fr; gap:48px; }
}
@media (max-width:600px) {
  .nav-inner { min-height:62px; }
  .logo-img { height:29px; }
  .hero-headline { font-size:clamp(46px,13vw,64px); line-height:.95; }
  .hero-headline-sub { font-size:18px; }
  .hero-sub { font-size:16px; line-height:1.55; }
  .hero-ctas { gap:8px; }
  .hero-ctas .btn { flex:1; min-width:0; }
  .xray-stage { height:330px; min-height:330px; }
  .collection-stack { width:min(76vw,250px); height:305px; }
  .stack-card { width:166px; border-radius:12px; }
  .stack-back { left:0; top:48px; }
  .stack-mid { right:0; top:34px; }
  .stack-front { top:0; }
  .reveal-chip { bottom:2px; right:50%; transform:translateX(50%); white-space:nowrap; }
  .xray-hint { margin-top:4px; text-align:center; font-size:10px; }
  .process-rail { grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:24px; }
  .process-rail>i { display:none; }
  .process-node { padding:8px 5px; border-left:1px solid var(--border); }
  .process-node:first-child { border-left:0; }
  .process-node span { font-size:7px; }
  .process-node b { font-size:7px; }
  .collection-possibility { padding-top:60px; }
  .conversion-bridge { padding:58px 0 52px; }
  .conversion-bridge h2 { font-size:clamp(38px,10vw,52px); }
  .utility-hero { padding:54px 0 42px; }
  .utility-hero h1 { font-size:clamp(52px,14vw,70px); }
  .utility-hero p:not(.eyebrow) { font-size:16px; }
  .utility-content { padding-bottom:72px; }
  .utility-content .faq-list summary { font-size:17px; }
  .notfound-page { padding:58px 18px 80px; }
  .notfound-grid h1 { font-size:clamp(44px,12vw,62px); }
  .notfound-grid p:not(.eyebrow) { font-size:16px; }
  .notfound-card { width:190px; }
  .notfound-card::before { font-size:74px; }
}
@media (max-width:430px) {
  .hero-ctas { flex-direction:column; }
  .hero-ctas .btn { width:100%; }
  .xray-stage { height:300px; min-height:300px; }
  .collection-stack { width:225px; height:280px; }
  .stack-card { width:150px; }
}
@media (max-width:360px) {
  .wrap { padding-left:16px; padding-right:16px; }
  .logo-img { height:27px; }
  .hero-scene { padding-top:42px; }
  .hero-headline { font-size:44px; }
  .xray-stage { height:278px; min-height:278px; }
  .collection-stack { width:208px; height:265px; }
  .stack-card { width:138px; }
  .reveal-chip { font-size:6.5px; padding:8px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-line,.hero-bg-cards,.possibility-scan::before { animation:none!important; }
  .possibility-step,.process-node { transition:none!important; }
}

/* D5 pricing: stack the two hypotheses on narrow screens instead of forcing
   a desktop two-column grid into a phone. */
@media (max-width: 600px) {
  .pricing-grid { grid-template-columns:1fr; max-width:620px; margin-top:34px; padding:0 18px 72px; }
  .price-card { padding:26px 22px; }
  .pricing-hero { padding:54px 0 30px; }
  .pricing-hero h1 { font-size:clamp(42px,11vw,58px); line-height:.94; }
}

/* D5 mobile hero: the card composition is intentionally self-contained in the
   first viewport instead of being a cropped desktop scene. */
@media (max-width:600px) {
  .xray-stage { height:236px; min-height:236px; }
  .collection-stack { width:194px; height:226px; }
  .stack-card { width:122px; border-radius:10px; }
  .stack-back { left:2px; top:30px; }
  .stack-mid { right:2px; top:22px; }
  .stack-front { top:0; }
  .reveal-chip { bottom:-2px; }
  .xray-orbit-a { width:250px; height:105px; top:16%; }
  .xray-orbit-b { width:210px; height:240px; top:-2px; }
}
@media (max-width:430px) {
  .xray-stage { height:220px; min-height:220px; }
  .collection-stack { width:182px; height:214px; }
  .stack-card { width:116px; }
  .reveal-chip { font-size:6px; padding:7px 8px; }
}
@media (max-width:360px) {
  .xray-stage { height:205px; min-height:205px; }
  .collection-stack { width:172px; height:198px; }
  .stack-card { width:108px; }
}
@media (max-width:430px) { .xray-stage { height:210px; min-height:210px; } .collection-stack { height:204px; } }


/* =========================================================
   PHASE D.6 — FINAL VISUAL DEFECT + CARD PRESENTATION PASS
   ========================================================= */
.card-image-loading {
  visibility:hidden !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(66,232,255,.10), transparent 30%),
    linear-gradient(145deg,#12162b,#080a12);
}
.card-interactive .card-image-loading,
.bg-card .card-image-loading,
.live-product-cards .card-image-loading,
.printing-thumb .card-image-loading { visibility:hidden !important; }
.card-fallback { z-index:5; visibility:visible; }
.card-image-failed { background:#090b13; }

/* Keep the hero card group intentional: one anchor, two supporting cards. */
.hero-bg-cards .bg-card { opacity:.16; border:1px solid rgba(255,255,255,.08); box-shadow:0 24px 70px rgba(0,0,0,.35); }
.hero-bg-cards .bg-card-1 { width:112px; top:17%; left:57%; transform:rotate(-14deg); opacity:.18; }
.hero-bg-cards .bg-card-2 { width:92px; top:59%; left:78%; transform:rotate(12deg); opacity:.14; }
.hero-bg-cards .bg-card-3 { width:82px; top:13%; left:92%; opacity:.09; }
.hero-bg-cards .bg-card-4 { width:74px; top:70%; left:52%; opacity:.10; }
.xray-stage { min-width:0; }
.collection-stack { position:relative; }
.stack-card { will-change:transform; }
.stack-back { transform:translate(-76px,26px) rotate(-13deg); opacity:.54; z-index:1; }
.stack-mid { transform:translate(58px,18px) rotate(11deg); opacity:.72; z-index:2; }
.stack-front { transform:translate(0,0) rotate(-1.5deg); z-index:4; }
.reveal-chip { z-index:8; }
.xray-orbit { z-index:0; }

/* Strong, consistent button states across the whole marketing site. */
.btn:focus-visible,.nav-login:focus-visible,.nav-links a:focus-visible,.nav-mobile a:focus-visible,
.directory-filter:focus-visible,.printing-option:focus-visible,input:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px;
}
.btn:active { transform:translateY(1px); }

/* Single-card destination: card first, not an oversized blank column. */
.card-hero-grid { grid-template-columns:minmax(300px,390px) minmax(0,1fr); gap:clamp(54px,7vw,96px); }
.primary-card-shell { width:min(100%,360px); margin:0 auto; }
.card-hero-art { min-width:0; }
.card-hero-copy { min-width:0; }
.card-page-section,.printings-section > .wrap,.related-commanders-section > .wrap,.related-cards-section > .wrap { max-width:1320px; margin-left:auto; margin-right:auto; }
.related-cards-grid img,.commander-card img,.related-card img { background:#090b13; }

/* Printing controls should feel like a selector, not a gallery. */
.printing-selector { scrollbar-color:rgba(66,232,255,.3) transparent; }
.printing-option { position:relative; }
.printing-option.is-active::after { content:""; position:absolute; left:10px; right:10px; bottom:-5px; height:2px; border-radius:2px; background:var(--accent); box-shadow:0 0 14px var(--accent-glow); }

/* Directory: collection wall, not database table. */
.collection-card-art { position:relative; }
.collection-card-art.card-interactive:hover { box-shadow:0 28px 60px rgba(0,0,0,.38); }
.collection-grid { align-items:start; }

/* Mobile hero is a separate composition: copy -> CTA -> card, no clipped desktop stack. */
@media (max-width:600px) {
  .hero-scene { min-height:auto; padding:20px 0 34px; }
  .hero-inner { display:flex; flex-direction:column; gap:14px; }
  .hero-copy { order:1; }
  .xray-stage { order:2; width:100%; overflow:visible; }
  .hero-headline { font-size:clamp(36px,10.6vw,46px); line-height:.98; margin-bottom:4px; }
  .hero-headline-sub { font-size:18px; margin:8px 0 12px; }
  .hero-sub { font-size:15px; line-height:1.42; max-width:340px; margin-bottom:14px; }
  .hero-ctas { gap:9px; }
  .hero-ctas .btn-primary { min-height:48px; }
  .hero-ctas .btn-ghost { display:none; }
  .hero-note { font-size:9px; line-height:1.35; margin-top:7px; max-width:310px; }
  .collection-stack { width:min(62vw,235px); height:auto; aspect-ratio:330/430; margin-top:2px; }
  .stack-card { width:74%; height:auto; aspect-ratio:5/7; }
  .stack-back { transform:translate(-45px,18px) rotate(-10deg); opacity:.45; }
  .stack-mid { transform:translate(34px,12px) rotate(8deg); opacity:.62; }
  .stack-front { transform:translate(0,0) rotate(-1deg); }
  .scan-line { top:8%; }
  .scan-label { left:10px; bottom:10px; padding:6px 8px; font-size:7px; }
  .reveal-chip { right:-2px; bottom:2px; max-width:175px; font-size:7px; padding:8px 9px; }
  .xray-orbit-a { width:245px; height:160px; }
  .xray-orbit-b { width:210px; height:125px; }
  .xray-hint { margin-top:4px; font-size:9px; }
  .hero-bg-cards .bg-card { width:82px !important; height:115px !important; }
  .hero-bg-cards .bg-card-1 { top:57%; left:2%; transform:rotate(-12deg); opacity:.10; }
  .hero-bg-cards .bg-card-2 { top:68%; left:auto; right:2%; transform:rotate(10deg); opacity:.08; }
  .hero-bg-cards .bg-card-3,.hero-bg-cards .bg-card-4 { display:none; }
}
@media (max-width:360px) {
  .hero-headline { font-size:34px; }
  .hero-sub { font-size:14px; max-width:300px; }
  .collection-stack { width:205px; }
  .reveal-chip { display:none; }
}

/* Mobile card destinations: keep the hero card and CTA comfortably inside the viewport. */
@media (max-width:600px) {
  .card-first-page .card-hero { padding:28px 0 42px; }
  .card-first-page .card-hero-grid { gap:24px; }
  .card-first-page .primary-card-shell { width:min(72vw,270px); }
  .card-first-page .card-hero-copy h1 { font-size:clamp(40px,11vw,54px); }
  .card-first-page .card-context { font-size:15px; line-height:1.42; }
  .card-first-page .card-facts { margin:14px 0 12px; }
}

/* Small screens must always get a usable nav on every page type. */
@media (max-width:900px) {
  .nav-links,.nav-cta { display:none !important; }
  .nav-toggle { display:flex !important; }
  .nav-inner { min-height:62px; }
  .nav-mobile.open { display:flex !important; }
}

/* D6 final composition cleanup: the hero stack itself supplies the depth.
   Background cards are removed so the supporting imagery reads as intentional,
   not decorative drift. */
.hero-bg-cards { display:none; }
@media(max-width:600px){
  .hero-bg-cards { display:none; }
  .hero-scene { padding-bottom:28px; }
  .xray-stage { margin-top:4px; }
}

@media (max-width:900px) {
  .card-first-page .card-hero-grid { grid-template-columns:1fr !important; }
}
@media (max-width:600px) {
  .hero-scene .xray-hint { display:none; }
}

/* =========================================================
   PHASE D.7 — MASTER ADAPTIVE LANDING SYSTEM
   One visual architecture; data changes the subject.
   ========================================================= */
.master-landing { overflow:clip; background:#080a12; }
.master-hero { position:relative; padding:76px 0 92px; min-height:min(820px,calc(100vh - 72px)); display:flex; align-items:center; background:
  radial-gradient(circle at 72% 42%,rgba(66,232,255,.10),transparent 24%),
  radial-gradient(circle at 85% 22%,rgba(117,103,255,.16),transparent 32%),
  linear-gradient(135deg,#080a12 0%,#0a0d1c 52%,#0d1024 100%); }
.master-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.42; background-image:radial-gradient(rgba(255,255,255,.08) .7px,transparent .7px); background-size:7px 7px; mask-image:linear-gradient(90deg,black,transparent 90%); }
.master-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(440px,.92fr); gap:clamp(42px,7vw,100px); align-items:center; }
.master-hero-copy { max-width:700px; }
.master-hero-copy h1 { margin:10px 0 12px; max-width:760px; font:400 clamp(58px,7.2vw,108px)/.88 var(--font-display); text-transform:uppercase; letter-spacing:-.012em; }
.master-hero-copy h1::first-letter { }
.master-subheadline { margin:0 0 16px; color:var(--accent); font:400 clamp(24px,3vw,36px)/1.02 var(--font-display); text-transform:uppercase; }
.master-context { max-width:620px; margin:0 0 25px; color:var(--ink-muted); font-size:18px; line-height:1.6; }
.master-actions { display:flex; flex-wrap:wrap; gap:10px; }
.master-note { margin-top:17px; max-width:560px; color:var(--ink-faint); font:700 8px/1.5 var(--font-data); letter-spacing:.08em; text-transform:uppercase; }
.master-hero-visual { min-width:0; display:grid; place-items:center; }

.landing-subject-stage { position:relative; width:min(100%,560px); height:560px; display:grid; place-items:center; }
.landing-primary-card,.landing-orbit-card,.landing-hero-card { position:absolute; display:block; overflow:hidden; aspect-ratio:5/7; border-radius:18px; border:1px solid rgba(255,255,255,.15); background:#0b0e18; box-shadow:0 32px 90px rgba(0,0,0,.55); }
.landing-primary-card { z-index:5; width:min(62%,350px); transform:rotate(-1deg); }
.landing-primary-card img,.landing-orbit-card img,.landing-hero-card img { width:100%; height:100%; display:block; object-fit:cover; }
.landing-primary-card::after,.landing-hero-card::after,.landing-orbit-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.18) 48%,transparent 64%); opacity:.18; transform:translateX(-115%); transition:transform .8s ease; mix-blend-mode:screen; }
.landing-card-interactive:hover::after,.landing-card-interactive.is-selected::after,.landing-card-interactive:focus-visible::after { transform:translateX(115%); }
.landing-card-glow { position:absolute; inset:-16%; z-index:-1; border-radius:50%; background:radial-gradient(circle,rgba(66,232,255,.16),rgba(117,103,255,.10) 42%,transparent 70%); filter:blur(20px); pointer-events:none; }
.landing-scanline { position:absolute; left:-12%; right:-12%; top:12%; height:2px; z-index:4; background:linear-gradient(90deg,transparent,var(--accent),transparent); box-shadow:0 0 24px rgba(66,232,255,.7); opacity:.8; animation:landing-scan 4.2s ease-in-out infinite; pointer-events:none; }
.landing-xray-chip { position:absolute; z-index:8; right:2%; bottom:7%; padding:8px 10px; border:1px solid rgba(66,232,255,.42); border-radius:999px; background:rgba(7,9,17,.78); color:var(--accent); backdrop-filter:blur(10px); font:700 8px var(--font-data); letter-spacing:.08em; text-transform:uppercase; }
.landing-orbit-card { width:27%; z-index:3; opacity:.78; filter:saturate(.88); }
.landing-orbit-card.orbit-1 { left:7%; top:17%; transform:rotate(-15deg); }
.landing-orbit-card.orbit-2 { right:6%; top:25%; transform:rotate(14deg); }
.landing-orbit-card.orbit-3 { left:14%; bottom:10%; transform:rotate(-7deg); }
.landing-orbit-line { position:absolute; z-index:1; border:1px solid rgba(66,232,255,.13); border-radius:50%; pointer-events:none; }
.orbit-line-a { width:78%; height:70%; transform:rotate(-11deg); }
.orbit-line-b { width:92%; height:48%; transform:rotate(19deg); border-color:rgba(117,103,255,.12); }
@keyframes landing-scan { 0%,12%{transform:translateY(0);opacity:0} 22%{opacity:1} 72%{transform:translateY(360px);opacity:1} 84%,100%{transform:translateY(360px);opacity:0} }

.landing-collection-stack { position:relative; width:min(100%,520px); height:540px; display:grid; place-items:center; }
.landing-hero-card { width:54%; }
.landing-stack-1 { z-index:2; transform:translate(-27%,4%) rotate(-13deg); }
.landing-stack-2 { z-index:4; transform:translate(12%,-3%) rotate(5deg); }
.landing-stack-3 { z-index:6; transform:translate(28%,7%) rotate(14deg); }
.landing-collection-stack .landing-xray-chip { right:1%; bottom:10%; }

.master-flow { padding:92px 0; border-top:1px solid var(--border); background:var(--bg-raise); }
.master-section-heading { max-width:800px; margin-bottom:38px; }
.master-section-heading.inline { max-width:none; display:flex; align-items:end; justify-content:space-between; gap:28px; }
.master-section-heading h2 { margin:7px 0 10px; font:400 clamp(38px,5vw,68px)/.94 var(--font-display); text-transform:uppercase; }
.master-section-heading p:not(.eyebrow) { color:var(--ink-muted); line-height:1.6; }
.master-flow-grid { display:grid; grid-template-columns:1fr 38px 1fr 38px 1fr 38px 1fr 38px 1fr; align-items:center; gap:10px; }
.master-flow-step { min-height:128px; padding:20px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.02); display:flex; flex-direction:column; justify-content:center; }
.master-flow-step.active { border-color:rgba(66,232,255,.38); background:radial-gradient(circle at 50% 0,rgba(66,232,255,.10),transparent 65%),rgba(255,255,255,.025); box-shadow:inset 0 0 45px rgba(66,232,255,.035); }
.master-flow-step span { color:var(--accent); font:700 8px var(--font-data); }
.master-flow-step b { margin-top:8px; font:400 24px var(--font-display); text-transform:uppercase; }
.master-flow-step small { margin-top:5px; color:var(--ink-faint); }
.master-flow-grid>i { height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); position:relative; }
.master-flow-grid>i::after { content:"→"; position:absolute; right:-2px; top:-9px; color:var(--accent); font:700 12px var(--font-data); }

.master-relationship { padding:100px 0; border-top:1px solid var(--border); background:#090b13; }
.relationship-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr); gap:clamp(45px,8vw,110px); align-items:center; }
.relationship-grid h2 { margin:7px 0 14px; font:400 clamp(48px,6vw,84px)/.9 var(--font-display); text-transform:uppercase; }
.relationship-grid>div:first-child>p:not(.eyebrow) { color:var(--ink-muted); line-height:1.7; max-width:620px; }
.subject-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:28px; }
.subject-facts div { padding:13px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02); }
.subject-facts span { display:block; color:var(--ink-faint); font:700 8px var(--font-data); }
.subject-facts b { display:block; margin-top:5px; font-size:12px; line-height:1.2; }
.relationship-visual { position:relative; width:min(100%,540px); aspect-ratio:1; margin:auto; display:grid; place-items:center; }
.relationship-ring { position:absolute; border:1px solid rgba(66,232,255,.18); border-radius:50%; box-shadow:0 0 50px rgba(66,232,255,.04); }
.ring-one { inset:12%; transform:rotate(15deg) scaleX(.86); }
.ring-two { inset:22%; transform:rotate(-24deg) scaleY(.74); border-color:rgba(117,103,255,.2); }
.relationship-core { width:34%; aspect-ratio:5/7; display:flex; flex-direction:column; justify-content:end; padding:16px; border-radius:14px; background:linear-gradient(145deg,#141a35,#080a13); border:1px solid rgba(66,232,255,.36); box-shadow:0 30px 70px rgba(0,0,0,.48),0 0 60px rgba(66,232,255,.08); color:var(--ink); font:400 23px/.9 var(--font-display); text-transform:uppercase; z-index:4; }
.relationship-core small { margin-top:8px; color:var(--accent); font:700 7px var(--font-data); letter-spacing:.08em; }
.relationship-label { position:absolute; padding:7px 9px; border:1px solid var(--border); border-radius:999px; background:rgba(8,10,18,.86); color:var(--ink-muted); font:700 7px var(--font-data); letter-spacing:.07em; z-index:6; }
.rel-a { left:0; top:27%; }.rel-b { right:0; top:45%; }.rel-c { left:20%; bottom:9%; }

.master-related,.master-commanders { padding:92px 0; border-top:1px solid var(--border); background:var(--bg-raise); }
.master-commanders { background:#090b13; }
.master-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.landing-related-card { display:block; min-width:0; color:var(--ink); text-decoration:none; }
.landing-related-art { display:block; position:relative; overflow:hidden; aspect-ratio:5/7; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 18px 45px rgba(0,0,0,.25); }
.landing-related-art picture,.landing-related-art img { width:100%; height:100%; display:block; object-fit:cover; }
.landing-related-meta { display:block; padding:10px 2px 0; }
.landing-related-meta b { display:block; font-size:13px; line-height:1.15; }
.landing-related-meta small { display:block; margin-top:4px; color:var(--ink-faint); font:700 8px var(--font-data); text-transform:uppercase; }
.master-commander-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.master-commander-grid .landing-related-card { display:grid; grid-template-columns:92px 1fr; gap:14px; padding:9px; border:1px solid var(--border); border-radius:15px; background:var(--surface); align-items:center; }
.master-commander-grid .landing-related-art { border-radius:9px; }

.master-faq { padding:96px 0; border-top:1px solid var(--border); }
.faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.faq-grid h2 { margin:7px 0 14px; font:400 clamp(40px,5vw,68px)/.94 var(--font-display); text-transform:uppercase; }
.faq-grid>div:first-child>p:not(.eyebrow) { color:var(--ink-muted); line-height:1.65; }
.faq-list { border-top:1px solid var(--border); }
.faq-list details { border-bottom:1px solid var(--border); padding:18px 0; }
.faq-list summary { cursor:pointer; color:var(--ink); font-weight:700; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; float:right; color:var(--accent); font:700 16px var(--font-data); }
.faq-list details[open] summary::after { content:"−"; }
.faq-list p { max-width:700px; margin:12px 0 0; color:var(--ink-muted); line-height:1.65; }

.master-cta { padding:118px 0 135px; text-align:center; border-top:1px solid var(--border); background:radial-gradient(circle at 50% 0,rgba(66,232,255,.12),transparent 32%),#080a12; }
.master-cta h2 { margin:8px auto 14px; font:400 clamp(48px,7vw,88px)/.9 var(--font-display); text-transform:uppercase; }
.master-cta p:not(.eyebrow) { max-width:600px; margin:0 auto 25px; color:var(--ink-muted); font-size:17px; line-height:1.6; }

@media (max-width:1100px) {
  .master-hero-grid { grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); gap:48px; }
  .landing-subject-stage { height:500px; }
  .landing-collection-stack { height:500px; }
  .master-flow-grid { grid-template-columns:1fr 24px 1fr 24px 1fr; }
  .master-flow-grid>i:nth-of-type(3),.master-flow-grid>i:nth-of-type(4) { display:none; }
  .master-flow-step:nth-of-type(4),.master-flow-step:nth-of-type(5) { display:none; }
}
@media (max-width:900px) {
  .master-hero { min-height:0; padding:54px 0 70px; }
  .master-hero-grid { grid-template-columns:1fr; gap:32px; }
  .master-hero-copy { order:1; }
  .master-hero-visual { order:2; }
  .master-hero-copy h1 { font-size:clamp(48px,10vw,82px); }
  .master-context { font-size:16px; }
  .landing-subject-stage,.landing-collection-stack { height:460px; width:min(100%,520px); }
  .master-flow-grid { grid-template-columns:1fr; gap:8px; }
  .master-flow-grid>i { display:block!important; width:1px; height:26px; margin:auto; }
  .master-flow-grid>i::after { content:"↓"; top:7px; right:-4px; }
  .master-flow-step:nth-of-type(4),.master-flow-step:nth-of-type(5) { display:flex; }
  .relationship-grid,.faq-grid { grid-template-columns:1fr; gap:40px; }
  .relationship-visual { order:-1; }
  .master-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .master-hero { padding:30px 0 54px; }
  .master-hero-grid { gap:22px; }
  .master-hero-copy h1 { font-size:clamp(40px,11.5vw,58px); }
  .master-subheadline { font-size:22px; }
  .master-context { font-size:15px; line-height:1.5; }
  .master-actions { flex-direction:column; align-items:stretch; }
  .master-actions .btn { text-align:center; }
  .master-note { margin-top:11px; font-size:7px; }
  .master-hero-visual { min-height:340px; }
  .landing-subject-stage,.landing-collection-stack { width:min(100%,330px); height:350px; }
  .landing-primary-card { width:56%; }
  .landing-orbit-card { width:28%; }
  .landing-orbit-card.orbit-1 { left:3%; top:17%; }
  .landing-orbit-card.orbit-2 { right:2%; top:25%; }
  .landing-orbit-card.orbit-3 { left:7%; bottom:8%; }
  .landing-xray-chip { right:-1%; bottom:4%; font-size:7px; }
  .landing-hero-card { width:55%; }
  .landing-stack-1 { transform:translate(-26%,4%) rotate(-12deg); }
  .landing-stack-2 { transform:translate(7%,-2%) rotate(4deg); }
  .landing-stack-3 { transform:translate(25%,6%) rotate(12deg); }
  .master-flow,.master-related,.master-commanders,.master-faq { padding:68px 0; }
  .master-section-heading h2,.relationship-grid h2,.faq-grid h2 { font-size:clamp(34px,10vw,50px); }
  .master-section-heading.inline { align-items:start; flex-direction:column; gap:10px; }
  .subject-facts { grid-template-columns:1fr; }
  .relationship-visual { width:min(100%,330px); }
  .relationship-core { width:38%; font-size:16px; }
  .relationship-label { font-size:6px; }
  .rel-a { left:0; top:23%; }.rel-b { right:0; top:44%; }.rel-c { left:14%; bottom:8%; }
  .master-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
  .master-commander-grid { grid-template-columns:1fr; }
  .master-cta { padding:88px 0 105px; }
  .master-cta h2 { font-size:clamp(42px,12vw,62px); }
}
@media (max-width:360px) {
  .master-hero { padding-top:24px; }
  .master-hero-copy h1 { font-size:40px; }
  .master-subheadline { font-size:20px; }
  .landing-subject-stage,.landing-collection-stack { width:290px; height:315px; }
  .master-hero-visual { min-height:315px; }
}
@media (prefers-reduced-motion:reduce) {
  .landing-scanline { animation:none; top:50%; opacity:.8; }
  .landing-primary-card::after,.landing-hero-card::after,.landing-orbit-card::after { transition:none; }
}

.master-printings { padding:82px 0; border-top:1px solid var(--border); background:var(--bg-raise); }
.master-printing-row { display:flex; gap:10px; overflow-x:auto; padding:3px 2px 10px; scrollbar-width:thin; }
.master-printing { min-width:230px; display:flex; align-items:center; gap:12px; padding:9px; border:1px solid var(--border); border-radius:13px; background:rgba(255,255,255,.025); color:var(--ink); text-align:left; cursor:pointer; transition:border-color .2s ease,transform .2s ease,background .2s ease; }
.master-printing:hover { transform:translateY(-2px); border-color:var(--border-strong); }
.master-printing.is-active,.master-printing[aria-pressed="true"] { border-color:rgba(66,232,255,.55); background:rgba(66,232,255,.06); }
.master-printing img { width:43px; aspect-ratio:5/7; object-fit:cover; border-radius:6px; display:block; flex:none; }
.master-printing span { min-width:0; display:grid; gap:4px; }
.master-printing b { font-size:11px; line-height:1.2; }
.master-printing small { color:var(--ink-faint); font:700 8px var(--font-data); letter-spacing:.06em; text-transform:uppercase; }
@media(max-width:600px){.master-printings{padding:68px 0}.master-printing{min-width:205px}}


/* =========================================================
   PHASE D.8 — VISUAL CRAFTSMANSHIP
   Typography + card-page spacing + responsive rhythm.
   No architecture changes.
   ========================================================= */

/* Type hierarchy: more presence without turning every line into display type. */
h1, h2, h3 { font-weight: 500; }
.btn, .nav-links a, .nav-login, .nav-mobile a { font-weight: 600; }
.eyebrow { font-weight: 700; }
.master-hero-copy h1,
.master-section-heading h2,
.relationship-grid h2,
.faq-grid h2,
.master-cta h2 {
  font-weight: 500;
  text-rendering: geometricPrecision;
  -webkit-text-stroke: .12px currentColor;
}
.master-subheadline { font-weight: 500; }
.master-context,
.master-section-heading p:not(.eyebrow),
.relationship-grid>div:first-child>p:not(.eyebrow),
.faq-grid>div:first-child>p:not(.eyebrow),
.faq-list p,
.master-cta p:not(.eyebrow) { font-weight: 500; }
.master-actions .btn { font-weight: 700; }
.master-flow-step b { font-weight: 500; }
.landing-related-meta b { font-weight: 600; }

/* Card-led hero: the searched subject gets breathing room and visual priority. */
.card-landing .master-hero,
.commander-landing .master-hero {
  padding-top: 68px;
  padding-bottom: 84px;
}
.card-landing .master-hero-grid,
.commander-landing .master-hero-grid {
  gap: clamp(56px, 7.5vw, 104px);
}
.card-landing .master-hero-copy,
.commander-landing .master-hero-copy { max-width: 640px; }
.card-landing .master-hero-copy h1,
.commander-landing .master-hero-copy h1 {
  margin-top: 8px;
  margin-bottom: 14px;
  font-size: clamp(62px, 7.4vw, 104px);
  line-height: .9;
}
.card-landing .master-subheadline,
.commander-landing .master-subheadline { margin-bottom: 12px; }
.card-landing .master-context,
.commander-landing .master-context { max-width: 560px; margin-bottom: 24px; }
.card-landing .master-hero-visual,
.commander-landing .master-hero-visual { min-width: 0; }
.card-landing .landing-subject-stage,
.commander-landing .landing-subject-stage {
  width: min(100%, 540px);
  height: 560px;
}
.card-landing .landing-primary-card,
.commander-landing .landing-primary-card {
  width: min(64%, 355px);
  box-shadow: 0 42px 110px rgba(0,0,0,.64), 0 0 0 1px rgba(255,255,255,.12);
}
.card-landing .landing-orbit-card,
.commander-landing .landing-orbit-card { opacity: .72; }
.card-landing .landing-xray-chip,
.commander-landing .landing-xray-chip { bottom: 6%; }

/* Keep the D7 master container consistent; no full-bleed card sections. */
.master-hero > .wrap,
.master-flow > .wrap,
.master-relationship > .wrap,
.master-related > .wrap,
.master-commanders > .wrap,
.master-printings > .wrap,
.master-faq > .wrap,
.master-cta > .wrap { width:100%; }

/* Reduce repetitive copy and give each section a clear visual job. */
.master-flow { padding-top: 84px; padding-bottom: 88px; }
.master-section-heading { margin-bottom: 32px; }
.master-section-heading h2 { margin-top: 5px; }
.master-flow-grid { margin-top: 0; }
.master-relationship { padding-top: 88px; padding-bottom: 92px; }
.relationship-grid { gap: clamp(50px, 7vw, 96px); }
.relationship-visual { width:min(100%, 500px); }
.master-related { padding-top: 82px; padding-bottom: 90px; }
.master-commanders { padding-top: 78px; padding-bottom: 86px; }
.master-faq { padding-top: 82px; padding-bottom: 92px; }
.master-cta { padding-top: 100px; padding-bottom: 112px; }

/* Printing is supporting information, not a second hero. */
.master-printings { padding-top: 56px; padding-bottom: 60px; background:rgba(12,14,28,.72); }
.master-printings .master-section-heading { margin-bottom: 18px; }
.master-printings .master-section-heading h2 {
  font: 500 25px/1.05 var(--font-display);
  text-transform:uppercase;
}
.master-printings .master-section-heading > p { max-width: 280px; font-size: 13px; }
.master-printing-row { padding-top: 0; padding-bottom: 6px; }
.master-printing { min-width: 205px; padding: 8px; }
.master-printing img { width: 38px; }

/* Related cards: curated, calm, and clearly subordinate to the subject. */
.master-card-grid { gap: 20px; }
.landing-related-art { border-radius: 12px; box-shadow:0 20px 48px rgba(0,0,0,.28); }
.landing-related-meta { padding-top: 9px; }
.landing-related-meta b { font-size: 12.5px; }
.master-commander-grid { gap: 16px; }
.master-commander-grid .landing-related-card { grid-template-columns:82px 1fr; }

/* Mobile card journey: CARD → NAME → CONTEXT → CTA → DETAILS. */
@media (max-width: 900px) {
  .card-landing .master-hero,
  .commander-landing .master-hero { padding-top: 40px; padding-bottom: 58px; }
  .card-landing .master-hero-grid,
  .commander-landing .master-hero-grid { gap: 26px; }
  .card-landing .master-hero-visual,
  .commander-landing .master-hero-visual { order: 1; }
  .card-landing .master-hero-copy,
  .commander-landing .master-hero-copy { order: 2; }
  .card-landing .landing-subject-stage,
  .commander-landing .landing-subject-stage {
    width:min(100%, 430px);
    height:440px;
  }
  .card-landing .landing-primary-card,
  .commander-landing .landing-primary-card { width:min(66%, 300px); }
  .card-landing .master-hero-copy h1,
  .commander-landing .master-hero-copy h1 { font-size:clamp(54px, 9vw, 82px); }
}

@media (max-width: 600px) {
  .card-landing .master-hero,
  .commander-landing .master-hero { padding-top: 24px; padding-bottom: 46px; }
  .card-landing .master-hero-grid,
  .commander-landing .master-hero-grid { gap: 14px; }
  .card-landing .landing-subject-stage,
  .commander-landing .landing-subject-stage {
    width:min(100%, 360px);
    height:340px;
  }
  .card-landing .landing-primary-card,
  .commander-landing .landing-primary-card {
    width:min(66%, 235px);
  }
  .card-landing .landing-orbit-card,
  .commander-landing .landing-orbit-card { width:26%; opacity:.66; }
  .card-landing .landing-xray-chip,
  .commander-landing .landing-xray-chip { right:0; bottom:3%; }
  .card-landing .master-hero-copy h1,
  .commander-landing .master-hero-copy h1 {
    margin-bottom:10px;
    font-size:clamp(42px, 11.5vw, 58px);
    line-height:.92;
  }
  .card-landing .master-subheadline,
  .commander-landing .master-subheadline { font-size:20px; margin-bottom:10px; }
  .card-landing .master-context,
  .commander-landing .master-context { font-size:15.5px; line-height:1.48; margin-bottom:18px; }
  .card-landing .master-actions,
  .commander-landing .master-actions { gap:8px; }
  .card-landing .master-actions .btn-primary,
  .commander-landing .master-actions .btn-primary { order:0; }
  .card-landing .master-actions .btn-ghost,
  .commander-landing .master-actions .btn-ghost { order:1; }
  .master-flow { padding:58px 0 64px; }
  .master-relationship { padding:64px 0 70px; }
  .master-related { padding:62px 0 70px; }
  .master-commanders { padding:58px 0 64px; }
  .master-faq { padding:60px 0 68px; }
  .master-cta { padding:74px 0 86px; }
  .master-printings { padding:48px 0 52px; }
  .master-printings .master-section-heading.inline { margin-bottom:14px; }
  .master-printings .master-section-heading h2 { font-size:22px; }
  .master-printings .master-section-heading > p { display:none; }
  .master-card-grid { gap:18px 12px; }
}

@media (max-width: 430px) {
  .card-landing .landing-subject-stage,
  .commander-landing .landing-subject-stage {
    width:min(100%, 330px);
    height:315px;
  }
  .card-landing .landing-primary-card,
  .commander-landing .landing-primary-card { width:66%; }
  .card-landing .landing-orbit-card,
  .commander-landing .landing-orbit-card { width:25%; }
  .card-landing .master-hero-copy h1,
  .commander-landing .master-hero-copy h1 { font-size:clamp(40px, 11.5vw, 54px); }
}

@media (max-width: 360px) {
  .card-landing .master-hero,
  .commander-landing .master-hero { padding-top:18px; padding-bottom:38px; }
  .card-landing .landing-subject-stage,
  .commander-landing .landing-subject-stage {
    width:286px;
    height:292px;
  }
  .card-landing .landing-primary-card,
  .commander-landing .landing-primary-card { width:65%; }
  .card-landing .landing-xray-chip,
  .commander-landing .landing-xray-chip { font-size:6px; padding:6px 8px; }
  .card-landing .master-hero-copy h1,
  .commander-landing .master-hero-copy h1 { font-size:40px; }
  .card-landing .master-subheadline,
  .commander-landing .master-subheadline { font-size:18px; }
  .card-landing .master-context,
  .commander-landing .master-context { font-size:14px; }
}

/* D8.1 — X-ray target uses the real card image inside the existing orbit system. */
.relationship-core-card {
  position:relative;
  width:34%;
  aspect-ratio:5/7;
  padding:0;
  overflow:hidden;
  border-radius:14px;
  background:#080a13;
  border:1px solid rgba(66,232,255,.36);
  box-shadow:0 30px 70px rgba(0,0,0,.48),0 0 60px rgba(66,232,255,.08);
  color:var(--ink);
  z-index:4;
}
.relationship-core-card picture,
.relationship-core-card picture img { width:100%; height:100%; display:block; }
.relationship-core-card picture img { object-fit:cover; }
.relationship-core-overlay {
  position:absolute; inset:auto 0 0; z-index:3; padding:28px 14px 14px;
  background:linear-gradient(180deg,transparent,rgba(5,7,14,.94));
  display:grid; gap:5px;
}
.relationship-core-overlay b {
  font:500 clamp(16px,1.7vw,24px)/.92 var(--font-display);
  text-transform:uppercase;
}
.relationship-core-overlay small {
  color:var(--accent); font:700 7px var(--font-data); letter-spacing:.08em;
}
.relationship-core-collection {
  display:flex; flex-direction:column; justify-content:end; padding:16px;
  color:var(--ink); font:500 23px/.9 var(--font-display); text-transform:uppercase;
}
.relationship-core-collection small {
  margin-top:8px; color:var(--accent); font:700 7px var(--font-data); letter-spacing:.08em;
}
.footer-minimal { display:flex; justify-content:center; align-items:center; padding:22px 0 20px; }
.footer-minimal .logo-img { width:120px; height:auto; opacity:.62; }
.master-faq { padding-top:72px; padding-bottom:72px; }
.master-faq .faq-grid { gap:64px; }
.faq-list details { padding:16px 0; }
@media (max-width:600px) {
  .master-faq { padding-top:56px; padding-bottom:58px; }
  .master-faq .faq-grid { gap:28px; }
  .relationship-core-card { width:38%; }
}

/* D8.2 — final display weight + X-ray card scale polish */
.master-hero-copy h1,
.master-section-heading h2,
.relationship-grid h2,
.faq-grid h2,
.master-cta h2 {
  font-weight:500;
  -webkit-text-stroke:.12px currentColor;
}
.master-subheadline {
  font-weight:500;
}
.relationship-core-card {
  width:40%;
}
.relationship-core-overlay {
  padding:18px 12px 12px;
}
.relationship-core-overlay small {
  font-size:8px;
}
@media (max-width:600px) {
  .relationship-core-card { width:42%; }
}

/* D8.3 — single-card FAQ: compact, aligned, and subordinate to the card journey */
.card-landing .master-faq {
  padding-top: 58px;
  padding-bottom: 60px;
}
.card-landing .master-faq .faq-grid {
  grid-template-columns: minmax(320px,.78fr) minmax(0,1.22fr);
  gap: clamp(52px,6vw,84px);
}
.card-landing .master-faq .faq-list {
  border-top: 0;
  display:grid;
  gap:10px;
}
.card-landing .master-faq .faq-list details {
  margin:0;
  padding:0 18px;
  min-height:0;
  border:1px solid rgba(86,91,180,.34);
  border-radius:14px;
  background:rgba(16,19,41,.72);
}
.card-landing .master-faq .faq-list summary {
  min-height:68px;
  padding:14px 0;
  display:flex;
  align-items:center;
  padding-right:28px;
  font-size:16px;
  line-height:1.25;
}
.card-landing .master-faq .faq-list summary::after {
  position:absolute;
  right:18px;
  margin-top:0;
  float:none;
}
.card-landing .master-faq .faq-list details[open] {
  padding-bottom:14px;
}
.card-landing .master-faq .faq-list details p {
  margin:0 0 4px;
  padding:0 0 2px;
  font-size:13px;
  line-height:1.55;
}
@media (max-width:900px) {
  .card-landing .master-faq {
    padding-top:48px;
    padding-bottom:54px;
  }
  .card-landing .master-faq .faq-grid {
    grid-template-columns:1fr;
    gap:26px;
  }
  .card-landing .master-faq .faq-list {
    gap:8px;
  }
  .card-landing .master-faq .faq-list summary {
    min-height:60px;
    font-size:15px;
  }
}
@media (max-width:600px) {
  .card-landing .master-faq {
    padding-top:42px;
    padding-bottom:46px;
  }
  .card-landing .master-faq .faq-grid {
    gap:20px;
  }
  .card-landing .master-faq .faq-grid h2 {
    margin-bottom:10px;
  }
  .card-landing .master-faq .faq-list details {
    padding-left:14px;
    padding-right:14px;
  }
  .card-landing .master-faq .faq-list summary {
    min-height:56px;
    padding:12px 0;
    padding-right:24px;
    font-size:14px;
  }
  .card-landing .master-faq .faq-list summary::after {
    right:14px;
  }
}

/* D8.4 — unified FAQ system across standalone FAQ and card pages */
.faq-list {
  display:grid;
  gap:10px;
}
.faq-list details {
  margin:0;
  padding:0 18px;
  min-height:0;
  border:1px solid rgba(86,91,180,.34);
  border-radius:14px;
  background:rgba(16,19,41,.72);
}
.faq-list summary {
  min-height:68px;
  padding:14px 28px 14px 0;
  display:flex;
  align-items:center;
  font-size:16px;
  line-height:1.25;
}
.faq-list details[open] {
  padding-bottom:14px;
}
.faq-list details p {
  margin:0 0 4px;
  padding:0;
  font-size:13px;
  line-height:1.55;
}
@media(max-width:900px) {
  .faq-list { gap:8px; }
  .faq-list summary { min-height:60px; font-size:15px; }
}
@media(max-width:600px) {
  .faq-list details { padding-left:14px; padding-right:14px; }
  .faq-list summary {
    min-height:56px;
    padding:12px 24px 12px 0;
    font-size:14px;
  }
}

/* D8.5 — force the standalone utility FAQ to share the same compact card treatment. */
.utility-content .faq-list {
  display:grid;
  gap:10px;
  max-width:920px;
  border-top:0;
}
.utility-content .faq-list details {
  margin:0;
  padding:0 18px;
  min-height:0;
  border:1px solid rgba(86,91,180,.34);
  border-radius:14px;
  background:rgba(16,19,41,.72);
}
.utility-content .faq-list summary {
  min-height:68px;
  padding:14px 28px 14px 0;
  display:flex;
  align-items:center;
  font-size:16px;
  line-height:1.25;
}
.utility-content .faq-list details[open] {
  padding-bottom:14px;
}
.utility-content .faq-list details p {
  max-width:700px;
  margin:0 0 4px;
  padding:0;
  font-size:13px;
  line-height:1.55;
}
@media(max-width:900px) {
  .utility-content .faq-list { gap:8px; }
  .utility-content .faq-list summary { min-height:60px; font-size:15px; }
}
@media(max-width:600px) {
  .utility-content .faq-list details { padding-left:14px; padding-right:14px; }
  .utility-content .faq-list summary {
    min-height:56px;
    padding:12px 24px 12px 0;
    font-size:14px;
  }
}

/* D8.6 — explicit FAQ variants: standalone utility vs single-card master FAQ */
.card-landing .master-faq .faq-list {
  display:grid;
  gap:10px;
  border-top:0;
}
.card-landing .master-faq .faq-list details {
  margin:0;
  padding:0 18px;
  min-height:0;
  border:1px solid rgba(86,91,180,.34);
  border-radius:14px;
  background:rgba(16,19,41,.72);
}
.card-landing .master-faq .faq-list summary {
  min-height:68px;
  padding:14px 28px 14px 0;
  display:flex;
  align-items:center;
  position:relative;
  font-size:16px;
  line-height:1.25;
  font-weight:700;
}
.card-landing .master-faq .faq-list summary::after {
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  float:none;
}
.card-landing .master-faq .faq-list details[open] {
  padding-bottom:14px;
}
.card-landing .master-faq .faq-list details p {
  max-width:700px;
  margin:0 0 4px;
  padding:0;
  font-size:13px;
  line-height:1.55;
}
@media(max-width:900px) {
  .card-landing .master-faq .faq-list { gap:8px; }
  .card-landing .master-faq .faq-list summary { min-height:60px; font-size:15px; }
}
@media(max-width:600px) {
  .card-landing .master-faq .faq-list details {
    padding-left:14px;
    padding-right:14px;
  }
  .card-landing .master-faq .faq-list summary {
    min-height:56px;
    padding:12px 24px 12px 0;
    font-size:14px;
  }
  .card-landing .master-faq .faq-list summary::after { right:0; }
}

/* D8.7 — container sizing/padding correction for FAQ and shared sections */
.wrap {
  box-sizing:border-box;
}
.card-landing .master-faq > .wrap {
  width:100%;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  padding-left:24px;
  padding-right:24px;
}
@media(max-width:600px) {
  .card-landing .master-faq > .wrap {
    padding-left:18px;
    padding-right:18px;
  }
}

/* Final marketing brief — collection entry story */
.collection-entry-story {
  padding:110px 0;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,rgba(23,28,57,.16),transparent);
}
.entry-methods {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:42px;
}
.entry-method {
  min-height:170px;
  padding:22px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(13,16,34,.72);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
}
.entry-method span {
  color:var(--accent);
  font:700 11px var(--font-data);
  letter-spacing:.08em;
}
.entry-method b {
  font:500 21px/.95 var(--font-display);
  text-transform:uppercase;
}
.entry-method small {
  color:var(--ink-muted);
  font:500 13px/1.45 var(--font-body);
}
.entry-method.future { border-style:dashed; opacity:.72; }
@media(max-width:900px) {
  .entry-methods { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px) {
  .collection-entry-story { padding:72px 0; }
  .entry-methods { grid-template-columns:1fr; margin-top:28px; }
  .entry-method { min-height:135px; }
}

/* D8.8 — mobile menu CTA: keep Get Started Free inside the dropdown */
@media (max-width: 760px) {
  .nav-mobile {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 18px 22px;
    gap: 2px;
    background: rgba(14,15,22,0.97);
    overflow: hidden;
  }
  .nav-mobile a {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-mobile .nav-mobile-cta,
  .nav-mobile a.btn {
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    text-align: center;
    flex: 0 0 auto;
  }
}

/* Mobile menu CTA — override muted nav-link color with high-contrast button text. */
@media (max-width: 760px) {
  .nav-mobile a.nav-mobile-cta,
  .nav-mobile a.nav-mobile-cta:visited,
  .nav-mobile a.nav-mobile-cta:hover,
  .nav-mobile a.nav-mobile-cta:focus,
  .nav-mobile a.nav-mobile-cta:active {
    color: var(--primary-ink) !important;
    background: var(--primary);
    -webkit-text-fill-color: var(--primary-ink);
    opacity: 1;
  }
}

/* FINAL MOBILE MENU CTA FIX */
@media (max-width: 760px) {
  .nav-mobile a.nav-mobile-cta,
  .nav-mobile a.nav-mobile-cta:visited,
  .nav-mobile a.nav-mobile-cta:hover,
  .nav-mobile a.nav-mobile-cta:focus,
  .nav-mobile a.nav-mobile-cta:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
    opacity: 1 !important;
    background: var(--primary) !important;
  }
}

/* FINAL MOBILE MENU CTA: dedicated button styling, independent of nav-link color. */
.nav-mobile a.nav-mobile-cta,
.nav-mobile a.nav-mobile-cta:visited,
.nav-mobile a.nav-mobile-cta:hover,
.nav-mobile a.nav-mobile-cta:focus,
.nav-mobile a.nav-mobile-cta:active {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
  font-weight:800 !important;
}
@media (max-width:760px) {
  .nav-mobile a.nav-mobile-cta {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:48px !important;
    margin-top:10px !important;
    padding:12px 18px !important;
    border-radius:999px !important;
    background:var(--primary) !important;
  }
}

.card-image-fallback{object-fit:cover!important;aspect-ratio:5/7!important;}

/* Mobile menu signup button - the one authoritative rule.
   Matches every page's markup (with or without .nav-mobile-cta) and
   overrides the muted .nav-mobile a colour and the older white-text
   fixes above. Dark text on the cyan->violet gradient, the same as the
   hero's "X-Ray My Collection" button, so it reads at both ends. */
.nav-mobile a.btn-primary,
.nav-mobile a.btn-primary:visited,
.nav-mobile a.btn-primary:hover,
.nav-mobile a.btn-primary:focus,
.nav-mobile a.btn-primary:active,
.nav-mobile a.nav-mobile-cta,
.nav-mobile a.nav-mobile-cta:visited,
.nav-mobile a.nav-mobile-cta:hover,
.nav-mobile a.nav-mobile-cta:focus,
.nav-mobile a.nav-mobile-cta:active {
  color:#07101a !important;
  -webkit-text-fill-color:#07101a !important;
  background:linear-gradient(135deg,var(--accent),#7567ff 82%) !important;
  text-shadow:none !important;
  opacity:1 !important;
  font-weight:800 !important;
}
@media (max-width:760px) {
  .nav-mobile a.btn-primary {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:48px !important;
    margin-top:10px !important;
    padding:12px 18px !important;
    border-radius:999px !important;
  }
}

/* Cookie consent banner (js/consent.js). Accept and Reject deliberately
   look the same: EU guidance says refusing must be as easy as accepting. */
.consent-banner { position:fixed; left:16px; right:16px; bottom:16px; z-index:1000; max-width:760px; margin:0 auto;
  background:var(--surface,#1a1b25); color:var(--ink,#f4f3f7); border:1px solid var(--border,rgba(255,255,255,.09));
  border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.45); }
.consent-banner[hidden] { display:none; }
.consent-inner { display:flex; gap:18px; align-items:center; padding:16px 18px; }
.consent-text { flex:1; min-width:0; }
.consent-text p { margin:0; font-size:14px; line-height:1.5; color:var(--ink-muted,#9a96a8); }
.consent-text .consent-title { color:var(--ink,#f4f3f7); font-weight:800; margin-bottom:2px; }
.consent-text a { color:var(--accent,#42e8ff); }
.consent-actions { display:flex; gap:10px; flex-shrink:0; }
.consent-btn { min-width:104px; min-height:44px; padding:10px 18px; border-radius:999px; font:inherit; font-size:14px; font-weight:800;
  cursor:pointer; border:1.5px solid var(--accent,#42e8ff); background:transparent; color:var(--ink,#f4f3f7); }
.consent-btn:hover, .consent-btn:focus-visible { background:rgba(66,232,255,.12); outline:none; }
.consent-btn:focus-visible { box-shadow:0 0 0 3px rgba(66,232,255,.35); }
.consent-settings-link { background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer; }
@media (max-width:640px) {
  .consent-banner { left:10px; right:10px; bottom:10px; }
  .consent-inner { flex-direction:column; align-items:stretch; gap:12px; }
  .consent-actions .consent-btn { flex:1; }
}

/* Card page v2: "In Commander" facts block */
.mfc-facts { padding:64px 0 70px; border-top:1px solid var(--border); background:var(--bg-raise); }
.mfc-facts .master-section-heading { margin-bottom: 18px; }
.mfc-facts .master-section-heading h2 { font-size:clamp(28px,4vw,44px); }
.mfc-facts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:10px; margin:0; }
.mfc-facts-grid > div { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md,12px); padding:14px 16px; }
.mfc-facts-grid dt { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 6px; }
.mfc-facts-grid dd { margin:0; font-size:15px; font-weight:700; color:var(--ink); line-height:1.4; overflow-wrap:anywhere; }
.mfc-facts-source { margin:12px 0 0; font-size:12.5px; color:var(--ink-muted); }
.master-related .master-section-heading p { color:var(--ink-muted); }

/* App screenshots (img/app/, captured from the real app) */
.app-phone { position:relative; width:100%; max-width:300px; aspect-ratio:390/844; border-radius:38px; padding:9px;
  background:linear-gradient(160deg,#2a2b3a,#0b0c12); box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset; }
.app-phone picture, .app-phone img { display:block; width:100%; height:100%; }
.app-phone img { border-radius:30px; object-fit:cover; object-position:top; background:#0e0f16; }
.hero-with-phone { position:relative; display:flex; align-items:center; justify-content:center; }
.hero-with-phone .app-phone-hero { position:relative; z-index:3; width:min(300px,70vw); transform:rotate(-2deg); }
.hero-with-phone .landing-collection-stack { position:absolute; inset:0; z-index:1; opacity:.55; pointer-events:none; transform:translateX(18%) scale(.88); }
.app-tour { padding:90px 0 96px; border-top:1px solid var(--border); background:var(--bg-raise); }
.app-tour .master-section-heading h2 { font-size:clamp(32px,4.4vw,56px); }
.app-tour-steps { list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; }
.app-tour-steps figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:20px; }
.app-tour-steps figcaption { max-width:300px; color:var(--ink-muted); font-size:15px; line-height:1.55; }
.app-tour-steps figcaption span { display:block; font:700 12px var(--font-data,monospace); letter-spacing:.12em; color:var(--accent); margin-bottom:6px; }
.app-tour-steps figcaption b { display:block; color:var(--ink); font-size:18px; margin-bottom:4px; }
.app-tour-cta { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:48px; color:var(--ink-muted); font-size:14px; }
@media (max-width:860px) {
  /* Phones: swipe through the three screens, one and a bit visible at a time. */
  .app-tour-steps { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:18px; padding:4px 4px 18px; margin:0 -18px; padding-left:18px; padding-right:18px; }
  .app-tour-steps > li { flex:0 0 78%; scroll-snap-align:center; }
  .app-phone { max-width:none; }
  .hero-with-phone { margin-top:28px; }
  .hero-with-phone .landing-collection-stack { display:none; }
}

/* Pro tools (homepage) */
.pro-tools { padding:90px 0 96px; border-top:1px solid var(--border); }
.pro-tools .master-section-heading h2 { font-size:clamp(32px,4.4vw,56px); }
.pro-tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:12px; }
.pro-tool { position:relative; padding:26px 26px 24px; border-radius:18px; border:1px solid var(--border); background:linear-gradient(160deg, rgba(247,201,72,.07), rgba(117,103,255,.07)); }
.pro-tool h3 { margin:6px 0 10px; font-size:22px; color:var(--ink); }
.pro-tool p { margin:0; color:var(--ink-muted); font-size:15.5px; line-height:1.6; }
.pro-tool .pro-tool-note { margin-top:10px; font-size:13.5px; color:var(--ink); }
.pro-tool-num { font:700 12px var(--font-data,monospace); letter-spacing:.12em; color:var(--accent); }
@media (max-width: 760px) { .pro-tool-grid { grid-template-columns:1fr; } .pro-tools { padding:64px 0; } }