/* Seller Snap header + footer (Nov 2026). All classes prefixed ssn- (header) and ssf- (footer). Font: Poppins (already on the site). */
:root{--ss-navy:#0C2137;--ss-navy-2:#121F3D;--ss-purple:#4B5CA5;--ss-purple-2:#5865AE;--ss-text-2:#3D4B5C;--ss-border:#E3E5EF;--ss-soft:#EEF0FA;--ss-orange:#FF8900;--ss-orange-h:#F07D00;--ss-bg:#F8F9FC}
.ssn-header,.ssf{font-family:'Poppins',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.ssn-header *,.ssf *{box-sizing:border-box}
.ssn-header a,.ssf a{text-decoration:none}

/* ---------- HEADER ---------- */
.ssn-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--ss-border)}
.ssn-inner{position:relative;max-width:1200px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;gap:48px}
.ssn-logo{display:flex;align-items:center;min-height:44px;flex:none}.ssn-logo img{height:32px;width:auto;display:block}
.ssn-nav{flex:1}
.ssn-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:30px}
.ssn-trigger,.ssn-link{display:flex;align-items:center;gap:6px;min-height:44px;padding:0;background:none;border:0;font:500 15px/1 'Poppins',sans-serif;color:var(--ss-navy);cursor:pointer}
.ssn-trigger svg{transition:transform .2s ease}
.ssn-trigger:hover,.ssn-link:hover{color:var(--ss-purple)}
.ssn-trigger[aria-expanded="true"]{color:var(--ss-purple);font-weight:600;box-shadow:inset 0 -2px 0 var(--ss-purple)}
.ssn-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.ssn-new{font-size:11px;font-weight:600;letter-spacing:.04em;line-height:1.3;color:#fff;background:var(--ss-purple-2);border-radius:999px;padding:3px 9px;margin-left:2px}
.ssn-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.ssn-login{min-height:44px;display:flex;align-items:center;padding:0 8px;font-size:15px;font-weight:600;color:var(--ss-navy)}
.ssn-cta{min-height:44px;padding:0 22px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;background:var(--ss-orange);color:var(--ss-navy)}
.ssn-cta:hover{background:var(--ss-orange-h);color:var(--ss-navy)}
.ssn-burger,.ssn-close{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;color:var(--ss-navy);cursor:pointer}

/* dropdown panel (positioned by JS under its menu item) */
.ssn-panel{position:absolute;top:calc(100% + 10px);left:0;width:780px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--ss-border);border-radius:20px;box-shadow:0 24px 60px rgba(12,33,55,.12);overflow:visible;animation:ssnDrop .3s cubic-bezier(.2,.7,.2,1) both}
.ssn-panel[hidden]{display:none}
.ssn-caret{position:absolute;top:-8px;left:var(--caret,60px);width:14px;height:14px;background:#fff;border-left:1px solid var(--ss-border);border-top:1px solid var(--ss-border);transform:rotate(45deg)}
.ssn-panel-body{padding:22px 12px 14px}
.ssn-eyebrow{margin:0 0 8px;padding:0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ss-orange)}
.ssn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}
.ssn-col{display:flex;flex-direction:column;gap:2px}
.ssn-learn{margin-top:14px;padding-top:14px;border-top:1px solid #EEF0F5}
.ssn-item{display:flex;gap:14px;align-items:center;padding:12px;border-radius:12px;color:var(--ss-navy);transition:background .2s ease}
.ssn-item:hover,.ssn-item:focus-visible{background:rgba(18,31,61,.06);color:var(--ss-navy)}
.ssn-ico{width:40px;height:40px;flex:none;border-radius:10px;background:var(--ss-soft);color:var(--ss-purple);display:flex;align-items:center;justify-content:center}
.ssn-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ssn-t{font-size:15px;font-weight:600}.ssn-d{font-size:13px;color:var(--ss-text-2)}
.ssn-bar{display:flex;justify-content:flex-end;gap:32px;flex-wrap:wrap;padding:14px 24px;background:var(--ss-bg);border-top:1px solid var(--ss-border);border-radius:0 0 20px 20px}
.ssn-bar a{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ss-navy-2)}
.ssn-bar a:hover{color:var(--ss-purple)}
@keyframes ssnDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* mobile drawer */
.ssn-mobile{position:fixed;inset:0;z-index:1001;background:#fff;display:flex;flex-direction:column}
.ssn-mobile[hidden]{display:none}
.ssn-m-top{height:68px;flex:none;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ss-border)}
.ssn-m-top .ssn-logo img{height:28px}
.ssn-m-top .ssn-close{display:flex}
.ssn-m-nav{flex:1;overflow-y:auto;padding:4px 20px 8px}
.ssn-acc{border-bottom:1px solid #EEF0F5}
.ssn-acc-btn,.ssn-m-link{width:100%;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:0;padding:0;font:600 17px/1 'Poppins',sans-serif;color:var(--ss-navy);cursor:pointer;text-align:left}
.ssn-m-link{justify-content:flex-start}
.ssn-acc-btn[aria-expanded="true"]{color:var(--ss-purple)}
.ssn-acc-btn svg{transition:transform .2s ease}.ssn-acc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ssn-acc-body{padding:0 0 16px}.ssn-acc-body .ssn-item{padding:10px 8px;margin:0 -8px}
.ssn-acc-body .ssn-eyebrow{margin:10px 0 6px;padding:0}
.ssn-m-ctas{flex:none;padding:16px 20px 28px;border-top:1px solid var(--ss-border);display:flex;flex-direction:column;gap:10px}
.ssn-m-ctas .ssn-cta{height:52px;font-size:16px}
.ssn-m-login{height:48px;border-radius:999px;border:1px solid #C9CEE3;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--ss-navy)}
body.ssn-locked{overflow:hidden}

@media (max-width:1080px){
  .ssn-nav,.ssn-login{display:none}
  .ssn-burger{display:flex}
  .ssn-inner{padding:12px 20px;gap:16px}
  .ssn-actions .ssn-cta{min-height:40px;padding:0 16px;font-size:14px}
}
@media (max-width:420px){.ssn-actions .ssn-cta{display:none}}

/* ---------- FOOTER ---------- */
/* To remove the grid squares, delete the first two linear-gradient layers and the 48px background-size values */
.ssf{color:#fff;background-color:var(--ss-navy-2);background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),radial-gradient(ellipse 60% 70% at 85% 0%,rgba(88,100,174,.45),rgba(88,100,174,0) 70%),linear-gradient(160deg,#1B2C4E 0%,#0F1A33 100%);background-size:48px 48px,48px 48px,auto,auto}
.ssf-inner{max-width:1200px;margin:0 auto;padding:64px 40px 0;display:flex;flex-direction:column;gap:48px}
.ssf-top{display:flex;flex-wrap:wrap;gap:32px 64px;justify-content:space-between;align-items:flex-end;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.14)}
.ssf-brand{flex:1 1 380px;max-width:480px;display:flex;flex-direction:column;gap:18px}
.ssf-logo{display:flex;align-items:center;min-height:44px}.ssf-logo img{height:34px;width:auto;display:block}
.ssf-brand p{margin:0;font-size:15px;line-height:1.65;color:#C9CFE6}
.ssf-news{flex:0 1 420px;max-width:420px;display:flex;flex-direction:column;gap:10px}
.ssf-news-title{margin:0;font-size:15px;font-weight:600}
.ssf-form{display:flex;gap:8px;flex-wrap:wrap}
.ssf-form input{flex:1 1 200px;min-width:0;height:48px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:15px 'Poppins',sans-serif}
.ssf-form input::placeholder{color:#AEB5D3}
.ssf-form button{height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--ss-orange);color:var(--ss-navy);font:600 15px 'Poppins',sans-serif;cursor:pointer}
.ssf-form button:hover{background:var(--ss-orange-h)}
/* HubSpot subscribe form (First name + Email + Subscribe). !important overrides HubSpot's default form styles, so this works with or without "raw HTML" mode */
.ssf-hs form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;max-width:none!important;margin:0!important}
.ssf-hs fieldset{display:contents!important;max-width:none!important;border:0!important;padding:0!important;margin:0!important}
.ssf-hs .hs-form-field{margin:0!important;min-width:0;width:auto!important;float:none!important;padding:0!important}
.ssf-hs .hs-form-field>label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
.ssf-hs .input{margin:0!important}
.ssf-hs input.hs-input,.ssf-hs input[type=text],.ssf-hs input[type=email]{width:100%!important;height:44px!important;padding:0 16px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.25)!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font:14px 'Poppins',sans-serif!important;box-sizing:border-box!important;box-shadow:none!important;line-height:normal!important}
.ssf-hs input.hs-input:focus{outline:2px solid #FFB866!important;outline-offset:2px;border-color:transparent!important}
.ssf-hs input::placeholder{color:#AEB5D3!important;opacity:1}
.ssf-hs .hs_submit,.ssf-hs .hs-submit{grid-column:1/-1;margin:2px 0 0!important}
.ssf-hs .actions{margin:0!important;padding:0!important}
.ssf-hs .hs-button,.ssf-hs input[type=submit]{height:44px!important;padding:0 24px!important;border:0!important;border-radius:999px!important;background:var(--ss-orange)!important;color:var(--ss-navy)!important;font:600 15px 'Poppins',sans-serif!important;cursor:pointer;box-shadow:none!important;text-shadow:none!important;width:auto!important;line-height:44px!important}
.ssf-hs .hs-button:hover{background:var(--ss-orange-h)!important}
.ssf-hs .hs-error-msgs{list-style:none!important;margin:6px 0 0!important;padding:0 18px!important}
.ssf-hs .hs-error-msgs label,.ssf-hs .hs-error-msg{font-size:12px!important;color:#FFB866!important;position:static!important;width:auto!important;height:auto!important;clip:auto!important}
.ssf-hs .hs_error_rollup{display:none!important}
.ssf-hs .submitted-message{grid-column:1/-1;font-size:14px;color:#C9CFE6}
.ssf-hs .legal-consent-container,.ssf-hs .hs-richtext{grid-column:1/-1;font-size:12px;color:#C9CFE6}
@media (max-width:520px){.ssf-hs form{grid-template-columns:1fr}}
/* inside HubSpot's ~420px iframe: two columns whenever the PAGE is wider than 520px (class set by ss-footer.php) */
.ssf-hs.ssf-wide form{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.ssf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ssf-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:36px 32px}
.ssf-eyebrow{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#FFB866}
.ssf-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ssf-col a{font-size:14px;line-height:1.4;color:#D5D9F0}
.ssf a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ssf-col .ssn-new{font-size:10px;padding:2px 7px;margin-left:8px;vertical-align:1px}
.ssf-contact a{display:flex;flex-direction:column;gap:1px;font-weight:500;color:#fff}
.ssf-contact span{font-size:12px;font-weight:400;color:#C9CFE6}
.ssf-close{display:flex;flex-direction:column;gap:24px;padding:8px 0 36px}
.ssf-social{display:flex;align-items:center;gap:28px}
.ssf-line{flex:1;height:1px;background:rgba(255,255,255,.14)}
.ssf-icons{display:flex;gap:10px}
.ssf-icons a{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}
.ssf-icons a:hover{transform:translateY(-2px);text-decoration:none}
.ssf-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:24px;align-items:center}
.ssf-office{display:block;max-width:300px;font-size:12px;line-height:1.55;color:#C9CFE6}
.ssf-office strong{display:block;font-weight:600;color:#fff}
.ssf-office--right{justify-self:end;text-align:right}
.ssf-legal{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.ssf-legal p{margin:0;font-size:13px;color:#C9CFE6}
.ssf-legal-links{display:flex;align-items:center;gap:16px}
.ssf-legal-links a{font-size:13px;color:#fff;text-decoration:underline;text-underline-offset:3px}
.ssf-legal-links span{width:1px;height:14px;background:rgba(255,255,255,.14)}
@media (max-width:760px){
  .ssf-inner{padding:44px 20px 0;gap:32px}
  .ssf-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .ssf-cols .ssf-col:last-child{grid-column:1/-1}
  .ssf-social{gap:16px}
  .ssf-bottom{grid-template-columns:1fr;justify-items:center;text-align:center}
  .ssf-bottom .ssf-legal{order:-1}
  .ssf-office,.ssf-office--right{justify-self:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){.ssn-panel,.ssn-item,.ssn-trigger svg,.ssf-icons a{animation:none;transition:none}}


/* Uploaded (ACF) icons: keep them the same size as the built-in inline SVGs */
.ssn-ico img,.ssf-icons img{width:20px;height:20px;display:block;object-fit:contain}

/* ---------- Theme overrides (custom-style.css) ----------
   On screens <=767px the theme forces `p, a, small {font-size:18px !important}`, which inflated
   every link and label in the header and footer. Re-assert the designed sizes. */
@media (max-width:767px){
  .ssn-cta,.ssn-actions .ssn-cta{font-size:14px!important}
  .ssn-m-ctas .ssn-cta{font-size:16px!important}
  .ssn-m-login{font-size:16px!important}
  .ssn-m-link{font-size:17px!important}
  .ssn-eyebrow{font-size:12px!important}
  .ssn-bar a{font-size:15px!important}
  .ssf-brand p{font-size:15px!important}
  .ssf-news-title{font-size:15px!important}
  .ssf-eyebrow{font-size:12px!important}
  .ssf-col a{font-size:14px!important}
  .ssf-contact a span{font-size:12px!important}
  .ssf-office{font-size:12px!important}
  .ssf-legal p,.ssf-legal-links a{font-size:13px!important}
  .ssf-hs .legal-consent-container p,.ssf-hs .legal-consent-container a,.ssf-hs .hs-richtext p,.ssf-hs .hs-richtext a{font-size:12px!important}
}

/* The theme sets `overflow-x:hidden !important` on both html and body, which turns body into a scroll
   container and stops the sticky header from sticking. `clip` hides the same overflow without that. */
html,html body{overflow-x:clip!important}
body.ssn-locked{overflow:hidden!important}

/* Newsletter: reserve the form's space and show placeholder fields until HubSpot's form is ready (no empty gap, no layout jump) */
.ssf-hs{position:relative;min-height:100px}
.ssf-hs--ready{min-height:0}
.ssf-skel{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;pointer-events:none}
.ssf-skel span{height:44px;padding:0 16px;display:flex;align-items:center;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#AEB5D3;font:14px 'Poppins',sans-serif}
.ssf-skel b{grid-column:1/-1;width:128px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--ss-orange);color:var(--ss-navy);font:600 15px 'Poppins',sans-serif}
@media (max-width:520px){.ssf-hs{min-height:156px}.ssf-skel{grid-template-columns:1fr}}

/* ---------- Page spacing under the header ----------
   The old header was position:fixed (out of the page flow), so every page's hero / .main-wrapper carries its own top
   padding to clear it. The new header is sticky (in flow), so that padding stacked on top of the header's own height.
   A negative bottom margin equal to the header height gives the same layout as before: header sits over the top of the
   page, content starts where the page's own padding puts it, and the header still sticks when scrolling.
   --ssn-h is set to the real header height by seller-snap-nav.js (73px desktop / 69px mobile as fallback). */
.ssn-header{margin-bottom:calc(-1 * var(--ssn-h,73px))}
@media (max-width:1080px){.ssn-header{--ssn-h:69px}}
/* Mobile pages built on <main> (home, pricing, MCP...) were designed with the old `main{padding-top:70px}` rule that lived in the
   old header file. The in-flow header now plays that role, so don't pull those up. */
@media (max-width:768px){#page:has(> main) > .ssn-header{margin-bottom:0}}
/* Logged-in admin bar sits above the sticky header */
body.admin-bar .ssn-header{top:32px}
@media (max-width:782px){body.admin-bar .ssn-header{top:46px}}