/*
 * theme-2026-channels.css: the CHANNELS 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-09-30-pletor-redesign-channels.md).
 * Linked ONLY from the 10 templates in app/server/views/frontend/channels/, on the line after
 * `include ../common/v3/frontend_style_slim`, so it loads right after theme-2026.css (whose .pn-page rules for the
 * hero type, channel grid, sign-up band shell and FAQ list also apply here) and before tippy.css, animate.min.css
 * and exit-intent-modal.css (all three in <body>, none matches this markup).
 * Every selector starts with the .pn-page compound (main#hero.landing-page.pn-page). Uses the --pn-* tokens from
 * theme-2026.css and defines none. No transform/opacity/animation on .animate-text-fade-in or .slide-in-video targets.
 * Every edit: set ?v= in all 10 channel templates to this file's last git-change date (tests/channels-2026.test.js).
 * Same-day re-edit after a deploy: append -2, -3. Merge, never rebase: ?v= follows the committer date.
 */

/* ============ Bands ============ */
/* main > children, identical in all 10 templates: section.hero (white), section#smart-scheduling.bg-grey (WARM),
 * row 2 (white), row 3 .bg-grey (WARM), how it works (white), FAQ .bg-grey (WARM), div.channels-section (white),
 * section.services-deserve (WARM, theme-2026.css). .bg-grey {#f8f9fb} (0,1,0) app-critical.css:12407;
 * #smart-scheduling also carries .section-diagonal {background-color: hsla(240,79%,62%,.05)} (0,1,0) :13662, a lavender
 * wash that wins over .bg-grey by file order, and <=768 {margin-top:16px} :13794. */
.pn-page > section.bg-grey {
    background: var(--pn-surface-warm);
}

.pn-page > section.section-diagonal {
    margin-top: 0;
}

/* ============ Hero (section.overlayall.hero.large.has-image.wave-container) ============ */
/* White band, eyebrow, H1, subline: theme-2026.css:692-735 already match this markup.
 * .hero.large {min-height:510px} (0,2,0) app-critical.css:15445, >=1025 {550px} :8598. The homepage hero has no .large;
 * here the heading + one button sit in a 550px box with the white gap below. seo-blocks.css:54 sets 0 on /compare. */
.pn-page > section.hero.large {
    min-height: 0;
}

/* Chevron masks (i.svg-icon-right, mask-size 100% 100%) sit in inline-flex buttons; when a long label wraps (pt-BR,
 * ru-RU at 390/768) flex-shrink squeezed the circle to 9-14px wide, drawing an oval. Keep its own width. */
.pn-page a.button > i.svg-icon-right {
    flex-shrink: 0;
}

/* theme-2026.css:658 zeroes this wrapper's bottom padding/margin at <=767 because the homepage hero ends in its channel
 * card. These heroes end at the button (+ a <br>) right above the first warm band. Same selector, later file. */
@media (max-width: 767.98px) {
    .pn-page > section.hero .flex-container-wrapper-3 {
        padding-bottom: 40px;
    }
}

/* Primary button. The homepage rule is keyed on a#getstartedmain (theme-2026.css:750); this anchor has no id.
 * Fights (app-critical.css): .main-button {22px !; line-height:52px; 999px !; 4px lavender border !} :13898, <=967
 * {20px !; 999px !} :13333, <=480 {22px !; line-height:32px !} :10268; .button-shine {purple radial !} :13849;
 * a.cta-new-col-white {color:#fff !} :12837; .forceText {transform:translateY(0%) !} :8628; .postfix {display:block;
 * width:100%; height:3.8025rem; line-height:2.7525rem} :2663; .postfix.button {Roboto; shadow} (0,2,0) :16081;
 * .postfix.button.radius {999px} (0,3,0) :16077, <=480 {padding:8px 22px !} :10263; .button {#57bb63; bold} :15867.
 * This selector is (0,4,1); ! only where the base is !. */
.pn-page .hero .link-container-front 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-align: center;
    text-shadow: none !important;
    transform: none !important;
}

/* .cta span {font-size:20px; line-height:24px} (0,1,1) :16094 would keep the label at 20px. */
.pn-page .hero .link-container-front a.main-button > span {
    font-size: inherit;
    line-height: inherit;
}

/* .cta i {margin-left:.625rem} :7817: the flex gap spaces the chevron. */
.pn-page .hero .link-container-front a.main-button > i {
    margin-left: 0;
}

