/* =========================================================================
   PvPAssist — Landing (scoped)

   Every selector below lives under `.pvp-landing`, which only the marketing
   home view puts on <body>. Nothing here can reach /account, /admin or the
   auth screens, and no bare element/Bootstrap selector is overridden.

   Loaded after css/pvpassist.css, so the shared shell (.pvp-btn, .pvp-container,
   auth/account) stays exactly as it is — this file never edits those classes.
   ========================================================================= */

.pvp-landing {
    /* --- Surfaces: near-black navy, cool, low-chroma ------------------ */
    --l-bg: #060d16;
    --l-bg-alt: #08121e;
    --l-bg-strip: #091524;
    --l-panel: #0c1826;
    --l-panel-2: #0e1d2e;
    --l-panel-3: #102338;

    /* --- Lines: always blue-tinted, never neutral grey ---------------- */
    --l-line: rgba(96, 148, 208, 0.16);
    --l-line-2: rgba(96, 148, 208, 0.30);
    --l-line-3: rgba(96, 168, 232, 0.50);

    /* --- Accents ------------------------------------------------------ */
    --l-blue: #1f8cff;
    --l-blue-deep: #0f6be0;
    --l-cyan: #3fb0ff;
    --l-cyan-soft: #7ecbff;
    --l-green: #2fcf8b;

    /* --- Type --------------------------------------------------------- */
    --l-fg: #ffffff;
    --l-fg-2: #aebfd2;
    --l-fg-3: #7a8da4;

    --l-font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
        "Inter", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    /* --- Geometry ----------------------------------------------------- */
    --l-container: 1480px;
    --l-gutter: 20px;
    --l-radius: 10px;
    --l-radius-lg: 14px;

    /* Shared hero media shell. The hero plate is the section's own background
       (inset:0 on .pvpl-hero__art), so whatever height the copy happens to
       need is the height of the artwork — which is why the home hero used to
       stand ~50px taller than the topic hubs and the first visual jumped when
       you moved between them. This floor makes the shell the same block-size
       on every page that uses .pvpl-hero, and it sits just above the tallest
       natural copy column at each width, so the extra space is a few pixels
       of breathing room rather than an empty frame. */
    --l-hero-media: clamp(41rem, 26rem + 23.8vw, 52rem);

    --l-glow: 0 0 0 1px rgba(63, 176, 255, 0.28), 0 24px 70px rgba(4, 12, 24, 0.85),
        0 0 90px rgba(31, 140, 255, 0.16);

    background: var(--l-bg);
    color: var(--l-fg);
    font-family: var(--l-font);
    /* NOTE: deliberately no body-level `overflow-x: hidden`. The two things
       that bleed past the container — the hero stage and the characters
       screenshot — are each clipped by their own section, so clamping the
       body would buy nothing and would turn the body into a scroll container
       (overflow-x:hidden forces overflow-y to compute as auto), which is what
       breaks fixed positioning and scroll capture. */
}

@media (min-width: 768px) {
    .pvp-landing {
        --l-gutter: 40px;
    }
}

@media (min-width: 1200px) {
    .pvp-landing {
        --l-gutter: 44px;
    }
}

@media (min-width: 1600px) {
    .pvp-landing {
        --l-gutter: 72px;
    }
}

/* =========================================================================
   Primitives
   ========================================================================= */

.pvpl-container {
    width: 100%;
    max-width: calc(var(--l-container) + (var(--l-gutter) * 2));
    margin-inline: auto;
    padding-inline: var(--l-gutter);
}

.pvpl-section {
    position: relative;
    padding-block: clamp(3.5rem, 5.2vw, 6.25rem);
}

.pvpl-section--alt {
    background: var(--l-bg-alt);
}

.pvpl-section--tight {
    padding-block: clamp(2.5rem, 3.4vw, 3.75rem);
}

.pvpl-rule {
    border: 0;
    border-top: 1px solid var(--l-line);
    margin: 0;
}

/* Section label: "01 / CONTROL" — number cyan, the rest muted. */
.pvpl-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
    margin: 0 0 0.9rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--l-fg-3);
}

.pvpl-label b {
    color: var(--l-cyan);
    font-weight: 700;
}

/* Label + headline sharing one baseline (FEATURES / FAQ in the reference). */
.pvpl-label--inline {
    margin: 0;
}

.pvpl-headrow {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem 1.15rem;
    margin-bottom: clamp(1.5rem, 2.2vw, 2.25rem);
}

.pvpl-h1,
.pvpl-h2,
.pvpl-h3 {
    margin: 0;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    line-height: 1.03;
    text-wrap: balance;
}

.pvpl-h1 {
    font-size: clamp(2.35rem, 4vw, 4.15rem);
    line-height: 0.99;
}

.pvpl-h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.75rem);
}

.pvpl-h3 {
    font-size: clamp(1.4rem, 2vw, 2.05rem);
}

.pvpl-accent {
    color: var(--l-cyan);
}

.pvpl-lead {
    margin: 1.15rem 0 0;
    max-width: 34em;
    color: var(--l-fg-2);
    font-size: clamp(0.98rem, 1.02vw, 1.09rem);
    line-height: 1.72;
}

.pvpl-copy {
    margin: 0.9rem 0 0;
    max-width: 36em;
    color: var(--l-fg-2);
    font-size: 0.96rem;
    line-height: 1.7;
}

.pvpl-muted {
    color: var(--l-fg-3);
}

/* --- Buttons: landing-local, so the shared .pvp-btn stays untouched ---- */
.pvpl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--l-radius);
    padding: 0.92rem 1.6rem;
    font-family: inherit;
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease,
        border-color 0.18s ease, box-shadow 0.18s ease;
}

.pvpl-btn--primary {
    background: var(--l-blue);
    color: #ffffff;
    box-shadow: 0 10px 34px rgba(31, 140, 255, 0.34);
}

.pvpl-btn--primary:hover,
.pvpl-btn--primary:focus-visible {
    background: #35a0ff;
    color: #ffffff;
    box-shadow: 0 14px 42px rgba(31, 140, 255, 0.46);
}

.pvpl-btn--ghost {
    border-color: var(--l-line-2);
    background: rgba(10, 22, 38, 0.55);
    color: var(--l-fg);
}

.pvpl-btn--ghost:hover,
.pvpl-btn--ghost:focus-visible {
    border-color: var(--l-line-3);
    background: rgba(16, 35, 56, 0.85);
    color: var(--l-fg);
}

.pvpl-btn--sm {
    padding: 0.62rem 1.15rem;
    font-size: 0.88rem;
}

.pvpl-btn__arrow {
    transition: transform 0.18s ease;
}

.pvpl-btn:hover .pvpl-btn__arrow {
    transform: translateX(3px);
}

.pvp-landing a:focus-visible,
.pvp-landing button:focus-visible,
.pvp-landing summary:focus-visible {
    outline: 2px solid var(--l-cyan);
    outline-offset: 3px;
}

/* --- Checklist with cyan ticks ---------------------------------------- */
.pvpl-checks {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.pvpl-checks li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    align-items: start;
    gap: 0.7rem;
    color: var(--l-fg);
    font-size: 0.94rem;
    line-height: 1.45;
}

