/* LattiSpec Matchmaking Popup — CSS */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Josefin+Sans:wght@300;400;600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ── Variables ────────────────────────────────── */
.lsp-overlay,.lsp-popup{
  --lsp-blue:#00AEEF;
  --lsp-blue-dk:#0079b8;
  --lsp-blue-pl:rgba(0,174,239,.1);
  --lsp-blue-ln:rgba(0,174,239,.22);
  --lsp-ink:#0b1525;
  --lsp-white:#000;
  --lsp-off:#000;
  --lsp-border:#000;
  --lsp-text:#000;
  --lsp-muted:#000;
  --lsp-faint:#000;
  --lsp-green:#059669;
  --lsp-fd:'Cormorant Garamond',Georgia,serif;
  --lsp-fs:'Josefin Sans',sans-serif;
  --lsp-fb:'DM Sans',system-ui,sans-serif;
}

/* ── Overlay ──────────────────────────────────── */
.lsp-overlay{
  position:fixed !important;
  inset:0;
  background:rgba(5,10,22,.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:999999 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  visibility:visible !important;
}
.lsp-overlay.lsp-open{
  opacity:1 !important;
  pointer-events:all !important;
  visibility:visible !important;
}

/* ── Popup card ───────────────────────────────── */
.lsp-popup{
  position:relative;
  width:100%;
  max-width:740px;
  max-height:92vh;
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:6px;
  background:#fff;
  box-shadow:
    0 0 0 1px var(--lsp-blue-ln),
    0 40px 100px rgba(0,0,0,.6),
    0 8px 30px rgba(0,174,239,.1);
  transform:translateY(28px) scale(.97);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  scrollbar-width:none;
  font-family:var(--lsp-fb);
  -webkit-font-smoothing:antialiased;
}
.lsp-popup::-webkit-scrollbar{display:none;}
.lsp-overlay.lsp-open .lsp-popup{
  transform:translateY(0) scale(1);
}

/* Grid overlay texture */
.lsp-popup::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,174,239,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,174,239,.03) 1px,transparent 1px);
  background-size:44px 44px;
  pointer-events:none;
  z-index:0;
}
/* Glow blob */
.lsp-popup::after{
  content:'';
  position:absolute;
  top:-100px;right:-100px;
  width:380px;height:380px;
  background:radial-gradient(circle,rgba(0,174,239,.12) 0%,transparent 65%);
  pointer-events:none;z-index:0;
}

/* ── Session badge ────────────────────────────── */
.lsp-session-badge{
  position:absolute;
  top:1.1rem;left:1.2rem;
  font-family:var(--lsp-fs);
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--lsp-faint);
  display:flex;align-items:center;gap:.38rem;
  z-index:10;
}
.lsp-pulse-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(0,174,239,.55);
  animation:lspPulse 2.5s ease-in-out infinite;
}
@keyframes lspPulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.35;transform:scale(1.6);}
}

/* ── Close button ─────────────────────────────── */
.lsp-close{
  position:absolute;top:1rem;right:1rem;
  width:34px;height:34px;border-radius:5px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--lsp-border);
  color:var(--lsp-faint);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
  z-index:10;
}
.lsp-close:hover{background:rgba(255,255,255,.13);color:var(--lsp-white);}
.lsp-close svg{width:14px;height:14px;}

/* ── TOP SECTION ──────────────────────────────── */
.lsp-top{
  position:relative;z-index:1;
  padding:2.5rem 2.6rem 0;
  text-align:center;
}

/* Logo */
.lsp-logo-wrap{
  display:flex;align-items:center;justify-content:center;
  gap:.7rem;margin-bottom:1.5rem;
}
.lsp-logo-img{
  height:40px;width:auto;
  filter:brightness(0) invert(1);/* make logo white — remove if logo is already white/light */
}
/* Fallback wordmark */
.lsp-logo-badge{width:36px;height:36px;position:relative;flex-shrink:0;}
.lsp-diamond{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--lsp-blue),var(--lsp-blue-dk));
  clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);
}
.lsp-diamond-inner{
  position:absolute;inset:5px;
  background:var(--lsp-ink);
  clip-path:polygon(50% 8%,92% 40%,78% 94%,22% 94%,8% 40%);
}
.lsp-diamond-core{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:7px;height:7px;border-radius:50%;
  background:var(--lsp-blue);
  box-shadow:0 0 8px rgba(0,174,239,.9);
}
.lsp-logo-name{
  font-family:var(--lsp-fs);
  font-size:1.2rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--lsp-white);
}
.lsp-logo-name span{color:var(--lsp-blue);}

