/* ==========================================================================
   Python Bytes homepage (plan 021 redesign)
   Light theme. Tokens + all band styles are scoped to .home, so nothing
   leaks into other pages even if this file gets packed.
   ========================================================================== */

.home {
    /* surfaces - white ground; elevation = soft shadow + hairline border */
    --pb-bg: hsl(0, 0%, 100%);
    --pb-bg-alt: hsl(220, 27%, 96%);
    --pb-surface: hsl(0, 0%, 100%);
    --pb-surface-2: hsl(220, 20%, 93%);
    --pb-hairline: hsla(222, 30%, 15%, 0.10);

    /* text */
    --pb-text: hsl(222, 25%, 14%);
    --pb-text-2: hsl(222, 12%, 30%);
    --pb-text-3: hsl(220, 8%, 44%);

    /* accents - brand orange #f19128 + link blue, nothing else */
    --pb-accent: hsl(30, 88%, 57%);
    --pb-accent-hover: hsl(30, 88%, 64%);
    --pb-on-accent: #fff; /* white on orange, legibility helped by a soft text shadow */
    --pb-accent-text: hsl(27, 90%, 34%);
    --pb-link: hsl(197, 100%, 29%);

    /* shape + elevation */
    --pb-radius-sm: 6px;
    --pb-radius-md: 12px;
    --pb-shadow-md: 0 1px 3px rgba(16, 24, 40, 0.10), 0 4px 12px rgba(16, 24, 40, 0.08);
    --pb-shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.10), 0 12px 32px rgba(16, 24, 40, 0.16);

    color: var(--pb-text-2);
}

.home .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   Bands - restores the a/b rhythm (R1) with real breathing room (R2)
   -------------------------------------------------------------------------- */

.home .pb-band {
    padding: 64px 0;
    background: var(--pb-bg);
}

.home .pb-band-alt {
    background: var(--pb-bg-alt);
}

.home .pb-section-h {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 30px;
    color: var(--pb-text);
    text-align: center;
    margin: 0 0 8px;
}

.home .pb-section-h-sm {
    font-size: 24px;
    text-align: left;
}

.home .pb-section-sub {
    font-size: 15px;
    color: var(--pb-text-3);
    text-align: center;
    margin: 0 0 32px;
}

.home .pb-eyebrow {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pb-accent-text);
}

/* --------------------------------------------------------------------------
   Buttons (R5: ghost replaces btn-default; dark text on orange for WCAG)
   -------------------------------------------------------------------------- */

