/* Components the White Glove comp (templates/BNTouch_White_Glove_v11.pdf) needs and the
   Opportunity Mining system does not already have: the hero video panel, the eight-step
   connected timeline, the "1+ extra loan" claim band, the timeline-phase cards, the
   testimonial wall and the always-open FAQ cards.

   Everything else on the page is plain .om-* reuse. Nothing here belongs in design-om.css
   (generated from the live OM page) or design-om-extras.css (shared across pages), so the
   file is page-scoped and every override is written to out-specify the shared rule it beats
   rather than to rely on load order. */

/* ---------------------------------------------------------------------------------------
   Hero peek.
   The hero video panel that stood here is gone (2026-09-21): the comp shipped no video, so it
   was a play button over nothing. The hero now carries .om-hero--peek and the shared artwork
   styling in design-om-extras.css; only the three marks that file has no rule for live here.
   --------------------------------------------------------------------------------------- */
/* A tick, not a filled check box: the row is a job that has been done, and a stroke at this
   opacity stays legible where a 10px glyph would close up. */
.wg-peek__tick {
    fill: none;
    stroke: #f9b233;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Month cells. The lit ones are the brand orange the rest of the artwork accents with; the dark
   ones have to stay visible against the hero, hence a fill AND a hairline. */
.wg-peek__cell {
    fill: rgba(255, 255, 255, .06);
    stroke: rgba(255, 255, 255, .1);
}
.wg-peek__cell--on { fill: #f9b233; stroke: none; }
/* Head and shoulders share one class: the circle takes the fill, the arc takes the stroke, and
   neither wants the other, so both are set and the shape that does not use one ignores it. */
.wg-peek__avatar {
    fill: rgba(255, 255, 255, .28);
    stroke: rgba(255, 255, 255, .28);
    stroke-width: 2;
}
circle.wg-peek__avatar { stroke: none; }
path.wg-peek__avatar   { fill: none; }

/* The comp centres the secondary link on the button beside it. .om-text-link's stock 8px/44px
   margins sit it high; this file only loads on this page, so the reset is page-local. */
.om-hero-actions .om-text-link { margin: 0; }

/* ---------------------------------------------------------------------------------------
   Objection cards - the home page's band, not a row of boxes.

   Yuri, 2026-09-21: "change cards to the same style as on index." The index draws this shape
   as .om .eng in page-home.css: one full-width band of three tinted panels, no borders and no
   shadows, a bare orange line icon, a black title and grey body. Three bordered white boxes
   floating on white said "widget"; the band says "section".

   The rules are copied rather than shared because page-home.css does not load here and its
   selectors are tied to the home page's own .om section. They are kept in the same order as
   the original so the two can be diffed by eye. The geometry is .omgrid's arithmetic exactly:
   each panel keeps the width it had inside the 1064px column, and the outer two carry the
   leftover viewport as padding on their outside edge, so the band reaches both screen edges
   while the copy stays on the column.
   --------------------------------------------------------------------------------------- */
.om-card-grid.wg-phases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}
/* The band breaks out of .om-container, so the section has to stop clipping it -- and clip the
   overflow it creates, or the 100vw width puts a horizontal scrollbar on the page. */
.om-page .wg-platform { overflow-x: clip; }
/* No bottom padding under the band. .om-section's 70px was written for a section that ends in
   text on the page's own background; this one ends in a full-width colour block, so that 70
   was 70px of white below a hard edge, and the next section's 70px of top padding sat under it
   -- 140px between the cards and the next heading, measured. The band IS the section's bottom
   edge now, and the gap is the next section's padding alone. */
.om-page .wg-platform { padding-bottom: 0; }
.om-card-grid.wg-pains {
    --wg-col: calc(min(100vw, 1064px) / 3);
    --wg-bleed: max(0px, (100vw - 1064px) / 2);
    display: grid;
    grid-template-columns:
        calc(var(--wg-col) + var(--wg-bleed)) var(--wg-col) calc(var(--wg-col) + var(--wg-bleed));
    gap: 0;
    width: 100vw;
    max-width: none;
    margin: 30px calc(50% - 50vw) 0;
}
.om-card-grid.wg-pains article {
    width: auto;
    height: auto;
    min-height: 0;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 0;
    padding: 30px 26px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--fill);
}
/* The same warm/blue/slate tints the index cycles, in the same order. */
.om-card-grid.wg-pains article:nth-child(3n+1) { --fill: #fdf2e2; padding-left: calc(var(--wg-bleed) + 26px); }
.om-card-grid.wg-pains article:nth-child(3n+2) { --fill: #eaf1f9; }
.om-card-grid.wg-pains article:nth-child(3n+3) { --fill: #f1f3f5; padding-right: calc(var(--wg-bleed) + 26px); }
/* No tile behind the icon: on the index it is a bare 26px orange stroke. */
.om-card-grid.wg-pains i {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: none;
    font-size: 0;
}
.om-card-grid.wg-pains i svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--orange, #f9b233);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.om-card-grid.wg-pains h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    color: #2e3033;
    font-size: 16px;
    font-weight: 700;
    line-height: 25.6px;
}
.om-card-grid.wg-pains p {
    grid-column: 2;
    grid-row: 2;
    margin: 6px 0 0;
    min-height: 0;
    color: #616b76;
    font-size: 16px;
    line-height: 22px;
}
/* Stacked layouts have no bleed to distribute, and the index stacks at the same two widths. */
@media (max-width: 980px) {
    .om-card-grid.wg-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .om-card-grid.wg-pains article:nth-child(3n+1) { padding-left: 26px; }
    .om-card-grid.wg-pains article:nth-child(3n+3) { padding-right: 26px; }
    .om-card-grid.wg-pains article:nth-child(2n+1) { padding-left: calc(var(--wg-bleed) + 26px); }
    .om-card-grid.wg-pains article:nth-child(2n)   { padding-right: calc(var(--wg-bleed) + 26px); }
}
@media (max-width: 680px) {
    .om-card-grid.wg-pains { grid-template-columns: minmax(0, 1fr); }
    .om-card-grid.wg-pains article { padding-left: 26px; padding-right: 26px; }
}

/* The section's sub-title. The page set it at the OM lead's 20px/28 near-black; every other
   sub-title of this kind on the site -- the index's .sub -- is 16px/26 grey on the same 720px
   measure. Yuri, 2026-09-21: "change sub-title text font to match other similar texts."
   Page-scoped: the product pages still run the 20px lead, and changing those is a separate
   decision. */
.om-page .om-section .om-lead {
    color: #616a75;
    font-size: 16px;
    line-height: 26px;
}

/* ---------------------------------------------------------------------------------------
   The eight-step delivery timeline: an outlined icon per step, joined by a vertical rule.
   --------------------------------------------------------------------------------------- */
.wg-steps {
    list-style: none;
    width: min(1000px, 100%);
    margin: 8px auto 0;
    padding: 0;
}
.wg-steps li {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 30px;
    padding-bottom: 34px;
}
.wg-steps li:last-child { padding-bottom: 0; }
/* The connector is decoration: the steps are an <ol> and read in order without it. */
.wg-steps li::before {
    content: '';
    position: absolute;
    left: 31px;
    top: 64px;
    bottom: 0;
    width: 2px;
    background: #f0cd93;
}
.wg-steps li:last-child::before { display: none; }
.wg-steps i {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--orange, #f9b233);
    border-radius: 50%;
    background: #fff;
}
.wg-steps i svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--orange, #f9b233);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.wg-steps h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 14px 0 8px;
    color: #032d60;
    font-size: 19px;
    line-height: 1.25;
}
.wg-steps p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    color: #5e6874;
    font-size: 16px;
    line-height: 1.55;
}

