/* Uptimia final-CTA block — v3 design language. Loaded globally on every marketing page
   so the signup_area.html.twig partial renders correctly regardless of which page CSS
   is otherwise active. Self-contained: defines its own tokens. Scoped under .final-cta-outer.

   Style: full-bleed dark section with a wavy line-chart background (v4-style), left-aligned
   content, flowing continuously into the footer. */

/* doubled-class selector bumps specificity to (0,2,0) so it wins against
   homepage-v30.css's `.hp-content * { margin: 0; padding: 0 }` reset (0,1,1). */
.final-cta-outer.final-cta-outer {
  --dark:           #2a2c30;
  --dark-ink-2:     rgba(245,247,250,.84);
  --dark-soft:      rgba(245,247,250,.45);
  --accent:         #00994f;
  --accent-hover:   #04a557;
  --accent-bright:  #4ec97e;
  --ink:            #0c0c0d;

  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Geist', 'SF Pro Display', 'Segoe UI', sans-serif;
  --serif:   'New York', 'Iowan Old Style', 'Charter', Georgia, serif;
  --mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', 'Geist Mono', Menlo, monospace;
  --ease:    cubic-bezier(.22,.61,.36,1);

  /* full-bleed dark band with a faint dotted world map + glowing checkpoint pins on the right */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background-color: var(--dark);
  background-image: url('/website/img/svg/cta-map.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 130%;
  position: relative;
  overflow: hidden;
}

.final-cta-outer *, .final-cta-outer *::before, .final-cta-outer *::after { box-sizing: border-box; }

/* Content sits left, constrained so the chart peaks stay visible on the right. */
.final-cta-outer .final-cta.final-cta {
  margin: 0 auto;
}
.final-cta-outer .final-cta {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 28px 120px;
  text-align: left;
  color: #fff;
  min-height: 520px;
  /* override the legacy .final-cta box rules in homepage.css / homepage-v30.css */
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
/* legacy decorative pseudo-elements from homepage(.v30).css must not paint here */
.final-cta-outer .final-cta::before,
.final-cta-outer .final-cta::after { content: none; }

.final-cta-outer .final-cta h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 46px);
  letter-spacing: -.028em;
  line-height: 1.06;
  color: #fff;
  margin: 0;
  max-width: 620px;
}
.final-cta-outer .final-cta h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-bright);
  letter-spacing: -.01em;
}
.final-cta-outer .final-cta p {
  margin: 18px 0 0;
  color: var(--dark-ink-2);
  max-width: 480px;
  font-size: 17px;
  line-height: 1.55;
}

/* CTA button — solid brand green */
.final-cta-outer .final-cta .cta-only {
  margin: 36px 0 0;
  display: flex;
  justify-content: flex-start;
}
.final-cta-outer .final-cta .try-go {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 14px 26px;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 18px -8px rgba(0,153,79,.5);
  transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.final-cta-outer .final-cta .try-go:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(0,153,79,.55);
}
.final-cta-outer .final-cta .try-go .arr { transition: transform .2s var(--ease); }
.final-cta-outer .final-cta .try-go:hover .arr { transform: translateX(2px); }

/* Reassurance row — left aligned */
.final-cta-outer .final-cta .try-reassure {
  margin-top: 18px;
  display: flex;
  gap: 18px;
  justify-content: flex-start;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--dark-ink-2);
}
.final-cta-outer .final-cta .try-reassure span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.final-cta-outer .final-cta .try-reassure svg {
  color: var(--accent-bright);
  flex: 0 0 auto;
}

.final-cta-outer .final-cta .meta {
  margin-top: 22px;
  color: rgba(245,247,250,.62);
  font-size: 13px;
  font-family: var(--mono);
}

@media (max-width: 768px) {
  .final-cta-outer .final-cta {
    padding: 64px 24px 80px;
    min-height: 0;
    text-align: center;
  }
  .final-cta-outer .final-cta h2,
  .final-cta-outer .final-cta p {
    margin-left: auto;
    margin-right: auto;
  }
  .final-cta-outer .final-cta .cta-only,
  .final-cta-outer .final-cta .try-reassure {
    justify-content: center;
  }
  .final-cta-outer.final-cta-outer {
    background-size: auto 55%;
    background-position: center bottom;
  }
}