/*
 * SMS Pin Verify homepage refinement.
 * Loaded only by includes2/home_landing.php so public sub-pages,
 * the logged-in dashboard, admin panel, and APIs keep their existing styles.
 */
body.lp-home-v2 {
  --blue: #4fa5dc;
  --blue-dark: #3d8fc8;
  --blue-deep: #21688f;
  --ink: #18324a;
  --slate: #667f95;
  --slate-light: #94aabd;
  --line: #dcecf8;
  --bg: #f5faff;
  --card: #ffffff;
  --grad: linear-gradient(135deg, #65b5e7 0%, #438fc8 100%);
  --shadow-sm: 0 2px 8px rgba(55, 125, 170, .07);
  --shadow: 0 12px 30px -16px rgba(45, 112, 158, .22);
  --shadow-lg: 0 22px 52px -22px rgba(63, 145, 199, .28);
  --radius: 14px;
  background: var(--bg);
  color: var(--ink);
  font-size: 90%;
}

body.lp-home-v2 .lp-wrap {
  max-width: 1180px;
}

body.lp-home-v2 .lp-nav {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: #e4f1fa;
}

/* public-nav.css pins these at 11.6px !important and loads after this file, so the
   header would keep the old scale while the rest of the page grew. Needs both the
   extra .lp-nav and !important to win. */
body.lp-home-v2 .lp-nav .lp-nav-menu a,
body.lp-home-v2 .lp-nav .lp-nav-login {
  color: var(--slate);
  font-size: 13px !important;
}

body.lp-home-v2 .lp-nav-menu a:hover,
body.lp-home-v2 .lp-nav-menu a:focus,
body.lp-home-v2 .lp-nav-login:hover,
body.lp-home-v2 .lp-nav-login:focus {
  color: var(--blue-deep);
  background: #eef8ff;
}

body.lp-home-v2 .lp-btn {
  background: #ccffff;
  color: #0b4f6c !important;
  border: 1px solid #9fe3ea;
  border-radius: 10px;
  font-size: 13.5px;
  padding: 10px 20px;
  box-shadow: 0 7px 18px -9px rgba(60, 170, 190, .35);
}

body.lp-home-v2 .lp-btn:hover,
body.lp-home-v2 .lp-btn:focus {
  background: #b3f5f7;
  color: #0b4f6c !important;
}

body.lp-home-v2 .lp-btn-lg {
  font-size: 14.4px;
  padding: 13px 27px;
}

body.lp-home-v2 .lp-hero {
  padding: 56px 0 60px;
  background: #f5faff;
}

body.lp-home-v2 .lp-hero::before {
  background:
    radial-gradient(58% 58% at 82% 0%, rgba(137, 208, 246, .22), transparent 72%),
    radial-gradient(52% 48% at 0% 40%, rgba(190, 229, 250, .36), transparent 72%);
}

body.lp-home-v2 .lp-hero-grid {
  gap: 44px;
}

body.lp-home-v2 .lp-eyebrow {
  color: var(--blue-deep);
  font-size: 11.7px;
  padding: 6px 12px;
  margin-bottom: 18px;
  border-color: #d9edf9;
  box-shadow: var(--shadow-sm);
}

body.lp-home-v2 .lp-hero h1 {
  font-size: clamp(29.2px, 4vw, 47.2px);
  line-height: 1.1;
  margin-bottom: 15px;
}

body.lp-home-v2 .lp-hero-sub {
  max-width: 500px;
  color: var(--slate);
  font-size: 16.2px;
  margin-bottom: 24px;
}

body.lp-home-v2 .lp-hero-actions {
  gap: 11px;
  margin-bottom: 21px;
}

body.lp-home-v2 .lp-hero-trust {
  gap: 17px;
  color: var(--slate);
  font-size: 12.2px;
}

body.lp-home-v2 .lp-check {
  width: 16px;
  height: 16px;
  font-size: 10.1px;
}

body.lp-home-v2 .lp-phone {
  width: 270px;
  border-radius: 26px;
  padding: 12px;
  box-shadow: var(--shadow-lg);
  border-color: #dceefa;
}

body.lp-home-v2 .lp-phone-notch {
  width: 108px;
  height: 23px;
  margin-bottom: 10px;
}

body.lp-home-v2 .lp-phone-head {
  gap: 8px;
  padding: 5px 7px 11px;
}

body.lp-home-v2 .lp-phone-av {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

body.lp-home-v2 .lp-phone-head .nm {
  font-size: 12.6px;
}

body.lp-home-v2 .lp-phone-head .st {
  font-size: 9.9px;
}

body.lp-home-v2 .lp-sms {
  padding: 11px 7px 6px;
  gap: 8px;
}

body.lp-home-v2 .lp-bubble {
  border-radius: 12px 12px 12px 4px;
  padding: 8px 10px;
  font-size: 11.7px;
}

body.lp-home-v2 .lp-bubble .code {
  font-size: 13.5px;
}

body.lp-home-v2 .lp-bubble-time {
  font-size: 9px;
}

body.lp-home-v2 .lp-phone-badge {
  top: 16px;
  right: -15px;
  padding: 8px 11px;
  border-radius: 11px;
}

body.lp-home-v2 .lp-phone-badge .ic {
  width: 26px;
  height: 26px;
  font-size: 14.6px;
}

body.lp-home-v2 .lp-phone-badge .tx b {
  font-size: 11.7px;
}

body.lp-home-v2 .lp-phone-badge .tx span {
  font-size: 9.9px;
}

body.lp-home-v2 .lp-logos {
  padding: 22px 0;
  background: #edf8ff;
  border-color: #dceefa;
}

body.lp-home-v2 .lp-logos p {
  font-size: 11.2px;
  margin-bottom: 14px;
}

body.lp-home-v2 .lp-logos-row {
  gap: 28px;
}

body.lp-home-v2 .lp-logos-row img {
  height: 22px;
}

body.lp-home-v2 .lp-sec {
  padding: 64px 0;
}

body.lp-home-v2 .lp-sec:nth-of-type(even) {
  background: #f0f8fe;
}

body.lp-home-v2 .lp-sec-head {
  max-width: 650px;
  margin-bottom: 38px;
}

body.lp-home-v2 .lp-tag {
  font-size: 11.7px;
  margin-bottom: 9px;
}

body.lp-home-v2 .lp-sec-head h2 {
  font-size: clamp(23.6px, 3vw, 33.8px);
  margin-bottom: 10px;
}

body.lp-home-v2 .lp-sec-head p {
  color: var(--slate);
  font-size: 14.8px;
}

body.lp-home-v2 .lp-fn {
  background: #f8fcff;
}

body.lp-home-v2 .lp-fn-grid {
  gap: 11px;
}

body.lp-home-v2 .lp-fn-card {
  gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  border-color: #dceefa;
  box-shadow: 0 2px 8px rgba(74, 144, 185, .03);
}

body.lp-home-v2 .lp-fn-flag {
  font-size: 24.8px;
}

body.lp-home-v2 .lp-fn-country {
  font-size: 9.9px;
}

body.lp-home-v2 .lp-fn-num {
  font-size: 13.5px;
}

body.lp-home-v2 .lp-fn-go {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 14.6px;
}

body.lp-home-v2 .lp-fn-card:hover .lp-fn-go {
  background: #ccffff;
  color: #0b4f6c;
}

body.lp-home-v2 .lp-feed {
  margin-top: 27px;
}

body.lp-home-v2 .lp-feed-bar {
  gap: 6px;
  font-size: 11.7px;
  margin-bottom: 9px;
}

body.lp-home-v2 .lp-table {
  border-spacing: 0 6px;
}

body.lp-home-v2 .lp-table thead th {
  font-size: 10.3px;
  padding: 0 13px 3px;
}

body.lp-home-v2 .lp-table tbody td {
  padding: 10px 13px;
  font-size: 12.6px;
  border-color: #e0eef7;
}

body.lp-home-v2 .lp-td-num {
  color: var(--blue-deep);
}

body.lp-home-v2 .lp-td-from {
  font-size: 10.8px;
}

body.lp-home-v2 .lp-feed-foot {
  margin-top: 14px;
  font-size: 11.7px;
}

body.lp-home-v2 .lp-steps {
  gap: 17px;
}

body.lp-home-v2 .lp-step,
body.lp-home-v2 .lp-feat {
  border-radius: var(--radius);
  border-color: #dceefa;
  padding: 22px 19px;
  box-shadow: 0 2px 8px rgba(74, 144, 185, .03);
}

body.lp-home-v2 .lp-step .n {
  background: #ccffff;
  color: #0b4f6c;
  border: 1px solid #9fe3ea;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 15.3px;
  margin-bottom: 13px;
}

body.lp-home-v2 .lp-step h3,
body.lp-home-v2 .lp-feat h3 {
  font-size: 15.8px;
  margin-bottom: 6px;
}

body.lp-home-v2 .lp-step p,
body.lp-home-v2 .lp-feat p {
  color: var(--slate);
  font-size: 13px;
}

body.lp-home-v2 .lp-feat-grid {
  gap: 17px;
}

/* Icon tile: same 9px rounded square as the numbered step badges. */
body.lp-home-v2 .lp-feat .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  color: var(--blue-deep);
  background: #e8f4fd;
  border-radius: 9px;
}

body.lp-home-v2 .lp-feat .ic svg {
  width: 19px;
  height: 19px;
}

body.lp-home-v2 .lp-stats {
  gap: 18px;
  background: #d2ecfa;
  border: 1px solid #b9def1;
  border-radius: 16px;
  padding: 34px 25px;
}

body.lp-home-v2 .lp-stat b {
  font-size: 30.4px;
}

body.lp-home-v2 .lp-stat span {
  font-size: 12.2px;
  color: #64849b;
}

body.lp-home-v2 .lp-faq {
  gap: 10px;
}

body.lp-home-v2 .lp-faq details {
  border-color: #dceefa;
  border-radius: 10px;
  padding: 0 16px;
}

body.lp-home-v2 .lp-faq summary {
  padding: 14px 0;
  font-size: 14px;
}

body.lp-home-v2 .lp-faq summary::after {
  font-size: 20.2px;
}

body.lp-home-v2 .lp-faq p {
  padding-bottom: 15px;
  font-size: 13px;
}

body.lp-home-v2 .lp-cta {
  background: linear-gradient(135deg, #e8ffff 0%, #ccffff 100%);
  border: 1px solid #9fe3ea;
  border-radius: 17px;
  padding: 43px 25px;
  box-shadow: 0 12px 28px -18px rgba(60, 170, 190, .35);
}

body.lp-home-v2 .lp-cta h2 {
  color: #0b4f6c;
  font-size: clamp(21.4px, 2.7vw, 30.4px);
}

body.lp-home-v2 .lp-cta p {
  color: #3d6b7d;
  font-size: 14.4px;
  margin-bottom: 19px;
}

body.lp-home-v2 .lp-cta .lp-btn {
  background: #fff;
  color: #0b4f6c !important;
  border-color: #9fe3ea;
}

body.lp-home-v2 .lp-cta .lp-btn:hover,
body.lp-home-v2 .lp-cta .lp-btn:focus {
  background: #f2ffff;
}

body.lp-home-v2 .lp-foot {
  background: #e5f4fc;
  color: #64839a;
  padding: 45px 0 21px;
  border-top: 1px solid #d1eaf8;
}

body.lp-home-v2 .lp-foot-about,
body.lp-home-v2 .lp-foot a {
  color: #6c8ba0;
  font-size: 12.6px;
}

body.lp-home-v2 .lp-foot h4 {
  color: #2e6588;
  font-size: 11.7px;
  margin-bottom: 11px;
}

body.lp-home-v2 .lp-foot ul {
  gap: 7px;
}

body.lp-home-v2 .lp-foot-tg {
  color: #397aa0 !important;
  font-size: 12.2px;
  padding: 7px 11px;
  margin-top: 11px;
  background: rgba(255, 255, 255, .62);
  border-color: #c7e5f5;
}

body.lp-home-v2 .lp-foot-bottom {
  border-top-color: #cfe8f6;
  padding-top: 16px;
  font-size: 11.7px;
  color: #7895a8;
}

body.lp-home-v2 .lp-foot-bottom a {
  color: #5d839b;
}

body.lp-home-v2 .lp-float {
  font-size: 15.2px;
  background: #ccffff;
  color: #0b4f6c;
  border: 1px solid #9fe3ea;
}

body.lp-home-v2 .lp-float:hover,
body.lp-home-v2 .lp-float:focus {
  background: #b3f5f7;
  color: #0b4f6c;
}

body.lp-home-v2 .lp-float svg path {
  fill: #0b4f6c;
}

html.sp-dark body.lp-home-v2 .lp-float {
  color: #0b4f6c !important;
}

body.lp-home-v2 .lp-top {
  background: #ccffff;
  color: #0b4f6c;
  border: 1px solid #9fe3ea;
}

/* Hero country + service picker. The service rows are the markup returned by
 * ajax/load_apps3.php (.carddd > a.card > .card-body > .card-title with .counter
 * and .credits), so they are styled here instead of pulling in the dashboard CSS. */
body.lp-home-v2 .lp-picker-sec {
  padding: 8px 0 16px;
  background: #fff;
}

body.lp-home-v2 .lp-picker {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

body.lp-home-v2 .lp-picker-head {
  margin-bottom: 14px;
}

body.lp-home-v2 .lp-picker-head h2 {
  font-size: 19.1px;
  margin: 0 0 4px;
  color: var(--ink);
}

body.lp-home-v2 .lp-picker-head p {
  margin: 0;
  font-size: 13px;
  color: var(--slate);
}

body.lp-home-v2 .lp-picker-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px;
}

body.lp-home-v2 .lp-picker-input {
  width: 100%;
  height: 36px;
  padding: 0 13px;
  margin-bottom: 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 18px;
  outline: none;
}

body.lp-home-v2 .lp-picker-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(79, 165, 220, .16);
}

body.lp-home-v2 .lp-picker-input:disabled {
  background: #f3f7fb;
  color: var(--slate-light);
}

body.lp-home-v2 .lp-picker-list {
  height: 330px;
  overflow-y: auto;
  padding: 4px;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 12px;
  scrollbar-width: thin;
}

body.lp-home-v2 .lp-picker-empty {
  margin: 0;
  padding: 26px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--slate);
}

