:root{--bg:#0b0b0d;--panel:#151519;--text:#f5f3ef;--muted:#a8a8b0;--line:#2b2b31;--accent:#ff5a45;--accent2:#ff7b69;--radius:22px;--max:1040px;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(900px 400px at 50% -120px,rgba(255,90,69,.14),transparent 62%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}.shell{width:min(100%,var(--max));margin:0 auto;padding:0 18px}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);font-weight:750}.brand-dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 28px rgba(255,90,69,.8)}.ghost-link{border:0;background:none;color:var(--muted);padding:8px}.hero{padding:42px 0 74px;text-align:center}.eyebrow{font-size:.73rem;letter-spacing:.17em;font-weight:800;color:var(--accent);margin-bottom:14px}h1,h2,h3{font-family:"Space Grotesk",Inter,system-ui,sans-serif;letter-spacing:-.035em;margin-top:0}h1{font-size:clamp(3rem,10vw,6.7rem);line-height:.91;margin-bottom:22px}h2{font-size:clamp(2rem,6vw,3.55rem);line-height:1.02}h3{font-size:1.25rem}.hero-copy{max-width:560px;margin:0 auto 26px;color:var(--muted);font-size:1.06rem;line-height:1.6}.demo-card{max-width:630px;margin:28px auto 26px}.demo-photo{position:relative;height:370px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:linear-gradient(140deg,#5d463b,#b2846c 52%,#6c4e41);box-shadow:0 35px 85px rgba(0,0,0,.35)}.skin-art{position:absolute;inset:0;background:radial-gradient(circle at 63% 54%,rgba(0,0,0,.06) 0 2%,transparent 3%),linear-gradient(120deg,rgba(255,255,255,.09),transparent 32%,rgba(0,0,0,.12))}.tattoo-mark{position:absolute;right:25%;top:43%;font-size:90px;line-height:1;color:#121012;transform:rotate(-14deg) skewX(-5deg);opacity:.82}.demo-cover{position:absolute;inset:0;background:linear-gradient(140deg,#5d463b,#b2846c 52%,#6c4e41);clip-path:inset(0 44% 0 0);pointer-events:none}.demo-divider{position:absolute;top:0;bottom:0;left:56%;width:2px;background:#fff;pointer-events:none}.demo-photo input{position:absolute;z-index:5;inset:auto 0 0;width:100%;height:100%;opacity:0;cursor:ew-resize}.demo-labels{position:absolute;z-index:6;left:16px;right:16px;top:14px;display:flex;justify-content:space-between;font-size:.68rem;font-weight:800;letter-spacing:.12em}.primary,.secondary{border-radius:15px;padding:15px 18px;font-weight:800;border:1px solid transparent;transition:.2s}.primary{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#fff;box-shadow:0 12px 36px rgba(255,90,69,.22)}.secondary{background:var(--panel);color:var(--text);border-color:var(--line)}.cta-xl{padding:18px 22px;min-width:min(100%,360px)}.trust-row{margin-top:14px;color:#d9d6d2;font-size:.84rem}.privacy-short{font-size:.75rem;color:#77777f;max-width:520px;margin:8px auto 0}.hidden{display:none!important}.flow{max-width:720px;margin:0 auto;padding:28px 0 90px}.progress-wrap{position:sticky;top:0;z-index:10;background:rgba(11,11,13,.92);backdrop-filter:blur(12px);padding:14px 0}.progress-text{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;margin-bottom:9px}.progress-track{height:4px;background:#222228;border-radius:10px;overflow:hidden}.progress-fill{height:100%;width:33%;background:var(--accent);transition:width .35s}.step{padding:38px 0 14px}.muted{color:var(--muted);line-height:1.55}.upload-zone{display:grid;place-items:center;gap:8px;min-height:210px;margin:24px 0 18px;border:1.5px dashed #414149;border-radius:var(--radius);background:linear-gradient(180deg,#151519,#111114)}.upload-icon{font-size:32px}.upload-zone span{font-size:.8rem;color:var(--muted)}.file-preview{margin:18px 0;display:grid;gap:12px}.file-preview img{width:100%;max-height:430px;object-fit:cover;border-radius:20px;border:1px solid var(--line);background:#0f0f12}.tattoo-preview img{object-fit:contain;max-height:300px;padding:12px}.ai-note{padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-size:.88rem}.privacy-badge{margin-top:12px;color:#7f7f88;font-size:.75rem}.chips{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 28px}.chip{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:999px;padding:11px 15px}.chip.active{border-color:var(--accent);background:rgba(255,90,69,.11)}.loader-orb{width:82px;height:82px;border-radius:50%;margin:15px auto 28px;background:radial-gradient(circle at 35% 35%,#ff9c8d,var(--accent) 36%,#3a1713 70%);box-shadow:0 0 70px rgba(255,90,69,.27);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.08);filter:brightness(1.15)}}#loadingStep{text-align:center;padding-top:85px}.loading-lines{max-width:420px;margin:25px auto;text-align:left;border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:8px 17px}.loading-lines div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #24242a;color:#ccc8c4}.loading-lines div:last-child{border:0}.result-card{position:relative;border-radius:24px;overflow:hidden;background:#111;border:1px solid var(--line);min-height:280px}.result-card canvas,.result-card img{width:100%;height:auto;display:block}.demo-pill{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.78);padding:6px 9px;border-radius:999px;font-size:.62rem;letter-spacing:.08em}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.price-box,.early-box{margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}.price-box{display:grid;gap:10px}.small-label{font-size:.65rem;font-weight:900;letter-spacing:.14em;color:var(--accent)}.early-box{text-align:center}.spark{font-size:30px;color:var(--accent)}#emailForm{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:16px}#emailInput{min-width:0;padding:14px;border-radius:13px;background:#0f0f12;border:1px solid var(--line);color:var(--text)}.success{margin-top:12px;color:#d8f5df}.how{padding:50px 0 80px;border-top:1px solid #1c1c21}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.how article{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px}.how article>span{font-size:.72rem;color:var(--accent);font-weight:900}.how article h3{margin:35px 0 8px}.how article p{color:var(--muted);font-size:.88rem;line-height:1.55}footer{padding:28px 0 45px;border-top:1px solid #1c1c21;display:flex;justify-content:space-between;gap:12px;color:#6f6f77;font-size:.77rem}.footer-links{display:flex;gap:7px;align-items:center}dialog{width:min(calc(100% - 28px),650px);border:1px solid var(--line);border-radius:22px;background:#151519;color:var(--text);padding:28px}dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}.dialog-close{float:right;background:none;border:0;color:var(--text);font-size:28px}dialog p{color:var(--muted);line-height:1.6}@media(max-width:680px){.topbar{height:62px}.brand{font-size:.88rem}.hero{padding-top:28px}.demo-photo{height:300px}.how-grid{grid-template-columns:1fr}.result-actions{grid-template-columns:1fr}#emailForm{grid-template-columns:1fr}footer{flex-direction:column}}

.top-actions{display:flex;align-items:center;gap:8px}
.language-wrap{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 8px}
.globe{font-size:.85rem}
.language-select{max-width:150px;border:0;outline:0;background:transparent;color:var(--text);font-size:.78rem;padding:5px 2px;cursor:pointer}
.language-select option{background:#151519;color:#f5f3ef}
@media(max-width:560px){
  .language-wrap{padding:3px 6px}
  .language-select{max-width:112px;font-size:.72rem}
  .top-actions .ghost-link{display:none}
}

/* Trynaro brand v0.4 */
.brand{
  letter-spacing:-.02em;
}
.brand-mark{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(145deg,var(--accent2),var(--accent));
  color:white;
  font-family:"Space Grotesk",Inter,system-ui,sans-serif;
  font-weight:900;
  font-size:1.05rem;
  line-height:1;
  box-shadow:0 8px 24px rgba(255,90,69,.18);
}
.brand-word{
  font-family:"Space Grotesk",Inter,system-ui,sans-serif;
  font-weight:800;
  font-size:1.02rem;
  letter-spacing:-.045em;
  text-transform:lowercase;
}
.hub-tagline{
  color:#77777f;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.01em;
  margin-bottom:18px;
}
footer strong{
  color:#aaa7a2;
  font-weight:800;
}

/* Trynaro split wordmark */
.brand-try{
  color:var(--accent);
}
.brand-naro{
  color:var(--text);
}


/* Trynaro Tattoo Preview v0.9 — compact conversion hero */
.brand-clean .brand-word{
  display:inline-flex;
  align-items:baseline;
  gap:0;
}
.brand-clean .brand-try,
.brand-clean .brand-naro{
  display:inline;
}
.hero-v3{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(430px,1.18fr);
  gap:52px;
  align-items:center;
  padding:26px 0 40px;
  text-align:left;
}
.hero-v3 .hero-copy-col{
  padding-top:8px;
}
.hero-v3 .eyebrow{
  margin-bottom:12px;
}
.hero-v3 h1{
  font-size:clamp(3rem,4.9vw,4.9rem);
  line-height:.93;
  letter-spacing:-.055em;
  margin:0 0 20px;
  max-width:560px;
}
.hero-v3 .hero-copy{
  margin:0 0 22px;
  max-width:500px;
  font-size:1rem;
}
.hero-v3 .hero-cta{
  width:min(100%,360px);
}
.hero-v3 .trust-row,
.hero-v3 .privacy-short{
  text-align:left;
  margin-left:0;
  max-width:470px;
}
.hero-visual-col{
  align-self:center;
  min-width:0;
}
.visual-kicker{
  margin:0 0 9px 4px;
  color:#77777f;
  font-size:.66rem;
  letter-spacing:.14em;
  font-weight:850;
}
.demo-real{
  margin:0;
  width:100%;
  max-width:620px;
}
.demo-real .demo-photo{
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  max-height:650px;
  border-radius:26px;
  overflow:hidden;
  background:#151519;
  box-shadow:0 28px 70px rgba(0,0,0,.35);
}
.demo-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  user-select:none;
  pointer-events:none;
}
.demo-after-img{
  z-index:1;
}
.demo-before-layer{
  position:absolute;
  z-index:2;
  inset:0 auto 0 0;
  width:12%;
  overflow:hidden;
}
.demo-before-layer .demo-before-img{
  width:200%;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:left center;
}
.demo-real .demo-labels{
  z-index:6;
  top:13px;
}
.demo-real #demoRange{
  z-index:8;
}
.demo-real .demo-divider{
  z-index:7;
  left:12%;
  transform:translateX(-1px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.demo-divider span{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#fff;
  color:#111;
  font-size:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.demo-caption{
  margin-top:8px;
  color:#77777f;
  font-size:.72rem;
  text-align:center;
}
@media(max-width:900px){
  .hero-v3{
    grid-template-columns:1fr;
    min-height:0;
    gap:26px;
    padding:30px 0 52px;
    text-align:center;
  }
  .hero-v3 .hero-copy-col{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .hero-v3 h1{
    font-size:clamp(3rem,10vw,4.6rem);
    max-width:650px;
  }
  .hero-v3 .hero-copy,
  .hero-v3 .trust-row,
  .hero-v3 .privacy-short{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .hero-visual-col{
    width:min(100%,600px);
    margin:0 auto;
  }
  .visual-kicker{text-align:center}
}
@media(max-width:560px){
  .topbar{height:62px}
  .hero-v3{padding-top:18px;gap:22px}
  .hero-v3 h1{
    font-size:clamp(2.75rem,13vw,3.9rem);
    margin-bottom:15px;
  }
  .hero-v3 .hero-copy{
    font-size:.96rem;
    margin-bottom:18px;
  }
  .hero-v3 .hero-cta{
    width:100%;
  }
  .hero-v3 .demo-photo{
    aspect-ratio:4/5;
    border-radius:22px;
  }
}

/* v1.1 after-first comparison */
.demo-real .demo-labels span{
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  padding:6px 9px;
  border-radius:999px;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.demo-real .demo-divider{
  box-shadow:0 0 0 1px rgba(0,0,0,.1);
}


/* v1.4 custom language menu — avoids native white Linux/Chrome dropdown */
.language-menu{
  position:relative;
  z-index:50;
}
.language-trigger{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:88px;
  justify-content:center;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#111114;
  color:var(--text);
  font-weight:750;
  font-size:.78rem;
  cursor:pointer;
}
.language-trigger:hover,
.language-trigger[aria-expanded="true"]{
  border-color:#474750;
  background:#17171b;
}
.language-globe{font-size:.9rem}
.language-current{min-width:22px;text-align:center}
.language-chevron{
  color:#9b9ba4;
  font-size:.78rem;
  transform:translateY(-1px);
}
.language-popover{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:225px;
  padding:7px;
  border:1px solid #303038;
  border-radius:16px;
  background:#151519;
  box-shadow:0 20px 60px rgba(0,0,0,.48);
  z-index:100;
}
.language-popover[hidden]{display:none!important}
.language-option{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:0;
  border-radius:11px;
  padding:11px 12px;
  background:transparent;
  color:#f5f3ef;
  text-align:left;
  font-size:.86rem;
  cursor:pointer;
}
.language-option:hover,
.language-option.is-active{
  background:#232329;
}
.language-option.is-active{
  color:#fff;
  box-shadow:inset 2px 0 0 var(--accent);
}
.language-option-code{
  color:#8d8d96;
  font-size:.7rem;
  font-weight:850;
  letter-spacing:.08em;
}
@media(max-width:560px){
  .language-trigger{min-width:76px;padding:8px 10px}
  .language-popover{width:210px}
}

/* v1.5 compact product landing: show next section sooner */
.hero-v3{
  min-height:auto !important;
  padding:18px 0 26px !important;
  gap:42px !important;
}
.hero-v3 .hero-copy-col{
  padding-top:0 !important;
}
.hero-v3 h1{
  font-size:clamp(2.85rem,4.5vw,4.45rem) !important;
  margin-bottom:16px !important;
}
.hero-v3 .hero-copy{
  margin-bottom:18px !important;
}
.hero-v3 .trust-row{
  margin-top:10px !important;
}
.hero-v3 .privacy-short{
  margin-top:5px !important;
}
.demo-real{
  max-width:560px !important;
}
.demo-real .demo-photo{
  max-height:560px !important;
  aspect-ratio:4/5;
}
.how{
  padding:34px 0 58px !important;
}
@media(min-width:901px){
  .hero-v3{
    min-height:calc(82vh - 64px) !important;
    align-items:center;
  }
}
@media(max-width:900px){
  .hero-v3{
    padding:26px 0 38px !important;
    gap:24px !important;
  }
  .demo-real{
    max-width:520px !important;
  }
  .how{
    padding-top:28px !important;
  }
}
@media(max-width:560px){
  .hero-v3{
    padding:16px 0 32px !important;
  }
  .hero-v3 h1{
    font-size:clamp(2.55rem,12vw,3.6rem) !important;
  }
  .demo-real{
    max-width:100% !important;
  }
}

/* v1.7 real AI staging */
.ai-error{
  margin-top:14px;
  width:min(100%,560px);
  padding:13px 15px;
  border:1px solid rgba(255,90,69,.38);
  border-radius:14px;
  background:rgba(255,90,69,.08);
  color:#ddd9d5;
  line-height:1.45;
}
.ai-error strong{display:block;color:#fff;margin-bottom:3px}
.ai-error span{font-size:.82rem;color:#aaa6a1}
.primary:disabled{opacity:.48;cursor:not-allowed;box-shadow:none;filter:saturate(.55)}

/* v1.8 — show the complete tattoo result on first impression */
.demo-real .demo-labels{
  pointer-events:none;
}
.demo-real .demo-labels span:first-child{
  position:absolute;
  left:12px;
  top:0;
  min-width:max-content;
}
.demo-real .demo-before-layer{
  width:12%;
}
.demo-real .demo-divider{
  left:12%;
}

/* v1.9 — clean BEFORE / AFTER proof, no cropped initial slider */
.clean-compare{
  width:100%;
  max-width:650px!important;
  margin:0!important;
}
.compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:100%;
}
.compare-panel{
  position:relative;
  margin:0;
  aspect-ratio:7/9;
  overflow:hidden;
  border-radius:22px;
  border:1px solid #2c2c32;
  background:#151519;
  box-shadow:0 22px 55px rgba(0,0,0,.28);
}
.compare-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.compare-label{
  position:absolute;
  z-index:3;
  top:12px;
  left:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(10,10,12,.74);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.1em;
}
.compare-panel:last-child .compare-label{
  left:auto;
  right:12px;
}
@media(max-width:900px){
  .clean-compare{max-width:620px!important;margin:0 auto!important}
}
@media(max-width:560px){
  .compare-grid{gap:8px}
  .compare-panel{border-radius:16px}
  .compare-label{top:8px;left:8px;padding:5px 8px;font-size:.58rem}
  .compare-panel:last-child .compare-label{right:8px}
}

.loading-stage{opacity:.48;transition:opacity .25s,transform .25s}.loading-stage.active{opacity:1;transform:translateX(3px)}.loading-stage.active span:last-child{color:var(--accent);animation:stagePulse 1.2s ease-in-out infinite}@keyframes stagePulse{50%{opacity:.35}}


/* v2.4 — simple AI tattoo creator */
.tattoo-choice-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 16px;max-width:720px}
.tattoo-choice{appearance:none;border:1px solid rgba(255,255,255,.11);background:#151519;color:#d8d8dd;border-radius:14px;padding:13px 16px;font:inherit;font-weight:800;cursor:pointer;transition:.2s ease}
.tattoo-choice:hover{border-color:rgba(255,84,84,.42);transform:translateY(-1px)}
.tattoo-choice.active{background:rgba(255,76,76,.10);border-color:var(--accent);color:#fff;box-shadow:0 10px 30px rgba(255,73,73,.08)}
.tattoo-source-panel{max-width:720px}
.tattoo-prompt-label{display:block;font-weight:800;margin:4px 0 9px;color:#fff}
.tattoo-prompt{width:100%;box-sizing:border-box;resize:vertical;min-height:104px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:#141418;color:#fff;padding:15px 16px;font:inherit;line-height:1.45;outline:none;transition:border-color .2s,box-shadow .2s}
.tattoo-prompt:focus{border-color:rgba(255,82,82,.75);box-shadow:0 0 0 3px rgba(255,82,82,.08)}
.tattoo-prompt::placeholder{color:#777780}
.prompt-hint{font-size:.82rem;color:#888891;margin:8px 0 14px}
.tattoo-preview-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px;max-width:720px;margin-top:12px}
#createTattooBtn.is-loading{pointer-events:none;opacity:.78}
#createTattooBtn.is-loading::after{content:' ···';letter-spacing:.12em;animation:tattooDots 1s steps(3,end) infinite}
@keyframes tattooDots{50%{opacity:.35}}
@media(max-width:560px){.tattoo-choice-tabs,.tattoo-preview-actions{grid-template-columns:1fr}.tattoo-choice{padding:12px 13px}}

/* v2.5: make transparent AI tattoo stencils easy to inspect before placement */
.tattoo-preview img{background:#f7f5f1;background-image:linear-gradient(45deg,rgba(0,0,0,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.035) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}

/* v2.7 — perceived speed + subtle preview protection */
.loading-progress{height:5px;max-width:420px;margin:18px auto 2px;border-radius:999px;background:#202026;overflow:hidden;position:relative}
.loading-progress span{position:absolute;inset:0 auto 0 0;width:42%;border-radius:inherit;background:linear-gradient(90deg,rgba(255,90,69,.18),var(--accent),rgba(255,123,105,.28));animation:trynaroLoadingSweep 1.55s cubic-bezier(.45,0,.55,1) infinite}
@keyframes trynaroLoadingSweep{0%{transform:translateX(-115%)}100%{transform:translateX(350%)}}

.result-card{isolation:isolate;user-select:none;-webkit-user-select:none}
.result-card canvas,.result-card img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
#resultStep:not(.hidden) .result-card{animation:resultReveal .48s cubic-bezier(.2,.8,.2,1)}
@keyframes resultReveal{from{opacity:.25;transform:translateY(8px) scale(.992)}to{opacity:1;transform:none}}
.preview-watermark{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.preview-watermark span{position:absolute;left:50%;white-space:nowrap;font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:clamp(1.35rem,5.3vw,2.65rem);font-weight:800;letter-spacing:.13em;color:#fff;opacity:.105;text-shadow:0 1px 10px rgba(0,0,0,.28);transform:translateX(-50%) rotate(-18deg)}
.preview-watermark span:first-child{top:40%}
.preview-watermark span:last-child{top:58%}
.result-actions .primary{min-height:52px}
@media(max-width:680px){.preview-watermark span{font-size:clamp(1.1rem,6.8vw,1.9rem);opacity:.11}.result-actions #hdBtn{order:-1}}


/* v2.9 — perceived speed + watermark purchase clarity */
.tattoo-generation-status{margin:16px 0 4px;padding:16px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(180deg,#17171b,#131316)}
.mini-loading-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.mini-loading-head strong{font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:1rem}.mini-loading-head span{font-size:.75rem;color:#8f8f98;white-space:nowrap}
.mini-loading-copy{font-size:.82rem;margin:7px 0 0}.loading-progress.mini{max-width:none;margin:13px 0 8px;height:4px}
.mini-loading-stages{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:9px}.tattoo-loading-stage{display:flex;justify-content:space-between;gap:8px;padding:7px 0;color:#7f7f88;font-size:.76rem;transition:.2s}.tattoo-loading-stage.active{color:#e8e4df}.tattoo-loading-stage.active span:last-child{color:var(--accent);animation:stagePulse 1.2s ease-in-out infinite}
.loading-subcopy{margin:-12px auto 0;max-width:430px;font-size:.92rem}.loading-eta{font-size:.8rem;margin:12px 0 0;color:#8e8e97}.loading-almost{margin-top:6px}
.watermark-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:11px auto 4px;padding:0 8px;color:#a7a7af;font-size:.77rem;line-height:1.4;text-align:center}.watermark-note>span:first-child{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:rgba(255,90,69,.11);border:1px solid rgba(255,90,69,.32);color:var(--accent);font-size:.68rem;font-weight:900}
@media(max-width:680px){.mini-loading-head{align-items:flex-start;flex-direction:column;gap:3px}.mini-loading-stages{grid-template-columns:1fr}.watermark-note{font-size:.73rem}}

/* v3.3 — mobile hero polish: clearer trust copy + faster proof visibility */
@media(max-width:560px){
  .hero-v3{gap:16px!important}
  .hero-v3 .trust-row{
    margin-top:8px!important;
    font-size:.82rem;
    line-height:1.3;
  }
  .hero-v3 .privacy-short{
    margin-top:3px!important;
    padding:0 4px;
    max-width:390px;
    font-size:.78rem;
    line-height:1.35;
  }
  .hero-v3 .visual-kicker{margin-bottom:7px}
}


/* v3.8 — legal/consent polish */
.footer-legal{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.footer-legal a,.footer-legal button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.footer-legal a:hover,.footer-legal button:hover{color:#d8d5d1}
.analytics-consent{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10000;width:min(620px,calc(100% - 24px));padding:16px 18px;border:1px solid #38383f;border-radius:18px;background:rgba(20,20,24,.96);box-shadow:0 22px 70px rgba(0,0,0,.5);backdrop-filter:blur(16px)}
.analytics-consent.hidden{display:none!important}
.analytics-consent strong{display:block;margin-bottom:5px;color:#f4f1ed}
.analytics-consent p{margin:0;color:#aaa8ae;font-size:.84rem;line-height:1.45}
.analytics-consent-actions{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.analytics-consent-actions button{border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer}
.analytics-consent .allow{border:0;background:#ff5a45;color:#fff}
.analytics-consent .decline{border:1px solid #38383f;background:#18181c;color:#d8d5d1}
@media(max-width:560px){.analytics-consent{bottom:10px;padding:14px}.analytics-consent-actions button{flex:1}.footer-legal{gap:10px 14px}}

.ai-disclosure{margin:10px 0 4px;color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.04em;text-align:center}


/* v3.8.7 — upload completion conversion fix */
#bodyUploadZone.has-file{min-height:72px;margin:14px 0 10px;padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
#bodyUploadZone.has-file .upload-icon{font-size:22px}
#bodyUploadZone.has-file strong{font-size:.92rem}
#bodyUploadZone.has-file span{font-size:.72rem}
#bodyPreviewWrap{margin:10px 0 10px}
#bodyPreviewWrap img{max-height:190px;object-fit:cover;object-position:center}
#bodyPreviewWrap .ai-note{padding:9px 12px;font-size:.8rem}
#toTattooBtn{width:100%;min-height:52px;margin-top:2px}
@media(max-width:680px){#bodyUploadZone.has-file{min-height:64px;margin-top:12px}#bodyPreviewWrap img{max-height:145px}#bodyPreviewWrap .ai-note{padding:8px 10px;font-size:.76rem}}


/* v3.8.11 — fixed step-1 locale-safe completion layout */
#step1.has-body-file{
  padding-top:18px;
  padding-bottom:8px;
}
#step1.has-body-file .eyebrow{
  margin-bottom:6px;
}
#step1.has-body-file h2{
  font-size:clamp(1.9rem,4.6vw,2.75rem);
  line-height:1.02;
  margin-bottom:8px;
}
#step1.has-body-file>p.muted{
  margin:0 0 7px;
  line-height:1.35;
  font-size:.94rem;
}
#step1.has-body-file #bodyUploadZone.has-file{
  min-height:58px;
  margin:8px 0 7px;
  padding:8px 12px;
}
#step1.has-body-file #bodyPreviewWrap{
  margin:6px 0 7px;
  gap:6px;
}
#step1.has-body-file #bodyPreviewWrap img{
  max-height:122px;
  border-radius:16px;
}
#step1.has-body-file #bodyPreviewWrap .ai-note{
  padding:7px 10px;
  font-size:.76rem;
}
#step1.has-body-file #toTattooBtn{
  margin-top:0;
  min-height:50px;
}
#step1.has-body-file .privacy-badge{
  margin-top:7px;
}
@media(max-width:680px){
  #step1.has-body-file{padding-top:14px}
  #step1.has-body-file h2{
    font-size:clamp(1.75rem,8vw,2.35rem);
    margin-bottom:7px;
  }
  #step1.has-body-file>p.muted{
    font-size:.88rem;
    margin-bottom:6px;
  }
  #step1.has-body-file #bodyUploadZone.has-file{
    min-height:54px;
    margin:7px 0 6px;
  }
  #step1.has-body-file #bodyPreviewWrap img{max-height:105px}
  #step1.has-body-file #bodyPreviewWrap .ai-note{font-size:.73rem}
}

/* v3.8.12 — step-2 completion layout: keep next action visible after design selection */
#step2.has-tattoo-file{
  padding-top:18px;
  padding-bottom:8px;
}
#step2.has-tattoo-file .eyebrow{
  margin-bottom:6px;
}
#step2.has-tattoo-file h2{
  font-size:clamp(1.9rem,4.6vw,2.75rem);
  line-height:1.02;
  margin-bottom:8px;
}
#step2.has-tattoo-file>p.muted{
  margin:0 0 7px;
  line-height:1.35;
  font-size:.94rem;
}
#step2.has-tattoo-file .tattoo-choice-tabs{
  margin:8px 0 8px;
}
/* Once a tattoo is selected, the large creation/upload panel is no longer needed.
   Tabs remain available; choosing another source resets this confirmation state. */
#step2.has-tattoo-file .tattoo-source-panel{
  display:none!important;
}
#step2.has-tattoo-file #tattooPreviewWrap{
  margin:7px 0 7px;
  gap:6px;
}
#step2.has-tattoo-file #tattooPreviewWrap img{
  max-height:135px;
  padding:8px;
  border-radius:16px;
}
#step2.has-tattoo-file #tattooPreviewWrap .ai-note{
  padding:7px 10px;
  font-size:.76rem;
}
#step2.has-tattoo-file #tattooPreviewActions{
  margin-top:7px;
}
#step2.has-tattoo-file #tattooPreviewActions button{
  min-height:50px;
}
@media(max-width:680px){
  #step2.has-tattoo-file{padding-top:14px}
  #step2.has-tattoo-file h2{
    font-size:clamp(1.75rem,8vw,2.35rem);
    margin-bottom:7px;
  }
  #step2.has-tattoo-file>p.muted{
    font-size:.88rem;
    margin-bottom:6px;
  }
  #step2.has-tattoo-file .tattoo-choice-tabs{
    margin:7px 0 7px;
  }
  #step2.has-tattoo-file #tattooPreviewWrap img{
    max-height:110px;
  }
  #step2.has-tattoo-file #tattooPreviewWrap .ai-note{
    font-size:.73rem;
  }
}

/* v3.8.14: keep expected generation time visible without scrolling */
#loadingStep{padding-top:58px}
#loadingStep .loader-orb{margin-bottom:22px}
#loadingStep .loading-eta{margin:8px 0 0;font-size:.82rem;color:#a8a8b0}
#loadingStep .loading-progress{margin-top:14px}
#loadingStep .loading-lines{margin-top:18px}
@media(max-width:680px){#loadingStep{padding-top:42px}.loader-orb{width:70px;height:70px}}

/* v3.8.19 — immersive result + single-focus floating purchase CTA
   Keep the result large. Only the purchase decision floats over the viewport;
   retry remains a quiet secondary action in document flow. */
#resultStep{
  width:min(900px,calc(100vw - 36px));
  margin-left:calc((100% - min(900px,calc(100vw - 36px))) / 2);
  transform:none;
  padding-top:14px;
  padding-bottom:112px;
}
#resultStep .eyebrow{margin-bottom:8px}
#resultStep h2{
  font-size:clamp(2.35rem,5.4vw,3.45rem);
  line-height:.98;
  margin-bottom:18px;
}
#resultStep .result-card{
  width:100%;
  height:auto;
  min-height:0;
  display:block;
  overflow:hidden;
  border-radius:26px;
  background:#0f0f12;
  box-shadow:0 28px 85px rgba(0,0,0,.42);
}
#resultStep .result-card canvas,
#resultStep .result-card img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:initial;
  display:block;
}
#resultStep .ai-disclosure{margin:9px 0 3px}
#resultStep .watermark-note{margin:7px auto 4px}