.pvpl-checks svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.05rem;
    color: var(--l-cyan);
    flex: none;
}

/* --- Product screenshot frame ----------------------------------------- */
.pvpl-shot {
    position: relative;
    display: block;
    border: 1px solid var(--l-line-3);
    border-radius: var(--l-radius-lg);
    background: var(--l-panel);
    overflow: hidden;
    box-shadow: var(--l-glow);
}

.pvpl-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================================
   Navbar
   ========================================================================= */

.pvpl-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1040;
    border-bottom: 1px solid transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease,
        backdrop-filter 0.25s ease;
}

.pvpl-nav.is-stuck,
.pvpl-nav.is-open {
    background: rgba(6, 13, 22, 0.88);
    border-bottom-color: var(--l-line);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.pvpl-nav__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 76px;
}

.pvpl-nav__brand {
    display: inline-flex;
    align-items: center;
    flex: none;
}

/* Sized by height with width:auto, so the wordmark's aspect ratio is fixed by
   the mechanism and cannot drift. The bar's own min-height is unchanged — at
   76px there is still clear room around the mark at this size, so the header
   does not grow and the hero is not pushed down. */
.pvpl-nav__brand img {
    display: block;
    height: 42px;
    width: auto;
}

.pvpl-nav__links {
    display: none;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.6rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pvpl-nav__links a {
    color: var(--l-fg-2);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    padding-block: 0.35rem;
    transition: color 0.16s ease;
}

.pvpl-nav__links a:hover,
.pvpl-nav__links a:focus-visible {
    color: var(--l-fg);
}

.pvpl-nav__actions {
    display: none;
    align-items: center;
    gap: 0.7rem;
    flex: none;
}

.pvpl-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--l-line-2);
    border-radius: var(--l-radius);
    background: rgba(10, 22, 38, 0.7);
    color: var(--l-fg);
    cursor: pointer;
}

.pvpl-nav__toggle svg {
    width: 20px;
    height: 20px;
}

.pvpl-nav__toggle .pvpl-ico-close,
.pvpl-nav__toggle[aria-expanded="true"] .pvpl-ico-open {
    display: none;
}

.pvpl-nav__toggle[aria-expanded="true"] .pvpl-ico-close {
    display: block;
}

.pvpl-nav__panel {
    display: none;
    padding: 0.5rem 0 1.4rem;
    border-top: 1px solid var(--l-line);
}

.pvpl-nav__panel.is-open {
    display: block;
}

.pvpl-nav__panel ul {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
}

.pvpl-nav__panel a:not(.pvpl-btn) {
    display: block;
    padding: 0.85rem 0.15rem;
    border-bottom: 1px solid var(--l-line);
    color: var(--l-fg-2);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.pvpl-nav__panel-group {
    border-bottom: 1px solid var(--l-line);
    padding: 0.55rem 0 0.35rem;
}

.pvpl-nav__panel-group > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
}

.pvpl-nav__panel-heading {
    margin: 0.35rem 0 0.15rem;
    padding: 0.35rem 0.15rem 0.15rem;
    color: var(--l-fg-3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pvpl-nav__panel-group a {
    padding-left: 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.pvpl-nav__panel-actions {
    display: grid;
    gap: 0.6rem;
}

/* Desktop Rehberler disclosure — hub link + chevron; menu opens on hover,
   focus-within, or .is-open from the disclosure button. */
.pvpl-nav__guides {
    /* One number for the offset between the trigger row and the panel, and
       for the invisible bridge that covers it. They cannot drift apart. */
    --l-nav-menu-gap: 0.55rem;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
}

.pvpl-nav__guides-hub {
    color: var(--l-fg-2);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    padding-block: 0.35rem;
    transition: color 0.16s ease;
}

.pvpl-nav__guides.is-active .pvpl-nav__guides-hub,
.pvpl-nav__guides-hub:hover,
.pvpl-nav__guides-hub:focus-visible,
.pvpl-nav__guides:hover .pvpl-nav__guides-hub {
    color: var(--l-fg);
}

.pvpl-nav__guides-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: var(--l-fg-2);
    cursor: pointer;
}

.pvpl-nav__guides-toggle svg {
    width: 0.95rem;
    height: 0.95rem;
    transition: transform 0.16s ease;
}

.pvpl-nav__guides.is-open .pvpl-nav__guides-toggle svg,
.pvpl-nav__guides.is-hovered .pvpl-nav__guides-toggle svg,
.pvpl-nav__guides:hover .pvpl-nav__guides-toggle svg,
.pvpl-nav__guides:focus-within .pvpl-nav__guides-toggle svg {
    transform: rotate(180deg);
}

.pvpl-nav__guides-toggle:hover,
.pvpl-nav__guides-toggle:focus-visible {
    color: var(--l-fg);
    background: rgba(255, 255, 255, 0.06);
}

.pvpl-nav__guides-menu {
    position: absolute;
    top: calc(100% + var(--l-nav-menu-gap));
    left: 50%;
    z-index: 1050;
    width: min(20rem, calc(100vw - 2rem));
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--l-line);
    border-radius: var(--l-radius);
    background: rgba(8, 16, 28, 0.97);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -0.25rem);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

/* The hover bridge.

   The panel hangs --l-nav-menu-gap below the trigger row, and that strip used
   to belong to nobody: the pointer left .pvpl-nav__guides on its way down, the
   :hover state dropped, and the menu vanished before the pointer could reach
   it. This pseudo-element fills exactly that strip and is a child of the menu,
   so crossing it keeps the wrapper hovered — there is no dead zone left to
   fall through. It is only as wide as the panel, and it only takes pointer
   events while the panel is open, so it can never swallow a click meant for a
   neighbouring nav link. */
.pvpl-nav__guides-menu::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 100%;
    block-size: var(--l-nav-menu-gap);
}

.pvpl-nav__guides.is-open .pvpl-nav__guides-menu,
.pvpl-nav__guides.is-hovered .pvpl-nav__guides-menu,
.pvpl-nav__guides:hover .pvpl-nav__guides-menu,
.pvpl-nav__guides:focus-within .pvpl-nav__guides-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* Escape, with the pointer still resting on the menu. Without this the CSS
   hover state would immediately win and the key would look broken; the class
   is dropped again as soon as the pointer leaves, or the disclosure is opened
   deliberately. Placed after the open rules so it beats them on order. */
.pvpl-nav__guides.is-dismissed .pvpl-nav__guides-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -0.25rem);
}

.pvpl-nav__guides-heading {
    margin: 0.85rem 0 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--l-line);
    color: var(--l-fg-3);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The first heading opens the panel, so it needs no rule above it — the
   hairline is there to separate the two groups, not to box them in. */
.pvpl-nav__guides-heading:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pvpl-nav__guides-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pvpl-nav__guides-list a {
    display: block;
    padding: 0.45rem 0.5rem;
    margin-inline: -0.2rem;
    color: var(--l-fg-2);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.35rem;
    transition: color 0.16s ease, background-color 0.16s ease;
}

.pvpl-nav__guides-list a:hover,
.pvpl-nav__guides-list a:focus-visible {
    color: var(--l-fg);
    background: rgba(255, 255, 255, 0.06);
}

