/*
 * theme-2026.css: the pletor-style frame (spec docs/superpowers/specs/2026-09-29-pletor-style-redesign-design.md).
 * Frame: selectors under .pn-frame, .pn-cta-panel or the email-capture component. Page groups: selectors that
 * START with a .pn-page compound (homepage: main#hero.pn-page in frontend.pug). Never redefines
 * --primary/--surface/--border/--text-*. On / this file loads BEFORE pricing-section.css and the inline
 * style blocks, so .pn-page rules win by specificity (mirror the base selector + .pn-page), never by order.
 * Linked last and OUTSIDE the usemin build blocks in frontend_style_slim.pug AND frontend_style.pug.
 * Every edit: bump ?v= in BOTH includes to this file's last git-change date.
 * Same-day re-edit after a deploy: append -2, -3 to ?v= (the date check reads only YYYY-MM-DD).
 * Merge this branch, never rebase: ?v= follows the committer date.
 */
:root {
    --pn-ink: #1b1b1b;
    --pn-ink-2: #4a4a4a;
    --pn-ink-3: #6b6b6b;
    --pn-surface: #ffffff;
    --pn-surface-warm: #f7f5f3;
    --pn-surface-pill: #ebedef;
    --pn-line: #e8e6e1;
    --pn-band: #1b1b1b;
    --pn-footer: #262626;
    --pn-footer-link: rgba(255, 255, 255, 0.7);
    --pn-accent: #5d5fef;
    --pn-radius-control: 8px;
    --pn-radius-card: 32px;
    --pn-radius-media: 20px;
    --pn-radius-panel: 48px;
    --pn-font: "PN Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Private family name on purpose: page bodies ask for "Inter" and must not change.
 * Three subsets so ru-RU (Cyrillic) and ro-RO (ș, ț) render in the same face. The unicode-range
 * values are copied verbatim from @fontsource-variable/inter's wght.css (Step 1 prints them). */
@font-face {
    font-family: "PN Inter";
    src: url('../../../font/inter-var-latin-v5.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "PN Inter";
    src: url('../../../font/inter-var-latin-ext-v5.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "PN Inter";
    src: url('../../../font/inter-var-cyrillic-v5.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@media (max-width: 767.98px) {
    :root {
        --pn-radius-panel: 24px;
    }
}

/* ============ Header (frontend_header.pug + frontend_header_pricing.pug) ============ */
/* The floating pill (app-critical ~l.7065) becomes a full-width white bar with a hairline. */
.pn-frame.navigation-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--pn-surface) !important;
    box-shadow: inset 0 -1px 0 var(--pn-line) !important;
    font-family: var(--pn-font);
}

/* The site sets letter-spacing: 0.8px on nav links; with Inter it reads airy, pletor is normal. */
.pn-frame .top-bar-section ul li > a,
.pn-frame a.pn-btn {
    letter-spacing: normal !important;
}

/* Mobile logged-out Sign in (frontend_header.pug l.5) stays a text link, in the frame font. */
.pn-frame.tab-bar a.mobile-button-header3 {
    font-family: var(--pn-font) !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    color: var(--pn-ink) !important;
}

.pn-frame.navigation-section:before {
    display: none !important;
}

.pn-frame.navigation-section .row.row-custom2 {
    max-width: 78rem;
}

.pn-frame .top-bar-section ul li > a:not(.pn-btn):not(.pn-signin) {
    color: var(--pn-ink-2) !important;
    font-family: var(--pn-font);
    font-weight: 500;
}

/* Centre the nav labels on the 81px bar with the logo and buttons (the inherited 8px top padding
 * left them 7px below the button labels). Same 80px box, so dropdowns do not move. */
.pn-frame .top-bar-section ul.top-left-header > li > a:not(.pn-btn):not(.pn-signin) {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.pn-frame .top-bar-section ul li > a:not(.pn-btn):not(.pn-signin):hover,
.pn-frame .top-bar-section ul li > a.header-link:hover {
    color: var(--pn-ink) !important;
}

/* Dropdown panels: white cards. */
.pn-frame .top-bar-section .dropdown {
    border: 1px solid var(--pn-line) !important;
    border-radius: var(--pn-radius-card) !important;
    background: var(--pn-surface) !important;
    box-shadow: 0 12px 40px rgba(27, 27, 27, 0.08) !important;
    overflow: hidden;
}

/* testimonials.css `.channels-drop .header-link:hover` (0,3,0) paints --primary-light lavender. */
.pn-frame .channels-drop .header-link:hover {
    background: var(--pn-surface-warm) !important;
}

/* Bluesky had the icon element but no image anywhere (also on main); same pattern as the other
 * channel icons (app-critical ~l.14400: a background SVG under /img/icons/svg/channels/). */
.pn-frame .channels-drop .svg-icon-channel-bluesky {
    background-image: url(/img/icons/svg/channels/bluesky.svg) !important;
}

/* Features items whose pug carries an empty `.svg-icon-feature` (no CSS defines it anywhere, so it is a
 * 0px flex item) sat 12px right of the items without one: the flex `gap` on `.header-link` still
 * counts a zero-width child. Drop the empty box so every item's text starts at the same x. */
.pn-frame .channels-drop .svg-icon-feature {
    display: none;
}

/* Keyboard: the dropdowns opened only on :hover (app-critical `ul li.has-dropdown:hover>.dropdown`),
 * so Tab walked through 33 links at opacity 0 (also on main). Open the card for KEYBOARD focus only
 * (trigger :focus-visible, or focus inside the card): a mouse click focuses the href='#' trigger, and a
 * li:focus-within form kept the card open after the pointer left. Ring drawn inside the link so the
 * card's overflow:hidden does not clip it. */
.pn-frame .top-bar-section li.has-dropdown > a:focus-visible + .dropdown,
.pn-frame .top-bar-section li.has-dropdown > .dropdown:focus-within {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

.pn-frame .top-bar-section .dropdown a.header-link:focus-visible {
    outline-offset: -3px !important;
}

.pn-frame .linkTextTitle {
    color: var(--pn-ink) !important;
    font-family: var(--pn-font);
    font-weight: 500;
}

.pn-frame .linkTextDescription {
    color: var(--pn-ink-3) !important;
    font-family: var(--pn-font);
}

/* Buttons. Beats a.strongHeader's !important purple, pill radius and translateY hover.
 * Every state is written at BOTH specificities: the desktop `.top-bar-section ul li > a.pn-btn`
 * form (0,3,3) would otherwise beat a plain `.pn-frame a.pn-btn:hover` (0,3,1). */
.pn-frame a.pn-btn,
.pn-frame .top-bar-section ul li > a.pn-btn {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 40px !important;
    padding: 0 18px !important;
    border: 1px solid var(--pn-ink) !important;
    border-radius: var(--pn-radius-control) !important;
    background: var(--pn-ink) !important;
    background-image: none !important;
    color: #ffffff !important;
    font-family: var(--pn-font);
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
}

/* Desktop bar: centre the button on the 81px bar (Foundation drops it 17px, app.css 24px on /pricing). */
.pn-frame .top-bar-section ul li > a.pn-btn {
    position: relative !important;
    top: 20px !important;
}

/* app.css (the /pricing header) also pushes the right-hand list down 10px. */
.pn-frame .top-bar-section ul.right {
    margin-top: 0 !important;
}

.pn-frame a.pn-btn:hover,
.pn-frame a.pn-btn:focus-visible,
.pn-frame .top-bar-section ul li > a.pn-btn:hover,
.pn-frame .top-bar-section ul li > a.pn-btn:focus-visible {
    background: #000000 !important;
    border-color: #000000 !important;
    transform: none !important;
    box-shadow: none !important;
}

.pn-frame a.pn-btn.pn-btn--secondary,
.pn-frame .top-bar-section ul li > a.pn-btn.pn-btn--secondary {
    background: transparent !important;
    color: var(--pn-ink) !important;
}

.pn-frame a.pn-btn.pn-btn--secondary:hover,
.pn-frame .top-bar-section ul li > a.pn-btn.pn-btn--secondary:hover {
    background: var(--pn-surface-warm) !important;
    border-color: var(--pn-ink) !important;
    color: var(--pn-ink) !important;
}

/* Mobile bar: a smaller button so logo + Sign in + CTA fit at 390px (the old CTA was 34px / 12px). */
.pn-frame.tab-bar a.pn-btn {
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
}

.pn-frame a.pn-signin,
.pn-frame .top-bar-section ul li > a.pn-signin {
    display: inline-flex !important;
    align-items: center;
    height: 40px;
    /* It lost `.button`, so `.top-bar-section li:not(.has-form) a:not(.button){line-height:4.4825rem}` (app-critical:4559) now reaches it. */
    line-height: 1 !important;
    /* Same offset as the desktop CTA below (Foundation's `.top-bar .button` top: 1.0625rem, now 20px),
     * or Sign in floats above it (dry run, every page). 20px centres the 40px box on the 81px bar. */
    position: relative !important;
    top: 20px !important;
    letter-spacing: normal !important;
    white-space: nowrap;
    padding: 0 12px !important;
    background: transparent !important;
    color: var(--pn-ink) !important;
    font-family: var(--pn-font);
    font-size: 15px;
    font-weight: 500;
    box-shadow: none !important;
}

.pn-frame a.pn-signin:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.pn-frame a:focus-visible {
    outline: 2px solid var(--pn-accent) !important;
    outline-offset: 3px;
}

/* Mobile bar: height unchanged (4.55rem, position: fixed). */
.pn-frame.tab-bar {
    background: var(--pn-surface) !important;
    box-shadow: inset 0 -1px 0 var(--pn-line);
}

.pn-frame.tab-bar a.mobile-button-header2 {
    background-image: none !important;
}

/* Phones: logo + Sign in + CTA on one row in every locale (fr-FR's CTA dropped below the bar, also on
 * main). The right-hand group starts after the logo (120px wide from x=16, 104px from x=8 under 375px)
 * and becomes a row; a CTA label too long for the space wraps to two lines inside the 34px button. */
@media (max-width: 420px) {
    .pn-frame.tab-bar section.right-small {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        left: 140px !important;
        width: auto !important;
    }

    .pn-frame.tab-bar a.mobile-button-header3 {
        flex: none;
        line-height: 34px !important;
    }

    .pn-frame.tab-bar a.pn-btn {
        flex: 0 1 auto;
        min-width: 0;
        /* app.css `.button` keeps 20px below it (/pricing), which lifts a flex-centred button 10px. */
        margin-bottom: 0 !important;
        padding: 0 12px !important;
        white-space: normal !important;
        text-align: center;
        line-height: 1.1 !important;
    }
}

@media (max-width: 374px) {
    .pn-frame.tab-bar section.right-small {
        left: 116px !important;
    }
}

/* ============ Closing CTA panel (frontend_cta_panel.pug) ============ */
.pn-cta-panel {
    padding: 96px 16px 48px;
    background: var(--pn-band);
    font-family: var(--pn-font);
}

.pn-cta-panel__card {
    max-width: 78rem;
    margin: 0 auto;
    padding: 64px 32px;
    border-radius: var(--pn-radius-panel);
    background: var(--pn-surface-warm);
    text-align: center;
}

.pn-cta-panel__title {
    margin: 0;
    color: var(--pn-ink);
    font-family: var(--pn-font);
    font-size: clamp(30px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.pn-cta-panel__text {
    max-width: 60ch;
    margin: 16px auto 0;
    color: var(--pn-ink-2);
    font-size: 17px;
    line-height: 1.55;
}

.pn-cta-panel__btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    margin-top: 32px;
    padding: 0 22px;
    border-radius: var(--pn-radius-control);
    background: var(--pn-ink);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
}

.pn-cta-panel__btn:hover {
    background: #000000;
}

.pn-cta-panel__btn:focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .pn-cta-panel {
        padding: 56px 16px 32px;
    }

    .pn-cta-panel__card {
        padding: 32px 20px;
    }
}

/* ============ Footer (frontend_footer_course.pug) ============ */
/* 48px of band above the card on pages without the panel; the panel supplies its own band. */
footer.pn-frame {
    position: relative;
    overflow: hidden;
    /* Room under the card for the wordmark to show whole letters (the dry run showed only a middle band). */
    padding: 48px 16px clamp(140px, 16vw, 240px) !important;
    background: var(--pn-band) !important;
    font-family: var(--pn-font);
}

/* One footer on both bundles: app.css pages (pricing, legal, 404) and app-critical pages (home,
 * features, tools) gave different link weights, a purple social box and different spacing. */
footer.pn-frame .footer__list li a {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}

footer.pn-frame .footer-title,
footer.pn-frame .footer__copyright,
footer.pn-frame a.footer__privacy {
    font-family: var(--pn-font) !important;
}

/* app.css adds 10px under every li and 5px under every link, app-critical none: one rhythm on both bundles. */
footer.pn-frame .footer__list li,
footer.pn-frame .footer__list li a {
    margin-bottom: 0 !important;
}

/* app-critical boxes the icons (border + 12px padding, wraps YouTube at 390), app.css does not:
 * plain row on both, flush with the logo. */
footer.pn-frame .footer-social-icons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Under 1025px app-critical zeroes this column's padding (`.marginBottom20px{padding:initial}`) and
 * both bundles add 15px to the icons under 769px, so app.css pages (pricing, legal, 404) sat 15px right
 * of the logo at 768. One gutter on both: column padding kept, no extra icon margin. */
footer.pn-frame .row.row-footer .columns.marginBottom20px {
    padding-left: 0.9375rem !important;
}

footer.pn-frame ul.footer-social-icons {
    margin-left: 0 !important;
}

/* The logo is absolute in its column (app.css left 6px, app-critical 16px): sit on the column gutter, over the icons. */
footer.pn-frame img.logo-footer {
    left: 0.9375rem !important;
}

/* -tasks.css pages moved "Change Language" to mid-card: pin both legal rows right. */
footer.pn-frame .row.row-footer .float-right {
    float: right !important;
    text-align: right !important;
}

/* Phone: the legal row follows the left-aligned columns above it instead of wrapping ragged-right. */
@media (max-width: 767.98px) {
    footer.pn-frame .row.row-footer .float-right {
        float: none !important;
        text-align: left !important;
    }
}

/* The divider under the link columns was #343546 (a blue-grey from the old footer) inside the #262626 card. */
footer.pn-frame .border-bottom-footer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* The card. Beats -tasks.css `.row-footer{padding:12px !important}` on ~100 pages. */
footer.pn-frame > .row.row-custom2.row-footer {
    position: relative;
    z-index: 1;
    max-width: 78rem !important;
    margin: 0 auto !important;
    padding: 64px !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 0;
    border-radius: var(--pn-radius-panel) var(--pn-radius-panel) 0 0;
    background: var(--pn-footer) !important;
}

footer.pn-frame > .row.row-footer:not(.row-custom2) {
    position: relative;
    z-index: 1;
    max-width: 78rem !important;
    margin: 0 auto !important;
    padding: 0 64px 48px !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 0;
    border-radius: 0 0 var(--pn-radius-panel) var(--pn-radius-panel);
    background: var(--pn-footer) !important;
}

/* The card is two stacked rows; at fractional offsets (390, 768) the band showed through the seam as a
 * dark hairline across the logo. Overlap by 1px. */
footer.pn-frame > .row.row-footer:not(.row-custom2) {
    margin-top: -1px !important;
}

footer.pn-frame section.dark-background {
    background: transparent !important;
}

footer.pn-frame .footer-title {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

footer.pn-frame .footer__list li a,
footer.pn-frame .grey-light,
footer.pn-frame a.footer__privacy {
    color: var(--pn-footer-link) !important;
}

.pn-cta-panel + footer.pn-frame {
    /* Same band on both sides; at a fractional panel bottom the light page showed through as a hairline (404). */
    margin-top: -1px !important;
    padding-top: 0 !important;
}

footer.pn-frame .footer__list li a:hover,
footer.pn-frame a.footer__privacy:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Social SVGs hard-code fill #000 (Instagram g/circle, YouTube) and TikTok is a #161616 rect
 * with a white glyph path on top: the glyph takes currentColor, the tile goes transparent. */
footer.pn-frame .footer-social-icons svg path,
footer.pn-frame .footer-social-icons svg circle,
footer.pn-frame .footer-social-icons svg g {
    fill: currentColor !important;
}

footer.pn-frame .footer-social-icons svg rect {
    fill: transparent !important;
}

footer.pn-frame .footer-social-icons li a,
footer.pn-frame .footer-social-icons li a span {
    color: #ffffff !important;
}

footer.pn-frame .globe-icon path {
    fill: currentColor !important;
}

/* The old footer CTA (pages without the panel): white on the dark card, not ink on ink. */
footer.pn-frame a.pn-btn,
footer.pn-frame a.pn-btn:hover {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: var(--pn-ink) !important;
}

footer.pn-frame a.pn-btn:hover {
    background: var(--pn-surface-warm) !important;
}

/* (0,3,2): beats `.pn-frame a.pn-btn:focus-visible` (0,3,1), whose #000 left ink text on black. */
footer.pn-frame a.pn-btn:focus-visible {
    border-color: #ffffff !important;
    background: var(--pn-surface-warm) !important;
    color: var(--pn-ink) !important;
    outline: 2px solid var(--pn-accent) !important;
    outline-offset: 3px;
}

footer.pn-frame a:focus-visible {
    outline: 2px solid var(--pn-accent) !important;
    outline-offset: 3px;
}

/* The logo link is display:inline around an absolutely positioned img, so its own box is 0x0 and
 * its ring drew nothing (also on main). Ring the logo instead. */
footer.pn-frame a.footer-inline:focus-visible {
    outline: none !important;
}

footer.pn-frame a.footer-inline:focus-visible img.logo-footer {
    outline: 2px solid var(--pn-accent);
    outline-offset: 3px;
}

.pn-frame .pn-wordmark {
    position: absolute;
    left: 50%;
    bottom: -24px;
    width: min(1400px, 110vw);
    transform: translateX(-50%);
    pointer-events: none;
}

.pn-frame .pn-wordmark text {
    fill: rgba(255, 255, 255, 0.04);
    font: 600 200px/1 var(--pn-font);
    letter-spacing: -0.04em;
}

@media (max-width: 767.98px) {
    footer.pn-frame > .row.row-custom2.row-footer {
        padding: 32px 20px !important;
    }

    footer.pn-frame > .row.row-footer:not(.row-custom2) {
        padding: 0 20px 32px !important;
    }
}

/* ============ Homepage body (frontend.pug: main#hero.landing-page.pn-page) ============ */
/* main is transparent and .inner-wrap paints #e0e0e3 (app-critical ~l.5252): give the body a white base. */
.pn-page {
    background: var(--pn-surface);
    color: var(--pn-ink);
    font-family: var(--pn-font);
}

/* (0,1,0): wins ties with app-critical/testimonials (earlier files); pricing-section and inline fonts are
 * beaten by the per-section rules below. */
.pn-page * {
    font-family: var(--pn-font);
}

/* section#pricing carries .font-family-gt {font-family: Helvetica, Arial !important} (app-critical ~l.246). */
.pn-page .font-family-gt {
    font-family: var(--pn-font) !important;
}

.pn-page h1,
.pn-page h2,
.pn-page h3,
.pn-page h4 {
    color: var(--pn-ink);
    font-weight: 500;
}

.pn-page p {
    color: var(--pn-ink-2);
}

/* Bands: 96px / 56px. (0,2,1) beats main>section (0,0,2) and each section's own non-!important (0,1,0) padding;
 * .services-deserve {padding-bottom:8rem !} is !important and is set in the services block. The hero is excluded
 * here: it keeps its top geometry (header clearance, .flex-container-wrapper-3) and gets NO band padding (its
 * bottom is set to 0 below). */
.pn-page > section:not(.hero) {
    padding-top: 96px;
    padding-bottom: 96px;
}

/* Hero and planners are both white, so the hero adds no bottom band: its own .flex-container-wrapper-3 bottom
 * space (4rem + 1rem) plus the planners' 96px already separate them. With a 96px hero band on top the gap under
 * the channel card measured 288px (Task 9). */
.pn-page > section.hero {
    padding-bottom: 0;
}

@media (max-width: 767.98px) {
    .pn-page > section:not(.hero) {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    /* .flex-container-wrapper-3 {padding-bottom:4rem} (0,1,0), <=1178 margin-bottom:2rem (0,1,0); the channel
     * card keeps its own 4rem bottom margin (.learn-container <=767). */
    .pn-page > section.hero .flex-container-wrapper-3 {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

/* a:hover {color: var(--primary)} and a:hover, a:focus {color:#4645c9} (app-critical ~l.4914/4923) are (0,1,1).
 * Every button below sets its own hover colour with higher specificity. */
.pn-page a:hover,
.pn-page a:focus {
    color: var(--pn-ink);
}

.pn-page a:focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 3px;
}

/* The billing switch halves and the FAQ questions are divs made focusable by pricing.js and theme_v3.js;
 * the link rule above does not reach them. Covers /, /pricing and the channel pages. */
.pn-page .switchSelector:focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 3px;
}

/* Inset: .faq-item {overflow: hidden} (app-critical ~l.16384) clips an outside ring down to its bottom edge. */
.pn-page .faq-question:focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: -2px;
}

.pn-page ::selection {
    background: var(--pn-ink);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* Chevron icons are CSS masks painted by background-color: green (#1e7d05), white !, purple ! (#815ef8, both
 * app-critical ~l.13980 and pricing-section l.514 at (0,1,1) !), green ! (pricing-section l.518). Follow the text.
 * color: inherit !important also beats `.cta-white-black-border.button i {color: var(--primary)}` (0,2,1). */
.pn-page i.svg-icon-right {
    color: inherit !important;
    background-color: currentColor !important;
}

/* ---------- Hero (frontend.pug:182-236) ---------- */
/* .wave-container {background-color:#e8e8ea; background-attachment:fixed} (app-critical ~l.15501) */
.pn-page > section.hero.wave-container {
    background: var(--pn-surface);
    background-attachment: scroll;
    color: var(--pn-ink);
}

.pn-page .hero .flex-container-wrapper-3 {
    gap: 24px;
}

/* max-width:720px (app-critical ~l.15562) wraps a 60px heading into 4 lines. */
.pn-page .hero .run-test-container-top {
    max-width: 960px;
}

/* Eyebrow: .intro-text is Caveat ! in --primary-dark (app-critical ~l.223). */
.pn-page .hero .intro-text {
    max-width: 720px;
    margin: 0 auto 20px;
    border-radius: 0;
    color: var(--pn-ink-2);
    font-family: var(--pn-font) !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.005em;
    text-align: center;
}

/* (0,3,1)!: beats .hero h1 {font-size:54px !; line-height:1.15em !} (0,1,1) at ~l.15540/8266/15638 and
 * .loadtesting {font-family:"Roboto Medium" !} (0,1,0) at ~l.280. */
.pn-page .hero h1.loadtesting {
    margin-left: 0;
    color: var(--pn-ink);
    font-family: var(--pn-font) !important;
    font-size: clamp(36px, 4.6vw, 60px) !important;
    font-weight: 500;
    line-height: 1.1 !important;
    letter-spacing: -0.03em;
    text-shadow: none;
}

/* .header-descr-speed {font-size:18px !} (0,1,0) at ~l.15547. */
.pn-page .hero h2.header-descr-speed {
    max-width: 720px;
    margin: 20px auto 32px;
    color: var(--pn-ink-2);
    font-family: var(--pn-font);
    font-size: 19px !important;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

/* Primary button: the hero CTA and (Task 7) the pricing "Get started free". Fights .button-shine (radial purple
 * gradient !, app-critical ~l.13849 + pricing-section l.783), .main-button (22px !, 999px radius !, 4px lavender
 * border !, ~l.13898/13333/10268), #pricing .main-button (1,1,0) ! (pricing-section l.799), .postfix.button.radius
 * {padding:8px 22px !} (0,3,0) at <=480px, a.cta-new-col-white {color:#fff !}, .forceText {transform:… !}. */
.pn-page a#getstartedmain,
.pn-page #pricing .freeContainer a.main-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    max-width: 100%;
    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-shadow: none !important;
    transform: none !important;
}

/* .cta span {font-size:20px; line-height:24px} (0,1,1) app-critical ~l.16094: without this the label ignores the
 * anchor's 16px. */
.pn-page a#getstartedmain > span,
.pn-page #pricing .freeContainer a.main-button > span {
    font-size: inherit;
    line-height: inherit;
}

/* .cta-new-col-white:hover {transform:scale(1.015) !; background-color:#4d4edb} (0,2,0) at ~l.7898. */
.pn-page a#getstartedmain:hover,
.pn-page a#getstartedmain:focus,
.pn-page #pricing .freeContainer a.main-button:hover,
.pn-page #pricing .freeContainer a.main-button:focus {
    background: #000000 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    text-decoration: none;
    transform: none !important;
}

/* Product shot: radius and weight only; its size is untouched (it is the LCP image). Inline .hero-product-img
 * (0,1,0) radius 14 + heavy shadow (frontend.pug:156-157). */
.pn-page .hero .hero-product-img {
    border-radius: var(--pn-radius-media);
    box-shadow: 0 0 0 1px var(--pn-line);
}

/* Channel strip card: 4px lavender border + shadow (app-critical ~l.14254), maroon text (.bg-green ~l.14249). */
.pn-page .hero .learn-container {
    padding: 32px 40px;
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface-warm);
    box-shadow: none;
}

/* .learn-title {1.65rem !; 600 !; -.02em !} (0,1,0) at ~l.14285. */
.pn-page .hero .learn-title {
    color: var(--pn-ink);
    font-size: 22px !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
}

.pn-page .hero .learn-header p {
    color: var(--pn-ink-2);
    font-size: 16px;
}

@media (max-width: 767.98px) {
    .pn-page .hero h2.header-descr-speed {
        font-size: 17px !important;
    }

    .pn-page .hero .learn-container {
        padding: 28px 20px;
    }
}

/* ---------- Content planners (inline style frontend.pug:239-260, all (0,2,x)) ---------- */
.pn-page .lp-planners-section .lp-planners-eyebrow {
    color: var(--pn-ink-2);
    font-weight: 500;
}

.pn-page .lp-planners-section .lp-planners-title {
    color: var(--pn-ink);
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.pn-page .lp-planners-section .lp-planners-sub {
    color: var(--pn-ink-2);
}

/* Inline card: #fff, 1px #ececf5 border, 16px radius, color:#1a1a2e ! (0,2,0). */
.pn-page .lp-planners-section .lp-planner-card {
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface-warm);
    box-shadow: none;
    color: var(--pn-ink) !important;
}

/* Inline hover: translateY(-3px), #b4f088 border, shadow (0,3,0). */
.pn-page .lp-planners-section .lp-planner-card:hover {
    border-color: transparent;
    box-shadow: none;
    color: var(--pn-ink) !important;
    transform: none;
}

.pn-page .lp-planners-section .lp-planner-card:hover h3 {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Lime badge (#4ae00c on #eafdd9). */
.pn-page .lp-planners-section .lp-planner-badge {
    border-radius: 999px;
    background: var(--pn-surface);
    color: var(--pn-ink);
    font-weight: 500;
}

.pn-page .lp-planners-section .lp-planner-card h3 {
    color: var(--pn-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.pn-page .lp-planners-section .lp-planner-card p {
    color: var(--pn-ink-2);
}

/* Lime arrow (#4ae00c); its translateX nudge on hover is kept (not a lift). */
.pn-page .lp-planners-section .lp-planner-arrow {
    color: var(--pn-ink);
    font-weight: 500;
}

/* ---------- Trust (inline frontend.pug:282-286): the first warm band ---------- */
.pn-page > section.lp-trust-section {
    background: var(--pn-surface-warm);
}

.pn-page .lp-trust-section .lp-trust-title {
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.pn-page .lp-trust-section .lp-trust-body {
    color: var(--pn-ink-2);
}

/* ---------- Channels, horizontal row (frontend_channels_horizontal.pug; testimonials.css ~l.973-1110) ---------- */
.pn-page > .channels-horizontal-section {
    margin: 0 auto;
    padding: 96px 20px 24px;
}

.pn-page .channels-horizontal-section .channels-horizontal-container {
    padding: 32px 40px;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface-warm);
    box-shadow: none;
}

.pn-page .channels-horizontal-heading h3 {
    color: var(--pn-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.pn-page .channels-horizontal-icons .channel-icon-wrapper {
    border: 0;
    background: var(--pn-surface);
    box-shadow: none;
}

/* testimonials.css ~l.1034 (0,3,0): translateY(-4px) + shadow. */
.pn-page .channels-horizontal-icons .channel-icon-item:hover .channel-icon-wrapper {
    background: var(--pn-surface);
    box-shadow: none;
    transform: none;
}

/* testimonials.css ~l.1041/1087 size lists omit bluesky; app-critical (after frame-polish) sets it 26x22 !. */
.pn-page .channels-horizontal-icons .channel-icon-wrapper .svg-icon-channel-bluesky {
    width: 28px !important;
    height: 28px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ---------- Channels grid (channels/frontend_channels.pug; testimonials.css ~l.405-677) ---------- */
.pn-page > .channels-section {
    margin: 0 auto;
    padding: 24px 20px 96px;
}

.pn-page .channels-section .channels-content h2 {
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.pn-page .channels-section .channels-content p {
    color: var(--pn-ink-2);
}

/* Secondary button. .explore-link {color:#4d4fd4; background:var(--primary-light)} + hover lift (0,2,0). */
.pn-page .channels-section a.explore-link {
    padding: 12px 22px;
    border: 1px solid var(--pn-ink);
    border-radius: var(--pn-radius-control);
    background: transparent;
    color: var(--pn-ink);
    font-size: 16px;
    font-weight: 500;
}

.pn-page .channels-section a.explore-link:hover,
.pn-page .channels-section a.explore-link:focus {
    background: var(--pn-surface-warm);
    color: var(--pn-ink);
    transform: none;
}

/* 7 across on desktop; flex so a short last row centres. NO transform/opacity here: .channels-grid gets
 * lp-stagger from feature-landing.js:48-51 and its children fade in. */
.pn-page .channels-section .channels-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.pn-page .channels-section .channels-grid > .channel-item {
    flex: 0 0 calc((100% - 96px) / 7);
    min-width: 0;
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface-warm);
    box-shadow: none;
}

/* testimonials.css ~l.458 (0,2,0) translateY(-4px) + purple shadow; inline frontend.pug:162 (0,3,0) translateY(-3px). */
.pn-page .channels-section .channels-grid > .channel-item:hover {
    background: var(--pn-surface-warm);
    box-shadow: none;
    transform: none;
}

/* testimonials.css ~l.518 .channel-item:hover .svg-icon-channel-* {scale(1.1)} (0,3,0): no hover motion on /. */
.pn-page .channels-section .channel-item:hover [class*="svg-icon-channel-"] {
    transform: none;
}

.pn-page .channels-section .channel-item .channel-name {
    color: var(--pn-ink-2);
    font-weight: 500;
}

.pn-page .channels-section .channel-item:hover .channel-name {
    color: var(--pn-ink);
}

/* 7 tiles of ~123px: testimonials.css .channel-item {padding:24px} (0,1,0) left ~75px, so "X (Twitter)" wrapped
 * (its icon sat higher than the rest) and "Instagram" overflowed by 2px. */
@media (min-width: 1025px) {
    .pn-page .channels-section .channels-grid > .channel-item {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (max-width: 1024px) {
    .pn-page .channels-section .channels-grid > .channel-item {
        flex-basis: calc((100% - 48px) / 4);
    }
}

@media (max-width: 768px) {
    .pn-page .channels-section .channels-grid {
        gap: 12px;
    }

    .pn-page .channels-section .channels-grid > .channel-item {
        flex-basis: calc((100% - 36px) / 4);
    }

    .pn-page .channels-horizontal-icons .channel-icon-wrapper .svg-icon-channel-bluesky {
        width: 24px !important;
        height: 24px !important;
    }
}

@media (max-width: 767.98px) {
    .pn-page > .channels-horizontal-section {
        padding: 56px 16px 16px;
    }

    .pn-page > .channels-section {
        padding: 16px 16px 56px;
    }

    .pn-page .channels-section .channels-grid > .channel-item {
        border-radius: 24px;
    }
}

/* ---------- Calendar shot (inline frontend.pug:147-152): warm band ---------- */
.pn-page > section.pn-shot-section {
    background: var(--pn-surface-warm);
}

.pn-page .pn-shot-section .pn-shot-title {
    color: var(--pn-ink);
    font-size: clamp(28px, 2.6vw, 36px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.pn-page .pn-shot-section .pn-shot-sub {
    color: var(--pn-ink-2);
}

.pn-page .pn-shot-section .pn-shot-img {
    border-radius: var(--pn-radius-media);
    box-shadow: 0 0 0 1px var(--pn-line);
}

/* ---------- Features (frontend_features_per_section.pug): one white band over #feature1 + #feature2 ---------- */
/* .bg-grey {#f8f9fb} (0,1,0); inline #feature1::after / #feature2::after fade into #fff / #f5f5f7 (1,0,1). */
.pn-page > section.services-cont-no-image {
    background: var(--pn-surface);
}

.pn-page > section#feature1::after,
.pn-page > section#feature2::after {
    display: none;
}

.pn-page > section#feature2 {
    padding-top: 0;
}

.pn-page .services-cont-no-image .head-main {
    color: var(--pn-ink);
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.pn-page .services-cont-no-image .head-main-description {
    color: var(--pn-ink-2);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* #feature2's description is a full sentence (landingpage.description2), not an eyebrow: no caps. Typography only,
 * it is a reveal target. */
.pn-page > section#feature2 > p.head-main-description {
    font-size: 19px;
    letter-spacing: -0.01em;
    text-transform: none;
}

/* .caveat-font {font-family:'Caveat' !; font-size:24px !; color:var(--primary-dark)} (0,1,0) at ~l.9034. */
.pn-page .services-cont-no-image h2.caveat-font {
    color: var(--pn-ink-2);
    font-family: var(--pn-font) !important;
    font-size: 14px !important;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pn-page .services-cont-no-image .head-main-description-2 {
    color: var(--pn-ink-2);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: normal;
}

/* Cards. Beats .services-cont (0,1,0), >=1024 border/radius (0,1,0), .services-cont.active #fbe3e0 (0,2,0),
 * [class*=active] lavender (0,2,0), inline radius (0,2,0). The active state drives a media column that is
 * commented out (frontend_features_per_section.pug:119, :205), so active and idle cards look the same. */
.pn-page .services-cont-wrapper .services-cont {
    padding: 28px 28px 20px;
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface-warm);
    box-shadow: none;
    color: var(--pn-ink);
    cursor: default;
}

/* The link card navigates, so it keeps the pointer. */
.pn-page .services-cont-wrapper a.services-cont {
    cursor: pointer;
}

/* .services-cont:hover:not(.active) #e0e0e0 (0,3,0); inline hover shadow (0,3,0). */
.pn-page .services-cont-wrapper .services-cont:hover {
    background: var(--pn-surface-warm);
    box-shadow: none;
}

/* .services-cont {opacity:.75}: when JS adds lp-stagger, lp-visible sets 1; without it (reduced motion, no
 * IntersectionObserver) ink-2 at 75% would drop contrast. Only the no-JS case is touched. */
.pn-page .services-cont-wrapper:not(.lp-stagger) > .services-cont {
    opacity: 1;
}

/* >=1024: .services-cont.active .svg-slider {color: var(--primary) !; fill: var(--primary)} (0,3,0). */
.pn-page .services-cont-wrapper .services-cont .svg-slider {
    color: var(--pn-ink) !important;
    fill: var(--pn-ink);
}

.pn-page .services-cont-wrapper .services-cont .services-title {
    color: var(--pn-ink);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.pn-page .services-cont-wrapper .services-cont p.linkTextDescription3 {
    color: var(--pn-ink-2);
    font-size: 15px;
}

.pn-page .services-cont-wrapper a.services-cont,
.pn-page .services-cont-wrapper a.services-cont:hover {
    color: var(--pn-ink);
}

/* <=1024: .services-cont-no-image .container-all-features {height:1150px !} (0,2,0) at ~l.13074 would clip the
 * taller warm cards (and long de/ru copy) into the next section. */
.pn-page .services-cont-no-image .container-all-features {
    height: auto !important;
}

/* Secondary button. .cta-white-black-border.button {#fff; shadow; padding:18px 18px 16px 18px !} (0,2,0),
 * <=1025 padding:15px ! (0,2,0). */
.pn-page .container-all-features a.cta-white-black-border.button {
    padding: 14px 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;
    font-weight: 500;
}

/* .cta span {font-size:20px} (0,1,1) kept the label at 20px, so the chevron wrapped to its own line (1440) and the
 * label to three lines (390). The label follows the button: 16px, or the base 14px at <=1140. */
.pn-page .container-all-features a.cta-white-black-border.button > span {
    font-size: inherit;
}

.pn-page .container-all-features a.cta-white-black-border.button:hover,
.pn-page .container-all-features a.cta-white-black-border.button:focus {
    background: var(--pn-surface-warm);
    color: var(--pn-ink);
}

/* ---------- Services CTA (frontend_services.pug): warm band, ink text ---------- */
/* .services-deserve {purple gradient; padding-bottom:8rem !} (0,1,0) ~l.15961; .shadow {box-shadow … !} ~l.9658. */
.pn-page > section.services-deserve {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
    background: var(--pn-surface-warm) !important;
    box-shadow: none !important;
}

/* inline frontend.pug:140 (0,1,1) purple radial glow */
.pn-page .services-deserve::before {
    display: none;
}

.pn-page .services-deserve .container-deserve-centered {
    padding: 0 20px;
}

.pn-page .services-deserve h2.hero-heading {
    color: var(--pn-ink);
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.pn-page .services-deserve .hero-subheading {
    color: var(--pn-ink-2);
    font-size: 19px;
    letter-spacing: -0.01em;
}

.pn-page .services-deserve a.cta-primary {
    padding: 14px 24px;
    border: 1px solid var(--pn-ink);
    border-radius: var(--pn-radius-control);
    background: var(--pn-ink);
    box-shadow: none;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 500;
}

/* .cta-primary:hover translateY(-2px) (0,2,0) ~l.16137; inline .services-deserve .cta-primary:hover (0,3,0). */
.pn-page .services-deserve a.cta-primary:hover,
.pn-page .services-deserve a.cta-primary:focus {
    border-color: #000000;
    background: #000000;
    box-shadow: none;
    color: #ffffff !important;
    transform: none;
}

/* .cta-secondary {color:#fff !} (0,1,0), hover (0,2,0) !. On a warm band the hover fill is white. */
.pn-page .services-deserve a.cta-secondary {
    padding: 14px 24px;
    border: 1px solid var(--pn-ink);
    border-radius: var(--pn-radius-control);
    background: transparent;
    color: var(--pn-ink) !important;
    font-size: 16px;
    font-weight: 500;
}

.pn-page .services-deserve a.cta-secondary:hover,
.pn-page .services-deserve a.cta-secondary:focus {
    border-color: var(--pn-ink);
    background: var(--pn-surface);
    color: var(--pn-ink) !important;
}

.pn-page .services-deserve .stats-badge {
    border-radius: 999px;
    background: var(--pn-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--pn-ink-2);
}

.pn-page .services-deserve .stats-badge strong {
    color: var(--pn-ink);
}

/* .services-deserve ::selection {-webkit-text-fill-color: indigo} (0,1,1) ~l.11849 */
.pn-page .services-deserve ::selection {
    background: var(--pn-ink);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

@media (max-width: 767.98px) {
    .pn-page > section.services-deserve {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
}

/* ---------- Pricing (frontend.pug:311-335 + common/pricing/*) ---------- */
.pn-page #pricing .pricingcontainer {
    padding: 0 20px 48px;
}

/* #pricing .main-title {48px; 700; #111827} (1,1,0) ~l.10835. */
.pn-page #pricing .main-title {
    color: var(--pn-ink);
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.pn-page #pricing .offer-description {
    color: var(--pn-ink-2);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Monthly/yearly toggle. pricing.js:97-145 moves .cta-blue (+ .tiny) to the chosen div and swaps
 * switchButtonSelected/NotSelected on its span, so the ACTIVE state keys on .cta-blue, never on
 * .yearly-button/.monthly-button (whose backgrounds are lime/white at (0,3,0), ~l.10539/10544). */
.pn-page #pricing .switchContainer {
    background-color: var(--pn-surface-warm);
    box-shadow: none;
}

.pn-page #pricing .switchContainer .switchSelector {
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

.pn-page #pricing .switchContainer .switchSelector:hover {
    border: 0;
    background-color: var(--pn-surface-pill, #ebedef);
}

.pn-page #pricing .switchContainer .switchSelector.cta-blue,
.pn-page #pricing .switchContainer .switchSelector.cta-blue:hover {
    background-color: var(--pn-ink);
}

/* .switchButtonSelected {color:#1e7d05} (0,3,0) ~l.10522; NotSelected rgb(93,100,123) ~l.10529. */
.pn-page #pricing .switchContainer .switchButtonSelected {
    color: #ffffff;
}

.pn-page #pricing .switchContainer .switchButtonNotSelected {
    color: var(--pn-ink-2);
}

/* .pricing-svg {color:#288e2a !} (0,1,0) pricing-section l.773 (tag icons in the toggle and the savings pills). */
.pn-page #pricing .pricing-svg {
    color: inherit !important;
}

/* "Get started free" above the plans: shares the hero primary button rules (the #getstartedmain block). */
.pn-page div#pricing {
    gap: 24px;
}

/* Plan cards. Fights #pricing .price_wrapper (1,1,0) radius 16 ! (pricing-section l.100), inline shadow/radius
 * 20 (1,1,0), .business {border:2px solid #5d5fef !} (1,2,0), .pro shadow (1,2,0). A transparent 2px border on
 * every card keeps the highlighted one the same size. NO transform/opacity: div#pricing is lp-stagger. */
.pn-page #pricing .price_wrapper.lite {
    border: 2px solid transparent !important;
    border-radius: var(--pn-radius-card) !important;
    background: var(--pn-surface-warm) !important;
    box-shadow: none !important;
}

.pn-page #pricing .price_wrapper.lite.business {
    border-color: var(--pn-ink) !important;
}

/* Hovers: translateY(-4px) (1,2,0), business -8px (1,3,0), inline -4/-6px (1,2,0)/(1,3,0), >=1200 shadow (1,3,0). */
.pn-page #pricing .price_wrapper.lite:hover {
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none;
}

.pn-page #pricing .price_wrapper.lite.business:hover {
    border-color: var(--pn-ink) !important;
    box-shadow: none !important;
    transform: none;
}

/* Header: #fbfbfb ! (1,2,0), pro/business #fff ! (1,3,0), teams #fef3c7 (1,3,0), radius 16 ! (0,2,0). */
.pn-page #pricing .price_wrapper.lite .header {
    border-bottom: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-card) var(--pn-radius-card) 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pn-ink) !important;
    text-shadow: none;
}

/* "Popular": a diagonal ribbon clipped by the card corner becomes an ink chip at the top of the header.
 * .label-container (absolute, overflow hidden) pricing-section l.285; ribbon folds #08af1f l.298/309. */
.pn-page #pricing .price_wrapper .label-container {
    position: static;
    width: auto;
    height: auto;
    margin: 4px 0 4px;
    overflow: visible;
}

.pn-page #pricing .price_wrapper .label-container::before,
.pn-page #pricing .price_wrapper .label-container::after,
.pn-page #pricing .price_wrapper .label-diagonal.popular::before {
    display: none;
}

/* rgb(208,255,153) ! (1,4,0) pricing-section l.392 / app-critical ~l.10615. */
.pn-page #pricing .price_wrapper.lite.business .label-diagonal.popular {
    display: inline-block;
    position: static;
    width: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--pn-ink) !important;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    transform: none;
}