/* Secondary action stays below the result instead of competing with purchase. */
#resultStep .result-retry-actions{
  display:flex;
  justify-content:center;
  margin:12px 0 0;
}
#resultStep .result-retry-actions #retryBtn{
  min-height:42px;
  padding:10px 16px;
  min-width:220px;
  max-width:320px;
  color:#bdb9b4;
  background:rgba(21,21,25,.72);
  border-color:rgba(255,255,255,.09);
  box-shadow:none;
}
#resultStep .result-retry-actions #retryBtn:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.18);
}

/* One focused purchase action, deliberately compact so it hides as little of
   the tattoo as possible while remaining continuously available. */
#resultStep .result-actions{
  position:fixed;
  z-index:80;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(360px,calc(100vw - 28px));
  display:block;
  margin:0;
  padding:7px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:19px;
  background:rgba(17,17,20,.86);
  box-shadow:0 18px 50px rgba(0,0,0,.50),0 0 34px rgba(255,90,69,.10);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
#resultStep .result-actions #hdBtn{
  width:100%;
  min-height:54px;
  font-size:1rem;
  box-shadow:0 12px 34px rgba(255,90,69,.30);
}

/* When validation follow-up opens, return purchase action to normal flow. */
#resultStep:has(#priceBox:not(.hidden)) .result-actions,
#resultStep:has(#earlyBox:not(.hidden)) .result-actions{
  position:static;
  left:auto;
  bottom:auto;
  transform:none;
  width:min(360px,100%);
  margin:14px auto 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