@media (min-width: 992px) {
    .pvpl-nav__links,
    .pvpl-nav__actions {
        display: flex;
    }

    .pvpl-nav__toggle,
    .pvpl-nav__panel {
        display: none !important;
    }

    .pvpl-nav__brand img {
        height: 46px;
    }
}

/* =========================================================================
   Hero
   ========================================================================= */

/* One shell for every hero on the site — the landing and each topic page —
   so the first visual is the same size whichever of them you land on. Grid
   with centred content rather than a min-height on a block: when a shorter
   copy column leaves room over, the space is shared above and below instead
   of piling up under the last line. */
.pvpl-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: center;
    min-block-size: var(--l-hero-media);
    padding-top: clamp(6.5rem, 9vw, 9rem);
    padding-bottom: clamp(2.75rem, 4vw, 4.25rem);
    overflow: hidden;
}

.pvpl-hero__art,
.pvpl-hero__art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pvpl-hero__art {
    z-index: -2;
    pointer-events: none;
}

.pvpl-hero__art img {
    object-fit: cover;
    /* Framed between the knight and the castle. The plate is already free of
       baked text (see artwork/cropped/), so this value is purely about
       composition, not about hiding anything. */
    object-position: 30% 46%;
    opacity: 0.9;
}

/* Left scrim for headline legibility + bottom fade into the value strip. */
.pvpl-hero__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 13, 22, 0.95) 0%, rgba(6, 13, 22, 0.74) 24%,
            rgba(6, 13, 22, 0.28) 52%, rgba(6, 13, 22, 0.5) 100%),
        linear-gradient(180deg, rgba(6, 13, 22, 0.9) 0%, rgba(6, 13, 22, 0.05) 24%,
            rgba(6, 13, 22, 0.12) 62%, var(--l-bg) 100%);
}

.pvpl-hero__glow {
    position: absolute;
    z-index: -1;
    top: 12%;
    right: -6%;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 140, 255, 0.22), transparent 68%);
    pointer-events: none;
}

.pvpl-hero__grid {
    display: grid;
    gap: clamp(2.5rem, 4vw, 3.5rem);
    align-items: center;
}

.pvpl-hero__eyebrow {
    margin: 0 0 1.15rem;
    color: var(--l-fg-2);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.pvpl-hero__brandline {
    margin: 0.85rem 0 0;
    max-width: 34em;
    color: var(--l-fg);
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.pvpl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: clamp(1.75rem, 2.6vw, 2.5rem);
}

.pvpl-hero__caps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem clamp(1.25rem, 2.6vw, 2.6rem);
    margin: clamp(1.75rem, 2.6vw, 2.5rem) 0 0;
    padding: 0;
    list-style: none;
}

.pvpl-hero__caps li {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--l-fg-2);
    font-size: 0.88rem;
    font-weight: 500;
}

.pvpl-hero__caps svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--l-cyan);
    flex: none;
}

/* The stage is sized BY the screenshot, never the other way round: no large
   empty frame with a small picture inside it. */
.pvpl-hero__stage {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 620px;
}

.pvpl-hero__stage .pvpl-shot {
    border-color: rgba(96, 176, 240, 0.45);
}

@media (min-width: 992px) {
    .pvpl-hero__grid {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .pvpl-hero__stage {
        justify-self: end;
        width: auto;
        max-width: none;
        /* Reaches toward the viewport edge like the reference, without ever
           letting the copy column touch the browser chrome. Measured against the
           VIEWPORT: past the container's max-width a gutter-relative offset
           stops tracking the page and leaves a growing dead margin on wide
           screens. */
        margin-right: calc(
            (min(var(--l-container), 100vw - (var(--l-gutter) * 2)) - 100vw) / 2 + 3vw
        );
        transform: perspective(2000px) rotateY(-6deg) rotateX(1.2deg);
        transform-origin: right center;
    }

    /* Large, but never upscaled past the capture's own 820px and never so
       tall that the value strip is pushed a full screen down at 1080. */
    .pvpl-hero__stage .pvpl-shot {
        width: min(46vw, 780px);
    }

}

/* -------------------------------------------------------------------------
   Trial badge — the offer, above the headline.

   A chip, not a sale sticker: one hairline, one faint cyan wash, one small
   dot. No glow, no gradient, no animation. It wraps to a second line rather
   than shrinking its type, which is what keeps it readable at 320px.
   ------------------------------------------------------------------------- */

.pvpl-trial-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    margin: 0 0 1rem;
    padding: 0.42rem 0.8rem;
    border: 1px solid rgba(63, 176, 255, 0.34);
    border-radius: 999px;
    background: rgba(31, 140, 255, 0.10);
    color: var(--l-cyan-soft);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.25;
    text-transform: uppercase;
}

.pvpl-trial-badge__dot {
    width: 0.4rem;
    height: 0.4rem;
    flex: none;
    border-radius: 50%;
    background: var(--l-cyan);
}

.pvpl-trial-badge__sep {
    color: rgba(126, 203, 255, 0.5);
}

/* 320-359px: tighten the tracking rather than let the chip break onto a second
   line — a two-line pill stops reading as a chip. */
@media (max-width: 359.98px) {
    .pvpl-trial-badge {
        padding-inline: 0.7rem;
        font-size: 0.63rem;
        letter-spacing: 0.05em;
    }
}

/* -------------------------------------------------------------------------
   Hero actions — one DOM order, two layouts.

   Phone: a stretched column, primary → trust line → secondary, so there is
   exactly one dominant action instead of two pills competing at half width.
   Desktop (>=768px): the two buttons return to a row and the trust line wraps
   onto its own row underneath them, leaving the existing composition alone.
   ------------------------------------------------------------------------- */

.pvpl-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.pvpl-hero__cta {
    /* Comfortably above the 44px touch-target floor, and the same height as
       the secondary so the pair reads as a deliberate stack. */
    min-height: 3.25rem;
    font-size: 1.02rem;
}

/* Quieter on purpose: same shape, less surface, so it never competes with the
   trial CTA directly above it. */
.pvpl-hero__cta-alt {
    min-height: 3rem;
    background: transparent;
    border-color: var(--l-line);
    color: var(--l-fg-2);
    font-weight: 600;
}

.pvpl-hero__trust {
    margin: 0.15rem 0 0.1rem;
    color: var(--l-fg-3);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .pvpl-hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.9rem;
    }

    .pvpl-hero__cta,
    .pvpl-hero__cta-alt {
        min-height: 0;
        font-size: 0.97rem;
    }

    .pvpl-hero__cta-alt {
        background: rgba(10, 22, 38, 0.55);
        border-color: var(--l-line-2);
        color: var(--l-fg);
        font-weight: 700;
    }

    /* Full row of its own, after both buttons. */
    .pvpl-hero__trust {
        order: 3;
        flex-basis: 100%;
        margin: 0.2rem 0 0;
        font-size: 0.85rem;
    }
}

