/* ==========================================================================
   The Measurement Lab — Home
   Lifted from the inline styles in the Claude Design output's Home template.
   Section padding is per-section by design (170/116, 108, 116, 104, 112, 104)
   and preserved rather than flattened to one rhythm.
   ========================================================================== */

/* ============ HERO ======================================================= */
.tml-hero { padding: 170px 0 116px; }
.tml-hero-inner { max-width: 940px; }

.tml-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.tml-hero-rule {
  width: 26px;
  height: 2px;
  background: var(--cta);
}
.tml-hero-eyebrow-text {
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tml-purple-mid);
}

.tml-hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 30px;
  color: var(--tml-dark);
  max-width: 14ch;
}
.tml-hero h1 em { font-style: normal; color: var(--tml-purple); }

/* The "We start where measurement ends." kicker — set as its own line with a
   terracotta bar, per the Copy v2 design note. */
.tml-hero-kicker {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 18px;
}
.tml-hero-kicker-bar {
  width: 3px;
  align-self: stretch;
  background: var(--cta);
  border-radius: 2px;
}
.tml-hero-kicker p {
  font-size: var(--fs-display-1);
  line-height: 1.4;
  font-weight: var(--weight-bold);
  color: var(--tml-purple);
}
.tml-hero-clarifier {
  font-size: var(--fs-3xl);
  line-height: 1.58;
  color: var(--ui-text-strong);
  max-width: 720px;
  margin: 0 0 36px;
}
.tml-hero-ctas {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.tml-hero-ctas .tml-link-arrow { font-size: var(--fs-lg); }

/* ============ THESIS ===================================================== */
.tml-thesis { padding: 108px 0; }
.tml-thesis .tml-eyebrow { display: block; margin-bottom: 30px; }
.tml-thesis-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: start;
}
.tml-thesis h2 {
  font-size: var(--fs-display-7);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--tml-dark);
}
.tml-thesis h2 em { font-style: normal; color: var(--tml-purple); }
.tml-thesis-body { padding-top: 4px; }
.tml-thesis-body p {
  font-size: var(--fs-2xl);
  line-height: 1.62;
  color: var(--ui-text-strong);
  margin-bottom: 22px;
}
.tml-thesis-body p:last-child {
  margin-bottom: 0;
  color: var(--tml-dark);
  font-weight: var(--weight-bold);
}
.tml-thesis-body i { color: var(--tml-dark); }

/* ============ THREE STAGES =============================================== */
.tml-stages { padding: 116px 0; }
.tml-stages-intro { max-width: 680px; margin-bottom: 56px; }
.tml-stages-intro .tml-eyebrow { display: block; margin-bottom: 20px; }
.tml-stages-intro h2 {
  font-size: var(--fs-display-7);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--tml-dark);
}
.tml-stages-intro p {
  font-size: var(--fs-4xl);
  line-height: 1.4;
  color: var(--tml-purple);
  font-weight: var(--weight-bold);
}

/* Progression connector: the rule and three dots above the cards.
   The rail spans only the first THREE of four columns — the measurement-
   maturity axis. Embedded Leadership is the fourth card but sits off the
   rail (no dot), which is how the layout says "peer, different axis" rather
   than "fourth rung". In a 4-col grid the centre of col 1 is at 12.5% and
   the centre of col 3 at 62.5%, so the rule insets 12.5% from the left and
   37.5% from the right (gaps ignored, as in the original 3-col version). */
.tml-stages-connector { position: relative; height: 22px; margin-bottom: 14px; }
.tml-stages-rule {
  position: absolute;
  top: 9px;
  left: calc(12.5% - 5px);
  right: calc(37.5% - 5px);
  height: 2px;
  background: var(--tml-purple-pale);
}
.tml-stages-dots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.tml-stages-dots > div { display: flex; justify-content: center; }
.tml-stages-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid var(--tml-white);
}

.tml-stages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* Stage card. Accent color is set per card via --stage, which drives the
   top border, heading, product rules and the explore link — so the locked
   stage colours (Foundations purple, Interpretation mid-purple, Decision
   Systems terracotta) are declared once per card, not six times. */
.tml-stage {
  background: var(--tml-white);
  border: 1px solid var(--ui-border);
  border-top: 4px solid var(--stage);
  border-radius: 12px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
}
.tml-stage--foundations    { --stage: var(--tml-purple); }
.tml-stage--interpretation { --stage: var(--tml-purple-mid); }
.tml-stage--decision       { --stage: var(--tml-terracotta); }
/* Purple — the structure/identity colour, matching this product's Services
   section. Not a fourth colour in the maturity ramp; it reads as "off the
   rung system" precisely because purple is the base identity, not a step. */
