/* ============================================================================
   bundle.css — ADD-ON. AI Skill Bundle teaser + registration.
   Loaded only when the feature is enabled. All selectors prefixed .bnd-.
   Reuses the site's existing modal recipe (#infoOverlay) and tokens.
   ============================================================================ */

.bnd-overlay{
  position:fixed; inset:0; z-index:210; display:none;
  align-items:center; justify-content:center; padding:1.5rem;
  background:color-mix(in oklab, var(--background) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; transition:opacity .3s ease;
  overflow-y:auto;
}
.bnd-overlay.open{ display:flex; }
.bnd-modal{
  background:var(--card); border:1px solid var(--border-strong); border-radius:20px;
  max-width:720px; width:100%; max-height:88vh; overflow-y:auto;
  box-shadow:0 30px 60px -12px rgba(0,0,0,.6);
  padding:2rem 1.9rem 1.9rem; position:relative;
  transform:scale(.95); transition:transform .3s cubic-bezier(.2,.9,.3,1);
  margin:auto;
}
.bnd-overlay.open .bnd-modal{ transform:scale(1); }
.bnd-close{
  position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:color-mix(in oklab, var(--card) 60%, transparent);
  color:var(--muted-foreground); font-size:18px; cursor:none; display:grid; place-items:center;
  transition:all .25s cubic-bezier(.2,.9,.3,1); z-index:3;
}
.bnd-close:hover{ border-color:var(--neon); color:var(--neon); }
.bnd-close:focus-visible{ outline:2px solid var(--neon); outline-offset:3px; }

.bnd-eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cyan); font-weight:600; margin-bottom:.7rem;
}
.bnd-h1{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.35rem,3.2vw,1.85rem);
  color:var(--foreground); line-height:1.25; margin:0 0 .7rem;
}
.bnd-sub{ color:var(--muted-foreground); font-size:.95rem; line-height:1.6; margin:0 0 1.3rem; }

.bnd-stats{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.bnd-stat b{
  display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--neon); line-height:1;
}
.bnd-stat span{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-foreground);
}

/* teaser grid — categories only, never the resource names */
.bnd-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:.8rem; margin-bottom:1.4rem; }
.bnd-cat{
  border:1px solid var(--border); border-radius:14px; padding:.95rem 1rem;
  background:color-mix(in oklab, var(--card-soft) 70%, transparent);
  position:relative; overflow:hidden;
  transition:border-color .3s cubic-bezier(.2,.9,.3,1), transform .3s cubic-bezier(.2,.9,.3,1);
}
.bnd-cat:hover{ transform:translateY(-2px); }
.bnd-cat[data-accent="neon"]{ border-left:3px solid var(--neon); }
.bnd-cat[data-accent="cyan"]{ border-left:3px solid var(--cyan); }
.bnd-cat[data-accent="violet"]{ border-left:3px solid var(--violet); }
.bnd-cat h4{
  font-family:var(--font-display); font-size:.92rem; font-weight:700; color:var(--foreground);
  margin:0 0 .3rem; display:flex; align-items:center; gap:.4rem;
}
.bnd-cat h4 .material-symbols-rounded{ font-size:17px; }
.bnd-cat[data-accent="neon"] h4 .material-symbols-rounded{ color:var(--neon); }
.bnd-cat[data-accent="cyan"] h4 .material-symbols-rounded{ color:var(--cyan); }
.bnd-cat[data-accent="violet"] h4 .material-symbols-rounded{ color:var(--violet); }
.bnd-cat p{ color:var(--muted-foreground); font-size:.8rem; line-height:1.5; margin:0 0 .5rem; }
.bnd-cat .bnd-benefit{ color:var(--foreground); font-size:.8rem; font-weight:600; margin-bottom:.5rem; }
.bnd-cat-meta{
  display:flex; gap:.5rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-foreground);
}
.bnd-pill{ padding:2px 7px; border-radius:999px; border:1px solid var(--border); }

