/* Provider Portal — layout on top of the shared EternityArc design tokens
   (common.css / design-system.css / dimensional.css), same navy/blue
   palette and Manrope/Sora/Inter fonts as the main EternityArc app. */

body {
    background: var(--app-surface-color, #f5f6f8);
    font-family: var(--app-font-family), sans-serif;
}

.pp-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Nav */
.pp-navbar {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 0 2.5rem;
    height: 68px;
    background: #fff;
    border-bottom: 1px solid rgba(20, 30, 60, 0.08);
    position: sticky;
    top: 0;
    z-index: 40;
}

.pp-navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--app-primary-color, #1b3896) !important;
    font-family: 'Sora', var(--app-font-family), sans-serif;
    letter-spacing: -0.01em;
}

h1:focus {
    outline: none;
}

.pp-brand-mark {
    height: 30px;
    width: 30px;
    object-fit: contain;
}

.pp-brand-wordmark {
    height: 16px;
    width: auto;
    object-fit: contain;
}

.pp-navbar-links {
    display: flex;
    align-items: center;
    gap: 1.9rem;
    flex-wrap: wrap;
    flex: 1;
}

.pp-navbar-links a {
    color: #2b3442 !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.86rem;
    white-space: nowrap;
}

.pp-navbar-actions {
    display: flex;
    align-items: center;
    gap: 1.3rem;
}

.pp-navbar-actions > a:not(.pp-btn) {
    color: #2b3442 !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.86rem;
    white-space: nowrap;
}

.pp-navbar-cta {
    padding: 0.55rem 1.15rem !important;
    font-size: 0.85rem !important;
}

.pp-navbar-links a:hover,
.pp-navbar-actions > a:not(.pp-btn):hover {
    color: var(--app-primary-color, #1b3896) !important;
}

.pp-navbar-user {
    color: #2b3442;
    font-weight: 600;
    font-size: 0.86rem;
    white-space: nowrap;
}

.pp-logout-form {
    display: inline-flex;
    margin: 0;
}

.pp-main {
    flex: 1;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

/* Hero */
.pp-hero {
    text-align: center;
    padding: 2rem 1rem 3.5rem;
}

.pp-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-secondary-color, #4f8cff);
    margin-bottom: 0.9rem;
}

.pp-hero-title {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    background: var(--app-title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.1rem;
}

.pp-hero-sub {
    max-width: 640px;
    margin: 0 auto 1.75rem;
    color: #5b6470;
    font-size: 1.02rem;
    line-height: 1.6;
}

.pp-hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
}

/* Dark enterprise hero, full-bleed */
.pp-hero-dark {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    background: linear-gradient(155deg, #0d1630 0%, var(--app-primary-color, #1b3896) 60%, #16225e 100%);
    color: #fff;
    padding-top: 4.5rem;
}

.pp-hero-dark-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem 3.5rem;
}

.pp-eyebrow-dark {
    color: #9fc0ff;
}

.pp-hero-dark-title {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.18;
    color: #fff;
    margin-bottom: 1.15rem;
    letter-spacing: -0.01em;
}

.pp-hero-dark-sub {
    max-width: 620px;
    margin: 0 auto 2rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.05rem;
    line-height: 1.65;
}

.pp-hero-strip {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.12);
}

.pp-hero-strip-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.1rem 1.6rem;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
    font-size: 0.88rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.pp-hero-strip-item:last-child {
    border-right: none;
}

.pp-hero-strip-item i {
    color: #9fc0ff;
}

.pp-hero-strip-item {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: inherit;
}

.pp-hero-strip-item.active {
    color: #fff;
    border-bottom-color: #fff;
}

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

/* Stats band beneath hero */
.pp-stats-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    text-align: center;
    padding: 3rem 0;
    border-bottom: 1px solid rgba(20, 30, 60, 0.08);
    margin-bottom: 3.5rem;
}

/* Home page sections below the stats band (Platform Services, the Use Cases teaser) — each
   gets its own top padding so two back-to-back .pp-services blocks don't butt against each
   other, and a divider marks where one scroll section ends and the next begins. */
