/* ============================================================
   WISMO page — scoped styles (#wismo-page)
   Tokens follow the iThink home page: Hind / Poppins, #122247 ink,
   #7688A2 muted, #004FE5 primary, #041231 navy, 144px section rhythm.
   ============================================================ */
#wismo-page
{
    --wm-ink: #122247;
    --wm-ink-soft: #3C4C6B;
    --wm-muted: #5B6E85;
    --wm-navy: #041231;
    --wm-navy-2: #0A1D3D;
    --wm-blue: #004FE5;
    --wm-blue-dark: #0333E8;
    --wm-blue-soft: #EDF3FF;
    --wm-orange: #FD7847;
    --wm-green: #1DA851;
    --wm-line: #DADFE6;
    --wm-line-soft: #E9EDF3;
    --wm-bg: #F8F9FB;
    --wm-bg-faint: #FBFCFE;
    /* Audience card tints. Each surface is paired with an accent dark enough
       to clear 4.5:1 on it, so the 11px eyebrow stays legible. */
    --wm-tint-a: #EDF3FF;  --wm-tint-a-ink: #0B3FA8;  --wm-tint-a-line: #D7E3FB;
    --wm-tint-b: #E9F7EF;  --wm-tint-b-ink: #0E6B39;  --wm-tint-b-line: #CFEBDC;
    --wm-tint-c: #FFF1EA;  --wm-tint-c-ink: #B03F17;  --wm-tint-c-line: #FBDCCD;
    --wm-tint-d: #F1EFFD;  --wm-tint-d-ink: #4636C4;  --wm-tint-d-line: #DFDAFA;
    --wm-tint-e: #FFF6E5;  --wm-tint-e-ink: #8A5A08;  --wm-tint-e-line: #F7E6C4;
    --wm-tint-f: #EFF2F7;  --wm-tint-f-ink: #2E4468;  --wm-tint-f-line: #DCE2EC;
    --wm-radius: 4px;
    --wm-ease: cubic-bezier(.22,.61,.36,1);
    overflow-x: hidden;
}
#wismo-page *,
#wismo-page *:before,
#wismo-page *:after
{
    box-sizing: border-box;
}
#wismo-page .wm-container
{
    max-width: 1062px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}
#wismo-page .wm-container-wide
{
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}
#wismo-page .wm-section
{
    padding: 96px 0 84px;
    position: relative;
}
#wismo-page .wm-section-tight
{
    padding: 80px 0 72px;
}
#wismo-page .wm-bg-soft
{
    background: var(--wm-bg);
}
#wismo-page .wm-bg-faint
{
    background: var(--wm-bg-faint);
}

/* ---------- Typography ---------- */
/* Narvar sets its section label as a pill rather than a bare kicker. */
#wismo-page .wm-eyebrow
{
    font-family: "Heebo", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--wm-blue);
    margin: 0 0 20px;
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--wm-blue-soft);
    border: 1px solid rgba(0,79,229,.22);
}
#wismo-page .wm-h1
{
    letter-spacing: normal;
    font-family: "Heebo", sans-serif;
    font-size: 56px;
    line-height: 64px;
    font-weight: 700;
    color: var(--wm-ink);
    margin: 0 0 20px;
    text-wrap: balance;
}
#wismo-page .wm-h2
{
    letter-spacing: normal;
    font-family: "Heebo", sans-serif;
    font-size: 44px;
    line-height: 54px;
    font-weight: 700;
    color: var(--wm-ink);
    margin: 0 0 20px;
    text-wrap: balance;
}
#wismo-page .wm-h3
{
    letter-spacing: normal;
    font-family: "Heebo", sans-serif;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--wm-ink);
    margin: 0 0 10px;
    text-wrap: balance;
}
#wismo-page .wm-lead
{
    font-family: "Hind", sans-serif;
    font-size: 22px;
    line-height: 34px;
    color: var(--wm-muted);
    margin: 0 0 16px;
    font-weight: 400;
    text-wrap: pretty;
}
#wismo-page .wm-body
{
    font-family: "Heebo", sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: var(--wm-muted);
    margin: 0 0 12px;
    text-wrap: pretty;
    font-weight: 400;
}
#wismo-page .wm-center
{
    text-align: center;
}
#wismo-page .wm-measure
{
    max-width: 720px;
}
#wismo-page .wm-center .wm-measure
{
    margin-left: auto;
    margin-right: auto;
}
#wismo-page .wm-section-head
{
    margin-bottom: 52px;
}

