/* ==========================================================================
   Lead Capsule -- v2 template stylesheet
   Reproduced from the approved design samples:
     C:\Projects\_conductor\designs\leadcapsule\home.html
     C:\Projects\_conductor\designs\leadcapsule\interpage.html
   Shared header/footer/button/section rules are merged once here so both
   HomePageV2.master and InteriorPageV2.master share one stylesheet.
   ========================================================================== */

:root{
  --green:#599C18;
  --green-light:#6FBB22;
  --green-deep:#477D12;
  --green-pale:#F1F7E8;
  --ink:#232627;
  --charcoal:#323638;
  --slate:#363f48;
  --bg-alt:#f8f9f9;
  --white:#ffffff;
  --border:#e4e4e4;
  --border-soft:#ededed;
  --border-mid:#d7d7d7;
  --shadow:0 20px 60px -20px rgba(35,38,39,.25);
  --shadow-sm:0 8px 24px -8px rgba(35,38,39,.15);
  --radius:16px;
  --font-display:'Plus Jakarta Sans',Segoe UI,Arial,sans-serif;
  --font-body:'Inter',Segoe UI,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{width:min(1180px, 92%);margin:0 auto;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--slate);margin:0;letter-spacing:-0.01em;}
p{margin:0;line-height:1.65;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  padding:14px 28px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);
  color:var(--white);
  box-shadow:0 12px 28px -10px rgba(111,187,34,.55);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(111,187,34,.65);}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:var(--white);}
.btn-ghost:hover{border-color:var(--green-light);color:var(--green-light);}
.btn-outline{background:transparent;border-color:var(--border-mid);color:var(--slate);}
.btn-outline:hover{border-color:var(--green-light);color:var(--green-deep);}
.btn-sm{padding:10px 20px;font-size:.85rem;}
.btn-block{width:100%;}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:999;
  background:rgba(255,255,255,.85);backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--border-soft);
  transition:box-shadow .3s ease;
}
.site-header.scrolled{box-shadow:0 8px 30px -18px rgba(35,38,39,.35);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;}
.brand img{height:34px;width:auto;flex:0 0 auto;max-width:none;object-fit:contain;}

/* dynamic top nav -- populated by the Menu component (phMenu) */
#siteNavigation{display:flex;align-items:center;}
#siteNavigation ul{display:flex;align-items:center;gap:36px;list-style:none;margin:0;padding:0;}
#siteNavigation ul li{position:relative;}
#siteNavigation ul li > a{
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--charcoal);
  text-decoration:none;position:relative;padding:6px 0;display:inline-block;
}
#siteNavigation ul li > a span{position:relative;}
#siteNavigation ul li > a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--green-light);
  transition:width .25s ease;
}
#siteNavigation ul li > a:hover::after{width:100%;}
#siteNavigation ul ul{display:none;}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-cta .btn-outline{color:var(--charcoal);border-color:var(--border-mid);padding:10px 20px;font-size:.9rem;}
.nav-cta .btn-primary{padding:10px 22px;font-size:.9rem;}

/* ---------- Mobile nav toggle (button only; nav#mainNav overlay rules live in
   the Responsive section below). Hidden by default -- shown only <=860px. ---------- */
.menu-toggle{
  display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--border-mid);
  background:var(--white);align-items:center;justify-content:center;color:var(--charcoal);
  cursor:pointer;flex:0 0 auto;transition:border-color .18s ease, color .18s ease;
}
.menu-toggle:hover{border-color:var(--green-light);color:var(--green-deep);}
.menu-toggle svg{width:20px;height:20px;display:block;}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;
  padding:180px 0 120px;
  background:
    radial-gradient(600px 400px at 12% 8%, rgba(89,156,24,.35), transparent 60%),
    radial-gradient(700px 500px at 88% -10%, rgba(111,187,34,.28), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(89,156,24,.15), transparent 60%),
    linear-gradient(165deg, #1c1f20 0%, var(--ink) 55%, #2a312f 100%);
  color:var(--white);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  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;
  mask-image:radial-gradient(circle at 50% 30%, black, transparent 75%);
  pointer-events:none;
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green-light);background:rgba(89,156,24,.12);border:1px solid rgba(89,156,24,.35);
  padding:8px 16px;border-radius:999px;margin-bottom:24px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(89,156,24,.25);}
