/* Proving Grounds deep dive: branching paths and experimental chambers. */

.pg-page {
    --pg-violet: #6258c8;
    --pg-blue: #557fc7;
    --pg-cyan: #70b7ca;
    --pg-gold: #c9a45a;
    --pg-stone: #17162a;
    --pg-panel: rgba(16, 17, 35, .82);
    --pg-panel-soft: rgba(26, 27, 52, .72);
    color: var(--fg-2);
}

.pg-page :where(button, a) { -webkit-tap-highlight-color: transparent; }

.pg-page :where(button, a, input):focus-visible {
    outline: 2px solid var(--active-chapter-text, #c9c5ff);
    outline-offset: 4px;
}

.pg-hero,
.pg-chapter {
    position: relative;
    scroll-margin-top: 84px;
}

.pg-hero {
    min-height: max(900px, 100svh);
    padding: clamp(120px, 15vh, 180px) 0 96px;
}

.pg-hero-grid {
    align-items: center;
    display: grid;
    gap: clamp(44px, 6vw, 96px);
    grid-template-columns: minmax(300px, .78fr) minmax(560px, 1.22fr);
}

.pg-hero-copy { max-width: 650px; }

.pg-hero h1,
.pg-chapter-head h2,
.pg-final-cta h2 {
    color: var(--fg-1);
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: .96;
    margin: 0;
}

.pg-hero h1 { font-size: clamp(70px, 7.8vw, 134px); text-wrap: balance; }

.pg-lede {
    color: var(--fg-2);
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.55;
    margin: 28px 0 0;
    max-width: 690px;
}

.pg-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.pg-release-note {
    align-items: center;
    color: var(--fg-3);
    display: flex;
    flex-wrap: wrap;
    font: 500 13px/1.6 var(--font-sans);
    gap: 10px;
    margin: 20px 0 0;
}

.pg-status,
.pg-tier {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 99px;
    display: inline-flex;
    font: 700 10px/1 var(--font-sans);
    letter-spacing: .1em;
    min-height: 27px;
    padding: 7px 10px;
    text-transform: uppercase;
}

.pg-status--planned { background: rgba(111, 126, 160, .1); color: #b5bfd7; }
.pg-status--development { background: rgba(116, 101, 210, .12); color: #c8bdf5; }
.pg-tier { border-color: rgba(201, 196, 240, .2); color: var(--fg-3); margin-left: 7px; }

.pg-concept {
    background:
        linear-gradient(145deg, rgba(98, 88, 200, .18), transparent 44%),
        linear-gradient(180deg, rgba(19, 20, 43, .94), rgba(10, 12, 26, .86));
    border: 1px solid color-mix(in srgb, var(--active-chapter-frame, var(--pg-violet)) 58%, rgba(255,255,255,.08));
    border-radius: 24px;
    box-shadow: 0 30px 84px rgba(0, 0, 0, .3), inset 0 1px rgba(255,255,255,.035);
    overflow: hidden;
    padding: clamp(24px, 3vw, 42px);
    position: relative;
}

.pg-concept::before {
    background: radial-gradient(circle, var(--active-chapter-glow, rgba(98,88,200,.34)), transparent 67%);
    content: "";
    height: 260px;
    opacity: .54;
    pointer-events: none;
    position: absolute;
    right: -105px;
    top: -125px;
    width: 260px;
}

.pg-concept-label {
    color: var(--active-chapter-text, #c9c5ff);
    font: 700 10px/1.2 var(--font-sans);
    letter-spacing: .16em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.pg-concept-note {
    color: var(--fg-3);
    font: 500 11px/1.6 var(--font-sans);
    margin: 20px 0 0;
}

.pg-demo-head,
.pg-scenario-head {
    align-items: end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    position: relative;
}

.pg-demo-head h2,
.pg-scenario-head h3 {
    color: var(--fg-1);
    font: 500 clamp(28px, 2.8vw, 44px)/1.06 var(--font-display);
    margin: 4px 0 0;
    max-width: 580px;
}

.pg-canon-flow {
    display: grid;
    gap: 13px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
}

.pg-canon-flow li {
    background: rgba(6, 8, 18, .52);
    border: 1px solid rgba(201, 196, 240, .14);
    border-radius: 15px;
    min-height: 180px;
    padding: 20px;
    position: relative;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.pg-canon-flow li:not(:last-child)::after {
    color: rgba(201,196,240,.48);
    content: "›";
    font: 500 24px var(--font-sans);
    position: absolute;
    right: -11px;
    top: calc(50% - 14px);
    z-index: 2;
}

.pg-canon-flow li:nth-child(2)::after { display: none; }

.pg-canon-flow span { color: var(--active-chapter-text); display: block; font: 700 10px var(--font-sans); letter-spacing: .1em; }
.pg-canon-flow strong { color: var(--fg-1); display: block; font: 500 20px/1.15 var(--font-display); margin: 28px 0 10px; }
.pg-canon-flow small { color: var(--fg-3); display: block; font: 500 11px/1.5 var(--font-sans); }
.pg-canon-flow li.is-active { border-color: var(--active-chapter-text); box-shadow: 0 0 30px var(--active-chapter-glow); transform: translateY(-3px); }

.pg-result-boundary {
    align-items: center;
    background: linear-gradient(90deg, rgba(98,88,200,.15), rgba(8,10,22,.56));
    border: 1px solid rgba(201,196,240,.2);
    border-radius: 14px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-top: 18px;
    padding: 18px 20px;
}

.pg-result-boundary span { color: var(--active-chapter-text); font: 700 9px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; }
.pg-result-boundary strong { color: var(--fg-1); font: 600 13px/1.4 var(--font-sans); text-align: right; }

.pg-chapter { min-height: 100svh; padding: clamp(100px, 13vh, 164px) 0; }
.pg-chapter-inner { position: relative; }

.pg-chapter-head {
    align-items: start;
    display: grid;
    gap: clamp(24px, 4vw, 60px);
    grid-template-columns: 90px minmax(0, 900px);
    margin-bottom: clamp(52px, 8vh, 96px);
}

.pg-chapter-number {
    border-top: 1px solid var(--active-chapter-frame);
    color: var(--active-chapter-text);
    font: 500 13px var(--font-sans);
    letter-spacing: .16em;
    padding-top: 14px;
}

.pg-chapter-head h2 { font-size: clamp(52px, 6.2vw, 100px); }
.pg-chapter-head p { color: var(--fg-2); font-size: clamp(19px, 1.8vw, 26px); line-height: 1.55; margin: 24px 0 0; max-width: 850px; }

.pg-conversation-grid,
.pg-state-grid {
    align-items: center;
    display: grid;
    gap: clamp(38px, 5vw, 78px);
    grid-template-columns: minmax(300px, .58fr) minmax(600px, 1.42fr);
}

.pg-copy-column,
.pg-state-copy { padding: clamp(8px, 2vw, 30px); }
.pg-copy-column p,
.pg-state-copy p { color: var(--fg-2); font-size: 17px; line-height: 1.75; margin: 24px 0 0; }

.pg-rune-list { display: grid; gap: 10px; list-style: none; margin: 30px 0 0; padding: 0; }
.pg-rune-list li { align-items: center; border-bottom: 1px solid rgba(201,196,240,.13); color: var(--fg-1); display: flex; font: 600 13px var(--font-sans); gap: 12px; padding: 12px 4px; }
.pg-rune-list li::before { color: var(--active-chapter-text); content: "◇"; }

.pg-dialogue-context {
    background: rgba(7, 9, 21, .48);
    border: 1px solid rgba(201,196,240,.14);
    border-radius: 13px;
    display: grid;
    gap: 5px;
    padding: 17px 20px;
}

.pg-dialogue-context span,
.pg-dialogue-line > span,
.pg-dialogue-outcomes article > span,
.pg-quest-title > span,
.pg-state-result > span,
.pg-scenario-panels article > span,
.pg-decision-result > span {
    color: var(--active-chapter-text);
    font: 700 9px var(--font-sans);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.pg-dialogue-context strong { color: var(--fg-1); font: 600 14px var(--font-sans); }
.pg-dialogue-context small { color: var(--fg-3); font: 500 10px var(--font-sans); }
.pg-dialogue-line { border-left: 2px solid var(--active-chapter-accent); margin: 28px 0; padding: 8px 0 8px 24px; }
.pg-dialogue-line blockquote { color: var(--fg-1); font: 500 clamp(25px, 2.5vw, 40px)/1.25 var(--font-display); margin: 12px 0 0; }

.pg-choice-list,
.pg-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pg-choice-list button,
.pg-segmented button {
    background: rgba(7, 9, 20, .58);
    border: 1px solid rgba(201,196,240,.18);
    border-radius: 99px;
    color: var(--fg-3);
    cursor: pointer;
    font: 700 11px/1.2 var(--font-sans);
    min-height: 42px;
    padding: 11px 16px;
}

.pg-choice-list button:hover,
.pg-segmented button:hover { border-color: var(--active-chapter-text); color: var(--fg-1); }

.pg-choice-list button[aria-selected="true"],
.pg-segmented button[aria-selected="true"] {
    background: color-mix(in srgb, var(--active-chapter-accent) 28%, rgba(10,12,26,.9));
    border-color: var(--active-chapter-text);
    box-shadow: 0 0 24px var(--active-chapter-glow);
    color: var(--fg-1);
}

.pg-dialogue-outcomes { margin-top: 24px; }
.pg-dialogue-outcomes article { background: rgba(35, 34, 72, .34); border: 1px solid rgba(201,196,240,.14); border-radius: 15px; min-height: 170px; padding: 24px; }
.pg-dialogue-outcomes strong { color: var(--fg-1); display: block; font: 500 clamp(24px, 2.3vw, 36px)/1.18 var(--font-display); margin: 12px 0; }
.pg-dialogue-outcomes p { color: var(--fg-3); font: 500 12px/1.6 var(--font-sans); margin: 0; }

.pg-media-slot { margin: clamp(48px, 7vh, 80px) auto 0; min-width: 0; width: min(100%, 980px); }
.pg-media-slot > div { align-items: center; aspect-ratio: 16 / 7; background: linear-gradient(135deg, rgba(57,51,111,.27), rgba(7,9,20,.6)), repeating-linear-gradient(135deg, transparent 0 32px, rgba(201,196,240,.026) 33px 34px); border: 1px dashed color-mix(in srgb, var(--active-chapter-frame) 64%, transparent); border-radius: 18px; display: flex; flex-direction: column; justify-content: center; min-height: 190px; padding: 30px; text-align: center; }
.pg-media-slot > div span { color: var(--active-chapter-text); font: 700 9px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; }
.pg-media-slot > div strong { color: var(--fg-1); font: 500 clamp(22px, 2vw, 34px)/1.1 var(--font-display); margin-top: 12px; }
.pg-media-slot figcaption { color: var(--fg-3); font: 500 11px/1.55 var(--font-sans); padding: 12px 10px 0; }
.pg-media-slot--wide { width: 100%; }
.pg-media-slot--wide > div { aspect-ratio: 21 / 6; }

.pg-quest-layout {
    align-items: stretch;
    display: grid;
    gap: clamp(30px, 4vw, 58px);
    grid-template-columns: minmax(620px, 1.35fr) minmax(300px, .65fr);
}

.pg-quest-title h3,
.pg-state-demo h3 { color: var(--fg-1); font: 500 clamp(32px, 3vw, 50px)/1.06 var(--font-display); margin: 8px 0; }
.pg-quest-title p { color: var(--fg-3); font: 500 12px/1.6 var(--font-sans); margin: 0; }
.pg-condition-controls { border: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0; padding: 0; }
.pg-condition-controls legend { color: var(--fg-2); font: 700 11px var(--font-sans); margin-bottom: 10px; }
.pg-condition-controls label { align-items: start; background: rgba(7,9,20,.48); border: 1px solid rgba(201,196,240,.14); border-radius: 13px; cursor: pointer; display: flex; gap: 12px; min-height: 102px; padding: 16px; }
.pg-condition-controls label:has(input:focus-visible),
.pg-state-board label:has(input:focus-visible) { outline: 2px solid var(--active-chapter-text); outline-offset: 3px; }
.pg-condition-controls input { accent-color: var(--active-chapter-accent); height: 19px; margin: 1px 0 0; width: 19px; }
.pg-condition-controls span { display: grid; gap: 6px; }
.pg-condition-controls strong { color: var(--fg-1); font: 600 12px var(--font-sans); }
.pg-condition-controls small { color: var(--fg-3); font: 500 10px/1.4 var(--font-sans); }

.pg-quest-path { align-items: stretch; display: grid; gap: 10px; grid-template-columns: minmax(120px,.6fr) auto minmax(180px,1.2fr) auto minmax(120px,.7fr); }
.pg-quest-path > div { background: rgba(36,34,72,.32); border: 1px solid rgba(201,196,240,.16); border-radius: 13px; display: flex; flex-direction: column; justify-content: center; min-height: 126px; padding: 18px; }
.pg-quest-path > i { align-self: center; color: var(--active-chapter-text); font-style: normal; }
.pg-quest-path span { color: var(--active-chapter-text); font: 700 8px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.pg-quest-path strong { color: var(--fg-1); font: 600 13px/1.4 var(--font-sans); margin-top: 9px; }
.pg-quest-path small { color: var(--fg-3); font: 500 10px/1.5 var(--font-sans); margin-top: 8px; }
.pg-live-status { color: var(--active-chapter-text); font: 500 12px/1.5 var(--font-sans); margin: 18px 0 0; min-height: 20px; }

.pg-quest-copy { background: linear-gradient(180deg, rgba(27,28,52,.78), rgba(11,13,27,.72)); border-bottom: 1px solid rgba(201,196,240,.16); border-top: 1px solid rgba(201,196,240,.16); padding: clamp(30px, 4vw, 50px); }
.pg-quest-copy h3 { color: var(--fg-1); font: 500 clamp(32px, 3vw, 48px)/1.06 var(--font-display); margin: 20px 0; }
.pg-quest-copy > p { color: var(--fg-2); font-size: 15px; line-height: 1.7; }
.pg-audience-notes { display: grid; gap: 8px; margin-top: 26px; }
.pg-audience-notes span { border-left: 1px solid var(--active-chapter-frame); color: var(--fg-3); display: grid; font: 500 11px/1.5 var(--font-sans); gap: 3px; padding: 8px 0 8px 14px; }
.pg-audience-notes strong { color: var(--fg-1); }

.pg-state-board { display: grid; gap: 9px; margin-top: 28px; }
.pg-state-board label { align-items: center; background: rgba(7,9,20,.5); border: 1px solid rgba(201,196,240,.14); border-radius: 13px; cursor: pointer; display: grid; gap: 14px; grid-template-columns: minmax(150px,1fr) auto 44px; min-height: 72px; padding: 13px 16px; }
.pg-state-board label > span { display: grid; gap: 3px; }
.pg-state-board strong { color: var(--fg-1); font: 600 12px var(--font-sans); }
.pg-state-board small { color: var(--fg-3); font: 500 9px var(--font-sans); text-transform: uppercase; }
.pg-state-board input { opacity: 0; position: absolute; }
.pg-state-board i { background: rgba(6,8,18,.8); border: 1px solid rgba(201,196,240,.24); border-radius: 99px; display: block; height: 24px; position: relative; width: 44px; }
.pg-state-board i::after { background: var(--fg-3); border-radius: 50%; content: ""; height: 16px; left: 3px; position: absolute; top: 3px; transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; width: 16px; }
.pg-state-board input:checked + i::after { background: var(--active-chapter-text); box-shadow: 0 0 14px var(--active-chapter-glow); transform: translateX(20px); }
.pg-state-board b { color: var(--active-chapter-text); font: 700 10px var(--font-sans); text-align: right; }
.pg-state-result { background: linear-gradient(145deg, rgba(80,72,160,.22), rgba(7,9,20,.55)); border: 1px solid rgba(201,196,240,.2); border-radius: 16px; margin-top: 22px; padding: 24px; }
.pg-state-result strong { color: var(--fg-1); display: block; font: 500 clamp(23px, 2.4vw, 38px)/1.15 var(--font-display); margin: 12px 0; }
.pg-state-result p { color: var(--fg-3); font: 500 11px/1.6 var(--font-sans); margin: 0; }

.pg-segmented { justify-content: flex-end; max-width: 650px; }
.pg-scenario-panels { margin-top: 36px; }
.pg-scenario-panels article { background: linear-gradient(135deg, rgba(42,39,85,.42), rgba(7,9,20,.45)); border: 1px solid rgba(201,196,240,.14); border-radius: 18px; min-height: 280px; padding: clamp(28px, 4vw, 48px); }
.pg-scenario-panels h4 { color: var(--fg-1); font: 500 clamp(32px, 3.2vw, 52px)/1.07 var(--font-display); margin: 12px 0 18px; }
.pg-scenario-panels p { color: var(--fg-2); font-size: 16px; line-height: 1.7; max-width: 760px; }
.pg-scenario-panels article > div { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pg-scenario-panels b { color: var(--fg-3); font: 700 9px var(--font-sans); letter-spacing: .12em; margin-right: 4px; text-transform: uppercase; }
.pg-scenario-panels em { border: 1px solid rgba(201,196,240,.16); border-radius: 99px; color: var(--fg-2); font: 600 10px var(--font-sans); padding: 8px 11px; }

.pg-system-definitions { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 34px; }
.pg-system-definitions article { background: rgba(13,15,31,.68); border: 1px solid rgba(201,196,240,.14); border-radius: 17px; padding: 28px; }
.pg-system-definitions span { color: var(--active-chapter-text); font: 700 9px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; }
.pg-system-definitions h3 { color: var(--fg-1); font: 500 29px/1.1 var(--font-display); margin: 12px 0; }
.pg-system-definitions p { color: var(--fg-3); font-size: 13px; line-height: 1.6; margin: 0; }

.pg-development-note { align-items: center; border-top: 1px solid rgba(201,196,240,.15); display: grid; gap: 44px; grid-template-columns: minmax(300px,.7fr) minmax(560px,1.3fr); margin-top: clamp(70px,10vh,118px); padding-top: clamp(60px,8vh,96px); }
.pg-development-note h3 { color: var(--fg-1); font: 500 clamp(34px,3.4vw,52px)/1.06 var(--font-display); margin: 20px 0; }
.pg-development-note p { color: var(--fg-2); font-size: 15px; line-height: 1.7; }
.pg-media-pair { display: grid; gap: 18px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.pg-media-pair .pg-media-slot { margin: 0; width: 100%; }
.pg-media-pair .pg-media-slot > div { aspect-ratio: 4 / 3; }

.pg-decision-grid { display: grid; gap: clamp(30px,4vw,58px); grid-template-columns: minmax(600px,1.25fr) minmax(320px,.75fr); }
.pg-decision-result h3 { color: var(--fg-1); font: 500 clamp(30px,3vw,48px)/1.12 var(--font-display); margin: 14px 0; }
.pg-decision-result p { color: var(--fg-2); font-size: 15px; line-height: 1.7; }
.pg-decision-path { display: grid; gap: 10px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 28px; }
.pg-decision-path button { background: rgba(7,9,20,.54); border: 1px solid rgba(201,196,240,.16); border-radius: 14px; color: var(--fg-2); cursor: pointer; min-height: 126px; padding: 18px; text-align: left; }
.pg-decision-path button:hover,
.pg-decision-path button[aria-pressed="true"] { background: rgba(98,88,200,.18); border-color: var(--active-chapter-text); box-shadow: 0 0 24px var(--active-chapter-glow); }
.pg-decision-path span { color: var(--active-chapter-text); display: block; font: 700 9px var(--font-sans); letter-spacing: .12em; margin-bottom: 15px; text-transform: uppercase; }
.pg-decision-path strong { color: var(--fg-1); font: 600 12px/1.45 var(--font-sans); }
.pg-authority-panel { background: linear-gradient(180deg,rgba(28,28,54,.8),rgba(10,12,25,.72)); border-bottom: 1px solid rgba(201,196,240,.16); border-top: 1px solid rgba(201,196,240,.16); padding: clamp(34px,4vw,56px); }
.pg-authority-panel h3 { color: var(--fg-1); font: 500 clamp(32px,3vw,48px)/1.08 var(--font-display); margin: 14px 0 24px; }
.pg-authority-panel > p { color: var(--fg-2); font-size: 15px; line-height: 1.7; }
.pg-authority-flow { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; margin: 26px 0; }
.pg-authority-flow span { border: 1px solid rgba(201,196,240,.16); border-radius: 99px; color: var(--fg-1); font: 600 10px var(--font-sans); padding: 8px 10px; }
.pg-authority-flow i { color: var(--active-chapter-text); font-style: normal; }

.pg-hosting-note { align-items: center; background: rgba(13,15,31,.72); border: 1px solid rgba(201,196,240,.14); border-radius: 20px; display: grid; gap: 40px; grid-template-columns: .9fr 1.1fr; margin-top: 34px; padding: clamp(30px,4vw,52px); }
.pg-hosting-note h3 { color: var(--fg-1); font: 500 clamp(29px,3vw,46px)/1.08 var(--font-display); margin: 18px 0 0; }
.pg-hosting-note p { border-left: 1px solid var(--active-chapter-frame); color: var(--fg-2); font-size: 14px; line-height: 1.65; margin: 0 0 12px; padding-left: 18px; }
.pg-hosting-note strong { color: var(--fg-1); }

.pg-final-cta { border-top: 1px solid rgba(201,196,240,.18); margin-top: clamp(90px,13vh,150px); padding: clamp(74px,10vh,118px) clamp(20px,4vw,60px) 10px; text-align: center; }
.pg-final-cta h2 { font-size: clamp(54px,6vw,96px); margin-top: 14px; }
.pg-final-cta p { color: var(--fg-2); font-size: clamp(18px,1.8vw,24px); line-height: 1.6; margin: 26px auto 0; max-width: 790px; }
.pg-final-cta > div { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }

html.pg-enhanced [data-pg-run] { display: inline-flex; }
html.pg-enhanced [data-pg-decision] { display: flex; flex-direction: column; }

html.pg-enhanced [data-pg-panel][hidden] { display: none; }

@media (max-width: 1180px) {
    .pg-hero-grid,
    .pg-conversation-grid,
    .pg-state-grid,
    .pg-quest-layout,
    .pg-development-note,
    .pg-decision-grid { grid-template-columns: 1fr; }
    .pg-hero-copy { max-width: 820px; }
    .pg-quest-copy { max-width: none; }
    .pg-development-note { align-items: start; }
}

@media (max-width: 767px) {
    .pg-hero { min-height: auto; padding: 112px 0 74px; }
    .pg-hero-grid { gap: 42px; }
    .pg-hero h1 { font-size: clamp(58px,18vw,86px); }
    .pg-lede { font-size: 19px; }
    .pg-chapter { min-height: auto; padding: 88px 0; }
    .pg-chapter-head { gap: 18px; grid-template-columns: 44px minmax(0,1fr); margin-bottom: 50px; }
    .pg-chapter-number { font-size: 10px; }
    .pg-chapter-head h2 { font-size: clamp(43px,13vw,66px); }
    .pg-chapter-head p { font-size: 18px; }
    .pg-concept { border-radius: 18px; padding: 22px; }
    .pg-demo-head,
    .pg-scenario-head { align-items: stretch; flex-direction: column; }
    .pg-canon-flow { grid-template-columns: 1fr; }
    .pg-canon-flow li { min-height: auto; padding: 18px; }
    .pg-canon-flow li::after { bottom: -18px; left: 22px; right: auto !important; top: auto !important; transform: rotate(90deg); }
    .pg-canon-flow li:nth-child(2)::after { display: block; }
    .pg-canon-flow strong { margin-top: 15px; }
    .pg-result-boundary { align-items: flex-start; flex-direction: column; }
    .pg-result-boundary strong { text-align: left; }
    .pg-choice-list,
    .pg-segmented { display: grid; grid-template-columns: 1fr; width: 100%; }
    .pg-choice-list button,
    .pg-segmented button { border-radius: 11px; text-align: left; white-space: normal; }
    .pg-condition-controls,
    .pg-system-definitions,
    .pg-decision-path,
    .pg-media-pair { grid-template-columns: 1fr; }
    .pg-quest-path { grid-template-columns: 1fr; }
    .pg-quest-path > i { transform: rotate(90deg); }
    .pg-state-board label { grid-template-columns: minmax(120px,1fr) auto 42px; }
    .pg-media-slot > div,
    .pg-media-slot--wide > div { aspect-ratio: auto; min-height: 190px; }
    .pg-hosting-note { grid-template-columns: 1fr; }
    .pg-final-cta { padding-inline: 0; }
}

@media (max-width: 480px) {
    .pg-hero h1 { font-size: 56px; }
    .pg-hero-actions > *,
    .pg-final-cta > div > * { justify-content: center; width: 100%; }
    .pg-chapter-head { grid-template-columns: 1fr; }
    .pg-chapter-number { width: 46px; }
    .pg-copy-column,
    .pg-state-copy { padding-inline: 4px; }
    .pg-state-board label { gap: 9px; padding: 12px; }
    .pg-tier { margin: 7px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-page *,
    .pg-page *::before,
    .pg-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}