/* ==========================================================================
   portal-space.css — the EternityArc "space" design language on the Provider Portal
   ==========================================================================

   The same language as EternityArc's sign-in pages and setup wizard (EternityArc/wwwroot/auth-shell.css and
   space.css): the navy brand gradient with a deep-space backdrop, 11px buttons filled with the
   blue gradient, soft filled fields, and surfaces separated by soft shadows rather than borders
   ("soft, not boxy"). The registrant meets this portal first and EternityArc's setup wizard next, so
   the two should read as one product.

   Loads after app.css, before focus.css. Everything is scoped to the portal's own .pp-* classes
   (plus the shared .dnx-setup-* / .dnx-stepper-* wizard vocabulary, only under .pp-wizard), so
   nothing here can reach a rule the portal does not own. Light-only, like the sign-in pages:
   the portal has no theme toggle. !important appears only where app.css already used it.

   The .nx-space-* block at the end is a copy of EternityArc's SpaceField styles (auth-shell.css) for
   the portal's copy of SpaceField.razor — the two apps ship separate static assets.
   ========================================================================== */

:root {
    --pp-brand: linear-gradient(160deg, #0a1638 0%, #16265e 45%, #1e3a8a 100%);
    --pp-cta: linear-gradient(120deg, #16308a, #1f4bc0);
    --pp-mark: linear-gradient(145deg, #16308a, #2b6fe0);
    --pp-accent: #2b6fe0;
    --pp-accent-text: #1f4bc0;
    --pp-accent-soft: #eaf0ff;
    --pp-ink: #12224d;
    --pp-body: #48526b;
    --pp-muted: #5f6b80;
    --pp-glow: #7dd3fc;
    --pp-field: #f1f4fa;
    --pp-field-hover: #ebeff7;
    --pp-tile: #f6f8fc;
    --pp-hairline: #e8edf5;
    --pp-soft-1: 0 1px 2px rgba(18, 34, 77, .06), 0 12px 32px -20px rgba(18, 34, 77, .35);
    --pp-soft-2: 0 1px 2px rgba(18, 34, 77, .06), 0 22px 40px -20px rgba(22, 48, 138, .5);
    --pp-line: linear-gradient(90deg, #16308a 0%, #2b6fe0 30%, #7dd3fc 55%, rgba(125, 211, 252, 0) 85%);
    /* A CSS-only starfield for the smaller navy bands (page heroes, CTA band, footer), so they
       carry the backdrop without a SpaceField element in every page's markup. */
    --pp-stars:
        radial-gradient(1.2px 1.2px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 27% 68%, #dbeafe, transparent),
        radial-gradient(1.4px 1.4px at 44% 14%, #fff, transparent), radial-gradient(1px 1px at 58% 80%, #bae6fd, transparent),
        radial-gradient(1.2px 1.2px at 71% 36%, #fff, transparent), radial-gradient(1px 1px at 83% 60%, #fde68a, transparent),
        radial-gradient(1.4px 1.4px at 91% 16%, #fff, transparent), radial-gradient(1px 1px at 6% 86%, #fff, transparent),
        radial-gradient(1px 1px at 36% 44%, #e0f2fe, transparent), radial-gradient(1.2px 1.2px at 66% 92%, #fff, transparent),
        radial-gradient(1px 1px at 20% 8%, #fff, transparent), radial-gradient(1px 1px at 96% 74%, #dbeafe, transparent);
}

@keyframes ppRise { from { opacity: 0; translate: 0 14px; } }
@keyframes ppFade { from { opacity: 0; } }
@keyframes ppSheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes ppPulse { 0% { scale: .9; opacity: .7; } 100% { scale: 1.7; opacity: 0; } }
@keyframes ppFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes ppDash { to { background-position: 24px 0; } }

/* ── Page canvas ─────────────────────────────────────────────────────────── */
body {
    background:
        radial-gradient(1000px 620px at 100% 0%, rgba(214, 226, 255, .55) 0%, transparent 70%),
        radial-gradient(900px 600px at 0% 100%, rgba(232, 224, 255, .45) 0%, transparent 70%),
        #f8faff;
    color: var(--pp-ink);
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.pp-navbar {
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 0;
}

.pp-navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--pp-line);
    opacity: .55;
    pointer-events: none;
}

.pp-brand-wordmark {
    filter: drop-shadow(0 1px 4px rgba(43, 111, 224, .25));
}

.pp-navbar-links a,
.pp-navbar-actions > a:not(.pp-btn),
.pp-navbar-user {
    color: var(--pp-ink) !important;
}

.pp-navbar-links a {
    position: relative;
}

.pp-navbar-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--pp-accent);
    transform: scaleX(0);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}

.pp-navbar-links a:hover::after,
.pp-navbar-links a.active::after {
    transform: scaleX(1);
}

.pp-navbar-links a:hover,
.pp-navbar-links a.active,
.pp-navbar-actions > a:not(.pp-btn):hover,
.pp-navbar-actions > a.active:not(.pp-btn) {
    color: var(--pp-accent-text) !important;
}

/* ── Buttons: the sign-in button's shape — 11px, gradient fill, one sheen pass on hover ── */
.pp-btn {
    position: relative;
    overflow: hidden;
    border-radius: 11px;
    font-weight: 650;
    border: 0;
    transition: transform .18s, box-shadow .18s, background-color .18s, border-color .18s;
}

.pp-btn-primary {
    background: var(--pp-cta);
    box-shadow: 0 10px 24px -10px rgba(22, 48, 138, .75);
}

.pp-btn-primary:hover {
    box-shadow: 0 16px 30px -12px rgba(22, 48, 138, .85);
}

.pp-btn-primary::after,
.pp-btn-light::after {
    content: "";
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: 0;
    width: 35%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
}

.pp-btn-light::after {
    background: linear-gradient(90deg, transparent, rgba(43, 111, 224, .14), transparent);
}

.pp-btn-primary:hover::after,
.pp-btn-light:hover::after {
    opacity: 1;
    animation: ppSheen .75s ease-in-out;
}

.pp-btn-secondary {
    background: #fff;
    border: 1px solid #dbe1ec;
    color: #3b4a6b !important;
    box-shadow: 0 1px 2px rgba(18, 34, 77, .06);
}

.pp-btn-secondary:hover {
    background: #f2f5fa;
    border-color: #c9d3e3;
    color: #3b4a6b !important;
}

.pp-btn-light {
    color: #16308a !important;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
}

.pp-btn-outline-light {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .32);
    backdrop-filter: blur(4px);
}

.pp-btn-outline-light:hover {
    background: rgba(255, 255, 255, .12);
}

.pp-btn:active {
    transform: translateY(1px);
}

/* ── Navy bands: home hero, page heroes, CTA band, footer ───────────────── */

/* Home hero. SpaceField sits behind; the copy and the visual sit above it. */
.pp-hero-dark {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--pp-brand);
    padding-top: 0;
}

.pp-hero-dark > .nx-space {
    z-index: -1;
}

/* The bottom dissolves into the page rather than ending on a hard edge — the approved blue→white
   seam, turned on its side as on the stacked (mobile) sign-in layout. */
.pp-hero-dark::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(248, 250, 255, 0), rgba(248, 250, 255, .0) 40%, rgba(125, 190, 255, .12));
}

.pp-hero-split {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(56px, 9vh, 96px) 2rem clamp(40px, 6vh, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.pp-hero-copy {
    text-align: left;
}

.pp-hero-copy .pp-eyebrow {
    color: rgba(190, 215, 255, .78);
    letter-spacing: .18em;
    animation: ppRise .8s .1s cubic-bezier(.22, 1, .36, 1) both;
}

.pp-hero-dark h1.pp-hero-dark-title {
    font-size: clamp(34px, 3.4vw, 54px) !important;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -.025em;
    text-wrap: balance;
    margin-bottom: 1.2rem;
    animation: ppRise .8s .16s cubic-bezier(.22, 1, .36, 1) both;
}

.pp-hero-dark-title em {
    font-style: normal;
    background: linear-gradient(90deg, #bfdbfe, #7dd3fc 60%, #a5b4fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pp-hero-copy .pp-hero-dark-sub {
    margin: 0 0 2rem;
    max-width: 36em;
    color: rgba(210, 225, 255, .86);
    font-size: clamp(15px, 1.05vw, 17.5px);
    animation: ppRise .8s .22s cubic-bezier(.22, 1, .36, 1) both;
}

.pp-hero-copy .pp-hero-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    animation: ppRise .8s .28s cubic-bezier(.22, 1, .36, 1) both;
}

.pp-hero-points {
    list-style: none;
    padding: 0;
    margin: 1.8rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    animation: ppFade 1s .5s both;
}

.pp-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
    font-weight: 600;
    color: rgba(210, 225, 255, .82);
}

.pp-hero-points i {
    color: #6ee7b7;
}

/* The hero visual: sources converging on a golden record. It floats on the gradient —
   no container, as on the sign-in pages ("boxes inside boxes read as a form, not a scene"). */
.pp-hero-visual {
    position: relative;
    animation: ppRise .9s .4s cubic-bezier(.22, 1, .36, 1) both;
}

/* Sources in a row, converging down onto the golden record, which gets the full column width. */
.pp-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.pp-flow-sources {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pp-flow-source {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(150, 185, 255, .16);
    font-size: .8rem;
    color: rgba(220, 232, 255, .9);
    animation: ppRise .6s cubic-bezier(.22, 1, .36, 1) both;
}

.pp-flow-source:nth-child(1) { animation-delay: .55s; }
.pp-flow-source:nth-child(2) { animation-delay: .65s; }
.pp-flow-source:nth-child(3) { animation-delay: .75s; }

.pp-flow-source i {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #bfdbfe;
    background: rgba(125, 190, 255, .14);
}

.pp-flow-source b {
    display: block;
    font-size: .82rem;
    color: #fff;
}

.pp-flow-source > div {
    min-width: 0;
}

.pp-flow-source span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: .7rem;
    color: rgba(190, 212, 255, .7);
}

/* Three dashed feeds, one under each source, drawn as one element. */
.pp-flow-arrow {
    height: 34px;
    margin: 0 16%;
    background:
        linear-gradient(rgba(125, 211, 252, .85), rgba(125, 211, 252, .15)) 0 0 / 2px 100% no-repeat,
        linear-gradient(rgba(125, 211, 252, .85), rgba(125, 211, 252, .15)) 50% 0 / 2px 100% no-repeat,
        linear-gradient(rgba(125, 211, 252, .85), rgba(125, 211, 252, .15)) 100% 0 / 2px 100% no-repeat;
}

.pp-golden {
    position: relative;
    padding: 18px 20px 16px;
    border-radius: 22px;
    color: #1a2340;
    background: linear-gradient(160deg, #fff, #eef3ff);
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .6);
    overflow: hidden;
}

.pp-golden::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    animation: ppSheen 4.5s 1.8s ease-in-out infinite;
}

.pp-golden-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.pp-golden-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #065f46;
    background: #ecfdf5;
}

.pp-golden-id {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: .72rem;
    color: #5f6b80;
}

.pp-golden-name {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pp-ink);
    margin-bottom: 10px;
}

.pp-golden-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-golden-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 120px;
    align-items: center;
    gap: 10px;
    font-size: .76rem;
}

.pp-golden-row dt {
    color: #5f6b80;
    font-weight: 600;
    margin: 0;
}

.pp-golden-row dd {
    margin: 0;
    color: var(--pp-ink);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-golden-trust {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pp-golden-trust > span {
    flex: 1;
    height: 5px;
    border-radius: 99px;
    background: #e6ebf5;
    overflow: hidden;
}

.pp-golden-trust > span > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #34d399, #2b6fe0);
}

.pp-golden-trust small {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: .66rem;
    color: #5f6b80;
}

.pp-golden-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e8edf5;
    font-size: .7rem;
    color: #5f6b80;
}

.pp-golden-foot b {
    color: var(--pp-ink);
}

/* Service strip: frosted pills on the gradient instead of a dark bar with dividers. */
.pp-hero-strip {
    position: relative;
    gap: .5rem;
    padding: 0 2rem clamp(40px, 6vh, 64px);
    border-top: 0;
    background: none;
}

.pp-hero-strip-item {
    border: 0;
    border-radius: 999px;
    padding: .6rem 1.1rem;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(150, 185, 255, .18);
    color: rgba(220, 232, 255, .85);
    transition: background .2s, box-shadow .2s, color .2s;
}

.pp-hero-strip-item:hover {
    background: rgba(255, 255, 255, .1);
}

.pp-hero-strip-item.active {
    color: #fff;
    background: rgba(96, 165, 250, .22);
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .55), 0 0 22px -6px rgba(96, 165, 250, .8);
}

.pp-hero-strip-item i,
.pp-hero-strip-item.active i {
    color: #bfdbfe;
}

.pp-hero-panel {
    position: relative;
    max-width: 780px;
    margin: -24px auto clamp(40px, 6vh, 64px);
    padding: 0 2rem;
    text-align: center;
    color: rgba(210, 225, 255, .86);
    font-size: .95rem;
    line-height: 1.6;
    animation: ppFade .4s both;
}

.pp-hero-panel b {
    color: #fff;
}

/* Secondary page heroes: a compact navy band with the CSS starfield. Full-bleed, like the home hero. */
.pp-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: none;
    width: 100vw;
    margin: 0 calc(50% - 50vw) 3rem;
    padding: clamp(52px, 8vh, 84px) 2rem clamp(48px, 7vh, 76px);
    background: var(--pp-stars), var(--pp-brand);
    color: #fff;
}

.pp-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(420px 300px at 88% 10%, rgba(165, 105, 230, .26), transparent 70%),
        radial-gradient(360px 280px at 8% 90%, rgba(45, 212, 191, .16), transparent 70%);
}

.pp-page-hero > * {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.pp-page-hero .pp-eyebrow {
    color: rgba(190, 215, 255, .78);
    letter-spacing: .18em;
    animation: ppRise .7s .05s cubic-bezier(.22, 1, .36, 1) both;
}

.pp-page-hero h1.pp-hero-title {
    font-size: clamp(30px, 2.8vw, 44px) !important;
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
    animation: ppRise .7s .1s cubic-bezier(.22, 1, .36, 1) both;
}

.pp-page-hero .pp-hero-sub {
    color: rgba(210, 225, 255, .86);
    animation: ppRise .7s .16s cubic-bezier(.22, 1, .36, 1) both;
}

/* ── Section rhythm ──────────────────────────────────────────────────────── */
.pp-kicker {
    display: block;
    text-align: center;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pp-accent);
    margin-bottom: .6rem;
}

