/* Home-page composition; colours, typography, buttons and logos inherit portal.css. */
.chart-landing {
  --landing-gutter: clamp(24px, 7vw, 160px);
}

.chart-landing .landing-hero {
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: clamp(660px, 46vw, 940px);
  margin: 0;
  padding: 72px var(--landing-gutter) 80px;
  background: #0f1311;
}

.chart-landing .landing-hero::before,
.chart-landing .landing-hero::after {
  content: none;
}

.chart-landing .landing-chart-background {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.chart-landing .landing-hero .hero-copy {
  align-self: center;
  width: 100%;
  max-width: 700px;
}

.chart-landing .hero-copy::before {
  position: absolute;
  z-index: -1;
  inset: -60px -100px -50px -80px;
  background: radial-gradient(ellipse at 40% 50%, rgb(11 14 13 / 96%) 20%, rgb(11 14 13 / 75%) 48%, transparent 73%);
  content: "";
  pointer-events: none;
}

.chart-landing .landing-hero h1 {
  max-width: 690px;
  font-size: clamp(52px, 4.7vw, 86px);
  line-height: 1.02;
}

.chart-landing .landing-hero h1 em { font-style: italic; }
.chart-landing .landing-hero .hero-lede { max-width: 620px; }
.chart-landing .landing-hero .hero-trust,
.chart-landing .landing-hero .powered-by-charts { color: var(--text-soft); }
.chart-landing .powered-by-charts { margin-top: clamp(92px, 7vw, 112px); }

.chart-landing .platform-chart-section {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: clamp(620px, 45vw, 880px);
  padding: clamp(44px, 4vw, 76px) var(--landing-gutter) 120px;
  background: #f8f5ed;
  color: #17231e;
}

.chart-landing .platform-chart-section .landing-section-head {
  width: min(100%, 800px);
  max-width: none;
  margin: 0;
  padding: clamp(24px, 2.6vw, 44px);
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 12px;
  background: rgb(255 253 247 / 93%);
  box-shadow: 0 12px 50px rgb(52 62 45 / 4%);
}

.chart-landing .platform-chart-section .landing-section-head .eyebrow { color: #176448; }
.chart-landing .platform-chart-section h2 {
  font-size: clamp(34px, 3vw, 52px);
  line-height: 1.06;
}
.chart-landing .platform-chart-section .landing-section-head > p:last-of-type {
  margin-top: 20px;
  color: #49564f;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
}

.chart-landing .platform-feature-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
  color: #17231e;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.chart-landing .platform-feature-links a {
  display: grid;
  align-content: start;
  gap: 10px;
  width: fit-content;
  color: inherit;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.chart-landing .platform-feature-links span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: #e7efdf;
  color: #176448;
  font-size: 25px;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.chart-landing .platform-feature-links a:hover,
.chart-landing .platform-feature-links a:focus-visible {
  color: #176448;
  text-decoration: none;
  transform: translateY(-3px);
}
.chart-landing .platform-feature-links a:hover span,
.chart-landing .platform-feature-links a:focus-visible span {
  background: #d7e9d0;
  box-shadow: 0 8px 18px rgb(23 100 72 / 14%);
  transform: translateY(-2px);
}
.chart-landing a:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.chart-landing .platform-feature-links a:focus-visible { outline-color: #176448; }
@media (prefers-reduced-motion: reduce) {
  .chart-landing .platform-feature-links a,
  .chart-landing .platform-feature-links span { transition: none; }
  .chart-landing .platform-feature-links a:hover,
  .chart-landing .platform-feature-links a:focus-visible,
  .chart-landing .platform-feature-links a:hover span,
  .chart-landing .platform-feature-links a:focus-visible span { transform: none; }
}
.chart-landing main [id] { scroll-margin-top: 130px; }

@media (max-width: 1050px) {
  .chart-landing .landing-hero { min-height: 680px; }
  .chart-landing .landing-hero .landing-chart-background { object-position: 65% center; opacity: .7; }
  .chart-landing .powered-by-charts { margin-top: 60px; }
  .chart-landing .platform-chart-section { min-height: 690px; }
  .chart-landing .platform-chart-section .landing-chart-background { object-position: 75% center; }
  .chart-landing .signal-strip { flex-wrap: wrap; white-space: normal; gap: 16px 22px; }
}

@media (max-width: 600px) {
  .chart-landing .landing-header { position: relative; }
  .chart-landing .landing-hero { min-height: 660px; padding: 54px var(--landing-gutter) 64px; }
  .chart-landing .landing-hero h1 { font-size: clamp(44px, 11.8vw, 64px); }
  .chart-landing .hero-kicker { font-size: 9px; line-height: 1.7; letter-spacing: .1em; }
  .chart-landing .hero-kicker span { flex-shrink: 0; width: 18px; }
  .chart-landing .hero-copy::before { inset: -45px -24px; }
  .chart-landing .powered-by-charts { margin-top: 38px; }
  .chart-landing .platform-chart-section { min-height: 720px; padding: 30px 16px 170px; }
  .chart-landing .platform-chart-section .landing-section-head { padding: 25px 20px; }
  .chart-landing .platform-chart-section h2 { font-size: 34px; }
  .chart-landing .platform-feature-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .chart-landing main [id] { scroll-margin-top: 24px; }
}