/* (hover) .cta-new-col-white:hover {transform:scale(1.015) !; background-color:#4d4edb} (0,2,0) :7898;
 * .button:hover {#4ca957} (0,2,0) :15874; button:hover, .button:hover {#4ae00c} :1500. */
.pn-page .hero .link-container-front a.main-button:hover,
.pn-page .hero .link-container-front a.main-button:focus {
    background: #000000 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    text-decoration: none;
    transform: none !important;
}

/* ============ Feature rows (#smart-scheduling, row 2, row 3: .row-custom4 > section.solution.medium-5 text + media) ============ */
/* .solution {margin-bottom:3rem} app-critical.css:8970 stacks under the 96px band padding. Media columns are .medium-7
 * (rows 1-2, last) and .medium-6 (row 3, first). Below 641px the columns stack, so in a row WITH media (x only) the
 * first column gets a gap. */
.pn-page > section.services > .row-custom4 > section.solution.medium-5,
.pn-page > section.services > .row-custom4 > section.solution.medium-6,
.pn-page > section.services > .row-custom4 > section.solution.medium-7 {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .pn-page > section.services > .row-custom4:has(img) > section.solution.medium-5:not(:last-child),
    .pn-page > section.services > .row-custom4:has(img) > section.solution.medium-6:not(:last-child) {
        margin-bottom: 32px;
    }
}

/* Eyebrow. .intro-text {font-family:'Caveat' !; color:var(--primary-dark); 24px; 700; border-radius:999px} (0,1,0) :223. */
.pn-page .services .solution .intro-text {
    margin: 0 0 12px;
    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;
}

/* <=640 the row inherits .text-center (.medium-text-left starts at 641), and the h2/p/checks set left themselves, so a
 * two-line eyebrow (pt-BR, ru-RU at 390) sat centred above a left-aligned heading. */
.pn-page .services .solution.medium-5 .intro-text {
    text-align: left;
}

/* .solution h2 {Roboto; 1.4em; 300; -0.075rem} (0,1,1) :11554, <=1025 {1.6rem; 500; left} :11575. Roboto beats the
 * page-wide `.pn-page *` (0,1,0), so the family is set here. */
.pn-page .services .solution.medium-5 h2 {
    margin: 0 0 20px;
    color: var(--pn-ink);
    font-family: var(--pn-font);
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

/* p.content-grey {#474646; 16px; display:flex} :7664; >=641 .services p {margin-bottom:2rem; 500} (0,1,1) :8900. */
.pn-page .services .solution.medium-5 p.content-grey {
    margin-bottom: 20px;
    color: var(--pn-ink-2);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
}

/* The three checklist lines are h3s: .heading-description-4 {display:flex; 18px; 400; #10102e; line-height:22px} :16435. */
.pn-page .services .solution.medium-5 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;
}

/* Check icon is a CSS mask painted by background-color: i.svg-icon-check-2 {background-color:var(--green) !;
 * fill:var(--green)} (0,1,1) :16502; .green-light {color:#0fba13 !} :7861. */
.pn-page .services .solution i.svg-icon-check-2 {
    margin-top: 2px;
    background-color: var(--pn-ink) !important;
    color: var(--pn-ink) !important;
    fill: var(--pn-ink);
}

/* Secondary button (the three rows and "how it works"). .cta-white-black-border.button {#fff; #000; padding:18px 18px
 * 16px 18px !; max-width:390px; shadow} (0,2,0) :8012, <=1025 {padding:15px !} :11582, <=1140 {14px !;
 * margin-bottom:20px} :12118, hover {#fff} (0,3,0) :8023; <=768 .action-button a {20px !; padding:6px 22px !;
 * max-width:300px} (0,1,1) :16229; <=768 .services a {14px !} (0,1,1) :12015; .button {#57bb63; bold} :15867;
 * button, .button {AkkuratStd; 300} :1477; .cta {1.2rem; 500} :7805. The chevron is already ink
 * (theme-2026.css:685 beats .svg-icon-right-purple {#815ef8 !} :13980). */
.pn-page .action-button a.cta-white-black-border.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    min-height: 48px;
    margin-bottom: 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-family: var(--pn-font);
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

/* .cta span {20px; 24px} (0,1,1) :16094. */
.pn-page .action-button a.cta-white-black-border.button > span {
    font-size: inherit;
    line-height: inherit;
}