/* ---------------------------------------------------------------------------------------
   Graphic ground for the scope section.

   This was four soft radial washes, the treatment the Mining page's stages section uses. Yuri,
   2026-09-21: "I would prefer a large image like we have on mortgage crm page for example." So
   it is a drawing now, at the scale that page draws at: ~940px of artwork, held at .1, bled off
   the right edge and clipped by the section.

   A drawing has edges, which is the thing the washes were chosen to avoid, so everything here
   is about keeping those edges away from the copy: it is anchored right, where the section has
   margin (the timeline holds a fixed 64px column on the left), it sits under the content's
   stacking context, and it is dropped entirely below 1100px, where there is no margin left to
   draw in and it would end up behind the text rather than beside it.
   --------------------------------------------------------------------------------------- */
.om-page .om-section--pale#what-we-do {
    position: relative;
    overflow: hidden;
    background: #fff;
}
.om-page #what-we-do > .om-container { position: relative; z-index: 1; }
.wg-scope-art {
    position: absolute;
    top: 50%;
    /* Bled well off the right edge so about half of it shows. At -120px the whole drawing sat
       inside the viewport and its panel edges ran under the step copy at reading strength;
       cutting it off the edge is what the CRM hero does with its own artwork, and it is what
       stops an edge landing mid-sentence. */
    right: -380px;
    width: 1000px;
    height: auto;
    transform: translateY(-50%);
    /* .07, not .1: what is left under the copy has to be a ghost. Measured after the change --
       the step body holds 5.0:1 over the palest panel fill. */
    opacity: .07;
    pointer-events: none;
}
/* Panels and marks. Navy rather than the orange the timeline runs on: the drawing is the
   ground, and two oranges on one section would make it compete with the line that moves. */
