/*
 * theme-2026-pricing.css: the PRICING page group of the pletor-style redesign (public /pricing only)
 * (spec docs/superpowers/specs/2026-09-29-pletor-style-redesign-design.md, sub-project 3;
 * plan docs/superpowers/plans/2026-09-30-pletor-redesign-pricing.md).
 * Linked ONLY from app/server/views/frontend/frontend_pricing_plans.pug, on the line after
 * `include common/v3/frontend_style` (app.css bundle -> theme-2026.css), so it loads after theme-2026.css, whose
 * homepage .pn-page rules for the plan cards (div#pricing), the FAQ list and page-wide type also apply here.
 * The pricing iframe and /onboarding/subscription include the same partials but never carry .pn-page and never
 * link this file: every selector starts with the .pn-page compound (main#hero.pricingHero.pn-page).
 * Fights app.css (all_v3.css), NOT app-critical.css. Uses the --pn-* tokens from theme-2026.css and defines none.
 * No transform/opacity/animation/transition on h1.main-title (.animate-text-fade-in) or on the elements pricing.js
 * fades (.switchSelector, .switchButton, .price-bold3: jQuery fadeTo writes inline opacity).
 * Every edit: set ?v= in frontend_pricing_plans.pug to this file's last git-change date (tests/pricing-2026.test.js).
 * Same-day re-edit after a deploy: append -2, -3. Merge, never rebase: ?v= follows the committer date.
 */

/* ============ Page-wide ============ */
/* main > children: section.services.font-family-gt (hero + switch + cards + contact + table + 15 accounts, one white
 * band) and section.pricing-plans-questions (FAQ). .services {color:#444444} (0,1,0) app.css:9029 is what bare text
 * inherits. */
.pn-page > section.services {
    color: var(--pn-ink);
}

/* theme-2026.css:638/651 give every non-.hero child 96px / 56px. This section is the page top, right under the
 * header: keep its own main>section {padding:3.8rem 0} (0,0,2) app.css:8109 on top (as the homepage/channel heroes
 * keep their top geometry) and take the band bottom. (0,3,1) beats (0,2,1) at every width. */
.pn-page > section.services.font-family-gt {
    padding-top: 3.8rem;
}

/* The FAQ follows another white band: 96px (56px) of the section above already separates them.
 * .pricing-plans-questions margin is zeroed by theme-2026.css:1596. */
.pn-page > section.services.pricing-plans-questions {
    padding-top: 0;
}

/* ============ Hero (frontend_pricing_plans.pug:69-92) ============ */
/* .main-title {font-family:"Inter-Bold" !; font-size:54px !} (0,1,0) app.css:10001; .pricingcontainer h1
 * {margin:1.5rem 0 2rem; line-height:52px} (0,1,1) :294; <=767 .pricingHero h1 {2.5rem !} (0,1,1) :11075;
 * <=768 .pricingHero h1 {2.2rem !; line-height:1.1; letter-spacing:-0.5px; margin:0 auto 10px} (0,1,1) :14295;
 * h1 {letter-spacing:-0.02em} (0,0,1) :7780. Same scale as the homepage hero H1 (theme-2026.css:722). */
.pn-page .pricingcontainer h1.main-title {
    margin: 0 auto 20px;
    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;
    letter-spacing: -0.03em;
    text-shadow: none;
}

/* h2 {1.8rem; line-height:2rem; margin-bottom:2rem} (0,0,1) app.css:5359/5353/5709; <=768 h2 {0.8rem} (0,0,1)
 * :14346 (12.8px today). */
