/* ============================================================
   Public pages — /pricing, /sfi, /swedish-course (+ levels), the
   feature pages, /learn-swedish-for-arabic-speakers and the
   /life-in-sweden phrase guides (PublicPageShell + PublicPages).

   Static SSR, signed-out first. One global file, every class 'pp-'
   prefixed; App.razor loads it only on these pages. The guest
   landing's Scandinavian palette with LITERAL values (the signed-in
   --skrol-* tokens are violet and must not leak in). Mobile first,
   logical properties only, so Arabic mirrors without its own rules.
   ============================================================ */

.pp-page {
    --pp-blue-deep: #00558c;
    --pp-blue-darker: #00416c;
    --pp-blue: #006aa7;
    --pp-blue-tint: #eaf2f8;
    --pp-navy: #0b2a45;
    --pp-yellow: #fecc02;
    --pp-yellow-soft: #fff6d1;
    --pp-yellow-ink: #7a5b00;
    --pp-green: #1e6b52;
    --pp-green-soft: #e4f2ec;
    --pp-ink: #15202b;
    --pp-ink-soft: #4f5b67;
    --pp-line: #e4e8ec;
    --pp-linen: #f7f5f0;
    --pp-mist: #f3f6f9;
    --pp-radius: 18px;
    --pp-shadow: 0 1px 2px rgba(11, 42, 69, .05), 0 12px 30px -22px rgba(11, 42, 69, .28);
    --pp-gutter: 16px;

    color: var(--pp-ink);
    background: #fff;
    font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.pp-page:lang(ar) {
    font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
    line-height: 1.75;
}

/* Resets at one class of specificity: enough to beat Bootstrap's element rules
   (ul { padding-left: 2rem; margin-bottom: 1rem }, h2 { margin-bottom: .5rem }),
   and tied with the single-class rules below, which come later and so win. */
.pp-page :where(h1, h2, h3, h4) {
    font-family: inherit;
    color: var(--pp-ink);
    margin: 0;
}

.pp-page :where(p, ul, ol, dl, dd, figure, blockquote) {
    margin: 0;
}

.pp-page :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.pp-page :where(a) {
    color: var(--pp-blue-deep);
}

.pp-page :focus-visible {
    outline: 3px solid var(--pp-blue);
    outline-offset: 2px;
    border-radius: 6px;
}

.pp-page [tabindex="-1"]:focus {
    outline: none;
}

/* Swedish inside an English or Arabic sentence. */
.pp-sv {
    font-weight: 700;
}

.pp-wrap {
    inline-size: 100%;
    max-inline-size: 1080px;
    margin-inline: auto;
    padding-inline: var(--pp-gutter);
}

.pp-wrap-narrow {
    max-inline-size: 760px;
}

.pp-muted {
    color: var(--pp-ink-soft);
}

/* ---------- buttons ---------- */

.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-block-size: 48px;
    padding: 12px 22px;
    border-radius: 12px;
    border: 2px solid transparent;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.pp-btn-primary {
    background: var(--pp-blue-deep);
    color: #fff;
}

.pp-btn-primary:hover {
    background: var(--pp-blue-darker);
    color: #fff;
}

.pp-btn-secondary {
    background: #fff;
    color: var(--pp-blue-deep);
    border-color: var(--pp-line);
}

.pp-btn-secondary:hover {
    border-color: var(--pp-blue-deep);
    color: var(--pp-blue-deep);
}

.pp-btn-light {
    background: #fff;
    color: var(--pp-navy);
}

.pp-btn-light:hover {
    background: var(--pp-yellow);
    color: var(--pp-navy);
}

[dir="rtl"] .pp-arrow {
    transform: scaleX(-1);
}

.pp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 24px;
}

.pp-actions > .pp-btn {
    flex: 1 1 220px;
}

@media (min-width: 640px) {
    .pp-actions > .pp-btn {
        flex: 0 0 auto;
    }
}

.pp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

/* ---------- breadcrumbs ---------- */

.pp-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    font-size: .875rem;
    color: var(--pp-ink-soft);
}

.pp-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pp-crumbs li + li::before {
    content: "›";
    color: #9aa5b1;
}