h2.pp-section-title {
    font-size: clamp(24px, 2vw, 32px) !important;
    color: var(--pp-ink);
    letter-spacing: -.02em;
    text-wrap: balance;
}

.pp-section-sub {
    color: var(--pp-muted);
    max-width: 640px;
    line-height: 1.6;
}

.pp-services + .pp-services {
    border-top: 0;
}

.pp-block {
    padding-top: 4.5rem;
}

/* ── Stats band: soft tiles, figures in the brand gradient ───────────────── */
.pp-stats-band {
    border-bottom: 0;
    padding: 0;
    margin: 2.5rem 0 1rem;
    gap: 1rem;
}

.pp-stats-band-item {
    padding: 1.3rem 1rem;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
    animation: ppRise .6s cubic-bezier(.22, 1, .36, 1) both;
}

.pp-stats-band-item:nth-child(2) { animation-delay: .08s; }
.pp-stats-band-item:nth-child(3) { animation-delay: .16s; }
.pp-stats-band-item:nth-child(4) { animation-delay: .24s; }

.pp-stats-num {
    background: var(--pp-mark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pp-stats-label {
    color: var(--pp-muted);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
/* 200px, not app.css's 220px: five services fit one row at desktop width instead of 4 + 1. */
.pp-service-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.pp-service-card,
.pp-glossary-item,
.pp-faq-item,
.pp-admin-stat-card,
.pp-admin-card {
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
}

.pp-service-card {
    padding: 1.6rem 1.5rem 1.4rem;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s;
}

.pp-service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--pp-soft-2);
}

.pp-service-icon,
.pp-product-detail-icon,
.pp-usecase-icon {
    color: #fff;
    background: var(--pp-mark);
    box-shadow: 0 12px 24px -12px rgba(22, 48, 138, .8);
}

.pp-service-card h3,
.pp-product-detail-body h2,
.pp-usecase-body h2,
.pp-glossary-item dt,
.pp-faq-item summary {
    color: var(--pp-ink);
}

.pp-service-card p,
.pp-product-detail-body p,
.pp-glossary-item dd,
.pp-faq-item p {
    color: var(--pp-muted);
}

.pp-service-features li {
    background: var(--pp-accent-soft);
    color: var(--pp-accent-text);
}

.pp-service-link,
.pp-contact-info a,
.pp-signin-forgot a,
.pp-signin-register a {
    color: var(--pp-accent-text) !important;
}

.pp-service-link i {
    display: inline-block;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.pp-service-link:hover i {
    transform: translateX(4px);
}

.pp-service-link-muted {
    color: #5f6b7e !important; /* was #8a94a8: 3.05:1 on white, below AA */
}

.pp-usecase-industry {
    color: var(--pp-accent);
}

/* ── Timeline (How it works, the mastering lifecycle, pricing points) ────── */
/* Glowing nodes on a line — the sign-in journey steps, on a light ground. The line from each
   node to the next is the step's ::before; it only draws where the steps sit in one row. */
.pp-how-steps {
    position: relative;
}

.pp-how-step {
    position: relative;
    padding: 0 .4rem;
}

.pp-how-num {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    font-size: 1rem;
    color: #fff;
    background: radial-gradient(circle at 35% 30%, #3b82f6, #1e3a8a 78%);
    box-shadow: 0 0 0 6px #fff, 0 10px 26px -8px rgba(30, 58, 138, .8);
}

.pp-how-step h3,
.pp-how-step h4 {
    color: var(--pp-ink);
    margin-top: .3rem;
}

.pp-how-step p {
    color: var(--pp-muted);
}

@media (min-width: 861px) {
    .pp-how-steps:not(.pp-pricing-points) .pp-how-step:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 24px;
        left: calc(50% + 34px);
        right: calc(-50% + 34px - 1.5rem);
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, rgba(43, 111, 224, .55), rgba(125, 211, 252, .55));
    }
}

/* The lifecycle variant: six phases, each with its state tag. */
.pp-lifecycle {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.pp-phase-letter {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pp-accent);
    margin-top: .2rem;
}

.pp-phase-state {
    display: inline-block;
    margin-top: .5rem;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: .68rem;
    font-weight: 600;
    color: #3b4a6b;
    background: #eef2f9;
}

.pp-lifecycle .pp-how-step:last-child .pp-how-num,
.pp-lifecycle .pp-how-step:nth-last-child(2) .pp-how-num {
    background: radial-gradient(circle at 35% 30%, #34d399, #047857 80%);
    box-shadow: 0 0 0 6px #fff, 0 10px 26px -8px rgba(4, 120, 87, .7);
}

@media (max-width: 1100px) {
    .pp-lifecycle { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
    .pp-lifecycle .pp-how-step::before { display: none; }
}

@media (max-width: 600px) {
    .pp-lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Feature panels: an icon list on a soft tile (Home "enterprise-ready", Product foundation) ── */
.pp-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.pp-feature {
    display: flex;
    gap: 14px;
    padding: 1.2rem 1.25rem;
    border-radius: 18px;
    background: var(--pp-tile);
    transition: background .2s, box-shadow .2s;
}

.pp-feature:hover {
    background: #fff;
    box-shadow: var(--pp-soft-1);
}

.pp-feature > i {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    color: var(--pp-accent-text);
    background: var(--pp-accent-soft);
}

.pp-feature h3,
.pp-feature h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--pp-ink);
    margin: .15rem 0 .3rem;
}

.pp-feature p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--pp-muted);
}

/* Split section: copy on one side, a panel on the other. */
.pp-split {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.pp-split .pp-kicker,
.pp-split .pp-section-title,
.pp-split .pp-section-sub {
    text-align: left;
    margin-left: 0;
}

.pp-checks {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.pp-checks li {
    position: relative;
    padding-left: 1.9rem;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--pp-body);
}

.pp-checks li::before {
    content: "\F26E";
    font-family: bootstrap-icons !important;
    position: absolute;
    left: 0;
    top: .05rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .8rem;
    color: #fff;
    background: linear-gradient(145deg, #047857, #10b981);
}

.pp-checks strong {
    color: var(--pp-ink);
}

/* Platform "stack" chips (databases, identity providers). */
.pp-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.4rem;
}

.pp-logo-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
    font-size: .86rem;
    font-weight: 650;
    color: var(--pp-ink);
}

.pp-logo-chip i {
    color: var(--pp-accent);
}

.pp-logo-chip small {
    font-weight: 600;
    color: var(--pp-muted);
}

/* ── Product detail / use case rows: soft panels instead of hairline-separated rows ── */
.pp-product-detail,
.pp-usecase {
    border-top: 0;
    margin-bottom: 1.1rem;
    padding: 1.8rem 1.8rem 1.4rem;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
}

.pp-product-detail-list i {
    color: #10b981;
}

.pp-product-detail-list li {
    color: var(--pp-body);
}

.pp-product-tagline {
    display: inline-block;
    margin-bottom: .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-accent);
}

.pp-product-sub {
    margin: 1rem 0 .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pp-muted);
}

/* ── Compare (Why EternityArc) ─────────────────────────────────────────────────── */
.pp-compare-col {
    border: 0 !important;
    border-radius: 22px;
    padding: 1.7rem 1.8rem;
}

.pp-compare-before {
    background: #fff5f5;
}

.pp-compare-after {
    background: linear-gradient(160deg, #f3f7ff, #fff);
    box-shadow: 0 0 0 2px rgba(43, 111, 224, .35), var(--pp-soft-2);
}

.pp-compare-before h3 {
    color: #9f1239;
}

.pp-compare-after h3 {
    color: var(--pp-accent-text);
}

.pp-compare-after li::before {
    color: #10b981;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.pp-faq-item {
    padding: 1.1rem 1.4rem;
    transition: box-shadow .2s;
}

.pp-faq-item[open] {
    box-shadow: 0 0 0 1.5px rgba(43, 111, 224, .3), var(--pp-soft-1);
}

.pp-faq-item summary::before {
    color: var(--pp-accent);
}

/* ── Checklist (Resources) ───────────────────────────────────────────────── */
.pp-checklist {
    list-style: none;
    counter-reset: pp-check;
    padding-left: 0;
}

.pp-checklist li {
    counter-increment: pp-check;
    position: relative;
    padding: 1rem 1.2rem 1rem 3.6rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
    color: var(--pp-body);
}

.pp-checklist li::before {
    content: counter(pp-check);
    position: absolute;
    left: 1.1rem;
    top: 1rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    background: var(--pp-mark);
}

.pp-checklist a {
    color: var(--pp-accent-text) !important;
}

/* ── CTA band: the brand panel, compact ──────────────────────────────────── */
.pp-cta-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-top: 4.5rem;
    padding: 3rem 2rem;
    border-radius: 26px;
    background: var(--pp-stars), var(--pp-brand);
    box-shadow: 0 30px 60px -30px rgba(10, 22, 56, .7);
}

.pp-cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(360px 240px at 90% 0%, rgba(165, 105, 230, .3), transparent 70%),
                radial-gradient(320px 220px at 0% 100%, rgba(103, 196, 255, .22), transparent 70%);
}

.pp-cta-band h2 {
    color: #fff;
    font-size: clamp(22px, 1.8vw, 30px) !important;
}

.pp-cta-band p {
    color: rgba(210, 225, 255, .86);
}

/* On the navy band the primary action is the light button. */
.pp-cta-band .pp-btn-primary {
    background: #fff;
    color: #16308a !important;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
}

.pp-cta-band .pp-btn-primary::after {
    background: linear-gradient(90deg, transparent, rgba(43, 111, 224, .14), transparent);
}

.pp-cta-actions {
    display: flex;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
}

/* ── Footer: the brand panel, with the brand line along its top edge ──────── */
.pp-footer {
    position: relative;
    background: var(--pp-stars), var(--pp-brand);
}

.pp-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--pp-line);
    opacity: .8;
}

.pp-footer-brand p,
.pp-footer-col h4 {
    color: rgba(190, 212, 255, .72);
}

.pp-footer-col a {
    color: rgba(220, 232, 255, .82) !important;
}

.pp-footer-bottom {
    border-top-color: rgba(150, 185, 255, .16);
    color: rgba(190, 212, 255, .86);
}

/* ── Forms (Contact, Sign in, verify, change password) ───────────────────── */
.pp-field label {
    color: #48526b;
    letter-spacing: .01em;
}

.pp-input {
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--pp-field);
    color: var(--pp-ink);
    padding: .75rem .95rem;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.pp-input::placeholder {
    color: #5f6b80;
}

.pp-input:hover {
    background: var(--pp-field-hover);
}

.pp-input:focus {
    background: #fff;
    border-color: var(--pp-accent);
    box-shadow: 0 0 0 4px rgba(43, 111, 224, .13);
}

select.pp-input:not([multiple]):not([size]) {
    border: 1px solid transparent !important;
    border-color: transparent !important;
    border-radius: 14px !important;
    background-color: var(--pp-field) !important;
    color: var(--pp-ink) !important;
    padding: .75rem 2.4rem .75rem .95rem !important;
}

select.pp-input:not([multiple]):not([size]):hover:not(:disabled) {
    border-color: transparent !important;
    background-color: var(--pp-field-hover) !important;
}

select.pp-input:not([multiple]):not([size]):focus,
select.pp-input:not([multiple]):not([size]):focus-visible {
    border-color: var(--pp-accent) !important;
    background-color: #fff !important;
}

.pp-alert {
    border-radius: 16px;
    padding: 1rem 1.2rem;
}

.pp-alert-success {
    background: #ecfdf5;
    color: #065f46;
}

.pp-alert-danger {
    background: #fff1f2;
    color: #9f1239;
}

.pp-contact-info-block span,
.pp-contact-info-block a {
    color: var(--pp-ink);
}

.pp-contact-info-block .pp-contact-info-label {
    color: #5f6b80;
}

.pp-contact-info-divider,
.pp-signin-divider {
    border-top-color: var(--pp-hairline);
}

/* ── Sign in: the brand panel with the starfield, the form panel with the blue bleed ── */
.pp-signin-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--pp-stars), var(--pp-brand);
    background-attachment: fixed;
}

.pp-signin-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(420px 320px at 100% 0%, rgba(165, 105, 230, .28), transparent 70%),
                radial-gradient(360px 300px at 0% 60%, rgba(103, 196, 255, .18), transparent 75%);
}

.pp-signin-panel-body h1 {
    font-size: clamp(28px, 2.4vw, 40px) !important;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #fff;
}

.pp-signin-panel-body li {
    color: rgba(210, 225, 255, .86);
}

.pp-signin-panel-body li i {
    color: var(--pp-glow);
}

.pp-signin-panel-note {
    color: rgba(210, 225, 255, .86);
}

.pp-signin-panel-copyright {
    color: rgba(190, 212, 255, .7);
}

.pp-signin-right {
    position: relative;
    background: radial-gradient(300px 75% at 0% 50%, rgba(125, 190, 255, .22), rgba(125, 190, 255, .06) 55%, transparent 80%),
                radial-gradient(700px 420px at 100% 0%, #edf2ff 0%, transparent 70%), #fff;
}

.pp-signin-right::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 160px;
    pointer-events: none;
    background: var(--pp-brand) fixed;
    -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .7) 22px, rgba(0, 0, 0, .35) 60px, rgba(0, 0, 0, .1) 110px, transparent 160px);
    mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .7) 22px, rgba(0, 0, 0, .35) 60px, rgba(0, 0, 0, .1) 110px, transparent 160px);
}

.pp-signin-card {
    position: relative;
    animation: ppRise .7s .1s cubic-bezier(.22, 1, .36, 1) both;
}

.pp-signin-card h2 {
    font-size: clamp(24px, 1.8vw, 32px) !important;
    color: var(--pp-ink);
    letter-spacing: -.02em;
}

.pp-signin-card .pp-btn {
    width: 100%;
    justify-content: center;
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.pp-signin-hint,
.pp-signin-register {
    color: var(--pp-muted);
}

.pp-linkbutton {
    color: var(--pp-accent-text);
}

@media (max-width: 860px) {
    .pp-signin-right::before { display: none; }
}

/* ── Registration wizard: the EternityArc setup wizard's form kit, scoped to .pp-wizard ── */
.pp-wizard .dnx-setup-card {
    border-radius: 26px;
    box-shadow: var(--pp-soft-2);
}

.pp-wizard .dnx-setup-title {
    color: var(--pp-ink);
    letter-spacing: -.02em;
}

.pp-wizard .dnx-setup-label {
    font-weight: 600;
    color: #48526b;
}

.pp-wizard .dnx-setup-input,
.pp-wizard .dnx-setup-textarea {
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--pp-field);
    color: var(--pp-ink);
}