.hero h1{font-size:clamp(2.4rem, 4.4vw, 3.6rem);line-height:1.08;color:var(--white);font-weight:800;}
.hero h1 span{
  background:linear-gradient(120deg, var(--green) 0%, #8fe3c6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lede{margin-top:22px;font-size:1.125rem;line-height:1.7;color:rgba(255,255,255,.72);max-width:540px;}
.hero-actions{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;}
.hero-meta{margin-top:40px;display:flex;gap:28px;flex-wrap:wrap;}
.hero-meta div{font-size:.85rem;color:rgba(255,255,255,.55);}
.hero-meta strong{display:block;font-family:var(--font-display);font-size:1.6rem;color:var(--white);font-weight:800;}

.hero-visual{position:relative;}
.device-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:18px;backdrop-filter:blur(6px);
  box-shadow:var(--shadow);
}
.device-screen{
  background:linear-gradient(160deg,#fbfdfc,#eef7f3);
  border-radius:14px;padding:22px;color:var(--charcoal);
}
.device-topbar{display:flex;gap:6px;margin-bottom:16px;}
.device-topbar span{width:9px;height:9px;border-radius:50%;background:var(--border-mid);}
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.kpi{background:var(--white);border:1px solid var(--border-soft);border-radius:12px;padding:12px;}
.kpi small{font-size:.68rem;color:#8a9088;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.kpi strong{display:block;font-family:var(--font-display);font-size:1.1rem;color:var(--green-deep);margin-top:4px;}
.funnel-row{display:flex;align-items:flex-end;gap:8px;height:90px;background:var(--white);border:1px solid var(--border-soft);border-radius:12px;padding:12px;}
.funnel-row .bar{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg, var(--green) 0%, var(--green-light) 100%);}
.card-float{
  position:absolute;background:var(--white);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:10px;border:1px solid var(--border-soft);
}
.card-float.c1{top:-22px;right:-18px;}
.card-float.c2{bottom:-20px;left:-22px;}
.card-float .ic{width:34px;height:34px;border-radius:10px;background:rgba(89,156,24,.15);display:flex;align-items:center;justify-content:center;color:var(--green-deep);flex-shrink:0;}
.card-float strong{display:block;font-family:var(--font-display);font-size:.85rem;color:var(--slate);}
.card-float span{font-size:.72rem;color:#8a8f8c;}

/* ---------- Page hero (interior) ---------- */
.page-hero{
  position:relative;padding:170px 0 90px;color:var(--white);overflow:hidden;
  background:
    radial-gradient(600px 360px at 15% 0%, rgba(89,156,24,.32), transparent 60%),
    radial-gradient(700px 420px at 90% 10%, rgba(111,187,34,.24), transparent 60%),
    linear-gradient(165deg, #1c1f20 0%, var(--ink) 55%, #2a312f 100%);
  text-align:center;
}
.page-hero .wrap{position:relative;}
.page-hero h1{font-size:clamp(2.1rem,4vw,3rem);line-height:1.15;color:var(--white);font-weight:800;max-width:700px;margin:0 auto;}
.page-hero h1 span{background:linear-gradient(120deg, var(--green) 0%, #8fe3c6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.page-hero p.lede{margin:20px auto 0;font-size:1.08rem;color:rgba(255,255,255,.7);max-width:560px;}
.trust-line{display:inline-flex;align-items:center;gap:8px;margin-top:30px;font-size:.85rem;color:rgba(255,255,255,.6);}
.trust-line .stars{color:var(--green-light);letter-spacing:1px;}

/* ---------- Logo strip ---------- */
.logo-strip{padding:48px 0;border-bottom:1px solid var(--border-soft);}
.logo-strip p{text-align:center;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#9aa19c;margin-bottom:28px;}
.logo-strip .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;opacity:.65;}
.logo-strip .row span{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--slate);}
/* fed dynamically by the LeadVerticals component (phLeadVerticals) -- generic list markup */
.logo-strip .dynamic-list{list-style:none;margin:0;padding:0;}

/* ---------- Section shell ---------- */
.section{padding:110px 0;}
.section.alt{background:var(--bg-alt);}
.section.tight{padding-top:60px;}
.section-head{max-width:680px;margin:0 auto 64px;text-align:center;}
.kicker{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-deep);background:rgba(89,156,24,.12);
  padding:6px 14px;border-radius:999px;margin-bottom:18px;
}
.section-head h2{font-size:clamp(1.9rem, 3vw, 2.6rem);line-height:1.2;}
.section-head h2 span{color:var(--green-deep);}
.section-head p{margin-top:16px;font-size:1.05rem;color:#5b625c;}

/* ---------- How it works ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.step-card{
  background:var(--white);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:36px 30px;position:relative;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.step-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm);border-color:rgba(89,156,24,.4);}
.step-num{
  font-family:var(--font-display);font-weight:800;font-size:.8rem;color:var(--green-deep);
  background:rgba(89,156,24,.12);width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
}
.step-card h3{font-size:1.25rem;margin-bottom:10px;}
.step-card p{color:#5b625c;font-size:.95rem;}
.step-card .icon-wrap{
  width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);color:var(--white);margin-bottom:20px;
}

/* ---------- Features (dynamic -- fed by the FeaturedArticles component, phFeaturedArticles) ---------- */
#featuredListItems ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
#featuredListItems li{
  background:var(--white);border:1px solid var(--border-soft);border-radius:14px;padding:22px 20px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#featuredListItems li:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:rgba(89,156,24,.4);}
#featuredListItems li a{
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--slate);text-decoration:none;
}
#featuredListItems li a:hover{color:var(--green-deep);}

/* ---------- Testimonial ---------- */
.testimonial-wrap{
  background:linear-gradient(135deg, #1c1f20 0%, var(--ink) 60%, #2a312f 100%);
  border-radius:28px;padding:70px 60px;color:var(--white);position:relative;overflow:hidden;
}
.testimonial-wrap::after{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(89,156,24,.28), transparent 65%);
  top:-140px;right:-120px;
}
.testimonial-inner{position:relative;display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;}
.quote-avatar{
  width:96px;height:96px;border-radius:50%;
  background:linear-gradient(135deg, var(--green), var(--green-light));
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1.8rem;color:var(--white);
  border:4px solid rgba(255,255,255,.15);
}
.quote-mark{font-family:var(--font-display);font-size:3rem;color:var(--green);line-height:1;margin-bottom:10px;display:block;}
.testimonial-inner blockquote{margin:0;font-size:1.3rem;line-height:1.6;font-style:italic;color:rgba(255,255,255,.92);}
.testimonial-inner cite{display:block;margin-top:20px;font-style:normal;font-family:var(--font-display);font-weight:700;color:var(--green-light);font-size:1.05rem;}
.testimonial-inner cite span{display:block;font-weight:500;color:rgba(255,255,255,.55);font-size:.85rem;margin-top:2px;font-family:var(--font-body);}

/* ---------- Pricing (dynamic -- fed by the Content component, phContent) ---------- */
.pricing-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.teaser-card{
  border:1px solid var(--border-soft);border-radius:var(--radius);padding:32px 28px;background:var(--white);
  display:flex;flex-direction:column;gap:16px;transition:transform .3s ease, box-shadow .3s ease;
}
.teaser-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm);}
.teaser-card.popular{border:2px solid var(--green-light);background:linear-gradient(180deg,#ffffff 0%, #f3fbf8 100%);position:relative;}
.popular-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg, var(--green), var(--green-light));color:var(--white);
  font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 16px;border-radius:999px;box-shadow:0 8px 18px -6px rgba(111,187,34,.5);white-space:nowrap;
}
.teaser-card h4{font-size:1.1rem;}
.teaser-card .price{font-family:var(--font-display);font-size:2.1rem;font-weight:800;color:var(--slate);}
.teaser-card .price sup{font-size:1rem;font-weight:600;color:#8a8f8c;}
.teaser-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.teaser-card li{font-size:.88rem;color:#5b625c;display:flex;align-items:center;gap:8px;}

/* interior page pricing grid variant */
.pricing-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:stretch;}
.price-card{
  background:var(--white);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:32px 26px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease;
}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.price-card.featured{border:2px solid var(--green-light);position:relative;background:linear-gradient(180deg,#ffffff 0%, #f3fbf8 100%);}
.price-card h3{font-size:1.15rem;margin-bottom:4px;}
.price-card .plan-sub{font-size:.8rem;color:#8a8f8c;margin-bottom:20px;}
.price-card .price{font-family:var(--font-display);font-size:2.3rem;font-weight:800;color:var(--slate);line-height:1;}
.price-card .price sup{font-size:.95rem;font-weight:600;color:#8a8f8c;}
.price-card .cta{margin:22px 0 24px;}
.price-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-soft);}
.price-rows li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border-soft);font-size:.85rem;color:#5b625c;}
.price-rows li strong{color:var(--slate);font-weight:600;}

/* ---------- All plans include (interior, static chrome -- see task return notes) /
   compare table (dynamic, phComparisonTable) / FAQ (dynamic, phFaq) ---------- */
.include-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:32px;margin-top:64px;padding:28px 36px;border:1px solid var(--border-soft);border-radius:var(--radius);background:var(--bg-alt);}
.include-bar .item{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--charcoal);font-weight:500;}
.include-bar .item svg{color:var(--green-deep);flex-shrink:0;}

.compare-table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.compare-table th, .compare-table td{padding:16px 20px;text-align:center;border-bottom:1px solid var(--border-soft);font-size:.9rem;}
.compare-table th{background:var(--ink);color:var(--white);font-family:var(--font-display);font-weight:700;font-size:.85rem;}
.compare-table td:first-child, .compare-table th:first-child{text-align:left;color:var(--slate);font-weight:600;}
.compare-table tr:last-child td{border-bottom:none;}
.compare-table td.pop{background:rgba(89,156,24,.06);}
.table-scroll{overflow-x:auto;max-width:100%;border-radius:var(--radius);-webkit-overflow-scrolling:touch;}

.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq details{background:var(--white);border:1px solid var(--border-soft);border-radius:14px;padding:6px 24px;transition:border-color .2s ease;}
.faq details[open]{border-color:rgba(89,156,24,.5);}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--slate);display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .plus{width:26px;height:26px;border-radius:50%;background:rgba(89,156,24,.14);color:var(--green-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s ease;}
.faq details[open] summary .plus{transform:rotate(45deg);}
.faq .faq-body{padding-bottom:22px;color:#5b625c;font-size:.92rem;line-height:1.65;}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--ink);color:var(--white);border-radius:28px;padding:70px 60px;text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(500px 260px at 50% 0%, rgba(89,156,24,.3), transparent 70%);
}
.cta-band h2{position:relative;color:var(--white);font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:16px;}
.cta-band p{position:relative;color:rgba(255,255,255,.68);max-width:520px;margin:0 auto 34px;font-size:1.05rem;}
.cta-band .hero-actions,.cta-band .actions{position:relative;justify-content:center;display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- Interior content / sidebar layout ---------- */
.interior-body{padding:70px 0;}
.interior-layout{display:grid;grid-template-columns:1fr;gap:24px;}
/* Fixed sidebar track: the embedded live-demo form is 265px, so a
   proportional column left it floating with dead space beside the copy.
   320px holds the form plus card padding and nothing more. */
.interior-layout.has-sidebar{grid-template-columns:minmax(0,1fr) 312px;align-items:start;}
/* Grid items default to min-width:auto, so one wide table (the contact page's
   4-column contact table, the sub-processors table) inflates the whole column
   to its min-content width and pushes the phone viewport into horizontal
   scroll. min-width:0 lets 1fr actually mean the available width; the tables
   then scroll inside .cms-content's own overflow container. */
.interior-layout > *{min-width:0;}
.sidebar-card{background:var(--white);border:1px solid var(--border-soft);border-radius:var(--radius);padding:20px;margin-bottom:22px;}
.sidebar-card h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--green-deep);margin-bottom:14px;font-family:var(--font-display);font-weight:700;}
/* dynamic side menu -- fed by the SideMenu component (phSideMenu) */
#SideBar ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
#SideBar ul li > a{font-size:.9rem;font-weight:600;color:var(--slate);text-decoration:none;}
#SideBar ul li > a:hover{color:var(--green-deep);}
#SideBar ul ul{display:none;}
/* dynamic lead form widget -- fed by the Form component (phForm) */
.sidebar-card .columnLayout fieldset{border:0;margin:0;padding:0;}
.sidebar-card .button{
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;
  font-size:.9rem;padding:10px 20px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);color:var(--white);
}

