:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f5f7fb;
  --ink: #10131c;
  --muted: #656c7c;
  --line: #e6e8ee;
  --line-strong: #d6dae4;
  --accent: #2f6fed;      /* blue side of the AA mark */
  --cyan: #0891a8;        /* darker cyan, readable on white */
  --accent-dim: #eaf1ff;
  --success: #1f9d55;
  --danger: #d93636;
  --radius: 13px;
  --max: 1020px;
  --card-gap: 10px;
  --card-title-size: 14.5px;
  --card-radius: 14px;
  --card-min-width: 240px;
  --section-gap: 24px;
  --container-padding: 24px;
  --link-list-width: none;
  --avatar-size: 100px;
  --link-icon-size: 22px;
  --hero-height: 300px;
  --hero-height-mobile: 260px;
  --hero-radius: 18px;
  --nav-icon-size: 22px;
  --nav-text-size: 11px;
  --link-row-padding: 14px;
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(700px 340px at 88% -8%, rgba(47,111,237,0.08), transparent 60%),
    radial-gradient(550px 300px at 6% 0%, rgba(8,145,168,0.06), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--body-font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--body-font);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Layout shells ---------- */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--container-padding, 24px);
}

.topbar {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
}

.brand img.logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: block;
}

.brand-sub {
  color: var(--muted);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Hero ---------- */

.hero {
  padding: 56px 0 36px;
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.hero-logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--line-strong), 0 16px 40px rgba(47,111,237,0.14);
}

.hero-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.1;
  max-width: 18ch;
}

