@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════
   STUDYFLOW — UTILITY PAGES SHARED STYLESHEET
   Used by: 404, coming-soon, pricing, checkout
   ═══════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --background:        hsl(40, 33%, 98%);
  --foreground:        hsl(20, 20%, 15%);
  --card:              hsl(40, 30%, 99%);
  --primary:           hsl(270, 74%, 32%);
  --primary-foreground:hsl(40, 33%, 98%);
  --primary-glow:      hsl(270, 85%, 55%);
  --muted:             hsl(40, 15%, 93%);
  --muted-foreground:  hsl(20, 10%, 45%);
  --border:            hsl(40, 20%, 88%);
  --success:           hsl(158, 64%, 45%);
  --warning:           hsl(45, 93%, 47%);
  --destructive:       hsl(8, 75%, 58%);
  --radius:            0.75rem;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(246,242,236,.5); }
::-webkit-scrollbar-thumb { background: rgba(138,131,124,.2); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(138,131,124,.3); }

/* ══════════════════════════════════════════════
   NAVIGATION  (shared across all util pages)
   ══════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(255,253,250,.85);
  border-bottom: 1px solid rgba(228,221,211,.5);
  box-shadow: 0 4px 20px -4px rgba(41,37,32,.08);
}
.nav-container {
  max-width: 1200px; margin: 0 auto;
  padding: 0 1.5rem; height: 4rem;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-brand {
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--foreground);
}
.nav-logo {
  width: 2.25rem; height: 2.25rem; border-radius: .75rem;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-foreground);
}
.nav-title { font-weight: 700; font-size: 1.25rem; }
.nav-link {
  padding: .5rem 1rem; color: var(--foreground);
  text-decoration: none; border-radius: var(--radius);
  transition: background .2s; font-weight: 500; font-size: .875rem;
}
.nav-link:hover { background: var(--muted); }

/* ══════════════════════════════════════════════
   FLOATING BACKGROUND BLOBS  (shared)
   ══════════════════════════════════════════════ */
.floating-elements {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.float-item {
  position: absolute; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-glow), var(--primary));
  opacity: .07;
  animation: float-anim 24s infinite ease-in-out;
}
.float-1 { width:320px; height:320px; top:8%;   left:-8%;  animation-duration:25s; animation-delay:0s;  }
.float-2 { width:220px; height:220px; top:55%;  right:-4%; animation-duration:22s; animation-delay:2s;  }
.float-3 { width:160px; height:160px; bottom:8%;left:18%;  animation-duration:28s; animation-delay:4s;  }
.float-4 { width:260px; height:260px; top:28%;  right:12%; animation-duration:30s; animation-delay:1s;  }
.float-5 { width:190px; height:190px; bottom:28%;left:48%; animation-duration:26s; animation-delay:3s;  }

@keyframes float-anim {
  0%,100% { transform: translate(0,0)    scale(1);    }
  25%      { transform: translate(28px,-28px) scale(1.08); }
  50%      { transform: translate(-18px,18px) scale(.93);  }
  75%      { transform: translate(18px,28px)  scale(1.04); }
}

/* ══════════════════════════════════════════════
   GLASS CARD  (shared content wrapper)
   ══════════════════════════════════════════════ */
.content-card {
  position: relative; z-index: 1;
  backdrop-filter: blur(16px);
  background: rgba(255,252,249,.88);
  border: 1px solid rgba(228,221,211,.6);
  border-radius: 2rem;
  padding: 3rem 2.5rem;
  width: 100%;
  box-shadow: 0 20px 60px -12px rgba(41,37,32,.14);
  animation: fadeInUp .6s ease both;
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* ══════════════════════════════════════════════
   BUTTONS  (shared)
   ══════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.5rem; font-family: inherit; font-size: .95rem; font-weight: 600;
  border-radius: var(--radius); cursor: pointer; transition: all .2s;
  text-decoration: none; border: none;
}
.btn-primary {
  background: var(--primary); color: var(--primary-foreground);
  box-shadow: 0 4px 16px rgba(90,26,122,.18);
}
.btn-primary:hover { background: hsl(270,74%,27%); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(90,26,122,.28); }
.btn-outline {
  background: transparent; color: var(--foreground);
  border: 1px solid rgba(228,221,211,.9);
}
.btn-outline:hover { background: var(--muted); border-color: var(--border); }
.btn-ghost {
  background: transparent; color: var(--foreground);
  border: 1px solid rgba(228,221,211,.8);
  width: 100%;
}
.btn-ghost:hover { background: var(--muted); border-color: var(--border); }