/* ---------- Footer ---------- */
.site-footer{background:#1a1d1e;color:rgba(255,255,255,.6);padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:minmax(240px,1.1fr) 2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
/* Uses logo-dark.png -- the knockout variant whose grey "Capsule" wordmark and
   bars are repainted white. The full-colour logo needed a white background
   chip to stay legible here, and a white rounded rectangle floating in a dark
   footer reads as a rendering fault rather than a design choice. */
.footer-brand img{height:30px;width:auto;}
.footer-grid p{font-size:.88rem;line-height:1.6;max-width:280px;color:rgba(255,255,255,.5);}
/* dynamic footer nav -- fed by the BottomMenu component (phBottomMenu) */
/* The wired footer menu is flat, so its top-level items are the links. They
   flow into a multi-column grid that fills the footer's right-hand track --
   a single narrow stack left roughly half the footer empty. */
#BottomNav{display:block;}
#BottomNav h5{font-family:var(--font-display);color:var(--white);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px;}
/* Multi-column rather than a 3-track grid: a grid fills row-major, so a
   menu read across as "Home About Services" instead of down each column,
   and left the last column short. columns balances the items and keeps
   menu order reading top-to-bottom. */
#BottomNav ul{list-style:none;margin:0;padding:0;columns:3;column-gap:32px;}
#BottomNav ul li{break-inside:avoid;}
#BottomNav ul li{list-style:none;}
#BottomNav ul li > a{font-size:.9rem;color:rgba(255,255,255,.6);text-decoration:none;display:block;padding:7px 0;}
#BottomNav ul li > a:hover{color:var(--green);}
#BottomNav ul ul{display:none;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:.8rem;flex-wrap:wrap;gap:12px;}

/* ---------- Responsive ---------- */
@media (max-width: 1280px){
  .pricing-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 1080px){
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
  .page-hero{padding-bottom:60px;}
}
@media (max-width: 1024px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-visual{max-width:480px;}
  #featuredListItems ul{grid-template-columns:repeat(2,1fr);}
  .steps-grid{grid-template-columns:1fr;}
  .pricing-teaser{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .testimonial-inner{grid-template-columns:1fr;text-align:center;}
  .testimonial-inner .quote-avatar{margin:0 auto;}
  .interior-layout.has-sidebar{grid-template-columns:1fr;}
}
/* ---------- Mobile nav overlay (real toggle -- replaces the old horizontally-
   scrolling nav strip). nav#mainNav wraps #siteNavigation, which is fed
   entirely by the Menu component (phMenu); nothing here duplicates that
   markup, it only restyles it for the small-screen overlay. Mirrors the
   InteractiveLion v2 nav.main-nav.open pattern.

   Breakpoint is 760px to match InteractiveLion v2. It was 860px, which hid a
   four-item menu on tablets while the sister site kept a seven-item menu
   visible at the same width -- measured at 768px the full header (brand + the
   four links + both CTA buttons) fits the container with room to spare. */
@media (max-width: 1080px){
  .site-header .wrap{gap:10px;}
  .menu-toggle{display:inline-flex;}
  .nav-cta{gap:8px;}
  /* Tap target: keep the label visible (an icon-less, label-less pill fails
     both the 40x40 target-size guideline and loses its accessible name) and
     use padding to reach the minimum height instead. */
  .nav-cta .btn{padding:11px 14px;font-size:.8rem;min-height:40px;}

  nav#mainNav{
    display:none;position:fixed;top:0; left:0; width:100vw; height:100vh; height:100dvh;z-index:1000;background:var(--white);
    flex-direction:column;align-items:stretch;padding:96px 24px 24px;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  nav#mainNav.open{display:flex;}
  #siteNavigation{display:flex;flex-direction:column;align-items:stretch;width:100%;}
  #siteNavigation ul{flex-direction:column;align-items:stretch;flex-wrap:wrap;gap:6px;width:100%;}
  #siteNavigation ul li{flex:0 0 auto;}
  #siteNavigation ul li > a{
    font-family:var(--font-display);font-size:1.15rem;font-weight:700;padding:14px 4px;
    border-bottom:1px solid var(--border-soft);display:block;white-space:normal;
  }
  #siteNavigation ul ul{
    position:static;display:flex;flex-direction:column;box-shadow:none;border:0;background:none;padding:0 0 0 12px;
  }
}
@media (max-width: 760px){
  #featuredListItems ul{grid-template-columns:1fr;}
  .hero{padding:150px 0 90px;}
  .testimonial-wrap, .cta-band{padding:44px 26px;}
  .footer-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  /* table-layout:auto sizes columns to their min-content width, which for a
     multi-column comparison table ignores the width:100% constraint on
     .table-scroll and forces the mobile layout viewport itself wider than
     the device -- fixed layout makes the table actually obey its container
     and wrap instead of growing. */
  /* Six columns cannot fit 390px legibly: fixed layout broke words and prices
     mid-token ("Prof essi onal", "$1,4 99"). Give the table a floor width and
     let .table-scroll do its job -- a swipeable table stays readable. */
  .compare-table{min-width:640px;}
  .compare-table th, .compare-table td{padding:12px 14px;font-size:.82rem;}
  /* Legacy CMS-authored pricing widget (pricing.aspx) ships its own embedded
     <style> with a fixed 3-up flex row of 160px cards
     (.saas-cnt .tab-boxes .tab-box, no flex-wrap) that forces the page wider
     than the viewport regardless of the containment rules above -- override
     it directly so the cards wrap and stack instead. */
  .saas-cnt .tab-boxes{flex-wrap:wrap !important;}
  .saas-cnt .tab-boxes .tab-box{width:100% !important;max-width:320px !important;float:none !important;margin:0 0 16px !important;}
  /* Footer and sidebar links are inline text ~17px tall, below the 24px WCAG
     2.2 target minimum on their own. Block display with vertical padding gives
     a real 40px touch row on phones; desktop is unaffected. */
  #BottomNav ul{columns:1;}
  #BottomNav ul li > a,
  .sidebar-card a{padding:10px 0;}
  /* Micro-text badges dip under 12px at the base size. */
  small,.new-badge,.popular-badge{font-size:12px;}
}

