/* PowerLMS polish layer, shared by the PowerLMS home page and the public course pages.
   4px buttons with a light glint (now and then, and when pressed), refined cards, numbers that count up,
   sections that ease in on scroll, and full-width calls to action on phones.
   Everything reads correctly without lms-polish.js, and nothing moves for people who ask for reduced motion.
   Palette: PowerLMS teal (#0F766E / #115E59), deep night teal, warm gold (#E7B547). */
:root {
  --pl-teal: #0F766E; --pl-teal-ink: #115E59; --pl-night: #062C29; --pl-night-2: #0A3B37;
  --pl-gold: #E7B547; --pl-gold-deep: #8A6514; --pl-cream: #FBFAF6;
  --pl-r-btn: 4px; --pl-r-card: 10px;
  --pl-shadow: 0 1px 2px rgba(6, 44, 41, .06), 0 10px 30px -18px rgba(6, 44, 41, .35);
  --pl-shadow-hi: 0 2px 4px rgba(6, 44, 41, .06), 0 26px 50px -24px rgba(6, 44, 41, .5);
}

/* ---- buttons: 4px corners ---- */
.pl-body .btn, .lp .btn, .le .btn { border-radius: var(--pl-r-btn); }
.pl-body .btn, .lp .btn-primary { font-weight: 700; letter-spacing: .005em; }
.lp .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 88%, #000) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, #000); }
.lp .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.pl-body .btn:active, .lp .btn:active { transform: translateY(1px); }

/* ---- the glint: a light sweep across the button ---- */
.pl-body .btn, .lp .btn { position: relative; overflow: hidden; isolation: isolate; }
.pl-body .btn::after, .lp .btn::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0; opacity: 0; }
.pl-body .btn-ghost::after, .pl-btn-line::after, .lp .btn-ghost::after { background-image: linear-gradient(105deg, transparent 38%, rgba(231,181,71,.42) 50%, transparent 62%); }
/* A button glints once when a mouse moves over it (class added by lms-polish.js). */
.pl-body .btn.pl-glint-now::after, .lp .btn.pl-glint-now::after { animation: pl-glint-once .75s ease-out 1; }
@keyframes pl-glint { 0% { background-position: 160% 0; opacity: 0; } 1% { opacity: 1; } 9% { background-position: -60% 0; opacity: 1; } 10%, 100% { background-position: -60% 0; opacity: 0; } }
@keyframes pl-glint-once { 0% { background-position: 160% 0; opacity: 1; } 100% { background-position: -60% 0; opacity: 1; } }

/* ---- reveal on scroll: visible by default; hidden only once JS has run and the section is below the fold ---- */
.pl-js [data-reveal]:not(.pl-in) { opacity: 0; transform: translateY(18px); }
.pl-js [data-reveal="stagger"]:not(.pl-in) { opacity: 1; transform: none; }
.pl-js [data-reveal="stagger"]:not(.pl-in) > * { opacity: 0; transform: translateY(18px); }
[data-reveal], [data-reveal="stagger"] > * { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal="stagger"] > :nth-child(2) { transition-delay: .08s; }
[data-reveal="stagger"] > :nth-child(3) { transition-delay: .16s; }
[data-reveal="stagger"] > :nth-child(4) { transition-delay: .24s; }
[data-reveal="stagger"] > :nth-child(n+5) { transition-delay: .3s; }

/* ---- numbers: count up, and a year-like number pops in ---- */
[data-count], [data-pop] { font-variant-numeric: tabular-nums; display: inline-block; }
.pl-js [data-facts]:not(.pl-in) [data-pop] { opacity: 0; transform: scale(.55); }
[data-facts].pl-in [data-pop] { animation: pl-pop .8s cubic-bezier(.18,1.5,.4,1) both; animation-delay: .35s; }
@keyframes pl-pop { 0% { opacity: 0; transform: scale(.55); filter: blur(4px); } 60% { opacity: 1; transform: scale(1.12); filter: blur(0); } 100% { opacity: 1; transform: scale(1); } }

/* =====================================================================
   Public course pages (src/products/learn/pub.ts): same polish, the course's own accent.
   ===================================================================== */
.lp-hero { border-bottom: 3px solid var(--pl-gold); isolation: isolate; }
.lp-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .14;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='240' viewBox='0 0 480 240'><g fill='none' stroke='white' stroke-width='1'><path d='M0 60 C80 20 160 100 240 60 S400 20 480 60'/><path d='M0 90 C80 50 160 130 240 90 S400 50 480 90'/><path d='M0 120 C80 80 160 160 240 120 S400 80 480 120'/><path d='M0 150 C80 110 160 190 240 150 S400 110 480 150'/><path d='M0 180 C80 140 160 220 240 180 S400 140 480 180'/></g></svg>") 0 0 / 480px 240px repeat;
  -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 75%); mask-image: linear-gradient(100deg, transparent 25%, #000 75%); }
.lp-hero-in { z-index: 1; }
.lp-card { border-radius: var(--pl-r-card); box-shadow: var(--pl-shadow); border-color: #E3E7EC; transition: box-shadow .25s ease; }
.lp-card h2 { position: relative; padding-bottom: 10px; }
.lp-card h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--pl-gold); }
.lp-price-card { border-top: 4px solid var(--accent); box-shadow: var(--pl-shadow-hi); }
.lp-cur li { transition: background .2s ease; }
.lp-cur li:hover { background: color-mix(in srgb, var(--accent) 5%, #fff); }
.lp-msg { background: #fff; border: 1px solid #E3E7EC; border-top: 4px solid var(--accent, var(--pl-teal)); border-radius: var(--pl-r-card); box-shadow: var(--pl-shadow-hi); padding: 28px 28px 22px; }
.lp-msg .btn { margin-top: 6px; }

/* ---- phones: every call to action runs full width ---- */
@media (max-width: 560px) {
  .pl-body .pl-cta-pair .btn, .pl-body .pl-block, .lp .lp-buy .btn, .lp .lp-msg .btn, .lp .lp-card > .btn, .lp .lp-card form > .btn { display: flex; width: 100%; }
  .lp-msg { margin: 8vh 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-body .btn::after, .lp .btn::after { animation: none !important; display: none; }
  .pl-js [data-reveal]:not(.pl-in), .pl-js [data-reveal="stagger"]:not(.pl-in) > *, .pl-js [data-facts]:not(.pl-in) [data-pop] { opacity: 1 !important; transform: none !important; }
  [data-facts].pl-in [data-pop] { animation: none; }
  [data-reveal], [data-reveal="stagger"] > * { transition: none; }
}