[dir="rtl"] .pp-crumbs li + li::before {
    content: "‹";
}

.pp-crumbs a {
    display: inline-flex;
    align-items: center;
    min-block-size: 32px;
    color: var(--pp-ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pp-crumbs [aria-current="page"] {
    color: var(--pp-ink);
    font-weight: 600;
}

/* ---------- hero ---------- */

.pp-hero {
    background: linear-gradient(180deg, var(--pp-blue-tint) 0%, #fff 100%);
    padding-block: 20px 40px;
}

.pp-hero-body {
    margin-block-start: 22px;
}

.pp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 12px;
    color: var(--pp-blue-deep);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.pp-h1 {
    max-inline-size: 22ch;
    font-size: clamp(2rem, 1.4rem + 3vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    text-wrap: balance;
}

.pp-page:lang(ar) .pp-h1 {
    letter-spacing: 0;
    line-height: 1.3;
}

.pp-lead {
    max-inline-size: 60ch;
    margin-block-start: 16px;
    color: var(--pp-ink-soft);
    font-size: 1.125rem;
    text-wrap: pretty;
}

/* Live facts under the hero's lead: "A1–C1", "48 weeks", "200+ lessons". */
.pp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 18px;
}

.pp-chips li {
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--pp-line);
    color: var(--pp-ink);
    font-size: .9375rem;
    font-weight: 700;
}

.pp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-block-start: 18px;
    color: var(--pp-ink-soft);
    font-size: .9375rem;
}

.pp-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pp-trust i {
    color: var(--pp-green);
}

/* A screenshot beside the hero's words on wide screens, under them on phones. */
.pp-hero-grid {
    display: grid;
    gap: 32px;
}

@media (min-width: 900px) {
    .pp-hero-grid.has-shot {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: center;
        gap: 56px;
    }
}

/* ---------- screenshots of the app (PublicShot) ---------- */

.pp-shot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* The WebP with its JPG fallback (<picture>); the frame is drawn on the picture inside. */
.pp-shot picture {
    display: block;
    inline-size: min(100%, 300px);
}

.pp-shot img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border: 6px solid var(--pp-navy);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(11, 42, 69, .08), 0 28px 50px -30px rgba(11, 42, 69, .55);
}

.pp-shot figcaption {
    max-inline-size: 30ch;
    color: var(--pp-ink-soft);
    font-size: .875rem;
    text-align: center;
}

/* Words beside a screenshot (a section's second picture). */
.pp-split {
    display: grid;
    gap: 32px;
}

@media (min-width: 860px) {
    .pp-split {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
        gap: 56px;
    }
}

/* ---------- sections ---------- */

.pp-section {
    padding-block: 44px;
}

.pp-section-alt {
    background: var(--pp-linen);
}

.pp-h2 {
    max-inline-size: 30ch;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    text-wrap: balance;
}

.pp-page:lang(ar) .pp-h2 {
    letter-spacing: 0;
    line-height: 1.35;
}

.pp-h3 {
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.35;
}

.pp-subhead {
    margin-block-start: 36px;
}

.pp-section-lead {
    max-inline-size: 64ch;
    margin-block-start: 10px;
    color: var(--pp-ink-soft);
    text-wrap: pretty;
}

/* Running prose: one readable column. */
.pp-prose {
    display: grid;
    gap: 14px;
    max-inline-size: 68ch;
    margin-block-start: 16px;
}

.pp-prose p {
    text-wrap: pretty;
}

.pp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-block-start: 24px;
}

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

    .pp-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.pp-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    background: #fff;
    box-shadow: var(--pp-shadow);
}

.pp-card p {
    color: var(--pp-ink-soft);
}

.pp-card-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    margin-block-end: 4px;
    border-radius: 12px;
    background: var(--pp-blue-tint);
    color: var(--pp-blue-deep);
    font-size: 1.3rem;
}

/* A card that is one link (related pages, guides): the title link covers it. */
.pp-card-linked {
    position: relative;
    transition: border-color .15s;
}

.pp-card-linked:hover {
    border-color: var(--pp-blue-deep);
}

