/* ============================================================
   TRXSEND — landing page
   Requires brand.css to be loaded first.
   ============================================================ */

.landing-main {
  position: relative;
  z-index: 1;
}

/* ---------- HERO ----------
   Type is flush right and the glow field bleeds in from the right too,
   so the headline sits inside the light rather than beside it.        */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 120px) 0 200px;
  overflow: hidden;
  isolation: isolate;
}

.hero .glow-field {
  z-index: -1;
}

/* ---------- NODE NETWORK ----------
   Sits above the glow discs (z -1) and below .hero-inner (z 10). No z-index of
   its own, so the mark inside can escape to z 11 without a stacking context
   trapping it. */
.hero-net {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}

.hero-net.is-ready {
  opacity: 1;
}

.hero-net-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Second belt on the dissolve. Per-node alpha already reaches zero at the
     extent; this guarantees nothing can ever end on a hard rectangle edge,
     whatever the viewport ratio. */
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at var(--net-hub-x, 30%) var(--net-hub-y, 42%), #000 38%, rgba(0, 0, 0, 0.75) 62%, transparent 96%);
  mask-image: radial-gradient(ellipse 78% 82% at var(--net-hub-x, 30%) var(--net-hub-y, 42%), #000 38%, rgba(0, 0, 0, 0.75) 62%, transparent 96%);
}

/* Positioned from the same two numbers the canvas uses for its hub, written by
   JS as custom properties — the glyph can never drift from the graph centre. */
.hero-net-mark {
  position: absolute;
  left: var(--net-hub-x, 30%);
  top: var(--net-hub-y, 42%);
  transform: translate(-50%, -50%);
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hero-net-plane {
  width: var(--net-plane, 54px);
  height: var(--net-plane, 54px);
  fill: var(--orange);
  /* The only drop-shadow in the hero. It is on a 54px glyph, not on a
     full-size canvas, so it costs nothing. */
  filter: drop-shadow(0 0 18px rgba(255, 119, 0, 0.55));
}

.hero-net-caption {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--ink-50);
  white-space: nowrap;
}

.hero-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
  position: relative;
  z-index: 10;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-end;
}

.hero-title {
  font-family: var(--font);
  font-size: var(--t-hero);
  font-weight: 900;
  line-height: 1.04;
  text-align: right;
  color: var(--white);
  text-transform: lowercase;
  letter-spacing: -0.035em;
}

.hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--white) 0%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-subtitle {
  font-family: var(--font);
  font-size: var(--t-lead);
  font-weight: 300;
  color: var(--ink-70);
  text-align: right;
  line-height: 1.6;
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  align-self: stretch;
  margin-top: 8px;
  /* Starts invisible but still occupying its space, so the real numbers fade
     in without shifting the hero. */
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.hero-stats.ready {
  opacity: 1;
}

/* Stats endpoint unreachable — remove the row entirely rather than show
   placeholders that look like data. */
.hero-stats.failed {
  display: none;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.stat-value {
  font-family: var(--font);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-family: var(--font);
  font-size: var(--t-fine);
  font-weight: 300;
  color: var(--ink-50);
  text-transform: lowercase;
}

/* The {live} tag — the label's promise that this number is measured now. */
.stat-label .live {
  color: var(--orange);
  font-weight: 500;
}

/* ---------- easter egg bubble ----------
   Hangs off the header mark itself, so the quip reads as the logo talking.
   Positioned inside .header-brand rather than with computed coordinates:
   that way it tracks the mark through every resize and breakpoint for free. */
.header-brand {
  position: relative;
}

.quip {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 1001;
  width: max-content;
  max-width: min(320px, calc(100vw - 48px));
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: var(--t-fine);
  font-weight: 300;
  line-height: 1.5;
  padding: 13px 18px;
  border-radius: var(--r-md);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-8px) scale(0.94);
  transform-origin: top left;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

/* Rotated square instead of a border triangle: it inherits the bubble's own
   background, so the two never drift apart. */
.quip::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 20px;
  width: 10px;
  height: 10px;
  background: var(--white);
  border-radius: 2px;
  transform: rotate(45deg);
}

.quip.in {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  .quip {
    font-size: 12px;
    padding: 11px 15px;
  }
}

/* ---------- BANNER ----------
   Hard 50/50 colour split, no fade. The one loud object on the page. */
.banner {
  position: relative;
  padding: 0 var(--gutter);
  margin-top: -80px;
  z-index: 20;
}

/* Two real columns rather than a text block sitting on a decorative
   colour field — the split now separates the claim from its number. */
.banner-inner {
  max-width: var(--shell);
  margin: 0 auto;
  background: linear-gradient(90deg, var(--white) 0%, var(--white) 50%, var(--red) 50%, var(--red) 100%);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  min-height: 170px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.banner-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 44px 48px;
}

/* Centred inside its own half — left-aligned it sat right on the colour
   seam and read as having slipped off the white side. */
.banner-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  padding: 44px 48px;
  color: var(--black);
}

