/* redesign-home.css — homepage layout only.
   Track A (Zyentora-branded). Requires redesign-tokens.css and
   redesign-components.css, which carry everything shared: nav, footer,
   buttons, product card, badges, states.

   Nothing here is a new component — this file positions the shared ones.
   Mobile-first: base rules are the phone. */

/* ---------------- Hero ---------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xxl);
  padding-block: var(--space-l) var(--section-pad);
  align-items: center;
}

.hero h1 { margin-bottom: var(--space-m); }

/* The headline is two sentences that should read as one block: tight leading
   (set on h1 in components.css) plus a hard break, so "Keep the difference."
   always lands on its own line and carries the underline. */
.hero .line-1,
.hero .line-2 { display: block; }

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-l);
}

/* Trust badges sit inline in the hero rather than in their own section. */
.trust-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s) var(--space-m);
  padding: var(--space-m) 0 0;
  margin: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}
.trust-badges li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--type-small);
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.trust-badges i { color: var(--color-accent); font-size: 20px; flex: none; }

/* ---------------- Hero card stack ---------------- */
/* Two cards in one grid cell. The back card is offset up AND right, far
   enough that its whole heading plus a little of its content stays visible —
   roughly a quarter of the card. A stack you can't see behind reads as one
   card with a shadow, which is what the first attempt got wrong. */
.hero-stack {
  display: grid;
  /* Three separate defaults conspire here, all of them min-content sizing:
     the parent track (now minmax(0,1fr)), this element's own min-width:auto,
     and -- the one that actually bit at 320px -- the IMPLICIT column this
     grid creates, which defaults to `auto` and therefore sizes to the cards'
     max-content. An explicit minmax(0,1fr) track pins it. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  /* Room for the back card to sit above the front one without clipping. */
  padding: 88px 22px 0 0;
  max-width: 400px;
  margin-inline: auto;
}

.stack-card {
  grid-area: 1 / 1;
  position: relative;
  align-self: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  /* One deliberate motion for the swap. z-index is stepped rather than
     transitioned so the incoming card crosses in front partway through
     instead of clipping through the other card. */
  transition: transform var(--motion-slow) var(--ease-out),
              box-shadow var(--motion-slow) var(--ease-out);
  transition-delay: 0ms;
}

.stack-card[data-state="front"] {
  z-index: 2;
  transform: translate(0, 0) scale(1);
  box-shadow: var(--shadow-2);
}

/* Offset in both directions -- up so the heading clears the front card, right
   so the stack reads as a deck rather than two cards on one axis. */
.stack-card[data-state="back"] {
  z-index: 1;
  transform: translate(22px, -88px) scale(0.965);
  box-shadow: var(--shadow-1);
}

/* Not dimmed. The covered part isn't visible anyway, and fading the peeking
   heading is what made the card behind look switched off. */
.stack-card[data-state="back"] .stack-body { pointer-events: none; }

/* Full-card click target, present only while the card is behind. */
.stack-bring {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: transparent;
}
.stack-card[data-state="front"] .stack-bring { display: none; }
/* Lifts slightly toward the front on hover -- the same 4px lift the product
   cards use, so the affordance is consistent across the site. */
.stack-card[data-state="back"]:hover { transform: translate(22px, -92px) scale(0.972); }
.stack-card[data-state="back"]:hover .stack-bring { cursor: pointer; }

.stack-head { margin-bottom: var(--space-s); }
.stack-head .eyebrow { margin-bottom: 4px; }
.stack-title {
  margin: 0;
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

/* ---------------- Calculator ---------------- */
.calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-xs) 0;
}
.calc-row + .calc-row { border-top: 1px solid var(--color-border); }
.calc-label {
  font-size: var(--type-small);
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.calc-value {
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.calc-total {
  margin-top: var(--space-xs);
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-text-primary);
}
.calc-total .calc-label { color: var(--color-text-primary); font-weight: var(--weight-semibold); }
.calc-total .calc-value { font-size: var(--type-card); color: var(--color-success-dark); }

/* Steppers. 44px targets — these are the interactive heart of the hero. */
.calc-control { display: flex; align-items: center; gap: 4px; flex: none; }
.calc-step {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out);
}
.calc-step:hover:not(:disabled) { border-color: var(--color-text-primary); background: var(--color-background); }
.calc-step:disabled { opacity: 0.35; cursor: not-allowed; }
.calc-control .calc-value { min-width: 72px; text-align: center; }

.calc-note {
  margin: var(--space-s) 0 0;
  font-size: var(--type-small);   /* reading text, not a label */
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ---------------- Wallet card ---------------- */
.wallet-balance {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
  font-variant-numeric: tabular-nums;
}
.wallet-meta {
  margin: 0 0 var(--space-m);
  font-size: var(--type-small);
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.wallet-progress-label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-xs);
  font-size: var(--type-small);
  color: var(--color-text-secondary);
}
.wallet-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--space-s) 0 var(--space-m);
  font-size: var(--type-small);
  line-height: 1.4;
  font-weight: var(--weight-medium);
}
.wallet-status i { font-size: 18px; flex: none; }
.wallet-status[data-ready="false"] { color: var(--color-text-secondary); }
.wallet-status[data-ready="true"] { color: var(--color-success-dark); }
.wallet-actions { display: flex; gap: var(--space-xs); }
/* 48px, not 44px: while this card sits behind it is rendered at scale(0.955),
   so a 44px control would measure 42px on screen. 48 x 0.955 = 45.8, which
   clears the minimum in both states. */
