/* JAD Shops self-serve onboarding (sob2) - shared styles.
   Full-bleed photo background + complementary deep-teal glass card.
   Swap bg.jpg for a licensed image before going live. */
:root{
  --ink:#122225;
  --teal:#12a7b3;
  --teal-dk:#0b7f8a;
  --aqua:#4fe3cf;
  --card:rgba(9,48,54,.68);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:"Public Sans",system-ui,-apple-system,sans-serif;
  color:#fff; min-height:100vh;
  display:flex; align-items:center; justify-content:flex-start;
  padding:24px; position:relative; overflow-x:hidden;
  background:#20140f url("comingsoon.png") center center / cover no-repeat fixed;
}
.brandbar{ position:fixed; top:0; left:0; right:0; display:flex; align-items:center; gap:10px; padding:22px 30px; z-index:3; }
.brandbar .logo-img{ height:38px; width:auto; display:block; filter:drop-shadow(0 3px 10px rgba(0,0,0,.45)); }
.brandbar .wordmark{ color:#fff; font-weight:700; font-size:17px; letter-spacing:-.2px; text-shadow:0 1px 10px rgba(0,0,0,.5); }
.brandbar .wordmark span{ opacity:.8; font-weight:500; }

.wrap{ position:relative; z-index:2; width:100%; max-width:540px; margin-left:clamp(16px,9vw,190px); }
@media (max-width:900px){ body{ justify-content:center; } .wrap{ margin-left:0; } }

.card{
  background:var(--card);
  -webkit-backdrop-filter:blur(20px) saturate(125%); backdrop-filter:blur(20px) saturate(125%);
  border:1px solid rgba(255,255,255,.16); border-radius:26px; padding:40px 42px 34px;
  box-shadow:0 30px 70px -18px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.18) inset;
  animation:rise .45s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }

.pill{ display:inline-flex; align-items:center; gap:8px; background:rgba(79,227,207,.14); color:var(--aqua);
  font-weight:700; font-size:12.5px; letter-spacing:.6px; text-transform:uppercase; padding:7px 14px; border-radius:999px; margin-bottom:20px; border:1px solid rgba(79,227,207,.30); }
.pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 0 rgba(79,227,207,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(79,227,207,.55);} 70%{box-shadow:0 0 0 10px rgba(79,227,207,0);} 100%{box-shadow:0 0 0 0 rgba(79,227,207,0);} }

.steps{ display:flex; align-items:center; gap:8px; margin-bottom:22px; }
.steps .s{ height:4px; flex:1; border-radius:3px; background:rgba(255,255,255,.16); }
.steps .s.on{ background:var(--aqua); }
.steps .lab{ flex:0 0 auto; font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; color:rgba(226,242,243,.7); font-weight:600; margin-left:2px; }
.backlink{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:rgba(226,242,243,.78);
  cursor:pointer; margin-bottom:14px; background:none; border:0; padding:0; font-family:inherit; text-decoration:none; }
