/* ════════════════════════════════════════════════════════════
   startbuddi theme — full-bleed / full-width / full-screen layer
   Loaded after theme.css. Removes the rounded "shell" container so
   the site renders edge-to-edge, and adds WordPress-specific glue.
   ════════════════════════════════════════════════════════════ */

/* Kill the rounded card shell — go full bleed, edge to edge */
.shell{
  background:#fff;
  border-radius:0 !important;
  margin:0 !important;
  overflow:visible;
  box-shadow:none !important;
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
@media(max-width:620px){ .shell{margin:0 !important;border-radius:0 !important} }

html,body{width:100%}
body{background:#fff}

/* Site main grows to fill the screen so the footer sits at the bottom */
.sb-main{flex:1 0 auto;display:block;width:100%}

/* Sticky nav must sit above everything once the shell no longer clips it */
.navbar{position:sticky;top:0;z-index:500}
.announce{position:relative;z-index:501}

/* Full-bleed section backgrounds: any section that opts in spans the
   full viewport width while its inner .w / .wn stays centered & readable */
.section.bleed,.full-bleed{width:100%;margin-left:0;margin-right:0}
.bleed-navy{background:var(--navy);color:#fff}
.bleed-canvas{background:var(--canvas)}
.bleed-blue{background:var(--blue);color:#fff}

/* Let hero / dashboard breathe on very wide screens */
.w.wide{max-width:1320px}
.w.full{max-width:none;padding-left:clamp(20px,4vw,72px);padding-right:clamp(20px,4vw,72px)}

/* WordPress alignment helpers inside the_content */
.sb-prose{max-width:760px;margin:0 auto;font-size:1.05rem;line-height:1.8;color:var(--t2)}
.sb-prose h2{font-family:var(--fh);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:42px 0 14px}
.sb-prose h3{font-family:var(--fh);font-size:1.25rem;font-weight:700;color:var(--ink);margin:30px 0 10px}
.sb-prose p{margin:0 0 18px}
.sb-prose ul,.sb-prose ol{margin:0 0 18px 22px}
.sb-prose li{margin:0 0 8px}
.sb-prose a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sb-prose img{border-radius:var(--radius-lg);margin:24px 0}
.sb-prose blockquote{border-left:4px solid var(--blue);background:var(--blue-10);padding:16px 22px;border-radius:0 12px 12px 0;margin:24px 0;font-style:italic;color:var(--ink)}
.sb-prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.95rem}
.sb-prose th,.sb-prose td{border:1px solid var(--bdr);padding:11px 14px;text-align:left}
.sb-prose th{background:var(--bg);font-family:var(--fh);font-weight:700;color:var(--ink)}

/* WordPress core block alignment */
.alignwide{max-width:1320px;margin-left:auto;margin-right:auto}
.alignfull{max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-block-image img{border-radius:var(--radius-lg)}

/* Admin bar offset so sticky nav doesn't hide under it */
body.admin-bar .navbar{top:32px}
@media(max-width:782px){ body.admin-bar .navbar{top:46px} }

/* Mobile nav drawer (the prototype hid nav links < 1040px; restore them) */
.sb-burger{display:none;margin-left:auto;width:42px;height:42px;border-radius:10px;
  align-items:center;justify-content:center;color:#fff;font-size:1.1rem;background:rgba(255,255,255,.08)}
.sb-mobile,.sb-scrim{display:none}
@media(max-width:1040px){
  .sb-burger{display:flex}
  .nav-right{display:none}
  .sb-mobile{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);z-index:600;
    background:var(--navy);color:#fff;padding:24px 22px;overflow-y:auto;box-shadow:-20px 0 60px rgba(0,0,0,.4)}
  .sb-mobile.open{display:block;animation:sbSlide .22s ease}
  @keyframes sbSlide{from{transform:translateX(100%)}to{transform:translateX(0)}}
  .sb-mobile a{display:block;color:rgba(255,255,255,.86);font-family:var(--fb);font-size:1.02rem;
    padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .sb-mobile a.cta{margin-top:18px;background:var(--blue);color:#fff;text-align:center;border-radius:10px;
    font-family:var(--fh);font-weight:700;border:none}
  .sb-mobile .grp{font-family:var(--fh);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.4);margin:18px 0 4px}
  .sb-scrim{position:fixed;inset:0;background:rgba(10,19,38,.55);z-index:590}
  .sb-scrim.open{display:block}
}

/* Generic page hero used by templates that don't ship a bespoke hero */
.sb-phero{padding:72px 0 36px;text-align:center}
.sb-phero .eyebrow{justify-content:center;display:flex}
.sb-phero h1{font-family:var(--fh);font-weight:800;letter-spacing:-.04em;line-height:1.04;
  font-size:clamp(2.3rem,4.6vw,3.6rem);color:var(--ink);max-width:880px;margin:14px auto 0}
.sb-phero .lead{font-size:1.12rem;color:var(--t2);line-height:1.7;max-width:620px;margin:18px auto 0}
.sb-phero .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}

/* FAQ accordion (AEO) */
.sb-faq{max-width:820px;margin:0 auto}
.sb-faq details{border:1px solid var(--bdr);border-radius:14px;background:#fff;margin-bottom:12px;overflow:hidden}
.sb-faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--fh);font-weight:700;
  font-size:1.05rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.sb-faq summary::-webkit-details-marker{display:none}
.sb-faq summary::after{content:"+";font-size:1.5rem;color:var(--blue);font-weight:400;transition:transform .2s}
.sb-faq details[open] summary::after{transform:rotate(45deg)}
.sb-faq .a{padding:0 24px 22px;color:var(--t2);line-height:1.75}

/* Module chips used on pillar/industry pages */
.sb-modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.sb-modcard{display:flex;gap:12px;align-items:flex-start;padding:18px;border:1px solid var(--bdr);
  border-radius:14px;background:#fff;transition:all .18s}
.sb-modcard:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,27,51,.08)}
.sb-modcard .ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;background:var(--blue-10);color:var(--blue)}
.sb-modcard .nm{font-family:var(--fh);font-weight:700;color:var(--ink);font-size:.98rem}
.sb-modcard .ds{font-size:.85rem;color:var(--t2);margin-top:2px;line-height:1.5}

/* Compare feature matrix */
.sb-matrix{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--bdr);
  border-radius:16px;overflow:hidden;font-size:.95rem}
.sb-matrix th,.sb-matrix td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--bdr)}
.sb-matrix thead th{background:var(--navy);color:#fff;font-family:var(--fh);font-weight:700}
.sb-matrix thead th.us{background:var(--blue)}
.sb-matrix tbody tr:last-child td{border-bottom:none}
.sb-matrix .yes{color:var(--mint);font-weight:700}
.sb-matrix .no{color:var(--t3)}
.sb-matrix td.us{background:var(--blue-10);font-weight:600;color:var(--ink)}

/* Related / cluster link grid */
.sb-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.sb-related a{display:block;padding:20px;border:1px solid var(--bdr);border-radius:14px;background:#fff;transition:all .18s}
.sb-related a:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,27,51,.08)}
.sb-related .k{font-family:var(--fh);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700}
.sb-related .t{font-family:var(--fh);font-weight:700;color:var(--ink);margin-top:6px;line-height:1.3}

