/* Product pages (/linkedin-phone-number-finder/ so far) — all selectors are .lpnf-* scoped. Colours/tokens come from style.css :root. */

.lpnf {
    color: var(--neutral-800);
    overflow-x: clip; /* no page-level horizontal scroll */
}

.lpnf *, .lpnf *::before, .lpnf *::after {
    box-sizing: border-box;
}

.lpnf h1, .lpnf h2, .lpnf h3 {
    color: var(--neutral-950);
    overflow-wrap: anywhere;
}

.lpnf p, .lpnf li, .lpnf dd {
    overflow-wrap: anywhere;
}

.lpnf-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.lpnf-narrow {
    max-width: 860px;
}

.lpnf-center {
    justify-content: center;
    text-align: center;
}

/* ── Hero ── */
.lpnf-hero {
    background: var(--theme-color);
    padding: 1.25rem 0 2.5rem;
    border-bottom: 1px solid var(--neutral-200);
}

/* Hero without a visible breadcrumb: a little more room above the content */
.lpnf-hero.lpnf-hero--no-crumb {
    padding-top: 2.25rem;
}

/* Shared H1 for the three product pages (custom lists, LinkedIn finder, DIN lookup):
   black text with the benefit part wrapped in <span class="accent"> in the action blue. */
.lpnf-h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -.03em;
    font-weight: 800;
    margin-bottom: 1.25rem;
    color: var(--neutral-950);
}

.lpnf-h1 .accent {
    color: var(--primary);
}

/* H2 and intro text follow the marketing/features pages (accurate lead curation, extension, data purity ...) */
.lpnf-h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.025em;
    margin-bottom: 1rem;
}

.lpnf-h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.25rem 0 .5rem;
}

.lpnf-lead, .lpnf-sub {
    font-size: clamp(1rem, 2vw, 1.1rem);
    line-height: 1.75;
    color: var(--neutral-600);
    margin-bottom: 1rem;
}

.lpnf-billing {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    color: var(--success-dark);
    margin-bottom: 1.25rem;
}

.lpnf-billing i {
    font-size: 1.4rem;
    color: var(--success);
    flex-shrink: 0;
}

/* ── Buttons ── */
.lpnf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 48px;
    padding: .65rem 1.25rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.lpnf-btn-primary {
    background: var(--primary);
    color: #fff;
}

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

.lpnf-btn-outline {
    background: var(--surface-white);
    color: var(--primary);
    border-color: var(--primary-light);
}

.lpnf-btn-outline:hover {
    background: var(--primary-soft);
    color: var(--primary-hover);
}

.lpnf-btn:focus-visible, .lpnf-faq-btn:focus-visible, .lpnf-link:focus-visible, .lpnf-input:focus-visible {
    outline: 3px solid var(--primary-mid);
    outline-offset: 2px;
}

.lpnf-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.lpnf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

/* ── URL form ── */
.lpnf-label {
    display: block;
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: .35rem;
}

.lpnf-form-row {
    display: flex;
    gap: .5rem;
}

.lpnf-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    border-radius: 10px;
    font-size: 1rem;
}

.lpnf-error:not([hidden]) {
    display: block;
    margin-top: .4rem;
    font-size: .875rem;
    color: var(--danger);
}

/* ── Result mockup ── */
.lpnf-result {
    margin: 0;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(13, 13, 20, .1);
    overflow: hidden;
    max-width: 460px;
    margin-inline: auto;
}

.lpnf-result-head {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--success-soft);
    border-bottom: 1px solid var(--success-light);
}

.lpnf-result-head i {
    font-size: 1.8rem;
    color: var(--success);
}

.lpnf-result-status {
    font-weight: 800;
    letter-spacing: .06em;
    font-size: .85rem;
    color: var(--success-dark);
}

.lpnf-result-sub {
    font-size: .85rem;
    color: var(--neutral-800);
}

.lpnf-result-body {
    padding: 1.25rem;
}

.lpnf-result-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--neutral-950);
}

.lpnf-result-tag {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    font-size: .85rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.lpnf-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    margin-top: .6rem;
    background: var(--surface-soft);
    border: 1px solid var(--neutral-200);
    border-radius: 10px;
}

.lpnf-result-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--neutral-600);
}

.lpnf-result-value {
    font-weight: 700;
    color: var(--neutral-950);
    overflow-wrap: anywhere;
}

.lpnf-copy {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
}

.lpnf-result-note {
    padding: 0 1.25rem 1rem;
    font-size: .78rem;
    color: var(--neutral-600);
}

.lpnf-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    margin: 2rem 0 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--neutral-800);
}

/* ── Sections ── */
.lpnf-section {
    padding: 3.5rem 0;
}

.lpnf-alt {
    background: var(--surface-soft);
    border-block: 1px solid var(--neutral-200);
}

.lpnf-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.lpnf-card {
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    padding: 1.25rem;
}

.lpnf-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
}

.lpnf-card-flex {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.lpnf-card-flex .lpnf-btn {
    margin-top: auto;
}

.lpnf-card-icon {
    font-size: 1.8rem;
    color: var(--primary);
}

.lpnf-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--neutral-600);
}

.lpnf-fact {
    font-weight: 600;
    color: var(--neutral-950);
}

.lpnf-badge {
    align-self: flex-start;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: var(--warning-soft);
    color: var(--warning-dark);
    border: 1px solid var(--warning-light);
    font-size: .8rem;
    font-weight: 700;
}

.lpnf-list {
    padding-left: 1.2rem;
    margin: 0;
}

.lpnf-credit {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--success);
}

.lpnf-zero {
    color: var(--neutral-600);
}

.lpnf-callout {
    margin-top: 1.25rem;
    padding: 1.25rem;
    border-left: 4px solid var(--primary);
    background: var(--primary-soft);
    border-radius: 0 12px 12px 0;
}

.lpnf-callout h3 {
    font-size: 1.1rem;
    font-weight: 700;
}

.lpnf-callout :last-child {
    margin-bottom: 0;
}

/* Steps */
.lpnf-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
}

.lpnf-steps li {
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    padding: 1.25rem;
}

.lpnf-steps h3 {
    font-size: 1.1rem;
    font-weight: 700;
}

.lpnf-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    flex-shrink: 0;
}

/* Tables: stack as cards on small screens */
.lpnf-table-wrap {
    overflow-x: auto;
}

.lpnf-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-white);
    font-size: .93rem;
}

.lpnf-table th, .lpnf-table td {
    padding: .8rem 1rem;
    border: 1px solid var(--neutral-200);
    text-align: left;
    vertical-align: top;
}

.lpnf-table thead th {
    background: var(--theme-color);
    color: var(--theme-text);
}

.lpnf-table tbody th {
    font-weight: 700;
    color: var(--neutral-950);
}

@media (max-width: 767.98px) {
    .lpnf-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

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

    .lpnf-stack tr {
        margin-bottom: 1rem;
        border: 1px solid var(--neutral-200);
        border-radius: 12px;
        overflow: hidden;
        background: var(--surface-white);
    }

    .lpnf-stack th, .lpnf-stack td {
        border: 0;
        border-bottom: 1px solid var(--neutral-100);
    }

    .lpnf-stack tbody th {
        background: var(--theme-color);
    }

    .lpnf-stack td::before {
        content: attr(data-label);
        display: block;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--neutral-600);
    }
}

.lpnf-policy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.lpnf-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lpnf-link:hover {
    color: var(--primary-hover);
}

/* FAQ — answers are visible by default; .is-enhanced (set by JS) lets them collapse */
.lpnf-faq-item {
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    margin-bottom: .6rem;
}

.lpnf-faq-q {
    margin: 0;
    font-size: 1rem;
}

.lpnf-faq-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 52px;
    padding: .8rem 1rem;
    background: transparent;
    border: 0;
    text-align: left;
    font-weight: 700;
    color: var(--neutral-950);
    cursor: default;
}

.lpnf-faq-btn i {
    display: none;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: transform .15s;
}

.lpnf-faq.is-enhanced .lpnf-faq-btn {
    cursor: pointer;
}

.lpnf-faq.is-enhanced .lpnf-faq-btn i {
    display: inline-block;
}

.lpnf-faq-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.lpnf-faq-a {
    padding: 0 1rem 1rem;
}

.lpnf-faq-a[hidden] {
    display: none;
}

.lpnf-faq-a p {
    margin-bottom: .5rem;
}

.lpnf-resources {
    padding-left: 1.2rem;
    display: grid;
    gap: .5rem;
}

/* Final CTA */
.lpnf-final {
    padding: 3.5rem 0;
    background: var(--theme-color);
    border-top: 1px solid var(--neutral-200);
}

.lpnf-final .lpnf-h2, .lpnf-final .lpnf-sub {
    text-align: center;
}

.lpnf-final .lpnf-billing {
    margin-top: 1rem;
    justify-content: center;
}

@media (min-width: 768px) {
    .lpnf-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .lpnf-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .lpnf-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .lpnf-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 575.98px) {
    .lpnf-form-row {
        flex-direction: column;
    }

    .lpnf-form-row .lpnf-btn, .lpnf-secondary .lpnf-btn {
        width: 100%;
    }

    .lpnf-section, .lpnf-final {
        padding: 2.5rem 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf *, .lpnf *::before, .lpnf *::after {
        transition: none !important;
    }
}

/* ── Example export (spreadsheet-style preview) ── */
.lpnf-sheet {
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(13, 13, 20, .07);
    overflow: hidden;
    max-width: 100%;
}

.lpnf-sheet-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--neutral-200);
    background: var(--surface-soft);
}

.lpnf-sheet-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 800;
    color: var(--neutral-950);
}

.lpnf-sheet-title i {
    color: var(--success);
    font-size: 1.3rem;
}

.lpnf-sheet-meta {
    font-size: .8rem;
    color: var(--neutral-600);
}

.lpnf-sheet-scroll {
    position: relative; /* contains the absolutely-positioned .lpnf-sr text so it cannot widen the page */
    overflow: auto;
    max-height: 440px;
}

.lpnf-sheet-scroll:focus-visible {
    outline: 3px solid var(--primary-mid);
    outline-offset: -3px;
}

.lpnf-sheet-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.lpnf-sheet-table th, .lpnf-sheet-table td {
    padding: .45rem .75rem;
    border-right: 1px solid var(--neutral-100);
    border-bottom: 1px solid var(--neutral-100);
    white-space: nowrap;
    text-align: left;
}

.lpnf-sheet-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--theme-color);
    color: var(--theme-text);
    font-weight: 700;
    border-bottom: 1px solid var(--theme-border);
}

.lpnf-sheet-table thead tr.lpnf-sheet-groups th {
    background: var(--neutral-100);
    color: var(--neutral-800);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--neutral-200);
    position: static; /* only the column-name row stays pinned */
}



.lpnf-sheet-table tbody tr:nth-child(even) td {
    background: var(--surface-soft);
}

.lpnf-sheet-table tbody tr:hover td {
    background: var(--primary-soft);
}

.lpnf-sheet-table td.lpnf-empty {
    color: var(--neutral-400);
    text-align: center;
}

.lpnf-sheet-note {
    margin-top: .9rem;
    font-size: .9rem;
    color: var(--neutral-800);
}

/* ── Privacy, compliance & security: row of 2 cards, then a row of 3 equal cards ── */
.lpnf-pgrid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    align-items: start; /* natural heights, no stretching */
}

.lpnf-pgrid-2 {
    margin-bottom: 2rem;
}

.lpnf-pgrid-3 {
    margin: 1rem 0;
}

.lpnf-protect-head {
    margin-top: 0;
}

.lpnf-pcard {
    min-width: 0;
}

.lpnf-pcard-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--neutral-950);
    margin: 0 0 .6rem;
}

.lpnf-pcard p:last-child, .lpnf-pcard .lpnf-list:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .lpnf-pgrid-2, .lpnf-pgrid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .lpnf-pgrid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Full-width ISO/IEC 27001 certification block (after the 3-card privacy row) */
.lpnf-iso-card {
    margin-bottom: 1.5rem;
}

.lpnf-iso-dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem 1.5rem;
    margin: 0 0 .9rem;
}

.lpnf-iso-dl dt {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--neutral-600);
}

.lpnf-iso-dl dd {
    margin: 0;
    color: var(--neutral-950);
}

@media (min-width: 768px) {
    .lpnf-iso-dl {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .lpnf-iso-dl {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Director (DIN) product page additions ── */
.lpnf-ext {
    margin: 0 auto;
    max-width: 380px;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(13, 13, 20, .08);
    overflow: hidden;
}

.lpnf-ext-head {
    display: flex;
    flex-direction: column;
    padding: .9rem 1rem;
    background: var(--theme-color);
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text);
}

.lpnf-ext-head span {
    font-size: .82rem;
}

.lpnf-ext-list {
    list-style: none;
    margin: 0;
    padding: .5rem 1rem;
}

.lpnf-ext-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--neutral-100);
    font-weight: 700;
    color: var(--neutral-950);
}

.lpnf-ext-list li:last-child {
    border-bottom: 0;
}

.lpnf-ext-list small {
    display: block;
    font-weight: 400;
    color: var(--neutral-600);
}

.lpnf-ext-list i {
    color: var(--primary);
    font-size: 1.3rem;
}

.lpnf-ext-actions {
    padding: 0 1rem 1rem;
}

.lpnf-ext-btn {
    display: block;
    text-align: center;
    padding: .55rem 1rem;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
}

/* ── Compact cross-enrichment link card (LinkedIn <-> DIN product pages) ── */
.lpnf-section-sm {
    padding: 2rem 0;
}

.lpnf-cross {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.lpnf-cross-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 .35rem;
}

.lpnf-cross p {
    margin: 0 0 .25rem;
}

.lpnf-cross-sub {
    font-size: .9rem;
    color: var(--neutral-600);
}

@media (min-width: 768px) {
    .lpnf-cross {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .lpnf-cross .lpnf-btn {
        flex-shrink: 0;
    }
}

/* ═══ Custom B2B Lead Lists page (.clp) — additions on top of the shared .lpnf-* components ═══ */
.clp-byline {
    font-size: .85rem;
    color: var(--neutral-600);
    margin: -.25rem 0 1rem;
}

.clp-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: 1.25rem 0 0;
}

.clp-chips li {
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--surface-white);
    border: 1px solid var(--theme-border);
    color: var(--theme-text);
    font-size: .85rem;
    font-weight: 600;
}

.clp-chips-light {
    margin: .5rem 0 1rem;
}

.clp-chips-light li {
    border-color: var(--neutral-200);
    color: var(--neutral-800);
    background: var(--surface-white);
}

/* Trust strip */
.clp-trust {
    padding: 1rem 0;
    background: var(--surface-white);
    border-bottom: 1px solid var(--neutral-200);
}

.clp-trust-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding: 0;
    margin: 0;
    align-items: baseline;
}

.clp-trust-row li {
    display: flex;
    flex-direction: column;
    font-size: .85rem;
    color: var(--neutral-600);
}

.clp-trust-row strong {
    color: var(--neutral-950);
    font-size: .92rem;
}

.clp-trust-inline {
    margin-bottom: 1.25rem;
}

/* "What we need from you": three labelled groups */
.clp-brief-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin: 0 0 1.25rem;
}

.clp-brief-group {
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 16px;
    padding: 1.25rem 1.35rem;
}

.clp-brief-title {
    margin: 0 0 .75rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
}

.clp-brief-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--neutral-600);
}

.clp-brief-list li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: .6rem;
}

.clp-brief-list li:last-child {
    margin-bottom: 0;
}

.clp-brief-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: 800;
}

.clp-brief-list strong {
    color: var(--neutral-900);
}

.clp-quote {
    margin: 0 0 1rem;
}

@media (min-width: 992px) {
    .clp-brief-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Masked sample record card */
.clp-record {
    margin: 1.25rem auto 0;
    max-width: 460px;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(13, 13, 20, .08);
    overflow: hidden;
}

.clp-record-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem 1rem;
    background: var(--theme-color);
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text);
    font-weight: 700;
    font-size: .85rem;
}

.clp-record-dl {
    margin: 0;
    padding: .25rem 1rem .5rem;
}

.clp-record-dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--neutral-100);
}

.clp-record-dl > div:last-child {
    border-bottom: 0;
}

.clp-record-dl dt {
    font-size: .78rem;
    font-weight: 700;
    color: var(--neutral-600);
    flex: 0 0 40%;
}

.clp-record-dl dd {
    margin: 0;
    text-align: right;
    font-size: .88rem;
    color: var(--neutral-950);
    overflow-wrap: anywhere;
}

/* Validation checks (native <details>, content in HTML on load) */
.clp-checks {
    display: grid;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.clp-check {
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
}

.clp-check > summary {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    cursor: pointer;
    list-style: none;
}

.clp-check > summary::-webkit-details-marker {
    display: none;
}

.clp-check > summary:focus-visible {
    outline: 3px solid var(--primary-mid);
    outline-offset: 2px;
    border-radius: 12px;
}

.clp-check-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
}

.clp-check-head {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.clp-check-sum {
    font-size: .88rem;
    color: var(--neutral-600);
}

.clp-check[open] .clp-check-sum {
    display: none;
}

.clp-check-body {
    margin: 0;
    padding: 0 1rem 1rem 3.4rem;
}

.clp-check-body dt {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--neutral-600);
    margin-top: .6rem;
}

.clp-check-body dd {
    margin: 0;
    color: var(--neutral-950);
}

.clp-fine {
    margin-top: 1rem;
    font-size: .9rem;
    color: var(--neutral-600);
}

.clp-price {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--neutral-950);
    margin: 0 0 .5rem;
}

/* Sticky request CTA: slim button (desktop) / bottom bar (mobile). Shown by products.js. */
.clp-sticky, .clp-bottombar {
    position: fixed;
    z-index: 1025;
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .2s, transform .2s, visibility .2s;
}

.clp-sticky.is-visible, .clp-bottombar.is-visible {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.clp-sticky {
    right: 1.5rem;
    bottom: 1.5rem;
    display: none;
}

.clp-sticky .lpnf-btn {
    min-height: 44px;
    box-shadow: 0 6px 20px rgba(13, 13, 20, .2);
}

.clp-bottombar {
    left: 0;
    right: 0;
    bottom: 0;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
    background: var(--surface-white);
    border-top: 1px solid var(--neutral-200);
    box-shadow: 0 -4px 16px rgba(13, 13, 20, .08);
}

.clp-bottombar .lpnf-btn {
    width: 100%;
}

@media (min-width: 768px) {
    .clp-sticky {
        display: block;
    }

    .clp-bottombar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clp-sticky, .clp-bottombar {
        transition: none;
    }
}

.clp-why-note {
    margin: 1.25rem 0 0;
    color: var(--neutral-800);
}

/* Optional fields + masked sample record on one row (list page) */
.clp-optional-row {
    margin-top: 1.5rem;
}

.clp-optional-row .lpnf-h3 {
    margin-top: 0;
}

.clp-optional-row .clp-record {
    margin: 0;
    max-width: none; /* fill its column so the row reads as two balanced halves */
}

/* ═══ Custom B2B Lead Lists: typography + spacing scale (.clp) ═══
   Values are taken from the marketing pages (home / bulk / extension):
   5rem section padding, clamp() H1/H2, 1.75 body line-height, 16px cards.
   Scoped to .clp for now so the LinkedIn and DIN pages are unchanged; once approved, the same
   variables can be moved up to .lpnf to apply to every product page. */
.clp {
    --neutral-500: #857F70;
    --neutral-700: #4F4A40;
    --neutral-900: #2A2722;
    --clp-section-y: 3.5rem;
    --clp-h3: 1.1rem;
    --clp-body: 1rem;
    --clp-small: .92rem;
    --clp-lh: 1.75;
    --clp-lh-tight: 1.2;
    --clp-gap: 1.5rem;
    --clp-card-pad: 1.75rem;
    --clp-card-radius: 16px;
    --clp-head-gap: 2rem; /* space between a section's heading block and its content */
    font-size: var(--clp-body);
    line-height: var(--clp-lh);
}

/* Sections */
.clp .lpnf-section,
.clp .lpnf-final {
    padding: var(--clp-section-y) 0;
}

.clp .lpnf-hero {
    padding: 2rem 0 4rem;
}

.clp .clp-trust {
    padding: 1.25rem 0;
}

/* Headings */
.clp .lpnf-h3,
.clp .lpnf-card h3,
.clp .lpnf-callout h3,
.clp .lpnf-pcard-title {
    font-size: var(--clp-h3);
    line-height: 1.3;
    letter-spacing: -.01em;
}

.clp .lpnf-h3 {
    margin: 2.25rem 0 1rem;
}

.clp .lpnf-card h3 {
    margin: 0 0 .6rem;
}

/* Body copy */
:where(.clp) p { /* zero specificity: any class-specific paragraph rule below/above still wins */
    margin: 0 0 1rem;
    line-height: var(--clp-lh);
}

.clp .lpnf-lead {
    font-size: clamp(1rem, 2vw, 1.15rem); /* custom page hero lead keeps its tuned size */
    max-width: 640px;
    margin-bottom: 1.5rem;
}

.clp .lpnf-sub {
    max-width: 760px;
    margin-bottom: var(--clp-head-gap);
}

/* A sub line that is followed by other copy (not by a grid/table) needs less space below */
.clp .lpnf-sub + h3,
.clp .lpnf-sub + p {
    margin-top: 0;
}

.clp .lpnf-eyebrow {
    margin: 0 0 .75rem;
    line-height: 1.4;
}

.clp .clp-byline {
    margin: 0 0 1.25rem;
    font-size: var(--clp-small);
}

.clp .lpnf-sheet-note {
    margin-top: 1.25rem;
    font-size: var(--clp-small);
    line-height: 1.7;
}

/* Cards and grids */
.clp .lpnf-grid,
.clp .lpnf-pgrid {
    gap: var(--clp-gap);
}

.clp .lpnf-card {
    padding: var(--clp-card-pad);
    border-radius: var(--clp-card-radius);
}

.clp .lpnf-card p {
    margin: 0 0 .75rem;
    font-size: .95rem;
    line-height: 1.7;
}

.clp .lpnf-card p:last-child {
    margin-bottom: 0;
}

.clp .lpnf-callout {
    padding: 1.5rem 1.75rem;
    margin-top: var(--clp-gap);
}

/* Lists */
.clp .lpnf-list {
    padding-left: 1.25rem;
    margin: 0 0 1rem;
}

.clp .lpnf-list li {
    margin-bottom: .45rem;
    line-height: 1.7;
}

.clp .clp-brief-grid {
    gap: var(--clp-gap);
    margin-bottom: 1.5rem;
}

/* Tables */
.clp .lpnf-table {
    font-size: var(--clp-small);
    line-height: 1.6;
}

.clp .lpnf-table th,
.clp .lpnf-table td {
    padding: .9rem 1.15rem;
}

.clp .lpnf-table-wrap {
    margin-bottom: 1.5rem;
}

/* Chips */
.clp .clp-chips {
    gap: .6rem;
}

.clp .clp-chips li {
    padding: .45rem 1rem;
    font-size: .88rem;
    line-height: 1.4;
}

/* Validation checks */
.clp .clp-checks {
    gap: .75rem;
    margin-bottom: 2rem;
}

.clp .clp-check > summary {
    padding: 1rem 1.25rem;
}

.clp .clp-check-body {
    padding: 0 1.25rem 1.25rem 4.1rem;
}

.clp .clp-check-body dd {
    line-height: 1.7;
}

/* Sample record card */
.clp .clp-record-dl {
    padding: .35rem 1.25rem .6rem;
}

.clp .clp-record-dl > div {
    padding: .55rem 0;
}

/* FAQ */
.clp .lpnf-faq-item {
    margin-bottom: .75rem;
}

.clp .lpnf-faq-btn {
    padding: 1rem 1.25rem;
    font-size: 1.02rem;
    line-height: 1.4;
}

.clp .lpnf-faq-a {
    padding: 0 1.25rem 1.25rem;
}

.clp .lpnf-faq-a p {
    font-size: .97rem;
    line-height: 1.7;
}

/* Buttons and actions */
.clp .lpnf-secondary,
.clp .lpnf-actions {
    gap: .85rem;
}

.clp .lpnf-actions {
    margin-top: 2rem;
}

.clp .lpnf-btn {
    padding: .75rem 1.5rem;
    line-height: 1.3;
}

/* Compliance section: breathing room around the badge row and the policy links */
.clp .clp-trust-inline {
    margin-bottom: 1.75rem;
}

.clp .lpnf-policy-links {
    margin: 1.5rem 0 1rem;
    gap: .5rem 1.5rem;
}

/* Pricing figure and case numbers */
.clp .clp-price {
    font-size: clamp(1.6rem, 3.2vw, 2rem); /* smaller than the H2 above so the figure reads as a callout, not a second heading */
    color: var(--primary);
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .clp {
        --clp-section-y: 2.75rem;
        --clp-head-gap: 1.75rem;
        --clp-card-pad: 1.35rem;
    }

    .clp .lpnf-hero {
        padding: 1.5rem 0 3rem;
    }
}


/* ═══ Custom lead lists: tabbed field tables + sticky sample record ═══ */
.clp .clp-fields {
    margin-top: .5rem;
}

.clp .clp-tabbar {
    position: relative;
    display: none; /* shown once JS has built the tabs; without JS both tables stay visible */
    align-items: center;
    gap: .25rem;
    padding: .3rem;
    margin-bottom: .75rem;
    background: var(--neutral-100);
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04);
}

