/* ==========================================================================================
   /mortgage-ai/ — the four alternating screenshot rows and the blocks around them.
   Loads after design-om.css and design-om-extras.css, so plain class selectors here win on
   source order where specificity ties.
   ========================================================================================== */

/* ---- The alternating rows -----------------------------------------------------------------
   Text column and screenshot side by side, screenshot first on flipped rows. The text column is
   capped so long leads do not run to a hard-to-scan measure on wide screens. */
.om-ai-row__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.om-ai-row--flip .om-ai-row__inner { grid-template-areas: 'shot text'; }
.om-ai-row--flip .om-ai-row__text { grid-area: text; }
.om-ai-row--flip .om-ai-row__shot { grid-area: shot; }

/* Left on every row, flipped or not. Centred -- which is what `.om-page h2` gives it -- the
   heading floated between the two columns and belonged to neither. Mirroring it to the right on
   flipped rows was tried and dropped: one left edge down the page is what the eye follows, and
   right-ragged text costs readability for a symmetry nobody asked the page for.
   `.om-page h2` is (0,1,1) and sets text-align:center, so this needs two classes to land. */
.om-ai-row h2 {
    margin: 0 0 16px;
    max-width: 18em;
}
.om-ai-row .om-ai-row__text h2 { text-align: left; }
/* Body size, not the 20px/28px deck these used to carry. A one-line section lead reads as a
   deck at 20px; these are six to eight lines of explanation, and at 20px the row had no type
   hierarchy left -- heading, lead and point text all sat within a few pixels of each other. This
   is the page's own body size, set by .om-page. */
.om-ai-row__lead {
    margin: 0 0 28px;
    max-width: 34em;
    color: var(--ink, #2e3033);
    font-size: 16px;
    line-height: 26px;
}
@media (max-width: 767px) {
    .om-ai-row__lead { line-height: 24px; }
}

/* ---- Icon points --------------------------------------------------------------------------
   The icons already ship as 60px marks on their own pale circle, so they need no background
   here -- only a fixed box so a slow-loading image does not reflow the text beside it. */
.om-ai-points {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    gap: 18px;
}
.om-ai-points li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.om-ai-points img {
    width: 48px;
    height: 48px;
    display: block;
}
.om-ai-points span {
    display: block;
    color: #616b76;
    font-size: 14px;
    line-height: 1.5;
    padding-top: 4px;
}
.om-ai-points strong {
    display: block;
    margin-bottom: 3px;
    color: #032d60;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

/* ---- Screenshots --------------------------------------------------------------------------
   The source images are cropped product shots with a white background and no border, so they
   need a frame to sit on the page. width:100% with height:auto keeps their own aspect ratio;
   the intrinsic width/height attributes are on the <img> so there is no layout shift. */
/* 80% of the column, not 100%. The screenshots are UI captures, not photography: at full column
   width they out-weighed the heading beside them, and none of them is legible at any size, so the
   extra pixels bought nothing.

   Centred in its column, so the 10% that comes off each side is even. Pinning it to the inner
   edge was tried first -- it keeps the image against the text it illustrates -- but on a row
   whose heading is already pushed to the far edge it stacked all the weight on one side. Centred
   reads balanced, which is what a row of two equal columns should. */
.om-ai-row__shot { display: flex; justify-content: center; }
.om-ai-row__shot img {
    display: block;
    width: 80%;
    height: auto;
    border: 1px solid var(--line, #dbe0e6);
    border-radius: 12px;
    box-shadow: 0 18px 40px #15304c14;
    background: #fff;
}

/* ---- The dark payoff band ------------------------------------------------------------------ */
.om-ai-payoff { text-align: center; }
.om-ai-payoff h2 { margin: 0 0 18px; }
.om-ai-payoff p {
    margin: 0 auto 30px;
    max-width: 44em;
    color: #fff;
    font-size: 16px;
    line-height: 1.65;
}
.om-ai-payoff p strong { color: #fff; }

/* ---- CTA footnote links -------------------------------------------------------------------- */
/* One link now, not two. Smaller and pushed down so it reads as a footnote under the button
   rather than as a second call to action competing with it. */
/* (0,2,0): `.om-cta p` in the generated sheet is (0,1,1) and sets `margin: 0 auto 25px` and
   `font-size: 20px`. A plain class here lost to it, so the 22px top margin this rule always
   claimed to have was never applied -- the link sat against the button from the day it shipped. */
.om-page .om-ai-cta-links {
    /* `auto` on the sides, not 0: the generated rule is `margin: 0 auto 25px` on a `width: 695px`
       box, so replacing the shorthand with 0 killed the centring and dropped the link to the
       left edge of the band. */
    margin: 34px auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    justify-content: center;
    font-size: 13px;
}
.om-ai-cta-links a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Narrow screens -----------------------------------------------------------------------
   One column, screenshot under the text on every row -- including the flipped ones, where
   grid-template-areas would otherwise keep the image above the heading it illustrates. */
@media (max-width: 900px) {
    .om-ai-row__shot img { width: 100%; }
    .om-ai-row__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .om-ai-row--flip .om-ai-row__inner { grid-template-areas: 'text' 'shot'; }
    .om-ai-row h2,
    .om-ai-row__lead { max-width: none; }
}

@media (max-width: 600px) {
    .om-ai-points li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
    .om-ai-points img { width: 40px; height: 40px; }
}