@media(max-width:680px){
  #resultStep{
    width:calc(100vw - 24px);
    margin-left:calc((100% - (100vw - 24px)) / 2);
    padding-top:8px;
    padding-bottom:116px;
  }
  #resultStep .eyebrow{margin-bottom:5px}
  #resultStep h2{
    font-size:clamp(2rem,9.4vw,2.7rem);
    margin-bottom:12px;
  }
  #resultStep .result-card{border-radius:20px}
  #resultStep .result-retry-actions{margin-top:10px}
  #resultStep .result-retry-actions #retryBtn{
    min-width:0;
    width:min(100%,280px);
    min-height:40px;
    font-size:.84rem;
  }
  #resultStep .result-actions{
    bottom:max(10px,env(safe-area-inset-bottom));
    width:calc(100vw - 24px);
    padding:7px;
    border-radius:17px;
  }
  #resultStep .result-actions #hdBtn{
    min-height:52px;
    font-size:.95rem;
  }
}


/* v3.8.20 — final result conversion layout
   Benchmark-informed pattern: preserve the immersive result, keep the purchase
   decision adjacent (never over the artwork), and make one-time/no-subscription
   value explicit without adding a paywall before the wow moment. */
#resultStep{
  width:min(1240px,calc(100vw - 36px));
  margin-left:calc((100% - min(1240px,calc(100vw - 36px))) / 2);
  padding-top:14px;
  padding-bottom:44px;
}
#resultStep .eyebrow{margin-bottom:7px}
#resultStep h2{
  font-size:clamp(2.45rem,4.5vw,3.55rem);
  line-height:.98;
  margin-bottom:20px;
}
#resultStep .result-conversion-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 316px;
  gap:24px;
  align-items:start;
}
#resultStep .result-visual{min-width:0}
#resultStep .result-card{
  width:100%;
  height:auto;
  min-height:0;
  display:block;
  overflow:hidden;
  border-radius:26px;
  background:#0f0f12;
  box-shadow:0 30px 90px rgba(0,0,0,.46);
}
#resultStep .result-card canvas,
#resultStep .result-card img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:initial;
  display:block;
}
#resultStep .ai-disclosure{
  margin:10px 0 3px;
  text-align:center;
}
#resultStep .watermark-note{
  margin:7px auto 0;
  text-align:center;
  max-width:760px;
}