.pp-wizard .dnx-setup-input:hover,
.pp-wizard .dnx-setup-textarea:hover {
    background: var(--pp-field-hover);
}

.pp-wizard .dnx-setup-input:focus,
.pp-wizard .dnx-setup-textarea:focus {
    background: #fff;
    border-color: var(--pp-accent);
    box-shadow: 0 0 0 4px rgba(43, 111, 224, .13);
}

.pp-wizard select.dnx-setup-input:not([multiple]):not([size]) {
    border: 1px solid transparent !important;
    border-color: transparent !important;
    border-radius: 14px !important;
    background-color: var(--pp-field) !important;
}

.pp-wizard select.dnx-setup-input:not([multiple]):not([size]):hover:not(:disabled) {
    border-color: transparent !important;
    background-color: var(--pp-field-hover) !important;
}

.pp-wizard select.dnx-setup-input:not([multiple]):not([size]):focus {
    border-color: var(--pp-accent) !important;
    background-color: #fff !important;
}

.pp-wizard .dnx-setup-hint {
    color: #5f6b80;
}

.pp-wizard .dnx-setup-alert {
    border: 0;
    border-radius: 16px;
}

.pp-wizard .dnx-setup-provider-card {
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
}

.pp-wizard .dnx-setup-provider-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--pp-soft-2);
}

.pp-wizard .dnx-setup-provider-card.selected {
    background: linear-gradient(180deg, #f3f7ff, #fff);
    box-shadow: 0 0 0 2px var(--pp-accent), 0 22px 44px -20px rgba(43, 111, 224, .55);
}

.pp-wizard .dnx-setup-actions {
    border-top: 1px solid var(--pp-hairline);
}

.pp-wizard :is(.dnx-setup-btn-primary, .dnx-setup-btn-secondary) {
    border-radius: 11px;
    font-weight: 650;
}

.pp-wizard .dnx-setup-btn-primary {
    background: var(--pp-cta);
    border: 0;
    box-shadow: 0 10px 24px -10px rgba(22, 48, 138, .75);
}

.pp-wizard .dnx-setup-btn-secondary {
    background: #fff;
    border: 1px solid #dbe1ec;
    color: #3b4a6b !important;
}

.pp-review-list {
    border: 0;
    border-radius: 18px;
    background: var(--pp-tile);
}

.pp-review-list > div {
    border-bottom-color: var(--pp-hairline);
}

/* Stepper: glowing nodes, green behind you, lit blue where you are. */
.pp-wizard .dnx-stepper-circle-completed {
    background: radial-gradient(circle at 35% 30%, #34d399, #047857 80%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 14px -3px rgba(52, 211, 153, .7);
}

.pp-wizard .dnx-stepper-circle-current {
    background: radial-gradient(circle at 35% 30%, #3b82f6, #1e3a8a 80%);
    border-color: transparent;
    box-shadow: 0 0 22px -2px rgba(96, 165, 250, .9);
}

.pp-wizard .dnx-stepper-line-completed {
    background: linear-gradient(90deg, #34d399, rgba(52, 211, 153, .55));
}

.pp-register-aside {
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(243, 247, 255, .95), rgba(255, 255, 255, .8));
    box-shadow: var(--pp-soft-1);
}

.pp-register-steps .pp-register-step-num {
    width: 26px;
    height: 26px;
    background: var(--pp-mark);
    box-shadow: 0 6px 14px -6px rgba(22, 48, 138, .8);
}

.pp-register-aside-note {
    border-top-color: rgba(43, 111, 224, .12);
}

/* ── Admin (signed-in provider console) ──────────────────────────────────── */
.pp-admin-stat-num {
    background: var(--pp-mark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pp-admin-card-header {
    border-bottom-color: var(--pp-hairline);
}

.pp-filter-pill {
    border: 0;
    background: #eef2f9;
    color: #3b4a6b;
}

.pp-filter-pill.active {
    background: var(--pp-cta);
    color: #fff;
    box-shadow: 0 6px 14px -8px rgba(22, 48, 138, .8);
}

.pp-admin-table thead th,
.pp-admin-table tbody td {
    border-bottom-color: var(--pp-hairline);
}

/* ── Assistant widget ────────────────────────────────────────────────────── */
.pp-chat-panel {
    border-radius: 22px;
    box-shadow: 0 2px 6px rgba(18, 34, 77, .08), 0 32px 64px -24px rgba(18, 34, 77, .5);
}

.pp-chat-header {
    background: var(--pp-stars), var(--pp-brand);
}

.pp-chat-bubble.user {
    background: var(--pp-cta);
}

.pp-chat-bubble.bot {
    background: var(--pp-field);
}

.pp-chat-input-row input {
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--pp-field);
}

.pp-chat-input-row input:focus {
    background: #fff;
    border-color: var(--pp-accent);
}

.pp-chat-input-row button {
    border-radius: 11px;
    background: var(--pp-cta);
}

/* ── Keyboard focus: the sign-in pages' ring ─────────────────────────────── */
.pp-shell a:focus-visible,
.pp-shell button:focus-visible,
.pp-signin-shell a:focus-visible,
.pp-signin-shell button:focus-visible {
    outline: 2px solid var(--pp-accent);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .pp-hero-split,
    .pp-split {
        grid-template-columns: 1fr;
    }

    .pp-hero-visual {
        max-width: 520px;
    }
}

@media (max-width: 560px) {
    .pp-flow-sources {
        grid-template-columns: 1fr;
    }

    .pp-flow-arrow {
        margin: 0 auto;
        width: 2px;
        background: linear-gradient(rgba(125, 211, 252, .85), rgba(125, 211, 252, .15));
    }

    .pp-hero-split {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ── Deep-space backdrop (copy of EternityArc auth-shell.css .nx-space-*) ──────── */
@keyframes nxSpaceTwinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes nxSpaceGlint { 0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.7) rotate(0deg); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(45deg); } }
@keyframes nxSpaceDrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -14px); } }
@keyframes nxSpaceFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes nxSpaceOrbit { to { transform: rotate(360deg); } }
@keyframes nxSpaceShoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-32deg); } 3% { opacity: 1; } 12% { opacity: 0; transform: translate(-240px, 150px) rotate(-32deg); } 100% { opacity: 0; transform: translate(-240px, 150px) rotate(-32deg); } }
@keyframes nxSpaceConst { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }

.nx-space { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; animation: ppFade 1.6s ease-out both; }
.nx-space-milkyway { position: absolute; left: -20%; right: -20%; top: 38%; height: 34%; transform: rotate(-16deg);
    background:
        radial-gradient(ellipse at 50% 50%, rgba(190,210,255,.10), transparent 65%),
        radial-gradient(rgba(255,255,255,.35) .6px, transparent 1px) 0 0 / 7px 7px,
        radial-gradient(rgba(200,220,255,.25) .6px, transparent 1px) 3px 4px / 11px 11px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 70%);
    opacity: .55; }
.nx-space-nebula { position: absolute; border-radius: 50%; filter: blur(34px); animation: nxSpaceDrift 22s ease-in-out infinite; }
.nx-space-nebula--teal { width: 380px; height: 260px; left: 38%; bottom: 4%; background: radial-gradient(circle, rgba(45,212,191,.20), transparent 70%); }
.nx-space-nebula--rose { width: 320px; height: 240px; left: -6%; top: 6%; background: radial-gradient(circle, rgba(244,114,182,.16), transparent 70%); animation-duration: 28s; animation-direction: reverse; }
.nx-space-dust { position: absolute; width: 1px; height: 1px; border-radius: 50%; background: #fff; }
.nx-space-star { position: absolute; border-radius: 50%; box-shadow: 0 0 5px 1px rgba(255,255,255,.55); animation: nxSpaceTwinkle 3s ease-in-out infinite; }
.nx-space-bright { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(220,235,255,.9); }
.nx-space-bright::before, .nx-space-bright::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); animation: nxSpaceGlint 4s ease-in-out infinite; animation-delay: inherit; animation-duration: inherit; }
.nx-space-bright::after { width: 1px; height: 22px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.9), transparent); }
.nx-space-constellation { position: absolute; top: 6%; right: 44%; overflow: visible; animation: nxSpaceConst 6s ease-in-out infinite; }
.nx-space-constellation polyline { fill: none; stroke: rgba(186,230,253,.45); stroke-width: .8; stroke-dasharray: 2 3; }
.nx-space-constellation circle { fill: #e0f2fe; filter: drop-shadow(0 0 3px rgba(186,230,253,.9)); }
.nx-space-saturn { position: absolute; top: 9%; right: 6%; width: 64px; height: 64px; animation: nxSpaceFloat 11s ease-in-out infinite; }
.nx-space-saturn-body { position: absolute; inset: 0; border-radius: 50%; z-index: 1;
    background: radial-gradient(circle at 34% 30%, #fde6c4, #e3a86b 45%, #8a4a2b 85%);
    box-shadow: inset -8px -6px 14px rgba(40,15,5,.45), 0 0 30px -4px rgba(240,180,110,.45); }
.nx-space-saturn-body::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: .35;
    background: repeating-linear-gradient(-18deg, transparent 0 7px, rgba(120,60,30,.45) 7px 9px); }
.nx-space-saturn-ring { position: absolute; left: -34px; right: -34px; top: 22px; height: 20px; border-radius: 50%; transform: rotate(-18deg);
    border: 3px solid rgba(240,210,170,.65); box-shadow: 0 0 0 4px rgba(240,210,170,.14); }
.nx-space-saturn-ring--back { z-index: 0; clip-path: inset(0 0 50% 0); }
.nx-space-saturn-ring--front { z-index: 2; clip-path: inset(50% 0 0 0); }
.nx-space-moon-orbit { position: absolute; inset: -40px; border-radius: 50%; z-index: 3; animation: nxSpaceOrbit 14s linear infinite; }
.nx-space-moon { position: absolute; top: 0; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f1f5f9, #94a3b8 75%); box-shadow: 0 0 6px rgba(226,232,240,.6); }
.nx-space-ice { position: absolute; left: 3%; bottom: 12%; width: 40px; height: 40px; border-radius: 50%; animation: nxSpaceFloat 9s ease-in-out infinite reverse;
    background: radial-gradient(circle at 32% 28%, #e0f7ff, #67c6ea 45%, #1d5f8a 90%);
    box-shadow: inset -7px -5px 12px rgba(5,25,50,.5), 0 0 0 5px rgba(125,211,252,.10), 0 0 34px 6px rgba(103,196,255,.35); }
.nx-space-far { position: absolute; right: 30%; top: 12%; width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fbcfe8, #a21caf 85%); box-shadow: 0 0 12px rgba(236,72,153,.45); animation: nxSpaceFloat 13s ease-in-out infinite; }
.nx-space-shoot { position: absolute; width: 90px; height: 1.5px; border-radius: 2px; opacity: 0;
    background: linear-gradient(90deg, #fff, rgba(186,230,253,.6) 30%, transparent); box-shadow: 0 0 6px rgba(255,255,255,.6);
    animation: nxSpaceShoot 8s ease-in infinite; }
@media (max-width: 960px) { .nx-space-constellation, .nx-space-far, .nx-space-ice { display: none; } .nx-space-saturn { top: 4%; right: 4%; scale: .7; } }

/* ── Reduced motion: one switch for the whole sheet ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pp-shell *, .pp-shell *::before, .pp-shell *::after,
    .pp-signin-shell *, .pp-signin-shell *::before, .pp-signin-shell *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Icons styled directly ───────────────────────────────────────────────────
   dimensional.css resets every .bi with `background: none !important; color: inherit !important`
   (so icons follow their context). Where the icon element itself is the painted object — a round
   tile, or a colour distinct from its label — the declaration has to be !important to count. */
.pp-feature > i.bi {
    background: var(--pp-accent-soft) !important;
    color: var(--pp-accent-text) !important;
}

.pp-flow-source > i.bi {
    background: rgba(125, 190, 255, .14) !important;
    color: #bfdbfe !important;
}

.pp-logo-chip > i.bi {
    color: var(--pp-accent) !important;
}

.pp-hero-points i.bi {
    color: #6ee7b7 !important;
}

.pp-hero-strip-item i.bi {
    color: #bfdbfe !important;
}

.pp-signin-panel-body li i.bi {
    color: var(--pp-glow) !important;
}

.pp-compare-before h3 i.bi {
    color: #9f1239 !important;
}

.pp-compare-after h3 i.bi,
.pp-product-detail-list i.bi {
    color: #10b981 !important;
}

/* common.css sizes every h1–h4 with !important; these small labels have to answer in kind. */
.pp-footer-col h4 {
    font-size: .74rem !important;
    letter-spacing: .14em;
}

/* Card titles are h3 under their section's h2 (heading outline); sized like the old h4. */
.pp-how-step h3,
.pp-how-step h4,
.pp-feature h3,
.pp-feature h4 {
    font-size: .98rem !important;
}

/* A compact checklist inside a card. */
.pp-checks-sm {
    margin: 0 0 1rem;
    gap: .45rem;
}

.pp-checks-sm li {
    padding-left: 1.6rem;
    font-size: .84rem;
}

.pp-checks-sm li::before {
    width: 1.1rem;
    height: 1.1rem;
    font-size: .7rem;
}

/* Six reasons read as two rows of three, not five and an orphan. */
.pp-why-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Phone navigation. app.css gives the links `width: 100%` here, but their base `flex: 1` (basis 0)
   wins over width, so the links never took their own row — they stacked in a column beside the
   buttons. A full-basis row that scrolls sideways keeps the bar two lines tall at any width. */
@media (max-width: 860px) {
    .pp-navbar-links {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: .3rem;
    }

    .pp-navbar-links::-webkit-scrollbar {
        display: none;
    }

    .pp-navbar-actions {
        margin-left: auto;
    }
}

/* Planets never sit behind text (the SpaceField layout rule). On a phone the copy spans the full
   width, so there is no open area left for the ringed planet. */
@media (max-width: 560px) {
    .nx-space-saturn { display: none; }
}

/* ── Round 2 content blocks ───────────────────────────────────────────────── */

/* Jump bar under a page hero (Product services, Use-case industries). Pulled up onto the hero's
   bottom edge so it reads as the hero's own navigation. */
.pp-jump {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: -4.6rem auto 2.5rem;
    padding: .6rem;
    max-width: 1040px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    box-shadow: var(--pp-soft-2);
}

.pp-jump a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 650;
    color: var(--pp-ink) !important;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.pp-jump a:hover {
    background: var(--pp-accent-soft);
    color: var(--pp-accent-text) !important;
}

.pp-jump a i.bi {
    color: var(--pp-accent) !important;
}

@media (max-width: 860px) {
    .pp-jump {
        border-radius: 22px;
        margin-top: -3.4rem;
    }
}

/* Anchored sections land below the sticky nav rather than under it. */
.pp-product-detail,
.pp-usecase,
#foundation {
    scroll-margin-top: 90px;
}

/* Use case: the three parts side by side on wide screens, the outcome highlighted. */
.pp-usecase-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: .4rem;
}

.pp-usecase-steps .pp-usecase-row {
    margin: 0;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: var(--pp-tile);
}

.pp-usecase-steps .pp-usecase-row p {
    font-size: .9rem;
    color: var(--pp-body);
}

.pp-usecase-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--pp-muted);
}

.pp-usecase-label i.bi {
    color: var(--pp-accent) !important;
}

.pp-usecase-steps .pp-usecase-outcome {
    background: linear-gradient(160deg, #ecfdf5, #f6fffb);
}

.pp-usecase-outcome .pp-usecase-label,
.pp-usecase-outcome .pp-usecase-label i.bi {
    color: #047857 !important;
}

@media (max-width: 960px) {
    .pp-usecase-steps {
        grid-template-columns: 1fr;
    }
}

/* Industry links (Solutions). */
.pp-industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .8rem;
}

.pp-industry {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
    text-decoration: none;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s;
}

.pp-industry:hover {
    transform: translateY(-2px);
    box-shadow: var(--pp-soft-2);
}

.pp-industry > i.bi:first-child {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff !important;
    background: var(--pp-mark) !important;
}

.pp-industry span {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pp-industry b {
    color: var(--pp-ink);
    font-size: .92rem;
}

.pp-industry small {
    color: var(--pp-muted);
    font-size: .82rem;
}

.pp-industry-arrow {
    color: var(--pp-accent) !important;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.pp-industry:hover .pp-industry-arrow {
    transform: translateX(4px);
}

/* Setup walkthrough (Resources): a vertical rail of nodes, two columns on wide screens. */
.pp-setup-steps {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 980px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 1.2rem;
    counter-reset: pp-setup;
}

.pp-setup-steps li {
    counter-increment: pp-setup;
    display: flex;
    gap: 14px;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
}

.pp-setup-node {
    position: relative;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 30%, #3b82f6, #1e3a8a 78%);
    box-shadow: 0 8px 18px -8px rgba(30, 58, 138, .8);
}

.pp-setup-node i.bi {
    color: #fff !important;
}

.pp-setup-node::after {
    content: counter(pp-setup);
    position: absolute;
    right: -4px;
    top: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .64rem;
    font-weight: 800;
    color: var(--pp-accent-text);
    background: #fff;
    box-shadow: 0 1px 4px rgba(18, 34, 77, .25);
}

.pp-setup-steps h3,
.pp-setup-steps h4 {
    margin: .1rem 0 .25rem;
    font-size: .95rem !important;
    font-weight: 700;
    color: var(--pp-ink);
}

.pp-setup-steps p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--pp-muted);
}

@media (max-width: 760px) {
    .pp-setup-steps {
        grid-template-columns: 1fr;
    }
}

/* Contact side panel. */
.pp-kicker-left {
    text-align: left;
}

.pp-contact-next h3 {
    font-size: .95rem !important;
    font-weight: 700;
    color: var(--pp-ink);
    margin-bottom: .7rem;
}

.pp-mini-steps {
    list-style: none;
    counter-reset: pp-mini;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.pp-mini-steps li {
    counter-increment: pp-mini;
    position: relative;
    padding-left: 2.1rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--pp-body);
}

.pp-mini-steps li::before {
    content: counter(pp-mini);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .74rem;
    font-weight: 700;
    color: #fff;
    background: var(--pp-mark);
}

.pp-mini-steps strong {
    color: var(--pp-ink);
}

.pp-contact-info {
    padding: 1.6rem;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(243, 247, 255, .95), rgba(255, 255, 255, .85));
    box-shadow: var(--pp-soft-1);
    align-self: start;
}