/* masked preview strip — signals "there is more" without naming anything */
.bnd-masked{ margin-top:.6rem; display:flex; flex-direction:column; gap:4px; }
.bnd-masked i{
  display:block; height:6px; border-radius:3px;
  background:linear-gradient(90deg, color-mix(in oklab, var(--muted-foreground) 34%, transparent), transparent);
  filter:blur(1.4px);
}
.bnd-masked i:nth-child(2){ width:78%; }
.bnd-masked i:nth-child(3){ width:56%; }

/* form */
.bnd-form{ display:block; }
.bnd-row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.bnd-field{ margin-bottom:.85rem; }
.bnd-field label{
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-foreground); margin-bottom:.35rem; font-weight:600;
}
.bnd-field input[type=text],.bnd-field input[type=email],.bnd-field select{
  width:100%; padding:.75rem .9rem; border-radius:10px;
  background:var(--background); border:1px solid var(--border-strong);
  color:var(--foreground); font-family:var(--font-body); font-size:.92rem; outline:none;
  transition:border-color .25s;
}
.bnd-field input:focus,.bnd-field select:focus{ border-color:var(--neon); }
.bnd-field.err input,.bnd-field.err select{ border-color:#ff5f7a; }
.bnd-err{ color:#ff5f7a; font-size:.78rem; margin-top:.3rem; display:none; }
.bnd-field.err .bnd-err{ display:block; }

.bnd-check{
  display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.7rem;
  color:var(--muted-foreground); font-size:.84rem; line-height:1.5; cursor:none;
}
.bnd-check input{ margin-top:.2rem; width:16px; height:16px; accent-color:var(--neon); flex-shrink:0; }
.bnd-check.err{ color:#ff5f7a; }

.bnd-privacy{
  font-size:.76rem; color:var(--muted-foreground); line-height:1.55;
  border-left:2px solid var(--border-strong); padding-left:.75rem; margin:1rem 0 1.2rem;
}
.bnd-actions{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.bnd-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.bnd-submit[disabled]{ opacity:.65; cursor:not-allowed; }
.bnd-spin{
  width:15px; height:15px; border-radius:50%; display:none;
  border:2px solid rgba(0,0,0,.25); border-top-color:currentColor;
  animation:bnd-spin .8s linear infinite;
}
@keyframes bnd-spin{ to{ transform:rotate(360deg) } }
.bnd-submit.loading .bnd-spin{ display:inline-block; }

/* result states */
.bnd-result{ text-align:center; padding:1rem 0 .4rem; }
.bnd-result .ico{
  width:62px; height:62px; border-radius:50%; margin:0 auto 1rem; display:grid; place-items:center;
  border:1px solid color-mix(in oklab, var(--neon) 45%, transparent);
  background:color-mix(in oklab, var(--neon) 12%, transparent); color:var(--neon);
}
.bnd-result .ico .material-symbols-rounded{ font-size:30px; }
.bnd-result h3{ font-family:var(--font-display); color:var(--foreground); font-size:1.2rem; margin:0 0 .5rem; }
.bnd-result p{ color:var(--muted-foreground); font-size:.92rem; line-height:1.6; margin:0 0 1.3rem; }

.bnd-formerr{
  background:color-mix(in oklab,#ff5f7a 12%,transparent);
  border:1px solid color-mix(in oklab,#ff5f7a 40%,transparent);
  color:#ff9fab; border-radius:10px; padding:.7rem .9rem; font-size:.85rem;
  margin-bottom:1rem; display:none;
}
.bnd-formerr.on{ display:block; }

@media (max-width:640px){
  .bnd-modal{ padding:1.6rem 1.2rem 1.4rem; border-radius:16px; }
  .bnd-row{ grid-template-columns:1fr; }
  .bnd-grid{ grid-template-columns:1fr; }
}
@media (hover:none) and (pointer:coarse){
  .bnd-close,.bnd-check{ cursor:pointer; }
}
@media (prefers-reduced-motion:reduce){
  .bnd-overlay,.bnd-modal,.bnd-cat{ transition:none; }
  .bnd-spin{ animation:none; }
}