.pp-card-link {
    color: var(--pp-ink);
    text-decoration: underline;
    text-decoration-color: var(--pp-line);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.pp-card-linked:hover .pp-card-link {
    color: var(--pp-blue-deep);
    text-decoration-color: currentColor;
}

.pp-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.pp-card-link:focus-visible {
    outline: none;
}

.pp-card-link:focus-visible::after {
    outline: 3px solid var(--pp-blue);
    outline-offset: 2px;
}

.pp-card-meta {
    margin-block-start: auto;
    padding-block-start: 6px;
    color: var(--pp-ink-soft);
    font-size: .8125rem;
    font-weight: 700;
}

/* Ticked list. */
.pp-checks {
    display: grid;
    gap: 10px;
    margin-block-start: 18px;
}

.pp-checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pp-checks li > i {
    flex: none;
    margin-block-start: 3px;
    color: var(--pp-green);
}

/* Numbered steps (yellow dots, as on the level test). */
.pp-steps {
    display: grid;
    gap: 18px;
    margin-block-start: 22px;
    counter-reset: pp-step;
}

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

    .pp-steps-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.pp-steps > li {
    position: relative;
    padding-inline-start: 50px;
    counter-increment: pp-step;
}

.pp-steps > li::before {
    content: counter(pp-step);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: var(--pp-yellow);
    color: var(--pp-navy);
    font-weight: 800;
}

.pp-steps h3 {
    display: flex;
    align-items: center;
    min-block-size: 36px;
    margin-block-end: 4px;
    font-size: 1.0625rem;
    font-weight: 800;
}

.pp-steps p {
    color: var(--pp-ink-soft);
}

/* A plain data table that stacks on phones. */
.pp-table {
    inline-size: 100%;
    margin-block-start: 22px;
    border: 1px solid var(--pp-line);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--pp-radius);
    background: #fff;
    overflow: hidden;
}

.pp-table caption {
    caption-side: bottom;
    padding: 10px 4px 0;
    color: var(--pp-ink-soft);
    font-size: .875rem;
    text-align: start;
}

.pp-table th,
.pp-table td {
    padding: 13px 16px;
    border-block-end: 1px solid var(--pp-line);
    text-align: start;
    vertical-align: top;
}

.pp-table thead th {
    background: var(--pp-mist);
    font-size: .875rem;
    font-weight: 800;
}

.pp-table tbody tr:last-child > * {
    border-block-end: 0;
}

.pp-table tbody th {
    font-weight: 800;
}

@media (max-width: 639.98px) {
    .pp-table-stack thead {
        display: none;
    }

    .pp-table-stack tbody tr {
        display: block;
        padding: 12px 16px;
        border-block-end: 1px solid var(--pp-line);
    }

    .pp-table-stack tbody tr:last-child {
        border-block-end: 0;
    }

    .pp-table-stack tbody th,
    .pp-table-stack tbody td {
        display: block;
        padding: 2px 0;
        border: 0;
    }

    .pp-table-stack tbody td::before {
        content: attr(data-label) ": ";
        color: var(--pp-ink-soft);
        font-weight: 700;
    }
}

.pp-code {
    display: inline-block;
    min-inline-size: 2.6em;
    margin-inline-end: 8px;
    padding: 1px 8px;
    border-radius: 8px;
    background: var(--pp-blue-deep);
    color: #fff;
    font-weight: 800;
    text-align: center;
}

.pp-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-inline-size: 68ch;
    margin-block-start: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--pp-mist);
    color: var(--pp-ink-soft);
    font-size: .9375rem;
}

.pp-note > i {
    flex: none;
    margin-block-start: 2px;
    color: var(--pp-blue);
}

/* ---------- the course's weeks (level pages) ---------- */

.pp-weeks {
    display: grid;
    gap: 14px;
    margin-block-start: 24px;
}

@media (min-width: 860px) {
    .pp-weeks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pp-week {
    padding: 18px 20px;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    background: #fff;
}

.pp-week-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}