.home .pb-btn-primary {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 16px;
    background: var(--pb-accent);
    color: var(--pb-on-accent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    border: none;
    padding: 12px 20px;
    border-radius: var(--pb-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms ease;
}

.home .pb-btn-primary:hover,
.home .pb-btn-primary:focus {
    background: var(--pb-accent-hover);
    color: var(--pb-on-accent);
    text-decoration: none;
}

.home .pb-btn-lg {
    font-size: 17px;
    padding: 14px 26px;
}

.home .pb-btn-ghost {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 15px;
    background: transparent;
    color: var(--pb-text-2);
    border: 1px solid var(--pb-hairline);
    padding: 11px 18px;
    border-radius: var(--pb-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}

.home .pb-btn-ghost:hover,
.home .pb-btn-ghost:focus {
    background: var(--pb-surface-2);
    color: var(--pb-text);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   1 · Hero - kept from production; the logo breathes on white
   -------------------------------------------------------------------------- */

.home .banner-section {
    margin: 40px auto 0;
    text-align: center;
    background: url('/static/img/banner_750.png') no-repeat center center;
    background-size: cover;
    height: 600px;
}

.home .pb-hero-actions {
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
}

.home .pb-hero-actions .container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.home .pb-youtube-red {
    color: #e23b2e;
}

/* --------------------------------------------------------------------------
   2 · Metrics band - naked numbers, no boxes
   -------------------------------------------------------------------------- */

.home .pb-metrics {
    padding: 32px 0;
    border-top: 1px solid var(--pb-hairline);
    border-bottom: 1px solid var(--pb-hairline);
    margin-top: 32px;
}

.home .pb-metrics-row {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    text-align: center;
}

.home .pb-metric-value {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: var(--pb-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.home .pb-metric-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pb-text-3);
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   3 · Latest episode - chrome-free row, thumbnail on wide displays only
   -------------------------------------------------------------------------- */

.home .pb-latest {
    max-width: 1020px;
    margin: 0 auto;
    display: flex;
    gap: 32px;
    align-items: center;
}

.home .pb-latest-main {
    flex: 1;
    min-width: 0;
}

.home .pb-latest-title {
    font-size: 30px;
    line-height: 1.25;
    margin: 10px 0 18px;
}

.home .pb-latest-title a {
    color: var(--pb-text);
    text-decoration: none;
}

.home .pb-latest-title a:hover {
    color: var(--pb-accent-text);
}

.home .pb-topics {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.home .pb-topics li {
    position: relative;
    padding: 4px 0 4px 22px;
    font-size: 16px;
}

.home .pb-topics li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 13px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pb-accent);
}

.home .pb-latest-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.home .pb-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--pb-text-3);
    font-size: 15px;
    text-decoration: none;
}

.home .pb-play:hover {
    color: var(--pb-text);
    text-decoration: none;
}

.home .pb-play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pb-accent);
    color: var(--pb-on-accent);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
}

.home .pb-play:hover .pb-play-btn {
    background: var(--pb-accent-hover);
}

.home .pb-play-btn i {
    margin-left: 3px;
}

.home .pb-latest-thumb {
    flex: 0 0 390px;
}

.home .pb-latest-thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

@media (max-width: 1020px) {
    .home .pb-latest-thumb {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   4 · Subscribe slice - reuses .subscribe-buttons from site.css, upsized
   -------------------------------------------------------------------------- */

.home .pb-subscribe-slice .subscribe-buttons {
    font-size: 13px;
    margin: 0;
    color: var(--pb-text-2);
}

.home .pb-subscribe-slice .subscribe-buttons a {
    color: var(--pb-text-2);
    margin: 6px 14px;
    border-radius: var(--pb-radius-sm);
    transition: transform 150ms ease, color 150ms ease;
}

.home .pb-subscribe-slice .subscribe-buttons a:hover {
    transform: translateY(-3px);
    color: var(--pb-text);
    text-decoration: none;
}

.home .pb-subscribe-slice .subscribe-buttons img {
    width: 56px;
    border-radius: 12px;
    display: block;
    margin: 0 auto 8px;
}

/* The band heading carries this line; hide the partial's inner copy */
.home .pb-subscribe-slice .subscribe-buttons .subscribe-cta {
    display: none;
}

/* --------------------------------------------------------------------------
   5 · Search - full width, high profile
   -------------------------------------------------------------------------- */

.home .pb-search-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.home .pb-search-form input {
    flex: 1;
    min-width: 220px;
    max-width: 640px;
    height: 56px;
    font-size: 17px;
    padding: 0 16px;
    background: var(--pb-surface);
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-sm);
    color: var(--pb-text);
    font-family: 'Nunito Sans', sans-serif;
}

.home .pb-search-form input::placeholder {
    color: var(--pb-text-3);
}

/* --------------------------------------------------------------------------
   6 · Hosts - 96px of air above, symmetric cards (R10 replaces .host-image)
   -------------------------------------------------------------------------- */

.home .pb-hosts {
    padding-top: 96px;
}

.home .pb-hosts-intro {
    max-width: 640px;
    margin: 0 auto 48px;
    font-size: 18px;
    line-height: 1.7;
}

.home .pb-hosts-intro a {
    color: var(--pb-link);
}

.home .pb-host-cards {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.home .pb-host-card {
    width: 300px;
    text-align: center;
    padding: 32px 24px;
    background: var(--pb-surface);
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-md);
    box-shadow: var(--pb-shadow-md);
}

.home .pb-host-card img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--pb-hairline);
}

