/* Phase 5C-01 — Hero and headline surface cohesion
   Purpose: make non-home heroes, archive heroes and article heroes read as one Telstar system. */
:root {
  --td-hero-background: radial-gradient(circle at 84% 18%, rgba(44, 166, 164, 0.18), transparent 32rem), linear-gradient(135deg, #071a32 0%, #0B2545 58%, #12355d 100%);
  --td-hero-panel: rgba(255, 255, 255, 0.072);
  --td-hero-panel-border: rgba(255, 255, 255, 0.145);
  --td-hero-panel-shadow: 0 24px 70px rgba(0, 16, 38, 0.18);
  --td-soft-grid: radial-gradient(circle, rgba(244, 246, 248, 0.34) 1px, transparent 1.25px);
}

.hero:not(.hero--home),
.article-hero,
.article-hero--editorial,
.archive-hero,
.archive-hero--editorial {
  position: relative;
  background: var(--td-hero-background) !important;
  color: #FFFFFF;
  overflow: hidden;
}

.hero:not(.hero--home)::before,
.article-hero::before,
.article-hero--editorial::before,
.archive-hero::before,
.archive-hero--editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--td-soft-grid);
  background-size: 42px 42px;
  opacity: 0.115;
}

.hero:not(.hero--home) .hero__grid {
  opacity: 0.075;
  background-size: 42px 42px;
}

.hero--inner,
.article-hero,
.archive-hero--editorial {
  padding-top: clamp(4.25rem, 7.5vw, 6.75rem);
  padding-bottom: clamp(3.6rem, 6.8vw, 5.75rem);
}

.hero--inner .hero__inner,
.archive-hero__inner--editorial {
  gap: clamp(1.6rem, 4.2vw, 4rem);
  align-items: center;
}

.hero--inner .hero__copy,
.article-hero__inner,
.archive-hero__copy {
  max-width: 860px;
}

.hero--inner .title-block__eyebrow,
.article-hero__meta,
.archive-hero__aside span,
.archive-hero__lead + span {
  color: var(--telstar-teal-soft);
}

.hero--inner .title-block__title,
.article-hero h1,
.archive-hero--editorial h1 {
  max-width: 880px;
  color: #FFFFFF;
  letter-spacing: -0.058em;
}

.hero--inner .title-block__subtitle,
.article-hero__excerpt,
.archive-hero__lead,
.archive-hero__description {
  max-width: 760px;
  color: rgba(244, 246, 248, 0.82);
  line-height: 1.58;
}

.hero--inner .telstar-cta-group {
  margin-top: clamp(1.35rem, 2vw, 1.8rem);
}

.hero-route-panel,
.hero-insights-panel,
.hero-minimal-panel,
.archive-hero__aside,
.hero--inner .hero-cards .telstar-stage-card,
.hero--inner .hero-cards .telstar-route-card,
.hero--inner .telstar-card--dark {
  border: 1px solid var(--td-hero-panel-border);
  border-radius: var(--telstar-radius-lg);
  background: var(--td-hero-panel);
  box-shadow: var(--td-hero-panel-shadow);
  backdrop-filter: blur(14px);
}

.hero-route-card,
.hero-insights-card {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.048);
  border-radius: var(--telstar-radius-sm);
}

.hero-route-card__label,
.hero-insights-card__label,
.hero-route-panel__eyebrow,
.hero-insights-panel__eyebrow,
.hero-minimal-panel__label {
  color: var(--telstar-teal-soft);
}

.hero-route-card__title,
.hero-insights-card__title,
.hero-route-panel__title,
.hero-insights-panel__title {
  color: #FFFFFF;
}

