/* Smart Invite — trust theme (white card + friendly blue + green safety accents)
   Matches the invite-vault reference. Compact, fits desktop viewport without zoom. */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:#334155; background:#f4f7fc; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Blurred photo backdrop with soft white/blue veil */
.bg{
  position:fixed; inset:-40px; z-index:-2;
  background: url("img/bg.jpg") center/cover no-repeat;
  filter: blur(7px) saturate(1.05);
  transform: scale(1.12);
}
.bg::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1000px 700px at 12% -10%, rgba(59,130,246,.22) 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(34,197,94,.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(248,250,252,.70) 0%, rgba(241,245,251,.86) 100%);
}

.stage{min-height:100vh; display:grid; place-items:center; padding:clamp(12px,2vh,44px) 18px}

/* Card */
.card{
  width:min(600px,100%);
  max-height: calc(100vh - clamp(24px,4vh,88px));
  background:#ffffff;
  border:1px solid #e6ecf3;
  border-radius:22px;
  padding:clamp(18px,2.6vh,34px) clamp(20px,3vw,30px) clamp(16px,2vh,26px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 8px -2px rgba(15,23,42,.05),
    0 30px 60px -20px rgba(37,99,235,.20);
  animation: cardIn .7s cubic-bezier(.2,.9,.2,1) both;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg,#22c55e 0%,#3b82f6 40%,#2563eb 100%);
}
@keyframes cardIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

.card-head{text-align:center; padding-bottom:clamp(8px,1.4vh,20px)}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  background:#ecfdf5; color:#059669;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid #a7f3d0;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.55); animation: pulseDot 1.8s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.4}}

.greet{margin:clamp(6px,1vh,14px) 0 2px; color:#475569; font-size:15px}
.greet .name-type{
  color:#2563eb; font-weight:700;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.name-type{white-space:nowrap}
.caret{display:inline-block; width:2px; height:1em; margin-left:3px; background:#3b82f6; vertical-align:-2px; animation: iv-blink 1s steps(1) infinite}
@keyframes iv-blink{50%{opacity:0}}

.title{
  margin:clamp(6px,1vh,12px) 0 8px;
  font-size: clamp(20px, 3vw, 30px);
  line-height:1.2; letter-spacing:-.015em;
  color:#0f172a; font-weight:700;
}
.sub{margin:0 auto; max-width:440px; color:#64748b; line-height:1.5; font-size:14.5px}

/* Teaser list */
.teaser{
  list-style:none; margin:clamp(12px,1.8vh,22px) 0 clamp(12px,1.6vh,20px); padding:0;
  border:1px solid #e6ecf3; border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,#f8fafc,#ffffff);
}
.tz-row{
  display:grid; grid-template-columns: 40px 90px 1fr; align-items:center; gap:10px;
  padding:clamp(8px,1.3vh,14px) 16px; border-top:1px solid #eef2f7;
}
.tz-row:first-child{border-top:0}
.tz-ic{
  width:34px;height:34px;border-radius:10px;
  background:#eff6ff; color:#2563eb;
  display:grid; place-items:center; font-size:17px;
  border:1px solid #dbeafe;
}
.tz-k{color:#64748b; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.tz-v{color:#0f172a; font-weight:600; font-size:15px; min-width:0}
.tz-locked{position:relative; display:inline-flex; align-items:center; gap:10px; min-height:22px}
.tz-blur{
  color:#94a3b8; filter: blur(6px); user-select:none; pointer-events:none;
  font-size:14px; letter-spacing:.02em;
}
.tz-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:#f1f5f9; color:#475569;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid #e2e8f0;
  cursor:pointer;
}
.tz-badge .lock{font-size:11px}

/* CTA */
.cta-wrap{text-align:center; margin-top:6px}
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:clamp(11px,1.6vh,15px) 28px; border-radius:999px;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff; text-decoration:none; font-weight:700; font-size:15px;
  border:none; cursor:pointer;
  box-shadow:
    0 10px 25px rgba(37,99,235,.32),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  font-family:inherit; letter-spacing:.01em;
  position:relative;
}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  box-shadow:0 0 0 0 rgba(59,130,246,.5);
  animation: btnPulse 2.2s ease-out infinite;
}
@keyframes btnPulse{
  0%{box-shadow:0 0 0 0 rgba(59,130,246,.45)}
  70%{box-shadow:0 0 0 14px rgba(59,130,246,0)}
  100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 14px 30px rgba(37,99,235,.36)}
.btn:active{transform:translateY(0)}
.btn-ic{font-size:14px}
.btn-arrow{font-size:18px; transition: transform .2s ease}
.btn:hover .btn-arrow{transform: translateX(3px)}

.cta-note{margin:clamp(8px,1.2vh,14px) 0 4px; color:#64748b; font-size:12.5px}
.cta-note .chk{color:#22c55e; font-weight:900}

.card-foot{margin-top:clamp(10px,1.4vh,18px); padding-top:clamp(8px,1vh,14px); border-top:1px dashed #e6ecf3; text-align:center}
.foot-mono{font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:#94a3b8; letter-spacing:.06em}

/* Shake FX on the card */
@keyframes inviteShake{
  0%,100%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-4px,0,0)}
  40%{transform:translate3d(4px,0,0)}
  60%{transform:translate3d(-3px,0,0)}
  80%{transform:translate3d(3px,0,0)}
}
.card.shake{animation:inviteShake .45s ease}

/* Overlay */
.overlay{
  position:fixed; inset:0; z-index:50;
  display:none; align-items:center; justify-content:center;
  background: rgba(15,23,42,.5); backdrop-filter: blur(6px);
  padding:20px;
}
.overlay.show{display:flex; animation:fadein .3s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}

.overlay-card{
  width:min(460px,100%); padding:32px 26px;
  background:#fff; border:1px solid #e2e8f0; border-radius:18px; text-align:center;
  box-shadow: 0 25px 60px rgba(15,23,42,.22);
  animation: pop .35s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes pop{from{transform:scale(.92); opacity:0}to{transform:scale(1); opacity:1}}
.ov-icon{
  width:52px;height:52px;margin:0 auto 10px;
  display:grid; place-items:center; font-size:26px;
  background:#eff6ff; color:#2563eb;
  border:1px solid #bfdbfe; border-radius:14px;
}
.overlay h2{margin:0 0 8px; color:#0f172a; font-weight:700; font-size:22px}
.ov-lead{margin:0 0 18px; color:#475569; line-height:1.5; font-size:14px}

/* Code block */
.code-block{
  border:1px dashed #cbd5e1;
  border-radius:12px;
  padding:14px;
  background:linear-gradient(180deg,#f8fafc,#ffffff);
  margin-bottom:12px; text-align:left;
}
.code-label{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  color:#64748b; text-transform:uppercase; margin-bottom:8px;
}
.code-row{display:flex; align-items:center; gap:8px}
.code-value{
  flex:1;
  font-family: ui-monospace,Menlo,monospace;
  font-size:20px; font-weight:700; letter-spacing:.14em;
  color:#0f172a;
  background:#fff;
  border:1.5px solid #cbd5e1; border-radius:10px;
  padding:11px 12px; text-align:center;
  user-select:all;
}
.code-copy{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700;
  color:#fff; background:#2563eb;
  border:0; border-radius:10px; padding:11px 14px;
  cursor:pointer; transition:background .2s ease;
  font-family:inherit;
}
.code-copy:hover{background:#1d4ed8}
.code-copy.is-copied{background:#22c55e}
.code-hint{font-size:12px; color:#64748b; margin-top:8px}

/* Steps */
.steps{text-align:left; margin:14px 0 8px; display:grid; gap:10px}
.step{display:flex; gap:10px; color:#475569; font-size:13.5px; line-height:1.45}
.step .num{
  flex:0 0 24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe;
  font-family: ui-monospace,Menlo,monospace; font-size:12px;
}
.step b{color:#0f172a}
.step code{font-family:ui-monospace,Menlo,monospace; color:#2563eb; background:#f1f5f9; padding:1px 6px; border-radius:4px; font-size:12.5px}

/* Urgent time note */
.time-note.urgent{
  margin:14px 0 0; padding:10px 12px;
  background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
  border-radius:10px; font-size:12.5px; line-height:1.5; text-align:center;
  animation: pulseUrgent 2s ease-in-out infinite;
}
.time-note.urgent b{color:#7c2d12}
@keyframes pulseUrgent{0%,100%{box-shadow:0 0 0 0 rgba(220,80,60,.22)}50%{box-shadow:0 0 0 6px rgba(220,80,60,0)}}

@media (max-width:480px){
  .card{padding:26px 20px 20px; border-radius:18px}
  .title{font-size:22px}
  .tz-row{grid-template-columns: 34px 72px 1fr; padding:12px 12px; gap:8px}
  .tz-ic{width:30px;height:30px;font-size:15px}
  .tz-blur{font-size:12px}
  .tz-badge{font-size:10px; padding:3px 8px}
  .btn{padding:14px 22px; font-size:14px}
}