/* LureTester — product page (lure.html). Loaded after tokens.css + site.css. Mobile first, 16px gutters, no horizontal scroll. */
.page-lure { padding-bottom: 96px; }
.page-lure [hidden] { display: none !important; }                      /* room for the sticky order bar */
.lp { overflow-x: clip; }

/* ---------- hero ---------- */
.lp-hero { position: relative; padding-top: calc(var(--nav-h, 64px) + 20px); padding-bottom: 28px; isolation: isolate; }
.lp-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, #081a2c 0%, #061120 45%, var(--bg-0) 100%); }
.lp-hero-bg::before { content: ""; position: absolute; left: 50%; top: 18%; width: 140vmax; height: 140vmax; transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle, rgba(120,200,255,.07) 0 1px, transparent 1px 110px);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.5) 30%, transparent 58%); mask: radial-gradient(circle, #000 0, rgba(0,0,0,.5) 30%, transparent 58%); }
.lp-hero-bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 40% at 70% 30%, rgba(53,224,255,.14), transparent 70%), radial-gradient(35% 30% at 15% 80%, rgba(53,224,255,.07), transparent 70%); }
.lp-hero-in { display: grid; gap: 18px; }
.lp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.lp-tags .eyebrow { margin: 0; }
.lp-untested { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.lp-name { font-size: clamp(2.5rem, 1.6rem + 6vw, 5.6rem); margin-bottom: 14px; max-width: 12ch; }
.lp-tagline { margin-bottom: 18px; }
.lp-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.lp-price { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -0.03em; color: #fff; }
.lp-price-note { color: var(--fg-mute); font-size: .9rem; }

/* stage = the big product viewer, framed like an instrument panel */
.lp-stage { position: relative; aspect-ratio: 1 / 1.08; min-height: 300px; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 60% at 50% 52%, #0e2a45 0%, #071627 55%, #040c17 100%);
  border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.02); }
.lp-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background: repeating-linear-gradient(90deg, transparent 0 59px, rgba(120,200,255,.05) 59px 60px), repeating-linear-gradient(180deg, transparent 0 59px, rgba(120,200,255,.05) 59px 60px);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 20%, transparent 75%); mask: radial-gradient(circle at 50% 50%, #000 20%, transparent 75%); }
.lp-stage canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s var(--ease-out); cursor: grab; touch-action: none; }
.lp-stage canvas:active { cursor: grabbing; }
.lp-stage.is-live canvas { opacity: 1; }
.lp-stage.is-failed::after { content: "3D viewer unavailable in this browser"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-mute); font-family: var(--font-mono); font-size: .8rem; }
.lp-stage-frame { position: absolute; inset: 10px; z-index: 2; pointer-events: none; }
.lp-stage-frame i { position: absolute; width: 14px; height: 14px; border: 1px solid rgba(53,224,255,.55); }
.lp-stage-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.lp-stage-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.lp-stage-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.lp-stage-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.lp-readout { position: absolute; left: 20px; top: 18px; z-index: 2; display: flex; gap: 14px; font-size: .68rem; letter-spacing: .14em; color: var(--fg-mute); pointer-events: none; }
.lp-readout span:first-child { color: var(--accent); }
.lp-hint { position: absolute; right: 20px; top: 18px; z-index: 2; font-size: .64rem; letter-spacing: .1em; color: var(--fg-mute); pointer-events: none; display: none; }
@media (min-width: 640px) { .lp-hint { display: block; } }
.lp-stage-hud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(3,7,13,.75) 70%); pointer-events: none; }
.lp-stage-hud > * { pointer-events: auto; }
.lp-colorways { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-cw { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: rgba(7,19,33,.75);
  color: var(--fg-dim); font-size: .82rem; backdrop-filter: blur(8px); transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur) var(--ease-out); }
.lp-cw:hover { border-color: rgba(53,224,255,.5); color: var(--fg); transform: translateY(-1px); }
.lp-cw[aria-checked="true"] { border-color: var(--accent); color: #fff; box-shadow: 0 0 0 1px rgba(53,224,255,.35), var(--glow); }
.lp-cw-swatch { width: 24px; height: 24px; border-radius: 50%; flex: none; background: linear-gradient(160deg, var(--p) 0 48%, var(--b) 48% 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset -3px -3px 0 var(--t); }
.lp-stage-ctl { display: flex; gap: 8px; }
.lp-ctl { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(7,19,33,.75);
  color: var(--fg-dim); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(8px); transition: border-color var(--dur-fast), color var(--dur-fast); }
.lp-ctl:hover { border-color: rgba(53,224,255,.5); color: var(--fg); }
.lp-ctl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-mute); transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.lp-ctl[aria-pressed="true"] .lp-ctl-dot { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: lpPulse 1.6s ease-in-out infinite; }
@keyframes lpPulse { 50% { opacity: .45; } }
.lp-noscript { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-dim); margin: 0; }

