/*
 * theme-2026-features.css: the FEATURES page group of the pletor-style redesign
 * (spec docs/superpowers/specs/2026-09-29-pletor-style-redesign-design.md, sub-project 3;
 * plan docs/superpowers/plans/2026-10-01-pletor-redesign-features.md).
 * Linked ONLY from the 27 routed templates in app/server/views/frontend/features/ (never from frontend_templates.pug,
 * frontend_templates_category.pug or frontend_social_media_template_detail.pug: no route renders them), on the line
 * after the theme-2026-channels.css link, which sits on the line after `include ../common/v3/frontend_style_slim`.
 * theme-2026-channels.css already styles the shared skeleton (bands, hero, text+image rows, how it works, FAQ width);
 * this file holds only what the feature pages add. Template <style> blocks and slideshow-screen.css load AFTER this
 * file, so every rule here mirrors the selector it beats plus .pn-page, and adds !important only where that one has it.
 * Every selector starts with the .pn-page compound. Uses the --pn-* tokens from theme-2026.css and defines none.
 * No transform/opacity/animation/transition on entrance-animated elements, no rule on FAQ open/close mechanics.
 * Every edit: set ?v= in all 27 feature templates to this file's last git-change date (tests/features-2026.test.js).
 * Same-day re-edit after a deploy: append -2, -3. Merge, never rebase: ?v= follows the committer date.
 */

/* ============ Primary ink button outside the hero ============ */
/* The hero button is styled by theme-2026-channels.css:58 (.link-container-front a.main-button). These three are the
 * other primary CTAs: the closing row's a.button.cta-new-col-white.button-shine (18 standard pages; also the
 * WordPress page's closing a.main-button, which carries both classes), the affiliates hero's .link-container-front-sm
 * a.main-button, and the signage screen promo's a.ai-generate-btn (lime today).
 * Fights (app-critical.css): .button-shine {background: radial-gradient(var(--purple), var(--primary)) !; text-shadow}
 * (0,1,0) :13849; a.cta-new-col-white {color:#fff !} (0,1,1) :12837; .main-button {22px !; line-height:52px; 999px !;
 * 4px lavender border !} :13898, <=967 {20px !; 999px !} :13333, <=480 {22px !; line-height:32px !} :10268;
 * .postfix {display:block; width:100%; height:3.8025rem} :2663; .postfix.button.radius {999px} (0,3,0) :16077, <=480
 * {padding:8px 22px !} :10263; .forceText {transform !} :8628; .button {bold; padding:1rem 2rem} :1482/:15867;
 * <=768 .action-button a {20px !; padding:6px 22px !; max-width:300px; margin-top:24px} (0,1,1) :16229;
 * .slideshow-screen-promo .ssp-cta .ai-generate-btn {#81ff3c; #0d0d1f; 700; padding:14px 26px} (0,3,0)
 * slideshow-screen.css:20. These selectors are (0,4,1) or more. */
.pn-page .action-button a.cta-new-col-white.button,
.pn-page .hero .link-container-front-sm a.main-button,
.pn-page .slideshow-screen-promo .ssp-cta a.ai-generate-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 48px;
    padding: 12px 24px !important;
    border: 0 !important;
    border-radius: var(--pn-radius-control) !important;
    background: var(--pn-ink) !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-family: var(--pn-font) !important;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.25 !important;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    text-shadow: none !important;
    transform: none !important;
}

/* .cta span {font-size:20px; line-height:24px} (0,1,1) app-critical.css:16094. */
.pn-page .action-button a.cta-new-col-white.button > span,
.pn-page .hero .link-container-front-sm a.main-button > span,
.pn-page .slideshow-screen-promo .ssp-cta a.ai-generate-btn > span {
    font-size: inherit;
    line-height: inherit;
}

/* .cta i {margin-left:.625rem} app-critical.css:7817: the flex gap spaces the chevron. */
.pn-page .action-button a.cta-new-col-white.button > i,
.pn-page .hero .link-container-front-sm a.main-button > i {
    flex-shrink: 0;
    margin-left: 0;
}

/* (hover) .cta-new-col-white:hover {transform:scale(1.015) !; color !; shadow} (0,2,0) app-critical.css:7898;
 * .button:hover {#4ca957} (0,2,0) :15874; button:hover, .button:hover {#4ae00c} :1500. */
.pn-page .action-button a.cta-new-col-white.button:hover,
.pn-page .action-button a.cta-new-col-white.button:focus,
.pn-page .hero .link-container-front-sm a.main-button:hover,
.pn-page .hero .link-container-front-sm a.main-button:focus,
.pn-page .slideshow-screen-promo .ssp-cta a.ai-generate-btn:hover,
.pn-page .slideshow-screen-promo .ssp-cta a.ai-generate-btn:focus {
    background: #000000 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    text-decoration: none;
    transform: none !important;
}