/* ---------- Buttons ---------- */
#wismo-page .wm-cta-row
{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 32px;
}
#wismo-page .wm-center .wm-cta-row
{
    justify-content: center;
}
#wismo-page .wm-btn
{
    font-family: "Hind", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2em;
    border: 2px solid var(--wm-orange);
    background: var(--wm-orange);
    color: #fff;
    padding: 0 22px;
    height: 48px;
    line-height: 44px;
    display: inline-block;
    white-space: nowrap;
    transition: background-color .25s var(--wm-ease), border-color .25s var(--wm-ease), color .25s var(--wm-ease);
    cursor: pointer;
}

#wismo-page .wm-btn-ghost
{
    background: transparent;
    border-color: var(--wm-orange);
    color: var(--wm-orange);
}
#wismo-page .wm-btn:focus
{
    outline: none;
}
#wismo-page .wm-btn:focus-visible,
#wismo-page .wm-faq-q:focus-visible
{
    outline: 2px solid var(--wm-blue);
    outline-offset: 3px;
    border-radius: 4px;
}
#wismo-page .wm-faq-q:focus
{
    outline: none;
}
/* The label carries no arrow at rest, so it centres on its own. The
   chevron is taken out of flow and the label shifts left on hover, which
   keeps the pair optically centred without changing the button's width. */
#wismo-page .wm-btn-in
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
#wismo-page .wm-btn-arrow
{
    display: block;
    width: 14px;
    height: 14px;
}
#wismo-page .wm-btn-arrow svg
{
    width: 14px;
    height: 14px;
    display: block;
}


/* ---------- Reveal on scroll ---------- */
#wismo-page .wm-reveal
{
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .7s var(--wm-ease), transform .7s var(--wm-ease);
    transition-delay: var(--wm-delay, 0ms);
    will-change: opacity, transform;
}
#wismo-page .wm-reveal.wm-in
{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
#wismo-page .wm-reveal-left
{
    transform: translate3d(-28px, 0, 0);
}
#wismo-page .wm-reveal-right
{
    transform: translate3d(28px, 0, 0);
}
#wismo-page .wm-reveal-scale
{
    transform: translate3d(0, 20px, 0) scale(.97);
}
#wismo-page .wm-reveal.wm-in.wm-reveal-scale
{
    transform: translate3d(0, 0, 0) scale(1);
}

/* ============================ HERO ============================ */
#wismo-page .wm-hero
{
    padding: 84px 0 104px;
    background: #fff;
    position: relative;
    overflow: hidden;
}
#wismo-page .wm-hero-grid
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: center;
    gap: 56px;
}
/* ---------- Hero visual (device + live notifications) ---------- */
#wismo-page .wm-hero-mesh
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: radial-gradient(rgba(0,79,229,.10) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(70% 60% at 80% 24%, #000 0%, transparent 72%);
    mask-image: radial-gradient(70% 60% at 80% 24%, #000 0%, transparent 72%);
    pointer-events: none;
}
#wismo-page .wm-hero .wm-container-wide
{
    position: relative;
    z-index: 1;
}
#wismo-page .wm-hero-visual
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
}
#wismo-page .wm-hero-ring
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 360px;
    margin: -180px 0 0 -180px;
    border-radius: 50%;
    border: 1px solid rgba(0,79,229,.14);
}
#wismo-page .wm-hero-ring-2
{
    width: 470px;
    height: 470px;
    margin: -235px 0 0 -235px;
    border-color: rgba(0,79,229,.08);
}
#wismo-page .wm-device
{
    position: relative;
    z-index: 1;
    width: 316px;
    background: #fff;
    border: 1px solid var(--wm-line);
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 4px 26px rgb(239,239,239);
}
#wismo-page .wm-device-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--wm-line);
}
#wismo-page .wm-device-title
{
    font-family: "Hind", sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--wm-ink);
    margin: 0;
}
#wismo-page .wm-device-live
{
    font-family: "Heebo", sans-serif;
    font-size: 11px;
    line-height: 16px;
    color: var(--wm-green);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#wismo-page .wm-device-live:before
{
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wm-green);
}
#wismo-page .wm-notes
{
    padding: 18px 20px 20px;
}
/* Rows sit on a rail so the panel reads as one journey rather than
   three cards nested inside a card. */
