/* =========================================================================
   Estate-HQ — premium marketing design system (Stripe-vibe)
   Hand-written CSS, ships as a static asset. No Vite build step needed.
   ========================================================================= */

/* ---------- Fonts (Bunny Fonts — GDPR-safe, no Google) ---------- */
@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap');

/* ---------- Design tokens ---------- */
:root {
  --mkt-bg:           #ffffff;
  --mkt-bg-soft:      #f6f9fc;
  --mkt-bg-dark:      #0a2540;

  --mkt-ink:          #0a2540;   /* near-black with a hint of blue */
  --mkt-ink-soft:     #425466;
  --mkt-ink-mute:     #697386;
  --mkt-ink-inv:      #ffffff;

  --mkt-accent:       #635bff;
  --mkt-accent-dark:  #4f46e5;
  --mkt-accent-soft:  #efeefe;

  --mkt-hero-cyan:    #00d4ff;
  --mkt-hero-pink:    #ff5fa2;
  --mkt-hero-violet:  #7a5af8;

  --mkt-border:       #e3e8ef;
  --mkt-border-soft:  #eef2f7;

  --mkt-shadow-sm: 0 1px 2px rgba(10,37,64,0.06);
  --mkt-shadow:    0 1px 2px rgba(10,37,64,0.08), 0 8px 24px -12px rgba(10,37,64,0.12);
  --mkt-shadow-lg: 0 4px 8px rgba(10,37,64,0.08), 0 24px 48px -16px rgba(10,37,64,0.18);

  --mkt-radius:    16px;
  --mkt-radius-lg: 20px;
  --mkt-radius-xl: 28px;

  --mkt-max:       1200px;
}

