/* ============================================================
   CMS-AUTHORED GUARANTEE WINDOW PAGES
   ------------------------------------------------------------
   Self-contained: every class a dynamic window page uses is defined
   here, so these pages do not depend on mainStyle.css and cannot be
   broken by a change to it. Only the design tokens are shared, and
   they are re-declared below with fallbacks so this file also works
   on its own.

   Everything is prefixed win- and scoped under .window-page, so it
   can never affect the hand-built pages.

   The accent colour (--w-accent) is per page and set inline by the
   view from the CMS content, which is what makes one window red,
   another green, without a stylesheet change.
   ============================================================ */

.window-page {
    /* Palette — falls back to the site values when mainStyle.css is absent. */
    --w-navy: var(--navy, #1a2e44);
    --w-grey: var(--grey, #969696);
    --w-grey-light: var(--grey-light, #e2e4e8);
    --w-offwhite: var(--offwhite, #f4f6fa);

    --w-accent: #3CB4B4;

    /* Tints derived from the accent, used by the dark bands and icon tiles. */
    --w-accent-05: color-mix(in srgb, var(--w-accent) 5%, transparent);
    --w-accent-10: color-mix(in srgb, var(--w-accent) 10%, transparent);
    --w-accent-18: color-mix(in srgb, var(--w-accent) 18%, transparent);
    --w-accent-30: color-mix(in srgb, var(--w-accent) 30%, transparent);
    --w-accent-soft: color-mix(in srgb, var(--w-accent) 55%, #fff);

    font-family: var(--w-font, 'Space Grotesk', system-ui, sans-serif);
    color: var(--w-navy);
    background: #fff;
    line-height: 1.5;
    /* Clears the fixed site header. */
    padding-top: 68px;
}

.window-page *,
.window-page *::before,
.window-page *::after {
    box-sizing: border-box;
}

.window-page h1,
.window-page h2,
.window-page h3,
.window-page p {
    margin: 0;
}

.window-page ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* ---------- breadcrumb ---------- */

.window-page .win-crumb {
    padding: 16px 28px;
    font-size: calc((12.5px) * var(--w-scale, 1));
    color: rgba(10, 22, 40, 0.45);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--w-offwhite);
}

.window-page .win-crumb a {
    color: rgba(10, 22, 40, 0.45);
    text-decoration: none;
    transition: color .2s;
}

.window-page .win-crumb a:hover {
    color: var(--w-accent);
}

.window-page .win-crumb .win-sep {
    opacity: .55;
}

.window-page .win-crumb .win-current {
    color: var(--w-navy);
    font-weight: 600;
}


/* ---------- section shell ---------- */

.window-page .win-section {
    padding: 72px 0;
    position: relative;
    overflow: hidden;
}

.window-page .win-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

/* A section of authored blocks is a twelve-column grid. A block spans all
   twelve unless the editor's width handle narrowed it, which is how two or
   three blocks end up sharing one row. The row gap is the spacing stacked
   blocks used to get from a margin.

   Scoped to win-grid because the window list page reuses win-section-inner
   for plain flowing content. */

.window-page .win-grid > .win-section-inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--w-gap, 56px) 40px;
    align-items: start;
}

/* Grid items would otherwise refuse to shrink below their content. */

.window-page .win-block {
    min-width: 0;
}

/* A hero or CTA paints its own full-width band, so its section drops
   the usual vertical padding. */

.window-page .win-bleed {
    padding: 0;
}

.window-page .win-bleed > .win-section-inner {
    max-width: none;
    padding: 0;
}


/* ---------- shared block header ---------- */

.window-page .win-label {
    display: block;
    font-size: calc((10px) * var(--w-scale, 1));
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--w-accent);
    margin-bottom: 12px;
}

.window-page .win-title {
    font-family: var(--w-font, 'Archivo Black', system-ui, sans-serif);
    font-size: calc((clamp(28px, 3.5vw, 50px)) * var(--w-scale, 1));
    text-transform: uppercase;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--w-navy);
}

.window-page .win-desc {
    font-size: calc((16px) * var(--w-scale, 1));
    line-height: 1.75;
    color: rgba(10, 22, 40, 0.65);
    max-width: 760px;
    margin-top: 24px;
    text-align: justify;
    text-justify: inter-word;
}

/* A section can be given a dark background in the CMS, which flips the
   type to white. */

