/* ==========================================================================
   INSTRUMENT GRADE — COMPONENTS
   Named components only. Everything reads semantic tokens so components work
   unchanged on either ground.
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */

.gt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gt-s3);
  padding: var(--gt-s4) var(--gt-s6);
  font-family: var(--gt-font-mono);
  font-size: var(--gt-text-xs);
  letter-spacing: var(--gt-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border: var(--gt-hairline) solid transparent;
  border-radius: var(--gt-radius);
  cursor: pointer;
  transition: background var(--gt-dur) var(--gt-ease),
              color var(--gt-dur) var(--gt-ease),
              border-color var(--gt-dur) var(--gt-ease);
}

.gt-btn--primary {
  background: var(--gt-solar);
  color: var(--gt-abyssal);
  border-color: var(--gt-solar);
}

.gt-btn--primary:hover { background: #F2B558; border-color: #F2B558; }

.gt-btn--ghost {
  background: transparent;
  color: var(--gt-ink);
  border-color: var(--gt-rule-strong);
}

.gt-ground-bone .gt-btn--ghost { border-color: var(--gt-rule-on-light); }
.gt-btn--ghost:hover { border-color: var(--gt-solar); color: var(--gt-solar); }

/* The arrow advances on hover. One micro-interaction, used everywhere, so it
   becomes a learned signal rather than decoration. */
.gt-btn__arrow { transition: transform var(--gt-dur) var(--gt-ease-out); }
.gt-btn:hover .gt-btn__arrow { transform: translateX(4px); }

.gt-btn-row { display: flex; flex-wrap: wrap; gap: var(--gt-s4); }

/* --- Site header ---------------------------------------------------------- */

.gt-header {
  background: var(--gt-abyssal);
  border-bottom: var(--gt-hairline) solid var(--gt-rule-on-dark);
  position: sticky;
  top: 0;
  z-index: var(--gt-z-header);
}

.gt-header__inner {
  max-width: var(--gt-container);
  margin-inline: auto;
  padding: var(--gt-s5) var(--gt-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gt-s6);
}

.gt-logo {
  font-family: var(--gt-font-display);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-weight: 700;
  font-size: var(--gt-text-lg);
  letter-spacing: var(--gt-tracking-display);
  color: var(--gt-bone);
  text-decoration: none;
}

.gt-nav { display: flex; align-items: center; gap: var(--gt-s6); }
.gt-nav ul { display: flex; gap: var(--gt-s6); list-style: none; margin: 0; padding: 0; }

.gt-nav a {
  font-family: var(--gt-font-mono);
  font-size: var(--gt-text-xs);
  letter-spacing: var(--gt-tracking-mono);
  text-transform: uppercase;
  color: var(--gt-ink-muted);
  text-decoration: none;
  padding-block: var(--gt-s2);
  border-bottom: var(--gt-hairline) solid transparent;
  transition: color var(--gt-dur-fast) var(--gt-ease);
}

.gt-nav a:hover,
.gt-nav .current-menu-item a { color: var(--gt-bone); border-bottom-color: var(--gt-solar); }

.gt-nav__toggle { display: none; background: none; border: 0; color: var(--gt-bone); padding: var(--gt-s2); cursor: pointer; }

@media (max-width: 900px) {
  .gt-nav__toggle { display: block; }
  .gt-nav ul {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--gt-abyssal-raised);
    border-bottom: var(--gt-hairline) solid var(--gt-rule-on-dark);
    padding: var(--gt-s4) var(--gt-gutter) var(--gt-s6);
  }
  .gt-nav[data-open="true"] ul { display: flex; }
  .gt-nav ul li { border-top: var(--gt-hairline) solid var(--gt-rule-on-dark); }
  .gt-nav ul a { display: block; padding: var(--gt-s4) 0; }
}

/* --- Hero ----------------------------------------------------------------
   The thesis. Headline sits against a live measurement, not a stock image:
   the claim and the evidence share the same frame.
-------------------------------------------------------------------------- */

.gt-hero { padding-block: clamp(4rem, 10vw, 9rem) var(--gt-section-y); }

.gt-hero__headline {
  font-size: var(--gt-text-4xl);
  max-width: 18ch;
  margin-bottom: var(--gt-s6);
}

