/* ═══════════ TECH-LANDSCAPE BLOCK ═══════════ */
.tech-landscape {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 20px 24px 16px;
  margin: 20px 0 24px;
}
.tech-landscape h4 {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t3);
  margin-bottom: 10px;
}
.tl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}
.tl-row:last-child { margin-bottom: 0; }
.tl-label {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--t2);
  margin-right: 4px;
  white-space: nowrap;
}
.tl-note {
  font-size: .8125rem;
  color: var(--t2);
  line-height: 1.5;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--divider);
}
.tl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .625rem;
  color: var(--t3);
  margin-bottom: 8px;
}
.tl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ═══════════ TECHNOLOGY PILLS (FILLED) ═══════════ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: default;
  position: relative;
  transition: transform 150ms var(--apple-ease), box-shadow 150ms var(--apple-ease);
  white-space: nowrap;
}
.pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
/* training-time (green) */
.pill-train {
  background: rgba(52,199,89,.1);
  color: #1B7A34;
  border: 1px solid rgba(52,199,89,.25);
}
.pill-train:hover { background: rgba(52,199,89,.15); }
/* inference-time (blue) */
.pill-infer {
  background: rgba(0,113,227,.08);
  color: #005BB5;
  border: 1px solid rgba(0,113,227,.2);
}
.pill-infer:hover { background: rgba(0,113,227,.12); }
/* research/advanced (purple) */
.pill-research {
  background: rgba(88,86,214,.07);
  color: #4240A0;
  border: 1px solid rgba(88,86,214,.2);
}
.pill-research:hover { background: rgba(88,86,214,.11); }

/* ═══════════ PRODUCT PILLS (OUTLINED) ═══════════ */
.prod-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  background: transparent;
  cursor: default;
  position: relative;
  transition: transform 150ms var(--apple-ease), box-shadow 150ms var(--apple-ease), background 150ms var(--apple-ease);
  white-space: nowrap;
}
.prod-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
/* mainstream consumer (warm gray) */
.pp-consumer {
  border: 1.5px solid var(--border);
  color: var(--t1);
}
.pp-consumer:hover { background: rgba(0,0,0,.03); }
/* AI models (blue outline) */
.pp-model {
  border: 1.5px solid rgba(0,113,227,.35);
  color: #005BB5;
}
.pp-model:hover { background: rgba(0,113,227,.04); }
/* developer tools (green outline) */
.pp-dev {
  border: 1.5px solid rgba(52,199,89,.4);
  color: #1B7A34;
}
.pp-dev:hover { background: rgba(52,199,89,.04); }
/* enterprise (purple outline) */
.pp-enterprise {
  border: 1.5px solid rgba(88,86,214,.35);
  color: #4240A0;
}
.pp-enterprise:hover { background: rgba(88,86,214,.04); }
/* workplace (purple outline — horizontal tools) */
.pp-workplace {
  border: 1.5px solid rgba(88,86,214,.35);
  color: #4240A0;
}
.pp-workplace:hover { background: rgba(88,86,214,.04); }
/* industry (teal outline — vertical/domain-specific) */
.pp-industry {
  border: 1.5px solid rgba(48,176,199,.4);
  color: #1A8A9E;
}
.pp-industry:hover { background: rgba(48,176,199,.04); }

/* ═══════════ BENCHMARK PILLS ═══════════ */
.pp-bench {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(255,149,0,.06);
  border: 1.5px solid rgba(255,149,0,.25);
  color: #B36B00;
  cursor: default;
  position: relative;
  transition: transform 150ms var(--apple-ease), box-shadow 150ms var(--apple-ease);
  white-space: nowrap;
}
.pp-bench:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  background: rgba(255,149,0,.1);
}
.pp-bench.saturated {
  opacity: .55;
}

/* ═══════════ MATURITY DOTS ═══════════ */
.mat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.mat-prod { background: var(--green); }
.mat-emerge { background: var(--orange); }
.mat-theory { background: var(--purple); }

/* ═══════════ RICH TOOLTIPS (portal — appended to body via JS) ═══════════ */
.rich-tooltip {
  position: fixed;
  width: 340px;
  max-width: calc(100vw - 24px);
  padding: 0;
  background: rgba(29,29,31,.92);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 0.5px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 180ms var(--apple-ease), transform 180ms var(--apple-ease), visibility 0ms 180ms;
  z-index: 10000;
  color: rgba(255,255,255,.92);
  text-align: left;
  overflow: hidden;
}
.rich-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0ms, 0ms, 0ms;
}
.rich-tooltip.is-below {
  transform: translateY(-4px);
}
.rich-tooltip.is-below.is-visible {
  transform: translateY(0);
}
/* caret arrow — above (default) */
.rich-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--caret-x, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(29,29,31,.92);
}
/* caret arrow — below */
.rich-tooltip.is-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(29,29,31,.92);
}