.hero .tagline-flow {
  margin-top: 16px;
  font-size: 16.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero .tagline-flow b {
  color: var(--ink);
  font-weight: 600;
}

.hero .tagline-flow .arrow { color: var(--accent); }

.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero-stat b {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 21px;
  display: block;
  color: var(--accent);
}

.hero-stat span {
  color: var(--muted);
  font-size: 13px;
}

/* The brand line on the checkout page is styled to match the "Courses"
   heading exactly: same 24px size, weight, letter-spacing and corner
   position, so the two pages read as one site rather than two designs.
   It sits in normal flow (not a floating pill) for the same reason. */
.mini-brand {
  position: static;
  display: block;
  width: 100%;
  padding: var(--section-gap) var(--container-padding, 24px) 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: none;
  border-radius: 0;
}

/* On phones the fixed badge floats on top of the course cover image and
   clips it. Drop it back into normal document flow instead: centered,
   above the content, at the same size as the "Courses" page heading.
   Pages that hide the brand set an inline display:none, which still wins
   over the display:block below, so this doesn't force it visible. */
@media (max-width: 860px) {
}

/* ---------- Unavailable course ---------- */

.checkout-unavailable {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 24px;
  max-width: 460px;
  margin: 0 auto;
}

.checkout-unavailable h1 {
  font-size: 24px;
  margin: 0 0 10px;
}

.checkout-unavailable p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.checkout-unavailable .btn-primary-wide {
  display: inline-block;
  width: auto;
  padding: 12px 28px;
}

/* ---------- Profile card (bio-link style hero) ---------- */

/* Top gap above the profile card. Measured against the reference layout:
   30px from the top of the viewport to the top of the card. */
.profile-section { padding: 30px 0 8px; }

/* Height is set in admin, separately for desktop and mobile. min-height
   (not height) so the card can still grow if the content needs more room -
   a fixed height would clip the buttons on a long tagline. Flex centring
   keeps the content in the middle whatever height is chosen. */
.profile-card {
  background: linear-gradient(160deg, #0d1220, #131a2c);
  border-radius: var(--hero-radius, 18px);
  min-height: var(--hero-height, 300px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #eef2fb;
  box-shadow: 0 18px 44px rgba(16, 19, 28, 0.14);
}

.profile-avatar {
  width: var(--avatar-size, 100px);
  height: var(--avatar-size, 100px);
  border-radius: 50%;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 5px rgba(47, 111, 237, 0.18);
  margin-bottom: 14px;
}

.profile-name {
  font-size: 26px;
  color: #ffffff;
}

.profile-tagline {
  margin-top: 8px;
  /* Light neutral grey, sampled from the reference layout's tagline. The
     old #aab2c5 was darker and blue-tinted, so it read as greyed out. */
  color: #d9d9db;
  font-size: 15px;
}

.profile-ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Equal width regardless of label length - "Get Help" and "Free Prompts"
     otherwise render 131px and 166px, which reads as a mistake. */
  min-width: 170px;
  gap: 8px;
  padding: 12px 22px;
  /* Rounded rectangle, not a pill. 100px made them fully capsule-shaped. */
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.cta-btn .icon { width: 17px; height: 17px; display: inline-flex; }
.cta-btn .icon svg,
.cta-btn .icon img { width: 100%; height: 100%; object-fit: contain; }

.cta-btn.green { background: #17a34a; }
.cta-btn.green:hover { background: #14913f; }
.cta-btn.blue { background: var(--accent); }
.cta-btn.blue:hover { opacity: 0.9; }

/* ---------- Course cards (catalog style, no price) ---------- */

.ticket {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ticket:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 14px 30px rgba(16, 19, 28, 0.08);
}

.ticket-thumb {
  position: relative;
  display: block;
  margin: 0 -16px 10px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.ticket-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.ticket:hover .ticket-thumb img { transform: scale(1.04); }

.card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.card-badge.tag-new { background: var(--accent); }
.card-badge.tag-hot { background: #e0483a; }
.card-badge.tag-free { background: #17a34a; }
.card-badge.tag-rated { background: #c9962c; }

.ticket h3 {
  font-size: var(--card-title-size);
  line-height: 1.3;
}

.ticket-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.discount-badge {
  display: inline-flex;
  align-items: center;
  background: #1a9c53;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.rating .icon { width: 14px; height: 14px; color: #f0a93a; display: inline-flex; }
.rating .icon svg { width: 100%; height: 100%; }

.view-course-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 3px;
}

.view-course-link .icon { width: 15px; height: 15px; display: inline-flex; }
.view-course-link .icon svg { width: 100%; height: 100%; }
.view-course-link:hover { text-decoration: underline; }

/* ---------- Link list (bio-link rows) ---------- */

/* Bottom padding clears the fixed bottom nav so the last link row isn't
   hidden behind it. 24px leaves a gap that visually matches the 30px above
   the profile card, rather than the 74px void the old 60px produced. */
.links-section { padding: var(--section-gap) 0 24px; }

.link-list {
  display: grid;
  gap: 12px;
  max-width: var(--link-list-width, none);
  margin: 0 auto;
}

.link-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--link-row-padding, 14px) 16px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.link-row:hover {
  border-color: var(--line-strong);
  box-shadow: 0 8px 20px rgba(16, 19, 28, 0.06);
}

.link-row-icon {
  width: var(--link-icon-size, 22px);
  height: var(--link-icon-size, 22px);
  color: var(--accent);
  flex-shrink: 0;
}
.link-row-icon svg,
.link-row-icon img { width: 100%; height: 100%; object-fit: contain; }

.link-row-label { flex: 1; }

.link-row-chevron {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}
.link-row-chevron svg { width: 100%; height: 100%; }

/* ---------- Bottom nav bar ---------- */

body { padding-bottom: 76px; }

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-around;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: var(--nav-text-size, 11px);
  font-weight: 600;
  padding: 4px 18px;
  position: relative;
}

.bottom-nav-item .icon { width: var(--nav-icon-size, 22px); height: var(--nav-icon-size, 22px); display: inline-flex; }
.bottom-nav-item .icon svg { width: 100%; height: 100%; }

.bottom-nav-item.active { color: var(--accent); }

.bottom-nav-badge {
  position: absolute;
  top: 0;
  right: 6px;
  background: #e0483a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ---------- Course shop page (categories + full grid) ---------- */

/* Full-width header bar - deliberately NOT inside .wrap, so the title sits
   in the top-left corner of the window instead of being pulled inward by
   the centered max-width container. */
.shop-header {
  padding: var(--section-gap) var(--container-padding, 24px) 4px;
}

.shop-header h1 {
  font-size: 24px;
}

.category-pills {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 16px 0 20px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.category-pills::-webkit-scrollbar { display: none; }

.pill {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width, 240px), 1fr));
  gap: var(--card-gap);
  /* 24px matches .links-section on the home page, so every page leaves the
     same gap above the fixed bottom nav. Was 40px, which read as a void. */
  padding-bottom: 24px;
}

.shop-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 40px 0;
  text-align: center;
}

/* ---------- Mobile menu drawer ---------- */

/* Button and drawer are phone-only: on desktop the bottom nav row is
   already visible, so a slide-out duplicate adds nothing. */
.menu-btn,
.nav-drawer,
.nav-drawer-overlay { display: none; }

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 20px;
  font-weight: 700;
}

.nav-drawer-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
}
.nav-drawer-close svg { width: 22px; height: 22px; }

.nav-drawer-list { padding: 10px 0; }

.nav-drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.nav-drawer-item.active { color: var(--accent); }

.nav-drawer-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.nav-drawer-icon svg { width: 100%; height: 100%; }

.nav-drawer-label { flex: 1; }

.nav-drawer-badge {
  background: var(--danger);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

@media (max-width: 860px) {
  /* Anchored in the corner without knocking the centred title off-centre. */
  .shop-header,
  .updates-header { position: relative; }

  .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ink);
  }
  .menu-btn svg { width: 24px; height: 24px; }

  .nav-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(16, 19, 28, 0.45);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .nav-drawer-overlay.open { opacity: 1; pointer-events: auto; }

  .nav-drawer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 78%;
    max-width: 320px;
    background: var(--surface);
    z-index: 41;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(16, 19, 28, 0.2);
  }
  .nav-drawer.open { transform: translateX(0); }
}

/* ---------- Updates page ---------- */

.updates-header { padding: var(--section-gap) var(--container-padding, 24px) 4px; }
.updates-header h1 { font-size: 24px; }

.update-list {
  display: grid;
  gap: 12px;
  padding: 20px 0 24px;
}

.update-row {
  display: flex;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.update-row {
  cursor: pointer;
}

a.update-row:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(16, 19, 28, 0.06);
}

.update-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
}

