*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#ffffff;font-family:'Manrope',system-ui,sans-serif;color:#0B1729;-webkit-font-smoothing:antialiased;-webkit-hyphens:none;hyphens:none}
::selection{background:#17639F;color:#fff}
/* Visible keyboard focus for all interactive elements (incl. the click-driven [data-act] widgets) */
:focus-visible{outline:2px solid #2E86D6;outline-offset:2px}
[data-act]:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #2E86D6;outline-offset:3px}

/* Mobile navigation — burger button + slide-down drawer (desktop .nav-links hidden < 900px) */
.nav-burger{display:none}
.nav-mobile{animation:navDrop .22s ease both}
.nav-mlink{border-radius:9px;transition:background .14s,color .14s}
.nav-mlink:hover,.nav-mlink:focus-visible{background:#f2f6fc;color:#17639F}
@keyframes navDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Legal pages (Privacy, Terms) — TOC + article typography */
.legal-toc{transition:color .14s,background .14s,border-color .14s}
.legal-toc:hover,.legal-toc:focus-visible{color:#17639F;background:#f2f6fc;border-left-color:#8fb0ff}
.legal-toc.active{color:#17639F;background:#eef4fb;border-left-color:#17639F;font-weight:700}
.legal-sec:first-child{border-top:none;padding-top:4px}
.legal-sec ul{margin:12px 0 0;padding-left:20px}
.legal-sec li{margin:8px 0}
.legal-sec p{margin:0 0 12px}
.legal-sec p:last-child{margin-bottom:0}
.legal-sec a{color:#17639F;text-decoration:none;font-weight:600}
.legal-sec a:hover{text-decoration:underline}
.legal-sec strong{color:#26314b;font-weight:700}
.foot-legal{transition:color .14s}
.foot-legal:hover{color:#cdd6ea !important}

/* Gradient theme helpers */
.grad-primary{background:linear-gradient(135deg,#2E86D6 0%,#17639F 55%,#123f66 100%) !important;color:#fff !important;border:none !important;box-shadow:0 10px 26px rgba(23,99,159,.30) !important;transition:filter .18s,transform .18s,box-shadow .18s}
.grad-primary:hover{filter:brightness(1.09);transform:translateY(-2px);box-shadow:0 16px 38px rgba(23,99,159,.46) !important}
/* secondary / ghost buttons on dark backgrounds */
.btn-ghost{transition:background .18s,border-color .18s,transform .18s}
.btn-ghost:hover{background:rgba(255,255,255,.16) !important;border-color:rgba(255,255,255,.42) !important;transform:translateY(-2px)}
/* nav links: colour shift + animated gradient underline on hover */
.nav-link{position:relative;transition:color .16s}
.nav-link:hover{color:#17639F !important}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:linear-gradient(90deg,#17639F,#F47C20);transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
.nav-link:hover::after{transform:scaleX(1)}

/* ---- product-page dashboard ---- */
.pm-table{width:100%;border-collapse:collapse}
.pm-table th{font-size:11px;font-weight:800;letter-spacing:.06em;color:#98a2b8;text-transform:uppercase;padding:0 16px 12px}
.pm-table td{padding:14px 16px;border-top:1px solid #eef1f6;font-size:14px;color:#3a4560;vertical-align:middle}
.pm-row{transition:background .14s}
.pm-row:hover{background:#f7f9fc}
.pm-select{font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:600;color:#3a4560;background:#fff;border:1px solid #e2e7f0;border-radius:11px;padding:10px 13px;cursor:pointer;outline:none;transition:border-color .15s}
.pm-select:hover{border-color:#c7d0ea}
.pm-select:focus{border-color:#17639F}
.pm-action{font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;color:#17639F;background:#eef4fb;border:1px solid #dbe7f5;border-radius:8px;padding:7px 12px;cursor:pointer;transition:background .15s,transform .15s}
.pm-action:hover{background:#dcebfb;transform:translateY(-1px)}
.pm-kebab{color:#5b6580;background:#f2f4f8;border-color:#e2e7f0;padding:7px 10px}
.pm-page{min-width:34px;height:34px;font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:700;color:#3a4560;background:#fff;border:1px solid #e2e7f0;border-radius:9px;cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.pm-page:hover:not(:disabled){border-color:#17639F;color:#17639F}
.pm-page:disabled{opacity:.4;cursor:not-allowed}
.pm-page-on{background:linear-gradient(135deg,#2E86D6,#17639F) !important;border-color:transparent !important;color:#fff !important}
.skeleton{background:linear-gradient(90deg,#eef1f6 25%,#e2e7f0 37%,#eef1f6 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* Dark shimmer skeleton behind product hero banners while the PNG/iframe load */
.hero-skeleton{background:linear-gradient(100deg,#0b1729 30%,#16294a 50%,#0b1729 70%);background-size:280% 100%;animation:heroShimmer 1.6s ease-in-out infinite}
@keyframes heroShimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}
.fade-in{animation:fadeUp .4s ease both}
.pm-faq{background:#fff;border:1px solid #e7ebf3;border-radius:14px;overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .18s}
.pm-faq:hover{border-color:var(--ac,#d3ddea);transform:translateY(-2px);box-shadow:0 12px 30px rgba(11,23,41,.08)}
.pm-faq[open]{border-color:var(--ac,#d3ddea);box-shadow:0 14px 34px rgba(11,23,41,.09)}
.pm-faq summary::-webkit-details-marker{display:none}
.pm-faq summary{transition:background .16s}
.pm-faq summary:hover{background:#fafbff}
.pm-faq[open] .pm-faq-ic{transform:rotate(45deg)}
.pm-faq summary:hover .pm-faq-ic{transform:scale(1.1)}
.pm-faq[open] summary:hover .pm-faq-ic{transform:rotate(45deg) scale(1.1)}
.pm-faq[open] .pm-faq-a{animation:faqReveal .34s ease}
@keyframes faqReveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* Heading gradients. The defaults sweep the core product accents (blue → purple → orange);
   a product page can override the stops so its headings match its own accent — see the
   --gh-* vars set on the product shell in app.js. */
.grad-head{background:linear-gradient(120deg,var(--gh-a,#17639F) 0%,var(--gh-b,#7C3AED) 52%,var(--gh-c,#F47C20) 100%);-webkit-background-clip:text;background-clip:text;color:transparent !important}
.grad-head-light{background:linear-gradient(115deg,var(--ghl-a,#9dbcff) 0%,var(--ghl-b,#c9b6ff) 45%,var(--ghl-c,#ffcf9a) 100%);-webkit-background-clip:text;background-clip:text;color:transparent !important}

/* Hover helpers — the original used a `style-hover` attribute; we replicate with real CSS. */
.hov-card{transition:.16s}
.hov-card:hover{border-color:#c7d0ea !important;transform:translateY(-2px);box-shadow:0 14px 34px rgba(11,23,41,.07)}
.hov-feature{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.hov-feature:hover{border-color:var(--ac,#c7d0ea) !important;transform:translateY(-4px);box-shadow:0 20px 46px rgba(11,23,41,.1)}
.hov-menu:hover{background:#f5f7fb !important}
.sup-more-btn:hover{background:#e2edf9 !important;border-color:#bcd5ee !important;transform:translateY(-1px)}
.sup-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.sup-grid>*{flex:0 0 calc((100% - 42px)/4)}
@media (max-width:900px){.sup-grid>*{flex-basis:100%}}
.sup-more-card{transition:border-color .16s,background .16s}
.sup-more-card:hover{border-color:#9db9d8 !important;background:#eef4fb !important}
.hov-ref:hover{border-color:#c7d0ea !important;box-shadow:0 12px 30px rgba(11,23,41,.07)}
.quotes-track:hover{animation-play-state:paused !important}

/* Nav dropdowns — state-driven in the original; here they open on hover. */
.dropdown-menu{opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease,visibility .15s}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:none}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulseDot{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@keyframes dash{to{stroke-dashoffset:-16}}
@keyframes dashFlow{to{stroke-dashoffset:-24}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes quoteScroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes grow{from{width:0%}to{width:100%}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(143,176,255,.5);transform:translate(-50%,-50%) scale(1)}50%{box-shadow:0 0 0 12px rgba(143,176,255,0);transform:translate(-50%,-50%) scale(1.06)}}
@keyframes scanY{0%{top:8%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:92%;opacity:0}}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes demoIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes rowPop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes barGrow{from{width:0}to{width:var(--w)}}
@keyframes auraPulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes auraSoft{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.55)}50%{opacity:1;transform:scale(1.2)}}
@keyframes sweepX{0%{left:-42%}60%{left:118%}100%{left:118%}}

@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;animation-iteration-count:1 !important}}

/* Responsive — the original targeted desktop; collapse the multi-column grids on small screens. */
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4,.hero-grid,.stats-grid,.docs-grid,.explorer-grid{grid-template-columns:1fr !important}
  .hero-h1{font-size:38px !important}
  .section-h2{font-size:30px !important}
  .nav-links{display:none !important}
  .nav-burger{display:inline-flex !important}
  .nav-cta{display:none !important}
  .docs-aside{position:static !important}
  .hero-stats{flex-wrap:wrap;gap:20px !important}
}