/* ═══════════════════════════════════════════════════════
   MYINSURANCEBRO — Components
   Loaded after style.css. Tokens live in style.css :root.
   ═══════════════════════════════════════════════════════ */

/* ── SVG icon system (replaces emoji) ────────────────── */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.icon-fill {
  fill: currentColor;
  stroke: none;
}

/* ── Insurer logos ───────────────────────────────────────
   Real brand icons from assets/logos/. `.has-logo` turns any of the
   existing tiles into a white "logo plate": these files carry their own
   brand background and were drawn for a light surface, so on the dark
   theme an unplated logo either disappears or glares. The plate stays
   white in both themes for the same reason a printed partner strip does.

   Tiles without `.has-logo` keep the old coloured-monogram treatment,
   which is what an insurer with no logo file still renders as.
   ──────────────────────────────────────────────────────── */
.monogram,
.plan-monogram,
.cmp-tray-chip,
.brand-tile {
  color: #fff;
}

.has-logo {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 2px;
  overflow: hidden;
}

/* `contain` never crops: these logos are a mix of square icons and
   boxed wordmarks, and cropping a wordmark makes it unreadable. */
.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Small inline chip — insurer name plus mark, used in running text,
   table headers and the league table. */
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
}

.brand-tile {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex: none;
}

.brand-tile.xs {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

/* Rows of insurer chips — the FAQ answer and anywhere else we list
   who we place business with. */
.brand-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.brand-row .brand-chip {
  padding: 0.35rem 0.7rem 0.35rem 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Icons that sit inside a tinted rounded tile */
.icon-tile {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  flex: none;
}

.icon-tile.warm {
  background: var(--color-primary-light);
  color: #8A6D00;
}

.icon-tile.teal {
  background: var(--color-accent-2-soft);
  color: var(--color-accent-2);
}

.icon-tile.danger {
  background: #FEE2E2;
  color: #B91C1C;
}

[data-theme="dark"] .icon-tile.danger {
  background: #3B1214;
  color: #FCA5A5;
}

.icon-tile.sm {
  width: 38px;
  height: 38px;
  font-size: 1.125rem;
  border-radius: var(--radius-sm);
}

/* ── Shared bits ─────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.eyebrow.warm {
  background: var(--color-primary-light);
  color: #8A6D00;
}

.section-header .eyebrow {
  margin-inline: auto;
}

.section-alt {
  background: var(--color-surface);
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 1200;
  background: var(--gradient-brand);
  transition: width 80ms linear;
}

/* Staggered reveal — child delay set via --i */
.stagger>* {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.stagger.visible>* {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .stagger>* {
    opacity: 1;
    transform: none;
  }
}

/* ── Hero gradient mesh ──────────────────────────────── */
.hero-mesh {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}

.hero-mesh span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.hero-mesh span:nth-child(1) {
  width: 46vw;
  height: 46vw;
  top: 2%;
  left: -6%;
  background: var(--gradient-mesh-1);
  animation: drift-a 22s var(--ease-out) infinite alternate;
}

.hero-mesh span:nth-child(2) {
  width: 38vw;
  height: 38vw;
  top: 26%;
  right: -4%;
  background: var(--gradient-mesh-2);
  animation: drift-b 27s var(--ease-out) infinite alternate;
}

.hero-mesh span:nth-child(3) {
  width: 30vw;
  height: 30vw;
  bottom: 4%;
  left: 34%;
  background: var(--gradient-mesh-3);
  animation: drift-c 31s var(--ease-out) infinite alternate;
}

@keyframes drift-a {
  to {
    transform: translate3d(6%, 8%, 0) scale(1.12);
  }
}

@keyframes drift-b {
  to {
    transform: translate3d(-8%, 6%, 0) scale(1.08);
  }
}

@keyframes drift-c {
  to {
    transform: translate3d(4%, -10%, 0) scale(1.15);
  }
}

/* ── Insurer marquee ─────────────────────────────────── */
.marquee {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) 0;
  border-block: 1px solid var(--color-border);
  background: var(--color-bg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: max-content;
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.marquee-item .monogram {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ── Stat band (animated counters) ───────────────────── */
.stat-band {
  background: var(--color-surface-ink);
  color: var(--color-on-ink);
  padding: var(--space-16) 0;
  position: relative;
  overflow: hidden;
}

.stat-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  position: relative;
  z-index: 1;
}

.stat {
  text-align: center;
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-on-ink-muted);
}

@media (max-width: 768px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10) var(--space-6);
  }
}

/* ═══════════════════════════════════════════════════════
   PERSONA / PAIN POINTS
   ═══════════════════════════════════════════════════════ */
.persona-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.persona-card {
  position: relative;
  text-align: left;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  background: var(--color-card-bg);
  /* It is a <button>, so without this it inherits the UA's black
     `buttontext` and the heading disappears in dark mode. */
  color: var(--color-text);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.persona-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.persona-card[aria-selected="true"] {
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), .28);
}