/* ---------- Legacy CMS body content ----------------------------------------
   Content rows authored against the previous design carry plain h1/h2/p/ul
   markup with no layout classes. This gives that markup the current type
   scale and rhythm inside the standard container, so existing content reads
   correctly in the new shell without needing to be rewritten first. */
.cms-body { padding-block: 56px; }
.cms-content { max-width: 72ch; }
.cms-content > *:first-child { margin-top: 0; }
.cms-content h1,
.cms-content h2,
.cms-content h3 { font-family: var(--font-display); color: var(--slate); line-height: 1.2; margin: 1.6em 0 .5em; }
.cms-content h1 { font-size: clamp(1.75rem, 3vw, 2.35rem); }
.cms-content h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.cms-content h3 { font-size: 1.15rem; }
.cms-content p,
.cms-content li { color: var(--charcoal); line-height: 1.75; }
.cms-content p { margin: 0 0 1.1em; }
.cms-content ul,
.cms-content ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.cms-content li { margin-bottom: .45em; }
.cms-content a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 2px; }
.cms-content img { max-width: 100%; height: auto; }
.cms-content iframe,
.cms-content embed,
.cms-content object,
.cms-content video { max-width: 100%; }
.cms-content table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 0 0 1.3em; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cms-content th,
.cms-content td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }

/* Legacy authored rows carry HTML width="NNN" attributes and inline
   style="width:NNNpx" sized for the old wide layout. Cap both to the column
   instead of stripping them -- nothing is forced narrower than it was
   authored, only ever narrower than the viewport allows. */
.cms-content [width],
.cms-content [style*="width"] { max-width: 100% !important; }
.cms-content * { max-width: 100%; }

/* ---------- Feature grid ---------------------------------------------------
   Recovered from the approved home design. These rules were missing from this
   stylesheet, so the CMS-authored feature cards rendered as an unstyled list
   instead of the four-column card grid. */

/* base grid + the 2-column breakpoint, which the automated copy missed */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:1000px){
  .features-grid{grid-template-columns:repeat(2,1fr);}
}
.feature-card{
    background:var(--white);border:1px solid var(--border-soft);border-radius:14px;padding:28px 24px;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }

.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:rgba(89,156,24,.4);}

.feature-card .ic{
    width:44px;height:44px;border-radius:12px;background:rgba(111,187,34,.12);color:var(--green-deep);
    display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  }

.feature-card h4{font-size:1.05rem;margin-bottom:8px;}

.feature-card p{font-size:.88rem;color:#5b625c;line-height:1.55;}

@media (max-width: 760px){
    .nav-links{display:none;}
    .features-grid{grid-template-columns:1fr;}
    .feature-card.highlight{grid-column:span 1;}
    .hero{padding:150px 0 90px;}
    .testimonial-wrap, .cta-band{padding:44px 26px;}
    .footer-grid{grid-template-columns:1fr;}
  }

/* 'New in 4.0' badge on the highlighted feature card -- also missing from the merge */
.new-badge{
    position:absolute;top:20px;right:24px;
    background:linear-gradient(135deg, var(--green), var(--green-light));color:var(--white);
    font-family:var(--font-display);font-weight:700;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;
    padding:5px 12px;border-radius:999px;
  }

/* ---------- Sidebar form containment --------------------------------------
   The demo-request form is rendered by the shared FormDisplay component, whose
   markup is styled by the v1 theme's form.css with widths and label layout
   built for the old wide page. Dropped into the v2 sidebar it rendered as raw
   "* Company Name :" labels with bare inputs and no card treatment. These rules
   are scoped to .sidebar-card so the shared stylesheets other templates still
   use are left alone. */
.sidebar-card { overflow: hidden; }
.sidebar-card .formContainer,
.sidebar-card .columnLayout,
.sidebar-card fieldset,
.sidebar-card .fieldContainer,
.sidebar-card .fieldContainer.oneColumn,
.sidebar-card .fieldContainer.twoColumn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    box-sizing: border-box;
}
.sidebar-card fieldset { border: 0; padding: 0; margin: 0; }
.sidebar-card legend { padding: 0; }
.sidebar-card label,
.sidebar-card .fieldContainer > span:first-child {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .82rem;
    color: var(--slate);
    margin: 0 0 6px;
}
.sidebar-card input[type="text"],
.sidebar-card input[type="email"],
.sidebar-card input[type="tel"],
.sidebar-card input[type="password"],
.sidebar-card select,
.sidebar-card textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: .92rem;
    color: var(--charcoal);
}
.sidebar-card input:focus,
.sidebar-card select:focus,
.sidebar-card textarea:focus {
    outline: none;
    border-color: var(--green-light);
    box-shadow: 0 0 0 3px rgba(111,187,34,.16);
}
.sidebar-card textarea { resize: vertical; min-height: 96px; }
.sidebar-card input[type="submit"],
.sidebar-card input[type="button"],
.sidebar-card button {
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
}
.sidebar-card table { width: 100% !important; table-layout: fixed; }
.sidebar-card img { max-width: 100%; height: auto; }