.home .pb-host-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--pb-text);
    margin: 16px 0 4px;
}

.home .pb-host-role {
    font-size: 15px;
    color: var(--pb-text-2);
    margin-bottom: 8px;
}

.home .pb-host-link {
    font-size: 14px;
    color: var(--pb-link);
}

/* --------------------------------------------------------------------------
   7 · Reviews - quiet cards, roman quotes, clamped
   -------------------------------------------------------------------------- */

.home .pb-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.home .pb-review-card {
    background: var(--pb-surface);
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-md);
    padding: 24px;
}

.home .pb-review-card h4 {
    font-size: 18px;
    color: var(--pb-text);
    margin: 0 0 8px;
}

.home .pb-review-card blockquote {
    border: none;
    margin: 0 0 12px;
    padding: 0;
    font-size: 17px;
    font-style: normal;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home .pb-review-card footer {
    font-size: 14px;
    color: var(--pb-text-3);
    background: transparent;
    padding: 0; /* landing-page.css pads every <footer> 50px for the page footer */
}

.home .pb-review-links {
    text-align: center;
    font-size: 14px;
    color: var(--pb-text-3);
}

/* --------------------------------------------------------------------------
   8 · Courses - Training's card style with real art
   -------------------------------------------------------------------------- */

.home .pb-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.home .pb-course-card {
    background: var(--pb-surface);
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-md);
    box-shadow: var(--pb-shadow-md);
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    transition: transform 150ms ease;
}

.home .pb-course-card:hover {
    transform: translateY(-3px);
    text-decoration: none;
}

.home .pb-course-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--pb-text);
    /* Reserve two lines so every card's image starts at the same height;
       one-line titles center vertically in the zone. */
    line-height: 1.3;
    min-height: 2.6em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.home .pb-course-card img {
    width: 100%;
    border-radius: 8px;
    display: block;
    /* Training art is consistently 16:9; enforce it so a stray odd-sized
       image can never break the row alignment. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.home .pb-courses-cta {
    text-align: center;
}

/* --------------------------------------------------------------------------
   9 · Technology parade - chrome-free tiles, hover-only surfaces
   -------------------------------------------------------------------------- */

.home .tech-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
}

.home .tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-radius: 8px;
    color: var(--pb-text);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background 150ms ease, transform 150ms ease;
}

.home .tech-item:hover {
    background: var(--pb-surface-2);
    transform: scale(1.04);
    text-decoration: none;
    color: var(--pb-text);
}

.home .tech-logo {
    height: 52px;
    max-width: 140px;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   10 · Newsletter + suggest - two columns
   -------------------------------------------------------------------------- */

.home .pb-two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 960px;
    margin: 0 auto;
}

.home .pb-two-up p {
    margin: 0 0 20px;
    font-size: 15.5px;
}

.home .pb-suggest-mail {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    color: var(--pb-link);
}

/* --------------------------------------------------------------------------
   11 · Talk Python cross-promo
   -------------------------------------------------------------------------- */

.home .pb-tp-row {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 880px;
    margin: 0 auto;
}

.home .pb-tp-logo {
    flex: 0 0 220px;
    width: 220px;
    border-radius: var(--pb-radius-md);
    border: 1px solid #999; /* the light art needs an edge on white (plan 021 §11) */
    display: block;
}

.home .pb-tp-copy p {
    font-size: 18px;
    margin: 8px 0 20px;
    max-width: 560px;
}

/* --------------------------------------------------------------------------
   12 · Closing band (replaces old #footer_banner 100px padding)
   -------------------------------------------------------------------------- */

.home .pb-closing {
    padding: 96px 0;
    text-align: center;
}

.home .pb-closing-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
}

.home .pb-browse {
    font-size: 16px;
    color: var(--pb-link);
}