.persona-card .icon-tile {
  margin-bottom: var(--space-4);
}

.persona-age {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.persona-card h3 {
  font-size: 1.125rem;
  margin: var(--space-1) 0 var(--space-2);
}

.persona-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* Detail panel */
.persona-panel {
  display: none;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.persona-panel.active {
  display: block;
  animation: panel-in .45s var(--ease-out) both;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.persona-panel-head {
  padding: var(--space-8);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.persona-panel-head h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.persona-panel-head p {
  color: var(--color-text-secondary);
  max-width: 62ch;
}

.persona-panel-body {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-10);
  padding: var(--space-8);
}

.pain-list {
  display: grid;
  gap: var(--space-5);
}

.pain {
  display: flex;
  gap: var(--space-4);
}

.pain h4 {
  font-size: 1rem;
  margin-bottom: var(--space-1);
}

.pain p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.pain-stat {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: #7A6000;
  font-size: var(--text-xs);
  font-weight: 700;
}

[data-theme="dark"] .pain-stat {
  background: #3A3100;
  color: #FFE68A;
}

.persona-aside {
  align-self: start;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-4));
}

.persona-aside h4 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.persona-plan {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--color-border);
}

.persona-plan:last-of-type {
  border-bottom: none;
}

.persona-plan .monogram {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  flex: none;
}

.persona-plan-name {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.persona-plan-meta {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.persona-aside .btn {
  width: 100%;
  margin-top: var(--space-5);
}

@media (max-width: 900px) {
  .persona-picker {
    grid-template-columns: 1fr;
  }

  .persona-panel-body {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .persona-aside {
    position: static;
  }
}

/* ═══════════════════════════════════════════════════════
   CHIEF ADVISOR
   ═══════════════════════════════════════════════════════ */
.advisor {
  background: var(--color-surface-ink);
  color: var(--color-on-ink);
  position: relative;
  overflow: hidden;
}

.advisor::before {
  content: '';
  position: absolute;
  width: 60vw;
  height: 60vw;
  top: -20%;
  right: -15%;
  background: var(--gradient-mesh-1);
  opacity: .5;
  pointer-events: none;
}

.advisor .container {
  position: relative;
  z-index: 1;
}

.advisor h2,
.advisor h3,
.advisor h4 {
  color: var(--color-on-ink);
}

.advisor-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-16);
  align-items: center;
}

.advisor-portrait {
  position: relative;
}

.advisor-portrait img {
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, .14);
}

.advisor-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.advisor-chip.top {
  top: var(--space-5);
  left: calc(-1 * var(--space-6));
  animation: float-y 7s ease-in-out infinite;
}

.advisor-chip.bottom {
  bottom: var(--space-8);
  right: calc(-1 * var(--space-5));
  animation: float-y 8.5s ease-in-out infinite reverse;
}

@keyframes float-y {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

.advisor-promises {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-8) 0;
}

