/*
 * Persona landing pages - templates/persona-landing.php
 *
 * Enqueued conditionally from functions.php when the current request
 * matches the "SpotRivals Persona Landing" page template.
 *
 * Conventions:
 *   .cwPersonaPage  - root marker on <main>, scopes everything below
 *   .cwPersonaSaas / .cwPersonaAgencies / .cwPersonaEcom - per-persona accent
 *   .pl*            - persona-landing components (own namespace, no global leak)
 *   .row / .container are scoped UNDER .cwPersonaPage so they cannot leak
 *                    onto other templates that may define their own.
 */

/* ──────────────────────────────────────────────
   Persona accent token - single CSS variable used
   for every accent surface in the page.
   ────────────────────────────────────────────── */

.cwPersonaPage.cwPersonaSaas {
    --personaAccent:        var(--clrPrimary);
    --personaAccentDark:    var(--clrPrimaryDark);
    --personaAccentSoft:    var(--clrPrimarySoft);
    --personaAccentInk:     #FFFFFF;
}
.cwPersonaPage.cwPersonaAgencies {
    --personaAccent:        var(--clrAccent);
    --personaAccentDark:    var(--clrAccentDark);
    --personaAccentSoft:    var(--clrAccentSoft);
    --personaAccentInk:     #FFFFFF;
}
.cwPersonaPage.cwPersonaEcom {
    --personaAccent:        var(--clrSuccess);
    --personaAccentDark:    var(--clrSuccessText);
    --personaAccentSoft:    var(--clrSuccessSoft);
    --personaAccentInk:     #FFFFFF;
}

/* ──────────────────────────────────────────────
   Layout scaffolding - row / container
   .row IS the visible rounded block (the "card"). Each
   section is a thin wrapper that handles outer spacing;
   the row inside is what the visitor reads as a
   self-contained block. Inner .container just centers
   the content and caps line length.

   Override the global `main > section` rule from style.css
   so the section itself does not double-pad against .row.
   ────────────────────────────────────────────── */

main.cwPersonaPage > section {
    max-width: 1280px;
    margin-inline: auto;
    padding: clamp(0.5rem, 1.5vw, 1rem) clamp(0.75rem, 2.5vw, 1.5rem);
}

main.cwPersonaPage > section > .row {
    border-radius: var(--radiusXl);
    background: var(--clrSurface);
    box-shadow: var(--shadowCard);
    padding-block: clamp(3rem, 6vw, 5rem);
    margin-block: clamp(0.5rem, 1.5vw, 1rem);
    overflow: hidden;
    position: relative;
}

main.cwPersonaPage > section > .row > .container {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 4vw, 3rem);
}

/* Per-section row backgrounds. The hero is the only block
   without a card treatment - it sits open on the page so the
   site's body gradient bleeds through. Every other section is
   a rounded floating block. */
main.cwPersonaPage > section.plHeroRow > .row {
    background: transparent;
    box-shadow: none;
    padding-block: clamp(2rem, 5vw, 4rem);
}
main.cwPersonaPage > section.plCapabilityRow > .row { background: var(--clrSurface); }
main.cwPersonaPage > section.plDigestRow     > .row { background: var(--clrSurface); }
main.cwPersonaPage > section.plFounderRow    > .row {
    background: var(--clrInk);
    color: rgba(255,255,255,0.92);
}
main.cwPersonaPage > section.plFaqRow        > .row { background: var(--clrSurface); }

/* Pain + Compare ride the body gradient (no card). The inner cards
   and table provide their own visual structure, so the row itself
   stays open: no background, no shadow, no border. */
main.cwPersonaPage > section.plPainRow > .row,
main.cwPersonaPage > section.plCompareRow > .row {
    background: transparent;
    box-shadow: none;
}
main.cwPersonaPage > section.plCtaRow        > .row {
    background:
        radial-gradient(ellipse 80% 60% at 30% 0%, color-mix(in srgb, var(--personaAccent) 22%, transparent), transparent 70%),
        var(--clrInk);
    color: rgba(255,255,255,0.92);
}

/* ──────────────────────────────────────────────
   Section header - shared eyebrow + h2 + lead
   ────────────────────────────────────────────── */

.plSectionEyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--personaAccent);
    margin-bottom: 1rem;
}
.plSectionH2 {
    font-size: clamp(1.85rem, 3.5vw, 2.85rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: inherit;
    max-width: 24ch;
    margin: 0;
}
.plSectionLead {
    font-size: clamp(1.02rem, 1.4vw, 1.15rem);
    line-height: 1.6;
    color: var(--clrInk70);
    max-width: 62ch;
    margin: 1rem 0 0;
}
.plFounderRow .plSectionLead,
.plCtaRow .plSectionLead { color: rgba(255,255,255,0.7); }

/* ──────────────────────────────────────────────
   1. Hero
   ────────────────────────────────────────────── */

.plHeroRow .row { padding-top: clamp(1rem, 3vw, 2.5rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.plHeroRow .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.05rem;
}

/* Hero entrance - mirrors the homepage rise pattern so the persona
   pages feel alive on load, not static. */
@media (prefers-reduced-motion: no-preference) {
    .plHeroRow > .row > .container > * {
        opacity: 0;
        transform: translateY(14px);
        animation: plRise 900ms var(--ease) forwards;
    }
    .plHeroRow .plEyebrow    { animation-delay:  40ms; }
    .plHeroRow .plH1         { animation-delay: 140ms; }
    .plHeroRow .plLead       { animation-delay: 260ms; }
    .plHeroRow .plCtaPair    { animation-delay: 380ms; }
    .plHeroRow .plMetaStrip  { animation-delay: 460ms; }
}
@keyframes plRise {
    to { opacity: 1; transform: translateY(0); }
}

.plEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem 0.5rem 0.85rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--clrBorder);
    border-radius: var(--radiusPill);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clrInk85);
    letter-spacing: -0.005em;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Tint the pulseDot to match the persona accent on this page. */
.cwPersonaPage .pulseDot {
    background: var(--personaAccent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--personaAccent) 22%, transparent);
}
@keyframes plPulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--personaAccent) 22%, transparent); }
    50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--personaAccent) 4%,  transparent); }
}
.cwPersonaPage .pulseDot { animation: plPulse 2.4s var(--ease) infinite; }

.plH1 {
    font-size: clamp(2.5rem, 6.5vw, 5.25rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.038em;
    max-width: 22ch;
    margin: 0.35rem auto 0;
}
.plH1 mark {
    background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--personaAccent) 28%, transparent) 60%);
    color: inherit;
    padding: 0 0.08em;
}

.plLead {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.55;
    color: var(--clrInk70);
    max-width: 58ch;
    margin: 0.35rem auto 0;
}

.plCtaPair {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

.plMetaStrip {
    font-size: 0.82rem;
    color: var(--clrMuted);
    letter-spacing: 0.02em;
    margin-top: 0.1rem;
}
.plMetaStrip span { color: var(--clrInk40); margin-inline: 0.55em; }

/* ──────────────────────────────────────────────
   2. Capability grid - "what we watch for you".
   Six cards demonstrating real product capability.
   Cards scroll-reveal via Motion JS (template inline),
   so the hidden initial state is gated behind html.hasJs
   so no-JS users still see content.
   ────────────────────────────────────────────── */

.plCapabilityRow .container { max-width: var(--container); }

.plCapabilitiesList {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
}
@media (max-width: 880px) {
    .plCapabilitiesList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .plCapabilitiesList { grid-template-columns: 1fr; }
}

.plCapabilityCard {
    height: 100%;
    padding: 1.6rem 1.5rem 1.7rem;
    background: var(--clrSurface);
    border: 1px solid var(--clrBorder);
    border-radius: var(--radiusMd);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.plCapabilityCard:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--personaAccent) 40%, var(--clrBorder));
    box-shadow: var(--shadowCard);
}

.plCapabilityIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radiusSm);
    background: color-mix(in srgb, var(--personaAccent) 12%, transparent);
    color: var(--personaAccent);
}
.plCapabilityIcon svg { width: 22px; height: 22px; }

.plCapabilityTitle {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.012em;
    color: var(--clrInk);
    margin: 0;
}
.plCapabilityDesc {
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--clrInk70);
    margin: 0;
}

/* Reveal-on-scroll is delegated to the global theme.min.js. Adding
   `.featureCard` to each capability card (in the template) makes the
   existing inView system pick them up - same animation as the homepage
   cards, no parallel motion logic. */

/* ──────────────────────────────────────────────
   3. Pain - three-card grid
   ────────────────────────────────────────────── */

.plPainList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
}

.plPainCard {
    height: 100%;
    padding: 1.85rem 1.6rem 1.85rem;
    background: var(--clrSurface);
    border: 1px solid var(--clrBorder);
    border-radius: var(--radiusMd);
    /* Accent stripe via inset shadow so it follows the border-radius
       cleanly without aliasing against the corner curves. */
    box-shadow:
        inset 0 3px 0 0 var(--personaAccent),
        var(--shadowCard);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.plPainCard:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 3px 0 0 var(--personaAccent),
        var(--shadowLift);
}

.plPainIndex {
    font-family: var(--fontMono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--clrMuted);
    margin: 0 0 0.65rem;
}
.plPainTitle {
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--clrInk);
    margin: 0 0 0.55rem;
}
.plPainBody {
    font-size: 0.97rem;
    line-height: 1.6;
    color: var(--clrInk70);
    margin: 0;
}

