/* Enebill website styles */

/* ---- Base, layout helpers and responsive rules ---- */
html{scroll-padding-top:80px;}
body{margin:0;background:#fff;font-family:'Poppins',sans-serif;color:#0A0F14;-webkit-font-smoothing:antialiased;}
*{box-sizing:border-box;}
a{color:#0FA96F;text-decoration:none;}
a:where(:hover){color:#0A8A5A;}
img{display:block;max-width:100%;height:auto;}
.ai-assistant-frame{width:fit-content;max-width:100%;justify-self:center;}
.hero-dashboard-image,.billing-run-image{width:max(100%, 550px);max-width:none;}
input,select,textarea{font-family:'Poppins',sans-serif;}
summary::-webkit-details-marker{display:none;}
summary::marker{content:'';}
details[open] summary span{transform:rotate(45deg);}
details summary span{display:inline-block;transition:transform .2s ease;}
@media (max-width:1080px){
  .problem-8,
  .engine-40,
  .compliance-1,
  .engage-3{grid-template-columns:1fr 1fr !important;}
  .hero-12{grid-template-columns:1fr 1fr !important;}
  .header-2,
  .hero-3,
  .problem-2,
  .roadmap-2,
  .demo-3,
  .faq-1,
  .footer-2{padding-left:24px !important;padding-right:24px !important;}
  header > div{gap:16px !important;}
  header nav{gap:12px !important;}
  header > div > a[href="#demo"]{padding:10px 14px !important;font-size:13px !important;}
}
@media (max-width:992px){
  .roadmap-layout{grid-template-columns:minmax(0,1fr) !important;}
  .roadmap-calculator,.roadmap-next{width:100%;min-width:0;}
}
@media (max-width:860px){
  header nav#site-navigation{display:none !important;position:fixed !important;top:66px;left:0;right:0;z-index:61;flex-direction:column !important;align-items:stretch;gap:0 !important;margin:0 !important;padding:8px 24px 16px;background:#fff;border-bottom:1px solid #E4E9E9;box-shadow:0 14px 24px rgba(10,15,20,.10);max-height:calc(100vh - 66px);overflow-y:auto;}
  header nav#site-navigation.is-open{display:flex !important;}
  header nav#site-navigation a{padding:13px 0;border-bottom:1px solid #E4E9E9;}
  header nav#site-navigation a:last-child{border-bottom:none;}
  #menu-toggle{display:flex !important;margin-left:0 !important;}
  header > div > a[href="#demo"]{margin-left:auto !important;}
  html{scroll-padding-top:66px;}
  header > div{height:66px !important;gap:12px !important;}
  .hero-12,
  .problem-5,
  .problem-8,
  .engine-4,
  .engine-7,
  .engine-13,
  .engine-29,
  .engine-40,
  .portals-14,
  .migration-2,
  .ai-2,
  .ai-5,
  .roadmap-2,
  .roadmap-19,
  .compliance-1,
  .engage-3,
  .demo-3,
  .demo-14,
  .demo-18{grid-template-columns:1fr !important;}
  .engine-7 > span.roadmap-24,
  .engine-13 > span.roadmap-24,
  .engine-29 > span.roadmap-24,
  .portals-14 > span.roadmap-24,
  .migration-2 > span.roadmap-24,
  .ai-5 > span.roadmap-24,
  .roadmap-2 > span.roadmap-24,
  .demo-14 > span.roadmap-24{display:none !important;}
  section{padding-top:64px !important;padding-bottom:64px !important;}
  .hero-17,
  .hero-20,
  .engine-34,
  .engine-39,
  .migration-5{position:static !important;margin-top:10px !important;white-space:normal !important;display:inline-flex !important;}
  .engine-8,
  .engine-14{border-right:none !important;}
  .hero-16{border-radius:12px 12px 0 0 !important;}
}
@media (min-width:551px) and (max-width:860px){
  .roadmap-flow{grid-template-columns:auto 20px auto 20px minmax(0,1fr) !important;}
  .roadmap-flow-connector{display:block !important;margin-bottom:52px !important;}
  .roadmap-flow-outcomes{margin-bottom:52px !important;}
}
@media (min-width:551px) and (max-width:992px){
  /* Outcome cards fit their text instead of stretching; the whole flow is centred */
  .roadmap-flow{grid-template-columns:auto 20px auto 20px auto !important;justify-content:center;}
  .roadmap-flow-outcomes{width:fit-content;}
}
@media (max-width:560px){
  header > div{padding:0 16px !important;}
  header > div > svg{height:26px !important;}
  header > div > a[href="#demo"]{padding:10px 12px !important;font-size:12.5px !important;}
  .roadmap-24,
  .roadmap-27{margin-bottom:0 !important;}
  .roadmap-20,
  .roadmap-21,
  .roadmap-25,
  .roadmap-26{margin-left:auto !important;margin-right:auto !important;}
}
@media (max-width:550px){
  .hero-content,.billing-run-content,.migration-content{padding-left:16px !important;padding-right:16px !important;}
  .roadmap-flow{justify-items:center !important;row-gap:12px !important;}
  .roadmap-flow-connector{display:block !important;width:2px !important;height:24px !important;margin:0 auto !important;}
  .roadmap-flow-outcomes{width:100%;margin-bottom:0 !important;text-align:center;}
  .hero-dashboard{margin-top:36px !important;}
  .hero-dashboard-frame{width:100% !important;aspect-ratio:1.65;max-height:298px;overflow:hidden !important;border:1px solid #DDE3E3 !important;border-radius:14px !important;box-shadow:0 12px 28px rgba(10,15,20,.10) !important;}
  .hero-highlight{position:static !important;display:flex !important;width:100%;align-items:flex-start !important;gap:10px !important;margin-top:12px !important;padding:12px 14px !important;border:1px solid #F97316 !important;border-radius:12px !important;box-shadow:0 4px 14px rgba(10,15,20,.08) !important;white-space:normal !important;}
  .hero-highlight > span:first-child{flex:0 0 8px;margin-top:6px;}
  .hero-highlight > span:last-child{font-size:14px !important;line-height:1.45;white-space:normal !important;}
  .billing-run-dashboard{margin-top:36px !important;}
  .billing-run-frame{width:100% !important;aspect-ratio:1.65;max-height:283px;overflow:hidden !important;border:1px solid #DDE3E3 !important;border-radius:14px !important;box-shadow:0 12px 28px rgba(10,15,20,.10) !important;}
  .billing-run-dashboard .billing-run-highlight{position:static !important;display:flex !important;width:100%;align-items:flex-start !important;gap:10px !important;margin-top:12px !important;padding:12px 14px !important;border:1px solid #F97316 !important;border-radius:12px !important;box-shadow:0 4px 14px rgba(10,15,20,.08) !important;white-space:normal !important;}
  .billing-run-highlight > span:first-child{flex:0 0 9px;margin-top:6px;}
  .billing-run-highlight > span:last-child{font-size:14px !important;line-height:1.45;white-space:normal !important;}
  .billing-run-highlight .engine-37{margin:0 !important;font-size:14px !important;line-height:1.45 !important;white-space:normal !important;}
  .billing-run-highlight .engine-37 span{font-size:14px !important;color:#0A0F14 !important;white-space:normal !important;}
  .migration-image{width:max(100%, 550px);max-width:none;}
  .migration-frame{width:100% !important;aspect-ratio:1000 / 403;max-height:222px;overflow:hidden !important;}
  .migration-highlight{position:static !important;display:flex !important;width:100%;align-items:flex-start !important;gap:10px !important;margin-top:12px !important;padding:12px 14px !important;border-radius:12px !important;white-space:normal !important;}
  .migration-highlight > span:first-child{flex:0 0 9px;margin-top:6px;}
  .migration-highlight > span:last-child{font-size:14px !important;line-height:1.45;white-space:normal !important;}
  .migration-steps{margin-top:16px !important;}
}
@media (max-width:420px){
  .hero-actions{flex-direction:column !important;align-items:stretch !important;}
  .hero-actions > a{display:block;width:100%;text-align:center;}
}

.menu-lines{position:relative;display:block;width:19px;height:14px;}
.menu-lines span{position:absolute;left:0;width:19px;height:2px;border-radius:2px;background:currentColor;transition:top .18s ease,transform .18s ease,opacity .18s ease;}
.menu-lines span:nth-child(1){top:0;}
.menu-lines span:nth-child(2){top:6px;}
.menu-lines span:nth-child(3){top:12px;}
#menu-toggle[aria-expanded="true"] .menu-lines span:nth-child(1){top:6px;transform:rotate(45deg);}
#menu-toggle[aria-expanded="true"] .menu-lines span:nth-child(2){opacity:0;}
#menu-toggle[aria-expanded="true"] .menu-lines span:nth-child(3){top:6px;transform:rotate(-45deg);}

/* ---- Component styles (moved from inline style attributes) ---- */
/* Keep these after the rules above so they win ties, as inline styles did. */

/* page */
.page-1{max-width:100%;overflow-x:hidden;overflow-x:clip}

/* header */
.header-1{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid #E4E9E9}
.header-2{max-width:1320px;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:34px;height:80px}
.header-3{height:31px;width:auto}
.header-4{display:flex;gap:28px;margin-left:auto}
.header-5{font-size:14.5px;font-weight:500;color:#4A5257}
.header-5:hover{color:#0A8A5A !important}
.header-6{background:#16E79A;color:#07120C;font-size:14.5px;font-weight:600;padding:12px 22px;border-radius:8px;white-space:nowrap}
.header-6:hover{background:#5DF1BA !important}
.header-7{display:none;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;padding:0;border:1px solid #DDE3E3;border-radius:8px;background:#fff;color:#0A0F14;cursor:pointer}

/* hero */
.hero-1{background:linear-gradient(180deg,#F2FAF6 0%,#FFFFFF 100%);color:#0A0F14;padding:96px 0 0;position:relative;overflow:hidden}
.hero-2{position:absolute;right:-14%;top:-34%;width:76vw;height:130%;background:radial-gradient(closest-side,rgba(22,231,154,.2),rgba(22,231,154,0) 68%);pointer-events:none}
.hero-3{max-width:1320px;margin:0 auto;padding:0 40px;position:relative}
.hero-4{display:flex;align-items:center;gap:12px}
.hero-5{width:28px;height:3px;background:#16E79A;display:block}
.hero-6{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0A8A5A}
.hero-7{font-size:clamp(36px,4.2vw,54px);line-height:1;font-weight:600;letter-spacing:-.035em;margin:24px 0 0;max-width:16ch;text-wrap:pretty}
.hero-8{font-size:clamp(16px,1.1vw,18px);line-height:1.55;font-weight:300;color:#4A5257;max-width:56ch;margin:26px 0 0}
.hero-9{display:flex;gap:14px;margin:36px 0 0;flex-wrap:wrap;align-items:center}
.hero-10{background:#16E79A;color:#07120C;font-size:14.5px;font-weight:600;padding:16px 28px;border-radius:8px}
.hero-10:hover{background:#5DF1BA !important}
.hero-11{border:1px solid #C9D2D2;color:#0A0F14;font-size:14.5px;font-weight:500;padding:16px 28px;border-radius:8px}
.hero-11:hover{border-color:#0A8A5A !important}
.hero-12{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:64px 0 0;padding-top:26px;border-top:1px solid #DDE3E3}
.hero-13{font-size:15px;font-weight:600;color:#0A8A5A}
.hero-14{font-size:13.5px;color:#6B7378;margin-top:5px}
.hero-15{max-width:1240px;margin:56px auto 0;position:relative}
.hero-16{border-radius:18px 18px 0 0;overflow:hidden;border:1px solid #DDE3E3;border-bottom:none;box-shadow:0 24px 60px rgba(10,15,20,.10)}
.hero-17{position:absolute;left:4%;top:11%;display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #F97316;border-radius:999px;padding:9px 18px;box-shadow:0 10px 26px rgba(10,15,20,.25);white-space:nowrap}
.hero-18{width:8px;height:8px;border-radius:50%;background:#F97316;display:block}
.hero-19{font-size:14px;font-weight:500;color:#0A0F14}
.hero-20{position:absolute;right:5%;top:47%;display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #F97316;border-radius:999px;padding:9px 18px;box-shadow:0 10px 26px rgba(10,15,20,.25);white-space:nowrap}

/* problem */
.problem-1{background:#F5F7F7;padding:104px 0;border-top:1px solid #E4E9E9}
.problem-2{max-width:1320px;margin:0 auto;padding:0 40px}
.problem-3{width:28px;height:3px;background:#F97316;display:block}
.problem-4{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#F97316}
.problem-5{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:end;margin-top:22px}
.problem-6{font-size:clamp(26px,2.8vw,36px);line-height:1.06;font-weight:600;letter-spacing:-.028em;margin:0;text-wrap:pretty}
.problem-7{font-size:16.5px;line-height:1.6;font-weight:300;color:#4A5257;margin:0}
.problem-8{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.problem-9{background:#fff;border:1px solid #E4E9E9;border-radius:16px;padding:34px 30px}
.problem-10{font-size:42px;font-weight:600;letter-spacing:-.04em;line-height:1;color:#F97316}
.problem-11{font-size:17px;font-weight:600;margin:18px 0 8px}
.problem-12{font-size:15px;line-height:1.6;color:#4A5257;margin:0}
.problem-13{font-size:42px;font-weight:600;letter-spacing:-.04em;line-height:1;color:#2563EB}
.problem-14{font-size:42px;font-weight:600;letter-spacing:-.04em;line-height:1;color:#0FA96F}
.problem-15{margin-top:28px;background:#ECF8F1;color:#0A0F14;border:1px solid #CDE9DA;border-radius:16px;padding:28px 34px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.problem-16{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0A8A5A;white-space:nowrap}
.problem-17{font-size:17.5px;line-height:1.45;flex:1;min-width:280px}

/* engine */
.engine-1{padding:104px 0 0;background:#fff;border-top:1px solid #E4E9E9}
.engine-2{width:28px;height:3px;background:#0FA96F;display:block}
.engine-3{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0FA96F}
.engine-4{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:end;margin-top:22px}
.engine-5{font-size:clamp(26px,2.8vw,36px);line-height:1.06;font-weight:600;letter-spacing:-.028em;margin:0}
.engine-6{margin-top:52px;border:1px solid #E4E9E9;border-radius:18px;overflow:hidden}
.engine-7{display:grid;grid-template-columns:1fr 1fr}
.engine-8{padding:22px 30px;background:#FAFAFA;border-right:1px solid #E4E9E9;display:flex;align-items:center;justify-content:space-between;gap:16px}
.engine-9{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8A9196}
.engine-10{font-size:13px;font-weight:600;color:#D2564C}
.engine-11{padding:22px 30px;background:#E4F5EC;display:flex;align-items:center;justify-content:space-between;gap:16px}
.engine-12{font-size:13px;font-weight:600;color:#6B7378}
.engine-13{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #E4E9E9}
.engine-14{border-right:1px solid #E4E9E9;display:flex;flex-direction:column}
.engine-15{display:flex;gap:16px;align-items:baseline;padding:19px 30px;border-bottom:1px solid #F0F2F2}
.engine-16{font-size:12.5px;font-weight:600;color:#C3C9CD}
.engine-17{font-size:14.5px;color:#3F464B}
.engine-18{font-size:13px;color:#D2564C;margin-top:3px}
.engine-19{font-size:13px;color:#8A9196;margin-top:3px}
.engine-20{display:flex;gap:16px;align-items:baseline;padding:19px 30px}
.engine-21{background:#F2FAF6;color:#0A0F14;display:flex;flex-direction:column}
.engine-22{display:flex;gap:16px;align-items:baseline;padding:19px 30px;border-bottom:1px solid #DCEAE2}
.engine-23{font-size:12.5px;font-weight:600;color:#0A8A5A}
.engine-24{font-size:14.5px}
.engine-25{font-size:13px;color:#0A8A5A;margin-top:3px}
.engine-26{flex:1;padding:28px 30px;display:flex;flex-direction:column;justify-content:center;gap:8px;background:#EAF9F1}
.engine-27{font-size:18px;line-height:1.4}
.engine-28{background:#F5F7F7;margin-top:88px;padding:88px 0;border-top:1px solid #E4E9E9;border-bottom:1px solid #E4E9E9}
.engine-29{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
.engine-30{font-size:clamp(22px,2.2vw,28px);line-height:1.1;font-weight:600;letter-spacing:-.025em;margin:0}
.engine-31{font-size:15.5px;line-height:1.6;font-weight:300;color:#4A5257;margin:0}
.engine-32{max-width:1200px;margin:44px auto 0;position:relative}
.engine-33{border-radius:16px;overflow:hidden;border:1px solid #DDE3E3;box-shadow:0 30px 80px rgba(10,15,20,.15);background:#fff}
.engine-34{position:absolute;left:3%;top:34%;display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #F97316;border-radius:999px;padding:10px 20px;box-shadow:0 10px 26px rgba(10,15,20,.16);white-space:nowrap}
.engine-35{width:9px;height:9px;border-radius:50%;background:#F97316;display:block}
.engine-36{font-size:15px;font-weight:500;color:#0A0F14}
.engine-37{display:block;border:0px solid rgb(226, 232, 240);margin:0px 0px 5px;padding:0px;font-size:medium;font-weight:inherit;color:rgb(23, 27, 32);font-family:Poppins, system-ui, sans-serif;white-space:normal}
.engine-38{color:rgb(60, 66, 72);font-size:18px}
.engine-39{position:absolute;left:32%;top:69%;display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #F97316;border-radius:999px;padding:10px 20px;box-shadow:0 10px 26px rgba(10,15,20,.16);white-space:nowrap}
.engine-40{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:44px;max-width:1200px;margin-left:auto;margin-right:auto}
.engine-41{border-top:2px solid #F97316;padding-top:18px}
.engine-42{font-size:16.5px;font-weight:600;margin:0 0 8px}
.engine-43{border-top:2px solid #2563EB;padding-top:18px}
.engine-44{border-top:2px solid #0FA96F;padding-top:18px}

/* portals */
.portals-1{padding:104px 0;background:#fff;border-top:1px solid #E4E9E9}
.portals-2{width:28px;height:3px;background:#2563EB;display:block}
.portals-3{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#2563EB}
.portals-4{max-width:1160px;margin:48px auto 0}
.portals-5{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:1px solid #E4E9E9;padding-bottom:0}
.portals-6{position:relative;display:flex;gap:4px;flex-wrap:wrap}
.portals-7{font-family:'Poppins',sans-serif;background:none;border:none;cursor:pointer;padding:12px 16px;font-size:14px;font-weight:500;color:#4A5257}
.portals-7:hover{color:#0A0F14 !important}
.portals-8{display:flex;align-items:center;gap:10px;padding-bottom:8px}
.portals-9{font-size:13px;font-weight:500;color:#8A9196}
.portals-10{font-family:'Poppins',sans-serif;width:38px;height:38px;border-radius:50%;border:1px solid #DCE2E2;background:#fff;cursor:pointer;font-size:15px;color:#0A0F14}
.portals-10:hover{border-color:#0A0F14 !important}
.portals-11{overflow:hidden;margin-top:36px}
.portals-12{display:flex;align-items:stretch;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.portals-13{flex:0 0 100%;min-width:0;padding-right:2px}
.portals-14{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:22px}
.portals-15{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#F97316}
.portals-16{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:12px 0 10px}
.portals-17{font-size:15px;line-height:1.55;color:#20272B;font-weight:500;margin:0 0 8px}
.portals-18{font-size:14.5px;line-height:1.6;color:#4A5257;margin:0}
.portals-19{background:#ECF8F1;color:#0A0F14;border:1px solid #CDE9DA;border-radius:14px;padding:24px 28px}
.portals-20{font-size:17px;line-height:1.45;margin-top:8px}
.portals-21{max-width:820px;margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid #E4E9E9;box-shadow:0 18px 44px rgba(10,15,20,.1)}
.portals-22{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#2563EB}
.portals-23{background:#F5F7F7;border:1px solid #E4E9E9;border-radius:14px;padding:24px 28px}
.portals-24{font-size:17px;line-height:1.45;margin-top:8px;color:#20272B}
.portals-25{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0A0F14}
.portals-26{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0FA96F}

/* migration */
.migration-1{padding:104px 0;background:#F2FAF6;color:#0A0F14;border-top:1px solid #E4E9E9}
.migration-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:52px;align-items:center}
.migration-3{max-width:1000px;position:relative}
.migration-4{border-radius:14px;overflow:hidden;border:1px solid #DDE3E3;box-shadow:0 20px 50px rgba(10,15,20,.12)}
.migration-5{position:absolute;left:8%;bottom:-16px;display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #F97316;border-radius:999px;padding:9px 18px;box-shadow:0 10px 26px rgba(10,15,20,.16);white-space:nowrap}
.migration-6{font-size:14.5px;font-weight:500;color:#0A0F14}
.migration-7{margin-top:32px;display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6B7378}
.migration-8{color:#0A8A5A}
.migration-9{display:grid;gap:24px}
.migration-10{border-left:2px solid #16E79A;padding-left:20px}
.migration-11{font-size:17px;font-weight:600;margin:0 0 6px}
.migration-12{background:#EAF9F1;border:1px solid #CDE9DA;border-radius:14px;padding:22px 26px}

/* ai */
.ai-1{padding:104px 0;background:#fff}
.ai-2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,440px);gap:56px;margin-top:48px;align-items:center}
.ai-3{display:grid;gap:10px}
.ai-4{background:#F5F7F7;border-left:3px solid #16E79A;border-radius:0 10px 10px 0;padding:16px 20px;font-size:15.5px;color:#20272B}
.ai-5{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px}
.ai-6{border-radius:14px;overflow:hidden;border:1px solid #E4E9E9;box-shadow:0 24px 60px rgba(10,15,20,.14)}

/* roadmap */
.roadmap-1{padding:84px 0;background:#F5F7F7;border-top:1px solid #E4E9E9}
.roadmap-2{max-width:1320px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.roadmap-3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.roadmap-4{font-size:15px;line-height:1.6;color:#4A5257;margin:0 0 24px}
.roadmap-5{background:#fff;border:1px solid #E4E9E9;border-radius:14px;padding:26px}
.roadmap-6{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0FA96F;margin-bottom:14px}
.roadmap-7{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid #EEF1F1}
.roadmap-8{font-size:13.5px;color:#4A5257}
.roadmap-9{width:96px;text-align:right;font-size:13.5px;font-weight:600;border:1px solid #DCE2E2;border-radius:8px;padding:8px 11px;background:#FBFCFC;color:#0A0F14}
.roadmap-10{display:flex;gap:36px;flex-wrap:wrap;margin-top:22px}
.roadmap-11{font-size:30px;font-weight:600;letter-spacing:-.03em;color:#0FA96F;line-height:1}
.roadmap-12{font-size:12px;color:#8A9196;margin-top:7px;line-height:1.4}
.roadmap-13{font-size:11.5px;color:#8A9196;line-height:1.5;margin:20px 0 0;border-top:1px solid #EEF1F1;padding-top:14px}
.roadmap-14{font-size:11.5px;color:#9BA2A6;line-height:1.5;margin:7px 0 0}
.roadmap-15{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.roadmap-16{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0FA96F}
.roadmap-17{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#8A9196;border:1px solid #D9DFDF;border-radius:999px;padding:4px 12px}
.roadmap-18{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:16px 0 10px}
.roadmap-19{display:grid;grid-template-columns:auto 20px auto 20px minmax(0,1fr);align-items:center;gap:0 12px;margin-top:28px}
.roadmap-20{text-align:center;width:104px}
.roadmap-21{width:104px;height:104px;border-radius:50%;background:#fff;border:1px solid #E4E9E9;box-shadow:0 8px 22px rgba(10,15,20,.07);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:#0A0F14}
.roadmap-22{font-size:14px;font-weight:600;margin-top:12px}
.roadmap-23{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8A9196;margin-top:3px}
.roadmap-24{height:2px;background:#9AE9C9;display:block;margin-bottom:52px}
.roadmap-25{text-align:center;width:124px}
.roadmap-26{width:124px;height:124px;border-radius:50%;background:#F0FDF7;border:2px solid #16E79A;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:#0FA96F}
.roadmap-27{display:grid;gap:10px;margin-bottom:52px}
.roadmap-28{background:#fff;border:1px solid #E4E9E9;border-radius:12px;padding:14px 18px}
.roadmap-29{font-size:15px;font-weight:600}
.roadmap-30{display:grid;gap:0;margin-top:28px}
.roadmap-31{border-top:1px solid #DDE3E3;padding:14px 0;display:flex;gap:16px;align-items:baseline}
.roadmap-32{font-size:12.5px;font-weight:600;color:#0FA96F}
.roadmap-33{font-size:15px}
.roadmap-34{color:rgb(23, 27, 32);font-family:Poppins, system-ui, sans-serif;font-size:14px;background-color:rgb(245, 248, 247)}
.roadmap-35{border:0px solid rgb(226, 232, 240);margin:0px;padding:0px;font-size:14px;color:rgb(23, 27, 32);font-family:Poppins, system-ui, sans-serif;background-color:rgb(245, 248, 247)}
.roadmap-36{border-top:1px solid #DDE3E3;border-bottom:1px solid #DDE3E3;padding:14px 0;display:flex;gap:16px;align-items:baseline}

/* compliance */
.compliance-1{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#E4E9E9;border:1px solid #E4E9E9;border-radius:16px;overflow:hidden;margin-top:48px}
.compliance-2{background:#fff;padding:30px}
.compliance-3{font-size:17px;font-weight:600;margin:0 0 7px}
.compliance-4{font-size:14.5px;line-height:1.55;color:#4A5257;margin:0}
.compliance-5{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#8A9196;line-height:1.8;margin:26px 0 0}

/* engage */
.engage-1{padding:104px 0;background:#F5F7F7;border-top:1px solid #E4E9E9}
.engage-2{font-size:clamp(26px,2.8vw,36px);line-height:1.06;font-weight:600;letter-spacing:-.028em;margin:22px 0 0;max-width:26ch}
.engage-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.engage-4{background:#fff;border:1px solid #E4E9E9;border-top:3px solid #0FA96F;border-radius:16px;padding:34px}
.engage-5{font-size:19px;font-weight:600;margin:0 0 10px}
.engage-6{font-size:15px;line-height:1.6;color:#4A5257;margin:0 0 16px}
.engage-7{display:grid;gap:8px;font-size:14.5px;color:#3F464B}
.engage-8{background:#fff;border:1px solid #E4E9E9;border-top:3px solid #2563EB;border-radius:16px;padding:34px}
.engage-9{background:#fff;border:1px solid #E4E9E9;border-top:3px solid #F97316;border-radius:16px;padding:34px}

/* demo */
.demo-1{padding:104px 0;background:linear-gradient(180deg,#FFFFFF 0%,#F2FAF6 100%);color:#0A0F14;position:relative;overflow:hidden;border-top:1px solid #E4E9E9}
.demo-2{position:absolute;left:-8%;bottom:-60%;width:64vw;height:140%;background:radial-gradient(closest-side,rgba(22,231,154,.16),rgba(22,231,154,0) 70%);pointer-events:none}
.demo-3{max-width:1320px;margin:0 auto;padding:0 40px;position:relative;display:grid;grid-template-columns:1.05fr minmax(0,520px);gap:64px;align-items:start}
.demo-4{font-size:clamp(28px,3.2vw,42px);line-height:1.04;font-weight:600;letter-spacing:-.032em;margin:22px 0 0;max-width:20ch}
.demo-5{font-size:17px;line-height:1.6;font-weight:300;color:#4A5257;max-width:52ch;margin:22px 0 0}
.demo-6{display:grid;gap:14px;margin-top:36px;max-width:44ch}
.demo-7{display:flex;gap:18px;align-items:baseline}
.demo-8{font-size:13px;font-weight:600;color:#0A8A5A}
.demo-9{font-size:16px;line-height:1.5}
.demo-10{background:#fff;border:1px solid #E4E9E9;border-radius:18px;padding:36px;box-shadow:0 24px 60px rgba(10,15,20,.10)}
.demo-11{display:flex;flex-direction:column;gap:10px;min-height:420px;justify-content:center;color:#0A0F14}
.demo-12{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.demo-13{display:grid;gap:16px;color:#0A0F14}
.demo-14{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.demo-15{display:grid;gap:7px;min-width:0}
.demo-16{font-size:13px;font-weight:500;color:#4A5257}
.demo-17{font-size:14.5px;padding:12px 14px;width:100%;min-width:0;border:1px solid #DCE2E2;border-radius:8px;background:#FBFCFC;color:#0A0F14}
.demo-18{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.demo-19{font-size:14.5px;padding:12px 14px;width:100%;min-width:0;border:1px solid #DCE2E2;border-radius:8px;background:#FBFCFC;color:#0A0F14;resize:vertical}
.demo-20{font-family:'Poppins',sans-serif;background:#0FA96F;color:#fff;font-size:14.5px;font-weight:600;padding:15px 26px;border:none;border-radius:8px;cursor:pointer}
.demo-20:hover{background:#0A8A5A !important}
.demo-21{font-size:12.5px;color:#8A9196;line-height:1.5;margin:0}
.demo-22{color:#0FA96F;font-weight:500}
.demo-22:hover{color:#0A8A5A}

/* faq */
.faq-1{max-width:920px;margin:0 auto;padding:0 40px}
.faq-2{font-size:clamp(26px,2.8vw,36px);line-height:1.06;font-weight:600;letter-spacing:-.028em;margin:22px 0 40px;text-wrap:pretty}
.faq-3{border-bottom:1px solid #E4E9E9;padding:22px 0}
.faq-4{font-size:17px;font-weight:600;letter-spacing:-.01em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faq-5{color:#0FA96F;font-weight:500}
.faq-6{font-size:15px;line-height:1.65;color:#4A5257;margin:14px 0 0;max-width:76ch}
.faq-7{font-size:15px;line-height:1.6;color:#4A5257;margin:36px 0 0}

/* footer */
.footer-1{background:#F5F7F7;color:#0A0F14;padding:56px 0 32px;border-top:1px solid #E4E9E9}
.footer-2{max-width:1320px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:center}
.footer-3{font-size:14.5px;color:#6B7378;margin:0;max-width:46ch}
.footer-4{font-size:14.5px;color:#0FA96F;font-weight:700}
.footer-4:hover{color:#0A8A5A !important}
.footer-5{max-width:1320px;margin:34px auto 0;padding:20px 40px 0;border-top:1px solid #E4E9E9;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#8A9196}

/* Slider position (was an inline translateX bound to the current slide) */
.slide-0{transform:translateX(0%)}
.slide-1{transform:translateX(-100%)}
.slide-2{transform:translateX(-200%)}
.slide-3{transform:translateX(-300%)}
.slide-4{transform:translateX(-400%)}

/* Scroll reveal (the script adds .reveal, then .is-visible when the block scrolls into view) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(n+4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
@media print{.reveal{opacity:1;transform:none}}


/* Hero heading wraps to two lines here; extra line-height keeps the "g" descender off the "i" below */
@media (max-width:393px){.hero-7{line-height:1.12}}