/* ============================================================
   Sublime LMS — Platform sub-pages
   Shared styling + 4 distinctive animated heroes.
   Builds on site.css + platform.css (reused), adds only
   what these 4 pages need. Same tokens, same language.
   ============================================================ */

/* ---------- shared page hero shell ---------- */
.pp-hero {
  position: relative;
  padding: 72px 0 88px;
  overflow: hidden;
  isolation: isolate;
}
.pp-hero-field {
  position: absolute; inset: 0; z-index: -2;
  background: var(--gradient-pulsefield);
  opacity: .9;
}
.pp-hero-dots {
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(17,24,39,0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, transparent, black 14%, black 74%, transparent);
}
.pp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
.pp-hero-copy { max-width: 540px; }
.pp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 14px 0 20px;
  text-wrap: balance;
}
.pp-hero .lede {
  font-size: 18px; line-height: 1.6;
  color: var(--fg-body);
  margin: 0 0 28px;
  max-width: 500px;
}
.pp-hero-bullets {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-wrap: wrap; gap: 12px 24px;
}
.pp-hero-bullets li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--fg-body);
}
.pp-hero-bullets i, .pp-hero-bullets svg { width: 16px; height: 16px; }

.pp-hero-art {
  position: relative;
  width: 100%;
  min-height: 460px;
  display: flex; align-items: center; justify-content: center;
}

/* generic floating chip used across heroes */
.pp-float {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  z-index: 6;
  animation: pp-float 5.5s ease-in-out infinite;
}
@keyframes pp-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* reveal */
.pp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.pp-reveal.in { opacity: 1; transform: none; }

/* shared "how it works" stepper band */
.pp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.pp-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 26px 22px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pp-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pp-step-num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--color-violet-700); letter-spacing: .06em;
}
.pp-step-ico {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  margin: 14px 0 16px;
  background: var(--color-violet-100); color: var(--color-violet-700);
}
.pp-step-ico i, .pp-step-ico svg { width: 22px; height: 22px; }
.pp-step.teal .pp-step-ico { background: var(--color-teal-100); color: var(--color-teal-700); }
.pp-step.blue .pp-step-ico { background: var(--color-blue-100); color: var(--color-blue-700); }
.pp-step.emerald .pp-step-ico { background: var(--color-emerald-100); color: var(--color-emerald-700); }
.pp-step.amber .pp-step-ico { background: var(--color-amber-100); color: var(--color-amber-600); }
.pp-step h3 {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 650;
  color: var(--fg); letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.pp-step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-muted); }

/* shared feature-with-art split rows (reuse .split-grid from site.css) */
.pp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.pp-pills .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 500;
  color: var(--fg-body); background: #fff;
  border: 1px solid var(--border); border-radius: 999px;
}
.pp-pills .pill i, .pp-pills .pill svg { width: 14px; height: 14px; color: var(--color-violet-600); }
.pp-pills .pill.teal i { color: var(--color-teal-600); }
.pp-pills .pill.blue i { color: var(--color-blue-700); }
.pp-pills .pill.emerald i { color: var(--color-emerald-600); }
.pp-pills .pill.amber i { color: var(--color-amber-600); }