/* A whole card as a link (404 page). */
a.pp-card-link {
    text-decoration: none;
    color: inherit;
}

/* ==========================================================================
   Motion layer
   ==========================================================================
   Paired with js/portal-motion.js (nav depth, card glow position, hero parallax, count-up).
   Rules of the layer:
   - Entrance and scroll animations use the individual translate/scale properties, never
     transform, so they compose with hover lifts and the planets' own float loops.
   - Page containers only ever fade (opacity). Nothing that can hold a dropdown or a fixed
     element is translated: a transformed ancestor would re-anchor it.
   - Scroll-driven effects sit inside @supports, so a browser without them shows everything,
     static. Under prefers-reduced-motion the whole layer switches off (end of file).
   ========================================================================== */

/* Full page loads (sign-in, verify, first visit) cross-fade instead of flashing white; the nav
   has its own name so it stays put while the page beneath it changes. */
@view-transition { navigation: auto; }
.pp-navbar { view-transition-name: pp-nav; }
::view-transition-old(root) { animation: ppVtOut .22s ease-in both; }
::view-transition-new(root) { animation: ppVtIn .45s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ppVtOut { to { opacity: 0; } }
@keyframes ppVtIn { from { opacity: 0; } }

/* In-app navigation: Blazor swaps the page sections in, and new elements run this once. */
.pp-main > * { animation: ppFade .5s ease-out both; }

/* Horizontal overflow from the full-bleed bands is clipped, not scrolled. clip (not hidden)
   creates no scroll container, so the sticky nav keeps working. */
.pp-shell { overflow-x: clip; }

/* ── Nav: gains depth once the page scrolls (class set by portal-motion.js) ── */
.pp-navbar { transition: background-color .3s, box-shadow .3s; }
.pp-navbar.is-scrolled {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 30px -18px rgba(18, 34, 77, .35);
}

/* ── Hero: shimmer on the accent words, parallax on the planets, tilt on the visual ── */
@keyframes ppShimmer { to { background-position: 200% 0; } }
.pp-hero-dark-title em {
    background-image: linear-gradient(90deg, #bfdbfe, #7dd3fc 30%, #a5b4fc 55%, #bfdbfe 80%);
    background-size: 200% 100%;
    animation: ppShimmer 8s linear infinite;
}

.pp-hero-dark .nx-space-saturn,
.pp-hero-dark .nx-space-ice,
.pp-hero-dark .nx-space-far {
    translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -14px);
    transition: translate .6s cubic-bezier(.22, 1, .36, 1);
}

.pp-hero-dark .nx-space-constellation {
    translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -6px);
    transition: translate .8s cubic-bezier(.22, 1, .36, 1);
}

.pp-hero-visual {
    transform: perspective(1100px) rotateX(calc(var(--py, 0) * -4deg)) rotateY(calc(var(--px, 0) * 5deg));
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

/* ── Golden record: data packets travel down the feeds; trust bars fill; the card breathes ── */
@keyframes ppPacket {
    0% { translate: 0 -8px; opacity: 0; }
    15%, 80% { opacity: 1; }
    100% { translate: 0 34px; opacity: 0; }
}
@keyframes ppBar { from { scale: 0 1; } }
@keyframes ppBreathe {
    0%, 100% { box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .6); }
    50% { box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .6), 0 0 0 4px rgba(125, 211, 252, .18), 0 0 40px -6px rgba(125, 211, 252, .55); }
}

.pp-flow-arrow { position: relative; }
.pp-flow-arrow::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -3px;
    top: 0;
    height: 8px;
    background:
        radial-gradient(circle at 4px 4px, #e0f2fe 0 2px, transparent 3px) 0 0 / 8px 8px no-repeat,
        radial-gradient(circle at 4px 4px, #e0f2fe 0 2px, transparent 3px) 50% 0 / 8px 8px no-repeat,
        radial-gradient(circle at 4px 4px, #e0f2fe 0 2px, transparent 3px) 100% 0 / 8px 8px no-repeat;
    filter: drop-shadow(0 0 4px rgba(125, 211, 252, .95));
    animation: ppPacket 2.2s 1.4s ease-in infinite;
}

.pp-golden { animation: ppBreathe 2.2s 3.2s ease-in-out infinite; }

.pp-golden-trust > span > span {
    transform-origin: left center;
    animation: ppBar 1.1s cubic-bezier(.22, 1, .36, 1) both;
}
.pp-golden-row:nth-child(1) .pp-golden-trust > span > span { animation-delay: 1s; }
.pp-golden-row:nth-child(2) .pp-golden-trust > span > span { animation-delay: 1.12s; }
.pp-golden-row:nth-child(3) .pp-golden-trust > span > span { animation-delay: 1.24s; }
.pp-golden-row:nth-child(4) .pp-golden-trust > span > span { animation-delay: 1.36s; }

/* ── Cards: a glow that follows the pointer, and a soft accent ring on hover ── */
.pp-service-card,
.pp-feature,
.pp-industry,
.pp-product-detail,
.pp-usecase,
.pp-setup-steps li {
    position: relative;
    isolation: isolate;
}

.pp-service-card::before,
.pp-feature::before,
.pp-industry::before,
.pp-product-detail::before,
.pp-usecase::before,
.pp-setup-steps li::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(43, 111, 224, .10), transparent 70%);
}

.pp-service-card:hover::before,
.pp-feature:hover::before,
.pp-industry:hover::before,
.pp-product-detail:hover::before,
.pp-usecase:hover::before,
.pp-setup-steps li:hover::before {
    opacity: 1;
}

.pp-service-card:hover,
.pp-industry:hover {
    box-shadow: 0 0 0 1.5px rgba(43, 111, 224, .22), var(--pp-soft-2);
}

.pp-service-card .pp-service-icon {
    transition: scale .35s cubic-bezier(.34, 1.56, .64, 1), rotate .35s cubic-bezier(.34, 1.56, .64, 1);
}

.pp-service-card:hover .pp-service-icon {
    scale: 1.08;
    rotate: -6deg;
}

/* ── Tinted bands: alternate sections sit on a soft full-bleed wash ─────── */
.pp-band {
    position: relative;
    isolation: isolate;
    padding-bottom: 4rem;
}

.pp-band::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(700px 300px at 85% 20%, rgba(165, 180, 252, .18), transparent 70%),
        linear-gradient(180deg, rgba(226, 234, 255, 0), rgba(226, 234, 255, .75) 22%, rgba(226, 234, 255, .75) 78%, rgba(226, 234, 255, 0));
}

/* ── Scroll-driven: progress line, reveals, the timeline line drawing itself ── */
@supports (animation-timeline: view()) {
    @keyframes ppProgress { from { scale: 0 1; } to { scale: 1 1; } }
    @keyframes ppReveal { from { opacity: 0; translate: 0 28px; scale: .98; } }
    @keyframes ppDraw { from { scale: 0 1; } }

    .pp-shell::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 60;
        pointer-events: none;
        transform-origin: 0 50%;
        background: linear-gradient(90deg, #16308a, #2b6fe0 45%, #7dd3fc);
        animation: ppProgress linear both;
        animation-timeline: scroll(root);
    }

    :is(.pp-service-card, .pp-feature, .pp-product-detail, .pp-usecase, .pp-industry,
        .pp-setup-steps li, .pp-faq-item, .pp-glossary-item, .pp-checklist li, .pp-how-step,
        .pp-stats-band-item, .pp-cta-band, .pp-compare-col, .pp-checks li, .pp-logo-chip,
        .pp-kicker, h2.pp-section-title, .pp-section-sub) {
        animation: ppReveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }

    /* Cards in a row arrive one after another rather than as a slab. */
    :is(.pp-service-grid, .pp-feature-grid, .pp-industry-grid, .pp-how-steps, .pp-setup-steps, .pp-logos, .pp-stats-band) > :nth-child(2) { animation-range: entry 6% entry 61%; }
    :is(.pp-service-grid, .pp-feature-grid, .pp-industry-grid, .pp-how-steps, .pp-setup-steps, .pp-logos, .pp-stats-band) > :nth-child(3) { animation-range: entry 12% entry 67%; }
    :is(.pp-service-grid, .pp-feature-grid, .pp-industry-grid, .pp-how-steps, .pp-setup-steps, .pp-logos, .pp-stats-band) > :nth-child(4) { animation-range: entry 18% entry 73%; }
    :is(.pp-service-grid, .pp-feature-grid, .pp-industry-grid, .pp-how-steps, .pp-setup-steps, .pp-logos, .pp-stats-band) > :nth-child(n+5) { animation-range: entry 24% entry 79%; }

    /* The line between timeline nodes draws in as the step arrives. */
    .pp-how-steps .pp-how-step::before {
        transform-origin: 0 50%;
        animation: ppDraw linear both;
        animation-timeline: view();
        animation-range: entry 30% cover 45%;
    }
}

/* ── Reduced motion: the whole layer off, nothing left half-drawn ────────── */
@media (prefers-reduced-motion: reduce) {
    .pp-shell::after,
    .pp-flow-arrow::after { display: none; }

    .pp-shell *, .pp-shell *::before, .pp-shell *::after {
        animation: none !important;
        transition: none !important;
    }

    .pp-hero-visual,
    .pp-hero-dark .nx-space-saturn,
    .pp-hero-dark .nx-space-ice,
    .pp-hero-dark .nx-space-far,
    .pp-hero-dark .nx-space-constellation {
        transform: none;
        translate: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ── Architecture flow (Product) ────────────────────────────────────────────
   Five stages joined by a flowing dashed connector; the mastering stage is the lit core. */
@keyframes ppFlowDash { to { background-position: 24px 0; } }

.pp-arch {
    margin-bottom: 3.5rem;
}

.pp-arch-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.4rem;
    align-items: stretch;
}

.pp-arch-stage {
    position: relative;
    padding: 1.2rem 1.1rem 1rem;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
}

/* The connector to the next stage, with data moving along it. */
.pp-arch-stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.4rem;
    width: 1.4rem;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(43, 111, 224, .7) 0 6px, transparent 6px 12px);
    background-size: 24px 2px;
    animation: ppFlowDash 1.2s linear infinite;
}

.pp-arch-stage.is-core {
    color: #fff;
    background: var(--pp-stars), var(--pp-brand);
    box-shadow: 0 0 0 1.5px rgba(125, 211, 252, .45), 0 24px 48px -20px rgba(10, 22, 56, .8), 0 0 40px -10px rgba(96, 165, 250, .7);
}

.pp-arch-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-accent);
    margin-bottom: .35rem;
}

.pp-arch-stage h3 {
    font-size: 1rem !important;
    font-weight: 700;
    color: var(--pp-ink);
    margin: 0 0 .7rem;
}

.pp-arch-stage ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.pp-arch-stage li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--pp-body);
}

.pp-arch-stage li i.bi {
    flex: none;
    color: var(--pp-accent) !important;
}