body.lp-home-v2 .lp-picker-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 4px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
}

body.lp-home-v2 .lp-picker-row:hover {
  border-color: var(--blue);
  background: #f2fafe;
}

body.lp-home-v2 .lp-picker-row.is-active {
  border-color: var(--blue);
  background: #e8f5fd;
  color: var(--blue-deep);
  font-weight: 600;
}

body.lp-home-v2 .lp-picker-row img {
  width: 20px;
  height: auto;
  border-radius: 3px;
}

/* One service per line. */
body.lp-home-v2 .lp-picker-apps .carddd {
  display: block;
  width: 100%;
  margin-bottom: 4px;
}

body.lp-home-v2 .lp-picker-apps .card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  text-decoration: none;
}

body.lp-home-v2 .lp-picker-apps .card:hover {
  border-color: var(--blue);
  background: #f2fafe;
}

body.lp-home-v2 .lp-picker-apps .card-body {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
}

body.lp-home-v2 .lp-picker-apps .app-ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 5px;
}

body.lp-home-v2 .lp-picker-apps span.app-ini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12.4px;
  font-weight: 700;
  line-height: 1;
  border-radius: 6px;
}

body.lp-home-v2 .lp-picker-apps .card-title {
  flex: 1 1 auto;
  min-width: 0;
}

