/* ============================================
   Product Page v2 TNT — shared template stylesheet
   --------------------------------------------------
   ONE source of truth for all four product pages
   (Email, Calendar, Scheduler, Notetaker).

   Templates that consume these styles:
     - template-email-product-page-v2-final-TNT.php
     - template-calendar-product-page-v2-tnt.php
     - template-scheduler-product-page-v2-tnt.php
     - template-notetaker-product-page-v2-tnt.php

   Architecture:
     - One BEM prefix `pp-v2-*` everywhere.
     - Sections are reusable BLOCKS (hero, compare, features,
       cards-3col, integrations, cards-grid, enterprise,
       testimonials, faq, cta).
     - Per-page differences come from CONTENT, not CSS.
     - Three shared utility blocks for the few patterns that
       differ visually between pages:
         · .pp-v2-image-block      placeholder visual w/ grid
         · .pp-v2-info-section     white centered section
         · .pp-v2-cta              final CTA (green-glow)
   ============================================ */

/* Inconsolata + JetBrains Mono are loaded via a <link> stylesheet enqueued
   in nylas_styles() (handle: google-fonts-mono) rather than an @import here,
   so they are discovered at HTML parse time instead of after this CSS file
   downloads (removes a hop from the critical request chain). */

   :root {
    --pp-black: #000000;
    --pp-dark: #151515;
    --pp-dark-card: #212121;
    --pp-dark-bg: #1f1f1f;
    --pp-border-dark: #404040;
    --pp-border-light: #d8d8d8;
    --pp-green: #1ea482;
    --pp-green-bold: #0b9b8a;
    --pp-gray: #8e8e8e;
    --pp-gray-light: #d8d8d8;
    --pp-white: #ffffff;
    --pp-beige: #FAFAFA;
    --pp-content-max: 1200px;
    --pp-font-heading: 'Manrope', sans-serif;
    --pp-font-body: 'Inter', sans-serif;
    --pp-font-mono: 'Inconsolata', 'JetBrains Mono', monospace;
}

/* ============================================
   Neutralize legacy global section padding
   --------------------------------------------------
   `assets/src/scss/base/_layout.scss` (compiled into
   build/css/styles.css) contains site-wide rules that
   force a vertical padding on every <section>:
     * section { padding: 75px 0 !important }  @ >=800px
     * section { padding: 75px 0 !important }  @ >=1100px
     * section:not(.container) { padding: 50px 0 !important } @ <=700px
   They predate the v2 TNT pages and conflict with the
   per-section padding defined throughout this stylesheet.

   This file is already enqueued ONLY on the four v2 TNT
   product templates (see enqueue-styles.php), so any
   rule here is safely scoped to those pages.

   Because `!important` cannot be overridden by a plain
   declaration (regardless of specificity), we neutralize
   the legacy rules ONCE via this single `!important`
   declaration that reads from a custom property. Then
   every section-level class below (and every future
   section class) sets its vertical padding by assigning
   `--pp-section-pad` WITHOUT needing `!important`:

       .pp-v2-integrations { --pp-section-pad: 40px 0 0; }

   Selector matches `section:not(.container)` so its
   specificity (0,1,1) equals the mobile legacy rule and
   wins by source order (this file loads after styles.css).
   ============================================ */

section:not(.container) {
    padding: var(--pp-section-pad, 0px) !important;
}

/* ============================================
   Shared primitives (button, accent text)
   ============================================ */

.pp-v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pp-font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.2px;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
    white-space: nowrap;
}

.pp-v2-btn:hover {
    opacity: .85;
}

.pp-v2-btn--primary {
    background: var(--pp-black);
    color: var(--pp-white);
    border: none;
    min-width: 186px;
}

/* Primary button hover: keep the same colors (override the global
   `a:hover:not(.btn)` teal recolor + the `.pp-v2-btn:hover` opacity dim)
   and play a slight bounce instead. */
@keyframes pp-v2-btn-bounce {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-4px);
    }

    55% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-2px);
    }

    100% {
        transform: translateY(0);
    }
}

.pp-v2-btn.pp-v2-btn--primary:hover {
    background: var(--pp-black);
    color: var(--pp-white);
    opacity: 1;
    animation: pp-v2-btn-bounce .45s ease;
}

/* CTA + testimonial footer variants invert to white bg / black text —
   keep those colors on hover too. */
.pp-v2-cta .pp-v2-btn.pp-v2-btn--primary:hover,
.sp26-v2-testimonials__footer .pp-v2-btn.pp-v2-btn--primary:hover {
    background: var(--pp-white);
    color: var(--pp-black);
}

.pp-v2-btn--outline {
    background: transparent;
    color: var(--pp-black);
    border: 2px solid var(--pp-black);
    background-color: var(--pp-white);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* White outline CTA inverts to solid black on hover. */
.pp-v2-btn.pp-v2-btn--outline:hover {
    background-color: var(--pp-black);
    color: var(--pp-white);
    border-color: var(--pp-black);
    opacity: 1;
}

/* On the dark final-CTA section the outline button starts black —
   invert it the other way (to white) so it still has a clear hover. */
.pp-v2-cta .pp-v2-btn.pp-v2-btn--outline:hover {
    background-color: var(--pp-white);
    color: var(--pp-black);
    border-color: var(--pp-white);
}

.pp-v2-green-text {
    color: var(--pp-green-bold);
    font-weight: 700;
}

/* Softer accent green used inline inside h2 (e.g. Scheduler "Single-Vendor"). */
.pp-v2-green-text--soft {
    color: var(--pp-green);
    font-weight: inherit;
}

/* ============================================
   Shared utility — pp-v2-image-block
   --------------------------------------------------
   Placeholder visual used wherever a product page has a
   complex screenshot/diagram that hasn't been exported yet.
   Two variants for dark and light parent sections.
   Templates can override with min-height inline if needed.
   ============================================ */

.pp-v2-image-block {
    width: 100%;
    border-radius: 4px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 100% 50px, 14.28% 100%;
}

.pp-v2-image-block--dark {
    background-color: var(--pp-dark-bg);
    background-image:
        linear-gradient(rgba(64, 64, 64, 0.45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(64, 64, 64, 0.45) 1px, transparent 1px);
    border: 1px solid var(--pp-border-dark);
}

.pp-v2-image-block--light {
    background-color: #f0f0f0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Real <img> children fill the block edge-to-edge once a real
   asset is dropped in. The <img> controls its own height so the
   block sizes to the image's natural aspect ratio (no cropping).
   Templates that need a fixed height for the placeholder grid
   should ALSO supply --dark / --light modifier OR rely on the
   per-section min-height rules below (set when no <img> is
   inside, so the grid pattern shows). */
.pp-v2-image-block>img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

/* When the block holds a real image, neutralize any min-height
   the section may have set for the placeholder mode — the image
   dictates the height. */
.pp-v2-image-block:has(> img) {
    min-height: 0 !important;
    background-image: none;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* ============================================
   Section 1 — Hero
   ============================================ */

.pp-v2-hero {
    background: var(--pp-white);
    --pp-section-pad: 0;
    overflow-x: hidden;
    min-height: 700px;
}

.pp-v2-hero__inner {
    max-width: 1450px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 30px;
    min-height: 600px;
    max-height: 1000px;
}

.pp-v2-hero__content {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 565px;
    padding: 0;
}

.pp-v2-hero__pre-title {
    display: block;
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--pp-green-bold);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.pp-v2-hero__title {
    font-family: var(--pp-font-heading);
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -2px;
    color: var(--pp-black);
    margin: 0 0 20px;
    /* text-wrap: balance; */
    /* Defensive: very long compound words like "Infrastructure" must
       break gracefully if the container is narrower than the word. */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.pp-v2-hero__description {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--pp-black);
    margin: 0 0 20px;
    max-width: 530px;
}

.pp-v2-hero__buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.pp-v2-hero__trust {
    display: flex;
    gap: 20px;
    align-items: center;
    font-family: var(--pp-font-heading);
    font-weight: 500;
    font-size: 14px;
    color: #4b4b4b;
}

.pp-v2-hero__trust-item--dot::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-green);
    margin-right: 6px;
    vertical-align: middle;
}

.pp-v2-hero__visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    max-width: 610px;
}

.pp-v2-hero__visual img {
    display: block;
    max-width: min(100%, 600px);
    width: auto;
    height: auto;
    object-fit: contain;
}

.pp-v2-hero__mobile-logos {
    display: none;
}

/* ============================================
   Section 2 — Compare
   --------------------------------------------------
   Dark bordered container with a centered header, used by:
     · Email "Replace 45 lines..." (header + 2 code panels + stats)
     · Calendar "Eliminate Integration Debt" (header + image)
     · Scheduler "Single-Vendor Advantage" (header + image)
   The wrapper / container / header are identical; only the
   body slot below differs (panels vs image).
   Code highlighting + chrome lives in the API Code Showcase
   plugin (wp-content/plugins/api-code-showcase-block/...).
   ============================================ */

.pp-v2-compare {
    background: var(--pp-black);
    --pp-section-pad: 0;
    -webkit-font-smoothing: antialiased;
}

.pp-v2-compare__container {
    max-width: var(--pp-content-max);
    margin: 0 auto;
    border: 1px solid var(--pp-border-dark);
    border-top: 0;
}

.pp-v2-compare__header {
    padding: 70px 50px 40px;
    text-align: center;
}

.pp-v2-compare__title {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 35px;
    line-height: 50px;
    letter-spacing: -0.35px;
    color: var(--pp-white);
    margin: 0 auto 10px;
    /* max-width: 678px; removed due to feedback  */
}

.pp-v2-compare__subtitle {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.324px;
    color: var(--pp-white);
    margin: 0 auto;
    max-width: 806px;
    text-wrap: balance;
}

/* Body slot — image variant (image-led intros) */
.pp-v2-compare__body {
    padding: 30px 84px 60px;
}

.pp-v2-compare__body .pp-v2-image-block {
    min-height: 472px;
}

/* Body slot — capability matrix variant (Calendar) */
.pp-v2-capability-table-wrap {
    border: 1px solid #31343b;
    background: #0e1118;
    overflow-x: auto;
}

.pp-v2-capability-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 940px;
}