.wg-scope-art__panel > rect:first-child { fill: #f1f4f8; stroke: #032d60; stroke-width: 2; }
.wg-scope-art__title { fill: #032d60; opacity: .55; }
.wg-scope-art__bar   { fill: #032d60; opacity: .3; }
.wg-scope-art__tick {
    fill: none;
    stroke: #f9b233;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.wg-scope-art__cell       { fill: #032d60; opacity: .12; }
.wg-scope-art__cell.is-on { fill: #f9b233; opacity: .75; }
.wg-scope-art__col        { fill: #032d60; opacity: .18; }
@media (max-width: 1100px) {
    .wg-scope-art { display: none; }
}

/* A current running the line.

   The page's other drawings move on their own -- the comet on the CRM cycle, the beams on the
   home page -- and this one did not: eight static icons joined by a static rule is a picture of
   a process that has stopped.

   First attempt was a spark sliding down a 2px rule. Yuri, 2026-09-21: "I noticed it, but
   barely. It should stand out more and be more involved." A 56px gradient on a 2px line inside
   a 1000px column is roughly nothing, so this is not the same idea turned up -- it is a
   different one. The line DRAWS: an orange fill grows from each icon down to the next, the icon
   it reaches fills solid and knocks its glyph out in white, and the whole run stays lit until
   the pass finishes, then erases in the same order and goes again. Ten seconds a lap.

   Three animations, one clock: every one of them is 10s with the step's own --i second of
   delay, so the fill, the icon and its glyph move as one thing down the list. The fill is a
   background-size on a pseudo-element rather than a height, so it is one composited property
   and no connector needs to know how tall it is -- they are as tall as the copy beside them. */
.wg-steps li::after {
    content: '';
    position: absolute;
    left: 30px;
    top: 64px;
    bottom: 0;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #f9b233, #ffcf6a);
    background-repeat: no-repeat;
    background-size: 4px 0;
    /* The glow is what makes a 4px rule read across a 1000px column. */
    filter: drop-shadow(0 0 7px rgba(249, 178, 51, .85));
    opacity: 0;
    animation: wg-draw 10s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 1s);
    pointer-events: none;
}
.wg-steps li:last-child::after { display: none; }

/* The icon's lit state. It is a pseudo-element behind the glyph, not the icon itself, because
   the icon already carries the arrival animation and one element cannot run two. */
.wg-steps i { position: relative; }
.wg-steps i::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--orange, #f9b233);
    box-shadow: 0 0 18px rgba(249, 178, 51, .55);
    opacity: 0;
    animation: wg-icon-lit 10s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 1s);
}
.wg-steps i svg {
    position: relative;   /* above the disc the ::before paints */
    animation: wg-icon-ink 10s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 1s);
}

/* One lap: draw for a second, hold while the rest of the line catches up, then erase in the
   same order. The erase cascades for the same reason the draw does -- each step is a second
   behind the one above it -- so the line unwinds from the top rather than blinking out. */
@keyframes wg-draw {
    0%        { background-size: 4px 0;    opacity: 1; }
    9%        { background-size: 4px 100%; opacity: 1; }
    70%       { background-size: 4px 100%; opacity: 1; }
    79%, 100% { background-size: 4px 100%; opacity: 0; }
}
@keyframes wg-icon-lit {
    0%        { opacity: 0; transform: scale(.9); }
    9%, 70%   { opacity: 1; transform: scale(1); }
    79%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes wg-icon-ink {
    0%        { stroke: #f9b233; }
    9%, 70%   { stroke: #fff; }
    79%, 100% { stroke: #f9b233; }
}

/* A light that never stops is exactly what a reader who asked for stillness is asking to be
   spared, so it is not "slower" here, it is off. */
@media (prefers-reduced-motion: reduce) {
    .wg-steps li::after,
    .wg-steps i::before { animation: none; opacity: 0; }
    .wg-steps i svg     { animation: none; }
}

/* The list drawing itself, armed by white-glove.js.

   Read the selectors in this order: the plain rules above are what everyone sees, including
   anyone whose browser never runs the script. `.is-armed` -- which only that script adds, and
   only when the reader has not asked for reduced motion -- is what hides a step, and `.is-in`
   is what brings it back. So the hidden state can never outlive the animation that clears it.

   Three things move per step, in sequence rather than together: the connector grows down from
   the icon above, the icon rings in, and the copy rises. It is the order the eye follows the
   line anyway, so the animation is the reading order with time added to it. 480ms end to end;
   any longer and a reader scrolling at speed outruns it. */
.wg-steps.is-armed li::before {
    transform: scaleY(0);
    transform-origin: 50% 0;
}
.wg-steps.is-armed li i,
.wg-steps.is-armed li h3,
.wg-steps.is-armed li p { opacity: 0; }
/* visibility, not opacity, and not animation-play-state, to keep the spark off a step that has
   not arrived yet. Opacity loses to the keyframes, which set it. Pausing would have stopped the
   delay as well as the animation, so each step would resume on its own clock and the one light
   running the line would come apart into eight unrelated blinks. Visibility touches neither:
   the eight animations stay on the same eight-second cycle whether or not anyone is looking. */
.wg-steps.is-armed li:not(.is-in)::after { visibility: hidden; }
.wg-steps.is-armed li i  { transform: scale(.82); }
.wg-steps.is-armed li h3,
.wg-steps.is-armed li p  { transform: translateY(10px); }

.wg-steps.is-armed li.is-in::before { animation: wg-step-line .34s ease-out forwards; }
.wg-steps.is-armed li.is-in i       { animation: wg-step-pop .26s ease-out forwards; }
.wg-steps.is-armed li.is-in h3      { animation: wg-step-rise .3s ease-out .1s forwards; }
.wg-steps.is-armed li.is-in p       { animation: wg-step-rise .3s ease-out .18s forwards; }

@keyframes wg-step-line { to { transform: scaleY(1); } }
@keyframes wg-step-pop  { to { opacity: 1; transform: scale(1); } }
@keyframes wg-step-rise { to { opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------------------------------------
   The outcome band. .om-stats is the OM equivalent but it is a three-up row of equal figures;
   this is one figure carrying the whole section.
   --------------------------------------------------------------------------------------- */
.wg-claim { padding: 78px 0; text-align: center; }
.wg-claim__figure {
    margin: 0 0 10px;
    color: var(--orange, #f9b233);
    font-size: 64px;
    font-weight: 700;
    line-height: 1.05;
}
.wg-claim__unit {
    margin: 0 0 26px;
    color: #aab8c8;
    /* 19px, up from 15 -- Yuri, 2026-09-21. It is the half of the claim that says when, and at
       15px with .16em of tracking it read as a caption on the figure rather than part of it.
       The tracking stays: it is what keeps a line of caps from looking set in a solid block. */
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.wg-claim__body {
    max-width: 720px;
    margin: 0 auto;
    color: #d5dde7;
    font-size: 16px;
    line-height: 1.6;
}

/* The figure's own motion.

   Three rings used to pulse out from behind this number and crossed the paragraph under it
   while it was being read -- Yuri, 2026-09-21: "the animation is in a way of reading, need
   alternative." So the movement stays inside the figure's own two lines and never touches the
   copy. The first attempt did that and nothing else: a pale band at #ffe3b0 drifting across
   #f9b233 over three seconds, which Yuri could not see at all ("I don't see animation
   alternative"), and he was right -- that is a few percent of lightness moving slower than the
   eye tracks.

   Two things now, on one four-second beat, both loud enough to notice and both parked above
   the text:

     1. A white core sweeps the letters. #fff against #f9b233, not a tint of it, and across in
        under a second rather than three, so it is a glint rather than a drift.
     2. A rule wipes in under the figure, holds, and wipes out, in step with the sweep.

   The rule is a pseudo-element on the figure, so it lives in the gap the figure's own margin
   already holds and nothing below it moves. */
.wg-claim__figure { position: relative; padding-bottom: 14px; }
.wg-claim__figure::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 180px;
    height: 3px;
    margin-left: -90px;
    border-radius: 2px;
    background: linear-gradient(90deg, #f9b233, #ffd98a);
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: wg-claim-rule 7s ease-in-out infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .wg-claim__figure {
        /* A narrow white core on the flat orange, not a wash of it: 220% of the box, so the
           lit band is about a fifth of the width of the words. */
        background: linear-gradient(100deg,
            #f9b233 0%, #f9b233 40%, #fff6e0 47%, #fff 50%, #fff6e0 53%, #f9b233 60%, #f9b233 100%);
        background-size: 220% 100%;
        background-position: 100% 0;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: wg-claim-sheen 7s ease-in-out infinite;
    }
    /* The rule is a background too, and the clip would eat it: it has no text to be clipped to,
       so it would simply never paint. Its own box, its own clip. */
    .wg-claim__figure::after { -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: initial; }
}
/* Under a second of travel in a seven-second bar, so it reads as an event and not a strobe. */
@keyframes wg-claim-sheen {
    0%, 30%   { background-position: 100% 0; }
    43%, 100% { background-position: 0 0; }
}
@keyframes wg-claim-rule {
    0%, 26%   { transform: scaleX(0);   transform-origin: 0 50%; }
    40%, 72%  { transform: scaleX(1);   transform-origin: 0 50%; }
    86%, 100% { transform: scaleX(0);   transform-origin: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .wg-claim__figure { animation: none; background-position: 100% 0; }
    /* The rule stays, drawn and still: it is part of the composition now, not just the motion. */
    .wg-claim__figure::after { animation: none; transform: scaleX(1); }
}

/* The section ends on a button now: it carried the page's strongest claim and then handed the
   reader back to the scroll, with the nearest CTA five screens up in the hero.

   One button, no secondary link -- Yuri, 2026-09-21. The "see what is included" link pointed
   back up the page, which is a second thing to weigh at the moment the section is asking for
   one decision.

   44px of clearance, not the 30px it shipped with: at 30 the button read as part of the
   paragraph's block rather than as the thing the paragraph leads to. */
/* .om-page .om-section p resets every paragraph's margin and scores (0,2,1), so a bare
   .wg-claim__cta lost and the button sat hard against the last line of the paragraph -- 0px
   between them, measured. This scores (0,3,0) and holds. */
.om-page .wg-claim .wg-claim__cta {
    display: flex;
    justify-content: center;
    margin: 48px 0 0;
}

/* ---------------------------------------------------------------------------------------
   Phase cards. UNUSED since 2026-09-21: the section they styled -- "A setup service stops when
   setup ends" -- was removed at Yuri's request. Kept rather than deleted because .wg-phases is
   three badge-over-heading cards and nothing else on the site draws that shape; the markup is
   one git revert away. Delete both together if the section stays gone.
   ---------------------------------------------------------------------------------------
   Phase cards. Same opt-out as .om-card-grid--dark: the badge sits above the heading, so the
   card cannot stay a two-column icon grid.
   --------------------------------------------------------------------------------------- */
.om-card-grid.wg-phases article {
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 28px 26px;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    box-shadow: 0 1px 4px #15304c0d;
}
.wg-phase__badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 16px;
    border-radius: 999px;
    background: #032d60;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.om-card-grid.wg-phases h3 {
    margin: 0 0 10px;
    color: #032d60;
    font-size: 18px;
    line-height: 1.3;
}
.om-card-grid.wg-phases p {
    margin: 0;
    min-height: 0;
    color: #5e6874;
    font-size: 15px;
    line-height: 1.55;
}

/* ---------------------------------------------------------------------------------------
   Testimonial wall. Deliberately not .om-card-grid: that component pins per-card heights with
   :nth-child, and these seven quotes are wildly different lengths.
   --------------------------------------------------------------------------------------- */
.wg-quotes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: start;
}
/* The quotes slide in as the section arrives, one after the other left to right.

   Armed by white-glove.js (.is-armed on the group, .is-in when it lands), never here -- the
   plain rules are the finished state, so nothing can leave a testimonial parked off-screen.

   They come from the right rather than from below: the cards sit three to a row, and a row that
   arrives along its own axis reads as one movement instead of seven cards bouncing. 90ms apart,
   which spreads the seven across just over half a second -- enough to see the order without
   making the last one feel late. */
.wg-quotes.is-armed .wg-quote {
    opacity: 0;
    transform: translateX(28px);
}
.wg-quotes.is-armed.is-in .wg-quote {
    animation: wg-quote-in .52s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(var(--i, 0) * .09s);
}
@keyframes wg-quote-in {
    to { opacity: 1; transform: translateX(0); }
}
/* Stacked, they arrive from below instead: sideways movement in a single column reads as the
   card being dragged rather than the column filling in. */
@media (max-width: 900px) {
    .wg-quotes.is-armed .wg-quote { transform: translateY(20px); }
}

.wg-quote {
    margin: 0;
    padding: 28px 26px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    box-shadow: 0 1px 4px #15304c0d;
}
.wg-quote__stars {
    margin: 0 0 14px;
    color: var(--orange, #f9b233);
    font-size: 16px;
    letter-spacing: 3px;
}
.wg-quote blockquote {
    margin: 0 0 18px;
    color: #3f4a57;
    font-size: 15px;
    line-height: 1.6;
}
.wg-quote figcaption b {
    display: block;
    color: #032d60;
    font-size: 14px;
}
.wg-quote figcaption span {
    display: block;
    margin-top: 4px;
    color: #7a838f;
    font-size: 13px;
}

/* ---------------------------------------------------------------------------------------
   FAQ. The comp draws every answer expanded with no disclosure control, so these are static
   cards rather than .om-faq's <details> accordion (which is also pinned to a 630px section).
   --------------------------------------------------------------------------------------- */
.wg-faq { display: grid; gap: 16px; margin-top: 8px; }
.wg-faq__item {
    padding: 24px 28px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
}
.wg-faq__item h3 {
    margin: 0 0 10px;
    color: #032d60;
    font-size: 17px;
    line-height: 1.3;
}
.wg-faq__item p {
    margin: 0;
    color: #5e6874;
    font-size: 15px;
    line-height: 1.6;
}
.wg-faq__item a {
    color: #d98b0d;
    font-weight: 700;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .wg-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    /* Every collapse below repeats the compound selector used above. A plain descendant
       selector would score lower than the .om-card-grid.wg-pains rules and lose even from
       inside a media query, which leaves the cards three-up on a phone. */
    /* .wg-pains is not in this list any more: it is a full-bleed band with its own stacking
       rules above, and a 16px gap here would cut three white gutters through it. */
    .om-card-grid.wg-phases,
    .wg-quotes { grid-template-columns: minmax(0, 1fr); gap: 16px; }

    /* OM's mobile review strip is a one-at-a-time carousel of <img> logos driven by om.js,
       which does not run here, so its gap:0 runs the five names together. Wrapped instead. */
    .om-page .om-review-sites { flex-wrap: wrap; gap: 6px 16px; }

    /* .wg-pains keeps its band padding (26px sides, 30px top) -- it is a full-width panel on a
       phone, not a card, and 20px sides would misalign it with everything above it. */
    .om-card-grid.wg-phases article { padding: 24px 20px; }

    .wg-steps li {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 18px;
        padding-bottom: 26px;
    }
    .wg-steps li::before { left: 23px; top: 48px; }
    .wg-steps i { width: 48px; height: 48px; }
    .wg-steps i svg { width: 22px; height: 22px; }
    .wg-steps h3 { margin: 10px 0 6px; font-size: 17px; }
    .wg-steps p { font-size: 15px; }

    .wg-claim { padding: 48px 0; }
    .wg-claim__figure { font-size: 40px; }
    /* Two lines of tracked caps at 19px wrap awkwardly in a 390px column; 16 still reads as
       part of the claim rather than a caption, and holds one line. */
    .wg-claim__unit { font-size: 16px; }
    .wg-claim__unit { margin-bottom: 18px; font-size: 13px; }
    .wg-claim__body { font-size: 15px; }

    .wg-quote { padding: 22px 20px; }
    .wg-faq__item { padding: 20px 22px; }
}