/* Incremental landing-page enhancements: keep the original system, add depth and motion. */
:root {
    --pa-black: #0a0a0a;
    --pa-white: #ffffff;
    --pa-paper: #f6f6f2;
    --pa-green: #00c853;
    --pa-yellow: #facc15;
    --pa-blue: #3b82f6;
    --pa-red: #e1272d;
    --pa-purple: #8b5cf6;
    --pa-display: 'Unbounded', 'Oswald', sans-serif;
    --pa-body: 'Manrope', 'Roboto', sans-serif;
}

html { scroll-padding-top: 76px; overflow-x: clip; }
body { overflow-x: clip; font-family: var(--pa-body); }

.container { isolation: isolate; }

/* Sticky header: the original header, tightened and made persistent. */
.container > header {
    position: sticky;
    top: 0;
    z-index: 1200;
    width: 100vw;
    min-height: 74px;
    margin-left: calc(50% - 50vw);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 12px max(28px, calc((100vw - 1180px) / 2));
    text-align: left;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(10, 10, 10, 0.14);
    box-shadow: none;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.container > header::after { content: none; }
.container > header > a { width: max-content; justify-self: start; }
.container > header .logo {
    margin: 0;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -1.6px;
}

.landing-header-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 7px;
}
.container > header .landing-language-slot {
    position: static;
    margin: 0;
}
.container > header .burger-menu { position: relative; top: auto; right: auto; }
.container > header .burger-button {
    width: 32px;
    height: 32px;
    background: var(--pa-black);
    border: 1px solid var(--pa-black);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(10, 10, 10, 0.14);
}
.container > header .burger-button:hover { background: #232323; transform: none; }
.container > header .burger-line { width: 14px; height: 1.5px; margin: 2px 0; background: var(--pa-white); }
.container > header .burger-button.active .burger-line:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.container > header .burger-button.active .burger-line:nth-child(2) { opacity: 0; }
.container > header .burger-button.active .burger-line:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.container > header .burger-dropdown {
    top: calc(100% + 10px);
    right: 0;
    min-width: 270px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(10, 10, 10, 0.12);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(10, 10, 10, 0.18);
}
.container > header .burger-menu-list { padding: 8px; }
.container > header .burger-menu-link {
    width: 100%;
    min-height: 46px;
    gap: 12px;
    padding: 11px 13px;
    color: var(--pa-black);
    background: transparent;
    border: 0;
    border-radius: 11px;
    font-family: var(--pa-body);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
}
.container > header .burger-menu-link:hover { background: #f0f1ed; transform: none; }
.container > header .burger-menu-link > span {
    color: #8a8c87;
    font-size: 0.58rem;
    font-variant-numeric: tabular-nums;
}
.container > header .burger-menu-item--account { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(10, 10, 10, 0.1); }
.container > header .burger-menu-item form { margin: 0; }
.container > header .burger-menu-link--primary { color: var(--pa-white); background: var(--pa-black); }
.container > header .burger-menu-link--primary:hover { color: var(--pa-white); background: #232323; }

/* One restrained, sector-like route through the whole page. */
.pa-sector-flow {
    position: absolute;
    top: 74px;
    right: calc(50% - 50vw);
    z-index: 8;
    width: 90px;
    height: calc(100% - 74px);
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 0 7px rgba(0, 200, 83, 0.12));
}

.pa-sector-flow__shadow,
.pa-sector-flow__line {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: square;
    stroke-linejoin: miter;
}
.pa-sector-flow__shadow { stroke: rgba(255, 255, 255, 0.62); stroke-width: 4; }
.pa-sector-flow__line {
    stroke: url('#pa-sector-flow-gradient');
    stroke-width: 2;
    stroke-dasharray: 12 8;
    opacity: 0.54;
    animation: pa-sector-flow 18s linear infinite;
}

/* Shared small-label treatment approved in the hero. */
.pa-section-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pa-black);
    font-family: var(--pa-body);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.35;
    text-transform: uppercase;
}
.pa-section-kicker span:first-child { color: #009d42; }
.pa-section-kicker span + span { padding-left: 10px; border-left: 1px solid currentColor; }

/* Layered hero: map and title share the first screen without sacrificing clarity. */
.hero.pa-hero-layered {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(520px, 1.05fr);
    grid-template-areas:
        'kicker map'
        'title map'
        'copy map';
    align-items: start;
    column-gap: clamp(32px, 3vw, 56px);
    row-gap: 20px;
    padding: clamp(56px, 7vw, 92px) max(28px, calc((100vw - 1320px) / 2)) clamp(70px, 8vw, 108px);
    overflow: hidden;
    text-align: left;
    background:
        linear-gradient(rgba(10, 10, 10, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 10, 10, 0.06) 1px, transparent 1px),
        var(--pa-paper);
    background-size: 48px 48px;
}

.pa-hero-kicker { grid-area: kicker; align-self: end; margin: 0; }
.hero.pa-hero-layered h1 {
    grid-area: title;
    position: relative;
    z-index: 4;
    max-width: 100%;
    margin: 8px 0 0;
    padding: 0;
    color: var(--pa-black);
    background: transparent;
    font-family: var(--pa-display);
    font-size: clamp(3rem, 4vw, 4rem);
    font-style: normal;
    font-weight: 650;
    letter-spacing: -0.065em;
    line-height: 1.02;
    text-align: left;
    text-transform: uppercase;
    text-wrap: balance;
}
.hero.pa-hero-layered h1 b,
.hero.pa-hero-layered h1 i { font-style: normal; font-weight: inherit; }
.pa-title-line { display: block; width: max-content; max-width: 100%; white-space: nowrap; }
.pa-title-segment { display: inline; }
.pa-title-width-probe {
    position: absolute;
    width: max-content;
    max-width: none;
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap;
}
html[lang='bg'] .hero.pa-hero-layered h1.is-map-tight .pa-title-line--opening .pa-title-segment {
    display: block;
    width: max-content;
}
html[lang='bg'] .hero.pa-hero-layered h1 { line-height: 1.09; }

@media (min-width: 1021px) {
    html[lang='bg'] .hero.pa-hero-layered h1 {
        font-size: clamp(2.7rem, 3.4vw, 3.2rem);
    }
}

.pa-hero-copy {
    grid-area: copy;
    position: relative;
    z-index: 5;
    max-width: 600px;
    align-self: end;
}
.hero.pa-hero-layered .pa-hero-copy p {
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.hero.pa-hero-layered .pa-hero-purpose {
    color: var(--pa-black);
    font-family: var(--pa-body);
    font-size: clamp(0.92rem, 1.2vw, 1.05rem);
    font-weight: 750;
    line-height: 1.65;
}
.hero.pa-hero-layered .hero-tagline {
    margin-top: 9px;
    color: #5b5d58;
    font-family: var(--pa-body);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    font-weight: 450;
    line-height: 1.7;
}

.hero.pa-hero-layered .sector-demo {
    --hero-map-fade-color: transparent;
    grid-area: map;
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    margin: 28px 0 0;
    padding: 10px;
    isolation: isolate;
    background: var(--pa-white);
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(10, 10, 10, 0.13), 0 3px 12px rgba(10, 10, 10, 0.06);
}
.hero.pa-hero-layered .sector-demo::after { content: none; }
.pa-hero-map__header {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    color: var(--pa-black);
    font-family: var(--pa-body);
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
}
.pa-hero-map__header span:last-child { display: flex; align-items: center; gap: 6px; }
.pa-hero-map__header i { width: 7px; height: 7px; display: block; background: var(--pa-green); border-radius: 50%; box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.1); }
.pa-hero-map__stage { position: relative; overflow: hidden; border: 1px solid rgba(10, 10, 10, 0.1); border-radius: 17px; }
.hero.pa-hero-layered #territory-demo-map {
    width: 100%;
    height: clamp(330px, 37vw, 440px);
    margin: 0;
    border-radius: 0;
    -webkit-mask-image: none;
    mask-image: none;
}
.territory-demo-sector {
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
}
.pa-hero-map__score {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 600;
    min-width: 102px;
    display: grid;
    gap: 1px;
    padding: 9px 10px;
    color: var(--pa-black);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(10, 10, 10, 0.14);
    border-radius: 13px;
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.pa-hero-map__score small { color: var(--pa-black); font-size: 0.5rem; font-weight: 850; letter-spacing: 0.07em; }
.pa-hero-map__score span { color: #646761; font-size: 0.49rem; font-weight: 800; letter-spacing: 0.06em; }
.pa-hero-map__score strong {
    display: block;
    color: var(--pa-black);
    font-family: var(--pa-display);
    font-size: 1.16rem;
    line-height: 1.25;
    transform-origin: left center;
}
.pa-hero-map__score strong.is-rising {
    color: #00a844;
    animation: pa-score-rise 0.42s ease-out;
}
.pa-hero-map__score strong.is-falling {
    color: var(--pa-black);
    animation: none;
    text-shadow: none;
}
.pa-hero-map__score strong.is-peak {
    color: #00a844;
    animation: pa-score-peak 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pa-score-peak {
    0%, 100% { transform: scale(1); }
    48% { transform: scale(1.14); }
}
.pa-hero-map__score span.is-rising { color: #008f3a; }
.pa-hero-map__score span.is-falling { color: #646761; }
.pa-hero-map__legend {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
    gap: 8px;
    padding: 10px 4px 2px;
}
.pa-hero-map__legend span {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    color: var(--pa-black);
    background: #f0f1ed;
    border: 0;
    border-radius: 11px;
    font-size: 0.54rem;
    font-weight: 800;
    text-transform: uppercase;
}
.pa-hero-map__legend i { width: 9px; height: 9px; display: block; border: 1px solid var(--pa-black); }
.pa-hero-map__legend .is-team { background: var(--pa-green); }
.pa-hero-map__legend .is-rival { background: var(--pa-yellow); }
.pa-hero-map__legend .is-contested { background: var(--pa-red); }
.pa-hero-map__legend .is-team-state { background: rgba(0, 200, 83, 0.14); }
.pa-hero-map__legend .is-rival-state { background: rgba(250, 204, 21, 0.17); }
.pa-hero-map__legend .is-contested-state { background: rgba(225, 39, 45, 0.14); }

.hero.pa-hero-layered .pa-hero-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 24px;
}
.hero.pa-hero-layered .pa-hero-actions .action-button {
    width: auto;
    min-width: 165px;
    min-height: 50px;
    display: inline-flex;
    justify-content: space-between;
    gap: 22px;
    padding: 0 18px;
    border-radius: 13px;
    box-shadow: 0 4px 14px rgba(10, 10, 10, 0.06);
    font-family: var(--pa-body);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    text-decoration: none;
}
.hero.pa-hero-layered .pa-action-primary { color: var(--pa-white); background: var(--pa-black); border: 1px solid var(--pa-black); }
.hero.pa-hero-layered .pa-action-secondary { color: var(--pa-black); background: var(--pa-white); border: 1px solid var(--pa-black); }
.hero.pa-hero-layered .pa-action-primary:hover,
.hero.pa-hero-layered .pa-action-secondary:hover { transform: translateY(-2px); letter-spacing: 0; }
.pa-hero-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 18px;
    margin: 14px 0 0;
    padding: 13px 0;
    border-top: 1px solid rgba(10, 10, 10, 0.15);
    border-bottom: 1px solid rgba(10, 10, 10, 0.15);
    list-style: none;
}
.pa-hero-benefits li {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    color: #4f524d;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: var(--pa-body);
    font-size: 0.68rem;
    font-weight: 750;
}
.pa-hero-benefits i { width: 7px; height: 7px; border-radius: 50%; background: var(--pa-green); }
.pa-hero-benefits i.is-blue { background: var(--pa-blue); }
.pa-hero-benefits i.is-yellow { background: var(--pa-yellow); }
.pa-hero-benefits i.is-red { background: var(--pa-red); }
.pa-game-loop {
    position: relative;
    overflow: hidden;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(10, 10, 10, 0.1);
    border-radius: 17px;
    box-shadow: 0 8px 26px rgba(10, 10, 10, 0.045);
}
.pa-game-loop__viewport {
    display: grid;
    overflow: hidden;
}
.pa-game-loop__item {
    grid-area: 1 / 1;
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 78px;
    padding: 12px 14px 18px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-26px, 0, 0);
    transition:
        opacity 0.24s ease,
        transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}
.pa-game-loop__item.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}
.pa-game-loop__item.is-exiting {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transform: translate3d(26px, 0, 0);
}
.pa-game-loop__item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--pa-green);
}
.pa-game-loop__item--run::before { background: var(--pa-yellow); }
.pa-game-loop__item--city::before { background: var(--pa-red); }
.pa-game-loop__item--rewards::before { background: var(--pa-purple); }
.pa-game-loop__number {
    display: block;
    margin: 2px 0 0;
    color: #858984;
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}
.pa-game-loop h3 {
    margin: 0 0 3px;
    color: var(--pa-black);
    font-family: var(--pa-display);
    font-size: clamp(0.86rem, 1.35vw, 1.05rem);
    line-height: 1.08;
}
.pa-game-loop p {
    margin: 0;
    color: #5c605b;
    font-size: clamp(0.62rem, 0.9vw, 0.72rem);
    line-height: 1.45;
}
.pa-game-loop__progress { display: contents; }
.pa-game-loop__controls {
    position: absolute;
    right: 8px;
    bottom: 0;
    left: 8px;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pa-game-loop__controls button {
    position: relative;
    width: auto;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.pa-game-loop__controls button::before,
.pa-game-loop__controls button::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 9px;
    left: 4px;
    width: auto;
    height: 3px;
    border-radius: 999px;
    transform: none;
}
.pa-game-loop__controls button::before { background: rgba(10, 10, 10, 0.14); }
.pa-game-loop__controls button::after {
    background: var(--pa-black);
    transform: scaleX(0);
    transform-origin: left center;
}
.pa-game-loop__controls button.is-active::after { animation: pa-game-loop-progress 3s linear forwards; }
.pa-game-loop[data-active-step='1'] .pa-game-loop__controls button.is-active::after { background: #00a844; }
.pa-game-loop[data-active-step='2'] .pa-game-loop__controls button.is-active::after { background: var(--pa-yellow); }
.pa-game-loop[data-active-step='3'] .pa-game-loop__controls button.is-active::after { background: var(--pa-red); }
.pa-game-loop[data-active-step='4'] .pa-game-loop__controls button.is-active::after { background: var(--pa-purple); }
.pa-game-loop.is-paused .pa-game-loop__controls button.is-active::after { animation-play-state: paused; }
.pa-game-loop.is-manually-selected .pa-game-loop__controls button.is-active::after {
    animation: none;
    transform: scaleX(1);
}
.pa-game-loop__controls button:focus-visible { outline: 2px solid var(--pa-blue); outline-offset: -3px; }
@keyframes pa-game-loop-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
.hero.pa-hero-layered .pa-hero-copy p.pa-strava-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(10, 10, 10, 0.18);
    color: #62645f;
    font-family: var(--pa-body);
    font-size: 0.69rem;
    font-weight: 500;
    line-height: 1.55;
}
.pa-strava-note span { color: #00a844; font-weight: 900; }

/* A compact horizontal signal strip bridges the product promise into the story. */
.pa-marquee {
    position: relative;
    left: 50%;
    z-index: 12;
    width: 100vw;
    margin: -12px 0;
    overflow: hidden;
    min-height: 36px;
    padding: 2px 0;
    color: var(--pa-white);
    background:
        linear-gradient(90deg, rgba(0, 200, 83, 0.08), transparent 28%, transparent 72%, rgba(59, 130, 246, 0.1)),
        var(--pa-black);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    box-shadow: 0 14px 36px rgba(10, 10, 10, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateX(-50%);
    transform-origin: center;
}
.pa-marquee::before { content: none; }
.pa-marquee::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(10,10,10,.9), transparent 8%, transparent 92%, rgba(10,10,10,.9));
}
.pa-marquee__track {
    position: relative;
    width: max-content;
    display: flex;
    align-items: center;
    will-change: transform;
    animation: pa-marquee-diagonal 16s linear infinite;
}
.pa-marquee__group {
    min-width: 100vw;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-around;
    gap: 3px;
}
.pa-marquee span {
    min-height: 26px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: var(--pa-white);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: var(--pa-display);
    font-size: clamp(0.61rem, 0.78vw, 0.72rem);
    font-weight: 600;
    letter-spacing: 0.025em;
    white-space: nowrap;
}
.pa-marquee i { width: 7px; height: 7px; display: block; flex: 0 0 auto; border-radius: 50%; }
.pa-marquee .is-green { border-color: transparent; }
.pa-marquee .is-green i { background: var(--pa-green); }
.pa-marquee .is-blue { border-color: transparent; }
.pa-marquee .is-blue i { background: var(--pa-blue); }
.pa-marquee .is-yellow { border-color: transparent; }
.pa-marquee .is-yellow i { background: var(--pa-yellow); }
.pa-marquee .is-purple { border-color: transparent; }
.pa-marquee .is-purple i { background: var(--pa-purple); }
.pa-marquee .is-red { border-color: transparent; }
.pa-marquee .is-red i { background: var(--pa-red); }

/* One full black interruption with all reasons visible at a glance. */
.why-it-matters {
    position: relative;
    z-index: 2;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(116px, 11vw, 158px) max(20px, calc((100vw - 800px) / 2)) clamp(108px, 11vw, 154px);
    color: var(--pa-white);
    background: var(--pa-black);
    border: 0;
}
.why-it-matters::before { content: none; }
.why-it-matters::after { content: none; }
.why-it-matters > .pa-section-kicker,
.why-it-matters > h2,
.why-it-matters > .why-intro,
.why-it-matters > .pa-why-grid { width: min(100%, 960px); margin-inline: auto; }
.why-it-matters > .pa-section-kicker,
.why-it-matters > h2,
.why-it-matters > .why-intro { width: min(100%, 960px); margin-inline: auto; }
.why-it-matters .pa-section-kicker { margin-bottom: 22px; color: var(--pa-white); }
.why-it-matters .pa-section-kicker span:first-child { color: var(--pa-green); }
.why-it-matters h2 {
    margin-bottom: 20px;
    color: var(--pa-white);
    font-family: var(--pa-display);
    font-size: clamp(2.35rem, 4.5vw, 4.65rem);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 1.08;
    text-align: left;
    text-wrap: balance;
}
.why-it-matters .why-intro {
    max-width: 960px;
    margin: 0 auto 42px;
    padding: 0;
    color: rgba(255, 255, 255, 0.68);
    font-family: var(--pa-body);
    font-size: clamp(0.94rem, 1.2vw, 1.05rem);
    font-weight: 500;
    line-height: 1.75;
    text-align: left !important;
}
.pa-why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.26);
    border-left: 1px solid rgba(255, 255, 255, 0.26);
}
.pa-why-card {
    min-height: 260px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: space-between;
    gap: 26px 18px;
    padding: clamp(24px, 3vw, 38px);
    border-right: 1px solid rgba(255, 255, 255, 0.26);
    border-bottom: 1px solid rgba(255, 255, 255, 0.26);
}
.pa-why-card__number {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--pa-body);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.pa-why-card__mark { width: 13px; height: 13px; background: var(--pa-green); }
.pa-why-card--blue .pa-why-card__mark { background: var(--pa-red); }
.pa-why-card--yellow .pa-why-card__mark { background: var(--pa-yellow); }
.pa-why-card--purple .pa-why-card__mark { background: var(--pa-purple); }
.pa-why-card h3 {
    grid-column: 1 / -1;
    align-self: end;
    margin: auto 0 0;
    color: var(--pa-white);
    font-family: var(--pa-display);
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.25;
}
.pa-why-card p {
    grid-column: 1 / -1;
    margin: -14px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-family: var(--pa-body);
    font-size: 0.84rem;
    line-height: 1.55;
}