/* ── Title bar ── */
.tt-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 0.5px solid rgba(255,255,255,.08);
}
.tt-badge {
  font-size: .5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.3;
}
.tt-badge-production { background: rgba(52,199,89,.18); color: #6EE092; }
.tt-badge-emerging { background: rgba(88,86,214,.18); color: #A5A3F0; }
.tt-badge-infrastructure { background: rgba(142,142,147,.15); color: #AEAEB2; }
.tt-badge-consumer { background: rgba(255,149,0,.18); color: #FFB84D; }
.tt-badge-ai-model { background: rgba(0,113,227,.18); color: #64B5F6; }
.tt-badge-dev-tool,
.tt-badge-developer { background: rgba(0,113,227,.18); color: #64B5F6; }
.tt-badge-workplace { background: rgba(88,86,214,.18); color: #A5A3F0; }
.tt-badge-industry { background: rgba(0,128,128,.18); color: #4DB8B8; }
.tt-badge-benchmark { background: rgba(142,142,147,.15); color: #AEAEB2; }
.tt-badge-platform { background: rgba(255,59,48,.18); color: #FF8A80; }
.tt-badge-persona-engine { background: rgba(175,82,222,.18); color: #CE93D8; }
.tt-badge-model { background: rgba(0,113,227,.18); color: #64B5F6; }
.tt-badge-creative { background: rgba(255,149,0,.18); color: #FFB84D; }
.tt-name {
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.95);
}

/* ── Body ── */
.tt-body {
  padding: 12px 16px;
}
.tt-what {
  font-size: .8125rem;
  font-weight: 400;
  color: rgba(255,255,255,.8);
  line-height: 1.55;
  margin: 0 0 12px;
}

/* ── Footer / can't ── */
.tt-cant {
  padding: 10px 16px;
  border-top: 0.5px solid rgba(255,255,255,.08);
  font-size: .75rem;
  font-weight: 400;
  color: rgba(255,255,255,.4);
  line-height: 1.45;
  background: rgba(0,0,0,.15);
}

/* ═══════════ CONTEXTUAL TOOLTIPS (portal — appended to body via JS) ═══════════ */
[data-tooltip] {
  cursor: default;
}
.portal-tooltip {
  position: fixed;
  padding: 6px 14px;
  background: rgba(29,29,31,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255,255,255,.92);
  max-width: 280px;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 180ms cubic-bezier(0.25,0.1,0.25,1),
              transform 180ms cubic-bezier(0.25,0.1,0.25,1);
  z-index: 10000;
}
.portal-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.portal-tooltip.is-below {
  transform: translateY(-3px);
}
.portal-tooltip.is-below.is-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .portal-tooltip,
  .rich-tooltip {
    transition: none !important;
  }
}

/* ═══════════ RESPONSIVE PILLS ═══════════ */
@media (max-width: 768px) {
  .rich-tooltip { width: 320px; }
}
@media (max-width: 640px) {
  .tech-landscape { padding: 16px 16px 12px; }
  .rich-tooltip {
    width: auto;
    max-width: calc(100vw - 24px);
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rich-tooltip::after { display: none; }
}

/* ═══════════ TOUCH DEVICE RESETS ═══════════ */
@media (hover: none) {
  .pill:hover,
  .prod-pill:hover,
  .pp-bench:hover {
    transform: none;
    box-shadow: none;
  }
  .pill-train:hover { background: rgba(52,199,89,.1); }
  .pill-infer:hover { background: rgba(0,113,227,.08); }
  .pill-research:hover { background: rgba(88,86,214,.07); }
  .pp-consumer:hover { background: transparent; }
  .pp-model:hover { background: transparent; }
  .pp-dev:hover { background: transparent; }
  .pp-enterprise:hover { background: transparent; }
  .pp-workplace:hover { background: transparent; }
  .pp-industry:hover { background: transparent; }
  .pp-bench:hover { background: rgba(255,149,0,.06); }
  .pill, .prod-pill, .pp-bench { touch-action: manipulation; }
}