/* ---------- Base body styles when marketing layout is in use ---------- */
.mkt-body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  color: var(--mkt-ink-soft);
  background: var(--mkt-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
.mkt-body h1, .mkt-body h2, .mkt-body h3, .mkt-body h4 {
  color: var(--mkt-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ---------- Container + sections ---------- */
.mkt-container {
  max-width: var(--mkt-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 768px) {
  .mkt-container { padding-left: 32px; padding-right: 32px; }
}

.mkt-section { padding-top: 80px; padding-bottom: 80px; position: relative; }
@media (min-width: 768px) { .mkt-section { padding-top: 120px; padding-bottom: 120px; } }

.mkt-section--soft { background: var(--mkt-bg-soft); }
.mkt-section--dark { background: var(--mkt-bg-dark); color: rgba(255,255,255,0.85); }
.mkt-section--dark h1, .mkt-section--dark h2, .mkt-section--dark h3 { color: #fff; }

.mkt-section--tight { padding-top: 56px; padding-bottom: 56px; }

/* ---------- Hero backdrop ----------
   This was an animated aurora: three blurred radial gradients (cyan / pink / violet) at 0.45
   opacity rotating on an 18s loop. It was rejected outright -- "looks to bad doesnt look
   Professional human work" -- and clean-and-light was chosen instead. It stayed live anyway,
   because the hero falls back to this class whenever no background image is configured, and none
   ever was. So the rejected treatment has been on the most-seen surface of the site the whole time,
   along with the closing CTA band.
   
   What replaces it is a plain, very soft vertical wash. The class name is kept so the two callers
   (hero.blade.php and cta-band.blade.php) need no change, and so a background image still layers
   over it correctly. */
.mkt-gradient-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #fbfcfd 0%, #f6f9fc 100%);
}
.mkt-gradient-bg--cta { background: linear-gradient(180deg, #f6f9fc 0%, #eef3f8 100%); }
.mkt-gradient-bg--cta::after {
  background: linear-gradient(180deg, rgba(10,37,64,0.85) 0%, rgba(10,37,64,0.92) 100%);
}
.mkt-gradient-bg--cta { color: #fff; }
.mkt-gradient-bg--cta h1, .mkt-gradient-bg--cta h2, .mkt-gradient-bg--cta h3 { color: #fff; }

/* ---------- Eyebrow ---------- */
.mkt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--mkt-accent-soft);
  color: var(--mkt-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-transform: uppercase;
}
.mkt-eyebrow--dark {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.95);
}

/* ---------- Typography helpers ---------- */
.mkt-h1 {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--mkt-ink);
}
.mkt-h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--mkt-ink);
}
.mkt-h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--mkt-ink);
}
.mkt-lead {
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  color: var(--mkt-ink-soft);
  line-height: 1.55;
}
.mkt-ink         { color: var(--mkt-ink); }
.mkt-ink-soft    { color: var(--mkt-ink-soft); }
.mkt-ink-mute    { color: var(--mkt-ink-mute); }
.mkt-accent      { color: var(--mkt-accent); }
.mkt-tabular     { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.mkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.mkt-btn--primary {
  background: var(--mkt-ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10,37,64,0.2), 0 4px 12px -4px rgba(10,37,64,0.3);
}
.mkt-btn--primary:hover {
  background: #1a3a5c;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(10,37,64,0.25), 0 8px 20px -4px rgba(10,37,64,0.4);
}
.mkt-btn--accent {
  background: var(--mkt-accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(99,91,255,0.3), 0 4px 12px -4px rgba(99,91,255,0.5);
}
.mkt-btn--accent:hover {
  background: var(--mkt-accent-dark);
  transform: translateY(-1px);
}
.mkt-btn--secondary {
  background: rgba(10,37,64,0.04);
  color: var(--mkt-ink);
}
.mkt-btn--secondary:hover { background: rgba(10,37,64,0.08); }
.mkt-btn--ghost {
  background: transparent;
  color: var(--mkt-ink);
  padding-left: 8px;
  padding-right: 8px;
}
.mkt-btn--ghost:hover { color: var(--mkt-accent); }
.mkt-btn--inv {
  background: #fff;
  color: var(--mkt-ink);
}
.mkt-btn--inv:hover { transform: translateY(-1px); }
.mkt-btn--lg { padding: 16px 28px; font-size: 16px; }

/* ─── On-dark theme for the hero when a bg photo is set ─────────────── */
.mkt-hero-bgimage .mkt-btn--secondary {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mkt-hero-bgimage .mkt-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
}
.mkt-hero-bgimage .mkt-trust-row__item {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.mkt-hero-bgimage .mkt-trust-row__dot {
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}
.mkt-hero-bgimage .mkt-eyebrow {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------- Cards ---------- */
.mkt-card {
  background: #fff;
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-shadow);
  padding: 28px;
  transition: transform 300ms cubic-bezier(0.4,0,0.2,1), box-shadow 300ms;
}
.mkt-card--lift:hover { transform: translateY(-4px); box-shadow: var(--mkt-shadow-lg); }
.mkt-card--soft { background: var(--mkt-bg-soft); }

/* ---------- Header (sticky, backdrop-blur on scroll) ---------- */
.mkt-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, box-shadow 200ms;
  /* Anchor for the absolutely-positioned mobile drawer */
}
.mkt-header__inner-wrap { position: relative; }
.mkt-header.is-scrolled {
  border-bottom-color: var(--mkt-border-soft);
  box-shadow: 0 1px 3px rgba(10,37,64,0.04);
}
.mkt-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.mkt-header__nav {
  display: none;
  align-items: center;
  gap: 28px;
}
@media (min-width: 880px) { .mkt-header__nav { display: flex; } }
.mkt-header__nav a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mkt-ink);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 150ms;
  text-decoration: none;
}
.mkt-header__nav a:hover { color: var(--mkt-accent); }
.mkt-header__nav a[data-has-menu]::after {
  content: '';
  width: 0; height: 0;
  border: 4px solid transparent;
  border-top-color: currentColor;
  margin-top: 2px;
  opacity: 0.5;
}
.mkt-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mkt-ink);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.mkt-header__signin { display: none; }
@media (min-width: 880px) { .mkt-header__signin { display: inline-flex; } }

