/* Offer Capsule - site.css
   Derived from the Bid Capsule theme, which carried the Lead Capsule Marketplace
   name at the time (same approved layout system).
   Brand blue #174591 sampled from the Offer Capsule logo artwork; light
   #2B62C4 / deep #0F3068 derived from it. No greens, no em dashes. */
:root{
  --brand:#174591;
  --brand-light:#2B62C4;
  --brand-deep:#0F3068;
  --tint:#EDF2FA;
  --ink:#20232a;
  --charcoal:#30343c;
  --slate:#343d4c;
  --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;}
section[id]{scroll-margin-top:96px;}

/* ---------- 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(--brand) 0%, var(--brand-light) 100%);
  color:var(--white);
  box-shadow:0 12px 28px -10px rgba(43,98,196,.55);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(43,98,196,.65);}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:var(--white);}
.btn-ghost:hover{border-color:var(--brand-light);color:var(--brand-light);}
.btn-outline{background:transparent;border-color:var(--border-mid);color:var(--slate);}
.btn-outline:hover{border-color:var(--brand-light);color:var(--brand-deep);}
.btn-sm{padding:10px 22px;font-size:.9rem;}

/* ---------- 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:42px;width:auto;flex:0 0 auto;max-width:none;object-fit:contain;}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0;}
.nav-links a{
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--charcoal);
  text-decoration:none;position:relative;padding:6px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--brand-light);
  transition:width .25s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:12px;}
.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(--brand-light);color:var(--brand-deep);}
.menu-toggle svg{width:20px;height:20px;display:block;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:180px 0 110px;
  background:
    radial-gradient(600px 400px at 12% 8%, rgba(23,69,145,.35), transparent 60%),
    radial-gradient(700px 500px at 88% -10%, rgba(43,98,196,.28), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(23,69,145,.15), transparent 60%),
    linear-gradient(165deg, #1a1d24 0%, var(--ink) 55%, #272b33 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(--brand-light);background:rgba(23,69,145,.12);border:1px solid rgba(23,69,145,.35);
  padding:8px 16px;border-radius:999px;margin-bottom:24px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(23,69,145,.25);}
.hero h1{font-size:clamp(2.3rem, 4.2vw, 3.4rem);line-height:1.1;color:var(--white);font-weight:800;}
.hero h1 span{
  background:linear-gradient(120deg, var(--brand) 0%, #8FB8E8 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-fine{margin-top:14px;font-size:.82rem;color:rgba(255,255,255,.5);}
.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:.66rem;color:#8a9088;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.kpi strong{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--brand-deep);margin-top:4px;}
.listing-card{
  background:var(--white);border:1px solid var(--border-soft);border-radius:12px;
  padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
}
.listing-card:last-child{margin-bottom:0;}
.listing-card .vert{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--slate);display:block;}
.listing-card .meta{font-size:.7rem;color:#8a8e94;}
.listing-card .price{font-family:var(--font-display);font-weight:800;color:var(--brand-deep);font-size:.95rem;white-space:nowrap;}
.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(23,69,145,.15);display:flex;align-items:center;justify-content:center;color:var(--brand-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:#8a8e94;}

/* ---------- Proof / trust strip ---------- */
.proof-strip{padding:36px 0;background:var(--bg-alt);border-bottom:1px solid var(--border-soft);}
.proof-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px;}
.proof-rating{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;color:var(--slate);font-size:.92rem;}
.proof-rating .stars{color:var(--brand-deep);letter-spacing:2px;font-size:1rem;}
.proof-strip .sep{width:1px;height:24px;background:var(--border-mid);}
.proof-strip .integ{display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:center;opacity:.8;}
.proof-strip .integ span{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--slate);}

/* ---------- Section shell ---------- */
.section{padding:110px 0;}
.section.alt{background:var(--bg-alt);}
.section-head{max-width:700px;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(--brand-deep);background:rgba(23,69,145,.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(--brand-deep);}
.section-head p{margin-top:16px;font-size:1.05rem;color:#5b6068;}

/* ---------- Two-audience section ---------- */
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.audience-card{
  background:var(--white);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:40px 36px;position:relative;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display:flex;flex-direction:column;
}
.audience-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm);border-color:rgba(23,69,145,.4);}
.audience-card.sellers{border:2px solid var(--brand-light);background:linear-gradient(180deg,#ffffff 0%, #f3f7fc 100%);}
.audience-card .role-tag{
  display:inline-flex;align-self:flex-start;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-deep);background:rgba(23,69,145,.12);padding:6px 14px;border-radius:999px;margin-bottom:20px;
}
.audience-card .icon-wrap{
  width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);color:var(--white);margin-bottom:22px;
}
.audience-card h3{font-size:1.55rem;margin-bottom:12px;}
.audience-card > p{color:#5b6068;font-size:.98rem;margin-bottom:24px;}
.audience-list{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:14px;flex-grow:1;}
.audience-list li{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--charcoal);}
.audience-list li svg{flex-shrink:0;color:var(--brand-deep);margin-top:2px;}

