/* Line 32034 (pump_first_screen_product): the place page's first screen is the product (partials/first-screen.blade.php).
   Phone first (390 px): the pump picture beside the title and the one trust line, the kits by horsepower three to a row, each
   with its price and Buy, then Call / Live Human / Sunny and the quick quote, all above the fold. From 768 px the pump stands
   big on the left and the rest stacks on the right. Light and dark from the place tokens (place.css). */
.sp-fs {
  display: grid; grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
  grid-template-areas: "pic body" "proof proof" "shop shop" "talk talk" "quote quote" "says says";
  gap: 12px 14px; align-items: start; max-width: var(--sp-max); margin: 0 auto; padding: 14px var(--sp-pad) 18px;
}
.sp-fs__pic { grid-area: pic; display: block; border-radius: 14px; background: #fff; border: 1px solid var(--sp-line); overflow: hidden; }
.sp-fs__pic:focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 3px; }
.sp-fs__pic picture { display: block; }
.sp-fs__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.sp-fs__body { grid-area: body; align-self: center; min-width: 0; }
.sp-fs__title { margin: 0 0 8px; font: 600 clamp(21px, 5.6vw, 34px)/1.12 var(--sc-serif); color: var(--sp-strong); overflow-wrap: anywhere; }
.sp-fs__trust { display: flex; gap: 6px; align-items: flex-start; margin: 0; font: 600 13px/1.4 var(--sc-sans); color: var(--sp-ink); }
.sp-fs__trust svg { flex: none; margin-top: 1px; color: var(--sp-accent); }

/* CHANGES 11:49 AM PT: right under the pump, SunRay's own customer review videos (each opens on YouTube; "All" is the playlist) */
.sp-fs__lead { display: contents; }
.sp-fs__proof { grid-area: proof; min-width: 0; }
.sp-fs__proof-title { margin: 0 0 6px; font: 600 13px/1.3 var(--sc-sans); color: var(--sp-muted); }
.sp-fs__vids { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-fs__vid {
  display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px 0 9px; border-radius: 999px;
  border: 1px solid var(--sp-line); background: var(--sp-card); color: var(--sp-strong); font: 600 13px/1.2 var(--sc-sans);
  text-decoration: none; white-space: nowrap;
}
.sp-fs__vid svg { flex: none; color: var(--sp-accent); }
.sp-fs__vid--all { padding-left: 12px; border-color: var(--sp-accent); }
.sp-fs__vid:hover { border-color: var(--sp-accent); }
.sp-fs__vid:focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 2px; }
/* Line 32073: the cleared written excerpts, one swipeable row of small cards (never a star rating): on a phone the last row of
   the first screen, after the quick quote; from 768 px under the videos beside the pump */
.sp-fs__says {
  grid-area: says; min-width: 0; list-style: none; margin: 0; padding: 1px 1px 4px; display: flex; gap: 8px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.sp-fs__say { flex: 0 0 auto; width: min(236px, 72%); scroll-snap-align: start; }
.sp-fs__say figure {
  margin: 0; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--sp-line); background: var(--sp-card);
}
.sp-fs__say-q { margin: 0; font: 600 14px/1.35 var(--sc-sans); color: var(--sp-strong); }
.sp-fs__say-who { font: 400 12px/1.35 var(--sc-sans); color: var(--sp-muted); }
.sp-fs__say-who b { font-weight: 600; color: var(--sp-strong); }
.sp-fs__say-who a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sp-fs__say-who a:focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 2px; }
.sp-fs__say--old .sp-fs__say-q { font-weight: 500; }
@media (max-width: 767px) {
  .sp-fs__proof { display: flex; align-items: center; gap: 8px; }
  .sp-fs__proof-title { flex: none; margin: 0; max-width: 34%; font-size: 12px; line-height: 1.2; }
  .sp-fs__vids { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 1px; }
  .sp-fs__vids::-webkit-scrollbar { display: none; }
}

