/* Recast Me v0.9 — cinematic polish layer */

:root{
  --v09-ink:#070811;
  --v09-deep:#0b0d1a;
  --v09-purple:#8a63ff;
  --v09-blue:#35dcff;
  --v09-pink:#ff4dcc;
  --v09-line:rgba(177,168,255,.22);
}

body{
  background:
    radial-gradient(circle at 9% 2%,rgba(120,72,255,.18),transparent 24%),
    radial-gradient(circle at 95% 6%,rgba(30,204,255,.12),transparent 21%),
    linear-gradient(180deg,#070811 0%,#090a14 39%,#070811 100%)!important;
}

.site-header{
  background:linear-gradient(180deg,rgba(6,7,13,.94),rgba(9,9,17,.84))!important;
  border-bottom:1px solid rgba(157,142,255,.16)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.025) inset;
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(57,218,255,.28),rgba(150,99,255,.32),rgba(255,75,207,.23),transparent);
}
.nav-cta{box-shadow:0 0 0 1px rgba(141,113,255,.11) inset,0 8px 30px rgba(0,0,0,.2)}

/* ---------- HERO ---------- */
.hero{
  isolation:isolate;overflow:hidden;
  max-width:none!important;
  padding-left:max(22px,calc((100vw - 1220px)/2))!important;
  padding-right:max(22px,calc((100vw - 1220px)/2))!important;
  background:
    linear-gradient(100deg,rgba(17,12,39,.76),rgba(18,21,53,.64) 44%,rgba(4,31,48,.55)),
    radial-gradient(circle at 27% 35%,rgba(133,67,255,.23),transparent 34%),
    radial-gradient(circle at 76% 48%,rgba(28,205,255,.16),transparent 30%);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    linear-gradient(125deg,transparent 0 36%,rgba(255,255,255,.025) 36.2% 36.5%,transparent 36.8% 100%),
    linear-gradient(60deg,transparent 0 60%,rgba(140,106,255,.04) 60.2% 60.6%,transparent 61% 100%),
    repeating-linear-gradient(90deg,rgba(129,110,255,.035) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg,rgba(70,200,255,.025) 0 1px,transparent 1px 88px);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 95%);
}
.hero::after{
  content:"";position:absolute;left:-8%;right:-8%;bottom:-90px;height:300px;z-index:-2;
  background:
    radial-gradient(ellipse at 20% 90%,rgba(112,76,255,.2),transparent 50%),
    radial-gradient(ellipse at 82% 85%,rgba(28,210,255,.14),transparent 49%),
    linear-gradient(180deg,transparent,#070811 82%);
  filter:blur(2px);
}
.hero-gridlines{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;background:
  linear-gradient(90deg,transparent 50%,rgba(255,255,255,.025) 50%),
  linear-gradient(0deg,transparent 50%,rgba(255,255,255,.018) 50%);background-size:180px 180px;mask-image:radial-gradient(circle at 50% 55%,#000,transparent 82%)}
.hero-light-streak{position:absolute;height:2px;width:420px;filter:blur(.2px);opacity:.35;z-index:-1;pointer-events:none}
.hero-light-streak-a{right:-80px;top:190px;transform:rotate(-22deg);background:linear-gradient(90deg,transparent,var(--v09-blue),transparent);box-shadow:0 0 24px var(--v09-blue)}
.hero-light-streak-b{left:-120px;bottom:180px;transform:rotate(14deg);background:linear-gradient(90deg,transparent,var(--v09-pink),transparent);box-shadow:0 0 22px var(--v09-pink)}
.hero-copy,.hero-demo{position:relative;z-index:2}
.hero .eyebrow{color:#b8aaff;text-shadow:0 0 24px rgba(134,104,255,.35)}
.hero h1{text-shadow:0 12px 38px rgba(0,0,0,.22)}
.demo-card{
  background:linear-gradient(150deg,rgba(18,19,30,.96),rgba(8,9,15,.98))!important;
  border:1px solid rgba(166,151,255,.26)!important;
  box-shadow:0 30px 85px rgba(0,0,0,.48),0 0 42px rgba(105,75,255,.08)!important;
}
.demo-card-after{box-shadow:0 30px 90px rgba(0,0,0,.48),0 0 54px rgba(48,210,255,.13)!important}
.demo-card img{filter:saturate(1.04) contrast(1.03)}
.recast-bridge span{width:2px!important;box-shadow:0 0 12px rgba(68,213,255,.4)}
.recast-bridge b{font-size:9px!important;color:#c3b8ff!important;text-shadow:0 0 16px rgba(136,99,255,.5)}

/* ---------- WORLD SECTION ---------- */
.worlds{
  max-width:none!important;position:relative;isolation:isolate;overflow:hidden;
  padding-left:max(22px,calc((100vw - 1220px)/2))!important;
  padding-right:max(22px,calc((100vw - 1220px)/2))!important;
  background:
    radial-gradient(circle at 8% 16%,rgba(126,80,255,.18),transparent 30%),
    radial-gradient(circle at 91% 42%,rgba(22,200,255,.11),transparent 29%),
    linear-gradient(180deg,#11122b 0%,#111431 42%,#0a0c19 100%);
}
.worlds::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 15% 28%,rgba(255,83,213,.09),transparent 28%),
    radial-gradient(circle at 82% 68%,rgba(85,113,255,.14),transparent 34%),
    repeating-linear-gradient(90deg,rgba(109,97,173,.038) 0 1px,transparent 1px 100px),
    repeating-linear-gradient(0deg,rgba(57,210,255,.022) 0 1px,transparent 1px 100px);
}
.worlds::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:210px;z-index:-1;background:linear-gradient(180deg,transparent,#080914)
}
.worlds .section-kicker,.worlds .style-grid,.worlds .style-note{position:relative;z-index:2}
.style-grid{gap:18px!important}
.style-card{
  border-color:rgba(160,146,255,.20)!important;
  background:linear-gradient(180deg,#11131f,#0b0c14)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.19);
}
.style-card:hover,.style-card.selected{
  border-color:rgba(129,105,255,.64)!important;
  box-shadow:0 25px 80px rgba(0,0,0,.34),0 0 0 1px rgba(58,215,255,.12) inset,0 0 36px rgba(123,86,255,.10)!important;
}
.style-card .style-art{position:relative}
.style-card .style-art::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(180deg,transparent,rgba(5,6,10,.46));pointer-events:none}
.style-pick{backdrop-filter:blur(14px);border-color:rgba(190,178,255,.25)!important;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.style-note{padding:16px 18px;border:1px solid rgba(135,117,205,.18);border-radius:16px;background:rgba(8,9,17,.45);backdrop-filter:blur(8px);max-width:840px!important}

/* ---------- PROCESS ---------- */
.process{
  max-width:none!important;position:relative;overflow:hidden;isolation:isolate;
  padding-left:max(22px,calc((100vw - 1220px)/2))!important;
  padding-right:max(22px,calc((100vw - 1220px)/2))!important;
  background:
    linear-gradient(180deg,#080914,#0c0d19 45%,#080914),
    radial-gradient(circle at 50% 0,rgba(132,93,255,.12),transparent 45%);
}
.process::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 0 50%,rgba(255,74,210,.06),transparent 32%),radial-gradient(circle at 100% 50%,rgba(44,217,255,.07),transparent 31%)}
.premium-steps{gap:16px!important}
.step-card{
  position:relative;overflow:hidden;padding:16px 16px 24px!important;
  background:linear-gradient(160deg,rgba(20,21,35,.98),rgba(8,9,15,.98))!important;
  border:1px solid rgba(156,143,222,.20)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.2);
}
.step-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 5%,rgba(132,95,255,.12),transparent 33%);pointer-events:none}
.step-card>b{position:absolute;top:16px;left:18px;z-index:4;background:rgba(8,9,15,.72);border:1px solid rgba(152,137,220,.22);border-radius:999px;padding:7px 9px!important;color:#b9aaff!important}
.step-visual{height:190px;border-radius:16px;position:relative;overflow:hidden;margin-bottom:18px;background:linear-gradient(145deg,#17192a,#0a0c14);border:1px solid rgba(136,126,190,.18)}
.upload-visual{display:grid;place-items:center;background:radial-gradient(circle at 50% 44%,rgba(120,83,255,.22),transparent 55%),linear-gradient(145deg,#101220,#090a11)}
.mini-photo{position:absolute;width:112px;height:142px;border-radius:17px;overflow:hidden;border:2px solid rgba(213,207,255,.45);box-shadow:0 16px 34px rgba(0,0,0,.4)}
.mini-photo img{width:100%;height:100%;object-fit:cover}
.mini-photo-back{transform:translate(-28px,10px) rotate(-8deg);opacity:.7}
.mini-photo-front{transform:translate(22px,-4px) rotate(5deg)}
.mini-lock{position:absolute;right:16px;bottom:14px;font-size:8px;font-weight:950;letter-spacing:.17em;color:#d9d1ff;border:1px solid rgba(181,165,255,.25);background:rgba(8,9,15,.68);padding:7px 9px;border-radius:999px;backdrop-filter:blur(9px)}
.world-visual{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px;align-items:center}
.world-visual img{width:100%;height:145px;object-fit:cover;border-radius:12px;border:1px solid rgba(169,155,255,.22);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.world-visual img:nth-child(1){transform:rotate(-4deg) translateY(8px)}.world-visual img:nth-child(2){transform:translateY(-5px);z-index:2}.world-visual img:nth-child(3){transform:rotate(4deg) translateY(8px)}
.preview-mini img{width:100%;height:100%;object-fit:cover;filter:saturate(1.04)}
.preview-mini::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-28deg,transparent 0 32px,rgba(255,255,255,.05) 32px 38px);pointer-events:none}
.preview-mini span{position:absolute;left:12px;right:12px;bottom:12px;text-align:center;padding:8px;border-radius:9px;background:rgba(6,7,12,.72);font-size:8px;font-weight:900;letter-spacing:.16em;color:#fff;backdrop-filter:blur(10px)}
.merch-mini{display:grid;grid-template-columns:1.15fr .9fr .9fr;gap:7px;padding:12px;align-items:center}
.merch-mini img{width:100%;height:145px;object-fit:cover;border-radius:12px;border:1px solid rgba(158,144,230,.18);box-shadow:0 12px 25px rgba(0,0,0,.27)}
.merch-mini img:nth-child(2){transform:translateY(6px)}.merch-mini img:nth-child(3){transform:translateY(-3px)}
.step-card h3{font-size:22px!important}.step-card p{color:#a6a6b7!important}

/* ---------- CREATE / PREVIEW ---------- */
.create-section{position:relative}
.create-card{box-shadow:0 35px 95px rgba(0,0,0,.42),0 0 0 1px rgba(132,113,218,.06) inset!important}
.upload-zone{background:linear-gradient(145deg,#0b0c13,#0a0b11)!important}
.loading{padding:32px!important;background:radial-gradient(circle at 50% 35%,rgba(110,75,255,.18),transparent 40%),rgba(6,7,12,.95)!important}
.loader-orbit{width:72px;height:72px;position:relative;margin-bottom:18px;animation:orbitSpin 4s linear infinite}
.loader-orbit::before{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(159,142,255,.28);box-shadow:0 0 34px rgba(111,75,255,.18)}
.loader-orbit i{position:absolute;width:11px;height:11px;border-radius:50%;box-shadow:0 0 18px currentColor}.loader-orbit i:nth-child(1){top:0;left:31px;background:#36dcff;color:#36dcff}.loader-orbit i:nth-child(2){bottom:7px;left:4px;background:#8f67ff;color:#8f67ff}.loader-orbit i:nth-child(3){bottom:7px;right:4px;background:#ff4fd0;color:#ff4fd0}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.loading p{font-size:20px!important;font-weight:800;margin:0 0 8px!important}.loading small{display:block;max-width:430px;line-height:1.5}
.generation-track{height:5px;width:min(360px,80%);margin:22px auto 10px;border-radius:99px;background:#1c1e2c;overflow:hidden}.generation-track span{display:block;height:100%;width:10%;border-radius:inherit;background:linear-gradient(90deg,#34ddff,#8b66ff,#ff4dcc);transition:width 1.2s ease;box-shadow:0 0 17px rgba(111,96,255,.35)}
.generation-milestones{display:flex;width:min(370px,85%);justify-content:space-between;margin:auto;color:#77778c;font-size:7px;font-weight:900;letter-spacing:.12em}

/* ---------- SHOP ---------- */
.shop-showcase{
  max-width:none!important;position:relative;overflow:hidden;isolation:isolate;
  padding-left:max(22px,calc((100vw - 1220px)/2))!important;
  padding-right:max(22px,calc((100vw - 1220px)/2))!important;
  background:
    radial-gradient(circle at 14% 18%,rgba(128,88,255,.12),transparent 30%),
    radial-gradient(circle at 88% 60%,rgba(30,211,255,.08),transparent 29%),
    linear-gradient(180deg,#090a13,#0b0c18 48%,#070811);
}
.shop-showcase::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 120px);mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent)}
.product-art{height:185px!important;background:#0b0d16!important}
.product-art img{width:100%!important;height:100%!important;object-fit:cover!important;filter:saturate(1.06) contrast(1.02)}
.featured-product .product-art{height:270px!important}
.product{border-color:rgba(153,141,215,.22)!important;background:linear-gradient(160deg,#11131f,#090a11)!important;box-shadow:0 18px 60px rgba(0,0,0,.22)}
.product:hover{box-shadow:0 25px 80px rgba(0,0,0,.34),0 0 36px rgba(115,83,255,.10)!important}
.product-badge{background:rgba(18,18,31,.82)!important;backdrop-filter:blur(8px)}
.shop-card-cta{box-shadow:0 10px 30px rgba(0,0,0,.2)}
.merch-digital-last{background:linear-gradient(145deg,rgba(25,20,40,.76),rgba(10,11,18,.95))!important;border-color:rgba(126,104,185,.28)!important}

/* ---------- PROMISE / POLICY ---------- */
.promise-card{box-shadow:0 30px 90px rgba(0,0,0,.26)}

@media(max-width:980px){
  nav a:not(.nav-cta){display:none!important}
  .premium-steps{grid-template-columns:1fr 1fr!important}
}

@media(max-width:580px){
  .hero{padding-top:58px!important;padding-bottom:70px!important}
  .hero::before{background-size:auto}
  .hero-demo{margin-top:6px}
  .worlds{padding-top:78px!important;padding-bottom:78px!important}
  .style-grid{gap:16px!important}
  .style-card{border-radius:26px!important}
  .style-card .style-art{aspect-ratio:1.45/1!important}
  .process{padding-top:78px!important;padding-bottom:78px!important}
  .premium-steps{grid-template-columns:1fr!important;gap:17px!important}
  .step-card{padding:16px 16px 25px!important;border-radius:26px!important}
  .step-visual{height:220px}
  .mini-photo{width:128px;height:163px}
  .world-visual img{height:175px}
  .merch-mini img{height:176px}
  .featured-product .product-art{height:235px!important}
  .product-art{height:142px!important}
  .product-body{padding:14px!important}
  .product-pitch{font-size:11px!important}
  .generation-milestones{font-size:6.5px}
}

/* =====================================================================
   RECAST ME v1.0 — FINAL CINEMATIC VISUAL SYSTEM
   ===================================================================== */
:root{
  --v10-deep:#050611;
  --v10-ink:#090b18;
  --v10-violet:#7d5cff;
  --v10-cyan:#29d8ff;
  --v10-pink:#ff47cc;
  --v10-glass:rgba(8,10,24,.72);
  --v10-line:rgba(151,137,255,.28);
}
body{
  background:#050611;
}
.site-header{
  background:linear-gradient(180deg,rgba(5,6,17,.95),rgba(5,6,17,.78))!important;
  border-bottom:1px solid rgba(124,101,255,.19)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.22),0 0 30px rgba(77,55,199,.08);
}
.nav-cta{
  border-color:rgba(117,104,255,.6)!important;
  background:linear-gradient(90deg,rgba(130,65,255,.82),rgba(31,172,255,.72))!important;
  box-shadow:0 0 24px rgba(95,79,255,.19);
}

/* Hero now uses the actual approved cinematic environment. */
.hero{
  max-width:none!important;
  min-height:840px!important;
  padding-left:max(22px,calc((100vw - 1220px)/2))!important;
  padding-right:max(22px,calc((100vw - 1220px)/2))!important;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(4,5,15,.76) 0%,rgba(8,8,26,.46) 46%,rgba(5,6,18,.30) 100%),
    linear-gradient(180deg,rgba(5,6,17,.20),rgba(5,6,17,.52)),
    url('/assets/bg-hero-v10.webp') center/cover no-repeat;
  border-bottom:1px solid rgba(123,103,255,.18);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 24% 28%,rgba(129,77,255,.20),transparent 29%),
    radial-gradient(circle at 83% 42%,rgba(34,209,255,.12),transparent 26%),
    linear-gradient(180deg,transparent 62%,rgba(5,6,17,.78));
}
.hero-copy{position:relative;z-index:2;text-shadow:0 3px 28px rgba(0,0,0,.36)}
.hero-lede{color:#d1d0dc!important;max-width:660px!important}
.hero-actions .button.primary{
  color:white!important;
  border:1px solid rgba(255,255,255,.26)!important;
  background:linear-gradient(90deg,#b43cff,#4f59ff 52%,#1ccfff)!important;
  box-shadow:0 10px 35px rgba(82,55,255,.32),0 0 30px rgba(255,73,214,.10)!important;
}
.hero-actions .button.ghost{background:rgba(7,8,18,.67)!important;backdrop-filter:blur(14px);border-color:rgba(190,181,255,.25)!important}
.trust-row span{background:rgba(7,8,18,.58)!important;backdrop-filter:blur(12px);border-color:rgba(154,143,214,.23)!important;color:#d0cfdb!important}
.hero-demo{padding:16px;border-radius:34px;background:rgba(8,9,23,.26);backdrop-filter:blur(3px);box-shadow:0 40px 100px rgba(0,0,0,.18)}
.demo-card{border-color:rgba(140,122,255,.42)!important;background:rgba(8,9,20,.77)!important;box-shadow:0 34px 80px rgba(0,0,0,.50),0 0 35px rgba(74,71,255,.11)!important}
.demo-card-after{border-color:rgba(48,211,255,.45)!important;box-shadow:0 34px 90px rgba(0,0,0,.48),0 0 38px rgba(50,205,255,.12)!important}
.recast-bridge span{width:2px!important;box-shadow:0 0 18px #6c6cff}
.recast-bridge b{color:#d5cbff!important;text-shadow:0 0 12px #735eff}

/* World selector has its own rich portal landscape rather than a flat panel. */
.worlds{
  background:
    linear-gradient(180deg,rgba(7,8,23,.32),rgba(6,7,20,.72) 24%,rgba(5,6,16,.88) 88%),
    url('/assets/bg-worlds-v10.webp') center top/cover no-repeat!important;
  background-attachment:scroll!important;
  border-top:1px solid rgba(91,89,238,.18);
  border-bottom:1px solid rgba(114,88,220,.17);
}
.worlds::before{
  background:
    linear-gradient(180deg,rgba(5,6,17,.12),rgba(5,6,17,.36)),
    radial-gradient(circle at 48% 10%,rgba(116,88,255,.15),transparent 42%)!important;
}
.worlds .section-kicker{padding:26px;border:1px solid rgba(143,127,232,.16);border-radius:28px;background:rgba(5,6,17,.44);backdrop-filter:blur(12px);box-shadow:0 24px 70px rgba(0,0,0,.22)}
.style-card{backdrop-filter:blur(10px);background:linear-gradient(180deg,rgba(16,18,36,.94),rgba(7,8,17,.97))!important}
.style-card .style-art{aspect-ratio:1.34/1!important}
.style-copy h3{font-size:24px!important}
.style-pick{background:linear-gradient(90deg,rgba(139,66,255,.80),rgba(37,174,255,.78))!important;border-color:rgba(255,255,255,.22)!important;color:white!important}
.style-card.selected{outline:2px solid rgba(47,215,255,.50);outline-offset:2px}

/* Process section now looks like a premium illuminated gallery, not generic cards. */
.process{
  background:
    linear-gradient(180deg,rgba(5,6,17,.52),rgba(5,6,17,.80)),
    url('/assets/bg-process-v10.webp') center/cover no-repeat!important;
}
.process::before{background:radial-gradient(circle at 50% 45%,rgba(122,77,255,.10),transparent 54%)!important}
.process .section-heading{padding:24px 26px;border-radius:24px;background:rgba(5,6,16,.56);backdrop-filter:blur(14px);border:1px solid rgba(151,137,255,.16)}
.step-card{backdrop-filter:blur(15px);background:linear-gradient(160deg,rgba(13,15,34,.89),rgba(7,8,18,.94))!important;border-color:rgba(154,143,255,.27)!important;box-shadow:0 30px 85px rgba(0,0,0,.34)!important}
.step-card:hover{transform:translateY(-4px);box-shadow:0 36px 95px rgba(0,0,0,.42),0 0 35px rgba(102,71,255,.09)!important}
.step-visual{border-color:rgba(119,115,255,.28)!important;box-shadow:inset 0 0 34px rgba(74,59,185,.08)}

/* Create form blends into the same universe and feels like a product, not a form. */
.create-section{
  max-width:none!important;padding-left:max(22px,calc((100vw - 1220px)/2))!important;padding-right:max(22px,calc((100vw - 1220px)/2))!important;
  background:linear-gradient(180deg,#060711,#08091a 45%,#060711);
}
.create-intro{padding:34px!important;border-radius:30px;background:radial-gradient(circle at 5% 8%,rgba(130,86,255,.16),transparent 35%),rgba(11,12,27,.62);border:1px solid rgba(134,118,221,.17);backdrop-filter:blur(10px)}
.create-card{background:linear-gradient(155deg,rgba(20,21,43,.96),rgba(7,8,18,.97))!important;border-color:rgba(144,129,225,.28)!important}
input,select,textarea{background:rgba(5,6,15,.78)!important;border-color:rgba(135,122,203,.28)!important}
#generate-button{background:linear-gradient(90deg,#a73cff,#5555ff 48%,#20cfff)!important;color:white!important;box-shadow:0 10px 38px rgba(82,58,255,.30)!important}

/* Preview/product purchasing stage */
.preview-section{
  max-width:none!important;padding-left:max(22px,calc((100vw - 1220px)/2))!important;padding-right:max(22px,calc((100vw - 1220px)/2))!important;
  background:radial-gradient(circle at 12% 5%,rgba(115,75,255,.13),transparent 31%),linear-gradient(180deg,#070815,#050611);
}
.preview-frame{border-color:rgba(126,113,224,.36)!important;box-shadow:0 40px 110px rgba(0,0,0,.50),0 0 40px rgba(83,57,255,.10)!important}
.callout{background:rgba(13,14,31,.78)!important;border-color:rgba(141,124,227,.24)!important}

/* Shop uses the dark sci-fi showroom environment. */
.shop-showcase{
  background:
    linear-gradient(180deg,rgba(5,6,16,.57),rgba(5,6,16,.84)),
    url('/assets/bg-shop-v10.webp') center/cover no-repeat!important;
}
.shop-showcase::before{background:radial-gradient(circle at 50% 15%,rgba(123,87,255,.13),transparent 40%)!important}
.shop-showcase .section-kicker{padding:28px;border-radius:28px;background:rgba(5,6,17,.56);border:1px solid rgba(146,128,231,.20);backdrop-filter:blur(13px)}
.product{border-color:rgba(145,128,235,.30)!important;background:linear-gradient(160deg,rgba(14,16,34,.96),rgba(7,8,17,.98))!important}
.product-art{height:210px!important;background:#080a15!important}
.featured-product .product-art{height:310px!important}
.product-art img{object-fit:cover!important}
.product-badge{color:#ded6ff!important;border-color:rgba(154,129,255,.37)!important}
.shop-card-cta{background:linear-gradient(90deg,#a93fff,#5458ff 48%,#22cdfd)!important;border:0!important;color:white!important;box-shadow:0 9px 25px rgba(69,58,255,.23)!important}
.merch-digital-last{background:linear-gradient(150deg,rgba(22,18,47,.86),rgba(8,9,20,.95))!important;backdrop-filter:blur(12px)}

/* Final promise/CTA continues the cinematic backdrop. */
.promise{max-width:none!important;padding-left:max(22px,calc((100vw - 1220px)/2))!important;padding-right:max(22px,calc((100vw - 1220px)/2))!important;background:linear-gradient(180deg,#050611,#08091a)}
.promise-card{background:linear-gradient(145deg,rgba(18,19,43,.92),rgba(7,8,18,.96))!important;border-color:rgba(143,126,229,.26)!important}
footer{background:#050611;max-width:none!important;padding-left:max(22px,calc((100vw - 1220px)/2))!important;padding-right:max(22px,calc((100vw - 1220px)/2))!important}

/* Real product mockup action */
.product-preview-action{margin-top:9px;width:100%;min-height:42px;border-radius:12px;border:1px solid rgba(119,103,213,.35);background:rgba(13,15,31,.82);color:#d8d6e8;font-weight:800;cursor:pointer}
.product-preview-action:hover{border-color:rgba(48,211,255,.52);color:white}
.product-preview-action[disabled]{opacity:.55;cursor:wait}
.product-mockup-note{font-size:10px;color:#8f8fa4;margin:8px 0 0;line-height:1.4}

/* Inline errors replace raw browser/provider alerts. */
.recast-error{display:none;margin:14px 0 0;padding:13px 15px;border-radius:14px;border:1px solid rgba(255,111,153,.30);background:rgba(57,14,34,.48);color:#ffd7e5;font-size:12px;line-height:1.5}
.recast-error.show{display:block}

@media(max-width:980px){
  .hero{min-height:auto!important;background-position:64% center!important}
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,5,15,.20),rgba(5,6,17,.48))}
}
@media(max-width:580px){
  .hero{background-position:69% center!important;padding-top:54px!important}
  .hero-copy{padding:22px 18px;border-radius:28px;background:linear-gradient(180deg,rgba(6,7,18,.38),rgba(6,7,18,.18));backdrop-filter:blur(3px)}
  .hero-demo{padding:8px!important;background:rgba(7,8,18,.30)}
  .worlds{background-position:center top!important}
  .worlds .section-kicker{padding:19px}
  .process{background-position:center!important}
  .shop-showcase{background-position:center!important}
  .featured-product .product-art{height:290px!important}
  .product-art{height:175px!important}
}
.recast-error{margin-top:13px;padding:13px 15px;border-radius:14px;border:1px solid rgba(255,103,128,.35);background:linear-gradient(135deg,rgba(68,17,36,.78),rgba(25,12,28,.84));color:#ffc0ca;font-size:13px;line-height:1.48;box-shadow:0 12px 35px rgba(0,0,0,.18)}
.order-status-link{margin-top:18px;width:100%}
.turnstile-container{margin:13px 0 4px;min-height:65px;display:flex;justify-content:center}.turnstile-container.hidden{display:none!important}


/* v1.0.1 — generation failure stays visible instead of disappearing */
.preview-error{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;background:radial-gradient(circle at 50% 35%,rgba(255,77,190,.13),transparent 36%),radial-gradient(circle at 46% 42%,rgba(66,213,255,.10),transparent 45%),rgba(5,6,14,.97)}
.preview-error.hidden{display:none!important}
.preview-error-orb{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;border:1px solid rgba(255,114,185,.42);background:linear-gradient(145deg,rgba(255,70,177,.15),rgba(78,57,255,.17));font-size:26px;font-weight:950;color:#ff8ec9;box-shadow:0 0 42px rgba(255,70,177,.16)}
.preview-error h3{font-size:clamp(24px,3vw,34px);letter-spacing:-.04em;margin:0 0 10px}
.preview-error p{max-width:520px;margin:0;color:#a7a8ba;line-height:1.58;font-size:14px}
.preview-error-reference{display:block;margin-top:13px;color:#777a94;font-size:10px;letter-spacing:.08em}
.preview-error-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.preview-error-actions .button{min-width:155px}
@media(max-width:580px){.preview-error{padding:24px 18px}.preview-error-actions{width:100%}.preview-error-actions .button{flex:1;min-width:0}.preview-frame{min-height:560px}}


/* v1.0.2 — second-attempt resilience */
.preview-emergency-error{
  position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:28px;
  background:rgba(5,6,14,.98);color:#fff
}
.preview-emergency-error strong{font-size:25px;margin-bottom:9px}
.preview-emergency-error p{max-width:500px;color:#a9aabd;line-height:1.55}
.preview-emergency-error button{
  margin-top:16px;min-height:48px;padding:0 22px;border:0;border-radius:14px;
  background:linear-gradient(90deg,#a93fff,#5f5bff,#27cff8);color:white;font-weight:900
}
#keep-last-preview.hidden{display:none!important}


/* v1.1 — explicit quality modes + mobile preview containment */
.quality-picker{
  margin:18px 0 14px;padding:0;border:0;display:grid;gap:10px
}
.quality-picker legend{
  padding:0;margin:0 0 4px;color:#f3f2ff;font-size:13px;font-weight:900
}
.quality-choice{
  position:relative;display:grid!important;grid-template-columns:auto 1fr;align-items:center;
  gap:12px;padding:15px 16px!important;border:1px solid rgba(135,126,194,.30);
  border-radius:17px;background:linear-gradient(145deg,rgba(13,14,27,.94),rgba(9,10,19,.98));
  cursor:pointer;transition:.2s ease
}
.quality-choice:hover{border-color:rgba(91,210,255,.48)}
.quality-choice.selected{
  border-color:rgba(63,215,255,.76);
  box-shadow:0 0 0 1px rgba(151,74,255,.38) inset,0 10px 34px rgba(61,74,255,.17),0 0 28px rgba(40,204,255,.08)
}
.quality-choice input{position:absolute;opacity:0;pointer-events:none}
.quality-radio{
  width:19px;height:19px;border-radius:50%;border:2px solid #777892;display:block;position:relative
}
.quality-choice.selected .quality-radio{border-color:#45d8ff}
.quality-choice.selected .quality-radio::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(135deg,#9b48ff,#34d7ff);
  box-shadow:0 0 14px rgba(72,208,255,.48)
}
.quality-choice-copy{display:grid;gap:5px}
.quality-choice-copy strong{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#fff;font-size:14px}
.quality-choice-copy strong em{
  font-style:normal;font-size:8px;letter-spacing:.12em;padding:5px 7px;border-radius:999px;
  background:linear-gradient(90deg,#a744ff,#4a64ff,#31cff7);color:#fff
}
.quality-choice-copy small{color:#8f90a6;font-size:11px;line-height:1.45;font-weight:500}
#switch-quality-generation{border-color:rgba(78,197,255,.35)}
.preview-frame,.preview-layout{min-width:0;max-width:100%}
.preview-frame canvas{
  display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important
}

@media(max-width:580px){
  .preview-section{overflow:hidden!important}
  .preview-layout{width:100%!important;min-width:0!important}
  .preview-frame{
    width:100%!important;max-width:100%!important;min-width:0!important;
    aspect-ratio:4/5!important;min-height:0!important
  }
  .preview-frame canvas{
    width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important
  }
  .quality-choice{padding:14px!important}
  .quality-choice-copy strong{font-size:13px}
  .quality-choice-copy small{font-size:10px}
  .preview-error-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .preview-error-actions .button{width:100%!important}
}


/* v1.2 — pets, custom worlds, and recent versions */
.custom-world-field{margin-top:12px}
.custom-world-field[hidden]{display:none!important}
.custom-world-field small,#recast-form>label>small{color:#808195;font-size:10px;font-weight:500;line-height:1.45}
.optional-label{font-size:8px;letter-spacing:.13em;color:#8789a2;margin-left:5px}
.branch-note{
  margin:12px 0;padding:13px 14px;border:1px solid rgba(82,210,255,.30);border-radius:15px;
  background:rgba(11,19,37,.82);display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center
}
.branch-note strong{color:#fff;font-size:12px}.branch-note span{color:#8e90a7;font-size:10px;line-height:1.45}
.branch-note button{grid-column:2;grid-row:1/3;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#151624;color:#fff;padding:8px 10px}

.recent-versions-shell{
  margin-top:28px;padding:24px;border:1px solid rgba(141,123,230,.24);border-radius:26px;
  background:
    radial-gradient(circle at 8% 15%,rgba(99,71,255,.11),transparent 27%),
    linear-gradient(155deg,rgba(12,13,29,.94),rgba(6,7,16,.98))
}
.recent-versions-heading{display:flex;justify-content:space-between;gap:22px;align-items:end;margin-bottom:16px}
.recent-versions-heading h3{font-size:30px;letter-spacing:-.045em;margin:0 0 6px}
.recent-versions-heading p{margin:0;color:#9091a5;font-size:12px;line-height:1.5;max-width:650px}
.recent-versions-heading>span{font-size:8px;font-weight:950;letter-spacing:.15em;color:#7ce4ff;white-space:nowrap}
.recent-versions-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.recent-version-card{
  overflow:hidden;border:1px solid rgba(122,112,186,.28);border-radius:18px;background:#0b0c16;
  transition:.2s ease
}
.recent-version-card.active{border-color:rgba(54,218,255,.64);box-shadow:0 0 0 1px rgba(164,75,255,.25) inset,0 12px 36px rgba(39,76,255,.12)}
.recent-version-image{aspect-ratio:4/5;position:relative;background:#080912;overflow:hidden}
.recent-version-image img{width:100%;height:100%;object-fit:cover;display:block}
.recent-version-loading{position:absolute;inset:0;display:grid;place-items:center;color:#797b92;font-size:10px}
.recent-version-copy{padding:12px 12px 9px}
.recent-version-copy span{font-size:7px;font-weight:950;letter-spacing:.16em;color:#8c85b0}
.recent-version-copy strong{display:block;margin:5px 0 3px;font-size:15px}
.recent-version-copy small{color:#7e8094;font-size:9px}
.recent-version-actions{display:grid;gap:7px;padding:0 10px 11px}
.recent-version-actions button{
  min-height:36px;border-radius:10px;border:1px solid rgba(128,121,180,.28);
  background:#141522;color:#fff;font-size:9px;font-weight:850
}
.recent-version-actions button:first-child{background:linear-gradient(90deg,#9d40ff,#4d62ff,#25cffa);border:0}

@media(max-width:850px){
  .recent-versions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:580px){
  .recent-versions-shell{padding:16px 13px;margin-top:20px}
  .recent-versions-heading{display:block}
  .recent-versions-heading>span{display:block;margin-top:10px}
  .recent-versions-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .recent-version-copy strong{font-size:13px}
  .recent-version-actions button{font-size:8px;padding:0 6px}
}


/* v1.3 — gift/use-case focus + 8x10 desk frame */
.idea-section{
  max-width:none!important;
  padding-left:max(22px,calc((100vw - 1220px)/2))!important;
  padding-right:max(22px,calc((100vw - 1220px)/2))!important;
  background:
    radial-gradient(circle at 12% 0,rgba(108,70,255,.13),transparent 31%),
    radial-gradient(circle at 92% 18%,rgba(33,209,255,.08),transparent 28%),
    linear-gradient(180deg,#070812,#080917 58%,#070811);
}
.idea-heading{margin-bottom:24px}
.idea-layout{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch}
.idea-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.idea-card{
  appearance:none;text-align:left;color:#fff;border:1px solid rgba(139,124,220,.25);
  border-radius:20px;padding:20px;min-height:190px;cursor:pointer;
  background:
    radial-gradient(circle at 85% 15%,rgba(255,77,208,.10),transparent 32%),
    radial-gradient(circle at 8% 92%,rgba(43,211,255,.08),transparent 34%),
    linear-gradient(155deg,rgba(16,17,35,.97),rgba(8,9,18,.99));
  transition:.2s ease;box-shadow:0 20px 55px rgba(0,0,0,.20)
}
.idea-card:hover{transform:translateY(-3px);border-color:rgba(78,207,255,.47);box-shadow:0 24px 70px rgba(0,0,0,.28)}
.idea-card>span{display:block;color:#8ce7ff;font-size:8px;font-weight:950;letter-spacing:.18em;margin-bottom:9px}
.idea-card>strong{display:block;font-size:22px;line-height:1.05;letter-spacing:-.035em;margin-bottom:9px}
.idea-card p{margin:0;color:#9495aa;font-size:11px;line-height:1.52}
.idea-card em{display:block;margin-top:18px;color:#d5d0ff;font-size:10px;font-style:normal;font-weight:900}

.desk-frame-spotlight{
  border:1px solid rgba(159,135,235,.28);border-radius:23px;overflow:hidden;
  background:linear-gradient(155deg,#111323,#080913);
  box-shadow:0 30px 80px rgba(0,0,0,.33)
}
.desk-frame-art{height:370px;overflow:hidden;background:#090a11}
.desk-frame-art img{width:100%;height:100%;object-fit:cover;display:block}
.desk-frame-copy{padding:19px 20px 21px}
.desk-frame-copy>span{display:block;color:#72e5ff;font-size:8px;font-weight:950;letter-spacing:.18em;margin-bottom:7px}
.desk-frame-copy h3{font-size:28px;letter-spacing:-.04em;margin:0 0 7px}
.desk-frame-copy p{color:#9697aa;font-size:12px;line-height:1.52;margin:0}
.desk-frame-copy>strong{display:block;font-size:24px;margin:15px 0 11px}
.desk-frame-copy a{
  display:flex;align-items:center;justify-content:space-between;text-decoration:none;min-height:47px;
  border-radius:13px;padding:0 15px;color:#fff;font-size:11px;font-weight:900;
  background:linear-gradient(90deg,#a540ff,#585fff,#27cff7);
  box-shadow:0 10px 30px rgba(77,70,255,.20)
}

@media(max-width:900px){
  .idea-layout{grid-template-columns:1fr}
  .desk-frame-spotlight{display:grid;grid-template-columns:.95fr 1.05fr}
  .desk-frame-art{height:100%;min-height:290px}
  .desk-frame-copy{display:flex;flex-direction:column;justify-content:center}
}
@media(max-width:580px){
  .idea-section{padding-top:52px!important;padding-bottom:52px!important}
  .idea-grid{grid-template-columns:1fr 1fr;gap:9px}
  .idea-card{padding:15px;min-height:185px}
  .idea-card>strong{font-size:17px}
  .idea-card p{font-size:10px}
  .desk-frame-spotlight{display:block}
  .desk-frame-art{height:300px}
  .desk-frame-copy h3{font-size:25px}
}

/* v1.6: two distinct creative decisions, one clear path */
.creative-step{min-width:0;margin:0 0 28px;padding:24px;border:1px solid #445278;border-radius:20px;background:linear-gradient(145deg,#101c30,#0c0b1b)}
.creative-step legend{padding:0 8px;font-size:23px;font-weight:800;color:#fff;letter-spacing:-.025em}
.creative-step legend span{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:8px;border:1px solid #65d9f1;border-radius:50%;font-size:15px;color:#65d9f1}
.creative-step>p{color:#a6aec5;font-size:14px;margin:4px 0 20px;line-height:1.5}
.creative-step label{display:block;margin-top:18px}
.creative-step textarea{min-height:118px}
.environment-step{border-color:#655083;background:linear-gradient(145deg,#20142e,#0c0b1b)}
.environment-step legend span{border-color:#bb8eff;color:#bb8eff}
.generation-milestones{display:none}
.loading .generation-track span{animation:recast-pulse 1.6s ease-in-out infinite}
@keyframes recast-pulse{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.loading .generation-track span{animation:none}}
@media(max-width:600px){.creative-step{padding:18px 14px}.creative-step legend{font-size:20px}.hero h1{font-size:clamp(42px,10vw,64px)}}

/* v1.7: readable before/after and honest product examples */
section[id]{scroll-margin-top:110px}
.hero-demo .demo-card img{aspect-ratio:4/5;object-fit:cover}
.demo-card:first-child img{filter:none}
.product-art{position:relative}
.example-design-label{position:absolute;left:10px;bottom:10px;padding:5px 8px;border-radius:7px;background:rgba(8,9,20,.82);color:#fff;font-size:10px;line-height:1.3}
@media(max-width:600px){section[id]{scroll-margin-top:95px}.demo-meta{padding:10px 3px}.demo-meta b{font-size:10px}}
.hero-demo-note{grid-column:1/-1;color:#bbb6cd;font-size:11px;line-height:1.5;text-align:center;margin:12px 0 0}

/* One merchandise catalog, before and after generation. */
#product-grid.merch-catalog-shell{display:block}
#product-grid.checkout-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
#product-grid.checkout-catalog .product{display:flex;flex-direction:column;min-width:0}
#product-grid.checkout-catalog .product-art{height:auto;aspect-ratio:4/3}
#product-grid.checkout-catalog .product-body{flex:1;display:flex;flex-direction:column}
#product-grid.checkout-catalog .recast-buy{margin-top:auto;background:linear-gradient(110deg,#a53cff,#24c5ea);color:white;border:0;min-height:48px}
#product-grid.checkout-catalog .recast-variant{width:100%;min-width:0;margin-top:14px}
#product-grid.checkout-catalog .product-mockup-note{font-size:12px;color:#aaa6bd}
#product-grid.checkout-catalog .product-loading{grid-column:1/-1}
@media(max-width:580px){#product-grid.checkout-catalog{grid-template-columns:1fr}}

/* World thumbnails preserve the complete composition on every screen. */
.style-card .style-art{aspect-ratio:4/3!important}
.style-card .style-art img{object-fit:contain!important;object-position:center;transform:none!important}

/* v1.9: complete images and a simpler creation flow. */
html{scroll-padding-top:100px}
section[id]{scroll-margin-top:100px}
.hero-demo .demo-card img,.preview-mini img,.world-visual img,.mini-photo img,.merch-mini img,.recent-version-image img{object-fit:contain!important;background:#090a17}
.preview-mini{padding:12px 12px 46px}
#shop .product-art{height:auto!important;aspect-ratio:4/3}
#shop .product-art img{object-fit:contain!important;transform:none!important}
.photo-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.upload-zone:focus-within{outline:3px solid #64dafa;outline-offset:4px}
.photo-thumbnails{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 24px}
.photo-thumbnail{min-width:0;border:1px solid #46405d;border-radius:12px;overflow:hidden;background:#0c0c19}
.photo-thumbnail img{width:100%;height:90px;object-fit:contain;display:block}
.photo-thumbnail button{width:100%;border:0;padding:10px 4px;color:#eee;background:#252139;cursor:pointer}
#surprise-world{margin-top:10px;min-height:44px}
#world-choice-feedback{display:block;margin-top:8px;color:#91dfeb}
:focus-visible{outline:3px solid #62dafa;outline-offset:4px}
@media(max-width:580px){.merch-secondary-grid,.merch-digital-grid{grid-template-columns:1fr!important}.photo-thumbnails{grid-template-columns:repeat(2,minmax(0,1fr))}.quality-choice{min-height:64px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.world-visual img,.merch-mini img{height:auto!important;aspect-ratio:4/3}
@media(max-width:580px){.create-intro{padding:24px!important}.create-intro h2{font-size:38px!important}.create-intro .privacy-card{margin-top:18px;padding-top:0}.create-intro .privacy-card p{font-size:13px}.photo-thumbnail img{height:110px}}


/* RM-010 render readiness status */
.quality-dot[data-state="ready"]{background:#5ee58c!important;box-shadow:0 0 12px rgba(94,229,140,.55)!important}
.quality-dot[data-state="waiting"]{background:#ffb84d!important;box-shadow:0 0 12px rgba(255,184,77,.55)!important}
.quality-dot[data-state="error"]{background:#ff5575!important;box-shadow:0 0 12px rgba(255,85,117,.55)!important}

/* Launch polish: device safe areas, honest waiting state and accessible export. */
[hidden]{display:none!important}
.skip-link{position:fixed;top:-100px;left:16px;z-index:100;padding:14px 20px;border-radius:12px;background:#fff;color:#121020}
.skip-link:focus{top:12px}
.generation-wait-note{font-size:12px!important;line-height:1.5;color:#bdb6d7;margin:12px 24px!important}
.preview-info .button{width:100%;white-space:normal;text-align:center;line-height:1.4;padding:14px 20px}
#preview-export-status{color:#c4bddb;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.consent a{color:#92dfff;text-underline-offset:3px}
body{padding-bottom:env(safe-area-inset-bottom)}
.site-header{padding-top:max(14px,env(safe-area-inset-top))}
@media(max-width:520px){.site-header .brand{gap:8px}.site-header .nav-cta{font-size:13px;padding:12px 14px}.quality-choice strong{line-height:1.45}.quality-choice strong em{display:inline-block}.consent{line-height:1.6}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* RM-017: conditional quality fallback, with native hidden semantics. */
#quality-fallback[hidden], #quality-fallback [hidden], input[name="qualityMode"][hidden]{display:none!important}
#quality-fallback{padding:18px;border:1px solid #76649a;border-radius:18px;background:#151329;margin:16px 0;line-height:1.5}
#quality-fallback .button{margin:6px 8px 6px 0;white-space:normal}
#quality-fallback a{display:block;margin-top:12px;color:#a8e5fc}
/* RM-018 guided creation: preserve fields while showing one step at a time. */
[data-create-step][hidden],#family-count-label[hidden],.native-subject[hidden],#custom-world-field[hidden]{display:none!important}
.creation-progress{display:flex;gap:6px;margin-bottom:24px}
.creation-progress button{flex:1;min-width:0;padding:12px 5px;background:#171329;border:1px solid #494061;border-radius:12px;color:#cbc4e4;font:inherit;font-size:13px;cursor:pointer}
.creation-progress [aria-current="step"]{border-color:#76dff1;color:white;background:#33234f}
.subject-choices,.adventure-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.subject-choices button,.adventure-choices button{min-width:0;overflow:hidden;border:2px solid #4a4265;border-radius:16px;background:#151124;color:#f9f6ff;font:inherit;cursor:pointer}
.subject-choices button{padding:18px 10px}
.subject-choices [aria-pressed="true"],.adventure-choices [aria-pressed="true"]{border-color:#72deef;background:#2d2250}
.adventure-choices img{display:block;width:100%;height:150px;object-fit:contain;background:#100d1c}
.adventure-choices button{padding:0}
.adventure-choices strong{display:flex;align-items:center;justify-content:center;min-height:60px;padding:10px 6px;font-size:14px;line-height:1.3}
.checkout-error{color:#ffcca1;line-height:1.5}
.wizard-actions{display:flex;gap:12px;justify-content:space-between;margin-top:22px;flex-wrap:wrap}
.photo-tip{font-size:14px;color:#beb6d0}.reference-label{display:block;padding:10px;font-size:13px}.reference-label select{width:100%;min-width:0;font-size:14px}
#photo-step-error{color:#ffcca1}#personal-details{margin:20px 0;padding:16px;border:1px solid #4a4265;border-radius:16px}#personal-details summary{cursor:pointer;font-weight:700}#personal-details label{margin-top:16px}
.create-card,.creative-step,.photo-thumbnail{min-width:0}.creative-step legend{max-width:100%;white-space:normal}
#preview-section,#start{scroll-margin-top:130px}
@media(max-width:600px){.header-inner{gap:10px}.adventure-choices img{height:130px}.creative-step legend{font-size:23px}.creation-progress button{font-size:12px}}
#photo-thumbnails{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
#photo-thumbnails .photo-thumbnail{width:auto;max-width:none}
.creation-progress{scroll-margin-top:115px}
@media(max-width:480px){#photo-thumbnails{grid-template-columns:1fr}}

#original-photo-option{padding:20px;margin:0 0 24px;border:1px solid #72deef;border-radius:16px;background:#171329}#original-photo-form{display:grid;gap:16px}#original-photo-option summary{cursor:pointer;font-weight:700}#private-recast-link,#recover-recast-link{width:100%;min-width:0}#original-photo-form input[type="checkbox"]{width:auto}


/* RM-038: shorter homepage — photo → Recast → product */
.hero{min-height:720px!important;padding-top:74px!important;padding-bottom:62px!important}
.hero-demo{grid-template-columns:1fr 26px 1fr 26px 1fr!important;gap:0!important;align-items:center;max-width:760px}
.hero-flow-arrow{display:grid;place-items:center;color:#8feaff;font-size:22px;font-weight:900;text-shadow:0 0 18px rgba(71,218,255,.45)}
.demo-card-after{transform:none!important}
.demo-card-product{transform:translateY(10px)}
.blanket-mockup{position:relative;margin:0;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#0a0b14;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 45px rgba(0,0,0,.35)}
.blanket-mockup img{width:100%;height:100%;object-fit:cover!important;border-radius:0!important;filter:saturate(1.03) contrast(1.02)}
.blanket-mockup::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(92deg,transparent 0 26px,rgba(255,255,255,.025) 27px,transparent 28px),linear-gradient(180deg,transparent 72%,rgba(0,0,0,.20));pointer-events:none}
.blanket-fold{position:absolute;right:-3%;bottom:4%;width:54%;height:12%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(5,6,14,.32));transform:rotate(-5deg);filter:blur(.2px);box-shadow:0 8px 18px rgba(0,0,0,.28)}
.hero-demo-note{font-size:10px!important;margin-top:8px!important}

.compact-process,.worlds,.shop-showcase,.policies{padding-top:60px!important;padding-bottom:60px!important}
.compact-process .section-heading,.compact-kicker{margin-bottom:24px!important}
.compact-steps{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.compact-steps .step-card{padding:14px 14px 18px!important}
.compact-steps .step-visual{height:150px!important}
.compact-steps .step-card h3{margin:14px 0 6px!important}
.compact-steps .step-card p{margin:0!important;font-size:12px!important;line-height:1.45!important}
.compact-steps .world-visual img,.compact-steps .merch-mini img{height:118px!important}
.compact-steps .mini-photo{width:94px!important;height:118px!important}
.compact-privacy{margin-top:16px!important}
.compact-privacy p{margin-bottom:0!important}

.worlds .style-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
.worlds .style-card{border-radius:18px!important}
.worlds .style-card .style-art{aspect-ratio:1.28/1!important}
.worlds .style-copy{padding:12px!important}
.worlds .style-copy p{display:none!important}
.worlds .style-copy h3{font-size:18px!important;margin-bottom:0!important}
.worlds .style-pick{font-size:8px!important}
.section-compact-cta{margin-top:20px}

.shop-showcase .section-kicker{padding:20px!important}
.policies{padding-top:36px!important}
.policies details{margin-bottom:8px!important}

@media(max-width:760px){
  .hero{padding-top:44px!important;padding-bottom:46px!important}
  .hero-copy{padding:18px 16px!important}
  .hero h1{font-size:clamp(48px,13vw,68px)!important}
  .hero-lede{font-size:15px!important;line-height:1.5!important}
  .hero-actions{margin:22px 0 18px!important}
  .hero-demo{grid-template-columns:1fr 14px 1fr 14px 1fr!important;max-width:none}
  .hero-flow-arrow{font-size:14px}
  .demo-card{padding:4px!important;border-radius:16px!important}
  .demo-card img,.blanket-mockup{border-radius:12px!important}
  .demo-meta{padding:7px 3px 4px!important;gap:4px!important}
  .demo-meta span{font-size:8px!important}
  .demo-meta b{font-size:8px!important;letter-spacing:.08em!important}
  .trust-row span{font-size:10px;padding:7px 9px}
  .compact-process,.worlds,.shop-showcase,.policies{padding-top:46px!important;padding-bottom:46px!important}
  .compact-steps{grid-template-columns:1fr!important;gap:10px!important}
  .compact-steps .step-card{display:grid;grid-template-columns:105px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;min-height:124px}
  .compact-steps .step-card>b{position:absolute;right:12px;top:10px}
  .compact-steps .step-visual{grid-row:1/3;height:105px!important;margin:0!important}
  .compact-steps .step-card h3{margin:0 0 5px!important}
  .compact-steps .step-card p{font-size:11px!important}
  .compact-steps .world-visual img,.compact-steps .merch-mini img{height:86px!important}
  .compact-steps .mini-photo{width:78px!important;height:96px!important}
  .worlds .style-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .worlds .style-copy{padding:9px!important}
  .worlds .style-copy h3{font-size:15px!important}
  .worlds .style-copy small{font-size:8px!important}
  .section-kicker p{font-size:13px!important;line-height:1.45!important}
}


/* RM-039: visual polish from live mobile review */

/* Hero product payoff: no box, just a floating product with a glow. */
.hero-product-stage{
  position:relative;min-width:0;display:grid;place-items:center;align-self:center;
  padding:8px 0 28px;overflow:visible;
}
.product-wow-glow{
  position:absolute;width:115%;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle,rgba(45,214,255,.38) 0 18%,rgba(137,72,255,.30) 30%,rgba(255,69,207,.14) 48%,transparent 70%);
  filter:blur(22px);opacity:.9;transform:translateY(-2%);
  animation:product-aura 3.8s ease-in-out infinite;
}
@keyframes product-aura{50%{transform:translateY(-2%) scale(1.06);opacity:1}}
.hero-product-stage>img{
  position:relative;z-index:2;width:118%;max-width:245px;aspect-ratio:1/1;object-fit:contain!important;
  filter:drop-shadow(0 28px 24px rgba(0,0,0,.56)) drop-shadow(0 0 22px rgba(63,214,255,.18));
  -webkit-mask-image:radial-gradient(ellipse 67% 66% at 50% 48%,#000 58%,rgba(0,0,0,.9) 67%,transparent 88%);
  mask-image:radial-gradient(ellipse 67% 66% at 50% 48%,#000 58%,rgba(0,0,0,.9) 67%,transparent 88%);
}
.product-stage-label{
  position:absolute;z-index:3;left:50%;bottom:0;transform:translateX(-50%);
  display:flex;gap:7px;align-items:center;white-space:nowrap;
  padding:8px 12px;border:1px solid rgba(107,224,255,.40);border-radius:999px;
  background:rgba(8,9,22,.82);box-shadow:0 8px 28px rgba(0,0,0,.32),0 0 25px rgba(72,200,255,.10);
  backdrop-filter:blur(12px);font-size:9px;letter-spacing:.12em;color:#fff;
}
.product-stage-label span{color:#77e4f4}
.product-stage-label b{font-weight:900}
@media(prefers-reduced-motion:reduce){.product-wow-glow{animation:none}}

/* One visually coherent process rail instead of three heavy boxes. */
.compact-process{overflow:hidden!important}
.compact-process-heading{
  max-width:680px!important;margin:0 auto 30px!important;text-align:center;
  padding:0!important;background:none!important;border:0!important;backdrop-filter:none!important;
}
.compact-process-heading h2{font-size:clamp(38px,6vw,62px)!important}
.compact-process-heading p{max-width:560px;margin:0 auto;color:#9fa1b6;line-height:1.55}
.process-ribbon{
  display:grid;grid-template-columns:1fr 52px 1fr 52px 1fr;align-items:center;
  padding:22px;border:1px solid rgba(141,126,229,.22);border-radius:30px;
  background:
    radial-gradient(circle at 16% 35%,rgba(103,70,255,.12),transparent 25%),
    radial-gradient(circle at 82% 62%,rgba(32,204,255,.10),transparent 25%),
    rgba(7,8,18,.72);
  backdrop-filter:blur(14px);box-shadow:0 28px 85px rgba(0,0,0,.30);
}
.process-node{min-width:0;display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;padding:14px}
.process-node-art{
  position:relative;width:92px;height:92px;border-radius:24px;overflow:hidden;
  border:1px solid rgba(130,121,218,.35);background:#0a0b17;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
}
.process-node-art::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 28px rgba(111,78,255,.12);pointer-events:none}
.process-node-art img{width:100%;height:100%;object-fit:cover!important}
.product-node-art img{object-fit:contain!important;background:radial-gradient(circle,#182038,#080913 72%)}
.process-node-copy span{font-size:9px;letter-spacing:.18em;font-weight:950;color:#87def3}
.process-node-copy h3{font-size:22px;margin:4px 0 6px;letter-spacing:-.025em}
.process-node-copy p{font-size:12px;line-height:1.45;color:#9b9caf;margin:0}
.process-ribbon-arrow{display:grid;place-items:center;color:#6fe3f5;font-size:30px;font-weight:300;text-shadow:0 0 18px rgba(70,216,255,.42)}

/* Clear AI path first; alternate paths live below an OR divider. */
.create-main-path{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0 0 18px;padding:0 2px 14px;border-bottom:1px solid rgba(255,255,255,.08)
}
.create-main-path span{font-size:10px;font-weight:950;letter-spacing:.18em;color:#8ee9f8}
.create-main-path strong{font-size:13px;color:#c7c5d7}
.alternate-divider{
  display:flex;align-items:center;gap:12px;margin:26px 0 16px;color:#838396;font-size:10px;font-weight:900;letter-spacing:.18em
}
.alternate-divider::before,.alternate-divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#3d3954)}
.alternate-divider::after{background:linear-gradient(90deg,#3d3954,transparent)}
.alternate-divider span{padding:0 4px}
.alternate-paths{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.alternate-option{
  min-width:0;border:1px solid #363249!important;border-radius:16px!important;background:#0e0e18!important;padding:0!important;margin:0!important
}
.alternate-option summary{
  cursor:pointer;list-style:none;padding:15px 16px;font-weight:800;color:#f1f0f8;display:flex;align-items:center;justify-content:space-between;gap:10px
}
.alternate-option summary::-webkit-details-marker{display:none}
.alternate-option summary::after{content:"+";color:#7ce3f4;font-size:20px;font-weight:400}
.alternate-option[open] summary::after{content:"–"}
.alternate-option>p,.alternate-option>label,.alternate-option>button,.alternate-option>form{margin-left:16px!important;margin-right:16px!important}
.alternate-option>p{color:#9493a5;font-size:12px;line-height:1.5}
.alternate-option>form{display:grid;gap:12px;padding-bottom:16px}
.alternate-option input[type="url"],.alternate-option input[type="file"]{width:100%;min-width:0}

/* Preview screen: primary action first, utilities tucked away. */
.preview-info-simple{align-self:start}
.preview-protection{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;margin-bottom:12px;border:1px solid rgba(116,104,199,.30);border-radius:14px;background:#0e0f19
}
.preview-protection strong{font-size:12px;color:#fff}
.preview-protection span{font-size:11px;color:#9fa0b2;text-align:right}
.preview-product-cta{min-height:56px!important;font-size:16px!important;background:linear-gradient(90deg,#9344ff,#28c8f0)!important;color:#fff!important;border:0!important}
.preview-version-cta{margin-top:9px!important}
.preview-more{margin-top:10px;border:1px solid #323246;border-radius:14px;background:#0d0e17;overflow:hidden}
.preview-more summary{cursor:pointer;padding:14px 16px;font-weight:800;color:#c9c8d7;list-style:none}
.preview-more summary::-webkit-details-marker{display:none}
.preview-more summary::after{content:"+";float:right;color:#8ee7f7;font-size:18px}
.preview-more[open] summary::after{content:"–"}
.preview-more-actions{display:grid;gap:8px;padding:0 12px 12px}
.preview-more-actions .button{margin:0!important;min-height:44px!important}
.recent-versions-heading p{max-width:520px!important}
.recent-versions-heading>span{white-space:nowrap}

/* Mobile tuning */
@media(max-width:760px){
  .hero-product-stage>img{width:130%;max-width:none}
  .product-wow-glow{width:132%}
  .product-stage-label{font-size:7px;padding:6px 8px}
  .process-ribbon{grid-template-columns:1fr;padding:14px;gap:0}
  .process-node{grid-template-columns:82px 1fr;padding:12px 8px}
  .process-node-art{width:82px;height:82px;border-radius:20px}
  .process-ribbon-arrow{height:24px;transform:rotate(90deg);font-size:23px}
  .alternate-paths{grid-template-columns:1fr}
  .alternate-option summary{padding:14px}
  .preview-protection{align-items:flex-start;flex-direction:column}
  .preview-protection span{text-align:left}
}


/* RM-040: product-specific best setup UX */
.hero-product-stage{min-height:250px;padding:0!important}
.hero-product-stage>img{
  width:158%!important;max-width:315px!important;aspect-ratio:auto!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  filter:drop-shadow(0 32px 28px rgba(0,0,0,.62)) drop-shadow(0 0 30px rgba(65,218,255,.28)) drop-shadow(0 0 48px rgba(158,76,255,.18))!important;
}
.product-wow-glow{width:150%!important;opacity:1!important;filter:blur(30px)!important}
.product-stage-label{bottom:-5px!important}
.recommended-design-row{
  margin-top:12px;padding:10px 12px;border:1px solid rgba(70,208,237,.28);border-radius:13px;
  background:linear-gradient(90deg,rgba(27,28,50,.92),rgba(12,20,33,.92));
  display:grid;gap:2px
}
.recommended-design-row span{font-size:9px;font-weight:950;letter-spacing:.14em;color:#79e5f4;text-transform:uppercase}
.recommended-design-row strong{font-size:12px;color:#ecebf8}
.product-design-controls{margin-top:9px!important;background:#0a0b14!important;border-color:#303144!important}
.product-design-controls summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:1px 0;
  list-style:none;font-size:12px!important
}
.product-design-controls summary::-webkit-details-marker{display:none}
.product-design-controls summary span{font-weight:900;color:#e3e2ec}
.product-design-controls summary small{font-size:10px;color:#89899c;font-weight:700;text-align:right}
.product-design-controls summary::after{content:"+";color:#7ce3f4;font-size:18px}
.product-design-controls[open] summary::after{content:"–"}
.design-edit-body{padding-top:5px}
.product-preview-action{
  min-height:50px!important;margin-top:10px!important;
  background:linear-gradient(90deg,#9543ff,#27c6ef)!important;color:#fff!important;
  border:0!important;font-size:14px!important
}
@media(max-width:760px){
  .hero-product-stage{min-height:190px}
  .hero-product-stage>img{width:182%!important;max-width:250px!important}
  .product-wow-glow{width:170%!important}
  .recommended-design-row{margin-top:10px}
  .product-design-controls summary{align-items:flex-start}
  .product-design-controls summary small{max-width:58%}
}


/* RM-040: keep the active-Recast product chooser short on mobile. */
.checkout-catalog .catalog-extra-product{display:none!important}
.checkout-catalog.show-all-products .catalog-extra-product{display:flex!important}
.catalog-more-toggle{
  grid-column:1/-1;min-height:50px;border:1px solid #38364d;border-radius:15px;
  background:#10111b;color:#e6e5ef;font:inherit;font-weight:850;cursor:pointer
}
.catalog-more-toggle::after{content:"  +" ;color:#80e4f4}
.checkout-catalog.show-all-products .catalog-more-toggle{display:none}


/* RM-040 hero mug is built in HTML so Safari always loads the Recast artwork. */
.hero-mug-cutout{
  position:relative;z-index:2;width:150%;max-width:300px;aspect-ratio:1.12/1;
  filter:drop-shadow(0 30px 25px rgba(0,0,0,.60)) drop-shadow(0 0 26px rgba(72,218,255,.26));
  transform:translateX(-3%);
}
.hero-mug-body{
  position:absolute;left:8%;top:10%;width:72%;height:79%;
  border:10px solid #f7f7fb;border-top-width:15px;border-bottom-width:14px;
  border-radius:8% 8% 14% 14% / 7% 7% 12% 12%;
  overflow:hidden;background:#11131c;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset -16px 0 22px rgba(0,0,0,.16);
}
.hero-mug-body img{width:100%;height:100%;object-fit:cover!important;object-position:center 47%;transform:scale(1.04)}
.hero-mug-body::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.23),transparent 16%,transparent 78%,rgba(0,0,0,.20));
  pointer-events:none
}
.hero-mug-handle{
  position:absolute;right:2%;top:27%;width:32%;height:46%;
  border:22px solid #f5f5f9;border-left-width:17px;border-radius:47%;
  box-shadow:inset 3px 0 4px rgba(0,0,0,.09),4px 10px 14px rgba(0,0,0,.26);
  z-index:-1
}
.hero-mug-rim{
  position:absolute;left:9%;top:8%;width:70%;height:10%;border-radius:50%;
  background:linear-gradient(180deg,#fff,#d8d8df 70%,#f9f9fc);
  box-shadow:inset 0 -4px 5px rgba(0,0,0,.10)
}
@media(max-width:760px){
  .hero-mug-cutout{width:185%;max-width:255px;transform:translateX(-8%)}
  .hero-mug-body{border-width:7px;border-top-width:11px;border-bottom-width:10px}
  .hero-mug-handle{border-width:16px;border-left-width:12px}
}


/* RM-043: premium hero product art — final product is the visual payoff */
.hero-demo{grid-template-columns:.88fr 22px .88fr 18px 1.34fr!important;max-width:860px!important}
.hero-product-wow{min-height:330px!important;overflow:visible!important}
.hero-product-wow-image{
  position:relative;z-index:2;width:170%!important;max-width:390px!important;height:auto!important;
  object-fit:contain!important;transform:translateX(-9%) translateY(-1%);
  filter:drop-shadow(0 34px 28px rgba(0,0,0,.66)) drop-shadow(0 0 34px rgba(47,215,255,.34)) drop-shadow(0 0 64px rgba(205,66,255,.26))!important;
}
.hero-product-wow .product-wow-glow{
  width:185%!important;opacity:1!important;filter:blur(36px)!important;
  background:radial-gradient(circle,rgba(42,220,255,.44) 0 18%,rgba(139,74,255,.35) 31%,rgba(255,73,218,.22) 48%,transparent 72%)!important;
}
.hero-product-wow .product-stage-label{
  bottom:-2px!important;padding:8px 13px!important;
  border-color:rgba(104,228,255,.58)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.36),0 0 34px rgba(81,220,255,.18)!important
}
.product-node-art{background:radial-gradient(circle,#161a34,#090a12 72%)!important}
.product-node-art img{object-fit:contain!important;transform:scale(1.16);filter:drop-shadow(0 0 14px rgba(75,214,255,.20))}

@media(max-width:760px){
  .hero-demo{grid-template-columns:.78fr 12px .78fr 10px 1.45fr!important;max-width:none!important}
  .hero-product-wow{min-height:250px!important}
  .hero-product-wow-image{
    width:205%!important;max-width:320px!important;
    transform:translateX(-17%) translateY(-1%);
  }
  .hero-product-wow .product-wow-glow{width:210%!important;filter:blur(30px)!important}
  .hero-product-wow .product-stage-label{font-size:7px!important;padding:6px 8px!important}
}


/* RM-044: hero rebuilt to closely match the approved neon product-first concept */
.site-header{
  min-height:86px!important;
  height:auto!important;
  padding-left:max(28px,calc((100vw - 1220px)/2))!important;
  padding-right:max(28px,calc((100vw - 1220px)/2))!important;
  background:linear-gradient(180deg,rgba(4,5,15,.92),rgba(4,5,15,.72))!important;
  border-bottom:1px solid rgba(97,107,255,.18)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.24)!important;
}
.site-header .brand{gap:12px!important;font-size:18px!important}
.site-header .brand-mark{
  width:50px!important;height:50px!important;border-radius:16px!important;
  border-color:rgba(103,89,255,.48)!important;
  box-shadow:0 0 32px rgba(94,68,255,.16)!important
}
.site-header .brand-mark span{font-size:25px!important}
.site-header .nav-cta{
  min-height:52px;padding:0 22px!important;border-radius:999px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  background:linear-gradient(90deg,#a83dff 0%,#6558ff 50%,#15c9f1 100%)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 12px 35px rgba(77,73,255,.28),0 0 28px rgba(41,210,255,.12)!important;
  color:#fff!important;font-weight:900!important
}
.site-header .nav-cta span{font-size:20px;margin-left:6px}

.hero{
  display:block!important;
  min-height:1040px!important;
  padding-top:64px!important;
  padding-bottom:72px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 73% 22%,rgba(36,213,255,.17),transparent 22%),
    radial-gradient(circle at 35% 43%,rgba(139,71,255,.18),transparent 35%),
    linear-gradient(180deg,rgba(4,5,16,.18) 0%,rgba(4,5,17,.32) 46%,rgba(4,5,16,.74) 100%),
    url('/assets/bg-hero-v10.webp') center 38%/cover no-repeat!important;
}
.hero::before{
  content:"";position:absolute;z-index:-1;
  width:min(830px,88vw);height:min(830px,88vw);right:-18vw;top:34px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 38%,rgba(69,50,181,.08),transparent 40%),
    radial-gradient(circle at 58% 48%,rgba(92,43,185,.11),rgba(14,22,79,.14) 52%,rgba(5,8,27,.04) 70%,transparent 73%);
  border:1px solid rgba(70,211,255,.12);
  box-shadow:-12px 0 25px rgba(59,214,255,.18),-2px 0 7px rgba(94,83,255,.32);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,4,13,.10),rgba(4,5,15,.18) 45%,rgba(4,5,15,.55) 100%),
    linear-gradient(90deg,rgba(4,5,15,.38),transparent 52%,rgba(4,5,15,.10));
}
.hero-gridlines,.hero-light-streak{opacity:.20!important}
.hero-copy{
  width:min(860px,100%)!important;
  margin:0 auto!important;
  padding:0!important;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  backdrop-filter:none!important;
  text-shadow:0 4px 30px rgba(0,0,0,.34)!important;
}
.hero .eyebrow{
  margin-bottom:20px!important;
  font-size:12px!important;letter-spacing:.29em!important;
  color:#c2b0ff!important;
}
.hero h1{
  margin:0 0 24px!important;
  font-size:clamp(74px,8.4vw,122px)!important;
  line-height:.86!important;letter-spacing:-.075em!important;
  max-width:850px!important
}
.hero h1 span{
  display:inline-block;
  background:linear-gradient(92deg,#28d7f6 0%,#4aaeff 22%,#9a66ff 55%,#ff48c9 100%)!important;
  background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important
}
.hero-lede{
  max-width:770px!important;margin:0!important;
  font-size:20px!important;line-height:1.48!important;color:#d5d3e3!important
}
.hero-actions{
  display:grid!important;grid-template-columns:minmax(220px,360px) minmax(180px,320px)!important;
  gap:18px!important;margin:30px 0 24px!important;max-width:700px
}
.hero-actions .button{min-height:68px!important;border-radius:24px!important;font-size:19px!important}
.hero-actions .button.primary{
  background:linear-gradient(90deg,#b337ff 0%,#6556ff 50%,#16caf1 100%)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 18px 48px rgba(81,64,255,.26),0 0 35px rgba(49,204,255,.10)!important
}
.hero-actions .button.primary span{font-size:25px;margin-left:12px}
.hero-actions .button.ghost{
  background:rgba(6,8,23,.70)!important;border:1px solid rgba(92,137,255,.64)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset!important;color:#fff!important
}
.trust-row{
  display:grid!important;grid-template-columns:repeat(3,max-content)!important;
  gap:14px!important;align-items:center!important
}
.trust-row span{
  display:inline-flex!important;align-items:center!important;gap:10px!important;
  min-height:48px!important;padding:0 18px!important;
  border-radius:999px!important;background:rgba(6,7,20,.66)!important;
  border:1px solid rgba(101,111,255,.50)!important;color:#eceaf7!important;
  font-size:13px!important;white-space:nowrap!important;
  box-shadow:0 0 24px rgba(73,81,255,.07)!important
}
.trust-row svg{
  width:21px;height:21px;fill:none;stroke:#eef6ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}

.hero-showcase{
  position:relative!important;
  display:block!important;
  width:min(1040px,100%)!important;
  height:545px!important;max-width:1040px!important;
  margin:20px auto 0!important;padding:0!important;
  background:none!important;border-radius:0!important;backdrop-filter:none!important;
  box-shadow:none!important;overflow:visible!important
}
.hero-showcase::before{
  content:"";position:absolute;left:50%;bottom:87px;transform:translateX(-50%);
  width:92%;height:165px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(36,180,255,.13),rgba(118,68,255,.10) 38%,rgba(255,66,219,.04) 58%,transparent 72%);
  filter:blur(15px);pointer-events:none
}
.hero-showcase-steps{
  position:absolute;left:1.5%;bottom:140px;z-index:2;
  width:46%;display:grid;grid-template-columns:1fr 28px 1fr 28px;align-items:center;gap:0
}
.hero-mini-card{
  padding:7px!important;border-radius:24px!important;
  background:linear-gradient(165deg,rgba(11,12,30,.95),rgba(8,8,20,.88))!important;
  border:1px solid rgba(111,100,255,.55)!important;
  box-shadow:0 24px 65px rgba(0,0,0,.42),0 0 34px rgba(97,79,255,.10)!important
}
.hero-mini-card img{border-radius:18px!important;aspect-ratio:4/5!important}
.hero-mini-card.demo-card-after{
  transform:none!important;border-color:rgba(61,208,255,.58)!important;
  box-shadow:0 24px 65px rgba(0,0,0,.42),0 0 34px rgba(53,211,255,.11)!important
}
.hero-mini-card .demo-meta{
  padding:10px 7px 6px!important;display:grid!important;grid-template-columns:auto 1fr!important;gap:7px!important;
  align-items:center!important;font-size:10px!important;letter-spacing:.12em!important
}
.hero-mini-card .demo-meta span{font-size:10px;color:#9f96d8!important}
.hero-mini-card .demo-meta b{line-height:1.15;color:#f2f1f7!important}
.hero-flow-arrow{
  font-size:27px!important;color:#45daf2!important;font-weight:500!important;text-shadow:0 0 16px rgba(64,221,255,.42)!important
}
.hero-flow-arrow-product{color:#fff!important;text-shadow:0 0 18px rgba(92,96,255,.46)!important}

.hero-product-wow{
  position:absolute!important;right:0!important;top:6px!important;z-index:3!important;
  width:58%!important;min-height:450px!important;display:grid!important;place-items:center!important;overflow:visible!important
}
.hero-product-wow-image{
  position:relative!important;z-index:3!important;
  width:100%!important;max-width:575px!important;height:auto!important;
  object-fit:contain!important;transform:none!important;
  filter:drop-shadow(0 34px 35px rgba(0,0,0,.58)) drop-shadow(0 0 34px rgba(52,219,255,.38)) drop-shadow(0 0 78px rgba(185,66,255,.27))!important
}
.hero-product-wow .product-wow-glow{
  width:116%!important;aspect-ratio:1!important;filter:blur(40px)!important;opacity:.92!important;
  background:radial-gradient(circle,rgba(30,222,255,.36) 0 20%,rgba(111,77,255,.29) 34%,rgba(255,64,218,.18) 50%,transparent 72%)!important
}
.hero-product-pedestal{
  position:absolute;z-index:1;bottom:48px;left:50%;transform:translateX(-50%);
  width:78%;height:84px;border-radius:50%;
  background:linear-gradient(180deg,#1a1a3a,#090a17 62%,#02030b);
  border:2px solid rgba(41,220,255,.70);
  box-shadow:
    0 -5px 0 rgba(151,63,255,.75) inset,
    0 0 0 4px rgba(56,82,255,.16),
    0 0 26px rgba(43,216,255,.42),
    0 0 54px rgba(160,65,255,.30),
    0 28px 55px rgba(0,0,0,.55)
}
.hero-product-pedestal::before{
  content:"";position:absolute;left:8%;right:8%;top:4px;height:20px;border-radius:50%;
  background:linear-gradient(90deg,#ba41ff,#3e65ff,#21d8f4);filter:blur(8px);opacity:.8
}
.hero-product-wow .product-stage-label{
  left:50%!important;bottom:17px!important;transform:translateX(-50%)!important;z-index:5!important;
  min-width:255px!important;justify-content:center!important;
  padding:10px 18px!important;border:1px solid rgba(45,220,255,.70)!important;border-radius:999px!important;
  background:rgba(5,9,26,.88)!important;box-shadow:0 0 28px rgba(38,214,255,.18)!important;
  font-size:11px!important;letter-spacing:.18em!important
}
.hero-product-wow .product-stage-label span{color:#28dcf5!important;font-size:11px!important}

.hero-tagline{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  z-index:4;display:grid;justify-items:center;gap:5px;color:#d8d4e8;text-align:center;
  letter-spacing:.31em;white-space:nowrap
}
.hero-tagline span,.hero-tagline strong{font-size:11px;font-weight:600}
.hero-tagline strong{color:#efedf6;font-weight:650}
.hero-tagline i{
  display:block;width:76px;height:4px;border-radius:999px;margin-top:8px;
  background:linear-gradient(90deg,#1edaf2,#5a73ff,#ef42d5);
  box-shadow:0 0 18px rgba(88,141,255,.32)
}

@media(max-width:980px){
  .hero{min-height:auto!important;padding-top:52px!important;padding-bottom:58px!important;background-position:66% 36%!important}
  .hero-copy{width:100%!important;max-width:760px!important}
  .hero h1{font-size:clamp(66px,11vw,96px)!important}
  .hero-showcase{height:520px!important}
}
@media(max-width:760px){
  .site-header{
    min-height:102px!important;padding-left:28px!important;padding-right:28px!important;
    padding-top:max(16px,env(safe-area-inset-top))!important;
    background:rgba(4,5,15,.88)!important
  }
  .site-header .brand{font-size:15px!important;letter-spacing:-.02em!important}
  .site-header .brand-mark{width:48px!important;height:48px!important}
  .site-header .brand-mark span{font-size:24px!important}
  .site-header .nav-cta{
    min-height:54px!important;padding:0 20px!important;font-size:14px!important;
    box-shadow:0 10px 34px rgba(70,72,255,.30),0 0 30px rgba(48,205,255,.12)!important
  }

  .hero{
    min-height:1345px!important;padding:42px 28px 62px!important;
    background-position:61% 29%!important;background-size:auto 100%!important
  }
  .hero::before{
    width:760px;height:760px;right:-470px;top:0;
    border-color:rgba(53,205,255,.20);box-shadow:-15px 0 36px rgba(63,211,255,.16)
  }
  .hero-copy{max-width:none!important}
  .hero .eyebrow{
    font-size:10px!important;line-height:1.5!important;letter-spacing:.28em!important;margin-bottom:16px!important;
    white-space:normal!important;max-width:90%
  }
  .hero h1{
    font-size:clamp(58px,15.5vw,82px)!important;line-height:.89!important;
    letter-spacing:-.07em!important;margin-bottom:22px!important
  }
  .hero-lede{
    font-size:17px!important;line-height:1.52!important;max-width:94%!important;color:#dddbea!important
  }
  .hero-actions{
    grid-template-columns:1.04fr .96fr!important;gap:12px!important;margin:24px 0 18px!important;max-width:none!important
  }
  .hero-actions .button{min-height:64px!important;border-radius:20px!important;font-size:16px!important;padding:0 13px!important}
  .hero-actions .button.primary span{font-size:22px!important;margin-left:7px}
  .trust-row{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;width:100%!important
  }
  .trust-row span{
    min-width:0!important;min-height:46px!important;padding:0 8px!important;gap:6px!important;
    font-size:10px!important;justify-content:center!important;text-align:center!important;white-space:normal!important;line-height:1.18!important
  }
  .trust-row svg{width:18px!important;height:18px!important;flex:0 0 18px!important}

  .hero-showcase{
    width:calc(100% + 18px)!important;height:590px!important;margin:22px -9px 0!important
  }
  .hero-showcase::before{
    width:116%!important;height:190px!important;bottom:105px!important;filter:blur(22px)!important
  }
  .hero-showcase-steps{
    left:0!important;bottom:155px!important;width:49%!important;
    grid-template-columns:1fr 19px 1fr 16px!important
  }
  .hero-mini-card{
    padding:5px!important;border-radius:18px!important
  }
  .hero-mini-card img{border-radius:13px!important;aspect-ratio:4/5!important}
  .hero-mini-card .demo-meta{padding:7px 4px 4px!important;gap:4px!important}
  .hero-mini-card .demo-meta span{font-size:8px!important}
  .hero-mini-card .demo-meta b{font-size:8px!important;letter-spacing:.08em!important}
  .hero-flow-arrow{font-size:20px!important}
  .hero-product-wow{
    right:-10px!important;top:34px!important;width:64%!important;min-height:430px!important
  }
  .hero-product-wow-image{
    width:112%!important;max-width:none!important;transform:translateX(3%)!important;
    filter:drop-shadow(0 30px 30px rgba(0,0,0,.62)) drop-shadow(0 0 28px rgba(50,219,255,.42)) drop-shadow(0 0 66px rgba(196,62,255,.29))!important
  }
  .hero-product-wow .product-wow-glow{width:128%!important;filter:blur(34px)!important}
  .hero-product-pedestal{width:86%!important;height:64px!important;bottom:60px!important}
  .hero-product-wow .product-stage-label{
    min-width:178px!important;bottom:27px!important;padding:8px 11px!important;font-size:8px!important
  }
  .hero-product-wow .product-stage-label span{font-size:9px!important}
  .hero-tagline{bottom:8px!important;gap:4px!important;letter-spacing:.28em!important}
  .hero-tagline span,.hero-tagline strong{font-size:9px!important}
  .hero-tagline i{width:62px!important;height:3px!important;margin-top:6px!important}
}
@media(max-width:420px){
  .site-header{padding-left:20px!important;padding-right:20px!important}
  .site-header .brand{font-size:14px!important}
  .site-header .nav-cta{padding:0 15px!important;font-size:13px!important}
  .hero{padding-left:20px!important;padding-right:20px!important;min-height:1285px!important}
  .hero h1{font-size:clamp(54px,15vw,68px)!important}
  .hero-lede{font-size:15px!important}
  .hero-showcase{height:560px!important}
  .hero-showcase-steps{width:51%!important;bottom:148px!important}
  .hero-product-wow{width:64%!important;right:-13px!important}
}


/* RM-045 — match the approved hero reference on the real website.
   The copy/buttons stay live HTML; the lower transformation showcase is the approved composition asset. */
.site-header{
  min-height:78px!important;
  height:auto!important;
  padding-left:max(24px,6.3vw)!important;
  padding-right:max(24px,6.3vw)!important;
  padding-top:max(8px,env(safe-area-inset-top))!important;
  background:rgba(3,5,16,.94)!important;
  border-bottom:1px solid rgba(95,84,210,.22)!important;
  box-shadow:none!important;
  backdrop-filter:blur(18px)!important;
}
.site-header .brand{
  gap:10px!important;
  font-size:17px!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
}
.site-header .brand-mark{
  width:46px!important;height:46px!important;
  border-radius:15px!important;
  background:rgba(7,8,24,.82)!important;
  border:1px solid rgba(112,91,255,.50)!important;
  box-shadow:0 0 28px rgba(86,72,255,.14)!important;
}
.site-header .brand-mark span{font-size:23px!important}
.site-header .nav-cta{
  min-height:50px!important;
  padding:0 20px!important;
  border-radius:999px!important;
  font-size:15px!important;
  font-weight:900!important;
  border:1px solid rgba(255,255,255,.24)!important;
  background:linear-gradient(90deg,#b33dff 0%,#6558ff 50%,#18c9ef 100%)!important;
  box-shadow:0 12px 32px rgba(67,73,255,.24),0 0 26px rgba(41,209,255,.10)!important;
}
.site-header .nav-cta span{font-size:20px!important;margin-left:6px!important}

.hero{
  display:block!important;
  min-height:0!important;
  max-width:none!important;
  margin:0!important;
  padding:34px max(24px,6.3vw) 0!important;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:
    radial-gradient(circle at 20% 34%,rgba(126,57,220,.21),transparent 33%),
    radial-gradient(circle at 72% 34%,rgba(49,61,188,.19),transparent 36%),
    linear-gradient(180deg,#030510 0%,#07091d 46%,#0a0822 72%,#050615 100%)!important;
}
.hero::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  top:-6px!important;right:-2%!important;
  width:58%!important;height:520px!important;
  background:url('https://cdn.shopify.com/s/files/1/0854/3810/3796/files/recast-hero-planet-v45.jpg?v=1791263040') right 18%/auto 112% no-repeat!important;
  opacity:.98!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 62%,rgba(0,0,0,.72) 78%,transparent 100%)!important;
  mask-image:linear-gradient(to left,#000 0%,#000 62%,rgba(0,0,0,.72) 78%,transparent 100%)!important;
  pointer-events:none!important;
}
.hero::after{
  content:""!important;
  position:absolute!important;inset:0!important;z-index:-2!important;
  background:
    radial-gradient(circle at 15% 9%,rgba(62,82,255,.16) 0 1px,transparent 1.7px) 0 0/39px 39px,
    radial-gradient(circle at 78% 12%,rgba(38,211,255,.13) 0 1px,transparent 1.7px) 0 0/53px 53px,
    linear-gradient(180deg,rgba(2,4,14,.04),rgba(4,5,18,.22) 58%,rgba(4,5,17,.60));
  pointer-events:none!important;
}
.hero-glow,.hero-gridlines,.hero-light-streak{display:none!important}

.hero-copy{
  width:min(820px,100%)!important;
  max-width:820px!important;
  margin:0 auto!important;
  padding:0!important;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  text-shadow:0 3px 30px rgba(0,0,0,.36)!important;
  position:relative!important;
  z-index:3!important;
}
.hero .eyebrow{
  margin:0 0 14px!important;
  font-size:11px!important;
  line-height:1.35!important;
  letter-spacing:.285em!important;
  font-weight:900!important;
  color:#c7b5ff!important;
  text-shadow:0 0 22px rgba(126,91,255,.30)!important;
}
.hero h1{
  margin:0 0 19px!important;
  max-width:720px!important;
  font-size:clamp(72px,8vw,112px)!important;
  line-height:.85!important;
  letter-spacing:-.072em!important;
  text-shadow:0 10px 34px rgba(0,0,0,.28)!important;
}
.hero h1 span{
  display:inline-block!important;
  background:linear-gradient(92deg,#1edbf1 0%,#3eaeff 22%,#9965ff 55%,#ff47c9 100%)!important;
  background-clip:text!important;-webkit-background-clip:text!important;
  color:transparent!important;
}
.hero-lede{
  margin:0!important;
  max-width:680px!important;
  font-size:19px!important;
  line-height:1.52!important;
  color:#d7d6e4!important;
}
.hero-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:14px!important;
  width:min(690px,100%)!important;
  max-width:690px!important;
  margin:24px 0 17px!important;
}
.hero-actions .button{
  min-height:64px!important;
  border-radius:22px!important;
  font-size:18px!important;
  font-weight:850!important;
}
.hero-actions .button.primary{
  color:#fff!important;
  border:1px solid rgba(255,255,255,.23)!important;
  background:linear-gradient(90deg,#b83bff 0%,#625aff 50%,#14caf1 100%)!important;
  box-shadow:0 12px 36px rgba(82,58,255,.27),0 0 28px rgba(31,207,244,.12)!important;
}
.hero-actions .button.primary span{font-size:24px!important;margin-left:8px!important}
.hero-actions .button.ghost{
  color:#fff!important;
  border:1px solid rgba(88,126,255,.70)!important;
  background:rgba(5,7,21,.78)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.015) inset!important;
}
.trust-row{
  width:min(730px,100%)!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
}
.trust-row span{
  min-width:0!important;
  min-height:47px!important;
  padding:0 13px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  text-align:center!important;
  white-space:normal!important;
  border:1px solid rgba(101,91,235,.58)!important;
  border-radius:999px!important;
  background:rgba(5,7,20,.67)!important;
  color:#ecebf5!important;
  font-size:12px!important;
  line-height:1.15!important;
  box-shadow:0 0 22px rgba(79,77,240,.06)!important;
}
.trust-row svg{
  width:20px!important;height:20px!important;flex:0 0 20px!important;
  fill:none!important;stroke:#f2f6ff!important;stroke-width:1.8!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}

/* Exact lower reference composition. */
.hero-reference-stage{
  display:block!important;
  position:relative!important;
  width:calc(100% + max(48px,12.6vw))!important;
  max-width:none!important;
  height:auto!important;
  margin:20px calc(max(24px,6.3vw) * -1) 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  overflow:hidden!important;
}
.hero-reference-stage::before,.hero-reference-stage::after{display:none!important}
.hero-reference-stage-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center top!important;
}

/* Disable the earlier live-layout hero pieces now replaced by the approved showcase asset. */
.hero-reference-stage .hero-showcase-steps,
.hero-reference-stage .hero-product-stage,
.hero-reference-stage .hero-tagline{display:none!important}

@media(max-width:980px){
  .hero{
    padding-top:30px!important;
  }
  .hero-copy{max-width:760px!important}
  .hero h1{font-size:clamp(66px,11vw,94px)!important}
}

@media(max-width:760px){
  .site-header{
    min-height:80px!important;
    padding-left:6.3vw!important;
    padding-right:6.3vw!important;
    padding-top:max(8px,env(safe-area-inset-top))!important;
  }
  .site-header .brand{font-size:15px!important;gap:8px!important}
  .site-header .brand-mark{width:44px!important;height:44px!important;border-radius:14px!important}
  .site-header .brand-mark span{font-size:22px!important}
  .site-header .nav-cta{
    min-height:49px!important;
    padding:0 17px!important;
    font-size:13px!important;
  }

  .hero{
    padding:29px 6.3vw 0!important;
  }
  .hero::before{
    top:0!important;right:-5%!important;
    width:60%!important;height:485px!important;
    background-position:right 18%!important;
    background-size:auto 112%!important;
  }
  .hero-copy{
    width:100%!important;
    max-width:none!important;
  }
  .hero .eyebrow{
    margin-bottom:12px!important;
    max-width:96%!important;
    font-size:9.5px!important;
    letter-spacing:.27em!important;
  }
  .hero h1{
    margin-bottom:17px!important;
    max-width:100%!important;
    font-size:clamp(58px,16.2vw,72px)!important;
    line-height:.86!important;
    letter-spacing:-.066em!important;
  }
  .hero-lede{
    max-width:96%!important;
    font-size:15.5px!important;
    line-height:1.55!important;
  }
  .hero-actions{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    margin:22px 0 15px!important;
  }
  .hero-actions .button{
    min-height:58px!important;
    padding:0 10px!important;
    border-radius:20px!important;
    font-size:15px!important;
  }
  .hero-actions .button.primary span{font-size:20px!important;margin-left:6px!important}
  .trust-row{
    width:100%!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .trust-row span{
    min-height:43px!important;
    padding:0 7px!important;
    gap:5px!important;
    font-size:9.5px!important;
  }
  .trust-row svg{width:17px!important;height:17px!important;flex-basis:17px!important}

  .hero-reference-stage{
    width:calc(100% + 12.6vw)!important;
    margin:20px -6.3vw 0!important;
  }
}

@media(max-width:420px){
  .site-header .brand{font-size:14px!important}
  .site-header .nav-cta{font-size:12.5px!important;padding:0 14px!important}
  .hero h1{font-size:clamp(54px,16.3vw,67px)!important}
  .hero-lede{font-size:14.5px!important}
  .hero-actions .button{font-size:14px!important}
  .trust-row span{font-size:9px!important}
}


/* RM-046 — unified high-quality site background + cleanup after live iPhone review */

/* One continuous cinematic background behind the entire experience.
   Individual sections now tint this same universe instead of dropping to flat black. */
html{background:#050611!important}
body{
  position:relative!important;
  isolation:isolate!important;
  background:#050611!important;
}
body::before{
  content:"";
  position:fixed;
  inset:-3vh -3vw;
  z-index:-20;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,5,16,.15),rgba(4,5,17,.38) 48%,rgba(4,5,16,.58)),
    url('/assets/bg-hero-v10.webp') center center/cover no-repeat;
  filter:saturate(1.18) contrast(1.05) brightness(.92);
  transform:scale(1.04);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-19;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 24%,rgba(129,62,255,.12),transparent 32%),
    radial-gradient(circle at 86% 54%,rgba(28,210,255,.09),transparent 30%),
    linear-gradient(180deg,rgba(4,5,17,.03),rgba(5,6,18,.26));
}
main{background:transparent!important}

/* Remove the screenshot-crop planet layer that caused ghost text/duplicate artwork. */
.hero::before{display:none!important}
.hero{
  background:
    linear-gradient(180deg,rgba(3,5,16,.10) 0%,rgba(4,5,18,.21) 48%,rgba(5,6,18,.52) 100%),
    linear-gradient(90deg,rgba(3,5,16,.40) 0%,rgba(3,5,16,.12) 54%,rgba(3,5,16,.06) 100%),
    url('/assets/bg-hero-v10.webp') center 34%/cover no-repeat!important;
}
.hero::after{
  display:block!important;
  background:
    radial-gradient(circle at 80% 18%,rgba(48,213,255,.11),transparent 23%),
    radial-gradient(circle at 24% 42%,rgba(156,68,255,.10),transparent 34%),
    linear-gradient(180deg,transparent 65%,rgba(5,6,18,.34) 86%,rgba(5,6,18,.62) 100%)!important;
}

/* Blend the approved transformation stage into the same backdrop rather than looking pasted on. */
.hero-reference-stage{
  overflow:hidden!important;
  background:transparent!important;
}
.hero-reference-stage-image{
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.98) 0%,#000 84%,rgba(0,0,0,.82) 94%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.98) 0%,#000 84%,rgba(0,0,0,.82) 94%,transparent 100%)!important;
}

/* Keep every major section in one visual universe. */
.worlds,
.process,
.create-section,
.preview-section,
.shop-showcase,
.status-section,
.policies{
  position:relative!important;
  isolation:isolate!important;
  background:
    linear-gradient(180deg,rgba(6,7,24,.70),rgba(7,8,25,.62) 50%,rgba(5,6,20,.72))!important;
  border-top:1px solid rgba(105,91,218,.10)!important;
  border-bottom:1px solid rgba(94,84,204,.08)!important;
}
.worlds::before,
.process::before,
.create-section::before,
.preview-section::before,
.shop-showcase::before,
.status-section::before,
.policies::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 15% 20%,rgba(136,69,255,.10),transparent 29%),
    radial-gradient(circle at 88% 58%,rgba(34,205,255,.07),transparent 28%)!important;
}
.worlds::after,
.process::after,
.create-section::after,
.preview-section::after,
.shop-showcase::after,
.status-section::after,
.policies::after{
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:-1px!important;height:90px!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,transparent,rgba(5,6,20,.42))!important;
}

/* Cards keep contrast while letting the continuous background show through. */
.worlds .section-kicker,
.process .section-heading,
.create-intro,
.create-card,
.preview-frame,
.preview-info,
.shop-showcase .section-kicker,
.product,
.process-ribbon{
  background:linear-gradient(160deg,rgba(10,11,31,.84),rgba(6,7,21,.88))!important;
  border-color:rgba(115,101,231,.22)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  box-shadow:0 26px 74px rgba(0,0,0,.25)!important;
}

/* The How It Works middle image must be the same Recast dog, not an unrelated astronaut scene. */
.recast-node-art img{
  object-fit:cover!important;
  object-position:center!important;
}

/* Restore the original merchandising example styling while keeping real customer previews unchanged. */
.product-node-art img{
  object-fit:cover!important;
  transform:none!important;
  background:#0a0b14!important;
}

/* Avoid dead black gaps between stacked sections. */
.section{margin-top:0!important}
footer,.site-footer{
  background:linear-gradient(180deg,rgba(5,6,19,.74),rgba(3,4,13,.90))!important;
  border-top:1px solid rgba(103,91,214,.12)!important;
}

@media(max-width:760px){
  body::before{
    inset:-2vh -10vw;
    background-position:57% center;
    background-size:auto 112%;
    filter:saturate(1.18) contrast(1.05) brightness(.86);
  }
  .hero{
    background-position:57% 31%!important;
    background-size:auto 100%!important;
  }
  .hero-reference-stage-image{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 87%,rgba(0,0,0,.78) 95%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 87%,rgba(0,0,0,.78) 95%,transparent 100%)!important;
  }
  .worlds,.process,.create-section,.preview-section,.shop-showcase,.status-section,.policies{
    background:linear-gradient(180deg,rgba(7,8,27,.72),rgba(6,7,24,.67),rgba(5,6,21,.75))!important;
  }
}


/* RM-047 — live hero showcase with isolated mug + pedestal */
.hero-live-stage{
  position:relative!important;
  width:min(1040px,100%)!important;
  height:520px!important;
  margin:18px auto 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.hero-live-stage::before,.hero-live-stage::after{display:none!important}
.hero-live-flow{
  position:absolute;
  left:1.5%;
  bottom:118px;
  z-index:3;
  width:45%;
  display:grid;
  grid-template-columns:1fr 30px 1fr 26px;
  align-items:center;
}
.hero-live-card{
  min-width:0;
  padding:7px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(165deg,rgba(10,11,29,.96),rgba(7,8,19,.94));
  border:1px solid rgba(111,95,255,.60);
  box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 28px rgba(101,79,255,.10);
}
.hero-live-card img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:18px;
}
.hero-live-recast{border-color:rgba(52,213,255,.60)}
.hero-live-meta{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:7px;
  padding:10px 7px 6px;
}
.hero-live-meta span{
  color:#9b8ff1;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.hero-live-recast .hero-live-meta span{color:#40ddf4}
.hero-live-meta b{
  color:#fff;
  font-size:10px;
  line-height:1.15;
  letter-spacing:.11em;
}
.hero-live-arrow{
  display:grid;
  place-items:center;
  color:#35dff6;
  font-size:31px;
  font-weight:500;
  text-shadow:0 0 18px rgba(53,221,246,.42);
}
.hero-live-arrow-product{color:#fff;text-shadow:0 0 18px rgba(104,93,255,.44)}
.hero-live-product{
  position:absolute;
  right:-1%;
  top:-14px;
  z-index:4;
  width:61%;
  min-height:470px;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.hero-live-product img{
  position:relative;
  z-index:2;
  width:100%;
  max-width:610px;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 30px 28px rgba(0,0,0,.52))
    drop-shadow(0 0 28px rgba(40,216,255,.28))
    drop-shadow(0 0 48px rgba(200,64,255,.22));
}
.hero-live-product-glow{
  position:absolute;
  z-index:1;
  width:105%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(40,216,255,.30) 0 20%,rgba(111,76,255,.23) 36%,rgba(255,67,219,.15) 52%,transparent 72%);
  filter:blur(38px);
}
.hero-live-tagline{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  z-index:5;
  display:grid;
  justify-items:center;
  gap:4px;
  color:#dedbea;
  text-align:center;
  letter-spacing:.30em;
  white-space:nowrap;
}
.hero-live-tagline span,.hero-live-tagline strong{font-size:10px;font-weight:600}
.hero-live-tagline strong{color:#f0eef7;font-weight:650}
.hero-live-tagline i{
  display:block;
  width:72px;
  height:4px;
  margin-top:7px;
  border-radius:999px;
  background:linear-gradient(90deg,#1ddbf2,#6173ff,#ef42d4);
  box-shadow:0 0 16px rgba(86,126,255,.30);
}

/* Product catalog: every store item remains on-site. */
.checkout-catalog .catalog-extra-product{display:flex!important}
.checkout-catalog .catalog-more-toggle{display:none!important}

@media(max-width:760px){
  .hero-live-stage{
    width:calc(100% + 12.6vw)!important;
    height:535px!important;
    margin:17px -6.3vw 0!important;
  }
  .hero-live-flow{
    left:4.5%;
    bottom:137px;
    width:46%;
    grid-template-columns:1fr 18px 1fr 14px;
  }
  .hero-live-card{padding:5px;border-radius:18px}
  .hero-live-card img{border-radius:13px}
  .hero-live-meta{padding:7px 4px 4px;gap:4px}
  .hero-live-meta span{font-size:8px}
  .hero-live-meta b{font-size:8px;letter-spacing:.075em}
  .hero-live-arrow{font-size:20px}
  .hero-live-product{
    right:-5%;
    top:4px;
    width:66%;
    min-height:415px;
  }
  .hero-live-product img{
    width:108%;
    max-width:none;
  }
  .hero-live-product-glow{width:118%;filter:blur(30px)}
  .hero-live-tagline{bottom:7px;letter-spacing:.27em}
  .hero-live-tagline span,.hero-live-tagline strong{font-size:8.5px}
  .hero-live-tagline i{width:58px;height:3px;margin-top:5px}
}
@media(max-width:420px){
  .hero-live-stage{height:505px!important}
  .hero-live-flow{left:3.8%;bottom:132px;width:47%}
  .hero-live-product{right:-7%;top:8px;width:67%;min-height:392px}
}


/* RM-048 — clean mug-only hero, no pedestal, no clipped glow */
.site-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.site-header nav{
  display:flex!important;
  align-items:center!important;
}
.site-header .nav-cta{
  width:auto!important;
  min-width:168px!important;
  justify-content:center!important;
  line-height:1!important;
}
.hero-live-stage{
  height:500px!important;
  overflow:visible!important;
}
.hero-live-flow{
  left:2.5%!important;
  bottom:118px!important;
  width:43%!important;
}
.hero-live-product{
  right:-1%!important;
  top:6px!important;
  width:61%!important;
  min-height:420px!important;
  overflow:visible!important;
}
.hero-live-product img{
  width:96%!important;
  max-width:560px!important;
  transform:none!important;
  object-fit:contain!important;
  filter:drop-shadow(0 30px 28px rgba(0,0,0,.50)) drop-shadow(0 0 26px rgba(40,216,255,.30)) drop-shadow(0 0 48px rgba(206,66,255,.22))!important;
}
.hero-live-product-glow{
  width:104%!important;
  opacity:.65!important;
  filter:blur(34px)!important;
}
.hero-live-product-label{
  position:absolute;
  left:50%;
  bottom:36px;
  z-index:4;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:220px;
  min-height:44px;
  padding:0 18px;
  border:1px solid rgba(44,220,255,.72);
  border-radius:999px;
  background:rgba(5,9,26,.88);
  box-shadow:0 0 28px rgba(40,212,255,.15);
  backdrop-filter:blur(10px);
  color:#fff;
  letter-spacing:.16em;
  white-space:nowrap;
}
.hero-live-product-label span{
  color:#27def5;
  font-size:10px;
  font-weight:900;
}
.hero-live-product-label b{
  font-size:10px;
  font-weight:900;
}
.hero-live-tagline{
  bottom:-2px!important;
}
.product-node-art{
  display:grid!important;
  place-items:center!important;
  background:radial-gradient(circle at 50% 50%,rgba(63,199,255,.10),rgba(8,9,20,.95) 68%)!important;
}
.product-node-art img{
  width:118%!important;
  height:118%!important;
  object-fit:contain!important;
  transform:none!important;
  filter:drop-shadow(0 0 11px rgba(56,216,255,.22))!important;
}

@media(max-width:760px){
  .site-header{
    min-height:84px!important;
    padding-left:22px!important;
    padding-right:22px!important;
  }
  .site-header .brand{
    gap:9px!important;
    font-size:14px!important;
  }
  .site-header .brand-mark{
    width:44px!important;
    height:44px!important;
  }
  .site-header .nav-cta{
    min-width:154px!important;
    min-height:50px!important;
    padding:0 16px!important;
    font-size:13.5px!important;
    border-radius:999px!important;
  }
  .site-header .nav-cta span{
    margin-left:5px!important;
    font-size:18px!important;
  }

  .hero-live-stage{
    height:500px!important;
  }
  .hero-live-flow{
    left:3.8%!important;
    bottom:122px!important;
    width:45%!important;
    grid-template-columns:1fr 17px 1fr 12px!important;
  }
  .hero-live-product{
    right:-4%!important;
    top:12px!important;
    width:64%!important;
    min-height:390px!important;
  }
  .hero-live-product img{
    width:98%!important;
    max-width:none!important;
  }
  .hero-live-product-glow{
    width:102%!important;
    opacity:.55!important;
    filter:blur(26px)!important;
  }
  .hero-live-product-label{
    bottom:29px!important;
    min-width:164px!important;
    min-height:38px!important;
    padding:0 12px!important;
    gap:7px!important;
  }
  .hero-live-product-label span,
  .hero-live-product-label b{
    font-size:8px!important;
  }
  .hero-live-tagline{
    bottom:1px!important;
  }
}

@media(max-width:420px){
  .site-header{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .site-header .nav-cta{
    min-width:146px!important;
    font-size:13px!important;
  }
  .hero-live-stage{height:480px!important}
  .hero-live-flow{bottom:118px!important;width:45.5%!important}
  .hero-live-product{right:-5%!important;width:65%!important;top:13px!important;min-height:374px!important}
  .hero-live-product-label{bottom:28px!important;min-width:154px!important}
}


/* RM-048 — clean mug-only hero composition and tighter header alignment */
.site-header .nav-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.site-header .nav-cta span{
  display:inline-block!important;
  line-height:1!important;
  transform:translateY(-1px)!important;
}

.hero-live-stage{
  height:485px!important;
}
.hero-live-flow{
  left:2.5%!important;
  bottom:108px!important;
  width:43%!important;
  grid-template-columns:1fr 24px 1fr 18px!important;
}
.hero-live-product{
  right:2%!important;
  top:6px!important;
  width:56%!important;
  min-height:385px!important;
}
.hero-live-product img{
  width:100%!important;
  max-width:540px!important;
  transform:none!important;
  filter:drop-shadow(0 28px 24px rgba(0,0,0,.46))!important;
}
.hero-live-product-glow{
  display:none!important;
}
.hero-live-product-label{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:32px;
  transform:translateX(-50%);
  min-width:214px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid rgba(46,219,255,.72);
  background:rgba(5,9,25,.88);
  box-shadow:0 0 24px rgba(40,215,255,.16);
  color:#fff;
  letter-spacing:.15em;
  white-space:nowrap;
}
.hero-live-product-label span{
  color:#35dff6;
  font-size:9px;
  font-weight:900;
}
.hero-live-product-label b{
  font-size:9px;
  font-weight:900;
}
.hero-live-tagline{bottom:0!important}

/* The small How It Works mug should use the same current mug art, cropped cleanly. */
.product-node-art{
  display:grid!important;
  place-items:center!important;
  background:radial-gradient(circle at 50% 50%,rgba(59,75,146,.25),rgba(7,8,18,.96) 72%)!important;
}
.product-node-art img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:scale(.98)!important;
  background:transparent!important;
}

@media(max-width:760px){
  .site-header .nav-cta{
    min-height:52px!important;
    padding:0 18px!important;
    font-size:14px!important;
  }
  .hero-live-stage{
    height:455px!important;
    width:calc(100% + 8vw)!important;
    margin:15px -4vw 0!important;
  }
  .hero-live-flow{
    left:3.5%!important;
    bottom:112px!important;
    width:44%!important;
    grid-template-columns:1fr 16px 1fr 12px!important;
  }
  .hero-live-product{
    right:1.5%!important;
    top:10px!important;
    width:57%!important;
    min-height:350px!important;
  }
  .hero-live-product img{
    width:100%!important;
    max-width:none!important;
  }
  .hero-live-product-label{
    bottom:24px!important;
    min-width:162px!important;
    padding:7px 10px!important;
    gap:7px!important;
  }
  .hero-live-product-label span,.hero-live-product-label b{font-size:7.5px!important}
  .hero-live-tagline{bottom:0!important}
}
@media(max-width:420px){
  .site-header .nav-cta{
    padding:0 14px!important;
    font-size:13px!important;
    gap:6px!important;
  }
  .hero-live-stage{height:430px!important}
  .hero-live-flow{
    left:3%!important;
    bottom:105px!important;
    width:45%!important;
  }
  .hero-live-product{
    right:0!important;
    top:12px!important;
    width:58%!important;
    min-height:330px!important;
  }
}