/* ---- Mobile menu (hamburger + slide-down drawer) ---- */
.mkt-header__menu-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--mkt-border-soft);
  background: #fff;
  color: var(--mkt-ink);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.mkt-header__menu-btn:hover { background: var(--mkt-bg-soft); border-color: var(--mkt-border); }
.mkt-header__menu-btn svg { width: 20px; height: 20px; transition: transform 200ms; }
.mkt-header__menu-btn[aria-expanded="true"] svg { transform: rotate(90deg); }
@media (min-width: 880px) { .mkt-header__menu-btn { display: none; } }

/* Hide the desktop primary CTA on phones — it lives inside the drawer instead */
.mkt-header__cta-desktop { display: none; }
@media (min-width: 880px) { .mkt-header__cta-desktop { display: inline-flex; } }

/* The drawer itself sits underneath the header, full-width on mobile */
.mkt-mobile-menu {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--mkt-border-soft);
  box-shadow: 0 12px 32px -16px rgba(10,37,64,0.18);
  padding: 16px 24px 24px;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 280ms;
}
.mkt-mobile-menu.is-open {
  max-height: 80vh;
  visibility: visible;
  transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}
.mkt-mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mkt-mobile-menu nav a {
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--mkt-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms;
}
.mkt-mobile-menu nav a:hover { background: var(--mkt-bg-soft); }
.mkt-mobile-menu__divider { margin: 16px 0; border-top: 1px solid var(--mkt-border-soft); }
.mkt-mobile-menu__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mkt-mobile-menu__cta .mkt-btn { width: 100%; justify-content: center; }
@media (min-width: 880px) { .mkt-mobile-menu, .mkt-header__menu-btn { display: none !important; } }

/* Lock body scroll when drawer is open */
body.mkt-menu-open { overflow: hidden; }

.mkt-header__logo-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #00b4ff, #0066ff);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}

/* ---------- Logo strip (marquee) ---------- */
.mkt-logo-strip {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.mkt-logo-strip__track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: mkt-marquee 30s linear infinite;
}
.mkt-logo-strip__item {
  font-size: 18px;
  font-weight: 600;
  color: var(--mkt-ink-mute);
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0.75;
}
@keyframes mkt-marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Metric (big number) ---------- */
.mkt-metric__value {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--mkt-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mkt-metric__label {
  margin-top: 8px;
  font-size: 14px;
  color: var(--mkt-ink-mute);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- Bento grid (4-col, deterministic) ---------- */
.mkt-bento {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
}
.mkt-bento__item { grid-column: span 4; }
@media (max-width: 767px) {
  .mkt-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .mkt-bento__item { grid-column: span 1 !important; grid-row: auto !important; }
}
@media (min-width: 768px) {
  .mkt-bento__item--lg { grid-column: span 2; grid-row: span 2; }
  .mkt-bento__item--md { grid-column: span 2; }
  .mkt-bento__item--sm { grid-column: span 1; }
}
.mkt-bento-card {
  background: #fff;
  border-radius: var(--mkt-radius-lg);
  box-shadow: 0 1px 2px rgba(10,37,64,0.04), 0 0 0 1px rgba(10,37,64,0.05);
  padding: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 300ms cubic-bezier(0.4,0,0.2,1), box-shadow 300ms;
  position: relative;
}
.mkt-bento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px -4px rgba(10,37,64,0.12), 0 0 0 1px rgba(10,37,64,0.05);
}
/* Pastel tile icon — Goodlord-style soft hue families.
   Each card sets --icon-bg + --icon-fg via the colour helper class. */
.mkt-bento-card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--icon-bg, #eef2ff);
  color: var(--icon-fg, #4338ca);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mkt-bento-card__icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.mkt-bento-card .mkt-bento-card__cta {
  margin-top: auto;
  align-self: flex-end;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--icon-fg, var(--mkt-accent));
  color: #fff;
  transition: transform 200ms;
  text-decoration: none;
}
.mkt-bento-card .mkt-bento-card__cta:hover { transform: scale(1.1); }

