/* =====================================================
   OFFER PAGE: "Tworzenie stron internetowych dla firm"
   Markup: deploy/elementor-templates/mgraphics-strony-internetowe.json.
   Every block sits inside .mg-offer, the class of its one Elementor section.
   Colours: red #c5121a (text and buttons on light), #d9161e (accents and
   buttons on graphite), graphite #191b20, ink #262626.
   ===================================================== */

/* Arial shaped like Open Sans, so the swap to the web font barely moves the text. */
@font-face {
    font-family: 'Open Sans Fallback';
    src: local('Arial');
    size-adjust: 105.2%;
    ascent-override: 101.6%;
    descent-override: 27.9%;
    line-gap-override: 0%;
}

/* ---- Elementor wrappers ---- */
/* The blocks act as direct children of .mg-offer, so the section bar can stick along the whole page.
   The editor keeps the wrappers it needs to select a widget. */
.mg-offer .elementor-container,
.mg-offer .elementor-column,
.mg-offer.elementor-section .elementor-column > .elementor-widget-wrap {
    display: block;
}
body:not(.elementor-editor-active) .mg-offer .elementor-widget,
body:not(.elementor-editor-active) .mg-offer .elementor-widget-container,
body:not(.elementor-editor-active) .mg-offer .elementor-shortcode {
    display: contents;
}

/* ---- Page frame ---- */
/* style.css sets html, body { overflow-x: hidden }, which silently disables position: sticky. */
html:has(.mg-offer),
body:has(.mg-offer) {
    overflow-x: clip;
}
/* Anchors and keyboard focus land clear of the sticky section bar. */
html:has(.mg-offer) {
    scroll-padding-top: 84px;
    scroll-padding-bottom: 24px;
}

.mg-offer,
.mg-offer *,
.mg-offer *::before,
.mg-offer *::after {
    box-sizing: border-box;
}
.mg-offer {
    font-family: 'Open Sans', 'Open Sans Fallback', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #262626;
}
.mg-offer h1,
.mg-offer h2,
.mg-offer h3,
.mg-offer h4 {
    margin: 0;
    font-family: inherit;
    text-align: left;
    text-transform: none;
    color: inherit;
}
.mg-offer p {
    margin: 0 0 14px;
}
.mg-offer p:last-child {
    margin-bottom: 0;
}
.mg-offer p a,
.mg-offer-faq a {
    color: #c5121a;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mg-offer p a:hover {
    color: #8f0c12;
}
.mg-offer a:focus-visible,
.mg-offer button:focus-visible,
.mg-offer summary:focus-visible {
    outline: 3px solid #c5121a;
    outline-offset: 3px;
}
.mg-offer-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mg-offer-wrap {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

/* The breadcrumb items have different heights on touch screens. */
.mg-breadcrumb ol {
    align-items: center;
}
.mg-breadcrumb {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Skip link */
.mg-skip {
    position: absolute;
    left: 12px;
    top: -80px;
    z-index: 10000;
    padding: 12px 20px;
    background: #191b20;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.mg-skip:focus {
    top: 12px;
    outline: 3px solid #fff;
    outline-offset: -6px;
}

/* ---- Buttons ---- */
.mg-offer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 26px;
    border: 2px solid #c5121a;
    border-radius: 3px;
    background: #c5121a;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mg-offer-btn:hover,
.mg-offer-btn:focus-visible {
    background: #8f0c12;
    border-color: #8f0c12;
    color: #fff;
}
.mg-offer-btn--small {
    min-height: 44px;
    padding: 8px 18px;
    font-size: 15px;
}
.mg-offer-btn--line {
    background: #fff;
    color: #c5121a;
}
.mg-offer-btn--line:hover,
.mg-offer-btn--line:focus-visible {
    background: #c5121a;
    border-color: #c5121a;
    color: #fff;
}
.mg-offer-btn--onDark {
    background: #d9161e;
    border-color: #d9161e;
}
.mg-offer-btn--ghostLight {
    background: transparent;
    border-color: #fff;
    color: #fff;
}
.mg-offer-btn--ghostLight:hover,
.mg-offer-btn--ghostLight:focus-visible {
    background: #fff;
    border-color: #fff;
    color: #191b20;
}

/* ---- Hero ---- */
.mg-offer-hero {
    padding: 48px 0 0;
    background: #191b20;
    color: #fff;
}
.mg-offer-hero a:focus-visible {
    outline-color: #fff;
}
.mg-offer-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 56px;
    align-items: center;
}
.mg-offer .mg-offer-kicker {
    margin: 0 0 16px;
    color: #d6d8dc;
    font-size: 15px;
    font-weight: 400;
}
.mg-offer-hero h1 {
    font-size: 54px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1.4px;
    text-wrap: balance;
}
.mg-offer-hero h1::after {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    margin-top: 24px;
    background: #d9161e;
}
.mg-offer .mg-offer-hero__lede {
    margin: 24px 0 28px;
    color: #eceded;
    font-size: 18px;
    line-height: 1.6;
}
.mg-offer-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.mg-offer .mg-offer-hero__note {
    margin: 16px 0 0;
    color: #d6d8dc;
    font-size: 15px;
}

/* Packages at a glance */
.mg-offer-glance {
    padding: 24px;
    border-top: 4px solid #d9161e;
    background: #fff;
    color: #262626;
}
.mg-offer .mg-offer-glance__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
.mg-offer-glance ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mg-offer-glance li {
    border-bottom: 1px solid #e3e3e0;
}
.mg-offer-glance li a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 16px;
    align-items: baseline;
    padding: 12px 8px;
    margin: 0 -8px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.mg-offer-glance li a:hover {
    background: #f5f5f3;
}
.mg-offer-hero .mg-offer-glance a:focus-visible {
    outline-color: #c5121a;
    outline-offset: -3px;
}
.mg-offer-glance__name {
    font-size: 17px;
    font-weight: 700;
}
.mg-offer-glance__price {
    grid-column: 2;
    grid-row: 1;
    color: #c5121a;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}
.mg-offer-glance__price small {
    color: #555;
    font-size: 14px;
    font-weight: 400;
}
.mg-offer-glance__desc {
    grid-column: 1 / -1;
    color: #555;
    font-size: 15px;
    line-height: 1.45;
}
.mg-offer .mg-offer-glance__foot {
    margin: 14px 0 0;
    color: #555;
    font-size: 15px;
}

/* Proof strip */
.mg-offer-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 40px 0 0;
    padding: 24px 0 28px;
    border-top: 1px solid #4a4d55;
    list-style: none;
}
.mg-offer-proof strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
.mg-offer-proof span {
    display: block;
    color: #d6d8dc;
    font-size: 15px;
    line-height: 1.45;
}
.mg-offer-proof a {
    display: inline-block;
    padding: 2px 0;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.mg-offer-proof a:hover {
    color: #ff8086;
}

/* ---- Section bar: sticky from tablets up, with the main action always in reach ---- */
.mg-offer-jump {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid #e3e3e0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(25, 27, 32, 0.08);
}
.mg-offer-jump__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.mg-offer-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mg-offer-jump li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #262626;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
}
.mg-offer-jump li a:hover {
    color: #c5121a;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.mg-offer-jump__cta {
    flex-shrink: 0;
}

/* ---- Sections ---- */
.mg-offer-section {
    padding: 56px 0;
    background: #fff;
}
.mg-offer-section--soft {
    background: #f5f5f3;
}
.mg-offer-section--tight {
    padding: 56px 0;
}
.mg-offer-head {
    max-width: 800px;
    margin-bottom: 32px;
}
.mg-offer-head h2 {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-wrap: balance;
}
.mg-offer-head h2::before {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    margin-bottom: 20px;
    background: #d9161e;
}
.mg-offer .mg-offer-head p {
    margin: 12px 0 0;
    color: #555;
    font-size: 18px;
}

/* ---- Packages ---- */
/* What every package has, read before the cards: the cards then only show the differences. */
.mg-offer-allin {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 20px;
    margin: -8px 0 36px;
    padding: 14px 20px;
    background: #f5f5f3;
    font-size: 15px;
    line-height: 1.45;
}
.mg-offer .mg-offer-allin__title {
    margin: 0;
    font-weight: 700;
}
.mg-offer-allin ul {
    display: contents;
    list-style: none;
}
.mg-offer-allin li {
    position: relative;
    padding-left: 20px;
}
.mg-offer-allin li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #c5121a;
    font-weight: 700;
}
.mg-offer-allin a {
    display: inline-block;
    padding: 2px 0;
    color: #c5121a;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mg-offer-allin a:hover {
    color: #8f0c12;
}
.mg-offer-packages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(11, auto);
    column-gap: 24px;
}
.mg-offer-package {
    display: grid;
    grid-row: span 11;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: 24px;
    border: 1px solid #d9d9d6;
    border-top: 4px solid #d9161e;
    border-radius: 3px;
    background: #fff;
}
.mg-offer-package--mid {
    position: relative;
    border-color: #191b20;
    border-top-color: #d9161e;
    box-shadow: 0 8px 28px rgba(25, 27, 32, 0.12);
}
.mg-offer-package h3 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
}
/* What kind of site the package is, in the words people search for. */
.mg-offer-package__kind {
    display: block;
    margin-top: 2px;
    color: #555;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
}
/* Sits on the card's top edge, out of the grid: the rows of the three cards stay aligned. */
.mg-offer .mg-offer-package__flag {
    position: absolute;
    top: -15px;
    left: 24px;
    max-width: calc(100% - 48px);
    margin: 0;
    padding: 3px 10px;
    border-radius: 3px;
    background: #191b20;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}
.mg-offer .mg-offer-package__lede {
    margin: 0 0 16px;
    color: #4d4d4d;
    line-height: 1.5;
}
.mg-offer .mg-offer-package__price {
    margin: 8px 0 0;
    color: #555;
}
.mg-offer .mg-offer-package__gross {
    margin: 0 0 12px;
    color: #555;
    font-size: 15px;
    line-height: 1.4;
}
.mg-offer-package__price strong {
    color: #262626;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.8px;
}
.mg-offer-package__lede b {
    color: #262626;
}
.mg-offer .mg-offer-package__term {
    align-self: start;
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.45;
}
.mg-offer-package ul {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    margin: 0 0 20px;
    padding: 0;
    border-bottom: 1px solid #e3e3e0;
    list-style: none;
}
.mg-offer-package li {
    position: relative;
    padding: 9px 0 9px 24px;
    border-top: 1px solid #e3e3e0;
    font-size: 15px;
    line-height: 1.45;
}
.mg-offer-package li::before,
.mg-offer-included li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #c5121a;
    font-weight: 700;
}