.pp-arch-stage.is-core .pp-arch-label { color: var(--pp-glow); }
.pp-arch-stage.is-core h3 { color: #fff; }
.pp-arch-stage.is-core li { color: rgba(220, 232, 255, .9); }
.pp-arch-stage.is-core li i.bi { color: var(--pp-glow) !important; }

@supports (animation-timeline: view()) {
    .pp-arch-stage {
        animation: ppReveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }
    .pp-arch-stage:nth-child(2) { animation-range: entry 8% entry 63%; }
    .pp-arch-stage:nth-child(3) { animation-range: entry 16% entry 71%; }
    .pp-arch-stage:nth-child(4) { animation-range: entry 24% entry 79%; }
    .pp-arch-stage:nth-child(5) { animation-range: entry 32% entry 87%; }
}

/* Stacked: the connector turns vertical. */
@media (max-width: 1000px) {
    .pp-arch-flow {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        max-width: 520px;
        margin: 0 auto;
    }

    .pp-arch-stage:not(:last-child)::after {
        top: auto;
        bottom: -1.4rem;
        right: auto;
        left: 50%;
        width: 2px;
        height: 1.4rem;
        background: repeating-linear-gradient(180deg, rgba(43, 111, 224, .7) 0 6px, transparent 6px 12px);
        background-size: 2px 24px;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-arch-stage, .pp-arch-stage::after { animation: none !important; }
}

/* On the tinted bands the accent blue and the muted grey fell under AA (3.9:1 and 4.5:1 on the
   darkest part of the wash); both step one shade deeper everywhere so a heading reads the same
   on or off a band. */
.pp-kicker { color: var(--pp-accent-text); }
.pp-section-sub { color: #525e75; }

/* ── Use cases: service filter, flow diagram, walkthrough ───────────────────
   The filter is plain links (the page is static SSR). The flow's moving dashes and the core's
   pulse are decorative and switch off under reduced motion with the rest of the layer. */
.pp-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: -1rem auto 2.4rem;
    max-width: 1040px;
}

.pp-filter-label {
    font-size: .8rem;
    font-weight: 650;
    color: var(--pp-muted);
    margin-right: .3rem;
}

.pp-filter a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .8rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
    color: var(--pp-ink) !important;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--pp-hairline);
    transition: background .2s, color .2s, box-shadow .2s, translate .25s cubic-bezier(.34, 1.56, .64, 1);
}

.pp-filter a small {
    font-size: .7rem;
    font-weight: 700;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--pp-tile);
    color: var(--pp-muted);
}

.pp-filter a:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px rgba(43, 111, 224, .35); }

.pp-filter a.is-active {
    color: #fff !important;
    background: var(--pp-cta);
    box-shadow: 0 10px 22px -12px rgba(22, 48, 138, .8);
}

.pp-filter a.is-active small { background: rgba(255, 255, 255, .2); color: #fff; }

.pp-filter-empty { text-align: center; color: var(--pp-muted); }

/* Module chips on a use case link to the filtered list. */
.pp-usecase-body .pp-service-features a {
    color: inherit !important;
    text-decoration: none;
}
.pp-usecase-body .pp-service-features a:hover { text-decoration: underline; }

/* Sources → golden record → consumers. */
@keyframes ppWire { to { background-position: 28px 0; } }
@keyframes ppCorePulse {
    0%, 100% { box-shadow: 0 0 0 1.5px rgba(125, 211, 252, .45), 0 18px 36px -18px rgba(10, 22, 56, .8); }
    50% { box-shadow: 0 0 0 1.5px rgba(125, 211, 252, .7), 0 18px 36px -18px rgba(10, 22, 56, .8), 0 0 34px -4px rgba(96, 165, 250, .75); }
}
@keyframes ppChipIn { from { opacity: 0; translate: -10px 0; } }
@keyframes ppChipOut { from { opacity: 0; translate: 10px 0; } }

.pp-ucflow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px auto 48px minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    margin: .6rem 0 1.2rem;
    padding: 1rem;
    border-radius: 18px;
    background: var(--pp-tile);
}

.pp-ucflow-col {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.pp-ucflow-col li {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .7rem;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--pp-ink);
    background: #fff;
    box-shadow: var(--pp-soft-1);
    animation: ppChipIn .6s cubic-bezier(.22, 1, .36, 1) both;
}
.pp-ucflow-col.is-out li { animation-name: ppChipOut; }
.pp-ucflow-col li:nth-child(2) { animation-delay: .08s; }
.pp-ucflow-col li:nth-child(3) { animation-delay: .16s; }
.pp-ucflow-col li:nth-child(4) { animation-delay: .24s; }

.pp-ucflow-col li i.bi { color: var(--pp-accent) !important; }
.pp-ucflow-col.is-out li i.bi { color: #047857 !important; }

.pp-ucflow-wire {
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(43, 111, 224, .75) 0 8px, transparent 8px 14px);
    background-size: 28px 2px;
    animation: ppWire 1.1s linear infinite;
}

.pp-ucflow-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .9rem 1.1rem;
    min-width: 170px;
    border-radius: 16px;
    text-align: center;
    color: #fff;
    background: var(--pp-stars), var(--pp-brand);
    animation: ppCorePulse 2.6s ease-in-out infinite;
}

.pp-ucflow-core i.bi { font-size: 1.3rem; color: var(--pp-glow) !important; }
.pp-ucflow-core b { font-size: .92rem; }
.pp-ucflow-core small { font-size: .7rem; color: rgba(220, 232, 255, .8); letter-spacing: .02em; }

@media (max-width: 760px) {
    .pp-ucflow { grid-template-columns: 1fr; justify-items: stretch; }
    .pp-ucflow-wire {
        justify-self: center;
        width: 2px;
        height: 22px;
        background: repeating-linear-gradient(180deg, rgba(43, 111, 224, .75) 0 6px, transparent 6px 11px);
        animation: none;
    }
    .pp-ucflow-core { justify-self: center; }
}

/* Step-by-step walkthrough: a native disclosure, so it works without script. */
.pp-walk {
    margin: 1rem 0 .4rem;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px var(--pp-hairline);
    background: #fff;
}

.pp-walk summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--pp-ink);
    cursor: pointer;
    list-style: none;
}
.pp-walk summary::-webkit-details-marker { display: none; }
.pp-walk summary i.bi { color: var(--pp-accent) !important; }
.pp-walk summary span {
    margin-left: auto;
    font-size: .74rem;
    font-weight: 650;
    color: var(--pp-muted);
}
.pp-walk summary::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    color: var(--pp-muted);
    transition: rotate .3s cubic-bezier(.22, 1, .36, 1);
}
.pp-walk[open] summary::after { rotate: 180deg; }

.pp-walk-body {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 1.2rem;
    padding: 0 1rem 1rem;
}

.pp-walk-steps {
    list-style: none;
    counter-reset: walk;
    margin: 0;
    padding: 0;
    position: relative;
}

/* The rail the numbered nodes sit on. */
.pp-walk-steps::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #2b6fe0, rgba(125, 211, 252, .3));
    transform-origin: top;
}

.pp-walk-steps li {
    counter-increment: walk;
    position: relative;
    padding: .35rem 0 .55rem 2.6rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--pp-body);
}

.pp-walk-steps li::before {
    content: counter(walk);
    position: absolute;
    left: 0;
    top: .3rem;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .76rem;
    font-weight: 800;
    color: #fff;
    background: var(--pp-mark);
    box-shadow: 0 0 0 4px #fff;
}

@keyframes ppStepIn { from { opacity: 0; translate: 0 10px; } }
@keyframes ppRail { from { scale: 1 0; } }
.pp-walk[open] .pp-walk-steps::before { animation: ppRail .9s cubic-bezier(.22, 1, .36, 1) both; }
.pp-walk[open] .pp-walk-steps li { animation: ppStepIn .5s cubic-bezier(.22, 1, .36, 1) both; }
.pp-walk[open] .pp-walk-steps li:nth-child(2) { animation-delay: .08s; }
.pp-walk[open] .pp-walk-steps li:nth-child(3) { animation-delay: .16s; }
.pp-walk[open] .pp-walk-steps li:nth-child(4) { animation-delay: .24s; }
.pp-walk[open] .pp-walk-steps li:nth-child(5) { animation-delay: .32s; }
.pp-walk[open] .pp-walk-measure { animation: ppStepIn .5s .3s cubic-bezier(.22, 1, .36, 1) both; }

.pp-walk-measure {
    align-self: start;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: linear-gradient(160deg, #eef4ff, #f8faff);
}

.pp-walk-measure ul {
    margin: .5rem 0 0;
    padding-left: 1.1rem;
    font-size: .85rem;
    color: var(--pp-body);
}
.pp-walk-measure li + li { margin-top: .35rem; }

@media (max-width: 860px) {
    .pp-walk-body { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-ucflow-wire, .pp-ucflow-core, .pp-ucflow-col li,
    .pp-walk-steps::before, .pp-walk-steps li, .pp-walk-measure,
    .pp-filter a { animation: none !important; transition: none !important; }
}

/* ── Match illustration (Home) ──────────────────────────────────────────────
   Two sample records either side of the rule scores. Bars are full by default; with the motion
   script running (html.pp-motion) they start empty and fill when .is-in is added on scroll. */
.pp-match {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.pp-match-rec {
    padding: 1.1rem 1.2rem;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
}

.pp-match-src {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .7rem;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pp-accent-text);
}

.pp-match-rec dl { margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.pp-match-rec dl > div { display: flex; flex-direction: column; }
.pp-match-rec dt { font-size: .7rem; font-weight: 650; color: var(--pp-muted); }
.pp-match-rec dd { margin: 0; font-family: "JetBrains Mono", monospace; font-size: .82rem; color: var(--pp-ink); overflow-wrap: anywhere; }

.pp-match-rules {
    list-style: none;
    margin: 0;
    padding: 1.1rem 1.2rem;
    border-radius: 20px;
    color: #fff;
    background: var(--pp-stars), var(--pp-brand);
    box-shadow: 0 24px 48px -22px rgba(10, 22, 56, .85);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.pp-match-rules li:not(.pp-match-total) {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) 3.4rem;
    align-items: center;
    gap: .7rem;
}

.pp-match-rule b { font-size: .84rem; }
.pp-match-rule small {
    display: inline-block;
    margin-left: .25rem;
    padding: 0 .4rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    background: rgba(125, 211, 252, .18);
    color: var(--pp-glow);
}

.pp-match-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.pp-match-bar > span {
    display: block;
    height: 100%;
    width: var(--w);
    border-radius: inherit;
    background: linear-gradient(90deg, #60a5fa, #7dd3fc);
    box-shadow: 0 0 12px rgba(125, 211, 252, .7);
    transform-origin: left center;
    transition: scale 1.1s cubic-bezier(.22, 1, .36, 1);
}

.pp-match-pts { font-family: "JetBrains Mono", monospace; font-size: .76rem; text-align: right; color: rgba(220, 232, 255, .85); }

.pp-match-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem 1rem;
    margin-top: .3rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-weight: 700;
}

.pp-match-total .pp-stats-num { font-size: 2rem; color: #fff; background: none; -webkit-text-fill-color: #fff; }
.pp-match-total small { color: rgba(220, 232, 255, .7); }

.pp-match-verdict {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .76rem;
    color: #064e3b;
    background: #a7f3d0;
    transition: opacity .5s 1.1s, scale .5s 1.1s cubic-bezier(.34, 1.56, .64, 1);
}

.pp-motion .pp-match:not(.is-in) .pp-match-bar > span { scale: 0 1; }
.pp-motion .pp-match:not(.is-in) .pp-match-verdict { opacity: 0; scale: .8; }
.pp-match-rules li:nth-child(2) .pp-match-bar > span { transition-delay: .12s; }
.pp-match-rules li:nth-child(3) .pp-match-bar > span { transition-delay: .24s; }
.pp-match-rules li:nth-child(4) .pp-match-bar > span { transition-delay: .36s; }

@media (max-width: 960px) {
    .pp-match { grid-template-columns: 1fr 1fr; }
    .pp-match-rules { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 560px) {
    .pp-match { grid-template-columns: 1fr; }
    .pp-match-rules { grid-row: auto; }
    .pp-match-rules li:not(.pp-match-total) { grid-template-columns: 6rem minmax(0, 1fr) 3rem; }
}

/* ── Jump bar scroll-spy (class set by portal-motion.js) ─────────────────── */
.pp-jump a.is-current {
    color: #fff !important;
    background: var(--pp-cta);
}
.pp-jump a.is-current i.bi { color: var(--pp-glow) !important; }

/* ── Page heroes: a soft spotlight follows the pointer ───────────────────── */
.pp-page-hero { position: relative; isolation: isolate; }
.pp-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s;
    background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(125, 211, 252, .22), transparent 70%);
}
.pp-page-hero:hover::after { opacity: 1; }

/* Page hero title rises in on load. */
@keyframes ppTitleIn { from { opacity: 0; translate: 0 18px; filter: blur(6px); } }
.pp-page-hero .pp-eyebrow { animation: ppTitleIn .6s cubic-bezier(.22, 1, .36, 1) both; }
.pp-page-hero .pp-hero-title { animation: ppTitleIn .8s .08s cubic-bezier(.22, 1, .36, 1) both; }
.pp-page-hero .pp-hero-sub { animation: ppTitleIn .8s .18s cubic-bezier(.22, 1, .36, 1) both; }

/* ── Buttons: a light sweep across on hover; magnetic translate eases back ── */
.pp-hero-actions .pp-btn,
.pp-cta-actions .pp-btn { transition: translate .35s cubic-bezier(.22, 1, .36, 1), box-shadow .25s, background-color .25s, color .25s; }

.pp-btn-primary, .pp-btn-light { position: relative; overflow: hidden; isolation: isolate; }
.pp-btn-primary::after, .pp-btn-light::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    translate: -110% 0;
}
.pp-btn-primary:hover::after, .pp-btn-light:hover::after { translate: 110% 0; transition: translate .7s ease; }

@media (prefers-reduced-motion: reduce) {
    .pp-page-hero::after, .pp-btn-primary::after, .pp-btn-light::after { display: none; }
    .pp-match-bar > span, .pp-match-verdict { transition: none !important; }
}

/* ── Starting points (Home) and card-link arrows ────────────────────────────
   Five cards: three on the first row, two centred on the second on wide screens. */
.pp-start-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pp-start-grid > * { grid-column: span 2; }
.pp-start-grid > :nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 960px) {
    .pp-start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-start-grid > *, .pp-start-grid > :nth-child(4) { grid-column: auto; }
}
@media (max-width: 600px) {
    .pp-start-grid { grid-template-columns: 1fr; }
}

.pp-service-link i.bi { display: inline-block; transition: translate .3s cubic-bezier(.34, 1.56, .64, 1); }
.pp-service-card:hover .pp-service-link i.bi,
.pp-usecase:hover .pp-service-link i.bi,
.pp-service-link:hover i.bi { translate: 5px 0; }

@media (prefers-reduced-motion: reduce) {
    .pp-service-link i.bi { transition: none; }
}

/* ── Role swimlanes (Solutions) ─────────────────────────────────────────────
   A 5-column grid: role + four stages. Cells reveal row by row on scroll; a phone shows one card
   per role with each cell labelled by its stage (data-stage). */
.pp-lanes {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.pp-lanes-row {
    display: grid;
    grid-template-columns: 11rem repeat(4, minmax(0, 1fr));
    gap: .55rem;
}

.pp-lanes-head span {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .4rem;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pp-accent-text);
}

.pp-lanes-role {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem .9rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .88rem;
    color: #fff;
    background: var(--pp-stars), var(--pp-brand);
}
.pp-lanes-role i.bi { color: var(--pp-glow) !important; }

.pp-lanes-cell {
    position: relative;
    padding: .8rem .9rem;
    border-radius: 14px;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--pp-body);
    background: #fff;
    box-shadow: var(--pp-soft-1);
    transition: translate .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
.pp-lanes-cell:hover { translate: 0 -3px; box-shadow: 0 0 0 1.5px rgba(43, 111, 224, .22), var(--pp-soft-2); }

/* A thin connector between the cells of a row, so each lane reads left to right. */
.pp-lanes-cell:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -.55rem;
    width: .55rem;
    height: 2px;
    background: rgba(43, 111, 224, .35);
}