.window-page .is-dark .win-title {
    color: #fff;
}

.window-page .is-dark .win-desc {
    color: rgba(255, 255, 255, 0.50);
}


/* ---------- hero ---------- */

.window-page .win-hero {
    padding: 72px 5% 64px;
    position: relative;
    overflow: hidden;
    background: var(--w-navy);
}

.window-page .win-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.window-page .win-hero-brand {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.window-page .win-hero-brand .win-rule {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
}

.window-page .win-hero-icon {
    font-size: calc((26px) * var(--w-scale, 1));
    color: var(--w-accent);
    display: inline-flex;
}

.window-page .win-hero-eyebrow {
    font-size: calc((10.5px) * var(--w-scale, 1));
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--w-accent);
}

.window-page .win-hero-title {
    font-family: var(--w-font, 'Archivo Black', system-ui, sans-serif);
    font-size: calc((clamp(52px, 7vw, 100px)) * var(--w-scale, 1));
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: #fff;
    margin-bottom: 24px;
}

.window-page .win-hero-sub {
    font-size: calc((17px) * var(--w-scale, 1));
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
    max-width: 600px;
}

/* Logo positioned away from the eyebrow row (top / bottom / banner). */

.window-page .win-hero-logo {
    display: flex;
    color: var(--w-accent);
    font-size: calc((34px) * var(--w-scale, 1));
    line-height: 1;
}

.window-page .win-hero-logo .win-icon-img {
    width: auto;
    height: 56px;
    max-width: 260px;
    object-fit: contain;
}

.window-page .win-hero-logo-top {
    margin-bottom: 24px;
}

.window-page .win-hero-logo-bottom {
    margin-top: 28px;
}

/* Banner: logo floats beside the whole text block, two-column style. */

.window-page .win-hero-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}

.window-page .win-hero-split .win-hero-inner {
    flex: 1 1 420px;
}

.window-page .win-hero-logo-banner {
    flex: 0 0 auto;
    font-size: calc((64px) * var(--w-scale, 1));
}

    .window-page .win-hero-logo-banner .win-icon-img {
        height: 140px;
        max-width: 320px;
        filter: brightness(0) invert(1);
    }


/* ---------- stats strip ---------- */

.window-page .win-stats {
    display: grid;
    grid-template-columns: repeat(var(--w-cols, 4), minmax(0, 1fr));
    gap: 2px;
    background: var(--w-grey-light);
    border: 2px solid var(--w-grey-light);
    margin-top: 40px;
}

.window-page .win-stat {
    background: var(--w-offwhite);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.window-page .win-stat-num {
    font-family: var(--w-font, 'Archivo Black', system-ui, sans-serif);
    font-size: calc((clamp(30px, 4vw, 56px)) * var(--w-scale, 1));
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--w-accent);
}

.window-page .win-stat-lbl {
    font-size: calc((12px) * var(--w-scale, 1));
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(10, 22, 40, 0.50);
}


/* ---------- criteria table ---------- */

.window-page .win-table-wrap {
    overflow-x: auto;
    margin-top: 28px;
}

.window-page .win-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: calc((14px) * var(--w-scale, 1));
}

.window-page .win-tbl th {
    font-size: calc((10.5px) * var(--w-scale, 1));
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--w-grey);
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid rgba(10, 22, 40, 0.10);
}

.window-page .win-tbl td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(10, 22, 40, 0.07);
    color: var(--w-navy);
    line-height: 1.5;
}

.window-page .win-tbl tr:last-child td {
    border-bottom: none;
}

.window-page .win-tbl td:first-child {
    font-weight: 600;
    font-size: calc((13.5px) * var(--w-scale, 1));
}


/* ---------- card grid ---------- */

.window-page .win-cards {
    display: grid;
    grid-template-columns: repeat(var(--w-cols, 3), minmax(0, 1fr));
    gap: 2px;
    background: var(--w-grey-light);
    border: 2px solid var(--w-grey-light);
    margin-top: 32px;
}

.window-page .win-card {
    background: var(--w-offwhite);
    padding: 36px 32px;
}

.window-page .win-card.is-highlighted {
    background: #fff;
    box-shadow: inset 3px 0 0 var(--w-accent);
}

.window-page .win-card-icon {
    display: block;
    font-size: calc((22px) * var(--w-scale, 1));
    color: var(--w-accent);
    margin-bottom: 12px;
}