.clp .clp-fields.is-ready .clp-tabbar {
    display: flex;
}

.clp .clp-tab-pill {
    position: absolute;
    top: .3rem;
    bottom: .3rem;
    left: 0;
    width: 0;
    background: var(--surface-white);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(13, 13, 20, .12), 0 4px 12px rgba(13, 13, 20, .05);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}

.clp .clp-tab {
    position: relative;
    z-index: 1;
    scroll-margin-top: 110px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--neutral-600);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: color .2s, transform .15s;
}

.clp .clp-tab:hover {
    color: var(--neutral-950);
}

.clp .clp-tab:active {
    transform: scale(.97);
}

.clp .clp-tab:focus-visible,
.clp .clp-copy:focus-visible,
.clp .clp-tabpanel:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.clp .clp-tab[aria-selected="true"] {
    color: var(--neutral-950);
}

.clp .clp-tab-count {
    min-width: 1.4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--neutral-200);
    color: var(--neutral-700);
    font-size: .74rem;
    font-weight: 800;
    text-align: center;
    transition: background .2s, color .2s;
}

.clp .clp-tab[aria-selected="true"] .clp-tab-count {
    background: var(--primary-soft);
    color: var(--primary-hover);
}

.clp .clp-copy {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--neutral-600);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, color .2s, transform .15s;
}

.clp .clp-copy:hover {
    background: var(--surface-white);
    color: var(--primary-hover);
}

.clp .clp-copy:active {
    transform: scale(.97);
}

.clp .clp-copy.is-done {
    color: var(--success);
}

.clp .clp-legend {
    margin: 0 0 .75rem;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--neutral-500);
}

.clp .clp-badge {
    display: inline-block;
    margin-left: .4rem;
    padding: .08rem .45rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-hover);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

.clp .clp-legend .clp-badge {
    margin: 0 .2rem 0 0;
}

/* Table card */
.clp .clp-tabcard {
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 18px rgba(13, 13, 20, .04);
    overflow: hidden;
    transition: box-shadow .25s;
}

.clp .clp-tabcard:hover {
    box-shadow: 0 1px 2px rgba(13, 13, 20, .05), 0 10px 26px rgba(13, 13, 20, .07);
}

.clp .clp-panel-title {
    margin: 0;
    padding: 1rem 1.15rem .25rem;
    font-size: 1rem;
}

.clp .clp-fields.is-ready .clp-panel-title {
    display: none; /* the active tab already names the table */
}

.clp .clp-fields.is-ready .clp-tabpanel:not(.is-active) {
    display: none;
}

.clp .clp-fields.is-ready .clp-tabpanel.is-active {
    animation: clp-panel-in .22s ease-out both;
}

.clp .clp-tabpanel:not(:first-child) {
    border-top: 1px solid var(--neutral-200);
}

.clp .clp-fields.is-ready .clp-tabpanel:not(:first-child) {
    border-top: 0;
}

@keyframes clp-panel-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.clp .clp-tablewrap {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.clp .clp-fieldtable {
    margin: 0;
    font-size: .85rem;
    line-height: 1.5;
}

.clp .clp-fieldtable thead th {
    padding: .6rem 1.1rem;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.clp .clp-fieldtable th,
.clp .clp-fieldtable td {
    padding: .55rem 1.1rem;
}

.clp .clp-fieldtable tbody tr {
    transition: background .15s;
}

.clp .clp-fieldtable tbody tr:hover {
    background: var(--primary-soft);
}

.clp .clp-fieldtable tbody td {
    color: var(--neutral-600);
}

.clp .clp-ex {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 6px;
    background: var(--neutral-100);
    color: var(--neutral-800);
    font-size: .8rem;
    line-height: 1.5;
    transition: background .15s;
}

.clp .clp-fieldtable tbody tr:hover .clp-ex {
    background: var(--surface-white);
}

/* Optional fields */
.clp .clp-optional-title {
    margin: 1.5rem 0 .75rem;
    font-size: .95rem;
    line-height: 1.35;
}

.clp .clp-chips li {
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.clp .clp-chips li:hover {
    transform: translateY(-1px);
    border-color: var(--primary-mid);
    box-shadow: 0 3px 10px rgba(13, 13, 20, .07);
}

.clp .clp-outro {
    margin: 1rem 0 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--neutral-600);
}

/* Sticky sample record, rows follow the active tab */
.clp .clp-recordcol {
    position: sticky;
    top: 96px;
    align-self: flex-start;
}

.clp .clp-recordcol .clp-record {
    margin: 0;
    max-width: none;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .05), 0 8px 24px rgba(13, 13, 20, .07);
    transition: box-shadow .25s, transform .25s;
}

.clp .clp-recordcol .clp-record:hover {
    box-shadow: 0 1px 2px rgba(13, 13, 20, .06), 0 14px 32px rgba(13, 13, 20, .1);
    transform: translateY(-2px);
}

.clp .clp-record-dl > div {
    padding: .45rem .5rem;
    margin: 0 -.5rem;
    border-radius: 8px;
    transition: opacity .25s, background .25s;
}

.clp .clp-fields.is-ready[data-active="company"] .clp-record-dl > div:not([data-group="company"]),
.clp .clp-fields.is-ready[data-active="contact"] .clp-record-dl > div:not([data-group="contact"]) {
    opacity: .45;
}

.clp .clp-fields.is-ready[data-active="company"] .clp-record-dl > div[data-group="company"],
.clp .clp-fields.is-ready[data-active="contact"] .clp-record-dl > div[data-group="contact"] {
    background: var(--primary-soft);
}

/* Rows fade in once when the card first scrolls into view (only when JS has armed it) */
.clp .js-reveal .clp-record-dl > div {
    opacity: 0;
    transform: translateY(6px);
}

.clp .js-reveal.is-in .clp-record-dl > div {
    opacity: 1;
    transform: none;
    transition: opacity .35s ease-out, transform .35s ease-out, background .25s;
}

.clp .clp-fields.is-ready .js-reveal:not(.is-in) .clp-record-dl > div {
    opacity: 0;
    transform: translateY(6px);
}

@media (max-width: 991.98px) {
    .clp .clp-recordcol {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .clp .clp-tabbar {
        flex-wrap: wrap;
        border-radius: 18px;
    }

    .clp .clp-copy {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clp .clp-tab-pill,
    .clp .clp-tab,
    .clp .clp-copy,
    .clp .clp-tabcard,
    .clp .clp-chips li,
    .clp .clp-recordcol .clp-record,
    .clp .clp-record-dl > div,
    .clp .clp-fieldtable tbody tr {
        transition: none !important;
    }

    .clp .clp-fields.is-ready .clp-tabpanel.is-active {
        animation: none;
    }

    .clp .js-reveal .clp-record-dl > div {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 768px) {
    .clp .clp-fieldtable tbody th {
        white-space: nowrap;
    }
}


/* ═══ Custom lead lists: "Built record by record" timeline + tabbed validation checks ═══ */
.clp .clp-compact {
    padding: 3.5rem 0;
}

/* Timeline */
.clp .clp-timeline {
    position: relative;
    margin-top: .5rem;
}

.clp .clp-tl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    position: relative;
}

.clp .clp-tl-item {
    position: relative;
    padding-left: 3rem;
}

.clp .clp-tl-node {
    position: absolute;
    left: 0;
    top: .15rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: .88rem;
    box-shadow: 0 0 0 5px var(--surface-white), 0 4px 10px rgba(13, 13, 20, .15);
}

.clp .clp-tl-line {
    position: absolute;
    left: 15px;
    top: 1rem;
    bottom: 1rem;
    width: 2px;
    background: linear-gradient(var(--primary-mid), var(--primary));
    transform-origin: top;
}

.clp .clp-tl-card {
    height: 100%;
    padding: 1.1rem 1.2rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.clp .clp-tl-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.clp .clp-tl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: .6rem;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.35rem;
    transition: transform .2s, background .2s, color .2s;
}

.clp .clp-tl-card:hover .clp-tl-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.clp .clp-tl-card h3 {
    margin: 0 0 .35rem;
    font-size: 1rem;
    line-height: 1.3;
}

.clp .clp-tl-card p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--neutral-600);
}

.clp .clp-sources {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 1.5rem 0 0;
    padding: .8rem 1.1rem;
    background: var(--surface-soft);
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--neutral-700);
}

.clp .clp-sources i {
    margin-top: .1rem;
    font-size: 1.15rem;
    color: var(--primary);
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .clp .clp-tl-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }

    .clp .clp-tl-item {
        padding: 2.75rem 0 0;
    }

    .clp .clp-tl-node {
        left: 1.2rem;
        top: 0;
    }

    /* Horizontal connector through the centres of the four nodes */
    .clp .clp-tl-line {
        left: calc(1.2rem + 16px);
        right: calc(25% - 1.2rem - 16px - .9375rem);
        top: 15px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, var(--primary-mid), var(--primary));
        transform-origin: left;
    }
}

/* Draw the connector and fade the cards in once, when the timeline first scrolls into view */
.clp .clp-timeline.js-reveal .clp-tl-line {
    transform: scaleY(0);
}

.clp .clp-timeline.js-reveal.is-in .clp-tl-line {
    transform: none;
    transition: transform .9s cubic-bezier(.4, 0, .2, 1);
}

.clp .clp-timeline.js-reveal:not(.is-in) .clp-tl-card,
.clp .clp-timeline.js-reveal:not(.is-in) .clp-tl-node {
    opacity: 0;
    transform: translateY(10px);
}

.clp .clp-timeline.js-reveal.is-in .clp-tl-card,
.clp .clp-timeline.js-reveal.is-in .clp-tl-node {
    transition: opacity .45s ease-out, transform .2s, box-shadow .2s, border-color .2s;
}

.clp .clp-timeline.js-reveal.is-in .clp-tl-item:nth-child(2) .clp-tl-card,
.clp .clp-timeline.js-reveal.is-in .clp-tl-item:nth-child(2) .clp-tl-node {
    transition-delay: .15s, 0s, 0s, 0s;
}

.clp .clp-timeline.js-reveal.is-in .clp-tl-item:nth-child(3) .clp-tl-card,
.clp .clp-timeline.js-reveal.is-in .clp-tl-item:nth-child(3) .clp-tl-node {
    transition-delay: .3s, 0s, 0s, 0s;
}

.clp .clp-timeline.js-reveal.is-in .clp-tl-item:nth-child(4) .clp-tl-card,
.clp .clp-timeline.js-reveal.is-in .clp-tl-item:nth-child(4) .clp-tl-node {
    transition-delay: .45s, 0s, 0s, 0s;
}

@media (min-width: 992px) {
    .clp .clp-timeline.js-reveal .clp-tl-line {
        transform: scaleX(0);
    }
}

/* Validation: heading block, tabs, progress track */
.clp .clp-vhead .lpnf-h3 {
    margin: 0 0 .25rem;
    font-size: 1.15rem;
    line-height: 1.3;
}

.clp .clp-vhead p {
    margin: 0 0 1.25rem;
    font-size: .95rem;
    color: var(--neutral-600);
}

.clp .clp-vt .clp-tabbar {
    width: fit-content;
    max-width: 100%;
}

.clp .clp-vtrack {
    display: none;
    gap: 4px;
    margin: 0 0 1rem;
}

.clp .clp-vt.is-ready .clp-vtrack {
    display: flex;
}

.clp .clp-vseg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--neutral-200);
    transition: background .3s;
}

.clp .clp-vt[data-active="fit"] .clp-vseg[data-g="fit"],
.clp .clp-vt[data-active="contact"] .clp-vseg[data-g="contact"],
.clp .clp-vt[data-active="quality"] .clp-vseg[data-g="quality"] {
    background: var(--primary);
}

/* Check cards: 2-column grid, native <details> so every check stays in the HTML */
.clp .clp-vt .clp-checks {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    align-items: start;
    margin: 0;
}

@media (min-width: 768px) {
    .clp .clp-vt .clp-checks {
        grid-template-columns: repeat(2, 1fr);
    }
}

.clp .clp-vt .clp-tabpanel:not(:first-child) {
    border-top: 0;
}

.clp .clp-vt:not(.is-ready) .clp-tabpanel + .clp-tabpanel {
    margin-top: .75rem;
}

.clp .clp-vt .clp-check {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .04);
    transition: box-shadow .2s, border-color .2s, transform .2s;
}

.clp .clp-vt .clp-check:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 10px 22px rgba(13, 13, 20, .08);
    transform: translateY(-2px);
}

.clp .clp-vt .clp-check[open] {
    border-color: var(--primary-mid);
}

.clp .clp-vt .clp-check > summary {
    position: relative;
    align-items: center;
    gap: .75rem;
    padding: .85rem 3.5rem .85rem 1rem;
    border-radius: 14px;
}

/* FAQ-style toggle: a circle with a chevron on the right of every card, so a closed card reads as expandable */
.clp .clp-vt .clp-check > summary::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    box-sizing: border-box;
    border: 1px solid var(--neutral-200);
    border-radius: 50%;
    background: var(--surface-white);
    box-shadow: 0 1px 2px rgba(13, 13, 20, .06);
    transition: background .2s, border-color .2s, transform .2s;
}

.clp .clp-vt .clp-check > summary::before {
    content: "";
    position: absolute;
    right: calc(1rem + 10px);
    top: 50%;
    z-index: 1;
    width: 7px;
    height: 7px;
    margin-top: -6px;
    border-right: 2px solid var(--neutral-600);
    border-bottom: 2px solid var(--neutral-600);
    transform: rotate(45deg);
    transition: transform .2s, border-color .2s, margin-top .2s;
}

.clp .clp-vt .clp-check > summary:hover::after {
    background: var(--primary-soft);
    border-color: var(--primary-mid);
}

.clp .clp-vt .clp-check > summary:hover::before {
    border-color: var(--primary);
}

.clp .clp-vt .clp-check[open] > summary::after {
    background: var(--primary);
    border-color: var(--primary);
}

.clp .clp-vt .clp-check[open] > summary::before {
    margin-top: -2px;
    transform: rotate(-135deg);
    border-color: #fff;
}

.clp .clp-vt .clp-check-num {
    width: 28px;
    height: 28px;
    font-size: .82rem;
    transition: transform .2s;
}

.clp .clp-vt .clp-check:hover .clp-check-num {
    transform: scale(1.08);
}

.clp .clp-vt .clp-check-head strong {
    font-size: .92rem;
    line-height: 1.35;
}

.clp .clp-vt .clp-check-sum {
    margin-top: .1rem;
    font-size: .82rem;
    line-height: 1.45;
}

.clp .clp-vt .clp-check-body {
    padding: 0 1rem 1rem 3.5rem;
    animation: clp-panel-in .2s ease-out both;
}

.clp .clp-vt .clp-check-body dt {
    margin-top: .55rem;
    font-size: .68rem;
}

.clp .clp-vt .clp-check-body dd {
    font-size: .84rem;
    line-height: 1.6;
    color: var(--neutral-700);
}

/* Closing notes: two cards in one row */
.clp .clp-vnotes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .clp .clp-vnotes {
        grid-template-columns: 1fr 1fr;
    }
}

.clp .clp-vnote {
    display: flex;
    gap: .85rem;
    padding: 1.1rem 1.25rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: box-shadow .2s, transform .2s;
}

.clp .clp-vnote:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 12px 26px rgba(13, 13, 20, .08);
}

.clp .clp-vnote-key {
    background: var(--primary-soft);
    border-color: var(--primary-mid);
}

.clp .clp-vnote > i {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--primary);
}

.clp .clp-vnote h3 {
    margin: 0 0 .3rem;
    font-size: .95rem;
    line-height: 1.35;
}

.clp .clp-vnote p {
    margin: 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--neutral-700);
}

@media (max-width: 767.98px) {
    .clp .clp-compact {
        padding: 2.75rem 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clp .clp-tl-card,
    .clp .clp-tl-icon,
    .clp .clp-vnote,
    .clp .clp-vt .clp-check,
    .clp .clp-vt .clp-check-num,
    .clp .clp-vt .clp-check > summary::after,
    .clp .clp-vt .clp-check > summary::before,
    .clp .clp-vseg {
        transition: none !important;
    }

    .clp .clp-vt .clp-check-body {
        animation: none;
    }

    .clp .clp-timeline.js-reveal .clp-tl-line {
        transform: none;
    }

    .clp .clp-timeline.js-reveal:not(.is-in) .clp-tl-card,
    .clp .clp-timeline.js-reveal:not(.is-in) .clp-tl-node {
        opacity: 1;
        transform: none;
    }
}

/* An open check spans the full row (no empty space beside it); its three parts sit side by side on desktop */
.clp .clp-vt .clp-check[open] {
    grid-column: 1 / -1;
}

@media (min-width: 992px) {
    .clp .clp-vt .clp-check[open] .clp-check-body {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 1.75rem;
        padding-right: 1.25rem;
    }

    .clp .clp-vt .clp-check[open] .clp-check-body dt:nth-of-type(1),
    .clp .clp-vt .clp-check[open] .clp-check-body dd:nth-of-type(1) {
        grid-column: 1;
    }

    .clp .clp-vt .clp-check[open] .clp-check-body dt:nth-of-type(2),
    .clp .clp-vt .clp-check[open] .clp-check-body dd:nth-of-type(2) {
        grid-column: 2;
    }

    .clp .clp-vt .clp-check[open] .clp-check-body dt:nth-of-type(3),
    .clp .clp-vt .clp-check[open] .clp-check-body dd:nth-of-type(3) {
        grid-column: 3;
    }

    .clp .clp-vt .clp-check[open] .clp-check-body dt {
        grid-row: 1;
        margin-top: .1rem;
    }

    .clp .clp-vt .clp-check[open] .clp-check-body dd {
        grid-row: 2;
    }
}


/* ═══ Custom lead lists: DNC rules, delivery cards, accuracy promise ═══ */
/* Shared reveal: items fade up in turn the first time their wrapper scrolls into view (JS arms .js-reveal) */
.clp .js-reveal:not(.is-in) .clp-rv {
    opacity: 0;
    transform: translateY(10px);
}

.clp .js-reveal.is-in .clp-rv {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s, background .2s;
}

.clp .js-reveal.is-in .clp-rv:nth-child(2) {
    transition-delay: .12s, .12s, 0s, 0s, 0s;
}

.clp .js-reveal.is-in .clp-rv:nth-child(3) {
    transition-delay: .24s, .24s, 0s, 0s, 0s;
}

.clp .js-reveal.is-in .clp-rv:nth-child(4) {
    transition-delay: .36s, .36s, 0s, 0s, 0s;
}

/* DNC */
.clp .clp-dnc-copy {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--neutral-700);
}

.clp .clp-rules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.clp .clp-rules li,
.clp .clp-dcard,
.clp .clp-dtile,
.clp .clp-pcard {
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
}

.clp .clp-rules li {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .9rem 1.1rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--neutral-700);
}

.clp .clp-rules li > i,
.clp .clp-dtile > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.25rem;
    transition: background .2s, color .2s, transform .2s;
}

.clp .clp-rules li:hover,
.clp .clp-dcard:hover,
.clp .clp-dtile:hover,
.clp .clp-pcard:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.clp .clp-rules li:hover > i,
.clp .clp-dtile:hover > i {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

/* Delivery */
.clp .clp-dgrid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.clp .clp-dcard {
    padding: 1.15rem 1.25rem;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.clp .clp-dcard:hover {
    transform: translateY(-3px);
}

.clp .clp-dcard-icon,
.clp .clp-pcard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: .6rem;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.35rem;
    transition: background .2s, color .2s, transform .2s;
}

.clp .clp-dcard:hover .clp-dcard-icon,
.clp .clp-pcard:hover .clp-pcard-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.clp .clp-dcard h3 {
    margin: 0 0 .5rem;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--neutral-600);
}

.clp .clp-dcard-time {
    margin: 0 0 .35rem;
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--neutral-950);
}

.clp .clp-dcard-how {
    margin: 0;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--neutral-600);
}

.clp .clp-dtiles {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: 1rem;
}

.clp .clp-dtile {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .95rem 1.15rem;
    transition: box-shadow .2s, border-color .2s;
}

.clp .clp-dtile p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--neutral-700);
}

/* Accuracy promise */
.clp .clp-promise-intro {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--neutral-700);
}

.clp .clp-promise-row .lpnf-h3 {
    margin: 1.25rem 0 .5rem;
    font-size: 1.05rem;
}

.clp .clp-promise-india {
    margin: 0;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

.clp .clp-pgrid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.clp .clp-pcard {
    padding: 1.1rem 1.2rem;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.clp .clp-pcard:hover {
    transform: translateY(-3px);
}

.clp .clp-pcard h3 {
    margin: 0 0 .35rem;
    font-size: .98rem;
    line-height: 1.3;
}

.clp .clp-pcard p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--neutral-600);
}

.clp .clp-fineprint {
    margin-top: 1.25rem;
    padding: .9rem 1.25rem;
    background: var(--surface-soft);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
}

.clp .clp-fineprint .clp-fine {
    margin: 0;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--neutral-600);
}

.clp .clp-fineprint .clp-fine li {
    margin-bottom: .3rem;
}

.clp .clp-fineprint .clp-fine li:last-child {
    margin: .55rem 0 0;
    list-style: none;
    margin-left: -1.25rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .clp .clp-pgrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .clp .clp-dtiles {
        grid-template-columns: 1fr 1fr;
    }

    .clp .clp-dgrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .clp .clp-rules li > i,
    .clp .clp-dtile > i,
    .clp .clp-dcard,
    .clp .clp-dcard-icon,
    .clp .clp-dtile,
    .clp .clp-pcard,
    .clp .clp-pcard-icon {
        transition: none !important;
    }

    .clp .js-reveal:not(.is-in) .clp-rv {
        opacity: 1;
        transform: none;
    }
}

.clp .clp-dnc-row,
.clp .clp-promise-row {
    margin-top: .25rem;
}


/* ═══ Custom lead lists: "Projects we have delivered" slider ═══ */
.clp .clp-slider {
    position: relative;
}

.clp .clp-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin: 0 -.5rem;
}

.clp .clp-slider.is-ready .clp-track {
    scrollbar-width: none;
}

.clp .clp-slider.is-ready .clp-track::-webkit-scrollbar {
    display: none;
}

.clp .clp-track:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    border-radius: 18px;
}

.clp .clp-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: .5rem .5rem 1.25rem; /* room for the card shadow inside the scroll container */
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.clp .clp-slide-card {
    display: grid;
    grid-template-columns: 1fr;
    height: 100%;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 10px 28px rgba(13, 13, 20, .07);
    overflow: hidden;
    transition: box-shadow .25s, border-color .25s;
}

.clp .clp-slide-card:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 16px 36px rgba(13, 13, 20, .1);
}

.clp .clp-slide-main {
    padding: 1.5rem 1.5rem 1.35rem;
    background: linear-gradient(160deg, var(--primary-soft), var(--surface-white) 120%);
    border-bottom: 1px solid var(--neutral-200);
}

.clp .clp-slide-main h3 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    line-height: 1.35;
    font-weight: 700;
}

.clp .clp-case-number {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--primary);
}

.clp .clp-slide-parts {
    display: grid;
    align-content: center;
}

.clp .clp-part {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1rem 1.5rem;
    transition: background .2s;
}

.clp .clp-part + .clp-part {
    border-top: 1px solid var(--neutral-100);
}

.clp .clp-part:hover {
    background: var(--surface-soft);
}

.clp .clp-part > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.2rem;
    transition: background .2s, color .2s, transform .2s;
}

.clp .clp-part:hover > i {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.clp .clp-part p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--neutral-700);
}

.clp .clp-part .clp-part-label {
    margin: 0 0 .15rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--neutral-600);
}

@media (min-width: 992px) {
    .clp .clp-slide-card {
        grid-template-columns: 5fr 7fr;
    }

    .clp .clp-slide-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem 2.25rem;
        border-bottom: 0;
        border-right: 1px solid var(--neutral-200);
    }

    .clp .clp-part {
        padding: 1.1rem 1.75rem;
    }
}

/* The active slide's content rises in once it becomes current (only when JS is driving the slider) */
.clp .clp-slider.is-ready .clp-slide.is-active .clp-slide-main > *,
.clp .clp-slider.is-ready .clp-slide.is-active .clp-part {
    animation: clp-slide-in .5s ease-out both;
}

