/* Printquote home hero: headline, one line, a CSS-drawn phone looping the three steps,
   and the header tip that ends the loop. No script: @keyframes on opacity only
   (the tip also moves by transform). One loop = 12 s = 4 beats of 3 s. */

html, body { overflow-x: clip; }

/* ---------- layout: phone below the copy on small screens, beside it on wide ones ---------- */
.hero {
  display: grid;
  gap: var(--s-4);
  grid-template-areas: "head" "line" "private" "phone" "steps";
  padding-block: var(--s-4) var(--s-7);
}
.hero h1 { grid-area: head; margin: 0; font-size: var(--step-4); line-height: 1.05; letter-spacing: -0.02em; }
.hero-line { grid-area: line; margin: 0; font-size: var(--step-1); line-height: 1.45; }
.hero-private { grid-area: private; margin: 0; color: var(--muted); }
.phone { grid-area: phone; justify-self: center; margin-top: var(--s-4); }
.hero-steps { grid-area: steps; justify-self: center; margin: 0; }

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) var(--w-card);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: ". phone" "head phone" "line phone" "private phone" "steps phone" ". phone";
    gap: 0 var(--s-8);
    padding-block: var(--s-7); /* trimmed so the home fits 1280x800 */
  }
  .hero h1 { font-size: var(--step-5); margin-bottom: var(--s-5); }
  .hero h1 span { display: block; } /* one sentence per line */
  .hero-private { margin-top: var(--s-2); }
  .hero-steps { justify-self: start; margin-top: var(--s-6); }
  .phone { margin: 0; }
}

/* ---------- the maker strip: one slim tinted row under the hero, then the footer ---------- */
.page-home .site-main { padding-bottom: var(--s-6); } /* home: hero, strip, footer on one desktop screen */
.maker-strip { background: var(--surface); }
.maker-strip .inner { display: grid; gap: var(--s-3); align-items: center; padding-block: var(--s-5); }
.maker-strip h2 { margin: 0; font-size: var(--step-1); }
.maker-strip p { margin: 0; color: var(--muted); }
@media (min-width: 48rem) {
  .maker-strip .inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); padding-block: var(--s-3); }
  .maker-strip-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-4); }
}

/* ---------- the step list: carries the meaning; the active step lights up with the phone ---------- */
.hero-steps {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  list-style: none; padding: 0;
  counter-reset: step;
}
.hero-steps li {
  counter-increment: step;
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding-bottom: var(--s-1);
  font-weight: 600;
  opacity: 0.7;
  animation: pq-step 12s infinite;
}
.hero-steps li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.625rem; height: 1.625rem;
  border: 2px solid currentColor; border-radius: 50%;
  font-size: var(--step--1); line-height: 1;
}
.hero-steps li::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--brand);
  opacity: 0;
  animation: pq-beat 12s infinite;
}
.hero-steps li:nth-child(2), .hero-steps li:nth-child(2)::after { animation-delay: 3s; }
.hero-steps li:nth-child(3), .hero-steps li:nth-child(3)::after { animation-delay: 6s; }

/* ---------- the phone: an outline with four screens that cross-fade ---------- */
.phone {
  position: relative;
  width: 12rem; height: 16.5rem;
  border: 2px solid var(--ink); border-radius: 1.5rem;
  background: var(--ground);
}
.phone::before {
  content: "";
  position: absolute; top: var(--s-3); left: 50%;
  width: 2.5rem; height: 0.25rem; margin-left: -1.25rem;
  border-radius: 1rem; background: var(--rule);
}
.phone-screen {
  position: absolute; inset: var(--s-6) var(--s-4) var(--s-5);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-3);
  opacity: 0;
  animation: pq-beat 12s infinite;
}
.phone-screen:nth-child(2) { animation-delay: 3s; }
.phone-screen:nth-child(3) { animation-delay: 6s; }
.phone-screen:nth-child(4) { animation-delay: 9s; }

.phone-bar { width: 60%; height: 0.5rem; border-radius: 1rem; background: var(--rule); }
.phone-bar--short { width: 45%; }
.phone-drop {
  display: flex; align-items: center; justify-content: center;
  height: 6rem;
  border: 2px dashed var(--brand); border-radius: var(--radius);
  color: var(--brand); font-weight: 600;
}
.phone-drop--solid { border-style: solid; }
.phone-arrow { position: relative; width: 2px; height: 1.75rem; background: var(--brand); }
.phone-arrow::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 0.75rem; height: 0.75rem;
  border-top: 2px solid var(--brand); border-left: 2px solid var(--brand);
  transform: translateX(-50%) rotate(45deg);
}
.phone-note { color: var(--muted); font-size: var(--step--1); text-align: center; }
.phone-quote {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: var(--s-2);
  border-bottom: var(--hairline) solid var(--rule);
  font-size: var(--step--1);
}
.phone-quote b { font: 700 var(--step-0) / 1 var(--font-display); font-variant-numeric: tabular-nums; }
.phone-ok {
  position: relative;
  width: 3.5rem; height: 3.5rem; margin-inline: auto;
  border-radius: 50%; background: var(--brand);
}
.phone-ok::after {
  content: "";
  position: absolute; left: 50%; top: 45%;
  width: 0.75rem; height: 1.375rem;
  border-right: 3px solid var(--on-brand); border-bottom: 3px solid var(--on-brand);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- the header tip (home only): appears on beat 4, under the link it names ---------- */
.site-nav { position: relative; }
.header-tip {
  position: absolute; top: calc(100% + var(--s-2)); right: 0; z-index: 2;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  background: var(--brand); color: var(--on-brand);
  font-size: var(--step--1); font-weight: 600; line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: pq-tip 12s 9s infinite;
}
.header-tip::before {
  content: "";
  position: absolute; bottom: 100%; right: 1.5rem;
  border: 0.4rem solid transparent; border-top: 0;
  border-bottom-color: var(--brand);
}
.header-tip--post { right: auto; left: 0; }
.header-tip--post::before { right: auto; left: 1.5rem; }
/* phones: the tip sits inside the desktop .site-nav, which site.css hides below 48rem */

/* ---------- the loop ---------- */
@keyframes pq-beat {
  0% { opacity: 0; }
  3%, 23% { opacity: 1; }
  26%, 100% { opacity: 0; }
}
@keyframes pq-step {
  0% { opacity: 0.7; }
  3%, 23% { opacity: 1; }
  26%, 100% { opacity: 0.7; }
}
@keyframes pq-tip {
  0% { opacity: 0; transform: translateY(-0.25rem); }
  3%, 23% { opacity: 1; transform: none; }
  26%, 100% { opacity: 0; transform: none; }
}

/* still state: the quotes screen (the most informative), every step in ink, the tip shown */
@media (prefers-reduced-motion: reduce) {
  .phone-screen, .hero-steps li, .hero-steps li::after, .header-tip { animation: none; }
  .phone-screen:nth-child(2), .hero-steps li, .header-tip { opacity: 1; }
}