/* ──────────────────────────────────────────────
   4. Digest - sample Monday email mockup
   ────────────────────────────────────────────── */

.plDigestMock {
    margin: 2.75rem auto 0;
    max-width: 720px;
}

.plDigestEmail {
    background: var(--clrSurface);
    border: 1px solid var(--clrBorderStrong);
    border-radius: var(--radiusLg);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--shadowLift);
    position: relative;
    overflow: hidden;
}
.plDigestEmail::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--personaAccent), var(--personaAccentDark));
}

.plDigestSubject {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    align-items: baseline;
    padding-bottom: 1.25rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px dashed var(--clrBorder);
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--clrInk85);
    line-height: 1.4;
}
.plDigestSubjectLabel {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clrMuted);
    padding: 0.18rem 0.55rem;
    background: var(--clrPaperDeep);
    border-radius: var(--radiusPill);
}

.plDigestBlock + .plDigestBlock { margin-top: 1.5rem; }

.plDigestBlockLabel {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clrMuted);
    margin: 0 0 0.65rem;
}

.plDigestBlockHeadline { padding-bottom: 1.25rem; border-bottom: 1px dashed var(--clrBorder); }
.plDigestHeadlineBody {
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--clrInk);
    margin: 0;
}

.plDigestChanges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.plDigestChange {
    padding: 1rem 1.15rem 1.05rem;
    background: var(--clrPaper);
    border: 1px solid var(--clrBorder);
    border-radius: var(--radiusMd);
    border-left: 3px solid var(--clrMuted);
}
.plDigestChange-critical    { border-left-color: var(--personaAccent); background: color-mix(in srgb, var(--personaAccentSoft) 60%, var(--clrPaper)); }
.plDigestChange-important   { border-left-color: var(--clrWarn); }
.plDigestChange-worth-noting { border-left-color: var(--clrMuted); }

.plDigestChangeMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--clrInk70);
    margin: 0 0 0.4rem;
}
.plDigestSev {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.18rem 0.55rem;
    border-radius: var(--radiusPill);
    background: var(--clrPaperDeep);
    color: var(--clrInk85);
}
.plDigestChange-critical .plDigestSev    { background: var(--personaAccent); color: var(--personaAccentInk); }
.plDigestChange-important .plDigestSev   { background: var(--clrWarnSoft); color: var(--clrWarnText); }
.plDigestChange-worth-noting .plDigestSev{ background: var(--clrPaperDeep); color: var(--clrInk70); }

.plDigestChangeSummary {
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--clrInk85);
    margin: 0;
}
.plDigestChangeAction {
    margin: 0.55rem 0 0;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--clrBorder);
    font-size: 0.91rem;
    line-height: 1.55;
    color: var(--clrInk70);
}
.plDigestArrow { color: var(--personaAccent); font-weight: 700; margin-right: 0.25rem; }

.plDigestBlockPattern,
.plDigestBlockAction {
    padding: 1.1rem 1.25rem;
    border-radius: var(--radiusMd);
    background: var(--clrPaperDeep);
    color: var(--clrInk85);
    font-size: 0.95rem;
    line-height: 1.55;
}
.plDigestBlockPattern p,
.plDigestBlockAction p { margin: 0; }

.plDigestBlockAction {
    background: color-mix(in srgb, var(--personaAccentSoft) 70%, var(--clrPaperDeep));
    border: 1px solid color-mix(in srgb, var(--personaAccent) 25%, transparent);
}

.plDigestCaption {
    font-size: 0.85rem;
    color: var(--clrMuted);
    text-align: center;
    margin-top: 1rem;
}

/* ──────────────────────────────────────────────
   5. Comparison table
   ────────────────────────────────────────────── */

.plCompareTableWrap {
    margin-top: 2.5rem;
    border: 1px solid var(--clrBorder);
    border-radius: var(--radiusLg);
    overflow: hidden;
    background: var(--clrSurface);
    box-shadow: var(--shadowCard);
}

.plCompareTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.97rem;
}
.plCompareTable thead {
    background: var(--clrPaperDeep);
    color: var(--clrInk70);
}
.plCompareTable thead th {
    text-align: left;
    padding: 1.05rem 1.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.plCompareTable tbody th,
.plCompareTable tbody td {
    padding: 1.15rem 1.4rem;
    vertical-align: top;
    line-height: 1.55;
    border-top: 1px solid var(--clrBorder);
    background: var(--clrSurface);
}
.plCompareApproach {
    font-weight: 700;
    color: var(--clrInk);
    width: 22%;
    text-align: left;
}
.plCompareCost {
    color: var(--clrInk70);
    font-variant-numeric: tabular-nums;
    width: 24%;
}
.plCompareCatch {
    color: var(--clrInk70);
}
.plCompareWinner th,
.plCompareWinner td {
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--personaAccent) 22%, var(--clrSurface)),
            color-mix(in srgb, var(--personaAccent) 10%, var(--clrSurface)));
    border-top: 2px solid var(--personaAccent);
    color: var(--clrInk);
}
.plCompareWinner .plCompareApproach {
    color: var(--personaAccentDark);
    font-weight: 800;
}
.plCompareWinner .plCompareCatch { color: var(--clrInk85); }

