/* Marketing chrome and home page.
   ---------------------------------------------------------------------------
   Built from the September 2026 reference. Every picture on the home page is
   a generated image under /static/img/landing/<lang>/ (text inside it is
   rendered per language) or /static/img/landing/icons/; this file only lays
   out the copy around them. Header and footer (sh-, sf-) are on every
   marketing page; lp- is the home page, page-hero every other one. */

:root {
  --lp-night: #000212;   /* hero and footer: the hero art's own background */
  --lp-engine: #03103b;  /* provider band: the diagram's own background */
  --lp-blue: #2f5bff;
  --lp-blue-hover: #4a72ff;
  --lp-line: #e6e9f0;
  --lp-soft: #f6f7fb;
}

/* Buttons ----------------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lp-btn:active { transform: translateY(1px); }
.lp-btn:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 3px; }
.lp-btn--sm { padding: 10px 16px; font-size: 13.5px; }
.lp-btn--lg { padding: 16px 30px; font-size: 15px; }
.lp-btn--primary { background: var(--lp-blue); color: #FFFFFF; }
.lp-btn--primary:hover { background: var(--lp-blue-hover); }
.lp-btn--ghost { border: 1.5px solid rgba(125, 162, 255, 0.55); color: #FFFFFF; }
.lp-btn--ghost:hover { border-color: #7da2ff; background: rgba(125, 162, 255, 0.08); }
.lp-btn--outline { border: 1px solid rgba(255, 255, 255, 0.35); color: #FFFFFF; }
.lp-btn--outline:hover { border-color: #FFFFFF; }

/* Header ------------------------------------------------------------------ */
.site-top { background: var(--lp-night); }
/* Every page but home: the band under the header, left empty for that page's
   own hero. */
.page-hero { min-height: 360px; background: var(--lp-night); }
.site-top--over { position: absolute; inset: 0 0 auto; z-index: 5; background: transparent; }

