/* Resources, Pathline marketing (three-column index + article) */
body.pl-landing-resources {
    --pl-res-ink: #0e0e0e;
    --pl-res-muted: #666;
    --pl-res-line: #e4e4e4;
    --pl-res-inset: clamp(20px, 5vw, 48px);
    --pl-res-gap: 16px;
    background: #fff;
}

body.pl-landing-resources .pl-res-kicker {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
}

body.pl-landing-resources .pl-res-kicker a {
    color: inherit;
    text-decoration: none;
}

body.pl-landing-resources .pl-res-kicker a:hover {
    color: var(--pl-res-ink);
}

/* ── Type filter (index) ── */
body.pl-landing-resources .pl-res-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 2px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px var(--pl-res-inset) 0;
    border-top: 1px solid var(--pl-res-line);
}

body.pl-landing-resources .pl-res-filter-btn {
    appearance: none;
    margin: 0;
    padding: 10px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #888;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

body.pl-landing-resources .pl-res-filter-btn:hover {
    color: var(--pl-res-ink);
}

body.pl-landing-resources .pl-res-filter-btn.is-active {
    color: var(--pl-res-ink);
    border-bottom-color: var(--pl-res-ink);
}

body.pl-landing-resources .pl-res-filter-btn:focus-visible {
    outline: 2px solid #1774ff;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    body.pl-landing-resources .pl-res-filter {
        position: sticky;
        top: var(--pl-marketing-header-h, 72px);
        z-index: 8;
        flex-wrap: nowrap;
        gap: 0;
        max-width: none;
        margin: 0;
        padding: 0 0 0 var(--pl-res-inset);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        border-top: 1px solid var(--pl-res-line);
        border-bottom: 1px solid var(--pl-res-line);
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        mask-image: linear-gradient(
            to right,
            #000 0,
            #000 calc(100% - 36px),
            transparent 100%
        );
    }

    body.pl-landing-resources .pl-res-filter::-webkit-scrollbar {
        display: none;
    }

    body.pl-landing-resources .pl-res-filter-btn {
        flex: 0 0 auto;
        padding: 14px 16px;
        font-size: 14px;
        white-space: nowrap;
        scroll-snap-align: start;
        touch-action: manipulation;
    }

    body.pl-landing-resources .pl-res-filter-btn:last-child {
        margin-right: var(--pl-res-inset);
    }
}

/* ── Three equal columns ── */
body.pl-landing-resources .pl-res-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pl-res-gap);
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px var(--pl-res-inset) clamp(40px, 6vh, 64px);
}

body.pl-landing-resources .pl-res-tile.is-filtered-out {
    display: none;
}

body.pl-landing-resources .pl-res-tile {
    --mx: 50%;
    --my: 50%;
    --pl-grow-flash: #1774ff;
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    min-width: 0;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    border: 1px solid var(--pl-res-line);
    background: #fafafa;
    color: var(--pl-res-ink);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

body.pl-landing-resources .pl-res-tile[data-tag="product"] {
    --pl-grow-flash: #1774ff;
}

body.pl-landing-resources .pl-res-tile[data-tag="design"] {
    --pl-grow-flash: #7c3aed;
}

body.pl-landing-resources .pl-res-tile[data-tag="web-studio"] {
    --pl-grow-flash: #2563eb;
}

body.pl-landing-resources .pl-res-tile[data-tag="forms"] {
    --pl-grow-flash: #0d9488;
}

body.pl-landing-resources .pl-res-tile[data-tag="voice"] {
    --pl-grow-flash: #6366f1;
}

body.pl-landing-resources .pl-res-tile[data-tag="team"] {
    --pl-grow-flash: #008556;
}

body.pl-landing-resources .pl-res-tile[data-tag="engineering"] {
    --pl-grow-flash: #0f766e;
}

body.pl-landing-resources .pl-res-tile[data-tag="company"] {
    --pl-grow-flash: #b45309;
}

body.pl-landing-resources .pl-res-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--pl-grow-flash);
    clip-path: circle(0% at var(--mx) var(--my));
    transition:
        clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.38s cubic-bezier(0.4, 0, 0.2, 1) 0.12s;
}

body.pl-landing-resources .pl-res-tile.is-hot::before {
    clip-path: circle(160% at var(--mx) var(--my));
}

body.pl-landing-resources .pl-res-tile.is-ink::before {
    background-color: #0e0e0e;
}

body.pl-landing-resources .pl-res-tile.is-leaving::before {
    clip-path: circle(0% at var(--mx) var(--my));
    background-color: var(--pl-grow-flash);
    transition:
        clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.2s ease;
}

body.pl-landing-resources .pl-res-tile > * {
    position: relative;
    z-index: 1;
}

body.pl-landing-resources .pl-res-tile:hover {
    border-color: #0e0e0e;
}