/* Monthly mode (pricing.js:132 adds .monthly-grey) (1,5,0). */
.pn-page #pricing .price_wrapper.lite.business .label-diagonal.popular.monthly-grey {
    background: var(--pn-surface-pill, #ebedef) !important;
    color: var(--pn-ink) !important;
}

/* Plan names: Covered By Your Grace, rotate(-3deg), purple text / purple fill (1,4,1) pricing-section l.157-203;
 * business color ! is (1,5,1) at l.247, so .lite makes this (1,6,1) (a tie would lose to the later file). */
.pn-page #pricing .price_wrapper.lite .header .price span.price-bold {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--pn-ink) !important;
    font-family: var(--pn-font) !important;
    font-size: 28px !important;
    font-weight: 500;
    line-height: 1.2 !important;
    letter-spacing: -0.03em;
    text-transform: none;
    transform: none;
}

/* "PostNext" before the plan name: .price-bold4 {22px !} (0,1,0). ink-3 on warm = 4.90:1. */
.pn-page #pricing .price_wrapper .header .price span.price-bold4 {
    color: var(--pn-ink-3);
    font-family: var(--pn-font) !important;
    font-size: 13px !important;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Price: 700 #111827 (1,4,0); business color ! + 600 ! (1,4,0). Size (48px !) unchanged. */