.banner-figure-value {
  font-family: var(--font);
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.banner-figure-value span {
  font-size: 0.34em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.banner-figure-label {
  font-family: var(--font);
  font-size: var(--t-fine);
  font-weight: 300;
  text-transform: lowercase;
  opacity: 0.75;
}

.banner-title {
  font-family: var(--font);
  font-size: var(--t-card);
  font-weight: 500;
  background: linear-gradient(90deg, #000 0%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.banner-text {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 300;
  color: var(--black);
  line-height: 1.6;
}

/* ---------- FEATURES ---------- */
.features {
  padding: 152px var(--gutter) 0;
}

.features-inner {
  max-width: var(--shell);
  margin: 0 auto;
}

/* 6 cards over 3 columns — the 4-column version left two orphans
   dangling on the second row. Tight 8px gutters + 40px radii are the
   point here: the cards read as one cluster, not six boxes.          */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.feature-card {
  background: var(--white);
  border-radius: var(--r-2xl);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 240px;
  transition: transform var(--dur) var(--ease);
}

/* The glow field, quoted inside the card on hover — one gesture that
   ties the white surfaces back to the black hero. */
.feature-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: -160px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--orange);
  filter: blur(70px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.feature-card:hover {
  transform: translateY(-6px);
}

.feature-card:hover::after {
  opacity: 0.35;
  transform: translate(-30px, -40px);
}

.feature-index {
  font-family: var(--font);
  font-size: var(--t-fine);
  font-weight: 500;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.feature-title {
  font-family: var(--font);
  font-size: var(--t-card);
  font-weight: 500;
  color: var(--black);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.feature-desc {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 300;
  color: var(--on-white-70);
  line-height: 1.6;
  margin-top: auto;
}

/* ---------- PRICING ---------- */
.pricing {
  padding: 152px var(--gutter) 0;
}

.pricing-inner {
  max-width: var(--shell);
  margin: 0 auto;
}

/* Segmented control with a sliding indicator instead of four
   independent outlined buttons. */
.pricing-period-selector {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 0 auto 48px;
  padding: 5px;
  background: var(--veil);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  width: fit-content;
  max-width: 100%;
  position: relative;
}

.period-btn {
  font-family: var(--font);
  font-size: var(--t-fine);
  font-weight: 300;
  color: var(--ink-50);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  padding: 9px 20px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space: nowrap;
  position: relative;
}

.period-btn:hover {
  color: var(--white);
}

.period-btn.active {
  color: var(--black);
  background: var(--white);
  font-weight: 500;
}

.period-btn .save {
  font-size: 10px;
  font-weight: 500;
  color: var(--orange);
  margin-left: 6px;
}

.period-btn.active .save {
  color: var(--red-deep);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: stretch;
}

.pricing-card {
  background: var(--white);
  border-radius: var(--r-2xl);
  padding: 40px 40px 44px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
}

/* The one card that inverts — black on a field of white cards. */
.pricing-card.popular {
  background: var(--black);
  border-color: var(--hair);
}

.pricing-card.popular::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -220px;
  right: -160px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: var(--orange);
  filter: blur(120px);
  opacity: 0.45;
}

.popular-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  text-transform: lowercase;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}

.pricing-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.pricing-name {
  font-family: var(--font);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.price-currency {
  font-family: var(--font);
  font-size: var(--t-card);
  font-weight: 300;
  color: var(--black);
}

.price-value {
  font-family: var(--font);
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 700;
  color: var(--black);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.pricing-period {
  font-family: var(--font);
  font-size: var(--t-fine);
  font-weight: 300;
  color: var(--on-white-70);
  min-height: 1.4em;
}

.pricing-card.popular .pricing-name,
.pricing-card.popular .price-currency,
.pricing-card.popular .price-value {
  color: var(--white);
}

.pricing-card.popular .pricing-period {
  color: var(--ink-70);
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: auto;
  padding-bottom: 32px;
  flex: 1;
}

.pricing-features li {
  font-family: var(--font);
  font-size: var(--t-fine);
  font-weight: 300;
  color: var(--black);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}

.pricing-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.75;
}

.pricing-card.popular .pricing-features li {
  color: var(--white);
}

.pricing-btn {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--white);
  background: var(--black);
  text-decoration: none;
  padding: 14px 24px;
  border-radius: var(--r-md);
  transition: all var(--dur-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--black);
  text-transform: lowercase;
  cursor: pointer;
}

.pricing-btn:hover {
  transform: translateY(-2px);
}

.pricing-btn.primary {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.pricing-card:first-child .pricing-btn {
  background: transparent;
  color: var(--black);
}

.pricing-card:first-child .pricing-btn:hover {
  background: var(--black);
  color: var(--white);
}

/* ---------- FAQ ---------- */
.faq {
  padding: 152px var(--gutter) 0;
}

.faq-inner {
  max-width: 900px;
  margin: 0 auto;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: var(--veil);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.faq-item.open {
  border-color: var(--hair);
  background: var(--veil-2);
}

.faq-question {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--white);
  padding: 22px 28px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  transition: background var(--dur) var(--ease);
}

.faq-question:hover {
  background: var(--veil);
}

.faq-question svg {
  flex-shrink: 0;
  color: var(--ink-50);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.faq-item.open .faq-question svg {
  transform: rotate(180deg);
  color: var(--orange);
}

/* grid-template-rows animates cleanly to auto height — no max-height
   guessing, so answers of any length open and close correctly. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer > div {
  overflow: hidden;
}

.faq-answer p {
  font-family: var(--font);
  font-size: var(--t-fine);
  font-weight: 300;
  color: var(--ink-70);
  padding: 0 28px 22px;
  line-height: 1.7;
}

/* ---------- CTA ---------- */
.cta {
  padding: 152px var(--gutter) 0;
}

.cta-inner {
  max-width: var(--shell);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--hair);
  border-radius: var(--r-2xl);
  padding: 96px 40px;
}

.cta-inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: -420px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 700px;
  border-radius: 50%;
  background: var(--orange);
  filter: blur(160px);
  opacity: 0.35;
}

.cta-title {
  font-family: var(--font);
  font-size: var(--t-display);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-transform: lowercase;
}

.cta-subtitle {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 300;
  color: var(--ink-70);
  max-width: 50ch;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  /* The copy re-centres below this width, so there is no empty half left for
     the network to live in. JS gates on the negation of this exact query and
     releases both canvas backing stores, so it is not merely invisible — it
     stops existing. */
  .hero-net {
    display: none;
  }

  .hero {
    padding: calc(var(--header-h) + 72px) 0 120px;
    min-height: auto;
    align-items: center;
  }

  .hero-content {
    align-items: center;
  }

  .hero-title,
  .hero-subtitle {
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-stats {
    gap: 40px;
    justify-content: space-around;
  }

  .stat {
    align-items: center;
  }

  .banner {
    margin-top: -60px;
  }

  .banner-inner {
    /* Stack the columns and turn the split horizontal — a 50/50
       vertical split would slice the text block down the middle. */
    grid-template-columns: 1fr;
    background: var(--white);
    border-radius: var(--r-lg);
    min-height: auto;
  }

  .banner-content {
    padding: 32px;
  }

  .banner-figure {
    background: var(--red);
    padding: 26px 32px;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
  }

  .features,
  .pricing,
  .faq,
  .cta {
    padding-top: 110px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pricing-card.popular {
    order: -1;
  }

  .cta-inner {
    padding: 72px 32px;
  }
}

@media (max-width: 640px) {
  .hero-stats {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }

  .stat {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

  .features,
  .pricing,
  .faq,
  .cta {
    padding-top: 88px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    padding: 32px 28px;
    min-height: auto;
  }

  .pricing-period-selector {
    flex-wrap: wrap;
    justify-content: stretch;
    width: 100%;
  }

  .period-btn {
    flex: 1 1 calc(50% - 4px);
    padding: 9px 10px;
  }

  .pricing-card {
    padding: 32px 28px 36px;
  }

  .faq-question {
    padding: 18px 20px;
  }

  .faq-answer p {
    padding: 0 20px 18px;
  }

  .cta-inner {
    padding: 56px 24px;
    border-radius: var(--r-xl);
  }
}