#wismo-page .wm-note
{
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}
#wismo-page .wm-note:not(:last-child):before
{
    content: '';
    position: absolute;
    left: 17px;
    top: 38px;
    bottom: -18px;
    width: 2px;
    background: var(--wm-line);
}
#wismo-page .wm-note + .wm-note
{
    margin-top: 24px;
}
#wismo-page .wm-note-ico
{
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
#wismo-page .wm-note-ico svg
{
    width: 18px;
    height: 18px;
}
#wismo-page .wm-note-wa
{
    background: linear-gradient(180deg, #25C665, var(--wm-green));
}
#wismo-page .wm-note-sms
{
    background: linear-gradient(180deg, #2A76F5, var(--wm-blue));
}
#wismo-page .wm-note-mail
{
    background: linear-gradient(180deg, #FD8F66, var(--wm-orange));
}
#wismo-page .wm-note-txt
{
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#wismo-page .wm-note-txt b
{
    font-family: "Hind", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--wm-ink);
}
#wismo-page .wm-note-meta
{
    font-family: "Hind", sans-serif;
    font-size: 11px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: .2px;
    line-height: 18px;
    color: var(--wm-muted);
}
#wismo-page .wm-hero-chip
{
    position: absolute;
    left: 0;
    bottom: 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid var(--wm-line);
    border-radius: 999px;
    box-shadow: 0 4px 26px rgb(239,239,239);
    font-family: "Hind", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--wm-ink);
    white-space: nowrap;
}
#wismo-page .wm-hero-chip i
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wm-green);
    color: #fff;
}
#wismo-page .wm-hero-chip i svg
{
    width: 11px;
    height: 11px;
}
#wismo-page .wm-hero .wm-lead
{
    max-width: 560px;
    margin-left: 0;
    margin-right: 0;
}
#wismo-page .wm-final .wm-h2
{
    max-width: 900px;
}
#wismo-page .wm-center .wm-h2
{
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Trust bar ---------- */
#wismo-page .wm-trust
{
    padding: 56px 0 60px;
    background: var(--wm-bg);
    border-top: 1px solid var(--wm-line);
    border-bottom: 1px solid var(--wm-line);
    overflow: hidden;
}
/* Claim on the left, logos running on the right, split by a hairline. */
#wismo-page .wm-trust-grid
{
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 56px;
    align-items: center;
}
#wismo-page .wm-trust-claim
{
    padding-right: 40px;
    border-right: 1px solid var(--wm-line);
}
#wismo-page .wm-trust-stat
{
    font-family: "Hind", sans-serif;
    font-size: 64px;
    line-height: 68px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--wm-ink);
    margin: 0;
}
#wismo-page .wm-trust-title
{
    font-family: "Heebo", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--wm-muted);
    margin: 2px 0 0;
}

/* ---------- Logo grid: hairline cells, colour on hover ---------- */
#wismo-page .wm-logos
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--wm-line);
    border: 1px solid var(--wm-line);
    list-style: none;
    margin: 0;
    padding: 0;
}
#wismo-page .wm-logos li
{
    display: grid;
    place-items: center;
    background: #fff;
    padding: 24px 18px;
    min-height: 84px;
}
#wismo-page .wm-logos img
{
    display: block;
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .72;
    transition: filter .25s var(--wm-ease), opacity .25s var(--wm-ease);
}
#wismo-page .wm-logos li:hover img
{
    filter: none;
    opacity: 1;
}

/* ---------- Meet WISMO ---------- */
/* Copy + illustration split, the home page's section shape. Sides
   alternate down the page via .wm-flip. */
#wismo-page .wm-figure-split
{
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 56px;
    align-items: center;
}
#wismo-page .wm-figure-split.wm-flip
{
    grid-template-columns: 440px 1fr;
}
#wismo-page .wm-figure
{
    margin: 0;
}
/* Pinned horizontal scroll. .wm-hscroll is the tall spacer that supplies the
   scroll length; wismo.js fixes the track's viewport and drives translateX. */
/* position:sticky needs an unbroken scrollport. A site-wide
   `section { overflow: hidden }` in minify-css-new.css, the .content /
   .content-wrapper wrappers and the html/body overflow-x guards each create
   a scroll container that stops sticky firing. Reopened here only — this
   stylesheet loads on the WISMO page alone. Verified to add no horizontal
   overflow now that the 2925px marquee track is gone. */