/* first-customer banner */
.lp-first { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-1); font-weight: 600; }
.lp-first-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--fg-mute); }
.lp-first.is-open { color: var(--accent-2); border-color: rgba(124,255,155,.35); background: rgba(124,255,155,.06); }
.lp-first.is-open .lp-first-dot { background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); animation: lpPulse 1.8s ease-in-out infinite; }
.lp-first.is-claimed { color: var(--fg-mute); font-weight: 500; }

@media (min-width: 640px) { .lp-stage { aspect-ratio: 4 / 3.3; } }
@media (min-width: 900px) {
  .lp-hero { padding-top: calc(var(--nav-h, 64px) + 36px); padding-bottom: 48px; }
  .lp-hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; align-items: center; column-gap: 40px; row-gap: 24px; }
  .lp-copy { grid-column: 1; grid-row: 1; }
  .lp-stage { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 4 / 3.4; min-height: 520px; }
  .lp-first { grid-column: 1; grid-row: 2; align-self: start; }
}

/* ---------- specs ---------- */
.lp-specs { padding: 56px 0 24px; }
.lp-section-head { margin-bottom: 24px; }
.lp-section-head h2 { margin-bottom: 0; }
.lp-spec-grid { display: grid; gap: 12px; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-spec { position: relative; margin: 0; padding: 18px 18px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-1), rgba(7,19,33,.55)); overflow: hidden; }
.lp-spec::after { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, rgba(53,224,255,.6), transparent); }
.lp-spec dt { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 10px; }
.lp-spec dd { margin: 0; color: var(--fg); line-height: 1.5; }
.lp-spec.is-wide { grid-column: 1 / -1; }
.lp-big { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); letter-spacing: -0.04em; line-height: 1; color: #fff; }
.lp-unit { margin-left: 8px; color: var(--fg-dim); font-size: .9rem; }
.lp-list li { position: relative; padding-left: 18px; margin: 4px 0; color: var(--fg-dim); }
.lp-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--accent); }
.lp-spec-foot { margin: 12px 0 0; font-size: .82rem; }
.lp-species { gap: 8px; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.lp-species:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.lp-species .arrow { transition: transform var(--dur) var(--ease-out); }
.lp-species:hover .arrow { transform: translateX(3px); }
@media (min-width: 720px) {
  .lp-specs { padding-top: 80px; }
  .lp-spec-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lp-spec { grid-column: span 2; }
  .lp-spec.is-wide { grid-column: span 3; }
}

/* ---------- real life ---------- */
.lp-real { position: relative; padding: 56px 0 72px; }
.lp-real::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, rgba(8,26,44,.6) 30%, rgba(8,26,44,.6) 70%, transparent); }
.lp-real-in { display: grid; gap: 24px; }
.lp-real-copy h2 { margin-bottom: 14px; }
.lp-notice { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid rgba(255,179,71,.45); background: rgba(255,179,71,.07); color: var(--fg-dim); line-height: 1.5; border-left-width: 4px; }
.lp-notice strong { color: var(--signal); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.lp-real-stage { position: relative; aspect-ratio: 4 / 3; min-height: 280px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #04111c; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.lp-real-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s var(--ease-out); touch-action: none; }
.lp-real-stage.is-live canvas { opacity: 1; }
.lp-real-cap { position: absolute; left: 16px; bottom: 14px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(232,243,255,.75); background: rgba(3,7,13,.55); padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(6px); pointer-events: none; }
@media (min-width: 900px) {
  .lp-real { padding: 96px 0; }
  .lp-real-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: 40px; }
  .lp-real-stage { aspect-ratio: 16 / 11; }
}

/* ---------- not found ---------- */
.lp-missing { padding: calc(var(--nav-h, 64px) + 60px) var(--gutter) 80px; }

/* ---------- sticky order bar ---------- */
.lp-orderbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding-bottom: env(safe-area-inset-bottom);
  background: rgba(3,7,13,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line);
  transform: translateY(0); animation: lpBarIn .7s var(--ease-out) both; }
@keyframes lpBarIn { from { transform: translateY(100%); } }
.lp-orderbar-in { display: flex; align-items: center; gap: 12px; min-height: 72px; }
.lp-orderbar-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.lp-orderbar-name { font-family: var(--font-display); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-orderbar-cw { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-orderbar-price { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff; flex: none; }
.lp-order { flex: none; min-height: 48px; padding: 0 22px; font-weight: 700; letter-spacing: .06em; }
@media (min-width: 640px) { .lp-order { min-height: 54px; padding: 0 30px; font-size: 1.05rem; } .lp-orderbar-price { font-size: 1.5rem; margin-right: 8px; } }
/* fallback look if site.css .btn is missing */
.lp-order:not(.btn) { border-radius: 999px; background: var(--accent); color: #04121a; }
.lp-order.btn-primary { box-shadow: 0 10px 30px -10px rgba(53,224,255,.7); }

@media (prefers-reduced-motion: reduce) {
  .lp-orderbar { animation: none; }
  .lp-ctl[aria-pressed="true"] .lp-ctl-dot, .lp-first.is-open .lp-first-dot { animation: none; }
}