/* a sidebar card whose only child is an empty content block should not draw an
   empty white box -- see the four heading slots that ship without copy */
.sidebar-card:empty { display: none; }

/* headings and notes inside sidebar cards */
.sidebar-card .sidebar-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--slate);
    margin: 0 0 8px;
}
.sidebar-card .sidebar-note {
    font-size: .86rem;
    line-height: 1.6;
    color: var(--charcoal);
    margin: 0 0 16px;
}

/* Responsive video embed. A CMS page carried a YouTube iframe with hard
   640x360 attributes; those are stripped and the iframe wrapped in this
   16:9 box so it scales down on a phone instead of forcing a wide layout. */
.video-embed { position: relative; width: 100%; padding-top: 56.25%; margin: 0 0 1.4em; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* .cms-body is the no-sidebar homepage case. Without an auto inline margin
   the 72ch prose column pins to the left edge of a 1200px container and
   leaves ~40%% of the width empty, while every other section on the page is
   centred -- it read as a layout fault. Interior pages are unaffected: there
   .cms-content sits in a sidebar grid column where left alignment is right. */
.cms-body .cms-content{margin-inline:auto;}

/* 2026-08-25 content-fix pass: styles for restyled CMS blocks
   (.vertical-chips homepage verticals, .shot-grid screenshot pages,
   .glossary definition list, .icon-list feature lists on
   lead-capture-software / verify-leads / segment-leads). */
.vertical-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:14px 0 0;padding:0;}
.vertical-chips li{list-style:none;}
.vertical-chips a{display:inline-block;padding:8px 16px;border:1px solid var(--border-mid);border-radius:999px;font-size:.85rem;color:var(--charcoal);text-decoration:none;transition:border-color .18s ease,color .18s ease;}
.vertical-chips a:hover{border-color:var(--green-light);color:var(--green-deep);}
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:1.3em 0;}
.shot-grid figure{margin:0;}
.shot-grid img{width:100%;height:auto;border:1px solid var(--border-soft);border-radius:10px;}
.shot-grid figcaption{font-size:.8rem;color:#5b625c;margin-top:6px;line-height:1.4;}
.glossary dt{font-weight:700;margin-top:1em;}
.glossary dd{margin:2px 0 0;color:#5b625c;}
.icon-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:1.3em 0;}
.icon-item{display:flex;gap:14px;align-items:flex-start;}
.li-icon{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:rgba(111,187,34,.12);color:var(--green-deep);display:flex;align-items:center;justify-content:center;}
.li-icon svg{width:22px;height:22px;}
@media (max-width:760px){
  .shot-grid{grid-template-columns:repeat(2,1fr);}
  .icon-list{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .shot-grid{grid-template-columns:1fr;}
}

/* If the homepage's per-page body slot has no content, the empty section still
   renders its padding as a blank band. Judge emptiness inside .cms-content --
   the wrap/cms-content shells themselves are always present. */
section.cms-body:not(:has(.cms-content *)) { display: none; }

/* Embedded easyXDM lead forms (demo.aspx & co): the injecting script hard-sets
   the iframe's width attribute (645), which clips inside a narrower column on
   phones. The inner form document is fluid (demo-webform.css), so let the
   frame element be fluid too. */
.cms-content div[id^="embedded"] iframe { width: 100% !important; max-width: 100%; }

/* A full-width page (no #SideBar) whose per-page body slot is empty would
   render .interior-body as a blank padded band - the pricing page after its
   legacy body content was retired. Hide the section only when there is neither
   sidebar nor any body element. */
section.interior-body:not(:has(#SideBar)):not(:has(.leftcolumn *)) { display: none; }

/* ---------- FORM-WIDTH GUARD -----------------------------------------------
   The embedded lead form is a fixed 645px (WebForm.FormWidth in the Lead
   Capsule app), so it cannot reflow. Collapse the sidebar before the content
   column can get narrower than the form, and let the embed scroll rather than
   push the page sideways if a wider form is ever configured. */
@media (max-width: 1100px){
  .interior-layout.has-sidebar{grid-template-columns:1fr;}
}
.cms-content div[id^="embedded"],
.leftcolumn div[id^="embedded"]{max-width:100%;overflow-x:auto;}
.cms-content div[id^="embedded"] iframe,
.leftcolumn div[id^="embedded"] iframe{max-width:100%;}

/* Interior pages: the content column is already the measure, so the 72ch prose
   cap only left the copy stopping short of the column edge. Full width here;
   the cap still applies to the full-width homepage body block. */
.leftcolumn .cms-content,
.leftcolumn #pageContent{max-width:none;}

/* Sidebar card headings get a rule beneath them, so each card reads as a
   titled block rather than a heading floating above a list. Border on the
   heading itself rather than an <hr>, so it applies to every sidebar card
   without editing any CMS content. Matches Offer Capsule. */
.sidebar-card h3,
.sidebar-card .sidebar-title{
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid var(--border-soft);
}
.sidebar-card .sidebar-note{margin-top:-4px;}

/* The sidebar feature list is long; run it in two columns so the card does not
   tower over the page. Multi-column (not grid) keeps the links reading down
   each column in menu order and balances the two automatically. Drops back to
   one column once the sidebar itself stacks under the content. */
#SideBar .sidebar-card ul:not(.related-products){
  display:block;          /* the base rule is display:flex, which ignores columns */
  columns:2;
  column-gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}
#SideBar .sidebar-card ul:not(.related-products) li{
  break-inside:avoid;
  list-style:none;
}
#SideBar .sidebar-card ul:not(.related-products) li > a{
  display:block;
  padding:5px 0;
  font-size:.84rem;
  line-height:1.35;
}
@media (max-width:1100px){
  #SideBar .sidebar-card ul:not(.related-products){columns:1;}
}

/* MenuDisplay always emits its own section heading when it runs in section
   mode (divMenuHeader.Visible = IsSectionMenu, no parameter turns it off), so
   the sidebar card ended up with two stacked headings: the curated
   SideMenuHead title and the component's section name below it. The curated
   one is the card title; hide the component's. */
#SideBar .sidebar-card .widgettitle{display:none;}

/* The component wraps its list in .widgetbg and appends spacer divs after it;
   the card already supplies its own padding. */
#SideBar .sidebar-card .widgetbg{margin:0;padding:0;background:none;border:0;}
#SideBar .sidebar-card .sidebarbottom{display:none;}

/* The "Return to ..." item closes the list, so it reads as a footer rather
   than one more feature. Kept out of the two-column flow. */
#SideBar .sidebar-card ul:not(.related-products) li.returnLink{
  column-span:all;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--border-soft);
}