html,
body#wismo-page,
#wismo-page .content,
#wismo-page .content-wrapper,
#wismo-page section
{
    /* clip, not hidden: `clip` contains horizontal overflow WITHOUT
       creating a scroll container, so sticky still resolves against the
       viewport. `hidden` would re-block it. */
    overflow-x: clip;
    overflow-y: visible;
}
#wismo-page .wm-hscroll
{
    position: relative;
}
#wismo-page .wm-hscroll-view
{
    position: sticky;
    top: 200px;
    overflow: hidden;
}
#wismo-page .wm-hscroll-track
{
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    will-change: transform;
}
#wismo-page .wm-hcard
{
    flex: 0 0 auto;
    width: 372px;
    background: #fff;
    border: 1px solid var(--wm-line);
    border-radius: 4px;
    padding: 34px 32px 36px;
}
#wismo-page .wm-hcard-no
{
    font-family: "Heebo", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--wm-blue);
    display: block;
    margin-bottom: 18px;
}
#wismo-page .wm-hcard .wm-h3
{
    font-size: 22px;
    line-height: 30px;
    margin: 0 0 10px;
}
#wismo-page .wm-hcard .wm-body
{
    margin: 0;
}
/* No pin below the breakpoint, and none under reduced motion: the track simply
   becomes a normal scrollable row. */
@media (max-width: 1023px)
{
    #wismo-page .wm-hscroll-view
    {
        position: static;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    #wismo-page .wm-hcard
    {
        width: 300px;
    }
}
@media (prefers-reduced-motion: reduce)
{
    #wismo-page .wm-hscroll-track
    {
        transform: none !important;
    }
}
#wismo-page .wm-figure img
{
    display: block;
    width: 100%;
    height: auto;
}
#wismo-page .wm-figure-copy .wm-lead
{
    max-width: none;
}
#wismo-page .wm-figure-copy .wm-lead + .wm-lead
{
    margin-top: 18px;
}
#wismo-page .wm-rule
{
    width: 56px;
    height: 3px;
    background: var(--wm-blue);
    border-radius: 2px;
    margin: 0 0 22px;
}
#wismo-page .wm-center .wm-rule
{
    margin-left: auto;
    margin-right: auto;
}

#wismo-page .wm-kicker
{
    font-family: "Hind", sans-serif;
    font-size: 24px;
    line-height: 34px;
    font-weight: 400;
    color: var(--wm-ink);
    margin: 0;
}
#wismo-page .wm-kicker span
{
    color: var(--wm-blue);
}

/* ---------- Steps (numbered editorial rows) ---------- */
/* ---------- How WISMO works: the home page's numbered step row ---------- */
#wismo-page .wm-flowsteps
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: wm-flowstep;
}
#wismo-page .wm-flowstep
{
    position: relative;
    text-align: center;
}
/* Connector between the steps, drawn behind the artwork. */
#wismo-page .wm-flowstep + .wm-flowstep:before
{
    content: '';
    position: absolute;
    top: 76px;
    left: -20px;
    width: 40px;
    height: 2px;
    background: #E1E6EE;
}
#wismo-page .wm-flowstep-art
{
    display: block;
    width: 152px;
    height: 152px;
    margin: 0 auto 24px;
}
#wismo-page .wm-flowstep-art img
{
    display: block;
    width: 100%;
    height: auto;
}
#wismo-page .wm-flowstep-no
{
    font-family: "Hind", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--wm-blue);
    display: block;
    margin-bottom: 10px;
}
#wismo-page .wm-flowstep .wm-body
{
    margin: 0;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Order events: hairline cell grid, no sequence implied ---------- */
#wismo-page .wm-points
{
    display: grid;
    /* 7 is prime: no uniform column count divides it. A 12-track lets row 1
       take four quarter-width cells and row 2 three third-width cells, so
       every cell is filled and none is oversized. */
    grid-template-columns: repeat(12, 1fr);
    gap: 1px;
    background: var(--wm-line);
    border: 1px solid var(--wm-line);
    /* Apple-scale corner. overflow:hidden is what makes the corner cells
       follow the curve instead of squaring it off. */
    border-radius: 20px;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}
#wismo-page .wm-point
{
    background: #fff;
    padding: 30px 28px 32px;
}
#wismo-page .wm-point-ico
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    margin-bottom: 22px;
    background: var(--wm-blue-soft);
    color: var(--wm-blue);
}
#wismo-page .wm-point-ico svg
{
    width: 22px;
    height: 22px;
}
#wismo-page .wm-point-good .wm-point-ico
{
    background: var(--wm-tint-b);
    color: var(--wm-tint-b-ink);
}
#wismo-page .wm-point-alt .wm-point-ico
{
    background: var(--wm-tint-c);
    color: var(--wm-tint-c-ink);
}
#wismo-page .wm-point-warn .wm-point-ico
{
    background: var(--wm-tint-e);
    color: var(--wm-tint-e-ink);
}
#wismo-page .wm-point:nth-child(-n+4)
{
    grid-column: span 3;
}
#wismo-page .wm-point:nth-child(n+5)
{
    grid-column: span 4;
}
#wismo-page .wm-point-name
{
    font-family: "Hind", sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--wm-ink);
    margin: 0 0 4px;
}
#wismo-page .wm-point-sub
{
    font-family: "Heebo", sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: var(--wm-muted);
    margin: 0;
}

