/* =========================================================================
   Creator Tower — UI styles (3D stage + Creedom design system, see UI-UX.md)
   ========================================================================= */
:root{
  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ink:#0b0b0b; --canvas:#f6f6f3; --surface:#fff; --surface-alt:#fafaf7;
  --text-2:#63635d; --text-3:#6b6b63; --hairline:#e8e8e1; --hairline-soft:#efefea;
  --pink:#ff5c8a; --pink-deep:#e64980; --pink-soft:#ffeef3; --pink-wash:#fff6f9; --pink-hairline:#f6dde6;
  --mint:#149a70; --mint-soft:#e8f6f0; --amber:#b97b1e; --amber-soft:#faf1e2; --red:#d8504a; --red-soft:#fbedec;
  --gold:#f6b94b; --gold-deep:#d9971f;
  /* sky (matches the in-scene 3D sky gradient) */
  --sky-1:#a9d1f0; --sky-2:#cfe7fb; --sky-3:#eff7fd;
  --r-pill:999px; --r-cta:16px; --r-card:24px; --r-card-sm:18px; --r-sheet:28px;
  --rest-shadow:0 6px 16px rgba(42,42,32,.08); --raise-shadow:0 3px 8px rgba(42,42,32,.1);
  --float-shadow:0 12px 26px rgba(20,40,80,.14); --hud-shadow:0 6px 20px rgba(30,60,110,.14);
  --s-s:8px; --s-m:12px; --s-l:16px; --s-xl:20px; --s-xxl:28px; --s-3xl:40px; --s-4xl:64px;
  --gutter:clamp(16px,3.5vw,40px); --container:1160px;
  --d-fast:.16s; --d-press:.22s; --d-reveal:.38s;
  --ease-spring:cubic-bezier(.34,1.4,.64,1); --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --t-hero:clamp(1.9rem,4.4vw,3.4rem); --t-display-1:clamp(2rem,4vw,3.2rem); --t-display-2:clamp(1.6rem,2.6vw,2.3rem);
  --t-body:clamp(1rem,1.05vw,1.1rem); --t-tiny:.75rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--canvas); color:var(--ink); font-family:var(--font-sans); font-weight:500;
  font-size:var(--t-body); line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.04; letter-spacing:-.025em; text-wrap:balance; margin:0}
p{margin:0} a{color:inherit; text-decoration:none} ol,ul{margin:0; padding:0; list-style:none} img{max-width:100%}
.container{width:min(var(--container),100% - (var(--gutter) * 2)); margin-inline:auto}
em{font-style:italic} .muted{color:var(--text-3); font-weight:500}
.price{font-family:var(--font-display); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.eyebrow{text-transform:uppercase; letter-spacing:.18em; font-size:var(--t-tiny); font-weight:700; color:var(--text-3); margin:0 0 var(--s-m)}
.eyebrow--pink{color:var(--pink-deep)}
[hidden]{display:none !important}

/* buttons */
.btn{--btn-bg:var(--ink); --btn-fg:#fff; font-family:var(--font-sans); font-weight:700; font-size:.95rem;
  background:var(--btn-bg); color:var(--btn-fg); border:none; cursor:pointer; padding:13px 20px; border-radius:var(--r-cta);
  display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
  transition:transform var(--d-press) var(--ease-spring), box-shadow var(--d-press), background var(--d-fast)}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:3px solid var(--pink); outline-offset:2px}