.clp .clp-slider.is-ready .clp-slide.is-active .clp-slide-main h3,
.clp .clp-slider.is-ready .clp-slide.is-active .clp-part:nth-child(1) {
    animation-delay: .08s;
}

.clp .clp-slider.is-ready .clp-slide.is-active .clp-case-number,
.clp .clp-slider.is-ready .clp-slide.is-active .clp-part:nth-child(2) {
    animation-delay: .16s;
}

.clp .clp-slider.is-ready .clp-slide.is-active .clp-part:nth-child(3) {
    animation-delay: .24s;
}

@keyframes clp-slide-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Navigation: hidden until JS is ready (without JS the track scrolls and shows a scrollbar) */
.clp .clp-slider-nav {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .25rem;
}

.clp .clp-slider.is-ready .clp-slider-nav {
    display: flex;
}

.clp .clp-slider-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    flex: 1;
}

.clp .clp-dots {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.clp .clp-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--neutral-200);
    cursor: pointer;
    transition: width .3s, background .2s, transform .15s;
}

.clp .clp-dot:hover {
    background: var(--primary-mid);
    transform: scale(1.2);
}

.clp .clp-dot.is-active {
    width: 26px;
    background: var(--primary);
}

.clp .clp-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--neutral-200);
    border-radius: 50%;
    background: var(--surface-white);
    color: var(--neutral-800);
    font-size: 1.4rem;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .06), 0 4px 10px rgba(13, 13, 20, .05);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s, opacity .2s;
}

.clp .clp-nav-btn:hover:not(:disabled) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(13, 13, 20, .14);
}

.clp .clp-nav-btn:active:not(:disabled) {
    transform: scale(.94);
}

.clp .clp-nav-btn:disabled {
    opacity: .4;
    cursor: default;
    box-shadow: none;
}

.clp .clp-nav-btn:focus-visible,
.clp .clp-dot:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.clp .clp-nav-toggle {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    box-shadow: none;
}

.clp .clp-nav-toggle[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .clp .clp-slide-card,
    .clp .clp-part,
    .clp .clp-part > i,
    .clp .clp-dot,
    .clp .clp-nav-btn {
        transition: none !important;
    }

    .clp .clp-slider.is-ready .clp-slide.is-active .clp-slide-main > *,
    .clp .clp-slider.is-ready .clp-slide.is-active .clp-part {
        animation: none;
    }

    .clp .clp-track {
        scroll-behavior: auto;
    }
}


/* ═══ Custom lead lists: comparison table ═══ */
.clp .clp-cmp-wrap {
    margin: 0;
}

.clp .clp-cmp-switch {
    display: none;
}

@media (min-width: 768px) {
    .clp .clp-cmp-wrap {
        overflow: clip; /* clip, not auto: keeps the sticky header working and the rounded corners */
        border: 1px solid var(--neutral-200);
        border-radius: 16px;
        background: var(--surface-white);
        box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 10px 28px rgba(13, 13, 20, .07);
    }

    .clp .clp-cmp {
        font-size: .88rem;
        line-height: 1.55;
        border-collapse: separate;
        border-spacing: 0;
    }

    .clp .clp-cmp th,
    .clp .clp-cmp td {
        padding: .7rem 1.1rem;
        border: 0;
        border-bottom: 1px solid var(--neutral-100);
    }

    .clp .clp-cmp tbody tr:last-child th,
    .clp .clp-cmp tbody tr:last-child td {
        border-bottom: 0;
    }

    .clp .clp-cmp thead th {
        padding: .85rem 1.1rem;
        font-size: .82rem;
        font-weight: 700;
        line-height: 1.35;
        border-bottom: 1px solid var(--neutral-200);
    }

    .clp .clp-cmp thead th:first-child {
        width: 19%;
    }

    .clp .clp-cmp tbody th {
        font-size: .84rem;
        color: var(--neutral-800);
        background: var(--surface-white);
        width: 19%;
    }

    .clp .clp-cmp tbody td {
        color: var(--neutral-700);
    }

    /* Custom list column: light blue tint, thin frame, dark-blue text; a small solid tag above its header */
    .clp .clp-cmp td.clp-cmp-key {
        background: #F4F8FE;
        color: var(--neutral-950);
        font-weight: 600;
        border-left: 1px solid #C9DDF6;
        border-right: 1px solid #C9DDF6;
    }

    .clp .clp-cmp thead th.clp-cmp-key {
        background: var(--primary-soft);
        color: var(--primary-hover);
        border-left: 1px solid #C9DDF6;
        border-right: 1px solid #C9DDF6;
        box-shadow: inset 0 3px 0 var(--primary);
    }

    .clp .clp-cmp thead th.clp-cmp-key::before {
        content: "Built to your brief";
        display: block;
        width: fit-content;
        margin-bottom: .35rem;
        padding: .12rem .5rem;
        border-radius: 999px;
        background: var(--primary);
        color: #fff;
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .08em;
        line-height: 1.4;
        text-transform: uppercase;
    }

    .clp .clp-cmp tbody tr {
        transition: opacity .4s ease-out;
    }

    .clp .clp-cmp tbody tr:hover th,
    .clp .clp-cmp tbody tr:hover td:not(.clp-cmp-key) {
        background: var(--surface-soft);
    }

    .clp .clp-cmp tbody tr:hover td.clp-cmp-key {
        background: var(--primary-soft);
    }

    .clp .clp-cmp tbody th,
    .clp .clp-cmp tbody td {
        transition: background .15s;
    }
}

/* Phones: one option at a time once JS has built the switcher; without JS all three values stay visible */
@media (max-width: 767.98px) {
    .clp .clp-cmp-block.is-ready .clp-cmp-switch {
        display: flex;
        gap: .25rem;
        padding: .3rem;
        margin-bottom: .85rem;
        background: var(--neutral-100);
        border: 1px solid var(--neutral-200);
        border-radius: 999px;
    }

    .clp .clp-cmp-btn {
        flex: 1;
        padding: .5rem .5rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--neutral-600);
        font-size: .84rem;
        font-weight: 700;
        cursor: pointer;
        transition: background .2s, color .2s, box-shadow .2s, transform .15s;
    }

    .clp .clp-cmp-btn:active {
        transform: scale(.97);
    }

    .clp .clp-cmp-btn[aria-pressed="true"] {
        background: var(--surface-white);
        color: var(--neutral-950);
        box-shadow: 0 1px 3px rgba(13, 13, 20, .12), 0 4px 12px rgba(13, 13, 20, .05);
    }

    .clp .clp-cmp-btn:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    .clp .clp-cmp-block.is-ready[data-active="custom"] td:not([data-col="custom"]),
    .clp .clp-cmp-block.is-ready[data-active="self"] td:not([data-col="self"]),
    .clp .clp-cmp-block.is-ready[data-active="bought"] td:not([data-col="bought"]) {
        display: none;
    }

    .clp .clp-cmp-block.is-ready .clp-cmp td::before {
        display: none;
    }

    .clp .clp-cmp {
        font-size: .88rem;
    }

    .clp .clp-cmp tr {
        margin-bottom: .6rem;
        box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .04);
    }

    .clp .clp-cmp tbody th {
        padding: .55rem 1rem;
        font-size: .78rem;
    }

    .clp .clp-cmp td {
        padding: .7rem 1rem;
    }
}

.clp .clp-cmp-btn {
    font-family: inherit;
}

/* Rows fade in in turn when the table first scrolls into view */
.clp .js-reveal:not(.is-in) .clp-cmp tbody tr {
    opacity: 0;
}

.clp .js-reveal.is-in .clp-cmp tbody tr:nth-child(2) { transition-delay: .05s; }
.clp .js-reveal.is-in .clp-cmp tbody tr:nth-child(3) { transition-delay: .1s; }
.clp .js-reveal.is-in .clp-cmp tbody tr:nth-child(4) { transition-delay: .15s; }
.clp .js-reveal.is-in .clp-cmp tbody tr:nth-child(5) { transition-delay: .2s; }
.clp .js-reveal.is-in .clp-cmp tbody tr:nth-child(6) { transition-delay: .25s; }
.clp .js-reveal.is-in .clp-cmp tbody tr:nth-child(7) { transition-delay: .3s; }
.clp .js-reveal.is-in .clp-cmp tbody tr:nth-child(8) { transition-delay: .35s; }

/* Action cards under the table */
.clp .clp-cmp-actions {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: 1.25rem;
}

@media (min-width: 768px) {
    .clp .clp-cmp-actions {
        grid-template-columns: 1fr 1fr;
    }
}

.clp .clp-cmp-action {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem 1.2rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.clp .clp-cmp-action:hover {
    transform: translateY(-2px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 12px 26px rgba(13, 13, 20, .08);
}

.clp .clp-cmp-action-key {
    background: var(--primary-soft);
    border-color: var(--primary-mid);
}

.clp .clp-cmp-action > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.25rem;
    transition: background .2s, color .2s, transform .2s;
}

.clp .clp-cmp-action-key > i {
    background: var(--primary);
    color: #fff;
}

.clp .clp-cmp-action:hover > i {
    transform: scale(1.08);
}

.clp .clp-cmp-action p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--neutral-700);
}

@media (prefers-reduced-motion: reduce) {
    .clp .clp-cmp tbody tr,
    .clp .clp-cmp tbody th,
    .clp .clp-cmp tbody td,
    .clp .clp-cmp-btn,
    .clp .clp-cmp-action,
    .clp .clp-cmp-action > i {
        transition: none !important;
    }

    .clp .js-reveal:not(.is-in) .clp-cmp tbody tr {
        opacity: 1;
    }
}


/* ═══ Custom lead lists: who uses custom lists ═══ */
.clp .clp-ugrid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .clp .clp-ugrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .clp .clp-ugrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.clp .clp-ucard {
    padding: 1.15rem 1.25rem 1.25rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.clp .clp-ucard:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.clp .clp-ucard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: .7rem;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.4rem;
    transition: background .2s, color .2s, transform .2s;
}

.clp .clp-ucard:hover .clp-ucard-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.clp .clp-ucard h3 {
    margin: 0 0 .35rem;
    font-size: 1rem;
    line-height: 1.35;
}

.clp .clp-ucard p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--neutral-600);
}

.clp .js-reveal.is-in .clp-rv:nth-child(5) {
    transition-delay: .48s, .48s, 0s, 0s, 0s;
}

.clp .js-reveal.is-in .clp-rv:nth-child(6) {
    transition-delay: .6s, .6s, 0s, 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
    .clp .clp-ucard,
    .clp .clp-ucard-icon {
        transition: none !important;
    }
}


/* ═══ Custom lead lists: Meet the Data Chef team ═══ */
.clp .clp-teampanel {
    height: 100%;
    padding: 1.5rem 1.6rem;
    background: linear-gradient(160deg, var(--primary-soft), var(--surface-white) 130%);
    border: 1px solid var(--neutral-200);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 10px 28px rgba(13, 13, 20, .07);
    transition: box-shadow .25s, border-color .25s;
}

.clp .clp-teampanel:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 16px 36px rgba(13, 13, 20, .1);
}

.clp .clp-teampanel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: .85rem;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 4px 12px rgba(26, 111, 204, .3);
}

.clp .clp-team-copy {
    margin: 0 0 1.1rem;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--neutral-700);
}

.clp .clp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clp .clp-facts li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .75rem .3rem .5rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .05);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--neutral-800);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.clp .clp-facts li:hover {
    transform: translateY(-1px);
    border-color: var(--primary-mid);
    box-shadow: 0 3px 10px rgba(13, 13, 20, .08);
}

.clp .clp-facts li > i {
    color: var(--success);
    font-size: 1.1rem;
}

/* Vertical flow: Brief and scoping, then Research, then Verification */
.clp .clp-steps-v {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clp .clp-steps-v > li {
    position: relative;
    padding-left: 3.25rem;
    margin-bottom: 1rem;
}

.clp .clp-steps-v > li:last-child {
    margin-bottom: 0;
}

.clp .clp-steps-v > li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 38px;
    bottom: -1rem;
    width: 2px;
    background: linear-gradient(var(--primary), var(--primary-mid));
    opacity: .5;
}

.clp .clp-stepnode {
    position: absolute;
    left: 0;
    top: .65rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: .88rem;
    box-shadow: 0 0 0 5px var(--surface-white), 0 4px 10px rgba(13, 13, 20, .15);
}

.clp .clp-stepcard {
    padding: 1rem 1.25rem 1.1rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.clp .clp-stepcard:hover {
    transform: translateX(3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 12px 26px rgba(13, 13, 20, .08);
}

.clp .clp-stepcard-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .35rem;
}

.clp .clp-stepcard-head > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.2rem;
    transition: background .2s, color .2s;
}

.clp .clp-stepcard:hover .clp-stepcard-head > i {
    background: var(--primary);
    color: #fff;
}

.clp .clp-stepcard h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.clp .clp-stepcard p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--neutral-600);
}

@media (prefers-reduced-motion: reduce) {
    .clp .clp-teampanel,
    .clp .clp-facts li,
    .clp .clp-stepcard,
    .clp .clp-stepcard-head > i {
        transition: none !important;
    }
}

.clp .clp-team-row {
    margin-top: .25rem;
}


/* ═══ Custom lead lists: Pricing ═══ */
.clp .clp-pricing-row {
    margin-top: .25rem;
}

.clp .clp-pricecard,
.clp .clp-factors {
    height: 100%;
    border: 1px solid var(--neutral-200);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 10px 28px rgba(13, 13, 20, .07);
    transition: box-shadow .25s, border-color .25s;
}

.clp .clp-pricecard:hover,
.clp .clp-factors:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 16px 36px rgba(13, 13, 20, .1);
}

.clp .clp-pricecard {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.75rem;
    background: linear-gradient(160deg, var(--primary-soft), var(--surface-white) 130%);
}

.clp .clp-pricecard .clp-price {
    margin: 0 0 .75rem;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--primary);
}

.clp .clp-pricecard-copy {
    margin: 0;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--neutral-700);
}

.clp .clp-pricecard-actions {
    margin-top: auto;
    padding-top: 1.25rem;
}

.clp .clp-pricecard-actions .lpnf-btn {
    box-shadow: 0 6px 18px rgba(26, 111, 204, .28);
    transition: transform .15s, box-shadow .2s, background .2s;
}

.clp .clp-pricecard-actions .lpnf-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(26, 111, 204, .36);
}

.clp .clp-pricecard-actions .lpnf-btn:active {
    transform: scale(.98);
}

.clp .clp-factors {
    padding: 1.4rem 1.5rem 1.25rem;
    background: var(--surface-white);
}

.clp .clp-factors .lpnf-h3 {
    margin: 0 0 .75rem;
    font-size: 1.05rem;
}

.clp .clp-factor-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clp .clp-factor-list li {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .6rem .6rem;
    margin: 0 -.6rem;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--neutral-800);
    transition: background .15s;
}

.clp .clp-factor-list li:hover {
    background: var(--primary-soft);
}

.clp .clp-factor-list li > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.2rem;
    transition: background .2s, color .2s, transform .2s;
}

.clp .clp-factor-list li:hover > i {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.clp .clp-pricenote {
    margin-top: 1.25rem;
}

.clp .clp-pricenote > div {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .95rem 1.25rem;
    background: var(--surface-soft);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .04);
}

.clp .clp-pricenote > div > i {
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--primary);
}

.clp .clp-pricenote p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--neutral-700);
}

@media (prefers-reduced-motion: reduce) {
    .clp .clp-pricecard,
    .clp .clp-factors,
    .clp .clp-pricecard-actions .lpnf-btn,
    .clp .clp-factor-list li,
    .clp .clp-factor-list li > i {
        transition: none !important;
    }
}


/* ═══ Custom lead lists: Compliance and data ethics ═══ */
.clp .clp-comp-row {
    margin-top: .25rem;
}

.clp .clp-standards {
    height: 100%;
    padding: 1.5rem 1.6rem;
    background: linear-gradient(160deg, var(--primary-soft), var(--surface-white) 130%);
    border: 1px solid var(--neutral-200);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 10px 28px rgba(13, 13, 20, .07);
    transition: box-shadow .25s, border-color .25s;
}

.clp .clp-standards:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 16px 36px rgba(13, 13, 20, .1);
}

.clp .clp-iso {
    display: flex;
    gap: .9rem;
    align-items: center;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--neutral-200);
}

.clp .clp-iso > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    font-size: 1.9rem;
    box-shadow: 0 4px 12px rgba(26, 111, 204, .3);
}

.clp .clp-iso strong {
    display: block;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--neutral-950);
}

.clp .clp-iso span {
    display: block;
    margin-top: .15rem;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--neutral-600);
}

.clp .clp-compchips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clp .clp-compchips li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .8rem .35rem .55rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .05);
    font-size: .82rem;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.clp .clp-compchips li:hover {
    transform: translateY(-1px);
    border-color: var(--primary-mid);
    box-shadow: 0 3px 10px rgba(13, 13, 20, .08);
}

.clp .clp-compchips li > i {
    color: var(--success);
    font-size: 1.1rem;
}

.clp .clp-cgrid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .clp .clp-cgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.clp .clp-ccard {
    padding: 1.1rem 1.2rem 1.2rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.clp .clp-ccard:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.clp .clp-ccard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: .6rem;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.3rem;
    transition: background .2s, color .2s, transform .2s;
}

.clp .clp-ccard:hover .clp-ccard-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.clp .clp-ccard h3 {
    margin: 0 0 .35rem;
    font-size: .98rem;
    line-height: 1.3;
}

.clp .clp-ccard p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--neutral-600);
}

/* Company details bar: policy pills, grievance line, legal entity line */
.clp .clp-compbar {
    margin-top: 1.25rem;
}

.clp .clp-compbar > div {
    padding: 1rem 1.3rem 1.05rem;
    background: var(--surface-soft);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .04);
}

.clp .clp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .8rem;
}

.clp .clp-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem .4rem .7rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .05);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-hover);
    text-decoration: none;
    transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.clp .clp-pill > i {
    font-size: 1.05rem;
    color: var(--primary);
    transition: color .2s;
}

.clp .clp-pill:hover {
    transform: translateY(-1px);
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(26, 111, 204, .28);
}

.clp .clp-pill:hover > i {
    color: #fff;
}

.clp .clp-pill:active {
    transform: scale(.97);
}

.clp .clp-pill:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.clp .clp-compnote {
    margin: 0 0 .25rem;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--neutral-600);
}

.clp .clp-compnote:last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .clp .clp-standards,
    .clp .clp-compchips li,
    .clp .clp-ccard,
    .clp .clp-ccard-icon,
    .clp .clp-pill,
    .clp .clp-pill > i {
        transition: none !important;
    }
}

.clp .clp-standards {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ═══ Custom lead lists: FAQ, topic tabs + two-column accordion ═══ */
.clp .clp-ft .clp-tabbar {
    width: fit-content;
    max-width: 100%;
}

.clp .clp-faqgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    align-items: start;
}

@media (min-width: 768px) {
    .clp .clp-faqgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.clp .clp-ft .clp-tabpanel:not(:first-child) {
    border-top: 0;
}

.clp .clp-ft:not(.is-ready) .clp-tabpanel + .clp-tabpanel {
    margin-top: .75rem;
}

.clp .clp-ft .lpnf-faq-item {
    margin: 0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .04);
    transition: box-shadow .2s, border-color .2s, transform .2s;
}

.clp .clp-ft .lpnf-faq-item:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 10px 22px rgba(13, 13, 20, .08);
    transform: translateY(-2px);
}

/* An open answer takes the full row so there is no empty space beside it */
.clp .clp-ft .lpnf-faq-item:has(.lpnf-faq-btn[aria-expanded="true"]) {
    grid-column: 1 / -1;
    border-color: var(--primary-mid);
}

.clp .clp-ft .lpnf-faq-btn {
    padding: .95rem 1.1rem;
    font-size: .96rem;
    line-height: 1.4;
    border-radius: 14px;
}

.clp .clp-ft .lpnf-faq-btn i {
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border: 1px solid var(--neutral-200);
    border-radius: 50%;
    background: var(--surface-white);
    box-shadow: 0 1px 2px rgba(13, 13, 20, .06);
    color: var(--neutral-600);
    font-size: 1.15rem;
    transition: transform .2s, background .2s, border-color .2s, color .2s;
}

.clp .clp-ft.is-enhanced .lpnf-faq-btn i {
    display: inline-flex;
}

.clp .clp-ft .lpnf-faq-btn:hover i {
    background: var(--primary-soft);
    border-color: var(--primary-mid);
    color: var(--primary);
}

.clp .clp-ft .lpnf-faq-btn[aria-expanded="true"] i {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.clp .clp-ft .lpnf-faq-a {
    padding: 0 1.1rem 1.1rem;
}

.clp .clp-ft .lpnf-faq-a:not([hidden]) {
    animation: clp-panel-in .2s ease-out both;
}

.clp .clp-ft .lpnf-faq-a p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--neutral-700);
}

@media (prefers-reduced-motion: reduce) {
    .clp .clp-ft .lpnf-faq-item,
    .clp .clp-ft .lpnf-faq-btn i {
        transition: none !important;
    }

    .clp .clp-ft .lpnf-faq-a:not([hidden]) {
        animation: none;
    }
}


/* ═══ Custom lead lists: final CTA banner (theme colour, see :root in style.css) ═══ */
.clp .lpnf-final {
    background: var(--surface-white);
    border-top: 0;
    padding: 2rem 0 var(--clp-section-y);
}

.clp .clp-banner {
    position: relative;
    overflow: hidden;
    padding: 2.75rem 1.5rem 2.25rem;
    text-align: center;
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-light-color) 55%, var(--theme-hover) 140%);
    border: 1px solid var(--theme-hover);
    border-radius: 22px;
    box-shadow: 0 2px 4px rgba(74, 57, 0, .06), 0 16px 40px rgba(201, 160, 0, .18);
    isolation: isolate;
}

/* Soft decorative circles in the theme tones; they drift very slowly */
.clp .clp-banner::before,
.clp .clp-banner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: var(--theme-hover);
    opacity: .55;
    animation: clp-drift 12s ease-in-out infinite alternate;
}

.clp .clp-banner::before {
    width: 280px;
    height: 280px;
    top: -110px;
    left: -70px;
}

.clp .clp-banner::after {
    width: 220px;
    height: 220px;
    right: -60px;
    bottom: -100px;
    animation-delay: -6s;
}

@keyframes clp-drift {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(14px, 10px);
    }
}

.clp .clp-banner .lpnf-h2 {
    margin: 0 0 .6rem;
    color: var(--theme-text);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}

.clp .clp-banner .lpnf-sub {
    max-width: 640px;
    margin: 0 auto 1.5rem;
    color: var(--neutral-800);
    font-size: 1.02rem;
}

.clp .clp-banner-actions {
    gap: .75rem;
}

.clp .clp-banner .lpnf-btn {
    transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}

.clp .clp-banner .lpnf-btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(26, 111, 204, .3);
}

.clp .clp-banner .lpnf-btn-primary > i {
    margin-left: .25rem;
    font-size: 1.25rem;
    vertical-align: -.2em;
    transition: transform .2s;
}

.clp .clp-banner .lpnf-btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(13, 74, 143, .36);
}

.clp .clp-banner .lpnf-btn-primary:hover > i {
    transform: translateX(4px);
}

.clp .clp-banner .lpnf-btn-outline {
    background: var(--surface-white);
    color: var(--primary);
    border-color: var(--primary-light);
    box-shadow: 0 2px 8px rgba(74, 57, 0, .08);
}

.clp .clp-banner .lpnf-btn-outline:hover {
    background: var(--primary-soft);
    border-color: var(--primary-mid);
    color: var(--primary-hover);
    transform: translateY(-1px);
}

.clp .clp-banner .lpnf-btn:active {
    transform: scale(.98);
}

.clp .clp-banner .lpnf-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .clp .clp-banner {
        padding: 3.25rem 2rem 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clp .clp-banner::before,
    .clp .clp-banner::after {
        animation: none;
    }

    .clp .clp-banner .lpnf-btn,
    .clp .clp-banner .lpnf-btn-primary > i {
        transition: none !important;
    }
}


/* ═══ Custom lead lists: hero + trust strip ═══ */
.clp .lpnf-hero {
    padding: 2.5rem 0 3.5rem;
    background: var(--theme-color);
    border-bottom: 0;
}

/* Eyebrow as a small pill with a dot */
.clp .lpnf-hero .lpnf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: .35rem .85rem .35rem .7rem;
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--theme-hover);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(74, 57, 0, .08);
    color: var(--theme-text);
    font-size: .7rem;
    line-height: 1.3;
}

.clp .lpnf-hero .lpnf-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(30, 125, 68, .18);
}

/* Byline as a tidy meta row */
.clp .lpnf-hero .clp-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    margin: 0 0 1.1rem;
    font-size: .82rem;
    color: var(--neutral-600);
}

.clp .lpnf-hero .clp-sep {
    color: var(--theme-border);
    font-weight: 800;
}

