/* ==========================================================================
   Site 6: the paid-traffic (PPC) landing pages and their chrome
   - partials/header-ppc.php  (.s6-header--ppc)
   - partials/footer-ppc.php  (.s6-footer--ppc + the PPC signup modal .ppc-modal)
   - landing-pages/youtube-instagram-links-6.php     (.l6-page--ytig)
   - landing-pages/youtube-instagram-links-v2-6.php  (.l6-page--ytig2)
   - landing-pages/youtube-app-links-v2-6.php        (.l6-page--ytv2)
   Shared page pieces sit under .l6-page--ppc. Builds on css/the25-landing6.css
   (the kit, --l6-* tokens) and css/the25-site6.css (chrome, --s6-* tokens).

   Pushed by Home@youtubeInstagramLinks, @youtubeInstagramLinksV2 and
   @youtubeCreators3V2 on EVERY language: the localized URLs still render the
   previous templates, but with this header, footer and modal.
   No em/en dashes in copy; no gradient text; the hard shadow is the link form's.
   ========================================================================== */

/* ==========================================================================
   1. Header: the site header bar, logo + one CTA (no menus)
   ========================================================================== */

.s6-header--ppc .s6-header-bar {
    justify-content: space-between;
}

.s6-ppc-cta {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.s6-header--ppc .s6-ppc-cta .s6-btn {
    min-height: 44px;
}

@media (max-width: 419.98px) {
    .s6-header--ppc .s6-logo img {
        height: 26px;
    }

    .s6-header--ppc .s6-ppc-cta .s6-btn {
        padding: 0 14px;
        font-size: 14.5px;
    }
}

/* ==========================================================================
   2. Footer: just the legal line, on the navy band
   ========================================================================== */

.s6-footer.s6-footer--ppc,
#footer-main.s6-footer--ppc {
    padding: 30px 0;
}

.s6-footer--ppc .s6-footer-bottom {
    padding-top: 0;
    border-top: 0;
}

.s6-footer--ppc .s6-footer-legal a {
    color: rgba(255, 255, 255, .78);
    font-weight: 700;
}

/* ==========================================================================
   3. The PPC signup modal (#accountModal .ppc-modal), in the home-6 look:
   logo on white, Nunito heading, 52px fields, blue submit, ink
   bordered Google button. Ids, names and the JS in footer-ppc.php unchanged.
   ========================================================================== */

#accountModal .modal-dialog:has(.ppc-modal) {
    max-width: 460px;
}

.ppc-modal,
.ppc-modal :not(i):not(svg):not(circle) {
    font-family: var(--s6-text, "DM Sans", sans-serif);
}

.ppc-modal {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(11, 23, 52, .35);
    text-align: center;
}

.ppc-modal .simple-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 27, 46, .06);
    color: var(--s6-muted, #6b7688);
    font-size: 14px;
    cursor: pointer;
    transition: background-color .18s, color .18s;
}

.ppc-modal .simple-modal-close:hover,
.ppc-modal .simple-modal-close:focus-visible {
    background: rgba(13, 27, 46, .11);
    color: var(--s6-ink, #0d1b2e);
}

.ppc-modal .simple-modal-close:focus-visible {
    outline: 3px solid rgba(94, 168, 255, .7);
    outline-offset: 2px;
}

.ppc-modal .simple-modal-body {
    position: relative;
    padding: 0 40px 30px;
}

/* The logo on white, as on the login card and the site's signup modal */
.ppc-modal .ppc-modal-logo {
    display: block;
    width: auto;
    height: 34px;
    margin: 44px auto 18px;
    color: var(--s6-ink, #0d1b2e);
    font-family: var(--s6-display, "Nunito Sans", sans-serif);
    font-size: 22px;
    font-weight: 900;
    line-height: 34px;
}

/* Progress bar: striped track, blue fill (JS sets the width) */
.ppc-modal .ppc-progress-bar {
    margin: 4px 0 22px;
}

.ppc-modal .ppc-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background-image: repeating-linear-gradient(45deg, #e6ecf3, #e6ecf3 8px, #d7dfe9 8px, #d7dfe9 16px);
    background-size: 22.63px 22.63px;
    animation: ppc-stripes .8s linear infinite;
}

.ppc-modal .ppc-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--s6-blue, #0967f2), #5ea8ff);
    transition: width .6s ease;
}

@keyframes ppc-stripes {
    0% { background-position: 0 0; }
    100% { background-position: 22.63px 0; }
}

/* Loading screen ("Generating your App Link to YouTube") */
.ppc-modal #ppc-loading-screen {
    text-align: center;
}

.ppc-modal .ppc-loading-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 250px;
    padding: 6px 0 20px;
}