body.lp-home-v2 .lp-picker-apps .card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

body.lp-home-v2 .lp-picker-apps .counter {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: 11.7px;
  font-weight: 600;
  color: var(--blue-deep);
  background: #e8f5fd;
  border-radius: 20px;
}

body.lp-home-v2 .lp-picker-apps .credits {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-deep);
}

body.lp-home-v2 .lp-picker-apps .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  list-style: none;
  padding: 8px 0 2px;
  margin: 0;
}

body.lp-home-v2 .lp-picker-apps .page-link {
  display: block;
  padding: 4px 9px;
  font-size: 12.4px;
  color: var(--slate);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  text-decoration: none;
  cursor: pointer;
}

body.lp-home-v2 .lp-picker-apps .page-item.active .page-link {
  color: #0b4f6c;
  background: #ccffff;
  border-color: #9fe3ea;
}

body.lp-home-v2 .lp-picker-apps .page-item.disabled .page-link {
  color: var(--slate-light);
  cursor: default;
}

@media (max-width: 900px) {
  body.lp-home-v2 .lp-hero {
    padding-top: 44px;
  }
}

@media (max-width: 640px) {
  body.lp-home-v2 .lp-hero {
    padding: 38px 0 45px;
  }

  body.lp-home-v2 .lp-hero h1 {
    font-size: 31.5px;
  }

  body.lp-home-v2 .lp-hero-sub {
    font-size: 15.3px;
  }

  body.lp-home-v2 .lp-sec {
    padding: 45px 0;
  }

  body.lp-home-v2 .lp-logos-row {
    gap: 20px;
  }

  body.lp-home-v2 .lp-phone {
    width: 250px;
  }

  body.lp-home-v2 .lp-phone-badge {
    right: -4px;
  }

  body.lp-home-v2 .lp-picker {
    margin-top: 0;
    padding: 14px;
  }

  body.lp-home-v2 .lp-picker-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body.lp-home-v2 .lp-picker-list {
    height: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.lp-home-v2 .lp-btn,
  body.lp-home-v2 .lp-fn-card,
  body.lp-home-v2 .lp-feat,
  body.lp-home-v2 .lp-phone-badge {
    transition: none;
    animation: none;
  }
}

/* ============================================================
 * Dark mode for the public home page.
 * Uses the same html.sp-dark class and sp_theme localStorage key as the
 * logged-in panel, so a visitor's choice follows them after login. Most of
 * the work is done by re-pointing the palette variables; the rules below
 * only cover surfaces that were written as literal light colours.
 * ============================================================ */
html.sp-dark body.lp-home-v2 {
  --ink: #e7ecf3;
  --slate: #a3b3c6;
  --slate-light: #7d8ea4;
  --line: #2c3648;
  --bg: #141821;
  --card: #1d2431;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .28);
  --shadow: 0 12px 30px -16px rgba(0, 0, 0, .5);
  --shadow-lg: 0 22px 52px -22px rgba(0, 0, 0, .6);
}

html.sp-dark body.lp-home-v2 .lp-nav {
  background: rgba(20, 24, 33, .93);
  border-bottom-color: #27313f;
}

html.sp-dark body.lp-home-v2 .lp-nav-menu a:hover,
html.sp-dark body.lp-home-v2 .lp-nav-menu a:focus,
html.sp-dark body.lp-home-v2 .lp-nav-login:hover,
html.sp-dark body.lp-home-v2 .lp-nav-login:focus {
  color: #7cc6f2;
  background: #263140;
}

/* The hero tint and the two inline background:#fff sections. */
html.sp-dark body.lp-home-v2 .lp-hero {
  background: linear-gradient(180deg, #182130 0%, var(--bg) 100%);
}

/* Alternating bands: the even-section tint and the two inline background:#fff
   sections both need the darker surface. */
html.sp-dark body.lp-home-v2 .lp-sec:nth-of-type(even),
html.sp-dark body.lp-home-v2 .lp-sec[style*="background"] {
  background: #191f2b !important;
}

html.sp-dark body.lp-home-v2 .lp-tp-review {
  background: var(--card);
  border-color: var(--line);
}

html.sp-dark body.lp-home-v2 .lp-tp-text {
  color: var(--ink);
}

html.sp-dark body.lp-home-v2 .lp-picker-sec,
html.sp-dark body.lp-home-v2 .lp-esim-sec {
  background: var(--bg);
}

html.sp-dark body.lp-home-v2 .lp-logos,
html.sp-dark body.lp-home-v2 .lp-fn,
html.sp-dark body.lp-home-v2 .lp-phone,
html.sp-dark body.lp-home-v2 .lp-phone-badge,
html.sp-dark body.lp-home-v2 .lp-fn-card,
html.sp-dark body.lp-home-v2 .lp-step,
html.sp-dark body.lp-home-v2 .lp-feat,
html.sp-dark body.lp-home-v2 .lp-faq details,
html.sp-dark body.lp-home-v2 .lp-picker,
html.sp-dark body.lp-home-v2 .lp-table tbody tr,
html.sp-dark body.lp-home-v2 .lp-trustpilot-strip {
  background: var(--card);
  border-color: var(--line);
}

html.sp-dark body.lp-home-v2 .lp-btn-ghost {
  background: var(--card);
  color: var(--ink) !important;
  border-color: var(--line);
}

html.sp-dark body.lp-home-v2 .lp-bubble,
html.sp-dark body.lp-home-v2 .lp-fn-go,
html.sp-dark body.lp-home-v2 .lp-feat .ic {
  color: #7cc6f2;
  background: #26313f;
}

html.sp-dark body.lp-home-v2 .lp-logos-row img {
  filter: brightness(0) invert(1);
  opacity: .5;
}

html.sp-dark body.lp-home-v2 .lp-tag,
html.sp-dark body.lp-home-v2 .lp-feed-foot a,
html.sp-dark body.lp-home-v2 .lp-td-num,
html.sp-dark body.lp-home-v2 .lp-fn-num {
  color: #7cc6f2;
}

html.sp-dark body.lp-home-v2 .lp-stats {
  background: #1f2c3a;
  border-color: #2c3f52;
}

html.sp-dark body.lp-home-v2 .lp-stat b {
  color: #8fd0f5;
}

html.sp-dark body.lp-home-v2 .lp-stat span {
  color: var(--slate);
}

/* The CTA band and footer are already dark-on-blue, so they only need the
   footer surface pushed away from the new page background. */
html.sp-dark body.lp-home-v2 .lp-foot {
  background: #10141c;
}

html.sp-dark body.lp-home-v2 .lp-picker-input {
  color: var(--ink);
  background: #232c3a;
  border-color: var(--line);
}

html.sp-dark body.lp-home-v2 .lp-picker-input:disabled {
  background: #1b222d;
  color: var(--slate-light);
}

html.sp-dark body.lp-home-v2 .lp-picker-list {
  background: #191f2a;
  border-color: var(--line);
}

html.sp-dark body.lp-home-v2 .lp-picker-row,
html.sp-dark body.lp-home-v2 .lp-picker-apps .card {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line);
}

html.sp-dark body.lp-home-v2 .lp-picker-row:hover,
html.sp-dark body.lp-home-v2 .lp-picker-apps .card:hover {
  background: #253243;
  border-color: #3b6d8d;
}

html.sp-dark body.lp-home-v2 .lp-picker-row.is-active {
  color: #8fd0f5;
  background: #23384a;
  border-color: #3b6d8d;
}

html.sp-dark body.lp-home-v2 .lp-picker-apps .card-title,
html.sp-dark body.lp-home-v2 .lp-picker-apps .credits,
html.sp-dark body.lp-home-v2 .lp-picker-apps .counter {
  color: #8fd0f5;
}

html.sp-dark body.lp-home-v2 .lp-picker-apps .card-title {
  color: var(--ink);
}

html.sp-dark body.lp-home-v2 .lp-picker-apps .counter {
  background: #23384a;
}

html.sp-dark body.lp-home-v2 .lp-picker-apps .page-link {
  color: var(--slate);
  background: var(--card);
  border-color: var(--line);
}

/* Apple, X and AWS are near-black marks, so they need a light plate here. */
html.sp-dark body.lp-home-v2 .lp-picker-apps img.app-ico {
  background: #fff;
  padding: 1px;
}

/* ============================================================
 * Travel eSIM picker (homepage). Reuses .lp-picker for the frame
 * and the destination column; only the plan column is new, and it
 * shows at most three plans, with the full catalog a click away.
 * ============================================================ */
body.lp-home-v2 .lp-esim-sec {
  padding: 6px 0 28px;
  background: #fff;
}

body.lp-home-v2 .lp-esim-picker {
  margin-top: 0;
}

body.lp-home-v2 .lp-esim-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e5484d;
  color: #fff;
  font-size: 10.1px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Only the top seven destinations show at rest, so the list sizes to its content
   instead of the fixed 330px the country picker uses. It gains a scrollbar only
   once search or "show all" puts more rows in view. */
body.lp-home-v2 .lp-esim-dlist {
  height: auto;
  overflow-y: hidden;
}

body.lp-home-v2 .lp-esim-dlist.is-scroll {
  height: 320px;
  overflow-y: auto;
}

body.lp-home-v2 .lp-esim-more-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 7px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-deep);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 16px;
  cursor: pointer;
}