/* Service tag */
.lsp-service-tag{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--lsp-fs);
  font-size:.85rem;letter-spacing:0em;text-transform:uppercase;
  color:var(--lsp-blue);
  border:1px solid rgba(0,174,239,.28);
  padding:.28rem 1rem;border-radius:2px;
  margin-bottom:1.1rem;
}
.lsp-service-tag::before,.lsp-service-tag::after{
  content:'';width:18px;height:1px;
  background:rgba(0,174,239,.38);
}

/* Headline */
.lsp-headline{
  font-family:var(--lsp-fd);
  font-size:clamp(1.65rem,3.2vw,2.4rem);
  font-weight:300;line-height:1.15;
  color:var(--lsp-white);
  letter-spacing:-.01em;
  margin-bottom:.6rem;
}
.lsp-headline em{font-style:italic;color:var(--lsp-blue);}

.lsp-subhead{
  font-size:.87rem;color:var(--lsp-muted);
  line-height:1.72;
  max-width:480px;margin:0 auto 1.8rem;
}

/* ── MARTY CARD ───────────────────────────────── */
.lsp-marty{
  position:relative;z-index:1;
  margin:0 2.6rem;
  padding:1.4rem;
  background:#fff;
  border:1px solid var(--lsp-border);
  border-radius:5px;
  display:flex;align-items:center;gap:1.4rem;
}

