/**
 * Webgentic - Homepage 3
 * Problem led, service led. Same tokens, same components, same rhythm as hp2.
 * Only the layout that the design system does not already carry lives here.
 * Prefix: hp3-
 */

/* ================================
   SHARED RHYTHM
   ================================ */
.hp3-eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.65);
  margin: 0 0 var(--space-4);
}

.hp3-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
  max-width: 24ch;
}

.hp3-h3 {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

.hp3-lede {
  font-size: 1.125rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 62ch;
  margin: 0 0 var(--space-6);
}

.hp3-head {
  max-width: 68ch;
  margin-bottom: var(--space-12);
}

/* The line that turns a section, used once or twice on the page. */
.hp3-pivot {
  margin: var(--space-10) 0 0;
  padding-top: var(--space-6);
  border-top: 2px solid rgba(0, 0, 0, 0.14);
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2.2vw, 1.4375rem);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--color-primary);
  max-width: 46ch;
}

/* ================================
   1. HERO
   ================================ */
.hp3-hero {
  background: var(--gradient-hero);
  padding: var(--space-16) 0 var(--space-20);
  position: relative;
  overflow: hidden;
}

.hp3-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

.hp3-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5.2vw, 3.625rem);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-6);
  max-width: 18ch;
}

.hp3-hero__lede {
  font-size: 1.1875rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
  max-width: 54ch;
  margin: 0 0 var(--space-8);
}

.hp3-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.hp3-hero__facts {
  list-style: none;
  margin: 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 54ch;
}

.hp3-hero__fact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-text-body);
}

.hp3-hero__fact svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #1B1B1B;
}

/* ================================
   HERO VISUAL: the demo, then the platforms it runs on
   The demo positions itself against its nearest positioned ancestor and
   needs room above it for the size switch and below it for the dots.
   ================================ */
.hp3-hero__visual {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
}

/* The mockup is absolutely positioned against its nearest positioned
   ancestor, and so are the size switch above it and the example dots below
   it. This box is that ancestor, so it has to reserve the room for all
   three: the switch sits 70px above its top edge and the dots 80px below
   its bottom edge, which is what the margins are for. Without them the
   mockup climbs into the navigation and the dots land on the logos. */
.hp3-demo-stage {
  position: relative;
  width: 100%;
  min-height: 420px;
  margin-top: 78px;
  margin-bottom: 98px;
}

/* Below this the switch is not offered and the dots sit closer. */
@media (max-width: 768px) {
  .hp3-demo-stage { margin-top: 0; margin-bottom: 80px; }
}

.hp3-hero__demo-note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 44ch;
  margin-inline: auto;
}

/* Platform strip, under the demo, so the logos answer the question the
   demo raises: will this work on what I already have. */
.hp3-hero__stack {
  padding-top: var(--space-6);
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}

.hp3-hero__stack-label {
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.65);
  margin: 0 0 var(--space-4);
  text-align: center;
}

.hp3-hero__stack-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5) var(--space-8);
}

.hp3-hero__stack-logos img {
  height: 22px;
  width: auto;
  opacity: 0.72;
}

.hp3-hero__stack-logos img[alt="WordPress"] { height: 27px; }
.hp3-hero__stack-logos img[alt="WooCommerce"] { height: 14px; }
.hp3-hero__stack-logos img[alt="Magento"] { height: 24px; }

/* ================================
   2. PILOT STATUS BAND
   ================================ */
.hp3-status {
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: var(--space-8) 0;
}

.hp3-status__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}

.hp3-status__text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-body);
  margin: 0;
  max-width: 70ch;
}

.hp3-status__text strong { font-weight: var(--weight-semibold); }

.hp3-status__link {
  color: #1B1B1B;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.hp3-status__link:hover { color: #000; }

/* ================================
   3. THE PROBLEM
   A plain list with a hairline between items. No cards: this section is
   the reader recognising themselves, and a card round each line would
   make four claims out of one continuous thought.
   ================================ */
.hp3-problem {
  padding: var(--space-20) 0;
  background: #ffffff;
}

.hp3-problem__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.hp3-problem__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.hp3-problem__name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0;
}

.hp3-problem__cost {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 64ch;
}

/* ================================
   4. WHAT WE TAKE ON
   ================================ */
