/* StreetPricer custom theme — design system extracted from signed-off preview (V2.5) */

.footer{background:#0E2340;color:#9fc4e4;padding:48px 44px 28px}
.footer .cols{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer h5{color:#fff;font-size:14px;font-weight:800;letter-spacing:1px;margin-bottom:14px;text-transform:uppercase}
.footer a{display:block;color:#9fc4e4;font-size:14.5px;font-weight:600;text-decoration:none;margin-bottom:9px}
.footer a:hover{color:#3FBCEC}
.footer .brand img{height:38px;margin-bottom:14px}
.footer .brand p{font-size:14px;color:#7fa3c4;line-height:1.6;font-weight:600;max-width:260px}
.footer .base{max-width:1100px;margin:28px auto 0;padding-top:20px;border-top:1px solid #1e3450;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#6f92b3}
/* v1.3.10: the .footer a{display:block} rule above (meant for the stacked nav
   columns) was also hitting the inline legal links in .base, forcing them
   onto separate lines. Force those specific links back to inline. */
.footer .base a{display:inline;margin-bottom:0;color:#9fc4e4;font-weight:600}
.footer .base a:hover{color:#3FBCEC}

:root{--aqua:#1FA9DE;--aqua-light:#3FBCEC;--aqua-deep:#127FB8;--navy:#123A6B;--ink:#0E2340;--canvas:#FBFBF9;--canvas2:#F4F6F9;--muted:#3d4b57;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins','Segoe UI',sans-serif;color:var(--ink);background:#fff;font-weight:600}
.page{display:block} 
.wrap{max-width:1200px;margin:0 auto}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 44px;border-bottom:2px solid var(--aqua)}
.nav img{height:42px;display:block}
.navlinks{display:flex;gap:22px;align-items:center;color:var(--ink);font-size:16.5px;font-weight:700}
/* v1.3.13: WordPress renders each top-level menu item as a bare <li><a>,
   which the design's CSS never explicitly styled (only the dropdown
   sub-menu items were). Without this, the browser falls back to its own
   default link/list styling — blue/purple underlined text with disc
   bullets — instead of the intended flat, colourless nav pills. */
.navlinks > li{list-style:none;margin:0}
.navlinks > li > a,
.navlinks > a:not(.btn){color:var(--ink);text-decoration:none;font-weight:500;font-size:20px}
.navlinks > li > a:hover,
.navlinks > a:not(.btn):hover{color:var(--aqua-deep)}
.navlinks .active{border-bottom:3px solid var(--aqua);padding-bottom:5px}
.navlinks .dd{position:relative;cursor:pointer} .navlinks .ddmenu{display:none;position:absolute;top:26px;left:0;background:#fff;border:1px solid #DDE4EC;border-radius:8px;padding:8px;min-width:180px;box-shadow:0 8px 24px rgba(18,58,107,.12);z-index:50}
.navlinks .dd:hover .ddmenu{display:block} .navlinks .ddmenu a{display:block;padding:8px 12px;color:var(--ink);font-size:14.5px;font-weight:700;text-decoration:none;border-radius:6px} .navlinks .ddmenu a:hover{background:#E3F4FC;color:var(--aqua-deep)}
.btn{background:var(--aqua);color:#fff;padding:13px 24px;border-radius:7px;font-weight:800;font-size:16px;text-decoration:none;display:inline-block}
.btn-ghost{background:#fff;color:var(--navy);border:2.5px solid var(--aqua)} .btn-ghost-white{background:transparent;color:#fff;border:2.5px solid var(--aqua-light)}
.explore{margin-top:16px;font-size:16px;font-weight:700;color:var(--aqua-deep);text-decoration:none;display:inline-block}
section{padding:60px 44px;text-align:center}
.eyebrow{color:var(--aqua-deep);font-size:13px;letter-spacing:3px;font-weight:800;margin-bottom:14px}
.hero{background:linear-gradient(160deg,#D5EFFB,#E9F7FD 50%,#FBFDFE);border-bottom:3px solid var(--aqua)}
.hero h1{font-size:42px;font-weight:600;color:var(--navy);margin-bottom:18px;line-height:1.12}
.hero h1 .plus{color:var(--aqua)}
.lead{font-size:21px;color:#2e4a66;max-width:680px;margin:0 auto 30px;line-height:1.5;font-weight:600}
.lead .profit{color:var(--aqua-deep);font-weight:800}
.ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .ctas a{padding:14px 30px;font-size:15px}
.proof{background:var(--navy);color:#d5edfa;display:flex;justify-content:center;gap:38px;flex-wrap:wrap;padding:24px 44px;font-size:16px;font-weight:600}
.proof b{color:#fff;font-weight:800} .proof .hl b{color:#5CCBF0}
.echo{background:var(--navy);color:#d5edfa;padding:18px 44px;font-size:17px;font-weight:700;text-align:center} .echo b{color:#5CCBF0}
.eyebrowbar{display:inline-block;width:46px;height:4px;background:var(--aqua);border-radius:2px;margin-bottom:16px}
h2{font-size:30px;font-weight:600;color:var(--navy);margin-bottom:14px;letter-spacing:.3px}
.sub{font-size:16px;color:var(--aqua-deep);font-weight:800;margin-bottom:12px}
p.body{font-size:18.5px;color:var(--muted);max-width:700px;margin:0 auto;line-height:1.6;font-weight:600}
p.body + p.body{margin-top:14px}
.tag{font-size:19px;color:var(--navy);font-weight:800;margin-top:16px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px;margin:0 auto;text-align:left}
.card{border-radius:14px;padding:32px} .card.ppc{background:#E3F4FC;border:1px solid #8FD6F2;border-top:5px solid var(--aqua)} .card.rep{background:var(--canvas2);border:1px solid #DDE4EC;border-top:5px solid var(--navy)}
.card h3{font-size:22px;color:var(--navy);margin-bottom:12px;font-weight:600} .card p{font-size:17px;color:#2e4a66;line-height:1.55;margin-bottom:16px;font-weight:600} .card a{color:var(--aqua-deep);font-weight:800;font-size:16px;text-decoration:none}
.chips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px} .chip{background:#E3F4FC;color:var(--navy);padding:10px 20px;border-radius:22px;font-weight:800;font-size:16px;border:1.5px solid #8FD6F2}
.canvas{background:var(--canvas)} .canvas2{background:var(--canvas2)}
.tint{background:#E3F4FC;border-top:1px solid #BEE7F8;border-bottom:1px solid #BEE7F8}
.names{color:var(--navy);font-weight:800}
.stages{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px;max-width:900px;margin-left:auto;margin-right:auto}
.stage{background:#fff;border:1.5px solid #8FD6F2;border-radius:12px;padding:16px 20px;flex:1;min-width:150px}
.stage h4{color:var(--aqua-deep);font-size:15px;margin-bottom:5px;font-weight:600} .stage p{font-size:13px;color:var(--muted);font-weight:600;line-height:1.5}
.metrics{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.metric{background:#E3F4FC;border-radius:10px;padding:14px 20px;min-width:120px} .metric .k{font-size:12px;color:var(--muted)} .metric .v{font-size:20px;color:var(--navy);font-weight:800}
.close{background:var(--navy);border-top:3px solid var(--aqua)} .close img{height:38px;margin-bottom:22px} .close h2{color:#fff} .close p{color:#d5edfa;margin-bottom:24px;font-size:16px;font-weight:600}
.faqhead{text-align:center;margin-bottom:20px}
.faq{max-width:820px;margin:0 auto;text-align:left} .faq .q{background:#fff;border:1px solid #DDE4EC;border-radius:10px;padding:18px 22px;margin-bottom:11px}
.faq .q h4{color:var(--navy);font-size:16px;font-weight:600;margin:0;display:flex;justify-content:space-between;gap:12px} .faq .q p{color:var(--muted);font-size:14px;font-weight:600;line-height:1.55;margin-top:9px} .faq .q .pm{color:var(--aqua);font-size:20px;font-weight:800;line-height:1}
.faq .seeall{text-align:center;margin-top:6px} .faq .seeall a{color:var(--aqua-deep);font-weight:600;font-size:15px;text-decoration:none}
.list{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:800px;margin:16px auto 0}
.figure{max-width:1000px;margin:26px auto 0}
.figure.narrow{max-width:640px}
.figure.tall{max-width:340px}
.figure.pair{max-width:520px}
.figure.quad{max-width:860px}
.figure.sm{max-width:460px}
.figure.strip2{max-width:620px}
.figure.md{max-width:600px}
.figure.hero{max-width:940px}
.figure.lg{max-width:720px}
.figure.amm{max-width:760px}
.figure.panel{max-width:420px}
.figure.wide{max-width:720px}
.figure.tall img{border-radius:10px}
.figure.strip{max-width:820px}
.figrow{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px;margin:26px auto 0;align-items:start}
.figrow .figure{margin:0;max-width:none}
.figure img{width:100%;height:auto;display:block;border:1px solid #DDE4EC;border-radius:12px;box-shadow:0 6px 24px rgba(18,58,107,.10)}
.figcap{font-size:14px;color:var(--muted);margin-top:10px;font-weight:600}
.ptiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;max-width:920px;margin:26px auto 0}
.ptile{background:#fff;border:1px solid #DDE4EC;border-radius:12px;height:84px;display:flex;align-items:center;justify-content:center;padding:16px 20px}
.ptile img{max-height:34px;max-width:100%;width:auto;object-fit:contain} .list span{background:var(--canvas2);border:1px solid #DDE4EC;border-radius:8px;padding:8px 14px;font-size:14px;color:var(--navy);font-weight:700}
.formbox{max-width:560px;margin:0 auto;text-align:left;background:var(--canvas2);border:1px solid #DDE4EC;border-radius:14px;padding:32px}
.formbox label{display:block;font-size:14px;color:var(--navy);font-weight:800;margin:14px 0 6px} .formbox input,.formbox textarea{width:100%;padding:12px;border:1.5px solid #cdd6e0;border-radius:8px;font-size:15px;font-family:inherit}
.hubspot-embed{max-width:960px;margin:0 auto;text-align:left}
.hubspot-embed iframe{width:100%;border:0}

/* ── Real site header / footer additions (not in the tab-preview) ───────────── */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #E7ECF2}
.site-header .nav{padding-top:14px;padding-bottom:14px}
/* v1.3.25: header content was capped at the same 1200px .wrap as page content,
   which crowded the logo and the nav/Log In cluster toward the middle on wide
   screens. Let the header bar use a much wider (but still bounded, so it never
   over-stretches on ultrawide monitors) container instead — nav keeps its own
   44px side padding as the edge gutter on both sides, matching the footer's
   gutter — so the logo sits nearer the true left corner and there's real
   breathing room between it and the nav links/Log In group. Page content
   below is untouched and stays boxed at 1200px. */
.site-header .wrap{max-width:1900px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand-text{font-family:'Poppins','Segoe UI',sans-serif;font-size:24px;letter-spacing:1px;color:var(--ink);font-weight:400}
.brand-text strong{font-weight:800}
.brand-text--footer{color:#fff}
.site-main{display:block}
.page{display:block}

/* Solutions dropdown: click-open (mobile/tap) mirrors the hover behaviour */
.navlinks .dd{cursor:pointer;position:relative}
.navlinks .dd.is-open .ddmenu{display:block}

/* Mobile menu toggle */
.nav-toggle{display:none;background:none;border:0;font-size:26px;line-height:1;color:var(--ink);cursor:pointer;padding:4px 8px}

@media (max-width:860px){
  .nav-toggle{display:inline-block}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #E7ECF2;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 20px;box-shadow:0 8px 24px rgba(18,58,107,.08)}
  .navlinks.is-open{display:flex}
  .navlinks .dd .ddmenu{position:static;box-shadow:none;padding-left:12px}
  .site-header .nav{position:relative;flex-wrap:wrap}
}

/* ── Header + footer logo/nav (v1.2, live-confirmed) ───────────────────── */
/* Header custom logo: 60px, constrained regardless of uploaded native size */
.site-header .custom-logo,
.nav .custom-logo,
.brand img.custom-logo,
.brand .custom-logo{
  height:60px !important;
  width:auto !important;
  max-height:60px;
  display:block;
}
.custom-logo-link{display:inline-flex;align-items:center;line-height:0}

/* Primary nav on a single line */
.site-header .navlinks{flex-wrap:nowrap;white-space:nowrap;gap:20px;flex:1 1 auto;justify-content:flex-end}
.site-header .navlinks a,
.site-header .navlinks .dd{white-space:nowrap}
.site-header .nav{gap:24px}
.site-header .brand{flex:0 0 auto}

/* Footer: v1.3.10 — now uses a dedicated white/reversed logo file
   (assets/images/logo-white.png) instead of the boxed light-logo
   workaround, so it sits directly on the navy footer, no white pill. */
.footer .brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer .brand img.footer-logo{
  height:34px !important;
  width:auto !important;
  margin:0 0 6px 0;
}
.footer .brand p{margin:0;max-width:260px}

/* Mobile: allow nav wrap below the breakpoint */
@media (max-width:860px){
  .site-header .navlinks{flex-wrap:wrap;white-space:normal}
}

/* ── Batch fixes v1.3: Log In button, clickable channel chips, FAQ accordion ── */

/* Log In button — distinct from the aqua "Start free trial" (dark/outline style) */
.btn-login{
  background:var(--navy);
  color:#fff;
  border:2px solid var(--navy);
  border-radius:8px;
  padding:9px 18px;
  font-weight:800;
  font-size:15px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:6px;
}
.btn-login:hover{background:#0b2c54}

/* SIX CHANNELS pills → clickable links with explicit affordance */
.chips-cue{
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:var(--aqua-deep);
  margin:0 0 14px;
}
.chip-link{
  cursor:pointer;
  text-decoration:none;
  transition:background .15s,border-color .15s,transform .05s;
}
.chip-link:hover{
  background:var(--aqua);
  border-color:var(--aqua);
  color:#fff;
}
.chip-link:hover .chip-arrow{color:#fff}
.chip-arrow{
  color:var(--aqua-deep);
  font-weight:800;
  margin-left:4px;
}
.chip-link:active{transform:translateY(1px)}

/* FAQ accordion */
.faq .q h4{
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.faq .q .pm{
  color:var(--aqua);
  font-weight:800;
  font-size:22px;
  line-height:1;
  flex:0 0 auto;
}
.faq .q p{
  margin-top:10px;
}
.faq .q h4:hover{color:var(--aqua-deep)}

/* In-copy contextual channel links (Repricer page body) */
.body a.chan-inline,
.body .chan-inline{
  color:var(--aqua);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* v1.3.2: hide the accent bar above FAQ sections */
.faqhead .eyebrowbar{display:none}

/* v1.3.3 offset anchor jumps so the section heading clears the sticky header,
   used a hardcoded scroll-margin-top:170px. Removed in v1.3.9 — it fought
   with the dynamic JS offset in nav.js (which measures the real header +
   admin-bar height at runtime), and on a page this heavy the browser's own
   native re-snap-to-fragment behavior kept re-applying this stale static
   value, sometimes landing short of the real header height and hiding the
   heading entirely. nav.js's scrollToHash() is now the single source of
   truth for these anchor targets; see the "v1.3.9: anchor-scroll" comment
   in assets/js/nav.js. */

/* v1.3.4: WordPress dropdown (.sub-menu) styling — no aqua top line */
.navlinks .sub-menu,
.navlinks ul.sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  margin:0;
  padding:8px;
  list-style:none;
  background:#fff;
  border:1px solid #DDE4EC;   /* full hairline border, NO coloured top line */
  border-top:1px solid #DDE4EC;
  border-radius:8px;
  min-width:210px;
  box-shadow:0 8px 24px rgba(18,58,107,.12);
  z-index:60;
}
.navlinks .menu-item-has-children{position:relative}
.navlinks .menu-item-has-children:hover > .sub-menu,
.navlinks .menu-item-has-children:focus-within > .sub-menu{display:block}
.navlinks .sub-menu li{margin:0}
.navlinks .sub-menu a{
  display:block;
  padding:9px 14px;
  color:var(--ink);
  font-size:14.5px;
  font-weight:700;
  text-decoration:none;
  border-radius:6px;
}
.navlinks .sub-menu a:hover{background:#E3F4FC;color:var(--aqua-deep)}
/* Belt-and-braces: kill any coloured top border on the dropdown */
.navlinks .sub-menu{border-top-color:#DDE4EC !important;box-shadow:0 8px 24px rgba(18,58,107,.12)}

/* ── v1.3.13: Hero background photo — subtle watermark, no content changes ──
   Two-layer background (gradient wash over a photo) set inline per-page via
   style="background-image:...", so this class only supplies the sizing —
   the gradient opacity is what keeps the photo faint and text fully legible. */
.hero-photo{background-size:auto, cover;background-position:center, center;background-repeat:no-repeat, no-repeat}

/* ── v1.3.9: Blog (archive listing + single post) ─────────────────────────── */

/* Breadcrumb-style back link, used at the top of both blog templates */
.blog-back{display:block;text-align:center;font-size:14px;font-weight:700;color:var(--aqua-deep);text-decoration:none;margin-bottom:10px}
.blog-back:hover{color:var(--aqua)}

/* Archive: card grid of post previews */
.blog-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;max-width:1100px;margin:0 auto;text-align:left}
.blog-card{background:#fff;border:1px solid #DDE4EC;border-radius:14px;padding:26px;display:flex;flex-direction:column;text-decoration:none;transition:box-shadow .15s,border-color .15s,transform .05s}
.blog-card:hover{border-color:var(--aqua);box-shadow:0 10px 28px rgba(18,58,107,.10);transform:translateY(-2px)}
.blog-card .date{font-size:12.5px;font-weight:800;color:var(--aqua-deep);letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px}
.blog-card h3{font-size:19px;color:var(--navy);font-weight:600;line-height:1.3;margin-bottom:10px}
.blog-card p{font-size:15px;color:var(--muted);line-height:1.55;font-weight:600;margin-bottom:0}
.blog-card .more{margin-top:16px;font-size:14px;font-weight:800;color:var(--aqua-deep)}
.blog-pager{display:flex;justify-content:center;gap:14px;margin-top:34px}
.blog-pager a{padding:11px 22px;border-radius:7px;font-weight:800;font-size:14.5px;text-decoration:none;background:#fff;color:var(--navy);border:2px solid var(--aqua)}
.blog-pager a:hover{background:var(--aqua);color:#fff}
.blog-empty{color:var(--muted);font-size:17px;font-weight:600}

/* Single post: title/meta header + article body typography */
.blog-post-head{max-width:760px;margin:0 auto}
.blog-post-head .date{font-size:13px;font-weight:800;color:var(--aqua-deep);letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px}
.blog-post-head h1{font-size:36px;font-weight:600;color:var(--navy);line-height:1.2;margin-bottom:0}

.blog-body{max-width:720px;margin:0 auto;text-align:left;font-size:17.5px;line-height:1.7;color:var(--muted);font-weight:600}
.blog-body p{margin-bottom:20px}
.blog-body h2{font-size:26px;text-align:left;margin:38px 0 14px;color:var(--navy)}
.blog-body h3{font-size:21px;text-align:left;margin:32px 0 12px;color:var(--navy);font-weight:600}
.blog-body h4{font-size:18px;text-align:left;margin:28px 0 10px;color:var(--navy);font-weight:700}
.blog-body ul,.blog-body ol{margin:0 0 20px 26px}
.blog-body li{margin-bottom:8px}
.blog-body a{color:var(--aqua-deep);font-weight:700;text-decoration:underline}
.blog-body a:hover{color:var(--aqua)}
.blog-body img{max-width:100%;height:auto;border-radius:10px;border:1px solid #DDE4EC;box-shadow:0 6px 24px rgba(18,58,107,.10);display:block;margin:8px 0 24px}
.blog-body b,.blog-body strong{color:var(--navy);font-weight:800}
.blog-body table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.blog-body table td,.blog-body table th{border:1px solid #DDE4EC;padding:10px 12px;text-align:left}
.blog-body hr{border:none;border-top:1px solid #DDE4EC;margin:28px 0}

.blog-cta{max-width:720px;margin:44px auto 0;padding-top:28px;border-top:1px solid #DDE4EC;text-align:center}

@media (max-width:900px){
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr}
  .blog-post-head h1{font-size:28px}
}