/* Google setup page only. The shared system is in /styles.css.
   Two sections: the top (a sample search result with four numbered parts, the four matching setup
   cards beside it and four more under it), then the honest line with the closing call to action. */

/* ================================================================
   1. Top
   ================================================================ */

.gs-top { padding-bottom: clamp(64px, 8vw, 120px); }
.gs-top h1 { max-width: 14ch; }

/* The picture and the four numbered cards side by side on computers; stacked below that */
.gs-grid {
  display: grid;
  gap: clamp(28px, 3.4vw, 48px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
  text-align: left;
}
@media (min-width: 1100px) { .gs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---- The sample search result: our own plain look, no search engine's logo, colors or stars ---- */
.serp {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.serp-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: #F3F6FA;
}
.serp-search {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.serp-search > span { overflow: hidden; text-overflow: ellipsis; }
.serp-search .ico { width: 20px; height: 20px; color: var(--blue); }
.serp .browser-tag { font-size: 0.8125rem; padding: 4px 12px; }

.serp-body { display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px) clamp(16px, 3vw, 34px); }
/* each numbered part: the red number, a short red line, then the part in a dashed box */
.serp-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; align-items: center; }
.serp-row .callout { position: relative; }
.serp-row .callout::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background: var(--red);
}
.serp-part {
  min-width: 0;
  padding: 8px 12px;
  border: 1.5px dashed rgba(var(--blue-dark-rgb), 0.38);
  border-radius: 12px;
  background: rgba(var(--blue-rgb), 0.025);
}
.serp-site { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 1.0625rem; line-height: 1.3; }
.serp-site img { width: 30px; height: 30px; flex: none; }
.serp-url { color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.serp-title {
  font-family: var(--font-body);   /* the search result mock-up: a plain text face, as a search page uses */
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0;
  color: var(--ink);
}
.serp-desc { color: var(--text); line-height: 1.5; }
@media (max-width: 419px) {
  .serp-bar { flex-wrap: wrap; padding: 12px; }
  .serp-search { flex-basis: 100%; }
  .serp-row { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .serp-row .callout::after { width: 12px; }
  .serp-part { padding: 8px 10px; }
}

/* ---- The setup cards: icon, the red number where the card matches a part of the picture, a short
   title, one line, and the package chip at the bottom ---- */
.gs-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); text-align: left; }
@media (min-width: 620px) { .gs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the four under the picture are two to a row even on phones */
.gs-cards--more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 620px) { .gs-cards--more { gap: 16px; } }
@media (min-width: 1100px) {
  .gs-cards { gap: 20px; grid-auto-rows: 1fr; }
  .gs-cards--more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
.gs-cards--more { margin-top: clamp(16px, 2vw, 20px); }
@media (min-width: 1100px) { .gs-cards--more { margin-top: 48px; } }

.gs-card { display: flex; flex-direction: column; padding: 22px 24px 24px; border-radius: 20px; }
.gs-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.gs-card h2 {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.gs-card p { margin: 0; }
.gs-card .gs-chip { margin-top: auto; padding-top: 16px; }

/* Phones: the icon sits beside the words, so the cards stay short */
@media (max-width: 619px) {
  .gs-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .gs-card-top { display: contents; }
  .gs-card-top .tile { grid-row: 1 / span 3; margin: 0; }
  .gs-card-top .callout { position: absolute; top: 16px; right: 16px; }
  .gs-card h2 { grid-column: 2; margin-top: 8px; padding-right: 36px; }
  .gs-card p { grid-column: 2; }
  .gs-card .gs-chip { padding-top: 12px; }
  /* the four short cards, two to a row: no icon, just the words and the chip */
  .gs-cards--more .gs-card { display: flex; flex-direction: column; padding: 16px; }
  .gs-cards--more .gs-card-top { display: none; }
  .gs-cards--more .gs-card h2 { margin-top: 0; padding-right: 0; font-size: 1.3125rem; }
}

/* ================================================================
   2. The honest line, then the blue panel
   ================================================================ */

/* the box hugs its two lines and sits centered; on phones the icon stays beside the words */
.gs-honest { width: fit-content; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); }
.gs-honest p { max-width: 19.5em; text-wrap: balance; }   /* about its two balanced lines, so the box hugs them */
@media (max-width: 719px) { .gs-honest { flex-wrap: nowrap; align-items: flex-start; } }
.band--cta { padding-bottom: clamp(56px, 6vw, 96px); }