.promise {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.promise .icon-tile {
  background: rgba(255, 235, 60, .14);
  color: var(--color-primary);
}

.promise h4 {
  font-size: 1.0625rem;
  margin-bottom: var(--space-1);
}

.promise p {
  color: var(--color-on-ink-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.advisor-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.credential {
  padding: 6px var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-on-ink-muted);
}

@media (max-width: 900px) {
  .advisor-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .advisor-portrait {
    max-width: 320px;
    margin: 0 auto;
  }

  .advisor-chip.top {
    left: 0;
  }

  .advisor-chip.bottom {
    right: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   CLAIM SUPPORT FOR POLICIES BOUGHT ELSEWHERE
   ═══════════════════════════════════════════════════════ */
.orphan-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  background: var(--gradient-brand);
  color: var(--color-ink);
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.orphan-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .14;
  pointer-events: none;
}

.orphan-copy {
  position: relative;
  z-index: 1;
}

.orphan-copy h2 {
  color: var(--color-ink);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.orphan-copy>p {
  font-size: var(--text-lg);
  max-width: 54ch;
  margin-bottom: var(--space-6);
}

.orphan-points {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.orphan-points li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-weight: 600;
  font-size: 0.9375rem;
}

.orphan-points .icon {
  margin-top: 3px;
  color: #0F7B34;
  flex: none;
}

.orphan-visual {
  position: relative;
  z-index: 1;
  background: rgba(11, 18, 32, .9);
  color: var(--color-on-ink);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.orphan-visual h4 {
  color: var(--color-on-ink);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-on-ink-muted);
  margin-bottom: var(--space-4);
}

.orphan-step {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  position: relative;
}

.orphan-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 4px;
  width: 2px;
  background: rgba(255, 255, 255, .16);
}

.orphan-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-ink);
  font-weight: 800;
  font-size: 0.8125rem;
  flex: none;
  position: relative;
  z-index: 1;
}

.orphan-step p {
  font-size: 0.875rem;
  color: var(--color-on-ink-muted);
  line-height: 1.55;
}

.orphan-step strong {
  display: block;
  color: var(--color-on-ink);
  font-size: 0.9375rem;
  margin-bottom: 2px;
}

/* The orphan card always sits on brand yellow, so its buttons are
   pinned to ink regardless of the active theme. */
.btn-dark {
  background: var(--color-ink);
  color: #fff;
}

.btn-dark:hover {
  background: #000;
}

.orphan-copy .btn-outline {
  color: var(--color-ink);
  border-color: rgba(11, 18, 32, .35);
}

.orphan-copy .btn-outline:hover {
  background: rgba(11, 18, 32, .08);
  border-color: var(--color-ink);
}

.orphan-copy .eyebrow.warm {
  background: rgba(11, 18, 32, .1);
  color: var(--color-ink);
}

@media (max-width: 900px) {
  .orphan-card {
    grid-template-columns: 1fr;
    padding: var(--space-8);
    gap: var(--space-8);
  }
}

/* ═══════════════════════════════════════════════════════
   COMPARISON ENGINE
   ═══════════════════════════════════════════════════════ */
.cmp {
  scroll-margin-top: calc(var(--navbar-height) + var(--space-4));
}

/* Product switch + mode tabs */
.cmp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

.segmented {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  gap: 2px;
}

.segmented button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.segmented button[aria-selected="true"] {
  background: var(--color-card-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-subtle);
}

.segmented.ink button[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-ink);
}

/* Filter chips */
.cmp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  align-items: center;
}

.cmp-filters .filter-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-right: var(--space-1);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--color-card-bg);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.chip:hover {
  border-color: var(--color-text-secondary);
  color: var(--color-text);
}

.chip[aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-on-ink);
}

[data-theme="dark"] .chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-ink);
}

.chip-clear {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Plan grid */
.cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  padding: var(--space-6);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
    border-color var(--transition-fast);
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.plan-card.selected {
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .3);
}

.plan-card-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.plan-monogram {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.9375rem;
  flex: none;
}