.pp-v2-capability-table th,
.pp-v2-capability-table td {
    border: 1px solid #31343b;
}

.pp-v2-capability-table thead th {
    height: 94px;
    padding: 10px 12px 8px;
    background: #0b0d13;
    text-align: center;
    vertical-align: middle;
}

.pp-v2-capability-table thead th:first-child {
    width: 42%;
    background: #0b0d13;
}

.pp-v2-capability-table__title-cell {
    text-align: left !important;
    font-family: var(--pp-font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #d8dde8;
    padding: 0 18px !important;
}

.pp-v2-capability-table thead img {
    display: block;
    max-width: 94px;
    max-height: 24px;
    width: auto;
    height: auto;
    margin: 0 auto 8px;
    object-fit: contain;
}

.pp-v2-capability-table__provider {
    display: block;
    font-family: var(--pp-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.12px;
    line-height: 16px;
    color: #b5bdcc;
}

.pp-v2-capability-table tbody th {
    background: #0f1219;
    color: #f2f3f5;
    font-family: var(--pp-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.12px;
    text-align: left;
    padding: 17px 18px;
}

.pp-v2-capability-table tbody td {
    background: #11151d;
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

.pp-v2-status {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid;
    overflow: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 6%);
}

.pp-v2-status svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
    shape-rendering: geometricPrecision;
}

.pp-v2-status--ok {
    color: #c7cfdb;
    border-color: #4f5765;
    background: #2a313b;
}

.pp-v2-status--warn {
    color: #f7bb5d;
    border-color: #9a6425;
    background: #372a1a;
}

.pp-v2-status--no {
    color: #ff95a4;
    border-color: #924351;
    background: #381f24;
}

.pp-v2-status--nylas {
    color: #54ff41;
    border-color: #2ea640;
    background: #113117;
}

.pp-v2-capability-table thead th:nth-child(6),
.pp-v2-capability-table tbody td:nth-child(6) {
    background: #14291a;
}

.pp-v2-capability-table thead th:nth-child(6) img {
    max-height: 20px;
}

/* Body slot — panels variant (Email code comparison) */
.pp-v2-compare__panels {
    display: flex;
}

.pp-v2-compare__panel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 20px 50px 61px;
    border-top: 1px solid var(--pp-border-dark);
}

.pp-v2-compare__panel--manual {
    border-right: 1px solid var(--pp-border-dark);
}

.pp-v2-compare__panel-label {
    font-family: var(--pp-font-heading);
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: -0.288px;
    color: var(--pp-white);
    margin-bottom: 20px;
}

.pp-v2-compare__panel-label--green {
    color: #46ff31;
}

/* Resets the API Code Showcase shortcode's outer margin/padding
   so it sits flush against the panel-label and the stat cards. */
.pp-v2-compare__panel-block .api-code-showcase-block {
    margin: 0;
    padding: 0;
}

/* Cap inner <pre> heights so the API Code Showcase renders a
   vertical scrollbar (Figma: Manual ≈606px, Nylas ≈389px). */
.pp-v2-compare__panel--manual .api-code-pre {
    max-height: var(--api-code-max-height-desktop, 606px);
}

.pp-v2-compare__panel--nylas .api-code-pre {
    max-height: var(--api-code-max-height-desktop, 389px);
}

.pp-v2-compare__placeholder {
    padding: 32px 24px;
    border: 1px dashed var(--pp-border-dark);
    color: var(--pp-gray);
    font-family: var(--pp-font-body);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* ============================================
   pp-v2-stat-row
   --------------------------------------------------
   Inline stat-card row used inside .pp-v2-compare (Email)
   and inside .pp-v2-features (Calendar Webhooks). Same
   visual; reused in both contexts.
   ============================================ */

.pp-v2-stat-row {
    display: flex;
    gap: 11px;
    margin-top: 15px;
}

.pp-v2-stat {
    flex: 1;
    background: var(--pp-dark-bg);
    border: 1px solid #5f6368;
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 98px;
}

.pp-v2-stat__value {
    font-family: var(--pp-font-body);
    font-weight: 700;
    font-size: 30px;
    line-height: 18px;
    color: var(--pp-white);
}

.pp-v2-stat__value small {
    font-size: 20px;
    font-weight: 700;
}

.pp-v2-stat__label {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 10px;
    line-height: 18px;
    color: var(--pp-white);
    text-transform: uppercase;
}

/* ============================================
   Section 3 — Features
   --------------------------------------------------
   Dark container with a header + body that splits into
   left "features list" and right "code panel" (or image).
   Used by Email Webhooks, Calendar Webhooks, Scheduler
   Private Booking, Notetaker Zero-config.
   ============================================ */

.pp-v2-features {
    background: var(--pp-black);
    --pp-section-pad: 0;
    -webkit-font-smoothing: antialiased;
}

.pp-v2-features__container {
    max-width: var(--pp-content-max);
    margin: 0 auto;
    border: 1px solid var(--pp-border-dark);
    border-top: none;
}

/* Notetaker: connect Features -> Cards (standalone) as one frame:
   no vertical gap and a single shared horizontal seam. */
.pp-v2-features:has(+ .pp-v2-cards-3col--notetaker-standalone) {
    --pp-section-pad: 0;
}

.pp-v2-features+.pp-v2-cards-3col--notetaker-standalone .pp-v2-cards-3col__container {
    border-top: none;
}

.pp-v2-features__header {
    padding: 50px 60px 24px;
    border-bottom: none;
}

.pp-v2-features__pre-title {
    display: block;
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: var(--pp-gray);
    margin-bottom: 10px;
}

.pp-v2-features__title {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 35px;
    line-height: 40px;
    letter-spacing: -0.63px;
    color: var(--pp-white);
    margin: 0 0 15px;
    max-width: 755px;
}

.pp-v2-title-accent {
    color: var(--pp-green);
}

.pp-v2-features__subtitle {
    font-family: var(--pp-font-heading);
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.324px;
    color: var(--pp-white);
    margin: 0;
    text-wrap: balance;
}

.pp-v2-features__subtitle code {
    font-family: 'JetBrains Mono', var(--pp-font-mono);
    font-weight: 400;
    font-size: 18px;
    background: transparent;
    color: var(--pp-white);
    padding: 0;
}

.pp-v2-features__body {
    display: flex;
    padding-bottom: 40px;
}

.pp-v2-features__list {
    flex: 0 0 48%;
    padding: 30px 50px;
}

.pp-v2-features__item {
    padding: 16px 0;
}

.pp-v2-features__item h4 {
    font-family: var(--pp-font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 16px;
    color: var(--pp-white);
    margin: 0 0 10px;
}

.pp-v2-features__item p {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: var(--pp-gray);
    margin: 0;
}

.pp-v2-features__item code {
    font-family: 'JetBrains Mono', var(--pp-font-mono);
    font-weight: 400;
    font-size: 14px;
    background: transparent;
    color: inherit;
    padding: 0;
}

/* --- Checks variant ---
   Used for Scheduler Section 4 ("Private Booking Flows via Session-Based Auth").
   Each item gets a leading green-circle check + larger gap so the rhythm
   matches Figma. Items already use .pp-v2-features__item — only the
   parent list needs --checks. */
.pp-v2-features__list--checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-v2-features__list--checks .pp-v2-features__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 12px 0;
}

.pp-v2-features__list--checks .pp-v2-features__item h4 {
    line-height: 24px;
    margin-bottom: 4px;
}

.pp-v2-features__list--checks .pp-v2-features__item p {
    color: var(--pp-gray);
    line-height: 24px;
    font-size: 14px;
}

.pp-v2-features__item-text {
    flex: 1;
    min-width: 0;
}

/* Calendar Section 3 list in Figma is check-row items with
   single body text (no separate title line). Scope to the
   calendar variant only to avoid impacting other pages. */
.pp-v2-features--calendar .pp-v2-features__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 0;
    margin-bottom: 20px;
}

.pp-v2-features--calendar .pp-v2-features__item:last-child {
    margin-bottom: 0;
}

.pp-v2-features--calendar .pp-v2-features__item::before {
    content: "";
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background: var(--pp-green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3334 4L6.00008 11.3333L2.66675 8' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3334 4L6.00008 11.3333L2.66675 8' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.pp-v2-features--calendar .pp-v2-features__item h4 {
    display: none;
}

.pp-v2-features--calendar .pp-v2-features__item p {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: var(--pp-gray-light);
    margin: 6px 0 0;
}

.pp-v2-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--pp-green);
    margin-top: 2px;
}

.pp-v2-features__panel {
    flex: 1;
    /* Required so the inner <pre> with long code lines can shrink to the
       column's allotted width and scroll horizontally inside its own
       overflow-x:auto box. Without min-width:0 a flex child uses
       min-width:auto (≈ min-content) which forces the panel wider than
       its 52% share, breaking the layout and clipping content. */
    min-width: 0;
    padding: 30px 50px;
}

/* Notetaker Section 2 swaps the right-side code panel for an
   image — same parent slot. */
.pp-v2-features__panel .pp-v2-image-block {
    min-height: 360px;
}

/* Match Figma: features JSON code block is ≈448px tall, so a
   thin vertical scrollbar appears for tall payloads. */
.pp-v2-features__panel .api-code-pre {
    max-height: var(--api-code-max-height-desktop, 448px);
}

/* ============================================
   Calendar Section 3 — Webhook code-block chrome
   --------------------------------------------------
   Decorative "POST … / HMAC-SHA256 Verified / Trigger ·
   Latency · Attempt · Grant" header artifacts shown in the
   Figma frame but not produced by the API Code Showcase
   plugin. Scoped to the calendar features panel only so the
   plugin stays untouched.
   ============================================ */
.pp-v2-features--calendar .pp-v2-webhook-chrome {
    border: 1px solid var(--pp-border-dark);
    border-radius: 12px;
    overflow: hidden;
}

/* Our custom chrome stands in for the plugin's own filename bar here. */
.pp-v2-features--calendar .pp-v2-webhook-chrome .api-code-filename {
    display: none;
}

.pp-v2-features--calendar .pp-v2-webhook-chrome .api-code-showcase-block {
    border-radius: 0;
}

/* Filename bar is hidden, so anchor the copy button to the code top. */
.pp-v2-features--calendar .pp-v2-webhook-chrome .api-code-copy-btn {
    top: 12px;
}

/* Row 1 — request line + verified badge */
.pp-v2-features--calendar .pp-v2-webhook-chrome__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 14px 20px;
    background: #2a2a2a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pp-v2-features--calendar .pp-v2-webhook-chrome__req {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--pp-font-mono);
    font-size: 13px;
    line-height: 20px;
}