/* -------------------------------------------------------------------------
   Phone hero budget.

   The first viewport has to carry badge → headline → lead → CTA → trust line.
   The eyebrow is the one element that buys nothing there, so it steps aside
   below 768px, and the top padding tightens to what the fixed navbar actually
   needs. Nothing in here applies at desktop widths.
   ------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .pvpl-hero {
        padding-top: 5.75rem;
    }

    .pvpl-hero__eyebrow {
        display: none;
    }

    .pvpl-hero__grid {
        gap: 2rem;
    }

    .pvpl-lead {
        margin-top: 0.95rem;
        line-height: 1.6;
    }

    .pvpl-hero__actions {
        margin-top: 1.5rem;
    }

    .pvpl-hero__caps {
        margin-top: 1.5rem;
        gap: 0.7rem 1.1rem;
    }
}

/* =========================================================================
   Value strip
   ========================================================================= */

.pvpl-strip {
    position: relative;
    background: var(--l-bg-strip);
    border-block: 1px solid var(--l-line);
}

.pvpl-strip__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 0;
    padding-block: clamp(1.75rem, 2.4vw, 2.35rem);
}

.pvpl-strip__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    padding-inline: clamp(0.75rem, 1.6vw, 1.75rem);
}

.pvpl-strip__item + .pvpl-strip__item {
    border-left: 1px solid var(--l-line);
}

.pvpl-strip__item:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
}

.pvpl-strip__icon {
    width: 2.6rem;
    height: 2.6rem;
    color: var(--l-cyan);
    flex: none;
}

.pvpl-strip__title {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pvpl-strip__sub {
    margin: 0.3rem 0 0;
    color: var(--l-fg-2);
    font-size: 0.85rem;
    line-height: 1.45;
}

@media (min-width: 992px) {
    .pvpl-strip__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pvpl-strip__item:nth-child(odd) {
        border-left: 1px solid var(--l-line);
        padding-left: clamp(0.75rem, 1.6vw, 1.75rem);
    }

    .pvpl-strip__item:first-child {
        border-left: 0;
        padding-left: 0;
    }
}

/* =========================================================================
   01 / CONTROL — one cinematic composition, not two cards
   ========================================================================= */

.pvpl-control {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(22rem, 30vw, 30rem);
    display: flex;
    align-items: center;
}

.pvpl-control__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.pvpl-control__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Biased upward so the helm and shoulders carry the band rather than the
       sword hilt. The plate is pre-cropped, so the full width may show. */
    object-position: 50% 34%;
    opacity: 0.95;
}

.pvpl-control__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--l-bg) 0%, rgba(6, 13, 22, 0.94) 30%,
            rgba(6, 13, 22, 0.35) 55%, rgba(6, 13, 22, 0.8) 84%, var(--l-bg) 100%),
        linear-gradient(180deg, var(--l-bg) 0%, transparent 18%, transparent 76%, var(--l-bg) 100%);
}

.pvpl-control__grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    width: 100%;
}

.pvpl-control__ghost {
    margin: 0;
    font-size: clamp(1.35rem, 1.95vw, 2rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--l-fg-3);
}

.pvpl-control__ghost span {
    color: var(--l-cyan);
}

.pvpl-control__ghost::after {
    content: "";
    display: block;
    width: 5.25rem;
    height: 2px;
    margin-top: 1.4rem;
    background: var(--l-cyan);
}

@media (min-width: 992px) {
    .pvpl-control__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(0, 0.55fr);
        align-items: center;
    }

    .pvpl-control__spacer {
        display: block;
    }

    .pvpl-control__ghost {
        text-align: left;
    }
}

/* =========================================================================
   02 / ATTACK + 03 / VITALS — editorial split, no outer cards
   ========================================================================= */

.pvpl-split {
    display: grid;
    gap: clamp(2.75rem, 4vw, 3.5rem);
}

.pvpl-split__half {
    position: relative;
    display: grid;
    gap: clamp(1.5rem, 2.4vw, 2.25rem);
    align-content: start;
}

@media (min-width: 768px) {
    .pvpl-split__half {
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
        align-items: center;
    }

    /* No shared frame here any more.

       Attack used to be a roughly 1:1 window next to Vitals at 1.45:1, and
       side by side those rendered at wildly different heights — so the split
       forced both into a 4:3 box, cropped to top-left, and accepted losing
       some of each window to keep the symmetry.

       The current Attack capture is 1.59:1. Both windows are landscape now and
       within about 10% of each other, so their natural heights already sit
       level and the frame has nothing left to equalise: all it does is cut the
       right edge off two application screenshots. The stage is sized by the
       screenshot again, which is the rule everywhere else on this page. */
}

@media (min-width: 1200px) {
    .pvpl-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(2.5rem, 4vw, 4rem);
    }

    /* The thin tactical divider between the two halves. */
    .pvpl-split__half + .pvpl-split__half::before {
        content: "";
        position: absolute;
        top: -0.5rem;
        bottom: -0.5rem;
        left: calc(clamp(2.5rem, 4vw, 4rem) / -2);
        width: 1px;
        background: linear-gradient(180deg, transparent, var(--l-line-3) 22%,
            var(--l-line-3) 78%, transparent);
    }
}

/* =========================================================================
   05 / FEATURES
   ========================================================================= */

.pvpl-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.pvpl-feature {
    border: 1px solid var(--l-line);
    border-radius: var(--l-radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%),
        var(--l-panel);
    padding: 1.1rem 1.15rem 1.25rem;
    transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.pvpl-feature:hover {
    border-color: var(--l-line-3);
    transform: translateY(-2px);
}

.pvpl-feature__top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.pvpl-feature__top svg {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--l-cyan);
    flex: none;
}

