/* ==========================================================================
   NowG SaaS — marketing layer stylesheet
   Scoped under body.nowg-saas. Design tokens extracted from the Revision theme.
   ========================================================================== */

body.nowg-saas{
  margin:0;background:#FFFFFF;color:#29294B;
  font-family:"DM Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","cv01","ss01";
}
body.nowg-saas *{box-sizing:border-box}
.nowg-saas a{color:#5955D1;text-decoration:none}
.nowg-saas a:hover{color:#4440B4}
.nowg-saas ::selection{background:#DAD9FA;color:#29294B}
.nowg-wrap{overflow-x:hidden}
.nowg-mono{font-family:"DM Mono",monospace}

/* keep the WP admin bar from covering the sticky header */
body.admin-bar .nowg-header{top:32px}
@media (max-width:782px){ body.admin-bar .nowg-header{top:46px} }

@keyframes nwFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes nwPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

/* ---- range slider ---- */
.rng{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;outline:none;cursor:pointer;background:#E7E7F3;accent-color:#5955D1}
.rng::-webkit-slider-thumb{-webkit-appearance:none;height:22px;width:22px;border-radius:50%;background:#fff;border:2px solid #5955D1;box-shadow:0 3px 10px rgba(81,77,204,.4);cursor:grab;transition:transform .15s}
.rng::-webkit-slider-thumb:active{transform:scale(1.12);cursor:grabbing}
.rng::-moz-range-thumb{height:20px;width:20px;border-radius:50%;background:#fff;border:2px solid #5955D1;box-shadow:0 3px 10px rgba(81,77,204,.4);cursor:grab}

/* ---- header ---- */
.nowg-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #EDEDF4}
.nowg-header-inner{max-width:1248px;margin:0 auto;padding:0 24px;height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nowg-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nowg-nav{display:flex;align-items:center;gap:4px}
.nowg-nav > a,.nowg-navbtn{padding:10px 14px;border-radius:8px;font-weight:600;font-size:15px;color:#3C3C5A;background:transparent;border:none;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px}
.nowg-nav > a:hover,.nowg-navbtn:hover{color:#29294B}
.nowg-caret{display:inline-block;width:8px;height:8px;border-right:2px solid #9A9AB2;border-bottom:2px solid #9A9AB2;transform:rotate(45deg) translateY(-2px)}
.nowg-dd{position:relative}
.nowg-dd-panel{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border:1px solid #ECECF3;border-radius:16px;box-shadow:0 24px 60px -18px rgba(41,41,75,.28),0 4px 14px rgba(114,114,255,.10);padding:12px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1),visibility .2s}
.nowg-dd:hover .nowg-dd-panel,.nowg-dd:focus-within .nowg-dd-panel{opacity:1;visibility:visible;transform:none}
.nowg-dd-features{width:520px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.nowg-dd-resources{width:280px;padding:10px}
.nowg-dd-item{display:block;padding:12px 14px;border-radius:11px;transition:background .18s}
.nowg-dd-item:hover{background:#F5F5FB}
.nowg-dd-res{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-radius:11px;transition:background .18s}
.nowg-dd-res:hover{background:#F5F5FB}
.nowg-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:9px;border:1px solid #E7E7EF;background:#fff;cursor:pointer}
.nowg-burger span{display:block;width:18px;height:2px;background:#29294B;box-shadow:0 6px 0 #29294B,0 -6px 0 #29294B}
.nowg-mobile{display:none;border-top:1px solid #EDEDF4;background:#fff;padding:14px 24px 22px}
.nowg-mobile.open{display:block}
.nowg-mobile a{display:block;padding:12px 8px;font-weight:600;font-size:16px;color:#29294B;border-bottom:1px solid #F1F1F7}
.nowg-mobile a:last-child{border-bottom:none}

/* ---- buttons ---- */
.nw-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;font-family:inherit;font-weight:600;letter-spacing:-0.01em;transition:transform .2s cubic-bezier(.16,1,.3,1),filter .2s,border-color .2s,background .2s}
.nw-btn:active{transform:scale(.97)}
.nw-btn-primary{color:#fff;background:linear-gradient(180deg,#9895FF 0%,#514DCC 100%);box-shadow:0 6px 18px -5px rgba(81,77,204,.55),inset 0 1px 0 rgba(255,255,255,.28)}
.nw-btn-primary:hover{filter:brightness(1.05);color:#fff}
.nw-btn-secondary{color:#29294B;background:#fff;border:1px solid #E1E1E8;box-shadow:0 1px 2px rgba(41,41,75,.05)}
.nw-btn-secondary:hover{border-color:#C9C9DA;background:#FBFBFE;color:#29294B}
.nw-btn-white{color:#1B1B34;background:#fff;box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
.nw-btn-white:hover{filter:brightness(.97);color:#1B1B34}
.nw-btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.nw-btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.nw-arrow{display:inline-block;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}

/* ---- reusable hover affordances used across templates ---- */
.nw-card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s}
.nw-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -22px rgba(41,41,75,.22)}
.nw-card-link:hover{transform:translateY(-4px);border-color:#D6D5F4;box-shadow:0 20px 44px -24px rgba(41,41,75,.22)}
.nw-lift:hover{transform:translateY(-3px)}
.nw-tile{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nw-tile:hover{transform:translateY(-3px)}
.nw-flink{transition:color .18s}
.nw-flink:hover{color:#5955D1}
.nw-social{transition:border-color .2s,color .2s}
.nw-social:hover{border-color:#5955D1;color:#5955D1}
.nw-input{font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
.nw-input:focus{border-color:#5955D1;box-shadow:0 0 0 3px rgba(89,85,209,.15)}

/* ---- interactive chips / selectors ---- */
.nw-chip{cursor:pointer;font-family:inherit;transition:all .25s cubic-bezier(.16,1,.3,1)}
.nw-chip.on{background:linear-gradient(180deg,#9895FF,#514DCC);color:#fff;border:1px solid transparent;box-shadow:0 5px 14px -5px rgba(81,77,204,.6)}
.nw-chip.off{background:#fff;color:#4A4A66;border:1px solid #E7E7EF}
.nw-opt{cursor:pointer;font-family:inherit;transition:all .2s}
.nw-opt.on{background:#F1F0FE;color:#5955D1;border:1px solid #5955D1}
.nw-opt.off{background:#fff;color:#4A4A66;border:1px solid #E7E7EF}

/* ---- reveal ---- */
.nowg-saas [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.nowg-saas [data-reveal].in{opacity:1;transform:none}

/* ---- demo modal ---- */
.nowg-modal{position:fixed;inset:0;z-index:100;background:rgba(21,21,40,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
.nowg-modal.open{display:flex;animation:nwFade .25s ease both}
.nowg-modal-card{width:100%;max-width:480px;background:#fff;border-radius:20px;box-shadow:0 40px 90px -30px rgba(21,21,40,.6);overflow:hidden}
.nowg-shake{animation:nwShake .4s}
@keyframes nwShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}

/* ---- responsive ---- */
@media (max-width:960px){
  .nowg-nav{display:none}
  .nowg-signin{display:none}
  .nowg-burger{display:inline-flex}
  .hero-grid{grid-template-columns:1fr!important;gap:44px!important}
  .edge-grid{grid-template-columns:1fr!important}
  .edge-tall{grid-row:auto!important}
  .roi-grid{grid-template-columns:1fr!important}
  .modules-grid{grid-template-columns:1fr!important}
  .split-2{grid-template-columns:1fr!important}
  .footer-cols{grid-template-columns:1fr 1fr!important}
  .fp-split{grid-template-columns:1fr!important}
  .fp-pillars{grid-template-columns:1fr!important}
  .fp-steps{grid-template-columns:1fr!important}
  .fp-related{grid-template-columns:1fr 1fr!important}
  .pr-tiers{grid-template-columns:1fr!important;max-width:460px;margin-left:auto;margin-right:auto}
  .pr-mid{transform:none!important}
  .cmp-row{grid-template-columns:1.4fr 1fr 1fr 1fr!important}
  .sec-grid{grid-template-columns:1fr!important}
  .sec-certs{grid-template-columns:1fr 1fr!important}
  .ab-split{grid-template-columns:1fr!important}
  .ab-vals{grid-template-columns:1fr!important}
  .ab-stats{grid-template-columns:1fr 1fr!important}
  .ct-split{grid-template-columns:1fr!important}
  .gl-grid{grid-template-columns:1fr!important}
  .in-grid{grid-template-columns:1fr 1fr!important}
  .doc-grid{grid-template-columns:1fr!important}
  .doc-nav,.doc-code{position:static!important}
  .hg-cats{grid-template-columns:1fr!important}
  .hg-pop{grid-template-columns:1fr!important}
  .tm-split{grid-template-columns:1fr!important}
}
@media (max-width:600px){
  .in-grid{grid-template-columns:1fr!important}
}
@media (max-width:560px){
  .footer-cols{grid-template-columns:1fr!important}
  .hero-cta{flex-direction:column!important;align-items:stretch!important}
  .fp-foryou{grid-template-columns:1fr 1fr!important}
  .fp-related{grid-template-columns:1fr!important}
  .ss-kpi{grid-template-columns:1fr!important}
  .cmp-hide{display:none!important}
  .cmp-row{grid-template-columns:1.4fr 1fr!important}
}
@media (prefers-reduced-motion:reduce){
  .nowg-saas *{animation:none!important;transition:none!important}
  .nowg-saas [data-reveal]{opacity:1!important;transform:none!important}
}

/* NowG chrome links never inherit the blog theme's underline; add hover states. */
.nowg-header a, .nowg-nav a, .nowg-mobile a, .nowg-footer a,
.nw-flink, .nw-social, .nowg-brand, .nowg-dd-item, .nowg-dd-res, .nowg-signin { text-decoration: none; }
.nowg-footer .nw-flink:hover { color: #ffffff; }
.nowg-footer .nw-social:hover { color: #ffffff; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.05); }