.tml-stage--embedded       { --stage: var(--tml-purple); }

.tml-stage-name {
  font-size: var(--fs-display-1);
  font-weight: var(--weight-bold);
  color: var(--stage);
  line-height: 1.1;
}
.tml-stage-locator {
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ui-text-muted);
  margin: 10px 0 0;
}
.tml-stage-divider {
  height: 1px;
  background: var(--ui-divider);
  margin: 22px 0;
}
.tml-stage-products {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
.tml-stage-product {
  border-left: 3px solid var(--stage);
  padding-left: 14px;
}
.tml-stage-product-name {
  font-size: var(--fs-md);
  font-weight: var(--weight-bold);
  color: var(--tml-dark);
  line-height: 1.22;
}
.tml-stage-product-summary {
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ui-text-soft);
  margin-top: 4px;
}
.tml-stage-explore {
  margin-top: 24px;
  font-size: var(--fs-base);
  font-weight: var(--weight-bold);
  color: var(--stage);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tml-stage-explore:hover { text-decoration: underline; text-underline-offset: 3px; }

.tml-stages-footnote {
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--ui-text-faint);
  line-height: 1.5;
  margin: 28px 0 0;
  text-align: center;
}

/* ============ DIAGNOSTIC ================================================= */
.tml-diagnostic { padding: 104px 0; }
.tml-diagnostic .tml-container { max-width: 920px; }

.tml-diag-head { text-align: center; margin-bottom: 40px; }
.tml-diag-head .tml-eyebrow {
  display: block;
  color: var(--tml-purple-pale);
  margin-bottom: 16px;
}
.tml-diag-head h2 {
  font-size: var(--fs-display-6);
  line-height: 1.12;
  color: var(--tml-white);
}

.tml-diag-card {
  background: var(--tml-white);
  border-radius: 18px;
  padding: 48px;
  color: var(--tml-dark);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--ui-shadow-diagnostic);
}

/* --- Panels: only one is visible at a time --- */
.tml-diag-panel[hidden] { display: none; }

/* --- Intro --- */
.tml-diag-intro { text-align: center; }
.tml-diag-intro h3 {
  font-size: var(--fs-display-3);
  line-height: 1.2;
  color: var(--tml-dark);
  margin-bottom: 14px;
}
.tml-diag-intro p {
  font-size: var(--fs-xl);
  line-height: 1.5;
  color: var(--ui-text);
  max-width: 460px;
  margin: 0 auto 30px;
}
.tml-diag-begin {
  font-size: var(--fs-lg);
  padding: 14px 30px;
  border-radius: 8px;
}

/* --- Question --- */
.tml-diag-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.tml-diag-step {
  font-size: var(--fs-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--tml-purple-mid);
}
.tml-diag-dots { display: flex; gap: 6px; }
.tml-diag-dot {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--ui-border-lilac);
  transition: background 0.15s ease;
}
.tml-diag-dot.is-active { background: var(--tml-purple); }

.tml-diag-prompt {
  font-size: var(--fs-display-2);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  margin-bottom: 26px;
  color: var(--tml-dark);
}
.tml-diag-options { display: flex; flex-direction: column; gap: 12px; }
.tml-diag-option {
  width: 100%;
  text-align: left;
  background: var(--tml-grey);
  border: 1.5px solid transparent;
  border-radius: 11px;
  padding: 17px 22px;
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--tml-dark);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.tml-diag-option:hover {
  background: var(--tml-purple-light);
  border-color: var(--tml-purple-mid);
}

/* "None of these fit." — present on Q2 only, and deliberately quieter than
   the real answers. It is a pressure valve back to Q1, not a fifth option
   competing for attention. */
.tml-diag-option--none {
  background: transparent;
  border-color: var(--ui-border);
  color: var(--ui-text);
  font-size: var(--fs-base);
}
.tml-diag-option--none:hover {
  background: var(--tml-grey);
  border-color: var(--ui-text-muted);
}

/* --- Question nav: Back + the persistent bail-out link ------------------ */
.tml-diag-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: 22px;
  min-height: 20px; /* reserved so Q1 -> Q2 does not shift the card */
}
.tml-diag-back {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-base);
  font-weight: var(--weight-bold);
  color: var(--tml-purple-mid);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tml-diag-back:hover { color: var(--tml-purple); text-decoration: underline; }
.tml-diag-back[hidden] { display: none; }