.lsp-marty-photo{
  flex-shrink:0;
  width:90px;height:90px;
  border-radius:5px;
  overflow:hidden;
  border:1px solid var(--lsp-blue-ln);
  position:relative;
}
.lsp-marty-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block;
}
.lsp-photo-placeholder{
  width:100%;height:100%;
  background:linear-gradient(145deg,#0d2040,#162d52);
  display:flex;align-items:center;justify-content:center;
}
.lsp-photo-placeholder svg{width:36px;height:36px;opacity:.3;}
/* Blue accent bar on left */
.lsp-marty-photo::after{
  content:'';
  position:absolute;left:0;top:0;bottom:0;
  width:3px;
  background:linear-gradient(to bottom,var(--lsp-blue),rgba(0,174,239,.18));
  z-index:1;
}
/* Subtle glow */
.lsp-photo-glow{
  position:absolute;inset:-1px;
  border-radius:inherit;
  box-shadow:0 0 20px rgba(0,174,239,.18);
  pointer-events:none;
}

.lsp-marty-name{
  font-family:var(--lsp-fd);
  font-size:1.35rem;font-weight:500;
  color:var(--lsp-white);
  letter-spacing:.01em;margin-bottom:.15rem;line-height:1.1;
}
.lsp-marty-role{
  font-family:var(--lsp-fs);
  font-size:.85rem;letter-spacing:0em;text-transform:uppercase;
  color:var(--lsp-blue);margin-bottom:.5rem;
}
.lsp-marty-bio{
  font-size:.82rem;
  color:var(--lsp-muted);line-height:1.68;margin:0;
}
.lsp-marty-bio strong{color:rgba(255,255,255,.75);font-weight:500;}

/* ── FEATURES GRID ────────────────────────────── */
.lsp-features{
  position:relative;z-index:1;
  padding:1.5rem 2.6rem;
  display:grid;grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.lsp-feature{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.95rem 1.05rem;
  background:#fff;
  border:1px solid var(--lsp-border);
  border-radius:5px;
  transition:border-color .2s,background .2s;
}
.lsp-feature:hover{
  border-color:rgba(0,174,239,.28);
  background:rgba(0,174,239,.05);
}
.lsp-feature-icon{
  width:30px;height:30px;flex-shrink:0;
  border-radius:4px;
  background:var(--lsp-blue-pl);
  border:1px solid rgba(0,174,239,.22);
  display:flex;align-items:center;justify-content:center;
  margin-top:.05rem;
}
.lsp-feature-icon svg{width:13px;height:13px;color:var(--lsp-blue);}
.lsp-feature-title{
  font-family:var(--lsp-fs);
  font-size:.85rem;letter-spacing:0em;text-transform:uppercase;
  color:var(--lsp-white);margin-bottom:.25rem;
}
.lsp-feature-desc{
  font-size:.82rem;color:var(--lsp-muted);line-height:1.62;
}

/* ── CTA SECTION ──────────────────────────────── */
.lsp-cta{
  position:relative;z-index:1;
  padding:0 2.6rem 2.4rem;
  text-align:center;
}
/* Gradient divider */
.lsp-cta::before{
  content:'';display:block;
  height:1px;margin-bottom:1.6rem;
  background:linear-gradient(90deg,transparent,rgba(0,174,239,.3),transparent);
}

.lsp-price-row{
  display:flex;align-items:baseline;justify-content:center;
  gap:.35rem;margin-bottom:.35rem;
}
.lsp-price-label{
  font-family:var(--lsp-fs);
  font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lsp-faint);
}
.lsp-price-amount{
  font-family:var(--lsp-fd);
  font-size:2.7rem;font-weight:500;
  color:var(--lsp-white);line-height:1;letter-spacing:-.02em;
}
.lsp-price-note{
  font-size:.76rem;color:var(--lsp-faint);
  margin-bottom:1.5rem;font-style:italic;
}

/* Book button */
.lsp-book-btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  width:100%;max-width:420px;
  font-family:var(--lsp-fs);
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,var(--lsp-blue) 0%,var(--lsp-blue-dk) 100%);
  border:none;
  padding:1.05rem 1.8rem;
  border-radius:4px;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  text-decoration:none;
  box-shadow:
    0 6px 28px rgba(0,174,239,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
  margin-bottom:1rem;
}
.lsp-book-btn::before{
  content:'';
  position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transition:left .55s ease;
}
.lsp-book-btn:hover::before{left:100%;}
.lsp-book-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 10px 38px rgba(0,174,239,.45),
    inset 0 1px 0 rgba(255,255,255,.2);
  color:#fff;text-decoration:none;
}
.lsp-book-btn:active{transform:translateY(0);}
.lsp-book-btn svg{width:15px;height:15px;flex-shrink:0;}
.lsp-btn-price{font-size:.85rem;opacity:.82;margin-left:.08rem;}

/* Decline */
.lsp-decline{
  display:block;
  font-family:var(--lsp-fs);
  font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lsp-faint);
  background:none;border:none;cursor:pointer;
  padding:.3rem;margin:0 auto;
  transition:color .2s;
  text-decoration:none;
}
.lsp-decline:hover{color:rgba(255,255,255,.52);}

/* Trust strip */
.lsp-trust-strip{
  display:flex;align-items:center;justify-content:center;
  gap:1.2rem;flex-wrap:wrap;margin-top:1.2rem;
}
.lsp-trust-item{
  display:flex;align-items:center;gap:.38rem;
  font-family:var(--lsp-fs);
  font-size:.48rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lsp-faint);
}
.lsp-trust-item svg{width:10px;height:10px;color:rgba(0,174,239,.45);}

/* ── Responsive ───────────────────────────────── */
@media(max-width:580px){
  .lsp-top      {padding:2rem 1.3rem 0;}
  .lsp-marty    {margin:0 1.3rem;flex-direction:column;gap:1rem;}
  .lsp-marty-photo{width:72px;height:72px;}
  .lsp-features {grid-template-columns:1fr;padding:1.2rem 1.3rem;}
  .lsp-cta      {padding:0 1.3rem 2rem;}
  .lsp-headline {font-size:1.5rem;}
  .lsp-price-amount{font-size:2rem;}
  .lsp-trust-strip{gap:.75rem;}
}
@media(max-width:360px){
  .lsp-headline{font-size:1.3rem;}
  .lsp-book-btn{font-size:.58rem;padding:.9rem 1rem;}
}