.pp-v2-features--calendar .pp-v2-webhook-chrome__verb {
    flex: 0 0 auto;
    color: #3fcf8e;
    font-weight: 700;
}

.pp-v2-features--calendar .pp-v2-webhook-chrome__url {
    color: var(--pp-gray-light);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-v2-features--calendar .pp-v2-webhook-chrome__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 5px 11px;
    border: 1px solid #54AEFB;
    border-radius: 4px;
    background: rgba(84, 174, 251, 0.10);
    color: #54AEFB;
    font-family: var(--pp-font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

.pp-v2-features--calendar .pp-v2-webhook-chrome__badge svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    display: block;
}

/* Row 2 — metadata strip */
.pp-v2-features--calendar .pp-v2-webhook-chrome__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding: 11px 20px;
    background: #212121;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--pp-font-mono);
    font-size: 12px;
    line-height: 18px;
    opacity: 0.7;
}

.pp-v2-features--calendar .pp-v2-webhook-chrome__meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.pp-v2-features--calendar .pp-v2-webhook-chrome__meta-label {
    color: var(--pp-gray);
    font-weight: 500;
}

.pp-v2-features--calendar .pp-v2-webhook-chrome__meta-value {
    color: var(--pp-white);
    font-weight: 700;
}

/* ============================================
   Section 4 — Cards 3-col
   --------------------------------------------------
   Three equal-width dark cards with icon/title/body.
   Used by Email "Level the playing field" and
   Notetaker "Don't use Nylas Calendar?".
   Optional badge slot supports the Notetaker variant.
   ============================================ */

.pp-v2-cards-3col {
    background: var(--pp-black);
    --pp-section-pad: 0;
    -webkit-font-smoothing: antialiased;
}

.pp-v2-cards-3col__container {
    max-width: var(--pp-content-max);
    margin: 0 auto;
    border: 1px solid var(--pp-border-dark);
}

.pp-v2-cards-3col__header {
    padding: 40px 50px 20px;
    text-align: center;
}

.pp-v2-cards-3col__title {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 35px;
    line-height: 40px;
    letter-spacing: -0.35px;
    color: var(--pp-white);
    margin: 0;
    padding: 0 30px;
    text-wrap: pretty;
}

.pp-v2-cards-3col__subtitle {
    font-family: var(--pp-font-heading);
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.36px;
    color: var(--pp-white);
    margin: 0 auto 20px;
    max-width: 528px;
}

.pp-v2-cards-3col--notetaker-standalone .pp-v2-cards-3col__subtitle {
    max-width: 958px;
}

/* Figma: Notetaker standalone cards are inset from the parent frame,
   with 20px gutters between cards (not edge-to-edge panel dividers). */
.pp-v2-cards-3col--notetaker-standalone .pp-v2-cards-3col__header {
    padding: 40px 0 46px;
}

.pp-v2-cards-3col--notetaker-standalone .pp-v2-cards-3col__row {
    gap: 12px;
    padding: 0 50px 60px;
    border-top: none;
}

.pp-v2-cards-3col--notetaker-standalone .pp-v2-cards-3col__card {
    background: var(--pp-dark-card);
    border: none;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    min-height: 228px;
    padding: 24px;
}

.pp-v2-cards-3col--notetaker-standalone .pp-v2-cards-3col__icon {
    width: 33px;
    height: 32px;
    margin-bottom: 20px;
}

.pp-v2-cards-3col--notetaker-standalone .pp-v2-cards-3col__icon img {
    width: 33px;
    height: 32px;
    max-width: none;
    display: block;
}

.pp-v2-cards-3col--notetaker-standalone .pp-v2-cards-3col__card h3 {
    font-size: 20px;
    line-height: 24px;
    margin: 0 0 12px;
}

.pp-v2-cards-3col--notetaker-standalone .pp-v2-cards-3col__card p {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-wrap: pretty;
    letter-spacing: -0.2px;
}

.pp-v2-cards-3col--notetaker-standalone .pp-v2-badge {
    margin-top: 8px;
}

@media (max-width: 1024px) {
    .pp-v2-cards-3col--notetaker-standalone .pp-v2-cards-3col__header {
        padding: 30px 24px;
    }

    .pp-v2-cards-3col--notetaker-standalone .pp-v2-cards-3col__row {
        padding: 0 24px 24px;
        gap: 16px;
    }

    .pp-v2-cards-3col--notetaker-standalone .pp-v2-cards-3col__card {
        min-height: 0;
    }
}

.pp-v2-cards-3col__row {
    display: flex;
    border-top: 1px solid var(--pp-border-dark);
}

.pp-v2-cards-3col__card {
    flex: 1;
    padding: 30px;
    border: none;
    min-height: 308px;
    display: flex;
    flex-direction: column;
}

.pp-v2-cards-3col__card+.pp-v2-cards-3col__card {
    border-left: 1px solid var(--pp-border-dark);
}

.pp-v2-cards-3col__icon {
    width: 50px;
    height: 48px;
    background: rgba(142, 142, 142, 0.2);
    border: 1px solid var(--pp-gray);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.pp-v2-cards-3col__card h3 {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 22px;
    line-height: 45px;
    letter-spacing: -0.22px;
    color: var(--pp-white);
    margin: 0 0 10px;
}

.pp-v2-cards-3col__card p {
    font-family: var(--pp-font-heading);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: -0.288px;
    color: var(--pp-gray-light);
    margin: 0;
}

.pp-v2-code-link {
    color: #54aefb;
    text-decoration: none;
}

.pp-v2-code-link:hover,
.pp-v2-code-link:focus-visible {
    text-decoration: underline;
}

.pp-v2-code-link code {
    font-family: 'JetBrains Mono', var(--pp-font-mono);
    color: inherit;
    background: transparent;
    padding: 0;
}

/* ============================================
   Section 5 — Integrations Grid (Email-only)
   ============================================ */

.pp-v2-integrations {
    background: var(--pp-white);
    --pp-section-pad: 0;
}

.pp-v2-integrations__container {
    max-width: var(--pp-content-max);
    margin: 0 auto;
    padding: 0;
    border-left: 1px solid var(--pp-border-light);
    border-right: 1px solid var(--pp-border-light);
}

.pp-v2-integrations__header {
    text-align: center;
    padding: 40px 60px 40px;
}

.pp-v2-integrations__pre-title {
    display: block;
    font-family: var(--pp-font-body);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--pp-gray);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.pp-v2-integrations__title {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 40px;
    line-height: 65px;
    letter-spacing: -2px;
    color: var(--pp-black);
    margin: 0 0 10px;
}

.pp-v2-integrations__subtitle {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    color: var(--pp-black);
    margin: 0 auto;
    max-width: 887px;
}

.pp-v2-integrations__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid var(--pp-border-light);
}

.pp-v2-integrations__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    border-bottom: 1px solid var(--pp-border-light);
    border-left: 1px solid var(--pp-border-light);
    min-height: 100px;
}

.pp-v2-integrations__cell:nth-child(6n+1) {
    border-left: none;
}

.pp-v2-integrations__cell img {
    max-width: 80px;
    max-height: 45px;
    object-fit: contain;
    filter: none;
}

.pp-v2-integrations__footer {
    text-align: center;
    padding: 40px 60px;
}

.pp-v2-integrations__footer p {
    font-family: var(--pp-font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: var(--pp-black);
    margin: 0 auto 30px;
    max-width: 744px;
}

/* ============================================
   Section 6 — Cards Grid (3×2 dark cards)
   --------------------------------------------------
   Used by all four pages for their "Every X workflow,
   one API" / "Every Y pattern" / "Every Z, shipped"
   feature grids.
   ============================================ */

.pp-v2-cards-grid {
    background: var(--pp-black);
    --pp-section-pad: 0;
    -webkit-font-smoothing: antialiased;
}

.pp-v2-cards-grid__container {
    max-width: var(--pp-content-max);
    margin: 0 auto;
    border-left: 1px solid var(--pp-border-dark);
    border-right: 1px solid var(--pp-border-dark);
}

.pp-v2-cards-grid__header {
    padding: 40px 50px 32px;
    text-align: center;
    /* border: 1px solid var(--pp-border-dark); */
    border-bottom: none;
}

.pp-v2-cards-grid__title {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 35px;
    line-height: 45px;
    letter-spacing: -0.35px;
    color: var(--pp-white);
    max-width: 650px;
    margin: 0 auto 30px;
}

.pp-v2-cards-grid__subtitle {
    font-family: var(--pp-font-heading);
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.36px;
    color: #D8D8D8;
    margin: 0 auto 20px;
    /* max-width: 646px; */
    max-width: 726px;
    /* text-wrap: balance; */
}

.pp-v2-cards-grid__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 0 34px 68px;
    border-top: none;
    border-bottom: none;
}

.pp-v2-cards-grid__card {
    background: var(--pp-dark-card);
    border: 1px solid var(--pp-border-dark);
    border-radius: 4px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 189px;
}

.pp-v2-cards-grid__card-icon {
    width: 33px;
    height: 33px;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    flex: 0 0 33px;
}

.pp-v2-cards-grid__card h3 {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    color: var(--pp-white);
    margin: 0;
}

.pp-v2-cards-grid__card-icon img {
    width: 33px;
    height: 32px;
    max-width: none;
    display: block;
}

.pp-v2-cards-grid__card p {
    font-family: var(--pp-font-heading);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.252px;
    color: var(--pp-gray-light);
    margin: 0;
    flex: 1;
    margin-bottom: 20px;
}

/* Code-style badge — used inside cards-grid AND cards-3col
   (shared across all 4 pages wherever a card needs a code-tag). */
.pp-v2-badge {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    font-family: 'JetBrains Mono', var(--pp-font-mono);
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    color: #fafafa;
    background: var(--pp-border-dark);
    padding: 2px 8px;
    border-radius: 4px;
}

