@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap');:root{--black:#080a0e;--panel:#10141b;--blue:#51c5ff;--line:#dfe3e8;--muted:#6a717b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#111;background:#fff;font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.topbar{background:#080a0e;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(20px,4vw,70px);position:sticky;top:0;z-index:50;border-bottom:1px solid #222}.identity{display:flex;align-items:center;gap:13px}.identity img{width:50px;height:50px;object-fit:cover;border-radius:50%}.identity strong{font-size:13px;letter-spacing:.11em;display:block}.identity small{font-size:10px;letter-spacing:.3em;color:#9bcbe1}.topbar nav{display:flex;align-items:center;gap:25px;font-size:12px;font-weight:700}.topbar nav a:hover{color:var(--blue)}.nav-demo{border:1px solid #5bc8ff;padding:13px 18px;border-radius:5px}.menu{display:none;background:none;color:#fff;border:0;font-size:25px}.hero{background:radial-gradient(circle at 70% 40%,#142a3d 0%,#0c121d 34%,#07090d 78%);color:#fff;display:grid;grid-template-columns:1fr .9fr;gap:5vw;padding:clamp(60px,8vw,125px) clamp(22px,6vw,100px);min-height:690px;align-items:center}.eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.25em;color:#a4b7c5}.eyebrow.blue{color:#1979ac}.hero h1,.intro h2,.section-head h2,.experience h2,.method h2,.closing h2{font-family:Oswald,Impact,sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.06}.hero h1{font-size:clamp(52px,6.4vw,112px);margin:23px 0}.hero h1 em,.experience h2 em,.method h2 em{font-style:normal;color:var(--blue)}.hero-copy>p{color:#b5c0cd;max-width:550px;line-height:1.7;font-size:17px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.button{padding:16px 22px;border-radius:5px;font-weight:800;font-size:13px;display:inline-flex;gap:22px;align-items:center;justify-content:space-between}.primary{background:#58c8ff;color:#081019}.primary:hover{background:#fff}.secondary{border:1px solid #75828f;color:inherit}.secondary:hover{border-color:#58c8ff}.hero-proof{display:flex;gap:13px;align-items:center;margin-top:45px;font-size:11px;letter-spacing:.14em;font-weight:800;color:#9ba9b8}.hero-proof i{width:18px;height:1px;background:#53c7ff}.hero-art{border:1px solid #294056;border-radius:20px;padding:20px;background:linear-gradient(145deg,#0f1a2b,#05070a);box-shadow:0 30px 90px #0009;max-width:510px;justify-self:end}.hero-art-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.hero-art-top img{width:68px;height:68px;object-fit:cover;border-radius:15px}.hero-art-top span{font-size:11px;letter-spacing:.2em;text-align:right;color:#9fbbce;font-weight:700}.hero-promo{border-radius:10px;max-height:480px;width:100%;object-fit:contain;background:#07090d}.art-caption{text-align:center;font-size:10px;letter-spacing:.2em;font-weight:800;margin-top:18px;color:#a8b9c6}.art-caption span{color:#56c8ff}.intro{display:grid;grid-template-columns:1fr 1fr;gap:7vw;padding:90px 7vw;border-bottom:1px solid #e4e6ea}.intro h2{font-size:clamp(37px,4.5vw,68px);margin:20px 0}.intro h2 em{font-style:normal;color:#258dc1}.intro p{align-self:center;font-size:18px;line-height:1.85;color:#515a64}.feature-section,.ecosystem{padding:90px 7vw;background:#f4f6f8}.section-head{max-width:900px;margin-bottom:35px}.section-head h2{font-size:clamp(40px,5vw,72px);margin:12px 0}.section-head p{color:#65707b;line-height:1.7}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.feature{background:white;border:1px solid #e0e4e8;border-radius:14px;overflow:hidden;min-width:0}.feature.large{grid-column:span 2;display:grid;grid-template-columns:1.1fr .9fr}.feature-image{background:#e9edf1;display:flex;justify-content:center;align-items:center;min-height:230px;max-height:360px;overflow:hidden}.feature-image img{width:100%;height:100%;max-height:360px;object-fit:contain}.feature-text{padding:27px}.feature-text span{color:#2188b9;font-size:10px;letter-spacing:.2em;font-weight:800}.feature-text h3{font-family:Oswald,Impact,sans-serif;font-size:clamp(26px,3vw,40px);line-height:1.13;margin:12px 0}.feature-text p{color:#69737e;line-height:1.7}.experience{background:#08111d;color:white;display:grid;grid-template-columns:1.2fr .8fr;gap:6vw;align-items:center;padding:100px 7vw}.experience h2{font-size:clamp(43px,5vw,80px);margin:17px 0}.experience p{line-height:1.75;color:#b3c0cf;max-width:600px}.experience .fine{font-size:12px;color:#8092a4}.experience-visual{border:1px solid #29465d;border-radius:20px;padding:32px;display:grid;justify-items:center;gap:30px;background:#101d2b}.experience-visual img{width:min(230px,70%);border-radius:40px}.experience-visual div{text-align:center;display:grid;gap:8px}.experience-visual strong{font-size:12px;letter-spacing:.12em}.experience-visual span{color:#8baec4}.method{background:#07090c;color:#fff;text-align:center;padding:110px 7vw}.method h2{font-size:clamp(70px,11vw,160px);margin:30px 0}.method>p{max-width:740px;margin:0 auto;color:#abb5c0;line-height:1.8}.method-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;max-width:1100px;margin:65px auto 0;text-align:left}.method-steps div{border-top:2px solid #48b9ed;padding:22px 0;display:grid;gap:8px}.method-steps b{color:#58c8ff}.method-steps strong{font-family:Oswald;font-size:25px}.method-steps span{color:#9aa8b7;font-size:13px}.ecosystem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.ecosystem-grid article{background:white;border:1px solid #e0e3e6;border-radius:12px;padding:25px;min-height:240px}.ecosystem-grid article.live{background:#0c1724;color:white}.ecosystem-grid article img{width:62px;height:62px;border-radius:12px;margin-bottom:18px}.ecosystem-grid small{color:#278cbd;letter-spacing:.15em;font-weight:800;font-size:10px}.ecosystem-grid h3{font-family:Oswald;font-size:27px;margin:12px 0}.ecosystem-grid p{font-size:13px;line-height:1.7;color:#747d87}.ecosystem-grid .live p{color:#b2c0cf}.ecosystem-grid a{color:#5acbff;font-size:13px;font-weight:800}.closing{background:#0c1118;color:white;text-align:center;padding:100px 20px}.closing>img{width:95px;height:95px;object-fit:cover;border-radius:50%;margin:0 auto 25px}.closing h2{font-size:clamp(55px,7vw,100px);margin:20px 0}.closing p{color:#b0bcc8}.closing .actions{justify-content:center}footer{background:#07090d;color:#fff;padding:35px 7vw;display:flex;justify-content:space-between;gap:20px}footer strong{letter-spacing:.13em}footer strong span{color:#77cafa}footer p{font-size:12px;color:#8695a3}footer>div:last-child{display:flex;gap:24px;font-size:12px}@media(max-width:950px){.menu{display:block}.topbar nav{display:none;position:absolute;top:100%;left:0;right:0;background:#0a0d13;flex-direction:column;align-items:stretch;padding:22px;gap:20px}.topbar nav.open{display:flex}.hero{grid-template-columns:1fr}.hero-art{justify-self:center;width:min(100%,530px)}.ecosystem-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.topbar{padding:12px 17px}.identity img{width:40px;height:40px}.identity strong{font-size:10px}.identity small{font-size:9px}.hero{padding:65px 22px}.hero h1{font-size:clamp(50px,12vw,77px)}.hero-copy>p{font-size:15px}.intro,.experience{grid-template-columns:1fr;padding:65px 22px}.feature-section,.ecosystem{padding:65px 20px}.feature-grid{grid-template-columns:1fr}.feature.large{grid-column:auto;display:block}.method{padding:75px 22px}.method-steps{grid-template-columns:1fr}.ecosystem-grid{grid-template-columns:1fr}.closing{padding:75px 20px}footer{flex-direction:column}.hero-proof{gap:7px;font-size:9px}.hero-proof i{width:10px}}
/* v4 logo dimensions */
.identity img{width:50px!important;height:50px!important;max-width:50px!important;max-height:50px!important}.closing>img{width:95px!important;height:95px!important;max-width:95px!important;max-height:95px!important}.hero-art-top img{width:68px!important;height:68px!important;max-width:68px!important;max-height:68px!important}


