#wiz{
  --bg:#f7f9fc; --card:#ffffff; --ink:#0b1220; --muted:#475569; --line:#e6eef5;
  --blue-25:#f7faff; --blue-50:#eef5ff; --blue-100:#e1ecff; --blue-400:#60a5fa; --blue-600:#2563eb;
  --green-25:#f4fbf7; --green-50:#ecfdf5; --green-600:#16a34a;
  --amber-500:#f59e0b; --red-500:#ef4444;
  --radius:18px; --radius-lg:24px; --shadow:0 10px 28px rgba(15,23,42,.08);
  --brand:#2563eb; --brand-2:#60a5fa; --brand-ink:#0b1220; --brand-contrast:#ffffff;
  --sab: env(safe-area-inset-bottom, 0px);
  margin:0;
  background:linear-gradient(180deg,#f9fbff 0%,#f2f6ff 28%,#f7f9fc 100%);
  color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  -webkit-font-smoothing:antialiased; line-height:1.6;
  padding-bottom:calc(24px + var(--sab));
}
#wiz *{box-sizing:border-box}
  #wiz{height:100%}
#wiz{
    margin:0; background:linear-gradient(180deg,#f9fbff 0%,#f2f6ff 28%,#f7f9fc 100%);
    color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
    -webkit-font-smoothing:antialiased; line-height:1.6;
    padding-bottom:calc(24px + var(--sab));
  }
#wiz img{max-width:100%; display:block; -webkit-user-drag:none; user-select:none}
  .logo-s,.logo-l{object-fit:contain; image-rendering:auto; backface-visibility:hidden; transform:translateZ(0)}
  #wiz .logo-s{width:80px; height:80px}
#wiz .logo-l{width:140px; height:140px}
/* match index.ejs container width & padding */
#wiz .wrap{max-width:var(--maxw); margin:18px auto 24px; padding:0 20px}



  .wizard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden}