/* A continuous route turns the original diagrams into one visible journey. */
.how-it-works {
    position: relative;
    z-index: 3;
    padding: clamp(56px, 5vw, 68px) 0 clamp(108px, 11vw, 154px);
    background: #fff;
    border-top: 0;
}
.how-it-works > .pa-section-kicker,
.how-it-works > h2,
.how-it-works > .pa-how-journey { width: min(100%, 1040px); margin-inline: auto; }
.how-it-works > .pa-section-kicker,
.how-it-works > h2 { width: min(100%, 1040px); margin-inline: auto; }
.how-it-works .pa-section-kicker { margin-bottom: 20px; }
.how-it-works h2 {
    margin-bottom: 38px;
    font-family: var(--pa-display);
    font-size: clamp(2.25rem, 4.3vw, 4.2rem);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 1.08;
    text-align: left;
}
.how-it-works h2::after { content: none; }
.how-it-works::before { content: none; }
.how-it-works::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    z-index: 3;
    width: 100vw;
    height: 82px;
    background: var(--pa-black);
    clip-path: polygon(0 86%, 100% 8%, 100% 100%, 0 100%);
    transform: translateX(-50%);
    pointer-events: none;
}
.pa-how-journey { position: relative; isolation: isolate; overflow: visible; }
.pa-how-journey__path {
    position: absolute;
    inset: 0 auto 0 50%;
    width: 168px;
    height: 100%;
    overflow: visible;
    z-index: 4;
    transform: translateX(-50%);
    pointer-events: none;
}
.pa-how-journey__path path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.pa-how-journey__rail { stroke: rgba(10, 10, 10, 0.08); stroke-width: 28; }
.pa-how-journey__route {
    stroke: url('#paJourneyGradient');
    stroke-width: 12;
    filter: drop-shadow(0 0 6px rgba(0, 200, 83, 0.22));
}
.pa-how-step {
    position: relative;
    min-height: 330px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
    align-items: center;
}
.pa-how-step__number {
    z-index: 5;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    color: var(--pa-black);
    font-family: var(--pa-display);
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
}
.pa-how-step__card {
    z-index: 3;
    grid-row: 1;
    width: min(100%, 430px);
    padding: clamp(22px, 2.8vw, 34px);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(10, 10, 10, 0.11);
    border-radius: 20px;
    box-shadow: 0 18px 46px rgba(10, 10, 10, 0.08), 0 2px 8px rgba(10, 10, 10, 0.05);
    container-type: inline-size;
}
.pa-how-step:nth-of-type(odd) .pa-how-step__card { grid-column: 1; justify-self: end; }
.pa-how-step:nth-of-type(even) .pa-how-step__card { grid-column: 3; justify-self: start; }
.pa-how-step__copy h3 {
    margin: 0;
    font-family: var(--pa-display);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.22;
}
.pa-how-step__copy p {
    margin: 10px 0 24px;
    color: #63645f;
    font-family: var(--pa-body);
    font-size: 0.82rem;
    line-height: 1.55;
}
.pa-how-step .step-visual { margin: 0; padding: 0; }
.pa-how-step .sv01-pa-logo,
.pa-how-step .sv01-pa-logo::after,
.pa-how-step .sv01-vline,
.pa-how-step .sv-01 .sv-chip::after,
.pa-how-step .sv-avatar-join { animation-play-state: running; }
.pa-how-step .sv01-pa-logo {
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.6px;
}