.pn-page #pricing .price_wrapper .header .price .price-bold3 {
    color: var(--pn-ink) !important;
    font-family: var(--pn-font) !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em;
}

/* business .ideal color ! (1,3,0): one class more. */
.pn-page #pricing .price_wrapper.lite .ideal {
    color: var(--pn-ink-2) !important;
}

/* Perks: Hind (1,3,1), GT America ! + #26262c (1,4,2), .perks strong GT America ! (0,1,1). */
.pn-page #pricing .price_wrapper .section ul.perks,
.pn-page #pricing .price_wrapper .section.intro ul.perks li,
.pn-page #pricing .price_wrapper .perks strong {
    color: var(--pn-ink);
    font-family: var(--pn-font) !important;
}

/* Lavender strip #f9f8fc with #e9e4ee rules (0,1,1) pricing-section l.490. */
.pn-page #pricing li.footer-pricing {
    border-top: 1px solid var(--pn-line);
    border-bottom: 1px solid var(--pn-line);
    background: transparent;
}

/* Checks: element color is #10b981 (1,4,1) / business #5d5fef (1,3,0), so currentColor would paint them
 * green/purple; set the ink explicitly. i.svg-icon-right-green {#2f9130 !} (0,1,1). */
.pn-page #pricing i.svg-icon-check {
    background-color: var(--pn-ink) !important;
    color: var(--pn-ink) !important;
}