body.pl-landing-resources .pl-res-tile.is-hot .pl-res-tile-tag,
body.pl-landing-resources .pl-res-tile.is-hot .pl-res-tile-title,
body.pl-landing-resources .pl-res-tile.is-hot .pl-res-tile-deck,
body.pl-landing-resources .pl-res-tile.is-hot .pl-res-tile-meta {
    color: #fff;
    transition: color 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
    body.pl-landing-resources .pl-res-tile::before {
        transition: none;
    }

    body.pl-landing-resources .pl-res-tile.is-hot::before {
        clip-path: none;
        background: #0e0e0e;
    }
}

body.pl-landing-resources .pl-res-tile-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
}

body.pl-landing-resources .pl-res-tile-title {
    margin: 0;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

body.pl-landing-resources .pl-res-tile-deck {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--pl-res-muted);
}

body.pl-landing-resources .pl-res-tile-meta {
    margin-top: auto;
    padding-top: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
}

@media (max-width: 900px) {
    body.pl-landing-resources .pl-res-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.pl-landing-resources .pl-res-tile {
        min-height: 280px;
    }
}

@media (max-width: 640px) {
    body.pl-landing-resources .pl-res-grid {
        grid-template-columns: 1fr;
    }

    body.pl-landing-resources .pl-res-tile {
        min-height: 0;
        padding: 24px;
    }
}

/* ── Article ── */
body.pl-landing-resources--article .pl-res-article {
    max-width: 720px;
    margin: 0 auto;
    padding: calc(var(--pl-marketing-header-h, 72px) + clamp(48px, 8vh, 88px)) var(--pl-res-inset) clamp(56px, 8vh, 88px);
}

body.pl-landing-resources .pl-res-article-date {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
}

body.pl-landing-resources .pl-res-article-title {
    margin: 0 0 18px;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.08;
    color: var(--pl-res-ink);
}

body.pl-landing-resources .pl-res-article-deck {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.5;
    color: #444;
}

body.pl-landing-resources .pl-res-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
}

body.pl-landing-resources .pl-res-article-ai {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 40px;
    padding-top: 4px;
}

body.pl-landing-resources .pl-res-article-ai-btn {
    appearance: none;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid #0e0e0e;
    border-radius: 0;
    background: #0e0e0e;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

body.pl-landing-resources .pl-res-article-ai-btn:hover {
    background: #333;
    border-color: #333;
}

body.pl-landing-resources .pl-res-article-ai-hint {
    margin: 0;
    max-width: 28em;
    font-size: 13px;
    line-height: 1.45;
    color: var(--pl-res-muted, #6f6f6f);
}

body.pl-landing-resources .pl-res-author-photo-link {
    display: block;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #e8e8e8;
    text-decoration: none;
}

body.pl-landing-resources .pl-res-author-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.pl-landing-resources .pl-res-author-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.pl-landing-resources .pl-res-author-name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pl-res-ink);
    text-decoration: none;
}

body.pl-landing-resources .pl-res-author-name:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.pl-landing-resources .pl-res-author-meta {
    margin: 0;
    font-size: 13px;
    color: #888;
}

body.pl-landing-resources .pl-res-article-body {
    font-size: 17px;
    line-height: 1.7;
    color: #2a2a2a;
}

body.pl-landing-resources .pl-res-article-body p,
body.pl-landing-resources .pl-res-article-body ul,
body.pl-landing-resources .pl-res-article-body ol,
body.pl-landing-resources .pl-res-article-body blockquote {
    margin: 0 0 1.25em;
}

body.pl-landing-resources .pl-res-article-body h2 {
    margin: 2em 0 0.75em;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--pl-res-ink);
}

body.pl-landing-resources .pl-res-article-body h3 {
    margin: 1.75em 0 0.5em;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--pl-res-ink);
}

body.pl-landing-resources .pl-res-article-body h3:first-child {
    margin-top: 0;
}

body.pl-landing-resources .pl-res-article-body li {
    margin: 0 0 0.65em;
}

body.pl-landing-resources .pl-res-article-body ul,
body.pl-landing-resources .pl-res-article-body ol {
    padding-left: 1.25em;
}

body.pl-landing-resources .pl-res-article-body blockquote {
    margin: 2em 0;
    padding: 0 0 0 1.1em;
    border-left: 2px solid #0e0e0e;
}

body.pl-landing-resources .pl-res-article-body blockquote p {
    margin: 0;
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: var(--pl-res-ink);
}

body.pl-landing-resources .pl-res-article-body a {
    color: var(--pl-res-ink);
    text-underline-offset: 3px;
}

body.pl-landing-resources .pl-res-article-body a:has(> .pl-link-out-icon) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.pl-landing-resources .pl-res-article-body pre {
    margin: 0 0 1.25em;
    padding: 16px 18px;
    overflow-x: auto;
    border: 1px solid var(--pl-res-line);
    background: #f7f7f7;
    font-size: 13px;
    line-height: 1.55;
}