.pn-page .pricingcontainer h2.offer-description {
    max-width: 720px;
    margin: 0 auto 32px;
    color: var(--pn-ink-2);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

/* ---------- Monthly / yearly switch ----------
 * The homepage rules key on `#pricing .switchContainer` (theme-2026.css:1355-1388): on / the switch sits inside
 * section#pricing; here it sits in .pricingcontainer, OUTSIDE div#pricing, so none of them match. Same design,
 * re-targeted. pricing.js:97-172 moves .cta-blue/.tiny between the two divs and swaps
 * switchButtonSelected/NotSelected on their spans, so the active state keys on .cta-blue.
 * .switchContainer {background-color:rgb(244 245 249); shadow} (0,1,0) app.css:12607. */
.pn-page .pricingcontainer .switchContainer {
    background-color: var(--pn-surface-warm);
    box-shadow: none;
}

/* .switchContainer .switchSelector.yearly-button {rgb(208,255,153)} (0,3,0) :12572; .monthly-button {#fff; shadow}
 * (0,3,0) :12577; .cta-blue.button {var(--primary)} (0,2,0) :7882; .cta-grey.button {#808080} (0,2,0) :7906;
 * .cta.button.tiny {shadow} (0,3,0) :7837. (0,4,0) beats all. No opacity/transition: pricing.js fades these. */
.pn-page .pricingcontainer .switchContainer .switchSelector {
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

/* (hover:hover) .yearly-button:hover {rgb(192,244,130)} / .monthly-button:hover {#e3e2e2; border} (0,4,0)
 * :12593/12598; .cta.button.tiny:hover shadow (0,4,0) :7842. */
.pn-page .pricingcontainer .switchContainer .switchSelector:hover {
    border: 0;
    background-color: var(--pn-surface-pill);
    box-shadow: none;
}

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

/* .switchContainer .switchSelector .switchButtonSelected {#6056fc} (0,3,0) :12557; NotSelected rgb(93,100,123). */
.pn-page .pricingcontainer .switchContainer .switchButtonSelected {
    color: #ffffff;
}

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

/* "Save X%" chip in the yearly half: .custom-saving {rgb(208,255,153); color:rgb(19 118 19)} (0,1,0) :15722.
 * White chip, ink text: readable on the ink pill (yearly active) and on the warm track (monthly active). */
.pn-page .pricingcontainer .switchContainer .custom-saving {
    padding: 3px 8px;
    border-radius: 12px;
    background-color: var(--pn-surface);
    color: var(--pn-ink);
}

/* At 390 the chip wraps to 3-4 lines beside "Annually" and, in ru-RU/pt-BR (one long word), pushes "Monthly" past
 * the track: stack the label over the chip. .switchButton is flex (row) in app.css. */
@media (max-width: 640px) {
    .pn-page .pricingcontainer .switchContainer .yearly-button .switchButton {
        flex-direction: column;
        gap: 4px;
    }

    .pn-page .pricingcontainer .switchContainer .custom-saving {
        padding: 3px 6px;
        font-size: 12px;
    }
}

/* .pricing-svg {color:#288e2a !} (0,1,0) :15974 (the tag icon in that chip). */
.pn-page .pricingcontainer .pricing-svg {
    color: inherit !important;
}

/* ---------- "Get started free" above the plans (logged-out only) ----------
 * Primary ink button, as the homepage's `#pricing .freeContainer a.main-button` (theme-2026.css:750), which does
 * not match here (outside #pricing, and this anchor is .main-button-free, not .main-button).
 * .freeContainer {height:4.5rem; width:22.5rem} (0,1,0) :12628; .main-button-free {line-height:2.8 !;
 * padding:20px 50px !; height:81px !; width:285px} (0,1,0) :2918; .maxWidthButton {max-width:300px} :15818;
 * .button.radius {radius:100px !} (0,2,0) :1646; .button {var(--primary)} (0,1,0) :1491; a.cta-new-col-white
 * {#fff !} (0,1,1) :14973; .forceText {transform:translateY(0%) !} (0,1,0) :8539; .postfix {height:3.3025rem}
 * :2878; .postfix.button {shadow} (0,2,0) :2966, :focus {border:initial !} (0,3,0) :2988; .button-3d {shadow;
 * 100px !} (0,1,0) :15477. (0,4,1). */
.pn-page .pricingcontainer .freeContainer {
    height: auto;
}

.pn-page .pricingcontainer .freeContainer a.main-button-free {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: 100%;
    height: auto !important;
    min-height: 48px;
    margin: 0;
    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 {line-height:1} (0,1,1) :7802; a.cta.button span {line-height:initial !} (0,2,2) :7808. */
.pn-page .pricingcontainer .freeContainer a.main-button-free > span {
    font-size: inherit;
    line-height: inherit !important;
}

/* .cta-new-col-white:hover {#4d4edb; color:var(--white) !; shadow} (0,2,0) :311; .postfix.button:focus {outline:0;
 * lavender #d5a6ff ring as box-shadow !; border:initial !} (0,3,0) :2988. */
.pn-page .pricingcontainer .freeContainer a.main-button-free:hover,
.pn-page .pricingcontainer .freeContainer a.main-button-free:focus,
.pn-page .pricingcontainer .freeContainer a.main-button-free:active {
    background: #000000 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    text-decoration: none;
    transform: none !important;
}

/* ============ Plan cards (common/pricing/frontend_common_pricing_plans.pug, div#pricing) ============ */
/* theme-2026.css:1391-1592 match as they are (they key on div#pricing, which /pricing has). Two gaps app.css
 * opens that pricing-section.css did not on /: */
/* a.cta.button span {line-height:initial !} (0,2,2) app.css:7808 beats theme-2026.css:1565. */
.pn-page #pricing .price_wrapper.lite a.button > span {
    line-height: inherit !important;
}

/* i.svg-icon-check {fill:#6056fc} (0,1,1) :15589 (no paint on a mask icon; set so the sweep reads ink). */
.pn-page #pricing i.svg-icon-check {
    fill: var(--pn-ink);
}

/* On / app-critical.css has `#pricing .price_wrapper .perks li .svg-icon-check {flex-shrink:0}`; app.css does not,
 * so a perk that wraps to two lines squeezes its 18px check to 8-15px here (and its info icon, on both pages). */
.pn-page #pricing .price_wrapper .perks li .svg-icon-check,
.pn-page #pricing .price_wrapper .perks li .cil-info {
    flex-shrink: 0;
}