.pn-page #pricing .cil-info {
    background-color: var(--pn-ink-3);
}

/* Savings pill: lime rgb(208,255,153) pricing-section l.739. White on the warm card. */
.pn-page #pricing .custom-saving3 {
    background-color: var(--pn-surface);
    color: var(--pn-ink-2);
}

/* Paid-plan CTAs. .button-shine3 purple ! (0,1,0); business gradient ! (1,3,0) + hover (1,4,0) scale;
 * pro/teams gradients (1,3,0); .postfix.button (0,2,0) Roboto; .postfix.button.radius 999px (0,3,0).
 * .postfix {height:3.8025rem; line-height:2.7525rem} (0,1,0) app-critical ~l.2663 fixed the button at 61px, so a
 * 2-3 line ru label spilled outside the ink; height:auto + padding lets it grow. Padding beats
 * .postfix.button.radius {padding:8px 22px !} (0,3,0) at <=480px. Font-size ! beats <=768 .services a {14px !}
 * (0,1,1) app-critical ~l.12015 (the pricing band is section.services). */
.pn-page #pricing .price_wrapper.lite a.button {
    height: auto !important;
    min-height: 48px;
    padding: 12px 20px !important;
    font-size: 16px !important;
    line-height: 1.25;
    white-space: normal;
    border: 1px solid var(--pn-ink) !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-weight: 500;
    text-shadow: none !important;
    transform: none !important;
}

