/* =============================================================================
   INSURANCE-BACKED GUARANTEE. Customer explainer page (/insurance-backed-guarantee).
   Loaded alongside landing.css, so this sheet only defines the components unique
   to the page (hero, key-points panel, no-commission disclosure, the company-vs-
   IBG comparison, the covered/not-covered panels, conditions callout and small
   print). Everything else (section heads, pricing table, FAQ, CTA band, final,
   process steps) is reused from landing.css. Visual language matches the rest of
   the site: glass cards, accent-glow borders, gradient dividers, dark/darker
   section rhythm.
   ========================================================================== */

/* ----------------------------------------------------------------- Section rhythm -- */
/* Reused landing inner components (lp-pricing__table, lp-faq__*, lp-process__*)
   are wrapped in these neutral section shells so this page controls its own
   dark/darker alternation rather than inheriting each lp- wrapper's background. */
.ibg-section {
  background: var(--clr-bg);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.ibg-section--alt {
  background: var(--clr-bg-dark);
}

/* ----------------------------------------------------------------- Hero -- */
.ibg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(15, 187, 245, 0.16), transparent 62%),
    var(--clr-bg-dark);
  border-bottom: 1px solid var(--clr-border);
  margin-top: calc(-1 * (var(--nav-h) + var(--nav-offset) + 2rem));
  padding: calc(var(--nav-h) + var(--nav-offset) + 4rem) 0 clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

/* Faint geometric grid wash, masked to the centre — same flourish as lp-final. */
.ibg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse at center top, #000 8%, transparent 62%);
          mask-image: radial-gradient(ellipse at center top, #000 8%, transparent 62%);
  pointer-events: none;
}

.ibg-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}

.ibg-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  color: var(--clr-accent);
  background: rgba(15, 187, 245, 0.12);
  border: 1px solid rgba(15, 187, 245, 0.3);
}

.ibg-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clr-accent);
  margin-bottom: 0.9rem;
}

.ibg-hero__eyebrow::before,
.ibg-hero__eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--clr-accent);
  opacity: 0.55;
}

.ibg-hero__heading {
  font-family: var(--font-display);
  color: var(--clr-text-bright);
  font-size: clamp(2.1rem, 1.5rem + 3.4vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  margin: 0 0 1.25rem;
}

.ibg-hero__accent {
  color: var(--clr-accent);
  text-shadow:
    0 0 30px rgba(15, 187, 245, 0.35),
    0 0 60px rgba(15, 187, 245, 0.15),
    0 2px 20px rgba(0, 0, 0, 0.5);
}

.ibg-hero__intro {
  color: var(--clr-text);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 auto 1.75rem;
}

.ibg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ----------------------------------------------------------------- Key points -- */
.ibg-keypoints {
  background: var(--clr-bg);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.ibg-keypoints__panel {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  background: var(--clr-bg-surface-solid);
  border: 1px solid var(--clr-border);
  border-top: 3px solid var(--clr-accent);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.ibg-keypoints__title {
  text-align: center;
  color: var(--clr-text-bright);
  font-size: clamp(1.25rem, 1.1rem + 1vw, 1.7rem);
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.ibg-keypoints__sub {
  text-align: center;
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  margin: 0 auto 1.75rem;
  max-width: 52ch;
}

.ibg-keypoints__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ibg-keypoints__item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--clr-text);
  font-size: 0.98rem;
  line-height: 1.55;
}

.ibg-keypoints__item svg {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 5px;
  margin-top: 1px;
  border-radius: 50%;
  color: var(--clr-accent);
  background: rgba(15, 187, 245, 0.12);
}

.ibg-keypoints__item strong {
  color: var(--clr-text-bright);
}

/* Stack the key points into one column on phones (matches the compare/coverage
   grid breakpoint) so the two columns don't cram on narrow screens. */
@media (max-width: 720px) {
  .ibg-keypoints__grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------- No-commission disclosure -- */
.ibg-disclosure {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(15, 187, 245, 0.16), transparent 65%),
    linear-gradient(180deg, #1a2436 0%, #15202f 100%);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}

.ibg-disclosure::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-accent), transparent);
  opacity: 0.6;
}

.ibg-disclosure__card {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 3vw, 1.75rem);
  max-width: 880px;
  margin: 0 auto;
}

.ibg-disclosure__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--clr-accent);
  background: rgba(15, 187, 245, 0.12);
  border: 1px solid rgba(15, 187, 245, 0.3);
}

/* min-width:0 lets the flex child shrink instead of overflowing on narrow screens. */
.ibg-disclosure__body {
  flex: 1;
  min-width: 0;
}