.update-body { flex: 1; min-width: 0; }

.update-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}

.update-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.update-time {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 5px;
}

/* ---------- Course grid (ticket cards) ---------- */

.grid-section { padding: var(--section-gap) 0 var(--section-gap); }

.grid-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 26px;
  flex-wrap: wrap;
  gap: 8px;
}

.grid-heading h2 { font-size: 22px; }

.view-all-link {
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
}
.view-all-link:hover { text-decoration: underline; }

.grid-heading .count {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.carousel {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-item {
  flex: 0 0 auto;
  width: 78%;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .carousel-item { width: calc((100% - var(--card-gap)) / 2); }
}

@media (min-width: 760px) {
  .carousel-item { width: calc((100% - (var(--card-gap) * 2)) / 3); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: transform 0.12s ease, opacity 0.12s ease, background 0.12s ease;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  color: #ffffff;
}

.btn-primary:hover { opacity: 0.9; }

.btn-primary:disabled {
  background: var(--line-strong);
  color: #9a9fac;
  cursor: not-allowed;
}

/* Checkout's Buy now / Proceed to pay buttons use a solid navy to match
   the reference checkout flow, instead of the site's usual accent
   gradient used on other primary buttons. */
#buy-now-btn,
#pay-btn {
  background: #1a1f71;
}
#buy-now-btn:hover,
#pay-btn:hover {
  background: #14185c;
  opacity: 1;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-block { width: 100%; }

/* ---------- Checkout page ---------- */

/* Checkout has no fixed Profile/Courses/Updates bottom navigation, so it
   must not inherit the site's global 76px body clearance. Keep the page
   footer attached to the viewport/content edge on desktop and reserve space
   only for the checkout action bar on mobile. */
body.checkout-page {
  padding-bottom: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.checkout-page .mini-brand,
.checkout-page .site-footer {
  flex: 0 0 auto;
}

/* The author-level grid declaration below would otherwise override the
   browser's built-in [hidden] rule during the first paint. Keep the complete
   Course Details / Checkout shell out of layout until live course data is
   ready, preventing the payment panel from flashing on mobile. */
.checkout-shell[hidden] {
  display: none !important;
}

/* The desktop payment-security footer contains real text in the HTML. Keep it
   completely out of the first paint and reveal it together with the loaded
   course view, so it can never appear by itself while Firestore is loading. */
.checkout-page .site-footer[hidden] {
  display: none !important;
}

.checkout-shell {
  width: 100%;
  flex: 1 0 auto;
  padding-top: 36px;
  padding-bottom: 36px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
}

.checkout-shell > .course-detail,
.checkout-shell > .pay-panel {
  min-width: 0;
}

/* The Back link is a mobile-only control (it returns from the payment step
   to the course details step). It must stay hidden on desktop, where both
   panels are visible side by side and there is nothing to go back to.
   Scoped to .pay-panel so it isn't overridden by the generic `.back-link`
   rule further down this file, which sets display:inline-flex. */
.pay-panel .pay-back-link { display: none; }
.step1-footer { display: none; }

@media (max-width: 860px) {
  .checkout-shell {
    grid-template-columns: 1fr;
    padding-top: 18px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  /* The fixed Buy now / Proceed to pay bar replaces the normal footer on
     phones. Hiding the desktop payment-security footer prevents it from
     sitting underneath that bar and removes the false blank tail. */
  .checkout-page .site-footer { display: none; }

  /* Step 1: course details + a small price/Buy now bar fixed at the
     bottom (replaces the removed Profile/Courses/Updates nav on this
     page). Step 2: tapping Buy now hides the course details entirely and
     shows only the payment panel + Proceed to pay, matching the
     reference flow. */
  .course-detail.hidden-step2 { display: none; }
  .pay-panel.hidden-step1 { display: none; }

  .pay-panel .pay-back-link { display: inline-flex; margin-bottom: 14px; }

  .step1-footer.visible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 25;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    box-shadow: 0 8px 24px rgba(16, 19, 28, 0.18);
  }
  .step1-price { display: flex; flex-direction: column; line-height: 1.3; }
  .step1-mrp { color: var(--muted); text-decoration: line-through; font-size: 13px; }
  .step1-mrp:empty { display: none; }
  .step1-total { font-size: 19px; font-weight: 800; color: var(--ink); }
  #buy-now-btn { padding: 12px 24px; white-space: nowrap; }

  .pay-fixed-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 25;
  }
  .pay-fixed-bar .pay-badges {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    margin-top: -1px;
    padding: 8px 10px;
    box-shadow: 0 8px 24px rgba(16, 19, 28, 0.18);
  }
  .pay-fixed-bar #pay-btn { box-shadow: 0 8px 24px rgba(16, 19, 28, 0.18); }

  /* Compensate for .pay-fixed-bar leaving normal flow, so the status note
     that comes after it doesn't end up hidden underneath it. */
  .pay-panel { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 22px;
}
.back-link:hover { color: var(--ink); }

.course-hero-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: block;
  margin-bottom: 22px;
}

.course-meta-line {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 10px;
}

.curriculum-heading {
  font-size: 16px;
  margin-top: 28px;
  margin-bottom: 12px;
}

.curriculum-list {
  list-style: none;
  counter-reset: mod;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}

.curriculum-list li {
  counter-increment: mod;
  font-size: 14px;
  color: #3a3d47;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}

.curriculum-list li:last-child { border-bottom: none; }

.course-detail h1 {
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.18;
}

.course-detail .tagline {
  color: var(--muted);
  font-size: 15px;
  margin-top: 10px;
}

.course-detail .desc {
  margin-top: 20px;
  line-height: 1.7;
  color: #3a3d47;
  font-size: 15px;
}

.outcomes {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 11px;
}

.outcomes li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #3a3d47;
}

.outcomes li::before {
  content: "\2713";
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.checkout-section-heading {
  font-size: 16px;
  margin-top: 26px;
  margin-bottom: 10px;
}

.checkout-section-heading + p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #3a3d47;
  margin: 0;
}

/* The global `a { color: inherit; text-decoration: none; }` rule near the top
   of this file makes links in the course description render as plain text.
   Re-style them here so URLs the admin types actually look clickable. */
#course-info a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

#course-info a:hover {
  opacity: 0.75;
}

.checkout-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 11px;
}

