.progression-guide { position: relative; overflow: hidden; }
.progression-guide .section { position: relative; }
.pg-hero { padding: var(--space-10) 0 var(--space-9); }
.pg-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: minmax(var(--space-6), 8.333%); align-items: center; }
.pg-hero__copy, .pg-hero__media, .pg-loop__intro, .pg-roadmap__rail, .pg-roadmap__trace, .pg-team__intro, .pg-diagnostics__intro, .pg-preparation__content, .pg-preparation__media, .pg-board__rail, .pg-board__content, .pg-traps__intro, .pg-routing__intro, .pg-final__copy, .pg-final__rune { min-width: 0; }
.pg-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.pg-hero__copy > * { margin: 0; }
.pg-hero__copy h1 { max-width: 10ch; }
.pg-hero__lead { max-width: 37.5rem; font-size: var(--text-18); line-height: 1.56; }
.pg-hero__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); width: 100%; }
.pg-note { min-width: 0; padding: var(--space-3); border-inline-start: 2px solid var(--color-cyan); background: rgba(27, 22, 64, 0.58); }
.pg-note__label { display: block; margin-bottom: var(--space-2); color: var(--color-cyan); font-family: var(--font-heading); font-size: var(--text-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pg-note p { margin: 0; font-size: var(--text-14); line-height: 1.43; }
.pg-hero__actions { width: 100%; }
.pg-hero__media { position: relative; width: calc(100% + var(--space-6)); margin-right: calc(var(--space-6) * -1); }
.pg-hero__media img { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: right center; border: 1px solid var(--color-violet-line); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.pg-hero__media figcaption { position: relative; z-index: 1; }
.pg-hero__portal { position: absolute; z-index: 0; inset: 14% 2% 12% 22%; border: 1px solid rgba(240,42,155,.55); border-radius: 50%; box-shadow: 0 0 52px rgba(240,42,155,.38), inset 0 0 46px rgba(91,231,242,.12); }
.pg-loop__intro { max-width: 42.5rem; }
.pg-loop__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-7); }
.pg-loop-card { min-width: 0; min-height: 100%; padding: var(--space-5); border: 1px solid var(--color-violet-line); background: var(--color-archive); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.pg-loop-card--indigo { background: var(--color-indigo); }
.pg-loop-card__number { display: block; margin-bottom: var(--space-4); color: var(--color-magenta-bright); font-family: var(--font-heading); font-size: var(--text-22); font-weight: 700; }
.pg-loop-card--cyan .pg-loop-card__number { color: var(--color-cyan); }
.pg-loop-card--signal .pg-loop-card__number { color: var(--color-signal); }
.pg-loop-card h3 { font-size: var(--text-22); }
.pg-loop-card p { margin-bottom: 0; font-size: var(--text-14); line-height: 1.5; }
.pg-roadmap__layout { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: var(--space-6); }
.pg-roadmap__framing { max-width: 42.5rem; }
.pg-phase-list { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.pg-phase { min-width: 0; padding: var(--space-5); border: 1px solid var(--color-violet-line); background: var(--color-archive); border-inline-start: 3px solid var(--color-magenta); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.pg-phase--indigo { background: var(--color-indigo); }
.pg-phase--cyan { border-inline-start-color: var(--color-cyan); }
.pg-phase__header { display: flex; align-items: flex-start; gap: var(--space-3); }
.pg-phase__header > * { min-width: 0; }
.pg-phase__header span { color: var(--color-magenta-bright); font-family: var(--font-heading); font-weight: 700; }
.pg-phase--cyan .pg-phase__header span { color: var(--color-cyan); }
.pg-phase__header h3 { margin-bottom: var(--space-4); }
.pg-phase p { max-width: 42.5rem; }
.pg-phase ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: 0; padding-left: 1.25rem; font-size: var(--text-14); }
.pg-roadmap__trace { display: flex; flex-direction: column; justify-content: space-around; align-items: center; border-inline-start: 1px solid var(--color-violet-line); color: var(--color-cyan); font-family: var(--font-heading); font-weight: 700; }
.pg-roadmap__trace span { display: grid; place-items: center; width: 3.5rem; aspect-ratio: 1; border: 1px solid rgba(91,231,242,.45); border-radius: 50%; background: var(--color-void); }
.pg-team__intro { max-width: 42.5rem; }
.pg-team__cards { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-7); }
.pg-team-card { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-5); min-width: 0; padding: var(--space-5); border: 1px solid var(--color-violet-line); border-inline-start: 3px solid var(--color-magenta); background: var(--color-archive); }
.pg-team-card--cyan { border-inline-start-color: var(--color-cyan); }
.pg-team-card__label, .pg-team-card__body { min-width: 0; }
.pg-team-card__body p { max-width: 38.75rem; margin-bottom: 0; }
.pg-team__link { margin-top: var(--space-5); min-height: 2.75rem; }
.pg-diagnostics { overflow: hidden; background: var(--color-indigo); }
.pg-diagnostics::before { position: absolute; top: -14rem; right: -10rem; width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(circle, rgba(240,42,155,.18), transparent 67%); content: ""; pointer-events: none; }
.pg-diagnostics__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
.pg-diagnostics__intro { grid-column: 1 / span 7; }
.pg-diagnostics__intro .lead { max-width: 40.625rem; }
.pg-diagnostics__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.pg-diagnostic-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--color-cyan); background: var(--color-archive); }
.pg-diagnostic-card--violet { border-color: var(--color-violet-line); }
.pg-diagnostic-card--magenta { border-color: var(--color-magenta); }
.pg-diagnostic-card__number { display: block; margin-bottom: var(--space-3); color: var(--color-cyan); font-family: var(--font-heading); font-size: var(--text-22); font-weight: 700; }
.pg-diagnostic-card--magenta .pg-diagnostic-card__number { color: var(--color-magenta-bright); }
.pg-diagnostic-card h3 { font-size: var(--text-22); }
.pg-diagnostic-card p { margin-bottom: 0; font-size: var(--text-14); line-height: 1.5; }
.pg-diagnostics__callout { grid-column: 1 / span 7; margin: 0; }
.pg-preparation__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: start; }
.pg-preparation__content { padding: var(--space-5); border: 1px solid var(--color-violet-line); background: var(--color-archive); }
.pg-preparation__intro { max-width: 40.625rem; }
.pg-preparation__modules { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.pg-prep-module { min-width: 0; padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--color-cyan); }
.pg-prep-module--magenta { border-inline-start-color: var(--color-magenta); }
.pg-prep-module--signal { border-inline-start-color: var(--color-signal); }
.pg-prep-module h3 { font-size: var(--text-22); }
.pg-prep-module p { max-width: 38.75rem; }
.pg-prep-module ul { margin-bottom: 0; font-size: var(--text-14); }
.pg-preparation__media { width: 100%; }
.pg-preparation__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: right top; border: 1px solid var(--color-violet-line); }
.pg-board__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: var(--space-5); }
.pg-board__rail { padding-top: var(--space-3); border-inline-end: 1px solid var(--color-violet-line); }
.pg-board__intro { max-width: 40.625rem; }
.pg-board__rows { display: flex; flex-direction: column; margin-top: var(--space-6); border-top: 1px solid var(--color-violet-line); }
.pg-board-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 6fr); gap: var(--space-4); min-width: 0; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-violet-line); }
.pg-board-row > * { min-width: 0; }
.pg-board-row__number { color: var(--color-magenta-bright); font-family: var(--font-heading); font-size: var(--text-22); font-weight: 700; }
.pg-board-row h3 { margin: 0; font-size: var(--text-22); }
.pg-board-row p { margin: 0; }
.pg-board-row--cyan { border-inline-start: 2px solid var(--color-cyan); padding-inline-start: var(--space-3); }
.pg-board-row--magenta { border-inline-start: 2px solid var(--color-magenta); padding-inline-start: var(--space-3); }
.pg-board-row--signal { border-inline-start: 2px solid var(--color-signal); padding-inline-start: var(--space-3); }
.pg-board__closing { margin-top: var(--space-5); }
.pg-traps__intro { max-width: 40.625rem; }
.pg-traps__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-7); }
.pg-trap-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--color-violet-line); border-inline-start: 3px solid var(--color-magenta); background: var(--color-archive); }
.pg-trap-card--cyan { border-inline-start-color: var(--color-cyan); }
.pg-trap-card--indigo { border-inline-start-color: var(--color-magenta-bright); background: var(--color-indigo); }
.pg-trap-card h3 { font-size: var(--text-22); }
.pg-trap-card p { font-size: var(--text-14); line-height: 1.5; }
.pg-trap-card strong { display: block; color: var(--color-cyan); font-size: var(--text-14); }
.pg-routing__intro { max-width: 38.75rem; }
.pg-routing__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-7); }
.pg-route-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 100%; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-violet-line); background: var(--color-archive); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.pg-route-card > * { margin: 0; }
.pg-route-card h3 { font-size: var(--text-22); }
.pg-route-card p { font-size: var(--text-14); line-height: 1.5; }
.pg-route-card__signal { color: var(--color-signal); }
.pg-route-card .link-arrow { margin-top: auto; min-height: 2.75rem; }
.pg-final__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--space-6); width: min(100%, 64.5rem); margin-inline: auto; padding: var(--space-7); border: 1px solid var(--color-magenta); background: linear-gradient(110deg, var(--color-indigo), var(--color-archive)); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); box-shadow: inset 0 0 48px rgba(240,42,155,.08); }
.pg-final__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.pg-final__copy > * { margin: 0; }
.pg-final__copy > p { max-width: 38.75rem; }
.pg-final__actions { width: 100%; }
.pg-final__context { color: var(--color-text-muted); font-size: var(--text-14); }
.pg-final__rune { display: grid; place-content: center; position: relative; min-height: 12rem; }
.pg-final__rune span { position: absolute; width: 10rem; aspect-ratio: 1; border: 1px solid rgba(240,42,155,.55); transform: rotate(45deg); }
.pg-final__rune span:nth-child(2) { width: 6rem; border-color: rgba(91,231,242,.55); }
.pg-final__rune span:nth-child(3) { width: 1rem; border-color: var(--color-magenta-bright); background: rgba(240,42,155,.3); }
@media (max-width: 63.99rem) { .pg-hero__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-5); } .pg-hero__notes { grid-template-columns: 1fr; } .pg-hero__media { width: calc(100% + var(--space-4)); margin-right: calc(var(--space-4) * -1); } .pg-loop__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-diagnostics__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-diagnostics__cards > :nth-child(3) { grid-column: 1 / -1; } .pg-traps__cards, .pg-routing__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-traps__cards > :nth-child(3), .pg-routing__cards > :nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 61.24rem) { .pg-preparation__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-5); } }
@media (max-width: 56.24rem) { .pg-roadmap__layout { grid-template-columns: 1fr; } .pg-roadmap__trace { display: none; } .pg-team-card { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .pg-final__panel { grid-template-columns: 1fr; } .pg-final__rune { display: none; } }
@media (max-width: 51.24rem) { .pg-preparation__grid { grid-template-columns: 1fr; } .pg-preparation__media { order: 0; } .pg-preparation__content { order: 1; } }
@media (max-width: 59.99rem) { .pg-board__layout { grid-template-columns: 1fr; } .pg-board__rail { display: none; } .pg-board-row { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .pg-board-row p { grid-column: 1 / -1; } }
@media (max-width: 47.49rem) { .pg-hero { padding-top: var(--space-8); } .pg-hero__grid, .pg-loop__cards, .pg-diagnostics__cards, .pg-traps__cards, .pg-routing__cards { grid-template-columns: 1fr; } .pg-hero__copy h1 { max-width: none; font-size: clamp(2.375rem, 10vw, 2.625rem); } .pg-hero__media { width: 100%; margin: 0; } .pg-hero__portal { inset: 14% 10%; } .pg-loop__cards, .pg-traps__cards, .pg-routing__cards { margin-top: var(--space-6); } .pg-diagnostics__intro, .pg-diagnostics__cards, .pg-diagnostics__callout { grid-column: 1 / -1; } .pg-diagnostics__cards > :nth-child(3), .pg-traps__cards > :nth-child(3), .pg-routing__cards > :nth-child(3) { grid-column: auto; } .pg-phase { padding: var(--space-4); } .pg-phase ul { grid-template-columns: 1fr; gap: var(--space-2); } .pg-team-card { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); } .pg-team-card__body p, .pg-phase p, .pg-prep-module p { max-width: none; } .pg-diagnostic-card, .pg-trap-card, .pg-route-card { padding: var(--space-4); } .pg-diagnostics__cards { gap: var(--space-3); } .pg-preparation__content { padding: var(--space-4); } .pg-board-row { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; } .pg-board-row p { grid-column: 1 / -1; } .pg-final__panel { padding: var(--space-5); } .pg-hero__actions, .pg-final__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); } .pg-hero__actions .button, .pg-final__actions .button { width: 100%; min-height: 3rem; } }
@media (prefers-reduced-motion: no-preference) { .pg-hero__portal { animation: pg-portal-breathe 5s ease-in-out infinite alternate; } @keyframes pg-portal-breathe { from { opacity: .6; transform: scale(.98); } to { opacity: 1; transform: scale(1.02); } } }