.window-page .win-card-value {
    font-family: var(--w-font, 'Archivo Black', system-ui, sans-serif);
    font-size: calc((26px) * var(--w-scale, 1));
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--w-accent);
    margin-bottom: 12px;
}

.window-page .win-card-title {
    font-family: var(--w-font, 'Archivo Black', system-ui, sans-serif);
    font-size: calc((13px) * var(--w-scale, 1));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--w-navy);
    margin-bottom: 10px;
}

.window-page .win-card-text {
    font-size: calc((13px) * var(--w-scale, 1));
    line-height: 1.65;
    color: rgba(10, 22, 40, 0.60);
}

/* Icon beside the title/text instead of stacked above it. */

.window-page .win-card.win-icon-left,
.window-page .win-card.win-icon-right {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.window-page .win-card.win-icon-right {
    flex-direction: row-reverse;
}

.window-page .win-card.win-icon-left .win-card-icon,
.window-page .win-card.win-icon-right .win-card-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.window-page .win-card-body {
    flex: 1;
    min-width: 0;
}


/* ---------- icon band ---------- */

.window-page .win-iconband {
    display: grid;
    grid-template-columns: repeat(var(--w-cols, auto-fit), minmax(min(220px, 100%), 1fr));
    gap: 24px;
    margin-top: 40px;
}

.window-page .win-iconcard {
    border: 1px solid var(--w-accent-30);
    padding: 32px;
    background: var(--w-accent-05);
}

.window-page .win-iconcard-tile {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--w-accent-18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: calc((22px) * var(--w-scale, 1));
    color: var(--w-accent);
}

.window-page .win-iconcard-title {
    font-weight: 700;
    font-size: calc((14px) * var(--w-scale, 1));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--w-navy);
    margin-bottom: 10px;
}

.window-page .win-iconcard-text {
    font-size: calc((13px) * var(--w-scale, 1));
    color: rgba(10, 22, 40, 0.60);
    line-height: 1.65;
}

.window-page .is-dark .win-iconcard-title {
    color: #fff;
}

.window-page .is-dark .win-iconcard-text {
    color: rgba(255, 255, 255, 0.50);
}

.window-page .is-dark .win-iconcard-tile {
    color: var(--w-accent-soft);
}

/* Icon tile beside the title/text instead of stacked above it. */

.window-page .win-iconcard.win-icon-left,
.window-page .win-iconcard.win-icon-right {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.window-page .win-iconcard.win-icon-right {
    flex-direction: row-reverse;
}

.window-page .win-iconcard.win-icon-left .win-iconcard-tile,
.window-page .win-iconcard.win-icon-right .win-iconcard-tile {
    margin-bottom: 0;
}

.window-page .win-iconcard-body {
    flex: 1;
    min-width: 0;
}


/* ---------- benefits list ---------- */

.window-page .win-checks {
    display: grid;
    grid-template-columns: repeat(var(--w-cols, auto-fit), minmax(min(320px, 100%), 1fr));
    gap: 24px;
    margin-top: 32px;
}

.window-page .win-check-card {
    background: var(--w-offwhite);
    padding: 40px;
}

.window-page .win-check-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.window-page .win-check-tile {
    width: 40px;
    height: 40px;
    background: var(--w-accent-10);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: calc((20px) * var(--w-scale, 1));
    color: var(--w-accent);
}

/* Default puts the tile left of the title; these move it instead. */

.window-page .win-check-head.win-icon-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.window-page .win-check-head.win-icon-right {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.window-page .win-check-title {
    font-family: var(--w-font, 'Archivo Black', system-ui, sans-serif);
    font-size: calc((16px) * var(--w-scale, 1));
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--w-navy);
}

.window-page .win-check-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.window-page .win-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: calc((13px) * var(--w-scale, 1));
    color: #555;
    line-height: 1.6;
}

.window-page .win-check-list li i {
    color: var(--w-accent);
    font-size: calc((16px) * var(--w-scale, 1));
    flex-shrink: 0;
    margin-top: 1px;
}


/* ---------- numbered steps ---------- */

.window-page .win-steps {
    display: grid;
    grid-template-columns: repeat(var(--w-cols, 4), minmax(0, 1fr));
    gap: 2px;
    background: var(--w-grey-light);
    border: 2px solid var(--w-grey-light);
    margin-top: 40px;
}