.wallet-actions .btn-secondary { width: auto; flex: 1; min-height: 48px; font-size: var(--type-small); }

@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-xxl); }
  .hero-ctas { flex-direction: row; }
  .hero-stack { margin-inline: 0 0 0 auto; max-width: 380px; }
}

/* ---------------- How it works ---------------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
}
.step { position: relative; }
.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-accent);
  font-size: 22px;
}
.step h3 { margin-bottom: var(--space-xs); font-size: var(--type-card); }
.step p {
  margin: 0;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-m); }
  /* One connected strip, not four separate cards: a hairline runs behind the
     icon row and each icon sits on top of it. */
  .steps::before {
    content: "";
    position: absolute;
    left: 24px; right: 24px;
    top: 24px;
    height: 1px;
    background: var(--color-border);
  }
  .step-icon { position: relative; z-index: 1; }
}

/* ---------------- Section header with a trailing link ---------------- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}
.section-head h2 { margin: 0; }
.see-all-link {
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 6px;
}
.see-all-link:hover { color: var(--color-accent-dark); }

/* ---------------- Why Zyentora (dark band) ---------------- */
.why-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
}
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
}
.why-item i { color: var(--color-accent); font-size: 26px; display: block; margin-bottom: var(--space-xs); }
.why-item h4 { margin: 0 0 6px; font-size: var(--type-card); font-weight: var(--weight-semibold); }
.why-item p {
  margin: 0;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.74);
}

@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); } }
@media (min-width: 1024px) {
  .why-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-xxl); align-items: start; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- Proof / testimonial ---------------- */
.proof-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
.proof-list { list-style: none; margin: 0 0 var(--space-l); padding: 0; }
.proof-list li {
  display: flex;
  gap: var(--space-s);
  align-items: flex-start;
  padding: var(--space-xs) 0;
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.proof-list i { color: var(--color-success); font-size: 22px; flex: none; margin-top: 3px; }

/* Right column of the two-column proof layout. Shaped to be wider than tall:
   the identity row sits on top and the quote below it, and the quote is held
   at card size rather than section size so the card stays a landscape
   rectangle instead of growing into a portrait one. */
.testimonial {
  margin: 0;
  align-self: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  padding: var(--space-m);
}

/* One header block. Avatar, name and handle sit on a single centred row --
   the previous version stacked name over handle and gave the handle a 44px
   min-height, which is what threw the avatar out of alignment. */
.testimonial-person {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding-bottom: var(--space-s);
  margin-bottom: var(--space-s);
  border-bottom: 1px solid var(--color-border);
}
.testimonial-person .avatar { flex: none; }
.testimonial-id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px var(--space-s);
}
.testimonial-name {
  margin: 0;
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}
.testimonial-handle {
  margin: 0;
  font-size: var(--type-small);
  color: var(--color-text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* Full 44px target. Safe now that the name and handle sit side by side in a
     centred row rather than stacked -- the row simply centres on 44px and the
     avatar stays in line. Stacking them was what broke the alignment before. */
  min-height: 44px;
  gap: 6px;
}
.testimonial-handle i { font-size: 18px; }
.testimonial-handle:hover { color: var(--color-accent-dark); }

.testimonial blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-card);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--tracking-heading);
}

@media (min-width: 640px) {
  .testimonial { padding: var(--space-l); }
}

@media (min-width: 1024px) {
  /* Right column gets the wider share, which is what lets the testimonial
     sit as a landscape rectangle rather than a tall one. */
  .proof-inner { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--space-xl); }
  .testimonial blockquote { font-size: 24px; }
  /* Nudged right and down so it settles against the heading beside it rather
     than sitting flush with the top of the column. Card itself unchanged. */
  .testimonial { margin: var(--space-l) 0 0 var(--space-m); }
}

/* ---------------- Trust statements ---------------- */
/* Same 4-slot layout the numeric version used, so real numbers can drop in
   later without restructuring anything. */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
}
.trust-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-m);
}
.trust-item i { color: var(--color-accent); font-size: 26px; display: block; margin-bottom: var(--space-s); }
.trust-item p {
  margin: 0;
  font-size: var(--type-body);
  line-height: 1.4;
  font-weight: var(--weight-medium);
}

@media (min-width: 1024px) {
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-m); }
  .trust-item { padding: var(--space-l); }
}

/* ---------------- FAQ ---------------- */
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 64px;
  padding: var(--space-s) 0;
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "\002B";
  flex: none;
  font-size: 24px;
  line-height: 1;
  color: var(--color-accent-dark);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > p {
  margin: 0 0 var(--space-m);
  max-width: 68ch;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

/* ---------------- Final CTA ---------------- */
.final-cta { text-align: center; }
.final-cta h2 { margin-bottom: var(--space-s); }
.final-cta .lede { margin-inline: auto; }