.ppc-modal .ppc-spinner {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(9, 103, 242, .16);
    border-top-color: var(--s6-blue, #0967f2);
    border-radius: 50%;
    animation: ppc-spin .75s linear infinite;
}

@keyframes ppc-spin {
    to { transform: rotate(360deg); }
}

.ppc-modal .ppc-loading-text {
    margin: 0;
    color: var(--s6-ink, #0d1b2e);
    font-family: var(--s6-display, "Nunito Sans", sans-serif) !important;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.ppc-modal .ppc-loading-url {
    max-width: 100%;
    margin: 0;
    padding: 8px 14px;
    border: 1px dashed var(--s6-line, #dce3ec);
    border-radius: 12px;
    background: var(--s6-haze, #f1f5fa);
    color: var(--s6-body, #465366);
    font-size: 13px;
    text-align: center;
    word-break: break-all;
}

/* Header */
.ppc-modal .simple-modal-header {
    margin-bottom: 20px;
}

.ppc-modal .simple-modal-header h2 {
    margin: 0 0 8px;
    color: var(--s6-ink, #0d1b2e);
    font-family: var(--s6-display, "Nunito Sans", sans-serif) !important;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.01em;
}

.ppc-modal .simple-modal-sublabel {
    margin: 0 0 14px;
    color: var(--s6-body, #465366);
    font-size: 15.5px;
    line-height: 1.5;
}

/* "Your link: ..." (empty until the visitor typed a link) */
.ppc-modal #ppc-modal-detected-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 9px 14px;
    border: 1px dashed var(--s6-line, #dce3ec);
    border-radius: 12px;
    background: var(--s6-haze, #f1f5fa);
    color: var(--s6-ink, #0d1b2e);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-all;
}

.ppc-modal #ppc-modal-detected-link:empty {
    display: none;
}

.ppc-modal #ppc-modal-detected-link i {
    color: var(--s6-blue, #0967f2);
    font-size: 12px;
}

.ppc-modal .simple-modal-free-text {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 6px 13px;
    border-radius: 999px;
    background: #e4f6ee;
    color: #0b7a4d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

/* Email form */
.ppc-modal .simple-modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ppc-modal .simple-modal-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ppc-modal .simple-modal-input-wrapper > i:first-child {
    position: absolute;
    left: 16px;
    color: #8a94a6;
    font-size: 15px;
    pointer-events: none;
    transition: color .18s;
}

.ppc-modal .simple-modal-input-wrapper input {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px 14px 44px;
    border: 1.5px solid var(--s6-line, #dce3ec);
    border-radius: 12px;
    background: #fff;
    color: var(--s6-ink, #0d1b2e);
    font-size: 16px;
    transition: border-color .18s, box-shadow .18s;
}

.ppc-modal .simple-modal-input-wrapper input::placeholder {
    color: #8a94a6;
}

.ppc-modal .simple-modal-input-wrapper input:focus {
    border-color: var(--s6-blue, #0967f2);
    outline: none;
    box-shadow: 0 0 0 4px rgba(9, 103, 242, .14);
}

.ppc-modal .simple-modal-input-wrapper:focus-within > i:first-child {
    color: var(--s6-blue, #0967f2);
}

.ppc-modal .simple-modal-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    border: 0;
    border-radius: 12px;
    background: var(--s6-blue, #0967f2);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s, transform .15s;
    -webkit-appearance: none;
}

.ppc-modal .simple-modal-submit:hover {
    background: var(--s6-blue-deep, #0648b5);
}

.ppc-modal .simple-modal-submit:active {
    transform: translateY(1px);
}

.ppc-modal .simple-modal-submit:focus-visible {
    outline: 3px solid rgba(9, 103, 242, .45);
    outline-offset: 2px;
}

.ppc-modal .simple-modal-submit .btn-text,
.ppc-modal .simple-modal-submit .btn-icon {
    color: inherit;
}

.ppc-modal .simple-modal-submit .btn-icon {
    display: inline-flex;
    align-items: center;
    width: auto;   /* the theme's global .btn-icon is a 50px square */
    height: auto;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    transition: transform .18s;
}

.ppc-modal .simple-modal-submit:hover .btn-icon {
    transform: translateX(3px);
}

/* OR + Google (ink border, hard shadow) + Facebook / X */
.ppc-modal .ppc-secondary-auth {
    margin: 0;
}

.ppc-modal .ppc-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
}

.ppc-modal .ppc-divider::before,
.ppc-modal .ppc-divider::after {
    flex: 1;
    height: 1px;
    background: var(--s6-line, #dce3ec);
    content: "";
}

.ppc-modal .ppc-divider span {
    color: var(--s6-muted, #6b7688);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.ppc-modal .ppc-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 12px 20px;
    border: 1.5px solid var(--s6-ink, #0d1b2e);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 0 var(--s6-ink, #0d1b2e);
    color: var(--s6-ink, #0d1b2e);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background-color .15s;
}

.ppc-modal .ppc-google-btn:hover,
.ppc-modal .ppc-google-btn:focus-visible {
    background: var(--s6-haze, #f1f5fa);
    color: var(--s6-ink, #0d1b2e);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--s6-ink, #0d1b2e);
}

.ppc-modal .ppc-google-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--s6-ink, #0d1b2e);
}

.ppc-modal .ppc-google-logo {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.ppc-modal .simple-modal-social {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.ppc-modal .simple-modal-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--s6-line, #dce3ec);
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
    text-decoration: none;
}

.ppc-modal .simple-modal-social-btn:hover {
    border-color: var(--s6-ink, #0d1b2e);
}

.ppc-modal .simple-modal-social-btn .fa-facebook-f { color: #1877f2; }
.ppc-modal .simple-modal-social-btn .fa-x-twitter { color: #000; }

/* Terms, sign in, trust */
.ppc-modal .simple-modal-terms {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.ppc-modal .simple-modal-terms-text {
    margin: 0;
    color: var(--s6-muted, #6b7688);
    font-size: 12.5px;
    line-height: 1.6;
}

.ppc-modal .simple-modal-terms-text a {
    color: var(--s6-body, #465366);
    text-decoration: underline;
}

.ppc-modal .simple-modal-login-link {
    margin: 10px 0 0;
    color: var(--s6-body, #465366);
    font-size: 14.5px;
}

.ppc-modal .simple-modal-login-link a {
    color: var(--s6-blue-deep, #0648b5);
    font-weight: 700;
    text-decoration: none;
}

.ppc-modal .simple-modal-login-link a:hover {
    text-decoration: underline;
}

.ppc-modal .simple-modal-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--s6-line, #dce3ec);
}

.ppc-modal .simple-modal-avatars {
    display: flex;
}

.ppc-modal .simple-modal-avatars img {
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
}

.ppc-modal .simple-modal-avatars .cp-face + .cp-face {
    margin-left: -8px;
}

.ppc-modal .simple-modal-trust-text {
    color: var(--s6-body, #465366);
    font-size: 13px;
    font-weight: 700;
}

/* Kept from the previous modal: a shake hook other scripts may use */
@keyframes modalShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}

.modal-shake-animation {
    animation: modalShake .4s ease-in-out;
}

@media (max-width: 480px) {
    #accountModal .modal-dialog:has(.ppc-modal) {
        margin: 12px;
    }

    .ppc-modal {
        border-radius: 20px;
    }

    .ppc-modal .simple-modal-body {
        padding: 0 22px 26px;
    }

    .ppc-modal .simple-modal-header h2 {
        font-size: 26px;
    }
}

/* ==========================================================================
   4. Page basics shared by the three pages
   ========================================================================== */

/* Hero kicker: app logos + one line */
.l6-page--ppc .ppc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px !important;
    padding: 6px 14px 6px 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
}

.l6-page--ppc .ppc-kicker img {
    flex: none;
    width: 20px;
    height: 20px;
}

.l6-page--ppc .ppc-kicker .fa-arrow-right {
    color: rgba(255, 255, 255, .55);
    font-size: .7rem;
}

/* Checks under a form */
.l6-page--ppc .ppc-note {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 16px 0 0;
    padding: 0;
    color: rgba(255, 255, 255, .74);
    font-size: .88rem;
    list-style: none;
}

.l6-page--ppc .ppc-note li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.l6-page--ppc .ppc-note i {
    color: var(--l6-mint);
    font-size: .74rem;
}

.l6-page--ppc .ppc-note--light {
    color: var(--l6-muted);
}

.l6-page--ppc .ppc-note--light i {
    color: var(--l6-go);
}

/* Buttons (no hard shadow: that belongs to the link form) */
.l6-page--ppc .ppc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 26px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background: var(--l6-blue);
    color: #fff;
    font-family: var(--l6-text);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.l6-page--ppc .ppc-btn:hover {
    background: var(--l6-blue-deep);
    color: #fff;
}

.l6-page--ppc .ppc-btn:active {
    transform: translateY(1px);
}

.l6-page--ppc .ppc-btn i {
    font-size: .9em;
    transition: transform 160ms ease;
}

.l6-page--ppc .ppc-btn:hover .fa-arrow-right {
    transform: translateX(3px);
}

/* Ghost on navy */
.l6-page--ppc .ppc-btn--ghost {
    border-color: rgba(255, 255, 255, .3);
    background: transparent;
    color: #fff;
}

.l6-page--ppc .ppc-btn--ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .06);
}

/* White on the blue final panel */
.l6-page--ppc .ppc-btn--white {
    background: #fff;
    color: var(--l6-ink);
}

.l6-page--ppc .ppc-btn--white:hover {
    background: var(--l6-ink);
    color: #fff;
}

.l6-page--ppc .ppc-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* A centred CTA row under a section */
.l6-page--ppc .ppc-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: clamp(40px, 5vw, 60px);
    text-align: center;
}

.l6-page--ppc .ppc-cta-row > p {
    color: var(--l6-ink);
    font-size: 1.1rem;
    font-weight: 700;
}

.l6-page--ppc .ppc-cta-row .ppc-note {
    justify-content: center;
    margin-top: 0;
}

.l6-page--ppc .ppc-subhead {
    margin: clamp(56px, 7vw, 88px) 0 24px;
    color: var(--l6-ink);
    font-family: var(--l6-display);
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.l6-page--ppc .ppc-step-note {
    display: block;
    margin-top: 8px;
    color: var(--l6-muted);
    font-size: .86rem;
}

.l6-page--ppc .ppc-faq-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-weight: 700;
    text-decoration: none;
}

.l6-page--ppc .ppc-faq-cta {
    display: block;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--l6-line);
}

.l6-page--ppc .ppc-faq-cta b {
    display: block;
    margin-bottom: 14px;
    color: var(--l6-ink);
    font-family: var(--l6-display);
    font-size: 1.35rem;
    line-height: 1.2;
}

.l6-page--ppc .ppc-faq-cta .ppc-microcopy--light {
    display: block;
    margin-top: 12px !important;
    color: var(--l6-muted);
    font-size: .88rem;
}

/* The /youtube-app-links-v2 H1 is a long ad headline: one step smaller */
.l6-page--ytv2 .l6-hero .l6-display {
    font-size: clamp(2.3rem, 3.7vw, 3.8rem);
}

/* Second lead line: the fix, in white */
.l6-page--ppc .ppc-lead-strong {
    margin-top: 12px !important;
    color: #fff;
    font-weight: 700;
}

/* Hero copy column on a button hero (no form) */
.l6-page--ppc .ppc-hero .l6-proof {
    margin-top: 28px;
}

/* Final panel: a button instead of a form */
.l6-page--ppc .ppc-final-act {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.l6-page--ppc .ppc-final-act .l6-form-note {
    margin-top: 0 !important;
}

.l6-page--ppc .ppc-final-act > a:not(.ppc-btn) {
    color: #fff;
    font-weight: 700;
    text-underline-offset: 3px;
}

.l6-page--ppc .ppc-final-tag {
    margin-top: 6px !important;
    color: rgba(255, 255, 255, .86);
    font-size: .95rem;
    font-style: italic;
}

/* ==========================================================================
   5. Store buttons with their live score (partials/site6-ppc/stores.php)
   ========================================================================== */

.l6-page--ppc .ppc-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--ppc .ppc-stores li {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.l6-page--ppc .ppc-store {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 168px;
    min-height: 48px;
    padding: 8px 18px 8px 14px;
    border-radius: 12px;
    background: #000;
    color: #fff;
    line-height: 1.1;
    text-decoration: none;
}

.l6-page--ppc .ppc-store:hover {
    background: #1d2433;
    color: #fff;
}

.l6-page--ppc .ppc-store i {
    font-size: 24px;
}

.l6-page--ppc .ppc-store small {
    display: block;
    font-size: .68rem;
    opacity: .8;
}

.l6-page--ppc .ppc-store b {
    display: block;
    font-size: 1.02rem;
}

.l6-page--ppc .ppc-store-score {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--l6-body);
    font-size: .8rem;
}

.l6-page--ppc .ppc-store-score b {
    color: var(--l6-ink);
}

.l6-page--ppc .ppc-stores--dark .ppc-store-score {
    color: rgba(255, 255, 255, .8);
}

.l6-page--ppc .ppc-stores--dark .ppc-store-score b {
    color: #fff;
}

/* Five stars filled to --ppc-stars (0-5) */
.l6-page--ppc .ppc-stars {
    --ppc-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.8-4.9 4.6 1.3 6.5L12 17.3l-5.9 3.2 1.3-6.5L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E");
    display: inline-block;
    width: 70px;
    height: 13px;
    background: linear-gradient(90deg, #f5a623 calc(var(--ppc-stars, 0) / 5 * 100%), rgba(13, 27, 46, .18) 0);
    -webkit-mask: var(--ppc-star) 0 0 / 14px 13px repeat-x;
    mask: var(--ppc-star) 0 0 / 14px 13px repeat-x;
}

.l6-page--ppc .ppc-stores--dark .ppc-stars {
    background: linear-gradient(90deg, var(--l6-amber) calc(var(--ppc-stars, 0) / 5 * 100%), rgba(255, 255, 255, .25) 0);
}

/* ==========================================================================
   6. Phone screens: YouTube in Instagram's browser vs the YouTube app
   (partials/site6-ppc/yt_phone.php). Everything in em; the phone's font-size
   is set by the context (flip, duo).
   ========================================================================== */

.l6-page--ppc .ppc-phone {
    margin: 0 auto;
}

.l6-page--ppc .ppc-scr {
    display: flex;
    flex-direction: column;
    padding-top: 3.3em;
    overflow: hidden;
    background: #fff;
    color: #0f0f0f;
    font-family: var(--l6-ui);
    transition: opacity 450ms ease;
}

.l6-page--ppc .ppc-scr i {
    line-height: 1;
}

/* Instagram's in-app browser bar */
.l6-page--ppc .ppc-igbar {
    display: flex;
    flex: none;
    align-items: center;
    gap: .8em;
    height: 3.2em;
    padding: 0 1.1em;
    border-bottom: 1px solid #e6e8ec;
    background: #fafafa;
}

.l6-page--ppc .ppc-igbar > i {
    color: #262626;
    font-size: 1.05em;
}

.l6-page--ppc .ppc-igbar-url {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.l6-page--ppc .ppc-igbar-url b {
    font-size: .85em;
}

.l6-page--ppc .ppc-igbar-url small {
    display: flex;
    align-items: center;
    gap: .35em;
    color: #737373;
    font-size: .68em;
}

.l6-page--ppc .ppc-igbar-url small i {
    font-size: .85em;
}

/* YouTube header (mobile site and app) */
.l6-page--ppc .ppc-ythead {
    display: flex;
    flex: none;
    align-items: center;
    gap: .4em;
    height: 3em;
    padding: 0 1em;
}

.l6-page--ppc .ppc-ythead img {
    width: 1.55em;
    height: 1.55em;
}

.l6-page--ppc .ppc-ythead b {
    font-size: 1.02em;
    font-weight: 800;
    letter-spacing: -.04em;
}

.l6-page--ppc .ppc-ythead-tools {
    display: flex;
    align-items: center;
    gap: .95em;
    margin-left: auto;
    font-size: .95em;
}

.l6-page--ppc .ppc-signin-pill {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .32em .7em;
    border: 1px solid #d3d3d3;
    border-radius: 999px;
    color: #065fd4;
    font-size: .8em;
    font-weight: 600;
}

.l6-page--ppc .ppc-me {
    display: grid;
    flex: none;
    width: 1.9em;
    height: 1.9em;
    place-items: center;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-size: .76em;
    font-weight: 700;
}

/* Player */
.l6-page--ppc .ppc-player {
    position: relative;
    flex: none;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
}

.l6-page--ppc .ppc-player img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.l6-page--ppc .ppc-player-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 3.4em;
    height: 2.4em;
    place-items: center;
    border-radius: .7em;
    background: #ff0033;
    color: #fff;
    font-size: 1em;
    transform: translate(-50%, -50%);
}

.l6-page--ppc .ppc-player-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: .26em;
    background: rgba(255, 255, 255, .35);
}

.l6-page--ppc .ppc-player-bar i {
    position: relative;
    display: block;
    width: 38%;
    height: 100%;
    background: #ff0033;
}

.l6-page--ppc .ppc-player-bar i::after {
    position: absolute;
    top: 50%;
    right: -.4em;
    width: .8em;
    height: .8em;
    border-radius: 50%;
    background: #ff0033;
    content: "";
    transform: translateY(-50%);
}

.l6-page--ppc .ppc-vmeta {
    padding: .8em 1em .25em;
}

.l6-page--ppc .ppc-vmeta b {
    display: block;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.25;
}

.l6-page--ppc .ppc-chan {
    display: flex;
    flex: none;
    align-items: center;
    gap: .6em;
    padding: .45em 1em;
}

.l6-page--ppc .ppc-chan img {
    width: 2.1em;
    height: 2.1em;
    border-radius: 50%;
    object-fit: cover;
}

.l6-page--ppc .ppc-chan > span {
    font-size: .85em;
    font-weight: 600;
}

.l6-page--ppc .ppc-subbtn {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    margin-left: auto;
    padding: .5em 1em;
    border-radius: 999px;
    background: #0f0f0f;
    color: #fff;
    font-size: .76em;
    font-style: normal;
    font-weight: 700;
}

.l6-page--ppc .ppc-subbtn--on {
    background: #f2f2f2;
    color: #0f0f0f;
}

.l6-page--ppc .ppc-acts {
    display: flex;
    flex: none;
    gap: .5em;
    padding: .5em 1em;
}

.l6-page--ppc .ppc-acts span {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .5em .85em;
    border-radius: 999px;
    background: #f2f2f2;
    font-size: .72em;
    font-weight: 600;
}

.l6-page--ppc .ppc-acts span.is-on {
    background: #0f0f0f;
    color: #fff;
}

/* Signed out: dim + "Sign in" sheet */
.l6-page--ppc .ppc-skel {
    display: flex;
    flex-direction: column;
    gap: .55em;
    padding: .9em 1em;
}

.l6-page--ppc .ppc-skel i {
    display: block;
    width: 80%;
    height: .7em;
    border-radius: .35em;
    background: #eef0f3;
}

.l6-page--ppc .ppc-skel i:nth-child(2) {
    width: 56%;
}

.l6-page--ppc .ppc-dim {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: rgba(0, 0, 0, .42);
    transition: opacity 400ms ease;
}

.l6-page--ppc .ppc-sheet {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: .4em;
    padding: 1.6em 1.4em 2em;
    border-radius: 1.4em 1.4em 0 0;
    background: #fff;
    text-align: left;
    transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
}

.l6-page--ppc .ppc-sheet::before {
    position: absolute;
    top: .6em;
    left: 50%;
    width: 2.8em;
    height: .3em;
    border-radius: .2em;
    background: #d6d6d6;
    content: "";
    transform: translateX(-50%);
}

.l6-page--ppc .ppc-sheet b {
    font-size: 1.02em;
    line-height: 1.25;
}

.l6-page--ppc .ppc-sheet small {
    color: #606060;
    font-size: .8em;
    line-height: 1.35;
}

.l6-page--ppc .ppc-sheet-btn {
    align-self: flex-end;
    margin-top: .7em;
    padding: .6em 1.2em;
    border-radius: 999px;
    background: #065fd4;
    color: #fff;
    font-size: .82em;
    font-weight: 700;
}

/* Signed in: comments + up next */
.l6-page--ppc .ppc-comment {
    display: flex;
    flex: none;
    align-items: center;
    gap: .6em;
    margin: .45em 1em;
    padding: .55em .8em;
    border-radius: .8em;
    background: #f2f2f2;
    color: #606060;
    font-size: .74em;
}

.l6-page--ppc .ppc-comment .ppc-me {
    width: 1.8em;
    height: 1.8em;
    font-size: .9em;
}

.l6-page--ppc .ppc-next-title {
    padding: .35em 1em 0;
    font-size: .8em !important;
    font-weight: 700;
}

.l6-page--ppc .ppc-next {
    display: flex;
    flex: none;
    gap: .7em;
    padding: .45em 1em;
}

.l6-page--ppc .ppc-next img {
    flex: none;
    width: 7.4em;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: .6em;
    object-fit: cover;
}

.l6-page--ppc .ppc-next > span {
    display: flex;
    flex-direction: column;
    gap: .25em;
    min-width: 0;
}

.l6-page--ppc .ppc-next b {
    font-size: .78em;
    line-height: 1.25;
}

.l6-page--ppc .ppc-next small {
    color: #606060;
    font-size: .68em;
}

/* ==========================================================================
   7. Flip: one phone, two endings, switched by the picks (P1 hero)
   ========================================================================== */

.l6-page--ppc .ppc-flip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 26px 24px 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 28px;
    background:
        radial-gradient(60% 50% at 50% 42%, rgba(94, 168, 255, .22), transparent 70%),
        rgba(255, 255, 255, .03);
}

.l6-page--ppc .ppc-flip-picks {
    display: inline-flex;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

.l6-page--ppc .ppc-flip-picks button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .78);
    font-family: var(--l6-text);
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}

.l6-page--ppc .ppc-flip-picks button[aria-pressed="true"] {
    background: #fff;
    color: var(--l6-ink);
}

.l6-page--ppc .ppc-flip-picks button[data-flip="web"][aria-pressed="true"] i {
    color: var(--l6-stop);
}

.l6-page--ppc .ppc-flip-picks button[data-flip="app"][aria-pressed="true"] i {
    color: var(--l6-go);
}

.l6-page--ppc .ppc-flip-stage {
    position: relative;
    padding-top: 22px;
}

.l6-page--ppc .ppc-flip .ppc-phone {
    font-size: 13px;
}

/* The link the viewer tapped, above the phone */
.l6-page--ppc .ppc-flip-link {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px 9px 10px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(2, 10, 30, .35);
    color: var(--l6-ink);
    font-size: .92rem;
    white-space: nowrap;
    transform: translateX(-50%);
}

.l6-page--ppc .ppc-flip-link img {
    width: 22px;
    height: 22px;
}

.l6-page--ppc .ppc-flip-url--web {
    color: var(--l6-muted);
}

.l6-page--ppc .ppc-flip-url b {
    color: var(--l6-blue);
}

.l6-page--ppc .ppc-flip-token {
    position: absolute;
    z-index: 5;
    right: -44px;
    bottom: 34%;
    width: 72px;
    height: 72px;
    transition: opacity 300ms ease, transform 400ms cubic-bezier(.3, 1.4, .5, 1);
}

.l6-page--ppc .ppc-flip-caption {
    display: flex;
    justify-content: center;
    min-height: 40px;
}

.l6-page--ppc .ppc-flip-cap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 700;
}

.l6-page--ppc .ppc-flip-cap--web {
    background: rgba(229, 72, 77, .16);
    color: #ffb4b6;
}

.l6-page--ppc .ppc-flip-cap--app {
    background: rgba(94, 224, 160, .16);
    color: var(--l6-mint);
}

/* State switches (data-state on .ppc-flip) */
.l6-page--ppc .ppc-flip[data-state="app"] .ppc-scr--web,
.l6-page--ppc .ppc-flip[data-state="web"] .ppc-scr--app {
    opacity: 0;
}

.l6-page--ppc .ppc-flip[data-state="app"] .ppc-sheet {
    transform: translateY(105%);
}

.l6-page--ppc .ppc-flip[data-state="web"] .ppc-sheet {
    transition-delay: 250ms;
}

.l6-page--ppc .ppc-flip[data-state="app"] .ppc-dim {
    opacity: 0;
}

.l6-page--ppc .ppc-flip[data-state="app"] .ppc-flip-url--web,
.l6-page--ppc .ppc-flip[data-state="web"] .ppc-flip-url--app,
.l6-page--ppc .ppc-flip[data-state="app"] .ppc-flip-cap--web,
.l6-page--ppc .ppc-flip[data-state="web"] .ppc-flip-cap--app {
    display: none;
}

.l6-page--ppc .ppc-flip[data-state="app"] .ppc-flip-token--web,
.l6-page--ppc .ppc-flip[data-state="web"] .ppc-flip-token--app {
    opacity: 0;
    transform: scale(.6) rotate(-12deg);
}

.l6-page--ppc .ppc-flip[data-state="app"] .ppc-subbtn--on,
.l6-page--ppc .ppc-flip[data-state="app"] .ppc-acts .is-on {
    animation: ppc-pop 600ms 350ms cubic-bezier(.3, 1.5, .5, 1) both;
}

@keyframes ppc-pop {
    0% { transform: scale(.7); opacity: .2; }
    100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   8. Duo: the two endings side by side, with labels and bullets
   ========================================================================== */

/* Each column is a subgrid (label, phone, bullets), so the two phones stay
   level even when one label wraps to two lines. */
.l6-page--ppc .ppc-duo {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: 4%;
    row-gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--ppc .ppc-duo > li {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-items: start;
    justify-items: center;
    min-width: 0;
}

.l6-page--ppc .ppc-duo .ppc-tag {
    align-self: end;
}

.l6-page--ppc .ppc-duo .ppc-phone {
    font-size: clamp(6.4px, 2.2cqw, 12px);
}

.l6-page--ppc .ppc-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.l6-page--ppc .ppc-tag--bad {
    background: var(--l6-stop-soft);
    color: #b4232a;
}

.l6-page--ppc .ppc-tag--good {
    background: var(--l6-go-soft);
    color: #0b7a4d;
}

.l6-page--ppc .l6-hero .ppc-tag--bad {
    background: rgba(229, 72, 77, .16);
    color: #ffb4b6;
}

.l6-page--ppc .l6-hero .ppc-tag--good {
    background: rgba(94, 224, 160, .16);
    color: var(--l6-mint);
}

.l6-page--ppc .ppc-bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 260px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-size: .92rem;
    line-height: 1.35;
}

.l6-page--ppc .ppc-bullets li {
    display: flex;
    gap: 9px;
}

.l6-page--ppc .ppc-bullets i {
    flex: none;
    margin-top: 3px;
    font-size: .85rem;
}

.l6-page--ppc .ppc-bullets--bad i {
    color: var(--l6-stop);
}

.l6-page--ppc .ppc-bullets--good i {
    color: var(--l6-go);
}

.l6-page--ppc .l6-hero .ppc-bullets {
    color: rgba(255, 255, 255, .8);
}

.l6-page--ppc .l6-hero .ppc-bullets--bad i {
    color: #ff8a8e;
}

.l6-page--ppc .l6-hero .ppc-bullets--good i {
    color: var(--l6-mint);
}

/* ==========================================================================
   9. Form band: a navy panel holding a second link form
   ========================================================================== */

.l6-page--ppc .ppc-band {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    margin-top: clamp(48px, 6vw, 80px);
    padding: clamp(28px, 4vw, 48px);
    border-radius: 28px;
    background:
        radial-gradient(50% 80% at 92% 10%, rgba(9, 103, 242, .45), transparent 70%),
        radial-gradient(40% 70% at 0% 100%, rgba(225, 48, 108, .18), transparent 70%),
        var(--l6-navy);
    color: rgba(255, 255, 255, .78);
}

.l6-page--ppc .ppc-band h3 {
    margin: 0 0 6px;
    color: #fff;
    font-family: var(--l6-display);
    font-size: clamp(1.6rem, 2.5vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.l6-page--ppc .ppc-band p {
    color: rgba(255, 255, 255, .78);
}

.l6-page--ppc .ppc-band .l6-form {
    margin-top: 0;
}

.l6-page--ppc .ppc-band .l6-form .lp3-url-input-group {
    border-color: #fff;
    box-shadow: 4px 4px 0 var(--l6-blue);
}

.l6-page--ppc .ppc-band .l6-form .lp3-url-input-group:focus-within {
    box-shadow: 5px 5px 0 var(--l6-mint);
}

.l6-page--ppc .ppc-band .l6-form .lp3-url-error {
    color: #ffb4b6;
}

.l6-page--ppc .ppc-band-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin-top: 16px;
}

.l6-page--ppc .ppc-band-foot .l6-proof {
    margin-top: 0;
}

.l6-page--ppc .ppc-example {
    color: rgba(255, 255, 255, .78);
    font-size: .92rem;
}

.l6-page--ppc .ppc-example a {
    color: var(--l6-link-on-dark);
    font-weight: 700;
    text-underline-offset: 3px;
}

.l6-page--ppc .ppc-example a:hover {
    color: #fff;
}

/* ==========================================================================
   10. P1: every place Instagram lets you share a link (mini screens)
   ========================================================================== */

.l6-page--ppc .ppc-spots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .92fr);
    gap: 22px;
}

.l6-page--ppc .ppc-spot {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 12px 12px 22px;
    border: 1px solid var(--l6-line);
    border-radius: 26px;
    background: var(--l6-paper);
    box-shadow: 0 1px 0 rgba(13, 27, 46, .04), 0 18px 40px rgba(13, 27, 46, .07);
}

.l6-page--ppc .ppc-spot-art {
    display: grid;
    height: 300px;
    margin-bottom: 18px;
    overflow: hidden;
    place-items: center;
    border-radius: 18px;
    background:
        radial-gradient(70% 60% at 50% 30%, rgba(225, 48, 108, .12), transparent 70%),
        linear-gradient(160deg, #fff0f6 0%, #f4f1ff 100%);
}

.l6-page--ppc .ppc-spot figcaption {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px;
}

.l6-page--ppc .ppc-spot figcaption b {
    color: var(--l6-ink);
    font-size: 1.12rem;
    line-height: 1.25;
}

.l6-page--ppc .ppc-spot figcaption span {
    font-size: .98rem;
    line-height: 1.5;
}

.l6-page--ppc .ppc-spot--result {
    justify-content: center;
    padding: 28px 26px;
    border: 0;
    background:
        radial-gradient(70% 50% at 80% 0%, rgba(94, 168, 255, .35), transparent 70%),
        var(--l6-navy);
    color: rgba(255, 255, 255, .8);
}

.l6-page--ppc .ppc-spot-token {
    width: 84px;
    height: 84px;
    margin-bottom: 16px;
    animation: l6-bob 3.2s ease-in-out infinite;
}

.l6-page--ppc .ppc-spot-result {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px !important;
    color: #fff;
    font-family: var(--l6-display);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
}

.l6-page--ppc .ppc-spot-result img {
    flex: none;
    width: 26px;
    height: 26px;
}

.l6-page--ppc .ppc-spot--result .l6-check-list li {
    color: rgba(255, 255, 255, .86);
}

.l6-page--ppc .ppc-spot--result .l6-check-list i {
    color: var(--l6-mint);
}

/* A cropped phone screen, sized in em (10px) */
.l6-page--ppc .ppc-mini {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 18em;
    height: 26em;
    overflow: hidden;
    border: .45em solid #0f1828;
    border-radius: 2.2em;
    background: #fff;
    box-shadow: 0 1.8em 3.4em rgba(13, 27, 46, .22);
    color: #0f1419;
    font-family: var(--l6-ui);
    font-size: 10px;
    line-height: 1.3;
}

.l6-page--ppc .ppc-mini img {
    display: block;
}

.l6-page--ppc .ppc-mini-tap {
    position: absolute;
    z-index: 4;
    width: 4em;
    height: 4em;
    object-fit: contain; /* the hand is tall (landing6/hand.webp); without this it was stretched square */
    animation: ppc-tap 2.6s ease-in-out infinite;
}

@keyframes ppc-tap {
    0%, 100% { transform: translate(.6em, .6em) rotate(-8deg); }
    45%, 55% { transform: translate(0, 0) rotate(-8deg) scale(.94); }
}

/* Story */
.l6-page--ppc .ppc-mini--story {
    background: #111;
}

.l6-page--ppc .ppc-mini-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.l6-page--ppc .ppc-mini-bars {
    position: relative;
    z-index: 2;
    display: flex;
    gap: .3em;
    padding: .9em .9em 0;
}

.l6-page--ppc .ppc-mini-bars i {
    flex: 1;
    height: .25em;
    border-radius: .2em;
    background: rgba(255, 255, 255, .5);
}

.l6-page--ppc .ppc-mini-bars i:first-child {
    background: #fff;
}

.l6-page--ppc .ppc-mini-who {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .7em .9em;
    color: #fff;
    font-size: 1.05em;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.l6-page--ppc .ppc-mini-who img {
    width: 2.2em;
    height: 2.2em;
    border: .15em solid #fff;
    border-radius: 50%;
    object-fit: cover;
}

.l6-page--ppc .ppc-mini-sticker {
    position: absolute;
    z-index: 3;
    top: 58%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .65em 1em;
    border-radius: .8em;
    background: #fff;
    box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .3);
    color: #3b5bdb;
    font-size: 1.05em;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%) rotate(-3deg);
}

.l6-page--ppc .ppc-mini--story .ppc-mini-tap {
    top: 60%;
    left: 56%;
}

/* Profile with a bio link */
.l6-page--ppc .ppc-mini--bio {
    padding: 1.1em 1em 0;
}

.l6-page--ppc .ppc-mini-handle {
    display: flex;
    align-items: center;
    gap: .4em;
    margin-bottom: .9em;
    font-size: 1.2em;
    font-weight: 800;
}

.l6-page--ppc .ppc-mini-handle i {
    font-size: .7em;
}

.l6-page--ppc .ppc-mini-prof {
    display: flex;
    align-items: center;
    gap: .9em;
}

.l6-page--ppc .ppc-mini-ring {
    flex: none;
    padding: .2em;
    border-radius: 50%;
    background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}

.l6-page--ppc .ppc-mini-ring img {
    width: 5em;
    height: 5em;
    border: .2em solid #fff;
    border-radius: 50%;
    object-fit: cover;
}

.l6-page--ppc .ppc-mini-stats {
    display: flex;
    flex-direction: column;
    gap: .2em;
}

.l6-page--ppc .ppc-mini-stats b {
    font-size: 1.15em;
}

.l6-page--ppc .ppc-mini-stats small {
    color: #555;
    font-size: .95em;
}

.l6-page--ppc .ppc-mini-biolink {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    margin: .9em 0;
    color: #00376b;
    font-size: 1.1em;
    font-weight: 700;
}

.l6-page--ppc .ppc-mini-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45em;
}

.l6-page--ppc .ppc-mini-btns i {
    padding: .55em 0;
    border-radius: .6em;
    background: #efefef;
    font-size: .95em;
    font-style: normal;
    font-weight: 700;
    text-align: center;
}

.l6-page--ppc .ppc-mini-btns i:first-child {
    background: #0095f6;
    color: #fff;
}

.l6-page--ppc .ppc-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .2em;
    margin: 1em -1em 0;
}

.l6-page--ppc .ppc-mini-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.l6-page--ppc .ppc-mini--bio .ppc-mini-tap {
    top: 10.5em;
    left: 3.4em;
}

/* DM */
.l6-page--ppc .ppc-mini--dm {
    gap: .7em;
    padding: 0 1em 1em;
}

.l6-page--ppc .ppc-mini-chathead {
    display: flex;
    align-items: center;
    gap: .6em;
    margin: 0 -1em .4em;
    padding: 1.1em 1em .8em;
    border-bottom: 1px solid #efefef;
    font-size: 1.05em;
}

.l6-page--ppc .ppc-mini-chathead img {
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    object-fit: cover;
}

.l6-page--ppc .ppc-mini-msg {
    max-width: 82%;
    padding: .7em 1em;
    border-radius: 1.3em;
    font-size: 1.05em;
    line-height: 1.35;
}

.l6-page--ppc .ppc-mini-msg--in {
    align-self: flex-start;
    background: #efefef;
}

.l6-page--ppc .ppc-mini-msg--out {
    align-self: flex-end;
    background: linear-gradient(135deg, #6a3bf5, #3b82f6);
    color: #fff;
}

.l6-page--ppc .ppc-mini-msg--link {
    max-width: 92%;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .15em;
}

.l6-page--ppc .ppc-mini--dm .ppc-mini-tap {
    top: 15.3em; /* fingertip on the link bubble at the press frame (was 13.6em: above it) */
    left: 9.2em;
}

/* ==========================================================================
   11. P2: hero, the "same video" proof (phones + compare table + form)
   ========================================================================== */

.l6-page--ppc .ppc-hero-sub {
    max-width: 34em;
}

.l6-page--ppc .ppc-microcopy {
    margin-top: 14px !important;
    color: rgba(255, 255, 255, .66);
    font-size: .88rem;
}

.l6-page--ppc .ppc-proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(32px, 4.5vw, 72px);
    align-items: center;
}

.l6-page--ppc .ppc-proof-stage {
    padding: clamp(24px, 3vw, 36px) clamp(16px, 2.4vw, 32px) clamp(20px, 2.6vw, 30px);
    border-radius: 28px;
    background:
        radial-gradient(60% 45% at 50% 40%, rgba(9, 103, 242, .14), transparent 70%),
        var(--l6-haze);
}

/* Compare table: 3 rows, details shown by "Why does this happen?" */
.l6-page--ppc .ppc-compare {
    border-top: 2px solid var(--l6-ink);
}

.l6-page--ppc .ppc-compare-row {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid var(--l6-line);
}

.l6-page--ppc .ppc-compare-head {
    padding: 12px 0;
    color: var(--l6-muted);
    font-size: .86rem;
    font-weight: 700;
}

.l6-page--ppc .ppc-compare-head span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.l6-page--ppc .ppc-compare-head .fa-times-circle {
    color: var(--l6-stop);
}

.l6-page--ppc .ppc-compare-head .fa-check-circle {
    color: var(--l6-go);
}

.l6-page--ppc .ppc-compare-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--l6-ink);
    font-weight: 700;
}

.l6-page--ppc .ppc-compare-label img {
    flex: none;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.l6-page--ppc .ppc-compare-cell b {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--l6-ink);
    line-height: 1.35;
}

.l6-page--ppc .ppc-compare-cell b i {
    flex: none;
    font-size: .82rem;
}

.l6-page--ppc .ppc-compare-cell--bad b i {
    color: var(--l6-stop);
}

.l6-page--ppc .ppc-compare-cell--good b i {
    color: var(--l6-go);
}

.l6-page--ppc .ppc-compare-detail {
    display: block;
    margin-top: 6px;
    padding-left: 21px;
    font-size: .92rem;
    line-height: 1.5;
}

/* JS adds .is-collapsed on load; without JS every detail stays visible */
.l6-page--ppc .ppc-compare.is-collapsed .ppc-compare-detail {
    display: none;
}

.l6-page--ppc .ppc-expand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--l6-blue-deep);
    font-family: var(--l6-text);
    font-size: .98rem;
    font-weight: 700;
    cursor: pointer;
}

.l6-page--ppc .ppc-expand i {
    transition: transform 200ms ease;
}

.l6-page--ppc .ppc-expand[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* The form card under the proof */
.l6-page--ppc .ppc-band--proof {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
    justify-items: center;
    text-align: center;
}

.l6-page--ppc .ppc-band--proof h3 {
    margin-bottom: 12px;
}

.l6-page--ppc .ppc-band--proof .ppc-band-foot {
    margin-top: 4px;
}

.l6-page--ppc .ppc-band--proof .l6-form {
    width: 100%;
    max-width: 640px;
    text-align: left;
}

.l6-page--ppc .ppc-band--proof .ppc-band-foot {
    justify-content: center;
}

.l6-page--ppc .ppc-band--proof .ppc-stores {
    justify-content: center;
}

/* Why it matters: three cards, each a before -> after pair */
.l6-page--ppc .ppc-why .l6-card-art {
    flex-direction: column;
    gap: 10px;
    height: 200px;
}

.l6-page--ppc .ppc-why h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 14px 8px;
    font-family: var(--l6-display);
    font-size: 1.4rem;
    line-height: 1.15;
}

.l6-page--ppc .ppc-why h3 i {
    color: var(--l6-stop);
    font-size: 1.05rem;
}

.l6-page--ppc .ppc-why-fix {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 14px 14px 10px !important;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--l6-go-soft);
    color: #0b7a4d;
    font-size: .9rem;
    font-weight: 700;
}

.l6-page--ppc .ppc-why-gain {
    color: var(--l6-ink);
    font-size: .98rem;
}

/* before / after chips inside the card art */
.l6-page--ppc .ppc-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(13, 27, 46, .12);
    color: var(--l6-ink);
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
}

.l6-page--ppc .ppc-chip--bad {
    color: #b4232a;
    opacity: .9;
    text-decoration: line-through;
    text-decoration-color: rgba(180, 35, 42, .5);
}

.l6-page--ppc .ppc-chip--bad i {
    color: var(--l6-stop);
}

.l6-page--ppc .ppc-chip--good i {
    color: var(--l6-go);
}

.l6-page--ppc .ppc-chip-arrow {
    color: var(--l6-muted);
    font-size: .9rem;
}

/* Also works with your other links */
.l6-page--ppc .ppc-also {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.l6-page--ppc .ppc-also .l6-h2 {
    margin: 0;
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
}

.l6-page--ppc .ppc-apps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--ppc .ppc-apps li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 14px;
    border: 1px solid var(--l6-line);
    border-radius: 14px;
    background: #fff;
    color: var(--l6-ink);
    font-size: .95rem;
    font-weight: 700;
}

.l6-page--ppc .ppc-apps img {
    flex: none;
    width: 26px;
    height: 26px;
}

/* ==========================================================================
   12. P3: demo links, use cases, link types, the views estimate
   ========================================================================== */

.l6-page--ppc .ppc-demo-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(22px, 3vw, 34px);
    border-radius: 24px;
    background:
        radial-gradient(60% 60% at 90% 0%, rgba(94, 168, 255, .3), transparent 70%),
        var(--l6-navy);
    box-shadow: 0 30px 70px rgba(11, 23, 52, .25);
}

.l6-page--ppc .ppc-demo-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 14px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .8);
}

.l6-page--ppc .ppc-demo-row--new {
    background: #fff;
    color: var(--l6-body);
}

.l6-page--ppc .ppc-demo-row img {
    grid-row: span 2;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
}

.l6-page--ppc .ppc-demo-row--new img {
    background: var(--l6-haze);
}

.l6-page--ppc .ppc-demo-row small {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.l6-page--ppc .ppc-demo-row code {
    overflow: hidden;
    color: inherit;
    font-family: var(--l6-text);
    font-size: 1rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--ppc .ppc-demo-row--new code {
    color: var(--l6-ink);
}

.l6-page--ppc .ppc-demo-row--new code b {
    color: var(--l6-blue);
}

.l6-page--ppc .ppc-demo-row em {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .86rem;
    font-style: normal;
    font-weight: 700;
}

.l6-page--ppc .ppc-demo-row--old em {
    color: #ffb4b6;
}

.l6-page--ppc .ppc-demo-row--new em {
    color: #0b7a4d;
}

.l6-page--ppc .ppc-demo-arrow {
    align-self: center;
    color: rgba(255, 255, 255, .5);
}

.l6-page--ppc .ppc-demo-note {
    display: flex;
    gap: 9px;
    margin-top: 16px !important;
    color: var(--l6-muted);
    font-size: .92rem;
}

.l6-page--ppc .ppc-demo-note i {
    margin-top: 4px;
    color: var(--l6-blue);
}

.l6-page--ppc .ppc-btn--demo i.fab {
    color: #ff4e45;
}

.l6-page--ppc .ppc-btn--demo:hover i.fab {
    color: #fff;
}

/* Use cases: three groups of the eight places */
.l6-page--ppc .ppc-uses .l6-card-art {
    height: 230px;
}

.l6-page--ppc .ppc-uses h3 {
    margin: 0 0 12px;
    font-family: var(--l6-display);
    font-size: 1.4rem;
    line-height: 1.15;
}

.l6-page--ppc .ppc-uselist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--ppc .ppc-uselist li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 2px 12px;
}

.l6-page--ppc .ppc-uselist i,
.l6-page--ppc .ppc-uselist img {
    grid-row: span 2;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: var(--l6-haze);
    color: var(--l6-blue);
    font-size: .9rem;
}

.l6-page--ppc .ppc-uselist img {
    padding: 5px;
}

.l6-page--ppc .ppc-uselist b {
    color: var(--l6-ink);
    font-size: 1rem;
    line-height: 1.3;
}

.l6-page--ppc .ppc-uselist span {
    font-size: .94rem;
    line-height: 1.45;
}

.l6-page--ppc .ppc-uses .ppc-mini {
    height: 21em;
    font-size: 9px;
}

.l6-page--ppc .ppc-uses .l6-card-art .ppc-mini {
    margin-top: 40px;
}

/* Formats art: a Short, a video and a playlist stack */
.l6-page--ppc .ppc-formats {
    position: relative;
    width: 250px;
    height: 180px;
}

.l6-page--ppc .ppc-formats img {
    position: absolute;
    border: 3px solid #fff;
    border-radius: 12px;
    box-shadow: 0 14px 28px rgba(13, 27, 46, .2);
    object-fit: cover;
}

.l6-page--ppc .ppc-formats-short {
    z-index: 2;
    top: 0;
    left: 6px;
    width: 92px;
    height: 160px;
    transform: rotate(-5deg);
}

.l6-page--ppc .ppc-formats-video {
    top: 18px;
    right: 0;
    width: 170px;
    height: 104px;
    transform: rotate(4deg);
}

.l6-page--ppc .ppc-formats-list {
    top: 70px;
    right: 18px;
    width: 140px;
    height: 86px;
}

.l6-page--ppc .ppc-formats-tag {
    position: absolute;
    z-index: 3;
    right: 4px;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--l6-ink);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.l6-page--ppc .ppc-formats-tag img {
    position: static;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Beyond social art: an ad card and a QR code */
.l6-page--ppc .ppc-beyond {
    display: flex;
    align-items: center;
    gap: 18px;
}

.l6-page--ppc .ppc-beyond .l6-qr {
    width: 118px;
    height: 118px;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(13, 27, 46, .16);
}

.l6-page--ppc .ppc-ad {
    display: flex;
    flex-direction: column;
    width: 150px;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(13, 27, 46, .16);
    font-size: .72rem;
}

.l6-page--ppc .ppc-ad > span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    color: var(--l6-ink);
    font-weight: 700;
}

.l6-page--ppc .ppc-ad > span img {
    width: 16px;
    height: 16px;
}

.l6-page--ppc .ppc-ad > img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.l6-page--ppc .ppc-ad em {
    padding: 6px 9px;
    background: var(--l6-blue);
    color: #fff;
    font-style: normal;
    font-weight: 700;
    text-align: center;
}

/* Link types: nine checks */
.l6-page--ppc .ppc-types {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--ppc .ppc-types li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 18px;
    border: 1px solid var(--l6-line);
    border-radius: 16px;
    background: #fff;
    color: var(--l6-ink);
    font-weight: 700;
    line-height: 1.3;
}

.l6-page--ppc .ppc-types li > span:first-child {
    display: grid;
    flex: none;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: var(--l6-haze);
    color: var(--l6-blue);
}

.l6-page--ppc .ppc-types li > span:first-child img {
    width: 22px;
    height: 22px;
}

.l6-page--ppc .ppc-types small {
    display: block;
    color: var(--l6-muted);
    font-size: .82rem;
    font-weight: 400;
}

/* The views estimate */
.l6-page--ppc .ppc-calc {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    padding: clamp(28px, 4.5vw, 60px);
    border-radius: 28px;
    background:
        radial-gradient(50% 70% at 95% 0%, rgba(9, 103, 242, .45), transparent 70%),
        radial-gradient(40% 60% at 0% 100%, rgba(94, 224, 160, .12), transparent 70%),
        var(--l6-navy);
    color: rgba(255, 255, 255, .78);
}

.l6-page--ppc .ppc-calc .l6-eyebrow {
    color: rgba(255, 255, 255, .62);
}

.l6-page--ppc .ppc-calc .l6-h2 {
    color: #fff;
}

.l6-page--ppc .ppc-calc-fields {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-top: 30px;
}

.l6-page--ppc .ppc-calc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.l6-page--ppc .ppc-calc-head label {
    margin: 0;
    color: #fff;
    font-weight: 700;
    line-height: 1.35;
}

.l6-page--ppc .ppc-calc-head label small {
    display: block;
    color: rgba(255, 255, 255, .6);
    font-size: .82rem;
    font-weight: 400;
}

.l6-page--ppc .ppc-calc-val {
    color: var(--l6-mint);
    font-family: var(--l6-display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.l6-page--ppc .ppc-calc input[type="range"] {
    --fill: 50%;
    width: 100%;
    height: 44px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.l6-page--ppc .ppc-calc input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--l6-bar-blue) var(--fill), rgba(255, 255, 255, .16) var(--fill));
}

.l6-page--ppc .ppc-calc input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
}

.l6-page--ppc .ppc-calc input[type="range"]::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--l6-bar-blue);
}

.l6-page--ppc .ppc-calc input[type="range"]::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    margin-top: -9px;
    border: 3px solid var(--l6-navy);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px #fff;
    -webkit-appearance: none;
    appearance: none;
}

.l6-page--ppc .ppc-calc input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 3px solid var(--l6-navy);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px #fff;
}

.l6-page--ppc .ppc-calc input[type="range"]:focus-visible {
    outline: 3px solid var(--l6-sky);
    outline-offset: 2px;
}

.l6-page--ppc .ppc-calc-out {
    padding: clamp(24px, 3vw, 34px);
    border-radius: 22px;
    background: #fff;
    color: var(--l6-body);
}

.l6-page--ppc .ppc-calc-out-label {
    color: var(--l6-ink);
    font-weight: 700;
    line-height: 1.35;
}

.l6-page--ppc .ppc-calc-num {
    margin: 10px 0 4px !important;
    color: var(--l6-blue);
    font-family: var(--l6-display);
    font-size: clamp(3rem, 6vw, 4.6rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
}

.l6-page--ppc .ppc-calc-bar {
    display: flex;
    height: 14px;
    margin: 18px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--l6-haze);
}

.l6-page--ppc .ppc-calc-bar i {
    display: block;
    width: var(--w, 40%);
    height: 100%;
    background: var(--l6-blue);
    transition: width 250ms ease;
}

.l6-page--ppc .ppc-calc-math {
    color: var(--l6-muted);
    font-size: .88rem;
}

.l6-page--ppc .ppc-calc-disclaimer {
    margin-top: 14px !important;
    padding-top: 14px;
    border-top: 1px solid var(--l6-line);
    color: var(--l6-muted);
    font-size: .84rem;
    line-height: 1.5;
}

.l6-page--ppc .ppc-calc-out .ppc-btn {
    width: 100%;
    margin-top: 18px;
}

.l6-page--ppc .ppc-sample-chip {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--l6-haze);
    color: var(--l6-muted);
    font-size: .78rem;
    font-weight: 700;
}

/* Trust row under the X wall */
.l6-page--ppc .ppc-trust {
    padding: 0 0 clamp(56px, 7vw, 88px);
}

.l6-page--ppc .ppc-trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    padding: 22px 26px;
    border: 1px solid var(--l6-line);
    border-radius: 22px;
}

.l6-page--ppc .ppc-trust-row .l6-proof {
    margin-top: 0;
}

.l6-page--ppc .ppc-trust-row .l6-proof p {
    color: var(--l6-ink);
}

.l6-page--ppc .ppc-trust-row .l6-proof-faces img {
    border-color: #fff;
}

/* ==========================================================================
   13. Responsive (checked at 1440, 1180, 1024, 768, 390)
   ========================================================================== */

@media (max-width: 1180px) {
    .l6-page--ppc .ppc-flip,
    .l6-page--ppc .ppc-hero-duo {
        width: 100%;
        max-width: 640px;
        margin-inline: auto;
    }

    .l6-page--ppc .ppc-spots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .l6-page--ppc .ppc-proof-grid,
    .l6-page--ppc .ppc-calc {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--ppc .ppc-proof-stage {
        max-width: 640px;
        width: 100%;
        margin-inline: auto;
    }

    .l6-page--ppc .ppc-also {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The form needs the full width once the copy column gets narrow */
    .l6-page--ppc .ppc-band {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {

    .l6-page--ppc .ppc-types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .l6-page--ppc .ppc-apps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .l6-page--ppc .ppc-final-act {
        align-items: stretch;
    }
}

@media (max-width: 680px) {
    .l6-page--ppc .ppc-spots {
        grid-template-columns: minmax(0, 1fr);
        max-width: 420px;
        margin-inline: auto;
    }

    .l6-page--ppc .ppc-compare-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px 16px;
    }

    .l6-page--ppc .ppc-compare-label {
        grid-column: 1 / -1;
    }

    .l6-page--ppc .ppc-compare-head > :first-child {
        display: none;
    }

    .l6-page--ppc .ppc-compare-detail {
        padding-left: 0;
    }

    .l6-page--ppc .ppc-types {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .l6-page--ppc .ppc-flip {
        padding: 18px 12px 22px;
        border-radius: 22px;
    }

    .l6-page--ppc .ppc-flip .ppc-phone {
        font-size: 11px;
    }

    .l6-page--ppc .ppc-flip-picks button {
        padding: 0 13px;
        font-size: .86rem;
    }

    .l6-page--ppc .ppc-flip-token {
        right: -20px;
        width: 56px;
        height: 56px;
    }

    .l6-page--ppc .ppc-flip-link {
        font-size: .84rem;
    }

    .l6-page--ppc .ppc-hero-ctas .ppc-btn {
        width: 100%;
    }

    .l6-page--ppc .ppc-tag {
        padding: 6px 10px;
        font-size: .78rem;
    }

    .l6-page--ppc .ppc-bullets {
        gap: 6px;
        font-size: .82rem;
    }

    .l6-page--ppc .ppc-proof-stage {
        padding: 22px 12px 18px;
    }

    .l6-page--ppc .ppc-why .l6-card-art {
        height: 180px;
    }

    .l6-page--ppc .ppc-chip {
        padding: 9px 13px;
        font-size: .86rem;
    }

    .l6-page--ppc .ppc-demo-row {
        padding: 14px;
    }

    .l6-page--ppc .ppc-demo-row code {
        font-size: .9rem;
    }

    .l6-page--ppc .ppc-trust-row {
        padding: 18px;
    }

    /* Two store buttons side by side, each with its score under it */
    .l6-page--ppc .ppc-stores {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    .l6-page--ppc .ppc-store {
        min-width: 0;
        padding: 8px 10px;
        justify-content: center;
    }

    .l6-page--ppc .ppc-store i {
        font-size: 21px;
    }

    .l6-page--ppc .ppc-store b {
        font-size: .92rem;
    }

    .l6-page--ppc .ppc-store-score {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px 6px;
        font-size: .76rem;
    }
}

@media (max-width: 380px) {
    .l6-page--ppc .ppc-flip-picks button {
        padding: 0 10px;
        font-size: .8rem;
    }
}

/* ==========================================================================
   14. Reduced motion: no keyframes, the finished state only
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .l6-page--ppc .ppc-mini-tap,
    .l6-page--ppc .ppc-spot-token,
    .ppc-modal .ppc-progress-track {
        animation: none;
    }

    .l6-page--ppc .ppc-flip[data-state="app"] .ppc-subbtn--on,
    .l6-page--ppc .ppc-flip[data-state="app"] .ppc-acts .is-on {
        animation: none;
    }

    .l6-page--ppc .ppc-scr,
    .l6-page--ppc .ppc-sheet,
    .l6-page--ppc .ppc-dim,
    .l6-page--ppc .ppc-flip-token,
    .l6-page--ppc .ppc-calc-bar i {
        transition: none;
    }
}