/* from views/index.ejs */
/* Hero */
.hero-section {
  position: relative;
  padding: 5rem 0 4rem;
  text-align: center;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(13,110,253,.13) 0%, transparent 70%);
  pointer-events: none;
}
/* Trust bar */
.trust-bar {
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: .7rem 0;
}
.trust-item {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; color: var(--bs-secondary-color);
  white-space: nowrap;
}
.trust-item svg { flex-shrink: 0; opacity: .6; }

/* Plan cards */
.plan-card {
  background: var(--bs-body-secondary-bg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .75rem;
  display: flex; flex-direction: column;
  height: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.plan-card:hover {
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);
}
.plan-card.featured {
  border-color: rgba(13,110,253,.4);
  box-shadow: 0 0 0 1px rgba(13,110,253,.15), 0 .5rem 1.5rem rgba(0,0,0,.25);
}
.plan-card.featured:hover { border-color: rgba(13,110,253,.6); }

.plan-header { padding: 1.4rem 1.4rem 0; }
.plan-body   { padding: 1rem 1.4rem 1.4rem; flex: 1; display: flex; flex-direction: column; }

.plan-icon {
  width: 40px; height: 40px; border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: .9rem;
}
.plan-name  { font-size: 1.05rem; font-weight: 700; margin-bottom: .15rem; }
.plan-desc  { font-size: .83rem; color: var(--bs-secondary-color); margin-bottom: 1rem; line-height: 1.5; }

.plan-price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .88rem;
}
.plan-price-row:last-child { border-bottom: none; }
.plan-price-row .term { color: var(--bs-secondary-color); }
.plan-price-row .price { font-weight: 700; }

.plan-divider { height: 1px; background: rgba(255,255,255,.06); margin: 1rem 0; }

/* FAQ */
.faq-item { border-bottom: 1px solid rgba(255,255,255,.07); }
.faq-item:last-child { border-bottom: none; }
.faq-btn {
  background: none; border: none; outline: none;
  width: 100%; text-align: left;
  padding: .9rem 0;
  font-size: .9rem; font-weight: 500;
  color: var(--bs-body-color);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer;
}
.faq-btn:hover { color: #fff; }
.faq-chevron { flex-shrink: 0; transition: transform .2s; opacity: .5; }
.faq-btn[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); opacity: 1; }
.faq-body { font-size: .87rem; color: var(--bs-secondary-color); padding-bottom: .9rem; line-height: 1.6; }

/* Account alerts */
.account-alert {
  border-radius: .6rem;
  padding: .75rem 1.1rem;
  font-size: .88rem;
}

/* Section spacing */
.section { padding: 3.5rem 0; }
.section-sm { padding: 2rem 0; }

/* YouTube lite (plan video modals) */
.yt-lite { position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; background-color: #1f2329; cursor: pointer; filter: saturate(1.05); }
.yt-lite::after { content:""; position:absolute; inset:0; background: radial-gradient(65% 55% at 50% 50%, transparent 0%, rgba(0,0,0,.35) 100%); }
.yt-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:68px; height:68px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08); transition:transform .15s,background .15s,box-shadow .15s; }
.yt-play::before { content:""; border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent #fff; margin-left:2px; }
.yt-lite:hover .yt-play, .yt-lite:focus .yt-play { transform:translate(-50%,-50%) scale(1.05); background:rgba(0,0,0,.7); }
.yt-lite:focus { outline:2px solid rgba(255,255,255,.2); outline-offset:2px; }
.ratio > .yt-lite { position:absolute; inset:0; }
.yt-lite.is-active { cursor:auto; }
.yt-lite.is-active::after { display:none; }