.pvpl-feature__num {
    color: var(--l-fg-3);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.pvpl-feature h3 {
    margin: 0 0 0.45rem;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}

.pvpl-feature p {
    margin: 0;
    color: var(--l-fg-2);
    font-size: 0.88rem;
    line-height: 1.55;
}

@media (min-width: 768px) {
    .pvpl-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .pvpl-features {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* =========================================================================
   06 / HOW IT WORKS — one horizontal sequence, not three big cards
   ========================================================================= */

.pvpl-how {
    display: grid;
    gap: clamp(1.75rem, 2.6vw, 2.5rem);
    align-items: start;
}

.pvpl-steps {
    display: grid;
    gap: clamp(1.5rem, 2.4vw, 2.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pvpl-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.pvpl-step__badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--l-line-3);
    border-radius: var(--l-radius);
    background: rgba(16, 35, 56, 0.7);
    color: var(--l-cyan);
    font-size: 0.9rem;
    font-weight: 700;
    flex: none;
}

.pvpl-step h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
}

.pvpl-step p {
    margin: 0;
    color: var(--l-fg-2);
    font-size: 0.9rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .pvpl-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .pvpl-how {
        grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
        align-items: center;
    }
}

/* =========================================================================
   07 / UPDATES
   ========================================================================= */

.pvpl-updates {
    display: grid;
    gap: clamp(1.75rem, 2.6vw, 2.5rem);
    align-items: center;
}

.pvpl-release {
    display: grid;
    gap: 1.25rem;
    border: 1px solid var(--l-line-2);
    border-radius: var(--l-radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 50%),
        var(--l-panel-2);
    padding: clamp(1.25rem, 2vw, 1.75rem);
    align-items: center;
}

.pvpl-release__ver {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0;
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.pvpl-release__badge {
    border: 1px solid rgba(47, 207, 139, 0.45);
    border-radius: 999px;
    background: rgba(47, 207, 139, 0.14);
    color: var(--l-green);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.28rem 0.65rem;
    text-transform: none;
}

.pvpl-release__date {
    margin: 0.55rem 0 0;
    color: var(--l-fg-3);
    font-size: 0.86rem;
}

.pvpl-release__notes {
    margin: 0.55rem 0 0;
    color: var(--l-fg-2);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 44em;
}

.pvpl-link {
    color: var(--l-cyan);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pvpl-release__empty {
    border: 1px dashed var(--l-line-2);
    border-radius: var(--l-radius-lg);
    background: var(--l-panel);
    padding: clamp(1.25rem, 2vw, 1.75rem);
    color: var(--l-fg-2);
    font-size: 0.93rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .pvpl-release {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (min-width: 1200px) {
    .pvpl-updates {
        grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    }
}

/* =========================================================================
   08 / FAQ — native <details>, so it works with JS off and with a keyboard
   ========================================================================= */

.pvpl-faq {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    align-items: start;
}

.pvpl-faq__item {
    border: 1px solid var(--l-line-2);
    border-radius: var(--l-radius);
    background: var(--l-panel);
    overflow: hidden;
}

.pvpl-faq__item[open] {
    border-color: var(--l-line-3);
}

.pvpl-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.05rem;
    color: var(--l-fg);
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.pvpl-faq__item summary::-webkit-details-marker {
    display: none;
}

.pvpl-faq__item summary svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--l-cyan);
    flex: none;
    transition: transform 0.2s ease;
}

.pvpl-faq__item[open] summary svg {
    transform: rotate(180deg);
}

.pvpl-faq__item p {
    margin: 0;
    padding: 0 1.05rem 1.05rem;
    color: var(--l-fg-2);
    font-size: 0.91rem;
    line-height: 1.65;
}

@media (min-width: 768px) {
    .pvpl-faq {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .pvpl-faq {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================================
   Final CTA
   ========================================================================= */

.pvpl-final {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3.5rem, 6vw, 6rem);
    text-align: center;
}

/* The closing section carries no plate any more; the atmosphere is a single
   soft glow behind the type, which costs nothing to load and never competes
   with the line it sits behind. */
.pvpl-final::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 150%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46% 52% at 50% 46%, rgba(31, 140, 255, 0.16), transparent 70%),
        radial-gradient(34% 40% at 50% 92%, rgba(63, 176, 255, 0.08), transparent 74%);
}

.pvpl-final__title span {
    color: var(--l-fg-3);
}

.pvpl-final__sub {
    margin: 1rem auto 0;
    max-width: 40rem;
    color: var(--l-fg-2);
    font-size: clamp(0.98rem, 1.05vw, 1.1rem);
    line-height: 1.65;
}

.pvpl-final__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: clamp(1.75rem, 2.6vw, 2.25rem);
}

/* =========================================================================
   Footer
   ========================================================================= */

.pvpl-footer {
    border-top: 1px solid var(--l-line);
    background: #050b13;
    padding-block: clamp(2.25rem, 3.2vw, 3rem);
}

.pvpl-footer__grid {
    display: grid;
    gap: 1.75rem;
    align-items: start;
}

.pvpl-footer__brand img {
    display: block;
    height: 30px;
    width: auto;
}

.pvpl-footer__tag {
    margin: 0.55rem 0 0;
    color: var(--l-fg-3);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.pvpl-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem clamp(1.1rem, 2.2vw, 2.1rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pvpl-footer__links a {
    color: var(--l-fg-2);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.pvpl-footer__links a:hover {
    color: var(--l-fg);
}

.pvpl-footer__guides {
    margin-top: 1.25rem;
}

.pvpl-footer__guides-title {
    margin: 0 0 0.55rem;
    color: var(--l-fg);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pvpl-footer__guides-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem clamp(0.9rem, 1.8vw, 1.6rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pvpl-footer__guides-list a {
    color: var(--l-fg-2);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

.pvpl-footer__guides-list a:hover,
.pvpl-footer__guides-list a:focus-visible {
    color: var(--l-fg);
}

.pvpl-footer__note {
    margin: 1.1rem 0 0;
    color: var(--l-fg-3);
    font-size: 0.82rem;
    line-height: 1.6;
    max-width: 46em;
}

.pvpl-footer__mail {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--l-fg-2);
    font-size: 0.9rem;
    text-decoration: none;
}

.pvpl-footer__mail svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--l-cyan);
}

.pvpl-footer__mail:hover {
    color: var(--l-fg);
}

.pvpl-footer__rights {
    margin: 0.65rem 0 0;
    color: var(--l-fg-3);
    font-size: 0.8rem;
}

/* =========================================================================
   Legal documents
   ========================================================================= */

.pvpl-legal {
    padding: 7.25rem 0 3.5rem;
}

.pvpl-legal__article {
    max-width: 56rem;
    margin-inline: auto;
    color: var(--l-fg-2);
    font-size: 1.05rem;
    line-height: 1.75;
}

.pvpl-legal__article h1,
.pvpl-legal__article h2,
.pvpl-legal__article h3 {
    color: var(--l-fg);
    font-weight: 700;
    line-height: 1.28;
}

.pvpl-legal__article h1 {
    margin: 0 0 0.85rem;
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
}

.pvpl-legal__article h2 {
    margin: 2rem 0 0.7rem;
    font-size: 1.28rem;
}

.pvpl-legal__article h3 {
    margin: 1.45rem 0 0.5rem;
    font-size: 1.08rem;
}

.pvpl-legal__article p,
.pvpl-legal__article ul,
.pvpl-legal__article ol {
    margin: 0 0 1rem;
}

.pvpl-legal__article ul,
.pvpl-legal__article ol {
    padding-left: 1.25rem;
}

.pvpl-legal__article li + li {
    margin-top: 0.35rem;
}

.pvpl-legal__article strong {
    color: var(--l-fg);
    font-weight: 650;
}

.pvpl-legal__article a {
    color: var(--l-cyan-soft);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.pvpl-legal__article a:hover,
.pvpl-legal__article a:focus-visible {
    color: var(--l-fg);
}

.pvpl-legal__article a:focus-visible,
.pvpl-footer__links a:focus-visible {
    outline: 2px solid var(--l-cyan);
    outline-offset: 3px;
}

.pvpl-legal__article hr {
    margin: 1.75rem 0;
    border: 0;
    border-top: 1px solid var(--l-line);
}

@media (min-width: 992px) {
    .pvpl-footer__grid {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 2.5rem;
    }

    .pvpl-footer__center {
        text-align: center;
    }

    .pvpl-footer__links {
        justify-content: center;
    }

    .pvpl-footer__note {
        margin-inline: auto;
    }

    .pvpl-footer__right {
        text-align: right;
    }
}

/* =========================================================================
   Reveal-on-scroll

   Hidden state is applied ONLY once JS has marked the document, so a failed
   or blocked script can never leave the page blank.
   ========================================================================= */

.pvpl-js .pvpl-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    will-change: opacity, transform;
}

.pvpl-js .pvpl-reveal.is-in {
    opacity: 1;
    transform: none;
}

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

    /* Layout must be identical with motion off — reveal targets simply start
       in their final state. */
    .pvpl-js .pvpl-reveal,
    .pvpl-js .pvpl-reveal.is-in {
        opacity: 1;
        transform: none;
    }

    .pvpl-hero__stage {
        transform: none !important;
    }

    .pvpl-btn:hover .pvpl-btn__arrow,
    .pvpl-feature:hover {
        transform: none;
    }
}

/* =========================================================================
   06 / PRICING

   Built from the same tokens as every other section — panel surface, blue
   hairline, the shared button classes — so it reads as part of the page
   rather than a block borrowed from somewhere else.
   ========================================================================= */

.pvpl-pricing__head {
    max-width: 44rem;
}

.pvpl-pricing__head .pvpl-copy {
    margin-top: 0.9rem;
}

.pvpl-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: clamp(2rem, 3.2vw, 3rem);
}

.pvpl-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 2.2vw, 2rem);
    border: 1px solid var(--l-line);
    border-radius: var(--l-radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%),
        var(--l-panel);
}

/* The monthly plan is the one most people end up on, so it gets the accent —
   not a "most popular" badge the page has no numbers to back up. */
.pvpl-plan--featured {
    border-color: var(--l-line-3);
    background: linear-gradient(180deg, rgba(31, 140, 255, 0.10), transparent 52%),
        var(--l-panel-2);
}

/* Out of the flow on purpose: in the flow it would push the monthly card's name
   down by its own height and break the three-card row's alignment. Sits in the
   card's own padding, opposite the name, which is one short word on every plan. */
.pvpl-plan__badge {
    position: absolute;
    top: clamp(1.5rem, 2.2vw, 2rem);
    right: clamp(1.5rem, 2.2vw, 2rem);
    margin: 0;
    color: var(--l-cyan);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
}

.pvpl-plan__name {
    margin: 0;
    /* Keeps the name clear of the badge on the featured card at every width. */
    padding-right: 6.5rem;
    color: var(--l-fg-2);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.pvpl-plan__price {
    margin: 0.65rem 0 0;
    color: var(--l-fg);
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.pvpl-plan__note {
    margin: 0.5rem 0 0;
    color: var(--l-fg-3);
    font-size: 0.92rem;
    line-height: 1.55;
    min-height: 2.9em;
}

.pvpl-plan__cta {
    margin-top: 1.35rem;
    width: 100%;
    justify-content: center;
}

/* -------------------------------------------------------------------------
   Release notes page.

   Same panel language as the plan and trial cards — one hairline, same radius,
   same surface — so the page belongs to the site rather than looking like a
   changelog tool. Capped measure: a release note is read, not scanned, and a
   1200px line of Turkish is not readable.
   ------------------------------------------------------------------------- */
.pvpl-relnote {
    max-width: 46rem;
    margin: 0 auto 1.25rem;
    padding: clamp(1.4rem, 2.2vw, 2rem);
    border: 1px solid var(--l-line);
    border-radius: var(--l-radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%),
        var(--l-panel);
}

.pvpl-relnote:last-child {
    margin-bottom: 0;
}

/* The current release gets the same accent the featured plan card gets. */
.pvpl-relnote:first-child {
    border-color: var(--l-line-3);
    background: linear-gradient(180deg, rgba(31, 140, 255, 0.10), transparent 52%),
        var(--l-panel-2);
}

/* Wraps to two rows on a phone instead of squeezing the badge into the date. */
.pvpl-relnote__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 1rem;
}

.pvpl-relnote__ver {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    color: var(--l-fg);
    font-size: clamp(1.15rem, 1.9vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pvpl-relnote__date {
    margin: 0;
    color: var(--l-fg-3);
    font-size: 0.87rem;
}

.pvpl-relnote__summary {
    margin: 0.85rem 0 0;
    color: var(--l-fg-2);
    font-size: 0.97rem;
    line-height: 1.6;
}

.pvpl-relnote__group {
    margin-top: 1.1rem;
}

.pvpl-relnote__group-title {
    margin: 0 0 0.5rem;
    color: var(--l-cyan);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pvpl-relnote__list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--l-fg-2);
    font-size: 0.95rem;
    line-height: 1.6;
}

.pvpl-relnote__group .pvpl-relnote__list {
    margin-top: 0;
}

.pvpl-relnote__list li {
    position: relative;
    padding-left: 1.1rem;
}

.pvpl-relnote__list li + li {
    margin-top: 0.35rem;
}

.pvpl-relnote__list li::before {
    content: "";
    position: absolute;
    top: 0.66em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--l-cyan);
}

.pvpl-relnote__actions {
    margin-top: 1.35rem;
}

/* The purchase facts under the plans. A quiet inline row on a wide screen, a
   plain stacked list on a phone — no panel, so it reads as a footnote to the
   cards rather than as a fourth card. */
.pvpl-pricing__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--l-fg-3);
    font-size: 0.87rem;
    line-height: 1.55;
}

.pvpl-pricing__facts li {
    position: relative;
    padding-left: 1rem;
}

.pvpl-pricing__facts li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--l-cyan);
}