.window-page .win-step {
    background: var(--w-offwhite);
    padding: 40px 32px;
}

.window-page .win-step-num {
    font-family: var(--w-font, 'Archivo Black', system-ui, sans-serif);
    font-size: calc((52px) * var(--w-scale, 1));
    letter-spacing: -0.04em;
    color: var(--w-accent);
    line-height: 1;
    margin-bottom: 16px;
}

.window-page .win-step-title {
    font-family: var(--w-font, 'Archivo Black', system-ui, sans-serif);
    font-size: calc((14px) * var(--w-scale, 1));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--w-navy);
    margin-bottom: 10px;
}

.window-page .win-step-text {
    font-size: calc((13.5px) * var(--w-scale, 1));
    line-height: 1.65;
    color: rgba(10, 22, 40, 0.60);
    text-align: justify;
    text-justify: inter-word;
}


/* ---------- tag list ---------- */

.window-page .win-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.window-page .win-tag {
    padding: 12px 20px;
    border: 2px solid var(--w-grey-light);
    font-size: calc((13px) * var(--w-scale, 1));
    font-weight: 600;
    color: var(--w-navy);
    text-decoration: none;
    transition: border-color .2s, color .2s;
}

.window-page a.win-tag:hover,
.window-page .win-tag.is-highlighted {
    border-color: var(--w-accent);
    color: var(--w-accent);
}


/* ---------- CTA band ---------- */

.window-page .win-cta {
    padding: 72px 5%;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--w-navy);
}

.window-page .win-cta-title {
    font-family: var(--w-font, 'Archivo Black', system-ui, sans-serif);
    font-size: calc((clamp(36px, 5vw, 72px)) * var(--w-scale, 1));
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: #fff;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.window-page .win-cta-sub {
    font-size: calc((17px) * var(--w-scale, 1));
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 36px;
    position: relative;
    z-index: 2;
}

.window-page .win-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: calc((13px) * var(--w-scale, 1));
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: var(--w-accent);
    color: #fff;
    text-decoration: none;
    padding: 15px 32px;
    position: relative;
    z-index: 2;
    transition: transform .15s, filter .2s;
}

.window-page .win-cta-btn:hover {
    transform: translateY(-1px);
    filter: brightness(0.9);
}


/* ---------- uploaded icons ----------
   An icon slot can hold a Phosphor glyph or an uploaded image; both have to
   sit in the same tile at the same size. */

.window-page .win-icon-img {
    width: 1em;
    height: 1em;
    object-fit: contain;
    display: block;
}

.window-page .win-iconcard-tile .win-icon-img,
.window-page .win-check-tile .win-icon-img {
    width: 24px;
    height: 24px;
}

.window-page .win-card-icon .win-icon-img {
    width: 28px;
    height: 28px;
}

.window-page .win-hero-icon .win-icon-img {
    width: auto;
    height: 44px;
    max-width: 220px;
}


/* ---------- image block ---------- */

.window-page .win-images {
    display: grid;
    grid-template-columns: repeat(var(--w-cols, auto-fit), minmax(min(220px, 100%), 1fr));
    gap: 20px;
    margin-top: 28px;
}

.window-page .win-images figure {
    margin: 0;
}

.window-page .win-images img {
    width: 100%;
    display: block;
    background: var(--w-offwhite);
}

/* Aligned instead of filling the cell - the image shrinks to its own width. */

.window-page .win-images figure.win-icon-left img,
.window-page .win-images figure.win-icon-center img,
.window-page .win-images figure.win-icon-right img {
    width: auto;
    max-width: 70%;
}

.window-page .win-images figure.win-icon-left img {
    margin-right: auto;
}

.window-page .win-images figure.win-icon-center img {
    margin: 0 auto;
}

.window-page .win-images figure.win-icon-right img {
    margin-left: auto;
}

.window-page .win-images figcaption {
    font-size: calc((12px) * var(--w-scale, 1));
    color: rgba(10, 22, 40, 0.55);
    margin-top: 8px;
}


/* ---------- decorative squares on the hero / CTA ---------- */

.window-page .win-deco {
    position: absolute;
    pointer-events: none;
    opacity: 0.10;
}

.window-page .win-deco-right {
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 360px;
    height: 360px;
}