/* ---------- Channels ---------- */
#wismo-page .wm-channels
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
#wismo-page .wm-channel
{
    background: #fff;
    border: 1px solid var(--wm-line);
    border-radius: 4px;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
    transition: transform .3s var(--wm-ease), box-shadow .3s var(--wm-ease), border-color .3s var(--wm-ease);
    display: flex;
    flex-direction: column;
}
#wismo-page .wm-channel:hover
{
    transform: translateY(-5px);
    border-color: #CBD6E6;
    box-shadow: 0 4px 26px rgb(239,239,239);
}
#wismo-page .wm-channel-top
{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}
#wismo-page .wm-channel-ico
{
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: var(--wm-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
#wismo-page .wm-channel-ico svg
{
    width: 22px;
    height: 22px;
}
#wismo-page .wm-channel-tag
{
    font-family: "Hind", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--wm-blue);
    line-height: 16px;
}
#wismo-page .wm-channel .wm-body
{
    margin-bottom: 24px;
}
#wismo-page .wm-channel-stats
{
    list-style: none;
    margin: auto 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--wm-line);
    display: grid;
    gap: 12px;
}
#wismo-page .wm-channel-stats li
{
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: "Heebo", sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: var(--wm-muted);
}
#wismo-page .wm-channel-stats b
{
    font-family: "Hind", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--wm-ink);
    flex: none;
}

