/* ============================================================
   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(48px, 8vw, 104px) 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;
  overflow: hidden;
  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);
  /* The header is fixed; keep #products and #services clear of it on a jump. */
  scroll-margin-top: 88px;
}
.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-body);
  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:has(.card-link) {
  cursor: pointer;
}
@supports selector(:has(*)) {
  .card-link:focus-visible {
    outline: none;
  }
  .card:has(.card-link:focus-visible) {
    outline: 2px solid var(--tp-yellow);
    outline-offset: 3px;
  }
}
.card:hover {
  border-color: var(--tp-border-strong);
  transform: translateY(-3px);
}

/* deco corner ticks */
.corner {
  position: absolute;
  pointer-events: none;
  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-body);
  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-body);
  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;
}
/* service cards carry no availability line, so the link anchors the card bottom */
#services .card-link {
  margin-top: auto;
}
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--tp-radius-md);
}
.card:hover .card-link,
.card-link:hover {
  color: var(--tp-yellow-hi);
}
.card-link span {
  transition: margin var(--tp-duration-fast) var(--tp-ease-out);
}
.card:hover .card-link 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;
  }
  /* The orb deliberately bleeds past the right edge here; .hero-bg clips it
     so the bleed never becomes a horizontal scrollbar. */
  .hero-orb {
    width: min(86%, 540px);
    right: -16%;
    opacity: 0.18;
  }
}
/* Three-up only: the longest service name runs to two lines, so reserve two
   lines for the kicker and the title in every service card and the ledes,
   bodies, and links line up across the row. */
@media (min-width: 901px) {
  @supports (min-height: 2lh) {
    #services .card-kicker,
    #services .card-title {
      min-height: 2lh;
    }
  }
}
@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);
  }
}