@media (max-width: 900px) {
    .pvpl-plans {
        grid-template-columns: minmax(0, 1fr);
    }

    .pvpl-plan__note {
        min-height: 0;
    }
}

/* -------------------------------------------------------------------------
   Trial card — the free trial, ahead of the priced plans.

   Same panel geometry as .pvpl-plan (radius, surface, hairline) so it belongs
   to the catalog; the cyan border and the accent price are the only things
   separating it. Phone: one stacked column. From 768px: copy on the left,
   price and CTA on the right, so it stays a band rather than a tall block.
   ------------------------------------------------------------------------- */

.pvpl-trialcard {
    display: grid;
    gap: 1.25rem;
    margin-top: clamp(2rem, 3.2vw, 3rem);
    padding: clamp(1.5rem, 2.2vw, 2rem);
    border: 1px solid var(--l-line-3);
    border-radius: var(--l-radius-lg);
    background: linear-gradient(180deg, rgba(31, 140, 255, 0.12), transparent 58%),
        var(--l-panel-2);
}

.pvpl-trialcard__eyebrow {
    margin: 0;
    color: var(--l-cyan);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.pvpl-trialcard__name {
    margin: 0.55rem 0 0;
    color: var(--l-fg);
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.pvpl-trialcard__list {
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.pvpl-trialcard__list li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--l-fg-2);
    font-size: 0.93rem;
    line-height: 1.5;
}

/* Drawn, not a text tick: no font has to resolve for the list to read. */
.pvpl-trialcard__list li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.42em;
    width: 0.62rem;
    height: 0.34rem;
    border-left: 2px solid var(--l-cyan);
    border-bottom: 2px solid var(--l-cyan);
    transform: rotate(-45deg);
}

/* Holds the two actions: the trial and the Windows build. Stacked and stretched
   until there is room for them on one line, so they share an edge instead of
   sitting at two ragged widths. Gaps are the hero's — 0.75rem stacked, 0.9rem in
   a row — because this is the same pair of buttons in a different place. No
   margin on the buttons: the card's own grid gap is the only space between the
   list and this column. */
.pvpl-trialcard__side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.pvpl-trialcard__cta {
    width: 100%;
    min-height: 3.25rem;
    justify-content: center;
}

