/* ============================================================
   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((var(--w-media-h, 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((var(--w-media-h, 34px)) * var(--w-scale, 1));
    line-height: 1;
}

.window-page .win-hero-logo .win-icon-img {
    width: var(--w-media-w, auto);
    height: var(--w-media-h, 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((var(--w-media-h, 64px)) * var(--w-scale, 1));
}

    .window-page .win-hero-logo-banner .win-icon-img {
        width: var(--w-media-w, auto);
        height: var(--w-media-h, 140px);
        max-width: var(--w-media-w, 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((var(--w-media-h, 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);
}

/* The tile grows to hold whatever icon it has been given, and never shrinks
   below the 44px square the design draws - max() of the two, so a tile with
   no size of its own is 44px to the pixel, exactly as before. The glyph is
   sized by type rather than by box, which is why the height is what it
   reads. */

.window-page .win-iconcard-tile {
    width: max(calc(var(--w-media-w, 0px) + 20px), 44px);
    height: max(calc(var(--w-media-h, 0px) + 20px), 44px);
    border-radius: 8px;
    background: var(--w-accent-18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: calc((var(--w-media-h, 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: max(calc(var(--w-media-w, 0px) + 16px), 40px);
    height: max(calc(var(--w-media-h, 0px) + 16px), 40px);
    background: var(--w-accent-10);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: calc((var(--w-media-h, 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. */

/* Every slot below names the size the design has always given it as the
   fallback for --w-media-w / --w-media-h. Those two are written only once
   the icon or the picture has been given a size of its own - see
   WindowMedia - so a slot nobody has touched carries neither, falls back,
   and is drawn exactly as it was. */

.window-page .win-icon-img {
    width: var(--w-media-w, 1em);
    height: var(--w-media-h, 1em);
    object-fit: contain;
    display: block;
    max-width: 100%;
}

.window-page .win-iconcard-tile .win-icon-img,
.window-page .win-check-tile .win-icon-img {
    width: var(--w-media-w, 24px);
    height: var(--w-media-h, 24px);
}

.window-page .win-card-icon .win-icon-img {
    width: var(--w-media-w, 28px);
    height: var(--w-media-h, 28px);
}

.window-page .win-hero-icon .win-icon-img {
    width: var(--w-media-w, auto);
    height: var(--w-media-h, 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: var(--w-media-w, 100%);
    height: var(--w-media-h, auto);
    max-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: var(--w-media-w, 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;
    }

    /* With every block on a row of its own there is nothing left for the
       space between columns to separate, and it has to go: twelve columns
       with 40px between them need 440px of row before a single word is
       drawn, which is more than a phone has. The row would then be wider
       than the band it sits in, and since a band hides what overflows it,
       the right-hand side of every block would simply be cut off. */

    .window-page .win-grid > .win-section-inner {
        column-gap: 0;
    }

    /* These three grids fit in as many cards as will actually go, and each
       card has a width it will not go under. A hand-set number of cards in
       a row overrides that fitting, which is fine on a desktop and runs off
       the side of a tablet - five cards that will not go under 220px need
       1100px of row. Putting the count back to auto-fit hands the decision
       to the grid again; a page that never set one is left exactly as it
       was, since auto-fit is what it was already using.

       .win-stats, .win-steps and .win-cards are not in this list because
       their cards have no minimum width to fit against - those are given a
       flat count instead, just below. */

    .window-page .win-iconband,
    .window-page .win-checks,
    .window-page .win-images {
        --w-cols: auto-fit;
    }

    /* A piece nudged a little to one side was nudged along a desktop row.
       That row is gone from here down - every block has the width to itself
       now - so there is nothing left for the nudge to move along, and the
       same handful of pixels is enough to push the piece clean off the side
       of the page. It goes back where it belongs.

       The nudge is the only thing that writes a transform inline - see
       WindowFieldStyle.Css - which is what this matches on. */

    .window-page [style*="translate"] {
        transform: none !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;
    }

    /* Blocks sit closer together here than on a desktop. Written as the row
       gap alone so it leaves the column gap dropped above, and so a band
       given a spacing of its own still keeps it - the shorthand would have
       thrown --w-gap away. */

    .window-page .win-grid > .win-section-inner {
        row-gap: var(--w-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;
    }

    /* And with nothing sitting side by side, the space between the twelve
       columns has to go the same way it does for the band above - 20px
       across eleven gaps is 220px of a card gone before any words are set,
       which is more than a card on a phone has to give. */

    .window-page .win-stack {
        column-gap: 0;
    }
}

/* 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: var(--w-media-w, 100%);
    height: var(--w-media-h, 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: var(--w-media-h, 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;
}