/* Bid Capsule - site.css
   Derived from the theme this site shipped under its former name, Lead Capsule
   Marketplace (same approved layout system),
   so the masters' class names carry over unchanged. Brand gold #CDA73E and
   charcoal #252A2D are sampled from the Bid Capsule logo artwork; light and
   deep are derived from the gold. Variables use the --brand* names that Offer
   Capsule already uses, so the three sibling themes read the same way.
   No em dashes. */
:root{
  --brand:#CDA73E;
  --brand-light:#E0BE5E;
  --brand-deep:#8A6B1F;
  --tint:#FBF5E6;
  --ink:#1E2225;
  --charcoal:#2E3438;
  --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;}
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(--ink);
  box-shadow:0 12px 28px -10px rgba(224,190,94,.55);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(224,190,94,.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(205,167,62,.35), transparent 60%),
    radial-gradient(700px 500px at 88% -10%, rgba(224,190,94,.28), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(205,167,62,.15), transparent 60%),
    linear-gradient(165deg, #1c1f20 0%, var(--ink) 55%, #2C2A25 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(205,167,62,.12);border:1px solid rgba(205,167,62,.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(205,167,62,.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%, #F0D48A 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,#FAF6EC);
  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:#8a8f8c;}
.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;}
/* Caption under the hero device mock, making clear it is an illustration
   rather than live marketplace data. */
.device-note{
  margin-top:10px;
  font-size:.75rem;
  color:rgba(255,255,255,.5);
  text-align:right;
}
.card-float .ic{width:34px;height:34px;border-radius:10px;background:rgba(205,167,62,.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:#8a8f8c;}

/* ---------- 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(205,167,62,.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:#5b625c;}

/* ---------- 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(205,167,62,.4);}
.audience-card.sellers{border:2px solid var(--brand-light);background:linear-gradient(180deg,#ffffff 0%, #FDFAF1 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(205,167,62,.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(--ink);margin-bottom:22px;
}
.audience-card h3{font-size:1.55rem;margin-bottom:12px;}
.audience-card > p{color:#5b625c;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(205,167,62,.4);}
.step-num{
  font-family:var(--font-display);font-weight:800;font-size:.8rem;color:var(--brand-deep);
  background:rgba(205,167,62,.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:#5b625c;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(205,167,62,.4);}
.feature-card.highlight{
  grid-column:span 2;
  border:2px solid var(--brand-light);
  background:linear-gradient(135deg,#ffffff 0%, #FDFAF1 100%);
}
.new-badge{
  position:absolute;top:20px;right:24px;
  background:linear-gradient(135deg, var(--brand), var(--brand-light));color:var(--ink);
  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(224,190,94,.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:#5b625c;line-height:1.55;}

/* ---------- Testimonial ---------- */
.testimonial-wrap{
  background:linear-gradient(135deg, #1c1f20 0%, var(--ink) 60%, #2C2A25 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(205,167,62,.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(--ink);
  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(205,167,62,.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(205,167,62,.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:#1a1d1e;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(200px,.9fr) 1.6fr minmax(200px,.9fr);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);}
/* Per-page subheading under the title, fed from the page's MetaDescription.
   Measure is capped so it reads as one or two lines rather than a paragraph. */
.page-title-band p.lede{
  margin-top:10px;
  max-width:70ch;
  font-size:1.02rem;
  line-height:1.6;
  color:#5b6068;
}
.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); }

/* 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, a wide wordmark and two CTA pills. Gaps and type come down
   rather than letting the CTA group overflow. */
@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;}
}

/* Body copy links are underlined for legibility, but a .btn inside CMS content
   is a button, not a link in a sentence. The underline made the hub audience
   cards look like broken buttons. */
.content-col a.btn,
.cms-content a.btn{text-decoration:none;}

/* 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;}
/* .footer-grid ul sets display:block and columns:3 for the link columns, and it
   outranks a bare .related-products, so the two product cards were flowing into
   the multi-column layout side by side inside a 291px footer column and wrapping
   every word. Restated at matching specificity. */
.footer-grid ul.related-products{display:flex;flex-direction:column;columns:auto;}
.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-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;}

/* Bid Capsule renders this in the dark footer rather than a light sidebar. */
.footer-related .footer-heading{
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.6);
  margin:0 0 16px;
}
.related-products li > a{background:rgba(255,255,255,.04);}
.related-products li > a:hover{background:rgba(255,255,255,.08);}
.related-products strong{color:rgba(255,255,255,.92);}
.related-products span{color:rgba(255,255,255,.5);}

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