/* #pricing .price_wrapper .header .price {width:100%} (1,3,0) app.css:10650 plus its 24px left margin push the plan
 * description past the card's right edge (up to 35px at 768 in de-DE). */
.pn-page #pricing .price_wrapper .header .price {
    max-width: calc(100% - 24px);
}

.pn-page #pricing .price_wrapper .header .price .ideal {
    max-width: calc(100% - 24px);
}

/* #pricing .price_wrapper.business .ideal {max-width:100% !} (1,3,0) app.css:16573. */
.pn-page #pricing .price_wrapper.business .header .price .ideal {
    max-width: calc(100% - 24px) !important;
}

/* ============ Focus ring ============ */
/* .postfix.button:focus {outline:0} (0,3,0) app.css:2988 beats theme-2026.css:671 `.pn-page a:focus-visible` (0,2,1),
 * so the free button, every plan-card and table CTA would show no ring. Accent only here (spec). (0,4,1). */
.pn-page a.postfix.button:focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 3px;
}

/* ============ "Need more?" contact box (frontend_pricing_plans.pug:94-104) ============ */
/* .pricing-publish {#f8f9fb; 1px #e5e5e5; radius:16px !; padding:48px; backdrop-filter} (0,1,0) :10135;
 * <=979 {padding:20px; max-width:370px} :11003 (kept). */
