/* Quince Chat — landing & funnel styles
   Brand tokens (from Logo.svg + App Store screenshots):
     dark     = #01011F   near-black navy (footer, hero bg)
     primary  = #2F3BBD   deep brand blue
     mid      = #1E1C8D   mid blue
     accent   = #00A1FF   bright cyan (CTA on dark, checkmarks)
     glow     = #56AEFF   lighter cyan
     success  = #10B981   green
   Hero background mirrors the app's dark premium aesthetic. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ─── Top bar ─────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
/* Blur lives on a pseudo-element, NOT on the sticky node itself.
   iOS Safari breaks position:sticky when backdrop-filter is on the same element,
   causing the bar (and its Get Premium CTA) to scroll away. */
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(1, 1, 31, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar .container { position: relative; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex-shrink: 0; }
.brand-logo img { width: 100%; height: 100%; display: block; }
.brand-name { font-weight: 700; font-size: 18px; color: #fff; }
.topnav { display: flex; align-items: center; gap: 24px; }
.topnav a { text-decoration: none; color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: color .15s; }
.topnav a:hover { color: #fff; }
/* CTA in the nav (Get Premium): full-white label + cyan glow so it stays vibrant.
   Without this, `.topnav a` dims the label to 75% white and it looks washed out. */
.topnav a.btn-primary,
.topnav a.btn-primary:hover { color: #fff; box-shadow: 0 2px 14px rgba(0,161,255,0.45); }

/* ─── Buttons ─────────────────────────────── */
.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-block; text-align: center; text-decoration: none;
  border-radius: 28px; padding: 14px 26px;
  font-weight: 700; font-size: 15px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s;
}
/* Cyan CTA — hero & on dark backgrounds */
.btn-primary {
  background: #00A1FF;
  color: #fff;
  box-shadow: 0 4px 24px rgba(0,161,255,0.45);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,161,255,0.55); }
/* Light CTA — on white sections */
.btn-primary-blue {
  display: inline-block; text-align: center; text-decoration: none;
  border-radius: 28px; padding: 14px 26px;
  font-weight: 700; font-size: 15px;
  background: #2F3BBD; color: #fff;
  box-shadow: 0 4px 18px rgba(47,59,189,0.3);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary-blue:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(47,59,189,0.45); }
.btn-secondary { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.btn-secondary:hover { background: rgba(255,255,255,0.18); }
.btn-ghost { background: transparent; color: rgba(255,255,255,0.7); padding: 10px 14px; font-size: 13px; }
.btn-sm  { padding: 9px 16px; font-size: 13px; border-radius: 20px; box-shadow: none; }
.btn-lg  { padding: 18px 38px; font-size: 17px; }
.btn-block { display: block; width: 100%; }

/* Official Apple "Download on the App Store" badge.
   Per Apple guidelines: unmodified artwork, min 40px onscreen height,
   and minimum clear space of 1/4 the badge height on all sides. */
.app-store-badge { display: inline-block; line-height: 0; margin: 12px; transition: opacity .15s ease, transform .12s ease; }
.app-store-badge img { height: 48px; width: auto; display: block; }   /* 48px → clear space 12px */
.app-store-badge:hover { opacity: 0.85; transform: translateY(-1px); }
.app-store-badge-lg { margin: 14px; }
.app-store-badge-lg img { height: 56px; }                              /* 56px → clear space 14px */
@media (max-width: 540px) {
  .app-store-badge { margin: 12px; }
  .app-store-badge img { height: 46px; }
  .app-store-badge-lg { margin: 13px; }
  .app-store-badge-lg img { height: 50px; }
}

/* ─── Hero (dark) ─────────────────────────── */
.hero {
  background: linear-gradient(160deg, #050B3A 0%, #0F1870 55%, #1E2480 100%);
  padding: 90px 0 0;
  overflow: hidden;
  position: relative;
}
/* Subtle glow orb */
.hero::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(0,161,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner { text-align: center; position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,161,255,0.12); border: 1px solid rgba(0,161,255,0.25);
  color: #56AEFF; font-size: 12px; font-weight: 600; letter-spacing: .4px;
  padding: 6px 14px; border-radius: 20px; margin-bottom: 22px;
}
.hero-eyebrow .stars-gold,
.stars-gold { color: #F59E0B; }
.hero h1 {
  font-size: 58px; line-height: 1.04; margin: 0 0 20px;
  font-weight: 800; letter-spacing: -2px; color: #fff;
}
.hero h1 em { font-style: normal; color: #56AEFF; }
.hero-sub {
  font-size: 18px; color: rgba(255,255,255,0.65);
  margin: 0 auto 36px; max-width: 600px; line-height: 1.6;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.hero-trust {
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  color: rgba(255,255,255,0.45); font-size: 12px; margin-bottom: 60px;
}
.hero-trust span { display: flex; align-items: center; gap: 5px; }

/* ─── Phone mockup showcase ───────────────── */
.phones-strip {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 18px; padding-bottom: 0;
  margin: 0 -24px;
}
.phone-wrap {
  width: 180px; flex-shrink: 0;
  filter: drop-shadow(0 32px 64px rgba(0,0,0,0.6));
  transition: transform .3s ease;
}
.phone-wrap:hover { transform: translateY(-10px); }
.phone-wrap.center { width: 220px; transform: translateY(0px); z-index: 2; }
.phone-wrap.center:hover { transform: translateY(-12px); }
.phone-wrap.side { opacity: 0.7; width: 160px; }
.phone-frame {
  border-radius: 32px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
  background: #01011F;
}
.phone-frame img { width: 100%; display: block; }

/* ─── Social proof bar ────────────────────── */
.proof-bar {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 28px 0;
}
.proof-bar .container {
  display: flex; gap: 0; justify-content: center; align-items: stretch;
  flex-wrap: wrap;
}
.proof-item {
  flex: 1; min-width: 160px; max-width: 240px;
  text-align: center; padding: 0 24px;
  border-right: 1px solid rgba(0,0,0,0.08);
}
.proof-item:last-child { border-right: none; }
.proof-item strong { display: block; font-size: 30px; font-weight: 800; color: #0F1870; }
.proof-item span { font-size: 13px; color: rgba(0,0,0,0.5); }

/* ─── Features ────────────────────────────── */
.features { padding: 88px 0; background: #fff; }
.features h2 { font-size: 38px; text-align: center; margin: 0 0 12px; font-weight: 800; color: #0F1870; }
.features .section-sub { text-align: center; color: rgba(0,0,0,0.5); margin: 0 0 52px; font-size: 16px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.feature-card {
  padding: 28px; border-radius: 20px;
  background: #F4F6FF;
  border: 1px solid rgba(47,59,189,0.07);
}
.feature-card h3 { font-size: 17px; margin: 16px 0 8px; font-weight: 700; color: #0F1870; }
.feature-card p { font-size: 14px; color: rgba(0,0,0,0.6); line-height: 1.6; margin: 0; }
.feature-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, #2F3BBD, #56AEFF);
  display: grid; place-items: center; color: #fff; font-size: 22px;
}
.feature-icon svg { width: 26px; height: 26px; }
.hero-trust span svg { width: 14px; height: 14px; flex-shrink: 0; }
.pt-icon { display: flex; align-items: center; justify-content: center; }
.pt-icon svg { width: 22px; height: 22px; }

/* ─── Screens gallery ─────────────────────── */
.screens-section {
  padding: 72px 0 0;
  background: linear-gradient(180deg, #F4F6FF 0%, #EEF1FF 100%);
  overflow: hidden;
}
.screens-section h2 { font-size: 36px; text-align: center; margin: 0 0 12px; font-weight: 800; color: #0F1870; }
.screens-section .section-sub { text-align: center; color: rgba(0,0,0,0.5); margin: 0 0 48px; }
.screens-scroll {
  display: flex; gap: 20px; justify-content: center;
  flex-wrap: nowrap; overflow-x: auto; padding: 0 24px 48px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.screens-scroll::-webkit-scrollbar { display: none; }
.screen-item {
  flex-shrink: 0; width: 200px;
  border-radius: 28px; overflow: hidden;
  border: 2px solid rgba(47,59,189,0.12);
  box-shadow: 0 24px 48px rgba(15,24,112,0.15);
}
.screen-item img { width: 100%; display: block; }

/* ─── Pricing ─────────────────────────────── */
.pricing { padding: 88px 0; background: #fff; }
.pricing h2 { font-size: 38px; text-align: center; margin: 0 0 8px; font-weight: 800; color: #0F1870; }
.pricing-sub { text-align: center; color: rgba(0,0,0,0.55); margin: 0 0 48px; font-size: 16px; }
.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 18px; max-width: 960px; margin: 0 auto;
}
.plan-card {
  background: #F4F6FF; border-radius: 24px; padding: 30px;
  border: 1.5px solid rgba(47,59,189,0.08); position: relative;
}
.plan-card-featured {
  background: #0F1870;
  border: 2px solid #00A1FF;
  box-shadow: 0 24px 64px rgba(0,161,255,0.2), 0 8px 24px rgba(15,24,112,0.4);
  transform: scale(1.04);
}
.plan-card-featured .plan-name,
.plan-card-featured .plan-price,
.plan-card-featured .plan-price-note,
.plan-card-featured .plan-features li { color: rgba(255,255,255,0.85) !important; }
.plan-card-featured .plan-price { color: #fff !important; }
.plan-card-featured .plan-features li::before { color: #56AEFF !important; }
.plan-badge {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .6px;
  background: #00A1FF; color: #fff;
  padding: 4px 10px; border-radius: 12px; margin-bottom: 14px;
}
.plan-badge-quiet { background: rgba(47,59,189,0.12); color: #2F3BBD; }
.plan-badge-green { background: #10B981; }
.plan-name { font-size: 12px; font-weight: 700; color: rgba(0,0,0,0.45); text-transform: uppercase; letter-spacing: .6px; }
.plan-price { font-size: 42px; font-weight: 800; margin: 6px 0 4px; color: #0F1870; }
.plan-price span { font-size: 15px; color: rgba(0,0,0,0.45); font-weight: 500; }
.plan-price-note { font-size: 13px; color: rgba(0,0,0,0.45); margin-bottom: 18px; }
.plan-features { list-style: none; padding: 0; margin: 18px 0 24px; }
.plan-features li {
  padding: 7px 0; font-size: 14px; color: rgba(0,0,0,0.7);
  display: flex; gap: 9px; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features li::before { content: "✓"; color: #00A1FF; font-weight: 800; flex-shrink: 0; }

.pay-providers {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin: 44px 0 12px;
  color: rgba(0,0,0,0.45); font-size: 12px;
}
.pay-providers .pp {
  background: #F4F6FF; border: 1px solid rgba(0,0,0,0.08);
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: rgba(0,0,0,0.65);
}
.pricing-fineprint {
  text-align: center; font-size: 12px;
  color: rgba(0,0,0,0.45); line-height: 1.7; margin: 12px 0 0;
}
.pricing-fineprint a { color: #2F3BBD; }

/* ─── Pricing — Toggle-style layout ──────── */
.pricing-eyebrow {
  text-align: center; font-size: 13px; font-weight: 700;
  letter-spacing: .5px; color: #00A1FF; margin-bottom: 10px;
  text-transform: uppercase;
}
.plan-tabs {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin: 0 0 44px;
}
.plan-tab {
  padding: 10px 22px; border-radius: 24px;
  border: 1.5px solid rgba(47,59,189,0.15);
  background: #fff; color: rgba(0,0,0,0.6);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all .15s; display: flex; align-items: center; gap: 7px;
}
.plan-tab:hover { border-color: #2F3BBD; color: #0F1870; }
.plan-tab-active {
  background: #0F1870; color: #fff; border-color: #0F1870;
  box-shadow: 0 4px 16px rgba(15,24,112,0.25);
}
.save-badge {
  background: #00A1FF; color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 10px;
}
.plan-tab-active .save-badge { background: rgba(0,161,255,0.65); }

.pricing-split {
  display: grid; grid-template-columns: 1fr 1.25fr;
  gap: 52px; align-items: start;
  max-width: 880px; margin: 0 auto;
}
/* Light "trust" card — single bright element on page is the Get Now button */
.pricing-card {
  position: relative;
  background: #FAFBFF;
  border: 1px solid #E2E7F5;
  border-radius: 24px; padding: 36px 32px 32px;
  color: #0F1870;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 28px rgba(15,24,112,0.06);
}
.pricing-card::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px;
  background: #00A1FF; border-radius: 0 3px 3px 0;
}
.pc-label {
  font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: #00A1FF;
  margin-bottom: 14px;
}
.pc-price {
  font-size: 52px; font-weight: 800; line-height: 1; margin-bottom: 6px;
  color: #0F1870; letter-spacing: -0.5px;
}
.pc-price span {
  font-size: 18px; font-weight: 500;
  color: rgba(15,24,112,0.55); margin-left: 2px;
}
.pc-equiv { font-size: 14px; color: rgba(15,24,112,0.55); }

/* Borrowed-trust row inside card: Apple Pay + social proof */
.pc-trust-inline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 12px 14px;
  background: #fff; border: 1px solid #EEF1F8; border-radius: 12px;
}
.pc-trust-pay {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #0F1870;
}
.pc-trust-pay svg { width: 18px; height: 18px; }
.pc-trust-sep { width: 1px; height: 16px; background: #E2E7F5; }
.pc-trust-rating {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: rgba(15,24,112,0.7); font-weight: 500;
}
.pc-trust-rating strong { color: #0F1870; font-weight: 700; }
.pc-star { color: #F5A623; font-size: 13px; }

.pc-guarantee {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 16px; padding: 14px 16px;
  background: #ECFDF5;
  border: 1px solid #B7EBD6;
  border-radius: 14px;
  color: #064E3B;
}
.pc-guarantee svg { width: 22px; height: 22px; flex-shrink: 0; color: #10B981; margin-top: 1px; }
.pc-guarantee strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 2px; color: #064E3B; }
.pc-guarantee span { display: block; font-size: 12px; color: #047857; line-height: 1.45; }

.pricing-trust-row {
  display: flex; justify-content: space-between; margin-top: 20px;
}
.pt-item {
  flex: 1; text-align: center; padding: 12px 6px;
  font-size: 12px; color: rgba(0,0,0,0.55); font-weight: 500; line-height: 1.4;
}
.pt-icon { font-size: 18px; margin-bottom: 5px; }

.pricing-right h3 {
  font-size: 20px; font-weight: 700; color: #0F1870; margin: 0 0 20px;
}
.pricing-checklist {
  list-style: none; padding: 0; margin: 0 0 28px;
}
.pricing-checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; font-size: 15px; color: rgba(0,0,0,0.75);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.pricing-checklist li:last-child { border-bottom: none; }
.pricing-checklist li::before {
  content: "✓"; color: #10B981; font-weight: 800;
  font-size: 14px; flex-shrink: 0; margin-top: 1px;
}
.pricing-cta-wrap { margin-bottom: 20px; }
.pc-reassure {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; font-size: 12px; color: rgba(0,0,0,0.55); font-weight: 500;
}
.pc-reassure svg { width: 14px; height: 14px; color: #10B981; flex-shrink: 0; }
.pc-cta-price {
  text-align: center; font-size: 13px;
  color: rgba(0,0,0,0.45); margin-bottom: 10px;
}
.pricing-right .pay-providers { margin: 16px 0 0; }

@media (max-width: 760px) {
  .pricing-split { grid-template-columns: 1fr; gap: 28px; max-width: 440px; margin: 0 auto; }
}

/* ─── Testimonials ────────────────────────── */
.testimonials { padding: 72px 0 88px; background: #F4F6FF; }
.testimonials h2 { font-size: 32px; text-align: center; margin: 0 0 36px; font-weight: 800; color: #0F1870; }
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.quote-grid blockquote {
  background: #fff; border-radius: 20px; padding: 24px; margin: 0;
  border: 1px solid rgba(47,59,189,0.07);
  box-shadow: 0 4px 20px rgba(15,24,112,0.06);
}
.quote-grid p { font-size: 15px; line-height: 1.65; margin: 0 0 14px; color: rgba(0,0,0,0.8); }
.quote-grid .stars { color: #F59E0B; font-size: 13px; margin-bottom: 10px; letter-spacing: 1px; }
.quote-grid footer { font-size: 13px; color: rgba(0,0,0,0.45); }

/* ─── FAQ ─────────────────────────────────── */
.faq { padding: 80px 0; background: #fff; }
.faq h2 { font-size: 32px; text-align: center; margin: 0 0 40px; font-weight: 800; color: #0F1870; }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.faq-item summary {
  list-style: none; padding: 18px 4px; cursor: pointer;
  font-size: 16px; font-weight: 600; color: #0F1870;
  display: flex; justify-content: space-between; align-items: center;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; color: #00A1FF; font-weight: 400; flex-shrink: 0; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { font-size: 15px; line-height: 1.7; color: rgba(0,0,0,0.65); padding: 0 4px 18px; margin: 0; }
.faq-item a { color: #2F3BBD; }

/* ─── Bottom CTA banner ───────────────────── */
/* ─── Why Quince comparison ─────────────── */
.why-quince { padding: 96px 0; background: #f8f9ff; }
.wq-eyebrow { font-size: 13px; font-weight: 700; color: #1a56db; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.why-quince h2 { font-size: 36px; font-weight: 800; color: #0d1136; margin-bottom: 12px; line-height: 1.2; }
.why-quince .section-sub { font-size: 17px; color: #555; max-width: 600px; margin-bottom: 52px; }
.wq-compare { display: flex; align-items: stretch; gap: 0; max-width: 820px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 40px rgba(0,0,0,0.10); }
.wq-col { flex: 1; padding: 32px 28px; display: flex; flex-direction: column; gap: 0; }
.wq-col-them { background: #fff; }
.wq-col-us { background: #01011F; }
.wq-col-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 20px; }
.wq-col-them .wq-col-label { color: #999; }
.wq-col-us .wq-col-label { color: rgba(255,255,255,0.45); }
.wq-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.wq-col-us .wq-row { border-bottom-color: rgba(255,255,255,0.07); }
.wq-app { font-size: 14px; color: #444; }
.wq-col-us .wq-app { color: rgba(255,255,255,0.75); }
.wq-price { font-size: 14px; color: #888; font-weight: 500; }
.wq-check { font-size: 16px; color: #10B981; font-weight: 700; }
.wq-total-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 4px; margin-top: 6px; }
.wq-total-price { font-size: 22px; font-weight: 800; color: #c0392b; }
.wq-highlight-row .wq-price-us { color: #10B981; }
.wq-caveat { font-size: 12px; color: #aaa; margin-top: 6px; }
.wq-caveat-us { color: rgba(255,255,255,0.35); }
.wq-vs { display: flex; align-items: center; justify-content: center; padding: 0 20px; font-size: 13px; font-weight: 800; color: #bbb; background: #eef0fa; flex-shrink: 0; }
.wq-cta-wrap { text-align: center; margin-top: 44px; }
@media (max-width: 640px) {
  .wq-compare { flex-direction: column; }
  .wq-vs { padding: 14px; writing-mode: horizontal-tb; }
  .why-quince h2 { font-size: 26px; }
}

.cta-banner {
  background: linear-gradient(135deg, #0F1870 0%, #2F3BBD 100%);
  padding: 80px 0; text-align: center;
}
.cta-banner h2 { font-size: 38px; font-weight: 800; color: #fff; margin: 0 0 12px; }
.cta-banner p { font-size: 17px; color: rgba(255,255,255,0.65); margin: 0 0 32px; }

/* ─── Footer ─────────────────────────────── */
.footer { padding: 52px 0 28px; background: #01011F; color: rgba(255,255,255,0.6); }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 36px; }
.footer-cols > div { display: flex; flex-direction: column; gap: 9px; }
.footer-cols strong { font-size: 12px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.footer-cols a { font-size: 13px; color: rgba(255,255,255,0.55); text-decoration: none; transition: color .15s; }
.footer-cols a:hover { color: #56AEFF; }
.footer-cols p { font-size: 13px; color: rgba(255,255,255,0.4); margin: 4px 0 0; line-height: 1.65; }
.footer-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.footer-brand-logo { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; }
.footer-brand-logo img { width: 100%; display: block; }
.footer-brand-name { font-weight: 700; font-size: 17px; color: #fff; }
.footer-bottom {
  text-align: center; font-size: 12px; color: rgba(255,255,255,0.25);
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.07);
}

/* ─── Checkout success ────────────────────── */
.success-bg {
  min-height: 100vh;
  background: linear-gradient(160deg, #050B3A 0%, #0F1870 60%, #1E2480 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.success-card {
  background: #fff; border-radius: 28px; padding: 48px 44px;
  max-width: 560px; width: 100%; text-align: center;
  box-shadow: 0 40px 80px rgba(0,0,0,0.4);
}
.success-check {
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #059669);
  display: grid; place-items: center;
  margin: 0 auto 22px; font-size: 36px;
  box-shadow: 0 8px 24px rgba(16,185,129,0.4);
}
.success-card h1 { font-size: 28px; font-weight: 800; color: #0F1870; margin: 0 0 8px; }
.success-card .sub { font-size: 16px; color: rgba(0,0,0,0.55); margin: 0 0 32px; line-height: 1.6; }
.success-steps { text-align: left; margin: 0 0 28px; padding: 0; list-style: none; }
.success-steps li {
  display: flex; gap: 14px; padding: 14px 16px;
  background: #F4F6FF; border-radius: 14px; margin-bottom: 8px;
  font-size: 14px; line-height: 1.5; color: rgba(0,0,0,0.75); align-items: flex-start;
}
.success-steps .num {
  background: #2F3BBD; color: #fff;
  min-width: 28px; height: 28px; border-radius: 14px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.qr-wrap {
  background: #fff; border: 2px solid rgba(47,59,189,0.15);
  border-radius: 16px; padding: 18px; display: inline-block; margin-bottom: 18px;
}
.qr-wrap img { display: block; width: 160px; height: 160px; }
.sms-row { display: flex; gap: 8px; max-width: 340px; margin: 0 auto 24px; }
.sms-row input {
  flex: 1; padding: 12px 14px; border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 12px; font-size: 14px;
}
.sms-row input:focus { outline: none; border-color: #00A1FF; box-shadow: 0 0 0 3px rgba(0,161,255,0.15); }

/* ─── Legal pages ─────────────────────────── */
.legal-bg { background: #F4F6FF; min-height: 100vh; }
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 52px 24px 90px; }
.legal-wrap h1 { font-size: 34px; font-weight: 800; margin: 0 0 6px; color: #0F1870; }
.legal-meta { font-size: 13px; color: rgba(0,0,0,0.45); margin: 0 0 40px; }
.legal-wrap h2 { font-size: 18px; font-weight: 700; margin: 38px 0 10px; color: #0F1870; }
.legal-wrap p, .legal-wrap li { font-size: 15px; line-height: 1.75; color: rgba(0,0,0,0.72); }
.legal-wrap ul, .legal-wrap ol { padding-left: 22px; margin: 10px 0 16px; }
.legal-wrap a { color: #2F3BBD; }
.legal-wrap table { width:100%; border-collapse: collapse; font-size:14px; margin:16px 0 24px; }
.legal-wrap th { background:#eef0fb; padding:10px 14px; text-align:left; font-weight:700; color:#0F1870; }
.legal-wrap td { padding:10px 14px; border-bottom:1px solid rgba(0,0,0,0.06); }
.highlight-box {
  background: #EEF1FF; border-left: 3px solid #2F3BBD;
  padding: 16px 20px; border-radius: 0 12px 12px 0; margin: 20px 0;
  font-size: 14px; line-height: 1.65; color: rgba(0,0,0,0.7);
}

/* ─── Support page ────────────────────────── */
.support-bg { background: #F4F6FF; min-height: 100vh; }
.support-wrap { max-width: 700px; margin: 0 auto; padding: 64px 24px 90px; }
.support-wrap h1 { font-size: 38px; font-weight: 800; margin: 0 0 12px; color: #0F1870; text-align: center; }
.support-wrap .sub { font-size: 17px; color: rgba(0,0,0,0.55); margin: 0 0 52px; text-align: center; }
.support-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 52px; }
.support-card {
  background: #fff; border-radius: 18px; padding: 22px;
  border: 1px solid rgba(47,59,189,0.08);
  box-shadow: 0 2px 12px rgba(15,24,112,0.05);
}
.support-card h3 { font-size: 15px; font-weight: 700; margin: 12px 0 6px; color: #0F1870; }
.support-card p { font-size: 13px; color: rgba(0,0,0,0.55); margin: 0 0 12px; line-height: 1.5; }
.support-card a { font-size: 13px; font-weight: 600; color: #2F3BBD; text-decoration: none; }
details.faq-item { background: #fff; border-radius: 14px; padding: 0 18px; margin-bottom: 8px; border: 1px solid rgba(47,59,189,0.08); }
details.faq-item summary { border-bottom: none; font-size: 15px; }
details.faq-item[open] summary { border-bottom: 1px solid rgba(0,0,0,0.06); }

/* FAQ footnote (cross-link to other FAQ page) */
.faq-footnote {
  text-align: center; font-size: 14px; color: rgba(0,0,0,0.55);
  margin: 28px 0 0;
}
.faq-footnote a { color: #2F3BBD; font-weight: 600; text-decoration: none; }
.faq-footnote a:hover { text-decoration: underline; }

/* Step-by-step lists inside FAQ answers */
.faq-item ol, .faq-item ul { margin: 6px 0 10px; padding-left: 22px; }
.faq-item ol li, .faq-item ul li { font-size: 14px; line-height: 1.55; color: rgba(0,0,0,0.72); margin: 3px 0; }
.faq-item em { font-style: normal; font-weight: 600; color: #0F1870; }
.faq-item p + p { margin-top: 8px; }

/* ─── Minimal topbar variant ───────────────── */
.topbar-min .topnav { gap: 18px; }

/* ─── Checkout page (neutral B/W, no header/footer) ─────── */
.checkout-body { background: #fff; color: #111; margin: 0; }
.checkout-shell { max-width: 760px; margin: 0 auto; padding: 28px 28px 80px; }

.ck-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 56px; gap: 16px; flex-wrap: wrap;
}
.ck-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: #111;
}
.ck-brand img { width: 28px; height: 28px; display: block; border-radius: 8px; }
.ck-brand-name { font-weight: 700; font-size: 18px; color: #111; }
.ck-brand-sep  { color: #c9c9c9; margin: 0 2px; font-weight: 300; }
.ck-brand-page { font-weight: 500; font-size: 18px; color: #555; }
.ck-signin     { font-size: 14px; color: #555; }
.ck-signin a   { color: #111; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.ck-main { max-width: 600px; margin: 0 auto; }

.ck-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: #555; text-decoration: none;
  background: #f3f3f3; padding: 8px 14px; border-radius: 22px;
  margin-bottom: 26px;
}
.ck-back:hover { background: #ececec; color: #111; }
.ck-back-ic { font-size: 14px; }

.ck-title {
  font-size: 30px; font-weight: 800; color: #111;
  margin: 0 0 14px; letter-spacing: -0.4px; line-height: 1.2;
}
.ck-title span { font-weight: 500; color: #555; font-size: 20px; }

.ck-guarantee { font-size: 15px; color: #555; margin: 0 0 36px; }
.ck-guarantee a { color: #111; text-decoration: underline; text-underline-offset: 3px; }

/* Required-field marker (checkout) */
.req { color: #B91C1C; font-style: normal; font-weight: 700; margin: 0 2px 0 0; }

/* Email field */
.ck-email { margin: 0 0 28px; display: flex; flex-direction: column; gap: 6px; }
.ck-email label {
  font-size: 13px; font-weight: 600; color: #111;
  letter-spacing: .2px;
}
.ck-email label .req { margin: 0 0 0 2px; }
.ck-email input {
  width: 100%; font: inherit; font-size: 15px;
  padding: 14px 16px;
  background: #f3f3f3;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #111;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ck-email input::placeholder { color: #999; }
.ck-email input:focus {
  outline: none;
  background: #fff;
  border-color: #00A1FF;
  box-shadow: 0 0 0 4px rgba(0,161,255,0.18);
}
.ck-email-help { font-size: 12px; color: #777; margin: 2px 0 0; line-height: 1.5; }
.ck-email-error { font-size: 12px; color: #B91C1C; margin: 2px 0 0; line-height: 1.5; }
.ck-email-error:empty { display: none; }
.ck-email.has-error input { border-color: #B91C1C; background: #fff; box-shadow: 0 0 0 3px rgba(185,28,28,0.10); }

.ck-apple-btn[disabled], .ck-card-btn[disabled] {
  opacity: 0.45; cursor: not-allowed; transform: none;
}
.ck-apple-btn[disabled]:hover, .ck-card-btn[disabled]:hover {
  opacity: 0.45; transform: none;
}

.ck-pm-label {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600; color: #111; margin: 0 0 14px;
}

/* "Ready to pay" badge - appears when email + consent are both filled */
.ck-ready {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: #047857;
  background: rgba(16,185,129,0.14);
  border: 1px solid rgba(16,185,129,0.30);
  padding: 3px 10px 3px 8px; border-radius: 999px;
  opacity: 0; transform: translateY(-4px) scale(0.96);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.ck-ready.is-on {
  opacity: 1; transform: none;
}
.ck-ready svg { width: 13px; height: 13px; }

/* Pulse the Pay button right when it activates — 2 cycles + scale */
.ck-apple-btn.is-just-enabled,
.ck-card-btn.is-just-enabled {
  animation: ckPayPulse 1.1s ease-out 2;
  position: relative;
  z-index: 21;
}
@keyframes ckPayPulse {
  0% {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 0 rgba(0, 161, 255, 0.65);
    transform: scale(1);
  }
  40% {
    box-shadow: 0 10px 28px rgba(0,0,0,0.22), 0 0 0 14px rgba(0, 161, 255, 0.18);
    transform: scale(1.025);
  }
  100% {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 26px rgba(0, 161, 255, 0);
    transform: scale(1);
  }
}

.ck-pm-list { display: flex; flex-direction: column; gap: 14px; }
.ck-pm {
  background: #f3f3f3;
  border: 1px solid transparent;
  border-radius: 16px;
  overflow: hidden;
  transition: background .15s, border-color .15s;
}
.ck-pm.is-open { background: #f3f3f3; }
.ck-pm-head {
  display: flex; align-items: center; gap: 14px;
  width: 100%; background: none; border: 0; cursor: pointer;
  padding: 18px 22px; font: inherit; text-align: left;
}
.ck-pm-ic {
  width: 36px; height: 26px; border: 1px solid #d6d6d6; border-radius: 6px;
  background: #fff; color: #111;
  display: grid; place-items: center; flex-shrink: 0;
}
.ck-pm-ic svg { width: 18px; height: 18px; }
.ck-pm-name { flex: 1; font-size: 16px; font-weight: 600; color: #111; }
.ck-pm-chev { color: #777; display: inline-flex; transition: transform .15s; }
.ck-pm-chev svg { width: 12px; height: 8px; }
.ck-pm-head[aria-expanded="true"] .ck-pm-chev { transform: rotate(180deg); }

.ck-pm-body {
  padding: 0 22px 22px;
  font-size: 14px; line-height: 1.6; color: #555;
}
.ck-pm-body p { margin: 0 0 14px; }
.ck-pm-body p:last-of-type { margin-bottom: 22px; }

.ck-apple-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; max-width: 320px; margin: 0 auto;
  background: #000; color: #fff; border: 0; cursor: pointer;
  border-radius: 36px; padding: 16px 22px;
  font-weight: 600; font-size: 16px;
  transition: opacity .12s, transform .12s;
}
.ck-apple-btn:hover { opacity: 0.92; transform: translateY(-1px); }
.ck-apple-btn svg { width: 20px; height: 20px; }

.ck-card-btn {
  display: block; width: 100%; max-width: 320px; margin: 0 auto;
  background: #000; color: #fff; border: 0; cursor: pointer;
  border-radius: 36px; padding: 16px 22px;
  font-weight: 600; font-size: 16px;
  transition: opacity .12s, transform .12s;
}
.ck-card-btn:hover { opacity: 0.92; transform: translateY(-1px); }

.ck-fine, .ck-help {
  font-size: 13px; color: #777; margin: 22px 0 0; line-height: 1.6;
}
.ck-fine a, .ck-help a { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.ck-help { margin-top: 12px; }

/* Consent checkbox */
.ck-consent { margin: 0 0 32px; }
.ck-consent-row {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px; color: #555; line-height: 1.55;
  padding: 14px 16px; border: 1px solid #e5e5e5; border-radius: 14px;
  background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ck-consent-row:hover { border-color: #c9c9c9; }
.ck-consent-row input[type="checkbox"] {
  flex-shrink: 0; width: 18px; height: 18px;
  margin: 1px 0 0; cursor: pointer;
  accent-color: #10B981;
}
/* When consent is given — soft green tile (positive reinforcement) */
.ck-consent-row:has(input[type="checkbox"]:checked) {
  border-color: #B7EBD6;
  background: #F2FBF7;
}
.ck-consent-row a { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.ck-consent-row strong { color: #111; font-weight: 600; }
.ck-consent.has-error .ck-consent-row {
  border-color: #B91C1C; background: #fff7f7;
}
.ck-consent-error { font-size: 12px; color: #B91C1C; margin: 6px 0 0 16px; line-height: 1.5; }
.ck-consent-error:empty { display: none; }

/* ─── Step indicator (Email · Agree · Pay) ──────── */
.ck-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; list-style: none; padding: 0;
  margin: 0 0 32px;
}
.ck-step {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #999;
  transition: color .2s;
}
.ck-step-num {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: #f0f0f0; color: #999;
  font-size: 12px; font-weight: 700;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.ck-step-line {
  flex: 0 0 28px; height: 2px; background: #e8e8e8;
  border-radius: 2px;
  transition: background .25s;
}
.ck-step.is-current { color: #00A1FF; }
.ck-step.is-current .ck-step-num {
  background: #fff; color: #00A1FF;
  border-color: #00A1FF;
  box-shadow: 0 0 0 3px rgba(0,161,255,0.18);
  transform: scale(1.05);
}
.ck-step.is-done { color: #047857; }
.ck-step.is-done .ck-step-num {
  background: #10B981; color: #fff;
  border-color: #10B981;
}
.ck-step.is-done .ck-step-num::after {
  content: "✓"; font-size: 13px; font-weight: 800; line-height: 1;
}
.ck-step.is-done .ck-step-num { font-size: 0; }
/* Color the connector lines based on adjacent step state */
.ck-step.is-done + .ck-step-line { background: #10B981; }

@media (max-width: 540px) {
  .ck-steps { gap: 6px; margin-bottom: 24px; }
  .ck-step-line { flex: 0 0 18px; }
  .ck-step { font-size: 12px; }
  .ck-step-num { width: 22px; height: 22px; font-size: 11px; }
}

/* ─── Secure-checkout anchor near Pay buttons ──── */
.ck-secure {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 18px 0 0;
  font-size: 13px; font-weight: 500; color: #047857;
}
.ck-secure svg {
  width: 14px; height: 14px; color: #10B981; flex-shrink: 0;
}
@media (max-width: 540px) {
  .ck-secure { font-size: 12px; }
}

@media (max-width: 540px) {
  .checkout-shell { padding: 18px 16px 32px; }
  .ck-bar { padding-bottom: 28px; gap: 8px; }
  .ck-brand img { width: 24px; height: 24px; }
  .ck-brand-name, .ck-brand-page { font-size: 16px; }
  .ck-signin { font-size: 13px; }
  .ck-back { margin-bottom: 20px; }
  .ck-title { font-size: 22px; }
  .ck-title span { font-size: 15px; }
  .ck-guarantee { font-size: 14px; margin-bottom: 28px; }
  .ck-email { margin-bottom: 24px; }
  .ck-consent { margin-bottom: 28px; }
  .ck-consent-row { padding: 12px 14px; font-size: 13px; }
  .ck-pm-head { padding: 16px 18px; }
  .ck-pm-body { padding: 0 18px 18px; }
  .ck-pm-body p:last-of-type { margin-bottom: 18px; }
  .ck-help { font-size: 12px; }

  /* Reserve space at the bottom for the fixed Pay button */
  .checkout-shell { padding-bottom: 110px; }

  /* Fixed Pay button on mobile - always visible at bottom of viewport */
  .ck-apple-btn, .ck-card-btn {
    position: fixed;
    left: 16px; right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-width: none; width: auto; margin: 0;
    z-index: 20;
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  }
  .ck-apple-btn[disabled], .ck-card-btn[disabled] {
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
  }

  /* Soft white fade behind the fixed button so content scrolls under cleanly */
  body.checkout-body::after {
    content: ''; position: fixed; left: 0; right: 0;
    bottom: 0; height: 96px;
    background: linear-gradient(to top, #fff 35%, rgba(255,255,255,0));
    pointer-events: none; z-index: 15;
  }
}

/* ─── Success page (neutral B/W, matches checkout) ─────── */
.ok-hero { text-align: center; margin: 0 0 36px; }
.ok-check {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px;
  background: #10B981; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(16,185,129,0.30);
}
.ok-check svg { width: 30px; height: 30px; }
.ok-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: #047857; text-transform: uppercase; margin-bottom: 10px;
}
.ok-hero h1 {
  font-size: 30px; font-weight: 800; color: #111;
  margin: 0 0 12px; letter-spacing: -0.4px; line-height: 1.2;
}
.ok-sub {
  font-size: 15px; color: #555; line-height: 1.55;
  margin: 0 auto; max-width: 520px;
}

.ok-section { margin: 0 0 32px; }
.ok-section h2 {
  font-size: 16px; font-weight: 700; color: #111;
  margin: 0 0 14px;
}

.ok-list { margin: 0; padding: 18px 20px; background: #f3f3f3; border-radius: 16px; display: grid; gap: 0; }
.ok-row {
  display: grid; grid-template-columns: 160px 1fr; align-items: center;
  padding: 12px 0; border-bottom: 1px solid #e5e5e5;
  font-size: 14px;
}
.ok-row:last-child { border-bottom: 0; }
.ok-row dt { color: #777; margin: 0; font-weight: 500; }
.ok-row dd { color: #111; margin: 0; font-weight: 600; word-break: break-all; }
.ok-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.ok-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: #111; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase;
}
.ok-note {
  font-size: 13px; color: #777; line-height: 1.6;
  margin: 14px 0 0;
}
.ok-note a { color: #111; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Install section: brighter, action-oriented (primary block after payment) */
.ok-section-install h2 {
  font-size: 18px; color: #0F1870;
  margin-bottom: 16px;
}

/* Install-flow cards (dual mobile/desktop) */
.ok-flow { display: flex; flex-direction: column; gap: 14px; }
.ok-flow[hidden] { display: none; }
.ok-step-card {
  background: #F1F8FF;
  border: 1px solid #D6EBFF;
  border-left: 3px solid #00A1FF;
  border-radius: 16px;
  padding: 22px 24px 22px 28px;
  position: relative;
}
.ok-step-card-num {
  position: absolute; top: 18px; right: 22px;
  width: 32px; height: 32px; border-radius: 50%;
  background: #00A1FF; color: #fff;
  font-weight: 800; font-size: 15px;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0, 161, 255, 0.35);
}
.ok-step-card h3 {
  font-size: 16px; font-weight: 700; color: #0F1870;
  margin: 0 0 6px; padding-right: 44px;
  line-height: 1.35;
}
.ok-step-card p {
  font-size: 14px; color: #3F4A7A; line-height: 1.55;
  margin: 0 0 0;
}
.ok-step-card p + p { margin-top: 8px; }
.ok-step-card em { font-style: normal; font-weight: 600; color: #0F1870; }

.ok-btn-black {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #000; color: #fff; border: 0; cursor: pointer;
  border-radius: 36px; padding: 14px 26px;
  font-weight: 600; font-size: 15px;
  text-decoration: none;
  margin-top: 16px;
  transition: opacity .12s, transform .12s;
}
.ok-btn-black:hover { opacity: 0.92; transform: translateY(-1px); color: #fff; }

.ok-btn-blue {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #00A1FF; color: #fff; border: 0; cursor: pointer;
  border-radius: 36px; padding: 14px 26px;
  font-weight: 700; font-size: 15px;
  text-decoration: none;
  margin-top: 16px;
  box-shadow: 0 6px 22px rgba(0, 161, 255, 0.40);
  transition: transform .12s ease, box-shadow .15s ease;
}
.ok-btn-blue:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 161, 255, 0.55);
  color: #fff;
  background: #0E9DEC;
}

/* QR step variant */
.ok-step-qr { padding: 24px; }
.ok-qr-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px; align-items: center;
}
.ok-qr-frame {
  width: 220px; height: 220px;
  background: #fff; border-radius: 14px; padding: 10px;
  display: grid; place-items: center;
  border: 1px solid #e5e5e5;
}
.ok-qr-frame img, .ok-qr-frame canvas { display: block; max-width: 100%; height: auto; }
.ok-qr-text h3 { margin-bottom: 8px; padding-right: 40px; }
.ok-qr-fallback {
  font-size: 13px; color: #777; margin-top: 14px; line-height: 1.6;
}
.ok-mono-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: #111;
  text-decoration: underline; text-underline-offset: 3px;
  word-break: break-all;
}

.ok-flow-toggle {
  text-align: center; font-size: 13px; color: #777;
  margin: 14px 0 0; line-height: 1.6;
}
.ok-flow-toggle a {
  color: #111; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Error state (checkout-error.html) */
.err-circle {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px;
  background: #DC2626; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(220,38,38,0.28);
}
.err-circle svg { width: 30px; height: 30px; }
.err-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: #991B1B; text-transform: uppercase; margin-bottom: 10px;
}
.err-reasons {
  list-style: none; padding: 0; margin: 0;
  background: #f3f3f3; border-radius: 16px; padding: 6px 22px;
}
.err-reasons li {
  font-size: 14px; color: #555; line-height: 1.55;
  padding: 14px 0; border-bottom: 1px solid #e5e5e5;
}
.err-reasons li:last-child { border-bottom: 0; }
.err-reasons strong { color: #111; font-weight: 600; }

.ok-link-btn {
  display: inline-block; font-size: 14px; font-weight: 600;
  color: #111; text-decoration: underline; text-underline-offset: 3px;
  margin-top: 12px;
}
.ok-link-btn:hover { color: #000; }

/* ─── Auth widget (signed-in state, both contexts) ─── */
[data-auth-slot] { display: inline-flex; align-items: center; }
.qc-auth { position: relative; display: inline-flex; align-items: center; }
.qc-auth-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 600;
  background: none; border: 1px solid currentColor; cursor: pointer;
  padding: 5px 10px 5px 5px; border-radius: 999px;
  color: inherit;
  transition: background .12s, border-color .12s;
}
.qc-auth-trigger:hover { background: rgba(0,0,0,0.06); }
.topbar .qc-auth-trigger {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.18);
}
.topbar .qc-auth-trigger:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.32); }
.ck-bar .qc-auth-trigger {
  color: #111; border-color: rgba(0,0,0,0.18);
}
.ck-bar .qc-auth-trigger:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.35); }

.qc-auth-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: #2F3BBD; color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.qc-auth-avatar-lg { width: 36px; height: 36px; font-size: 15px; }
.qc-auth-email {
  font-size: 13px; font-weight: 500;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qc-auth-chev {
  display: inline-flex; opacity: 0.6; transition: transform .15s;
}
.qc-auth-chev svg { width: 10px; height: 7px; }
.qc-auth-trigger[aria-expanded="true"] .qc-auth-chev { transform: rotate(180deg); }

.qc-auth-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 260px; max-width: 320px;
  background: #fff;
  border-radius: 16px; padding: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 20px 48px rgba(15,24,112,0.18);
}
.qc-auth-menu[hidden] { display: none; }
/* Hard-isolate menu colors from any parent (e.g. dark .topnav cascading white) */
.qc-auth .qc-auth-menu { color: #111; }
.qc-auth .qc-auth-menu * { color: inherit; }
.qc-auth-menu-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 14px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.qc-auth .qc-auth-menu-head strong { display: block; font-size: 12px; color: #111; font-weight: 700; }
.qc-auth .qc-auth-menu-head span:not(.qc-auth-avatar) { display: block; font-size: 12px; color: #777; word-break: break-all; }

.qc-auth-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  font: inherit; font-size: 14px;
  background: none; border: 0; cursor: pointer;
  padding: 9px 12px; border-radius: 10px;
  text-decoration: none;
  transition: background .1s;
}
.qc-auth .qc-auth-menu-item        { color: #111; }
.qc-auth .qc-auth-menu-item:hover  { background: #f3f3f3; color: #111; }
.qc-auth .qc-auth-menu-item svg    { width: 16px; height: 16px; color: #555; flex-shrink: 0; }

.qc-auth .qc-auth-signout          { color: #B91C1C; }
.qc-auth .qc-auth-signout svg      { color: #B91C1C; }
.qc-auth .qc-auth-signout:hover    { background: rgba(185,28,28,0.06); color: #B91C1C; }

/* Avatar text stays white regardless of parent cascade */
.qc-auth-avatar { color: #fff !important; }

@media (max-width: 540px) {
  .qc-auth-email { max-width: 110px; }
  .qc-auth-menu { min-width: 240px; right: -8px; }
}

/* ─── Loading overlay (checkout) ─────────────────── */
.ck-loading {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  animation: ckFadeIn .15s ease-out;
}
.ck-loading[hidden] { display: none; }
.ck-loading-card {
  background: #fff; border-radius: 22px;
  padding: 28px 32px;
  display: flex; align-items: center; gap: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  max-width: 380px;
}
.ck-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.10);
  border-top-color: #111;
  animation: ckSpin .9s linear infinite;
  flex-shrink: 0;
}
.ck-loading-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.4; }
.ck-loading-text strong { color: #111; font-size: 15px; font-weight: 700; }
.ck-loading-text span { color: #777; font-size: 13px; }

@keyframes ckSpin { to { transform: rotate(360deg); } }
@keyframes ckFadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 480px) {
  .ck-loading-card { padding: 22px 24px; gap: 14px; margin: 0 16px; }
  .ck-spinner { width: 30px; height: 30px; }
}

/* ─── Skeleton shimmer (success page receipt) ───── */
.ok-list.is-loading .ok-badge,
.ok-list.is-loading .ok-row dd {
  color: transparent !important;
  background: linear-gradient(
    90deg,
    #e5e7eb 0%,
    #f3f4f6 50%,
    #e5e7eb 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: okSkeleton 1.2s ease-in-out infinite;
  display: inline-block; min-width: 140px;
  user-select: none;
}
.ok-list.is-loading .ok-mono { letter-spacing: 0; }
.ok-list.is-loading .ok-badge {
  background: linear-gradient(90deg, #d1d5db 0%, #e5e7eb 50%, #d1d5db 100%);
  background-size: 200% 100%; padding: 3px 28px;
  box-shadow: none;
}
.ok-list.is-loaded .ok-row dd {
  animation: okFadeIn .35s ease-out;
}
@keyframes okSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes okFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Dev preview bar (visible only with ?demo=1) ─── */
.demo-bar {
  background: #FACC15; color: #111;
  border-bottom: 2px solid #CA8A04;
  font-size: 13px;
}
.demo-bar[hidden] { display: none; }
.demo-bar-inner {
  max-width: 1080px; margin: 0 auto;
  padding: 10px 24px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.demo-bar-label {
  display: flex; flex-direction: column; gap: 0; line-height: 1.25;
  min-width: 140px;
}
.demo-bar-label strong {
  font-size: 10px; font-weight: 800; letter-spacing: .8px;
  color: #713F12; text-transform: uppercase;
}
.demo-bar-label span { font-size: 12px; color: #713F12; }
.demo-bar-chips {
  display: flex; gap: 6px; flex-wrap: wrap; flex: 1;
}
.demo-chip {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.65); color: #713F12;
  border: 1px solid rgba(113,63,18,0.20); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.demo-chip:hover { background: #fff; border-color: rgba(113,63,18,0.35); }
.demo-chip.is-active {
  background: #111; color: #fff;
  border-color: #111;
}
.demo-bar-exit {
  font-size: 12px; color: #713F12; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.demo-bar-exit:hover { color: #111; }

@media (max-width: 720px) {
  .demo-bar-inner { padding: 8px 16px; gap: 10px; }
  .demo-bar-label { min-width: 100%; }
  .demo-bar-exit { width: 100%; text-align: right; }
}

@media (max-width: 600px) {
  .ok-qr-layout { grid-template-columns: 1fr; gap: 18px; justify-items: center; text-align: center; }
  .ok-qr-text h3 { padding-right: 0; }
  .ok-qr-frame { width: 200px; height: 200px; }
  .ok-step-card { padding: 18px 18px 20px; }
  .ok-step-card-num { top: 16px; right: 18px; }
  .ok-step-card h3 { padding-right: 36px; }
}

@media (max-width: 540px) {
  .ok-hero h1 { font-size: 24px; }
  .ok-sub { font-size: 14px; }
  .ok-row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .ok-row dt { font-size: 12px; }
  .ok-list { padding: 14px 16px; }
}

/* ─── Account / Sign in page ──────────────── */
.account-body { background: #0B0B1F; min-height: 100vh; display: flex; flex-direction: column; }
.account-body .topbar { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.08); position: relative; }
.account-body .topbar::before { display: none; }
.account-body .footer { background: transparent; border-top: 1px solid rgba(255,255,255,0.08); padding: 18px 0; margin-top: auto; }
.footer-cols-min {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center;
  font-size: 13px; color: rgba(255,255,255,0.55);
}
.footer-cols-min a { color: rgba(255,255,255,0.75); text-decoration: none; }
.footer-cols-min a:hover { color: #fff; }

.account-page { flex: 1; display: grid; place-items: center; padding: 56px 0; }
.account-page[hidden], .dash-page[hidden] { display: none; }
.account-page .container { max-width: 520px; }
.account-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px; padding: 40px 32px;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.account-card h1 { font-size: 32px; font-weight: 800; color: #fff; margin: 0 0 8px; letter-spacing: -0.3px; }
.account-sub { font-size: 15px; color: rgba(255,255,255,0.6); margin: 0 0 28px; line-height: 1.55; }

.signin-form { display: flex; flex-direction: column; gap: 16px; }
.code-row {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap;
}
.code-row input {
  width: 78px; max-width: 100%;
  padding: 14px 0; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px; font-weight: 700; letter-spacing: 2px;
  color: #fff; background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.code-row input:focus {
  outline: none;
  border-color: #00A1FF;
  background: rgba(0,161,255,0.10);
  box-shadow: 0 0 0 3px rgba(0,161,255,0.20);
}
.code-row input::placeholder { color: rgba(255,255,255,0.25); }
.code-sep { color: rgba(255,255,255,0.30); font-weight: 700; }

.code-error {
  min-height: 0; font-size: 13px; color: #FCA5A5; margin: -4px 0 0; text-align: center;
}
.code-error:empty { display: none; }

#signinBtn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.signin-lost {
  display: inline-block; text-align: center; font-size: 14px; font-weight: 600;
  color: #56AEFF; text-decoration: none; margin-top: 4px;
}
.signin-lost:hover { text-decoration: underline; }

.account-help {
  margin-top: 22px; font-size: 13px; color: rgba(255,255,255,0.55);
}
.account-help a { color: #56AEFF; font-weight: 600; text-decoration: none; }
.account-help a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .code-row input { width: 60px; font-size: 16px; padding: 12px 0; }
  .code-row { gap: 6px; }
  .account-card { padding: 28px 22px; }
  .account-card h1 { font-size: 26px; }
}

/* ─── Account dashboard (signed-in state) ────────────────── */
.account-body.is-signed-in { background: #F4F6FF; color: #111; }
.account-body.is-signed-in .topbar { background: rgba(1, 1, 31, 0.92); }
.dash-page { padding: 48px 0 80px; min-height: calc(100vh - 64px); }
.dash-page .container { max-width: 920px; }

.dash-hero {
  display: flex; align-items: center; gap: 18px;
  margin: 0 0 32px;
}
.dash-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: #2F3BBD; color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 8px 22px rgba(47,59,189,0.30);
}
.dash-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .8px;
  color: #2F3BBD; text-transform: uppercase; margin-bottom: 2px;
}
.dash-greeting h1 {
  font-size: 26px; font-weight: 800; color: #0F1870;
  margin: 0 0 4px; letter-spacing: -0.3px;
}
.dash-greeting p { font-size: 14px; color: #555; margin: 0; word-break: break-all; }

.dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.dash-card {
  background: #fff; border-radius: 18px; padding: 22px 24px;
  border: 1px solid rgba(47,59,189,0.10);
  box-shadow: 0 4px 16px rgba(15,24,112,0.04);
}
.dash-card-wide { grid-column: 1 / -1; }
.dash-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.dash-card-head h2 { font-size: 15px; font-weight: 700; color: #0F1870; margin: 0; }
.dash-card-sub { font-size: 14px; color: #555; margin: 0 0 14px; line-height: 1.55; }
.dash-status-badge {
  background: rgba(16,185,129,0.16); color: #047857;
}
.dash-list { margin: 0; padding: 0; display: grid; gap: 0; }
.dash-row {
  display: grid; grid-template-columns: 150px 1fr; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #eef0fb;
  font-size: 14px;
}
.dash-row:last-child { border-bottom: 0; }
.dash-row dt { color: #777; margin: 0; font-weight: 500; }
.dash-row dd { color: #0F1870; margin: 0; font-weight: 600; word-break: break-all; }

.dash-actions {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid #eef0fb;
}
.dash-link-btn {
  font-size: 13px; font-weight: 600;
  color: #2F3BBD; text-decoration: none;
}
.dash-link-btn:hover { text-decoration: underline; }
.dash-link-danger { color: #B91C1C; }
.dash-link-danger:hover { color: #991B1B; }

@media (max-width: 720px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-greeting h1 { font-size: 22px; }
  .dash-row { grid-template-columns: 130px 1fr; padding: 8px 0; }
}

/* ─── 30-day guarantee (pricing page) ─────── */
.guarantee-section { background: #F4F6FF; padding: 24px 0 96px; }
.guarantee-card {
  max-width: 880px; margin: 0 auto;
  display: grid; grid-template-columns: 96px 1fr; gap: 28px;
  align-items: flex-start;
  background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%);
  border: 1px solid rgba(16,185,129,0.30);
  border-radius: 24px; padding: 36px 40px;
  box-shadow: 0 10px 32px rgba(16,185,129,0.10);
}
.guarantee-shield {
  width: 96px; height: 96px; border-radius: 24px;
  background: #10B981; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 24px rgba(16,185,129,0.35);
}
.guarantee-shield svg { width: 48px; height: 48px; }
.guarantee-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: #047857; text-transform: uppercase; margin-bottom: 6px;
}
.guarantee-body h2 {
  font-size: 26px; font-weight: 800; color: #064E3B;
  margin: 0 0 10px; letter-spacing: -0.3px;
}
.guarantee-body p { font-size: 15px; line-height: 1.6; color: rgba(6,78,59,0.8); margin: 0 0 18px; }
.guarantee-points { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.guarantee-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #064E3B; line-height: 1.5; }
.guarantee-points li svg { width: 18px; height: 18px; color: #10B981; flex-shrink: 0; margin-top: 1px; }
.guarantee-link {
  display: inline-block; font-size: 14px; font-weight: 600;
  color: #047857; text-decoration: none;
}
.guarantee-link:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .guarantee-card { grid-template-columns: 1fr; padding: 28px 24px; gap: 20px; text-align: center; }
  .guarantee-shield { margin: 0 auto; }
  .guarantee-points li { text-align: left; }
}

/* ─── Premium perks (pricing page) ────────── */
.premium-perks { background: #F4F6FF; padding: 80px 0 96px; }
.premium-perks h2 {
  font-size: 32px; font-weight: 800; color: #0F1870;
  text-align: center; margin: 0 0 10px; letter-spacing: -0.5px;
}
.premium-perks .section-sub {
  text-align: center; color: rgba(0,0,0,0.55);
  font-size: 16px; margin: 0 0 44px;
}
.perks-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1080px; margin: 0 auto;
}
.perk-card {
  background: #fff; border: 1px solid rgba(47,59,189,0.08);
  border-radius: 18px; padding: 26px 24px;
  box-shadow: 0 2px 12px rgba(15,24,112,0.04);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.perk-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,24,112,0.10);
  border-color: rgba(47,59,189,0.18);
}
.perk-card .perk-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: #EEF1FF; color: #2F3BBD;
  display: grid; place-items: center; margin-bottom: 14px;
}
.perk-card .perk-icon svg { width: 22px; height: 22px; }
.perk-card h3 { font-size: 16px; font-weight: 700; color: #0F1870; margin: 0 0 6px; }
.perk-card p { font-size: 14px; line-height: 1.55; color: rgba(0,0,0,0.62); margin: 0; }

@media (max-width: 880px) {
  .perks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .perks-grid { grid-template-columns: 1fr; max-width: 420px; }
  .premium-perks { padding: 56px 0 72px; }
  .premium-perks h2 { font-size: 26px; }
}

/* ─── Contact / Support page ──────────────── */
.contact-page { background: #F4F6FF; padding: 72px 0 96px; min-height: calc(100vh - 64px); }
.support-faq { max-width: 760px; margin: 0 auto 64px; }
.support-faq h2 { font-size: 26px; font-weight: 800; color: #0F1870; margin: 0 0 20px; text-align: center; }
.support-faq .faq-list { display: flex; flex-direction: column; gap: 8px; }

.contact-form-section { max-width: 940px; margin: 0 auto; }
.contact-form-section h2 {
  font-size: 26px; font-weight: 800; color: #0F1870;
  margin: 0 0 8px; text-align: center;
}
.contact-form-intro { text-align: center; color: rgba(0,0,0,0.55); margin: 0 0 28px; font-size: 15px; }

.contact-head { text-align: center; margin-bottom: 48px; }
.contact-head .eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
  color: #00A1FF; text-transform: uppercase; margin-bottom: 10px;
}
.contact-head h1 { font-size: 40px; font-weight: 800; color: #0F1870; margin: 0 0 10px; }
.contact-head .sub { font-size: 16px; color: rgba(0,0,0,0.55); margin: 0; }

.contact-split {
  display: grid; grid-template-columns: 340px 1fr; gap: 32px;
  max-width: 940px; margin: 0 auto;
}

.contact-topics { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.contact-topic {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border: 1px solid rgba(47,59,189,0.10);
  border-radius: 14px; padding: 16px 18px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .12s, box-shadow .12s;
}
.contact-topic:hover {
  border-color: rgba(47,59,189,0.35);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15,24,112,0.08);
}
.contact-topic .ct-ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: #EEF1FF; color: #2F3BBD;
  display: grid; place-items: center; flex-shrink: 0;
}
.contact-topic .ct-ic svg { width: 18px; height: 18px; }
.contact-topic strong { display: block; font-size: 14px; color: #0F1870; margin-bottom: 2px; }
.contact-topic span { display: block; font-size: 13px; color: rgba(0,0,0,0.55); line-height: 1.45; }

.contact-note {
  background: #fff; border: 1px solid rgba(47,59,189,0.10);
  border-radius: 14px; padding: 16px 18px;
  font-size: 13px; color: rgba(0,0,0,0.65); line-height: 1.6;
}
.contact-note strong { color: #0F1870; display: block; margin-bottom: 6px; font-size: 13px; }
.contact-note a { color: #2F3BBD; font-weight: 600; text-decoration: none; }
.contact-note a:hover { text-decoration: underline; }

.contact-form-wrap {
  background: #fff; border: 1px solid rgba(47,59,189,0.10);
  border-radius: 18px; padding: 28px;
  box-shadow: 0 8px 28px rgba(15,24,112,0.06);
}
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.cf-label { display: flex; flex-direction: column; gap: 6px; }
.cf-label > span {
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: #0F1870; text-transform: uppercase;
}
.cf-label input, .cf-label textarea, .cf-label select {
  width: 100%; font: inherit; font-size: 15px;
  padding: 12px 14px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  background: #fff; color: #1a1a1a;
  transition: border-color .15s, box-shadow .15s;
}
.cf-label textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.cf-label select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%232F3BBD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.cf-label input:focus, .cf-label textarea:focus, .cf-label select:focus {
  outline: none; border-color: #00A1FF;
  box-shadow: 0 0 0 3px rgba(0,161,255,0.15);
}
.cf-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(0,0,0,0.65); line-height: 1.5; }
.cf-check input { margin-top: 3px; flex-shrink: 0; accent-color: #2F3BBD; }
.cf-check a { color: #2F3BBD; font-weight: 600; }
.cf-check-wrap { display: flex; flex-direction: column; gap: 4px; }
.cf-fineprint { font-size: 12px; color: rgba(0,0,0,0.45); margin: 4px 0 0; text-align: center; }

/* Required-asterisk + inline validation */
.cf-label > span em, .cf-check span em { color: #E11D48; font-style: normal; margin-left: 2px; font-weight: 700; }
.cf-label > span.cf-error,
.cf-check-wrap > span.cf-error {
  display: block; min-height: 0;
  font-size: 12px; color: #E11D48; line-height: 1.4;
  letter-spacing: 0; text-transform: none; font-weight: 500;
  margin-top: 4px;
}
.cf-label > span.cf-error:empty,
.cf-check-wrap > span.cf-error:empty { display: none; }
.cf-label.has-error > input,
.cf-label.has-error > select,
.cf-label.has-error > textarea {
  border-color: #E11D48;
  box-shadow: 0 0 0 3px rgba(225,29,72,0.12);
}
.cf-label.has-error > input:focus,
.cf-label.has-error > select:focus,
.cf-label.has-error > textarea:focus {
  border-color: #E11D48;
  box-shadow: 0 0 0 3px rgba(225,29,72,0.20);
}
.cf-check-wrap.has-error .cf-check input { outline: 2px solid #E11D48; outline-offset: 2px; }
.cf-check-wrap.has-error .cf-check > span { color: #E11D48; }

/* Honeypot: visually hidden but still in the DOM so bots fill it */
.cf-hp {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  left: -10000px; top: auto;
}

.btn-block { display: block; width: 100%; }

@media (max-width: 820px) {
  .contact-split { grid-template-columns: 1fr; }
  .contact-head h1 { font-size: 32px; }
  .contact-page { padding: 48px 0 72px; }
  .contact-form-wrap { padding: 22px; }
}

/* ─── Responsive ──────────────────────────── */
@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .plan-card-featured { transform: none; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .phone-wrap.side { display: none; }
  .phones-strip { gap: 12px; }
  .phone-wrap { width: 200px; }
  .phone-wrap.center { width: 240px; }
}
@media (max-width: 680px) {
  .hero h1 { font-size: 38px; letter-spacing: -1px; }
  .hero-sub { font-size: 16px; }
  .features h2, .pricing h2, .cta-banner h2 { font-size: 28px; }
  .topnav a:not(.btn-primary):not(.btn-sm) { display: none; }
  .proof-item { min-width: 130px; padding: 0 14px; }
  .proof-item strong { font-size: 24px; }
  .footer-cols { grid-template-columns: 1fr; }
  .phones-strip { gap: 8px; }
  .phone-wrap { width: 160px; }
  .phone-wrap.center { width: 190px; }
  .success-card { padding: 32px 22px; }
}