.pp-week-no {
    color: var(--pp-blue-deep);
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.pp-week-no:lang(ar) {
    text-transform: none;
}

.pp-week-name {
    font-size: 1.125rem;
    font-weight: 800;
}

.pp-week-gloss {
    margin-block-start: 2px;
    color: var(--pp-ink-soft);
    font-size: .9375rem;
}

.pp-lessons {
    display: grid;
    gap: 8px;
    margin-block-start: 12px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--pp-line);
}

.pp-lessons li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 10px;
    align-items: start;
}

.pp-lessons li > i {
    margin-block-start: 3px;
    color: var(--pp-ink-soft);
}

.pp-lessons li.is-theme > i {
    color: var(--pp-green);
}

.pp-lesson-title {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pp-lesson-title a {
    color: inherit;
}

.pp-lesson-gloss {
    display: block;
    color: var(--pp-ink-soft);
    font-size: .875rem;
    line-height: 1.45;
}

/* Level switcher on the level pages. */
.pp-levels-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 18px;
}

.pp-levels-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    padding: 6px 14px;
    border: 1px solid var(--pp-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pp-ink);
    font-weight: 700;
    text-decoration: none;
}

.pp-levels-nav a:hover {
    border-color: var(--pp-blue-deep);
}

.pp-levels-nav a[aria-current="page"] {
    border-color: var(--pp-blue-deep);
    background: var(--pp-blue-deep);
    color: #fff;
}

/* ---------- phrase guides ---------- */

.pp-situation {
    max-inline-size: 64ch;
    margin-block-start: 20px;
    padding: 18px 20px;
    border-inline-start: 4px solid var(--pp-yellow);
    border-radius: 0 14px 14px 0;
    background: #fff;
    box-shadow: var(--pp-shadow);
}

[dir="rtl"] .pp-situation {
    border-radius: 14px 0 0 14px;
}

.pp-situation-phrase {
    margin-block-start: 8px;
    font-size: 1.25rem;
    font-weight: 800;
}

/* Swedish lines on an Arabic page are written left to right (dir="ltr") but aligned with
   the page, under their Arabic meanings — except in an English fallback lesson, which is
   left to right as a whole. */
[dir="rtl"] :is(.pp-word-sv, .pp-phrase-sv, .pp-situation-phrase, .pp-check-sentence, .pp-tip-form, .pp-recap-example)[dir="ltr"] {
    text-align: right;
}

[dir="rtl"] .pp-wrap[dir="ltr"] :is(.pp-word-sv, .pp-phrase-sv, .pp-situation-phrase, .pp-check-sentence, .pp-tip-form, .pp-recap-example) {
    text-align: left;
}

.pp-guide-section + .pp-guide-section {
    margin-block-start: 40px;
}

.pp-guide-section > * + * {
    margin-block-start: 18px;
}

.pp-words {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 10px;
}

.pp-word {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: #fff;
}

.pp-word-sv {
    font-size: 1.0625rem;
    font-weight: 600;
}

.pp-word-sv strong {
    font-weight: 800;
}

.pp-word-meaning {
    color: var(--pp-ink-soft);
    font-size: .9375rem;
}

.pp-phrases {
    display: grid;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    background: #fff;
    overflow: hidden;
}

.pp-phrase {
    display: grid;
    gap: 2px;
    padding: 12px 16px;
}

.pp-phrase + .pp-phrase {
    border-block-start: 1px solid var(--pp-line);
}

.pp-phrase-sv {
    font-size: 1.0625rem;
}

.pp-phrase-sv strong {
    color: var(--pp-blue-deep);
    font-weight: 800;
}

.pp-phrase-meaning {
    color: var(--pp-ink-soft);
    font-size: .9375rem;
}

.pp-tip {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-inline-size: 72ch;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--pp-yellow-soft);
}

.pp-tip > i {
    flex: none;
    margin-block-start: 2px;
    color: var(--pp-yellow-ink);
}

.pp-tip-form {
    display: block;
    margin-block-start: 6px;
    font-weight: 800;
}

.pp-check {
    max-inline-size: 72ch;
    padding: 16px 18px;
    border: 1px dashed #b9c7d4;
    border-radius: 14px;
    background: var(--pp-mist);
}

.pp-check-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pp-blue-deep);
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.pp-check-label:lang(ar) {
    text-transform: none;
}

