/* ═══════════════════════════════════════════════════════════
   StegoMaster — "Secrets, beautifully kept"
   Editorial vault aesthetic · warm ink + gold · Fraunces serif
   ═══════════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#100f0c;
  --ink2:#16140f;
  --surface:#1c1a14;
  --surface2:#232017;
  --line:#332f24;
  --cream:#f3ede0;
  --cream-dim:#b8b09c;
  --muted:#7a7361;
  --gold:#d4a85f;
  --gold-bright:#e8bd72;
  --gold-deep:#a8823f;
  --jade:#6db28f;
  --red:#d97362;
  --r:18px;
  --maxw:1180px;
}

html{scroll-behavior:smooth}

body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Grain texture overlay */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Typography ─── */
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:400;line-height:1.05;letter-spacing:-.02em}
.italic{font-style:italic;color:var(--gold)}

.eyebrow{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:1rem;
}

/* ─── Reveal animation ─── */
.reveal{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.7rem;border-radius:100px;font-size:.95rem;font-weight:600;
  font-family:'Hanken Grotesk',sans-serif;cursor:pointer;border:none;
  transition:all .35s cubic-bezier(.22,1,.36,1);text-decoration:none;position:relative;
}
.btn-gold{background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:#1a1610;box-shadow:0 4px 20px rgba(212,168,95,.25)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(212,168,95,.4)}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.full{width:100%;margin-top:1.4rem;padding:1.1rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ─── Nav ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(12px);background:rgba(16,15,12,.7);border-bottom:1px solid rgba(51,47,36,.5)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:1.1rem 2rem;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--cream)}
.brand-mark{color:var(--gold);font-size:1.2rem}
.brand-name{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:500;letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{color:var(--cream-dim);text-decoration:none;font-size:.92rem;font-weight:500;transition:color .25s}
.nav-links a:hover{color:var(--cream)}
.nav-cta{padding:.5rem 1.2rem;border:1px solid var(--gold);border-radius:100px;color:var(--gold)!important}
.nav-cta:hover{background:var(--gold);color:#1a1610!important}

/* ─── Hero ─── */
.hero{position:relative;max-width:var(--maxw);margin:0 auto;padding:9rem 2rem 5rem;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;min-height:90vh}
.hero-glow{position:absolute;top:10%;left:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(212,168,95,.13) 0%,transparent 65%);pointer-events:none;z-index:0}
.hero-inner{position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1rem;border:1px solid var(--line);border-radius:100px;font-size:.8rem;color:var(--cream-dim);margin-bottom:2rem}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--jade);box-shadow:0 0 10px var(--jade)}
.hero-title{font-size:clamp(2.8rem,6vw,5rem);margin-bottom:1.5rem}
.hero-sub{font-size:1.12rem;color:var(--cream-dim);max-width:30rem;margin-bottom:2.3rem;line-height:1.7}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem}
.hero-trust{display:flex;align-items:center;gap:1.5rem}
.trust-item{display:flex;flex-direction:column}
.trust-item strong{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--gold);font-weight:500}
.trust-item span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.trust-divider{width:1px;height:36px;background:var(--line)}

