/* ==========================================================================
   Organic Growth Model Comparison — Figma frame-y 6569→7699 (1130 tall)

   A blueprint-frame illustration with a white panel set inside it, carrying a
   four-column comparison grid. Columns are 220 / 260 / 260 / 265 on 16 gaps;
   the header is 70 tall and every data row 72, on 30 gaps. All from 252:1062.
   ========================================================================== */

.gw-cmp {
  position: relative;
  background: var(--gw-white);
  overflow: clip;
  container-type: inline-size;
}

.gw-cmp__stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  height: calc(1130 * var(--u));
  --u: min(1px, calc(100cqw / 1440));
}
.gw-cmp__stage > * { position: absolute; }

/* the technical drawing the whole thing is set into (252:1063) */
.gw-cmp__frame {
  top: calc(121 * var(--u)); left: 0;
  width: calc(1440 * var(--u)); height: calc(1081 * var(--u));
  /* the image FILL is set to 20% in Figma, not the node — the export comes out
     at full strength, so the drop has to happen here */
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}

/* the paper the table is printed on (252:1064) */
.gw-cmp__panel {
  top: calc(288 * var(--u)); left: calc(233 * var(--u));
  width: calc(1033 * var(--u)); height: calc(759 * var(--u));
  background: #FDFDFD;
  z-index: 1;
}

.gw-cmp__content {
  top: calc(308 * var(--u)); left: 0;
  width: calc(1440 * var(--u));
  z-index: 2;
}

/* ---- heading (252:1068) -------------------------------------------------- */
.gw-cmp__head { text-align: center; }
.gw-cmp__eyebrow {
  font-family: var(--gw-font-body);
  font-weight: 600;
  font-size: calc(14 * var(--u));
  line-height: calc(16.9 * var(--u));
  letter-spacing: calc(1 * var(--u));
  text-transform: uppercase;
  color: #2563EB;
}
.gw-cmp__title {
  margin-top: calc(12 * var(--u));
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: calc(32 * var(--u));
  line-height: calc(41.6 * var(--u));
  color: #2D2D2D;
}

/* ---- the grid (252:1071) ------------------------------------------------- */
.gw-cmp__table {
  /* placed, not centred: auto-centring lands on 193.5 against the comp's 194 */
  margin: calc(56.5 * var(--u)) 0 0 calc(194 * var(--u));
  width: calc(1053 * var(--u));
}
.gw-cmp__thead,
.gw-cmp__tr {
  display: grid;
  grid-template-columns:
    calc(220 * var(--u)) calc(260 * var(--u)) calc(260 * var(--u)) calc(265 * var(--u));
  column-gap: calc(16 * var(--u));
}
.gw-cmp__tr { margin-top: calc(30 * var(--u)); }

