/* ==========================================================================
   Nova Dojo · path pages (home "/", /belts/{n}, /topics/{code}) and the
   public landing page. Owner: D2 (home/route). Prefixes: .pp-* (path) and
   .lp-* (landing). Reads the global tokens of dojo.css (--belt*, --brand-*,
   --gold*) and never redefines them.
   ========================================================================== */

:root { /* aliases of the global tokens (dojo.css), with fallbacks */
  --pp-ink: var(--ink, #1b1f2a);
  --pp-muted: var(--muted, #5f6573);
  --pp-paper: var(--paper, #ffffff);
  --pp-line: var(--border, rgba(27, 31, 42, .08));
  --pp-line-strong: var(--border-strong, rgba(27, 31, 42, .16));
  --pp-shadow: 0 1px 2px rgba(27, 31, 42, .05), 0 10px 28px -16px rgba(27, 31, 42, .22);
  --pp-shadow-lg: 0 2px 4px rgba(27, 31, 42, .05), 0 22px 48px -24px rgba(27, 31, 42, .35);
  --pp-radius: 1.25rem;
  --pp-head-font: var(--font-display), "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.pp-ico { width: 1.15em; height: 1.15em; flex-shrink: 0; display: inline-block; vertical-align: -.18em; }

/* ------------------------------------------------------------ layout */
.pp-layout {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "side" "main";
}
.pp-head { grid-area: head; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pp-side { grid-area: side; min-width: 0; }
.pp-main { grid-area: main; min-width: 0; }

/* Belt and topic pages: on phones the content comes before the stats panel. */
.pp-layout--side-last { grid-template-areas: "head" "main" "side"; }

@media (min-width: 1024px) {
  .pp-layout, .pp-layout--side-last {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head side" "main side";
    column-gap: 2rem; row-gap: 1.75rem;
    align-items: start;
  }
  .pp-side { align-self: stretch; }
  .pp-panel {
    position: sticky; top: 4.75rem;
    max-height: calc(100vh - 5.5rem); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; padding: 2px 4px 8px; margin: -2px -4px 0;
  }
}

/* ------------------------------------------------------------- cards */
.pp-card {
  background: var(--pp-paper); border: 1px solid var(--pp-line); border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow); padding: 1.1rem 1.15rem;
}
.pp-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.pp-card__title {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--pp-head-font); font-weight: 800; font-size: 1.0625rem; color: var(--brand-navy);
}
.pp-card__title .pp-ico { color: var(--brand-teal); }
.pp-card__aside { font-size: .75rem; font-weight: 700; color: var(--pp-muted); white-space: nowrap; }
.pp-card__link {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .85rem;
  font-weight: 800; font-size: .875rem; color: var(--brand-teal-dark); text-decoration: none;
}
.pp-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-muted); }

/* --------------------------------------------------------------- chips */
.pp-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 9999px;
  background: #f1f3f6; color: #3b4456; border: 1px solid var(--pp-line);
  font-size: .75rem; font-weight: 800; line-height: 1.35; white-space: nowrap;
}
.pp-chip .pp-ico { width: .95em; height: .95em; }
.pp-chip--done { background: var(--gold-light); color: #8a5a00; border-color: #f7d77d; }
.pp-chip--open { background: var(--brand-teal-light); color: var(--brand-teal-dark); border-color: #b6e3dc; }
.pp-chip--jump { background: #e8f1fd; color: #1d4f91; border-color: #c4dafa; }
.pp-chip--locked { background: #eef0f3; color: #6b7384; }

/* Small 3D buttons (topic actions, syllabus link) */
.pp-mini-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 2.25rem; padding: .35rem .75rem; border-radius: .8rem;
  background: #fff; color: var(--brand-navy); border: 2px solid var(--pp-line-strong);
  box-shadow: 0 3px 0 var(--pp-line-strong);
  font-weight: 800; font-size: .8125rem; text-decoration: none; white-space: nowrap;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s;
}
.pp-mini-btn:hover { background: #f7f8fa; }
.pp-mini-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pp-line-strong); }
.pp-mini-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--pp-muted); }
.pp-mini-btn--ghost:hover { background: rgba(31, 58, 95, .07); color: var(--brand-navy); }
.pp-mini-btn--ghost:active { transform: none; box-shadow: none; }

