/* =====================================================================
   WISMAD public website (home + pricing). Uses the same colours as the app.
   ===================================================================== */
.site{background:#fff;color:#344054;font-size:16px}
.site .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.site h1,.site h2,.site h3{color:#101828;letter-spacing:-.02em}
.site-nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #EAECF0}
.site-nav .wrap{display:flex;align-items:center;gap:32px;height:68px}
.site-nav nav{display:flex;gap:28px;font-size:14.5px;font-weight:500}
.site-nav nav a{color:#475467}
.site-nav nav a:hover{color:#101828;text-decoration:none}
.site-nav .right{margin-left:auto;display:flex;gap:10px;align-items:center}
.site .btn{height:40px;padding:0 18px;font-size:14.5px}
.site .btn-lg{height:48px;padding:0 24px;font-size:16px;border-radius:10px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid #D1E0FF;background:#EFF4FF;color:#1D4ED8;font-size:13px;font-weight:600;padding:4px 12px 4px 4px;border-radius:999px}
.eyebrow b{background:#2563EB;color:#fff;border-radius:999px;padding:2px 8px;font-size:11.5px}
/* hero */
.hero{position:relative;overflow:hidden;padding:72px 0 80px;background:radial-gradient(1200px 500px at 70% -10%,#EAF1FF 0%,rgba(255,255,255,0) 60%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(36px,5vw,58px);line-height:1.05;margin:20px 0 20px;font-weight:700}
.hero h1 em{font-style:normal;color:#2563EB}
.hero p.lead{font-size:18.5px;color:#475467;max-width:540px;margin:0 0 32px;line-height:1.6}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;font-size:14px;color:#475467}
.trust span{display:flex;align-items:center;gap:8px}
.trust span::before{content:"";width:18px;height:18px;border-radius:50%;background:#ECFDF3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067647' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
/* product mock */
.mock{position:relative;height:500px}
.mock-dash{position:absolute;right:0;top:10px;width:88%;background:#fff;border:1px solid #EAECF0;border-radius:16px;box-shadow:0 30px 60px -20px rgba(16,24,40,.25);overflow:hidden}
.mock-bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid #EAECF0;background:#F9FAFB}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:#D0D5DD}
.mock-body{padding:18px;display:grid;gap:12px}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mock-stat{border:1px solid #EAECF0;border-radius:10px;padding:12px}
.mock-stat small{display:block;font-size:11.5px;color:#667085}
.mock-stat b{font-size:22px;color:#101828}
.mock-stat em{font-style:normal;font-size:11.5px;color:#067647;font-weight:600;margin-left:4px}
.mock-row{display:flex;align-items:center;gap:10px;border:1px solid #EAECF0;border-radius:10px;padding:10px 12px;font-size:13px}
.mock-row .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:600;flex:none}
.mock-row b{font-size:13px;display:block}
.mock-row small{color:#667085;font-size:11.5px}
.mock-row .chip{margin-left:auto}
.mock-phone{position:absolute;left:0;bottom:0;width:250px;background:#fff;border:8px solid #101828;border-radius:32px;box-shadow:0 30px 60px -15px rgba(16,24,40,.35);overflow:hidden}
.mock-phone .ph-head{background:#075E54;color:#fff;padding:12px 14px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.mock-phone .ph-head i{width:26px;height:26px;border-radius:50%;background:#fff;color:#075E54;display:grid;place-items:center;font-style:normal;font-size:12px}
.mock-phone .ph-body{background:#EFE7DD;padding:12px;display:grid;gap:8px;min-height:250px}
.bub{max-width:85%;padding:7px 10px;border-radius:8px;font-size:12.5px;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bub.in{background:#fff;justify-self:start}
.bub.out{background:#D9FDD3;justify-self:end}
.bub-btn{background:#fff;color:#0A7CFF;text-align:center;font-size:12.5px;padding:7px;border-radius:8px;font-weight:500}
/* sections */
.band{border-top:1px solid #EAECF0;border-bottom:1px solid #EAECF0;background:#F9FAFB}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:28px 24px}
.band div b{display:block;font-size:17px;color:#101828}
.band div span{font-size:14px;color:#667085}
.sec{padding:96px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 56px}
.sec-head .kick{color:#2563EB;font-weight:600;font-size:14px}
.sec-head h2{font-size:clamp(28px,3.4vw,40px);margin:10px 0 14px;line-height:1.15}
.sec-head p{color:#475467;font-size:17px;margin:0}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{border:1px solid #EAECF0;border-radius:14px;padding:26px;background:#fff}
.feat .fi{width:44px;height:44px;border-radius:10px;background:#EFF4FF;color:#2563EB;display:grid;place-items:center;margin-bottom:18px}
.feat .fi svg{width:22px;height:22px}
.feat h3{font-size:18px;margin:0 0 8px}
.feat p{color:#475467;margin:0;font-size:15px;line-height:1.6}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step3{padding:28px;border-radius:14px;background:#F9FAFB;border:1px solid #EAECF0}
.step3::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#101828;color:#fff;font-weight:600;margin-bottom:16px}
.step3 h3{font-size:18px;margin:0 0 8px}
.step3 p{margin:0;color:#475467;font-size:15px}
.uses{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.uses span{border:1px solid #EAECF0;border-radius:999px;padding:8px 16px;font-size:14.5px;font-weight:500;color:#344054;background:#fff}
.faq{max-width:780px;margin:0 auto}
.faq details{border-bottom:1px solid #EAECF0;padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;color:#101828;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-size:22px;line-height:1;color:#667085}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;color:#475467;line-height:1.65}
.cta-band{margin:0 24px 96px;border-radius:22px;background:#0B1220;color:#fff;padding:64px 32px;text-align:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-260px;background:radial-gradient(closest-side,rgba(37,99,235,.55),transparent);pointer-events:none}
.cta-band h2{color:#fff;font-size:clamp(26px,3.4vw,38px);margin:0 0 12px}
.cta-band p{color:#98A2B3;margin:0 0 28px;font-size:17px}
.cta-band .btn{position:relative;z-index:1}
.site-foot{border-top:1px solid #EAECF0;padding:48px 0 32px;font-size:14px;color:#667085}
.site-foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.site-foot h4{font-size:14px;color:#101828;margin:0 0 12px}
.site-foot a{display:block;color:#667085;margin-bottom:8px}
.site-foot .legal{grid-column:1/-1;border-top:1px solid #EAECF0;padding-top:20px;margin-top:8px}
/* pricing page */
.price-hero{padding:72px 0 40px;text-align:center;background:radial-gradient(900px 400px at 50% -20%,#EAF1FF 0%,rgba(255,255,255,0) 70%)}
.price-hero h1{font-size:clamp(34px,4.5vw,52px);margin:18px 0 14px;line-height:1.08}
.price-hero p{font-size:18px;color:#475467;max-width:620px;margin:0 auto}
.site .price-grid{max-width:1080px;margin:0 auto}
.site .price-card{padding:32px}
.site .price-amt{font-size:42px}
.incl{max-width:1080px;margin:56px auto 0;border:1px solid #EAECF0;border-radius:14px;padding:32px;display:grid;grid-template-columns:1fr 2fr;gap:32px;background:#F9FAFB}
.incl h3{margin:0 0 8px;font-size:20px}
.incl ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;font-size:15px}
.incl li::before{content:"✓";color:#2563EB;font-weight:700;margin-right:10px}
.note-box{max-width:1080px;margin:20px auto 0;font-size:14px;color:#667085;text-align:center}
@media (max-width:980px){
  .hero .wrap,.incl{grid-template-columns:1fr}
  .mock{height:460px}
  .feat-grid,.steps3,.band .wrap{grid-template-columns:1fr 1fr}
  .site-nav nav{display:none}
  .site-foot .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .feat-grid,.steps3,.band .wrap,.incl ul{grid-template-columns:1fr}
  .mock{display:none}
  .sec{padding:64px 0}
  .site-nav .right .btn:not(.btn-blue){display:none}
}