.sp-fs__shop { grid-area: shop; min-width: 0; }
.sp-fs__kits-title { margin: 0 0 8px; font: 600 13px/1.3 var(--sc-sans); color: var(--sp-muted); letter-spacing: .01em; }
.sp-fs__kits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sp-fs__kit {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 8px 8px; border-radius: 14px;
  background: var(--sp-card); border: 1px solid var(--sp-line);
}
.sp-fs__kit--popular { border-color: var(--sp-accent); box-shadow: inset 0 0 0 1px var(--sp-accent); }
.sp-fs__hp { font: 700 17px/1.2 var(--sc-sans); color: var(--sp-strong); text-decoration: none; }
.sp-fs__hp:hover { text-decoration: underline; }
.sp-fs__also { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 600 11px/1.25 var(--sc-sans); color: var(--sp-muted); }
.sp-fs__price { font: 600 15px/1.3 var(--sc-sans); color: var(--sp-ink); }
.sp-fs__buy {
  display: flex; align-items: center; justify-content: center; min-height: 38px; margin-top: auto; border-radius: 10px;
  background: var(--sp-buy); color: var(--sp-buy-ink); font: 700 14px/1 var(--sc-sans); text-decoration: none;
}
.sp-fs__kit > .sp-fs__price { margin-bottom: 6px; }
.sp-fs__buy:focus-visible, .sp-fs__hp:focus-visible, .sp-fs__act:focus-visible, .sp-fs__go:focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 2px; }

.sp-fs__talk { grid-area: talk; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sp-fs__act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 4px 6px; border-radius: 12px;
  border: 1px solid var(--sp-line); background: var(--sp-card); color: var(--sp-strong); font: 600 13.5px/1.15 var(--sc-sans);
  text-align: center; text-decoration: none; cursor: pointer;
}
.sp-fs__act svg { flex: none; }
/* Phones (375 px, Spanish words, and California's privacy notice lifting the agent's bar) keep the quick quote above that
   bar: a little less air, and the quote's label is read out (the field's own words "Your address (optional)" show it). */
@media (max-width: 420px) {
  .sp-fs { gap: 8px 12px; padding-top: 12px; }
  .sp-fs__kits-title { display: none; }
  .sp-fs__trust svg { display: none; }
  .sp-fs__title { margin-bottom: 6px; }
  .sp-fs__trust { font-size: 12.5px; line-height: 1.35; }
  .sp-fs__kit { padding: 7px 7px 7px; }
  .sp-fs__kit > .sp-fs__price { margin-bottom: 5px; }
  .sp-fs__buy { min-height: 34px; }
  .sp-fs__act { min-height: 42px; }
  .sp-fs__act svg { display: none; }
  .sp-fs__addr, .sp-fs__go { min-height: 44px; }
  .sp-fs__qlabel {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}
.sp-fs__act--ask { border-color: var(--sp-accent); }

.sp-fs__quote { grid-area: quote; margin: 0; min-width: 0; }
.sp-fs__qlabel { display: block; margin: 0 0 6px; font: 400 13px/1.3 var(--sc-sans); color: var(--sp-muted); }
.sp-fs__qlabel strong { color: var(--sp-strong); font-weight: 700; }
.sp-fs__qrow { display: flex; gap: 8px; }
.sp-fs__addr {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--sp-line);
  background: var(--sp-card); color: var(--sp-ink); font: 400 16px/1.2 var(--sc-sans);
}
.sp-fs__go {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 14px; border: 0;
  border-radius: 12px; background: var(--sp-accent); color: var(--sp-on-accent, #1a1a14); font: 700 14px/1 var(--sc-sans);
  text-decoration: none; cursor: pointer;
}
.sp-fs__quote--link .sp-fs__go { width: 100%; }

@media (min-width: 768px) {
  .sp-fs {
    grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
    grid-template-areas: "pic body" "pic shop" "pic talk" "pic quote";
    gap: 14px 28px; padding-top: 24px; padding-bottom: 28px; align-content: start;
  }
  .sp-fs__body { align-self: end; }
  .sp-fs__lead { display: block; grid-area: pic; min-width: 0; }
  .sp-fs__proof { margin-top: 14px; }
  .sp-fs__says { margin-top: 12px; }
  .sp-fs__title { margin-bottom: 10px; }
  .sp-fs__trust { font-size: 15px; }
  .sp-fs__hp { font-size: 19px; }
  .sp-fs__price { font-size: 16px; }
  .sp-fs__buy { min-height: 42px; font-size: 15px; }
  .sp-fs__act { font-size: 14.5px; }
}
@media (min-width: 1200px) {
  .sp-fs { gap: 16px 36px; }
}