.clp .lpnf-hero .lpnf-lead {
    color: var(--neutral-800);
}

/* Buttons */
.clp .lpnf-hero .lpnf-btn {
    transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}

.clp .lpnf-hero .lpnf-btn-primary {
    box-shadow: 0 6px 18px rgba(26, 111, 204, .3);
}

.clp .lpnf-hero .lpnf-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(13, 74, 143, .36);
}

.clp .lpnf-hero .lpnf-btn-outline {
    box-shadow: 0 2px 8px rgba(74, 57, 0, .08);
}

.clp .lpnf-hero .lpnf-btn-outline:hover {
    transform: translateY(-1px);
    background: var(--primary-soft);
    border-color: var(--primary-mid);
}

.clp .lpnf-hero .lpnf-btn:active {
    transform: scale(.98);
}

.clp .lpnf-hero .lpnf-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* Highlight chips get a tick */
.clp .lpnf-hero .clp-chips li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--surface-white);
    border: 1px solid var(--theme-hover);
    box-shadow: 0 1px 2px rgba(74, 57, 0, .08);
    color: var(--theme-text);
    font-weight: 700;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.clp .lpnf-hero .clp-chips li::before {
    content: "\2713";
    color: var(--success);
    font-weight: 800;
}

.clp .lpnf-hero .clp-chips li:hover {
    transform: translateY(-1px);
    border-color: var(--theme-border);
    box-shadow: 0 3px 10px rgba(74, 57, 0, .12);
}

/* Sample record in the hero: stronger shadow, "Verified by call" as a green status pill */
.clp .lpnf-hero .clp-record {
    margin: 0 0 0 auto;
    box-shadow: 0 2px 4px rgba(74, 57, 0, .06), 0 18px 44px rgba(74, 57, 0, .16);
    transition: transform .25s, box-shadow .25s;
}

.clp .lpnf-hero .clp-record:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(74, 57, 0, .07), 0 24px 52px rgba(74, 57, 0, .2);
}

.clp .lpnf-hero .clp-record-dl > div[data-status] dd {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .6rem .1rem .45rem;
    border-radius: 999px;
    background: var(--success-soft);
    border: 1px solid var(--success-light);
    color: var(--success-dark);
    font-weight: 700;
}

.clp .lpnf-hero .clp-record-dl > div[data-status] dd::before {
    content: "\2713";
    font-weight: 800;
    color: var(--success);
}

.clp .lpnf-hero .clp-record-dl > div[data-status] {
    align-items: center;
}

/* Entrance: the text block after the H1 and the card rise in once on load (H1 itself stays static) */
.clp .lpnf-hero .clp-byline,
.clp .lpnf-hero .lpnf-lead,
.clp .lpnf-hero .lpnf-secondary,
.clp .lpnf-hero .clp-chips,
.clp .lpnf-hero .clp-record {
    animation: clp-hero-in .6s ease-out both;
}

.clp .lpnf-hero .lpnf-lead {
    animation-delay: .08s;
}

.clp .lpnf-hero .lpnf-secondary {
    animation-delay: .16s;
}

.clp .lpnf-hero .clp-chips {
    animation-delay: .24s;
}

.clp .lpnf-hero .clp-record {
    animation-name: clp-hero-card;
    animation-delay: .12s;
}

@keyframes clp-hero-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes clp-hero-card {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Trust strip: one white card overlapping the bottom of the hero */
.clp .clp-trust {
    padding: 0 0 1.5rem;
    background: var(--surface-white);
    border-bottom: 0;
}

.clp .clp-trustcard {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    margin-top: -1.9rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(74, 57, 0, .05), 0 14px 36px rgba(74, 57, 0, .12);
}

.clp .clp-trustcard > * {
    padding: 1.1rem 1.4rem;
}

.clp .clp-trustcard > * + * {
    border-top: 1px solid var(--neutral-100);
}

.clp .clp-t-iso {
    display: flex;
    gap: .85rem;
    align-items: center;
}

.clp .clp-t-iso > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 4px 12px rgba(26, 111, 204, .3);
}

.clp .clp-t-iso strong {
    display: block;
    font-size: .95rem;
    line-height: 1.3;
    color: var(--neutral-950);
}

.clp .clp-t-iso span {
    display: block;
    margin-top: .1rem;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--neutral-600);
}

.clp .clp-t-badges {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: .5rem;
    margin: 0;
    list-style: none;
}

.clp .clp-t-badges li {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .3rem .75rem .3rem .5rem;
    background: var(--success-soft);
    border: 1px solid var(--success-light);
    border-radius: 999px;
    font-size: .78rem;
    transition: transform .15s, box-shadow .15s;
}

.clp .clp-t-badges li:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(30, 125, 68, .16);
}

.clp .clp-t-badges li > i {
    color: var(--success);
    font-size: 1.05rem;
}

.clp .clp-t-badges strong {
    color: var(--success-dark);
}

.clp .clp-t-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin: 0;
    list-style: none;
}

.clp .clp-t-stats li {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    transition: transform .15s;
}

.clp .clp-t-stats li:hover {
    transform: translateY(-2px);
}

.clp .clp-t-stats strong {
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--primary);
}

.clp .clp-t-stats span {
    font-size: .76rem;
    line-height: 1.35;
    color: var(--neutral-600);
}

@media (min-width: 992px) {
    .clp .clp-trustcard {
        grid-template-columns: minmax(250px, 1.05fr) minmax(250px, 1.2fr) 1.7fr;
    }

    .clp .clp-trustcard > * {
        padding: 1.2rem 1.5rem;
    }

    .clp .clp-trustcard > * + * {
        border-top: 0;
        border-left: 1px solid var(--neutral-100);
    }
}

@media (max-width: 991.98px) {
    .clp .lpnf-hero .clp-record {
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) {
    .clp .lpnf-hero {
        padding: 1.75rem 0 3rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .clp .lpnf-hero .clp-byline,
    .clp .lpnf-hero .lpnf-lead,
    .clp .lpnf-hero .lpnf-secondary,
    .clp .lpnf-hero .clp-chips,
    .clp .lpnf-hero .clp-record {
        animation: none;
    }

    .clp .lpnf-hero .lpnf-btn,
    .clp .lpnf-hero .clp-chips li,
    .clp .lpnf-hero .clp-record,
    .clp .clp-t-badges li,
    .clp .clp-t-stats li {
        transition: none !important;
    }
}


/* ═══ Custom lead lists: Why filters miss your buyers ═══ */
.clp .clp-why-row {
    margin-top: .25rem;
}

.clp .clp-why-intro {
    max-width: none;
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--neutral-700);
}

.clp .clp-whynote {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem 1.2rem;
    background: var(--theme-color);
    border: 1px solid var(--theme-hover);
    border-left: 4px solid var(--theme-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(74, 57, 0, .06), 0 6px 16px rgba(74, 57, 0, .08);
    transition: transform .2s, box-shadow .2s;
}

.clp .clp-whynote:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(74, 57, 0, .07), 0 12px 26px rgba(74, 57, 0, .12);
}

.clp .clp-whynote > i {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--warning);
}

.clp .clp-whynote .clp-why-note {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--theme-text);
}

.clp .clp-whystack {
    display: grid;
    gap: 1rem;
}

.clp .clp-whycard {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-left: 4px solid var(--warning-mid);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.clp .clp-whycard:hover {
    transform: translateX(3px);
    border-color: var(--neutral-200);
    border-left-color: var(--warning);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 12px 26px rgba(13, 13, 20, .09);
}

.clp .clp-whycard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 1.4rem;
    transition: background .2s, color .2s, transform .2s;
}

.clp .clp-whycard:hover .clp-whycard-icon {
    background: var(--warning);
    color: #fff;
    transform: scale(1.08);
}

.clp .clp-whycard h3 {
    margin: 0 0 .3rem;
    font-size: 1rem;
    line-height: 1.35;
}

.clp .clp-whycard p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--neutral-600);
}

@media (prefers-reduced-motion: reduce) {
    .clp .clp-whynote,
    .clp .clp-whycard,
    .clp .clp-whycard-icon {
        transition: none !important;
    }
}


/* ═══ Custom lead lists: How the service works, two-column vertical timeline ═══ */
.clp .clp-tl2 {
    margin-top: .25rem;
}

.clp .clp-tl2-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.clp .clp-node {
    position: relative;
    align-self: start;
    padding-left: 3.1rem;
}

.clp .clp-node-num {
    position: absolute;
    left: 0;
    top: .85rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--neutral-800);
    color: #fff;
    font-weight: 800;
    font-size: .88rem;
    box-shadow: 0 0 0 5px var(--surface-white), 0 4px 10px rgba(13, 13, 20, .15);
    transition: transform .2s, background .2s;
}

.clp .lpnf-alt .clp-node-num {
    box-shadow: 0 0 0 5px var(--surface-soft), 0 4px 10px rgba(13, 13, 20, .15);
}

/* Connector from each node down to the next one in the same column */
.clp .clp-node:not(:nth-child(7))::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 3rem;
    bottom: -1.1rem;
    width: 2px;
    background: var(--neutral-200);
}

.clp .clp-node-card {
    padding: 1rem 1.25rem 1.1rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.clp .clp-node:hover .clp-node-card {
    transform: translateY(-2px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 12px 26px rgba(13, 13, 20, .09);
}

.clp .clp-node:hover .clp-node-num {
    transform: scale(1.08);
    background: var(--primary);
}

.clp .clp-node-card .lpnf-eyebrow {
    display: block;
    margin: 0 0 .25rem;
    font-size: .68rem;
}

.clp .clp-node-card h3 {
    margin: 0 0 .35rem;
    font-size: 1.02rem;
    line-height: 1.3;
}

.clp .clp-node-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--neutral-600);
}

/* Step 6 is the key step (phone verification) */
.clp .clp-node.is-key .clp-node-num {
    background: var(--primary);
}

.clp .clp-node.is-key .clp-node-card {
    background: var(--primary-soft);
    border-color: var(--primary-mid);
}

/* The loop: a reported record goes back from step 7 to step 6 */
.clp .clp-loop-item {
    align-self: start;
    padding-left: 3.1rem;
}

.clp .clp-loop {
    margin: 0;
    padding: .55rem 1rem;
    border: 2px dashed var(--primary-mid);
    border-radius: 12px;
    background: var(--surface-white);
    color: var(--primary-hover);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.5;
}

@media (min-width: 992px) {
    /* Steps 1-4 fill the left column, 5-7 the right (DOM order stays 1 to 7) */
    .clp .clp-tl2-list {
        grid-auto-flow: column;
        grid-template-rows: repeat(4, auto);
        grid-template-columns: repeat(2, 1fr);
        gap: 1.1rem 2.5rem;
    }

    .clp .clp-node:nth-child(4)::before {
        display: none;
    }

    /* The loop note sits under step 7 in the right column, in the fourth row */
    .clp .clp-loop-item {
        grid-column: 2;
        grid-row: 4;
    }
}

@media (max-width: 991.98px) {
    .clp .clp-node:nth-child(4)::before {
        display: block;
    }
}

/* Reveal in turn the first time the timeline scrolls into view (own rules: the step class stays exactly clp-node) */
.clp .js-reveal:not(.is-in) .clp-node {
    opacity: 0;
    transform: translateY(10px);
}

.clp .js-reveal.is-in .clp-node {
    transition: opacity .45s ease-out, transform .45s ease-out;
}

.clp .js-reveal.is-in .clp-node:nth-child(2) { transition-delay: .1s; }
.clp .js-reveal.is-in .clp-node:nth-child(3) { transition-delay: .2s; }
.clp .js-reveal.is-in .clp-node:nth-child(4) { transition-delay: .3s; }
.clp .js-reveal.is-in .clp-node:nth-child(5) { transition-delay: .15s; }
.clp .js-reveal.is-in .clp-node:nth-child(6) { transition-delay: .25s; }
.clp .js-reveal.is-in .clp-node:nth-child(7) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
    .clp .clp-node-num,
    .clp .clp-node-card {
        transition: none !important;
    }

    .clp .js-reveal:not(.is-in) .clp-node {
        opacity: 1;
        transform: none;
    }
}


/* ═══ LinkedIn phone number finder: hero (scoped to .lpnf-li so the DIN page is untouched) ═══ */
.lpnf-li .lpnf-hero {
    padding: 2.5rem 0 3rem;
}

.lpnf-li .lpnf-hero .lpnf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: .35rem .85rem .35rem .7rem;
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--theme-hover);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(74, 57, 0, .08);
    color: var(--theme-text);
    font-size: .7rem;
    line-height: 1.3;
}

.lpnf-li .lpnf-hero .lpnf-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(30, 125, 68, .18);
}

.lpnf-li .lpnf-hero .lpnf-lead {
    max-width: 560px;
}

/* "No Mobile, No Charge" as a green pill */
.lpnf-li .lpnf-hero .lpnf-billing {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    padding: .4rem .9rem .4rem .65rem;
    background: var(--success-soft);
    border: 1px solid var(--success-light);
    border-radius: 999px;
    font-size: .88rem;
    line-height: 1.4;
}

.lpnf-li .lpnf-hero .lpnf-billing i {
    font-size: 1.2rem;
}

/* URL form in a raised white card */
.lpnf-li .lpnf-hero .lpnf-form {
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: 1rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(74, 57, 0, .05), 0 12px 32px rgba(74, 57, 0, .12);
    transition: box-shadow .25s, border-color .25s;
}

.lpnf-li .lpnf-hero .lpnf-form:focus-within {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(26, 111, 204, .08), 0 14px 36px rgba(26, 111, 204, .18);
}

.lpnf-li .lpnf-hero .lpnf-label {
    margin-bottom: .4rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--neutral-800);
}

.lpnf-li .lpnf-hero .lpnf-input {
    border-color: var(--neutral-200);
    transition: border-color .2s, box-shadow .2s;
}

.lpnf-li .lpnf-hero .lpnf-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 111, 204, .18);
}

/* Buttons: lift, shadow, press, focus ring */
.lpnf-li .lpnf-hero .lpnf-btn {
    transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}

.lpnf-li .lpnf-hero .lpnf-btn-primary {
    box-shadow: 0 6px 18px rgba(26, 111, 204, .3);
}

.lpnf-li .lpnf-hero .lpnf-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(13, 74, 143, .36);
}

.lpnf-li .lpnf-hero .lpnf-btn-outline {
    box-shadow: 0 2px 8px rgba(74, 57, 0, .08);
}

.lpnf-li .lpnf-hero .lpnf-btn-outline:hover {
    transform: translateY(-1px);
    background: var(--primary-soft);
    border-color: var(--primary-mid);
}

.lpnf-li .lpnf-hero .lpnf-btn:active {
    transform: scale(.98);
}

.lpnf-li .lpnf-hero .lpnf-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* Bottom trust line as three tick chips (same words) */
.lpnf-li .lpnf-hero .lpnf-trust {
    gap: .5rem;
    margin-top: 1.75rem;
}

.lpnf-li .lpnf-hero .lpnf-trust > span[aria-hidden] {
    display: none;
}

.lpnf-li .lpnf-hero .lpnf-trust > span:not([aria-hidden]) {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .8rem .3rem .6rem;
    background: var(--surface-white);
    border: 1px solid var(--theme-hover);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(74, 57, 0, .08);
    font-size: .8rem;
    font-weight: 700;
    color: var(--theme-text);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.lpnf-li .lpnf-hero .lpnf-trust > span:not([aria-hidden])::before {
    content: "\2713";
    color: var(--success);
    font-weight: 800;
}

.lpnf-li .lpnf-hero .lpnf-trust > span:not([aria-hidden]):hover {
    transform: translateY(-1px);
    border-color: var(--theme-border);
    box-shadow: 0 3px 10px rgba(74, 57, 0, .12);
}

/* Result card: stronger shadow, slow entrance, working copy buttons */
.lpnf-li .lpnf-result {
    box-shadow: 0 2px 4px rgba(74, 57, 0, .06), 0 18px 44px rgba(74, 57, 0, .16);
    animation: lpnf-li-card .7s ease-out .1s both;
    transition: transform .25s, box-shadow .25s;
}

.lpnf-li .lpnf-result:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(74, 57, 0, .07), 0 24px 52px rgba(74, 57, 0, .2);
}

.lpnf-li .lpnf-result-row {
    transition: border-color .2s, background .2s;
}

.lpnf-li .lpnf-result-row:hover {
    border-color: var(--primary-mid);
    background: var(--surface-white);
}

.lpnf-li .lpnf-copy {
    border: 0;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background .2s, color .2s, transform .15s;
}

.lpnf-li .lpnf-copy:hover {
    background: var(--primary);
    color: #fff;
}

.lpnf-li .lpnf-copy:active {
    transform: scale(.92);
}

.lpnf-li .lpnf-copy:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.lpnf-li .lpnf-copy.is-copied {
    background: var(--success);
    color: #fff;
}

/* Entrance for the text block under the H1 (the H1 itself stays static) */
.lpnf-li .lpnf-hero .lpnf-eyebrow,
.lpnf-li .lpnf-hero .lpnf-lead,
.lpnf-li .lpnf-hero .lpnf-billing,
.lpnf-li .lpnf-hero .lpnf-form,
.lpnf-li .lpnf-hero .lpnf-secondary,
.lpnf-li .lpnf-hero .lpnf-trust {
    animation: lpnf-li-in .6s ease-out both;
}

.lpnf-li .lpnf-hero .lpnf-lead { animation-delay: .06s; }
.lpnf-li .lpnf-hero .lpnf-billing { animation-delay: .12s; }
.lpnf-li .lpnf-hero .lpnf-form { animation-delay: .18s; }
.lpnf-li .lpnf-hero .lpnf-secondary { animation-delay: .24s; }
.lpnf-li .lpnf-hero .lpnf-trust { animation-delay: .3s; }

@keyframes lpnf-li-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes lpnf-li-card {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .lpnf-li .lpnf-hero .lpnf-form-row {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-hero .lpnf-eyebrow,
    .lpnf-li .lpnf-hero .lpnf-lead,
    .lpnf-li .lpnf-hero .lpnf-billing,
    .lpnf-li .lpnf-hero .lpnf-form,
    .lpnf-li .lpnf-hero .lpnf-secondary,
    .lpnf-li .lpnf-hero .lpnf-trust,
    .lpnf-li .lpnf-result {
        animation: none;
    }

    .lpnf-li .lpnf-hero .lpnf-btn,
    .lpnf-li .lpnf-hero .lpnf-form,
    .lpnf-li .lpnf-hero .lpnf-input,
    .lpnf-li .lpnf-hero .lpnf-trust > span,
    .lpnf-li .lpnf-result,
    .lpnf-li .lpnf-result-row,
    .lpnf-li .lpnf-copy {
        transition: none !important;
    }
}

.lpnf-li .lpnf-hero .lpnf-form-row .lpnf-btn {
    flex-shrink: 0;
    white-space: nowrap;
}


/* ═══ LinkedIn phone number finder: How to find a phone number (3 steps) ═══ */
.lpnf-li .lpnf-steps-li {
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.lpnf-li .lpnf-steps-li > li {
    position: relative;
    padding: 1.15rem 1.25rem 1.25rem;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lpnf-li .lpnf-steps-li > li:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.lpnf-li .lpnf-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.lpnf-li .lpnf-steps-li .lpnf-step-num {
    width: 34px;
    height: 34px;
    font-size: .9rem;
    box-shadow: 0 4px 10px rgba(26, 111, 204, .3);
    transition: transform .2s;
}

.lpnf-li .lpnf-steps-li > li:hover .lpnf-step-num {
    transform: scale(1.08);
}

.lpnf-li .lpnf-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.4rem;
    transition: background .2s, color .2s;
}

.lpnf-li .lpnf-steps-li > li:hover .lpnf-step-icon {
    background: var(--primary);
    color: #fff;
}

.lpnf-li .lpnf-steps-li h3 {
    margin: 0 0 .35rem;
    font-size: 1.1rem;
    line-height: 1.3;
}

.lpnf-li .lpnf-steps-li p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

.lpnf-li .lpnf-steps-li p strong {
    color: var(--neutral-950);
}

/* Connector between cards: a short line with an arrow head, drawn when the steps scroll into view */
.lpnf-li .lpnf-steps-li > li:not(:last-child)::after {
    content: "";
    position: absolute;
    background: var(--primary-mid);
    opacity: .7;
}

@media (max-width: 767.98px) {
    .lpnf-li .lpnf-steps-li > li:not(:last-child)::after {
        left: 1.25rem;
        top: 100%;
        width: 2px;
        height: 1.5rem;
        transform-origin: top;
    }
}

@media (min-width: 768px) {
    .lpnf-li .lpnf-steps-li > li:not(:last-child)::after {
        left: 100%;
        top: 2rem;
        width: 1.5rem;
        height: 2px;
        transform-origin: left;
    }
}

/* Reveal in turn the first time the steps scroll into view (needs JS; without it everything is visible) */
.lpnf-li .js-reveal:not(.is-in) > li {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-li .js-reveal:not(.is-in) > li::after {
    transform: scale(0);
}

.lpnf-li .js-reveal.is-in > li {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-li .js-reveal.is-in > li::after {
    transition: transform .4s ease-out .35s;
}

.lpnf-li .js-reveal.is-in > li:nth-child(2) {
    transition-delay: .15s, .15s, 0s, 0s;
}

.lpnf-li .js-reveal.is-in > li:nth-child(3) {
    transition-delay: .3s, .3s, 0s, 0s;
}

.lpnf-li .js-reveal.is-in > li:nth-child(2)::after {
    transition-delay: .5s;
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-steps-li > li,
    .lpnf-li .lpnf-steps-li .lpnf-step-num,
    .lpnf-li .lpnf-step-icon {
        transition: none !important;
    }

    .lpnf-li .js-reveal:not(.is-in) > li {
        opacity: 1;
        transform: none;
    }

    .lpnf-li .js-reveal:not(.is-in) > li::after {
        transform: none;
    }
}


/* ═══ LinkedIn phone number finder: What you get from a LinkedIn profile ═══ */
.lpnf-li .lpnf-get-grid {
    margin-top: 1.5rem;
}

.lpnf-li .lpnf-get-grid .lpnf-card {
    padding: 1.2rem 1.3rem 1.3rem;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lpnf-li .lpnf-get-grid .lpnf-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.lpnf-li .lpnf-get-grid .lpnf-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: .8rem;
    border-radius: 11px;
    background: var(--primary-soft);
    font-size: 1.5rem;
    transition: background .2s, color .2s, transform .2s;
}

.lpnf-li .lpnf-get-grid .lpnf-card:hover .lpnf-card-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.lpnf-li .lpnf-get-grid .lpnf-card h3 {
    margin: 0 0 .35rem;
    font-size: 1.1rem;
    line-height: 1.3;
}

.lpnf-li .lpnf-get-grid .lpnf-card p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

/* The "what is the difference" answer as a highlighted note */
.lpnf-li .lpnf-diff {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 1.5rem;
    padding: 1.15rem 1.4rem;
    background: var(--theme-color);
    border: 1px solid var(--theme-hover);
    border-left: 4px solid var(--theme-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(74, 57, 0, .06), 0 6px 16px rgba(74, 57, 0, .08);
    transition: transform .2s, box-shadow .2s;
}

.lpnf-li .lpnf-diff:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(74, 57, 0, .07), 0 12px 26px rgba(74, 57, 0, .12);
}

.lpnf-li .lpnf-diff-icon {
    flex-shrink: 0;
    font-size: 1.7rem;
    line-height: 1.2;
    color: var(--warning);
}

.lpnf-li .lpnf-diff .lpnf-h3 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    line-height: 1.35;
}

.lpnf-li .lpnf-diff p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--theme-text);
}

/* Reveal in turn the first time each block scrolls into view (needs JS; without it everything is visible) */
.lpnf-li .js-reveal.lpnf-get-grid:not(.is-in) > .lpnf-card,
.lpnf-li .js-reveal.lpnf-diff:not(.is-in) {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-li .js-reveal.lpnf-get-grid.is-in > .lpnf-card {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-li .js-reveal.lpnf-get-grid.is-in > .lpnf-card:nth-child(2) {
    transition-delay: .12s, .12s, 0s, 0s;
}

.lpnf-li .js-reveal.lpnf-get-grid.is-in > .lpnf-card:nth-child(3) {
    transition-delay: .24s, .24s, 0s, 0s;
}

.lpnf-li .js-reveal.lpnf-diff.is-in {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s;
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-get-grid .lpnf-card,
    .lpnf-li .lpnf-get-grid .lpnf-card-icon,
    .lpnf-li .lpnf-diff {
        transition: none !important;
    }

    .lpnf-li .js-reveal.lpnf-get-grid:not(.is-in) > .lpnf-card,
    .lpnf-li .js-reveal.lpnf-diff:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}


/* ═══ LinkedIn phone number finder: example export (spreadsheet window) ═══ */
.lpnf-li .lpnf-sheet {
    margin-top: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 16px 40px rgba(13, 13, 20, .1);
    transition: box-shadow .25s, border-color .25s;
}

.lpnf-li .lpnf-sheet:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .06), 0 20px 48px rgba(13, 13, 20, .14);
}

.lpnf-li .lpnf-sheet-bar {
    justify-content: flex-start;
    gap: .9rem;
    padding: .8rem 1.1rem;
    background: linear-gradient(var(--surface-white), var(--surface-soft));
}

.lpnf-li .lpnf-sheet-bar .lpnf-badge {
    margin-left: auto;
}

/* Three window dots, in the theme tones */
.lpnf-li .lpnf-sheet-dots {
    display: inline-flex;
    gap: .35rem;
    flex-shrink: 0;
}

.lpnf-li .lpnf-sheet-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--neutral-200);
}