.sh__in {
  display: flex;
  align-items: center;
  gap: 44px;
  height: 72px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
  font-size: 14px;
}
.sh__logo { flex: none; display: flex; }
.sh__nav { display: flex; align-items: stretch; align-self: stretch; gap: 28px; color: #DCE0EA; }
.sh__nav > a, .sh-menu { display: inline-flex; align-items: center; gap: 6px; }
.sh__nav > a:hover, .sh-menu:hover, .sh__nav .is-on { color: #FFFFFF; }
.sh__end { margin-left: auto; display: flex; align-items: center; gap: 22px; white-space: nowrap; }
.sh__login { color: #DCE0EA; }
.sh__login:hover { color: #FFFFFF; }

.sh-menu { position: relative; cursor: pointer; align-self: stretch; }
.sh-menu--lang { color: #DCE0EA; gap: 7px; }
.sh-menu__caret { transition: transform 0.15s ease; }
.sh-menu:hover > .sh-menu__caret, .sh-menu:focus-within > .sh-menu__caret { transform: rotate(180deg); }
.sh-menu__panel {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 230px;
  padding: 8px;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 20px 48px -12px rgba(0, 2, 18, 0.45);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 10;
}
.sh-menu__panel--right { left: auto; right: -8px; min-width: 170px; }
.sh-menu:hover > .sh-menu__panel,
.sh-menu:focus-within > .sh-menu__panel { opacity: 1; visibility: visible; transform: none; }
.sh-menu__panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #14161A;
  font-size: 14px;
}
.sh-menu__panel a:hover, .sh-menu__panel a[aria-current] { background: var(--lp-soft); }

/* Shared type ------------------------------------------------------------- */
.lp { font-family: "Public Sans", sans-serif; }
.lp-wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.shell--full { box-shadow: none !important; }
/* Marketing pages are full-bleed: when one is shorter than the window, what
   shows below the footer is the footer's navy, not the canvas backdrop. */
body:has(.shell--full) { background: var(--lp-night); }
.lp h1, .lp h2, .lp h3 { font-family: "Schibsted Grotesk", sans-serif; margin: 0; }
.lp p { margin: 0; }
.lp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4A5057;
  margin-bottom: 12px !important;
}
.lp-eyebrow--light { color: #DCE0EA; }
.lp-h2 { font-size: 34px; line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; color: #0B1433; margin-bottom: 14px !important; }
.lp-body { font-size: 15.5px; line-height: 1.6; color: #4A5057; }
.lp-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: #2448E0; }
.lp-link:hover { text-decoration: underline; }

/* Hero -------------------------------------------------------------------- */
.lp-hero {
  position: relative;
  overflow: hidden;
  background: var(--lp-night);
  color: #FFFFFF;
}
/* Three layers, all generated: the space backdrop fills the band edge to
   edge, the laptop and phone are a cut-out laid on it, and the notification
   cards are their own image so their text stays sharp. The stage is placed
   against the content column so the laptop starts where the copy ends. */
.lp-hero {
  background:
    linear-gradient(to bottom, rgba(0, 2, 18, 0.7), rgba(0, 2, 18, 0) 110px),
    var(--lp-night) url("/static/img/landing/hero-bg.webp") 68% 22% / cover no-repeat;
}
.lp-hero__stage { position: absolute; top: 118px; left: 41%; width: 64%; pointer-events: none; }
.lp-hero__devices { display: block; width: 70%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 2, 18, 0.55)); }
.lp-hero__cards { position: absolute; top: 12%; right: 0; width: 31%; height: auto; }
.lp-hero__in { position: relative; min-height: 540px; padding-top: 112px; padding-bottom: 56px; box-sizing: border-box; }
.lp-hero__copy { position: relative; max-width: 540px; }
.lp-hero__title {
  font-size: 48px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: #FFFFFF;
}
.lp-hero__title { max-width: 470px; }
.lp-hero__title span {
  display: block;
  width: max-content;
  background: linear-gradient(90deg, #38c8f8 0%, #4f8bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lp-hero__lead { margin-top: 18px !important; font-size: 16.5px; line-height: 1.6; color: #C6CBDA; }
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.lp-hero__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: #DCE0EA;
}
.lp-hero__checks li { display: inline-flex; align-items: center; gap: 8px; }
.lp-hero__checks li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4f7bff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Logo band --------------------------------------------------------------- */
.lp-logos { background: var(--lp-soft); border-bottom: 1px solid var(--lp-line); }
.lp-logos__in { display: flex; align-items: center; gap: 48px; min-height: 92px; }
.lp-logos__label {
  flex: none;
  max-width: 190px;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #4A5057;
}
.lp-logos__list {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-logos__list img { display: block; width: auto; height: 26px; }
.lp-logos__list img[alt="Resend"] { height: 19px; }
.lp-logos__list img[alt="Holafly"], .lp-logos__list img[alt="Airalo"] { height: 24px; }

/* Features ---------------------------------------------------------------- */
/* Section heads: split (title left, lead right) or centred. */
.lp-head { margin-bottom: 36px; }
.lp-head--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.lp-head--split .lp-body { max-width: 520px; justify-self: end; }
.lp-head--center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.lp-head--center .lp-eyebrow { justify-content: center; }

.lp-features { padding: 72px 0 48px; }
.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 20, 51, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.lp-card:hover { box-shadow: 0 16px 36px -18px rgba(11, 20, 51, 0.28); transform: translateY(-2px); }
.lp-card__head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
.lp-card__head > div { display: contents; }
.lp-card__icon { grid-row: 1 / 3; border-radius: 11px; }
.lp-card h3 { grid-column: 2; grid-row: 1; font-size: 18px; font-weight: 600; color: #0B1433; margin: 2px 0 6px; }
.lp-card__head p { grid-column: 2 / 4; grid-row: 2; }
.lp-card__arrow { grid-column: 3; grid-row: 1; }
.lp-card p { font-size: 14.5px; line-height: 1.55; color: #4A5057; }
.lp-card__arrow { color: #4A5057; font-size: 15px; line-height: 1; padding-top: 2px; }
.lp-card__art { margin-top: auto; width: 100%; height: auto; mix-blend-mode: multiply; }

/* How it works ------------------------------------------------------------ */
.lp-steps { padding: 32px 0 56px; }
.lp-steps__in { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; }
.lp-steps__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
}
.lp-steps__list li { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 12px; }
.lp-steps__list li::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  height: 1px;
  background: linear-gradient(90deg, #c9d3f5, #c9d3f5) left / calc(100% - 6px) 1px no-repeat;
  position: relative;
}
.lp-steps__list li:last-child::after { display: none; }
.lp-steps__list h3 { grid-column: 1 / -1; margin-top: 14px; font-size: 15px; font-weight: 600; color: #0B1433; }
.lp-steps__list p { grid-column: 1 / -1; margin-top: 5px !important; font-size: 13.5px; line-height: 1.5; color: #4A5057; }
.lp-steps__n {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lp-blue);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 5px rgba(47, 91, 255, 0.12);
}

/* Multi-provider engine --------------------------------------------------- */
.lp-engine { background: var(--lp-engine); color: #FFFFFF; padding: 44px 0; }
.lp-engine__in { display: grid; grid-template-columns: 340px minmax(0, 1fr) 250px; gap: 32px; align-items: center; }
.lp-engine .lp-h2 { color: #FFFFFF; font-size: 32px; }
.lp-engine .lp-body { color: #C6CBDA; font-size: 14.5px; margin-bottom: 20px !important; }
.lp-soon {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(125, 162, 255, 0.16);
  color: #DCE0EA;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.lp-engine__art { width: 100%; height: auto; }
.lp-engine__points {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 22px 20px;
  list-style: none;
  border: 1px solid rgba(125, 162, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}
.lp-engine__points li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.lp-engine__points h3 { font-size: 14px; font-weight: 600; color: #FFFFFF; }
.lp-engine__points p { margin-top: 3px !important; font-size: 12.5px; line-height: 1.45; color: #99A1BB; }

/* Customer journey -------------------------------------------------------- */
.lp-journey { padding: 72px 0 80px; }
.lp-journey__track { display: flex; align-items: center; justify-content: center; gap: 22px; }
.lp-journey__phone { flex: none; width: auto; height: 300px; filter: drop-shadow(0 16px 22px rgba(11, 20, 51, 0.14)); }
.lp-journey__step { flex: 0 1 170px; min-width: 0; }
.lp-journey__step h3 { margin-top: 12px; font-size: 16px; font-weight: 600; color: #0B1433; }
.lp-journey__step p { margin-top: 5px !important; font-size: 14px; line-height: 1.5; color: #4A5057; }

/* White label ------------------------------------------------------------- */
.lp-brands { padding: 80px 0; background: var(--lp-soft); border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); }
/* The themes slider: one row of demo cards. Without JS (or with reduced
   motion) it scrolls by hand with snap points; lp-slider.js copies the cards
   once and .is-looping runs the row for ever, paused under the pointer or
   keyboard focus. The edges fade out so cards slide in rather than appear. */
.lp-themes { position: relative; }
.lp-themes__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 340px;
  gap: 20px;
  margin: 0;
  padding: 6px 2px 18px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.lp-themes__track::-webkit-scrollbar { display: none; }
.lp-themes__item { scroll-snap-align: start; margin: 0; }
.lp-themes.is-looping {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.lp-themes.is-looping .lp-themes__track {
  width: max-content;
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}
/* The arrows under the row: they step one theme either way (lp-slider.js),
   so they only appear when it runs. */
.lp-themes__nav { display: none; justify-content: center; gap: 10px; margin-top: 8px; }
.lp-themes.is-looping .lp-themes__nav { display: flex; }
.lp-themes__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--lp-line);
  background: #FFFFFF;
  color: #0B1433;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lp-themes__btn:hover { border-color: var(--lp-blue); color: var(--lp-blue); }
.lp-themes__btn:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 3px; }

.lp-themes__card { display: block; color: inherit; text-decoration: none; }
.lp-themes__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--lp-line);
  background: #FFFFFF;
  aspect-ratio: 1200 / 828;
}
.lp-themes__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease, transform 0.5s ease;
}
/* Hovering a card shows the same theme's purchase page in place of its home. */
.lp-themes__buy { opacity: 0; }
a[href].lp-themes__card:hover .lp-themes__buy,
a[href].lp-themes__card:focus-visible .lp-themes__buy { opacity: 1; }
a[href].lp-themes__card:hover .lp-themes__shot { transform: scale(1.03); }
.lp-themes__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(11, 20, 51, 0.82);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.lp-themes__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}
.lp-themes__card:not([href]) .lp-themes__badge,
.lp-themes__card:not([href]) .lp-themes__cta { display: none; }
.lp-themes__name { display: block; margin-top: 14px; font-family: "Schibsted Grotesk", sans-serif; font-size: 17px; font-weight: 600; color: #0B1433; }
.lp-themes__desc { display: block; margin-top: 3px; font-size: 14px; color: #4A5057; }
.lp-themes__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lp-blue);
}
a[href].lp-themes__card:hover .lp-themes__cta { text-decoration: underline; }
.lp-themes__card:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 4px; border-radius: 16px; }

/* "View live demo" in the hero glides down to the row rather than jumping. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.lp-brands__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.lp-brands__facts li {
  display: flex;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  background: #FFFFFF;
  font-size: 14px;
  line-height: 1.45;
  color: #0B1433;
}
.lp-brands__facts li::before, .lp-plan__list li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--lp-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* What a plan does not include: struck through, with a cross. */
.lp-plan__list li.is-no { color: #646A71; text-decoration: line-through; }
.lp-plan__list li.is-no::before {
  background: #E4E6EB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%239aa0ab' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Fast by default ---------------------------------------------------------
   Lighthouse's four scores as the generated gauge (icons/speed-gauge.webp),
   three facts with their generated icons, and the phone art on the right.
   The art's own midnight background is faded into the band's at its edges
   with a mask, so the picture has no seam. */
.lp-speed {
  position: relative;
  overflow: hidden;
  padding: 88px 0;
  background: radial-gradient(70% 90% at 80% 50%, #071a5c 0%, var(--lp-night) 62%);
  color: #FFFFFF;
}
.lp-speed__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.lp-speed .lp-h2 { color: #FFFFFF; font-size: 38px; }
.lp-speed .lp-body { color: #C6CBDA; max-width: 520px; }
.lp-speed__scores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 560px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.lp-speed__scores li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.lp-speed__scores img { width: 92px; height: 92px; filter: drop-shadow(0 0 18px rgba(46, 204, 113, 0.28)); }
.lp-speed__scores span { font-size: 13.5px; font-weight: 600; color: #DCE0EA; }
.lp-speed__facts {
  display: grid;
  gap: 14px;
  max-width: 560px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.lp-speed__facts li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid rgba(125, 162, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.lp-speed__facts img { width: 48px; height: 48px; }
.lp-speed__facts strong { display: block; font-family: "Schibsted Grotesk", sans-serif; font-size: 18px; letter-spacing: -0.01em; color: #FFFFFF; }
.lp-speed__facts span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: #99A1BB; }
.lp-speed__note { margin-top: 18px !important; font-size: 12.5px; color: #99A1BB; }
.lp-speed__art {
  width: 118%;
  max-width: none;
  height: auto;
  margin-inline: -9%;
  /* closest-side reaches transparent exactly at the picture's own edges,
     so no corner of its rectangle survives against the band. */
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}

/* Numbers ----------------------------------------------------------------- */
.lp-stats { padding: 72px 0; background: var(--lp-night); color: #FFFFFF; }
.lp-stats__title { color: #FFFFFF; text-align: center; max-width: 640px; margin: 0 auto 40px !important; }
.lp-stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.lp-stats__list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 26px 24px;
  border: 1px solid rgba(125, 162, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}
.lp-stats__list img { margin-bottom: 10px; }
.lp-stats__list strong { font-family: "Schibsted Grotesk", sans-serif; font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: #FFFFFF; }
.lp-stats__list span { font-size: 14px; line-height: 1.45; color: #C6CBDA; }

/* Pricing ----------------------------------------------------------------- */
.lp-pricing { padding: 88px 0 72px; }
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  background: #FFFFFF;
}
.lp-plan--featured { border: 2px solid var(--lp-blue); box-shadow: 0 24px 48px -24px rgba(47, 91, 255, 0.45); }
.lp-plan__badge {
  position: absolute;
  top: -13px;
  left: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--lp-blue);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
}
.lp-plan h3 { font-size: 20px; font-weight: 700; color: #0B1433; }
.lp-plan__for { margin-top: 6px !important; min-height: 42px; font-size: 14px; line-height: 1.5; color: #4A5057; }
.lp-plan__price { display: flex; align-items: baseline; gap: 4px; margin: 18px 0 !important; }
.lp-plan__price strong { font-family: "Schibsted Grotesk", sans-serif; font-size: 44px; letter-spacing: -0.03em; color: #0B1433; }
.lp-plan__price span { font-size: 15px; color: #4A5057; }
.lp-plan__limits { margin: 0 0 20px; padding: 14px 0; border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); }
.lp-plan__limits div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.lp-plan__limits dt { color: #4A5057; }
.lp-plan__limits dd { margin: 0; font-weight: 600; color: #0B1433; }
.lp-plan__list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; flex: 1; }
.lp-plan__list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; color: #0B1433; }
.lp-plan .lp-btn { width: 100%; padding: 13px 18px; }
.lp-btn--line { border: 1.5px solid #0B1433; color: #0B1433; }
.lp-btn--line:hover { background: #0B1433; color: #FFFFFF; }
.lp-pricing__note { margin-top: 24px !important; text-align: center; font-size: 14px; color: #4A5057; }
.lp-pricing__note .lp-link { margin: 0 0 0 8px; }

/* FAQ --------------------------------------------------------------------- */
.lp-faq { padding: 72px 0 88px; background: var(--lp-soft); border-top: 1px solid var(--lp-line); }
.lp-faq__in { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; }
.lp-faq__intro .lp-link { margin: 0; }
.lp-faq__list { display: flex; flex-direction: column; gap: 12px; }
.lp-faq details { border: 1px solid var(--lp-line); border-radius: 14px; background: #FFFFFF; }
.lp-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0B1433;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%232448E0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq summary:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 2px; border-radius: 14px; }
.lp-faq details p { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: #4A5057; }
.lp-faq details a { color: #2448E0; text-decoration: underline; }

/* Final call to action ---------------------------------------------------- */
.lp-cta {
  padding: 110px 0 300px;
  background:
    linear-gradient(to bottom, var(--lp-night) 0%, rgba(0, 2, 18, 0.6) 45%, rgba(0, 2, 18, 0) 70%),
    var(--lp-night) url("/static/img/landing/cta-bg.webp") center bottom / cover no-repeat;
  color: #FFFFFF;
  text-align: center;
}
.lp-cta__title { font-family: "Schibsted Grotesk", sans-serif; font-size: 46px; line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; color: #FFFFFF; max-width: 760px; margin: 0 auto !important; }
.lp-cta__lead { margin: 18px auto 0 !important; max-width: 560px; font-size: 17px; line-height: 1.6; color: #C6CBDA; }
.lp-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* Footer ------------------------------------------------------------------ */
.sf { background: var(--lp-night); color: #99A1BB; font-size: 14px; }
.sf__in { max-width: 1320px; margin: 0 auto; padding: 64px 40px 28px; }
.sf__top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; padding-bottom: 44px; }
.sf__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sf__brand p { margin: 0; max-width: 260px; line-height: 1.6; }
.sf__col { display: flex; flex-direction: column; gap: 10px; }
.sf__col h2 { margin: 0 0 4px; font-family: "Schibsted Grotesk", sans-serif; font-size: 14px; font-weight: 600; color: #FFFFFF; }
.sf a:not(.lp-btn):hover, .sf .as-span:hover { color: #FFFFFF; }
.sf__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(220, 224, 234, 0.12);
  font-size: 13px;
}
.sf__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.sf .as-span { color: inherit; font-size: inherit; }

/* Narrow screens ---------------------------------------------------------- */
@media (max-width: 1520px) {
  .lp-hero__stage { left: 40%; width: 60%; }
}

@media (max-width: 1180px) {
  .sh__nav { display: none; }
  .lp-steps__in, .lp-faq__in { grid-template-columns: minmax(0, 1fr); }
  .lp-stats__list, .lp-brands__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-hero__stage { left: 44%; width: 72%; top: 150px; }
  .lp-engine__in { grid-template-columns: minmax(0, 1fr); }
  .lp-engine__points { flex-direction: row; flex-wrap: wrap; }
  .lp-engine__points li { flex: 1 1 220px; }
  .lp-journey__track { flex-wrap: wrap; }
  .lp-speed__in { grid-template-columns: minmax(0, 1fr); }
  .lp-speed__art { width: 100%; max-width: 720px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .lp-wrap, .sh__in, .sf__in { padding-left: 16px; padding-right: 16px; }
  .sh__in { gap: 16px; }
  .sh__end { gap: 14px; }
  .sh__login { display: none; }
  .lp-hero__in { padding-top: 104px; padding-bottom: 0; }
  .lp-hero__title { font-size: 38px; }
  .lp-hero__in { min-height: 0; display: flex; flex-direction: column; }
  .lp-hero__stage { order: 2; position: relative; top: 0; left: 0; width: 100%; margin: 28px 0 32px; }
  .lp-hero__devices { width: 80%; }
  .lp-hero__cards { top: 8%; width: 36%; }
  .lp-logos__in { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 16px; }
  .lp-logos__list { flex-wrap: wrap; justify-content: flex-start; gap: 24px 32px; }
  .lp-cards, .lp-plans { grid-template-columns: minmax(0, 1fr); }
  .lp-themes__track { grid-auto-columns: 280px; }
  .lp-head--split { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lp-head--split .lp-body { justify-self: start; }
  .lp-cta__title { font-size: 32px; }
  .lp-cta { padding: 80px 0 200px; }
  .lp-steps__list { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lp-steps__list li::after { display: none; }
  .lp-h2 { font-size: 28px; }
  .lp-journey__track { flex-wrap: wrap; }
  .lp-journey__phone { height: 240px; }
  .lp-journey__step { flex: 1 1 100%; }
  .sf__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf__brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .lp-stats__list, .lp-brands__facts { grid-template-columns: minmax(0, 1fr); }
  .lp-speed { padding: 64px 0; }
  .lp-speed .lp-h2 { font-size: 28px; }
  .lp-speed__scores { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .sh-menu--lang > span:nth-child(2) { display: none; }
  .lp-hero__title { font-size: 32px; }
  .lp-hero__actions .lp-btn { flex: 1 1 100%; }
}