@supports (animation-timeline: view()) {
    .pp-lanes-row > * {
        animation: ppReveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
    }
    .pp-lanes-row > :nth-child(2) { animation-range: entry 5% entry 65%; }
    .pp-lanes-row > :nth-child(3) { animation-range: entry 10% entry 70%; }
    .pp-lanes-row > :nth-child(4) { animation-range: entry 15% entry 75%; }
    .pp-lanes-row > :nth-child(5) { animation-range: entry 20% entry 80%; }
}

@media (max-width: 900px) {
    .pp-lanes-head { display: none; }
    .pp-lanes-row { grid-template-columns: 1fr; gap: .35rem; margin-bottom: .8rem; }
    .pp-lanes-cell::after { display: none; }
    .pp-lanes-cell::before {
        content: attr(data-stage);
        display: block;
        margin-bottom: .15rem;
        font-size: .68rem;
        font-weight: 750;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--pp-accent-text);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-lanes-row > *, .pp-lanes-cell { animation: none !important; transition: none !important; }
}

/* ── Integration topology (Why EternityArc) ─────────────────────────────────
   Mesh: every link flickers in turn, like a sync that's always breaking somewhere.
   Hub: data flows steadily along the spokes into the golden record. */
.pp-topo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
    max-width: 920px;
    margin: 0 auto;
}

.pp-topo-panel {
    margin: 0;
    padding: 1.2rem 1.2rem 1rem;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
    text-align: center;
}