.btn--primary{--btn-bg:var(--pink); --btn-fg:#fff; box-shadow:0 6px 18px rgba(255,92,138,.35)}
.btn--primary:hover{--btn-bg:var(--pink-deep)}
.btn--dark{--btn-bg:var(--ink); --btn-fg:#fff}
.btn--lg{padding:16px 26px; font-size:1.02rem}
.linklike{background:none; border:none; padding:0; color:var(--pink-deep); font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:2px}

/* nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(244,250,255,.72); backdrop-filter:blur(12px); border-bottom:1px solid rgba(120,160,210,.18)}
.nav__inner{display:flex; align-items:center; gap:var(--s-l); height:60px}
.brand{display:inline-flex; align-items:center; gap:.55em; color:var(--ink)}
.brand__mark{display:grid; place-items:center; width:32px; height:32px}
.brand__mark img{width:100%; height:100%; object-fit:contain; display:block}
.brand__text{font-family:var(--font-display); font-weight:700; font-size:1.12rem; letter-spacing:-.02em}
.brand__sub{color:var(--pink-deep)}
.nav__links{display:flex; gap:var(--s-xl); margin-left:auto; font-weight:600; font-size:.92rem; color:var(--text-2)}
.nav__links a:hover{color:var(--ink)}
.nav__cta{margin-left:var(--s-l)}
@media(max-width:720px){.nav__links{display:none} .nav__cta{margin-left:auto}}

/* ===== 3D APP STAGE ===== */
.app{position:relative; height:100vh; min-height:600px; overflow:hidden}
.sky{position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 50% 8%, var(--sky-3), transparent 60%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 46%, var(--sky-3) 100%)}
.sky::after{content:""; position:absolute; inset:0;
  background:radial-gradient(40% 26% at 78% 26%, rgba(255,255,255,.7), transparent 70%),
             radial-gradient(30% 18% at 20% 66%, rgba(255,255,255,.55), transparent 70%)}
.scene{position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; touch-action:none; cursor:grab}
.scene:active{cursor:grabbing}

/* loader */
.loader{position:absolute; inset:0; z-index:5; display:grid; place-content:center; justify-items:center; gap:14px; text-align:center; padding:24px;
  background:linear-gradient(180deg,var(--sky-1),var(--sky-3)); transition:opacity .5s ease}
.loader.is-done{opacity:0; pointer-events:none}
.loader__brand{font-family:var(--font-display); font-weight:800; font-size:1.6rem}
.loader__msg{color:var(--text-2); max-width:34ch}
.loader__bar{width:min(300px,70vw); height:6px; border-radius:var(--r-pill); background:rgba(255,255,255,.6); overflow:hidden}
.loader__bar i{display:block; height:100%; width:30%; border-radius:inherit; background:linear-gradient(90deg,var(--pink),var(--pink-deep)); animation:load 1.1s var(--ease-out-quart) infinite}
@keyframes load{0%{transform:translateX(-110%)}100%{transform:translateX(400%)}}

/* HUD */
.hud{position:absolute; inset:0; z-index:3; pointer-events:none}
.hud > *{pointer-events:auto}
/* frosted blur where the building passes behind the top text/form (like TopFloor) */
.hud__scrim{position:absolute; top:0; left:0; right:0; height:min(42%,330px); z-index:0; pointer-events:none;
  backdrop-filter:blur(7px) saturate(1.03); -webkit-backdrop-filter:blur(7px) saturate(1.03);
  background:linear-gradient(180deg, rgba(233,244,255,.5) 0%, rgba(233,244,255,.14) 55%, rgba(233,244,255,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%)}
.hud__top{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:min(720px,94vw); z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px}
.app__brand{display:inline-flex; align-items:center; gap:.5em; color:var(--ink)}
.app__brand .brand__mark{display:grid; place-items:center; width:30px; height:30px}
.app__brand .brand__text{font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-.02em}
.app__brand .brand__sub{color:var(--pink-deep)}
.app__title{font-size:var(--t-hero); font-weight:700; display:flex; align-items:center; gap:.35em; flex-wrap:wrap; justify-content:center; color:var(--ink); text-shadow:0 1px 0 rgba(255,255,255,.6)}
.pricestep{display:inline-flex; align-items:center; gap:10px}
.pricestep .price{font-size:1.15em; min-width:2.4em; border-bottom:3px dashed rgba(11,11,11,.28); padding:0 4px; line-height:1.1}
.priceinput{display:inline-flex; align-items:baseline; justify-content:center}
.priceinput__field{border:none; background:none; outline:none; padding:0; margin:0; font:inherit; color:inherit;
  text-align:left; width:1ch; min-width:1ch}
.pricestep .price:focus-within{border-bottom-style:solid; border-bottom-color:var(--pink)}
.pricestep__btn{width:34px; height:34px; border-radius:50%; border:none; background:#fff; box-shadow:var(--hud-shadow); font-size:1.2rem; font-weight:700; cursor:pointer; color:var(--ink)}
.pricestep__btn:hover{background:var(--pink-soft); color:var(--pink-deep)}

/* separated form: three distinct rounded components on ONE line (like TopFloor) */
.claimbar{display:flex; gap:10px; width:100%; max-width:760px; justify-content:center; flex-wrap:nowrap}
.claimfield{display:flex; align-items:center; height:52px; padding:0 15px; background:var(--surface);
  border:1px solid rgba(120,160,210,.22); border-radius:var(--r-cta); box-shadow:var(--float-shadow)}
.claimfield:focus-within{border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-soft), var(--float-shadow)}
.claimfield--handle{flex:1 1 auto; min-width:0; gap:2px}
.claimfield__at{color:var(--text-3); font-weight:700}
.claimfield__input{border:none; outline:none; background:none; font:inherit; font-weight:600; width:100%; min-width:0; padding:10px 4px; color:var(--ink)}
.claimfield--select{flex:0 0 195px}
.claimfield--select select{border:none; background:none; font:inherit; font-weight:600; color:var(--text-2); padding:10px 2px; outline:none; cursor:pointer; width:100%}
.claimbar__go{height:52px; flex:0 0 auto; border-radius:var(--r-cta)}
/* was a translucent pill floating over the building; now quiet text that wakes up when you start claiming */
.app__hint{font-size:.78rem; color:var(--text-3); background:none; padding:2px 0; opacity:.6;
  text-shadow:0 1px 0 rgba(255,255,255,.8); transition:opacity var(--d-fast), color var(--d-fast)}
.claimbar:focus-within + .app__hint{opacity:1; color:var(--text-2)}

/* ---- the sky follows the viewer's clock, so HUD text drawn over it has to follow too.
   Dawn and day are light skies (near-black text is right); dusk and night are dark. ---- */
:root[data-phase="dusk"] .app__title, :root[data-phase="night"] .app__title,
:root[data-phase="dusk"] .app__brand, :root[data-phase="night"] .app__brand{
  color:#f2f6fc; text-shadow:0 1px 3px rgba(6,10,24,.6), 0 2px 20px rgba(6,10,24,.45)}
:root[data-phase="dusk"] .brand__sub, :root[data-phase="night"] .brand__sub{color:var(--pink)}
:root[data-phase="dusk"] .pricestep .price, :root[data-phase="night"] .pricestep .price{border-bottom-color:rgba(255,255,255,.5)}
:root[data-phase="dusk"] .app__hint, :root[data-phase="night"] .app__hint{
  color:rgba(238,245,255,.92); text-shadow:0 1px 3px rgba(6,10,24,.65)}
:root[data-phase="dusk"] .hud__scrim{
  background:linear-gradient(180deg, rgba(32,22,50,.38) 0%, rgba(32,22,50,.12) 55%, rgba(32,22,50,0) 100%)}
:root[data-phase="night"] .hud__scrim{
  background:linear-gradient(180deg, rgba(10,16,34,.52) 0%, rgba(10,16,34,.17) 55%, rgba(10,16,34,0) 100%)}
@media(max-width:640px){
  .claimbar{flex-wrap:wrap}
  .claimfield--handle{flex:1 1 100%}
  .claimfield--select{flex:1 1 auto}
  .claimbar__go{flex:1 1 auto; justify-content:center}
}

/* small hover popover (bottom center) */
.peek{position:fixed; left:50%; bottom:64px; transform:translateX(-50%); z-index:140; display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid rgba(120,160,210,.2); border-radius:var(--r-pill); padding:8px 18px 8px 8px; box-shadow:var(--float-shadow);
  animation:peekIn .18s var(--ease-spring) both; pointer-events:none; max-width:92vw}
.peek[hidden]{display:none}
@keyframes peekIn{from{opacity:0; transform:translateX(-50%) translateY(10px)}to{opacity:1; transform:translateX(-50%) translateY(0)}}
.peek__avatar{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; color:#fff; font-size:.95rem; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.peek__body{display:flex; flex-direction:column; gap:1px; min-width:0}
.peek__top{display:flex; align-items:center; gap:8px}
.peek__top b{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.peek__rank{font-family:var(--font-display); font-weight:800; font-size:.78rem; color:var(--text-2); background:var(--canvas); border-radius:var(--r-pill); padding:1px 9px; flex:none}
.peek__sub{font-size:.76rem; color:var(--text-3); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.peek__amt{font-size:1.35rem; margin-left:6px; flex:none}
@media(max-width:640px){.peek{bottom:112px}}

/* HUD chips (left) */
.hud__left{position:absolute; left:16px; top:150px; display:flex; flex-direction:column; gap:8px; max-width:46vw}
.sprite{display:none}
.ico{width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.chip3d__mascot{width:20px; height:20px; object-fit:contain; flex:none; margin:-2px 0}
a.chip3d{cursor:pointer; transition:transform var(--d-fast), background var(--d-fast)}
a.chip3d:hover{transform:translateY(-1px); background:#fff}
a.chip3d:focus-visible{outline:2px solid var(--pink); outline-offset:2px}
.chip3d{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.92); border:1px solid rgba(120,160,210,.18);
  border-radius:var(--r-pill); padding:8px 14px; font-size:.82rem; font-weight:600; color:var(--text-2); box-shadow:var(--hud-shadow); width:fit-content}
.chip3d b{color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums}
.chip3d__dot{width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(20,154,112,.5); animation:pulse 2s infinite}
.chip3d--brand{color:var(--ink)} .chip3d--brand b{color:var(--pink-deep)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(20,154,112,.5)}70%{box-shadow:0 0 0 8px rgba(20,154,112,0)}100%{box-shadow:0 0 0 0 rgba(20,154,112,0)}}

/* HUD controls (right) */
.hud__right{position:absolute; right:16px; top:150px; display:flex; flex-direction:column; gap:8px}
.ctl{display:inline-flex; align-items:center; gap:6px; justify-content:flex-start; background:rgba(255,255,255,.92); border:1px solid rgba(120,160,210,.18);
  border-radius:var(--r-pill); padding:9px 15px; font:inherit; font-weight:700; font-size:.82rem; color:var(--ink); cursor:pointer; box-shadow:var(--hud-shadow);
  transition:transform var(--d-fast), background var(--d-fast)}
.ctl:hover{transform:translateY(-1px); background:#fff}
.ctl:active{transform:scale(.97)}
.ctl.is-active{background:var(--pink); color:#fff; border-color:var(--pink)}

/* joystick / d-pad (bottom right) — tap = one step, press-and-hold = continuous */
.dpad{position:absolute; right:16px; bottom:20px; display:grid; grid-template-columns:repeat(3,34px); grid-template-rows:repeat(3,34px); gap:4px;
  padding:6px; border-radius:20px; background:rgba(255,255,255,.92); border:1px solid rgba(120,160,210,.18); box-shadow:var(--hud-shadow); touch-action:none}
.dpad__btn{display:grid; place-items:center; background:rgba(255,255,255,.94); border:1px solid rgba(120,160,210,.18); border-radius:11px;
  font:inherit; font-size:.9rem; font-weight:700; line-height:1; color:var(--ink); cursor:pointer; box-shadow:0 1px 2px rgba(16,40,80,.08);
  transition:transform var(--d-fast), background var(--d-fast), color var(--d-fast); -webkit-user-select:none; user-select:none; touch-action:none}
.dpad__btn:hover{background:#fff}
.dpad__btn.is-down,.dpad__btn:active{background:var(--pink); border-color:var(--pink); color:#fff; transform:scale(.93)}
.dpad__btn:focus-visible{outline:2px solid var(--pink); outline-offset:2px}
.dpad__btn--up{grid-area:1/2} .dpad__btn--left{grid-area:2/1} .dpad__btn--right{grid-area:2/3} .dpad__btn--down{grid-area:3/2}
.dpad__hub{grid-area:2/2; place-self:center; width:9px; height:9px; border-radius:50%; background:rgba(120,160,210,.34)}
@media(max-width:640px){
  .hud__left{top:auto; bottom:64px; max-width:52vw}
  .chip3d--opt{display:none}          /* 11 chips overflow a phone — keep the core five + the brand */
  .hud__right{top:auto; bottom:180px; right:10px}
  .ctl,.chip3d{font-size:.72rem; padding:7px 11px}
  .dpad{right:10px; bottom:56px; gap:4px; padding:6px; grid-template-columns:repeat(3,32px); grid-template-rows:repeat(3,32px)}
}

/* HUD ticker */
.hud__ticker{position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:.6em;
  background:rgba(11,11,11,.82); color:#fff; border-radius:var(--r-pill); padding:9px 16px; font-size:.82rem; font-weight:600; max-width:70vw; box-shadow:var(--float-shadow)}
.ticker__dot{width:8px; height:8px; border-radius:50%; background:var(--mint); flex:none; animation:pulse 2s infinite}
#ticker-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media(max-width:640px){.hud__ticker{left:8px; right:8px; max-width:none}}

/* floor tooltip on hover */
.floor-tip{position:fixed; z-index:120; pointer-events:none; background:var(--ink); color:#fff; padding:8px 12px; border-radius:12px;
  font-size:.82rem; font-weight:700; box-shadow:var(--float-shadow); transform:translate(-50%,-140%); white-space:nowrap; opacity:0; transition:opacity var(--d-fast)}
.floor-tip.is-show{opacity:1}
.floor-tip small{display:block; font-weight:600; color:#bdbdb4}

/* ===== FLOOR INFO PANEL ===== */
.fp{position:fixed; top:14px; right:14px; z-index:150; width:min(380px,92vw); max-height:calc(100vh - 28px); overflow:auto;
  background:var(--surface); border:1px solid rgba(120,160,210,.2); border-radius:var(--r-card); box-shadow:var(--float-shadow);
  padding:22px; display:flex; flex-direction:column; gap:12px; animation:fpIn var(--d-reveal) var(--ease-spring) both}
@keyframes fpIn{from{opacity:0; transform:translateX(24px)}to{opacity:1; transform:none}}
.fp[hidden]{display:none}
.fp__close{position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:1px solid var(--hairline); background:var(--surface); cursor:pointer; color:var(--text-2); font-size:.85rem}
.fp__close:hover{background:var(--canvas)}
.fp__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.fp__avatar{width:72px; height:72px; border-radius:18px; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.5rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.fp__rankbadge{font-family:var(--font-display); font-weight:800; font-size:1.15rem; background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:6px 14px; color:var(--ink); font-variant-numeric:tabular-nums}
.fp__name{font-size:1.55rem; margin-top:2px}
.fp__claimed{color:var(--text-2); font-weight:600; margin-top:-6px}
.fp__meta{display:flex; flex-direction:column; gap:8px; padding:10px 0; border-top:1px solid var(--hairline-soft); border-bottom:1px solid var(--hairline-soft)}
.fp__meta li{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.9rem}
.fp__meta span{color:var(--text-3); font-weight:600}
.fp__meta b{font-weight:700; text-align:right}
.fp__about{font-size:.92rem; color:var(--text-2); display:flex; flex-direction:column; gap:4px}
.fp__about span{color:var(--text-3); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em}
.fp__about em{font-style:normal; color:var(--ink); font-weight:500}
.fp__stats{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.fp__stat{background:var(--surface-alt); border:1px solid var(--hairline); border-radius:14px; padding:11px 13px; display:flex; flex-direction:column; gap:2px}
.fp__stat:first-child{grid-column:1 / -1}
.fp__stat small{font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3); font-weight:700}
.fp__stat b{font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--ink); font-variant-numeric:tabular-nums}
.fp__stat span{font-size:.72rem; color:var(--text-3); font-weight:600}
.fp__tags{display:flex; flex-wrap:wrap; gap:6px}
.fp__tag{font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:5px 10px; border-radius:var(--r-pill)}
.fp__tag--brand{background:var(--pink-soft); color:var(--pink-deep)}
.fp__tag--verified{background:var(--mint-soft); color:var(--mint)}
.fp__tag--king{background:#fbf0d8; color:var(--gold-deep)}
.fp__actions{display:flex; flex-direction:column; gap:8px; margin-top:2px}
.fp__actions .btn{justify-content:center}
@media(max-width:640px){
  .fp{top:auto; bottom:0; right:0; left:0; width:100%; max-height:80vh; border-radius:var(--r-sheet) var(--r-sheet) 0 0}
  @keyframes fpIn{from{opacity:0; transform:translateY(28px)}to{opacity:1; transform:none}}
}

/* ===== FUNNEL ===== */
.funnel{background:var(--pink-wash); border-top:1px solid var(--pink-hairline); border-bottom:1px solid var(--pink-hairline); padding:clamp(48px,6vw,88px) 0}
.funnel__inner{display:grid; grid-template-columns:1.3fr .9fr; gap:var(--s-4xl); align-items:center}
.funnel__title{font-size:var(--t-display-1); max-width:16ch} .funnel__title em{color:var(--pink-deep)}
.funnel__sub{margin-top:var(--s-l); color:var(--text-2); max-width:44ch; font-size:1.08rem}
.funnel__actions{margin-top:var(--s-xxl); display:flex; align-items:center; gap:var(--s-l); flex-wrap:wrap}
.funnel__trust{color:var(--text-3); font-size:.82rem; font-weight:600}
.minicard{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card); padding:22px; box-shadow:var(--float-shadow)}
.minicard__row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--hairline-soft); font-weight:600}
.minicard__row .pos{color:var(--mint)}
.minicard__bar{height:8px; background:var(--pink-soft); border-radius:var(--r-pill); margin:16px 0 12px; overflow:hidden}
.minicard__bar i{display:block; height:100%; background:linear-gradient(90deg,var(--pink),var(--pink-deep)); border-radius:inherit}
.minicard__hint{font-family:var(--font-display); font-style:italic; color:var(--text-2); font-size:.95rem}
@media(max-width:760px){.funnel__inner{grid-template-columns:1fr; gap:var(--s-xxl)} .funnel__card{display:none}}

/* ===== HOW ===== */
.how{padding:clamp(48px,6vw,88px) 0}
.how__title{font-size:var(--t-display-1); margin-bottom:var(--s-3xl)}
.how__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-l)}
.how__step{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card); padding:26px; box-shadow:var(--rest-shadow)}
.how__num{font-family:var(--font-display); font-weight:800; color:var(--pink); font-size:1.1rem}
.how__step h3{font-size:1.35rem; margin:14px 0 8px} .how__step p{color:var(--text-2); font-size:.98rem}
@media(max-width:760px){.how__grid{grid-template-columns:1fr}}

/* ===== FOOTER ===== */
.foot{background:var(--ink); color:#e9e9e2; padding:var(--s-3xl) 0}
.foot__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--s-l); flex-wrap:wrap}
.brand--foot .brand__text{color:#fff}
.foot__note{color:#9a9a90; font-size:.8rem}
.foot__links{display:flex; gap:var(--s-l); font-weight:600; font-size:.88rem; color:#c9c9c0}
.foot__links a:hover{color:#fff}

/* ===== MODAL ===== */
.overlay{position:fixed; inset:0; z-index:200; background:rgba(11,11,11,.5); backdrop-filter:blur(4px); display:grid; place-items:end center; animation:fade var(--d-fast) ease both}
.overlay[hidden]{display:none}
@media(min-width:600px){.overlay{place-items:center}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:relative; background:var(--surface); width:min(520px,100%); max-height:94vh; overflow:auto; border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding:28px clamp(20px,4vw,32px) 26px; box-shadow:var(--float-shadow); animation:sheetUp var(--d-reveal) var(--ease-spring) both}
@media(min-width:600px){.sheet{border-radius:var(--r-sheet)}}
@keyframes sheetUp{from{transform:translateY(30px); opacity:.6}to{transform:none; opacity:1}}
.sheet__close{position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid var(--hairline); background:var(--surface); cursor:pointer; color:var(--text-2)}
.sheet__close:hover{background:var(--canvas)}
.sheet__title{font-size:1.5rem; margin-bottom:6px; max-width:22ch}
.stepper{display:flex; align-items:center; justify-content:center; gap:14px; margin:18px 0 8px}
.stepper__btn{width:46px; height:46px; border-radius:50%; border:1px solid var(--hairline); background:var(--surface); font-size:1.4rem; font-weight:700; cursor:pointer; color:var(--ink)}
.stepper__btn:hover{background:var(--pink-soft); border-color:var(--pink-hairline); color:var(--pink-deep)}
.stepper__value{display:flex; align-items:baseline; font-family:var(--font-display); font-weight:800}
.stepper__cur{font-size:1.8rem; color:var(--text-3)}
.stepper__input{width:4ch; border:none; outline:none; font:inherit; font-size:3rem; text-align:center; color:var(--ink); font-variant-numeric:tabular-nums; background:none}
.sheet__hint{text-align:center; color:var(--text-2); font-size:.9rem; margin-bottom:18px} .sheet__hint b{color:var(--pink-deep)}
.field{margin-top:14px; display:flex; flex-direction:column; gap:6px}
.field--2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field label{font-size:.8rem; font-weight:700; color:var(--text-2)}
.field input,.field select,.field__handle{border:1px solid var(--hairline); border-radius:12px; padding:12px 13px; font:inherit; font-weight:600; background:var(--surface); color:var(--ink); outline:none; width:100%}
.field input:focus,.field select:focus,.field__handle:focus-within{border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-soft)}
.field__handle{display:flex; align-items:center; gap:2px; padding:0 13px}
.field__handle span{color:var(--text-3); font-weight:700}
.field__handle input{border:none; padding:12px 4px; box-shadow:none} .field__handle input:focus{box-shadow:none}
.toggle{display:flex; align-items:flex-start; gap:10px; margin-top:16px; cursor:pointer; font-size:.9rem; font-weight:600}
.toggle input{position:absolute; opacity:0}
.toggle__box{width:42px; height:24px; border-radius:var(--r-pill); background:var(--hairline); position:relative; flex:none; transition:background var(--d-fast); margin-top:1px}
.toggle__box::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--raise-shadow); transition:transform var(--d-fast) var(--ease-spring)}
.toggle input:checked + .toggle__box{background:var(--pink)}
.toggle input:checked + .toggle__box::after{transform:translateX(18px)}
.sheet__pay{margin-top:22px; display:flex; align-items:center; gap:14px; padding-top:18px; border-top:1px solid var(--hairline-soft)}
.sheet__paysum{display:flex; flex-direction:column}
.sheet__paysum span{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3); font-weight:700}
.sheet__paysum .price{font-size:1.7rem}
.sheet__paybtn{flex:1; justify-content:center}
/* ---- post-payment verify step ---- */
.eyebrow--mint{color:var(--mint)}
.locked{display:flex; align-items:baseline; justify-content:space-between; gap:12px; background:var(--surface-alt);
  border:1px solid var(--hairline); border-radius:14px; padding:12px 16px}
.locked small{font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--text-3); font-weight:700}
.locked .price{font-size:1.5rem}
.avatarrow{display:flex; align-items:center; gap:12px}
.avatarrow__pic{width:64px; height:64px; flex:none; border-radius:18px; display:grid; place-items:center; overflow:hidden;
  font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:#fff; background:var(--ink)}
.avatarrow__pic img{width:100%; height:100%; object-fit:cover; display:block}
.avatarrow__ctl{display:flex; gap:8px; flex:1; min-width:0}
.avatarrow__ctl input[type=url]{flex:1; min-width:0}
.avatarrow__file{flex:0 0 auto; cursor:pointer; align-self:stretch; display:inline-flex; align-items:center}
.btn--soft{background:var(--canvas); color:var(--ink); border:1px solid var(--hairline)}
.btn--soft:hover{background:var(--surface-alt)}
.sheet__fineprint{margin-top:12px; color:var(--text-3); font-size:.72rem; text-align:center}
.sheet__processing{text-align:center; padding:60px 0; color:var(--text-2); font-weight:600}
.spinner{width:44px; height:44px; border-radius:50%; border:3px solid var(--pink-soft); border-top-color:var(--pink); margin:0 auto 18px; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sheet__success{text-align:center}
.success__badge{font-size:3rem; margin-bottom:8px}
.success__sub{color:var(--text-2); margin-bottom:18px}
.success__card{background:var(--ink); color:#fff; border-radius:var(--r-card); padding:20px; text-align:left; margin-bottom:20px}
.success__actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:14px}
.success__actions .btn{flex:1; justify-content:center; min-width:150px}

/* toast + confetti */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); z-index:300; background:var(--ink); color:#fff; padding:14px 20px; border-radius:var(--r-pill); box-shadow:var(--float-shadow); font-weight:700; font-size:.9rem; opacity:0; transition:all var(--d-reveal) var(--ease-spring); max-width:90vw; text-align:center}
.toast.is-show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast--dethrone{background:linear-gradient(120deg,#d8504a,#e64980)}
.toast .t-em{color:var(--gold)}
.confetti{position:fixed; inset:0; z-index:250; pointer-events:none; width:100%; height:100%}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto}
  .btn:hover,.ctl:hover{transform:none}
}

/* floor-panel report control */
.fp__report{margin-top:12px; text-align:center}
.fp__reportlink{background:none; border:0; color:var(--text-3); font:inherit; font-size:.78rem; font-weight:600; text-decoration:underline; cursor:pointer; padding:4px}
.fp__reportlink:hover{color:var(--ink)}
.fp__reportbox{display:flex; gap:8px; margin-top:8px; align-items:center}
.fp__reportbox[hidden]{display:none}
.fp__reportbox select{flex:1; min-width:0; padding:9px 10px; border-radius:12px; border:1px solid var(--hairline); font:inherit; background:var(--surface)}
.fp__reportbox .btn{white-space:nowrap}
/* T5 credit note in the claim sheet hint */
.hint-credit{color:var(--mint); font-weight:700}

/* ===== mobile HUD pass (overrides earlier 640px rules via cascade) ===== */
.ctl__lbl{display:inline}
@media(max-width:640px){
  /* controls become a compact ICON-ONLY row along the bottom */
  .hud__right{
    top:auto; bottom:50px; left:8px; right:8px;
    flex-direction:row; flex-wrap:nowrap; justify-content:center; gap:6px;
    overflow-x:auto; scrollbar-width:none;
  }
  .hud__right::-webkit-scrollbar{display:none}
  .ctl{flex:0 0 auto; padding:9px; border-radius:14px}
  .ctl .ctl__lbl{display:none}
  .ctl .ico{width:18px; height:18px}
  /* joystick + stats above the control row, in opposite corners */
  .dpad{bottom:102px; right:8px}
  .hud__left{top:auto; bottom:102px; left:8px; max-width:44vw}
  .hud__ticker{bottom:8px; left:8px; right:8px; max-width:none}
}

/* uploaded photo/logo inside the peek popover + floor-panel avatars */
.peek__avatar img, .fp__avatar img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block}

/* verify step: left-align the avatar hint + tighten its spacing (was centered w/ 18px gap) */
#v-avatar-hint{text-align:left; margin:4px 0 0; font-size:.8rem}
.avatarrow{margin-top:2px}
/* "publish without a photo" inline confirm */
.v-noimg{margin-top:14px; background:var(--amber-soft); border:1px solid #eedcae; border-radius:14px; padding:12px 14px}
.v-noimg[hidden]{display:none}
.v-noimg p{font-size:.88rem; color:var(--ink); margin:0 0 10px}
.v-noimg b{color:var(--amber)}
.v-noimg__row{display:flex; gap:8px}
.v-noimg__row .btn{flex:1; justify-content:center; padding:10px 14px; font-size:.9rem}

/* verify step: separate the Save button from the brand-deals toggle above it */
#v-save{margin-top:20px}

/* floor-panel share button (left of the close button) */
.fp__share{position:absolute; top:14px; right:52px; width:32px; height:32px; border-radius:50%; border:1px solid var(--hairline); background:var(--surface); cursor:pointer; color:var(--text-2); display:grid; place-items:center}
.fp__share:hover{background:var(--canvas); color:var(--ink)}
.fp__share:disabled{opacity:.5; cursor:default}