/* Home hero, 7 Oct 2026 (owner: "implement this hero, with same blue background, only hero with compare card").
   The blue panel, headline, description and buttons come from hero.css. Under them sits the drag-to-compare card
   (hero v5, 2 Oct): one case window, today's process left of the line and Mortgage Rail right of it.
   Also here, because they belong to this hero only: the navbar is see-through while it is over the blue
   (owner: "remove the white background … make the navbar transparent to hero section") and the dot pattern is gone
   (owner: "remove dot pattern in hero"). Loaded by index.html only, after screens.css. Behaviour: hero-compare.js. */

/* ---------- the product window and its stage (hero round 4 layout, unchanged) ---------- */
/* Overview hero, round 4 (owner 1 Oct: the hero must match the product animations and the site's visual language).
   Same anatomy as the part-page heroes: a tinted stage with one product window (screens.css .app), its motion from
   motion.css / motion.js. The pop message sits in a band above the window (as on the affordability hero), so it never
   covers the window; at rest it shows the last beat. Only layout lives here (mrh-); every visual piece is an existing class. */
.mrh-stage{position:relative;margin-top:72px;background:var(--glu-w);border-radius:28px;padding:104px 40px 40px}
.mrh-stage>.mx-toast{top:22px;right:40px;width:min(380px,calc(100% - 80px))}
.mx-toast[data-st=t4]>[data-v=t4]{display:flex;animation:mx-swap .45s var(--e-out)}
.mrh-app{border-radius:14px}
.app.roomy{font-size:14px;padding:28px 32px 32px;gap:20px}
.app.roomy .ap-h{gap:10px 12px}
.app.roomy .ap-h .ttl{font-size:22px}
.app.roomy .ap-sub{font-size:13.5px;margin-top:-12px}
.app.roomy .ap-pill{height:26px;padding:0 11px;font-size:12.5px}
.app.roomy .ap-btn{height:36px;padding:0 15px;font-size:13px;border-radius:9px}
.app.roomy .ap-btn .ic{width:15px;height:15px}
.app.roomy .ap-card{padding:16px 18px;gap:12px;border-radius:12px}
.app.roomy .ap-card .hd{font-size:15px;gap:10px}
.app.roomy .ap-steps{padding:6px 0 2px}
.app.roomy .ap-st{font-size:13px;gap:10px}
.app.roomy .ap-st .c{width:46px;height:46px;box-shadow:0 0 0 4px var(--a-soft)}
.app.roomy .ap-st .c .ic{width:20px;height:20px}
.app.roomy .ap-steps .ln{top:23px}
.app.roomy .ap-legend{font-size:12.5px;font-weight:400}
.ap-pill.mx-sw[data-st=blu]{background:#E7F1FB;color:#1C6FB0}
.ap-pill.mx-sw[data-st=gry]{background:#EEF0F3;color:#4B5260}
.mrh-ptys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.mrh-pty{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:10px;background:#fff;border:1px solid var(--a-line);min-width:0}
.mrh-pty .t3{margin-top:1px}
.mrh-pn{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12.5px;color:#6B7280}
.mrh-pn b{font-size:13.5px;color:#1D2330;font-weight:600}
.mrh-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px}
.mrh-f{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;padding:10px 12px}
.mrh-f b{font-weight:600}
.mrh-a{grid-template-columns:22px minmax(0,1fr) auto;align-items:start;padding:12px}
.mrh-at{display:flex;flex-direction:column;gap:2px;min-width:0}
.mrh-at b{font-weight:600;font-size:13.5px}
.mrh-a .ap-chips{justify-content:flex-end}
@container (max-width:980px){.mrh-ptys{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:760px){.mrh-cols{grid-template-columns:minmax(0,1fr)}}
@container (max-width:600px){
  .app.roomy{padding:16px;gap:14px}
  .app.roomy .ap-h .ttl{font-size:18px}
  .mrh-ptys{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .app.roomy .ap-card{padding:12px}
  .mrh-pty{padding:9px 7px;gap:6px;align-items:center}.mrh-pn>span{display:none}.mrh-pn b{font-size:12.5px}
  .mrh-app .ap-card .hd .ap-lab{display:none}
  .mrh-a{grid-template-columns:22px minmax(0,1fr)}.mrh-a .ap-chips{grid-column:2;justify-content:flex-start}
  .mrh-f{grid-template-columns:minmax(0,1fr) auto;padding:9px 10px}.mrh-f .mut{display:none}
  .app.roomy .ap-st{font-size:0;gap:0}
  .app.roomy .ap-st .c{width:34px;height:34px;box-shadow:0 0 0 3px var(--a-soft)}
  .app.roomy .ap-st .c .ic{width:16px;height:16px}
  .app.roomy .ap-steps .ln{top:17px}
  .mrh-app .ap-legend{display:none}
}
@media (max-width:1099px){.mrh-stage{margin-top:56px;padding:100px 28px 28px}.mrh-stage>.mx-toast{right:28px}}
@media (max-width:767px){.mrh-stage{margin-top:40px;padding:112px 12px 12px;border-radius:22px}.mrh-stage>.mx-toast{top:12px;right:12px;left:12px;width:auto}}
@media (prefers-reduced-motion:reduce){.mrh-stage{padding-top:40px}}

/* ---------- drag to compare (hero v5, unchanged) ---------- */
/* Drag to compare (owner 2 Oct): one case window, and every panel in it holds two versions in the same place, today's
   process and Mortgage Rail. One line (--x, from the stage's left edge) shows today to its left and Mortgage Rail to its
   right, so both sides always line up, at every width and while the scenes play. Drag it (mouse or touch), use the arrow
   keys, or send it to either side with the two buttons. */
@property --cmp-x{syntax:'<length>';inherits:true;initial-value:0px}
.cmp-wrap{margin-top:72px}
.cmp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cmp-tag{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair);font:600 13.5px/1 var(--body);color:var(--ink);cursor:pointer;transition:background .2s}
.cmp-tag i{width:9px;height:9px;border-radius:9px;flex:none}
.d-today{background:#C8322B}.d-rail{background:var(--glu)}
@media (hover:hover){.cmp-tag:not([aria-pressed=true]):hover{background:var(--panel)}}
.cmp-tag:focus-visible{outline:3px solid var(--glu);outline-offset:2px}
.cmp-tag .sm{display:none}
.cmp-tag[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.cmp-hint{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--body);color:var(--ink3)}
.cmp-hint .ic{width:15px;height:15px}
.mrh-stage.cmp{margin:0;overflow:hidden;background:linear-gradient(90deg,#ECEEF1 0,#ECEEF1 var(--cmp-x),var(--glu-w) var(--cmp-x),var(--glu-w) 100%);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.cmp.glide{transition:--cmp-x .7s var(--e-io)}
.lay{position:absolute;inset:0;pointer-events:none;z-index:6}
.lay-t{clip-path:inset(0 calc(100% - var(--cmp-x)) 0 0)}
.lay-r{clip-path:inset(0 0 0 var(--cmp-x))}
.lay>.mx-toast{top:22px;width:min(380px,calc(100% - 80px))}
.lay-t>.mx-toast{left:40px;right:auto;transform-origin:top left}
.lay-r>.mx-toast{right:40px}
.pr{display:grid;min-width:0}
.pr>*{grid-area:1/1;min-width:0}
.pr-t{clip-path:inset(-80px max(0px,calc(100% - var(--cmp-x) + var(--cmp-l,0px))) -80px -80px)}
.pr-r{clip-path:inset(-80px -80px -80px max(0px,calc(var(--cmp-x) - var(--cmp-l,0px))))}
.mrh-r{margin-left:auto}
.mrh-app .ap-st .c .bdg.amb{color:var(--a-amb)}
.mrh-app .ap-tbl>.pr+.pr{border-top:1px solid var(--a-line)}
.mrh-app .pr>.ap-tr{border-top:0}
.mrh-abody{display:flex;flex-direction:column;gap:0}
.pr-t.mrh-abody{display:grid}
.pr-t.mrh-abody>*{grid-area:1/1;min-width:0}
.mrh-late{align-self:start}
.mrh-abody>.fx-gone>div{display:flex}
.mrh-where{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px;font-size:13.5px;color:#4B5260}
.mrh-where b{color:#1D2330;font-weight:600}
.mrh-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:16px 14px;border-radius:10px;background:#fff;border:1px dashed #D5D9E0;font-size:13px;color:#6B7280}
.mrh-empty .ic{width:18px;height:18px;color:#9AA1AC}
.mrh-late:not(:has(.fx-open.on)){border-color:transparent}
.mrh-late>.fx-open+.fx-open>.ap-tr{border-top:1px solid var(--a-line)}
.ap-pill.mx-sw[data-st=w1],.ap-pill.mx-sw[data-st=w6]{background:#EEF0F3;color:#4B5260}
.ap-pill.mx-sw[data-st=w10]{background:var(--a-amb-t);color:#8F4E10}
.mx-sw[data-st=w1]>[data-v=w1],.mx-sw[data-st=w6]>[data-v=w6],.mx-sw[data-st=w10]>[data-v=w10]{display:inline-flex;align-items:center;gap:4px}
.cmp-bar{position:absolute;top:0;bottom:0;left:var(--cmp-x);width:0;z-index:20;outline:none}
.cmp-bar::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.08),0 0 22px rgba(10,20,40,.22)}
.cmp-knob{--kh:26px;position:absolute;left:calc(-1*var(--kh) + max(0px,var(--kh) + 8px - var(--cmp-x)) - max(0px,var(--cmp-x) - var(--cmp-w,9999px) + var(--kh) + 8px));top:clamp(120px,34%,440px);width:calc(2*var(--kh));height:calc(2*var(--kh));border-radius:99px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(17,17,17,.08),0 12px 28px -10px rgba(10,20,40,.45);transition:transform .2s var(--e-out)}
.cmp-knob .ic{width:16px;height:16px;stroke-width:2.2}
.cmp-bar:focus-visible .cmp-knob{outline:3px solid var(--glu);outline-offset:3px}
.cmp.dragging .cmp-knob{transform:scale(1.08)}
@media (max-width:1099px){.cmp-wrap{margin-top:56px}.lay-t>.mx-toast{left:28px}.lay-r>.mx-toast{right:28px}}
@media (max-width:767px){
  .cmp-wrap{margin-top:40px}
  .cmp-hint{display:none}
  .cmp-tag{height:36px;padding:0 12px;font-size:12.5px}
  .lay-t>.mx-toast,.lay-r>.mx-toast{left:12px;right:12px;top:12px;width:auto}
  .cmp-knob{--kh:22px}
  .cmp-tag .lg{display:none}.cmp-tag .sm{display:inline}
}

/* ---------- on the blue panel ---------- */
.wow-panel .cmp-wrap{position:relative;z-index:2;max-width:1280px;margin:64px auto 0;text-align:left;color:var(--ink)}
.wow-panel .cmp-hint{color:rgba(255,255,255,.86)}
.wow-panel .mrh-stage.cmp{box-shadow:0 30px 60px -30px rgba(4,30,60,.55)}
@media (max-width:1099px){.wow-panel .cmp-wrap{margin-top:48px}}
@media (max-width:767px){.wow-panel .cmp-wrap{margin-top:36px}}

/* ---------- navbar over the hero ----------
   The header takes no room, so the blue starts at the top of the page and the bar floats on it. At the top of the hero
   the bar has no fill, border or shadow and its text is white, and it stays that way while a menu is open or hovered
   (owner, 7 Oct: no white border round the bar in the hero). hero-compare.js adds .nav-solid when the bar comes back
   on scroll up: then it is the white round bar. */
/* "body" in front so this holds whichever of this file and nav/nav.css loads last (stamp-nav.py moves nav.css to the end) */
body header.nav.nav3{display:flow-root;margin-bottom:calc(-1 * var(--n3-h))}
.wow-panel{padding-top:calc(80px + 88px)}
header.nav.nav3 .n3-bar{transition:background-color .25s ease-out,border-color .25s ease-out,box-shadow .25s ease-out}
header.nav.nav3.nav-over:not(.nav-solid){--n3-bar-ink:#FFFFFF;--n3-muted:rgba(255,255,255,.78);--n3-hover:rgba(255,255,255,.16)}
header.nav.nav3.nav-over:not(.nav-solid) .n3-bar{background:transparent;border-color:transparent;box-shadow:none}
header.nav.nav3.nav-over:not(.nav-solid) .n3-word{color:#FFFFFF}
header.nav.nav3.nav-over:not(.nav-solid) .n3-tag{color:rgba(255,255,255,.85)}
header.nav.nav3.nav-over:not(.nav-solid) .n3-cta{background:#FFFFFF;color:#111111}
header.nav.nav3.nav-over:not(.nav-solid) .n3-burger{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)}
/* tablet and phone swap the lockup for the blue logo image, which cannot be read on the blue: keep the live lockup there */
header.nav.nav3.nav-over:not(.nav-solid) .n3-lockup{display:flex}
header.nav.nav3.nav-over:not(.nav-solid) .n3-logo-img{display:none}
@media (hover:hover){header.nav.nav3.nav-over:not(.nav-solid) .n3-cta:hover{background:#E6F1FB}}
@media (max-width:1199px){.wow-panel{padding-top:calc(72px + 82px)}}
@media (max-width:809px){.wow-panel{padding-top:calc(56px + 72px)}}
@media (prefers-reduced-motion:reduce){header.nav.nav3 .n3-bar{transition:none}}

/* ---------- hero heading (owner, 7 Oct): the heading itself says what Mortgage Rail is, who it is for and what it
   fixes, in three or four lines, so it is set smaller than a two-line slogan. There is no description under it. ---------- */
.wow-panel .wow-h1{max-width:21.5em;margin-inline:auto;font-size:clamp(25px,3.35vw,48px);line-height:1.14;letter-spacing:-.032em;font-weight:500;text-wrap:balance}
.wow-panel .wow-ctas{margin-top:36px}
@media (max-width:767px){.wow-panel .wow-h1{letter-spacing:-.025em;line-height:1.18}.wow-panel .wow-ctas{margin-top:28px}}

/* Hero v8 (8 Oct 2026, D-196): from wireframe v8. A full blue panel with four slow blobs of one blue family and a little grain;
   a small line on top, the heading bottom left with its second half quieter, two buttons, client logos bottom right. */
.wow.h8 .wow-panel{background:#1F6FB8;text-align:left;min-height:100dvh;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-inline:var(--gut);padding-bottom:clamp(32px,4.4vw,64px);border-radius:0}
.wow.h8 .wow-panel::before,.wow.h8 .wow-panel::after{display:none}
.h8-blobs{position:absolute;inset:-20%;z-index:-2;filter:blur(96px)}.h8-blobs i{position:absolute;border-radius:50%;will-change:transform}
.h8-blobs i:nth-child(1){left:2%;top:8%;width:46%;height:60%;background:#3A9BE2;animation:h8a 34s ease-in-out infinite alternate}
.h8-blobs i:nth-child(2){left:44%;top:-6%;width:44%;height:56%;background:#1A66AE;animation:h8b 42s ease-in-out infinite alternate}
.h8-blobs i:nth-child(3){left:54%;top:42%;width:42%;height:58%;background:#2B8FD9;animation:h8c 38s ease-in-out infinite alternate}
.h8-blobs i:nth-child(4){left:10%;top:52%;width:40%;height:50%;background:#2378C3;animation:h8d 46s ease-in-out infinite alternate}
@keyframes h8a{to{transform:translate(22%,14%) scale(1.18)}}@keyframes h8b{to{transform:translate(-26%,22%) scale(.86)}}@keyframes h8c{to{transform:translate(-18%,-24%) scale(1.22)}}@keyframes h8d{to{transform:translate(30%,-12%) scale(1.08)}}
.h8-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.h8-meta,.h8-foot{width:100%;max-width:1120px;margin-inline:auto}
.h8-meta{display:flex;justify-content:space-between;gap:16px;margin-block:0;font:500 15px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.02em;color:rgba(255,255,255,.76)}
.wow.h8 .wow-panel .wow-h1{max-width:20em;margin:0;font-size:clamp(30px,3.9vw,56px);line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
.wow.h8 .wow-h1 span{color:rgba(255,255,255,.68)}
.h8-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px;flex-wrap:wrap;margin-top:32px}
.wow.h8 .wow-panel .wow-ctas{margin-top:0;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.h8-firms p{margin:0 0 12px;font-size:14px;line-height:1.3;color:rgba(255,255,255,.76)}
.h8-firms div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:min(100%,560px)}
.h8-firms span{display:grid;place-items:center;height:52px;padding:8px 12px;border-radius:8px;background:#fff}
.h8-firms img{max-width:100%;max-height:100%;object-fit:contain;display:block}
@media (max-width:767px){.wow.h8 .wow-panel{min-height:88dvh}.h8-meta span:first-child{display:none}.h8-firms{width:100%}.h8-firms div{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}}
@media (prefers-reduced-motion:reduce){.h8-blobs i{animation:none}}
.h8-meta,.h8-foot{max-width:1140px}
.wow.h8 .wow-panel .wow-h1{max-width:none;width:min(100%,17.2em);text-wrap:pretty}
@media (min-width:1000px){.h8-row{flex-wrap:nowrap}.h8-firms{flex:none;width:520px}.h8-firms div{width:100%}}
.wow.h8 .wow-h1 span{display:inline}
.wow.h8 .wow-panel{justify-content:flex-end}

/* 8 Oct: title left, buttons right on one bottom line; logos in a strip straight under the hero; hero + strip = one screen */
.wow.h8{margin-bottom:0}
.wow.h8 .wow-panel{min-height:calc(100dvh - 120px);padding-top:120px}
.h8-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px}
.wow.h8 .wow-panel .wow-h1{width:auto;flex:1 1 0;max-width:15.5em}
.wow.h8 .wow-panel .wow-ctas{flex:none;justify-content:flex-end;margin:0 0 8px}
.h8-strip{height:120px;display:flex;align-items:center;padding-inline:var(--gut);margin-bottom:136px;border-bottom:1px solid rgba(17,17,17,.08)}
.h8-strip .h8-firms{width:100%;max-width:1140px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex:auto}
.h8-strip .h8-firms p{margin:0;color:#5b6570;font-size:15px}
.h8-strip .h8-firms div{width:min(100%,720px);gap:8px}
.h8-strip .h8-firms span{height:64px;box-shadow:inset 0 0 0 1px rgba(17,17,17,.1);border-radius:12px}
@media (max-width:1099px){.h8-strip{margin-bottom:112px}}
@media (max-width:899px){.h8-foot{flex-direction:column;align-items:flex-start}.wow.h8 .wow-panel .wow-ctas{justify-content:flex-start;margin:0}.wow.h8 .wow-panel .wow-h1{flex:none}}
@media (max-width:767px){.wow.h8 .wow-panel{min-height:calc(100dvh - 148px);padding-top:104px}.h8-strip{height:148px;margin-bottom:88px}.h8-strip .h8-firms{flex-direction:column;align-items:flex-start;gap:8px}.h8-strip .h8-firms div{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%}.h8-strip .h8-firms span{height:48px;padding:6px;border-radius:8px}}
/* 8 Oct: logos a size down */
.h8-strip .h8-firms div{width:min(100%,560px)}
.h8-strip .h8-firms span{height:52px;padding:12px 18px}
@media (max-width:767px){.h8-strip .h8-firms div{width:100%}.h8-strip .h8-firms span{height:44px;padding:9px 8px}}
/* 8 Oct (D-197): title centred in the panel, the two buttons centred under it.
   Phone: buttons side by side; under 360 px they no longer fit, so they stack at one equal width. */
.wow.h8 .wow-panel{justify-content:center;padding-bottom:0}
.h8-foot{flex-direction:column;align-items:center;text-align:center;gap:32px}
.wow.h8 .wow-panel .wow-h1{flex:none;max-width:17em;text-wrap:balance}
.wow.h8 .wow-panel .wow-ctas{justify-content:center;margin:0}
@media (max-width:899px){.h8-foot{align-items:center}.wow.h8 .wow-panel .wow-ctas{justify-content:center}}
@media (max-width:519px){.h8-foot{gap:28px}.wow.h8 .wow-panel .wow-ctas{flex-wrap:nowrap;gap:8px;width:100%}.wow.h8 .wow-btn{height:48px;padding:0 14px;font-size:14px;flex:0 1 auto;justify-content:center}}
@media (max-width:359px){.wow.h8 .wow-panel .wow-ctas{flex-direction:column;align-items:stretch}.wow.h8 .wow-btn{width:100%}}
/* 8 Oct: the blobs read as soft shapes that drift and change outline; a little more grain.
   Same four blues. Less blur so the shapes show, shorter loops so the movement is noticed. */
.h8-blobs{inset:-10%;filter:blur(56px)}
.h8-blobs i{opacity:.9}
.h8-blobs i:nth-child(1){left:-4%;top:2%;width:44%;height:62%;border-radius:58% 42% 63% 37%/45% 58% 42% 55%;animation:h8m1 19s ease-in-out infinite alternate}
.h8-blobs i:nth-child(2){left:46%;top:-12%;width:42%;height:60%;border-radius:40% 60% 35% 65%/60% 38% 62% 40%;animation:h8m2 23s ease-in-out infinite alternate}
.h8-blobs i:nth-child(3){left:56%;top:44%;width:40%;height:58%;border-radius:63% 37% 54% 46%/38% 60% 40% 62%;animation:h8m3 21s ease-in-out infinite alternate}
.h8-blobs i:nth-child(4){left:12%;top:54%;width:38%;height:50%;border-radius:45% 55% 38% 62%/57% 43% 57% 43%;animation:h8m4 26s ease-in-out infinite alternate}
@keyframes h8m1{50%{border-radius:38% 62% 44% 56%/60% 40% 60% 40%}to{transform:translate(34%,22%) rotate(40deg) scale(1.2);border-radius:60% 40% 36% 64%/42% 62% 38% 58%}}
@keyframes h8m2{50%{border-radius:62% 38% 58% 42%/40% 62% 38% 60%}to{transform:translate(-38%,30%) rotate(-50deg) scale(.82);border-radius:36% 64% 60% 40%/58% 36% 64% 42%}}
@keyframes h8m3{50%{border-radius:42% 58% 36% 64%/62% 42% 58% 38%}to{transform:translate(-30%,-34%) rotate(60deg) scale(1.25);border-radius:55% 45% 62% 38%/40% 56% 44% 60%}}
@keyframes h8m4{50%{border-radius:60% 40% 62% 38%/38% 60% 40% 62%}to{transform:translate(44%,-20%) rotate(-35deg) scale(1.1);border-radius:40% 60% 44% 56%/62% 40% 60% 38%}}
.h8-grain{opacity:.34}
@media (prefers-reduced-motion:reduce){.h8-blobs i{animation:none}}
/* 8 Oct: contrast. The two lightest blues are a step darker and the quiet half of the heading is white at 86%,
   so the heading keeps at least 3:1 on every part of the moving gradient (large text). */
.h8-blobs i:nth-child(1){background:#2A86D0}
.h8-blobs i:nth-child(3){background:#267FC9}
.wow.h8 .wow-h1 span{color:rgba(255,255,255,.86)}

/* 8 Oct: over the blue hero the real logo sits on a white chip (its blue and brown cannot be read on blue, and it is not recoloured) */
header.nav.nav3 .n3-logo{transition:background-color .25s ease-out,padding .25s ease-out}
header.nav.nav3.nav-over:not(.nav-solid) .n3-logo{background:#fff;border-radius:999px;padding:11px 18px}
@media (max-width:809px){header.nav.nav3.nav-over:not(.nav-solid) .n3-logo{padding:9px 14px}}

/* 8 Oct (owner): the two hero buttons are quiet, so the eye is not pulled between them and the white logo and "Book a demo" in the bar.
   First button: a soft see-through fill. Second: a plain text link with an arrow. Neither is a white block. */
.wow.h8 .wow-btn{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);font-weight:500;height:48px;padding:0 22px}
.wow.h8 .wow-btn.wow-btn-ghost{background:transparent;box-shadow:none;padding:0 12px}
.wow.h8 .wow-btn.wow-btn-ghost::after{content:"→";margin-left:-2px;transition:translate .2s cubic-bezier(.2,0,0,1)}
@media (hover:hover){.wow.h8 .wow-btn:hover{background:rgba(255,255,255,.22);transform:none}.wow.h8 .wow-btn.wow-btn-ghost:hover{background:transparent}.wow.h8 .wow-btn.wow-btn-ghost:hover::after{translate:3px 0}}

/* 8 Oct, later (owner): over the hero the whole bar is one see-through pill; only "Book a demo" is a white block.
   Both hero buttons are plain text links with an arrow. The logo keeps a white chip so its blue and brown stay readable. */
header.nav.nav3.nav-over:not(.nav-solid) .n3-bar{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);box-shadow:none}
header.nav.nav3.nav-over:not(.nav-solid) .n3-logo{padding:8px 14px;margin-left:-14px}
.wow.h8 .wow-btn,.wow.h8 .wow-btn.wow-btn-ghost{background:transparent;box-shadow:none;padding:0 12px;font-weight:500}
.wow.h8 .wow-btn::after{content:"→";margin-left:-2px;transition:translate .2s cubic-bezier(.2,0,0,1)}
@media (hover:hover){.wow.h8 .wow-btn:hover{background:transparent}.wow.h8 .wow-btn:hover::after{translate:3px 0}}
.wow.h8 .wow-panel .wow-ctas{gap:20px}

/* 8 Oct, later (owner): no white chip behind the logo over the hero. So that it can still be read on blue, the real logo is
   shown in plain white there (a CSS filter on the same file, not a new asset); its colours return with the white bar. */
header.nav.nav3.nav-over:not(.nav-solid) .n3-logo{background:transparent;padding:0;margin-left:0}
/* owner, later: the logo keeps its real colours over the hero too (no white version, no chip) */

/* 8 Oct, later (owner): over the hero "Book a demo" is a deeper blue button (the page blue would vanish on the blue hero);
   "See the problem" is the white button, "See how a sale runs" the tinted one. */
header.nav.nav3.nav-over:not(.nav-solid) .n3-cta{background:#124C86;color:#fff}
@media (hover:hover){header.nav.nav3.nav-over:not(.nav-solid) .n3-cta:hover{background:#0E3F70}}
.wow.h8 .wow-btn{background:#fff;color:#111;box-shadow:none;padding:0 24px;font-weight:600}
.wow.h8 .wow-btn.wow-btn-ghost{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);font-weight:500}
.wow.h8 .wow-btn::after,.wow.h8 .wow-btn.wow-btn-ghost::after{content:none}
.wow.h8 .wow-panel .wow-ctas{gap:10px}
@media (hover:hover){.wow.h8 .wow-btn:hover{background:#EAF2FA}.wow.h8 .wow-btn.wow-btn-ghost:hover{background:rgba(255,255,255,.22)}}

/* 8 Oct (owner): the client logos run as a slow ticker. The five tiles are repeated once so the loop has no gap; it pauses
   under the pointer or keyboard focus and stands still with reduced motion. Each logo keeps its own shape inside its tile. */
.h8-strip .h8-firms .h8-tick{display:block;flex:1 1 auto;min-width:0;width:auto;max-width:640px;overflow:hidden;gap:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.h8-strip .h8-firms .h8-track{display:flex;gap:8px;width:max-content;animation:h8tick 30s linear infinite}
.h8-strip .h8-firms .h8-track span:not(.h8-dup){flex:none;width:136px;height:52px;padding:12px 18px;display:grid;place-items:center;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(17,17,17,.1)}
.h8-strip .h8-firms .h8-track img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;display:block}
.h8-strip .h8-firms .h8-tick:hover .h8-track,.h8-strip .h8-firms .h8-tick:focus-within .h8-track{animation-play-state:paused}
@keyframes h8tick{to{translate:calc(-50% - 4px) 0}}
@media (max-width:767px){.h8-strip .h8-firms .h8-tick{max-width:none;width:100%}.h8-strip .h8-firms .h8-track span:not(.h8-dup){width:112px;height:44px;padding:9px 12px}}
@media (prefers-reduced-motion:reduce){.h8-strip .h8-firms .h8-track{animation:none;flex-wrap:wrap;width:auto}.h8-strip .h8-firms .h8-track .h8-d{display:none}.h8-strip .h8-firms .h8-tick{-webkit-mask-image:none;mask-image:none}}
.h8-strip .h8-firms .h8-track img{max-height:28px;max-width:100px}
@media (max-width:767px){.h8-strip .h8-firms .h8-track img{max-height:26px;max-width:88px}}
/* 8 Oct (owner): the whole hero title is one white; the lighter second half is gone */
.wow.h8 .wow-panel .wow-h1 span{color:#fff}

/* 14 client logos now (nine more from the live Dynamatix site): a longer loop at the same pace */
.h8-strip .h8-firms .h8-track{animation-duration:84s}

/* 8 Oct, later (owner): the bar is no longer laid over the hero. It sits above it on the white page, blended in at the top
   (no pill, no border), exactly as on the part pages, so the logo is in its real colours on white. The blue hero starts under it
   as a rounded panel on the page margins, like the blue closing panel. The earlier over-the-hero rules are kept but switched
   off (they need a .nav-over class that nothing sets). */
body header.nav.nav3{margin-bottom:0}
header.nav.nav3 .n3-bar{transition:background-color .25s ease-out,border-color .25s ease-out,box-shadow .25s ease-out}
header.nav.nav3:not(.nav-solid):not(.n3-has-open) .n3-bar{background:transparent;border-color:transparent;box-shadow:none}
.wow.h8{padding-inline:var(--gut)}
.wow.h8 .wow-panel{border-radius:24px;min-height:calc(100dvh - 120px - var(--n3-h,82px) - 4px);padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(40px,6vw,88px);justify-content:center}
@media (max-width:767px){.wow.h8 .wow-panel{min-height:calc(100dvh - 148px - var(--n3-h,72px) - 4px);padding-top:40px}}

/* 8 Oct (owner): the logo strip sits on the page's columns, like the sections below it: the label starts on the left margin
   and the ticker runs to the right margin, at every width */
.h8-strip{padding-inline:var(--gut)}
.h8-strip .h8-firms{max-width:none;margin-inline:0;width:100%}
.h8-strip .h8-firms .h8-tick{max-width:none}
@media (min-width:768px){.h8-strip .h8-firms p{flex:none;white-space:nowrap}.h8-strip .h8-firms{gap:clamp(24px,4vw,56px)}}
/* sweep, 8 Oct: lighter fill on the tinted hero button so its white text stays above 4.5:1 */
.wow.h8 .wow-btn.wow-btn-ghost{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
@media (hover:hover){.wow.h8 .wow-btn.wow-btn-ghost:hover{background:rgba(255,255,255,.16)}}
/* tablet (phone and tablet pass, 8 Oct): the hero panel no longer fills a whole tall screen with a few lines in the middle */
@media (min-width:600px) and (max-width:1099px) and (min-height:900px){.wow.h8 .wow-panel{min-height:min(600px,calc(100dvh - 120px - var(--n3-h,82px) - 4px))}}
/* iPhone Safari let the blurred, moving background layer show past the panel's round corners (a pale square behind each corner).
   A clip-path clips it for certain; the panel is also made its own layer so the corners are cut after the blur. */
.wow.h8 .wow-panel{overflow:hidden;isolation:isolate;-webkit-clip-path:inset(0 round 24px);clip-path:inset(0 round 24px);transform:translateZ(0)}
/* 14 Oct 2026 (D-243): the hero title is one line of promise; the figures and the goal move to a short line under it */
.wow.h8 .wow-sub{margin:-14px 0 0;max-width:36em;font:400 clamp(17px,1.45vw,21px)/1.5 var(--body);color:rgba(255,255,255,.94);text-wrap:balance}
@media (max-width:519px){.wow.h8 .wow-sub{margin-top:-10px}}