/* Hero floating card */
.hero-visual{position:relative;z-index:1;display:flex;justify-content:center}
.float-card{width:100%;max-width:360px;background:linear-gradient(160deg,var(--surface),var(--ink2));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(.5deg)}}
.fc-top{display:flex;gap:.45rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}
.fc-dot{width:11px;height:11px;border-radius:50%}
.fc-dot.r{background:#d97362}.fc-dot.y{background:#d4a85f}.fc-dot.g{background:#6db28f}
.fc-body{padding:1.4rem}
.fc-img{height:140px;border-radius:12px;background:linear-gradient(135deg,#3a4a3f,#5a6b4f,#8a7a5a);position:relative;overflow:hidden;margin-bottom:1.2rem}
.fc-img::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(243,237,224,.12),transparent 50%)}
.fc-line{display:flex;flex-direction:column;gap:.2rem;margin-bottom:1rem}
.fc-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.fc-msg{font-family:'Fraunces',serif;font-style:italic;font-size:1.15rem;color:var(--gold)}
.fc-bar{height:5px;background:var(--surface2);border-radius:100px;overflow:hidden;margin-bottom:.7rem}
.fc-fill{height:100%;width:3%;background:linear-gradient(90deg,var(--gold),var(--gold-bright));border-radius:100px;animation:fill 2.5s ease-in-out infinite alternate}
@keyframes fill{from{width:3%}to{width:8%}}
.fc-stat{font-size:.78rem;color:var(--jade)}

/* ─── Section heads ─── */
.section-head{max-width:var(--maxw);margin:0 auto;padding:0 2rem;text-align:center;margin-bottom:3.5rem}
.section-head h2{font-size:clamp(2rem,4vw,3.2rem)}

/* ─── How ─── */
.how{padding:6rem 0}
.steps{max-width:var(--maxw);margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.step{padding:2.2rem;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(160deg,var(--surface),transparent);transition:all .4s}
.step:hover{border-color:var(--gold);transform:translateY(-4px)}
.step-num{font-family:'Fraunces',serif;font-size:2.5rem;color:var(--gold);opacity:.4;margin-bottom:1rem}
.step h3{font-size:1.4rem;margin-bottom:.7rem}
.step p{color:var(--cream-dim);font-size:.96rem}

/* ─── Tool ─── */
.tool{padding:6rem 0;background:linear-gradient(180deg,transparent,rgba(28,26,20,.4),transparent)}
.tool-card{max-width:620px;margin:0 auto;padding:2.2rem;border:1px solid var(--line);border-radius:24px;background:linear-gradient(160deg,var(--surface),var(--ink2));box-shadow:0 25px 70px rgba(0,0,0,.4)}
.tabs{display:flex;gap:.3rem;padding:.35rem;background:var(--ink);border-radius:14px;margin-bottom:2rem;align-items:center}
.tab{flex:0 0 auto;padding:.7rem .85rem;border:none;background:none;color:var(--muted);font-family:'Hanken Grotesk',sans-serif;font-size:.85rem;font-weight:600;border-radius:11px;cursor:pointer;transition:all .3s;white-space:nowrap}
.tab.on{background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:#1a1610}
.tab:not(.on):hover{color:var(--cream)}
.panel{display:none}.panel.on{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

.field-label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;margin-top:1.4rem}
.field-label:first-child{margin-top:0}

.drop{position:relative;border:1.5px dashed var(--line);border-radius:var(--r);background:var(--ink);cursor:pointer;transition:all .3s;overflow:hidden}
.drop:hover,.drop.over{border-color:var(--gold);background:rgba(212,168,95,.05)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;z-index:2}
.drop-inner{padding:2.6rem 1rem;text-align:center}
.drop-icon{font-size:2.2rem;color:var(--gold);opacity:.6;margin-bottom:.8rem}
.drop-inner p{color:var(--cream-dim);font-size:.96rem;margin-bottom:.3rem}
.drop-inner strong{color:var(--gold)}
.drop-hint{font-size:.8rem;color:var(--muted)}

.prev{display:none;width:100%;max-height:220px;object-fit:contain;border-radius:var(--r);margin-top:.9rem;border:1px solid var(--line);background:var(--ink)}

textarea,.pw input{
  width:100%;background:var(--ink);border:1.5px solid var(--line);border-radius:var(--r);
  padding:.9rem 1.1rem;color:var(--cream);font-size:.98rem;font-family:'Hanken Grotesk',sans-serif;
  outline:none;transition:border .3s;resize:vertical;
}
textarea{min-height:110px}
textarea:focus,.pw input:focus{border-color:var(--gold)}
textarea::placeholder,.pw input::placeholder{color:var(--muted)}
.pw{position:relative;display:flex;align-items:center}
.pw input{padding-right:4.5rem;flex:1}
.eye{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:.82rem;font-weight:600;cursor:pointer;letter-spacing:.05em;text-transform:uppercase;transition:color .25s}
.eye:hover{color:var(--gold)}

.warn{margin-top:1.4rem;padding:1rem 1.2rem;background:rgba(212,168,95,.07);border:1px solid rgba(212,168,95,.2);border-radius:12px;font-size:.86rem;color:var(--cream-dim);line-height:1.6}
.warn strong{color:var(--gold)}

.spin{display:none;width:18px;height:18px;border:2px solid rgba(26,22,16,.3);border-top-color:#1a1610;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.btn.loading .bt{display:none}
.btn.loading .spin{display:block}

.result{display:none;margin-top:1.4rem}
.res-ok{padding:1.4rem;background:rgba(109,178,143,.08);border:1px solid rgba(109,178,143,.25);border-radius:var(--r)}
.res-err{padding:1.4rem;background:rgba(217,115,98,.08);border:1px solid rgba(217,115,98,.25);border-radius:var(--r)}
.res-title{font-family:'Fraunces',serif;font-size:1.2rem;margin-bottom:.6rem}
.res-ok .res-title{color:var(--jade)}
.res-err .res-title{color:var(--red)}
.res-stats{display:flex;gap:.6rem;flex-wrap:wrap;margin:.8rem 0}
.res-stat{background:var(--ink);padding:.45rem .85rem;border-radius:9px;font-size:.8rem;color:var(--cream-dim)}
.res-stat strong{color:var(--cream)}
.res-msg{background:var(--ink);border-radius:12px;padding:1rem;margin-top:.7rem;font-family:'Fraunces',serif;font-size:1.05rem;color:var(--cream);line-height:1.6;word-break:break-word}
.stego-prev{margin:.9rem 0;text-align:center;background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:.6rem}
.stego-prev img{max-height:190px;max-width:100%;border-radius:9px;object-fit:contain}
.dl{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.9rem;margin-top:.6rem;background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:#1a1610;font-weight:600;border-radius:100px;text-decoration:none;transition:all .3s}
.dl:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(212,168,95,.35)}
.copy-btn{margin-top:.7rem;background:var(--ink);border:1px solid var(--line);color:var(--cream-dim);padding:.5rem .9rem;border-radius:9px;font-size:.82rem;cursor:pointer;transition:all .25s;font-family:'Hanken Grotesk',sans-serif}
.copy-btn:hover{border-color:var(--gold);color:var(--gold)}

/* ─── Security ─── */
.security{padding:6rem 0}
.sec-grid{max-width:var(--maxw);margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:center}
.sec-text h2{font-size:clamp(2rem,3.5vw,2.8rem);margin-bottom:1.3rem}
.sec-text p{color:var(--cream-dim);font-size:1.05rem;line-height:1.75}
.sec-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.sec-card{padding:1.6rem;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(160deg,var(--surface),transparent);transition:all .4s}
.sec-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.sc-icon{font-size:1.6rem;margin-bottom:.8rem}
.sec-card h4{font-size:1.15rem;margin-bottom:.5rem;font-weight:500}
.sec-card p{font-size:.88rem;color:var(--cream-dim);line-height:1.55}

/* ─── Footer ─── */
.footer{padding:4rem 2rem 3rem;text-align:center;border-top:1px solid var(--line);margin-top:4rem}
.foot-brand{font-family:'Fraunces',serif;font-size:1.5rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem}
.foot-brand .brand-mark{color:var(--gold)}
.foot-credit{color:var(--cream-dim);margin-bottom:.6rem}
.foot-credit strong{color:var(--gold)}
.foot-fine{font-size:.82rem;color:var(--muted);max-width:38rem;margin:0 auto;line-height:1.7}

/* ─── Responsive ─── */
@media(max-width:880px){
  .hero{grid-template-columns:1fr;padding-top:7rem;gap:3rem;text-align:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-actions,.hero-trust{justify-content:center}
  .hero-visual{order:-1}
  .steps{grid-template-columns:1fr}
  .sec-grid{grid-template-columns:1fr;gap:2.5rem}
  .nav-links a:not(.nav-cta){display:none}
}
@media(max-width:520px){
  .hero-trust{flex-wrap:wrap;gap:1rem}
  .sec-cards{grid-template-columns:1fr}
  .tool-card{padding:1.5rem}
}

/* ─── Pricing page ─── */
.pricing-hero{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 2rem 4rem;min-height:100vh}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:880px;margin:3.5rem auto 0}
.price-card{position:relative;padding:2.5rem;border:1px solid var(--line);border-radius:24px;background:linear-gradient(160deg,var(--surface),var(--ink2));transition:all .4s}
.price-card.featured{border-color:var(--gold);box-shadow:0 25px 70px rgba(212,168,95,.15)}
.pc-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:#1a1610;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.4rem 1.1rem;border-radius:100px}
.pc-tier{font-family:'Fraunces',serif;font-size:1.4rem;color:var(--gold);margin-bottom:.5rem}
.pc-price{display:flex;align-items:baseline;gap:.4rem;margin-bottom:1rem}
.pc-amt{font-family:'Fraunces',serif;font-size:3rem;font-weight:500;color:var(--cream)}
.pc-per{color:var(--muted);font-size:.95rem}
.pc-desc{color:var(--cream-dim);font-size:.95rem;margin-bottom:1.6rem;line-height:1.6}
.pc-feat{list-style:none;margin-bottom:1.8rem}
.pc-feat li{padding:.55rem 0 .55rem 1.7rem;position:relative;color:var(--cream-dim);font-size:.93rem;border-bottom:1px solid rgba(51,47,36,.4)}
.pc-feat li:before{content:'◈';position:absolute;left:0;color:var(--gold);font-size:.8rem}
.pc-feat li strong{color:var(--cream)}
.pc-fine{text-align:center;font-size:.8rem;color:var(--muted);margin-top:.9rem}
.pay-result{display:none;max-width:540px;margin:2rem auto 0}
.pricing-trust{text-align:center;margin-top:3rem;color:var(--cream-dim)}
.pricing-trust p{margin-bottom:.8rem;font-size:.92rem}
@media(max-width:780px){.price-grid{grid-template-columns:1fr}}

/* ─── Pro status banner ─── */
.pro-status{margin-bottom:1.5rem;padding:.7rem 1rem;border-radius:10px;font-size:.85rem;text-align:center}
.ps-free{color:var(--cream-dim)}
.ps-free a{color:var(--gold);text-decoration:none;font-weight:600}
.ps-free a:hover{text-decoration:underline}
.pro-status.is-pro{background:rgba(109,178,143,.08);border:1px solid rgba(109,178,143,.25)}
.ps-pro{color:var(--jade);font-weight:600}
.welcome-pro{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:#1a1610;padding:.9rem 1.8rem;border-radius:100px;font-weight:600;font-size:.95rem;box-shadow:0 10px 40px rgba(212,168,95,.4);z-index:500;animation:welcomeIn .5s ease,welcomeOut .5s ease 3.5s forwards}
@keyframes welcomeIn{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes welcomeOut{to{opacity:0;transform:translateX(-50%) translateY(-20px)}}

/* ─── Mobile nav fix (prevent horizontal scroll) ─── */
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:880px){
  .nav-inner{padding:.9rem 1rem}
  .nav-links{gap:.8rem}
  .brand-name{font-size:1.1rem}
  .nav-cta{padding:.45rem .9rem;font-size:.85rem;white-space:nowrap}
  .hero-glow{left:-30%;width:400px}
}
@media(max-width:520px){
  .nav-inner{padding:.8rem .9rem}
  .brand-mark{font-size:1rem}
  .brand-name{font-size:1rem}
  .nav-links{gap:.5rem}
  .nav-cta{padding:.4rem .8rem;font-size:.8rem}
  .hero{padding-left:1.2rem;padding-right:1.2rem}
  .hero-title{font-size:2.4rem}
  .section-head{padding:0 1.2rem}
  .tool-card{margin:0 .5rem}
  .pricing-hero{padding-left:1rem;padding-right:1rem}
}
/* Ensure nothing overflows viewport width */
.nav,.hero,.how,.tool,.security,.footer,.pricing-hero{max-width:100vw;overflow-x:hidden}


/* ─── Very small phones (<400px) ─── */
@media(max-width:400px){
  .nav-links a:not(.nav-cta){display:none}
  .brand-name{font-size:.95rem}
  .nav-cta{padding:.38rem .7rem;font-size:.78rem}
  .hero-title{font-size:2.1rem}
  .float-card{max-width:100%}
  .hero-trust{gap:.8rem}
  .trust-item strong{font-size:1.3rem}
}
/* float card should never cause overflow */
.hero-visual{max-width:100%;overflow:hidden}
.float-card{max-width:min(360px,90vw)}

/* ─── Remove mobile tap highlight (professional touch) ─── */
*{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}
button,a,.tab,.drop,.btn,.eye,.copy-btn{
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
  outline:none;
}
/* Smooth touch feedback instead of blue box */
.btn:active{transform:scale(.98)}
.tab:active{opacity:.85}
.drop:active{background:rgba(212,168,95,.08)}
a:active,.copy-btn:active,.eye:active{opacity:.7}
/* Keep text selectable in message areas */
textarea,input,.res-msg,.message-box{
  -webkit-user-select:text;
  user-select:text;
}
/* Remove focus ring flicker on tap, keep for keyboard */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible){outline:none}

/* ─── Secret Type Tabs (Message / File) ─── */
.secret-type-tabs{display:flex;gap:.5rem;margin-bottom:1rem}
.stype-tab{flex:1;padding:.6rem;border:1px solid rgba(212,168,95,.2);background:transparent;color:var(--cream-dim);border-radius:8px;cursor:pointer;font-size:.85rem;transition:all .2s}
.stype-tab.on{background:rgba(212,168,95,.12);border-color:var(--gold);color:var(--gold);font-weight:600}
.stype-tab:hover:not(.on){border-color:rgba(212,168,95,.4);color:var(--cream)}
.secret-file-drop{cursor:pointer;margin-bottom:.5rem}
.secret-file-drop:hover .drop-inner{border-color:var(--gold)}
.pro-gate{background:rgba(212,168,95,.06);border:1px solid rgba(212,168,95,.2);border-radius:10px;padding:1rem;text-align:center;margin-top:.5rem}

/* ─── Extracted File Download ─── */
.revealed-file{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:rgba(212,168,95,.08);border-radius:8px;margin:.5rem 0}
.file-icon{color:var(--gold);font-size:1.2rem}
.file-size{color:var(--cream-dim);font-size:.85rem}
.btn-download-file{display:block;text-align:center;margin-top:.75rem;padding:.75rem 1.5rem;background:var(--gold);color:#000;border-radius:8px;text-decoration:none;font-weight:700;transition:opacity .2s}
.btn-download-file:hover{opacity:.85}

/* ─── Create Another button ─── */
.btn-create-another{
  display:block;width:100%;margin-top:.75rem;padding:.75rem;
  background:transparent;border:1px solid rgba(212,168,95,.3);
  color:var(--gold);border-radius:8px;cursor:pointer;
  font-size:.95rem;font-weight:600;letter-spacing:.02em;
  transition:all .2s;
}
.btn-create-another:hover{
  background:rgba(212,168,95,.08);
  border-color:var(--gold);
}

/* ─── Password Requirements (collapsible) ─── */
.pw-requirements{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(212,168,95,.15);
  border-radius:10px;
  margin-top:1.25rem;
  margin-bottom:.75rem;
  font-size:.85rem;
  overflow:hidden;
}
.pw-requirements summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding:.75rem 1rem;
}
.pw-requirements summary::-webkit-details-marker{ display:none; }
.pw-req-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--gold);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.pw-req-arrow{
  font-size:.75rem;
  transition:transform .2s;
  color:var(--gold);
}
.pw-requirements[open] .pw-req-arrow{
  transform:rotate(180deg);
}
.pw-req-body{
  padding:.25rem 1rem 1rem 1rem;
  border-top:1px solid rgba(212,168,95,.1);
}
.pw-req-list{
  list-style:none;
  padding:0;margin:.5rem 0 .75rem 0;
  display:flex;flex-direction:column;gap:.3rem;
}
.pw-req-list li{
  color:var(--cream-dim);
  padding-left:1rem;
  position:relative;
}
.pw-req-list li::before{
  content:'·';
  position:absolute;left:0;
  color:var(--gold);
}
.pw-examples{
  display:flex;flex-wrap:wrap;gap:.4rem .75rem;
  padding-top:.5rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.pw-ex-ok{color:#6fcf97;font-size:.8rem;font-family:monospace;}
.pw-ex-bad{color:#eb5757;font-size:.8rem;font-family:monospace;}

/* ─── Carrier drop note ─── */
.drop-note{
  display:block;
  font-size:.75rem;
  color:rgba(212,168,95,.45);
  margin-top:.2rem;
}

/* ─── Carrier Help Popup ─── */
.drop-note{position:relative;display:inline-block}
.drop-help{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  border:1px solid rgba(212,168,95,.4);
  color:var(--gold);font-size:11px;font-weight:600;
  cursor:pointer;vertical-align:middle;margin-left:4px;
  transition:all .2s;user-select:none;
}
.drop-help:hover{background:rgba(212,168,95,.15);border-color:var(--gold);}
.drop-popup{
  display:none;position:fixed;bottom:auto;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:var(--surface);border:1px solid rgba(212,168,95,.25);
  border-radius:10px;padding:.75rem 1rem;
  width:220px;z-index:100;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  text-align:left;
}
.drop-popup.show{display:block;}
.popup-title{
  color:var(--gold);font-size:.75rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  margin:0 0 .5rem;
}
.popup-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:.3rem;
}
.popup-list li{
  font-size:.78rem;color:var(--cream-dim);
  padding-left:.9rem;position:relative;
}
.popup-list li::before{content:'·';position:absolute;left:0;color:var(--gold);}

/* ─── Carrier label row with ? ─── */
.carrier-label-row{
  display:flex;align-items:center;
  justify-content:space-between;
  margin-bottom:.4rem;
}
.carrier-label-row .field-label{margin-bottom:0;}
.carrier-help-wrap{position:relative;display:inline-flex;align-items:center;}

/* ─── Real-time Password Checker ─── */
.pw-checker{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(212,168,95,.15);
  border-radius:10px;
  padding:.75rem 1rem;
  margin-bottom:.75rem;
  display:flex;flex-direction:column;gap:.35rem;
}
.pw-check-item{
  display:flex;align-items:center;gap:.6rem;
  font-size:.82rem;
  transition:all .2s;
}
.pc-icon{
  font-size:.9rem;
  width:16px;text-align:center;
  transition:all .2s;
  color:var(--cream-dim);
}
.pc-text{color:var(--cream-dim);transition:color .2s;}

/* Met state */
.pw-check-item.met .pc-icon{color:#6fcf97;}
.pw-check-item.met .pc-text{color:#6fcf97;}

/* Failed state (typed but not met) */
.pw-check-item.fail .pc-icon{color:#eb5757;}
.pw-check-item.fail .pc-text{color:#eb5757;}

/* ─── Processing Progress Bar ─── */
.progress-bar{
  width:100%;height:6px;
  background:rgba(255,255,255,.08);
  border-radius:3px;overflow:hidden;
  margin-bottom:.4rem;
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--gold), #f0d080);
  border-radius:3px;
  transition:width .8s ease;
}
.progress-msg{
  font-size:.8rem;
  color:var(--cream-dim);
  text-align:center;
  margin:0;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{opacity:.6;}
  50%{opacity:1;}
}
.tab-dd{position:relative;display:inline-block}
.tab-dd-menu{display:none;position:absolute;top:calc(100% + .3rem);left:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.3rem;z-index:999;min-width:130px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.tab-dd-menu.open{display:block}
.dd-it{display:block;width:100%;padding:.5rem .8rem;background:none;border:none;color:var(--cream);font-family:'Hanken Grotesk',sans-serif;font-size:.85rem;font-weight:500;border-radius:7px;cursor:pointer;text-align:left}
.dd-it:hover{background:rgba(212,168,95,.12);color:var(--gold)}
.pro-badge{font-size:.62rem;background:var(--gold);color:#1a1408;padding:.06rem .25rem;border-radius:.2rem;font-weight:700;margin-left:.15rem;vertical-align:middle}