.lpnf-li .lpnf-sheet-dots i:nth-child(1) {
    background: var(--danger-mid);
    opacity: .75;
}

.lpnf-li .lpnf-sheet-dots i:nth-child(2) {
    background: var(--warning-mid);
    opacity: .85;
}

.lpnf-li .lpnf-sheet-dots i:nth-child(3) {
    background: var(--success-mid);
    opacity: .85;
}

.lpnf-li .lpnf-sheet-id {
    min-width: 0;
}

.lpnf-li .lpnf-sheet-title {
    font-size: .98rem;
}

.lpnf-li .lpnf-sheet-meta {
    margin-top: .1rem;
    font-size: .78rem;
}

.lpnf-li .lpnf-sheet-bar .lpnf-badge {
    background: var(--warning-soft);
    border: 1px solid var(--warning-light);
    color: var(--warning-dark);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(74, 57, 0, .08);
}

.lpnf-li .lpnf-sheet-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-200) transparent;
}

.lpnf-li .lpnf-sheet-table {
    font-size: .84rem;
}

.lpnf-li .lpnf-sheet-table th, .lpnf-li .lpnf-sheet-table td {
    padding: .55rem .85rem;
}

.lpnf-li .lpnf-sheet-table thead tr.lpnf-sheet-groups th {
    background: var(--primary-soft);
    color: var(--primary-hover);
    border-bottom: 1px solid var(--primary-light);
    border-right: 1px solid var(--primary-light);
}

.lpnf-li .lpnf-sheet-table thead th {
    font-size: .8rem;
}

.lpnf-li .lpnf-sheet-table tbody tr {
    transition: background .15s;
}

.lpnf-li .lpnf-sheet-table tbody tr:hover td {
    background: var(--primary-soft);
}

.lpnf-li .lpnf-sheet-table tbody td:first-child {
    font-weight: 700;
    color: var(--neutral-950);
}

/* Note under the table */
.lpnf-li .lpnf-exportnote {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-top: 1.25rem;
    padding: .9rem 1.2rem;
    background: var(--surface-soft);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .04);
}

.lpnf-li .lpnf-exportnote > i {
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--primary);
}

.lpnf-li .lpnf-exportnote .lpnf-sheet-note {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-700);
}

/* Reveal the sheet and the note the first time they scroll into view (needs JS) */
.lpnf-li .js-reveal.lpnf-sheet:not(.is-in),
.lpnf-li .js-reveal.lpnf-exportnote:not(.is-in) {
    opacity: 0;
    transform: translateY(12px);
}

.lpnf-li .js-reveal.lpnf-sheet.is-in {
    transition: opacity .5s ease-out, transform .5s ease-out, box-shadow .25s, border-color .25s;
}

.lpnf-li .js-reveal.lpnf-exportnote.is-in {
    transition: opacity .45s ease-out .15s, transform .45s ease-out .15s;
}

@media (max-width: 575.98px) {
    .lpnf-li .lpnf-sheet-bar {
        flex-wrap: wrap;
    }

    .lpnf-li .lpnf-sheet-dots {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-sheet,
    .lpnf-li .lpnf-sheet-table tbody tr {
        transition: none !important;
    }

    .lpnf-li .js-reveal.lpnf-sheet:not(.is-in),
    .lpnf-li .js-reveal.lpnf-exportnote:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}


/* ═══ LinkedIn phone number finder: ways to enrich (4 cards) ═══ */
.lpnf-li .lpnf-ways-grid {
    margin-top: 1.5rem;
    gap: 1.1rem;
}

.lpnf-li .lpnf-ways-grid .lpnf-card {
    padding: 1.25rem 1.3rem 1.3rem;
    gap: .55rem;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lpnf-li .lpnf-ways-grid .lpnf-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.lpnf-li .lpnf-way-top {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .2rem;
}

.lpnf-li .lpnf-way-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.4rem;
    transition: background .2s, color .2s, transform .2s;
}

.lpnf-li .lpnf-ways-grid .lpnf-card:hover .lpnf-way-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.lpnf-li .lpnf-way-top .lpnf-eyebrow {
    margin: 0;
    color: var(--primary-hover);
}

.lpnf-li .lpnf-ways-grid .lpnf-card h3 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
}

.lpnf-li .lpnf-ways-grid .lpnf-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

/* The "fact" line (billing / limits) as a green note */
.lpnf-li .lpnf-ways-grid .lpnf-card p.lpnf-fact {
    padding: .45rem .75rem;
    background: var(--success-soft);
    border: 1px solid var(--success-light);
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--success-dark);
}

/* List of per-click limits with check marks */
.lpnf-li .lpnf-ways-grid .lpnf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}

.lpnf-li .lpnf-ways-grid .lpnf-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--neutral-800);
}

.lpnf-li .lpnf-ways-grid .lpnf-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
    color: var(--success);
}

.lpnf-li .lpnf-ways-grid .lpnf-btn {
    margin-top: auto;
    transition: transform .15s, box-shadow .2s, background .2s;
    box-shadow: 0 4px 12px rgba(26, 111, 204, .25);
}

.lpnf-li .lpnf-ways-grid .lpnf-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(13, 74, 143, .32);
}

.lpnf-li .lpnf-ways-grid .lpnf-btn:active {
    transform: scale(.98);
}

.lpnf-li .lpnf-ways-grid .lpnf-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* API card: not live yet, so it reads as inactive */
.lpnf-li .lpnf-way-soon {
    background: var(--surface-soft);
    border-style: dashed;
    box-shadow: none;
}

.lpnf-li .lpnf-way-soon .lpnf-way-icon {
    background: var(--neutral-100);
    color: var(--neutral-600);
}

.lpnf-li .lpnf-way-soon .lpnf-badge {
    background: var(--warning-soft);
    border: 1px solid var(--warning-light);
    color: var(--warning-dark);
    font-weight: 700;
}

/* Reveal in turn the first time the cards scroll into view (needs JS) */
.lpnf-li .js-reveal.lpnf-ways-grid:not(.is-in) > .lpnf-card {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-li .js-reveal.lpnf-ways-grid.is-in > .lpnf-card {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-li .js-reveal.lpnf-ways-grid.is-in > .lpnf-card:nth-child(2) {
    transition-delay: .12s, .12s, 0s, 0s;
}

.lpnf-li .js-reveal.lpnf-ways-grid.is-in > .lpnf-card:nth-child(3) {
    transition-delay: .24s, .24s, 0s, 0s;
}

.lpnf-li .js-reveal.lpnf-ways-grid.is-in > .lpnf-card:nth-child(4) {
    transition-delay: .36s, .36s, 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-ways-grid .lpnf-card,
    .lpnf-li .lpnf-way-icon,
    .lpnf-li .lpnf-ways-grid .lpnf-btn {
        transition: none !important;
    }

    .lpnf-li .js-reveal.lpnf-ways-grid:not(.is-in) > .lpnf-card {
        opacity: 1;
        transform: none;
    }
}


/* ═══ LinkedIn phone number finder: Privacy, compliance & security ═══ */
.lpnf-li .lpnf-pgrid {
    align-items: stretch;
    gap: 1.1rem;
}

.lpnf-li .lpnf-pgrid-2 {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.lpnf-li .lpnf-pcard {
    padding: 1.25rem 1.35rem 1.3rem;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lpnf-li .lpnf-pcard:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.lpnf-li .lpnf-pcard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: .75rem;
    border-radius: 11px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.45rem;
    transition: background .2s, color .2s, transform .2s;
}

.lpnf-li .lpnf-pcard:hover .lpnf-pcard-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.lpnf-li .lpnf-pcard-title {
    font-size: 1.1rem;
    line-height: 1.3;
}

.lpnf-li .lpnf-pcard p {
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

.lpnf-li .lpnf-pcard .lpnf-list {
    list-style: none;
    padding: 0;
    margin: 0 0 .9rem;
    display: grid;
    gap: .3rem;
}

.lpnf-li .lpnf-pcard .lpnf-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--neutral-800);
}

.lpnf-li .lpnf-pcard .lpnf-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
    color: var(--success);
}

.lpnf-li .lpnf-protect-head {
    margin-top: 0;
}

.lpnf-li .lpnf-protect-head + p {
    max-width: 820px;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

/* ISO block: the certificate details in a tinted panel */
.lpnf-li .lpnf-iso-card {
    margin-top: 1.1rem;
    background: linear-gradient(160deg, var(--primary-soft), var(--surface-white) 130%);
}

.lpnf-li .lpnf-iso-card:hover {
    transform: none;
}

.lpnf-li .lpnf-iso-dl dd {
    font-size: .9rem;
    font-weight: 600;
}

/* Customer responsibility note */
.lpnf-li .lpnf-protect-foot {
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    background: var(--theme-color);
    border: 1px solid var(--theme-hover);
    border-left: 4px solid var(--theme-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(74, 57, 0, .06), 0 6px 16px rgba(74, 57, 0, .08);
    font-size: .88rem;
    line-height: 1.65;
    color: var(--theme-text);
}

/* Policy links as pills */
.lpnf-li .lpnf-policy-links {
    gap: .5rem;
    margin: 0;
}

.lpnf-li .lpnf-policy-links .lpnf-link {
    display: inline-flex;
    align-items: center;
    padding: .4rem .95rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .05);
    font-size: .84rem;
    text-decoration: none;
    transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.lpnf-li .lpnf-policy-links .lpnf-link:hover {
    transform: translateY(-1px);
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(26, 111, 204, .28);
}

.lpnf-li .lpnf-policy-links .lpnf-link:active {
    transform: scale(.97);
}

/* Reveal in turn the first time the cards scroll into view (needs JS) */
.lpnf-li .js-reveal.lpnf-pgrid:not(.is-in) > .lpnf-pcard,
.lpnf-li .js-reveal.lpnf-iso-card:not(.is-in) {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-li .js-reveal.lpnf-pgrid.is-in > .lpnf-pcard {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-li .js-reveal.lpnf-pgrid.is-in > .lpnf-pcard:nth-child(2) {
    transition-delay: .12s, .12s, 0s, 0s;
}

.lpnf-li .js-reveal.lpnf-pgrid.is-in > .lpnf-pcard:nth-child(3) {
    transition-delay: .24s, .24s, 0s, 0s;
}

.lpnf-li .js-reveal.lpnf-iso-card.is-in {
    transition: opacity .45s ease-out, transform .45s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-pcard,
    .lpnf-li .lpnf-pcard-icon,
    .lpnf-li .lpnf-policy-links .lpnf-link {
        transition: none !important;
    }

    .lpnf-li .js-reveal.lpnf-pgrid:not(.is-in) > .lpnf-pcard,
    .lpnf-li .js-reveal.lpnf-iso-card:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}


/* ═══ LinkedIn phone number finder: You only pay when we find a mobile ═══ */
.lpnf-li .lpnf-pay-grid {
    margin-top: 1.5rem;
    gap: 1.1rem;
}

.lpnf-li .lpnf-pay-grid .lpnf-card {
    position: relative;
    padding: 1.25rem 1.3rem 1.3rem;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

/* A thin accent bar along the top: green when a credit is used, blue when it is free */
.lpnf-li .lpnf-pay-grid .lpnf-card::before {
    content: "";
    position: absolute;
    left: 1.3rem;
    right: 1.3rem;
    top: 0;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--success);
}

.lpnf-li .lpnf-pay-grid .lpnf-pay-free::before {
    background: var(--primary);
}

.lpnf-li .lpnf-pay-grid .lpnf-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.lpnf-li .lpnf-pay-grid .lpnf-credit {
    margin-bottom: .35rem;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--success);
}

.lpnf-li .lpnf-pay-grid .lpnf-credit.lpnf-zero {
    color: var(--primary);
}

.lpnf-li .lpnf-pay-grid .lpnf-card h3 {
    margin: 0 0 .3rem;
    font-size: 1.05rem;
    line-height: 1.3;
}

.lpnf-li .lpnf-pay-grid .lpnf-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

/* The two billing notes as cards with an icon */
.lpnf-li .lpnf-pay-note {
    position: relative;
    margin-top: 1.1rem;
    padding: 1.15rem 1.4rem 1.2rem 4.2rem;
    border: 1px solid var(--primary-light);
    border-left: 4px solid var(--primary);
    border-radius: 14px;
    background: var(--primary-soft);
    box-shadow: 0 1px 2px rgba(26, 111, 204, .06), 0 6px 16px rgba(26, 111, 204, .08);
    transition: transform .2s, box-shadow .2s;
}

.lpnf-li .lpnf-pay-note:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(26, 111, 204, .08), 0 12px 26px rgba(26, 111, 204, .12);
}

.lpnf-li .lpnf-pay-note-icon {
    position: absolute;
    left: 1.2rem;
    top: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(26, 111, 204, .3);
}

.lpnf-li .lpnf-pay-note h3 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    line-height: 1.35;
}

.lpnf-li .lpnf-pay-note p {
    margin: 0 0 .5rem;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-700);
}

.lpnf-li .lpnf-pay-note p strong {
    color: var(--neutral-950);
}

.lpnf-li .lpnf-pay-note .lpnf-list {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    display: grid;
    gap: .3rem;
}

.lpnf-li .lpnf-pay-note .lpnf-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--neutral-800);
}

.lpnf-li .lpnf-pay-note .lpnf-list li::before {
    content: "\2022";
    position: absolute;
    left: .35rem;
    top: 0;
    font-weight: 800;
    color: var(--primary);
}

/* Buttons under the section */
.lpnf-li [aria-labelledby="lpnf-pay"] .lpnf-actions {
    margin-top: 1.5rem;
}

.lpnf-li [aria-labelledby="lpnf-pay"] .lpnf-btn {
    transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}

.lpnf-li [aria-labelledby="lpnf-pay"] .lpnf-btn-primary {
    box-shadow: 0 6px 18px rgba(26, 111, 204, .3);
}

.lpnf-li [aria-labelledby="lpnf-pay"] .lpnf-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(13, 74, 143, .36);
}

.lpnf-li [aria-labelledby="lpnf-pay"] .lpnf-btn-outline {
    box-shadow: 0 2px 8px rgba(13, 13, 20, .06);
}

.lpnf-li [aria-labelledby="lpnf-pay"] .lpnf-btn-outline:hover {
    transform: translateY(-1px);
    background: var(--primary-soft);
    border-color: var(--primary-mid);
}

.lpnf-li [aria-labelledby="lpnf-pay"] .lpnf-btn:active {
    transform: scale(.98);
}

.lpnf-li [aria-labelledby="lpnf-pay"] .lpnf-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* Reveal in turn the first time each block scrolls into view (needs JS) */
.lpnf-li .js-reveal.lpnf-pay-grid:not(.is-in) > .lpnf-card,
.lpnf-li .js-reveal.lpnf-pay-note:not(.is-in) {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-li .js-reveal.lpnf-pay-grid.is-in > .lpnf-card {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-li .js-reveal.lpnf-pay-grid.is-in > .lpnf-card:nth-child(2) {
    transition-delay: .1s, .1s, 0s, 0s;
}

.lpnf-li .js-reveal.lpnf-pay-grid.is-in > .lpnf-card:nth-child(3) {
    transition-delay: .2s, .2s, 0s, 0s;
}

.lpnf-li .js-reveal.lpnf-pay-grid.is-in > .lpnf-card:nth-child(4) {
    transition-delay: .3s, .3s, 0s, 0s;
}

.lpnf-li .js-reveal.lpnf-pay-note.is-in {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s;
}

@media (max-width: 575.98px) {
    .lpnf-li .lpnf-pay-note {
        padding-left: 1.25rem;
        padding-top: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-pay-grid .lpnf-card,
    .lpnf-li .lpnf-pay-note,
    .lpnf-li [aria-labelledby="lpnf-pay"] .lpnf-btn {
        transition: none !important;
    }

    .lpnf-li .js-reveal.lpnf-pay-grid:not(.is-in) > .lpnf-card,
    .lpnf-li .js-reveal.lpnf-pay-note:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}


/* ═══ LinkedIn phone number finder: FAQ, two-column accordion ═══ */
.lpnf-li .lpnf-faq-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    align-items: start;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .lpnf-li .lpnf-faq-2col {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lpnf-li .lpnf-faq-2col .lpnf-faq-item {
    margin: 0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .04);
    transition: box-shadow .2s, border-color .2s, transform .2s;
}

.lpnf-li .lpnf-faq-2col .lpnf-faq-item:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 10px 22px rgba(13, 13, 20, .08);
    transform: translateY(-2px);
}

/* An open answer takes the full row, so there is no empty space beside it */
.lpnf-li .lpnf-faq-2col .lpnf-faq-item:has(.lpnf-faq-btn[aria-expanded="true"]) {
    grid-column: 1 / -1;
    border-color: var(--primary-mid);
}

.lpnf-li .lpnf-faq-2col .lpnf-faq-btn {
    padding: .95rem 1.1rem;
    font-size: .96rem;
    line-height: 1.4;
    border-radius: 14px;
}

/* Circular chevron toggle, filled blue while open */
.lpnf-li .lpnf-faq-2col .lpnf-faq-btn i {
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border: 1px solid var(--neutral-200);
    border-radius: 50%;
    background: var(--surface-white);
    box-shadow: 0 1px 2px rgba(13, 13, 20, .06);
    color: var(--neutral-600);
    font-size: 1.15rem;
    transition: transform .2s, background .2s, border-color .2s, color .2s;
}

.lpnf-li .lpnf-faq-2col.is-enhanced .lpnf-faq-btn i {
    display: inline-flex;
}

.lpnf-li .lpnf-faq-2col .lpnf-faq-btn:hover i {
    background: var(--primary-soft);
    border-color: var(--primary-mid);
    color: var(--primary);
}

.lpnf-li .lpnf-faq-2col .lpnf-faq-btn[aria-expanded="true"] i {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.lpnf-li .lpnf-faq-2col .lpnf-faq-a {
    padding: 0 1.1rem 1.1rem;
}

.lpnf-li .lpnf-faq-2col .lpnf-faq-a:not([hidden]) {
    animation: lpnf-li-in .25s ease-out both;
}

.lpnf-li .lpnf-faq-2col .lpnf-faq-a p {
    margin: 0 0 .5rem;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--neutral-700);
}

.lpnf-li .lpnf-faq-2col .lpnf-faq-a p:last-child {
    margin-bottom: 0;
}

/* Reveal in turn the first time the list scrolls into view (needs JS) */
.lpnf-li .js-reveal.lpnf-faq-2col:not(.is-in) > .lpnf-faq-item {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-li .js-reveal.lpnf-faq-2col.is-in > .lpnf-faq-item {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-li .js-reveal.lpnf-faq-2col.is-in > .lpnf-faq-item:nth-child(even) {
    transition-delay: .08s, .08s, 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-faq-2col .lpnf-faq-item,
    .lpnf-li .lpnf-faq-2col .lpnf-faq-btn i {
        transition: none !important;
    }

    .lpnf-li .lpnf-faq-2col .lpnf-faq-a:not([hidden]) {
        animation: none;
    }

    .lpnf-li .js-reveal.lpnf-faq-2col:not(.is-in) > .lpnf-faq-item {
        opacity: 1;
        transform: none;
    }
}


/* ═══ LinkedIn phone number finder: What happens when you enrich a profile (results table) ═══ */
.lpnf-li .lpnf-states-wrap {
    margin-top: 1.5rem;
}

.lpnf-li .lpnf-states {
    font-size: .88rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .lpnf-li .lpnf-states-wrap {
        overflow: clip;
        border: 1px solid var(--neutral-200);
        border-radius: 16px;
        background: var(--surface-white);
        box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 36px rgba(13, 13, 20, .09);
    }

    .lpnf-li .lpnf-states {
        border-collapse: separate;
        border-spacing: 0;
    }

    .lpnf-li .lpnf-states th,
    .lpnf-li .lpnf-states td {
        padding: .8rem 1.1rem;
        border: 0;
        border-bottom: 1px solid var(--neutral-100);
    }

    .lpnf-li .lpnf-states tbody tr:last-child th,
    .lpnf-li .lpnf-states tbody tr:last-child td {
        border-bottom: 0;
    }

    .lpnf-li .lpnf-states thead th {
        font-size: .78rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--theme-border);
    }

    .lpnf-li .lpnf-states tbody th {
        position: relative;
        padding-left: 2.3rem;
        font-size: .9rem;
        color: var(--neutral-950);
    }

    .lpnf-li .lpnf-states tbody tr {
        transition: background .15s;
    }

    .lpnf-li .lpnf-states tbody tr:hover th,
    .lpnf-li .lpnf-states tbody tr:hover td {
        background: var(--primary-soft);
    }
}

/* Status dot before each result name: green = a credit is used, blue = free or already paid */
.lpnf-li .lpnf-states tbody th::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: .55rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 111, 204, .15);
}

@media (min-width: 768px) {
    .lpnf-li .lpnf-states tbody th::before {
        position: absolute;
        left: 1.1rem;
        top: 1.15rem;
        margin: 0;
    }
}

.lpnf-li .lpnf-states tr.is-paid th::before {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(30, 125, 68, .16);
}

.lpnf-li .lpnf-states tr.is-kept th::before {
    background: var(--warning-mid);
    box-shadow: 0 0 0 3px rgba(232, 160, 32, .2);
}

/* The billing column carries the key information */
.lpnf-li .lpnf-states tbody td:last-child {
    font-weight: 600;
    color: var(--neutral-900);
}

.lpnf-li .lpnf-states tr.is-paid td:last-child {
    color: var(--success-dark);
}

/* Phones: the stacked cards get shadow and a left status edge */
@media (max-width: 767.98px) {
    .lpnf-li .lpnf-states tr {
        box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .05);
    }
}

/* Reveal the rows in turn the first time the table scrolls into view (needs JS) */
.lpnf-li .js-reveal.lpnf-states-wrap:not(.is-in) .lpnf-states tbody tr {
    opacity: 0;
    transform: translateY(8px);
}

.lpnf-li .js-reveal.lpnf-states-wrap.is-in .lpnf-states tbody tr {
    transition: opacity .4s ease-out, transform .4s ease-out, background .15s;
}

.lpnf-li .js-reveal.lpnf-states-wrap.is-in .lpnf-states tbody tr:nth-child(2) { transition-delay: .08s, .08s, 0s; }
.lpnf-li .js-reveal.lpnf-states-wrap.is-in .lpnf-states tbody tr:nth-child(3) { transition-delay: .16s, .16s, 0s; }
.lpnf-li .js-reveal.lpnf-states-wrap.is-in .lpnf-states tbody tr:nth-child(4) { transition-delay: .24s, .24s, 0s; }
.lpnf-li .js-reveal.lpnf-states-wrap.is-in .lpnf-states tbody tr:nth-child(5) { transition-delay: .32s, .32s, 0s; }

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-states tbody tr {
        transition: none !important;
    }

    .lpnf-li .js-reveal.lpnf-states-wrap:not(.is-in) .lpnf-states tbody tr {
        opacity: 1;
        transform: none;
    }
}


/* ═══ LinkedIn phone number finder: Data quality and verification ═══ */
.lpnf-li .lpnf-dq {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-top: 1.5rem;
    padding: 1.5rem 1.6rem;
    background: linear-gradient(160deg, var(--primary-soft), var(--surface-white) 130%);
    border: 1px solid var(--neutral-200);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 10px 28px rgba(13, 13, 20, .07);
    transition: box-shadow .25s, border-color .25s;
}

.lpnf-li .lpnf-dq:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 16px 36px rgba(13, 13, 20, .1);
}

.lpnf-li .lpnf-dq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    font-size: 1.9rem;
    box-shadow: 0 4px 12px rgba(26, 111, 204, .3);
}

.lpnf-li .lpnf-dq-body {
    min-width: 0;
    flex: 1;
}

.lpnf-li .lpnf-dq .lpnf-sub {
    max-width: 760px;
    margin: 0 0 1rem;
}

/* A row of linked stage dots that light up when the block scrolls into view (decorative) */
.lpnf-li .lpnf-dq-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 360px;
    margin: 0 0 1.1rem;
}

.lpnf-li .lpnf-dq-track::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--primary-light);
}