/* ---------- How it works ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.step-card{
  background:var(--white);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:32px 26px;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(23,69,145,.4);}
.step-num{
  font-family:var(--font-display);font-weight:800;font-size:.8rem;color:var(--brand-deep);
  background:rgba(23,69,145,.12);width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.step-card h3{font-size:1.12rem;margin-bottom:10px;}
.step-card p{color:#5b6068;font-size:.9rem;}

/* ---------- Features grid ---------- */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.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;position:relative;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:rgba(23,69,145,.4);}
.feature-card.highlight{
  grid-column:span 2;
  border:2px solid var(--brand-light);
  background:linear-gradient(135deg,#ffffff 0%, #f3f7fc 100%);
}
.new-badge{
  position:absolute;top:20px;right:24px;
  background:linear-gradient(135deg, var(--brand), var(--brand-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;
}
.feature-card .ic{
  width:44px;height:44px;border-radius:12px;background:rgba(43,98,196,.12);color:var(--brand-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:#5b6068;line-height:1.55;}

/* ---------- Testimonial ---------- */
.testimonial-wrap{
  background:linear-gradient(135deg, #1a1d24 0%, var(--ink) 60%, #272b33 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(23,69,145,.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(--brand), var(--brand-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(--brand);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(--brand-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);}

/* ---------- Launch banner ---------- */
.launch-strip{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--border-soft);border-radius:var(--radius);background:var(--white);
  padding:26px 32px;box-shadow:var(--shadow-sm);text-align:center;
}
.launch-strip .ic{
  width:40px;height:40px;border-radius:12px;background:rgba(23,69,145,.14);color:var(--brand-deep);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.launch-strip strong{font-family:var(--font-display);color:var(--slate);}

/* ---------- CTA band ---------- */
.section-cta{padding-top:0;}
.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(23,69,145,.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:560px;margin:0 auto 34px;font-size:1.05rem;}
.cta-band .hero-actions{position:relative;justify-content:center;margin-top:0;}

/* ---------- Footer ---------- */
.site-footer{background:#181b21;color:rgba(255,255,255,.6);padding:64px 0 28px;}
/* Two children only (brand + footer-menu); the original four-track grid left
   the right half of the footer empty. The menu column carries its own 3-up
   grid instead. */
.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;}
/* Knockout variant -- see the matching note in the LeadCapsuleWeb theme. */
.footer-brand img{height:36px;width:auto;}
.footer-grid p{font-size:.88rem;line-height:1.6;max-width:280px;color:rgba(255,255,255,.5);}
.footer-grid h5{font-family:var(--font-display);color:var(--white);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px;}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.footer-grid a{font-size:.9rem;color:rgba(255,255,255,.6);text-decoration:none;}
.footer-grid a:hover{color:var(--brand);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:.8rem;flex-wrap:wrap;gap:12px;}
.footer-bottom .socials{display:flex;gap:14px;}
.footer-bottom .socials a{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);
}
.footer-bottom .socials a:hover{border-color:var(--brand);color:var(--brand);}

/* ---------- Interior page title band (not in the source design; simple band
   used only by InteriorPage.master in place of the marketing hero) ---------- */
.page-title-band{
  background:var(--tint);
  border-bottom:1px solid var(--border-soft);
  padding:64px 0 40px;
  margin-top:78px; /* clears the fixed .site-header */
}
.page-title-band h1{font-size:clamp(1.8rem, 3vw, 2.4rem);color:var(--slate);}
.content-col{max-width:800px;margin:0 auto;}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-visual{max-width:480px;}
  .features-grid{grid-template-columns:repeat(2,1fr);}
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .audience-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .testimonial-inner{grid-template-columns:1fr;text-align:center;}
  .testimonial-inner .quote-avatar{margin:0 auto;}
}
@media (max-width: 760px){
  .nav-links{display:none;}
  .features-grid{grid-template-columns:1fr;}
  .feature-card.highlight{grid-column:span 1;}
  .steps-grid{grid-template-columns:1fr;}
  .hero{padding:150px 0 90px;}
  .testimonial-wrap, .cta-band{padding:44px 26px;}
  .footer-grid{grid-template-columns:1fr;}
  small,.new-badge{font-size:12px;}
  /* Footer 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. */
  .site-footer nav ul,.footer-grid ul{columns:1;}
  .site-footer nav a,.footer-grid a{padding:10px 0;}
}

/* ---------- 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(--brand-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. The InteriorPage
   master wraps the same ContentPlaceHolder in .content-col rather than
   .cms-content, so mirror the same defenses there. */
.cms-content [width],
.cms-content [style*="width"],
.content-col [width],
.content-col [style*="width"] { max-width: 100% !important; }
.cms-content *,
.content-col * { max-width: 100%; }
.content-col table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-col img { height: auto; }

/* ---------- Menu component output ----------------------------------------
   The design marked its nav up as <ul class="nav-links">, but the CMS renders
   navigation through the shared MenuDisplay component, which emits a bare
   <div><ul><li><a> with no classes of its own. Without these rules the menu
   fell back to a default bulleted list spilling out of the header. Mirrors the
   approach the InteractiveLion v2 theme uses (nav.main-nav ul). */
.site-header nav { display: flex; align-items: center; }
.site-header nav > div { display: flex; align-items: center; }
.site-header nav ul {
    display: flex; align-items: center; gap: 32px;
    list-style: none; margin: 0; padding: 0;
}
.site-header nav li { list-style: none; position: relative; }
.site-header nav a {
    font-family: var(--font-display); font-weight: 600; font-size: .95rem;
    color: var(--charcoal); text-decoration: none;
    position: relative; padding: 6px 0; white-space: nowrap;
}
.site-header nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 0; height: 2px; background: var(--brand-light);
    transition: width .25s ease;
}
.site-header nav a:hover::after { width: 100%; }

/* second-level items become a hover dropdown rather than stacking inline */
.site-header nav li > ul {
    display: none; position: absolute; top: 100%; left: 0;
    flex-direction: column; gap: 0; min-width: 190px; padding: 8px 0;
    background: var(--white); border: 1px solid var(--border-soft);
    border-radius: 12px; box-shadow: var(--shadow-sm); z-index: 40;
}
.site-header nav li:hover > ul,
.site-header nav li:focus-within > ul { display: flex; }
.site-header nav li > ul a { padding: 8px 16px; display: block; }
.site-header nav li > ul a::after { display: none; }

/* footer menu, same component, different context */
/* 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. */
.site-footer nav ul,
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: block; columns: 3; column-gap: 32px; }
.site-footer nav li, .footer-grid li { break-inside: avoid; }
.site-footer nav li, .footer-grid li { list-style: none; }
.site-footer nav a, .footer-grid a {
    font-size: .88rem; color: rgba(255,255,255,.6); text-decoration: none;
    display: block; padding: 7px 0;
}
.site-footer nav a:hover, .footer-grid a:hover { color: var(--white); }

@media (max-width: 1080px) {
    /* Real collapsible nav: nav#mainNav (fed entirely by the MenuDisplay
       component via phMainMenu) becomes a full-screen overlay when it carries
       the .open class, toggled by #menuToggleBtn. Mirrors the InteractiveLion
       v2 nav.main-nav.open pattern -- no markup here duplicates the menu. */
    .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; }

    .site-header 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;
    }
    .site-header nav#mainNav.open{ display:flex; }
    .site-header nav#mainNav > div{ display:flex; flex-direction:column; align-items:stretch; width:100%; }
    .site-header nav ul{ flex-direction:column; align-items:stretch; flex-wrap:wrap; gap:6px; width:100%; }
    .site-header nav li{ flex:0 0 auto; }
    .site-header nav a{
        font-size:1.1rem; font-weight:700; padding:14px 4px; display:block;
        border-bottom:1px solid var(--border-soft); white-space:normal;
    }
    .site-header nav li > ul{
        position:static; display:flex; flex-direction:column; box-shadow:none; border:0;
        background:none; padding:0 0 0 12px;
    }
}

/* .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;}

/* The homepage's per-page body slot (section.cms-body) is legitimately empty --
   every homepage section is template-driven -- but an empty section still
   renders its padding as a blank band. Hide the section when the CMS slot
   produced no elements (whitespace-only). */
section.cms-body:not(:has(.cms-content *)) { display: none; }

/* .content-col (InteriorPage.master's body wrapper) only ever got the width
   safety caps, not the type rhythm .cms-content has - so the new page copy
   rendered with headings jammed against paragraphs. Same scale and spacing as
   .cms-content, one place. */
.content-col > *:first-child { margin-top: 0; }
.content-col h2,
.content-col h3 { font-family: var(--font-display); color: var(--slate); line-height: 1.2; margin: 1.6em 0 .5em; }
.content-col h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.content-col h3 { font-size: 1.15rem; }
.content-col p,
.content-col li { color: var(--charcoal); line-height: 1.75; }
.content-col p { margin: 0 0 1.1em; }
.content-col ul,
.content-col ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.content-col li { margin-bottom: .45em; }
.content-col a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; }
.content-col table { width: 100%; border-collapse: collapse; margin: 0 0 1.3em; }
.content-col th,
.content-col td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.content-col th { background: var(--bg-alt); font-family: var(--font-display); }