.pn-page .action-button a.cta-white-black-border.button > i {
    margin-left: 0;
}

/* >=641 .services a:hover {underline} (0,2,1) :8930. The chevron's translateX nudge on hover is kept (not a lift). */
.pn-page .action-button a.cta-white-black-border.button:hover,
.pn-page .action-button a.cta-white-black-border.button:focus {
    background: var(--pn-surface-warm);
    color: var(--pn-ink);
    text-decoration: none;
}

/* On a warm band the hover fill is white (warm on warm is 1:1). */
.pn-page > section.bg-grey .action-button a.cta-white-black-border.button:hover,
.pn-page > section.bg-grey .action-button a.cta-white-black-border.button:focus {
    background: var(--pn-surface);
}

/* Row media: only frontend_channel_x.pug has images (lines 114, 148, 155). .services img {padding:1rem; shadow;
 * margin:0 0 2em 2em; max-height:32rem} (0,1,1) :8845, <=1025 {margin:inherit} :11596; (hover) .solution img:hover
 * {transform:scale(1.015); background:#f3f3f3 !} (0,2,1) :11370. */
.pn-page .services .solution img {
    margin: 0;
    padding: 0;
    border-radius: var(--pn-radius-media);
    background: transparent;
    box-shadow: none;
}

.pn-page .services .solution img:hover {
    background: transparent !important;
    transform: none;
}

/* .flex-right {padding-top:40px; min-width:365px} :14797 is wider than a 390px phone column (x row 1). Layout only:
 * the wrapper's slide-in animation (.slide-in-video.animate__animated) is untouched. */
.pn-page .services .solution .flex-right {
    min-width: 0;
}

/* ============ Rows without media (9 of 10 templates) ============ */
/* Only frontend_channel_x.pug renders row images. In the other nine, row 1's .flex-right is empty and rows 2-3 hold an
 * <a> with no content, so each row is 5/12 of text beside 7/12 of blank band. Show one centred text column instead and
 * hide the empty column (its content-less link also leaves the tab order; the markup and href are unchanged).
 * A browser without :has() (Firefox < 121) drops these rules and keeps today's layout. */
.pn-page > section.services > .row-custom4:not(:has(img)) > section.solution.medium-6,
.pn-page > section.services > .row-custom4:not(:has(img)) > section.solution.medium-7 {
    display: none;
}

/* .medium-5 {width:41.66667%} (>=641) app-critical.css:868; .columns+.columns:last-child {float:right} :467. */
.pn-page > section.services > .row-custom4:not(:has(img)) > section.solution.medium-5 {
    float: none;
    width: 100%;
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
}

/* ============ How it works (section.services: .solution.medium-12 heading + .row-custom4.item-panel-container) ============ */
/* Section headings here and in the FAQ are an in-page link wrapping the h2 (a.radius.cta.cta-white-black-border, no
 * .button). .cta {1.2rem; 500} :7805; >=641 .services a {color:#000} :8912, .services a:hover {underline} :8930;
 * .solution h2 {Roboto; 1.4em; 300} (0,1,1) :11554, <=1025 {1.6rem; 500; text-align:left} :11575. */
.pn-page .solution.medium-12 a.cta-white-black-border {
    display: inline-block;
    color: var(--pn-ink);
    text-decoration: none;
}

.pn-page .solution.medium-12 a.cta-white-black-border:hover,
.pn-page .solution.medium-12 a.cta-white-black-border:focus {
    color: var(--pn-ink);
    text-decoration: none;
}

.pn-page .solution.medium-12 a.cta-white-black-border 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;
}

/* The heading's box is .row.columns: .columns {float:left} plus .row .row {width:auto} (0,2,0) app-critical.css
 * shrink-wraps it to the heading, so a short heading (and the FAQ intro under it) sat left of the centred content. */
.pn-page .solution.medium-12 > .row.columns {
    float: none;
    width: auto;
}

/* .item-panel-container {display:flex; gap:12px} :16544 (<=768 column :16639). It is also a Foundation .row, whose
 * :before/:after {content:" "; display:table} :413 would become grid items. 4 / 2 / 1 columns. */
.pn-page .row-custom4.item-panel-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding-right: 20px;
    padding-left: 20px;
}

.pn-page .row-custom4.item-panel-container::before,
.pn-page .row-custom4.item-panel-container::after {
    display: none;
}