.pp-check-q {
    margin-block-start: 6px;
    font-weight: 700;
}

.pp-check-sentence {
    margin-block-start: 6px;
    font-size: 1.0625rem;
}

.pp-check-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 10px;
}

.pp-check-options li {
    padding: 4px 12px;
    border: 1px solid var(--pp-line);
    border-radius: 999px;
    background: #fff;
    font-weight: 600;
}

.pp-check details {
    margin-block-start: 10px;
}

.pp-check summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--pp-blue-deep);
    font-weight: 700;
    cursor: pointer;
}

.pp-check details p {
    color: var(--pp-ink);
}

.pp-recap {
    display: grid;
    gap: 12px;
    margin-block-start: 18px;
}

.pp-recap li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
}

.pp-recap li > i {
    grid-row: span 2;
    margin-block-start: 3px;
    color: var(--pp-green);
}

.pp-recap-example {
    color: var(--pp-ink-soft);
}

/* ---------- pricing ---------- */

.pp-plans {
    display: grid;
    gap: 16px;
    margin-block-start: 24px;
}

@media (min-width: 720px) {
    .pp-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-inline-size: 760px;
    }
}

.pp-plan {
    position: relative;
    padding: 24px;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    background: #fff;
    box-shadow: var(--pp-shadow);
}

.pp-plan-best {
    border: 2px solid var(--pp-blue-deep);
}

.pp-plan-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 1.125rem;
    font-weight: 800;
}

.pp-plan-save {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--pp-yellow);
    color: var(--pp-navy);
    font-size: .8125rem;
    font-weight: 800;
}

.pp-plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-block-start: 10px;
}

.pp-plan-price b {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.pp-plan-price span,
.pp-plan-note {
    color: var(--pp-ink-soft);
}

.pp-plan-note {
    margin-block-start: 6px;
    font-size: .9375rem;
}

.pp-allow td.is-unlimited {
    color: var(--pp-green);
    font-weight: 800;
}

/* A short list of facts (the company's details on /about). */
.pp-facts {
    display: grid;
    gap: 10px;
    margin-block-start: 20px;
}

.pp-facts div {
    display: grid;
    grid-template-columns: minmax(0, 14em) minmax(0, 1fr);
    gap: 2px 16px;
}

@media (max-width: 639.98px) {
    .pp-facts div {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pp-facts dt {
    font-weight: 700;
}

.pp-facts dd {
    margin: 0;
    color: var(--pp-ink-soft);
}

/* Live numbers as tiles (/about): the value large, its label under it. */
.pp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
    gap: 12px;
    margin-block-start: 20px;
}

.pp-stats div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    background: #fff;
    box-shadow: var(--pp-shadow);
}

.pp-stats dt {
    color: var(--pp-ink-soft);
    font-size: .9375rem;
}

.pp-stats dd {
    margin: 0;
    color: var(--pp-navy);
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.2;
}

/* ---------- FAQ ---------- */

.pp-faq {
    display: grid;
    gap: 10px;
    margin-block-start: 22px;
}

.pp-faq details {
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: #fff;
}

.pp-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-block-size: 56px;
    padding: 12px 18px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

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

.pp-faq summary::after {
    content: "+";
    flex: none;
    color: var(--pp-blue-deep);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.pp-faq details[open] summary::after {
    content: "−";
}

.pp-faq details p {
    padding: 0 18px 16px;
    color: var(--pp-ink-soft);
    text-wrap: pretty;
}

/* ---------- final call to action ---------- */

.pp-final {
    padding-block: 48px;
    background: var(--pp-navy);
    color: #fff;
    text-align: center;
}

.pp-final h2 {
    margin-inline: auto;
    color: #fff;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    text-wrap: balance;
}

.pp-final p {
    max-inline-size: 56ch;
    margin: 12px auto 0;
    color: #d2dde8;
}

.pp-final .pp-actions {
    justify-content: center;
}

.pp-final .pp-btn-ghost-light {
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.pp-final .pp-btn-ghost-light:hover {
    border-color: #fff;
    color: #fff;
}

.pp-final :focus-visible {
    outline-color: var(--pp-yellow);
}