#resultStep .result-offer-panel{
  position:sticky;
  top:92px;
  padding:24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  background:
    radial-gradient(340px 180px at 50% 0,rgba(255,90,69,.12),transparent 68%),
    rgba(21,21,25,.94);
  box-shadow:0 24px 70px rgba(0,0,0,.36);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
#resultStep .result-offer-kicker{
  color:var(--accent);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.15em;
  margin-bottom:10px;
}
#resultStep .result-offer-panel>h3{
  font-size:1.65rem;
  line-height:1.06;
  margin:0 0 10px;
}
#resultStep .result-offer-copy{
  margin:0;
  color:var(--muted);
  line-height:1.5;
  font-size:.92rem;
}
#resultStep .result-price{
  margin:20px 0 14px;
  font-family:"Space Grotesk",Inter,system-ui,sans-serif;
  font-size:2.15rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.035em;
}
#resultStep .result-actions{
  position:static;
  inset:auto;
  transform:none;
  width:100%;
  display:block;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#resultStep .result-actions #hdBtn{
  width:100%;
  min-height:56px;
  font-size:.98rem;
  box-shadow:0 14px 36px rgba(255,90,69,.28);
}
#resultStep .result-offer-trust{
  margin-top:11px;
  text-align:center;
  color:#8c8c94;
  font-size:.76rem;
  line-height:1.35;
}
#resultStep .result-retry-actions{
  display:block;
  margin:14px 0 0;
}
#resultStep .result-retry-actions #retryBtn{
  width:100%;
  min-width:0;
  max-width:none;
  min-height:44px;
  padding:10px 14px;
  color:#c5c2bd;
  background:rgba(10,10,12,.34);
  border-color:rgba(255,255,255,.09);
  box-shadow:none;
  font-size:.86rem;
}
#resultStep .result-retry-actions #retryBtn:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.18);
}