/* On narrow screens the table re-flows into stacked cards. */
@media (max-width: 720px) {
    .plCompareTable, .plCompareTable thead, .plCompareTable tbody, .plCompareTable tr, .plCompareTable th, .plCompareTable td {
        display: block;
    }
    .plCompareTable thead { display: none; }
    .plCompareTable tbody tr {
        padding: 1rem 1.1rem;
        border-top: 1px solid var(--clrBorder);
    }
    .plCompareTable tbody th,
    .plCompareTable tbody td {
        padding: 0.25rem 0;
        border: 0;
        background: transparent;
        width: auto;
    }
    .plCompareTable .plCompareApproach { font-size: 1.05rem; }
    .plCompareTable .plCompareCost::before { content: "Cost: "; color: var(--clrMuted); font-weight: 600; }
    .plCompareTable .plCompareCatch { margin-top: 0.45rem; }
    .plCompareWinner { background: color-mix(in srgb, var(--personaAccent) 8%, transparent); }
    .plCompareWinner th, .plCompareWinner td { background: transparent; border: 0; }
}

/* ──────────────────────────────────────────────
   6. Founder's note - left-aligned letter style.
   Stand-in for a testimonial while the product is
   pre-launch and we have no real customer quotes yet.
   ────────────────────────────────────────────── */

.plFounderRow .container {
    max-width: 720px;
}
.plFounder {
    margin: 0;
    text-align: left;
}
.plFounderEyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--personaAccent);
    margin: 0 0 1.5rem;
}
.plFounderOpener {
    font-size: clamp(1.3rem, 2.3vw, 1.75rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.018em;
    color: rgba(255,255,255,0.96);
    margin: 0 0 1.4rem;
    max-width: 36ch;
}
.plFounderBody {
    font-size: 1.02rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.74);
    margin: 0 0 1rem;
    max-width: 62ch;
}
.plFounderBody:last-of-type { margin-bottom: 1.75rem; }

.plFounderSign {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255,255,255,0.14);
    width: 100%;
}
.plFounderSignMark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--personaAccent);
    color: var(--personaAccentInk);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
}
.plFounderSignNames {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.3;
}
.plFounderSignNames strong {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1rem;
}
.plFounderSignNames span {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
}

/* ──────────────────────────────────────────────
   7. FAQ
   ────────────────────────────────────────────── */

/* FAQ - mirrors the homepage's flat hairline-divider treatment exactly.
   Rules copied from inc/css/homepage.css (which only loads on the
   homepage). The plus icon is a centered SVG inside a circular soft-tint
   chip, rotating 45deg into a cross when open. */
.faqSection details {
    border-bottom: 1px solid var(--clrBorder);
    padding: 1.75rem 0;
}
.faqSection details:first-of-type {
    border-top: 1px solid var(--clrBorder);
}
.faqSection summary {
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    letter-spacing: -0.013em;
    color: var(--clrInk);
}
.faqSection summary::-webkit-details-marker { display: none; }
.faqSection summary::after {
    content: "";
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--clrPrimarySoft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2.5' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px 12px;
    transition: transform 320ms var(--ease), background-color 200ms var(--ease);
}
.faqSection details[open] summary::after { transform: rotate(45deg); }
.faqSection details p {
    margin-top: 1rem;
    color: var(--clrInk70);
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.7;
}
.faqSection details p em {
    color: var(--clrAccent);
    font-style: italic;
}

/* ──────────────────────────────────────────────
   8. CTA
   ────────────────────────────────────────────── */

.plCtaRow .container {
    text-align: center;
    max-width: 780px;
}
.plCtaH2 {
    font-size: clamp(1.85rem, 3.8vw, 2.85rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    margin: 0 auto;
    max-width: 22ch;
}
.plCtaLead {
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.7);
    margin: 1rem auto 1.5rem;
    max-width: 50ch;
}
.plCtaRow .plCtaPair { justify-content: center; }
.plCtaRow .ghostButton {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.92);
}
.plCtaRow .ghostButton:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.32);
    color: #FFFFFF;
}

/* ──────────────────────────────────────────────
   Reduced motion
   ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cwPersonaPage .pulseDot { animation: none; }
}