.hp3-work {
  padding: var(--space-20) 0;
  background: #FAFBFC;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.hp3-work__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.hp3-work__item {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-8);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
}

.hp3-work__title {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

.hp3-work__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
}

.hp3-work__meta {
  list-style: none;
  margin: auto 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.hp3-work__meta li {
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.6);
}

.hp3-work__meta li + li::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(27, 27, 27, 0.35);
  margin-right: var(--space-3);
  vertical-align: 3px;
}

/* ================================
   5. WHERE THE WEEKS GO
   A two row comparison of the same job on each route. Built in markup
   rather than as a picture of a chart, so it reflows at 320px, reads
   out in order to a screen reader, and carries no invented numbers
   beyond the illustration it is labelled as.
   ================================ */
.hp3-speed {
  padding: var(--space-20) 0;
  background: #ffffff;
}

.hp3-track {
  margin: 0;
  display: grid;
  gap: var(--space-10);
}

.hp3-track__row {
  display: grid;
  gap: var(--space-3);
}

.hp3-track__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
}

.hp3-track__who {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin: 0;
}

.hp3-track__total {
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  margin: 0;
}

/* One scale for both rows: eighteen working days is the full width, and
   each bar takes the share its own total earns. That is what lets the two
   lengths be compared by eye instead of by reading the labels. */
.hp3-track__bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  width: calc(var(--total) / 18 * 100%);
  min-width: 84px;
  height: 46px;
}

.hp3-track__seg {
  flex: var(--days) 1 0;
  min-width: 4px;
  border-radius: 3px;
  background: #4B5565;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* Waiting, not working. The hatching is the point of the graphic, and it
   carries the difference without relying on colour alone. */
.hp3-track__seg--wait {
  background: repeating-linear-gradient(135deg, #DCE1E9 0 5px, #EEF1F6 5px 10px);
  border-color: rgba(0, 0, 0, 0.1);
}

/* The accent does one job on this page and this is it. */
.hp3-track__row--ours .hp3-track__seg {
  background: #2F8C7E;
  border-color: rgba(0, 0, 0, 0.12);
}

.hp3-track__stages {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 68ch;
}

.hp3-track__key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.hp3-track__swatch {
  display: inline-block;
  width: 22px;
  height: 12px;
  border-radius: 2px;
  background: #4B5565;
  border: 1px solid rgba(0, 0, 0, 0.12);
  margin-right: var(--space-2);
  vertical-align: -1px;
}

.hp3-track__swatch--wait {
  background: repeating-linear-gradient(135deg, #DCE1E9 0 5px, #EEF1F6 5px 10px);
}

/* Visually hidden, still read out. Each bar segment names itself this way. */
.hp3-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hp3-track__note {
  margin: var(--space-8) 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 68ch;
}

/* ================================
   6. PEOPLE AND PLATFORM
   ================================ */
.hp3-team {
  padding: var(--space-20) 0;
  background: var(--gradient-hero);
}

.hp3-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

.hp3-team__photo {
  margin: 0;
}

.hp3-team__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-subtle);
}

.hp3-team__caption {
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.hp3-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.hp3-split__item {
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-md);
}

.hp3-split__item p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.hp3-split__tag {
  display: inline-block;
  margin: 0 0 var(--space-3);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.6);
}

/* ================================
   7. ONE REAL JOB
   ================================ */
.hp3-walk {
  padding: var(--space-20) 0;
  background: #ffffff;
}

.hp3-panel {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.hp3-panel__ask {
  padding: var(--space-6) var(--space-8);
  background: #F4F6FA;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.hp3-panel__back { padding: var(--space-6) var(--space-8) var(--space-8); }

.hp3-panel__who {
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.6);
  margin: 0 0 var(--space-3);
}

.hp3-panel__quote {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--color-primary);
  margin: 0;
  max-width: 54ch;
}

.hp3-panel__rows { list-style: none; margin: 0; padding: 0; }

.hp3-panel__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.hp3-panel__row:last-child { border-bottom: 0; }

.hp3-panel__count {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  line-height: 1.2;
}

.hp3-panel__what {
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  color: var(--color-primary);
}