.home .pb-socials {
    display: flex;
    gap: 12px;
}

.home .pb-social {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--pb-hairline);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pb-text-2);
    font-size: 16px;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}

.home .pb-social:hover {
    background: var(--pb-surface-2);
    color: var(--pb-text);
    text-decoration: none;
}

.home .pb-social img {
    height: 16px;
    /* Bluesky SVG ships in brand blue; desaturate to match the mono icon set. */
    filter: grayscale(1) brightness(0.55);
}

.home .pb-all-socials {
    font-size: 14px;
    color: var(--pb-text-3);
}

/* --------------------------------------------------------------------------
   Supporting pages: /connect-on-social and /subscribe-options
   -------------------------------------------------------------------------- */

.home .pb-connect,
.home .pb-suboptions {
    margin-top: 75px; /* clear the fixed navbar, same as .intro-header */
    padding-top: 32px;
}

/* Page titles match the site-wide h1 treatment (36px, #555) rather than the
   homepage band headings, so these pages feel like the rest of the site. */
.home .pb-connect .pb-section-h,
.home .pb-suboptions .pb-section-h {
    font-size: 36px;
    color: #555;
}

.home .pb-suboptions .pb-section-h {
    margin-bottom: 40px;
}

.home .pb-connect-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.home .pb-connect-card {
    background: var(--pb-surface);
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-md);
    box-shadow: var(--pb-shadow-md);
    padding: 24px 28px;
}

.home .pb-connect-card h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--pb-text);
    margin: 0 0 14px;
}

.home .pb-connect-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home .pb-connect-card li {
    margin: 10px 0;
}

.home .pb-connect-card a {
    color: var(--pb-text-2);
    font-size: 16px;
    text-decoration: none;
}

.home .pb-connect-card a:hover {
    color: var(--pb-link);
}

.home .pb-connect-card i,
.home .pb-connect-card img {
    width: 22px;
    text-align: center;
    margin-right: 8px;
}

.home .pb-connect-card img {
    height: 15px;
    vertical-align: -2px;
}

.home .pb-suboptions .subscribe-buttons {
    font-size: 13px;
    color: var(--pb-text-2);
}

.home .pb-suboptions .subscribe-buttons a {
    color: var(--pb-text-2);
    margin: 6px 14px;
}

.home .pb-suboptions .subscribe-buttons img {
    width: 56px;
    border-radius: 12px;
    display: block;
    margin: 0 auto 8px;
}

.home .pb-suboptions .subscribe-buttons .subscribe-cta {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--pb-text);
    margin-top: 16px;
}

.home .pb-suboptions-copy {
    max-width: 640px;
    margin: 40px auto 0;
    font-size: 17px;
    line-height: 1.7;
}

