/*
 * Insure page — the parts that belong to this page only.
 *
 * The hero shell, section rhythm, card and row specs, buttons and the closing
 * CTA band live in service_pages.css; the drawing system and every @keyframes
 * live in ink_graphics.css. All three load together from insure/index.
 *
 * Spec: docs/Redesign/design_handoff_service_pages/README.md
 */

/* navbar_home is fixed and roughly 80px tall once the md:h-12 logo is in it.
   .svc-hero-inner's own 76px top padding therefore only just clears it and the
   headline read as though it were tucked under the nav. Same treatment as
   .find-hero in find.css and .escrow-hero in escrow.css. */
.insure-hero .svc-hero-inner {
  padding-top: 156px;
}

/* ============================ hero artwork ============================
   Capped with max-height and anchored bottom-right. A fixed pixel width with
   height:auto once overflowed the hero and pushed the nav and headline out of
   the gradient — see the sizing note in ANIMATIONS.md. */

.insure-hero-umbrella {
  position: absolute;
  right: 20px;
  bottom: 24px;
  width: min(94%, 540px);
  max-height: 80%;
}

/* ====================== "Would you be covered?" ======================
   Five perils on the left, a cross-fading photo bed on the right. */

.insure-scenarios-head {
  max-width: 620px;
  margin-bottom: 34px;
}

.insure-scenarios-title {
  margin-bottom: 0;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.insure-scenarios {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  border-top: 1px solid var(--svc-border);
  border-bottom: 1px solid var(--svc-border);
}

/* ---- left rail: rows, not pills ---- */

.insure-scenario-rail {
  display: grid;
  grid-auto-rows: 1fr;
  border-right: 1px solid var(--svc-border);
}

.insure-scenario-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  min-height: 88px;
  padding: 20px 24px 20px 26px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  background: #ffffff;
  border: none;
  border-bottom: 1px solid var(--svc-tint-deep);
  transition: background 0.2s ease;
}

.insure-scenario-row:last-child {
  border-bottom: 0;
}

.insure-scenario-row.is-active {
  background: var(--svc-tint);
}

.insure-scenario-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--svc-orange);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.28s var(--svc-ease);
}

.insure-scenario-row.is-active .insure-scenario-marker {
  transform: scaleY(1);
}

.insure-scenario-dot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 13px;
  border-radius: 999px;
  background: var(--svc-tint-deep);
  color: var(--svc-faint);
  transition: background 0.2s ease, color 0.2s ease;
}

.insure-scenario-row.is-active .insure-scenario-dot {
  background: rgba(255, 79, 0, 0.12);
  color: var(--svc-orange);
}

.insure-scenario-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--svc-muted);
  text-wrap: pretty;
  transition: color 0.2s ease;
}

.insure-scenario-row.is-active .insure-scenario-label {
  font-weight: 700;
  color: var(--svc-ink);
}

/* ---- right bed: five stacked photos, cross-faded ---- */

.insure-scenario-bed {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  background: var(--svc-ink);
}

.insure-bed-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.5s ease, transform 0.7s var(--svc-ease);
}

.insure-bed-layer.is-active {
  opacity: 1;
  transform: scale(1);
}

.insure-bed-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Each photo is framed on its own subject rather than dead centre. */
.insure-bed--fire img {
  object-position: 68% 50%;
}

.insure-bed--quake img {
  object-position: 72% 55%;
}

.insure-bed--flood img {
  object-position: 70% 50%;
}

.insure-bed--ring img {
  object-position: 62% 50%;
}

.insure-bed--guest img {
  object-position: 66% 55%;
}

.insure-bed-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(8, 16, 40, 0.94) 0%,
    rgba(8, 16, 40, 0.86) 42%,
    rgba(8, 16, 40, 0.5) 74%,
    rgba(8, 16, 40, 0.34) 100%
  );
}

/* ---- the verdict ---- */

/* The stage carries the height so the five panels can stack inside it. */
.insure-verdict-stage {
  position: relative;
  z-index: 3;
  min-height: 380px;
}