.stepper{
  display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); background:#fff;transition: all 0.2s ease; /* Smooth any changes */
  visibility: visible !important; /* Ensure always visible */
}
.stepper .node{position:relative; padding:18px 12px; text-align:center; color:#6b7280; font-weight:800; font-size:17px; white-space:nowrap}
.stepper .node small{display:block; font-weight:900; font-size:13px; color:#94a3b8; letter-spacing:.3px}
.stepper .node.active{color:#0f172a}
.stepper .node.done{color:var(--green-600)}
.stepper .node .bar{position:absolute; left:18%; right:18%; bottom:0; height:4px; border-radius:3px; background:transparent}
.stepper .node.active .bar{background:var(--brand)}
.stepper .node.done .bar{background:var(--green-600)}

  @media (max-width: 640px){
    .stepper{display:flex; justify-content:center; border-bottom:1px solid var(--line)}
    .stepper .node{flex:0 0 auto; min-width:auto; padding:14px 10px; font-size:15px}
    .stepper .node small{font-size:12px}
    .stepper .node:not(.active){display:none}
  }

/* Inline Next defaults; positioning inside .confirm below */
.inline-next{ display:none; }
.inline-next.show{ display:flex; }
.inline-next .btn.btn-next{ min-width:160px; }

/* Inside the confirm row (desktop) */
.confirm .inline-next{
  margin-left:auto;       /* pushes button to the right */
  align-items:center;
}

/* On phones, allow wrap and keep button right-aligned under text */
@media (max-width:640px){
  .confirm{ flex-wrap:wrap; }
  .confirm .inline-next{
    width:100%;
    justify-content:flex-end;
    margin-top:8px;
  }
}



.panel{
  display:none; 
  padding:24px; 
  background:linear-gradient(180deg,#fff 0%,#fbfdff 60%,#fff 100%);
  max-width: 100%; /* Prevent wide overflow in step 2 */
  padding-top: 0; /* No top padding to remove gap below stepper */
}
.panel.active{display:block}
.panel h2{margin:0 0 10px; font-size:clamp(20px,5.4vw,30px); font-weight:900}
.panel p.sub{margin:0 0 18px; color:var(--muted); font-size:clamp(14px,3.8vw,18px)}
@media (max-width:640px){ .panel{padding:18px; padding-top: 0;} }

  .ex-layout{display:grid; grid-template-columns:1fr; gap:18px; align-items:stretch;}
  @media (min-width:1100px){ .ex-layout{grid-template-columns:440px 1fr} }

  .list{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px}
  .tiles{display:grid; grid-template-columns:1fr; gap:12px}
  .tile{
    display:flex; align-items:center; gap:18px; padding:16px 18px; min-height:112px;
    border-radius:16px; cursor:pointer; border:2px solid transparent; background:#fff;
    transition:border-color .2s, box-shadow .2s, background .2s; outline: none; width:100%;
  }
  .tile:hover{background:#f8fbff; border-color:#e3ecff}
  .tile.selected{
    background:linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02)), #fff;
    border-color:var(--brand);
    box-shadow:inset 0 0 0 2px rgba(0,0,0,0.02), 0 10px 26px rgba(15,23,42,.08);
  }
  .logo-box{width:110px; height:110px; display:grid; place-items:center; border-radius:16px; background:#f3f6ff; border:1px solid var(--line); flex:0 0 auto}
  .tile-meta{display:grid; gap:6px}
  .tile-name{font-size:24px; font-weight:900; letter-spacing:.2px}
  .tile-sub{font-size:15px; color:#6b7280; font-weight:700}

  @media (max-width:640px){
    .tile{gap:14px; padding:14px; min-height:92px}
    .logo-box{width:72px; height:72px; border-radius:12px}
    #wiz .logo-s{width:64px; height:64px}
    .tile-name{font-size:18px}
    .tile-sub{font-size:13px}
  }

  .detail{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; min-height:360px; position:relative}
  .detail-head{display:grid; place-items:center; gap:10px; margin-bottom:12px}
  .detail .d-title{margin:0}
  @media (max-width:640px){
    .detail{display:none; padding:16px}
    .detail.show{display:block}
    .logo-l{width:110px; height:110px}
  }

  .bonus{
    display:inline-block; margin:8px 0 8px; padding:8px 12px;
    background:color-mix(in srgb, var(--brand) 12%, #fff 88%);
    color:var(--brand); border-radius:999px; font-weight:900; font-size:14px; border:1px solid color-mix(in srgb, var(--brand) 28%, #fff 72%);
  }

  .intro{margin:2px 0 12px; color:#1f2a3a; font-weight:800; font-size:15px; line-height:1.45}

  .perks{display:grid; grid-template-columns:1fr; gap:12px; margin:0 0 16px; padding:0; list-style:none}
  @media (min-width:860px){ .perks{grid-template-columns:repeat(2,1fr)} }

  .perk{
    position:relative; display:flex; align-items:flex-start; gap:14px; padding:14px 16px;
    border-radius:16px; background:#fff; border:1px solid var(--line);
    box-shadow:0 2px 10px rgba(15,23,42,.03);
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  }
  .perk:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(15,23,42,.06); border-color:color-mix(in srgb, var(--brand) 24%, #e8eef7)}
  .pk-ico{
    width:30px; height:30px; margin-top:2px; flex:0 0 auto; border-radius:999px;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    display:grid; place-items:center; box-shadow:0 6px 14px color-mix(in srgb, var(--brand) 28%, transparent);
  }
  .pk-ico svg{width:16px; height:16px; stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round}
  .perk b{display:block; font-size:16px; margin-bottom:2px; letter-spacing:.2px}
  .perk span{color:var(--muted)}
  @media (max-width:640px){
    .perk{padding:12px}
    .perk b{font-size:15px}
    .perk span{font-size:13px}
  }

  .timeline{
    --tl-badge: 30px;
    --tl-line: color-mix(in srgb, var(--blue-100) 80%, #dbe5f5 20%);
    margin:12px auto 0;
    padding:0;
    list-style:none;
    position:relative;
    max-width:min(560px, 94%);
  }
  .tl-item{
    position:relative;
    display:grid;
    grid-template-columns: var(--tl-badge) 1fr;
    gap:12px;
    padding:10px 0;
    align-items:start;
  }
  .tl-item::before,
  .tl-item::after{
    content:''; position:absolute;
    left: calc(var(--tl-badge) / 2);
    width:2px;
    background: var(--tl-line);
    transform: translateX(-1px);
  }
  .tl-item::before{ top:0; height: calc(50% - var(--tl-badge) / 2); }
  .tl-item::after{ top: calc(50% + var(--tl-badge) / 2); bottom:0; }
  .tl-item:first-child::before{ display:none; }
  .tl-item:last-child::after{ display:none; }

  .tl-badge{
    z-index:1;
    width:var(--tl-badge);
    height:var(--tl-badge);
    border-radius:999px;
    display:grid; place-items:center;
    font-weight:900; font-size:13px; color:#fff;
    background:linear-gradient(135deg, var(--brand-2), var(--brand));
    box-shadow:0 4px 10px rgba(15,23,42,.10);
  }
  .tl-content{
    background:#fcfdff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px 12px;
    font-weight:800;
    color:#1f2a3a;
    font-size:14.5px;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
  }
  @media (max-width:640px){
    .timeline{ max-width:92%; }
    .tl-item{ gap:10px; padding:9px 0; }
    .tl-badge{ width:28px; height:28px; font-size:12px; }
    .tl-item::before{ height: calc(50% - 14px); }
    .tl-item::after{ top: calc(50% + 14px); }
    .tl-content{ font-size:14px; padding:9px 11px; }
  }

  .cta-col{
    margin-top:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .btn-signup{
    --ring: color-mix(in srgb, var(--brand) 40%, transparent);
    height:72px; padding:0 32px; border:none; color:var(--brand-contrast);
    background:linear-gradient(90deg, var(--brand), var(--brand-2));
    border-radius:18px; box-shadow:0 18px 42px var(--ring), inset 0 -2px 0 rgba(255,255,255,.18);
    font-size:20px; letter-spacing:.2px; position:relative; overflow:hidden; display:flex; align-items:center; gap:12px;
    width:100%; touch-action:manipulation; justify-content:center;
  }
  @media (min-width:760px){ .btn-signup{width:auto; min-width:320px} }
  @media (max-width:640px){ .btn-signup{height:60px; font-size:17px} }
  .btn-signup::before{
    content:''; position:absolute; inset:-2px; border-radius:20px;
    background:radial-gradient(140px 140px at var(--mx,80%) 50%, rgba(255,255,255,.22), transparent 60%);
    pointer-events:none; opacity:0; transition:opacity .2s ease;
  }
  .btn-signup:hover::before{opacity:.9}
  .btn-signup .arr{width:26px; height:26px; border-radius:999px; background:rgba(255,255,255,.2); display:grid; place-items:center; margin-left:2px; flex:0 0 auto}
  .btn-signup .arr svg{width:16px; height:16px; stroke:#fff; stroke-width:3; fill:none}
  .cta-note{font-size:12px; font-weight:800; color:#6b7280; margin-top:6px}

#wiz .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 20px; border-radius:14px; border:1px solid var(--line); background:#fff; color:#0b1220; cursor:pointer; font-weight:900; font-size:16px; touch-action:manipulation; transition:box-shadow .15s, transform .06s, border-color .15s, background .15s}
  .btn:active{transform:translateY(1px)}
 #wiz .btn[disabled]{opacity:.6; cursor:not-allowed}
#wiz .btn-outline{background:#fff; border:2px solid color-mix(in srgb, var(--brand) 35%, #e6eef5); color:var(--brand); font-weight:900}
#wiz .btn-primary,
#step3 .btn:not(.btn-link):not(.btn-outline):not(.btn-copy):not(.btn-locked){
  border:none;
  color:#fff;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow:0 12px 30px color-mix(in srgb, var(--brand) 35%, transparent), inset 0 -2px 0 rgba(255,255,255,.18);
}

#wiz .btn-link{background:none; border:none; color:color-mix(in srgb, var(--brand) 80%, #000); font-weight:900; padding:0; height:auto; cursor:pointer}
  .btn-link:hover{opacity:.85}
  @media (max-width:640px){ .btn{height:48px; font-size:15px} }

#wiz .nav{
    display:flex; align-items:center; gap:12px; padding:14px 16px; border-top:1px solid var(--line); background:#fff;
    position:sticky; bottom:0; z-index:20; backdrop-filter:saturate(140%) blur(6px);
  }
#wiz .nav .grow{flex:1}
  .btn-next{min-width:160px}
  .btn-locked{
    background:linear-gradient(0deg,#f7f9fc,#fff); color:#94a3b8; border:1px solid #e5e7eb;
    box-shadow:none;
  }
  .pulse-once{animation:pulse1 .9s ease}
  @keyframes pulse1{0%{transform:scale(1)} 50%{transform:scale(1.02)} 100%{transform:scale(1)}}

  .next-hint{
    display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:900; color:#334155;
    background:#f1f5f9; border:1px solid #e2e8f0; padding:8px 12px; border-radius:999px;
  }
  .next-hint svg{width:16px; height:16px; stroke:#64748b}

  .ribbon{display:none; margin:14px 0 0; border:1px solid var(--line); border-radius:12px; padding:12px 14px}
  .ribbon.show{display:flex; align-items:center; gap:10px}
  .dot{width:10px; height:10px; border-radius:999px; background:var(--amber-500)}
.confirm{
    margin-top:18px; display:flex; align-items:center; gap:14px; padding:16px; border-radius:16px;
    background:#f8fafc; border:2px solid #e5e7eb; transition:border-color .2s, background .2s, box-shadow .2s;
    cursor:pointer; user-select:none; outline:0; flex-wrap:nowrap; /* keep single row on desktop */
}

  .confirm:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.25)}
  .confirm input{position:absolute; opacity:0; pointer-events:none}
  .check{width:42px; height:42px; border-radius:999px; display:grid; place-items:center; flex:0 0 auto; border:2px solid #cbd5e1; background:#f1f5f9; transition:transform .15s ease, background .2s, border-color .2s}
  .check svg{width:22px; height:22px; stroke:#94a3b8}
.confirm-content{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;                   /* fill space between the check and the right side */
}

@media (min-width:641px){
  .confirm-sub{
    display:inline-flex;         /* show on desktop */
    margin-left:auto;            /* push to the far right */
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:900;
    color:#334155;
    background:#f1f5f9;
    border:1px solid #e2e8f0;
    padding:6px 10px;
    border-radius:999px;
    white-space:nowrap;
  }
}

  .confirm-title{font-weight:900; font-size:16px}
  .confirm-sub{font-size:13px; color:#7c8a9a; font-weight:800}
  .confirm:hover .check{transform:scale(1.03)}
  .confirm.checked{background:var(--green-50); border-color:rgba(22,163,74,.55); box-shadow:inset 0 0 0 1px rgba(22,163,74,.18)}
  .confirm.checked .check{background:linear-gradient(135deg, var(--green-600), #22c55e); border-color:transparent}
  .confirm.checked .check svg{stroke:#ffffff}

  .hide{display:none !important;}

  /* Step 2 */
  .uid-layout{display:grid; gap:18px}
  @media (min-width:1000px){ .uid-layout{grid-template-columns:1fr 1fr} }
  .card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
  .card h3{margin:0 0 10px; font-size:18px; font-weight:900}
  .form-row{display:flex; gap:10px; align-items:center; margin-top:10px}
  .form-row input{
    flex:1; height:56px; border-radius:14px; border:1px solid #dbe4f2; padding:0 14px; font-weight:800; font-size:16px;
    outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
    background:#f8fbff;
  }
  .form-row input:focus{border-color:color-mix(in srgb, var(--brand) 48%, #cfe0ff); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent)}
  .status{margin-top:10px; font-weight:900; color:#64748b}
  .status.ok{color:var(--green-600)}
  .hint{margin-top:10px; font-size:13px; font-weight:800; color:#64748b; background:#f8fafc; border:1px solid #e5e7eb; padding:10px 12px; border-radius:12px}
  .ol{margin:0; padding-left:18px; font-weight:800}
  .ph{font-size:14px; color:#6b7280}

  /* Single-column gallery (hero image) */
  .uid-gallery{display:grid; grid-template-columns:1fr; gap:10px; margin-top:8px}
  .uid-fig{border:1px solid #e6eef5; border-radius:12px; background:#f7faff; overflow:hidden; display:grid; place-items:center; min-height:140px}
  .uid-fig img{width:100%; height:100%; object-fit:cover}
  .uid-cap{margin-top:6px; font-size:12px; color:#64748b; font-weight:800}
  .uid-fig--hero{min-height:380px; background:#fff; border:2px solid var(--line); display:grid; place-items:center; padding:6px; border-radius:12px}
  @media (max-width:640px){ .uid-fig--hero{min-height:220px; max-height:52vh} }
  .uid-fig--hero img{object-fit:contain}

  /* Lightbox */
  .lb-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.82); display:none; align-items:center; justify-content:center; z-index:9999}
  .lb-backdrop.show{display:flex}
  .lb-img{max-width:92vw; max-height:92vh; border-radius:10px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.35)}
  .lb-backdrop:focus{outline:none}

  /* Step 3 – premium CTA + pretty code */
  .tg-cta{
    --ring: color-mix(in srgb, var(--brand) 42%, transparent);
    height:72px; padding:0 28px; border:none; color:#fff;
    background:linear-gradient(90deg, var(--brand), var(--brand-2));
    border-radius:18px; box-shadow:0 18px 44px var(--ring), inset 0 -2px 0 rgba(255,255,255,.18);
    font-size:20px; font-weight:900; display:flex; align-items:center; gap:12px; justify-content:center;
  }
  .tg-cta:hover{filter:saturate(105%)}
  .tg-cta .ico{width:26px; height:26px; border-radius:999px; background:rgba(255,255,255,.20); display:grid; place-items:center}
  .tg-cta .ico svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.5}

  .code{display:flex; align-items:center; gap:10px; margin-top:8px; padding:14px 16px; border-radius:14px; background:#0b1220; color:#fff; font-weight:900; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  .code.pretty{justify-content:space-between; gap:12px; padding:18px 18px; border-radius:16px; background:radial-gradient(140px 160px at 100% 0, rgba(255,255,255,.10), transparent), #0b1220; color:#fff; border:1px solid rgba(255,255,255,.06)}
  .code.pretty b{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:22px; letter-spacing:.5px; user-select:all}
  .code .btn-copy{height:46px; padding:0 16px; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.10); color:#fff; font-weight:900}
  .code .btn-copy:active{transform:translateY(1px)}

  .small-muted{font-size:12px; color:#64748b; font-weight:800}

  .steps{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px}
  .steps li{
    display:flex; gap:10px; align-items:flex-start;
    background:#f8fafc; border:1px solid #e5e7eb; border-radius:14px; padding:12px;
    font-weight:800; color:#1f2a3a;
  }
  .steps .dot{
    width:26px; height:26px; border-radius:999px; flex:0 0 auto; display:grid; place-items:center;
    background:linear-gradient(135deg, var(--brand-2), var(--brand)); color:#fff; font-weight:900; font-size:13px; box-shadow:0 6px 12px rgba(37,99,235,.18);
  }

  /* Existing option */
  .tile.textonly{min-height:88px; justify-content:center; text-align:center; border-style:dashed; border-color:#d5dde9}
  .tile.textonly.selected{background:#fff; border-style:dashed; border-color:#d5dde9; box-shadow:none}
  .tile.textonly .tile-meta{gap:4px}
  .tile.textonly .tile-name{font-size:20px; font-weight:900}
  .tile.textonly .tile-sub{font-size:14px; color:#64748b; font-weight:800}

  .detail.existing{display:grid; place-items:center; text-align:center; padding:36px 24px; min-height:360px}
  .detail.existing .detail-head{display:block; margin-bottom:10px}
  .detail.existing #dLogo{display:none}
  .detail.existing .d-title{display:block !important; font-size:clamp(22px, 4.8vw, 28px); font-weight:900; margin:0 0 6px; color:#0b1220}
  .detail.existing .intro{font-size:18px; line-height:1.55; font-weight:900; max-width:780px; margin:10px auto 18px}
  .detail.existing #btnSignup{min-width:360px; height:76px; font-size:21px}
  .detail.existing #ctaNote{max-width:720px; margin:8px auto 0}

  /* Alert Panels (Step 2 outcomes) */
  .alert{border:1px solid; border-radius:14px; padding:14px 16px; font-weight:800; margin-top:12px}
  .alert h4{margin:0 0 6px; font-size:16px; font-weight:900}
  .alert p{margin:0; color:#475569; font-weight:800; font-size:14px}
  .alert-red{background:#fef2f2; border-color:#fecaca}
  .alert-amber{background:#fffbeb; border-color:#fde68a}
  .alert-green{background:#ecfdf5; border-color:#bbf7d0}
  .btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
#wiz .btn-sm{height:44px; padding:0 16px; font-size:14px; border-radius:12px}

/* Already in your CSS – keep as the single source of truth */
#wiz .logo-s{ width:80px; height:80px; object-fit:contain }
.logo-l{ width:140px; height:140px; object-fit:contain }

/* Mobile detail logo stays consistent */
@media (max-width:640px){
  .logo-l{ width:110px; height:110px }
}


  .ribbon-mini{
    display:inline-flex; gap:8px; align-items:center;
    padding:8px 12px; border-radius:999px;
    background:color-mix(in srgb, var(--brand) 14%, #fff);
    border:1px solid color-mix(in srgb, var(--brand) 34%, #fff);
    color:var(--brand); font-weight:900; margin-bottom:6px;
  }

  /* =========================
     MOBILE-ONLY OVERRIDES
     ========================= */
  @media (max-width:640px){
    /* Remove bottom-left info pill in the sticky nav */
    .nav #nextHint{ display:none !important; }

    /* Prevent cutoff behind sticky nav; allow content beyond card */
    .wizard{ overflow:visible; }
    .panel{ padding-bottom:100px; } /* room above sticky footer */

    /* STEP 1: only essentials on the right */
    #exDetail .detail-head,
    #exDetail #dBonus,
    #exDetail #introTxt,
    #exDetail #dPerks,
    #exDetail #ctaNote,
    #exDetail #tabRibbon{ display:none !important; }
    #exDetail{ padding:14px; border-radius:14px; }
    #exDetail .timeline{ margin-top:4px; }
    #exDetail .cta-col{ margin-top:10px; }
    #confirmWrap{ margin-top:14px; }

    /* Tighten general cards */
    .card{ padding:14px; border-radius:14px; }

    /* STEP 2: keep compact, avoid tall visuals */
    #step2 .card:first-child .hint{ display:none; }
    #step2 .uid-cap{ display:none; }
    #step2 #uidLinks [role="note"]{ display:none; }
    #step2 .uid-under{ font-size:13px; }
    #step2 .form-row input{ height:52px; }
    #step2 #uidStatus{ font-size:13px; }
    .uid-gallery{ margin-bottom:4px; }

    /* STEP 3: remove code + numbered list; keep only Telegram link + support panel */
    #step3 .small-muted{ display:none !important; }
    #step3 .code{ display:none !important; }
    #step3 .steps{ display:none !important; }

    /* Promote support note visually */
    #step3 .hint{
      display:block;
      margin-top:14px;
      padding:14px 16px;
      border-radius:14px;
      background:linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
      border:1px solid #d6e4ff;
      box-shadow:0 6px 18px rgba(15,23,42,.06);
      font-size:13.5px;
    }

    /* Button slightly smaller */
    #step3 .tg-cta{ height:64px; font-size:18px; }
  }
  /* === FINAL MOBILE PATCH (keep desktop untouched) === */
@media (max-width:640px){
  /* Unstick footer on mobile */
#wiz .nav{
  position: static !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}


  /* Prevent any right-edge overflow on tight phones */
  .panel, .card, .detail, .list, .tile, .timeline, .uid-layout{
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  /* Trim headings in Step 2 so they don’t overflow */
  #step2 h2{ font-size:20px; line-height:1.25 }
  .card h3, #uidTitle{ font-size:16px; line-height:1.25; letter-spacing:.1px }

  /* If you previously added extra bottom space for a sticky footer, remove it now */
  .panel{ padding-bottom:18px !important; }

  /* Hide the small “unlock Next” pill on mobile */
  #nextHint{ display:none !important; }
}
/* === FIX: Step 2 mobile overlap (final override) === */
@media (max-width:640px){
  /* Force single-column flow and spacing */
  .uid-layout{ display:block !important; }
  .uid-layout .card{
    display:block !important;
    position:relative !important;
    clear:both !important;
    margin:0 0 14px 0 !important; /* space between the two cards */
    z-index:0 !important;
  }
  .uid-layout .card:last-child{ margin-bottom:0 !important; }

  /* Make the gallery size to its content so it can’t spill over */
  .uid-gallery{ height:auto !important; }
  .uid-fig{ min-height:auto !important; height:auto !important; }
  .uid-fig img{
    width:100% !important;
    height:auto !important;          /* stop fixed-height stretching */
    object-fit:contain !important;   /* avoid overflow/crop */
  }
  /* The “hero” figure can still be tall; keep it sensible on phones */
  .uid-fig--hero{ min-height:auto !important; max-height:60vh !important; }

  /* Tighten headings so they don’t bump into the next card */
  #step2 h2{ margin-bottom:8px !important; }
  #step2 .card h3{ margin:0 0 8px 0 !important; line-height:1.25 !important; }
}
/* === FIX: Step 2 input/button stacking on mobile === */
@media (max-width:640px){
  /* Stack UID input and Validate button */
  #step2 .form-row{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
  }

  /* Prevent flex overflow issues on tiny screens */
  #step2 .form-row input{
    min-width:0 !important;
    width:100% !important;
    height:54px !important; /* slightly shorter than desktop */
  }

  /* Make the Validate button full width underneath */
  #step2 #uidCheckBtn{
    width:100% !important;
    min-width:0 !important;
    height:54px !important;
  }

  /* Small spacing tweaks below the row */
  #step2 #uidStatus{ margin-top:8px !important; }
}
/* === MOBILE: Bigger, easier UID input === */
@media (max-width:640px){
  #step2 .form-row{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* Larger tap target + text size */
  #step2 .form-row input{
    width: 100% !important;
    min-width: 0 !important;
    height: 64px !important;          /* bigger field */
    font-size: 18px !important;        /* bigger text */
    padding: 0 16px !important;        /* comfy padding */
    border-radius: 16px !important;
  }
  #step2 .form-row input::placeholder{
    font-size: 16px !important;
    opacity: .7;
  }

  /* Button stays full-width underneath, matched height */
  #step2 #uidCheckBtn{
    width: 100% !important;
    min-width: 0 !important;
    height: 60px !important;
    font-size: 16px !important;
  }

  /* Keep the status readable */
  #step2 #uidStatus{
    margin-top: 8px !important;
    font-size: 14px !important;
  }
}
/* === MOBILE: make UID input big and comfy === */
@media (max-width:640px){
  /* stack nicely */
  #step2 .form-row{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  /* BIG input (height + font) */
  #step2 .form-row input{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;   /* bigger than before */
    height: 72px !important;
    font-size: 20px !important;    /* comfy text size (prevents iOS zoom) */
    line-height: 1.2 !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
  #step2 .form-row input::placeholder{
    font-size: 17px !important;
    opacity: .8;
  }

  /* Button full-width, matched size under input */
  #step2 #uidCheckBtn{
    width: 100% !important;
    min-width: 0 !important;
    height: 64px !important;
    font-size: 17px !important;
    border-radius: 16px !important;
  }

  /* Status readability */
  #step2 #uidStatus{
    font-size: 14.5px !important;
  }
}
/* === MOBILE: show the 'Already have an account' text === */
@media (max-width:640px){
  /* Only hide these when NOT on the 'existing' flow */
  #exDetail:not(.existing) .detail-head,
  #exDetail:not(.existing) #dBonus,
  #exDetail:not(.existing) #introTxt,
  #exDetail:not(.existing) #dPerks,
  #exDetail:not(.existing) #ctaNote,
  #exDetail:not(.existing) #tabRibbon{
    display: none !important;
  }

  /* When the 'existing' tile is selected, show the right-side text */
  #exDetail.existing{
    display: block;            /* ensure the panel appears on mobile */
    padding: 14px;             /* keep your compact spacing */
    border-radius: 14px;
  }
  #exDetail.existing .detail-head{ display: block !important; }
  #exDetail.existing #introTxt{ display: block !important; }
  #exDetail.existing #ctaNote{ display: block !important; }
}

/* Access Codes Banner */
.codes-banner{
  display:flex; align-items:flex-start; gap:12px;
  margin: 10px 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--blue-25) 0%, #fff 100%);
  border: 1px solid var(--blue-100);
  box-shadow: 0 8px 24px rgba(37,99,235,.08);
}
.codes-badge{
  width:36px; height:36px; border-radius:999px; flex:0 0 auto;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; font-weight:900;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 30%, transparent);
}
.codes-copy{ display:grid; gap:4px }
.codes-head{ font-weight:900; font-size:16.5px; letter-spacing:.2px; color:#0b1220 }
.codes-sub{ font-size:13.5px; color:#475569; font-weight:800 }
.codes-count{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px; margin-left:8px;
  border-radius:999px; background:#fff; border:1px solid var(--blue-100);
  font-weight:900; font-size:13px; color:#0b1220;
}
@media (max-width:640px){
  .codes-banner{ margin:8px 0 14px; padding:12px 12px; border-radius:12px }
  .codes-badge{ width:32px; height:32px }
  .codes-head{ font-size:15px }
  .codes-sub{ font-size:13px }
}
/* Prominent color states */
.codes-banner.is-green{
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
  border-color: #bbf7d0;
  box-shadow: 0 10px 30px rgba(16,185,129,.18);
}
.codes-banner.is-yellow{
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
  border-color: #fde68a;
  box-shadow: 0 10px 30px rgba(245,158,11,.16);
}
.codes-banner.is-red{
  background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%);
  border-color: #fecaca;
  box-shadow: 0 10px 30px rgba(239,68,68,.16);
}

/* Subtle inline progress (month elapsed) */
.codes-progress{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
  margin-top:8px;
}
.codes-progress > span{
  display:block;
  height:100%;
  width:var(--codes-pct, 0%);
  background: linear-gradient(90deg, #16a34a 0%, #f59e0b 50%, #ef4444 100%);
}

/* Small tweak so the chip doesn’t dominate on mobile */
@media (max-width:640px){
  .codes-count{ font-size:12px; padding:5px 8px }
}
/* === STRONGER, SOLID BANNER COLORS === */
.codes-banner{
  background:#e6efff !important;    /* solid blue tint */
  border-color:#bfd3ff !important;
  box-shadow:0 10px 28px rgba(37,99,235,.18) !important;
}
.codes-banner .codes-sub{ color:#334155 !important; }

/* State variants with solid fills (no pale gradient) */
.codes-banner.is-green{
  background:#dff7ec !important;
  border-color:#a7f3d0 !important;
  box-shadow:0 12px 30px rgba(16,185,129,.22) !important;
}
.codes-banner.is-yellow{
  background:#fff3bf !important;
  border-color:#ffe08a !important;
  box-shadow:0 12px 30px rgba(245,158,11,.20) !important;
}
.codes-banner.is-red{
  background:#ffd9d9 !important;
  border-color:#ffb3b3 !important;
  box-shadow:0 12px 30px rgba(239,68,68,.22) !important;
}

/* Optional: make the badge pop a bit more against the solid fill */
.codes-badge{
  box-shadow:0 8px 18px rgba(0,0,0,.12) !important;
}
@media (min-width: 641px){

  /* Scope to wizard footer-nav only */
  #wiz .nav{
    position: static !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  #wiz{
    transform-origin: top center;
    will-change: transform;
  }
}

/* MOBILE: horizontal logo-left, text-right tiles */
@media (max-width:640px){
  /* restore row layout */
  .tiles .tile{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    padding:14px 14px !important;
    min-height:92px !important;
    text-align:left !important;
  }

  /* logo box stays fixed size on the left */
  .tiles .logo-box{
    width:72px !important;
    height:72px !important;
    border-radius:12px !important;
    flex:0 0 72px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 !important;
  }

  /* FIX: target the small logo inside the logo-box within #wiz */
  #wiz .tiles .logo-box .logo-s{
    width:64px !important;
    height:64px !important;
    object-fit:contain !important;
  }

  /* text column fills remaining width, left-aligned */
  .tiles .tile .tile-meta{
    display:grid !important;
    gap:4px !important;
    align-content:center !important;
    justify-items:start !important;   /* override inline center */
    text-align:left !important;       /* override inline center */
    width:100% !important;
  }

  /* comfortable mobile sizing */
  .tile-name{ font-size:19px !important; line-height:1.2 !important; }
  .tile-sub{ font-size:13.5px !important; }

  /* optional: make the whole list breathe a bit */
  .tiles{ gap:12px !important; }
}

/* ===== STEP 3 — Polished layout ===== */
.ready-banner{
  display:flex; align-items:center; gap:12px;
  margin: 6px 0 14px; padding:14px 16px; border-radius:16px;
  background: linear-gradient(180deg,#ecfdf5 0%,#ffffff 100%);
  border: 1px solid #bbf7d0; box-shadow:0 8px 24px rgba(16,185,129,.12);
}
.ready-banner .rb-ico{
  width:32px; height:32px; border-radius:999px; flex:0 0 auto;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#16a34a,#22c55e);
  box-shadow:0 6px 14px rgba(16,185,129,.25);
}
.ready-banner .rb-head{ font-weight:900; color:#065f46; }
.ready-banner .rb-sub{ font-weight:800; color:#475569; font-size:13.5px; }

.step3-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
@media (max-width:860px){ .step3-grid{ grid-template-columns:1fr; } }

.step3-card{ padding:18px; border-radius:16px; }
.s3-kicker{ font-size:12px; font-weight:900; color:#64748b; letter-spacing:.2px; margin-bottom:6px }
.s3-title{ margin:0 0 6px; font-size:20px; font-weight:900 }
.s3-text{ margin:0 0 12px; color:#475569; font-weight:800 }

.s3-cta{
  --ring: color-mix(in srgb, var(--brand) 42%, transparent);
  display:inline-flex; align-items:center; gap:10px;
  height:60px; padding:0 20px; border-radius:14px; border:none;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#fff; font-weight:900; box-shadow:0 14px 34px var(--ring), inset 0 -2px 0 rgba(255,255,255,.18);
  text-decoration:none;
}
.s3-cta .ico{
  width:26px; height:26px; border-radius:999px; background:rgba(255,255,255,.20);
  display:grid; place-items:center; flex:0 0 auto;
}
.s3-cta.primary{ width:100%; justify-content:center; margin-bottom:12px }
.s3-cta:hover{ filter:saturate(105%) }
.s3-note{ margin-top:8px; font-size:12.5px; font-weight:800; color:#64748b }

.code-card{
  display:flex; gap:10px; align-items:stretch; margin-top:6px;
}
.code-mono{
  flex:1; min-height:56px; display:grid; place-items:center; padding:0 14px;
  border-radius:14px; font-weight:900; color:#0b1220;
  background:#0b1220; color:#fff; border:1px solid rgba(255,255,255,.06);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:20px; user-select:all;
}
.btn-copy{
  height:56px; padding:0 16px; border-radius:14px; border:1px solid #dbe4f2;
  background:#f8fbff; color:#0b1220; font-weight:900; cursor:pointer;
}
.btn-copy:active{ transform:translateY(1px) }

.s3-recipe{
  margin:10px 0 0; padding-left:18px; color:#1f2a3a; font-weight:800; display:grid; gap:6px;
}
.s3-recipe li{ line-height:1.5 }

.help-note{
  margin-top:12px; font-size:13px; font-weight:800; color:#475569;
  background:linear-gradient(180deg,#f7faff 0%, #eef5ff 100%);
  border:1px solid #d6e4ff; padding:12px 14px; border-radius:14px;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.help-note a{ font-weight:900; text-decoration:underline }

/* Mobile tweaks */
@media (max-width:640px){
  .s3-cta{ height:56px; }
  .code-mono{ font-size:18px; min-height:52px }
  .btn-copy{ height:52px }
}

/* Subtle raffle-ticket chip */
.ticket{
  margin-top:10px;
  display:grid;
  grid-template-columns: 14px 1fr 14px;
  align-items:stretch;
}
.ticket-hole{
  width:14px; height:100%;
  background:
    radial-gradient(circle at 50% 14px, transparent 6px, #e5e7eb 6.5px) top,
    radial-gradient(circle at 50% calc(100% - 14px), transparent 6px, #e5e7eb 6.5px) bottom;
  background-repeat:no-repeat;
  background-size:14px 14px;
}
.ticket-body{
  display:grid; gap:4px; padding:12px 14px;
  border:1px dashed #d6e3f3; border-left:none; border-right:none;
  background:#f8fbff; border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.ticket-label{
  font-size:12px; font-weight:900; color:#64748b;
}
.ticket-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:16px; letter-spacing:.3px; font-weight:900; color:#334155;
  user-select:all;
}

/* Make the CTA icon match Cornix style (you already have .s3-cta) */
.s3-cta .ico svg{ stroke:#fff; fill:none; stroke-width:2.5 }

/* Let the wizard itself be transparent so the backdrop shows through */
#wiz{ background:transparent; }

/* Let items wrap on small screens */
.confirm{
  flex-wrap: wrap;
}

/* Inline Next positioned at the right inside the confirm box */
.confirm .inline-next{
  display: none;         /* hidden by default */
  margin-left: auto;     /* pushes it to the right */
  align-items: center;
}
.confirm .inline-next.show{
  display: flex;         /* shown when JS adds .show */
}
.confirm .inline-next .btn.btn-next{
  min-width: 160px;
}

/* On phones, let it drop under the text, right-aligned */
@media (max-width:640px){
  /* Keep inline Next hidden on mobile */
  .confirm .inline-next,
  .confirm .inline-next.show{
    display:none !important;
  }

  /* Stack title + help text nicely under the check */
  .confirm-content{
    flex:1 1 100%;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .confirm-sub{
    display:block;          /* show help text under the title */
    margin:0;
    padding:0;
    background:none;
    border:none;
    color:#7c8a9a;          /* softer tone on mobile */
    white-space:normal;
  }
}
/* === MOBILE ONLY: tidy confirm row (check left, title right, helper below) === */
@media (max-width:640px){
  /* Keep the check and the main title on one line */
  #confirmWrap.confirm{
    display:flex;
    align-items:flex-start;
    flex-wrap:nowrap;          /* prevent wrapping to a new line */
    gap:12px;
  }

  /* Check stays fixed on the left */
  #confirmWrap .check{
    flex:0 0 42px;
    margin-top:2px;            /* optical align with title */
  }

  /* Text block to the right of the check */
  #confirmWrap .confirm-content{
    display:block;             /* reset any column flex from earlier rules */
    flex:1 1 auto;
    min-width:0;
  }

  /* Title sits on the same line as the check */
  #confirmWrap .confirm-title{
    display:block;
    font-size:15.5px;
    line-height:1.25;
  }

  /* Helper line goes underneath the title (full width of the text block) */
  #confirmWrap .confirm-sub{
    display:block;
    margin-top:4px;
    font-size:13px;
    color:#7c8a9a;
    background:none;
    border:none;
    padding:0;
    white-space:normal;        /* allow natural wrapping within the text block */
  }

  /* Keep inline Next hidden on mobile */
  #confirmWrap .inline-next,
  #confirmWrap .inline-next.show{
    display:none !important;
  }
}