/* ============================================================
   Thought Pattern AI - Home page layout
   Page-specific only; shared chrome (nav/footer/buttons/CTA) is
   in site.css. Tokens come from colors_and_type.css.
   ============================================================ */

/* -------- Hero ------------------------------------------- */
.hero {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 12vw, 160px) var(--tp-space-8) clamp(56px, 9vw, 120px);
  container-type: inline-size;   /* enables 100cqw orb sizing below */
}
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-orb {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  /* Size to the room left beside the ~680px copy column, so the orb shrinks
     to fit instead of overlapping the headline at narrow/non-16:9 windows. */
  width: clamp(0px, calc(100cqw - 688px), 480px);
  opacity: 0.9;
}
.hero-inner { position: relative; z-index: 1; max-width: 680px; }
.hero-title {
  font-family: var(--tp-font-display);
  font-weight: var(--tp-fw-regular);
  letter-spacing: var(--tp-ls-display);
  font-size: clamp(3.25rem, 11vw, 7rem);
  line-height: 0.98;
  color: var(--tp-fg);
  margin: 0 0 var(--tp-space-6);
  text-transform: uppercase;
}
.hero-tag {
  font-family: var(--tp-font-serif);
  font-size: var(--tp-fs-lg);
  line-height: var(--tp-lh-body);
  color: var(--tp-fg-body);
  margin: 0 0 var(--tp-space-8);
  max-width: 34em;
}
.hero-tag strong { color: var(--tp-fg); font-weight: var(--tp-fw-medium); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--tp-space-4); }

/* -------- Products --------------------------------------- */
.products {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--tp-space-8);
}
.section-head { max-width: 640px; margin-bottom: var(--tp-space-12); }
.section-intro {
  font-family: var(--tp-font-serif);
  font-size: var(--tp-fs-md);
  line-height: var(--tp-lh-body);
  color: var(--tp-fg-muted);
  margin: var(--tp-space-5) 0 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tp-space-6);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--tp-space-8);
  background: var(--tp-bg-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-md);
  scroll-margin-top: 96px;
  transition: border-color var(--tp-duration-base) var(--tp-ease-out),
              transform var(--tp-duration-base) var(--tp-ease-out);
}
.card:hover { border-color: var(--tp-border-strong); transform: translateY(-3px); }

/* deco corner ticks */
.corner { position: absolute; width: 12px; height: 12px; border-color: var(--tp-rule); }
.corner.tl { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; }
.corner.br { bottom: 10px; right: 10px; border-bottom: 1px solid; border-right: 1px solid; }

.card-glyph {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 0 var(--tp-space-5);
}
.card-kicker {
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-xs);
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-yellow-deep);
  margin: 0 0 var(--tp-space-4);
}
.card-title {
  font-family: var(--tp-font-display);
  font-weight: var(--tp-fw-regular);
  letter-spacing: var(--tp-ls-display);
  font-size: var(--tp-fs-xl);
  color: var(--tp-fg);
  margin: 0 0 var(--tp-space-2);
}
.card-lede {
  font-family: var(--tp-font-serif);
  font-style: italic;
  font-size: var(--tp-fs-md);
  color: var(--tp-fg);
  margin: 0 0 var(--tp-space-4);
}
.card-body {
  font-family: var(--tp-font-serif);
  font-size: var(--tp-fs-base);
  line-height: var(--tp-lh-body);
  color: var(--tp-fg-muted);
  margin: 0 0 var(--tp-space-6);
}
.card-avail {
  display: flex;
  align-items: center;
  gap: var(--tp-space-2);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-xs);
  letter-spacing: 0.04em;
  color: var(--tp-fg-muted);
  margin: auto 0 var(--tp-space-5);
}
.card-link {
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-sm);
  letter-spacing: 0.06em;
  color: var(--tp-yellow);
  text-decoration: none;
}
.card-link:hover { color: var(--tp-yellow-hi); }
.card-link span { transition: margin var(--tp-duration-fast) var(--tp-ease-out); }
.card-link:hover span { margin-left: 4px; }

/* -------- Proof band ------------------------------------- */
.proof {
  border-top: 1px solid var(--tp-border);
  border-bottom: 1px solid var(--tp-border);
  background: var(--tp-bg-recessed);
}
.proof-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 110px) var(--tp-space-8);
  text-align: center;
}
.proof-body {
  font-family: var(--tp-font-serif);
  font-size: var(--tp-fs-lg);
  line-height: var(--tp-lh-body);
  color: var(--tp-fg-body);
  margin: var(--tp-space-6) 0 0;
}
.proof-body strong { color: var(--tp-yellow); font-weight: var(--tp-fw-medium); }

/* -------- Responsive ------------------------------------- */
/* Once the copy fills the width, the orb has no room beside it - drop it to
   faint background texture so it can sit behind the copy harmlessly. */
@media (max-width: 1000px) {
  .hero { container-type: normal; }
  .hero-orb { width: min(86%, 540px); right: -16%; opacity: 0.18; }
}
@media (max-width: 900px) {
  .product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero, .products { padding-left: var(--tp-space-5); padding-right: var(--tp-space-5); }
}