/* Pastel palette — pairs that read well on white */
.mkt-pal--rose    { --icon-bg: #fde7ef; --icon-fg: #be185d; }
.mkt-pal--peach   { --icon-bg: #fef0e6; --icon-fg: #c2410c; }
.mkt-pal--teal    { --icon-bg: #d9f5ee; --icon-fg: #0f766e; }
.mkt-pal--magenta { --icon-bg: #fae8ff; --icon-fg: #a21caf; }
.mkt-pal--slate   { --icon-bg: #e6ebf2; --icon-fg: #475569; }
.mkt-pal--sky     { --icon-bg: #e0f0fe; --icon-fg: #0369a1; }
.mkt-pal--indigo  { --icon-bg: #e6e9ff; --icon-fg: #4338ca; }
.mkt-pal--mint    { --icon-bg: #dcfce7; --icon-fg: #15803d; }
.mkt-pal--amber   { --icon-bg: #fef3c7; --icon-fg: #b45309; }
.mkt-pal--violet  { --icon-bg: #ede9fe; --icon-fg: #6d28d9; }
.mkt-pal--blush   { --icon-bg: #ffe4e6; --icon-fg: #be123c; }
.mkt-pal--cyan    { --icon-bg: #cffafe; --icon-fg: #0e7490; }

/* Step card (How it works) — matches the soft pastel pill aesthetic of the bento + UK cards */
.mkt-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-radius: var(--mkt-radius-lg);
  background: #fff;
  box-shadow: 0 1px 2px rgba(10,37,64,0.04), 0 0 0 1px rgba(10,37,64,0.05);
  transition: transform 300ms, box-shadow 300ms;
}
.mkt-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px -4px rgba(10,37,64,0.12), 0 0 0 1px rgba(10,37,64,0.05);
}
.mkt-step__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--icon-bg, #eef2ff);
  color: var(--icon-fg, #4338ca);
}
.mkt-step__icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.mkt-step__num-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--icon-fg, var(--mkt-ink-mute));
  font-variant-numeric: tabular-nums;
}

/* Connector line between cards on desktop — subtle gradient under the icons */
.mkt-steps-grid { position: relative; }
@media (min-width: 768px) {
  .mkt-steps-grid::before {
    content: '';
    position: absolute;
    top: 52px;
    left: 12%; right: 12%;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(99,91,255,0.18) 20%,
      rgba(99,91,255,0.18) 80%,
      transparent 100%);
    z-index: 0;
  }
  .mkt-step { z-index: 1; }
}

/* UK feature card (small icon + title + body) */
.mkt-uk-card {
  background: #fff;
  border-radius: var(--mkt-radius);
  padding: 24px;
  box-shadow: 0 1px 2px rgba(10,37,64,0.04), 0 0 0 1px rgba(10,37,64,0.05);
  transition: transform 300ms, box-shadow 300ms;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mkt-uk-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px -4px rgba(10,37,64,0.12), 0 0 0 1px rgba(10,37,64,0.05);
}
.mkt-uk-card__icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--icon-bg, #eef2ff);
  color: var(--icon-fg, #4338ca);
}
.mkt-uk-card__icon svg { width: 20px; height: 20px; stroke-width: 1.75; }
.mkt-bento-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--mkt-ink);
  letter-spacing: -0.015em;
}
.mkt-bento-card__body {
  font-size: 15px;
  color: var(--mkt-ink-soft);
  line-height: 1.55;
}

/* ---------- Screenshot frame (tilted gradient border) ---------- */
.mkt-screenshot {
  position: relative;
  border-radius: var(--mkt-radius-lg);
  padding: 2px;
  background: #e6ebf1;  /* was a cyan/violet/pink gradient border -- same rejected signature */
  box-shadow: var(--mkt-shadow-lg);
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
}
.mkt-screenshot img,
.mkt-screenshot .mkt-screenshot__inner {
  display: block;
  border-radius: calc(var(--mkt-radius-lg) - 2px);
  width: 100%;
  background: #fff;
  overflow: hidden;
}

/* ---------- CTA band ---------- */
.mkt-cta-band {
  border-radius: var(--mkt-radius-xl);
  padding: 56px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* The closing CTA carried the same rejected aurora, unconditionally on every render. The band
   keeps its deep navy ground (::after, below) -- only the animated colour wash is gone. */
.mkt-cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,37,64,0.92) 0%, rgba(10,37,64,0.95) 100%);
}
.mkt-cta-band, .mkt-cta-band h1, .mkt-cta-band h2, .mkt-cta-band h3 { color: #fff; }
.mkt-cta-band p { color: rgba(255,255,255,0.8); }

/* ---------- Footer ---------- */
.mkt-footer {
  background: var(--mkt-bg-dark);
  color: rgba(255,255,255,0.6);
  margin-top: 80px;
  padding-top: 64px;
  padding-bottom: 32px;
}
.mkt-footer__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .mkt-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}
.mkt-footer__brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mkt-footer__col h3 {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.mkt-footer__col ul { list-style: none; padding: 0; margin: 0; }
.mkt-footer__col li { margin-bottom: 10px; }
.mkt-footer__col a {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  text-decoration: none;
  transition: color 150ms;
}
.mkt-footer__col a:hover { color: #fff; }
.mkt-footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}
.mkt-footer__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.mkt-footer__status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22d3a0;
  box-shadow: 0 0 0 3px rgba(34,211,160,0.2);
}

/* ---------- Compare table ---------- */
.mkt-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  background: #fff;
  border-radius: var(--mkt-radius);
  overflow: hidden;
  box-shadow: var(--mkt-shadow);
}
.mkt-compare thead th {
  background: var(--mkt-bg-soft);
  color: var(--mkt-ink);
  font-weight: 600;
  padding: 16px;
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.mkt-compare thead th.mkt-compare__us {
  background: linear-gradient(135deg, var(--mkt-accent-soft), #fff);
  color: var(--mkt-accent);
}
.mkt-compare td {
  padding: 16px;
  border-top: 1px solid var(--mkt-border-soft);
  color: var(--mkt-ink-soft);
  vertical-align: top;
}
.mkt-compare td.mkt-compare__us {
  background: rgba(99,91,255,0.04);
  color: var(--mkt-ink);
  font-weight: 500;
}
.mkt-check  { color: #22a06b; font-weight: 700; }
.mkt-cross  { color: #d04e4e; font-weight: 700; }

/* ---------- Scroll fade-in (Alpine.js x-intersect) ---------- */
.mkt-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.mkt-fade-in.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Pricing card ---------- */
.mkt-plan {
  background: #fff;
  border-radius: var(--mkt-radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--mkt-shadow);
  position: relative;
  transition: transform 300ms, box-shadow 300ms;
}
.mkt-plan:hover { transform: translateY(-4px); box-shadow: var(--mkt-shadow-lg); }
.mkt-plan--featured {
  background: linear-gradient(180deg, #fff 0%, #f8f9fe 100%);
  position: relative;
  padding-top: 36px;
}
.mkt-plan--featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--mkt-radius-lg) + 2px);
  background: linear-gradient(135deg, var(--mkt-hero-cyan), var(--mkt-accent), var(--mkt-hero-pink));
  z-index: -1;
}
.mkt-plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mkt-accent);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mkt-plan__name {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mkt-accent);
}
.mkt-plan__price {
  margin-top: 16px;
  font-size: 48px;
  font-weight: 700;
  color: var(--mkt-ink);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mkt-plan__price-suffix {
  font-size: 16px;
  font-weight: 500;
  color: var(--mkt-ink-mute);
}
.mkt-plan__features {
  margin-top: 24px;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.mkt-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--mkt-ink-soft);
  line-height: 1.5;
}
.mkt-plan__features li::before {
  content: '✓';
  color: var(--mkt-accent);
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- FAQ accordion ---------- */
.mkt-faq__item {
  border-top: 1px solid var(--mkt-border-soft);
  padding: 20px 0;
}
.mkt-faq__q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 600;
  color: var(--mkt-ink);
  cursor: pointer;
  letter-spacing: -0.01em;
}
.mkt-faq__a {
  margin-top: 12px;
  color: var(--mkt-ink-soft);
  font-size: 15px;
  line-height: 1.6;
}
.mkt-faq__chevron {
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  transition: transform 200ms;
  color: var(--mkt-ink-mute);
}
.mkt-faq__item.is-open .mkt-faq__chevron { transform: rotate(180deg); }
.mkt-faq__item .mkt-faq__a { display: none; }
.mkt-faq__item.is-open .mkt-faq__a { display: block; }

/* ---------- Forms (used by signup, demo, etc.) ---------- */
.auth-input,
.mkt-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--mkt-border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--mkt-ink);
  transition: border-color 150ms, box-shadow 150ms;
  box-shadow: 0 1px 2px rgba(10,37,64,0.04);
  appearance: none;
  -webkit-appearance: none;
}
.auth-input::placeholder,
.mkt-input::placeholder { color: var(--mkt-ink-mute); opacity: 1; }
.auth-input:hover,
.mkt-input:hover { border-color: #c4cbd6; }
.auth-input:focus,
.mkt-input:focus {
  outline: 0;
  border-color: var(--mkt-accent);
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.14);
}
/* Only show the red invalid border once the user has interacted, not on blank pristine fields */
.auth-input:user-invalid,
.mkt-input:user-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}
.auth-label,
.mkt-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--mkt-ink);
  margin-bottom: 6px;
}
.auth-error,
.mkt-form-error {
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 10px 14px;
  color: #991b1b;
  font-size: 13px;
}