.mg-offer-package .mg-offer-btn {
    align-self: end;
}
/* With three cards in a row, heading, prices and buttons share one screen when the button
   sits by the price; the scope reads below it. The button is the card's only focusable item,
   so the order cannot confuse the keyboard path. In one column the button stays last. */
@media (min-width: 1025px) {
    .mg-offer-package .mg-offer-btn {
        order: 1;
        align-self: start;
        margin-bottom: 18px;
    }
    .mg-offer-package ul {
        order: 2;
        margin-bottom: 0;
        border-bottom: 0;
    }
    .mg-offer-package li {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}
/* A limit, not a benefit: no tick. */
.mg-offer-package li.is-neutral::before {
    content: "–";
    color: #555;
}

.mg-offer .mg-offer-picknote {
    margin: -20px 0 32px;
    color: #555;
    font-size: 15px;
}

/* What goes with the prices: what is outside the price, payment */
.mg-offer-pricefacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
    margin: 20px 0 0;
    padding: 20px 24px;
    background: #f5f5f3;
    font-size: 15px;
    line-height: 1.5;
    list-style: none;
}
.mg-offer-pricefacts strong {
    display: block;
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: 700;
}
.mg-offer-pricefacts a {
    color: #c5121a;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mg-offer-pricefacts a:hover {
    color: #8f0c12;
}

