/* =====================================================================
   FIRST HOLD v2 · 09 COMPARE (modules/compare/compare.css)
   "Better than a template. Half the price of an agency."
   A real <table>, lit like a set: three columns stand in the dark, Big
   Bad's column is a raised slab of warm First Light. Structure comes from
   tone, spacing, a shared baseline and depth. No hairlines, no ticks, no
   bordered cells. Namespaced under #compare / .cmp-; site.css tokens only.
   The final (fully lit) state is the CSS default; compare.js only stages
   the light coming up (--lit, --them-a and opacity).
   ===================================================================== */

#compare {
  padding: clamp(130px, 18vh, 220px) 0 clamp(110px, 15vh, 190px);
}

/* ---------- head ---------- */
#compare .cmp-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-bottom: clamp(52px, 7.5vh, 92px);
}
#compare .cmp-h { grid-column: 1 / span 11; }

/* ---------- the stage ---------- */
#compare .cmp-stage {
  /* column plan (desktop): label · three competitors · First Hold */
  --cmp-label: 32%;
  --cmp-them: 13.667%;
  --cmp-bb: 27%;
  --cmp-gap: 16px;                          /* air between the row bands and the slab */
  --cmp-hang: clamp(16px, 1.7vw, 26px);     /* row bands hang into the margin; labels align with the headline */
  --cmp-lift: clamp(22px, 2.4vw, 36px);     /* the slab reaches past the first and last rows */
  --cmp-pad: 12px;
  --cmp-bb-pad: clamp(22px, 2.2vw, 32px);
  /* the light. 1 = fully lit (final). compare.js tweens these. */
  --lit: 1;
  --them-a: .6;
  position: relative; isolation: isolate;
  margin-left: calc(var(--cmp-hang) * -1);
  padding: var(--cmp-lift) 0;
}

/* ---------- the slab (decorative, aria-hidden) ---------- */
#compare .cmp-slab {
  position: absolute; z-index: 0; top: 0; bottom: 0; right: 0;
  width: calc(var(--cmp-bb) - var(--cmp-gap));
  border-radius: 28px;
  pointer-events: none;
}
#compare .cmp-slab > i { position: absolute; display: block; border-radius: inherit; }
/* warm ambient spill: the slab lighting the room around it, and a pool on the floor */
#compare .cmp-slab__spill {
  inset: -16% -58% -22%;
  border-radius: 50% !important;
  background:
    radial-gradient(30% 36% at 50% 30%, rgba(243, 200, 150, .14), rgba(227, 139, 63, .05) 56%, rgba(227, 139, 63, 0) 80%),
    radial-gradient(36% 46% at 50% 56%, rgba(243, 217, 177, .06), rgba(243, 217, 177, 0) 76%),
    radial-gradient(26% 7% at 50% 86%, rgba(243, 200, 150, .12), rgba(243, 200, 150, 0) 80%);
  opacity: var(--lit);
}
/* the slab itself, unlit: a raised surface in the dark (neutral, so the warm light reads warm) */
#compare .cmp-slab__base {
  inset: 0;
  background: linear-gradient(180deg, #24222A, #1D1D25);
  box-shadow:
    0 70px 150px -50px rgba(0, 0, 0, .8),
    0 30px 60px -36px rgba(0, 0, 0, .6);
}
/* the light: a warm key from above that falls off down the slab, with a
   little bounce under the price. --lit feathers it on from the top. */
#compare .cmp-slab__light {
  inset: 0;
  background:
    radial-gradient(95% 24% at 50% 0%, rgba(255, 220, 176, .5), rgba(246, 190, 130, .15) 56%, rgba(246, 190, 130, 0) 88%),
    radial-gradient(130% 55% at 50% 2%, rgba(243, 190, 130, .16), rgba(243, 190, 130, 0) 70%),
    radial-gradient(80% 20% at 50% 90%, rgba(243, 195, 140, .17), rgba(243, 195, 140, 0) 80%),
    linear-gradient(180deg, rgba(246, 205, 160, .2) 0%, rgba(236, 190, 145, .11) 30%, rgba(226, 180, 135, .075) 62%, rgba(226, 180, 135, .1) 100%);
  box-shadow:
    0 0 140px -36px rgba(243, 200, 150, .4),
    inset 0 60px 100px -70px rgba(255, 236, 210, .42);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--lit) * 135% - 35%), rgba(0, 0, 0, 0) calc(var(--lit) * 135%));
  mask-image: linear-gradient(to bottom, #000 calc(var(--lit) * 135% - 35%), rgba(0, 0, 0, 0) calc(var(--lit) * 135%));
}