.hp3-panel__detail {
  grid-column: 2;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.hp3-panel__row--skip .hp3-panel__count,
.hp3-panel__row--skip .hp3-panel__what { color: rgba(27, 27, 27, 0.55); }

.hp3-panel__foot {
  margin: var(--space-5) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.hp3-panel__foot strong { color: var(--color-primary); font-weight: var(--weight-semibold); }

.hp3-steps {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.hp3-step {
  padding: var(--space-6);
  background: #FAFBFC;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
}

.hp3-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: #1B1B1B;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}

.hp3-step__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}

.hp3-step__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

.hp3-walk__aside {
  margin: var(--space-8) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 64ch;
}

/* ================================
   8. SAFE HANDS
   ================================ */
.hp3-safe {
  padding: var(--space-20) 0;
  background: #FAFBFC;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.hp3-safe__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.hp3-safe__item {
  padding: var(--space-6);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
}

.hp3-safe__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: #EDF2F7;
  color: #1B1B1B;
  margin-bottom: var(--space-4);
}

.hp3-safe__icon svg { width: 21px; height: 21px; }

.hp3-safe__item p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.hp3-safe__note {
  margin: var(--space-10) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 72ch;
}

.hp3-safe__note a {
  color: #1B1B1B;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ================================
   9. HAND US A JOB
   ================================ */
.hp3-signup {
  padding: var(--space-20) 0;
  background: #0F1219;
  color: #ffffff;
}

.hp3-signup .hp3-h2 { color: #ffffff; }
.hp3-signup .hp3-eyebrow { color: rgba(255, 255, 255, 0.72); }

.hp3-signup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

.hp3-signup__lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 58ch;
  margin: 0 0 var(--space-10);
}

.hp3-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 560px;
}

.hp3-field { display: flex; flex-direction: column; gap: var(--space-2); }

.hp3-field label {
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  color: #ffffff;
}

.hp3-field__hint {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
}

.hp3-field input[type="text"],
.hp3-field input[type="email"],
.hp3-field input[type="url"] {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 13px 14px;
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  width: 100%;
}

.hp3-field input::placeholder { color: rgba(255, 255, 255, 0.45); }

.hp3-field input:focus-visible {
  outline: 3px solid #9FE1D8;
  outline-offset: 2px;
  border-color: transparent;
}

.hp3-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.hp3-consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: #9FE1D8;
}

.hp3-consent label {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.hp3-submit {
  justify-self: start;
  background: #ffffff;
  color: #0F1219;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  padding: 14px 28px;
  min-height: 48px;
  cursor: pointer;
  transition: background var(--transition-base);
}

.hp3-submit:hover { background: #E6E9EF; }

.hp3-submit:focus-visible {
  outline: 3px solid #9FE1D8;
  outline-offset: 3px;
}

.hp3-signup__after {
  margin-top: var(--space-6);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 58ch;
}

.hp3-signup__after a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hp3-signup__mark img {
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

/* ================================
   RESPONSIVE
   ================================ */
@media (min-width: 640px) {
  .hp3-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); max-width: none; }
  .hp3-problem__item { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--space-8); }
  .hp3-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 820px) {
  .hp3-work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .hp3-safe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

@media (min-width: 900px) {
  .hp3-hero { padding: var(--space-20) 0 var(--space-24); }
  .hp3-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: var(--space-16); }
  .hp3-status__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); }
  .hp3-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp3-team__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--space-16); }
  .hp3-signup__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-16); }
  .hp3-step__title { min-height: 2.6em; }
}

@media (min-width: 1100px) {
  .hp3-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Narrow phones: everything has to stay readable at 320px. */
@media (max-width: 420px) {
  .hp3-hero__actions .btn { width: 100%; }
  .hp3-track__bar { height: 36px; }
  .hp3-panel__ask,
  .hp3-panel__back { padding-left: var(--space-5); padding-right: var(--space-5); }
  .hp3-hero__stack-logos { gap: var(--space-3) var(--space-5); }
  .hp3-hero__stack-logos img { height: 18px; }
  .hp3-hero__stack-logos img[alt="WordPress"] { height: 22px; }
  .hp3-hero__stack-logos img[alt="WooCommerce"] { height: 12px; }
  .hp3-hero__stack-logos img[alt="Magento"] { height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp3-submit, .hp3-status__link { transition: none; }
}