/* ============================================================================
   Homepage: the Forge marketing layout. One band per idea, content centred:
   hero with a live tool beside it, the category index, a starter set, an ad
   band, comparisons, and a closing cobalt CTA panel above the footer.
   Everything runs on the tokens in variables.css; nothing here defines its
   own palette or type.
   ============================================================================ */

.home-main { overflow-x: clip; }

/* ---- hero ---------------------------------------------------------------- */
.home-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-12);
  padding-block: 4.5rem var(--space-16);
}

.home-hero-copy {
  flex: 1 1 25rem;
  min-width: 0;
}

.home-hero-copy .eyebrow {
  margin-bottom: var(--space-5);
}

.home-hero h1 {
  font-size: clamp(2.25rem, 5vw, var(--text-hero));
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-mega);
  color: var(--text-strong);
  max-width: var(--measure-headline);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}

.home-lede {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  max-width: var(--measure-lede);
  margin-bottom: var(--space-7);
}

.home-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.home-reassure {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* The live tool: a real word, character and reading-time counter. */
.home-hero-demo {
  flex: 1 1 23.75rem;
  min-width: 0;
}

.home-demo-card {
  padding: var(--card-pad-lg);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lifted);
}

.home-demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.badge-success {
  background: var(--status-success-soft);
  color: var(--status-success-text);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.home-counter-wrap {
  position: relative;
}

.home-counter-field {
  display: block;
  width: 100%;
  min-height: 8.25rem;
  padding: 0.875rem var(--space-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-band);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  resize: vertical;
  overflow: hidden;
  caret-color: var(--action-primary);
  transition: var(--transition-control);
}

.home-counter-field:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: var(--ring-focus);
}

/* Auto-grow measurement mirror (see home.js): same class as the field for
   identical font, padding and width, out of flow and invisible. Its height is
   only ever read, never written, so it cannot feed back into itself. */
.home-counter-mirror {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  visibility: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
}

.home-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-stat-num {
  font-family: var(--font-mono);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  line-height: var(--leading-snug);
}

.home-stat-lbl {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.home-demo-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---- sections ---------------------------------------------------------------- */
.home-main .section-header .eyebrow {
  margin-bottom: var(--space-3);
}

.home-main .section-header {
  margin-bottom: var(--space-8);
}

/* Starter set: the input-to-output line reads as data, so it is mono. */
.home-popular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-3);
}

.home-popular-grid .card-body {
  padding: var(--space-5);
}

.home-popular-grid .tool-card-title {
  font-size: var(--text-lg);
}

.home-popular-grid .tool-card-desc {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* site-boot.js hides an ad placeholder that has no slot (or no consent);
   the band it sits in goes with it rather than leaving an empty stripe. */
.band-ad:has(.ad-block[style*="none"]) {
  display: none;
}

.band-inner-ad {
  padding-block: var(--space-8);
}

.band-inner-ad .ad-block {
  margin: 0;
  background: var(--surface-page);
}

/* Comparisons: copy on the left, four quiet cards on the right. */
.home-compare {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-12);
}

.home-compare-copy {
  flex: 1 1 18.75rem;
  min-width: 0;
}

.home-compare-copy .eyebrow {
  margin-bottom: var(--space-3);
}

.home-compare-copy .section-lede {
  max-width: 40ch;
}

.home-compare-grid {
  flex: 2 1 26.25rem;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.375rem), 1fr));
  gap: var(--space-3);
}

.compare-card {
  display: block;
  padding: 1.125rem var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.compare-card:hover {
  box-shadow: var(--shadow-lifted);
  text-decoration: none;
}

.compare-card-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.compare-card-desc {
  display: block;
  margin-top: 6px;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* ---- closing CTA ------------------------------------------------------------- */
.home-closing {
  border-bottom: 0;
}

.home-closing-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-16) var(--section-y);
}

/* CtaBanner, brand tone: cobalt panel, 28px radius, text at 82% opacity. */
.cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-16) var(--space-12);
  border-radius: var(--radius-2xl);
  background: var(--surface-brand);
  color: #fff;
}

.cta-banner-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 32ch;
}

.cta-banner h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-mega);
  color: #fff;
}

.cta-banner p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: #fff;
  opacity: 0.82;
}

.cta-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.btn-on-brand {
  background: #fff;
  color: var(--ink-950);
  border-color: transparent;
  box-shadow: var(--shadow-xs);
}

.btn-on-brand:hover {
  background: var(--ink-100);
  color: var(--ink-950);
}

.btn-ghost-on-brand {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-ghost-on-brand:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Newsletter: only rendered once a provider is configured (newsletter.js
   removes the box otherwise), so it is a quiet card, not a second CTA. */
.home-closing .newsletter-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  padding: var(--card-pad) var(--card-pad-lg);
  background: var(--surface-card);
  color: var(--text-body);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.home-closing .newsletter-box h2 {
  font-size: var(--text-lg);
  color: var(--text-strong);
}

.home-closing .newsletter-box p {
  flex: 1 1 16rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.home-closing .newsletter-box form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.home-closing .newsletter-box input {
  margin: 0;
  min-width: 14rem;
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--text-strong);
}

@media (max-width: 640px) {
  .home-hero-inner {
    padding-block: var(--space-10) var(--space-12);
    gap: var(--space-8);
  }
  .cta-banner {
    padding: var(--space-10) var(--space-6);
  }
  .cta-banner h2 {
    font-size: var(--text-h3);
  }
}