/* The hand-off line between the free trial and the priced plans. */
.pvpl-pricing__bridge {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: clamp(1.75rem, 2.8vw, 2.5rem) 0 0;
    color: var(--l-fg-3);
    font-size: 0.9rem;
}

.pvpl-pricing__bridge::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--l-line);
}

.pvpl-plans {
    margin-top: 1.1rem;
}

@media (min-width: 768px) {
    .pvpl-trialcard {
        grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
        align-items: center;
        gap: 2rem;
    }

    .pvpl-trialcard__side {
        text-align: right;
    }
}

/* Both actions on one line beside the list. Held back to 1024px on purpose: at
   768 the pair needs more width than the side column has, and taking it from the
   copy would wrap the list and make the card taller — the opposite of what this
   band is for. `auto` sizes the column to exactly the two buttons, so the card
   grows by nothing. */
@media (min-width: 1024px) {
    .pvpl-trialcard {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pvpl-trialcard__side {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 0.9rem;
    }

    .pvpl-trialcard__cta {
        min-height: 0;
        width: auto;
    }
}

/* =========================================================================
   02 / SHOWCASE — layered product wall

   One stage, seven absolutely-positioned layers. No grid, no flex row: each
   layer gets left/top/width as a percentage of the stage, and the stage keeps
   a fixed ratio, so the whole composition scales as a single picture.

   Nothing clips a capture. A layer carries a width only; its height comes from
   the file's own aspect ratio via height:auto, and the stage never hides
   overflow. Depth is scale, position, z-order, shadow and a few degrees of
   rotation — never blur, never a mask.
   ========================================================================= */

.pvpl-showcase__head {
    max-width: 44rem;
    margin-bottom: clamp(1rem, 1.8vw, 1.75rem);
}

.pvpl-showcase__head .pvpl-copy {
    margin-top: 0.75rem;
}

.pvpl-wall {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 420;
    perspective: 2400px;
    perspective-origin: 50% 42%;
}

/* Barely-there light behind the hero screen, so the wall sits on something. */
.pvpl-wall__glow {
    position: absolute;
    inset: 6% 4% -8%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(48% 54% at 50% 56%, rgba(31, 140, 255, 0.17), transparent 72%),
        radial-gradient(70% 60% at 50% 72%, rgba(8, 18, 30, 0.9), transparent 78%);
}

.pvpl-layer {
    position: absolute;
    left: var(--l-x);
    top: var(--l-y);
    width: var(--l-w);
    margin: 0;
    border: 1px solid var(--l-line-2);
    border-radius: 10px;
    background: var(--l-panel);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* The capture itself: full width of its layer, height from its own ratio. */
.pvpl-layer img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

/* --- Depth tiers ------------------------------------------------------- */

.pvpl-layer--back {
    z-index: 1;
    opacity: 0.9;
    box-shadow: 0 12px 30px rgba(3, 9, 18, 0.55);
}

.pvpl-layer--mid {
    z-index: 3;
    opacity: 0.97;
    box-shadow: 0 20px 44px rgba(3, 9, 18, 0.66);
}

.pvpl-layer--front {
    z-index: 6;
    border-color: var(--l-line-3);
    box-shadow: 0 34px 78px rgba(2, 7, 16, 0.8), 0 0 70px rgba(31, 140, 255, 0.16);
}

/* --- Per-layer attitude ------------------------------------------------ */

.pvpl-layer--account {
    transform: rotateY(7deg) rotateZ(-0.6deg);
}

.pvpl-layer--subscription {
    z-index: 2;
    transform: rotateY(0.5deg);
}

.pvpl-layer--devices {
    transform: rotateY(-7deg) rotateZ(0.6deg);
}

.pvpl-layer--profiles {
    transform: rotateY(8deg) rotateZ(-1deg);
}

.pvpl-layer--support {
    transform: rotateY(-8deg) rotateZ(1deg);
}

.pvpl-layer--recovery {
    z-index: 4;
    transform: rotateY(-7deg) rotateZ(1deg);
}

.pvpl-layer--attack {
    transform: none;
}

@media (hover: hover) {
    .pvpl-layer:hover {
        z-index: 9;
        border-color: var(--l-line-3);
        box-shadow: 0 38px 84px rgba(2, 7, 16, 0.82), 0 0 60px rgba(31, 140, 255, 0.2);
    }

    .pvpl-layer--attack:hover {
        transform: translateY(-8px) scale(1.02);
    }

    .pvpl-layer--account:hover {
        transform: translateY(-8px) scale(1.02) rotateY(7deg) rotateZ(-0.6deg);
    }

    .pvpl-layer--subscription:hover {
        transform: translateY(-8px) scale(1.02) rotateY(0.5deg);
    }

    .pvpl-layer--devices:hover {
        transform: translateY(-8px) scale(1.02) rotateY(-7deg) rotateZ(0.6deg);
    }

    .pvpl-layer--profiles:hover {
        transform: translateY(-8px) scale(1.02) rotateY(8deg) rotateZ(-1deg);
    }

    .pvpl-layer--support:hover {
        transform: translateY(-8px) scale(1.02) rotateY(-8deg) rotateZ(1deg);
    }

    .pvpl-layer--recovery:hover {
        transform: translateY(-8px) scale(1.02) rotateY(-7deg) rotateZ(1deg);
    }
}

/* Back layers arrive first, Attack last, so the wall builds from behind. */
.pvp-landing.pvpl-js .pvpl-wall .pvpl-layer {
    opacity: 0;
    transform: translateY(15px);
}

.pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer {
    animation: pvpl-layer-in 0.62s cubic-bezier(0.22, 0.75, 0.3, 1) forwards;
    animation-delay: calc(var(--l-i) * 70ms);
}

@keyframes pvpl-layer-in {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Rotated layers animate to their own resting transform, not to none. */
.pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer--account { animation-name: pvpl-in-account; }
.pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer--subscription { animation-name: pvpl-in-subscription; }
.pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer--devices { animation-name: pvpl-in-devices; }
.pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer--profiles { animation-name: pvpl-in-profiles; }
.pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer--support { animation-name: pvpl-in-support; }
.pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer--recovery { animation-name: pvpl-in-recovery; }

@keyframes pvpl-in-account { to { opacity: 0.9; transform: rotateY(7deg) rotateZ(-0.6deg); } }
@keyframes pvpl-in-subscription { to { opacity: 0.9; transform: rotateY(0.5deg); } }
@keyframes pvpl-in-devices { to { opacity: 0.9; transform: rotateY(-7deg) rotateZ(0.6deg); } }
@keyframes pvpl-in-profiles { to { opacity: 0.97; transform: rotateY(8deg) rotateZ(-1deg); } }
@keyframes pvpl-in-support { to { opacity: 0.97; transform: rotateY(-8deg) rotateZ(1deg); } }
@keyframes pvpl-in-recovery { to { opacity: 0.97; transform: rotateY(-7deg) rotateZ(1deg); } }

/* --- Tablet: same wall, flatter and a little taller -------------------- */

@media (max-width: 1180px) {
    .pvpl-wall {
        aspect-ratio: 1000 / 470;
        perspective: 3200px;
    }

    .pvpl-layer--account { transform: rotateY(4deg); }
    .pvpl-layer--devices { transform: rotateY(-4deg); }
    .pvpl-layer--profiles { transform: rotateY(4deg); }
    .pvpl-layer--support { transform: rotateY(-4deg); }
    .pvpl-layer--recovery { transform: rotateY(-4deg); }
}

/*
 * Phone: the wall would only shrink every screen past reading size, so it
 * becomes a snap strip instead. Same seven files, each one whole.
 */
@media (max-width: 860px) {
    .pvpl-wall {
        aspect-ratio: auto;
        perspective: none;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 86%;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-block: 0.25rem 0.9rem;
        margin-inline: calc(var(--l-gutter) * -1);
        padding-inline: var(--l-gutter);
        -webkit-overflow-scrolling: touch;
    }

    .pvpl-wall__glow {
        display: none;
    }

    .pvpl-layer {
        position: static;
        width: auto;
        align-self: center;
        scroll-snap-align: center;
        opacity: 1;
        transform: none;
        box-shadow: 0 16px 36px rgba(3, 9, 18, 0.6);
    }

    /* Attack leads the strip; the rest keep the wall's back-to-front order. */
    .pvpl-layer--attack {
        order: -1;
    }

    .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer,
    .pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer--account { opacity: 0.9; transform: rotateY(7deg) rotateZ(-0.6deg); }
    .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer--subscription { opacity: 0.9; transform: rotateY(0.5deg); }
    .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer--devices { opacity: 0.9; transform: rotateY(-7deg) rotateZ(0.6deg); }
    .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer--profiles { opacity: 0.97; transform: rotateY(8deg) rotateZ(-1deg); }
    .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer--support { opacity: 0.97; transform: rotateY(-8deg) rotateZ(1deg); }
    .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer--recovery { opacity: 0.97; transform: rotateY(-7deg) rotateZ(1deg); }
}

/* =========================================================================
   Mobile trial bar

   Phone and narrow tablet only. Fixed to the bottom, revealed by the landing
   script once the hero CTA has scrolled away and hidden again as the closing
   CTA arrives, so it is never the thing covering the page's own last action
   or the footer.

   `hidden` in the markup does the work when JavaScript never runs: no bar at
   all rather than a bar that cannot be dismissed.
   ========================================================================= */

.pvpl-trialbar {
    position: fixed;
    z-index: 60;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem var(--l-gutter);
    /* The iPhone home indicator lives here; without this the CTA sits under it. */
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--l-line-2);
    background: rgba(8, 18, 30, 0.92);
    box-shadow: 0 -12px 30px rgba(3, 9, 18, 0.55);
    /* Starts out of the way and only slides in, so the first viewport is never
       covered by something the visitor has not scrolled past yet. */
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.24s ease, opacity 0.24s ease, visibility 0.24s;
}

@supports (backdrop-filter: blur(12px)) {
    .pvpl-trialbar {
        background: rgba(8, 18, 30, 0.78);
        backdrop-filter: blur(12px);
    }
}

.pvpl-trialbar.is-visible {
    transform: none;
    opacity: 1;
    visibility: visible;
}

.pvpl-trialbar[hidden] {
    display: none;
}

.pvpl-trialbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    max-width: calc(var(--l-container) + (var(--l-gutter) * 2));
    margin-inline: auto;
}

.pvpl-trialbar__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.pvpl-trialbar__title {
    color: var(--l-fg);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.pvpl-trialbar__sub {
    color: var(--l-fg-3);
    font-size: 0.78rem;
    line-height: 1.3;
}

.pvpl-trialbar__cta {
    flex: none;
    min-height: 2.9rem;
    padding-inline: 1.15rem;
    font-size: 0.92rem;
    white-space: nowrap;
}

/* 320-360px: the label is what has to survive, so the supporting line goes. */
@media (max-width: 359.98px) {
    .pvpl-trialbar {
        padding-inline: 0.85rem;
    }

    .pvpl-trialbar__sub {
        display: none;
    }

    .pvpl-trialbar__cta {
        padding-inline: 0.95rem;
    }
}

/* Desktop keeps the page it already had. */
@media (min-width: 992px) {
    .pvpl-trialbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pvpl-trialbar {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* SEO topic hub: /knight-online-macro                                  */
/* ------------------------------------------------------------------ */

.pvpl-topic__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1.25rem;
    color: var(--l-fg-2);
    font-size: 0.82rem;
}

.pvpl-topic__crumbs a {
    color: var(--l-cyan);
    text-decoration: none;
}

.pvpl-topic__crumbs a:hover,
.pvpl-topic__crumbs a:focus-visible {
    text-decoration: underline;
}

.pvpl-topic__hero .pvpl-hero__grid {
    grid-template-columns: 1fr;
}

.pvpl-topic__prose {
    max-width: 42rem;
}

.pvpl-topic__prose .pvpl-copy + .pvpl-copy {
    margin-top: 0.85rem;
}

.pvpl-topic__prose a {
    color: var(--l-cyan);
}

.pvpl-topic__shot {
    margin: 1.75rem 0 0;
    border: 1px solid color-mix(in srgb, var(--l-cyan) 18%, transparent);
    border-radius: 0.85rem;
    background: color-mix(in srgb, #03101d 88%, #000);
}

.pvpl-topic__shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

.pvpl-topic__jobs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.75rem;
}

.pvpl-topic__job {
    padding: 1.1rem 1.15rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--l-cyan) 14%, transparent);
    border-radius: 0.85rem;
    background: color-mix(in srgb, #071525 82%, transparent);
}

.pvpl-topic__job img {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    object-fit: contain;
    margin-bottom: 0.85rem;
}

.pvpl-topic__job h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pvpl-topic__job p {
    margin: 0.45rem 0 0;
    color: var(--l-fg-2);
    font-size: 0.92rem;
    line-height: 1.6;
}

.pvpl-topic__steps {
    margin-top: 1.5rem;
}

.pvpl-topic__inline-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.pvpl-topic__legal-note {
    margin: 1.75rem 0 0;
    max-width: 40rem;
    color: var(--l-fg-2);
    font-size: 0.88rem;
    line-height: 1.65;
}

.pvpl-topic__legal-note a {
    color: var(--l-cyan);
}

@media (min-width: 720px) {
    .pvpl-topic__jobs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .pvpl-topic__jobs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .pvpl-topic__jobs--usecase {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.pvpl-topic__job-link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.pvpl-topic__job-link:hover h3,
.pvpl-topic__job-link:focus-visible h3 {
    color: var(--l-cyan);
}

.pvpl-topic__job-link:focus-visible {
    outline: 2px solid var(--l-cyan);
    outline-offset: 4px;
    border-radius: 0.75rem;
}

.pvpl-char__badge {
    margin: 1.1rem 0 0;
}

.pvpl-char__badge img {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
}

.pvpl-char__siblings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    margin: 1.35rem 0 0;
    padding: 0;
    list-style: none;
}

.pvpl-char__siblings a {
    color: var(--l-cyan);
    text-decoration: none;
    font-weight: 650;
}

.pvpl-char__siblings a:hover,
.pvpl-char__siblings a:focus-visible {
    text-decoration: underline;
}