.lpnf-li .lpnf-dq-track i {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.lpnf-li .lpnf-dq-link {
    margin: 0;
}

.lpnf-li .lpnf-dq-link .lpnf-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    background: var(--surface-white);
    border: 1px solid var(--primary-light);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .06);
    font-size: .9rem;
    text-decoration: none;
    transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.lpnf-li .lpnf-dq-link .lpnf-link span {
    display: inline-block;
    transition: transform .2s;
}

.lpnf-li .lpnf-dq-link .lpnf-link:hover {
    transform: translateY(-1px);
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(26, 111, 204, .28);
}

.lpnf-li .lpnf-dq-link .lpnf-link:hover span {
    transform: translateX(4px);
}

.lpnf-li .lpnf-dq-link .lpnf-link:active {
    transform: scale(.97);
}

/* Reveal: the card fades up, then the dots light up one after another (needs JS) */
.lpnf-li .js-reveal.lpnf-dq:not(.is-in) {
    opacity: 0;
    transform: translateY(12px);
}

.lpnf-li .js-reveal.lpnf-dq.is-in {
    transition: opacity .5s ease-out, transform .5s ease-out, box-shadow .25s, border-color .25s;
}

.lpnf-li .js-reveal.lpnf-dq:not(.is-in) .lpnf-dq-track i {
    transform: scale(0);
}

.lpnf-li .js-reveal.lpnf-dq.is-in .lpnf-dq-track i {
    transition: transform .3s ease-out;
}

.lpnf-li .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(1) { transition-delay: .3s; }
.lpnf-li .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(2) { transition-delay: .4s; }
.lpnf-li .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(3) { transition-delay: .5s; }
.lpnf-li .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(4) { transition-delay: .6s; }
.lpnf-li .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(5) { transition-delay: .7s; }
.lpnf-li .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(6) { transition-delay: .8s; }
.lpnf-li .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(7) { transition-delay: .9s; }

@media (max-width: 575.98px) {
    .lpnf-li .lpnf-dq {
        flex-direction: column;
        gap: 1rem;
    }

    .lpnf-li .lpnf-dq-track {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-dq,
    .lpnf-li .lpnf-dq-link .lpnf-link,
    .lpnf-li .lpnf-dq-link .lpnf-link span {
        transition: none !important;
    }

    .lpnf-li .js-reveal.lpnf-dq:not(.is-in),
    .lpnf-li .js-reveal.lpnf-dq:not(.is-in) .lpnf-dq-track i {
        opacity: 1;
        transform: none;
    }

    .lpnf-li .lpnf-dq-track i {
        transition: none !important;
    }
}


/* ═══ LinkedIn phone number finder: Built for B2B sales and recruiting teams ═══ */
.lpnf-li .lpnf-use-grid {
    margin-top: 1.5rem;
    gap: 1.1rem;
}

.lpnf-li .lpnf-use-grid .lpnf-card {
    padding: 1.2rem 1.3rem 1.3rem;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lpnf-li .lpnf-use-grid .lpnf-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.lpnf-li .lpnf-use-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: .8rem;
    border-radius: 11px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.5rem;
    transition: background .2s, color .2s, transform .2s;
}

.lpnf-li .lpnf-use-grid .lpnf-card:hover .lpnf-use-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.lpnf-li .lpnf-use-grid .lpnf-card h3 {
    margin: 0 0 .35rem;
    font-size: 1.1rem;
    line-height: 1.3;
}

.lpnf-li .lpnf-use-grid .lpnf-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

/* Reveal in turn the first time the cards scroll into view (needs JS) */
.lpnf-li .js-reveal.lpnf-use-grid:not(.is-in) > .lpnf-card {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-li .js-reveal.lpnf-use-grid.is-in > .lpnf-card {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-li .js-reveal.lpnf-use-grid.is-in > .lpnf-card:nth-child(2) { transition-delay: .1s, .1s, 0s, 0s; }
.lpnf-li .js-reveal.lpnf-use-grid.is-in > .lpnf-card:nth-child(3) { transition-delay: .2s, .2s, 0s, 0s; }
.lpnf-li .js-reveal.lpnf-use-grid.is-in > .lpnf-card:nth-child(4) { transition-delay: .3s, .3s, 0s, 0s; }

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-use-grid .lpnf-card,
    .lpnf-li .lpnf-use-icon {
        transition: none !important;
    }

    .lpnf-li .js-reveal.lpnf-use-grid:not(.is-in) > .lpnf-card {
        opacity: 1;
        transform: none;
    }
}


/* ═══ LinkedIn phone number finder: Related LinkedIn resources (link cards) ═══ */
.lpnf-li .lpnf-res-grid {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: .8rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .lpnf-li .lpnf-res-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lpnf-li .lpnf-res-grid > li {
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .04);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lpnf-li .lpnf-res-grid > li:hover {
    transform: translateY(-2px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 10px 22px rgba(13, 13, 20, .08);
}

/* The whole card is the link; a round arrow marks it as a destination */
.lpnf-li .lpnf-res-grid .lpnf-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
    padding: .95rem 1.1rem;
    border-radius: 14px;
    font-size: .92rem;
    line-height: 1.45;
    text-decoration: none;
    color: var(--neutral-950);
}

.lpnf-li .lpnf-res-grid .lpnf-link::after {
    content: "\2192";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--neutral-200);
    border-radius: 50%;
    background: var(--surface-white);
    box-shadow: 0 1px 2px rgba(13, 13, 20, .06);
    color: var(--primary);
    font-size: .95rem;
    font-weight: 700;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.lpnf-li .lpnf-res-grid > li:hover .lpnf-link {
    color: var(--primary-hover);
}

.lpnf-li .lpnf-res-grid > li:hover .lpnf-link::after {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateX(3px);
}

.lpnf-li .lpnf-res-grid .lpnf-link:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Reveal in turn the first time the list scrolls into view (needs JS) */
.lpnf-li .js-reveal.lpnf-res-grid:not(.is-in) > li {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-li .js-reveal.lpnf-res-grid.is-in > li {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-li .js-reveal.lpnf-res-grid.is-in > li:nth-child(even) {
    transition-delay: .08s, .08s, 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-res-grid > li,
    .lpnf-li .lpnf-res-grid .lpnf-link::after {
        transition: none !important;
    }

    .lpnf-li .js-reveal.lpnf-res-grid:not(.is-in) > li {
        opacity: 1;
        transform: none;
    }
}


/* ═══ LinkedIn phone number finder: final CTA banner (theme colour, as the custom lists page) ═══ */
.lpnf-li .lpnf-final {
    padding: 2rem 0 3.5rem;
    background: var(--surface-white);
    border-top: 0;
}

.lpnf-li .lpnf-banner {
    padding: 2.5rem 1.5rem 2.25rem;
    text-align: center;
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-light-color) 55%, var(--theme-hover) 140%);
    border: 1px solid var(--theme-hover);
    border-radius: 22px;
    box-shadow: 0 2px 4px rgba(74, 57, 0, .06), 0 16px 40px rgba(201, 160, 0, .18);
}

.lpnf-li .lpnf-banner .lpnf-h2 {
    margin: 0 0 .5rem;
    color: var(--theme-text);
}

.lpnf-li .lpnf-banner .lpnf-sub {
    margin: 0 auto 1.4rem;
    color: var(--neutral-800);
}

/* Form in a raised white card */
.lpnf-li .lpnf-banner .lpnf-form {
    max-width: 640px;
    margin: 0 auto 1rem;
    padding: 1rem 1.1rem 1.1rem;
    text-align: left;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(74, 57, 0, .05), 0 12px 32px rgba(74, 57, 0, .12);
    transition: box-shadow .25s, border-color .25s;
}

.lpnf-li .lpnf-banner .lpnf-form:focus-within {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(26, 111, 204, .08), 0 14px 36px rgba(26, 111, 204, .18);
}

.lpnf-li .lpnf-banner .lpnf-label {
    margin-bottom: .4rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--neutral-800);
}

.lpnf-li .lpnf-banner .lpnf-input {
    transition: border-color .2s, box-shadow .2s;
}

.lpnf-li .lpnf-banner .lpnf-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 111, 204, .18);
}

.lpnf-li .lpnf-banner .lpnf-form-row .lpnf-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* "No Mobile, No Charge" as a green pill */
.lpnf-li .lpnf-banner .lpnf-billing {
    display: inline-flex;
    justify-content: center;
    margin: 0 0 1.1rem;
    padding: .35rem .9rem;
    background: var(--success-soft);
    border: 1px solid var(--success-light);
    border-radius: 999px;
    font-size: .88rem;
}

/* Buttons */
.lpnf-li .lpnf-banner .lpnf-btn {
    transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}

.lpnf-li .lpnf-banner .lpnf-btn-primary {
    box-shadow: 0 6px 18px rgba(26, 111, 204, .3);
}

.lpnf-li .lpnf-banner .lpnf-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(13, 74, 143, .36);
}

.lpnf-li .lpnf-banner .lpnf-btn-outline {
    box-shadow: 0 2px 8px rgba(74, 57, 0, .08);
}

.lpnf-li .lpnf-banner .lpnf-btn-outline:hover {
    transform: translateY(-1px);
    background: var(--primary-soft);
    border-color: var(--primary-mid);
}

.lpnf-li .lpnf-banner .lpnf-btn:active {
    transform: scale(.98);
}

.lpnf-li .lpnf-banner .lpnf-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* Reveal the banner the first time it scrolls into view (needs JS) */
.lpnf-li .js-reveal.lpnf-banner:not(.is-in) {
    opacity: 0;
    transform: translateY(12px);
}

.lpnf-li .js-reveal.lpnf-banner.is-in {
    transition: opacity .5s ease-out, transform .5s ease-out;
}

@media (max-width: 575.98px) {
    .lpnf-li .lpnf-banner {
        padding: 2rem 1rem 1.75rem;
    }

    .lpnf-li .lpnf-banner .lpnf-form-row {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-banner .lpnf-btn,
    .lpnf-li .lpnf-banner .lpnf-form,
    .lpnf-li .lpnf-banner .lpnf-input {
        transition: none !important;
    }

    .lpnf-li .js-reveal.lpnf-banner:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}


/* ═══ LinkedIn phone number finder: "Didn't find the contact you need?" cross-link card ═══ */
.lpnf-li .lpnf-cross {
    position: relative;
    gap: 1.1rem 1.25rem;
    padding: 1.2rem 1.4rem;
    background: var(--primary-soft);
    border: 1px solid var(--primary-light);
    border-left: 4px solid var(--primary);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(26, 111, 204, .06), 0 8px 22px rgba(26, 111, 204, .1);
    transition: transform .2s, box-shadow .2s;
}

.lpnf-li .lpnf-cross:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(26, 111, 204, .08), 0 14px 30px rgba(26, 111, 204, .15);
}

.lpnf-li .lpnf-cross-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 4px 12px rgba(26, 111, 204, .3);
}

.lpnf-li .lpnf-cross-text {
    flex: 1;
    min-width: 0;
}

.lpnf-li .lpnf-cross-title {
    font-size: 1.1rem;
    line-height: 1.3;
}

.lpnf-li .lpnf-cross p {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--neutral-700);
}

.lpnf-li .lpnf-cross .lpnf-cross-sub {
    font-size: .84rem;
    color: var(--neutral-600);
}

.lpnf-li .lpnf-cross .lpnf-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 18px rgba(26, 111, 204, .3);
    transition: transform .15s, box-shadow .2s, background .2s;
}

.lpnf-li .lpnf-cross .lpnf-btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(13, 74, 143, .36);
}

.lpnf-li .lpnf-cross .lpnf-btn:active {
    transform: scale(.98);
}

.lpnf-li .lpnf-cross .lpnf-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* Reveal the card the first time it scrolls into view (needs JS) */
.lpnf-li .js-reveal.lpnf-cross:not(.is-in) {
    opacity: 0;
    transform: translateY(12px);
}

.lpnf-li .js-reveal.lpnf-cross.is-in {
    transition: opacity .5s ease-out, transform .5s ease-out, box-shadow .2s;
}

@media (max-width: 767.98px) {
    .lpnf-li .lpnf-cross {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-cross,
    .lpnf-li .lpnf-cross .lpnf-btn {
        transition: none !important;
    }

    .lpnf-li .js-reveal.lpnf-cross:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}


/* Final CTA banner: match the custom lists page banner (gradient, drifting circles, spacing, heading size) */
.lpnf-li .lpnf-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 2.75rem 1.5rem 2.25rem;
}

.lpnf-li .lpnf-banner::before,
.lpnf-li .lpnf-banner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: var(--theme-hover);
    opacity: .55;
    animation: clp-drift 12s ease-in-out infinite alternate;
}

.lpnf-li .lpnf-banner::before {
    width: 280px;
    height: 280px;
    top: -110px;
    left: -70px;
}

.lpnf-li .lpnf-banner::after {
    width: 220px;
    height: 220px;
    right: -60px;
    bottom: -100px;
    animation-delay: -6s;
}

.lpnf-li .lpnf-banner .lpnf-h2 {
    margin: 0 0 .6rem;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}

.lpnf-li .lpnf-banner .lpnf-sub {
    max-width: 640px;
    font-size: 1.02rem;
}

@media (min-width: 768px) {
    .lpnf-li .lpnf-banner {
        padding: 3.25rem 2rem 2.5rem;
    }
}

@media (max-width: 575.98px) {
    .lpnf-li .lpnf-banner {
        padding: 2.25rem 1rem 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-li .lpnf-banner::before,
    .lpnf-li .lpnf-banner::after {
        animation: none;
    }
}


/* Final CTA banner, compact: smaller type and padding; two columns on desktop (message left, form + buttons right) */
.lpnf-li .lpnf-final {
    padding: 1.25rem 0 2.5rem;
}

.lpnf-li .lpnf-banner,
.lpnf-li .lpnf-banner {
    padding: 1.75rem 1.5rem 1.6rem;
    border-radius: 18px;
}

.lpnf-li .lpnf-banner .lpnf-h2 {
    margin: 0 0 .4rem;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    line-height: 1.2;
}

.lpnf-li .lpnf-banner .lpnf-sub {
    max-width: 520px;
    margin: 0 auto 1rem;
    font-size: .94rem;
    line-height: 1.6;
}

.lpnf-li .lpnf-banner .lpnf-form {
    max-width: 560px;
    margin: 0 auto .75rem;
    padding: .75rem .85rem .85rem;
    border-radius: 14px;
}

.lpnf-li .lpnf-banner .lpnf-label {
    margin-bottom: .3rem;
    font-size: .76rem;
}

.lpnf-li .lpnf-banner .lpnf-input,
.lpnf-li .lpnf-banner .lpnf-form-row .lpnf-btn {
    min-height: 42px;
}

.lpnf-li .lpnf-banner .lpnf-form-row .lpnf-btn {
    padding-top: .45rem;
    padding-bottom: .45rem;
    font-size: .92rem;
}

.lpnf-li .lpnf-banner .lpnf-billing {
    margin: 0 0 .75rem;
    padding: .25rem .8rem;
    font-size: .82rem;
}

.lpnf-li .lpnf-banner .lpnf-secondary .lpnf-btn {
    min-height: 38px;
    padding: .4rem .9rem;
    font-size: .86rem;
}

.lpnf-li .lpnf-banner .lpnf-secondary {
    gap: .5rem;
    margin: 0;
}

@media (min-width: 992px) {
    .lpnf-li .lpnf-banner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        grid-template-areas:
            "title form"
            "sub   form"
            "bill  btns";
        column-gap: 2.5rem;
        row-gap: 0;
        align-items: center;
        padding: 1.9rem 2.25rem;
        text-align: left;
    }

    .lpnf-li .lpnf-banner .lpnf-h2 {
        grid-area: title;
        align-self: end;
    }

    .lpnf-li .lpnf-banner .lpnf-sub {
        grid-area: sub;
        margin: 0 0 .9rem;
        align-self: start;
    }

    .lpnf-li .lpnf-banner .lpnf-form {
        grid-area: form;
        width: 100%;
        max-width: none;
        margin: 0 0 .7rem;
    }

    .lpnf-li .lpnf-banner .lpnf-billing {
        grid-area: bill;
        justify-self: start;
        margin: 0;
    }

    .lpnf-li .lpnf-banner .lpnf-secondary {
        grid-area: btns;
        justify-content: flex-end;
    }
}

@media (max-width: 575.98px) {
    .lpnf-li .lpnf-banner {
        padding: 1.5rem 1rem 1.35rem;
    }
}


@media (min-width: 992px) {
    .lpnf-li .lpnf-final .lpnf-banner .lpnf-h2,
    .lpnf-li .lpnf-final .lpnf-banner .lpnf-sub {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ═══ Director phone number by DIN: hero (scoped to .lpnf-din; same design as the LinkedIn finder hero) ═══ */
.lpnf-din .lpnf-hero {
    padding: 2.5rem 0 3rem;
}

.lpnf-din .lpnf-hero .lpnf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: .35rem .85rem .35rem .7rem;
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--theme-hover);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(74, 57, 0, .08);
    color: var(--theme-text);
    font-size: .7rem;
    line-height: 1.3;
}

.lpnf-din .lpnf-hero .lpnf-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(30, 125, 68, .18);
}

.lpnf-din .lpnf-hero .lpnf-lead {
    max-width: 560px;
}

/* "No Mobile, No Charge" as a green pill */
.lpnf-din .lpnf-hero .lpnf-billing {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    padding: .4rem .9rem .4rem .65rem;
    background: var(--success-soft);
    border: 1px solid var(--success-light);
    border-radius: 999px;
    font-size: .88rem;
    line-height: 1.4;
}

.lpnf-din .lpnf-hero .lpnf-billing i {
    font-size: 1.2rem;
}

/* URL form in a raised white card */
.lpnf-din .lpnf-hero .lpnf-form {
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: 1rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(74, 57, 0, .05), 0 12px 32px rgba(74, 57, 0, .12);
    transition: box-shadow .25s, border-color .25s;
}

.lpnf-din .lpnf-hero .lpnf-form:focus-within {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(26, 111, 204, .08), 0 14px 36px rgba(26, 111, 204, .18);
}

.lpnf-din .lpnf-hero .lpnf-label {
    margin-bottom: .4rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--neutral-800);
}

.lpnf-din .lpnf-hero .lpnf-input {
    border-color: var(--neutral-200);
    transition: border-color .2s, box-shadow .2s;
}

.lpnf-din .lpnf-hero .lpnf-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 111, 204, .18);
}

/* Buttons: lift, shadow, press, focus ring */
.lpnf-din .lpnf-hero .lpnf-btn {
    transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}

.lpnf-din .lpnf-hero .lpnf-btn-primary {
    box-shadow: 0 6px 18px rgba(26, 111, 204, .3);
}

.lpnf-din .lpnf-hero .lpnf-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(13, 74, 143, .36);
}

.lpnf-din .lpnf-hero .lpnf-btn-outline {
    box-shadow: 0 2px 8px rgba(74, 57, 0, .08);
}

.lpnf-din .lpnf-hero .lpnf-btn-outline:hover {
    transform: translateY(-1px);
    background: var(--primary-soft);
    border-color: var(--primary-mid);
}

.lpnf-din .lpnf-hero .lpnf-btn:active {
    transform: scale(.98);
}

.lpnf-din .lpnf-hero .lpnf-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* Bottom trust line as three tick chips (same words) */
.lpnf-din .lpnf-hero .lpnf-trust {
    gap: .5rem;
    margin-top: 1.75rem;
}

.lpnf-din .lpnf-hero .lpnf-trust > span[aria-hidden] {
    display: none;
}

.lpnf-din .lpnf-hero .lpnf-trust > span:not([aria-hidden]) {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .8rem .3rem .6rem;
    background: var(--surface-white);
    border: 1px solid var(--theme-hover);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(74, 57, 0, .08);
    font-size: .8rem;
    font-weight: 700;
    color: var(--theme-text);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.lpnf-din .lpnf-hero .lpnf-trust > span:not([aria-hidden])::before {
    content: "\2713";
    color: var(--success);
    font-weight: 800;
}

.lpnf-din .lpnf-hero .lpnf-trust > span:not([aria-hidden]):hover {
    transform: translateY(-1px);
    border-color: var(--theme-border);
    box-shadow: 0 3px 10px rgba(74, 57, 0, .12);
}

/* Result card: stronger shadow, slow entrance, working copy buttons */
.lpnf-din .lpnf-result {
    box-shadow: 0 2px 4px rgba(74, 57, 0, .06), 0 18px 44px rgba(74, 57, 0, .16);
    animation: lpnf-li-card .7s ease-out .1s both;
    transition: transform .25s, box-shadow .25s;
}

.lpnf-din .lpnf-result:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(74, 57, 0, .07), 0 24px 52px rgba(74, 57, 0, .2);
}

.lpnf-din .lpnf-result-row {
    transition: border-color .2s, background .2s;
}

.lpnf-din .lpnf-result-row:hover {
    border-color: var(--primary-mid);
    background: var(--surface-white);
}

.lpnf-din .lpnf-copy {
    border: 0;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background .2s, color .2s, transform .15s;
}

.lpnf-din .lpnf-copy:hover {
    background: var(--primary);
    color: #fff;
}

.lpnf-din .lpnf-copy:active {
    transform: scale(.92);
}

.lpnf-din .lpnf-copy:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.lpnf-din .lpnf-copy.is-copied {
    background: var(--success);
    color: #fff;
}

/* Entrance for the text block under the H1 (the H1 itself stays static) */
.lpnf-din .lpnf-hero .lpnf-eyebrow,
.lpnf-din .lpnf-hero .lpnf-lead,
.lpnf-din .lpnf-hero .lpnf-billing,
.lpnf-din .lpnf-hero .lpnf-form,
.lpnf-din .lpnf-hero .lpnf-secondary,
.lpnf-din .lpnf-hero .lpnf-trust {
    animation: lpnf-li-in .6s ease-out both;
}

.lpnf-din .lpnf-hero .lpnf-lead { animation-delay: .06s; }
.lpnf-din .lpnf-hero .lpnf-billing { animation-delay: .12s; }
.lpnf-din .lpnf-hero .lpnf-form { animation-delay: .18s; }
.lpnf-din .lpnf-hero .lpnf-secondary { animation-delay: .24s; }
.lpnf-din .lpnf-hero .lpnf-trust { animation-delay: .3s; }

@keyframes lpnf-li-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes lpnf-li-card {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .lpnf-din .lpnf-hero .lpnf-form-row {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-hero .lpnf-eyebrow,
    .lpnf-din .lpnf-hero .lpnf-lead,
    .lpnf-din .lpnf-hero .lpnf-billing,
    .lpnf-din .lpnf-hero .lpnf-form,
    .lpnf-din .lpnf-hero .lpnf-secondary,
    .lpnf-din .lpnf-hero .lpnf-trust,
    .lpnf-din .lpnf-result {
        animation: none;
    }

    .lpnf-din .lpnf-hero .lpnf-btn,
    .lpnf-din .lpnf-hero .lpnf-form,
    .lpnf-din .lpnf-hero .lpnf-input,
    .lpnf-din .lpnf-hero .lpnf-trust > span,
    .lpnf-din .lpnf-result,
    .lpnf-din .lpnf-result-row,
    .lpnf-din .lpnf-copy {
        transition: none !important;
    }
}

.lpnf-din .lpnf-hero .lpnf-form-row .lpnf-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ═══ Director phone number by DIN: How it works (3 steps; same design as the LinkedIn finder) ═══ */
.lpnf-din .lpnf-steps-li {
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.lpnf-din .lpnf-steps-li > li {
    position: relative;
    padding: 1.15rem 1.25rem 1.25rem;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lpnf-din .lpnf-steps-li > li:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.lpnf-din .lpnf-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.lpnf-din .lpnf-steps-li .lpnf-step-num {
    width: 34px;
    height: 34px;
    font-size: .9rem;
    box-shadow: 0 4px 10px rgba(26, 111, 204, .3);
    transition: transform .2s;
}

.lpnf-din .lpnf-steps-li > li:hover .lpnf-step-num {
    transform: scale(1.08);
}

.lpnf-din .lpnf-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.4rem;
    transition: background .2s, color .2s;
}

.lpnf-din .lpnf-steps-li > li:hover .lpnf-step-icon {
    background: var(--primary);
    color: #fff;
}

.lpnf-din .lpnf-steps-li h3 {
    margin: 0 0 .35rem;
    font-size: 1.1rem;
    line-height: 1.3;
}

.lpnf-din .lpnf-steps-li p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

.lpnf-din .lpnf-steps-li p strong {
    color: var(--neutral-950);
}

/* Connector between cards: a short line with an arrow head, drawn when the steps scroll into view */
.lpnf-din .lpnf-steps-li > li:not(:last-child)::after {
    content: "";
    position: absolute;
    background: var(--primary-mid);
    opacity: .7;
}

@media (max-width: 767.98px) {
    .lpnf-din .lpnf-steps-li > li:not(:last-child)::after {
        left: 1.25rem;
        top: 100%;
        width: 2px;
        height: 1.5rem;
        transform-origin: top;
    }
}

@media (min-width: 768px) {
    .lpnf-din .lpnf-steps-li > li:not(:last-child)::after {
        left: 100%;
        top: 2rem;
        width: 1.5rem;
        height: 2px;
        transform-origin: left;
    }
}

/* Reveal in turn the first time the steps scroll into view (needs JS; without it everything is visible) */
.lpnf-din .js-reveal:not(.is-in) > li {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-din .js-reveal:not(.is-in) > li::after {
    transform: scale(0);
}

.lpnf-din .js-reveal.is-in > li {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-din .js-reveal.is-in > li::after {
    transition: transform .4s ease-out .35s;
}

.lpnf-din .js-reveal.is-in > li:nth-child(2) {
    transition-delay: .15s, .15s, 0s, 0s;
}

.lpnf-din .js-reveal.is-in > li:nth-child(3) {
    transition-delay: .3s, .3s, 0s, 0s;
}

.lpnf-din .js-reveal.is-in > li:nth-child(2)::after {
    transition-delay: .5s;
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-steps-li > li,
    .lpnf-din .lpnf-steps-li .lpnf-step-num,
    .lpnf-din .lpnf-step-icon {
        transition: none !important;
    }

    .lpnf-din .js-reveal:not(.is-in) > li {
        opacity: 1;
        transform: none;
    }

    .lpnf-din .js-reveal:not(.is-in) > li::after {
        transform: none;
    }
}

/* ═══ Director phone number by DIN: example export (same design as the LinkedIn finder) ═══ */
.lpnf-din .lpnf-sheet {
    margin-top: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 16px 40px rgba(13, 13, 20, .1);
    transition: box-shadow .25s, border-color .25s;
}

.lpnf-din .lpnf-sheet:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .06), 0 20px 48px rgba(13, 13, 20, .14);
}

.lpnf-din .lpnf-sheet-bar {
    justify-content: flex-start;
    gap: .9rem;
    padding: .8rem 1.1rem;
    background: linear-gradient(var(--surface-white), var(--surface-soft));
}

.lpnf-din .lpnf-sheet-bar .lpnf-badge {
    margin-left: auto;
}

/* Three window dots, in the theme tones */
.lpnf-din .lpnf-sheet-dots {
    display: inline-flex;
    gap: .35rem;
    flex-shrink: 0;
}

.lpnf-din .lpnf-sheet-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--neutral-200);
}