/* ============ Planners cross-link band (common/v3/frontend_planners_related.pug) ============ */
/* Included on 23 feature templates directly AFTER main (outside .pn-page), and only there: the line "Want to plan a month
 * of this content? Content planners ->" whose link carries an inline style="color:#4ae00c" (lime, 1.9:1 on white)
 * and text-decoration:none, so both the colour and the underline need !important.
 * Reached as main's next sibling; only !important beats an inline style. */
.pn-page + section.services p > a[href$="/planners"] {
    color: var(--pn-ink) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}



/* ============ Section headings and eyebrows outside the channel shapes ============ */
/* Headings set directly in a centred .solution (no in-page link around them): every WordPress section, the signage
 * industries band and benefits strip, the AI-carousels editorial-pro block. .solution h2 {Roboto; 1.4em; 300;
 * -0.075rem} (0,1,1) app-critical.css:11554, <=1025 {1.6rem; 500; text-align:left} :11575; .signage-benefits h2
 * {margin-bottom:1.5rem} (0,1,1) slideshow-screen.css:35. Same values as theme-2026-channels.css:291, which styles the
 * link-wrapped how-it-works and FAQ headings; the child combinators keep the two from overlapping. */
.pn-page .services .solution.text-center > .row.columns > h2,
.pn-page .services .solution.text-center > h2 {
    margin: 0 0 16px;
    color: var(--pn-ink);
    font-family: var(--pn-font);
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-align: center;
}

/* .intro-text {width:fit-content; margin-top/bottom:1rem} (0,1,0) app-critical.css:223 left-packs the eyebrow inside a
 * centred heading block; theme-2026-channels.css:123 sets its type and margin 0 0 12px. Centre it. */
.pn-page .services .solution.text-center .intro-text {
    margin-right: auto;
    margin-left: auto;
}

/* AI carousels editorial-pro block: intro paragraph in a .medium-10 (theme-2026-channels.css:420 is keyed on
 * .medium-12). p.content-grey {display:flex} app-critical.css:7664. */
.pn-page .editorial-pro-showcase .solution.medium-10 p.content-grey {
    justify-content: center;
    max-width: 640px;
    margin: 0 auto;
    color: var(--pn-ink-2);
    font-size: 17px;
    text-align: center;
}

/* Its checklist (h3.heading-description-4 in .editorial-pro-points, not in a .medium-5): .heading-description-4
 * {display:flex; 18px; 400; #10102e} app-critical.css:16435. Same values as theme-2026-channels.css:163. */