/* ============================================
   Section 7 — Enterprise (stats + certs)
   ============================================ */

.pp-v2-enterprise {
    background: var(--pp-black);
    --pp-section-pad: 0;
    -webkit-font-smoothing: antialiased;
}

.pp-v2-enterprise__container {
    max-width: var(--pp-content-max);
    margin: 0 auto;
    border-left: 1px solid var(--pp-border-dark);
    border-right: 1px solid var(--pp-border-dark);
}

.pp-v2-enterprise__header {
    text-align: center;
    padding: 60px 50px 40px;
    border-top: 1px solid var(--pp-border-dark);
}

.pp-v2-enterprise__pre-title {
    display: block;
    font-family: var(--pp-font-body);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--pp-gray);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.pp-v2-enterprise__title {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 40px;
    line-height: 55px;
    letter-spacing: -0.72px;
    color: var(--pp-white);
    margin: 0 0 8px;
}

.pp-v2-enterprise__subtitle {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--pp-white);
    margin: 0 auto;
    max-width: 655px;
    text-wrap: balance;
}

.pp-v2-enterprise__stats {
    display: flex;
    border-top: 1px solid var(--pp-border-dark);
    border-bottom: 1px solid var(--pp-border-dark);
}

.pp-v2-enterprise__stat {
    flex: 1;
    text-align: center;
    padding: 45px 20px 20px;
    border-right: 1px solid var(--pp-border-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pp-v2-enterprise__stat:last-child {
    border-right: 0;
}

.pp-v2-enterprise__stat-value {
    font-family: var(--pp-font-heading);
    font-weight: 800;
    font-size: 35px;
    line-height: 25px;
    letter-spacing: -0.35px;
    color: var(--pp-green);
}

.pp-v2-enterprise__stat-label {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.18px;
    color: var(--pp-gray);
}

.pp-v2-enterprise__stat-link {
    font-family: var(--pp-font-heading);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--pp-gray);
}

.pp-v2-enterprise__certs {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 60px;
    gap: 0;
}

.pp-v2-enterprise__cert {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 47px;
}

.pp-v2-enterprise__cert img {
    max-height: 105px;
    max-width: 108px;
    object-fit: contain;
    filter: grayscale(0);
}

/* ============================================
   Section 8 — Testimonials
   ============================================ */

.pp-v2-testimonials {
    background: var(--pp-beige);
    padding: 0;
}

.pp-v2-testimonials__container {
    max-width: var(--pp-content-max);
    margin: 0 auto;
    padding: 68px 0 90px;
    border-left: 1px solid var(--pp-border-light);
    border-right: 1px solid var(--pp-border-light);
}

.pp-v2-testimonials__header {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 48px;
}

.pp-v2-testimonials__header h2 {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 40px;
    line-height: 55px;
    letter-spacing: -1px;
    color: var(--pp-black);
}

.pp-v2-testimonials__header h2 strong {
    font-weight: 700;
}

.pp-v2-testimonials__subtitle {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #666;
    margin: 0;
}

.pp-v2-testimonials__layout {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--pp-border-light);
    border-bottom: 1px solid var(--pp-border-light);
    border-radius: 0;
    background: white;
}

.pp-v2-testimonials__logos {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--pp-border-light);
}

.pp-v2-testimonials__logo-tab {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 20px;
    color: var(--pp-black);
    background: none;
    border: none;
    border-bottom: 1px solid var(--pp-border-light);
    padding: 0 24px;
    cursor: pointer;
    text-align: center;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 94px;
    opacity: 0.5;
}

.pp-v2-testimonials__logo-tab:last-child {
    border-bottom: none;
}

.pp-v2-testimonials__logo-tab:hover {
    background: #f7f7f7;
}

.pp-v2-testimonials__logo-tab.active {
    opacity: 1;
}

/* Customer logo images inside testimonial tabs */
.pp-v2-testimonials__logo-img {
    height: auto;
    width: auto;
    max-width: 145px;
    object-fit: contain;
    display: block;
}


.pp-v2-testimonials__panels {
    flex: 1;
    padding: 0;
}

.pp-v2-testimonials__panel {
    display: none;
    padding: 30px 50px 36px;
}

.pp-v2-testimonials__panel.active {
    display: block;
    animation: sp26TestimonialIn .34s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .pp-v2-testimonials__panel.active {
        animation: none;
    }
}

.pp-v2-testimonials__headline {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
    color: var(--pp-black);
    margin: 0 0 30px;
}

.pp-v2-testimonials__body {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

.pp-v2-testimonials__body+a.pp-v2-btn.pp-v2-btn--outline {
    position: relative;
    top: -40px;
}

.pp-v2-testimonials__stats {
    display: flex;
    gap: 0;
    min-width: 363px;
}

.pp-v2-testimonials__stat {
    padding: 0 30px 0 0;
    border-right: 1px solid var(--pp-border-light);
    margin-right: 30px;
}

.pp-v2-testimonials__stat:last-child {
    border-right: none;
    margin-right: 0;
}

.pp-v2-testimonials__stat-value {
    font-family: var(--pp-font-heading);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    color: var(--pp-green);
    display: block;
    margin-bottom: 8px;
}

.pp-v2-testimonials__stat-label {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.2px;
    color: var(--pp-black);
    display: block;
    max-width: 152px;
}

.pp-v2-testimonials__quote-block blockquote {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #333;
    margin: 0 0 16px;
    padding: 0;
    border: none;
}

.pp-v2-testimonials:not(.sp26-v2-testimonials) .pp-v2-testimonials__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pp-v2-testimonials:not(.sp26-v2-testimonials) .pp-v2-testimonials__author-photo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #eee;
}