/* Validation follow-up lives in the purchase rail instead of sending the user
   away from the result. */
#resultStep .result-offer-panel .price-box,
#resultStep .result-offer-panel .early-box{
  margin-top:18px;
  padding:17px;
  border-radius:17px;
  background:rgba(10,10,12,.46);
}
#resultStep .result-offer-panel .price-box h3,
#resultStep .result-offer-panel .early-box h3{
  font-size:1.05rem;
  line-height:1.25;
  margin:7px 0;
}
#resultStep .result-offer-panel .price-box .muted,
#resultStep .result-offer-panel .early-box p{
  font-size:.78rem;
  line-height:1.45;
}
#resultStep .result-offer-panel .price-box button{
  width:100%;
  margin-top:8px;
  min-height:44px;
  padding:10px 12px;
  font-size:.82rem;
}

@media(max-width:920px){
  #resultStep{
    width:min(900px,calc(100vw - 28px));
    margin-left:calc((100% - min(900px,calc(100vw - 28px))) / 2);
  }
  #resultStep .result-conversion-grid{
    grid-template-columns:minmax(0,1fr) 286px;
    gap:18px;
  }
  #resultStep .result-offer-panel{padding:20px}
}

@media(max-width:760px){
  #resultStep{
    width:calc(100vw - 24px);
    margin-left:calc((100% - (100vw - 24px)) / 2);
    padding-top:8px;
    padding-bottom:34px;
  }
  #resultStep .eyebrow{margin-bottom:5px}
  #resultStep h2{
    font-size:clamp(2rem,9.4vw,2.75rem);
    margin-bottom:13px;
  }
  #resultStep .result-conversion-grid{
    display:block;
  }
  #resultStep .result-card{border-radius:20px}
  #resultStep .result-offer-panel{
    position:static;
    margin-top:16px;
    padding:20px;
    border-radius:20px;
  }
  #resultStep .result-offer-panel>h3{font-size:1.45rem}
  #resultStep .result-price{font-size:2rem;margin-top:17px}
  #resultStep .result-actions #hdBtn{min-height:54px}
}