.pn-page .row-custom3 .pricing-publish {
    border: 0;
    border-radius: var(--pn-radius-card) !important;
    background-color: var(--pn-surface-warm);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* .pricing-publish p strong {700} (0,1,2) :10199. */
.pn-page .row-custom3 .pricing-publish p strong {
    color: var(--pn-ink);
    font-weight: 500;
}

/* Secondary button (ink outline). .contactus {color:rgb(45,76,251)} (0,1,0) :10203; .cta-white-black-border.button
 * {#fff; #000; padding:15px 30px !; shadow} (0,2,0) :8060-8064, <=1140 {font-size:14px !} (0,2,0) :14393;
 * .button.radius {100px !} (0,2,0) :1646. (0,4,1). */
.pn-page .pricing-publish a.contactus.button {
    min-height: 48px;
    padding: 12px 24px !important;
    border: 1px solid var(--pn-ink);
    border-radius: var(--pn-radius-control) !important;
    background-color: transparent;
    box-shadow: none;
    color: var(--pn-ink);
    font-family: var(--pn-font);
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.25;
}

.pn-page .pricing-publish a.contactus.button > span {
    line-height: inherit !important;
}

.pn-page .pricing-publish a.contactus.button:hover,
.pn-page .pricing-publish a.contactus.button:focus {
    background-color: var(--pn-surface);
    box-shadow: none;
    color: var(--pn-ink);
    text-decoration: none;
}

/* ============ Comparison table (common/pricing/frontend_common_plan_table.pug, .mpt-*) ============ */
/* Shown at >=1025px only: <=1024 .pricing-plans-table {display:none} app.css:16452 (kept; no sticky header exists
 * and none is added). A clean list: warm header row, hairline rows, no tinted Business column, ink checks. */
/* .mpt-table {border-radius:12px !} (0,1,0) :16121; table {border:solid 1px #ddd} (0,0,1) :3905 (a square frame
 * around the rounded header row); table tr:nth-of-type(even) {#f9f9f9} (0,1,2) :3953 (zebra rows). */
.pn-page .mpt-table {
    border: 0;
    border-radius: 0 !important;
}

.pn-page .mpt-table tr,
.pn-page .mpt-table tr:nth-of-type(even) {
    background-color: transparent;
}

/* app.css:16267 .mpt-table tr:hover {#FAFAFA} (0,2,1) lost to the rule above; (0,4,1) restores the row hover on
 * every row, zebra rows included. */
.pn-page .mpt-table tr:nth-of-type(n):hover {
    background-color: var(--pn-surface-warm);
}

/* tr:last-of-type .mpt-table__cell:first-child/last-child {12px corners !} (0,3,1) :16271-16285 bend the last
 * row's hairline up at both ends. (The first row holds only th cells, so it has no .mpt-table__cell to match.) */
.pn-page .mpt-table tr:last-of-type .mpt-table__cell:first-child,
.pn-page .mpt-table tr:last-of-type .mpt-table__cell:last-child {
    border-radius: 0 !important;
}

/* .mpt-table__header-cell {#f2f2f2; border-bottom:#F3F4F6; #111827} (0,1,0) :16149, :first-child (0,2,0) :16161,
 * :last-child radius (0,2,0) :16172, :nth-child(3) {rgba(236,236,231,.95)} (0,2,0) :16176. (0,3,0)+. */
.pn-page .mpt-table .mpt-table__header-cell {
    border-bottom: 1px solid var(--pn-line);
    border-radius: 0;
    background-color: var(--pn-surface-warm);
    color: var(--pn-ink);
}

.pn-page .mpt-table .mpt-table__header-cell:first-child {
    border-radius: var(--pn-radius-media) 0 0 0;
}

.pn-page .mpt-table .mpt-table__header-cell:last-child {
    border-radius: 0 var(--pn-radius-media) 0 0;
}

/* "Features overview": .feature-overview {42px; line-height:40px; 400} (0,1,0) :15830. */
.pn-page .mpt-table .feature-overview {
    color: var(--pn-ink);
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

/* .mpt-table__cell {border-bottom:1px solid #F3F4F6; #111827} (0,1,0) :16194, :first-child (0,2,0) :16184,
 * :nth-child(3) {rgba(236,236,231,.95)} (0,2,0) :16180. */
.pn-page .mpt-table .mpt-table__cell {
    border-bottom: 1px solid var(--pn-line);
    background-color: transparent;
    color: var(--pn-ink);
}

/* .mpt-table__feature-cell:first-child {#252525} (0,2,0) :16217; description {#6B7280 !} (0,1,0) :16226. */
.pn-page .mpt-table .mpt-table__feature-cell {
    color: var(--pn-ink);
}

.pn-page .mpt-table .mpt-table__feature-cell-description {
    color: var(--pn-ink-3) !important;
}

/* Checks: .mpt-table i.svg-icon-check {#181719; fill:#6056fc} (0,2,1) :15592 loses to i.svg-icon-right-green
 * {background-color:#2f9130 !} (0,1,1) :15708, so they render green today. */
.pn-page .mpt-table i.svg-icon-check {
    background-color: var(--pn-ink) !important;
    fill: var(--pn-ink);
}

/* Header CTAs (source=pricing-table): the card buttons' rule (theme-2026.css:1546) keys on #pricing .price_wrapper.lite;
 * these are th.price_wrapper.pro|business|teams, outside #pricing. .button {var(--primary)} (0,1,0) :1491;
 * a.cta-new-col-white {#fff !} (0,1,1); .button.radius {100px !} (0,2,0); .postfix {height:3.3025rem; width:100%}
 * :2878; .postfix.button {shadow; padding-top:.5rem} (0,2,0) :2966-2970; .forceText {transform !} (0,1,0). (0,4,2). */
.pn-page .mpt-table th.mpt-table__header-cell a.button {
    height: auto !important;
    min-height: 48px;
    padding: 12px 16px !important;
    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-size: 15px !important;
    font-weight: 500;
    line-height: 1.25;
    white-space: normal;
    text-shadow: none !important;
    transform: none !important;
}

.pn-page .mpt-table th.mpt-table__header-cell a.button > span {
    font-size: inherit;
    line-height: inherit !important;
}

.pn-page .mpt-table th.mpt-table__header-cell a.button:hover,
.pn-page .mpt-table th.mpt-table__header-cell a.button:focus,
.pn-page .mpt-table th.mpt-table__header-cell a.button:active {
    background: #000000 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    text-decoration: none;
    transform: none !important;
}

/* ============ What 15 accounts cost (common/pricing/frontend_common_fifteen_channels.pug) ============ */
/* No component CSS on /pricing today: Foundation table defaults from app.css (table {#fff; 1px #ddd} (0,0,1) :3906,
 * thead {#f5f5f5} (0,0,2) :3925, tr:nth-of-type(even) {#f9f9f9} (0,1,2) :3954, th/td {.875rem; #222} (0,0,3) :3946).
 * The same partial also renders on /compare (its own seo-blocks.css rules); nothing here reaches it (.pn-page). */
.pn-page .fifteen-channels {
    max-width: 880px;
    margin: 64px auto 0;
    text-align: left;
}

.pn-page .fifteen-channels h2 {
    margin: 0 0 12px;
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.pn-page .fifteen-channels p {
    font-size: 17px;
    line-height: 1.55;
}

.pn-page .fifteen-channels .table-scroll {
    margin: 24px 0 16px;
    overflow-x: auto;
}

.pn-page .fifteen-channels table.alt-compare-table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: transparent;
}

.pn-page .fifteen-channels table.alt-compare-table thead {
    background: var(--pn-surface-warm);
}

.pn-page .fifteen-channels table.alt-compare-table tr,
.pn-page .fifteen-channels table.alt-compare-table tr:nth-of-type(even) {
    background: transparent;
}

.pn-page .fifteen-channels table.alt-compare-table th,
.pn-page .fifteen-channels table.alt-compare-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pn-line);
    color: var(--pn-ink);
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
}