.insure-verdict {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px clamp(24px, 4vw, 56px) 46px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.insure-verdict.is-active {
  opacity: 1;
  visibility: visible;
}

.insure-verdict-word {
  margin-bottom: 18px;
  font-size: clamp(38px, 4.4vw, 54px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.insure-verdict-rule {
  width: 52px;
  height: 3px;
  margin-bottom: 24px;
  border-radius: 999px;
}

.insure-verdict--covered .insure-verdict-word {
  color: #5eead4;
}

.insure-verdict--covered .insure-verdict-rule {
  background: #5eead4;
}

.insure-verdict--partial .insure-verdict-word {
  color: #fcd34d;
}

.insure-verdict--partial .insure-verdict-rule {
  background: #fcd34d;
}

/* Bright orange on the dark scrim (owner ruling 2026-08-09): the deep orange
   is the light-background text rule, and here it left "No." — the section's
   whole point — dimmer than the teal "Yes.". ~5:1 on the scrim, large text. */
.insure-verdict--gap .insure-verdict-word {
  color: var(--svc-orange);
}

.insure-verdict--gap .insure-verdict-rule {
  background: var(--svc-orange);
}

.insure-verdict-detail {
  margin: 0 0 30px;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  text-wrap: pretty;
}

.insure-verdict-coverages {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.insure-coverage-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.insure-coverage {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.insure-coverage + .insure-coverage {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

/* ---- the ask, right-aligned under the explorer ---- */

.insure-scenarios-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 22px 40px;
  margin-top: 36px;
}

.insure-scenarios-cta-copy {
  flex: 1 1 320px;
  margin: 0;
  max-width: 620px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  text-align: right;
  color: var(--svc-ink-soft);
  text-wrap: pretty;
}

/* ================== professional & group discounts ================== */

.insure-discount-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 52px;
}

.insure-discount-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--svc-ink);
}

.insure-discount-head i {
  font-size: 15px;
  color: var(--svc-orange);
}

.insure-discount-head-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--svc-ink);
}

.insure-other-ways {
  padding-top: 40px;
  border-top: 1px solid #e2e8f0;
}

.insure-other-ways-label {
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--svc-faint);
}

.insure-discount-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 44px;
}

.insure-discount-disclaimer {
  max-width: 440px;
  font-size: 15px;
  color: var(--svc-muted);
  text-wrap: pretty;
}

/* ============================ how it works ============================ */

.insure-hiw {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

.insure-hiw-rail {
  position: sticky;
  top: 28px;
}

.insure-hiw-title {
  margin-bottom: 14px;
  font-size: 34px;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.insure-hiw-blurb {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--svc-muted);
  text-wrap: pretty;
}

.insure-hiw-steps {
  display: flex;
  flex-direction: column;
}

.insure-hiw-step {
  display: flex;
  gap: 22px;
  width: 100%;
  margin: 0;
  padding: 22px 20px 22px 18px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--svc-border-soft);
  border-left: 3px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
  /* The progress bar hangs off the bottom edge of this row. */
  position: relative;
}

.insure-hiw-step.is-active {
  background: var(--svc-tint);
  border-left-color: var(--svc-orange);
}

/* Hover is a tint and nothing else. It used to select the step, which meant
   dragging the pointer down the list restarted the graphic on every row. */
.insure-hiw-step:hover {
  background: var(--svc-tint);
}

/* The progress line itself is shared — see [data-hiw-prog] in
   service_pages.css. Finance uses the same one. */

.insure-hiw-copy {
  min-width: 0;
  text-align: left;
}

.insure-hiw-step-title {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--svc-ink-soft);
}

.insure-hiw-step-body {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--svc-body);
  text-wrap: pretty;
}

/* ============================= responsive ============================= */

@media (max-width: 1023px) {
  .insure-hiw {
    grid-template-columns: minmax(0, 1fr);
  }

  .insure-hiw-rail {
    position: static;
  }
}

@media (max-width: 900px) {
  .insure-scenarios {
    grid-template-columns: minmax(0, 1fr);
  }

  .insure-scenario-rail {
    border-right: 0;
    border-bottom: 1px solid var(--svc-border);
  }

  .insure-scenario-row {
    min-height: 0;
  }

  .insure-scenarios-cta {
    justify-content: flex-start;
  }

  .insure-scenarios-cta-copy {
    text-align: left;
    font-size: 19px;
  }
}

@media (max-width: 767px) {
  /* Same clearance, against the shorter mobile navbar (h-8 logo). */
  .insure-hero .svc-hero-inner {
    padding-top: 108px;
  }

  .insure-scenarios-title {
    font-size: 27px;
  }

  .insure-scenario-bed,
  .insure-verdict-stage {
    min-height: 320px;
  }

  .insure-verdict {
    padding: 32px 22px 34px;
  }

  .insure-verdict-detail {
    font-size: 16px;
  }

  .insure-hiw-title {
    font-size: 27px;
  }
}