/* Keep the three mobile connector segments visually joined even while a
   transparent dash is passing through either corner. */
@media (max-width: 499px) {
    .pa-how-step .sv01-vline::before,
    .pa-how-step .sv01-vline::after {
        content: '';
        position: absolute;
        top: 50%;
        z-index: 1;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #22c55e;
        transform: translateY(-50%);
    }
    .pa-how-step .sv01-vline::before { left: -1px; }
    .pa-how-step .sv01-vline::after { right: -1px; }
}
.pa-how-step .sv-team-card,
.pa-how-step .sv-run-card { width: 100%; min-width: 0; box-shadow: none; border-color: rgba(10, 10, 10, 0.2); }
.pa-how-step .step-visual { overflow: visible; border-radius: 0; }
.pa-how-step .sv-team-card,
.pa-how-step .sv-run-card { border-radius: 13px; }
.pa-how-step .sv-team-members { flex-wrap: nowrap; }
.pa-how-step .sv-run-stats { justify-content: space-between; gap: 7px; }
.pa-how-step .sv-run-stat { min-width: 0; }
.pa-how-step .sv-run-stat--points .sv-run-val { color: #00a844; }
.pa-how-step .sv04-map { height: 220px; border: 1px solid rgba(10, 10, 10, 0.1); border-radius: 14px; background: #edf2ef; }
.pa-how-step .sv-tlegend { padding: 9px 4px 0; }
.pa-how-step .sv-tlegend { gap: 7px 12px; }
.pa-how-step .sv-tleg { justify-content: flex-start; color: var(--pa-black); font-size: 0.65rem; }
.pa-how-step .sv-tleg::before { flex: 0 0 10px; }

/* Step visuals respond to the card itself, including split-screen and narrow tablet widths. */
@container (max-width: 250px) {
    .pa-how-step .sv01-col {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding-bottom: 0;
    }
    .pa-how-step .sv-01 .sv-chip::after,
    .pa-how-step .sv01-pa-logo::after { display: none; }
    .pa-how-step .sv01-vline {
        position: static;
        width: 2px;
        height: 16px;
        margin-left: 0;
        background: repeating-linear-gradient(180deg, #22c55e 0 4px, transparent 4px 10px);
        background-size: 2px 14px;
        animation: syncScrollV 0.8s linear infinite;
    }
    .pa-how-step .sv01-vline::before,
    .pa-how-step .sv01-vline::after { display: none; }
    .pa-how-step .sv01-pa-logo {
        max-width: 100%;
        padding-inline: 10px;
        font-size: clamp(0.64rem, 6cqw, 0.8rem);
    }
    .pa-how-step .sv-team-members { flex-wrap: wrap; }
    .pa-how-step .sv-run-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    .pa-how-step .sv-run-stat {
        min-height: 49px;
        justify-content: center;
        padding: 6px 4px;
        background: #f7f8f5;
        border-radius: 8px;
    }
    .pa-how-step .sv-run-sep { display: none; }
    .pa-how-step .sv-run-val { font-size: 1rem; }
    .pa-how-step .sv-run-unit { font-size: 0.48rem; letter-spacing: 0.02em; }
}

/* Early-access section: one coherent editorial block instead of legacy floating cards. */
.involvement#early-access {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(62px, 7vw, 88px) max(20px, calc((100vw - 1040px) / 2)) clamp(52px, 6vw, 70px);
    overflow: hidden;
    color: var(--pa-black);
    text-align: left;
    border: 0;
    background:
        linear-gradient(rgba(10, 10, 10, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 10, 10, 0.045) 1px, transparent 1px),
        var(--pa-paper);
    background-size: 44px 44px;
}
.involvement#early-access::before,
.involvement#early-access::after { content: none; }
.involvement#early-access .pa-section-kicker { margin-bottom: 20px; }
.pa-early-access__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    align-items: end;
    gap: 36px;
    margin-bottom: 32px;
}
.pa-early-access__intro h2 {
    margin: 0;
    font-family: var(--pa-display);
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 1.08;
}
.involvement#early-access .pa-early-access__intro p {
    max-width: none;
    margin: 0;
    color: #5f625d;
    font-family: var(--pa-body);
    font-size: 0.9rem;
    line-height: 1.65;
    letter-spacing: 0;
}
.involvement#early-access .seeking-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    overflow: visible;
}
.involvement#early-access .seeking-item {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(10, 10, 10, 0.11);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(10, 10, 10, 0.05);
    cursor: default;
}
.involvement#early-access .seeking-item::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--pa-green);
}
.involvement#early-access .seeking-item:nth-child(2)::before { background: var(--pa-blue); }
.involvement#early-access .seeking-item:nth-child(3)::before { background: var(--pa-yellow); }
.involvement#early-access .seeking-item::after { content: none; }
.involvement#early-access .seeking-item:hover { transform: none; box-shadow: 0 10px 30px rgba(10, 10, 10, 0.05); }
.seeking-item__number {
    color: #8b8e88;
    font-family: var(--pa-body);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.involvement#early-access .seeking-item h3 {
    margin: auto 0 10px;
    font-family: var(--pa-display);
    font-size: 1.1rem;
    font-weight: 600;
}
.involvement#early-access .seeking-item h3::after { content: none; }
.involvement#early-access .seeking-item p {
    max-width: none;
    margin: 0;
    color: #666963;
    font-family: var(--pa-body);
    font-size: 0.78rem;
    line-height: 1.55;
    letter-spacing: 0;
}
body > footer { margin-top: 0 !important; }
@keyframes pa-sector-flow { to { stroke-dashoffset: -120; } }
@keyframes pa-marquee-diagonal {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}
@keyframes pa-score-rise {
    0% { text-shadow: 0 0 0 rgba(0, 200, 83, 0); }
    50% { text-shadow: 0 0 9px rgba(0, 200, 83, 0.9), 0 0 22px rgba(0, 200, 83, 0.54); }
    100% { text-shadow: 0 0 5px rgba(0, 200, 83, 0.62), 0 0 14px rgba(0, 200, 83, 0.34); }
}

