/* SimplyAnswered — showcase hero (24 Sep 2026; -4 on 3 Nov 2026 shows the
   trial line on phones). Layers on top of experience-20260922-3.css. Uses that file's tokens
   (--violet #6555d9, --text #222, --bg-tint #f7f7f7, --radius 24px) rather
   than introducing new ones, so the hero stays in step if the palette moves.

   The hero becomes a centred column with a three-card row beneath it:
   photo · live call preview · photo. */

/* ---------- Centred hero column ---------- */
.hero--showcase .hero__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  justify-items: center;
}
.hero--showcase .hero__copy {
  max-width: 52rem;
  text-align: center;
}
/* Slightly smaller than the base sheet's clamp so the headline sets on two
   lines at desktop widths rather than three - the second line is the promise,
   and breaking it in half costs it. */
.hero--showcase h1 {
  font-size: clamp(2.1rem, 3.5vw, 3.15rem);
}
.hero--showcase .hero h1,
.hero--showcase h1 {
  margin-bottom: 18px;
  text-wrap: balance;
}
.hero--showcase .hero__sub {
  margin: 0 auto 26px;
  max-width: 40rem;
}
.hero--showcase .hero__actions {
  justify-content: center;
}

/* The eyebrow pill: violet wash rather than the grey used elsewhere, so it
   reads as a label for the headline instead of a content chip. */
.hero--showcase .pill--eyebrow {
  margin-bottom: 20px;
  color: var(--violet);
  background: #efecfd;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Trial and price. Deliberately directly under the buttons: it is the line
   people look for before deciding whether to click, and burying it in the
   pricing section is what made it invisible. */
.hero--showcase .hero__note--offer {
  margin: 20px auto 0;
  max-width: 46rem;
  font-size: .9rem;
  text-align: center;
}
.hero--showcase .hero__note--offer strong {
  color: var(--text);
  font-weight: 800;
}
.hero--showcase .hero__note--offer a {
  color: var(--violet);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Her face sits left of centre in the frame, so bias the crop away from the
   customer's shoulder on the right. */
.hero__photo--florist img { object-position: 38% center; }

/* ---------- Three-card showcase row ---------- */
.hero__showcase {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  margin-top: 8px;
}

.hero--showcase .hero__photo {
  height: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg-tint);
}
/* The base sheet sets a 7/8 portrait crop for the old single-portrait hero.
   These sit in a row, so they want to be a little wider than tall. */
.hero--showcase .hero__photo img {
  height: 100%;
  aspect-ratio: auto;
  min-height: 320px;
  object-fit: cover;
}

.hero--showcase .hero__photo-badge {
  right: auto;
  left: 16px;
  bottom: 16px;
  gap: 9px;
  padding: 11px 15px;
  border-radius: 14px;
  box-shadow: 0 8px 24px #2222221f;
  font-size: .85rem;
  line-height: 1.35;
}
.hero__photo-tick {
  display: grid;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  place-items: center;
  border-radius: 50%;
  background: #d8f5ec;
  color: #137262;
  font-size: .72rem;
  font-weight: 900;
}

/* ---------- Call preview card ---------- */
.hero__preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  border: 1px solid #ecebfa;
  border-radius: var(--radius);
  background: #f6f5ff;
}
.hero__preview-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}
.hero__preview-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.22rem, 1.65vw, 1.48rem);
  letter-spacing: -.035em;
  line-height: 1.16;
}
.hero__preview-tag {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 99px;
  background: #ffffff;
  color: var(--text-soft);
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
}

.hero__line {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px 15px;
  border-radius: 16px;
  background: #ffffff;
}
.hero__line p {
  margin: 0;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.5;
}
.hero__who {
  display: block;
  color: var(--violet);
  font-weight: 800;
}
.hero__line--ai .hero__who { color: var(--teal); }

.hero__avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
}
.hero__avatar--caller { background: #eceaff; color: var(--violet); }
.hero__avatar--ai { background: var(--violet); color: #fff; }

/* ---------- "Your calls. Your rules." ---------- */
.outcomes__title {
  margin: 0 0 26px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -.04em;
}
.outcomes__title em { font-style: italic; }
.outcomes__icon {
  display: grid;
  width: 40px;
  height: 40px;
  margin-bottom: 13px;
  place-items: center;
  border-radius: 13px;
  background: #efecfd;
  color: var(--violet);
}

/* ---------- Relocated call plan ---------- */
/* Luke's interactive plan moved out of the hero rather than being deleted. */
.call-plan-section__inner {
  max-width: 620px;
  margin: 0 auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .hero__showcase { gap: 16px; }
  .hero__preview { padding: 22px 20px; }
}

/* Tablet band. Three across stops working well before the single-column
   breakpoint: at ~900px each card is only about 208px wide and the preview
   card's heading shreds to one word per line. Go two-up here, with the
   preview leading across the full width, so the conversation stays readable
   and the photographs still sit side by side. */
@media (max-width: 980px) {
  .hero__showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__preview { grid-column: 1 / -1; order: -1; }
  .hero--showcase .hero__photo img { min-height: 0; aspect-ratio: 4 / 3; }
  .hero--showcase .hero__copy { max-width: 40rem; }
}

/* Below this the three cards stop being readable side by side. The preview
   card carries the message, so it leads and the florist follows. */
@media (max-width: 860px) {
  .hero__showcase {
    grid-template-columns: minmax(0, 1fr);
    max-width: 30rem;
    margin-inline: auto;
  }
  .hero--showcase .hero__photo img { min-height: 0; aspect-ratio: 4 / 3; }
  .hero__preview { order: -1; }
}

@media (max-width: 620px) {
  .hero--showcase .hero__copy { text-align: left; }
  .hero--showcase .hero__sub,
  .hero--showcase .hero__note--offer { margin-inline: 0; text-align: left; }
  .hero--showcase .hero__actions { justify-content: stretch; }
  .hero--showcase .pill--eyebrow { margin-bottom: 14px; }
}

/* ---------- Mobile: get the offer and a visual above the fold ----------
   Measured on the live page at 390px: the offer line began at 676px and the
   preview card at 772px, against roughly 660px of usable height on a phone
   once browser chrome is subtracted. The single line people look for was
   landing just below the fold, and nothing visual sat above it.

   24 Sep: the banner carried the offer, so the duplicate under the buttons
   was hidden on phones. 3 Nov 2026: the owner wants the trial line (14 days,
   60 minutes, no card) visible on phones as well, so it is no longer hidden;
   the tighter spacing below still keeps the buttons high on the screen. */
@media (max-width: 620px) {
  .promo { padding: 9px 0; }
  .promo__inner { text-align: center; }

  .hero { padding-top: 20px; }
  .hero--showcase .pill--eyebrow { margin-bottom: 12px; }
  .hero--showcase .hero__sub { margin-bottom: 20px; }
  .hero--showcase .hero__note--offer { margin-top: 16px; }

  .hero__showcase { margin-top: 4px; gap: 14px; }

  /* Option B additions: tighten the headline so the buttons and the trial
     line stay high on the screen. */
  .hero--showcase .hero__inner { gap: 24px; }
  .hero--showcase h1 { font-size: clamp(2rem, 8.2vw, 2.6rem); line-height: 1.06; }
  .hero--showcase .hero__sub { font-size: .98rem; line-height: 1.6; margin-bottom: 18px; }
  .hero__actions .btn--lg { padding-block: 14px; }
  .hero--showcase .hero__actions { gap: 10px; }
}