/* ══════════════════════════════════════════════
   STATUS / EYEBROW BADGE
   ══════════════════════════════════════════════ */
.status-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem 1rem; border-radius: 999px;
  background: rgba(132,34,209,.09); margin-bottom: 1.5rem;
}
.status-dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--primary);
  animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
  0%,100% { opacity:1; transform:scale(1);   }
  50%      { opacity:.5; transform:scale(1.3); }
}
.status-text { font-size: .78rem; font-weight: 700; color: var(--primary); letter-spacing: .04em; }

/* ══════════════════════════════════════════════
   PROGRESS BAR
   ══════════════════════════════════════════════ */
.progress-container { margin-bottom: 2rem; }
.progress-label {
  display: flex; justify-content: space-between;
  font-size: .78rem; font-weight: 600; color: var(--muted-foreground); margin-bottom: .5rem;
}
.progress-label span:last-child { color: var(--primary); }
.progress-bar { height: .55rem; background: var(--muted); border-radius: 999px; overflow: hidden; }
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--primary-glow));
  width: 0; position: relative; overflow: hidden;
  animation: fill-bar 1.6s cubic-bezier(.4,0,.2,1) .4s forwards;
}
.progress-shine {
  position: absolute; top:0; left:-100%; width:55%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: shine 2.4s ease-in-out 2.2s infinite;
}
@keyframes fill-bar { to { width: 35%; } }
@keyframes shine { 0%{left:-55%} 100%{left:160%} }

/* ══════════════════════════════════════════════
   FEATURES GRID  (coming-soon style)
   ══════════════════════════════════════════════ */
.features-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: .875rem;
  border-top: 1px solid var(--border); padding-top: 2rem;
}
@media(min-width:640px){ .features-grid { grid-template-columns: repeat(4,1fr); } }
.feature-item { padding: .875rem .5rem; text-align: center; transition: transform .2s; }
.feature-item:hover { transform: translateY(-3px); }
.feature-icon {
  width: 2.5rem; height: 2.5rem; border-radius: .75rem;
  background: rgba(132,34,209,.08); color: var(--primary);
  display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem;
}
.feature-title { font-size: .82rem; font-weight: 700; margin-bottom: .2rem; }
.feature-text { font-size: .75rem; color: var(--muted-foreground); line-height: 1.5; }

/* ══════════════════════════════════════════════
   404 PAGE
   ══════════════════════════════════════════════ */
.notfound-container {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 6rem 1.5rem 2rem; position: relative;
}
.notfound-container .content-card { max-width: 600px; text-align: center; }

