/**
 * Webgentic - Homepage 2 (alternative for review)
 * Reuses the site design tokens. Adds only layout not already in the system.
 * Prefix: hp2-
 */

/* ================================
   SHARED RHYTHM
   ================================ */
.hp2-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);
}

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

.hp2-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: 20ch;
}

.hp2-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);
}

/* Section heads are left aligned, so the eye has one edge to follow. */
.hp2-head {
  max-width: 68ch;
  margin-bottom: var(--space-12);
}

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

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

.hp2-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5.4vw, 3.75rem);
  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: 16ch;
}

.hp2-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);
}

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

/* The four facts under the buttons. Not badges, not claims: mechanics. */
.hp2-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;
}

.hp2-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);
}

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

.hp2-hero__visual {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================
   2. PILOT STATUS BAND
   ================================ */
.hp2-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;
}

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

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

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

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

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

/* ================================
   3. WHAT IT FIXES  (4 items, asymmetric)
   ================================ */
.hp2-fixes {
  padding: var(--space-20) 0;
  background: #ffffff;
}

.hp2-fixes__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.hp2-fix {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-8) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.hp2-fix__problem {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin: 0;
}

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

.hp2-fix__answer code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ================================
   4. ONE REAL CHANGE (the worked example)
   ================================ */
.hp2-walk {
  padding: var(--space-20) 0;
  background: #F6F7F9;
}

.hp2-walk__steps {
  list-style: none;
  /* The tiles used to butt straight up against the panel above with no
     gap at all, so the two blocks read as one. */
  margin: var(--space-10) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--space-6);
}

.hp2-step {
  height: 100%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: relative;
}

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

.hp2-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);
}

/* Titles wrap to one or two lines depending on the column width. Reserving
   two lines keeps the four cards the same height, so the row has a straight
   bottom edge instead of one card hanging lower than the rest. */
@media (min-width: 900px) {
  .hp2-step__title { min-height: 2.6em; }
}

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

/* The transcript panel: what the user types and what comes back. */
.hp2-transcript {
  background: #12151C;
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #D7DCE5;
  overflow-x: auto;
}

.hp2-transcript__line { display: block; white-space: pre-wrap; }
.hp2-transcript__you { color: #9FE1D8; }
.hp2-transcript__sys { color: #8B93A3; }
.hp2-transcript__add { color: #8FD69A; }
.hp2-transcript__del { color: #E79A9A; }

.hp2-walk__aside {
  margin-top: var(--space-6);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 62ch;
}

/* ================================
   5. CONTROL & SECURITY
   ================================ */
.hp2-control {
  padding: var(--space-20) 0;
  background: #ffffff;
}

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

/* Was a hairline left border, which reads as a markdown blockquote.
   Now a proper panel with an icon that names the safeguard. */
.hp2-control__item {
  padding: var(--space-6);
  background: #FAFBFC;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
}

.hp2-control__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #1B1B1B;
}

.hp2-control__icon svg { width: 21px; height: 21px; }

.hp2-control__item p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 48ch;
}

.hp2-control__note {
  margin-top: var(--space-10);
  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: 70ch;
}

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

/* ================================
   6. PLATFORMS
   ================================ */
.hp2-platforms {
  padding: var(--space-20) 0;
  background: #F6F7F9;
}

.hp2-platforms__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-10);
  margin-bottom: var(--space-10);
}

.hp2-platforms__logos img {
  height: 26px;
  width: auto;
  opacity: 0.75;
}

/* Each logo file frames its artwork differently, so equal box heights do not
   read as equal size. These nudges even them out optically. */
.hp2-platforms__logos img[alt="WordPress"] { height: 22px; }
.hp2-platforms__logos img[alt="WooCommerce"] { height: 20px; }
.hp2-platforms__logos img[alt="Magento"] { height: 28px; }

.hp2-platforms__protocols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.hp2-protocol dt {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.hp2-protocol dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ================================
   7. SIGN UP
   ================================ */
.hp2-signup {
  padding: var(--space-20) 0;
  background: #0F1219;
  color: #ffffff;
}

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

.hp2-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);
}

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

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

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

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

.hp2-field input[type="text"],
.hp2-field input[type="email"],
.hp2-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%;
}

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

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

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

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

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

.hp2-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);
}

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

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

.hp2-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;
}

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

/* The one brand shape on the page, and it is decorative, so it is hidden
   from assistive tech and sits beside the form rather than replacing proof. */
.hp2-signup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

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

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

@media (min-width: 900px) {
  .hp2-hero { padding: var(--space-20) 0 var(--space-24); }
  .hp2-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-16); }
  .hp2-status__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); }
  .hp2-walk__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .hp2-control__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--space-12); }
  .hp2-platforms__protocols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
  .hp2-signup__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-16); }
}

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

/* Narrow phones: keep everything readable at 320px. */
@media (max-width: 380px) {
  .hp2-hero__actions .btn { width: 100%; }
  .hp2-platforms__logos { gap: var(--space-6); }
  .hp2-platforms__logos img { height: 22px; }
  .hp2-transcript { padding: var(--space-4); font-size: 0.75rem; }
}

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