@media (max-width: 980px) {
  .hero--inner,
  .article-hero,
  .archive-hero--editorial {
    padding-top: clamp(3.2rem, 9vw, 4.6rem);
    padding-bottom: clamp(2.85rem, 7.5vw, 4rem);
  }

  .hero--inner .hero__inner,
  .archive-hero__inner--editorial {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hero-route-panel,
  .hero-insights-panel,
  .archive-hero__aside {
    max-width: none;
    margin-left: 0;
  }
}

/* Phase 5C-02 — Card and icon system cohesion
   Purpose: normalise cards, icons and card rhythm across pages, archives and frameworks. */
:root {
  --td-card-radius: 1.45rem;
  --td-card-border: rgba(11, 37, 69, 0.115);
  --td-card-shadow: 0 18px 46px rgba(11, 37, 69, 0.075);
  --td-card-shadow-hover: 0 24px 62px rgba(11, 37, 69, 0.115);
  --td-card-accent: var(--telstar-teal);
}

.telstar-card:not(.telstar-card--dark),
.proof-card,
.insights-feature-card,
.series-path-card,
.series-article-card,
.editorial-list-card,
.framework-section-card,
.pillar-card,
.home-diagnostic-value-card,
.home-software-step,
.home-software-shot,
.itzamna-definition-panel,
.itzamna-method-card,
.itzamna-stage-card,
.itzamna-screen-card,
.td-pillars-v3 .td-pillar-card,
.td-pillars-v3 .td-pillars-output__card {
  border-color: var(--td-card-border) !important;
  border-radius: var(--td-card-radius) !important;
  box-shadow: var(--td-card-shadow) !important;
}

.insights-feature-card,
.series-path-card,
.series-article-card,
.editorial-list-card,
.framework-section-card,
.pillar-card,
.home-diagnostic-value-card,
.home-software-step,
.home-software-shot,
.itzamna-method-card,
.itzamna-stage-card,
.itzamna-screen-card,
.td-pillars-v3 .td-pillar-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.insights-feature-card:hover,
.series-path-card:hover,
.series-article-card:hover,
.editorial-list-card:hover,
.home-diagnostic-value-card:hover,
.home-software-step:hover,
.home-software-shot:hover,
.itzamna-stage-card:hover,
.itzamna-screen-card:hover,
.td-pillars-v3 .td-pillar-card:hover {
  transform: translateY(-2px);
  border-color: rgba(44, 166, 164, 0.36) !important;
  box-shadow: var(--td-card-shadow-hover) !important;
}

.insights-feature-card::before,
.series-path-card::before,
.series-article-card::before,
.editorial-list-card::before,
.pillar-card::before,
.itzamna-method-card::before,
.itzamna-stage-card::before,
.td-pillars-v3 .td-pillar-card::before {
  background: linear-gradient(90deg, var(--td-card-accent), rgba(30, 90, 168, 0.52)) !important;
}

.insights-feature-card--risk::before,
.series-reading-path--risk .series-path-card::before,
.series-article-card--risk::before {
  background: linear-gradient(90deg, var(--telstar-accent), rgba(44, 166, 164, 0.58)) !important;
}

.telstar-icon-badge {
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  border-color: rgba(44, 166, 164, 0.24);
  background: rgba(44, 166, 164, 0.095);
  color: var(--telstar-primary);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}

.telstar-icon-badge--dark,
.hero--inner .telstar-icon-badge,
.hero-route-panel .telstar-icon-badge,
.hero-insights-panel .telstar-icon-badge,
.home-software-diagnostics__proof-card .telstar-icon-badge,
.framework-forward-panel .telstar-icon-badge,
.article-cta-panel .telstar-icon-badge {
  border-color: rgba(134, 244, 241, 0.24);
  background: rgba(134, 244, 241, 0.105);
  color: #FFFFFF;
}

.telstar-icon-badge--sm {
  width: 2.25rem;
  height: 2.25rem;
}

.telstar-icon-badge .material-symbols-outlined {
  font-size: 1.14rem;
}

.telstar-icon-badge__dot {
  width: 0.32rem;
  height: 0.32rem;
  top: 0.32rem;
  right: 0.32rem;
  background: var(--telstar-accent);
  opacity: 0.86;
}

.telstar-card h3,
.proof-card h3,
.insights-feature-card h3,
.series-path-card h3,
.series-article-card h3,
.editorial-list-card h2,
.editorial-list-card h3,
.itzamna-method-card h3,
.itzamna-stage-card h3,
.itzamna-screen-card h3,
.td-pillars-v3 .td-pillar-card__title {
  letter-spacing: -0.032em;
}

.telstar-card p,
.proof-card p,
.insights-feature-card p,
.series-path-card p,
.series-article-card p,
.editorial-list-card p,
.itzamna-method-card p,
.itzamna-stage-card p,
.itzamna-screen-card p,
.td-pillars-v3 .td-pillar-card__summary {
  line-height: 1.56;
}

@media (max-width: 720px) {
  .telstar-card:not(.telstar-card--dark),
  .proof-card,
  .insights-feature-card,
  .series-path-card,
  .series-article-card,
  .editorial-list-card,
  .framework-section-card,
  .pillar-card,
  .home-diagnostic-value-card,
  .home-software-step,
  .home-software-shot,
  .itzamna-method-card,
  .itzamna-stage-card,
  .itzamna-screen-card,
  .td-pillars-v3 .td-pillar-card {
    border-radius: 1.12rem !important;
  }
}

/* Phase 5C-03 — CTA and forward-panel cohesion
   Purpose: make conversion panels feel like one reusable component, not page-specific afterthoughts. */
:root {
  --td-cta-bg: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px), linear-gradient(135deg, #071A32 0%, #0B2545 62%, #12355D 100%);
  --td-cta-size: 24px 24px, 24px 24px, auto;
  --td-cta-border: rgba(44, 166, 164, 0.34);
}

.framework-forward-panel,
.home-software-diagnostics__cta-panel,
.article-cta-panel,
.article-forward__panel,
.footer-cta {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--td-cta-border) !important;
  border-radius: var(--telstar-radius-lg) !important;
  background: var(--td-cta-bg) !important;
  background-size: var(--td-cta-size) !important;
  color: #FFFFFF;
  box-shadow: 0 22px 58px rgba(0, 16, 38, 0.16);
}