.ibg-disclosure__heading {
  font-family: var(--font-display);
  color: var(--clr-text-bright);
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.ibg-disclosure__text {
  color: var(--clr-text);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
  line-height: 1.7;
  margin: 0 0 0.75rem;
}

.ibg-disclosure__text:last-child {
  margin-bottom: 0;
}

.ibg-disclosure__text strong {
  color: var(--clr-text-bright);
}

@media (max-width: 640px) {
  .ibg-disclosure__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ----------------------------------------------------------------- Compare cards -- */
.ibg-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.ibg-compare__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--clr-bg-surface-solid);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
}

/* The IBG card is the protective layer — give it the accent emphasis. */
.ibg-compare__card--ibg {
  border-color: rgba(15, 187, 245, 0.4);
  background:
    linear-gradient(135deg, rgba(15, 187, 245, 0.1) 0%, transparent 55%),
    var(--clr-bg-surface-solid);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.ibg-compare__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 1rem;
  color: var(--clr-accent);
  background: rgba(15, 187, 245, 0.12);
  border: 1px solid rgba(15, 187, 245, 0.25);
}

.ibg-compare__card--company .ibg-compare__icon {
  color: var(--clr-text-muted);
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.25);
}

.ibg-compare__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.75rem;
  color: var(--clr-text-muted);
  background: rgba(148, 163, 184, 0.12);
}

.ibg-compare__card--ibg .ibg-compare__tag {
  color: var(--clr-bg-dark);
  background: var(--clr-accent);
}

.ibg-compare__heading {
  color: var(--clr-text-bright);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.6rem;
}

.ibg-compare__card p {
  color: var(--clr-text);
  font-size: 0.96rem;
  line-height: 1.65;
  margin: 0;
}

.ibg-compare__card p + p {
  margin-top: 0.75rem;
}

@media (max-width: 720px) {
  .ibg-compare {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------- Covered / not covered -- */
.ibg-coverage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.ibg-coverage__panel {
  background: var(--clr-bg-surface-solid);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
}

.ibg-coverage__panel--yes {
  border-top: 3px solid var(--clr-success);
}

.ibg-coverage__panel--no {
  border-top: 3px solid var(--clr-text-muted);
}

.ibg-coverage__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--clr-text-bright);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 1.1rem;
}

.ibg-coverage__title svg {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 50%;
}

.ibg-coverage__panel--yes .ibg-coverage__title svg {
  color: var(--clr-success);
  background: var(--clr-success-bg);
}

.ibg-coverage__panel--no .ibg-coverage__title svg {
  color: var(--clr-text-muted);
  background: rgba(148, 163, 184, 0.12);
}

.ibg-coverage__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ibg-coverage__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--clr-text);
  font-size: 0.96rem;
  line-height: 1.55;
}

.ibg-coverage__list svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.ibg-coverage__panel--yes .ibg-coverage__list svg {
  color: var(--clr-success);
}

.ibg-coverage__panel--no .ibg-coverage__list svg {
  color: var(--clr-text-muted);
}

@media (max-width: 720px) {
  .ibg-coverage {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------- Conditions callout -- */
.ibg-important {
  max-width: 820px;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background:
    linear-gradient(135deg, rgba(15, 187, 245, 0.1) 0%, transparent 55%),
    var(--clr-bg-surface-solid);
  border: 1px solid rgba(15, 187, 245, 0.3);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.ibg-important__icon {
  flex-shrink: 0;
  color: var(--clr-accent);
}

.ibg-important__title {
  color: var(--clr-text-bright);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.ibg-important__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ibg-important__list li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--clr-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ibg-important__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-accent);
}

.ibg-important__list strong {
  color: var(--clr-text-bright);
}

/* ----------------------------------------------------------------- Pricing helpers -- */
/* The contract-value table reuses .lp-pricing__table wholesale; these adjust the
   "call us" row and add a caption note specific to this page. */
.ibg-pricing__intro-note {
  color: var(--clr-text-muted);
  font-size: 0.9rem;
  text-align: center;
  margin: 1.25rem auto 0;
  max-width: 620px;
  line-height: 1.6;
}

.ibg-pricing__call {
  color: var(--clr-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ease);
}

.ibg-pricing__call:hover {
  color: var(--clr-accent-hover);
}

/* ----------------------------------------------------------------- Small print -- */
.ibg-smallprint {
  background: var(--clr-bg-dark);
  padding: clamp(2rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--clr-border);
}

.ibg-smallprint__text {
  max-width: 820px;
  margin: 0 auto;
  color: var(--clr-text-muted);
  font-size: 0.82rem;
  line-height: 1.65;
  text-align: center;
}

.ibg-smallprint__text + .ibg-smallprint__text {
  margin-top: 0.75rem;
}

/* ----------------------------------------------------------------- Reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .ibg-compare__card,
  .ibg-coverage__panel {
    transition: none;
  }
}