/* The full-screen nav overlay covers the header, and the header is where
   the toggle lives. Without this the button is painted under the overlay
   and there is no way to close the menu on a touch device, where Escape
   is not available. */
.menu-toggle{position:relative;z-index:1001;}

/* Narrow-phone header fit. The logo is sized by height with width:auto, so a
   wider wordmark (Bid Capsule's is 4.23:1 against Offer Capsule's 3.25:1)
   needs more room at the same height and pushed the toggle off screen. The
   logo shrinks and the CTA pills tighten rather than letting anything be
   squeezed out of shape or off the edge. min-height keeps the tap targets
   legal while the padding comes down. */
@media (max-width: 420px){
  .site-header .wrap{gap:8px;}
  .nav-cta{gap:6px;}
  .nav-cta .btn{padding:10px 12px;font-size:.78rem;min-height:40px;}
  .brand img{height:32px;}
}
@media (max-width: 360px){
  .nav-cta .btn{padding:9px 9px;font-size:.72rem;min-height:40px;}
  .brand img{height:28px;}
}

/* Between the hamburger breakpoint and full width the horizontal nav is tight:
   seven labels, the wordmark and two CTA pills. Gaps and type come down rather
   than letting the CTA group run off the right edge. Matches Bid Capsule. */
@media (min-width: 1081px) and (max-width: 1260px){
  #siteNavigation ul{gap:12px;}
  #siteNavigation ul li > a{font-size:.82rem;}
  .brand img{height:32px;}
  .nav-cta .btn{padding:9px 12px;font-size:.8rem;}
}

/* Group attribution in the footer. Deliberately quiet: it should read as a
   maker's mark, not a second brand competing with the site's own. The mark sits
   between the words rather than in front of them so the eye reads
   "Powered by [lion] Interactive Lion" as one phrase. */
.powered-by{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-size:.82rem;
  color:rgba(255,255,255,.55);
  transition:color .18s ease, opacity .18s ease;
}
/* 26px is the floor: the lion is drawn in fine strokes and below that they
   merge into a grey block. The lockup carries the wordmark, so no separate
   text is needed beside it. */
.powered-by img{
  height:26px;
  width:auto;
  flex:0 0 auto;
  opacity:.8;
  transition:opacity .18s ease;
}
.powered-by:hover{color:rgba(255,255,255,.85);}
.powered-by:hover img{opacity:1;}

/* The footer bottom row is a two-item flex; with attribution added it needs to
   wrap rather than squeeze on narrow screens. */
.footer-bottom{flex-wrap:wrap;gap:14px;}
@media (max-width:560px){
  .powered-by{width:100%;justify-content:flex-start;}
}

