/* One deep sky everywhere: every blue surface on the homepage uses the same palette, and the
   live shader from site-sky.js moves on top of it. Pale day-sky panels are gone. */
.lsky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .9s ease}
.lsky.on{opacity:1}
.lsky canvas{display:block;width:100%;height:100%}
:root{--deep-sky-strong:linear-gradient(180deg,rgba(11,27,68,.4),rgba(22,51,127,.35) 40%,rgba(11,27,68,.78)),#16337F url(/img/brand/deep-blur.webp) center/cover;--deep-sky:linear-gradient(180deg,rgba(11,27,68,.45),rgba(22,51,127,.25) 45%,rgba(11,27,68,.6)),#16337F url(/img/brand/deep-blur.webp) center/cover}

/* hero: only the sky and the message, filling the first screen */
.agsky .agshade{z-index:1}
.agsky.has-lsky .agvid,.agsky.has-lsky .agfx{display:none!important}
.hero.vh .hframe{min-height:calc(100svh - 16px);display:flex;flex-direction:column;justify-content:center;padding-top:clamp(110px,12vw,150px);padding-bottom:clamp(80px,9vw,120px)}
.hero.vh .cta{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.hero.vh .tlink{color:#fff}

/* the problem: the original band (paper fading into the deep sky), now moving.
   The live sky is masked so it rises out of the page; paperwork cards lift up into it. */
.shift .shift-bg{background:linear-gradient(180deg,#F7F5F0 0%,#E4EEFF 11%,#A6C5FA 24%,#4F86EE 38%,#2457D6 54%,#16337F 76%,#0B1B44 100%)!important}
.shift .shift-bg > i{display:none}
.shift .shift-bg .lsky{-webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 22%,#000 52%);mask-image:linear-gradient(180deg,transparent 0%,transparent 22%,#000 52%)}
.lift{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lift .pc{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);box-shadow:0 18px 34px -22px rgba(11,27,68,.55);color:#141414;font:600 13px/1.2 var(--sans,system-ui);white-space:nowrap;will-change:transform,opacity;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lift .pc small{display:block;font-weight:400;font-size:11.5px;color:#6E6A64;margin-top:2px}
.lift .pc i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:#EEF3FB;color:#2457D6}
.lift .pc svg{width:16px;height:16px}
.shift .wrap{position:relative;z-index:1}
@media (max-width:860px){.lift .pc:nth-child(n+5){display:none}.lift .pc{transform:scale(.86)}}
@media (prefers-reduced-motion:reduce){.lift{display:none}}

/* what we automate: the "something else" line as a quiet white bar, not another blue block */
.nx-was-f{background:#fff!important;box-shadow:inset 0 0 0 1px rgba(20,20,20,.08),0 18px 40px -30px rgba(11,27,68,.35)!important;color:#141414!important}
.nx-was-f *{color:#141414}
.nx-was-f em{color:#2457D6!important}
.nx-was-f .btn,.nx-was-f button{background:#2457D6!important;color:#fff!important}

/* made for businesses like yours: deep sky, crisp white cards */
.nx-whop{position:relative;isolation:isolate;overflow:hidden;background:var(--deep-sky)!important}
.nx-whop > :not(.lsky){position:relative;z-index:1}
.nx-whop .subh,.nx-whop h3.subh{color:#fff}
.nx-whop .subh em{color:#DCE8FF}
.nx-whop .nx-ind{background:rgba(255,255,255,.94)!important;border-color:rgba(255,255,255,.95)!important;box-shadow:0 18px 36px -26px rgba(3,10,30,.7)}

/* calculator: the cost reads in ink on paper, the result on the deep sky */
.nx-lose{background:#F4F2ED!important;border:1px solid rgba(20,20,20,.08)!important}
.nx-lose,.nx-lose *{color:#141414!important}
.nx-lose small,.nx-lose span{color:#6E6A64!important}
.nx-co{position:relative;isolation:isolate;overflow:hidden;background:var(--deep-sky)!important}
.nx-co > :not(.lsky){position:relative;z-index:1}

/* how it works: the step tiles share the same deep sky */
.steps .tile{background:var(--deep-sky)!important}

/* footer: the closing call to action and the links on one moving sky */
.foot2{margin-top:40px!important}
.foot2 .fbg{background:var(--deep-sky-strong)!important}
.foot2 .fbg::before,.foot2 .fbg::after{display:none!important}
.fcta{text-align:center;padding:clamp(80px,9vw,120px) 0 clamp(64px,7vw,96px);border-bottom:1px solid rgba(255,255,255,.16)}
.fcta h2{margin:0 auto 16px;max-width:18ch;font:400 clamp(38px,5vw,68px)/1.04 var(--serif);letter-spacing:-.025em;color:#fff;text-wrap:balance}
.fcta h2 em{display:block;color:#DCE8FF}
.fcta p{margin:0 0 28px;color:rgba(255,255,255,.82);font-size:17px}
.fcta-b{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.fcall{color:#fff;text-decoration:none;font-size:15.5px;opacity:.85;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.fcall:hover{opacity:1;border-color:#fff}
.foot2 .ftop{padding-top:clamp(40px,4vw,56px)}
.foot2 .fbig{display:none!important}
.foot2 .fbot{margin-top:clamp(40px,4vw,56px)}
@media (max-width:760px){
  .foot2{margin-top:28px!important}
  .fcta{padding:72px 0 56px}
  .fcta h2{font-size:clamp(34px,9.5vw,44px)}
}
@media (prefers-reduced-motion:reduce){.lsky{transition:none}}

/* How it works: the step panels sit on the same deep sky instead of the pale wash */
.pvis2{background:var(--deep-sky)!important;box-shadow:none!important}

/* ═════════ Option 2 ═════════ */
/* made for businesses like yours: real photo cards on paper, no blue panel */
.nx-whop.o2-who{background:none!important;padding:0!important;overflow:visible}
.nx-whop.o2-who .subh{color:#141414!important}
.nx-whop.o2-who .subh em{color:#2457D6!important}
.o2-inds{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.o2-ind{background:#fff;border-radius:22px;padding:10px 10px 20px;box-shadow:0 0 0 1px rgba(20,20,20,.06),0 24px 50px -40px rgba(11,27,68,.45);transition:transform .35s ease,box-shadow .35s ease}
.o2-ind:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(20,20,20,.06),0 30px 60px -36px rgba(11,27,68,.5)}
.o2-ph{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#EEF3FB}
.o2-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease}
.o2-ind:hover .o2-ph img{transform:scale(1.04)}
.o2-ind h3{margin:16px 10px 6px;font:400 21px/1.2 var(--serif,Georgia);color:#141414}
.o2-ind p{margin:0 10px;font-size:14.5px;color:#6E6A64}
@media (max-width:860px){.o2-inds{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:26px -22px 0;padding:0 22px 6px;scrollbar-width:none}.o2-inds::-webkit-scrollbar{display:none}.o2-ind{flex:0 0 78%;scroll-snap-align:start}}

/* feather dividers between sections */
.o2-div{position:relative;max-width:1200px;margin:clamp(56px,6vw,88px) auto 0;padding:0 24px;display:flex;align-items:center;justify-content:center}
.o2-div::before{content:"";position:absolute;left:24px;right:24px;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(20,20,20,.12) 15%,rgba(20,20,20,.12) 85%,transparent)}
.o2-div span{position:relative;display:grid;place-items:center;width:44px;height:28px;background:#F7F5F0}
.o2-div .mk{width:18px;height:18px;color:#2457D6;opacity:.7}

/* what we automate: each card shows its job being done */
.o2-a{position:relative;height:118px;margin:0 0 16px;border-radius:14px;background:#F4F2ED;overflow:hidden;font:500 12.5px/1.3 var(--sans,system-ui);color:#141414}
.o2-a *{animation-duration:7s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
/* inbox: question, typing, reply */
.a-inbox .q,.a-inbox .r{position:absolute;margin:0;padding:8px 11px;border-radius:12px;max-width:78%}
.a-inbox .q{left:12px;top:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.a-inbox .r{right:12px;bottom:12px;background:#2457D6;color:#fff;opacity:0;animation-name:o2r}
.a-inbox .dots{position:absolute;right:14px;bottom:18px;margin:0;display:flex;gap:4px;opacity:0;animation-name:o2dots}
.a-inbox .dots i{width:6px;height:6px;border-radius:50%;background:#8F8B84}
@keyframes o2dots{0%,18%{opacity:0}24%,40%{opacity:1}46%,100%{opacity:0}}
@keyframes o2r{0%,44%{opacity:0;transform:translateY(8px)}52%,92%{opacity:1;transform:none}100%{opacity:0}}
/* website: fields type in, lead appears */
.a-web{display:flex;flex-direction:column;gap:8px;padding:12px}
.a-web .f{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;background:#fff}
.a-web .f b{width:38px;font-weight:500;color:#8F8B84}
.a-web .f i{font-style:normal;overflow:hidden;white-space:nowrap;width:0;animation-name:o2type;animation-timing-function:steps(14,end)}
.a-web .f .t2{animation-name:o2type2}
.a-web .lead{position:absolute;right:12px;bottom:10px;padding:5px 9px;border-radius:999px;background:#E3F5EA;color:#1F9D5A;opacity:0;animation-name:o2pop}
@keyframes o2type{0%,6%{width:0}24%,92%{width:90px}100%{width:0}}
@keyframes o2type2{0%,26%{width:0}42%,92%{width:90px}100%{width:0}}
@keyframes o2pop{0%,48%{opacity:0;transform:scale(.9)}56%,92%{opacity:1;transform:none}100%{opacity:0}}
/* calendar: a slot fills and books */
.a-cal{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:12px 12px 34px}
.a-cal .slot{height:22px;border-radius:6px;background:#fff}
.a-cal .busy{background:#DCE8FF}
.a-cal .new{animation-name:o2slot}
.a-cal .bk{position:absolute;left:12px;bottom:9px;color:#16337F;opacity:0;animation-name:o2pop}
@keyframes o2slot{0%,30%{background:#fff}40%,92%{background:#2457D6}100%{background:#fff}}
/* invoice: overdue flips to paid */
.a-inv{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 16px}
.a-inv .no{font-weight:600}
.a-inv .st{position:relative;height:26px}
.a-inv .st b{position:absolute;left:0;top:0;padding:5px 10px;border-radius:999px;font-weight:600}
.a-inv .od{background:#FBEFE3;color:#B7791F;animation-name:o2out}
.a-inv .pd{background:#E3F5EA;color:#1F9D5A;opacity:0;animation-name:o2in}
@keyframes o2out{0%,40%{opacity:1;transform:none}48%,92%{opacity:0;transform:translateY(-8px)}100%{opacity:1}}
@keyframes o2in{0%,44%{opacity:0;transform:translateY(8px)}52%,92%{opacity:1;transform:none}100%{opacity:0}}
/* documents: a file drops into the folder */
.a-doc .file{position:absolute;left:50%;top:14px;margin-left:-18px;width:36px;height:44px;border-radius:6px;background:#fff;box-shadow:0 4px 10px -4px rgba(0,0,0,.2);display:grid;place-items:center;font-size:12px;font-weight:700;color:#2457D6;animation-name:o2drop}
.a-doc .fold{position:absolute;left:50%;bottom:30px;margin-left:-32px;width:64px;height:34px;border-radius:6px 6px 8px 8px;background:#2457D6}
.a-doc .ok{position:absolute;left:0;right:0;bottom:8px;text-align:center;color:#1F9D5A;opacity:0;animation-name:o2pop}
@keyframes o2drop{0%,14%{transform:none;opacity:1}40%{transform:translateY(34px) scale(.8);opacity:1}46%,92%{transform:translateY(34px) scale(.8);opacity:0}100%{opacity:0}}
/* reports: bars grow */
.a-rep{display:flex;align-items:flex-end;gap:10px;padding:16px 22px}
.a-rep i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#5B8CF0,#2457D6);height:var(--h);transform-origin:bottom;animation-name:o2bar}
.a-rep i:nth-child(2){animation-delay:.12s}.a-rep i:nth-child(3){animation-delay:.24s}.a-rep i:nth-child(4){animation-delay:.36s}.a-rep i:nth-child(5){animation-delay:.48s}
@keyframes o2bar{0%,8%{transform:scaleY(.08)}34%,90%{transform:scaleY(1)}100%{transform:scaleY(.08)}}
@media (prefers-reduced-motion:reduce){.o2-a *{animation:none!important;opacity:1!important;width:auto!important}}

/* calculator: a gauge whose needle follows your admin hours */
.o2-gauge{position:relative;width:200px;margin:0 0 34px;color:#fff}
.o2-gauge svg{width:200px;height:110px;display:block;overflow:visible}
.o2-gauge .trk,.o2-gauge .val{fill:none;stroke-width:10;stroke-linecap:round}
.o2-gauge .trk{stroke:rgba(255,255,255,.18)}
.o2-gauge .val{stroke:#A9CBFF;stroke-dasharray:100;stroke-dashoffset:60;transition:stroke-dashoffset .6s cubic-bezier(.3,.7,.2,1)}
.o2-gauge .tk{stroke:rgba(255,255,255,.35);stroke-width:2}
.o2-gauge #o2-needle{transform-origin:100px 100px;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.o2-gauge #o2-needle line{stroke:#fff;stroke-width:3;stroke-linecap:round}
.o2-gauge #o2-needle circle{fill:#fff}
.o2-gauge .lbl{position:absolute;left:0;right:0;bottom:-22px;text-align:center;font:600 10.5px/1 var(--sans,system-ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.o2-a .st,.o2-a .f,.o2-a .no{border:0;box-shadow:none}
.a-inv .st{background:none!important;padding:0!important;border-radius:0!important;width:auto!important}

/* How it works (Option 2): step panels on warm paper, like the animated feature cards */
.pvis2{background:#F4F2ED!important;box-shadow:inset 0 0 0 1px rgba(20,20,20,.05)!important}
.pvis2 .gw,.pvis2 .mini{background:#fff!important;box-shadow:0 18px 40px -26px rgba(11,27,68,.35),0 0 0 1px rgba(20,20,20,.05)!important}
/* the silk replaces the old sky image completely once it is running */

/* How it works: the routine list ticks itself off, one item after another, then starts again */
.rw-live li{position:relative;transition:color .5s ease,opacity .5s ease;opacity:.55}
.rw-live li::before{transition:opacity .4s ease;opacity:.25}
.rw-live li.done{opacity:1}
.rw-live li.done::before{opacity:1}
.rw-live li.busy{opacity:1;color:#fff}
.rw-live li.busy::after{content:"";position:absolute;left:-12px;right:-12px;top:-6px;bottom:-6px;z-index:-1;border-radius:12px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);animation:rwfade .5s ease both}
@keyframes rwfade{from{opacity:0}to{opacity:1}}
.rwc2 li.pending{position:relative}
.rwc2 li.pending::after{content:"Needs your OK";margin-left:10px;padding:3px 9px;border-radius:999px;background:#FBEFE3;color:#B7791F;font:600 11.5px/1.4 var(--sans,system-ui);animation:rwpulse 2.4s ease-in-out infinite}
@keyframes rwpulse{50%{box-shadow:0 0 0 6px rgba(224,164,58,.15)}}

/* the site hides any canvas inside .sky (left from the old sky video); show the live sky */
.sky .lsky canvas,.lsky canvas{opacity:1!important;position:static!important}
.pv-av{font-size:12px!important}

/* ═════════ Phones (Option 2) ═════════ */
@media (max-width:760px){
  /* labels stay readable */
  .cs-facts dt,.wf2-t,.ind-h,.slip-doc,.pv-av{font-size:12px!important}

  /* what we automate: four cards on a phone; the "Doing something else by hand?" bar covers the rest */
  .nx-was > li:nth-child(n+5){display:none}

}

/* made for businesses like yours: nobody left out */
.o2-more{margin:22px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:14.5px;color:#6E6A64}
.o2-more span{padding:7px 13px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(20,20,20,.07)}
.o2-more b{font-weight:600;color:#2457D6}
/* homepage steps: warm paper tiles with white cards, matching the How it works page */
.steps .tile{background:#F4F2ED!important;box-shadow:inset 0 0 0 1px rgba(20,20,20,.05)!important}
.steps .tile .mini{background:#fff!important;box-shadow:0 18px 40px -26px rgba(11,27,68,.35),0 0 0 1px rgba(20,20,20,.05)!important}

/* ═════════ Footer on phones: its own simple layout ═════════ */
.fm{display:none}
@media (max-width:760px){
  .foot2 .ftop,.foot2 .fbot{display:none!important}
  .foot2 .fcta{padding:52px 0 36px;text-align:left;border-bottom:1px solid rgba(255,255,255,.14)}
  .foot2 .fcta h2{margin:0 0 12px;font-size:clamp(32px,9vw,40px)}
  .foot2 .fcta p{font-size:15.5px;margin:0 0 22px}
  .foot2 .fcta-b{justify-content:flex-start;gap:16px}
  .fm{display:block;padding:28px 0 26px;color:#fff}
  .fm-brand .brand{font-size:26px}
  .fm-contact{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 26px}
  .fm-btn{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font:600 14px/1.2 var(--sans,system-ui);text-align:center}
  .fm-links{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .fm-links p{margin:0 0 6px!important;font:700 12px/1 var(--sans,system-ui)!important;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
  .fm-links a{display:flex;align-items:center;min-height:40px;color:rgba(255,255,255,.88);text-decoration:none;font-size:15.5px}
  .fm-base{margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;line-height:1.8;color:rgba(255,255,255,.55)}
  .fm-base a{color:inherit;text-decoration:none}
  /* calculator: room between the gauge and the label under it */
  .o2-gauge{margin-bottom:40px}
}
@media (max-width:760px){.foot2 .fcall{display:none}.fm-base{padding-right:70px}}

/* ═════════ Review fixes ═════════ */
/* 1. band headlines sit on the blue, not on the pale top of the gradient */
.shift .shift-bg{background:linear-gradient(180deg,#F7F5F0 0%,#C9DCFF 5%,#6F9DF3 11%,#2457D6 22%,#16337F 62%,#0B1B44 100%)!important}
.shift .shift-bg .lsky{-webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 6%,#000 22%)!important;mask-image:linear-gradient(180deg,transparent 0%,transparent 6%,#000 22%)!important}
.shift .eb,.shift .shift-h{text-shadow:0 1px 18px rgba(11,27,68,.45)}
/* 3. phone client strip: the text-only name drops so the row stays even */
@media (max-width:760px){.nx-logos .nx-lgi:has(.nx-lg-seva){display:none}}
/* 5. small labels at least 12px */
.o2-gauge .lbl{font-size:12px}
.bc-t,.pv-url,.bw-bar span{font-size:12px!important}
/* 6. "See all our work" on its own line on phones */
@media (max-width:760px){.chead .lede .nx-link{display:flex;width:fit-content;margin:10px auto 0}}
/* 7. keep the floating chat button clear of the footer's last line */
.foot2 .fbot{padding-right:230px}
@media (max-width:760px){.foot2 .fbot{padding-right:0}}
/* 8. with reduced motion, each card rests on its finished state */
@media (prefers-reduced-motion:reduce){
  .a-inbox .r{opacity:1!important;transform:none!important}.a-inbox .dots{display:none}
  .a-web .f i{width:90px!important}.a-web .lead,.a-cal .bk,.a-doc .ok{opacity:1!important}
  .a-cal .new{background:#2457D6!important}
  .a-inv .od{opacity:0!important}.a-inv .pd{opacity:1!important}
  .a-doc .file{opacity:0!important}
  .a-rep i{transform:none!important}
}

/* step cards on every page: one subtle blue wash behind the white card (homepage and How it works match) */
.steps .tile,.pvis2{background:linear-gradient(160deg,#EEF3FB 0%,#E2EBFA 55%,#D6E3F8 100%)!important;box-shadow:inset 0 0 0 1px rgba(36,87,214,.08)!important}
/* calculator result on phones: the two figures stack as clean rows so big numbers never overflow */
@media (max-width:760px){
  .nx-cs{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .nx-cs li{display:flex!important;align-items:baseline;gap:12px;padding:14px 16px!important}
  .nx-cs li b{font-size:26px!important;white-space:nowrap;flex:none}
  .nx-cs li span{font-size:14.5px!important;line-height:1.3}
}

/* ═════════ Phone layout, final pass: fewer things per screen, swipe instead of long stacks ═════════ */
@media (max-width:760px){
  /* hero: the call to action shows without scrolling */
  .hero.vh h1{font-size:clamp(36px,10.5vw,44px)!important;line-height:1.04}
  .hero.vh .sub{font-size:16px}

  /* problem: two compact stat rows, number beside its line */
  .shift .srow.s3{grid-template-columns:1fr!important;gap:10px!important;margin-top:26px}
  .shift .srow.s3 .sb:nth-child(3){display:none!important}
  .shift .srow .sb{display:grid!important;grid-template-columns:auto 1fr;align-items:center;column-gap:16px;padding:16px 16px!important}
  .shift .srow .sb .sn{font-size:30px!important;white-space:nowrap;grid-row:span 2}
  .shift .srow .sb .sl{margin:0!important;font-size:14px!important}
  .shift .srow .sb .src{margin:4px 0 0!important;font-size:12px!important}

  /* what we automate + our work: one swipeable row each, with the next card peeking */
  .nx-was,.nx-bento{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;margin-left:-22px!important;margin-right:-22px!important;padding:4px 22px 14px!important;scrollbar-width:none;grid-template-columns:none!important}
  .nx-was::-webkit-scrollbar,.nx-bento::-webkit-scrollbar{display:none}
  .nx-was > li{flex:0 0 84%;scroll-snap-align:start;margin:0!important}
  .nx-was > li:nth-child(n+5){display:none}
  .nx-bento > .nx-case{flex:0 0 86%;scroll-snap-align:start;margin:0!important;grid-column:auto!important;grid-row:auto!important}
  .nx-was > li .o2-a{height:104px}

  /* calculator: one slider on a phone; the other two keep their defaults */
  .o2-gauge{margin:0 auto 38px!important;transform:scale(.9);transform-origin:top center}
  .o2-gauge .lbl{bottom:-24px}
  .nx-co .nx-cl2{margin-top:6px}

  /* how it works steps: tighter cards, no empty band */
  .steps .tile{min-height:0!important;padding:18px 14px!important}
  .steps li{margin-bottom:18px}
}
@media (max-width:760px){
  .nx-was > li .o2-a{height:132px}
  .a-inbox .q,.a-inbox .r{max-width:72%;font-size:12.5px}
  .a-inbox .q{top:10px}.a-inbox .r{bottom:10px}
}

/* phone footer: contact as plain links under the logo */
@media (max-width:760px){
  .fm-contact{display:flex!important;flex-direction:column;gap:2px;margin:14px 0 24px!important}
  .fm-contact a{display:flex;align-items:center;min-height:36px;color:#fff;text-decoration:none;font:400 18px/1.3 var(--serif,Georgia)}
}

/* How it works on the homepage: the steps stack as cards while you scroll, like the How it works page */
.how-sec .steps{display:grid!important;grid-template-columns:1fr!important;gap:22px!important;max-width:1080px;margin:40px auto 0!important;counter-reset:none}
.how-sec .steps > li{position:sticky;top:calc(96px + var(--k,0) * 18px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"n tile" "h tile" "p tile";align-content:center;column-gap:clamp(24px,4vw,56px);padding:clamp(24px,3.4vw,48px);border-radius:30px;background:#fff;box-shadow:0 1px 0 rgba(20,20,20,.04),0 30px 60px -44px rgba(11,27,68,.4),0 0 0 1px rgba(20,20,20,.05);min-height:clamp(300px,30vw,380px)}
.how-sec .steps > li:nth-child(1){--k:0}.how-sec .steps > li:nth-child(2){--k:1}.how-sec .steps > li:nth-child(3){--k:2}
.how-sec .steps > li > .tile{grid-area:tile;align-self:stretch;margin:0!important}
.how-sec .steps > li > .n{grid-area:n;align-self:end}
.how-sec .steps > li > h3{grid-area:h;margin:6px 0 10px}
.how-sec .steps > li > p{grid-area:p;align-self:start;max-width:34ch}
.how-sec .steps::before,.how-sec .steps::after,.how-sec .steps > li::before,.how-sec .steps > li::after{display:none!important}
@media (max-width:760px){
  .how-sec .steps > li{top:calc(84px + var(--k,0) * 12px);grid-template-columns:1fr;grid-template-areas:"tile" "n" "h" "p";padding:14px 14px 22px;min-height:0;border-radius:24px}
  .how-sec .steps > li > .tile{margin-bottom:16px!important}
  .how-sec .steps > li > .n,.how-sec .steps > li > h3,.how-sec .steps > li > p{margin-left:8px;margin-right:8px}
}

/* chat button: a quiet, refined launcher instead of the loud gradient bubble */
.mc-launch .mc-avatar{background:#0B1B44!important;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset!important}
.mc-launch .mc-avatar .mk{width:21px!important;height:21px!important}
.mc-launch .mc-online{width:9px!important;height:9px!important;box-shadow:0 0 0 2px #0B1B44!important}
.mc-launch{background:rgba(255,255,255,.92)!important;color:#141414!important;border:1px solid rgba(20,20,20,.08)!important;box-shadow:0 16px 36px -18px rgba(11,27,68,.45)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mc-launch .mc-launch-text{color:#141414!important}
.mc-launch .mc-launch-text small{color:#6E6A64!important}
@media (max-width:760px){
  .mc-launch{width:48px!important;height:48px!important;padding:0!important;background:#0B1B44!important;border:0!important;box-shadow:0 10px 26px -10px rgba(11,27,68,.6)!important}
  .mc-launch .mc-avatar{width:48px!important;height:48px!important}
}
/* the shader pins its canvas size inline; keep it filling its frame so a window resize redraws at the new size */
.lsky canvas{width:100%!important;height:100%!important;max-width:none!important}