/* EcomSuite marketing design, built around the logo (rebrand, Nov 2026). Loaded after marketing.css and
   marketing-pricing.css. Navy is the base (header, hero, page bands, dark sections, footer), orange is for the
   main calls to action and key highlights, green only for meaning (ticks, "ok"). Texts and images still come
   from the site editor (WebsiteContent); this file only changes how they look. */
:root{--navy:#0E223A;--navy2:#0F305B;--navy3:#15365F;--on-navy:#E6ECF4;--on-navy2:#B8C6D9;--on-navy3:#93A4BB;--orange-l:#FF8A3D}

/* navy band used by the hero and page headers */
.hero,.pz-hero,.th-hero,.lg-hero{position:relative;color:var(--on-navy);
  background:radial-gradient(900px 480px at 88% -12%,rgba(254,94,0,.22),transparent 62%),radial-gradient(760px 420px at -6% 8%,rgba(64,118,190,.32),transparent 62%),linear-gradient(180deg,var(--navy) 0%,#10294A 100%)}
.hero::before,.pz-hero::before,.th-hero::before,.lg-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 25%,transparent 75%)}
.hero>.wrap,.pz-hero>.wrap,.th-hero>.wrap,.lg-hero>.wrap{position:relative}
.hero h1,.pz-hero h1,.th-hero h1,.lg-hero h1{color:#fff}
.hero h1 span{color:var(--orange-l)}
.hero .lead,.th-hero .lead,.pz-hero .sh p,.lg-hero p{color:var(--on-navy2)}
.hero .fine{color:var(--on-navy3)}
.hero .eyebrow,.th-hero .eyebrow{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--on-navy);box-shadow:none}
.hero .btn-sec{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.hero .btn-sec:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}
.hero .btn-pri,.ctaband .btn-pri{box-shadow:0 10px 28px -10px rgba(254,94,0,.7)}
.hero{padding:84px 0 64px}
/* the product mock straddles the navy hero and the light page below it */
.hero:has(.mock),.hero:has(.pz-hero-img){padding-bottom:0;
  background:radial-gradient(900px 480px at 88% -12%,rgba(254,94,0,.22),transparent 62%),radial-gradient(760px 420px at -6% 8%,rgba(64,118,190,.32),transparent 62%),linear-gradient(180deg,var(--navy) 0%,#10294A calc(100% - 200px),var(--bg) calc(100% - 200px))}
.hero:has(.mock)::before,.hero:has(.pz-hero-img)::before{bottom:200px}

/* header: navy bar, white logo, orange sign-up */
.mnav{background:rgba(14,34,58,.94);border-bottom:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px)}
.mnav nav{color:#C9D4E3}
.mnav nav a{position:relative;padding:6px 0}
.mnav nav a:hover{color:#fff}
.mnav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .2s}
.mnav nav a:hover::after,.mnav nav a:focus-visible::after{transform:scaleX(1)}
.mnav .btn-ghost{color:#fff}.mnav .btn-ghost:hover{background:rgba(255,255,255,.08)}
.mnav .logo img.brand-icon{border-radius:9px;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.mnav .pz-logo{max-height:38px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* product mock, in the panel's own colours (dark navy sidebar, orange active marker) */
.mock{margin-top:60px}
.browser{border:1px solid rgba(15,48,91,.14);box-shadow:0 60px 120px -40px rgba(8,20,36,.65),0 0 0 6px rgba(255,255,255,.06)}
.mini .ms{background:linear-gradient(180deg,#0E223A,#0B1B2F);border-right:0;padding:16px 10px}
.mini .ms .ms-logo{display:block;height:20px;width:auto;margin:2px 8px 14px}
.mini .ms div{color:#B9C5D6;position:relative}
.mini .ms div.on{background:rgba(255,255,255,.09);color:#fff}
.mini .ms div.on::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.mini .ms div.on svg{color:var(--orange-l)}
.mk div{position:relative;overflow:hidden;background:#fff}
.mk div::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--brand)}
.mk div:nth-child(2)::before{background:var(--accent)}.mk div:nth-child(3)::before{background:var(--green)}.mk div:nth-child(4)::before{background:#7C3AED}
.float{box-shadow:0 30px 60px -24px rgba(14,34,58,.45)}

/* "used by" strip */
.logos{padding:44px 0 8px}
.logos .l span{background:#fff;border-color:var(--line);color:var(--ink2);transition:border-color .15s,color .15s}
.logos .l span:hover{border-color:var(--brand100);color:var(--brand)}

/* section heads: orange kicker pill, strong navy-ink title */
.sh .k{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--accent50);color:var(--accent7);font-size:13px;letter-spacing:.2px;margin-bottom:14px}
.sh .k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sh h2{letter-spacing:-.3px}
.dark .sh .k,.pz-hero .sh .k{background:rgba(254,94,0,.16);color:#FFB27F}
.dark .sh .k[style]{color:#FFB27F!important}

/* feature tiles: navy icon squares with the orange accent, like the app icon */
.tile{transition:transform .2s,box-shadow .2s,border-color .2s}
.tile:hover{transform:translateY(-3px);box-shadow:0 24px 48px -28px rgba(14,34,58,.35);border-color:var(--brand100)}
.tile .ic,.trust .ic{background:linear-gradient(135deg,var(--navy3),var(--navy));color:var(--orange-l);box-shadow:0 8px 18px -10px rgba(14,34,58,.6)}

/* before / after */
.cmp .lst{box-shadow:var(--sh)}
.cmp .lst.after{background:linear-gradient(160deg,var(--navy2),var(--navy));border-color:var(--navy);color:var(--on-navy)}
.cmp .lst.after>b{color:#fff}
.cmp .lst.after .ok{color:#34D399}
.cmp .arrow{background:var(--accent6);box-shadow:0 10px 24px -10px rgba(254,94,0,.7)}

/* how it works (dark) */
.dark{background:radial-gradient(800px 400px at 100% 0%,rgba(254,94,0,.14),transparent 60%),linear-gradient(180deg,var(--navy),#0B1B2F)}
.step{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.step .n{background:linear-gradient(135deg,var(--orange-l),var(--accent6));color:#fff;box-shadow:0 10px 22px -12px rgba(254,94,0,.8)}

/* pricing: the popular plan is the navy card with an orange edge */
.pz-card{transition:transform .2s,box-shadow .2s}
.pz-card:hover{transform:translateY(-3px);box-shadow:0 24px 48px -28px rgba(14,34,58,.35)}
.pz-card.hot{background:linear-gradient(180deg,var(--navy2),var(--navy));border:2px solid var(--accent);color:var(--on-navy);box-shadow:0 30px 60px -30px rgba(14,34,58,.6)}
.pz-card.hot h3,.pz-card.hot .pz-price b{color:#fff}
.pz-card.hot .pz-tag,.pz-card.hot .pz-note,.pz-card.hot .pz-price small{color:var(--on-navy2)}
.pz-card.hot .pz-intro{color:var(--on-navy)}
.pz-card.hot ul{border-color:rgba(255,255,255,.14)}
.pz-card.hot li svg{color:var(--orange-l)}
.pz-cmp thead th.hot{background:var(--accent50)}
#m-pricing{background:linear-gradient(180deg,var(--bg2),var(--bg))!important}

/* /pricing and /shop-themes: navy page band */
.pz-hero{padding:72px 0 56px}
.pz-hero .pz-trial{color:var(--on-navy2)}
.pz-hero .pz-card{border-color:transparent;color:var(--ink)}
.pz-hero .pz-card.hot{color:var(--on-navy)}
.pz-hero .pz-card.hot{border-color:var(--accent);background:linear-gradient(180deg,#17406F,var(--navy2))}
.pz-hero .pz-toggle{border-color:rgba(255,255,255,.2)}
.th-hero{padding:72px 0 56px}
.th-hero .th-facts span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--on-navy)}
.th-hero+.sec{padding-top:44px!important}
.lg-hero{padding:56px 0 44px}
.lg-hero h1{font-size:38px;font-weight:800;margin:0 0 6px}
.lg-hero+.sec{padding-top:44px}

/* affiliate steps (their titles carry the step number) */
.fcard{box-shadow:var(--sh);transition:transform .2s,box-shadow .2s;border-top:3px solid var(--accent)!important}
.fcard:hover{transform:translateY(-3px);box-shadow:0 24px 48px -28px rgba(14,34,58,.35)}
.fcard h3{font-size:20px;color:var(--brand)}

/* FAQ as cards */
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:10px;transition:border-color .15s,box-shadow .15s}
.faq details[open]{border-color:var(--brand100);box-shadow:0 12px 30px -20px rgba(14,34,58,.35)}
.faq summary::after{color:var(--accent6)}
.faq p{margin-top:8px}

/* trust + testimonials */
.trust div,.pz-quote{transition:transform .2s,box-shadow .2s}
.trust div:hover,.pz-quote:hover{transform:translateY(-3px);box-shadow:0 24px 48px -28px rgba(14,34,58,.35)}
.pz-quote blockquote::before{content:"“";display:block;font-family:Georgia,serif;font-size:44px;line-height:.6;color:var(--accent);margin-bottom:6px}

/* closing band + footer */
.ctaband{box-shadow:0 40px 80px -40px rgba(14,34,58,.6)}
.ctaband::before{content:"";position:absolute;left:-60px;bottom:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(254,94,0,.28),transparent 70%)}
.ctaband>*{position:relative;z-index:1}
.mfoot{background:#0B1B2F;border-top:3px solid var(--accent)}
.mfoot a{transition:color .15s}

@media (max-width:860px){
  .hero{padding:56px 0 48px}
  .hero:has(.mock),.hero:has(.pz-hero-img){padding-bottom:0;background:radial-gradient(600px 360px at 100% -10%,rgba(254,94,0,.22),transparent 62%),linear-gradient(180deg,var(--navy) 0%,#10294A calc(100% - 120px),var(--bg) calc(100% - 120px))}
  .hero:has(.mock)::before{bottom:120px}
  .mock{margin-top:40px}
  .pz-hero,.th-hero{padding:52px 0 40px}
  .lg-hero{padding:40px 0 32px}.lg-hero h1{font-size:30px}
  .faq details{padding:14px 16px}
}
@media (max-width:520px){
  .hero h1{font-size:34px}
  .hero .lead{font-size:17px}
  .hero .ctas .btn{width:100%}
  .sh h2{font-size:28px}
  .sec{padding:64px 0}
  .ctaband{padding:30px 22px;border-radius:22px}
  .ctaband h2{font-size:28px}
  .ctaband .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.tile,.pz-card,.fcard,.trust div,.pz-quote{transition:none}.tile:hover,.pz-card:hover,.fcard:hover,.trust div:hover,.pz-quote:hover{transform:none}}
/* the mock and hero picture are light UI inside the navy hero: give them the page's ink back */
.hero .mock,.hero .pz-hero-img{color:var(--ink)}

/* small product visuals inside the feature tiles (they had no styles on the website) */
.tile .box{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:13px}
.tile .fn{display:grid;align-items:center;gap:10px}
.tile .fn .bar{height:8px}
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kp div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.kp b{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:17px;color:#fff;background:linear-gradient(135deg,var(--navy3),var(--navy))}
.kp div:first-child b{background:linear-gradient(135deg,#10B981,#047857)}
.kp div:nth-child(2) b{background:linear-gradient(135deg,#EF4444,#B42318)}
.kp span{font-size:12.5px;font-weight:600;color:var(--ink2)}
.tile .bub{padding:9px 13px;border-radius:14px;line-height:1.5}
.tile .bub.in{background:var(--bg);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.tile .bub.out{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.flowr{display:flex;align-items:stretch;gap:22px;flex-wrap:wrap}
.flowr .node{position:relative;flex:1 1 140px;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font-size:13.5px}
.flowr .node:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:50%;transform:translateY(-50%);color:var(--muted2);font-weight:700}
.flowr .k{font-size:11.5px;font-weight:700;letter-spacing:.3px}
.flowr .w .k{color:var(--brand)}.flowr .i .k{color:var(--amber)}.flowr .t .k{color:var(--accent7)}
.flowr .t{border-color:var(--accent100);background:var(--accent50)}
@media (max-width:520px){.flowr{flex-direction:column;gap:18px}.flowr .node:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-17px;transform:translateX(-50%)}}
@media (max-width:860px){.mini{height:auto}.mini .mb{padding:14px}.mk{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.flowr .node{flex:none}}