/* Plain bars on white surfaces (tinted by the nearest [data-belt]) */
.pp-bar { position: relative; flex: 1; height: .75rem; border-radius: 9999px; background: #e9ecf1; overflow: hidden; }
.pp-bar > span {
  display: block; height: 100%; border-radius: inherit; min-width: 0;
  background: var(--belt-fill, var(--brand-teal));
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
.pp-bar--gold > span { background: linear-gradient(90deg, var(--gold), #f8cd5c); }

/* ------------------------------------------------------- progress hero */
.pp-hero {
  position: relative; overflow: hidden;
  background: var(--pp-paper); border: 1px solid var(--pp-line); border-radius: 1.5rem;
  box-shadow: var(--pp-shadow-lg); padding: 1.25rem;
}
.pp-hero::before { /* soft belt-colored glow behind the badge */
  content: ""; position: absolute; width: 16rem; height: 16rem; left: -5rem; top: -7rem; border-radius: 9999px;
  background: radial-gradient(circle, var(--pp-tint, var(--brand-teal-light)) 0%, transparent 70%);
  pointer-events: none;
}
.pp-hero__top { position: relative; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.pp-hero__badge { flex-shrink: 0; border-radius: 9999px; transition: transform .2s ease; }
.pp-hero__badge img { width: 4.5rem; height: 4.5rem; filter: drop-shadow(0 6px 10px rgba(27, 31, 42, .18)); }
.pp-hero__badge:hover { transform: rotate(-6deg) scale(1.04); }
.pp-hero__info { min-width: 0; flex: 1; }
.pp-hero__title {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55rem;
  font-family: var(--pp-head-font); font-weight: 800; font-size: 1.5rem; line-height: 1.2; color: var(--pp-ink);
}
.pp-hero__subtitle { font-size: 1rem; font-weight: 700; color: var(--pp-muted); }
.pp-hero__progress { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; }
.pp-hero__pct { font-weight: 800; font-size: .875rem; color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.pp-hero__next { width: 2.1rem; height: 2.1rem; flex-shrink: 0; opacity: .9; }
.pp-hero__meta { margin-top: .35rem; font-size: .8125rem; color: var(--pp-muted); }
.pp-hero__meta strong { color: var(--pp-ink); }

@media (min-width: 640px) {
  .pp-hero { padding: 1.5rem 1.6rem; }
  .pp-hero__badge img { width: 5.25rem; height: 5.25rem; }
  .pp-hero__title { font-size: 1.875rem; }
}

/* The big Continue button (3D, two lines) */
.pp-continue.btn {
  position: relative; justify-content: flex-start; gap: .9rem;
  min-height: 4.25rem; padding: .85rem 1.1rem; border-radius: 1.15rem;
  white-space: normal; text-align: left;
  box-shadow: 0 5px 0 var(--btn-edge), 0 14px 26px -14px rgba(31, 122, 111, .7);
}
.pp-continue.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--btn-edge); }
.pp-continue__icon {
  display: grid; place-items: center; flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 9999px;
  background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.pp-continue__icon .pp-ico { width: 1.3rem; height: 1.3rem; }
.pp-continue__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pp-continue__label { font-family: var(--pp-head-font); font-size: 1.25rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.pp-continue__sub { font-size: .875rem; font-weight: 700; opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-continue__arrow .pp-ico { width: 1.4rem; height: 1.4rem; transition: translate .2s ease; }
.pp-continue:hover .pp-continue__arrow .pp-ico { translate: 4px 0; }

.pp-done {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 1.15rem;
  background: var(--gold-light); border: 2px solid #f7d77d; color: #6b4500;
}
.pp-done__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: var(--gold); color: #fff; flex-shrink: 0; }
.pp-done__icon .pp-ico { width: 1.4rem; height: 1.4rem; }
.pp-done__title { font-family: var(--pp-head-font); font-weight: 800; font-size: 1.125rem; }
.pp-done__text { font-size: .875rem; }

/* --------------------------------------------------------- side panel */
.pp-panel { display: flex; flex-direction: column; gap: 1rem; }
.pp-panel > * { flex-shrink: 0; }

.pp-stats { padding: .9rem; }
.pp-stats__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pp-stat {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .75rem; border-radius: 1rem;
  text-decoration: none; color: var(--pp-ink); border: 2px solid transparent;
  transition: transform .12s ease, border-color .15s;
}
.pp-stat:hover { transform: translateY(-1px); }
.pp-stat--streak { background: #fff1e6; border-color: #ffd9bd; }
.pp-stat--xp { background: #fff7db; border-color: #f9e3a1; }
.pp-stat__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: .8rem; }
.pp-stat__icon .pp-ico { width: 1.55rem; height: 1.55rem; }
.pp-stat--streak .pp-stat__icon { color: #f2690d; background: #ffe0c7; }
.pp-stat--xp .pp-stat__icon { color: #d99a06; background: #ffedb0; }
.pp-stat--streak:not(.is-off) .pp-stat__icon .pp-ico { transform-origin: 50% 85%; animation: pp-flicker 1.8s ease-in-out infinite; }
.pp-stat.is-off { background: #f3f4f6; border-color: #e6e8ec; }
.pp-stat.is-off .pp-stat__icon { color: #a3aab6; background: #e9ebef; }
.pp-stat__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.pp-stat__value { font-family: var(--pp-head-font); font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-stat__label { font-size: .75rem; font-weight: 700; color: var(--pp-muted); white-space: nowrap; }
@keyframes pp-flicker { 0%, 100% { scale: 1 1; rotate: -3deg; } 50% { scale: 1.05 1.1; rotate: 3deg; } }

.pp-level { margin-top: .85rem; padding: 0 .2rem; }
.pp-level__row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.pp-level__name { font-family: var(--pp-head-font); font-weight: 800; color: var(--brand-navy); }
.pp-level__hint { font-size: .75rem; font-weight: 700; color: var(--pp-muted); }
.pp-level .pp-bar { height: .6rem; }
.pp-level__foot { margin-top: .55rem; font-size: .75rem; color: var(--pp-muted); }
.pp-level__foot a { font-weight: 800; color: var(--brand-teal-dark); text-decoration: none; }
.pp-level__foot a:hover { text-decoration: underline; }

.pp-week__me { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.pp-week__xp, .pp-week__rank { display: flex; align-items: baseline; gap: .35rem; }
.pp-week__xp strong, .pp-week__rank strong { font-family: var(--pp-head-font); font-weight: 800; font-size: 1.75rem; line-height: 1; color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.pp-week__xp span, .pp-week__rank span { font-size: .8125rem; font-weight: 700; color: var(--pp-muted); }
.pp-week__rank strong { color: var(--brand-teal-dark); }
.pp-week__hint { display: flex; align-items: center; gap: .35rem; margin-top: .45rem; font-size: .8125rem; font-weight: 600; color: #3b4456; }
.pp-week__hint .pp-ico { color: var(--gold); }

.pp-league { margin-top: .75rem; display: flex; flex-direction: column; gap: .25rem; }
.pp-league__row { display: flex; align-items: center; gap: .55rem; padding: .35rem .45rem; border-radius: .75rem; font-size: .875rem; }
.pp-league__row.is-me { background: var(--brand-teal-light); box-shadow: inset 0 0 0 2px #b6e3dc; }
.pp-league__rank {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 9999px;
  background: #eef0f3; color: #4b5466; font-weight: 800; font-size: .75rem; font-variant-numeric: tabular-nums;
}
.pp-league__rank[data-rank="1"] { background: var(--gold); color: #5c3b00; }
.pp-league__rank[data-rank="2"] { background: #d6dbe3; color: #3b4456; }
.pp-league__rank[data-rank="3"] { background: #f0c49b; color: #6b3a10; }
.pp-league__row .avatar { box-shadow: 0 0 0 2px #fff; }
.pp-league__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--pp-ink); }
.pp-league__xp { font-weight: 800; font-size: .8125rem; color: var(--pp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-league__gap { display: flex; justify-content: center; gap: .25rem; padding: .1rem 0; }
.pp-league__gap span { width: .25rem; height: .25rem; border-radius: 9999px; background: #c7ccd5; }

.pp-kata { position: relative; overflow: hidden; background: linear-gradient(120deg, #fff 0%, #fff 55%, var(--brand-teal-light) 100%); }
.pp-kata__top { display: flex; align-items: center; gap: .5rem; }
.pp-kata__text { flex: 1; min-width: 0; }
.pp-kata__titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.pp-kata__line { margin-top: .3rem; font-size: .8125rem; line-height: 1.45; color: var(--pp-muted); }
.pp-kata__art { width: 6rem; height: auto; flex-shrink: 0; margin: -.35rem -.4rem -.35rem 0; }
.pp-kata__chip {
  padding: .1rem .5rem; border-radius: 9999px; font-size: .625rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; background: #eef0f3; color: #5b6475; white-space: nowrap;
}
.pp-kata[data-status="ready"] .pp-kata__chip, .pp-kata[data-status="in_progress"] .pp-kata__chip { background: var(--gold-light); color: var(--gold-ink, #6b4500); }
.pp-kata[data-status="done"] .pp-kata__chip { background: var(--ok-bg, #e3f7e9); color: var(--ok-ink, #14532d); }
.pp-kata[data-status="done"] .pp-card__title .pp-ico { color: var(--ok, #16a34a); }
.pp-kata[data-status="locked"] .pp-card__title .pp-ico { color: #8a93a3; }
.pp-kata[data-status="locked"] .pp-kata__art { filter: grayscale(.8); opacity: .6; }
.pp-kata__btn { margin-top: .85rem; position: relative; z-index: 1; }

.pp-quests:has(> div:empty) { display: none; }
.pp-quests__summary {
  display: flex; align-items: center; gap: .5rem; padding: .85rem 1.1rem; cursor: pointer; list-style: none;
  font-family: var(--pp-head-font); font-weight: 800; color: var(--brand-navy);
}
.pp-quests__summary::-webkit-details-marker { display: none; }
.pp-quests__summary > .pp-ico:first-child { color: var(--brand-teal); }
.pp-quests__chev { margin-left: auto; color: var(--pp-muted); transition: rotate .2s ease; }
.pp-quests[open] > .pp-quests__summary { margin-bottom: .75rem; }
.pp-quests[open] .pp-quests__chev { rotate: 180deg; }
@media (min-width: 1024px) { .pp-quests__summary { display: none; } }
@media (max-width: 639px) { .pp-week .pp-league { display: none; } .pp-week .pp-card__link { margin-top: .6rem; } }

.pp-panel__links { display: flex; flex-wrap: wrap; gap: .25rem .75rem; padding: 0 .35rem; }
.pp-panel__links a {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem;
  font-size: .8125rem; font-weight: 800; color: var(--pp-muted); text-decoration: none;
}
.pp-panel__links a:hover { color: var(--brand-navy); }

/* ------------------------------------------------------ section heads */
.pp-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .25rem 0 1rem; }
.pp-section-head__title { font-family: var(--pp-head-font); font-weight: 800; font-size: 1.375rem; color: var(--pp-ink); }
.pp-section-head__text { font-size: .875rem; color: var(--pp-muted); }

/* ------------------------------------------------------- belt sections */
/* Per-belt tints: the background color of D11's belt banners, so text and art blend. */
[data-belt="white"]  { --pp-tint: #e9eef5; --pp-tint-2: #f4f7fb; --pp-stripe: #94a3b8; --pp-bar: var(--brand-teal); }
[data-belt="yellow"] { --pp-tint: #f7edc8; --pp-tint-2: #fbf7e6; --pp-stripe: #facc15; --pp-bar: #e0a800; }
[data-belt="orange"] { --pp-tint: #f7ddc8; --pp-tint-2: #fbeee3; --pp-stripe: #f97316; --pp-bar: #f97316; }
[data-belt="green"]  { --pp-tint: #cee5d1; --pp-tint-2: #e6f2e8; --pp-stripe: #16a34a; --pp-bar: #16a34a; }
[data-belt="blue"]   { --pp-tint: #d0daee; --pp-tint-2: #e7edf7; --pp-stripe: #2563eb; --pp-bar: #2563eb; }
[data-belt="purple"] { --pp-tint: #e0d3ef; --pp-tint-2: #efe8f7; --pp-stripe: #7c3aed; --pp-bar: #7c3aed; }
[data-belt="brown"]  { --pp-tint: #e3d8cc; --pp-tint-2: #f1ebe5; --pp-stripe: #8b5a2b; --pp-bar: #8b5a2b; }
[data-belt="red"]    { --pp-tint: #f1cfcb; --pp-tint-2: #f8e7e5; --pp-stripe: #dc2626; --pp-bar: #dc2626; }
[data-belt="black"]  { --pp-tint: #e3e5ea; --pp-tint-2: #f1f2f5; --pp-stripe: #111827; --pp-bar: #1f2937; }

.pp-belts { display: flex; flex-direction: column; gap: 1.25rem; }

.pp-band {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 1rem;
  min-height: 9.5rem; padding: 1.2rem 1.35rem 1.45rem; border-radius: 1.5rem;
  background: linear-gradient(100deg, var(--pp-tint, #eef0f3) 0%, var(--pp-tint, #eef0f3) 55%, var(--pp-tint-2, #f6f7f9) 100%);
  color: var(--pp-ink);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--pp-stripe, #94a3b8) 55%, #1b1f2a 10%), var(--pp-shadow);
  list-style: none;
}
.pp-band::after { /* the belt itself: a stripe along the bottom, like the banners */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; z-index: 2;
  background: var(--pp-stripe, #94a3b8);
}
summary.pp-band { cursor: pointer; user-select: none; transition: transform .12s ease, box-shadow .12s ease, filter .15s; }
summary.pp-band::-webkit-details-marker { display: none; }
summary.pp-band:hover { filter: brightness(1.02) saturate(1.05); }
summary.pp-band:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--pp-stripe, #94a3b8) 55%, #1b1f2a 10%); }
summary.pp-band:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 4px; }

.pp-band__text { position: relative; z-index: 1; flex: 1; min-width: 0; }
.pp-band__eyebrow { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-muted); }
.pp-band__title { margin-top: .1rem; font-family: var(--pp-head-font); font-weight: 800; font-size: 1.5rem; line-height: 1.15; color: var(--pp-ink); }
.pp-band__subtitle { font-weight: 700; font-size: 1rem; color: #2b3242; }
.pp-band__tagline { margin-top: .15rem; font-size: .8125rem; line-height: 1.4; color: #4b5262; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-band__progress { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; max-width: 20rem; font-weight: 800; font-size: .8125rem; color: var(--pp-ink); }
.pp-band__bar { flex: 1; height: .6rem; border-radius: 9999px; background: rgba(27, 31, 42, .1); overflow: hidden; }
.pp-band__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--pp-bar, var(--brand-teal)); }
.pp-band__meta { margin-top: .35rem; font-size: .75rem; font-weight: 700; color: var(--pp-muted); }
.pp-band__status {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; padding: .25rem .7rem; border-radius: 9999px;
  background: rgba(255, 255, 255, .75); border: 1px solid var(--pp-line); font-size: .8125rem; font-weight: 800; color: #2b3242;
}
.pp-belt[data-state="completed"] .pp-band__status .pp-ico { color: var(--gold-dark); }

/* Artwork: D11 banner (cropped on the right, fading into the tint) or the round insignia. */
.pp-band__art { position: relative; flex-shrink: 0; display: grid; place-items: center; z-index: 0; }
.pp-art { display: block; object-fit: contain; transition: transform .25s ease, filter .2s; }
.pp-art--badge { width: 5.5rem; height: 5.5rem; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .18)); }
.pp-band--illustration .pp-band__art { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; max-width: 19rem; }
.pp-band--illustration .pp-art {
  width: 100%; height: 100%; object-fit: cover; object-position: 63% 40%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%);
}
.pp-band--illustration .pp-band__text { padding-right: min(44%, 18rem); }
summary.pp-band--badge:hover .pp-art { transform: rotate(-5deg) scale(1.04); }
summary.pp-band--illustration:hover .pp-art { transform: scale(1.03); }
.pp-band__seal {
  position: absolute; right: .75rem; bottom: 1.1rem; z-index: 3; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 9999px; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.pp-band--badge .pp-band__seal { right: -.2rem; bottom: -.2rem; }
.pp-band__seal .pp-ico { width: 1rem; height: 1rem; }
.pp-band__seal--lock { background: #5b6475; color: #fff; }
.pp-band__seal--done { background: var(--gold); color: #fff; }
.pp-band__chev {
  position: absolute; top: .85rem; right: .85rem; z-index: 3; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(255, 255, 255, .85); color: var(--brand-navy);
  box-shadow: 0 1px 3px rgba(27, 31, 42, .15); transition: rotate .2s ease;
}
.pp-belt[open] > .pp-band .pp-band__chev { rotate: 180deg; }
.pp-belt summary.pp-band--badge { padding-right: 3.25rem; }

/* Locked belts: desaturated, still readable */
.pp-belt[data-state="locked"] .pp-band { --pp-stripe: #b8bec9; }
.pp-belt[data-state="locked"] .pp-band .pp-art { filter: grayscale(.85) opacity(.7); }
.pp-belt[data-state="locked"] .pp-band .pp-band__title { color: #3b4252; }

/* Phones: the banner goes on top, full width */
@media (max-width: 639px) {
  .pp-band--illustration { flex-direction: column; align-items: stretch; padding: 0 0 1.4rem; gap: 0; }
  .pp-band--illustration .pp-band__art { position: relative; width: 100%; max-width: none; aspect-ratio: 3 / 1; max-height: 8.5rem; }
  .pp-band--illustration .pp-art { -webkit-mask-image: none; mask-image: none; object-position: 50% 40%; }
  .pp-band--illustration .pp-band__text { order: 2; padding: .85rem 1.1rem 0; }
  .pp-band--illustration .pp-band__seal { top: .75rem; bottom: auto; left: .75rem; right: auto; }
}
@media (min-width: 640px) {
  .pp-band { padding: 1.35rem 1.6rem 1.6rem; gap: 1.5rem; }
  .pp-band__title { font-size: 1.75rem; }
  .pp-art--badge { width: 6.5rem; height: 6.5rem; }
}
.pp-band--big { min-height: 12rem; }
@media (min-width: 640px) {
  .pp-band--big .pp-band__title { font-size: 2.25rem; }
  .pp-band--big .pp-art--badge { width: 8rem; height: 8rem; }
  .pp-band--big.pp-band--illustration .pp-band__art { width: 50%; max-width: 24rem; }
  .pp-band--big.pp-band--illustration .pp-band__text { padding-right: min(48%, 23rem); }
}

.pp-belt__body { padding: .5rem 0 0; }
.pp-belt__body.is-compact .pp-unit { margin-top: .65rem; }
.pp-belt__body.is-compact .pp-unit:first-of-type { margin-top: 1.1rem; }
.pp-belt[data-state="completed"]:not([open]) + .pp-belt,
.pp-belt + .pp-belt { margin-top: 0; }
.pp-belt__locked {
  display: flex; align-items: center; gap: .5rem; margin: 1.25rem .25rem 0; padding: .7rem .9rem; border-radius: 1rem;
  background: #f1f3f6; color: #4b5466; font-size: .875rem; font-weight: 600;
}
.pp-belt__foot { margin: .25rem 0 .75rem; text-align: center; }
.pp-belt__foot a { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; font-weight: 800; color: var(--pp-muted); text-decoration: none; }
.pp-belt__foot a:hover { color: var(--brand-navy); text-decoration: underline; }

/* ------------------------------------------------------------- units */
.pp-unit { position: relative; margin-top: 1.5rem; }
.pp-unit__head {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1rem .9rem 1.25rem; border-radius: 1.15rem;
  background: #fff; border: 1px solid var(--pp-line);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--pp-tint, #e6e2d9) 80%, #1b1f2a 8%), var(--pp-shadow);
}
.pp-unit__head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--pp-stripe, var(--brand-teal)); }
.pp-unit[data-state="available"] .pp-unit__head, .pp-unit[data-state="jump"] .pp-unit__head { background: linear-gradient(100deg, color-mix(in srgb, var(--pp-tint, #fff) 45%, #fff), #fff 70%); }
.pp-unit[data-state="locked"] .pp-unit__head { background: #f7f6f2; box-shadow: 0 3px 0 var(--pp-line); }
.pp-unit[data-state="locked"] .pp-unit__head::before { background: #c9ccd3; }
.pp-unit__info { flex: 1; min-width: 0; }
.pp-unit__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pp-unit__code { font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-muted); }
.pp-unit__title { margin-top: .15rem; font-family: var(--pp-head-font); font-weight: 800; font-size: 1.125rem; line-height: 1.25; }
.pp-unit__title a { color: var(--pp-ink); text-decoration: none; }
.pp-unit__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-unit[data-state="locked"] .pp-unit__title a { color: #6b7384; }
.pp-unit__progress { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; max-width: 20rem; }
.pp-unit__progress .pp-bar { height: .5rem; background: rgba(27, 31, 42, .08); }
.pp-unit__progress .pp-bar > span, .pp-hero .pp-bar > span, .pp-topic .pp-bar > span { background: var(--pp-bar, var(--brand-teal)); }
.pp-unit__count { font-size: .75rem; font-weight: 700; color: var(--pp-muted); white-space: nowrap; }
.pp-unit__actions { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; flex-shrink: 0; }
.pp-unit__note {
  display: flex; align-items: flex-start; gap: .5rem; margin: .75rem .25rem 0; padding: .55rem .8rem; border-radius: .9rem;
  background: #e8f1fd; color: #1d4f91; font-size: .8125rem; font-weight: 600; line-height: 1.45;
}
.pp-unit__note .pp-ico { margin-top: .1rem; }
@media (max-width: 479px) {
  .pp-unit__head { flex-direction: column; align-items: stretch; gap: .7rem; }
  .pp-unit__actions { flex-direction: row; }
  .pp-unit__actions .pp-mini-btn { flex: 1; }
}

/* Zigzag track (the global .path-track does the zigzag; we widen it on big screens) */
/* Wider swings on big screens; every other unit swings the other way, so the path winds. */
.pp-track { --pp-zig-amp: 1; --pp-zig-dir: 1; --zig-scale: calc(var(--pp-zig-amp) * var(--pp-zig-dir)); padding: 1.75rem 0 1rem; gap: 1.4rem; }
.pp-unit:nth-of-type(even) .pp-track { --pp-zig-dir: -1; }
@media (max-width: 380px) { .pp-track { --pp-zig-amp: .6; } }
@media (min-width: 640px) { .pp-track { --pp-zig-amp: 1.4; } }
@media (min-width: 1024px) { .pp-track { --pp-zig-amp: 1.9; } }
.pp-step { display: flex; justify-content: center; }
/* Side illustration next to the swing (desktop only; the zigzag leaves room on the other side) */
.pp-track-wrap { position: relative; }
.pp-decor { display: none; }
@media (min-width: 1024px) {
  .pp-decor {
    display: block; position: absolute; top: 7.25rem; left: 0; width: 10.5rem; height: auto;
    pointer-events: none; user-select: none; opacity: .95;
  }
  .pp-unit:nth-of-type(even) .pp-decor { left: auto; right: 0; }
  .pp-unit[data-state="locked"] .pp-decor { opacity: .7; }
}
.pp-step .path-node__label { max-width: 11rem; }
/* Checkpoints you could take early: calm, sky-blue, no pulse */
.pp-step--jump .path-node.available { --node-bg: #e8f1fd; --node-edge: #a9c8f3; --node-ink: #2563eb; }
.pp-step--jump .path-node.available .path-node__disc::after { display: none; }
.pp-step--jump .path-node__sublabel { color: #1d4f91; font-weight: 700; }
/* The node behind the Continue button */
.pp-step.is-next .path-node__label { color: var(--brand-teal-dark); font-weight: 800; }

.pp-exam { margin-top: 1.25rem; padding: .25rem 0 .5rem; text-align: center; }
.pp-exam .pp-track { padding-top: 1rem; }
.pp-exam .pp-track > * { translate: none; }
.pp-exam__rules { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; color: var(--pp-muted); }

/* ---------------------------------------------------------- belt page */
.pp-back { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; font-size: .875rem; font-weight: 800; color: var(--pp-muted); text-decoration: none; }
.pp-back:hover { color: var(--brand-navy); }
.pp-goal { padding: 0; }
.pp-goal > summary {
  display: flex; align-items: center; gap: .5rem; padding: .9rem 1.1rem; cursor: pointer; list-style: none;
  font-weight: 800; color: var(--brand-navy);
}
.pp-goal > summary::-webkit-details-marker { display: none; }
.pp-goal > summary .pp-ico:first-child { color: var(--brand-teal); }
.pp-goal__chev { margin-left: auto; color: var(--pp-muted); transition: rotate .2s ease; }
.pp-goal[open] .pp-goal__chev { rotate: 180deg; }
.pp-goal > p { padding: 0 1.1rem 1rem; font-size: .9375rem; line-height: 1.6; color: #3b4456; }
.pp-unlock { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.pp-unlock__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; background: #eef0f3; color: #5b6475; flex-shrink: 0; }
.pp-unlock__text { flex: 1; min-width: 12rem; }
.pp-unlock__title { font-weight: 800; color: var(--pp-ink); }
.pp-unlock__sub { font-size: .8125rem; color: var(--pp-muted); }

.pp-pager { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; }
.pp-pager__link {
  display: inline-flex; align-items: center; gap: .6rem; max-width: 48%; padding: .65rem .9rem; border-radius: 1rem;
  background: #fff; border: 1px solid var(--pp-line); box-shadow: 0 3px 0 var(--pp-line-strong);
  color: var(--pp-ink); text-decoration: none; transition: transform .08s ease, box-shadow .08s ease;
}
.pp-pager__link:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pp-line-strong); }
.pp-pager__link > .pp-ico { color: var(--pp-muted); }
.pp-pager__link img { width: 2.1rem; height: 2.1rem; flex-shrink: 0; }
.pp-pager__link--next { margin-left: auto; text-align: right; }
.pp-pager__link > span { display: flex; flex-direction: column; min-width: 0; }
.pp-pager__hint { font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-muted); }
.pp-pager__name { font-weight: 800; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------- topic page */
.pp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .8125rem; font-weight: 700; color: var(--pp-muted); }
.pp-crumbs a { color: var(--pp-muted); text-decoration: none; }
.pp-crumbs a:hover { color: var(--brand-navy); text-decoration: underline; }
.pp-crumbs .pp-ico { width: .9em; height: .9em; opacity: .6; }
.pp-crumbs [aria-current] { color: var(--pp-ink); }

.pp-topic {
  overflow: hidden; background: #fff; border: 1px solid var(--pp-line); border-radius: 1.5rem; box-shadow: var(--pp-shadow-lg);
}
.pp-topic__band {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 1rem;
  min-height: 8.5rem; padding: 1.2rem 1.35rem 1.45rem;
  background: linear-gradient(100deg, var(--pp-tint, #eef0f3) 0%, var(--pp-tint, #eef0f3) 55%, var(--pp-tint-2, #f6f7f9) 100%);
  color: var(--pp-ink);
}
.pp-topic__band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--pp-stripe, #94a3b8); z-index: 2; }
.pp-topic__band-text { position: relative; z-index: 1; flex: 1; min-width: 0; }
.pp-topic__band .pp-art--badge { width: 4.75rem; height: 4.75rem; margin-left: auto; }
.pp-topic__band .pp-art--illustration {
  position: absolute; top: 0; right: 0; bottom: 0; width: 46%; max-width: 19rem; height: 100%; object-fit: cover; object-position: 63% 40%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%);
}
.pp-topic__band:has(.pp-art--illustration) .pp-topic__band-text { padding-right: min(42%, 17rem); }
@media (max-width: 639px) {
  .pp-topic__band:has(.pp-art--illustration) { flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 1.35rem; }
  .pp-topic__band .pp-art--illustration {
    position: relative; order: -1; width: 100%; max-width: none; height: auto; aspect-ratio: 3 / 1; max-height: 8rem;
    object-position: 50% 40%; -webkit-mask-image: none; mask-image: none;
  }
  .pp-topic__band:has(.pp-art--illustration) .pp-topic__band-text { padding: .8rem 1.1rem 0; }
}
.pp-topic__title { margin-top: .15rem; font-family: var(--pp-head-font); font-weight: 800; font-size: 1.625rem; line-height: 1.2; }
@media (min-width: 640px) { .pp-topic__title { font-size: 2rem; } }
.pp-topic__body { padding: 1.15rem 1.35rem 1.35rem; }
.pp-topic__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pp-topic__goal { margin-top: .9rem; font-size: .9375rem; line-height: 1.55; color: #3b4456; }
.pp-topic__goal-label { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; color: var(--brand-navy); }
.pp-topic__goal-label .pp-ico { color: var(--brand-teal); }
.pp-topic__progress { display: flex; align-items: center; gap: .65rem; margin-top: 1rem; }
.pp-topic__pct { font-weight: 800; font-size: .875rem; font-variant-numeric: tabular-nums; }
.pp-topic__count { margin-top: .3rem; font-size: .8125rem; color: var(--pp-muted); }
.pp-topic__note {
  display: flex; align-items: flex-start; gap: .5rem; margin-top: .9rem; padding: .65rem .85rem; border-radius: .9rem;
  background: #f1f3f6; color: #4b5466; font-size: .875rem; line-height: 1.45;
}
.pp-topic__note .pp-ico { margin-top: .12rem; }
.pp-topic__note--jump { background: #e8f1fd; color: #1d4f91; }
.pp-topic__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; }
.pp-topic__cta { white-space: normal; text-align: left; }
@media (max-width: 479px) { .pp-topic__cta { width: 100%; } }

.pp-lessons { padding: 1rem; }
.pp-lessons__list { display: flex; flex-direction: column; gap: .5rem; }
.pp-lesson {
  display: flex; align-items: center; gap: .85rem; padding: .7rem .75rem; border-radius: 1rem;
  border: 2px solid var(--pp-line); background: #fff;
}
.pp-lesson.is-next { border-color: #8fd3c9; background: var(--brand-teal-light); }
.pp-lesson__disc {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 9999px;
  font-family: var(--pp-head-font); font-weight: 800; font-size: 1.05rem;
  background: #e2e6ec; color: #8a93a3; box-shadow: 0 3px 0 #c9cfd8;
}
.pp-lesson__disc .pp-ico { width: 1.15rem; height: 1.15rem; }
.pp-lesson[data-state="available"] .pp-lesson__disc { background: var(--brand-teal); color: #fff; box-shadow: 0 3px 0 var(--brand-teal-dark); }
.pp-lesson[data-state="completed"] .pp-lesson__disc { background: var(--gold); color: #fff; box-shadow: 0 3px 0 var(--gold-dark); }
.pp-lesson__text { flex: 1; min-width: 0; }
.pp-lesson__title { font-weight: 800; color: var(--pp-ink); line-height: 1.3; }
.pp-lesson[data-state="locked"] .pp-lesson__title { color: #6b7384; }
.pp-lesson__code { font-weight: 700; color: var(--pp-muted); font-variant-numeric: tabular-nums; }
.pp-lesson__meta { font-size: .75rem; color: var(--pp-muted); margin-top: .1rem; }
.pp-lesson__btn { flex-shrink: 0; min-width: 5.25rem; }
.pp-lesson__locked { flex-shrink: 0; font-size: .75rem; font-weight: 800; color: #8a93a3; padding: 0 .5rem; }

.pp-cp {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.25rem; padding: 1.15rem 1.25rem; border-radius: 1.25rem;
  background: linear-gradient(135deg, #fff8e1 0%, #fff 70%); border: 2px solid #f7d77d; box-shadow: 0 4px 0 #f1cd6b;
}
.pp-cp[data-state="locked"] { background: #f4f5f7; border-color: var(--pp-line-strong); box-shadow: 0 4px 0 var(--pp-line-strong); }
.pp-cp__icon {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; flex-shrink: 0; border-radius: 1.1rem;
  background: var(--gold); color: #fff; box-shadow: 0 4px 0 var(--gold-dark);
}
.pp-cp__icon .pp-ico { width: 1.8rem; height: 1.8rem; }
.pp-cp[data-state="locked"] .pp-cp__icon { background: #cfd5de; box-shadow: 0 4px 0 #b3bbc7; }
.pp-cp__text { flex: 1; min-width: 12rem; }
.pp-cp__title { font-family: var(--pp-head-font); font-weight: 800; font-size: 1.125rem; color: var(--pp-ink); }
.pp-cp__rules { font-size: .875rem; color: #4b5466; }
.pp-cp__hint { margin-top: .2rem; font-size: .8125rem; font-weight: 700; color: #8a5a00; }
.pp-cp__action { flex-shrink: 0; }

.pp-empty { text-align: center; padding: 2.5rem 1rem; }
.pp-empty__title { font-family: var(--pp-head-font); font-weight: 800; font-size: 1.125rem; color: var(--brand-navy); }
.pp-empty__text { color: var(--pp-muted); }

/* ==========================================================================
   Landing page (anonymous "/")
   ========================================================================== */
.lp { overflow: hidden; }
.lp-wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.lp-eyebrow { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-teal-dark); }
.lp-h2 { margin-top: .35rem; font-family: var(--pp-head-font); font-weight: 800; font-size: 1.75rem; line-height: 1.2; color: var(--pp-ink); }
.lp-lead { margin-top: .6rem; max-width: 44rem; font-size: 1.0625rem; line-height: 1.6; color: var(--pp-muted); }
@media (min-width: 768px) { .lp-h2 { font-size: 2.25rem; } }

.lp-hero {
  position: relative; padding: 2.5rem 0 3.5rem;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(42, 157, 143, .16), transparent 60%),
    radial-gradient(36rem 18rem at -8% 62%, rgba(245, 184, 46, .14), transparent 65%);
}
.lp-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .lp-hero { padding: 4rem 0 5rem; } .lp-hero__grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; } }
.lp-kicker {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 9999px;
  background: #fff; border: 1px solid var(--pp-line); box-shadow: var(--pp-shadow);
  font-size: .8125rem; font-weight: 800; color: var(--brand-navy);
}
.lp-kicker .pp-ico { color: var(--gold); }
.lp-hero__title {
  margin-top: 1.1rem; font-family: var(--pp-head-font); font-weight: 800; letter-spacing: -.01em;
  font-size: 2.375rem; line-height: 1.08; color: var(--pp-ink);
}
@media (min-width: 640px) { .lp-hero__title { font-size: 3rem; } }
@media (min-width: 1024px) { .lp-hero__title { font-size: 3.5rem; } }
.lp-hero__accent { display: block; color: var(--brand-teal); }
.lp-hero__lead { margin-top: 1.1rem; max-width: 34rem; font-size: 1.125rem; line-height: 1.6; color: var(--pp-muted); }
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.lp-cta { box-shadow: 0 5px 0 var(--btn-edge), 0 16px 30px -14px rgba(31, 122, 111, .8); }
.lp-hero__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.5rem; }
.lp-hero__facts li { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 700; color: #3b4456; }
.lp-hero__facts .pp-ico { color: var(--brand-teal); }

.lp-hero__visual { position: relative; display: grid; place-items: center; min-height: 22rem; }
.lp-hero__visual::before {
  content: ""; position: absolute; width: 22rem; height: 22rem; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  background: linear-gradient(135deg, #dff3ef, #fdf1cf); z-index: 0;
}
.lp-hero__mascot { position: relative; z-index: 1; width: min(30rem, 100%); height: auto; filter: drop-shadow(0 24px 30px rgba(27, 31, 42, .12)); }
.lp-hero__visual:has(.lp-hero__mascot)::before { width: 24rem; height: 24rem; }
.lp-demo {
  position: relative; z-index: 1; width: min(21rem, 92%); padding: 1rem; border-radius: 1.5rem;
  background: #fff; border: 1px solid var(--pp-line); box-shadow: var(--pp-shadow-lg); rotate: 1.5deg;
}
.lp-demo__band {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1rem; border-radius: 1.1rem;
  background: linear-gradient(135deg, #fde68a 0%, var(--belt-yellow) 55%, #eab308 100%); color: #422006;
  box-shadow: 0 4px 0 var(--belt-yellow-edge);
}
.lp-demo__band img { width: 3.6rem; height: 3.6rem; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .2)); }
.lp-demo__eyebrow { font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.lp-demo__title { font-family: var(--pp-head-font); font-weight: 800; font-size: 1.25rem; line-height: 1.1; }
.lp-demo__sub { font-size: .8125rem; font-weight: 800; }
.lp-demo__track { --zig-scale: .8; gap: 1rem; padding: 1.25rem 0 .25rem; }
.lp-demo__track .path-node { --node-size: 3.6rem; pointer-events: none; }
.lp-demo__track .path-node__label { font-size: .75rem; }
.lp-float {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: 1rem;
  background: #fff; border: 1px solid var(--pp-line); box-shadow: var(--pp-shadow-lg);
  font-size: .8125rem; font-weight: 700; color: var(--pp-muted);
  animation: lp-float 5s ease-in-out infinite;
}
.lp-float strong { font-family: var(--pp-head-font); font-size: 1.05rem; color: var(--pp-ink); }
.lp-float .pp-ico { width: 1.35rem; height: 1.35rem; }
.lp-float--streak { left: 0; top: 18%; }
.lp-float--streak .pp-ico { color: #f2690d; }
.lp-float--xp { right: 0; bottom: 14%; animation-delay: -2.5s; }
.lp-float--xp .pp-ico { color: #d99a06; }
@keyframes lp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.lp-section { padding: 3rem 0; }
@media (min-width: 900px) { .lp-section { padding: 4.5rem 0; } }
.lp-section--belts { background: #fff; border-block: 1px solid var(--pp-line); }

.lp-steps { display: grid; gap: 1rem; margin-top: 1.75rem; counter-reset: step; }
@media (min-width: 768px) { .lp-steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.lp-step {
  position: relative; padding: 1.4rem 1.3rem 1.5rem; border-radius: 1.5rem;
  background: #fff; border: 1px solid var(--pp-line); box-shadow: var(--pp-shadow);
}
.lp-step__num {
  position: absolute; top: 1rem; right: 1.1rem; font-family: var(--pp-head-font); font-weight: 800; font-size: 2.5rem; line-height: 1;
  color: color-mix(in srgb, var(--belt) 22%, #fff);
}
.lp-step__icon {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1.1rem;
  background: var(--belt); color: #fff; box-shadow: 0 4px 0 var(--belt-edge);
}
.lp-step__icon .pp-ico { width: 1.6rem; height: 1.6rem; }
.lp-step__title { margin-top: 1rem; font-family: var(--pp-head-font); font-weight: 800; font-size: 1.25rem; color: var(--pp-ink); }
.lp-step__text { margin-top: .4rem; font-size: .9375rem; line-height: 1.6; color: var(--pp-muted); }

.lp-belts { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; margin-top: 1.75rem; }
@media (min-width: 900px) { .lp-belts { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
.lp-belt {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 1.25rem; background: #fff; border: 1px solid var(--pp-line);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--pp-stripe, #94a3b8) 45%, #d3cec3), var(--pp-shadow);
  transition: transform .15s ease;
}
.lp-belt:hover { transform: translateY(-3px); }
.lp-belt__art { display: block; width: 100%; aspect-ratio: 3 / 1; height: auto; object-fit: cover; background: var(--pp-tint, #eef0f3); }
.lp-belt--badge { flex-direction: row; align-items: center; gap: .85rem; padding: .9rem 1rem; }
.lp-belt--badge .lp-belt__art { width: 3.5rem; height: 3.5rem; aspect-ratio: 1; background: none; object-fit: contain; flex-shrink: 0; }
.lp-belt__text { min-width: 0; padding: .75rem 1rem .9rem; }
.lp-belt--badge .lp-belt__text { padding: 0; }
.lp-belt__num { font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-muted); }
.lp-belt__name { font-family: var(--pp-head-font); font-weight: 800; font-size: 1.0625rem; line-height: 1.2; color: var(--pp-ink); }
.lp-belt__title { font-size: .8125rem; font-weight: 600; color: #4b5466; line-height: 1.3; }
@media (max-width: 479px) {
  .lp-belt__text { padding: .6rem .75rem .75rem; }
  .lp-belt__name { font-size: .9375rem; }
  .lp-belt__title { font-size: .75rem; }
}

.lp-perks { display: grid; gap: 1rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .lp-perks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-perks { grid-template-columns: repeat(4, 1fr); } }
.lp-perk { display: flex; gap: .85rem; padding: 1.1rem; border-radius: 1.25rem; background: #fff; border: 1px solid var(--pp-line); box-shadow: var(--pp-shadow); }
.lp-perk h3 { font-family: var(--pp-head-font); font-weight: 800; color: var(--pp-ink); }
.lp-perk p { margin-top: .15rem; font-size: .875rem; line-height: 1.5; color: var(--pp-muted); }
.lp-perk__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: .9rem; }
.lp-perk__icon .pp-ico { width: 1.45rem; height: 1.45rem; }
.lp-perk__icon--flame { background: #ffe0c7; color: #f2690d; }
.lp-perk__icon--target { background: var(--brand-teal-light); color: var(--brand-teal-dark); }
.lp-perk__icon--users { background: var(--brand-navy-light); color: var(--brand-navy); }
.lp-perk__icon--medal { background: #ffedb0; color: #c98f0a; }

.lp-final { padding-bottom: 3.5rem; }
.lp-final__card {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.75rem 1.5rem; border-radius: 1.75rem; color: #fff;
  background: radial-gradient(30rem 14rem at 100% 0%, rgba(42, 157, 143, .55), transparent 70%), linear-gradient(135deg, #1f3a5f, #152a46);
  box-shadow: 0 6px 0 #0f1c2e, var(--pp-shadow-lg);
}
@media (min-width: 768px) { .lp-final__card { padding: 2.25rem 2.5rem; } }
.lp-final__title { font-family: var(--pp-head-font); font-weight: 800; font-size: 1.75rem; line-height: 1.2; }
.lp-final__text { margin-top: .3rem; color: rgba(255, 255, 255, .8); }

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pp-stat--streak .pp-stat__icon .pp-ico, .lp-float { animation: none !important; }
  .pp-hero__badge:hover, summary.pp-band:hover .pp-art, .lp-belt:hover, .pp-stat:hover { transform: none; }
}