.tml-diag-bail {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--ui-text-fainter);
}
.tml-diag-bail:hover { color: var(--tml-purple); text-decoration: underline; }

/* --- Result --- */
.tml-diag-result { animation: tmlFade 0.4s ease both; }
.tml-diag-result-head { text-align: center; margin-bottom: 8px; }
.tml-diag-result-head .tml-eyebrow {
  display: block;
  letter-spacing: var(--tracking-label);
  margin-bottom: 12px;
}

/* Reroute acknowledgement — L-branch guard only. Sits above the standard
   Audit blurb and is visually distinct from it so the redirect reads as
   deliberate rather than as a mismatched result. */
.tml-diag-reroute {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ui-text-strong);
  max-width: 560px;
  margin: 0 auto 16px;
  padding: 14px 20px;
  background: var(--tml-purple-light);
  border-radius: 10px;
  text-align: left;
}
.tml-diag-reroute strong { color: var(--tml-purple); }

.tml-diag-title {
  font-size: var(--fs-display-4);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  color: var(--tml-purple);
  margin-bottom: 12px;
}
.tml-diag-blurb {
  font-size: var(--fs-xl);
  line-height: 1.55;
  color: var(--ui-text);
  max-width: 560px;
  margin: 0 auto;
}
.tml-diag-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.tml-diag-actions .tml-btn { font-size: var(--fs-md); padding: 13px 24px; }
.tml-diag-actions .tml-link-arrow { font-size: var(--fs-md); }

.tml-diag-restart-wrap { text-align: center; margin-top: 24px; }
.tml-diag-restart {
  background: none;
  border: 0;
  font-size: var(--fs-base);
  font-weight: var(--weight-bold);
  color: var(--ui-text-fainter);
  cursor: pointer;
}
.tml-diag-restart:hover { color: var(--tml-purple); text-decoration: underline; }

/* ============ PROOF — TRACK RECORD ======================================= */
.tml-proof { padding: 112px 0; }
.tml-proof-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 72px;
  align-items: center;
}
.tml-proof .tml-eyebrow { display: block; margin-bottom: 24px; }
.tml-proof h2 {
  font-size: var(--fs-display-5);
  line-height: 1.18;
  letter-spacing: -0.008em;
  margin: 0 0 20px;
  color: var(--tml-dark);
}
.tml-proof-lede {
  font-size: var(--fs-2xl);
  line-height: 1.6;
  color: var(--ui-text);
  margin: 0 0 30px;
}
.tml-proof .tml-link-arrow { font-size: var(--fs-md); }

.tml-proof-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tml-proof-card {
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  padding: 24px 26px;
}
.tml-proof-card-name {
  font-size: var(--fs-3xl);
  font-weight: var(--weight-bold);
  color: var(--tml-dark);
}
.tml-proof-card-role {
  font-size: var(--fs-sm);
  color: var(--ui-text-faint);
  margin-top: 4px;
}

/* --- Reserved slots (testimonial, Insights) ------------------------------
   Both ship hidden. The [hidden] attribute on the element is what keeps them
   out of the page; these rules exist so that removing the attribute renders
   a finished slot with no further work. */
.tml-reserved {
  margin-top: 44px;
  position: relative;
  border: 1px dashed var(--ui-reserved-border);
  border-radius: 14px;
  padding: 42px 46px;
  background: var(--tml-grey);
}
.tml-testimonial-quote {
  font-size: var(--fs-display-1);
  line-height: 1.5;
  color: var(--tml-dark);
  margin: 0 0 20px;
  max-width: 880px;
}
.tml-testimonial-attrib {
  font-size: var(--fs-md);
  font-weight: var(--weight-bold);
  color: var(--tml-purple-mid);
}

/* Insights reserved slot: a 3-up "latest writing" grid. Ships hidden and
   empty (no public Insights page at launch), but the grid is defined now so
   populating three cards and removing [hidden] needs no layout work — the
   skeleton brief requires it be built to receive. Collapses to one column on
   mobile via mobile.css. */
.tml-reserved .tml-eyebrow { display: block; margin-bottom: 20px; }
.tml-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ============ HOME CLOSE ================================================= */
.tml-close { padding: 104px 0; }
.tml-close .tml-container { max-width: 880px; text-align: center; }
.tml-close h2 {
  font-size: var(--fs-display-8);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  color: var(--tml-white);
}
.tml-close p {
  font-size: var(--fs-3xl);
  line-height: 1.6;
  color: var(--ui-on-purple-soft);
  max-width: 640px;
  margin: 0 auto 36px;
}