.plan-insurer {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.plan-name {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  margin-top: 2px;
}

.plan-score {
  margin-left: auto;
  text-align: center;
  flex: none;
}

.plan-score-value {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
}

.plan-score-max {
  font-size: 0.625rem;
  color: var(--color-text-secondary);
  font-weight: 600;
}

.plan-tagline {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-6);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-primary);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.plan-sub {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}

.plan-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-block: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.plan-metric-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-secondary);
  font-weight: 700;
}

.plan-metric-value {
  font-size: 1rem;
  font-weight: 800;
  margin-top: 2px;
}

.plan-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.plan-tag {
  padding: 3px var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.plan-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: auto;
}

.plan-actions .btn {
  flex: 1;
  padding-inline: var(--space-4);
}

.btn-ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}

.btn-ghost:hover {
  border-color: var(--color-primary-dark);
}

.btn-ghost[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-on-ink);
  border-color: var(--color-ink);
}

.cmp-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
}

/* Compare tray (sticky footer while selecting) */
.cmp-tray {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translate(-50%, 200%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-ink);
  box-shadow: var(--shadow-hover);
  transition: transform .4s var(--ease-spring);
  max-width: calc(100vw - var(--space-8));
}

.cmp-tray.open {
  transform: translate(-50%, 0);
}

.cmp-tray-count {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.cmp-tray-count strong {
  color: var(--color-primary);
}

.cmp-tray-chips {
  display: flex;
  gap: var(--space-2);
}

.cmp-tray-chip {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #fff;
  position: relative;
}

/* The remove button used to sit on a saturated tile. Now that the chip is
   a white logo plate the button is white-on-white where they overlap, so
   it needs its own edge to stay findable. */
.cmp-tray-chip.has-logo button {
  box-shadow: 0 0 0 1px var(--color-ink);
}

.cmp-tray-chip button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--color-on-ink);
  color: var(--color-ink);
  font-size: 10px;
  line-height: 1;
  display: grid;
  place-items: center;
  font-weight: 800;
}

@media (max-width: 600px) {
  .cmp-tray {
    width: calc(100vw - var(--space-6));
    justify-content: space-between;
    padding-left: var(--space-4);
  }

  .cmp-tray-count {
    font-size: 0.8125rem;
  }
}

/* ── Side-by-side matrix ─────────────────────────────── */
.cmp-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
  -webkit-overflow-scrolling: touch;
}

.cmp-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 640px;
}

.cmp-matrix th,
.cmp-matrix td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
  vertical-align: middle;
}

/* Pinned first column so labels stay visible on mobile */
.cmp-matrix th:first-child,
.cmp-matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--color-card-bg);
  border-right: 1px solid var(--color-border);
  min-width: 190px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cmp-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--color-surface);
  vertical-align: bottom;
}

.cmp-matrix thead th:first-child {
  z-index: 4;
  background: var(--color-surface);
}

.cmp-col-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 170px;
}

.cmp-col-head .plan-monogram {
  width: 38px;
  height: 38px;
  font-size: 0.8125rem;
}

.cmp-col-head .plan-name {
  font-size: 0.9375rem;
}

.cmp-matrix tbody tr:hover td {
  background: var(--color-surface);
}

.cmp-matrix tbody tr:hover td:first-child {
  background: var(--color-surface);
}

.cmp-cell-best {
  font-weight: 800;
  color: #0F7B34;
}

[data-theme="dark"] .cmp-cell-best {
  color: #4ADE80;
}

.cmp-cell-best::after {
  content: ' ★';
  font-size: 0.75em;
  color: var(--color-primary-dark);
}

.cmp-row-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cmp-help {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  font-size: 9px;
  font-weight: 800;
  display: grid;
  place-items: center;
  cursor: help;
  color: var(--color-text-secondary);
  flex: none;
}

.cmp-yes {
  color: var(--color-accent-success);
  font-weight: 700;
}

.cmp-no {
  color: var(--color-text-secondary);
}

.cmp-matrix-note {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

/* ── Premium table ───────────────────────────────────── */
.premium-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-6);
}