/* .cta span {font-size:20px; line-height:24px} (0,1,1) app-critical ~l.16094. */
.pn-page #pricing .price_wrapper.lite a.button > span {
    font-size: inherit;
    line-height: inherit;
}

.pn-page #pricing .price_wrapper.lite a.button:hover,
.pn-page #pricing .price_wrapper.lite a.button:focus,
.pn-page #pricing .price_wrapper.lite a.button:active {
    background: #000000 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    text-decoration: none;
    transform: none !important;
}

/* Free plan: secondary (ink outline). #pricing .signup-free purple gradient ! (1,1,0) + hover lift;
 * .free .button {color:#0c0c0c !} (1,3,0); .button-3d:active inset --primary-dark (0,2,0). */
.pn-page #pricing .price_wrapper.lite.free a.button {
    background: transparent !important;
    color: var(--pn-ink) !important;
}

.pn-page #pricing .price_wrapper.lite.free a.button:hover,
.pn-page #pricing .price_wrapper.lite.free a.button:focus,
.pn-page #pricing .price_wrapper.lite.free a.button:active {
    background: var(--pn-surface) !important;
    color: var(--pn-ink) !important;
}

/* ---------- FAQ (frontend.pug:337-351; toggled by theme_v3.js:41-45) ---------- */
/* .pricing-plans-questions {margin:6rem 0 4rem} (0,1,0) ~l.323 would stack on the band padding. */
.pn-page > section.pricing-plans-questions {
    margin: 0;
}