.window-page .win-deco-left {
    left: 40px;
    bottom: 20px;
    width: 240px;
    height: 240px;
}


/* ---------- scroll reveal (driven by main.js) ---------- */

.window-page .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

.window-page .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

    .window-page .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ---------- window index (/skema) ---------- */

.window-index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2px;
    background: var(--w-grey-light, #e2e4e8);
    border: 2px solid var(--w-grey-light, #e2e4e8);
    margin-top: 40px;
}

.window-index a {
    background: var(--w-offwhite, #f4f6fa);
    padding: 40px 32px;
    text-decoration: none;
    display: block;
    transition: background .2s;
}

.window-index a:hover {
    background: #fff;
}

.window-index .window-index-title {
    font-family: var(--w-font, 'Archivo Black', system-ui, sans-serif);
    font-size: calc((18px) * var(--w-scale, 1));
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--w-navy, #1a2e44);
}

.window-index .window-index-slug {
    font-size: calc((12px) * var(--w-scale, 1));
    color: rgba(10, 22, 40, 0.45);
    margin-top: 8px;
}


/* ---------- responsive ---------- */

@media (max-width: 1024px) {

    .window-page .win-stats,
    .window-page .win-steps,
    .window-page .win-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Side-by-side blocks have no room left on a tablet, so every block
       takes the full row again whatever width it was given. */

    .window-page .win-block {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 768px) {

    .window-page .win-hero {
        padding: 52px 5% 44px;
    }

    .window-page .win-hero-title {
        font-size: calc((clamp(44px, 12vw, 72px)) * var(--w-scale, 1));
    }

    .window-page .win-section {
        padding: 48px 0;
    }

    .window-page .win-stat {
        padding: 28px 20px;
    }

    .window-page .win-cta {
        padding: 52px 5%;
    }

    .window-page .win-check-card {
        padding: 28px;
    }

    .window-page .win-iconcard {
        padding: 24px;
    }

    .window-page .win-grid > .win-section-inner {
        gap: 40px;
    }

    .window-page .win-desc,
    .window-page .win-step-text {
        text-align: left;
    }
}

@media (max-width: 480px) {

    .window-page .win-stats,
    .window-page .win-steps,
    .window-page .win-cards {
        grid-template-columns: 1fr;
    }
}

/* A group of text whose pieces have been laid out by hand - see
   WindowFieldStyle. Only appears once the editor has given one of them a
   width or a place of its own; until then the pieces stack as they always
   have, with no grid involved. */

.window-page .win-stack {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px 20px;
    align-items: start;
}

.window-page .win-stack > * {
    min-width: 0;
    margin: 0;
}

@media (max-width: 768px) {

    /* No room to sit side by side on a phone. */

    .window-page .win-stack > * {
        grid-column: 1 / -1 !important;
    }
}

/* A group whose pieces were placed by hand. Each piece sits where it was
   dragged, so the box needs a height of its own - nothing is left in the
   flow to give it one. */

.window-page .win-free {
    display: block;
    position: relative;
}

.window-page .win-free > * {
    position: absolute;
    margin: 0;
}

@media (max-width: 768px) {

    /* A placement made on a desktop has no meaning on a phone, so the
       pieces go back to flowing one under the other. */

    .window-page .win-free {
        display: block;
        height: auto !important;
    }

    .window-page .win-free > * {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin-bottom: 12px;
    }
}

/* ---------- a picture behind a band or a block ---------- */

/* Its own layer, so a picture can be faded without fading the words on top
   of it, and so two backgrounds can sit side by side. */

.window-page .win-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Everything already in the band has to sit above the layers. */

.window-page .win-section > .win-section-inner,
.window-page .win-block > *:not(.win-backdrop) {
    position: relative;
    z-index: 1;
}


/* ---------- what has been added to a block ---------- */

.window-page .win-extra {
    display: block;
    min-width: 0;
}

.window-page .win-extra-image {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* A picture that was given a height of its own fills it rather than
   stretching, which is what "cover" is for. */

.window-page .win-free > .win-extra-image {
    height: 100%;
}

.window-page .win-extra-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    background: var(--w-accent);
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    width: fit-content;
}

.window-page .win-stack > .win-extra-button {
    width: auto;
}

.window-page .win-extra-button:hover {
    filter: brightness(1.08);
}

.window-page .win-extra-text {
    line-height: 1.7;
    white-space: pre-wrap;
}