/* v3.8.21 — single-click validation intent
   The purchase CTA itself is the validation signal. After the click, show only
   a transparent no-charge status; never ask the user to reconfirm willingness. */
#resultStep .purchase-test-notice{
  margin-top:12px;
  padding:11px 12px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:rgba(10,10,12,.34);
  color:#9c9ca4;
  font-size:.76rem;
  line-height:1.4;
}
#resultStep .purchase-test-notice>span:first-child{
  color:var(--accent);
  font-weight:900;
}
#resultStep #hdBtn:disabled{
  cursor:default;
  opacity:.76;
  box-shadow:none;
}


/* v3.8.32 — Mobile Conversion V2: literal promise + proof before CTA */
.mobile-proof-v2{display:none}
.hero-steps-v2{
  margin-top:11px;
  display:flex;
  flex-direction:column;
  gap:3px;
  color:#aaa7a2;
  font-size:.76rem;
  line-height:1.35;
}
.hero-steps-v2 strong{color:#d9d6d2;font-size:.78rem;letter-spacing:.01em}
.hero-trust-v2{color:#d9d6d2}

@media(max-width:560px){
  .hero-v2-conversion{
    padding:10px 0 24px!important;
    gap:0!important;
    text-align:left!important;
  }
  .hero-v2-conversion .hero-copy-col{
    width:100%;
    align-items:stretch!important;
  }
  .hero-v2-conversion .eyebrow{
    margin:0 0 8px!important;
    font-size:.63rem;
    line-height:1.3;
    letter-spacing:.13em;
    text-align:left;
  }
  .hero-v2-conversion h1{
    font-size:clamp(2.45rem,11.5vw,3.45rem)!important;
    line-height:.94!important;
    margin:0 0 10px!important;
    max-width:390px;
    text-align:left;
  }
  .hero-v2-conversion .hero-copy{
    margin:0 0 11px!important;
    max-width:420px;
    font-size:.91rem!important;
    line-height:1.42;
    text-align:left!important;
    color:#b8b5b1;
  }
  .hero-v2-conversion .hero-visual-col{display:none!important}
  .mobile-proof-v2{
    display:block;
    margin:2px 0 12px;
    width:100%;
  }
  .mobile-proof-kicker{
    margin:0 0 6px 2px;
    color:#8d8d96;
    font-size:.58rem;
    line-height:1;
    letter-spacing:.13em;
    font-weight:850;
  }
  .mobile-proof-stage{
    position:relative;
    width:100%;
    height:180px;
    overflow:hidden;
    border:1px solid #2d2d34;
    border-radius:18px;
    background:#151519;
    box-shadow:0 18px 46px rgba(0,0,0,.28);
  }
  .mobile-proof-after{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 48%;
    display:block;
  }
  .mobile-proof-after-label,
  .mobile-proof-before-label{
    position:absolute;
    z-index:4;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(10,10,12,.79);
    border:1px solid rgba(255,255,255,.13);
    color:#fff;
    font-size:.55rem;
    font-weight:900;
    letter-spacing:.1em;
    backdrop-filter:blur(8px);
  }
  .mobile-proof-after-label{top:8px;right:8px}
  .mobile-proof-before-card{
    position:absolute;
    z-index:5;
    left:9px;
    bottom:9px;
    width:34%;
    height:66%;
    min-width:102px;
    max-width:142px;
    overflow:hidden;
    border-radius:13px;
    border:2px solid rgba(255,255,255,.86);
    background:#111114;
    box-shadow:0 14px 34px rgba(0,0,0,.48);
  }
  .mobile-proof-before-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:25% center;
    display:block;
  }
  .mobile-proof-before-label{top:6px;left:6px}
  .mobile-proof-caption{
    position:absolute;
    z-index:4;
    right:9px;
    bottom:9px;
    max-width:52%;
    padding:6px 8px;
    border-radius:999px;
    background:rgba(10,10,12,.72);
    color:#e1ded9;
    font-size:.61rem;
    font-weight:760;
    line-height:1.2;
    text-align:right;
    backdrop-filter:blur(8px);
  }
  .hero-v2-conversion .hero-cta{
    width:100%!important;
    min-height:54px;
    margin:0!important;
    padding:15px 18px!important;
    font-size:1rem;
    box-shadow:0 14px 36px rgba(255,90,69,.27);
  }
  .hero-v2-conversion .trust-row{
    margin:8px 0 0!important;
    text-align:center!important;
    font-size:.76rem!important;
    line-height:1.25;
  }
  .hero-steps-v2{
    margin-top:7px;
    align-items:center;
    text-align:center;
    gap:1px;
    font-size:.67rem;
  }
  .hero-steps-v2 strong{font-size:.72rem}
  .hero-v2-conversion .privacy-short{display:none!important}
}

@media(max-width:380px){
  .mobile-proof-stage{height:158px}
  .hero-v2-conversion h1{font-size:2.35rem!important}
  .hero-v2-conversion .hero-copy{font-size:.87rem!important}
}

/* v3.8.34 — body-photo confirmation UX
   Show the entire selected body photo instead of cropping it into a shallow strip.
   The preview remains compact enough to keep the primary Next action close on mobile. */
#step1.has-body-file #bodyPreviewWrap{
  padding:10px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#101013;
}
#step1.has-body-file #bodyPreviewWrap img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:340px;
  margin:0 auto;
  object-fit:contain;
  object-position:center;
  background:#0b0b0d;
}
#step1.has-body-file #bodyPreviewWrap .ai-note{
  margin-top:2px;
}
@media(max-width:680px){
  #step1.has-body-file #bodyPreviewWrap{
    padding:8px;
  }
  #step1.has-body-file #bodyPreviewWrap img{
    width:auto;
    max-width:100%;
    max-height:min(32vh,260px);
    object-fit:contain;
  }
}