/* ---------- the table ---------- */
#compare .cmp-table {
  position: relative; z-index: 1;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate; border-spacing: 0;
  font-family: var(--sans);
}
#compare .cmp-col-label { width: var(--cmp-label); }
#compare .cmp-col-them  { width: var(--cmp-them); }
#compare .cmp-col-bb    { width: var(--cmp-bb); }

/* base cell (kept at low specificity so every rule below can refine it) */
#compare .cmp-table :where(th, td) {
  position: relative;
  padding: clamp(18px, 2.4vh, 22px) var(--cmp-pad);
  text-align: left;
  font-weight: 400;
  vertical-align: baseline;   /* every row shares one baseline: that's the grid */
}
#compare .cmp-tag { display: none; }   /* column tags: mobile only */
#compare .cmp-nw { white-space: nowrap; }

/* rows are held by spacing and the shared baseline. Pointing at one lays a
   soft band of tone under it that stops short of the lit column.
   (Cell backgrounds: a pseudo-element on <tr> would become a table cell.) */
#compare tbody .cmp-row > :not(.cmp-bb) { transition: background-color .7s var(--silk); }
#compare tbody .cmp-label { border-radius: 20px 0 0 20px; }
#compare tbody .cmp-label ~ .cmp-them:nth-child(4) { border-radius: 0 20px 20px 0; }

/* row labels: the questions */
#compare .cmp-label {
  padding-left: var(--cmp-hang);
  padding-right: 20px;
  font-size: clamp(16px, 1.2vw, 17.5px);
  font-weight: 450;
  line-height: 1.35;
  color: var(--bone-80);
  text-wrap: balance;
  transition: color .6s var(--silk);
}

/* the three in the dark */
#compare .cmp-them {
  color: rgba(236, 231, 223, var(--them-a));
  font-size: clamp(15px, 1.1vw, 16px);
  line-height: 1.4;
  text-wrap: balance;
}
#compare .cmp-them .cmp-v { transition: color .6s var(--silk); }

/* First Hold: in the light */
#compare .cmp-bb {
  padding-left: calc(var(--cmp-gap) + var(--cmp-bb-pad));
  padding-right: calc(var(--cmp-bb-pad) * .7);
  color: var(--bone);
  font-size: clamp(16px, 1.32vw, 19px);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}
#compare .cmp-bb b { font-weight: 600; color: var(--first); }

/* ---------- column headers: Big Shoulders caps, the billing block ---------- */
#compare .cmp-table thead :where(th, td) {
  vertical-align: bottom;
  padding-top: clamp(26px, 3.2vh, 34px);
  padding-bottom: clamp(40px, 5vh, 50px);
}
#compare .cmp-colh {
  display: block;
  font-family: var(--display), 'Big Shoulders Display Variable', 'Big Shoulders Display', Impact, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .012em;
  font-synthesis: none;
}
#compare thead .cmp-them .cmp-colh { font-size: clamp(22px, 2vw, 30px); line-height: .92; }
#compare .cmp-colsub {
  position: absolute; left: var(--cmp-pad); right: var(--cmp-pad);
  top: calc(100% - clamp(40px, 5vh, 50px) + 9px);
  font-size: 13px; line-height: 1.35; font-weight: 400; letter-spacing: 0;
}
#compare thead .cmp-bb .cmp-colh {
  font-size: clamp(44px, 4.6vw, 74px);
  line-height: .84;
  letter-spacing: .02em;
  color: var(--first);
  text-shadow: 0 0 40px rgba(243, 217, 177, .28);
}