/* Comparison table */
.mg-offer-compare {
    margin-top: 24px;
    border: 1px solid #d9d9d6;
    border-radius: 3px;
}
.mg-offer-compare summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 12px 52px 12px 24px;
    cursor: pointer;
    list-style: none;
}
.mg-offer-compare summary::-webkit-details-marker {
    display: none;
}
.mg-offer-compare summary::after {
    content: "+";
    position: absolute;
    right: 24px;
    top: 50%;
    color: #c5121a;
    font-size: 26px;
    line-height: 1;
    transform: translateY(-50%);
}
.mg-offer-compare[open] summary::after {
    content: "–";
}
.mg-offer-compare h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    transition: color 0.2s ease;
}
.mg-offer-compare summary:hover h3 {
    color: #c5121a;
}
.mg-offer-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    line-height: 1.4;
}
.mg-offer-table th,
.mg-offer-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #e3e3e0;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: break-word;
}
.mg-offer-table thead th {
    background: #191b20;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}
.mg-offer-table thead td {
    background: #191b20;
}
.mg-offer-table tbody th {
    width: 34%;
    font-weight: 700;
}
.mg-offer-table .is-price {
    color: #c5121a;
    font-size: 18px;
    font-weight: 700;
}
.mg-offer-table .is-yes::before {
    content: "✓ ";
    color: #c5121a;
    font-weight: 700;
}
.mg-offer-table .is-no {
    color: #555;
}
.mg-offer-table .is-actions th,
.mg-offer-table .is-actions td {
    border-bottom: 0;
}
.mg-offer-table .is-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #c5121a;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mg-offer-table .is-actions a:hover {
    color: #8f0c12;
}

/* ---- Included in every site, and what is outside the price ---- */
.mg-offer-scope {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 44px;
    align-items: start;
}
.mg-offer-scope h3 {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
.mg-offer-included {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 32px;
    margin: 0;
    padding: 0;
    color: #4d4d4d;
    font-size: 15px;
    line-height: 1.55;
    list-style: none;
}
.mg-offer-included li {
    position: relative;
    padding-left: 28px;
}
.mg-offer-included li::before {
    top: 0;
    font-size: 18px;
    line-height: 1.3;
}
.mg-offer-included strong {
    display: block;
    margin-bottom: 2px;
    color: #262626;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}
.mg-offer-included a,
.mg-offer-extra li a {
    color: #c5121a;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mg-offer-included a:hover,
.mg-offer-extra li a:hover {
    color: #8f0c12;
}
.mg-offer-extra {
    padding: 24px;
    border-top: 4px solid #191b20;
    background: #f5f5f3;
}
.mg-offer-extra h3 {
    margin-bottom: 8px;
}
.mg-offer-extra ul {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
    list-style: none;
}
.mg-offer-extra li {
    padding: 10px 0;
    border-bottom: 1px solid #dcdcd8;
}
.mg-offer-nowrap {
    white-space: nowrap;
}
.mg-offer .mg-offer-extra__more {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}
.mg-offer .mg-offer-extra__more a {
    display: inline-block;
    padding: 12px 0 0;
}

/* Under the tiles: two more examples in words, and the next step right after the proof */
.mg-offer .mg-band__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    padding-top: 20px;
    padding-bottom: 24px;
}
.mg-offer .mg-band__more {
    margin: 0;
    color: #d6d8dc;
}
.mg-offer .mg-band__foot a:focus-visible {
    outline-color: #fff;
}
.mg-offer .mg-band__foot .mg-offer-btn {
    flex-shrink: 0;
}
/* The caption sits on a photo, sometimes a bright one: the shade carries the contrast.
   The hover and focus shades in sections.css are more specific and stay as they are. */
.mg-tiles .mg-tile::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 58%, rgba(0, 0, 0, 0.88) 100%);
}
/* All four projects below 1200 px too (sections.css shows two): 2 x 2 instead of one row. */
@media (max-width: 1199px) {
    .mg-offer .mg-tiles--band > .mg-tiles__item:nth-child(n+3) {
        display: block;
    }
}

/* ---- Why MGraphics ---- */
.mg-offer-why {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
    gap: 56px;
    align-items: start;
}
.mg-offer-why .mg-offer-head {
    margin-bottom: 0;
}
.mg-offer-why .mg-offer-head h2 {
    font-size: 34px;
    letter-spacing: -0.8px;
}
.mg-offer .mg-offer-why .mg-offer-head p {
    font-size: 17px;
}
.mg-offer-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mg-offer-facts li {
    padding-top: 14px;
    border-top: 2px solid #191b20;
}
.mg-offer-facts h3 {
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}
.mg-offer .mg-offer-facts p {
    margin: 0;
    color: #4d4d4d;
    line-height: 1.55;
}

/* ---- Process ---- */
.mg-offer-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mg-step;
}
.mg-offer-steps li {
    counter-increment: mg-step;
}
.mg-offer-steps li::before {
    content: counter(mg-step);
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #c5121a;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
}
.mg-offer-steps h3 {
    margin-bottom: 6px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}
.mg-offer .mg-offer-steps p {
    margin: 0;
    color: #4d4d4d;
}
.mg-offer-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 40px;
    padding: 24px 28px;
    border-left: 4px solid #d9161e;
    background: #f5f5f3;
}
.mg-offer-section--soft .mg-offer-callout {
    background: #fff;
}
.mg-offer .mg-offer-callout p {
    margin: 0;
    font-size: 17px;
}
.mg-offer-callout .mg-offer-btn {
    flex-shrink: 0;
}
.mg-offer-callout--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 32px;
}