.pp-v2-testimonials:not(.sp26-v2-testimonials) .pp-v2-testimonials__author-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-v2-testimonials__author-info {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.pp-v2-testimonials__author-info strong {
    font-family: var(--pp-font-heading);
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
    color: var(--pp-black);
}

.pp-v2-testimonials__author-info span {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 8px;
    color: #666;
}

/* Sales & CRM vertical — dark clickable testimonial module */
.sp26-v2-testimonials {
    background: #000;
    --pp-section-pad: 0;
    -webkit-font-smoothing: antialiased;
}

.sp26-v2-testimonials .pp-v2-testimonials__container {
    max-width: 1200px;
    padding: 0;
    border-left: 1px solid #222;
    border-right: 1px solid #222;
}

.sp26-v2-testimonials .pp-v2-testimonials__header {
    padding: 66px 40px 58px;
    margin: 0;
    border-bottom: 1px solid #222;
}

.sp26-v2-testimonials .pp-v2-testimonials__header h2 {
    color: #fff;
    font-size: 40px;
    line-height: 42px;
    font-weight: 600;
    letter-spacing: -1.2px;
    margin: 0 0 10px;
}

.sp26-v2-testimonials .pp-v2-testimonials__header h2 .pp-v2-green-text--soft {
    color: var(--pp-green-bold);
    font-weight: 700;
}

.sp26-v2-testimonials .pp-v2-testimonials__subtitle {
    color: #fff;
    font-size: 18px;
    line-height: 21px;
}

.sp26-v2-testimonials .pp-v2-testimonials__layout {
    min-height: 350px;
    background: #000;
    border-top: none;
    border-bottom: 1px solid #222;
}

.sp26-v2-testimonials .pp-v2-testimonials__logos {
    flex: 0 0 239px;
    border-right: 1px solid #282828;
    padding: 25px 0 24px;
}

.sp26-v2-testimonials .pp-v2-testimonials__logo-tab {
    min-height: 58px;
    justify-content: flex-start;
    padding: 15px 54px;
    border: 0;
    color: #fff;
    opacity: .22;
    background: transparent;
    transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}

.sp26-v2-testimonials .pp-v2-testimonials__logo-tab:hover,
.sp26-v2-testimonials .pp-v2-testimonials__logo-tab.active {
    background: transparent;
    opacity: 1;
    transform: translateX(2px);
    filter: none;
}

.sp26-v2-logo-mark {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: currentColor;
    white-space: nowrap;
}

/* .sp26-v2-logo-mark--liondesk {
    position: relative;
    font-family: var(--pp-font-heading);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -1.7px;
}

.sp26-v2-logo-mark--liondesk::before {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: -3px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: inset 5px 0 0 #000;
}

.sp26-v2-logo-mark--funnel {
    font-family: var(--pp-font-heading);
    font-size: 24px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -1.4px;
}

.sp26-v2-logo-mark--funnel::before {
    content: "";
    width: 39px;
    height: 17px;
    margin-right: -1px;
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 39px 4px no-repeat,
        linear-gradient(currentColor, currentColor) 8px 7px / 27px 4px no-repeat,
        linear-gradient(currentColor, currentColor) 17px 14px / 16px 3px no-repeat;
    transform: skewX(-16deg);
}

.sp26-v2-logo-mark--jobylon {
    font-family: var(--pp-font-heading);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -1.1px;
}

.sp26-v2-logo-mark--jobylon::before {
    content: "";
    width: 23px;
    height: 27px;
    margin-right: 7px;
    border-radius: 50% 50% 50% 8px;
    background: currentColor;
    transform: rotate(-28deg);
} */


.sp26-v2-testimonials .pp-v2-testimonials__panels {
    position: relative;
    min-height: 350px;
}

.sp26-v2-testimonials .pp-v2-testimonials__panel {
    display: none;
    padding: 29px 42px 30px 48px;
}

.sp26-v2-testimonials .pp-v2-testimonials__panel.active {
    display: block;
    animation: sp26TestimonialIn .34s cubic-bezier(.22, .61, .36, 1);
}

.sp26-v2-testimonials .pp-v2-testimonials__headline {
    max-width: 640px;
    color: #f3f3f3;
    font-size: 24px;
    line-height: 31px;
    font-weight: 700;
    letter-spacing: -.65px;
    margin: 0 0 36px;
}

.sp26-v2-testimonials .pp-v2-testimonials__body {
    align-items: flex-start;
    gap: 79px;
    margin-bottom: 0;
}

.sp26-v2-testimonials .pp-v2-testimonials__stats {
    min-width: 252px;
}

.sp26-v2-testimonials .pp-v2-testimonials__stat {
    min-width: 126px;
    padding-right: 25px;
    margin-right: 25px;
}

.sp26-v2-testimonials .pp-v2-testimonials__stat-value {
    color: var(--pp-green-bold);
    font-size: 32px;
    line-height: 36px;
    font-weight: 800;
    letter-spacing: -.75px;
    margin-bottom: 8px;
}

.sp26-v2-testimonials .pp-v2-testimonials__stat-label {
    max-width: 100px;
    color: #fff;
    font-family: var(--pp-font-body);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: -.4px;
}

.sp26-v2-testimonials .pp-v2-testimonials__quote-block {
    max-width: 383px;
    padding-top: 4px;
}

/* When a testimonial has no stats, keep the quote in the same spot
   as if the stats column (min-width 252px + 79px gap) were present. */
.sp26-v2-testimonials .pp-v2-testimonials__body > .pp-v2-testimonials__quote-block:first-child {
    margin-left: 331px;
}

.sp26-v2-testimonials .pp-v2-testimonials__quote-block blockquote {
    color: #fff;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: -.42px;
    margin-bottom: 28px;
}

.sp26-v2-testimonials .pp-v2-testimonials__author {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.sp26-v2-testimonials .pp-v2-testimonials__author-photo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 34%, #ffd5b8 0 18%, transparent 19%),
        radial-gradient(circle at 50% 108%, #171f28 0 39%, transparent 40%),
        linear-gradient(135deg, #c4f3ff, #168c80);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%);
}

.sp26-v2-testimonials .pp-v2-testimonials__author-photo--liondesk { background-image: url('../images/testimonials-authors/liondesk.webp'); }
.sp26-v2-testimonials .pp-v2-testimonials__author-photo--dialpad { background-image: url('../images/testimonials-authors/dialpad.webp'); }
.sp26-v2-testimonials .pp-v2-testimonials__author-photo--funnel { background-image: url('../images/testimonials-authors/funnel.webp'); }
.sp26-v2-testimonials .pp-v2-testimonials__author-photo--jarvis { background-image: url('../images/testimonials-authors/jarvis.webp'); }
.sp26-v2-testimonials .pp-v2-testimonials__author-photo--clio { background-image: url('../images/testimonials-authors/clio.webp'); }
.sp26-v2-testimonials .pp-v2-testimonials__author-photo--recital { background-image: url('../images/testimonials-authors/recital.webp'); }
.sp26-v2-testimonials .pp-v2-testimonials__author-photo--wealthbox { background-image: url('../images/testimonials-authors/wealthbox.webp'); }
.sp26-v2-testimonials .pp-v2-testimonials__author-photo--mysocialpulse { background-image: url('../images/testimonials-authors/mysocialpulse.webp'); }
.sp26-v2-testimonials .pp-v2-testimonials__author-photo--recruiterpm { background-image: url('../images/testimonials-authors/recruiterpm.webp'); }
.sp26-v2-testimonials .pp-v2-testimonials__author-photo--talentreef { background-image: url('../images/testimonials-authors/talentreef.webp'); }
.sp26-v2-testimonials .pp-v2-testimonials__author-photo--jobylon { background-image: url('../images/testimonials-authors/jobylon.webp'); }
.sp26-v2-testimonials .pp-v2-testimonials__author-photo--dayforce { background-image: url('../images/testimonials-authors/dayforce.webp'); }


.sp26-v2-testimonials .pp-v2-testimonials__author-info strong {
    color: #fff;
    font-size: 12px;
    line-height: 15px;
    font-weight: 800;
}

.sp26-v2-testimonials .pp-v2-testimonials__author-info span {
    color: #b7b7b7;
    font-size: 9px;
    line-height: 12px;
}

.sp26-v2-testimonials .pp-v2-btn--outline {
    min-width: 0;
    padding: 10px 19px;
    border: 1px solid #626262;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-family: Poppins;
    line-height: 18px;
    letter-spacing: -.1px;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.sp26-v2-testimonials .pp-v2-btn--outline:hover {
    border-color: #fff;
    background: #fff;
    color: #000;
    opacity: 1;
}

.sp26-v2-testimonials__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 43px;
    min-height: 122px;
}

.sp26-v2-testimonials__footer p {
    margin: 0;
    color: #fff;
    font-family: var(--pp-font-body);
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -.38px;
}

.sp26-v2-testimonials__footer .pp-v2-btn--primary {
    min-width: 126px;
    padding: 9px 21px;
    background: #fff;
    color: #000;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -.12px;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 50%);
}

@keyframes sp26TestimonialIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Shared utility — pp-v2-info-section
   --------------------------------------------------
   White centered section used by the calendar/scheduler/
   notetaker pages for image-led info blocks. Three layout
   variants:
     · default          — heading + image stacked, centered
     · --two-col        — image left, list/text right
     · --image-only     — heading + image only (no text col)
   ============================================ */

.pp-v2-info-section {
    background: var(--pp-white);
    --pp-section-pad: 0;
}

.pp-v2-info-section--two-col {
    border-bottom: 1px solid var(--pp-border-light);
}

.pp-v2-info-section--two-col .pp-v2-info-section__container {
    border-left: 1px solid var(--pp-border-light);
    border-right: 1px solid var(--pp-border-light);
}

.pp-v2-info-section--frontend-backend {
    position: relative;
    background-color: var(--pp-beige);
}

.pp-v2-info-section--scheduler-rails {
    position: relative;
}


.pp-v2-info-section__container {
    background-color: var(--pp-white);
    max-width: var(--pp-content-max);
    margin: 0 auto;
    padding: 60px 0;
    padding-bottom: 22px;
    border-left: 1px solid var(--pp-border-light);
    border-right: 1px solid var(--pp-border-light);
}

.pp-v2-info-section--scheduler-rails .pp-v2-info-section__container {
    padding-bottom: 48px;
}

.pp-v2-info-section__header {
    text-align: center;
    margin-bottom: 32px;
}

.pp-v2-info-section__pre-title {
    display: block;
    font-family: var(--pp-font-body);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--pp-gray);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.pp-v2-info-section__title {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 45px;
    line-height: 65px;
    letter-spacing: -2px;
    color: var(--pp-black);
    margin: 0 0 12px;
}

.pp-v2-info-section__title-highlight {
    color: var(--pp-green-bold);
}

.pp-v2-info-section__subtitle {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    color: var(--pp-black);
    margin: 0 auto 16px;
    max-width: 878px;
    text-wrap: pretty;
}

.pp-v2-info-section__subtitle code {
    font-family: 'JetBrains Mono', var(--pp-font-mono);
    font-weight: 400;
    font-size: 18px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: var(--pp-black);
}

.pp-v2-info-section__body {
    margin-top: 30px;
}

/* default + --image-only: image stacked under header */
.pp-v2-info-section__body .pp-v2-image-block {
    min-height: 481px;
    margin: 0 auto;
    max-width: 1024px;
}

/* --two-col variant: image left, content list right */
.pp-v2-info-section--two-col .pp-v2-info-section__body {
    display: flex;
    gap: 40px;
    align-items: stretch;
    padding: 0 20px 24px;
}

.pp-v2-info-section--two-col .pp-v2-image-block {
    flex: 0 0 712px;
    min-height: 400px;
    max-width: none;
    margin: 0;
}

.pp-v2-info-section__list {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0 60px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.pp-v2-info-section__list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid var(--pp-border-light);
}

.pp-v2-info-section--two-col .pp-v2-info-section__list li {
    border-bottom: none;
}

.pp-v2-info-section__list li:last-child {
    border-bottom: none;
}

.pp-v2-info-section__list strong {
    font-family: var(--pp-font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--pp-black);
}

.pp-v2-info-section__list span {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #4b4b4b;
}

.pp-v2-info-section__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 32px;
    flex-wrap: wrap;
    border-top: 1px solid var(--pp-border-light);
}

.pp-v2-info-section__footer p {
    font-family: var(--pp-font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--pp-black);
    margin: 0;
}

.pp-v2-frontend-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    border-left: 1px solid var(--pp-border-light);
    border-top: 1px solid var(--pp-border-light);
}

.pp-v2-info-section--frontend-backend .pp-v2-frontend-showcase {
    border-left: none;
    border-right: none;
}
.grid_lines_container{
    background: #fff;
    border-bottom: 1px solid #d8d8d8; 
}
.grid_lines_container > div{
    max-width: 1200px; 
    margin-left: auto!important;
    margin-right: auto!important;
    border-bottom: none!important;
    
}


section.pp-v2-info-section.pp-v2-info-section--scheduler-rails .pp-v2-info-section__header {
    border: 1px solid #d8d8d8;
    margin: 0;
    padding: 50px 0 40px;
    background: #fff;
}

section.pp-v2-info-section.pp-v2-info-section--scheduler-rails    {
    background-color: #fafafa;
}

.pp-v2-frontend-showcase__column {
    display: flex;
    flex-direction: column;
}

.pp-v2-frontend-showcase__column--left {
    border-right: 1px solid var(--pp-border-light);
}

.pp-v2-frontend-showcase__column--left .pp-v2-frontend-showcase__card:first-child {
    border-bottom: 1px solid var(--pp-border-light);
}

.pp-v2-frontend-showcase__card {
    padding: 20px 12px 12px;
}

.pp-v2-frontend-showcase__column--left .pp-v2-frontend-showcase__card {
    min-height: 510px;
}

.pp-v2-frontend-showcase__card--tall {
    min-height: 946px;
}

.pp-v2-frontend-showcase__media {
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: var(--pp-white);
}

.pp-v2-frontend-showcase__media img {
    display: block;
    width: 100%;
    height: auto;
}

.pp-v2-frontend-showcase__media--booking,
.pp-v2-frontend-showcase__media--conflict {
    max-width: 427px;
}

.pp-v2-frontend-showcase__media--event {
    max-width: 413px;
}

.pp-v2-frontend-showcase__copy {
    max-width: 427px;
    margin: 16px auto 0;
}

.pp-v2-frontend-showcase__copy h3 {
    margin: 0 0 10px;
    font-family: var(--pp-font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: var(--pp-black);
}

.pp-v2-frontend-showcase__copy p {
    margin: 0;
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--pp-black);
}

/* ============================================
   Section 9 — FAQ
   ============================================ */

.pp-v2-faq-section {
    --pp-section-pad: 50px 0 90px;
    background-color: #000000;
    position: relative;
}

.pp-v2-faq__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 56px;
    padding: 0;
}