.framework-forward-panel::before,
.home-software-diagnostics__cta-panel::before,
.article-cta-panel::before,
.article-forward__panel::before,
.footer-cta::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--telstar-teal), rgba(134, 244, 241, 0.14));
}

.framework-forward-panel h2,
.home-software-diagnostics__cta-copy h3,
.article-cta-panel h2,
.article-forward__panel h2,
.footer-cta h2 {
  color: #FFFFFF;
  letter-spacing: -0.052em;
}

.framework-forward-panel p,
.home-software-diagnostics__cta-copy p,
.article-cta-panel p,
.article-forward__panel p,
.footer-cta p {
  color: rgba(244, 246, 248, 0.80);
  line-height: 1.58;
}

.framework-forward-panel__grid,
.home-software-diagnostics__cta-panel,
.article-cta-panel {
  gap: clamp(1rem, 3vw, 2.2rem);
}

.framework-forward-panel__eyebrow,
.article-section-eyebrow,
.home-software-diagnostics__cta-copy .method-chip {
  color: var(--telstar-teal-soft) !important;
}

.framework-forward-panel .telstar-btn--primary,
.home-software-diagnostics__cta-panel .telstar-btn--primary,
.article-cta-panel .telstar-btn--primary,
.article-forward__panel .telstar-btn--primary,
.footer-cta .telstar-btn--primary {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--telstar-primary);
}

.framework-forward-panel .telstar-btn--primary:hover,
.framework-forward-panel .telstar-btn--primary:focus-visible,
.home-software-diagnostics__cta-panel .telstar-btn--primary:hover,
.home-software-diagnostics__cta-panel .telstar-btn--primary:focus-visible,
.article-cta-panel .telstar-btn--primary:hover,
.article-cta-panel .telstar-btn--primary:focus-visible,
.article-forward__panel .telstar-btn--primary:hover,
.article-forward__panel .telstar-btn--primary:focus-visible,
.footer-cta .telstar-btn--primary:hover,
.footer-cta .telstar-btn--primary:focus-visible {
  background: var(--telstar-surface-low);
  border-color: var(--telstar-surface-low);
  color: var(--telstar-primary);
}

.framework-forward-panel .telstar-btn--secondary,
.home-software-diagnostics__cta-panel .telstar-btn--secondary,
.article-cta-panel .telstar-btn--secondary,
.article-forward__panel .telstar-btn--secondary,
.footer-cta .telstar-btn--secondary {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.34);
  color: #FFFFFF;
}

.framework-forward-panel .telstar-btn--secondary:hover,
.framework-forward-panel .telstar-btn--secondary:focus-visible,
.home-software-diagnostics__cta-panel .telstar-btn--secondary:hover,
.home-software-diagnostics__cta-panel .telstar-btn--secondary:focus-visible,
.article-cta-panel .telstar-btn--secondary:hover,
.article-cta-panel .telstar-btn--secondary:focus-visible,
.article-forward__panel .telstar-btn--secondary:hover,
.article-forward__panel .telstar-btn--secondary:focus-visible,
.footer-cta .telstar-btn--secondary:hover,
.footer-cta .telstar-btn--secondary:focus-visible {
  background: rgba(255,255,255,0.11);
  border-color: rgba(134,244,241,0.72);
  color: #FFFFFF;
}

.footer-cta {
  margin-top: 1.35rem;
  padding: clamp(1rem, 2vw, 1.25rem);
}

.footer-cta .telstar-cta-group {
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .framework-forward-panel__grid,
  .home-software-diagnostics__cta-panel,
  .article-cta-panel {
    grid-template-columns: 1fr !important;
  }

  .framework-forward-panel__actions,
  .article-cta-panel__actions,
  .home-software-diagnostics__cta-actions .telstar-cta-group {
    justify-content: flex-start;
  }
}

/* Phase 5C-04 — Site rhythm and responsive consistency
   Purpose: reduce page-to-page spacing drift after the post/archive polish passes. */