/* ═══════════════════════════════════════════════════════
   LSP TOAST ALERT — REQ 8, 9, 10, 11
   Small notification near top of screen, 15s auto-dismiss.
   Slides in from top-right. Clickable. Has close button.
═══════════════════════════════════════════════════════ */

/* ── Toast container ── */
#lsp-toast {
  position: fixed;
  top: 40px;
  right: 50px;
  z-index: 999998; /* just below the full popup overlay */
  width: 500px;
  max-width: 100%;
  background: #0b1525;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0, 174, 239, .2),
    0 20px 60px rgba(0, 0, 0, .45),
    0 4px 16px rgba(0, 174, 239, .12);
  overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* REQ 9: slides in from top */
  transform: translateY(-110%) scale(.96);
  opacity: 0;
  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1),
    opacity   .35s ease;
  will-change: transform, opacity;
}

/* Open state */
#lsp-toast.lsp-toast-open {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Closing state */
#lsp-toast.lsp-toast-closing {
  transform: translateY(-20px) scale(.97);
  opacity: 0;
  transition:
    transform .3s ease-in,
    opacity   .28s ease-in;
}

/* ── Clickable body (REQ 10) ── */
.lsp-toast-body {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px;
  width: 100% !important;
  padding: 14px 44px 10px 14px !important; /* right padding leaves room for close btn */
  background: none !important;
  border: none !important;
  cursor: pointer;
  text-align: left !important;
  transition: background .18s;
}
.lsp-toast-body:hover {
  background: rgba(0, 174, 239, .06);
}
.lsp-toast-body:focus-visible {
  outline: 2px solid #00AEEF;
  outline-offset: -2px;
  border-radius: 12px 12px 0 0;
}

/* ── Avatar ── */
.lsp-toast-avatar {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: visible;
}
.lsp-toast-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border: 2px solid rgba(0, 174, 239, .3);
}
.lsp-toast-avatar-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #0d2040, #162d52);
  border: 2px solid rgba(0, 174, 239, .25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lsp-toast-avatar-fallback svg {
  width: 20px;
  height: 20px;
  color: rgba(0, 174, 239, .5);
}

/* Online pulse dot */
.lsp-toast-pulse {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #059669;
  border: 2px solid #0b1525;
  box-shadow: 0 0 8px rgba(5, 150, 105, .7);
  animation: lspToastPulse 2.4s ease-in-out infinite;
}
@keyframes lspToastPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.25); opacity: .7; }
}

/* ── Text area ── */
.lsp-toast-text {
  width:100%;
  max-width:100%; 
}
.lsp-toast-eyebrow {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0em;
  text-transform: uppercase;
  color: #00AEEF;
  margin: 0 0 3px;
  line-height: 1;
}
.lsp-toast-msg {
  display:flex;
  flex-direction:column;  
  font-size: 15px;
  color: rgba(255, 255, 255, .78);
  line-height: 1.45;
  margin: 0;
  word-wrap: break-word;
  white-space: wrap;
  width:88%;
}
.lsp-toast-cta-inline {
  display: inline-block;
  margin-left: 4px;
  color: #00AEEF;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s;
}
.lsp-toast-body:hover .lsp-toast-cta-inline {
  color: #33c4f5;
}

/* ── Close button (REQ 11) ── */
.lsp-toast-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px !important;
  height: 30px !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, 1) !important ;
  color: rgba(255, 255, 255, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .18s, color .18s;
  flex-shrink: 0;
}
.lsp-toast-close:hover {
  background: #00aeef !important;
  color: #fff;
   border: 1px solid #00aeef !important;
}
.lsp-toast-close:focus-visible {
  outline: 2px solid #00AEEF;
  outline-offset: 1px;
}
.lsp-toast-close svg {
  width: 12px;
  height: 12px;
  stroke:#fff;
  fill:#fff;
}

/* ── Progress bar — 15s countdown (REQ 9) ── */
.lsp-toast-progress {
  height: 3px;
  background: rgba(255, 255, 255, .08);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.lsp-toast-progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #00AEEF, #0079b8);
  transform-origin: left center;
  /* animated by JS via CSS custom property */
  transition: transform linear;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  #lsp-toast {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }
}