/* ================================
   HERO DEMO STAGE
   The demo positions itself against its nearest positioned ancestor,
   with the size switch above the phone and the example dots below.
   This box is that ancestor, and it reserves the room for both.
   ================================ */
.hp2-hero__visual {
  align-items: stretch;
  min-height: 0;
}

.hp2-demo-stage {
  position: relative;
  width: 270px;
  height: 515px;
  margin: 92px auto 108px;
}

.hp2-demo-stage .hero-demo-mode,
.hp2-demo-stage .hero-demo-dot {
  min-height: 44px;
  min-width: 44px;
}

.hp2-demo-stage .hero-demo-nav__label {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0;
  text-align: center;
}

@media (max-width: 899px) {
  .hp2-demo-stage {
    transform: scale(0.82);
    transform-origin: top center;
    margin-bottom: 20px;
  }
}

@media (max-width: 380px) {
  .hp2-demo-stage { transform: scale(0.72); }
}

/* The one line of technical reassurance under the platform logos. */
.hp2-platforms__note {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 64ch;
  margin: 0;
}

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

/* ================================
   HERO PLATFORM STRIP
   ================================ */
.hp2-hero__stack {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}

.hp2-hero__stack-label {
  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);
}

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

.hp2-hero__stack-logos img {
  height: 24px;
  width: auto;
  opacity: 0.7;
}

.hp2-hero__stack-logos img[alt="WordPress"] { height: 20px; }
.hp2-hero__stack-logos img[alt="WooCommerce"] { height: 18px; }
.hp2-hero__stack-logos img[alt="Magento"] { height: 26px; }

@media (max-width: 380px) {
  .hp2-hero__stack-logos { gap: var(--space-4) var(--space-5); }
  .hp2-hero__stack-logos img { height: 19px; }
  .hp2-hero__stack-logos img[alt="WordPress"] { height: 16px; }
  .hp2-hero__stack-logos img[alt="WooCommerce"] { height: 15px; }
  .hp2-hero__stack-logos img[alt="Magento"] { height: 21px; }
}

/* ================================
   JOB CARDS
   Replaces the heading-left / paragraph-right list, which read as an
   unstyled export. Two across, so they stay wide enough to hold a
   real sentence rather than becoming a three-card icon grid.
   ================================ */
.hp2-jobs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.hp2-job {
  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);
}

.hp2-job__head {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.hp2-job__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}

/* The scale line is the point of the card, so it gets the mono face
   the rest of the site uses for figures. */
.hp2-job__scale {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: rgba(27, 27, 27, 0.72);
  margin: 0;
}

.hp2-job__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
  flex: 1 1 auto;
}

.hp2-job__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hp2-job__meta li {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-full);
  padding: 5px 12px;
}

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

/* ================================
   JOB PANEL
   The plain-English version of the old terminal block. Same proof,
   readable by somebody who has never seen a diff.
   ================================ */
.hp2-job-panel {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

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

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

.hp2-job-panel__who {
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: rgba(27, 27, 27, 0.7);
  margin: 0 0 var(--space-3);
}

.hp2-job-panel__quote {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-primary);
  margin: 0;
  max-width: 54ch;
}

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

.hp2-job-panel__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

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

.hp2-job-panel__count {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  min-width: 3ch;
  text-align: right;
}

.hp2-job-panel__what {
  font-weight: var(--weight-semibold);
  font-size: 0.9375rem;
  color: var(--color-primary);
}

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

/* The skipped row is the most persuasive line in the panel: it is the
   product declining to do something. Muted, not coloured like an error. */
.hp2-job-panel__row--skip .hp2-job-panel__count,
.hp2-job-panel__row--skip .hp2-job-panel__what {
  color: rgba(27, 27, 27, 0.6);
}

.hp2-job-panel__foot {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.hp2-job-panel__foot strong { color: var(--color-primary); }

@media (min-width: 640px) {
  .hp2-job-panel__row { grid-template-columns: auto auto 1fr; }
  .hp2-job-panel__detail { grid-column: auto; }
}

@media (max-width: 380px) {
  .hp2-job-panel__ask,
  .hp2-job-panel__back { padding-left: var(--space-5); padding-right: var(--space-5); }
  .hp2-job-panel__quote { font-size: 1rem; }
}

/* ================================
   PLATFORMS: TEXT AND ART SIDE BY SIDE
   Breaks the run of full-width text blocks without adding another
   card grid. Art sits right, so the reading edge stays on the left.
   ================================ */
.hp2-platforms__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
  margin-bottom: var(--space-12);
}

.hp2-platforms__text .hp2-h2 { max-width: 16ch; }

.hp2-platforms__logos { margin-bottom: 0; }

.hp2-platforms__art img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

@media (min-width: 900px) {
  .hp2-platforms__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}