/* ---------- the bottom line ---------- */
#compare .cmp-table .cmp-row--price > * {
  padding-top: clamp(44px, 5.6vh, 56px);
  padding-bottom: clamp(28px, 3.8vh, 40px);
}
#compare .cmp-row--price .cmp-label { color: var(--bone); font-weight: 500; }
#compare .cmp-num {
  font-family: var(--display), 'Big Shoulders Display Variable', 'Big Shoulders Display', Impact, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-variant-numeric: lining-nums;
  font-synthesis: none;
  white-space: nowrap;
}
#compare .cmp-them .cmp-num {
  font-size: clamp(28px, 2.7vw, 42px);
  line-height: .92;
}
#compare .cmp-num--range { white-space: normal; }   /* breaks only at the dash */
#compare .cmp-per { font-size: 15px; letter-spacing: 0; }
#compare .cmp-plus { display: block; margin-top: 10px; font-size: 14px; line-height: 1.35; }
#compare .cmp-row--price .cmp-bb .cmp-v { position: relative; display: inline-block; }
#compare .cmp-from {
  position: absolute; left: .1em; bottom: 100%; margin-bottom: 14px;
  font-size: 15px; font-weight: 500; line-height: 1;
  color: var(--bone-80);
}
#compare .cmp-num--bb {
  display: inline-block;
  font-size: clamp(64px, 6.7vw, 112px);
  line-height: .8;
  letter-spacing: .006em;
  color: var(--first);
  text-shadow: 0 0 60px rgba(243, 217, 177, .3);
}

/* ---------- pointing at a row: the light leans toward it ---------- */
#compare .cmp-bb::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 4px 10px 4px calc(var(--cmp-gap) + 10px);
  border-radius: 18px;
  background: radial-gradient(closest-side, rgba(255, 228, 196, .11), rgba(243, 217, 177, .04) 60%, rgba(243, 217, 177, 0));
  opacity: 0;
  transition: opacity .7s var(--silk);
}
@media (hover: hover) and (min-width: 900px) {
  #compare tbody .cmp-row:not(.cmp-row--price):hover > :not(.cmp-bb) { background-color: rgba(236, 231, 223, .045); }
  #compare tbody .cmp-row:hover .cmp-label { color: var(--bone); }
  #compare tbody .cmp-row:hover .cmp-them .cmp-v { color: rgba(236, 231, 223, .8); }
  #compare tbody .cmp-row:not(.cmp-row--price):hover .cmp-bb::after { opacity: 1; }
}

#compare .cmp-note { max-width: 46em; margin-top: clamp(36px, 5vh, 56px); }

/* ---------- mid widths ---------- */
@media (max-width: 1199px) and (min-width: 900px) {
  #compare .cmp-stage { --cmp-label: 26%; --cmp-them: 15%; --cmp-bb: 29%; }
  #compare .cmp-them .cmp-num { font-size: clamp(22px, 2.4vw, 30px); }
  #compare .cmp-per { font-size: 13px; }
  #compare .cmp-num--bb { font-size: clamp(56px, 6.5vw, 76px); }
  #compare thead .cmp-them .cmp-colh { font-size: clamp(20px, 2.1vw, 26px); }
  #compare .cmp-colsub { font-size: 12.5px; }
}

/* =====================================================================
   MOBILE (≤ 899 px): one comparison per row. The question, First Hold's
   answer on its own small lit card, the other three quietly underneath.
   The markup keeps explicit ARIA table roles, so changing `display`
   doesn't strip the table semantics.
   ===================================================================== */
