/* Generated from BNTouch_Homepage_Iteration_2026-09_v15_1.html by src/tools/comp-split.php — do not hand-edit.
   Shell, tokens, fonts and print rules stripped; see theme.css for those. */

600;700;800&display=swap');
:root{--navy:#032d60;--orange:#f7941e;--orange-d:#dd8210;--ink:#222;--mut:#656464;--line:#e4e7ee;--bg:#f6f7f9;--green:#1d7a3a}
nav img{height:30px}
nav .sp{flex:1}
nav a{color:var(--navy);text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.04em}
nav .btn{padding:10px 20px}
.hero{text-align:center;padding:66px 28px 26px;background:radial-gradient(1000px 460px at 50% -80px,#fff7ec 0%,#fff 55%,#eef1f6 100%)}
.hero h1{font-size:46px;color:#4c5560;font-weight:700;margin:0 0 18px;letter-spacing:-.015em}
.hero p{max-width:770px;margin:0 auto 26px;color:var(--mut);font-size:17.5px}
.stars{color:var(--orange);font-size:22px;letter-spacing:3px;margin:20px 0 2px}
.revnote{font-weight:800;color:var(--navy);font-size:15px}
.plat{display:flex;gap:38px;justify-content:center;align-items:center;flex-wrap:wrap;padding:26px 0 6px}
.plat img{height:22px;filter:grayscale(30%);opacity:.92}
.logostrip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 28px;text-align:center}
.logostrip h3{color:var(--navy);font-size:18px;margin:0 0 20px}
.clogos{display:flex;gap:36px;justify-content:center;align-items:center;flex-wrap:wrap}
.clogos img{height:42px;object-fit:contain;filter:grayscale(100%);opacity:.7}
.statband{background:linear-gradient(135deg,var(--navy),#054592);padding:38px 28px}
.statband .in{display:flex;gap:34px;justify-content:space-between;flex-wrap:wrap}
.st{text-align:center;flex:1 1 150px}
.st svg{margin-bottom:6px}
.st b{display:block;font-size:36px;color:var(--orange);font-weight:800;line-height:1.1}
.st span{color:#c9d3e2;font-size:13px}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 8px 26px -18px rgba(22,38,59,.28);transition:.15s}
.fic{width:46px;height:46px;border-radius:11px;background:#fff4e5;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.fcard b{color:var(--navy);font-size:16.5px}
.fcard p{color:var(--mut);font-size:14px;margin:8px 0 0}
.om{background:linear-gradient(160deg,var(--navy) 0%,#033f87 100%);background-color:var(--navy);color:#fff;padding:66px 0}
.om h2{color:#fff}
.om .sub{color:#c9d3e2}
.omgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:30px 0 26px}
.eng{display:flex;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(247,148,30,.4);border-radius:12px;padding:16px 18px}
.eic{flex:0 0 40px;height:40px;border-radius:10px;background:rgba(247,148,30,.14);display:flex;align-items:center;justify-content:center}
.eng b{color:var(--orange);font-size:15px}
.eng p{color:#dde5f0;font-size:13.5px;margin:4px 0 0;line-height:1.5}
.wg{background:linear-gradient(135deg,#fff7ec,#fffdf9);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wg .in{display:flex;gap:40px;align-items:center;flex-wrap:wrap;padding-top:52px;padding-bottom:52px}
.wgbig{font-size:46px;font-weight:800;color:var(--orange-d);white-space:nowrap;line-height:1}
.wgbig small{display:block;font-size:13px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:8px}
.wgcopy{flex:1 1 380px}
.wgcopy h2{margin-bottom:8px}
.wgcopy p{color:var(--mut);font-size:15px;margin:0 0 16px}
.wgq{border-left:3px solid var(--orange);padding:8px 14px;background:#fff;border-radius:0 10px 10px 0;font-size:13.5px;color:#444;margin:0 0 18px}
#pricing{background:var(--bg);padding:62px 0}
#pricing .wrap{max-width:1120px;margin:0 auto;padding:0 28px}
#pricing .center{text-align:center}
#pricing h2{text-align:center}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.plan{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 24px;display:flex;flex-direction:column;position:relative;box-shadow:0 8px 26px -18px rgba(22,38,59,.25)}
.plan.feat-plan{border:2px solid var(--orange);box-shadow:0 18px 40px -24px rgba(22,38,59,.4)}
.pop{position:absolute;top:-12px;left:24px;background:var(--orange);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:20px}
.pname{font-size:20px;font-weight:700;color:var(--navy);margin-top:4px}
.pprice{font-size:34px;font-weight:700;color:var(--navy);margin:8px 0 0}
.pprice small{font-size:14px;font-weight:600;color:var(--mut)}
.pprice.call{font-size:22px}
.psub{font-size:13px;color:var(--mut);margin:2px 0 0}
.pdesc{color:var(--mut);font-size:14.5px;margin:14px 0 18px;min-height:52px;line-height:1.5}
.pinc{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin:14px 0 8px}
.feat{margin:0 0 18px;padding:0;list-style:none}
.feat li{position:relative;padding:6px 0 6px 24px;font-size:14.5px;border-bottom:1px solid #f1f3f7}
.feat li:before{content:"\2713";position:absolute;left:0;color:var(--orange);font-weight:800}
.plan .cta-wrap{margin-top:auto}
.plan .cta-wrap .btn{display:block;text-align:center;margin-top:8px}
.incl-pill{display:inline-block;background:#eaf6ec;color:var(--green);font-weight:700;font-size:12px;padding:3px 9px;border-radius:6px;margin-left:6px}
.ent-band{margin-top:26px;background:var(--navy);border:2px solid var(--orange);border-radius:14px;padding:30px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:22px;position:relative;box-shadow:0 22px 48px -26px rgba(22,38,59,.55)}
.ent-badge{position:absolute;top:-13px;left:28px;background:var(--orange);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:20px}
.ent-main{flex:1 1 340px}
.ent-title{color:#fff;font-size:22px;font-weight:700;margin:4px 0 6px}
.ent-sub{color:#c9d3e2;font-size:14.5px;line-height:1.55;margin:0}
.ent-feats{flex:1 1 300px;margin:0;padding:0;list-style:none}
.ent-feats li{position:relative;color:#eef2f8;font-size:14px;padding:5px 0 5px 24px}
.ent-feats li:before{content:"\2713";position:absolute;left:0;color:var(--orange);font-weight:800}
.ent-cta{flex:0 0 auto}
.foot-note{font-size:12.5px;color:var(--mut);margin-top:14px;text-align:center}
.midcta{background:#fff;text-align:center;padding:54px 28px;border-bottom:1px solid var(--line)}
.midcta h2{margin-bottom:6px}
.tstrip{background:var(--bg);padding:56px 0}
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:22px}
.tq{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 8px 26px -18px rgba(22,38,59,.25)}
.tstars{color:var(--orange);letter-spacing:2px;margin-bottom:8px}
.tq p{font-size:15px;color:#333;margin:0 0 12px}
.tq b{color:var(--navy)}
.tq i{display:block;color:var(--mut);font-size:13px;font-style:normal}
.faqx{max-width:820px;margin:26px auto 0}
.qa{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:12px}
.qa b{color:var(--navy);font-size:15.5px}
.qa p{color:var(--mut);font-size:14px;margin:6px 0 0}
/* .cta moved to design-om-extras.css -- other pages use this band too. */
.blog{padding:56px 0 64px}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}
.post{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;text-decoration:none;box-shadow:0 6px 20px -16px rgba(22,38,59,.3)}
.pdate{flex:0 0 auto;background:#fff4e5;color:var(--orange-d);font-weight:800;font-size:11.5px;border-radius:8px;padding:6px 10px;text-transform:uppercase}
.ptitle{flex:1;color:var(--navy);font-weight:700;font-size:14px;line-height:1.4}
.post em{color:var(--orange-d);font-weight:800;font-size:13px;font-style:normal;white-space:nowrap}
footer{border-top:1px solid var(--line);padding:26px 28px;display:flex;align-items:center;gap:20px}
footer img{height:26px}
footer span{color:var(--mut);font-size:13px}
@media screen and (max-width:880px){.fgrid,.omgrid,.tgrid,.pgrid,.plans{grid-template-columns:1fr}.hero h1{font-size:32px}}
.mq{overflow:hidden;padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mqrow{display:flex;gap:16px;width:max-content;animation:mqscroll 55s linear infinite}
.mqrow.mqrev{animation:mqscroll2 60s linear infinite}
.mq:hover .mqrow{animation-play-state:paused}
@keyframes mqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqscroll2{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mqc{flex:0 0 340px;width:340px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:0 8px 26px -18px rgba(22,38,59,.25)}
.mqc p{font-size:13.8px;color:#333;margin:0 0 10px;line-height:1.55}
.mqc b{color:var(--navy);font-size:14px}
.mqc i{display:block;color:var(--mut);font-size:12.5px;font-style:normal}
@media screen and (max-width:880px){.sitefooter .cols{grid-template-columns:1fr 1fr}.hdr-nav{display:none}}
/* paginated desktop pdf */
@media print{
 @page{size:1280px 1120px;margin:0}
 .hdr{position:static!important}
 *{animation:none!important;transition:none!important}
 body{-webkit-print-color-adjust:exact;print-color-adjust:exact;margin:0}
 .fcard,.eng,.tq,.qa,.mqc,.ccard,.tlrow,.plan,.ent-band,.wg-outcome,.post,.pain,.magnet-card,.price-card,.st{break-inside:avoid!important}
 h1,h2,h3{break-after:avoid}
}
/* end single-page */
.duo{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start}
.duo-you{background:var(--navy);border-radius:14px;padding:26px 24px;break-inside:avoid!important}
.duo-you .duo-h{color:var(--orange);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.duo-you ul{list-style:none;margin:0;padding:0}
.duo-you li{color:#fff;font-weight:800;font-size:17px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.duo-you li:last-child{border-bottom:0}
.duo-note{color:#c9d3e2;font-size:13px;margin:12px 0 0}
.duo-crm{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 24px;box-shadow:0 8px 26px -18px rgba(22,38,59,.28)}
.duo-crm .duo-h{color:var(--mut);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:14px 0 4px}
.dr{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);break-inside:avoid!important}
.dr:last-child{border-bottom:0}
.dr b{color:var(--navy);font-size:15.5px}
.dr p{color:var(--mut);font-size:13.5px;margin:4px 0 0;line-height:1.5}
@media screen and (max-width:900px){.duo{grid-template-columns:1fr}}
.fbtabs{display:grid;gap:14px;margin-top:26px}
.fbanner{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;padding:20px 24px;break-inside:avoid}
.fbanner h3{color:var(--navy);font-size:17px;font-weight:700;margin:0 0 6px}
.fbanner p{color:var(--mut);font-size:14.5px;margin:0 0 8px}
.fbanner a{color:var(--orange-d);font-weight:800;text-decoration:none;font-size:13.5px}
.difwrap{display:flex;gap:34px;align-items:center;max-width:1080px;margin:26px auto 0}
.difL{flex:1 1 470px;max-width:560px;margin:0}
.shotfig{flex:1 1 420px;min-width:320px;margin:0;border-radius:12px;overflow:hidden;box-shadow:0 18px 50px rgba(22,38,59,.18);border:1px solid var(--line);background:#fff}
.shotbar{display:flex;gap:6px;padding:9px 12px;background:#032d60}
.shotbar i{width:9px;height:9px;border-radius:50%;background:#3d5573;display:block}
.shotbar i:first-child{background:#f7941e}
.shotfig img{width:100%;display:block}
.shotfig figcaption{font-size:12.5px;color:#656464;padding:9px 14px;background:#fff}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:26px}
.bcard{grid-column:span 2;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;break-inside:avoid!important}
.bcard:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(22,38,59,.16)}
.bwide{grid-column:span 4}
.bcard img{width:100%;display:block;border-bottom:1px solid var(--line)}
.btxt{padding:16px 18px 18px}
.btxt h3{font-weight:700;font-size:17px;margin:0 0 6px;color:#032d60}
.btxt p{font-size:13.5px;color:#4a5568;margin:0 0 10px;line-height:1.55}
.btxt span{color:var(--orange-d);font-weight:800;font-size:13.5px}
.btxt-top{padding:18px 18px 0}
.aiorb{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffb75e,#f7941e 55%,#032d60 130%);animation:orb 3.2s ease-in-out infinite}
@keyframes orb{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(247,148,30,.35)}50%{transform:scale(1.07);box-shadow:0 0 0 14px rgba(247,148,30,0)}}
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.aiorb{animation:none}}
@media (max-width:900px){.difwrap{flex-direction:column}.bcard,.bwide{grid-column:span 6}}
.herov13{text-align:left}
.herov13 .heroWrap{display:flex;align-items:center;gap:42px;max-width:1180px;margin:0 auto}
.herov13 .heroL{flex:1 1 500px}
.herov13 .heroL h1{font-size:42px}
.herov13 .heroL p{margin:0 0 26px}
.herov13 .heroL .btn.btn-primary{background:#f7941e;color:#fff;display:inline-block}
.herov13 .heroL .btn.btn-primary:hover{background:#e08312}
.heroShot{flex:1 1 460px;min-width:340px;margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 30px 70px -18px rgba(22,38,59,.35);animation:heroFloat 7s ease-in-out infinite alternate}
.heroShot img{width:100%;display:block}
@keyframes heroFloat{from{transform:translateY(0) rotate(-.3deg)}to{transform:translateY(-10px) rotate(.3deg)}}
.herov13 .plat,.herov13 .badges{text-align:center;margin-top:34px}
/* --- "Everything you run feeds one record": the integration diagram -------------------------
   A dark band, because this is the one place on the page that draws the product's shape, and it
   wants the contrast: white nodes and an orange wire read on navy in a way they cannot on the
   white the rest of the page is made of.

   The drawing is one inline SVG with fixed geometry. What was here before was HTML nodes and an
   empty <svg> waiting for a script to measure and connect them -- a script that never came
   across with the markup, so the nodes sat unconnected. A viewBox cannot fail that way.

   Below 780px the SVG is replaced by the list underneath it, which carries the same
   relationships: 1120 units of drawing on a phone is six lines of five-pixel text. */
.beamsec { background: #032d60; }
.beamsec h2 { color: #fff; }
/* The global .sub is `margin: 0 0 30px` with a 740px max-width, so a centred one still sits in
   a box pinned to the left of its container -- the text centres inside 740px while the heading
   centres inside 1064px, and the two disagree by more than a hundred pixels. Auto sides. */
.beamsec .sub { color: rgba(255, 255, 255, .72); margin-left: auto; margin-right: auto; }
.beamwrap { max-width: 1000px; margin: 34px auto 0; }
.beamsvg { display: block; width: 100%; height: auto; }

/* Nodes: a glass chip on the navy, not a white box -- six solid white pills would outweigh the
   hub they all point at. */
.beamnode rect {
    fill: rgba(255, 255, 255, .07);
    stroke: rgba(255, 255, 255, .22);
    stroke-width: 1.5;
}
.beamnode text {
    fill: #fff;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-anchor: middle;
}
.beamhub__halo { fill: rgba(249, 178, 51, .08); }
/* The Automation ring: a band around the record rather than a box beside it. Stroked rather
   than two circles, so the label can ride the same radius. */
.beamhub__ring {
    fill: none;
    stroke: rgba(249, 178, 51, .18);
    /* Matches $bnt_band_w in front-page.php -- the template positions the label path at the
       band's midline, so the two have to agree. */
    stroke-width: 48;
}
/* text.beamhub__ringlabel, not the class alone: `.beamhub text` sets the hub's white and scores
   a point higher, so the label came out white. */
.beamhub text.beamhub__ringlabel {
    fill: #f9b233;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .08em;
    text-anchor: middle;
}
.beamhub__disc { fill: #012147; stroke: rgba(249, 178, 51, .55); stroke-width: 2; }
.beamhub text {
    fill: #fff;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    text-anchor: middle;
}
.beamhub__bn { fill: #f9b233; }

/* Every wire is drawn twice: a dim base, and a bright dashed copy whose dash offset animates --
   that copy is the packet running the wire. The dash pattern is longer than any path here, so
   only one packet is ever in flight per wire, and --i staggers the nine so the diagram has
   something moving somewhere most of the time without ever looking like a light show. */
.beambase { fill: none; stroke: rgba(255, 255, 255, .20); stroke-width: 2; }
.beamflow {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 62 1400;
    animation: beamdash 3.4s linear infinite;
    animation-delay: calc(var(--i, 0) * -.38s);
}
@keyframes beamdash { from { stroke-dashoffset: 1462; } to { stroke-dashoffset: 0; } }

.beamlist { display: none; }
@media (max-width: 780px) {
    .beamsvg { display: none; }
    /* The drawing stood on end: two groups in, the hub, one group out. Each group is a titled
       card of chips, and a short orange wire with an arrowhead runs from the last inbound card
       into the hub and from the hub into the outbound card -- the same wires, vertical. */
    .beamlist {
        display: grid;
        gap: 12px;
        max-width: 460px;
        margin: 0 auto;
    }
    .beamgrp {
        position: relative;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 14px;
        padding: 16px 16px 18px;
    }
    .beamgrp h3 {
        margin: 0 0 12px;
        color: #f9b233;
        font-size: 12px;
        line-height: 16px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .beamgrp ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .beamgrp li {
        background: rgba(255, 255, 255, .09);
        border-radius: 999px;
        padding: 6px 13px;
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
    }
    .beamhub {
        position: relative;
        margin: 26px 0;
        background: #012147;
        border: 1px solid #f9b233;
        border-radius: 14px;
        padding: 16px;
        text-align: center;
        color: #fff;
    }
    .beamhub b { display: block; font-size: 20px; line-height: 26px; }
    .beamhub span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 20px; color: rgba(255, 255, 255, .72); }
    /* The wires: one into the hub, one out of it, each a 2px line ending in an arrowhead. One
       box clipped to an arrow's outline, so a pseudo-element apiece is enough. The hub's 26px
       margin plus the 12px grid gap is the 38px they cross. */
    .beamhub::before,
    .beamhub::after {
        content: '';
        position: absolute;
        left: 50%;
        width: 12px;
        height: 30px;
        margin-left: -6px;
        background: #f9b233;
        clip-path: polygon(5px 0, 7px 0, 7px 21px, 12px 21px, 6px 30px, 0 21px, 5px 21px);
    }
    .beamhub::before { bottom: calc(100% + 4px); }
    .beamhub::after  { top: calc(100% + 4px); }
}
@media (prefers-reduced-motion: reduce) {
    .beamflow { animation: none; opacity: .5; }
}
.maiatype{font-size:13.5px;color:#032d60;background:#fff7ec;border:1px solid #f5d9ac;border-radius:8px;padding:8px 12px;margin:0 0 10px;font-weight:600;min-height:34px}
.mcaret{display:inline-block;width:2px;height:14px;background:#f7941e;margin-left:3px;vertical-align:-2px;animation:mblink 1s step-end infinite}
@keyframes mblink{50%{opacity:0}}
@media (max-width:960px){.herov13 .heroWrap{flex-direction:column}.herov13{text-align:center}}
@media (prefers-reduced-motion:reduce){.heroShot,.mcaret{animation:none}}
.featrows{max-width:920px;margin:30px auto 0;display:flex;flex-direction:column;gap:52px}
.featrow{text-align:center}
.featrow h3{font-size:22px;font-weight:700;color:#032d60;margin:0 0 8px}
.featrow p{max-width:660px;margin:0 auto 16px;color:#4a5568;font-size:15px;line-height:1.6}
.frshot{max-width:840px;margin:0 auto 16px;animation:none}
.frlink{color:var(--orange-d);font-weight:800;text-decoration:none;font-size:15px}
.maiatype-c{max-width:380px;margin:0 auto 16px;text-align:center}
.ratingline{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:20px 0 2px}
.rscore{font-weight:800;color:var(--navy);font-size:17px;line-height:1}
.rstars{position:relative;display:inline-block;color:#d7dbe3;font-size:22px;letter-spacing:3px;line-height:1;white-space:nowrap}
.rfill{position:absolute;left:0;top:0;width:94%;overflow:hidden;color:var(--orange);white-space:nowrap}
/* --- "Often imitated": four cards, card design taken from the published Opportunity Mining page --- */
.oistats{display:grid;grid-template-columns:repeat(4,1fr);gap:25px 30px;max-width:1120px;margin:34px auto 0}
.oistat{background:#fff;border:1px solid #e9ecf1;box-shadow:0 1px 4px rgba(21,48,76,.05);padding:27px 22px}
.oiic{line-height:0;margin-bottom:13px}
.oiic svg{width:26px;height:26px;stroke:#f9b233}
.oistat h3{font-size:16px;font-weight:700;color:#2e3033;margin:0 0 6px}
.oistat p{font-size:16px;line-height:22px;color:#616b76;margin:0}
@media screen and (max-width:980px){.oistats{grid-template-columns:repeat(2,1fr)}}
@media screen and (max-width:600px){.oistats{grid-template-columns:1fr}}
/* --- client logo scroller, as on bntouch.com --- */
.logomq{padding:26px 0 4px}
.logorow{gap:64px;align-items:center;animation-duration:40s}
.logorow img{flex:0 0 auto;height:42px;width:auto;object-fit:contain;filter:grayscale(100%);opacity:.7}
/* --- "Make your book of business work for you": design taken from the Opportunity Mining page --- */
.om{background:#f6f7f9;background-image:none;color:#2e3033;padding:62px 0 66px}
.om .in{text-align:center}
.om h2{color:#2e3033;font-size:32px;font-weight:500;text-align:center;margin:0 auto 18px;max-width:900px}
.om .sub{color:#616a75;font-size:16px;line-height:26px;max-width:720px;margin:0 auto 32px;text-align:center}
/* The six engine cards take the "Often imitated" treatment: one flat colour each, square
   corners, no gap between them. Lighter tints than that band, because these cards carry a
   heading and a paragraph and the text stays black.

   No seam and no running light: with six cards in two rows the chase was six things moving at
   once, and the colour change is enough to separate them. */
.om{overflow-x:clip}
.omgrid{
    /* Same arithmetic as .oistats: every card keeps the width it had inside the 1064px content
       column, and the two end cards of each row carry the leftover viewport on their outside
       edge -- so the band runs to the screen edge while the text stays on the column. */
    --om-col:calc(min(100vw, 1064px) / 3);
    --om-bleed:max(0px, (100vw - 1064px) / 2);
    grid-template-columns:calc(var(--om-col) + var(--om-bleed)) var(--om-col) calc(var(--om-col) + var(--om-bleed));
    gap:0;
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    margin-bottom:30px;
}
/* The bleed is padding, so the copy starts where the column starts. */
.om .eng:nth-child(3n+1){padding-left:calc(var(--om-bleed) + 26px)}
.om .eng:nth-child(3n){padding-right:calc(var(--om-bleed) + 26px)}
.om .eng{
    background:var(--fill);
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:30px 26px;
    gap:14px;
    align-items:flex-start;
    text-align:left;
}
/* Three hues cycled, the same warm/blue/slate the other band uses, at tint strength. */
.om .eng:nth-child(3n+1){--fill:#fdf2e2}
.om .eng:nth-child(3n+2){--fill:#eaf1f9}
.om .eng:nth-child(3n+3){--fill:#f1f3f5}
.om .eic{background:transparent;border-radius:0;flex:0 0 28px;height:28px}
.om .eic svg{width:26px;height:26px;stroke:#f9b233}
.om .eng b{color:#2e3033;font-size:16px;font-weight:700}
.om .eng p{color:#616b76;font-size:16px;line-height:22px;margin:6px 0 0}
.om .micro{color:#616a75;margin-top:16px}
/* Stacked layouts have no bleed to distribute. */
@media screen and (max-width:980px){
    .omgrid{grid-template-columns:repeat(2,1fr)}
    .om .eng:nth-child(3n+1){padding-left:26px}
    .om .eng:nth-child(3n){padding-right:26px}
    .om .eng:nth-child(2n+1){padding-left:calc(var(--om-bleed) + 26px)}
    .om .eng:nth-child(2n){padding-right:calc(var(--om-bleed) + 26px)}
}
@media screen and (max-width:680px){
    .omgrid{grid-template-columns:1fr}
    .om .eng{padding-left:calc(var(--om-bleed) + 26px) !important;padding-right:calc(var(--om-bleed) + 26px) !important}
}

/* ==========================================================================================
   Hand-written additions. Everything above this line is generated from the comp by
   comp-split.php and is overwritten on a re-run; everything below survives because the tool
   appends. Keep new rules here.
   ========================================================================================== */

/* --- The rotating last word in the h1 ------------------------------------------------------
   All three words are in the DOM and stacked in one grid cell, so the heading never reflows and
   the longest word sets the width. Each is shown for a third of a 9s cycle.

   The animation is a fade and a small rise -- not a slide or a typewriter -- because the word is
   part of a sentence a reader is in the middle of, and anything with travel pulls the eye off
   the words either side of it.
   ------------------------------------------------------------------------------------------- */
/* The rotator is its own centred line, not an inline box in the middle of one.
   
   Inline, it has to reserve the width of the longest phrase -- "New Loan Opportunity Mining" is
   676px at this size -- or the heading jumps sideways every three seconds. Reserved, the visible
   text is centred on a box far wider than itself, which is what pushed "Mortgage CRM + AI" left
   of the page centre. On its own line each word centres in the full width and neither problem
   exists. It also gives the longest phrase room to be read. */
/* The comp's .hero h1 sets no line-height, so it inherited the body's 1.6 -- 73.6px on a 46px
   heading. Invisible while the headline was one line; on two it opened a gap the size of a line
   of body copy between them. */
.hero-h1 { line-height: 1.12; }
.hero-h1 .flipword {
    display: grid;
    justify-items: center;
    text-align: center;
}

/* .is-sized is added by home.js when the longest phrase fits beside "Mortgage CRM +" on one
   line. It puts the rotator back inline and animates its width between the phrases' measured
   widths (--w0..--w3) on the same timeline as the fade, so the heading stays on one
   line, stays centred, and glides between widths instead of jumping.

   The widths come from JS because they depend on the copy, the font and the breakpoint. Writing
   them into this file means a copy edit silently breaks the centring.

   Without the class -- no JS, or a phrase too long for one line -- the block above stands: the
   rotator is its own centred line. Correct at every width, at the cost of a second line. */
.hero-h1 .flipword.is-sized {
    display: inline-grid;
    justify-items: start;
    vertical-align: bottom;
    /* NOT overflow:hidden. The cell is exactly as wide and as tall as the phrase in it, so
       clipping trimmed the right-hand bearing of the last letter and, during the cross-fade,
       cut the top and bottom off the word while it rose or fell through its 8px travel.
       
       Nothing needs clipping: the rotator is the last thing on the line, so a phrase that is
       briefly wider than the animated width simply extends to the right while it fades out. */
    overflow: visible;
    width: var(--w0, max-content);
    animation: bnt-flipwidth 12s ease-in-out infinite;
}
/* Four phrases at 3s each. Every percentage below is that count: a phrase holds for a quarter of
   the cycle and the width moves during the 0.3s the words cross-fade, so the two sets stay in
   step. Change the number of phrases in front-page.php and both sets have to be re-cut. */
@keyframes bnt-flipwidth {
    0%, 22.5%    { width: var(--w0); }
    25%, 47.5%   { width: var(--w1); }
    50%, 72.5%   { width: var(--w2); }
    75%, 97.5%   { width: var(--w3); }
    100%         { width: var(--w0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-h1 .flipword.is-sized { animation: none; width: var(--w0); }
}
.hero-h1 .flipword__w {
    grid-area: 1 / 1;
    /* The cell's width is animated, so a phrase wider than the current width would wrap inside
       it and push the heading to three lines mid-animation. It is one line, always; the cell
       clips it while the width catches up. */
    white-space: nowrap;
    color: var(--orange-d);
    opacity: 0;
    animation: bnt-flipword 12s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 3s);
}
/* On its own line the rotator has the whole width, so the longest phrase may wrap -- and on a
   phone it has to: held to one line it is 471px in a 334px heading, which widened the grid cell
   past the heading and centred every word on that instead of on the page. */
.hero-h1 .flipword:not(.is-sized) { grid-template-columns: minmax(0, 1fr); }
.hero-h1 .flipword:not(.is-sized) .flipword__w { white-space: normal; }
@keyframes bnt-flipword {
    0%            { opacity: 0; transform: translateY(8px); }
    3%, 22.5%     { opacity: 1; transform: translateY(0); }
    25.5%, 100%   { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    /* No cycling. The first word stands, and the rest are still in the heading for a screen
       reader and a crawler through the visually-hidden list beside it. */
    .hero-h1 .flipword__w { animation: none; opacity: 0; }
    .hero-h1 .flipword__w:first-child { opacity: 1; }
}

/* --- Hero proof: the site's own rating and logo components on a light field ------------------ */
/* margin-bottom, not just -top: it sets the gap under the logo strip as well, and because the
   peek artwork is absolutely positioned to the hero's bottom edge, growing the hero's content
   pushes the artwork down with it -- which is the only way to open that gap without re-cropping
   the drawing. */
.hero-proof { margin-top: 42px; margin-bottom: 34px; color: var(--navy); }
.hero-proof .om-rating {
    /* The rating renders as a <p>, so `.hero p { max-width: 770px; margin: 0 auto }` applies to
       it -- and `margin: 0` here replaced the auto sides, which pinned that 770px box to the
       container's left edge while its contents centred inside it. Hence a rating row sitting a
       couple of hundred pixels left of everything else. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px 8px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.4;
}
.hero-proof .om-rating strong { font-size: 16px; font-weight: 700; }
.hero-proof .om-stars { font-size: 17px; }
.hero-proof .om-rating__note { color: #616b76; }
/* The marks ship white-on-navy for the product heroes' dark field. On white they need inverting
   rather than recolouring -- they are images, not glyphs. */
.hero-proof .om-review-sites--logos { margin-top: 18px; }
.hero-proof .om-review-sites--logos img { filter: invert(1) grayscale(1) contrast(1.4); opacity: .62; }

/* The client logo marquee is the band between the hero and this section now, and it carries its
   own air, so the section keeps the standard .sec top. */
.oi-sec { padding-top: 56px; }

/* --- "Often imitated" stat cards -------------------------------------------------------------
   One sentence per card, no icon, square corners, and one dark solid per card.

   The four touch, with no gap and no container margin at either end, so they read as one line
   of cards. But only the OUTER two stretch: all four keep the width they had inside the 1064px
   content column, and the first and last carry the leftover viewport on their outside edge --
   which is why their text still starts where the column starts rather than at the screen edge.

   The columns are arithmetic rather than fractions so that stays true at any width: each card
   is a quarter of the content column, and the two end cards get the bleed added to them.
   `overflow-x: clip` on the section, so a viewport-width child cannot add a scrollbar of its
   own on top of the page's.
   ------------------------------------------------------------------------------------------- */
.oi-sec { overflow-x: clip; }
.oistats {
    --oi-col: calc(min(100vw, 1064px) / 4);
    --oi-bleed: max(0px, (100vw - 1064px) / 2);
    gap: 0;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    grid-template-columns:
        calc(var(--oi-col) + var(--oi-bleed))
        var(--oi-col)
        var(--oi-col)
        calc(var(--oi-col) + var(--oi-bleed));
}
/* The bleed is padding, not empty space: the text sits a card-padding in from the CONTENT edge,
   exactly where it sat before the band went full width. */
.oistat:first-child { padding-left: calc(var(--oi-bleed) + 40px); }
.oistat:last-child  { padding-right: calc(var(--oi-bleed) + 40px); }
/* Stacked layouts have no bleed to distribute -- the generated sheet drops to two columns at
   980px and one at 600px, and these put the arithmetic back to plain fractions. */
@media (max-width: 980px) {
    .oistats { grid-template-columns: repeat(2, 1fr); }
    .oistat:first-child { padding-left: 40px; }
    .oistat:last-child  { padding-right: 40px; }
}
@media (max-width: 600px) {
    .oistats { grid-template-columns: 1fr; }
}
.oistat {
    position: relative;
    /* border:0 undoes the generated `.oistat { border: 1px solid #e9ecf1 }` above -- otherwise
       the card wears that hairline OUTSIDE the edge below and the row gets two rims. */
    border: 0;
    /* The card's own background IS the 1px edge, and ::after paints the fill
       1px inside it. That is what gives the running light something to run along -- see below. */
    background: var(--edge);
    border-radius: 0;
    box-shadow: none;
    padding: 52px 40px;
    display: flex;
    /* Top, not centre: the four sentences run three and four lines, and centring them in
       equal-height cards started each card's first line at a different height. */
    align-items: flex-start;
    min-height: 250px;
    overflow: hidden;
}
/* Four steps of the system's own navy -- #012147 is the hub disc on the integration diagram,
   #032d60 the site navy, #183d6b the --navy2 the product pages use -- rather than a brown that
   belongs to no part of this site. Distinct enough to count four cards, close enough to stay one
   band. --edge is the 1px seam the running light rides; between two touching cards the two seams
   read as one hairline, which is the only thing separating them now. */
/* Stacked one per row, a card is as wide as the screen and holds two or three lines: the 250px
   floor that evens out a row of four left each one more than half empty. The sentence sets the
   height here, and the side padding drops to the page gutter so the text lines up with the copy
   above it. After .oistat and the first/last-child rules so it wins on order, not weight. */
@media (max-width: 600px) {
    .oistat,
    .oistat:first-child,
    .oistat:last-child { min-height: 0; padding: 30px 28px; }
}
.oistat:nth-child(1) { --fill: #012147; --edge: #10417c; }
.oistat:nth-child(2) { --fill: #032d60; --edge: #194c8a; }
.oistat:nth-child(3) { --fill: #0a3971; --edge: #215797; }
.oistat:nth-child(4) { --fill: #183d6b; --edge: #3b4c62; }

/* --- The running light ----------------------------------------------------------------------
   A light travels around each card's edge, continuously, one card after another.

   ::before is a square of conic gradient -- transparent for most of a turn, one short orange arc
   -- rotated by transform. ::after is the card's fill, inset by 1px, and covers all of it except
   that 1px rim. So the only part of the spinning gradient anyone sees is where it crosses the
   edge, which reads as a light running around the card.

   transform on a real element rather than an animated conic `from` angle: animating a gradient's
   angle needs @property to interpolate, and where that is unsupported the arc would sit still
   and the card would wear a permanent orange smear. A rotation is a rotation everywhere.

   The square is sized off the card's WIDTH (150%) so it stays square and still covers the
   corners of a 260x168 card. --i staggers the four so the lights chase each other round the row
   rather than marching in step.
   -------------------------------------------------------------------------------------------- */
.oistat::before,
.oistat::after {
    content: '';
    position: absolute;
    z-index: 0;
}
.oistat::before {
    top: 50%;
    left: 50%;
    width: 150%;
    aspect-ratio: 1;
    background: conic-gradient(transparent 0 58%, rgba(249,178,51,.25) 68%, #f9b233 76%, #f9b233 81%, rgba(249,178,51,.25) 88%, transparent 96%);
    animation: oi-chase 7s linear infinite;
    animation-delay: calc(var(--i, 0) * -1.75s);
}
.oistat::after {
    inset: 1px;
    background: var(--fill);
}
@keyframes oi-chase {
    from { transform: translate(-50%, -50%) rotate(0turn); }
    to   { transform: translate(-50%, -50%) rotate(1turn); }
}
/* The sentence is the only child, and both pseudo-elements are painted after it in the stacking
   order, so it needs a layer of its own to stay on top of the fill. */
.oistat p {
    position: relative;
    z-index: 1;
    font-size: 19px;
    line-height: 28px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}
/* Nothing runs for a reader who asked for stillness: the edge is then just the edge. */
@media (prefers-reduced-motion: reduce) {
    .oistat::before { display: none; }
}

/* The cards arrive one after another as the band scrolls in, and lift under the pointer.

   Armed by home.js (.is-armed), never here -- so a browser with no IntersectionObserver, or a
   reader who has asked for reduced motion, gets four cards that are simply present. The stagger
   is transition-delay keyed off each card's --i, which front-page.php sets; 80ms across four
   cards finishes in a quarter second, which reads as the row settling rather than as something
   to sit through. Same pattern as the engine cards on Opportunity Mining. */
.oistat::after { transition: filter .18s ease; }
/* No lift now that the cards touch: moving one would open a gap beside it. The fill lightens
   instead, which is what a band of solids can do without breaking its own line. */
.oistat:hover::after { filter: brightness(1.18); }
.oistats.is-armed .oistat {
    opacity: 0;
    transform: translateY(14px);
}
.oistats.is-armed.is-in .oistat {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1),
                box-shadow .18s ease;
    transition-delay: calc(var(--i, 0) * 80ms);
}

/* Room between the cards and the award badges that close the section: at their own spacing they
   were 34px apart, which read as one block. The band's own top padding goes, since this margin
   replaces it, and its white background is the section's already. */
.sec .oistats + .badgeband { margin-top: 56px; }
.oi-sec .badgeband { padding: 0 0 8px; background: transparent; }

/* The marquee as a standalone band: the air the badge band used to hold above this section. */
.logoband { padding-top: 64px; }

/* --- Buttons: the OM button, on a page that has no .om-page wrapper ------------------------- 
   design-om.css kills link underlines through `.om-page a`, and this page's body is not inside
   one -- so .om-btn arrived here underlined. The rest of the component works as-is.

   .om-btn--outline is drawn for the navy product hero: orange border, transparent fill, orange
   label. On this page's white and pale fields that reads as a warning rather than a secondary
   action, so it takes the navy outline the light sections need. */
/* The button's fill is set in theme.css now, for every page at once -- see the note there. */
.om-btn { text-decoration: none !important; }
/* design-om only declares the outline variant under `.om-hero-actions`, so on this page the
   modifier inherited the solid orange fill and the "secondary" button came out identical to the
   primary one. Declared in full here. */
.om-btn--outline {
    background: transparent !important;
    border: 1px solid var(--navy) !important;
    color: var(--navy) !important;
}
.om-btn--outline:hover { background: var(--navy) !important; color: #fff !important; }

/* --- "Often imitated" band ------------------------------------------------------------------
   No backdrop. Four were tried on this band -- translucent colour washes, outline rings, blurred
   blobs, and a timeline drawing in the CRM stages band's family -- and none of them was right,
   so it is plain white until somebody has a better idea. The four attempts and why each failed
   are in the git history for this file rather than listed here; the short version is that this
   band is mostly white cards and greyscale logos, and almost anything behind them either tints
   them or crosses the copy.
   ------------------------------------------------------------------------------------------- */

/* --- White Glove band -------------------------------------------------------------------------
   It was a flex row: the claim and the copy side by side on equal terms, wrapping at 380px. The
   copy column ended up around 560px on a 1120px container with a 15px body size, which is a
   narrow measure for a five-line paragraph, and the claim -- the one number the section sells --
   carried no more weight than the paragraph explaining it.

   A two-column grid instead, claim on the left in a card of its own, copy given the rest. The
   copy also goes up to 17px: 15px was the smallest body text on the page.
   --------------------------------------------------------------------------------------------- */
.wg .in {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    padding-top: 72px;
    padding-bottom: 72px;
}

.wgclaim {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: 36px 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px -28px rgba(21, 48, 76, .45);
}
.wgbig {
    position: relative;
    z-index: 1;
    margin: 0;
    text-align: center;
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
    /* Not --orange-d: #dd8210 on white measures 2.89:1, and large text needs 3. A shade darker
       clears it at 3.21. The token is left alone because it is correct on the pale and tinted
       fields it was picked for; this is the one place it sits on plain white at display size. */
    color: #d17b0e;
    white-space: nowrap;
}
.wgbig__unit { display: block; margin-top: 10px; font-size: 22px; letter-spacing: -.01em; }
.wgbig small {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mut);
}

/* The rings. Three circles expanding out from behind the number on a 6s cycle, a third of a
   cycle apart, so one is always on its way out and the card never sits still for long. Slow and
   faint on purpose: it is a claim, not an alert. */
/* 230px, not 150. At 150 the smallest ring passed straight through the number, and an orange
   stroke behind orange type measured 2.08:1 -- the ring has to clear the text block, not cross
   it. 230 encloses the widest line ("IN YOUR FIRST 90 DAYS") with room to spare. The card clips
   the largest ring, which is what keeps this inside the card rather than spilling onto the band. */
.wgclaim { overflow: hidden; }
.wgclaim__rings,
.wgclaim__rings span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 230px;
    height: 230px;
    margin: -115px 0 0 -115px;
    border-radius: 50%;
    pointer-events: none;
}
.wgclaim__rings span {
    top: 0;
    left: 0;
    margin: 0;
    border: 2px solid var(--orange);
    opacity: 0;
    animation: wg-ring 6s ease-out infinite;
}
.wgclaim__rings span:nth-child(2) { animation-delay: 2s; }
.wgclaim__rings span:nth-child(3) { animation-delay: 4s; }
@keyframes wg-ring {
    0%   { transform: scale(.95); opacity: 0; }
    12%  { opacity: .42; }
    70%  { transform: scale(2); opacity: 0; }
    100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    /* Parked as one static ring, so the card still has the mark rather than losing it. */
    .wgclaim__rings span { animation: none; opacity: .3; transform: scale(1.05); }
    .wgclaim__rings span:nth-child(2),
    .wgclaim__rings span:nth-child(3) { display: none; }
}

.wgcopy h2 { margin-bottom: 12px; }
/* 16px/26px, the site's body size -- 17 was a size of its own, larger than the regular text
   everywhere else. The original 15px was the other way: the smallest body text on the page. */
.wgcopy p { color: #4a5464; font-size: 16px; line-height: 26px; margin: 0 0 20px; }

.wgq {
    margin: 0 0 22px;
    padding: 16px 20px;
    border: 0;
    border-left: 3px solid var(--orange);
    border-radius: 0 12px 12px 0;
    background: #fff;
    box-shadow: 0 10px 26px -22px rgba(21, 48, 76, .5);
}
.wgq p { margin: 0 0 6px; font-size: 15.5px; line-height: 1.5; color: #3d4653; }
.wgq cite { font-style: normal; font-size: 13px; color: var(--mut); }

@media screen and (max-width: 880px) {
    .wg .in { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 48px; padding-bottom: 48px; }
    .wgclaim { min-height: 200px; }
    .wgbig { font-size: 44px; }
}

/* --- Hero peek ---------------------------------------------------------------------------------
   The same device as the CRM hero: abstract product panels rising out of the foot of the hero,
   cut in half by the section's own overflow rather than by a mask, so the crop is exactly the
   section boundary. The hero owns both the positioning context and the clip.

   Values are inverted from the CRM's. That one is drawn in white at low alpha for a navy field;
   this hero is near-white, so everything here is dark at low alpha instead. The one warm element
   -- the trend line and its dots -- stays orange on both.

   Never interactive, and nothing here carries information.
   --------------------------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero-peek {
    position: absolute;
    left: 50%;
    bottom: 0;
    /* 46% of the artwork sits below the hero's edge -- the "half cut off" crop. */
    transform: translate(-50%, 46%);
    width: min(1100px, 94%);
    height: auto;
    opacity: .55;
    pointer-events: none;
}
.hero-peek__panel > rect:first-child {
    fill: rgba(255, 255, 255, .72);
    stroke: rgba(21, 48, 76, .10);
    stroke-width: 1.5;
}
.hero-peek__row {
    fill: rgba(21, 48, 76, .022);
    stroke: rgba(21, 48, 76, .07);
}
.hero-peek__title { fill: rgba(21, 48, 76, .16); }
.hero-peek__bar   { fill: rgba(21, 48, 76, .11); }
.hero-peek__dot   { fill: var(--orange); }
.hero-peek__ring  { fill: none; stroke: var(--orange); stroke-width: 2; }
.hero-peek__col      { fill: rgba(21, 48, 76, .09); }
.hero-peek__col--on  { fill: var(--orange); }
.hero-peek__area     { fill: url(#hero-peek-area); }
.hero-peek__line {
    fill: none;
    stroke: var(--orange);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Room for the visible upper half: the artwork is 320 tall in a 1100-wide box, so roughly 173px
   shows at full width. Padding rather than a height, so the hero still grows with its copy. */
@media (min-width: 768px) {
    .hero { padding-bottom: 200px; }
}
/* Below 768 three panels across a phone would be illegible smudges, so the artwork is scaled to
   a fixed width and centred -- which crops it to the middle chart panel, the same treatment the
   CRM hero uses. */
@media (max-width: 767px) {
    .hero-peek { width: 980px; max-width: none; }
    .hero { padding-bottom: 150px; }
}

/* The mobile marquee for the review logos lives in design-om-extras.css scoped to `.om-page`,
   and this page's body is not inside one -- so below 768px the homepage rendered both runs of
   the strip stacked and wrapped, ten marks on four lines. Same rules, same timing, scoped to the
   hero instead. The desktop rule that hides the duplicate run is not scoped that way, which is
   why the wide layout was already correct. */
@media (max-width: 767px) {
    .hero-proof .om-review-strip {
        width: 100%;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }
    .hero-proof .om-review-sites--logos {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: max-content;
        max-width: none;
        gap: 0;
        animation: om-review-slide 28s linear infinite;
    }
    .hero-proof .om-review-sites--logos li { margin-right: 34px; }
    .hero-proof .om-review-sites--logos .om-review-sites__dup { display: flex; }
}