/* ============================================================================
   Home page: "The solution" — one product, argued for properly.
   ----------------------------------------------------------------------------
   Three columns: the claim, the object, the evidence. Nothing here introduces a
   colour the page does not already use — cream, forest, sand, the orange the
   site keeps for arrows and stamps.
   ========================================================================== */

.sol-band {
  --sol-forest: #22392c;
  --sol-muted: rgba(34, 57, 44, 0.62);
  --sol-hair: rgba(34, 57, 44, 0.16);
  --sol-orange: #e8663a;
  --sol-sand: #efeade;
  /* Tucked up under the category board: the two bands argue with each other,
     and two 76px paddings in a row turned that argument into a pause. */
  padding-top: clamp(10px, 1.4vw, 22px);
}

.sol-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.98fr) minmax(0, 0.88fr);
  gap: clamp(20px, 2.6vw, 42px);
  /* stretch, so the evidence column is the same height as the product card
     instead of stopping 140px short and leaving a hole on the right. */
  align-items: stretch;
}

/* --------------------------------------------------------------- the claim */

.sol-band__copy {
  padding-top: 4px;
}

.sol-band .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.sol-band .eyebrow::after {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.sol-band .sol-band__title {
  margin: 14px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 3.5vw, 50px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--sol-forest);
  /* Without this the browser breaks after "Every" and leaves "stubborn lid."
     on its own line — the sentence, not the column, decides where it breaks. */
  text-wrap: balance;
}

.sol-band .sol-band__title em {
  font-style: italic;
}

/* A short rule under the headline, split two-thirds orange. The reference did
   this and it does a job: it stops a two-line serif headline from floating over
   the paragraph below. */
.sol-band .sol-band__title::after {
  content: "";
  display: block;
  width: 84px;
  height: 2px;
  margin-top: 20px;
  background: linear-gradient(90deg, var(--sol-orange) 0 62%, var(--sol-hair) 62% 100%);
}

.sol-band__lede {
  max-width: 34ch;
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--sol-muted);
}

/* ---------------------------------------------------------------- the stamps */

.sol-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.sol-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 84px;
  text-align: center;
}

.sol-badge__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--sol-hair);
  border-radius: 50%;
  color: var(--sol-forest);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.sol-badge__mark svg {
  width: 21px;
  height: 21px;
  display: block;
}

.sol-badge:hover .sol-badge__mark {
  background: rgba(34, 57, 44, 0.05);
  border-color: rgba(34, 57, 44, 0.34);
}

.sol-badge__label {
  font-size: 11px;
  line-height: 1.35;
  color: var(--sol-muted);
  /* Two lines reserved: "No strength needed" wraps at this width and used to
     leave the three stamps sitting on three different baselines. */
  min-height: 2.7em;
}

/* ------------------------------------------------------------------- the act */

.sol-band__act {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--sol-hair);
}

.sol-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--sol-forest);
  color: #f7f4ea;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sol-cta span {
  transition: transform 0.2s ease;
}

.sol-cta:hover,
.sol-cta:focus-visible {
  background: #1a2c22;
  outline: none;
}

.sol-cta:hover span {
  transform: translateX(3px);
}

.sol-band__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  color: var(--sol-forest);
}

/* The product's own one-line slogan, set as an editorial aside rather than as
   a label: upper-cased with tracking it read like a serial number. */
.sol-band__price span {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sol-muted);
}

/* ---------------------------------------------------------------- the object */

.sol-stage {
  position: relative;
  display: block;
  padding: clamp(16px, 2vw, 28px);
  background: var(--sol-sand);
  border: 1px solid rgba(34, 57, 44, 0.08);
  border-radius: 20px;
  color: var(--sol-forest);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sol-stage:hover,
.sol-stage:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(34, 57, 44, 0.26);
  box-shadow: 0 22px 36px -30px rgba(24, 42, 32, 0.75);
  outline: none;
}

.sol-stage__cat {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.78);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(34, 57, 44, 0.6);
}

.sol-stage__frame {
  display: block;
  aspect-ratio: 1 / 1;
}

.sol-stage__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sol-stage__glyph {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  font-size: 120px;
  color: var(--sol-orange);
}

.sol-stage__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(34, 57, 44, 0.12);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.sol-stage__name span {
  font-size: 13px;
  color: var(--sol-orange);
  transition: transform 0.22s ease;
}

.sol-stage:hover .sol-stage__name span {
  transform: translate(3px, -3px);
}

/* -------------------------------------------------------------- the evidence */

.sol-notes {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Equal heights, so the column ends exactly where the product card ends. */
  grid-auto-rows: 1fr;
}

/* Grid, not flex: `align-content: center` centres the row inside a card that is
   taller than its text, while `align-items: start` keeps the number on the same
   line as the heading. With flex, centring the body dropped the number into the
   gap between heading and description. */
.sol-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  align-content: center;
  column-gap: 15px;
  padding: 20px 19px;
  background: #fffdf8;
  border: 1px solid var(--sol-hair);
  border-radius: 14px;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.sol-note:hover {
  background: #ffffff;
  border-color: rgba(34, 57, 44, 0.3);
  transform: translateX(3px);
}

.sol-note__no {
  flex: 0 0 auto;
  padding-top: 4px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  line-height: 1;
  color: rgba(34, 57, 44, 0.42);
  font-variant-numeric: tabular-nums;
}

.sol-note__body strong {
  display: block;
  margin-bottom: 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18.5px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--sol-forest);
}

.sol-note__body span {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sol-muted);
}

/* A band with no evidence cards keeps the two-column shape rather than leaving
   a third of the row empty. */
.sol-band--bare .sol-band__grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: center;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1120px) {
  .sol-band__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(22px, 3vw, 38px);
  }

  /* The copy column is half the page here. The button plus "$18.00 GRIP. MEET
     LID" no longer fit on one line, and the price dropped to a line of its own
     looking like a headline. The tag goes, the price stays beside the button. */
  .sol-band__act {
    gap: 14px;
  }

  .sol-band__price span {
    display: none;
  }

  /* The evidence moves under both columns and becomes a row of three, which is
     how it reads on the reference anyway. */
  .sol-notes {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .sol-note {
    grid-template-columns: 1fr;
    align-content: start;
    row-gap: 7px;
  }

  .sol-note__no {
    padding-top: 0;
  }

  .sol-note:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 760px) {
  .sol-band__grid {
    grid-template-columns: 1fr;
  }

  .sol-band .sol-band__title {
    font-size: clamp(28px, 7.4vw, 38px);
  }

  .sol-band__lede {
    max-width: none;
    font-size: 14px;
  }

  .sol-badges {
    gap: 10px;
    margin-top: 24px;
  }

  .sol-badge {
    width: 78px;
  }

  .sol-band__act {
    gap: 14px;
    margin-top: 26px;
  }

  .sol-notes {
    grid-template-columns: 1fr;
  }

  .sol-note {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    padding: 17px 18px;
  }

  .sol-note__no {
    padding-top: 4px;
  }
}

@media (max-width: 420px) {
  .sol-badge {
    width: 72px;
  }

  .sol-badge__mark {
    width: 40px;
    height: 40px;
  }

  .sol-badge__label {
    font-size: 10.5px;
  }
}