body.lp-home-v2 .lp-esim-more-btn:hover {
  background: #f2fafe;
  border-color: var(--blue);
}

/* Bundles cover many countries and have no single flag, so they get a globe
   glyph sized to sit where the flag would be. */
body.lp-home-v2 .lp-esim-globe {
  width: 20px;
  text-align: center;
  font-size: 14.6px;
  color: var(--blue-deep);
}

/* Matches the height of .lp-picker-input so both columns start on the same
   line as the destination search box. */
body.lp-home-v2 .lp-esim-selhead {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 13px;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: #f2fafe;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  white-space: nowrap;
}

body.lp-home-v2 .lp-esim-selhead img {
  width: 20px;
  height: auto;
  border-radius: 3px;
}

body.lp-home-v2 .lp-esim-selhead .cnt {
  margin-left: auto;
  font-weight: 500;
  color: var(--slate);
}

/* No fixed height and no scrollbar: the list is capped at three plans, so it
   sizes to its content instead. */
body.lp-home-v2 .lp-esim-plans {
  padding: 4px;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

body.lp-home-v2 .lp-esim-plan {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  margin-bottom: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
}

body.lp-home-v2 .lp-esim-plan:last-child {
  margin-bottom: 0;
}

body.lp-home-v2 .lp-esim-plan:hover {
  border-color: var(--blue);
}

body.lp-home-v2 .lp-esim-pmain {
  min-width: 0;
  flex: 1;
}

body.lp-home-v2 .lp-esim-pdata {
  display: block;
  font-size: 15.2px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}

body.lp-home-v2 .lp-esim-pdata .per {
  font-size: 11.8px;
  font-weight: 600;
  color: var(--slate);
}

body.lp-home-v2 .lp-esim-pdur {
  display: block;
  font-size: 12.4px;
  color: var(--slate);
}

body.lp-home-v2 .lp-esim-pgen {
  flex-shrink: 0;
  padding: 2px 6px;
  font-size: 10.7px;
  font-weight: 700;
  color: var(--blue-deep);
  background: #e8f5fd;
  border-radius: 4px;
}

body.lp-home-v2 .lp-esim-pprice {
  flex-shrink: 0;
  font-size: 16.9px;
  font-weight: 700;
  color: var(--blue-deep);
}

body.lp-home-v2 .lp-esim-pbuy {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12.9px;
  font-weight: 600;
  color: #0b4f6c;
  background: #ccffff;
  border: 1px solid #9fe3ea;
  border-radius: 16px;
  text-decoration: none;
}

body.lp-home-v2 .lp-esim-pbuy:hover {
  background: #b3f5f7;
  color: #0b4f6c;
  text-decoration: none;
}

body.lp-home-v2 .lp-esim-all {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-deep);
  text-align: center;
  text-decoration: none;
}

body.lp-home-v2 .lp-esim-all:hover {
  text-decoration: underline;
}

/* On phones the two columns stack, so cap the destination list height and let
   the plans sit directly beneath it. */
@media (max-width: 820px) {
  body.lp-home-v2 .lp-esim-picker .lp-picker-list {
    height: 220px;
  }
  body.lp-home-v2 .lp-esim-plan {
    flex-wrap: wrap;
  }
  body.lp-home-v2 .lp-esim-pprice {
    margin-left: auto;
  }
}

html.sp-dark body.lp-home-v2 .lp-esim-selhead {
  background: #1b2c3a;
  border-color: var(--line);
  color: var(--ink);
}

html.sp-dark body.lp-home-v2 .lp-esim-plans {
  background: #16232e;
  border-color: var(--line);
}

html.sp-dark body.lp-home-v2 .lp-esim-plan {
  background: var(--card);
  border-color: var(--line);
}

html.sp-dark body.lp-home-v2 .lp-esim-pgen {
  background: #23384a;
  color: #8fd0f5;
}

html.sp-dark body.lp-home-v2 .lp-esim-pprice {
  color: #8fd0f5;
}

/* ============================================================
 * v3 (2026-10-22): headline before the mockup on phones, key numbers
 * under the hero, picker first with USA preloaded, 8 free numbers,
 * colour service logos, compact eSIM card, icon-only Telegram pill on
 * phones. Everything is scoped to body.lp-home-v2 like the rest of
 * this file, so no other page changes.
 * ============================================================ */

/* key numbers under the hero */
body.lp-home-v2 .lp-hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 40px;
  padding: 16px 10px;
  text-align: center;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
body.lp-home-v2 .lp-hero-stats div { display: flex; flex-direction: column; gap: 2px; }
body.lp-home-v2 .lp-hero-stats b {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--blue-deep);
}
body.lp-home-v2 .lp-hero-stats span { font-size: 12px; font-weight: 500; color: var(--slate); }
body.lp-home-v2 .lp-hero-trust a.ti { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
body.lp-home-v2 .lp-hero-trust a.ti:hover { color: var(--blue-deep); }

/* picker now sits right under the hero */
body.lp-home-v2 .lp-picker-sec { padding: 0 0 48px; }
body.lp-home-v2 .lp-picker-note {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #e8f5fd;
  color: var(--blue-deep);
  font-size: 11.5px;
  font-weight: 600;
  vertical-align: middle;
}

/* free numbers: two rows of four, one footer line, smaller review pill */
body.lp-home-v2 .lp-fn-grid { grid-template-columns: repeat(4, 1fr); }
body.lp-home-v2 .lp-fn-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--slate);
}
body.lp-home-v2 .lp-fn-foot a { color: var(--blue-deep); font-weight: 600; }
body.lp-home-v2 .lp-tp-review { margin: 22px auto 0; padding: 9px 16px; max-width: 560px; }
body.lp-home-v2 .lp-tp-stars { font-size: 15px; }
body.lp-home-v2 .lp-tp-text { font-size: 13px; }