/* ---- Costs and add-ons ---- */
.mg-offer-costs {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 56px;
    align-items: start;
}
.mg-offer-costs .mg-offer-head {
    margin-bottom: 24px;
}
.mg-offer-costs .mg-offer-head h2 {
    font-size: 32px;
    letter-spacing: -0.7px;
}
.mg-offer-terms {
    margin: 0;
}
.mg-offer-terms > div {
    padding: 14px 0;
    border-bottom: 1px solid #e3e3e0;
}
.mg-offer-terms > div:first-child {
    border-top: 1px solid #e3e3e0;
}
.mg-offer-terms > div {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    gap: 2px 16px;
}
.mg-offer-terms dt {
    color: #4d4d4d;
    font-size: 15px;
    line-height: 1.6;
}
.mg-offer-terms dd {
    margin: 0;
    color: #4d4d4d;
    font-size: 15px;
    line-height: 1.55;
}
.mg-offer-terms dd strong {
    display: block;
    color: #262626;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}
/* The add-on list: open with no control on a computer, folded behind one on a phone. */
.mg-offer-fold {
    margin-top: 0;
    border: 0;
}
.mg-offer-fold summary {
    display: none;
    font-weight: 700;
}
.mg-offer-addons {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.45;
}
.mg-offer-addons th,
.mg-offer-addons td {
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid #e3e3e0;
    text-align: left;
    vertical-align: top;
}
.mg-offer-addons thead th {
    border-top: 1px solid #e3e3e0;
    font-weight: 700;
}
.mg-offer-addons tbody tr > th[scope="rowgroup"] {
    padding: 16px 0 8px;
    border-bottom: 2px solid #191b20;
    color: #262626;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
}
.mg-offer-addons tr > :last-child {
    padding-right: 0;
    font-weight: 700;
    text-align: right;
}
.mg-offer-addons td:last-child {
    min-width: 128px;
}

/* ---- Questions ---- */
.mg-offer-qa {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
.mg-offer-qa__aside {
    position: sticky;
    top: 84px;
}
.mg-offer-qa .mg-offer-head {
    margin-bottom: 20px;
}
.mg-offer-qa .mg-offer-head h2 {
    font-size: 34px;
    letter-spacing: -0.8px;
}
.mg-offer-qa__cta {
    margin-top: 16px;
}
/* A way into each group of questions. */
.mg-offer-qa__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    margin: 0 0 12px;
    padding: 8px 0;
    border-top: 1px solid #e3e3e0;
    border-bottom: 1px solid #e3e3e0;
    list-style: none;
}
.mg-offer-qa__nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: #262626;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-color: #c5121a;
    text-underline-offset: 3px;
}
.mg-offer-qa__nav a:hover {
    color: #c5121a;
}
.mg-offer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.mg-offer p.mg-offer-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #c5121a;
    font-size: 18px;
    font-weight: 700;
}
.mg-offer-faq > h3 {
    margin: 36px 0 10px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.2px;
}
.mg-offer-faq > h3:first-child {
    margin-top: 0;
}
.mg-offer-faq details {
    border-bottom: 1px solid #d9d9d6;
}
.mg-offer-faq h3 + details {
    border-top: 1px solid #d9d9d6;
}
.mg-offer-faq summary {
    position: relative;
    padding: 12px 36px 12px 0;
    cursor: pointer;
    list-style: none;
}
.mg-offer-faq summary::-webkit-details-marker {
    display: none;
}
.mg-offer-faq summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 7px;
    color: #c5121a;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.3;
}
.mg-offer-faq details[open] summary::after {
    content: "–";
}
.mg-offer-faq summary:hover h4 {
    color: #c5121a;
}
.mg-offer-faq h4 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    transition: color 0.2s ease;
}
.mg-offer .mg-offer-faq details p {
    margin: 0 0 18px;
    max-width: 68ch;
}

/* ---- Quote ---- */
.mg-offer-quote {
    padding: 72px 0;
    background: #191b20;
    color: #fff;
}
.mg-offer-quote__grid {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 24px 48px;
    align-items: start;
}
.mg-offer-quote__intro {
    grid-column: 1;
    grid-row: 1;
}
.mg-offer-quote__contact {
    grid-column: 1;
    grid-row: 3;
}
.mg-offer-quote__next {
    grid-column: 1;
    grid-row: 2;
}
.mg-offer-quote__next h3 {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}
.mg-offer .mg-offer-quote__next p {
    margin: 14px 0 0;
    color: #d6d8dc;
    font-size: 15px;
}
.mg-offer-quote__form {
    grid-column: 2;
    grid-row: 1 / span 3;
    min-width: 0;
}
.mg-offer-head--light {
    margin-bottom: 0;
}
.mg-offer-head--light h2 {
    color: #fff;
    font-size: 34px;
}
.mg-offer .mg-offer-head--light p {
    color: #d6d8dc;
    font-size: 17px;
}
.mg-offer-next {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mg-next;
}
.mg-offer-next li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 36px;
    counter-increment: mg-next;
    line-height: 1.5;
}
.mg-offer-next li::before {
    content: counter(mg-next);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    color: #191b20;
    font-size: 14px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}
.mg-offer .mg-offer-quote__contact p {
    margin: 0;
    color: #d6d8dc;
}
.mg-offer p.mg-offer-contact--light a {
    color: #fff;
}
.mg-offer-quote a:focus-visible {
    outline-color: #fff;
}
.mg-offer-quote__form a:focus-visible {
    outline-color: #c5121a;
}