.pn-page .editorial-pro-showcase .editorial-pro-points h3.heading-description-4 {
    align-items: flex-start;
    margin: 12px 0 0;
    color: var(--pn-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.005em;
}

/* ============ Hero images (link in bio, AI carousels, the three routed signage pages) ============ */
/* Template <style> blocks: .page-id-8 .carousels-hero-visual img {radius 16px; shadow 0 24px 60px} (0,2,1)
 * (frontend_feature_ai_carousels.pug:65, frontend_feature_link_in_bio.pug:65), .page-id-8 .signage-hero-visual img
 * {radius 16px; same shadow} (0,2,1) (frontend_feature_digital_signage.pug:66, _vertical.pug:70, _compare.pug:86).
 * Loading attributes (the signage hero is the eager LCP image) are markup and stay. */
.pn-page .hero .carousels-hero-visual img,
.pn-page .hero .signage-hero-visual img {
    border-radius: var(--pn-radius-media);
    box-shadow: none;
}

/* ============ Digital signage: "by industry" band (common/v3/frontend_signage_industries.pug) ============ */
/* Six links per page (five verticals minus the current one, plus compare / hub). theme-2026-channels.css:311-404 turns
 * the .item-panel-container into a 4-column grid of warm 32px cards: 3 / 2 / 1 columns here so six read as two rows.
 * Each card holds one link; the link becomes the card's whole surface. */
.pn-page .signage-industries .row-custom4.item-panel-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .pn-page .signage-industries .row-custom4.item-panel-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .pn-page .signage-industries .row-custom4.item-panel-container {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* .signage-industries .item-panel {padding:.4rem .6rem} (0,2,0) slideshow-screen.css:31; theme-2026-channels.css:326
 * (0,4,0) {padding:28px 24px 32px}. */
.pn-page .signage-industries .item-panel-container > .item-panel.columns {
    padding: 0;
}

/* .signage-industry-link {padding:14px 18px; 1px #e0e0ea; radius 12px; 600; #1d1d3a; #fff} (0,1,0)
 * slideshow-screen.css:32, :hover {border-color:#4ae00c} (0,2,0) :33; <=768 .services a {14px !} (0,1,1)
 * app-critical.css:12015. .item-panel {overflow:hidden}
 * app-critical.css:16549 would clip the 3px-offset focus ring (theme-2026.css:671), so the ring sits inside. */
.pn-page .signage-industries a.signage-industry-link {
    display: block;
    padding: 24px 28px;
    border: 0;
    border-radius: var(--pn-radius-card);
    background: transparent;
    color: var(--pn-ink);
    font-size: 17px !important;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
}

.pn-page .signage-industries a.signage-industry-link:hover,
.pn-page .signage-industries a.signage-industry-link:focus {
    border-color: transparent;
    color: var(--pn-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pn-page .signage-industries a.signage-industry-link:focus-visible {
    outline-offset: -4px;
}

/* ============ Digital signage: "show it on your screen" promo (common/v3/frontend_slideshow_screen_promo.pug) ============ */
/* A dark band with lime accents today (slideshow-screen.css:3-28, shared with the two slideshow tool pages, which do
 * not carry .pn-page and stay as they are). Here: a warm band (it sits between the white industries band and the
 * white how-it-works band), white step cards with ink circles, ink type, the ink primary button above.
 * .slideshow-screen-promo {#0d0d1f; #fff; padding:64px 20px} (0,1,0) :3; the 96/56px band padding comes from
 * theme-2026.css:638/651 (0,2,1). */
.pn-page > section.slideshow-screen-promo {
    background: var(--pn-surface-warm);
    color: var(--pn-ink);
}

/* .ssp-kicker {lime pill: rgba(129,255,60,.14); #81ff3c; 1px border; radius 999px; padding 6px 14px; 600} (0,2,0) :6. */
.pn-page .slideshow-screen-promo .ssp-kicker {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--pn-ink-2);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* .ssp-title {#fff; 34px} (0,2,0) :7, <=767 {26px} :26. */
.pn-page .slideshow-screen-promo .ssp-title {
    color: var(--pn-ink);
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* .ssp-subtitle {rgba(255,255,255,.78); 17px} (0,2,0) :8. */
.pn-page .slideshow-screen-promo .ssp-subtitle {
    color: var(--pn-ink-2);
    font-size: 19px;
    letter-spacing: -0.01em;
}

/* .ssp-step {rgba(255,255,255,.05); 1px rgba(255,255,255,.1); radius 12px; padding 22px} (0,2,0) :10. */
.pn-page .slideshow-screen-promo .ssp-step {
    padding: 28px 24px 32px;
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface);
}

/* .ssp-step-num {34px; #81ff3c; #0d0d1f; 700} (0,2,0) :11. */
.pn-page .slideshow-screen-promo .ssp-step-num {
    width: 40px;
    height: 40px;
    background: var(--pn-ink);
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
}

/* h3s: .ssp-step-title / .ssp-benefit-title {#fff} (0,2,0) :12/:17 beat .pn-page h3 (0,1,1) theme-2026.css:622. */
.pn-page .slideshow-screen-promo .ssp-step-title,
.pn-page .slideshow-screen-promo .ssp-benefit-title {
    color: var(--pn-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* .ssp-step-desc / .ssp-benefit-desc {rgba(255,255,255,.75)} (0,2,0) :13/:18. */
.pn-page .slideshow-screen-promo .ssp-step-desc,
.pn-page .slideshow-screen-promo .ssp-benefit-desc {
    color: var(--pn-ink-2);
}

/* Check icon (CSS mask painted by background-color): i.svg-icon-check-2 {background-color:#181719} (0,1,1)
 * app-critical.css:16502; .green-light {color:#0fba13 !} :7861. */
.pn-page .slideshow-screen-promo .ssp-benefit i.svg-icon-check-2 {
    background-color: var(--pn-ink) !important;
    color: var(--pn-ink) !important;
    fill: var(--pn-ink);
}

/* .ssp-note {rgba(255,255,255,.6); 13px} (0,2,0) :21. ink-3 on warm = 4.90:1. */
.pn-page .slideshow-screen-promo .ssp-note {
    color: var(--pn-ink-3);
}

/* .ssp-learn {#81ff3c; 600} (0,2,0) :22, :hover {underline} :23. */
.pn-page .slideshow-screen-promo a.ssp-learn {
    color: var(--pn-ink);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============ Digital signage: compare page (frontend_feature_digital_signage_compare.pug <style>, :63-86) ============ */
/* The table section is the only band between the white hero and the white industries band: paint it warm. */
.pn-page > section.services:has(.signage-compare) {
    background: var(--pn-surface-warm);
}

/* .signage-compare-wrap {overflow-x:auto; margin:1.5rem 0} (0,1,0) :66. */
.pn-page .signage-compare-wrap {
    border-radius: var(--pn-radius-media);
    background: var(--pn-surface);
}

/* .signage-compare th, td {border-bottom:1px solid #e6e6ef} (0,1,1) :68; thead th {700; 16px} (0,1,2) :69; tbody th
 * {600} (0,1,2) :70. */
.pn-page .signage-compare th,
.pn-page .signage-compare td {
    border-bottom-color: var(--pn-line);
    color: var(--pn-ink-2);
}

.pn-page .signage-compare thead th,
.pn-page .signage-compare tbody th {
    color: var(--pn-ink);
    font-weight: 500;
}

/* .signage-compare .signage-us {background:#f3fbef} (0,2,0) :71 (a lime tint). */
.pn-page .signage-compare .signage-us {
    background: var(--pn-surface-warm);
    color: var(--pn-ink);
}

/* .signage-asof {14px} (0,1,0) :72. */
.pn-page .services p.signage-asof {
    color: var(--pn-ink-3);
}

/* h2.signage-verdict-title sits in a plain .columns, so only .pn-page h2 (0,1,1) reaches it. */
.pn-page .services h2.signage-verdict-title {
    margin-top: 40px;
    color: var(--pn-ink);
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

/* Phones: one card per vendor row (:75-83): tr {1px #e0e0ea; radius 12px} (0,1,1), tbody th {#f3f3f8} (0,1,2),
 * td {border-bottom #eeeef3} (0,1,1). */
@media screen and (max-width: 40em) {
    .pn-page .signage-compare tr {
        border-color: var(--pn-line);
        border-radius: var(--pn-radius-media);
    }

    .pn-page .signage-compare tbody th {
        background: var(--pn-surface-warm);
    }

    .pn-page .signage-compare td {
        border-bottom-color: var(--pn-line);
    }
}

/* ============ Digital signage: draft clinic case study (frontend_feature_digital_signage_case_study.pug <style>, :30-38) ============ */
/* main.landing-page (no #hero) > article.case-study. EN only, noindex. The [TODO] markers (.todo, yellow) are editorial
 * flags of a draft and stay. */
.pn-page .case-study .intro-text {
    margin: 0;
    border-radius: 0;
    color: var(--pn-ink-2);
    font-family: var(--pn-font) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* .case-study h1 {2rem; 1.2} (0,1,1) :32; .case-study h2 {1.4rem} (0,1,1) :33. */
.pn-page .case-study h1 {
    color: var(--pn-ink);
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.pn-page .case-study h2 {
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.03em;
}

/* .case-study .draft-banner {#1d1d3a} (0,2,0) :38. */
.pn-page .case-study .draft-banner {
    background: var(--pn-ink);
}

/* .case-study .facts div {1px #e0e0ea; radius 12px} (0,2,1) :36. */
.pn-page .case-study .facts div {
    border-color: var(--pn-line);
    border-radius: var(--pn-radius-media);
}

/* Its two outline buttons sit in a plain p, not an .action-button (theme-2026-channels.css:188 does not reach them).
 * Same fights as there: .cta-white-black-border.button {padding !; shadow} (0,2,0) app-critical.css:8012, <=1025
 * {15px !} :11582, <=1140 {14px !} :12118. */
.pn-page .case-study a.cta-white-black-border.button {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin: 0 8px 8px 0;
    padding: 12px 22px !important;
    border: 1px solid var(--pn-ink);
    border-radius: var(--pn-radius-control);
    background: transparent;
    box-shadow: none;
    color: var(--pn-ink);
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.25;
}

.pn-page .case-study a.cta-white-black-border.button:hover,
.pn-page .case-study a.cta-white-black-border.button:focus {
    background: var(--pn-surface-warm);
    color: var(--pn-ink);
    text-decoration: none;
}

/* ============ /features hub (frontend_features_hub.pug <style>, :71-77; line numbers at BASE) ============ */
/* Two sections: a white heading band (h1.head-main + p.intro-text) and the grouped card grid, painted warm. */
/* .head-main {700; 2.4rem; -1.5px} (0,1,0) app-critical.css:8973, <=768 {2.1rem} :13764. */
.pn-page > section.services > .row > h1.head-main {
    max-width: 960px;
    margin: 0 auto 20px;
    color: var(--pn-ink);
    font-size: clamp(36px, 4.6vw, 60px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* p.intro-text: .intro-text {Caveat !; var(--primary-dark); 24px; 700; radius 999px; width:fit-content} (0,1,0)
 * app-critical.css:223. A subline here, not an eyebrow. */
.pn-page > section.services > .row > p.intro-text {
    width: auto;
    max-width: 720px;
    margin: 0 auto;
    border-radius: 0;
    color: var(--pn-ink-2);
    font-family: var(--pn-font) !important;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

.pn-page > section.services:has(.features-hub__grid) {
    background: var(--pn-surface-warm);
}

.pn-page .features-hub__group h2 {
    margin: 0 0 20px;
    color: var(--pn-ink);
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

/* .features-hub__grid {gap:1rem} (0,1,0) :73. */
.pn-page .features-hub__group .features-hub__grid {
    gap: 16px;
}

/* .features-hub__link {padding:1rem 1.15rem; 1px rgba(0,0,0,.12); radius 10px} (0,1,0) :75. */
.pn-page .features-hub__grid a.features-hub__link {
    padding: 24px 24px 28px;
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface);
    color: var(--pn-ink);
    text-decoration: none;
}

/* .features-hub__name {600} (0,1,0) :76. */
.pn-page .features-hub__grid .features-hub__name {
    color: var(--pn-ink);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* .features-hub__desc {.9rem; opacity:.8} (0,1,0) :77 (ink-2 at 80% would be 6.4:1; full ink-2 is 8.86:1). */
.pn-page .features-hub__grid .features-hub__desc {
    color: var(--pn-ink-2);
    font-size: 15px;
    line-height: 1.55;
    opacity: 1;
}

.pn-page .features-hub__grid a.features-hub__link:hover .features-hub__name,
.pn-page .features-hub__grid a.features-hub__link:focus .features-hub__name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============ /affiliates ============ */
/* Hero: section.overlayall.hero.large.has-image.dark-background > .flex-container-wrapper (not -3, so none of the
 * theme-2026.css hero rules apply). .dark-background {radial-gradient navy/purple} (0,1,0) app-critical.css:8244 and
 * :15539 (#5657fc stop). */
.pn-page > section.hero.dark-background {
    background: var(--pn-surface);
    color: var(--pn-ink);
}

/* h1.affiliates > .quote-title.quote-title-bold + .quote-title.quote-title-small. .quote-title {color:
 * var(--color-header-font-dark); background-clip:text} (0,1,0) :12436; .quote-title-bold {700} :12445, <=967
 * {32px !; 36px !} :13354; .quote-title-small {24px; 1.2px; margin 26px 0 16px; 36px} :12449, <=967 {18px !;
 * margin-top:28px !; 24px !} :13358, <=768 {32px; 36px} :11934. */
.pn-page .hero h1.affiliates .quote-title {
    background: none;
    color: var(--pn-ink);
    -webkit-text-fill-color: var(--pn-ink);
}

.pn-page .hero h1.affiliates .quote-title-bold {
    font-size: clamp(36px, 4.6vw, 60px) !important;
    font-weight: 500;
    line-height: 1.1 !important;
    letter-spacing: -0.03em;
}

.pn-page .hero h1.affiliates .quote-title-small {
    margin-top: 16px !important;
    color: var(--pn-ink-2);
    -webkit-text-fill-color: var(--pn-ink-2);
    font-size: 19px !important;
    font-weight: 400;
    line-height: 1.55 !important;
    letter-spacing: -0.01em;
}

/* .header-descr {Roboto; 20px !; 500; margin:42px 0; var(--color-header-font-dark)} (0,1,0) :11860, <=768 {margin:10px
 * 6px; 28px} :11922. */
.pn-page .hero h2.header-descr {
    margin: 20px 0 32px;
    color: var(--pn-ink-2);
    font-family: var(--pn-font);
    font-size: 17px !important;
    font-weight: 400;
    line-height: 1.55;
}

/* /affiliates: the hero video (frontend/video/*.mp4) is gone from the CDN, so the calendar screenshot takes its place.
 * The wrapper .flex-right.slide-in-video is entrance-animated (app-critical :12933): untouched. */
.pn-page .hero img.pn-affiliates-shot {
    display: block;
    width: 100%;
    max-width: 455px;
    height: auto;
    margin: 0 auto;
    border-radius: var(--pn-radius-media);
}

/* #feature1 carries .bg-grey, so theme-2026-channels.css:21 paints it warm (over theme-2026.css:1109's white) and the
 * warm cards of theme-2026.css:1166 would vanish into it. White cards on the warm band; #feature2 stays white with
 * warm cards, as on the homepage. */
.pn-page > section.bg-grey .services-cont-wrapper .services-cont,
.pn-page > section.bg-grey .services-cont-wrapper .services-cont:hover {
    background: var(--pn-surface);
}

/* The selected card's title: (min-width:1024px) .services-cont.active h4 {color: var(--primary) !} (0,2,1)
 * app-critical.css:13106 beats theme-2026.css:1199 (0,4,0, not !important). */
.pn-page .services-cont-wrapper .services-cont.active h4.services-title {
    color: var(--pn-ink) !important;
}

/* ============ WordPress AI blog generator (frontend_feature_wordpress_ai_blog_generator.pug <style>, :66-273; line numbers at BASE) ============ */
/* theme-2026-channels.css:261-273 collapses any .row-custom4 without an <img> to one centred text column and hides the
 * other column (made for the nine image-less channel pages). Here three such columns hold content: the pain / solve
 * cards (#problem, two .medium-6) and the flow diagram (.medium-7 beside the "unique" text). Those rules are (0,5,3);
 * these add a :has() class and win at (0,6,3), with the same :has() support boundary as the rules they undo. */
.pn-page > section.services > .row-custom4:not(:has(img)):has(.wp-ps-card) > section.solution.medium-6,
.pn-page > section.services > .row-custom4:not(:has(img)):has(.wp-flow-viz) > section.solution.medium-7 {
    display: block;
}

/* Restore Foundation's .medium-5 (41.66667%, app-critical.css:868) and the .columns float for the "unique" text. */
@media only screen and (min-width: 40.0625em) {
    .pn-page > section.services > .row-custom4:not(:has(img)):has(.wp-flow-viz) > section.solution.medium-5 {
        float: left;
        width: 41.66667%;
        max-width: none;
        margin-right: 0;
        margin-left: 0;
    }
}

/* .wp-section-fade::after / .wp-section-fade-up::before: an 80px fade to #f5f5f7 at section edges (0,1,1) :231-232,
 * which no longer matches either band colour. */
.pn-page .wp-section-fade::after,
.pn-page .wp-section-fade-up::before {
    display: none;
}

/* Hero stats: .wp-stats-row {#fff; radius 20px; shadow; 1px border} (0,1,0) :74; .wp-stat-num {800; #1a1a2e} (0,2,0)
 * :77; .wp-stat-label {#999 = 2.85:1} (0,2,0) :78; divider (0,3,1) :76. */
.pn-page .wp-stats-row {
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface-warm);
    box-shadow: none;
}

.pn-page .wp-stats-row .wp-stat + .wp-stat::before {
    background: var(--pn-line);
}

.pn-page .wp-stats-row .wp-stat-num {
    color: var(--pn-ink);
    font-weight: 500;
    letter-spacing: -0.03em;
}

.pn-page .wp-stats-row .wp-stat-label {
    color: var(--pn-ink-3);
}

/* Channel pills: .wp-channels .wp-ch {#666; #fff; 1px rgba(0,0,0,.08); shadow} (0,2,0) :82, :hover {purple border;
 * #5b4cdb; purple shadow} (0,2,0) :83. */
.pn-page .wp-channels .wp-ch {
    border-color: var(--pn-line);
    background: var(--pn-surface);
    box-shadow: none;
    color: var(--pn-ink-2);
}

.pn-page .wp-channels .wp-ch:hover {
    border-color: var(--pn-ink);
    box-shadow: none;
    color: var(--pn-ink);
}

/* Pain / solve cards on the warm #problem band: .wp-ps-card {radius 20px; 1px border; shadow} (0,1,0) :87,
 * .wp-ps-pain / .wp-ps-solve {gradient to #fef8f8 / #f6fef9} (0,2,0) :88-89. Their entrance (opacity/transform,
 * :235-237) is untouched. The red x / green tick list markers (:93-94) are icons with meaning and stay. */
.pn-page .wp-ps-card,
.pn-page .wp-ps-card.wp-ps-pain,
.pn-page .wp-ps-card.wp-ps-solve {
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface);
    box-shadow: none;
}

/* .wp-pain-list li {#555; border rgba(0,0,0,.04)} (0,1,1) :91 (the :last-child has none, :92). */
.pn-page .wp-pain-list li,
.pn-page .wp-solve-list li {
    border-bottom-color: var(--pn-line);
    color: var(--pn-ink-2);
}

/* .wp-list-title.pain/.solve .wp-title-badge {red / green pill} (0,3,0) :97-98. */
.pn-page .wp-list-title.pain .wp-title-badge,
.pn-page .wp-list-title.solve .wp-title-badge {
    border: 0;
    background: var(--pn-surface-warm);
    color: var(--pn-ink);
}

/* Pipeline = this page's "how it works": the approved warm 32px step cards with ink circles. .wp-pipeline-steps
 * {padding-left:44px} (0,1,0) :101, ::before {purple gradient line} (0,1,1) :102, .wp-step {gap:28px; padding:28px 0}
 * (0,1,0) :103. The step entrance (opacity/transform, :202-208) is untouched. */
.pn-page .wp-pipeline-steps {
    padding-left: 0;
}

.pn-page .wp-pipeline-steps::before {
    display: none;
}

.pn-page .wp-pipeline-steps .wp-step {
    gap: 20px;
    margin: 0 0 16px;
    padding: 28px 32px;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface-warm);
}

/* .wp-step .number-circle {48px; #fff; 2px #e2e0f0; #6c5ce7; 800; margin-left:-44px; purple shadow} (0,2,0) :104,
 * :first-child/:last-child {purple gradient} (0,3,0) :105; .number-circle {padding:12px 18px; #efefef; 1px #ccc}
 * app-critical.css:16561. */
.pn-page .wp-step .number-circle,
.pn-page .wp-step:first-child .number-circle,
.pn-page .wp-step:last-child .number-circle {
    width: 40px;
    height: 40px;
    margin-left: 0;
    padding: 0;
    border: 0;
    background: var(--pn-ink);
    box-shadow: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
}

/* .wp-step .heading-description-4 {700; #1a1a2e} (0,2,0) :106; .wp-step .content-grey {#666} (0,2,0) :107. */
.pn-page .wp-step .heading-description-4 {
    margin: 6px 0 4px;
    color: var(--pn-ink);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.pn-page .wp-step .content-grey {
    color: var(--pn-ink-2);
    font-size: 15px;
    line-height: 1.6;
}

/* Tags: .wp-tag-green / -orange / -purple {tinted bg; coloured text; border-color !} (0,1,0) :112-114. */
.pn-page .wp-step-tags span {
    border-color: transparent !important;
    background: var(--pn-surface);
    color: var(--pn-ink-2);
}

/* Flow diagram on the warm "unique" band: .wp-flow-viz {purple-tinted gradient; radius 24px; shadow} (0,1,0) :171;
 * .wp-flow-node {#fff; 1px border; shadow} (0,1,0) :172, :hover {translateX(4px); purple shadow} (0,2,0) :173;
 * .wp-flow-highlight {purple border/bg/shadow} (0,2,0) :178; .wp-flow-meta {#999} (0,3,0) :176; .wp-flow-arrow
 * {#c4b5fd} (0,1,0) :177. Node and arrow entrance (opacity/transform, :211-219) is untouched. */
.pn-page .wp-flow-viz {
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface);
    box-shadow: none;
}

.pn-page .wp-flow-viz .wp-flow-node {
    border: 1px solid transparent;
    border-radius: var(--pn-radius-media);
    background: var(--pn-surface-warm);
    box-shadow: none;
    color: var(--pn-ink);
    font-weight: 500;
}

.pn-page .wp-flow-viz .wp-flow-node.wp-flow-highlight {
    border-color: var(--pn-ink);
    background: var(--pn-surface-warm);
    box-shadow: none;
}

.pn-page .wp-flow-viz .wp-flow-node:hover {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.pn-page .wp-flow-viz .wp-flow-node.wp-flow-highlight:hover {
    border-color: var(--pn-ink);
}

.pn-page .wp-flow-viz .wp-flow-node .wp-flow-meta,
.pn-page .wp-flow-viz .wp-flow-arrow {
    color: var(--pn-ink-3);
}

/* Icon tiles in the flow, feature, use-case and credit cards: .wp-icon-purple/-green/-orange/-pink {tinted bg}
 * (0,1,0) :139-146 and their svg fills (0,1,1). A hairline tile with an ink glyph reads on white and on warm. */
.pn-page .wp-icon-purple,
.pn-page .wp-icon-green,
.pn-page .wp-icon-orange,
.pn-page .wp-icon-pink {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pn-line);
}

.pn-page .wp-icon-purple svg,
.pn-page .wp-icon-green svg,
.pn-page .wp-icon-orange svg,
.pn-page .wp-icon-pink svg {
    fill: var(--pn-ink);
}

/* Comparison table on the white #comparison band: .wp-table-wrap {radius 20px; shadow; border} (0,1,0) :117;
 * th {#999; #fafafc} (0,1,1) :119; td {#555} (0,1,1) :120; td:first-child {#1a1a2e} (0,2,1) :121; .check {#22c55e}
 * (0,2,0) :123; tr:hover td {purple tint} (0,2,2) :124; tr.highlight td {purple/green gradient} (0,2,2) :125,
 * td:first-child::before {purple bar} (0,3,3) :127 (last row: no border, :122). Row entrance (:240-252) is untouched. */
.pn-page .wp-table-wrap {
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-media);
    box-shadow: none;
}

.pn-page .wp-table th {
    border-bottom-color: var(--pn-line);
    background: var(--pn-surface-warm);
    color: var(--pn-ink-2);
}

.pn-page .wp-table td {
    border-bottom-color: var(--pn-line);
    color: var(--pn-ink-2);
}

.pn-page .wp-table td:first-child {
    color: var(--pn-ink);
    font-weight: 500;
}

.pn-page .wp-table .check {
    color: var(--pn-ink);
}

.pn-page .wp-table tr:hover td,
.pn-page .wp-table tr.highlight td {
    background: var(--pn-surface-warm);
}

.pn-page .wp-table tr.highlight td:first-child::before {
    background: var(--pn-ink);
}

/* Feature cards on the warm #features band: .wp-feat-card {#fff; 1px border; radius 20px; shadow} (0,1,0) :131,
 * :hover {translateY(-4px); shadow; purple border} (0,2,0) :133, :hover::before {purple bar} (0,2,1) :134,
 * h3 {700; #1a1a2e} (0,1,1) :137, p {#666} (0,1,1) :138. Stagger entrance (:185-200) untouched. */
.pn-page .wp-feat-grid .wp-feat-card {
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface);
    box-shadow: none;
}

.pn-page .wp-feat-grid .wp-feat-card:hover {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.pn-page .wp-feat-grid .wp-feat-card:hover::before {
    background: transparent;
}

/* Use-case cards on the white band: .wp-uc-card {radius 20px; shadow} (0,1,0) :150, :nth-child(1-4) {pastel
 * gradients} (0,2,0) :151-154, :hover {translateY(-4px)} (0,2,0) :155. */
.pn-page .wp-uc-grid .wp-uc-card {
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface-warm);
    box-shadow: none;
}

.pn-page .wp-uc-grid .wp-uc-card:hover {
    box-shadow: none;
    transform: none;
}

/* Credit cards on the warm #pricing band: .wp-credit-card {#fff; radius 20px; shadow} (0,1,0) :163,
 * :hover {translateY(-3px)} (0,2,0) :164. */
.pn-page .wp-credit-grid .wp-credit-card {
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface);
    box-shadow: none;
}

.pn-page .wp-credit-grid .wp-credit-card:hover {
    box-shadow: none;
    transform: none;
}

/* Card titles and text (feature, use-case, credit): {700; #1a1a2e} / {#666} (0,1,1)-(0,2,0) :137-138, :158-159,
 * :167-168. */
.pn-page .wp-feat-card h3,
.pn-page .wp-uc-card h3,
.pn-page .wp-credit-card .wp-credit-title {
    color: var(--pn-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.pn-page .wp-feat-card p,
.pn-page .wp-uc-card p,
.pn-page .wp-credit-card .wp-credit-desc {
    color: var(--pn-ink-2);
}

/* FAQ (#faq): .faq-item.active .faq-question {color:#6c5ce7} (0,3,0) :225 tints the open question's box (its h3 is
 * already ink, theme-2026.css:1652). Not keyed on .active here, so the rule holds whatever the page script does. */
.pn-page #faq .faq-container .faq-question {
    color: var(--pn-ink);
}

/* The page collapses answers with max-height:0 + overflow:hidden (:222), which leaves the 20px bottom padding of
 * theme-2026.css:1663 showing under every CLOSED question. Move that space inside the clipped content. */
.pn-page #faq .faq-container .faq-item .faq-answer {
    padding-bottom: 0;
}

.pn-page #faq .faq-container .faq-answer .content-grey {
    padding-bottom: 20px;
}

/* Related planner line: inline style="color:#4ae00c;text-decoration:none" on the link (lime). Only !important beats an inline style. */
.pn-page > section.services p > a[href$="/post-planner"] {
    color: var(--pn-ink) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* WordPress page: its own style. block fades the question colour (.faq-question {transition: color .2s}, (0,1,0));
 * theme-2026.css's .pn-page .faq-question ring override (0,2,0) replaced that with all .3s. section#faq is unique to it. */
.pn-page section#faq .faq-question {
    transition: color 0.2s;
}