/* ---------- Benefit cards ---------- */
#wismo-page .wm-cards
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
#wismo-page .wm-card
{
    background: #fff;
    border: 1px solid var(--wm-line);
    border-radius: 4px;
    padding: 30px 26px;
    transition: transform .3s var(--wm-ease), box-shadow .3s var(--wm-ease), border-color .3s var(--wm-ease);
}
#wismo-page .wm-card:hover
{
    transform: translateY(-5px);
    border-color: #CBD6E6;
    box-shadow: 0 4px 26px rgb(239,239,239);
}
#wismo-page .wm-card-ico
{
    width: 46px;
    height: 46px;
    border-radius: 4px;
    background: var(--wm-blue-soft);
    color: var(--wm-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
#wismo-page .wm-card-ico svg
{
    width: 22px;
    height: 22px;
}
#wismo-page .wm-card .wm-body
{
    margin: 0;
}

/* ---------- Comparison table ---------- */
#wismo-page .wm-compare
{
    border: 1px solid var(--wm-line);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
#wismo-page .wm-crow
{
    display: grid;
    grid-template-columns: 1fr 1.35fr 1.35fr;
    border-bottom: 1px solid var(--wm-line);
}
#wismo-page .wm-crow:last-child
{
    border-bottom: 0;
}
#wismo-page .wm-crow > div
{
    padding: 20px 24px;
    font-family: "Heebo", sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: var(--wm-muted);
    border-right: 1px solid var(--wm-line);
}
#wismo-page .wm-crow > div:last-child
{
    border-right: 0;
}
#wismo-page .wm-crow .wm-cfactor
{
    font-weight: 600;
    color: var(--wm-ink);
    background: #FBFCFE;
}
#wismo-page .wm-crow .wm-cwismo
{
    color: var(--wm-ink);
    background: rgba(0,79,229,.04);
}
#wismo-page .wm-chead > div
{
    font-family: "Hind", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--wm-muted);
    background: #F5F7FB;
    padding: 16px 24px;
}
#wismo-page .wm-chead .wm-cwismo
{
    color: var(--wm-blue);
    background: var(--wm-blue-soft);
}
#wismo-page .wm-clabel
{
    display: none;
}

/* ---------- Mid CTA band ---------- */
#wismo-page .wm-band
{
    background: #fff;
    border: 1px solid var(--wm-line);
    border-radius: 4px;
    padding: 56px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
#wismo-page .wm-band .wm-h2
{
    color: var(--wm-ink);
    margin: 0;
    max-width: 560px;
    position: relative;
    z-index: 1;
}
#wismo-page .wm-band .wm-cta-row
{
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ---------- Audience ---------- */
/* ---------- Who is this for: asymmetric bento ---------- */
#wismo-page .wm-aud
{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}
#wismo-page .wm-aud-item
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    overflow: hidden;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-line, var(--wm-line));
    border-radius: 4px;
    padding: 30px 28px 28px;
    transition: border-color .3s var(--wm-ease);
}
/* One 2x2 feature, two half-width, three thirds. */
#wismo-page .wm-aud-item:nth-child(1)
{
    grid-column: span 3;
    grid-row: span 2;
    padding: 44px 44px 40px;
}
#wismo-page .wm-aud-item:nth-child(2),
#wismo-page .wm-aud-item:nth-child(3)
{
    grid-column: span 3;
}
#wismo-page .wm-aud-item:nth-child(4),
#wismo-page .wm-aud-item:nth-child(5),
#wismo-page .wm-aud-item:nth-child(6)
{
    grid-column: span 2;
}
#wismo-page .wm-aud-item:hover
{
    border-color: #CBD6E6;
}
/* The numeral is the card's own marker, set large and quiet. */
#wismo-page .wm-aud-index
{
    font-family: "Hind", sans-serif;
    font-size: 40px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--card-accent, var(--wm-blue));
    opacity: .32;
    order: 2;
}
#wismo-page .wm-aud-feature .wm-aud-index
{
    font-size: 72px;
}
#wismo-page .wm-aud-text
{
    order: 1;
}
#wismo-page .wm-aud-role
{
    font-family: "Heebo", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: var(--card-accent, var(--wm-blue));
    margin: 0 0 12px;
}
#wismo-page .wm-aud-item .wm-h2,
#wismo-page .wm-aud-item .wm-h3
{
    color: var(--wm-ink);
    margin: 0 0 10px;
}
#wismo-page .wm-aud-feature .wm-h2
{
    font-size: 34px;
    line-height: 44px;
}
#wismo-page .wm-aud-item .wm-body
{
    color: var(--wm-muted);
    margin: 0;
    max-width: 46ch;
}
#wismo-page .wm-aud-item:nth-child(1)
{
    --card-bg: var(--wm-tint-a);
    --card-accent: var(--wm-tint-a-ink);
    --card-line: var(--wm-tint-a-line);
}
#wismo-page .wm-aud-item:nth-child(2)
{
    --card-bg: var(--wm-tint-b);
    --card-accent: var(--wm-tint-b-ink);
    --card-line: var(--wm-tint-b-line);
}
#wismo-page .wm-aud-item:nth-child(3)
{
    --card-bg: var(--wm-tint-c);
    --card-accent: var(--wm-tint-c-ink);
    --card-line: var(--wm-tint-c-line);
}
#wismo-page .wm-aud-item:nth-child(4)
{
    --card-bg: var(--wm-tint-d);
    --card-accent: var(--wm-tint-d-ink);
    --card-line: var(--wm-tint-d-line);
}
#wismo-page .wm-aud-item:nth-child(5)
{
    --card-bg: var(--wm-tint-e);
    --card-accent: var(--wm-tint-e-ink);
    --card-line: var(--wm-tint-e-line);
}
#wismo-page .wm-aud-item:nth-child(6)
{
    --card-bg: var(--wm-tint-f);
    --card-accent: var(--wm-tint-f-ink);
    --card-line: var(--wm-tint-f-line);
}
#wismo-page .wm-aud-no
{
    font-family: "Hind", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--wm-blue);
    margin-bottom: 18px;
    display: block;
}

/* ---------- Social proof ---------- */
#wismo-page .wm-proof
{
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 40px;
    align-items: center;
}
#wismo-page .wm-proof-stat
{
    letter-spacing: normal;
    font-family: "Hind", sans-serif;
    font-size: 56px;
    line-height: 62px;
    font-weight: 400;
    color: var(--wm-ink);
    margin-bottom: 8px;
}
#wismo-page .wm-quote
{
    background: #fff;
    border: 1px solid var(--wm-line);
    border-radius: 4px;
    padding: 34px 36px;
    box-shadow: 0 4px 26px rgb(239,239,239);
}
#wismo-page .wm-quote p
{
    font-family: "Hind", sans-serif;
    font-size: 22px;
    line-height: 34px;
    color: var(--wm-ink);
    margin: 0 0 20px;
}
#wismo-page .wm-quote cite
{
    font-family: "Hind", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--wm-muted);
    font-style: normal;
    display: block;
}