.premium-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: 0.875rem;
}

.premium-table th,
.premium-table td {
  padding: var(--space-3) var(--space-4);
  text-align: right;
  border-bottom: 1px solid var(--color-border);
}

.premium-table th:first-child,
.premium-table td:first-child {
  text-align: left;
  font-weight: 600;
  position: sticky;
  left: 0;
  background: var(--color-card-bg);
}

.premium-table thead th {
  background: var(--color-surface);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-secondary);
}

.premium-table thead th:first-child {
  background: var(--color-surface);
}

/* Insurer mark + name in the premium column heads. `justify-content:
   flex-end` because the numeric columns are right-aligned. */
.premium-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
}

.premium-table td.cheapest {
  font-weight: 800;
  color: #0F7B34;
  background: rgba(16, 185, 129, .08);
}

[data-theme="dark"] .premium-table td.cheapest {
  color: #4ADE80;
}

/* ── Insurer league table ────────────────────────────── */
.league {
  margin-top: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.league-row {
  display: grid;
  grid-template-columns: 28px 1.6fr repeat(3, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
}

.league-row:last-child {
  border-bottom: none;
}

.league-row.head {
  background: var(--color-surface);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.league-rank {
  font-weight: 800;
  color: var(--color-text-secondary);
}

.league-name {
  font-weight: 700;
}

/* The insurer column carries a brand tile beside the name + score bar.
   The head row is indented by the same amount so the labels still line
   up with the names below them. */
.league-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.league-brand-text {
  flex: 1;
  min-width: 0;
}

.league-row.head .league-head-insurer {
  padding-left: calc(26px + var(--space-3));
}

.league-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
  margin-top: 5px;
}

.league-bar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  width: 0;
  transition: width 1s var(--ease-out);
}

@media (max-width: 700px) {
  .league-row {
    grid-template-columns: 24px 1.4fr 1fr;
  }

  .league-row .hide-sm {
    display: none;
  }
}

/* ── Methodology ─────────────────────────────────────── */
.methodology {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.method-card {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
}

.method-weight {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-accent);
}

.method-card h4 {
  font-size: 0.9375rem;
  margin: var(--space-1) 0 var(--space-2);
}

.method-card p {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ── Deep-dive shell ─────────────────────────────────── */
.cmp-deepdive-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.cmp-panel {
  display: none;
}

.cmp-panel.active {
  display: block;
  animation: panel-in .4s var(--ease-out) both;
}

.cmp-subsection {
  margin-top: var(--space-16);
}

.cmp-subsection>h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.cmp-subsection>p.sub {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  max-width: 68ch;
}

/* ── Sticky mobile contact bar ───────────────────────── */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: none;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-card-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .1);
}

.sticky-cta .btn {
  flex: 1;
}

.btn-whatsapp {
  background: #25D366;
  color: #06301A;
}

.btn-whatsapp:hover {
  background: #1EBE5A;
}

@media (max-width: 768px) {
  .sticky-cta {
    display: flex;
  }

  body {
    padding-bottom: 76px;
  }

  .cmp-tray {
    bottom: 84px;
  }
}

/* ── Bento grid for the experience section ───────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.bento-item {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  padding: var(--space-6);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.bento-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.bento-item h3 {
  font-size: 1.0625rem;
  margin: var(--space-4) 0 var(--space-2);
}

.bento-item p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.bento-item.wide {
  grid-column: span 2;
}

.bento-item.ink {
  background: var(--color-surface-ink);
  border-color: transparent;
  color: var(--color-on-ink);
}

.bento-item.ink h3 {
  color: var(--color-on-ink);
}

.bento-item.ink p {
  color: var(--color-on-ink-muted);
}

.bento-item.ink .icon-tile {
  background: rgba(255, 235, 60, .14);
  color: var(--color-primary);
}

@media (max-width: 900px) {
  .bento {
    grid-template-columns: 1fr;
  }

  .bento-item.wide {
    grid-column: span 1;
  }
}