/* v3.8.35 — body-photo confirmation frame
   v3.8.34 removed cropping but allowed the preview box to collapse to the source aspect ratio.
   Keep a useful confirmation canvas and fit the complete photo inside it. */
#step1.has-body-file #bodyPreviewWrap{
  overflow:hidden;
}
#step1.has-body-file #bodyPreviewWrap img{
  width:100%;
  height:clamp(220px,32vw,360px);
  max-width:100%;
  max-height:none;
  object-fit:contain;
  object-position:center;
  background:#0b0b0d;
}
@media(max-width:680px){
  #step1.has-body-file #bodyPreviewWrap img{
    width:100%;
    height:clamp(210px,42vh,300px);
    max-height:none;
    object-fit:contain;
  }
}

/* v3.8.36 — keep CTA in the first viewport after photo selection.
   Full photo stays visible (contain), but the confirmation frame is compact enough
   that the Next action remains immediately discoverable instead of falling below the fold. */
#step1.has-body-file #bodyPreviewWrap img{
  width:100%;
  height:clamp(190px,22vw,250px);
  max-height:none;
  object-fit:contain;
  object-position:center;
  background:#0b0b0d;
}
#step1.has-body-file #toTattooBtn{
  width:100%;
  margin-top:8px;
}
@media(max-width:680px){
  #step1.has-body-file #bodyPreviewWrap img{
    width:100%;
    height:clamp(170px,28vh,220px);
    max-height:none;
    object-fit:contain;
  }
}

/* v3.8.37 — mobile quick purchase CTA above the fold */
#resultStep .mobile-result-cta{
  display:none;
}
@media(max-width:760px){
  #resultStep .mobile-result-cta{
    display:grid;
    gap:10px;
    margin:-2px 0 14px;
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background:
      radial-gradient(240px 120px at 50% 0,rgba(255,90,69,.13),transparent 72%),
      rgba(21,21,25,.95);
    box-shadow:0 18px 44px rgba(0,0,0,.28);
  }
  #resultStep .mobile-result-cta-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  #resultStep .mobile-result-cta-kicker{
    color:var(--accent);
    font-size:.67rem;
    font-weight:900;
    letter-spacing:.14em;
  }
  #resultStep .mobile-result-cta-price{
    font-family:"Space Grotesk",Inter,system-ui,sans-serif;
    font-size:1.3rem;
    font-weight:800;
    letter-spacing:-.03em;
    line-height:1;
  }
  #resultStep #mobileHdBtn{
    width:100%;
    min-height:54px;
    font-size:1rem;
    box-shadow:0 14px 36px rgba(255,90,69,.26);
  }
  #resultStep .mobile-result-cta-trust{
    text-align:center;
    color:#8c8c94;
    font-size:.74rem;
    line-height:1.35;
    margin-top:-2px;
  }
  #resultStep #mobilePurchaseTestNotice{
    margin-top:0;
  }
}

/* v3.8.38 — WOW-first mobile result: keep the preview dominant and surface a compact sticky purchase CTA */
@media(max-width:760px){
  #resultStep{
    padding-bottom:128px;
  }
  #resultStep .mobile-result-cta{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:60;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:12px;
    margin:0;
    padding:10px 10px 10px 14px;
    border-radius:18px;
    background:rgba(20,20,24,.96);
    box-shadow:0 18px 50px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.09);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  #resultStep .mobile-result-cta-top{
    display:block;
    min-width:66px;
  }
  #resultStep .mobile-result-cta-kicker{
    display:none;
  }
  #resultStep .mobile-result-cta-price{
    display:block;
    font-size:1.35rem;
    white-space:nowrap;
  }
  #resultStep #mobileHdBtn{
    min-height:52px;
    padding:12px 14px;
    border-radius:14px;
    font-size:.95rem;
  }
  #resultStep .mobile-result-cta-trust{
    display:none;
  }
  #resultStep #mobilePurchaseTestNotice{
    grid-column:1 / -1;
    margin:0;
    padding:8px 10px;
    font-size:.72rem;
    line-height:1.3;
  }
}

/* v3.8.39 — step 2 upload-first simplification */
#step2 .tattoo-choice-tabs{display:none!important}
#step2 .tattoo-upload-intro{
  margin:18px 0 12px;
  max-width:760px;
}
#step2 .tattoo-upload-kicker{
  color:var(--accent);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:6px;
}
#step2 .tattoo-upload-copy{
  color:#b8b8c0;
  font-size:.97rem;
  line-height:1.45;
}
#step2 .tattoo-secondary-switch{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0 2px;
  color:#9a9aa3;
  font-size:.95rem;
}
#step2 .text-link-btn{
  appearance:none;
  border:none;
  background:none;
  color:#fff;
  font:inherit;
  font-weight:800;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