/* .item-panel {#fafafa; padding:1.5rem; radius 18px; 1px border; overflow:hidden; flex-direction:column (no display:flex)}
 * :16549; .medium-3 {width:25%} (>=641) :862; .column, .columns {padding:0 .9375rem; float:left} :460/:601/:849/:1219. */
.pn-page .item-panel-container > .item-panel.columns {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    float: none;
    width: auto;
    padding: 28px 24px 32px;
    border: 0;
    border-radius: var(--pn-radius-card);
    background: var(--pn-surface-warm);
    box-shadow: none;
}

/* .number-circle {padding:12px 18px; #efefef; 1px solid #ccc; radius 9999px} :16561. */
.pn-page .item-panel .number-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--pn-ink);
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

/* Step titles reach 77 chars in ru-RU (ytintegration) with 18-letter words ("производительность", xintegration);
 * a 4-across card at 1025-1140px has ~180px of text. .heading-description-4 {display:flex; 400} :16435. */
.pn-page .item-panel h3.heading-description-4 {
    display: block;
    margin: 4px 0 0;
    color: var(--pn-ink);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Step text: .content-grey.content-grey-2.animate-text-fade-in (fade-up keyframes :15953). Typography only. */
.pn-page .item-panel .content-grey {
    display: block;
    color: var(--pn-ink-2);
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* The button row under the cards. The section is .medium-text-left {text-align:left !} (>=641) :4780 (inherited). */
.pn-page .item-panel-container + .row-custom4 .action-button {
    margin-top: 40px;
    text-align: center;
}

/* <=768 .action-button a {margin-top:24px} (0,1,1) app-critical.css stacked on the 40px above: 64px on mobile vs 40px
 * on desktop. The wrapper owns the gap here. */
.pn-page .item-panel-container + .row-custom4 .action-button a.cta-white-black-border.button {
    margin-top: 0;
}

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

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

/* ============ FAQ (section.services.bg-grey: heading + .faq-container, q1..q16 incl. the gated `each n` loop) ============ */
/* Hairline list, question type, answer padding and ink chevrons come from theme-2026.css:1618-1665 (keyed on
 * .faq-container, so they reach every item the loop renders). The homepage's width, heading and intro rules
 * (theme-2026.css:1596-1615) are keyed on .pricing-plans-questions, which this section does not carry.
 * .faq-container {max-width:100%} (0,1,0) app-critical.css:16379. */
.pn-page .faq-container {
    max-width: 880px;
    /* <=640 the section's .text-center reaches the answers (.medium-text-left starts at 641): centred answers under
     * left-aligned questions at 390. */
    text-align: left;
}

/* Intro line under the heading: p.content-grey {display:flex} :7664 left-packs the text; a p.content-grey rule sets
 * text-align:left, so a wrapped intro (ru/de at 390) read ragged-left under the centred heading. */
.pn-page .solution.medium-12 p.content-grey {
    justify-content: center;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    color: var(--pn-ink-2);
    font-size: 17px;
}

/* ============ Channel grid (common/v3/channels/frontend_channels.pug) ============ */
/* 7 across, warm tiles, ink explore link: theme-2026.css:955-1070. Only the spacing differs: :955 {padding:24px 20px
 * 96px} and :1063 (<=767) {16px 16px 56px} assume the homepage's channel row sits directly above; here the grid follows
 * the warm FAQ band. Same selector, later file. */
.pn-page > .channels-section {
    padding: 96px 20px;
}

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

/* ============ Sign-up band (section.services.serv-bottom.need-state-nav4.shadow.services-deserve > .container-deserve) ============ */
/* The warm fill, 96/56px padding and no shadow come from theme-2026.css:1236/1325 (!, beating .services-deserve {purple
 * gradient; padding-bottom:8rem !} app-critical.css:15973 and .shadow {box-shadow … !} :9658). The homepage's inner rules
 * are keyed on .container-deserve-centered; this band is .container-deserve {flex row; max-width:1048px; padding:32px
 * 20px} :15998 with a text column and an absolutely placed image. Text, link, ?source=channel and image stay. */
/* .container-deserve-left {Manrope; max-width:512px; gap:10px} (0,1,0) :16014. */
.pn-page .services-deserve .container-deserve-left {
    gap: 16px;
}

/* .services.serv-bottom h3.orange-heading (0,3,1) :11831 {color:rgb(247,110,31) !; 70px; 700; a near-white gradient
 * clipped to the text with -webkit-text-fill-color:transparent}, :16064 {Manrope; 36px; #fff}, <=768 {50px} :11902,
 * <=967 .services.serv-bottom h3 {34px} :13341. On a warm band the clipped gradient text is near-invisible. */
.pn-page .services.serv-bottom h3.orange-heading {
    margin: 0;
    background: none;
    color: var(--pn-ink) !important;
    -webkit-text-fill-color: var(--pn-ink);
    font-family: var(--pn-font);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

/* .span-white {#fff; text-shadow:2px 2px 10px rgb(0 0 0/80%); 1.4rem; margin:20px 0 0 10px} :12070. */
.pn-page .services-deserve .container-deserve-left > span.span-white {
    margin: 0;
    color: var(--pn-ink-2);
    font-size: 19px;
    line-height: 1.55;
    letter-spacing: -0.01em;
    text-shadow: none;
}

/* Primary ink button (a.span-white.postfix.radius.cta.forceText.button). Fights: .container-deserve-left a {color:#fff !;
 * #0c0c0c; 22px; max-width:420px} (0,1,1) :16031, <=768 {max-width:305px !} :16055; .span-white (shadow, margin) :12070;
 * .postfix {display:block; width:100%; height:3.8025rem; line-height:2.7525rem} :2663; .postfix.button {Roboto; shadow}
 * :16081; .postfix.button.radius {999px} (0,3,0) :16077, <=480 {padding:8px 22px !} :10263; .forceText {transform:… !}
 * :8628; .button {#57bb63; bold} :15867; <=768 .services a {14px !} :12015. The ru-RU label is 61 chars
 * (igintegration.finalCTA.button): the fixed .postfix height would clip a second line. */
.pn-page .services-deserve .container-deserve-left a.postfix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    max-width: 100% !important;
    height: auto;
    min-height: 48px;
    margin: 8px 0 0;
    padding: 12px 24px !important;
    border: 0;
    border-radius: var(--pn-radius-control);
    background: var(--pn-ink);
    box-shadow: none;
    color: #ffffff !important;
    font-family: var(--pn-font);
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-shadow: none;
    transform: none !important;
}

/* .cta span {20px; line-height:24px} (0,1,1) :16094; .services-deserve .cta span {padding:18px 0} (0,2,1) :16091. */
.pn-page .services-deserve .container-deserve-left a.postfix > span {
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

/* span.rightarrow {margin-left:10px; margin-bottom:5px; text-shadow} (0,1,1) :10189. */
.pn-page .services-deserve .container-deserve-left a.postfix > span.rightarrow {
    margin: 0;
    text-shadow: none;
}

/* .button:hover {#4ca957} (0,2,0) :15874; button:hover, .button:hover {#4ae00c} :1500. */
.pn-page .services-deserve .container-deserve-left a.postfix:hover,
.pn-page .services-deserve .container-deserve-left a.postfix:focus {
    background: #000000;
    box-shadow: none;
    color: #ffffff !important;
    text-decoration: none;
    transform: none !important;
}

/* .container-deserve-right {position:absolute; top:0; bottom:-94px; right:78px; width:405px; z-index:1} :16039 hangs
 * 94px below the band into the next block; <=768 {display:none !} :16051 stays. Keep it absolute (the lazy image then
 * causes no layout shift) but inside the band and vertically centred. */
.pn-page .services-deserve .container-deserve-right {
    top: 0;
    right: 20px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* .container-deserve img {margin:2em 0 2em 2em !; background-color:#8f46ee !; padding:1rem; shadow; radius 8px !} :15989;
 * .services-deserve img {max-height:20rem !} :15984 (kept); .services img {width:100%; padding; shadow} :8845. */
.pn-page .services-deserve .container-deserve-right img {
    width: auto;
    max-width: 100%;
    margin: 0 !important;
    padding: 0;
    border-radius: var(--pn-radius-media) !important;
    background-color: transparent !important;
    box-shadow: none;
}

/* 769-1024px: a 512px text column and a 405px image overlap (they do today). The lower bound matters: at <=768 the
 * image is display:none (app-critical.css:16051) and a 56% cap squeezed the text to 183px at 390. */
@media (min-width: 769px) and (max-width: 1024px) {
    .pn-page .services-deserve .container-deserve-left {
        max-width: 56%;
    }

    .pn-page .services-deserve .container-deserve-right {
        width: 38%;
    }
}