.home .pb-suboptions-copy a {
    color: var(--pb-link);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .home .pb-band {
        padding: 48px 0;
    }

    .home .pb-hosts {
        padding-top: 64px;
    }

    .home .pb-closing {
        padding: 64px 0;
    }

    .home .banner-section {
        height: 275px;
    }

    .home .pb-section-h {
        font-size: 24px;
    }

    .home .pb-latest-title {
        font-size: 24px;
    }

    .home .pb-metric-value {
        font-size: 24px;
    }

    .home .pb-metrics-row {
        gap: 24px;
    }

    .home .pb-two-up {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .home .pb-tp-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home .pb-btn-primary,
    .home .pb-btn-ghost,
    .home .tech-item,
    .home .pb-course-card,
    .home .pb-social,
    .home .pb-subscribe-slice .subscribe-buttons a {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Sponsor page (plan 033)

   Scoped under .home like every other band in this file, so the token palette
   and the button system come along and nothing leaks onto other pages. The
   numbers band reuses .pb-metric-value / .pb-metric-label from the homepage so
   both pages state a figure the same way; only the container differs, because
   six tiles want a grid where the homepage's three wanted a centered flex row.
   -------------------------------------------------------------------------- */

/* The measure goes on the container, not the band: Bootstrap 3's .container has
   fixed widths (750/970/1170) per breakpoint, so constraining the band instead
   would leave the container overflowing its own parent. */
.home .pb-sponsor > .container {
    max-width: 860px;
    width: 100%;
}

.home .pb-sponsor .pb-section-h {
    text-align: left;
}

.home .pb-sponsor h2 {
    margin-top: 48px;
}

/* The container is 860px because the six stat tiles want it. Prose does not: at 860px a
   16px line runs to about 105 characters, well past the 45-75 that stays readable. Capping
   the measure on the text itself fixes the reading without narrowing the tiles. */
.home .pb-sponsor-lede {
    max-width: 62ch;
    font-size: 19px;
    line-height: 1.6;
    color: var(--pb-text-2);
    margin: 16px 0 8px;
}

.home .pb-sponsor-text {
    max-width: 68ch;
    font-size: 16px;
    line-height: 1.65;
    color: var(--pb-text-2);
    margin: 0 0 16px;
}

.home .pb-sponsor-qualifier {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--pb-text-3);
}

.home .pb-sponsor-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 24px 0 32px;
}

.home .pb-sponsor-stat {
    background: var(--pb-bg-alt);
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-md);
    padding: 18px 20px;
}

.home .pb-sponsor-stat .pb-metric-value {
    font-size: 28px;
}

.home .pb-sponsor-stat .pb-metric-label {
    letter-spacing: 1px;
    line-height: 1.4;
}

/* Sponsorship includes.

   A three-column grid - number, copy, example - rather than six sentences with controls
   trailing off the end of them. Before, each control landed wherever its sentence happened
   to stop, so five examples sat at five different x positions and two of them wrapped onto
   a line of their own. On a grid the examples share one rail, and row 5, which has no
   example, simply leaves its cell empty rather than breaking the rhythm.

   680px leaves the copy column about 520px, roughly a 68-character measure, inside the
   860px container. */
.home .pb-sponsor-includes {
    list-style: none;
    counter-reset: pb-include;
    max-width: 680px;
    padding: 0;
    margin: 20px 0 0;
}

.home .pb-sponsor-includes > li {
    counter-increment: pb-include;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 104px;
    column-gap: 16px;
    align-items: start;
    margin-bottom: 24px;
}

.home .pb-sponsor-includes > li:last-child {
    margin-bottom: 0;
}

/* The marker is generated rather than native: `display: grid` on an li drops
   `display: list-item` and takes ::marker with it. Same 24px line box as the title, so the
   two sit on a shared baseline with no nudging. Tertiary grey, because the number is the
   least important thing in the row. */
.home .pb-sponsor-includes > li::before {
    content: counter(pb-include) ".";
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    font-size: 16px;
    line-height: 24px;
    font-variant-numeric: tabular-nums;
    color: var(--pb-text-3);
}

/* The old rows led with a bold phrase inside a running sentence, which reads as emphasis
   rather than as a title and left nothing for the eye to skim. Splitting the two gives the
   row a real first and second level. */
.home .pb-include-title {
    grid-column: 2;
    grid-row: 1;
    font-family: 'Outfit', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 24px;
    color: var(--pb-text);
    margin: 0;
}

.home .pb-include-copy {
    grid-column: 2;
    grid-row: 2;
    font-size: 15px;
    line-height: 1.6;
    color: var(--pb-text-2);
    margin: 3px 0 0;
}

.home .pb-sponsor-note {
    max-width: 68ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pb-text-3);
    margin: 24px 0 0;
}

