/* Compact adaptation of Figma 8:17: 16px/500 Hanken navigation, fixed gaps. */
#site-header[data-design] { height:112px; min-height:112px; padding:16px max(32px,calc((100% - 1200px)/2)); display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-rows:auto; justify-content:stretch; column-gap:24px; align-items:center; font-family:'Hanken Grotesk',sans-serif; }
#site-header[data-design] > .brand { grid-column:1; grid-row:1; gap:12px; min-width:0; transform:none; }
#site-header[data-design] .brand .mark { width:72px; height:69px; flex:none; background:none; border:0; border-radius:0; font-size:0; }
#site-header[data-design] .brand b { font:700 30px/32px Archivo,sans-serif; letter-spacing:-1.8px; }
#site-header[data-design] .brand small { font:300 10px/13px 'Hanken Grotesk',sans-serif; letter-spacing:1.3px; max-width:190px; }
#site-header[data-design] .mh-account { grid-column:3; grid-row:1; justify-self:start; display:flex; gap:12px; align-items:center; margin:0; }
.mh-signin,.mh-register { border:1px solid #0a1a33; border-radius:8px; padding:7px 11px; font-size:13px; line-height:20px; white-space:nowrap; }
.mh-register { background:#ffbf2e; border-color:#ffbf2e; display:flex; gap:10px; font-weight:600; }
#site-header[data-design] #nav { grid-column:2; grid-row:1; display:flex; position:static; justify-content:flex-start; align-items:center; flex-wrap:nowrap; gap:16px; width:auto; max-width:none; padding:0; background:#fff; box-shadow:none; border:0; color:#0a1a33; font-size:15px; font-weight:500; }
#site-header[data-design] #nav > a { white-space:nowrap; padding:12px 0; }
#site-header[data-design] .nav-trigger { display:inline-flex; align-items:center; justify-content:flex-start; gap:6px; width:auto; font:inherit; color:inherit; background:none; border:0; padding:12px 0; white-space:nowrap; cursor:pointer; }
#site-header[data-design] .nav-trigger span { display:block; width:7px; height:7px; margin:0 0 4px 0; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); font-size:0; }
#site-header[data-design] .nav-menu { position:relative; width:auto; }
#site-header[data-design] .menu { display:none; }
#site-header[data-design] .mega-menu { display:none; position:absolute; transform:none; left:0; right:auto; top:100%; width:260px; padding:16px; background:#fff; box-shadow:0 12px 32px #0a1a3326; border:1px solid #dde3eb; border-radius:12px; }
#site-header[data-design] .nav-menu.active .mega-menu { display:block; }
.mh-dropdown-links { display:grid; gap:3px; }
.mh-dropdown-links a { padding:10px; border-radius:5px; }
.mh-dropdown-links a:hover { background:#dcf1ef; }
#site-header[data-design] :is(a,button):focus-visible { outline:3px solid #0c747e; outline-offset:4px; }
.fh-calculator { text-align:left!important; background:#f4f6f8; border:1px solid #dde3eb; border-radius:20px; padding:24px; min-width:0; box-shadow:0 12px 30px #0a1a3312; }
.fh-calculator h3 { font-size:24px; }
.fh-calculator .calc-intro { margin-top:10px; font-size:14px; }
.calc-controls { display:grid; gap:18px; margin-top:24px; }
.calc-field { display:grid; grid-template-columns:1fr 110px; gap:8px 12px; align-items:center; }
.calc-field label { font-size:14px; font-weight:600; }
.fh-calculator input[type=number] { width:100%; min-width:0; border:1px solid #96a8b7; border-radius:6px; padding:9px 8px; background:#fff; color:#0a1a33; min-height:44px; }
.calc-field input[type=range] { grid-column:1 / -1; width:100%; min-height:32px; margin:0; accent-color:#0c747e; cursor:pointer; }
.fh-calculator input:focus-visible,.calc-assumptions summary:focus-visible { outline:3px solid #0c747e; outline-offset:3px; }
.calc-assumptions { margin:24px 0; font-size:13px; }
.calc-assumptions summary { cursor:pointer; color:#0c747e; font-weight:700; padding:10px 0; }
.calc-assumptions label { display:grid; grid-template-columns:1fr 100px; gap:10px; align-items:center; margin-top:10px; }
.calc-assumptions p { margin:12px 0!important; font-size:13px; }
.calc-results { background:#0a1a33; color:#fff; border-radius:12px; padding:20px; }
.calc-results dl { margin:0; display:grid; gap:12px; }
.calc-results dl > div { display:flex; justify-content:space-between; gap:16px; font-size:14px; }
.calc-results dd { margin:0; font-weight:700; text-align:right; }
.calc-results [data-result=monthly],.calc-results [data-result=annual] { color:#ffbf2e; }
.calc-outcome { margin-top:16px!important; font-size:14px; }
.calc-bars { display:grid; gap:6px; margin-top:18px; font-size:12px; }
.calc-bars > div { height:12px; background:#ffffff24; border-radius:4px; overflow:hidden; }
.calc-bars i { height:100%; display:block; background:#ffbf2e; }
.calc-bars [data-bar=dream] { background:#74c5bf; }
.fh-calculator .calc-disclaimer { font-size:12px; margin-top:16px; color:#475a70; }
.calc-error { color:#9a2424; font-size:14px; }
.fh-calculator [hidden] { display:none!important; }
@media(max-width:1279px) {
 #site-header[data-design] { height:auto; min-height:90px; grid-template-columns:minmax(0,1fr) auto auto; padding:14px 32px; gap:14px 18px; justify-content:stretch; }
 #site-header[data-design] .brand .mark { width:52px; height:50px; }
 #site-header[data-design] .brand b { font-size:27px; line-height:29px; }
 #site-header[data-design] .menu { display:block; grid-column:2; grid-row:1; min-height:44px; }
 #site-header[data-design] .mh-account { grid-column:3; grid-row:1; justify-self:end; }
 #site-header[data-design] #nav { display:none; grid-column:1 / -1; grid-row:2; padding:0; align-items:stretch; flex-direction:column; gap:4px; max-height:55vh; overflow:auto; width:100%; }
 #site-header[data-design] #nav.open { display:flex; }
 #site-header[data-design] #nav > a,#site-header[data-design] .nav-trigger { display:flex; justify-content:space-between; width:100%; text-align:left; padding:14px 6px; font-size:16px; }
 #site-header[data-design] .mega-menu { position:static; width:100%; box-shadow:none; }
}
@media(max-width:900px) { .fh-statement .fh-two-column { grid-template-columns:1fr; } }
@media(max-width:640px) {
 #site-header[data-design] { grid-template-columns:minmax(0,1fr) auto; padding:12px 20px; gap:12px; }
 #site-header[data-design] .brand { gap:10px; }
 #site-header[data-design] .brand .mark { width:46px; height:44px; }
 #site-header[data-design] .brand small { font-size:9px; max-width:168px; letter-spacing:1px; }
 #site-header[data-design] .mh-account { grid-column:1 / -1; grid-row:2; justify-self:stretch; justify-content:flex-end; }
 #site-header[data-design] #nav { grid-row:3; }
}
@media(max-width:420px) { .fh-calculator { padding:18px; } .calc-field { grid-template-columns:1fr 90px; } }

/* Shared outer edges with the hero, including the tablet layout. */
@media(min-width:641px) and (max-width:800px) { #site-header[data-design] { padding-inline:20px; } }
.fh-hero-video { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.fh-video-toggle { position:absolute; right:24px; bottom:20px; color:#fff; background:#0a1a33cc; border:1px solid #ffffffaa; border-radius:8px; padding:10px 14px; min-height:44px; cursor:pointer; font:500 14px 'Hanken Grotesk',sans-serif; }
.fh-video-toggle:focus-visible { outline:3px solid #ffbf2e; outline-offset:3px; }
:root { --marketing-content-max:1200px; --marketing-content-gutter:32px; }
.fh-container { width:min(var(--marketing-content-max),calc(100% - 2 * var(--marketing-content-gutter))); }
#site-header[data-design] { padding-inline:max(var(--marketing-content-gutter),calc((100% - var(--marketing-content-max))/2)); }
@media(min-width:1280px) {
 #site-header[data-design] { height:128px; min-height:128px; }
 #site-header[data-design] .brand .mark { width:90.637px; height:86.689px; }
 #site-header[data-design] .brand b { font-size:32px; line-height:34px; }
 #site-header[data-design] .brand small { font-size:11px; line-height:14px; letter-spacing:2px; max-width:217px; }
}
@media(max-width:800px) { :root { --marketing-content-gutter:20px; } }

/* Full-width comparison: inputs first in DOM, aligned results alongside on desktop. */
.fh-calculator { padding:28px; }
.calc-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start; margin-top:20px; }
.calc-inputs { min-width:0; }
.calc-layout .calc-controls { margin-top:0; gap:12px; }
.calc-layout .calc-field { grid-template-columns:minmax(0,1fr) 156px; gap:4px 16px; }
.calc-layout .calc-assumptions { margin:16px 0 0; }
.calc-layout .calc-assumptions label { grid-template-columns:minmax(0,1fr) 156px; margin-top:8px; }
.calc-layout input[type=number] { font-variant-numeric:tabular-nums; text-align:right; padding-inline:12px; }
.calc-layout .calc-results { margin:0; padding:24px; }
.calc-layout .calc-results dl { gap:16px; }
.calc-layout .calc-results dl > div { font-size:16px; align-items:baseline; }
.calc-layout .calc-results dd { white-space:normal; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.calc-layout .calc-results [data-result=monthly],.calc-layout .calc-results [data-result=annual] { font-size:24px; }
.calc-layout .calc-bars { margin-top:24px; gap:10px; }
.fh-statement-review { margin:32px auto 0; max-width:850px; text-align:left; }
.fh-statement-review h2 { font-size:36px; line-height:1.15; }
.fh-statement-review h2 + p,.fh-statement-review p + p { margin-top:12px; }
.fh-statement-review .fh-button { margin-top:18px; }
@media(max-width:800px) {
 .fh-calculator { padding:20px; }
 .calc-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
 .calc-layout .calc-field,.calc-layout .calc-assumptions label { grid-template-columns:minmax(0,1fr) 140px; gap:6px 12px; }
 .calc-layout .calc-results { padding:20px; }
 .fh-statement-review { margin-top:24px; }
 .fh-statement-review h2 { font-size:30px; }
}
@media(max-width:380px) {
 .calc-layout .calc-field,.calc-layout .calc-assumptions label { grid-template-columns:minmax(0,1fr); }
 .calc-layout input[type=number] { max-width:none; }
 .calc-layout .calc-results dl > div { flex-direction:column; gap:4px; }
 .calc-layout .calc-results dd { text-align:left; }
}
.calc-layout .calc-field input[type=range] { min-height:24px; height:24px; padding:0; border:0; background:transparent; }

/* Explicit compositing order keeps moving media below all hero content. */
.fh-hero .fh-hero-video { z-index:0; pointer-events:none; }
.fh-hero::before { z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(10,26,51,.84),rgba(10,26,51,.4)); }
.fh-hero .fh-hero-grid { position:relative; z-index:2; }
.fh-hero .fh-device { display:block; visibility:visible; opacity:1; }
.fh-hero .fh-device-screen-back { z-index:0; }
.fh-hero .fh-device-screen { z-index:1; }
.fh-hero .fh-device-frame { z-index:2; pointer-events:none; }
.fh-hero .fh-video-toggle { z-index:3; }
.fh-calculator .calc-results-title { color:#fff; font-size:22px; line-height:1.2; margin:0 0 20px; }

/* Shared marketing identity: the icon follows the two-line text lockup. */
#site-header[data-design] .brand .mark { width:44px; height:44px; }
#site-header[data-design] .brand > span:last-child { min-width:0; }
#site-header[data-design] .brand small { max-width:none; white-space:nowrap; }
.footer-top .brand { gap:12px; align-items:center; }
.footer-top .brand .mark { width:44px; height:44px; flex:none; background:none; border:0; border-radius:0; font-size:0; }
.footer-top .brand b { font:700 27px/29px Archivo,sans-serif; letter-spacing:-1.5px; }
.footer-top .brand small { font-size:9px; line-height:13px; white-space:normal; margin-top:2px; }
.payment-brand { display:inline-flex; flex-direction:column; align-items:flex-start; margin-bottom:20px; }
.payment-wordmark { font-family:Archivo,sans-serif; font-weight:700; font-size:28px; line-height:1.15; letter-spacing:-1px; }
.payment-attribution { display:block; font:500 11px/1.4 'Hanken Grotesk',sans-serif; letter-spacing:0; margin-top:4px; color:inherit; }
.fh-card .payment-attribution { margin:4px 0 14px; }
@media(min-width:1280px) { #site-header[data-design] .brand .mark { width:50px; height:50px; } }
@media(max-width:640px) { #site-header[data-design] .brand small { white-space:normal; max-width:168px; } }

/* Shared navigation grouping, kept compact within the existing header. */
#site-header[data-design] #nav { gap:18px; }
#site-header[data-design] .mega-menu { padding:14px; max-height:calc(100dvh - 180px); overflow-y:auto; }
#site-header[data-design] .mega-menu.mh-menu-wide { width:460px; }
#site-header[data-design] .nav-menu.active .mh-menu-wide { display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.mh-nav-heading { display:block; margin:0 8px 7px; color:#0c747e; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.mh-nav-group .mh-dropdown-links { gap:2px; }
.mh-nav-group .mh-dropdown-links a { padding:8px; font-size:14px; line-height:20px; }
@media(max-width:1279px) {
 #site-header[data-design] #nav { gap:4px; }
 #site-header[data-design] .mega-menu, #site-header[data-design] .mega-menu.mh-menu-wide { width:100%; max-height:none; overflow:visible; }
 .mh-nav-group .mh-dropdown-links a { min-height:44px; padding:12px 8px; }
}
@media(max-width:640px) { #site-header[data-design] .nav-menu.active .mh-menu-wide { grid-template-columns:1fr; gap:16px; } }

/* Landing-page labels open their complete pages; adjacent arrows open sections. */
#site-header[data-design] :is(.mh-payments-menu,.mh-pos-menu,.mh-industries-menu,.mh-reporting-menu,.mh-pricing-menu,.mh-resources-menu) { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:6px; }
#site-header[data-design] :is(.mh-payments-page,.mh-pos-page,.mh-industries-page,.mh-reporting-page,.mh-pricing-page,.mh-resources-page) { padding:12px 0; white-space:nowrap; }
#site-header[data-design] :is(.mh-payments-menu,.mh-pos-menu,.mh-industries-menu,.mh-reporting-menu,.mh-pricing-menu,.mh-resources-menu) > .nav-trigger { padding:12px 6px; min-height:44px; justify-content:center; }
#site-header[data-design] :is(.mh-payments-menu,.mh-pos-menu,.mh-industries-menu,.mh-reporting-menu,.mh-pricing-menu,.mh-resources-menu) > .mega-menu { grid-column:1 / -1; }
@media(max-width:1279px) {
 #site-header[data-design] :is(.mh-payments-page,.mh-pos-page,.mh-industries-page,.mh-reporting-page,.mh-pricing-page,.mh-resources-page) { padding:14px 6px; }
 #site-header[data-design] :is(.mh-payments-menu,.mh-pos-menu,.mh-industries-menu,.mh-reporting-menu,.mh-pricing-menu,.mh-resources-menu) > .nav-trigger { width:44px; }
}

#site-header[data-design] { backdrop-filter:none; -webkit-backdrop-filter:none; }
/* Override the legacy menu-in horizontal centering animation on every route. */
#site-header[data-design] .mega-menu,
#site-header[data-design] .mega-menu.mh-menu-wide {
 position:fixed; left:var(--dropdown-left,16px); right:auto;
 top:var(--dropdown-top,100%); width:var(--dropdown-width,260px);
 max-width:calc(100vw - 32px); max-height:calc(100dvh - var(--dropdown-top,128px) - 16px);
 margin:0; overflow-y:auto; transform:none; transition:none; animation:none;
 border:1px solid #dde3eb; box-shadow:0 12px 32px #0a1a3326;
}
#site-header[data-design] .nav-menu.active .mega-menu { animation:marketing-dropdown-in 170ms ease-out both; }
#site-header[data-design] .mega-menu.mh-menu-wide { grid-template-columns:1fr 1fr; gap:18px; }
@keyframes marketing-dropdown-in { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:640px) { #site-header[data-design] .mega-menu.mh-menu-wide { grid-template-columns:1fr; gap:16px; } }
@media(prefers-reduced-motion:reduce) { #site-header[data-design] .nav-menu.active .mega-menu { animation:none; } }
/* Keep the mobile accordion inside a scrolling overlay, out of page flow. */
@media(max-width:1279px) {
 #site-header[data-design] #nav { position:absolute; top:100%; left:20px; right:20px; width:auto; padding:12px; border:1px solid #dde3eb; border-radius:12px; box-shadow:0 12px 32px #0a1a3326; }
 #site-header[data-design] .mega-menu,
 #site-header[data-design] .mega-menu.mh-menu-wide { position:static; width:100%; max-width:100%; max-height:none; overflow:visible; box-shadow:none; }
}

/* Approved Modular D artwork: use complete supplied lockups, never typeset substitutes. */
#site-header[data-design] .brand .dp-approved-logo { display:block; width:260px; max-width:100%; height:auto; flex:0 1 auto; object-fit:contain; }
.fh-footer .brand .dp-approved-logo { display:block; width:240px; max-width:100%; height:auto; object-fit:contain; }
@media(max-width:1279px) { #site-header[data-design] .brand .dp-approved-logo { width:240px; } }
@media(max-width:640px) { #site-header[data-design] .brand .dp-approved-logo { width:220px; } }
.mp-notice .mp-mark.dp-approved-mark { width:44px; height:44px; padding:0; border:0; border-radius:0; background:none; object-fit:contain; flex:none; }

/* Shared account controls follow the reference padding and use supplied arrow artwork. */
#site-header[data-design] .mh-account > :is(.mh-signin,.mh-register) { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; flex:none; width:auto; min-width:0; max-width:none; height:30px; min-height:30px; max-height:30px; padding:4px 10px; margin:0; border-width:1px; border-radius:8px; font:400 13px/20px 'Hanken Grotesk',sans-serif; letter-spacing:0; text-transform:none; white-space:nowrap; }
#site-header[data-design] .mh-account > .mh-signin { width:64px; min-width:64px; max-width:64px; padding-inline:10px; background:#0a1a33; border-color:#0a1a33; color:#fff; }
#site-header[data-design] .mh-account > .mh-register { width:max-content; min-width:110px; max-width:none; padding-inline:10px; gap:8px; font-weight:600; background:#ffbf2e; border-color:#ffbf2e; color:#0a1a33; }
#site-header[data-design] .mh-account-arrow { display:block; width:16px; height:16px; flex:none; object-fit:contain; }
/* One centred 1200px rail: logo on the left, actions and navigation aligned right. */
@media(min-width:1280px) {
 #site-header[data-design] { box-sizing:border-box; width:100%; height:100px; min-height:100px; background:#fff; color:#0a1a33; padding:16px max(40px,calc((100% - 1200px)/2)) 8px; grid-template-columns:330px minmax(0,1fr); grid-template-rows:30px 44px; column-gap:28px; row-gap:2px; align-content:start; }
 #site-header[data-design] > .brand { grid-column:1; grid-row:1 / 3; justify-self:start; align-self:center; transform:none; }
 #site-header[data-design] .brand .dp-approved-logo { width:260px; }
 #site-header[data-design] > .mh-account { grid-column:2; grid-row:1; justify-self:end; align-self:center; }
 #site-header[data-design] > #nav { grid-column:2; grid-row:2; justify-self:end; justify-content:flex-end; gap:14px; font-size:15px; max-width:100%; }
}

/* The reference announcement remains identical on marketing, contact and article routes. */
#site-announcement { box-sizing:border-box; height:42px; min-height:42px; padding:8px 20px; justify-content:center; background:#0a1a33; color:#d4e1ed; }
#site-announcement .fh-canadian { font:800 12px/14px 'JetBrains Mono',monospace; letter-spacing:2px; }

/* Match the affiliate header logo size on smaller desktop displays. */
@media(min-width:1280px) and (max-width:1439px) { #site-header[data-design] .brand .dp-approved-logo { width:220px; } }

/* Keep tablet and mobile header edges compact without reducing menu touch targets. */
@media(max-width:1279px) { #site-header[data-design] { min-height:68px; padding-block:16px 8px; row-gap:6px; } }

/* Override the shared first-child margin reset only for the booking page. */
body.book-demo-active #app > .book-demo-page { margin-top:clamp(80px,6vw,96px); }

/* Demo booking is paused; align the remaining Sign In action to the right. */
#site-header[data-design] > .mh-account { justify-self:end; justify-content:flex-end; }