.error-visual { margin-bottom: 1.75rem; }
.number-container { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.digit {
  font-size: 8rem; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--primary-glow));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: digit-pulse 2.5s ease-in-out infinite;
}
@keyframes digit-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.8; transform:scale(.97); }
}
.book-icon { position: relative; animation: book-bounce 3s ease-in-out infinite; }
.book-icon svg { color: var(--primary); filter: drop-shadow(0 4px 12px rgba(90,26,122,.25)); }
.book-glow {
  position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width: 120px; height: 120px;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  opacity: .2; animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes book-bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes glow-pulse {
  0%,100% { opacity:.2; transform:translate(-50%,-50%) scale(1); }
  50%      { opacity:.4; transform:translate(-50%,-50%) scale(1.12); }
}
.error-title { font-size: 2.5rem; font-weight: 800; margin-bottom: .875rem; }
.error-description { font-size: 1.05rem; color: var(--muted-foreground); margin-bottom: 2rem; line-height: 1.75; }
.action-buttons { display: flex; gap: 1rem; justify-content: center; margin-bottom: 2.5rem; flex-wrap: wrap; }
.helpful-links { padding-top: 2rem; border-top: 1px solid var(--border); }
.links-title { font-size: .82rem; font-weight: 600; color: var(--muted-foreground); margin-bottom: .875rem; }
.links-grid { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.quick-link {
  padding: .45rem 1rem; background: var(--muted); border-radius: 999px;
  text-decoration: none; color: var(--foreground); font-size: .82rem; font-weight: 500;
  border: 1px solid transparent; transition: all .2s;
}
.quick-link:hover { background: var(--border); transform: translateY(-2px); }

/* ══════════════════════════════════════════════
   COMING SOON PAGE
   ══════════════════════════════════════════════ */
.construction-container {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 6rem 1.5rem 2rem; position: relative;
}
.construction-container .content-card { max-width: 680px; text-align: center; }

.construction-visual { margin-bottom: 1.75rem; }
.icon-container { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.construction-icon { color: var(--primary); }
.icon-glow {
  position: absolute; inset: -20px; border-radius: 50%;
  background: radial-gradient(circle, rgba(132,34,209,.15) 0%, transparent 70%);
  animation: glow-pulse 3s ease-in-out infinite;
}

/* gear trio */
.gear-row { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-bottom: 1.75rem; }
.gear { color: var(--primary); opacity: .45; }
.gear-spin     { animation: gear-cw  5s linear infinite; }
.gear-spin-rev { animation: gear-ccw 4s linear infinite; }
@keyframes gear-cw  { to { transform: rotate(360deg);  } }
@keyframes gear-ccw { to { transform: rotate(-360deg); } }

.main-title { font-size: clamp(1.75rem,4vw,2.5rem); font-weight: 800; margin-bottom: .5rem; }
.subtitle { font-size: 1.1rem; color: var(--muted-foreground); margin-bottom: .75rem; }
.description { font-size: .9rem; color: var(--muted-foreground); line-height: 1.8; max-width: 480px; margin: 0 auto 2rem; }

.action-button {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .875rem 2rem; border-radius: 1rem;
  background: var(--primary); color: #fff;
  font-family: inherit; font-size: .95rem; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: all .2s; margin-bottom: 2.5rem;
  box-shadow: 0 4px 18px rgba(90,26,122,.2);
}
.action-button:hover { background: hsl(270,74%,26%); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(90,26,122,.3); }

/* ══════════════════════════════════════════════
   PRICING PAGE
   ══════════════════════════════════════════════ */
.pricing-section { padding: 7rem 1.5rem 5rem; }
.pricing-container { max-width: 1160px; margin: 0 auto; text-align: center; }
.pricing-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem 1rem; border-radius: 999px;
  background: rgba(132,34,209,.09); color: var(--primary);
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 1.25rem;
}
.pricing-title { font-size: clamp(2rem,5vw,3.25rem); font-weight: 800; line-height: 1.1; margin-bottom: 1rem; }
.pricing-title span { background: linear-gradient(135deg,var(--primary),var(--primary-glow)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.pricing-subtitle { font-size: 1.05rem; color: var(--muted-foreground); max-width: 460px; margin: 0 auto 2.5rem; line-height: 1.7; }

/* billing toggle */
.billing-toggle-wrap { display: flex; align-items: center; justify-content: center; gap: .875rem; margin-bottom: 3.5rem; }
.billing-label { font-size: .875rem; font-weight: 600; color: var(--muted-foreground); transition: color .2s; }
.billing-label.active { color: var(--foreground); }
.save-badge { font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: rgba(22,163,74,.1); color: var(--success); }
.toggle-switch { position: relative; width: 3rem; height: 1.6rem; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-track { position:absolute; inset:0; border-radius:999px; background:var(--primary); cursor:pointer; }
.toggle-thumb { position:absolute; top:.2rem; left:.2rem; width:1.2rem; height:1.2rem; border-radius:50%; background:#fff; transition:transform .2s; pointer-events:none; }
.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(1.4rem); }

/* pricing cards */
.pricing-grid {
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
  max-width: 1100px; margin: 0 auto 5rem;
}
@media(min-width:768px){ .pricing-grid { grid-template-columns: repeat(3,1fr); } }

.pricing-card {
  backdrop-filter: blur(12px);
  background: rgba(255,252,249,.85);
  border: 1px solid rgba(228,221,211,.6);
  border-radius: 1.5rem; padding: 2rem;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 20px -4px rgba(41,37,32,.08);
  opacity: 0; transform: translateY(20px);
  animation: fadeInUp .6s ease forwards;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  position: relative; overflow: hidden;
}
.pricing-card:nth-child(1){ animation-delay:.05s }
.pricing-card:nth-child(2){ animation-delay:.12s }
.pricing-card:nth-child(3){ animation-delay:.19s }
.pricing-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(41,37,32,.1); }
.pricing-card.highlighted {
  border: 2px solid var(--primary);
  transform: scale(1.03);
  box-shadow: 0 12px 40px rgba(90,26,122,.15);
}
.pricing-card.highlighted:hover { transform: scale(1.03) translateY(-5px); }
.card-badge {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-size: .68rem; font-weight: 800; padding: .28rem .7rem; border-radius: 999px;
  background: var(--primary); color: #fff; letter-spacing: .06em; text-transform: uppercase;
}
.plan-name { font-size: 1.25rem; font-weight: 700; margin-bottom: .3rem; }
.plan-description { color: var(--muted-foreground); font-size: .875rem; margin-bottom: 1.5rem; }
.plan-price { margin-bottom: 1.5rem; }
.price { font-size: 3rem; font-weight: 700; font-family:'DM Mono',monospace; line-height:1; }
.period { font-size: .875rem; color: var(--muted-foreground); }
.price-annual { display: none; }
.annual-mode .price-monthly { display: none; }
.annual-mode .price-annual { display: block; }
.features-divider { height: 1px; background: var(--border); margin-bottom: 1.25rem; }
.features-list { list-style: none; margin-bottom: 2rem; text-align: left; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.feature-item-row { display: flex; align-items: flex-start; gap: .55rem; font-size: .875rem; }
.check-icon { width: 1.1rem; height: 1.1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .1rem; }
.check-icon.yes { background: rgba(22,163,74,.1); color: var(--success); }
.check-icon.no { background: var(--muted); color: var(--muted-foreground); opacity: .5; }
.feature-text.no { color: var(--muted-foreground); }
.card-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1.5rem; border-radius: var(--radius); border: none;
  font-family: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: all .2s; margin-top: auto;
}
.card-btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--foreground); }
.card-btn-outline:hover { background: var(--muted); }
.card-btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 16px rgba(90,26,122,.2); }
.card-btn-primary:hover { background: hsl(270,74%,26%); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(90,26,122,.3); }

/* FAQ */
.faq-section { max-width: 680px; margin: 0 auto 5rem; padding: 0 1.5rem; }
.faq-title { font-size: 1.75rem; font-weight: 800; text-align: center; margin-bottom: 2rem; }
.faq-item { border: 1px solid var(--border); border-radius: 1rem; margin-bottom: .75rem; overflow: hidden; background: rgba(255,252,249,.85); backdrop-filter: blur(8px); }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 1.25rem; cursor: pointer; font-weight: 600; font-size: .9rem; user-select: none; transition: background .2s; }
.faq-question:hover { background: hsl(40,15%,95%); }
.faq-chevron { transition: transform .3s; flex-shrink: 0; color: var(--muted-foreground); }
.faq-chevron.open { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1); }
.faq-answer-inner { padding: 0 1.25rem 1.125rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.7; }