/* service logos in brand colour */
body.lp-home-v2 .lp-logos-row img { height: 26px; opacity: 1; filter: none; transition: transform .15s; }
body.lp-home-v2 .lp-logos-row img:hover { transform: translateY(-2px); }

/* compact eSIM card */
body.lp-home-v2 .lp-esim-promo-sec { padding: 56px 0; background: var(--bg); }
body.lp-home-v2 .lp-esim-promo {
  display: grid;
  grid-template-columns: 1.45fr .85fr;
  gap: 28px;
  align-items: center;
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, #f3fbff 0%, #e6f4fe 100%);
  box-shadow: var(--shadow);
}
body.lp-home-v2 .lp-esim-promo h2 { font-size: clamp(20px, 2.4vw, 27px); margin: 6px 0 8px; }
body.lp-home-v2 .lp-esim-promo p { margin: 0 0 14px; font-size: 14.4px; color: var(--slate); }
body.lp-home-v2 .lp-esim-promo p strong { color: var(--blue-deep); }
body.lp-home-v2 .lp-esim-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.lp-home-v2 .lp-esim-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12.8px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
body.lp-home-v2 .lp-esim-chip img { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; }
body.lp-home-v2 .lp-esim-chip:hover { border-color: var(--blue); color: var(--blue-deep); }
body.lp-home-v2 .lp-esim-promo-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
body.lp-home-v2 .lp-esim-promo-cta small { font-size: 12.4px; color: var(--slate); }