.pn-page .pricing-plans-questions .row.row-custom4 {
    max-width: 880px;
}

.pn-page .pricing-plans-questions .head-main {
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.pn-page .pricing-plans-questions p.content-grey {
    justify-content: center;
    color: var(--pn-ink-2);
    font-size: 17px;
}

/* .faq-item {1px #e0e0e0 box, radius 5, #fff} ~l.16372 -> hairline list. */
.pn-page .faq-container .faq-item {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--pn-line);
    border-radius: 0;
    background: transparent;
}

.pn-page .faq-container .faq-item:first-child {
    border-top: 1px solid var(--pn-line);
}

/* padding 1rem 1.5rem, #fff, hover #f9f9f9 (0,2,0), active #f5f5f5 (0,3,0). */
.pn-page .faq-container .faq-item .faq-question,
.pn-page .faq-container .faq-item .faq-question:hover,
.pn-page .faq-container .faq-item.active .faq-question {
    padding: 20px 0;
    background: transparent;
}

/* padding-right: without it a full-width question runs into its chevron (390). */
.pn-page .faq-container h3.heading-description-4 {
    margin: 0;
    padding-right: 16px;
    color: var(--pn-ink);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* No vertical growth beyond the old box: the inline max-height is 300px when open (frontend.pug:166). */
.pn-page .faq-container .faq-item .faq-answer {
    padding: 0 0 20px;
    border-top: 0;
    background: transparent;
}

.pn-page .faq-container .faq-answer .content-grey {
    color: var(--pn-ink-2);
}

/* Chevrons: background-color var(--primary-dark) ~l.16446/16472 (the class flips down <-> up on toggle). */
.pn-page .faq-container .faq-question i.svg-icon-chevron-down,
.pn-page .faq-container .faq-question i.svg-icon-chevron-up {
    background-color: var(--pn-ink) !important;
    fill: var(--pn-ink);
    text-shadow: none;
}