:root {
  --navy: #12141c;
  --navy-soft: #1c2030;
  --orange: #ff6a1a;
  --orange-deep: #e8380a;
  --orange-light: #fff1e8;
  --orange-glow: rgba(255, 106, 26, 0.35);
  --text: #171a21;
  --muted: #6b7280;
  --border: #ececef;
  --bg: #fffaf7;
}
* { box-sizing: border-box; }
body.marketing {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
::selection { background: var(--orange); color: #fff; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 250, 247, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
}
.logo img { display: block; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14.5px;
  font-weight: 600;
}
.main-nav a { color: var(--text); padding: 8px 0; position: relative; transition: color 0.2s; }
.main-nav a:hover { color: var(--orange); }
.main-nav a.active { color: var(--orange); }
.main-nav a.active::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--orange-deep));
  border-radius: 2px;
}
.main-nav a.btn-nav {
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px var(--orange-glow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.main-nav a.btn-nav:hover { transform: translateY(-1px); box-shadow: 0 10px 22px var(--orange-glow); color: #fff; }
.main-nav a.btn-nav-outline {
  background: #fff;
  color: var(--orange-deep);
  border: 1.5px solid var(--orange);
  box-shadow: none;
  padding: 8.5px 20.5px;
}
.main-nav a.btn-nav-outline:hover { background: var(--orange-light); color: var(--orange-deep); box-shadow: none; }

/* Install App - sits outside the collapsible nav so it's always visible,
   on both desktop (between Sign Up and the hamburger) and mobile (right
   there in the top bar, not hidden inside the menu). */
.header-right-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.install-app-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  box-shadow: 0 6px 16px var(--orange-glow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.install-app-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 22px var(--orange-glow); color: #fff; }
.menu-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--navy); }

/* Sign Up modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11,12,18,0.6);
  backdrop-filter: blur(3px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-box {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.4);
  margin: auto;
}
.marketing .modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: #f4f4f4;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: none;
}
.marketing .modal-close:hover { background: var(--orange-light); color: var(--orange-deep); transform: none; }
.clean-modal-box .modal-close { background: rgba(255,255,255,0.12); color: #fff; }
.clean-modal-box .modal-close:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* Hero - dark, dramatic, animated */
.hero {
  position: relative;
  padding: 110px 24px 90px;
  overflow: hidden;
  background: linear-gradient(160deg, #0c0d13 0%, var(--navy) 45%, #1a1420 100%);
  isolation: isolate;
}
.hero-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.09) 1px, transparent 1.4px);
  background-size: 34px 34px;
  animation: particle-drift 30s linear infinite;
  z-index: 0;
  opacity: 0.6;
}
@keyframes particle-drift {
  0% { background-position: 0 0; }
  100% { background-position: 340px 170px; }
}
.hero::before {
  content: "";
  position: absolute;
  top: -240px; right: -160px;
  width: 680px; height: 680px;
  background: radial-gradient(circle, rgba(255,106,26,0.55) 0%, rgba(255,106,26,0) 68%);
  border-radius: 50%;
  pointer-events: none;
  animation: blob-float-1 10s ease-in-out infinite;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -280px; left: -220px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(232,56,10,0.45) 0%, rgba(232,56,10,0) 68%);
  border-radius: 50%;
  pointer-events: none;
  animation: blob-float-2 13s ease-in-out infinite;
  z-index: 0;
}
.hero-orb-3 {
  position: absolute;
  top: 40%; left: 38%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,170,80,0.28) 0%, rgba(255,170,80,0) 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: blob-float-1 15s ease-in-out infinite reverse;
  z-index: 0;
}
@keyframes blob-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 35px) scale(1.1); }
}
@keyframes blob-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(35px, -30px) scale(1.08); }
}
.hero-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
  z-index: 1;
}
.hero-right-col {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Matches .qs-card's own width and right-alignment exactly, so this
   sits perfectly inline underneath it rather than looking like a
   mismatched, wider box floating separately. */
.quick-clean-box {
  margin-top: 18px;
  margin-left: auto;
  max-width: 340px;
  width: 100%;
  background: linear-gradient(135deg, rgba(255,106,26,0.16), rgba(255,106,26,0.05));
  border: 1.5px solid rgba(255,106,26,0.45);
  border-radius: 16px;
  padding: 20px 22px;
  backdrop-filter: blur(6px);
}
.quick-clean-item + .quick-clean-item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,106,26,0.25);
}
.quick-clean-item h4 { color: #fff; font-size: 15px; margin: 0 0 5px; }
.quick-clean-item p { color: rgba(255,255,255,0.75); font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; }
.quick-clean-item .btn { display: inline-block; text-decoration: none; padding: 9px 16px; font-size: 13px; }

/* Clean My Data modal - dark, matching the homepage hero's background,
   rather than the plain white used by the other modals (Sign Up,
   Install App), which stay as-is. */
.clean-modal-box {
  background: linear-gradient(160deg, var(--navy) 0%, #1a1023 60%, #2a1408 100%);
  position: relative;
  overflow: hidden;
}
.clean-modal-box::before {
  content: "";
  position: absolute;
  top: -120px; right: -100px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,106,26,0.35) 0%, rgba(255,106,26,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.clean-modal-box > * { position: relative; z-index: 1; }
.clean-modal-box h2 { color: #fff !important; }
.clean-modal-box p { color: rgba(255,255,255,0.75) !important; }
.clean-modal-box label { color: #fff !important; }
#clean-modal-overlay .clean-modal-box input[type="email"],
#clean-modal-overlay .clean-modal-box input[type="number"] {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2) !important;
  color: #fff;
}
#clean-modal-overlay .clean-modal-box input[type="email"]::placeholder,
#clean-modal-overlay .clean-modal-box input[type="number"]::placeholder { color: rgba(255,255,255,0.4); }
.clean-modal-box a { color: var(--orange) !important; }

/* Clean My Data progress card - a richer status view than a plain bar:
   big bold percentage overlaid on the track, a current-stage label, and
   a row of stage indicators so the customer can see roughly where
   things stand, not just a number climbing. */
.clean-progress-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 2px 10px rgba(18,20,28,0.03);
}
.clean-progress-filename {
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
  margin: 0 0 16px;
  text-align: center;
  word-break: break-all;
}
.clean-progress-track {
  position: relative;
  background: #f0f0f0;
  border-radius: 999px;
  height: 34px;
  overflow: hidden;
}
.clean-progress-fill {
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.clean-progress-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--navy);
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.clean-progress-status {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 22px;
}
.clean-progress-stages {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.clean-stage {
  flex: 1;
  text-align: center;
  position: relative;
}
.clean-stage:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 55%;
  width: 90%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.clean-stage.done:not(:last-child)::after { background: var(--orange); }
.clean-stage-dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border);
  margin: 0 auto 8px;
  position: relative;
  z-index: 1;
  transition: border-color 0.2s, background 0.2s;
}
.clean-stage.active .clean-stage-dot {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 0 4px var(--orange-light);
}
.clean-stage.done .clean-stage-dot {
  border-color: var(--orange);
  background: var(--orange);
}
.clean-stage-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
}
.clean-stage.active .clean-stage-label,
.clean-stage.done .clean-stage-label { color: var(--navy); }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,106,26,0.15);
  border: 1px solid rgba(255,106,26,0.35);
  color: #ffb27a;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
  letter-spacing: 0.2px;
}
.hero h1 {
  font-size: 50px;
  line-height: 1.1;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.5px;
}
.hero h1 .accent {
  background: linear-gradient(135deg, #ffb27a, var(--orange), var(--orange-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: 18px;
  line-height: 1.6;
  color: #b9bcc7;
  max-width: 480px;
}

/* Trust pills */
.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #e4e5ea;
  backdrop-filter: blur(4px);
}