.pp-topo-panel.is-hub { background: var(--pp-stars), var(--pp-brand); color: #fff; }

.pp-topo-panel svg { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; overflow: visible; }

.pp-topo-panel figcaption { margin-top: .6rem; font-size: .88rem; color: var(--pp-body); }
.pp-topo-panel figcaption b { font-size: 1.5rem; margin-right: .3rem; color: #b42318; }
.pp-topo-panel.is-hub figcaption { color: rgba(220, 232, 255, .9); }
.pp-topo-panel.is-hub figcaption b { color: var(--pp-glow); }

.pp-topo-node circle { fill: #fff; stroke: #c7d2fe; stroke-width: 1.5; }
.pp-topo-node text { font: 700 8.5px Inter, sans-serif; fill: var(--pp-ink); text-anchor: middle; }
.is-hub .pp-topo-node circle { fill: #1b3175; stroke: rgba(125, 211, 252, .55); }
.is-hub .pp-topo-node text { fill: #fff; }

@keyframes ppLinkFlicker {
    0%, 70%, 100% { stroke: #cbd5e1; }
    78% { stroke: #f04438; }
    86% { stroke: #fda29b; }
}
.pp-topo-link {
    stroke: #cbd5e1;
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
    animation: ppLinkFlicker 3.4s linear infinite;
}

@keyframes ppSpokeFlow { to { stroke-dashoffset: -16; } }
.pp-topo-spoke {
    stroke: var(--pp-glow);
    stroke-width: 1.8;
    stroke-dasharray: 5 3;
    animation: ppSpokeFlow .9s linear infinite;
}

@keyframes ppHubPulse { 50% { r: 29; } }
.pp-topo-hub circle {
    fill: #fff;
    filter: drop-shadow(0 0 10px rgba(125, 211, 252, .8));
    animation: ppHubPulse 2.4s ease-in-out infinite;
}
.pp-topo-hub text { font: 800 7.5px Inter, sans-serif; fill: var(--pp-ink); text-anchor: middle; }

@media (max-width: 700px) {
    .pp-topo { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-topo-link, .pp-topo-spoke, .pp-topo-hub circle { animation: none !important; }
}

/* ── Glossary filter (Resources) ────────────────────────────────────────────
   Shown only when js/portal-forms.js has run and marked html.pp-js. */
.pp-gloss-search { display: none; }
.pp-js .pp-gloss-search {
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: 520px;
    margin: 0 auto 1.4rem;
    padding: .2rem .5rem .2rem 1rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
    transition: box-shadow .25s;
}
.pp-js .pp-gloss-search:focus-within { box-shadow: 0 0 0 2px rgba(43, 111, 224, .35), var(--pp-soft-2); }
.pp-gloss-search i.bi { color: var(--pp-accent) !important; }
.pp-gloss-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: .55rem 0;
    background: transparent;
    font-size: .9rem;
    color: var(--pp-ink);
}
.pp-gloss-count { font-size: .76rem; font-weight: 650; color: var(--pp-muted); white-space: nowrap; padding-right: .5rem; }

@keyframes ppGlossIn { from { opacity: 0; scale: .97; } }
.pp-glossary-item:not([hidden]) { animation: ppGlossIn .3s cubic-bezier(.22, 1, .36, 1); }
.pp-glossary-item[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .pp-glossary-item, .pp-gloss-search { animation: none !important; transition: none !important; }
}

/* ── "Seen in" use-case chips (Product) ─────────────────────────────────── */
.pp-seen-in { margin: 1rem 0 .4rem; }
.pp-seen-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.pp-seen-chips a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 650;
    text-decoration: none;
    color: var(--pp-ink) !important;
    background: var(--pp-tile);
    box-shadow: inset 0 0 0 1px var(--pp-hairline);
    transition: translate .25s cubic-bezier(.34, 1.56, .64, 1), background .2s, box-shadow .2s;
}
.pp-seen-chips a i.bi { color: var(--pp-accent) !important; }
.pp-seen-chips a:hover { translate: 0 -2px; background: var(--pp-accent-soft); box-shadow: inset 0 0 0 1px rgba(43, 111, 224, .35); }

/* ── Service matrix (Pricing) ───────────────────────────────────────────────
   Hovering any cell lights its whole column (:has), so a column reads as one licence. */
.pp-matrix-wrap {
    /* Positioned so the absolutely-positioned visually-hidden labels inside stay clipped by
       this scroller instead of widening the page on a phone. */
    position: relative;
    overflow-x: auto;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
}

.pp-matrix {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .86rem;
}

.pp-matrix th, .pp-matrix td {
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--pp-hairline);
    text-align: center;
    transition: background .2s;
}

.pp-matrix thead th {
    position: sticky;
    top: 0;
    background: #fff;
    font-size: .76rem;
    font-weight: 750;
    color: var(--pp-ink);
    vertical-align: bottom;
}
.pp-matrix thead th i.bi { display: block; font-size: 1.15rem; margin-bottom: .25rem; color: var(--pp-accent) !important; }

.pp-matrix tbody th { text-align: left; font-weight: 600; color: var(--pp-body); }
.pp-matrix td i.bi { font-size: 1.05rem; color: #059669 !important; }
.pp-matrix-dash { display: inline-block; width: 12px; height: 2px; border-radius: 2px; background: #d5dbe7; }

.pp-matrix tr.is-foundation th,
.pp-matrix tr.is-foundation td { border-bottom: 0; background: linear-gradient(160deg, #eef4ff, #f8faff); font-weight: 700; color: var(--pp-ink); }

.pp-matrix tbody tr:hover th { color: var(--pp-ink); }
.pp-matrix tbody tr:hover > * { background: #f8faff; }

.pp-matrix:has([data-col="0"]:hover) [data-col="0"],
.pp-matrix:has([data-col="1"]:hover) [data-col="1"],
.pp-matrix:has([data-col="2"]:hover) [data-col="2"],
.pp-matrix:has([data-col="3"]:hover) [data-col="3"],
.pp-matrix:has([data-col="4"]:hover) [data-col="4"] { background: var(--pp-accent-soft); }

@keyframes ppTick { from { scale: 0; opacity: 0; } 60% { scale: 1.25; } }
@supports (animation-timeline: view()) {
    .pp-matrix td i.bi {
        display: inline-block;
        animation: ppTick linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 70%;
    }
}

/* ── Lost record (404) ──────────────────────────────────────────────────── */
@keyframes ppDrift {
    0%, 100% { translate: 0 0; rotate: -3deg; }
    50% { translate: 0 -12px; rotate: 3deg; }
}
@keyframes ppScan { to { rotate: 360deg; } }

.pp-lost {
    position: relative;
    width: 200px;
    height: 120px;
    margin: 0 auto 1.4rem;
    display: grid;
    place-items: center;
}

.pp-lost-ring {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(125, 211, 252, 0), rgba(125, 211, 252, .45) 20%, rgba(125, 211, 252, 0) 22%);
    mask: radial-gradient(circle, transparent 58%, #000 59%);
    animation: ppScan 3s linear infinite;
}

.pp-lost-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .9rem;
    border-radius: 14px;
    text-align: left;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 1px rgba(125, 211, 252, .4), 0 18px 36px -18px rgba(0, 0, 0, .7);
    backdrop-filter: blur(6px);
    animation: ppDrift 4s ease-in-out infinite;
}
.pp-lost-card i.bi { font-size: 1.5rem; color: var(--pp-glow) !important; }
.pp-lost-card b { display: block; font-family: "JetBrains Mono", monospace; font-size: .85rem; }
.pp-lost-card small { font-size: .7rem; color: rgba(220, 232, 255, .8); }

/* ── Activity ticker (Home) ─────────────────────────────────────────────── */
@keyframes ppTicker { to { translate: -100% 0; } }
@keyframes ppDot { 50% { opacity: .35; } }

.pp-ticker {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1180px;
    margin: 1.5rem auto 0;
    padding: .55rem .6rem .55rem 1rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--pp-soft-1);
}

.pp-ticker-tag {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pp-accent-text);
}
.pp-ticker-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .2); animation: ppDot 1.6s ease-in-out infinite; }

.pp-ticker-viewport {
    flex: 1;
    min-width: 0;
    display: flex;
    overflow: hidden;
    mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.pp-ticker-track {
    flex: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0 2rem 0 0;
    list-style: none;
    animation: ppTicker 48s linear infinite;
}
.pp-ticker:hover .pp-ticker-track { animation-play-state: paused; }

.pp-ticker-track li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
    font-size: .82rem;
    color: var(--pp-body);
}
.pp-ticker-track li i.bi { color: var(--pp-accent) !important; }

@media (max-width: 600px) {
    .pp-ticker { border-radius: 18px; flex-direction: column; align-items: stretch; gap: .4rem; }
}

/* ── Back to top with scroll progress ring (layout; ring set by portal-motion.js) ── */
.pp-totop {
    position: fixed;
    right: 1.2rem;
    bottom: 6.2rem; /* clears the assistant widget */
    z-index: 55;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--pp-accent-text);
    background: conic-gradient(var(--pp-accent) calc(var(--p, 0) * 1turn), var(--pp-hairline) 0);
    box-shadow: var(--pp-soft-2);
    cursor: pointer;
    opacity: 0;
    translate: 0 12px;
    pointer-events: none;
    transition: opacity .3s, translate .3s cubic-bezier(.22, 1, .36, 1);
}
.pp-totop::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.pp-totop i.bi { position: relative; font-size: 1.1rem; transition: translate .25s cubic-bezier(.34, 1.56, .64, 1); }
.pp-totop:hover i.bi { translate: 0 -3px; }
.pp-totop.is-shown { opacity: 1; translate: 0 0; pointer-events: auto; }
.pp-totop:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .pp-seen-chips a, .pp-matrix td i.bi, .pp-lost-ring, .pp-lost-card,
    .pp-ticker-dot, .pp-totop, .pp-totop i.bi { animation: none !important; transition: none !important; }
    /* A ticker that can't move becomes a wrapped list, and the copy goes. */
    .pp-ticker-track { animation: none !important; flex-wrap: wrap; gap: .4rem 1.4rem; }
    .pp-ticker-track[aria-hidden="true"] { display: none; }
    .pp-ticker-viewport { mask: none; }
}

/* ── Contact: scenarios for the chosen service ─────────────────────────────
   Re-keyed on every change of service, so the list re-runs its entrance. */
.pp-contact-scenarios ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.pp-contact-scenarios a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit !important;
    background: var(--pp-tile);
    transition: translate .25s cubic-bezier(.34, 1.56, .64, 1), background .2s;
}
.pp-contact-scenarios a:hover { translate: 3px 0; background: var(--pp-accent-soft); }
.pp-contact-scenarios a i.bi { flex: none; color: var(--pp-accent) !important; font-size: 1.05rem; }
.pp-contact-scenarios b { display: block; font-size: .82rem; color: var(--pp-ink); }
.pp-contact-scenarios small { display: block; font-size: .76rem; color: var(--pp-muted); }

@keyframes ppScenarioIn { from { opacity: 0; translate: 0 8px; } }
.pp-contact-scenarios li { animation: ppScenarioIn .45s cubic-bezier(.22, 1, .36, 1) both; }
.pp-contact-scenarios li:nth-child(2) { animation-delay: .06s; }
.pp-contact-scenarios li:nth-child(3) { animation-delay: .12s; }
.pp-contact-scenarios li:nth-child(4) { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
    .pp-contact-scenarios li, .pp-contact-scenarios a { animation: none !important; transition: none !important; }
}

/* ── Arc assistant: links, suggestions, clear, privacy line ────────────── */
.pp-chat-panel { height: 540px; width: min(370px, calc(100vw - 3.5rem)); }

.pp-chat-clear {
    appearance: none;
    background: none;
    border: 0;
    padding: .2rem .35rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, .75);
    cursor: pointer;
    transition: color .2s, rotate .4s cubic-bezier(.34, 1.56, .64, 1);
}
.pp-chat-clear:hover { color: #fff; rotate: -120deg; }

@keyframes ppBubbleIn { from { opacity: 0; translate: 0 6px; } }
.pp-chat-bubble { animation: ppBubbleIn .28s cubic-bezier(.22, 1, .36, 1) both; overflow-wrap: anywhere; }
.pp-chat-bubble.user.is-removed { background: #fef3f2; color: #912018; font-style: italic; }

.pp-chat-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.pp-chat-links a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 650;
    text-decoration: none;
    color: var(--pp-accent-text) !important;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(43, 111, 224, .3);
}
.pp-chat-links a:hover { background: var(--pp-accent-soft); }

.pp-chat-suggest {
    display: flex;
    gap: .35rem;
    padding: .5rem .75rem 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.pp-chat-suggest button {
    flex: none;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: .3rem .7rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--pp-ink);
    background: var(--pp-tile);
    box-shadow: inset 0 0 0 1px var(--pp-hairline);
    cursor: pointer;
    transition: background .2s, translate .25s cubic-bezier(.34, 1.56, .64, 1);
}
.pp-chat-suggest button:hover { background: var(--pp-accent-soft); translate: 0 -1px; }

.pp-chat-input-row button:disabled { opacity: .5; cursor: default; }

.pp-chat-privacy {
    margin: 0;
    padding: 0 .9rem .6rem;
    font-size: .7rem;
    line-height: 1.35;
    color: var(--pp-muted);
}
.pp-chat-privacy i.bi { color: #059669 !important; }

@media (prefers-reduced-motion: reduce) {
    .pp-chat-bubble, .pp-chat-clear, .pp-chat-suggest button { animation: none !important; transition: none !important; }
}

/* ── Contact: topic picker, message hints & counter, confirmation ─────────── */
.pp-topics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin: .4rem 0 1.2rem;
}

.pp-topic {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .8rem;
    border: 0;
    border-radius: 14px;
    text-align: left;
    background: var(--pp-tile);
    box-shadow: inset 0 0 0 1px var(--pp-hairline);
    cursor: pointer;
    transition: background .2s, box-shadow .2s, translate .25s cubic-bezier(.34, 1.56, .64, 1);
}
.pp-topic i.bi { font-size: 1.25rem; color: var(--pp-accent) !important; transition: scale .3s cubic-bezier(.34, 1.56, .64, 1); }
.pp-topic b { display: block; font-size: .86rem; color: var(--pp-ink); }
.pp-topic small { display: block; font-size: .74rem; color: var(--pp-muted); }
.pp-topic:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px rgba(43, 111, 224, .35); }
.pp-topic.is-on { background: var(--pp-accent-soft); box-shadow: inset 0 0 0 1.5px var(--pp-accent); }
.pp-topic.is-on i.bi { scale: 1.12; }
.pp-topic:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }

@media (max-width: 520px) { .pp-topics { grid-template-columns: 1fr; } }

.pp-message-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .8rem;
    margin-top: .35rem;
    font-size: .74rem;
    color: var(--pp-muted);
}
.pp-hint-list { display: flex; flex-wrap: wrap; gap: .25rem .8rem; }
.pp-hint-list span { display: inline-flex; align-items: center; gap: .25rem; animation: ppStepIn .35s cubic-bezier(.22, 1, .36, 1) both; }
.pp-hint-list i.bi { color: #059669 !important; }
.pp-counter { flex: none; font-variant-numeric: tabular-nums; }
.pp-counter.is-near { color: #b54708; font-weight: 700; }

.pp-contact-done {
    padding: 1.6rem 1.4rem;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--pp-soft-2);
    animation: ppStepIn .5s cubic-bezier(.22, 1, .36, 1) both;
}
.pp-contact-done:focus { outline: none; }
.pp-contact-done h2 { font-size: 1.25rem !important; margin: .6rem 0 .3rem; color: var(--pp-ink); }
.pp-contact-done > p { color: var(--pp-body); }
.pp-contact-done .pp-btn { margin-top: 1rem; }

@keyframes ppDrawCircle { from { stroke-dashoffset: 151; } }
@keyframes ppDrawTick { from { stroke-dashoffset: 36; } }
.pp-done-check { width: 56px; height: 56px; }
.pp-done-check circle { fill: #ecfdf5; stroke: #10b981; stroke-width: 2.5; stroke-dasharray: 151; animation: ppDrawCircle .7s cubic-bezier(.65, 0, .45, 1) both; }
.pp-done-check path { fill: none; stroke: #059669; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; animation: ppDrawTick .4s .6s cubic-bezier(.65, 0, .45, 1) both; }

.pp-done-steps { margin: .8rem 0 0; padding-left: 1.2rem; font-size: .9rem; color: var(--pp-body); }
.pp-done-steps li + li { margin-top: .3rem; }
.pp-done-steps li { animation: ppStepIn .45s cubic-bezier(.22, 1, .36, 1) both; }
.pp-done-steps li:nth-child(1) { animation-delay: .8s; }
.pp-done-steps li:nth-child(2) { animation-delay: .9s; }
.pp-done-steps li:nth-child(3) { animation-delay: 1s; }
.pp-done-while { margin: 1rem 0 0; font-size: .85rem; font-weight: 650; color: var(--pp-ink); }

@media (prefers-reduced-motion: reduce) {
    .pp-topic, .pp-topic i.bi, .pp-hint-list span, .pp-contact-done, .pp-done-check circle,
    .pp-done-check path, .pp-done-steps li { animation: none !important; transition: none !important; }
}

/* ── Ask Arc page and the static-page launcher link ────────────────────── */
.pp-ask {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2.4rem;
    align-items: start;
    max-width: 1120px;
    margin: 2.5rem auto 3rem;
    padding: 0 16px;
}

.pp-ask-facts { list-style: none; margin: 1.2rem 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.pp-ask-facts li { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--pp-body); }
.pp-ask-facts i.bi {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--pp-accent) !important;
    background: var(--pp-accent-soft);
}
.pp-ask-facts b { color: var(--pp-ink); }
.pp-ask-back { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; font-size: .88rem; }
.pp-ask-person { margin-top: .8rem; font-size: .88rem; color: var(--pp-muted); }

/* The inline panel sits in the page instead of floating. */
.pp-chat-inline .pp-chat-panel {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: min(640px, calc(100vh - 150px));
    max-height: none;
    border-radius: 22px;
    box-shadow: var(--pp-soft-2);
}

@media (max-width: 860px) {
    .pp-ask { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; margin-top: 1.5rem; }
    .pp-chat-inline .pp-chat-panel { height: 560px; }
}

/* Static pages: the same mascot, as a link. The greeting stays as its label. */
a.pp-ask-launcher { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; text-decoration: none; }
a.pp-ask-launcher .pp-mascot-greeting { position: static; animation: ppStepIn .5s 1s cubic-bezier(.22, 1, .36, 1) both; }
a.pp-ask-launcher .pp-mascot-btn { display: block; }
a.pp-ask-launcher .pp-mascot-btn img { width: 100%; height: 100%; object-fit: cover; }
a.pp-ask-launcher:focus-visible .pp-mascot-btn { outline: 3px solid var(--pp-accent); outline-offset: 3px; }

@media (max-width: 600px) {
    a.pp-ask-launcher .pp-mascot-greeting { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    a.pp-ask-launcher .pp-mascot-greeting { animation: none !important; }
}

/* ── Stage: hero band + a card that rises over its edge (Ask, Talk to us) ────
   The band is a .pp-page-hero with an aurora that drifts slowly; .pp-stage-card pulls the page's
   main card up over the band's lower edge. */
@keyframes ppAurora {
    0%, 100% { background-position: 0% 0%, 100% 100%; }
    50% { background-position: 30% 20%, 70% 80%; }
}

.pp-stage-band { padding-bottom: clamp(110px, 14vh, 150px); margin-bottom: 0; }
.pp-stage-band::before {
    background:
        radial-gradient(520px 340px at 80% 0%, rgba(165, 105, 230, .32), transparent 70%),
        radial-gradient(480px 320px at 10% 100%, rgba(45, 212, 191, .2), transparent 70%);
    background-size: 140% 140%, 140% 140%;
    animation: ppAurora 18s ease-in-out infinite;
}
.pp-stage-band-tall { padding: 0; height: clamp(240px, 32vh, 320px); }

.pp-stage-card { position: relative; z-index: 1; margin-top: calc(-1 * clamp(80px, 11vh, 120px)); }

/* Contact: three quick ways in, as glass tiles inside the band. */
.pp-stage-ways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    max-width: 820px !important;
    margin-top: 1.6rem;
    animation: ppRise .7s .24s cubic-bezier(.22, 1, .36, 1) both;
}
.pp-stage-ways a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem .9rem;
    border-radius: 16px;
    text-align: left;
    text-decoration: none;
    color: #fff !important;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(190, 215, 255, .22);
    backdrop-filter: blur(8px);
    transition: background .25s, translate .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.pp-stage-ways a:hover { translate: 0 -3px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .55), 0 14px 30px -16px rgba(0, 0, 0, .6); }
.pp-stage-ways i.bi {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.1rem;
    color: var(--pp-glow) !important;
    background: rgba(125, 211, 252, .12);
}
.pp-stage-ways b { display: block; font-size: .88rem; }
.pp-stage-ways small { display: block; font-size: .74rem; color: rgba(210, 225, 255, .78); overflow-wrap: anywhere; }

/* Contact: the split becomes one raised card. */
.pp-contact-split.pp-stage-card {
    max-width: 1060px;
    padding: 2.2rem 2.4rem 2.4rem;
    gap: 2.6rem;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(18, 34, 77, .06), 0 40px 80px -40px rgba(22, 48, 138, .55);
    animation: ppRise .7s .2s cubic-bezier(.22, 1, .36, 1) both;
}
.pp-contact-split.pp-stage-card .pp-contact-info {
    background: var(--pp-stars), linear-gradient(170deg, #f3f7ff, #eaf0ff);
    box-shadow: inset 0 0 0 1px rgba(43, 111, 224, .12);
}

/* Ask: a dark intro card beside the chat; the chat gets a slowly turning glow border. */
.pp-ask.pp-stage-card { margin-top: calc(-1 * clamp(190px, 26vh, 260px)); }

.pp-ask-intro {
    padding: 2rem 1.9rem;
    border-radius: 26px;
    color: #fff;
    background: var(--pp-stars), var(--pp-brand);
    box-shadow: inset 0 0 0 1px rgba(190, 215, 255, .18), 0 30px 60px -30px rgba(0, 0, 0, .6);
    animation: ppRise .7s .1s cubic-bezier(.22, 1, .36, 1) both;
}
.pp-ask-intro .pp-eyebrow { color: rgba(190, 215, 255, .78); letter-spacing: .18em; }
.pp-ask-intro h1.pp-hero-title {
    font-size: clamp(26px, 2.4vw, 36px) !important;
    line-height: 1.15;
    text-wrap: balance;
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
    margin: .4rem 0 .6rem;
}
.pp-ask-intro .pp-hero-sub { color: rgba(210, 225, 255, .86); font-size: .95rem; }

.pp-ask-knows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1.3rem 0; }
.pp-ask-knows > div {
    display: flex;
    flex-direction: column-reverse;
    padding: .75rem .8rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(190, 215, 255, .16);
}
.pp-ask-knows dt { font-size: .72rem; font-weight: 600; color: rgba(210, 225, 255, .75); }
.pp-ask-knows dd { margin: 0; font-size: 1.7rem !important; font-weight: 800; color: #fff; background: none; -webkit-text-fill-color: #fff; }

.pp-ask-intro .pp-ask-facts li { color: rgba(220, 232, 255, .86); }
.pp-ask-intro .pp-ask-facts b { color: #fff; }
.pp-ask-intro .pp-ask-facts i.bi { color: var(--pp-glow) !important; background: rgba(125, 211, 252, .12); }

.pp-ask-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pp-ask-links a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 650;
    text-decoration: none;
    color: #fff !important;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(190, 215, 255, .25);
    transition: background .2s, translate .25s cubic-bezier(.34, 1.56, .64, 1);
}
.pp-ask-links a:hover { background: rgba(255, 255, 255, .18); translate: 0 -2px; }

@property --pp-ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ppRing { to { --pp-ring: 360deg; } }

.pp-ask-chat { position: relative; border-radius: 24px; animation: ppRise .7s .22s cubic-bezier(.22, 1, .36, 1) both; }
.pp-ask-chat::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 0;
    border-radius: 24px;
    pointer-events: none;
    background: conic-gradient(from var(--pp-ring), #2b6fe0, #7dd3fc, #a78bfa, #2dd4bf, #2b6fe0);
    filter: blur(.5px);
    opacity: .85;
    animation: ppRing 9s linear infinite;
}
.pp-ask-chat > * { position: relative; z-index: 1; }
.pp-ask-chat .pp-chat-panel { box-shadow: 0 40px 80px -40px rgba(10, 22, 56, .8); }

@media (max-width: 860px) {
    .pp-stage-ways { grid-template-columns: minmax(0, 1fr); max-width: 420px !important; }
    .pp-contact-split.pp-stage-card { padding: 1.4rem 1.1rem 1.6rem; border-radius: 20px; }
    .pp-ask.pp-stage-card { margin-top: calc(-1 * clamp(180px, 24vh, 240px)); }
    .pp-ask-intro { padding: 1.4rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-stage-band::before, .pp-stage-ways, .pp-stage-ways a, .pp-contact-split.pp-stage-card,
    .pp-ask-intro, .pp-ask-chat, .pp-ask-chat::before, .pp-ask-links a { animation: none !important; transition: none !important; }
}

/* Stage on phones: the layout already pads the page, so the Ask grid adds none, and the three
   "knows" tiles become compact rows rather than squeezed columns. */
@media (max-width: 600px) {
    .pp-ask { padding: 0; }
    .pp-ask-intro h1.pp-hero-title { font-size: 24px !important; }
    .pp-ask-knows { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
    .pp-ask-knows > div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: .6rem; padding: .5rem .75rem; }
    .pp-ask-knows dd { font-size: 1.3rem !important; }
}

/* ── Provider console: shell, tabs, alerts, toolbar, list polish ────────────
   AdminShell (Components/Admin) owns the header and section tabs; AdminAlert owns callouts. */
.pp-admin-shell-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
.pp-admin-shell-crumb {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-accent-text);
}
.pp-admin-shell-title h1 { font-size: clamp(24px, 2.2vw, 32px) !important; font-weight: 800; color: var(--pp-ink); margin: .25rem 0 .2rem; }
.pp-admin-shell-title p { margin: 0; color: var(--pp-muted); font-size: .92rem; }
.pp-admin-shell-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.pp-admin-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--pp-hairline);
    overflow-x: auto;
    scrollbar-width: none;
}
.pp-admin-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem .95rem;
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 650;
    text-decoration: none;
    color: var(--pp-muted) !important;
    border-radius: 10px 10px 0 0;
    transition: color .2s, background .2s;
}
.pp-admin-tabs a:hover { color: var(--pp-ink) !important; background: var(--pp-tile); }
.pp-admin-tabs a::after {
    content: "";
    position: absolute;
    left: .7rem;
    right: .7rem;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--pp-mark);
    scale: 0 1;
    transition: scale .3s cubic-bezier(.22, 1, .36, 1);
}
.pp-admin-tabs a.is-current { color: var(--pp-ink) !important; }
.pp-admin-tabs a.is-current::after { scale: 1 1; }
.pp-admin-tabs a.is-current i.bi { color: var(--pp-accent) !important; }