@media (max-width: 899px) {
  #compare { padding: clamp(110px, 15vh, 150px) 0 clamp(96px, 13vh, 130px); }
  #compare .cmp-head { margin-bottom: 48px; }
  #compare .cmp-h { grid-column: 1 / -1; }

  #compare .cmp-stage { margin-left: 0; padding: 0; max-width: 640px; }
  #compare .cmp-slab { display: none; }

  #compare .cmp-table,
  #compare .cmp-table tbody,
  #compare .cmp-table tr,
  #compare .cmp-table th,
  #compare .cmp-table td { display: block; }
  #compare .cmp-table colgroup { display: none; }
  /* the column headers live on as tags inside each row; keep them for AT */
  #compare .cmp-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  #compare .cmp-table :where(th, td) { padding: 0; }

  #compare tbody .cmp-row {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
  }
  #compare tbody .cmp-row + .cmp-row { margin-top: 46px; }
  #compare tbody .cmp-row > * { border-radius: 0; }

  #compare .cmp-label {
    grid-column: 1 / -1; order: 0;
    margin-bottom: 14px;
    padding: 0 4px;
    font-size: 17px; font-weight: 500; line-height: 1.3;
    color: var(--bone);
  }

  #compare .cmp-tag {
    display: block;
    margin-bottom: 6px;
    font-family: var(--display), 'Big Shoulders Display Variable', 'Big Shoulders Display', Impact, sans-serif;
    font-weight: 800;
    font-size: 15px; line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-synthesis: none;
  }

  /* First Hold's answer: its own small lit slab */
  #compare tbody .cmp-bb {
    grid-column: 1 / -1; order: 1;
    isolation: isolate;
    margin-bottom: 16px;
    padding: 18px 20px 19px;
    border-radius: 20px;
    background: linear-gradient(180deg, #24222A, #1D1D25);
    box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .8);
    font-size: 18px;
  }
  #compare tbody .cmp-bb::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    border-radius: inherit;
    background:
      radial-gradient(70% 120% at 10% 0%, rgba(255, 220, 176, .34), rgba(246, 190, 130, .1) 58%, rgba(246, 190, 130, 0) 88%),
      linear-gradient(180deg, rgba(246, 205, 160, .16), rgba(226, 180, 135, .09));
    box-shadow: 0 0 70px -22px rgba(243, 200, 150, .36);
    -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--lit) * 140% - 40%), rgba(0, 0, 0, 0) calc(var(--lit) * 140%));
    mask-image: linear-gradient(100deg, #000 calc(var(--lit) * 140% - 40%), rgba(0, 0, 0, 0) calc(var(--lit) * 140%));
  }
  #compare tbody .cmp-bb::after { display: none; }
  #compare .cmp-bb .cmp-tag { margin-bottom: 7px; font-size: 16px; color: var(--first); }
  /* the first card names the convention; after that the lit card is First Hold (the price card says it again) */
  #compare tbody .cmp-row:not(:first-child):not(.cmp-row--price) .cmp-bb .cmp-tag { display: none; }

  #compare tbody .cmp-them {
    order: 2;
    padding: 0 4px;
    font-size: 15px; line-height: 1.35;
  }

  /* the bottom line */
  #compare tbody .cmp-row--price { margin-top: 56px; }
  #compare .cmp-table .cmp-row--price > * { padding-top: 0; padding-bottom: 0; }
  #compare tbody .cmp-row--price .cmp-bb { padding: 18px 20px 20px; }
  #compare .cmp-row--price .cmp-bb .cmp-tag { margin-bottom: 20px; }
  #compare .cmp-row--price .cmp-bb .cmp-v { display: block; }
  #compare .cmp-from { position: static; display: inline; margin: 0 .4em 0 0; font-size: 15px; }
  #compare .cmp-num--bb { font-size: clamp(60px, 18vw, 84px); line-height: .82; vertical-align: baseline; }
  #compare .cmp-them .cmp-num { font-size: clamp(24px, 6.8vw, 30px); }
  #compare .cmp-per { font-size: 13px; }
  #compare .cmp-plus { margin-top: 6px; font-size: 13px; }

  #compare .cmp-note { margin-top: 44px; max-width: 640px; font-size: 14px; }
}

@media (max-width: 360px) {
  #compare tbody .cmp-row { column-gap: 8px; }
  #compare tbody .cmp-them { font-size: 14px; }
  #compare .cmp-tag { font-size: 14px; }
}