.gt-hero__lede { max-width: 52ch; font-size: var(--gt-text-lg); line-height: var(--gt-leading-loose); }

.gt-hero__actions { margin-top: var(--gt-s7); }

/* --- Offering card (ATLAS / HELIOGRID / LEXICON) ------------------------- */

.gt-offering {
  background: var(--gt-abyssal-raised);
  border-radius: var(--gt-radius);
  padding: var(--gt-s6);
  display: flex;
  flex-direction: column;
  gap: var(--gt-s4);
  border-top: 2px solid var(--gt-solar);
  transition: transform var(--gt-dur) var(--gt-ease-out);
}

.gt-ground-bone .gt-offering { background: var(--gt-bone-raised); }

.gt-offering:hover { transform: translateY(-3px); }

.gt-offering__name {
  font-family: var(--gt-font-display);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-weight: 700;
  font-size: var(--gt-text-xl);
  letter-spacing: 0.02em;
  color: var(--gt-ink);
  margin: 0;
}

.gt-offering__role {
  font-family: var(--gt-font-mono);
  font-size: var(--gt-text-2xs);
  letter-spacing: var(--gt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gt-data);
}

.gt-offering__body { color: var(--gt-ink-muted); margin: 0; }

.gt-offering__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gt-s3); }

.gt-offering__list li {
  font-size: var(--gt-text-sm);
  color: var(--gt-ink-muted);
  padding-left: var(--gt-s5);
  position: relative;
}

.gt-offering__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: var(--gt-hairline);
  background: var(--gt-solar);
}

.gt-offering__link { margin-top: auto; padding-top: var(--gt-s4); }

/* --- Methodology stage (THROPAIC) ---------------------------------------
   Eight stages in fixed order, so the letter marker is load-bearing: it
   encodes both the sequence and the acronym. Numbering earns its place here.
-------------------------------------------------------------------------- */

.gt-stage {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--gt-s5);
  padding-block: var(--gt-s5);
  border-top: var(--gt-hairline) solid var(--gt-rule);
  align-items: start;
}

.gt-stage__letter {
  font-family: var(--gt-font-display);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-size: var(--gt-text-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--gt-solar);
}

.gt-stage__name { margin: 0 0 var(--gt-s2); font-size: var(--gt-text-lg); }
.gt-stage__body { margin: 0; font-size: var(--gt-text-sm); }

@media (max-width: 600px) {
  .gt-stage { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--gt-s4); }
}

/* --- Metric block --------------------------------------------------------- */

.gt-metric { display: flex; flex-direction: column; gap: var(--gt-s2); }

.gt-metric__value {
  font-family: var(--gt-font-display);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-size: var(--gt-text-2xl);
  font-weight: 700;
  color: var(--gt-data);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gt-metric__label {
  font-family: var(--gt-font-mono);
  font-size: var(--gt-text-2xs);
  letter-spacing: var(--gt-tracking-mono);
  text-transform: uppercase;
  color: var(--gt-ink-faint);
}

/* --- Audit conversion panel ---------------------------------------------
   The single primary conversion on the site. Bracket-framed because the
   audit is literally the thing being measured.
-------------------------------------------------------------------------- */

.gt-audit-panel {
  background: var(--gt-abyssal-raised);
  padding: clamp(2rem, 5vw, var(--gt-s8));
  border-radius: var(--gt-radius);
}

.gt-ground-bone .gt-audit-panel { background: var(--gt-bone-raised); }

/* --- Disclosure list -----------------------------------------------------
   Phase 2 decision 5: state price, duration, deliverable, and what happens
   next, on the page, before the form. Withholding these is what boutique
   competitors do and it is the main reason their conversion pages fail
   technical evaluators.
-------------------------------------------------------------------------- */

.gt-disclosure { display: grid; gap: 0; margin: var(--gt-s6) 0; }

.gt-disclosure__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--gt-s5);
  padding-block: var(--gt-s4);
  border-top: var(--gt-hairline) solid var(--gt-rule);
  align-items: baseline;
}

.gt-disclosure__row:last-child { border-bottom: var(--gt-hairline) solid var(--gt-rule); }

.gt-disclosure__term {
  font-family: var(--gt-font-mono);
  font-size: var(--gt-text-2xs);
  letter-spacing: var(--gt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gt-ink-faint);
}