@media (max-width: 1020px) {
    .container > header { padding-inline: max(18px, calc((100vw - 720px) / 2)); }
    .hero.pa-hero-layered {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'kicker' 'title' 'map' 'copy';
        row-gap: 18px;
        padding: 38px max(18px, calc((100vw - 720px) / 2)) 68px;
        background-size: 40px 40px;
    }
    .hero.pa-hero-layered h1 {
        width: 100%;
        max-width: 720px;
        margin: 2px 0 0;
        padding: 8px 0 12px;
        background: transparent;
        box-shadow: none;
    }
    .pa-title-line { display: inline; width: auto; white-space: normal; }
    .hero.pa-hero-layered .sector-demo {
        width: min(100%, 720px);
        margin: 0 auto;
        padding-top: 9px;
    }
    .pa-hero-copy { width: min(100%, 720px); margin-inline: auto; }
    .hero.pa-hero-layered #territory-demo-map { height: 330px; }
}

@media (min-width: 641px) and (max-width: 1020px) {
    .hero.pa-hero-layered #territory-demo-map { height: clamp(280px, 44vw, 310px); }
    .pa-hero-copy {
        width: min(100%, 720px);
        max-width: 720px;
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(270px, 0.9fr);
        grid-template-areas:
            'loop actions'
            'loop note';
        align-items: start;
        gap: 10px 14px;
    }
    .pa-hero-copy .pa-game-loop { grid-area: loop; margin: 0; align-self: stretch; }
    .hero.pa-hero-layered .pa-hero-actions {
        grid-area: actions;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 0;
    }
    .hero.pa-hero-layered .pa-hero-actions .action-button {
        width: 100%;
        min-width: 0;
        gap: 8px;
        padding-inline: 12px;
    }
    .hero.pa-hero-layered .pa-hero-copy p.pa-strava-note {
        grid-area: note;
        margin-top: 0;
        padding-top: 9px;
        font-size: 0.62rem;
        line-height: 1.45;
    }
}