/* CPC layout repair v5 — bounded desktop content and consistent spacing */
:root{--site-width:1180px}
body{overflow-x:hidden}
.topbar{padding:14px max(24px,calc((100vw - var(--site-width))/2));gap:24px}
.identity{min-width:0;flex-shrink:0;gap:12px}
.identity span{display:flex;flex-direction:column;gap:3px;min-width:0}
.identity strong{font-size:12px;letter-spacing:.08em;white-space:nowrap;line-height:1.25}
.identity small{font-size:10px;letter-spacing:.2em;line-height:1.4}
.identity img{flex:none;object-fit:contain;border-radius:0}
.topbar nav{gap:18px;white-space:nowrap}
.hero,.intro,.feature-section,.experience,.method,.ecosystem,.closing{padding-left:max(26px,calc((100vw - var(--site-width))/2));padding-right:max(26px,calc((100vw - var(--site-width))/2))}
.hero{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:48px;min-height:660px}
.hero-copy,.hero-art,.experience-copy,.experience-visual{min-width:0}
.hero h1{font-size:clamp(52px,5.7vw,88px);overflow-wrap:normal}
.hero-art{width:100%;max-width:500px}
.hero-art-top{gap:16px}
.hero-art-top img{flex:none}
.feature-grid{width:100%}
.feature-image{min-width:0}
.feature-image img{object-fit:contain}
.experience-visual img{width:min(220px,70%);height:auto;max-height:240px;object-fit:contain;border-radius:0}
.ecosystem-grid article img{object-fit:contain;border-radius:0}
.method h2{font-size:clamp(58px,9vw,120px)}
@media(max-width:1100px){.topbar nav{gap:12px;font-size:11px}.identity strong{font-size:11px}.hero{gap:28px}}
@media(max-width:950px){.hero{grid-template-columns:minmax(0,1fr)}.topbar nav{white-space:normal}.hero-art{justify-self:center}.intro,.experience{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){.topbar{padding:12px 20px}.identity strong{font-size:10px;white-space:normal}.hero,.intro,.feature-section,.experience,.method,.ecosystem,.closing{padding-left:22px;padding-right:22px}.hero h1{font-size:clamp(45px,11vw,70px)}.hero{min-height:auto}.feature-grid{grid-template-columns:1fr}.feature.large{display:block;grid-column:auto}.ecosystem-grid{grid-template-columns:1fr}.method h2{font-size:clamp(52px,14vw,90px)}}

/* CPC v6 editorial polish */
:root{--site-width:1180px}
html{scroll-padding-top:88px}body{overflow-x:hidden}
.topbar{min-height:80px}.identity img{width:58px!important;height:58px!important;max-width:58px!important;max-height:58px!important}.identity strong{font-size:14px;letter-spacing:.065em}.identity small{font-size:11px;color:#74caff;letter-spacing:.22em}.topbar nav a{transition:color .2s ease}.topbar nav a:focus-visible,.button:focus-visible,a:focus-visible,.menu:focus-visible{outline:3px solid #58c8ff;outline-offset:4px}
.hero-art-top{justify-content:flex-end}.hero-art-top img{display:none!important}.hero-art{padding:24px}.hero-promo{max-height:500px}.art-caption{line-height:1.6}
.hero,.intro,.feature-section,.experience,.method,.ecosystem,.closing{padding-top:clamp(65px,7vw,100px);padding-bottom:clamp(65px,7vw,100px)}
.feature-image{padding:18px;min-height:270px;max-height:410px}.feature-image img{max-height:370px;width:100%;height:auto;object-fit:contain}.feature.large .feature-image{max-height:430px}.feature-text{padding:30px}.feature-text p{font-size:15px}
.section-head p,.intro p,.experience p{max-width:70ch}
.audience{background:#fff;padding:90px max(26px,calc((100vw - 1180px)/2));color:#10151c}.audience .section-head{margin-bottom:30px}.audience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.audience-card{border:1px solid #dce3ea;border-radius:15px;padding:30px;background:#f7f9fb}.audience-card .audience-symbol{font-size:30px;color:#1979ac}.audience-card h3{font-family:Oswald,Impact,sans-serif;font-size:32px;margin:15px 0 8px}.audience-card p{font-size:15px;color:#53616e;line-height:1.75;margin:0}
.ecosystem-grid article{display:flex;flex-direction:column}.ecosystem-grid article a{margin-top:auto;padding-top:14px}
.site-footer-links{display:flex;gap:18px;flex-wrap:wrap}.site-footer-links a:hover{text-decoration:underline}.site-footer-links a:focus-visible{outline:2px solid #58c8ff}
@media(max-width:950px){.audience-grid{grid-template-columns:1fr}.topbar{min-height:70px}}
@media(max-width:650px){.identity img{width:44px!important;height:44px!important;max-width:44px!important;max-height:44px!important}.identity strong{font-size:11px}.identity small{font-size:9px}.audience{padding:65px 22px}.audience-card{padding:23px}.hero-art{padding:15px}.feature-image{min-height:180px;padding:12px}.feature-text{padding:23px}.topbar nav{max-height:calc(100vh - 70px);overflow:auto}.method h2{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* V8: show Charting icon beside hero actions on mobile and desktop */
.hero-cta-row{display:flex;align-items:center;gap:clamp(14px,2vw,30px);margin-top:28px}
.hero-cta-row .actions{margin-top:0;flex:1;min-width:0}
.hero-floating-logo{display:block;width:clamp(100px,12vw,180px);height:auto;flex:none;object-fit:contain;border:0;background:transparent;filter:drop-shadow(0 12px 24px rgba(37,173,247,.25))}
@media(max-width:650px){.hero-cta-row{gap:12px;align-items:center}.hero-cta-row .actions{flex:1;min-width:0}.hero-cta-row .button{width:100%;padding:14px 12px;font-size:clamp(10px,2.9vw,13px);gap:5px}.hero-floating-logo{width:clamp(112px,32vw,170px)} }
@media(max-width:360px){.hero-floating-logo{width:100px}.hero-cta-row .button{font-size:10px}}

/* V9: first-screen app identity on both desktop and mobile */
.hero-art{position:relative;overflow:visible}
.hero-desktop-brand{display:block;position:absolute;top:-37px;left:-37px;width:clamp(105px,10vw,148px);height:auto;aspect-ratio:1;object-fit:contain;z-index:3;filter:drop-shadow(0 12px 20px rgba(0,0,0,.65)) drop-shadow(0 0 12px rgba(62,169,255,.3))}
/* On desktop the icon belongs to the product showcase; avoid a redundant third icon beside CTA. */
@media(min-width:951px){.hero-floating-logo{display:none!important}.hero-cta-row{display:block}.hero-art{margin-top:30px}}
@media(max-width:950px){.hero-desktop-brand{display:none!important}}
@media(max-width:650px){
 .hero-cta-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(108px,34%);align-items:center;column-gap:14px;margin-top:24px}
 .hero-cta-row .actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:0;width:100%}
 .hero-cta-row .button{display:flex;width:100%;min-height:54px;align-items:center;justify-content:space-between;padding:12px 11px;font-size:clamp(10px,2.65vw,13px);white-space:normal;line-height:1.25}
 .hero-floating-logo{display:block!important;width:100%;max-width:175px;height:auto;justify-self:center;align-self:center;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55)) drop-shadow(0 0 15px rgba(49,154,255,.2))}
 .hero-art{margin-top:10px}
}
@media(max-width:370px){.hero-cta-row{grid-template-columns:minmax(0,1fr) 102px;column-gap:8px}.hero-cta-row .button{font-size:10px;padding:11px 8px}}

/* V10: lift the desktop app icon away from CESAR branding in the promotional artwork. */
@media(min-width:951px){.hero-desktop-brand{top:-100px;left:-22px;width:clamp(100px,9vw,132px)}}
/* V10: remove ornamental audience symbols and rebalance card headings. */
.audience-card h3{margin-top:0}

/* V11: clear brand separation, purposeful CPC process flow */
@media(min-width:951px){.hero-desktop-brand{top:-105px!important;left:auto!important;right:4px!important;width:clamp(100px,9vw,130px)!important}}
.method-steps{gap:0!important;align-items:stretch}
.method-steps>div{position:relative;border-top:0!important;padding:25px 35px 20px 12px!important}
.method-steps>div:not(:last-child)::after{content:"→";position:absolute;right:7px;top:24px;color:#58c8ff;font-size:30px;font-weight:600;line-height:1}
.method-steps strong{color:#fff}
@media(max-width:650px){.method-steps>div{padding:15px 8px 40px!important;text-align:center}.method-steps>div:not(:last-child)::after{content:"↓";right:calc(50% - 9px);top:auto;bottom:0;font-size:24px}}

/* V12: app icon sits outside upper-left of the hero promotional card. */
@media(min-width:951px){.hero-art{position:relative;overflow:visible!important;margin-left:35px}.hero-desktop-brand{position:absolute!important;top:-92px!important;left:-100px!important;right:auto!important;width:clamp(108px,9vw,132px)!important;z-index:4!important}}
@media(min-width:951px) and (max-width:1150px){.hero-desktop-brand{left:-65px!important;top:-87px!important;width:110px!important}}

/* V13: approved desktop app icon placement — left and above the promo image. */
@media (min-width:951px){
 .hero-art{position:relative!important;overflow:visible!important;}
 .hero-desktop-brand{position:absolute!important;left:-195px!important;right:auto!important;top:-185px!important;width:clamp(108px,9vw,132px)!important;height:auto!important;z-index:5!important;}
}
@media (min-width:951px) and (max-width:1150px){
 .hero-desktop-brand{left:-145px!important;top:-155px!important;width:110px!important;}
}

/* V14: move the desktop badge into the left-hand space marked by Coach.
   Override earlier V11-V13 declarations, including their !important rules. */
@media (min-width:951px) {
  .hero .hero-art .hero-desktop-brand {
    left:calc(-1 * clamp(355px, 43vw, 590px)) !important;
    right:auto !important;
    top:-185px !important;
    width:clamp(108px, 9vw, 132px) !important;
    transform:none !important;
  }
}
@media (min-width:951px) and (max-width:1150px) {
  .hero .hero-art .hero-desktop-brand {
    left:calc(-1 * clamp(330px, 42vw, 485px)) !important;
    top:-155px !important;
  }
}

/* V15: anchor desktop app logo near upper-left corner of the promo card,
   in the space between the headline and the image (not over either). */
@media (min-width:951px) {
  .hero .hero-art .hero-desktop-brand {
    left:-145px !important;
    top:-125px !important;
    right:auto !important;
    width:clamp(108px, 9vw, 132px) !important;
    transform:none !important;
  }
}
@media (min-width:951px) and (max-width:1150px) {
  .hero .hero-art .hero-desktop-brand {
    left:-105px !important;
    top:-115px !important;
    width:110px !important;
  }
}