/* ---------- FAQ ---------- */
#wismo-page .wm-faq
{
    max-width: 860px;
    margin: 0 auto;
}
#wismo-page .wm-faq-item
{
    border-bottom: 1px solid var(--wm-line);
}
#wismo-page .wm-faq-item:first-child
{
    border-top: 1px solid var(--wm-line);
}
#wismo-page .wm-faq-h
{
    margin: 0;
}
#wismo-page .wm-faq-q
{
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 24px 48px 24px 0;
    font-family: "Hind", sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: var(--wm-ink);
    cursor: pointer;
    position: relative;
    transition: color .25s var(--wm-ease);
}
#wismo-page .wm-faq-q:hover
{
    color: var(--wm-blue);
}
#wismo-page .wm-faq-q:before,
#wismo-page .wm-faq-q:after
{
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 14px;
    height: 2px;
    background: var(--wm-blue);
    transition: transform .3s var(--wm-ease);
}
#wismo-page .wm-faq-q:after
{
    transform: rotate(90deg);
}
#wismo-page .wm-faq-item.wm-open .wm-faq-q:after
{
    transform: rotate(0deg);
}
#wismo-page .wm-faq-a
{
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s var(--wm-ease);
}
#wismo-page .wm-faq-a-in
{
    padding: 0 48px 26px 0;
}
#wismo-page .wm-faq-a-in p
{
    font-family: "Heebo", sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: var(--wm-muted);
    margin: 0;
}

/* ---------- Final CTA ---------- */
#wismo-page .wm-final
{
    background:
        linear-gradient(120deg, rgba(4,18,49,.72), rgba(4,18,49,.52)),
        url('../../images/link-background-logistic-register.webp') no-repeat center center;
    background-color: var(--wm-navy);
    background-size: auto, cover;
    padding: 104px 0 92px;
}
#wismo-page .wm-final .wm-h2
{
    color: #fff;
}
#wismo-page .wm-final .wm-lead
{
    color: #C4CDDC;
}
#wismo-page .wm-final .wm-btn
{
    background: #fff;
    border-color: #fff;
    color: var(--wm-blue);
}

