:root{--navy:#16304F;--navy-mid:#1B3A5C;--navy-line:#29496B;--steel:#4A7290;--steel-pale:#8FB0C6;--pale:#C3D2DD;--gold:#C9A84C;--gold-ink:#7A5E17;--cream:#FBFAF7;--alt:#F3F0E8;--border:#E3DDD0;--ink:#3B4753;--muted:#6B7684}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Public Sans',Helvetica,Arial,sans-serif;line-height:1.5;text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--steel);text-decoration:none}
a:hover{color:var(--navy)}
h1,h2,h3{color:var(--navy);margin:0;letter-spacing:-0.01em}
p{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.14em;color:var(--steel);font-weight:500;margin-bottom:12px}
.eyebrow-light{color:var(--steel-pale)}
.num{font-weight:700;font-size:13.5px;letter-spacing:.04em;color:var(--steel)}
.btn{display:inline-block;border:none;border-radius:3px;padding:15px 26px;font:700 15px/1 'Public Sans',Helvetica,Arial,sans-serif;cursor:pointer;background:var(--navy);color:#fff}
.btn:hover{background:var(--steel);color:#fff}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:#E0C175;color:var(--navy)}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-sm{padding:11px 20px;font-size:14px}
section{padding:clamp(48px,8vw,88px) 0}
.sec-white{background:#fff}
.sec-cream{background:var(--cream)}
.sec-alt{background:var(--alt)}
.band{background:var(--navy);padding:72px 0;position:relative;overflow:hidden}
.band h1{color:#fff;font-size:clamp(26px,4vw,38px);line-height:1.15}
.band p{color:var(--pale);font-size:15.5px;max-width:600px}
.mark{position:absolute;right:-16px;bottom:-24px;display:flex;align-items:flex-end;gap:8px;opacity:.1;pointer-events:none}
.mark i{display:block;width:12px;background:#fff}
.mark i:nth-child(1){height:50px}.mark i:nth-child(2){height:84px}.mark i:nth-child(3){height:130px;background:var(--gold)}.mark i:nth-child(4){height:76px}
/* header */
.site-head{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border)}
.head-in{max-width:1240px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:14.5px;font-weight:600;color:var(--ink)}
.nav a:hover,.nav a[aria-current=page]{color:var(--navy)}
.has-sub{position:relative}
.has-sub>span{font-size:14.5px;font-weight:600;color:var(--ink);cursor:default;display:flex;align-items:center;gap:6px}
.has-sub>span::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.sub{position:absolute;top:26px;left:-16px;background:#fff;border:1px solid var(--border);border-radius:4px;box-shadow:0 12px 32px rgba(22,48,79,.14);min-width:250px;padding:8px;display:none;flex-direction:column}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex}
.sub a{padding:10px 14px;font-size:14px;font-weight:500;color:var(--navy);border-radius:3px}
.sub a:hover{background:var(--cream)}
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:none;padding:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--navy);margin:5px 0}
#navtoggle{display:none}
.nav-m{display:none;border-top:1px solid var(--border);padding:8px 24px 20px;flex-direction:column}
.nav-m a{padding:13px 4px;font-size:15px;font-weight:600;color:var(--navy);border-bottom:1px solid var(--alt)}
.nav-m a.sub-link{padding-left:16px;font-size:14px;font-weight:500;color:var(--ink)}
#navtoggle:checked~.nav-m{display:flex}
/* grids */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border)}
.g3>*{background:#fff;padding:32px 28px}
.g-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:1px;background:var(--border);border:1px solid var(--border)}
.g-auto>*{background:#fff;padding:32px 28px;display:flex;flex-direction:column}
.cols{display:flex;flex-wrap:wrap;gap:48px}
.col{flex:1 1 380px;min-width:0}
.three{display:flex;flex-wrap:wrap;gap:36px}
.three>*{flex:1 1 240px;min-width:0}
.rule{width:32px;height:3px;background:var(--navy);margin:14px 0 18px}
.card-title{font-size:17px;font-weight:700;margin-bottom:10px}
.card-copy{font-size:14px;line-height:1.55;color:var(--ink);flex:1;margin-bottom:18px}
.ico{color:var(--steel);margin-bottom:18px}
.ph{background:repeating-linear-gradient(135deg,#EDE9DD,#EDE9DD 10px,#E3DDD0 10px,#E3DDD0 20px);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--muted);text-align:center;padding:16px}
/* health check */
.hc-head{background:var(--navy);border-radius:4px;padding:40px 44px;margin-bottom:48px}
.hc-head h2{color:#fff;font-size:clamp(24px,3vw,32px);margin:0}
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:48px}
.who>div{display:flex;align-items:center;gap:14px}
.who-ic{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--navy);display:flex;align-items:center;justify-content:center;color:var(--navy);flex-shrink:0}
.who span{font-size:14.5px;font-weight:600;color:var(--ink)}
.inc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:48px}
.inc>div{background:#fff;padding:24px 22px;display:flex;flex-direction:column;gap:12px}
.inc strong{font-size:14.5px;color:var(--navy)}
.pill{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;color:var(--gold-ink);font-weight:700;border:1px solid var(--gold);border-radius:999px;padding:5px 12px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:40px}
.steps>div{background:#fff;padding:26px 24px}
.steps h3{font-size:16px;margin:10px 0 6px}
.steps p{font-size:13.5px;line-height:1.55}
.offer{background:var(--navy);border-top:3px solid var(--gold);border-radius:2px;padding:36px 40px;position:relative;overflow:hidden;display:flex;flex-wrap:wrap;gap:36px;align-items:center;justify-content:space-between}
.price{font-size:54px;line-height:1;font-weight:700;letter-spacing:-.02em;color:#fff}
.flat{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.14em;color:var(--gold);font-weight:700;margin-top:8px}
.offer-note{max-width:320px}
.offer-note strong{display:block;font-size:15px;color:#fff;margin-bottom:6px}
.offer-note p{font-size:13.5px;line-height:1.55;color:var(--pale)}
.vline{width:1px;align-self:stretch;background:var(--navy-line)}
.turn{font-size:11.5px;letter-spacing:.1em;font-weight:600;color:var(--steel-pale);margin-top:12px}
/* ai automation */
.ai-card{background:var(--navy);border-top:1px solid var(--gold);padding:22px 24px}
.ai-card h3{color:#fff;font-size:16px;margin-bottom:6px}
.ai-card p{font-size:14px;line-height:1.55;color:var(--pale)}
.ai-ic{color:var(--steel-pale);margin-bottom:10px}
/* how we work */
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:18px}
.badges>div{flex:1 1 220px;display:flex;min-width:0}
.badge{width:52px;height:52px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;color:#E5EDF1}
.arrow{flex:0 0 40px!important;color:var(--gold)}
.labels{display:flex;flex-wrap:wrap;gap:16px}
.labels>div{flex:1 1 220px;min-width:0}
.labels h3{font-size:19px;margin-bottom:10px}
.labels p{font-size:15px;line-height:1.6}
.spacer{flex:0 0 40px!important}
/* lists */
.bullets{display:flex;flex-direction:column;gap:14px;margin-bottom:40px}
.bullets div{display:flex;gap:14px;align-items:flex-start}
.bullets i{width:6px;height:6px;background:var(--steel);margin-top:8px;flex-shrink:0;display:block}
.bullets.navy i{background:var(--navy)}
.bullets span{font-size:15px;line-height:1.55}
.other a{display:block;padding:13px 0;border-bottom:1px solid var(--alt);font-size:14.5px;font-weight:600;color:var(--navy)}
.other a:hover{color:var(--steel)}
/* team rail */
.rail-wrap{position:relative}
.rail{display:flex;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:4px 52px 16px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>div{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;justify-content:center}
.member{width:100%;max-width:480px;background:#fff;border:1px solid var(--border);border-radius:4px;padding:36px 32px}
.member h3{font-size:18px;margin-bottom:4px}
.member .role{font-size:13.5px;color:var(--steel);font-weight:600;margin-bottom:16px}
.member p{font-size:14.5px;line-height:1.65}
.rail-btn{position:absolute;top:72px;z-index:10;width:40px;height:40px;border-radius:50%;background:#fff;border:1.5px solid var(--navy);color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center}
.rail-btn:hover{background:var(--navy);color:#fff}
.rail-prev{left:-8px}.rail-next{right:-8px}
/* forms */
.field{width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:3px;font-size:14.5px;color:var(--navy);font-family:inherit;background:#fff}
.form{display:flex;flex-direction:column;gap:16px}
.form-row{display:flex;flex-wrap:wrap;gap:16px}
.form-row .field{flex:1 1 160px}
.callout{background:var(--alt);border:1px solid var(--border);border-radius:4px;padding:28px;margin-bottom:28px}
.callout h3{font-size:18px;margin-bottom:8px}
.callout p{font-size:14px;line-height:1.6;margin-bottom:12px}
/* cta + footer */
.cta{background:var(--alt);padding:56px 0;border-top:1px solid var(--border)}
.cta-in{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.cta h2{font-size:24px;margin-bottom:6px}
.cta p{font-size:14.5px}
.site-foot{background:var(--navy);padding:56px 0 32px}
.foot-cols{display:flex;flex-wrap:wrap;gap:40px;margin-bottom:40px}
.foot-cols>div:first-child{flex:1 1 260px}
.foot-cols>div{flex:1 1 180px}
.foot-h{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;color:#6F93AC;font-weight:600;margin-bottom:16px}
.foot-links{display:flex;flex-direction:column;gap:10px}
.site-foot a{font-size:14px;color:var(--pale)}
.site-foot a:hover{color:#fff}
.foot-tag{font-size:13.5px;line-height:1.6;color:var(--steel-pale);max-width:290px}
.foot-logo{height:26px;margin-bottom:16px}
.foot-base{border-top:1px solid var(--navy-line);padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:#6F93AC}
.foot-base div{display:flex;gap:20px}
@media(max-width:1024px){.inc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.g3,.steps{grid-template-columns:1fr}}
@media(max-width:900px){.nav,.head-cta{display:none}.burger{display:flex}.arrow{display:none!important}.spacer{display:none!important}.badges>div,.labels>div{flex:1 1 100%}}
@media(max-width:720px){.g3,.inc,.steps{grid-template-columns:1fr}.hc-head{padding:28px 24px}.offer{padding:28px 24px}.band{padding:56px 0}.rail{padding:4px 44px 16px}}
/* automation data visual */
.viz{background:#fff;border:1px solid var(--border);border-radius:4px;padding:30px 28px;flex:1;display:flex;flex-direction:column}
.viz-k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;color:var(--steel);font-weight:700;margin-bottom:18px}
.viz-big{display:flex;align-items:flex-end;gap:12px;margin-bottom:6px}
.viz-big b{font-size:62px;line-height:.9;font-weight:700;letter-spacing:-.03em;color:var(--navy)}
.viz-big span{font-size:16px;font-weight:700;color:var(--navy);padding-bottom:6px}
.viz-uline{width:72px;height:3px;background:var(--gold);margin:14px 0 10px}
.viz-sub{font-size:13px;line-height:1.5;color:var(--muted);margin-bottom:26px}
.db{margin-bottom:20px}
.db-lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.db-lab>span:first-child{font-size:13.5px;color:var(--ink)}
.db-val{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--muted)}
.db-val b:first-child{color:var(--navy)}
.db-val b:last-child{color:var(--gold-ink)}
.db-track{position:relative;height:2px;background:#EDE9DD}
.db-span{position:absolute;top:0;height:2px;background:var(--gold)}
.dot{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%)}
.dot-b{background:var(--navy)}
.dot-a{background:var(--gold);border:2px solid #fff}
.viz-key{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted);border-top:1px solid var(--border);padding-top:16px;margin-top:6px}
.viz-key span{display:flex;align-items:center;gap:8px}
.viz-key i{width:10px;height:10px;border-radius:50%;display:block}
.viz-note{font-size:11.5px;line-height:1.5;color:var(--muted);margin-top:10px}
/* proof band */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;background:var(--border)}
.proof>div{background:#fff;padding:8px 32px;display:flex;flex-direction:column;align-items:center;text-align:center}
.proof .r{width:28px;height:3px;background:var(--gold);margin-bottom:20px}
.proof .n{font-size:64px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--navy)}
.proof .l{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.16em;color:var(--steel);font-weight:500;margin-top:16px}
/* budget vs actual extract */
.bva{background:#fff;border:1px solid var(--border);border-radius:4px;padding:22px 20px;margin-bottom:32px}
.bva-k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;color:var(--steel);font-weight:700;margin-bottom:16px}
.bva table{width:100%;border-collapse:collapse}
.bva th{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.1em;color:var(--muted);font-weight:500;text-align:right;padding:0 0 8px;border-bottom:1px solid var(--border)}
.bva th:first-child{text-align:left}
.bva td{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;color:var(--navy);text-align:right;padding:9px 0;border-bottom:1px solid var(--alt)}
.bva td:first-child{text-align:left;color:var(--ink)}
.bva tr:last-child td{border-bottom:none}
.bva .up{color:var(--navy);font-weight:700}
.bva .dn{color:var(--gold-ink);font-weight:700}
.bva-n{font-size:11px;line-height:1.5;color:var(--muted);margin-top:12px}
/* team card detail */
.member{max-width:560px}
.member .tag{display:inline-block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;color:var(--gold-ink);border:1px solid var(--gold);border-radius:999px;padding:4px 10px;margin-bottom:14px}
.member .comp-k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:500;margin:20px 0 10px}
.comps{display:flex;flex-wrap:wrap;gap:8px}
.comps span{font-size:11.5px;color:var(--navy);background:var(--alt);border:1px solid var(--border);border-radius:3px;padding:5px 10px}
.member{border-top:3px solid var(--navy)}

/* ---- mobile fixes ---- */
@media(max-width:720px){
  .vline{display:none}
  .offer{gap:24px}
  .rail-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
  .rail{order:1;flex:1 1 100%;padding:4px 0 16px}
  .rail-btn{position:static;order:2;top:auto;left:auto;right:auto}
}




/* how we work — column layout */
.hww{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:48px}
.hww-rule{height:2px;background:var(--navy);margin-bottom:26px}
.hww-ic{width:52px;height:52px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;color:#E5EDF1;margin-bottom:24px}
.hww h3{font-size:19px;margin-bottom:10px}
.hww p{font-size:15px;line-height:1.6}
.badges,.mob-badge,.mob-arrow,.spacer,.labels,.vline{display:none!important}

/* faq accordion */
.faq{border-top:1px solid var(--border);margin-bottom:48px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-size:16.5px;font-weight:700;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--steel)}
.faq summary i{flex:0 0 12px;height:12px;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;background:var(--gold);transition:opacity .15s}
.faq summary i::before{left:0;top:5px;width:12px;height:2px}
.faq summary i::after{left:5px;top:0;width:2px;height:12px}
.faq details[open] summary i::after{opacity:0}
.faq details[open] summary{color:var(--navy)}
.faq-a{padding:0 0 24px;max-width:780px}
.faq-a p{font-size:15px;line-height:1.7;color:var(--ink)}
.faq-foot{border-top:1px solid var(--border);padding-top:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.faq-foot p{font-size:16px;font-weight:700;color:var(--navy)}
/* industries */
.ind-t{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;line-height:1.7;color:var(--steel);border-top:1px solid var(--border);padding-top:14px}
.ind-note{font-size:14.5px;line-height:1.65;color:var(--muted);margin-top:32px;max-width:640px}
/* security block */
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:32px;margin-top:28px}
.sec-item h3{font-size:15.5px;margin-bottom:8px}
.sec-item p{font-size:14px;line-height:1.6;color:var(--ink)}
.sec-ic{color:var(--steel);margin-bottom:12px}
/* lead magnet */
.magnet{border:1px solid var(--border);border-radius:4px;background:#fff;padding:28px 32px;display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;margin-top:40px}
.magnet-t{display:flex;align-items:center;gap:18px;max-width:460px}
.magnet-t .mi{flex:0 0 auto;color:var(--steel)}
.magnet-t h3{color:var(--navy);font-size:16px;margin-bottom:5px}
.magnet-t p{font-size:13.5px;line-height:1.55;color:var(--ink)}
.magnet-f{display:flex;flex-wrap:wrap;gap:10px;min-width:280px}
.magnet-f input{flex:1 1 190px;padding:12px 14px;border:1px solid var(--border);border-radius:3px;font-size:14px;background:#fff;color:var(--navy);font-family:inherit}
.magnet-f .btn{padding:13px 20px;font-size:14px}
/* calendar embed */
.cal{border:1px solid var(--border);border-radius:4px;background:var(--alt);padding:28px;text-align:center;margin-top:28px}
.cal p{font-size:14px;line-height:1.6;color:var(--muted)}
.cal .k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;color:var(--steel);font-weight:700;margin-bottom:10px}

/* systems reader */
.sysr{background:var(--navy);position:relative;overflow:hidden;padding:clamp(36px,5vw,56px) 0}
.sysr-in{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);align-items:center}
.sysr-win{flex:1 1 360px;min-width:0;position:relative;height:var(--sysBox,210px);-webkit-mask-image:linear-gradient(#0000,#000 26%,#000 74%,#0000);mask-image:linear-gradient(#0000,#000 26%,#000 74%,#0000)}
.sysr-roll{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.sysr-roll li{list-style:none;height:var(--sysRow,70px);display:flex;align-items:center;padding-left:clamp(18px,2vw,28px);font-size:clamp(21px,3.4vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:rgba(255,255,255,.2);transition:color .45s,transform .45s;transform-origin:left center}
.sysr-roll li.on{color:#fff}
.sysr-frame{position:absolute;left:0;right:0;top:calc((var(--sysBox,210px) - var(--sysRow,70px)) / 2);height:var(--sysRow,70px);pointer-events:none}
.sysr-frame::before,.sysr-frame::after{content:"";position:absolute;left:clamp(18px,2vw,28px);right:0;height:1px;background:rgba(201,168,76,.28)}
.sysr-frame::before{top:0}.sysr-frame::after{bottom:0}
.sysr-tick{position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:42%;background:var(--gold)}
.sysr-txt{flex:1 1 340px;min-width:0;position:relative;min-height:112px}
.sysr-k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;color:var(--gold);font-weight:700;margin-bottom:14px}
.sysr-cap{position:absolute;left:0;right:0;top:34px;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s;font-size:clamp(15px,1.5vw,17px);line-height:1.6;color:#fff;max-width:420px}
.sysr-cap.on{opacity:1;transform:none}
.sysr-bar{position:absolute;left:0;bottom:0;width:100%;max-width:420px;height:2px;background:rgba(255,255,255,.14)}
.sysr-bar i{display:block;height:2px;background:var(--gold);width:0}
.sysr-bar i.run{animation:sysfill 2900ms linear forwards}
.sysr:hover .sysr-bar i{animation-play-state:paused}
@keyframes sysfill{from{width:0}to{width:100%}}
.sysr-dots{display:flex;gap:7px;margin-top:22px;position:relative}
.sysr-dots button{width:22px;height:3px;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.22);transition:background .3s}
.sysr-dots button.on{background:var(--gold)}
.sysr-note{max-width:1240px;margin:26px auto 0;padding:0 24px;font-size:13px;line-height:1.6;color:#8FB0C6}
@media(prefers-reduced-motion:reduce){.sysr-roll,.sysr-roll li,.sysr-cap{transition:none}.sysr-bar i.run{animation:none;width:100%}}
@media(max-width:720px){.sysr-win{flex:1 1 100%}.sysr-txt{flex:1 1 100%}}

/* ================= MOBILE / TABLET PASS ================= */
html,body{overflow-x:hidden}

/* iOS zooms any input under 16px on focus — lift them on touch widths */
@media(max-width:820px){
  .field,.magnet-f input,input[type=email],input[type=text],textarea{font-size:16px}
}

/* generous tap targets */
@media(max-width:900px){
  .nav-m a{padding:15px 4px}
  .btn{padding:16px 24px}
  .btn-sm{padding:14px 20px}
  .other a{padding:16px 0}
  .faq summary{padding:20px 0;min-height:56px}
  .sysr-dots{gap:4px;margin-top:18px}
  .sysr-dots button{width:34px;height:44px;background:none;position:relative}
  .sysr-dots button::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:3px;transform:translateY(-50%);background:rgba(255,255,255,.22);transition:background .3s}
  .sysr-dots button.on::after{background:var(--gold)}
}

/* tablet */
@media(max-width:1024px){
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offer{padding:30px 28px}
  .hc-head{padding:34px 32px}
}

/* phone */
@media(max-width:720px){
  section{padding:44px 0}
  .band{padding:52px 0}
  .wrap{padding:0 20px}
  .g3,.inc,.steps,.g-auto{grid-template-columns:1fr}
  .hww{gap:34px}
  .price{font-size:44px}
  .offer{padding:26px 22px;gap:22px}
  .offer-note{max-width:none}
  .magnet{padding:22px 20px;gap:18px}
  .magnet-t{gap:14px}
  .magnet-f{min-width:0;width:100%}
  .magnet-f input{flex:1 1 100%}
  .magnet-f .btn{width:100%}
  .cta-in{gap:18px}
  .cta-in .btn{width:100%;text-align:center}
  .faq-foot{gap:14px}
  .faq-foot .btn{width:100%;text-align:center}
  .member{padding:26px 22px}
  .sysr{padding:30px 0}
  .sysr-in{padding:0 20px;gap:22px}
  .sysr-win{--sysBox:132px;--sysRow:44px;flex:1 1 100%}
  .sysr-roll li{font-size:21px;padding-left:16px}
  .sysr-txt{flex:1 1 100%;min-height:96px}
  .sysr-cap{max-width:none;font-size:15px}
  .sysr-bar{max-width:none}
  .sysr-note{padding:0 20px;margin-top:20px}
  .bva{padding:18px 16px}
  .bva td{font-size:12px}
  .bva th{font-size:9.5px}
  .foot-cols{gap:28px}
  .foot-base{gap:14px}
  .foot-base div{flex-wrap:wrap;gap:14px}
  .stack-note,.ind-note{margin-top:18px}
}

/* very small phones */
@media(max-width:400px){
  .proof .n{font-size:52px}
  .sysr-roll li{font-size:19px;padding-left:14px}
  .price{font-size:40px}
}

.hd-badge{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(201,168,76,.5);display:flex;align-items:center;justify-content:center;margin-bottom:20px}