/* One control for all five examples.

   There used to be four vocabularies in six rows - a play pill, a red YouTube glyph, and two
   bracketed [example] text links - which is what made the list feel busy. They all mean the
   same thing ("here is proof"), so they all look the same: a quiet outlined pill reading
   "example". Only the glyph differs, and it differs honestly - play, YouTube, picture.

   min-width makes all five the same size, so the rail lines up on both edges. The YouTube
   mark is no longer brand red: at #FF0000 it was the loudest thing in the list and pulled
   the eye to row 3 for no reason. The glyph shape still says YouTube on its own, so nothing
   is carried by colour alone. */
.home .pb-example,
.home .pb-audio-btn,
.home .pb-yt-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 104px;
    padding: 5px 12px;
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-sm);
    font-size: 14px;
    line-height: 18px;
    color: var(--pb-accent-text);
    background-color: transparent;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: background-color 150ms ease, border-color 150ms ease;
}

/* The rail. -3px centres the 30px pill on the title's 24px line box. */
.home .pb-sponsor-includes .pb-example,
.home .pb-sponsor-includes .pb-audio-btn,
.home .pb-sponsor-includes .pb-yt-link {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    margin-top: -3px;
}

/* The glyph keeps YouTube red, which Michael asked for specifically: it is the one example that
   leaves for another platform, and the brand mark says so instantly. Only the icon is red, not
   the label, so the pill still matches the other four in the rail rather than shouting over
   them. #FF0000 on white is 4.0:1, above the 3:1 floor for a meaningful graphic, and the pill's
   text label carries the meaning anyway so colour is never the sole indicator. */
.home .pb-yt-link i {
    color: #FF0000;
}

/* --pb-accent-text on --pb-surface-2 is 4.77:1, over the 4.5:1 floor for 14px text. */
.home .pb-example:hover,
.home .pb-example:focus,
.home .pb-audio-btn:hover,
.home .pb-audio-btn:focus,
.home .pb-yt-link:hover,
.home .pb-yt-link:focus {
    background-color: var(--pb-surface-2);
    border-color: var(--pb-accent);
    color: var(--pb-accent-text);
    text-decoration: none;
}

.home .pb-example:focus-visible,
.home .pb-audio-btn:focus-visible,
.home .pb-yt-link:focus-visible {
    outline: 2px solid var(--pb-accent);
    outline-offset: 2px;
}

/* While playing, the pill fills in: at a glance you can tell which of the two is running
   without reading the icon. Filled with --pb-accent-text, not the brand orange --pb-accent:
   white on the orange is 2.37:1 and unreadable at 14px, while this pair is 5.64:1. The
   outline-to-solid change is what signals "playing", so nothing is lost by the darker hue.
   The :hover and :focus variants are spelled out so a playing pill stays filled while the
   pointer is over it, instead of losing to the shared hover rule above. */
.home .pb-audio-btn.is-playing,
.home .pb-audio-btn.is-playing:hover,
.home .pb-audio-btn.is-playing:focus {
    background-color: var(--pb-accent-text);
    border-color: var(--pb-accent-text);
    color: #fff;
}

/* Left at their natural widths on purpose. A fixed box would need `text-align: center`, and
   that moves a duotone icon's absolutely positioned ::before layer out of register with its
   ::after layer. The pills are a fixed 104px and centre their contents, so the widest glyph
   (YouTube) shifts the word "example" by about two pixels against the narrowest (play) -
   invisible, while the edges of the rail line up exactly. */
.home .pb-example i,
.home .pb-audio-btn i,
.home .pb-yt-link i {
    font-size: 13px;
    line-height: 1;
}

/* The show-notes screenshot is a full-height phone capture. Inline it dwarfed the
   list item it illustrates, so it sits behind an [example] link in a dialog, matching
   the subscribe dialog on the episode page. */
.home .pb-sponsor-dialog {
    border: 0;
    border-radius: 12px;
    padding: 0;
    /* Sized to whichever image it holds rather than to a fixed width: one example is a tall
       portrait phone capture, the other a wide desktop screenshot, and a single width would
       crush one or strand the other in whitespace. The image below carries the real caps. */
    width: fit-content;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 40px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    background: #fff;
    color: #222;
}