/* Big CTA band */
.sb-cta-band{background:var(--navy);color:#fff;text-align:center;padding:80px 0}
.sb-cta-band h2{font-family:var(--fh);font-weight:800;letter-spacing:-.03em;font-size:clamp(1.9rem,3.6vw,2.8rem);color:#fff}
.sb-cta-band p{color:rgba(255,255,255,.7);font-size:1.08rem;margin:14px auto 26px;max-width:520px}
.sb-cta-band .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Breadcrumbs */
.sb-crumbs{font-size:.84rem;color:var(--t3);padding:16px 0}
.sb-crumbs a{color:var(--t2)}
.sb-crumbs a:hover{color:var(--blue)}
.sb-crumbs .sep{margin:0 8px;color:var(--bdr)}

/* ============================================================
   Dynamic-template page-specific skins (industry, compare, hubs)
   ported from prototype page <style> blocks.
   ============================================================ */
.indhero{background:var(--navy);position:relative;overflow:hidden;padding:64px 0 70px}
.indhero::before{content:'';position:absolute;top:-150px;right:-120px;width:480px;height:480px;background:var(--blue);border-radius:50%;opacity:.12}
.indhero .dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px}
.indhero h1{font-family:var(--fh);font-weight:800;letter-spacing:-.04em;line-height:1.05;font-size:clamp(2.4rem,4.8vw,3.8rem);color:#fff}
.indhero .sub{font-size:1.08rem;color:rgba(255,255,255,.6);line-height:1.7;max-width:500px;margin:20px 0 28px}
.indhero .fsec-eyebrow{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.85)}
.indhero .hero3-grid .left h1{color:#fff}
.ticklist{list-style:none}
.ticklist li i,.ticklist span i{color:var(--mint,#34d399)}
.wfsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.wfstep{background:#fff;border:1px solid var(--bdr);border-radius:18px;padding:24px;text-align:center}
.wfstep .n{width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--fh);font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.wfstep h4{font-family:var(--fh);font-size:.98rem;font-weight:700;margin-bottom:6px}
.wfstep p{font-size:.82rem;color:var(--t2);line-height:1.55}
@media(max-width:900px){.wfsteps{grid-template-columns:1fr 1fr}}

.cmphero{background:var(--navy);position:relative;overflow:hidden;padding:60px 0 64px;text-align:center}
.cmphero .dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px}
.cmphero h1{font-family:var(--fh);font-weight:800;letter-spacing:-.04em;line-height:1.06;font-size:clamp(2.3rem,4.6vw,3.6rem);color:#fff}
.cmphero p{font-size:1.06rem;color:rgba(255,255,255,.6);line-height:1.7;max-width:560px;margin:18px auto 0}
.vsbadges{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:30px}
.vsb{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 28px;display:flex;align-items:center;gap:12px}
.vsb .lg{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:800;font-size:1rem}
.vsb .nm{font-family:var(--fh);font-weight:800;color:#fff;font-size:1.05rem}
.vsx{font-family:var(--fh);font-weight:800;color:rgba(255,255,255,.5);font-size:1.2rem}
.verdict{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:50px}
.vcol{border-radius:20px;padding:28px}
.vcol h3{font-family:var(--fh);font-size:1.2rem;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.vcol ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.vcol li{display:flex;align-items:flex-start;gap:10px;font-size:.94rem;line-height:1.5}
@media(max-width:760px){.verdict{grid-template-columns:1fr}}

/* Navy hub header (glossary / help / compare index) */
.sb-hubhero{background:var(--navy);position:relative;overflow:hidden;padding:62px 0 64px;text-align:center}
.sb-hubhero h1{font-family:var(--fh);font-weight:800;letter-spacing:-.04em;line-height:1.06;font-size:clamp(2.2rem,4.4vw,3.4rem);color:#fff}
.sb-hubhero p{font-size:1.05rem;color:rgba(255,255,255,.62);line-height:1.7;max-width:560px;margin:16px auto 0}
.sb-hubhero .dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px}
.sb-hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
@media(max-width:900px){.sb-hubgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.sb-hubgrid{grid-template-columns:1fr}}
.sb-hubcard{background:#fff;border:1px solid var(--bdr);border-radius:16px;padding:22px;display:block;transition:.2s;border-left:3px solid var(--blue)}
.sb-hubcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,30,80,.10)}
.sb-hubcard .k{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--blue)}
.sb-hubcard .t{display:block;font-family:var(--fh);font-weight:800;font-size:1.04rem;color:var(--ink);margin-top:6px;line-height:1.3}
.sb-hubcard .d{display:block;font-size:.86rem;color:var(--t2);margin-top:8px;line-height:1.55}
.sb-doc{display:grid;grid-template-columns:1fr;gap:8px}

/* ============================================================
   Mega-menu viewport fix — properly aligned, no overflow
   The panels are now anchored from the right side of the nav-item
   so they never clip off-screen on the left. On small viewports
   they shrink to fit and scroll internally.
   ============================================================ */
/* Mega menu positioning */
/* Make nav-links the positioning parent for mega menus */
#sb-nav-links{position:relative}
/* Product menu: anchor from nav-links left edge so it never overflows */
.mega-product-item{position:static !important}
.mega-wrap.mega-product{
  left:0;
  right:0;
  transform:none;
  width:auto;
  max-width:calc(100vw - 48px);
  margin:0 auto;
}
/* On largish screens keep product panel at full designed width */
@media(min-width:1100px){
  .mega-wrap.mega-product{min-width:860px;width:880px}
  .mega-wrap.mega-solutions{min-width:700px}
  .mega-wrap.mega-resources{min-width:580px}
}
/* Solutions and resources: centered below their nav-item trigger */
.mega-wrap.mega-solutions,
.mega-wrap.mega-resources{
  left:50%;
  transform:translateX(-50%);
  width:auto;
  max-width:calc(100vw - 48px);
}
/* Replace the translateX-based open animation */
.mega-wrap.mega-product.open{animation:sbMegaIn2 .16s ease}
.mega-wrap.mega-solutions.open,
.mega-wrap.mega-resources.open{animation:sbMegaIn .16s ease}
@keyframes sbMegaIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes sbMegaIn2{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
/* Scroll rather than clip */
.mega-wrap{overflow:auto;max-height:calc(100vh - 120px)}
@media(max-width:1040px){.mega-wrap{display:none !important}}

/* ============================================================
   Demo modal (single autoplaying MP4 walkthrough + book-a-demo)
   ============================================================ */
.sb-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.sb-modal.open{display:flex}
.sb-modal-scrim{position:fixed;inset:0;background:rgba(8,14,28,.74);backdrop-filter:blur(3px)}
.sb-modal-box{position:relative;z-index:2;background:#fff;border-radius:20px;width:100%;max-width:880px;padding:26px;box-shadow:0 30px 90px rgba(8,14,28,.5);animation:sbMegaIn .18s ease}
.sb-modal-x{position:absolute;top:14px;right:16px;border:none;background:var(--canvas);width:34px;height:34px;border-radius:50%;font-size:1.3rem;line-height:1;color:var(--t2);cursor:pointer}
.sb-modal-x:hover{background:#e3e5ea;color:var(--ink)}
.sb-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.sb-modal-kicker{font-family:var(--fh);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);display:flex;align-items:center;gap:7px}
.sb-modal-head h3{font-family:var(--fh);font-weight:800;font-size:1.4rem;color:var(--ink);margin-top:4px;letter-spacing:-.02em}
.sb-modal-video{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9}
.sb-modal-video video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
body.sb-modal-lock{overflow:hidden}