/* ══════════════════════════════════════════════
   CHECKOUT PAGE
   ══════════════════════════════════════════════ */
.checkout-section {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 6rem 1.5rem 2rem; position: relative;
}
.checkout-section .content-card { max-width: 460px; }

.secure-badge { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.secure-badge svg { color: var(--success); }
.secure-badge-dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--success); animation:status-pulse 2s ease-in-out infinite; }
.secure-badge-text { font-size: .82rem; font-weight: 600; color: var(--success); }

.checkout-title { font-size: 1.875rem; font-weight: 800; margin-bottom: .4rem; line-height: 1.2; }
.checkout-subtitle { color: var(--muted-foreground); margin-bottom: 1.5rem; font-size: .9rem; }
.checkout-subtitle strong { color: var(--primary); font-weight: 700; }

/* plan summary box */
.plan-summary {
  background: hsl(270,50%,97%);
  border: 1.5px solid rgba(90,26,122,.15);
  border-radius: 1rem; padding: 1.25rem; margin-bottom: 1.75rem;
}
.plan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.plan-label { font-weight: 700; font-size: 1rem; }
.plan-price { font-family:'DM Mono',monospace; font-size: 1.3rem; font-weight: 500; color: var(--primary); }
.plan-desc { font-size: .8rem; color: var(--muted-foreground); margin-bottom: .875rem; }
.plan-perks { display: flex; flex-direction: column; gap: .45rem; }
.plan-perk { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 500; }
.plan-perk-check { width:1rem; height:1rem; border-radius:50%; background:rgba(22,163,74,.12); color:var(--success); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.form-divider { display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; color:var(--muted-foreground); font-size:.78rem; font-weight:600; }
.form-divider::before,.form-divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* payment form */
.payment-form { display: flex; flex-direction: column; gap: .875rem; margin-bottom: 1rem; }
.form-label { font-size: .75rem; font-weight: 700; color: var(--foreground); display: block; margin-bottom: .35rem; }
.form-field { position: relative; }
.form-input {
  width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: .9rem; color: var(--foreground); background: var(--muted);
  transition: all .2s; box-sizing: border-box;
}
.form-input:focus { outline: none; border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(90,26,122,.08); }
.form-input.has-icon { padding-left: 2.75rem; }
.form-input-icon { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--muted-foreground); pointer-events:none; }
.form-input.mono { font-family:'DM Mono',monospace; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }
.card-brands { position:absolute; right:.875rem; top:50%; transform:translateY(-50%); display:flex; gap:.35rem; }
.card-brand { width:1.9rem; height:1.2rem; border-radius:.25rem; display:flex; align-items:center; justify-content:center; font-size:.52rem; font-weight:800; letter-spacing:.02em; }
.card-brand.visa { background:#1a1f71; color:#fff; }
.card-brand.mc   { background:#eb001b; color:#fff; }

.error-message { font-size:.8rem; color:var(--destructive); font-weight:600; min-height:1.2rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.35rem; }

.checkout-submit {
  width:100%; padding:1rem; border-radius:1rem;
  background:linear-gradient(135deg,var(--primary),var(--primary-glow));
  border:none; color:#fff; font-family:inherit; font-size:1rem; font-weight:700;
  cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:.6rem;
  box-shadow:0 4px 20px rgba(90,26,122,.22); margin-bottom:.875rem;
}
.checkout-submit:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 10px 28px rgba(90,26,122,.32); }
.checkout-submit:disabled { opacity:.65; cursor:not-allowed; transform:none; }
.spinner { width:1.2rem; height:1.2rem; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.checkout-note { display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:1.5rem; font-size:.74rem; color:var(--muted-foreground); }

/* success overlay */
.success-overlay { position:fixed; inset:0; background:rgba(255,253,250,.92); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; z-index:100; opacity:0; pointer-events:none; transition:opacity .35s; }
.success-overlay.show { opacity:1; pointer-events:all; }
.success-card { text-align:center; max-width:380px; padding:2rem; animation:pop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes pop { from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }
.success-ring { width:5.5rem; height:5.5rem; border-radius:50%; background:rgba(22,163,74,.1); display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; color:var(--success); }
.success-title { font-size:2rem; font-weight:800; margin-bottom:.5rem; }
.success-sub { color:var(--muted-foreground); margin-bottom:2rem; line-height:1.6; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media(max-width:640px) {
  .content-card { padding: 2rem 1.5rem; border-radius: 1.5rem; }
  .digit { font-size: 5rem; }
  .book-icon svg { width: 60px; height: 60px; }
  .error-title { font-size: 2rem; }
  .action-buttons { flex-direction: column; }
  .action-buttons .btn { width: 100%; }
  .float-1,.float-2,.float-3,.float-4,.float-5 { opacity: .04; }
  .pricing-card.highlighted { transform: scale(1); }
  .checkout-title { font-size: 1.5rem; }
}