.home .pb-sponsor-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.home .pb-sponsor-dialog__inner {
    position: relative;
    padding: 44px 24px 24px;
}

/* Scoped through .pb-sponsor-dialog deliberately. The dialogs sit inside the band, so
   `.home .pb-sponsor h2` (0,2,1) also matches this heading and outranks a plain
   `.home .pb-sponsor-dialog__title` (0,2,0), leaking the section's 48px top margin into the
   dialog. Three classes (0,3,0) takes it back. */
.home .pb-sponsor-dialog .pb-sponsor-dialog__title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 600;
    color: #222;
    text-align: center;
    padding-right: 40px; /* keep the title clear of the close button */
}

.home .pb-sponsor-dialog__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #777;
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease, color 150ms ease;
}

.home .pb-sponsor-dialog__close:hover,
.home .pb-sponsor-dialog__close:focus {
    background-color: rgba(0, 0, 0, 0.06);
    color: #222;
}

.home .pb-sponsor-dialog__close:focus-visible {
    outline: 2px solid rgba(241, 145, 40, 0.45);
    outline-offset: 2px;
}

/* Both constraints matter, and which one binds depends on the image and the window: height
   binds on the tall phone capture, width on the wide banner screenshot. Capped against the
   viewport rather than the dialog, because the dialog is now sized by this element and a
   percentage here would be circular. The 1100px ceiling stops a large screenshot filling a
   very wide monitor edge to edge. */
.home .pb-sponsor-dialog__image {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: min(calc(100vw - 80px), 1100px);
    max-height: calc(100vh - 190px);
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-sm);
}

.home .pb-sponsor-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 24px 0 8px;
}

.home .pb-sponsor-form {
    max-width: 460px;
}

.home .pb-sponsor-field {
    margin-bottom: 16px;
}

.home .pb-sponsor-field label {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--pb-text-2);
    margin-bottom: 4px;
}

/* The purged Bootstrap build keeps .form-control but drops .form-group, so the
   field wrapper above is ours. Border and radius are restated to match the
   token palette rather than Bootstrap 3's greys. */
.home .pb-sponsor-field .form-control {
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-sm);
    box-shadow: none;
    height: auto;
    padding: 10px 12px;
}

.home .pb-sponsor-field .form-control:focus {
    border-color: var(--pb-accent);
    box-shadow: none;
}

.home .pb-sponsor-form .cf-turnstile {
    margin-bottom: 16px;
}

.home .pb-sponsor-form-error {
    background: hsl(0, 76%, 96%);
    border: 1px solid hsl(0, 60%, 82%);
    border-radius: var(--pb-radius-sm);
    color: hsl(0, 65%, 32%);
    padding: 12px 14px;
    margin-bottom: 20px;
}

.home .pb-sponsor-mailto {
    font-size: 14px;
    color: var(--pb-text-3);
    margin-top: 16px;
}

@media (max-width: 991px) {
    .home .pb-sponsor-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    /* No room for a rail at this width, so the pill drops below the copy - but still at the
       copy column's left edge, so the five examples stay in one column instead of ending up
       wherever each sentence happened to stop. Taller and wider here for a usable touch
       target: 104x30 on a desktop pointer becomes 116x38 under a thumb. */
    .home .pb-sponsor-includes > li {
        grid-template-columns: 20px minmax(0, 1fr);
        column-gap: 10px;
    }

    .home .pb-sponsor-includes .pb-example,
    .home .pb-sponsor-includes .pb-audio-btn,
    .home .pb-sponsor-includes .pb-yt-link {
        grid-column: 2;
        grid-row: 3;
        margin-top: 10px;
        min-width: 116px;
        padding: 9px 14px;
    }
}

@media (max-width: 575px) {
    .home .pb-sponsor-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home .pb-sponsor-lede {
        font-size: 17px;
    }

    .home .pb-sponsor-ctas > * {
        width: 100%;
        text-align: center;
    }
}