/* Buttons shouldn't show the default UA focus ring as a thick red/blue line.
   Plan picker buttons need this most. */
button.mkt-plan-pick:focus,
button.mkt-plan-pick:focus-visible {
  outline: 0;
}
button.mkt-plan-pick:focus-visible {
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.18);
}

/* ---------- Video grid ---------- */
.mkt-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .mkt-videos { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
.mkt-video-card {
  background: #fff;
  border-radius: var(--mkt-radius-lg);
  box-shadow: 0 1px 2px rgba(10,37,64,0.04), 0 0 0 1px rgba(10,37,64,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 300ms, box-shadow 300ms;
}
.mkt-video-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px -4px rgba(10,37,64,0.12), 0 0 0 1px rgba(10,37,64,0.05);
}
.mkt-video-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--mkt-bg-dark);
  overflow: hidden;
}
.mkt-video__frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}
.mkt-video-card__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--mkt-bg-dark) 0%, #122e4f 100%);
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
  gap: 12px;
}
.mkt-video-card__placeholder::before {
  content: '';
  display: block;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'%3E%3C/polygon%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 56% center;
  margin-bottom: 8px;
}
.mkt-video-card__body { padding: 20px 24px 24px; }
.mkt-video-card__title { font-size: 18px; font-weight: 600; color: var(--mkt-ink); letter-spacing: -0.015em; margin: 0 0 6px; }
.mkt-video-card__sub   { font-size: 14px; color: var(--mkt-ink-soft); line-height: 1.55; margin: 0; }

/* ---------- Misc utility ---------- */
.mkt-divider {
  height: 1px;
  background: var(--mkt-border-soft);
  margin: 24px 0;
}
.mkt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mkt-bg-soft);
  font-size: 12px;
  font-weight: 500;
  color: var(--mkt-ink-soft);
}
.mkt-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  font-size: 13px;
}
.mkt-trust-row__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(10, 37, 64, 0.08);
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04);
  color: var(--mkt-ink);
  font-weight: 500;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mkt-trust-row__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  flex-shrink: 0;
}