.ppj-home {
    --ppj-ink: #102a43;
    --ppj-paper: #e7eef4;
    --ppj-slip: #f7f9fb;
    --ppj-navy: #0e4d8b;
    --ppj-navy-deep: #0b3e72;
    --ppj-rule: #8c1d2c;
    --ppj-line: #d5dee7;
    --ppj-muted: #3e4c5a;
    background: var(--ppj-paper);
    color: var(--ppj-ink);
    font-family: "Segoe UI", system-ui, sans-serif;
    min-height: 100vh;
}

.ppj-home .ppj-brand,
.ppj-home .ppj-promise,
.ppj-home .ppj-section-title,
.ppj-home .ppj-compare thead th,
.ppj-home .ppj-steps h3 {
    font-family: "Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

.ppj-bar {
    border-bottom: 1px solid var(--ppj-line);
}

.ppj-bar .container {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.ppj-brand {
    color: var(--ppj-navy);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    text-decoration: none;
}

.ppj-brand:hover {
    color: var(--ppj-navy-deep);
}

.ppj-hero {
    overflow-x: clip;
    padding: 2.75rem 0 2.5rem;
}

.ppj-nowrap {
    white-space: nowrap;
}

.ppj-eyebrow {
    color: var(--ppj-rule);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.ppj-promise {
    font-size: clamp(2.3rem, 5vw, 3.9rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.04;
    margin: 0 0 1.25rem;
    max-width: 14ch;
    text-wrap: balance;
}

.ppj-mono {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
}

.ppj-section-title {
    font-size: clamp(1.7rem, 2.8vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 1.5rem;
}

.ppj-support {
    color: var(--ppj-muted);
    font-size: 1.12rem;
    line-height: 1.55;
    margin: 0;
    max-width: 34rem;
}

/* Three measured facts; the monospace value is the ANAF-document voice of the page. */
.ppj-facts {
    border-top: 1px solid #b7c5d3;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 2.5rem 0 0;
    max-width: 36rem;
    padding-top: 1.1rem;
}

.ppj-facts dt {
    color: var(--ppj-navy);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.ppj-facts dd {
    color: var(--ppj-muted);
    font-size: 0.88rem;
    line-height: 1.4;
    margin: 0;
}

.ppj-phone {
    margin: 0 auto;
    max-width: 330px;
    position: relative;
}

.ppj-phone::before {
    background: var(--ppj-slip);
    border: 1px solid var(--ppj-line);
    border-radius: 50%;
    content: "";
    inset: 8% -18% 14%;
    position: absolute;
    z-index: 0;
}

.ppj-phone img {
    display: block;
    filter: drop-shadow(0 24px 40px rgba(16, 42, 67, 0.22));
    height: auto;
    position: relative;
    width: 100%;
    z-index: 1;
}

.ppj-phone figcaption {
    color: var(--ppj-muted);
    font-size: 0.82rem;
    margin-top: 0.9rem;
    position: relative;
    text-align: center;
    z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .ppj-phone img {
        animation: ppj-phone-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
}

.ppj-ask {
    background: var(--ppj-navy-deep);
    color: #fff;
    padding: 3.5rem 0;
}

.ppj-ask .ppj-eyebrow {
    color: #f3c6cc;
}

.ppj-ask-text {
    color: #dbe6f1;
    font-size: 1.08rem;
    line-height: 1.55;
    margin: 0 0 1rem;
    max-width: 34rem;
}

.ppj-ask-note {
    color: #aabfd4;
    font-size: 0.92rem;
    margin: 0;
}

.ppj-questions {
    display: grid;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ppj-questions li {
    background: #fff;
    border-radius: 18px 18px 4px 18px;
    color: var(--ppj-ink);
    font-size: 1.02rem;
    justify-self: end;
    max-width: 30rem;
    padding: 0.8rem 1.1rem;
}

.ppj-questions li::before {
    content: "„";
}

.ppj-questions li::after {
    content: "”";
}

.ppj-foot {
    border-top: 1px solid var(--ppj-line);
    color: var(--ppj-muted);
    font-size: 0.88rem;
    padding: 1.5rem 0 2rem;
}

.ppj-foot a {
    color: var(--ppj-navy);
}

.ppj-actions {
    margin-top: 1.75rem;
}

.ppj-home .btn-primary {
    --bs-btn-bg: #0e4d8b;
    --bs-btn-border-color: #0e4d8b;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #0b3e72;
    --bs-btn-hover-border-color: #0b3e72;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #08345f;
    --bs-btn-active-border-color: #08345f;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 14, 77, 139;
}

.ppj-plans {
    padding: 3.5rem 0 3.5rem;
}

.ppj-plans-panel {
    margin-inline: auto;
    max-width: 62rem;
}

.ppj-plans-lead {
    color: var(--ppj-muted);
    margin: 0 0 1.15rem;
    max-width: 40rem;
}

.ppj-plans-note {
    color: var(--ppj-muted);
    font-size: 0.85rem;
    margin: 0.75rem 0 0;
}

.ppj-plan-label {
    color: var(--ppj-muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0 0 0.4rem;
    text-transform: uppercase;
}

.ppj-compare-wrap {
    background: #fff;
    border: 1px solid #b7c5d3;
    border-radius: 0.75rem;
    max-width: 100%;
    overflow: hidden;
}

.ppj-compare {
    border-collapse: collapse;
    margin: 0;
    table-layout: fixed;
    width: 100%;
}

.ppj-compare-feature {
    width: 26%;
}

.ppj-compare-plan {
    width: 24.666%;
}

.ppj-compare th,
.ppj-compare td {
    border-bottom: 1px solid var(--ppj-line);
    font-size: 1rem;
    line-height: 1.45;
    padding: 0.8rem 0.9rem;
    vertical-align: top;
}

.ppj-compare thead th {
    background: var(--ppj-navy);
    border-bottom: 3px solid var(--ppj-rule);
    color: #fff;
    font-size: 1.12rem;
    font-weight: 600;
    text-align: center;
}

.ppj-compare thead th:first-child {
    text-align: left;
}

.ppj-compare tbody th {
    font-weight: 600;
    text-align: left;
}

.ppj-compare td {
    text-align: center;
    vertical-align: middle;
}

.ppj-compare tbody th {
    vertical-align: middle;
}

.ppj-compare tbody tr:nth-child(odd) th,
.ppj-compare tbody tr:nth-child(odd) td {
    background: #fff;
}

.ppj-compare tbody tr:nth-child(even) th,
.ppj-compare tbody tr:nth-child(even) td {
    background: #edf2f7;
}

.ppj-compare tbody tr:not(.ppj-compare-quote):hover th,
.ppj-compare tbody tr:not(.ppj-compare-quote):hover td {
    background: #e2eaf2;
}

.ppj-compare td + td,
.ppj-compare th + td {
    border-left: 1px solid var(--ppj-line);
}

.ppj-compare tbody tr.ppj-compare-quote th,
.ppj-compare tbody tr.ppj-compare-quote td {
    background: #fff;
    border-bottom: 0;
    border-top: 2px solid var(--ppj-navy);
    text-align: center;
    vertical-align: middle;
}

.ppj-compare-quote .ppj-plan-label {
    text-align: center;
}

.ppj-compare-quote .form-select {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    width: 6.5rem;
}

.ppj-quote-value {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 600;
}

.ppj-yes {
    color: #157347;
    font-weight: 600;
}

.ppj-yes .bi {
    font-size: 1.6rem;
    line-height: 1;
}

.ppj-no {
    color: var(--ppj-muted);
}

@media (max-width: 767.98px) {
    .ppj-compare thead,
    .ppj-compare colgroup {
        display: none;
    }

    .ppj-compare,
    .ppj-compare tbody,
    .ppj-compare tr,
    .ppj-compare th,
    .ppj-compare td {
        display: block;
        width: 100%;
    }

    .ppj-compare tr {
        border-bottom: 1px solid var(--ppj-line);
        padding: 0.55rem 0 0.7rem;
    }

    .ppj-compare tbody th,
    .ppj-compare td,
    .ppj-compare td + td,
    .ppj-compare th + td {
        border: 0;
        padding: 0.15rem 0.75rem;
        text-align: left;
    }

    .ppj-compare .ppj-no::before {
        content: "—";
    }

    .ppj-compare tbody th {
        padding-bottom: 0.35rem;
    }

    .ppj-compare td::before {
        color: var(--ppj-muted);
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .ppj-compare {
        table-layout: auto;
    }

    .ppj-compare tr.ppj-compare-quote {
        border-top: 2px solid var(--ppj-navy);
        padding-top: 0.85rem;
    }

    .ppj-compare tr.ppj-compare-quote th,
    .ppj-compare tr.ppj-compare-quote td {
        border-top: 0;
        padding: 0.4rem 0;
        text-align: center;
    }
}

.ppj-flow {
    border-top: 1px solid var(--ppj-line);
    padding: 3.25rem 0 3.5rem;
}

.ppj-steps {
    counter-reset: ppj;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ppj-steps > li {
    counter-increment: ppj;
}

.ppj-steps > li::before {
    border-bottom: 3px solid var(--ppj-rule);
    color: var(--ppj-navy);
    content: counter(ppj);
    display: inline-block;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.9rem;
    padding-bottom: 0.2rem;
}

.ppj-steps h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.ppj-steps p {
    color: var(--ppj-muted);
    margin: 0;
}

.ppj-home a:focus-visible,
.ppj-home button:focus-visible,
.ppj-home select:focus-visible {
    outline: 2px solid var(--ppj-navy);
    outline-offset: 3px;
}

@media (min-width: 992px) {
    .ppj-hero {
        padding: 4.5rem 0 3.5rem;
    }
}

@media (max-width: 575.98px) {
    .ppj-actions .btn {
        width: 100%;
    }

    .ppj-facts {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .ppj-phone::before {
        inset: 8% -6% 14%;
    }
}

@keyframes ppj-phone-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