/* Organized "recent activity" panel in the hero */
.hero-activity {
  margin-top: 34px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 18px 20px;
  max-width: 440px;
  backdrop-filter: blur(6px);
  transition: background 0.25s, border-color 0.25s;
  cursor: default;
}
.hero-activity:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,106,26,0.3);
}

/* Welcome Bundle banner - sits alongside Recent Activity in the hero,
   but styled to pop as a promotional CTA rather than blend in as info. */
.welcome-bundle-banner {
  margin-top: 18px;
  max-width: 440px;
  background: linear-gradient(135deg, rgba(255,106,26,0.16), rgba(255,106,26,0.05));
  border: 1.5px solid rgba(255,106,26,0.45);
  border-radius: 16px;
  padding: 20px 22px;
  backdrop-filter: blur(6px);
  transition: transform 0.25s, border-color 0.25s;
}
.welcome-bundle-banner:hover {
  transform: translateY(-2px);
  border-color: var(--orange);
}
.welcome-bundle-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.welcome-bundle-banner h3 {
  color: #fff;
  font-size: 18px;
  margin: 0 0 6px;
}
.welcome-bundle-banner p {
  color: rgba(255,255,255,0.75);
  font-size: 13.5px;
  margin: 0 0 14px;
  line-height: 1.5;
}
.welcome-bundle-banner .btn {
  display: inline-block;
  text-decoration: none;
}
.hero-activity-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #9298a6;
  margin-bottom: 14px;
}
.hero-activity-title .live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: demo-pulse 1.6s infinite;
}
.activity-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 13.5px;
  color: #e4e5ea;
  opacity: 0;
  animation: activity-fade-in 0.6s ease forwards;
}
.activity-row:first-of-type { border-top: none; }
.activity-row:nth-child(2) { animation-delay: 0.15s; }
.activity-row:nth-child(3) { animation-delay: 0.3s; }
.activity-row:nth-child(4) { animation-delay: 0.45s; }
@keyframes activity-fade-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.activity-row .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(255,106,26,0.15);
}
.activity-row .time { margin-left: auto; color: #6f7482; font-size: 12px; font-variant-numeric: tabular-nums; }
.signup-card {
  background: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 35px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
}
.signup-card h3 { margin-top: 0; font-size: 18px; color: var(--navy); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.marketing input[type=text], .marketing input[type=email], .marketing input[type=password], .marketing input[type=tel], .marketing textarea, .marketing select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 12px;
  background: #fdfdfd;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.marketing input:focus, .marketing textarea:focus, .marketing select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px var(--orange-light);
  background: #fff;
}
.marketing label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.marketing button, .marketing .btn {
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  border: none;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  display: inline-block;
  box-shadow: 0 8px 20px var(--orange-glow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.marketing button:hover, .marketing .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px var(--orange-glow); }
.marketing button:active, .marketing .btn:active { transform: translateY(0); }
.marketing .btn-outline {
  background: #fff;
  border: 1.5px solid var(--orange);
  color: var(--orange-deep);
  box-shadow: none;
}
.marketing .btn-outline:hover { background: var(--orange-light); box-shadow: none; }
.no-cc { text-align:center; font-size: 12px; color: var(--muted); margin-top: 12px; }

/* Quick Send widget - one continuous compact panel, matching WeTransfer's
   own homepage widget: add-file tile, underline-style fields, expiry pill
   + more-options row, full-width send button. Nothing hidden/collapsed. */
.qs-card {
  padding: 22px;
  max-width: 340px;
  margin-left: auto;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.qs-card.drag-over {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px var(--orange-light), 0 25px 60px rgba(18,20,28,0.1);
}
.qs-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.qs-add-tile {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 20px var(--orange-glow);
  transition: transform 0.15s, box-shadow 0.15s;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qs-add-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 26px var(--orange-glow); }

.qs-input {
  width: 100%;
  font-size: 13.5px;
  margin-bottom: 4px;
  background: transparent;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s;
}
.qs-underline {
  border: none;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  padding: 10px 2px;
}
.qs-underline:focus {
  outline: none;
  border-bottom-color: var(--orange);
  box-shadow: none;
  background: transparent;
}
textarea.qs-underline { resize: none; }

.qs-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 6px;
  font-weight: 500;
}
.qs-options-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 12px 0;
  position: relative;
}
.qs-expiry-pill {
  flex: 1;
  height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  box-shadow: 0 6px 14px var(--orange-glow);
  cursor: pointer;
  user-select: none;
}
.qs-expiry-pill span:nth-child(2) { flex: 1; }
.qs-expiry-caret { font-size: 10px; opacity: 0.85; }
.qs-expiry-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: calc(100% - 52px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(18,20,28,0.18);
  overflow: hidden;
  z-index: 20;
}
.qs-expiry-dropdown.open { display: block; }
.qs-expiry-option {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s;
}
.qs-expiry-option:hover {
  background: var(--orange-light);
  color: var(--orange-deep);
}
.qs-more-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 6px 14px var(--orange-glow);
  transition: transform 0.15s;
}
.qs-more-btn:hover, .qs-more-btn.active {
  transform: translateY(-2px);
}
.qs-more-options {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}
.qs-more-options.open {
  max-height: 160px;
  opacity: 1;
  margin-bottom: 12px;
}
.qs-mode-row {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.qs-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.qs-radio input[type=radio] {
  accent-color: var(--orange);
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}
.qs-send-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 20px var(--orange-glow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.qs-send-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px var(--orange-glow); }

.qs-sending-state {
  display: none;
  text-align: center;
  padding: 30px 10px;
}
.qs-sending-logo {
  height: 36px;
  margin: 0 auto 22px;
  display: block;
}
.qs-sending-spinner {
  width: 40px; height: 40px;
  margin: 0 auto 18px;
  border: 4px solid var(--orange-light);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: qs-spin 0.8s linear infinite;
}
@keyframes qs-spin { to { transform: rotate(360deg); } }
.qs-sending-title { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.qs-sending-sub { font-size: 12.5px; color: var(--muted); margin: 0; }

/* Feature section */
.features {
  max-width: 1200px;
  margin: 70px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feature {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(18,20,28,0.08);
  border-color: transparent;
}
.feature .icon-badge {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
  box-shadow: 0 8px 18px var(--orange-glow);
}
.feature h3 { color: var(--navy); font-size: 17px; margin: 0 0 8px; }
.feature p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* Pricing */
.pricing-section {
  max-width: 1200px;
  margin: 70px auto;
  padding: 0 24px;
}
.pricing-section h2 { text-align: center; color: var(--navy); font-size: 32px; letter-spacing: -0.3px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
@media (max-width: 1080px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
.plan-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 30px;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 20px 45px rgba(18,20,28,0.08); }
.plan-card.popular {
  border-color: var(--orange);
  box-shadow: 0 20px 50px var(--orange-glow);
  background: linear-gradient(180deg, var(--orange-light) 0%, #fff 22%);
}
.plan-badge {
  position: absolute;
  top: -13px;
  left: 26px;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.4px;
  box-shadow: 0 6px 14px var(--orange-glow);
}
.plan-card h3 { margin-top: 4px; color: var(--navy); font-size: 19px; }
.plan-price { font-size: 34px; font-weight: 800; color: var(--navy); margin: 8px 0 2px; letter-spacing: -0.5px; }
.plan-price span { font-size: 14px; color: var(--muted); font-weight: 500; }
.plan-desc { color: var(--muted); font-size: 13.5px; min-height: 40px; }
.plan-card ul { list-style: none; padding: 0; margin: 18px 0; font-size: 13.5px; flex: 1; }
.plan-card ul li { padding: 6px 0; color: var(--text); display: flex; align-items: flex-start; gap: 8px; }
.plan-card ul li:before {
  content: "\2713";
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* FAQ */
.faq { max-width: 860px; margin: 70px auto; padding: 0 24px; }
.faq h2 { text-align:center; color: var(--navy); margin-bottom: 34px; font-size: 30px; letter-spacing: -0.3px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 20px 0; }
.faq-item h4 { margin: 0 0 8px; color: var(--navy); font-size: 15.5px; }
.faq-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* Legal pages */
.legal { max-width: 820px; margin: 60px auto; padding: 0 24px 70px; }
.legal h1 { color: var(--navy); font-size: 34px; letter-spacing: -0.3px; }
.legal h3 { color: var(--navy); margin-top: 36px; }
.legal p, .legal li { color: var(--text); font-size: 14.5px; line-height: 1.7; }
.legal .revised { color: var(--muted); font-size: 13px; margin-top: 30px; }

/* Contact */
.contact-wrap {
  max-width: 720px;
  margin: 60px auto;
  padding: 0 24px 70px;
}
.contact-wrap h1 { color: var(--navy); font-size: 34px; letter-spacing: -0.3px; }

/* Quick Send confirmation page - dark hero background to match the
   homepage, rather than sitting on plain white like a generic page */
.qs-confirm-hero { display: flex; justify-content: center; }
.qs-confirm-wrap {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: 100%;
  text-align: center;
}
.qs-confirm-wrap h1 { color: #fff; font-size: 36px; letter-spacing: -0.3px; margin-bottom: 14px; }
.qs-confirm-sub { color: #b9bcc7; font-size: 15.5px; margin: 0 0 22px; }
.qs-confirm-link-box {
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 20px;
  word-break: break-all;
  font-size: 14px;
  color: var(--navy);
  box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}
.qs-confirm-copy-btn {
  margin-bottom: 14px;
}
.marketing .qs-confirm-copy-btn {
  background: transparent;
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}
.marketing .qs-confirm-copy-btn:hover { background: rgba(255,255,255,0.1); }

/* Footer */
.site-footer { background: var(--navy); color: #c9ccd6; margin-top: 70px; position: relative; }
.site-footer::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-deep), var(--orange));
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 24px 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}
.footer-col h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px; }
.footer-col a { display: block; color: #a7abb8; font-size: 14px; margin-bottom: 10px; transition: color 0.2s; }
.footer-col a:hover { color: var(--orange); }
.muted-footer { color: #7d8190; font-size: 13px; margin-top: 12px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  padding: 20px;
  font-size: 12.5px;
  color: #7d8190;
}
.footer-bottom a { color: #a7abb8; }
.footer-bottom a:hover { color: var(--orange); }

/* Login page (Super Admin / Buyer tabs) */
.login-marketing-wrap {
  min-height: 74vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 20px;
  position: relative;
  overflow: hidden;
  background: var(--navy);
}
.login-marketing-wrap::before {
  content: "";
  position: absolute;
  top: -200px; left: -160px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(255,106,26,0.28) 0%, rgba(255,106,26,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.login-marketing-wrap::after {
  content: "";
  position: absolute;
  bottom: -220px; right: -180px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(255,106,26,0.2) 0%, rgba(255,106,26,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.login-box {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
  text-align: center;
}
.login-box .logo { justify-content: center; margin-bottom: 22px; }
.role-tabs {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
  background: #f7f7f8;
  padding: 3px;
}
.role-tabs button {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}
.role-tabs button.active {
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  box-shadow: 0 6px 16px var(--orange-glow);
}
.login-box form { text-align: left; }
.remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin: -4px 0 16px;
}

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero h1 { font-size: 36px; }
  .features, .pricing-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; padding: 16px 24px; border-bottom: 1px solid var(--border); gap: 14px; }
  .main-nav.open { display: flex; }
  .menu-toggle { display: block; }
  .install-app-pill { font-size: 12px; padding: 8px 12px; }
  .flow-steps { grid-template-columns: 1fr; }
  .flow-line { display: none; }
  .hero-activity { max-width: 100%; }
}

/* Scroll-reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Live demo widget */
.demo-section {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 24px;
  text-align: center;
}
.demo-section h2 { color: var(--navy); font-size: 32px; letter-spacing: -0.3px; margin-bottom: 10px; }
.demo-section p.sub { color: var(--muted); max-width: 560px; margin: 0 auto 40px; font-size: 16px; }
.demo-browser {
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(18,20,28,0.14);
  border: 1px solid var(--border);
  text-align: left;
}
.demo-browser-bar {
  background: var(--navy);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.demo-browser-dots { display: flex; gap: 6px; }
.demo-browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.demo-browser-url {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px 14px;
  color: #c9ccd6;
  font-size: 12.5px;
  text-align: center;
  font-family: -apple-system, sans-serif;
}
.demo-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange-light);
  color: var(--orange-deep);
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.demo-pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange-deep);
  animation: demo-pulse 1.6s infinite;
}
@keyframes demo-pulse {
  0% { box-shadow: 0 0 0 0 var(--orange-glow); }
  70% { box-shadow: 0 0 0 8px rgba(255,106,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,106,26,0); }
}
.demo-body { padding: 22px 22px 26px; }
.demo-body-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.demo-body-header h4 { margin: 0; color: var(--navy); font-size: 15px; }
.demo-count { color: var(--muted); font-size: 13px; }
.demo-count strong { color: var(--orange-deep); font-variant-numeric: tabular-nums; }
.demo-table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.demo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.demo-table th {
  background: #faf9f8;
  text-align: left;
  padding: 9px 12px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.demo-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f3f1ef;
  color: var(--text);
}
.demo-table tbody tr:last-child td { border-bottom: none; }
.demo-row-enter {
  animation: demo-row-in 0.5s ease;
}
@keyframes demo-row-in {
  from { opacity: 0; transform: translateY(-8px); background: var(--orange-light); }
  to { opacity: 1; transform: translateY(0); }
}
.demo-status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  margin-right: 6px;
}

/* Live feed table: six columns, so tighten up and drop the least important
   ones as the screen narrows rather than letting it squash or scroll. */
.demo-table td, .demo-table th { white-space: nowrap; }
.demo-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.2px; }
.demo-caption {
  color: var(--muted);
  font-size: 12px;
  margin: 14px auto 0;
  max-width: 560px;
}
@media (max-width: 900px) {
  .demo-table { font-size: 12px; }
  .demo-table td, .demo-table th { padding: 8px 9px; }
}
@media (max-width: 760px) {
  .demo-col-ref { display: none; }
}
@media (max-width: 620px) {
  .demo-col-phone { display: none; }
}
@media (max-width: 480px) {
  .demo-col-email { display: none; }
  .demo-table { font-size: 11.5px; }
}

/* How it works flow */
.flow-section {
  max-width: 1000px;
  margin: 80px auto;
  padding: 0 24px;
  text-align: center;
}
.flow-section h2 { color: var(--navy); font-size: 32px; letter-spacing: -0.3px; margin-bottom: 50px; }
.flow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
}
.flow-line {
  position: absolute;
  top: 34px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--orange) 0, var(--orange) 6px, transparent 6px, transparent 14px);
  z-index: 0;
}
.flow-line::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--orange-deep);
  box-shadow: 0 0 12px var(--orange-glow);
  animation: flow-dot 3.5s linear infinite;
}
@keyframes flow-dot {
  0% { left: 0%; }
  100% { left: 100%; }
}
.flow-step { position: relative; z-index: 1; }
.flow-step-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin: 0 auto 18px;
  box-shadow: 0 10px 24px rgba(18,20,28,0.08);
}
.flow-step h4 { color: var(--navy); font-size: 16px; margin: 0 0 8px; }
.flow-step p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0; padding: 0 8px; }