.pp-v2-faq__title {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 24px;
    color: #FFFFFF;
    margin: 0;
}

.pp-v2-faq__help {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-v2-faq__help-text {
    font-family: var(--pp-font-heading);
    font-weight: 700;
    font-size: 18px;
    color: #FFFFFF;
}

.pp-v2-faq__help-link {
    font-family: var(--pp-font-heading);
    font-weight: 700!important;
    font-size: 18px;
    color: var(--pp-green);
    text-decoration: none;
}

.pp-v2-faq__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 auto;
    padding: 0 60px;
}

.pp-v2-faq__item {
    background: #FFFFFF;
    border: 1px solid #BDCCF9;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.pp-v2-faq__item:hover {
    border-color: #9BB3F0;
}

.pp-v2-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 21px 29px;
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: #000000;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.pp-v2-faq__question:hover {
    background: #f8f9fc;
}

.pp-v2-faq__question-text {
    flex: 1;
    padding-right: 16px;
}

.pp-v2-faq__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    position: relative;
}

.pp-v2-faq__icon-plus,
.pp-v2-faq__icon-minus {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.pp-v2-faq__icon-plus {
    opacity: 1;
    transform: rotate(0deg);
}

.pp-v2-faq__icon-minus {
    opacity: 0;
    transform: rotate(-90deg);
}

.pp-v2-faq__item--active .pp-v2-faq__icon-plus {
    opacity: 0;
    transform: rotate(90deg);
}

.pp-v2-faq__item--active .pp-v2-faq__icon-minus {
    opacity: 1;
    transform: rotate(0deg);
}

.pp-v2-faq__answer {
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease;
}

.pp-v2-faq__answer-content {
    padding: 0 29px 25px;
    font-family: var(--pp-font-heading);
    font-size: 16px;
    line-height: 1.7;
    color: #333333;
}

.pp-v2-faq__answer-content p {
    margin: 0 0 16px 0;
}

.pp-v2-faq__answer-content p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Section 10 — Final CTA
   --------------------------------------------------
   Used by Calendar, Scheduler, Notetaker pages.
   Email page does not currently use a final CTA.
   ============================================ */

.pp-v2-cta {
    background-color: var(--pp-black);
    /* Layered blurred-green gradient artwork from Figma. The single
       WebP covers the full section width and seats centered/bottom so
       the brightest part anchors the headline + buttons. */
    background-image: url('../images/product-page-v2/green-bg.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    --pp-section-pad: 70px 0 80px;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: hidden;
}

.pp-v2-cta__container {
    max-width: var(--pp-content-max);
    margin: 0 auto;
    padding: 0 60px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.pp-v2-cta__title {
    font-family: var(--pp-font-heading);
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -0.5px;
    color: var(--pp-white);
    margin: 0 0 16px;
}

.pp-v2-cta__subtitle {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--pp-white);
    margin: 0 auto 32px;
    max-width: 720px;
}

.pp-v2-cta__buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* CTA buttons reuse .pp-v2-btn but invert colors against the dark bg. */
.pp-v2-cta .pp-v2-btn--primary {
    background: var(--pp-white);
    color: var(--pp-black);
}

.pp-v2-cta .pp-v2-btn--outline {
    background: black;
    color: var(--pp-white);
}

/* ============================================
   Responsive — Compact desktop / large tablet (1025–1280px)
   --------------------------------------------------
   The hero keeps its two-column layout down to 1024px, but with the
   default left padding (175px) + fixed content width (575px), the
   right-hand visual collapses to ~250–400px in this range. Scale the
   text column fluidly here so the image keeps a healthy footprint
   before the layout stacks at 1024px.
   ============================================ */

@media (min-width: 1025px) and (max-width: 1280px) {
    .pp-v2-hero__inner {
        gap: clamp(16px, 2vw, 28px);
    }

    .pp-v2-hero__content {
        width: clamp(420px, 38vw, 540px);
        padding-left: clamp(40px, 6vw, 96px);
        padding-right: 0;
    }

    .pp-v2-hero__title {
        font-size: clamp(38px, 3.6vw, 46px);
        line-height: 1.1;
        letter-spacing: -1.5px;
    }

    .pp-v2-hero__description {
        max-width: none;
    }

    .pp-v2-hero__visual {
        min-width: 0;
        padding: 24px clamp(16px, 2vw, 30px) 24px 0;
    }

    .pp-v2-hero__visual img {
        max-height: 560px;
    }
}

/* ============================================
   Responsive — 1024px
   ============================================ */

@media (max-width: 1024px) {
    .pp-v2-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 0;
        padding: 0;
    }

    /* On stacked layouts, lead with the visual so the product image
       is the first thing seen on mobile/tablet (Figma intent). */
    .pp-v2-hero__visual {
        order: 1;
    }

    .pp-v2-hero__content {
        order: 2;
    }

    .pp-v2-hero__content {
        flex: 1 1 auto;
        width: auto;
        max-width: 720px;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 32px 40px 40px;
        text-align: left;
    }

    .pp-v2-hero__title {
        font-size: 44px;
        line-height: 1.1;
        letter-spacing: -1.5px;
        text-wrap: pretty;
    }

    .pp-v2-hero__description {
        max-width: none;
    }

    .pp-v2-hero__visual {
        flex: 0 0 auto;
        padding: 40px 40px 8px;
        max-height: none;
        min-height: 0;
    }

    .pp-v2-hero__visual img {
        width: 100%;
        max-width: 720px;
        max-height: 460px;
        margin: 0 auto;
    }

    .pp-v2-compare__panels {
        flex-direction: column;
    }

    .pp-v2-compare__panel--manual {
        border-right: none;
        border-bottom: 1px solid var(--pp-border-dark);
    }

    .pp-v2-compare__panel--manual .api-code-pre {
        max-height: var(--api-code-max-height-mobile, var(--api-code-max-height-desktop, 606px));
    }

    .pp-v2-compare__panel--nylas .api-code-pre {
        max-height: var(--api-code-max-height-mobile, var(--api-code-max-height-desktop, 389px));
    }

    .pp-v2-features__panel .api-code-pre {
        max-height: var(--api-code-max-height-mobile, var(--api-code-max-height-desktop, 448px));
    }

    .pp-v2-compare__body {
        padding: 24px;
    }

    .pp-v2-compare__body .pp-v2-image-block {
        min-height: 360px;
    }

    .pp-v2-capability-table tbody th {
        font-size: 14px;
        line-height: 20px;
        padding: 14px 14px;
    }

    .pp-v2-capability-table thead th {
        height: 86px;
    }

    .pp-v2-capability-table thead img {
        max-width: 82px;
        max-height: 22px;
        margin-bottom: 6px;
    }

    .pp-v2-capability-table__provider {
        font-size: 10px;
        line-height: 12px;
    }

    .pp-v2-features__body {
        flex-direction: column;
    }

    .pp-v2-features__list {
        border-right: none;
        border-bottom: 1px solid var(--pp-border-dark);
    }

    .pp-v2-cards-3col__row {
        flex-direction: column;
    }

    .pp-v2-cards-3col__card+.pp-v2-cards-3col__card {
        border-left: none;
        border-top: 1px solid var(--pp-border-dark);
    }

    .pp-v2-integrations__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--pp-border-light);
    }

    .pp-v2-integrations__cell {
        min-height: 76px;
        padding: 18px 14px;
        border: none;
        background: var(--pp-white);
    }

    .pp-v2-integrations__cell img {
        max-width: var(--pp-mobile-logo-max-width, 78px);
        max-height: var(--pp-mobile-logo-max-height, 42px);
    }

    .pp-v2-cards-grid__row {
        grid-template-columns: repeat(2, 1fr);
    }

    .pp-v2-enterprise__stats {
        flex-wrap: wrap;
    }

    .pp-v2-enterprise__stat {
        flex: 0 0 50%;
        border-bottom: 1px solid var(--pp-border-dark);
    }

    .pp-v2-enterprise__certs {
        flex-wrap: wrap;
    }

    .pp-v2-enterprise__cert {
        flex: 0 0 33.33%;
    }

    .pp-v2-testimonials__layout {
        flex-direction: column;
    }

    .pp-v2-testimonials__logos {
        flex: none;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--pp-border-light);
        overflow-x: auto;
        padding-top: 4px;
    }

    .pp-v2-testimonials__logo-tab {
        border-bottom: none;
        border-right: 1px solid var(--pp-border-light);
        flex: 0 0 25%;
        text-align: center;
        justify-content: center;
        font-size: 14px;
        padding: 16px 12px;
        min-height: 72px;
    }

    .pp-v2-testimonials__logo-tab.active {
        border-left: none;
        border-bottom: 3px solid var(--pp-green);
        box-shadow: none;
    }

    .pp-v2-testimonials__body {
        flex-direction: column;
    }

    .pp-v2-faq__header {
        padding: 0 40px;
    }

    .pp-v2-faq__list {
        max-width: none;
    }

    .pp-v2-info-section__container {
        padding: 0 24px;
    }

    .pp-v2-info-section--notetaker-triggers .pp-v2-info-section__container {
        padding: 0;
    }

    .pp-v2-info-section--notetaker-triggers .pp-v2-info-section__header {
        padding: 0 24px;
    }

    .pp-v2-info-section--two-col .pp-v2-info-section__body {
        flex-direction: column;
        padding: 0 0 24px;
    }

    .pp-v2-info-section--two-col .pp-v2-image-block {
        flex: 0 0 auto;
        width: 100%;
        min-height: 0;
    }

    .pp-v2-info-section__list {
        padding: 0;
    }

    .pp-v2-frontend-showcase {
        grid-template-columns: 1fr;
        border-right: 1px solid var(--pp-border-light);
    }

    .pp-v2-frontend-showcase__column--left {
        border-right: none;
    }

    .pp-v2-frontend-showcase__column--left .pp-v2-frontend-showcase__card,
    .pp-v2-frontend-showcase__card--tall {
        min-height: 0;
    }

    .pp-v2-frontend-showcase__copy h3 {
        font-size: 16px;
        line-height: 20px;
    }

    .pp-v2-frontend-showcase__copy p {
        font-size: 14px;
        line-height: 20px;
    }
}