.checkout-bullet-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.5;
  color: #3a3d47;
}

.checkout-bullet-list .bullet-icon { flex-shrink: 0; }

/* payment panel */

.pay-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 16px 40px rgba(16, 19, 28, 0.06);
}

.pay-panel h2 {
  font-size: 17px;
  margin-bottom: 4px;
}

.pay-panel .sub {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 20px;
}

.field-group { margin-bottom: 16px; }

.field-label {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.field {
  width: 100%;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--ink);
  font-size: 14.5px;
}

.field::placeholder { color: #a5a9b4; }
.field:focus { border-color: var(--accent); outline: none; background: #fff; }

.field-row { display: flex; gap: 10px; }

.coupon-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 18px 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}

.coupon-body {
  display: none;
  gap: 10px;
  margin-bottom: 4px;
}
.coupon-body.open { display: flex; }

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--muted);
  padding: 8px 0;
}

.summary-row.total {
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  border-top: 1px dashed var(--line-strong);
  margin-top: 6px;
  padding-top: 14px;
}

.summary-row .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

/* Struck-through MRP shown beside the real price in the Service row. */
.summary-row .summary-mrp {
  color: var(--muted);
  opacity: 0.8;
  font-size: 12.5px;
  margin-right: 4px;
}

.summary-row .summary-price {
  color: var(--ink);
  font-weight: 600;
}

