/* ── Dark Water × Flow bridge: the same strip on both sites, dark here, light on Flow ── */
.xbar{position:relative;z-index:61;height:34px;background:#04060A;border-bottom:1px solid rgba(255,255,255,.08);font:600 12px/1 'Inter',system-ui,sans-serif;letter-spacing:.01em}
.xbar__in{max-width:var(--container,1280px);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;gap:1.4rem}
.xbar a{color:#A6B2C4;text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;height:100%;border-bottom:2px solid transparent;padding-top:2px}
.xbar a img{height:14px;width:auto;display:block;opacity:.9}
.xbar a.on{color:#fff;border-bottom-color:#2B7BFF}
.xbar a:hover{color:#fff}
.xbar__sp{flex:1}
.xbar__tag{color:#6E7A8C;font-weight:500}
@media (max-width:640px){.xbar__tag{display:none}.xbar__in{gap:1rem;padding:0 16px}}

/* payments inside, powered by Flow: the bridge section on darkwater.work */
.bridge{position:relative;overflow:hidden;background:#06090F;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.bridge__glow{position:absolute;inset:-20% -10%;background:radial-gradient(40% 50% at 70% 40%,rgba(43,123,255,.28),transparent 60%),radial-gradient(30% 40% at 30% 80%,rgba(53,200,255,.16),transparent 60%),radial-gradient(25% 30% at 85% 85%,rgba(52,211,153,.14),transparent 60%);pointer-events:none}
.bridge__in{position:relative;display:grid;gap:2.4rem;padding:5rem 24px;max-width:var(--container,1280px);margin:0 auto}
@media (min-width:960px){.bridge__in{grid-template-columns:1fr 1fr;align-items:center;gap:4rem;padding:6.5rem 24px}}
.bridge__eye{display:inline-flex;align-items:center;gap:.5rem;color:#9FD8FF;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem}
.bridge__eye img{height:16px;width:auto}
.bridge h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 1rem;color:#fff}
.bridge h2 span{background:linear-gradient(90deg,#35C8FF,#2B7BFF 60%,#34D399);-webkit-background-clip:text;background-clip:text;color:transparent}
.bridge .lead{color:#A6B2C4;font-size:1.08rem;max-width:52ch;margin:0 0 1.6rem}
.bridge__nums{display:grid;grid-template-columns:repeat(3,auto);gap:1.4rem 2.2rem;margin:1.6rem 0 1.8rem}
.bridge__nums b{display:block;color:#fff;font-size:1.5rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bridge__nums span{color:#6E7A8C;font-size:.8rem}
.bridge__btns{display:flex;flex-wrap:wrap;gap:.7rem}
.bridge .btn--flow{background:#2B7BFF;color:#fff;box-shadow:0 14px 34px -14px rgba(43,123,255,.7)}
.bridge .btn--flow:hover{background:#1F62E8}
/* the pay page, in the dark room */
.paymock{position:relative;background:#0D1422;border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 40px 90px -40px rgba(0,0,0,.8);overflow:hidden;max-width:520px;margin:0 auto}
.paymock__bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;border-bottom:1px solid rgba(255,255,255,.08);background:#0A1020}
.paymock__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.paymock__bar em{margin-left:.6rem;font-style:normal;font-size:.72rem;color:#6E7A8C;background:rgba(255,255,255,.05);border-radius:6px;padding:.25rem .6rem;flex:1}
.paymock__body{display:grid;grid-template-columns:1.1fr .9fr;gap:1.2rem;padding:1.1rem 1.2rem 1.3rem}
.paymock__brand{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;color:#35C8FF;margin-bottom:.6rem}
.paymock label{display:block;font-size:.66rem;color:#6E7A8C;margin:.5rem 0 .2rem;font-weight:700}
.paymock__f{background:#121A2C;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.5rem .6rem;font-size:.8rem;color:#E9EEF5}
.paymock__seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#121A2C;border-radius:8px;padding:3px;margin:.5rem 0;font-size:.74rem;font-weight:700;color:#6E7A8C}
.paymock__seg span{text-align:center;padding:.4rem 0;border-radius:6px}.paymock__seg .on{background:#2B7BFF;color:#fff}
.paymock__b{margin-top:.8rem;background:linear-gradient(180deg,#3686FF,#1F66F0);color:#fff;text-align:center;border-radius:8px;padding:.65rem;font-weight:800;font-size:.84rem}
.paymock__ln{display:flex;justify-content:space-between;gap:.6rem;padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.78rem;color:#A6B2C4}
.paymock__ln b{color:#fff;font-variant-numeric:tabular-nums}
.paymock__ln--t{border-bottom:0;font-weight:800}.paymock__ln--t span,.paymock__ln--t b{color:#fff}
.paymock__pow{font-size:.62rem;color:#6E7A8C;margin-top:.8rem}
.paymock__paid{position:absolute;right:-6px;bottom:18px;background:#fff;color:#0A1F4D;border-radius:12px;padding:.7rem .9rem;font-size:.78rem;box-shadow:0 20px 40px -18px rgba(0,0,0,.7);display:grid;gap:.25rem;min-width:170px;transform:rotate(-2deg)}
.paymock__paid b{display:flex;align-items:center;gap:.4rem;font-size:.85rem}
.paymock__paid b i{width:8px;height:8px;border-radius:50%;background:#10B981}
.paymock__paid small{color:#6E7F9B}
@media (max-width:640px){.paymock__body{grid-template-columns:1fr}.paymock__paid{position:static;transform:none;margin:0 1.2rem 1.2rem}}

/* the buying decision first: three questions, three answers (same block as Flow's pricing page, dark room) */
.ask3sec{padding:1rem 0 2.5rem}
.ask3{display:grid;gap:1rem}
@media (min-width:900px){.ask3{grid-template-columns:repeat(3,1fr);gap:1.2rem}}
.ask3__c{display:grid;gap:.5rem;align-content:start;background:#0D1422;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.5rem;color:#E9EEF5;text-decoration:none;transition:transform .2s,border-color .2s}
.ask3__c:hover{transform:translateY(-3px);border-color:rgba(127,203,238,.5)}
.ask3__c small{font-size:.8rem;font-weight:800;color:#6E7A8C}
.ask3__c b{font-size:1.4rem;letter-spacing:-.025em;color:#fff}
.ask3__p{font-size:2.2rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.ask3__p em{font-style:normal;font-size:.9rem;font-weight:700;color:#6E7A8C;margin-left:.4rem;letter-spacing:0}
.ask3__c p{margin:.2rem 0 .6rem;color:#A6B2C4;font-size:.92rem;line-height:1.45}
.ask3__c .btn{justify-self:start;pointer-events:none}
.ask3__c--flow{border-color:#2B7BFF;box-shadow:0 30px 60px -30px rgba(43,123,255,.5)}
.ask3__note{font-size:.9rem;color:#A6B2C4;max-width:70ch;margin:1.2rem auto 0;text-align:center}
.ask3__note a{color:#7FCBEE;font-weight:700}
.outcomes .card h3{font-size:1.25rem;letter-spacing:-.02em;line-height:1.2}
.outcomes .card p{margin-top:.5rem;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:#6E7A8C}
/* the switch calculator: their numbers next to one plan */
.sw{display:grid;gap:2rem}
@media (min-width:900px){.sw{grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start}}
.sw__form{background:#0D1422;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.5rem;display:grid;gap:.6rem}
.sw__form h3{margin:0 0 .4rem;font-size:1.1rem;color:#fff}
.sw__row{display:grid;grid-template-columns:1fr 150px;align-items:center;gap:1rem;font-size:.95rem;color:#A6B2C4}
.sw__in{display:flex;align-items:center;gap:.3rem;background:#121A2C;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.5rem .7rem;color:#6E7A8C}
.sw__in input{width:100%;background:transparent;border:0;color:#fff;font:inherit;font-size:16px;outline:none}
.sw__plan{display:grid;gap:.5rem;margin-top:.8rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08);font-size:.92rem;color:#A6B2C4}
.sw__plan label{display:flex;align-items:center;gap:.5rem;color:#E9EEF5;min-height:44px}
.sw__out{display:grid;gap:1rem;position:sticky;top:calc(var(--header-h) + 50px)}
.sw__big{background:#0D1422;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.2rem 1.4rem;display:grid;gap:.2rem}
.sw__big small{color:#6E7A8C;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sw__big b{font-size:2.2rem;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.sw__big b em{font-style:normal;font-size:.9rem;color:#6E7A8C;margin-left:.3rem;letter-spacing:0}
.sw__big--diff{border-color:#2B7BFF;background:linear-gradient(160deg,#0B3FD1,#1F62E8 60%,#0A1F4D)}
.sw__big--diff small,.sw__big--diff b em{color:#CFE0FF}
.sw__big--diff.is-neg{background:#0D1422;border-color:rgba(255,255,255,.1)}
.sw__yr{color:#CFE0FF;font-size:.95rem;font-weight:700}
.sw__plus{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;color:#A6B2C4;font-size:.95rem}
.sw__plus b{color:#fff}
.sw__note{font-size:.82rem;color:#6E7A8C;line-height:1.45}
/* payments page: module cards with colour, light and a sheen */
.pm-grid{display:grid;gap:1.2rem}
@media (min-width:700px){.pm-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.pm-grid{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.pm{--c1:#0B3FD1;--c2:#2B7BFF;--c3:#35C8FF;position:relative;overflow:hidden;border-radius:20px;padding:1.6rem 1.5rem 1.4rem;background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 55%,#0D1422),#0D1422 60%);border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px -36px var(--c1)}
.pm--book{--c1:#5B2BD9;--c2:#8B7CFF;--c3:#CBB8FF}.pm--inv{--c1:#0E7C86;--c2:#35C8FF;--c3:#9BE7FF}.pm--auto{--c1:#0E9F6E;--c2:#34D399;--c3:#B8F5D9}.pm--portal{--c1:#B4530B;--c2:#F7B84B;--c3:#FFE2A8}.pm--dash{--c1:#1F62E8;--c2:#35C8FF;--c3:#fff}
.pm__bar{display:block;width:46px;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--c2),var(--c3));margin-bottom:1rem;box-shadow:0 0 18px var(--c2)}
.pm h3{margin:0 0 .4rem;font-size:1.15rem;color:#fff}
.pm p{margin:0;color:#C9D3E3;font-size:.95rem;line-height:1.55}
.pm__go{display:inline-block;margin-top:1rem;font-weight:700;font-size:.9rem;color:var(--c3)}
.pm::before{content:"";position:absolute;inset:-40% -20% auto;height:120%;background:radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--c2) 45%,transparent),transparent 70%);pointer-events:none}
.pm::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-35%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-18deg);animation:pmsheen 6s ease-in-out infinite;pointer-events:none}
.pm:nth-child(2)::after{animation-delay:1s}.pm:nth-child(3)::after{animation-delay:2s}.pm:nth-child(4)::after{animation-delay:3s}.pm:nth-child(5)::after{animation-delay:4s}.pm:nth-child(6)::after{animation-delay:5s}
@keyframes pmsheen{0%,60%{left:-40%}90%,100%{left:140%}}
@media (prefers-reduced-motion:reduce){.pm::after{animation:none}}
/* mega menus (desktop), same mechanics as the old dropdowns: hover or focus opens */
.mega .mega__car{font-size:.7em;opacity:.7;margin-left:.1em}
.mega__panel.dropdown{min-width:0;width:max-content;padding:1.1rem 1.2rem 1.2rem;border-radius:18px;left:50%;transform:translate(-30%,6px);box-shadow:0 30px 80px -30px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.4);background:#0D1422;border:1px solid rgba(255,255,255,.1)}
.has-dropdown:hover .mega__panel.dropdown,.has-dropdown:focus-within .mega__panel.dropdown{transform:translate(-30%,0)}
.mega__cols{display:grid;grid-auto-flow:column;gap:1.6rem}
.mega__col{min-width:200px}
.mega__col h5{margin:0 0 .5rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#6E7A8C;font-weight:700}
.mega__panel.dropdown .mega__col a{display:block;padding:.5rem .6rem;border-radius:10px;line-height:1.2}
.mega__panel.dropdown .mega__col a b{display:block;color:#fff;font-weight:700;font-size:.93rem}
.mega__panel.dropdown .mega__col a small{display:block;color:#8A96A8;font-size:.78rem;margin-top:.15rem}
.mega__panel.dropdown .mega__col a:hover{background:rgba(43,123,255,.12)}
.mega__panel.dropdown .mega__col a:hover b{color:#8FD3FF}
.mega__side{width:230px;align-self:start;background:linear-gradient(160deg,#0B3FD1,#1F62E8 60%,#0A1F4D);border-radius:14px;padding:1rem 1.1rem;color:#fff}
.mega__side b{display:block;font-size:.95rem;margin-bottom:.3rem}
.mega__side p{margin:0;font-size:.82rem;color:#CFE0FF;line-height:1.45}
.mega__panel.dropdown .mega__side a{display:inline-block;margin-top:.7rem;padding:0;color:#fff;font-weight:700;font-size:.85rem}
@media (max-width:1180px){.mega__side{display:none}.mega__col{min-width:180px}}
/* page heroes: one standard, like Flow's pricing hero */
.page-hero,.page-hero--cine{min-height:540px;display:flex;align-items:center}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.05;letter-spacing:-.03em;max-width:22ch;min-height:2.1em}
.page-hero .lead{max-width:60ch;min-height:4.2em}
.page-hero .btn-row{margin-top:1.4rem}
@media (max-width:899px){.page-hero,.page-hero--cine{min-height:0;padding-block:72px 56px}.page-hero h1{min-height:0}.page-hero .lead{min-height:0}}