@import url("./tokens.css");
@import url("./base.css");
@import url("./layout.css");
@import url("./components.css");
@import url("./brand.css");
@import url("./store-badge.css");
@import url("./pages.css");
@import url("./software.css");
@import url("./tutorials.css");
@import url("./tutorial-watch.css");
@import url("./youtube-click-to-load.css");
@import url("./tutorial-card-panels.css");
@import url("./tutorial-hero.css");
@import url("./resources.css");
@import url("./product-guides.css");
@import url("./product-guide-icons.css");
@import url("./broker-imports.css");
@import url("./privacy.css");
@import url("./identity.css");
@import url("./header.css");
@import url("./home-showcase.css");
@import url("./aurora-identity.css");
@import url("./hero-product-stage.css");
@import url("./hero-background.css");
@import url("./home-polish.css");
@import url("./light-surfaces.css");
@import url("./hero-trust-strip.css");

.product-guide-page .guide-hero__copy h1 {
  max-width: 15ch;
  font-size: clamp(2.8rem, 5.5vw, 4.8rem);
}

.software-page .software-hero__note {
  color: var(--color-text-muted);
}

.software-page .trust-strip small {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}

.legal-notice-page h1 {
  font-size: clamp(2.8rem, 4.4vw, 4.1rem);
}

.discord-page h1 {
  font-size: clamp(2.8rem, 4.4vw, 4.1rem);
}

.tutorials-page .tutorials-hero__copy h1 {
  max-width: 15ch;
  font-size: clamp(3rem, 5vw, 4.5rem);
}

.tutorials-page .tutorials-hero__note {
  color: var(--color-text-muted);
}

.tutorials-page .tutorials-series__heading h2 {
  max-width: 18ch;
  font-size: clamp(2.35rem, 3.8vw, 3.6rem);
}

.tutorials-page .tutorials-hero__panel-icon,
.tutorials-page .tutorial-card__icon {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tutorials-page .tutorials-hero__panel-icon .icon {
  width: 2.8rem;
  height: 2.8rem;
  stroke-width: 1.3;
}

.tutorials-page .tutorial-card__icon .icon {
  width: 2.2rem;
  height: 2.2rem;
  stroke-width: 1.35;
}

.resources-page .resources-hero__copy h1 {
  font-size: clamp(3rem, 5vw, 4.5rem);
}

.resources-page .resources-hero__note {
  color: var(--color-text-muted);
}

.resources-page .resources-hero__panel > small {
  color: #a9c7e8;
}

.resources-page .resources-path-card__icon,
.resources-page .resources-guide-card__icon {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.resources-page .resources-path-card__icon .icon {
  width: 3rem;
  height: 3rem;
  stroke-width: 1.3;
}

.resources-page .resources-guide-card__icon .icon {
  width: 2.8rem;
  height: 2.8rem;
  stroke-width: 1.3;
}

.product-guide-page--windows .guide-hero__copy h1 {
  font-size: clamp(2.8rem, 4.6vw, 4.25rem);
}

.product-guide-page--windows .guide-hero__note {
  color: var(--color-text-muted);
}

.product-guide-page--windows .guide-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 10, 22, 0.72) 0%, rgba(1, 10, 22, 0.54) 36%, rgba(1, 10, 22, 0.24) 62%, rgba(1, 10, 22, 0.14) 100%),
    linear-gradient(180deg, rgba(1, 10, 22, 0.08) 0%, rgba(1, 10, 22, 0.24) 72%, rgba(1, 10, 22, 0.72) 100%),
    url("/assets/images/windows-trading-journal-hero.webp");
  background-repeat: no-repeat;
  background-position: center, center, 62% 48%;
  background-size: cover, cover, 120% auto;
  opacity: 0.82;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
}

.product-guide-page--windows .guide-hero__grid {
  z-index: 1;
}

.product-guide-page--windows .guide-summary {
  overflow: hidden;
}

.product-guide-page--windows .windows-guide-product {
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-6);
  overflow: hidden;
  border: 1px solid rgba(71, 151, 255, 0.24);
  border-radius: calc(var(--radius-lg) + 0.2rem);
  background: rgba(2, 14, 31, 0.82);
  box-shadow: 0 1rem 2.4rem rgba(0, 6, 18, 0.22);
}