/* shared metric band */
.pp-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 8px;
}
.pp-metric {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 24px;
}
.pp-metric b {
  display: block; font-family: var(--font-display);
  font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pp-metric b small { font-size: 22px; font-weight: 700; }
.pp-metric .m-lbl { font-family: var(--font-display); font-weight: 650; font-size: 15px; color: var(--fg); margin-top: 10px; }
.pp-metric .m-sub { font-size: 12px; color: var(--fg-muted); margin-top: 4px; }
.pp-metrics.teal .pp-metric b { background: linear-gradient(135deg,#0F766E,#14B8A6); -webkit-background-clip: text; background-clip: text; }
.pp-metrics.emerald .pp-metric b { background: linear-gradient(135deg,#047857,#10B981); -webkit-background-clip: text; background-clip: text; }
.pp-metrics.blue .pp-metric b { background: linear-gradient(135deg,#1D4ED8,#3B82F6); -webkit-background-clip: text; background-clip: text; }

/* ============================================================
   HERO 1 — COHORT LEARNING · living cohort field
   ============================================================ */
.clh {
  position: relative;
  width: 100%; max-width: 520px;
  aspect-ratio: 1 / 1;
}
.clh-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.clh-link {
  stroke: #14B8A6; stroke-width: 1.5; fill: none; stroke-linecap: round;
  stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: clh-draw 1.4s var(--ease-out) forwards;
}
.clh-link.v { stroke: #A78BFA; }
@keyframes clh-draw { to { stroke-dashoffset: 0; } }

.clh-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 999px;
  display: grid; place-items: center;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px;
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  z-index: 4;
  opacity: 0;
  animation: clh-pop .5s var(--ease-spring) forwards;
}
@keyframes clh-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.clh-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 124px; height: 124px;
  border-radius: 999px;
  background: var(--gradient-ai-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center;
  box-shadow: 0 20px 50px -16px rgba(109,40,217,.5), inset 0 0 0 1px rgba(255,255,255,.2);
  z-index: 5;
}
.clh-center b { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.clh-center span { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; opacity: .85; }
.clh-ripple {
  position: absolute; top: 50%; left: 50%;
  width: 124px; height: 124px; border-radius: 999px;
  border: 2px solid rgba(139,92,246,.4);
  transform: translate(-50%,-50%);
  z-index: 3;
  animation: clh-ripple 3s ease-out infinite;
}
.clh-ripple.d2 { animation-delay: 1.5s; }
@keyframes clh-ripple {
  0% { width: 124px; height: 124px; opacity: .7; }
  100% { width: 420px; height: 420px; opacity: 0; }
}

/* ============================================================
   HERO 2 — LEARNING EXPERIENCE · weekly loop
   ============================================================ */
.lxh {
  position: relative;
  width: 100%; max-width: 460px;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.lxh-orbit {
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1.5px dashed rgba(109,40,217,.18);
  animation: lxh-spin 32s linear infinite;
}
@keyframes lxh-spin { to { transform: rotate(360deg); } }
.lxh-center {
  position: relative;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; z-index: 4;
}
.lxh-center svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lxh-ring-fill {
  fill: none; stroke: #6D28D9; stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 433; stroke-dashoffset: 433;
  animation: lxh-fill 2.4s var(--ease-out) .3s forwards;
}
@keyframes lxh-fill { to { stroke-dashoffset: 108; } }
.lxh-center b { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg); line-height: 1; position: relative; }
.lxh-center span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); margin-top: 4px; position: relative; }

.lxh-card {
  position: absolute;
  width: 150px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 12px;
  z-index: 5;
  display: flex; align-items: center; gap: 9px;
  animation: pp-float 5s ease-in-out infinite;
}
.lxh-card .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.lxh-card .ic i, .lxh-card .ic svg { width: 15px; height: 15px; }
.lxh-card b { display: block; font-family: var(--font-display); font-weight: 650; font-size: 12px; color: var(--fg); letter-spacing: -0.005em; line-height: 1.15; }
.lxh-card span { display: block; font-size: 10px; color: var(--fg-muted); margin-top: 1px; }
.lxh-card.c1 { top: 2%; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.lxh-card.c1 .ic { background: var(--color-teal-100); color: var(--color-teal-700); }
.lxh-card.c2 { top: 42%; right: -6%; animation-delay: .8s; }
.lxh-card.c2 .ic { background: var(--color-violet-100); color: var(--color-violet-700); }
.lxh-card.c3 { bottom: 2%; left: 50%; transform: translateX(-50%); animation-delay: 1.6s; }
.lxh-card.c3 .ic { background: var(--color-blue-100); color: var(--color-blue-700); }
.lxh-card.c4 { top: 42%; left: -6%; animation-delay: 2.4s; }
.lxh-card.c4 .ic { background: var(--color-emerald-100); color: var(--color-emerald-700); }

/* ============================================================
   HERO 3 — INSTRUCTOR WORKSPACE · live command center
   ============================================================ */
.iwh {
  position: relative;
  width: 100%; max-width: 560px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.iwh-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #FCFAFF 0%, #FFFFFF 100%);
}
.iwh-chrome .dots { display: flex; gap: 6px; }
.iwh-chrome .dots span { width: 9px; height: 9px; border-radius: 999px; }
.iwh-chrome .dots span:nth-child(1){background:#FCA5A5}
.iwh-chrome .dots span:nth-child(2){background:#FCD34D}
.iwh-chrome .dots span:nth-child(3){background:#86EFAC}
.iwh-chrome .tab { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; font-size: 11px; font-weight: 600; background: var(--color-violet-50); color: var(--color-violet-700); border-radius: 7px; }
.iwh-chrome .tab i, .iwh-chrome .tab svg { width: 12px; height: 12px; }
.iwh-body { padding: 20px; }
.iwh-gauges { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.iwh-gauge { background: var(--color-mist); border-radius: 12px; padding: 12px; text-align: center; }
.iwh-gauge .ring { position: relative; width: 56px; height: 56px; margin: 0 auto 6px; }
.iwh-gauge .ring svg { width: 56px; height: 56px; }
.iwh-gauge .ring-prog { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 151; stroke-dashoffset: 151; transform: rotate(-90deg); transform-origin: center; animation: iwh-gauge 1.6s var(--ease-out) forwards; }
@keyframes iwh-gauge { to { stroke-dashoffset: var(--to, 50); } }
.iwh-gauge .ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--fg); }
.iwh-gauge span { font-size: 10px; font-weight: 600; color: var(--fg-muted); letter-spacing: .04em; }
.iwh-queue-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 650; font-size: 13px; color: var(--fg); margin-bottom: 10px; }
.iwh-queue-head i, .iwh-queue-head svg { width: 16px; height: 16px; color: var(--color-amber-600); }
.iwh-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #fff; border: 1px solid var(--border-soft);
  border-radius: 10px; margin-bottom: 7px;
  opacity: 0; transform: translateX(-10px);
  animation: iwh-slide .5s var(--ease-out) forwards;
}
.iwh-row:nth-child(2){animation-delay:.15s}
.iwh-row:nth-child(3){animation-delay:.3s}
.iwh-row:nth-child(4){animation-delay:.45s}
@keyframes iwh-slide { to { opacity: 1; transform: none; } }
.iwh-row .av { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.iwh-row .info { flex: 1; min-width: 0; }
.iwh-row .info b { display: block; font-size: 12.5px; font-weight: 600; color: var(--fg); }
.iwh-row .info span { display: block; font-size: 10.5px; color: var(--fg-muted); }
.iwh-row .score { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--color-amber-50); color: var(--color-amber-600); }

/* ============================================================
   HERO 4 — RECOVERY WORKFLOWS · recovery river
   ============================================================ */
.rwh {
  position: relative;
  width: 100%; max-width: 540px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: 28px 26px 24px;
}
.rwh-svg { width: 100%; height: 150px; display: block; }
.rwh-path {
  fill: none; stroke: url(#rwh-grad); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 700; stroke-dashoffset: 700;
  animation: rwh-draw 2.4s var(--ease-out) forwards;
}
@keyframes rwh-draw { to { stroke-dashoffset: 0; } }
.rwh-dot {
  r: 6;
  opacity: 0;
  animation: rwh-dot-in .4s ease forwards;
}
.rwh-dot.d1 { animation-delay: .3s; }
.rwh-dot.d2 { animation-delay: .9s; }
.rwh-dot.d3 { animation-delay: 1.5s; }
.rwh-dot.d4 { animation-delay: 2.1s; }
@keyframes rwh-dot-in { to { opacity: 1; } }
.rwh-traveler {
  r: 7; fill: #fff; stroke-width: 3;
  offset-path: path("M 30 120 C 130 40 230 130 330 70 C 410 22 470 70 510 30");
  animation: rwh-travel 2.6s var(--ease-in-out) .4s forwards;
  offset-distance: 0%;
  opacity: 0;
}
@keyframes rwh-travel {
  0% { offset-distance: 0%; opacity: 1; stroke: #F59E0B; }
  40% { stroke: #8B5CF6; }
  70% { stroke: #3B82F6; }
  100% { offset-distance: 100%; opacity: 1; stroke: #10B981; }
}
.rwh-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px; }
.rwh-lab { text-align: center; }
.rwh-lab .lbl { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rwh-lab.amber .lbl { color: var(--color-amber-600); }
.rwh-lab.violet .lbl { color: var(--color-violet-700); }
.rwh-lab.blue .lbl { color: var(--color-blue-700); }
.rwh-lab.emerald .lbl { color: var(--color-emerald-700); }
.rwh-lab b { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 650; color: var(--fg); margin-top: 3px; letter-spacing: -0.005em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .pp-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .pp-hero-art { min-height: 400px; max-width: 560px; margin: 0 auto; }
  .pp-steps { grid-template-columns: repeat(2, 1fr); }
  .pp-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .pp-hero { padding: 40px 0 56px; }
  .pp-hero h1 { font-size: clamp(32px, 8vw, 42px); }
  .pp-steps { grid-template-columns: 1fr; }
  .pp-metrics { grid-template-columns: 1fr 1fr; }
  .clh, .lxh { max-width: 360px; }
  .lxh-card { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .clh-link, .clh-node, .clh-ripple, .lxh-orbit, .lxh-ring-fill, .lxh-card,
  .iwh-gauge .ring-prog, .iwh-row, .rwh-path, .rwh-dot, .rwh-traveler, .pp-float {
    animation: none !important;
  }
  .clh-link { stroke-dashoffset: 0 !important; }
  .clh-node { opacity: 1 !important; transform: translate(-50%,-50%) !important; }
  .iwh-row { opacity: 1 !important; transform: none !important; }
  .rwh-path { stroke-dashoffset: 0 !important; }
  .rwh-dot { opacity: 1 !important; }
  .lxh-ring-fill { stroke-dashoffset: 108 !important; }
}