.lpnf-din .lpnf-sheet-dots i:nth-child(1) {
    background: var(--danger-mid);
    opacity: .75;
}

.lpnf-din .lpnf-sheet-dots i:nth-child(2) {
    background: var(--warning-mid);
    opacity: .85;
}

.lpnf-din .lpnf-sheet-dots i:nth-child(3) {
    background: var(--success-mid);
    opacity: .85;
}

.lpnf-din .lpnf-sheet-id {
    min-width: 0;
}

.lpnf-din .lpnf-sheet-title {
    font-size: .98rem;
}

.lpnf-din .lpnf-sheet-meta {
    margin-top: .1rem;
    font-size: .78rem;
}

.lpnf-din .lpnf-sheet-bar .lpnf-badge {
    background: var(--warning-soft);
    border: 1px solid var(--warning-light);
    color: var(--warning-dark);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(74, 57, 0, .08);
}

.lpnf-din .lpnf-sheet-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-200) transparent;
}

.lpnf-din .lpnf-sheet-table {
    font-size: .84rem;
}

.lpnf-din .lpnf-sheet-table th, .lpnf-din .lpnf-sheet-table td {
    padding: .55rem .85rem;
}

.lpnf-din .lpnf-sheet-table thead tr.lpnf-sheet-groups th {
    background: var(--primary-soft);
    color: var(--primary-hover);
    border-bottom: 1px solid var(--primary-light);
    border-right: 1px solid var(--primary-light);
}

.lpnf-din .lpnf-sheet-table thead th {
    font-size: .8rem;
}

.lpnf-din .lpnf-sheet-table tbody tr {
    transition: background .15s;
}

.lpnf-din .lpnf-sheet-table tbody tr:hover td {
    background: var(--primary-soft);
}

.lpnf-din .lpnf-sheet-table tbody td:first-child {
    font-weight: 700;
    color: var(--neutral-950);
}

/* Note under the table */
.lpnf-din .lpnf-exportnote {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-top: 1.25rem;
    padding: .9rem 1.2rem;
    background: var(--surface-soft);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .04);
}

.lpnf-din .lpnf-exportnote > i {
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--primary);
}

.lpnf-din .lpnf-exportnote .lpnf-sheet-note {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-700);
}

/* Reveal the sheet and the note the first time they scroll into view (needs JS) */
.lpnf-din .js-reveal.lpnf-sheet:not(.is-in),
.lpnf-din .js-reveal.lpnf-exportnote:not(.is-in) {
    opacity: 0;
    transform: translateY(12px);
}

.lpnf-din .js-reveal.lpnf-sheet.is-in {
    transition: opacity .5s ease-out, transform .5s ease-out, box-shadow .25s, border-color .25s;
}

.lpnf-din .js-reveal.lpnf-exportnote.is-in {
    transition: opacity .45s ease-out .15s, transform .45s ease-out .15s;
}

@media (max-width: 575.98px) {
    .lpnf-din .lpnf-sheet-bar {
        flex-wrap: wrap;
    }

    .lpnf-din .lpnf-sheet-dots {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-sheet,
    .lpnf-din .lpnf-sheet-table tbody tr {
        transition: none !important;
    }

    .lpnf-din .js-reveal.lpnf-sheet:not(.is-in),
    .lpnf-din .js-reveal.lpnf-exportnote:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}

/* ═══ Director phone number by DIN: ways to find director contact details (same design as the LinkedIn finder) ═══ */
.lpnf-din .lpnf-ways-grid {
    margin-top: 1.5rem;
    gap: 1.1rem;
}

.lpnf-din .lpnf-ways-grid .lpnf-card {
    padding: 1.25rem 1.3rem 1.3rem;
    gap: .55rem;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lpnf-din .lpnf-ways-grid .lpnf-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.lpnf-din .lpnf-way-top {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .2rem;
}

.lpnf-din .lpnf-way-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.4rem;
    transition: background .2s, color .2s, transform .2s;
}

.lpnf-din .lpnf-ways-grid .lpnf-card:hover .lpnf-way-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.lpnf-din .lpnf-way-top .lpnf-eyebrow {
    margin: 0;
    color: var(--primary-hover);
}

.lpnf-din .lpnf-ways-grid .lpnf-card h3 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
}

.lpnf-din .lpnf-ways-grid .lpnf-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

/* The "fact" line (billing / limits) as a green note */
.lpnf-din .lpnf-ways-grid .lpnf-card p.lpnf-fact {
    padding: .45rem .75rem;
    background: var(--success-soft);
    border: 1px solid var(--success-light);
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--success-dark);
}

/* List of per-click limits with check marks */
.lpnf-din .lpnf-ways-grid .lpnf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}

.lpnf-din .lpnf-ways-grid .lpnf-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--neutral-800);
}

.lpnf-din .lpnf-ways-grid .lpnf-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
    color: var(--success);
}

.lpnf-din .lpnf-ways-grid .lpnf-btn {
    margin-top: auto;
    transition: transform .15s, box-shadow .2s, background .2s;
    box-shadow: 0 4px 12px rgba(26, 111, 204, .25);
}

.lpnf-din .lpnf-ways-grid .lpnf-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(13, 74, 143, .32);
}

.lpnf-din .lpnf-ways-grid .lpnf-btn:active {
    transform: scale(.98);
}

.lpnf-din .lpnf-ways-grid .lpnf-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* API card: not live yet, so it reads as inactive */
.lpnf-din .lpnf-way-soon {
    background: var(--surface-soft);
    border-style: dashed;
    box-shadow: none;
}

.lpnf-din .lpnf-way-soon .lpnf-way-icon {
    background: var(--neutral-100);
    color: var(--neutral-600);
}

.lpnf-din .lpnf-way-soon .lpnf-badge {
    background: var(--warning-soft);
    border: 1px solid var(--warning-light);
    color: var(--warning-dark);
    font-weight: 700;
}

/* Reveal in turn the first time the cards scroll into view (needs JS) */
.lpnf-din .js-reveal.lpnf-ways-grid:not(.is-in) > .lpnf-card {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-din .js-reveal.lpnf-ways-grid.is-in > .lpnf-card {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-din .js-reveal.lpnf-ways-grid.is-in > .lpnf-card:nth-child(2) {
    transition-delay: .12s, .12s, 0s, 0s;
}

.lpnf-din .js-reveal.lpnf-ways-grid.is-in > .lpnf-card:nth-child(3) {
    transition-delay: .24s, .24s, 0s, 0s;
}

.lpnf-din .js-reveal.lpnf-ways-grid.is-in > .lpnf-card:nth-child(4) {
    transition-delay: .36s, .36s, 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-ways-grid .lpnf-card,
    .lpnf-din .lpnf-way-icon,
    .lpnf-din .lpnf-ways-grid .lpnf-btn {
        transition: none !important;
    }

    .lpnf-din .js-reveal.lpnf-ways-grid:not(.is-in) > .lpnf-card {
        opacity: 1;
        transform: none;
    }
}


/* ═══ Director phone number by DIN: Chrome extension on company-registry websites ═══ */
.lpnf-din [aria-labelledby="din-ext"] .lpnf-h2 {
    margin-bottom: .75rem;
}

.lpnf-din [aria-labelledby="din-ext"] .col-lg-7 > p {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--neutral-700);
}

/* Company page / Director page as two side-by-side cards */
.lpnf-din .lpnf-ext-modes {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin: 1.1rem 0;
}

@media (min-width: 768px) {
    .lpnf-din .lpnf-ext-modes {
        grid-template-columns: 1fr 1fr;
    }
}

.lpnf-din .lpnf-ext-mode {
    padding: 1.1rem 1.2rem 1.15rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lpnf-din .lpnf-ext-mode:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.lpnf-din .lpnf-ext-mode-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: .7rem;
    border-radius: 11px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.45rem;
    transition: background .2s, color .2s, transform .2s;
}

.lpnf-din .lpnf-ext-mode:hover .lpnf-ext-mode-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.lpnf-din .lpnf-ext-mode .lpnf-h3 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    line-height: 1.3;
}

.lpnf-din .lpnf-ext-mode p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

.lpnf-din .lpnf-ext-mode p strong {
    color: var(--neutral-950);
}

/* "Works on" line as a green note, the disclaimer as a quiet note */
.lpnf-din [aria-labelledby="din-ext"] .lpnf-fact {
    margin: 0 0 .75rem;
    padding: .55rem .9rem;
    background: var(--success-soft);
    border: 1px solid var(--success-light);
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--success-dark);
}

.lpnf-din [aria-labelledby="din-ext"] .lpnf-sheet-note {
    margin: 0;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--neutral-600);
}

/* The extension panel illustration */
.lpnf-din .lpnf-ext {
    max-width: 400px;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 16px 40px rgba(13, 13, 20, .12);
    transition: transform .25s, box-shadow .25s;
}

.lpnf-din .lpnf-ext:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .06), 0 22px 48px rgba(13, 13, 20, .16);
}

.lpnf-din .lpnf-ext-head {
    padding: 1rem 1.1rem;
}

.lpnf-din .lpnf-ext-head strong {
    font-size: 1rem;
    line-height: 1.3;
}

.lpnf-din .lpnf-ext-list li {
    padding: .7rem .5rem;
    margin: 0 -.5rem;
    border-radius: 10px;
    transition: background .15s;
}

.lpnf-din .lpnf-ext-list li:hover {
    background: var(--primary-soft);
}

.lpnf-din .lpnf-ext-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--primary-soft);
    font-size: 1.15rem;
    transition: background .2s, color .2s;
}

.lpnf-din .lpnf-ext-list li:hover i {
    background: var(--primary);
    color: #fff;
}

.lpnf-din .lpnf-ext-btn {
    box-shadow: 0 6px 18px rgba(26, 111, 204, .3);
    animation: lpnf-din-pulse 2.8s ease-in-out infinite;
}

@keyframes lpnf-din-pulse {
    0%, 100% {
        box-shadow: 0 6px 18px rgba(26, 111, 204, .3);
    }
    50% {
        box-shadow: 0 8px 26px rgba(26, 111, 204, .5);
    }
}

/* Reveal in turn the first time the blocks scroll into view (needs JS) */
.lpnf-din .js-reveal.lpnf-ext-modes:not(.is-in) > .lpnf-ext-mode,
.lpnf-din .js-reveal.lpnf-ext:not(.is-in) {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-din .js-reveal.lpnf-ext-modes.is-in > .lpnf-ext-mode {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-din .js-reveal.lpnf-ext-modes.is-in > .lpnf-ext-mode:nth-child(2) {
    transition-delay: .12s, .12s, 0s, 0s;
}

.lpnf-din .js-reveal.lpnf-ext.is-in {
    transition: opacity .5s ease-out .1s, transform .5s ease-out .1s, box-shadow .25s;
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-ext-mode,
    .lpnf-din .lpnf-ext-mode-icon,
    .lpnf-din .lpnf-ext,
    .lpnf-din .lpnf-ext-list li,
    .lpnf-din .lpnf-ext-list i {
        transition: none !important;
    }

    .lpnf-din .lpnf-ext-btn {
        animation: none;
    }

    .lpnf-din .js-reveal.lpnf-ext-modes:not(.is-in) > .lpnf-ext-mode,
    .lpnf-din .js-reveal.lpnf-ext:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}

/* ═══ Director phone number by DIN: Pay only when we find a mobile (same design as the LinkedIn finder) ═══ */
.lpnf-din .lpnf-pay-grid {
    margin-top: 1.5rem;
    gap: 1.1rem;
}

.lpnf-din .lpnf-pay-grid .lpnf-card {
    position: relative;
    padding: 1.25rem 1.3rem 1.3rem;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

/* A thin accent bar along the top: green when a credit is used, blue when it is free */
.lpnf-din .lpnf-pay-grid .lpnf-card::before {
    content: "";
    position: absolute;
    left: 1.3rem;
    right: 1.3rem;
    top: 0;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--success);
}

.lpnf-din .lpnf-pay-grid .lpnf-pay-free::before {
    background: var(--primary);
}

.lpnf-din .lpnf-pay-grid .lpnf-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.lpnf-din .lpnf-pay-grid .lpnf-credit {
    margin-bottom: .35rem;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--success);
}

.lpnf-din .lpnf-pay-grid .lpnf-credit.lpnf-zero {
    color: var(--primary);
}

.lpnf-din .lpnf-pay-grid .lpnf-card h3 {
    margin: 0 0 .3rem;
    font-size: 1.05rem;
    line-height: 1.3;
}

.lpnf-din .lpnf-pay-grid .lpnf-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

/* The two billing notes as cards with an icon */
.lpnf-din .lpnf-pay-note {
    position: relative;
    margin-top: 1.1rem;
    padding: 1.15rem 1.4rem 1.2rem 4.2rem;
    border: 1px solid var(--primary-light);
    border-left: 4px solid var(--primary);
    border-radius: 14px;
    background: var(--primary-soft);
    box-shadow: 0 1px 2px rgba(26, 111, 204, .06), 0 6px 16px rgba(26, 111, 204, .08);
    transition: transform .2s, box-shadow .2s;
}

.lpnf-din .lpnf-pay-note:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(26, 111, 204, .08), 0 12px 26px rgba(26, 111, 204, .12);
}

.lpnf-din .lpnf-pay-note-icon {
    position: absolute;
    left: 1.2rem;
    top: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(26, 111, 204, .3);
}

.lpnf-din .lpnf-pay-note h3 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    line-height: 1.35;
}

.lpnf-din .lpnf-pay-note p {
    margin: 0 0 .5rem;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-700);
}

.lpnf-din .lpnf-pay-note p strong {
    color: var(--neutral-950);
}

.lpnf-din .lpnf-pay-note .lpnf-list {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    display: grid;
    gap: .3rem;
}

.lpnf-din .lpnf-pay-note .lpnf-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--neutral-800);
}

.lpnf-din .lpnf-pay-note .lpnf-list li::before {
    content: "\2022";
    position: absolute;
    left: .35rem;
    top: 0;
    font-weight: 800;
    color: var(--primary);
}

/* Buttons under the section */
.lpnf-din [aria-labelledby="din-pay"] .lpnf-actions {
    margin-top: 1.5rem;
}

.lpnf-din [aria-labelledby="din-pay"] .lpnf-btn {
    transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}

.lpnf-din [aria-labelledby="din-pay"] .lpnf-btn-primary {
    box-shadow: 0 6px 18px rgba(26, 111, 204, .3);
}

.lpnf-din [aria-labelledby="din-pay"] .lpnf-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(13, 74, 143, .36);
}

.lpnf-din [aria-labelledby="din-pay"] .lpnf-btn-outline {
    box-shadow: 0 2px 8px rgba(13, 13, 20, .06);
}

.lpnf-din [aria-labelledby="din-pay"] .lpnf-btn-outline:hover {
    transform: translateY(-1px);
    background: var(--primary-soft);
    border-color: var(--primary-mid);
}

.lpnf-din [aria-labelledby="din-pay"] .lpnf-btn:active {
    transform: scale(.98);
}

.lpnf-din [aria-labelledby="din-pay"] .lpnf-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* Reveal in turn the first time each block scrolls into view (needs JS) */
.lpnf-din .js-reveal.lpnf-pay-grid:not(.is-in) > .lpnf-card,
.lpnf-din .js-reveal.lpnf-pay-note:not(.is-in) {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-din .js-reveal.lpnf-pay-grid.is-in > .lpnf-card {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-din .js-reveal.lpnf-pay-grid.is-in > .lpnf-card:nth-child(2) {
    transition-delay: .1s, .1s, 0s, 0s;
}

.lpnf-din .js-reveal.lpnf-pay-grid.is-in > .lpnf-card:nth-child(3) {
    transition-delay: .2s, .2s, 0s, 0s;
}

.lpnf-din .js-reveal.lpnf-pay-grid.is-in > .lpnf-card:nth-child(4) {
    transition-delay: .3s, .3s, 0s, 0s;
}

.lpnf-din .js-reveal.lpnf-pay-note.is-in {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s;
}

@media (max-width: 575.98px) {
    .lpnf-din .lpnf-pay-note {
        padding-left: 1.25rem;
        padding-top: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-pay-grid .lpnf-card,
    .lpnf-din .lpnf-pay-note,
    .lpnf-din [aria-labelledby="din-pay"] .lpnf-btn {
        transition: none !important;
    }

    .lpnf-din .js-reveal.lpnf-pay-grid:not(.is-in) > .lpnf-card,
    .lpnf-din .js-reveal.lpnf-pay-note:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}

/* ═══ Director phone number by DIN: What happens after you enrich a DIN (results table; same design as the LinkedIn finder) ═══ */
.lpnf-din .lpnf-states-wrap {
    margin-top: 1.5rem;
}

.lpnf-din .lpnf-states {
    font-size: .88rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .lpnf-din .lpnf-states-wrap {
        overflow: clip;
        border: 1px solid var(--neutral-200);
        border-radius: 16px;
        background: var(--surface-white);
        box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 36px rgba(13, 13, 20, .09);
    }

    .lpnf-din .lpnf-states {
        border-collapse: separate;
        border-spacing: 0;
    }

    .lpnf-din .lpnf-states th,
    .lpnf-din .lpnf-states td {
        padding: .8rem 1.1rem;
        border: 0;
        border-bottom: 1px solid var(--neutral-100);
    }

    .lpnf-din .lpnf-states tbody tr:last-child th,
    .lpnf-din .lpnf-states tbody tr:last-child td {
        border-bottom: 0;
    }

    .lpnf-din .lpnf-states thead th {
        font-size: .78rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--theme-border);
    }

    .lpnf-din .lpnf-states tbody th {
        position: relative;
        padding-left: 2.3rem;
        font-size: .9rem;
        color: var(--neutral-950);
    }

    .lpnf-din .lpnf-states tbody tr {
        transition: background .15s;
    }

    .lpnf-din .lpnf-states tbody tr:hover th,
    .lpnf-din .lpnf-states tbody tr:hover td {
        background: var(--primary-soft);
    }
}

/* Status dot before each result name: green = a credit is used, blue = free or already paid */
.lpnf-din .lpnf-states tbody th::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: .55rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 111, 204, .15);
}

@media (min-width: 768px) {
    .lpnf-din .lpnf-states tbody th::before {
        position: absolute;
        left: 1.1rem;
        top: 1.15rem;
        margin: 0;
    }
}

.lpnf-din .lpnf-states tr.is-paid th::before {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(30, 125, 68, .16);
}

.lpnf-din .lpnf-states tr.is-kept th::before {
    background: var(--warning-mid);
    box-shadow: 0 0 0 3px rgba(232, 160, 32, .2);
}

/* The billing column carries the key information */
.lpnf-din .lpnf-states tbody td:last-child {
    font-weight: 600;
    color: var(--neutral-900);
}

.lpnf-din .lpnf-states tr.is-paid td:last-child {
    color: var(--success-dark);
}

/* Phones: the stacked cards get shadow and a left status edge */
@media (max-width: 767.98px) {
    .lpnf-din .lpnf-states tr {
        box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .05);
    }
}

/* Reveal the rows in turn the first time the table scrolls into view (needs JS) */
.lpnf-din .js-reveal.lpnf-states-wrap:not(.is-in) .lpnf-states tbody tr {
    opacity: 0;
    transform: translateY(8px);
}

.lpnf-din .js-reveal.lpnf-states-wrap.is-in .lpnf-states tbody tr {
    transition: opacity .4s ease-out, transform .4s ease-out, background .15s;
}

.lpnf-din .js-reveal.lpnf-states-wrap.is-in .lpnf-states tbody tr:nth-child(2) { transition-delay: .08s, .08s, 0s; }
.lpnf-din .js-reveal.lpnf-states-wrap.is-in .lpnf-states tbody tr:nth-child(3) { transition-delay: .16s, .16s, 0s; }
.lpnf-din .js-reveal.lpnf-states-wrap.is-in .lpnf-states tbody tr:nth-child(4) { transition-delay: .24s, .24s, 0s; }
.lpnf-din .js-reveal.lpnf-states-wrap.is-in .lpnf-states tbody tr:nth-child(5) { transition-delay: .32s, .32s, 0s; }

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-states tbody tr {
        transition: none !important;
    }

    .lpnf-din .js-reveal.lpnf-states-wrap:not(.is-in) .lpnf-states tbody tr {
        opacity: 1;
        transform: none;
    }
}

.lpnf-din .lpnf-states tbody td:last-child {
    font-weight: 500;
}

.lpnf-din .lpnf-states tr.is-paid td:last-child {
    color: var(--neutral-800);
}

/* ═══ Director phone number by DIN: Data quality and verification (same design as the LinkedIn finder) ═══ */
.lpnf-din .lpnf-dq {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-top: 1.5rem;
    padding: 1.5rem 1.6rem;
    background: linear-gradient(160deg, var(--primary-soft), var(--surface-white) 130%);
    border: 1px solid var(--neutral-200);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 10px 28px rgba(13, 13, 20, .07);
    transition: box-shadow .25s, border-color .25s;
}

.lpnf-din .lpnf-dq:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 16px 36px rgba(13, 13, 20, .1);
}

.lpnf-din .lpnf-dq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    font-size: 1.9rem;
    box-shadow: 0 4px 12px rgba(26, 111, 204, .3);
}

.lpnf-din .lpnf-dq-body {
    min-width: 0;
    flex: 1;
}

.lpnf-din .lpnf-dq .lpnf-sub {
    max-width: 760px;
    margin: 0 0 1rem;
}

/* A row of linked stage dots that light up when the block scrolls into view (decorative) */
.lpnf-din .lpnf-dq-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 360px;
    margin: 0 0 1.1rem;
}

.lpnf-din .lpnf-dq-track::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--primary-light);
}

.lpnf-din .lpnf-dq-track i {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.lpnf-din .lpnf-dq-link {
    margin: 0;
}

.lpnf-din .lpnf-dq-link .lpnf-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    background: var(--surface-white);
    border: 1px solid var(--primary-light);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .06);
    font-size: .9rem;
    text-decoration: none;
    transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.lpnf-din .lpnf-dq-link .lpnf-link span {
    display: inline-block;
    transition: transform .2s;
}

.lpnf-din .lpnf-dq-link .lpnf-link:hover {
    transform: translateY(-1px);
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(26, 111, 204, .28);
}

.lpnf-din .lpnf-dq-link .lpnf-link:hover span {
    transform: translateX(4px);
}

.lpnf-din .lpnf-dq-link .lpnf-link:active {
    transform: scale(.97);
}