/* header cells (252:1072) */
.gw-cmp__th {
  height: calc(70 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(9 * var(--u));
  background: var(--gw-white);
  box-shadow: inset 0 0 0 1px #E5E7EB;
}
.gw-cmp__th.is-pick {
  background: var(--gw-violet);
  box-shadow: none;
}
.gw-cmp__model {
  font-family: var(--gw-font-body);
  font-weight: 700;
  font-size: calc(11 * var(--u));
  line-height: calc(13.3 * var(--u));
  letter-spacing: calc(0.88 * var(--u));
  color: #475569;
}
.gw-cmp__name {
  font-family: var(--gw-font-body);
  font-weight: 700;
  font-size: calc(16 * var(--u));
  line-height: calc(19.4 * var(--u));
  color: #24292F;
}
/* the first column's header is a lone label, not a model */
.gw-cmp__name--feature {
  font-weight: 800;
  font-size: calc(13 * var(--u));
  line-height: calc(15.7 * var(--u));
  color: #2D2D2D;
}
.gw-cmp__th.is-pick .gw-cmp__model { color: var(--gw-white); }
.gw-cmp__th.is-pick .gw-cmp__name { font-weight: 900; color: var(--gw-white); }

/* data cells */
.gw-cmp__cell {
  height: calc(72 * var(--u));
  padding: calc(24 * var(--u)) calc(16 * var(--u));
  font-family: var(--gw-font-body);
  font-weight: 400;
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  color: #475569;
}
.gw-cmp__cell.is-wash { background: #F2F2F2; }

.gw-cmp__cell--feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(6 * var(--u));
  padding-block: calc(16 * var(--u));
}
.gw-cmp__num {
  font-weight: 700;
  font-size: calc(11 * var(--u));
  line-height: calc(13.3 * var(--u));
  color: #94A3B8;
}
.gw-cmp__label {
  font-weight: 800;
  font-size: calc(14 * var(--u));
  line-height: calc(19.6 * var(--u));
  color: #2D2D2D;
}

/* the recommended column (252:1092 …) */
.gw-cmp__cell--pick {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  /* the comp runs this label to the cell's own right edge (252:1109 ends on
     1247, the cell's edge) — a right padding rewraps the longest one */
  padding-right: 0;
  background: #F5F3FF;
  font-weight: 800;
  font-size: calc(13 * var(--u));
  line-height: calc(18.2 * var(--u));
  color: var(--gw-violet);
}
.gw-cmp__icon {
  flex: none;
  display: block;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  color: var(--gw-violet);
}
.gw-cmp__icon svg { display: block; width: 100%; height: 100%; }

/* ---- disclaimer (252:1136) ---------------------------------------------- */
.gw-cmp__note {
  margin: calc(114 * var(--u)) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  font-family: var(--gw-font-body);
  font-weight: 400;
  font-size: calc(13 * var(--u));
  line-height: calc(15.7 * var(--u));
  color: #475569;
}
.gw-cmp__note-icon {
  flex: none;
  display: block;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  color: #2563EB;
}
.gw-cmp__note-icon svg { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   Responsive: the blueprint frame is desktop dressing. Below it the table
   becomes stacked cards, one model per block, so nothing has to scroll.
   ========================================================================== */
@media (max-width: 1099px) {
  .gw-cmp__stage {
    height: auto; --u: 1px;
    padding: clamp(2.5rem, 6vw, 4rem) var(--gw-gutter) clamp(3rem, 7vw, 4.5rem);
  }
  .gw-cmp__stage > * { position: static; }
  .gw-cmp__frame, .gw-cmp__panel { display: none; }
  .gw-cmp__content { width: 100%; }
  .gw-cmp__title { font-size: clamp(1.375rem, 3.6vw, 2rem); line-height: 1.3; }
  .gw-cmp__table { width: 100%; max-width: 44rem; margin: 2rem auto 0; }

  .gw-cmp__thead { display: none; }
  .gw-cmp__tr {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 1.25rem;
    box-shadow: inset 0 0 0 1px #E5E7EB;
    border-radius: 0.5rem;
    overflow: hidden;
  }
  .gw-cmp__cell {
    height: auto;
    min-height: 0;
    padding: 0.875rem 1rem;
  }
  /* label every stacked cell with the model it belongs to */
  .gw-cmp__tr .gw-cmp__cell:not(.gw-cmp__cell--feature)::before {
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: #94A3B8;
  }
  .gw-cmp__tr .gw-cmp__cell:nth-child(2)::before { content: 'Single SEO Employee'; }
  .gw-cmp__tr .gw-cmp__cell:nth-child(3)::before { content: 'Traditional Agency'; }
  .gw-cmp__tr .gw-cmp__cell:nth-child(4)::before { content: 'Gowishy'; color: var(--gw-violet); }
  .gw-cmp__cell--feature { background: #F2F2F2; padding-block: 0.75rem; }
  .gw-cmp__cell--pick { display: block; }
  .gw-cmp__cell--pick .gw-cmp__icon { display: inline-block; vertical-align: -0.3em; margin-right: 0.375rem; width: 1.125rem; height: 1.125rem; }
  .gw-cmp__note { margin-top: 2rem; text-align: left; align-items: flex-start; }
}