.pp-services {
    padding-top: 3rem;
}

.pp-pricing-points {
    margin-bottom: 1rem;
}

.pp-services + .pp-services {
    padding-top: 4.5rem;
    margin-top: 4.5rem;
    border-top: 1px solid rgba(27, 56, 150, 0.08);
}

.pp-stats-band-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pp-stats-num {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--app-primary-color, #1b3896);
}

.pp-stats-label {
    color: #6b7482;
    font-size: 0.88rem;
}

/* Buttons */
.pp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pp-btn-primary {
    background: var(--app-primary-color, #1b3896);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(27, 56, 150, 0.25);
}

.pp-btn-primary:hover {
    transform: translateY(-1px);
    color: #fff !important;
}

.pp-btn-secondary {
    background: #fff;
    color: var(--app-primary-color, #1b3896) !important;
    border: 1px solid rgba(27, 56, 150, 0.25);
}

.pp-btn-secondary:hover {
    border-color: var(--app-primary-color, #1b3896);
    color: var(--app-primary-color, #1b3896) !important;
}

.pp-btn-light {
    background: #fff;
    color: var(--app-primary-color, #1b3896) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.pp-btn-light:hover {
    transform: translateY(-1px);
    color: var(--app-primary-color, #1b3896) !important;
}

.pp-btn-outline-light {
    background: transparent;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.pp-btn-outline-light:hover {
    border-color: #fff;
    color: #fff !important;
}

/* Sections */
.pp-section-title {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    color: #1c2430;
    margin-bottom: 0.4rem;
}

.pp-section-sub {
    text-align: center;
    color: #6b7482;
    max-width: 560px;
    margin: 0 auto 2.2rem;
}

/* Service grid */
.pp-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.pp-service-card {
    background: #fff;
    border: 1px solid rgba(27, 56, 150, 0.08);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(20, 30, 60, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pp-service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(20, 30, 60, 0.09);
}

.pp-service-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--app-primary-color, #1b3896) 10%, white);
    color: var(--app-primary-color, #1b3896);
    font-size: 1.35rem;
    margin-bottom: 1.1rem;
}

.pp-service-card h3 {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: #1c2430;
}

.pp-service-card p {
    color: #626b78;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.pp-service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pp-service-features li {
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-secondary-color, #4f8cff) 12%, white);
    color: var(--app-secondary-color, #4f8cff);
}

.pp-service-link {
    margin-top: auto;
    color: var(--app-primary-color, #1b3896) !important;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
}

.pp-service-link:hover {
    text-decoration: underline;
}

/* How it works */
.pp-how {
    margin-top: 4rem;
}

.pp-how-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.pp-how-step {
    text-align: center;
}

.pp-how-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--app-primary-color, #1b3896);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.7rem;
}

.pp-how-step h3,
.pp-how-step h4 {
    font-weight: 700;
    font-size: 0.98rem;
    margin-bottom: 0.3rem;
    color: #1c2430;
}

.pp-how-step p {
    color: #6b7482;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Why EternityArc: before/after comparison */
.pp-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.pp-compare-col {
    border-radius: 14px;
    padding: 1.5rem 1.6rem;
}

.pp-compare-before {
    background: #fbf5f4;
    border: 1px solid rgba(212, 69, 58, 0.15);
}

.pp-compare-after {
    background: color-mix(in srgb, var(--app-primary-color, #1b3896) 6%, white);
    border: 1px solid rgba(27, 56, 150, 0.15);
}

.pp-compare-col h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

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

.pp-compare-after h3 {
    color: var(--app-primary-color, #1b3896);
}

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

.pp-compare-col li {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #45505f;
    padding-left: 1.1rem;
    position: relative;
}

.pp-compare-before li::before {
    content: '\2013';
    position: absolute;
    left: 0;
    color: #b3554d;
}

.pp-compare-after li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--app-primary-color, #1b3896);
    font-weight: 700;
}

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

/* Resources: glossary + getting-started checklist */
.pp-glossary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin: 0;
}

.pp-glossary-item {
    background: #fff;
    border: 1px solid rgba(27, 56, 150, 0.08);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
}

.pp-glossary-item dt {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1c2430;
    margin-bottom: 0.4rem;
}

.pp-glossary-item dd {
    margin: 0;
    color: #626b78;
    font-size: 0.88rem;
    line-height: 1.55;
}

.pp-checklist {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.pp-checklist li {
    color: #45505f;
    font-size: 0.92rem;
    line-height: 1.6;
    padding-left: 0.3rem;
}

.pp-checklist li strong {
    color: #1c2430;
}

/* FAQ (native <details>/<summary>, no JS needed) */
.pp-faq {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pp-faq-item {
    background: #fff;
    border: 1px solid rgba(27, 56, 150, 0.08);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.pp-faq-item summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1c2430;
    list-style: none;
}

.pp-faq-item summary::-webkit-details-marker {
    display: none;
}

.pp-faq-item summary::before {
    content: '+';
    display: inline-block;
    width: 1.1em;
    color: var(--app-primary-color, #1b3896);
    font-weight: 700;
}

.pp-faq-item[open] summary::before {
    content: '\2212';
}

.pp-faq-item p {
    margin: 0.75rem 0 0 1.1em;
    color: #626b78;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Contact / Register forms */
.pp-contact {
    max-width: 560px;
    margin: 0 auto;
}

.pp-contact-split {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3.5rem;
    max-width: 980px;
    margin: 0 auto;
    padding-top: 3rem;
    text-align: left;
}

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

.pp-contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding-top: 0.5rem;
}

.pp-contact-info-block span,
.pp-contact-info-block a {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1c2430;
}

/* After the value rule and more specific, so the caption span keeps its caption look. */
.pp-contact-info-block .pp-contact-info-label {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8b90a3;
    margin-bottom: 0.3rem;
}

.pp-contact-info-divider {
    border: none;
    border-top: 1px solid #e3e6f2;
    margin: 0.5rem 0;
}

.pp-contact-info a {
    color: var(--app-primary-color, #1c2761) !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.pp-contact-info a:hover {
    text-decoration: underline;
}

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

.pp-form {
    margin-top: 1.5rem;
}

.pp-field {
    margin-bottom: 1.1rem;
}

.pp-field label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    color: #45505f;
    margin-bottom: 0.35rem;
}

.pp-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border: 1px solid #d6dbe3;
    font-family: var(--app-font-family), sans-serif;
    font-size: 0.92rem;
}

.pp-input:focus {
    outline: none;
    border-color: var(--app-primary-color, #1b3896);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary-color, #1b3896) 12%, transparent);
}

.pp-alert {
    padding: 1rem 1.2rem;
    border-radius: 10px;
    font-size: 0.92rem;
}

.pp-alert-success {
    background: color-mix(in srgb, #2e9e5b 12%, white);
    color: #1e6e3e;
}

.pp-alert-danger {
    background: color-mix(in srgb, #d4453a 10%, white);
    color: #a3271e;
}

.pp-alert code {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.3rem 0.6rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    font-size: 0.95rem;
}

/* Dropdowns
   ------------------------------------------------------------------
   common.css ships a complete M3 select treatment — appearance reset, chevron, hover and focus
   states — under `select:not([multiple]):not([size])`. That part is good and is kept. What it also
   does is impose its own field geometry with !important: 1px border, --m3-field-radius, its own
   background and font size. A <select> carrying .dnx-setup-input therefore rendered as an M3 field
   sitting next to text inputs rendered as setup fields — 8px radius against 12px, 12.6px text
   against 13.7px, different border colour — which in one short form reads as a mistake.

   These rules re-impose the sibling field's geometry and leave the chevron machinery alone.
   Specificity is deliberate: `select:not([multiple]):not([size])` is (0,2,1), so a plain
   `select.dnx-setup-input` at (0,1,1) would lose. Repeating the :not() pair lifts these to (0,3,1),
   and !important is needed line by line because the rules being corrected use it. */
select.dnx-setup-input:not([multiple]):not([size]) {
    height: 48px;
    min-height: 48px;
    /* Right padding clears the chevron; left matches .dnx-setup-input's 1rem. */
    padding: 0 44px 0 1rem !important;
    border: 1.5px solid #CBD5E1 !important;
    /* Longhands as well as the shorthand above. The rule being corrected sets `border` with
       !important, and while this selector outranks it, the M3 block also transitions border-color —
       a transition in flight sits above author !important in the cascade, so the colour is pinned
       to whatever the transition is interpolating until it settles. Narrowing the transition below
       removes that fight; the longhands make the intent explicit either way. */
    border-color: #CBD5E1 !important;
    border-width: 1.5px !important;
    border-radius: 12px !important;
    /* Deliberately drops border-color from the transition list the M3 rule sets. Border colour here
       changes only on hover and focus, both of which are instant-feeling interactions, and leaving
       it animated means every restyle briefly outranks the cascade. */
    transition: box-shadow 0.2s ease, background-position 0.2s ease !important;
    background-color: var(--app-surface) !important;
    color: var(--app-text-color) !important;
    font-size: 0.95rem;
    font-family: inherit;
    background-position: right 16px center;
    background-size: 16px 16px;
    /* The environment options carry a trailing description, so a narrow field must truncate
       rather than let the text slide under the chevron. */
    text-overflow: ellipsis;
}

select.dnx-setup-input:not([multiple]):not([size]):hover:not(:disabled) {
    border-color: #94A3B8 !important;
    background-color: var(--app-surface) !important;
}

/* Matches .dnx-setup-input:focus exactly — the same blue and the same 4px ring, so tabbing through
   a form doesn't change shape when it reaches the dropdown. */
select.dnx-setup-input:not([multiple]):not([size]):focus,
select.dnx-setup-input:not([multiple]):not([size]):focus-visible {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
    background-color: var(--app-surface) !important;
    outline: none;
}

/* The marketing forms use .pp-input, which is a smaller field than the wizard's — same reconciling,
   different target geometry. */
select.pp-input:not([multiple]):not([size]) {
    min-height: 0;
    padding: 0.6rem 2.4rem 0.6rem 0.8rem !important;
    border: 1px solid #d6dbe3 !important;
    border-color: #d6dbe3 !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    color: #1c2430 !important;
    font-size: 0.92rem;
    font-family: var(--app-font-family), sans-serif;
    /* The M3 rule pins line-height to 1.4, which makes the select a little over a pixel shorter
       than the text inputs it sits beside. Handing it back to the font's own line box is what makes
       the two agree, rather than guessing a height. */
    line-height: normal !important;
    background-position: right 12px center;
    background-size: 15px 15px;
    text-overflow: ellipsis;
    /* Same reason as the wizard field above: border-color must not be mid-transition, or it
       outranks the cascade. */
    transition: box-shadow 0.2s ease, background-position 0.2s ease !important;
}

select.pp-input:not([multiple]):not([size]):hover:not(:disabled) {
    border-color: #b9c1cf !important;
    background-color: #fff !important;
}

select.pp-input:not([multiple]):not([size]):focus,
select.pp-input:not([multiple]):not([size]):focus-visible {
    border-color: var(--app-primary-color, #1b3896) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary-color, #1b3896) 12%, transparent) !important;
    background-color: #fff !important;
    outline: none;
}

/* The open list is drawn by the OS, not by us, and it inherits neither of the rules above. Without
   explicit colours a viewer whose system is in dark mode gets dark-on-dark options under a light
   field — the one part of a <select> that CSS can still get badly wrong. */
select.dnx-setup-input option,
select.pp-input option {
    background-color: #fff;
    color: #1c2430;
}

/* Registration wizard
   ------------------------------------------------------------------
   The wizard's chrome — stepper, card, headers, form groups, actions — is the dnx-setup-* and
   dnx-stepper-* vocabulary out of common.css, shared verbatim with EternityArc's /setup so the two read
   as one process. Only the page-level frame and the review list are portal-specific, and they live
   here rather than being bolted onto those shared rules. */
.pp-wizard {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 0 4rem;
    text-align: left;
}

/* The setup card carries a deep shadow tuned for the wizard's dark shell. On the portal's white
   page it needs a tinted ground underneath or it reads as a bruise rather than a lift. */
.pp-wizard .dnx-setup-card {
    background: #fff;
    padding: 2.5rem 2.75rem;
}

/* Same specificity as the rule above, so common.css's phone padding (0,1,0) could never win. */
@media (max-width: 768px) {
    .pp-wizard .dnx-setup-card {
        padding: 1.75rem 1.25rem;
    }
}

.pp-wizard .dnx-setup-provider-grid {
    margin-bottom: 0;
}

.pp-review-list {
    margin: 0;
    border: 1px solid #e3e6f2;
    border-radius: 12px;
    overflow: hidden;
}

.pp-review-list > div {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid #eef0f7;
}

.pp-review-list > div:last-child {
    border-bottom: none;
}

.pp-review-list dt {
    font-weight: 600;
    font-size: 0.86rem;
    color: #6b7482;
    margin: 0;
}

.pp-review-list dd {
    margin: 0;
    /* Multi-line notes keep the line breaks the registrant typed. */
    white-space: pre-line;
    font-size: 0.92rem;
    color: #1c2430;
    word-break: break-word;
}

.pp-review-list code {
    background: color-mix(in srgb, var(--app-primary-color, #1b3896) 8%, white);
    color: var(--app-primary-color, #1b3896);
    padding: 0.12rem 0.4rem;
    border-radius: 5px;
    font-size: 0.88rem;
}

@media (max-width: 700px) {
    .pp-review-list > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* Register page */
.pp-register-split {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3.5rem;
    max-width: 980px;
    margin: 0 auto;
    padding-top: 3rem;
    text-align: left;
}

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

.pp-field-hint {
    display: block;
    font-size: 0.8rem;
    color: #5f6577;
    margin-top: 0.25rem;
}

.pp-register-aside {
    background: color-mix(in srgb, var(--app-primary-color, #1b3896) 5%, white);
    border-radius: 16px;
    padding: 1.75rem;
}

.pp-register-aside h3 {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #1c2430;
    margin-bottom: 1.1rem;
}

.pp-register-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.pp-register-steps li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    font-size: 0.88rem;
    color: #45505f;
    line-height: 1.5;
}

.pp-register-steps .pp-register-step-num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--app-primary-color, #1b3896);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-register-aside-note {
    font-size: 0.82rem;
    color: #626b78;
    line-height: 1.55;
    border-top: 1px solid rgba(27, 56, 150, 0.1);
    padding-top: 1rem;
}

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

.pp-services-more {
    text-align: center;
    margin-top: 2rem;
}

/* Secondary page hero (Product/Solutions/Why/Resources/Developers/Pricing) */
.pp-page-hero {
    text-align: center;
    padding: 3rem 1rem 3rem;
    max-width: 720px;
    margin: 0 auto;
}

.pp-page-hero .pp-hero-title {
    font-size: 2.1rem;
}

/* Product detail rows */
.pp-product-detail {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 2rem 0;
    border-top: 1px solid rgba(27, 56, 150, 0.08);
}

.pp-product-detail:first-of-type {
    border-top: none;
}

.pp-product-detail-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--app-primary-color, #1b3896) 10%, white);
    color: var(--app-primary-color, #1b3896);
    font-size: 1.4rem;
}

.pp-product-detail-body h2 {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1c2430;
    margin-bottom: 0.4rem;
}

.pp-product-detail-body p {
    color: #626b78;
    margin-bottom: 0.85rem;
    line-height: 1.55;
}

.pp-product-detail-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.pp-product-detail-list li {
    color: #45505f;
    font-size: 0.9rem;
}

.pp-product-detail-list i {
    color: var(--app-secondary-color, #4f8cff);
    margin-right: 0.4rem;
}

.pp-service-link-muted {
    color: #5f6b7e !important;
    cursor: default;
}

.pp-service-link-muted:hover {
    text-decoration: none;
}

/* Use case rows (Use Cases page) */
.pp-usecase {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 2rem 0;
    border-top: 1px solid rgba(27, 56, 150, 0.08);
}

.pp-usecase:first-of-type {
    border-top: none;
}

.pp-usecase-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--app-primary-color, #1b3896) 10%, white);
    color: var(--app-primary-color, #1b3896);
    font-size: 1.4rem;
}

.pp-usecase-industry {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-secondary-color, #4f8cff);
    margin-bottom: 0.4rem;
}

.pp-usecase-body h2 {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1c2430;
    margin-bottom: 0.9rem;
}

.pp-usecase-row {
    margin-bottom: 0.75rem;
}

.pp-usecase-label {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9aa2ae;
    margin-bottom: 0.2rem;
}

.pp-usecase-row p {
    color: #45505f;
    line-height: 1.6;
    margin: 0;
}

.pp-usecase-body .pp-service-features {
    margin-top: 0.9rem;
}

/* CTA band, used on secondary pages */
.pp-cta-band {
    text-align: center;
    margin-top: 3.5rem;
    padding: 2.5rem 2rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--app-primary-color, #1b3896) 6%, white);
}

.pp-cta-band h2 {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1c2430;
    margin-bottom: 0.4rem;
}

.pp-cta-band p {
    color: #626b78;
    margin-bottom: 1.25rem;
}

/* Developers page code blocks */
.pp-dev-panel {
    max-width: 760px;
    margin: 0 auto;
}

.pp-code-block {
    background: #12172a;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
}

.pp-code-block-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-secondary-color, #4f8cff);
    margin-bottom: 0.6rem;
}

.pp-code-block pre {
    color: #d6dbe3;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

.pp-code-block code {
    color: #9fd0ff;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

/* Footer */
.pp-footer {
    background: #0d1428;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4rem;
}

.pp-footer-top {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3.5rem 2rem 2.5rem;
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 2.5rem;
}

.pp-footer-brand {
    max-width: 280px;
}

.pp-footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.85rem;
}

.pp-footer-logo .pp-brand-mark {
    height: 26px;
    width: 26px;
    object-fit: contain;
}

.pp-footer-logo .pp-brand-wordmark {
    height: 14px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 6px rgba(90, 180, 255, 0.45));
}

.pp-footer-brand p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
}

.pp-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.pp-footer-col h4 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.3rem;
}

.pp-footer-col a {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none;
    font-size: 0.88rem;
}

.pp-footer-col a:hover {
    color: #fff !important;
}

.pp-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 2rem;
    max-width: 1180px;
    margin: 0 auto;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

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

/* AI assistant widget (mascot chat) */
.pp-mascot-launcher {
    position: fixed;
    right: 1.75rem;
    bottom: 1.75rem;
    z-index: 60;
}

.pp-mascot-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 10px 28px rgba(20, 30, 60, 0.28);
    overflow: hidden;
    animation: pp-mascot-float 3s ease-in-out infinite;
}

.pp-mascot-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-mascot-btn.wave {
    animation: pp-mascot-float 3s ease-in-out infinite, pp-mascot-wave 1.4s ease-in-out 0.6s 1;
}

@keyframes pp-mascot-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes pp-mascot-wave {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(-14deg); }
    45% { transform: rotate(11deg); }
    65% { transform: rotate(-9deg); }
    85% { transform: rotate(6deg); }
    100% { transform: rotate(0deg); }
}

.pp-mascot-greeting {
    position: absolute;
    right: 92px;
    bottom: 24px;
    background: #fff;
    color: #1c2430;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(20, 30, 60, 0.18);
    animation: pp-greeting-pop 5s ease-in-out 0.3s 1;
    opacity: 0;
}

@keyframes pp-greeting-pop {
    0% { opacity: 0; transform: translateY(6px) scale(0.96); }
    10%, 80% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(6px) scale(0.96); }
}

.pp-chat-panel {
    position: absolute;
    right: 0;
    bottom: 100px;
    /* Launcher sits 1.75rem from the right edge; never run off the left edge of a phone. */
    width: min(340px, calc(100vw - 3.5rem));
    max-height: calc(100vh - 160px);
    height: 440px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(20, 30, 60, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pp-chat-pop-in 0.22s ease-out;
}

@keyframes pp-chat-pop-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.pp-chat-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(150deg, #0c1442 0%, #1d2a7a 60%, #2a3aa0 100%);
    color: #fff;
}

.pp-chat-header img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.pp-chat-header-text {
    flex: 1;
    line-height: 1.25;
}

.pp-chat-header-text strong {
    display: block;
    font-size: 0.92rem;
}

.pp-chat-header-text span {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.7);
}

.pp-chat-close {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}

.pp-chat-close:hover {
    color: #fff;
}

.pp-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pp-chat-bubble {
    max-width: 82%;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    font-size: 0.86rem;
    line-height: 1.45;
}

.pp-chat-bubble.bot {
    align-self: flex-start;
    background: #eef1f9;
    color: #1c2430;
    border-bottom-left-radius: 4px;
}

.pp-chat-bubble.user {
    align-self: flex-end;
    background: var(--app-primary-color, #1c2761);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.pp-chat-input-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid #e3e6f2;
}

.pp-chat-input-row input {
    flex: 1;
    border: 1px solid #d6dbe3;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
}

.pp-chat-input-row input:focus {
    outline: none;
    border-color: var(--app-primary-color, #1c2761);
}

.pp-chat-input-row button {
    appearance: none;
    -webkit-appearance: none;
    background: var(--app-primary-color, #1c2761);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Sign In split-screen page */
.pp-signin-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 68px - 1px);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}

.pp-signin-panel {
    background: linear-gradient(150deg, #0c1442 0%, #1d2a7a 60%, #2a3aa0 100%);
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pp-signin-panel-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
}

.pp-signin-panel-brand .pp-brand-mark {
    height: 30px;
    width: 30px;
}

.pp-signin-panel-brand .pp-brand-wordmark {
    height: 16px;
    filter: drop-shadow(0 1px 6px rgba(90, 180, 255, 0.45));
}

.pp-signin-panel-body h1 {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    max-width: 420px;
}

.pp-signin-panel-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.pp-signin-panel-body li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
}

.pp-signin-panel-body li i {
    color: #93a2f5;
    margin-top: 0.2rem;
}

.pp-signin-panel-note {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    max-width: 420px;
    margin: 0;
}

.pp-signin-hint {
    margin: 1.25rem 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #5a5f77;
}

/* A form POST styled as a link: resending a verification code changes server state, so it has to
   be a button inside a form (antiforgery, no prefetch, not followed by a crawler) even though it
   reads as a link in the sentence around it. */
.pp-linkbutton {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--app-primary-color, #1c2761);
    font-weight: 600;
    cursor: pointer;
}

.pp-linkbutton:hover {
    text-decoration: underline;
}

.pp-signin-panel-copyright {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.pp-signin-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.pp-signin-card {
    width: 100%;
    max-width: 360px;
}

.pp-signin-card h2 {
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #1c2430;
}

.pp-signin-forgot {
    text-align: right;
    margin: -0.5rem 0 1.25rem;
}

.pp-signin-forgot a,
.pp-signin-register a {
    color: var(--app-primary-color, #1c2761) !important;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

.pp-signin-forgot a:hover,
.pp-signin-register a:hover {
    text-decoration: underline;
}

.pp-signin-divider {
    border: none;
    border-top: 1px solid #e3e6f2;
    margin: 1.5rem 0;
}

.pp-signin-register {
    text-align: center;
    font-size: 0.88rem;
    color: #5a5f77;
}

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

    .pp-signin-panel {
        padding: 2rem;
    }
}

/* Admin dashboard */
.pp-admin-page {
    padding: 2.75rem 0 1rem;
}

.pp-admin-header {
    margin-bottom: 2rem;
}

.pp-admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.pp-admin-stat-card {
    background: #fff;
    border: 1px solid #e3e6f2;
    border-radius: 12px;
    padding: 1.25rem 1.4rem;
}

.pp-admin-stat-num {
    display: block;
    font-family: 'Sora', var(--app-font-family), sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    color: #1c2761;
}

.pp-admin-stat-label {
    color: #5a5f77;
    font-size: 0.88rem;
}

.pp-admin-card {
    background: #fff;
    border: 1px solid #e3e6f2;
    border-radius: 12px;
    /* Still clips to the rounded corners, but a wide table scrolls sideways instead of hiding
       its right-hand action buttons on a narrow screen. */
    overflow-x: auto;
    overflow-y: hidden;
}

@media (max-width: 860px) {
    .pp-admin-table thead th,
    .pp-admin-table tbody td {
        padding: 0.7rem 0.8rem;
    }
}

.pp-admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid #eef0f6;
}

.pp-admin-card-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1c2430;
    margin: 0;
}

.pp-filter-pills {
    display: flex;
    gap: 0.4rem;
}

.pp-filter-pill {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #d6dbe3;
    background: #fff;
    color: #5a5f77;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.pp-filter-pill.active {
    background: #1c2761;
    border-color: #1c2761;
    color: #fff;
}

.pp-admin-table {
    border-collapse: separate;
    border-spacing: 0;
}

.pp-admin-table thead th {
    padding: 0.9rem 1.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7c8494;
    font-weight: 700;
    border-bottom: 1px solid #eef0f6;
    white-space: nowrap;
}

.pp-admin-table tbody td {
    padding: 1rem 1.4rem;
    vertical-align: middle;
    border-bottom: 1px solid #f2f4f9;
    color: #2b3442;
    font-size: 0.9rem;
}

.pp-admin-table tbody tr:last-child td {
    border-bottom: none;
}

.pp-admin-table tbody td:last-child {
    text-align: right;
    white-space: nowrap;
}

.pp-status-pill {
    display: inline-block;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.pp-status-pill.pending {
    color: #a36a00;
    background: #fef3e0;
}

.pp-status-pill.approved,
.pp-status-pill.provisioned,
.pp-status-pill.converted {
    color: #1a7a4a;
    background: #e5f6ec;
}

.pp-status-pill.rejected {
    color: #b3261e;
    background: #fdeceb;
}

/* Revoked: muted red with a strike, so it never reads as a neutral new item. */
.pp-status-pill.withdrawn {
    color: #8a4b4b;
    background: #f6ecec;
    text-decoration: line-through;
}

.pp-status-pill.new,
.pp-status-pill.contacted {
    color: #8b90a3;
    background: #eef0f6;
}

/* Accessibility: visible keyboard-focus ring on every interactive element. The mockup this
   layout follows is pointer-driven and never renders one, but the production build must. */
.pp-shell a:focus-visible,
.pp-shell button:focus-visible,
.pp-signin-shell a:focus-visible,
.pp-signin-shell button:focus-visible,
.pp-signin-shell input:focus-visible {
    outline: 2px solid var(--app-primary-color, #3548c8);
    outline-offset: 2px;
}

@media (max-width: 860px) {
    .pp-navbar {
        flex-wrap: wrap;
        height: auto;
        padding: 0.9rem 1.25rem;
        row-gap: 0.6rem;
    }

    .pp-navbar-links {
        order: 3;
        width: 100%;
        gap: 1rem 1.4rem;
    }

    .pp-stats-band {
        padding: 2.25rem 0;
    }

    .pp-how-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .pp-hero-dark-title {
        font-size: 2.1rem;
    }
}