/* ==========================================================================
   Interior page layout - ported from the LeadCapsuleWeb v2 theme 2026-08-25
   so Offer Capsule matches Lead Capsule page width and layout: .wrap at
   1180px, a wide .leftcolumn content column beside a #SideBar of cards,
   rather than the Marketplace theme's narrow centred .content-col.
   Palette swapped green -> Offer Capsule blue on the way across.
   ========================================================================== */
/* ---------- 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(23,69,145,.32), transparent 60%),
    radial-gradient(700px 420px at 90% 10%, rgba(43,98,196,.24), transparent 60%),
    linear-gradient(165deg, #1a1d24 0%, var(--ink) 55%, #272b33 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(--brand) 0%, #8FB8E8 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(--brand-light);letter-spacing:1px;}

/* ---------- 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(--brand-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(--brand-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(--brand) 0%, var(--brand-light) 100%);color:var(--white);
}

/* ==========================================================================
   Pricing page: plan cards, all-plans-include bar, comparison table and FAQ.
   Ported from the LeadCapsuleWeb v2 theme 2026-08-25 so Offer Capsule pricing
   matches Lead Capsule side by side, per the owner. Palette swapped to blue.
   ========================================================================== */
/* ---------- 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(--brand-light);background:linear-gradient(180deg,#ffffff 0%, #f3f7fc 100%);position:relative;}
.popular-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg, var(--brand), var(--brand-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(43,98,196,.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:#8a8e94;}
.teaser-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.teaser-card li{font-size:.88rem;color:#5b6068;display:flex;align-items:center;gap:8px;}

/* interior page pricing grid variant */
.pricing-grid{display:grid;grid-template-columns:repeat(4,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(--brand-light);position:relative;background:linear-gradient(180deg,#ffffff 0%, #f3f7fc 100%);}
.price-card h3{font-size:1.15rem;margin-bottom:4px;}
.price-card .plan-sub{font-size:.8rem;color:#8a8e94;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:#8a8e94;}
.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:#5b6068;}
.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(--brand-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(23,69,145,.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(23,69,145,.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(23,69,145,.14);color:var(--brand-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:#5b6068;font-size:.92rem;line-height:1.65;}

/* ---------- 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%;}

/* Pricing responsive: the plan grid must step down or four cards overflow a
   phone. Mirrors the LeadCapsuleWeb breakpoints; the comparison table keeps a
   640px floor and swipes inside .table-scroll rather than being crushed. */
@media (max-width: 1280px){ .pricing-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width: 1080px){ .pricing-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 760px){
  .pricing-grid{grid-template-columns:1fr;}
  .compare-table{min-width:640px;}
  .compare-table th, .compare-table td{padding:12px 14px;font-size:.82rem;}
}

/* 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;}

/* ---------- #siteNavigation (PricingPage.master) ---------------------------
   PricingPage.master came from the Lead Capsule pricing template and renders its
   menu as <nav id="mainNav"><div id="siteNavigation">, while the other Offer
   Capsule masters use the Marketplace structure. These are the BASE rules only,
   taken from outside any media query, plus one explicit mobile block below.
   (Lifting media-query rules into the base cascade is what previously left this
   nav stacked vertically at desktop width.) */
/* 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(--brand-light);
  transition:width .25s ease;}
#siteNavigation ul li > a:hover::after{width:100%;}
#siteNavigation ul ul{display:none;}

@media (max-width: 760px){
  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;
  }
  nav#mainNav.open{display:flex;}
  #siteNavigation{display:flex;flex-direction:column;align-items:stretch;width:100%;}
  #siteNavigation ul{flex-direction:column;align-items:stretch;gap:6px;width:100%;}
  #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;}
}

/* Sidebar card headings get a rule beneath them, so each card reads as a
   titled block rather than a heading floating above a list. Uses a border on
   the heading itself rather than an <hr>, so it applies to every sidebar card
   without touching the CMS content. */
.sidebar-card h3,
.sidebar-card .sidebar-title{
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid var(--border-soft);
}
/* the note under a title sits below the rule, so lift it back up a little */
.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;}
}

/* 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;}