.product-guide-page--windows .windows-guide-product img {
  width: 100%;
  height: auto;
  display: block;
}

.product-guide-page--windows .windows-guide-product figcaption {
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  border-top: 1px solid rgba(71, 151, 255, 0.18);
  color: #9fb8d6;
  background: rgba(3, 17, 38, 0.94);
  font-size: var(--text-xs);
  font-weight: 750;
}

.product-guide-page--windows .windows-guide-product figcaption span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.product-guide-page--windows .windows-guide-product figcaption .icon {
  width: 1rem;
  height: 1rem;
  color: #63d8ff;
}

.product-guide-page--spreadsheet .guide-hero__copy h1 {
  font-size: clamp(2.8rem, 4.4vw, 4.1rem);
}

.product-guide-page--spreadsheet .guide-hero__note {
  color: var(--color-text-muted);
}

.product-guide-page--spreadsheet .guide-summary {
  overflow: hidden;
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual {
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-6);
  overflow: hidden;
  border: 1px solid rgba(185, 156, 255, 0.24);
  border-radius: calc(var(--radius-lg) + 0.2rem);
  background: rgba(2, 14, 31, 0.82);
  box-shadow: 0 1rem 2.4rem rgba(0, 6, 18, 0.22);
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual__stage {
  position: relative;
  min-height: 12rem;
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.35fr);
  gap: clamp(var(--space-4), 3vw, var(--space-6));
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 22%, rgba(185, 156, 255, 0.16) 0 0.12rem, transparent 0.16rem),
    radial-gradient(circle at 39% 68%, rgba(99, 216, 255, 0.2) 0 0.1rem, transparent 0.14rem),
    radial-gradient(circle at 64% 18%, rgba(185, 156, 255, 0.18) 0 0.11rem, transparent 0.15rem),
    radial-gradient(circle at 86% 72%, rgba(99, 216, 255, 0.16) 0 0.12rem, transparent 0.16rem),
    linear-gradient(145deg, rgba(8, 24, 53, 0.96), rgba(3, 14, 32, 0.98));
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual__sheet {
  position: relative;
  z-index: 2;
  aspect-ratio: 1 / 1.02;
  overflow: hidden;
  border: 1px solid rgba(185, 156, 255, 0.42);
  border-radius: var(--radius-md);
  background:
    linear-gradient(rgba(185, 156, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 156, 255, 0.14) 1px, transparent 1px),
    linear-gradient(180deg, rgba(28, 44, 79, 0.96), rgba(8, 22, 48, 0.98));
  background-size: 100% 1.35rem, 2.15rem 100%, auto;
  box-shadow: 0 0.8rem 2rem rgba(5, 8, 24, 0.32);
  transform: rotate(-2deg);
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual__sheet::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1.35rem;
  border-bottom: 1px solid rgba(185, 156, 255, 0.22);
  background: rgba(185, 156, 255, 0.12);
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual__selection {
  position: absolute;
  top: 42%;
  left: 29%;
  width: 42%;
  height: 22%;
  border: 1px solid rgba(103, 230, 179, 0.8);
  background: rgba(103, 230, 179, 0.12);
  box-shadow: 0 0 1.15rem rgba(103, 230, 179, 0.18);
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual__bridge {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 31%;
  width: 27%;
  height: 1px;
  background: linear-gradient(90deg, rgba(185, 156, 255, 0.18), rgba(99, 216, 255, 0.72), rgba(99, 216, 255, 0.16));
  transform: translateY(-50%) rotate(-4deg);
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual__bridge i {
  position: absolute;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #63d8ff;
  box-shadow: 0 0 0.9rem rgba(99, 216, 255, 0.78);
  transform: translate(-50%, -50%);
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual__bridge i:nth-child(1) {
  left: 15%;
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual__bridge i:nth-child(2) {
  left: 52%;
  background: #b99cff;
  box-shadow: 0 0 0.9rem rgba(185, 156, 255, 0.78);
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual__bridge i:nth-child(3) {
  left: 88%;
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual__product {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(99, 216, 255, 0.28);
  border-radius: var(--radius-md);
  background: rgba(2, 14, 31, 0.92);
  box-shadow: 0 1rem 2.2rem rgba(0, 6, 18, 0.34);
  transform: rotate(1deg);
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual__product img {
  width: 100%;
  height: auto;
  display: block;
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual figcaption {
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  border-top: 1px solid rgba(185, 156, 255, 0.18);
  color: #a9bdd8;
  background: rgba(3, 17, 38, 0.94);
  font-size: var(--text-xs);
  font-weight: 750;
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual figcaption span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual figcaption .icon {
  width: 1rem;
  height: 1rem;
  color: #b99cff;
}

.product-guide-page--spreadsheet .spreadsheet-guide-visual figcaption span:last-child .icon {
  color: #63d8ff;
}

.product-guide-page--broker-imports .guide-hero__copy h1 {
  font-size: clamp(2.8rem, 4.4vw, 4.1rem);
}

.product-guide-page--broker-imports .guide-hero__note {
  color: var(--color-text-muted);
}

.product-guide-page--metatrader .guide-hero__copy h1 {
  font-size: clamp(2.8rem, 4.4vw, 4.1rem);
}

.product-guide-page--metatrader .guide-hero__note {
  color: var(--color-text-muted);
}

.product-guide-page--ctrader .guide-hero__copy h1 {
  font-size: clamp(2.8rem, 4.4vw, 4.1rem);
}

.product-guide-page--ctrader .guide-hero__note {
  color: var(--color-text-muted);
}

.product-guide-page--screenshots .guide-hero__copy h1 {
  font-size: clamp(2.8rem, 4.4vw, 4.1rem);
}

.product-guide-page--screenshots .guide-hero__note {
  color: var(--color-text-muted);
}

.product-guide-page--offline .guide-hero__copy h1 {
  font-size: clamp(2.8rem, 4.4vw, 4.1rem);
}

.product-guide-page--offline .guide-hero__note {
  color: var(--color-text-muted);
}

@media (min-width: 62.01rem) {
  .resources-page .resources-hero__copy h1 {
    max-width: 13ch;
  }

  .product-guide-page--windows .guide-hero__copy h1 {
    max-width: 16ch;
  }

  .product-guide-page--spreadsheet .guide-hero__copy h1 {
    max-width: 17ch;
  }

  .product-guide-page--broker-imports .guide-hero__copy h1 {
    max-width: 16ch;
  }

  .product-guide-page--metatrader .guide-hero__copy h1 {
    max-width: 17ch;
  }

  .product-guide-page--ctrader .guide-hero__copy h1 {
    max-width: 18ch;
  }

  .product-guide-page--screenshots .guide-hero__copy h1 {
    max-width: 19ch;
  }

  .product-guide-page--offline .guide-hero__copy h1 {
    max-width: 19ch;
  }
}

@media (max-width: 62rem) {
  .product-guide-page--windows .guide-hero::after {
    background-position: center, center, 72% 2rem;
    background-size: cover, cover, auto 54rem;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42rem, transparent 68rem);
    mask-image: linear-gradient(to bottom, #000 0%, #000 42rem, transparent 68rem);
  }
}

@media (max-width: 46rem) {
  .tutorials-page .tutorials-hero__copy h1 {
    font-size: clamp(2.6rem, 11vw, 3.6rem);
  }

  .resources-page .resources-hero__copy h1 {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }

  .product-guide-page--windows .guide-hero::after {
    background-position: center, center, 76% 1.5rem;
    background-size: cover, cover, auto 38rem;
    opacity: 0.34;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28rem, transparent 46rem);
    mask-image: linear-gradient(to bottom, #000 0%, #000 28rem, transparent 46rem);
  }

  .product-guide-page--windows .windows-guide-product figcaption {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-guide-page--spreadsheet .spreadsheet-guide-visual__stage {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .product-guide-page--spreadsheet .spreadsheet-guide-visual__sheet {
    width: min(55%, 12rem);
    justify-self: center;
  }

  .product-guide-page--spreadsheet .spreadsheet-guide-visual__bridge {
    display: none;
  }

  .product-guide-page--spreadsheet .spreadsheet-guide-visual figcaption {
    align-items: flex-start;
    flex-direction: column;
  }
}