.pn-page .fifteen-channels table.alt-compare-table thead th {
    font-weight: 500;
}

.pn-page .fifteen-channels table.alt-compare-table tbody th {
    font-weight: 500;
}

.pn-page .fifteen-channels table.alt-compare-table strong {
    font-weight: 600;
}

.pn-page .fifteen-channels p.content-grey {
    color: var(--pn-ink-3);
    font-size: 14px;
}

/* ============ FAQ (common/pricing/frontend_common_pricing_plans_questions.pug) ============ */
/* The homepage list rules (theme-2026.css:1618-1665) match; its width/heading/answer rules key on
 * .row.row-custom4 / h3.heading-description-4 / .content-grey (frontend.pug markup). This partial uses
 * .row.row-custom3, h3.heading-description-3 and .faq-answer-content p. Toggle: theme_v3.js:40-45 (slideToggle). */
/* .row-custom3 {max-width:67.25rem !} (0,1,0) app.css:401, <=480 (0,1,0) ! :11142. */
.pn-page .pricing-plans-questions .row.row-custom3 {
    max-width: 880px !important;
}

/* .faq-question h3 {16px; margin:0} (0,1,1) :16320 and :16405; .heading-description-3 {line-height:22px; letter-spacing:-0.2px;
 * display:flex} (0,1,0) :16363; .pricing-plans-questions h3 {20px} (0,1,1) :335. */
.pn-page .faq-container h3.heading-description-3 {
    margin: 0;
    padding-right: 16px;
    color: var(--pn-ink);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* p {0.9rem; 300; line-height:1.7; margin-bottom:1.25rem} (0,0,1) :5128. */
.pn-page .faq-container .faq-answer-content p {
    margin: 0;
    color: var(--pn-ink-2);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}