#wismo-page .wm-final .wm-btn-ghost
{
    background: transparent;
    border-color: rgba(255,255,255,.55);
    color: #fff;
}
#wismo-page .wm-final .wm-btn:focus-visible
{
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1023px)
{
    #wismo-page .wm-section { padding: 80px 0; }
    #wismo-page .wm-section-tight { padding: 64px 0; }
    #wismo-page .wm-final { padding: 80px 0; }
    #wismo-page .wm-h1 { font-size: 38px; line-height: 48px; }
    #wismo-page .wm-h2 { font-size: 32px; line-height: 42px; }
    #wismo-page .wm-hero { padding: 56px 0 72px; }
    #wismo-page .wm-hero .wm-lead { max-width: none; }
    #wismo-page .wm-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    #wismo-page .wm-hero-visual { flex-direction: column; min-height: 0; }
    #wismo-page .wm-hero-ring { display: none; }
    #wismo-page .wm-hero-chip { position: static; margin-top: 20px; }
    #wismo-page .wm-points { grid-template-columns: repeat(12, 1fr); }
    #wismo-page .wm-point:nth-child(-n+4) { grid-column: span 6; }
    #wismo-page .wm-point:nth-child(n+5) { grid-column: span 4; }
    #wismo-page .wm-trust-grid { grid-template-columns: 200px 1fr; gap: 36px; }
    #wismo-page .wm-trust-stat { font-size: 48px; line-height: 54px; }
    #wismo-page .wm-logos { grid-template-columns: repeat(3, 1fr); }
    #wismo-page .wm-benefits { grid-template-columns: 1fr; gap: 22px; }
    #wismo-page .wm-figure-split-wide { grid-template-columns: 1fr; gap: 40px; }
    #wismo-page .wm-figure-split,
    #wismo-page .wm-figure-split.wm-flip { grid-template-columns: 1fr; gap: 40px; }
    /* Copy leads on small screens whichever side the art sits on. */
    #wismo-page .wm-figure-split.wm-flip .wm-figure-copy { order: 1; }
    #wismo-page .wm-figure-split.wm-flip .wm-figure { order: 2; }
    #wismo-page .wm-figure { max-width: 504px; }
    #wismo-page .wm-channels,
    #wismo-page .wm-cards { grid-template-columns: repeat(2, 1fr); }
    #wismo-page .wm-aud { grid-template-columns: repeat(2, 1fr); }
    #wismo-page .wm-aud-item:nth-child(1) { grid-column: span 2; grid-row: auto; }
    #wismo-page .wm-aud-item:nth-child(n+2) { grid-column: span 1; }
    #wismo-page .wm-aud-feature .wm-h2 { font-size: 30px; line-height: 40px; }
    #wismo-page .wm-aud-feature .wm-aud-index { font-size: 56px; }
    #wismo-page .wm-proof { grid-template-columns: 1fr; gap: 28px; }
    #wismo-page .wm-band { padding: 40px 32px; }
    #wismo-page .wm-section-head { margin-bottom: 44px; }

    /* events → vertical timeline */
    {
        left: 27px;
        right: auto;
        top: 8px;
        bottom: 8px;
        width: 2px;
        height: auto;
    }
    {
        width: 100%;
        height: 100%;
        transform: scaleY(0);
        transform-origin: 50% 0;
        background: linear-gradient(180deg, var(--wm-blue), var(--wm-orange));
    }
    {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 18px;
        align-items: center;
        text-align: left;
        padding: 0;
    }
}
@media (max-width: 767px)
{
    #wismo-page .wm-section { padding: 64px 0; }
    #wismo-page .wm-final { padding: 64px 0; }
    #wismo-page .wm-h1 { font-size: 30px; line-height: 40px; }
    #wismo-page .wm-h2 { font-size: 26px; line-height: 36px; }
    #wismo-page .wm-h3 { font-size: 19px; line-height: 27px; }
    #wismo-page .wm-lead { font-size: 17px; line-height: 28px; }
    #wismo-page .wm-device { width: 100%; max-width: 300px; }
    #wismo-page .wm-trust-grid { grid-template-columns: 1fr; gap: 28px; }
    #wismo-page .wm-logos { grid-template-columns: repeat(3, 1fr); }
    #wismo-page .wm-trust-claim { padding-right: 0; border-right: 0; }
    #wismo-page .wm-trust-stat { font-size: 32px; line-height: 38px; }
    #wismo-page .wm-channels,
    #wismo-page .wm-cards { grid-template-columns: 1fr; }
    #wismo-page .wm-btn { width: 100%; text-align: center; padding: 0 20px; }
    #wismo-page .wm-points { grid-template-columns: 1fr; }
    #wismo-page .wm-point:nth-child(n) { grid-column: span 1; }
    #wismo-page .wm-flowsteps { grid-template-columns: 1fr; gap: 44px; }
    #wismo-page .wm-flowstep + .wm-flowstep:before { display: none; }
    #wismo-page .wm-aud { grid-template-columns: 1fr; }
    #wismo-page .wm-aud-item:nth-child(n) { grid-column: span 1; grid-row: auto; }
    #wismo-page .wm-aud-item { gap: 28px; padding: 26px 22px 24px; }
    #wismo-page .wm-aud-item:nth-child(1) { padding: 30px 22px 26px; }
    #wismo-page .wm-aud-feature .wm-h2 { font-size: 26px; line-height: 36px; }
    #wismo-page .wm-aud-feature .wm-aud-index { font-size: 44px; }
    #wismo-page .wm-cta-row { gap: 12px; }
    #wismo-page .wm-trust-title { font-size: 15px; line-height: 24px; }
    #wismo-page .wm-kicker { font-size: 20px; line-height: 30px; }
    #wismo-page .wm-band { padding: 32px 24px; }
    #wismo-page .wm-proof-stat { font-size: 42px; line-height: 50px; }
    #wismo-page .wm-quote { padding: 26px 24px; }
    #wismo-page .wm-quote p { font-size: 17px; line-height: 28px; }
    #wismo-page .wm-faq-q { font-size: 16px; line-height: 26px; padding: 20px 40px 20px 0; }
    #wismo-page .wm-faq-a-in { padding: 0 24px 22px 0; }
    #wismo-page .wm-reveal-left,
    #wismo-page .wm-reveal-right { transform: translate3d(0, 24px, 0); }

    /* comparison → stacked cards */
    #wismo-page .wm-compare
    {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    #wismo-page .wm-chead { display: none; }
    #wismo-page .wm-crow
    {
        grid-template-columns: 1fr;
        border: 1px solid var(--wm-line);
        border-radius: 4px;
        background: #fff;
        margin-bottom: 14px;
        overflow: hidden;
    }
    #wismo-page .wm-crow > div
    {
        border-right: 0;
        border-bottom: 1px solid var(--wm-line);
        padding: 16px 20px;
    }
    #wismo-page .wm-crow > div:last-child { border-bottom: 0; }
    #wismo-page .wm-clabel
    {
        display: block;
        font-family: "Hind", sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--wm-muted);
        margin-bottom: 6px;
    }
    #wismo-page .wm-cwismo .wm-clabel { color: var(--wm-blue); }
}

@media (prefers-reduced-motion: reduce)
{
    #wismo-page .wm-reveal
    {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    {
        transform: none !important;
        transition: none !important;
    }
    {
        animation: none !important;
    }
}