/* ---------- Related Products ---------- */
.related-products{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.related-products li{list-style:none;}
.related-products li > a{
  display:block;
  padding:10px 12px;
  border-left:3px solid var(--rp, var(--border-mid));
  border-radius:0 8px 8px 0;
  text-decoration:none;
  transition:background .18s ease, transform .18s ease;
}
.related-products li > a:hover{transform:translateX(2px);}
.related-products strong{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  line-height:1.3;
}
.related-products span{
  display:block;
  font-weight:400;
  opacity:.78;
  font-size:.8rem;
  line-height:1.4;
  margin-top:2px;
}
/* Product accents, so each sibling is recognisable without a logo. */
.related-products .rp-lc{--rp:#599C18;}
.related-products .rp-oc{--rp:#174591;}
.related-products .rp-bc{--rp:#CDA73E;}

.related-products li > a{background:var(--bg-alt);}
.related-products li > a:hover{background:var(--tint);}
.related-products strong{color:var(--slate);}
.related-products span{color:#5b6068;}

/* ---------- Interactive Lion family menu ----------
   A disclosure in the header's right cluster rather than a bar above it, so the
   product logo remains the only thing in the top left. Native details/summary:
   no script, and keyboard plus no-JS work by default.

   The lion lockup is drawn in fine strokes and needs 26px before it resolves.
   In the panel there is room for that; in a 40px bar there was not, which is
   what made the earlier attempt look heavy. */
.family-menu{position:relative;flex:0 0 auto;}
.family-menu > summary{
  list-style:none;cursor:pointer;
  width:38px;height:38px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--charcoal);border:1px solid var(--border-mid);background:var(--white);
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.family-menu > summary::-webkit-details-marker{display:none;}
.family-menu > summary::marker{content:"";}
.family-menu > summary svg{width:17px;height:17px;display:block;}
.family-menu > summary:hover{border-color:var(--brand-light);color:var(--brand);}
.family-menu[open] > summary{border-color:var(--brand-light);color:var(--brand);background:var(--tint);}

.family-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:1200;
  width:298px;padding:14px;
  background:var(--white);
  border:1px solid var(--border-soft);border-radius:14px;
  box-shadow:var(--shadow);
}
.family-parent{
  display:block;padding:10px 12px 12px;margin-bottom:6px;
  border-radius:10px;background:var(--bg-alt);text-decoration:none;
}
.family-parent img{height:26px;width:auto;display:block;margin-bottom:6px;}
.family-parent span{display:block;font-size:.74rem;color:#5b6068;line-height:1.4;}
.family-parent:hover{background:var(--tint);}

.family-heading{
  display:block;padding:10px 12px 6px;
  font-family:var(--font-display);font-weight:700;font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase;color:#8a9099;
}
.family-item{
  display:block;padding:9px 12px;border-radius:10px;
  border-left:3px solid var(--fam);text-decoration:none;
  transition:background .18s ease;
}
.family-item strong{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:.92rem;color:var(--slate);line-height:1.3;
}
.family-item span{display:block;font-size:.76rem;color:#5b6068;line-height:1.4;margin-top:1px;}
a.family-item:hover{background:var(--bg-alt);}
.family-item.is-here{background:var(--bg-alt);cursor:default;}
.family-item.is-here strong::after{
  content:"You are here";
  float:right;font-family:var(--font-body);font-weight:600;font-size:.64rem;
  color:#8a9099;letter-spacing:.02em;
}
.fam-lc{--fam:#6FBB22;}
.fam-oc{--fam:#2B62C4;}
.fam-bc{--fam:#CDA73E;}

/* Mobile: stop anchoring the panel to the button. A 298px dropdown pinned to a
   trigger near the right edge of a 390px viewport has nowhere to go, and the
   earlier right:-52px pushed it clean off the left edge instead.
   
   Fixed, with left and right margins, so it spans the screen at any width.
   position:fixed resolves against .site-header here rather than the viewport,
   because the header sets backdrop-filter and that makes it the containing
   block for fixed descendants - the same trap as the nav overlay. It still
   lands correctly because the header sits at the viewport origin and spans the
   full width, so left/right/top mean what they appear to mean. */
@media (max-width:560px){
  .family-menu{position:static;}
  .family-panel{
    position:fixed;
    top:88px;
    left:12px;
    right:12px;
    width:auto;
    max-height:calc(100vh - 104px);
    overflow-y:auto;
  }
}
@media (max-width:360px){
  .family-menu > summary{width:34px;height:34px;}
  .family-menu > summary svg{width:15px;height:15px;}
}

/* Login lives in the header at desktop width and in the nav overlay on a phone.
   With the family glyph added, logo + Login + Register + glyph + toggle no
   longer fits a 390px row: the toggle was pushed off screen. A secondary action
   belongs in the overlay on a phone regardless. */
.nav-auth{display:none;}
@media (max-width:1080px){
  .nav-cta .btn-outline{display:none;}
  .nav-auth{
    display:inline-flex;
    margin-top:22px;
    align-self:flex-start;
  }
}

/* The overlay styles every nav link as a full-width text row with a rule under
   it, which flattened the Login pill into a 59px circle. Restated with enough
   specificity to win, as a proper full-width button set apart from the links. */
@media (max-width:1080px){
  .site-header nav#mainNav .nav-auth{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin-top:26px;
    padding:14px 20px;
    border:1px solid var(--border-mid);
    border-radius:999px;
    background:var(--white);
    color:var(--slate);
    font-family:var(--font-display);
    font-weight:700;
    font-size:1rem;
    text-align:center;
    white-space:nowrap;
  }
  .site-header nav#mainNav .nav-auth:hover{
    border-color:var(--brand-light);
    color:var(--brand-deep);
    background:var(--tint);
  }
}

/* Product emblem in the family list. Cropped from each product's own logo, so
   it is the real mark rather than an approximation. 28px: large enough to be
   recognised, small enough that three of them do not turn the panel into a
   logo wall. */
.family-item{
  display:grid;
  grid-template-columns:28px 1fr;
  grid-template-rows:auto auto;
  column-gap:11px;
  align-items:center;
}
.family-emblem{
  grid-row:1 / span 2;
  width:28px;height:28px;
  object-fit:contain;
  display:block;
}
.family-item strong{grid-column:2;align-self:end;}
.family-item span{grid-column:2;align-self:start;}

/* Hide the panel explicitly when the disclosure is closed rather than relying
   on the browser's <details> semantics. Those semantics do not reliably cover
   an out-of-flow child: with the panel position:fixed and its parent static on
   mobile, Chrome lays the closed panel out as a 30x562 sliver, and Safari on
   iOS is looser still. One line removes the whole class of problem. */
.family-menu:not([open]) .family-panel{display:none;}