.backlink:hover{ color:#fff; }

h1{ font-size:clamp(26px,4.4vw,36px); line-height:1.08; letter-spacing:-.8px; font-weight:800; color:#fff; margin-bottom:12px; }
h1 .accent{ color:var(--aqua); }
h2{ font-size:23px; font-weight:700; letter-spacing:-.4px; margin-bottom:10px; }
.sub{ font-size:15.5px; line-height:1.55; color:rgba(226,242,243,.85); font-weight:400; max-width:46ch; margin-bottom:24px; }

label.lab{ display:block; font-weight:600; font-size:13.5px; color:rgba(233,247,248,.92); margin-bottom:7px; }
.inp{ width:100%; font-family:inherit; font-size:15.5px; padding:14px 15px; border:1.5px solid rgba(255,255,255,.22);
  border-radius:12px; background:rgba(255,255,255,.96); color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.inp::placeholder{ color:#88a0a2; }
.inp:focus{ outline:none; border-color:var(--aqua); box-shadow:0 0 0 4px rgba(79,227,207,.22); }
.inp[readonly]{ background:rgba(255,255,255,.14); color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.18); }

.row{ display:flex; gap:10px; flex-wrap:wrap; }
.row .grow{ flex:1 1 240px; }

.btn{ font-family:inherit; font-weight:700; font-size:15.5px; color:#fff; cursor:pointer; padding:14px 24px; border:none;
  border-radius:12px; background:linear-gradient(180deg,var(--teal),var(--teal-dk)); box-shadow:0 8px 20px -6px rgba(11,127,138,.65);
  transition:transform .12s, box-shadow .12s, filter .12s, opacity .12s; }
.btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; filter:none; box-shadow:none; }
.btn.full{ width:100%; }
.btn.ghost{ background:none; box-shadow:none; color:rgba(226,242,243,.85); padding:14px 10px; }
.btn.ghost:hover{ filter:none; color:#fff; }

.link{ color:var(--aqua); text-decoration:none; font-weight:600; cursor:pointer; }
.link:hover{ text-decoration:underline; }
.muted{ color:rgba(213,235,236,.72); font-size:13px; line-height:1.5; }
.err{ color:#ff8a8a; font-size:13.5px; line-height:1.5; }

.fineprint{ display:flex; align-items:flex-start; gap:9px; margin-top:16px; font-size:13px; line-height:1.5; color:rgba(213,235,236,.74); }
.fineprint svg{ flex:0 0 auto; margin-top:3px; }

.urlwrap{ display:flex; align-items:stretch; border:1.5px solid rgba(255,255,255,.22); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.96); }
.urlwrap:focus-within{ border-color:var(--aqua); box-shadow:0 0 0 4px rgba(79,227,207,.22); }
.urlwrap .pfx{ background:rgba(9,48,54,.06); color:#5a7377; padding:14px 12px; font-size:14.5px; white-space:nowrap; border-right:1px solid rgba(9,48,54,.10); align-self:center; }
.urlwrap .pfx b{ color:#2c4a4e; font-weight:700; }
.urlwrap input{ border:0; outline:0; background:none; padding:14px 12px; flex:1; font-size:15.5px; color:var(--ink); }
.state{ font-size:13px; margin-top:8px; min-height:1.2em; font-weight:600; }
.state.ok{ color:var(--aqua); }
.state.no{ color:#ff8a8a; }
.state.check{ color:rgba(213,235,236,.7); font-weight:500; }

.plan{ border:1.5px solid rgba(255,255,255,.16); border-radius:14px; padding:18px; margin-bottom:12px; cursor:pointer;
  transition:border-color .15s, background .15s; background:rgba(255,255,255,.04); }
.plan:hover{ border-color:rgba(79,227,207,.5); }
.plan.sel{ border-color:var(--aqua); background:rgba(79,227,207,.10); }
.plan .top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.plan .nm{ font-weight:700; font-size:16.5px; }
.plan .pr{ font-weight:700; font-size:15px; color:#fff; }
.plan .pr s{ color:rgba(226,242,243,.5); font-weight:500; margin-right:6px; }
.plan .pr .free{ color:var(--aqua); }
.plan ul{ list-style:none; margin:12px 0 0; padding:0; }
.plan li{ display:flex; gap:8px; align-items:flex-start; font-size:13.5px; color:rgba(226,242,243,.82); margin-bottom:6px; }
.plan li svg{ flex:0 0 auto; margin-top:2px; }
.badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--aqua);
  background:rgba(79,227,207,.14); border:1px solid rgba(79,227,207,.3); border-radius:20px; padding:2px 9px; margin-left:8px; vertical-align:middle; }

.checkico{ width:52px; height:52px; border-radius:14px; background:rgba(79,227,207,.16); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.urlchip{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:10px 14px; font-size:15px; font-weight:600; margin:6px 0 4px; }

.summary{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:18px 20px; margin-bottom:20px; }
.summary .line{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:14.5px; }
.summary .line:last-child{ margin-bottom:0; }
.summary .line .k{ color:rgba(226,242,243,.72); }
.summary .line.free .v{ color:var(--aqua); font-weight:700; }
.summary hr{ border:0; border-top:1px solid rgba(255,255,255,.12); margin:12px 0; }

.foot{ position:fixed; bottom:0; left:0; right:0; z-index:3; padding:18px 30px; color:rgba(255,255,255,.9); font-size:13px;
  text-shadow:0 1px 8px rgba(0,0,0,.55); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.foot a{ color:#fff; text-decoration:none; opacity:.9; }

/* features modal */
.modal-back{ position:fixed; inset:0; background:rgba(6,26,29,.62); backdrop-filter:blur(4px); z-index:8; opacity:0; visibility:hidden; transition:.2s; }
.modal-back.show{ opacity:1; visibility:visible; }
.jmodal{ position:fixed; z-index:9; left:50%; top:50%; transform:translate(-50%,-46%); opacity:0; visibility:hidden; transition:transform .25s, opacity .2s, visibility .2s;
  width:calc(100% - 40px); max-width:520px; max-height:86vh; overflow:auto;
  background:rgba(11,52,58,.97); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.16); border-radius:22px; padding:30px 30px 26px; box-shadow:0 30px 80px -18px rgba(0,0,0,.7); }
.jmodal.show{ opacity:1; visibility:visible; transform:translate(-50%,-50%); }
.jmodal-x{ position:absolute; top:16px; right:16px; width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.10); color:#fff; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; }
.jmodal-x:hover{ background:rgba(255,255,255,.18); }
.feat-row{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid rgba(255,255,255,.10); }
.feat-row:first-of-type{ border-top:0; }
.feat-ic{ flex:0 0 40px; width:40px; height:40px; border-radius:11px; background:rgba(79,227,207,.14); color:var(--aqua);
  display:flex; align-items:center; justify-content:center; }
.feat-row h4{ margin:0 0 2px; font-size:15px; font-weight:700; color:#fff; }
.feat-row p{ margin:0; font-size:13.5px; line-height:1.45; color:rgba(226,242,243,.8); }

@media (max-width:520px){ .card{ padding:30px 24px 26px; border-radius:22px; } .btn.full{ width:100%; } }