/* dark mode for the new pieces */
html.sp-dark body.lp-home-v2 .lp-hero-stats { background: rgba(29, 36, 49, .82); border-color: var(--line); }
html.sp-dark body.lp-home-v2 .lp-hero-stats b { color: #8fd0f5; }
html.sp-dark body.lp-home-v2 .lp-picker-note { background: #23384a; color: #8fd0f5; }
html.sp-dark body.lp-home-v2 .lp-fn-foot a { color: #7cc6f2; }
html.sp-dark body.lp-home-v2 .lp-logos-row img { filter: saturate(1.15) brightness(1.3); opacity: .95; }
html.sp-dark body.lp-home-v2 .lp-esim-promo-sec { background: var(--bg); }
html.sp-dark body.lp-home-v2 .lp-esim-promo { background: linear-gradient(135deg, #1b2735 0%, #182130 100%); border-color: var(--line); }
html.sp-dark body.lp-home-v2 .lp-esim-promo p strong { color: #8fd0f5; }
html.sp-dark body.lp-home-v2 .lp-esim-chip { background: var(--card); border-color: var(--line); color: var(--ink); }

/* tablets and phones */
@media (max-width: 900px) {
  /* headline, text and buttons first; the phone mockup follows */
  body.lp-home-v2 .lp-hero-visual { order: 2; }
  body.lp-home-v2 .lp-hero-grid { gap: 34px; }
  body.lp-home-v2 .lp-esim-promo { grid-template-columns: 1fr; padding: 22px 20px; }
  body.lp-home-v2 .lp-fn-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body.lp-home-v2 .lp-hero { padding: 30px 0 36px; }
  body.lp-home-v2 .lp-hero-stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; padding: 12px 8px; }
  body.lp-home-v2 .lp-hero-stats b { font-size: 20px; }
  body.lp-home-v2 .lp-phone { width: 230px; }
  body.lp-home-v2 .lp-fn-grid { gap: 8px; }
  body.lp-home-v2 .lp-fn-card { padding: 9px 10px; gap: 8px; }
  body.lp-home-v2 .lp-fn-flag { font-size: 20px; }
  body.lp-home-v2 .lp-fn-num { font-size: 12.6px; }
  body.lp-home-v2 .lp-fn-go { display: none; }
  /* icon-only Telegram pill so it stops covering text */
  body.lp-home-v2 .lp-float { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; right: 14px; bottom: 76px; }
  body.lp-home-v2 .lp-float span { display: none; }
  body.lp-home-v2 .lp-float svg { width: 21px; height: 21px; }
}

/* public-dark.css (loaded after this file by the shared header) paints every
   .lp-btn white for the other public pages; on this page the buttons are light
   cyan, so restate the ink colour with a more specific selector. */
html.sp-dark body.lp-home-v2 .lp-btn,
html.sp-dark body.lp-home-v2 .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-btn:focus { color: #0b4f6c !important; }
html.sp-dark body.lp-home-v2 .lp-btn-ghost,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:hover,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:focus { color: var(--ink) !important; }

/* ---- latest-messages strip under the free numbers (10 items, two columns) ---- */
body.lp-home-v2 .lp-feed { margin-top: 26px; }
body.lp-home-v2 .lp-feed-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 12.5px; color: var(--slate);
}
body.lp-home-v2 .lp-feed-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); }
body.lp-home-v2 .lp-feed-bar a { color: var(--blue-deep); font-weight: 600; }
body.lp-home-v2 .lp-msgs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
body.lp-home-v2 .lp-msg {
  display: flex; flex-direction: column; gap: 5px; padding: 10px 13px;
  background: #fff; border: 1px solid #dceefa; border-radius: 11px; box-shadow: 0 2px 8px rgba(74, 144, 185, .03);
}
body.lp-home-v2 .lp-msg-text {
  font-size: 13px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.lp-home-v2 .lp-msg-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 11.5px; color: #7f93a6; }
body.lp-home-v2 .lp-msg-meta > * + *::before { content: '\00b7'; margin: 0 6px; color: #b5c4d2; }
body.lp-home-v2 .lp-msg-meta a { color: var(--blue-deep); font-weight: 700; text-decoration: none; }
body.lp-home-v2 .lp-msg-meta a:hover { text-decoration: underline; }
html.sp-dark body.lp-home-v2 .lp-feed-live { color: var(--ink); }
html.sp-dark body.lp-home-v2 .lp-feed-bar a,
html.sp-dark body.lp-home-v2 .lp-msg-meta a { color: #7cc6f2; }
html.sp-dark body.lp-home-v2 .lp-msg { background: var(--card); border-color: var(--line); }
html.sp-dark body.lp-home-v2 .lp-msg-meta { color: var(--slate-light); }
@media (max-width: 760px) {
  body.lp-home-v2 .lp-msgs { grid-template-columns: 1fr; }
}

/* ---- colour fixes (contrast scan 2026-10-22) ---- */
/* light mode: the faintest labels were below 3:1 */
body.lp-home-v2 .lp-logos p { color: #7f93a6; }
body.lp-home-v2 .lp-fn-country { color: #7f93a6; }
body.lp-home-v2 .lp-foot-about,
body.lp-home-v2 .lp-foot a { color: #5d7a90; }
body.lp-home-v2 .lp-foot-bottom { color: #6b8599; }
/* dark mode: the footer kept its light-mode colours and the mockup codes were dark on dark */
html.sp-dark body.lp-home-v2 .lp-foot { background: #10141c; color: #aebccd; border-top-color: #1e2633; }
html.sp-dark body.lp-home-v2 .lp-foot h4 { color: #dfe7f1; }
html.sp-dark body.lp-home-v2 .lp-foot a,
html.sp-dark body.lp-home-v2 .lp-foot-about { color: #aebccd; }
html.sp-dark body.lp-home-v2 .lp-foot a:hover { color: #fff; }
html.sp-dark body.lp-home-v2 .lp-foot-tg { background: rgba(43, 159, 227, .16); border-color: rgba(43, 159, 227, .4); color: #cfe6f8 !important; }
html.sp-dark body.lp-home-v2 .lp-foot-tg:hover { background: rgba(43, 159, 227, .28); color: #fff !important; }
html.sp-dark body.lp-home-v2 .lp-foot-bottom { border-top-color: rgba(255, 255, 255, .08); color: #8395a9; }
html.sp-dark body.lp-home-v2 .lp-foot-bottom a { color: #aebccd; }
html.sp-dark body.lp-home-v2 .lp-bubble .code { color: #8fd0f5; }
html.sp-dark body.lp-home-v2 .lp-bubble-time { color: #8494a8; }
html.sp-dark body.lp-home-v2 .lp-phone-head .nm { color: var(--ink); }

/* ---- accent colour: brand blue instead of light cyan (user choice, 2026-10-22) ----
   Primary actions are solid #1a73b8 with white text (5:1); the outline button stays
   the secondary. Everything that was cyan follows, so every clickable thing matches. */
body.lp-home-v2 .lp-btn { background: #1a73b8; color: #fff !important; border-color: #1a73b8; box-shadow: 0 8px 18px -8px rgba(26, 115, 184, .55); }
body.lp-home-v2 .lp-btn:hover,
body.lp-home-v2 .lp-btn:focus { background: #155f93; border-color: #155f93; color: #fff !important; }
body.lp-home-v2 .lp-btn-ghost { background: #fff; color: var(--ink) !important; border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
body.lp-home-v2 .lp-btn-ghost:hover,
body.lp-home-v2 .lp-btn-ghost:focus { background: #fff; border-color: #1a73b8; color: #155f93 !important; }
body.lp-home-v2 .lp-step .n { background: #1a73b8; color: #fff; border-color: #1a73b8; }
body.lp-home-v2 .lp-fn-card:hover .lp-fn-go { background: #1a73b8; color: #fff; }
body.lp-home-v2 .lp-picker-apps .page-item.active .page-link { background: #1a73b8; color: #fff; border-color: #1a73b8; }
body.lp-home-v2 .lp-float { background: #1a73b8; color: #fff; border-color: #1a73b8; }
body.lp-home-v2 .lp-float:hover,
body.lp-home-v2 .lp-float:focus { background: #155f93; color: #fff; }
body.lp-home-v2 .lp-float svg path { fill: #fff; }
body.lp-home-v2 .lp-top { background: #1a73b8; color: #fff; border-color: #1a73b8; }
body.lp-home-v2 .lp-cta { background: #1a73b8; border-color: #1a73b8; box-shadow: 0 14px 30px -18px rgba(26, 115, 184, .6); }
body.lp-home-v2 .lp-cta h2 { color: #fff; }
body.lp-home-v2 .lp-cta p { color: rgba(255, 255, 255, .88); }
body.lp-home-v2 .lp-cta .lp-btn { background: #fff; color: #155f93 !important; border-color: #fff; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35); }
body.lp-home-v2 .lp-cta .lp-btn:hover,
body.lp-home-v2 .lp-cta .lp-btn:focus { background: #eaf4fc; border-color: #eaf4fc; color: #155f93 !important; }
html.sp-dark body.lp-home-v2 .lp-btn,
html.sp-dark body.lp-home-v2 .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-btn:focus { color: #fff !important; }
html.sp-dark body.lp-home-v2 .lp-btn-ghost,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:hover,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:focus { background: var(--card); color: var(--ink) !important; border-color: var(--line); }
html.sp-dark body.lp-home-v2 .lp-btn-ghost:hover,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:focus { border-color: #4fa5dc; }
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:focus { color: #155f93 !important; }
html.sp-dark body.lp-home-v2 .lp-float { color: #fff !important; }

/* header "Create Account": public-nav.css styles it with three classes, so this
   needs the extra body selector to win */
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn { background: #1a73b8; color: #fff !important; border-color: #1a73b8; box-shadow: 0 6px 14px -8px rgba(26, 115, 184, .55); }
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:hover,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:focus { background: #155f93; border-color: #155f93; color: #fff !important; }
html.sp-dark body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn { color: #fff !important; }

/* ---- accent colour v2: light blue #53b2e6 with navy text (user choice, 2026-10-22) ----
   White on this blue is 2.4:1, navy on it is 7.3:1, so the text is dark. */
body.lp-home-v2 .lp-btn,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn { background: #53b2e6; color: #0f1b2d !important; border-color: #53b2e6; box-shadow: 0 8px 18px -8px rgba(83, 178, 230, .6); }
body.lp-home-v2 .lp-btn:hover,
body.lp-home-v2 .lp-btn:focus,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:hover,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:focus { background: #3fa6e0; border-color: #3fa6e0; color: #0f1b2d !important; }
body.lp-home-v2 .lp-btn-ghost { background: #fff; color: var(--ink) !important; border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
body.lp-home-v2 .lp-btn-ghost:hover,
body.lp-home-v2 .lp-btn-ghost:focus { background: #fff; border-color: #53b2e6; color: #155f93 !important; }
body.lp-home-v2 .lp-step .n { background: #53b2e6; color: #0f1b2d; border-color: #53b2e6; }
body.lp-home-v2 .lp-fn-card:hover .lp-fn-go { background: #53b2e6; color: #0f1b2d; }
body.lp-home-v2 .lp-picker-apps .page-item.active .page-link { background: #53b2e6; color: #0f1b2d; border-color: #53b2e6; }
body.lp-home-v2 .lp-float { background: #53b2e6; color: #0f1b2d; border-color: #53b2e6; }
body.lp-home-v2 .lp-float:hover,
body.lp-home-v2 .lp-float:focus { background: #3fa6e0; color: #0f1b2d; }
body.lp-home-v2 .lp-float svg path { fill: #0f1b2d; }
body.lp-home-v2 .lp-top { background: #53b2e6; color: #0f1b2d; border-color: #53b2e6; }
body.lp-home-v2 .lp-cta { background: #53b2e6; border-color: #53b2e6; box-shadow: 0 14px 30px -18px rgba(83, 178, 230, .7); }
body.lp-home-v2 .lp-cta h2 { color: #0f1b2d; }
body.lp-home-v2 .lp-cta p { color: #123a57; }
body.lp-home-v2 .lp-cta .lp-btn { background: #0f1b2d; color: #ffffff !important; border-color: #0f1b2d; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
body.lp-home-v2 .lp-cta .lp-btn:hover,
body.lp-home-v2 .lp-cta .lp-btn:focus { background: #18324a; border-color: #18324a; color: #ffffff !important; }
html.sp-dark body.lp-home-v2 .lp-btn,
html.sp-dark body.lp-home-v2 .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-btn:focus,
html.sp-dark body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-float { color: #0f1b2d !important; }
html.sp-dark body.lp-home-v2 .lp-btn-ghost,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:hover,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:focus { background: var(--card); color: var(--ink) !important; border-color: var(--line); }
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:focus { color: #ffffff !important; }

/* ---- accent colour v3: gradient #42d3f2 -> #155dfc with white text (user choice, 2026-10-22) ----
   The blue end carries 60% of each button so white text sits on the darker part. */
body.lp-home-v2 { --grad: linear-gradient(135deg, #42d3f2 0%, #155dfc 60%); }
body.lp-home-v2 .lp-btn,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn { background: linear-gradient(135deg, #42d3f2 0%, #155dfc 60%); color: #ffffff !important; border: 1px solid transparent; box-shadow: 0 8px 20px -8px rgba(21, 93, 252, .55); }
body.lp-home-v2 .lp-btn:hover,
body.lp-home-v2 .lp-btn:focus,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:hover,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:focus { background: linear-gradient(135deg, #2fc6ea 0%, #0e4fe0 60%); color: #ffffff !important; }
body.lp-home-v2 .lp-btn-ghost { background: #fff; color: var(--ink) !important; border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
body.lp-home-v2 .lp-btn-ghost:hover,
body.lp-home-v2 .lp-btn-ghost:focus { background: #fff; border-color: #155dfc; color: #155dfc !important; }
body.lp-home-v2 .lp-step .n { background: linear-gradient(135deg, #42d3f2 0%, #155dfc 60%); color: #ffffff; border-color: transparent; }
body.lp-home-v2 .lp-fn-card:hover .lp-fn-go { background: linear-gradient(135deg, #42d3f2 0%, #155dfc 60%); color: #ffffff; }
body.lp-home-v2 .lp-picker-apps .page-item.active .page-link { background: linear-gradient(135deg, #42d3f2 0%, #155dfc 60%); color: #ffffff; border-color: transparent; }
body.lp-home-v2 .lp-float { background: linear-gradient(135deg, #42d3f2 0%, #155dfc 60%); color: #ffffff; border-color: transparent; }
body.lp-home-v2 .lp-float:hover,
body.lp-home-v2 .lp-float:focus { background: linear-gradient(135deg, #2fc6ea 0%, #0e4fe0 60%); color: #ffffff; }
body.lp-home-v2 .lp-float svg path { fill: #ffffff; }
body.lp-home-v2 .lp-top { background: linear-gradient(135deg, #42d3f2 0%, #155dfc 60%); color: #ffffff; border-color: transparent; }
body.lp-home-v2 .lp-cta { background: linear-gradient(135deg, #42d3f2 0%, #155dfc 70%); border-color: transparent; box-shadow: 0 14px 30px -18px rgba(21, 93, 252, .6); }
body.lp-home-v2 .lp-cta h2 { color: #ffffff; }
body.lp-home-v2 .lp-cta p { color: rgba(255, 255, 255, .9); }
body.lp-home-v2 .lp-cta .lp-btn { background: #ffffff; color: #155dfc !important; border-color: #ffffff; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35); }
body.lp-home-v2 .lp-cta .lp-btn:hover,
body.lp-home-v2 .lp-cta .lp-btn:focus { background: #eaf2ff; border-color: #eaf2ff; color: #0e4fe0 !important; }
html.sp-dark body.lp-home-v2 .lp-btn,
html.sp-dark body.lp-home-v2 .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-btn:focus,
html.sp-dark body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-float { color: #ffffff !important; }
html.sp-dark body.lp-home-v2 .lp-btn-ghost,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:hover,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:focus { background: var(--card); color: var(--ink) !important; border-color: var(--line); }
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:focus { color: #155dfc !important; }

/* ---- accent colour v4: gradient #00ff00 -> #00ffff with navy text (user choice, 2026-10-22) ----
   Both ends are too bright for white text (under 1.5:1), navy reads at 9:1 or better.
   The headline highlight keeps the blue gradient: neon text on the pale page would not be readable. */
body.lp-home-v2 .lp-hero h1 .hl { background: linear-gradient(135deg, #42d3f2 0%, #155dfc 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.lp-home-v2 .lp-btn,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn { background: linear-gradient(135deg, #00ff00 0%, #00ffff 100%); color: #0f1b2d !important; border: 1px solid transparent; box-shadow: 0 8px 20px -8px rgba(0, 220, 180, .55); }
body.lp-home-v2 .lp-btn:hover,
body.lp-home-v2 .lp-btn:focus,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:hover,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:focus { background: linear-gradient(135deg, #00e600 0%, #00e6e6 100%); color: #0f1b2d !important; }
body.lp-home-v2 .lp-btn-ghost { background: #fff; color: var(--ink) !important; border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
body.lp-home-v2 .lp-btn-ghost:hover,
body.lp-home-v2 .lp-btn-ghost:focus { background: #fff; border-color: #00c2c2; color: #0f1b2d !important; }
body.lp-home-v2 .lp-step .n { background: linear-gradient(135deg, #00ff00 0%, #00ffff 100%); color: #0f1b2d; border-color: transparent; }
body.lp-home-v2 .lp-fn-card:hover .lp-fn-go { background: linear-gradient(135deg, #00ff00 0%, #00ffff 100%); color: #0f1b2d; }
body.lp-home-v2 .lp-picker-apps .page-item.active .page-link { background: linear-gradient(135deg, #00ff00 0%, #00ffff 100%); color: #0f1b2d; border-color: transparent; }
body.lp-home-v2 .lp-float { background: linear-gradient(135deg, #00ff00 0%, #00ffff 100%); color: #0f1b2d; border-color: transparent; }
body.lp-home-v2 .lp-float:hover,
body.lp-home-v2 .lp-float:focus { background: linear-gradient(135deg, #00e600 0%, #00e6e6 100%); color: #0f1b2d; }
body.lp-home-v2 .lp-float svg path { fill: #0f1b2d; }
body.lp-home-v2 .lp-top { background: linear-gradient(135deg, #00ff00 0%, #00ffff 100%); color: #0f1b2d; border-color: transparent; }
body.lp-home-v2 .lp-cta { background: linear-gradient(135deg, #00ff00 0%, #00ffff 100%); border-color: transparent; box-shadow: 0 14px 30px -18px rgba(0, 220, 180, .6); }
body.lp-home-v2 .lp-cta h2 { color: #0f1b2d; }
body.lp-home-v2 .lp-cta p { color: #123a3a; }
body.lp-home-v2 .lp-cta .lp-btn { background: #0f1b2d; color: #ffffff !important; border-color: #0f1b2d; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
body.lp-home-v2 .lp-cta .lp-btn:hover,
body.lp-home-v2 .lp-cta .lp-btn:focus { background: #18324a; border-color: #18324a; color: #ffffff !important; }
html.sp-dark body.lp-home-v2 .lp-btn,
html.sp-dark body.lp-home-v2 .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-btn:focus,
html.sp-dark body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-float { color: #0f1b2d !important; }
html.sp-dark body.lp-home-v2 .lp-btn-ghost,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:hover,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:focus { background: var(--card); color: var(--ink) !important; border-color: var(--line); }
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:focus { color: #ffffff !important; }

/* ---- accent colour v5: gradient #14a3c7 -> #00ffff with navy text (user choice, 2026-10-22) ---- */
body.lp-home-v2 .lp-btn,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn { background: linear-gradient(135deg, #14a3c7 0%, #00ffff 100%); color: #0f1b2d !important; border: 1px solid transparent; box-shadow: 0 8px 20px -8px rgba(20, 163, 199, .6); }
body.lp-home-v2 .lp-btn:hover,
body.lp-home-v2 .lp-btn:focus,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:hover,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:focus { background: linear-gradient(135deg, #1192b3 0%, #00e6e6 100%); color: #0f1b2d !important; }
body.lp-home-v2 .lp-btn-ghost { background: #fff; color: var(--ink) !important; border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
body.lp-home-v2 .lp-btn-ghost:hover,
body.lp-home-v2 .lp-btn-ghost:focus { background: #fff; border-color: #14a3c7; color: #0f1b2d !important; }
body.lp-home-v2 .lp-step .n { background: linear-gradient(135deg, #14a3c7 0%, #00ffff 100%); color: #0f1b2d; border-color: transparent; }
body.lp-home-v2 .lp-fn-card:hover .lp-fn-go { background: linear-gradient(135deg, #14a3c7 0%, #00ffff 100%); color: #0f1b2d; }
body.lp-home-v2 .lp-picker-apps .page-item.active .page-link { background: linear-gradient(135deg, #14a3c7 0%, #00ffff 100%); color: #0f1b2d; border-color: transparent; }
body.lp-home-v2 .lp-float { background: linear-gradient(135deg, #14a3c7 0%, #00ffff 100%); color: #0f1b2d; border-color: transparent; }
body.lp-home-v2 .lp-float:hover,
body.lp-home-v2 .lp-float:focus { background: linear-gradient(135deg, #1192b3 0%, #00e6e6 100%); color: #0f1b2d; }
body.lp-home-v2 .lp-float svg path { fill: #0f1b2d; }
body.lp-home-v2 .lp-top { background: linear-gradient(135deg, #14a3c7 0%, #00ffff 100%); color: #0f1b2d; border-color: transparent; }
body.lp-home-v2 .lp-cta { background: linear-gradient(135deg, #14a3c7 0%, #00ffff 100%); border-color: transparent; box-shadow: 0 14px 30px -18px rgba(20, 163, 199, .6); }
body.lp-home-v2 .lp-cta h2 { color: #0f1b2d; }
body.lp-home-v2 .lp-cta p { color: #0f3340; }
body.lp-home-v2 .lp-cta .lp-btn { background: #0f1b2d; color: #ffffff !important; border-color: #0f1b2d; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
body.lp-home-v2 .lp-cta .lp-btn:hover,
body.lp-home-v2 .lp-cta .lp-btn:focus { background: #18324a; border-color: #18324a; color: #ffffff !important; }
html.sp-dark body.lp-home-v2 .lp-btn,
html.sp-dark body.lp-home-v2 .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-btn:focus,
html.sp-dark body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-float { color: #0f1b2d !important; }
html.sp-dark body.lp-home-v2 .lp-btn-ghost,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:hover,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:focus { background: var(--card); color: var(--ink) !important; border-color: var(--line); }
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:focus { color: #ffffff !important; }

/* ---- accent colour v6: solid #00bfff with navy text (user choice, 2026-10-22) ---- */
body.lp-home-v2 .lp-btn,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn { background: #00bfff; color: #0f1b2d !important; border: 1px solid #00bfff; box-shadow: 0 8px 20px -8px rgba(0, 191, 255, .6); }
body.lp-home-v2 .lp-btn:hover,
body.lp-home-v2 .lp-btn:focus,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:hover,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:focus { background: #00aeeb; border-color: #00aeeb; color: #0f1b2d !important; }
body.lp-home-v2 .lp-btn-ghost { background: #fff; color: var(--ink) !important; border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
body.lp-home-v2 .lp-btn-ghost:hover,
body.lp-home-v2 .lp-btn-ghost:focus { background: #fff; border-color: #00bfff; color: #0f1b2d !important; }
body.lp-home-v2 .lp-step .n { background: #00bfff; color: #0f1b2d; border-color: #00bfff; }
body.lp-home-v2 .lp-fn-card:hover .lp-fn-go { background: #00bfff; color: #0f1b2d; }
body.lp-home-v2 .lp-picker-apps .page-item.active .page-link { background: #00bfff; color: #0f1b2d; border-color: #00bfff; }
body.lp-home-v2 .lp-float { background: #00bfff; color: #0f1b2d; border-color: #00bfff; }
body.lp-home-v2 .lp-float:hover,
body.lp-home-v2 .lp-float:focus { background: #00aeeb; color: #0f1b2d; }
body.lp-home-v2 .lp-float svg path { fill: #0f1b2d; }
body.lp-home-v2 .lp-top { background: #00bfff; color: #0f1b2d; border-color: #00bfff; }
body.lp-home-v2 .lp-cta { background: #00bfff; border-color: #00bfff; box-shadow: 0 14px 30px -18px rgba(0, 191, 255, .6); }
body.lp-home-v2 .lp-cta h2 { color: #0f1b2d; }
body.lp-home-v2 .lp-cta p { color: #0f3340; }
body.lp-home-v2 .lp-cta .lp-btn { background: #0f1b2d; color: #ffffff !important; border-color: #0f1b2d; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
body.lp-home-v2 .lp-cta .lp-btn:hover,
body.lp-home-v2 .lp-cta .lp-btn:focus { background: #18324a; border-color: #18324a; color: #ffffff !important; }
html.sp-dark body.lp-home-v2 .lp-btn,
html.sp-dark body.lp-home-v2 .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-btn:focus,
html.sp-dark body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-float { color: #0f1b2d !important; }
html.sp-dark body.lp-home-v2 .lp-btn-ghost,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:hover,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:focus { background: var(--card); color: var(--ink) !important; border-color: var(--line); }
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:focus { color: #ffffff !important; }

/* ---- accent colour v7: gradient #a8ffff -> #00ffff with navy text (user choice, 2026-10-22) ---- */
body.lp-home-v2 .lp-btn,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn { background: linear-gradient(135deg, #a8ffff 0%, #00ffff 100%); color: #0f1b2d !important; border: 1px solid #7ff2f2; box-shadow: 0 8px 20px -8px rgba(0, 220, 220, .5); }
body.lp-home-v2 .lp-btn:hover,
body.lp-home-v2 .lp-btn:focus,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:hover,
body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn:focus { background: linear-gradient(135deg, #8ff7f7 0%, #00e6e6 100%); border-color: #5fe6e6; color: #0f1b2d !important; }
body.lp-home-v2 .lp-btn-ghost { background: #fff; color: var(--ink) !important; border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
body.lp-home-v2 .lp-btn-ghost:hover,
body.lp-home-v2 .lp-btn-ghost:focus { background: #fff; border-color: #00d6d6; color: #0f1b2d !important; }
body.lp-home-v2 .lp-step .n { background: linear-gradient(135deg, #a8ffff 0%, #00ffff 100%); color: #0f1b2d; border-color: #7ff2f2; }
body.lp-home-v2 .lp-fn-card:hover .lp-fn-go { background: linear-gradient(135deg, #a8ffff 0%, #00ffff 100%); color: #0f1b2d; }
body.lp-home-v2 .lp-picker-apps .page-item.active .page-link { background: linear-gradient(135deg, #a8ffff 0%, #00ffff 100%); color: #0f1b2d; border-color: #7ff2f2; }
body.lp-home-v2 .lp-float { background: linear-gradient(135deg, #a8ffff 0%, #00ffff 100%); color: #0f1b2d; border-color: #7ff2f2; }
body.lp-home-v2 .lp-float:hover,
body.lp-home-v2 .lp-float:focus { background: linear-gradient(135deg, #8ff7f7 0%, #00e6e6 100%); color: #0f1b2d; }
body.lp-home-v2 .lp-float svg path { fill: #0f1b2d; }
body.lp-home-v2 .lp-top { background: linear-gradient(135deg, #a8ffff 0%, #00ffff 100%); color: #0f1b2d; border-color: #7ff2f2; }
body.lp-home-v2 .lp-cta { background: linear-gradient(135deg, #a8ffff 0%, #00ffff 100%); border-color: #7ff2f2; box-shadow: 0 14px 30px -18px rgba(0, 220, 220, .5); }
body.lp-home-v2 .lp-cta h2 { color: #0f1b2d; }
body.lp-home-v2 .lp-cta p { color: #0f3340; }
body.lp-home-v2 .lp-cta .lp-btn { background: #0f1b2d; color: #ffffff !important; border-color: #0f1b2d; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
body.lp-home-v2 .lp-cta .lp-btn:hover,
body.lp-home-v2 .lp-cta .lp-btn:focus { background: #18324a; border-color: #18324a; color: #ffffff !important; }
html.sp-dark body.lp-home-v2 .lp-btn,
html.sp-dark body.lp-home-v2 .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-btn:focus,
html.sp-dark body.lp-home-v2 .lp-nav .lp-nav-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-float { color: #0f1b2d !important; }
html.sp-dark body.lp-home-v2 .lp-btn-ghost,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:hover,
html.sp-dark body.lp-home-v2 .lp-btn-ghost:focus { background: var(--card); color: var(--ink) !important; border-color: var(--line); }
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:hover,
html.sp-dark body.lp-home-v2 .lp-cta .lp-btn:focus { color: #ffffff !important; }