/* Hero action row: sign in (existing customers) + jump to catalog */
.hero-actions{ display:flex; gap:14px; margin-top:6px; }

/* Sign in trigger */
.btn{ border:none; cursor:pointer; font-family:inherit; }
.btn.outline{ background:transparent; }

.platform-mock{ width:100%; height:auto; filter:drop-shadow(0 24px 50px rgba(0,0,0,0.5)); }

.course-grid{ display:grid; gap:24px; }

.course-grid{ gap:32px; }

.course-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:24px;
  padding:36px;
  display:grid;
  grid-template-columns:1fr 260px;
  gap:36px;
  align-items:start;
  box-shadow:0 20px 40px rgba(0,0,0,0.28);
}
.section.soft .course-card{ background:var(--page); }

.course-card-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.course-card-body .ico{
  width:52px; height:52px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); margin:0; flex-shrink:0;
}
.course-card-body .ico svg{ width:24px; height:24px; stroke:var(--page); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Numbered tag */
.course-num{ font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); }

.course-card-body h3{ font-size:21px; font-weight:800; letter-spacing:-.01em; margin:0 0 10px; }
.course-card-body .tagline{ font-size:15px; line-height:1.65; color:var(--ink-soft); margin:0 0 22px; max-width:56ch; }
.course-card-body .checklist{ margin:0; }

.course-card-buy{
  background:var(--page);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.section.soft .course-card-buy{ background:var(--panel); }
.course-card-buy .price{ font-size:28px; font-weight:800; letter-spacing:-.02em; }
.course-card-buy .price .unit{ font-size:13px; font-weight:600; color:var(--ink-faint); margin-left:4px; }
.course-card-buy .btn{ width:100%; justify-content:center; }
.course-card-buy .meta-line{ font-size:12.5px; color:var(--ink-faint); line-height:1.5; }

/* Hidden */
.course-card-buy.is-checking{ visibility:hidden; }

.license-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  margin-top:16px;
  padding-top:16px;
  border-top:1px dashed var(--border);
}
.license-form label{ font-size:12.5px; font-weight:600; color:var(--ink-faint); }
.license-form input{
  width:100%;
  background:var(--page);
  border:1px solid var(--border);
  color:var(--ink);
  font-family:inherit;
  font-size:14px;
  padding:12px 16px;
  border-radius:12px;
}
.license-form input::placeholder{ color:var(--ink-faint); }
.section.soft .license-form input{ background:var(--panel); }

.license-form button:disabled{ opacity:.6; cursor:not-allowed; }

.license-status{ font-size:12.5px; line-height:1.5; margin:0; min-height:1em; }
.license-status.is-error{ color:var(--error); }
.license-status.is-success{ color:var(--good); }

.unlocked-badge{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:var(--good);
  margin-bottom:14px;
}
.unlocked-badge svg{ width:18px; height:18px; stroke:var(--good); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* Coming soon course card */
.course-card.upcoming{
  grid-template-columns:1fr;
  border-style:dashed;
  box-shadow:none;
  opacity:.75;
}
.course-card.upcoming .course-num{ color:var(--ink-faint); }
.course-card.upcoming .go{ font-size:14px; font-weight:500; color:var(--ink-faint); }

/* Page-level banner */
.purchase-banner{
  margin-bottom:24px;
  padding:16px 20px;
  border-radius:14px;
  font-size:14.5px;
  line-height:1.5;
}
.purchase-banner.is-error{ background:rgba(255,155,155,0.1); border:1px solid var(--error); color:var(--error); }

/* The key-reveal box shown once, right after a purchase auto-verifies. */
.license-reveal{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  background:var(--page);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:6px;
}
.section.soft .license-reveal{ background:var(--panel); }
.license-reveal-key{
  flex:1;
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  color:var(--ink);
  word-break:break-all;
}
.license-reveal-copy{
  flex-shrink:0;
  background:var(--accent);
  color:var(--page);
  border:none;
  border-radius:8px;
  padding:6px 12px;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}

@media (max-width: 860px){
  .course-card{ grid-template-columns:1fr; }
  .course-card-buy{ width:100%; }
  .hero-actions{ flex-wrap:wrap; }
}