.page-section {
  padding-top: clamp(3rem, 5.4vw, 5rem);
  padding-bottom: clamp(3rem, 5.4vw, 5rem);
}

.page-section + .page-section {
  border-top: 1px solid rgba(11, 37, 69, 0.045);
}

.page-section--dark + .page-section,
.framework-forward-panel + .page-section,
.article-cta-section + .article-post-nav {
  border-top: 0;
}

.title-block--section .title-block__eyebrow,
.article-section-eyebrow,
.framework-forward-panel__eyebrow,
.series-article-card__label,
.editorial-list-card__series,
.method-chip {
  letter-spacing: 0.15em;
}

.title-block--section .title-block__title,
.archive-editorial-heading h2,
.article-section-heading h2,
.td-pillars-v3 .td-pillars-intro h2,
.itzamna-positioning h2 {
  line-height: 1.02;
}

.title-block--section .title-block__subtitle,
.article-section-heading p,
.archive-editorial-heading p {
  line-height: 1.56;
}

.proof-grid,
.insights-feature-grid,
.series-reading-path,
.series-article-grid,
.editorial-archive-grid,
.itzamna-method-grid,
.itzamna-stage-grid,
.itzamna-screen-grid,
.td-pillars-v3 .td-pillars-grid {
  gap: clamp(1rem, 2vw, 1.35rem) !important;
}

.article-after-section {
  padding-top: clamp(2.2rem, 4.2vw, 3.4rem);
  padding-bottom: clamp(2.2rem, 4.2vw, 3.4rem);
}

@media (max-width: 980px) {
  .page-section {
    padding-top: clamp(2.55rem, 7vw, 3.7rem);
    padding-bottom: clamp(2.55rem, 7vw, 3.7rem);
  }
}

@media (max-width: 640px) {
  .page-section {
    padding-top: 2.25rem;
    padding-bottom: 2.45rem;
  }

  .proof-grid,
  .insights-feature-grid,
  .series-reading-path,
  .series-article-grid,
  .editorial-archive-grid,
  .itzamna-method-grid,
  .itzamna-stage-grid,
  .itzamna-screen-grid,
  .td-pillars-v3 .td-pillars-grid {
    gap: 0.85rem !important;
  }

  .telstar-btn {
    min-height: 3rem;
  }
}

/* Phase 6D — CTA selector corrections
   Purpose: fix stale About CTA group selector drift without changing panel design. */

.about-final-cta .telstar-cta-group {
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .about-final-cta .telstar-cta-group {
    justify-content: flex-start;
    text-align: left;
  }
}


/* Phase 7C — customer-facing language and visual aids */
.telstar-explainer-figure {
  margin: clamp(1.75rem, 4vw, 3rem) 0;
  border: 1px solid rgba(11, 37, 69, 0.11);
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 22px 60px rgba(11, 37, 69, 0.08);
}

.telstar-explainer-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

.telstar-explainer-figure figcaption {
  margin: 0;
  padding: 1rem clamp(1rem, 2vw, 1.5rem) 1.15rem;
  color: var(--td-slate, #5C6B73);
  font-size: 0.98rem;
  line-height: 1.55;
  background: linear-gradient(180deg, rgba(244, 246, 248, 0.7), #fff);
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

.telstar-explainer-figure--home,
.telstar-explainer-figure--route,
.telstar-explainer-figure--sprint,
.telstar-explainer-figure--pillars,
.telstar-explainer-figure--symptoms,
.telstar-explainer-figure--interviews,
.telstar-explainer-figure--evidence-sequence,
.telstar-explainer-figure--itzamna-method,
.telstar-explainer-figure--itzamna-lifecycle,
.telstar-explainer-figure--wwu {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.telstar-explainer-figure--home {
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
  margin-bottom: clamp(2rem, 5vw, 3.75rem);
}

.telstar-explainer-figure--article {
  margin: 0;
  height: 100%;
}

.article-visual-aids {
  background: #f8fafc;
}

.article-visual-aids__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.article-visual-aids__grid .telstar-explainer-figure img {
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: center;
}

.launch-insight-card__media img {
  object-fit: cover;
  object-position: center;
}

.framework-forward-panel .telstar-explainer-figure,
.page-section--dark .telstar-explainer-figure {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 980px) {
  .article-visual-aids__grid {
    grid-template-columns: 1fr;
  }

  .article-visual-aids__grid .telstar-explainer-figure img {
    aspect-ratio: auto;
  }
}

@media (max-width: 720px) {
  .telstar-explainer-figure {
    border-radius: 20px;
    margin-top: 1.5rem;
    margin-bottom: 1.75rem;
  }

  .telstar-explainer-figure figcaption {
    font-size: 0.92rem;
  }
}