.gt-disclosure__desc { margin: 0; font-size: var(--gt-text-sm); color: var(--gt-ink); }

@media (max-width: 600px) {
  .gt-disclosure__row { grid-template-columns: 1fr; gap: var(--gt-s2); }
}

/* --- Forms ---------------------------------------------------------------- */

.gt-field { display: flex; flex-direction: column; gap: var(--gt-s2); margin-bottom: var(--gt-s5); }

.gt-field label {
  font-family: var(--gt-font-mono);
  font-size: var(--gt-text-2xs);
  letter-spacing: var(--gt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gt-ink-faint);
}

.gt-field input,
.gt-field select,
.gt-field textarea {
  font-family: var(--gt-font-body);
  font-size: var(--gt-text-base);
  color: var(--gt-ink);
  background: transparent;
  border: var(--gt-hairline) solid var(--gt-rule-strong);
  border-radius: var(--gt-radius);
  padding: var(--gt-s4);
  width: 100%;
  transition: border-color var(--gt-dur-fast) var(--gt-ease);
}

.gt-ground-bone .gt-field input,
.gt-ground-bone .gt-field select,
.gt-ground-bone .gt-field textarea { border-color: var(--gt-rule-on-light); }

.gt-field input:hover, .gt-field textarea:hover { border-color: var(--gt-glacial); }
.gt-field textarea { min-height: 8rem; resize: vertical; }

.gt-field__hint { font-size: var(--gt-text-sm); color: var(--gt-ink-faint); }

/* --- Signal (insights) card ---------------------------------------------- */

.gt-signal {
  display: flex;
  flex-direction: column;
  gap: var(--gt-s3);
  padding-top: var(--gt-s5);
  border-top: var(--gt-hairline) solid var(--gt-rule);
}

.gt-signal__meta {
  font-family: var(--gt-font-mono);
  font-size: var(--gt-text-2xs);
  letter-spacing: var(--gt-tracking-mono);
  text-transform: uppercase;
  color: var(--gt-ink-faint);
  display: flex;
  gap: var(--gt-s3);
}

.gt-signal__title { font-size: var(--gt-text-lg); margin: 0; }
.gt-signal__title a { text-decoration: none; }
.gt-signal__title a:hover { color: var(--gt-solar); }

/* --- Footer --------------------------------------------------------------- */

.gt-footer {
  background: var(--gt-abyssal-sunk);
  color: var(--gt-bone);
  padding-block: var(--gt-s8) var(--gt-s6);
  border-top: var(--gt-hairline) solid var(--gt-rule-on-dark);
  --gt-ground: var(--gt-abyssal-sunk);
}

.gt-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--gt-s7) var(--gt-s6);
  padding-bottom: var(--gt-s7);
}

.gt-footer h4 {
  font-family: var(--gt-font-mono);
  font-stretch: normal;
  font-variation-settings: normal;
  font-size: var(--gt-text-2xs);
  letter-spacing: var(--gt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gt-ink-faint);
  margin-bottom: var(--gt-s4);
}

.gt-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gt-s3); }
.gt-footer a { color: rgba(233, 229, 219, 0.72); text-decoration: none; font-size: var(--gt-text-sm); }
.gt-footer a:hover { color: var(--gt-solar); }

.gt-footer__base {
  border-top: var(--gt-hairline) solid var(--gt-rule-on-dark);
  padding-top: var(--gt-s5);
  display: flex;
  justify-content: space-between;
  gap: var(--gt-s5);
  flex-wrap: wrap;
  font-family: var(--gt-font-mono);
  font-size: var(--gt-text-2xs);
  letter-spacing: var(--gt-tracking-mono);
  color: var(--gt-ink-faint);
}

@media (max-width: 900px) { .gt-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gt-footer__grid { grid-template-columns: 1fr; } }

/* --- Scroll reveal -------------------------------------------------------
   One orchestrated entrance, applied to section children only. Reduced
   motion is handled globally in base.css; the no-JS fallback is visible.
-------------------------------------------------------------------------- */

.gt-reveal { opacity: 0; transform: translateY(14px); }

.gt-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--gt-dur-slow) var(--gt-ease-out),
              transform var(--gt-dur-slow) var(--gt-ease-out);
}

.no-js .gt-reveal { opacity: 1; transform: none; }