body.pl-landing-resources .pl-res-code {
    position: relative;
    margin: 0 0 1.25em;
    border: 1px solid var(--pl-res-line);
    background: #f7f7f7;
}

body.pl-landing-resources .pl-res-code-copy {
    appearance: none;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #666;
    cursor: pointer;
    transition: color 0.15s ease;
}

body.pl-landing-resources .pl-res-code-copy:hover {
    color: #0e0e0e;
}

body.pl-landing-resources .pl-res-code-copy.is-copied {
    color: #0e0e0e;
}

body.pl-landing-resources .pl-res-code-copy .pl-res-code-copy-check {
    display: none;
}

body.pl-landing-resources .pl-res-code-copy.is-copied .pl-res-code-copy-icon {
    display: none;
}

body.pl-landing-resources .pl-res-code-copy.is-copied .pl-res-code-copy-check {
    display: block;
}

body.pl-landing-resources .pl-res-code pre {
    margin: 0;
    border: none;
    background: transparent;
    padding-right: 44px;
}

body.pl-landing-resources .pl-res-article-body pre.pl-res-tree {
    line-height: 1.45;
}

body.pl-landing-resources .pl-res-article-body pre.pl-res-tree code {
    font-variant-ligatures: none;
}

body.pl-landing-resources .pl-res-article-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.92em;
}

body.pl-landing-resources .pl-res-article-body pre code {
    font-size: inherit;
}

body.pl-landing-resources .pl-res-article-embed {
    margin: 2em 0 1.5em;
}

body.pl-landing-resources .pl-res-article-embed .pl-time-bento {
    display: block;
    max-width: 340px;
    margin: 0 auto;
}

body.pl-landing-resources .pl-res-article-embed--wide .pl-time-bento {
    max-width: 100%;
}

/* Full-width iOS/Android pocket stage inside news articles */
body.pl-landing-resources .pl-res-article-embed--ios .pl-time-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.pl-landing-resources .pl-res-article-embed--ios .pl-time-ios-stage {
    width: 100%;
    height: 440px;
    min-height: 440px;
    max-height: 440px;
    padding: 24px 16px 0;
    box-sizing: border-box;
}

body.pl-landing-resources .pl-res-article-embed--ios .pl-ios-anim {
    max-width: 260px;
    transform: scale(1.45);
    transform-origin: bottom center;
    margin-bottom: 8px;
}

@media (max-width: 640px) {
    body.pl-landing-resources .pl-res-article-embed--ios .pl-time-ios-stage {
        height: 360px;
        min-height: 360px;
        max-height: 360px;
    }

    body.pl-landing-resources .pl-res-article-embed--ios .pl-ios-anim {
        transform: scale(1.15);
    }
}

body.pl-landing-resources .pl-res-article-embed .pl-time-card {
    width: 100%;
    min-height: 0;
}

body.pl-landing-resources .pl-res-article-shot {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--pl-res-line);
    background: #fafafa;
}

body.pl-landing-resources .pl-res-article-stores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px 0 0;
}

body.pl-landing-resources .pl-res-article-stores .pl-landing-v4-footer-appstore-img--light {
    display: none;
}

body.pl-landing-resources .pl-res-article-stores .pl-landing-v4-footer-appstore-img--dark {
    display: block;
}

body.pl-landing-resources .pl-res-article-embed--ws .pl-landing-ws-chat {
    max-width: 420px;
    margin: 0 auto;
    border: 1px solid var(--pl-res-line);
    background: #fafafa;
}

body.pl-landing-resources .pl-res-article-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    margin-top: 56px;
    padding-top: 36px;
    border-top: 1px solid var(--pl-res-line);
}

body.pl-landing-resources .pl-res-discover-title {
    margin: 0 0 4px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: #888;
}

/* Same tiles as index; break out of article column width */
body.pl-landing-resources .pl-res-grid--discover {
    width: min(1200px, calc(100vw - (2 * var(--pl-res-inset))));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 12px 0 0;
    border-top: none;
}

body.pl-landing-resources--article .pl-res-grid--discover .pl-res-tile-title {
    font-size: clamp(18px, 2vw, 24px);
}

body.pl-landing-resources .pl-res-back {
    align-self: flex-start;
    font-size: 14px;
    font-weight: 600;
    color: var(--pl-res-ink);
    text-decoration: none;
}

body.pl-landing-resources .pl-res-back:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.pl-landing-resources .pl-res-article-sales {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin: 0 0 32px;
    padding: 18px 20px;
    border: 1px solid var(--pl-res-line);
    background: #fafafa;
}

body.pl-landing-resources .pl-res-article-sales-copy {
    margin: 0;
    flex: 1 1 220px;
    max-width: 36em;
    font-size: 15px;
    line-height: 1.5;
    color: #2a2a2a;
}

body.pl-landing-resources .pl-res-article-sales .pl-time-btn {
    flex: 0 0 auto;
}