@media (max-width: 640px) {
    html { scroll-padding-top: 66px; }
    .container { max-width: 100%; padding-inline: 16px; }
    .container > header {
        min-height: 66px;
        padding: 10px 16px;
    }
    .container > header .logo { font-size: 1.7rem; letter-spacing: -1.4px; }
    .container > header .landing-language-slot { display: flex; margin: 0; }
    .container > header .burger-menu { position: relative; top: auto; right: auto; }
    .container > header .burger-button { width: 32px; height: 32px; }
    .container > header .burger-dropdown { width: min(300px, calc(100vw - 32px)); min-width: 0; }

    .pa-sector-flow { top: 66px; right: 0; width: 42px; height: calc(100% - 66px); opacity: 0.68; }
    .pa-sector-flow__shadow { stroke-width: 3.5; }
    .pa-sector-flow__line { stroke-width: 1.8; }

    .pa-section-kicker { font-size: 0.58rem; }
    .hero.pa-hero-layered {
        padding: 30px 16px 48px;
        row-gap: 15px;
        background-size: 36px 36px;
    }
    .hero.pa-hero-layered h1 {
        width: 100%;
        margin-bottom: 0;
        padding-top: 4px;
        font-size: clamp(1.75rem, 7.6vw, 3.4rem);
        letter-spacing: -0.07em;
    }
    .hero.pa-hero-layered .sector-demo {
        width: 100%;
        margin: 0;
        padding: 8px;
        border-radius: 21px;
        box-shadow: 0 16px 44px rgba(10, 10, 10, 0.12), 0 2px 8px rgba(10, 10, 10, 0.05);
    }
    .pa-hero-map__header { min-height: 32px; padding-inline: 5px; font-size: 0.54rem; }
    .hero.pa-hero-layered #territory-demo-map { height: 250px; }
    .pa-hero-map__score { left: 8px; bottom: 8px; min-width: 90px; padding: 7px 8px; border-radius: 11px; }
    .pa-hero-map__legend {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        padding: 7px 0 0;
    }
    .pa-hero-map__legend span {
        min-height: 37px;
        justify-content: center;
        gap: 4px;
        padding: 0 4px;
        border-radius: 10px;
        font-size: 0.46rem;
        line-height: 1.15;
        text-align: center;
    }
    .pa-hero-map__legend i { width: 8px; height: 8px; }
    .pa-hero-copy { display: flex; flex-direction: column; }
    .pa-game-loop { order: 2; margin-top: 18px; border-radius: 15px; }
    .pa-game-loop__item {
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 9px;
        min-height: 80px;
        padding: 12px 12px 18px;
    }
    .pa-game-loop__item::before { top: 0; right: auto; bottom: 0; width: 3px; height: auto; }
    .pa-game-loop__number { margin: 2px 0 0; font-size: 0.48rem; }
    .pa-game-loop h3 { margin-bottom: 3px; font-size: 0.9rem; }
    .pa-game-loop p { font-size: 0.62rem; line-height: 1.4; }
    .hero.pa-hero-layered .pa-hero-actions {
        order: 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 2px;
    }
    .hero.pa-hero-layered .pa-hero-actions .action-button {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        gap: 8px;
        padding: 0 12px;
        font-size: 0.68rem;
    }
    .hero.pa-hero-layered .pa-hero-copy p.pa-strava-note { order: 3; margin-top: 16px; padding-top: 11px; font-size: 0.65rem; }

    .pa-marquee {
        width: 100vw;
        min-height: 32px;
        margin: -10px 0;
        padding: 2px 0;
        transform: translateX(-50%);
        box-shadow: 0 10px 26px rgba(10, 10, 10, 0.2);
    }
    .pa-marquee span { min-height: 24px; padding-inline: 10px; border-radius: 0; font-size: 0.55rem; }
    .pa-marquee__track { animation-duration: 14s; }
    .why-it-matters { padding: 72px 16px 82px; }
    .why-it-matters h2 {
        margin-bottom: 17px;
        font-size: clamp(2rem, 10vw, 3.2rem);
        line-height: 1.12;
    }
    .why-it-matters .why-intro { margin-bottom: 34px; color: rgba(255, 255, 255, 0.78); font-size: 0.9rem; line-height: 1.65; }
    .pa-why-grid { grid-template-columns: minmax(0, 1fr); }
    .pa-why-card { min-height: 215px; padding: 24px 22px; }
    .pa-why-card h3 { font-size: 1.55rem; }

    .how-it-works { padding: 44px 0 118px; }
    .how-it-works::after { height: 62px; }
    .how-it-works .pa-section-kicker,
    .how-it-works h2 { width: calc(100% - 4px); }
    .how-it-works h2 { margin-bottom: 30px; font-size: clamp(2rem, 10vw, 3.2rem); }
    .pa-how-journey { padding-left: 62px; overflow: visible; }
    .pa-how-journey__path { left: -2px; width: 59px; overflow: visible; transform: none; }
    .pa-how-journey__rail { stroke-width: 13px; }
    .pa-how-journey__route { stroke-width: 6px; filter: drop-shadow(0 0 3px rgba(0, 200, 83, 0.2)); }
    /* Scroll-reveal transforms make each step its own stacking context.
       Keep that context above the route so the numbered marker stays legible. */
    .pa-how-step { z-index: 5; min-height: 0; display: block; padding: 12px 0 26px; }
    .pa-how-step__number {
        position: absolute;
        top: 34px;
        left: -54px;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        color: var(--pa-black);
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(10, 10, 10, 0.1);
        border-radius: 50%;
        box-shadow: 0 7px 18px rgba(10, 10, 10, 0.12);
        transform: none;
        font-family: var(--pa-body);
        font-size: 0.88rem;
    }
    .pa-how-step__card { width: 100%; padding: 21px 17px; border-radius: 20px; box-shadow: 0 14px 34px rgba(10, 10, 10, 0.08); }
    .pa-how-step__copy h3 { font-size: 1.28rem; line-height: 1.2; }
    .pa-how-step__copy p { margin: 9px 0 18px; font-size: 0.78rem; line-height: 1.55; }
    .pa-how-step .step-visual { overflow: visible; border-radius: 0; }
    .pa-how-step .sv04-map { height: 220px; border-radius: 14px; }
    .pa-how-step .sv-tlegend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 5px; padding-top: 8px; }
    .pa-how-step .sv-tleg { width: 100%; justify-content: flex-start; padding-left: 4px; font-size: 0.58rem; text-align: left; }
    .pa-how-step .sv-run-stats { gap: 4px; }
    .pa-how-step .sv-run-val { font-size: 1.05rem; }
    .pa-how-step .sv-run-unit { font-size: 0.5rem; letter-spacing: 0.03em; }

    .involvement#early-access {
        padding: 54px 16px 42px;
        background-size: 36px 36px;
    }
    .involvement#early-access .pa-section-kicker { margin-bottom: 17px; }
    .pa-early-access__intro { display: block; margin-bottom: 24px; padding-inline: 8px; }
    .pa-early-access__intro h2 { margin-bottom: 14px; font-size: clamp(2rem, 9vw, 3rem); }
    .involvement#early-access .pa-early-access__intro p { font-size: 0.82rem; line-height: 1.6; }
    .involvement#early-access .seeking-list { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
    .involvement#early-access .seeking-item { min-height: 145px; padding: 19px; }
    .involvement#early-access .seeking-item h3 { font-size: 1.05rem; }
    .involvement#early-access .seeking-item p { font-size: 0.76rem; }
}

@media (max-width: 380px) {
    .hero.pa-hero-layered h1 { font-size: 1.72rem; }
    .hero.pa-hero-layered #territory-demo-map { height: 230px; }
    .pa-hero-map__legend span { font-size: 0.43rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pa-sector-flow__line,
    .pa-marquee__track,
    .pa-game-loop__controls button.is-active::after { animation: none; }
    .pa-game-loop__item { transition: none; }
    .pa-game-loop__controls button.is-active::after { transform: scaleX(1); }
}