/* Alerts */
.pp-admin-alert {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .9rem 1.1rem;
    border-radius: 16px;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--pp-ink);
    background: #f2f6ff;
    box-shadow: inset 0 0 0 1px rgba(43, 111, 224, .18);
    animation: ppStepIn .35s cubic-bezier(.22, 1, .36, 1) both;
}
.pp-admin-alert > i.bi { flex: none; font-size: 1.15rem; margin-top: .05rem; color: var(--pp-accent) !important; }
.pp-admin-alert-body { flex: 1 1 18rem; min-width: 0; }
.pp-admin-alert-action { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pp-admin-alert.is-success { background: #ecfdf5; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .3); }
.pp-admin-alert.is-success > i.bi { color: #059669 !important; }
.pp-admin-alert.is-warning { background: #fffaeb; box-shadow: inset 0 0 0 1px rgba(220, 104, 3, .28); }
.pp-admin-alert.is-warning > i.bi { color: #b54708 !important; }
.pp-admin-alert.is-error { background: #fef3f2; box-shadow: inset 0 0 0 1px rgba(217, 45, 32, .28); }
.pp-admin-alert.is-error > i.bi { color: #d92d20 !important; }

.pp-btn-danger { color: #fff !important; background: linear-gradient(120deg, #b42318, #d92d20) !important; border: 0; }
.pp-btn-danger:hover { filter: brightness(1.06); }

/* Stat cards are buttons now: each opens the rows it counts. */
button.pp-admin-stat-card {
    appearance: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    font: inherit;
    cursor: pointer;
    transition: translate .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
button.pp-admin-stat-card:hover { translate: 0 -3px; box-shadow: 0 0 0 1.5px rgba(43, 111, 224, .22), var(--pp-soft-2); }
button.pp-admin-stat-card:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.pp-admin-stat-card > i.bi {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.15rem;
    color: var(--pp-accent) !important;
    background: var(--pp-accent-soft);
}
.pp-admin-stat-flag {
    margin-top: .5rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    color: #b54708;
    background: #fffaeb;
}

/* Toolbar under the type tabs: status pills, search, sort. */
.pp-admin-typetabs .pp-filter-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; font-size: .86rem; }
.pp-pill-count {
    min-width: 1.5em;
    padding: 0 .4rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 750;
    text-align: center;
    background: rgba(18, 34, 77, .08);
}
.pp-filter-pill.active .pp-pill-count { background: rgba(255, 255, 255, .22); }

.pp-admin-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem 1rem;
    padding: .9rem 1.4rem;
    border-bottom: 1px solid var(--pp-hairline);
    background: #fbfcfe;
}
.pp-admin-toolbar .pp-filter-pills { flex-wrap: wrap; }
.pp-admin-search {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 340px;
    margin-left: auto;
    padding: 0 .8rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--pp-hairline);
    transition: box-shadow .2s;
}
.pp-admin-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--pp-accent); }
.pp-admin-search i.bi { color: var(--pp-muted) !important; }
.pp-admin-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: .5rem 0; font-size: .86rem; background: transparent; color: var(--pp-ink); }
.pp-admin-sort {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 0;
    padding: .45rem .8rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 650;
    color: var(--pp-ink);
    background: #eef2f9;
    cursor: pointer;
}
.pp-admin-sort:hover { background: var(--pp-accent-soft); }

/* Table */
.pp-admin-table-wrap { overflow-x: auto; }
.pp-admin-table thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.pp-admin-table tbody tr { transition: background .15s; }
.pp-admin-table tbody td { vertical-align: middle; }
.pp-admin-table td b { font-weight: 650; color: var(--pp-ink); }
.pp-admin-table code { font-size: .82rem; padding: .1rem .4rem; border-radius: 6px; color: var(--pp-ink); background: var(--pp-tile); }
.pp-admin-when { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-admin-age, .pp-admin-sub { display: block; font-size: .74rem; color: var(--pp-muted); }
.pp-admin-age.is-stale { color: #b54708; font-weight: 700; }
.pp-admin-table tr.is-stale > td:first-child { box-shadow: inset 3px 0 0 #f79009; }
.pp-admin-actions { white-space: nowrap; }
.pp-admin-actions .btn + .btn { margin-left: .3rem; }
.pp-admin-message-row td { background: var(--pp-tile); }
.pp-admin-message {
    max-width: 60rem;
    padding: .7rem .9rem;
    border-radius: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .88rem;
    color: var(--pp-body);
    background: #fff;
    box-shadow: inset 3px 0 0 var(--pp-accent);
}

.pp-admin-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 2.6rem 1.4rem;
    text-align: center;
    color: var(--pp-muted);
    font-size: .9rem;
}
.pp-admin-empty i.bi { font-size: 2rem; color: #c3cee3 !important; margin-bottom: .3rem; }
.pp-admin-empty b { color: var(--pp-ink); }

.pp-admin-card-foot {
    padding: .7rem 1.4rem;
    font-size: .78rem;
    color: var(--pp-muted);
    border-top: 1px solid var(--pp-hairline);
}

@media (max-width: 700px) {
    .pp-admin-search { max-width: none; margin-left: 0; flex-basis: 100%; }
    .pp-admin-stat-card > i.bi { width: 34px; height: 34px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-admin-tabs a::after, .pp-admin-alert, button.pp-admin-stat-card { animation: none !important; transition: none !important; }
}

/* ── Authenticator enrolment: scan, then type ─────────────────────────────── */
.pp-totp-intro { display: flex; gap: 1rem; align-items: flex-start; }
.pp-totp-intro > i.bi {
    flex: none;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 1.6rem;
    color: var(--pp-accent) !important;
    background: var(--pp-accent-soft);
}

.pp-totp-steps {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 1.2rem;
}
.pp-totp-step {
    position: relative;
    padding: 1.3rem 1.3rem 1.2rem;
    border-radius: 18px;
    background: var(--pp-tile);
    box-shadow: inset 0 0 0 1px var(--pp-hairline);
}
.pp-totp-step h2 { font-size: 1.02rem !important; font-weight: 750; color: var(--pp-ink); margin: .5rem 0 .3rem; }
.pp-totp-step > p { font-size: .88rem; color: var(--pp-body); margin: 0 0 .9rem; }
.pp-totp-num {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
    background: var(--pp-mark);
}

.pp-totp-qr {
    width: min(220px, 100%);
    aspect-ratio: 1;
    margin: 0 auto .9rem;
    padding: 12px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--pp-hairline), 0 18px 36px -22px rgba(22, 48, 138, .55);
    animation: ppStepIn .5s cubic-bezier(.22, 1, .36, 1) both;
}
.pp-totp-qr svg { display: block; width: 100%; height: 100%; }

.pp-totp-manual { font-size: .85rem; color: var(--pp-body); }
.pp-totp-manual summary { cursor: pointer; font-weight: 650; color: var(--pp-accent-text); }
.pp-totp-manual p { margin: .55rem 0 .4rem; }
.pp-totp-key {
    display: block;
    padding: .6rem .75rem;
    border-radius: 10px;
    font-size: .92rem;
    letter-spacing: .06em;
    word-break: break-all;
    user-select: all;
    color: var(--pp-ink);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--pp-hairline);
}

.pp-totp-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.pp-totp-code {
    flex: 1 1 10rem;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 1.5rem !important;
    letter-spacing: .3em;
    text-align: center;
}
.pp-totp-hint { font-size: .78rem; color: var(--pp-muted); margin: .7rem 0 0; }

@media (max-width: 760px) {
    .pp-totp-steps { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .pp-totp-qr { animation: none !important; }
}

/* ── Requests: clickable rows, pager ────────────────────────────────────── */
.pp-admin-table tr.pp-admin-row-link { cursor: pointer; }
.pp-admin-table tr.pp-admin-row-link:hover > td { background: #f6f9ff; }
.pp-admin-table a.pp-admin-sub { text-decoration: none; color: var(--pp-accent-text) !important; overflow-wrap: anywhere; }
.pp-admin-table a.pp-admin-sub:hover { text-decoration: underline; }

.pp-admin-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.pp-admin-pager { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; color: var(--pp-ink); }
.pp-admin-pager button {
    appearance: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: var(--pp-ink);
    background: #eef2f9;
    cursor: pointer;
}
.pp-admin-pager button:hover:not(:disabled) { background: var(--pp-accent-soft); }
.pp-admin-pager button:disabled { opacity: .4; cursor: default; }

/* ── Chat dialog layout (Arc) ───────────────────────────────────────────────
   One block that owns the dialog's geometry, after the older chat rules in app.css and above.
   Every section shares the same side inset (--chat-x) so their edges line up; the header and
   input rows are flex rows whose growing child may shrink (min-width: 0), so nothing is pushed
   out of the panel on a narrow screen. */
.pp-chat-panel {
    --chat-x: .9rem;
    display: flex;
    flex-direction: column;
    right: 0;
    width: min(380px, calc(100vw - 2rem));
    height: min(560px, calc(100dvh - 140px));
    max-height: none;
    overflow: hidden;
}

/* Header: avatar | title + subtitle | clear | close, all vertically centred. */
.pp-chat-header {
    flex: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem var(--chat-x);
}
.pp-chat-header img { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.pp-chat-header-text { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.pp-chat-header-text strong,
.pp-chat-header-text span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-chat-header-text strong { font-size: .95rem; }
.pp-chat-header-text span { font-size: .74rem; margin-top: .1rem; }

.pp-chat-clear,
.pp-chat-close {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    line-height: 1;
    background: transparent;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
}
.pp-chat-clear { font-size: 1rem; }
.pp-chat-close { font-size: 1.35rem; }
.pp-chat-clear:hover,
.pp-chat-close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.pp-chat-clear:focus-visible,
.pp-chat-close:focus-visible { outline: 2px solid var(--pp-glow); outline-offset: 1px; }

/* Messages: the only part that scrolls. */
.pp-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem var(--chat-x);
    gap: .6rem;
}
.pp-chat-bubble { max-width: 86%; }
.pp-chat-bubble.bot { align-self: flex-start; }
.pp-chat-bubble.user { align-self: flex-end; }
.pp-chat-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }

/* Suggestions: one scrollable row on the same inset. */
.pp-chat-suggest {
    flex: none;
    padding: .55rem var(--chat-x) .1rem;
    scroll-padding-inline: var(--chat-x);
}

/* Input row: the field shrinks, Send keeps its size; both the same height. */
.pp-chat-input-row {
    flex: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem var(--chat-x);
}
.pp-chat-input-row input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 .75rem;
}
.pp-chat-input-row button {
    flex: none;
    height: 40px;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
}

.pp-chat-privacy {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    padding: 0 var(--chat-x) .75rem;
}
.pp-chat-privacy i.bi { flex: none; margin-top: .05rem; }

/* Phones: the floating panel spans the screen with a 1rem gutter, above the launcher. */
@media (max-width: 480px) {
    .pp-mascot-launcher { right: 1rem; bottom: 1rem; }
    .pp-mascot-launcher > .pp-chat-panel {
        position: fixed;
        left: 1rem;
        right: 1rem;
        bottom: calc(1rem + 84px + .75rem);
        width: auto;
        height: min(520px, calc(100dvh - 84px - 4rem));
    }
    .pp-chat-panel { --chat-x: .75rem; }
    .pp-chat-input-row button { padding: 0 .8rem; }
}

/* Inline (Ask page): fills its column instead of floating. */
.pp-chat-inline .pp-chat-panel { position: relative; left: auto; right: auto; bottom: auto; width: 100%; }

/* ── Competitor comparison (Why EternityArc) ── */
.pp-vs { min-width: 860px; }
.pp-vs td { font-size: .8rem; color: var(--pp-body); text-align: left; vertical-align: top; }
.pp-vs th.is-us, .pp-vs td.is-us { background: var(--pp-accent-soft); color: var(--pp-ink); font-weight: 650; }
.pp-vs-note { margin-top: .75rem; font-size: .76rem; color: var(--pp-body); opacity: .8; }
.pp-vs-card ul { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .35rem; font-size: .86rem; text-align: left; }
.pp-vs-card li i.bi { color: #059669 !important; }

/* ── Why EternityArc: pillars, readiness, cost ── */
.pp-why-hero-actions { justify-content: center; margin-top: 1.4rem; }
.pp-pillar { margin-top: 2.2rem; }
.pp-pillar-head { display: flex; gap: .9rem; align-items: center; margin-bottom: 1rem; text-align: left; }
.pp-pillar-head h3 { margin: 0; font-size: 1.15rem; color: var(--pp-ink); }
.pp-pillar-head p { margin: .15rem 0 0; color: var(--pp-body); font-size: .9rem; }
.pp-pillar-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--pp-accent-soft); font-size: 1.25rem; }
.pp-pillar-icon i.bi { color: var(--pp-accent) !important; }
.pp-pillar .pp-service-card h4 { font-size: 1rem; margin: .6rem 0 .35rem; color: var(--pp-ink); }
.pp-ready-card ul { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .35rem; font-size: .86rem; text-align: left; }
.pp-ready-card li i.bi { color: #059669 !important; }
.pp-tco { min-width: 640px; }
.pp-tco thead th { text-align: left; }
@media (max-width: 640px) { .pp-pillar-head { align-items: flex-start; } }
.pp-pillar .pp-why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pp-pillar .pp-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pp-pillar .pp-why-grid { grid-template-columns: 1fr; } }