@media (min-width: 1200px) {
    .pp-v2-hero__inner {
        position: relative;
        right: -50px;
    }
}

/* ============================================
   Responsive — 768px
   ============================================ */

@media (max-width: 768px) {

    .pp-v2-hero__content {
        padding: 24px 24px 32px;
    }

    .pp-v2-hero__pre-title {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .pp-v2-hero__title {
        font-size: 36px;
        line-height: 1.1;
        letter-spacing: -1px;
    }

    .pp-v2-hero__description {
        font-size: 17px;
        line-height: 25px;
    }

    .pp-v2-hero__buttons {
        gap: 12px;
        margin-bottom: 24px;
    }

    .pp-v2-hero__buttons .pp-v2-btn {
        flex: 1 1 auto;
        padding: 12px 24px;
    }

    .pp-v2-hero__trust {
        flex-wrap: wrap;
        gap: 10px 16px;
        font-size: 13px;
        margin-bottom: 8px;
    }

    .pp-v2-hero__visual {
        padding: 32px 24px 0;
    }

    .pp-v2-hero__visual img {
        max-height: none;
        max-height: 300px;
    }

    .pp-v2-compare__title {
        font-size: 26px;
        line-height: 36px;
    }

    .pp-v2-compare__header {
        padding: 30px 24px 20px;
    }

    .pp-v2-compare__panel {
        padding: 16px 20px;
    }

    .pp-v2-compare__body .pp-v2-image-block {
        min-height: 240px;
    }

    .pp-v2-capability-table {
        min-width: 840px;
    }

    .pp-v2-capability-table thead th:first-child {
        width: 40%;
    }

    .pp-v2-capability-table tbody th {
        font-size: 13px;
        line-height: 19px;
        padding: 12px;
    }

    .pp-v2-status {
        width: 22px;
        height: 22px;
    }

    .pp-v2-status svg {
        width: 12px;
        height: 12px;
    }

    .pp-v2-capability-table thead th {
        height: 78px;
    }

    .pp-v2-capability-table thead img {
        margin-bottom: 5px;
    }

    .pp-v2-capability-table__provider {
        font-size: 9px;
        line-height: 11px;
    }

    .pp-v2-features__header {
        padding: 20px 24px;
    }

    .pp-v2-features__title {
        font-size: 26px;
        line-height: 34px;
    }

    .pp-v2-features__list,
    .pp-v2-features__panel {
        padding: 20px 24px;
    }

    .pp-v2-cards-3col__header {
        padding: 30px 24px;
    }

    .pp-v2-cards-3col__title {
        font-size: 28px;
        line-height: 38px;
    }

    .pp-v2-cards-3col__card {
        padding: 30px 24px;
        min-height: auto;
    }

    .pp-v2-integrations__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pp-v2-integrations__header {
        padding: 10px 24px 28px;
    }

    .pp-v2-integrations__cell {
        min-height: 68px;
        padding: 14px 10px;
    }

    .pp-v2-integrations__cell img {
        max-width: var(--pp-mobile-logo-max-width, 70px);
        max-height: var(--pp-mobile-logo-max-height, 36px);
    }

    .pp-v2-integrations__footer {
        padding: 28px 24px;
    }

    .pp-v2-integrations__title {
        font-size: 28px;
        line-height: 38px;
        letter-spacing: -1px;
    }

    .pp-v2-cards-grid__row {
        grid-template-columns: 1fr;
    }

    .pp-v2-cards-grid__title {
        font-size: 26px;
        line-height: 36px;
    }

    .pp-v2-enterprise__stat {

        border-right: none;
        padding: 20px 16px;
        gap: 6px;
    }

    .pp-v2-enterprise__stat:last-child {
        border-right: 1px solid var(--pp-border-dark);
    }

    .pp-v2-enterprise__stat-value {
        line-height: 44px;
    }

    .pp-v2-enterprise__title {
        font-size: 28px;
        line-height: 38px;
    }

    .pp-v2-enterprise__certs {
        padding: 20px 16px;
    }

    .pp-v2-enterprise__cert {

        padding: 12px;
    }

    .pp-v2-enterprise__cert img {
        max-height: 82px;
    }

    .pp-v2-testimonials__header h2 {
        font-size: 28px;
        line-height: 38px;
    }

    .pp-v2-testimonials__stats {
        flex: none;
        width: 100%;
        gap: 20px;
    }

    .pp-v2-testimonials__stat {
        min-height: 116px;
        padding: 20px;
        margin-right: 0;
    }

    .pp-v2-testimonials__quote-block {
        width: 100%;
        padding-left: 0;
        padding-top: 28px;
        border-left: none;
        border-top: 1px solid var(--pp-border-light);
    }

    .pp-v2-faq-section {
        --pp-section-pad: 60px 0;
    }

    .pp-v2-faq__list {
        padding: 0;
    }

    .pp-v2-faq__title {
        font-size: 22px;
    }

    .pp-v2-faq__help-text,
    .pp-v2-faq__help-link {
        font-size: 16px;
    }

    .pp-v2-faq__question {
        padding: 20px;
        font-size: 16px;
    }

    .pp-v2-faq__answer-content {
        padding: 0 20px 20px;
    }

    .pp-v2-info-section__title {
        font-size: 32px;
        line-height: 42px;
    }

    .pp-v2-info-section--two-col .pp-v2-image-block {
        flex: 0 0 auto;
        width: 100%;
        min-height: 0;
    }

    .pp-v2-info-section__body .pp-v2-image-block {
        min-height: 260px;
    }

    .pp-v2-frontend-showcase__card {
        padding: 16px;
    }

    .pp-v2-frontend-showcase__copy {
        margin-top: 14px;
    }

    .pp-v2-frontend-showcase__copy h3 {
        font-size: 16px;
        line-height: 20px;
    }

    .pp-v2-frontend-showcase__copy p {
        font-size: 14px;
        line-height: 20px;
    }

    .pp-v2-cta__title {
        font-size: 32px;
        line-height: 40px;
    }

    .pp-v2-cta__container {
        padding: 0 24px;
    }

    .pp-v2-cta__buttons {
        flex-direction: column;
    }

    .pp-v2-cta__buttons .pp-v2-btn {
        width: 100%;
        max-width: 320px;
    }

    .pp-v2-stat-row {
        flex-direction: column;
    }
}

/* ============================================
   Responsive — 480px
   ============================================ */

@media (max-width: 1024px) {
    .pp-v2-hero--email .pp-v2-hero__content {
        margin-top: 0;
        padding-top: 24px;
        padding-bottom: 32px;
    }

    .pp-v2-hero--email .pp-v2-hero__content+.pp-v2-hero__visual {
        display: none;
    }

    .pp-v2-hero--email .pp-v2-hero__mobile-logos {
        --pp-hero-logo-size: clamp(56px, 7.2vw, 68px);
        --pp-hero-logo-gap: clamp(8px, 1.6vw, 12px);
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--pp-hero-logo-gap);
        max-width: min(100%, 620px);
        margin-left: auto;
        margin-right: auto;
    }

    .pp-v2-hero--email .pp-v2-hero__mobile-logos--top {
        margin-bottom: 24px;
    }

    .pp-v2-hero--email .pp-v2-hero__mobile-logos--bottom {
        margin-top: 24px;
    }

    .pp-v2-hero--email .pp-v2-hero__mobile-logo {
        --pp-hero-shell-opacity: 0.8;
        --pp-hero-icon-opacity: 0.78;
        width: var(--pp-hero-logo-size);
        height: var(--pp-hero-logo-size);
        border-radius: 50%;
        background: rgb(255 255 255 / var(--pp-hero-shell-opacity));
        box-shadow: 0 4px 12px rgb(0 0 0 / calc(var(--pp-hero-shell-opacity) * 0.16));
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(10px, 1.25vw, 12px);
        box-sizing: border-box;
    }

    .pp-v2-hero--email .pp-v2-hero__mobile-logo img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        opacity: var(--pp-hero-icon-opacity);
    }

    .pp-v2-hero__title {
        font-size: 30px;
        line-height: 1.12;
        letter-spacing: -0.6px;
    }

    .pp-v2-hero__description {
        font-size: 16px;
        line-height: 24px;
    }

    .pp-v2-hero__buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    .pp-v2-hero__buttons .pp-v2-btn {
        width: 100%;
        max-width: 320px;
    }

    .pp-v2-hero__trust {
        justify-content: space-evenly;
        align-items: center;
        gap: 6px;
        font-size: 13px;
    }

    .pp-v2-hero__visual {
        padding: 24px 20px 0;
    }

    .pp-v2-compare__container,
    .pp-v2-compare__panels,
    .pp-v2-compare__panel,
    .pp-v2-compare__panel-block {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }

    .pp-v2-compare__panel {
        padding: 16px;
    }

    .pp-v2-compare__panel-block .api-code-showcase-block,
    .pp-v2-compare__panel-block .api-code-wrapper,
    .pp-v2-compare__panel-block .api-code-pre {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }

    .pp-v2-compare__title {
        font-size: 22px;
        line-height: 30px;
    }

    .pp-v2-stat-row {
        flex-direction: column;
        gap: 8px;
    }

    .pp-v2-integrations__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pp-v2-integrations__title {
        font-size: 22px;
        line-height: 30px;
    }

    .pp-v2-integrations__subtitle {
        font-size: 16px;
        line-height: 23px;
    }

    .pp-v2-integrations__cell {
        min-height: 60px;
        padding: 12px 8px;
    }

    .pp-v2-integrations__cell img {
        max-width: var(--pp-mobile-logo-max-width, 62px);
        max-height: var(--pp-mobile-logo-max-height, 32px);
    }

    .pp-v2-testimonials__logos {
        flex-direction: column;
    }

    .pp-v2-testimonials__logo-tab {
        border-right: none;
        border-bottom: 1px solid var(--pp-border-light);
        flex: none;
        min-height: 60px;
        justify-content: flex-start;
        text-align: left;
    }

    .pp-v2-testimonials__logo-tab.active {
        border-bottom: 1px solid var(--pp-border-light);
        box-shadow: inset 4px 0 0 var(--pp-green);
    }



    .pp-v2-testimonials__panel {
        padding: 32px 20px;
    }

    .pp-v2-testimonials__stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pp-v2-faq__title {
        font-size: 20px;
    }

    .pp-v2-faq__help-text,
    .pp-v2-faq__help-link {
        font-size: 14px;
    }

    .pp-v2-faq__question {
        font-size: 14px;
        padding: 16px;
    }

    .pp-v2-faq__answer-content {
        font-size: 14px;
        padding: 0 16px 16px;
    }
}