/* ---- Quote form: this page's look. css/wycena.css stays as it is for the other forms. ---- */
.mg-offer .mg-wyc {
    --brand: #c5121a;
    --brand-hover: #8f0c12;
    --muted: #555;
    --muted-soft: #6b6b6b;
    --border: #d9d9d6;
    --border-strong: #858585;
    max-width: none;
    margin: 0;
    padding: 32px;
    border-radius: 3px;
    background: var(--bg);
    font-size: 15px;
}
.mg-offer .mg-wyc__steps {
    margin-top: 0;
}
.mg-offer .mg-wyc__step {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}
.mg-offer .mg-wyc__step.is-active .mg-wyc__num {
    box-shadow: 0 0 0 4px rgba(197, 18, 26, 0.15);
}
.mg-offer .mg-wyc__panel.is-active {
    animation: none;
}
.mg-offer .mg-wyc__q {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}
.mg-offer .mg-wyc__q:focus-visible {
    outline: none;
    text-decoration: underline;
    text-decoration-color: var(--brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.mg-offer .mg-wyc__qs {
    font-size: 15px;
}
.mg-offer .mg-wyc__tile {
    position: relative;
}
.mg-offer .mg-wyc__tile strong {
    font-size: 15px;
}
.mg-offer .mg-wyc__tile span {
    font-size: 14px;
}
.mg-offer .mg-wyc__tile.is-selected {
    background: rgba(197, 18, 26, 0.06);
}
.mg-offer .mg-wyc__tile.is-selected::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 10px;
    color: var(--brand);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.mg-offer .mg-wyc__tile:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    box-shadow: none;
}
.mg-offer .mg-wyc__features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mg-offer .mg-wyc__feat:has(input:checked) {
    background: rgba(197, 18, 26, 0.05);
}
.mg-offer .mg-wyc__feat input:focus-visible + .mg-wyc__feat-box {
    box-shadow: none;
}
.mg-offer .mg-wyc__feat:has(input:focus-visible) {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}
.mg-offer .mg-wyc__feat-label {
    font-size: 15px;
}
.mg-offer .mg-wyc__feat-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}
.mg-offer .mg-wyc .section-note > span {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.mg-offer .mg-wyc .section-note textarea {
    box-sizing: border-box;
    width: 100%;
    border-color: var(--border-strong);
    font: 400 16px/1.5 'Open Sans', sans-serif;
}
.mg-offer .mg-wyc .section-note textarea::placeholder {
    color: var(--muted-soft);
}
.mg-offer .mg-wyc .section-note textarea:focus {
    border-color: var(--brand);
    outline: 3px solid var(--brand);
    outline-offset: 1px;
    box-shadow: none;
}
.mg-offer .mg-wyc__field > label {
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
}
.mg-offer .mg-wyc__field input {
    min-height: 48px;
    border-color: var(--border-strong);
    font: 400 16px/1.4 'Open Sans', sans-serif;
}
.mg-offer .mg-wyc__field input:focus {
    border-color: var(--brand);
    outline: 3px solid var(--brand);
    outline-offset: 1px;
    box-shadow: none;
}
.mg-offer .mg-wyc__field input[aria-invalid="true"] {
    border-color: #c5121a;
    border-width: 2px;
}
.mg-offer .mg-wyc__field-err {
    color: #c5121a;
    font-size: 14px;
}
.mg-offer .mg-wyc__consent {
    gap: 12px;
    font-size: 15px;
}
.mg-offer .mg-wyc__consent input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
}
.mg-offer .mg-wyc__consent a {
    color: var(--brand);
    text-decoration: underline;
}
.mg-offer .mg-wyc__btn {
    min-height: 48px;
    font: 700 16px/1 'Open Sans', sans-serif;
    letter-spacing: 0;
    text-transform: none;
}
.mg-offer .mg-wyc__btn--prev {
    border-color: var(--border-strong);
    color: var(--text);
}
.mg-offer .mg-wyc__btn:disabled {
    background: #e3e3e0;
    color: #555;
    opacity: 1;
    cursor: not-allowed;
}
.mg-offer .mg-wyc__btn:focus-visible,
.mg-offer .mg-wyc__cta:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
}
.mg-offer .mg-wyc__err {
    color: #c5121a;
}
.mg-offer .mg-wyc__panel--ok h3 {
    font: 700 28px/1.2 'Open Sans', sans-serif;
    text-align: center;
}
@media (max-width: 680px) {
    .mg-offer .mg-wyc__features {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .mg-offer .mg-wyc {
        padding: 24px 18px;
    }
    .mg-offer .mg-wyc__features {
        grid-template-columns: minmax(0, 1fr);
    }
    .mg-offer .mg-wyc__feat {
        min-height: 0;
    }
    .mg-offer .mg-wyc__num,
    .mg-offer .mg-wyc__qs,
    .mg-offer .mg-wyc__tile span,
    .mg-offer .mg-wyc__feat-desc,
    .mg-offer .mg-wyc__field > label,
    .mg-offer .mg-wyc__consent {
        font-size: 14px;
    }
}

/* Package choice at the top of the form */
.mg-offer-pick {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e3e3e0;
}
.mg-offer .mg-offer-pick__label {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}
.mg-offer-pick__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.mg-offer-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 68px;
    padding: 10px 26px 10px 12px;
    border: 2px solid #d9d9d6;
    border-radius: 6px;
    background: #fff;
    color: #262626;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mg-offer-chip strong {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}
.mg-offer-chip span {
    color: #555;
    font-size: 14px;
    line-height: 1.3;
}
.mg-offer-chip:hover {
    border-color: #c5121a;
}
.mg-offer-chip[aria-pressed="true"] {
    border-color: #c5121a;
    background: rgba(197, 18, 26, 0.06);
}
.mg-offer-chip[aria-pressed="true"]::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 8px;
    color: #c5121a;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
.mg-offer-picked[hidden] {
    display: none;
}
.mg-offer-picked__change {
    display: none;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #c5121a;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
/* Sent: the choice above the thank-you message has done its job. */
.mg-wyc:has(.mg-wyc__panel--ok.is-active) .mg-offer-pick,
.mg-wyc:has(.mg-wyc__panel--ok.is-active) .mg-offer-picked {
    display: none;
}
.mg-offer .mg-offer-picked {
    margin: 12px 0 0;
    padding: 12px 16px;
    border-left: 4px solid #d9161e;
    background: #f5f5f3;
    color: #262626;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}
.mg-offer .mg-offer-picked + .mg-wyc__steps {
    margin-top: 24px;
}
.mg-offer .mg-wyc__steps {
    margin-bottom: 24px;
}

/* Package chosen: the indicator shows the two steps that are left (js/offer.js). */
.mg-offer .mg-wyc--short .mg-wyc__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mg-offer .mg-wyc--short .mg-wyc__steps::before {
    left: 25%;
    right: 25%;
}
.mg-offer .mg-wyc--short .mg-wyc__step[data-step="2"],
.mg-offer .mg-wyc--short .mg-wyc__step[data-step="3"] {
    display: none;
}

/* Answers move on by themselves, so a greyed-out "Dalej" would only look like a dead end. */
.mg-offer .mg-wyc__btn--next:disabled {
    display: none;
}
.mg-offer .mg-wyc__panel[data-panel="1"] .mg-wyc__nav:has(.mg-wyc__btn--next:disabled) {
    display: none;
}

/* Industry step: 12 compact answers instead of two screens of large tiles. */
.mg-offer .mg-wyc__panel[data-panel="2"] .mg-wyc__tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.mg-offer .mg-wyc__panel[data-panel="2"] .mg-wyc__tile {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    min-height: 64px;
    padding: 8px 10px;
    text-align: left;
}
.mg-offer .mg-wyc__panel[data-panel="2"] .mg-wyc__tile-icon {
    flex-shrink: 0;
    height: 24px;
    margin: 0;
}
.mg-offer .mg-wyc__panel[data-panel="2"] .mg-wyc__tile-icon img {
    width: 24px;
    height: 24px;
}
.mg-offer .mg-wyc__panel[data-panel="2"] .mg-wyc__tile strong {
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}
@media (max-width: 980px) {
    .mg-offer .mg-wyc__panel[data-panel="2"] .mg-wyc__tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 680px) {
    .mg-offer .mg-wyc__panel[data-panel="2"] .mg-wyc__tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* On a phone the labels are enough; the icons would squeeze them. */
    .mg-offer .mg-wyc__panel[data-panel="2"] .mg-wyc__tile-icon {
        display: none;
    }
    .mg-offer .mg-wyc__panel[data-panel="2"] .mg-wyc__tile {
        min-height: 52px;
        padding-right: 22px;
    }
}
/* No movement on hover: colour and border only. State changes outside hover are instant. */
.mg-offer .mg-wyc__tile:hover {
    transform: none;
}
.mg-offer .mg-wyc__num,
.mg-offer .mg-wyc__feat-box,
.mg-offer .mg-wyc__feat-box::after {
    transition: none;
}

/* The band's 70 KB background waits until the visitor gets near it (js/offer.js, js/offer-sklepy.js). */
.mg-js #whyWe:not(.is-near) {
    background-image: none;
    background-color: #e9e9e7;
}

.mg-tiles .mg-tile__cat {
    font-size: 14px;
    letter-spacing: 0.4px;
}

/* The wizard's own paragraph margins outrank the generic .mg-offer p above. */
.mg-offer .mg-wyc__q {
    margin: 0 0 16px;
}
.mg-offer .mg-wyc__qs {
    margin: -8px auto 20px;
}
.mg-offer .mg-wyc__err,
.mg-offer .mg-wyc__panel--ok p {
    margin: 0 auto 16px;
}
.mg-offer .mg-wyc__hint {
    max-width: none;
    margin: 0 0 16px;
}

/* ---- Where we are ---- */
.mg-offer-local {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 56px;
    align-items: end;
}
.mg-offer-local .mg-offer-head {
    margin-bottom: 0;
}
.mg-offer-local .mg-offer-head h2 {
    font-size: 32px;
    letter-spacing: -0.7px;
}
.mg-offer .mg-offer-local > p {
    margin: 0;
    color: #4d4d4d;
    font-size: 17px;
}
/* ---- Closing choice: one click from the last answer to the form ---- */
.mg-offer-final {
    padding: 56px 0;
    background: #191b20;
    color: #fff;
}
.mg-offer-final .mg-offer-head {
    margin-bottom: 28px;
}
.mg-offer-final p a {
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}
.mg-offer-final p a:hover {
    color: #ff8086;
}
.mg-offer-final a:focus-visible {
    outline-color: #fff;
}
.mg-offer-finalpick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mg-offer-finalpick a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: 100%;
    min-height: 76px;
    padding: 12px 18px;
    border: 2px solid #fff;
    border-radius: 3px;
    background: #fff;
    color: #262626;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mg-offer-finalpick a:hover {
    border-color: #d9161e;
    background: #f5f5f3;
}
.mg-offer-finalpick strong {
    font-size: 17px;
    font-weight: 700;
}
.mg-offer-finalpick span {
    color: #c5121a;
    font-size: 15px;
    font-weight: 700;
}
.mg-offer-finalpick li:last-child a {
    background: transparent;
    color: #fff;
}
.mg-offer-finalpick li:last-child a:hover {
    background: #2a2c32;
}
.mg-offer-finalpick li:last-child span {
    color: #d6d8dc;
    font-weight: 400;
}

/* ---- Latest posts: readable small print ---- */
.mg-latest .mg-post-card__cat,
.mg-latest .mg-post-card__meta {
    font-size: 14px;
}
.mg-latest .mg-post-card__cat {
    color: #c5121a;
    letter-spacing: 0.6px;
}

/* ---- Other services ---- */
.mg-offer-services {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mg-offer-services a {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 56px;
    padding: 10px 16px;
    border: 1px solid #d9d9d6;
    border-radius: 3px;
    color: #262626;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.mg-offer-services a:hover {
    border-color: #c5121a;
    color: #c5121a;
}
.mg-offer-section--tight .mg-offer-head {
    margin-bottom: 24px;
}

/* ---- Tablets ---- */
@media (max-width: 1024px) {
    .mg-offer-hero__grid,
    .mg-offer-why,
    .mg-offer-costs,
    .mg-offer-scope,
    .mg-offer-local,
    .mg-offer-qa {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .mg-offer-qa__aside {
        position: static;
    }
    .mg-offer-glance {
        max-width: 620px;
    }
    .mg-offer-packages {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: 20px;
        max-width: 620px;
    }
    .mg-offer-package {
        display: flex;
        flex-direction: column;
        grid-row: auto;
    }
    .mg-offer-package .mg-offer-btn,
    .mg-offer .mg-offer-package__term {
        align-self: stretch;
    }
    .mg-offer-package ul {
        display: block;
    }
    .mg-offer .mg-offer-picknote {
        max-width: 620px;
        text-align: left;
    }
    .mg-offer-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mg-offer-services {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .mg-offer-jump ul {
        gap: 0 18px;
    }
    .mg-offer-quote__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }
    .mg-offer-quote__intro,
    .mg-offer-quote__form,
    .mg-offer-quote__next,
    .mg-offer-quote__contact {
        grid-column: 1;
        grid-row: auto;
    }
}

/* The section bar stays on one row down to phone width. */
@media (max-width: 899px) {
    .mg-offer-jump__inner {
        gap: 12px;
    }
    .mg-offer-jump ul {
        gap: 0 12px;
    }
    .mg-offer-jump li a {
        font-size: 14px;
    }
    .mg-offer-btn--small {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* ---- Phones ---- */
@media (max-width: 767px) {
    /* The fixed bar at the bottom holds both actions, so nothing sticks at the top. */
    html:has(.mg-offer) {
        scroll-padding-top: 16px;
        scroll-padding-bottom: 76px;
    }
    .mg-breadcrumb {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .mg-offer-wrap {
        padding: 0 20px;
    }
    .mg-offer-hero {
        padding-top: 20px;
    }
    .mg-offer .mg-offer-kicker {
        margin-bottom: 8px;
        font-size: 14px;
    }
    .mg-offer-hero h1 {
        max-width: 9em;
        font-size: 36px;
        letter-spacing: -0.9px;
    }
    .mg-offer-hero h1::after {
        margin-top: 12px;
    }
    .mg-offer .mg-offer-hero__lede {
        margin: 12px 0 16px;
        font-size: 16px;
    }
    /* The first screen goes to the prices: all three fit above the fixed bar. */
    .mg-offer-hero__cta,
    .mg-offer .mg-offer-hero__note,
    .mg-offer .mg-offer-glance__title,
    .mg-offer-callout--stack {
        display: none;
    }
    .mg-offer-hero__grid {
        gap: 0;
    }
    .mg-offer-callout .mg-offer-btn,
    .mg-offer-package .mg-offer-btn {
        width: 100%;
    }
    .mg-offer-glance {
        margin: 0 -8px;
        padding: 6px 18px 16px;
    }
    .mg-offer-glance li a {
        padding: 8px;
    }
    /* Name and price on one line, the rest of the card under them. */
    .mg-offer-package {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: none;
        column-gap: 12px;
        align-items: baseline;
        padding: 18px;
    }
    .mg-offer-package > * {
        grid-column: 1 / -1;
    }
    .mg-offer-package > h3 {
        grid-column: 1;
    }
    .mg-offer .mg-offer-package > .mg-offer-package__price {
        grid-column: 2;
    }
    .mg-offer-package ul {
        grid-row: auto;
    }
    .mg-offer .mg-offer-picknote {
        margin: -14px 0 28px;
    }
    .mg-offer-package li {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .mg-offer-package li::before {
        top: 5px;
    }
    .mg-offer-package h3 {
        font-size: 24px;
    }
    .mg-offer .mg-offer-package__flag {
        left: 18px;
        max-width: calc(100% - 36px);
    }
    /* Runs on under the price, which only takes the first line of this row. */
    .mg-offer .mg-offer-package > h3 {
        margin-bottom: 4px;
    }
    .mg-offer .mg-offer-package__gross {
        margin-bottom: 8px;
        font-size: 14px;
    }
    .mg-offer-package__kind {
        font-size: 14px;
        white-space: nowrap;
    }
    .mg-offer-package__price strong {
        font-size: 28px;
        letter-spacing: -0.5px;
    }
    .mg-offer .mg-offer-package__price {
        margin: 0 0 8px;
        font-size: 15px;
        white-space: nowrap;
    }
    .mg-offer .mg-offer-package__lede {
        margin-bottom: 10px;
        font-size: 15px;
    }
    .mg-offer .mg-offer-package__term {
        margin-bottom: 8px;
    }
    .mg-offer-package ul {
        margin-bottom: 14px;
    }
    .mg-offer-pricefacts {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 20px;
        padding: 16px 18px;
    }
    /* Ticks in a single column: every line is the same kind of thing. */
    .mg-offer-allin {
        display: block;
        margin: -12px 0 28px;
        padding: 14px 18px;
    }
    .mg-offer .mg-offer-allin__title {
        margin-bottom: 6px;
    }
    .mg-offer-allin ul {
        display: block;
        margin: 0;
        padding: 0;
    }
    .mg-offer-allin li + li {
        margin-top: 3px;
    }
    /* On the title's line, so the list does not get one row longer. */
    .mg-offer-allin {
        position: relative;
    }
    .mg-offer-allin a {
        position: absolute;
        top: 3px;
        right: 18px;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .mg-offer-compare summary {
        padding-left: 18px;
        padding-right: 44px;
    }
    .mg-offer-compare summary::after {
        right: 16px;
    }
    .mg-offer-extra {
        padding: 18px;
    }
    .mg-offer-extra li a {
        display: inline-block;
        padding: 4px 0;
    }
    .mg-offer-proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
        margin-top: 32px;
    }
    .mg-offer-proof strong {
        font-size: 18px;
    }
    .mg-offer-jump {
        position: static;
        box-shadow: none;
    }
    .mg-offer-jump__inner {
        display: block;
    }
    .mg-offer-jump__cta {
        display: none;
    }
    .mg-offer-jump ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
    }
    .mg-offer-section,
    .mg-offer-quote {
        padding: 40px 0;
    }
    .mg-offer-section--tight {
        padding: 40px 0;
    }
    .mg-offer-faq summary {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .mg-offer-faq summary::after {
        top: 7px;
    }
    .mg-offer-head {
        margin-bottom: 28px;
    }
    .mg-offer-head h2,
    .mg-offer-why .mg-offer-head h2,
    .mg-offer-costs .mg-offer-head h2,
    .mg-offer-qa .mg-offer-head h2,
    .mg-offer-head--light h2,
    .mg-band .mg-band__title,
    .mg-latest .mg-latest__title {
        font-size: 28px;
        letter-spacing: -0.5px;
    }
    .mg-offer-head h2::before {
        width: 40px;
        margin-bottom: 16px;
    }
    .mg-offer .mg-offer-head p {
        font-size: 16px;
    }
    .mg-offer-compare {
        margin-top: 20px;
    }
    /* Four columns stay readable on a phone: the row name takes its own line. */
    .mg-offer-table {
        display: block;
        font-size: 14px;
    }
    .mg-offer-table thead,
    .mg-offer-table tbody {
        display: block;
    }
    .mg-offer-table tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .mg-offer-table thead td {
        display: none;
    }
    .mg-offer-table tbody th {
        grid-column: 1 / -1;
        width: auto;
        padding: 12px 8px 2px;
        border-bottom: 0;
    }
    .mg-offer-table thead th {
        padding: 10px 8px;
        font-size: 15px;
    }
    .mg-offer-table td {
        padding: 2px 8px 12px;
    }
    .mg-offer-table .is-price {
        font-size: 16px;
    }
    .mg-offer-table .is-actions th {
        display: none;
    }
    .mg-offer-table .is-actions td {
        padding-top: 4px;
        padding-bottom: 0;
    }
    .mg-offer-included,
    .mg-offer-steps,
    .mg-offer-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .mg-offer-scope {
        gap: 24px;
    }
    .mg-offer .mg-offer-steps p {
        font-size: 15px;
        line-height: 1.5;
    }
    .mg-offer-steps h3,
    .mg-offer-facts h3 {
        font-size: 17px;
    }
    .mg-offer-why {
        gap: 24px;
    }
    .mg-offer .mg-offer-why .mg-offer-head p,
    .mg-offer .mg-offer-facts p {
        font-size: 15px;
        line-height: 1.5;
    }
    .mg-offer-facts li {
        padding-top: 10px;
        border-top-width: 1px;
    }
    /* Four projects side by side in pairs: the same height as two wide tiles, twice the proof. */
    .mg-offer .mg-tiles--band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mg-offer .mg-tiles .mg-tile {
        aspect-ratio: 1 / 1.15;
    }
    .mg-offer .mg-tiles .mg-tile__arrow {
        display: none;
    }
    .mg-offer .mg-tiles .mg-tile__caption {
        left: 12px;
        right: 10px;
        bottom: 12px;
    }
    .mg-offer .mg-tiles .mg-tile__cat {
        margin-bottom: 2px;
        line-height: 1.3;
        letter-spacing: 0;
        text-transform: none;
    }
    .mg-offer .mg-tiles .mg-tile__title {
        font-size: 17px;
    }
    .mg-offer .mg-band__foot {
        display: block;
        padding-top: 16px;
        padding-bottom: 28px;
    }
    .mg-offer .mg-band__foot .mg-offer-btn {
        width: 100%;
        margin-top: 16px;
    }
    .mg-offer-terms > div {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px 0;
    }
    .mg-offer-fold {
        border: 1px solid #d9d9d6;
    }
    .mg-offer-fold summary {
        display: flex;
        padding-left: 18px;
    }
    .mg-offer-fold[open] summary {
        border-bottom: 1px solid #e3e3e0;
    }
    .mg-offer-fold .mg-offer-addons {
        margin: 0 18px 8px;
        width: calc(100% - 36px);
    }
    .mg-offer-fold .mg-offer-included {
        margin: 14px 18px;
    }
    /* The fixed bar at the bottom already holds both actions next to these answers. */
    .mg-offer-qa__aside .mg-offer-contact,
    .mg-offer-qa__cta {
        display: none;
    }
    .mg-offer-qa__nav {
        margin-bottom: 0;
    }
    .mg-offer-final {
        padding: 40px 0;
    }
    .mg-offer-finalpick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .mg-offer-finalpick a {
        padding: 10px 12px;
    }
    .mg-offer-finalpick strong {
        font-size: 16px;
    }
    .mg-offer .mg-wyc__skip {
        margin: 0;
        text-align: center;
    }
    .mg-offer-addons th,
    .mg-offer-addons td {
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .mg-offer-quote__grid {
        gap: 20px;
    }
    .mg-wyc.mg-wyc {
        padding: 20px 16px;
    }
    .mg-offer-steps li {
        position: relative;
        min-height: 44px;
        padding-left: 58px;
    }
    .mg-offer-steps li::before {
        position: absolute;
        left: 0;
        top: 0;
    }
    .mg-offer-callout {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: 20px;
        padding: 18px;
    }
    .mg-offer .mg-offer-callout p {
        font-size: 15px;
        line-height: 1.5;
    }
    /* On a phone the label runs into its sentence: one line less per item. */
    .mg-offer-included strong {
        display: inline;
        font-size: 15px;
    }
    .mg-offer-included strong::after {
        content: ":";
    }
    .mg-offer-scope h3 {
        margin-bottom: 12px;
    }
    .mg-offer-addons tr > :last-child {
        padding-left: 12px;
        width: 36%;
    }
    .mg-offer-addons td:last-child {
        min-width: 0;
    }
    /* Scale step: four answers on one screen, together with the package choice. */
    .mg-offer .mg-wyc__panel[data-panel="1"] .mg-wyc__tile {
        min-height: 104px;
        padding: 12px 8px;
    }
    .mg-offer .mg-wyc__panel[data-panel="1"] .mg-wyc__tile-icon {
        height: 32px;
        margin-bottom: 2px;
    }
    .mg-offer .mg-wyc__panel[data-panel="1"] .mg-wyc__tile-icon img {
        width: 30px;
        height: 30px;
    }
    .mg-offer .mg-wyc__panel[data-panel="1"] .mg-wyc__tiles {
        margin-bottom: 0;
    }
    .mg-offer-chip {
        min-height: 60px;
        padding: 8px 10px;
    }
    /* On the card's corner: the name and the price need its full width. */
    .mg-offer-chip[aria-pressed="true"]::after {
        top: -9px;
        right: -7px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #c5121a;
        color: #fff;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
    }
    .mg-offer .mg-offer-local > p {
        font-size: 16px;
    }
    .mg-offer-local {
        gap: 16px;
    }
    /* Package chosen: the choice folds into one line with "Zmień pakiet". */
    .mg-wyc--short:not(.is-pick-open) .mg-offer-pick {
        display: none;
    }
    .mg-wyc--short:not(.is-pick-open) .mg-offer-picked {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0 12px;
        margin-top: 0;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .mg-wyc--short:not(.is-pick-open) .mg-offer-picked__change {
        display: inline-block;
    }
    .mg-offer .mg-offer-picked + .mg-wyc__steps {
        margin-top: 16px;
    }
    .mg-offer-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .mg-offer-pick__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* On its own line: a tall inline link would push the sentence's lines apart. */
    .mg-offer-glance__foot a {
        display: block;
        padding: 10px 0 0;
    }
    /* Latest posts as compact rows: all four links stay, without four screens of images. */
    .mg-latest .mg-post-card--image {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
    }
    .mg-latest .mg-post-card--image .mg-post-card__img {
        height: 100%;
        min-height: 112px;
        aspect-ratio: auto;
        contain-intrinsic-size: none;
    }
    .mg-latest .mg-post-card__body {
        padding: 14px 16px;
    }
    .mg-latest .mg-post-card__cat {
        display: none;
    }
    .mg-latest .mg-post-card__title {
        margin-bottom: 8px;
        font-size: 17px;
    }
}

/* Very narrow phones: the price does not fit beside the package name. */
@media (max-width: 359px) {
    .mg-offer-package {
        grid-template-columns: minmax(0, 1fr);
    }
    .mg-offer .mg-offer-package__flag {
        left: 10px;
        max-width: calc(100% - 20px);
        padding: 3px 8px;
        white-space: nowrap;
    }
    .mg-offer .mg-offer-package > .mg-offer-package__price {
        grid-column: 1;
    }
}