/* Reveal: the card fades up, then the dots light up one after another (needs JS) */
.lpnf-din .js-reveal.lpnf-dq:not(.is-in) {
    opacity: 0;
    transform: translateY(12px);
}

.lpnf-din .js-reveal.lpnf-dq.is-in {
    transition: opacity .5s ease-out, transform .5s ease-out, box-shadow .25s, border-color .25s;
}

.lpnf-din .js-reveal.lpnf-dq:not(.is-in) .lpnf-dq-track i {
    transform: scale(0);
}

.lpnf-din .js-reveal.lpnf-dq.is-in .lpnf-dq-track i {
    transition: transform .3s ease-out;
}

.lpnf-din .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(1) { transition-delay: .3s; }
.lpnf-din .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(2) { transition-delay: .4s; }
.lpnf-din .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(3) { transition-delay: .5s; }
.lpnf-din .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(4) { transition-delay: .6s; }
.lpnf-din .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(5) { transition-delay: .7s; }
.lpnf-din .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(6) { transition-delay: .8s; }
.lpnf-din .js-reveal.lpnf-dq.is-in .lpnf-dq-track i:nth-child(7) { transition-delay: .9s; }

@media (max-width: 575.98px) {
    .lpnf-din .lpnf-dq {
        flex-direction: column;
        gap: 1rem;
    }

    .lpnf-din .lpnf-dq-track {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-dq,
    .lpnf-din .lpnf-dq-link .lpnf-link,
    .lpnf-din .lpnf-dq-link .lpnf-link span {
        transition: none !important;
    }

    .lpnf-din .js-reveal.lpnf-dq:not(.is-in),
    .lpnf-din .js-reveal.lpnf-dq:not(.is-in) .lpnf-dq-track i {
        opacity: 1;
        transform: none;
    }

    .lpnf-din .lpnf-dq-track i {
        transition: none !important;
    }
}

/* ═══ Director phone number by DIN: Who uses director contact lookup (same design as the LinkedIn finder) ═══ */
.lpnf-din .lpnf-use-grid {
    margin-top: 1.5rem;
    gap: 1.1rem;
}

.lpnf-din .lpnf-use-grid .lpnf-card {
    padding: 1.2rem 1.3rem 1.3rem;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lpnf-din .lpnf-use-grid .lpnf-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.lpnf-din .lpnf-use-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: .8rem;
    border-radius: 11px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.5rem;
    transition: background .2s, color .2s, transform .2s;
}

.lpnf-din .lpnf-use-grid .lpnf-card:hover .lpnf-use-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.lpnf-din .lpnf-use-grid .lpnf-card h3 {
    margin: 0 0 .35rem;
    font-size: 1.1rem;
    line-height: 1.3;
}

.lpnf-din .lpnf-use-grid .lpnf-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

/* Reveal in turn the first time the cards scroll into view (needs JS) */
.lpnf-din .js-reveal.lpnf-use-grid:not(.is-in) > .lpnf-card {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-din .js-reveal.lpnf-use-grid.is-in > .lpnf-card {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-din .js-reveal.lpnf-use-grid.is-in > .lpnf-card:nth-child(2) { transition-delay: .1s, .1s, 0s, 0s; }
.lpnf-din .js-reveal.lpnf-use-grid.is-in > .lpnf-card:nth-child(3) { transition-delay: .2s, .2s, 0s, 0s; }
.lpnf-din .js-reveal.lpnf-use-grid.is-in > .lpnf-card:nth-child(4) { transition-delay: .3s, .3s, 0s, 0s; }

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-use-grid .lpnf-card,
    .lpnf-din .lpnf-use-icon {
        transition: none !important;
    }

    .lpnf-din .js-reveal.lpnf-use-grid:not(.is-in) > .lpnf-card {
        opacity: 1;
        transform: none;
    }
}

.lpnf-din .js-reveal.lpnf-use-grid.is-in > .lpnf-card:nth-child(5) { transition-delay: .4s, .4s, 0s, 0s; }

/* The illustrative-examples note under the cards */
.lpnf-din .lpnf-use-grid + .lpnf-sheet-note {
    margin: 1.25rem 0 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--neutral-600);
}

/* ═══ Director phone number by DIN: Where can you find a DIN (link cards; same design as the LinkedIn finder) ═══ */
.lpnf-din .lpnf-res-grid {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: .8rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .lpnf-din .lpnf-res-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lpnf-din .lpnf-res-grid > li {
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .04);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lpnf-din .lpnf-res-grid > li:hover {
    transform: translateY(-2px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 10px 22px rgba(13, 13, 20, .08);
}

/* The whole card is the link; a round arrow marks it as a destination */
.lpnf-din .lpnf-res-grid .lpnf-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
    padding: .95rem 1.1rem;
    border-radius: 14px;
    font-size: .92rem;
    line-height: 1.45;
    text-decoration: none;
    color: var(--neutral-950);
}

.lpnf-din .lpnf-res-grid .lpnf-link::after {
    content: "\2192";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--neutral-200);
    border-radius: 50%;
    background: var(--surface-white);
    box-shadow: 0 1px 2px rgba(13, 13, 20, .06);
    color: var(--primary);
    font-size: .95rem;
    font-weight: 700;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.lpnf-din .lpnf-res-grid > li:hover .lpnf-link {
    color: var(--primary-hover);
}

.lpnf-din .lpnf-res-grid > li:hover .lpnf-link::after {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateX(3px);
}

.lpnf-din .lpnf-res-grid .lpnf-link:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Reveal in turn the first time the list scrolls into view (needs JS) */
.lpnf-din .js-reveal.lpnf-res-grid:not(.is-in) > li {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-din .js-reveal.lpnf-res-grid.is-in > li {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-din .js-reveal.lpnf-res-grid.is-in > li:nth-child(even) {
    transition-delay: .08s, .08s, 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-res-grid > li,
    .lpnf-din .lpnf-res-grid .lpnf-link::after {
        transition: none !important;
    }

    .lpnf-din .js-reveal.lpnf-res-grid:not(.is-in) > li {
        opacity: 1;
        transform: none;
    }
}

/* The MCA note is plain text with an inline link, so it is a full-width note, not a link card */
.lpnf-din .lpnf-res-grid > li.lpnf-res-note {
    grid-column: 1 / -1;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .9rem 1.2rem;
    background: var(--surface-soft);
    font-size: .9rem;
    line-height: 1.65;
    color: var(--neutral-700);
}

.lpnf-din .lpnf-res-grid > li.lpnf-res-note > i {
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--primary);
}

.lpnf-din .lpnf-res-grid > li.lpnf-res-note .lpnf-link {
    display: inline;
    height: auto;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    text-decoration: underline;
    color: var(--primary);
}

.lpnf-din .lpnf-res-grid > li.lpnf-res-note .lpnf-link::after {
    content: none;
}

.lpnf-din [aria-labelledby="din-vs"] .container-xl > p {
    max-width: 760px;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--neutral-600);
}

/* ═══ Director phone number by DIN: Privacy, compliance & security (same design as the LinkedIn finder) ═══ */
.lpnf-din .lpnf-pgrid {
    align-items: stretch;
    gap: 1.1rem;
}

.lpnf-din .lpnf-pgrid-2 {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.lpnf-din .lpnf-pcard {
    padding: 1.25rem 1.35rem 1.3rem;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 6px 16px rgba(13, 13, 20, .05);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lpnf-din .lpnf-pcard:hover {
    transform: translateY(-3px);
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 14px 28px rgba(13, 13, 20, .09);
}

.lpnf-din .lpnf-pcard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: .75rem;
    border-radius: 11px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.45rem;
    transition: background .2s, color .2s, transform .2s;
}

.lpnf-din .lpnf-pcard:hover .lpnf-pcard-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

.lpnf-din .lpnf-pcard-title {
    font-size: 1.1rem;
    line-height: 1.3;
}

.lpnf-din .lpnf-pcard p {
    font-size: .88rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

.lpnf-din .lpnf-pcard .lpnf-list {
    list-style: none;
    padding: 0;
    margin: 0 0 .9rem;
    display: grid;
    gap: .3rem;
}

.lpnf-din .lpnf-pcard .lpnf-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--neutral-800);
}

.lpnf-din .lpnf-pcard .lpnf-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
    color: var(--success);
}

.lpnf-din .lpnf-protect-head {
    margin-top: 0;
}

.lpnf-din .lpnf-protect-head + p {
    max-width: 820px;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

/* ISO block: the certificate details in a tinted panel */
.lpnf-din .lpnf-iso-card {
    margin-top: 1.1rem;
    background: linear-gradient(160deg, var(--primary-soft), var(--surface-white) 130%);
}

.lpnf-din .lpnf-iso-card:hover {
    transform: none;
}

.lpnf-din .lpnf-iso-dl dd {
    font-size: .9rem;
    font-weight: 600;
}

/* Customer responsibility note */
.lpnf-din .lpnf-protect-foot {
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    background: var(--theme-color);
    border: 1px solid var(--theme-hover);
    border-left: 4px solid var(--theme-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(74, 57, 0, .06), 0 6px 16px rgba(74, 57, 0, .08);
    font-size: .88rem;
    line-height: 1.65;
    color: var(--theme-text);
}

/* Policy links as pills */
.lpnf-din .lpnf-policy-links {
    gap: .5rem;
    margin: 0;
}

.lpnf-din .lpnf-policy-links .lpnf-link {
    display: inline-flex;
    align-items: center;
    padding: .4rem .95rem;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .05);
    font-size: .84rem;
    text-decoration: none;
    transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.lpnf-din .lpnf-policy-links .lpnf-link:hover {
    transform: translateY(-1px);
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(26, 111, 204, .28);
}

.lpnf-din .lpnf-policy-links .lpnf-link:active {
    transform: scale(.97);
}

/* Reveal in turn the first time the cards scroll into view (needs JS) */
.lpnf-din .js-reveal.lpnf-pgrid:not(.is-in) > .lpnf-pcard,
.lpnf-din .js-reveal.lpnf-iso-card:not(.is-in) {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-din .js-reveal.lpnf-pgrid.is-in > .lpnf-pcard {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-din .js-reveal.lpnf-pgrid.is-in > .lpnf-pcard:nth-child(2) {
    transition-delay: .12s, .12s, 0s, 0s;
}

.lpnf-din .js-reveal.lpnf-pgrid.is-in > .lpnf-pcard:nth-child(3) {
    transition-delay: .24s, .24s, 0s, 0s;
}

.lpnf-din .js-reveal.lpnf-iso-card.is-in {
    transition: opacity .45s ease-out, transform .45s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-pcard,
    .lpnf-din .lpnf-pcard-icon,
    .lpnf-din .lpnf-policy-links .lpnf-link {
        transition: none !important;
    }

    .lpnf-din .js-reveal.lpnf-pgrid:not(.is-in) > .lpnf-pcard,
    .lpnf-din .js-reveal.lpnf-iso-card:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}

/* ═══ Director phone number by DIN: FAQ, two-column accordion (same design as the LinkedIn finder) ═══ */
.lpnf-din .lpnf-faq-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    align-items: start;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .lpnf-din .lpnf-faq-2col {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lpnf-din .lpnf-faq-2col .lpnf-faq-item {
    margin: 0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 13, 20, .04), 0 4px 12px rgba(13, 13, 20, .04);
    transition: box-shadow .2s, border-color .2s, transform .2s;
}

.lpnf-din .lpnf-faq-2col .lpnf-faq-item:hover {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(13, 13, 20, .05), 0 10px 22px rgba(13, 13, 20, .08);
    transform: translateY(-2px);
}

/* An open answer takes the full row, so there is no empty space beside it */
.lpnf-din .lpnf-faq-2col .lpnf-faq-item:has(.lpnf-faq-btn[aria-expanded="true"]) {
    grid-column: 1 / -1;
    border-color: var(--primary-mid);
}

.lpnf-din .lpnf-faq-2col .lpnf-faq-btn {
    padding: .95rem 1.1rem;
    font-size: .96rem;
    line-height: 1.4;
    border-radius: 14px;
}

/* Circular chevron toggle, filled blue while open */
.lpnf-din .lpnf-faq-2col .lpnf-faq-btn i {
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border: 1px solid var(--neutral-200);
    border-radius: 50%;
    background: var(--surface-white);
    box-shadow: 0 1px 2px rgba(13, 13, 20, .06);
    color: var(--neutral-600);
    font-size: 1.15rem;
    transition: transform .2s, background .2s, border-color .2s, color .2s;
}

.lpnf-din .lpnf-faq-2col.is-enhanced .lpnf-faq-btn i {
    display: inline-flex;
}

.lpnf-din .lpnf-faq-2col .lpnf-faq-btn:hover i {
    background: var(--primary-soft);
    border-color: var(--primary-mid);
    color: var(--primary);
}

.lpnf-din .lpnf-faq-2col .lpnf-faq-btn[aria-expanded="true"] i {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.lpnf-din .lpnf-faq-2col .lpnf-faq-a {
    padding: 0 1.1rem 1.1rem;
}

.lpnf-din .lpnf-faq-2col .lpnf-faq-a:not([hidden]) {
    animation: lpnf-li-in .25s ease-out both;
}

.lpnf-din .lpnf-faq-2col .lpnf-faq-a p {
    margin: 0 0 .5rem;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--neutral-700);
}

.lpnf-din .lpnf-faq-2col .lpnf-faq-a p:last-child {
    margin-bottom: 0;
}

/* Reveal in turn the first time the list scrolls into view (needs JS) */
.lpnf-din .js-reveal.lpnf-faq-2col:not(.is-in) > .lpnf-faq-item {
    opacity: 0;
    transform: translateY(10px);
}

.lpnf-din .js-reveal.lpnf-faq-2col.is-in > .lpnf-faq-item {
    transition: opacity .45s ease-out, transform .45s ease-out, box-shadow .2s, border-color .2s;
}

.lpnf-din .js-reveal.lpnf-faq-2col.is-in > .lpnf-faq-item:nth-child(even) {
    transition-delay: .08s, .08s, 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-faq-2col .lpnf-faq-item,
    .lpnf-din .lpnf-faq-2col .lpnf-faq-btn i {
        transition: none !important;
    }

    .lpnf-din .lpnf-faq-2col .lpnf-faq-a:not([hidden]) {
        animation: none;
    }

    .lpnf-din .js-reveal.lpnf-faq-2col:not(.is-in) > .lpnf-faq-item {
        opacity: 1;
        transform: none;
    }
}

/* ═══ Director phone number by DIN: "Didn't find the contact you need?" cross-link card (same design as the LinkedIn finder) ═══ */
.lpnf-din .lpnf-cross {
    position: relative;
    gap: 1.1rem 1.25rem;
    padding: 1.2rem 1.4rem;
    background: var(--primary-soft);
    border: 1px solid var(--primary-light);
    border-left: 4px solid var(--primary);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(26, 111, 204, .06), 0 8px 22px rgba(26, 111, 204, .1);
    transition: transform .2s, box-shadow .2s;
}

.lpnf-din .lpnf-cross:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(26, 111, 204, .08), 0 14px 30px rgba(26, 111, 204, .15);
}

.lpnf-din .lpnf-cross-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 4px 12px rgba(26, 111, 204, .3);
}

.lpnf-din .lpnf-cross-text {
    flex: 1;
    min-width: 0;
}

.lpnf-din .lpnf-cross-title {
    font-size: 1.1rem;
    line-height: 1.3;
}

.lpnf-din .lpnf-cross p {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--neutral-700);
}

.lpnf-din .lpnf-cross .lpnf-cross-sub {
    font-size: .84rem;
    color: var(--neutral-600);
}

.lpnf-din .lpnf-cross .lpnf-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 18px rgba(26, 111, 204, .3);
    transition: transform .15s, box-shadow .2s, background .2s;
}

.lpnf-din .lpnf-cross .lpnf-btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(13, 74, 143, .36);
}

.lpnf-din .lpnf-cross .lpnf-btn:active {
    transform: scale(.98);
}

.lpnf-din .lpnf-cross .lpnf-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* Reveal the card the first time it scrolls into view (needs JS) */
.lpnf-din .js-reveal.lpnf-cross:not(.is-in) {
    opacity: 0;
    transform: translateY(12px);
}

.lpnf-din .js-reveal.lpnf-cross.is-in {
    transition: opacity .5s ease-out, transform .5s ease-out, box-shadow .2s;
}

@media (max-width: 767.98px) {
    .lpnf-din .lpnf-cross {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-cross,
    .lpnf-din .lpnf-cross .lpnf-btn {
        transition: none !important;
    }

    .lpnf-din .js-reveal.lpnf-cross:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}

/* ═══ Director phone number by DIN: final CTA banner (same design as the LinkedIn finder) ═══ */
.lpnf-din .lpnf-final {
    padding: 2rem 0 3.5rem;
    background: var(--surface-white);
    border-top: 0;
}

.lpnf-din .lpnf-banner {
    padding: 2.5rem 1.5rem 2.25rem;
    text-align: center;
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-light-color) 55%, var(--theme-hover) 140%);
    border: 1px solid var(--theme-hover);
    border-radius: 22px;
    box-shadow: 0 2px 4px rgba(74, 57, 0, .06), 0 16px 40px rgba(201, 160, 0, .18);
}

.lpnf-din .lpnf-banner .lpnf-h2 {
    margin: 0 0 .5rem;
    color: var(--theme-text);
}

.lpnf-din .lpnf-banner .lpnf-sub {
    margin: 0 auto 1.4rem;
    color: var(--neutral-800);
}

/* Form in a raised white card */
.lpnf-din .lpnf-banner .lpnf-form {
    max-width: 640px;
    margin: 0 auto 1rem;
    padding: 1rem 1.1rem 1.1rem;
    text-align: left;
    background: var(--surface-white);
    border: 1px solid var(--neutral-200);
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(74, 57, 0, .05), 0 12px 32px rgba(74, 57, 0, .12);
    transition: box-shadow .25s, border-color .25s;
}

.lpnf-din .lpnf-banner .lpnf-form:focus-within {
    border-color: var(--primary-mid);
    box-shadow: 0 2px 4px rgba(26, 111, 204, .08), 0 14px 36px rgba(26, 111, 204, .18);
}

.lpnf-din .lpnf-banner .lpnf-label {
    margin-bottom: .4rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--neutral-800);
}

.lpnf-din .lpnf-banner .lpnf-input {
    transition: border-color .2s, box-shadow .2s;
}

.lpnf-din .lpnf-banner .lpnf-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 111, 204, .18);
}

.lpnf-din .lpnf-banner .lpnf-form-row .lpnf-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* "No Mobile, No Charge" as a green pill */
.lpnf-din .lpnf-banner .lpnf-billing {
    display: inline-flex;
    justify-content: center;
    margin: 0 0 1.1rem;
    padding: .35rem .9rem;
    background: var(--success-soft);
    border: 1px solid var(--success-light);
    border-radius: 999px;
    font-size: .88rem;
}

/* Buttons */
.lpnf-din .lpnf-banner .lpnf-btn {
    transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}

.lpnf-din .lpnf-banner .lpnf-btn-primary {
    box-shadow: 0 6px 18px rgba(26, 111, 204, .3);
}

.lpnf-din .lpnf-banner .lpnf-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(13, 74, 143, .36);
}

.lpnf-din .lpnf-banner .lpnf-btn-outline {
    box-shadow: 0 2px 8px rgba(74, 57, 0, .08);
}

.lpnf-din .lpnf-banner .lpnf-btn-outline:hover {
    transform: translateY(-1px);
    background: var(--primary-soft);
    border-color: var(--primary-mid);
}

.lpnf-din .lpnf-banner .lpnf-btn:active {
    transform: scale(.98);
}

.lpnf-din .lpnf-banner .lpnf-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* Reveal the banner the first time it scrolls into view (needs JS) */
.lpnf-din .js-reveal.lpnf-banner:not(.is-in) {
    opacity: 0;
    transform: translateY(12px);
}

.lpnf-din .js-reveal.lpnf-banner.is-in {
    transition: opacity .5s ease-out, transform .5s ease-out;
}

@media (max-width: 575.98px) {
    .lpnf-din .lpnf-banner {
        padding: 2rem 1rem 1.75rem;
    }

    .lpnf-din .lpnf-banner .lpnf-form-row {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-banner .lpnf-btn,
    .lpnf-din .lpnf-banner .lpnf-form,
    .lpnf-din .lpnf-banner .lpnf-input {
        transition: none !important;
    }

    .lpnf-din .js-reveal.lpnf-banner:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}

/* Final CTA banner: match the custom lists page banner (gradient, drifting circles, spacing, heading size) */
.lpnf-din .lpnf-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 2.75rem 1.5rem 2.25rem;
}

.lpnf-din .lpnf-banner::before,
.lpnf-din .lpnf-banner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: var(--theme-hover);
    opacity: .55;
    animation: clp-drift 12s ease-in-out infinite alternate;
}

.lpnf-din .lpnf-banner::before {
    width: 280px;
    height: 280px;
    top: -110px;
    left: -70px;
}

.lpnf-din .lpnf-banner::after {
    width: 220px;
    height: 220px;
    right: -60px;
    bottom: -100px;
    animation-delay: -6s;
}

.lpnf-din .lpnf-banner .lpnf-h2 {
    margin: 0 0 .6rem;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}

.lpnf-din .lpnf-banner .lpnf-sub {
    max-width: 640px;
    font-size: 1.02rem;
}

@media (min-width: 768px) {
    .lpnf-din .lpnf-banner {
        padding: 3.25rem 2rem 2.5rem;
    }
}

@media (max-width: 575.98px) {
    .lpnf-din .lpnf-banner {
        padding: 2.25rem 1rem 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpnf-din .lpnf-banner::before,
    .lpnf-din .lpnf-banner::after {
        animation: none;
    }
}

/* Final CTA banner, compact: smaller type and padding; two columns on desktop (message left, form + buttons right) */
.lpnf-din .lpnf-final {
    padding: 1.25rem 0 2.5rem;
}

.lpnf-din .lpnf-banner,
.lpnf-din .lpnf-banner {
    padding: 1.75rem 1.5rem 1.6rem;
    border-radius: 18px;
}

.lpnf-din .lpnf-banner .lpnf-h2 {
    margin: 0 0 .4rem;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    line-height: 1.2;
}

.lpnf-din .lpnf-banner .lpnf-sub {
    max-width: 520px;
    margin: 0 auto 1rem;
    font-size: .94rem;
    line-height: 1.6;
}

.lpnf-din .lpnf-banner .lpnf-form {
    max-width: 560px;
    margin: 0 auto .75rem;
    padding: .75rem .85rem .85rem;
    border-radius: 14px;
}

.lpnf-din .lpnf-banner .lpnf-label {
    margin-bottom: .3rem;
    font-size: .76rem;
}

.lpnf-din .lpnf-banner .lpnf-input,
.lpnf-din .lpnf-banner .lpnf-form-row .lpnf-btn {
    min-height: 42px;
}

.lpnf-din .lpnf-banner .lpnf-form-row .lpnf-btn {
    padding-top: .45rem;
    padding-bottom: .45rem;
    font-size: .92rem;
}

.lpnf-din .lpnf-banner .lpnf-billing {
    margin: 0 0 .75rem;
    padding: .25rem .8rem;
    font-size: .82rem;
}

.lpnf-din .lpnf-banner .lpnf-secondary .lpnf-btn {
    min-height: 38px;
    padding: .4rem .9rem;
    font-size: .86rem;
}

.lpnf-din .lpnf-banner .lpnf-secondary {
    gap: .5rem;
    margin: 0;
}

@media (min-width: 992px) {
    .lpnf-din .lpnf-banner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        grid-template-areas:
            "title form"
            "sub   form"
            "bill  btns";
        column-gap: 2.5rem;
        row-gap: 0;
        align-items: center;
        padding: 1.9rem 2.25rem;
        text-align: left;
    }

    .lpnf-din .lpnf-banner .lpnf-h2 {
        grid-area: title;
        align-self: end;
    }

    .lpnf-din .lpnf-banner .lpnf-sub {
        grid-area: sub;
        margin: 0 0 .9rem;
        align-self: start;
    }

    .lpnf-din .lpnf-banner .lpnf-form {
        grid-area: form;
        width: 100%;
        max-width: none;
        margin: 0 0 .7rem;
    }

    .lpnf-din .lpnf-banner .lpnf-billing {
        grid-area: bill;
        justify-self: start;
        margin: 0;
    }

    .lpnf-din .lpnf-banner .lpnf-secondary {
        grid-area: btns;
        justify-content: flex-end;
    }
}

@media (max-width: 575.98px) {
    .lpnf-din .lpnf-banner {
        padding: 1.5rem 1rem 1.35rem;
    }
}


@media (min-width: 992px) {
    .lpnf-din .lpnf-final .lpnf-banner .lpnf-h2,
    .lpnf-din .lpnf-final .lpnf-banner .lpnf-sub {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }
}