@media (max-width: 555px) {
    .pp-v2-hero--email .pp-v2-hero__content {
        padding-top: 20px;
        padding-bottom: 24px;
    }

    .pp-v2-hero--email .pp-v2-hero__mobile-logos {
        --pp-hero-logo-size: clamp(50px, 13vw, 58px);
        --pp-hero-logo-gap: clamp(6px, 2vw, 9px);
        max-width: 100%;
    }

    .pp-v2-hero--email .pp-v2-hero__mobile-logos--top {
        margin-bottom: 20px;
    }

    .pp-v2-hero--email .pp-v2-hero__mobile-logos--bottom {
        margin-top: 20px;
    }
}




section.pp-v2-info-section--notetaker-triggers .pp-v2-info-section__subtitle {
    max-width: 1010px;
}


.pp-v2-info-section.pp-v2-info-section--notetaker-triggers + .pp-v2-cards-grid .pp-v2-cards-grid__title{
    margin-bottom: 10px;
}

.max-w-unset {
    max-width: unset;
}















/*********** SOLUTIONS VERTICAL 2026 ***********/
.sp26-v2-hero .pp-v2-hero__description {
    font-size: 20px;
    max-width: 599px;
    margin-bottom: 45px;
}

.sp26-v2-hero .pp-v2-hero__content {
    width: 612px;
}

.sp26-v2-hero .pp-v2-hero__title {
    font-weight: 600;
}

.sp26-v2-hero .pp-v2-hero__pre-title {
    font-size: 18px;
}

.sp26-v2-hero .pp-v2-hero__visual {
    max-width: 635px;
}

.sp26-v2-hero .pp-v2-hero__visual {
    justify-content: flex-start;
}

.pp-v2-hero__inner {
    justify-content: center;
    /* position: static!important; */
    gap: 15px;
}

.sp26-v2-enterprise .pp-v2-enterprise__subtitle {
    max-width: unset;
}

.sp26-v2-record {
    background: #fff;
    --pp-section-pad: 0;
}

.sp26-v2-record__container {
    max-width: 1200px;
    margin: 0 auto;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
}

.sp26-v2-record__header {
    padding: 58px 32px 42px;
    text-align: center;
}

.sp26-v2-record__header h2 {
    margin: 0 auto 11px;
    color: #000;
    font-family: var(--pp-font-heading);
    font-size: 45px;
    font-weight: 600;
    line-height: 44px;
    max-width: 907px;
    letter-spacing: -1.35px;
}

.sp26-v2-record__header p {
    max-width: 720px;
    margin: 25px auto 0;
    color: #000;
    font-family: var(--pp-font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -.22px;
}

.sp26-v2-record__stage {
    padding: 50px 16px;
}


.sp26-v2-record__image-wrap {
    max-width: 950px;
    margin: 0 auto;
    background: #fff;
}

.sp26-v2-record__image-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

.sp26-v2-context {
    background: #fff;
    --pp-section-pad: 0;
}

.sp26-v2-context__container {
    max-width: 1200px;
    margin: 0 auto;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
}

.sp26-v2-context__header {
    padding: 55px 32px 40px;
    text-align: center;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
}

.sp26-v2-context__eyebrow {
    display: block;
    margin-bottom: 13px;
    color: #8e8e8e;
    font-family: var(--pp-font-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.sp26-v2-context__title {
    margin: 0;
    color: #000;
    font-family: var(--pp-font-heading);
    font-size: 35px;
    font-weight: 600;
    line-height: 40px;
    text-wrap: balance;
    letter-spacing: -.63px;
}

.sp26-v2-context__title span,
.sp26-v2-context__copy h3 span {
    color: var(--pp-green-bold);
    font-weight: 700;
}

.sp26-v2-context__grid {
    background: #fff;
}

.sp26-v2-context__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 1fr);
    column-gap: 68px;
    align-items: center;
    min-height: 254px;
    padding: 43px 50px 65px;
    border-bottom: 1px solid #e7e7e7;
}

.sp26-v2-context__row:last-child {
    padding-bottom: 95px;
}

.sp26-v2-context__copy {
    max-width: 480px;
}

.sp26-v2-context__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    min-height: 25px;
    margin-bottom: 22px;
    padding: 4px 12px;
    border-radius: 3px;
    background: #008f7d;
    color: #fff;
    font-family: var(--pp-font-body);
    font-size: 9px;
    font-weight: 600;
    line-height: 12px;
}

.sp26-v2-context__copy h3 {
    margin: 0 0 9px;
    color: #000;
    font-family: var(--pp-font-heading);
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -.72px;
    text-wrap: pretty;
    max-width: 463px;
}

.sp26-v2-context__copy p {
    margin: 0;
    color: #050505;
    font-family: var(--pp-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -.16px;
    text-wrap: pretty;
}

.sp26-v2-context__list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 13px 0 0;
    padding: 0;
    list-style: none;
}

.sp26-v2-context__list li {
    position: relative;
    padding-left: 43px;
    color: #000;
    font-family: var(--pp-font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: -.12px;
    text-wrap: pretty;
}

.sp26-v2-context__list li::before {
    content: "";
    position: absolute;
    top: -3px;
    bottom: 0;
    margin: auto;
    left: 2px;
    width: 16px;
    height: 8px;
    border-left: 1.5px solid #00AC4A;
    border-bottom: 1.5px solid #00AC4A;
    transform: rotate(-45deg);
}

@media (max-width: 1024px) {
    .sp26-v2-record__container {
        max-width: calc(100% - 48px);
    }

    .sp26-v2-record__header {
        padding: 48px 28px 36px;
    }

    .sp26-v2-record__stage {
        padding: 12px 14px 34px;
    }

    .sp26-v2-context__container {
        max-width: calc(100% - 48px);
    }

    .sp26-v2-context__row {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
        column-gap: 38px;
        padding: 40px 42px;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__header {
        padding: 48px 28px 40px;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__layout {
        min-height: 0;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__logos {
        border-right: 0;
        border-bottom: 1px solid #282828;
        padding: 0;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__logo-tab {
        flex: 0 0 25%;
        min-width: 164px;
        justify-content: center;
        padding: 14px 18px;
        border-right: 1px solid #282828;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__logo-tab.active {
        border-bottom: 3px solid var(--pp-green-bold);
    }

    .sp26-v2-testimonials .pp-v2-testimonials__panels {
        min-height: 0;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__panel {
        padding: 34px 30px 38px;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__body {
        gap: 34px;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__body > .pp-v2-testimonials__quote-block:first-child {
        margin-left: 286px;
    }
}

@media (max-width: 768px) {
    .sp26-v2-record__container {
        max-width: none;
        border-left: 0;
        border-right: 0;
    }

    .sp26-v2-record__header h2 {
        font-size: 30px;
        line-height: 38px;
    }

    .sp26-v2-record__header p {
        font-size: 15px;
        line-height: 23px;
    }

    .sp26-v2-context__container {
        max-width: none;
        border-left: 0;
        border-right: 0;
    }

    .sp26-v2-context__header {
        padding: 34px 24px 32px;
    }

    .sp26-v2-context__title {
        font-size: 30px;
        line-height: 38px;
    }

    .sp26-v2-context__row {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
        padding: 38px 28px;
    }

    .sp26-v2-context__copy {
        max-width: none;
    }

    .sp26-v2-context__list {
        margin-top: 0;
    }

    .sp26-v2-context__list li {
        padding-left: 32px;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__header h2 {
        font-size: 30px;
        line-height: 38px;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__body {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__body > .pp-v2-testimonials__quote-block:first-child {
        margin-left: 0;
        padding-top: 0;
        border-top: 0;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__stats {
        width: 100%;
        min-width: 0;
        gap: 0;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__stat {
        flex: 1;
        min-height: 0;
        min-width: 0;
        padding: 0 20px 0 0;
        margin-right: 20px;
        border-right: 1px solid #343434;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__quote-block {
        max-width: none;
        width: 100%;
        padding-top: 26px;
        border-top: 1px solid #282828;
    }

    .sp26-v2-testimonials__footer {
        flex-direction: column;
        gap: 18px;
        padding: 28px 24px;
        text-align: center;
    }
}

@media (max-width: 555px) {
    .sp26-v2-record__header {
        padding: 38px 22px 30px;
    }

    .sp26-v2-record__header h2 {
        font-size: 27px;
        line-height: 34px;
    }

    .sp26-v2-record__stage {
        padding: 10px 10px 28px;
    }

    .sp26-v2-context__header {
        padding: 30px 22px 28px;
    }

    .sp26-v2-context__title {
        font-size: 26px;
        line-height: 34px;
    }

    .sp26-v2-context__row {
        padding: 34px 22px;
    }

    .sp26-v2-context__copy h3 {
        font-size: 21px;
        line-height: 27px;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__header {
        padding: 40px 22px 34px;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__logo-tab {
        justify-content: flex-start;
        min-width: 0;
        padding: 16px 24px;
        border-right: 0;
        border-bottom: 1px solid #282828;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__logo-tab.active {
        border-bottom: 1px solid #282828;
        box-shadow: inset 4px 0 0 var(--pp-green-bold);
    }

    .sp26-v2-testimonials .pp-v2-testimonials__panel {
        padding: 30px 22px 34px;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__headline {
        font-size: 22px;
        line-height: 29px;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__stats {
        flex-direction: column;
        gap: 18px;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__stat {
        padding: 0 0 18px;
        margin-right: 0;
        border-right: 0;
        border-bottom: 1px solid #343434;
    }

    .sp26-v2-testimonials .pp-v2-testimonials__stat:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }
}



.pp-v2-faq-section .container{
    max-width: 1200px;
    padding: 0 20px;
}


.pp-v2-enterprise + .pp-v2-faq-section{
    border-top: 1px solid var(--pp-border-dark);
}