.billing-box,
.service-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  background: var(--surface);
}

.box-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 12px;
}

.billing-box .field-group { margin-bottom: 10px; }

.pay-fixed-bar { margin-top: 16px; }

.pay-badges {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.pay-badge {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-alt);
  letter-spacing: 0.02em;
}

.pay-badge-icon {
  display: inline-flex;
  width: 44px;
  height: 26px;
}
.pay-badge-icon svg { width: 100%; height: 100%; }

.status-note {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  min-height: 18px;
}

.status-note.error { color: var(--danger); }
.status-note.ok { color: var(--success); }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 26px 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* ---------- Mobile header overrides ----------
   These MUST stay at the end of the file. The base .shop-header,
   .updates-header and .mini-brand rules appear later than the main mobile
   media query, so putting these there silently lost - the padding and
   divider spacing were being overridden back to the desktop values. */

@media (max-width: 860px) {
  /* On desktop these headings sit in the top-left corner of the window; on a
     phone there's no room for that to read as intentional, so centre them.
     All three pages use identical spacing so they feel like one site. */
  .shop-header,
  .updates-header,
  .mini-brand {
    text-align: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line);
  }

  .category-pills { padding-top: 18px; }
  .update-list { padding-top: 18px; }
}

/* Compact banner layout on phones: avatar on the left, name and tagline
   beside it, buttons across the bottom. Stacking everything vertically (as
   on desktop) forces the card to ~330px tall no matter what height is set,
   because that's simply how much room the stacked content needs. Laying it
   out sideways is what lets the card be short. */
@media (max-width: 860px) {
  .profile-card {
    min-height: var(--hero-height-mobile, 220px);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    align-content: center;
    justify-items: start;
    column-gap: 16px;
    row-gap: 2px;
    text-align: left;
    padding: 20px;
  }

  .profile-card .profile-avatar {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    margin: 0;
  }

  .profile-card .profile-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
  }

  .profile-card .profile-tagline {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
  }

  /* Buttons span the full width underneath both columns. */
  .profile-card .profile-ctas {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin-top: 18px;
  }

  /* Scaled down to match the compact layout. The avatar is a proportion of
     the admin Avatar size setting rather than a fixed value, so that slider
     still works on mobile - it just renders smaller than on desktop. */
  .profile-card .profile-avatar {
    width: calc(var(--avatar-size, 100px) * 0.72);
    height: calc(var(--avatar-size, 100px) * 0.72);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.18);
  }

  .profile-card .profile-name {
    font-size: 21px;
    line-height: 1.25;
  }

  .profile-card .profile-tagline {
    font-size: 13.5px;
    line-height: 1.4;
    margin-top: 3px;
  }

  /* Equal-width buttons: flex-basis 0 makes them share the row evenly
     regardless of label length. white-space:nowrap is what stops the longer
     label wrapping to two lines, which is what went wrong the first time
     equal widths were tried. */
  .profile-card .cta-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 10px 14px;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* Keep uploaded logos fitted cleanly without using a loading placeholder. */
.profile-avatar {
  object-fit: contain;
  background: #0d1220;
}