#step2 .text-link-btn:hover{color:var(--accent)}
#step2 #backToUploadTattooBtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 12px;
  color:#d8d8df;
}
@media(max-width:560px){
  #step2 .tattoo-upload-intro{margin:14px 0 10px}
  #step2 .tattoo-upload-copy{font-size:.92rem}
  #step2 .tattoo-secondary-switch{font-size:.9rem;margin-top:10px}
}

/* v3.8.40 — keep AI tattoo generation feedback visually attached to the action */
#step2 #aiTattooPanel .tattoo-generation-status{
  margin-top:8px;
}
@media(min-width:681px){
  #step2 #aiTattooPanel .tattoo-generation-status{
    margin-top:7px;
    padding-top:14px;
  }
}

/* v3.8.41 — AI generation focus: once generation starts, collapse the prompt editor
   so progress feedback moves up immediately and stays in the user's focal area. */
#step2 #aiTattooPanel:has(.tattoo-generation-status:not(.hidden)) .tattoo-prompt-label,
#step2 #aiTattooPanel:has(.tattoo-generation-status:not(.hidden)) .tattoo-prompt,
#step2 #aiTattooPanel:has(.tattoo-generation-status:not(.hidden)) .prompt-hint{
  display:none;
}
#step2 #aiTattooPanel:has(.tattoo-generation-status:not(.hidden)) #backToUploadTattooBtn{
  margin-bottom:8px;
}
#step2 #aiTattooPanel:has(.tattoo-generation-status:not(.hidden)) #createTattooBtn{
  margin-top:0;
}
#step2 #aiTattooPanel .tattoo-generation-status{
  margin-top:6px;
}
@media(max-width:680px){
  #step2 #aiTattooPanel:has(.tattoo-generation-status:not(.hidden)) #backToUploadTattooBtn{
    margin-bottom:6px;
  }
  #step2 #aiTattooPanel .tattoo-generation-status{
    margin-top:6px;
  }
}

/* v3.8.42 — resilient preview recovery */
#step3 .ai-error-retry{
  width:100%;
  margin-top:10px;
  min-height:44px;
  padding:10px 14px;
  color:#fff;
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.045);
}
#step3 .ai-error-retry:hover{
  border-color:rgba(255,90,69,.45);
  background:rgba(255,90,69,.08);
}

/* v3.8.44 / V5 — transparent monetization + stronger post-WOW value */
.hero-price-line{
  margin-top:14px;
  font-size:.9rem;
  line-height:1.35;
  font-weight:850;
  color:#f1efeb;
}
.hero-price-sub{
  margin-top:5px;
  color:#9898a1;
  font-size:.78rem;
}
#resultStep .result-offer-benefits{
  list-style:none;
  display:grid;
  gap:9px;
  margin:17px 0 0;
  padding:0;
}
#resultStep .result-offer-benefits li{
  position:relative;
  padding-left:24px;
  color:#d7d4d0;
  font-size:.86rem;
  line-height:1.4;
}
#resultStep .result-offer-benefits li::before{
  content:'✓';
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);
  font-weight:900;
}
/* The free result should still create WOW, but should read clearly as a preview rather than the finished paid asset. */
#resultStep .preview-watermark span{
  opacity:.17;
  text-shadow:0 1px 12px rgba(0,0,0,.38);
}
/* Extra placement/size attempts are part of the V5 Tattoo Pack proposition. */
#resultStep .result-retry-actions{
  display:none!important;
}
@media(max-width:760px){
  .hero-price-line{
    margin-top:12px;
    font-size:.84rem;
  }
  .hero-price-sub{
    margin-top:4px;
    font-size:.73rem;
    line-height:1.4;
  }
  #resultStep .preview-watermark span{
    opacity:.18;
  }
  #resultStep .result-offer-benefits{
    margin-top:14px;
  }
  #resultStep .result-offer-benefits li{
    font-size:.83rem;
  }
}

/* v3.8.46 — V5 mobile proof: show the full AFTER tattoo instead of cropping it.
   Keep the conversion layout compact by using a contained portrait over a soft full-bleed backdrop. */
@media(max-width:680px){
  .mobile-proof-stage{
    height:240px;
    background:#111114;
    isolation:isolate;
  }
  .mobile-proof-stage::before{
    content:"";
    position:absolute;
    inset:-10px;
    z-index:0;
    background:url("./assets/tattoo-after.webp?v=3846") center 48% / cover no-repeat;
    filter:blur(14px) brightness(.52);
    transform:scale(1.08);
    opacity:.82;
  }
  .mobile-proof-stage::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:linear-gradient(90deg,rgba(10,10,12,.34),rgba(10,10,12,.04) 34%,rgba(10,10,12,.04) 66%,rgba(10,10,12,.34));
    pointer-events:none;
  }
  .mobile-proof-after{
    z-index:1;
    object-fit:contain;
    object-position:center;
  }
  .mobile-proof-before-card{
    width:32%;
    height:58%;
  }
}


/* v3.8.47 — V5 final-moment conversion rail
   Make the paid value explicit at the exact decision point without adding choices.
   Mobile hierarchy: value first, then one-time price + single action. */
@media(max-width:760px){
  #resultStep{
    padding-bottom:154px;
  }
  #resultStep .mobile-result-cta{
    grid-template-columns:1fr;
    gap:8px;
    padding:11px 12px 12px;
    border-radius:19px;
  }
  #resultStep .mobile-result-cta-value{
    min-width:0;
    padding:0 2px;
    color:#f3f0ec;
    font-size:.84rem;
    line-height:1.28;
    letter-spacing:-.01em;
  }
  #resultStep .mobile-result-cta-value strong{
    display:block;
    font-weight:800;
  }
  #resultStep .mobile-result-cta-buyrow{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:12px;
  }
  #resultStep .mobile-result-cta-pricebox{
    display:grid;
    gap:2px;
    min-width:76px;
    padding-left:2px;
  }
  #resultStep .mobile-result-cta-price{
    font-size:1.38rem;
    line-height:1;
  }
  #resultStep .mobile-result-cta-onetime{
    color:#8f8f97;
    font-size:.68rem;
    line-height:1;
    text-transform:none;
  }
  #resultStep #mobileHdBtn{
    min-height:54px;
    padding:12px 14px;
    font-size:.94rem;
    line-height:1.15;
  }
  #resultStep .mobile-result-cta-top{
    display:none!important;
  }
  #resultStep .mobile-result-cta-trust{
    display:none;
  }
  #resultStep #mobilePurchaseTestNotice{
    grid-column:1;
  }
}

/* v3.8.48 — V5 mobile hero price alignment polish */
.hero-price-line{
  width:100%;
  text-align:center;
}